@react-native-reusables/cli 0.4.0 → 0.4.1

package/__generated/starter-base/app/_layout.tsx

@@ -4,7 +4,7 @@ import { DarkTheme, DefaultTheme, Theme, ThemeProvider } from '@react-navigation
 import { Stack } from 'expo-router';
 import { StatusBar } from 'expo-status-bar';
 import * as React from 'react';
-import { Platform } from 'react-native';
+import { Appearance, Platform, View } from 'react-native';
 import { NAV_THEME } from '~/lib/constants';
 import { useColorScheme } from '~/lib/useColorScheme';
 import { PortalHost } from '@rn-primitives/portal';
@@ -25,28 +25,15 @@ export {
   ErrorBoundary,
 } from 'expo-router';
 
-export default function RootLayout() {
-  const hasMounted = React.useRef(false);
-  const { colorScheme, isDarkColorScheme } = useColorScheme();
-  const [isColorSchemeLoaded, setIsColorSchemeLoaded] = React.useState(false);
-
-  useIsomorphicLayoutEffect(() => {
-    if (hasMounted.current) {
-      return;
-    }
+const usePlatformSpecificSetup = Platform.select({
+  web: useSetWebBackgroundClassName,
+  android: useSetAndroidNavigationBar,
+  default: noop,
+});
 
-    if (Platform.OS === 'web') {
-      // Adds the background color to the html element to prevent white background on overscroll.
-      document.documentElement.classList.add('bg-background');
-    }
-    setAndroidNavigationBar(colorScheme);
-    setIsColorSchemeLoaded(true);
-    hasMounted.current = true;
-  }, []);
-
-  if (!isColorSchemeLoaded) {
-    return null;
-  }
+export default function RootLayout() {
+  usePlatformSpecificSetup();
+  const { isDarkColorScheme } = useColorScheme();
 
   return (
     <ThemeProvider value={isDarkColorScheme ? DARK_THEME : LIGHT_THEME}>
@@ -67,3 +54,18 @@ export default function RootLayout() {
 
 const useIsomorphicLayoutEffect =
   Platform.OS === 'web' && typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
+
+function useSetWebBackgroundClassName() {
+  useIsomorphicLayoutEffect(() => {
+    // Adds the background color to the html element to prevent white background on overscroll.
+    document.documentElement.classList.add('bg-background');
+  }, []);
+}
+
+function useSetAndroidNavigationBar() {
+  React.useLayoutEffect(() => {
+    setAndroidNavigationBar(Appearance.getColorScheme() ?? 'light');
+  }, []);
+}
+
+function noop() {}

package/__generated/starter-base/components/ThemeToggle.tsx

@@ -3,7 +3,6 @@ import { setAndroidNavigationBar } from '~/lib/android-navigation-bar';
 import { MoonStar } from '~/lib/icons/MoonStar';
 import { Sun } from '~/lib/icons/Sun';
 import { useColorScheme } from '~/lib/useColorScheme';
-import { cn } from '~/lib/utils';
 
 export function ThemeToggle() {
   const { isDarkColorScheme, setColorScheme } = useColorScheme();
@@ -17,22 +16,15 @@ export function ThemeToggle() {
   return (
     <Pressable
       onPress={toggleColorScheme}
-      className='web:ring-offset-background web:transition-colors web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2'
+      className='web:ring-offset-background web:transition-colors web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2 active:opacity-70'
     >
-      {({ pressed }) => (
-        <View
-          className={cn(
-            'flex-1 aspect-square pt-0.5 justify-center items-start web:px-5',
-            pressed && 'opacity-70'
-          )}
-        >
-          {isDarkColorScheme ? (
-            <MoonStar className='text-foreground' size={23} strokeWidth={1.25} />
-          ) : (
-            <Sun className='text-foreground' size={24} strokeWidth={1.25} />
-          )}
-        </View>
-      )}
+      <View className='flex-1 aspect-square pt-0.5 justify-center items-start web:px-5'>
+        {isDarkColorScheme ? (
+          <MoonStar className='text-foreground' size={23} strokeWidth={1.25} />
+        ) : (
+          <Sun className='text-foreground' size={24} strokeWidth={1.25} />
+        )}
+      </View>
     </Pressable>
   );
 }

package/__generated/starter-base/components/ui/avatar.tsx

@@ -2,44 +2,46 @@ import * as AvatarPrimitive from '@rn-primitives/avatar';
 import * as React from 'react';
 import { cn } from '~/lib/utils';
 
-const AvatarPrimitiveRoot = AvatarPrimitive.Root;
-const AvatarPrimitiveImage = AvatarPrimitive.Image;
-const AvatarPrimitiveFallback = AvatarPrimitive.Fallback;
-
-const Avatar = React.forwardRef<AvatarPrimitive.RootRef, AvatarPrimitive.RootProps>(
-  ({ className, ...props }, ref) => (
-    <AvatarPrimitiveRoot
-      ref={ref}
+function Avatar({
+  className,
+  ...props
+}: AvatarPrimitive.RootProps & {
+  ref?: React.RefObject<AvatarPrimitive.RootRef>;
+}) {
+  return (
+    <AvatarPrimitive.Root
       className={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)}
       {...props}
     />
-  )
-);
-Avatar.displayName = AvatarPrimitiveRoot.displayName;
+  );
+}
 
-const AvatarImage = React.forwardRef<AvatarPrimitive.ImageRef, AvatarPrimitive.ImageProps>(
-  ({ className, ...props }, ref) => (
-    <AvatarPrimitiveImage
-      ref={ref}
-      className={cn('aspect-square h-full w-full', className)}
-      {...props}
-    />
-  )
-);
-AvatarImage.displayName = AvatarPrimitiveImage.displayName;
+function AvatarImage({
+  className,
+  ...props
+}: AvatarPrimitive.ImageProps & {
+  ref?: React.RefObject<AvatarPrimitive.ImageRef>;
+}) {
+  return (
+    <AvatarPrimitive.Image className={cn('aspect-square h-full w-full', className)} {...props} />
+  );
+}
 
-const AvatarFallback = React.forwardRef<AvatarPrimitive.FallbackRef, AvatarPrimitive.FallbackProps>(
-  ({ className, ...props }, ref) => (
-    <AvatarPrimitiveFallback
-      ref={ref}
+function AvatarFallback({
+  className,
+  ...props
+}: AvatarPrimitive.FallbackProps & {
+  ref?: React.RefObject<AvatarPrimitive.FallbackRef>;
+}) {
+  return (
+    <AvatarPrimitive.Fallback
       className={cn(
         'flex h-full w-full items-center justify-center rounded-full bg-muted',
         className
       )}
       {...props}
     />
-  )
-);
-AvatarFallback.displayName = AvatarPrimitiveFallback.displayName;
+  );
+}
 
 export { Avatar, AvatarFallback, AvatarImage };

package/__generated/starter-base/components/ui/button.tsx

@@ -15,7 +15,7 @@ const buttonVariants = cva(
           'border border-input bg-background web:hover:bg-accent web:hover:text-accent-foreground active:bg-accent',
         secondary: 'bg-secondary web:hover:opacity-80 active:opacity-80',
         ghost: 'web:hover:bg-accent web:hover:text-accent-foreground active:bg-accent',
-        link: 'web:underline-offset-4 web:hover:underline web:focus:underline ',
+        link: 'web:underline-offset-4 web:hover:underline web:focus:underline',
       },
       size: {
         default: 'h-10 px-4 py-2 native:h-12 native:px-5 native:py-3',
@@ -57,32 +57,25 @@ const buttonTextVariants = cva(
   }
 );
 
-type ButtonProps = React.ComponentPropsWithoutRef<typeof Pressable> &
-  VariantProps<typeof buttonVariants>;
+type ButtonProps = React.ComponentProps<typeof Pressable> & VariantProps<typeof buttonVariants>;
 
-const Button = React.forwardRef<React.ElementRef<typeof Pressable>, ButtonProps>(
-  ({ className, variant, size, ...props }, ref) => {
-    return (
-      <TextClassContext.Provider
-        value={cn(
-          props.disabled && 'web:pointer-events-none',
-          buttonTextVariants({ variant, size })
+function Button({ ref, className, variant, size, ...props }: ButtonProps) {
+  return (
+    <TextClassContext.Provider
+      value={buttonTextVariants({ variant, size, className: 'web:pointer-events-none' })}
+    >
+      <Pressable
+        className={cn(
+          props.disabled && 'opacity-50 web:pointer-events-none',
+          buttonVariants({ variant, size, className })
         )}
-      >
-        <Pressable
-          className={cn(
-            props.disabled && 'opacity-50 web:pointer-events-none',
-            buttonVariants({ variant, size, className })
-          )}
-          ref={ref}
-          role='button'
-          {...props}
-        />
-      </TextClassContext.Provider>
-    );
-  }
-);
-Button.displayName = 'Button';
+        ref={ref}
+        role='button'
+        {...props}
+      />
+    </TextClassContext.Provider>
+  );
+}
 
 export { Button, buttonTextVariants, buttonVariants };
 export type { ButtonProps };

package/__generated/starter-base/components/ui/card.tsx

@@ -1,57 +1,82 @@
-import type { TextRef, ViewRef } from '@rn-primitives/types';
 import * as React from 'react';
 import { Text, TextProps, View, ViewProps } from 'react-native';
 import { TextClassContext } from '~/components/ui/text';
 import { cn } from '~/lib/utils';
 
-const Card = React.forwardRef<ViewRef, ViewProps>(({ className, ...props }, ref) => (
-  <View
-    ref={ref}
-    className={cn(
-      'rounded-lg border border-border bg-card shadow-sm shadow-foreground/10',
-      className
-    )}
-    {...props}
-  />
-));
-Card.displayName = 'Card';
+function Card({
+  className,
+  ...props
+}: ViewProps & {
+  ref?: React.RefObject<View>;
+}) {
+  return (
+    <View
+      className={cn(
+        'rounded-lg border border-border bg-card shadow-sm shadow-foreground/10',
+        className
+      )}
+      {...props}
+    />
+  );
+}
 
-const CardHeader = React.forwardRef<ViewRef, ViewProps>(({ className, ...props }, ref) => (
-  <View ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
-));
-CardHeader.displayName = 'CardHeader';
+function CardHeader({
+  className,
+  ...props
+}: ViewProps & {
+  ref?: React.RefObject<View>;
+}) {
+  return <View className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />;
+}
 
-const CardTitle = React.forwardRef<TextRef, React.ComponentPropsWithoutRef<typeof Text>>(
-  ({ className, ...props }, ref) => (
+function CardTitle({
+  className,
+  ...props
+}: TextProps & {
+  ref?: React.RefObject<Text>;
+}) {
+  return (
     <Text
       role='heading'
       aria-level={3}
-      ref={ref}
       className={cn(
         'text-2xl text-card-foreground font-semibold leading-none tracking-tight',
         className
       )}
       {...props}
     />
-  )
-);
-CardTitle.displayName = 'CardTitle';
+  );
+}
 
-const CardDescription = React.forwardRef<TextRef, TextProps>(({ className, ...props }, ref) => (
-  <Text ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
-));
-CardDescription.displayName = 'CardDescription';
+function CardDescription({
+  className,
+  ...props
+}: TextProps & {
+  ref?: React.RefObject<Text>;
+}) {
+  return <Text className={cn('text-sm text-muted-foreground', className)} {...props} />;
+}
 
-const CardContent = React.forwardRef<ViewRef, ViewProps>(({ className, ...props }, ref) => (
-  <TextClassContext.Provider value='text-card-foreground'>
-    <View ref={ref} className={cn('p-6 pt-0', className)} {...props} />
-  </TextClassContext.Provider>
-));
-CardContent.displayName = 'CardContent';
+function CardContent({
+  className,
+  ...props
+}: ViewProps & {
+  ref?: React.RefObject<View>;
+}) {
+  return (
+    <TextClassContext.Provider value='text-card-foreground'>
+      <View className={cn('p-6 pt-0', className)} {...props} />
+    </TextClassContext.Provider>
+  );
+}
 
-const CardFooter = React.forwardRef<ViewRef, ViewProps>(({ className, ...props }, ref) => (
-  <View ref={ref} className={cn('flex flex-row items-center p-6 pt-0', className)} {...props} />
-));
-CardFooter.displayName = 'CardFooter';
+function CardFooter({
+  className,
+  ...props
+}: ViewProps & {
+  ref?: React.RefObject<View>;
+}) {
+  return <View className={cn('flex flex-row items-center p-6 pt-0', className)} {...props} />;
+}
 
 export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

package/__generated/starter-base/components/ui/progress.tsx

@@ -10,23 +10,24 @@ import Animated, {
 } from 'react-native-reanimated';
 import { cn } from '~/lib/utils';
 
-const Progress = React.forwardRef<
-  ProgressPrimitive.RootRef,
-  ProgressPrimitive.RootProps & {
-    indicatorClassName?: string;
-  }
->(({ className, value, indicatorClassName, ...props }, ref) => {
+function Progress({
+  className,
+  value,
+  indicatorClassName,
+  ...props
+}: ProgressPrimitive.RootProps & {
+  ref?: React.RefObject<ProgressPrimitive.RootRef>;
+  indicatorClassName?: string;
+}) {
   return (
     <ProgressPrimitive.Root
-      ref={ref}
       className={cn('relative h-4 w-full overflow-hidden rounded-full bg-secondary', className)}
       {...props}
     >
       <Indicator value={value} className={indicatorClassName} />
     </ProgressPrimitive.Root>
   );
-});
-Progress.displayName = ProgressPrimitive.Root.displayName;
+}
 
 export { Progress };
 
@@ -48,7 +49,7 @@ function Indicator({ value, className }: { value: number | undefined | null; cla
         className={cn('h-full w-full flex-1 bg-primary web:transition-all', className)}
         style={{ transform: `translateX(-${100 - (value ?? 0)}%)` }}
       >
-        <ProgressPrimitive.Indicator className={cn('h-full w-full ', className)} />
+        <ProgressPrimitive.Indicator className={cn('h-full w-full', className)} />
       </View>
     );
   }

package/__generated/starter-base/components/ui/text.tsx

@@ -1,24 +1,26 @@
 import * as Slot from '@rn-primitives/slot';
-import type { SlottableTextProps, TextRef } from '@rn-primitives/types';
 import * as React from 'react';
 import { Text as RNText } from 'react-native';
 import { cn } from '~/lib/utils';
 
 const TextClassContext = React.createContext<string | undefined>(undefined);
 
-const Text = React.forwardRef<TextRef, SlottableTextProps>(
-  ({ className, asChild = false, ...props }, ref) => {
-    const textClass = React.useContext(TextClassContext);
-    const Component = asChild ? Slot.Text : RNText;
-    return (
-      <Component
-        className={cn('text-base text-foreground web:select-text', textClass, className)}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
-Text.displayName = 'Text';
+function Text({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<typeof RNText> & {
+  ref?: React.RefObject<RNText>;
+  asChild?: boolean;
+}) {
+  const textClass = React.useContext(TextClassContext);
+  const Component = asChild ? Slot.Text : RNText;
+  return (
+    <Component
+      className={cn('text-base text-foreground web:select-text', textClass, className)}
+      {...props}
+    />
+  );
+}
 
 export { Text, TextClassContext };

package/__generated/starter-base/components/ui/tooltip.tsx

@@ -9,31 +9,36 @@ const Tooltip = TooltipPrimitive.Root;
 
 const TooltipTrigger = TooltipPrimitive.Trigger;
 
-const TooltipContent = React.forwardRef<
-  TooltipPrimitive.ContentRef,
-  TooltipPrimitive.ContentProps & { portalHost?: string }
->(({ className, sideOffset = 4, portalHost, ...props }, ref) => (
-  <TooltipPrimitive.Portal hostName={portalHost}>
-    <TooltipPrimitive.Overlay style={Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined}>
-      <Animated.View
-        entering={Platform.select({ web: undefined, default: FadeIn })}
-        exiting={Platform.select({ web: undefined, default: FadeOut })}
-      >
-        <TextClassContext.Provider value='text-sm native:text-base text-popover-foreground'>
-          <TooltipPrimitive.Content
-            ref={ref}
-            sideOffset={sideOffset}
-            className={cn(
-              'z-50 overflow-hidden rounded-md border border-border bg-popover px-3 py-1.5 shadow-md shadow-foreground/5 web:animate-in web:fade-in-0 web:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-              className
-            )}
-            {...props}
-          />
-        </TextClassContext.Provider>
-      </Animated.View>
-    </TooltipPrimitive.Overlay>
-  </TooltipPrimitive.Portal>
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+function TooltipContent({
+  className,
+  sideOffset = 4,
+  portalHost,
+  ...props
+}: TooltipPrimitive.ContentProps & {
+  ref?: React.RefObject<TooltipPrimitive.ContentRef>;
+  portalHost?: string;
+}) {
+  return (
+    <TooltipPrimitive.Portal hostName={portalHost}>
+      <TooltipPrimitive.Overlay style={Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined}>
+        <Animated.View
+          entering={Platform.select({ web: undefined, default: FadeIn })}
+          exiting={Platform.select({ web: undefined, default: FadeOut })}
+        >
+          <TextClassContext.Provider value='text-sm native:text-base text-popover-foreground'>
+            <TooltipPrimitive.Content
+              sideOffset={sideOffset}
+              className={cn(
+                'z-50 overflow-hidden rounded-md border border-border bg-popover px-3 py-1.5 shadow-md shadow-foreground/5 web:animate-in web:fade-in-0 web:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+                className
+              )}
+              {...props}
+            />
+          </TextClassContext.Provider>
+        </Animated.View>
+      </TooltipPrimitive.Overlay>
+    </TooltipPrimitive.Portal>
+  );
+}
 
 export { Tooltip, TooltipContent, TooltipTrigger };

package/__generated/starter-base/package.json

@@ -19,7 +19,6 @@
     "@rn-primitives/progress": "~1.2.0",
     "@rn-primitives/slot": "~1.2.0",
     "@rn-primitives/tooltip": "~1.2.0",
-    "@rn-primitives/types": "~1.2.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "expo": "^53.0.9",
@@ -41,8 +40,7 @@
     "react-native-web": "~0.20.0",
     "tailwind-merge": "^2.2.1",
     "tailwindcss": "3.3.5",
-    "tailwindcss-animate": "^1.0.7",
-    "zustand": "^4.4.7"
+    "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@babel/core": "^7.26.0",

package/dist/index.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import{createMatchPath as Y}from"tsconfig-paths";async function I(e,o){return Y(o.absoluteBaseUrl,o.paths)(e,void 0,()=>!0,[".ts",".tsx"])}import{cosmiconfig as Z}from"cosmiconfig";import{loadConfig as ee}from"tsconfig-paths";import{z as f}from"zod";var $="~/components",E="~/lib",oe=Z("components",{searchPlaces:["components.json"]}),C=f.object({aliases:f.object({components:f.string(),lib:f.string()})}),te=C.extend({resolvedPaths:f.object({lib:f.string(),components:f.string()})});async function M(e){let o=await ne(e);return o?await S(e,o):null}async function S(e,o){let t=await ee(e);if(t.resultType==="failed")throw new Error(`Failed to load tsconfig.json. ${t.message??""}`.trim());return te.parse({...o,resolvedPaths:{lib:await I(o.aliases.lib,t),components:await I(o.aliases.components,t)}})}async function ne(e){try{let o=await oe.search(e);return o?C.parse(o.config):null}catch{throw new Error(`Invalid configuration found in ${e}/components.json.`)}}import{detect as re}from"@antfu/ni";async function L(e){let o=await re({programmatic:!0,cwd:e});return o==="yarn@berry"?"yarn":o==="pnpm@6"?"pnpm":o??"npm"}import P from"chalk";var a={error(...e){console.log(P.red(...e))},warn(...e){console.log(P.yellow(...e))},info(...e){console.log(P.cyan(...e))},success(...e){console.log(P.green(...e))},break(){console.log("")}};function d(e){typeof e=="string"&&(a.error(e),process.exit(1)),e instanceof Error&&(a.error(e.message),process.exit(1)),a.error("Something went wrong. Please try again."),process.exit(1)}import ie from"chalk";import{promises as se}from"fs";import ae from"ora";import ce from"path";import W from"prompts";async function z(e){let o=n=>ie.cyan(n),t=await W([{type:"text",name:"components",message:`Configure the import alias for ${o("components")}:`,initial:$},{type:"text",name:"lib",message:`Configure the import alias for ${o("lib")}:`,initial:E}]),r=C.parse({aliases:{lib:t.lib||$,components:t.components||E}}),{proceed:i}=await W({type:"confirm",name:"proceed",message:`Write configuration to ${o("components.json")}. Proceed?`,initial:!0});if(i){a.info("");let n=ae("Writing components.json...").start(),s=ce.resolve(e,"components.json");await se.writeFile(s,JSON.stringify(r,null,2),"utf8"),n.succeed()}return await S(e,r)}import h from"chalk";import{Command as pe}from"commander";import{execa as me}from"execa";import{existsSync as y,promises as x}from"fs";import le from"ora";import p from"path";import O from"prompts";import{fileURLToPath as de}from"url";import{z as w}from"zod";var u=[{name:"accordion",dependencies:["text"],icons:["ChevronDown"],npmPackages:["@rn-primitives/accordion"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/accordion.tsx",to:{folder:"ui",file:"accordion.tsx"}}]},{name:"alert",dependencies:["text"],icons:[],npmPackages:[],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/alert.tsx",to:{folder:"ui",file:"alert.tsx"}}]},{name:"alert-dialog",dependencies:["button","text"],icons:[],npmPackages:["@rn-primitives/alert-dialog"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/alert-dialog.tsx",to:{folder:"ui",file:"alert-dialog.tsx"}}]},{name:"aspect-ratio",dependencies:[],icons:[],npmPackages:["@rn-primitives/aspect-ratio"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/aspect-ratio.tsx",to:{folder:"ui",file:"aspect-ratio.tsx"}}]},{name:"avatar",dependencies:[],icons:[],npmPackages:["@rn-primitives/avatar"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/avatar.tsx",to:{folder:"ui",file:"avatar.tsx"}}]},{name:"badge",dependencies:[],icons:[],npmPackages:["@rn-primitives/slot","@rn-primitives/types"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/badge.tsx",to:{folder:"ui",file:"badge.tsx"}}]},{name:"button",dependencies:["text"],icons:[],npmPackages:["@rn-primitives/types"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/button.tsx",to:{folder:"ui",file:"button.tsx"}}]},{name:"card",dependencies:["text"],icons:[],npmPackages:["@rn-primitives/types"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/card.tsx",to:{folder:"ui",file:"card.tsx"}}]},{name:"checkbox",dependencies:[],icons:["Check"],npmPackages:["@rn-primitives/checkbox"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/checkbox.tsx",to:{folder:"ui",file:"checkbox.tsx"}}]},{name:"collapsible",dependencies:[],icons:[],npmPackages:["@rn-primitives/collapsible"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/collapsible.tsx",to:{folder:"ui",file:"collapsible.tsx"}}]},{name:"context-menu",dependencies:["text"],icons:["Check","ChevronDown","ChevronRight","ChevronUp"],npmPackages:["@rn-primitives/context-menu"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/context-menu.tsx",to:{folder:"ui",file:"context-menu.tsx"}}]},{name:"dialog",dependencies:[],icons:["X"],npmPackages:["@rn-primitives/dialog"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/dialog.tsx",to:{folder:"ui",file:"dialog.tsx"}}]},{name:"dropdown-menu",dependencies:["text"],icons:["Check","ChevronDown","ChevronRight","ChevronUp"],npmPackages:["@rn-primitives/dropdown-menu"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/dropdown-menu.tsx",to:{folder:"ui",file:"dropdown-menu.tsx"}}]},{name:"hover-card",dependencies:[],icons:[],npmPackages:["@rn-primitives/hover-card"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/hover-card.tsx",to:{folder:"ui",file:"hover-card.tsx"}}]},{name:"input",dependencies:[],icons:[],npmPackages:[],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/input.tsx",to:{folder:"ui",file:"input.tsx"}}]},{name:"label",dependencies:[],icons:[],npmPackages:["@rn-primitives/label"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/label.tsx",to:{folder:"ui",file:"label.tsx"}}]},{name:"menubar",dependencies:["text"],icons:["Check","ChevronDown","ChevronRight","ChevronUp"],npmPackages:["@rn-primitives/menubar"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/menubar.tsx",to:{folder:"ui",file:"menubar.tsx"}}]},{name:"navigation-menu",dependencies:[],icons:["ChevronDown"],npmPackages:["@rn-primitives/navigation-menu"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/navigation-menu.tsx",to:{folder:"ui",file:"navigation-menu.tsx"}}]},{name:"popover",dependencies:["text"],icons:[],npmPackages:["@rn-primitives/popover"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/popover.tsx",to:{folder:"ui",file:"popover.tsx"}}]},{name:"progress",dependencies:[],icons:[],npmPackages:["@rn-primitives/progress"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/progress.tsx",to:{folder:"ui",file:"progress.tsx"}}]},{name:"radio-group",dependencies:[],icons:[],npmPackages:["@rn-primitives/radio-group"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/radio-group.tsx",to:{folder:"ui",file:"radio-group.tsx"}}]},{name:"select",dependencies:[],icons:["Check","ChevronDown","ChevronUp"],npmPackages:["@rn-primitives/select"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/select.tsx",to:{folder:"ui",file:"select.tsx"}}]},{name:"separator",dependencies:[],icons:[],npmPackages:["@rn-primitives/separator"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/separator.tsx",to:{folder:"ui",file:"separator.tsx"}}]},{name:"skeleton",dependencies:[],icons:[],npmPackages:[],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/skeleton.tsx",to:{folder:"ui",file:"skeleton.tsx"}}]},{name:"switch",dependencies:[],icons:[],npmPackages:["@rn-primitives/switch"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/switch.tsx",to:{folder:"ui",file:"switch.tsx"}}]},{name:"table",dependencies:["text"],icons:[],npmPackages:["@rn-primitives/table"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/table.tsx",to:{folder:"ui",file:"table.tsx"}}]},{name:"tabs",dependencies:["text"],icons:[],npmPackages:["@rn-primitives/tabs"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/tabs.tsx",to:{folder:"ui",file:"tabs.tsx"}}]},{name:"text",dependencies:[],icons:[],npmPackages:["@rn-primitives/slot","@rn-primitives/types"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/text.tsx",to:{folder:"ui",file:"text.tsx"}}]},{name:"textarea",dependencies:[],icons:[],npmPackages:[],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/textarea.tsx",to:{folder:"ui",file:"textarea.tsx"}}]},{name:"toggle",dependencies:["text"],icons:[],npmPackages:["@rn-primitives/toggle"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/toggle.tsx",to:{folder:"ui",file:"toggle.tsx"}}]},{name:"toggle-group",dependencies:["text"],icons:[],npmPackages:["@rn-primitives/toggle-group"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/toggle-group.tsx",to:{folder:"ui",file:"toggle-group.tsx"}}]},{name:"tooltip",dependencies:["text"],icons:[],npmPackages:["@rn-primitives/tooltip"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/tooltip.tsx",to:{folder:"ui",file:"tooltip.tsx"}}]},{name:"typography",dependencies:[],icons:[],npmPackages:["@rn-primitives/slot","@rn-primitives/types"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/typography.tsx",to:{folder:"ui",file:"typography.tsx"}}]}];function U(e,o=new Set){let t=u.find(i=>i.name===e);if(!t)return[];o.add(e);let r=t.dependencies.slice();return t.dependencies.forEach(i=>{if(!o.has(i)){let n=U(i,o);r=r.concat(n)}}),r}var j="invalid component";function G(e){let o=new Set;if(e.some(t=>!u.find(r=>r.name===t)))throw new Error(j);return e.forEach(t=>{let r=U(t);r.unshift(t),r.forEach(i=>{o.add(i)})}),Array.from(o).map(t=>{let r=u.find(i=>i.name===t);if(!r)throw new Error(j);return r})}var fe=de(import.meta.url),V=p.dirname(fe),ue=w.object({components:w.array(w.string()).optional(),overwrite:w.boolean(),cwd:w.string(),path:w.string().optional()}),B=new pe().name("add").description("add components to your project").argument("[components...]","the components to add").option("-o, --overwrite","overwrite existing files.",!1).option("-c, --cwd <cwd>","the working directory. defaults to the current directory.",process.cwd()).action(async(e,o)=>{try{let t=ue.parse({components:e,...o}),r=p.resolve(t.cwd);y(r)||(a.error(`The path ${r} does not exist. Please try again.`),process.exit(1));let i=await M(r);i||(i=await z(r));let n=t.components??[];if(!n?.length){let{components:l}=await O({type:"multiselect",name:"components",message:"Which components would you like to add?",hint:"Space to select. A to toggle all. Enter to submit.",instructions:!1,choices:u.map(k=>({title:k.name,value:k.name,selected:!1}))});n=l}n?.length||(a.warn("No components selected. Exiting."),process.exit(0));let s=le("Installing components...").start(),m=[];try{m=G(n)}catch(l){l instanceof Error&&l.message===j&&(a.error(`Invalid component(s): ${n.filter(k=>!u.find(Q=>Q.name===k)).join(", ")}`),process.exit(1)),a.error(l)}let c=[];for(let l of m)s.text=`Installing ${l.name}...`,await ge(l,l.paths,i,s,t.overwrite),c.push(...l.npmPackages);let b=await L(r),T=Array.from(new Set(c));T.length&&(s.text=`Installing ${T.join(", ")}...`,await me(b,[b==="npm"?"install":"add",...T],{cwd:r})),s.succeed("Done.")}catch(t){d(t)}});async function ge(e,o,t,r,i){for(let n of o){let s=p.join(t.resolvedPaths.components,n.to.folder);if(y(s)||await x.mkdir(s,{recursive:!0}),r.stop(),y(p.join(s,n.to.file))){let c=[n.to.folder,n.to.file].join("/");if(!i){a.info(`File already exists: ${h.bgCyan(c)} was skipped. To overwrite, run with the ${h.green("--overwrite")} flag.`);continue}let{overwrite:b}=await O({type:"confirm",name:"overwrite",message:`File already exists: ${h.yellow(c)}. Would you like to overwrite?`,initial:!1});if(!b){a.info("Skipped");continue}}r.start(`Installing ${e.name}...`);let m=n.distFrom?p.join(V,"../__generated/components",n.distFrom):p.join(V,"../__generated/components",n.to.folder,n.to.file);try{let c=await x.readFile(p.resolve(m),"utf8");await x.writeFile(p.join(s,n.to.file),he(c,t.aliases.components,t.aliases.lib))}catch(c){d(c)}}for(let n of e.icons??[]){let s=p.resolve(t.resolvedPaths.lib,"icons");if(!y(s)){await x.mkdir(s,{recursive:!0});try{await x.writeFile(p.join(s,"iconWithClassName.ts"),`import type { LucideIcon } from 'lucide-react-native';
+import{createMatchPath as Y}from"tsconfig-paths";async function I(e,o){return Y(o.absoluteBaseUrl,o.paths)(e,void 0,()=>!0,[".ts",".tsx"])}import{cosmiconfig as Z}from"cosmiconfig";import{loadConfig as ee}from"tsconfig-paths";import{z as f}from"zod";var $="~/components",E="~/lib",oe=Z("components",{searchPlaces:["components.json"]}),C=f.object({aliases:f.object({components:f.string(),lib:f.string()})}),te=C.extend({resolvedPaths:f.object({lib:f.string(),components:f.string()})});async function M(e){let o=await ne(e);return o?await S(e,o):null}async function S(e,o){let t=await ee(e);if(t.resultType==="failed")throw new Error(`Failed to load tsconfig.json. ${t.message??""}`.trim());return te.parse({...o,resolvedPaths:{lib:await I(o.aliases.lib,t),components:await I(o.aliases.components,t)}})}async function ne(e){try{let o=await oe.search(e);return o?C.parse(o.config):null}catch{throw new Error(`Invalid configuration found in ${e}/components.json.`)}}import{detect as re}from"@antfu/ni";async function L(e){let o=await re({programmatic:!0,cwd:e});return o==="yarn@berry"?"yarn":o==="pnpm@6"?"pnpm":o??"npm"}import P from"chalk";var a={error(...e){console.log(P.red(...e))},warn(...e){console.log(P.yellow(...e))},info(...e){console.log(P.cyan(...e))},success(...e){console.log(P.green(...e))},break(){console.log("")}};function d(e){typeof e=="string"&&(a.error(e),process.exit(1)),e instanceof Error&&(a.error(e.message),process.exit(1)),a.error("Something went wrong. Please try again."),process.exit(1)}import ie from"chalk";import{promises as se}from"fs";import ae from"ora";import ce from"path";import W from"prompts";async function z(e){let o=n=>ie.cyan(n),t=await W([{type:"text",name:"components",message:`Configure the import alias for ${o("components")}:`,initial:$},{type:"text",name:"lib",message:`Configure the import alias for ${o("lib")}:`,initial:E}]),r=C.parse({aliases:{lib:t.lib||$,components:t.components||E}}),{proceed:i}=await W({type:"confirm",name:"proceed",message:`Write configuration to ${o("components.json")}. Proceed?`,initial:!0});if(i){a.info("");let n=ae("Writing components.json...").start(),s=ce.resolve(e,"components.json");await se.writeFile(s,JSON.stringify(r,null,2),"utf8"),n.succeed()}return await S(e,r)}import h from"chalk";import{Command as pe}from"commander";import{execa as me}from"execa";import{existsSync as y,promises as x}from"fs";import le from"ora";import p from"path";import O from"prompts";import{fileURLToPath as de}from"url";import{z as w}from"zod";var u=[{name:"accordion",dependencies:["text"],icons:["ChevronDown"],npmPackages:["@rn-primitives/accordion"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/accordion.tsx",to:{folder:"ui",file:"accordion.tsx"}}]},{name:"alert",dependencies:["text"],icons:[],npmPackages:[],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/alert.tsx",to:{folder:"ui",file:"alert.tsx"}}]},{name:"alert-dialog",dependencies:["button","text"],icons:[],npmPackages:["@rn-primitives/alert-dialog"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/alert-dialog.tsx",to:{folder:"ui",file:"alert-dialog.tsx"}}]},{name:"aspect-ratio",dependencies:[],icons:[],npmPackages:["@rn-primitives/aspect-ratio"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/aspect-ratio.tsx",to:{folder:"ui",file:"aspect-ratio.tsx"}}]},{name:"avatar",dependencies:[],icons:[],npmPackages:["@rn-primitives/avatar"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/avatar.tsx",to:{folder:"ui",file:"avatar.tsx"}}]},{name:"badge",dependencies:[],icons:[],npmPackages:["@rn-primitives/slot"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/badge.tsx",to:{folder:"ui",file:"badge.tsx"}}]},{name:"button",dependencies:["text"],icons:[],npmPackages:[],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/button.tsx",to:{folder:"ui",file:"button.tsx"}}]},{name:"card",dependencies:["text"],icons:[],npmPackages:[],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/card.tsx",to:{folder:"ui",file:"card.tsx"}}]},{name:"checkbox",dependencies:[],icons:["Check"],npmPackages:["@rn-primitives/checkbox"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/checkbox.tsx",to:{folder:"ui",file:"checkbox.tsx"}}]},{name:"collapsible",dependencies:[],icons:[],npmPackages:["@rn-primitives/collapsible"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/collapsible.tsx",to:{folder:"ui",file:"collapsible.tsx"}}]},{name:"context-menu",dependencies:["text"],icons:["Check","ChevronDown","ChevronRight","ChevronUp"],npmPackages:["@rn-primitives/context-menu"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/context-menu.tsx",to:{folder:"ui",file:"context-menu.tsx"}}]},{name:"dialog",dependencies:[],icons:["X"],npmPackages:["@rn-primitives/dialog"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/dialog.tsx",to:{folder:"ui",file:"dialog.tsx"}}]},{name:"dropdown-menu",dependencies:["text"],icons:["Check","ChevronDown","ChevronRight","ChevronUp"],npmPackages:["@rn-primitives/dropdown-menu"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/dropdown-menu.tsx",to:{folder:"ui",file:"dropdown-menu.tsx"}}]},{name:"hover-card",dependencies:[],icons:[],npmPackages:["@rn-primitives/hover-card"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/hover-card.tsx",to:{folder:"ui",file:"hover-card.tsx"}}]},{name:"input",dependencies:[],icons:[],npmPackages:[],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/input.tsx",to:{folder:"ui",file:"input.tsx"}}]},{name:"label",dependencies:[],icons:[],npmPackages:["@rn-primitives/label"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/label.tsx",to:{folder:"ui",file:"label.tsx"}}]},{name:"menubar",dependencies:["text"],icons:["Check","ChevronDown","ChevronRight","ChevronUp"],npmPackages:["@rn-primitives/menubar"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/menubar.tsx",to:{folder:"ui",file:"menubar.tsx"}}]},{name:"navigation-menu",dependencies:[],icons:["ChevronDown"],npmPackages:["@rn-primitives/navigation-menu"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/navigation-menu.tsx",to:{folder:"ui",file:"navigation-menu.tsx"}}]},{name:"popover",dependencies:["text"],icons:[],npmPackages:["@rn-primitives/popover"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/popover.tsx",to:{folder:"ui",file:"popover.tsx"}}]},{name:"progress",dependencies:[],icons:[],npmPackages:["@rn-primitives/progress"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/progress.tsx",to:{folder:"ui",file:"progress.tsx"}}]},{name:"radio-group",dependencies:[],icons:[],npmPackages:["@rn-primitives/radio-group"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/radio-group.tsx",to:{folder:"ui",file:"radio-group.tsx"}}]},{name:"select",dependencies:[],icons:["Check","ChevronDown","ChevronUp"],npmPackages:["@rn-primitives/select"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/select.tsx",to:{folder:"ui",file:"select.tsx"}}]},{name:"separator",dependencies:[],icons:[],npmPackages:["@rn-primitives/separator"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/separator.tsx",to:{folder:"ui",file:"separator.tsx"}}]},{name:"skeleton",dependencies:[],icons:[],npmPackages:[],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/skeleton.tsx",to:{folder:"ui",file:"skeleton.tsx"}}]},{name:"switch",dependencies:[],icons:[],npmPackages:["@rn-primitives/switch"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/switch.tsx",to:{folder:"ui",file:"switch.tsx"}}]},{name:"table",dependencies:["text"],icons:[],npmPackages:["@rn-primitives/table"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/table.tsx",to:{folder:"ui",file:"table.tsx"}}]},{name:"tabs",dependencies:["text"],icons:[],npmPackages:["@rn-primitives/tabs"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/tabs.tsx",to:{folder:"ui",file:"tabs.tsx"}}]},{name:"text",dependencies:[],icons:[],npmPackages:["@rn-primitives/slot"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/text.tsx",to:{folder:"ui",file:"text.tsx"}}]},{name:"textarea",dependencies:[],icons:[],npmPackages:[],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/textarea.tsx",to:{folder:"ui",file:"textarea.tsx"}}]},{name:"toggle",dependencies:["text"],icons:[],npmPackages:["@rn-primitives/toggle"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/toggle.tsx",to:{folder:"ui",file:"toggle.tsx"}}]},{name:"toggle-group",dependencies:["text"],icons:[],npmPackages:["@rn-primitives/toggle-group"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/toggle-group.tsx",to:{folder:"ui",file:"toggle-group.tsx"}}]},{name:"tooltip",dependencies:["text"],icons:[],npmPackages:["@rn-primitives/tooltip"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/tooltip.tsx",to:{folder:"ui",file:"tooltip.tsx"}}]},{name:"typography",dependencies:[],icons:[],npmPackages:["@rn-primitives/slot"],paths:[{from:"./node_modules/@rnr/reusables/src/components/ui/typography.tsx",to:{folder:"ui",file:"typography.tsx"}}]}];function U(e,o=new Set){let t=u.find(i=>i.name===e);if(!t)return[];o.add(e);let r=t.dependencies.slice();return t.dependencies.forEach(i=>{if(!o.has(i)){let n=U(i,o);r=r.concat(n)}}),r}var j="invalid component";function G(e){let o=new Set;if(e.some(t=>!u.find(r=>r.name===t)))throw new Error(j);return e.forEach(t=>{let r=U(t);r.unshift(t),r.forEach(i=>{o.add(i)})}),Array.from(o).map(t=>{let r=u.find(i=>i.name===t);if(!r)throw new Error(j);return r})}var fe=de(import.meta.url),V=p.dirname(fe),ue=w.object({components:w.array(w.string()).optional(),overwrite:w.boolean(),cwd:w.string(),path:w.string().optional()}),B=new pe().name("add").description("add components to your project").argument("[components...]","the components to add").option("-o, --overwrite","overwrite existing files.",!1).option("-c, --cwd <cwd>","the working directory. defaults to the current directory.",process.cwd()).action(async(e,o)=>{try{let t=ue.parse({components:e,...o}),r=p.resolve(t.cwd);y(r)||(a.error(`The path ${r} does not exist. Please try again.`),process.exit(1));let i=await M(r);i||(i=await z(r));let n=t.components??[];if(!n?.length){let{components:l}=await O({type:"multiselect",name:"components",message:"Which components would you like to add?",hint:"Space to select. A to toggle all. Enter to submit.",instructions:!1,choices:u.map(k=>({title:k.name,value:k.name,selected:!1}))});n=l}n?.length||(a.warn("No components selected. Exiting."),process.exit(0));let s=le("Installing components...").start(),m=[];try{m=G(n)}catch(l){l instanceof Error&&l.message===j&&(a.error(`Invalid component(s): ${n.filter(k=>!u.find(Q=>Q.name===k)).join(", ")}`),process.exit(1)),a.error(l)}let c=[];for(let l of m)s.text=`Installing ${l.name}...`,await ge(l,l.paths,i,s,t.overwrite),c.push(...l.npmPackages);let b=await L(r),T=Array.from(new Set(c));T.length&&(s.text=`Installing ${T.join(", ")}...`,await me(b,[b==="npm"?"install":"add",...T],{cwd:r})),s.succeed("Done.")}catch(t){d(t)}});async function ge(e,o,t,r,i){for(let n of o){let s=p.join(t.resolvedPaths.components,n.to.folder);if(y(s)||await x.mkdir(s,{recursive:!0}),r.stop(),y(p.join(s,n.to.file))){let c=[n.to.folder,n.to.file].join("/");if(!i){a.info(`File already exists: ${h.bgCyan(c)} was skipped. To overwrite, run with the ${h.green("--overwrite")} flag.`);continue}let{overwrite:b}=await O({type:"confirm",name:"overwrite",message:`File already exists: ${h.yellow(c)}. Would you like to overwrite?`,initial:!1});if(!b){a.info("Skipped");continue}}r.start(`Installing ${e.name}...`);let m=n.distFrom?p.join(V,"../__generated/components",n.distFrom):p.join(V,"../__generated/components",n.to.folder,n.to.file);try{let c=await x.readFile(p.resolve(m),"utf8");await x.writeFile(p.join(s,n.to.file),he(c,t.aliases.components,t.aliases.lib))}catch(c){d(c)}}for(let n of e.icons??[]){let s=p.resolve(t.resolvedPaths.lib,"icons");if(!y(s)){await x.mkdir(s,{recursive:!0});try{await x.writeFile(p.join(s,"iconWithClassName.ts"),`import type { LucideIcon } from 'lucide-react-native';
 import { cssInterop } from 'nativewind';
 
 export function iconWithClassName(icon: LucideIcon) {