@deepnoid/ui 0.0.111 → 0.1.0

package/dist/components/switch/index.js

@@ -52,60 +52,17 @@ var mapPropsVariants = (props, variantKeys, removeVariantProps = true) => {
 // src/components/switch/switch.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var Switch = (0, import_react.forwardRef)((originalProps, ref) => {
-  const [props, variantProps] = mapPropsVariants(originalProps, toggle.variantKeys);
-  const { children, classNames, ...switchProps } = props;
-  const slots = (0, import_react.useMemo)(
-    () => toggle({
-      ...variantProps
-    }),
-    [...Object.values(variantProps)]
-  );
-  const getBaseProps = () => ({
-    className: slots.base({ class: classNames == null ? void 0 : classNames.base })
-  });
-  const getOuterWrapperProps = (0, import_react.useCallback)(
-    () => ({
-      className: slots.outerWrapper({ class: classNames == null ? void 0 : classNames.outerWrapper })
-    }),
-    [slots, classNames == null ? void 0 : classNames.outerWrapper]
-  );
-  const getWrapperProps = (0, import_react.useCallback)(
-    () => ({
-      className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper })
-    }),
-    [slots, classNames]
-  );
-  const getInputProps = () => ({
-    ...switchProps,
-    type: "checkbox",
-    disabled: originalProps.isDisabled,
-    ref,
-    id: switchProps.id,
-    size: 0
-  });
-  const getThumbProps = (0, import_react.useCallback)(
-    (props2 = {}) => ({
-      ...props2,
-      className: slots.thumb({ class: classNames == null ? void 0 : classNames.thumb })
-    }),
-    [slots, classNames == null ? void 0 : classNames.thumb]
-  );
-  const getLabelProps = (0, import_react.useCallback)(
-    (props2 = {}) => ({
-      ...props2,
-      className: slots.label({ class: classNames == null ? void 0 : classNames.label })
-    }),
-    [slots, classNames == null ? void 0 : classNames.label]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { ...getBaseProps(), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { ...getInputProps() }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ...getOuterWrapperProps(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ...getWrapperProps(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ...getThumbProps() }) }) }),
-    children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ...getLabelProps(), children })
+  const [rawProps, variantProps] = mapPropsVariants(originalProps, switchStyle.variantKeys);
+  const { size, color, isDisabled, disableAnimation, id, classNames, ...inputProps } = { ...rawProps, ...variantProps };
+  const slots = (0, import_react.useMemo)(() => switchStyle({ ...variantProps }), [variantProps]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { ...inputProps, id, ref, type: "checkbox", disabled: isDisabled, className: "hidden" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: slots.outerWrapper({ class: classNames == null ? void 0 : classNames.outerWrapper }), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: slots.thumb({ class: classNames == null ? void 0 : classNames.thumb }) }) }) })
   ] });
 });
 Switch.displayName = "Switch";
 var switch_default = Switch;
-var toggle = (0, import_tailwind_variants.tv)({
+var switchStyle = (0, import_tailwind_variants.tv)({
   slots: {
     base: ["group/switch", "relative", "max-w-fit", "inline-flex", "items-center", "justify-start", "cursor-pointer"],
     outerWrapper: [
@@ -116,8 +73,7 @@ var toggle = (0, import_tailwind_variants.tv)({
       "flex-shrink-0",
       "bg-neutral-soft",
       "overflow-hidden",
-      "rounded-full",
-      "px-[2px]"
+      "rounded-full"
     ],
     wrapper: [
       "relative",
@@ -127,8 +83,7 @@ var toggle = (0, import_tailwind_variants.tv)({
       "flex-shrink-0",
       "overflow-hidden",
       "bg-neutral-light",
-      "rounded-full",
-      "group-has-[:checked]/switch:bg-primary-main"
+      "rounded-full"
     ],
     thumb: [
       "z-10",
@@ -139,54 +94,76 @@ var toggle = (0, import_tailwind_variants.tv)({
       "shadow-small",
       "rounded-full",
       "origin-right"
-    ],
-    label: ["relative", "text-foreground", "select-none"]
+    ]
   },
   variants: {
     size: {
       sm: {
-        outerWrapper: ["w-[48px]", "h-[24px]", "px-[3px]"],
-        wrapper: ["w-[42px]", "h-[18px]", "px-[3px]"],
-        thumb: ["w-[12px]", "h-[12px]", "group-has-[:checked]/switch:ml-[24px]"],
-        label: "text-sm"
+        outerWrapper: ["w-[32px]", "h-[16px]", "p-[2px]"],
+        wrapper: ["w-[28px]", "h-[12px]", "p-[2px]"],
+        thumb: ["w-[8px]", "h-[8px]", "group-has-[:checked]/switch:ml-[16px]"]
       },
       md: {
-        outerWrapper: ["w-[60px]", "h-[30px]", "px-[3px]"],
-        wrapper: ["w-[54px]", "h-[24px]", "px-[3px]"],
-        thumb: ["w-[18px]", "h-[18px]", "group-has-[:checked]/switch:ml-[30px]"],
-        label: "text-md"
+        outerWrapper: ["w-[48px]", "h-[24px]", "px-[3px]"],
+        wrapper: ["w-[42px]", "h-[16px]", "px-[3px]"],
+        thumb: ["w-[12px]", "h-[12px]", "group-has-[:checked]/switch:ml-[24px]"]
       },
       lg: {
-        outerWrapper: ["w-[72px]", "h-[36px]", "px-[3px]"],
-        wrapper: ["w-[66px]", "h-[30px]", "px-[3px]"],
-        thumb: ["w-[24px]", "h-[24px]", "group-has-[:checked]/switch:ml-[36px]"],
-        label: "text-lg"
+        outerWrapper: ["w-[64px]", "h-[32px]", "px-[4px]"],
+        wrapper: ["w-[56px]", "h-[24px]", "px-[4px]"],
+        thumb: ["w-[16px]", "h-[16px]", "group-has-[:checked]/switch:ml-[32px]"]
+      },
+      xl: {
+        outerWrapper: ["w-[80px]", "h-[40px]", "px-[5px]"],
+        wrapper: ["w-[70px]", "h-[30px]", "px-[5px]"],
+        thumb: ["w-[20px]", "h-[20px]", "group-has-[:checked]/switch:ml-[40px]"]
       }
     },
+    color: {
+      primary: {},
+      secondary: {}
+    },
     isDisabled: {
       true: {
-        base: "pointer-events-none",
-        wrapper: "bg-neutral-light group-has-[:checked]/switch:bg-neutral-light",
-        thumb: "bg-trans-soft"
+        base: ["!pointer-events-none"],
+        outerWrapper: ["!bg-neutral-soft"],
+        wrapper: ["!bg-neutral-light", "!group-has-[:checked]/switch:bg-neutral-light", "!hover:bg-neutral-light"],
+        thumb: ["!bg-trans-light"]
       }
     },
     disableAnimation: {
       true: {
-        wrapper: "transition-none",
-        thumb: "transition-none"
+        wrapper: ["transition-none"],
+        thumb: ["transition-none"]
       },
       false: {
-        wrapper: "transition-background",
-        thumb: "transition-all"
+        wrapper: ["transition-background"],
+        thumb: ["transition-all"]
       }
     }
   },
+  compoundVariants: [
+    {
+      color: "primary",
+      class: {
+        outerWrapper: ["group-has-[:checked]/switch:bg-primary-light"],
+        wrapper: ["group-has-[:checked]/switch:bg-primary-main", "hover:bg-primary-light"]
+      }
+    },
+    {
+      color: "secondary",
+      class: {
+        outerWrapper: ["group-has-[:checked]/switch:bg-secondary-light"],
+        wrapper: ["group-has-[:checked]/switch:bg-secondary-main", "hover:bg-secondary-light"]
+      }
+    }
+  ],
   defaultVariants: {
     size: "md",
+    color: "primary",
     isDisabled: false,
     disableAnimation: false
-  },
-  compoundVariants: []
+  }
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/components/switch/index.mjs

@@ -2,9 +2,9 @@
 import "../../chunk-LVFI2NOH.mjs";
 import {
   switch_default
-} from "../../chunk-S3O52LLG.mjs";
+} from "../../chunk-Z74QNVPG.mjs";
 import "../../chunk-E3G5QXSH.mjs";
-import "../../chunk-IZ6II3QA.mjs";
+import "../../chunk-AC6TWLRT.mjs";
 export {
   switch_default as Switch
 };

package/dist/components/switch/switch.d.mts

@@ -1,54 +1,61 @@
 import * as tailwind_variants from 'tailwind-variants';
 import { VariantProps } from 'tailwind-variants';
-import * as tailwind_variants_dist_config from 'tailwind-variants/dist/config';
-import * as React from 'react';
+import * as react from 'react';
 import { ComponentPropsWithRef } from 'react';
-import { SlotsToClasses } from '../../utils/types.mjs';
+import { Size, SlotsToClasses } from '../../utils/types.mjs';
 
 interface Props extends Omit<ComponentPropsWithRef<"input">, "ref" | "size"> {
-    classNames?: SlotsToClasses<ToggleSlots>;
-    size?: "sm" | "md" | "lg";
-    label?: string;
+    size?: Size;
+    color?: "primary" | "secondary";
+    isDisabled?: boolean;
+    disableAnimation?: boolean;
+    classNames?: SlotsToClasses<SwitchSlots>;
 }
-type SwitchProps = Props & ToggleVariantProps;
-declare const Switch: React.ForwardRefExoticComponent<Props & ToggleVariantProps & React.RefAttributes<HTMLInputElement>>;
+declare const Switch: react.ForwardRefExoticComponent<Props & SwitchVariantProps & react.RefAttributes<HTMLInputElement>>;
 
-declare const toggle: tailwind_variants.TVReturnType<{
+declare const switchStyle: tailwind_variants.TVReturnType<{
     size: {
         sm: {
             outerWrapper: string[];
             wrapper: string[];
             thumb: string[];
-            label: string;
         };
         md: {
             outerWrapper: string[];
             wrapper: string[];
             thumb: string[];
-            label: string;
         };
         lg: {
             outerWrapper: string[];
             wrapper: string[];
             thumb: string[];
-            label: string;
+        };
+        xl: {
+            outerWrapper: string[];
+            wrapper: string[];
+            thumb: string[];
         };
     };
+    color: {
+        primary: {};
+        secondary: {};
+    };
     isDisabled: {
         true: {
-            base: string;
-            wrapper: string;
-            thumb: string;
+            base: string[];
+            outerWrapper: string[];
+            wrapper: string[];
+            thumb: string[];
         };
     };
     disableAnimation: {
         true: {
-            wrapper: string;
-            thumb: string;
+            wrapper: string[];
+            thumb: string[];
         };
         false: {
-            wrapper: string;
-            thumb: string;
+            wrapper: string[];
+            thumb: string[];
         };
     };
 }, {
@@ -56,119 +63,49 @@ declare const toggle: tailwind_variants.TVReturnType<{
     outerWrapper: string[];
     wrapper: string[];
     thumb: string[];
-    label: string[];
-}, undefined, tailwind_variants_dist_config.TVConfig<{
+}, undefined, {
     size: {
         sm: {
             outerWrapper: string[];
             wrapper: string[];
             thumb: string[];
-            label: string;
         };
         md: {
             outerWrapper: string[];
             wrapper: string[];
             thumb: string[];
-            label: string;
         };
         lg: {
             outerWrapper: string[];
             wrapper: string[];
             thumb: string[];
-            label: string;
-        };
-    };
-    isDisabled: {
-        true: {
-            base: string;
-            wrapper: string;
-            thumb: string;
-        };
-    };
-    disableAnimation: {
-        true: {
-            wrapper: string;
-            thumb: string;
-        };
-        false: {
-            wrapper: string;
-            thumb: string;
-        };
-    };
-}, {
-    size: {
-        sm: {
-            outerWrapper: string[];
-            wrapper: string[];
-            thumb: string[];
-            label: string;
-        };
-        md: {
-            outerWrapper: string[];
-            wrapper: string[];
-            thumb: string[];
-            label: string;
         };
-        lg: {
+        xl: {
             outerWrapper: string[];
             wrapper: string[];
             thumb: string[];
-            label: string;
         };
     };
-    isDisabled: {
-        true: {
-            base: string;
-            wrapper: string;
-            thumb: string;
-        };
+    color: {
+        primary: {};
+        secondary: {};
     };
-    disableAnimation: {
+    isDisabled: {
         true: {
-            wrapper: string;
-            thumb: string;
-        };
-        false: {
-            wrapper: string;
-            thumb: string;
-        };
-    };
-}>, {
-    size: {
-        sm: {
-            outerWrapper: string[];
-            wrapper: string[];
-            thumb: string[];
-            label: string;
-        };
-        md: {
-            outerWrapper: string[];
-            wrapper: string[];
-            thumb: string[];
-            label: string;
-        };
-        lg: {
+            base: string[];
             outerWrapper: string[];
             wrapper: string[];
             thumb: string[];
-            label: string;
-        };
-    };
-    isDisabled: {
-        true: {
-            base: string;
-            wrapper: string;
-            thumb: string;
         };
     };
     disableAnimation: {
         true: {
-            wrapper: string;
-            thumb: string;
+            wrapper: string[];
+            thumb: string[];
         };
         false: {
-            wrapper: string;
-            thumb: string;
+            wrapper: string[];
+            thumb: string[];
         };
     };
 }, {
@@ -176,129 +113,58 @@ declare const toggle: tailwind_variants.TVReturnType<{
     outerWrapper: string[];
     wrapper: string[];
     thumb: string[];
-    label: string[];
 }, tailwind_variants.TVReturnType<{
     size: {
         sm: {
             outerWrapper: string[];
             wrapper: string[];
             thumb: string[];
-            label: string;
         };
         md: {
             outerWrapper: string[];
             wrapper: string[];
             thumb: string[];
-            label: string;
         };
         lg: {
             outerWrapper: string[];
             wrapper: string[];
             thumb: string[];
-            label: string;
-        };
-    };
-    isDisabled: {
-        true: {
-            base: string;
-            wrapper: string;
-            thumb: string;
-        };
-    };
-    disableAnimation: {
-        true: {
-            wrapper: string;
-            thumb: string;
-        };
-        false: {
-            wrapper: string;
-            thumb: string;
-        };
-    };
-}, {
-    base: string[];
-    outerWrapper: string[];
-    wrapper: string[];
-    thumb: string[];
-    label: string[];
-}, undefined, tailwind_variants_dist_config.TVConfig<{
-    size: {
-        sm: {
-            outerWrapper: string[];
-            wrapper: string[];
-            thumb: string[];
-            label: string;
-        };
-        md: {
-            outerWrapper: string[];
-            wrapper: string[];
-            thumb: string[];
-            label: string;
         };
-        lg: {
+        xl: {
             outerWrapper: string[];
             wrapper: string[];
             thumb: string[];
-            label: string;
         };
     };
-    isDisabled: {
-        true: {
-            base: string;
-            wrapper: string;
-            thumb: string;
-        };
+    color: {
+        primary: {};
+        secondary: {};
     };
-    disableAnimation: {
+    isDisabled: {
         true: {
-            wrapper: string;
-            thumb: string;
-        };
-        false: {
-            wrapper: string;
-            thumb: string;
-        };
-    };
-}, {
-    size: {
-        sm: {
-            outerWrapper: string[];
-            wrapper: string[];
-            thumb: string[];
-            label: string;
-        };
-        md: {
-            outerWrapper: string[];
-            wrapper: string[];
-            thumb: string[];
-            label: string;
-        };
-        lg: {
+            base: string[];
             outerWrapper: string[];
             wrapper: string[];
             thumb: string[];
-            label: string;
-        };
-    };
-    isDisabled: {
-        true: {
-            base: string;
-            wrapper: string;
-            thumb: string;
         };
     };
     disableAnimation: {
         true: {
-            wrapper: string;
-            thumb: string;
+            wrapper: string[];
+            thumb: string[];
         };
         false: {
-            wrapper: string;
-            thumb: string;
+            wrapper: string[];
+            thumb: string[];
         };
     };
-}>, unknown, unknown, undefined>>;
-type ToggleVariantProps = VariantProps<typeof toggle>;
-type ToggleSlots = keyof ReturnType<typeof toggle>;
+}, {
+    base: string[];
+    outerWrapper: string[];
+    wrapper: string[];
+    thumb: string[];
+}, undefined, unknown, unknown, undefined>>;
+type SwitchVariantProps = VariantProps<typeof switchStyle>;
+type SwitchSlots = keyof ReturnType<typeof switchStyle>;
 
-export { type Props, type SwitchProps, type ToggleSlots, type ToggleVariantProps, Switch as default, toggle };
+export { type SwitchSlots, type SwitchVariantProps, Switch as default };