@rojaostudio/ds 1.0.0 → 1.0.2

package/dist/components/phone-input.js

@@ -1,5 +1,6 @@
 "use client";
 import "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useId, useMemo, useState } from "react";
 import { usePhoneInput, defaultCountries, parseCountry, FlagImage } from "react-international-phone";
 import { Combobox } from "./combobox.js";
@@ -50,42 +51,60 @@ function PhoneInput({
         value: p.iso2,
         label: p.name,
         description: `+${p.dialCode}`,
-        icon: /* @__PURE__ */ React.createElement(FlagImage, { iso2: p.iso2, size: "18px" })
+        icon: /* @__PURE__ */ jsx(FlagImage, { iso2: p.iso2, size: "18px" })
       };
     }),
     []
   );
   const errorBorder = error ? "border-danger focus-within:border-danger focus-within:ring-2 focus-within:ring-danger/20" : "border-stroke-control focus-within:border-stroke-focus focus-within:ring-2 focus-within:ring-stroke-focus/20";
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-1.5 w-full" }, label && /* @__PURE__ */ React.createElement("label", { htmlFor: inputId, 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("div", { className: "flex items-stretch gap-2" }, /* @__PURE__ */ React.createElement("div", { className: "shrink-0" }, /* @__PURE__ */ React.createElement(
-    Combobox,
-    {
-      width: "hug",
-      options: countryOptions,
-      value: country.iso2,
-      onChange: (iso2) => {
-        if (iso2) setCountry(iso2);
-      },
-      placeholder: "Pa\xEDs",
-      "aria-label": "Pa\xEDs",
-      dropdownMinWidth: 272,
-      triggerContent: (sel) => {
-        var _a;
-        return /* @__PURE__ */ React.createElement("span", { className: "inline-flex items-center [&_svg]:size-4 [&_img]:rounded-(--radius-sm)" }, (_a = sel == null ? void 0 : sel.icon) != null ? _a : /* @__PURE__ */ React.createElement("span", { className: "text-fg-placeholder" }, "Pa\xEDs"));
-      }
-    }
-  )), /* @__PURE__ */ React.createElement("div", { className: ["flex-1 min-w-0 flex items-center rounded-(--radius-control) border bg-surface-default h-10 transition-colors", errorBorder].join(" ") }, /* @__PURE__ */ React.createElement("span", { className: "pl-3 pr-1.5 text-label text-fg-muted select-none shrink-0", "aria-hidden": true }, "+", country.dialCode), /* @__PURE__ */ React.createElement(
-    "input",
-    {
-      id: inputId,
-      ref: inputRef,
-      type: "tel",
-      value: inputValue,
-      onChange: handlePhoneValueChange,
-      placeholder,
-      "aria-invalid": error ? true : void 0,
-      className: "flex-1 min-w-0 bg-transparent pr-3 h-full text-label text-fg-primary placeholder:text-fg-placeholder outline-none"
-    }
-  ))), name && /* @__PURE__ */ React.createElement("input", { type: "hidden", name, value: displayValue }), (error || helper) && /* @__PURE__ */ React.createElement("p", { className: ["text-caption", error ? "text-danger-text" : "text-fg-muted"].join(" ") }, error != null ? error : helper));
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5 w-full", children: [
+    label && /* @__PURE__ */ jsxs("label", { htmlFor: inputId, 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__ */ jsxs("div", { className: "flex items-stretch gap-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx(
+        Combobox,
+        {
+          width: "hug",
+          options: countryOptions,
+          value: country.iso2,
+          onChange: (iso2) => {
+            if (iso2) setCountry(iso2);
+          },
+          placeholder: "Pa\xEDs",
+          "aria-label": "Pa\xEDs",
+          dropdownMinWidth: 272,
+          triggerContent: (sel) => {
+            var _a;
+            return /* @__PURE__ */ jsx("span", { className: "inline-flex items-center [&_svg]:size-4 [&_img]:rounded-(--radius-sm)", children: (_a = sel == null ? void 0 : sel.icon) != null ? _a : /* @__PURE__ */ jsx("span", { className: "text-fg-placeholder", children: "Pa\xEDs" }) });
+          }
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("div", { className: ["flex-1 min-w-0 flex items-center rounded-(--radius-control) border bg-surface-default h-10 transition-colors", errorBorder].join(" "), children: [
+        /* @__PURE__ */ jsxs("span", { className: "pl-3 pr-1.5 text-label text-fg-muted select-none shrink-0", "aria-hidden": true, children: [
+          "+",
+          country.dialCode
+        ] }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: inputId,
+            ref: inputRef,
+            type: "tel",
+            value: inputValue,
+            onChange: handlePhoneValueChange,
+            placeholder,
+            "aria-invalid": error ? true : void 0,
+            className: "flex-1 min-w-0 bg-transparent pr-3 h-full text-label text-fg-primary placeholder:text-fg-placeholder outline-none"
+          }
+        )
+      ] })
+    ] }),
+    name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: displayValue }),
+    (error || helper) && /* @__PURE__ */ jsx("p", { className: ["text-caption", error ? "text-danger-text" : "text-fg-muted"].join(" "), children: error != null ? error : helper })
+  ] });
 }
 export {
   PhoneInput

package/dist/components/pix-icon.js

@@ -1,22 +1,27 @@
 import {
   __objRest,
+  __spreadProps,
   __spreadValues
 } from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 function PixIcon(_a) {
   var _b = _a, { size = 16 } = _b, props = __objRest(_b, ["size"]);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "svg",
-    __spreadValues({
+    __spreadProps(__spreadValues({
       width: size,
       height: size,
       viewBox: "0 0 512 512",
       fill: "currentColor",
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true"
-    }, props),
-    /* @__PURE__ */ React.createElement("path", { d: "M242.4 292.5c5.4-5.4 14.7-5.4 20.1 0l77 77c14.2 14.2 33.1 22 53.1 22h15.1l-97.1 97.1c-30.3 30.3-79.5 30.3-109.8 0L103.3 391.2h9.3c20 0 38.9-7.8 53.1-22l76.7-76.7z" }),
-    /* @__PURE__ */ React.createElement("path", { d: "M262.5 218.9c-5.4 5.4-14.7 5.4-20.1 0l-76.7-76.7c-14.2-14.2-33.1-22-53.1-22h-9.3l97.4-97.4c30.3-30.3 79.5-30.3 109.8 0l97.1 97.1h-15.1c-20 0-38.9 7.8-53.1 22l-77 77z" }),
-    /* @__PURE__ */ React.createElement("path", { d: "M112.6 142.7c13.8 0 27.4 5.6 37.2 15.4l76.7 76.7c7.3 7.3 17 10.9 26.6 10.9s19.3-3.6 26.6-10.9l77-77c9.8-9.8 23.4-15.4 37.2-15.4h37.2l58.4 58.4c30.3 30.3 30.3 79.5 0 109.8l-58.4 58.4h-37.2c-13.8 0-27.4-5.6-37.2-15.4l-77-77c-14.2-14.2-39-14.2-53.2 0l-76.7 76.7c-9.8 9.8-23.4 15.4-37.2 15.4H75.4L17 310.7c-30.3-30.3-30.3-79.5 0-109.8l58.4-58.4h37.2z" })
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M242.4 292.5c5.4-5.4 14.7-5.4 20.1 0l77 77c14.2 14.2 33.1 22 53.1 22h15.1l-97.1 97.1c-30.3 30.3-79.5 30.3-109.8 0L103.3 391.2h9.3c20 0 38.9-7.8 53.1-22l76.7-76.7z" }),
+        /* @__PURE__ */ jsx("path", { d: "M262.5 218.9c-5.4 5.4-14.7 5.4-20.1 0l-76.7-76.7c-14.2-14.2-33.1-22-53.1-22h-9.3l97.4-97.4c30.3-30.3 79.5-30.3 109.8 0l97.1 97.1h-15.1c-20 0-38.9 7.8-53.1 22l-77 77z" }),
+        /* @__PURE__ */ jsx("path", { d: "M112.6 142.7c13.8 0 27.4 5.6 37.2 15.4l76.7 76.7c7.3 7.3 17 10.9 26.6 10.9s19.3-3.6 26.6-10.9l77-77c9.8-9.8 23.4-15.4 37.2-15.4h37.2l58.4 58.4c30.3 30.3 30.3 79.5 0 109.8l-58.4 58.4h-37.2c-13.8 0-27.4-5.6-37.2-15.4l-77-77c-14.2-14.2-39-14.2-53.2 0l-76.7 76.7c-9.8 9.8-23.4 15.4-37.2 15.4H75.4L17 310.7c-30.3-30.3-30.3-79.5 0-109.8l58.4-58.4h37.2z" })
+      ]
+    })
   );
 }
 export {

package/dist/components/popover.js

@@ -1,5 +1,6 @@
 "use client";
 import "../chunk-ORMEWXMH.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState, useId } from "react";
 import { createPortal } from "react-dom";
 function calcPosition(triggerRect, popRect, placement, offset) {
@@ -108,32 +109,35 @@ function Popover({
   }, [open, closeOnOutsideClick, closeOnEsc]);
   const close = () => setOpen(false);
   const toggle = () => setOpen(!open);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      ref: triggerRef,
-      onClick: toggle,
-      role: "none",
-      className: triggerClassName != null ? triggerClassName : "inline-block"
-    },
-    trigger
-  ), mounted && open && createPortal(
-    /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
       "div",
       {
-        ref: popRef,
-        id,
-        className: ["fixed z-[1000]", className].join(" "),
-        style: {
-          top: (_a = position == null ? void 0 : position.top) != null ? _a : -9999,
-          left: (_b = position == null ? void 0 : position.left) != null ? _b : -9999,
-          visibility: position ? "visible" : "hidden"
-        }
-      },
-      typeof children === "function" ? children({ close }) : children
+        ref: triggerRef,
+        onClick: toggle,
+        role: "none",
+        className: triggerClassName != null ? triggerClassName : "inline-block",
+        children: trigger
+      }
     ),
-    document.body
-  ));
+    mounted && open && createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: popRef,
+          id,
+          className: ["fixed z-[1000]", className].join(" "),
+          style: {
+            top: (_a = position == null ? void 0 : position.top) != null ? _a : -9999,
+            left: (_b = position == null ? void 0 : position.left) != null ? _b : -9999,
+            visibility: position ? "visible" : "hidden"
+          },
+          children: typeof children === "function" ? children({ close }) : children
+        }
+      ),
+      document.body
+    )
+  ] });
 }
 export {
   Popover

package/dist/components/pricing-card.js

@@ -1,4 +1,5 @@
 import "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Check } from "lucide-react";
 const CHECK_TONE = {
   recommended: "text-brand-on-accent",
@@ -22,7 +23,21 @@ function PricingCard({
   const periodTone = recommended ? "text-fg-inverse/60" : "text-fg-muted";
   const featTone = recommended ? "text-fg-inverse/85" : "text-fg-secondary";
   const check = recommended ? CHECK_TONE.recommended : CHECK_TONE.default;
-  return /* @__PURE__ */ React.createElement("div", { className: `relative flex flex-col rounded-(--radius-card) p-6 ${surface} ${className}` }, recommended && /* @__PURE__ */ React.createElement("span", { className: "absolute -top-3 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-(--radius-badge) bg-brand-accent px-3 py-1 text-[10px] font-bold uppercase tracking-widest text-brand-on-accent" }, recommendedLabel), badge && /* @__PURE__ */ React.createElement("span", { className: "absolute -top-3 right-4 whitespace-nowrap rounded-(--radius-badge) border border-brand-accent bg-surface-default px-3 py-1 text-[10px] font-bold uppercase tracking-widest text-brand-accent" }, badge), /* @__PURE__ */ React.createElement("p", { className: `text-caption font-semibold uppercase tracking-widest ${nameTone}` }, name), /* @__PURE__ */ React.createElement("div", { className: "mt-3 mb-1 flex items-baseline gap-1" }, /* @__PURE__ */ React.createElement("span", { className: "text-4xl font-bold leading-none tracking-tight tabular-nums" }, price), period && /* @__PURE__ */ React.createElement("span", { className: `text-caption ${periodTone}` }, period)), description && /* @__PURE__ */ React.createElement("p", { className: `mb-5 min-h-10 text-caption ${descTone}` }, description), /* @__PURE__ */ React.createElement("div", { className: "mt-1" }, cta), /* @__PURE__ */ React.createElement("ul", { className: "mt-5 space-y-2" }, features.map((f) => /* @__PURE__ */ React.createElement("li", { key: f, className: `flex items-start gap-2 text-caption ${featTone}` }, /* @__PURE__ */ React.createElement(Check, { size: 14, className: `mt-0.5 shrink-0 ${check}`, "aria-hidden": "true" }), /* @__PURE__ */ React.createElement("span", null, f)))));
+  return /* @__PURE__ */ jsxs("div", { className: `relative flex flex-col rounded-(--radius-card) p-6 ${surface} ${className}`, children: [
+    recommended && /* @__PURE__ */ jsx("span", { className: "absolute -top-3 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-(--radius-badge) bg-brand-accent px-3 py-1 text-[10px] font-bold uppercase tracking-widest text-brand-on-accent", children: recommendedLabel }),
+    badge && /* @__PURE__ */ jsx("span", { className: "absolute -top-3 right-4 whitespace-nowrap rounded-(--radius-badge) border border-brand-accent bg-surface-default px-3 py-1 text-[10px] font-bold uppercase tracking-widest text-brand-accent", children: badge }),
+    /* @__PURE__ */ jsx("p", { className: `text-caption font-semibold uppercase tracking-widest ${nameTone}`, children: name }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-3 mb-1 flex items-baseline gap-1", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-4xl font-bold leading-none tracking-tight tabular-nums", children: price }),
+      period && /* @__PURE__ */ jsx("span", { className: `text-caption ${periodTone}`, children: period })
+    ] }),
+    description && /* @__PURE__ */ jsx("p", { className: `mb-5 min-h-10 text-caption ${descTone}`, children: description }),
+    /* @__PURE__ */ jsx("div", { className: "mt-1", children: cta }),
+    /* @__PURE__ */ jsx("ul", { className: "mt-5 space-y-2", children: features.map((f) => /* @__PURE__ */ jsxs("li", { className: `flex items-start gap-2 text-caption ${featTone}`, children: [
+      /* @__PURE__ */ jsx(Check, { size: 14, className: `mt-0.5 shrink-0 ${check}`, "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx("span", { children: f })
+    ] }, f)) })
+  ] });
 }
 export {
   PricingCard

package/dist/components/qr-display.js

@@ -1,4 +1,5 @@
 import "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 function QRDisplay({
   src,
   alt = "QR Code",
@@ -7,17 +8,21 @@ function QRDisplay({
   children,
   className = ""
 }) {
-  return /* @__PURE__ */ React.createElement("div", { className: ["flex flex-col items-center gap-4", className].join(" ") }, /* @__PURE__ */ React.createElement("div", { className: "rounded-(--radius-card) bg-white p-4 shadow-sm" }, /* @__PURE__ */ React.createElement(
-    "img",
-    {
-      src,
-      alt,
-      width: size,
-      height: size,
-      style: { width: size, height: size },
-      className: "block"
-    }
-  )), children, caption && /* @__PURE__ */ React.createElement("div", { className: "max-w-xs text-center text-sm text-fg-secondary leading-snug" }, caption));
+  return /* @__PURE__ */ jsxs("div", { className: ["flex flex-col items-center gap-4", className].join(" "), children: [
+    /* @__PURE__ */ jsx("div", { className: "rounded-(--radius-card) bg-white p-4 shadow-sm", children: /* @__PURE__ */ jsx(
+      "img",
+      {
+        src,
+        alt,
+        width: size,
+        height: size,
+        style: { width: size, height: size },
+        className: "block"
+      }
+    ) }),
+    children,
+    caption && /* @__PURE__ */ jsx("div", { className: "max-w-xs text-center text-sm text-fg-secondary leading-snug", children: caption })
+  ] });
 }
 export {
   QRDisplay

package/dist/components/radio.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 SIZE_CLASS = {
   sm: { box: "size-3.5", dot: "size-1.5", label: "text-caption" },
@@ -14,46 +15,57 @@ const Radio = forwardRef(function Radio2(_a, ref) {
   const inputId = id != null ? id : generatedId;
   const errId = `${inputId}-error`;
   const sz = SIZE_CLASS[size];
-  return /* @__PURE__ */ React.createElement("div", { className: "inline-flex flex-col gap-0.5" }, /* @__PURE__ */ React.createElement(
-    "label",
-    {
-      htmlFor: inputId,
-      className: [
-        "inline-flex items-start gap-2 cursor-pointer",
-        "has-[:disabled]:opacity-50 has-[:disabled]:cursor-not-allowed",
-        className
-      ].filter(Boolean).join(" ")
-    },
-    /* @__PURE__ */ React.createElement("span", { className: ["relative flex shrink-0 mt-0.5", sz.box].join(" ") }, /* @__PURE__ */ React.createElement(
-      "input",
-      __spreadValues({
-        ref,
-        type: "radio",
-        id: inputId,
-        "aria-invalid": error ? true : void 0,
-        "aria-describedby": error ? errId : void 0,
-        className: [
-          "peer appearance-none rounded-full shrink-0 cursor-pointer",
-          sz.box,
-          "bg-surface-default",
-          error ? "border border-danger checked:border-danger" : "border border-stroke-control checked:border-brand-primary",
-          "focus-visible:ring-2 focus-visible:ring-stroke-focus/30 focus-visible:outline-none",
-          "disabled:cursor-not-allowed transition-colors"
-        ].join(" ")
-      }, props)
-    ), /* @__PURE__ */ React.createElement(
-      "span",
+  return /* @__PURE__ */ jsxs("div", { className: "inline-flex flex-col gap-0.5", children: [
+    /* @__PURE__ */ jsxs(
+      "label",
       {
-        "aria-hidden": true,
+        htmlFor: inputId,
         className: [
-          "absolute inset-0 m-auto rounded-full bg-transparent transition-colors pointer-events-none",
-          sz.dot,
-          error ? "peer-checked:bg-danger" : "peer-checked:bg-brand-primary"
-        ].join(" ")
+          "inline-flex items-start gap-2 cursor-pointer",
+          "has-[:disabled]:opacity-50 has-[:disabled]:cursor-not-allowed",
+          className
+        ].filter(Boolean).join(" "),
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: ["relative flex shrink-0 mt-0.5", sz.box].join(" "), children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              __spreadValues({
+                ref,
+                type: "radio",
+                id: inputId,
+                "aria-invalid": error ? true : void 0,
+                "aria-describedby": error ? errId : void 0,
+                className: [
+                  "peer appearance-none rounded-full shrink-0 cursor-pointer",
+                  sz.box,
+                  "bg-surface-default",
+                  error ? "border border-danger checked:border-danger" : "border border-stroke-control checked:border-brand-primary",
+                  "focus-visible:ring-2 focus-visible:ring-stroke-focus/30 focus-visible:outline-none",
+                  "disabled:cursor-not-allowed transition-colors"
+                ].join(" ")
+              }, props)
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": true,
+                className: [
+                  "absolute inset-0 m-auto rounded-full bg-transparent transition-colors pointer-events-none",
+                  sz.dot,
+                  error ? "peer-checked:bg-danger" : "peer-checked:bg-brand-primary"
+                ].join(" ")
+              }
+            )
+          ] }),
+          (label || description) && /* @__PURE__ */ jsxs("span", { className: "flex flex-col gap-0.5 select-none", children: [
+            label && /* @__PURE__ */ jsx("span", { className: [sz.label, "text-fg-primary leading-snug"].join(" "), children: label }),
+            description && /* @__PURE__ */ jsx("span", { className: "text-caption text-fg-muted leading-snug", children: description })
+          ] })
+        ]
       }
-    )),
-    (label || description) && /* @__PURE__ */ React.createElement("span", { className: "flex flex-col gap-0.5 select-none" }, label && /* @__PURE__ */ React.createElement("span", { className: [sz.label, "text-fg-primary leading-snug"].join(" ") }, label), description && /* @__PURE__ */ React.createElement("span", { className: "text-caption text-fg-muted leading-snug" }, description))
-  ), error && /* @__PURE__ */ React.createElement("p", { id: errId, className: [sz.box === "size-3.5" ? "pl-5" : "pl-6", "text-caption text-danger-text"].join(" ") }, error));
+    ),
+    error && /* @__PURE__ */ jsx("p", { id: errId, className: [sz.box === "size-3.5" ? "pl-5" : "pl-6", "text-caption text-danger-text"].join(" "), children: error })
+  ] });
 });
 function RadioGroup({
   name,
@@ -67,28 +79,33 @@ function RadioGroup({
   required,
   className = ""
 }) {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "fieldset",
     {
       className: ["flex flex-col gap-2", className].join(" "),
-      "aria-invalid": error ? true : void 0
-    },
-    legend && /* @__PURE__ */ React.createElement("legend", { className: "text-label font-medium text-fg-primary mb-0.5" }, legend, required && /* @__PURE__ */ React.createElement("span", { className: "text-danger ml-0.5", "aria-label": "obrigat\xF3rio" }, "*")),
-    /* @__PURE__ */ React.createElement("div", { className: ["flex", orientation === "horizontal" ? "flex-row gap-4 flex-wrap" : "flex-col gap-2"].join(" ") }, options.map((opt) => /* @__PURE__ */ React.createElement(
-      Radio,
-      {
-        key: opt.value,
-        name,
-        value: opt.value,
-        checked: value === opt.value,
-        onChange: () => onChange(opt.value),
-        label: opt.label,
-        description: opt.description,
-        disabled: opt.disabled,
-        size
-      }
-    ))),
-    error && /* @__PURE__ */ React.createElement("p", { className: "text-caption text-danger-text" }, error)
+      "aria-invalid": error ? true : void 0,
+      children: [
+        legend && /* @__PURE__ */ jsxs("legend", { className: "text-label font-medium text-fg-primary mb-0.5", children: [
+          legend,
+          required && /* @__PURE__ */ jsx("span", { className: "text-danger ml-0.5", "aria-label": "obrigat\xF3rio", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: ["flex", orientation === "horizontal" ? "flex-row gap-4 flex-wrap" : "flex-col gap-2"].join(" "), children: options.map((opt) => /* @__PURE__ */ jsx(
+          Radio,
+          {
+            name,
+            value: opt.value,
+            checked: value === opt.value,
+            onChange: () => onChange(opt.value),
+            label: opt.label,
+            description: opt.description,
+            disabled: opt.disabled,
+            size
+          },
+          opt.value
+        )) }),
+        error && /* @__PURE__ */ jsx("p", { className: "text-caption text-danger-text", children: error })
+      ]
+    }
   );
 }
 export {

package/dist/components/row-actions.js

@@ -1,5 +1,6 @@
 "use client";
 import "../chunk-ORMEWXMH.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { MoreVertical } from "lucide-react";
 import { Menu, MenuItem, MenuSeparator } from "./menu.js";
 import { IconButton } from "./icon-button.js";
@@ -15,61 +16,68 @@ function RowActions({
   const normalItems = showSep ? items.filter((i) => i.variant !== "danger") : items;
   const dangerItems = showSep ? items.filter((i) => i.variant === "danger") : [];
   const primaryCls = "inline-flex items-center gap-1 text-caption font-medium border border-stroke-default rounded-(--radius-control) px-2.5 py-1 text-fg-secondary hover:bg-surface-page hover:border-stroke-strong transition-colors whitespace-nowrap";
-  return /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-end gap-1" }, primaryHref ? /* @__PURE__ */ React.createElement("a", { href: primaryHref, className: primaryCls, onClick: (e) => e.stopPropagation() }, primaryLabel) : primaryOnClick ? /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      type: "button",
-      className: primaryCls,
-      onClick: (e) => {
-        e.stopPropagation();
-        primaryOnClick();
-      }
-    },
-    primaryLabel
-  ) : null, items.length > 0 && /* @__PURE__ */ React.createElement("div", { onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React.createElement(
-    Menu,
-    {
-      trigger: /* @__PURE__ */ React.createElement(
-        IconButton,
-        {
-          icon: /* @__PURE__ */ React.createElement(MoreVertical, null),
-          "aria-label": "Mais a\xE7\xF5es",
-          size: "sm",
-          variant: "ghost",
-          color: "secondary"
-        }
-      ),
-      placement: "bottom-end",
-      minWidth: 160
-    },
-    ({ close }) => /* @__PURE__ */ React.createElement(React.Fragment, null, normalItems.map((item, i) => /* @__PURE__ */ React.createElement(
-      MenuItem,
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-1", children: [
+    primaryHref ? /* @__PURE__ */ jsx("a", { href: primaryHref, className: primaryCls, onClick: (e) => e.stopPropagation(), children: primaryLabel }) : primaryOnClick ? /* @__PURE__ */ jsx(
+      "button",
       {
-        key: i,
-        icon: item.icon,
-        variant: item.variant,
-        disabled: item.disabled,
-        onClick: () => {
-          item.onClick();
-          close();
-        }
-      },
-      item.label
-    )), showSep && dangerItems.length > 0 && /* @__PURE__ */ React.createElement(MenuSeparator, null), dangerItems.map((item, i) => /* @__PURE__ */ React.createElement(
-      MenuItem,
+        type: "button",
+        className: primaryCls,
+        onClick: (e) => {
+          e.stopPropagation();
+          primaryOnClick();
+        },
+        children: primaryLabel
+      }
+    ) : null,
+    items.length > 0 && /* @__PURE__ */ jsx("div", { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(
+      Menu,
       {
-        key: `d-${i}`,
-        icon: item.icon,
-        variant: "danger",
-        disabled: item.disabled,
-        onClick: () => {
-          item.onClick();
-          close();
-        }
-      },
-      item.label
-    )))
-  )));
+        trigger: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            icon: /* @__PURE__ */ jsx(MoreVertical, {}),
+            "aria-label": "Mais a\xE7\xF5es",
+            size: "sm",
+            variant: "ghost",
+            color: "secondary"
+          }
+        ),
+        placement: "bottom-end",
+        minWidth: 160,
+        children: ({ close }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+          normalItems.map((item, i) => /* @__PURE__ */ jsx(
+            MenuItem,
+            {
+              icon: item.icon,
+              variant: item.variant,
+              disabled: item.disabled,
+              onClick: () => {
+                item.onClick();
+                close();
+              },
+              children: item.label
+            },
+            i
+          )),
+          showSep && dangerItems.length > 0 && /* @__PURE__ */ jsx(MenuSeparator, {}),
+          dangerItems.map((item, i) => /* @__PURE__ */ jsx(
+            MenuItem,
+            {
+              icon: item.icon,
+              variant: "danger",
+              disabled: item.disabled,
+              onClick: () => {
+                item.onClick();
+                close();
+              },
+              children: item.label
+            },
+            `d-${i}`
+          ))
+        ] })
+      }
+    ) })
+  ] });
 }
 export {
   RowActions