@glinui/ui 0.1.0

package/dist/components/blur-fade.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+export interface BlurFadeProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Delay before transition starts (ms) */
+    delay?: number;
+    /** Transition duration (ms) */
+    duration?: number;
+    /** Initial blur amount (px) */
+    blur?: number;
+    /** Initial Y offset (px) */
+    yOffset?: number;
+    /** Only animate once */
+    once?: boolean;
+    /** IntersectionObserver threshold (0-1) */
+    threshold?: number;
+}
+export declare const BlurFade: React.ForwardRefExoticComponent<BlurFadeProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=blur-fade.d.ts.map

package/dist/components/blur-fade.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"blur-fade.d.ts","sourceRoot":"","sources":["../../src/components/blur-fade.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,+BAA+B;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,4BAA4B;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,wBAAwB;IACxB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,QAAQ,sFA8EpB,CAAA"}

package/dist/components/blur-fade.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn";
+export const BlurFade = React.forwardRef(({ className, children, delay = 0, duration = 500, blur = 8, yOffset = 12, once = true, threshold = 0.1, style, ...props }, ref) => {
+    const localRef = React.useRef(null);
+    const [isVisible, setIsVisible] = React.useState(false);
+    const setRefs = React.useCallback((node) => {
+        localRef.current = node;
+        if (typeof ref === "function") {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    React.useEffect(() => {
+        const el = localRef.current;
+        if (!el)
+            return;
+        const prefersReduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+        if (prefersReduced) {
+            setIsVisible(true);
+            return;
+        }
+        const observer = new IntersectionObserver(([entry]) => {
+            if (entry.isIntersecting) {
+                setIsVisible(true);
+                if (once)
+                    observer.unobserve(el);
+            }
+            else if (!once) {
+                setIsVisible(false);
+            }
+        }, { threshold });
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [once, threshold]);
+    return (_jsx("div", { ref: setRefs, className: cn("transition-[opacity,filter,transform] ease-standard motion-reduce:!opacity-100 motion-reduce:!filter-none motion-reduce:!transform-none", className), style: {
+            transitionDuration: `${duration}ms`,
+            transitionDelay: `${delay}ms`,
+            opacity: isVisible ? 1 : 0,
+            filter: isVisible ? "blur(0px)" : `blur(${blur}px)`,
+            transform: isVisible ? "translateY(0)" : `translateY(${yOffset}px)`,
+            ...style,
+        }, ...props, children: children }));
+});
+BlurFade.displayName = "BlurFade";

package/dist/components/blur-spotlight.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+export interface BlurSpotlightProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Spotlight radius in px */
+    size?: number;
+    /** Spotlight color */
+    color?: string;
+    /** Blur amount in px */
+    blur?: number;
+    /** Intensity/opacity (0-1) */
+    intensity?: number;
+}
+export declare const BlurSpotlight: React.ForwardRefExoticComponent<BlurSpotlightProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=blur-spotlight.d.ts.map

package/dist/components/blur-spotlight.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"blur-spotlight.d.ts","sourceRoot":"","sources":["../../src/components/blur-spotlight.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC9E,6BAA6B;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,wBAAwB;IACxB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,aAAa,2FAmFzB,CAAA"}

package/dist/components/blur-spotlight.js

@@ -0,0 +1,58 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn";
+import { usePrefersReducedMotion } from "../lib/use-prefers-reduced-motion";
+export const BlurSpotlight = React.forwardRef(({ className, size = 300, color = "#6366f1", blur = 80, intensity = 0.5, style, ...props }, ref) => {
+    const prefersReducedMotion = usePrefersReducedMotion();
+    const localRef = React.useRef(null);
+    const setRefs = React.useCallback((node) => {
+        localRef.current = node;
+        if (typeof ref === "function") {
+            ref(node);
+            return;
+        }
+        if (ref)
+            ref.current = node;
+    }, [ref]);
+    React.useEffect(() => {
+        if (prefersReducedMotion)
+            return;
+        const el = localRef.current;
+        if (!el)
+            return;
+        const parent = el.parentElement;
+        if (!parent)
+            return;
+        const handleMouseMove = (event) => {
+            const rect = parent.getBoundingClientRect();
+            const x = event.clientX - rect.left;
+            const y = event.clientY - rect.top;
+            el.style.setProperty("--spot-x", `${x}px`);
+            el.style.setProperty("--spot-y", `${y}px`);
+            el.style.setProperty("--spot-visible", "1");
+        };
+        const handleMouseLeave = () => {
+            el.style.setProperty("--spot-visible", "0");
+        };
+        parent.addEventListener("mousemove", handleMouseMove);
+        parent.addEventListener("mouseleave", handleMouseLeave);
+        return () => {
+            parent.removeEventListener("mousemove", handleMouseMove);
+            parent.removeEventListener("mouseleave", handleMouseLeave);
+        };
+    }, [prefersReducedMotion]);
+    return (_jsx("div", { ref: setRefs, "aria-hidden": true, className: cn("pointer-events-none absolute inset-0 overflow-hidden transition-opacity duration-300 motion-reduce:hidden", className), style: {
+            opacity: `var(--spot-visible, 0)`,
+            ...style,
+        }, ...props, children: _jsx("div", { className: "absolute -translate-x-1/2 -translate-y-1/2 rounded-full", style: {
+                left: "var(--spot-x, 50%)",
+                top: "var(--spot-y, 50%)",
+                width: size,
+                height: size,
+                background: `radial-gradient(circle, ${color}, transparent 70%)`,
+                filter: `blur(${blur}px)`,
+                opacity: intensity,
+            } }) }));
+});
+BlurSpotlight.displayName = "BlurSpotlight";

package/dist/components/border-beam.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+export interface BorderBeamProps extends React.HTMLAttributes<HTMLDivElement> {
+    duration?: number;
+    delay?: number;
+    size?: number;
+    colorFrom?: string;
+    colorTo?: string;
+    borderRadius?: string;
+}
+export declare const BorderBeam: React.ForwardRefExoticComponent<BorderBeamProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=border-beam.d.ts.map

package/dist/components/border-beam.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"border-beam.d.ts","sourceRoot":"","sources":["../../src/components/border-beam.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,eAAO,MAAM,UAAU,wFA8CtB,CAAA"}

package/dist/components/border-beam.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn";
+export const BorderBeam = React.forwardRef(({ className, duration = 6, delay = 0, size = 100, colorFrom = "var(--color-accent)", colorTo = "transparent", borderRadius, style, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("pointer-events-none absolute inset-0 rounded-[inherit] motion-reduce:hidden", "[mask-clip:padding-box,border-box] [mask-composite:intersect]", "border border-transparent", "[mask-image:linear-gradient(transparent,transparent),linear-gradient(#fff,#fff)]", className), style: {
+        "--border-beam-duration": `${duration}s`,
+        borderRadius: borderRadius,
+        ...style,
+    }, ...props, children: _jsx("div", { className: "absolute aspect-square motion-safe:animate-[border-beam_var(--border-beam-duration,6s)_linear_infinite]", style: {
+            width: size,
+            offsetPath: "rect(0 auto auto 0)",
+            animationDelay: `${delay}s`,
+            background: `linear-gradient(to left, ${colorFrom}, ${colorTo})`,
+        } }) })));
+BorderBeam.displayName = "BorderBeam";

package/dist/components/button.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "glass" | "frosted" | "outline" | "ghost" | "matte" | "liquid" | "glow" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+};
+export declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<(props?: ({
+    variant?: "default" | "glass" | "frosted" | "outline" | "ghost" | "matte" | "liquid" | "glow" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
+    asChild?: boolean;
+} & React.RefAttributes<HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=button.d.ts.map

package/dist/components/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/components/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAKjE,QAAA,MAAM,cAAc;;;8EAiCnB,CAAA;AAED,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GACrE,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAEH,eAAO,MAAM,MAAM;;;;cAHL,OAAO;2CAepB,CAAA"}

package/dist/components/button.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { Slot } from "@radix-ui/react-slot";
+import { cn } from "../lib/cn";
+const buttonVariants = cva("inline-flex items-center justify-center whitespace-nowrap rounded-xl border border-transparent font-medium transition-[transform,background-color,box-shadow,color,border-color,opacity] duration-normal ease-standard focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black/40 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:translate-y-0 disabled:opacity-50 motion-reduce:transition-none dark:focus-visible:ring-white/45", {
+    variants: {
+        variant: {
+            default: "border-black/10 bg-neutral-900 text-white shadow-[0_12px_26px_-16px_rgb(2_6_23_/_0.65)] hover:-translate-y-px hover:bg-neutral-800 active:translate-y-0 dark:border-white/15 dark:bg-neutral-100 dark:text-neutral-950 dark:shadow-[0_10px_24px_-14px_rgb(255_255_255_/_0.28)] dark:hover:bg-white",
+            glass: "relative isolate overflow-hidden border-neutral-300/60 [border-top-color:var(--glass-refraction-top)] bg-white/50 text-[var(--color-foreground)] backdrop-blur-xl backdrop-saturate-[180%] shadow-[0_0_0_1px_rgb(255_255_255_/_0.4)_inset,0_10px_22px_-14px_rgb(15_23_42_/_0.18)] before:pointer-events-none before:absolute before:inset-x-0 before:top-0 before:h-px before:bg-gradient-to-r before:from-transparent before:via-white/70 before:to-transparent hover:-translate-y-px hover:bg-white/60 hover:shadow-[0_0_0_1px_rgb(255_255_255_/_0.5)_inset,0_14px_26px_-14px_rgb(15_23_42_/_0.22)] active:translate-y-0 dark:border-white/[0.12] dark:bg-[linear-gradient(155deg,rgb(255_255_255_/_0.1),rgb(255_255_255_/_0.04))] dark:shadow-[0_0_0_1px_rgb(255_255_255_/_0.08)_inset,0_8px_20px_-12px_rgb(0_0_0_/_0.5)] dark:before:via-white/20 dark:hover:bg-[linear-gradient(155deg,rgb(255_255_255_/_0.14),rgb(255_255_255_/_0.06))] dark:hover:shadow-[0_0_0_1px_rgb(255_255_255_/_0.12)_inset,0_12px_28px_-12px_rgb(0_0_0_/_0.55)]",
+            frosted: "relative isolate overflow-hidden border-neutral-300/70 [border-top-color:var(--glass-refraction-top)] bg-white/70 text-[var(--color-foreground)] backdrop-blur-[40px] backdrop-saturate-[200%] shadow-[0_0_0_1px_rgb(255_255_255_/_0.5)_inset,0_0_16px_rgb(255_255_255_/_0.15)_inset,0_10px_22px_-14px_rgb(15_23_42_/_0.22)] before:pointer-events-none before:absolute before:inset-x-0 before:top-0 before:h-px before:bg-gradient-to-r before:from-transparent before:via-white/80 before:to-transparent hover:-translate-y-px hover:bg-white/80 hover:shadow-[0_0_0_1px_rgb(255_255_255_/_0.6)_inset,0_0_20px_rgb(255_255_255_/_0.18)_inset,0_14px_26px_-14px_rgb(15_23_42_/_0.26)] active:translate-y-0 dark:border-white/[0.16] dark:bg-[linear-gradient(155deg,rgb(255_255_255_/_0.16),rgb(255_255_255_/_0.06))] dark:shadow-[0_0_0_1px_rgb(255_255_255_/_0.1)_inset,0_0_16px_rgb(255_255_255_/_0.04)_inset,0_8px_20px_-12px_rgb(0_0_0_/_0.5)] dark:before:via-white/25 dark:hover:bg-[linear-gradient(155deg,rgb(255_255_255_/_0.2),rgb(255_255_255_/_0.08))] dark:hover:shadow-[0_0_0_1px_rgb(255_255_255_/_0.14)_inset,0_0_20px_rgb(255_255_255_/_0.06)_inset,0_12px_28px_-12px_rgb(0_0_0_/_0.55)]",
+            liquid: "relative isolate overflow-hidden border-neutral-400/40 [border-top-color:var(--glass-refraction-top)] bg-[radial-gradient(circle_at_16%_12%,rgb(255_255_255_/_0.92),transparent_44%),linear-gradient(168deg,rgb(255_255_255_/_0.72),rgb(236_236_236_/_0.42))] text-[var(--color-foreground)] backdrop-blur-xl backdrop-saturate-[180%] shadow-[0_1px_3px_rgb(0_0_0_/_0.08),0_0_0_1px_rgb(255_255_255_/_0.5)_inset,0_14px_28px_-16px_rgb(15_23_42_/_0.22)] before:pointer-events-none before:absolute before:inset-0 before:bg-[radial-gradient(circle_at_80%_72%,rgb(255_255_255_/_0.5),transparent_50%),radial-gradient(circle_at_36%_82%,rgb(226_232_240_/_0.4),transparent_56%)] before:opacity-85 after:pointer-events-none after:absolute after:-inset-y-16 after:-left-20 after:w-24 after:rotate-12 after:bg-[linear-gradient(100deg,transparent_20%,rgb(255_255_255_/_0.9)_50%,transparent_80%)] after:opacity-70 after:blur-sm after:transition-transform after:duration-slow after:ease-standard hover:-translate-y-px hover:border-neutral-400/50 hover:[border-top-color:rgb(255_255_255_/_0.95)] hover:bg-[radial-gradient(circle_at_16%_12%,rgb(255_255_255_/_0.98),transparent_44%),linear-gradient(168deg,rgb(255_255_255_/_0.82),rgb(232_232_236_/_0.52))] hover:shadow-[0_2px_6px_rgb(0_0_0_/_0.1),0_0_0_1px_rgb(255_255_255_/_0.6)_inset,0_18px_32px_-18px_rgb(15_23_42_/_0.26)] hover:after:translate-x-28 motion-reduce:after:transition-none dark:border-white/[0.14] dark:bg-[linear-gradient(168deg,rgb(255_255_255_/_0.14),rgb(255_255_255_/_0.05))] dark:shadow-[0_0_0_1px_rgb(255_255_255_/_0.1)_inset,0_10px_24px_-12px_rgb(0_0_0_/_0.5)] dark:hover:border-white/[0.24] dark:hover:[border-top-color:rgb(255_255_255_/_0.38)] dark:hover:bg-[linear-gradient(168deg,rgb(255_255_255_/_0.18),rgb(255_255_255_/_0.07))] dark:hover:shadow-[0_0_0_1px_rgb(255_255_255_/_0.2),0_0_0_1px_rgb(255_255_255_/_0.14)_inset,0_14px_30px_-12px_rgb(0_0_0_/_0.55)] dark:before:opacity-55 dark:after:opacity-40",
+            matte: "relative isolate overflow-hidden border-black/10 bg-[linear-gradient(180deg,rgb(250_250_250),rgb(234_234_236))] text-neutral-900 shadow-[0_1px_0_rgb(255_255_255_/_0.92)_inset,0_8px_18px_-14px_rgb(15_23_42_/_0.3)] before:pointer-events-none before:absolute before:inset-0 before:bg-[linear-gradient(180deg,rgb(255_255_255_/_0.62),transparent)] backdrop-saturate-150 hover:-translate-y-px hover:bg-[linear-gradient(180deg,rgb(255_255_255),rgb(238_238_240))] hover:shadow-[0_1px_0_rgb(255_255_255_/_0.96)_inset,0_12px_22px_-14px_rgb(15_23_42_/_0.36)] active:translate-y-0 dark:border-white/[0.14] dark:bg-[linear-gradient(180deg,rgb(53_58_67_/_0.92),rgb(34_38_46_/_0.92))] dark:text-neutral-100 dark:shadow-[0_1px_0_rgb(255_255_255_/_0.12)_inset,0_10px_24px_-14px_rgb(0_0_0_/_0.62)] dark:before:bg-[linear-gradient(180deg,rgb(255_255_255_/_0.12),transparent)] dark:hover:bg-[linear-gradient(180deg,rgb(60_66_76_/_0.92),rgb(38_43_52_/_0.92))] dark:hover:shadow-[0_1px_0_rgb(255_255_255_/_0.18)_inset,0_14px_28px_-14px_rgb(0_0_0_/_0.66)]",
+            glow: "border-white/20 bg-neutral-900 text-white shadow-[0_0_0_1px_rgb(255_255_255_/_0.12)_inset,0_10px_18px_-12px_rgb(2_6_23_/_0.55),0_0_24px_rgb(255_255_255_/_0.2)] hover:-translate-y-px hover:shadow-[0_0_0_1px_rgb(255_255_255_/_0.14)_inset,0_14px_24px_-12px_rgb(2_6_23_/_0.6),0_0_36px_rgb(255_255_255_/_0.34)] active:translate-y-0 dark:border-white/40 dark:bg-neutral-100 dark:text-neutral-950 dark:shadow-[0_0_0_1px_rgb(255_255_255_/_0.55),0_0_20px_rgb(255_255_255_/_0.3)] dark:hover:shadow-[0_0_0_1px_rgb(255_255_255_/_0.62),0_0_34px_rgb(255_255_255_/_0.42)]",
+            outline: "border-[var(--color-border)] bg-[var(--color-surface)]/75 text-[var(--color-foreground)] shadow-sm hover:-translate-y-px hover:bg-[var(--color-surface)] active:translate-y-0",
+            ghost: "border-transparent bg-transparent text-[var(--color-foreground)] hover:bg-[var(--glass-1-surface)] hover:[border-top-color:var(--glass-refraction-top)] hover:border-white/10 dark:hover:bg-white/[0.06]"
+        },
+        size: {
+            sm: "h-8 px-3 text-xs",
+            md: "h-10 px-4 text-sm",
+            lg: "h-12 px-6 text-base"
+        }
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "md"
+    }
+});
+export const Button = React.forwardRef(({ className, size, variant, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (_jsx(Comp, { ref: ref, className: cn(buttonVariants({ size, variant }), className), ...props }));
+});
+Button.displayName = "Button";

package/dist/components/card.d.ts

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const cardVariants: (props?: ({
+    variant?: "default" | "glass" | "frosted" | "outline" | "ghost" | "matte" | "liquid" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const cardSectionVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type CardProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof cardVariants>;
+export declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
+    variant?: "default" | "glass" | "frosted" | "outline" | "ghost" | "matte" | "liquid" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
+export type CardSectionProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof cardSectionVariants>;
+export type CardHeaderProps = CardSectionProps;
+export declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
+export interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    /** Additional class names for title text. */
+    className?: string;
+}
+export declare const CardTitle: React.ForwardRefExoticComponent<CardTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+export interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
+    /** Additional class names for description text. */
+    className?: string;
+}
+export declare const CardDescription: React.ForwardRefExoticComponent<CardDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+export type CardContentProps = CardSectionProps;
+export declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
+export type CardFooterProps = CardSectionProps;
+export declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=card.d.ts.map

package/dist/components/card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/components/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,YAAY;;;8EAoDhB,CAAA;AAEF,QAAA,MAAM,mBAAmB;;8EAWvB,CAAA;AAEF,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAA;AAEhG,eAAO,MAAM,IAAI;;;sHAEf,CAAA;AAIF,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GACjE,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAA;AAE1C,MAAM,MAAM,eAAe,GAAG,gBAAgB,CAAA;AAE9C,eAAO,MAAM,UAAU;;sHAErB,CAAA;AAIF,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC;IAC9E,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,SAAS,2FAErB,CAAA;AAID,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC;IACtF,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,eAAe,mGAE3B,CAAA;AAID,MAAM,MAAM,gBAAgB,GAAG,gBAAgB,CAAA;AAE/C,eAAO,MAAM,WAAW;;sHAEtB,CAAA;AAIF,MAAM,MAAM,eAAe,GAAG,gBAAgB,CAAA;AAE9C,eAAO,MAAM,UAAU;;sHAErB,CAAA"}

package/dist/components/card.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/cn";
+const cardVariants = cva("rounded-xl border text-[var(--color-foreground)]", {
+    variants: {
+        variant: {
+            default: "bg-[var(--color-surface)] border-[var(--color-border)] shadow-sm",
+            glass: [
+                "border-white/20 [border-top-color:var(--glass-refraction-top)]",
+                "bg-[radial-gradient(ellipse_at_50%_0%,rgb(255_255_255_/_0.16),transparent_50%),linear-gradient(to_bottom,rgb(255_255_255_/_0.1),rgb(255_255_255_/_0.04))]",
+                "backdrop-blur-xl backdrop-saturate-[180%]",
+                "shadow-[0_0_0_1px_rgb(255_255_255_/_0.1)_inset,var(--shadow-glass-sm)]",
+                "dark:border-white/[0.1] dark:[border-top-color:rgb(255_255_255_/_0.15)]",
+                "dark:bg-[radial-gradient(ellipse_at_50%_0%,rgb(255_255_255_/_0.05),transparent_50%),linear-gradient(to_bottom,rgb(255_255_255_/_0.03),rgb(255_255_255_/_0.01))]",
+                "dark:shadow-[0_0_0_1px_rgb(255_255_255_/_0.05)_inset,0_8px_24px_rgb(0_0_0_/_0.35)]"
+            ].join(" "),
+            frosted: [
+                "border-white/30 [border-top-color:var(--glass-refraction-top)]",
+                "bg-[radial-gradient(ellipse_at_50%_0%,rgb(255_255_255_/_0.32),transparent_50%),linear-gradient(to_bottom,rgb(255_255_255_/_0.22),rgb(255_255_255_/_0.1))]",
+                "backdrop-blur-[40px] backdrop-saturate-[200%]",
+                "shadow-[0_0_0_1px_rgb(255_255_255_/_0.15)_inset,0_0_20px_rgb(255_255_255_/_0.12)_inset,var(--shadow-glass-md)]",
+                "dark:border-white/[0.15] dark:[border-top-color:rgb(255_255_255_/_0.2)]",
+                "dark:bg-[radial-gradient(ellipse_at_50%_0%,rgb(255_255_255_/_0.1),transparent_50%),linear-gradient(to_bottom,rgb(255_255_255_/_0.06),rgb(255_255_255_/_0.02))]",
+                "dark:shadow-[0_0_0_1px_rgb(255_255_255_/_0.08)_inset,0_0_20px_rgb(255_255_255_/_0.04)_inset,0_8px_32px_rgb(0_0_0_/_0.4)]"
+            ].join(" "),
+            liquid: [
+                "border-white/25 [border-top-color:var(--glass-refraction-top)]",
+                "bg-[radial-gradient(circle_at_16%_14%,rgb(255_255_255_/_0.72),transparent_46%),linear-gradient(165deg,rgb(255_255_255_/_0.58),rgb(238_238_238_/_0.32))]",
+                "backdrop-blur-xl backdrop-saturate-[180%]",
+                "shadow-[0_0_0_1px_rgb(255_255_255_/_0.2)_inset,var(--shadow-glass-md)]",
+                "dark:border-white/[0.14] dark:[border-top-color:rgb(255_255_255_/_0.32)]",
+                "dark:bg-[linear-gradient(165deg,rgb(255_255_255_/_0.12),rgb(255_255_255_/_0.05))]",
+                "dark:shadow-[0_0_0_1px_rgb(255_255_255_/_0.06)_inset,0_12px_36px_rgb(0_0_0_/_0.4)]"
+            ].join(" "),
+            matte: [
+                "border-black/10",
+                "bg-[linear-gradient(180deg,rgb(250_250_250),rgb(236_236_238))]",
+                "shadow-[0_1px_3px_rgb(0_0_0_/_0.06),0_0_0_1px_rgb(0_0_0_/_0.04)_inset]",
+                "dark:border-white/[0.14]",
+                "dark:bg-[linear-gradient(180deg,rgb(55_60_70_/_0.9),rgb(37_42_50_/_0.9))]",
+                "dark:shadow-[0_1px_3px_rgb(0_0_0_/_0.2),0_0_0_1px_rgb(255_255_255_/_0.04)_inset]"
+            ].join(" "),
+            outline: "bg-transparent border-[var(--color-border)] shadow-sm",
+            ghost: "bg-transparent border-transparent"
+        },
+        size: {
+            sm: "p-4",
+            md: "p-6",
+            lg: "p-8"
+        }
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "md"
+    }
+});
+const cardSectionVariants = cva("", {
+    variants: {
+        size: {
+            sm: "space-y-1",
+            md: "space-y-1.5",
+            lg: "space-y-2"
+        }
+    },
+    defaultVariants: {
+        size: "md"
+    }
+});
+export const Card = React.forwardRef(({ className, variant, size, ...props }, ref) => (_jsx("div", { ref: ref, className: cn(cardVariants({ variant, size }), className), ...props })));
+Card.displayName = "Card";
+export const CardHeader = React.forwardRef(({ className, size, ...props }, ref) => (_jsx("div", { ref: ref, className: cn(cardSectionVariants({ size }), className), ...props })));
+CardHeader.displayName = "CardHeader";
+export const CardTitle = React.forwardRef(({ className, ...props }, ref) => _jsx("h3", { ref: ref, className: cn("text-lg font-semibold", className), ...props }));
+CardTitle.displayName = "CardTitle";
+export const CardDescription = React.forwardRef(({ className, ...props }, ref) => _jsx("p", { ref: ref, className: cn("text-sm text-neutral-600", className), ...props }));
+CardDescription.displayName = "CardDescription";
+export const CardContent = React.forwardRef(({ className, size, ...props }, ref) => (_jsx("div", { ref: ref, className: cn(cardSectionVariants({ size }), className), ...props })));
+CardContent.displayName = "CardContent";
+export const CardFooter = React.forwardRef(({ className, size, ...props }, ref) => (_jsx("div", { ref: ref, className: cn(cardSectionVariants({ size }), className), ...props })));
+CardFooter.displayName = "CardFooter";

package/dist/components/checkbox.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { type VariantProps } from "class-variance-authority";
+declare const checkboxVariants: (props?: ({
+    variant?: "default" | "glass" | "frosted" | "outline" | "matte" | "liquid" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type CheckboxProps = React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> & VariantProps<typeof checkboxVariants>;
+export declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
+    variant?: "default" | "glass" | "frosted" | "outline" | "matte" | "liquid" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=checkbox.d.ts.map

package/dist/components/checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/components/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,iBAAiB,MAAM,0BAA0B,CAAA;AAC7D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAKjE,QAAA,MAAM,gBAAgB;;;8EA6BrB,CAAA;AA+BD,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,GACvF,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAEvC,eAAO,MAAM,QAAQ;;;yHAenB,CAAA"}

package/dist/components/checkbox.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { cva } from "class-variance-authority";
+import { Check } from "lucide-react";
+import { cn } from "../lib/cn";
+const checkboxVariants = cva("peer shrink-0 outline-none transition-[background-color,border-color,box-shadow,transform] duration-fast ease-standard focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60 motion-reduce:transition-none data-[state=checked]:scale-[0.99]", {
+    variants: {
+        variant: {
+            default: "border border-[var(--color-border)] bg-[var(--color-surface)] shadow-sm focus-visible:ring-[var(--color-accent)]/35 data-[state=checked]:border-[var(--color-accent)] data-[state=checked]:bg-[var(--color-accent)] dark:border-white/15 dark:bg-white/[0.04] dark:focus-visible:ring-[var(--color-accent)]/25",
+            glass: "border border-white/24 [border-top-color:var(--glass-refraction-top)] bg-[radial-gradient(circle_at_20%_16%,rgb(255_255_255_/_0.88),transparent_44%),linear-gradient(160deg,rgb(255_255_255_/_0.72),rgb(242_246_250_/_0.48))] shadow-[0_0_0_1px_rgb(255_255_255_/_0.2)_inset,0_8px_16px_-12px_rgb(15_23_42_/_0.25)] focus-visible:ring-[var(--color-accent)]/24 data-[state=checked]:border-white/40 data-[state=checked]:bg-neutral-900 data-[state=checked]:[border-top-color:rgb(255_255_255_/_0.9)] dark:border-white/[0.14] dark:bg-white/[0.06] dark:focus-visible:ring-white/15 dark:data-[state=checked]:border-white/[0.3] dark:data-[state=checked]:bg-white",
+            frosted: "border border-white/30 [border-top-color:var(--glass-refraction-top)] bg-[radial-gradient(circle_at_20%_16%,rgb(255_255_255_/_0.94),transparent_44%),linear-gradient(160deg,rgb(255_255_255_/_0.85),rgb(242_246_250_/_0.65))] shadow-[0_0_0_1px_rgb(255_255_255_/_0.25)_inset,0_0_12px_rgb(255_255_255_/_0.1)_inset,0_8px_16px_-12px_rgb(15_23_42_/_0.28)] focus-visible:ring-[var(--color-accent)]/24 data-[state=checked]:border-white/40 data-[state=checked]:bg-neutral-900 data-[state=checked]:[border-top-color:rgb(255_255_255_/_0.9)] dark:border-white/[0.16] dark:bg-white/[0.08] dark:focus-visible:ring-white/18 dark:data-[state=checked]:border-white/[0.3] dark:data-[state=checked]:bg-white",
+            liquid: "border border-white/24 [border-top-color:var(--glass-refraction-top)] bg-[radial-gradient(circle_at_18%_12%,rgb(255_255_255_/_0.94),transparent_42%),radial-gradient(circle_at_84%_88%,rgb(226_232_240_/_0.58),transparent_58%),linear-gradient(145deg,rgb(255_255_255_/_0.82),rgb(235_241_246_/_0.55))] shadow-[0_0_0_1px_rgb(255_255_255_/_0.24)_inset,0_10px_18px_-12px_rgb(15_23_42_/_0.26)] focus-visible:ring-[var(--color-accent)]/24 data-[state=checked]:border-white/44 data-[state=checked]:bg-neutral-900 data-[state=checked]:[border-top-color:rgb(255_255_255_/_0.92)] dark:border-white/[0.15] dark:bg-[linear-gradient(145deg,rgb(255_255_255_/_0.13),rgb(255_255_255_/_0.05))] dark:focus-visible:ring-white/16 dark:data-[state=checked]:border-white/[0.34] dark:data-[state=checked]:bg-white",
+            matte: "border border-black/12 bg-[linear-gradient(180deg,rgb(249_250_251),rgb(237_239_242))] shadow-[0_1px_0_rgb(255_255_255_/_0.88)_inset,0_6px_14px_-12px_rgb(15_23_42_/_0.24)] focus-visible:ring-black/14 data-[state=checked]:border-black/65 data-[state=checked]:bg-black dark:border-white/[0.14] dark:bg-[linear-gradient(180deg,rgb(49_54_63_/_0.92),rgb(34_38_46_/_0.92))] dark:focus-visible:ring-white/14 dark:data-[state=checked]:border-white/70 dark:data-[state=checked]:bg-white",
+            outline: "border border-[var(--color-border)] bg-transparent focus-visible:ring-[var(--color-accent)]/25 data-[state=checked]:border-[var(--color-accent)] data-[state=checked]:bg-[var(--color-accent)] dark:border-white/20"
+        },
+        size: {
+            sm: "h-4 w-4 rounded-[0.3rem]",
+            md: "h-5 w-5 rounded",
+            lg: "h-6 w-6 rounded-md"
+        }
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "md"
+    }
+});
+const checkboxIconVariants = cva("", {
+    variants: {
+        size: {
+            sm: "h-3 w-3",
+            md: "h-3.5 w-3.5",
+            lg: "h-4 w-4"
+        }
+    },
+    defaultVariants: {
+        size: "md"
+    }
+});
+const checkboxIndicatorVariants = cva("flex items-center justify-center", {
+    variants: {
+        variant: {
+            default: "text-[var(--color-accent-foreground)]",
+            glass: "text-white dark:text-neutral-900",
+            frosted: "text-white dark:text-neutral-900",
+            liquid: "text-white dark:text-neutral-900",
+            matte: "text-white dark:text-neutral-900",
+            outline: "text-[var(--color-accent-foreground)]"
+        }
+    },
+    defaultVariants: {
+        variant: "default"
+    }
+});
+export const Checkbox = React.forwardRef(({ className, variant, size, ...props }, ref) => {
+    return (_jsx(CheckboxPrimitive.Root, { ref: ref, className: cn(checkboxVariants({ variant, size }), className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { className: cn(checkboxIndicatorVariants({ variant })), children: _jsx(Check, { className: cn(checkboxIconVariants({ size })) }) }) }));
+});
+Checkbox.displayName = "Checkbox";

package/dist/components/chip.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const chipVariants: (props?: ({
+    variant?: "default" | "glass" | "outline" | "ghost" | null | undefined;
+    tone?: "success" | "warning" | "info" | "neutral" | "danger" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type ChipProps = React.HTMLAttributes<HTMLSpanElement> & VariantProps<typeof chipVariants>;
+export declare const Chip: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & VariantProps<(props?: ({
+    variant?: "default" | "glass" | "outline" | "ghost" | null | undefined;
+    tone?: "success" | "warning" | "info" | "neutral" | "danger" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLSpanElement>>;
+export {};
+//# sourceMappingURL=chip.d.ts.map

package/dist/components/chip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../../src/components/chip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,YAAY;;;;8EA+BjB,CAAA;AAED,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAA;AAEjG,eAAO,MAAM,IAAI;;;;uHAIhB,CAAA"}

package/dist/components/chip.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/cn";
+const chipVariants = cva("inline-flex items-center justify-center rounded-full border font-medium transition-[background-color,color,border-color,box-shadow] duration-fast ease-standard motion-reduce:transition-none", {
+    variants: {
+        variant: {
+            default: "border-[var(--color-border)] bg-[var(--color-surface)] text-[var(--color-foreground)] dark:border-white/20",
+            glass: "border-white/20 [border-top-color:var(--glass-refraction-top)] bg-[var(--glass-1-surface)] text-[var(--color-foreground)] dark:border-white/[0.14] dark:bg-white/[0.05]",
+            outline: "border-[var(--color-border)] bg-transparent text-[var(--color-foreground)] dark:border-white/20",
+            ghost: "border-transparent bg-[var(--color-foreground)]/[0.08] text-[var(--color-foreground)] dark:bg-white/[0.1]"
+        },
+        tone: {
+            neutral: "",
+            info: "text-sky-700 dark:text-sky-300",
+            success: "text-emerald-700 dark:text-emerald-300",
+            warning: "text-amber-700 dark:text-amber-300",
+            danger: "text-rose-700 dark:text-rose-300"
+        },
+        size: {
+            sm: "h-5 px-2 text-[10px]",
+            md: "h-6 px-2.5 text-xs",
+            lg: "h-7 px-3 text-sm"
+        }
+    },
+    defaultVariants: {
+        variant: "default",
+        tone: "neutral",
+        size: "md"
+    }
+});
+export const Chip = React.forwardRef(({ className, variant, tone, size, ...props }, ref) => {
+    return _jsx("span", { ref: ref, className: cn(chipVariants({ variant, tone, size }), className), ...props });
+});
+Chip.displayName = "Chip";

package/dist/components/chromatic-text.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+export interface ChromaticTextProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Offset amount in px for the chromatic split */
+    offset?: number;
+    /** Animation duration in seconds (0 = static) */
+    duration?: number;
+    /** Colors for the channels [red, blue] */
+    colors?: [string, string];
+}
+export declare const ChromaticText: React.ForwardRefExoticComponent<ChromaticTextProps & React.RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=chromatic-text.d.ts.map

package/dist/components/chromatic-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chromatic-text.d.ts","sourceRoot":"","sources":["../../src/components/chromatic-text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IAC/E,kDAAkD;IAClD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,iDAAiD;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CAC1B;AAED,eAAO,MAAM,aAAa,4FAqEzB,CAAA"}

package/dist/components/chromatic-text.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn";
+export const ChromaticText = React.forwardRef(({ className, children, offset = 2, duration = 0, colors = ["#ff0040", "#0080ff"], style, ...props }, ref) => {
+    const isAnimated = duration > 0;
+    const text = typeof children === "string" ? children : undefined;
+    return (_jsxs("span", { ref: ref, className: cn("relative inline-block", className), style: style, ...props, children: [_jsx("span", { className: "relative z-[1]", children: children }), text && (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", className: cn("pointer-events-none absolute inset-0 select-none mix-blend-screen", isAnimated && "animate-chromatic-shift motion-reduce:[animation:none]"), style: {
+                            color: colors[0],
+                            "--chromatic-offset": `${offset}px`,
+                            "--chromatic-duration": isAnimated ? `${duration}s` : undefined,
+                            transform: isAnimated ? undefined : `translate(${offset}px, ${-offset}px)`,
+                            opacity: 0.7,
+                        }, children: text }), _jsx("span", { "aria-hidden": "true", className: cn("pointer-events-none absolute inset-0 select-none mix-blend-screen", isAnimated && "animate-chromatic-shift motion-reduce:[animation:none]"), style: {
+                            color: colors[1],
+                            "--chromatic-offset": `${offset}px`,
+                            "--chromatic-duration": isAnimated ? `${duration}s` : undefined,
+                            transform: isAnimated ? undefined : `translate(${-offset}px, ${offset}px)`,
+                            animationDirection: isAnimated ? "reverse" : undefined,
+                            opacity: 0.7,
+                        }, children: text })] }))] }));
+});
+ChromaticText.displayName = "ChromaticText";

package/dist/components/code.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const codeVariants: (props?: ({
+    variant?: "default" | "glass" | "outline" | "ghost" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type CodeProps = React.HTMLAttributes<HTMLElement> & VariantProps<typeof codeVariants>;
+export declare const Code: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & VariantProps<(props?: ({
+    variant?: "default" | "glass" | "outline" | "ghost" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLElement>>;
+export {};
+//# sourceMappingURL=code.d.ts.map

package/dist/components/code.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code.d.ts","sourceRoot":"","sources":["../../src/components/code.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,YAAY;;;8EAsBjB,CAAA;AAED,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAA;AAE7F,eAAO,MAAM,IAAI;;;mHAIhB,CAAA"}

package/dist/components/code.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/cn";
+const codeVariants = cva("inline-flex items-center rounded-md border px-1.5 py-0.5 font-mono transition-colors duration-fast ease-standard motion-reduce:transition-none", {
+    variants: {
+        variant: {
+            default: "border-[var(--color-border)] bg-[var(--color-surface)] text-[var(--color-foreground)] dark:border-white/15",
+            glass: "border-white/20 [border-top-color:var(--glass-refraction-top)] bg-[var(--glass-1-surface)] text-[var(--color-foreground)] dark:border-white/[0.14] dark:bg-white/[0.05]",
+            outline: "border-[var(--color-border)] bg-transparent text-[var(--color-foreground)] dark:border-white/20",
+            ghost: "border-transparent bg-[var(--color-foreground)]/[0.07] text-[var(--color-foreground)] dark:bg-white/[0.1]"
+        },
+        size: {
+            sm: "text-[10px]",
+            md: "text-xs",
+            lg: "text-sm"
+        }
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "md"
+    }
+});
+export const Code = React.forwardRef(({ className, variant, size, ...props }, ref) => {
+    return _jsx("code", { ref: ref, className: cn(codeVariants({ variant, size }), className), ...props });
+});
+Code.displayName = "Code";