{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "glass-panel",
  "title": "Glass Panel",
  "author": "AlgorizeTech",
  "description": "A frosted surface in four shapes and the aurora ground it sits on. Use it for glass bento layouts, profile and booking pages — or flip it to solid cards with one prop.",
  "dependencies": [],
  "registryDependencies": [
    "https://avaraui.com/r/ui-liquid-glass.json",
    "utils"
  ],
  "files": [
    {
      "path": "src/components/custom/blocks/GlassPanelBlock.tsx",
      "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport React from \"react\";\nimport {\n  LiquidGlassSvgFilter,\n  LiquidGlassWrapper,\n  formatRadius,\n} from \"@/components/custom/ui/liquid-glass\";\nimport { SurfaceContext, useSurface, type SurfaceVariant } from \"./glass-panel-context\";\n\n// The surface context and its hook, `useSurface`, live in glass-panel-context.ts.\nexport type { SurfaceVariant };\n\n// ==========================================\n// 1. GLASS BACKDROP — aurora ground + bento grid\n// ==========================================\n// The surface the panels sit on. Profile Page, Book Appointment and Booking\n// Card all build on this pair; it has no opinion about what the page is.\n\nexport interface GlassBackdropProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Frosted glass over an aurora, solid cards with a shadow, or liquid-glass refraction. */\n  variant?: SurfaceVariant;\n  /**\n   * Three colours washed behind the glass, top-left / top-right / bottom.\n   * Any CSS colour. The defaults are violet, sky and peach. Ignored by `solid`.\n   */\n  aurora?: [string, string, string];\n  /** Optional custom background image URL for liquid-glass variant. */\n  bgImage?: string;\n  /** Classes for the inner grid — row heights, gaps, a max width. */\n  gridClassName?: string;\n  /** Classes for the inner LiquidGlassWrapper — controls width ratio on large screens. */\n  wrapperClassName?: string;\n  /** Dynamic rounding radius for the wrapper/backdrop. Can be a string (\"1.5rem\", \"var(--radius-3xl)\") or number (px). */\n  radius?: string | number;\n}\n\nexport function GlassBackdrop({\n  className,\n  gridClassName,\n  wrapperClassName,\n  radius,\n  children,\n  variant = \"glass\",\n  aurora = [\"#a78bfa\", \"#7dd3fc\", \"#fdba74\"],\n  bgImage,\n  ...props\n}: GlassBackdropProps) {\n  if (variant === \"liquid-glass\") {\n    const liquidBg =\n      bgImage ||\n      \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_1600,c_limit/v1790146209/photo-1470071459604-3b5ec3a7fe05-1790146212205.jpg\";\n    const filterId = \"glass-blur-profile\";\n\n    return (\n      <SurfaceContext.Provider value={variant}>\n        <div\n          data-liquid-glass=\"\"\n          className={cn(\n            \"relative isolate w-full h-auto min-h-0 lg:h-full lg:min-h-[560px] flex flex-col justify-center overflow-hidden rounded-[var(--radius-3xl,2rem)] border border-white/10 text-white p-4 sm:p-6\",\n            className,\n          )}\n          {...props}\n        >\n          {/* Full-bleed background image - spans 100% width and height of outer container, completely unwrapped */}\n          <LiquidGlassSvgFilter id={filterId} bgImage={liquidBg} />\n          <img\n            src={liquidBg}\n            alt=\"\"\n            aria-hidden=\"true\"\n            style={radius ? { borderRadius: formatRadius(radius) } : undefined}\n            className=\"absolute inset-0 w-full h-full object-cover select-none pointer-events-none z-0 rounded-[inherit]\"\n          />\n\n          {/* LiquidGlassWrapper wraps ONLY the component grid area */}\n          <LiquidGlassWrapper\n            radius={radius ?? \"var(--radius-3xl, 1.75rem)\"}\n            bgImage={liquidBg}\n            filterId={filterId}\n            contrastOverlayClassName=\"bg-black/15 backdrop-blur-[1px]\"\n            className={cn(\n              \"relative z-10 w-full lg:w-[40%] lg:max-w-[40%] mx-auto text-white transition-all duration-300 p-1 sm:p-2 [--foreground:#ffffff] [--muted-foreground:rgba(255,255,255,0.85)]\",\n              wrapperClassName,\n            )}\n          >\n            <div\n              className={cn(\n                \"grid grid-cols-1 gap-4 md:grid-cols-6 lg:grid-cols-12 text-white\",\n                gridClassName,\n              )}\n            >\n              {children}\n            </div>\n          </LiquidGlassWrapper>\n        </div>\n      </SurfaceContext.Provider>\n    );\n  }\n\n  return (\n    <SurfaceContext.Provider value={variant}>\n      <div\n        className={cn(\n          \"relative isolate w-full overflow-hidden bg-background text-foreground\",\n          className,\n        )}\n        {...props}\n      >\n        {/* The blobs are what the glass blurs. They sit still — the only thing\n          that moves on this page is the live marker on the dial. */}\n        {variant === \"glass\" && (\n          <div\n            aria-hidden\n            className=\"pointer-events-none absolute inset-0 -z-10\"\n          >\n            <span\n              style={{ background: aurora[0] }}\n              className=\"absolute -left-32 -top-32 size-[32rem] rounded-full opacity-80 blur-3xl dark:opacity-35\"\n            />\n            <span\n              style={{ background: aurora[1] }}\n              className=\"absolute -right-24 top-16 size-[28rem] rounded-full opacity-80 blur-3xl dark:opacity-35\"\n            />\n            <span\n              style={{ background: aurora[2] }}\n              className=\"absolute -bottom-40 left-1/3 size-[32rem] rounded-full opacity-70 blur-3xl dark:opacity-30\"\n            />\n          </div>\n        )}\n\n        <div className={cn(\"grid grid-cols-1 gap-4 p-4 sm:p-6 md:grid-cols-6 lg:grid-cols-12\", gridClassName)}>\n          {children}\n        </div>\n      </div>\n    </SurfaceContext.Provider>\n  );\n}\n\n// ==========================================\n// 2. GLASS PANEL — one recipe, four shapes\n// ==========================================\nexport type GlassShape = \"slab\" | \"tile\" | \"disc\" | \"capsule\";\n\nconst SHAPES: Record<GlassShape, string> = {\n  /** Hero-level surface. */\n  slab: \"rounded-[var(--radius-3xl,2rem)]\",\n  /** Everyday content tile. */\n  tile: \"rounded-[var(--radius-2xl,1.5rem)]\",\n  /** A circle — for a single number or an icon. */\n  disc: \"aspect-square rounded-full\",\n  /** Chips, action bars, anything one line tall. */\n  capsule: \"rounded-full\",\n};\n\nexport interface GlassPanelProps extends React.HTMLAttributes<HTMLDivElement> {\n  shape?: GlassShape;\n  /** Lifts on hover and shows a pointer — for panels that open something. */\n  interactive?: boolean;\n  /** Override the surface set by the enclosing `GlassBackdrop`. */\n  variant?: SurfaceVariant;\n  /** Optional custom rounding radius override. */\n  radius?: string | number;\n}\n\nconst SURFACES: Record<SurfaceVariant, { base: string; hover: string }> = {\n  glass: {\n    base:\n      \"border border-card/70 bg-card/55 shadow-[inset_0_1px_0_rgba(255,255,255,0.75),0_24px_48px_-28px_rgba(15,23,42,0.35)] backdrop-blur-2xl \" +\n      \"dark:border-foreground/10 dark:bg-foreground/[0.06] dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.08),0_24px_48px_-28px_rgba(0,0,0,0.9)]\",\n    hover: \"hover:bg-card/70 dark:hover:bg-foreground/[0.09]\",\n  },\n  solid: {\n    base:\n      \"border border-border bg-card shadow-[0_1px_2px_rgba(0,0,0,0.04),0_16px_40px_-20px_rgba(15,23,42,0.25)] \" +\n      \"dark:shadow-[0_1px_2px_rgba(0,0,0,0.4),0_16px_40px_-20px_rgba(0,0,0,0.9)]\",\n    hover:\n      \"hover:shadow-[0_1px_2px_rgba(0,0,0,0.04),0_24px_48px_-20px_rgba(15,23,42,0.3)]\",\n  },\n  \"liquid-glass\": {\n    base:\n      \"border border-white/35 bg-white/15 text-white shadow-[0_8px_32px_rgba(0,0,0,0.15),inset_0_1px_1px_rgba(255,255,255,0.5)]\",\n    hover: \"hover:bg-white/25 hover:border-white/50\",\n  },\n};\n\nexport function GlassPanel({\n  shape = \"tile\",\n  interactive = false,\n  variant,\n  radius,\n  className,\n  style,\n  children,\n  ...props\n}: GlassPanelProps) {\n  const inherited = useSurface();\n  const surface = SURFACES[variant ?? inherited];\n  const formattedRadius = formatRadius(radius);\n  return (\n    <div\n      style={formattedRadius ? { borderRadius: formattedRadius, ...style } : style}\n      className={cn(\n        \"relative\",\n        surface.base,\n        SHAPES[shape],\n        interactive &&\n          cn(\n            \"cursor-pointer transition-[transform,background-color,box-shadow] duration-200 hover:-translate-y-0.5 motion-reduce:transition-none motion-reduce:hover:translate-y-0\",\n            surface.hover,\n          ),\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/custom/blocks/GlassPanelBlock.tsx"
    },
    {
      "path": "src/components/custom/blocks/glass-panel-context.ts",
      "content": "\"use client\";\n\nimport { createContext, useContext } from \"react\";\n\n/**\n * The page's surface treatment. `glass` is frosted panels over an aurora;\n * `solid` is plain theme cards with an ordinary shadow on a flat ground.\n */\nexport type SurfaceVariant = \"glass\" | \"solid\" | \"liquid-glass\";\n\n/** Set by `GlassBackdrop` for every `GlassPanel` inside it. */\nexport const SurfaceContext = createContext<SurfaceVariant>(\"glass\");\n\n/** The surface variant of the enclosing `GlassBackdrop`. */\nexport const useSurface = () => useContext(SurfaceContext);\n",
      "type": "registry:component",
      "target": "components/custom/blocks/glass-panel-context.ts"
    }
  ],
  "docs": "Named exports: GlassBackdrop, GlassPanel (plus SurfaceVariant, GlassShape types); useSurface is exported from glass-panel-context.ts, which installs alongside. `GlassBackdrop` washes three `aurora` colours behind a 12-column grid (`gridClassName` for row heights and gaps) and sets `variant` (glass | solid) for every `GlassPanel` inside; panels take `shape` (slab, tile, disc, capsule), `interactive`, and Tailwind column spans.",
  "categories": [
    "layout"
  ],
  "type": "registry:component"
}