@nayhoo/ui 0.22.0 → 0.23.0

package/dist/providers/index.d.mts

@@ -22,7 +22,7 @@ interface ThemeProviderProps extends react.PropsWithChildren {
     scriptProps?: ScriptProps;
 }
 declare const useTheme: () => UseThemeProps;
-declare const ThemeProvider: (props: ThemeProviderProps) => react_jsx_runtime.JSX.Element;
+declare const ThemeProvider: ({ ...props }: ThemeProviderProps) => react_jsx_runtime.JSX.Element;
 
 type AddToastPayload = Omit<Toast, "status">;
 type ToastContextProps = ((payload: AddToastPayload) => void) & {
@@ -37,7 +37,7 @@ type Toast = {
     status: "default" | "error" | "success";
     action?: react.ReactNode;
 } & ToastPrimitives.ToastProps;
-declare const Toast: (props: ToastPrimitives.ToastProps & {
+declare const Toast: ({ ...props }: ToastPrimitives.ToastProps & {
     toast: Toast;
 }) => react_jsx_runtime.JSX.Element;
 declare const ToastAction: ({ ...props }: Omit<ToastPrimitives.ToastActionProps, "asChild">) => react_jsx_runtime.JSX.Element;

package/dist/providers/index.d.ts

@@ -22,7 +22,7 @@ interface ThemeProviderProps extends react.PropsWithChildren {
     scriptProps?: ScriptProps;
 }
 declare const useTheme: () => UseThemeProps;
-declare const ThemeProvider: (props: ThemeProviderProps) => react_jsx_runtime.JSX.Element;
+declare const ThemeProvider: ({ ...props }: ThemeProviderProps) => react_jsx_runtime.JSX.Element;
 
 type AddToastPayload = Omit<Toast, "status">;
 type ToastContextProps = ((payload: AddToastPayload) => void) & {
@@ -37,7 +37,7 @@ type Toast = {
     status: "default" | "error" | "success";
     action?: react.ReactNode;
 } & ToastPrimitives.ToastProps;
-declare const Toast: (props: ToastPrimitives.ToastProps & {
+declare const Toast: ({ ...props }: ToastPrimitives.ToastProps & {
     toast: Toast;
 }) => react_jsx_runtime.JSX.Element;
 declare const ToastAction: ({ ...props }: Omit<ToastPrimitives.ToastActionProps, "asChild">) => react_jsx_runtime.JSX.Element;

package/dist/providers/index.js

@@ -71,7 +71,7 @@ var saveToLS = (storageKey2, value) => {
   }
 };
 var useTheme = () => React.useContext(ThemeContext) ?? defaultContext;
-var ThemeProvider = (props) => {
+var ThemeProvider = ({ ...props }) => {
   const context = React.useContext(ThemeContext);
   if (context) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: props.children });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Theme, { ...props });
@@ -225,7 +225,7 @@ var script = (storageKey2, defaultTheme2, systemThemes2, classes2) => {
 // src/theme/recipes/spinner.css.ts
 var import_createRuntimeFn = require("homemade-recipes/createRuntimeFn");
 var spinnerRecipe = (0, import_createRuntimeFn.createRuntimeFn)((function() {
-  var x = { defaultClassName: "spinner__15xzcy90", variantClassNames: { size: { "1": "spinner_size_1__15xzcy91", "2": "spinner_size_2__15xzcy92", "3": "spinner_size_3__15xzcy93", "4": "spinner_size_4__15xzcy94", "5": "spinner_size_5__15xzcy95", "6": "spinner_size_6__15xzcy96", "7": "spinner_size_7__15xzcy97", "8": "spinner_size_8__15xzcy98", "9": "spinner_size_9__15xzcy99" } }, defaultVariants: { size: "3" }, compoundVariants: [], responsiveVariantClassNames: { initial: void 0 }, conditionNames: [], conditions: { xs: "520px", sm: "768px", md: "1024px", lg: "1280px", xl: "1640px" }, identifier: "homemade-recipe__lb053z0", cssCache: [] };
+  var x = { defaultClassName: "spinner__15xzcy90", variantClassNames: { size: { "1": "spinner_size_1__15xzcy91", "2": "spinner_size_2__15xzcy92", "3": "spinner_size_3__15xzcy93" } }, defaultVariants: { size: "2" }, compoundVariants: [], responsiveVariantClassNames: { initial: void 0 }, conditionNames: [], conditions: { xs: "520px", sm: "768px", md: "1024px", lg: "1280px", xl: "1640px" }, identifier: "homemade-recipe__lb053z0", cssCache: [] };
   x.responsiveVariantClassNames.initial = x.variantClassNames;
   return x;
 })());
@@ -261,37 +261,42 @@ function mergeClasses(...classes2) {
 }
 
 // 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 }) => {
+var Spinner = ({ ...props }) => {
   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, { ...rest, className: mergeClasses(spinner, rest.className), children: rest.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      role: "status",
+      "aria-label": "Loading",
+      ...rest,
+      className: mergeClasses(spinner, rest.className),
+      children: rest.children
+    }
+  );
 };
 
 // src/theme/recipes/button.css.ts
 var import_createRuntimeFn2 = require("homemade-recipes/createRuntimeFn");
 var buttonIconRecipe = (0, import_createRuntimeFn2.createRuntimeFn)((function() {
-  var x = { defaultClassName: "button__hi3ya0r", variantClassNames: { size: { "1": "button_size_1__hi3ya0s", "2": "button_size_2__hi3ya0t", "3": "button_size_3__hi3ya0u" } }, defaultVariants: {}, compoundVariants: [], responsiveVariantClassNames: { initial: void 0 }, conditionNames: [], conditions: { xs: "520px", sm: "768px", md: "1024px", lg: "1280px", xl: "1640px" }, identifier: "homemade-recipe__lb053z0", cssCache: [] };
+  var x = { defaultClassName: "button__hi3ya0e", variantClassNames: { size: { "1": "button_size_1__hi3ya0f", "2": "button_size_2__hi3ya0g", "3": "button_size_3__hi3ya0h" } }, defaultVariants: {}, compoundVariants: [], responsiveVariantClassNames: { initial: void 0 }, conditionNames: [], conditions: { xs: "520px", sm: "768px", md: "1024px", lg: "1280px", xl: "1640px" }, identifier: "homemade-recipe__lb053z0", cssCache: [] };
   x.responsiveVariantClassNames.initial = x.variantClassNames;
   return x;
 })());
 var buttonRecipe = (0, import_createRuntimeFn2.createRuntimeFn)((function() {
-  var x = { defaultClassName: "button__hi3ya00", variantClassNames: { fullWidth: { true: "button_fullWidth_true__hi3ya01", false: "button_fullWidth_false__hi3ya02" }, loading: { true: "button_loading_true__hi3ya03" }, size: { "1": "button_size_1__hi3ya04", "2": "button_size_2__hi3ya05", "3": "button_size_3__hi3ya06" }, variant: { primary: "button_variant_primary__hi3ya07", secondary: "button_variant_secondary__hi3ya08", outline: "button_variant_outline__hi3ya09", ghost: "button_variant_ghost__hi3ya0a", error: "button_variant_error__hi3ya0b", success: "button_variant_success__hi3ya0c" }, round: { true: "button_round_true__hi3ya0d" } }, defaultVariants: { size: "2", variant: "primary" }, compoundVariants: [], responsiveVariantClassNames: { initial: void 0, sm: { fullWidth: { true: "button_fullWidth_sm_true__hi3ya0e", false: "button_fullWidth_sm_false__hi3ya0f" }, loading: { true: "button_loading_sm_true__hi3ya0g" }, size: { "1": "button_size_sm_1__hi3ya0h", "2": "button_size_sm_2__hi3ya0i", "3": "button_size_sm_3__hi3ya0j" }, variant: { primary: "button_variant_sm_primary__hi3ya0k", secondary: "button_variant_sm_secondary__hi3ya0l", outline: "button_variant_sm_outline__hi3ya0m", ghost: "button_variant_sm_ghost__hi3ya0n", error: "button_variant_sm_error__hi3ya0o", success: "button_variant_sm_success__hi3ya0p" }, round: { true: "button_round_sm_true__hi3ya0q" } } }, conditionNames: ["sm"], conditions: { xs: "520px", sm: "768px", md: "1024px", lg: "1280px", xl: "1640px" }, identifier: "homemade-recipe__lb053z0", cssCache: [] };
+  var x = { defaultClassName: "button__hi3ya00", variantClassNames: { fullWidth: { true: "button_fullWidth_true__hi3ya01", false: "button_fullWidth_false__hi3ya02" }, loading: { true: "button_loading_true__hi3ya03" }, size: { "1": "button_size_1__hi3ya04", "2": "button_size_2__hi3ya05", "3": "button_size_3__hi3ya06" }, variant: { primary: "button_variant_primary__hi3ya07", secondary: "button_variant_secondary__hi3ya08", outline: "button_variant_outline__hi3ya09", ghost: "button_variant_ghost__hi3ya0a", error: "button_variant_error__hi3ya0b", success: "button_variant_success__hi3ya0c" }, round: { true: "button_round_true__hi3ya0d" } }, defaultVariants: { size: "2", variant: "primary" }, compoundVariants: [], responsiveVariantClassNames: { initial: void 0 }, conditionNames: [], conditions: { xs: "520px", sm: "768px", md: "1024px", lg: "1280px", xl: "1640px" }, identifier: "homemade-recipe__lb053z0", cssCache: [] };
   x.responsiveVariantClassNames.initial = x.variantClassNames;
   return x;
 })());
-var buttonSpinner = "button_buttonSpinner__hi3ya0v";
+var buttonSpinner = "button_buttonSpinner__hi3ya0i";
 
 // src/components/button.tsx
-var import_react_slot2 = require("@radix-ui/react-slot");
+var import_react_slot = require("@radix-ui/react-slot");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var defaultElement2 = "button";
 var Button = ({
   asChild,
   leftIcon,
@@ -303,40 +308,40 @@ var Button = ({
     ...buttonRecipe.variants()
   );
   const button = buttonRecipe(variants);
-  const Comp = asChild ? import_react_slot2.Slot : defaultElement2;
   const buttonIcon = buttonIconRecipe({
     size: variants.size
   });
+  const disabled = rest.disabled || Boolean(variants.loading);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-    Comp,
+    "button",
     {
       ...rest,
       className: mergeClasses(button, rest.className),
-      disabled: rest.disabled || Boolean(variants.loading),
+      disabled,
+      "aria-disabled": disabled,
       ...leftIcon && { "data-left-icon": "" },
       ...rightIcon && { "data-right-icon": "" },
       children: [
-        leftIcon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_slot2.Slot, { className: buttonIcon, children: leftIcon }),
+        leftIcon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_slot.Slot, { className: buttonIcon, children: leftIcon }),
         rest.children,
-        rightIcon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_slot2.Slot, { className: buttonIcon, children: rightIcon }),
-        variants.loading && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Spinner, { className: buttonSpinner })
+        rightIcon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_slot.Slot, { className: buttonIcon, children: rightIcon }),
+        variants.loading && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Spinner, { className: buttonSpinner, size: variants.size })
       ]
     }
   );
 };
 
-// src/theme/recipes/text.css.ts
+// src/theme/recipes/heading.css.ts
 var import_createRuntimeFn3 = require("homemade-recipes/createRuntimeFn");
-var textRecipe = (0, import_createRuntimeFn3.createRuntimeFn)((function() {
-  var x = { defaultClassName: "text__1y7s4vx0", variantClassNames: { color: { primary: "text_color_primary__1y7s4vx1", secondary: "text_color_secondary__1y7s4vx2", error: "text_color_error__1y7s4vx3", subtle: "text_color_subtle__1y7s4vx4" }, size: { "1": "text_size_1__1y7s4vx5", "2": "text_size_2__1y7s4vx6", "3": "text_size_3__1y7s4vx7", "4": "text_size_4__1y7s4vx8", "5": "text_size_5__1y7s4vx9", "6": "text_size_6__1y7s4vxa", "7": "text_size_7__1y7s4vxb", "8": "text_size_8__1y7s4vxc", "9": "text_size_9__1y7s4vxd" }, weight: { regular: "text_weight_regular__1y7s4vxe", medium: "text_weight_medium__1y7s4vxf", bold: "text_weight_bold__1y7s4vxg" } }, defaultVariants: { size: "3" }, compoundVariants: [], responsiveVariantClassNames: { initial: void 0 }, conditionNames: [], conditions: { xs: "520px", sm: "768px", md: "1024px", lg: "1280px", xl: "1640px" }, identifier: "homemade-recipe__lb053z0", cssCache: [] };
+var headingRecipe = (0, import_createRuntimeFn3.createRuntimeFn)((function() {
+  var x = { defaultClassName: "heading__1mvqggb0", variantClassNames: { color: { primary: "heading_color_primary__1mvqggb1", secondary: "heading_color_secondary__1mvqggb2", error: "heading_color_error__1mvqggb3", subtle: "heading_color_subtle__1mvqggb4" }, level: { "1": "heading_level_1__1mvqggb5", "2": "heading_level_2__1mvqggb6", "3": "heading_level_3__1mvqggb7", "4": "heading_level_4__1mvqggb8", "5": "heading_level_5__1mvqggb9", "6": "heading_level_6__1mvqggba" }, weight: { regular: "heading_weight_regular__1mvqggbb", medium: "heading_weight_medium__1mvqggbc", bold: "heading_weight_bold__1mvqggbd" } }, defaultVariants: { level: "1", weight: "medium" }, compoundVariants: [], responsiveVariantClassNames: { initial: void 0 }, conditionNames: [], conditions: { xs: "520px", sm: "768px", md: "1024px", lg: "1280px", xl: "1640px" }, identifier: "homemade-recipe__lb053z0", cssCache: [] };
   x.responsiveVariantClassNames.initial = x.variantClassNames;
   return x;
 })());
 
 // src/components/heading.tsx
-var import_react_slot3 = require("@radix-ui/react-slot");
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var textAs = {
+var headingAs = {
   1: "h1",
   2: "h2",
   3: "h3",
@@ -344,72 +349,74 @@ var textAs = {
   5: "h5",
   6: "h6"
 };
-var textSize = {
-  1: "8",
-  2: "7",
-  3: "6",
-  4: "5",
-  5: "4",
-  6: "3"
+var extractElementFromLevel = (level) => {
+  if (!level) {
+    return "h1";
+  }
+  return headingAs[level];
 };
-var Heading = ({
-  asChild,
-  color,
-  level = "1",
-  weight = "medium",
-  // overrides defaultVariant
-  ...props
-}) => {
-  const text = textRecipe({ color, size: textSize[level], weight });
-  const Comp = asChild ? import_react_slot3.Slot : textAs[level];
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Comp, { ...props, className: mergeClasses(text, props.className), children: props.children });
+var Heading = ({ ...props }) => {
+  const [variants, rest] = extractVariantsFromProps(
+    props,
+    ...headingRecipe.variants()
+  );
+  const heading = headingRecipe(variants);
+  const Comp = extractElementFromLevel(variants.level);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Comp, { ...rest, className: mergeClasses(heading, rest.className), children: rest.children });
 };
 
 // src/theme/recipes/icon-button.css.ts
 var import_createRuntimeFn4 = require("homemade-recipes/createRuntimeFn");
 var iconButtonRecipe = (0, import_createRuntimeFn4.createRuntimeFn)((function() {
-  var x = { defaultClassName: "icon-button__v93z8s0", variantClassNames: { loading: { true: "icon-button_loading_true__v93z8s1" }, size: { "1": "icon-button_size_1__v93z8s2", "2": "icon-button_size_2__v93z8s3", "3": "icon-button_size_3__v93z8s4", "4": "icon-button_size_4__v93z8s5" }, variant: { ghost: "icon-button_variant_ghost__v93z8s6", outline: "icon-button_variant_outline__v93z8s7" }, round: { true: "icon-button_round_true__v93z8s8" } }, defaultVariants: { size: "1", variant: "ghost" }, compoundVariants: [], responsiveVariantClassNames: { initial: void 0 }, conditionNames: [], conditions: { xs: "520px", sm: "768px", md: "1024px", lg: "1280px", xl: "1640px" }, identifier: "homemade-recipe__lb053z0", cssCache: [] };
+  var x = { defaultClassName: "icon-button__v93z8s0", variantClassNames: { loading: { true: "icon-button_loading_true__v93z8s1" }, size: { "1": "icon-button_size_1__v93z8s2", "2": "icon-button_size_2__v93z8s3", "3": "icon-button_size_3__v93z8s4" }, variant: { ghost: "icon-button_variant_ghost__v93z8s5", outline: "icon-button_variant_outline__v93z8s6" }, round: { true: "icon-button_round_true__v93z8s7" } }, defaultVariants: { size: "1", variant: "ghost" }, compoundVariants: [], responsiveVariantClassNames: { initial: void 0 }, conditionNames: [], conditions: { xs: "520px", sm: "768px", md: "1024px", lg: "1280px", xl: "1640px" }, identifier: "homemade-recipe__lb053z0", cssCache: [] };
   x.responsiveVariantClassNames.initial = x.variantClassNames;
   return x;
 })());
 
 // src/components/icon-button.tsx
-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, rest] = extractVariantsFromProps(
     props,
     ...iconButtonRecipe.variants()
   );
   const iconButton = iconButtonRecipe(variants);
-  const Comp = asChild ? import_react_slot4.Slot : defaultElement3;
+  const disabled = rest.disabled || Boolean(variants.loading);
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-    Comp,
+    "button",
     {
       ...rest,
       className: mergeClasses(iconButton, rest.className),
-      disabled: rest.disabled || Boolean(variants.loading),
+      disabled,
+      "aria-disabled": disabled,
       children: [
         rest.children,
-        variants.loading && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Spinner, { style: { position: "absolute" } })
+        variants.loading && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Spinner, { size: variants.size, style: { position: "absolute" } })
       ]
     }
   );
 };
 
+// src/theme/recipes/text.css.ts
+var import_createRuntimeFn5 = require("homemade-recipes/createRuntimeFn");
+var textRecipe = (0, import_createRuntimeFn5.createRuntimeFn)((function() {
+  var x = { defaultClassName: "text__1y7s4vx0", variantClassNames: { color: { primary: "text_color_primary__1y7s4vx1", secondary: "text_color_secondary__1y7s4vx2", error: "text_color_error__1y7s4vx3", subtle: "text_color_subtle__1y7s4vx4" }, size: { "1": "text_size_1__1y7s4vx5", "2": "text_size_2__1y7s4vx6", "3": "text_size_3__1y7s4vx7", "4": "text_size_4__1y7s4vx8", "5": "text_size_5__1y7s4vx9", "6": "text_size_6__1y7s4vxa", "7": "text_size_7__1y7s4vxb", "8": "text_size_8__1y7s4vxc", "9": "text_size_9__1y7s4vxd" }, weight: { regular: "text_weight_regular__1y7s4vxe", medium: "text_weight_medium__1y7s4vxf", bold: "text_weight_bold__1y7s4vxg" } }, defaultVariants: { size: "3" }, compoundVariants: [], responsiveVariantClassNames: { initial: void 0 }, conditionNames: [], conditions: { xs: "520px", sm: "768px", md: "1024px", lg: "1280px", xl: "1640px" }, identifier: "homemade-recipe__lb053z0", cssCache: [] };
+  x.responsiveVariantClassNames.initial = x.variantClassNames;
+  return x;
+})());
+
 // src/components/text.tsx
-var import_react_slot5 = require("@radix-ui/react-slot");
+var import_react_slot2 = require("@radix-ui/react-slot");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var defaultElement4 = "span";
+var defaultElement = "p";
 var Text = ({ asChild, ...props }) => {
   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, { ...rest, className: mergeClasses(text, rest.className), children: rest.children });
+  const Comp = asChild ? import_react_slot2.Slot : defaultElement;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Comp, { className: mergeClasses(text, rest.className), ...rest, children: rest.children });
 };
 
 // src/theme/styles/toast.css.ts
@@ -576,7 +583,7 @@ var ToastProvider = ({
     }
   ) });
 };
-var Toast = (props) => {
+var Toast = ({ ...props }) => {
   const { onOpenChange, toast, id, ...toastProps } = props;
   const ref = React2.useRef(null);
   const context = React2.useContext(ToastContextImpl);