Option List

1'use client'
2 
3import { Button } from '@/components/ui/button'
4import { cn } from '@/lib/utils'
5import { Check } from 'lucide-react'
6import { useEffect, useState } from 'react'
7 
8// Import types from shared types file to avoid circular dependencies
9import type { Option } from './types'
10// Re-export for backward compatibility
11export type { Option } from './types'
12 
13import { demoOptions } from './demo/selection'
14 
15 
16/**
17 * ═══════════════════════════════════════════════════════════════════════════
18 * OptionListProps
19 * ═══════════════════════════════════════════════════════════════════════════
20 *
21 * Props for the OptionList component, which displays selectable options with
22 * support for single or multiple selection modes.
23 */
24export interface OptionListProps {
25  data?: {
26    /** Array of selectable options to display. */
27    options?: Option[]
28  }
29  actions?: {
30    /** Called when the user confirms their selection. Returns selected option(s). */
31    onSubmit?: (selected: Option[]) => void
32  }
33  appearance?: {
34    /**
35     * Enable multiple selection mode.
36     * @default false
37     */
38    multiple?: boolean
39  }
40  control?: {
41    /** Controlled selected index for single selection mode. */
42    selectedOptionIndex?: number
43    /** Controlled selected indexes for multiple selection mode. */
44    selectedOptionIndexes?: number[]
45  }
46}
47 
48/**
49 * An option list component with single or multiple selection.
50 * Uses compact pill/chip design with check indicators.
51 *
52 * Features:
53 * - Single and multiple selection modes
54 * - Optional descriptions and icons
55 * - Disabled state support
56 * - Controlled and uncontrolled usage
57 *
58 * @component
59 * @example
60 * ```tsx
61 * <OptionList
62 *   data={{
63 *     options: [
64 *       { label: "Option A" },
65 *       { label: "Option B", description: "With description" },
66 *       { label: "Option C", disabled: true }
67 *     ]
68 *   }}
69 *   appearance={{ multiple: true }}
70 *   actions={{ onSelectOptions: (opts) => console.log(opts) }}
71 * />
72 * ```
73 */
74export function OptionList({ data, actions, appearance, control }: OptionListProps) {
75  const resolved: NonNullable<OptionListProps['data']> = data ?? { options: demoOptions }
76// … truncated