@deepnoid/ui 0.0.87 → 0.0.89

package/dist/components/table/table.test.js

@@ -13002,10 +13002,7 @@ var CheckBox = (0, import_react.forwardRef)((originalProps, ref) => {
         fill: "none",
         points: "1 9 7 14 15 4",
         stroke: "currentColor",
-        strokeDasharray: 22,
-        strokeDashoffset: isSelected ? 44 : 66,
         strokeLinecap: "round",
-        strokeLinejoin: "round",
         strokeWidth: 3,
         style: isSelected ? {
           transition: "stroke-dashoffset 250ms linear 0.2s"
@@ -13023,7 +13020,7 @@ CheckBox.displayName = "CheckBox";
 var checkbox_default = CheckBox;
 var checkbox = tv({
   slots: {
-    base: "group relative inline-flex items-center cursor-pointer",
+    base: ["group", "relative", "inline-flex", "items-center", "cursor-pointer"],
     wrapper: [
       "relative",
       "inline-flex",
@@ -13050,33 +13047,33 @@ var checkbox = tv({
       "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-white"],
+    label: ["relative", "text-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"]
       },
       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"]
       }
     },
     size: {
       sm: {
-        wrapper: ["w-[15px] h-[15px] rounded-sm", "before:rounded-[4px]", "after:rounded-[4px]"],
-        label: "text-sm ml-[8px]",
-        icon: "w-[10px] h-[10px]"
+        wrapper: ["w-[15px]", "h-[15px]", "rounded-sm", "before:rounded-[3px]", "after:rounded-[3px]"],
+        label: ["text-sm", "ml-[6px]"],
+        icon: ["w-[10px]", "h-[10px]"]
       },
       md: {
-        wrapper: ["w-[17px] h-[17px] rounded-md", "before:rounded-[5px]", "after:rounded-[5px]"],
-        label: "text-md ml-[9px]",
-        icon: "w-[12px] h-[12px]"
+        wrapper: ["w-[17px]", "h-[17px]", "rounded-md", "before:rounded-[3px]", "after:rounded-[3px]"],
+        label: ["text-md", "ml-[8px]"],
+        icon: ["w-[12px]", "h-[12px]"]
       },
       lg: {
-        wrapper: ["w-[20px] h-[20px] rounded-lg", "before:rounded-[6px]", "after:rounded-[6px]"],
-        label: "text-lg ml-[10px]",
-        icon: "w-[15px] h-[15px]"
+        wrapper: ["w-[20px]", "h-[20px]", "rounded-lg", "before:rounded-[4px]", "after:rounded-[4px]"],
+        label: ["text-lg", "ml-[10px]"],
+        icon: ["w-[15px]", "h-[15px]"]
       }
     },
     lineThrough: {
@@ -13097,14 +13094,24 @@ var checkbox = tv({
     },
     isInvalid: {
       true: {
-        wrapper: "before:border-danger-main group-has-[:checked]:before:bg-danger-main",
+        wrapper: [
+          "before:border-danger-main",
+          "group-has-[:checked]:before:bg-danger-main",
+          "group-has-[:checked]:before:border-danger-main"
+        ],
         label: "text-danger-main"
       }
     },
     isDisabled: {
       true: {
         base: "opacity-disabled pointer-events-none text-neutral-light",
-        wrapper: "after:bg-neutral-soft before:border-neutral-light before:bg-neutral-soft group-has-[:checked]:before:bg-neutral-soft",
+        wrapper: [
+          "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"
       }
@@ -13125,8 +13132,8 @@ var checkbox = tv({
           "after:!duration-200",
           "motion-reduce:transition-none"
         ],
-        icon: "transition-opacity motion-reduce:transition-none",
-        label: "transition-colors-opacity before:transition-width motion-reduce:transition-none"
+        icon: ["transition-opacity", "motion-reduce:transition-none"],
+        label: ["transition-colors-opacity", "before:transition-width", "motion-reduce:transition-none"]
       }
     }
   },
@@ -13472,6 +13479,36 @@ var template = {
       }
     );
   },
+  loading: ({ className, fill }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "svg",
+      {
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        className,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "path",
+            {
+              d: "M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12ZM6.6 12C6.6 14.9823 9.01766 17.4 12 17.4C14.9823 17.4 17.4 14.9823 17.4 12C17.4 9.01766 14.9823 6.6 12 6.6C9.01766 6.6 6.6 9.01766 6.6 12Z",
+              fill: "currentColor",
+              fillOpacity: "0.1"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "path",
+            {
+              d: "M21 12C21 13.9006 20.3983 15.7524 19.2812 17.2901C18.164 18.8277 16.5887 19.9722 14.7812 20.5595C12.9736 21.1468 11.0264 21.1468 9.21885 20.5595C7.41126 19.9722 5.836 18.8277 4.71885 17.2901C3.60169 15.7524 3 13.9006 3 12C3 10.0994 3.60169 8.24756 4.71885 6.70993C5.836 5.1723 7.41126 4.02781 9.21885 3.44049C11.0264 2.85317 12.9736 2.85317 14.7812 3.44049L13.6687 6.8643C12.5841 6.5119 11.4159 6.5119 10.3313 6.86429C9.24675 7.21669 8.3016 7.90338 7.63131 8.82596C6.96102 9.74854 6.6 10.8596 6.6 12C6.6 13.1404 6.96102 14.2515 7.63131 15.174C8.3016 16.0966 9.24675 16.7833 10.3313 17.1357C11.4159 17.4881 12.5841 17.4881 13.6687 17.1357C14.7532 16.7833 15.6984 16.0966 16.3687 15.174C17.039 14.2515 17.4 13.1404 17.4 12H21Z",
+              fill: "currentColor"
+            }
+          )
+        ]
+      }
+    );
+  },
   // ** User **
   "user-circle": ({ className, fill }) => {
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -16757,7 +16794,7 @@ var TableBody = ({
   const getTrProps = (0, import_react4.useCallback)(
     (index) => ({
       className: clsx(slots.tr({ class: classNames == null ? void 0 : classNames.tr })),
-      "data-isOdd": index % 2 !== 0,
+      "data-odd": index % 2 !== 0,
       "data-expanded": expandedRows.has(index)
     }),
     [classNames == null ? void 0 : classNames.tr, expandedRows, slots]
@@ -16824,7 +16861,7 @@ var TableBody = ({
         isExpanded && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { ...getTdProps({ field: "expandIcon" }, row, keys), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           Icon_default,
           {
-            name: expandedRows.has(rowIndex) ? "arrow-down" : "arrow-right",
+            name: expandedRows.has(rowIndex) ? "brace-down" : "brace-right",
             className: `ml-2 transition-transform`,
             size
           }
@@ -17009,7 +17046,9 @@ var table = (0, import_tailwind_variants3.tv)({
       true: {}
     },
     isSelectedRow: {
-      true: {}
+      true: {
+        tr: "cursor-pointer"
+      }
     },
     hideHeader: {
       true: {
@@ -17098,7 +17137,7 @@ var table = (0, import_tailwind_variants3.tv)({
       variant: "stripe",
       color: "primary",
       class: {
-        tr: "data-[isOdd=true]:bg-primary-soft",
+        tr: "data-[odd=true]:bg-primary-soft",
         td: "group-hover:bg-primary-light"
       }
     },
@@ -17106,7 +17145,7 @@ var table = (0, import_tailwind_variants3.tv)({
       variant: "stripe",
       color: "secondary",
       class: {
-        tr: "data-[isOdd=true]:bg-secondary-soft",
+        tr: "data-[odd=true]:bg-secondary-soft",
         td: "group-hover:bg-secondary-light"
       }
     },
@@ -17114,7 +17153,7 @@ var table = (0, import_tailwind_variants3.tv)({
       variant: "stripe",
       color: "neutral",
       class: {
-        tr: "data-[isOdd=true]:bg-trans-soft",
+        tr: "data-[odd=true]:bg-trans-soft",
         td: "group-hover:bg-neutral-light"
       }
     }

package/dist/components/table/table.test.mjs

@@ -1,18 +1,18 @@
 "use client";
 import {
   table_default
-} from "../../chunk-4SWFYTMR.mjs";
-import "../../chunk-PUFNT5LS.mjs";
-import "../../chunk-QIZOXBOY.mjs";
+} from "../../chunk-6YE26GOI.mjs";
+import "../../chunk-DWROPKZW.mjs";
+import "../../chunk-VG4644BG.mjs";
 import "../../chunk-QZ3LVYJW.mjs";
-import "../../chunk-BE2OG6M4.mjs";
+import "../../chunk-ANYPMQH4.mjs";
 import "../../chunk-27Y6K5NK.mjs";
 import {
   render
 } from "../../chunk-FNPWLOGV.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
-import "../../chunk-PRUAIZTU.mjs";
-import "../../chunk-IOV7MEPG.mjs";
+import "../../chunk-LCI6RPWE.mjs";
+import "../../chunk-IOCRFIQF.mjs";
 import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-J725QONZ.mjs";
 import "../../chunk-IZ6II3QA.mjs";

package/dist/components/tabs/tabs.d.mts

@@ -61,8 +61,8 @@ declare const tabs: tailwind_variants.TVReturnType<{
 }, undefined, {
     responsiveVariants?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | {
         size?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
-        color?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
         variant?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
+        color?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
         fullWidth?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
     } | undefined;
 } & tailwind_variants_dist_config.TWMConfig & {

package/dist/components/tabs/tabs.d.ts

@@ -61,8 +61,8 @@ declare const tabs: tailwind_variants.TVReturnType<{
 }, undefined, {
     responsiveVariants?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | {
         size?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
-        color?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
         variant?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
+        color?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
         fullWidth?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
     } | undefined;
 } & tailwind_variants_dist_config.TWMConfig & {

package/dist/components/tabs/tabs.test.mjs

@@ -1,10 +1,10 @@
 "use client";
-import {
-  userEvent
-} from "../../chunk-S4DTK5GI.mjs";
 import {
   tabs_default
 } from "../../chunk-KRI5IALM.mjs";
+import {
+  userEvent
+} from "../../chunk-S4DTK5GI.mjs";
 import {
   act,
   render

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

@@ -1,2 +1,5 @@
 export { default as Textarea, TextareaProps } from './textarea.mjs';
+import 'tailwind-variants';
+import 'tailwind-variants/dist/config';
 import 'react';
+import '../../utils/types.mjs';

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

@@ -1,2 +1,5 @@
 export { default as Textarea, TextareaProps } from './textarea.js';
+import 'tailwind-variants';
+import 'tailwind-variants/dist/config';
 import 'react';
+import '../../utils/types.js';

package/dist/components/textarea/index.js

@@ -28,24 +28,79 @@ module.exports = __toCommonJS(textarea_exports);
 // src/components/textarea/textarea.tsx
 var import_react = require("react");
 var import_tailwind_variants = require("tailwind-variants");
+
+// src/utils/props.ts
+var mapPropsVariants = (props, variantKeys, removeVariantProps = true) => {
+  if (!variantKeys) {
+    return [props, {}];
+  }
+  const picked = variantKeys.reduce((acc, key) => {
+    if (key in props) {
+      return { ...acc, [key]: props[key] };
+    } else {
+      return acc;
+    }
+  }, {});
+  if (removeVariantProps) {
+    const omitted = Object.keys(props).filter((key) => !variantKeys.includes(key)).reduce((acc, key) => ({ ...acc, [key]: props[key] }), {});
+    return [omitted, picked];
+  } else {
+    return [props, picked];
+  }
+};
+
+// src/components/textarea/textarea.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var Textarea = (0, import_react.forwardRef)((props, ref) => {
-  const { base, label, textareaWrapper, textarea, innerWrapper, errorMessageText } = textareaStyle(props);
-  const { errorMessage, isRequired, isDisabled, ...textareaProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: base(), children: [
-    props.label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { className: label(), children: props.label }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: innerWrapper(), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: textareaWrapper(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "textarea",
-        {
-          ref,
-          className: textarea(),
-          disabled: props.isDisabled,
-          required: props.isRequired,
-          ...textareaProps
-        }
-      ) }),
-      props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: errorMessageText(), children: props.errorMessage })
+var Textarea = (0, import_react.forwardRef)((originalProps, ref) => {
+  const [props, variantProps] = mapPropsVariants(originalProps, textareaStyle.variantKeys);
+  const { classNames, label, errorMessage, ...textareaProps } = props;
+  const slots = (0, import_react.useMemo)(() => textareaStyle({ ...variantProps }), [variantProps]);
+  const getBaseProps = (0, import_react.useCallback)(
+    () => ({
+      className: slots.base({ class: classNames == null ? void 0 : classNames.base })
+    }),
+    [slots, classNames]
+  );
+  const getLabelProps = (0, import_react.useCallback)(
+    () => ({
+      className: slots.label({ class: classNames == null ? void 0 : classNames.label })
+    }),
+    [slots, classNames]
+  );
+  const getInnerWrapperProps = (0, import_react.useCallback)(
+    () => ({
+      className: slots.innerWrapper({ class: classNames == null ? void 0 : classNames.innerWrapper })
+    }),
+    [slots, classNames]
+  );
+  const getTextareaWrapperProps = (0, import_react.useCallback)(
+    () => ({
+      className: slots.textareaWrapper({ class: classNames == null ? void 0 : classNames.textareaWrapper })
+    }),
+    [slots, classNames]
+  );
+  const getTextareaProps = (0, import_react.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 = (0, import_react.useCallback)(
+    () => ({
+      className: slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })
+    }),
+    [slots, classNames]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ...getBaseProps(), children: [
+    props.label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { ...getLabelProps(), children: props.label }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ...getInnerWrapperProps(), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...getTextareaWrapperProps(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("textarea", { ...getTextareaProps() }) }),
+      props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { ...getErrorMessageProps(), children: props.errorMessage })
     ] })
   ] });
 });
@@ -53,15 +108,15 @@ Textarea.displayName = "Textarea";
 var textarea_default = Textarea;
 var textareaStyle = (0, import_tailwind_variants.tv)({
   slots: {
-    base: ["group", "flex", "flex-col", "gap-[10px]"],
+    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",
-      "p-[10px]",
-      "group-has-[p]:border-danger-main",
+      "group-has-[p]/textarea:border-danger-main",
+      "group-has-[p]/textarea:bg-danger-soft",
       "transition duration-200"
     ],
     textarea: [
@@ -71,7 +126,7 @@ var textareaStyle = (0, import_tailwind_variants.tv)({
       "focus-visible:outline-none",
       "resize-none"
     ],
-    errorMessageText: ["text-s", "text-danger-main"]
+    errorMessage: ["text-danger-main"]
   },
   variants: {
     variant: {
@@ -89,21 +144,24 @@ var textareaStyle = (0, import_tailwind_variants.tv)({
     size: {
       sm: {
         base: "gap-[6px]",
-        textareaWrapper: "w-[240px] rounded-sm",
+        textareaWrapper: "w-[240px] rounded-sm p-[6px]",
         textarea: "text-sm rounded-sm",
-        label: "text-sm"
+        label: "text-sm",
+        errorMessage: "text-sm"
       },
       md: {
         base: "gap-[8px]",
-        textareaWrapper: "w-[240px] rounded-md",
+        textareaWrapper: "w-[240px] rounded-md p-[8px]",
         textarea: "text-md rounded-md",
-        label: "text-md"
+        label: "text-md",
+        errorMessage: "text-md"
       },
       lg: {
         base: "gap-[10px]",
-        textareaWrapper: "w-[240px] rounded-lg",
+        textareaWrapper: "w-[240px] rounded-lg p-[10px]",
         textarea: "text-lg rounded-lg",
-        label: "text-lg"
+        label: "text-lg",
+        errorMessage: "text-lg"
       }
     },
     radius: {
@@ -127,9 +185,10 @@ var textareaStyle = (0, import_tailwind_variants.tv)({
     isDisabled: {
       true: {
         base: ["opacity-disabled", "pointer-events-none"],
-        textareaWrapper: ["border-neutral-light", "pointer-events-none"],
-        textarea: ["bg-neutral-soft", "text-neutral-light placeholder:text-neutral-light", "border-neutral-light"],
-        label: ["text-neutral-light", "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: {

package/dist/components/textarea/index.mjs

@@ -2,7 +2,8 @@
 import "../../chunk-RRAZM5D3.mjs";
 import {
   textarea_default
-} from "../../chunk-WOX3SLJB.mjs";
+} from "../../chunk-OJ2OEI5B.mjs";
+import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-IZ6II3QA.mjs";
 export {
   textarea_default as Textarea