@deepnoid/ui 0.0.112 → 0.1.0

package/dist/components/checkbox/checkbox.js

@@ -1,9 +1,14 @@
 "use client";
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -16,8 +21,84 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
+// ../../node_modules/tailwindcss/lib/util/createPlugin.js
+var require_createPlugin = __commonJS({
+  "../../node_modules/tailwindcss/lib/util/createPlugin.js"(exports2) {
+    "use strict";
+    Object.defineProperty(exports2, "__esModule", {
+      value: true
+    });
+    Object.defineProperty(exports2, "default", {
+      enumerable: true,
+      get: function() {
+        return _default;
+      }
+    });
+    function createPlugin(plugin2, config) {
+      return {
+        handler: plugin2,
+        config
+      };
+    }
+    createPlugin.withOptions = function(pluginFunction, configFunction = () => ({})) {
+      const optionsFunction = function(options) {
+        return {
+          __options: options,
+          handler: pluginFunction(options),
+          config: configFunction(options)
+        };
+      };
+      optionsFunction.__isOptionsFunction = true;
+      optionsFunction.__pluginFunction = pluginFunction;
+      optionsFunction.__configFunction = configFunction;
+      return optionsFunction;
+    };
+    var _default = createPlugin;
+  }
+});
+
+// ../../node_modules/tailwindcss/lib/public/create-plugin.js
+var require_create_plugin = __commonJS({
+  "../../node_modules/tailwindcss/lib/public/create-plugin.js"(exports2) {
+    "use strict";
+    Object.defineProperty(exports2, "__esModule", {
+      value: true
+    });
+    Object.defineProperty(exports2, "default", {
+      enumerable: true,
+      get: function() {
+        return _default;
+      }
+    });
+    var _createPlugin = /* @__PURE__ */ _interop_require_default(require_createPlugin());
+    function _interop_require_default(obj) {
+      return obj && obj.__esModule ? obj : {
+        default: obj
+      };
+    }
+    var _default = _createPlugin.default;
+  }
+});
+
+// ../../node_modules/tailwindcss/plugin.js
+var require_plugin = __commonJS({
+  "../../node_modules/tailwindcss/plugin.js"(exports2, module2) {
+    "use strict";
+    var createPlugin = require_create_plugin();
+    module2.exports = (createPlugin.__esModule ? createPlugin : { default: createPlugin }).default;
+  }
+});
+
 // src/components/checkbox/checkbox.tsx
 var checkbox_exports = {};
 __export(checkbox_exports, {
@@ -28,19 +109,226 @@ var import_react = require("react");
 
 // src/utils/tailwind-variants.ts
 var import_tailwind_variants = require("tailwind-variants");
-var COMMON_SIZE = ["sm", "md", "lg"];
-var COMMON_RADIUS = ["xlg", "xxlg", "none", "full"];
-var COMMON_FONTSIZE = ["h1", "h2", "h3", "h4", "h5"];
-var COMMON_SHADOW = ["inner", "drop"];
+
+// ../tailwind-config/src/plugin.ts
+var import_plugin = __toESM(require_plugin());
+
+// ../tailwind-config/src/typography/font.ts
+var fontSize = {
+  h1: [
+    "40px",
+    {
+      letterSpacing: "-2%",
+      fontWeight: "700"
+    }
+  ],
+  h2: [
+    "34px",
+    {
+      letterSpacing: "-2%",
+      fontWeight: "700"
+    }
+  ],
+  h3: [
+    "28px",
+    {
+      letterSpacing: "-2%",
+      fontWeight: "700"
+    }
+  ],
+  h4: [
+    "24px",
+    {
+      letterSpacing: "-2%",
+      fontWeight: "700"
+    }
+  ],
+  h5: [
+    "20px",
+    {
+      letterSpacing: "-2%",
+      fontWeight: "600"
+    }
+  ],
+  sm: [
+    "12px",
+    {
+      lineHeight: "18px",
+      letterSpacing: "-2%",
+      fontWeight: "400"
+    }
+  ],
+  md: [
+    "14px",
+    {
+      lineHeight: "21px",
+      letterSpacing: "-2%",
+      fontWeight: "400"
+    }
+  ],
+  lg: [
+    "16px",
+    {
+      lineHeight: "24px",
+      letterSpacing: "-2%",
+      fontWeight: "400"
+    }
+  ],
+  xl: [
+    "18px",
+    {
+      lineHeight: "27px",
+      letterSpacing: "-2%",
+      fontWeight: "400"
+    }
+  ]
+};
+
+// ../tailwind-config/src/animation/slide.ts
+var sliceAnimation = {
+  slideInFromTop: "slideInFromTop 0.5s ease-out",
+  slideInFromBottom: "slideInFromBottom 0.5s ease-out",
+  slideInFromLeft: "slideInFromLeft 0.5s ease-out",
+  slideInFromRight: "slideInFromRight 0.5s ease-out",
+  slideOutToTop: "slideOutToTop 0.5s ease-in",
+  slideOutToBottom: "slideOutToBottom 0.5s ease-in",
+  slideOutToLeft: "slideOutToLeft 0.5s ease-in",
+  slideOutToRight: "slideOutToRight 0.5s ease-in"
+};
+var sliceKeyframe = {
+  slideInFromTop: {
+    "0%": {
+      transform: "translateY(-10px)",
+      opacity: "0"
+    },
+    "100%": {
+      transform: "translateY(0)",
+      opacity: "1"
+    }
+  },
+  slideInFromBottom: {
+    "0%": {
+      transform: "translateY(10px)",
+      opacity: "0"
+    },
+    "100%": {
+      transform: "translateY(0)",
+      opacity: "1"
+    }
+  },
+  slideInFromLeft: {
+    "0%": {
+      transform: "translateX(-10px)",
+      opacity: "0"
+    },
+    "100%": {
+      transform: "translateX(0)",
+      opacity: "1"
+    }
+  },
+  slideInFromRight: {
+    "0%": {
+      transform: "translateX(10px)",
+      opacity: "0"
+    },
+    "100%": {
+      transform: "translateX(0)",
+      opacity: "1"
+    }
+  },
+  slideOutToTop: {
+    "0%": {
+      transform: "translateY(0)",
+      opacity: "1"
+    },
+    "100%": {
+      transform: "translateY(-10px)",
+      opacity: "0"
+    }
+  },
+  slideOutToBottom: {
+    "0%": {
+      transform: "translateY(0)",
+      opacity: "1"
+    },
+    "100%": {
+      transform: "translateY(10px)",
+      opacity: "0"
+    }
+  },
+  slideOutToLeft: {
+    "0%": {
+      transform: "translateX(0)",
+      opacity: "1"
+    },
+    "100%": {
+      transform: "translateX(-10px)",
+      opacity: "0"
+    }
+  },
+  slideOutToRight: {
+    "0%": {
+      transform: "translateX(0)",
+      opacity: "1"
+    },
+    "100%": {
+      transform: "translateX(10px)",
+      opacity: "0"
+    }
+  }
+};
+
+// ../tailwind-config/src/animation/index.ts
+var animation = { ...sliceAnimation };
+var keyframes = { ...sliceKeyframe };
+
+// ../tailwind-config/src/shadow/index.ts
+var boxShadow = {
+  "border-1": "inner 0 0 0 1px inset",
+  "border-2": "inner 0 0 0 2px inset",
+  "border-3": "inner 0 0 0 3px inset",
+  "border-4": "inner 0 0 0 4px inset",
+  "border-5": "inner 0 0 0 5px inset",
+  "border-6": "inner 0 0 0 6px inset",
+  "border-7": "inner 0 0 0 7px inset",
+  "border-8": "inner 0 0 0 8px inset",
+  "border-9": "inner 0 0 0 9px inset",
+  "border-10": "inner 0 0 0 10px inset",
+  inner: "inset 0 4px 8px 0 rgba(36, 39, 44, 0.2)",
+  drop: "0 20px 40px 0 rgba(36, 39, 44, 0.2)"
+};
+
+// ../tailwind-config/src/border/radius.ts
+var borderRadius = {
+  sm: "4px",
+  md: "6px",
+  lg: "8px",
+  xl: "10px",
+  none: "0",
+  full: "9999px"
+};
+
+// ../tailwind-config/src/space/gap.ts
+var gap = {
+  sm: "4px",
+  md: "6px",
+  lg: "8px",
+  xl: "10px"
+};
+
+// src/utils/tailwind-variants.ts
+function typedKeys(obj) {
+  return Object.keys(obj);
+}
+var COMMON_SIZE = ["sm", "md", "lg", "xl"];
 var tv = (0, import_tailwind_variants.createTV)({
-  // twMerge: false,
   twMergeConfig: {
     classGroups: {
-      fontSize: [{ text: [...COMMON_SIZE, ...COMMON_FONTSIZE] }],
-      borderRadius: [{ rounded: [...COMMON_RADIUS, ...COMMON_SIZE] }],
-      boxShadow: [{ shadow: [...COMMON_SHADOW] }],
+      fontSize: [{ text: [...typedKeys(fontSize)] }],
+      borderRadius: [{ rounded: [...typedKeys(borderRadius)] }],
+      boxShadow: [{ shadow: [...typedKeys(boxShadow)] }],
       padding: [{ p: [...COMMON_SIZE] }],
-      gap: [{ gap: [...COMMON_SIZE] }]
+      gap: [{ gap: [...typedKeys(gap)] }]
     }
   }
 });
@@ -65,67 +353,106 @@ var mapPropsVariants = (props, variantKeys, removeVariantProps = true) => {
   }
 };
 
+// src/utils/clsx.ts
+function clsx(...args) {
+  var i = 0, tmp, x, str = "";
+  while (i < args.length) {
+    if (tmp = args[i++]) {
+      if (x = toVal(tmp)) {
+        str && (str += " ");
+        str += x;
+      }
+    }
+  }
+  return str;
+}
+function toVal(mix) {
+  var k, y, str = "";
+  if (typeof mix === "string" || typeof mix === "number") {
+    str += mix;
+  } else if (typeof mix === "object") {
+    if (Array.isArray(mix)) {
+      var len = mix.length;
+      for (k = 0; k < len; k++) {
+        if (mix[k]) {
+          if (y = toVal(mix[k])) {
+            str && (str += " ");
+            str += y;
+          }
+        }
+      }
+    } else {
+      for (y in mix) {
+        if (mix[y]) {
+          str && (str += " ");
+          str += y;
+        }
+      }
+    }
+  }
+  return str;
+}
+
 // src/components/checkbox/checkbox.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var CheckBox = (0, import_react.forwardRef)((originalProps, ref) => {
-  const [props, variantProps] = mapPropsVariants(originalProps, checkbox.variantKeys);
-  const { children, classNames, ...inputProps } = props;
-  const slots = (0, import_react.useMemo)(() => checkbox({ ...variantProps }), [...Object.values(variantProps)]);
-  const getBaseProps = (0, import_react.useCallback)(
-    () => ({
-      className: slots.base({ class: classNames == null ? void 0 : classNames.base })
-    }),
-    [slots, classNames]
+  var _a, _b;
+  const [props, variantProps] = mapPropsVariants(originalProps, checkboxStyle.variantKeys);
+  const { children, classNames, labelPosition = "end", ...inputProps } = props;
+  const slots = (0, import_react.useMemo)(() => checkboxStyle({ ...variantProps }), [variantProps]);
+  const isSelected = (_b = (_a = inputProps.checked) != null ? _a : inputProps.defaultChecked) != null ? _b : false;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "label",
+    {
+      className: clsx(
+        slots.base({ class: classNames == null ? void 0 : classNames.base }),
+        labelPosition === "start" && slots.labelReverse({ class: classNames == null ? void 0 : classNames.labelReverse })
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { ...inputProps, type: "checkbox", ref }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          CheckBoxIcon,
+          {
+            size: variantProps.size,
+            isSelected,
+            className: slots.icon({ class: classNames == null ? void 0 : classNames.icon })
+          }
+        ) }),
+        children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children })
+      ]
+    }
   );
-  const getInputProps = (0, import_react.useCallback)(() => {
-    return {
-      ...inputProps,
-      type: "checkbox",
-      ref,
-      size: 0
-    };
-  }, [slots, classNames, inputProps]);
-  const getWrapperProps = (0, import_react.useCallback)(() => {
-    return {
-      className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper })
-    };
-  }, [slots, classNames]);
-  const getLabelProps = (0, import_react.useCallback)(() => {
-    return {
-      className: slots.label({ class: classNames == null ? void 0 : classNames.label })
-    };
-  }, [classNames == null ? void 0 : classNames.label, slots]);
-  const getIconProps = (0, import_react.useCallback)(() => {
-    return {
-      isSelected: true,
-      className: slots.icon({ class: classNames == null ? void 0 : classNames.icon })
-    };
-  }, [slots, classNames]);
-  const CheckBoxIcon = (props2) => {
-    const { isSelected, ...otherProps } = props2;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { "aria-hidden": "true", role: "presentation", viewBox: "0 0 17 18", ...otherProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "polyline",
-      {
-        fill: "none",
-        points: "1 9 7 14 15 4",
-        stroke: "currentColor",
-        strokeLinecap: "round",
-        strokeWidth: 3,
-        style: isSelected ? {
-          transition: "stroke-dashoffset 250ms linear 0.2s"
-        } : {}
-      }
-    ) });
-  };
-  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", { ...getWrapperProps(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckBoxIcon, { ...getIconProps() }) }),
-    children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ...getLabelProps(), children })
-  ] });
 });
 CheckBox.displayName = "CheckBox";
 var checkbox_default = CheckBox;
-var checkbox = tv({
+var CheckBoxIcon = ({ size, isSelected, className }) => {
+  const strokeWidth = (0, import_react.useMemo)(() => {
+    switch (size) {
+      case "sm":
+        return 1;
+      case "md":
+        return 1.25;
+      case "lg":
+        return 1.5;
+      case "xl":
+        return 1.75;
+      default:
+        return 1.25;
+    }
+  }, [size]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 13 13", fill: "none", className, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "path",
+    {
+      d: "M2.16667 6.90123L5.63334 10.1111L10.8333 2.88889",
+      stroke: "white",
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      style: isSelected ? { transition: "stroke-dashoffset 250ms linear 0.2s" } : {}
+    }
+  ) });
+};
+var checkboxStyle = tv({
   slots: {
     base: ["group", "relative", "inline-flex", "items-center", "cursor-pointer"],
     wrapper: [
@@ -133,16 +460,14 @@ var checkbox = tv({
       "inline-flex",
       "items-center",
       "justify-center",
-      // before
       "before:content-['']",
+      "before:bg-body-background",
       "before:absolute",
       "before:inset-0",
-      "before:border-solid",
-      "before:border-[1px]",
+      "before:border",
+      "before:border-neutral-light",
       "before:box-border",
       "before:z-10",
-      "before:border-neutral-main",
-      // after
       "after:content-['']",
       "after:absolute",
       "after:inset-0",
@@ -150,53 +475,91 @@ var checkbox = tv({
       "after:opacity-0",
       "group-has-[:checked]:after:scale-100",
       "group-has-[:checked]:after:opacity-100",
-      // hover
-      "group-hover:before:bg-neutral-soft",
       "before:transition duration-200"
     ],
-    icon: ["z-10", "opacity-0", "group-has-[:checked]:opacity-100", "text-white"],
-    label: ["relative", "text-foreground", "select-none"]
+    icon: ["z-10", "opacity-0", "group-has-[:checked]:opacity-100", "text-neutral-light"],
+    labelReverse: ["flex-row-reverse"],
+    label: ["relative", "text-body-foreground", "select-none"]
   },
   variants: {
     color: {
       primary: {
-        wrapper: ["group-has-[:checked]:before:border-primary-main", "group-has-[:checked]:before:bg-primary-main"]
+        wrapper: [
+          "group-has-[:checked]:before:border-primary-main",
+          "group-has-[:checked]:before:bg-primary-main",
+          "group-hover:before:border-primary-light",
+          "group-hover:before:bg-primary-soft"
+        ]
       },
       secondary: {
-        wrapper: ["group-has-[:checked]:before:border-secondary-main", "group-has-[:checked]:before:bg-secondary-main"]
+        wrapper: [
+          "group-has-[:checked]:before:border-secondary-main",
+          "group-has-[:checked]:before:bg-secondary-main",
+          "group-hover:before:border-secondary-light",
+          "group-hover:before:bg-secondary-soft"
+        ]
+      },
+      neutral: {
+        wrapper: [
+          "group-has-[:checked]:before:border-neutral-main",
+          "group-has-[:checked]:before:bg-neutral-main",
+          "group-hover:before:border-neutral-light",
+          "group-hover:before:bg-neutral-soft"
+        ]
       }
     },
     size: {
       sm: {
-        wrapper: ["w-[15px]", "h-[15px]", "rounded-sm", "before:rounded-[3px]", "after:rounded-[3px]"],
-        label: ["text-sm", "ml-[6px]"],
+        base: ["gap-[8px]"],
+        wrapper: [
+          "w-[12px]",
+          "h-[12px]",
+          "rounded-[2px]",
+          "before:border-sm",
+          "before:rounded-[2px]",
+          "after:rounded-[2px]"
+        ],
+        label: ["text-sm"],
         icon: ["w-[10px]", "h-[10px]"]
       },
       md: {
-        wrapper: ["w-[17px]", "h-[17px]", "rounded-md", "before:rounded-[3px]", "after:rounded-[3px]"],
-        label: ["text-md", "ml-[8px]"],
-        icon: ["w-[12px]", "h-[12px]"]
+        base: ["gap-[8px]"],
+        wrapper: [
+          "w-[15px]",
+          "h-[15px]",
+          "rounded-[2px]",
+          "before:border-md",
+          "before:rounded-[2px]",
+          "after:rounded-[2px]"
+        ],
+        label: ["text-md"],
+        icon: ["w-[13px]", "h-[13px]"]
       },
       lg: {
-        wrapper: ["w-[20px]", "h-[20px]", "rounded-lg", "before:rounded-[4px]", "after:rounded-[4px]"],
-        label: ["text-lg", "ml-[10px]"],
-        icon: ["w-[15px]", "h-[15px]"]
-      }
-    },
-    lineThrough: {
-      true: {
-        label: [
-          "inline-flex",
-          "items-center",
-          "justify-center",
-          "before:content-['']",
-          "before:absolute",
-          "before:bg-black",
-          "before:w-0",
-          "before:h-0.5",
-          "group-has-[:checked]:opacity-60",
-          "group-has-[:checked]:before:w-full"
-        ]
+        base: ["gap-[10px]"],
+        wrapper: [
+          "w-[18px]",
+          "h-[18px]",
+          "rounded-[4px]",
+          "before:border-lg",
+          "before:rounded-[4px]",
+          "after:rounded-[4px]"
+        ],
+        label: ["text-lg"],
+        icon: ["w-[16px]", "h-[16px]"]
+      },
+      xl: {
+        base: ["gap-[10px]"],
+        wrapper: [
+          "w-[21px]",
+          "h-[21px]",
+          "rounded-[4px]",
+          "before:border-xl",
+          "before:rounded-[2px]",
+          "after:rounded-[2px]"
+        ],
+        label: ["text-xl"],
+        icon: ["w-[19px]", "h-[19px]"]
       }
     },
     isInvalid: {
@@ -204,51 +567,34 @@ var checkbox = tv({
         wrapper: [
           "before:border-danger-main",
           "group-has-[:checked]:before:bg-danger-main",
-          "group-has-[:checked]:before:border-danger-main"
+          "group-has-[:checked]:before:border-danger-main",
+          "group-hover:before:border-danger-light",
+          "group-hover:before:bg-danger-soft"
         ],
-        label: "text-danger-main"
+        label: ["text-danger-main"]
       }
     },
     isDisabled: {
       true: {
-        base: "opacity-disabled pointer-events-none text-neutral-light",
+        base: ["opacity-disabled", "cursor-not-allowed", "pointer-events-auto", "text-neutral-light"],
         wrapper: [
+          "cursor-not-allowed",
           "after:bg-neutral-soft",
           "before:border-neutral-light",
           "before:bg-neutral-soft",
           "group-has-[:checked]:before:bg-neutral-soft",
-          "group-has-[:checked]:before:border-neutral-light"
-        ],
-        label: "text-neutral-light",
-        icon: "text-neutral-light"
-      }
-    },
-    disableAnimation: {
-      true: {
-        wrapper: "transition-none",
-        icon: "transition-none",
-        label: "transition-none"
-      },
-      false: {
-        wrapper: [
-          "before:transition-colors",
-          "group-data-[pressed=true]:scale-95",
-          "transition-transform",
-          "after:transition-transform-opacity",
-          "after:!ease-linear",
-          "after:!duration-200",
-          "motion-reduce:transition-none"
+          "group-has-[:checked]:before:border-neutral-light",
+          "group-hover:before:border-neutral-light",
+          "group-hover:before:bg-neutral-soft"
         ],
-        icon: ["transition-opacity", "motion-reduce:transition-none"],
-        label: ["transition-colors-opacity", "before:transition-width", "motion-reduce:transition-none"]
+        label: ["text-neutral-light"],
+        icon: ["text-neutral-light", "opacity-0"]
       }
     }
   },
   defaultVariants: {
     color: "primary",
     size: "md",
-    isDisabled: false,
-    lineThrough: false,
-    disableAnimation: false
+    isDisabled: false
   }
 });