@deepnoid/ui 0.1.223 → 1.0.0

package/dist/{chunk-44FMPRHV.mjs → chunk-MAGZDGUW.mjs}

@@ -129,17 +129,17 @@ var textareaStyle = tv({
       "outline-none",
       "resize-none",
       "focus:ring-0",
-      "group-has-[:hover]/textarea:!text-neutral-dark",
-      "group-has-[:hover]/textarea:placeholder:!text-neutral-dark",
-      "group-has-[:focus]/textarea:!text-neutral-dark",
-      "group-has-[:focus]/textarea:placeholder:!text-neutral-dark",
+      "group-hover/textarea:!text-neutral-dark",
+      "group-hover/textarea:placeholder:!text-neutral-dark",
+      "focus:!text-neutral-dark",
+      "focus:placeholder:!text-neutral-dark",
       "group-has-[p.error]/textarea:bg-danger-soft",
       "group-has-[p.error]/textarea:!text-danger-main",
       "group-has-[p.error]/textarea:placeholder:!text-danger-main"
     ],
     helperMessage: [
       "text-neutral-main",
-      "group-has-[:hover]/textarea:text-neutral-dark",
+      "group-hover/textarea:text-neutral-dark",
       "group-has-[p.error]/textarea:text-danger-main",
       "group-has-[p.error]/textarea:hover:text-danger-main",
       "group-has-[p.error]/textarea:focus:text-danger-main"
@@ -162,8 +162,8 @@ var textareaStyle = tv({
       outline: {
         textarea: [
           "border-neutral-light",
-          "group-has-[:hover]/textarea:bg-trans-soft",
-          "group-has-[:focus]/textarea:bg-body-background",
+          "group-hover/textarea:bg-trans-soft",
+          "focus:bg-body-background",
           "group-has-[p.error]/textarea:border-danger-main"
         ],
         readonlyWrapper: ["[&>textarea]:!bg-trans-soft"]
@@ -171,50 +171,44 @@ var textareaStyle = tv({
     },
     color: {
       primary: {
-        helperMessage: [
-          "group-has-[:focus]/textarea:text-primary-main",
-          "group-has-[:focus]/textarea:hover:text-primary-main"
-        ],
+        helperMessage: ["group-focus-within/textarea:!text-primary-main"],
         readonly: ["!text-primary-main"]
       },
       secondary: {
-        helperMessage: [
-          "group-has-[:focus]/textarea:text-secondary-main",
-          "group-has-[:focus]/textarea:hover:text-secondary-main"
-        ],
+        helperMessage: ["group-focus-within/textarea:!text-secondary-main"],
         readonly: ["!text-secondary-main"]
       }
     },
     size: {
       sm: {
-        base: ["text-sm", "gap-[4px]"],
+        base: ["text-sm", "gap-sm"],
         label: ["text-sm"],
-        wrapper: ["gap-[4px]"],
-        textarea: ["w-[240px]", "rounded-sm", "p-[8px]"],
+        wrapper: ["gap-sm"],
+        textarea: ["w-[240px]", "rounded-sm", "p-md"],
         helperMessage: ["text-sm"],
         errorMessage: ["text-sm"]
       },
       md: {
-        base: ["text-md", "gap-[6px]"],
+        base: ["text-md", "gap-md"],
         label: ["text-md"],
-        wrapper: ["gap-[6px]"],
-        textarea: ["w-[240px]", "rounded-md", "p-[8px]"],
+        wrapper: ["gap-md"],
+        textarea: ["w-[240px]", "rounded-md", "p-md"],
         helperMessage: ["text-sm"],
         errorMessage: ["text-sm"]
       },
       lg: {
-        base: ["text-lg", "gap-[8px]"],
+        base: ["text-lg", "gap-lg"],
         label: ["text-lg"],
-        wrapper: ["gap-[8px]"],
-        textarea: ["w-[240px]", "rounded-lg", "p-[10px]"],
+        wrapper: ["gap-lg"],
+        textarea: ["w-[240px]", "rounded-lg", "p-lg"],
         helperMessage: ["text-md"],
         errorMessage: ["text-md"]
       },
       xl: {
-        base: ["text-xl", "gap-[10px]"],
+        base: ["text-xl", "gap-xl"],
         label: ["text-xl"],
-        wrapper: ["gap-[10px]"],
-        textarea: ["w-[240px]", "rounded-lg", "p-[10px]"],
+        wrapper: ["gap-xl"],
+        textarea: ["w-[240px]", "rounded-lg", "p-lg"],
         helperMessage: ["text-md"],
         errorMessage: ["text-md"]
       }
@@ -230,18 +224,17 @@ var textareaStyle = tv({
         textarea: ["w-full"]
       }
     },
+    readonly: {
+      true: {
+        readonlyWrapper: ["pointer-events-none"],
+        textarea: ["!text-body-foreground", "placeholder:!text-body-foreground"],
+        helperMessage: ["!text-body-foreground"]
+      }
+    },
     disabled: {
       true: {
-        textarea: [
-          "bg-neutral-soft",
-          "pointer-events-none",
-          "text-neutral-light",
-          "placeholder:!text-neutral-light",
-          "group-has-[p.error]/textarea:text-danger-light",
-          "group-has-[p.error]/textarea:border-danger-light",
-          "group-has-[p.error]/textarea:placeholder:!text-danger-light"
-        ],
-        helperMessage: ["!text-neutral-light", "group-has-[p.error]/textarea:!text-danger-light"],
+        textarea: ["!bg-neutral-soft", "pointer-events-none", "!text-neutral-light", "placeholder:!text-neutral-light"],
+        helperMessage: ["!text-neutral-light"],
         errorMessage: ["!text-danger-light"]
       }
     }
@@ -275,11 +268,47 @@ var textareaStyle = tv({
         textarea: ["border-xl"]
       }
     },
+    {
+      readonly: true,
+      color: "primary",
+      class: {
+        textarea: ["!text-primary-main", "placeholder:!text-primary-main"]
+      }
+    },
+    {
+      readonly: true,
+      color: "secondary",
+      class: {
+        textarea: ["!text-secondary-main", "placeholder:!text-secondary-main"]
+      }
+    },
+    {
+      disabled: true,
+      class: {
+        textarea: [
+          "group-has-[p.error]/textarea:!text-danger-light",
+          "group-has-[p.error]/textarea:placeholder:!text-danger-light"
+        ],
+        helperMessage: ["group-has-[p.error]/textarea:!text-danger-light"],
+        errorMessage: ["!text-danger-light"]
+      }
+    },
     {
       disabled: true,
       variant: ["outline"],
       class: {
-        textarea: ["!bg-body-background", "group-has-[p.error]/input:border-danger-light"]
+        textarea: ["!bg-body-background", "group-has-[p.error]/textarea:!border-danger-light"]
+      }
+    },
+    {
+      disabled: false,
+      class: {
+        textarea: [
+          "group-has-[p.error]/textarea:!text-danger-main",
+          "group-has-[p.error]/textarea:placeholder:!text-danger-main"
+        ],
+        helperMessage: ["group-has-[p.error]/textarea:!text-danger-main"],
+        errorMessage: ["!text-danger-main"]
       }
     }
   ],

package/dist/chunk-MV2WCFK7.mjs

@@ -0,0 +1 @@
+"use client";

package/dist/{chunk-U52FBRJ3.mjs → chunk-NJWXYTBQ.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-E3G5QXSH.mjs";
 import {
   tv
-} from "./chunk-U4DJHAM5.mjs";
+} from "./chunk-DPWUIAVC.mjs";
 
 // src/components/charts/barChart.tsx
 import { forwardRef, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";

package/dist/{chunk-3DCUMRYP.mjs → chunk-NPQBJO6G.mjs}

@@ -7,7 +7,7 @@ import {
 } from "./chunk-E3G5QXSH.mjs";
 import {
   tv
-} from "./chunk-U4DJHAM5.mjs";
+} from "./chunk-DPWUIAVC.mjs";
 
 // src/components/checkbox/checkbox.tsx
 import { forwardRef, useMemo } from "react";
@@ -61,7 +61,7 @@ var CheckBoxIcon = ({ size, isSelected, className }) => {
     "path",
     {
       d: "M2.16667 6.90123L5.63334 10.1111L10.8333 2.88889",
-      stroke: "white",
+      stroke: "currentColor",
       strokeWidth,
       strokeLinecap: "round",
       strokeLinejoin: "round",
@@ -94,7 +94,7 @@ var checkboxStyle = tv({
       "group-has-[:checked]:after:opacity-100",
       "before:transition duration-200"
     ],
-    icon: ["z-10", "opacity-0", "group-has-[:checked]:opacity-100", "text-neutral-light"],
+    icon: ["z-10", "opacity-0", "group-has-[:checked]:opacity-100", "text-common-white"],
     labelReverse: ["flex-row-reverse"],
     label: ["relative", "text-body-foreground", "select-none"]
   },
@@ -127,54 +127,26 @@ var checkboxStyle = tv({
     },
     size: {
       sm: {
-        base: ["gap-[8px]"],
-        wrapper: [
-          "w-[12px]",
-          "h-[12px]",
-          "rounded-[2px]",
-          "before:border-sm",
-          "before:rounded-[2px]",
-          "after:rounded-[2px]"
-        ],
+        base: ["gap-lg"],
+        wrapper: ["w-[12px]", "h-[12px]", "rounded-2", "before:border-sm", "before:rounded-2", "after:rounded-2"],
         label: ["text-sm"],
         icon: ["w-[10px]", "h-[10px]"]
       },
       md: {
-        base: ["gap-[8px]"],
-        wrapper: [
-          "w-[15px]",
-          "h-[15px]",
-          "rounded-[2px]",
-          "before:border-md",
-          "before:rounded-[2px]",
-          "after:rounded-[2px]"
-        ],
+        base: ["gap-lg"],
+        wrapper: ["w-[15px]", "h-[15px]", "rounded-2", "before:border-md", "before:rounded-2", "after:rounded-2"],
         label: ["text-md"],
         icon: ["w-[13px]", "h-[13px]"]
       },
       lg: {
-        base: ["gap-[10px]"],
-        wrapper: [
-          "w-[18px]",
-          "h-[18px]",
-          "rounded-[4px]",
-          "before:border-lg",
-          "before:rounded-[4px]",
-          "after:rounded-[4px]"
-        ],
+        base: ["gap-xl"],
+        wrapper: ["w-[18px]", "h-[18px]", "rounded-sm", "before:border-lg", "before:rounded-sm", "after:rounded-sm"],
         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]"
-        ],
+        base: ["gap-xl"],
+        wrapper: ["w-[21px]", "h-[21px]", "rounded-sm", "before:border-xl", "before:rounded-sm", "after:rounded-sm"],
         label: ["text-xl"],
         icon: ["w-[19px]", "h-[19px]"]
       }

package/dist/chunk-OK34FKBQ.mjs

@@ -0,0 +1,224 @@
+"use client";
+import {
+  mapPropsVariants
+} from "./chunk-E3G5QXSH.mjs";
+import {
+  tv
+} from "./chunk-DPWUIAVC.mjs";
+
+// src/components/slider/slider.tsx
+import { forwardRef, useCallback, useRef, useState, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var clampPercentage = (value) => {
+  return Math.min(100, Math.max(0, value));
+};
+var Slider = forwardRef((originalProps, ref) => {
+  const [props, variantProps] = mapPropsVariants(originalProps, sliderStyle.variantKeys);
+  const {
+    children,
+    classNames,
+    value: controlledValue,
+    defaultValue = 0,
+    minValue = 0,
+    maxValue = 100,
+    step = 1,
+    onChange,
+    disabled = false,
+    ...restProps
+  } = props;
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+  const [isDragging, setIsDragging] = useState(false);
+  const isControlled = controlledValue !== void 0;
+  const value = isControlled ? controlledValue : uncontrolledValue;
+  const innerRef = useRef(null);
+  const calculateValue = useCallback(
+    (clientX) => {
+      if (!innerRef.current) return value;
+      const { left, width } = innerRef.current.getBoundingClientRect();
+      const percent = Math.min(Math.max((clientX - left) / width, 0), 1);
+      const exactValue = percent * (maxValue - minValue) + minValue;
+      const stepRoundedValue = Math.round(exactValue / step) * step;
+      return Math.min(Math.max(stepRoundedValue, minValue), maxValue);
+    },
+    [minValue, maxValue, step, value]
+  );
+  const updateValue = useCallback(
+    (newValue) => {
+      if (!isControlled) {
+        setUncontrolledValue(newValue);
+      }
+      if (onChange && value !== newValue) {
+        onChange(newValue);
+      }
+    },
+    [isControlled, onChange, value]
+  );
+  const handlePointerDown = (e) => {
+    var _a;
+    if (disabled) return;
+    (_a = innerRef.current) == null ? void 0 : _a.focus();
+    e.currentTarget.setPointerCapture(e.pointerId);
+    setIsDragging(true);
+    const newValue = calculateValue(e.clientX);
+    updateValue(newValue);
+  };
+  const handlePointerMove = (e) => {
+    if (disabled || e.buttons === 0) return;
+    const newValue = calculateValue(e.clientX);
+    updateValue(newValue);
+  };
+  const handlePointerUp = (e) => {
+    if (disabled) return;
+    e.currentTarget.releasePointerCapture(e.pointerId);
+    setIsDragging(false);
+  };
+  const handleKeyDown = (e) => {
+    if (disabled) return;
+    let newValue = value;
+    if (e.key === "ArrowRight" || e.key === "ArrowUp") {
+      newValue = Math.min(value + step, maxValue);
+    } else if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
+      newValue = Math.max(value - step, minValue);
+    } else if (e.key === "Home") {
+      newValue = minValue;
+    } else if (e.key === "End") {
+      newValue = maxValue;
+    }
+    if (newValue !== value) {
+      e.preventDefault();
+      updateValue(newValue);
+    }
+  };
+  const setRefs = useCallback(
+    (node) => {
+      innerRef.current = node;
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    },
+    [ref]
+  );
+  const percentage = clampPercentage((value - minValue) / (maxValue - minValue) * 100);
+  const slots = useMemo(() => sliderStyle({ ...variantProps }), [variantProps]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setRefs,
+      className: slots.base({ class: classNames == null ? void 0 : classNames.base }),
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
+      onKeyDown: handleKeyDown,
+      tabIndex: disabled ? void 0 : 0,
+      role: "slider",
+      "aria-valuemin": minValue,
+      "aria-valuemax": maxValue,
+      "aria-valuenow": value,
+      ...restProps,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: slots.track({ class: classNames == null ? void 0 : classNames.track }), children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: slots.indicator({ class: classNames == null ? void 0 : classNames.indicator }),
+            style: { width: `${percentage}%`, transitionDuration: isDragging ? "0ms" : void 0 }
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: slots.thumb({ class: classNames == null ? void 0 : classNames.thumb }),
+            style: { left: `${percentage}%`, transitionDuration: isDragging ? "0ms" : void 0 }
+          }
+        )
+      ]
+    }
+  );
+});
+Slider.displayName = "Slider";
+var slider_default = Slider;
+var sliderStyle = tv({
+  slots: {
+    base: [
+      "relative",
+      "flex",
+      "flex-col",
+      "justify-center",
+      "w-full",
+      "touch-none",
+      "select-none",
+      "outline-none",
+      "cursor-pointer"
+    ],
+    track: ["z-0", "relative", "w-full", "bg-neutral-soft"],
+    indicator: ["absolute", "h-full", "top-0", "left-0", "border-none", "transition-all"],
+    thumb: [
+      "z-10",
+      "absolute",
+      "flex",
+      "items-center",
+      "justify-center",
+      "top-1/2",
+      "-translate-y-1/2",
+      "-translate-x-1/2",
+      "bg-white",
+      "shadow-small",
+      "rounded-full",
+      "transition-all",
+      "outline-none",
+      "cursor-grab",
+      "active:cursor-grabbing"
+    ]
+  },
+  variants: {
+    color: {
+      primary: {
+        indicator: ["bg-primary-light"],
+        thumb: ["bg-primary-main", "ring-[color-mix(in_srgb,var(--dn-primary-main)_20%,transparent)]"]
+      },
+      secondary: {
+        indicator: ["bg-secondary-light"],
+        thumb: ["bg-secondary-main", "ring-[color-mix(in_srgb,var(--dn-secondary-main)_20%,transparent)]"]
+      }
+    },
+    size: {
+      sm: {
+        track: ["h-[4px]", "rounded-sm"],
+        indicator: ["rounded-sm"],
+        thumb: ["w-[8px]", "h-[8px]", "hover:ring-2"]
+      },
+      md: {
+        track: ["h-[6px]", "rounded-md"],
+        indicator: ["rounded-md"],
+        thumb: ["w-[10px]", "h-[10px]", "hover:ring-3"]
+      },
+      lg: {
+        track: ["h-[8px]", "rounded-lg"],
+        indicator: ["rounded-lg"],
+        thumb: ["w-[12px]", "h-[12px]", "hover:ring-4"]
+      },
+      xl: {
+        track: ["h-[10px]", "rounded-xl"],
+        indicator: ["rounded-xl"],
+        thumb: ["w-[14px]", "h-[14px]", "hover:ring-5"]
+      }
+    },
+    disabled: {
+      true: {
+        base: ["opacity-disabled", "cursor-not-allowed", "!pointer-events-none"],
+        indicator: ["bg-neutral-light"],
+        thumb: ["bg-neutral-main", "cursor-not-allowed"]
+      }
+    }
+  },
+  defaultVariants: {
+    color: "primary",
+    size: "md",
+    disabled: false
+  }
+});
+
+export {
+  slider_default
+};

package/dist/{chunk-OC5C42CB.mjs → chunk-OPGGL4CG.mjs}

@@ -1,13 +1,13 @@
 "use client";
 import {
   progress_default
-} from "./chunk-ACZ3DQVT.mjs";
+} from "./chunk-VUO5J2OK.mjs";
 import {
   input_default
-} from "./chunk-EJ4GDC6K.mjs";
+} from "./chunk-S2T4GHJA.mjs";
 import {
   button_default
-} from "./chunk-SKX5QPUD.mjs";
+} from "./chunk-63JRWMWN.mjs";
 
 // src/components/fileUpload/fileUpload.tsx
 import { useRef, useState, useEffect } from "react";

package/dist/{chunk-R2XKPG4K.mjs → chunk-OPSMMRA2.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   modal_default
-} from "./chunk-EVJ46M3U.mjs";
+} from "./chunk-E4VJDQD5.mjs";
 
 // src/components/modal/GlobalModalProvider.tsx
 import { createContext, useState, useCallback, useMemo } from "react";

package/dist/{chunk-4X35QQTI.mjs → chunk-P4GNXDMO.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-27Y6K5NK.mjs";
 import {
   tv
-} from "./chunk-U4DJHAM5.mjs";
+} from "./chunk-DPWUIAVC.mjs";
 
 // src/components/backdrop/backdrop.tsx
 import { useEffect, useState } from "react";

package/dist/{chunk-MTT24BLX.mjs → chunk-PCWANNZ4.mjs}

@@ -1,16 +1,16 @@
 "use client";
 import {
   Icon_default
-} from "./chunk-6AID2NLT.mjs";
+} from "./chunk-A6UUVHC6.mjs";
 import {
   avatar_default
-} from "./chunk-HFOHFBZH.mjs";
+} from "./chunk-3N442F6I.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";
 import {
   tv
-} from "./chunk-U4DJHAM5.mjs";
+} from "./chunk-DPWUIAVC.mjs";
 
 // src/components/list/listItem.tsx
 import { forwardRef, useMemo } from "react";

package/dist/{chunk-V2YH54JQ.mjs → chunk-PXUYPS6M.mjs}

@@ -1,13 +1,13 @@
 "use client";
 import {
   Icon_default
-} from "./chunk-6AID2NLT.mjs";
+} from "./chunk-A6UUVHC6.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";
 import {
   tv
-} from "./chunk-U4DJHAM5.mjs";
+} from "./chunk-DPWUIAVC.mjs";
 
 // src/components/chip/chip.tsx
 import { forwardRef, useMemo } from "react";
@@ -78,6 +78,16 @@ var chipStyle = tv({
       xl: {
         base: ["text-xl"]
       }
+    },
+    fill: {
+      true: {
+        base: ["w-full"]
+      }
+    },
+    fit: {
+      true: {
+        base: ["w-fit"]
+      }
     }
   },
   compoundVariants: [