shadcn-glass-ui 2.2.1 → 2.2.4

package/dist/components/glass/specialized/segmented-control-glass.d.ts

@@ -0,0 +1,11 @@
+export interface SegmentOption {
+    readonly value: string;
+    readonly label: string;
+}
+export interface SegmentedControlGlassProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    readonly options: readonly SegmentOption[];
+    readonly value: string;
+    readonly onChange?: (value: string) => void;
+}
+export declare const SegmentedControlGlass: import('react').ForwardRefExoticComponent<SegmentedControlGlassProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=segmented-control-glass.d.ts.map

package/dist/components/glass/specialized/segmented-control-glass.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-control-glass.d.ts","sourceRoot":"","sources":["../../../../src/components/glass/specialized/segmented-control-glass.tsx"],"names":[],"mappings":"AAMA,OAAO,mBAAmB,CAAC;AAE3B,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,0BAA2B,SAAQ,IAAI,CACtD,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,UAAU,CACX;IACC,QAAQ,CAAC,OAAO,EAAE,SAAS,aAAa,EAAE,CAAC;IAC3C,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AAED,eAAO,MAAM,qBAAqB,uHA4CjC,CAAC"}

package/dist/components/glass/specialized/sparkline-glass.d.ts

@@ -0,0 +1,34 @@
+import { VariantProps } from 'class-variance-authority';
+import { sparklineContainerVariants } from '../../../lib/variants/sparkline-glass-variants';
+import { ChartConfig } from '../../ui/chart';
+export type SparklineConfig = ChartConfig;
+export interface SparklineGlassProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style'>, VariantProps<typeof sparklineContainerVariants> {
+    /** Array of numeric values to display */
+    readonly data: readonly number[];
+    /** Labels for each bar (shown in tooltip) */
+    readonly labels?: readonly string[];
+    /** Show labels below bars */
+    readonly showLabels?: boolean;
+    /** Highlight the maximum value with different color */
+    readonly highlightMax?: boolean;
+    /** Color for regular bars (CSS variable or color) */
+    readonly barColor?: string;
+    /** Color for maximum bar */
+    readonly maxBarColor?: string;
+    /** Tooltips for each bar */
+    readonly tooltips?: readonly string[];
+    /** Enable animation */
+    readonly animated?: boolean;
+    /** Minimum bar height as percentage */
+    readonly minBarHeightPercent?: number;
+    /** Chart configuration (shadcn/ui pattern) */
+    readonly config?: SparklineConfig;
+    /** Value formatter for tooltip */
+    readonly valueFormatter?: (value: number, index: number) => string;
+    /** Callback when bar is clicked */
+    readonly onBarClick?: (value: number, index: number) => void;
+    /** Show tooltip on hover */
+    readonly showTooltip?: boolean;
+}
+export declare const SparklineGlass: import('react').ForwardRefExoticComponent<SparklineGlassProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=sparkline-glass.d.ts.map

package/dist/components/glass/specialized/sparkline-glass.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sparkline-glass.d.ts","sourceRoot":"","sources":["../../../../src/components/glass/specialized/sparkline-glass.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EAAE,0BAA0B,EAAE,MAAM,yCAAyC,CAAC;AACrF,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,mBAAmB,CAAC;AAM3B,MAAM,MAAM,eAAe,GAAG,WAAW,CAAC;AAuB1C,MAAM,WAAW,mBACf,SACE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EACnD,YAAY,CAAC,OAAO,0BAA0B,CAAC;IACjD,yCAAyC;IACzC,QAAQ,CAAC,IAAI,EAAE,SAAS,MAAM,EAAE,CAAC;IACjC,6CAA6C;IAC7C,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IACpC,6BAA6B;IAC7B,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAC9B,uDAAuD;IACvD,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC;IAChC,qDAAqD;IACrD,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,4BAA4B;IAC5B,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,4BAA4B;IAC5B,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IACtC,uBAAuB;IACvB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,uCAAuC;IACvC,QAAQ,CAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IACtC,8CAA8C;IAC9C,QAAQ,CAAC,MAAM,CAAC,EAAE,eAAe,CAAC;IAClC,kCAAkC;IAClC,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACnE,mCAAmC;IACnC,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D,4BAA4B;IAC5B,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;CAChC;AAiDD,eAAO,MAAM,cAAc,gHA6I1B,CAAC"}

package/dist/components/glass/specialized/status-indicator-glass.d.ts

@@ -0,0 +1,8 @@
+export type StatusType = "green" | "yellow" | "red";
+export type StatusSize = "normal" | "large";
+export interface StatusIndicatorGlassProps extends React.HTMLAttributes<HTMLDivElement> {
+    readonly type?: StatusType;
+    readonly size?: StatusSize;
+}
+export declare const StatusIndicatorGlass: import('react').ForwardRefExoticComponent<StatusIndicatorGlassProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=status-indicator-glass.d.ts.map

package/dist/components/glass/specialized/status-indicator-glass.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-indicator-glass.d.ts","sourceRoot":"","sources":["../../../../src/components/glass/specialized/status-indicator-glass.tsx"],"names":[],"mappings":"AAOA,OAAO,mBAAmB,CAAC;AAE3B,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AACpD,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE5C,MAAM,WAAW,yBAA0B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACrF,QAAQ,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC;IAC3B,QAAQ,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC;CAC5B;AAoBD,eAAO,MAAM,oBAAoB,sHA8BhC,CAAC"}

package/dist/components/glass/ui/alert-glass.d.ts

@@ -0,0 +1,13 @@
+import { VariantProps } from 'class-variance-authority';
+import { alertVariants } from '../../../lib/variants/alert-glass-variants';
+export interface AlertGlassProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style'>, VariantProps<typeof alertVariants> {
+    dismissible?: boolean;
+    onDismiss?: () => void;
+}
+export type AlertGlassTitleProps = React.HTMLAttributes<HTMLDivElement>;
+declare const AlertGlassTitle: import('react').ForwardRefExoticComponent<AlertGlassTitleProps & import('react').RefAttributes<HTMLDivElement>>;
+export type AlertGlassDescriptionProps = React.HTMLAttributes<HTMLDivElement>;
+declare const AlertGlassDescription: import('react').ForwardRefExoticComponent<AlertGlassDescriptionProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const AlertGlass: import('react').ForwardRefExoticComponent<AlertGlassProps & import('react').RefAttributes<HTMLDivElement>>;
+export { AlertGlassTitle, AlertGlassDescription };
+//# sourceMappingURL=alert-glass.d.ts.map

package/dist/components/glass/ui/alert-glass.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-glass.d.ts","sourceRoot":"","sources":["../../../../src/components/glass/ui/alert-glass.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAKH,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAG7D,OAAO,EAAE,aAAa,EAAE,MAAM,qCAAqC,CAAC;AAEpE,OAAO,mBAAmB,CAAC;AAyE3B,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EAAE,YAAY,CAAC,OAAO,aAAa,CAAC;IAC/F,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AA2CD,MAAM,MAAM,oBAAoB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAExE,QAAA,MAAM,eAAe,iHAYpB,CAAC;AAQF,MAAM,MAAM,0BAA0B,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAE9E,QAAA,MAAM,qBAAqB,uHAY1B,CAAC;AASF,eAAO,MAAM,UAAU,4GAAiB,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,qBAAqB,EAAE,CAAC"}

package/dist/components/glass/ui/avatar-glass.d.ts

@@ -0,0 +1,58 @@
+/**
+ * AvatarGlass Component
+ *
+ * Glass-themed avatar with:
+ * - Theme-aware styling (glass/light/aurora)
+ * - Glow effect on hover
+ * - Optional glow-pulse animation
+ * - Status indicator with glow
+ * - Size variants
+ * - Built on Radix UI primitives
+ *
+ * @example Compound API (recommended)
+ * ```tsx
+ * <AvatarGlass size="default">
+ *   <AvatarGlassImage src="/avatar.jpg" alt="User" />
+ *   <AvatarGlassFallback>JD</AvatarGlassFallback>
+ * </AvatarGlass>
+ * ```
+ *
+ * @example With status indicator
+ * ```tsx
+ * <AvatarGlass size="lg" status="online">
+ *   <AvatarGlassImage src="/avatar.jpg" alt="User" />
+ *   <AvatarGlassFallback>JD</AvatarGlassFallback>
+ * </AvatarGlass>
+ * ```
+ *
+ * @example With glow animation
+ * ```tsx
+ * <AvatarGlass size="xl" glowing>
+ *   <AvatarGlassImage src="/avatar.jpg" alt="User" />
+ *   <AvatarGlassFallback>JD</AvatarGlassFallback>
+ * </AvatarGlass>
+ * ```
+ */
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+export type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';
+export type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
+interface AvatarGlassRootProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> {
+    size?: AvatarSize;
+    status?: AvatarStatus;
+    glowing?: boolean;
+}
+declare const AvatarGlassImage: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
+declare const AvatarGlassFallback: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+interface AvatarGlassSimpleProps {
+    name: string;
+    size?: AvatarSize;
+    status?: AvatarStatus;
+    glowing?: boolean;
+    className?: string;
+}
+declare const AvatarGlassSimple: React.FC<AvatarGlassSimpleProps>;
+export declare const AvatarGlass: React.ForwardRefExoticComponent<AvatarGlassRootProps & React.RefAttributes<HTMLSpanElement>>;
+export { AvatarGlassImage, AvatarGlassFallback };
+export { AvatarGlassSimple };
+//# sourceMappingURL=avatar-glass.d.ts.map

package/dist/components/glass/ui/avatar-glass.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-glass.d.ts","sourceRoot":"","sources":["../../../../src/components/glass/ui/avatar-glass.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAIH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAI1D,OAAO,mBAAmB,CAAC;AAM3B,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAClE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAkCnD,UAAU,oBAAqB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC;IAChG,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA2DD,QAAA,MAAM,gBAAgB,gKAWpB,CAAC;AAUH,QAAA,MAAM,mBAAmB,iKAcvB,CAAC;AAsBH,UAAU,sBAAsB;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAYvD,CAAC;AAOF,eAAO,MAAM,WAAW,8FAAkB,CAAC;AAC3C,OAAO,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,CAAC;AAGjD,OAAO,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/components/glass/ui/badge-glass.d.ts

@@ -0,0 +1,74 @@
+import { ReactNode } from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { badgeVariants, BadgeVariant } from '../../../lib/variants/badge-glass-variants';
+/**
+ * Props for the BadgeGlass component
+ *
+ * A glass-themed badge with semantic variants and optional animated status dot.
+ * Features shadcn/ui compatible variants plus extended Glass UI variants.
+ *
+ * @accessibility
+ * - **Keyboard Navigation:** Badges are non-interactive by default (display-only)
+ * - **Focus Management:** N/A - badges do not receive focus unless wrapped in interactive elements
+ * - **Screen Readers:** Semantic `<span>` element, content announced naturally
+ * - **Status Indicators:** Use `aria-label` to provide context for status badges (e.g., "Status: Active")
+ * - **Animated Dot:** Pulse animation respects `prefers-reduced-motion` settings
+ * - **Touch Targets:** N/A for display badges, ensure 44x44px if wrapping in button/link (WCAG 2.5.5)
+ * - **Color Contrast:** All variant text meets WCAG AA contrast ratio 4.5:1 against badge background
+ * - **Motion:** Dot pulse animation can be disabled for users with motion sensitivity
+ *
+ * @example
+ * ```tsx
+ * // Basic badge with variant
+ * <BadgeGlass variant="default">New</BadgeGlass>
+ *
+ * // Status badge with aria-label for screen readers
+ * <BadgeGlass variant="success" aria-label="Status: Active">
+ *   Active
+ * </BadgeGlass>
+ *
+ * // Different variants (shadcn/ui compatible)
+ * <BadgeGlass variant="default">Default</BadgeGlass>
+ * <BadgeGlass variant="secondary">Secondary</BadgeGlass>
+ * <BadgeGlass variant="destructive">Error</BadgeGlass>
+ * <BadgeGlass variant="outline">Outline</BadgeGlass>
+ *
+ * // Extended Glass UI variants
+ * <BadgeGlass variant="success">Success</BadgeGlass>
+ * <BadgeGlass variant="warning">Warning</BadgeGlass>
+ * <BadgeGlass variant="info">Info</BadgeGlass>
+ *
+ * // With animated status dot
+ * <BadgeGlass variant="success" dot aria-label="Status: Online">
+ *   Online
+ * </BadgeGlass>
+ * <BadgeGlass variant="destructive" dot aria-label="Status: Offline">
+ *   Offline
+ * </BadgeGlass>
+ *
+ * // Size variants
+ * <BadgeGlass size="sm">Small</BadgeGlass>
+ * <BadgeGlass size="default">Medium</BadgeGlass>
+ * <BadgeGlass size="lg">Large</BadgeGlass>
+ *
+ * // Inside interactive elements (ensure accessible labels)
+ * <button aria-label="Filter by active status">
+ *   Filter: <BadgeGlass variant="success">Active</BadgeGlass>
+ * </button>
+ *
+ * // Count badge with semantic meaning
+ * <div>
+ *   <span>Notifications</span>
+ *   <BadgeGlass variant="destructive" aria-label="3 unread notifications">
+ *     3
+ *   </BadgeGlass>
+ * </div>
+ * ```
+ */
+export interface BadgeGlassProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'style'>, VariantProps<typeof badgeVariants> {
+    readonly children: ReactNode;
+    readonly variant?: BadgeVariant;
+    readonly dot?: boolean;
+}
+export declare const BadgeGlass: import('react').ForwardRefExoticComponent<BadgeGlassProps & import('react').RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=badge-glass.d.ts.map

package/dist/components/glass/ui/badge-glass.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge-glass.d.ts","sourceRoot":"","sources":["../../../../src/components/glass/ui/badge-glass.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAc,KAAK,SAAS,EAAsB,MAAM,OAAO,CAAC;AACvE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EAAE,aAAa,EAAE,KAAK,YAAY,EAAE,MAAM,qCAAqC,CAAC;AACvF,OAAO,mBAAmB,CAAC;AA6D3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+DG;AACH,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC,EAAE,YAAY,CAAC,OAAO,aAAa,CAAC;IAChG,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;IAC7B,QAAQ,CAAC,OAAO,CAAC,EAAE,YAAY,CAAC;IAChC,QAAQ,CAAC,GAAG,CAAC,EAAE,OAAO,CAAC;CACxB;AAMD,eAAO,MAAM,UAAU,6GAsBtB,CAAC"}

package/dist/components/glass/ui/button-glass.d.ts

@@ -0,0 +1,110 @@
+import { VariantProps } from 'class-variance-authority';
+import { LucideIcon } from 'lucide-react';
+import { buttonGlassVariants, ButtonGlassVariant } from '../../../lib/variants/button-glass-variants';
+/**
+ * Props for the ButtonGlass component
+ *
+ * A glass-themed button with ripple effects, loading states, and icon support.
+ * Features theme-aware styling and hover animations.
+ *
+ * **shadcn/ui compatible variants:**
+ * - `default` - Primary action button with glow effects
+ * - `secondary` - Secondary action with border
+ * - `ghost` - Minimal visual presence
+ * - `destructive` - Dangerous/delete actions (red)
+ * - `outline` - Border with transparent background
+ * - `link` - Text-only button with underline on hover
+ * - `success` - Positive feedback (glass-ui extension)
+ *
+ * @accessibility
+ * - **Keyboard Navigation:** Fully keyboard accessible with native `<button>` element
+ * - **Focus Management:** Visible focus ring using `--focus-glow` CSS variable (WCAG 2.4.7)
+ * - **Screen Readers:** Semantic `<button>` element, disabled state announced automatically
+ * - **Loading State:** When loading=true, button is disabled and loading spinner is visible
+ * - **Touch Targets:** Minimum 44x44px touch target (WCAG 2.5.5) via size variants
+ * - **Color Contrast:** All variants meet WCAG AA contrast ratio 4.5:1 minimum
+ * - **Motion:** Respects `prefers-reduced-motion` for ripple/shine animations
+ *
+ * @example
+ * ```tsx
+ * // Basic button (default variant)
+ * <ButtonGlass>Click me</ButtonGlass>
+ * <ButtonGlass variant="default">Primary action</ButtonGlass>
+ *
+ * // With icon and aria-label for icon-only buttons
+ * <ButtonGlass icon={Check} iconPosition="left">Save</ButtonGlass>
+ * <ButtonGlass icon={X} size="icon" aria-label="Close dialog" />
+ *
+ * // Loading state (automatically disables and shows spinner)
+ * <ButtonGlass loading aria-live="polite">Processing...</ButtonGlass>
+ *
+ * // Different variants (shadcn/ui compatible)
+ * <ButtonGlass variant="secondary">Secondary</ButtonGlass>
+ * <ButtonGlass variant="ghost">Cancel</ButtonGlass>
+ * <ButtonGlass variant="outline">Outline</ButtonGlass>
+ * <ButtonGlass variant="destructive">Delete</ButtonGlass>
+ * <ButtonGlass variant="link">Learn more</ButtonGlass>
+ * <ButtonGlass variant="success">Confirm</ButtonGlass>
+ *
+ * // As a link (asChild pattern) - maintains semantic HTML
+ * <ButtonGlass asChild>
+ *   <a href="/dashboard">Go to Dashboard</a>
+ * </ButtonGlass>
+ *
+ * // With Next.js Link
+ * <ButtonGlass asChild variant="ghost">
+ *   <Link href="/settings">Settings</Link>
+ * </ButtonGlass>
+ *
+ * // Form submit button
+ * <ButtonGlass type="submit">
+ *   Submit Form
+ * </ButtonGlass>
+ * ```
+ */
+export interface ButtonGlassProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'style'>, VariantProps<typeof buttonGlassVariants> {
+    /**
+     * Render as child element instead of button (polymorphic rendering).
+     * Useful for rendering buttons as links or other interactive elements.
+     *
+     * **Note:** When using `asChild`, decorative effects (ripple, shine, glow)
+     * are disabled to maintain compatibility with Radix UI Slot.
+     * Only styles and event handlers are passed to the child element.
+     *
+     * @default false
+     * @example
+     * ```tsx
+     * <ButtonGlass asChild>
+     *   <a href="/about">About Us</a>
+     * </ButtonGlass>
+     * ```
+     */
+    readonly asChild?: boolean;
+    /**
+     * Visual style variant of the button (shadcn/ui compatible)
+     * @default "default"
+     */
+    readonly variant?: ButtonGlassVariant;
+    /**
+     * Show loading spinner and disable interactions
+     * @default false
+     */
+    readonly loading?: boolean;
+    /**
+     * Icon component from lucide-react to display
+     * @example icon={Check}
+     */
+    readonly icon?: LucideIcon;
+    /**
+     * Position of the icon relative to button text
+     * @default "left"
+     */
+    readonly iconPosition?: 'left' | 'right';
+    /**
+     * Size variant of the button (shadcn/ui compatible)
+     * @default "default"
+     */
+    readonly size?: 'default' | 'sm' | 'lg' | 'xl' | 'icon';
+}
+export declare const ButtonGlass: import('react').ForwardRefExoticComponent<ButtonGlassProps & import('react').RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=button-glass.d.ts.map

package/dist/components/glass/ui/button-glass.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-glass.d.ts","sourceRoot":"","sources":["../../../../src/components/glass/ui/button-glass.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAYH,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAa,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAI1D,OAAO,EAAE,mBAAmB,EAAE,KAAK,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAEpG,OAAO,mBAAmB,CAAC;AAoF3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;AACH,MAAM,WAAW,gBACf,SACE,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC,EAC5D,YAAY,CAAC,OAAO,mBAAmB,CAAC;IAC1C;;;;;;;;;;;;;;;OAeG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAE3B;;;OAGG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAEtC;;;OAGG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAE3B;;;OAGG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC;IAE3B;;;OAGG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAEzC;;;OAGG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;CACzD;AAMD,eAAO,MAAM,WAAW,gHA+IvB,CAAC"}

package/dist/components/glass/ui/card-glass.d.ts

@@ -0,0 +1,115 @@
+import { GlowType, IntensityType } from '../../../lib/variants/glass-card-variants';
+/**
+ * CardGlass Compound Component
+ *
+ * A glass-themed card with compound sub-components matching shadcn/ui Card API.
+ * Provides structure (Header, Content, Footer) with glass visual effects.
+ *
+ * @example
+ * ```tsx
+ * // Object pattern (recommended)
+ * <CardGlass.Root intensity="medium" glow="blue">
+ *   <CardGlass.Header>
+ *     <CardGlass.Title>Card Title</CardGlass.Title>
+ *     <CardGlass.Description>Card description</CardGlass.Description>
+ *     <CardGlass.Action>
+ *       <ButtonGlass size="sm">Action</ButtonGlass>
+ *     </CardGlass.Action>
+ *   </CardGlass.Header>
+ *   <CardGlass.Content>
+ *     <p>Main content goes here</p>
+ *   </CardGlass.Content>
+ *   <CardGlass.Footer>
+ *     <ButtonGlass variant="ghost">Cancel</ButtonGlass>
+ *     <ButtonGlass>Save</ButtonGlass>
+ *   </CardGlass.Footer>
+ * </CardGlass.Root>
+ *
+ * // Named exports (shadcn/ui compatible)
+ * import { CardGlassRoot, CardGlassHeader, CardGlassTitle } from '@/components/glass/ui';
+ * ```
+ *
+ * @see GlassCard - Simple glass container without structure
+ * @see Card (shadcn/ui) - Reference implementation
+ */
+import * as React from 'react';
+export interface CardGlassRootProps extends React.ComponentProps<'div'> {
+    /**
+     * Glass blur intensity
+     * @default 'medium'
+     */
+    intensity?: IntensityType;
+    /**
+     * Glow effect color
+     * @default null
+     */
+    glow?: GlowType;
+    /**
+     * Enable hover effects
+     * @default false
+     */
+    hover?: boolean;
+}
+/**
+ * CardGlass Root - Glass-themed card container
+ *
+ * @accessibility
+ * - Uses semantic div element
+ * - Color contrast meets WCAG AA
+ * - Hover effects are decorative only
+ */
+declare function CardGlassRoot({ className, intensity, glow, hover, style, ...props }: CardGlassRootProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * CardGlass Header - Container for title, description, and action
+ *
+ * Uses CSS Grid for layout with automatic action positioning.
+ */
+declare function CardGlassHeader({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+/**
+ * CardGlass Title - Card title text
+ */
+declare function CardGlassTitle({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+/**
+ * CardGlass Description - Card description/subtitle text
+ */
+declare function CardGlassDescription({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+/**
+ * CardGlass Action - Positioned action slot in header
+ *
+ * Automatically positioned to the right of title/description.
+ */
+declare function CardGlassAction({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+/**
+ * CardGlass Content - Main content area
+ */
+declare function CardGlassContent({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+/**
+ * CardGlass Footer - Footer area with flex layout
+ */
+declare function CardGlassFooter({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+/**
+ * CardGlass - Compound Component API
+ *
+ * @example
+ * ```tsx
+ * <CardGlass.Root intensity="medium">
+ *   <CardGlass.Header>
+ *     <CardGlass.Title>Title</CardGlass.Title>
+ *     <CardGlass.Description>Description</CardGlass.Description>
+ *   </CardGlass.Header>
+ *   <CardGlass.Content>Content</CardGlass.Content>
+ *   <CardGlass.Footer>Footer</CardGlass.Footer>
+ * </CardGlass.Root>
+ * ```
+ */
+export declare const CardGlass: {
+    Root: typeof CardGlassRoot;
+    Header: typeof CardGlassHeader;
+    Title: typeof CardGlassTitle;
+    Description: typeof CardGlassDescription;
+    Action: typeof CardGlassAction;
+    Content: typeof CardGlassContent;
+    Footer: typeof CardGlassFooter;
+};
+export { CardGlassRoot, CardGlassHeader, CardGlassTitle, CardGlassDescription, CardGlassAction, CardGlassContent, CardGlassFooter, };
+//# sourceMappingURL=card-glass.d.ts.map

package/dist/components/glass/ui/card-glass.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-glass.d.ts","sourceRoot":"","sources":["../../../../src/components/glass/ui/card-glass.tsx"],"names":[],"mappings":"AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AAClF,OAAO,mBAAmB,CAAC;AAM3B,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACrE;;;OAGG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAkCD;;;;;;;GAOG;AACH,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,SAAoB,EACpB,IAAW,EACX,KAAa,EACb,KAAK,EACL,GAAG,KAAK,EACT,EAAE,kBAAkB,2CAuBpB;AAMD;;;;GAIG;AACH,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAa5E;AAMD;;GAEG;AACH,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQ3E;AAMD;;GAEG;AACH,iBAAS,oBAAoB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQjF;AAMD;;;;GAIG;AACH,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQ5E;AAMD;;GAEG;AACH,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAE7E;AAMD;;GAEG;AACH,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQ5E;AAMD;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,SAAS;;;;;;;;CAQrB,CAAC;AAMF,OAAO,EACL,aAAa,EACb,eAAe,EACf,cAAc,EACd,oBAAoB,EACpB,eAAe,EACf,gBAAgB,EAChB,eAAe,GAChB,CAAC"}

package/dist/components/glass/ui/checkbox-glass.d.ts

@@ -0,0 +1,80 @@
+/**
+ * Props for the CheckboxGlass component
+ *
+ * A glass-themed checkbox with accessible keyboard navigation, focus management,
+ * and touch-friendly targets. Features glow effects and theme-aware styling.
+ *
+ * @accessibility
+ * - **Keyboard Navigation:** Full keyboard support with Enter/Space to toggle, Tab to focus (WCAG 2.1.1)
+ * - **Focus Management:** Visible focus ring using `--focus-glow` CSS variable (WCAG 2.4.7)
+ * - **Screen Readers:** Dual implementation with native `<input type="checkbox">` (hidden) + visual `<div role="checkbox">`
+ * - **ARIA Attributes:** Uses `role="checkbox"` and `aria-checked` for proper state announcement
+ * - **Label Association:** Visual label automatically associated with checkbox via `<label>` wrapper
+ * - **Touch Targets:** 44x44px minimum touch area per Apple HIG (WCAG 2.5.5 compliance)
+ * - **Color Contrast:** Check mark and backgrounds meet WCAG AA contrast ratio 4.5:1
+ * - **Motion:** Transitions respect `prefers-reduced-motion` settings
+ *
+ * @example
+ * ```tsx
+ * // Basic checkbox with label
+ * <CheckboxGlass checked={agreed} onChange={setAgreed} label="I agree to terms" />
+ *
+ * // Checkbox with accessible name (no visual label)
+ * <CheckboxGlass
+ *   checked={checked}
+ *   onChange={setChecked}
+ *   aria-label="Select all items"
+ * />
+ *
+ * // Form integration with validation
+ * <form onSubmit={handleSubmit}>
+ *   <CheckboxGlass
+ *     checked={newsletter}
+ *     onChange={setNewsletter}
+ *     label="Subscribe to newsletter"
+ *     aria-describedby="newsletter-help"
+ *   />
+ *   <p id="newsletter-help">Receive weekly updates</p>
+ *   <CheckboxGlass
+ *     checked={terms}
+ *     onChange={setTerms}
+ *     label="Accept terms and conditions"
+ *     required
+ *     aria-invalid={submitted && !terms}
+ *   />
+ *   {submitted && !terms && (
+ *     <span role="alert">You must accept the terms</span>
+ *   )}
+ * </form>
+ *
+ * // Disabled checkbox (state announced to screen readers)
+ * <CheckboxGlass
+ *   checked={true}
+ *   onChange={() => {}}
+ *   label="This option is locked"
+ *   disabled
+ * />
+ *
+ * // Checkbox group with fieldset
+ * <fieldset>
+ *   <legend>Select your interests</legend>
+ *   <CheckboxGlass
+ *     checked={interests.tech}
+ *     onChange={(checked) => setInterests({ ...interests, tech: checked })}
+ *     label="Technology"
+ *   />
+ *   <CheckboxGlass
+ *     checked={interests.design}
+ *     onChange={(checked) => setInterests({ ...interests, design: checked })}
+ *     label="Design"
+ *   />
+ * </fieldset>
+ * ```
+ */
+export interface CheckboxGlassProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+    readonly checked: boolean;
+    readonly onChange?: (checked: boolean) => void;
+    readonly label?: string;
+}
+export declare const CheckboxGlass: import('react').ForwardRefExoticComponent<CheckboxGlassProps & import('react').RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=checkbox-glass.d.ts.map

package/dist/components/glass/ui/checkbox-glass.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-glass.d.ts","sourceRoot":"","sources":["../../../../src/components/glass/ui/checkbox-glass.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAOH,OAAO,mBAAmB,CAAC;AAM3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwEG;AACH,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC;IACrE,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;CACzB;AAMD,eAAO,MAAM,aAAa,iHA6EzB,CAAC"}

package/dist/components/glass/ui/circular-progress-glass.d.ts

@@ -0,0 +1,36 @@
+import { VariantProps } from 'class-variance-authority';
+declare const circularProgressVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type CircularProgressGradient = 'violet' | 'blue' | 'cyan' | 'amber' | 'emerald' | 'rose';
+export interface CircularProgressGlassProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>, VariantProps<typeof circularProgressVariants> {
+    /** Progress value (0-100) for determinate variant */
+    readonly value?: number;
+    /** Variant type */
+    readonly variant?: 'determinate' | 'indeterminate';
+    /** Stroke width in pixels */
+    readonly thickness?: number;
+    /** Background track width in pixels */
+    readonly trackWidth?: number;
+    /** Progress color gradient */
+    readonly color?: CircularProgressGradient;
+    /** Track color (background circle) */
+    readonly trackColor?: string;
+    /** Show percentage label in center */
+    readonly showLabel?: boolean;
+    /** Custom label text (overrides percentage) */
+    readonly label?: string;
+    /** Custom color for the center label text */
+    readonly labelColor?: string;
+    /** Show glow effect */
+    readonly showGlow?: boolean;
+    /** Glow intensity */
+    readonly glowIntensity?: 'low' | 'medium' | 'high';
+    /** Stroke linecap style */
+    readonly strokeLinecap?: 'round' | 'butt' | 'square';
+    /** Animation duration in seconds */
+    readonly animationDuration?: number;
+}
+export declare const CircularProgressGlass: import('react').ForwardRefExoticComponent<CircularProgressGlassProps & import('react').RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=circular-progress-glass.d.ts.map

package/dist/components/glass/ui/circular-progress-glass.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"circular-progress-glass.d.ts","sourceRoot":"","sources":["../../../../src/components/glass/ui/circular-progress-glass.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAGH,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,mBAAmB,CAAC;AAM3B,QAAA,MAAM,wBAAwB;;8EAY5B,CAAC;AAMH,MAAM,MAAM,wBAAwB,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AAEjG,MAAM,WAAW,0BACf,SACE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,EACtD,YAAY,CAAC,OAAO,wBAAwB,CAAC;IAC/C,qDAAqD;IACrD,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB;IACnB,QAAQ,CAAC,OAAO,CAAC,EAAE,aAAa,GAAG,eAAe,CAAC;IACnD,6BAA6B;IAC7B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,uCAAuC;IACvC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,8BAA8B;IAC9B,QAAQ,CAAC,KAAK,CAAC,EAAE,wBAAwB,CAAC;IAC1C,sCAAsC;IACtC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,sCAAsC;IACtC,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAC7B,+CAA+C;IAC/C,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,6CAA6C;IAC7C,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,uBAAuB;IACvB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,qBAAqB;IACrB,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;IACnD,2BAA2B;IAC3B,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;IACrD,oCAAoC;IACpC,QAAQ,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC;CACrC;AA4BD,eAAO,MAAM,qBAAqB,uHAwIjC,CAAC"}