@nayhoo/ui 0.4.0 → 0.4.1

package/dist/index.mjs

@@ -22,12 +22,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
 import { Slot } from "@radix-ui/react-slot";
 import { jsx } from "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 ? Slot : defaultElement;
   return /* @__PURE__ */ jsx(Comp, { ...props, className: mergeClasses(box, props.className), children: props.children });
 };
@@ -50,17 +60,17 @@ import { Slot as Slot2 } from "@radix-ui/react-slot";
 import { jsx as jsx2 } from "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 ? Slot2 : defaultElement2;
   return /* @__PURE__ */ jsx2(Comp, { ...props, className: mergeClasses(status, props.className), children: props.children });
 };
 
 // src/components/avatar.tsx
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
-var AvatarImage = ({
-  ...props
-}) => {
-  const avatarImage = avatarImageRecipe({});
+var AvatarImage = ({ ...props }) => {
+  const variants = pick(props, ...avatarImageRecipe.variants());
+  const avatarImage = avatarImageRecipe(variants);
   return /* @__PURE__ */ jsx3(
     AvatarPrimitive.Image,
     {
@@ -70,10 +80,9 @@ var AvatarImage = ({
     }
   );
 };
-var AvatarFallback = ({
-  ...props
-}) => {
-  const avatarFallback = avatarFallbackRecipe({});
+var AvatarFallback = ({ ...props }) => {
+  const variants = pick(props, ...avatarFallbackRecipe.variants());
+  const avatarFallback = avatarFallbackRecipe(variants);
   return /* @__PURE__ */ jsx3(
     AvatarPrimitive.Fallback,
     {
@@ -86,14 +95,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__ */ jsxs(
     Box,
     {
@@ -111,7 +119,7 @@ var Avatar2 = ({
             className: mergeClasses(avatar, props.className),
             children: [
               /* @__PURE__ */ jsx3(AvatarImage, { alt, src }),
-              /* @__PURE__ */ jsx3(AvatarFallback, { size })
+              /* @__PURE__ */ jsx3(AvatarFallback, { size: variants.size, delayMs: 600, children: fallback })
             ]
           }
         ),
@@ -130,7 +138,7 @@ var Avatar2 = ({
             children: /* @__PURE__ */ jsx3(
               Status,
               {
-                size: size && Number(size) > 2 ? "2" : "1",
+                size: variants.size && Number(variants.size) > 2 ? "2" : "1",
                 variant: status
               }
             )
@@ -149,14 +157,9 @@ var badgeRecipe = _7a4684({ defaultClassName: "badge_badgeRecipe__ir6sqr0", vari
 import { Slot as Slot3 } from "@radix-ui/react-slot";
 import { jsx as jsx4 } from "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 ? Slot3 : defaultElement3;
   return /* @__PURE__ */ jsx4(Comp, { ...props, className: mergeClasses(badge, props.className), children: label });
 };
@@ -169,8 +172,9 @@ var spinnerRecipe = _7a4685({ defaultClassName: "spinner_spinnerRecipe__41997v0"
 import { Slot as Slot4 } from "@radix-ui/react-slot";
 import { jsx as jsx5 } from "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 ? Slot4 : defaultElement4;
   return /* @__PURE__ */ jsx5(Comp, { ...props, className: mergeClasses(spinner, props.className), children: props.children });
 };
@@ -183,34 +187,19 @@ var buttonRecipe = _7a4686({ defaultClassName: "button_buttonRecipe__a5gfcc0", v
 import { Slot as Slot5 } from "@radix-ui/react-slot";
 import { jsx as jsx6, jsxs as jsxs2 } from "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 ? Slot5 : defaultElement5;
   return /* @__PURE__ */ jsxs2(
     Comp,
     {
       ...props,
       className: mergeClasses(button, props.className),
-      disabled: props.disabled || Boolean(loading),
+      disabled: props.disabled || Boolean(variants.loading),
       children: [
         props.children,
-        loading && /* @__PURE__ */ jsx6(Spinner, { style: { position: "absolute" } })
+        variants.loading && /* @__PURE__ */ jsx6(Spinner, { style: { position: "absolute" } })
       ]
     }
   );
@@ -224,13 +213,9 @@ var cardRecipe = _7a4687({ defaultClassName: "card_cardRecipe__1mkhus60 panel_pa
 import { Slot as Slot6 } from "@radix-ui/react-slot";
 import { jsx as jsx7 } from "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 ? Slot6 : defaultElement6;
   return /* @__PURE__ */ jsx7(Comp, { ...props, className: mergeClasses(card, props.className), children: props.children });
 };
@@ -243,8 +228,9 @@ var containerRecipe = _7a4688({ defaultClassName: "container_containerRecipe__p5
 import { Slot as Slot7 } from "@radix-ui/react-slot";
 import { jsx as jsx8 } from "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 ? Slot7 : defaultElement7;
   return /* @__PURE__ */ jsx8(Comp, { ...props, className: mergeClasses(container, props.className), children: props.children });
 };
@@ -257,16 +243,9 @@ var flexRecipe = _7a4689({ defaultClassName: "flex_flexRecipe__ygbrx50", variant
 import { Slot as Slot8 } from "@radix-ui/react-slot";
 import { jsx as jsx9 } from "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 ? Slot8 : defaultElement8;
   return /* @__PURE__ */ jsx9(Comp, { ...props, className: mergeClasses(flex, props.className), children: props.children });
 };
@@ -288,11 +267,9 @@ import { CheckIcon } from "@radix-ui/react-icons";
 import { jsx as jsx10, jsxs as jsxs3 } from "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__ */ jsx10(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx10(
     DropdownMenuPrimitive.Content,
     {
@@ -301,10 +278,9 @@ var DropdownMenuContent = ({
     }
   ) });
 };
-var DropdownMenuItem = ({
-  ...props
-}) => {
-  const menuItem = menuItemRecipe({});
+var DropdownMenuItem = ({ ...props }) => {
+  const variants = pick(props, ...menuItemRecipe.variants());
+  const menuItem = menuItemRecipe(variants);
   return /* @__PURE__ */ jsx10(
     DropdownMenuPrimitive.Item,
     {
@@ -315,10 +291,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__ */ jsx10(
     DropdownMenuPrimitive.Label,
     {
@@ -331,7 +306,8 @@ var DropdownMenuLabel = ({
 var DropdownMenuSeparator = ({
   ...props
 }) => {
-  const menuSeparator = menuSeparatorRecipe({});
+  const variants = pick(props, ...menuSeparatorRecipe.variants());
+  const menuSeparator = menuSeparatorRecipe(variants);
   return /* @__PURE__ */ jsx10(
     DropdownMenuPrimitive.Separator,
     {
@@ -344,7 +320,8 @@ var DropdownMenuSeparator = ({
 var DropdownMenuCheckboxItem = ({
   ...props
 }) => {
-  const menuItem = menuItemRecipe({});
+  const variants = pick(props, ...menuItemRecipe.variants());
+  const menuItem = menuItemRecipe(variants);
   return /* @__PURE__ */ jsxs3(
     DropdownMenuPrimitive.CheckboxItem,
     {
@@ -362,7 +339,8 @@ var DropdownMenuRadioItem = ({
   children,
   ...props
 }) => {
-  const menuItem = menuItemRecipe({});
+  const variants = pick(props, ...menuItemRecipe.variants());
+  const menuItem = menuItemRecipe(variants);
   return /* @__PURE__ */ jsxs3(
     DropdownMenuPrimitive.RadioItem,
     {
@@ -408,10 +386,9 @@ import * as FormPrimitive from "@radix-ui/react-form";
 import { jsx as jsx11 } from "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__ */ jsx11(
     FormPrimitive.Field,
     {
@@ -421,10 +398,9 @@ var FormField = ({
     }
   );
 };
-var FormLabel = ({
-  ...props
-}) => {
-  const formLabel = formLabelRecipe({});
+var FormLabel = ({ ...props }) => {
+  const variants = pick(props, ...formLabelRecipe.variants());
+  const formLabel = formLabelRecipe(variants);
   return /* @__PURE__ */ jsx11(
     FormPrimitive.Label,
     {
@@ -434,11 +410,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__ */ jsx11(
     FormPrimitive.Message,
     {
@@ -458,28 +432,9 @@ var gridRecipe = _7a46813({ defaultClassName: "grid_gridRecipe__1ab943t0", varia
 import { Slot as Slot9 } from "@radix-ui/react-slot";
 import { jsx as jsx12 } from "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 ? Slot9 : defaultElement9;
   return /* @__PURE__ */ jsx12(Comp, { ...props, className: mergeClasses(grid, props.className), children: props.children });
 };
@@ -528,24 +483,19 @@ var iconButtonRecipe = _7a46815({ defaultClassName: "icon-button_iconButtonRecip
 import { Slot as Slot11 } from "@radix-ui/react-slot";
 import { jsx as jsx14, jsxs as jsxs4 } from "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 ? Slot11 : defaultElement10;
   return /* @__PURE__ */ jsxs4(
     Comp,
     {
       ...props,
       className: mergeClasses(iconButton, props.className),
-      disabled: props.disabled || Boolean(loading),
+      disabled: props.disabled || Boolean(variants.loading),
       children: [
         props.children,
-        loading && /* @__PURE__ */ jsx14(Spinner, { style: { position: "absolute" } })
+        variants.loading && /* @__PURE__ */ jsx14(Spinner, { style: { position: "absolute" } })
       ]
     }
   );
@@ -559,8 +509,9 @@ var linkRecipe = _7a46816({ defaultClassName: "link_linkRecipe__kd87m50", varian
 import { Slot as Slot12 } from "@radix-ui/react-slot";
 import { jsx as jsx15 } from "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 ? Slot12 : defaultElement11;
   return /* @__PURE__ */ jsx15(Comp, { ...props, className: mergeClasses(link, props.className), children: props.children });
 };
@@ -569,14 +520,14 @@ var Link = ({ asChild, color, ...props }) => {
 import { CheckIcon as CheckIcon2 } from "@radix-ui/react-icons";
 import * as MenuPrimitive from "@radix-ui/react-menu";
 import { jsx as jsx16, jsxs as jsxs5 } from "react/jsx-runtime";
-var Menu = ({
-  ...props
-}) => {
-  const menu = menuRecipe({});
+var Menu = ({ ...props }) => {
+  const variants = pick(props, ...menuRecipe.variants());
+  const menu = menuRecipe(variants);
   return /* @__PURE__ */ jsx16(MenuPrimitive.Root, { ...props, children: /* @__PURE__ */ jsx16("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__ */ jsx16(
     MenuPrimitive.Content,
     {
@@ -586,10 +537,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__ */ jsx16(
     MenuPrimitive.Separator,
     {
@@ -600,7 +550,8 @@ var MenuSeparator = ({
   );
 };
 var MenuItem2 = ({ ...props }) => {
-  const menuItem = menuItemRecipe({});
+  const variants = pick(props, ...menuItemRecipe.variants());
+  const menuItem = menuItemRecipe(variants);
   return /* @__PURE__ */ jsx16(
     MenuPrimitive.MenuItem,
     {
@@ -610,10 +561,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__ */ jsxs5(
     MenuPrimitive.RadioItem,
     {
@@ -647,10 +597,9 @@ var MenuRadioItem = ({
     }
   );
 };
-var MenuCheckboxItem2 = ({
-  ...props
-}) => {
-  const menuItem = menuItemRecipe({});
+var MenuCheckboxItem2 = ({ ...props }) => {
+  const variants = pick(props, ...menuItemRecipe.variants());
+  const menuItem = menuItemRecipe(variants);
   return /* @__PURE__ */ jsxs5(
     MenuPrimitive.MenuCheckboxItem,
     {
@@ -664,7 +613,8 @@ var MenuCheckboxItem2 = ({
   );
 };
 var MenuLabel2 = ({ ...props }) => {
-  const menuLabel = menuLabelRecipe({});
+  const variants = pick(props, ...menuLabelRecipe.variants());
+  const menuLabel = menuLabelRecipe(variants);
   return /* @__PURE__ */ jsx16(
     MenuPrimitive.MenuLabel,
     {
@@ -682,7 +632,8 @@ import { Slot as Slot13 } from "@radix-ui/react-slot";
 import { jsx as jsx17 } from "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 ? Slot13 : defaultElement12;
   return /* @__PURE__ */ jsx17(Comp, { ...props, className: mergeClasses(panel, props.className), children: props.children });
 };
@@ -714,10 +665,9 @@ var separatorRecipe = _7a46817({ defaultClassName: "separator_separatorRecipe__1
 // src/components/separator.tsx
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
 import { jsx as jsx19 } from "react/jsx-runtime";
-var Separator3 = ({
-  ...props
-}) => {
-  const separator = separatorRecipe({});
+var Separator3 = ({ ...props }) => {
+  const variants = pick(props, ...separatorRecipe.variants());
+  const separator = separatorRecipe(variants);
   return /* @__PURE__ */ jsx19(
     SeparatorPrimitive.Root,
     {
@@ -736,8 +686,9 @@ var skeletonRecipe = _7a46818({ defaultClassName: "skeleton_skeletonRecipe__vq97
 import { Slot as Slot15 } from "@radix-ui/react-slot";
 import { jsx as jsx20 } from "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 ? Slot15 : defaultElement14;
   return /* @__PURE__ */ jsx20(Comp, { ...props, className: mergeClasses(skeleton, props.className), children: props.children });
 };
@@ -750,17 +701,26 @@ var switchThumbRecipe = _7a46819({ defaultClassName: "switch_switchThumbRecipe__
 // src/components/switch.tsx
 import * as SwitchPrimitive from "@radix-ui/react-switch";
 import { jsx as jsx21 } from "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__ */ jsx21(
+    SwitchPrimitive.Thumb,
+    {
+      ...props,
+      className: mergeClasses(switchThumb, props.className)
+    }
+  );
+};
+var Switch = ({ ...props }) => {
+  const variants = pick(props, ...switchRecipe.variants());
+  const _switch = switchRecipe(variants);
   return /* @__PURE__ */ jsx21(
     SwitchPrimitive.Root,
     {
       ...props,
-      className: mergeClasses(switchRecipe({ size }), props.className),
-      children: /* @__PURE__ */ jsx21(SwitchPrimitive.Thumb, { className: switchThumb })
+      className: mergeClasses(_switch, props.className),
+      children: /* @__PURE__ */ jsx21(SwitchThumb, {})
     }
   );
 };
@@ -773,15 +733,9 @@ var textFieldRecipe = _7a46820({ defaultClassName: "text-field_textFieldRecipe__
 import { Slot as Slot16 } from "@radix-ui/react-slot";
 import { jsx as jsx22 } from "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 ? Slot16 : defaultElement15;
   return /* @__PURE__ */ jsx22(Comp, { ...props, className: mergeClasses(textField, props.className), children: props.children });
 };
@@ -790,8 +744,9 @@ var TextField = ({
 import { Slot as Slot17 } from "@radix-ui/react-slot";
 import { jsx as jsx23 } from "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 ? Slot17 : defaultElement16;
   return /* @__PURE__ */ jsx23(Comp, { ...props, className: mergeClasses(text, props.className), children: props.children });
 };
@@ -843,6 +798,7 @@ export {
   Spinner,
   Status,
   Switch,
+  SwitchThumb,
   Text,
   TextField,
   darkTheme,