@snksergio/design-system 0.35.0 → 0.37.0

package/dist-lib/chunks/avatar-CIHTveDJ.mjs

@@ -0,0 +1,1177 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { forwardRef } from "react";
+import { tv as tv$1 } from "tailwind-variants";
+import { Command as Command$1 } from "cmdk";
+import { X, Search, ChevronRight, Check } from "lucide-react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { cva } from "class-variance-authority";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+const isDsPad = (v) => /^(pad|sp)-/.test(v);
+const isDsGap = (v) => /^gp-/.test(v);
+const isDsRadius = (v) => /^radius-/.test(v);
+const isDsShadow = (v) => /^sh-/.test(v);
+const isDsForm = (v) => /^form-/.test(v);
+const twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [
+        {
+          // Lista 1:1 com tokens/brands/default/semantic/typography.ts.
+          // Manter sincronizado com src/utils/tv.ts. Ver L-016.
+          text: [
+            // Displays (fluid clamp)
+            "display-2xl",
+            "display-xl",
+            "display-lg",
+            "display-md",
+            // Headings (xs estático, sm-xl fluid clamp)
+            "heading-xl",
+            "heading-lg",
+            "heading-md",
+            "heading-sm",
+            "heading-xs",
+            // Titles (weight 600 default)
+            "title-lg",
+            "title-md",
+            "title-sm",
+            // Body (xs/sm = weight 500 interactive; md-2xl = 400 corrido)
+            "body-2xl",
+            "body-xl",
+            "body-lg",
+            "body-md",
+            "body-sm",
+            "body-xs",
+            // Captions (weight 400)
+            "caption-md",
+            "caption-sm",
+            "caption-xs",
+            // Code (mono regular)
+            "code-md",
+            "code-sm"
+          ]
+        }
+      ],
+      /* ── Padding ──────────────────────────────────────────────────────── */
+      p: [{ p: [isDsPad] }],
+      px: [{ px: [isDsPad] }],
+      py: [{ py: [isDsPad] }],
+      pt: [{ pt: [isDsPad] }],
+      pr: [{ pr: [isDsPad] }],
+      pb: [{ pb: [isDsPad] }],
+      pl: [{ pl: [isDsPad] }],
+      ps: [{ ps: [isDsPad] }],
+      pe: [{ pe: [isDsPad] }],
+      /* ── Margin (usa mesmo sp-*) ──────────────────────────────────────── */
+      m: [{ m: [isDsPad] }],
+      mx: [{ mx: [isDsPad] }],
+      my: [{ my: [isDsPad] }],
+      mt: [{ mt: [isDsPad] }],
+      mr: [{ mr: [isDsPad] }],
+      mb: [{ mb: [isDsPad] }],
+      ml: [{ ml: [isDsPad] }],
+      ms: [{ ms: [isDsPad] }],
+      me: [{ me: [isDsPad] }],
+      /* ── Inset / position (top/right/bottom/left) ─────────────────────── */
+      inset: [{ inset: [isDsPad] }],
+      "inset-x": [{ "inset-x": [isDsPad] }],
+      "inset-y": [{ "inset-y": [isDsPad] }],
+      "top": [{ top: [isDsPad] }],
+      "right": [{ right: [isDsPad] }],
+      "bottom": [{ bottom: [isDsPad] }],
+      "left": [{ left: [isDsPad] }],
+      "start": [{ start: [isDsPad] }],
+      "end": [{ end: [isDsPad] }],
+      /* ── Gap ──────────────────────────────────────────────────────────── */
+      gap: [{ gap: [isDsGap] }],
+      "gap-x": [{ "gap-x": [isDsGap] }],
+      "gap-y": [{ "gap-y": [isDsGap] }],
+      /* ── Rounded (todas as cantos) ────────────────────────────────────── */
+      rounded: [{ rounded: [isDsRadius] }],
+      "rounded-s": [{ "rounded-s": [isDsRadius] }],
+      "rounded-e": [{ "rounded-e": [isDsRadius] }],
+      "rounded-t": [{ "rounded-t": [isDsRadius] }],
+      "rounded-r": [{ "rounded-r": [isDsRadius] }],
+      "rounded-b": [{ "rounded-b": [isDsRadius] }],
+      "rounded-l": [{ "rounded-l": [isDsRadius] }],
+      "rounded-ss": [{ "rounded-ss": [isDsRadius] }],
+      "rounded-se": [{ "rounded-se": [isDsRadius] }],
+      "rounded-ee": [{ "rounded-ee": [isDsRadius] }],
+      "rounded-es": [{ "rounded-es": [isDsRadius] }],
+      "rounded-tl": [{ "rounded-tl": [isDsRadius] }],
+      "rounded-tr": [{ "rounded-tr": [isDsRadius] }],
+      "rounded-br": [{ "rounded-br": [isDsRadius] }],
+      "rounded-bl": [{ "rounded-bl": [isDsRadius] }],
+      /* ── Shadow ───────────────────────────────────────────────────────── */
+      shadow: [{ shadow: [isDsShadow] }],
+      /* ── Form sizes (min-h, h, w, size) ───────────────────────────────── */
+      "min-h": [{ "min-h": [isDsForm] }],
+      h: [{ h: [isDsForm] }],
+      w: [{ w: [isDsForm] }],
+      size: [{ size: [isDsForm] }]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+const twMergeConfig = {
+  extend: {
+    classGroups: {
+      "font-size": [
+        {
+          text: [
+            // Displays (fluid clamp)
+            "display-2xl",
+            "display-xl",
+            "display-lg",
+            "display-md",
+            // Headings (xs estático, sm-xl fluid clamp)
+            "heading-xl",
+            "heading-lg",
+            "heading-md",
+            "heading-sm",
+            "heading-xs",
+            // Titles (weight 600 default)
+            "title-lg",
+            "title-md",
+            "title-sm",
+            // Body (xs/sm = weight 500 interactive; md-2xl = 400 corrido)
+            "body-2xl",
+            "body-xl",
+            "body-lg",
+            "body-md",
+            "body-sm",
+            "body-xs",
+            // Captions (weight 400)
+            "caption-md",
+            "caption-sm",
+            "caption-xs",
+            // Stat (número de métrica/KPI — estático, bold, leading tight)
+            "stat-xl",
+            "stat-lg",
+            "stat-md",
+            "stat-sm",
+            // Code (mono regular)
+            "code-md",
+            "code-sm"
+          ]
+        }
+      ]
+    }
+  }
+};
+const tv = (options, config) => tv$1(options, {
+  ...config,
+  twMergeConfig
+});
+const buttonVariants = tv({
+  base: [
+    "inline-flex items-center justify-center",
+    "select-none whitespace-nowrap",
+    "focus-visible:outline-none",
+    "border border-transparent",
+    "text-body-sm font-semibold leading-none",
+    // 13px / 600 — alinhado com sandbox btn
+    "[&_svg]:shrink-0",
+    // SVG não diminui; tamanho controlado por size
+    "transition-all duration-200 ease-out",
+    "cursor-pointer",
+    "focus-visible:ring-4"
+  ],
+  variants: {
+    color: {
+      primary: "focus-visible:ring-ring-brand",
+      secondary: "focus-visible:ring-ring-secondary",
+      critical: "focus-visible:ring-ring-danger",
+      success: "focus-visible:ring-ring-success",
+      warning: "focus-visible:ring-ring-warning"
+    },
+    variant: {
+      filled: "",
+      outline: "",
+      soft: "",
+      ghost: "bg-transparent"
+    },
+    size: {
+      // h28 / pad 10 / gap 6 / radius 8 / icon 12
+      "2xs": "min-h-form-xs px-pad-lg gap-gp-sm rounded-radius-md [&_svg]:size-[12px]",
+      // h32 / pad 12 / gap 6 / radius 8 / icon 14
+      xs: "min-h-form-sm px-pad-xl gap-gp-sm rounded-radius-md [&_svg]:size-[14px]",
+      // h36 / pad 12 / gap 6 / radius 10 / icon 14
+      sm: "min-h-form-md px-pad-xl gap-gp-sm rounded-radius-lg [&_svg]:size-[14px]",
+      // h40 / pad 16 / gap 6 / radius 10 / icon 14 (alinhado com sandbox Exportar)
+      md: "min-h-form-lg px-pad-2xl gap-gp-sm rounded-radius-lg [&_svg]:size-[14px]",
+      // h44 / pad 16 / gap 8 / radius 10 / icon 16
+      lg: "min-h-form-xl px-pad-2xl gap-gp-md rounded-radius-lg [&_svg]:size-[16px]",
+      // Icon buttons — width = height (square). Regra: SVG +2px vs versão com label
+      // (precisa preencher mais o quadrado sem o texto carregando peso visual).
+      "icon-2xs": "size-form-xs rounded-radius-md p-0 [&_svg]:size-[14px]",
+      // 28×28 / +2 (12→14)
+      "icon-xs": "size-form-sm rounded-radius-md p-0 [&_svg]:size-[16px]",
+      // 32×32 / +2 (14→16)
+      "icon-sm": "size-form-md rounded-radius-lg p-0 [&_svg]:size-[16px]",
+      // 36×36 / +2 (14→16)
+      "icon-md": "size-form-lg rounded-radius-lg p-0 [&_svg]:size-[16px]",
+      // 40×40 / +2 (14→16)
+      "icon-lg": "size-form-xl rounded-radius-lg p-0 [&_svg]:size-[18px]"
+      // 44×44 / +2 (16→18)
+    },
+    fullWidth: {
+      true: "w-full flex-1"
+    },
+    /**
+     * Shape do botão:
+     *   - rounded (default): mantém o radius da `size` (varia por tamanho)
+     *   - pill: força `rounded-full` (override com `!` pra ganhar do size)
+     */
+    shape: {
+      rounded: "",
+      pill: "!rounded-full"
+    },
+    disabled: {
+      true: "pointer-events-none opacity-50"
+    }
+  },
+  compoundVariants: [
+    // ── Primary (brand) ─────────────────────────────────────────────
+    {
+      color: "primary",
+      variant: "filled",
+      class: "bg-bg-brand text-fg-on-brand hover:bg-bg-brand-hover"
+    },
+    {
+      color: "primary",
+      variant: "outline",
+      class: "bg-bg-surface border-border-brand text-fg-brand shadow-sh-sm hover:bg-bg-brand-subtle hover:border-transparent hover:shadow-sh-none"
+    },
+    {
+      color: "primary",
+      variant: "soft",
+      class: "bg-bg-brand-subtle text-fg-brand hover:bg-bg-brand-subtle-hover"
+    },
+    {
+      color: "primary",
+      variant: "ghost",
+      class: "text-fg-brand hover:bg-bg-brand-subtle"
+    },
+    // ── Secondary (neutro) ──────────────────────────────────────────
+    {
+      color: "secondary",
+      variant: "filled",
+      class: "bg-bg-muted text-fg-muted hover:bg-bg-muted-hover hover:text-fg-default"
+    },
+    {
+      // Outline alinhado com `.btn.tbl-tool-btn` do design-and-table-v2:
+      // light = bg-surface + border-subtle + fg-default + shadow-sm (mantém no hover)
+      // dark  = bg-muted + border-input + fg-muted + sem shadow
+      color: "secondary",
+      variant: "outline",
+      class: [
+        "bg-bg-surface border-border-subtle text-fg-default shadow-sh-sm",
+        "dark:bg-bg-muted dark:border-border-input dark:text-fg-muted dark:shadow-sh-none",
+        "hover:bg-bg-muted-hover hover:text-fg-default",
+        "dark:hover:bg-bg-muted-hover dark:hover:text-fg-default"
+      ].join(" ")
+    },
+    {
+      color: "secondary",
+      variant: "soft",
+      class: "bg-bg-muted text-fg-muted hover:bg-bg-muted-hover hover:text-fg-default"
+    },
+    {
+      color: "secondary",
+      variant: "ghost",
+      class: "text-fg-muted hover:bg-bg-muted hover:text-fg-default"
+    },
+    // ── Critical (danger) ───────────────────────────────────────────
+    {
+      color: "critical",
+      variant: "filled",
+      class: "bg-bg-danger text-fg-on-danger hover:bg-bg-danger-hover"
+    },
+    {
+      color: "critical",
+      variant: "outline",
+      class: "bg-bg-surface border-border-danger-muted text-fg-danger shadow-sh-sm hover:bg-bg-danger-muted hover:shadow-sh-none"
+    },
+    {
+      color: "critical",
+      variant: "soft",
+      class: "bg-bg-danger-muted text-fg-danger hover:bg-bg-danger-muted-hover"
+    },
+    {
+      color: "critical",
+      variant: "ghost",
+      class: "text-fg-danger hover:bg-bg-danger-muted"
+    },
+    // ── Success ─────────────────────────────────────────────────────
+    {
+      color: "success",
+      variant: "filled",
+      class: "bg-bg-success text-fg-on-success hover:bg-bg-success-hover"
+    },
+    {
+      color: "success",
+      variant: "outline",
+      class: "bg-bg-surface border-border-success-muted text-fg-success shadow-sh-sm hover:bg-bg-success-muted hover:shadow-sh-none"
+    },
+    {
+      color: "success",
+      variant: "soft",
+      class: "bg-bg-success-muted text-fg-success hover:bg-bg-success-muted-hover"
+    },
+    {
+      color: "success",
+      variant: "ghost",
+      class: "text-fg-success hover:bg-bg-success-muted"
+    },
+    // ── Warning ─────────────────────────────────────────────────────
+    {
+      color: "warning",
+      variant: "filled",
+      class: "bg-bg-warning text-fg-on-warning hover:bg-bg-warning-hover"
+    },
+    {
+      color: "warning",
+      variant: "outline",
+      class: "bg-bg-surface border-border-warning-muted text-fg-warning shadow-sh-sm hover:bg-bg-warning-muted hover:shadow-sh-none"
+    },
+    {
+      color: "warning",
+      variant: "soft",
+      class: "bg-bg-warning-muted text-fg-warning hover:bg-bg-warning-muted-hover"
+    },
+    {
+      color: "warning",
+      variant: "ghost",
+      class: "text-fg-warning hover:bg-bg-warning-muted"
+    },
+    // ── Disabled — SEMPRE por último ────────────────────────────────
+    { disabled: true, class: "pointer-events-none opacity-50" }
+  ],
+  defaultVariants: {
+    color: "primary",
+    variant: "filled",
+    size: "md",
+    shape: "rounded"
+  }
+});
+const Button = forwardRef(
+  function Button2({
+    color,
+    variant,
+    size,
+    shape,
+    fullWidth,
+    loading = false,
+    disabled = false,
+    iconLeft,
+    iconRight,
+    children,
+    className,
+    type = "button",
+    ...rest
+  }, ref) {
+    const isDisabled = disabled || loading;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        type,
+        disabled: isDisabled,
+        className: buttonVariants({
+          color,
+          variant,
+          size,
+          shape,
+          fullWidth,
+          disabled: isDisabled,
+          className
+        }),
+        ...rest,
+        children: [
+          loading && /* @__PURE__ */ jsx(Spinner, {}),
+          !loading && iconLeft,
+          children,
+          !loading && iconRight
+        ]
+      }
+    );
+  }
+);
+function Spinner() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      className: "animate-spin",
+      children: /* @__PURE__ */ jsx(
+        "circle",
+        {
+          cx: "8",
+          cy: "8",
+          r: "6",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeDasharray: "28",
+          strokeDashoffset: "8",
+          className: "opacity-70"
+        }
+      )
+    }
+  );
+}
+const Dialog = SheetPrimitive.Root;
+const DialogTrigger = SheetPrimitive.Trigger;
+const DialogPortal = SheetPrimitive.Portal;
+const DialogClose = SheetPrimitive.Close;
+const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SheetPrimitive.Overlay,
+  {
+    ref,
+    className: cn(
+      "fixed inset-0 z-50 bg-black/30 supports-[backdrop-filter]:backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props
+  }
+));
+DialogOverlay.displayName = SheetPrimitive.Overlay.displayName;
+const DialogContent = React.forwardRef(({ className, children, hideClose, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
+  /* @__PURE__ */ jsx(DialogOverlay, {}),
+  /* @__PURE__ */ jsxs(
+    SheetPrimitive.Content,
+    {
+      ref,
+      className: cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-gp-4xl rounded-radius-base bg-bg-surface p-pad-4xl text-body-md text-fg-default shadow-sh-xl outline-float duration-200 sm:max-w-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        !hideClose && /* @__PURE__ */ jsxs(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-radius-sm opacity-70 transition-opacity hover:opacity-100 outline-none ring-0 ring-ring-brand focus-visible:ring-4 disabled:pointer-events-none data-[state=open]:bg-bg-muted data-[state=open]:text-fg-muted", children: [
+          /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
+    }
+  )
+] }));
+DialogContent.displayName = SheetPrimitive.Content.displayName;
+const DialogHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("flex flex-col gap-gp-sm", className),
+    ...props
+  }
+);
+DialogHeader.displayName = "DialogHeader";
+const DialogFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex flex-col-reverse gap-gp-md sm:flex-row sm:justify-end",
+      className
+    ),
+    ...props
+  }
+);
+DialogFooter.displayName = "DialogFooter";
+const DialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SheetPrimitive.Title,
+  {
+    ref,
+    className: cn(
+      "text-title-md font-medium text-fg-default leading-none",
+      className
+    ),
+    ...props
+  }
+));
+DialogTitle.displayName = SheetPrimitive.Title.displayName;
+const DialogDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SheetPrimitive.Description,
+  {
+    ref,
+    className: cn("text-body-md text-fg-muted", className),
+    ...props
+  }
+));
+DialogDescription.displayName = SheetPrimitive.Description.displayName;
+const Command = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1,
+  {
+    ref,
+    className: cn(
+      // `bg-popover`/`text-popover-foreground` são vocabulário SHADCN, não do DS —
+      // dependem da bridge do `index.css`, que só existe no scaffold. Em npm e
+      // submódulo a bridge não viaja, e a superfície caía no default do shadcn em vez
+      // dos tokens iGreen (L-039/L-040). Era a ÚNICA ocorrência de vocabulário shadcn
+      // em todo o bundle publicado — medida em 2026-08-08.
+      "flex h-full w-full flex-col overflow-hidden p-pad-xl bg-bg-dropdown text-fg-default",
+      className
+    ),
+    ...props
+  }
+));
+Command.displayName = Command$1.displayName;
+const CommandDialog = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsx(Dialog, { ...props, children: /* @__PURE__ */ jsxs(
+    DialogContent,
+    {
+      hideClose: true,
+      "aria-describedby": void 0,
+      className: cn(
+        "overflow-hidden p-0 gap-0 sm:max-w-[384px]",
+        "rounded-[12px] border border-border-default",
+        // Outline padrão de elementos flutuantes
+        "outline-float"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(DialogTitle, { className: "sr-only", children: "Comando" }),
+        /* @__PURE__ */ jsx(Command, { children })
+      ]
+    }
+  ) });
+};
+const CommandInput = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    "cmdk-input-wrapper": "",
+    className: cn(
+      "flex items-center gap-gp-md h-form-md px-pad-xl rounded-radius-lg",
+      "bg-bg-input border border-border-subtle shadow-sh-sm",
+      "transition-[border-color,box-shadow,background-color] duration-150",
+      "focus-within:border-border-brand focus-within:shadow-sh-ring",
+      "dark:bg-bg-muted dark:border-border-input dark:shadow-sh-none"
+    ),
+    children: [
+      /* @__PURE__ */ jsx(Search, { className: "size-[14px] text-fg-muted shrink-0", strokeWidth: 1.8 }),
+      /* @__PURE__ */ jsx(
+        Command$1.Input,
+        {
+          ref,
+          className: cn(
+            "flex-1 min-w-0 bg-transparent border-0 outline-none",
+            "text-body-sm font-normal text-fg-default placeholder:text-fg-muted",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+            className
+          ),
+          ...props
+        }
+      )
+    ]
+  }
+));
+CommandInput.displayName = Command$1.Input.displayName;
+const CommandList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1.List,
+  {
+    ref,
+    className: cn(
+      "max-h-[300px] overflow-y-auto overflow-x-hidden mt-pad-md scrollbar-thin",
+      className
+    ),
+    ...props
+  }
+));
+CommandList.displayName = Command$1.List.displayName;
+const CommandEmpty = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(
+  Command$1.Empty,
+  {
+    ref,
+    className: "py-pad-5xl text-center text-body-md text-fg-muted",
+    ...props
+  }
+));
+CommandEmpty.displayName = Command$1.Empty.displayName;
+const CommandGroup = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1.Group,
+  {
+    ref,
+    className: cn(
+      "overflow-hidden text-fg-default",
+      "[&_[cmdk-group-heading]]:flex [&_[cmdk-group-heading]]:items-center",
+      "[&_[cmdk-group-heading]]:h-[28px] [&_[cmdk-group-heading]]:px-pad-xl",
+      "[&_[cmdk-group-heading]]:text-caption-xs [&_[cmdk-group-heading]]:font-bold",
+      "[&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-wider",
+      "[&_[cmdk-group-heading]]:text-fg-subtle",
+      className
+    ),
+    ...props
+  }
+));
+CommandGroup.displayName = Command$1.Group.displayName;
+const CommandSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1.Separator,
+  {
+    ref,
+    className: cn("mx-pad-xs my-pad-xs h-px bg-border-default", className),
+    ...props
+  }
+));
+CommandSeparator.displayName = Command$1.Separator.displayName;
+const CommandItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center gap-gp-md",
+      "rounded-radius-lg px-pad-xl py-pad-md",
+      "text-body-sm font-medium text-fg-muted",
+      "outline-none transition-colors",
+      "data-[selected='true']:bg-bg-muted data-[selected='true']:text-fg-default data-[selected='true']:[&_svg]:text-fg-default",
+      "data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50",
+      "[&_svg]:pointer-events-none [&_svg]:size-[18px] [&_svg]:shrink-0 [&_svg]:text-fg-muted",
+      className
+    ),
+    ...props
+  }
+));
+CommandItem.displayName = Command$1.Item.displayName;
+const CommandShortcut = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "ml-auto text-caption-sm tracking-wider text-fg-subtle",
+        className
+      ),
+      ...props
+    }
+  );
+};
+CommandShortcut.displayName = "CommandShortcut";
+const Popover = PopoverPrimitive.Root;
+const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverAnchor = PopoverPrimitive.Anchor;
+const PopoverClose = PopoverPrimitive.Close;
+const POPOVER_MOBILE_SHEET = [
+  "max-md:w-full max-md:min-w-0 max-md:max-w-none",
+  "max-md:!max-h-[92vh]",
+  "max-md:rounded-b-none max-md:rounded-t-[12px]",
+  "max-md:border-x-0 max-md:border-b-0",
+  "max-md:outline-none max-md:shadow-none",
+  // Respiro de 20px (pad-3xl) no rodapé pra o conteúdo (footer/última seção)
+  // não colar na borda inferior do device quando vira sheet.
+  "max-md:pb-pad-3xl",
+  "max-md:data-[state=open]:zoom-in-100 max-md:data-[state=closed]:zoom-out-100",
+  "max-md:data-[state=open]:slide-in-from-bottom-12 max-md:data-[state=closed]:slide-out-to-bottom-12"
+].join(" ");
+const PopoverSheetBackdrop = () => /* @__PURE__ */ jsx(
+  "div",
+  {
+    "aria-hidden": "true",
+    className: "fixed inset-0 z-[55] bg-overlay-scrim pointer-events-auto md:hidden animate-in fade-in-0 duration-150"
+  }
+);
+const PopoverContent = React.forwardRef(
+  ({ className, align = "center", sideOffset = 6, disablePortal, mobileSheet = true, ...props }, ref) => {
+    const content = /* @__PURE__ */ jsx(
+      PopoverPrimitive.Content,
+      {
+        ref,
+        align,
+        sideOffset,
+        "data-mobile-sheet": mobileSheet ? "" : void 0,
+        className: cn(
+          "relative z-50",
+          // Unificado com DropdownMenu/Select: bg-bg-dropdown (frosted no dark)
+          // + border-border-default + outline-float. O `before` pseudo-element
+          // aplica o blur backdrop (necessário pra bg-bg-dropdown semi-transparente
+          // render correto no dark mode).
+          "bg-bg-dropdown",
+          "border border-border-default rounded-[12px] shadow-sh-lg outline-float",
+          "before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150",
+          "text-fg-default",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out",
+          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+          "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+          "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
+          "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          mobileSheet && POPOVER_MOBILE_SHEET,
+          className
+        ),
+        ...props
+      }
+    );
+    if (disablePortal) {
+      return mobileSheet ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(PopoverSheetBackdrop, {}),
+        content
+      ] }) : content;
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      mobileSheet && /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(PopoverSheetBackdrop, {}) }),
+      /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: content })
+    ] });
+  }
+);
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+const inputGroupVariants = cva(
+  [
+    "group/input-group relative flex w-full items-center",
+    "bg-bg-input dark:bg-bg-muted",
+    "hover:bg-bg-input-hover dark:hover:bg-bg-muted-hover",
+    "border border-border-input rounded-radius-lg",
+    "transition-[border-color,box-shadow,background-color] outline-none",
+    "has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50 has-[input:disabled]:hover:bg-bg-input dark:has-[input:disabled]:hover:bg-bg-muted"
+  ],
+  {
+    variants: {
+      size: {
+        xxs: "min-h-form-xs px-pad-md gap-gp-xs rounded-radius-md text-body-sm font-normal",
+        xs: "min-h-form-sm px-pad-xl gap-gp-md rounded-radius-md text-body-sm font-normal",
+        sm: "min-h-form-md px-pad-xl gap-gp-md rounded-radius-lg text-body-sm font-normal",
+        md: "min-h-form-lg px-pad-xl gap-gp-md rounded-radius-lg text-body-sm font-normal"
+      },
+      state: {
+        default: "focus-within:border-border-brand          focus-within:shadow-sh-ring",
+        error: "border-border-danger-muted  focus-within:border-border-danger-muted  focus-within:shadow-sh-ring-danger",
+        warning: "border-border-warning-muted focus-within:border-border-warning-muted focus-within:shadow-sh-ring-warning",
+        success: "border-border-success-muted focus-within:border-border-success-muted focus-within:shadow-sh-ring-success"
+      }
+    },
+    defaultVariants: { size: "md", state: "default" }
+  }
+);
+const InputGroup = React.forwardRef(
+  ({ className, size, state, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "group",
+      "data-slot": "input-group",
+      className: cn(inputGroupVariants({ size, state }), className),
+      ...props
+    }
+  )
+);
+InputGroup.displayName = "InputGroup";
+const inputGroupInputVariants = cva([
+  "flex-1 min-w-0 bg-transparent border-0 outline-none",
+  "text-body-sm font-normal text-fg-default placeholder:text-fg-muted placeholder:opacity-70",
+  "disabled:cursor-not-allowed",
+  "file:inline-flex file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-fg-default"
+]);
+const InputGroupInput = React.forwardRef(({ className, type, ...props }, ref) => /* @__PURE__ */ jsx(
+  "input",
+  {
+    ref,
+    type,
+    "data-slot": "input-group-input",
+    className: cn(inputGroupInputVariants(), className),
+    ...props
+  }
+));
+InputGroupInput.displayName = "InputGroupInput";
+const inputGroupTextareaVariants = cva([
+  "flex-1 min-w-0 bg-transparent border-0 outline-none resize-y",
+  "py-pad-md",
+  "text-body-sm font-normal leading-[1.5] text-fg-default placeholder:text-fg-muted placeholder:opacity-70",
+  "disabled:cursor-not-allowed"
+]);
+const InputGroupTextarea = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "textarea",
+  {
+    ref,
+    "data-slot": "input-group-textarea",
+    className: cn(inputGroupTextareaVariants(), className),
+    ...props
+  }
+));
+InputGroupTextarea.displayName = "InputGroupTextarea";
+const inputGroupAddonVariants = cva(
+  "flex items-center text-fg-muted shrink-0 select-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      align: {
+        // Inline = horizontal (start/end do eixo do texto)
+        "inline-start": "",
+        "inline-end": "",
+        // Block = vertical (top/bottom — multi-linha em textarea)
+        "block-start": "",
+        "block-end": ""
+      }
+    },
+    defaultVariants: { align: "inline-start" }
+  }
+);
+const InputGroupAddon = React.forwardRef(({ className, align = "inline-start", onClick, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    role: "group",
+    "data-slot": "input-group-addon",
+    "data-align": align,
+    className: cn(inputGroupAddonVariants({ align }), className),
+    onClick: (e) => {
+      if (e.target.closest("button")) {
+        onClick?.(e);
+        return;
+      }
+      e.currentTarget.parentElement?.querySelector(
+        "input, textarea"
+      )?.focus();
+      onClick?.(e);
+    },
+    ...props
+  }
+));
+InputGroupAddon.displayName = "InputGroupAddon";
+const InputGroupText = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    ref,
+    "data-slot": "input-group-text",
+    className: cn(
+      "text-body-xs text-fg-muted whitespace-nowrap",
+      className
+    ),
+    ...props
+  }
+));
+InputGroupText.displayName = "InputGroupText";
+const inputGroupButtonVariants = cva(
+  [
+    "inline-flex items-center justify-center shrink-0",
+    "rounded-radius-md transition-colors outline-none cursor-pointer",
+    "focus-visible:ring-4 focus-visible:ring-ring-brand",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    "[&_svg]:size-4 [&_svg]:shrink-0"
+  ],
+  {
+    variants: {
+      size: {
+        xs: "h-form-xs px-pad-md gap-gp-xs text-body-xs font-normal",
+        "icon-xs": "size-form-xs",
+        sm: "h-form-sm px-pad-lg gap-gp-md text-body-xs font-normal",
+        "icon-sm": "size-form-sm"
+      },
+      variant: {
+        default: "bg-bg-muted text-fg-default hover:bg-bg-muted-hover",
+        destructive: "bg-bg-danger text-fg-on-danger hover:bg-bg-danger-hover",
+        outline: "border border-border-input bg-transparent text-fg-default hover:bg-bg-muted",
+        secondary: "bg-bg-emphasis text-fg-default hover:bg-bg-muted-hover",
+        ghost: "bg-transparent text-fg-muted hover:bg-bg-muted hover:text-fg-default",
+        link: "bg-transparent text-fg-brand underline-offset-4 hover:underline"
+      }
+    },
+    defaultVariants: { size: "xs", variant: "ghost" }
+  }
+);
+const InputGroupButton = React.forwardRef(({ className, size, variant, type = "button", ...props }, ref) => /* @__PURE__ */ jsx(
+  "button",
+  {
+    ref,
+    type,
+    "data-slot": "input-group-button",
+    className: cn(inputGroupButtonVariants({ size, variant }), className),
+    ...props
+  }
+));
+InputGroupButton.displayName = "InputGroupButton";
+const DropdownMenu = DropdownMenuPrimitive.Root;
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+const CONTAINER_CLASSES = [
+  "relative z-50 min-w-[180px] overflow-hidden",
+  "flex flex-col gap-px",
+  "rounded-[12px] bg-bg-dropdown p-pad-sm",
+  "border border-border-default shadow-sh-lg",
+  // Outline padrão de elementos flutuantes
+  "outline-float",
+  "text-fg-muted",
+  // Frosted-glass blur (necessário pra fazer o bg-dropdown semi-transparent render correto no dark)
+  "before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150",
+  // Animações Radix
+  "data-[state=open]:animate-in data-[state=closed]:animate-out",
+  "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+  "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+  "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
+  "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+  "origin-[--radix-dropdown-menu-content-transform-origin]"
+].join(" ");
+const MOBILE_SHEET_CLASSES = [
+  "max-md:w-full max-md:min-w-0 max-md:max-w-none",
+  "max-md:!max-h-[92vh]",
+  "max-md:rounded-b-none max-md:rounded-t-[12px]",
+  "max-md:border-x-0 max-md:border-b-0",
+  "max-md:outline-none max-md:shadow-none",
+  "max-md:data-[state=open]:zoom-in-100 max-md:data-[state=closed]:zoom-out-100",
+  "max-md:data-[state=open]:slide-in-from-bottom-12 max-md:data-[state=closed]:slide-out-to-bottom-12"
+].join(" ");
+const ITEM_BASE = [
+  "relative flex cursor-default select-none items-center",
+  "gap-pad-lg px-pad-lg py-pad-md rounded-radius-sm",
+  "text-body-sm font-medium",
+  "outline-none transition-colors",
+  "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+  "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"
+].join(" ");
+const ITEM_VARIANT_DEFAULT = [
+  "text-fg-muted [&_svg]:text-fg-muted",
+  "focus:bg-bg-muted focus:text-fg-default focus:[&_svg]:text-fg-default"
+].join(" ");
+const ITEM_VARIANT_DESTRUCTIVE = [
+  "text-fg-danger [&_svg]:text-fg-danger",
+  "focus:bg-bg-danger-muted focus:text-fg-danger focus:[&_svg]:text-fg-danger"
+].join(" ");
+const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  DropdownMenuPrimitive.SubTrigger,
+  {
+    ref,
+    className: cn(
+      ITEM_BASE,
+      ITEM_VARIANT_DEFAULT,
+      "data-[state=open]:bg-bg-muted data-[state=open]:text-fg-default",
+      inset && "pl-8",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto" })
+    ]
+  }
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.SubContent,
+  {
+    ref,
+    className: cn(CONTAINER_CLASSES, className),
+    ...props
+  }
+));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 8, mobileSheet = true, ...props }, ref) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  mobileSheet && /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: "fixed inset-0 z-[55] bg-overlay-scrim pointer-events-none md:hidden animate-in fade-in-0 duration-150"
+    }
+  ) }),
+  /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Content,
+    {
+      ref,
+      sideOffset,
+      "data-mobile-sheet": mobileSheet ? "" : void 0,
+      className: cn(
+        CONTAINER_CLASSES,
+        "max-h-[var(--radix-dropdown-menu-content-available-height)] overflow-y-auto overflow-x-hidden",
+        mobileSheet && MOBILE_SHEET_CLASSES,
+        className
+      ),
+      ...props
+    }
+  ) })
+] }));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+const DropdownMenuItem = React.forwardRef(({ className, inset, variant = "default", ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      ITEM_BASE,
+      variant === "destructive" ? ITEM_VARIANT_DESTRUCTIVE : ITEM_VARIANT_DEFAULT,
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
+  DropdownMenuPrimitive.CheckboxItem,
+  {
+    ref,
+    className: cn(
+      ITEM_BASE,
+      ITEM_VARIANT_DEFAULT,
+      "pl-8 pr-pad-lg",
+      className
+    ),
+    checked,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute left-pad-md flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
+      children
+    ]
+  }
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+const DropdownMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  DropdownMenuPrimitive.RadioItem,
+  {
+    ref,
+    className: cn(
+      ITEM_BASE,
+      ITEM_VARIANT_DEFAULT,
+      "pl-8 pr-pad-lg",
+      // Selected state — brand tint (mantém no focus pra não voltar pra muted)
+      "data-[state=checked]:bg-bg-brand-subtle data-[state=checked]:text-fg-brand",
+      "data-[state=checked]:[&_svg]:text-fg-brand",
+      "data-[state=checked]:focus:bg-bg-brand-subtle data-[state=checked]:focus:text-fg-brand",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute left-pad-md flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "size-4" }) }) }),
+      children
+    ]
+  }
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Label,
+  {
+    ref,
+    className: cn(
+      "px-pad-lg py-pad-sm text-caption-sm font-semibold uppercase tracking-wider text-fg-subtle",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Separator,
+  {
+    ref,
+    className: cn("mx-pad-xs my-pad-xs h-px bg-border-default", className),
+    ...props
+  }
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn("ml-auto text-caption-sm tracking-wider text-fg-subtle", className),
+      ...props
+    }
+  );
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+const Avatar = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AvatarPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+      className
+    ),
+    ...props
+  }
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+const AvatarImage = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AvatarPrimitive.Image,
+  {
+    ref,
+    className: cn("aspect-square h-full w-full", className),
+    ...props
+  }
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+const AvatarFallback = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AvatarPrimitive.Fallback,
+  {
+    ref,
+    className: cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-bg-muted text-fg-muted text-body-sm font-normal",
+      className
+    ),
+    ...props
+  }
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+export {
+  inputGroupInputVariants as $,
+  Avatar as A,
+  Button as B,
+  Command as C,
+  Dialog as D,
+  DropdownMenuLabel as E,
+  DropdownMenuPortal as F,
+  DropdownMenuRadioGroup as G,
+  DropdownMenuRadioItem as H,
+  DropdownMenuSeparator as I,
+  DropdownMenuShortcut as J,
+  DropdownMenuSub as K,
+  DropdownMenuSubContent as L,
+  DropdownMenuSubTrigger as M,
+  DropdownMenuTrigger as N,
+  InputGroup as O,
+  InputGroupAddon as P,
+  InputGroupButton as Q,
+  InputGroupInput as R,
+  InputGroupText as S,
+  InputGroupTextarea as T,
+  Popover as U,
+  PopoverAnchor as V,
+  PopoverClose as W,
+  PopoverContent as X,
+  PopoverTrigger as Y,
+  inputGroupAddonVariants as Z,
+  inputGroupButtonVariants as _,
+  AvatarFallback as a,
+  inputGroupTextareaVariants as a0,
+  inputGroupVariants as a1,
+  buttonVariants as a2,
+  AvatarImage as b,
+  cn as c,
+  CommandDialog as d,
+  CommandEmpty as e,
+  CommandGroup as f,
+  CommandInput as g,
+  CommandItem as h,
+  CommandList as i,
+  CommandSeparator as j,
+  CommandShortcut as k,
+  DialogClose as l,
+  DialogContent as m,
+  DialogDescription as n,
+  DialogFooter as o,
+  DialogHeader as p,
+  DialogOverlay as q,
+  DialogPortal as r,
+  DialogTitle as s,
+  tv as t,
+  DialogTrigger as u,
+  DropdownMenu as v,
+  DropdownMenuCheckboxItem as w,
+  DropdownMenuContent as x,
+  DropdownMenuGroup as y,
+  DropdownMenuItem as z
+};
+//# sourceMappingURL=avatar-CIHTveDJ.mjs.map