@rojaostudio/ds 1.0.1 → 1.0.2

package/dist/components/time-picker.js

@@ -3,6 +3,7 @@ import {
   __spreadProps,
   __spreadValues
 } from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useState, useRef, useEffect, useImperativeHandle } from "react";
 import { Clock, ChevronUp, ChevronDown, X } from "lucide-react";
 import { Popover } from "./popover.js";
@@ -95,118 +96,137 @@ const TimePicker = forwardRef(function TimePicker2({
     if (!p) return "";
     return formatTime(p.h, p.m, format);
   })();
-  const dialog = /* @__PURE__ */ React.createElement(
+  const dialog = /* @__PURE__ */ jsxs(
     "div",
     {
       role: "dialog",
       "aria-label": "Seletor de hora",
-      className: "rounded-(--radius-control) border border-stroke-default bg-surface-default shadow-lg p-3"
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(
-      Spinner,
+      className: "rounded-(--radius-control) border border-stroke-default bg-surface-default shadow-lg p-3",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Spinner,
+            {
+              label: "Hora",
+              value: String(draft.h).padStart(2, "0"),
+              onUp: () => adjust("h", 1),
+              onDown: () => adjust("h", -1)
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-heading-sm font-semibold text-fg-muted", children: ":" }),
+          /* @__PURE__ */ jsx(
+            Spinner,
+            {
+              label: "Minuto",
+              value: String(draft.m).padStart(2, "0"),
+              onUp: () => adjust("m", 1),
+              onDown: () => adjust("m", -1)
+            }
+          ),
+          format === "12h" && /* @__PURE__ */ jsx("span", { className: "text-caption font-medium text-fg-secondary ml-1", children: draft.h >= 12 ? "PM" : "AM" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2 mt-3", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setOpen(false),
+              className: "text-caption text-fg-muted hover:text-fg-primary transition-colors px-2 py-1",
+              children: "Cancelar"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                commit();
+                setOpen(false);
+              },
+              className: "text-caption font-medium bg-brand-primary text-brand-on-primary px-3 py-1 rounded transition-colors hover:bg-brand-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus",
+              children: "OK"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs("div", { className: ["relative", width === "full" ? "block w-full" : "inline-block", className].join(" "), children: [
+    /* @__PURE__ */ jsx(
+      Popover,
       {
-        label: "Hora",
-        value: String(draft.h).padStart(2, "0"),
-        onUp: () => adjust("h", 1),
-        onDown: () => adjust("h", -1)
+        trigger: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref: triggerRef,
+            type: "button",
+            onClick: (e) => {
+              e.stopPropagation();
+              if (!disabled) setOpen((o) => !o);
+            },
+            disabled,
+            "aria-label": ariaLabel != null ? ariaLabel : "Selecionar hora",
+            "aria-haspopup": "dialog",
+            "aria-expanded": open,
+            className: [
+              "w-full flex items-center gap-2 rounded-(--radius-control) border border-stroke-default bg-surface-default",
+              "transition-colors focus:outline-none focus:border-stroke-focus focus:ring-2 focus:ring-stroke-focus/20",
+              "disabled:opacity-50 disabled:cursor-not-allowed",
+              value ? "pr-7" : "",
+              SIZE_CLASS[size]
+            ].join(" "),
+            children: [
+              /* @__PURE__ */ jsx(Clock, { size: 16, className: "text-fg-muted shrink-0" }),
+              /* @__PURE__ */ jsx("span", { className: ["flex-1 text-left truncate", display ? "text-fg-primary" : "text-fg-placeholder"].join(" "), children: display || placeholder })
+            ]
+          }
+        ),
+        triggerClassName: width === "full" ? "block w-full" : "inline-block",
+        placement: "bottom-start",
+        offset: 4,
+        open,
+        onOpenChange: (v) => {
+          if (!disabled) setOpen(v);
+        },
+        children: () => dialog
       }
-    ), /* @__PURE__ */ React.createElement("span", { className: "text-heading-sm font-semibold text-fg-muted" }, ":"), /* @__PURE__ */ React.createElement(
-      Spinner,
+    ),
+    value && !disabled && /* @__PURE__ */ jsx(
+      "button",
       {
-        label: "Minuto",
-        value: String(draft.m).padStart(2, "0"),
-        onUp: () => adjust("m", 1),
-        onDown: () => adjust("m", -1)
+        type: "button",
+        onClick: handleClear,
+        "aria-label": "Limpar hora",
+        className: "absolute right-2 top-1/2 -translate-y-1/2 text-fg-muted hover:text-fg-primary p-0.5 rounded transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus",
+        children: /* @__PURE__ */ jsx(X, { size: 14 })
       }
-    ), format === "12h" && /* @__PURE__ */ React.createElement("span", { className: "text-caption font-medium text-fg-secondary ml-1" }, draft.h >= 12 ? "PM" : "AM")),
-    /* @__PURE__ */ React.createElement("div", { className: "flex justify-end gap-2 mt-3" }, /* @__PURE__ */ React.createElement(
+    )
+  ] });
+});
+function Spinner({ label, value, onUp, onDown }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", role: "group", "aria-label": label, children: [
+    /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
-        onClick: () => setOpen(false),
-        className: "text-caption text-fg-muted hover:text-fg-primary transition-colors px-2 py-1"
-      },
-      "Cancelar"
-    ), /* @__PURE__ */ React.createElement(
+        onClick: onUp,
+        "aria-label": `Aumentar ${label.toLowerCase()}`,
+        className: "p-0.5 rounded hover:bg-surface-raised text-fg-muted focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-stroke-focus",
+        children: /* @__PURE__ */ jsx(ChevronUp, { size: 16 })
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "px-2 py-1 text-heading-lg font-mono font-semibold text-fg-primary tabular-nums select-none min-w-[3ch] text-center", children: value }),
+    /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
-        onClick: () => {
-          commit();
-          setOpen(false);
-        },
-        className: "text-caption font-medium bg-brand-primary text-brand-on-primary px-3 py-1 rounded transition-colors hover:bg-brand-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus"
-      },
-      "OK"
-    ))
-  );
-  return /* @__PURE__ */ React.createElement("div", { className: ["relative", width === "full" ? "block w-full" : "inline-block", className].join(" ") }, /* @__PURE__ */ React.createElement(
-    Popover,
-    {
-      trigger: /* @__PURE__ */ React.createElement(
-        "button",
-        {
-          ref: triggerRef,
-          type: "button",
-          onClick: (e) => {
-            e.stopPropagation();
-            if (!disabled) setOpen((o) => !o);
-          },
-          disabled,
-          "aria-label": ariaLabel != null ? ariaLabel : "Selecionar hora",
-          "aria-haspopup": "dialog",
-          "aria-expanded": open,
-          className: [
-            "w-full flex items-center gap-2 rounded-(--radius-control) border border-stroke-default bg-surface-default",
-            "transition-colors focus:outline-none focus:border-stroke-focus focus:ring-2 focus:ring-stroke-focus/20",
-            "disabled:opacity-50 disabled:cursor-not-allowed",
-            value ? "pr-7" : "",
-            SIZE_CLASS[size]
-          ].join(" ")
-        },
-        /* @__PURE__ */ React.createElement(Clock, { size: 16, className: "text-fg-muted shrink-0" }),
-        /* @__PURE__ */ React.createElement("span", { className: ["flex-1 text-left truncate", display ? "text-fg-primary" : "text-fg-placeholder"].join(" ") }, display || placeholder)
-      ),
-      triggerClassName: width === "full" ? "block w-full" : "inline-block",
-      placement: "bottom-start",
-      offset: 4,
-      open,
-      onOpenChange: (v) => {
-        if (!disabled) setOpen(v);
+        onClick: onDown,
+        "aria-label": `Diminuir ${label.toLowerCase()}`,
+        className: "p-0.5 rounded hover:bg-surface-raised text-fg-muted focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-stroke-focus",
+        children: /* @__PURE__ */ jsx(ChevronDown, { size: 16 })
       }
-    },
-    () => dialog
-  ), value && !disabled && /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      type: "button",
-      onClick: handleClear,
-      "aria-label": "Limpar hora",
-      className: "absolute right-2 top-1/2 -translate-y-1/2 text-fg-muted hover:text-fg-primary p-0.5 rounded transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus"
-    },
-    /* @__PURE__ */ React.createElement(X, { size: 14 })
-  ));
-});
-function Spinner({ label, value, onUp, onDown }) {
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col items-center", role: "group", "aria-label": label }, /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      type: "button",
-      onClick: onUp,
-      "aria-label": `Aumentar ${label.toLowerCase()}`,
-      className: "p-0.5 rounded hover:bg-surface-raised text-fg-muted focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-stroke-focus"
-    },
-    /* @__PURE__ */ React.createElement(ChevronUp, { size: 16 })
-  ), /* @__PURE__ */ React.createElement("div", { className: "px-2 py-1 text-heading-lg font-mono font-semibold text-fg-primary tabular-nums select-none min-w-[3ch] text-center" }, value), /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      type: "button",
-      onClick: onDown,
-      "aria-label": `Diminuir ${label.toLowerCase()}`,
-      className: "p-0.5 rounded hover:bg-surface-raised text-fg-muted focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-stroke-focus"
-    },
-    /* @__PURE__ */ React.createElement(ChevronDown, { size: 16 })
-  ));
+    )
+  ] });
 }
 export {
   TimePicker

package/dist/components/toaster.js

@@ -3,6 +3,7 @@ import {
   __spreadProps,
   __spreadValues
 } from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState, useCallback } from "react";
 import { createPortal } from "react-dom";
 import { Loader2, X, Check, AlertTriangle, Info } from "lucide-react";
@@ -99,7 +100,7 @@ function ToastVisual({
   const hasAction = !!action;
   const showClose = dismissible != null ? dismissible : !hasAction && !isLoading;
   const animClass = animate ? origin === "top" ? "rojao-toast--enter-top" : "rojao-toast--enter-bottom" : "";
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       role: isError ? "alert" : "status",
@@ -114,57 +115,62 @@ function ToastVisual({
         borderRadius: "var(--radius-toast)",
         minHeight: "56px",
         fontFamily: "var(--font-family)"
-      })
-    },
-    (() => {
-      const Icon = VARIANT_ICON[variant];
-      if (!Icon) return null;
-      if (isLoading) {
-        return /* @__PURE__ */ React.createElement(
-          Icon,
+      }),
+      children: [
+        (() => {
+          const Icon = VARIANT_ICON[variant];
+          if (!Icon) return null;
+          if (isLoading) {
+            return /* @__PURE__ */ jsx(
+              Icon,
+              {
+                size: 18,
+                className: "shrink-0 animate-spin",
+                style: { color: "var(--toast-text-muted)" }
+              }
+            );
+          }
+          const c = VARIANT_COLOR[variant];
+          return /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "grid place-items-center rounded-full shrink-0 size-9",
+              style: {
+                background: c,
+                color: `color-mix(in srgb, ${c} 30%, black)`,
+                boxShadow: `0 0 0 5px color-mix(in srgb, ${c} 18%, transparent)`
+              },
+              children: /* @__PURE__ */ jsx(Icon, { size: 18, strokeWidth: 2.75 })
+            }
+          );
+        })(),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx("p", { className: description ? "text-[0.9375rem] font-semibold leading-snug" : "text-label leading-snug", children: message }),
+          description && /* @__PURE__ */ jsx("p", { className: "text-label leading-snug mt-0.5", style: { color: "var(--toast-text-muted)" }, children: description })
+        ] }),
+        hasAction ? /* @__PURE__ */ jsx(
+          "button",
           {
-            size: 18,
-            className: "shrink-0 animate-spin",
-            style: { color: "var(--toast-text-muted)" }
+            type: "button",
+            onClick: action.onClick,
+            className: "shrink-0 text-label font-medium px-2 -mr-1 transition-opacity hover:opacity-80",
+            style: { color: "currentColor" },
+            children: action.label
           }
-        );
-      }
-      const c = VARIANT_COLOR[variant];
-      return /* @__PURE__ */ React.createElement(
-        "span",
-        {
-          "aria-hidden": "true",
-          className: "grid place-items-center rounded-full shrink-0 size-9",
-          style: {
-            background: c,
-            color: `color-mix(in srgb, ${c} 30%, black)`,
-            boxShadow: `0 0 0 5px color-mix(in srgb, ${c} 18%, transparent)`
+        ) : showClose && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onDismiss,
+            "aria-label": "Fechar",
+            className: "shrink-0 opacity-60 hover:opacity-100 transition-opacity",
+            style: { color: "currentColor" },
+            children: /* @__PURE__ */ jsx(X, { size: 16 })
           }
-        },
-        /* @__PURE__ */ React.createElement(Icon, { size: 18, strokeWidth: 2.75 })
-      );
-    })(),
-    /* @__PURE__ */ React.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React.createElement("p", { className: description ? "text-[0.9375rem] font-semibold leading-snug" : "text-label leading-snug" }, message), description && /* @__PURE__ */ React.createElement("p", { className: "text-label leading-snug mt-0.5", style: { color: "var(--toast-text-muted)" } }, description)),
-    hasAction ? /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: action.onClick,
-        className: "shrink-0 text-label font-medium px-2 -mr-1 transition-opacity hover:opacity-80",
-        style: { color: "currentColor" }
-      },
-      action.label
-    ) : showClose && /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: onDismiss,
-        "aria-label": "Fechar",
-        className: "shrink-0 opacity-60 hover:opacity-100 transition-opacity",
-        style: { color: "currentColor" }
-      },
-      /* @__PURE__ */ React.createElement(X, { size: 16 })
-    )
+        )
+      ]
+    }
   );
 }
 const POSITION_CLASS = {
@@ -240,39 +246,39 @@ function Toaster({ position = "bottom-center" } = {}) {
   const isTop = position.startsWith("top-");
   const exitClass = t.exiting ? isTop ? "rojao-toast--exit-top" : "rojao-toast--exit-bottom" : "";
   return createPortal(
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ jsx(
       "div",
       {
         "aria-live": ariaLive,
         "aria-atomic": "true",
-        className: ["fixed z-[9999] pointer-events-none", POSITION_CLASS[position]].join(" ")
-      },
-      /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          onMouseEnter: handleMouseEnter,
-          onMouseLeave: handleMouseLeave,
-          className: ["pointer-events-auto", exitClass].join(" ")
-        },
-        /* @__PURE__ */ React.createElement(
-          ToastVisual,
+        className: ["fixed z-[9999] pointer-events-none", POSITION_CLASS[position]].join(" "),
+        children: /* @__PURE__ */ jsx(
+          "div",
           {
-            message: t.message,
-            description: t.description,
-            variant: t.variant,
-            action: t.action ? {
-              label: t.action.label,
-              onClick: () => {
-                t.action.onClick();
-                startExit(t.id);
+            onMouseEnter: handleMouseEnter,
+            onMouseLeave: handleMouseLeave,
+            className: ["pointer-events-auto", exitClass].join(" "),
+            children: /* @__PURE__ */ jsx(
+              ToastVisual,
+              {
+                message: t.message,
+                description: t.description,
+                variant: t.variant,
+                action: t.action ? {
+                  label: t.action.label,
+                  onClick: () => {
+                    t.action.onClick();
+                    startExit(t.id);
+                  }
+                } : void 0,
+                animate: !t.exiting,
+                origin: isTop ? "top" : "bottom",
+                onDismiss: () => startExit(t.id)
               }
-            } : void 0,
-            animate: !t.exiting,
-            origin: isTop ? "top" : "bottom",
-            onDismiss: () => startExit(t.id)
+            )
           }
         )
-      )
+      }
     ),
     document.body
   );

package/dist/components/toggle-card-compact.js

@@ -1,5 +1,6 @@
 "use client";
 import "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Pencil } from "lucide-react";
 function ToggleCardCompact({
   icon,
@@ -12,86 +13,93 @@ function ToggleCardCompact({
   editLabel = "Editar",
   name
 }) {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className: [
         "rounded-(--radius-card) overflow-hidden transition-colors border",
         checked ? "[border-color:var(--section-card-border-active)]" : "[border-color:var(--section-card-border)]"
-      ].join(" ")
-    },
-    name && /* @__PURE__ */ React.createElement("input", { type: "hidden", name, value: checked ? "on" : "" }),
-    /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: [
-          "flex items-center gap-3 px-4 py-3 transition-colors",
-          checked ? "[background:var(--section-card-header-bg-active)]" : ""
-        ].join(" ")
-      },
-      icon && /* @__PURE__ */ React.createElement(
-        "span",
-        {
-          className: [
-            "shrink-0",
-            checked ? "[color:var(--section-card-label-active)] opacity-80" : "text-(--text-disabled)"
-          ].join(" ")
-        },
-        icon
-      ),
-      /* @__PURE__ */ React.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React.createElement(
-        "p",
-        {
-          className: [
-            "text-caption font-semibold uppercase tracking-wide",
-            checked ? "[color:var(--section-card-label-active)]" : "[color:var(--section-card-label)]"
-          ].join(" ")
-        },
-        label
-      ), (checked ? summary : description) && /* @__PURE__ */ React.createElement(
-        "p",
-        {
-          className: [
-            "text-caption leading-snug mt-0.5 truncate",
-            checked ? "[color:var(--section-card-badge-active)]" : "[color:var(--section-card-badge)]"
-          ].join(" ")
-        },
-        checked ? summary : description
-      )),
-      checked && onEdit && /* @__PURE__ */ React.createElement(
-        "button",
-        {
-          type: "button",
-          onClick: onEdit,
-          "aria-label": editLabel,
-          className: "shrink-0 [color:var(--section-card-label-active)] opacity-70 hover:opacity-100 transition-opacity p-1 -m-1 rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-white/40"
-        },
-        /* @__PURE__ */ React.createElement(Pencil, { size: 14 })
-      ),
-      /* @__PURE__ */ React.createElement(
-        "button",
-        {
-          type: "button",
-          role: "switch",
-          "aria-checked": checked,
-          "aria-label": label,
-          onClick: () => onCheckedChange == null ? void 0 : onCheckedChange(!checked),
-          className: [
-            "relative inline-flex shrink-0 h-5 w-9 rounded-full transition-colors focus:outline-none focus-visible:ring-2",
-            checked ? "bg-(--surface-default)/30 focus-visible:ring-white/40" : "bg-(--surface-raised) border border-stroke-default focus-visible:ring-stroke-focus/30"
-          ].join(" ")
-        },
-        /* @__PURE__ */ React.createElement(
-          "span",
+      ].join(" "),
+      children: [
+        name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: checked ? "on" : "" }),
+        /* @__PURE__ */ jsxs(
+          "div",
           {
             className: [
-              "absolute top-0.5 inline-block h-4 w-4 rounded-full bg-(--surface-default) shadow-sm transition-transform",
-              checked ? "translate-x-[18px]" : "translate-x-0.5"
-            ].join(" ")
+              "flex items-center gap-3 px-4 py-3 transition-colors",
+              checked ? "[background:var(--section-card-header-bg-active)]" : ""
+            ].join(" "),
+            children: [
+              icon && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: [
+                    "shrink-0",
+                    checked ? "[color:var(--section-card-label-active)] opacity-80" : "text-(--text-disabled)"
+                  ].join(" "),
+                  children: icon
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: [
+                      "text-caption font-semibold uppercase tracking-wide",
+                      checked ? "[color:var(--section-card-label-active)]" : "[color:var(--section-card-label)]"
+                    ].join(" "),
+                    children: label
+                  }
+                ),
+                (checked ? summary : description) && /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: [
+                      "text-caption leading-snug mt-0.5 truncate",
+                      checked ? "[color:var(--section-card-badge-active)]" : "[color:var(--section-card-badge)]"
+                    ].join(" "),
+                    children: checked ? summary : description
+                  }
+                )
+              ] }),
+              checked && onEdit && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: onEdit,
+                  "aria-label": editLabel,
+                  className: "shrink-0 [color:var(--section-card-label-active)] opacity-70 hover:opacity-100 transition-opacity p-1 -m-1 rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-white/40",
+                  children: /* @__PURE__ */ jsx(Pencil, { size: 14 })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  role: "switch",
+                  "aria-checked": checked,
+                  "aria-label": label,
+                  onClick: () => onCheckedChange == null ? void 0 : onCheckedChange(!checked),
+                  className: [
+                    "relative inline-flex shrink-0 h-5 w-9 rounded-full transition-colors focus:outline-none focus-visible:ring-2",
+                    checked ? "bg-(--surface-default)/30 focus-visible:ring-white/40" : "bg-(--surface-raised) border border-stroke-default focus-visible:ring-stroke-focus/30"
+                  ].join(" "),
+                  children: /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: [
+                        "absolute top-0.5 inline-block h-4 w-4 rounded-full bg-(--surface-default) shadow-sm transition-transform",
+                        checked ? "translate-x-[18px]" : "translate-x-0.5"
+                      ].join(" ")
+                    }
+                  )
+                }
+              )
+            ]
           }
         )
-      )
-    )
+      ]
+    }
   );
 }
 export {