@assembleo/ui 0.1.0

package/dist/index.js

@@ -0,0 +1,1594 @@
+import { cva, cx } from 'class-variance-authority';
+import { Dialog as Dialog$1, Popover as Popover$1, Tabs as Tabs$1, Avatar as Avatar$1, Checkbox as Checkbox$1, Progress as Progress$1, RadioGroup as RadioGroup$1, ToggleGroup, Select as Select$1, Separator as Separator$1, Switch as Switch$1, Toast, Tooltip as Tooltip$1 } from 'radix-ui';
+import { createContext, Children, useContext, useId, useRef, useState, useCallback, useMemo, useEffect } from 'react';
+import { extendTailwindMerge } from 'tailwind-merge';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { CircleAlert, TriangleAlert, CircleCheck, Info, X, Check, Minus, ChevronRight, Search, ChevronsUpDown } from 'lucide-react';
+
+// src/components/avatar/avatar.tsx
+var fontSizes = [
+  "display",
+  "title-1",
+  "title-2",
+  "title-3",
+  "headline",
+  "body",
+  "callout",
+  "subhead",
+  "footnote",
+  "caption"
+];
+var twMergeAssembleo = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": fontSizes.map((size) => `text-${size}`)
+    }
+  }
+});
+function cn(...classes) {
+  return twMergeAssembleo(cx(classes));
+}
+var avatar = cva(
+  "relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden rounded-full",
+  {
+    variants: {
+      size: {
+        sm: "size-7",
+        md: "size-9",
+        lg: "size-touch",
+        xl: "size-16"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var initialsSizeClasses = {
+  sm: "text-caption",
+  md: "text-footnote",
+  lg: "text-callout",
+  xl: "text-title-3"
+};
+var expressiveBackgrounds = [
+  "bg-terracota-soft",
+  "bg-jardim-soft",
+  "bg-ambar-soft",
+  "bg-lavanda-soft",
+  "bg-ceu-soft"
+];
+function backgroundFor(name) {
+  let sum = 0;
+  for (const char of name) {
+    sum += char.codePointAt(0) ?? 0;
+  }
+  return expressiveBackgrounds[sum % expressiveBackgrounds.length] ?? "bg-terracota-soft";
+}
+function initialsFor(name) {
+  return name.trim().split(/\s+/).slice(0, 2).map((word) => word[0] ?? "").join("").toUpperCase();
+}
+function Avatar({ name, src, size, className, ...props }) {
+  return (
+    /*
+     * O nome acessível mora no Root: com ou sem foto carregada, o leitor de
+     * tela anuncia a pessoa uma vez só — a foto e as iniciais são decorativas.
+     */
+    /* @__PURE__ */ jsxs(
+      Avatar$1.Root,
+      {
+        role: "img",
+        "aria-label": name,
+        className: cn(avatar({ size }), className),
+        ...props,
+        children: [
+          src ? /* @__PURE__ */ jsx(Avatar$1.Image, { src, alt: "", className: "size-full object-cover" }) : null,
+          /* @__PURE__ */ jsx(
+            Avatar$1.Fallback,
+            {
+              "aria-hidden": "true",
+              className: cn(
+                "flex size-full items-center justify-center font-friendly font-semibold text-text",
+                initialsSizeClasses[size ?? "md"],
+                backgroundFor(name)
+              ),
+              children: initialsFor(name)
+            }
+          )
+        ]
+      }
+    )
+  );
+}
+function AvatarGroup({ max, size, className, children, ...props }) {
+  const items = Children.toArray(children);
+  const visible = max != null && max >= 0 ? items.slice(0, max) : items;
+  const excess = items.length - visible.length;
+  return (
+    /*
+     * A sobreposição conta a cena — "estas pessoas juntas" — e o anel na cor
+     * da superfície recorta cada rosto contra o vizinho de trás.
+     */
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex items-center -space-x-2 *:rounded-full *:ring-2 *:ring-surface",
+          className
+        ),
+        ...props,
+        children: [
+          visible,
+          excess > 0 ? /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: cn(
+                avatar({ size }),
+                "bg-surface-sunken text-caption font-semibold text-text-secondary"
+              ),
+              children: [
+                "+",
+                excess
+              ]
+            }
+          ) : null
+        ]
+      }
+    )
+  );
+}
+var badge = cva(
+  "inline-flex items-center gap-1 rounded-pill px-2.5 py-0.5 text-caption font-semibold",
+  {
+    variants: {
+      tone: {
+        neutral: "bg-surface-sunken text-text-secondary",
+        accent: "bg-accent-soft text-accent-soft-text",
+        success: "bg-success-soft text-success-soft-text",
+        warning: "bg-warning-soft text-warning-soft-text",
+        danger: "bg-danger-soft text-danger-soft-text",
+        /*
+         * A vila não tem par `-soft-text`: o texto fica na voz secundária —
+         * contraste AA garantido pelo próprio tema — e a identidade da cor
+         * vem do fundo suave com a bolinha forte, não do texto.
+         */
+        terracota: "bg-terracota-soft text-text-secondary",
+        jardim: "bg-jardim-soft text-text-secondary",
+        ambar: "bg-ambar-soft text-text-secondary",
+        lavanda: "bg-lavanda-soft text-text-secondary",
+        ceu: "bg-ceu-soft text-text-secondary"
+      }
+    },
+    defaultVariants: {
+      tone: "neutral"
+    }
+  }
+);
+var dotToneClasses = {
+  neutral: "bg-text-muted",
+  accent: "bg-accent",
+  success: "bg-success",
+  warning: "bg-warning",
+  danger: "bg-danger",
+  terracota: "bg-terracota",
+  jardim: "bg-jardim",
+  ambar: "bg-ambar",
+  lavanda: "bg-lavanda",
+  ceu: "bg-ceu"
+};
+function Badge({ tone, dot = false, className, children, ...props }) {
+  return /* @__PURE__ */ jsxs("span", { className: cn(badge({ tone }), className), ...props, children: [
+    dot ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: cn("size-1.5 shrink-0 rounded-full", dotToneClasses[tone ?? "neutral"])
+      }
+    ) : null,
+    children
+  ] });
+}
+var banner = cva("flex gap-3 rounded-surface squircle p-4 text-subhead", {
+  variants: {
+    /* Sempre o par soft/soft-text: aviso é fundo calmo, nunca bloco gritado. */
+    tone: {
+      info: "bg-accent-soft text-accent-soft-text",
+      success: "bg-success-soft text-success-soft-text",
+      warning: "bg-warning-soft text-warning-soft-text",
+      danger: "bg-danger-soft text-danger-soft-text"
+    }
+  },
+  defaultVariants: {
+    tone: "info"
+  }
+});
+var toneIcon = {
+  info: Info,
+  success: CircleCheck,
+  warning: TriangleAlert,
+  danger: CircleAlert
+};
+function Banner({ tone, title, onDismiss, className, children, ...props }) {
+  const Icon = toneIcon[tone ?? "info"];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: tone === "danger" ? "alert" : "status",
+      className: cn(banner({ tone }), className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", className: "mt-0.5 size-5 shrink-0" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+          title ? /* @__PURE__ */ jsx("p", { className: "font-semibold", children: title }) : null,
+          children
+        ] }),
+        onDismiss ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Dispensar aviso",
+            onClick: onDismiss,
+            className: cn(
+              "relative -my-1 -mr-1 grid size-8 shrink-0 place-items-center self-start rounded-control-sm",
+              "opacity-70 transition-opacity duration-(--motion-quick) ease-(--ease-out-soft) hover:opacity-100",
+              // O X herda o tom do banner e ganha 44px de alvo via pseudo-elemento.
+              "before:absolute before:-inset-1.5"
+            ),
+            children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "size-4" })
+          }
+        ) : null
+      ]
+    }
+  );
+}
+var spinner = cva("inline-block animate-spin", {
+  variants: {
+    size: {
+      sm: "size-4",
+      md: "size-5",
+      lg: "size-7"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+function Spinner({ size, label = "Carregando", className }) {
+  return /* @__PURE__ */ jsxs("span", { role: "status", className: cn(spinner({ size }), className), children: [
+    /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", className: "size-full", children: [
+      /* @__PURE__ */ jsx(
+        "circle",
+        {
+          cx: "12",
+          cy: "12",
+          r: "10",
+          stroke: "currentColor",
+          strokeWidth: "3",
+          className: "opacity-25"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M22 12a10 10 0 0 0-10-10",
+          stroke: "currentColor",
+          strokeWidth: "3",
+          strokeLinecap: "round"
+        }
+      )
+    ] }),
+    label ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: label }) : null
+  ] });
+}
+var button = cva(
+  [
+    "relative inline-flex items-center justify-center gap-2",
+    "rounded-control squircle select-none",
+    "transition-[transform,background-color,border-color,opacity,box-shadow]",
+    "duration-(--motion-quick) ease-(--ease-out-soft)",
+    // O aperto: encolher um fio no active é o feedback tátil da Apple.
+    "active:scale-[0.97]",
+    "disabled:pointer-events-none disabled:opacity-50"
+  ],
+  {
+    variants: {
+      variant: {
+        primary: "bg-accent text-accent-text hover:bg-accent-hover active:bg-accent-active",
+        /* O botão "tingido" do iOS: presença sem gritar. */
+        tonal: "bg-accent-soft text-accent-soft-text hover:brightness-97 dark:hover:brightness-110",
+        secondary: "bg-surface text-text border border-border-strong hover:bg-surface-sunken",
+        ghost: "bg-transparent text-accent-soft-text hover:bg-accent-soft",
+        danger: "bg-danger text-danger-text hover:brightness-110",
+        "danger-tonal": "bg-danger-soft text-danger-soft-text hover:brightness-97"
+      },
+      size: {
+        sm: "min-h-9 px-3.5 text-subhead font-semibold",
+        md: "min-h-touch px-5 text-headline",
+        lg: "min-h-13 px-6 text-headline"
+      },
+      /**
+       * Em celular o padrão é ocupar a largura toda: alvo maior e polegar não
+       * precisa mirar. `auto` é a exceção, para botão em linha.
+       */
+      width: {
+        full: "w-full",
+        auto: "w-auto"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md",
+      width: "full"
+    }
+  }
+);
+function Button({
+  variant,
+  size,
+  width,
+  loading = false,
+  className,
+  type,
+  disabled,
+  children,
+  ...props
+}) {
+  return (
+    // Sem `type` explícito, um botão dentro de formulário submete — que é o
+    // default do HTML e quase nunca o que se quis escrever.
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: type ?? "button",
+        className: cn(button({ variant, size, width }), className),
+        disabled: disabled || loading,
+        "aria-busy": loading || void 0,
+        ...props,
+        children: [
+          loading ? /* @__PURE__ */ jsx("span", { className: "absolute inset-0 grid place-items-center", children: /* @__PURE__ */ jsx(Spinner, { size: size === "sm" ? "sm" : "md" }) }) : null,
+          /* @__PURE__ */ jsx("span", { className: cn("inline-flex items-center gap-2", loading && "invisible"), children })
+        ]
+      }
+    )
+  );
+}
+var card = cva(
+  // A superfície branca sobre o fundo cinza: é dessa inversão que nasce a
+  // profundidade do sistema — nunca de bordas pesadas.
+  ["rounded-surface squircle text-text"],
+  {
+    variants: {
+      variant: {
+        /* Sem sombra: para quando o cartão já está dentro de outra superfície. */
+        flat: "border border-border bg-surface",
+        raised: "bg-surface shadow-level-1",
+        /* Acima de tudo na tela — em tema escuro a superfície mais clara é que separa. */
+        floating: "bg-surface-raised shadow-level-2"
+      },
+      padding: {
+        /* Para conteúdo que sangra até a borda (imagem, lista interna). */
+        none: "p-0",
+        md: "p-5",
+        lg: "p-6"
+      }
+    },
+    defaultVariants: {
+      variant: "raised",
+      padding: "md"
+    }
+  }
+);
+function Card({
+  variant,
+  padding,
+  interactive = false,
+  className,
+  children,
+  ...props
+}) {
+  if (interactive) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: cn(
+          card({ variant, padding }),
+          "block w-full text-left",
+          "transition-[transform,box-shadow] duration-(--motion-quick) ease-(--ease-spring)",
+          // O aperto tem mola: o cartão afunda um fio e a sombra sobe no hover.
+          "hover:shadow-level-2 active:scale-[0.99]",
+          "disabled:pointer-events-none disabled:opacity-50",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { className: cn(card({ variant, padding }), className), ...props, children });
+}
+var FieldContext = createContext(null);
+function useFieldContext() {
+  return useContext(FieldContext);
+}
+function Field({ label, hint, error, required, className, children }) {
+  const id = useId();
+  const controlId = `${id}-controle`;
+  const hintId = hint ? `${id}-dica` : void 0;
+  const errorId = error ? `${id}-erro` : void 0;
+  return /* @__PURE__ */ jsx(FieldContext.Provider, { value: { controlId, hintId, errorId, invalid: Boolean(error) }, children: /* @__PURE__ */ jsxs("div", { className: cn("flex w-full flex-col gap-1.5", className), children: [
+    /* @__PURE__ */ jsxs("label", { htmlFor: controlId, className: "text-subhead font-medium text-text", children: [
+      label,
+      required ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-danger", children: " *" }) : null
+    ] }),
+    children,
+    hint && !error ? /* @__PURE__ */ jsx("p", { id: hintId, className: "text-footnote text-text-muted", children: hint }) : null,
+    /* @__PURE__ */ jsx(
+      "p",
+      {
+        id: errorId,
+        "aria-live": "polite",
+        className: cn("text-footnote text-danger-soft-text", !error && "hidden"),
+        children: error
+      }
+    )
+  ] }) });
+}
+var boxClasses = [
+  // `group` é o que deixa o ícone interno saber se o estado é indeterminado.
+  "group size-6 shrink-0 rounded-control-sm squircle",
+  "bg-surface-sunken border border-border-strong",
+  "transition-[background-color,border-color] duration-(--motion-quick) ease-(--ease-out-soft)",
+  "data-[state=checked]:bg-accent data-[state=checked]:border-accent data-[state=checked]:text-accent-text",
+  "data-[state=indeterminate]:bg-accent data-[state=indeterminate]:border-accent data-[state=indeterminate]:text-accent-text",
+  "aria-invalid:border-danger",
+  "disabled:pointer-events-none disabled:opacity-50"
+].join(" ");
+function Checkbox({ label, className, id, ...props }) {
+  const field = useFieldContext();
+  const generatedId = useId();
+  const controlId = id ?? field?.controlId ?? generatedId;
+  const box = /* @__PURE__ */ jsx(
+    Checkbox$1.Root,
+    {
+      id: controlId,
+      "aria-invalid": field?.invalid || void 0,
+      "aria-describedby": field ? [field.errorId, field.hintId].filter(Boolean).join(" ") || void 0 : void 0,
+      className: cn(boxClasses, className),
+      ...props,
+      children: /* @__PURE__ */ jsxs(Checkbox$1.Indicator, { className: "flex items-center justify-center animate-pop-in", children: [
+        /* @__PURE__ */ jsx(
+          Check,
+          {
+            "aria-hidden": "true",
+            strokeWidth: 3,
+            className: "size-4 group-data-[state=indeterminate]:hidden"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Minus,
+          {
+            "aria-hidden": "true",
+            strokeWidth: 3,
+            className: "hidden size-4 group-data-[state=indeterminate]:block"
+          }
+        )
+      ] })
+    }
+  );
+  if (!label) {
+    return box;
+  }
+  return /* @__PURE__ */ jsxs("label", { htmlFor: controlId, className: "flex min-h-touch select-none items-center gap-3", children: [
+    box,
+    /* @__PURE__ */ jsx("span", { className: "text-body text-text", children: label })
+  ] });
+}
+var Dialog = Dialog$1.Root;
+function DialogTrigger({ asChild = true, ...props }) {
+  return /* @__PURE__ */ jsx(Dialog$1.Trigger, { asChild, ...props });
+}
+function DialogContent({ className, children, ...props }) {
+  return /* @__PURE__ */ jsxs(Dialog$1.Portal, { children: [
+    /* @__PURE__ */ jsx(Dialog$1.Overlay, { className: "fixed inset-0 z-(--z-overlay) bg-overlay animate-fade-in" }),
+    /* @__PURE__ */ jsxs(
+      Dialog$1.Content,
+      {
+        className: cn(
+          "fixed top-1/2 left-1/2 z-(--z-modal) -translate-x-1/2 -translate-y-1/2",
+          // Em celular a margem de 1.25rem por lado respira; max-w segura no desktop.
+          "w-[calc(100vw-2.5rem)] max-w-md",
+          "rounded-surface-lg squircle bg-surface p-6 shadow-level-3",
+          "animate-pop-in",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          /* @__PURE__ */ jsx(
+            Dialog$1.Close,
+            {
+              "aria-label": "Fechar",
+              className: cn(
+                "absolute top-3 right-3 grid size-9 place-items-center rounded-control-sm squircle",
+                "text-text-secondary transition-colors duration-(--motion-quick) ease-(--ease-out-soft)",
+                "hover:bg-surface-sunken active:bg-surface-sunken"
+              ),
+              children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "size-5" })
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function DialogHeader({ className, children, ...props }) {
+  return (
+    // pr-6 reserva o canto do botão X — título longo passa por baixo sem colidir.
+    /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-1.5 pr-6", className), ...props, children })
+  );
+}
+function DialogTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(Dialog$1.Title, { className: cn("text-title-3", className), ...props });
+}
+function DialogDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Dialog$1.Description,
+    {
+      className: cn("text-callout text-text-secondary", className),
+      ...props
+    }
+  );
+}
+function DialogFooter({ className, children, ...props }) {
+  return (
+    // Em celular os botões empilham com o principal embaixo — onde o polegar já
+    // está; no desktop, lado a lado à direita, com o principal por último.
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("mt-6 flex flex-col-reverse gap-3 sm:flex-row sm:justify-end", className),
+        ...props,
+        children
+      }
+    )
+  );
+}
+function DialogClose({ asChild = true, ...props }) {
+  return /* @__PURE__ */ jsx(Dialog$1.Close, { asChild, ...props });
+}
+function EmptyState({
+  illustration,
+  icon,
+  title,
+  description,
+  action,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center gap-4 py-10 text-center", className), ...props, children: [
+    illustration ?? (icon ? (
+      // Decoração pura: o título logo abaixo já diz tudo ao leitor de tela.
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": "true",
+          className: "grid size-16 place-items-center rounded-expressive squircle bg-accent-soft text-accent-soft-text [&_svg]:size-8",
+          children: icon
+        }
+      )
+    ) : null),
+    /* @__PURE__ */ jsx("p", { className: "text-title-3", children: title }),
+    description ? /* @__PURE__ */ jsx("p", { className: "max-w-sm text-balance text-callout text-text-secondary", children: description }) : null,
+    action
+  ] });
+}
+var iconButton = cva(
+  [
+    "inline-flex shrink-0 items-center justify-center",
+    "rounded-control squircle select-none",
+    // O ícone tem tamanho fixo independente do que o lucide mandar por padrão.
+    "[&_svg]:size-5 [&_svg]:shrink-0",
+    "transition-[transform,background-color,border-color,opacity,box-shadow]",
+    // Mola em vez de curva suave: sem rótulo, o quique é o que confirma o toque.
+    "duration-(--motion-quick) ease-(--ease-spring)",
+    "active:scale-[0.94]",
+    "disabled:pointer-events-none disabled:opacity-50"
+  ],
+  {
+    variants: {
+      /* O mesmo vocabulário de cor do Button — quem aprende um, leu os dois. */
+      variant: {
+        primary: "bg-accent text-accent-text hover:bg-accent-hover active:bg-accent-active",
+        tonal: "bg-accent-soft text-accent-soft-text hover:brightness-97 dark:hover:brightness-110",
+        secondary: "bg-surface text-text border border-border-strong hover:bg-surface-sunken",
+        ghost: "bg-transparent text-accent-soft-text hover:bg-accent-soft",
+        "danger-tonal": "bg-danger-soft text-danger-soft-text hover:brightness-97"
+      },
+      size: {
+        sm: "size-9",
+        md: "size-touch"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+);
+function IconButton({
+  label,
+  variant,
+  size,
+  className,
+  type,
+  children,
+  ...props
+}) {
+  return (
+    // Mesmo cuidado do Button: sem `type`, um botão em formulário submete.
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: type ?? "button",
+        "aria-label": label,
+        className: cn(iconButton({ variant, size }), className),
+        ...props,
+        children
+      }
+    )
+  );
+}
+var fieldControlClasses = [
+  "w-full rounded-control squircle",
+  "bg-surface-sunken text-text text-body",
+  "placeholder:text-text-muted",
+  "border border-transparent",
+  "transition-[border-color,box-shadow] duration-(--motion-quick) ease-(--ease-out-soft)",
+  "outline-none focus-visible:outline-none",
+  "focus:border-accent focus:ring-4 focus:ring-accent/15",
+  "aria-invalid:border-danger aria-invalid:ring-4 aria-invalid:ring-danger/15",
+  "disabled:pointer-events-none disabled:opacity-50"
+].join(" ");
+function Input({ className, id, type, ...props }) {
+  const field = useFieldContext();
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      id: id ?? field?.controlId,
+      type: type ?? "text",
+      "aria-invalid": field?.invalid || void 0,
+      "aria-describedby": field ? [field.errorId, field.hintId].filter(Boolean).join(" ") || void 0 : void 0,
+      className: cn(fieldControlClasses, "min-h-touch px-4", className),
+      ...props
+    }
+  );
+}
+function Textarea({ className, id, rows, ...props }) {
+  const field = useFieldContext();
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      id: id ?? field?.controlId,
+      rows: rows ?? 4,
+      "aria-invalid": field?.invalid || void 0,
+      "aria-describedby": field ? [field.errorId, field.hintId].filter(Boolean).join(" ") || void 0 : void 0,
+      className: cn(fieldControlClasses, "min-h-touch resize-y px-4 py-3", className),
+      ...props
+    }
+  );
+}
+function List({ header, footer, className, children }) {
+  const headerId = useId();
+  return /* @__PURE__ */ jsxs("section", { className: cn("w-full", className), children: [
+    header ? /* @__PURE__ */ jsx(
+      "p",
+      {
+        id: headerId,
+        className: "px-5 pb-2 text-footnote font-medium text-text-secondary uppercase tracking-wide",
+        children: header
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(
+      "ul",
+      {
+        "aria-labelledby": header ? headerId : void 0,
+        className: "divide-y divide-border overflow-hidden rounded-surface squircle bg-surface",
+        children
+      }
+    ),
+    footer ? /* @__PURE__ */ jsx("p", { className: "px-5 pt-2 text-footnote text-text-muted", children: footer }) : null
+  ] });
+}
+var iconBadge = cva(
+  // O quadradinho colorido dos Ajustes do iOS: o ícone ganha um chão próprio
+  // e a lista ganha ritmo visual sem que nenhum texto dependa dessa cor.
+  "grid size-8 shrink-0 place-items-center rounded-control-sm squircle [&_svg]:size-5",
+  {
+    variants: {
+      tone: {
+        accent: "bg-accent text-accent-text",
+        terracota: "bg-terracota text-white",
+        jardim: "bg-jardim text-white",
+        ambar: "bg-ambar text-white",
+        lavanda: "bg-lavanda text-white",
+        ceu: "bg-ceu text-white"
+      }
+    },
+    defaultVariants: {
+      tone: "accent"
+    }
+  }
+);
+function ListItem({
+  icon,
+  iconTone,
+  title,
+  subtitle,
+  value,
+  onClick,
+  className
+}) {
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: iconBadge({ tone: iconTone }), children: icon }) : null,
+    /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [
+      /* @__PURE__ */ jsx("span", { className: "truncate text-body", children: title }),
+      subtitle ? /* @__PURE__ */ jsx("span", { className: "truncate text-footnote text-text-muted", children: subtitle }) : null
+    ] }),
+    value ? /* @__PURE__ */ jsx("span", { className: "shrink-0 text-body text-text-secondary", children: value }) : null,
+    onClick ? (
+      /* O chevron é redundante para o leitor de tela — o papel de botão já diz tudo. */
+      /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true", className: "size-4.5 shrink-0 text-text-muted" })
+    ) : null
+  ] });
+  const rowClasses = "flex min-h-touch w-full items-center gap-3 px-5 py-2";
+  return /* @__PURE__ */ jsx("li", { className: cn(className), children: onClick ? /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: cn(
+        rowClasses,
+        "text-left transition-colors duration-(--motion-quick) ease-(--ease-out-soft)",
+        "hover:bg-surface-sunken active:bg-surface-sunken"
+      ),
+      children: content
+    }
+  ) : /* @__PURE__ */ jsx("div", { className: rowClasses, children: content }) });
+}
+var Popover = Popover$1.Root;
+function PopoverTrigger({ asChild = true, ...props }) {
+  return /* @__PURE__ */ jsx(Popover$1.Trigger, { asChild, ...props });
+}
+function PopoverContent({
+  className,
+  sideOffset = 8,
+  collisionPadding = 16,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(
+    Popover$1.Content,
+    {
+      sideOffset,
+      collisionPadding,
+      className: cn(
+        "z-(--z-overlay) w-72 rounded-surface squircle border border-border",
+        "material-thick p-4 shadow-level-3",
+        "animate-pop-in",
+        className
+      ),
+      ...props,
+      children
+    }
+  ) });
+}
+function Progress({ value, label, className }) {
+  const indeterminate = value === void 0;
+  return /* @__PURE__ */ jsx(
+    Progress$1.Root,
+    {
+      value: value ?? null,
+      "aria-label": label,
+      className: cn(
+        "h-2 w-full overflow-hidden rounded-pill bg-surface-sunken",
+        // Sem número, o próprio trilho pulsa — movimento sem prometer medida.
+        indeterminate && "animate-shimmer",
+        className
+      ),
+      children: indeterminate ? null : /* @__PURE__ */ jsx(
+        Progress$1.Indicator,
+        {
+          className: cn(
+            "h-full rounded-pill bg-accent",
+            // Gentil de propósito: o quórum sobe conforme confirmações chegam,
+            // e o deslizamento comunica "andou" melhor que um salto seco.
+            "transition-[width] duration-(--motion-gentle) ease-(--ease-out-soft)"
+          ),
+          style: { width: `${value}%` }
+        }
+      )
+    }
+  );
+}
+function RadioGroup({ className, id, ...props }) {
+  const field = useFieldContext();
+  return /* @__PURE__ */ jsx(
+    RadioGroup$1.Root,
+    {
+      id: id ?? field?.controlId,
+      "aria-invalid": field?.invalid || void 0,
+      "aria-describedby": field ? [field.errorId, field.hintId].filter(Boolean).join(" ") || void 0 : void 0,
+      className: cn("flex flex-col", className),
+      ...props
+    }
+  );
+}
+var circleClasses = [
+  "flex size-6 shrink-0 items-center justify-center rounded-full",
+  "bg-surface-sunken border border-border-strong",
+  "transition-[border-color,background-color] duration-(--motion-quick) ease-(--ease-out-soft)",
+  "data-[state=checked]:border-accent",
+  "disabled:pointer-events-none disabled:opacity-50"
+].join(" ");
+function RadioGroupItem({ label, className, id, ...props }) {
+  const generatedId = useId();
+  const itemId = id ?? generatedId;
+  return (
+    // O label embrulha o círculo e aponta para ele por id: clicar no texto
+    // seleciona, e a linha inteira vira alvo de toque de 44px sem inflar o
+    // controle.
+    /* @__PURE__ */ jsxs("label", { htmlFor: itemId, className: "flex min-h-touch select-none items-center gap-3", children: [
+      /* @__PURE__ */ jsx(RadioGroup$1.Item, { id: itemId, className: cn(circleClasses, className), ...props, children: /* @__PURE__ */ jsx(RadioGroup$1.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "size-3 rounded-full bg-accent animate-pop-in" }) }) }),
+      /* @__PURE__ */ jsx("span", { className: "text-body text-text", children: label })
+    ] })
+  );
+}
+function SearchField({
+  onClear,
+  className,
+  onChange,
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  const inputRef = useRef(null);
+  const [internalValue, setInternalValue] = useState(String(props.defaultValue ?? ""));
+  const currentValue = props.value ?? internalValue;
+  const hasValue = String(currentValue).length > 0;
+  const handleChange = (event) => {
+    setInternalValue(event.target.value);
+    onChange?.(event);
+  };
+  const handleClear = () => {
+    if (props.value === void 0 && inputRef.current) {
+      inputRef.current.value = "";
+      setInternalValue("");
+    }
+    onClear?.();
+    inputRef.current?.focus();
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ jsx(
+      Search,
+      {
+        "aria-hidden": "true",
+        className: "pointer-events-none absolute top-1/2 left-3.5 size-4.5 -translate-y-1/2 text-text-muted"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "search",
+        "aria-label": ariaLabel ?? "Buscar",
+        onChange: handleChange,
+        className: cn(
+          fieldControlClasses,
+          "min-h-touch rounded-pill pl-10 pr-10 [&::-webkit-search-cancel-button]:appearance-none"
+        ),
+        ...props
+      }
+    ),
+    hasValue ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Limpar busca",
+        onClick: handleClear,
+        className: cn(
+          // A coluna inteira à direita é clicável — 44px de alvo dentro do campo.
+          "absolute inset-y-0 right-0 grid w-touch place-items-center rounded-pill",
+          "text-text-muted transition-colors duration-(--motion-quick) ease-(--ease-out-soft)",
+          "hover:text-text"
+        ),
+        children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "size-4" })
+      }
+    ) : null
+  ] });
+}
+var container = cva("gap-1 rounded-control squircle bg-surface-sunken p-1", {
+  variants: {
+    /** Como no Button: em celular o padrão é a largura toda. */
+    width: {
+      full: "flex w-full",
+      auto: "inline-flex w-auto"
+    }
+  },
+  defaultVariants: {
+    width: "full"
+  }
+});
+var segmentClasses = [
+  "min-h-9 flex-1 select-none rounded-control-sm squircle px-3.5",
+  "text-subhead font-medium text-text-secondary",
+  "transition-[background-color,color,box-shadow] duration-(--motion-quick) ease-(--ease-out-soft)",
+  // O selecionado "sobe" um nível: superfície clara e sombra de repouso.
+  "data-[state=on]:bg-surface data-[state=on]:text-text data-[state=on]:shadow-level-1",
+  "disabled:pointer-events-none disabled:opacity-50"
+].join(" ");
+function SegmentedControl({
+  options,
+  value,
+  defaultValue,
+  onValueChange,
+  "aria-label": ariaLabel,
+  width,
+  disabled,
+  className
+}) {
+  const [internalValue, setInternalValue] = useState(defaultValue ?? options[0]?.value);
+  const currentValue = value ?? internalValue;
+  const handleValueChange = (next) => {
+    if (!next || next === currentValue) {
+      return;
+    }
+    setInternalValue(next);
+    onValueChange?.(next);
+  };
+  return /* @__PURE__ */ jsx(
+    ToggleGroup.Root,
+    {
+      type: "single",
+      value: currentValue,
+      onValueChange: handleValueChange,
+      "aria-label": ariaLabel,
+      disabled,
+      className: cn(container({ width }), className),
+      children: options.map((option) => /* @__PURE__ */ jsx(
+        ToggleGroup.Item,
+        {
+          value: option.value,
+          className: segmentClasses,
+          children: option.label
+        },
+        option.value
+      ))
+    }
+  );
+}
+function Select({
+  placeholder,
+  "aria-label": ariaLabel,
+  id,
+  className,
+  children,
+  ...props
+}) {
+  const field = useFieldContext();
+  return /* @__PURE__ */ jsxs(Select$1.Root, { ...props, children: [
+    /* @__PURE__ */ jsxs(
+      Select$1.Trigger,
+      {
+        id: id ?? field?.controlId,
+        "aria-label": ariaLabel,
+        "aria-invalid": field?.invalid || void 0,
+        "aria-describedby": field ? [field.errorId, field.hintId].filter(Boolean).join(" ") || void 0 : void 0,
+        className: cn(
+          fieldControlClasses,
+          "inline-flex min-h-touch items-center justify-between gap-2 px-4 text-left",
+          "data-[placeholder]:text-text-muted",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(Select$1.Value, { placeholder }),
+          /* @__PURE__ */ jsx(Select$1.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronsUpDown, { "aria-hidden": "true", className: "size-4 shrink-0 text-text-muted" }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(
+      Select$1.Content,
+      {
+        position: "popper",
+        sideOffset: 6,
+        className: cn(
+          "z-(--z-overlay) overflow-hidden rounded-surface squircle",
+          "material-thick border border-border shadow-level-3",
+          "animate-pop-in",
+          // A lista nunca fica mais estreita que o campo que a abriu.
+          "min-w-(--radix-select-trigger-width) max-h-(--radix-select-content-available-height)"
+        ),
+        children: /* @__PURE__ */ jsx(Select$1.Viewport, { className: "p-1", children })
+      }
+    ) })
+  ] });
+}
+function SelectItem({ className, children, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    Select$1.Item,
+    {
+      className: cn(
+        "flex min-h-touch select-none items-center justify-between gap-2 rounded-control-sm squircle px-3",
+        "text-body text-text",
+        // Aqui o destaque É o anel de foco: o item realçado troca de fundo,
+        // então o outline global só duplicaria o sinal.
+        "outline-none data-[highlighted]:bg-accent-soft data-[highlighted]:text-accent-soft-text",
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Select$1.ItemText, { children }),
+        /* @__PURE__ */ jsx(Select$1.ItemIndicator, { asChild: true, children: /* @__PURE__ */ jsx(Check, { "aria-hidden": "true", className: "size-4 shrink-0" }) })
+      ]
+    }
+  );
+}
+function Separator({
+  orientation = "horizontal",
+  decorative = true,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Separator$1.Root,
+    {
+      orientation,
+      decorative,
+      className: cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var Sheet = Dialog$1.Root;
+function SheetTrigger({ asChild = true, ...props }) {
+  return /* @__PURE__ */ jsx(Dialog$1.Trigger, { asChild, ...props });
+}
+function SheetContent({ className, children, ...props }) {
+  return /* @__PURE__ */ jsxs(Dialog$1.Portal, { children: [
+    /* @__PURE__ */ jsx(Dialog$1.Overlay, { className: "fixed inset-0 z-(--z-overlay) bg-overlay animate-fade-in" }),
+    /* @__PURE__ */ jsxs(
+      Dialog$1.Content,
+      {
+        className: cn(
+          "fixed inset-x-0 bottom-0 z-(--z-modal)",
+          "rounded-t-surface-lg squircle material-thick border-t border-border shadow-level-3",
+          // O pb estica até o maior entre o padding do sheet e a safe area — o
+          // conteúdo nunca fica embaixo da barra de gestos do iPhone.
+          "p-6 pb-[max(1.5rem,env(safe-area-inset-bottom))]",
+          "max-h-[85dvh] overflow-y-auto",
+          "animate-slide-up",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "mx-auto mb-4 h-1.5 w-10 rounded-pill bg-border-strong" }),
+          children
+        ]
+      }
+    )
+  ] });
+}
+function SheetHeader({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-1.5", className), ...props, children });
+}
+function SheetTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(Dialog$1.Title, { className: cn("text-title-3", className), ...props });
+}
+function SheetDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Dialog$1.Description,
+    {
+      className: cn("text-callout text-text-secondary", className),
+      ...props
+    }
+  );
+}
+var skeleton = cva("bg-surface-sunken animate-shimmer", {
+  variants: {
+    shape: {
+      text: "h-4 w-full rounded-control-sm",
+      title: "h-6 w-2/5 rounded-control-sm",
+      block: "h-24 rounded-surface",
+      circle: "size-10 rounded-full"
+    }
+  },
+  defaultVariants: {
+    shape: "text"
+  }
+});
+function Skeleton({ shape, className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: cn(skeleton({ shape }), className), ...props });
+}
+var trackClasses = [
+  "inline-flex h-8 w-13 shrink-0 items-center rounded-pill",
+  "bg-surface-sunken border border-border",
+  "transition-[background-color,border-color] duration-(--motion-quick) ease-(--ease-out-soft)",
+  "data-[state=checked]:bg-accent data-[state=checked]:border-accent",
+  "disabled:pointer-events-none disabled:opacity-50"
+].join(" ");
+var thumbClasses = [
+  // Branco fixo nos dois temas, como no iOS: sobre o trilho rebaixado ou sobre
+  // o accent, é a sombra que garante a leitura do polegar.
+  "pointer-events-none block size-7 rounded-full bg-white shadow-level-1",
+  "transition-transform duration-(--motion-quick) ease-(--ease-out-soft)",
+  "translate-x-0.5 data-[state=checked]:translate-x-5"
+].join(" ");
+function Switch({ label, className, id, ...props }) {
+  const field = useFieldContext();
+  const generatedId = useId();
+  const controlId = id ?? field?.controlId ?? generatedId;
+  const control = /* @__PURE__ */ jsx(
+    Switch$1.Root,
+    {
+      id: controlId,
+      "aria-invalid": field?.invalid || void 0,
+      "aria-describedby": field ? [field.errorId, field.hintId].filter(Boolean).join(" ") || void 0 : void 0,
+      className: cn(trackClasses, className),
+      ...props,
+      children: /* @__PURE__ */ jsx(Switch$1.Thumb, { className: thumbClasses })
+    }
+  );
+  if (!label) {
+    return control;
+  }
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      htmlFor: controlId,
+      className: "flex min-h-touch w-full select-none items-center justify-between gap-3",
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "text-body text-text", children: label }),
+        control
+      ]
+    }
+  );
+}
+var Tabs = Tabs$1.Root;
+function TabsList({ className, children, ...props }) {
+  return (
+    // A borda inferior é o trilho onde a sublinha do trigger ativo se apoia.
+    /* @__PURE__ */ jsx(Tabs$1.List, { className: cn("flex gap-1 border-b border-border", className), ...props, children })
+  );
+}
+function TabsTrigger({ className, children, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    Tabs$1.Trigger,
+    {
+      className: cn(
+        "group relative min-h-touch select-none px-4 text-subhead font-medium text-text-secondary",
+        "transition-colors duration-(--motion-quick) ease-(--ease-out-soft)",
+        "hover:text-text",
+        "data-[state=active]:text-accent-soft-text",
+        "disabled:pointer-events-none disabled:opacity-50",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "absolute inset-x-3 -bottom-px h-0.5 rounded-pill bg-accent",
+              "opacity-0 transition-opacity duration-(--motion-quick) ease-(--ease-out-soft)",
+              "group-data-[state=active]:opacity-100"
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function TabsContent({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx(Tabs$1.Content, { className: cn("pt-5", className), ...props, children });
+}
+var ToastContext = createContext(null);
+function useToast() {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error(
+      "useToast precisa de um <ToastProvider> acima na \xE1rvore \u2014 envolva a app com ele."
+    );
+  }
+  return context;
+}
+var variantIcon = {
+  success: { icon: CircleCheck, tint: "text-success" },
+  danger: { icon: CircleAlert, tint: "text-danger" }
+};
+function ToastCard({ toast, onClose }) {
+  const visual = variantIcon[toast.variant ?? "default"];
+  return /* @__PURE__ */ jsxs(
+    Toast.Root,
+    {
+      onOpenChange: (open) => {
+        if (!open) onClose();
+      },
+      className: cn(
+        "relative flex w-full gap-3 rounded-surface squircle border border-border material-thick p-4 pr-10 shadow-level-3",
+        "animate-slide-up",
+        // O arrasto acompanha o dedo; soltar aquém do limiar devolve com mola.
+        "data-[swipe=move]:translate-y-(--radix-toast-swipe-move-y) data-[swipe=move]:transition-none",
+        "data-[swipe=cancel]:translate-y-0 data-[swipe=cancel]:transition-transform data-[swipe=cancel]:duration-(--motion-quick) data-[swipe=cancel]:ease-(--ease-out-soft)"
+      ),
+      children: [
+        visual ? /* @__PURE__ */ jsx(visual.icon, { "aria-hidden": "true", className: cn("mt-0.5 size-5 shrink-0", visual.tint) }) : null,
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsx(Toast.Title, { className: "text-subhead font-semibold", children: toast.title }),
+          toast.description ? /* @__PURE__ */ jsx(Toast.Description, { className: "text-footnote text-text-secondary", children: toast.description }) : null
+        ] }),
+        /* @__PURE__ */ jsx(
+          Toast.Close,
+          {
+            "aria-label": "Fechar aviso",
+            className: cn(
+              "absolute top-2 right-2 grid size-8 place-items-center rounded-control-sm text-text-muted",
+              "transition-colors duration-(--motion-quick) ease-(--ease-out-soft) hover:text-text",
+              // O X é discreto no olho, não no dedo: o pseudo-elemento completa 44px.
+              "before:absolute before:-inset-1.5"
+            ),
+            children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "size-4" })
+          }
+        )
+      ]
+    }
+  );
+}
+function ToastProvider({ children }) {
+  const [toasts, setToasts] = useState([]);
+  const nextId = useRef(0);
+  const toast = useCallback((options) => {
+    nextId.current += 1;
+    const id = nextId.current;
+    setToasts((current) => [...current, { id, ...options }]);
+  }, []);
+  const remove = useCallback((id) => {
+    setToasts((current) => current.filter((item) => item.id !== id));
+  }, []);
+  const value = useMemo(() => ({ toast }), [toast]);
+  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value, children: [
+    children,
+    /* @__PURE__ */ jsxs(Toast.Provider, { duration: 5e3, swipeDirection: "down", label: "Aviso", children: [
+      toasts.map((item) => /* @__PURE__ */ jsx(ToastCard, { toast: item, onClose: () => remove(item.id) }, item.id)),
+      /* @__PURE__ */ jsx(
+        Toast.Viewport,
+        {
+          label: "Avisos ({hotkey})",
+          className: cn(
+            "fixed bottom-0 inset-x-0 z-(--z-toast) m-0 flex w-full list-none flex-col gap-2 p-5",
+            // Em PWA no iPhone, a barra de gestos comeria o último toast.
+            "pb-[max(1.25rem,env(safe-area-inset-bottom))]",
+            "sm:left-auto sm:max-w-sm"
+          )
+        }
+      )
+    ] })
+  ] });
+}
+function Tooltip({ content, side, className, children }) {
+  return (
+    // A dica é só texto, nunca interativa: sem conteúdo "hoverable" ela some
+    // assim que o mouse sai do gatilho, sem área de tolerância fantasma.
+    /* @__PURE__ */ jsx(Tooltip$1.Provider, { delayDuration: 400, skipDelayDuration: 300, disableHoverableContent: true, children: /* @__PURE__ */ jsxs(Tooltip$1.Root, { children: [
+      /* @__PURE__ */ jsx(Tooltip$1.Trigger, { asChild: true, children }),
+      /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsx(
+        Tooltip$1.Content,
+        {
+          side,
+          sideOffset: 6,
+          className: cn(
+            "z-(--z-tooltip) rounded-control-sm squircle border border-border bg-surface-raised px-3 py-1.5 shadow-level-2",
+            "text-footnote animate-fade-in",
+            className
+          ),
+          children: content
+        }
+      ) })
+    ] }) })
+  );
+}
+var band = {
+  terracota: "bg-terracota-soft",
+  jardim: "bg-jardim-soft",
+  ambar: "bg-ambar-soft",
+  lavanda: "bg-lavanda-soft",
+  ceu: "bg-ceu-soft"
+};
+var cracha = cva(
+  [
+    "relative flex flex-col items-center overflow-hidden text-center",
+    "rounded-expressive squircle bg-surface shadow-level-1"
+  ],
+  {
+    variants: {
+      size: {
+        md: "w-40 pb-5",
+        lg: "w-48 pb-6"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+function Cracha({
+  name,
+  unit,
+  src,
+  memberRole,
+  tone = "ceu",
+  size,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn(cracha({ size }), className), children: [
+    /* @__PURE__ */ jsx("div", { className: cn("flex h-16 w-full justify-center pt-3", band[tone]), children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": "true",
+        className: "h-2.5 w-10 rounded-pill bg-bg shadow-[inset_0_1px_2px_rgb(0_0_0/0.18)]"
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: "-mt-8 rounded-full ring-4 ring-surface", children: /* @__PURE__ */ jsx(Avatar, { name, src, size: "xl" }) }),
+    /* @__PURE__ */ jsx("p", { className: "mt-3 px-4 font-friendly text-headline text-text", children: name }),
+    unit ? /* @__PURE__ */ jsx("p", { className: "mt-0.5 px-4 text-footnote text-text-secondary", children: unit }) : null,
+    memberRole ? /* @__PURE__ */ jsx("span", { className: "mt-2.5", children: /* @__PURE__ */ jsx(Badge, { tone: "accent", children: memberRole }) }) : null
+  ] });
+}
+var cover = {
+  terracota: "bg-terracota-soft",
+  jardim: "bg-jardim-soft",
+  ambar: "bg-ambar-soft",
+  lavanda: "bg-lavanda-soft",
+  ceu: "bg-ceu-soft"
+};
+var spine = {
+  terracota: "bg-terracota",
+  jardim: "bg-jardim",
+  ambar: "bg-ambar",
+  lavanda: "bg-lavanda",
+  ceu: "bg-ceu"
+};
+var livreto = cva(
+  [
+    "relative flex aspect-[3/4] flex-col overflow-hidden",
+    "rounded-surface squircle shadow-level-1"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "w-28 p-3 pl-5",
+        md: "w-36 p-4 pl-6",
+        lg: "w-44 p-5 pl-7"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var titleBySize = {
+  sm: "text-subhead font-semibold",
+  md: "text-headline",
+  lg: "text-title-3"
+};
+function Livreto({
+  title,
+  kind = "Pauta",
+  tone = "lavanda",
+  size,
+  footer,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn(livreto({ size }), cover[tone], className), children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("absolute inset-y-0 left-0 w-2", spine[tone]) }),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "absolute inset-y-2 right-0 w-1 rounded-l-pill bg-surface opacity-80"
+      }
+    ),
+    /* @__PURE__ */ jsx("p", { className: "text-caption font-semibold uppercase tracking-[0.12em] text-text-secondary", children: kind }),
+    /* @__PURE__ */ jsx(
+      "p",
+      {
+        lang: "pt-BR",
+        className: cn(
+          "mt-1.5 line-clamp-4 font-friendly text-text",
+          "break-words hyphens-auto",
+          titleBySize[size ?? "md"]
+        ),
+        children: title
+      }
+    ),
+    footer ? /* @__PURE__ */ jsx("div", { className: "mt-auto pt-3", children: footer }) : null
+  ] });
+}
+var TONES = ["terracota", "jardim", "ambar", "lavanda", "ceu"];
+function hashSeed(seed) {
+  let hash = 0;
+  for (const char of seed) {
+    hash = (hash * 31 + (char.codePointAt(0) ?? 0)) % 2147483647;
+  }
+  return hash;
+}
+var predio = cva("inline-block", {
+  variants: {
+    size: {
+      sm: "h-20",
+      md: "h-28",
+      lg: "h-40"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var GROUND_Y = 138;
+var ROW_HEIGHT = 16;
+var WINDOW_COLUMNS = [31, 53, 75];
+var WINDOW_WIDTH = 14;
+var WINDOW_HEIGHT = 10;
+var DOOR_HEIGHT = 18;
+function Predio({ name, tone, floors, size, decorative = false, className }) {
+  const hash = hashSeed(name);
+  const floorCount = Math.min(6, Math.max(3, floors ?? 3 + hash % 4));
+  const chosenTone = tone ?? TONES[hash % TONES.length] ?? "ceu";
+  const bodyTop = GROUND_Y - DOOR_HEIGHT - floorCount * ROW_HEIGHT - 8;
+  const strong = `var(--assembleo-${chosenTone})`;
+  const soft = `var(--assembleo-${chosenTone}-soft)`;
+  const windows = Array.from(
+    { length: floorCount },
+    (_, floor) => WINDOW_COLUMNS.map((x, column) => {
+      const index = floor * WINDOW_COLUMNS.length + column;
+      const lit = (hash >> index % 30 & 1) === 1;
+      return {
+        x,
+        y: bodyTop + 10 + floor * ROW_HEIGHT,
+        lit,
+        key: `${floor}-${column}`
+      };
+    })
+  ).flat();
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 120 148",
+      role: decorative ? void 0 : "img",
+      "aria-label": decorative ? void 0 : `Pr\xE9dio do condom\xEDnio ${name}`,
+      "aria-hidden": decorative || void 0,
+      className: cn(predio({ size }), className),
+      children: [
+        /* @__PURE__ */ jsx("rect", { x: "10", y: GROUND_Y, width: "100", height: "4", rx: "2", fill: "var(--assembleo-border)" }),
+        /* @__PURE__ */ jsx("rect", { x: "16", y: bodyTop - 8, width: "88", height: "12", rx: "6", fill: strong }),
+        /* @__PURE__ */ jsx("rect", { x: "20", y: bodyTop, width: "80", height: GROUND_Y - bodyTop, rx: "6", fill: soft }),
+        windows.map((window2) => /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: window2.x,
+            y: window2.y,
+            width: WINDOW_WIDTH,
+            height: WINDOW_HEIGHT,
+            rx: "3",
+            fill: window2.lit ? "var(--assembleo-ambar)" : "var(--assembleo-surface)"
+          },
+          window2.key
+        )),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: `M52 ${GROUND_Y} v-${DOOR_HEIGHT - 8} a8 8 0 0 1 16 0 v${DOOR_HEIGHT - 8} z`,
+            fill: strong
+          }
+        ),
+        /* @__PURE__ */ jsx("circle", { cx: "14", cy: GROUND_Y - 5, r: "6", fill: "var(--assembleo-jardim)", opacity: "0.85" }),
+        /* @__PURE__ */ jsx("circle", { cx: "23", cy: GROUND_Y - 3, r: "4", fill: "var(--assembleo-jardim)", opacity: "0.65" })
+      ]
+    }
+  );
+}
+function VisuallyHidden({ children }) {
+  return /* @__PURE__ */ jsx("span", { className: "absolute -m-px h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip-path:inset(50%)]", children });
+}
+var STORAGE_KEY = "assembleo-theme";
+function isTheme(value) {
+  return value === "light" || value === "dark" || value === "system";
+}
+function readStoredTheme() {
+  try {
+    const stored = window.localStorage.getItem(STORAGE_KEY);
+    return isTheme(stored) ? stored : "system";
+  } catch {
+    return "system";
+  }
+}
+function persistTheme(theme) {
+  try {
+    if (theme === "system") {
+      window.localStorage.removeItem(STORAGE_KEY);
+    } else {
+      window.localStorage.setItem(STORAGE_KEY, theme);
+    }
+  } catch {
+  }
+}
+function applyTheme(theme) {
+  if (theme === "system") {
+    delete document.documentElement.dataset.theme;
+  } else {
+    document.documentElement.dataset.theme = theme;
+  }
+}
+function initTheme() {
+  applyTheme(readStoredTheme());
+}
+var ThemeContext = createContext(null);
+function ThemeProvider({ children }) {
+  const [theme, setThemeState] = useState(() => readStoredTheme());
+  const [systemDark, setSystemDark] = useState(
+    () => window.matchMedia("(prefers-color-scheme: dark)").matches
+  );
+  useEffect(() => {
+    applyTheme(theme);
+    persistTheme(theme);
+  }, [theme]);
+  useEffect(() => {
+    const media = window.matchMedia("(prefers-color-scheme: dark)");
+    const onChange = (event) => setSystemDark(event.matches);
+    media.addEventListener("change", onChange);
+    return () => media.removeEventListener("change", onChange);
+  }, []);
+  useEffect(() => {
+    const onStorage = (event) => {
+      if (event.key === STORAGE_KEY || event.key === null) {
+        setThemeState(readStoredTheme());
+      }
+    };
+    window.addEventListener("storage", onStorage);
+    return () => window.removeEventListener("storage", onStorage);
+  }, []);
+  const resolvedTheme = theme === "system" ? systemDark ? "dark" : "light" : theme;
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: { theme, resolvedTheme, setTheme: setThemeState }, children });
+}
+function useTheme() {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme precisa de um <ThemeProvider> acima na \xE1rvore.");
+  }
+  return context;
+}
+var OPTIONS = [
+  { value: "light", label: "Claro" },
+  { value: "dark", label: "Escuro" },
+  { value: "system", label: "Sistema" }
+];
+function ThemeToggle({ width, className }) {
+  const { theme, setTheme } = useTheme();
+  return /* @__PURE__ */ jsx(
+    SegmentedControl,
+    {
+      "aria-label": "Tema",
+      options: OPTIONS,
+      value: theme,
+      onValueChange: (value) => setTheme(value),
+      width,
+      className
+    }
+  );
+}
+
+export { Avatar, AvatarGroup, Badge, Banner, Button, Card, Checkbox, Cracha, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, EmptyState, Field, IconButton, Input, List, ListItem, Livreto, Popover, PopoverContent, PopoverTrigger, Predio, Progress, RadioGroup, RadioGroupItem, SearchField, SegmentedControl, Select, SelectItem, Separator, Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger, Skeleton, Spinner, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeProvider, ThemeToggle, ToastProvider, Tooltip, VisuallyHidden, cn, initTheme, useFieldContext, useTheme, useToast };