@rojaostudio/ds 1.0.0 → 1.0.2

package/dist/components/accordion.js

@@ -1,5 +1,6 @@
 "use client";
 import "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useState, useId, useImperativeHandle, useRef } from "react";
 import { ChevronDown } from "lucide-react";
 import { createContext, useContext } from "react";
@@ -40,7 +41,7 @@ const Accordion = forwardRef(function Accordion2(props, ref) {
       (_b2 = single.onChange) == null ? void 0 : _b2.call(single, next);
     }
   };
-  return /* @__PURE__ */ React.createElement(Ctx.Provider, { value: { isOpen, toggle } }, /* @__PURE__ */ React.createElement("div", { ref: rootRef, className: ["border-y border-stroke-default divide-y divide-stroke-subtle", props.className].filter(Boolean).join(" ") }, props.children));
+  return /* @__PURE__ */ jsx(Ctx.Provider, { value: { isOpen, toggle }, children: /* @__PURE__ */ jsx("div", { ref: rootRef, className: ["border-y border-stroke-default divide-y divide-stroke-subtle", props.className].filter(Boolean).join(" "), children: props.children }) });
 });
 function AccordionItem({ value, title, meta, children, icon, disabled = false }) {
   const ctx = useContext(Ctx);
@@ -49,45 +50,50 @@ function AccordionItem({ value, title, meta, children, icon, disabled = false })
   const id = useId();
   const headerId = `${id}-header`;
   const panelId = `${id}-panel`;
-  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("h3", null, /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      type: "button",
-      id: headerId,
-      "aria-expanded": open,
-      "aria-controls": panelId,
-      disabled,
-      onClick: () => ctx.toggle(value),
-      className: [
-        "w-full flex items-center gap-3 py-3 px-4 min-h-control-md text-left transition-colors",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus focus-visible:ring-inset",
-        "disabled:cursor-not-allowed disabled:opacity-50",
-        "hover:bg-surface-raised"
-      ].join(" ")
-    },
-    icon && /* @__PURE__ */ React.createElement("span", { className: "shrink-0 text-fg-muted [&_svg]:size-4" }, icon),
-    /* @__PURE__ */ React.createElement("span", { className: "flex-1 font-medium text-fg-primary text-label" }, title),
-    meta && /* @__PURE__ */ React.createElement("span", { className: "shrink-0 text-caption text-fg-muted" }, meta),
-    /* @__PURE__ */ React.createElement(
-      ChevronDown,
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("h3", { children: /* @__PURE__ */ jsxs(
+      "button",
       {
-        size: 16,
-        className: ["shrink-0 text-fg-muted transition-transform", open ? "rotate-180" : ""].join(" ")
+        type: "button",
+        id: headerId,
+        "aria-expanded": open,
+        "aria-controls": panelId,
+        disabled,
+        onClick: () => ctx.toggle(value),
+        className: [
+          "w-full flex items-center gap-3 py-3 px-4 min-h-control-md text-left transition-colors",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus focus-visible:ring-inset",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          "hover:bg-surface-raised"
+        ].join(" "),
+        children: [
+          icon && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-fg-muted [&_svg]:size-4", children: icon }),
+          /* @__PURE__ */ jsx("span", { className: "flex-1 font-medium text-fg-primary text-label", children: title }),
+          meta && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-caption text-fg-muted", children: meta }),
+          /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              size: 16,
+              className: ["shrink-0 text-fg-muted transition-transform", open ? "rotate-180" : ""].join(" ")
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: panelId,
+        role: "region",
+        "aria-labelledby": headerId,
+        className: [
+          "grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none",
+          open ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+        ].join(" "),
+        children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "px-4 pb-4 text-label text-fg-secondary leading-relaxed", children }) })
       }
     )
-  )), /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      id: panelId,
-      role: "region",
-      "aria-labelledby": headerId,
-      className: [
-        "grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none",
-        open ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
-      ].join(" ")
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "overflow-hidden" }, /* @__PURE__ */ React.createElement("div", { className: "px-4 pb-4 text-label text-fg-secondary leading-relaxed" }, children))
-  ));
+  ] });
 }
 export {
   Accordion,

package/dist/components/alert.js

@@ -1,29 +1,30 @@
 import "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckCircle, AlertCircle, AlertTriangle, Info, X } from "lucide-react";
 const VARIANTS = {
   success: {
     container: "bg-success-soft border-success-border text-success-text",
-    icon: /* @__PURE__ */ React.createElement(CheckCircle, { size: 16, className: "shrink-0 mt-0.5" }),
+    icon: /* @__PURE__ */ jsx(CheckCircle, { size: 16, className: "shrink-0 mt-0.5" }),
     actionColor: "text-success-text hover:bg-success-soft/60"
   },
   danger: {
     container: "bg-danger-soft border-danger-border text-danger-text",
-    icon: /* @__PURE__ */ React.createElement(AlertCircle, { size: 16, className: "shrink-0 mt-0.5" }),
+    icon: /* @__PURE__ */ jsx(AlertCircle, { size: 16, className: "shrink-0 mt-0.5" }),
     actionColor: "text-danger-text hover:bg-danger-soft/60"
   },
   warning: {
     container: "bg-warning-soft border-warning-border text-warning-text",
-    icon: /* @__PURE__ */ React.createElement(AlertTriangle, { size: 16, className: "shrink-0 mt-0.5" }),
+    icon: /* @__PURE__ */ jsx(AlertTriangle, { size: 16, className: "shrink-0 mt-0.5" }),
     actionColor: "text-warning-text hover:bg-warning-soft/60"
   },
   info: {
     container: "bg-info-soft border-info-border text-info-text",
-    icon: /* @__PURE__ */ React.createElement(Info, { size: 16, className: "shrink-0 mt-0.5" }),
+    icon: /* @__PURE__ */ jsx(Info, { size: 16, className: "shrink-0 mt-0.5" }),
     actionColor: "text-info-text hover:bg-info-soft/60"
   },
   neutral: {
     container: "bg-neutral-soft border-neutral-border text-neutral-text",
-    icon: /* @__PURE__ */ React.createElement(Info, { size: 16, className: "shrink-0 mt-0.5" }),
+    icon: /* @__PURE__ */ jsx(Info, { size: 16, className: "shrink-0 mt-0.5" }),
     actionColor: "text-neutral-text hover:bg-neutral-soft/60"
   }
 };
@@ -39,32 +40,38 @@ function Alert({
 }) {
   const { container, icon: defaultIcon, actionColor } = VARIANTS[variant];
   const iconEl = hideIcon ? null : icon != null ? icon : defaultIcon;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       role: variant === "danger" ? "alert" : "status",
-      className: ["flex items-start gap-3 px-4 py-3 rounded-(--radius-card) border text-label", container, className].join(" ")
-    },
-    iconEl,
-    /* @__PURE__ */ React.createElement("div", { className: "flex-1 min-w-0" }, title && /* @__PURE__ */ React.createElement("p", { className: "font-medium leading-snug" }, title), children && /* @__PURE__ */ React.createElement("div", { className: ["leading-snug", title ? "mt-0.5 opacity-80" : ""].join(" ") }, children), action && /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: action.onClick,
-        className: ["mt-2 inline-flex text-caption font-semibold px-2 py-1 -mx-2 rounded transition-colors", actionColor].join(" ")
-      },
-      action.label
-    )),
-    onClose && /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: onClose,
-        className: "shrink-0 opacity-60 hover:opacity-100 transition-opacity p-0.5 -m-0.5 rounded",
-        "aria-label": "Fechar"
-      },
-      /* @__PURE__ */ React.createElement(X, { size: 14 })
-    )
+      className: ["flex items-start gap-3 px-4 py-3 rounded-(--radius-card) border text-label", container, className].join(" "),
+      children: [
+        iconEl,
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          title && /* @__PURE__ */ jsx("p", { className: "font-medium leading-snug", children: title }),
+          children && /* @__PURE__ */ jsx("div", { className: ["leading-snug", title ? "mt-0.5 opacity-80" : ""].join(" "), children }),
+          action && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: action.onClick,
+              className: ["mt-2 inline-flex text-caption font-semibold px-2 py-1 -mx-2 rounded transition-colors", actionColor].join(" "),
+              children: action.label
+            }
+          )
+        ] }),
+        onClose && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onClose,
+            className: "shrink-0 opacity-60 hover:opacity-100 transition-opacity p-0.5 -m-0.5 rounded",
+            "aria-label": "Fechar",
+            children: /* @__PURE__ */ jsx(X, { size: 14 })
+          }
+        )
+      ]
+    }
   );
 }
 export {

package/dist/components/avatar.js

@@ -1,4 +1,5 @@
 import "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Children, isValidElement, cloneElement } from "react";
 const SIZE_CLASSES = {
   xs: "size-6 text-[10px]",
@@ -39,29 +40,32 @@ function Avatar({
   const showImage = !!src;
   const label = (_a = alt != null ? alt : name) != null ? _a : "Avatar";
   const bgClass = variant === "brand" ? "bg-brand-primary text-brand-on-primary" : "bg-surface-raised text-fg-secondary";
-  return /* @__PURE__ */ React.createElement("div", { className: ["relative inline-flex shrink-0", className].join(" ") }, /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: [
-        "inline-flex items-center justify-center rounded-full overflow-hidden font-semibold select-none",
-        SIZE_CLASSES[size],
-        showImage ? "" : bgClass
-      ].join(" "),
-      "aria-label": label,
-      role: "img"
-    },
-    showImage ? /* @__PURE__ */ React.createElement("img", { src, alt: label, className: "size-full object-cover" }) : /* @__PURE__ */ React.createElement("span", null, initials(name != null ? name : "?"))
-  ), status && /* @__PURE__ */ React.createElement(
-    "span",
-    {
-      className: [
-        "absolute bottom-0 right-0 rounded-full ring-2 ring-surface-default",
-        STATUS_DOT_SIZE[size],
-        STATUS_COLOR[status]
-      ].join(" "),
-      "aria-label": `status: ${status}`
-    }
-  ));
+  return /* @__PURE__ */ jsxs("div", { className: ["relative inline-flex shrink-0", className].join(" "), children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: [
+          "inline-flex items-center justify-center rounded-full overflow-hidden font-semibold select-none",
+          SIZE_CLASSES[size],
+          showImage ? "" : bgClass
+        ].join(" "),
+        "aria-label": label,
+        role: "img",
+        children: showImage ? /* @__PURE__ */ jsx("img", { src, alt: label, className: "size-full object-cover" }) : /* @__PURE__ */ jsx("span", { children: initials(name != null ? name : "?") })
+      }
+    ),
+    status && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: [
+          "absolute bottom-0 right-0 rounded-full ring-2 ring-surface-default",
+          STATUS_DOT_SIZE[size],
+          STATUS_COLOR[status]
+        ].join(" "),
+        "aria-label": `status: ${status}`
+      }
+    )
+  ] });
 }
 const SPACING_CLASS = {
   tight: "-ml-3",
@@ -78,17 +82,20 @@ function AvatarGroup({
   const items = Children.toArray(children).filter(isValidElement);
   const visible = items.slice(0, max);
   const overflow = items.length - visible.length;
-  return /* @__PURE__ */ React.createElement("div", { className: ["inline-flex items-center", className].join(" "), role: "group" }, visible.map((child, idx) => {
-    var _a;
-    return /* @__PURE__ */ React.createElement("div", { key: idx, className: idx === 0 ? "" : SPACING_CLASS[spacing] }, cloneElement(child, { size: (_a = child.props.size) != null ? _a : size }));
-  }), overflow > 0 && /* @__PURE__ */ React.createElement("div", { className: SPACING_CLASS[spacing] }, /* @__PURE__ */ React.createElement(
-    Avatar,
-    {
-      name: `+${overflow}`,
-      variant: "neutral",
-      size
-    }
-  )));
+  return /* @__PURE__ */ jsxs("div", { className: ["inline-flex items-center", className].join(" "), role: "group", children: [
+    visible.map((child, idx) => {
+      var _a;
+      return /* @__PURE__ */ jsx("div", { className: idx === 0 ? "" : SPACING_CLASS[spacing], children: cloneElement(child, { size: (_a = child.props.size) != null ? _a : size }) }, idx);
+    }),
+    overflow > 0 && /* @__PURE__ */ jsx("div", { className: SPACING_CLASS[spacing], children: /* @__PURE__ */ jsx(
+      Avatar,
+      {
+        name: `+${overflow}`,
+        variant: "neutral",
+        size
+      }
+    ) })
+  ] });
 }
 export {
   Avatar,

package/dist/components/badge.js

@@ -1,7 +1,9 @@
 import {
   __objRest,
+  __spreadProps,
   __spreadValues
 } from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 const LABEL_VARIANTS = {
   default: "bg-surface-default text-fg-muted border border-stroke-default",
@@ -50,7 +52,7 @@ const Badge = forwardRef(function Badge2(_a, ref) {
     "children"
   ]);
   if (variant === "dot") {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       "span",
       __spreadValues({
         ref,
@@ -67,9 +69,9 @@ const Badge = forwardRef(function Badge2(_a, ref) {
   if (variant === "count") {
     const display = count !== void 0 ? count > max ? `${max}+` : String(count) : children;
     if (count !== void 0 && count <= 0) return null;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       "span",
-      __spreadValues({
+      __spreadProps(__spreadValues({
         ref,
         className: [
           BASE,
@@ -78,25 +80,29 @@ const Badge = forwardRef(function Badge2(_a, ref) {
           "bg-brand-primary text-brand-on-primary justify-center tabular-nums",
           className
         ].join(" ")
-      }, props),
-      display
+      }, props), {
+        children: display
+      })
     );
   }
   if (variant in STATUS_VARIANTS) {
     const { dot, text } = STATUS_VARIANTS[variant];
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxs(
       "span",
-      __spreadValues({
+      __spreadProps(__spreadValues({
         ref,
         className: [BASE, SIZE_CLASS[size], "gap-1.5", text, className].join(" ")
-      }, props),
-      /* @__PURE__ */ React.createElement("span", { className: ["shrink-0 size-1.5 rounded-full", dot].join(" "), "aria-hidden": "true" }),
-      children
+      }, props), {
+        children: [
+          /* @__PURE__ */ jsx("span", { className: ["shrink-0 size-1.5 rounded-full", dot].join(" "), "aria-hidden": "true" }),
+          children
+        ]
+      })
     );
   }
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "span",
-    __spreadValues({
+    __spreadProps(__spreadValues({
       ref,
       className: [
         BASE,
@@ -105,8 +111,9 @@ const Badge = forwardRef(function Badge2(_a, ref) {
         LABEL_VARIANTS[variant],
         className
       ].join(" ")
-    }, props),
-    children
+    }, props), {
+      children
+    })
   );
 });
 export {

package/dist/components/blocker-card.js

@@ -1,4 +1,5 @@
 import "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 const TONE = {
   danger: {
     container: "border-danger-border bg-danger-soft",
@@ -22,7 +23,7 @@ const DEFAULT_EYEBROW = {
   info: "Aviso"
 };
 function DefaultLink({ href, className, children }) {
-  return /* @__PURE__ */ React.createElement("a", { href, className }, children);
+  return /* @__PURE__ */ jsx("a", { href, className, children });
 }
 function BlockerCard({
   title,
@@ -38,7 +39,15 @@ function BlockerCard({
   const palette = TONE[tone];
   const eyebrowText = eyebrow != null ? eyebrow : DEFAULT_EYEBROW[tone];
   const actionClass = ["shrink-0 rounded-(--radius-card) border px-3 py-1.5 text-caption font-medium transition-colors whitespace-nowrap", palette.action].join(" ");
-  return /* @__PURE__ */ React.createElement("div", { className: ["rounded-(--radius-card) border p-4", palette.container, className].join(" ") }, /* @__PURE__ */ React.createElement("div", { className: "flex items-start justify-between gap-4" }, /* @__PURE__ */ React.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React.createElement("span", { className: ["text-caption font-semibold uppercase tracking-wide", palette.eyebrow].join(" ") }, eyebrowText), /* @__PURE__ */ React.createElement("p", { className: "mt-0.5 font-semibold text-fg-primary text-label" }, title), /* @__PURE__ */ React.createElement("div", { className: "mt-0.5 text-label text-fg-secondary" }, description)), action && actionHref && /* @__PURE__ */ React.createElement(LinkAs, { href: actionHref, className: actionClass }, action), action && !actionHref && onAction && /* @__PURE__ */ React.createElement("button", { type: "button", onClick: onAction, className: actionClass }, action)));
+  return /* @__PURE__ */ jsx("div", { className: ["rounded-(--radius-card) border p-4", palette.container, className].join(" "), children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx("span", { className: ["text-caption font-semibold uppercase tracking-wide", palette.eyebrow].join(" "), children: eyebrowText }),
+      /* @__PURE__ */ jsx("p", { className: "mt-0.5 font-semibold text-fg-primary text-label", children: title }),
+      /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-label text-fg-secondary", children: description })
+    ] }),
+    action && actionHref && /* @__PURE__ */ jsx(LinkAs, { href: actionHref, className: actionClass, children: action }),
+    action && !actionHref && onAction && /* @__PURE__ */ jsx("button", { type: "button", onClick: onAction, className: actionClass, children: action })
+  ] }) });
 }
 export {
   BlockerCard

package/dist/components/bottom-sheet.js

@@ -1,5 +1,6 @@
 "use client";
 import "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { X } from "lucide-react";
@@ -51,66 +52,72 @@ const BottomSheet = forwardRef(function BottomSheet2({
   }, [open, onClose]);
   if (!mounted || !open) return null;
   return createPortal(
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ jsxs(
       "div",
       {
         role: "dialog",
         "aria-modal": "true",
         "aria-labelledby": title ? "bottom-sheet-title" : void 0,
-        className: "fixed inset-0 z-[1000] flex items-end justify-center"
-      },
-      /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          "data-bottom-sheet-backdrop": true,
-          onClick: closeOnBackdrop ? onClose : void 0,
-          className: "absolute inset-0 [background:var(--overlay-scrim)] rojao-bottom-sheet--backdrop-enter",
-          "aria-hidden": true
-        }
-      ),
-      /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          ref: sheetRef,
-          tabIndex: -1,
-          className: [
-            "relative w-full sm:max-w-md bg-surface-default rounded-t-(--radius-toast) shadow-2xl outline-none",
-            "flex flex-col rojao-bottom-sheet--enter",
-            SNAP_HEIGHT[snap],
-            className
-          ].join(" ")
-        },
-        /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            "data-drag-handle": true,
-            onTouchStart: handleDragStart,
-            onTouchMove: handleDragMove,
-            className: "flex justify-center items-center min-h-[20px] pt-2 shrink-0 touch-none cursor-grab"
-          },
-          /* @__PURE__ */ React.createElement("span", { className: "w-10 h-1 rounded-full bg-(--border-strong)", "aria-hidden": true })
-        ),
-        !hideHeader && /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            onTouchStart: handleDragStart,
-            onTouchMove: handleDragMove,
-            className: "flex items-center justify-between px-5 pt-2 pb-3 border-b border-stroke-default shrink-0"
-          },
-          /* @__PURE__ */ React.createElement("h2", { id: "bottom-sheet-title", className: "text-body font-semibold text-fg-primary" }, title),
-          /* @__PURE__ */ React.createElement(
-            "button",
+        className: "fixed inset-0 z-[1000] flex items-end justify-center",
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
             {
-              type: "button",
-              onClick: onClose,
-              "aria-label": "Fechar",
-              className: "text-fg-muted hover:text-fg-primary transition-colors p-3 -mr-3 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus"
-            },
-            /* @__PURE__ */ React.createElement(X, { size: 18 })
+              "data-bottom-sheet-backdrop": true,
+              onClick: closeOnBackdrop ? onClose : void 0,
+              className: "absolute inset-0 [background:var(--overlay-scrim)] rojao-bottom-sheet--backdrop-enter",
+              "aria-hidden": true
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: sheetRef,
+              tabIndex: -1,
+              className: [
+                "relative w-full sm:max-w-md bg-surface-default rounded-t-(--radius-toast) shadow-2xl outline-none",
+                "flex flex-col rojao-bottom-sheet--enter",
+                SNAP_HEIGHT[snap],
+                className
+              ].join(" "),
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    "data-drag-handle": true,
+                    onTouchStart: handleDragStart,
+                    onTouchMove: handleDragMove,
+                    className: "flex justify-center items-center min-h-[20px] pt-2 shrink-0 touch-none cursor-grab",
+                    children: /* @__PURE__ */ jsx("span", { className: "w-10 h-1 rounded-full bg-(--border-strong)", "aria-hidden": true })
+                  }
+                ),
+                !hideHeader && /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    onTouchStart: handleDragStart,
+                    onTouchMove: handleDragMove,
+                    className: "flex items-center justify-between px-5 pt-2 pb-3 border-b border-stroke-default shrink-0",
+                    children: [
+                      /* @__PURE__ */ jsx("h2", { id: "bottom-sheet-title", className: "text-body font-semibold text-fg-primary", children: title }),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: onClose,
+                          "aria-label": "Fechar",
+                          className: "text-fg-muted hover:text-fg-primary transition-colors p-3 -mr-3 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus",
+                          children: /* @__PURE__ */ jsx(X, { size: 18 })
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { "data-scroll-container": true, className: "flex-1 overflow-y-auto px-5 py-4", children })
+              ]
+            }
           )
-        ),
-        /* @__PURE__ */ React.createElement("div", { "data-scroll-container": true, className: "flex-1 overflow-y-auto px-5 py-4" }, children)
-      )
+        ]
+      }
     ),
     document.body
   );

package/dist/components/breadcrumb.js

@@ -1,7 +1,8 @@
 import "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronRight, Home } from "lucide-react";
 function DefaultLink({ href, className, children }) {
-  return /* @__PURE__ */ React.createElement("a", { href, className }, children);
+  return /* @__PURE__ */ jsx("a", { href, className, children });
 }
 function Breadcrumb({
   items,
@@ -10,7 +11,7 @@ function Breadcrumb({
   className = "",
   linkAs: LinkAs = DefaultLink
 }) {
-  const sep = separator != null ? separator : /* @__PURE__ */ React.createElement(ChevronRight, { size: 14, className: "text-fg-muted shrink-0" });
+  const sep = separator != null ? separator : /* @__PURE__ */ jsx(ChevronRight, { size: 14, className: "text-fg-muted shrink-0" });
   let displayed = items;
   if (items.length > maxItems) {
     displayed = [
@@ -19,32 +20,41 @@ function Breadcrumb({
       ...items.slice(items.length - 2)
     ];
   }
-  return /* @__PURE__ */ React.createElement("nav", { "aria-label": "Breadcrumb", className }, /* @__PURE__ */ React.createElement("ol", { className: "flex items-center gap-1.5 text-label flex-wrap" }, displayed.map((entry, idx) => {
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className, children: /* @__PURE__ */ jsx("ol", { className: "flex items-center gap-1.5 text-label flex-wrap", children: displayed.map((entry, idx) => {
     const isLast = idx === displayed.length - 1;
     if ("ellipsis" in entry) {
-      return /* @__PURE__ */ React.createElement("li", { key: `ell-${idx}`, className: "flex items-center gap-1.5" }, /* @__PURE__ */ React.createElement("span", { className: "text-fg-muted px-1", "aria-hidden": true }, "\u2026"), !isLast && sep);
+      return /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-fg-muted px-1", "aria-hidden": true, children: "\u2026" }),
+        !isLast && sep
+      ] }, `ell-${idx}`);
     }
     const item = entry;
-    const labelEl = /* @__PURE__ */ React.createElement("span", { className: "inline-flex items-center gap-1" }, item.icon, item.label);
-    return /* @__PURE__ */ React.createElement("li", { key: idx, className: "flex items-center gap-1.5" }, item.href && !isLast ? /* @__PURE__ */ React.createElement(
-      LinkAs,
-      {
-        href: item.href,
-        className: "text-fg-muted hover:text-fg-primary transition-colors"
-      },
-      labelEl
-    ) : /* @__PURE__ */ React.createElement(
-      "span",
-      {
-        className: isLast ? "text-fg-primary font-medium" : "text-fg-muted",
-        "aria-current": isLast ? "page" : void 0
-      },
-      labelEl
-    ), !isLast && sep);
-  })));
+    const labelEl = /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
+      item.icon,
+      item.label
+    ] });
+    return /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-1.5", children: [
+      item.href && !isLast ? /* @__PURE__ */ jsx(
+        LinkAs,
+        {
+          href: item.href,
+          className: "text-fg-muted hover:text-fg-primary transition-colors",
+          children: labelEl
+        }
+      ) : /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: isLast ? "text-fg-primary font-medium" : "text-fg-muted",
+          "aria-current": isLast ? "page" : void 0,
+          children: labelEl
+        }
+      ),
+      !isLast && sep
+    ] }, idx);
+  }) }) });
 }
 function homeItem(href = "/") {
-  return { label: "In\xEDcio", href, icon: /* @__PURE__ */ React.createElement(Home, { size: 14 }) };
+  return { label: "In\xEDcio", href, icon: /* @__PURE__ */ jsx(Home, { size: 14 }) };
 }
 export {
   Breadcrumb,