@nation-a/ui 0.8.1 → 0.9.0

package/dist/index.js

@@ -4814,7 +4814,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(
@@ -4843,7 +4843,7 @@ const Dialog = {
   Trigger: Trigger$1,
   Content,
   Title,
-  Description,
+  Description: Description$1,
   Positioner,
   Header,
   Footer,
@@ -8754,7 +8754,8 @@ const tagRecipe = cva({
     textStyle: "label.md",
     height: "fit-content",
     width: "fit-content",
-    cursor: "default"
+    cursor: "default",
+    outline: "none"
   },
   variants: {
     color: {
@@ -8890,29 +8891,389 @@ function P({ size: C = 24, color: n = "currentColor", ...o }) {
     }
   );
 }
-const Tag = forwardRef(
-  ({ color, background, radius, imageSrc, text, onDeleteClick, ...rest }, ref) => {
-    const StyledTag = styled(ark.div, tagRecipe);
-    return /* @__PURE__ */ jsxs(StyledTag, { color, background, radius, avatar: !!imageSrc, ref, ...rest, children: [
-      imageSrc && /* @__PURE__ */ jsx(
-        styled.img,
+const Tag = forwardRef(({ imageSrc, text, onDeleteClick, ...rest }, ref) => {
+  const StyledTag = styled(ark.div, tagRecipe);
+  return /* @__PURE__ */ jsxs(StyledTag, { avatar: !!imageSrc, ref, ...rest, children: [
+    imageSrc ? /* @__PURE__ */ jsx(
+      styled.img,
+      {
+        src: imageSrc,
+        width: 8,
+        height: 8,
+        className: css$1({ borderRadius: "full", overflow: "hidden" }),
+        alt: "avatar thumbnail"
+      }
+    ) : null,
+    text,
+    onDeleteClick ? /* @__PURE__ */ jsx(P, { size: 12, onClick: onDeleteClick, cursor: "pointer" }) : null
+  ] });
+});
+Tag.displayName = "Tag";
+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__ */ jsx(ark.span, { className: css$1({ color: "content.danger.default", paddingLeft: 1 }), children: "*" });
+const Description = ({ children }) => /* @__PURE__ */ jsx(ark.span, { className: css$1({ textStyle: "label.sm", color: "content.neutral.subtle", paddingLeft: 1, width: "100%", textAlign: "start" }), children });
+const Input = forwardRef(({ value, required, disabled, label, description, labelPosition = "outside", textLimit, variant, color, radius, onChange, className, ...rest }, ref) => {
+  const [state, setState] = useState(disabled ? "disabled" : "default");
+  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__ */ jsxs(StyledLabel$1, { state, color, radius, children: [
+      children,
+      required && /* @__PURE__ */ jsx(RequiredStar, {})
+    ] }) : null;
+  };
+  return /* @__PURE__ */ jsxs(VStack$1, { gap: 1, children: [
+    /* @__PURE__ */ jsx(Label, { visible: !!(label && labelPosition === "outside"), children: label }),
+    /* @__PURE__ */ jsxs(StyledInputWrapper, { state, variant, color, radius, className: cx(css$1({ display: "flex", flexDirection: "column", gap: 1 }), className), children: [
+      /* @__PURE__ */ jsx(Label, { visible: !!(label && labelPosition === "inside"), children: label }),
+      /* @__PURE__ */ jsx(
+        "input",
         {
-          src: imageSrc,
-          css: {
-            width: "8",
-            height: "8",
-            borderRadius: "full",
-            overflow: "hidden"
-          },
-          alt: "avatar thumbnail"
+          value,
+          disabled,
+          onFocus: () => !disabled && setState("selected"),
+          onBlur: () => !disabled && setState("default"),
+          onChange: handleInputChange,
+          ref,
+          ...rest
+        }
+      )
+    ] }),
+    description && /* @__PURE__ */ jsx(Description, { children: description })
+  ] });
+});
+Input.displayName = "Input";
+const StyledTextAreaWrapper = styled(ark.div, inputRecipe);
+const StyledLabel = styled(ark.label, labelRecipe);
+const TextLengthIndicator = ({ count, limit, disabled }) => {
+  return /* @__PURE__ */ jsx(
+    ark.span,
+    {
+      className: css$1({
+        display: "inline-block",
+        width: "100%",
+        textAlign: "end",
+        paddingRight: 1,
+        marginTop: -0.5,
+        textStyle: "label.sm",
+        color: disabled ? "content.neutral.disabled" : "content.neutral.subtlest"
+      }),
+      children: `${count}${limit ? ` / ${limit}` : ""}`
+    }
+  );
+};
+const Textarea = forwardRef(
+  ({
+    value,
+    required = false,
+    disabled = false,
+    label,
+    description,
+    labelPosition = "outside",
+    textLimit,
+    showTextCount = false,
+    isTextArea,
+    color,
+    radius,
+    variant,
+    onChange,
+    className,
+    ...rest
+  }, ref) => {
+    const [state, setState] = useState(disabled ? "disabled" : "default");
+    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__ */ jsxs(StyledLabel, { state, color, radius, children: [
+        children,
+        required && /* @__PURE__ */ jsx(RequiredStar, {})
+      ] }) : null;
+    };
+    return /* @__PURE__ */ jsxs(VStack$1, { gap: 1, children: [
+      /* @__PURE__ */ jsx(Label, { visible: !!(label && labelPosition === "outside"), children: label }),
+      /* @__PURE__ */ jsxs(
+        StyledTextAreaWrapper,
+        {
+          isTextArea: true,
+          state,
+          color,
+          radius,
+          variant,
+          className: cx(css$1({ position: "relative", display: "flex", flexDirection: "column", gap: 1 }), className),
+          children: [
+            /* @__PURE__ */ jsx(Label, { visible: !!(label && labelPosition === "inside"), children: label }),
+            /* @__PURE__ */ jsx(
+              "textarea",
+              {
+                value,
+                disabled,
+                onChange: handleTextareaChange,
+                onFocus: () => !disabled && setState("selected"),
+                onBlur: () => !disabled && setState("default"),
+                ref,
+                ...rest
+              }
+            ),
+            showTextCount && /* @__PURE__ */ jsx(TextLengthIndicator, { count: value.length, limit: textLimit, disabled })
+          ]
         }
       ),
-      text,
-      onDeleteClick ? /* @__PURE__ */ jsx(P, { size: 12, onClick: onDeleteClick, cursor: "pointer" }) : null
+      description && /* @__PURE__ */ jsx(Description, { children: description })
     ] });
   }
 );
-Tag.displayName = "Tag";
+Textarea.displayName = "Textarea";
 function definePreset(preset2) {
   return preset2;
 }
@@ -9233,12 +9594,14 @@ export {
   GridItem2 as GridItem,
   HStack2 as HStack,
   index as IconButton,
+  Input,
   Navigation,
   Portal,
   Spinner,
   Stack2 as Stack,
   Tag,
   Text,
+  Textarea as TextArea,
   VStack2 as VStack,
   preset
 };