@deepnoid/ui 0.0.112 → 0.1.1

package/dist/chunk-RT5NKQX4.mjs

@@ -0,0 +1,285 @@
+"use client";
+import {
+  Icon_default
+} from "./chunk-24NQEB73.mjs";
+import {
+  tv
+} from "./chunk-2ZT6V4QR.mjs";
+import {
+  clsx
+} from "./chunk-27Y6K5NK.mjs";
+import {
+  mapPropsVariants
+} from "./chunk-E3G5QXSH.mjs";
+
+// src/components/input/input.tsx
+import React, { forwardRef, useRef, useCallback, useMemo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var Input = forwardRef((originalProps, ref) => {
+  const [props, variantProps] = mapPropsVariants(originalProps, inputStyle.variantKeys);
+  const { classNames, label, helperText, errorText, startContent, endContent, ...inputProps } = props;
+  const inputRef = useRef(null);
+  const slots = useMemo(() => inputStyle({ ...variantProps }), [variantProps]);
+  const getContentProps = useCallback(
+    () => ({
+      className: slots.content({ class: classNames == null ? void 0 : classNames.content }),
+      size: originalProps.size
+    }),
+    [slots, classNames, originalProps.size]
+  );
+  const renderStartContent = () => {
+    if (React.isValidElement(startContent)) {
+      const existingProps = startContent.props;
+      const mergedProps = {
+        ...getContentProps(),
+        className: `${getContentProps().className || ""} ${existingProps.className || ""}`.trim()
+      };
+      return React.cloneElement(startContent, mergedProps);
+    } else {
+      const contentProps = getContentProps();
+      return /* @__PURE__ */ jsx("div", { ...contentProps, children: startContent });
+    }
+  };
+  const renderDateTimePickerIcon = () => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...getContentProps(),
+      onClick: () => {
+        const target = ref && "current" in ref ? ref.current : inputRef.current;
+        target == null ? void 0 : target.focus();
+        target == null ? void 0 : target.showPicker();
+      },
+      children: /* @__PURE__ */ jsx(Icon_default, { name: props.type === "time" ? "clock" : "calendar", size: originalProps.size, className: "cursor-pointer" })
+    }
+  );
+  const renderContentWithIcon = () => {
+    if (React.isValidElement(endContent)) {
+      const existingProps = endContent.props;
+      const mergedProps = {
+        ...getContentProps(),
+        className: `${getContentProps().className || ""} ${existingProps.className || ""}`.trim()
+      };
+      return React.cloneElement(endContent, mergedProps);
+    } else if (errorText) {
+      const iconProps = { ...getContentProps(), className: getContentProps().className };
+      return /* @__PURE__ */ jsx("div", { ...iconProps, children: /* @__PURE__ */ jsx(Icon_default, { name: "exclamation-circle", fill: true, size: originalProps.size }) });
+    } else {
+      return /* @__PURE__ */ jsx(Fragment, {});
+    }
+  };
+  const renderEndContent = () => {
+    switch (props.type) {
+      case "date":
+      case "datetime-local":
+      case "month":
+      case "week":
+      case "time":
+        return renderDateTimePickerIcon();
+      default:
+        return renderContentWithIcon();
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(
+        slots.base({ class: classNames == null ? void 0 : classNames.base }),
+        variantProps.direction === "vertical" ? slots.vertical({ class: classNames == null ? void 0 : classNames.vertical }) : slots.horizon({ class: classNames == null ? void 0 : classNames.horizon })
+      ),
+      children: [
+        label && /* @__PURE__ */ jsx("label", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
+        /* @__PURE__ */ jsxs("div", { className: slots.innerWrapper({ class: classNames == null ? void 0 : classNames.innerWrapper }), children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: clsx(
+                slots.inputWrapper({ class: classNames == null ? void 0 : classNames.inputWrapper }),
+                inputProps.readOnly ? slots.readonly({ class: classNames == null ? void 0 : classNames.readonly }) : ""
+              ),
+              children: [
+                startContent && renderStartContent(),
+                /* @__PURE__ */ jsx("input", { ...inputProps, ref: ref || inputRef, className: slots.input({ class: classNames == null ? void 0 : classNames.input }), size: 0 }),
+                renderEndContent()
+              ]
+            }
+          ),
+          helperText && !errorText && /* @__PURE__ */ jsx("p", { className: slots.helperText({ class: classNames == null ? void 0 : classNames.helperText }), children: helperText }),
+          errorText && /* @__PURE__ */ jsx("p", { className: clsx("error", slots.errorText({ class: classNames == null ? void 0 : classNames.errorText })), children: errorText })
+        ] })
+      ]
+    }
+  );
+});
+Input.displayName = "Input";
+var input_default = Input;
+var inputStyle = tv({
+  slots: {
+    base: ["group/input", "flex"],
+    vertical: ["flex-col"],
+    horizon: ["flex-row", "gap-0"],
+    label: ["flex", "items-center", "font-bold", "text-body-foreground", "w-[80px]"],
+    innerWrapper: ["flex", "flex-col"],
+    inputWrapper: ["flex", "items-center", "transition", "duration-200", "group-has-[p.error]/input:bg-danger-soft"],
+    input: [
+      "w-full",
+      "h-full",
+      "bg-transparent",
+      "text-neutral-main",
+      "placeholder:text-neutral-main",
+      "focus:outline-none",
+      "focus:ring-0",
+      "group-has-[:hover]/input:text-neutral-dark",
+      "group-has-[:hover]/input:placeholder:text-neutral-dark",
+      "group-has-[:focus]/input:text-neutral-dark",
+      "group-has-[:focus]/input:placeholder:text-neutral-dark",
+      "group-has-[p.error]/input:text-danger-main",
+      "group-has-[p.error]/input:placeholder:text-danger-main"
+    ],
+    content: [
+      "flex",
+      "items-center",
+      "select-none",
+      "text-neutral-main",
+      "group-has-[:hover]/input:text-neutral-dark",
+      "group-has-[p.error]/input:text-danger-main"
+    ],
+    helperText: ["text-neutral-main", "group-has-[:hover]/input:text-neutral-dark"],
+    errorText: ["text-danger-main"],
+    readonly: ["pointer-events-none"]
+  },
+  variants: {
+    variant: {
+      solid: {
+        inputWrapper: ["!border-transparent", "bg-trans-soft", "group-has-[:focus]/input:text-body-foreground"],
+        readonly: ["!bg-trans-light"]
+      },
+      outline: {
+        inputWrapper: [
+          "border-neutral-light",
+          "group-has-[:hover]/input:bg-trans-soft",
+          "group-has-[:focus]/input:bg-body-background",
+          "group-has-[p.error]/input:border-danger-main"
+        ],
+        readonly: ["!bg-trans-soft"]
+      },
+      underline: {
+        inputWrapper: [
+          "bg-transparent",
+          "!rounded-none",
+          "!border-t-transparent",
+          "!border-l-transparent",
+          "!border-r-transparent",
+          "group-has-[:hover]/input:bg-trans-soft",
+          "group-has-[:focus]/input:bg-body-background",
+          "group-has-[p.error]/input:border-danger-main"
+        ],
+        readonly: ["!bg-trans-soft"]
+      }
+    },
+    color: {
+      primary: {
+        content: [
+          "group-has-[:focus]/input:text-primary-main",
+          "!group-has-[p.error]:not(input:focus):hover/input:text-primary-main"
+        ],
+        helperText: [
+          "group-has-[:focus]/input:text-primary-main",
+          "group-has-[:focus:hover]/input:text-primary-main",
+          "group-has-[:focus]/input:hover:text-primary-main"
+        ]
+      },
+      secondary: {
+        content: [
+          "group-has-[:focus]/input:text-secondary-main",
+          "!group-has-[p.error]:not(input:focus):hover/input:text-secondary-main"
+        ],
+        helperText: [
+          "group-has-[:focus]/input:text-secondary-main",
+          "group-has-[:focus:hover]/input:text-secondary-main",
+          "group-has-[:focus]/input:hover:text-secondary-main"
+        ]
+      }
+    },
+    size: {
+      sm: {
+        base: ["text-sm", "gap-[4px]"],
+        label: ["text-sm"],
+        innerWrapper: ["gap-[4px]"],
+        inputWrapper: ["w-[240px]", "h-[24px]", "rounded-sm", "px-[4px]", "border-sm"],
+        helperText: ["text-sm"],
+        errorText: ["text-sm"]
+      },
+      md: {
+        base: ["text-md", "gap-[6px]"],
+        label: ["text-md"],
+        innerWrapper: ["gap-[6px]"],
+        inputWrapper: ["w-[240px]", "h-[32px]", "rounded-md", "px-[6px]", "border-md"],
+        helperText: ["text-sm"],
+        errorText: ["text-sm"]
+      },
+      lg: {
+        base: ["text-lg", "gap-[8px]"],
+        label: ["text-lg"],
+        innerWrapper: ["gap-[8px]"],
+        inputWrapper: ["w-[240px]", "h-[40px]", "rounded-lg", "px-[8px]", "border-lg"],
+        helperText: ["text-md"],
+        errorText: ["text-md"]
+      },
+      xl: {
+        base: ["text-xl", "gap-[10px]"],
+        label: ["text-xl"],
+        innerWrapper: ["gap-[10px]"],
+        inputWrapper: ["w-[240px]", "h-[50px]", "rounded-lg", "px-[10px]", "border-xl"],
+        helperText: ["text-md"],
+        errorText: ["text-md"]
+      }
+    },
+    direction: {
+      vertical: "",
+      horizon: ""
+    },
+    full: {
+      true: {
+        base: ["w-full"],
+        innerWrapper: ["flex-1"],
+        inputWrapper: ["w-full"]
+      }
+    },
+    disabled: {
+      true: {
+        inputWrapper: ["!bg-neutral-soft", "pointer-events-none", "!group-has-[p.error]/input:text-danger-light"],
+        input: [
+          "text-neutral-light",
+          "placeholder:text-neutral-light",
+          "group-has-[p.error]/input:text-danger-light",
+          "group-has-[p.error]/input:placeholder:text-danger-light"
+        ],
+        content: ["text-neutral-light", "group-has-[p.error]/input:text-danger-light"],
+        helperText: ["!text-neutral-light"],
+        errorText: ["!text-danger-light"]
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      disabled: true,
+      variant: ["outline", "underline"],
+      class: {
+        inputWrapper: ["!bg-body-background", "group-has-[p.error]/input:border-danger-light"]
+      }
+    }
+  ],
+  defaultVariants: {
+    variant: "solid",
+    color: "primary",
+    size: "md",
+    direction: "vertical",
+    disabled: false,
+    readonly: false
+  }
+});
+
+export {
+  input_default,
+  inputStyle
+};

package/dist/chunk-S65S7QZ5.mjs

@@ -0,0 +1,413 @@
+"use client";
+import {
+  ripple_default
+} from "./chunk-LXHUO6VM.mjs";
+import {
+  useRipple
+} from "./chunk-6PNKRBUT.mjs";
+import {
+  Icon_default
+} from "./chunk-24NQEB73.mjs";
+import {
+  tv
+} from "./chunk-2ZT6V4QR.mjs";
+import {
+  mapPropsVariants
+} from "./chunk-E3G5QXSH.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, disableRipple, children, ...buttonProps } = props;
+  const slots = useMemo(() => buttonStyle({ ...variantProps }), [variantProps]);
+  const { onPress: onRipplePressHandler, onClear: onClearRipple, ripples } = useRipple();
+  const handlePress = useCallback(
+    (e) => {
+      if (disableRipple || originalProps.isDisabled) return;
+      onRipplePressHandler(e);
+    },
+    [disableRipple, originalProps.isDisabled, ref, onRipplePressHandler]
+  );
+  const mouseDownHandler = useCallback(
+    (e) => {
+      var _a;
+      (_a = buttonProps.onMouseDown) == null ? void 0 : _a.call(buttonProps, e);
+      if (disableRipple || originalProps.isDisabled) return;
+      handlePress(e);
+    },
+    [buttonProps.onMouseDown, disableRipple, originalProps.isDisabled, ref, onRipplePressHandler]
+  );
+  const getRippleProps = useCallback(
+    () => ({ ripples, onClear: onClearRipple }),
+    [ripples, onClearRipple]
+  );
+  const getBaseProps = useCallback(
+    () => ({
+      ...buttonProps,
+      onMouseDown: mouseDownHandler,
+      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 _content = 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),
+    !disableRipple && /* @__PURE__ */ jsx(ripple_default, { ...getRippleProps() })
+  ] }) });
+});
+Button.displayName = "Button";
+var button_default = Button;
+var buttonStyle = tv({
+  slots: {
+    base: "relative flex items-center justify-center whitespace-nowrap transition duration-200 select-none overflow-hidden box-border border border-transparent",
+    content: ""
+  },
+  variants: {
+    variant: {
+      solid: "",
+      soft: "",
+      outline: {
+        base: "bg-transparent border-transparent"
+      },
+      ghost: ""
+    },
+    color: {
+      primary: "",
+      secondary: "",
+      neutral: "",
+      info: "",
+      success: "",
+      warning: "",
+      danger: ""
+    },
+    size: {
+      sm: {
+        base: "h-[24px] px-[8px] py-[3px] text-sm font-[700] rounded-sm gap-sm"
+      },
+      md: {
+        base: "h-[32px] px-[12px] py-[5.5px] text-md font-[700] rounded-md gap-md"
+      },
+      lg: {
+        base: "h-[40px] px-[16px] py-[8px] text-lg font-[700] rounded-lg gap-lg"
+      },
+      xl: {
+        base: "h-[50px] px-[20px] py-[11.5px] text-xl font-[700] rounded-xl gap-xl"
+      }
+    },
+    radius: {
+      default: {
+        base: ""
+      },
+      full: {
+        base: "rounded-full"
+      },
+      none: {
+        base: "rounded-none"
+      }
+    },
+    fullWidth: {
+      true: {
+        base: "w-full"
+      }
+    },
+    isLoading: {
+      true: {}
+    },
+    isDisabled: {
+      true: {
+        base: "!bg-neutral-soft !border-neutral-soft !text-neutral-light 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", "hover:bg-gradient-to-r", "hover:from-white/20", "hover:to-white/20"]
+      }
+    },
+    {
+      variant: "solid",
+      color: "secondary",
+      class: {
+        base: ["text-white", "bg-secondary-main", "hover:bg-gradient-to-r", "hover:from-white/20", "hover:to-white/20"]
+      }
+    },
+    {
+      variant: "solid",
+      color: "neutral",
+      class: {
+        base: ["text-white", "bg-neutral-main", "hover:bg-gradient-to-r", "hover:from-white/20", "hover:to-white/20"]
+      }
+    },
+    {
+      variant: "solid",
+      color: "info",
+      class: {
+        base: ["text-white", "bg-info-main", "hover:bg-gradient-to-r", "hover:from-white/20", "hover:to-white/20"]
+      }
+    },
+    {
+      variant: "solid",
+      color: "success",
+      class: {
+        base: ["text-white", "bg-success-main", "hover:bg-gradient-to-r", "hover:from-white/20", "hover:to-white/20"]
+      }
+    },
+    {
+      variant: "solid",
+      color: "warning",
+      class: {
+        base: ["text-white", "bg-warning-main", "hover:bg-gradient-to-r", "hover:from-white/20", "hover:to-white/20"]
+      }
+    },
+    {
+      variant: "solid",
+      color: "danger",
+      class: {
+        base: ["text-white", "bg-danger-main", "hover:bg-gradient-to-r", "hover:from-white/20", "hover:to-white/20"]
+      }
+    },
+    // soft & color
+    {
+      variant: "soft",
+      color: "primary",
+      class: {
+        base: ["text-primary-main", "bg-primary-soft", "border-primary-soft", "hover:border-primary-light"]
+      }
+    },
+    {
+      variant: "soft",
+      color: "secondary",
+      class: {
+        base: ["text-secondary-main", "bg-secondary-soft", "border-secondary-soft", "hover:border-secondary-light"]
+      }
+    },
+    {
+      variant: "soft",
+      color: "neutral",
+      class: {
+        base: ["text-neutral-main", "bg-neutral-soft", "border-neutral-soft", "hover:border-neutral-light"]
+      }
+    },
+    {
+      variant: "soft",
+      color: "info",
+      class: {
+        base: ["text-info-main", "bg-info-soft", "border-info-soft", "hover:border-info-light"]
+      }
+    },
+    {
+      variant: "soft",
+      color: "success",
+      class: {
+        base: ["text-success-main", "bg-success-soft", "border-success-soft", "hover:border-success-light"]
+      }
+    },
+    {
+      variant: "soft",
+      color: "warning",
+      class: {
+        base: ["text-warning-main", "bg-warning-soft", "border-warning-soft", "hover:border-warning-light"]
+      }
+    },
+    {
+      variant: "soft",
+      color: "danger",
+      class: {
+        base: ["text-danger-main", "bg-danger-soft", "border-danger-soft", "hover:border-danger-light"]
+      }
+    },
+    // outline & color
+    {
+      variant: "outline",
+      color: "primary",
+      class: {
+        base: ["bg-transparent", "border-primary-main", "text-primary-main", "hover:bg-primary-soft"]
+      }
+    },
+    {
+      variant: "outline",
+      color: "secondary",
+      class: {
+        base: ["bg-transparent", "border-secondary-main", "text-secondary-main", "hover:bg-secondary-soft"]
+      }
+    },
+    {
+      variant: "outline",
+      color: "neutral",
+      class: {
+        base: ["bg-transparent", "border-neutral-main", "text-neutral-main", "hover:bg-neutral-soft"]
+      }
+    },
+    {
+      variant: "outline",
+      color: "info",
+      class: {
+        base: ["bg-transparent", "border-info-main", "text-info-main", "hover:bg-info-soft"]
+      }
+    },
+    {
+      variant: "outline",
+      color: "success",
+      class: {
+        base: ["bg-transparent", "border-success-main", "text-success-main", "hover:bg-success-soft"]
+      }
+    },
+    {
+      variant: "outline",
+      color: "warning",
+      class: {
+        base: ["bg-transparent", "border-warning-main", "text-warning-main", "hover:bg-warning-soft"]
+      }
+    },
+    {
+      variant: "outline",
+      color: "danger",
+      class: {
+        base: ["bg-transparent", "border-danger-main", "text-danger-main", "hover:bg-danger-soft"]
+      }
+    },
+    // ghost & color
+    {
+      variant: "ghost",
+      color: "primary",
+      class: {
+        base: ["text-primary-main", "border-transparent", "hover:bg-primary-soft"]
+      }
+    },
+    {
+      variant: "ghost",
+      color: "secondary",
+      class: {
+        base: ["text-secondary-main", "border-transparent", "hover:bg-secondary-soft"]
+      }
+    },
+    {
+      variant: "ghost",
+      color: "neutral",
+      class: {
+        base: ["text-neutral-main", "border-transparent", "hover:bg-neutral-soft"]
+      }
+    },
+    {
+      variant: "ghost",
+      color: "info",
+      class: {
+        base: ["text-info-main", "border-transparent", "hover:bg-info-soft"]
+      }
+    },
+    {
+      variant: "ghost",
+      color: "success",
+      class: {
+        base: ["text-success-main", "border-transparent", "hover:bg-success-soft"]
+      }
+    },
+    {
+      variant: "ghost",
+      color: "warning",
+      class: {
+        base: ["text-warning-main", "border-transparent", "hover:bg-warning-soft"]
+      }
+    },
+    {
+      variant: "ghost",
+      color: "danger",
+      class: {
+        base: ["text-danger-main", "border-transparent", "hover:bg-danger-soft"]
+      }
+    },
+    // variant && size
+    {
+      variant: ["soft", "outline"],
+      size: "sm",
+      class: {
+        base: "border-[1px]"
+      }
+    },
+    {
+      variant: ["soft", "outline"],
+      size: "md",
+      class: {
+        base: "border-[1.25px]"
+      }
+    },
+    {
+      variant: ["soft", "outline"],
+      size: "lg",
+      class: {
+        base: "border-[1.5px]"
+      }
+    },
+    {
+      variant: ["soft", "outline"],
+      size: "xl",
+      class: {
+        base: "border-[1.75px]"
+      }
+    },
+    // variant && isDisabled
+    {
+      variant: ["soft", "ghost"],
+      isDisabled: true,
+      class: {
+        base: "!border-neutral-soft"
+      }
+    },
+    {
+      variant: ["outline"],
+      isDisabled: true,
+      class: {
+        base: "!border-neutral-light"
+      }
+    }
+  ]
+});
+
+export {
+  button_default
+};

package/dist/chunk-SE5TU755.mjs

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