@nation-a/ui 0.9.0 → 0.9.1

package/dist/index.cjs

@@ -8927,6 +8927,31 @@ const Tag = React.forwardRef(({ imageSrc, text, onDeleteClick, ...rest }, ref) =
   ] });
 });
 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",
@@ -9161,47 +9186,73 @@ const labelRecipe = cva({
 });
 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",
+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,
         {
-          value,
-          disabled,
-          onFocus: () => !disabled && setState("selected"),
-          onBlur: () => !disabled && setState("default"),
-          onChange: handleInputChange,
-          ref,
-          ...rest
+          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
+              }
+            )
+          ]
         }
-      )
-    ] }),
-    description && /* @__PURE__ */ jsxRuntime.jsx(Description, { children: description })
-  ] });
-});
+      ),
+      description && /* @__PURE__ */ jsxRuntime.jsx(Description, { children: description })
+    ] });
+  }
+);
 Input.displayName = "Input";
 const StyledTextAreaWrapper = styled(ark.div, inputRecipe);
 const StyledLabel = styled(ark.label, labelRecipe);
@@ -9209,15 +9260,12 @@ 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"
-      }),
+      className: cx(
+        inputSlotRecipe().textLengthIndicator,
+        css$1({
+          color: disabled ? "content.neutral.disabled" : "content.neutral.subtlest"
+        })
+      ),
       children: `${count}${limit ? ` / ${limit}` : ""}`
     }
   );