@glinui/ui 0.1.0

package/dist/components/progress.d.ts

@@ -0,0 +1,58 @@
+import * as React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import { type VariantProps } from "class-variance-authority";
+declare const progressVariants: (props?: ({
+    variant?: "default" | "glass" | "matte" | "liquid" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const progressCircleVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type ProgressProps = React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> & VariantProps<typeof progressVariants> & {
+    /** Current progress value from 0 to 100. */
+    value?: number;
+    /** Render loading state without aria-valuenow and fixed width indicator. */
+    indeterminate?: boolean;
+};
+export declare const Progress: React.ForwardRefExoticComponent<Omit<ProgressPrimitive.ProgressProps & React.RefAttributes<HTMLDivElement>, "ref"> & VariantProps<(props?: ({
+    variant?: "default" | "glass" | "matte" | "liquid" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
+    /** Current progress value from 0 to 100. */
+    value?: number;
+    /** Render loading state without aria-valuenow and fixed width indicator. */
+    indeterminate?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+export type ProgressCircleProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & VariantProps<typeof progressCircleVariants> & {
+    value?: number;
+    variant?: NonNullable<VariantProps<typeof progressVariants>["variant"]>;
+    strokeWidth?: number;
+    cap?: "round" | "square" | "butt";
+    indeterminate?: boolean;
+    showValue?: boolean;
+    formatValue?: (value: number) => React.ReactNode;
+};
+export declare const ProgressCircle: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & VariantProps<(props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
+    value?: number;
+    variant?: NonNullable<VariantProps<typeof progressVariants>["variant"]>;
+    strokeWidth?: number;
+    cap?: "round" | "square" | "butt";
+    indeterminate?: boolean;
+    showValue?: boolean;
+    formatValue?: (value: number) => React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const CircularProgress: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & VariantProps<(props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
+    value?: number;
+    variant?: NonNullable<VariantProps<typeof progressVariants>["variant"]>;
+    strokeWidth?: number;
+    cap?: "round" | "square" | "butt";
+    indeterminate?: boolean;
+    showValue?: boolean;
+    formatValue?: (value: number) => React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=progress.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../src/components/progress.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;AAIjE,QAAA,MAAM,gBAAgB;;;8EAqBpB,CAAA;AAsCF,QAAA,MAAM,sBAAsB;;8EAW1B,CAAA;AAmCF,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,GACvF,YAAY,CAAC,OAAO,gBAAgB,CAAC,GAAG;IACtC,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,4EAA4E;IAC5E,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB,CAAA;AAEH,eAAO,MAAM,QAAQ;;;;IANjB,4CAA4C;YACpC,MAAM;IACd,4EAA4E;oBAC5D,OAAO;wCAyBzB,CAAA;AAIF,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GACtF,YAAY,CAAC,OAAO,sBAAsB,CAAC,GAAG;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,WAAW,CAAC,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC,SAAS,CAAC,CAAC,CAAA;IACvE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,GAAG,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;IACjC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAA;CACjD,CAAA;AAEH,eAAO,MAAM,cAAc;;;YATf,MAAM;cACJ,WAAW,CAAC,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC,SAAS,CAAC,CAAC;kBACzD,MAAM;UACd,OAAO,GAAG,QAAQ,GAAG,MAAM;oBACjB,OAAO;gBACX,OAAO;kBACL,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS;wCAuEnD,CAAA;AAID,eAAO,MAAM,gBAAgB;;;YAjFjB,MAAM;cACJ,WAAW,CAAC,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC,SAAS,CAAC,CAAC;kBACzD,MAAM;UACd,OAAO,GAAG,QAAQ,GAAG,MAAM;oBACjB,OAAO;gBACX,OAAO;kBACL,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS;wCA2EN,CAAA"}

package/dist/components/progress.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/cn";
+const progressVariants = cva("relative w-full overflow-hidden rounded-full", {
+    variants: {
+        variant: {
+            default: "bg-neutral-200 dark:bg-neutral-800",
+            glass: "border border-white/25 [border-top-color:var(--glass-refraction-top)] bg-[var(--glass-2-surface)] backdrop-blur-md backdrop-saturate-[180%] shadow-[0_0_0_1px_rgb(255_255_255_/_0.06)_inset] dark:border-white/[0.14]",
+            liquid: "border border-white/25 [border-top-color:var(--glass-refraction-top)] bg-[radial-gradient(circle_at_16%_12%,rgb(255_255_255_/_0.8),transparent_44%),linear-gradient(168deg,rgb(255_255_255_/_0.6),rgb(236_236_236_/_0.34))] dark:border-white/[0.14] dark:[border-top-color:rgb(255_255_255_/_0.3)] dark:bg-[linear-gradient(168deg,rgb(255_255_255_/_0.12),rgb(255_255_255_/_0.05))]",
+            matte: "border border-black/10 bg-[linear-gradient(180deg,rgb(250_250_251),rgb(236_236_238))] dark:border-white/[0.14] dark:bg-[linear-gradient(180deg,rgb(50_55_64_/_0.9),rgb(35_39_47_/_0.9))]"
+        },
+        size: {
+            sm: "h-2",
+            md: "h-3",
+            lg: "h-4"
+        }
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "md"
+    }
+});
+const indicatorVariants = cva("h-full rounded-full transition-[width] duration-normal ease-standard motion-reduce:transition-none", {
+    variants: {
+        variant: {
+            default: "bg-neutral-900 dark:bg-neutral-100",
+            glass: "bg-neutral-900/85 shadow-[0_0_10px_rgb(15_23_42_/_0.2)] dark:bg-white/85 dark:shadow-[0_0_10px_rgb(255_255_255_/_0.15)]",
+            liquid: "bg-[linear-gradient(90deg,rgb(15_23_42_/_0.92),rgb(30_41_59_/_0.9))] shadow-[0_0_14px_rgb(15_23_42_/_0.26)] dark:bg-[linear-gradient(90deg,rgb(248_250_252_/_0.92),rgb(226_232_240_/_0.82))] dark:shadow-[0_0_16px_rgb(226_232_240_/_0.24)]",
+            matte: "bg-neutral-900 dark:bg-neutral-100"
+        }
+    },
+    defaultVariants: {
+        variant: "default"
+    }
+});
+const indeterminateIndicatorVariants = cva("w-1/2 motion-safe:animate-pulse motion-reduce:animate-none", {
+    variants: {
+        variant: {
+            default: "opacity-85",
+            glass: "opacity-90",
+            liquid: "opacity-90",
+            matte: "opacity-90"
+        }
+    },
+    defaultVariants: {
+        variant: "default"
+    }
+});
+const progressCircleVariants = cva("relative inline-flex shrink-0 items-center justify-center", {
+    variants: {
+        size: {
+            sm: "h-12 w-12 text-[11px]",
+            md: "h-16 w-16 text-xs",
+            lg: "h-24 w-24 text-sm"
+        }
+    },
+    defaultVariants: {
+        size: "md"
+    }
+});
+const progressCircleTrackVariants = cva("fill-none", {
+    variants: {
+        variant: {
+            default: "stroke-neutral-300 dark:stroke-neutral-700",
+            glass: "stroke-neutral-300/70 dark:stroke-white/[0.22]",
+            liquid: "stroke-neutral-300/85 dark:stroke-white/[0.2]",
+            matte: "stroke-neutral-300 dark:stroke-white/[0.16]"
+        }
+    },
+    defaultVariants: {
+        variant: "default"
+    }
+});
+const progressCircleIndicatorVariants = cva("fill-none transition-[stroke-dashoffset,stroke] duration-normal ease-standard motion-reduce:transition-none", {
+    variants: {
+        variant: {
+            default: "stroke-neutral-900 dark:stroke-neutral-100",
+            glass: "stroke-neutral-900/85 drop-shadow-[0_0_6px_rgb(15_23_42_/_0.2)] dark:stroke-white/85 dark:drop-shadow-[0_0_6px_rgb(255_255_255_/_0.15)]",
+            liquid: "stroke-neutral-900 drop-shadow-[0_0_6px_rgb(15_23_42_/_0.25)] dark:stroke-neutral-100 dark:drop-shadow-[0_0_6px_rgb(255_255_255_/_0.18)]",
+            matte: "stroke-neutral-900 dark:stroke-neutral-100"
+        }
+    },
+    defaultVariants: {
+        variant: "default"
+    }
+});
+export const Progress = React.forwardRef(({ className, value, variant, size, indeterminate = false, ...props }, ref) => {
+    const clampedValue = Math.max(0, Math.min(100, value ?? 0));
+    return (_jsx(ProgressPrimitive.Root, { ref: ref, className: cn(progressVariants({ variant, size }), className), value: indeterminate ? undefined : clampedValue, ...props, children: _jsx(ProgressPrimitive.Indicator, { className: cn(indicatorVariants({ variant }), indeterminate && indeterminateIndicatorVariants({ variant })), style: indeterminate ? undefined : { width: `${clampedValue}%` } }) }));
+});
+Progress.displayName = "Progress";
+export const ProgressCircle = React.forwardRef(({ className, value, variant = "default", size, strokeWidth = 4, cap = "round", indeterminate = false, showValue = true, formatValue, ...props }, ref) => {
+    const clampedValue = Math.max(0, Math.min(100, value ?? 0));
+    const normalizedStrokeWidth = Math.max(2, Math.min(10, strokeWidth));
+    const viewBoxSize = 44;
+    const center = viewBoxSize / 2;
+    const radius = center - normalizedStrokeWidth / 2;
+    const circumference = 2 * Math.PI * radius;
+    const dashOffset = indeterminate
+        ? circumference * 0.25
+        : circumference - (clampedValue / 100) * circumference;
+    const dashArray = indeterminate ? circumference * 0.7 : circumference;
+    return (_jsxs("div", { ref: ref, role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": indeterminate ? undefined : clampedValue, className: cn(progressCircleVariants({ size }), className), ...props, children: [_jsxs("svg", { viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, className: cn("size-full -rotate-90", indeterminate && "motion-safe:animate-spin"), "aria-hidden": "true", children: [_jsx("circle", { cx: center, cy: center, r: radius, strokeWidth: normalizedStrokeWidth, className: cn(progressCircleTrackVariants({ variant })) }), _jsx("circle", { cx: center, cy: center, r: radius, strokeWidth: normalizedStrokeWidth, strokeLinecap: cap, strokeDasharray: dashArray, strokeDashoffset: dashOffset, className: cn(progressCircleIndicatorVariants({ variant })) })] }), showValue && !indeterminate ? (_jsx("span", { className: "pointer-events-none absolute inset-0 flex items-center justify-center font-medium text-[var(--color-foreground)]", children: formatValue ? formatValue(clampedValue) : `${Math.round(clampedValue)}%` })) : null] }));
+});
+ProgressCircle.displayName = "ProgressCircle";
+export const CircularProgress = ProgressCircle;

package/dist/components/pulsating-button.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const pulsatingButtonVariants: (props?: ({
+    variant?: "default" | "glass" | "accent" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface PulsatingButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof pulsatingButtonVariants> {
+    pulseColor?: string;
+    pulseDuration?: number;
+}
+export declare const PulsatingButton: React.ForwardRefExoticComponent<PulsatingButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=pulsating-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pulsating-button.d.ts","sourceRoot":"","sources":["../../src/components/pulsating-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,QAAA,MAAM,uBAAuB;;;8EA4B5B,CAAA;AAED,MAAM,WAAW,oBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,YAAY,CAAC,OAAO,uBAAuB,CAAC;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,eAAO,MAAM,eAAe,gGA8C3B,CAAA"}

package/dist/components/pulsating-button.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/cn";
+const pulsatingButtonVariants = cva([
+    "relative inline-flex items-center justify-center rounded-xl",
+    "px-6 py-2.5 text-sm font-medium transition-all",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-accent)] focus-visible:ring-offset-2",
+    "disabled:pointer-events-none disabled:opacity-50"
+], {
+    variants: {
+        variant: {
+            default: "bg-neutral-900 text-white hover:bg-neutral-800 dark:bg-white dark:text-neutral-900 dark:hover:bg-neutral-100",
+            accent: "bg-[var(--color-accent)] text-[var(--color-accent-foreground)] hover:opacity-90",
+            glass: "border border-white/20 [border-top-color:var(--glass-refraction-top)] bg-white/10 text-[var(--color-foreground)] backdrop-blur-md hover:bg-white/20 dark:border-white/10 dark:bg-white/[0.06]"
+        },
+        size: {
+            sm: "h-8 px-4 text-xs",
+            md: "h-10 px-6 text-sm",
+            lg: "h-12 px-8 text-base"
+        }
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "md"
+    }
+});
+export const PulsatingButton = React.forwardRef(({ className, children, variant, size, pulseColor, pulseDuration = 2, style, ...props }, ref) => {
+    const defaultPulseColor = variant === "accent"
+        ? "var(--color-accent)"
+        : variant === "glass"
+            ? "rgba(255,255,255,0.3)"
+            : "rgba(0,0,0,0.3)";
+    return (_jsxs("button", { ref: ref, className: cn(pulsatingButtonVariants({ variant, size }), className), style: style, ...props, children: [_jsx("span", { className: cn("pointer-events-none absolute inset-0 rounded-[inherit]", "motion-safe:animate-[pulsate-ring_var(--pulsate-duration,2s)_ease-out_infinite]", "motion-reduce:hidden"), style: {
+                    "--pulsate-duration": `${pulseDuration}s`,
+                    boxShadow: `0 0 0 0 ${pulseColor ?? defaultPulseColor}`,
+                    border: `2px solid ${pulseColor ?? defaultPulseColor}`,
+                } }), _jsx("span", { className: "relative z-10", children: children })] }));
+});
+PulsatingButton.displayName = "PulsatingButton";

package/dist/components/radio-group.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+export interface RadioGroupProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> {
+    /** Controlled selected value. */
+    value?: string;
+    /** Initial selected value for uncontrolled usage. */
+    defaultValue?: string;
+    /** Called when the selected value changes. */
+    onValueChange?: (value: string) => void;
+    /** Layout direction for radio items. */
+    orientation?: "horizontal" | "vertical";
+    /** Disables all radio items in the group. */
+    disabled?: boolean;
+}
+export declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+export interface RadioGroupItemProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> {
+    /** Surface treatment for the radio item shell. */
+    variant?: "default" | "glass" | "liquid" | "matte" | "outline";
+    /** Size of the radio control. */
+    size?: "sm" | "md" | "lg";
+    /** Value submitted by this radio item when selected. */
+    value: string;
+    /** Disables this radio item. */
+    disabled?: boolean;
+}
+export declare const RadioGroupItem: React.ForwardRefExoticComponent<RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=radio-group.d.ts.map

package/dist/components/radio-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../src/components/radio-group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAA;AAKlE,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC;IACtG,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,qDAAqD;IACrD,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,8CAA8C;IAC9C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,wCAAwC;IACxC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,eAAO,MAAM,UAAU,wFAKrB,CAAA;AA8DF,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC;IAC1G,kDAAkD;IAClD,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAA;IAC9D,iCAAiC;IACjC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAA;IACb,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,eAAO,MAAM,cAAc,+FAazB,CAAA"}

package/dist/components/radio-group.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/cn";
+export const RadioGroup = React.forwardRef(({ className, ...props }, ref) => {
+    return _jsx(RadioGroupPrimitive.Root, { ref: ref, className: cn("grid gap-2", className), ...props });
+});
+RadioGroup.displayName = "RadioGroup";
+const radioItemVariants = cva("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 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 dark:border-white/[0.14] dark:bg-white/[0.06] dark:focus-visible:ring-white/15",
+            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 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",
+            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 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",
+            outline: "border border-[var(--color-border)] bg-transparent focus-visible:ring-[var(--color-accent)]/25 dark:border-white/20"
+        },
+        size: {
+            sm: "h-4 w-4",
+            md: "h-5 w-5",
+            lg: "h-6 w-6"
+        }
+    },
+    compoundVariants: [
+        { size: "sm", class: "rounded-full" },
+        { size: "md", class: "rounded-full" },
+        { size: "lg", class: "rounded-full" }
+    ],
+    defaultVariants: {
+        variant: "default",
+        size: "md"
+    }
+});
+const radioIndicatorVariants = cva("relative flex h-full w-full items-center justify-center after:block after:rounded-full", {
+    variants: {
+        variant: {
+            default: "after:bg-[var(--color-accent)]",
+            glass: "after:bg-neutral-900 dark:after:bg-white",
+            liquid: "after:bg-neutral-900 dark:after:bg-white",
+            matte: "after:bg-neutral-900 dark:after:bg-white",
+            outline: "after:bg-[var(--color-accent)]"
+        },
+        size: {
+            sm: "after:h-2 after:w-2",
+            md: "after:h-2.5 after:w-2.5",
+            lg: "after:h-3 after:w-3"
+        }
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "md"
+    }
+});
+export const RadioGroupItem = React.forwardRef(({ className, variant = "default", size = "md", ...props }, ref) => {
+    return (_jsx(RadioGroupPrimitive.Item, { ref: ref, className: cn(radioItemVariants({ variant, size }), className), ...props, children: _jsx(RadioGroupPrimitive.Indicator, { className: cn(radioIndicatorVariants({ variant, size })) }) }));
+});
+RadioGroupItem.displayName = "RadioGroupItem";

package/dist/components/retro-grid.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+export interface RetroGridProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Perspective angle in degrees */
+    angle?: number;
+    /** Grid line color */
+    lineColor?: string;
+    /** Grid line opacity (0-1) */
+    lineOpacity?: number;
+    /** Grid cell size in px */
+    cellSize?: number;
+}
+export declare const RetroGrid: React.ForwardRefExoticComponent<RetroGridProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=retro-grid.d.ts.map

package/dist/components/retro-grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"retro-grid.d.ts","sourceRoot":"","sources":["../../src/components/retro-grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,sBAAsB;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,8BAA8B;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,eAAO,MAAM,SAAS,uFA0CrB,CAAA"}

package/dist/components/retro-grid.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn";
+export const RetroGrid = React.forwardRef(({ className, angle = 65, lineColor, lineOpacity = 0.3, cellSize = 60, style, ...props }, ref) => {
+    const gridColor = lineColor ?? "currentColor";
+    return (_jsx("div", { ref: ref, "aria-hidden": true, className: cn("pointer-events-none absolute inset-0 overflow-hidden [perspective:200px]", className), style: {
+            "--retro-grid-cell": `${cellSize}px`,
+            "--retro-grid-duration": "10s",
+            ...style,
+        }, ...props, children: _jsx("div", { className: "absolute inset-0 animate-retro-grid-scroll motion-reduce:[animation:none]", style: {
+                transform: `rotateX(${angle}deg)`,
+                backgroundImage: `linear-gradient(to right, ${gridColor} 1px, transparent 0), linear-gradient(to bottom, ${gridColor} 1px, transparent 0)`,
+                backgroundSize: `${cellSize}px ${cellSize}px`,
+                opacity: lineOpacity,
+            } }) }));
+});
+RetroGrid.displayName = "RetroGrid";

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

@@ -0,0 +1,17 @@
+import * as React from "react";
+export interface RevealTextProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Text to reveal */
+    text: string;
+    /** Animation duration in seconds */
+    duration?: number;
+    /** Delay before animation starts, in ms */
+    delay?: number;
+    /** Reveal direction */
+    direction?: "left" | "right" | "top" | "bottom";
+    /** Trigger on intersection */
+    triggerOnView?: boolean;
+    /** Intersection threshold */
+    threshold?: number;
+}
+export declare const RevealText: React.ForwardRefExoticComponent<RevealTextProps & React.RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=reveal-text.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"reveal-text.d.ts","sourceRoot":"","sources":["../../src/components/reveal-text.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IAC5E,qBAAqB;IACrB,IAAI,EAAE,MAAM,CAAA;IACZ,oCAAoC;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAA;IAC/C,8BAA8B;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,UAAU,yFAuFtB,CAAA"}

package/dist/components/reveal-text.js

@@ -0,0 +1,61 @@
+"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 RevealText = React.forwardRef(({ className, text, duration = 0.8, delay = 0, direction = "left", triggerOnView = true, threshold = 0.5, style, ...props }, ref) => {
+    const prefersReducedMotion = usePrefersReducedMotion();
+    const localRef = React.useRef(null);
+    const [isRevealed, setIsRevealed] = React.useState(false);
+    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) {
+            setIsRevealed(true);
+            return;
+        }
+        if (!triggerOnView) {
+            setIsRevealed(false);
+            const frame = window.requestAnimationFrame(() => setIsRevealed(true));
+            return () => window.cancelAnimationFrame(frame);
+        }
+        const el = localRef.current;
+        if (!el)
+            return;
+        if (typeof IntersectionObserver === "undefined") {
+            setIsRevealed(true);
+            return;
+        }
+        setIsRevealed(false);
+        const observer = new IntersectionObserver(([entry]) => {
+            if (entry.isIntersecting) {
+                setIsRevealed(true);
+                observer.disconnect();
+            }
+        }, { threshold });
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [triggerOnView, threshold, prefersReducedMotion]);
+    const clipPaths = {
+        left: { hidden: "inset(0 100% 0 0)", visible: "inset(0 0 0 0)" },
+        right: { hidden: "inset(0 0 0 100%)", visible: "inset(0 0 0 0)" },
+        top: { hidden: "inset(0 0 100% 0)", visible: "inset(0 0 0 0)" },
+        bottom: { hidden: "inset(100% 0 0 0)", visible: "inset(0 0 0 0)" },
+    };
+    const clip = clipPaths[direction];
+    return (_jsx("span", { ref: setRefs, className: cn("inline-block", className), style: {
+            clipPath: isRevealed ? clip.visible : clip.hidden,
+            transition: prefersReducedMotion
+                ? "none"
+                : `clip-path ${duration}s ease-out ${delay}ms`,
+            ...style,
+        }, ...props, children: text }));
+});
+RevealText.displayName = "RevealText";

package/dist/components/ripple-button.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+export interface RippleButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Ripple color */
+    rippleColor?: string;
+    /** Button variant */
+    variant?: "default" | "glass" | "frosted" | "outline";
+    /** Button size */
+    size?: "sm" | "md" | "lg";
+}
+export declare const RippleButton: React.ForwardRefExoticComponent<RippleButtonProps & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=ripple-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ripple-button.d.ts","sourceRoot":"","sources":["../../src/components/ripple-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACtF,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,qBAAqB;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAA;IACrD,kBAAkB;IAClB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CAC1B;AAQD,eAAO,MAAM,YAAY,6FAqFxB,CAAA"}

package/dist/components/ripple-button.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn";
+import { usePrefersReducedMotion } from "../lib/use-prefers-reduced-motion";
+export const RippleButton = React.forwardRef(({ className, children, rippleColor: rippleColorProp, variant = "default", size = "md", onClick, ...props }, ref) => {
+    const prefersReducedMotion = usePrefersReducedMotion();
+    const [ripples, setRipples] = React.useState([]);
+    const idRef = React.useRef(0);
+    const handleClick = React.useCallback((event) => {
+        if (!prefersReducedMotion) {
+            const rect = event.currentTarget.getBoundingClientRect();
+            const x = event.clientX - rect.left;
+            const y = event.clientY - rect.top;
+            const id = ++idRef.current;
+            setRipples((prev) => [...prev, { id, x, y }]);
+            setTimeout(() => {
+                setRipples((prev) => prev.filter((r) => r.id !== id));
+            }, 600);
+        }
+        onClick?.(event);
+    }, [onClick, prefersReducedMotion]);
+    const defaultRippleColors = {
+        default: "rgba(255, 255, 255, 0.4)",
+        glass: "rgba(0, 0, 0, 0.12)",
+        frosted: "rgba(0, 0, 0, 0.1)",
+        outline: "rgba(0, 0, 0, 0.1)",
+    };
+    const rippleColor = rippleColorProp ?? defaultRippleColors[variant] ?? "rgba(255, 255, 255, 0.4)";
+    const variantClasses = {
+        default: "border border-black/10 bg-neutral-900 text-white shadow-[0_12px_26px_-16px_rgb(2_6_23_/_0.65)] hover:bg-neutral-800 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: "border border-white/20 [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)] hover:bg-white/60 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:hover:bg-[linear-gradient(155deg,rgb(255_255_255_/_0.14),rgb(255_255_255_/_0.06))]",
+        frosted: "border border-white/30 [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)] hover:bg-white/80 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:hover:bg-[linear-gradient(155deg,rgb(255_255_255_/_0.2),rgb(255_255_255_/_0.08))]",
+        outline: "border border-[var(--color-border)] bg-transparent text-[var(--color-foreground)] shadow-sm hover:bg-[var(--glass-1-surface)] dark:border-white/15 dark:hover:bg-white/[0.06]",
+    };
+    const sizeClasses = {
+        sm: "h-8 px-3 text-xs",
+        md: "h-10 px-4 text-sm",
+        lg: "h-12 px-6 text-base",
+    };
+    return (_jsxs("button", { ref: ref, type: "button", className: cn("relative inline-flex items-center justify-center overflow-hidden rounded-lg font-medium transition-colors duration-200", variantClasses[variant], sizeClasses[size], className), onClick: handleClick, ...props, children: [_jsx("span", { className: "relative z-[1]", children: children }), ripples.map((ripple) => (_jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute h-full w-full animate-ripple-press motion-reduce:hidden", style: {
+                    left: ripple.x,
+                    top: ripple.y,
+                    background: `radial-gradient(circle, ${rippleColor} 10%, transparent 70%)`,
+                } }, ripple.id)))] }));
+});
+RippleButton.displayName = "RippleButton";

package/dist/components/ripple.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const rippleVariants: (props?: ({
+    variant?: "default" | "glass" | "accent" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface RippleProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof rippleVariants> {
+    count?: number;
+    duration?: number;
+    delay?: number;
+}
+export declare const Ripple: React.ForwardRefExoticComponent<RippleProps & React.RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=ripple.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ripple.d.ts","sourceRoot":"","sources":["../../src/components/ripple.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,QAAA,MAAM,cAAc;;8EAYlB,CAAA;AAEF,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,eAAO,MAAM,MAAM,oFAkClB,CAAA"}

package/dist/components/ripple.js

@@ -0,0 +1,24 @@
+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 rippleVariants = cva("absolute rounded-full", {
+    variants: {
+        variant: {
+            default: "border border-neutral-300/50 dark:border-neutral-600/50",
+            glass: "border border-white/20 [border-top-color:var(--glass-refraction-top)] dark:border-white/10",
+            accent: "border border-[var(--color-accent)]/30 dark:border-[var(--color-accent)]/20"
+        }
+    },
+    defaultVariants: {
+        variant: "default"
+    }
+});
+export const Ripple = React.forwardRef(({ className, variant, count = 3, duration = 2, delay = 0.4, style, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("pointer-events-none absolute inset-0 flex items-center justify-center overflow-hidden", className), ...props, children: Array.from({ length: count }).map((_, i) => (_jsx("div", { className: cn(rippleVariants({ variant }), "motion-safe:animate-[ripple-expand_var(--ripple-duration,2s)_ease-out_infinite]", "motion-reduce:hidden"), style: {
+            "--ripple-duration": `${duration}s`,
+            width: `${60 + i * 40}%`,
+            height: `${60 + i * 40}%`,
+            animationDelay: `${i * delay}s`,
+            ...style,
+        } }, i))) })));
+Ripple.displayName = "Ripple";

package/dist/components/select.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+export type SelectOption = {
+    label: string;
+    value: string;
+    disabled?: boolean;
+};
+declare const selectVariants: (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;
+export type SelectProps = Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "size"> & VariantProps<typeof selectVariants> & {
+    options: SelectOption[];
+    placeholder?: string;
+};
+export declare const Select: React.ForwardRefExoticComponent<Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "size"> & 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> & {
+    options: SelectOption[];
+    placeholder?: string;
+} & React.RefAttributes<HTMLSelectElement>>;
+export {};
+//# sourceMappingURL=select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/components/select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,QAAA,MAAM,cAAc;;;8EA+BnB,CAAA;AAED,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,GACnF,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,EAAE,YAAY,EAAE,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAEH,eAAO,MAAM,MAAM;;;;aAJN,YAAY,EAAE;kBACT,MAAM;2CA2BvB,CAAA"}

package/dist/components/select.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/cn";
+const selectVariants = cva("w-full border font-medium text-[var(--color-foreground)] transition-[background-color,border-color,box-shadow,color] duration-normal ease-standard focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-60 motion-reduce:transition-none dark:[color-scheme:dark]", {
+    variants: {
+        variant: {
+            default: "rounded-xl border-[var(--color-border)] bg-[var(--color-surface)] shadow-sm focus-visible:border-[var(--color-accent)]/60 focus-visible:ring-2 focus-visible:ring-[var(--color-accent)]/28 focus-visible:ring-offset-1 hover:border-[var(--color-border)]/80 dark:border-white/10 dark:bg-white/[0.04] dark:focus-visible:ring-[var(--color-accent)]/20",
+            glass: "rounded-xl border-white/24 [border-top-color:var(--glass-refraction-top)] bg-[radial-gradient(circle_at_18%_14%,rgb(255_255_255_/_0.86),transparent_44%),linear-gradient(158deg,rgb(255_255_255_/_0.7),rgb(243_247_250_/_0.46))] backdrop-blur-md backdrop-saturate-[180%] shadow-[0_0_0_1px_rgb(255_255_255_/_0.2)_inset,0_8px_18px_-14px_rgb(15_23_42_/_0.24)] focus-visible:border-white/34 focus-visible:[border-top-color:rgb(255_255_255_/_0.82)] focus-visible:ring-2 focus-visible:ring-[var(--color-accent)]/22 focus-visible:ring-offset-0 hover:border-white/32 dark:border-white/[0.1] dark:bg-white/[0.05] dark:focus-visible:border-white/20 dark:focus-visible:ring-white/15",
+            frosted: "rounded-xl border-white/30 [border-top-color:var(--glass-refraction-top)] bg-[radial-gradient(circle_at_18%_14%,rgb(255_255_255_/_0.92),transparent_44%),linear-gradient(158deg,rgb(255_255_255_/_0.85),rgb(243_247_250_/_0.65))] backdrop-blur-[40px] backdrop-saturate-[200%] shadow-[0_0_0_1px_rgb(255_255_255_/_0.25)_inset,0_0_16px_rgb(255_255_255_/_0.1)_inset,0_8px_18px_-14px_rgb(15_23_42_/_0.28)] focus-visible:border-white/40 focus-visible:[border-top-color:rgb(255_255_255_/_0.88)] focus-visible:ring-2 focus-visible:ring-[var(--color-accent)]/24 focus-visible:ring-offset-0 hover:border-white/36 dark:border-white/[0.14] dark:bg-white/[0.08] dark:focus-visible:border-white/24 dark:focus-visible:ring-white/18",
+            liquid: "rounded-xl border-white/24 [border-top-color:var(--glass-refraction-top)] bg-[radial-gradient(circle_at_18%_12%,rgb(255_255_255_/_0.92),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))] backdrop-blur-xl backdrop-saturate-[180%] shadow-[0_0_0_1px_rgb(255_255_255_/_0.24)_inset,0_10px_20px_-14px_rgb(15_23_42_/_0.26)] focus-visible:border-white/36 focus-visible:[border-top-color:rgb(255_255_255_/_0.88)] focus-visible:ring-2 focus-visible:ring-[var(--color-accent)]/24 focus-visible:ring-offset-0 hover:border-white/34 dark:border-white/[0.12] dark:bg-[linear-gradient(145deg,rgb(255_255_255_/_0.13),rgb(255_255_255_/_0.05))] dark:focus-visible:border-white/[0.24] dark:focus-visible:ring-white/16",
+            matte: "rounded-xl 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:border-black/25 focus-visible:ring-2 focus-visible:ring-black/12 focus-visible:ring-offset-0 hover:border-black/16 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:border-white/[0.28] dark:focus-visible:ring-white/14",
+            outline: "rounded-xl border-[var(--color-border)] bg-transparent shadow-sm focus-visible:border-[var(--color-accent)]/70 focus-visible:ring-2 focus-visible:ring-[var(--color-accent)]/25 focus-visible:ring-offset-1 hover:border-[var(--color-foreground)]/20 dark:border-white/15 dark:focus-visible:border-[var(--color-accent)]/50",
+            ghost: "rounded-xl border-transparent bg-transparent focus-visible:border-white/10 focus-visible:bg-[var(--glass-1-surface)] focus-visible:ring-2 focus-visible:ring-[var(--color-accent)]/20 focus-visible:ring-offset-0 hover:border-white/10 hover:bg-[var(--glass-1-surface)] dark:hover:bg-white/[0.06] dark:focus-visible:bg-white/[0.06]"
+        },
+        size: {
+            sm: "h-8 px-3 text-xs",
+            md: "h-10 px-3.5 text-sm",
+            lg: "h-12 px-4 text-base"
+        }
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "md"
+    }
+});
+export const Select = React.forwardRef(({ className, options, placeholder, variant, size, ...props }, ref) => {
+    return (_jsxs("select", { ref: ref, className: cn(selectVariants({ variant, size }), className), ...props, children: [placeholder ? (_jsx("option", { value: "", disabled: true, children: placeholder })) : null, options.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value)))] }));
+});
+Select.displayName = "Select";