Switch

1'use client';
2 
3import * as React from 'react';
4import {
5  createLiquidSwitch,
6  type LiquidSwitchHandle,
7  type LiquidSwitchOptions,
8  type LiquidSwitchEventMap,
9} from '@avenra/liquid-glass';
10 
11export interface LiquidSwitchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
12  /** Controlled state */
13  checked?: boolean;
14  /** Default state for uncontrolled usage */
15  defaultChecked?: boolean;
16  /** Called when checked state changes */
17  onCheckedChange?: (checked: boolean) => void;
18  /** Pass-through options for the underlying library */
19  options?: LiquidSwitchOptions;
20}
21 
22export const LiquidSwitch = React.forwardRef<LiquidSwitchHandle | null, LiquidSwitchProps>(
23  ({ checked, defaultChecked = false, onCheckedChange, options, className, ...props }, ref) => {
24    const containerRef = React.useRef<HTMLDivElement>(null);
25    const instanceRef = React.useRef<LiquidSwitchHandle | null>(null);
26 
27    const isControlled = checked !== undefined;
28 
29    // Initialize component
30    React.useEffect(() => {
31      if (!containerRef.current) return;
32      if (instanceRef.current) return;
33      if (containerRef.current.children.length > 0) return;
34 
35      const instance = createLiquidSwitch(containerRef.current, {
36        checked: checked ?? defaultChecked,
37        ...options,
38      });
39 
40      instanceRef.current = instance;
41 
42      const handleChange = (payload: LiquidSwitchEventMap['change']) => {
43        onCheckedChange?.(payload.checked);
44      };
45 
46      instance.on('change', handleChange);
47 
48      return () => {
49        instance.off('change', handleChange);
50        instance.destroy();
51        instanceRef.current = null;
52      };
53    }, []);
54 
55    // Sync controlled state
56    React.useEffect(() => {
57      if (!instanceRef.current || !isControlled) return;
58      instanceRef.current.checked = checked!;
59    }, [checked, isControlled]);
60 
61    // Expose imperative API
62    React.useImperativeHandle(ref, () => instanceRef.current!, []);
63 
64    return <div ref={containerRef} className={className} {...props} />;
65  },
66);
67 
68LiquidSwitch.displayName = 'LiquidSwitch';