npm - @signalflare-ai/ui - Versions diffs - 0.5.0 → 1.0.0 - Mend

@signalflare-ai/ui 0.5.0 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (316) hide show

package/dist/filters-BdBogf7D.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"filters-BdBogf7D.js","names":[],"sources":["../src/components/filters/helpers.ts","../src/components/filters/filters.tsx"],"sourcesContent":["import type { Filter, FilterFieldConfig, FilterOperator, FilterI18nConfig } from \"./types\";\n\n// ============================================================================\n// Default Operators by Field Type\n// ============================================================================\n\n/** Default operators for text fields */\nexport const DEFAULT_TEXT_OPERATORS: FilterOperator[] = [\n { value: \"is\", label: \"is\" },\n { value: \"is_not\", label: \"is not\" },\n { value: \"contains\", label: \"contains\" },\n { value: \"does_not_contain\", label: \"does not contain\" },\n { value: \"starts_with\", label: \"starts with\" },\n { value: \"ends_with\", label: \"ends with\" },\n { value: \"is_empty\", label: \"is empty\" },\n { value: \"is_not_empty\", label: \"is not empty\" },\n];\n\n/** Default operators for select fields */\nexport const DEFAULT_SELECT_OPERATORS: FilterOperator[] = [\n { value: \"is\", label: \"is\" },\n { value: \"is_not\", label: \"is not\" },\n { value: \"is_empty\", label: \"is empty\" },\n { value: \"is_not_empty\", label: \"is not empty\" },\n];\n\n/** Default operators for multiselect fields */\nexport const DEFAULT_MULTISELECT_OPERATORS: FilterOperator[] = [\n { value: \"is_any_of\", label: \"is any of\" },\n { value: \"is_none_of\", label: \"is none of\" },\n { value: \"is_all_of\", label: \"is all of\" },\n { value: \"is_empty\", label: \"is empty\" },\n { value: \"is_not_empty\", label: \"is not empty\" },\n];\n\n/** Map of field types to their default operators */\nexport const DEFAULT_OPERATORS: Record<string, FilterOperator[]> = {\n text: DEFAULT_TEXT_OPERATORS,\n select: DEFAULT_SELECT_OPERATORS,\n multiselect: DEFAULT_MULTISELECT_OPERATORS,\n};\n\n/** Get default operator for a field type */\nexport function getDefaultOperatorForFieldType(\n type: string,\n operators?: FilterOperator[]\n): string {\n if (operators && operators.length > 0) {\n return operators[0].value;\n }\n const defaults = DEFAULT_OPERATORS[type];\n return defaults?.[0]?.value ?? \"is\";\n}\n\n// ============================================================================\n// Filter Factory Functions\n// ============================================================================\n\n/**\n * Create a new filter with a unique ID.\n *\n * @example\n * ```tsx\n * const filter = createFilter(\"status\", \"is\", [\"active\"]);\n * setFilters(prev => [...prev, filter]);\n * ```\n */\nexport function createFilter(\n field: string,\n operator: string,\n values: string[]\n): Filter {\n return {\n id: crypto.randomUUID(),\n field,\n operator,\n values,\n };\n}\n\n/**\n * Create multiple filters at once, each with a unique ID.\n *\n * @example\n * ```tsx\n * const filters = createFilterGroup([\n * { field: \"status\", operator: \"is\", values: [\"active\"] },\n * { field: \"priority\", operator: \"is_any_of\", values: [\"high\", \"critical\"] },\n * ]);\n * ```\n */\nexport function createFilterGroup(\n filters: Array<Omit<Filter, \"id\">>\n): Filter[] {\n return filters.map((f) => ({\n ...f,\n id: crypto.randomUUID(),\n }));\n}\n\n// ============================================================================\n// i18n Defaults\n// ============================================================================\n\n/** Default i18n configuration */\nexport const DEFAULT_I18N: FilterI18nConfig = {\n addFilter: \"Add Filter\",\n clearAll: \"Clear All\",\n searchPlaceholder: \"Search fields...\",\n noResults: \"No fields found\",\n operators: {\n is: \"is\",\n is_not: \"is not\",\n contains: \"contains\",\n does_not_contain: \"does not contain\",\n starts_with: \"starts with\",\n ends_with: \"ends with\",\n is_empty: \"is empty\",\n is_not_empty: \"is not empty\",\n is_any_of: \"is any of\",\n is_none_of: \"is none of\",\n is_all_of: \"is all of\",\n },\n valueLabel: \"Value\",\n noValueLabel: \"None\",\n removeFilter: \"Remove filter\",\n changeOperator: \"Change operator\",\n changeValue: \"Change value\",\n maxSelectionsReached: \"Maximum selections reached\",\n validationError: \"Invalid value\",\n};\n\n/** Merge partial i18n config with defaults */\nexport function mergeI18n(partial?: Partial<FilterI18nConfig>): FilterI18nConfig {\n return {\n ...DEFAULT_I18N,\n ...partial,\n operators: {\n ...DEFAULT_I18N.operators,\n ...partial?.operators,\n },\n };\n}\n\n// ============================================================================\n// Field Helpers\n// ============================================================================\n\n/** Get operators for a field, falling back to defaults */\nexport function getFieldOperators(field: FilterFieldConfig): FilterOperator[] {\n if (field.operators && field.operators.length > 0) {\n return field.operators;\n }\n return DEFAULT_OPERATORS[field.type] ?? DEFAULT_TEXT_OPERATORS;\n}\n\n/** Get field configuration by key */\nexport function getFieldByKey(\n fields: FilterFieldConfig[],\n key: string\n): FilterFieldConfig | undefined {\n return fields.find((f) => f.key === key);\n}\n\n/** Group fields by their group property */\nexport function groupFields(fields: FilterFieldConfig[]): Map<string, FilterFieldConfig[]> {\n const groups = new Map<string, FilterFieldConfig[]>();\n\n for (const field of fields) {\n const group = field.group ?? \"Fields\";\n if (!groups.has(group)) {\n groups.set(group, []);\n }\n groups.get(group)!.push(field);\n }\n\n return groups;\n}\n\n/** Check if a filter value is valid for a field */\nexport function validateFilterValue(\n field: FilterFieldConfig,\n values: string[]\n): { valid: boolean; message?: string } {\n // Check max selections\n if (field.maxSelections && values.length > field.maxSelections) {\n return {\n valid: false,\n message: `Maximum ${field.maxSelections} selections allowed`,\n };\n }\n\n // Run custom validation if provided\n if (field.validation) {\n const result = field.validation(values);\n if (typeof result === \"boolean\") {\n return { valid: result, message: result ? undefined : \"Invalid value\" };\n }\n return result;\n }\n\n return { valid: true };\n}\n\n// ============================================================================\n// Value Formatting\n// ============================================================================\n\n/** Format a filter value for display in the filter pill */\nexport function formatFilterValue(\n values: string[],\n field: FilterFieldConfig\n): string {\n // Use custom renderer if provided\n if (field.customValueRenderer) {\n // Return a placeholder - the actual rendering happens in React\n return \"...\";\n }\n\n // Empty values\n if (values.length === 0) {\n return \"None\";\n }\n\n // Single value\n if (values.length === 1) {\n const value = values[0];\n // Try to find option label\n if (field.options) {\n const option = field.options.find((o) => o.value === value);\n if (option) return option.label;\n }\n return String(value);\n }\n\n // Multiple values\n if (field.options) {\n const labels = values.map((v) => {\n const option = field.options!.find((o) => o.value === v);\n return option?.label ?? String(v);\n });\n return `${labels.slice(0, 2).join(\", \")}${labels.length > 2 ? ` +${labels.length - 2}` : \"\"}`;\n }\n\n return `${values.length} selected`;\n}\n\n/** Get the label for a filter value from options */\nexport function getValueLabel(\n value: string,\n options?: Array<{ value: string; label: string }>\n): string {\n if (!options) return String(value);\n const option = options.find((o) => o.value === value);\n return option?.label ?? String(value);\n}\n","\"use client\";\n\nimport {\n Check,\n CaretDown,\n MagnifyingGlass,\n Plus,\n X,\n} from \"@phosphor-icons/react\";\nimport {\n useCallback,\n useEffect,\n useMemo,\n useState,\n type ReactNode,\n} from \"react\";\n\nimport { Button } from \"../button\";\nimport { Checkbox } from \"../checkbox\";\nimport { DropdownMenu } from \"../dropdown\";\nimport { Input, InputGroup } from \"../input\";\nimport { Popover } from \"../popover\";\nimport { cn } from \"../../utils/cn\";\nimport type {\n Filter,\n FilterCustomRendererProps,\n FilterFieldConfig,\n FiltersProps,\n FilterI18nConfig,\n} from \"./types\";\nimport {\n formatFilterValue,\n getDefaultOperatorForFieldType,\n getFieldOperators,\n groupFields,\n mergeI18n,\n validateFilterValue,\n createFilter,\n createFilterGroup,\n} from \"./helpers\";\n\nexport { createFilter, createFilterGroup } from \"./helpers\";\n\nexport type {\n Filter,\n FilterFieldConfig,\n FilterOption,\n FilterOperator,\n FilterI18nConfig,\n FiltersProps,\n FilterCustomRendererProps,\n} from \"./types\";\n\n// ============================================================================\n// Variants\n// ============================================================================\n\n/** Filters size variant definitions */\nexport const SF_FILTERS_VARIANTS = {\n size: {\n sm: {\n classes: \"text-xs\",\n description: \"Small filter items\",\n },\n default: {\n classes: \"text-sm\",\n description: \"Default filter items\",\n },\n lg: {\n classes: \"text-base\",\n description: \"Large filter items\",\n },\n },\n} as const;\n\n/** Default variants for Filters */\nexport const SF_FILTERS_DEFAULT_VARIANTS = {\n size: \"default\",\n} as const;\n\n// ============================================================================\n// Filter Value Editor (internal)\n// ============================================================================\n\ninterface FilterValueEditorProps {\n field: FilterFieldConfig;\n values: string[];\n onChange: (values: string[]) => void;\n onClose: () => void;\n i18n: FilterI18nConfig;\n}\n\nfunction FilterValueEditor({\n field,\n values,\n onChange,\n onClose,\n i18n,\n}: FilterValueEditorProps) {\n const [searchQuery, setSearchQuery] = useState(\"\");\n const [localValues, setLocalValues] = useState<string[]>(values);\n const [validationError, setValidationError] = useState<string | null>(null);\n\n const options = useMemo(() => {\n if (!field.options) return [];\n if (!searchQuery) return field.options;\n return field.options.filter((o: { label: string }) =>\n o.label.toLowerCase().includes(searchQuery.toLowerCase())\n );\n }, [field.options, searchQuery]);\n\n const handleValueChange = useCallback(\n (newValues: string[]) => {\n setLocalValues(newValues);\n const validation = validateFilterValue(field, newValues);\n if (!validation.valid) {\n setValidationError(validation.message ?? i18n.validationError);\n } else {\n setValidationError(null);\n }\n },\n [field, i18n.validationError]\n );\n\n const handleApply = useCallback(() => {\n const validation = validateFilterValue(field, localValues);\n if (!validation.valid) {\n setValidationError(validation.message ?? i18n.validationError);\n return;\n }\n onChange(localValues);\n onClose();\n }, [field, localValues, onChange, onClose, i18n.validationError]);\n\n // Text type\n if (field.type === \"text\") {\n return (\n <div className=\"flex flex-col gap-2 p-2\">\n <Input\n value={String(localValues[0] ?? \"\")}\n onChange={(e) => handleValueChange([e.target.value])}\n placeholder={field.placeholder}\n className=\"w-full\"\n />\n <div className=\"flex justify-end gap-2\">\n <Button variant=\"secondary\" size=\"sm\" onClick={onClose}>\n Cancel\n </Button>\n <Button size=\"sm\" onClick={handleApply}>\n Apply\n </Button>\n </div>\n </div>\n );\n }\n\n // Select type\n if (field.type === \"select\") {\n return (\n <div className=\"flex max-h-72 flex-col gap-2\">\n {field.searchable && (\n <div className=\"border-b border-sf-line pb-2\">\n <InputGroup className=\"w-full\">\n <InputGroup.Input\n value={searchQuery}\n onChange={(e) => setSearchQuery(e.target.value)}\n placeholder={i18n.searchPlaceholder}\n className=\"w-full\"\n />\n <InputGroup.Button>\n <MagnifyingGlass className=\"size-4\" />\n </InputGroup.Button>\n </InputGroup>\n </div>\n )}\n <div className=\"flex flex-col gap-0.5 overflow-auto\">\n {options.map((option) => (\n <button\n key={String(option.value)}\n type=\"button\"\n onClick={() => {\n handleValueChange([option.value]);\n handleApply();\n }}\n className={cn(\n \"flex items-center justify-between rounded-md px-2 py-1.5 text-sm\",\n \"hover:bg-sf-tint\",\n localValues[0] === option.value && \"bg-sf-tint\"\n )}\n >\n <span className=\"flex items-center gap-2\">\n {option.icon}\n {option.label}\n </span>\n {localValues[0] === option.value && (\n <Check className=\"size-4 text-sf-brand\" />\n )}\n </button>\n ))}\n {options.length === 0 && (\n <div className=\"py-4 text-center text-sm text-sf-subtle\">\n {i18n.noResults}\n </div>\n )}\n </div>\n </div>\n );\n }\n\n // Multiselect type\n if (field.type === \"multiselect\") {\n const isMaxReached =\n field.maxSelections !== undefined &&\n localValues.length >= field.maxSelections;\n\n return (\n <div className=\"flex max-h-72 w-56 flex-col gap-2\">\n {field.searchable && (\n <div className=\"border-b border-sf-line pb-2\">\n <InputGroup className=\"w-full\">\n <InputGroup.Input\n value={searchQuery}\n onChange={(e) => setSearchQuery(e.target.value)}\n placeholder={i18n.searchPlaceholder}\n className=\"w-full\"\n />\n <InputGroup.Button>\n <MagnifyingGlass className=\"size-4\" />\n </InputGroup.Button>\n </InputGroup>\n </div>\n )}\n <div className=\"flex flex-col gap-0.5 overflow-auto\">\n {options.map((option) => {\n const isSelected = localValues.includes(option.value);\n const isDisabled = isMaxReached && !isSelected;\n\n return (\n <label\n key={String(option.value)}\n className={cn(\n \"flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm\",\n !isDisabled && \"hover:bg-sf-tint\",\n isDisabled && \"cursor-not-allowed opacity-50\"\n )}\n >\n <Checkbox\n checked={isSelected}\n disabled={isDisabled}\n onCheckedChange={(checked) => {\n if (checked) {\n handleValueChange([...localValues, option.value]);\n } else {\n handleValueChange(\n localValues.filter((v) => v !== option.value)\n );\n }\n }}\n />\n <span className=\"flex items-center gap-2\">\n {option.icon}\n {option.label}\n </span>\n </label>\n );\n })}\n {options.length === 0 && (\n <div className=\"py-4 text-center text-sm text-sf-subtle\">\n {i18n.noResults}\n </div>\n )}\n </div>\n {isMaxReached && (\n <div className=\"text-xs text-sf-subtle\">\n {i18n.maxSelectionsReached}\n </div>\n )}\n {validationError && (\n <div className=\"text-xs text-sf-danger\">{validationError}</div>\n )}\n <div className=\"flex justify-end gap-2 border-t border-sf-line pt-2\">\n <Button variant=\"secondary\" size=\"sm\" onClick={onClose}>\n Cancel\n </Button>\n <Button size=\"sm\" onClick={handleApply}>\n Apply\n </Button>\n </div>\n </div>\n );\n }\n\n // Custom type\n if (field.type === \"custom\" && field.customRenderer) {\n const props: FilterCustomRendererProps = {\n values: localValues,\n onChange: handleValueChange,\n options: field.options,\n placeholder: field.placeholder,\n field,\n operator: \"is\",\n };\n\n return (\n <div className=\"flex flex-col gap-2 p-2\">\n {field.customRenderer(props)}\n <div className=\"flex justify-end gap-2\">\n <Button variant=\"secondary\" size=\"sm\" onClick={onClose}>\n Cancel\n </Button>\n <Button size=\"sm\" onClick={handleApply}>\n Apply\n </Button>\n </div>\n </div>\n );\n }\n\n return null;\n}\n\n// ============================================================================\n// Filter Item (internal)\n// ============================================================================\n\ninterface FilterItemProps {\n filter: Filter;\n field: FilterFieldConfig;\n size: \"sm\" | \"default\" | \"lg\";\n i18n: FilterI18nConfig;\n onRemove: () => void;\n onOperatorChange: (operator: string) => void;\n onValuesChange: (values: string[]) => void;\n}\n\nfunction FilterItem({\n filter,\n field,\n size,\n i18n,\n onRemove,\n onOperatorChange,\n onValuesChange,\n}: FilterItemProps) {\n const [valuePopoverOpen, setValuePopoverOpen] = useState(false);\n const operators = useMemo(() => getFieldOperators(field), [field]);\n\n const sizeClasses = {\n sm: \"text-xs py-0.5 px-1.5\",\n default: \"text-sm py-1 px-2\",\n lg: \"text-base py-1.5 px-2.5\",\n };\n\n const displayValue = useMemo(() => {\n if (field.customValueRenderer) {\n return field.customValueRenderer(filter.values, field.options);\n }\n return formatFilterValue(filter.values, field);\n }, [field, filter.values]);\n\n return (\n <div\n className={cn(\n \"inline-flex items-center gap-0 rounded-md border border-sf-line bg-sf-tint\",\n sizeClasses[size]\n )}\n >\n {/* Field label */}\n <span className=\"flex items-center gap-1 whitespace-nowrap font-medium text-sf-default\">\n {field.icon}\n {field.label}\n </span>\n\n {/* Separator */}\n <span className=\"mx-1.5 h-3 w-px bg-sf-fill\" />\n\n {/* Operator dropdown */}\n <DropdownMenu>\n <DropdownMenu.Trigger className=\"inline-flex cursor-pointer items-center gap-1 whitespace-nowrap text-sf-strong hover:text-sf-default\">\n {operators.find((o) => o.value === filter.operator)?.label ??\n filter.operator}\n <CaretDown className=\"size-3\" />\n </DropdownMenu.Trigger>\n <DropdownMenu.Content>\n {operators.map((op) => (\n <DropdownMenu.Item\n key={op.value}\n selected={filter.operator === op.value}\n onClick={() => onOperatorChange(op.value)}\n >\n {op.label}\n </DropdownMenu.Item>\n ))}\n </DropdownMenu.Content>\n </DropdownMenu>\n\n {/* Separator */}\n <span className=\"mx-1.5 h-3 w-px bg-sf-fill\" />\n\n {/* Value editor popover */}\n <Popover open={valuePopoverOpen} onOpenChange={setValuePopoverOpen}>\n <Popover.Trigger\n asChild\n className=\"inline-flex cursor-pointer items-center gap-1 whitespace-nowrap text-sf-strong hover:text-sf-default\"\n >\n <button type=\"button\" aria-label={i18n.changeValue}>\n <span className=\"max-w-32 truncate\">\n {filter.values.length === 0 ? i18n.noValueLabel : displayValue}\n </span>\n <CaretDown className=\"size-3\" />\n </button>\n </Popover.Trigger>\n <Popover.Content className=\"w-auto min-w-48\">\n <FilterValueEditor\n field={field}\n values={filter.values}\n onChange={onValuesChange}\n onClose={() => setValuePopoverOpen(false)}\n i18n={i18n}\n />\n </Popover.Content>\n </Popover>\n\n {/* Remove button */}\n <button\n type=\"button\"\n onClick={onRemove}\n aria-label={i18n.removeFilter}\n className=\"ml-1.5 inline-flex items-center justify-center rounded p-0.5 text-sf-subtle hover:bg-sf-overlay hover:text-sf-default\"\n >\n <X className=\"size-3.5\" />\n </button>\n </div>\n );\n}\n\n// ============================================================================\n// Filter Add Menu (internal)\n// ============================================================================\n\ninterface FilterAddMenuProps {\n fields: FilterFieldConfig[];\n filters: Filter[];\n size: \"sm\" | \"default\" | \"lg\";\n trigger?: ReactNode;\n showSearchInput?: boolean;\n allowMultiple?: boolean;\n i18n: FilterI18nConfig;\n onAddFilter: (filter: Filter) => void;\n}\n\nfunction FilterAddMenu({\n fields,\n filters,\n size,\n trigger,\n showSearchInput = true,\n allowMultiple = true,\n i18n,\n onAddFilter,\n}: FilterAddMenuProps) {\n const [open, setOpen] = useState(false);\n const [searchQuery, setSearchQuery] = useState(\"\");\n\n const groupedFields = useMemo(() => groupFields(fields), [fields]);\n\n const availableFields = useMemo(() => {\n if (allowMultiple) return fields;\n const usedKeys = new Set(filters.map((f) => f.field));\n return fields.filter((f) => !usedKeys.has(f.key));\n }, [fields, filters, allowMultiple]);\n\n const filteredGroups = useMemo(() => {\n if (!searchQuery) return groupedFields;\n\n const filtered = new Map<string, FilterFieldConfig[]>();\n for (const [group, groupFields] of groupedFields) {\n const matching = groupFields.filter(\n (f) =>\n f.label.toLowerCase().includes(searchQuery.toLowerCase()) ||\n f.key.toLowerCase().includes(searchQuery.toLowerCase())\n );\n if (matching.length > 0) {\n filtered.set(group, matching);\n }\n }\n return filtered;\n }, [groupedFields, searchQuery]);\n\n const handleFieldClick = useCallback(\n (field: FilterFieldConfig) => {\n const operator =\n field.defaultOperator ?? getDefaultOperatorForFieldType(field.type, field.operators);\n const newFilter = createFilter(field.key, operator, []);\n onAddFilter(newFilter);\n setOpen(false);\n setSearchQuery(\"\");\n },\n [onAddFilter]\n );\n\n const sizeClasses = {\n sm: \"text-xs h-7 px-2\",\n default: \"text-sm h-8 px-2.5\",\n lg: \"text-base h-9 px-3\",\n };\n\n return (\n <Popover open={open} onOpenChange={setOpen}>\n <Popover.Trigger asChild>\n {trigger ?? (\n <Button\n variant=\"secondary\"\n size=\"sm\"\n className={cn(\n \"inline-flex items-center gap-1 whitespace-nowrap\",\n sizeClasses[size]\n )}\n >\n <Plus className=\"size-3.5\" />\n {i18n.addFilter}\n </Button>\n )}\n </Popover.Trigger>\n <Popover.Content className=\"w-64 p-2\">\n {showSearchInput && (\n <div className=\"mb-2\">\n <InputGroup className=\"w-full\">\n <InputGroup.Input\n value={searchQuery}\n onChange={(e) => setSearchQuery(e.target.value)}\n placeholder={i18n.searchPlaceholder}\n className=\"w-full\"\n />\n <InputGroup.Button>\n <MagnifyingGlass className=\"size-4\" />\n </InputGroup.Button>\n </InputGroup>\n </div>\n )}\n <div className=\"max-h-72 overflow-auto\">\n {filteredGroups.size === 0 ? (\n <div className=\"py-4 text-center text-sm text-sf-subtle\">\n {i18n.noResults}\n </div>\n ) : (\n Array.from(filteredGroups.entries()).map(\n ([group, groupFields], groupIndex) => (\n <div key={group}>\n {groupIndex > 0 && (\n <div className=\"my-2 h-px bg-sf-line\" />\n )}\n <div className=\"mb-1 px-2 text-xs font-medium text-sf-subtle\">\n {group}\n </div>\n <div className=\"flex flex-col gap-0.5\">\n {groupFields.map((field) => (\n <button\n key={field.key}\n type=\"button\"\n onClick={() => handleFieldClick(field)}\n disabled={!availableFields.some((f) => f.key === field.key)}\n className={cn(\n \"flex items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm\",\n \"hover:bg-sf-tint\",\n \"disabled:cursor-not-allowed disabled:opacity-50\"\n )}\n >\n {field.icon}\n {field.label}\n </button>\n ))}\n </div>\n </div>\n )\n )\n )}\n </div>\n </Popover.Content>\n </Popover>\n );\n}\n\n// ============================================================================\n// Main Filters Component\n// ============================================================================\n\n/**\n * Filters component for building and managing active filter conditions.\n *\n * Supports multiple filter types (text, select, multiselect, custom), operators,\n * and an \"Add Filter\" popover interface. Designed to work standalone or with\n * DataGrid for advanced data filtering.\n *\n * @example\n * ```tsx\n * const [filters, setFilters] = useState<Filter[]>([]);\n * const fields: FilterFieldConfig[] = [\n * { key: \"status\", label: \"Status\", type: \"select\", options: [\n * { value: \"active\", label: \"Active\" },\n * { value: \"inactive\", label: \"Inactive\" },\n * ]},\n * { key: \"name\", label: \"Name\", type: \"text\" },\n * ];\n *\n * <Filters\n * filters={filters}\n * fields={fields}\n * onChange={setFilters}\n * />\n * ```\n */\nexport function Filters({\n filters,\n fields,\n onChange,\n size = SF_FILTERS_DEFAULT_VARIANTS.size,\n trigger,\n showSearchInput = true,\n allowMultiple = true,\n enableShortcut = true,\n shortcutKey = \"k\",\n shortcutLabel,\n i18n: i18nProp,\n className,\n menuPopupClassName,\n}: FiltersProps) {\n const i18n = useMemo(() => mergeI18n(i18nProp), [i18nProp]);\n\n // Keyboard shortcut\n useEffect(() => {\n if (!enableShortcut) return;\n\n const handleKeyDown = (e: KeyboardEvent) => {\n if ((e.metaKey || e.ctrlKey) && e.key === shortcutKey) {\n e.preventDefault();\n // The add menu popover will need to be opened via a ref or state\n // For now, this is a placeholder for the shortcut behavior\n }\n };\n\n document.addEventListener(\"keydown\", handleKeyDown);\n return () => document.removeEventListener(\"keydown\", handleKeyDown);\n }, [enableShortcut, shortcutKey]);\n\n const handleAddFilter = useCallback(\n (filter: Filter) => {\n onChange([...filters, filter]);\n },\n [filters, onChange]\n );\n\n const handleRemoveFilter = useCallback(\n (id: string) => {\n onChange(filters.filter((f) => f.id !== id));\n },\n [filters, onChange]\n );\n\n const handleOperatorChange = useCallback(\n (id: string, operator: string) => {\n onChange(\n filters.map((f) => (f.id === id ? { ...f, operator } : f))\n );\n },\n [filters, onChange]\n );\n\n const handleValuesChange = useCallback(\n (id: string, values: string[]) => {\n onChange(filters.map((f) => (f.id === id ? { ...f, values } : f)));\n },\n [filters, onChange]\n );\n\n const handleClearAll = useCallback(() => {\n onChange([]);\n }, [onChange]);\n\n const fieldMap = useMemo(() => {\n const map = new Map<string, FilterFieldConfig>();\n for (const field of fields) {\n map.set(field.key, field);\n }\n return map;\n }, [fields]);\n\n return (\n <div className={cn(\"flex flex-wrap items-center gap-2\", className)}>\n {/* Active filter pills */}\n {filters.map((filter) => {\n const field = fieldMap.get(filter.field);\n if (!field) return null;\n\n return (\n <FilterItem\n key={filter.id}\n filter={filter}\n field={field}\n size={size}\n i18n={i18n}\n onRemove={() => handleRemoveFilter(filter.id)}\n onOperatorChange={(op) => handleOperatorChange(filter.id, op)}\n onValuesChange={(vals) => handleValuesChange(filter.id, vals)}\n />\n );\n })}\n\n {/* Add filter menu */}\n <div className={menuPopupClassName}>\n <FilterAddMenu\n fields={fields}\n filters={filters}\n size={size}\n trigger={trigger}\n showSearchInput={showSearchInput}\n allowMultiple={allowMultiple}\n i18n={i18n}\n onAddFilter={handleAddFilter}\n />\n </div>\n\n {/* Clear all button */}\n {filters.length > 0 && (\n <Button\n variant=\"ghost\"\n size=\"sm\"\n onClick={handleClearAll}\n className=\"text-sf-subtle hover:text-sf-default\"\n >\n {i18n.clearAll}\n </Button>\n )}\n\n {/* Keyboard shortcut hint */}\n {enableShortcut && shortcutLabel && (\n <span className=\"ml-auto text-xs text-sf-subtle\">{shortcutLabel}</span>\n )}\n </div>\n );\n}\n\nFilters.displayName = \"Filters\";\n"],"mappings":"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"}

package/dist/radio-B7zg1wUI.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"radio-B7zg1wUI.js","names":[],"sources":["../src/components/radio/radio.tsx"],"sourcesContent":["import { Fieldset } from \"@base-ui/react/fieldset\";\nimport { Radio as BaseRadio } from \"@base-ui/react/radio\";\nimport { RadioGroup as BaseRadioGroup } from \"@base-ui/react/radio-group\";\nimport { forwardRef, createContext, useContext, type ReactNode } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\n\n/** Radio variant definitions mapping variant names to their Tailwind classes. */\nexport const SF_RADIO_VARIANTS = {\n variant: {\n default: {\n classes: \"ring-sf-line\",\n description: \"Default radio appearance\",\n },\n error: {\n classes: \"ring-destructive\",\n description: \"Error state for validation failures\",\n },\n },\n} as const;\n\nexport const SF_RADIO_DEFAULT_VARIANTS = {\n variant: \"default\",\n} as const;\n\n// Derived types from SF_RADIO_VARIANTS\nexport type SFRadioVariant = keyof typeof SF_RADIO_VARIANTS.variant;\n\nexport interface SFRadioVariantsProps {\n /**\n * Visual variant.\n * - `\"default\"` — Standard radio appearance\n * - `\"error\"` — Error state for validation failures\n * @default \"default\"\n */\n variant?: SFRadioVariant;\n}\n\nexport function radioVariants({\n variant = SF_RADIO_DEFAULT_VARIANTS.variant,\n}: SFRadioVariantsProps = {}) {\n return cn(SF_RADIO_VARIANTS.variant[variant].classes);\n}\n\n// Legacy type alias for backwards compatibility\nexport type RadioVariant = SFRadioVariant;\n\n/** Position of the radio control relative to its label */\nexport type RadioControlPosition = \"start\" | \"end\";\n\n// Context for passing controlPosition from Group to Items\nconst RadioGroupContext = createContext<{\n controlPosition: RadioControlPosition;\n}>({\n controlPosition: \"start\",\n});\n\n/**\n * Radio group component props (with built-in Fieldset and RadioGroup)\n *\n * @example\n * // Basic usage\n * ```tsx\n * <Radio.Group legend=\"Notification preference\" defaultValue=\"email\">\n * <Radio.Item label=\"Email\" value=\"email\" />\n * <Radio.Item label=\"SMS\" value=\"sms\" />\n * <Radio.Item label=\"Push\" value=\"push\" />\n * </Radio.Group>\n * ```\n *\n * @example\n * // Horizontal layout\n * ```tsx\n * <Radio.Group legend=\"Size\" orientation=\"horizontal\" defaultValue=\"md\">\n * <Radio.Item label=\"Small\" value=\"sm\" />\n * <Radio.Item label=\"Medium\" value=\"md\" />\n * <Radio.Item label=\"Large\" value=\"lg\" />\n * </Radio.Group>\n * ```\n *\n * @example\n * // With error and description\n * ```tsx\n * <Radio.Group\n * legend=\"Payment method\"\n * error=\"Please select a payment method\"\n * description=\"Choose how you'd like to pay\"\n * >\n * <Radio.Item label=\"Credit Card\" value=\"card\" />\n * <Radio.Item label=\"PayPal\" value=\"paypal\" />\n * </Radio.Group>\n * ```\n *\n * @example\n * // Controlled\n * ```tsx\n * const [value, setValue] = useState(\"email\");\n * <Radio.Group legend=\"Contact\" value={value} onValueChange={setValue}>\n * <Radio.Item label=\"Email\" value=\"email\" />\n * <Radio.Item label=\"Phone\" value=\"phone\" />\n * </Radio.Group>\n * ```\n *\n * @example\n * // Label before radio (controlPosition=\"end\")\n * ```tsx\n * <Radio.Group legend=\"Options\" controlPosition=\"end\" defaultValue=\"a\">\n * <Radio.Item label=\"Option A\" value=\"a\" />\n * <Radio.Item label=\"Option B\" value=\"b\" />\n * </Radio.Group>\n * ```\n */\nexport interface RadioGroupProps {\n /** Legend text for the group (required for accessibility) */\n legend: string;\n /** Child Radio.Item components */\n children: ReactNode;\n /** Layout direction of the radio items */\n orientation?: \"vertical\" | \"horizontal\";\n /** Error message for the group */\n error?: string;\n /** Helper text for the group */\n description?: ReactNode;\n /** Value of the radio that should be initially selected (uncontrolled) */\n defaultValue?: string;\n /** Value of the radio that should be selected (controlled) */\n value?: string;\n /** Event handler called when radio value changes */\n onValueChange?: (value: string) => void;\n /** Whether all radios in the group are disabled */\n disabled?: boolean;\n /** Position of radio control relative to label: \"start\" (default) puts radio before label, \"end\" puts label before radio */\n controlPosition?: RadioControlPosition;\n /** Form submission name for the radio group */\n name?: string;\n /** Additional CSS classes */\n className?: string;\n}\n\n/**\n * Individual radio item within a group\n *\n * @example\n * ```tsx\n * <Radio.Item label=\"Option A\" value=\"a\" />\n * ```\n *\n * @example\n * // Disabled item\n * ```tsx\n * <Radio.Item label=\"Unavailable\" value=\"unavailable\" disabled />\n * ```\n */\nexport type RadioItemProps = {\n /** Visual variant: \"default\" or \"error\" for validation failures */\n variant?: RadioVariant;\n /** Label text displayed next to radio (required) */\n label: string;\n /** Value of the radio (required) */\n value: string;\n /** Additional CSS classes for the label wrapper */\n className?: string;\n /** Whether the radio is disabled */\n disabled?: boolean;\n};\n\n// Radio.Item for use within Radio.Group\nconst RadioItem = forwardRef<HTMLButtonElement, RadioItemProps>(\n ({ className, disabled, variant = \"default\", label, value }, ref) => {\n const { controlPosition } = useContext(RadioGroupContext);\n\n return (\n <label\n className={cn(\n \"group relative inline-flex items-center gap-2\",\n // \"start\" (default): radio before label\n // \"end\": label before radio using flex-row-reverse\n controlPosition === \"end\" && \"flex-row-reverse justify-end\",\n disabled ? \"cursor-not-allowed opacity-50\" : \"cursor-pointer\",\n className\n )}\n >\n <BaseRadio.Root\n ref={ref}\n value={value}\n disabled={disabled}\n className={cn(\n \"flex h-4 w-4 items-center justify-center rounded-full border-0 bg-sf-base ring\",\n variant === \"error\" ? \"ring-sf-danger\" : \"ring-sf-line\",\n !disabled &&\n \"group-hover:ring-sf-ring focus-visible:ring-sf-ring focus-visible:outline-offset-3\",\n \"data-checked:bg-sf-contrast\"\n )}\n >\n <BaseRadio.Indicator className=\"flex items-center justify-center\">\n <span className=\"h-2 w-2 rounded-full bg-sf-base\" />\n </BaseRadio.Indicator>\n </BaseRadio.Root>\n <span className=\"text-base font-medium text-sf-default\">{label}</span>\n </label>\n );\n }\n);\n\nRadioItem.displayName = \"Radio.Item\";\n\n// Radio.Group with built-in Fieldset and RadioGroup\nfunction RadioGroup({\n legend,\n children,\n orientation = \"vertical\",\n error,\n description,\n defaultValue,\n value,\n onValueChange,\n disabled,\n controlPosition = \"start\",\n name,\n className,\n}: RadioGroupProps) {\n return (\n <RadioGroupContext.Provider value={{ controlPosition }}>\n <BaseRadioGroup\n defaultValue={defaultValue}\n value={value}\n onValueChange={(newValue) => onValueChange?.(newValue as string)}\n disabled={disabled}\n name={name}\n >\n <Fieldset.Root\n className={cn(\n \"flex flex-col gap-4 rounded-lg border border-sf-line p-4\",\n className\n )}\n >\n <Fieldset.Legend className=\"text-lg font-medium text-sf-default\">\n {legend}\n </Fieldset.Legend>\n <div\n className={cn(\n \"flex gap-2\",\n orientation === \"vertical\" ? \"flex-col\" : \"flex-row flex-wrap\"\n )}\n >\n {children}\n </div>\n {error && <p className=\"text-sm text-sf-danger\">{error}</p>}\n {description && (\n <p className=\"text-sm text-sf-subtle\">{description}</p>\n )}\n </Fieldset.Root>\n </BaseRadioGroup>\n </RadioGroupContext.Provider>\n );\n}\n\nRadioGroup.displayName = \"Radio.Group\";\n\n// Export RadioGroup directly for external usage\nexport { RadioGroup };\n\n/**\n * Radio — radio button group for single-select choices.\n *\n * Compound component: `Radio.Group` (with built-in Fieldset) and `Radio.Item`.\n * Built on `@base-ui/react/radio-group` + `@base-ui/react/radio`.\n *\n * @example\n * ```tsx\n * <Radio.Group legend=\"Notification preference\" defaultValue=\"email\">\n * <Radio.Item label=\"Email\" value=\"email\" />\n * <Radio.Item label=\"SMS\" value=\"sms\" />\n * <Radio.Item label=\"Push\" value=\"push\" />\n * </Radio.Group>\n * ```\n */\nexport const Radio = {\n Item: RadioItem,\n Group: RadioGroup,\n};\n"],"mappings":";;;;;;;;;AAQA,IAAa,oBAAoB,EAC/B,SAAS;CACP,SAAS;EACP,SAAS;EACT,aAAa;EACd;CACD,OAAO;EACL,SAAS;EACT,aAAa;EACd;CACF,EACF;AAED,IAAa,4BAA4B,EACvC,SAAS,WACV;AAeD,SAAgB,cAAc,EAC5B,UAAU,0BAA0B,YACZ,EAAE,EAAE;AAC5B,QAAO,GAAG,kBAAkB,QAAQ,SAAS,QAAQ;;AAUvD,IAAM,oBAAoB,cAEvB,EACD,iBAAiB,SAClB,CAAC;AAgHF,IAAM,YAAY,YACf,EAAE,WAAW,UAAU,UAAU,WAAW,OAAO,SAAS,QAAQ;CACnE,MAAM,EAAE,oBAAoB,WAAW,kBAAkB;AAEzD,QACE,qBAAC,SAAD;EACE,WAAW,GACT,iDAGA,oBAAoB,SAAS,gCAC7B,WAAW,kCAAkC,kBAC7C,UACD;YARH,CAUE,oBAAC,MAAU,MAAX;GACO;GACE;GACG;GACV,WAAW,GACT,kFACA,YAAY,UAAU,mBAAmB,gBACzC,CAAC,YACC,sFACF,8BACD;aAED,oBAAC,MAAU,WAAX;IAAqB,WAAU;cAC7B,oBAAC,QAAD,EAAM,WAAU,mCAAoC,CAAA;IAChC,CAAA;GACP,CAAA,EACjB,oBAAC,QAAD;GAAM,WAAU;aAAyC;GAAa,CAAA,CAChE;;EAGb;AAED,UAAU,cAAc;AAGxB,SAAS,aAAW,EAClB,QACA,UACA,cAAc,YACd,OACA,aACA,cACA,OACA,eACA,UACA,kBAAkB,SAClB,MACA,aACkB;AAClB,QACE,oBAAC,kBAAkB,UAAnB;EAA4B,OAAO,EAAE,iBAAiB;YACpD,oBAAC,YAAD;GACgB;GACP;GACP,gBAAgB,aAAa,gBAAgB,SAAmB;GACtD;GACJ;aAEN,qBAAC,SAAS,MAAV;IACE,WAAW,GACT,4DACA,UACD;cAJH;KAME,oBAAC,SAAS,QAAV;MAAiB,WAAU;gBACxB;MACe,CAAA;KAClB,oBAAC,OAAD;MACE,WAAW,GACT,cACA,gBAAgB,aAAa,aAAa,qBAC3C;MAEA;MACG,CAAA;KACL,SAAS,oBAAC,KAAD;MAAG,WAAU;gBAA0B;MAAU,CAAA;KAC1D,eACC,oBAAC,KAAD;MAAG,WAAU;gBAA0B;MAAgB,CAAA;KAE3C;;GACD,CAAA;EACU,CAAA;;AAIjC,aAAW,cAAc;;;;;;;;;;;;;;;;AAoBzB,IAAa,UAAQ;CACnB,MAAM;CACN,OAAO;CACR"}

package/dist/select-9p721G00.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"select-9p721G00.js","names":[],"sources":["../src/components/select/select.tsx"],"sourcesContent":["import { Select as SelectBase } from \"@base-ui/react/select\";\nimport { CaretUpDownIcon, CheckIcon } from \"@phosphor-icons/react\";\nimport { useId } from \"react\";\nimport type { ReactNode } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { buttonVariants } from \"../button\";\nimport { Field, type FieldErrorMatch } from \"../field/field\";\nimport { SkeletonLine } from \"../loader\";\n\n/** Select variant definitions (currently empty, reserved for future additions). */\nexport const SF_SELECT_VARIANTS = {\n // Select currently has no variant options but structure is ready for future additions\n} as const;\n\nexport const SF_SELECT_DEFAULT_VARIANTS = {} as const;\n\n/**\n * Select component styling metadata for Figma plugin code generation\n * Extracted from select.tsx implementation (source of truth)\n */\nexport const SF_SELECT_STYLING = {\n trigger: {\n height: 36, // h-9\n paddingX: 12, // px-3\n borderRadius: 8, // rounded-lg\n background: \"color-secondary\",\n text: \"text-color-surface\",\n ring: \"color-border\",\n fontSize: 16, // text-base\n fontWeight: 400, // font-normal\n },\n stateTokens: {\n focus: { ring: \"color-active\" },\n disabled: { opacity: 0.5 },\n },\n icons: {\n caret: { name: \"ph-caret-up-down\", size: 20 },\n check: { name: \"ph-check\", size: 20 },\n },\n popup: {\n background: \"color-secondary\",\n ring: \"color-border\",\n borderRadius: 8, // rounded-lg\n padding: 6, // p-1.5\n },\n option: {\n paddingX: 8, // px-2\n paddingY: 6, // py-1.5\n borderRadius: 4, // rounded\n fontSize: 16, // text-base\n highlightBackground: \"color-surface-secondary\",\n },\n} as const;\n\n// Derived types from SF_SELECT_VARIANTS\nexport interface SFSelectVariantsProps {}\n\nexport function selectVariants(_props: SFSelectVariantsProps = {}) {\n return cn(\n buttonVariants(),\n \"justify-between font-normal\",\n \"outline-none focus:opacity-100 focus-visible:ring-1 focus-visible:ring-sf-ring *:in-focus:opacity-100\"\n );\n}\n\ntype SelectPropsGeneric<\n T,\n Multiple extends boolean | undefined = false,\n> = SelectBase.Root.Props<T, Multiple> &\n SFSelectVariantsProps & {\n multiple?: Multiple;\n renderValue?: (value: Multiple extends true ? T[] : T) => ReactNode;\n className?: string;\n /** Label content for the select (enables Field wrapper) - can be a string or any React node */\n label?: ReactNode;\n /** Visually hide the label (sr-only). Set to `false` for a visible label. @default true */\n hideLabel?: boolean;\n placeholder?: string;\n loading?: boolean;\n /** Tooltip content to display next to the label via an info icon */\n labelTooltip?: ReactNode;\n /** Helper text displayed below the select */\n description?: ReactNode;\n /** Error message or validation error object */\n error?: string | { message: ReactNode; match: FieldErrorMatch };\n };\n\n/**\n * Select component props.\n *\n * @example\n * ```tsx\n * <Select label=\"Country\" onValueChange={setValue}>\n * <Select.Option value=\"us\">United States</Select.Option>\n * <Select.Option value=\"uk\">United Kingdom</Select.Option>\n * </Select>\n * ```\n */\nexport interface SelectProps {\n /** Additional CSS classes merged via `cn()`. */\n className?: string;\n /** Label content for the select (enables Field wrapper) — can be a string or any React node. */\n label?: ReactNode;\n /**\n * Visually hide the label while keeping it accessible to screen readers.\n * Set to `false` to show a visible label above the select via the Field wrapper.\n * @default true\n */\n hideLabel?: boolean;\n /** Placeholder text shown when no value is selected. */\n placeholder?: string;\n /** When `true`, shows a skeleton loader in place of the selected value. */\n loading?: boolean;\n /** Whether the select is disabled. */\n disabled?: boolean;\n /** Whether the select is required. When `false`, shows \"(optional)\" text. */\n required?: boolean;\n /** Tooltip content displayed next to the label via an info icon. */\n labelTooltip?: ReactNode;\n /** Currently selected value (controlled mode). */\n value?: unknown;\n /** Initial value for uncontrolled mode. */\n defaultValue?: unknown;\n /** Callback fired when the selected value changes. */\n onValueChange?: (value: unknown) => void;\n /** Enable multi-select mode. */\n multiple?: boolean;\n /** `Select.Option` elements to render in the dropdown. */\n children?: ReactNode;\n /** Helper text displayed below the select. */\n description?: ReactNode;\n /** Error message string or validation error object with `match` key. */\n error?: string | { message: ReactNode; match: FieldErrorMatch };\n}\n\n/**\n * Dropdown for selecting a value from a list of options.\n * Wraps Base UI Select with SF styling and optional Field integration.\n *\n * @example\n * ```tsx\n * <Select label=\"Fruit\" onValueChange={setFruit}>\n * <Select.Option value=\"apple\">Apple</Select.Option>\n * <Select.Option value=\"banana\">Banana</Select.Option>\n * </Select>\n * ```\n */\nexport function Select<T, Multiple extends boolean | undefined = false>({\n children,\n className,\n renderValue,\n label,\n hideLabel = true,\n placeholder,\n loading,\n labelTooltip,\n description,\n error,\n required,\n ...props\n}: SelectPropsGeneric<T, Multiple> & { required?: boolean }) {\n const labelId = useId();\n const propLookup = props as Record<string, unknown>;\n const ariaLabel = propLookup[\"aria-label\"] as string | undefined;\n const ariaLabelledby = propLookup[\"aria-labelledby\"] as string | undefined;\n // For aria-label, use string label or placeholder (ReactNode labels can't be used for aria-label)\n const fallbackLabel = typeof label === \"string\" ? label : placeholder;\n\n // Use Field wrapper when label is provided and not hidden\n const useFieldWrapper = label && !hideLabel;\n const triggerLabelledBy = useFieldWrapper\n ? undefined\n : (ariaLabelledby ?? (label ? labelId : undefined));\n const triggerAriaLabel =\n ariaLabel ?? (!triggerLabelledBy ? fallbackLabel : undefined);\n\n // Placeholder must be provide via the items props\n // We need to fake the items or do some transformation\n let items = props.items;\n if (placeholder) {\n if (!items) {\n items = [\n {\n value: null as T,\n label: placeholder,\n },\n ];\n } else if (typeof items === \"object\") {\n items = [\n {\n value: null as T,\n label: placeholder,\n },\n ...Object.entries(items).map(([key, value]) => ({\n value: key as T,\n label: value,\n })),\n ];\n } else if (Array.isArray(items)) {\n items = [\n {\n value: null as T,\n label: placeholder,\n },\n ...items,\n ];\n }\n }\n\n const selectControl = (\n <SelectBase.Root\n {...props}\n items={items}\n disabled={loading || props.disabled}\n >\n <SelectBase.Trigger\n className={cn(\n buttonVariants(),\n \"justify-between font-normal\",\n \"outline-none focus:opacity-100 focus-visible:ring-1 focus-visible:ring-sf-ring *:in-focus:opacity-100\",\n props.disabled && \"cursor-not-allowed opacity-50\",\n className\n )}\n aria-label={triggerAriaLabel}\n aria-labelledby={triggerLabelledBy}\n >\n {loading ? (\n <SkeletonLine className=\"w-32\" />\n ) : (\n <SelectBase.Value>{renderValue}</SelectBase.Value>\n )}\n <SelectBase.Icon className=\"flex items-center\">\n <CaretUpDownIcon />\n </SelectBase.Icon>\n </SelectBase.Trigger>\n <SelectBase.Portal>\n <SelectBase.Positioner>\n <SelectBase.Popup\n className={cn(\n \"overflow-hidden bg-sf-control text-sf-default\", // background\n \"rounded-lg shadow-lg ring ring-sf-line\", // border part\n // 3px adjustment to account for padding + border differences\n \"min-w-[calc(var(--anchor-width)+3px)] p-1.5\" // spacing\n )}\n >\n {children}\n </SelectBase.Popup>\n </SelectBase.Positioner>\n </SelectBase.Portal>\n </SelectBase.Root>\n );\n\n // Use Field wrapper when label is provided and not hidden\n if (useFieldWrapper) {\n return (\n <Field\n label={label}\n required={required}\n labelTooltip={labelTooltip}\n description={description}\n error={\n error\n ? typeof error === \"string\"\n ? { message: error, match: true }\n : error\n : undefined\n }\n >\n {selectControl}\n </Field>\n );\n }\n\n // Render with standalone label when label is hidden (sr-only)\n return (\n <>\n {label && (\n <span id={labelId} className=\"sr-only\">\n {label}\n </span>\n )}\n {selectControl}\n </>\n );\n}\n\ntype OptionProps<T> = {\n children: ReactNode;\n value: T;\n};\n\nfunction Option<T>({ children, value }: OptionProps<T>) {\n return (\n <SelectBase.Item\n value={value}\n className=\"group flex cursor-pointer items-center justify-between gap-2 rounded px-2 py-1.5 text-base data-highlighted:bg-sf-overlay\"\n >\n <SelectBase.ItemText>{children}</SelectBase.ItemText>\n <SelectBase.ItemIndicator>\n <CheckIcon />\n </SelectBase.ItemIndicator>\n </SelectBase.Item>\n );\n}\n\nSelect.Option = Option;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAoJA,SAAgB,SAAwD,EACtE,UACA,WACA,aACA,OACA,YAAY,MACZ,aACA,SACA,cACA,aACA,OACA,UACA,GAAG,SACwD;CAC3D,MAAM,UAAU,OAAO;CACvB,MAAM,aAAa;CACnB,MAAM,YAAY,WAAW;CAC7B,MAAM,iBAAiB,WAAW;CAElC,MAAM,gBAAgB,OAAO,UAAU,WAAW,QAAQ;CAG1D,MAAM,kBAAkB,SAAS,CAAC;CAClC,MAAM,oBAAoB,kBACtB,KAAA,IACC,mBAAmB,QAAQ,UAAU,KAAA;CAC1C,MAAM,mBACJ,cAAc,CAAC,oBAAoB,gBAAgB,KAAA;CAIrD,IAAI,QAAQ,MAAM;AAClB,KAAI;MACE,CAAC,MACH,SAAQ,CACN;GACE,OAAO;GACP,OAAO;GACR,CACF;WACQ,OAAO,UAAU,SAC1B,SAAQ,CACN;GACE,OAAO;GACP,OAAO;GACR,EACD,GAAG,OAAO,QAAQ,MAAM,CAAC,KAAK,CAAC,KAAK,YAAY;GAC9C,OAAO;GACP,OAAO;GACR,EAAE,CACJ;WACQ,MAAM,QAAQ,MAAM,CAC7B,SAAQ,CACN;GACE,OAAO;GACP,OAAO;GACR,EACD,GAAG,MACJ;;CAIL,MAAM,gBACJ,qBAAC,OAAW,MAAZ;EACE,GAAI;EACG;EACP,UAAU,WAAW,MAAM;YAH7B,CAKE,qBAAC,OAAW,SAAZ;GACE,WAAW,GACT,gBAAgB,EAChB,+BACA,yGACA,MAAM,YAAY,iCAClB,UACD;GACD,cAAY;GACZ,mBAAiB;aATnB,CAWG,UACC,oBAAC,cAAD,EAAc,WAAU,QAAS,CAAA,GAEjC,oBAAC,OAAW,OAAZ,EAAA,UAAmB,aAA+B,CAAA,EAEpD,oBAAC,OAAW,MAAZ;IAAiB,WAAU;cACzB,oBAAC,iBAAD,EAAmB,CAAA;IACH,CAAA,CACC;MACrB,oBAAC,OAAW,QAAZ,EAAA,UACE,oBAAC,OAAW,YAAZ,EAAA,UACE,oBAAC,OAAW,OAAZ;GACE,WAAW,GACT,iDACA,0CAEA,8CACD;GAEA;GACgB,CAAA,EACG,CAAA,EACN,CAAA,CACJ;;AAIpB,KAAI,gBACF,QACE,oBAAC,OAAD;EACS;EACG;EACI;EACD;EACb,OACE,QACI,OAAO,UAAU,WACf;GAAE,SAAS;GAAO,OAAO;GAAM,GAC/B,QACF,KAAA;YAGL;EACK,CAAA;AAKZ,QACE,qBAAA,YAAA,EAAA,UAAA,CACG,SACC,oBAAC,QAAD;EAAM,IAAI;EAAS,WAAU;YAC1B;EACI,CAAA,EAER,cACA,EAAA,CAAA;;AASP,SAAS,OAAU,EAAE,UAAU,SAAyB;AACtD,QACE,qBAAC,OAAW,MAAZ;EACS;EACP,WAAU;YAFZ,CAIE,oBAAC,OAAW,UAAZ,EAAsB,UAA+B,CAAA,EACrD,oBAAC,OAAW,eAAZ,EAAA,UACE,oBAAC,WAAD,EAAa,CAAA,EACY,CAAA,CACX;;;AAItB,SAAO,SAAS"}

package/dist/sidebar-DOwBrq57.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"sidebar-DOwBrq57.js","names":[],"sources":["../src/components/sidebar/sidebar.tsx"],"sourcesContent":["import { Collapsible as CollapsibleBase } from \"@base-ui/react/collapsible\";\nimport { Dialog as DialogBase } from \"@base-ui/react/dialog\";\nimport {\n CaretRightIcon,\n MagnifyingGlassIcon,\n SidebarSimpleIcon,\n} from \"@phosphor-icons/react\";\nimport React, {\n type ComponentPropsWithoutRef,\n type CSSProperties,\n type ReactNode,\n createContext,\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { useLinkComponent } from \"../../utils/link-provider\";\nimport { Tooltip, TooltipProvider } from \"../tooltip\";\n\n// ============================================================================\n// Variants (required by SF convention)\n// ============================================================================\n\n/** Sidebar variant definitions mapping layout, collapse, and side options. */\nexport const SF_SIDEBAR_VARIANTS = {\n variant: {\n sidebar: {\n classes: \"\",\n description: \"Standard sidebar with border separator\",\n },\n floating: {\n classes: \"\",\n description: \"Floating sidebar with shadow and rounded corners\",\n },\n inset: {\n classes: \"\",\n description: \"Inset sidebar within the content area\",\n },\n },\n collapsible: {\n icon: {\n classes: \"\",\n description: \"Collapses to show icons only\",\n },\n offcanvas: {\n classes: \"\",\n description: \"Slides off screen when collapsed\",\n },\n none: {\n classes: \"\",\n description: \"Cannot be collapsed\",\n },\n },\n side: {\n left: {\n classes: \"\",\n description: \"Left-aligned sidebar\",\n },\n right: {\n classes: \"\",\n description: \"Right-aligned sidebar\",\n },\n },\n} as const;\n\nexport const SF_SIDEBAR_DEFAULT_VARIANTS = {\n variant: \"sidebar\",\n collapsible: \"icon\",\n side: \"left\",\n} as const;\n\nexport const SF_SIDEBAR_STYLING = {\n width: {\n expanded: \"16rem\",\n icon: \"3rem\",\n },\n mobile: {\n breakpoint: 768,\n },\n} as const;\n\nexport type SidebarSide = \"left\" | \"right\";\nexport type SidebarVariant = \"sidebar\" | \"floating\" | \"inset\";\nexport type SidebarCollapsible = \"icon\" | \"offcanvas\" | \"none\";\n\n// ============================================================================\n// Constants\n// ============================================================================\n\nconst SIDEBAR_WIDTH = \"16rem\";\nconst SIDEBAR_WIDTH_ICON = \"3rem\";\nconst MOBILE_BREAKPOINT = 768;\n\n// ============================================================================\n// Mobile detection hook\n// ============================================================================\n\nfunction useIsMobile() {\n const [isMobile, setIsMobile] = useState(false);\n\n useEffect(() => {\n const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\n const onChange = () => setIsMobile(mql.matches);\n mql.addEventListener(\"change\", onChange);\n setIsMobile(mql.matches);\n return () => mql.removeEventListener(\"change\", onChange);\n }, []);\n\n return isMobile;\n}\n\n// ============================================================================\n// Context\n// ============================================================================\n\nexport interface SidebarContextValue {\n state: \"expanded\" | \"collapsed\";\n open: boolean;\n setOpen: (open: boolean) => void;\n openMobile: boolean;\n setOpenMobile: (open: boolean) => void;\n isMobile: boolean;\n toggleSidebar: () => void;\n variant: \"sidebar\" | \"floating\" | \"inset\";\n side: \"left\" | \"right\";\n collapsible: \"icon\" | \"offcanvas\" | \"none\";\n width: number;\n resizable: boolean;\n minWidth: number;\n maxWidth: number;\n isResizing: boolean;\n setIsResizing: (resizing: boolean) => void;\n setWidth: (width: number) => void;\n}\n\nconst SidebarContext = createContext<SidebarContextValue | null>(null);\n\n/**\n * Hook to access sidebar state and actions from any descendant component.\n *\n * @example\n * ```tsx\n * const { state, open, toggleSidebar, isMobile } = useSidebar();\n * ```\n *\n * @throws Error if used outside a `Sidebar.Provider`.\n */\nexport function useSidebar() {\n const context = useContext(SidebarContext);\n if (!context) {\n throw new Error(\"useSidebar must be used within a Sidebar.Provider\");\n }\n return context;\n}\n\n// ============================================================================\n// Provider\n// ============================================================================\n\nexport interface SidebarProviderProps {\n /** Initial open state when uncontrolled. @default true */\n defaultOpen?: boolean;\n /** Controlled open state. */\n open?: boolean;\n /** Callback when open state changes (controlled mode). */\n onOpenChange?: (open: boolean) => void;\n /** Sidebar layout variant. @default \"sidebar\" */\n variant?: SidebarVariant;\n /** Which side the sidebar is on. @default \"left\" */\n side?: SidebarSide;\n collapsible?: \"icon\" | \"offcanvas\" | \"none\";\n /** Enable drag-to-resize on the sidebar edge. @default false */\n resizable?: boolean;\n /** Initial width in pixels when resizable. @default 256 */\n defaultWidth?: number;\n /** Minimum width in pixels when resizing. @default 200 */\n minWidth?: number;\n /** Maximum width in pixels when resizing. @default 480 */\n maxWidth?: number;\n /** Callback when width changes during resize. */\n onWidthChange?: (width: number) => void;\n /** Content — typically `<Sidebar>` + main content. */\n children: ReactNode;\n /** Additional CSS classes for the wrapper div. */\n className?: string;\n /** Inline styles for the wrapper div. */\n style?: CSSProperties;\n}\n\n/**\n * Sidebar context provider. Manages expand/collapse state and mobile detection.\n * Renders a flex wrapper div with CSS custom properties for sidebar width.\n *\n * @example\n * ```tsx\n * <Sidebar.Provider defaultOpen>\n * <Sidebar>{...}</Sidebar>\n * <main className=\"flex-1\">{...}</main>\n * </Sidebar.Provider>\n * ```\n */\nconst DEFAULT_WIDTH_PX = 256;\nconst MIN_WIDTH_PX = 200;\nconst MAX_WIDTH_PX = 480;\n\nfunction SidebarProvider({\n defaultOpen = true,\n open: openProp,\n onOpenChange: setOpenProp,\n variant = SF_SIDEBAR_DEFAULT_VARIANTS.variant,\n side = SF_SIDEBAR_DEFAULT_VARIANTS.side,\n collapsible = SF_SIDEBAR_DEFAULT_VARIANTS.collapsible,\n resizable = false,\n defaultWidth = DEFAULT_WIDTH_PX,\n minWidth = MIN_WIDTH_PX,\n maxWidth = MAX_WIDTH_PX,\n onWidthChange,\n children,\n className,\n style,\n}: SidebarProviderProps) {\n const isMobile = useIsMobile();\n const [openMobile, setOpenMobile] = useState(false);\n const [width, setWidthState] = useState(defaultWidth);\n const [isResizing, setIsResizing] = useState(false);\n\n const setWidth = useCallback(\n (newWidth: number) => {\n const clamped = Math.min(maxWidth, Math.max(minWidth, newWidth));\n setWidthState(clamped);\n onWidthChange?.(clamped);\n },\n [minWidth, maxWidth, onWidthChange]\n );\n\n const [_open, _setOpen] = useState(defaultOpen);\n const open = openProp ?? _open;\n const setOpen = useCallback(\n (value: boolean | ((prev: boolean) => boolean)) => {\n const next = typeof value === \"function\" ? value(open) : value;\n setOpenProp?.(next);\n _setOpen(next);\n },\n [setOpenProp, open]\n );\n\n const toggleSidebar = useCallback(() => {\n if (isMobile) {\n setOpenMobile((prev) => !prev);\n } else {\n setOpen((prev: boolean) => !prev);\n }\n }, [isMobile, setOpen]);\n\n const state = open ? \"expanded\" : \"collapsed\";\n\n const sidebarWidthValue = resizable ? `${width}px` : SIDEBAR_WIDTH;\n\n const contextValue = useMemo<SidebarContextValue>(\n () => ({\n state,\n open,\n setOpen,\n openMobile,\n setOpenMobile,\n isMobile,\n toggleSidebar,\n variant,\n side,\n collapsible,\n width,\n resizable,\n minWidth,\n maxWidth,\n isResizing,\n setIsResizing,\n setWidth,\n }),\n [\n state,\n open,\n setOpen,\n openMobile,\n setOpenMobile,\n isMobile,\n toggleSidebar,\n variant,\n side,\n collapsible,\n width,\n resizable,\n minWidth,\n maxWidth,\n isResizing,\n setIsResizing,\n setWidth,\n ]\n );\n\n return (\n <SidebarContext.Provider value={contextValue}>\n <div\n data-sidebar-wrapper=\"\"\n data-state={state}\n data-side={side}\n style={\n {\n \"--sidebar-width\": sidebarWidthValue,\n \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n ...style,\n } as CSSProperties\n }\n className={cn(\n \"group/sidebar-wrapper flex min-h-svh w-full\",\n \"has-data-[variant=inset]:bg-sf-recessed\",\n isResizing && \"select-none\",\n className\n )}\n >\n {children}\n </div>\n </SidebarContext.Provider>\n );\n}\n\nSidebarProvider.displayName = \"Sidebar.Provider\";\n\n// ============================================================================\n// Sidebar Root\n// ============================================================================\n\nexport interface SidebarRootProps extends ComponentPropsWithoutRef<\"aside\"> {\n /** Additional CSS classes for the sidebar element. */\n className?: string;\n /** Sidebar content — Header, Content, Footer, etc. */\n children: ReactNode;\n}\n\n/**\n * Main sidebar container. Renders as `<aside>` on desktop, Dialog sheet on mobile.\n * Must be used inside `Sidebar.Provider`.\n *\n * @example\n * ```tsx\n * <Sidebar.Provider>\n * <Sidebar>\n * <Sidebar.Header>...</Sidebar.Header>\n * <Sidebar.Content>...</Sidebar.Content>\n * <Sidebar.Footer>...</Sidebar.Footer>\n * </Sidebar>\n * </Sidebar.Provider>\n * ```\n */\nconst SidebarRoot = forwardRef<HTMLElement, SidebarRootProps>(\n ({ className, children, ...props }, ref) => {\n const {\n state,\n isMobile,\n openMobile,\n setOpenMobile,\n side,\n variant,\n collapsible,\n isResizing,\n resizable,\n width,\n } = useSidebar();\n\n if (collapsible === \"none\") {\n return (\n <aside\n ref={ref}\n data-state=\"expanded\"\n data-side={side}\n data-variant={variant}\n data-sidebar=\"sidebar\"\n style={{\n width: \"var(--sidebar-width)\",\n minWidth: \"var(--sidebar-width)\",\n maxWidth: \"var(--sidebar-width)\",\n }}\n className={cn(\n \"relative flex h-full shrink-0 grow-0 flex-col overflow-hidden bg-sf-base text-sf-default\",\n variant === \"sidebar\" &&\n (side === \"left\"\n ? \"border-r border-sf-line\"\n : \"border-l border-sf-line\"),\n variant === \"floating\" &&\n \"m-2 rounded-lg border border-sf-line shadow-lg\",\n className\n )}\n {...props}\n >\n {children}\n </aside>\n );\n }\n\n if (isMobile) {\n return (\n <DialogBase.Root open={openMobile} onOpenChange={setOpenMobile}>\n <DialogBase.Portal>\n <DialogBase.Backdrop className=\"fixed inset-0 z-50 bg-black/50 transition-opacity duration-200 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0\" />\n <DialogBase.Popup\n className={cn(\n \"fixed inset-y-0 z-50 flex w-[--sidebar-width] flex-col bg-sf-base p-0\",\n \"duration-200 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0\",\n side === \"left\" &&\n \"left-0 data-[ending-style]:-translate-x-full data-[starting-style]:-translate-x-full\",\n side === \"right\" &&\n \"right-0 data-[ending-style]:translate-x-full data-[starting-style]:translate-x-full\"\n )}\n style={\n {\n \"--sidebar-width\": SIDEBAR_WIDTH,\n transitionProperty: \"transform, opacity\",\n transitionTimingFunction:\n \"var(--default-transition-timing-function)\",\n } as CSSProperties\n }\n >\n <div\n data-sidebar=\"sidebar\"\n data-mobile=\"true\"\n className={cn(\n \"flex h-full w-full flex-col bg-sf-base text-sf-default\",\n className\n )}\n >\n {children}\n </div>\n </DialogBase.Popup>\n </DialogBase.Portal>\n </DialogBase.Root>\n );\n }\n\n // Resolve the target width from CSS variables or literal values\n const collapsedWidth =\n collapsible === \"icon\" ? \"var(--sidebar-width-icon)\" : \"0px\";\n const expandedWidth = resizable ? `${width}px` : \"var(--sidebar-width)\";\n const targetWidth = state === \"expanded\" ? expandedWidth : collapsedWidth;\n\n return (\n <aside\n ref={ref}\n data-state={state}\n data-side={side}\n data-variant={variant}\n data-collapsible={collapsible}\n data-sidebar=\"sidebar\"\n style={{ width: targetWidth }}\n className={cn(\n \"group/sidebar relative flex h-full shrink-0 grow-0 flex-col\",\n // overflow-hidden makes flex min-width resolve to 0 (per spec),\n // preventing children from pushing the sidebar wider than its width\n \"min-w-0 overflow-hidden whitespace-nowrap\",\n \"bg-sf-base text-sf-default\",\n // Transition width — matches production SidebarNav curve exactly\n \"transition-[width] duration-250 ease-[cubic-bezier(0.77,0,0.175,1)] will-change-[width]\",\n \"motion-reduce:transition-none\",\n // Disable transition during resize drag\n isResizing && \"transition-none!\",\n variant === \"sidebar\" &&\n (side === \"left\"\n ? \"border-r border-sf-line\"\n : \"border-l border-sf-line\"),\n variant === \"floating\" &&\n \"m-2 rounded-lg border border-sf-line shadow-lg\",\n className\n )}\n {...props}\n >\n {/* TooltipProvider groups all collapsed-state tooltips so hovering\n between icons shows tooltips instantly (no repeated delay). */}\n <TooltipProvider>{children}</TooltipProvider>\n </aside>\n );\n }\n);\n\nSidebarRoot.displayName = \"Sidebar\";\n\n// ============================================================================\n// Sidebar Header\n// ============================================================================\n\n/**\n * Top section of the sidebar. Typically contains a logo, title, and action button.\n *\n * @example\n * ```tsx\n * <Sidebar.Header>\n * <CloudflareLogo />\n * <span>Design Engineering</span>\n * <Button shape=\"square\" icon={CaretUpDownIcon} aria-label=\"Switch\" />\n * </Sidebar.Header>\n * ```\n */\nconst SidebarHeader = forwardRef<\n HTMLDivElement,\n ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n data-sidebar=\"header\"\n className={cn(\n \"flex items-center gap-2 border-b border-sf-line px-2 py-3\",\n \"overflow-hidden\",\n // Collapsed: just remove border, keep same height\n \"group-data-[state=collapsed]/sidebar:border-b-0\",\n className\n )}\n {...props}\n />\n));\n\nSidebarHeader.displayName = \"Sidebar.Header\";\n\n// ============================================================================\n// Sidebar Content\n// ============================================================================\n\n/**\n * Scrollable middle section of the sidebar. Contains nav groups and menus.\n *\n * @example\n * ```tsx\n * <Sidebar.Content>\n * <Sidebar.Group>...</Sidebar.Group>\n * </Sidebar.Content>\n * ```\n */\nconst SidebarContent = forwardRef<\n HTMLDivElement,\n ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n data-sidebar=\"content\"\n className={cn(\n \"flex min-w-0 flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden px-2 py-2\",\n // Collapsed: flatten spacing so icons are evenly spaced\n \"group-data-[state=collapsed]/sidebar:gap-0 group-data-[state=collapsed]/sidebar:py-0\",\n \"group-data-[state=collapsed]/sidebar:overflow-x-hidden\",\n className\n )}\n {...props}\n />\n));\n\nSidebarContent.displayName = \"Sidebar.Content\";\n\n// ============================================================================\n// Sidebar Footer\n// ============================================================================\n\n/**\n * Bottom-pinned section of the sidebar. Typically contains toggle button and help actions.\n *\n * @example\n * ```tsx\n * <Sidebar.Footer>\n * <Sidebar.Trigger />\n * <Button shape=\"square\" icon={InfoIcon} aria-label=\"Help\" />\n * </Sidebar.Footer>\n * ```\n */\nconst SidebarFooter = forwardRef<\n HTMLDivElement,\n ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n data-sidebar=\"footer\"\n className={cn(\n \"flex min-w-0 flex-col gap-2 border-t border-sf-line px-2 py-2\",\n // Collapsed: remove border, tighten padding\n \"group-data-[state=collapsed]/sidebar:border-t-0 group-data-[state=collapsed]/sidebar:py-1\",\n className\n )}\n {...props}\n />\n));\n\nSidebarFooter.displayName = \"Sidebar.Footer\";\n\n// ============================================================================\n// Sidebar Group\n// ============================================================================\n\n/** Context to signal children they're inside a collapsible group and provide open state. */\ninterface SidebarGroupCollapsibleContextValue {\n isCollapsible: boolean;\n isOpen: boolean;\n}\nconst SidebarGroupCollapsibleContext =\n createContext<SidebarGroupCollapsibleContextValue>({\n isCollapsible: false,\n isOpen: true,\n });\n\nexport interface SidebarGroupProps extends ComponentPropsWithoutRef<\"div\"> {\n /** When true, the group can be expanded/collapsed via its label. @default false */\n collapsible?: boolean;\n /** Initial open state when collapsible and uncontrolled. @default true */\n defaultOpen?: boolean;\n /** Controlled open state (collapsible mode only). */\n open?: boolean;\n /** Callback when open state changes (collapsible mode only). */\n onOpenChange?: (open: boolean) => void;\n}\n\n/**\n * Groups related menu items with an optional label.\n * When `collapsible` is set, wraps content with Base UI Collapsible for\n * animated expand/collapse via the group label.\n *\n * @example Non-collapsible group\n * ```tsx\n * <Sidebar.Group>\n * <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>\n * <Sidebar.Menu>...</Sidebar.Menu>\n * </Sidebar.Group>\n * ```\n *\n * @example Collapsible group (requires GroupContent for animation)\n * ```tsx\n * <Sidebar.Group collapsible defaultOpen>\n * <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>\n * <Sidebar.GroupContent>\n * <Sidebar.Menu>...</Sidebar.Menu>\n * </Sidebar.GroupContent>\n * </Sidebar.Group>\n * ```\n */\nconst SidebarGroup = forwardRef<HTMLDivElement, SidebarGroupProps>(\n (\n {\n className,\n collapsible = false,\n defaultOpen = true,\n open: openProp,\n onOpenChange,\n children,\n ...props\n },\n ref\n ) => {\n // Track internal open state for uncontrolled mode\n const [internalOpen, setInternalOpen] = useState(defaultOpen);\n const isOpen = openProp ?? internalOpen;\n\n const handleOpenChange = useCallback(\n (newOpen: boolean) => {\n setInternalOpen(newOpen);\n onOpenChange?.(newOpen);\n },\n [onOpenChange]\n );\n\n const contextValue = useMemo(\n () => ({ isCollapsible: collapsible, isOpen }),\n [collapsible, isOpen]\n );\n\n const content = (\n <div\n ref={ref}\n data-sidebar=\"group\"\n className={cn(\n \"flex min-w-0 flex-col gap-0.5\",\n // Collapsed: remove internal gap so icons stack uniformly\n \"group-data-[state=collapsed]/sidebar:gap-0\",\n className\n )}\n {...props}\n >\n {children}\n </div>\n );\n\n if (!collapsible) {\n return (\n <SidebarGroupCollapsibleContext.Provider value={contextValue}>\n {content}\n </SidebarGroupCollapsibleContext.Provider>\n );\n }\n\n return (\n <SidebarGroupCollapsibleContext.Provider value={contextValue}>\n <CollapsibleBase.Root\n defaultOpen={defaultOpen}\n open={openProp}\n onOpenChange={handleOpenChange}\n className=\"min-w-0\"\n >\n {content}\n </CollapsibleBase.Root>\n </SidebarGroupCollapsibleContext.Provider>\n );\n }\n);\n\nSidebarGroup.displayName = \"Sidebar.Group\";\n\n// ============================================================================\n// Sidebar GroupLabel\n// ============================================================================\n\n/**\n * Section label for a sidebar group (e.g., \"Build\", \"Protect & Connect\").\n * Hidden when the sidebar is collapsed to icon-only mode.\n *\n * When used inside a collapsible `Sidebar.Group`, renders as a\n * `Collapsible.Trigger` with an auto-rotating chevron.\n *\n * @example\n * ```tsx\n * <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>\n * ```\n */\nconst SidebarGroupLabel = forwardRef<\n HTMLDivElement,\n ComponentPropsWithoutRef<\"div\">\n>(({ className, children, ...props }, ref) => {\n const { isCollapsible } = useContext(SidebarGroupCollapsibleContext);\n\n if (isCollapsible) {\n return (\n <CollapsibleBase.Trigger\n ref={ref as React.Ref<HTMLButtonElement>}\n data-sidebar=\"group-label\"\n className={cn(\n \"group/group-label flex w-full cursor-pointer items-center px-3 py-1 text-xs font-medium text-sf-subtle\",\n \"group-data-[state=collapsed]/sidebar:hidden\",\n className\n )}\n {...(props as ComponentPropsWithoutRef<\"button\">)}\n >\n <span className=\"flex-1 truncate text-left\">{children}</span>\n <CaretRightIcon\n className={cn(\n \"ml-auto size-3 shrink-0 text-sf-subtle transition-transform duration-200\",\n \"group-data-[panel-open]/group-label:rotate-90\"\n )}\n />\n </CollapsibleBase.Trigger>\n );\n }\n\n return (\n <div\n ref={ref}\n data-sidebar=\"group-label\"\n className={cn(\n \"truncate px-3 py-1 text-xs font-medium text-sf-subtle\",\n \"group-data-[state=collapsed]/sidebar:hidden\",\n className\n )}\n {...props}\n >\n {children}\n </div>\n );\n});\n\nSidebarGroupLabel.displayName = \"Sidebar.GroupLabel\";\n\n// ============================================================================\n// Sidebar GroupContent\n// ============================================================================\n\n/**\n * Animation wrapper for collapsible group content. Uses CSS grid-rows\n * for smooth height transitions when the group is expanded/collapsed.\n *\n * **Only needed for collapsible groups.** For non-collapsible groups,\n * place `Menu` directly inside `Group` — no wrapper required.\n *\n * @example Collapsible group (GroupContent required)\n * ```tsx\n * <Sidebar.Group collapsible defaultOpen>\n * <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>\n * <Sidebar.GroupContent>\n * <Sidebar.Menu>...</Sidebar.Menu>\n * </Sidebar.GroupContent>\n * </Sidebar.Group>\n * ```\n *\n * @example Non-collapsible group (no GroupContent needed)\n * ```tsx\n * <Sidebar.Group>\n * <Sidebar.GroupLabel>Overview</Sidebar.GroupLabel>\n * <Sidebar.Menu>...</Sidebar.Menu>\n * </Sidebar.Group>\n * ```\n */\nconst SidebarGroupContent = forwardRef<\n HTMLDivElement,\n ComponentPropsWithoutRef<\"div\">\n>(({ className, children, ...props }, ref) => {\n const { isCollapsible, isOpen } = useContext(SidebarGroupCollapsibleContext);\n\n if (isCollapsible) {\n return (\n <div\n ref={ref}\n data-sidebar=\"group-content\"\n className={cn(\n \"grid\",\n // Animate height via grid-rows — matches production NavGroup pattern\n \"transition-[grid-template-rows] duration-250 ease-[cubic-bezier(0.77,0,0.175,1)]\",\n \"motion-reduce:transition-none\",\n // Default: collapsed\n \"grid-rows-[0fr]\",\n // When sidebar is expanded, respect group open/close state\n isOpen\n ? \"group-data-[state=expanded]/sidebar:grid-rows-[1fr]\"\n : \"group-data-[state=expanded]/sidebar:grid-rows-[0fr]\",\n className\n )}\n {...props}\n >\n <div className=\"overflow-hidden\">{children}</div>\n </div>\n );\n }\n\n return (\n <div\n ref={ref}\n data-sidebar=\"group-content\"\n className={cn(\"flex flex-col\", className)}\n {...props}\n >\n {children}\n </div>\n );\n});\n\nSidebarGroupContent.displayName = \"Sidebar.GroupContent\";\n\n// ============================================================================\n// MenuItem / MenuSubItem auto-wrap contexts\n// ============================================================================\n\n/**\n * When `true`, indicates the component is already wrapped in a `MenuItem` `<li>`.\n * `MenuButton` checks this: if `false`, it auto-wraps itself in an `<li>`.\n */\nconst MenuItemContext = createContext(false);\n\n/**\n * When `true`, indicates the component is already wrapped in a `MenuSubItem` `<li>`.\n * `MenuSubButton` checks this: if `false`, it auto-wraps itself in an `<li>`.\n */\nconst MenuSubItemContext = createContext(false);\n\n// ============================================================================\n// Sidebar Menu\n// ============================================================================\n\n/**\n * Navigation menu list. Renders as `<ul>`.\n *\n * `MenuButton` auto-wraps in `<li>` so `MenuItem` is optional for simple items.\n *\n * @example Simple usage\n * ```tsx\n * <Sidebar.Menu>\n * <Sidebar.MenuButton icon={HouseIcon} active>Account home</Sidebar.MenuButton>\n * <Sidebar.MenuButton icon={GlobeIcon}>Domains</Sidebar.MenuButton>\n * </Sidebar.Menu>\n * ```\n *\n * @example With explicit MenuItem (needed for MenuAction sibling)\n * ```tsx\n * <Sidebar.Menu>\n * <Sidebar.MenuItem>\n * <Sidebar.MenuButton icon={GearIcon}>Settings</Sidebar.MenuButton>\n * <Sidebar.MenuAction><PencilIcon /></Sidebar.MenuAction>\n * </Sidebar.MenuItem>\n * </Sidebar.Menu>\n * ```\n */\nconst SidebarMenu = forwardRef<\n HTMLUListElement,\n ComponentPropsWithoutRef<\"ul\">\n>(({ className, ...props }, ref) => (\n <ul\n ref={ref}\n data-sidebar=\"menu\"\n className={cn(\n \"m-0 flex min-w-0 list-none flex-col gap-0.5 p-0\",\n \"group-data-[state=collapsed]/sidebar:gap-0\",\n className\n )}\n {...props}\n />\n));\n\nSidebarMenu.displayName = \"Sidebar.Menu\";\n\n// ============================================================================\n// Sidebar MenuItem\n// ============================================================================\n\n/**\n * Individual menu list item. Renders as `<li>`.\n *\n * **Optional when using `MenuButton` directly** — `MenuButton` auto-wraps\n * itself in a `<li>` when not already inside a `MenuItem`. Use `MenuItem`\n * explicitly when you need to place siblings (e.g., `MenuAction`) alongside\n * a `MenuButton`.\n *\n * @example Explicit usage (needed for MenuAction sibling)\n * ```tsx\n * <Sidebar.MenuItem>\n * <Sidebar.MenuButton icon={GearIcon}>Settings</Sidebar.MenuButton>\n * <Sidebar.MenuAction><PencilIcon /></Sidebar.MenuAction>\n * </Sidebar.MenuItem>\n * ```\n */\nconst SidebarMenuItem = forwardRef<\n HTMLLIElement,\n ComponentPropsWithoutRef<\"li\">\n>(({ className, children, ...props }, ref) => (\n <MenuItemContext.Provider value={true}>\n <li\n ref={ref}\n data-sidebar=\"menu-item\"\n className={cn(\"relative\", className)}\n {...props}\n >\n {children}\n </li>\n </MenuItemContext.Provider>\n));\n\nSidebarMenuItem.displayName = \"Sidebar.MenuItem\";\n\n// ============================================================================\n// Sidebar MenuButton\n// ============================================================================\n\nexport type SidebarMenuButtonSize = \"base\" | \"sm\";\n\nexport interface SidebarMenuButtonProps extends Omit<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n \"className\" | \"children\"\n> {\n icon?: React.ComponentType<{ className?: string }> | React.ReactNode;\n active?: boolean;\n /**\n * Button size.\n * - `\"base\"` — Standard nav item\n * - `\"sm\"` — Compact nav item\n * @default \"base\"\n */\n size?: SidebarMenuButtonSize;\n href?: string;\n tooltip?: string;\n className?: string;\n children?: ReactNode;\n}\n\n/**\n * Primary interactive element inside a menu item. Renders as a `<button>` or link.\n * Supports icons, active state, and auto-tooltip when the sidebar is collapsed.\n *\n * **Auto-wraps in `<li>`** when not already inside a `Sidebar.MenuItem`.\n * Use `MenuItem` explicitly only when you need siblings (e.g., `MenuAction`).\n *\n * When used as a `Collapsible.Trigger` via `render` prop, the expand/collapse chevron\n * auto-rotates thanks to Base UI's `data-panel-open` attribute combined with\n * `group/menu-button` CSS grouping.\n *\n * @example Simple usage (auto-wrapped in `<li>`)\n * ```tsx\n * <Sidebar.Menu>\n * <Sidebar.MenuButton icon={GlobeIcon} active>Domains</Sidebar.MenuButton>\n * <Sidebar.MenuButton icon={ClockIcon} href=\"/recents\">Recents</Sidebar.MenuButton>\n * </Sidebar.Menu>\n * ```\n *\n * @example With MenuAction sibling (explicit MenuItem needed)\n * ```tsx\n * <Sidebar.MenuItem>\n * <Sidebar.MenuButton icon={GearIcon}>Settings</Sidebar.MenuButton>\n * <Sidebar.MenuAction><PencilIcon /></Sidebar.MenuAction>\n * </Sidebar.MenuItem>\n * ```\n */\nconst SidebarMenuButton = forwardRef<HTMLButtonElement, SidebarMenuButtonProps>(\n (\n {\n className,\n icon: IconProp,\n active = false,\n size = \"base\",\n href,\n tooltip,\n children,\n ...props\n },\n ref\n ) => {\n const { state } = useSidebar();\n const LinkComponent = useLinkComponent();\n const isInsideMenuItem = useContext(MenuItemContext);\n\n // Render icon — supports both component types and React elements\n const iconNode = (() => {\n if (!IconProp) return null;\n if (React.isValidElement(IconProp)) return IconProp;\n const Comp = IconProp as React.ComponentType<{ className?: string }>;\n return (\n <Comp\n className={cn(\"shrink-0\", size === \"base\" ? \"size-3.5\" : \"size-3\")}\n />\n );\n })();\n\n const content = (\n <>\n {iconNode}\n <span\n className={cn(\n \"flex flex-1 items-center min-w-0 text-left overflow-hidden\",\n \"group-data-[state=collapsed]/sidebar:hidden\"\n )}\n >\n {children}\n </span>\n </>\n );\n\n const buttonClasses = cn(\n // Layout\n \"group/menu-button flex w-full min-w-0 items-center gap-2 rounded-lg outline-none cursor-pointer\",\n // Sizing\n size === \"base\" && \"min-h-[34px] px-3 py-1.5 text-sm font-medium\",\n size === \"sm\" && \"min-h-[28px] px-2 py-1 text-sm\",\n // Default state — transition includes padding so collapsed centering animates smoothly\n \"text-sf-default\",\n \"transition-[color,background-color,padding] duration-0 ease-[cubic-bezier(0.77,0,0.175,1)]\",\n // Icon color\n \"[&>svg]:text-sf-subtle\",\n !active && \"hover:bg-sf-tint\",\n // Active state\n active && \"bg-sf-tint\",\n // When a child sub-button is active, don't show active styling on the parent trigger\n \"has-[[data-active]]:bg-transparent has-[[data-active]]:hover:bg-sf-tint\",\n // Focus\n \"focus-visible:ring-1 focus-visible:ring-sf-ring\",\n // Collapsed: px-2 centers the icon (48px sidebar − 16px content padding = 32px;\n // 32px − 2×8px padding = 16px = icon size). Padding transition keeps it smooth.\n \"group-data-[state=collapsed]/sidebar:px-2\",\n className\n );\n\n let button: React.ReactNode = href ? (\n <LinkComponent\n ref={ref as React.Ref<HTMLAnchorElement>}\n className={cn(buttonClasses, \"no-underline!\")}\n href={href}\n to={href}\n data-active={active || undefined}\n data-sidebar=\"menu-button\"\n data-size={size}\n onClick={\n props.onClick as unknown as React.MouseEventHandler<HTMLAnchorElement>\n }\n >\n {content}\n </LinkComponent>\n ) : (\n <button\n ref={ref}\n type=\"button\"\n className={buttonClasses}\n data-active={active || undefined}\n data-sidebar=\"menu-button\"\n data-size={size}\n {...props}\n >\n {content}\n </button>\n );\n\n // Wrap in Tooltip when collapsed and tooltip text is provided.\n if (state === \"collapsed\" && tooltip) {\n button = (\n <Tooltip content={tooltip} side=\"right\">\n {button}\n </Tooltip>\n );\n }\n\n // Auto-wrap in <li> when not already inside a MenuItem\n if (!isInsideMenuItem) {\n return (\n <li data-sidebar=\"menu-item\" className=\"relative\">\n {button}\n </li>\n );\n }\n\n return button;\n }\n);\n\nSidebarMenuButton.displayName = \"Sidebar.MenuButton\";\n\n// ============================================================================\n// Sidebar MenuAction\n// ============================================================================\n\n/**\n * Right-aligned action button inside a menu item (e.g., settings gear, plus icon).\n * Positioned absolutely so it overlays the menu button.\n * Hidden when the sidebar is collapsed.\n */\nconst SidebarMenuAction = forwardRef<\n HTMLButtonElement,\n ComponentPropsWithoutRef<\"button\">\n>(({ className, ...props }, ref) => (\n <button\n ref={ref}\n type=\"button\"\n data-sidebar=\"menu-action\"\n className={cn(\n \"absolute right-1.5 top-1/2 flex -translate-y-1/2 items-center justify-center rounded-md p-1\",\n \"text-sf-strong hover:bg-sf-overlay\",\n \"transition-colors duration-150\",\n \"group-data-[state=collapsed]/sidebar:hidden\",\n className\n )}\n {...props}\n />\n));\n\nSidebarMenuAction.displayName = \"Sidebar.MenuAction\";\n\n// ============================================================================\n// Sidebar MenuBadge\n// ============================================================================\n\n/**\n * Badge pill displayed inside a menu button (e.g., \"Beta\", \"New\").\n * Uses dashed border styling matching the Cloudflare design system.\n *\n * @example\n * ```tsx\n * <Sidebar.MenuSubButton>\n * Containers\n * <Sidebar.MenuBadge>Beta</Sidebar.MenuBadge>\n * </Sidebar.MenuSubButton>\n * ```\n */\nconst SidebarMenuBadge = forwardRef<\n HTMLSpanElement,\n ComponentPropsWithoutRef<\"span\">\n>(({ className, ...props }, ref) => (\n <span\n ref={ref}\n data-sidebar=\"menu-badge\"\n className={cn(\n \"inline-flex shrink-0 items-center rounded-full border border-dashed border-sf-line\",\n \"select-none px-1.5 py-0.5 text-[11px]/none font-medium text-sf-strong\",\n // Hidden when collapsed\n \"group-data-[state=collapsed]/sidebar:hidden\",\n className\n )}\n {...props}\n />\n));\n\nSidebarMenuBadge.displayName = \"Sidebar.MenuBadge\";\n\n// ============================================================================\n// Sidebar MenuSub\n// ============================================================================\n\n/**\n * Indented sub-menu container for child navigation items. Renders as `<ul>` with\n * a left border accent for visual hierarchy.\n *\n * `MenuSubButton` auto-wraps in `<li>` so `MenuSubItem` is optional.\n *\n * @example\n * ```tsx\n * <Sidebar.MenuSub>\n * <Sidebar.MenuSubButton active>Workers & Pages</Sidebar.MenuSubButton>\n * <Sidebar.MenuSubButton>Durable Objects</Sidebar.MenuSubButton>\n * </Sidebar.MenuSub>\n * ```\n */\nconst SidebarMenuSub = forwardRef<\n HTMLUListElement,\n ComponentPropsWithoutRef<\"ul\">\n>(({ className, ...props }, ref) => (\n <ul\n ref={ref}\n data-sidebar=\"menu-sub\"\n className={cn(\n \"m-0 ml-3.5 flex min-w-0 list-none flex-col gap-0.5 border-l border-sf-line p-0 pl-2.5\",\n // Hidden when collapsed\n \"group-data-[state=collapsed]/sidebar:hidden\",\n className\n )}\n {...props}\n />\n));\n\nSidebarMenuSub.displayName = \"Sidebar.MenuSub\";\n\n// ============================================================================\n// Sidebar MenuSubItem\n// ============================================================================\n\n/**\n * Individual item inside a sub-menu. Renders as `<li>`.\n *\n * **Optional when using `MenuSubButton` directly** — `MenuSubButton` auto-wraps\n * itself in a `<li>` when not already inside a `MenuSubItem`.\n */\nconst SidebarMenuSubItem = forwardRef<\n HTMLLIElement,\n ComponentPropsWithoutRef<\"li\">\n>(({ className, children, ...props }, ref) => (\n <MenuSubItemContext.Provider value={true}>\n <li\n ref={ref}\n data-sidebar=\"menu-sub-item\"\n className={cn(\"relative\", className)}\n {...props}\n >\n {children}\n </li>\n </MenuSubItemContext.Provider>\n));\n\nSidebarMenuSubItem.displayName = \"Sidebar.MenuSubItem\";\n\n// ============================================================================\n// Sidebar MenuSubButton\n// ============================================================================\n\nexport interface SidebarMenuSubButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n /** Marks this sub-item as currently active/selected. @default false */\n active?: boolean;\n /** Navigation URL. When set, renders as a link via LinkProvider. */\n href?: string;\n}\n\n/**\n * Button inside a sub-menu item. Does not render an icon (sub-items are\n * indented instead). Supports active state and link rendering.\n *\n * **Auto-wraps in `<li>`** when not already inside a `Sidebar.MenuSubItem`.\n *\n * @example Simple usage (auto-wrapped in `<li>`)\n * ```tsx\n * <Sidebar.MenuSub>\n * <Sidebar.MenuSubButton active>Workers & Pages</Sidebar.MenuSubButton>\n * <Sidebar.MenuSubButton href=\"/observability\">Observability</Sidebar.MenuSubButton>\n * </Sidebar.MenuSub>\n * ```\n */\nconst SidebarMenuSubButton = forwardRef<\n HTMLButtonElement,\n SidebarMenuSubButtonProps\n>(({ className, active = false, href, children, ...props }, ref) => {\n const LinkComponent = useLinkComponent();\n const isInsideMenuSubItem = useContext(MenuSubItemContext);\n\n const buttonClasses = cn(\n \"flex w-full min-w-0 items-center gap-2 rounded-lg min-h-[34px] px-3 py-1 text-sm font-medium outline-none\",\n \"text-sf-default transition-colors duration-150\",\n !active && \"hover:bg-sf-tint\",\n active && \"bg-sf-tint\",\n \"focus-visible:ring-1 focus-visible:ring-sf-ring\",\n className\n );\n\n const content = <span className=\"flex-1 truncate text-left\">{children}</span>;\n\n const button: React.ReactNode = href ? (\n <LinkComponent\n ref={ref as React.Ref<HTMLAnchorElement>}\n className={cn(buttonClasses, \"no-underline!\")}\n href={href}\n to={href}\n data-active={active || undefined}\n data-sidebar=\"menu-sub-button\"\n onClick={\n props.onClick as unknown as React.MouseEventHandler<HTMLAnchorElement>\n }\n >\n {content}\n </LinkComponent>\n ) : (\n <button\n ref={ref}\n type=\"button\"\n className={buttonClasses}\n data-active={active || undefined}\n data-sidebar=\"menu-sub-button\"\n {...props}\n >\n {content}\n </button>\n );\n\n // Auto-wrap in <li> when not already inside a MenuSubItem\n if (!isInsideMenuSubItem) {\n return (\n <li data-sidebar=\"menu-sub-item\" className=\"relative\">\n {button}\n </li>\n );\n }\n\n return button;\n});\n\nSidebarMenuSubButton.displayName = \"Sidebar.MenuSubButton\";\n\n// ============================================================================\n// Sidebar Separator\n// ============================================================================\n\n/**\n * Horizontal divider line between sidebar sections.\n */\nconst SidebarSeparator = forwardRef<\n HTMLHRElement,\n ComponentPropsWithoutRef<\"hr\">\n>(({ className, ...props }, ref) => (\n <hr\n ref={ref}\n data-sidebar=\"separator\"\n className={cn(\"mx-2 min-h-px h-px border-0 bg-sf-line\", className)}\n {...props}\n />\n));\n\nSidebarSeparator.displayName = \"Sidebar.Separator\";\n\n// ============================================================================\n// Sidebar Input\n// ============================================================================\n\nexport interface SidebarInputProps extends ComponentPropsWithoutRef<\"button\"> {\n /** Placeholder text displayed inside the search trigger. @default \"Search...\" */\n placeholder?: string;\n /** Keyboard shortcut hint (e.g., \"⌘K\"). */\n shortcut?: string;\n}\n\n/**\n * Search trigger button styled as an input. Typically opens a command palette.\n *\n * @example\n * ```tsx\n * <Sidebar.Input placeholder=\"Quick search...\" shortcut=\"⌘K\" onClick={openSearch} />\n * ```\n */\nconst SidebarInput = forwardRef<HTMLButtonElement, SidebarInputProps>(\n (\n { className, placeholder = \"Search...\", shortcut, children, ...props },\n ref\n ) => (\n <button\n ref={ref}\n type=\"button\"\n data-sidebar=\"input\"\n className={cn(\n \"flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm\",\n \"bg-sf-base text-sf-subtle ring ring-sf-line\",\n \"transition-[color,background-color,padding,box-shadow] duration-250 ease-[cubic-bezier(0.77,0,0.175,1)]\",\n \"hover:bg-sf-overlay\",\n // Collapsed: icon-only, padding centers icon, ring fades via box-shadow transition\n \"group-data-[state=collapsed]/sidebar:px-2 group-data-[state=collapsed]/sidebar:ring-0\",\n className\n )}\n {...props}\n >\n <MagnifyingGlassIcon className=\"size-4 shrink-0 text-sf-subtle\" />\n <span className=\"flex-1 truncate text-left group-data-[state=collapsed]/sidebar:hidden\">\n {children ?? placeholder}\n </span>\n {shortcut && (\n <kbd className=\"ml-auto font-sans text-xs text-sf-subtle group-data-[state=collapsed]/sidebar:hidden\">\n {shortcut}\n </kbd>\n )}\n </button>\n )\n);\n\nSidebarInput.displayName = \"Sidebar.Input\";\n\n// ============================================================================\n// Sidebar Trigger\n// ============================================================================\n\n/**\n * Button that toggles the sidebar open/collapsed. Uses `toggleSidebar()` from context.\n * Defaults to a `SidebarSimpleIcon`, left-aligned.\n *\n * @example\n * ```tsx\n * <Sidebar.Trigger />\n * <Sidebar.Trigger><PanelLeftIcon className=\"size-5\" /></Sidebar.Trigger>\n * ```\n */\nconst SidebarTrigger = forwardRef<\n HTMLButtonElement,\n ComponentPropsWithoutRef<\"button\">\n>(({ className, children, onClick, ...props }, ref) => {\n const { toggleSidebar } = useSidebar();\n\n return (\n <button\n ref={ref}\n type=\"button\"\n data-sidebar=\"trigger\"\n aria-label=\"Toggle sidebar\"\n className={cn(\n \"flex items-center rounded-md p-1.5\",\n \"text-sf-subtle hover:text-sf-strong hover:bg-sf-overlay\",\n \"transition-colors duration-150\",\n className\n )}\n onClick={(e) => {\n onClick?.(e);\n toggleSidebar();\n }}\n {...props}\n >\n {children ?? <SidebarSimpleIcon className=\"size-5\" />}\n </button>\n );\n});\n\nSidebarTrigger.displayName = \"Sidebar.Trigger\";\n\n// ============================================================================\n// Sidebar Rail\n// ============================================================================\n\n/**\n * Invisible interaction strip at the sidebar edge for click-to-toggle.\n * Renders a thin hover-sensitive area between the sidebar and main content.\n */\nconst SidebarRail = forwardRef<\n HTMLButtonElement,\n ComponentPropsWithoutRef<\"button\">\n>(({ className, ...props }, ref) => {\n const { toggleSidebar } = useSidebar();\n\n return (\n <button\n ref={ref}\n type=\"button\"\n data-sidebar=\"rail\"\n aria-label=\"Toggle sidebar\"\n tabIndex={-1}\n className={cn(\n \"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 cursor-pointer transition-all\",\n \"after:absolute after:inset-y-0 after:left-1/2 after:w-0.5\",\n \"hover:after:bg-sf-brand/20\",\n \"group-data-[side=left]/sidebar-wrapper:right-0\",\n \"group-data-[side=right]/sidebar-wrapper:left-0\",\n \"sm:flex\",\n className\n )}\n onClick={toggleSidebar}\n {...props}\n />\n );\n});\n\nSidebarRail.displayName = \"Sidebar.Rail\";\n\n// ============================================================================\n// Sidebar ResizeHandle\n// ============================================================================\n\n/**\n * Drag handle for resizing the sidebar. Renders when `resizable` is true in\n * both expanded and collapsed states.\n *\n * - **Expanded → drag inward past `minWidth`**: auto-collapses to icon-only.\n * - **Collapsed → drag outward past `minWidth`**: auto-expands and begins\n * tracking width from `minWidth`.\n */\nconst SidebarResizeHandle = forwardRef<\n HTMLDivElement,\n ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => {\n const { side, resizable, setIsResizing, setWidth, setOpen, open, minWidth } =\n useSidebar();\n const startX = useRef(0);\n const startWidth = useRef(0);\n const wasCollapsed = useRef(false);\n\n if (!resizable) return null;\n\n const handlePointerDown = (e: React.PointerEvent<HTMLDivElement>) => {\n e.preventDefault();\n setIsResizing(true);\n startX.current = e.clientX;\n wasCollapsed.current = !open;\n\n const wrapper = (e.currentTarget as HTMLElement).closest(\n \"[data-sidebar-wrapper]\"\n );\n const sidebar = wrapper?.querySelector(\"[data-sidebar='sidebar']\");\n startWidth.current = sidebar?.getBoundingClientRect().width ?? 0;\n\n const cleanup = () => {\n setIsResizing(false);\n document.removeEventListener(\"pointermove\", handlePointerMove);\n document.removeEventListener(\"pointerup\", handlePointerUp);\n };\n\n const handlePointerMove = (moveEvent: PointerEvent) => {\n const delta =\n side === \"left\"\n ? moveEvent.clientX - startX.current\n : startX.current - moveEvent.clientX;\n const rawWidth = startWidth.current + delta;\n\n if (wasCollapsed.current) {\n // Dragging outward from collapsed — expand once past minWidth\n if (rawWidth >= minWidth) {\n wasCollapsed.current = false;\n setOpen(true);\n setWidth(rawWidth);\n }\n return;\n }\n\n // Dragging inward while expanded — collapse when below minWidth\n if (rawWidth < minWidth) {\n setOpen(false);\n wasCollapsed.current = true;\n return;\n }\n\n setWidth(rawWidth);\n };\n\n const handlePointerUp = () => {\n cleanup();\n };\n\n document.addEventListener(\"pointermove\", handlePointerMove);\n document.addEventListener(\"pointerup\", handlePointerUp);\n };\n\n return (\n <div\n ref={ref}\n data-sidebar=\"resize-handle\"\n className={cn(\n \"absolute inset-y-0 z-20 hidden w-1 cursor-col-resize transition-colors sm:block\",\n \"hover:bg-sf-brand/30 active:bg-sf-brand/50\",\n side === \"left\" && \"right-0\",\n side === \"right\" && \"left-0\",\n className\n )}\n onPointerDown={handlePointerDown}\n {...props}\n />\n );\n});\n\nSidebarResizeHandle.displayName = \"Sidebar.ResizeHandle\";\n\n// ============================================================================\n// Sidebar MenuChevron\n// ============================================================================\n\n/**\n * Auto-rotating chevron for collapsible menu items. When the parent\n * `MenuButton` is used as a `Collapsible.Trigger`, Base UI sets\n * `data-panel-open` on the trigger — the chevron rotates automatically via CSS.\n *\n * @example\n * ```tsx\n * <Sidebar.CollapsibleTrigger render={<Sidebar.MenuButton icon={ComputeIcon} />}>\n * Compute\n * <Sidebar.MenuChevron />\n * </Sidebar.CollapsibleTrigger>\n * ```\n */\nfunction SidebarMenuChevron({ className }: { className?: string }) {\n return (\n <CaretRightIcon\n className={cn(\n \"ml-auto size-4 shrink-0 text-sf-subtle transition-transform duration-200\",\n // Auto-rotate when inside an open Collapsible trigger\n \"group-data-[panel-open]/menu-button:rotate-90\",\n // Hidden when collapsed\n \"group-data-[state=collapsed]/sidebar:hidden\",\n className\n )}\n />\n );\n}\n\nSidebarMenuChevron.displayName = \"Sidebar.MenuChevron\";\n\n// ============================================================================\n// Collapsible re-exports\n// ============================================================================\n\n/**\n * Base UI Collapsible.Root for sidebar sub-menu expand/collapse.\n * @see https://base-ui.com/react/components/collapsible\n */\nconst SidebarCollapsible = CollapsibleBase.Root;\n\n/**\n * Base UI Collapsible.Trigger for sidebar sub-menu toggle.\n * Use `render` prop to compose with `Sidebar.MenuButton`.\n *\n * @example\n * ```tsx\n * <Sidebar.CollapsibleTrigger render={<Sidebar.MenuButton icon={DiamondIcon} />}>\n * Compute\n * <Sidebar.MenuChevron />\n * </Sidebar.CollapsibleTrigger>\n * ```\n */\nconst SidebarCollapsibleTrigger = CollapsibleBase.Trigger;\n\n/**\n * Animated collapsible panel for sidebar sub-menu content.\n * Wraps Base UI `Collapsible.Panel` with a height transition driven by the\n * `--collapsible-panel-height` CSS variable that Base UI measures automatically.\n *\n * Uses `keepMounted` by default so the exit animation plays before removal.\n *\n * Animation flow:\n * - **Opening**: `data-starting-style` (h=0) → `data-open` (h=measured) — transition up\n * - **Closing**: `data-open` removed + `data-ending-style` (h=0) — transition down\n * - **Closed**: `data-closed` (h=0) — stays collapsed while mounted\n */\nconst SidebarCollapsibleContent = forwardRef<\n HTMLDivElement,\n ComponentPropsWithoutRef<typeof CollapsibleBase.Panel>\n>(({ className, keepMounted = true, ...props }, ref) => (\n <CollapsibleBase.Panel\n ref={ref}\n keepMounted={keepMounted}\n className={cn(\n \"overflow-hidden\",\n // Default: show at measured height (when data-open, no override matches)\n \"h-[var(--collapsible-panel-height)]\",\n // Transition height — matches production NavGroup easing\n \"transition-[height] duration-250 ease-[cubic-bezier(0.77,0,0.175,1)]\",\n \"motion-reduce:transition-none\",\n // Closed / animating in / animating out: height 0\n \"data-[closed]:h-0 data-[starting-style]:h-0 data-[ending-style]:h-0\",\n className\n )}\n {...props}\n />\n));\n\nSidebarCollapsibleContent.displayName = \"Sidebar.CollapsibleContent\";\n\n// ============================================================================\n// Compound Component Export\n// ============================================================================\n\n/**\n * Sidebar — responsive navigation panel with expand/collapse support.\n *\n * Compound component: `Sidebar` (root `<aside>`), `.Provider`, `.Header`,\n * `.Content`, `.Footer`, `.Group`, `.GroupLabel`, `.GroupContent`,\n * `.Menu`, `.MenuItem`, `.MenuButton`, `.MenuAction`, `.MenuBadge`,\n * `.MenuSub`, `.MenuSubItem`, `.MenuSubButton`, `.Separator`,\n * `.Input`, `.Trigger`, `.Rail`, `.MenuChevron`,\n * `.Collapsible`, `.CollapsibleTrigger`, `.CollapsibleContent`.\n *\n * Built on `@base-ui/react/collapsible` + `@base-ui/react/dialog`.\n *\n * @example\n * ```tsx\n * <Sidebar.Provider defaultOpen>\n * <Sidebar>\n * <Sidebar.Content>\n * <Sidebar.Group>\n * <Sidebar.GroupLabel>Overview</Sidebar.GroupLabel>\n * <Sidebar.Menu>\n * <Sidebar.MenuButton icon={HouseIcon} active>Home</Sidebar.MenuButton>\n * <Sidebar.MenuButton icon={GlobeIcon}>Domains</Sidebar.MenuButton>\n * </Sidebar.Menu>\n * </Sidebar.Group>\n * </Sidebar.Content>\n * <Sidebar.Footer>\n * <Sidebar.Trigger />\n * </Sidebar.Footer>\n * </Sidebar>\n * </Sidebar.Provider>\n * ```\n */\nexport const Sidebar = Object.assign(SidebarRoot, {\n Provider: SidebarProvider,\n Header: SidebarHeader,\n Content: SidebarContent,\n Footer: SidebarFooter,\n Group: SidebarGroup,\n GroupLabel: SidebarGroupLabel,\n GroupContent: SidebarGroupContent,\n Menu: SidebarMenu,\n MenuItem: SidebarMenuItem,\n MenuButton: SidebarMenuButton,\n MenuAction: SidebarMenuAction,\n MenuBadge: SidebarMenuBadge,\n MenuSub: SidebarMenuSub,\n MenuSubItem: SidebarMenuSubItem,\n MenuSubButton: SidebarMenuSubButton,\n Separator: SidebarSeparator,\n Input: SidebarInput,\n Trigger: SidebarTrigger,\n Rail: SidebarRail,\n ResizeHandle: SidebarResizeHandle,\n MenuChevron: SidebarMenuChevron,\n Collapsible: SidebarCollapsible,\n CollapsibleTrigger: SidebarCollapsibleTrigger,\n CollapsibleContent: SidebarCollapsibleContent,\n});\n\nexport {\n SidebarProvider,\n SidebarRoot,\n SidebarHeader,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupLabel,\n SidebarGroupContent,\n SidebarMenu,\n SidebarMenuItem,\n SidebarMenuButton,\n SidebarMenuAction,\n SidebarMenuBadge,\n SidebarMenuSub,\n SidebarMenuSubItem,\n SidebarMenuSubButton,\n SidebarSeparator,\n SidebarInput,\n SidebarTrigger,\n SidebarRail,\n SidebarResizeHandle,\n SidebarMenuChevron,\n SidebarCollapsible,\n SidebarCollapsibleTrigger,\n SidebarCollapsibleContent,\n};\n"],"mappings":"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"}

package/dist/src/components/ai-loader/ai-loader.d.ts DELETED Viewed

@@ -1,44 +0,0 @@
-import { HTMLAttributes } from 'react';
-export declare const SF_AI_LOADER_VARIANTS: {
-    readonly size: {
-        readonly sm: {
-            readonly classes: "size-3";
-            readonly description: "Small — 12px";
-        };
-        readonly base: {
-            readonly classes: "size-4";
-            readonly description: "Default — 16px";
-        };
-        readonly lg: {
-            readonly classes: "size-5";
-            readonly description: "Large — 20px";
-        };
-    };
-};
-export declare const SF_AI_LOADER_DEFAULT_VARIANTS: {
-    readonly size: "base";
-};
-export type SFAiLoaderSize = keyof typeof SF_AI_LOADER_VARIANTS.size;
-export interface SFAiLoaderVariantsProps {
-    /**
-     * Icon size.
-     * - `"sm"` — 12px
-     * - `"base"` — 16px (default)
-     * - `"lg"` — 20px
-     * @default "base"
-     */
-    size?: SFAiLoaderSize;
-}
-export interface AiLoaderProps extends SFAiLoaderVariantsProps, HTMLAttributes<HTMLDivElement> {
-}
-/**
- * Spinning radial loader for AI streaming states.
- *
- * @example
- * ```tsx
- * <AiLoader />
- * <AiLoader size="sm" className="text-sf-subtle" />
- * ```
- */
-export declare function AiLoader({ size, className, ...props }: AiLoaderProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=ai-loader.d.ts.map

package/dist/src/components/ai-loader/ai-loader.d.ts.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"ai-loader.d.ts","sourceRoot":"","sources":["../../../../src/components/ai-loader/ai-loader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAM5C,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;CAMxB,CAAC;AAEX,eAAO,MAAM,6BAA6B;;CAEhC,CAAC;AAEX,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,qBAAqB,CAAC,IAAI,CAAC;AAErE,MAAM,WAAW,uBAAuB;IACtC;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB;AA+FD,MAAM,WAAW,aACf,SAAQ,uBAAuB,EAAE,cAAc,CAAC,cAAc,CAAC;CAAG;AAEpE;;;;;;;;GAQG;AACH,wBAAgB,QAAQ,CAAC,EACvB,IAAyC,EACzC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,aAAa,2CAcf"}

package/dist/src/components/ai-loader/index.d.ts DELETED Viewed

	@@ -1,2 +0,0 @@
1	- export { AiLoader, SF_AI_LOADER_VARIANTS, SF_AI_LOADER_DEFAULT_VARIANTS, type AiLoaderProps, type SFAiLoaderSize, type SFAiLoaderVariantsProps, } from './ai-loader';
2	- //# sourceMappingURL=index.d.ts.map

package/dist/styles/theme-navigator.css DELETED Viewed

@@ -1,137 +0,0 @@
-/**
- * Navigator Compatibility Layer
- *
- * Defines shadcn-style CSS variables so components copied from navigator's
- * @repo/design-system work without class-name changes.
- *
- * Values sourced from navigator/packages/design-system/styles/globals.css.
- * sf-* tokens in theme-sf.css reference some of these via var().
- */
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-success: var(--success);
-  --color-success-foreground: var(--success-foreground);
-  --color-warning: var(--warning);
-  --color-warning-foreground: var(--warning-foreground);
-  --color-info: var(--info);
-  --color-info-foreground: var(--info-foreground);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-}
-/* ─── Light mode ──────────────────────────────────────────────────────── */
-:root {
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
-  --success: var(--color-emerald-500);
-  --success-foreground: var(--color-emerald-900);
-  --info: var(--color-violet-500);
-  --info-foreground: var(--color-violet-900);
-  --warning: var(--color-yellow-500);
-  --warning-foreground: var(--color-yellow-900);
-}
-/* ─── Dark mode ───────────────────────────────────────────────────────── */
-.dark,
-[data-mode="dark"] {
-  --background: oklch(0.21 0.005 252);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.24 0.006 250);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.24 0.012 250);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.55 0.01 40);
-  --primary-foreground: oklch(0.98 0 0);
-  --secondary: oklch(0.19 0.008 140);
-  --secondary-foreground: oklch(0.85 0 0);
-  --muted: oklch(0.22 0.01 250);
-  --muted-foreground: oklch(0.65 0 0);
-  --accent: oklch(0.26 0.015 250);
-  --accent-foreground: oklch(0.95 0 0);
-  --destructive: oklch(0.55 0.18 25);
-  --destructive-foreground: oklch(0.95 0 0);
-  --border: oklch(0.3 0.015 250);
-  --input: oklch(0.38 0.015 250);
-  --ring: oklch(0.439 0 0);
-  --sidebar: oklch(0.18 0.006 250);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.439 0 0);
-  --success: var(--color-emerald-500);
-  --success-foreground: var(--color-emerald-600);
-  --info: var(--color-violet-500);
-  --info-foreground: var(--color-violet-600);
-  --warning: var(--color-yellow-500);
-  --warning-foreground: var(--color-yellow-600);
-}