Chip

1import { cva, type VariantProps } from "class-variance-authority";
2import {
3  Children,
4  cloneElement,
5  createContext,
6  useContext,
7  useMemo,
8} from "react";
9import { Pressable, Text } from "react-native";
10import { cn } from "../lib/utils";
11 
12// Types
13type InternalChipContextType = VariantProps<typeof chipVariants> & {
14  disabled?: boolean;
15};
16 
17type ChipChildProps = {
18  children: React.ReactNode;
19  className?: string;
20};
21 
22export type ChipProps = React.ComponentProps<typeof Pressable> &
23  InternalChipContextType & {
24    children: React.ReactNode;
25  };
26 
27// Context
28const ChipContext = createContext<InternalChipContextType | null>(null);
29 
30const useChipContext = () => {
31  const context = useContext(ChipContext);
32  if (!context) {
33    throw new Error("useChipContext must be used within a Chip component");
34  }
35  return context;
36};
37 
38// Components
39export const Chip = ({
40  accessibilityRole = "button",
41  children,
42  className,
43  disabled,
44  variant,
45  ...props
46}: ChipProps) => {
47  const ctx = useMemo(() => {
48    return {
49      disabled,
50      variant,
51    };
52  }, [disabled, variant]);
53 
54  return (
55    <ChipContext.Provider value={ctx}>
56      <Pressable
57        accessibilityRole={accessibilityRole}
58        accessibilityState={{ disabled }}
59        className={cn(chipVariants({ className, variant }))}
60        {...props}
61      >
62        {Children.map(children, (child) => {
63          if (typeof child === "string") {
64            return <ChipText>{child}</ChipText>;
65          }
66 
67          return child;
68        })}
69      </Pressable>
70    </ChipContext.Provider>
71  );
72};
73 
74export const ChipText = (props: ChipChildProps) => {
75  const ctx = useChipContext();
76 
77  return (
78    <Text {...props} className={cn(chipTextVariants(ctx), props.className)} />
79  );
80};
81 
82export const ChipIcon = ({ children, ...props }: ChipChildProps) => {
83  const ctx = useChipContext();
84 
85  const child = Children.only(children);
86 
87  if (!child) {
88    if (__DEV__) {
89      throw new Error("ChipIcon expects a single React element as children");
90    }
91    return null;
92  }
93 
94  return cloneElement(child as React.ReactElement<ChipChildProps>, {
95    ...props,
96    className: cn(chipIconVariants(ctx), props.className),
97  });
98};
99 
100// Styles
101const chipVariants = cva(
102  "flex w-fit shrink-0 flex-row items-center justify-center gap-1 self-start overflow-hidden whitespace-nowrap rounded-full px-2.5 py-1.5 font-medium text-xs",
103  {
104    defaultVariants: {
105      variant: "default",
106    },
107    variants: {
108      variant: {
109// … truncated