Separator Glass

1/**
2 * SeparatorGlass Component
3 *
4 * A glass-themed separator/divider component for visual content separation.
5 * Based on @radix-ui/react-separator with glassmorphism styling.
6 *
7 * Issue #27: Feature request for standalone SeparatorGlass
8 *
9 * @example
10 * ```tsx
11 * // Horizontal separator (default)
12 * <SeparatorGlass />
13 *
14 * // Vertical separator
15 * <SeparatorGlass orientation="vertical" className="h-4" />
16 *
17 * // With glow effect
18 * <SeparatorGlass glow />
19 *
20 * // Decorative (hidden from screen readers)
21 * <SeparatorGlass decorative />
22 * ```
23 */
24 
25import * as React from 'react';
26import * as SeparatorPrimitive from '@radix-ui/react-separator';
27import { cn } from '@/lib/utils';
28import '@/glass-theme.css';
29 
30// ========================================
31// TYPES
32// ========================================
33 
34export interface SeparatorGlassProps extends React.ComponentPropsWithoutRef<
35  typeof SeparatorPrimitive.Root
36> {
37  /**
38   * The orientation of the separator.
39   * @default 'horizontal'
40   */
41  orientation?: 'horizontal' | 'vertical';
42 
43  /**
44   * When true, signifies that it is purely visual and not a semantic separator.
45   * @default true
46   */
47  decorative?: boolean;
48 
49  /**
50   * Enable glow effect for the separator.
51   * @default false
52   */
53  glow?: boolean;
54}
55 
56// ========================================
57// STYLES
58// ========================================
59 
60/** Generate inline styles for separator */
61function getSeparatorStyles(glow: boolean): React.CSSProperties {
62  return {
63    background: 'var(--separator-bg)',
64    ...(glow && { boxShadow: 'var(--separator-glow)' }),
65  };
66}
67 
68// ========================================
69// COMPONENT
70// ========================================
71 
72/**
73 * SeparatorGlass - A glass-themed visual separator
74 *
75 * Renders a horizontal or vertical line to separate content sections.
76 * Supports glassmorphism styling with optional glow effect.
77 *
78 * @example
79 * ```tsx
80 * <div className="space-y-4">
81 *   <p>Section 1</p>
82 *   <SeparatorGlass />
83 *   <p>Section 2</p>
84 * </div>
85 * ```
86 */
87const SeparatorGlass = React.forwardRef<
88  React.ComponentRef<typeof SeparatorPrimitive.Root>,
89  SeparatorGlassProps
90>(({ className, orientation = 'horizontal', decorative = true, glow = false, ...props }, ref) => (
91  <SeparatorPrimitive.Root
92    ref={ref}
93    data-slot="separator-glass"
94    decorative={decorative}
95    orientation={orientation}
96    className={cn(
97      // Base styles
98      'shrink-0',
99 
100      // Orientation-specific sizing
101// … truncated