{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "glass-button",
  "title": "Glass Button",
  "author": "Visant Labs <visantsupply@gmail.com>",
  "description": "Botão de vidro, em pílula ou círculo, que refrata o fundo. Com aria-pressed vira alternância.",
  "dependencies": [],
  "registryDependencies": [
    "utils",
    "@visant/liquid-glass"
  ],
  "files": [
    {
      "path": "registry/visant/ui/glass-button.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { LiquidGlass } from \"@/components/ui/liquid-glass\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface GlassButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** `pill` leva texto; `circle` leva só ícone e pede `aria-label`. */\n  shape?: \"pill\" | \"circle\";\n}\n\nconst VIDRO = (h: number) => ({\n  borderRadius: 999,\n  scale: -h * 0.42,\n  aberration: [0, h * 0.04, h * 0.08],\n  blur: h * 0.06,\n  border: 0.06,\n  displaceBlur: h * 0.05,\n});\n\n/**\n * Botão de vidro que refrata o fundo. Com `aria-pressed` vira alternância, e o\n * estado aceso é o miolo branco: cor nenhuma entra na peça. O vidro não sustenta\n * contraste sozinho, então só use sobre fundo escuro ou foto com véu.\n */\nexport function GlassButton({ shape = \"pill\", type = \"button\", className, children, ...props }: GlassButtonProps) {\n  return (\n    <button type={type} className={cn(\"glass-button\", className)} data-shape={shape} {...props}>\n      <LiquidGlass className=\"glass-button-vidro\" options={VIDRO} aria-hidden />\n      <span className=\"glass-button-miolo\">{children}</span>\n    </button>\n  );\n}\n",
      "type": "registry:ui"
    }
  ],
  "css": {
    ".glass-button": {
      "position": "relative",
      "display": "inline-grid",
      "place-items": "center",
      "min-height": "2.75rem",
      "padding": "0 1.25rem",
      "border": "0",
      "border-radius": "999px",
      "background": "none",
      "color": "white",
      "font": "600 0.875rem/1 var(--font-sans, system-ui)",
      "cursor": "pointer",
      "transition": "transform var(--dur-press, 120ms) var(--ease-out)"
    },
    ".glass-button[data-shape=\"circle\"]": {
      "width": "3.5rem",
      "height": "3.5rem",
      "padding": "0"
    },
    ".glass-button:active": {
      "transform": "scale(0.97)"
    },
    ".glass-button:disabled": {
      "opacity": "0.5",
      "cursor": "default"
    },
    ".glass-button:focus-visible": {
      "outline": "2px solid white",
      "outline-offset": "2px"
    },
    ".glass-button-vidro": {
      "position": "absolute",
      "inset": "0",
      "border-radius": "inherit",
      "background": "color-mix(in srgb, white 12%, transparent)",
      "box-shadow": "inset 0 0 0 1px color-mix(in srgb, white 26%, transparent), inset 0 1.5px 0 color-mix(in srgb, white 30%, transparent)"
    },
    ".glass-button-miolo": {
      "position": "relative",
      "display": "inline-flex",
      "align-items": "center",
      "gap": "0.5rem"
    },
    ".glass-button[data-shape=\"circle\"] .glass-button-miolo": {
      "width": "60%",
      "height": "60%",
      "justify-content": "center",
      "border-radius": "50%",
      "background": "color-mix(in srgb, white 12%, transparent)",
      "transition": "background-color var(--dur-fast, 160ms) var(--ease-out), color var(--dur-fast, 160ms) var(--ease-out)"
    },
    ".glass-button[data-shape=\"circle\"] svg": {
      "width": "55%",
      "height": "55%"
    },
    ".glass-button[aria-pressed=\"true\"] .glass-button-miolo": {
      "background": "white",
      "color": "black"
    },
    ".glass-button[data-shape=\"pill\"][aria-pressed=\"true\"] .glass-button-miolo": {
      "background": "none",
      "color": "inherit"
    },
    ".glass-button[data-shape=\"pill\"][aria-pressed=\"true\"] .glass-button-vidro": {
      "background": "color-mix(in srgb, white 34%, transparent)"
    },
    "@media (prefers-reduced-motion: reduce)": {
      ".glass-button, .glass-button-miolo": {
        "transition": "none !important"
      }
    }
  },
  "meta": {
    "uso": {
      "quando": "Ação sobre foto ou vídeo, como player, câmera ou barra flutuante",
      "evite": "Ação principal em fundo claro ou liso: button; a ação que define a dobra, cta-surface"
    }
  },
  "categories": [
    "controles",
    "vidro",
    "botao",
    "icone",
    "alternancia"
  ],
  "type": "registry:ui"
}