@rojaostudio/ds 1.0.1 → 1.0.2

package/dist/components/setting-row.js

@@ -1,4 +1,5 @@
 import "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 function SettingRow({
   label,
   description,
@@ -12,7 +13,16 @@ function SettingRow({
   const cols = controlWidth === "full" ? "" : controlWidth === "fill" ? "sm:grid-cols-[minmax(0,1fr)_minmax(0,20rem)]" : "sm:grid-cols-[1fr_auto]";
   const alignCls = align === "start" ? "sm:items-start" : "sm:items-center";
   const LabelTag = htmlFor ? "label" : "div";
-  return /* @__PURE__ */ React.createElement("div", { className: ["grid grid-cols-1 gap-x-6 gap-y-3 py-4", cols, alignCls, className].filter(Boolean).join(" ") }, /* @__PURE__ */ React.createElement("div", { className: "flex items-start gap-3 min-w-0" }, icon && /* @__PURE__ */ React.createElement("div", { className: "shrink-0 text-fg-muted mt-0.5" }, icon), /* @__PURE__ */ React.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React.createElement(LabelTag, { htmlFor, className: "block text-sm font-medium text-fg-primary" }, label), description && /* @__PURE__ */ React.createElement("div", { className: "text-sm text-fg-muted mt-0.5 leading-snug" }, description))), /* @__PURE__ */ React.createElement("div", { className: controlWidth === "auto" ? "sm:justify-self-end" : "" }, control));
+  return /* @__PURE__ */ jsxs("div", { className: ["grid grid-cols-1 gap-x-6 gap-y-3 py-4", cols, alignCls, className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 min-w-0", children: [
+      icon && /* @__PURE__ */ jsx("div", { className: "shrink-0 text-fg-muted mt-0.5", children: icon }),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx(LabelTag, { htmlFor, className: "block text-sm font-medium text-fg-primary", children: label }),
+        description && /* @__PURE__ */ jsx("div", { className: "text-sm text-fg-muted mt-0.5 leading-snug", children: description })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: controlWidth === "auto" ? "sm:justify-self-end" : "", children: control })
+  ] });
 }
 export {
   SettingRow

package/dist/components/settings-list.js

@@ -1,4 +1,5 @@
 import "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { SectionHeader } from "./section-header.js";
 function SettingsList({
   title,
@@ -8,14 +9,17 @@ function SettingsList({
   children,
   className = ""
 }) {
-  const list = /* @__PURE__ */ React.createElement(
+  const list = /* @__PURE__ */ jsx(
     "div",
     {
-      className: framed ? "rounded-(--radius-card) border border-stroke-default bg-surface-default px-4 [&>*]:border-t [&>*]:border-stroke-default [&>*:first-child]:border-t-0" : "[&>*]:border-t [&>*]:border-stroke-default [&>*:first-child]:border-t-0"
-    },
-    children
+      className: framed ? "rounded-(--radius-card) border border-stroke-default bg-surface-default px-4 [&>*]:border-t [&>*]:border-stroke-default [&>*:first-child]:border-t-0" : "[&>*]:border-t [&>*]:border-stroke-default [&>*:first-child]:border-t-0",
+      children
+    }
   );
-  return /* @__PURE__ */ React.createElement("section", { className: ["space-y-3", className].filter(Boolean).join(" ") }, title && /* @__PURE__ */ React.createElement(SectionHeader, { title, description, action }), list);
+  return /* @__PURE__ */ jsxs("section", { className: ["space-y-3", className].filter(Boolean).join(" "), children: [
+    title && /* @__PURE__ */ jsx(SectionHeader, { title, description, action }),
+    list
+  ] });
 }
 export {
   SettingsList

package/dist/components/skeleton.js

@@ -3,6 +3,7 @@ import {
   __spreadProps,
   __spreadValues
 } from "../chunk-ORMEWXMH.js";
+import { jsx } from "react/jsx-runtime";
 const SKELETON_VARIANTS = {
   text: "h-4 w-full",
   title: "h-6 w-3/5",
@@ -33,16 +34,16 @@ function Skeleton(_a) {
     SKELETON_VARIANTS[variant],
     className
   ].filter(Boolean).join(" ");
-  if (count === 1) return /* @__PURE__ */ React.createElement("div", __spreadValues({ className: classes }, props));
-  return /* @__PURE__ */ React.createElement("div", { className: ["flex flex-col", GAP[gap]].join(" ") }, Array.from({ length: count }).map((_, i) => /* @__PURE__ */ React.createElement(
+  if (count === 1) return /* @__PURE__ */ jsx("div", __spreadValues({ className: classes }, props));
+  return /* @__PURE__ */ jsx("div", { className: ["flex flex-col", GAP[gap]].join(" "), children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsx(
     "div",
     __spreadProps(__spreadValues({
-      key: i,
       className: classes
     }, i === 0 ? props : {}), {
       style: variant === "text" && i === count - 1 ? { width: "70%" } : void 0
-    })
-  )));
+    }),
+    i
+  )) });
 }
 export {
   Skeleton

package/dist/components/slider.js

@@ -3,6 +3,7 @@ import {
   __objRest,
   __spreadValues
 } from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useId } from "react";
 const TRACK_HEIGHT = { sm: 4, md: 6 };
 const THUMB_SIZE = { sm: 14, md: 18 };
@@ -35,44 +36,57 @@ const Slider = forwardRef(function Slider2(_a, ref) {
   const id = useId();
   const pct = (value - min) / (max - min) * 100;
   const fmt = formatValue != null ? formatValue : ((v) => String(v));
-  return /* @__PURE__ */ React.createElement("div", { className: ["flex flex-col gap-2", className].join(" ") }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React.createElement("div", { className: "relative flex-1 flex items-center", style: { height: THUMB_SIZE[size] } }, /* @__PURE__ */ React.createElement(
-    "input",
-    __spreadValues({
-      ref,
-      id,
-      type: "range",
-      min,
-      max,
-      step,
-      value,
-      disabled,
-      onChange: (e) => onChange(Number(e.target.value)),
-      className: [
-        "rojao-slider absolute inset-0 w-full bg-transparent appearance-none cursor-pointer",
-        "focus:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus focus-visible:ring-offset-2 focus-visible:rounded-full",
-        "disabled:cursor-not-allowed disabled:opacity-50"
-      ].join(" "),
-      style: {
-        ["--rojao-slider-pct"]: `${pct}%`,
-        ["--rojao-slider-track-h"]: `${TRACK_HEIGHT[size]}px`,
-        ["--rojao-slider-thumb-size"]: `${THUMB_SIZE[size]}px`
-      }
-    }, rest)
-  ), /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      "aria-hidden": true,
-      className: "absolute inset-x-0 rounded-full bg-stroke-default pointer-events-none",
-      style: { height: TRACK_HEIGHT[size] }
-    }
-  ), /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      "aria-hidden": true,
-      className: "absolute left-0 rounded-full bg-brand-primary pointer-events-none",
-      style: { height: TRACK_HEIGHT[size], width: `${pct}%` }
-    }
-  )), showValue && /* @__PURE__ */ React.createElement("span", { className: "text-label font-medium text-fg-primary tabular-nums shrink-0 min-w-[3ch] text-right" }, fmt(value))), showRange && /* @__PURE__ */ React.createElement("div", { className: "flex justify-between text-[11px] font-mono text-fg-muted" }, /* @__PURE__ */ React.createElement("span", null, fmt(min)), /* @__PURE__ */ React.createElement("span", null, fmt(max))));
+  return /* @__PURE__ */ jsxs("div", { className: ["flex flex-col gap-2", className].join(" "), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative flex-1 flex items-center", style: { height: THUMB_SIZE[size] }, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          __spreadValues({
+            ref,
+            id,
+            type: "range",
+            min,
+            max,
+            step,
+            value,
+            disabled,
+            onChange: (e) => onChange(Number(e.target.value)),
+            className: [
+              "rojao-slider absolute inset-0 w-full bg-transparent appearance-none cursor-pointer",
+              "focus:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus focus-visible:ring-offset-2 focus-visible:rounded-full",
+              "disabled:cursor-not-allowed disabled:opacity-50"
+            ].join(" "),
+            style: {
+              ["--rojao-slider-pct"]: `${pct}%`,
+              ["--rojao-slider-track-h"]: `${TRACK_HEIGHT[size]}px`,
+              ["--rojao-slider-thumb-size"]: `${THUMB_SIZE[size]}px`
+            }
+          }, rest)
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": true,
+            className: "absolute inset-x-0 rounded-full bg-stroke-default pointer-events-none",
+            style: { height: TRACK_HEIGHT[size] }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": true,
+            className: "absolute left-0 rounded-full bg-brand-primary pointer-events-none",
+            style: { height: TRACK_HEIGHT[size], width: `${pct}%` }
+          }
+        )
+      ] }),
+      showValue && /* @__PURE__ */ jsx("span", { className: "text-label font-medium text-fg-primary tabular-nums shrink-0 min-w-[3ch] text-right", children: fmt(value) })
+    ] }),
+    showRange && /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-[11px] font-mono text-fg-muted", children: [
+      /* @__PURE__ */ jsx("span", { children: fmt(min) }),
+      /* @__PURE__ */ jsx("span", { children: fmt(max) })
+    ] })
+  ] });
 });
 export {
   Slider

package/dist/components/spinner.js

@@ -1,4 +1,5 @@
 import "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 const SIZE = {
   xs: "size-3",
   sm: "size-4",
@@ -18,18 +19,23 @@ function Spinner({
   label = "Carregando\u2026",
   className = ""
 }) {
-  return /* @__PURE__ */ React.createElement("span", { role: "status", "aria-label": label, className: "inline-flex" }, /* @__PURE__ */ React.createElement(
-    "svg",
-    {
-      className: ["animate-spin", SIZE[size], COLOR[color], className].join(" "),
-      xmlns: "http://www.w3.org/2000/svg",
-      fill: "none",
-      viewBox: "0 0 24 24",
-      "aria-hidden": "true"
-    },
-    /* @__PURE__ */ React.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "3" }),
-    /* @__PURE__ */ React.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
-  ), /* @__PURE__ */ React.createElement("span", { className: "sr-only" }, label));
+  return /* @__PURE__ */ jsxs("span", { role: "status", "aria-label": label, className: "inline-flex", children: [
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        className: ["animate-spin", SIZE[size], COLOR[color], className].join(" "),
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        "aria-hidden": "true",
+        children: [
+          /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "3" }),
+          /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "sr-only", children: label })
+  ] });
 }
 export {
   Spinner

package/dist/components/step-progress.js

@@ -1,22 +1,23 @@
 import "../chunk-ORMEWXMH.js";
+import { jsx } from "react/jsx-runtime";
 function StepProgress({ current, total, className = "" }) {
   const pct = Math.round((current + 1) / total * 100);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       className: ["w-full h-1.5 rounded-full overflow-hidden [background:var(--border-subtle)]", className].join(" "),
       role: "progressbar",
       "aria-valuenow": current + 1,
       "aria-valuemin": 1,
-      "aria-valuemax": total
-    },
-    /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: "h-full rounded-full transition-all duration-300 ease-out [background:var(--brand-primary)]",
-        style: { width: `${pct}%` }
-      }
-    )
+      "aria-valuemax": total,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "h-full rounded-full transition-all duration-300 ease-out [background:var(--brand-primary)]",
+          style: { width: `${pct}%` }
+        }
+      )
+    }
   );
 }
 export {

package/dist/components/summary-bar.js

@@ -1,4 +1,5 @@
 import "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 const TONE_CLASS = {
   default: "[color:var(--summary-bar-value)]",
   positive: "[color:var(--summary-bar-value-positive)]",
@@ -8,7 +9,7 @@ const TONE_CLASS = {
 };
 function SummaryBar({ items, className }) {
   const odd = items.length % 2 === 1;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       className: [
@@ -17,36 +18,40 @@ function SummaryBar({ items, className }) {
         "[background:var(--summary-bar-divider)] sm:[background:var(--summary-bar-bg)]",
         "[border-color:var(--summary-bar-border)]",
         className != null ? className : ""
-      ].join(" ")
-    },
-    items.map((item, i) => {
-      var _a;
-      const spanFull = odd && i === items.length - 1;
-      return /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          key: i,
-          className: [
-            "flex flex-1 flex-col gap-1.5 px-4 py-3 [background:var(--summary-bar-bg)]",
-            "min-w-0 sm:min-w-[7.5rem] sm:whitespace-nowrap",
-            spanFull ? "col-span-2 sm:col-span-1" : "",
-            i > 0 ? "sm:[border-left:1px_solid_var(--summary-bar-divider)]" : ""
-          ].join(" ")
-        },
-        /* @__PURE__ */ React.createElement("span", { className: "text-[11px] font-medium uppercase tracking-wide [color:var(--summary-bar-label)]" }, item.label),
-        /* @__PURE__ */ React.createElement(
-          "span",
+      ].join(" "),
+      children: items.map((item, i) => {
+        var _a;
+        const spanFull = odd && i === items.length - 1;
+        return /* @__PURE__ */ jsxs(
+          "div",
           {
             className: [
-              "flex items-center gap-1.5 text-heading-sm font-semibold leading-none tabular-nums",
-              TONE_CLASS[(_a = item.tone) != null ? _a : "default"]
-            ].join(" ")
+              "flex flex-1 flex-col gap-1.5 px-4 py-3 [background:var(--summary-bar-bg)]",
+              "min-w-0 sm:min-w-[7.5rem] sm:whitespace-nowrap",
+              spanFull ? "col-span-2 sm:col-span-1" : "",
+              i > 0 ? "sm:[border-left:1px_solid_var(--summary-bar-divider)]" : ""
+            ].join(" "),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium uppercase tracking-wide [color:var(--summary-bar-label)]", children: item.label }),
+              /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  className: [
+                    "flex items-center gap-1.5 text-heading-sm font-semibold leading-none tabular-nums",
+                    TONE_CLASS[(_a = item.tone) != null ? _a : "default"]
+                  ].join(" "),
+                  children: [
+                    item.icon,
+                    item.value
+                  ]
+                }
+              )
+            ]
           },
-          item.icon,
-          item.value
-        )
-      );
-    })
+          i
+        );
+      })
+    }
   );
 }
 export {

package/dist/components/table.js

@@ -1,19 +1,21 @@
 import {
   __objRest,
+  __spreadProps,
   __spreadValues
 } from "../chunk-ORMEWXMH.js";
+import { jsx } from "react/jsx-runtime";
 const ALIGN = { left: "text-left", right: "text-right", center: "text-center" };
 function Table(_a) {
   var _b = _a, { className = "", children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ React.createElement("table", __spreadValues({ className: ["w-full text-label", className].join(" ") }, props), children);
+  return /* @__PURE__ */ jsx("table", __spreadProps(__spreadValues({ className: ["w-full text-label", className].join(" ") }, props), { children }));
 }
 function TableHead(_c) {
   var _d = _c, { className = "", children } = _d, props = __objRest(_d, ["className", "children"]);
-  return /* @__PURE__ */ React.createElement("thead", __spreadValues({ className: className || void 0 }, props), children);
+  return /* @__PURE__ */ jsx("thead", __spreadProps(__spreadValues({ className: className || void 0 }, props), { children }));
 }
 function TableBody(_e) {
   var _f = _e, { className = "", children } = _f, props = __objRest(_f, ["className", "children"]);
-  return /* @__PURE__ */ React.createElement("tbody", __spreadValues({ className: ["divide-y divide-stroke-default", className].join(" ") }, props), children);
+  return /* @__PURE__ */ jsx("tbody", __spreadProps(__spreadValues({ className: ["divide-y divide-stroke-default", className].join(" ") }, props), { children }));
 }
 function TableRow(_g) {
   var _h = _g, { header, noHover, className = "", children, onClick } = _h, props = __objRest(_h, ["header", "noHover", "className", "children", "onClick"]);
@@ -31,34 +33,36 @@ function TableRow(_g) {
       }
     }
   } : {};
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "tr",
-    __spreadValues(__spreadValues({
+    __spreadProps(__spreadValues(__spreadValues({
       className: [base, className].filter(Boolean).join(" "),
       onClick
-    }, interactiveProps), props),
-    children
+    }, interactiveProps), props), {
+      children
+    })
   );
 }
 function Th(_i) {
   var _j = _i, { align = "left", className = "", children } = _j, props = __objRest(_j, ["align", "className", "children"]);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "th",
-    __spreadValues({
+    __spreadProps(__spreadValues({
       className: [
         "px-5 py-3 text-caption font-semibold text-fg-muted uppercase tracking-wide whitespace-nowrap",
         ALIGN[align],
         className
       ].filter(Boolean).join(" ")
-    }, props),
-    children
+    }, props), {
+      children
+    })
   );
 }
 function Td(_k) {
   var _l = _k, { align = "left", muted, bold, className = "", children } = _l, props = __objRest(_l, ["align", "muted", "bold", "className", "children"]);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "td",
-    __spreadValues({
+    __spreadProps(__spreadValues({
       className: [
         "px-5 py-3",
         ALIGN[align],
@@ -66,8 +70,9 @@ function Td(_k) {
         bold ? "font-medium" : "",
         className
       ].filter(Boolean).join(" ")
-    }, props),
-    children
+    }, props), {
+      children
+    })
   );
 }
 export {

package/dist/components/textarea.js

@@ -3,6 +3,7 @@ import {
   __objRest,
   __spreadValues
 } from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useId, useEffect, useRef } from "react";
 const Textarea = forwardRef(function Textarea2(_a, ref) {
   var _b = _a, {
@@ -65,30 +66,45 @@ const Textarea = forwardRef(function Textarea2(_a, ref) {
     if (autoResize) adjust();
   }
   const currentLength = typeof value === "string" ? value.length : typeof defaultValue === "string" ? defaultValue.length : 0;
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-1.5 w-full" }, label && /* @__PURE__ */ React.createElement("label", { htmlFor: textareaId, className: "inline-flex items-center gap-1 text-label font-medium text-fg-primary" }, /* @__PURE__ */ React.createElement("span", null, label), required && /* @__PURE__ */ React.createElement("span", { className: "text-danger", "aria-label": "obrigat\xF3rio" }, "*"), optional && !required && /* @__PURE__ */ React.createElement("span", { className: "text-fg-muted font-normal" }, "(opcional)")), /* @__PURE__ */ React.createElement(
-    "textarea",
-    __spreadValues({
-      ref: setRef,
-      id: textareaId,
-      rows: rows != null ? rows : minRows,
-      value,
-      defaultValue,
-      maxLength,
-      required,
-      onChange: handleChange,
-      className: [
-        "w-full px-3 py-2 rounded-(--radius-control) text-label",
-        "bg-surface-default text-fg-primary placeholder:text-fg-placeholder",
-        "border transition-colors outline-none",
-        autoResize ? "resize-none overflow-hidden" : "resize-y",
-        error ? "border-danger focus:border-danger focus:ring-2 focus:ring-danger/20" : "border-stroke-control focus:border-stroke-focus focus:ring-2 focus:ring-stroke-focus/20",
-        "disabled:opacity-50 disabled:cursor-not-allowed disabled:resize-none",
-        className
-      ].filter(Boolean).join(" "),
-      "aria-invalid": error ? true : void 0,
-      "aria-describedby": error ? `${textareaId}-error` : helper ? `${textareaId}-helper` : void 0
-    }, props)
-  ), (error || helper || showCount && maxLength) && /* @__PURE__ */ React.createElement("div", { className: "flex items-start justify-between gap-3" }, error ? /* @__PURE__ */ React.createElement("p", { id: `${textareaId}-error`, className: "text-caption text-danger-text flex-1" }, error) : helper ? /* @__PURE__ */ React.createElement("p", { id: `${textareaId}-helper`, className: "text-caption text-fg-muted flex-1" }, helper) : /* @__PURE__ */ React.createElement("span", { className: "flex-1" }), showCount && maxLength && /* @__PURE__ */ React.createElement("span", { className: "text-caption text-fg-muted tabular-nums shrink-0" }, currentLength, "/", maxLength)));
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5 w-full", children: [
+    label && /* @__PURE__ */ jsxs("label", { htmlFor: textareaId, className: "inline-flex items-center gap-1 text-label font-medium text-fg-primary", children: [
+      /* @__PURE__ */ jsx("span", { children: label }),
+      required && /* @__PURE__ */ jsx("span", { className: "text-danger", "aria-label": "obrigat\xF3rio", children: "*" }),
+      optional && !required && /* @__PURE__ */ jsx("span", { className: "text-fg-muted font-normal", children: "(opcional)" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "textarea",
+      __spreadValues({
+        ref: setRef,
+        id: textareaId,
+        rows: rows != null ? rows : minRows,
+        value,
+        defaultValue,
+        maxLength,
+        required,
+        onChange: handleChange,
+        className: [
+          "w-full px-3 py-2 rounded-(--radius-control) text-label",
+          "bg-surface-default text-fg-primary placeholder:text-fg-placeholder",
+          "border transition-colors outline-none",
+          autoResize ? "resize-none overflow-hidden" : "resize-y",
+          error ? "border-danger focus:border-danger focus:ring-2 focus:ring-danger/20" : "border-stroke-control focus:border-stroke-focus focus:ring-2 focus:ring-stroke-focus/20",
+          "disabled:opacity-50 disabled:cursor-not-allowed disabled:resize-none",
+          className
+        ].filter(Boolean).join(" "),
+        "aria-invalid": error ? true : void 0,
+        "aria-describedby": error ? `${textareaId}-error` : helper ? `${textareaId}-helper` : void 0
+      }, props)
+    ),
+    (error || helper || showCount && maxLength) && /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+      error ? /* @__PURE__ */ jsx("p", { id: `${textareaId}-error`, className: "text-caption text-danger-text flex-1", children: error }) : helper ? /* @__PURE__ */ jsx("p", { id: `${textareaId}-helper`, className: "text-caption text-fg-muted flex-1", children: helper }) : /* @__PURE__ */ jsx("span", { className: "flex-1" }),
+      showCount && maxLength && /* @__PURE__ */ jsxs("span", { className: "text-caption text-fg-muted tabular-nums shrink-0", children: [
+        currentLength,
+        "/",
+        maxLength
+      ] })
+    ] })
+  ] });
 });
 export {
   Textarea

package/dist/components/themed.d.ts

@@ -29,7 +29,7 @@ interface ThemedProps extends HTMLAttributes<HTMLDivElement> {
  *   <Themed theme="pet" dark>…</Themed>
  *   <Themed theme="cafe" asChild><main>…</main></Themed>
  *
- * Pair with the brand sheet (ds.rojao.ai/themes/<slug>.css) + base.css.
+ * Pair with your theme sheet + base.css.
  */
 declare function Themed({ theme, dark, asChild, className, children, ...rest }: ThemedProps): react.JSX.Element;
 

package/dist/components/themed.js

@@ -3,6 +3,7 @@ import {
   __spreadProps,
   __spreadValues
 } from "../chunk-ORMEWXMH.js";
+import { jsx } from "react/jsx-runtime";
 import { cloneElement, isValidElement } from "react";
 const themeClass = (theme, dark = false) => `theme-${theme}${dark ? " dark" : ""}`;
 function Themed(_a) {
@@ -14,7 +15,7 @@ function Themed(_a) {
       className: [cls, child.props.className, className].filter(Boolean).join(" ")
     }));
   }
-  return /* @__PURE__ */ React.createElement("div", __spreadValues({ className: [cls, className].filter(Boolean).join(" ") }, rest), children);
+  return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({ className: [cls, className].filter(Boolean).join(" ") }, rest), { children }));
 }
 export {
   Themed,