@deepnoid/ui 0.0.88 → 0.0.90

package/dist/{chunk-QVGXHUYW.mjs → chunk-N2JULHST.mjs}

@@ -80,12 +80,12 @@ Progress.displayName = "Progress";
 var progress_default = Progress;
 var progress = tv({
   slots: {
-    base: "flex flex-col gap-2 w-[200px]",
-    labelWrapper: "flex justify-between",
-    label: "font-[500]",
-    output: "font-[500]",
-    track: "relative bg-neutral-soft rounded-full overflow-hidden",
-    indicator: "absolute h-full rounded-full"
+    base: ["flex", "flex-col", "gap-2", "w-[200px]"],
+    labelWrapper: ["flex", "justify-between"],
+    label: ["font-[500]"],
+    output: ["font-[500]"],
+    track: ["relative", "bg-neutral-soft", "rounded-full", "overflow-hidden"],
+    indicator: ["absolute", "h-full", "rounded-full"]
   },
   variants: {
     color: {
@@ -115,7 +115,7 @@ var progress = tv({
     },
     gradient: {
       true: {
-        indicator: "bg-gradient-to-r from-primary-main to-secondary-main"
+        indicator: ["bg-gradient-to-r", "from-primary-main", "to-secondary-main"]
       }
     },
     fullWidth: {
@@ -125,8 +125,8 @@ var progress = tv({
     },
     isDisabled: {
       true: {
-        base: "opacity-disabled cursor-not-allowed",
-        indicator: "bg-neutral-light"
+        base: ["opacity-disabled", "cursor-not-allowed"],
+        indicator: ["bg-neutral-light", "from-none", "to-none"]
       }
     }
   },

package/dist/chunk-N6IEGD4K.mjs

@@ -0,0 +1,119 @@
+"use client";
+import {
+  list_default
+} from "./chunk-EYY4CRRR.mjs";
+import {
+  listItem_default
+} from "./chunk-EDEV4IK4.mjs";
+
+// src/components/dateTimePicker/timePicker.tsx
+import { useState, useRef, useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var TimePicker = ({ color = "primary", selectedTime, onChangeTime }) => {
+  const TOTAL_HOURS = 12;
+  const TOTAL_MINUTES = 60;
+  const ITEM_HEIGHT = 30;
+  const PERIODS = ["AM", "PM"];
+  const [selectedHour, setSelectedHour] = useState("01");
+  const [selectedMinute, setSelectedMinute] = useState("00");
+  const [selectedPeriod, setSelectedPeriod] = useState("AM");
+  const hourRef = useRef(null);
+  const minuteRef = useRef(null);
+  const periodRef = useRef(null);
+  const hoursArray = [...Array(TOTAL_HOURS).keys()].map((i) => (i + 1).toString().padStart(2, "0"));
+  const minutesArray = [...Array(TOTAL_MINUTES).keys()].map((i) => i.toString().padStart(2, "0"));
+  useEffect(() => {
+    if (selectedTime) {
+      const { formattedHour, minute, period } = parseAndFormatTime(selectedTime);
+      setSelectedHour(formattedHour);
+      setSelectedMinute(minute);
+      setSelectedPeriod(period);
+    }
+  }, [selectedTime]);
+  useEffect(() => {
+    scrollToSelectedTime();
+  }, []);
+  const parseAndFormatTime = (time) => {
+    const [hour, minute] = time.split(":").map((part) => part.padStart(2, "0"));
+    const parsedHour = parseInt(hour, 10);
+    const period = parsedHour >= 12 ? "PM" : "AM";
+    const formattedHour = parsedHour % 12 === 0 ? "12" : (parsedHour % 12).toString().padStart(2, "0");
+    return { formattedHour, minute, period };
+  };
+  const scrollToSelectedTime = () => {
+    if (selectedTime) {
+      const { formattedHour, minute, period } = parseAndFormatTime(selectedTime);
+      if (hourRef.current) {
+        hourRef.current.scrollTop = (parseInt(formattedHour) - 1) * ITEM_HEIGHT;
+      }
+      if (minuteRef.current) {
+        minuteRef.current.scrollTop = parseInt(minute) * ITEM_HEIGHT;
+      }
+      if (periodRef.current) {
+        periodRef.current.scrollTop = period === "AM" ? 0 : ITEM_HEIGHT;
+      }
+    }
+  };
+  const handleTimeChange = (hour, minute, period) => {
+    const parsedHour = parseInt(hour);
+    let hour24 = parsedHour;
+    if (period === "PM" && parsedHour !== 12) {
+      hour24 = parsedHour + 12;
+    } else if (period === "AM" && parsedHour === 12) {
+      hour24 = 0;
+    }
+    const formattedTime = `${hour24.toString().padStart(2, "0")}:${minute}`;
+    if (onChangeTime) {
+      onChangeTime(formattedTime);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-[200px] p-[10px] gap-[5px] border border-neutral-main rounded-md bg-background shadow-lg", children: [
+    /* @__PURE__ */ jsx(list_default, { ref: periodRef, classNames: { base: "overflow-y-auto scrollbar-hide" }, children: PERIODS.map((period, index) => /* @__PURE__ */ jsx(
+      listItem_default,
+      {
+        color,
+        selected: period === selectedPeriod,
+        title: period,
+        size: "sm",
+        classNames: { base: "w-[50px] min-h-[30px]", titleWrapper: "flex justify-center" },
+        onClick: () => {
+          handleTimeChange(selectedHour, selectedMinute, period);
+        }
+      },
+      `${period}-${index}`
+    )) }),
+    /* @__PURE__ */ jsx(list_default, { ref: hourRef, classNames: { base: "overflow-y-auto scrollbar-hide" }, children: hoursArray.map((hour, index) => /* @__PURE__ */ jsx(
+      listItem_default,
+      {
+        color,
+        selected: hour === selectedHour,
+        title: hour,
+        size: "sm",
+        classNames: { base: "w-[50px] min-h-[30px]", titleWrapper: "flex justify-center" },
+        onClick: () => {
+          handleTimeChange(hour, selectedMinute, selectedPeriod);
+        }
+      },
+      `${hour}-${index}`
+    )) }),
+    /* @__PURE__ */ jsx(list_default, { ref: minuteRef, classNames: { base: "overflow-y-auto scrollbar-hide" }, children: minutesArray.map((minute, index) => /* @__PURE__ */ jsx(
+      listItem_default,
+      {
+        color,
+        selected: minute === selectedMinute,
+        title: minute,
+        size: "sm",
+        classNames: { base: "w-[50px] min-h-[30px]", titleWrapper: "flex justify-center" },
+        onClick: () => {
+          handleTimeChange(selectedHour, minute, selectedPeriod);
+        }
+      },
+      `${minute}-${index}`
+    )) })
+  ] });
+};
+var timePicker_default = TimePicker;
+
+export {
+  timePicker_default
+};

package/dist/chunk-OJ2OEI5B.mjs

@@ -0,0 +1,202 @@
+"use client";
+import {
+  mapPropsVariants
+} from "./chunk-E3G5QXSH.mjs";
+
+// src/components/textarea/textarea.tsx
+import { forwardRef, useCallback, useMemo } from "react";
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Textarea = forwardRef((originalProps, ref) => {
+  const [props, variantProps] = mapPropsVariants(originalProps, textareaStyle.variantKeys);
+  const { classNames, label, errorMessage, ...textareaProps } = props;
+  const slots = useMemo(() => textareaStyle({ ...variantProps }), [variantProps]);
+  const getBaseProps = useCallback(
+    () => ({
+      className: slots.base({ class: classNames == null ? void 0 : classNames.base })
+    }),
+    [slots, classNames]
+  );
+  const getLabelProps = useCallback(
+    () => ({
+      className: slots.label({ class: classNames == null ? void 0 : classNames.label })
+    }),
+    [slots, classNames]
+  );
+  const getInnerWrapperProps = useCallback(
+    () => ({
+      className: slots.innerWrapper({ class: classNames == null ? void 0 : classNames.innerWrapper })
+    }),
+    [slots, classNames]
+  );
+  const getTextareaWrapperProps = useCallback(
+    () => ({
+      className: slots.textareaWrapper({ class: classNames == null ? void 0 : classNames.textareaWrapper })
+    }),
+    [slots, classNames]
+  );
+  const getTextareaProps = useCallback(
+    () => ({
+      ...textareaProps,
+      ref,
+      className: slots.textarea({ class: classNames == null ? void 0 : classNames.textarea }),
+      disabled: originalProps.isDisabled,
+      required: originalProps.isRequired,
+      size: 0
+    }),
+    [textareaProps, ref, slots, classNames == null ? void 0 : classNames.textarea, originalProps.isDisabled, originalProps.isRequired]
+  );
+  const getErrorMessageProps = useCallback(
+    () => ({
+      className: slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })
+    }),
+    [slots, classNames]
+  );
+  return /* @__PURE__ */ jsxs("div", { ...getBaseProps(), children: [
+    props.label && /* @__PURE__ */ jsx("label", { ...getLabelProps(), children: props.label }),
+    /* @__PURE__ */ jsxs("div", { ...getInnerWrapperProps(), children: [
+      /* @__PURE__ */ jsx("div", { ...getTextareaWrapperProps(), children: /* @__PURE__ */ jsx("textarea", { ...getTextareaProps() }) }),
+      props.errorMessage && /* @__PURE__ */ jsx("p", { ...getErrorMessageProps(), children: props.errorMessage })
+    ] })
+  ] });
+});
+Textarea.displayName = "Textarea";
+var textarea_default = Textarea;
+var textareaStyle = tv({
+  slots: {
+    base: ["group/textarea", "flex", "flex-col", "gap-[10px]", "select-none"],
+    label: ["flex", "items-center"],
+    innerWrapper: ["flex", "flex-col", "gap-[6px]"],
+    textareaWrapper: [
+      "flex",
+      "bg-transparent",
+      "border-neutral-main",
+      "group-has-[p]/textarea:border-danger-main",
+      "group-has-[p]/textarea:bg-danger-soft",
+      "transition duration-200"
+    ],
+    textarea: [
+      "w-full",
+      "bg-transparent",
+      "placeholder:text-neutral-main",
+      "focus-visible:outline-none",
+      "resize-none"
+    ],
+    errorMessage: ["text-danger-main"]
+  },
+  variants: {
+    variant: {
+      solid: {
+        textareaWrapper: ["bg-trans-soft", "hover:bg-trans-light", "has-[:focus]:bg-trans-light"]
+      },
+      line: {
+        textareaWrapper: ["border", "hover:bg-trans-soft", "has-[:focus]:bg-trans-soft"]
+      }
+    },
+    color: {
+      primary: {},
+      secondary: {}
+    },
+    size: {
+      sm: {
+        base: "gap-[6px]",
+        textareaWrapper: "w-[240px] rounded-sm p-[6px]",
+        textarea: "text-sm rounded-sm",
+        label: "text-sm",
+        errorMessage: "text-sm"
+      },
+      md: {
+        base: "gap-[8px]",
+        textareaWrapper: "w-[240px] rounded-md p-[8px]",
+        textarea: "text-md rounded-md",
+        label: "text-md",
+        errorMessage: "text-md"
+      },
+      lg: {
+        base: "gap-[10px]",
+        textareaWrapper: "w-[240px] rounded-lg p-[10px]",
+        textarea: "text-lg rounded-lg",
+        label: "text-lg",
+        errorMessage: "text-lg"
+      }
+    },
+    radius: {
+      default: {},
+      none: {
+        textareaWrapper: "rounded-none",
+        textarea: "rounded-none"
+      },
+      full: {
+        textareaWrapper: "rounded-full",
+        textarea: "rounded-full"
+      }
+    },
+    fullWidth: {
+      true: {
+        base: "w-full",
+        textareaWrapper: "w-full",
+        textarea: "w-full"
+      }
+    },
+    isDisabled: {
+      true: {
+        base: ["opacity-disabled", "pointer-events-none"],
+        textareaWrapper: ["bg-neutral-soft", "border-neutral-light", "pointer-events-none"],
+        textarea: ["text-neutral-light placeholder:text-neutral-light", "border-neutral-light"],
+        label: ["text-neutral-light", "pointer-events-none"],
+        errorMessage: "text-danger-light"
+      }
+    },
+    isRequired: {
+      true: {
+        label: ["after:content-['*']", "after:text-danger-main", "after:ml-0.5"]
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "solid",
+    color: "primary",
+    size: "md",
+    fullWidth: false,
+    isDisabled: false,
+    isRequired: false
+  },
+  compoundVariants: [
+    // variants & color
+    {
+      variant: "line",
+      color: "primary",
+      class: {
+        textareaWrapper: "has-[:focus]:border-primary-main"
+      }
+    },
+    {
+      variant: "line",
+      color: "secondary",
+      class: {
+        textareaWrapper: "has-[:focus]:border-secondary-main",
+        textarea: "focus:bg-secondary-main"
+      }
+    },
+    // Variants & isDisabled
+    {
+      variant: "line",
+      isDisabled: true,
+      class: {
+        textareaWrapper: "bg-neutral-soft"
+      }
+    },
+    // isRequired & isDisabled
+    {
+      isRequired: true,
+      isDisabled: true,
+      class: {
+        label: "after:text-danger-light"
+      }
+    }
+  ]
+});
+
+export {
+  textarea_default
+};

package/dist/chunk-P732YGHO.mjs

@@ -0,0 +1,18 @@
+"use client";
+
+// src/components/dateTimePicker/util.ts
+var formatDateToString = (date) => {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+};
+var formatStringToDate = (date) => {
+  const formattedDate = new Date(date);
+  return formattedDate;
+};
+
+export {
+  formatDateToString,
+  formatStringToDate
+};

package/dist/{chunk-QRHT7MSO.mjs → chunk-PXUBPWKU.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   Icon_default
-} from "./chunk-PRUAIZTU.mjs";
+} from "./chunk-LCI6RPWE.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";

package/dist/{chunk-PCIONGEJ.mjs → chunk-QWFOYO3D.mjs}

@@ -52,7 +52,16 @@ Radio.displayName = "Radio";
 var radio_default = Radio;
 var radio = tv({
   slots: {
-    base: "group relative max-w-fit inline-flex items-center justify-start cursor-pointer tap-highlight-transparent",
+    base: [
+      "group/radio",
+      "relative",
+      "max-w-fit",
+      "inline-flex",
+      "items-center",
+      "justify-start",
+      "cursor-pointer",
+      "tap-highlight-transparent"
+    ],
     icon: [
       "relative",
       "inline-flex",
@@ -81,18 +90,18 @@ var radio = tv({
       "after:left-1/2",
       "after:-translate-x-1/2",
       "after:-translate-y-1/2",
-      "group-has-[:checked]:after:opacity-100",
-      "group-has-[:checked]:after:scale-100",
+      "group-has-[:checked]/radio:after:opacity-100",
+      "group-has-[:checked]/radio:after:scale-100",
       // hover
-      "group-hover:before:bg-neutral-soft",
+      "group-hover/radio:before:bg-neutral-soft",
       "before:transition duration-200",
       // focus ring
       "outline-none",
-      "group-focus:z-10",
-      "group-focus:ring-2",
-      "group-focus:ring-focus",
-      "group-focus:ring-offset-2",
-      "group-focus:ring-offset-background"
+      "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"
     ],
     labelWrapper: "flex flex-col",
     label: "text-foreground select-none"
@@ -100,44 +109,53 @@ var radio = tv({
   variants: {
     color: {
       primary: {
-        icon: "group-has-[:checked]:before:border-primary-main after:bg-primary-main"
+        icon: ["group-has-[:checked]/radio:before:border-primary-main", "after:bg-primary-main"]
       },
       secondary: {
-        icon: "group-has-[:checked]:before:border-secondary-main after:bg-secondary-main"
+        icon: ["group-has-[:checked]/radio:before:border-secondary-main", "after:bg-secondary-main"]
       }
     },
     size: {
       sm: {
-        icon: ["w-[15px] h-[15px] mr-[8px] after:w-[10px] after:h-[10px]"],
+        icon: ["w-[15px]", "h-[15px]", "mr-[6px]", "after:w-[9px]", "after:h-[9px]"],
         label: "text-sm"
       },
       md: {
-        icon: ["w-[17px] h-[17px] mr-[9px] after:w-[11px] after:h-[11px]"],
+        icon: ["w-[17px]", "h-[17px]", "mr-[8px]", "after:w-[11px]", "after:h-[11px]"],
         label: "text-md"
       },
       lg: {
-        icon: ["w-[20px] h-[20px] mr-[10px] after:w-[12px] after:h-[12px]"],
+        icon: ["w-[20px]", "h-[20px]", "mr-[10px]", "after:w-[14px]", "after:h-[14px]"],
         label: "text-lg"
       }
     },
     isInvalid: {
       true: {
-        icon: "after:bg-danger-main before:border-danger-main",
+        icon: [
+          "after:bg-danger-main",
+          "before:border-danger-main",
+          "group-has-[:checked]/radio:before:border-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",
+        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"
+        ],
         label: "text-neutral-light"
       }
     },
     disableAnimation: {
       true: {},
       false: {
-        icon: ["group-active:scale-95", "transition-transform-colors", "motion-reduce:transition-none"],
-        label: "transition-colors motion-reduce:transition-none"
+        icon: ["group-active/radio:scale-95", "transition-transform-colors", "motion-reduce:transition-none"],
+        label: ["transition-colors", "motion-reduce:transition-none"]
       }
     }
   },

package/dist/{chunk-LY6LJRUX.mjs → chunk-RZZWHI6O.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   Icon_default
-} from "./chunk-PRUAIZTU.mjs";
+} from "./chunk-LCI6RPWE.mjs";
 import {
   tv
 } from "./chunk-J725QONZ.mjs";