Badge

1import { cva, type VariantProps } from "class-variance-authority";
2import {
3  Children,
4  cloneElement,
5  createContext,
6  useContext,
7  useMemo,
8} from "react";
9import { Text, View } from "react-native";
10import { cn } from "../lib/utils";
11 
12// Types
13type InternalBadgeContextType = VariantProps<typeof badgeVariants>;
14 
15type BadgeChildProps = {
16  children: React.ReactNode;
17  className?: string;
18};
19 
20export type BadgeProps = React.ComponentProps<typeof View> &
21  InternalBadgeContextType & {
22    children: React.ReactNode;
23  };
24 
25// Context
26const BadgeContext = createContext<InternalBadgeContextType | null>(null);
27 
28const useBadgeContext = () => {
29  const context = useContext(BadgeContext);
30  if (!context) {
31    throw new Error("useBadgeContext must be used within a Badge component");
32  }
33  return context;
34};
35 
36// Components
37export const Badge = ({
38  children,
39  className,
40  variant,
41  ...props
42}: BadgeProps) => {
43  const ctx = useMemo(() => {
44    return {
45      variant,
46    };
47  }, [variant]);
48 
49  return (
50    <BadgeContext.Provider value={ctx}>
51      <View className={cn(badgeVariants({ className, variant }))} {...props}>
52        {Children.map(children, (child) => {
53          if (typeof child === "string") {
54            return <BadgeText>{child}</BadgeText>;
55          }
56 
57          return child;
58        })}
59      </View>
60    </BadgeContext.Provider>
61  );
62};
63 
64export const BadgeText = (props: BadgeChildProps) => {
65  const ctx = useBadgeContext();
66 
67  return (
68    <Text {...props} className={cn(badgeTextVariants(ctx), props.className)} />
69  );
70};
71 
72export const BadgeIcon = ({ children, ...props }: BadgeChildProps) => {
73  const ctx = useBadgeContext();
74 
75  const child = Children.only(children);
76 
77  if (!child) {
78    if (__DEV__) {
79      throw new Error("BadgeIcon expects a single React element as children");
80    }
81    return null;
82  }
83 
84  return cloneElement(child as React.ReactElement<BadgeChildProps>, {
85    ...props,
86    className: cn(badgeIconVariants(ctx), props.className),
87  });
88};
89 
90// Styles
91const badgeVariants = cva(
92  "flex w-fit shrink-0 flex-row items-center justify-center gap-1.5 self-start overflow-hidden whitespace-nowrap rounded-md border border-border px-2 py-1 font-medium text-xs transition-[color,box-shadow] aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
93  {
94    defaultVariants: {
95      variant: "default",
96    },
97    variants: {
98      variant: {
99        default: "border-transparent bg-primary",
100// … truncated