{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "glass-surface",
  "title": "Glass Surface",
  "description": "The frosted primitive every other liquid component is built from: squircle corners, a directional rim, and a specular sheen driven by one shared light angle.",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "http://localhost:5173/r/liquid-theme.json"
  ],
  "files": [
    {
      "path": "src/components/ui/glass-surface.tsx",
      "content": "import * as React from \"react\"\nimport { Slot } from \"radix-ui\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\n/**\n * Corner sizes are named after the reference set rather than after a scale,\n * because the radius is what makes these read as one family. `xl` is the\n * widget corner; `md` is the tile corner; `pill` is for controls.\n */\nconst CORNER = {\n  sm: \"12px\",\n  md: \"20px\",\n  lg: \"28px\",\n  xl: \"38px\",\n  \"2xl\": \"48px\",\n  pill: \"999px\",\n  none: \"0px\",\n} as const\n\nexport type Corner = keyof typeof CORNER\n\nconst surface = cva(\"relative lq-squircle lq-ease transition-[transform,box-shadow,background-color] duration-500\", {\n  variants: {\n    material: {\n      /** Frosted — blurs and saturates whatever sits behind it. */\n      glass: \"lq-glass text-white\",\n      /** Opaque white tile. Same light, no transparency. */\n      solid: \"lq-solid text-ink dark:text-white\",\n      /** The filled black surface: orbs, chips, the dark rail. */\n      ink: \"bg-ink text-white shadow-[var(--lq-cast)]\",\n      /** No surface at all — useful when you only want the geometry. */\n      none: \"\",\n    },\n    interactive: {\n      true: \"cursor-pointer will-change-transform hover:-translate-y-0.5 active:translate-y-0 active:scale-[0.994] focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-current\",\n      false: \"\",\n    },\n  },\n  defaultVariants: { material: \"glass\", interactive: false },\n})\n\nexport interface GlassSurfaceProps\n  extends React.ComponentProps<\"div\">,\n    VariantProps<typeof surface> {\n  corner?: Corner | (string & {})\n  /**\n   * Rotates this surface's light source away from the page default.\n   * Use sparingly — the whole point of the token is that a scene shares one.\n   */\n  lightAngle?: string\n  /** Backdrop blur radius. Higher reads as thicker glass. */\n  blur?: string\n  /** A gradient or color painted *inside* the glass, under the content. */\n  tint?: string\n  /**\n   * Film grain over the glass itself. The reference set is photographic —\n   * a perfectly clean blur is the fastest way to make it look synthetic.\n   */\n  grain?: boolean | number\n  asChild?: boolean\n}\n\n/**\n * The primitive every other component in this library is built from.\n *\n * ```tsx\n * <GlassSurface corner=\"xl\" className=\"p-6\">…</GlassSurface>\n * ```\n */\nexport function GlassSurface({\n  className,\n  material,\n  interactive,\n  corner = \"lg\",\n  lightAngle,\n  blur,\n  tint,\n  grain = true,\n  asChild,\n  style,\n  children,\n  ...props\n}: GlassSurfaceProps) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      data-slot=\"glass-surface\"\n      data-material={material ?? \"glass\"}\n      className={cn(surface({ material, interactive }), \"overflow-hidden\", className)}\n      style={\n        {\n          \"--lq-corner\": corner in CORNER ? CORNER[corner as Corner] : corner,\n          ...(lightAngle ? { \"--lq-light-angle\": lightAngle } : {}),\n          ...(blur ? { \"--lq-blur\": blur } : {}),\n          ...style,\n        } as React.CSSProperties\n      }\n      {...props}\n    >\n      {tint ? (\n        <span\n          aria-hidden\n          className=\"pointer-events-none absolute inset-0 -z-10\"\n          style={{ background: tint }}\n        />\n      ) : null}\n      {grain && material !== \"none\" ? (\n        <span\n          aria-hidden\n          className=\"lq-grain\"\n          style={typeof grain === \"number\" ? { opacity: grain } : undefined}\n        />\n      ) : null}\n      {children}\n    </Comp>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}