@nation-a/ui 0.8.0 → 0.9.0

package/dist/index.cjs

@@ -4681,7 +4681,7 @@ const textRecipe = cva({
   }
 });
 const Text = React.forwardRef((props, ref) => {
-  const { variant = "body.md", font = "notoSans", children, ...rest } = props;
+  const { variant = "body.md", font, children, ...rest } = props;
   const textType = (variant == null ? void 0 : variant.split(".")[0]) || "body";
   const componentMap = {
     display: styled("h1", textRecipe),
@@ -4691,7 +4691,7 @@ const Text = React.forwardRef((props, ref) => {
     label: styled("span", textRecipe)
   };
   const TextComponent = componentMap[textType];
-  return /* @__PURE__ */ jsxRuntime.jsx(TextComponent, { ref, css: { textStyle: variant, fontFamily: font }, ...rest, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(TextComponent, { ref, variant, font, ...rest, children });
 });
 Text.displayName = "Text";
 const shouldForwardProp = (prop, variantKeys, options = {}) => {
@@ -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,389 @@ 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 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: css$1({ color: "content.danger.default", paddingLeft: 1 }), children: "*" });
+const Description = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(ark.span, { className: css$1({ textStyle: "label.sm", color: "content.neutral.subtle", paddingLeft: 1, width: "100%", textAlign: "start" }), 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, { 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",
         {
-          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__ */ jsxRuntime.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__ */ jsxRuntime.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 = 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 })
+          ]
         }
       ),
-      text,
-      onDeleteClick ? /* @__PURE__ */ jsxRuntime.jsx(P, { size: 12, onClick: onDeleteClick, cursor: "pointer" }) : null
+      description && /* @__PURE__ */ jsxRuntime.jsx(Description, { children: description })
     ] });
   }
 );
-Tag.displayName = "Tag";
+Textarea.displayName = "Textarea";
 function definePreset(preset2) {
   return preset2;
 }
@@ -8949,7 +9310,15 @@ function createProxy() {
   });
 }
 var defineTokens = /* @__PURE__ */ createProxy();
-const globalCss = defineGlobalStyles({});
+const globalCss = defineGlobalStyles({
+  "html, body": {
+    margin: 0,
+    padding: 0,
+    maxWidth: "100vw",
+    color: "content.neutral.default",
+    backgroundColor: "surface.base"
+  }
+});
 const keyframes = defineKeyframes({
   "fade-in": {
     from: { opacity: "0" },
@@ -9198,29 +9567,30 @@ const zIndex = defineTokens.zIndex({
   }
 });
 const tokens = defineTokens({
-  animations,
-  blurs,
-  borders,
   //   colors,
-  durations,
-  easings,
   //   fonts,
   //   fontSizes,
   //   fontWeights,
   //   letterSpacings,
   //   lineHeights,
   //   radii,
+  animations,
+  blurs,
+  borders,
+  durations,
+  easings,
   sizes,
-  // spacing,
   zIndex,
-  ...g.primitive
+  ...g.primitive,
+  spacing: {
+    ...spacing,
+    ...g.primitive.spacing
+  }
 });
 const preset = definePreset({
   name: "@nation-a/theme",
   conditions,
-  globalCss: {
-    ...globalCss
-  },
+  globalCss,
   theme: {
     extend: {
       breakpoints,
@@ -9241,12 +9611,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