@nayhoo/ui 0.4.0 → 0.4.2

package/dist/index.js

@@ -73,6 +73,7 @@ __export(index_exports, {
   Spinner: () => Spinner,
   Status: () => Status,
   Switch: () => Switch,
+  SwitchThumb: () => SwitchThumb,
   Text: () => Text,
   TextField: () => TextField,
   darkTheme: () => darkTheme,
@@ -104,12 +105,22 @@ function mergeClasses(...classes) {
   return classes.filter((cls) => Boolean(cls)).join(" ");
 }
 
+// src/utils/pick.ts
+function pick(obj, ...keys) {
+  const ret = {};
+  keys.forEach((key) => {
+    ret[key] = obj[key];
+  });
+  return ret;
+}
+
 // src/components/box.tsx
 var import_react_slot = require("@radix-ui/react-slot");
 var import_jsx_runtime = require("react/jsx-runtime");
 var defaultElement = "div";
 var Box = ({ asChild, ...props }) => {
-  const box = boxRecipe({});
+  const variants = pick(props, ...boxRecipe.variants());
+  const box = boxRecipe(variants);
   const Comp = asChild ? import_react_slot.Slot : defaultElement;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Comp, { ...props, className: mergeClasses(box, props.className), children: props.children });
 };
@@ -135,17 +146,17 @@ var import_react_slot2 = require("@radix-ui/react-slot");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var defaultElement2 = "div";
 var Status = ({ asChild, ...props }) => {
-  const status = statusRecipe({});
+  const variants = pick(props, ...statusRecipe.variants());
+  const status = statusRecipe(variants);
   const Comp = asChild ? import_react_slot2.Slot : defaultElement2;
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Comp, { ...props, className: mergeClasses(status, props.className), children: props.children });
 };
 
 // src/components/avatar.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var AvatarImage = ({
-  ...props
-}) => {
-  const avatarImage = avatarImageRecipe({});
+var AvatarImage = ({ ...props }) => {
+  const variants = pick(props, ...avatarImageRecipe.variants());
+  const avatarImage = avatarImageRecipe(variants);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     AvatarPrimitive.Image,
     {
@@ -155,10 +166,9 @@ var AvatarImage = ({
     }
   );
 };
-var AvatarFallback = ({
-  ...props
-}) => {
-  const avatarFallback = avatarFallbackRecipe({});
+var AvatarFallback = ({ ...props }) => {
+  const variants = pick(props, ...avatarFallbackRecipe.variants());
+  const avatarFallback = avatarFallbackRecipe(variants);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     AvatarPrimitive.Fallback,
     {
@@ -171,14 +181,13 @@ var AvatarFallback = ({
 var Avatar2 = ({
   alt,
   fallback,
-  shape,
-  size,
   src,
   status,
   style,
   ...props
 }) => {
-  const avatar = avatarRecipe({ shape, size });
+  const variants = pick(props, ...avatarRecipe.variants());
+  const avatar = avatarRecipe(variants);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     Box,
     {
@@ -196,7 +205,7 @@ var Avatar2 = ({
             className: mergeClasses(avatar, props.className),
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AvatarImage, { alt, src }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AvatarFallback, { size })
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AvatarFallback, { size: variants.size, delayMs: 600, children: fallback })
             ]
           }
         ),
@@ -215,7 +224,7 @@ var Avatar2 = ({
             children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
               Status,
               {
-                size: size && Number(size) > 2 ? "2" : "1",
+                size: variants.size && Number(variants.size) > 2 ? "2" : "1",
                 variant: status
               }
             )
@@ -234,14 +243,9 @@ var badgeRecipe = (0, import_createRuntimeFn4.createRuntimeFn)({ defaultClassNam
 var import_react_slot3 = require("@radix-ui/react-slot");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var defaultElement3 = "span";
-var Badge = ({
-  asChild,
-  color,
-  size,
-  label,
-  ...props
-}) => {
-  const badge = badgeRecipe({ color, size });
+var Badge = ({ asChild, label, ...props }) => {
+  const variants = pick(props, ...badgeRecipe.variants());
+  const badge = badgeRecipe(variants);
   const Comp = asChild ? import_react_slot3.Slot : defaultElement3;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Comp, { ...props, className: mergeClasses(badge, props.className), children: label });
 };
@@ -254,8 +258,9 @@ var spinnerRecipe = (0, import_createRuntimeFn5.createRuntimeFn)({ defaultClassN
 var import_react_slot4 = require("@radix-ui/react-slot");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var defaultElement4 = "div";
-var Spinner = ({ asChild, size, ...props }) => {
-  const spinner = spinnerRecipe({ size });
+var Spinner = ({ asChild, ...props }) => {
+  const variants = pick(props, ...spinnerRecipe.variants());
+  const spinner = spinnerRecipe(variants);
   const Comp = asChild ? import_react_slot4.Slot : defaultElement4;
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Comp, { ...props, className: mergeClasses(spinner, props.className), children: props.children });
 };
@@ -268,34 +273,19 @@ var buttonRecipe = (0, import_createRuntimeFn6.createRuntimeFn)({ defaultClassNa
 var import_react_slot5 = require("@radix-ui/react-slot");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var defaultElement5 = "button";
-var Button = ({
-  asChild,
-  color,
-  fullWidth,
-  loading,
-  shape,
-  size,
-  variant,
-  ...props
-}) => {
-  const button = buttonRecipe({
-    color,
-    fullWidth,
-    loading,
-    shape,
-    size,
-    variant
-  });
+var Button = ({ asChild, ...props }) => {
+  const variants = pick(props, ...buttonRecipe.variants());
+  const button = buttonRecipe(variants);
   const Comp = asChild ? import_react_slot5.Slot : defaultElement5;
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     Comp,
     {
       ...props,
       className: mergeClasses(button, props.className),
-      disabled: props.disabled || Boolean(loading),
+      disabled: props.disabled || Boolean(variants.loading),
       children: [
         props.children,
-        loading && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Spinner, { style: { position: "absolute" } })
+        variants.loading && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Spinner, { style: { position: "absolute" } })
       ]
     }
   );
@@ -309,13 +299,9 @@ var cardRecipe = (0, import_createRuntimeFn7.createRuntimeFn)({ defaultClassName
 var import_react_slot6 = require("@radix-ui/react-slot");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var defaultElement6 = "div";
-var Card = ({
-  asChild,
-  disableElevation,
-  variant,
-  ...props
-}) => {
-  const card = cardRecipe({ disableElevation, variant });
+var Card = ({ asChild, ...props }) => {
+  const variants = pick(props, ...cardRecipe.variants());
+  const card = cardRecipe(variants);
   const Comp = asChild ? import_react_slot6.Slot : defaultElement6;
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Comp, { ...props, className: mergeClasses(card, props.className), children: props.children });
 };
@@ -328,8 +314,9 @@ var containerRecipe = (0, import_createRuntimeFn8.createRuntimeFn)({ defaultClas
 var import_react_slot7 = require("@radix-ui/react-slot");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var defaultElement7 = "div";
-var Container = ({ asChild, size, ...props }) => {
-  const container = containerRecipe({ size });
+var Container = ({ asChild, ...props }) => {
+  const variants = pick(props, ...containerRecipe.variants());
+  const container = containerRecipe(variants);
   const Comp = asChild ? import_react_slot7.Slot : defaultElement7;
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Comp, { ...props, className: mergeClasses(container, props.className), children: props.children });
 };
@@ -342,16 +329,9 @@ var flexRecipe = (0, import_createRuntimeFn9.createRuntimeFn)({ defaultClassName
 var import_react_slot8 = require("@radix-ui/react-slot");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var defaultElement8 = "div";
-var Flex = ({
-  asChild,
-  align,
-  direction,
-  gap,
-  justify,
-  wrap,
-  ...props
-}) => {
-  const flex = flexRecipe({ align, direction, gap, justify, wrap });
+var Flex = ({ asChild, ...props }) => {
+  const variants = pick(props, ...flexRecipe.variants());
+  const flex = flexRecipe(variants);
   const Comp = asChild ? import_react_slot8.Slot : defaultElement8;
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Comp, { ...props, className: mergeClasses(flex, props.className), children: props.children });
 };
@@ -373,11 +353,9 @@ var import_react_icons = require("@radix-ui/react-icons");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var DropdownMenu = DropdownMenuPrimitive.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-var DropdownMenuContent = ({
-  ...props
-}) => {
-  const menu = menuRecipe({});
-  const panel = panelRecipe({});
+var DropdownMenuContent = ({ ...props }) => {
+  const menu = menuRecipe(pick(props, ...menuRecipe.variants()));
+  const panel = panelRecipe(pick(props, ...panelRecipe.variants()));
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     DropdownMenuPrimitive.Content,
     {
@@ -386,10 +364,9 @@ var DropdownMenuContent = ({
     }
   ) });
 };
-var DropdownMenuItem = ({
-  ...props
-}) => {
-  const menuItem = menuItemRecipe({});
+var DropdownMenuItem = ({ ...props }) => {
+  const variants = pick(props, ...menuItemRecipe.variants());
+  const menuItem = menuItemRecipe(variants);
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     DropdownMenuPrimitive.Item,
     {
@@ -400,10 +377,9 @@ var DropdownMenuItem = ({
   );
 };
 var DropdownMenuGroup = DropdownMenuPrimitive.Group;
-var DropdownMenuLabel = ({
-  ...props
-}) => {
-  const menuLabel = menuLabelRecipe({});
+var DropdownMenuLabel = ({ ...props }) => {
+  const variants = pick(props, ...menuLabelRecipe.variants());
+  const menuLabel = menuLabelRecipe(variants);
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     DropdownMenuPrimitive.Label,
     {
@@ -416,7 +392,8 @@ var DropdownMenuLabel = ({
 var DropdownMenuSeparator = ({
   ...props
 }) => {
-  const menuSeparator = menuSeparatorRecipe({});
+  const variants = pick(props, ...menuSeparatorRecipe.variants());
+  const menuSeparator = menuSeparatorRecipe(variants);
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     DropdownMenuPrimitive.Separator,
     {
@@ -429,7 +406,8 @@ var DropdownMenuSeparator = ({
 var DropdownMenuCheckboxItem = ({
   ...props
 }) => {
-  const menuItem = menuItemRecipe({});
+  const variants = pick(props, ...menuItemRecipe.variants());
+  const menuItem = menuItemRecipe(variants);
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     DropdownMenuPrimitive.CheckboxItem,
     {
@@ -447,7 +425,8 @@ var DropdownMenuRadioItem = ({
   children,
   ...props
 }) => {
-  const menuItem = menuItemRecipe({});
+  const variants = pick(props, ...menuItemRecipe.variants());
+  const menuItem = menuItemRecipe(variants);
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     DropdownMenuPrimitive.RadioItem,
     {
@@ -493,10 +472,9 @@ var FormPrimitive = __toESM(require("@radix-ui/react-form"));
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var Form = FormPrimitive.Root;
 var FormControl = FormPrimitive.Control;
-var FormField = ({
-  ...props
-}) => {
-  const formField = formFieldRecipe({});
+var FormField = ({ ...props }) => {
+  const variants = pick(props, ...formFieldRecipe.variants());
+  const formField = formFieldRecipe(variants);
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     FormPrimitive.Field,
     {
@@ -506,10 +484,9 @@ var FormField = ({
     }
   );
 };
-var FormLabel = ({
-  ...props
-}) => {
-  const formLabel = formLabelRecipe({});
+var FormLabel = ({ ...props }) => {
+  const variants = pick(props, ...formLabelRecipe.variants());
+  const formLabel = formLabelRecipe(variants);
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     FormPrimitive.Label,
     {
@@ -519,11 +496,9 @@ var FormLabel = ({
     }
   );
 };
-var FormMessage = ({
-  error,
-  ...props
-}) => {
-  const formMessage = formMessageRecipe({ error });
+var FormMessage = ({ ...props }) => {
+  const variants = pick(props, ...formMessageRecipe.variants());
+  const formMessage = formMessageRecipe(variants);
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     FormPrimitive.Message,
     {
@@ -543,28 +518,9 @@ var gridRecipe = (0, import_createRuntimeFn13.createRuntimeFn)({ defaultClassNam
 var import_react_slot9 = require("@radix-ui/react-slot");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var defaultElement9 = "div";
-var Grid = ({
-  asChild,
-  align,
-  columns,
-  flow,
-  gap,
-  gapX,
-  gapY,
-  justify,
-  rows,
-  ...props
-}) => {
-  const grid = gridRecipe({
-    align,
-    columns,
-    flow,
-    gap,
-    gapX,
-    gapY,
-    justify,
-    rows
-  });
+var Grid = ({ asChild, ...props }) => {
+  const variants = pick(props, ...gridRecipe.variants());
+  const grid = gridRecipe(variants);
   const Comp = asChild ? import_react_slot9.Slot : defaultElement9;
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Comp, { ...props, className: mergeClasses(grid, props.className), children: props.children });
 };
@@ -613,24 +569,19 @@ var iconButtonRecipe = (0, import_createRuntimeFn15.createRuntimeFn)({ defaultCl
 var import_react_slot11 = require("@radix-ui/react-slot");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var defaultElement10 = "button";
-var IconButton = ({
-  asChild,
-  loading,
-  size,
-  variant,
-  ...props
-}) => {
-  const iconButton = iconButtonRecipe({ loading, size, variant });
+var IconButton = ({ asChild, ...props }) => {
+  const variants = pick(props, ...iconButtonRecipe.variants());
+  const iconButton = iconButtonRecipe(variants);
   const Comp = asChild ? import_react_slot11.Slot : defaultElement10;
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     Comp,
     {
       ...props,
       className: mergeClasses(iconButton, props.className),
-      disabled: props.disabled || Boolean(loading),
+      disabled: props.disabled || Boolean(variants.loading),
       children: [
         props.children,
-        loading && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Spinner, { style: { position: "absolute" } })
+        variants.loading && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Spinner, { style: { position: "absolute" } })
       ]
     }
   );
@@ -644,8 +595,9 @@ var linkRecipe = (0, import_createRuntimeFn16.createRuntimeFn)({ defaultClassNam
 var import_react_slot12 = require("@radix-ui/react-slot");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var defaultElement11 = "a";
-var Link = ({ asChild, color, ...props }) => {
-  const link = linkRecipe({ color });
+var Link = ({ asChild, ...props }) => {
+  const variants = pick(props, ...linkRecipe.variants());
+  const link = linkRecipe(variants);
   const Comp = asChild ? import_react_slot12.Slot : defaultElement11;
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Comp, { ...props, className: mergeClasses(link, props.className), children: props.children });
 };
@@ -654,14 +606,14 @@ var Link = ({ asChild, color, ...props }) => {
 var import_react_icons2 = require("@radix-ui/react-icons");
 var MenuPrimitive = __toESM(require("@radix-ui/react-menu"));
 var import_jsx_runtime16 = require("react/jsx-runtime");
-var Menu = ({
-  ...props
-}) => {
-  const menu = menuRecipe({});
+var Menu = ({ ...props }) => {
+  const variants = pick(props, ...menuRecipe.variants());
+  const menu = menuRecipe(variants);
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(MenuPrimitive.Root, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: mergeClasses(menu, props.className), children: props.children }) });
 };
 var MenuContent = ({ ...props }) => {
-  const panel = panelRecipe({});
+  const variants = pick(props, ...panelRecipe.variants());
+  const panel = panelRecipe(variants);
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     MenuPrimitive.Content,
     {
@@ -671,10 +623,9 @@ var MenuContent = ({ ...props }) => {
     }
   );
 };
-var MenuSeparator = ({
-  ...props
-}) => {
-  const menuSeparator = menuSeparatorRecipe({});
+var MenuSeparator = ({ ...props }) => {
+  const variants = pick(props, ...menuSeparatorRecipe.variants());
+  const menuSeparator = menuSeparatorRecipe(variants);
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     MenuPrimitive.Separator,
     {
@@ -685,7 +636,8 @@ var MenuSeparator = ({
   );
 };
 var MenuItem2 = ({ ...props }) => {
-  const menuItem = menuItemRecipe({});
+  const variants = pick(props, ...menuItemRecipe.variants());
+  const menuItem = menuItemRecipe(variants);
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     MenuPrimitive.MenuItem,
     {
@@ -695,10 +647,9 @@ var MenuItem2 = ({ ...props }) => {
     }
   );
 };
-var MenuRadioItem = ({
-  ...props
-}) => {
-  const menuItem = menuItemRecipe({});
+var MenuRadioItem = ({ ...props }) => {
+  const variants = pick(props, ...menuItemRecipe.variants());
+  const menuItem = menuItemRecipe(variants);
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
     MenuPrimitive.RadioItem,
     {
@@ -732,10 +683,9 @@ var MenuRadioItem = ({
     }
   );
 };
-var MenuCheckboxItem2 = ({
-  ...props
-}) => {
-  const menuItem = menuItemRecipe({});
+var MenuCheckboxItem2 = ({ ...props }) => {
+  const variants = pick(props, ...menuItemRecipe.variants());
+  const menuItem = menuItemRecipe(variants);
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
     MenuPrimitive.MenuCheckboxItem,
     {
@@ -749,7 +699,8 @@ var MenuCheckboxItem2 = ({
   );
 };
 var MenuLabel2 = ({ ...props }) => {
-  const menuLabel = menuLabelRecipe({});
+  const variants = pick(props, ...menuLabelRecipe.variants());
+  const menuLabel = menuLabelRecipe(variants);
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     MenuPrimitive.MenuLabel,
     {
@@ -767,7 +718,8 @@ var import_react_slot13 = require("@radix-ui/react-slot");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var defaultElement12 = "div";
 var Panel = ({ asChild, ...props }) => {
-  const panel = panelRecipe({});
+  const variants = pick(props, ...panelRecipe.variants());
+  const panel = panelRecipe(variants);
   const Comp = asChild ? import_react_slot13.Slot : defaultElement12;
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Comp, { ...props, className: mergeClasses(panel, props.className), children: props.children });
 };
@@ -799,10 +751,9 @@ var separatorRecipe = (0, import_createRuntimeFn17.createRuntimeFn)({ defaultCla
 // src/components/separator.tsx
 var SeparatorPrimitive = __toESM(require("@radix-ui/react-separator"));
 var import_jsx_runtime19 = require("react/jsx-runtime");
-var Separator3 = ({
-  ...props
-}) => {
-  const separator = separatorRecipe({});
+var Separator3 = ({ ...props }) => {
+  const variants = pick(props, ...separatorRecipe.variants());
+  const separator = separatorRecipe(variants);
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     SeparatorPrimitive.Root,
     {
@@ -821,31 +772,41 @@ var skeletonRecipe = (0, import_createRuntimeFn18.createRuntimeFn)({ defaultClas
 var import_react_slot15 = require("@radix-ui/react-slot");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var defaultElement14 = "div";
-var Skeleton = ({ asChild, variant, ...props }) => {
-  const skeleton = skeletonRecipe({ variant });
+var Skeleton = ({ asChild, ...props }) => {
+  const variants = pick(props, ...skeletonRecipe.variants());
+  const skeleton = skeletonRecipe(variants);
   const Comp = asChild ? import_react_slot15.Slot : defaultElement14;
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Comp, { ...props, className: mergeClasses(skeleton, props.className), children: props.children });
 };
 
 // src/recipes/switch.css.ts
 var import_createRuntimeFn19 = require("@vanilla-extract/recipes/createRuntimeFn");
-var switchRecipe = (0, import_createRuntimeFn19.createRuntimeFn)({ defaultClassName: "switch_switchRecipe__6op4101", variantClassNames: { size: { "1": "switch_switchRecipe_size_1__6op4102", "2": "switch_switchRecipe_size_2__6op4103" } }, defaultVariants: { size: "1" }, compoundVariants: [] });
-var switchThumbRecipe = (0, import_createRuntimeFn19.createRuntimeFn)({ defaultClassName: "switch_switchThumbRecipe__6op4100", variantClassNames: {}, defaultVariants: {}, compoundVariants: [] });
+var switchRecipe = (0, import_createRuntimeFn19.createRuntimeFn)({ defaultClassName: "switch_switchRecipe__6op4103", variantClassNames: { size: { "1": "switch_switchRecipe_size_1__6op4104", "2": "switch_switchRecipe_size_2__6op4105" } }, defaultVariants: { size: "1" }, compoundVariants: [] });
+var switchThumbRecipe = (0, import_createRuntimeFn19.createRuntimeFn)({ defaultClassName: "switch_switchThumbRecipe__6op4100", variantClassNames: { size: { "1": "switch_switchThumbRecipe_size_1__6op4101", "2": "switch_switchThumbRecipe_size_2__6op4102" } }, defaultVariants: { size: "1" }, compoundVariants: [] });
 
 // src/components/switch.tsx
 var SwitchPrimitive = __toESM(require("@radix-ui/react-switch"));
 var import_jsx_runtime21 = require("react/jsx-runtime");
-var Switch = ({
-  size,
-  ...props
-}) => {
-  const switchThumb = switchThumbRecipe({});
+var SwitchThumb = ({ ...props }) => {
+  const variants = pick(props, ...switchThumbRecipe.variants());
+  const switchThumb = switchThumbRecipe(variants);
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    SwitchPrimitive.Thumb,
+    {
+      ...props,
+      className: mergeClasses(switchThumb, props.className)
+    }
+  );
+};
+var Switch = ({ ...props }) => {
+  const variants = pick(props, ...switchRecipe.variants());
+  const _switch = switchRecipe(variants);
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     SwitchPrimitive.Root,
     {
       ...props,
-      className: mergeClasses(switchRecipe({ size }), props.className),
-      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SwitchPrimitive.Thumb, { className: switchThumb })
+      className: mergeClasses(_switch, props.className),
+      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SwitchThumb, { size: props.size })
     }
   );
 };
@@ -858,15 +819,9 @@ var textFieldRecipe = (0, import_createRuntimeFn20.createRuntimeFn)({ defaultCla
 var import_react_slot16 = require("@radix-ui/react-slot");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 var defaultElement15 = "input";
-var TextField = ({
-  asChild,
-  cursor,
-  error,
-  size,
-  variant,
-  ...props
-}) => {
-  const textField = textFieldRecipe({ cursor, error, size, variant });
+var TextField = ({ asChild, ...props }) => {
+  const variants = pick(props, ...textFieldRecipe.variants());
+  const textField = textFieldRecipe(variants);
   const Comp = asChild ? import_react_slot16.Slot : defaultElement15;
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Comp, { ...props, className: mergeClasses(textField, props.className), children: props.children });
 };
@@ -875,8 +830,9 @@ var TextField = ({
 var import_react_slot17 = require("@radix-ui/react-slot");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var defaultElement16 = "span";
-var Text = ({ asChild, color, size, weight, ...props }) => {
-  const text = textRecipe({ color, size, weight });
+var Text = ({ asChild, ...props }) => {
+  const variants = pick(props, ...textRecipe.variants());
+  const text = textRecipe(variants);
   const Comp = asChild ? import_react_slot17.Slot : defaultElement16;
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Comp, { ...props, className: mergeClasses(text, props.className), children: props.children });
 };
@@ -935,6 +891,7 @@ var lightTheme = "light-theme__z73fs90";
   Spinner,
   Status,
   Switch,
+  SwitchThumb,
   Text,
   TextField,
   darkTheme,