@deepnoid/ui 0.0.112 → 0.1.1

package/dist/chunk-56VCX2QR.mjs

@@ -0,0 +1,170 @@
+"use client";
+import {
+  tv
+} from "./chunk-2ZT6V4QR.mjs";
+import {
+  clsx
+} from "./chunk-27Y6K5NK.mjs";
+import {
+  mapPropsVariants
+} from "./chunk-E3G5QXSH.mjs";
+
+// src/components/radio/radio.tsx
+import { forwardRef, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Radio = forwardRef((originalProps, ref) => {
+  const [props, variantProps] = mapPropsVariants(originalProps, radioStyle.variantKeys);
+  const { children, classNames, labelPosition = "end", ...inputProps } = props;
+  const slots = useMemo(() => radioStyle({ ...variantProps }), [variantProps]);
+  return /* @__PURE__ */ 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__ */ jsx("div", { className: "hidden", children: /* @__PURE__ */ jsx("input", { ...inputProps, type: "radio", ref }) }),
+        /* @__PURE__ */ jsx("span", { className: slots.outerDot({ class: classNames == null ? void 0 : classNames.outerDot }), children: /* @__PURE__ */ jsx("span", { className: slots.innerDot({ class: classNames == null ? void 0 : classNames.innerDot }) }) }),
+        /* @__PURE__ */ jsx("div", { className: slots.labelWrapper({ class: classNames == null ? void 0 : classNames.labelWrapper }), children: children && /* @__PURE__ */ jsx("span", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children }) })
+      ]
+    }
+  );
+});
+Radio.displayName = "Radio";
+var radio_default = Radio;
+var radioStyle = tv({
+  slots: {
+    base: [
+      "group/radio",
+      "relative",
+      "max-w-fit",
+      "inline-flex",
+      "items-center",
+      "justify-start",
+      "cursor-pointer",
+      "tap-highlight-transparent"
+    ],
+    outerDot: [
+      "inline-flex",
+      "items-center",
+      "justify-center",
+      "relative",
+      "flex-shrink-0",
+      "w-[15px]",
+      "h-[15px]",
+      "rounded-full",
+      "border",
+      "border-default",
+      "before:content-['']",
+      "before:absolute",
+      "before:inset-0",
+      "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"],
+    labelReverse: ["flex-row-reverse"],
+    label: ["text-foreground", "select-none"]
+  },
+  variants: {
+    color: {
+      primary: {
+        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: {
+        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: {
+        base: ["gap-[8px]"],
+        outerDot: ["w-[12px]", "h-[12px]", "border-sm"],
+        innerDot: ["w-[6px]", "h-[6px]"],
+        label: ["text-sm"]
+      },
+      md: {
+        base: ["gap-[8px]"],
+        outerDot: ["w-[15px]", "h-[15px]", "border-md"],
+        innerDot: ["w-[8px]", "h-[8px]"],
+        label: ["text-md"]
+      },
+      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: {
+        outerDot: [
+          "border-danger-main",
+          "group-has-[:checked]/radio:border-danger-main",
+          "group-hover/radio:border-danger-light",
+          "group-hover/radio:bg-danger-soft"
+        ],
+        innerDot: ["bg-danger-main"],
+        label: ["text-danger-main"]
+      }
+    },
+    isDisabled: {
+      true: {
+        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"
+        ],
+        innerDot: ["bg-neutral-soft"],
+        label: ["text-neutral-light"]
+      }
+    }
+  },
+  defaultVariants: {
+    color: "primary",
+    size: "md",
+    isDisabled: false
+  }
+});
+
+export {
+  radio_default
+};

package/dist/chunk-6PNKRBUT.mjs

@@ -0,0 +1,34 @@
+"use client";
+
+// src/components/ripple/useRipple.ts
+import { useState, useCallback } from "react";
+function useRipple(props = {}) {
+  const [ripples, setRipples] = useState([]);
+  const getUniqueID = (key) => `${key}-${Math.random().toString(36).substr(2, 9)}`;
+  const onPress = useCallback((event) => {
+    const trigger = event.target;
+    const rect = trigger.getBoundingClientRect();
+    const size = Math.max(trigger.clientWidth, trigger.clientHeight);
+    setRipples((prevRipples) => [
+      ...prevRipples,
+      {
+        key: getUniqueID(prevRipples.length.toString()),
+        size,
+        x: event.clientX - rect.left - size / 2,
+        y: event.clientY - rect.top - size / 2
+      }
+    ]);
+  }, []);
+  const onClear = useCallback((key) => {
+    setRipples((prevState) => prevState.filter((ripple) => ripple.key !== key));
+  }, []);
+  return { ripples, onClear, onPress, ...props };
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+
+export {
+  useRipple,
+  clamp
+};

package/dist/{chunk-IZ6II3QA.mjs → chunk-AC6TWLRT.mjs}

@@ -5,19 +5,9 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
-  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
-}) : x)(function(x) {
-  if (typeof require !== "undefined") return require.apply(this, arguments);
-  throw Error('Dynamic require of "' + x + '" is not supported');
-});
-var __commonJS = (cb, mod) => function __require2() {
+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 });
-};
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
     for (let key of __getOwnPropNames(from))
@@ -36,8 +26,6 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 
 export {
-  __require,
   __commonJS,
-  __export,
   __toESM
 };

package/dist/{chunk-PRLGHYFO.mjs → chunk-AMA53H3C.mjs}

@@ -1,16 +1,16 @@
 "use client";
 import {
   button_default
-} from "./chunk-UR64ZUAU.mjs";
+} from "./chunk-S65S7QZ5.mjs";
 import {
   Icon_default
-} from "./chunk-LCI6RPWE.mjs";
+} from "./chunk-24NQEB73.mjs";
+import {
+  tv
+} from "./chunk-2ZT6V4QR.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";
-import {
-  tv
-} from "./chunk-J725QONZ.mjs";
 
 // src/components/modal/modal.tsx
 import { forwardRef, useCallback, useMemo, useEffect } from "react";
@@ -126,7 +126,7 @@ var Modal = forwardRef((originalProps, ref) => {
   }, [isOpen, isKeyboardDismissDisabled, onCancel]);
   return /* @__PURE__ */ jsx(Fragment, { children: isOpen && createPortal(
     /* @__PURE__ */ jsx("div", { ...getBackdropProps(), children: /* @__PURE__ */ jsxs("div", { ref, ...getModalWrapperProps(), children: [
-      typeof icon === "string" ? /* @__PURE__ */ jsx("div", { ...getIconProps(), children: /* @__PURE__ */ jsx(Icon_default, { name: icon, className: "w-[80px] h-[80px]" }) }) : /* @__PURE__ */ jsx("div", { ...getIconProps(), children: icon }),
+      typeof icon === "string" ? /* @__PURE__ */ jsx("div", { ...getIconProps(), children: /* @__PURE__ */ jsx(Icon_default, { name: icon, className: "h-[80px] w-[80px]" }) }) : /* @__PURE__ */ jsx("div", { ...getIconProps(), children: icon }),
       /* @__PURE__ */ jsxs("div", { ...getBodyWrapperProps(), children: [
         showCloseButton && /* @__PURE__ */ jsx(Icon_default, { name: "close", ...getCloseIconProps(), onClick: onCancel }),
         /* @__PURE__ */ jsxs("div", { ...getBodyProps(), children: [
@@ -136,7 +136,7 @@ var Modal = forwardRef((originalProps, ref) => {
           ] }),
           content && typeof content === "string" ? /* @__PURE__ */ jsx("div", { ...getContentProps(), children: content }) : content,
           (cancelButtonText || confirmButtonText) && /* @__PURE__ */ jsxs("div", { ...getFooterWrapperProps(), children: [
-            cancelButtonText && /* @__PURE__ */ jsx(button_default, { variant: "line", size: "md", color: originalProps.color, fullWidth: true, onClick: onCancel, children: cancelButtonText }),
+            cancelButtonText && /* @__PURE__ */ jsx(button_default, { variant: "outline", color: originalProps.color, fullWidth: true, onClick: onCancel, children: cancelButtonText }),
             confirmButtonText && /* @__PURE__ */ jsx(button_default, { size: "md", color: originalProps.color, fullWidth: true, onClick: onConfirm, children: confirmButtonText })
           ] })
         ] })

package/dist/chunk-AYWI2CRE.mjs

@@ -0,0 +1,211 @@
+"use client";
+import {
+  avatar_default
+} from "./chunk-CF6O6TCF.mjs";
+import {
+  Icon_default
+} from "./chunk-24NQEB73.mjs";
+import {
+  tv
+} from "./chunk-2ZT6V4QR.mjs";
+import {
+  mapPropsVariants
+} from "./chunk-E3G5QXSH.mjs";
+
+// src/components/list/listItem.tsx
+import { forwardRef, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ListItem = forwardRef((props, ref) => {
+  const [rawProps, variantProps] = mapPropsVariants(props, listItemStyle.variantKeys);
+  const {
+    title,
+    subTitle,
+    size = "md",
+    avatar,
+    startIconName,
+    selected,
+    classNames,
+    onClick
+  } = { ...rawProps, ...variantProps };
+  const slots = useMemo(() => listItemStyle(variantProps), [variantProps]);
+  const iconSize = ["lg", "xl"].includes(size) ? "lg" : "md";
+  const avatarSize = iconSize;
+  return /* @__PURE__ */ jsxs("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), "data-selected": selected, onClick, children: [
+    /* @__PURE__ */ jsxs("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
+      avatar && /* @__PURE__ */ jsx(avatar_default, { ...avatar, variant: "round", size: avatarSize }),
+      startIconName && /* @__PURE__ */ jsx(Icon_default, { name: startIconName, fill: true, size, className: slots.startIcon({ class: classNames == null ? void 0 : classNames.startIcon }) }),
+      /* @__PURE__ */ jsxs("div", { className: slots.titleWrapper({ class: classNames == null ? void 0 : classNames.titleWrapper }), children: [
+        /* @__PURE__ */ jsx("span", { className: slots.title({ class: classNames == null ? void 0 : classNames.title }), children: title }),
+        subTitle && /* @__PURE__ */ jsx("span", { className: slots.subTitle({ class: classNames == null ? void 0 : classNames.subTitle }), children: subTitle })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Icon_default, { name: "right-chevron", size: iconSize, className: slots.icon({ class: classNames == null ? void 0 : classNames.icon }) })
+  ] });
+});
+ListItem.displayName = "ListItem";
+var listItem_default = ListItem;
+var listItemStyle = tv({
+  slots: {
+    base: [
+      "group",
+      "w-full",
+      "flex",
+      "justify-between",
+      "items-center",
+      "gap-[10px]",
+      "bg-transparent",
+      "p-[10px]",
+      "cursor-pointer",
+      "select-none"
+    ],
+    wrapper: ["flex", "w-full", "items-center", "gap-[10px]", "flex-1", "min-w-0"],
+    startIcon: ["fill-neutral-dark"],
+    titleWrapper: ["flex", "flex-col", "overflow-hidden", "whitespace-nowrap", "text-overflow-ellipsis"],
+    title: ["text-neutral-dark", "font-bold", "truncate"],
+    subTitle: ["text-neutral-main", "truncate"],
+    icon: ["stroke-neutral-dark"]
+  },
+  variants: {
+    variant: {
+      solid: {},
+      outline: {}
+    },
+    size: {
+      sm: {
+        base: ["min-h-[40px]", "rounded-sm", "!border-sm"],
+        title: ["text-sm"],
+        subTitle: ["text-sm"]
+      },
+      md: {
+        base: ["min-h-[45px]", "rounded-md", "!border-md"],
+        title: ["text-md"],
+        subTitle: ["text-sm"]
+      },
+      lg: {
+        base: ["min-h-[50px]", "rounded-lg", "!border-lg"],
+        title: ["text-lg"],
+        subTitle: ["text-md"]
+      },
+      xl: {
+        base: ["min-h-[55px]", "rounded-xl", "!border-xl"],
+        title: ["text-xl"],
+        subTitle: ["text-md"]
+      }
+    },
+    color: {
+      primary: {},
+      secondary: {},
+      neutral: {}
+    },
+    isDisabled: {
+      true: {
+        base: [
+          "!bg-transparent",
+          "!cursor-not-allowed",
+          "!opacity-disabled",
+          "!pointer-events-none",
+          "!data-[selected=true]:bg-transparent"
+        ],
+        startIcon: ["!fill-neutral-light"],
+        title: ["!text-neutral-light"],
+        subTitle: ["!text-neutral-light"],
+        icon: ["!stroke-neutral-light"]
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      variant: ["solid", "outline"],
+      class: {
+        base: ["border", "border-transparent"]
+      }
+    },
+    {
+      variant: "solid",
+      color: "primary",
+      class: {
+        base: ["data-[selected=true]:bg-primary-soft"],
+        startIcon: ["group-data-[selected=true]:fill-neutral-strong", "group-hover:fill-primary-main"],
+        title: ["group-data-[selected=true]:text-neutral-strong", "group-hover:text-primary-main"],
+        subTitle: ["group-data-[selected=true]:text-neutral-strong"],
+        icon: ["group-data-[selected=true]:stroke-neutral-strong", "group-hover:stroke-primary-main"]
+      }
+    },
+    {
+      variant: "solid",
+      color: "secondary",
+      class: {
+        base: ["data-[selected=true]:bg-secondary-soft"],
+        startIcon: ["group-data-[selected=true]:fill-neutral-strong", "group-hover:fill-secondary-main"],
+        title: ["group-data-[selected=true]:text-neutral-strong", "group-hover:text-secondary-main"],
+        subTitle: ["group-data-[selected=true]:text-neutral-strong"],
+        icon: ["group-data-[selected=true]:stroke-neutral-strong", "group-hover:stroke-secondary-main"]
+      }
+    },
+    {
+      variant: "solid",
+      color: "neutral",
+      class: {
+        base: ["data-[selected=true]:bg-neutral-soft"],
+        startIcon: ["group-data-[selected=true]:fill-neutral-strong", "group-hover:fill-neutral-strong"],
+        title: ["group-data-[selected=true]:text-neutral-strong", "group-hover:text-neutral-strong"],
+        subTitle: ["group-data-[selected=true]:text-neutral-strong"],
+        icon: ["group-data-[selected=true]:stroke-neutral-strong", "group-hover:stroke-neutral-strong"]
+      }
+    },
+    {
+      variant: "outline",
+      color: "primary",
+      class: {
+        base: [
+          "data-[selected=true]:border-primary-main",
+          "data-[selected=true]:bg-primary-soft",
+          "hover:border-primary-light"
+        ],
+        startIcon: ["group-data-[selected=true]:fill-neutral-strong"],
+        title: ["group-data-[selected=true]:text-neutral-strong"],
+        subTitle: ["group-data-[selected=true]:text-neutral-strong"],
+        icon: ["group-data-[selected=true]:stroke-neutral-strong"]
+      }
+    },
+    {
+      variant: "outline",
+      color: "secondary",
+      class: {
+        base: [
+          "group-data-[selected=true]:border-secondary-main",
+          "group-data-[selected=true]:bg-secondary-soft",
+          "group-hover:border-secondary-light"
+        ],
+        startIcon: ["group-data-[selected=true]:fill-neutral-strong"],
+        title: ["group-data-[selected=true]:text-neutral-strong"],
+        subTitle: ["group-data-[selected=true]:text-neutral-strong"],
+        icon: ["group-data-[selected=true]:stroke-neutral-strong"]
+      }
+    },
+    {
+      variant: "outline",
+      color: "neutral",
+      class: {
+        base: [
+          "group-data-[selected=true]:border-neutral-main",
+          "group-data-[selected=true]:bg-neutral-soft",
+          "group-hover:border-neutral-light"
+        ],
+        startIcon: ["group-data-[selected=true]:fill-neutral-strong"],
+        title: ["group-data-[selected=true]:text-neutral-strong"],
+        subTitle: ["group-data-[selected=true]:text-neutral-strong"],
+        icon: ["group-data-[selected=true]:stroke-neutral-strong"]
+      }
+    }
+  ],
+  defaultVariants: {
+    variant: "solid",
+    color: "primary",
+    size: "md"
+  }
+});
+
+export {
+  listItem_default
+};

package/dist/{chunk-OJ2OEI5B.mjs → chunk-BKE6QF6W.mjs}

@@ -118,6 +118,13 @@ var textareaStyle = tv({
         textarea: "text-lg rounded-lg",
         label: "text-lg",
         errorMessage: "text-lg"
+      },
+      xl: {
+        base: "gap-[10px]",
+        textareaWrapper: "w-[240px] rounded-xl p-[10px]",
+        textarea: "text-xl rounded-xl",
+        label: "text-xl",
+        errorMessage: "text-xl"
       }
     },
     radius: {

package/dist/chunk-CF6O6TCF.mjs

@@ -0,0 +1,63 @@
+"use client";
+import {
+  template
+} from "./chunk-P2TMIZRH.mjs";
+import {
+  tv
+} from "./chunk-2ZT6V4QR.mjs";
+
+// src/components/avatar/avatar.tsx
+import { forwardRef, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+var Avatar = forwardRef(
+  ({ variant = "square", size = "md", classNames, ...rest }, ref) => {
+    const SVGIcon = template["avatar"];
+    const slots = useMemo(() => avatarStyle({ variant, size }), [variant, size]);
+    return /* @__PURE__ */ jsx("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: /* @__PURE__ */ jsx(SVGIcon, { className: slots.content({ class: classNames == null ? void 0 : classNames.content }), ...rest }) });
+  }
+);
+Avatar.displayName = "Avatar";
+var avatar_default = Avatar;
+var avatarStyle = tv({
+  slots: {
+    base: ["w-fit", "h-fit", "flex", "items-center", "justify-center", "bg-neutral-soft", "overflow-hidden"],
+    content: []
+  },
+  variants: {
+    variant: {
+      square: {},
+      round: {}
+    },
+    size: {
+      sm: {
+        base: ["size-[20px]", "min-w-[20px]", "min-h-[20px]", "rounded-sm"]
+      },
+      md: {
+        base: ["size-[30px]", "min-w-[30px]", "min-h-[30px]", "rounded-md"]
+      },
+      lg: {
+        base: ["size-[40px]", "min-w-[40px]", "min-h-[40px]", "rounded-lg"]
+      },
+      xl: {
+        base: ["size-[50px]", "min-w-[50px]", "min-h-[50px]", "rounded-xl"]
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      variant: "round",
+      size: ["sm", "md", "lg", "xl"],
+      className: {
+        base: ["rounded-full"]
+      }
+    }
+  ],
+  defaultVariants: {
+    variant: "square",
+    size: "md"
+  }
+});
+
+export {
+  avatar_default
+};