@deepnoid/ui 0.0.111 → 0.1.0

package/dist/components/radio/radio.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/radio/radio.tsx
 var radio_exports = {};
 __export(radio_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,50 +353,70 @@ 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/radio/radio.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var Radio = (0, import_react.forwardRef)((originalProps, ref) => {
-  const [props, variantProps] = mapPropsVariants(originalProps, radio.variantKeys);
-  const { children, classNames, ...inputProps } = props;
-  const slots = (0, import_react.useMemo)(() => radio({ ...variantProps }), [...Object.values(variantProps)]);
-  const getBaseProps = (0, import_react.useCallback)(
-    () => ({
-      className: slots.base({ class: classNames == null ? void 0 : classNames.base })
-    }),
-    [slots, classNames]
+  const [props, variantProps] = mapPropsVariants(originalProps, radioStyle.variantKeys);
+  const { children, classNames, labelPosition = "end", ...inputProps } = props;
+  const slots = (0, import_react.useMemo)(() => radioStyle({ ...variantProps }), [variantProps]);
+  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: "radio", ref }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: slots.outerDot({ class: classNames == null ? void 0 : classNames.outerDot }), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: slots.innerDot({ class: classNames == null ? void 0 : classNames.innerDot }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: slots.labelWrapper({ class: classNames == null ? void 0 : classNames.labelWrapper }), children: 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: "radio",
-      ref,
-      size: 0
-    };
-  }, [slots, classNames, inputProps]);
-  const getIconProps = (0, import_react.useCallback)(() => {
-    return {
-      className: slots.icon({ class: classNames == null ? void 0 : classNames.icon })
-    };
-  }, [slots, classNames]);
-  const getLabelProps = (0, import_react.useCallback)(() => {
-    return {
-      className: slots.label({ class: classNames == null ? void 0 : classNames.label })
-    };
-  }, [slots, classNames]);
-  const getLabelWrapperProps = (0, import_react.useCallback)(() => {
-    return {
-      className: slots.labelWrapper({ class: classNames == null ? void 0 : classNames.labelWrapper })
-    };
-  }, [slots, classNames]);
-  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", { ...getIconProps() }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...getLabelWrapperProps(), children: children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ...getLabelProps(), children }) })
-  ] });
 });
 Radio.displayName = "Radio";
 var radio_default = Radio;
-var radio = tv({
+var radioStyle = tv({
   slots: {
     base: [
       "group/radio",
@@ -120,108 +428,122 @@ var radio = tv({
       "cursor-pointer",
       "tap-highlight-transparent"
     ],
-    icon: [
-      "relative",
+    outerDot: [
       "inline-flex",
       "items-center",
       "justify-center",
+      "relative",
       "flex-shrink-0",
-      "overflow-hidden",
-      // 테두리
+      "w-[15px]",
+      "h-[15px]",
+      "rounded-full",
+      "border",
+      "border-default",
       "before:content-['']",
       "before:absolute",
       "before:inset-0",
-      "before:border-solid",
-      "before:border-[1px]",
-      "before:box-border",
-      "before:rounded-full",
-      "before:border-neutral-main",
-      // control
-      "after:content-['']",
-      "after:absolute",
-      "after:inset-0",
-      "after:rounded-full",
-      "after:border-box",
-      "after:scale-50",
-      "after:opacity-0",
-      "after:top-1/2",
-      "after:left-1/2",
-      "after:-translate-x-1/2",
-      "after:-translate-y-1/2",
-      "group-has-[:checked]/radio:after:opacity-100",
-      "group-has-[:checked]/radio:after:scale-100",
-      // hover
-      "group-hover/radio:before:bg-neutral-soft",
-      "before:transition duration-200",
-      // focus ring
-      "outline-none",
-      "group-focus/radio:z-10",
-      "group-focus/radio:ring-2",
-      "group-focus/radio:ring-focus",
-      "group-focus/radio:ring-offset-2",
-      "group-focus/radio:ring-offset-background"
+      "before:rounded-full"
+    ],
+    innerDot: [
+      "inline-block",
+      "w-[8px]",
+      "h-[8px]",
+      "rounded-full",
+      "bg-primary-main",
+      "opacity-0",
+      "transition-opacity",
+      "group-has-[:checked]/radio:opacity-100"
     ],
-    labelWrapper: "flex flex-col",
-    label: "text-foreground select-none"
+    labelWrapper: ["flex", "flex-col"],
+    labelReverse: ["flex-row-reverse"],
+    label: ["text-foreground", "select-none"]
   },
   variants: {
     color: {
       primary: {
-        icon: ["group-has-[:checked]/radio:before:border-primary-main", "after:bg-primary-main"]
+        outerDot: [
+          "group-has-[:checked]/radio:border-primary-main",
+          "group-has-[:checked]/radio:border-primary-main",
+          "group-hover/radio:border-primary-light",
+          "group-hover/radio:bg-primary-soft"
+        ],
+        innerDot: ["bg-primary-main"]
       },
       secondary: {
-        icon: ["group-has-[:checked]/radio:before:border-secondary-main", "after:bg-secondary-main"]
+        outerDot: [
+          "group-has-[:checked]/radio:border-secondary-main",
+          "group-hover/radio:border-secondary-light",
+          "group-hover/radio:bg-secondary-soft"
+        ],
+        innerDot: ["bg-secondary-main"]
+      },
+      neutral: {
+        outerDot: [
+          "group-has-[:checked]/radio:border-neutral-main",
+          "group-hover/radio:border-neutral-light",
+          "group-hover/radio:bg-neutral-soft"
+        ],
+        innerDot: ["bg-neutral-main"]
       }
     },
     size: {
       sm: {
-        icon: ["w-[15px]", "h-[15px]", "mr-[6px]", "after:w-[9px]", "after:h-[9px]"],
-        label: "text-sm"
+        base: ["gap-[8px]"],
+        outerDot: ["w-[12px]", "h-[12px]", "border-sm"],
+        innerDot: ["w-[6px]", "h-[6px]"],
+        label: ["text-sm"]
       },
       md: {
-        icon: ["w-[17px]", "h-[17px]", "mr-[8px]", "after:w-[11px]", "after:h-[11px]"],
-        label: "text-md"
+        base: ["gap-[8px]"],
+        outerDot: ["w-[15px]", "h-[15px]", "border-md"],
+        innerDot: ["w-[8px]", "h-[8px]"],
+        label: ["text-md"]
       },
       lg: {
-        icon: ["w-[20px]", "h-[20px]", "mr-[10px]", "after:w-[14px]", "after:h-[14px]"],
-        label: "text-lg"
+        base: ["gap-[10px]"],
+        outerDot: ["w-[18px]", "h-[18px]", "border-lg"],
+        innerDot: ["w-[10px]", "h-[10px]"],
+        label: ["text-lg"]
+      },
+      xl: {
+        base: ["gap-[10px]"],
+        outerDot: ["w-[21px]", "h-[21px]", "border-xl"],
+        innerDot: ["w-[12px]", "h-[12px]"],
+        label: ["text-xl"]
       }
     },
     isInvalid: {
       true: {
-        icon: [
-          "after:bg-danger-main",
-          "before:border-danger-main",
-          "group-has-[:checked]/radio:before:border-danger-main"
+        outerDot: [
+          "border-danger-main",
+          "group-has-[:checked]/radio:border-danger-main",
+          "group-hover/radio:border-danger-light",
+          "group-hover/radio:bg-danger-soft"
         ],
-        label: "text-danger-main"
+        innerDot: ["bg-danger-main"],
+        label: ["text-danger-main"]
       }
     },
     isDisabled: {
       true: {
-        base: ["opacity-disabled", "pointer-events-none"],
-        icon: [
-          "before:border-neutral-light",
-          "before:bg-neutral-soft",
-          "after:bg-neutral-light",
-          "group-has-[:checked]/radio:before:border-neutral-light"
+        base: ["opacity-disabled", "cursor-not-allowed", "pointer-events-auto", "text-neutral-light"],
+        outerDot: [
+          "cursor-not-allowed",
+          "border-neutral-light",
+          "bg-neutral-soft",
+          "group-has-[:checked]/radio:bg-neutral-soft",
+          "group-has-[:checked]/radio:border-neutral-light",
+          "group-hover/radio:border-neutral-light",
+          "group-hover/radio:bg-neutral-soft"
         ],
-        label: "text-neutral-light"
-      }
-    },
-    disableAnimation: {
-      true: {},
-      false: {
-        icon: ["group-active/radio:scale-95", "transition-transform-colors", "motion-reduce:transition-none"],
-        label: ["transition-colors", "motion-reduce:transition-none"]
+        innerDot: ["bg-neutral-soft"],
+        label: ["text-neutral-light"]
       }
     }
   },
   defaultVariants: {
     color: "primary",
     size: "md",
-    isDisabled: false,
-    isInvalid: false,
-    disableAnimation: false
+    isDisabled: false
   }
 });

package/dist/components/radio/radio.mjs

@@ -1,10 +1,11 @@
 "use client";
 import {
   radio_default
-} from "../../chunk-QWFOYO3D.mjs";
+} from "../../chunk-PKVQXVCS.mjs";
+import "../../chunk-IE2BRM7Z.mjs";
+import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-E3G5QXSH.mjs";
-import "../../chunk-J725QONZ.mjs";
-import "../../chunk-IZ6II3QA.mjs";
+import "../../chunk-AC6TWLRT.mjs";
 export {
   radio_default as default
 };

package/dist/components/ripple/index.d.mts

@@ -0,0 +1,4 @@
+export { default as Ripple, RippleProps } from './ripple.mjs';
+export { default as useRipple } from './useRipple.mjs';
+import 'react';
+import 'framer-motion';

package/dist/components/ripple/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Ripple, RippleProps } from './ripple.js';
+export { default as useRipple } from './useRipple.js';
+import 'react';
+import 'framer-motion';