sticky-surface

1---
2// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/sticky-surface/StickySurface.astro directly.
3/**
4 * @component StickySurface
5 * @title Sticky Surface
6 * @description A sticky surface component with scroll-based effects (border, shadow, surface swap, shrink, glass).
7 * @figmaUrl 
8 * 
9 * @preview
10 * 
11 * <div class="overflow-y-auto max-h-[320px] w-full bg-border px-8 border-border">
12 *   <div class="h-[1000px] bg-muted">
13 *     <StickySurface effects={["line", "elevate"]} threshold="1rem" observeStuck class="bg-background p-4 flex justify-between items-center">
14 *       <p>Scroll inside!</p>
15 *       <div class="flex items-center gap-2">
16 *         <Button size="sm" variant="outline" class="group-[.is-stuck]/surface:opacity-0 will-change-transform group-[.is-stuck]/surface:blur-sm transition-all duration-300 ease-out">Log in</Button>
17 *         <Button size="sm" class="w-24 group-[.is-stuck]/surface:w-28 duration-500 ease-out">
18 *           <span class="group-[.is-stuck]/surface:blur-sm group-[.is-stuck]/surface:opacity-0 absolute group-[.is-stuck]/surface:hidden transition-discrete duration-500 ease-out">Contact</span>
19 *           <span class="group-[.is-stuck]/surface:blur-none group-[.is-stuck]/surface:opacity-100 group-[.is-stuck]/surface:delay-150 opacity-0 transition-all blur-sm duration-500 ease-out">Get a demo</span>
20 *         </Button>
21 *       </div>
22 *     </StickySurface>
23 *   </div>
24 * </div>
25 *
26 * @usage
27 *
28 * ```astro nocollapse
29 * ---
30 * import { StickySurface } from '@bejamas/ui/components/sticky-surface';
31 * ---
32 *
33 * <StickySurface effects={["line", "elevate"]} threshold="1rem">
34 *   <!-- Your content here -->
35 * </StickySurface>
36 * ```
37 */
38 
39import type { HTMLTag } from "astro/types";
40import { cva } from "class-variance-authority";
41import { cn } from "@/lib/utils";
42 
43interface Props {
44  as?: HTMLTag;
45  threshold?: string | number;
46  effects?: Array<"line" | "elevate" | "backdrop">;
47  class?: string;
48  style?: string;
49  observeStuck?: boolean;
50}
51 
52const {
53  as = "div",
54  threshold = "16px",
55  effects = [],
56  class: className = "",
57  style = "",
58  ...props
59} = Astro.props as Props;
60 
61// Compose effect booleans for easier use
62const hasLine = effects.includes("line");
63const hasElevate = effects.includes("elevate");
64const hasBackdrop = effects.includes("backdrop");
65 
66// CSS variable tokens (can be overridden via Tailwind arbitrary props)
67const defaultVars = {
68// … truncated