@nayhoo/ui 0.12.1 → 0.13.0

package/dist/components/tooltip.mjs

@@ -1,6 +1,6 @@
 import {
   Text
-} from "../chunk-C53FYO65.mjs";
+} from "../chunk-ELXCOK2T.mjs";
 import {
   tooltipContentRecipe
 } from "../chunk-Y6BNWBLR.mjs";
@@ -10,11 +10,12 @@ import {
 } from "../chunk-N535ABFC.mjs";
 import {
   Box
-} from "../chunk-WPNBONR3.mjs";
+} from "../chunk-LSB5JVS2.mjs";
 import "../chunk-OI24WXH6.mjs";
 import {
-  pick
-} from "../chunk-4N6P3Y54.mjs";
+  extractVariantsFromProps
+} from "../chunk-DQ4T4WV3.mjs";
+import "../chunk-BALC5CGU.mjs";
 import {
   mergeClasses
 } from "../chunk-7EGQM3ZL.mjs";
@@ -39,7 +40,10 @@ function Tooltip({
     delayDuration,
     disableHoverableContent
   };
-  const variants = pick(props, ...tooltipContentRecipe.variants());
+  const [variants, rest] = extractVariantsFromProps(
+    props,
+    ...tooltipContentRecipe.variants()
+  );
   const tooltipContent = tooltipContentRecipe(variants);
   return /* @__PURE__ */ jsx(TooltipPrimitive.Provider, { children: /* @__PURE__ */ jsxs(TooltipPrimitive.Root, { ...rootProps, children: [
     /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { asChild: true, children }),
@@ -49,15 +53,15 @@ function Tooltip({
         side: "top",
         align: "center",
         sideOffset: 5,
-        ...props,
-        className: mergeClasses(tooltipContent, props.className),
+        ...rest,
+        className: mergeClasses(tooltipContent, rest.className),
         children: [
           /* @__PURE__ */ jsx(
             Text,
             {
               size: "1",
               style: {
-                lineHeight: props.multiline ? "20px" : void 0
+                lineHeight: variants.multiline ? "20px" : void 0
               },
               children: content
             }

package/dist/components/tooltip.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/tooltip.tsx"],"sourcesContent":["import { Box } from \"@/components/box\";\nimport { Text } from \"@/components/text\";\nimport {\n  TooltipContentVariants,\n  tooltipContentRecipe,\n} from \"@/theme/recipes/tooltip.css\";\nimport { theme } from \"@/theme/theme-contracts/theme-contract.css\";\nimport { mergeClasses } from \"@/utils/merge-classes\";\nimport { pick } from \"@/utils/pick\";\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport React from \"react\";\n\ntype TooltipPrimitiveProps = React.ComponentProps<typeof TooltipPrimitive.Root>;\ntype TooltipProps = TooltipPrimitiveProps &\n  TooltipPrimitive.TooltipContentProps &\n  TooltipContentVariants;\n\nexport function Tooltip({\n  children,\n  content,\n  open,\n  defaultOpen,\n  onOpenChange,\n  delayDuration,\n  disableHoverableContent,\n  ...props\n}: TooltipProps) {\n  const rootProps = {\n    open,\n    defaultOpen,\n    onOpenChange,\n    delayDuration,\n    disableHoverableContent,\n  };\n\n  const variants = pick(props, ...tooltipContentRecipe.variants());\n  const tooltipContent = tooltipContentRecipe(variants);\n\n  return (\n    <TooltipPrimitive.Provider>\n      <TooltipPrimitive.Root {...rootProps}>\n        <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>\n        <TooltipPrimitive.Portal>\n          <TooltipPrimitive.Content\n            side=\"top\"\n            align=\"center\"\n            sideOffset={5}\n            {...props}\n            className={mergeClasses(tooltipContent, props.className)}\n          >\n            <Text\n              size=\"1\"\n              style={{\n                lineHeight: props.multiline ? \"20px\" : undefined,\n              }}\n            >\n              {content}\n            </Text>\n            <Box>\n              <TooltipPrimitive.Arrow\n                width={11}\n                height={5}\n                style={{\n                  fill: theme.semanticColors.transparentSurface,\n                }}\n              />\n            </Box>\n          </TooltipPrimitive.Content>\n        </TooltipPrimitive.Portal>\n      </TooltipPrimitive.Root>\n    </TooltipPrimitive.Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AASA,YAAY,sBAAsB;AAgC1B,cAEE,YAFF;AAxBD,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiB;AACf,QAAM,YAAY;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,WAAW,KAAK,OAAO,GAAG,qBAAqB,SAAS,CAAC;AAC/D,QAAM,iBAAiB,qBAAqB,QAAQ;AAEpD,SACE,oBAAkB,2BAAjB,EACC,+BAAkB,uBAAjB,EAAuB,GAAG,WACzB;AAAA,wBAAkB,0BAAjB,EAAyB,SAAO,MAAE,UAAS;AAAA,IAC5C,oBAAkB,yBAAjB,EACC;AAAA,MAAkB;AAAA,MAAjB;AAAA,QACC,MAAK;AAAA,QACL,OAAM;AAAA,QACN,YAAY;AAAA,QACX,GAAG;AAAA,QACJ,WAAW,aAAa,gBAAgB,MAAM,SAAS;AAAA,QAEvD;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,OAAO;AAAA,gBACL,YAAY,MAAM,YAAY,SAAS;AAAA,cACzC;AAAA,cAEC;AAAA;AAAA,UACH;AAAA,UACA,oBAAC,OACC;AAAA,YAAkB;AAAA,YAAjB;AAAA,cACC,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,OAAO;AAAA,gBACL,MAAM,MAAM,eAAe;AAAA,cAC7B;AAAA;AAAA,UACF,GACF;AAAA;AAAA;AAAA,IACF,GACF;AAAA,KACF,GACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/tooltip.tsx"],"sourcesContent":["import { Box } from \"@/components/box\";\nimport { Text } from \"@/components/text\";\nimport {\n  TooltipContentVariants,\n  tooltipContentRecipe,\n} from \"@/theme/recipes/tooltip.css\";\nimport { theme } from \"@/theme/theme-contracts/theme-contract.css\";\nimport { extractVariantsFromProps } from \"@/utils/get-variants\";\nimport { mergeClasses } from \"@/utils/merge-classes\";\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport React from \"react\";\n\ntype TooltipPrimitiveProps = React.ComponentProps<typeof TooltipPrimitive.Root>;\n\nexport type TooltipProps = TooltipPrimitiveProps &\n  TooltipPrimitive.TooltipContentProps &\n  TooltipContentVariants;\n\nexport function Tooltip({\n  children,\n  content,\n  open,\n  defaultOpen,\n  onOpenChange,\n  delayDuration,\n  disableHoverableContent,\n  ...props\n}: TooltipProps) {\n  const rootProps = {\n    open,\n    defaultOpen,\n    onOpenChange,\n    delayDuration,\n    disableHoverableContent,\n  };\n\n  const [variants, rest] = extractVariantsFromProps(\n    props,\n    ...tooltipContentRecipe.variants(),\n  );\n  const tooltipContent = tooltipContentRecipe(variants);\n\n  return (\n    <TooltipPrimitive.Provider>\n      <TooltipPrimitive.Root {...rootProps}>\n        <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>\n        <TooltipPrimitive.Portal>\n          <TooltipPrimitive.Content\n            side=\"top\"\n            align=\"center\"\n            sideOffset={5}\n            {...rest}\n            className={mergeClasses(tooltipContent, rest.className)}\n          >\n            <Text\n              size=\"1\"\n              style={{\n                lineHeight: variants.multiline ? \"20px\" : undefined,\n              }}\n            >\n              {content}\n            </Text>\n            <Box>\n              <TooltipPrimitive.Arrow\n                width={11}\n                height={5}\n                style={{\n                  fill: theme.semanticColors.transparentSurface,\n                }}\n              />\n            </Box>\n          </TooltipPrimitive.Content>\n        </TooltipPrimitive.Portal>\n      </TooltipPrimitive.Root>\n    </TooltipPrimitive.Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AASA,YAAY,sBAAsB;AAoC1B,cAEE,YAFF;AA3BD,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiB;AACf,QAAM,YAAY;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,CAAC,UAAU,IAAI,IAAI;AAAA,IACvB;AAAA,IACA,GAAG,qBAAqB,SAAS;AAAA,EACnC;AACA,QAAM,iBAAiB,qBAAqB,QAAQ;AAEpD,SACE,oBAAkB,2BAAjB,EACC,+BAAkB,uBAAjB,EAAuB,GAAG,WACzB;AAAA,wBAAkB,0BAAjB,EAAyB,SAAO,MAAE,UAAS;AAAA,IAC5C,oBAAkB,yBAAjB,EACC;AAAA,MAAkB;AAAA,MAAjB;AAAA,QACC,MAAK;AAAA,QACL,OAAM;AAAA,QACN,YAAY;AAAA,QACX,GAAG;AAAA,QACJ,WAAW,aAAa,gBAAgB,KAAK,SAAS;AAAA,QAEtD;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,OAAO;AAAA,gBACL,YAAY,SAAS,YAAY,SAAS;AAAA,cAC5C;AAAA,cAEC;AAAA;AAAA,UACH;AAAA,UACA,oBAAC,OACC;AAAA,YAAkB;AAAA,YAAjB;AAAA,cACC,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,OAAO;AAAA,gBACL,MAAM,MAAM,eAAe;AAAA,cAC7B;AAAA;AAAA,UACF,GACF;AAAA;AAAA;AAAA,IACF,GACF;AAAA,KACF,GACF;AAEJ;","names":[]}

package/dist/providers/index.js

@@ -229,9 +229,13 @@ var script = (storageKey2, defaultTheme2, systemThemes2, classes2) => {
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
 var spinnerRecipe = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "spinner_spinnerRecipe__15xzcy90", variantClassNames: { size: { "1": "spinner_spinnerRecipe_size_1__15xzcy91", "2": "spinner_spinnerRecipe_size_2__15xzcy92", "3": "spinner_spinnerRecipe_size_3__15xzcy93", "4": "spinner_spinnerRecipe_size_4__15xzcy94", "5": "spinner_spinnerRecipe_size_5__15xzcy95", "6": "spinner_spinnerRecipe_size_6__15xzcy96", "7": "spinner_spinnerRecipe_size_7__15xzcy97", "8": "spinner_spinnerRecipe_size_8__15xzcy98", "9": "spinner_spinnerRecipe_size_9__15xzcy99" } }, defaultVariants: { size: "3" }, compoundVariants: [] });
 
-// src/utils/merge-classes.ts
-function mergeClasses(...classes2) {
-  return classes2.filter((cls) => Boolean(cls)).join(" ");
+// src/utils/omit.ts
+function omit(obj, ...keys) {
+  const ret = { ...obj };
+  keys.forEach((key) => {
+    delete ret[key];
+  });
+  return ret;
 }
 
 // src/utils/pick.ts
@@ -243,15 +247,30 @@ function pick(obj, ...keys) {
   return ret;
 }
 
+// src/utils/get-variants.ts
+function extractVariantsFromProps(obj, ...keys) {
+  const variants = pick(obj, ...keys);
+  const rest = omit(obj, ...keys);
+  return [variants, rest];
+}
+
+// src/utils/merge-classes.ts
+function mergeClasses(...classes2) {
+  return classes2.filter((cls) => Boolean(cls)).join(" ");
+}
+
 // src/components/spinner.tsx
 var import_react_slot = require("@radix-ui/react-slot");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var defaultElement = "div";
 var Spinner = ({ asChild, ...props }) => {
-  const variants = pick(props, ...spinnerRecipe.variants());
+  const [variants, rest] = extractVariantsFromProps(
+    props,
+    ...spinnerRecipe.variants()
+  );
   const spinner = spinnerRecipe(variants);
   const Comp = asChild ? import_react_slot.Slot : defaultElement;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Comp, { ...props, className: mergeClasses(spinner, props.className), children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Comp, { ...rest, className: mergeClasses(spinner, rest.className), children: rest.children });
 };
 
 // src/theme/recipes/button.css.ts
@@ -267,17 +286,20 @@ var import_react_slot2 = require("@radix-ui/react-slot");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var defaultElement2 = "button";
 var Button = ({ asChild, ...props }) => {
-  const variants = pick(props, ...buttonRecipe.variants());
+  const [variants, rest] = extractVariantsFromProps(
+    props,
+    ...buttonRecipe.variants()
+  );
   const button = buttonRecipe(variants);
   const Comp = asChild ? import_react_slot2.Slot : defaultElement2;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     Comp,
     {
-      ...props,
-      className: mergeClasses(button, props.className),
-      disabled: props.disabled || Boolean(variants.loading),
+      ...rest,
+      className: mergeClasses(button, rest.className),
+      disabled: rest.disabled || Boolean(variants.loading),
       children: [
-        props.children,
+        rest.children,
         variants.loading && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Spinner, { style: { position: "absolute" } })
       ]
     }
@@ -329,17 +351,20 @@ var import_react_slot4 = require("@radix-ui/react-slot");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var defaultElement3 = "button";
 var IconButton = ({ asChild, ...props }) => {
-  const variants = pick(props, ...iconButtonRecipe.variants());
+  const [variants, rest] = extractVariantsFromProps(
+    props,
+    ...iconButtonRecipe.variants()
+  );
   const iconButton = iconButtonRecipe(variants);
   const Comp = asChild ? import_react_slot4.Slot : defaultElement3;
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     Comp,
     {
-      ...props,
-      className: mergeClasses(iconButton, props.className),
-      disabled: props.disabled || Boolean(variants.loading),
+      ...rest,
+      className: mergeClasses(iconButton, rest.className),
+      disabled: rest.disabled || Boolean(variants.loading),
       children: [
-        props.children,
+        rest.children,
         variants.loading && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Spinner, { style: { position: "absolute" } })
       ]
     }
@@ -351,10 +376,13 @@ var import_react_slot5 = require("@radix-ui/react-slot");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var defaultElement4 = "span";
 var Text = ({ asChild, ...props }) => {
-  const variants = pick(props, ...textRecipe.variants());
+  const [variants, rest] = extractVariantsFromProps(
+    props,
+    ...textRecipe.variants()
+  );
   const text = textRecipe(variants);
   const Comp = asChild ? import_react_slot5.Slot : defaultElement4;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Comp, { ...props, className: mergeClasses(text, props.className), children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Comp, { ...rest, className: mergeClasses(text, rest.className), children: rest.children });
 };
 
 // src/theme/styles/toast.css.ts