@deepnoid/ui 0.0.88 → 0.0.89

package/dist/chunk-UR64ZUAU.mjs

@@ -0,0 +1,671 @@
+"use client";
+import {
+  Icon_default
+} from "./chunk-LCI6RPWE.mjs";
+import {
+  mapPropsVariants
+} from "./chunk-E3G5QXSH.mjs";
+import {
+  tv
+} from "./chunk-J725QONZ.mjs";
+
+// src/components/button/button.tsx
+import React, { forwardRef, useMemo, useCallback } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var Button = forwardRef((originalProps, ref) => {
+  const [props, variantProps] = mapPropsVariants(originalProps, buttonStyle.variantKeys);
+  const { classNames, startContent, endContent, children, ...buttonProps } = props;
+  const slots = useMemo(() => buttonStyle({ ...variantProps }), [variantProps]);
+  const getBaseProps = useCallback(
+    () => ({
+      ...buttonProps,
+      ref,
+      disabled: originalProps.isDisabled || originalProps.isLoading,
+      "data-loading": originalProps.isLoading,
+      className: slots.base({ class: classNames == null ? void 0 : classNames.base })
+    }),
+    [buttonProps, ref, originalProps.isDisabled, originalProps.isLoading, slots, classNames == null ? void 0 : classNames.base]
+  );
+  const getContentProps = useCallback(
+    () => ({
+      className: slots.content({ class: classNames == null ? void 0 : classNames.content }),
+      size: originalProps.size
+    }),
+    [slots, classNames, originalProps.size]
+  );
+  const renderContent = (content) => {
+    if (React.isValidElement(content)) {
+      const existingProps = content.props;
+      const mergedProps = {
+        ...getContentProps(),
+        className: `${getContentProps().className || ""} ${existingProps.className || ""}`.trim()
+      };
+      return React.cloneElement(content, mergedProps);
+    } else {
+      const contentProps = getContentProps();
+      return /* @__PURE__ */ jsx("div", { ...contentProps, children: content });
+    }
+  };
+  return /* @__PURE__ */ jsx("button", { ...getBaseProps(), children: originalProps.isLoading ? renderContent(/* @__PURE__ */ jsx(Icon_default, { name: "loading", className: "animate-spin" })) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    startContent && renderContent(startContent),
+    children,
+    endContent && renderContent(endContent)
+  ] }) });
+});
+Button.displayName = "Button";
+var button_default = Button;
+var buttonStyle = tv({
+  slots: {
+    base: "flex items-center justify-center border whitespace-nowrap transition duration-200 select-none",
+    content: ""
+  },
+  variants: {
+    variant: {
+      solid: "",
+      line: "",
+      tonal: "",
+      trans: {
+        base: "bg-transparent border-transparent"
+      },
+      ghost: ""
+    },
+    color: {
+      primary: "",
+      secondary: "",
+      neutral: "",
+      info: "",
+      success: "",
+      warning: "",
+      danger: ""
+    },
+    size: {
+      sm: {
+        base: "h-[24px] px-[8px] py-[4.5px] text-sm font-[500] rounded-sm gap-sm"
+      },
+      md: {
+        base: "h-[30px] px-[16px] py-[6.5px] text-md font-[500] rounded-md gap-md"
+      },
+      lg: {
+        base: "h-[36px] px-[24px] py-[8px] text-lg font-[500] rounded-lg gap-lg"
+      }
+    },
+    radius: {
+      default: {
+        base: ""
+      },
+      full: {
+        base: "rounded-full"
+      },
+      none: {
+        base: "rounded-none"
+      }
+    },
+    fullWidth: {
+      true: {
+        base: "w-full"
+      }
+    },
+    isDisabled: {
+      true: {
+        base: "!bg-neutral-soft !border-neutral-soft !text-neutral-light pointer-events-none"
+      }
+    },
+    isLoading: {
+      true: {
+        base: "pointer-events-none"
+      }
+    },
+    isInGroup: {
+      true: {
+        base: "[&:not(:first-child):not(:last-child)]:rounded-none first:rounded-r-none last:rounded-l-none"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "solid",
+    color: "primary",
+    fullWidth: false,
+    isDisabled: false,
+    isLoading: false,
+    isInGroup: false
+  },
+  compoundVariants: [
+    // solid & color
+    {
+      variant: "solid",
+      color: "primary",
+      class: {
+        base: [
+          "text-white",
+          "bg-primary-main",
+          "border-primary-main",
+          "hover:bg-primary-dark",
+          "hover:border-primary-dark",
+          "data-[loading=true]:bg-primary-dark",
+          "data-[loading=true]:border-primary-dark"
+        ]
+      }
+    },
+    {
+      variant: "solid",
+      color: "secondary",
+      class: {
+        base: [
+          "text-white",
+          "bg-secondary-main",
+          "border-secondary-main",
+          "hover:bg-secondary-dark",
+          "hover:border-secondary-dark",
+          "data-[loading=true]:bg-secondary-dark",
+          "data-[loading=true]:border-secondary-dark"
+        ]
+      }
+    },
+    {
+      variant: "solid",
+      color: "neutral",
+      class: {
+        base: [
+          "text-white",
+          "bg-neutral-main",
+          "border-neutral-main",
+          "hover:bg-neutral-dark",
+          "hover:border-neutral-dark",
+          "data-[loading=true]:bg-neutral-dark",
+          "data-[loading=true]:border-neutral-dark"
+        ]
+      }
+    },
+    {
+      variant: "solid",
+      color: "info",
+      class: {
+        base: [
+          "text-white",
+          "bg-info-main",
+          "border-info-main",
+          "hover:bg-info-dark",
+          "hover:border-info-dark",
+          "data-[loading=true]:bg-info-dark",
+          "data-[loading=true]:border-info-dark"
+        ]
+      }
+    },
+    {
+      variant: "solid",
+      color: "success",
+      class: {
+        base: [
+          "text-white",
+          "bg-success-main",
+          "border-success-main",
+          "hover:bg-success-dark",
+          "hover:border-success-dark",
+          "data-[loading=true]:bg-success-dark",
+          "data-[loading=true]:border-success-dark"
+        ]
+      }
+    },
+    {
+      variant: "solid",
+      color: "warning",
+      class: {
+        base: [
+          "text-white",
+          "bg-warning-main",
+          "border-warning-main",
+          "hover:bg-warning-dark",
+          "hover:border-warning-dark",
+          "data-[loading=true]:bg-warning-dark",
+          "data-[loading=true]:border-warning-dark"
+        ]
+      }
+    },
+    {
+      variant: "solid",
+      color: "danger",
+      class: {
+        base: [
+          "text-white",
+          "bg-danger-main",
+          "border-danger-main",
+          "hover:bg-danger-dark",
+          "hover:border-danger-dark",
+          "data-[loading=true]:bg-danger-dark",
+          "data-[loading=true]:border-danger-dark"
+        ]
+      }
+    },
+    // line & color
+    {
+      variant: "line",
+      color: "primary",
+      class: {
+        base: [
+          "bg-transparent",
+          "border-primary-main",
+          "text-primary-main",
+          "hover:bg-neutral-soft",
+          "data-[loading=true]:bg-neutral-soft"
+        ]
+      }
+    },
+    {
+      variant: "line",
+      color: "secondary",
+      class: {
+        base: [
+          "bg-transparent",
+          "border-secondary-main",
+          "text-secondary-main",
+          "hover:bg-neutral-soft",
+          "data-[loading=true]:bg-neutral-soft"
+        ]
+      }
+    },
+    {
+      variant: "line",
+      color: "neutral",
+      class: {
+        base: [
+          "bg-transparent",
+          "border-neutral-main",
+          "text-neutral-main",
+          "hover:bg-neutral-soft",
+          "data-[loading=true]:bg-neutral-soft"
+        ]
+      }
+    },
+    {
+      variant: "line",
+      color: "info",
+      class: {
+        base: [
+          "bg-transparent",
+          "border-info-main",
+          "text-info-main",
+          "hover:bg-neutral-soft",
+          "data-[loading=true]:bg-neutral-soft"
+        ]
+      }
+    },
+    {
+      variant: "line",
+      color: "success",
+      class: {
+        base: [
+          "bg-transparent",
+          "border-success-main",
+          "text-success-main",
+          "hover:bg-neutral-soft",
+          "data-[loading=true]:bg-neutral-soft"
+        ]
+      }
+    },
+    {
+      variant: "line",
+      color: "warning",
+      class: {
+        base: [
+          "bg-transparent",
+          "border-warning-main",
+          "text-warning-main",
+          "hover:bg-neutral-soft",
+          "data-[loading=true]:bg-neutral-soft"
+        ]
+      }
+    },
+    {
+      variant: "line",
+      color: "danger",
+      class: {
+        base: [
+          "bg-transparent",
+          "border-danger-main",
+          "text-danger-main",
+          "hover:bg-neutral-soft",
+          "data-[loading=true]:bg-neutral-soft"
+        ]
+      }
+    },
+    // tonal & color
+    {
+      variant: "tonal",
+      color: "primary",
+      class: {
+        base: [
+          "bg-primary-soft",
+          "border-primary-soft",
+          "text-primary-main",
+          "hover:border-primary-light",
+          "hover:bg-primary-light",
+          "data-[loading=true]:border-primary-light",
+          "data-[loading=true]:bg-primary-light"
+        ]
+      }
+    },
+    {
+      variant: "tonal",
+      color: "secondary",
+      class: {
+        base: [
+          "bg-secondary-soft",
+          "border-secondary-soft",
+          "text-secondary-main",
+          "hover:border-secondary-light",
+          "hover:bg-secondary-light",
+          "data-[loading=true]:border-secondary-light",
+          "data-[loading=true]:bg-secondary-light"
+        ]
+      }
+    },
+    {
+      variant: "tonal",
+      color: "neutral",
+      class: {
+        base: [
+          "bg-neutral-soft",
+          "border-neutral-soft",
+          "text-neutral-main",
+          "hover:border-neutral-light",
+          "hover:bg-neutral-light",
+          "data-[loading=true]:border-neutral-light",
+          "data-[loading=true]:bg-neutral-light"
+        ]
+      }
+    },
+    {
+      variant: "tonal",
+      color: "info",
+      class: {
+        base: [
+          "bg-info-soft",
+          "border-info-soft",
+          "text-info-main",
+          "hover:border-info-light",
+          "hover:bg-info-light",
+          "data-[loading=true]:border-info-light",
+          "data-[loading=true]:bg-info-light"
+        ]
+      }
+    },
+    {
+      variant: "tonal",
+      color: "success",
+      class: {
+        base: [
+          "bg-success-soft",
+          "border-success-soft",
+          "text-success-main",
+          "hover:border-success-light",
+          "hover:bg-success-light",
+          "data-[loading=true]:border-success-light",
+          "data-[loading=true]:bg-success-light"
+        ]
+      }
+    },
+    {
+      variant: "tonal",
+      color: "warning",
+      class: {
+        base: [
+          "bg-warning-soft",
+          "border-warning-soft",
+          "text-warning-main",
+          "hover:border-warning-light",
+          "hover:bg-warning-light",
+          "data-[loading=true]:border-warning-light",
+          "data-[loading=true]:bg-warning-light"
+        ]
+      }
+    },
+    {
+      variant: "tonal",
+      color: "danger",
+      class: {
+        base: [
+          "bg-danger-soft",
+          "border-danger-soft",
+          "text-danger-main",
+          "hover:border-danger-light",
+          "hover:bg-danger-light",
+          "data-[loading=true]:border-danger-light",
+          "data-[loading=true]:bg-danger-light"
+        ]
+      }
+    },
+    // trans & color
+    {
+      variant: "trans",
+      color: "primary",
+      class: {
+        base: [
+          "text-primary-main",
+          "border-transparent",
+          "hover:bg-primary-soft",
+          "hover:text-primary-main",
+          "hover:border-primary-soft",
+          "data-[loading=true]:bg-primary-soft",
+          "data-[loading=true]:text-primary-main",
+          "data-[loading=true]:border-primary-soft"
+        ]
+      }
+    },
+    {
+      variant: "trans",
+      color: "secondary",
+      class: {
+        base: [
+          "text-secondary-main",
+          "border-transparent",
+          "hover:bg-secondary-soft",
+          "hover:text-secondary-main",
+          "hover:border-secondary-soft",
+          "data-[loading=true]:bg-secondary-soft",
+          "data-[loading=true]:text-secondary-main",
+          "data-[loading=true]:border-secondary-soft"
+        ]
+      }
+    },
+    {
+      variant: "trans",
+      color: "neutral",
+      class: {
+        base: [
+          "text-neutral-main",
+          "border-transparent",
+          "hover:bg-neutral-soft",
+          "hover:text-neutral-main",
+          "hover:border-neutral-soft",
+          "data-[loading=true]:bg-neutral-soft",
+          "data-[loading=true]:text-neutral-main",
+          "data-[loading=true]:border-neutral-soft"
+        ]
+      }
+    },
+    {
+      variant: "trans",
+      color: "info",
+      class: {
+        base: [
+          "text-info-main",
+          "border-transparent",
+          "hover:bg-info-soft",
+          "hover:text-info-main",
+          "hover:border-info-soft",
+          "data-[loading=true]:bg-info-soft",
+          "data-[loading=true]:text-info-main",
+          "data-[loading=true]:border-info-soft"
+        ]
+      }
+    },
+    {
+      variant: "trans",
+      color: "success",
+      class: {
+        base: [
+          "text-success-main",
+          "border-transparent",
+          "hover:bg-success-soft",
+          "hover:text-success-main",
+          "hover:border-success-soft",
+          "data-[loading=true]:bg-success-soft",
+          "data-[loading=true]:text-success-main",
+          "data-[loading=true]:border-success-soft"
+        ]
+      }
+    },
+    {
+      variant: "trans",
+      color: "warning",
+      class: {
+        base: [
+          "text-warning-main",
+          "border-transparent",
+          "hover:bg-warning-soft",
+          "hover:text-warning-main",
+          "hover:border-warning-soft",
+          "data-[loading=true]:bg-warning-soft",
+          "data-[loading=true]:text-warning-main",
+          "data-[loading=true]:border-warning-soft"
+        ]
+      }
+    },
+    {
+      variant: "trans",
+      color: "danger",
+      class: {
+        base: [
+          "text-danger-main",
+          "border-transparent",
+          "hover:bg-danger-soft",
+          "hover:text-danger-main",
+          "hover:border-danger-soft",
+          "data-[loading=true]:bg-danger-soft",
+          "data-[loading=true]:text-danger-main",
+          "data-[loading=true]:border-danger-soft"
+        ]
+      }
+    },
+    // ghost & color
+    {
+      variant: "ghost",
+      color: "primary",
+      class: {
+        base: [
+          "text-primary-main",
+          "border-primary-main",
+          "hover:text-white",
+          "hover:bg-primary-main",
+          "data-[loading=true]:text-white",
+          "data-[loading=true]:bg-primary-main"
+        ]
+      }
+    },
+    {
+      variant: "ghost",
+      color: "secondary",
+      class: {
+        base: [
+          "text-secondary-main",
+          "border-secondary-main",
+          "hover:text-white",
+          "hover:bg-secondary-main",
+          "data-[loading=true]:text-white",
+          "data-[loading=true]:bg-secondary-main"
+        ]
+      }
+    },
+    {
+      variant: "ghost",
+      color: "neutral",
+      class: {
+        base: [
+          "text-neutral-main",
+          "border-neutral-main",
+          "hover:text-white",
+          "hover:bg-neutral-main",
+          "data-[loading=true]:text-white",
+          "data-[loading=true]:bg-neutral-main"
+        ]
+      }
+    },
+    {
+      variant: "ghost",
+      color: "info",
+      class: {
+        base: [
+          "text-info-main",
+          "border-info-main",
+          "hover:text-white",
+          "hover:bg-info-main",
+          "data-[loading=true]:text-white",
+          "data-[loading=true]:bg-info-main"
+        ]
+      }
+    },
+    {
+      variant: "ghost",
+      color: "success",
+      class: {
+        base: [
+          "text-success-main",
+          "border-success-main",
+          "hover:text-white",
+          "hover:bg-success-main",
+          "data-[loading=true]:text-white",
+          "data-[loading=true]:bg-success-main"
+        ]
+      }
+    },
+    {
+      variant: "ghost",
+      color: "warning",
+      class: {
+        base: [
+          "text-warning-main",
+          "border-warning-main",
+          "hover:text-white",
+          "hover:bg-warning-main",
+          "data-[loading=true]:text-white",
+          "data-[loading=true]:bg-warning-main"
+        ]
+      }
+    },
+    {
+      variant: "ghost",
+      color: "danger",
+      class: {
+        base: [
+          "text-danger-main",
+          "border-danger-main",
+          "hover:text-white",
+          "hover:bg-danger-main",
+          "data-[loading=true]:text-white",
+          "data-[loading=true]:bg-danger-main"
+        ]
+      }
+    },
+    // variant && isInGroup
+    {
+      variant: ["line", "ghost"],
+      isInGroup: true,
+      class: {
+        base: "[&:not(:last-child)]:border-r-0"
+      }
+    },
+    // variant && isDisabled
+    {
+      variant: ["line", "ghost"],
+      isDisabled: true,
+      class: {
+        base: "!border-neutral-light"
+      }
+    }
+  ]
+});
+
+export {
+  button_default
+};

package/dist/{chunk-PUFNT5LS.mjs → chunk-VG4644BG.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   checkbox_default
-} from "./chunk-BE2OG6M4.mjs";
+} from "./chunk-ANYPMQH4.mjs";
 import {
   clsx
 } from "./chunk-27Y6K5NK.mjs";

package/dist/components/accordion/accordion.d.mts

@@ -38,8 +38,8 @@ declare const accordion: 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;
         disableAnimation?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
     } | undefined;
 } & tailwind_variants_dist_config.TWMConfig & {

package/dist/components/accordion/accordion.d.ts

@@ -38,8 +38,8 @@ declare const accordion: 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;
         disableAnimation?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
     } | undefined;
 } & tailwind_variants_dist_config.TWMConfig & {

package/dist/components/accordion/accordion.test.mjs

@@ -2,10 +2,10 @@
 import {
   accordion_default
 } from "../../chunk-SWR7E3NU.mjs";
-import "../../chunk-E3G5QXSH.mjs";
 import {
   render
 } from "../../chunk-FNPWLOGV.mjs";
+import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-J725QONZ.mjs";
 import "../../chunk-IZ6II3QA.mjs";