@deepnoid/ui 0.1.2 → 0.1.4

package/dist/chunk-TDJJRQDC.mjs

@@ -0,0 +1,343 @@
+"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 === "horizon" ? slots.horizon({ class: classNames == null ? void 0 : classNames.horizon }) : slots.vertical({ class: classNames == null ? void 0 : classNames.vertical })
+      ),
+      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", "min-w-[80px]"],
+      innerWrapper: ["flex", "flex-col"],
+      inputWrapper: ["flex", "items-center", "duration-200", "group-has-[.error]/input:bg-danger-soft"],
+      input: [
+        "w-full",
+        "h-full",
+        "bg-transparent",
+        "text-neutral-main",
+        "placeholder:text-neutral-main",
+        "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-[.error]/input:text-danger-main",
+        "group-has-[.error]/input:placeholder:text-danger-main"
+      ],
+      content: [
+        "flex",
+        "items-center",
+        "select-none",
+        "text-neutral-main",
+        "group-has-[:hover]/input:text-neutral-dark",
+        "group-has-[.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"],
+          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-[.error]/input:border-danger-main"
+          ],
+          readonly: ["!bg-trans-soft"]
+        },
+        underline: {
+          inputWrapper: [
+            "bg-transparent",
+            "rounded-none",
+            "group-has-[:hover]/input:bg-trans-soft",
+            "group-has-[:focus]/input:bg-body-background",
+            "group-has-[.error]/input:border-danger-main"
+          ],
+          readonly: ["!bg-trans-soft"]
+        }
+      },
+      color: {
+        primary: {
+          content: [
+            "group-has-[:focus]/input:text-primary-main",
+            "!group-has-[.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-[: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]", "gap-[4px]"],
+          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]", "gap-[6px]"],
+          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]", "gap-[8px]"],
+          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]", "gap-[10px]"],
+          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-[.error]/input:text-danger-light"],
+          input: [
+            "text-neutral-light",
+            "placeholder:text-neutral-light",
+            "group-has-[.error]/input:text-danger-light",
+            "group-has-[.error]/input:placeholder:text-danger-light"
+          ],
+          content: ["text-neutral-light", "group-has-[.error]/input:text-danger-light"],
+          helperText: ["!text-neutral-light"],
+          errorText: ["!text-danger-light"]
+        }
+      }
+    },
+    compoundVariants: [
+      {
+        variant: "outline",
+        size: "sm",
+        class: {
+          inputWrapper: ["border-sm"]
+        }
+      },
+      {
+        variant: "outline",
+        size: "md",
+        class: {
+          inputWrapper: ["border-md"]
+        }
+      },
+      {
+        variant: "outline",
+        size: "lg",
+        class: {
+          inputWrapper: ["border-lg"]
+        }
+      },
+      {
+        variant: "outline",
+        size: "xl",
+        class: {
+          inputWrapper: ["border-xl"]
+        }
+      },
+      {
+        variant: "underline",
+        size: "sm",
+        class: {
+          inputWrapper: ["border-b-sm"]
+        }
+      },
+      {
+        variant: "underline",
+        size: "md",
+        class: {
+          inputWrapper: ["border-b-md"]
+        }
+      },
+      {
+        variant: "underline",
+        size: "lg",
+        class: {
+          inputWrapper: ["border-b-lg"]
+        }
+      },
+      {
+        variant: "underline",
+        size: "xl",
+        class: {
+          inputWrapper: ["border-b-xl"]
+        }
+      },
+      {
+        disabled: true,
+        variant: ["outline", "underline"],
+        class: {
+          inputWrapper: ["!bg-body-background", "group-has-[.error]/input:border-danger-light"]
+        }
+      }
+    ],
+    defaultVariants: {
+      variant: "solid",
+      color: "primary",
+      size: "md",
+      direction: "vertical",
+      disabled: false,
+      readonly: false
+    }
+  },
+  {
+    twMerge: false
+  }
+);
+
+export {
+  input_default,
+  inputStyle
+};

package/dist/{chunk-OELLMF2V.mjs → chunk-WPUTPWQ4.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-F3HENRVM.mjs";
 import {
   input_default
-} from "./chunk-OYNGJ33M.mjs";
+} from "./chunk-TDJJRQDC.mjs";
 import {
   Icon_default
 } from "./chunk-24NQEB73.mjs";

package/dist/{chunk-VP3NVHFU.mjs → chunk-YCMZELLD.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-VVOOYDJS.mjs";
 import {
   listItem_default
-} from "./chunk-KWWYMTJP.mjs";
+} from "./chunk-AYWI2CRE.mjs";
 
 // src/components/dateTimePicker/timePicker.tsx
 import { useState, useRef, useEffect } from "react";

package/dist/components/dateTimePicker/dateTimePicker.mjs

@@ -2,17 +2,17 @@
 import {
   dateTimePickerStyle,
   dateTimePicker_default
-} from "../../chunk-DNFBQYVG.mjs";
-import "../../chunk-VP3NVHFU.mjs";
+} from "../../chunk-SSEQSF5F.mjs";
+import "../../chunk-YCMZELLD.mjs";
 import "../../chunk-7MVEAQ7Z.mjs";
 import "../../chunk-VVOOYDJS.mjs";
-import "../../chunk-KWWYMTJP.mjs";
+import "../../chunk-AYWI2CRE.mjs";
 import "../../chunk-FWJ2ZKH6.mjs";
 import "../../chunk-HKXUNG3H.mjs";
 import "../../chunk-P732YGHO.mjs";
+import "../../chunk-CF6O6TCF.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-24NQEB73.mjs";
-import "../../chunk-CF6O6TCF.mjs";
 import "../../chunk-P2TMIZRH.mjs";
 import "../../chunk-2ZT6V4QR.mjs";
 import "../../chunk-E3G5QXSH.mjs";

package/dist/components/dateTimePicker/index.mjs

@@ -2,17 +2,17 @@
 import "../../chunk-75HLCORR.mjs";
 import {
   dateTimePicker_default
-} from "../../chunk-DNFBQYVG.mjs";
-import "../../chunk-VP3NVHFU.mjs";
+} from "../../chunk-SSEQSF5F.mjs";
+import "../../chunk-YCMZELLD.mjs";
 import "../../chunk-7MVEAQ7Z.mjs";
 import "../../chunk-VVOOYDJS.mjs";
-import "../../chunk-KWWYMTJP.mjs";
+import "../../chunk-AYWI2CRE.mjs";
 import "../../chunk-FWJ2ZKH6.mjs";
 import "../../chunk-HKXUNG3H.mjs";
 import "../../chunk-P732YGHO.mjs";
+import "../../chunk-CF6O6TCF.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-24NQEB73.mjs";
-import "../../chunk-CF6O6TCF.mjs";
 import "../../chunk-P2TMIZRH.mjs";
 import "../../chunk-2ZT6V4QR.mjs";
 import "../../chunk-E3G5QXSH.mjs";

package/dist/components/dateTimePicker/timePicker.mjs

@@ -1,13 +1,13 @@
 "use client";
 import {
   timePicker_default
-} from "../../chunk-VP3NVHFU.mjs";
+} from "../../chunk-YCMZELLD.mjs";
 import "../../chunk-7MVEAQ7Z.mjs";
 import "../../chunk-VVOOYDJS.mjs";
-import "../../chunk-KWWYMTJP.mjs";
+import "../../chunk-AYWI2CRE.mjs";
+import "../../chunk-CF6O6TCF.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-24NQEB73.mjs";
-import "../../chunk-CF6O6TCF.mjs";
 import "../../chunk-P2TMIZRH.mjs";
 import "../../chunk-2ZT6V4QR.mjs";
 import "../../chunk-E3G5QXSH.mjs";