@nation-a/ui 0.8.1 → 0.9.1

package/dist/index.cjs

@@ -4832,7 +4832,7 @@ const Backdrop$1 = withContext$1(DialogBackdrop, "backdrop");
 const Trigger$1 = withContext$1(DialogTrigger, "trigger");
 const Content = withContext$1(DialogContent, "content");
 const Title = withContext$1(DialogTitle, "title");
-const Description = withContext$1(DialogDescription, "description");
+const Description$1 = withContext$1(DialogDescription, "description");
 const Positioner = withContext$1(DialogPositioner, "positioner");
 const Header = withContext$1(ark.header, "header");
 const Footer = withContext$1(
@@ -4861,7 +4861,7 @@ const Dialog = {
   Trigger: Trigger$1,
   Content,
   Title,
-  Description,
+  Description: Description$1,
   Positioner,
   Header,
   Footer,
@@ -8772,7 +8772,8 @@ const tagRecipe = cva({
     textStyle: "label.md",
     height: "fit-content",
     width: "fit-content",
-    cursor: "default"
+    cursor: "default",
+    outline: "none"
   },
   variants: {
     color: {
@@ -8908,29 +8909,437 @@ function P({ size: C = 24, color: n = "currentColor", ...o }) {
     }
   );
 }
-const Tag = React.forwardRef(
-  ({ color, background, radius, imageSrc, text, onDeleteClick, ...rest }, ref) => {
-    const StyledTag = styled(ark.div, tagRecipe);
-    return /* @__PURE__ */ jsxRuntime.jsxs(StyledTag, { color, background, radius, avatar: !!imageSrc, ref, ...rest, children: [
-      imageSrc && /* @__PURE__ */ jsxRuntime.jsx(
-        styled.img,
+const Tag = React.forwardRef(({ imageSrc, text, onDeleteClick, ...rest }, ref) => {
+  const StyledTag = styled(ark.div, tagRecipe);
+  return /* @__PURE__ */ jsxRuntime.jsxs(StyledTag, { avatar: !!imageSrc, ref, ...rest, children: [
+    imageSrc ? /* @__PURE__ */ jsxRuntime.jsx(
+      styled.img,
+      {
+        src: imageSrc,
+        width: 8,
+        height: 8,
+        className: css$1({ borderRadius: "full", overflow: "hidden" }),
+        alt: "avatar thumbnail"
+      }
+    ) : null,
+    text,
+    onDeleteClick ? /* @__PURE__ */ jsxRuntime.jsx(P, { size: 12, onClick: onDeleteClick, cursor: "pointer" }) : null
+  ] });
+});
+Tag.displayName = "Tag";
+const inputSlotRecipe = sva({
+  className: "input",
+  slots: ["requiredStar", "description", "textLengthIndicator"],
+  base: {
+    requiredStar: {
+      color: "content.danger.default",
+      paddingLeft: 1
+    },
+    description: {
+      textStyle: "label.sm",
+      color: "content.neutral.subtle",
+      paddingLeft: 1,
+      width: "100%",
+      textAlign: "start"
+    },
+    textLengthIndicator: {
+      display: "inline-block",
+      width: "100%",
+      textAlign: "end",
+      paddingRight: 1,
+      marginTop: -0.5,
+      textStyle: "label.sm"
+    }
+  }
+});
+const inputRecipe = cva({
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "100%",
+    textStyle: "body.md",
+    cursor: "text",
+    color: "content.neutral.bold",
+    gap: 1,
+    borderStyle: "solid",
+    border: 1,
+    outline: "none",
+    p: 2,
+    "& textarea, & input": {
+      outline: "none",
+      width: "100%",
+      height: "100%"
+    }
+  },
+  variants: {
+    isTextArea: {
+      true: {
+        minHeight: "56px",
+        "& textarea": {
+          background: "transparent",
+          height: "100%",
+          resize: "none",
+          overflowY: "auto"
+        }
+      },
+      false: {
+        minHeight: "48px",
+        maxHeight: "60px"
+      }
+    },
+    variant: {
+      solid: {
+        borderColor: "transparent"
+      },
+      line: {
+        background: "transparent"
+      }
+    },
+    color: {
+      alpha: {
+        "&::placeholder": {
+          color: "content.static.white.subtlest"
+        }
+      },
+      neutral: {
+        "&::placeholder": {
+          color: "content.neutral.subtlest"
+        }
+      }
+    },
+    radius: {
+      md: {
+        borderRadius: 8,
+        px: 2
+      },
+      lg: {
+        borderRadius: 16,
+        px: 2
+      },
+      full: {
+        borderRadius: 9999,
+        px: 4
+      }
+    },
+    state: {
+      // state: Input 컴포넌트 내부 로직, 외부 노출 X (외부에선 disabled만 제어)
+      default: {
+        color: "content.neutral.bold"
+      },
+      selected: {
+        color: "content.neutral.bold"
+      },
+      disabled: {
+        color: "content.neutral.disabled"
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      color: "alpha",
+      state: "disabled",
+      css: {
+        "&::placeholder": {
+          color: "content.static.white.disabled"
+        }
+      }
+    },
+    {
+      color: "neutral",
+      state: "disabled",
+      css: {
+        "&::placeholder": {
+          color: "content.neutral.disabled"
+        }
+      }
+    },
+    {
+      variant: "solid",
+      color: "alpha",
+      state: "default",
+      css: {
+        background: "black.500A"
+      }
+    },
+    {
+      variant: "solid",
+      color: "alpha",
+      state: "selected",
+      css: {
+        background: "black.500A",
+        border: 1,
+        borderColor: "border.neutral.default"
+      }
+    },
+    {
+      variant: "solid",
+      color: "alpha",
+      state: "disabled",
+      css: {
+        background: "black.500A"
+      }
+    },
+    {
+      variant: "solid",
+      color: "neutral",
+      state: "default",
+      css: {
+        background: "background.neutral.default"
+      }
+    },
+    {
+      variant: "solid",
+      color: "neutral",
+      state: "selected",
+      css: {
+        background: "background.neutral.default",
+        border: 1,
+        borderColor: "border.neutral.default"
+      }
+    },
+    {
+      variant: "solid",
+      color: "neutral",
+      state: "disabled",
+      css: {
+        background: "background.neutral.disabled"
+      }
+    },
+    {
+      variant: "line",
+      state: "default",
+      css: {
+        background: "transparent",
+        border: 1,
+        borderColor: "border.neutral.subtle"
+      }
+    },
+    {
+      variant: "line",
+      state: "selected",
+      css: {
+        background: "transparent",
+        border: 1,
+        borderColor: "border.neutral.default"
+      }
+    },
+    {
+      variant: "line",
+      state: "disabled",
+      css: {
+        background: "transparent",
+        border: 1,
+        borderColor: "border.neutral.disabled"
+      }
+    }
+  ],
+  defaultVariants: {
+    isTextArea: false,
+    variant: "solid",
+    color: "neutral",
+    state: "default",
+    radius: "md"
+  }
+});
+const labelRecipe = cva({
+  base: {
+    textStyle: "label.sm",
+    textAlign: "start",
+    width: "100%",
+    display: "inline-block"
+  },
+  variants: {
+    state: {
+      default: {},
+      selected: {},
+      disabled: {}
+    },
+    color: {
+      alpha: {
+        color: "content.static.white.bold"
+      },
+      neutral: {
+        color: "content.neutral.subtle"
+      }
+    },
+    radius: {
+      md: {},
+      lg: {},
+      full: {}
+    }
+  },
+  compoundVariants: [
+    {
+      state: "disabled",
+      css: {
+        color: "content.neutral.disabled"
+      }
+    }
+  ],
+  defaultVariants: {
+    color: "neutral",
+    state: "default",
+    radius: "md"
+  }
+});
+const StyledInputWrapper = styled(ark.div, inputRecipe);
+const StyledLabel$1 = styled(ark.label, labelRecipe);
+const RequiredStar = () => /* @__PURE__ */ jsxRuntime.jsx(ark.span, { className: inputSlotRecipe().requiredStar, "aria-hidden": "true", children: "*" });
+const Description = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(ark.span, { className: inputSlotRecipe().description, children });
+const Input = React.forwardRef(
+  ({
+    value,
+    required,
+    disabled,
+    label,
+    description,
+    labelPosition = "outside",
+    textLimit,
+    variant,
+    color,
+    radius,
+    onChange,
+    className,
+    ...rest
+  }, ref) => {
+    const [state, setState] = React.useState(disabled ? "disabled" : "default");
+    React.useEffect(() => {
+      setState(disabled ? "disabled" : "default");
+    }, [disabled]);
+    const handleInputChange = (e) => {
+      if (disabled) return;
+      const value2 = e.target.value;
+      if (textLimit && value2.length > textLimit) return;
+      setState(value2 ? "selected" : "default");
+      onChange == null ? void 0 : onChange(e);
+    };
+    const Label = ({ visible, children }) => {
+      console.log("color", color);
+      return visible ? /* @__PURE__ */ jsxRuntime.jsxs(StyledLabel$1, { state, color, radius, children: [
+        children,
+        required && /* @__PURE__ */ jsxRuntime.jsx(RequiredStar, {})
+      ] }) : null;
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(VStack$1, { gap: 1, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Label, { visible: !!(label && labelPosition === "outside"), children: label }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        StyledInputWrapper,
         {
-          src: imageSrc,
-          css: {
-            width: "8",
-            height: "8",
-            borderRadius: "full",
-            overflow: "hidden"
-          },
-          alt: "avatar thumbnail"
+          state,
+          variant,
+          color,
+          radius,
+          className: cx(css$1({ display: "flex", flexDirection: "column", gap: 1 }), className),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Label, { visible: !!(label && labelPosition === "inside"), children: label }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                value,
+                disabled,
+                onFocus: () => !disabled && setState("selected"),
+                onBlur: () => !disabled && setState("default"),
+                onChange: handleInputChange,
+                ref,
+                ...rest
+              }
+            )
+          ]
         }
       ),
-      text,
-      onDeleteClick ? /* @__PURE__ */ jsxRuntime.jsx(P, { size: 12, onClick: onDeleteClick, cursor: "pointer" }) : null
+      description && /* @__PURE__ */ jsxRuntime.jsx(Description, { children: description })
     ] });
   }
 );
-Tag.displayName = "Tag";
+Input.displayName = "Input";
+const StyledTextAreaWrapper = styled(ark.div, inputRecipe);
+const StyledLabel = styled(ark.label, labelRecipe);
+const TextLengthIndicator = ({ count, limit, disabled }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ark.span,
+    {
+      className: cx(
+        inputSlotRecipe().textLengthIndicator,
+        css$1({
+          color: disabled ? "content.neutral.disabled" : "content.neutral.subtlest"
+        })
+      ),
+      children: `${count}${limit ? ` / ${limit}` : ""}`
+    }
+  );
+};
+const Textarea = React.forwardRef(
+  ({
+    value,
+    required = false,
+    disabled = false,
+    label,
+    description,
+    labelPosition = "outside",
+    textLimit,
+    showTextCount = false,
+    isTextArea,
+    color,
+    radius,
+    variant,
+    onChange,
+    className,
+    ...rest
+  }, ref) => {
+    const [state, setState] = React.useState(disabled ? "disabled" : "default");
+    React.useEffect(() => {
+      setState(disabled ? "disabled" : "default");
+    }, [disabled]);
+    const handleTextareaChange = (e) => {
+      if (disabled) return;
+      const value2 = e.target.value;
+      if (textLimit && value2.length > textLimit) return;
+      setState(value2 ? "selected" : "default");
+      onChange == null ? void 0 : onChange(e);
+      e.target.scrollTop = e.target.scrollHeight;
+    };
+    const Label = ({ visible, children }) => {
+      return visible ? /* @__PURE__ */ jsxRuntime.jsxs(StyledLabel, { state, color, radius, children: [
+        children,
+        required && /* @__PURE__ */ jsxRuntime.jsx(RequiredStar, {})
+      ] }) : null;
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(VStack$1, { gap: 1, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Label, { visible: !!(label && labelPosition === "outside"), children: label }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        StyledTextAreaWrapper,
+        {
+          isTextArea: true,
+          state,
+          color,
+          radius,
+          variant,
+          className: cx(css$1({ position: "relative", display: "flex", flexDirection: "column", gap: 1 }), className),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Label, { visible: !!(label && labelPosition === "inside"), children: label }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "textarea",
+              {
+                value,
+                disabled,
+                onChange: handleTextareaChange,
+                onFocus: () => !disabled && setState("selected"),
+                onBlur: () => !disabled && setState("default"),
+                ref,
+                ...rest
+              }
+            ),
+            showTextCount && /* @__PURE__ */ jsxRuntime.jsx(TextLengthIndicator, { count: value.length, limit: textLimit, disabled })
+          ]
+        }
+      ),
+      description && /* @__PURE__ */ jsxRuntime.jsx(Description, { children: description })
+    ] });
+  }
+);
+Textarea.displayName = "Textarea";
 function definePreset(preset2) {
   return preset2;
 }
@@ -9250,12 +9659,14 @@ exports.Grid = Grid2;
 exports.GridItem = GridItem2;
 exports.HStack = HStack2;
 exports.IconButton = index;
+exports.Input = Input;
 exports.Navigation = Navigation;
 exports.Portal = Portal;
 exports.Spinner = Spinner;
 exports.Stack = Stack2;
 exports.Tag = Tag;
 exports.Text = Text;
+exports.TextArea = Textarea;
 exports.VStack = VStack2;
 exports.preset = preset;
 //# sourceMappingURL=index.cjs.map