{ "$schema": "https://ui.shadcn.com/schema/registry.json", "name": "karan-ui", "homepage": "https://karan-ui.dev", "items": [ { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "karan", "type": "registry:style", "title": "Karan Style", "description": "Fluid, luminous, and soft style for karan-ui components.", "dependencies": [ "@base-ui/react", "class-variance-authority", "clsx", "tailwind-merge" ], "files": [ { "path": "styles/style-karan.css", "content": ".style-karan {\n /* MARK: Contextual Surface & Intent Layering */\n [data-intent=\"primary\"],\n [data-slot=\"card\"][data-intent=\"primary\"],\n [data-slot=\"alert\"][data-intent=\"primary\"],\n [data-slot=\"toast\"][data-intent=\"primary\"] {\n --current-surface: var(--primary-surface);\n --neutral-surface: var(--primary-surface);\n --neutral-surface-alt: var(--primary-surface-alt);\n --neutral-interactive: var(--primary-interactive);\n --neutral-interactive-hover: var(--primary-interactive-hover);\n --neutral-fill: var(--primary-fill);\n --neutral-interactive-active: var(--primary-interactive-active);\n --neutral-fill: var(--primary-fill);\n --neutral-fill-hover: var(--primary-fill-hover);\n --neutral-fill-active: var(--primary-fill-active);\n --neutral-text: var(--primary-text);\n --neutral-text-secondary: var(--primary-text-secondary);\n --neutral-text-muted: var(--primary-text-muted);\n --neutral-on-fill: var(--primary-on-fill);\n }\n\n [data-intent=\"info\"],\n [data-slot=\"card\"][data-intent=\"info\"],\n [data-slot=\"alert\"][data-intent=\"info\"],\n [data-slot=\"toast\"][data-intent=\"info\"] {\n --current-surface: var(--info-surface);\n --neutral-surface: var(--info-surface);\n --neutral-surface-alt: var(--info-surface-alt);\n --neutral-interactive: var(--info-interactive);\n --neutral-interactive-hover: var(--info-interactive-hover);\n --neutral-fill: var(--info-fill);\n --neutral-interactive-active: var(--info-interactive-active);\n --neutral-fill: var(--info-fill);\n --neutral-fill-hover: var(--info-fill-hover);\n --neutral-fill-active: var(--info-fill-active);\n --neutral-text: var(--info-text);\n --neutral-text-secondary: var(--info-text-secondary);\n --neutral-text-muted: var(--info-text-muted);\n --neutral-on-fill: var(--info-on-fill);\n }\n\n [data-intent=\"success\"],\n [data-slot=\"card\"][data-intent=\"success\"],\n [data-slot=\"alert\"][data-intent=\"success\"],\n [data-slot=\"toast\"][data-intent=\"success\"] {\n --current-surface: var(--success-surface);\n --neutral-surface: var(--success-surface);\n --neutral-surface-alt: var(--success-surface-alt);\n --neutral-interactive: var(--success-interactive);\n --neutral-interactive-hover: var(--success-interactive-hover);\n --neutral-fill: var(--success-fill);\n --neutral-interactive-active: var(--success-interactive-active);\n --neutral-fill: var(--success-fill);\n --neutral-fill-hover: var(--success-fill-hover);\n --neutral-fill-active: var(--success-fill-active);\n --neutral-text: var(--success-text);\n --neutral-text-secondary: var(--success-text-secondary);\n --neutral-text-muted: var(--success-text-muted);\n --neutral-on-fill: var(--success-on-fill);\n }\n\n [data-intent=\"warning\"],\n [data-slot=\"card\"][data-intent=\"warning\"],\n [data-slot=\"alert\"][data-intent=\"warning\"],\n [data-slot=\"toast\"][data-intent=\"warning\"] {\n --current-surface: var(--warning-surface);\n --neutral-surface: var(--warning-surface);\n --neutral-surface-alt: var(--warning-surface-alt);\n --neutral-interactive: var(--warning-interactive);\n --neutral-interactive-hover: var(--warning-interactive-hover);\n --neutral-fill: var(--warning-fill);\n --neutral-interactive-active: var(--warning-interactive-active);\n --neutral-fill: var(--warning-fill);\n --neutral-fill-hover: var(--warning-fill-hover);\n --neutral-fill-active: var(--warning-fill-active);\n --neutral-text: var(--warning-text);\n --neutral-text-secondary: var(--warning-text-secondary);\n --neutral-text-muted: var(--warning-text-muted);\n --neutral-on-fill: var(--warning-on-fill);\n }\n\n [data-intent=\"danger\"],\n [data-slot=\"card\"][data-intent=\"danger\"],\n [data-slot=\"alert\"][data-intent=\"danger\"],\n [data-slot=\"alert\"][data-variant=\"destructive\"],\n [data-slot=\"toast\"][data-intent=\"danger\"] {\n --current-surface: var(--danger-surface);\n --neutral-surface: var(--danger-surface);\n --neutral-surface-alt: var(--danger-surface-alt);\n --neutral-interactive: var(--danger-interactive);\n --neutral-interactive-hover: var(--danger-interactive-hover);\n --neutral-fill: var(--danger-fill);\n --neutral-interactive-active: var(--danger-interactive-active);\n --neutral-fill: var(--danger-fill);\n --neutral-fill-hover: var(--danger-fill-hover);\n --neutral-fill-active: var(--danger-fill-active);\n --neutral-text: var(--danger-text);\n --neutral-text-secondary: var(--danger-text-secondary);\n --neutral-text-muted: var(--danger-text-muted);\n --neutral-on-fill: var(--danger-on-fill);\n }\n\n [data-slot$=\"-item\"][data-variant=\"destructive\"][data-selected=\"true\"],\n [data-slot$=\"-item\"][data-variant=\"destructive\"]:hover,\n [data-slot$=\"-item\"][data-variant=\"destructive\"]:focus,\n [data-slot$=\"-item\"][data-variant=\"destructive\"]:focus-visible,\n [data-slot$=\"-item\"][data-variant=\"destructive\"]:active,\n [data-slot$=\"-item\"][data-variant=\"destructive\"][data-highlighted],\n [data-slot$=\"-item\"][data-variant=\"destructive\"][data-focused],\n [data-variant=\"destructive\"][data-selected=\"true\"],\n [data-variant=\"destructive\"]:hover,\n [data-variant=\"destructive\"]:focus,\n [data-variant=\"destructive\"]:focus-visible,\n [data-variant=\"destructive\"]:active,\n [data-variant=\"destructive\"][data-highlighted],\n [data-variant=\"destructive\"][data-focused] {\n --current-surface: var(--danger-surface-alt);\n --neutral-surface-alt: var(--danger-surface-alt);\n --neutral-interactive: var(--danger-interactive);\n --neutral-interactive-hover: var(--danger-interactive-hover);\n --neutral-fill: var(--danger-fill);\n --neutral-interactive-active: var(--danger-interactive-active);\n --neutral-text: var(--danger-text);\n --neutral-text-secondary: var(--danger-text-secondary);\n --neutral-text-muted: var(--danger-text-muted);\n }\n\n .cn-alert,\n .cn-command,\n .cn-sidebar-inner {\n --current-surface: var(--neutral-surface-alt);\n }\n\n .cn-alert-dialog-content,\n .cn-alert-dialog-content-aria,\n .cn-dialog-content,\n .cn-dialog-content-aria,\n .cn-drawer-popup,\n .cn-drawer-content,\n .cn-sheet-content,\n .cn-popover-content,\n .cn-popover-content-aria,\n .cn-hover-card-content,\n .cn-hover-card-content-aria,\n .cn-select-content,\n .cn-select-content-aria,\n .cn-combobox-content,\n .cn-combobox-content-aria,\n .cn-dropdown-menu-content,\n .cn-dropdown-menu-content-aria,\n .cn-dropdown-menu-sub-content,\n .cn-dropdown-menu-sub-content-aria,\n .cn-context-menu-content,\n .cn-context-menu-content-aria,\n .cn-context-menu-sub-content,\n .cn-context-menu-sub-content-aria,\n .cn-menubar-content,\n .cn-menubar-sub-content,\n .cn-navigation-menu-popup,\n .cn-navigation-menu-viewport,\n .cn-chart-tooltip {\n --current-surface: var(--neutral-surface);\n &:is(.dark *) {\n --current-surface: var(--neutral-surface-alt);\n }\n }\n\n /* MARK: Slider */\n .cn-slider {\n @apply w-full data-[orientation=vertical]:min-h-40;\n }\n\n .cn-slider-track {\n @apply bg-neutral-interactive rounded-full h-2 w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2 relative grow overflow-hidden;\n }\n\n .cn-slider-range {\n @apply bg-primary-fill h-full data-[orientation=vertical]:w-full transition-[width,height,inset-inline-start,bottom] duration-150 ease-[cubic-bezier(0.22,1,0.36,1)] data-dragging:transition-none group-data-dragging/slider:transition-none;\n }\n\n .cn-slider-thumb {\n @apply ring-1 ring-black/10 dark:ring-white/20 size-5 rounded-full bg-neutral-surface border-2 border-primary-fill shadow-md transition-[inset-inline-start,bottom,box-shadow,background-color,border-color] duration-150 ease-[cubic-bezier(0.22,1,0.36,1)] data-dragging:transition-[box-shadow,background-color,border-color] group-data-dragging/slider:transition-[box-shadow,background-color,border-color] hover:ring-4 hover:ring-primary-fill/30 focus-visible:ring-4 focus-visible:ring-primary-fill/30 focus-visible:outline-hidden active:ring-4 active:ring-primary-fill/40 cursor-grab active:cursor-grabbing data-[orientation=vertical]:size-5;\n }\n\n .cn-slider-tooltip {\n @apply bg-neutral-text text-neutral-surface rounded-sm px-2 py-0.5 font-mono text-[11px] leading-tight font-medium tabular-nums shadow-sm;\n }\n\n .cn-slider-tooltip-arrow {\n @apply bg-neutral-text size-2 rotate-45 rounded-[1px];\n }\n\n /* MARK: Switch */\n .cn-switch {\n @apply data-checked:bg-primary-fill data-unchecked:bg-neutral-interactive data-checked:border-primary-fill border-2 data-unchecked:border-transparent focus-visible:border-primary-fill focus-visible:ring-primary-fill/30 aria-invalid:ring-danger-fill/20 dark:aria-invalid:ring-danger-fill/40 aria-invalid:border-danger-fill dark:aria-invalid:border-danger-fill/50 shrink-0 rounded-full focus-visible:ring-3 aria-invalid:ring-3 group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:data-unchecked:border-transparent group-has-[:focus-visible]/field-label:data-checked:border-primary-fill data-[size=default]:h-5 data-[size=default]:w-11 data-[size=sm]:h-4 data-[size=sm]:w-7;\n }\n\n .cn-switch-aria {\n @apply data-selected:bg-primary-fill not-data-selected:bg-neutral-interactive data-selected:border-primary-fill not-data-selected:border-transparent data-focus-visible:border-primary-fill data-focus-visible:ring-primary-fill/30 data-focus-visible:ring-3 data-invalid:ring-danger-fill/20 dark:data-invalid:ring-danger-fill/40 data-invalid:border-danger-fill dark:data-invalid:border-danger-fill/50 data-invalid:ring-3;\n }\n\n .cn-switch-thumb {\n @apply bg-neutral-surface dark:data-unchecked:bg-neutral-text dark:data-checked:bg-primary-on-fill rounded-full shadow-sm group-data-[size=default]/switch:h-4 group-data-[size=default]/switch:w-6 group-data-[size=sm]/switch:h-3 group-data-[size=sm]/switch:w-4 data-checked:translate-x-[calc(100%-8px)] data-unchecked:translate-x-0 not-dark:bg-clip-padding;\n }\n\n .cn-switch-thumb-aria {\n @apply dark:not-data-selected:bg-neutral-text dark:data-selected:bg-primary-on-fill data-selected:translate-x-[calc(100%-8px)] not-data-selected:translate-x-0;\n }\n\n /* MARK: Radio */\n .cn-radio-group {\n @apply grid gap-3 data-[orientation=horizontal]:flex data-[orientation=horizontal]:flex-row data-[orientation=horizontal]:flex-wrap data-[orientation=horizontal]:items-center data-[orientation=horizontal]:gap-4;\n }\n\n .cn-radio-group-item {\n @apply aria-invalid:border-danger-fill focus-visible:border-primary-fill focus-visible:ring-primary-fill/30 aria-invalid:ring-danger-fill/20 dark:aria-invalid:ring-danger-fill/40 dark:aria-invalid:border-danger-fill/50 transition-[background-color,border-color,color,box-shadow,transform] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] focus-visible:ring-3 aria-invalid:ring-3 not-data-custom:bg-neutral-interactive not-data-custom:hover:bg-neutral-interactive-hover not-data-custom:data-checked:bg-primary-fill not-data-custom:data-checked:hover:bg-primary-fill-hover not-data-custom:data-checked:text-primary-on-fill dark:not-data-custom:data-checked:bg-primary-fill not-data-custom:border-transparent not-data-custom:data-checked:border-primary-fill not-data-custom:flex not-data-custom:size-4 not-data-custom:items-center not-data-custom:justify-center not-data-custom:rounded-full not-data-custom:group-has-[:focus-visible]/field-label:ring-0 not-data-custom:group-has-[:focus-visible]/field-label:border-transparent data-custom:border-neutral-interactive data-custom:bg-neutral-surface data-custom:hover:border-neutral-interactive-hover data-custom:hover:bg-neutral-interactive/35 data-custom:data-checked:border-primary-fill data-custom:data-checked:bg-primary-surface/35 data-custom:data-checked:ring-1 data-custom:data-checked:ring-primary-fill;\n }\n\n .cn-radio-group-item-aria {\n @apply data-selected:bg-primary-fill data-selected:text-primary-on-fill dark:data-selected:bg-primary-fill data-focus-visible:border-primary-fill data-focus-visible:ring-primary-fill/30 data-focus-visible:ring-3 data-invalid:border-danger-fill data-invalid:ring-danger-fill/20 dark:data-invalid:ring-danger-fill/40 dark:data-invalid:border-danger-fill/50 data-invalid:ring-3;\n }\n\n .cn-radio-group-indicator {\n @apply relative flex size-4 items-center justify-center;\n }\n\n .cn-radio-group-indicator-icon {\n @apply bg-primary-on-fill pointer-events-none absolute inset-0 m-auto size-2 scale-0 rounded-full opacity-0 transition-[scale,opacity] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-checked/radio-group-item:scale-100 group-data-checked/radio-group-item:opacity-100 in-data-checked:scale-100 in-data-checked:opacity-100 dark:size-2;\n }\n\n /* MARK: Checkbox */\n .cn-checkbox {\n @apply bg-neutral-interactive hover:bg-neutral-interactive-hover data-checked:bg-primary-fill data-checked:hover:bg-primary-fill-hover data-checked:text-primary-on-fill dark:data-checked:bg-primary-fill data-checked:border-primary-fill data-indeterminate:bg-primary-fill data-indeterminate:hover:bg-primary-fill-hover data-indeterminate:text-primary-on-fill dark:data-indeterminate:bg-primary-fill data-indeterminate:border-primary-fill border-transparent aria-invalid:aria-checked:border-primary-fill aria-invalid:border-danger-fill dark:aria-invalid:border-danger-fill/50 focus-visible:border-primary-fill focus-visible:ring-primary-fill/30 aria-invalid:ring-danger-fill/20 dark:aria-invalid:ring-danger-fill/40 flex size-4 items-center justify-center rounded-[5px] border transition-[background-color,border-color,color,box-shadow,transform] duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] group-has-disabled/field:opacity-50 focus-visible:ring-3 aria-invalid:ring-3 group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:not-data-checked:not-data-indeterminate:border-transparent group-has-[:focus-visible]/field-label:data-checked:border-primary-fill group-has-[:focus-visible]/field-label:data-indeterminate:border-primary-fill;\n }\n\n .cn-checkbox-aria {\n @apply data-selected:bg-primary-fill data-selected:text-primary-on-fill dark:data-selected:bg-primary-fill data-selected:border-primary-fill data-indeterminate:bg-primary-fill data-indeterminate:text-primary-on-fill dark:data-indeterminate:bg-primary-fill data-indeterminate:border-primary-fill data-focus-visible:border-primary-fill data-focus-visible:ring-primary-fill/30 data-focus-visible:ring-3 data-invalid:data-selected:border-primary-fill data-invalid:border-danger-fill dark:data-invalid:border-danger-fill/50 data-invalid:ring-danger-fill/20 dark:data-invalid:ring-danger-fill/40 data-invalid:ring-3;\n }\n\n .cn-checkbox-indicator {\n @apply [&>svg]:size-3;\n }\n\n .cn-checkbox-group {\n @apply flex flex-col gap-2.5;\n }\n\n /* MARK: Button */\n .cn-button {\n @apply focus-visible:border-primary-fill focus-visible:ring-primary-fill/30 aria-invalid:ring-danger-fill/20 dark:aria-invalid:ring-danger-fill/40 aria-invalid:border-danger-fill dark:aria-invalid:border-danger-fill/50 border border-transparent bg-clip-padding font-medium transition-[background-color,color,border-color,box-shadow] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] focus-visible:ring-3 aria-invalid:ring-3;\n }\n\n .cn-button-variant-default {\n @apply bg-primary-fill text-primary-on-fill hover:bg-primary-fill-hover active:bg-primary-fill-active [&[data-pressed]]:bg-primary-fill-active;\n }\n\n .cn-button-variant-outline {\n @apply border-neutral-interactive bg-neutral-surface text-neutral-text dark:bg-transparent hover:bg-neutral-interactive dark:hover:bg-neutral-interactive hover:text-neutral-text active:bg-neutral-interactive-hover dark:active:bg-neutral-interactive-hover [&[data-pressed]]:bg-neutral-interactive-hover dark:[&[data-pressed]]:bg-neutral-interactive-hover aria-expanded:bg-neutral-interactive dark:aria-expanded:bg-neutral-interactive aria-expanded:text-neutral-text;\n }\n\n .cn-button-variant-secondary {\n @apply bg-neutral-interactive text-neutral-text hover:bg-neutral-interactive-hover active:bg-neutral-interactive-active [&[data-pressed]]:bg-neutral-interactive-active aria-expanded:bg-neutral-interactive aria-expanded:text-neutral-text;\n }\n\n .cn-button-variant-ghost {\n @apply bg-transparent text-neutral-text hover:bg-neutral-interactive hover:text-neutral-text active:bg-neutral-interactive-hover [&[data-pressed]]:bg-neutral-interactive-hover aria-expanded:bg-neutral-interactive aria-expanded:text-neutral-text;\n }\n\n .cn-button-variant-link {\n @apply bg-transparent text-neutral-text-secondary underline-offset-4 hover:text-neutral-text hover:underline focus-visible:text-neutral-text focus-visible:underline active:text-neutral-text-secondary [&[data-pressed]]:text-neutral-text-secondary;\n }\n\n .cn-button-size-xs {\n @apply h-6 gap-1 rounded-md px-2 text-xs [&_svg:not([class*='size-'])]:size-3;\n }\n\n .cn-button-size-sm {\n @apply h-7 gap-1 rounded-md px-2 text-xs [&_svg:not([class*='size-'])]:size-3.5;\n }\n\n .cn-button-size-default {\n @apply h-8 gap-1.5 rounded-lg px-3 text-sm [&_svg:not([class*='size-'])]:size-4;\n }\n\n .cn-button-size-lg {\n @apply h-9 gap-2 rounded-lg px-3.5 text-sm [&_svg:not([class*='size-'])]:size-4;\n }\n\n .cn-button-size-icon-xs {\n @apply size-6 rounded-md [&_svg:not([class*='size-'])]:size-3;\n }\n\n .cn-button-size-icon-sm {\n @apply size-7 rounded-md [&_svg:not([class*='size-'])]:size-3.5;\n }\n\n .cn-button-size-icon {\n @apply size-8 rounded-lg [&_svg:not([class*='size-'])]:size-4;\n }\n\n .cn-button-size-icon-lg {\n @apply size-9 rounded-lg [&_svg:not([class*='size-'])]:size-4;\n }\n\n /* MARK: Button Group */\n .cn-button-group {\n @apply has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-e-lg has-[>[data-variant=outline]]:[&>input]:border-neutral-interactive has-[>[data-variant=outline]]:[&>input:focus-visible]:border-primary-fill has-[>[data-variant=outline]]:*:data-[slot=input-group]:border-neutral-interactive has-[>[data-variant=outline]]:[&>[data-slot=input-group]:has(:focus-visible)]:border-primary-fill has-[>[data-variant=outline]]:*:data-[slot=select-trigger]:border-neutral-interactive has-[>[data-variant=outline]]:[&>[data-slot=select-trigger]:focus-visible]:border-primary-fill;\n }\n\n .cn-button-group-orientation-horizontal {\n @apply flex-row;\n }\n\n .cn-button-group-orientation-vertical {\n @apply flex-col;\n }\n\n .cn-button-group-text {\n @apply border-neutral-interactive bg-neutral-interactive/60 text-neutral-text font-medium;\n }\n\n .cn-button-group-separator {\n @apply bg-neutral-interactive;\n }\n\n /* MARK: Input */\n .cn-input {\n @apply border bg-clip-padding transition-[background-color,color,border-color,box-shadow] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] selection:bg-primary-fill selection:text-primary-on-fill focus-visible:border-primary-fill focus-visible:ring-primary-fill/30 aria-invalid:ring-danger-fill/20 dark:aria-invalid:ring-danger-fill/40 aria-invalid:border-danger-fill dark:aria-invalid:border-danger-fill/60 focus-visible:ring-3 aria-invalid:ring-3;\n }\n\n .cn-input-variant-default {\n @apply border-transparent bg-neutral-interactive/60 text-neutral-text dark:bg-neutral-interactive/50 hover:bg-neutral-interactive dark:hover:bg-neutral-interactive/80 focus-visible:bg-neutral-surface dark:focus-visible:bg-neutral-surface-alt;\n }\n\n .cn-input-variant-outline {\n @apply border-neutral-interactive bg-neutral-surface text-neutral-text dark:bg-transparent hover:border-neutral-interactive-hover hover:bg-neutral-surface-alt/60 dark:hover:border-neutral-interactive-hover dark:hover:bg-neutral-interactive/30 focus-visible:bg-neutral-surface dark:focus-visible:bg-transparent;\n }\n\n .cn-input-variant-ghost {\n @apply border-transparent bg-transparent text-neutral-text hover:bg-neutral-interactive/60 dark:hover:bg-neutral-interactive/50 focus-visible:bg-neutral-surface dark:focus-visible:bg-neutral-surface-alt;\n }\n\n .cn-input-size-xs {\n @apply h-6 rounded-md px-2 text-xs file:h-4 file:text-xs file:font-medium;\n }\n\n .cn-input-size-sm {\n @apply h-7 rounded-md px-2.5 text-xs file:h-5 file:text-xs file:font-medium;\n }\n\n .cn-input-size-default {\n @apply h-8 rounded-lg px-3 text-sm file:h-6 file:text-xs file:font-medium;\n }\n\n .cn-input-size-lg {\n @apply h-9 rounded-lg px-3.5 text-sm file:h-7 file:text-sm file:font-medium;\n }\n\n /* MARK: Textarea */\n .cn-textarea {\n @apply relative flex w-full min-w-0 flex-col overflow-hidden border bg-clip-padding py-0 outline-none transition-[background-color,color,border-color,box-shadow] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)];\n }\n\n .cn-textarea-variant-default {\n @apply border-transparent bg-neutral-interactive/60 text-neutral-text dark:bg-neutral-interactive/50 hover:bg-neutral-interactive dark:hover:bg-neutral-interactive/80 has-[:focus-visible]:border-primary-fill has-[:focus-visible]:bg-neutral-surface dark:has-[:focus-visible]:bg-neutral-surface-alt has-[:focus-visible]:ring-3 has-[:focus-visible]:ring-primary-fill/30;\n }\n\n .cn-textarea-variant-outline {\n @apply border-neutral-interactive bg-neutral-surface text-neutral-text dark:bg-transparent hover:border-neutral-interactive-hover hover:bg-neutral-surface-alt/60 dark:hover:border-neutral-interactive-hover dark:hover:bg-neutral-interactive/30 has-[:focus-visible]:border-primary-fill has-[:focus-visible]:bg-neutral-surface dark:has-[:focus-visible]:bg-transparent has-[:focus-visible]:ring-3 has-[:focus-visible]:ring-primary-fill/30;\n }\n\n .cn-textarea-variant-ghost {\n @apply border-transparent bg-transparent text-neutral-text hover:bg-neutral-interactive/60 dark:hover:bg-neutral-interactive/50 has-[:focus-visible]:border-primary-fill has-[:focus-visible]:bg-neutral-surface dark:has-[:focus-visible]:bg-neutral-surface-alt has-[:focus-visible]:ring-3 has-[:focus-visible]:ring-primary-fill/30;\n }\n\n .cn-textarea-size-xs {\n @apply rounded-md text-xs;\n }\n\n .cn-textarea-size-sm {\n @apply rounded-md text-xs;\n }\n\n .cn-textarea-size-default {\n @apply rounded-lg text-sm;\n }\n\n .cn-textarea-size-lg {\n @apply rounded-lg text-sm;\n }\n\n /* MARK: Select */\n .cn-select-trigger {\n @apply border border-neutral-interactive bg-neutral-surface text-neutral-text dark:bg-transparent hover:border-neutral-interactive-hover hover:bg-neutral-interactive dark:hover:bg-neutral-interactive active:bg-neutral-interactive-hover data-popup-open:border-neutral-interactive-hover data-popup-open:bg-neutral-interactive bg-clip-padding font-medium transition-[background-color,color,border-color,box-shadow] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] data-placeholder:text-neutral-text-muted data-placeholder:font-normal focus-visible:border-primary-fill focus-visible:ring-primary-fill/30 aria-invalid:ring-danger-fill/20 dark:aria-invalid:ring-danger-fill/40 aria-invalid:border-danger-fill dark:aria-invalid:border-danger-fill/60 focus-visible:ring-3 aria-invalid:ring-3;\n }\n\n .cn-select-trigger-size-xs {\n @apply h-6 gap-1 rounded-md px-2 text-xs *:data-[slot=select-value]:gap-1 [&_svg:not([class*='size-'])]:size-3;\n }\n\n .cn-select-trigger-size-sm {\n @apply h-7 gap-1.5 rounded-md px-2.5 text-xs *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-3.5;\n }\n\n .cn-select-trigger-size-default {\n @apply h-8 gap-1.5 rounded-lg px-3 text-sm *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4;\n }\n\n .cn-select-trigger-size-lg {\n @apply h-9 gap-2 rounded-lg px-3.5 text-sm *:data-[slot=select-value]:gap-2 [&_svg:not([class*='size-'])]:size-4;\n }\n\n .cn-select-value {\n @apply flex flex-1 text-start;\n }\n\n .cn-select-value-aria {\n @apply data-placeholder:text-neutral-text-muted;\n }\n\n .cn-select-trigger-icon {\n @apply pointer-events-none shrink-0 text-current opacity-60 transition-opacity duration-150 group-hover/select-trigger:opacity-100 group-focus-visible/select-trigger:opacity-100 group-data-[popup-open]/select-trigger:opacity-100;\n }\n\n .cn-select-content {\n @apply bg-neutral-surface dark:bg-neutral-surface-alt text-neutral-text border border-neutral-interactive/80 data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 min-w-36 rounded-xl shadow-lg duration-150 ease-[cubic-bezier(0.22,1,0.36,1)] data-[size=xs]:rounded-lg data-[size=sm]:rounded-lg;\n }\n\n .cn-select-content-logical {\n @apply data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2;\n }\n\n .cn-select-list {\n @apply max-h-(--available-height) scroll-py-1 overflow-y-auto p-1 outline-none;\n }\n\n .cn-select-label {\n @apply text-neutral-text-muted px-2.5 py-1.5 text-xs font-medium select-none;\n }\n\n .cn-select-item {\n @apply focus:bg-neutral-interactive focus:text-neutral-text hover:bg-neutral-interactive data-highlighted:bg-neutral-interactive data-highlighted:text-neutral-text active:bg-neutral-interactive-hover data-selected:font-medium not-data-[variant=destructive]:focus:**:text-neutral-text not-data-[variant=destructive]:data-highlighted:**:text-neutral-text gap-2 rounded-lg py-1.5 pe-7 ps-2.5 text-sm font-normal data-[size=xs]:gap-1.5 data-[size=xs]:rounded-sm data-[size=xs]:py-1 data-[size=xs]:pe-6 data-[size=xs]:ps-2 data-[size=xs]:text-xs data-[size=sm]:gap-1.5 data-[size=sm]:rounded-sm data-[size=sm]:py-1 data-[size=sm]:pe-6 data-[size=sm]:ps-2 data-[size=sm]:text-xs [&_svg:not([class*='size-'])]:size-4 data-[size=xs]:[&_svg:not([class*='size-'])]:size-3.5 data-[size=sm]:[&_svg:not([class*='size-'])]:size-3.5 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2;\n }\n\n .cn-select-item-aria {\n @apply data-focused:bg-neutral-interactive data-focused:text-neutral-text;\n }\n\n .cn-select-item-indicator {\n @apply text-neutral-text pointer-events-none absolute end-2 flex size-4 items-center justify-center group-data-[size=xs]/select-content:end-1.5 group-data-[size=xs]/select-content:size-3.5 group-data-[size=sm]/select-content:end-1.5 group-data-[size=sm]/select-content:size-3.5;\n }\n\n .cn-select-group {\n @apply scroll-my-1 p-0;\n }\n\n .cn-select-item-text {\n @apply flex flex-1 items-center gap-2;\n }\n\n .cn-select-separator {\n @apply bg-neutral-interactive -mx-1 my-1 h-px;\n }\n\n .cn-select-scroll-up-button {\n @apply bg-neutral-surface dark:bg-neutral-surface-alt text-neutral-text-muted z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-3.5;\n }\n\n .cn-select-scroll-down-button {\n @apply bg-neutral-surface dark:bg-neutral-surface-alt text-neutral-text-muted z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-3.5;\n }\n\n .cn-select-empty-aria {\n @apply text-neutral-text-muted hidden w-full justify-center py-2 text-center text-sm group-data-empty/select-list:flex;\n }\n\n /* MARK: Combobox */\n .cn-combobox-content {\n @apply bg-neutral-surface dark:bg-neutral-surface-alt text-neutral-text border border-neutral-interactive/80 data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-h-72 min-w-64 overflow-hidden rounded-2xl shadow-md duration-150 ease-[cubic-bezier(0.22,1,0.36,1)];\n }\n\n /* Flush edge-to-edge popup search header with zero focus ring and zero focus border color shift */\n .cn-combobox-popup-search,\n .cn-combobox-content .cn-input-group,\n .cn-combobox-content [data-slot=\"input-group\"] {\n @apply h-10 w-full rounded-none border-0 border-b border-neutral-interactive/80 bg-transparent shadow-none ring-0! outline-none!;\n transition: none !important;\n }\n\n .cn-combobox-content .cn-input-group,\n .cn-combobox-content .cn-input-group:focus,\n .cn-combobox-content .cn-input-group:focus-within,\n .cn-combobox-content .cn-input-group:focus-visible,\n .cn-combobox-content .cn-input-group:has(:focus),\n .cn-combobox-content .cn-input-group:has(:focus-visible),\n .cn-combobox-content [data-slot=\"input-group\"],\n .cn-combobox-content [data-slot=\"input-group\"]:focus,\n .cn-combobox-content [data-slot=\"input-group\"]:focus-within,\n .cn-combobox-content [data-slot=\"input-group\"]:focus-visible,\n .cn-combobox-content [data-slot=\"input-group\"]:has(:focus),\n .cn-combobox-content [data-slot=\"input-group\"]:has(:focus-visible),\n .cn-combobox-popup-search,\n .cn-combobox-popup-search:focus,\n .cn-combobox-popup-search:focus-within,\n .cn-combobox-popup-search:focus-visible,\n .cn-combobox-popup-search:has(:focus),\n .cn-combobox-popup-search:has(:focus-visible) {\n border-color: color-mix(in oklab, var(--neutral-interactive) 80%, transparent) !important;\n border-bottom-color: color-mix(in oklab, var(--neutral-interactive) 80%, transparent) !important;\n background-color: transparent !important;\n box-shadow: none !important;\n outline: none !important;\n --tw-ring-shadow: 0 0 #0000 !important;\n --tw-ring-offset-shadow: 0 0 #0000 !important;\n }\n\n .cn-combobox-content-logical {\n @apply data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2;\n }\n\n .cn-combobox-label {\n @apply text-neutral-text-muted px-3 py-2 text-xs font-medium;\n }\n\n .cn-combobox-item {\n @apply data-highlighted:bg-neutral-surface-alt data-highlighted:text-neutral-text not-data-[variant=destructive]:data-highlighted:**:text-neutral-text data-[variant=destructive]:text-danger-text data-[variant=destructive]:data-highlighted:bg-danger-surface-alt data-[variant=destructive]:data-highlighted:text-danger-text font-medium [&_svg:not([class*='size-'])]:size-4 transition-colors duration-150;\n }\n\n .cn-combobox-item-aria {\n @apply data-focused:bg-neutral-surface-alt data-focused:text-neutral-text not-data-[variant=destructive]:data-focused:**:text-neutral-text;\n }\n\n .cn-combobox-item-indicator {\n @apply flex size-4 items-center justify-center text-primary-fill pointer-events-none;\n }\n\n .cn-combobox-empty {\n @apply text-neutral-text-muted empty:hidden flex w-full justify-center py-4 text-center text-sm;\n }\n\n .cn-combobox-list {\n @apply no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1.5 overflow-y-auto p-1.5 data-empty:p-0;\n }\n\n .cn-combobox-item-text {\n @apply flex flex-1 items-center gap-2;\n }\n\n .cn-combobox-separator {\n @apply bg-neutral-interactive -mx-1.5 my-1.5 h-px;\n }\n\n .cn-combobox-actions {\n @apply flex items-center gap-0.5 shrink-0;\n }\n\n .cn-combobox-trigger {\n @apply flex items-center justify-center [&_svg:not([class*='size-'])]:size-4;\n }\n\n .cn-combobox-trigger-icon {\n @apply text-current opacity-60 transition-opacity duration-150 group-hover/combobox-trigger:opacity-100 group-data-[open]/combobox-trigger:opacity-100 size-4;\n }\n\n .cn-combobox-clear {\n @apply flex items-center justify-center text-neutral-text-muted hover:text-neutral-text transition-colors not-data-[visible]:hidden;\n }\n\n .cn-combobox-clear-icon {\n @apply size-3.5;\n }\n\n .cn-combobox-chips {\n @apply flex flex-wrap items-center bg-clip-padding;\n }\n\n .cn-combobox-chip {\n @apply flex items-center justify-center;\n }\n\n .cn-combobox-chip-remove {\n @apply inline-flex items-center justify-center rounded-xs p-0.5 cursor-pointer bg-transparent hover:bg-transparent active:bg-transparent text-neutral-text-muted hover:text-neutral-text outline-none transition-colors duration-150;\n }\n\n /* MARK: Input Group */\n .cn-input-group {\n @apply relative flex w-full min-w-0 items-center border bg-clip-padding outline-none transition-[background-color,color,border-color,box-shadow] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] has-[>textarea]:h-auto has-[>[data-slot=textarea-wrapper]]:h-auto has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col;\n }\n\n /* Universal child control resets inside input group: guarantee seamless transparent background, zero borders, and zero separate rings */\n .cn-input-group [data-slot=\"input\"],\n .cn-input-group [data-slot=\"input-wrapper\"],\n .cn-input-group [data-slot=\"input-group-control\"],\n .cn-input-group [data-slot=\"textarea-wrapper\"],\n .cn-input-group > input,\n .cn-input-group > textarea {\n @apply border-0! bg-transparent! shadow-none! ring-0! rounded-none!;\n }\n\n .cn-input-group [data-slot=\"input\"]:hover,\n .cn-input-group [data-slot=\"input\"]:focus,\n .cn-input-group [data-slot=\"input\"]:focus-visible,\n .cn-input-group [data-slot=\"input-wrapper\"]:hover,\n .cn-input-group [data-slot=\"input-wrapper\"]:focus,\n .cn-input-group [data-slot=\"input-wrapper\"]:focus-visible,\n .cn-input-group > input:hover,\n .cn-input-group > input:focus,\n .cn-input-group > input:focus-visible,\n .cn-input-group > textarea:hover,\n .cn-input-group > textarea:focus,\n .cn-input-group > textarea:focus-visible {\n @apply bg-transparent! ring-0! shadow-none! border-transparent! outline-none!;\n }\n\n /* Default proportional padding when no inline-start addon exists */\n .cn-input-group:not(:has(>[data-align=\"inline-start\"])) [data-slot=\"input\"],\n .cn-input-group:not(:has(>[data-align=\"inline-start\"])) [data-slot=\"input-group-control\"],\n .cn-input-group:not(:has(>[data-align=\"inline-start\"])) > input {\n @apply ps-3;\n }\n .cn-input-group[data-size=\"xs\"]:not(:has(>[data-align=\"inline-start\"])) [data-slot=\"input\"],\n .cn-input-group[data-size=\"xs\"]:not(:has(>[data-align=\"inline-start\"])) [data-slot=\"input-group-control\"],\n .cn-input-group[data-size=\"xs\"]:not(:has(>[data-align=\"inline-start\"])) > input {\n @apply ps-2;\n }\n .cn-input-group[data-size=\"sm\"]:not(:has(>[data-align=\"inline-start\"])) [data-slot=\"input\"],\n .cn-input-group[data-size=\"sm\"]:not(:has(>[data-align=\"inline-start\"])) [data-slot=\"input-group-control\"],\n .cn-input-group[data-size=\"sm\"]:not(:has(>[data-align=\"inline-start\"])) > input {\n @apply ps-2.5;\n }\n .cn-input-group[data-size=\"lg\"]:not(:has(>[data-align=\"inline-start\"])) [data-slot=\"input\"],\n .cn-input-group[data-size=\"lg\"]:not(:has(>[data-align=\"inline-start\"])) [data-slot=\"input-group-control\"],\n .cn-input-group[data-size=\"lg\"]:not(:has(>[data-align=\"inline-start\"])) > input {\n @apply ps-3.5;\n }\n .cn-input-group[data-shape=\"pill\"]:not(:has(>[data-align=\"inline-start\"])) [data-slot=\"input\"],\n .cn-input-group[data-shape=\"pill\"]:not(:has(>[data-align=\"inline-start\"])) [data-slot=\"input-group-control\"],\n .cn-input-group[data-shape=\"pill\"]:not(:has(>[data-align=\"inline-start\"])) > input {\n @apply ps-4;\n }\n\n /* Default proportional padding when no inline-end addon exists */\n .cn-input-group:not(:has(>[data-align=\"inline-end\"])) [data-slot=\"input\"],\n .cn-input-group:not(:has(>[data-align=\"inline-end\"])) [data-slot=\"input-group-control\"],\n .cn-input-group:not(:has(>[data-align=\"inline-end\"])) > input {\n @apply pe-3;\n }\n .cn-input-group[data-size=\"xs\"]:not(:has(>[data-align=\"inline-end\"])) [data-slot=\"input\"],\n .cn-input-group[data-size=\"xs\"]:not(:has(>[data-align=\"inline-end\"])) [data-slot=\"input-group-control\"],\n .cn-input-group[data-size=\"xs\"]:not(:has(>[data-align=\"inline-end\"])) > input {\n @apply pe-2;\n }\n .cn-input-group[data-size=\"sm\"]:not(:has(>[data-align=\"inline-end\"])) [data-slot=\"input\"],\n .cn-input-group[data-size=\"sm\"]:not(:has(>[data-align=\"inline-end\"])) [data-slot=\"input-group-control\"],\n .cn-input-group[data-size=\"sm\"]:not(:has(>[data-align=\"inline-end\"])) > input {\n @apply pe-2.5;\n }\n .cn-input-group[data-size=\"lg\"]:not(:has(>[data-align=\"inline-end\"])) [data-slot=\"input\"],\n .cn-input-group[data-size=\"lg\"]:not(:has(>[data-align=\"inline-end\"])) [data-slot=\"input-group-control\"],\n .cn-input-group[data-size=\"lg\"]:not(:has(>[data-align=\"inline-end\"])) > input {\n @apply pe-3.5;\n }\n .cn-input-group[data-shape=\"pill\"]:not(:has(>[data-align=\"inline-end\"])) [data-slot=\"input\"],\n .cn-input-group[data-shape=\"pill\"]:not(:has(>[data-align=\"inline-end\"])) [data-slot=\"input-group-control\"],\n .cn-input-group[data-shape=\"pill\"]:not(:has(>[data-align=\"inline-end\"])) > input {\n @apply pe-4;\n }\n\n /* Logical addon spacing adjustments when addons are present */\n .cn-input-group:has(>[data-align=\"inline-start\"]) [data-slot=\"input\"],\n .cn-input-group:has(>[data-align=\"inline-start\"]) [data-slot=\"input-group-control\"],\n .cn-input-group:has(>[data-align=\"inline-start\"]) > input {\n @apply ps-1.5;\n }\n\n .cn-input-group:has(>[data-align=\"inline-end\"]) [data-slot=\"input\"],\n .cn-input-group:has(>[data-align=\"inline-end\"]) [data-slot=\"input-group-control\"],\n .cn-input-group:has(>[data-align=\"inline-end\"]) > input {\n @apply pe-1.5;\n }\n\n .cn-input-group:has(>[data-align=\"block-start\"]) [data-slot=\"input\"],\n .cn-input-group:has(>[data-align=\"block-start\"]) > input {\n @apply pb-2;\n }\n\n .cn-input-group:has(>[data-align=\"block-end\"]) [data-slot=\"input\"],\n .cn-input-group:has(>[data-align=\"block-end\"]) > input {\n @apply pt-2;\n }\n\n .cn-input-group-addon {\n @apply text-neutral-text-muted **:data-[slot=kbd]:bg-neutral-text/10 h-auto gap-2 py-1 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-md **:data-[slot=kbd]:px-1.5 [&>svg:not([class*='size-'])]:size-4;\n }\n\n .cn-input-group-addon-align-inline-start {\n @apply ps-2.5 has-[>button]:-ms-1 has-[>kbd]:-ms-1;\n }\n\n .cn-input-group-addon-align-inline-end {\n @apply pe-2.5 has-[>button]:-me-1 has-[>kbd]:-me-1;\n }\n\n .cn-input-group-addon-align-block-start {\n @apply px-3 pt-2.5 group-has-[>input]/input-group:pt-3 [.border-b]:pb-2;\n }\n\n .cn-input-group-addon-align-block-end {\n @apply px-3 pb-2.5 group-has-[>input]/input-group:pb-3 [.border-t]:pt-2;\n }\n\n .cn-input-group-button {\n @apply gap-1.5 rounded-md text-xs;\n }\n\n .cn-input-group-button-size-xs {\n @apply h-5 gap-1 rounded-sm px-1.5 text-xs [&>svg:not([class*='size-'])]:size-3;\n }\n\n .cn-input-group-button-size-sm {\n @apply h-6 gap-1 rounded-md px-2 text-xs [&>svg:not([class*='size-'])]:size-3.5;\n }\n\n .cn-input-group-button-size-default {\n @apply h-6.5 gap-1.5 rounded-md px-2.5 text-xs [&>svg:not([class*='size-'])]:size-4;\n }\n\n .cn-input-group-button-size-lg {\n @apply h-7.5 gap-1.5 rounded-md px-3 text-sm [&>svg:not([class*='size-'])]:size-4;\n }\n\n .cn-input-group-button-size-icon-xs {\n @apply size-5 rounded-sm p-0 has-[>svg]:p-0 [&>svg:not([class*='size-'])]:size-3;\n }\n\n .cn-input-group-button-size-icon-sm {\n @apply size-6 rounded-md p-0 has-[>svg]:p-0 [&>svg:not([class*='size-'])]:size-3.5;\n }\n\n .cn-input-group-button-size-icon {\n @apply size-6.5 rounded-md p-0 has-[>svg]:p-0 [&>svg:not([class*='size-'])]:size-4;\n }\n\n .cn-input-group-button-size-icon-lg {\n @apply size-7.5 rounded-md p-0 has-[>svg]:p-0 [&>svg:not([class*='size-'])]:size-4;\n }\n\n .cn-input-group-text {\n @apply text-neutral-text-muted gap-2 text-sm select-none [&_svg:not([class*='size-'])]:size-4;\n }\n\n .cn-input-group-input {\n @apply flex-1 border-0! bg-transparent! shadow-none! ring-0! rounded-none! h-full hover:bg-transparent! dark:hover:bg-transparent! focus-visible:bg-transparent! dark:focus-visible:bg-transparent! focus-visible:ring-0! focus-visible:border-transparent! aria-invalid:ring-0!;\n }\n\n .cn-input-group-textarea {\n @apply flex-1 resize-none border-0! bg-transparent! py-2 shadow-none! ring-0! rounded-none! hover:bg-transparent! dark:hover:bg-transparent! focus-visible:bg-transparent! dark:focus-visible:bg-transparent! focus-visible:ring-0! aria-invalid:ring-0!;\n }\n\n /* MARK: Input OTP */\n .animate-caret-blink {\n animation: caret-blink 1.25s ease-out infinite;\n }\n\n .cn-input-otp {\n @apply flex items-center has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50;\n }\n\n .cn-input-otp-group {\n @apply flex items-center isolate relative has-aria-invalid:border-danger-fill has-aria-invalid:ring-3 has-aria-invalid:ring-danger-fill/20 dark:has-aria-invalid:ring-danger-fill/40 [&>[data-slot=input-otp-slot]:not(:last-child)]:rounded-e-none [&>[data-slot=input-otp-slot]:not(:first-child)]:rounded-s-none [&>[data-slot=input-otp-slot]:not(:first-child)]:-ms-px [&>[data-slot=input-otp-slot]:first-child]:rounded-s-[inherit] [&>[data-slot=input-otp-slot]:last-child]:rounded-e-[inherit];\n }\n\n .cn-input-otp-slot {\n @apply relative flex items-center justify-center font-medium outline-none transition-[background-color,color,border-color,box-shadow] duration-150 select-none data-[active=true]:z-10;\n }\n\n .cn-input-otp-caret-line {\n @apply animate-caret-blink bg-neutral-text w-px duration-1000;\n }\n\n .cn-input-otp-separator {\n @apply text-neutral-text-muted flex items-center justify-center select-none;\n }\n\n /* MARK: Field */\n .cn-field-set {\n @apply gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3;\n }\n\n .cn-field-legend {\n @apply mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base;\n }\n\n .cn-field-group {\n @apply gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4;\n }\n\n .cn-field {\n @apply data-[invalid=true]:text-danger-text gap-2;\n }\n\n .cn-field-content {\n @apply gap-2;\n }\n\n .cn-field-label {\n @apply has-data-checked:bg-neutral-interactive/30 gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-2xl has-[>[data-slot=field]]:border has-[>[data-slot=field]]:not-has-[:disabled,[data-disabled]]:hover:bg-neutral-interactive/40 has-[>[data-slot=field]]:has-[:focus-visible]:border-primary-fill has-[>[data-slot=field]]:has-[:focus-visible]:ring-primary-fill/50 has-[>[data-slot=field]]:has-[:focus-visible]:ring-3 *:data-[slot=field]:p-4;\n }\n\n .cn-field-label-aria {\n @apply has-data-selected:bg-neutral-interactive/30;\n }\n\n .cn-field-title {\n @apply gap-2 leading-snug text-sm font-medium group-data-[disabled=true]/field:opacity-50;\n }\n\n .cn-field-description {\n @apply text-neutral-text-muted text-left text-xs leading-snug [[data-variant=legend]+&]:-mt-1.5 [[data-slot=field-label]+&]:-mt-1;\n }\n\n .cn-field-caption {\n @apply text-left text-xs leading-snug data-[intent=neutral]:text-neutral-text-muted data-[intent=danger]:text-danger-text data-[intent=success]:text-success-text data-[intent=warning]:text-warning-text data-[intent=info]:text-info-text data-[intent=primary]:text-primary-text;\n }\n\n .cn-field-separator {\n @apply -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2;\n }\n\n .cn-field-separator-content {\n @apply text-neutral-text-muted px-2;\n }\n\n /* MARK: Tabs */\n .cn-tabs {\n @apply gap-3 data-[orientation=vertical]:items-start;\n }\n\n .cn-tabs-list {\n @apply select-none data-[orientation=vertical]:self-start data-[orientation=vertical]:h-fit data-[orientation=vertical]:w-fit;\n }\n\n .cn-tabs-list[data-variant=\"line\"] {\n @apply rounded-none p-0 h-auto bg-transparent border-b border-neutral-interactive/60;\n }\n\n .cn-tabs-list[data-variant=\"line\"][data-orientation=\"vertical\"] {\n @apply border-0 border-none;\n }\n\n .cn-tabs-trigger {\n @apply select-none;\n }\n\n .cn-tabs-content {\n @apply text-sm flex-1 outline-none;\n }\n\n /* MARK: Card */\n .cn-card {\n @apply relative flex flex-col overflow-hidden border bg-clip-padding py-(--card-spacing) text-sm transition-[background-color,color,border-color,box-shadow,--current-surface] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] has-[>img:first-child]:pt-0;\n }\n\n .cn-card-variant-default {\n @apply border-transparent [--current-surface:var(--neutral-surface-alt)] bg-(--current-surface) text-neutral-text;\n }\n\n .cn-card-variant-outline {\n @apply border-neutral-interactive [--current-surface:var(--neutral-surface)] bg-(--current-surface) text-neutral-text dark:bg-transparent;\n }\n\n .cn-card-variant-ghost {\n @apply border-transparent bg-transparent text-neutral-text shadow-none;\n }\n\n .cn-card-size-sm {\n @apply gap-3 rounded-xl [--card-spacing:--spacing(4)] *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl;\n }\n\n .cn-card-size-default {\n @apply gap-4 rounded-2xl [--card-spacing:--spacing(5)] *:[img:first-child]:rounded-t-2xl *:[img:last-child]:rounded-b-2xl;\n }\n\n .cn-card-size-lg {\n @apply gap-5 rounded-3xl [--card-spacing:--spacing(6)] *:[img:first-child]:rounded-t-3xl *:[img:last-child]:rounded-b-3xl;\n }\n\n .cn-card-interactive {\n @apply cursor-pointer select-none outline-none focus-visible:ring-3;\n }\n\n .cn-card-header {\n @apply gap-1 rounded-t-[inherit] px-(--card-spacing) [.border-b]:pb-(--card-spacing);\n }\n\n .cn-card-title {\n @apply text-base font-medium leading-snug group-data-[size=sm]/card:text-sm group-data-[size=lg]/card:text-lg;\n }\n\n .cn-card-description {\n @apply text-neutral-text-secondary text-sm group-data-[size=sm]/card:text-xs;\n }\n\n .cn-card-content {\n @apply px-(--card-spacing);\n }\n\n .cn-card-footer {\n @apply rounded-b-[inherit] px-(--card-spacing) [.border-t]:pt-(--card-spacing);\n }\n\n /* MARK: Accordion */\n .cn-accordion {\n @apply overflow-hidden rounded-2xl border;\n }\n\n .cn-accordion-item {\n @apply data-open:bg-neutral-interactive/50 not-last:border-b;\n }\n\n .cn-accordion-trigger {\n @apply **:data-[slot=accordion-trigger-icon]:text-neutral-text-muted gap-6 p-4 text-left text-sm font-medium hover:underline **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4;\n }\n\n .cn-accordion-content {\n @apply data-open:animate-accordion-down data-closed:animate-accordion-up px-4 text-sm;\n }\n\n .cn-accordion-content-inner {\n @apply pt-0 pb-4;\n }\n\n /* MARK: Collapsible Section */\n .cn-collapsible-section {\n @apply flex w-full flex-col;\n }\n\n .cn-collapsible-section-trigger {\n @apply text-neutral-text hover:bg-neutral-interactive/50 active:bg-neutral-interactive/80 focus-visible:border-primary-fill focus-visible:ring-primary-fill/30 rounded-lg border border-transparent px-3 py-2 text-sm font-medium transition-[background-color,border-color,color,box-shadow] duration-150 ease-[cubic-bezier(0.22,1,0.36,1)] focus-visible:ring-3;\n }\n\n .cn-collapsible-section-trigger-label {\n @apply flex min-w-0 flex-1 items-center gap-2 text-start;\n }\n\n .cn-collapsible-section-trigger-icon {\n @apply text-neutral-text-muted group-hover/collapsible-section-trigger:text-neutral-text pointer-events-none ms-auto size-4 shrink-0 transition-transform duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-panel-open/collapsible-section-trigger:rotate-180 group-aria-expanded/collapsible-section-trigger:rotate-180;\n }\n\n .cn-collapsible-section-panel {\n @apply h-(--collapsible-panel-height) overflow-hidden text-sm transition-[height,opacity] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] data-ending-style:h-0 data-ending-style:opacity-0 data-starting-style:h-0 data-starting-style:opacity-0;\n }\n\n .cn-collapsible-section-content {\n @apply text-neutral-text-secondary px-3 pt-2 pb-3;\n }\n\n /* MARK: Alert Dialog */\n .cn-alert-dialog-overlay {\n @apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-black/50 duration-200 supports-backdrop-filter:backdrop-blur-xs;\n }\n\n .cn-alert-dialog-content {\n @apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 bg-neutral-surface text-neutral-text shadow-2xl duration-200;\n }\n\n .cn-alert-dialog-header {\n @apply flex flex-col text-start gap-1.5;\n }\n\n .cn-alert-dialog-media {\n @apply bg-neutral-interactive mb-2 inline-flex size-12 items-center justify-center rounded-xl text-start *:[svg:not([class*='size-'])]:size-6;\n }\n\n .cn-alert-dialog-title {\n @apply text-lg font-semibold leading-none tracking-tight text-neutral-text text-start;\n }\n\n .cn-alert-dialog-description {\n @apply text-neutral-text-muted *:[a]:hover:text-neutral-text text-sm text-start leading-relaxed *:[a]:underline *:[a]:underline-offset-3;\n }\n\n /* MARK: Alert */\n .cn-alert {\n @apply relative w-full text-start border transition-colors;\n }\n\n .cn-alert-size-sm {\n @apply rounded-xl px-3 py-2.5 text-xs;\n }\n\n .cn-alert-size-default {\n @apply rounded-2xl px-4 py-3 text-sm;\n }\n\n .cn-alert-size-lg {\n @apply rounded-2xl px-5 py-4 text-base;\n }\n\n .cn-alert-variant-subtle {\n @apply bg-neutral-surface-alt border-neutral-interactive/80 text-neutral-text;\n }\n\n .cn-alert-variant-outline {\n @apply bg-transparent border-neutral-interactive text-neutral-text;\n }\n\n .cn-alert-variant-surface {\n @apply bg-neutral-surface border-neutral-interactive/80 text-neutral-text shadow-xs;\n }\n\n .cn-alert-variant-solid {\n @apply bg-neutral-fill border-neutral-fill text-neutral-on-fill;\n }\n\n /* Legacy / Backward compatibility variant classes */\n .cn-alert-variant-default {\n @apply bg-neutral-surface-alt border-neutral-interactive/80 text-neutral-text;\n }\n\n .cn-alert-variant-destructive {\n @apply bg-danger-surface border-danger-interactive text-danger-text;\n }\n\n .cn-alert-icon {\n @apply shrink-0 flex items-center justify-center text-current opacity-90;\n }\n\n .cn-alert-title {\n @apply font-medium leading-tight tracking-tight;\n }\n\n .cn-alert-description {\n @apply leading-relaxed opacity-85 text-balance md:text-pretty [&_p:not(:last-child)]:mb-2;\n }\n\n .cn-alert-action {\n @apply shrink-0 flex items-center gap-2;\n }\n\n .cn-alert-close {\n @apply shrink-0 text-current opacity-70 hover:opacity-100 hover:bg-neutral-interactive/50 transition-opacity;\n }\n\n /* Solid variant action button adaptations */\n .cn-alert-variant-solid .cn-alert-close {\n @apply text-inherit opacity-85 hover:opacity-100 hover:bg-black/20 dark:hover:bg-white/25 focus-visible:ring-current;\n }\n\n .cn-alert-variant-solid [data-slot=\"alert-action\"] button[data-variant=\"outline\"] {\n @apply border-current/30 text-current hover:bg-white/15 dark:hover:bg-white/20 active:bg-white/25;\n }\n\n .cn-alert-variant-solid [data-slot=\"alert-action\"] button[data-variant=\"ghost\"] {\n @apply text-current hover:bg-white/15 dark:hover:bg-white/20 active:bg-white/25;\n }\n\n .cn-alert-variant-solid [data-slot=\"alert-action\"] button[data-variant=\"default\"] {\n @apply bg-neutral-surface text-neutral-text hover:bg-neutral-surface/90 active:bg-neutral-surface/80;\n }\n\n /* MARK: Avatar */\n .cn-avatar {\n @apply size-8 rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6;\n }\n\n .cn-avatar-fallback {\n @apply bg-neutral-interactive text-neutral-text-muted rounded-full;\n }\n\n .cn-avatar-image {\n @apply rounded-full;\n }\n\n .cn-avatar-badge {\n @apply bg-primary-fill text-primary-on-fill ring-neutral-surface;\n }\n\n .cn-avatar-group-count {\n @apply bg-neutral-interactive text-neutral-text-muted size-8 rounded-full text-sm group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3;\n }\n\n /* MARK: Badge */\n .cn-badge {\n @apply h-5 gap-1 rounded-3xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3!;\n }\n\n .cn-badge-variant-default {\n @apply bg-primary-fill text-primary-on-fill [a]:hover:bg-primary-fill-hover;\n }\n\n .cn-badge-variant-secondary {\n @apply bg-neutral-interactive text-neutral-text [a]:hover:bg-neutral-interactive-hover;\n @apply in-data-[intent=danger]:bg-danger-interactive in-data-[intent=danger]:text-danger-text;\n @apply in-data-[intent=primary]:bg-primary-interactive in-data-[intent=primary]:text-primary-text;\n @apply in-data-[intent=success]:bg-success-interactive in-data-[intent=success]:text-success-text;\n @apply in-data-[intent=warning]:bg-warning-interactive in-data-[intent=warning]:text-warning-text;\n @apply in-data-[intent=info]:bg-info-interactive in-data-[intent=info]:text-info-text;\n }\n\n :is(\n [data-slot$=\"-item\"][data-variant=\"destructive\"][data-selected=\"true\"],\n [data-slot$=\"-item\"][data-variant=\"destructive\"]:hover,\n [data-slot$=\"-item\"][data-variant=\"destructive\"]:focus,\n [data-slot$=\"-item\"][data-variant=\"destructive\"]:focus-visible,\n [data-slot$=\"-item\"][data-variant=\"destructive\"]:active,\n [data-slot$=\"-item\"][data-variant=\"destructive\"][data-highlighted],\n [data-slot$=\"-item\"][data-variant=\"destructive\"][data-focused],\n [data-variant=\"destructive\"][data-selected=\"true\"],\n [data-variant=\"destructive\"]:hover,\n [data-variant=\"destructive\"]:focus,\n [data-variant=\"destructive\"]:focus-visible,\n [data-variant=\"destructive\"]:active,\n [data-variant=\"destructive\"][data-highlighted],\n [data-variant=\"destructive\"][data-focused]\n ) .cn-badge-variant-secondary {\n @apply bg-danger-interactive text-danger-text;\n }\n\n .cn-badge-variant-outline {\n @apply border-neutral-interactive text-neutral-text [a]:hover:bg-neutral-interactive [a]:hover:text-neutral-text-muted;\n }\n\n .cn-badge-variant-destructive {\n @apply bg-danger-surface [a]:hover:bg-danger-interactive focus-visible:ring-danger-fill/20 dark:focus-visible:ring-danger-fill/40 text-danger-text dark:bg-danger-interactive;\n }\n\n .cn-badge-variant-ghost {\n @apply hover:bg-neutral-interactive hover:text-neutral-text-muted dark:hover:bg-neutral-interactive/50;\n }\n\n .cn-badge-variant-link {\n @apply text-primary-text underline-offset-4 hover:underline;\n }\n\n /* MARK: Breadcrumb */\n .cn-breadcrumb-list {\n @apply text-neutral-text-muted gap-1.5 text-sm sm:gap-2.5;\n }\n\n .cn-breadcrumb-item {\n @apply gap-1.5;\n }\n\n .cn-breadcrumb-link {\n @apply hover:text-neutral-text transition-colors;\n }\n\n .cn-breadcrumb-page {\n @apply text-neutral-text font-normal;\n }\n\n .cn-breadcrumb-separator {\n @apply [&>svg]:size-3.5;\n }\n\n .cn-breadcrumb-ellipsis {\n @apply size-5 [&>svg]:size-4;\n }\n\n /* MARK: Command */\n .cn-command {\n @apply bg-neutral-surface text-neutral-text flex size-full flex-col overflow-hidden border border-neutral-interactive/80 shadow-md in-data-[slot=dialog-content]:border-0 in-data-[slot=dialog-content]:shadow-none in-data-[slot=dialog-content]:bg-transparent;\n }\n\n .cn-command-dialog {\n @apply p-0 overflow-hidden;\n }\n\n .cn-command-input-wrapper {\n @apply flex items-center border-b border-neutral-interactive/60 transition-colors;\n }\n\n .cn-command-input-icon {\n @apply shrink-0 text-neutral-text-muted opacity-60;\n }\n\n .cn-command-input {\n @apply w-full bg-transparent text-neutral-text placeholder:text-neutral-text-muted outline-hidden disabled:cursor-not-allowed disabled:opacity-50;\n }\n\n .cn-command-list {\n @apply no-scrollbar overflow-x-hidden overflow-y-auto outline-hidden;\n }\n\n .cn-command-empty {\n @apply py-6 text-center text-sm text-neutral-text-muted select-none;\n }\n\n .cn-command-loading {\n @apply py-6 flex items-center justify-center text-sm text-neutral-text-muted gap-2 select-none;\n }\n\n .cn-command-group {\n @apply text-neutral-text overflow-hidden **:[[cmdk-group-heading]]:text-neutral-text-muted **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:select-none;\n }\n\n .cn-command-separator {\n @apply bg-neutral-interactive/60 my-1.5 h-px w-full in-data-[slot=command-group]:-mx-2 in-data-[slot=command-group]:w-[calc(100%+1rem)];\n }\n\n .cn-command-item {\n @apply relative flex cursor-default items-center outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 transition-colors duration-100;\n @apply data-[selected=true]:bg-neutral-surface-alt data-[selected=true]:text-neutral-text data-[selected=true]:*:[svg]:text-neutral-text;\n @apply data-[variant=destructive]:text-danger-text data-[variant=destructive]:data-[selected=true]:bg-danger-surface-alt data-[variant=destructive]:data-[selected=true]:text-danger-text data-[variant=destructive]:data-[selected=true]:*:[svg]:text-danger-text;\n }\n\n .cn-command-item-aria {\n @apply data-[selected=true]:bg-neutral-surface-alt data-[selected=true]:text-neutral-text data-[selected=true]:*:[svg]:text-neutral-text;\n }\n\n .cn-command-shortcut {\n @apply ms-auto font-mono text-xs tracking-widest text-neutral-text-muted group-data-[selected=true]/command-item:text-neutral-text select-none;\n @apply group-data-[variant=destructive]/command-item:text-neutral-text-muted group-data-[variant=destructive]/command-item:group-data-[selected=true]/command-item:text-danger-text;\n @apply in-data-[variant=destructive]:text-neutral-text-muted in-data-[variant=destructive]:group-data-[selected=true]/command-item:text-danger-text;\n }\n\n .cn-command-shortcut-aria {\n @apply group-data-[selected=true]/command-item:text-neutral-text;\n }\n\n /* MARK: Context Menu */\n .cn-context-menu-content {\n @apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-neutral-surface text-neutral-text border border-neutral-interactive/80 min-w-48 rounded-xl p-1.5 shadow-md duration-100;\n }\n\n .cn-context-menu-content-logical {\n @apply data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2;\n }\n\n .cn-context-menu-item {\n @apply focus:bg-neutral-surface-alt hover:bg-neutral-surface-alt data-highlighted:bg-neutral-surface-alt focus:text-neutral-text hover:text-neutral-text data-highlighted:text-neutral-text data-[variant=destructive]:text-danger-text data-[variant=destructive]:focus:bg-danger-surface-alt data-[variant=destructive]:hover:bg-danger-surface-alt data-[variant=destructive]:data-highlighted:bg-danger-surface-alt dark:data-[variant=destructive]:focus:bg-danger-surface-alt dark:data-[variant=destructive]:hover:bg-danger-surface-alt dark:data-[variant=destructive]:data-highlighted:bg-danger-surface-alt data-[variant=destructive]:focus:text-danger-text data-[variant=destructive]:hover:text-danger-text data-[variant=destructive]:data-highlighted:text-danger-text data-[variant=destructive]:*:[svg]:text-danger-text not-data-[variant=destructive]:focus:**:text-neutral-text not-data-[variant=destructive]:hover:**:text-neutral-text not-data-[variant=destructive]:data-highlighted:**:text-neutral-text gap-2 rounded-lg px-2.5 py-1.5 text-sm font-medium data-inset:ps-8 [&_svg:not([class*='size-'])]:size-4;\n }\n\n .cn-context-menu-checkbox-item {\n @apply focus:bg-neutral-surface-alt hover:bg-neutral-surface-alt data-highlighted:bg-neutral-surface-alt focus:text-neutral-text hover:text-neutral-text data-highlighted:text-neutral-text focus:**:text-neutral-text hover:**:text-neutral-text data-highlighted:**:text-neutral-text gap-2 rounded-lg px-2.5 py-1.5 text-sm font-medium data-inset:ps-8 [&_svg:not([class*='size-'])]:size-4;\n }\n\n .cn-context-menu-radio-item {\n @apply focus:bg-neutral-surface-alt hover:bg-neutral-surface-alt data-highlighted:bg-neutral-surface-alt focus:text-neutral-text hover:text-neutral-text data-highlighted:text-neutral-text focus:**:text-neutral-text hover:**:text-neutral-text data-highlighted:**:text-neutral-text gap-2 rounded-lg px-2.5 py-1.5 text-sm font-medium data-inset:ps-8 [&_svg:not([class*='size-'])]:size-4;\n }\n\n .cn-context-menu-item-indicator {\n @apply flex items-center justify-center shrink-0;\n }\n\n .cn-context-menu-label {\n @apply text-neutral-text-muted px-2.5 py-2 text-xs font-semibold data-inset:ps-8;\n }\n\n .cn-context-menu-separator {\n @apply bg-neutral-interactive/60 -mx-1.5 my-1.5 h-px;\n }\n\n .cn-context-menu-shortcut {\n @apply text-neutral-text-muted group-focus/context-menu-item:text-neutral-text group-hover/context-menu-item:text-neutral-text group-data-highlighted/context-menu-item:text-neutral-text ms-auto text-xs tracking-widest font-mono;\n @apply group-data-[variant=destructive]/context-menu-item:text-neutral-text-muted group-focus/context-menu-item:group-data-[variant=destructive]/context-menu-item:text-danger-text group-hover/context-menu-item:group-data-[variant=destructive]/context-menu-item:text-danger-text group-data-highlighted/context-menu-item:group-data-[variant=destructive]/context-menu-item:text-danger-text;\n }\n\n .cn-context-menu-sub-trigger {\n @apply focus:bg-neutral-surface-alt hover:bg-neutral-surface-alt data-highlighted:bg-neutral-surface-alt focus:text-neutral-text hover:text-neutral-text data-highlighted:text-neutral-text data-open:bg-neutral-surface-alt data-open:text-neutral-text not-data-[variant=destructive]:focus:**:text-neutral-text not-data-[variant=destructive]:hover:**:text-neutral-text not-data-[variant=destructive]:data-highlighted:**:text-neutral-text gap-2 rounded-lg px-2.5 py-1.5 text-sm font-medium data-inset:ps-8 [&_svg:not([class*='size-'])]:size-4;\n }\n\n .cn-context-menu-sub-content {\n @apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-neutral-surface text-neutral-text border border-neutral-interactive/80 min-w-36 rounded-xl p-1.5 shadow-md duration-100;\n }\n\n .cn-context-menu-subcontent {\n @apply shadow-md;\n }\n\n /* MARK: Dialog */\n .cn-dialog-overlay {\n @apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-black/50 duration-200 supports-backdrop-filter:backdrop-blur-xs;\n }\n\n .cn-dialog-content {\n @apply bg-neutral-surface text-neutral-text data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 shadow-2xl duration-200;\n }\n\n .cn-dialog-close {\n @apply text-neutral-text-muted hover:text-neutral-text hover:bg-neutral-interactive/50 transition-opacity;\n }\n\n .cn-dialog-header {\n @apply gap-1.5;\n }\n\n .cn-dialog-footer {\n @apply gap-2;\n }\n\n .cn-dialog-title {\n @apply text-base leading-none font-medium;\n }\n\n .cn-dialog-description {\n @apply text-neutral-text-muted *:[a]:hover:text-neutral-text text-sm *:[a]:underline *:[a]:underline-offset-3;\n }\n\n /* MARK: Drawer */\n .cn-drawer-overlay {\n @apply bg-black/30 supports-backdrop-filter:backdrop-blur-sm;\n }\n\n .cn-drawer-content {\n @apply before:bg-neutral-surface dark:before:bg-neutral-surface-alt before:border-neutral-interactive relative flex h-auto flex-col bg-transparent p-4 text-sm before:absolute before:inset-2 before:-z-10 before:rounded-4xl before:border before:shadow-xl;\n }\n\n .cn-drawer-popup {\n @apply bg-neutral-surface dark:bg-neutral-surface-alt text-neutral-text border-neutral-interactive dark:border-neutral-interactive rounded-4xl border text-sm shadow-xl [--drawer-bleed-background:transparent] [--drawer-inset:--spacing(2)] [--drawer-stacked-shadow:0_-20px_25px_-5px_rgb(0_0_0/0.1),0_-8px_10px_-6px_rgb(0_0_0/0.1)] data-[swipe-direction=down]:data-nested-drawer-open:shadow-(--drawer-stacked-shadow);\n }\n\n .cn-drawer-handle {\n @apply bg-neutral-interactive mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full;\n }\n\n .cn-drawer-swipe-handle {\n @apply after:bg-neutral-interactive after:block after:shrink-0 after:rounded-full group-data-[swipe-axis=y]/drawer-popup:h-3 group-data-[swipe-axis=y]/drawer-popup:w-full group-data-[swipe-axis=y]/drawer-popup:justify-center group-data-[swipe-axis=y]/drawer-popup:after:h-1.5 group-data-[swipe-axis=y]/drawer-popup:after:w-[100px] group-data-[swipe-direction=down]/drawer-popup:items-end group-data-[swipe-direction=up]/drawer-popup:items-start group-data-[swipe-axis=x]/drawer-popup:h-full group-data-[swipe-axis=x]/drawer-popup:w-3 group-data-[swipe-axis=x]/drawer-popup:items-center group-data-[swipe-axis=x]/drawer-popup:after:h-[100px] group-data-[swipe-axis=x]/drawer-popup:after:w-1.5 group-data-[swipe-direction=left]/drawer-popup:justify-start group-data-[swipe-direction=right]/drawer-popup:justify-end;\n }\n\n .cn-drawer-header {\n @apply gap-0.5 p-4 md:gap-1.5 md:text-left;\n }\n\n .cn-drawer-header-base {\n @apply gap-0.5 p-4 pb-0 md:gap-1.5 md:text-left;\n }\n\n .cn-drawer-title {\n @apply text-neutral-text text-base font-medium;\n }\n\n .cn-drawer-description {\n @apply text-neutral-text-muted text-sm;\n }\n\n .cn-drawer-footer {\n @apply gap-2 p-4;\n }\n\n .cn-drawer-footer-base {\n @apply gap-2 p-4 pt-0;\n }\n\n /* MARK: Dropdown Menu */\n .cn-dropdown-menu-content {\n @apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-neutral-surface text-neutral-text border border-neutral-interactive/80 min-w-48 rounded-xl p-1.5 shadow-md duration-100;\n }\n\n .cn-dropdown-menu-content-logical {\n @apply data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2;\n }\n\n .cn-dropdown-menu-item {\n @apply focus:bg-neutral-surface-alt hover:bg-neutral-surface-alt data-highlighted:bg-neutral-surface-alt focus:text-neutral-text hover:text-neutral-text data-highlighted:text-neutral-text data-[variant=destructive]:text-danger-text data-[variant=destructive]:focus:bg-danger-surface-alt data-[variant=destructive]:hover:bg-danger-surface-alt data-[variant=destructive]:data-highlighted:bg-danger-surface-alt dark:data-[variant=destructive]:focus:bg-danger-surface-alt dark:data-[variant=destructive]:hover:bg-danger-surface-alt dark:data-[variant=destructive]:data-highlighted:bg-danger-surface-alt data-[variant=destructive]:focus:text-danger-text data-[variant=destructive]:hover:text-danger-text data-[variant=destructive]:data-highlighted:text-danger-text data-[variant=destructive]:*:[svg]:text-danger-text not-data-[variant=destructive]:focus:**:text-neutral-text not-data-[variant=destructive]:hover:**:text-neutral-text not-data-[variant=destructive]:data-highlighted:**:text-neutral-text gap-2 rounded-lg px-2.5 py-1.5 text-sm font-medium data-inset:ps-8 [&_svg:not([class*='size-'])]:size-4;\n }\n\n .cn-dropdown-menu-checkbox-item {\n @apply focus:bg-neutral-surface-alt hover:bg-neutral-surface-alt data-highlighted:bg-neutral-surface-alt focus:text-neutral-text hover:text-neutral-text data-highlighted:text-neutral-text focus:**:text-neutral-text hover:**:text-neutral-text data-highlighted:**:text-neutral-text gap-2 rounded-lg px-2.5 py-1.5 text-sm font-medium data-inset:ps-8 [&_svg:not([class*='size-'])]:size-4;\n }\n\n .cn-dropdown-menu-radio-item {\n @apply focus:bg-neutral-surface-alt hover:bg-neutral-surface-alt data-highlighted:bg-neutral-surface-alt focus:text-neutral-text hover:text-neutral-text data-highlighted:text-neutral-text focus:**:text-neutral-text hover:**:text-neutral-text data-highlighted:**:text-neutral-text gap-2 rounded-lg px-2.5 py-1.5 text-sm font-medium data-inset:ps-8 [&_svg:not([class*='size-'])]:size-4;\n }\n\n .cn-dropdown-menu-item-indicator {\n @apply flex items-center justify-center shrink-0;\n }\n\n .cn-dropdown-menu-label {\n @apply text-neutral-text-muted px-2.5 py-2 text-xs font-semibold data-inset:ps-8;\n }\n\n .cn-dropdown-menu-separator {\n @apply bg-neutral-interactive/60 -mx-1.5 my-1.5 h-px;\n }\n\n .cn-dropdown-menu-shortcut {\n @apply text-neutral-text-muted group-focus/dropdown-menu-item:text-neutral-text group-hover/dropdown-menu-item:text-neutral-text group-data-highlighted/dropdown-menu-item:text-neutral-text ms-auto text-xs tracking-widest font-mono;\n @apply group-data-[variant=destructive]/dropdown-menu-item:text-neutral-text-muted group-focus/dropdown-menu-item:group-data-[variant=destructive]/dropdown-menu-item:text-danger-text group-hover/dropdown-menu-item:group-data-[variant=destructive]/dropdown-menu-item:text-danger-text group-data-highlighted/dropdown-menu-item:group-data-[variant=destructive]/dropdown-menu-item:text-danger-text;\n }\n\n .cn-dropdown-menu-sub-trigger {\n @apply focus:bg-neutral-surface-alt hover:bg-neutral-surface-alt data-highlighted:bg-neutral-surface-alt focus:text-neutral-text hover:text-neutral-text data-highlighted:text-neutral-text data-open:bg-neutral-surface-alt data-open:text-neutral-text not-data-[variant=destructive]:focus:**:text-neutral-text not-data-[variant=destructive]:hover:**:text-neutral-text not-data-[variant=destructive]:data-highlighted:**:text-neutral-text gap-2 rounded-lg px-2.5 py-1.5 text-sm font-medium data-inset:ps-8 [&_svg:not([class*='size-'])]:size-4;\n }\n\n .cn-dropdown-menu-sub-content {\n @apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-neutral-surface text-neutral-text border border-neutral-interactive/80 min-w-36 rounded-xl p-1.5 shadow-md duration-100;\n }\n\n .cn-dropdown-menu-subcontent {\n @apply shadow-md;\n }\n\n /* MARK: Item */\n .cn-item {\n @apply [a]:hover:bg-neutral-interactive rounded-2xl border text-sm;\n }\n\n .cn-item-variant-default {\n @apply border-transparent;\n }\n\n .cn-item-variant-outline {\n @apply border-neutral-interactive;\n }\n\n .cn-item-variant-muted {\n @apply bg-neutral-interactive/50 border-transparent;\n }\n\n .cn-item-size-default {\n @apply gap-3.5 px-4 py-3.5;\n }\n\n .cn-item-size-sm {\n @apply gap-3.5 px-3.5 py-3;\n }\n\n .cn-item-size-xs {\n @apply gap-2.5 px-3 py-2.5 in-data-[slot=dropdown-menu-content]:p-0;\n }\n\n .cn-item-media {\n @apply gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start;\n }\n\n .cn-item-media-variant-default {\n @apply bg-transparent;\n }\n\n .cn-item-media-variant-icon {\n @apply [&_svg:not([class*='size-'])]:size-4;\n }\n\n .cn-item-media-variant-image {\n @apply size-10 overflow-hidden rounded-xl group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 group-data-[size=xs]/item:rounded-lg [&_img]:size-full [&_img]:object-cover;\n }\n\n .cn-item-content {\n @apply gap-1 group-data-[size=xs]/item:gap-0.5;\n }\n\n .cn-item-title {\n @apply gap-2 text-sm leading-snug font-medium underline-offset-4;\n }\n\n .cn-item-description {\n @apply text-neutral-text-muted text-left text-sm;\n }\n\n .cn-item-actions {\n @apply gap-2;\n }\n\n .cn-item-header {\n @apply gap-2;\n }\n\n .cn-item-footer {\n @apply gap-2;\n }\n\n .cn-item-group {\n @apply gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2;\n }\n\n .cn-item-separator {\n @apply my-2;\n }\n\n /* MARK: Kbd */\n .cn-kbd {\n @apply font-sans tracking-normal text-neutral-text h-5 w-fit min-w-5 gap-1 rounded-md px-1.5 text-xs font-medium [&_svg:not([class*='size-'])]:size-3 transition-colors;\n @apply in-data-[slot=tooltip-content]:bg-neutral-surface/20 in-data-[slot=tooltip-content]:text-neutral-surface in-data-[slot=tooltip-content]:border-neutral-surface/30 dark:in-data-[slot=tooltip-content]:bg-neutral-surface/10;\n @apply in-data-[slot=input-group]:bg-neutral-interactive;\n @apply data-[variant=ghost]:min-w-0 data-[variant=ghost]:px-0.5 data-[variant=ghost]:bg-transparent! data-[variant=ghost]:border-transparent! data-[variant=ghost]:shadow-none! data-[variant=ghost]:text-neutral-text-muted;\n }\n\n /* Interactive Item Kbd: Neutral tone in idle, mixes in surface intent color on hover / active / selected / focus */\n :is(\n [data-slot$=\"-item\"][data-variant=\"destructive\"][data-selected=\"true\"],\n [data-slot$=\"-item\"][data-variant=\"destructive\"]:hover,\n [data-slot$=\"-item\"][data-variant=\"destructive\"]:focus,\n [data-slot$=\"-item\"][data-variant=\"destructive\"]:focus-visible,\n [data-slot$=\"-item\"][data-variant=\"destructive\"]:active,\n [data-slot$=\"-item\"][data-variant=\"destructive\"][data-highlighted],\n [data-slot$=\"-item\"][data-variant=\"destructive\"][data-focused],\n [data-variant=\"destructive\"][data-selected=\"true\"],\n [data-variant=\"destructive\"]:hover,\n [data-variant=\"destructive\"]:focus,\n [data-variant=\"destructive\"]:focus-visible,\n [data-variant=\"destructive\"]:active,\n [data-variant=\"destructive\"][data-highlighted],\n [data-variant=\"destructive\"][data-focused]\n ) .cn-kbd,\n :is(\n [data-slot$=\"-item\"][data-intent=\"danger\"][data-selected=\"true\"],\n [data-slot$=\"-item\"][data-intent=\"danger\"]:hover,\n [data-slot$=\"-item\"][data-intent=\"danger\"]:focus,\n [data-slot$=\"-item\"][data-intent=\"danger\"]:focus-visible,\n [data-slot$=\"-item\"][data-intent=\"danger\"]:active,\n [data-slot$=\"-item\"][data-intent=\"danger\"][data-highlighted],\n [data-slot$=\"-item\"][data-intent=\"danger\"][data-focused]\n ) .cn-kbd {\n @apply bg-danger-interactive text-danger-text;\n }\n\n :is(\n [data-slot$=\"-item\"][data-intent=\"primary\"][data-selected=\"true\"],\n [data-slot$=\"-item\"][data-intent=\"primary\"]:hover,\n [data-slot$=\"-item\"][data-intent=\"primary\"]:focus,\n [data-slot$=\"-item\"][data-intent=\"primary\"]:focus-visible,\n [data-slot$=\"-item\"][data-intent=\"primary\"]:active,\n [data-slot$=\"-item\"][data-intent=\"primary\"][data-highlighted],\n [data-slot$=\"-item\"][data-intent=\"primary\"][data-focused]\n ) .cn-kbd {\n @apply bg-primary-interactive text-primary-text;\n }\n\n :is(\n [data-slot$=\"-item\"][data-intent=\"success\"][data-selected=\"true\"],\n [data-slot$=\"-item\"][data-intent=\"success\"]:hover,\n [data-slot$=\"-item\"][data-intent=\"success\"]:focus,\n [data-slot$=\"-item\"][data-intent=\"success\"]:focus-visible,\n [data-slot$=\"-item\"][data-intent=\"success\"]:active,\n [data-slot$=\"-item\"][data-intent=\"success\"][data-highlighted],\n [data-slot$=\"-item\"][data-intent=\"success\"][data-focused]\n ) .cn-kbd {\n @apply bg-success-interactive text-success-text;\n }\n\n :is(\n [data-slot$=\"-item\"][data-intent=\"warning\"][data-selected=\"true\"],\n [data-slot$=\"-item\"][data-intent=\"warning\"]:hover,\n [data-slot$=\"-item\"][data-intent=\"warning\"]:focus,\n [data-slot$=\"-item\"][data-intent=\"warning\"]:focus-visible,\n [data-slot$=\"-item\"][data-intent=\"warning\"]:active,\n [data-slot$=\"-item\"][data-intent=\"warning\"][data-highlighted],\n [data-slot$=\"-item\"][data-intent=\"warning\"][data-focused]\n ) .cn-kbd {\n @apply bg-warning-interactive text-warning-text;\n }\n\n :is(\n [data-slot$=\"-item\"][data-intent=\"info\"][data-selected=\"true\"],\n [data-slot$=\"-item\"][data-intent=\"info\"]:hover,\n [data-slot$=\"-item\"][data-intent=\"info\"]:focus,\n [data-slot$=\"-item\"][data-intent=\"info\"]:focus-visible,\n [data-slot$=\"-item\"][data-intent=\"info\"]:active,\n [data-slot$=\"-item\"][data-intent=\"info\"][data-highlighted],\n [data-slot$=\"-item\"][data-intent=\"info\"][data-focused]\n ) .cn-kbd {\n @apply bg-info-interactive text-info-text;\n }\n\n /* Static intent surfaces (Alert, Card) always mix in surface intent color */\n [data-slot=\"alert\"][data-intent=\"danger\"] .cn-kbd,\n [data-slot=\"alert\"][data-variant=\"destructive\"] .cn-kbd,\n [data-slot=\"card\"][data-intent=\"danger\"] .cn-kbd {\n @apply bg-danger-interactive text-danger-text;\n }\n [data-slot=\"alert\"][data-intent=\"primary\"] .cn-kbd,\n [data-slot=\"card\"][data-intent=\"primary\"] .cn-kbd {\n @apply bg-primary-interactive text-primary-text;\n }\n [data-slot=\"alert\"][data-intent=\"success\"] .cn-kbd,\n [data-slot=\"card\"][data-intent=\"success\"] .cn-kbd {\n @apply bg-success-interactive text-success-text;\n }\n [data-slot=\"alert\"][data-intent=\"warning\"] .cn-kbd,\n [data-slot=\"card\"][data-intent=\"warning\"] .cn-kbd {\n @apply bg-warning-interactive text-warning-text;\n }\n [data-slot=\"alert\"][data-intent=\"info\"] .cn-kbd,\n [data-slot=\"card\"][data-intent=\"info\"] .cn-kbd {\n @apply bg-info-interactive text-info-text;\n }\n\n .cn-kbd-group {\n @apply gap-1 data-[variant=ghost]:gap-0.5 has-data-[variant=ghost]:gap-0.5;\n }\n\n /* MARK: Label */\n .cn-label {\n @apply gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50;\n }\n\n .cn-label-aria {\n @apply peer-data-disabled:opacity-50;\n }\n\n /* MARK: Menubar */\n .cn-menubar {\n @apply h-9 rounded-xl border border-neutral-interactive/80 bg-neutral-surface-alt/60 p-1 flex items-center gap-1 shadow-2xs;\n }\n\n .cn-menubar-trigger {\n @apply hover:bg-neutral-surface-alt aria-expanded:bg-neutral-surface-alt rounded-lg px-2.5 py-1 text-sm font-medium text-neutral-text outline-none;\n }\n\n .cn-menubar-content {\n @apply bg-neutral-surface text-neutral-text border border-neutral-interactive/80 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 min-w-48 rounded-xl p-1.5 shadow-md duration-100;\n }\n\n .cn-menubar-content-logical {\n @apply data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2;\n }\n\n .cn-menubar-item {\n @apply focus:bg-neutral-surface-alt hover:bg-neutral-surface-alt data-highlighted:bg-neutral-surface-alt focus:text-neutral-text hover:text-neutral-text data-highlighted:text-neutral-text data-[variant=destructive]:text-danger-text data-[variant=destructive]:focus:bg-danger-surface-alt data-[variant=destructive]:hover:bg-danger-surface-alt data-[variant=destructive]:data-highlighted:bg-danger-surface-alt dark:data-[variant=destructive]:focus:bg-danger-surface-alt dark:data-[variant=destructive]:hover:bg-danger-surface-alt dark:data-[variant=destructive]:data-highlighted:bg-danger-surface-alt data-[variant=destructive]:focus:text-danger-text data-[variant=destructive]:hover:text-danger-text data-[variant=destructive]:data-highlighted:text-danger-text data-[variant=destructive]:*:[svg]:text-danger-text! not-data-[variant=destructive]:focus:**:text-neutral-text not-data-[variant=destructive]:hover:**:text-neutral-text not-data-[variant=destructive]:data-highlighted:**:text-neutral-text gap-2 rounded-lg px-2.5 py-1.5 text-sm font-medium data-disabled:opacity-50 data-inset:ps-8 [&_svg:not([class*='size-'])]:size-4;\n }\n\n .cn-menubar-checkbox-item {\n @apply focus:bg-neutral-surface-alt hover:bg-neutral-surface-alt data-highlighted:bg-neutral-surface-alt focus:text-neutral-text hover:text-neutral-text data-highlighted:text-neutral-text focus:**:text-neutral-text hover:**:text-neutral-text data-highlighted:**:text-neutral-text gap-2 rounded-lg px-2.5 py-1.5 text-sm font-medium data-inset:ps-8 [&_svg:not([class*='size-'])]:size-4;\n }\n\n .cn-menubar-checkbox-item-indicator {\n @apply flex items-center justify-center shrink-0;\n }\n\n .cn-menubar-radio-item {\n @apply focus:bg-neutral-surface-alt hover:bg-neutral-surface-alt data-highlighted:bg-neutral-surface-alt focus:text-neutral-text hover:text-neutral-text data-highlighted:text-neutral-text focus:**:text-neutral-text hover:**:text-neutral-text data-highlighted:**:text-neutral-text gap-2 rounded-lg px-2.5 py-1.5 text-sm font-medium data-disabled:opacity-50 data-inset:ps-8 [&_svg:not([class*='size-'])]:size-4;\n }\n\n .cn-menubar-radio-item-indicator {\n @apply flex items-center justify-center shrink-0;\n }\n\n .cn-menubar-label {\n @apply text-neutral-text-muted px-2.5 py-2 text-xs font-semibold data-inset:ps-8;\n }\n\n .cn-menubar-separator {\n @apply bg-neutral-interactive/60 -mx-1.5 my-1.5 h-px;\n }\n\n .cn-menubar-shortcut {\n @apply text-neutral-text-muted group-focus/menubar-item:text-neutral-text group-hover/menubar-item:text-neutral-text group-data-highlighted/menubar-item:text-neutral-text ms-auto text-xs tracking-widest font-mono;\n }\n\n .cn-menubar-sub-trigger {\n @apply focus:bg-neutral-surface-alt hover:bg-neutral-surface-alt data-highlighted:bg-neutral-surface-alt focus:text-neutral-text hover:text-neutral-text data-highlighted:text-neutral-text data-open:bg-neutral-surface-alt data-open:text-neutral-text gap-2 rounded-lg px-2.5 py-1.5 text-sm font-medium data-inset:ps-8 [&_svg:not([class*='size-'])]:size-4;\n }\n\n .cn-menubar-sub-content {\n @apply bg-neutral-surface text-neutral-text border border-neutral-interactive/80 data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 min-w-32 rounded-xl p-1.5 shadow-md duration-100;\n }\n\n /* MARK: Navigation Menu */\n .cn-navigation-menu {\n @apply max-w-max;\n }\n\n .cn-navigation-menu-list {\n @apply gap-0;\n }\n\n .cn-navigation-menu-trigger {\n @apply hover:bg-neutral-interactive focus:bg-neutral-interactive data-open:hover:bg-neutral-interactive data-open:focus:bg-neutral-interactive data-open:bg-neutral-interactive/50 focus-visible:ring-primary-fill/30 data-popup-open:bg-neutral-interactive/50 data-popup-open:hover:bg-neutral-interactive rounded-3xl px-4.5 py-2.5 text-sm font-medium transition-all focus-visible:ring-3 focus-visible:outline-1 disabled:opacity-50;\n }\n\n .cn-navigation-menu-link {\n @apply data-[active=true]:focus:bg-neutral-interactive data-[active=true]:hover:bg-neutral-interactive data-[active=true]:bg-neutral-interactive/50 focus-visible:ring-primary-fill/30 hover:bg-neutral-interactive focus:bg-neutral-interactive flex items-center gap-1.5 rounded-3xl p-3 text-sm transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4 in-data-[slot=navigation-menu-content]:rounded-2xl;\n }\n\n .cn-navigation-menu-trigger-icon {\n @apply relative top-px ms-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180;\n }\n\n .cn-navigation-menu-content {\n @apply data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-neutral-surface group-data-[viewport=false]/navigation-menu:text-neutral-text group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:border-neutral-interactive/80 group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 p-3 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-2xl group-data-[viewport=false]/navigation-menu:shadow-lg group-data-[viewport=false]/navigation-menu:duration-300;\n }\n\n .cn-navigation-menu-viewport {\n @apply bg-neutral-surface text-neutral-text border border-neutral-interactive/80 data-open:animate-in data-closed:animate-out data-closed:zoom-out-90 data-open:zoom-in-90 rounded-2xl shadow-lg duration-100;\n }\n\n .cn-navigation-menu-indicator {\n @apply data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in;\n }\n\n .cn-navigation-menu-indicator-arrow {\n @apply bg-neutral-interactive rounded-tl-sm shadow-md;\n }\n\n .cn-navigation-menu-positioner {\n @apply transition-[top,left,right,bottom] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:inset-x-0;\n }\n\n .cn-navigation-menu-popup {\n @apply bg-neutral-surface text-neutral-text border border-neutral-interactive/80 rounded-2xl shadow-lg transition-all ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0;\n }\n\n /* MARK: Pagination */\n .cn-pagination-content {\n @apply gap-1;\n }\n\n .cn-pagination-ellipsis {\n @apply size-9 items-center justify-center [&_svg:not([class*='size-'])]:size-4;\n }\n\n .cn-pagination-previous {\n @apply ps-2!;\n }\n\n .cn-pagination-next {\n @apply pe-2!;\n }\n\n /* MARK: Bidirectional RTL Utilities */\n .cn-rtl-flip {\n [dir='rtl'] &,\n &:dir(rtl) {\n transform: scaleX(-1);\n }\n }\n\n /* MARK: Sidebar */\n .cn-sidebar-gap {\n @apply transition-[width] duration-200 ease-linear;\n }\n\n .cn-sidebar-inner {\n @apply bg-neutral-surface-alt group-data-[variant=floating]:ring-neutral-interactive group-data-[variant=floating]:rounded-2xl group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1;\n }\n\n .cn-sidebar-rail {\n @apply hover:after:bg-neutral-interactive;\n }\n\n .cn-sidebar-inset {\n @apply bg-neutral-surface md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-2xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2;\n }\n\n .cn-sidebar-input {\n @apply bg-neutral-interactive/50 h-8 w-full shadow-none;\n }\n\n .cn-sidebar-header {\n @apply gap-2 p-2 [--radius:var(--radius-xl)];\n }\n\n .cn-sidebar-content {\n @apply no-scrollbar gap-2 [--radius:var(--radius-xl)];\n }\n\n .cn-sidebar-footer {\n @apply gap-2 p-2;\n }\n\n .cn-sidebar-separator {\n @apply bg-neutral-interactive mx-2;\n }\n\n .cn-sidebar-group {\n @apply p-2;\n }\n\n .cn-sidebar-menu {\n @apply gap-0.5;\n }\n\n .cn-sidebar-group-content {\n @apply text-sm;\n }\n\n .cn-sidebar-group-label {\n @apply text-neutral-text-secondary ring-primary-fill h-8 rounded-xl px-3 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4;\n }\n\n .cn-sidebar-group-action {\n @apply text-neutral-text ring-primary-fill hover:bg-neutral-interactive-hover hover:text-neutral-text absolute top-3.5 right-3 w-5 rounded-xl p-0 focus-visible:ring-2 [&>svg]:size-4;\n }\n\n .cn-sidebar-menu-button {\n @apply ring-primary-fill hover:bg-neutral-interactive-hover hover:text-neutral-text active:bg-neutral-interactive-hover active:text-neutral-text data-active:bg-neutral-interactive-hover data-active:text-neutral-text data-open:hover:bg-neutral-interactive-hover data-open:hover:text-neutral-text gap-2 rounded-xl px-3 py-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium;\n }\n\n .cn-sidebar-menu-button-aria {\n @apply aria-expanded:hover:bg-neutral-interactive-hover aria-expanded:hover:text-neutral-text;\n }\n\n .cn-sidebar-menu-button-variant-default {\n @apply hover:bg-neutral-interactive-hover hover:text-neutral-text;\n }\n\n .cn-sidebar-menu-button-variant-outline {\n @apply bg-neutral-surface hover:bg-neutral-interactive-hover hover:text-neutral-text shadow-[0_0_0_1px_var(--neutral-interactive)] hover:shadow-[0_0_0_1px_var(--neutral-interactive-hover)];\n }\n\n .cn-sidebar-menu-button-size-default {\n @apply h-9 text-sm;\n }\n\n .cn-sidebar-menu-button-size-sm {\n @apply h-8 text-xs;\n }\n\n .cn-sidebar-menu-button-size-lg {\n @apply h-14 px-3 text-sm group-data-[collapsible=icon]:p-0!;\n }\n\n .cn-sidebar-menu-action {\n @apply text-neutral-text ring-primary-fill hover:bg-neutral-interactive-hover hover:text-neutral-text peer-hover/menu-button:text-neutral-text absolute top-1.5 right-1 aspect-square w-5 rounded-xl p-0 peer-data-[size=default]/menu-button:top-2 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4;\n }\n\n .cn-sidebar-menu-badge {\n @apply text-neutral-text peer-hover/menu-button:text-neutral-text peer-data-active/menu-button:text-neutral-text pointer-events-none absolute right-1 flex h-5 min-w-5 rounded-xl px-1 text-xs font-medium peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1;\n }\n\n .cn-sidebar-menu-skeleton {\n @apply h-8 gap-2 rounded-xl px-2;\n }\n\n .cn-sidebar-menu-skeleton-icon {\n @apply size-4 rounded-xl;\n }\n\n .cn-sidebar-menu-skeleton-text {\n @apply h-4;\n }\n\n .cn-sidebar-menu-sub {\n @apply border-neutral-interactive mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden;\n }\n\n .cn-sidebar-menu-sub-button {\n @apply text-neutral-text ring-primary-fill hover:bg-neutral-interactive-hover hover:text-neutral-text active:bg-neutral-interactive-hover active:text-neutral-text [&>svg]:text-neutral-text data-active:bg-neutral-interactive-hover data-active:text-neutral-text h-7 gap-2 rounded-xl px-3 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4;\n }\n\n /* MARK: Popover */\n .cn-popover-content {\n @apply bg-neutral-surface dark:bg-neutral-surface-alt text-neutral-text data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 flex flex-col gap-4 rounded-3xl p-4 text-sm shadow-lg duration-100;\n }\n\n .cn-popover-content-logical {\n @apply data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2;\n }\n\n .cn-popover-header {\n @apply flex flex-col gap-1 text-sm;\n }\n\n .cn-popover-title {\n @apply text-base font-medium;\n }\n\n .cn-popover-description {\n @apply text-neutral-text-muted;\n }\n\n /* MARK: Progress */\n .cn-progress {\n @apply bg-neutral-interactive rounded-full overflow-hidden;\n }\n\n .cn-progress-track {\n @apply bg-neutral-interactive rounded-full relative flex w-full items-center;\n }\n\n .cn-progress-indicator {\n @apply bg-primary-fill transition-all;\n }\n\n .cn-progress-label {\n @apply text-sm font-medium text-neutral-text;\n }\n\n .cn-progress-value {\n @apply text-neutral-text-muted ms-auto text-sm tabular-nums;\n }\n\n /* MARK: Resizable */\n .cn-resizable-handle-icon {\n @apply bg-neutral-interactive h-6 w-1 rounded-lg;\n }\n\n /* MARK: Scroll Area */\n .cn-scroll-area-scrollbar {\n @apply data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent;\n }\n\n .cn-scroll-area-thumb {\n @apply rounded-full;\n }\n\n /* MARK: Separator */\n .cn-separator {\n @apply bg-neutral-interactive shrink-0;\n }\n\n .cn-separator-horizontal {\n @apply h-px w-full;\n }\n\n .cn-separator-vertical {\n @apply h-full w-px;\n }\n\n .cn-separator-with-label {\n @apply select-none;\n }\n\n .cn-separator-label {\n @apply text-neutral-text-muted font-medium text-xs;\n }\n\n /* MARK: Sheet */\n .cn-sheet-overlay {\n @apply bg-black/30 supports-backdrop-filter:backdrop-blur-sm;\n }\n\n .cn-sheet-content {\n @apply bg-neutral-surface dark:bg-neutral-surface-alt border-neutral-interactive text-neutral-text fixed z-50 flex flex-col bg-clip-padding text-sm shadow-xl transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm;\n }\n\n .cn-sheet-close {\n @apply absolute top-4 right-4 bg-neutral-interactive;\n }\n\n .cn-sheet-header {\n @apply gap-1.5 p-6;\n }\n\n .cn-sheet-footer {\n @apply gap-2 p-6;\n }\n\n .cn-sheet-title {\n @apply text-neutral-text text-base font-medium;\n }\n\n .cn-sheet-description {\n @apply text-neutral-text-muted text-sm;\n }\n\n /* MARK: Skeleton */\n .cn-skeleton {\n @apply bg-neutral-interactive rounded-2xl;\n }\n\n /* MARK: Toast */\n .cn-toast {\n @apply rounded-2xl border shadow-lg transition-colors;\n }\n\n .cn-toast-variant-default {\n @apply border-neutral-interactive/80 bg-neutral-surface-alt text-neutral-text;\n }\n\n .cn-toast-variant-solid {\n @apply border-neutral-fill bg-neutral-fill text-neutral-on-fill;\n }\n\n /* Solid variant styling adaptations (matching Alert solid) */\n .cn-toast-variant-solid [data-slot=\"toast-close\"] {\n @apply text-inherit opacity-85 hover:opacity-100 hover:bg-black/20 dark:hover:bg-white/25 focus-visible:ring-current;\n }\n\n .cn-toast-variant-solid [data-slot=\"toast-description\"] {\n @apply text-inherit opacity-90;\n }\n\n .cn-toast-variant-solid [data-slot=\"toast-title\"] {\n @apply text-inherit font-medium;\n }\n\n .cn-toast-variant-solid [data-slot=\"toast-icon\"] {\n @apply text-inherit opacity-95;\n }\n\n .cn-toast-variant-solid [data-slot=\"toast-action\"] button {\n @apply border-current/30 text-current hover:bg-white/15 dark:hover:bg-white/20 active:bg-white/25;\n }\n\n .cn-toast [data-slot=\"toast-content\"] {\n transition: opacity 250ms cubic-bezier(0.22, 1, 0.36, 1);\n }\n\n /* When collapsed in stack, toasts behind the frontmost toast must have their content hidden */\n .cn-toast [data-slot=\"toast-content\"][data-behind] {\n opacity: 0 !important;\n }\n\n /* When expanded (e.g. hovered or focused), all toast contents fade in */\n .cn-toast [data-slot=\"toast-content\"][data-expanded] {\n opacity: 1 !important;\n }\n\n /* MARK: Table */\n .cn-table-container {\n @apply relative w-full overflow-x-auto;\n }\n\n .cn-table-container-variant-default {\n @apply bg-transparent;\n }\n\n .cn-table-container-variant-outline {\n @apply rounded-xl border border-neutral-interactive bg-transparent;\n }\n\n .cn-table-container-variant-surface {\n @apply rounded-xl border border-neutral-interactive/80 bg-neutral-surface shadow-xs;\n }\n\n .cn-table {\n @apply w-full caption-bottom text-sm;\n }\n\n .cn-table-variant-default {\n @apply bg-transparent;\n }\n\n .cn-table-variant-outline {\n @apply bg-transparent;\n }\n\n .cn-table-variant-surface {\n @apply bg-neutral-surface;\n }\n\n .cn-table-header {\n @apply [&_tr]:border-b;\n }\n\n .cn-table-body {\n @apply [&_tr:last-child]:border-0;\n }\n\n .cn-table-footer {\n @apply bg-neutral-interactive/50 border-t font-medium [&>tr]:last:border-b-0;\n }\n\n .cn-table-row {\n @apply hover:bg-neutral-interactive/50 data-[state=selected]:bg-neutral-interactive border-b transition-colors;\n }\n\n .cn-table-row-aria {\n @apply data-selected:bg-neutral-interactive;\n }\n\n .cn-table-head {\n @apply text-neutral-text h-12 px-3 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0;\n }\n\n .cn-table-head-aria {\n @apply [&:has([data-slot=checkbox])]:pr-0;\n }\n\n .cn-table-cell {\n @apply p-3 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0;\n }\n\n .cn-table-cell-aria {\n @apply [&:has([data-slot=checkbox])]:pr-0;\n }\n\n .cn-table-caption {\n @apply text-neutral-text-muted mt-4 text-sm;\n }\n\n /* MARK: Toggle */\n .cn-toggle {\n @apply focus-visible:border-primary-fill focus-visible:ring-primary-fill/30 aria-invalid:ring-danger-fill/20 dark:aria-invalid:ring-danger-fill/40 aria-invalid:border-danger-fill dark:aria-invalid:border-danger-fill/50 border border-transparent bg-clip-padding font-medium transition-[background-color,color,border-color,box-shadow] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] focus-visible:ring-3 aria-invalid:ring-3 cursor-pointer;\n }\n\n .cn-toggle-aria {\n @apply data-selected:bg-neutral-interactive;\n }\n\n .cn-toggle-variant-default {\n @apply bg-transparent text-neutral-text hover:bg-neutral-interactive hover:text-neutral-text active:bg-neutral-interactive-hover [&[data-pressed]]:bg-neutral-interactive [&[data-pressed]]:text-neutral-text aria-pressed:bg-neutral-interactive aria-pressed:text-neutral-text;\n }\n\n .cn-toggle-variant-outline {\n @apply border-neutral-interactive bg-neutral-surface text-neutral-text dark:bg-transparent hover:bg-neutral-interactive dark:hover:bg-neutral-interactive hover:text-neutral-text active:bg-neutral-interactive-hover dark:active:bg-neutral-interactive-hover [&[data-pressed]]:bg-neutral-interactive [&[data-pressed]]:text-neutral-text aria-pressed:bg-neutral-interactive aria-pressed:text-neutral-text;\n }\n\n .cn-toggle-variant-tint {\n @apply bg-transparent text-neutral-text hover:bg-neutral-interactive hover:text-neutral-text active:bg-neutral-interactive-hover [&[data-pressed]]:bg-primary-interactive [&[data-pressed]]:text-primary-text [&[data-pressed]]:hover:bg-primary-interactive-hover [&[data-pressed]]:active:bg-primary-interactive-active aria-pressed:bg-primary-interactive aria-pressed:text-primary-text aria-pressed:hover:bg-primary-interactive-hover aria-pressed:active:bg-primary-interactive-active;\n }\n\n .cn-toggle-size-xs {\n @apply h-6 gap-1 rounded-md px-2 text-xs [&_svg:not([class*='size-'])]:size-3;\n }\n\n .cn-toggle-size-sm {\n @apply h-7 gap-1 rounded-md px-2 text-xs [&_svg:not([class*='size-'])]:size-3.5;\n }\n\n .cn-toggle-size-default {\n @apply h-8 gap-1.5 rounded-lg px-3 text-sm [&_svg:not([class*='size-'])]:size-4;\n }\n\n .cn-toggle-size-lg {\n @apply h-9 gap-2 rounded-lg px-3.5 text-sm [&_svg:not([class*='size-'])]:size-4;\n }\n\n .cn-toggle-size-icon-xs {\n @apply size-6 rounded-md p-0 [&_svg:not([class*='size-'])]:size-3;\n }\n\n .cn-toggle-size-icon-sm {\n @apply size-7 rounded-md p-0 [&_svg:not([class*='size-'])]:size-3.5;\n }\n\n .cn-toggle-size-icon {\n @apply size-8 rounded-lg p-0 [&_svg:not([class*='size-'])]:size-4;\n }\n\n .cn-toggle-size-icon-lg {\n @apply size-9 rounded-lg p-0 [&_svg:not([class*='size-'])]:size-4;\n }\n\n /* MARK: Toggle Group */\n .cn-toggle-group {\n @apply inline-flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-20 *:hover:z-10 *:active:z-10 *:[&[data-pressed]]:z-10;\n }\n\n .cn-toggle-group-orientation-horizontal {\n @apply flex-row;\n }\n\n .cn-toggle-group-orientation-vertical {\n @apply flex-col;\n }\n\n .cn-toggle-group-separator {\n @apply bg-neutral-interactive;\n }\n\n /* MARK: Tooltip */\n .cn-tooltip-content {\n @apply data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 inline-flex items-center gap-1.5 rounded-xl px-3 py-1.5 text-xs has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-lg;\n }\n\n .cn-tooltip-content-logical {\n @apply data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2;\n }\n\n /* MARK: Global Floating Arrow System (Base UI Architecture) */\n .cn-floating-arrow,\n .cn-tooltip-arrow,\n .cn-popover-arrow,\n .cn-hover-card-arrow,\n .cn-combobox-arrow,\n .cn-menu-arrow,\n .cn-select-arrow {\n --arrow-base: 0.625rem; /* 10px default */\n --arrow-h: calc(var(--arrow-base) / 2); /* 5px */\n --arrow-square: calc(var(--arrow-h) * 1.41421356);\n\n display: block;\n position: relative;\n width: var(--arrow-base);\n height: var(--arrow-h);\n overflow: clip;\n pointer-events: none;\n z-index: 50;\n\n /* Top & Bottom: wide aspect ratio */\n &[data-side='bottom'] {\n width: var(--arrow-base);\n height: var(--arrow-h);\n top: calc(-1 * var(--arrow-h));\n bottom: auto;\n rotate: 0deg;\n\n &::before {\n bottom: 0;\n left: 50%;\n top: auto;\n right: auto;\n transform: translate(-50%, 50%) rotate(45deg);\n }\n }\n\n &[data-side='top'] {\n width: var(--arrow-base);\n height: var(--arrow-h);\n bottom: calc(-1 * var(--arrow-h));\n top: auto;\n rotate: 180deg;\n\n &::before {\n bottom: 0;\n left: 50%;\n top: auto;\n right: auto;\n transform: translate(-50%, 50%) rotate(45deg);\n }\n }\n\n /* Left & Right: tall aspect ratio */\n /* data-side='left': popup is to the left of trigger, arrow is on the right of popup pointing right */\n &[data-side='left'] {\n width: var(--arrow-h);\n height: var(--arrow-base);\n right: calc(-1 * var(--arrow-h));\n left: auto;\n rotate: 0deg;\n\n &::before {\n top: 50%;\n left: 0;\n right: auto;\n bottom: auto;\n transform: translate(-50%, -50%) rotate(45deg);\n }\n }\n\n /* data-side='right': popup is to the right of trigger, arrow is on the left of popup pointing left */\n &[data-side='right'] {\n width: var(--arrow-h);\n height: var(--arrow-base);\n left: calc(-1 * var(--arrow-h));\n right: auto;\n rotate: 0deg;\n\n &::before {\n top: 50%;\n right: 0;\n left: auto;\n bottom: auto;\n transform: translate(50%, -50%) rotate(45deg);\n }\n }\n\n &[data-side='inline-start'] {\n width: var(--arrow-h);\n height: var(--arrow-base);\n right: calc(-1 * var(--arrow-h));\n left: auto;\n rotate: 0deg;\n\n &::before {\n top: 50%;\n left: 0;\n right: auto;\n bottom: auto;\n transform: translate(-50%, -50%) rotate(45deg);\n }\n\n [dir='rtl'] &,\n &:dir(rtl) {\n right: auto;\n left: calc(-1 * var(--arrow-h));\n\n &::before {\n left: auto;\n right: 0;\n transform: translate(50%, -50%) rotate(45deg);\n }\n }\n }\n\n &[data-side='inline-end'] {\n width: var(--arrow-h);\n height: var(--arrow-base);\n left: calc(-1 * var(--arrow-h));\n right: auto;\n rotate: 0deg;\n\n &::before {\n top: 50%;\n right: 0;\n left: auto;\n bottom: auto;\n transform: translate(50%, -50%) rotate(45deg);\n }\n\n [dir='rtl'] &,\n &:dir(rtl) {\n left: auto;\n right: calc(-1 * var(--arrow-h));\n\n &::before {\n right: auto;\n left: 0;\n transform: translate(-50%, -50%) rotate(45deg);\n }\n }\n }\n\n &::before {\n content: '';\n display: block;\n position: absolute;\n box-sizing: border-box;\n width: var(--arrow-square);\n height: var(--arrow-square);\n background-color: var(--arrow-bg, var(--neutral-surface));\n border: 1px solid var(--arrow-border, color-mix(in oklch, var(--neutral-interactive) 80%, transparent));\n }\n }\n\n .cn-tooltip-arrow {\n --arrow-base: 0.5rem; /* 8px compact base for small tooltip pills */\n --arrow-h: 0.25rem; /* 4px projection */\n --arrow-square: calc(0.25rem * 1.41421356);\n\n &::before {\n background-color: var(--arrow-bg, var(--neutral-text));\n border: 1px solid var(--arrow-border, var(--neutral-text));\n }\n }\n\n .cn-popover-arrow,\n .cn-hover-card-arrow,\n .cn-combobox-arrow,\n .cn-menu-arrow,\n .cn-select-arrow {\n --arrow-base: 0.75rem; /* 12px for larger card/popover surfaces */\n --arrow-h: 0.375rem; /* 6px projection */\n --arrow-square: calc(0.375rem * 1.41421356);\n }\n\n /* MARK: Empty */\n .cn-empty {\n @apply gap-4 rounded-2xl border-dashed p-12;\n }\n\n .cn-empty-header {\n @apply gap-2;\n }\n\n .cn-empty-media {\n @apply mb-2;\n }\n\n .cn-empty-media-default {\n @apply bg-transparent;\n }\n\n .cn-empty-media-icon {\n @apply bg-neutral-interactive text-neutral-text flex size-10 shrink-0 items-center justify-center rounded-xl [&_svg:not([class*='size-'])]:size-5;\n }\n\n .cn-empty-title {\n @apply text-lg font-medium tracking-tight;\n }\n\n .cn-empty-description {\n @apply text-sm/relaxed;\n }\n\n .cn-empty-content {\n @apply gap-4 text-sm;\n }\n\n /* MARK: Calendar */\n .cn-calendar {\n @apply p-3 [--cell-radius:var(--radius-4xl)] [--cell-size:--spacing(8)];\n }\n\n .cn-calendar-dropdown-root {\n @apply has-focus:border-primary-fill border-neutral-interactive has-focus:ring-primary-fill/30 border has-focus:ring-3;\n }\n\n .cn-calendar-caption-label {\n @apply h-8 pr-2 pl-3;\n }\n\n /* MARK: Carousel */\n .cn-carousel-previous {\n @apply rounded-full;\n }\n\n .cn-carousel-next {\n @apply rounded-full;\n }\n\n /* MARK: Chart */\n .cn-chart-tooltip {\n @apply bg-neutral-surface dark:bg-neutral-surface-alt border border-neutral-interactive/80 text-neutral-text gap-1.5 rounded-xl px-2.5 py-1.5 text-xs shadow-md backdrop-blur-xs;\n }\n\n /* MARK: Hover Card */\n .cn-hover-card-content {\n @apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-neutral-surface dark:bg-neutral-surface-alt text-neutral-text w-72 rounded-3xl p-4 text-sm shadow-lg duration-100;\n }\n\n .cn-hover-card-content-logical {\n @apply data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2;\n }\n\n /* MARK: Menu Translucent */\n .cn-menu-translucent {\n @apply bg-neutral-surface dark:bg-neutral-surface relative **:data-[slot$=-item]:focus:bg-neutral-surface-alt **:data-[slot$=-item]:hover:bg-neutral-surface-alt **:data-[slot$=-item]:data-highlighted:bg-neutral-surface-alt **:data-[slot$=-separator]:bg-neutral-interactive/60 **:data-[slot$=-trigger]:focus:bg-neutral-surface-alt **:data-[slot$=-trigger]:hover:bg-neutral-surface-alt **:data-[slot$=-trigger]:data-highlighted:bg-neutral-surface-alt **:data-[slot$=-trigger]:aria-expanded:bg-neutral-surface-alt! **:data-[variant=destructive]:focus:bg-danger-surface-alt! **:data-[variant=destructive]:hover:bg-danger-surface-alt! **:data-[variant=destructive]:data-highlighted:bg-danger-surface-alt! **:data-[variant=destructive]:text-danger-text! **:data-[variant=destructive]:**:text-danger-text!;\n }\n\n .cn-menu-translucent-aria {\n @apply **:data-[slot$=-item]:data-focused:bg-neutral-surface-alt;\n }\n\n /* MARK: Bubble */\n .cn-bubble {\n @apply gap-1 data-[align=end]:self-end max-w-[80%] data-[variant=ghost]:max-w-full group-data-[align=end]/message:self-end;\n }\n\n .cn-bubble-content {\n @apply rounded-3xl border border-transparent px-3.5 py-2.5 text-sm leading-relaxed [button,a]:outline-none [button,a]:focus-visible:border-primary-fill [button,a]:focus-visible:ring-3 [button,a]:focus-visible:ring-primary-fill/30 group-data-[align=end]/bubble:self-end;\n }\n\n .cn-bubble-variant-default {\n @apply *:data-[slot=bubble-content]:bg-primary-fill *:data-[slot=bubble-content]:text-primary-on-fill [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary-fill-hover;\n }\n\n .cn-bubble-variant-secondary {\n @apply *:data-[slot=bubble-content]:bg-neutral-interactive *:data-[slot=bubble-content]:text-neutral-text [&>[data-slot=bubble-content]:is(button,a):hover]:bg-neutral-interactive-hover;\n }\n\n .cn-bubble-variant-muted {\n @apply *:data-[slot=bubble-content]:bg-neutral-interactive [&>[data-slot=bubble-content]:is(button,a):hover]:bg-neutral-interactive-hover;\n }\n\n .cn-bubble-variant-tinted {\n @apply *:data-[slot=bubble-content]:bg-primary-interactive dark:*:data-[slot=bubble-content]:bg-primary-interactive *:data-[slot=bubble-content]:text-neutral-text [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary-interactive-hover dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary-interactive-hover;\n }\n\n .cn-bubble-variant-outline {\n @apply *:data-[slot=bubble-content]:bg-neutral-surface *:data-[slot=bubble-content]:border-neutral-interactive [&>[data-slot=bubble-content]:is(button,a):hover]:bg-neutral-interactive [&>[data-slot=bubble-content]:is(button,a):hover]:text-neutral-text dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-neutral-interactive/30;\n }\n\n .cn-bubble-variant-ghost {\n @apply *:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-neutral-interactive [&>[data-slot=bubble-content]:is(button,a):hover]:text-neutral-text dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-neutral-interactive/50 border-none;\n }\n\n .cn-bubble-variant-destructive {\n @apply *:data-[slot=bubble-content]:bg-danger-surface dark:*:data-[slot=bubble-content]:bg-danger-interactive *:data-[slot=bubble-content]:text-danger-text [&>[data-slot=bubble-content]:is(button,a):hover]:bg-danger-interactive dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-danger-interactive-hover;\n }\n\n .cn-bubble-reactions {\n @apply rounded-full ring-3 ring-neutral-interactive bg-neutral-interactive shrink-0 gap-1 px-1.5 py-0.5 has-[button]:p-0 text-sm;\n }\n\n .cn-bubble-reactions-side-top {\n @apply top-0 -translate-y-3/4;\n }\n\n .cn-bubble-reactions-side-bottom {\n @apply bottom-0 translate-y-3/4;\n }\n\n .cn-bubble-reactions-align-start {\n @apply left-3;\n }\n\n .cn-bubble-reactions-align-end {\n @apply right-3;\n }\n\n .cn-bubble-group {\n @apply gap-2;\n }\n\n /* MARK: Attachment */\n .cn-attachment {\n @apply rounded-3xl w-fit focus-within:ring-1 focus-within:ring-primary-fill/30;\n }\n\n .cn-attachment-orientation-horizontal {\n @apply min-w-40;\n }\n\n .cn-attachment-orientation-vertical {\n @apply w-24 has-data-[slot=attachment-content]:w-30;\n }\n\n .cn-attachment-size-default {\n @apply gap-2 has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2 text-sm;\n }\n\n .cn-attachment-size-sm {\n @apply gap-2.5 has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5 text-xs;\n }\n\n .cn-attachment-size-xs {\n @apply gap-1.5 has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1 text-xs rounded-2xl;\n }\n\n .cn-attachment-media {\n @apply bg-neutral-interactive text-neutral-text w-10 rounded-2xl group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 group-data-[size=xs]/attachment:rounded-xl [&_svg:not([class*='size-'])]:size-4 group-data-[size=xs]/attachment:[&_svg:not([class*='size-'])]:size-3.5 group-data-[orientation=vertical]/attachment:w-full group-data-[orientation=vertical]/attachment:[&_svg:not([class*='size-'])]:size-6 group-data-[orientation=vertical]/attachment:*:data-[slot=spinner]:size-6!;\n }\n\n .cn-attachment-media-variant-image {\n @apply opacity-60 group-data-[state=idle]/attachment:opacity-100 group-data-[state=done]/attachment:opacity-100;\n }\n\n .cn-attachment-content {\n @apply leading-tight group-data-[orientation=vertical]/attachment:px-1;\n }\n\n .cn-attachment-title {\n @apply font-medium;\n }\n\n .cn-attachment-description {\n @apply mt-0.5 text-xs;\n }\n\n .cn-attachment-actions {\n @apply group-data-[orientation=vertical]/attachment:absolute group-data-[orientation=vertical]/attachment:top-3 group-data-[orientation=vertical]/attachment:right-3 relative z-20 group-data-[orientation=vertical]/attachment:gap-1;\n }\n\n .cn-attachment-group {\n @apply gap-3 scroll-px-1 py-1;\n }\n\n .cn-attachment-trigger {\n @apply absolute inset-0 z-10 outline-none;\n }\n\n /* MARK: Marker */\n .cn-marker {\n @apply gap-2 text-sm text-neutral-text-muted [a]:hover:text-neutral-text [a]:underline-offset-3 [a]:underline [&_svg:not([class*='size-'])]:size-4 min-h-4 text-left;\n }\n\n .cn-marker-variant-separator {\n @apply before:h-px before:min-w-0 before:flex-1 before:bg-neutral-interactive after:h-px after:min-w-0 after:flex-1 after:bg-neutral-interactive before:mr-1 after:ml-1;\n }\n\n .cn-marker-variant-border {\n @apply border-b border-neutral-interactive pb-2;\n }\n\n .cn-marker-icon {\n @apply size-4 [&_svg:not([class*='size-'])]:size-4;\n }\n\n .cn-marker-content {\n @apply group-data-[variant=separator]/marker:flex-none group-data-[variant=separator]/marker:text-center *:[a]:hover:text-neutral-text *:[a]:underline *:[a]:underline-offset-3;\n }\n\n /* MARK: Questionnaire */\n .cn-questionnaire {\n @apply gap-6;\n }\n\n .cn-questionnaire-progress {\n @apply text-xs;\n }\n\n .cn-questionnaire-item {\n @apply flex flex-col gap-5;\n }\n\n .cn-questionnaire-title {\n @apply text-base font-semibold [&:not(:has(~[data-slot=questionnaire-description]))]:mb-5;\n }\n\n .cn-questionnaire-description {\n @apply text-sm;\n }\n\n .cn-questionnaire-choices {\n @apply gap-3;\n }\n\n .cn-questionnaire-choice {\n @apply border-neutral-interactive hover:bg-neutral-interactive/40 data-checked:border-primary-fill data-checked:bg-primary-interactive data-invalid:border-danger-fill has-[>input:focus-visible]:border-primary-fill has-[>input:focus-visible]:ring-primary-fill/50 gap-2.5 rounded-3xl border px-4 py-3 text-sm has-[>input:focus-visible]:ring-3;\n }\n\n .cn-questionnaire-choice-indicator {\n @apply bg-neutral-interactive group-data-checked/questionnaire-choice:bg-primary-fill dark:group-data-checked/questionnaire-choice:bg-primary-fill group-data-checked/questionnaire-choice:text-primary-on-fill group-data-checked/questionnaire-choice:border-primary-fill size-4 translate-y-[--spacing(0.45)] group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5 rounded-sm border-transparent;\n }\n\n .cn-questionnaire-choice-indicator-dot {\n @apply bg-primary-on-fill size-2 dark:size-2.5;\n }\n\n .cn-questionnaire-choice-indicator-check {\n @apply size-3.5;\n }\n\n .cn-questionnaire-choice-content {\n @apply gap-1;\n }\n\n .cn-questionnaire-choice-description {\n @apply text-neutral-text-muted;\n }\n\n .cn-questionnaire-shortcut {\n @apply border-primary-interactive bg-neutral-surface/80 text-neutral-text-muted size-5 translate-y-[--spacing(0.45)] group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5 items-center justify-center rounded-full border font-mono text-[0.625rem] font-medium leading-none;\n }\n\n .cn-questionnaire-input-wrapper {\n @apply w-full;\n }\n\n .cn-questionnaire-input {\n @apply bg-neutral-interactive/50 border-transparent focus-visible:border-primary-fill focus-visible:ring-primary-fill/30 aria-invalid:ring-danger-fill/20 dark:aria-invalid:ring-danger-fill/40 aria-invalid:border-danger-fill dark:aria-invalid:border-danger-fill/50 h-9 rounded-3xl border px-3 py-1 text-base focus-visible:ring-3 aria-invalid:ring-3 md:text-sm;\n }\n\n .cn-questionnaire-error {\n @apply mt-2 text-sm;\n }\n\n .cn-questionnaire-actions {\n @apply gap-2 sm:min-h-9;\n }\n\n /* MARK: Message Scroller */\n .cn-message-scroller-content {\n @apply gap-8;\n }\n\n /* MARK: Message */\n .cn-message {\n @apply text-sm gap-2;\n }\n\n .cn-message-avatar {\n @apply min-w-8 group-has-data-[slot=message-footer]/message:-translate-y-8;\n }\n\n .cn-message-content {\n @apply gap-2.5 group-data-[align=end]/message:*:data-slot:self-end;\n }\n\n .cn-message-header {\n @apply text-xs font-medium text-neutral-text-muted px-3.5 group-has-data-[variant=ghost]/message:px-0;\n }\n\n .cn-message-footer {\n @apply text-xs font-medium text-neutral-text-muted px-3.5 group-has-data-[variant=ghost]/message:px-0;\n }\n\n .cn-message-group {\n @apply gap-2;\n }\n\n /* MARK: React Aria */\n .cn-alert-dialog-overlay-aria {\n @apply data-entering:animate-in data-exiting:animate-out data-exiting:fade-out-0 data-entering:fade-in-0 bg-black/30 duration-100 supports-backdrop-filter:backdrop-blur-sm;\n }\n\n .cn-alert-dialog-content-aria {\n @apply data-entering:animate-in data-exiting:animate-out data-exiting:fade-out-0 data-entering:fade-in-0 data-exiting:zoom-out-95 data-entering:zoom-in-95 bg-neutral-surface dark:bg-neutral-surface-alt text-neutral-text gap-6 rounded-4xl p-6 shadow-xl duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-md;\n }\n\n .cn-combobox-content-aria {\n @apply bg-neutral-surface dark:bg-neutral-surface-alt text-neutral-text data-entering:animate-in data-exiting:animate-out data-exiting:fade-out-0 data-entering:fade-in-0 data-exiting:zoom-out-95 data-entering:zoom-in-95 data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:bg-neutral-interactive/50 *:data-[slot=input-group]:border-neutral-interactive/30 max-h-72 min-w-36 overflow-hidden rounded-3xl shadow-lg duration-100 *:data-[slot=input-group]:m-1.5 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none;\n }\n\n .cn-context-menu-content-aria {\n @apply data-entering:animate-in data-exiting:animate-out data-exiting:fade-out-0 data-entering:fade-in-0 data-exiting:zoom-out-95 data-entering:zoom-in-95 data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2 bg-neutral-surface dark:bg-neutral-surface-alt text-neutral-text min-w-48 rounded-3xl p-1.5 shadow-lg duration-100;\n }\n\n .cn-dialog-overlay-aria {\n @apply data-entering:animate-in data-exiting:animate-out data-exiting:fade-out-0 data-entering:fade-in-0 bg-black/30 duration-100 supports-backdrop-filter:backdrop-blur-sm;\n }\n\n .cn-dialog-content-aria {\n @apply bg-neutral-surface dark:bg-neutral-surface-alt text-neutral-text data-entering:animate-in data-exiting:animate-out data-exiting:fade-out-0 data-entering:fade-in-0 data-exiting:zoom-out-95 data-entering:zoom-in-95 grid max-w-[calc(100%-2rem)] gap-6 rounded-4xl p-6 text-sm shadow-xl duration-100 sm:max-w-md;\n }\n\n .cn-dropdown-menu-content-aria {\n @apply data-entering:animate-in data-exiting:animate-out data-exiting:fade-out-0 data-entering:fade-in-0 data-exiting:zoom-out-95 data-entering:zoom-in-95 data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2 bg-neutral-surface dark:bg-neutral-surface-alt text-neutral-text min-w-48 rounded-3xl p-1.5 shadow-lg duration-100;\n }\n\n .cn-popover-content-aria {\n @apply bg-neutral-surface dark:bg-neutral-surface-alt text-neutral-text data-entering:animate-in data-exiting:animate-out data-exiting:fade-out-0 data-entering:fade-in-0 data-exiting:zoom-out-95 data-entering:zoom-in-95 data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2 flex flex-col gap-4 rounded-3xl p-4 text-sm shadow-lg duration-100;\n }\n\n .cn-hover-card-content-aria {\n @apply data-entering:animate-in data-exiting:animate-out data-exiting:fade-out-0 data-entering:fade-in-0 data-exiting:zoom-out-95 data-entering:zoom-in-95 data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2 bg-neutral-surface dark:bg-neutral-surface-alt text-neutral-text w-72 rounded-3xl p-4 text-sm shadow-lg duration-100;\n }\n\n .cn-select-content-aria {\n @apply bg-neutral-surface dark:bg-neutral-surface-alt text-neutral-text data-entering:animate-in data-exiting:animate-out data-exiting:fade-out-0 data-entering:fade-in-0 data-exiting:zoom-out-95 data-entering:zoom-in-95 data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2 min-w-36 rounded-3xl shadow-lg duration-100;\n }\n\n .cn-tooltip-content-aria {\n @apply data-entering:animate-in data-entering:fade-in-0 data-entering:zoom-in-95 data-exiting:animate-out data-exiting:fade-out-0 data-exiting:zoom-out-95 data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2 inline-flex items-center gap-1.5 rounded-xl px-3 py-1.5 text-xs has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-lg;\n }\n\n .cn-context-menu-sub-content-aria {\n @apply bg-neutral-surface dark:bg-neutral-surface-alt text-neutral-text min-w-32 rounded-3xl p-1.5 shadow-lg duration-100;\n }\n\n .cn-dropdown-menu-sub-content-aria {\n @apply bg-neutral-surface dark:bg-neutral-surface-alt text-neutral-text min-w-36 rounded-3xl p-1.5 shadow-lg duration-100;\n }\n}\n", "type": "registry:style", "target": "styles/style-karan.css" } ], "cssVars": { "light": { "radius": "0.625rem", "primary-surface": "oklch(0.985 0.01 264)", "primary-surface-alt": "oklch(0.95 0.016 264)", "primary-interactive": "oklch(0.91 0.024 264)", "primary-interactive-hover": "oklch(0.87 0.036 264)", "primary-interactive-active": "oklch(0.83 0.05 264)", "primary-fill": "oklch(0.45 0.2 264)", "primary-fill-hover": "oklch(0.38 0.184 264)", "primary-fill-active": "oklch(0.32 0.17 264)", "primary-text": "oklch(0.18 0.09 264)", "primary-text-secondary": "oklch(0.38 0.07 264)", "primary-text-muted": "oklch(0.53 0.04 264)", "primary-on-fill": "oklch(0.98 0.006 264)", "neutral-surface": "oklch(0.985 0.0004 264)", "neutral-surface-alt": "oklch(0.95 0.0006 264)", "neutral-interactive": "oklch(0.91 0.0008 264)", "neutral-interactive-hover": "oklch(0.87 0.0013 264)", "neutral-interactive-active": "oklch(0.83 0.0018 264)", "neutral-fill": "oklch(0.45 0.007 264)", "neutral-fill-hover": "oklch(0.38 0.0064 264)", "neutral-fill-active": "oklch(0.32 0.006 264)", "neutral-text": "oklch(0.18 0.0032 264)", "neutral-text-secondary": "oklch(0.38 0.0025 264)", "neutral-text-muted": "oklch(0.53 0.0014 264)", "neutral-on-fill": "oklch(0.98 0 264)", "info-surface": "oklch(0.985 0.008 294)", "info-surface-alt": "oklch(0.95 0.0128 294)", "info-interactive": "oklch(0.91 0.0192 294)", "info-interactive-hover": "oklch(0.87 0.0288 294)", "info-interactive-active": "oklch(0.83 0.04 294)", "info-fill": "oklch(0.45 0.16 294)", "info-fill-hover": "oklch(0.38 0.1472 294)", "info-fill-active": "oklch(0.32 0.136 294)", "info-text": "oklch(0.18 0.072 294)", "info-text-secondary": "oklch(0.38 0.056 294)", "info-text-muted": "oklch(0.53 0.032 294)", "info-on-fill": "oklch(0.98 0.0048 294)", "success-surface": "oklch(0.985 0.0076 155)", "success-surface-alt": "oklch(0.95 0.0122 155)", "success-interactive": "oklch(0.91 0.0182 155)", "success-interactive-hover": "oklch(0.87 0.0274 155)", "success-interactive-active": "oklch(0.83 0.038 155)", "success-fill": "oklch(0.45 0.152 155)", "success-fill-hover": "oklch(0.38 0.1398 155)", "success-fill-active": "oklch(0.32 0.1292 155)", "success-text": "oklch(0.18 0.0684 155)", "success-text-secondary": "oklch(0.38 0.0532 155)", "success-text-muted": "oklch(0.53 0.0304 155)", "success-on-fill": "oklch(0.98 0.0046 155)", "warning-surface": "oklch(0.985 0.0072 85)", "warning-surface-alt": "oklch(0.95 0.0115 85)", "warning-interactive": "oklch(0.91 0.0173 85)", "warning-interactive-hover": "oklch(0.87 0.0259 85)", "warning-interactive-active": "oklch(0.83 0.036 85)", "warning-fill": "oklch(0.45 0.144 85)", "warning-fill-hover": "oklch(0.38 0.1325 85)", "warning-fill-active": "oklch(0.32 0.1224 85)", "warning-text": "oklch(0.18 0.0648 85)", "warning-text-secondary": "oklch(0.38 0.0504 85)", "warning-text-muted": "oklch(0.53 0.0288 85)", "warning-on-fill": "oklch(0.98 0.0043 85)", "danger-surface": "oklch(0.985 0.0096 25)", "danger-surface-alt": "oklch(0.95 0.0154 25)", "danger-interactive": "oklch(0.91 0.023 25)", "danger-interactive-hover": "oklch(0.87 0.0346 25)", "danger-interactive-active": "oklch(0.83 0.048 25)", "danger-fill": "oklch(0.45 0.192 25)", "danger-fill-hover": "oklch(0.38 0.1766 25)", "danger-fill-active": "oklch(0.32 0.1632 25)", "danger-text": "oklch(0.18 0.0864 25)", "danger-text-secondary": "oklch(0.38 0.0672 25)", "danger-text-muted": "oklch(0.53 0.0384 25)", "danger-on-fill": "oklch(0.98 0.0058 25)" }, "dark": { "radius": "0.625rem", "primary-surface": "oklch(0.15 0.01 264)", "primary-surface-alt": "oklch(0.195 0.016 264)", "primary-interactive": "oklch(0.25 0.024 264)", "primary-interactive-hover": "oklch(0.31 0.036 264)", "primary-interactive-active": "oklch(0.37 0.05 264)", "primary-fill": "oklch(0.65 0.2 264)", "primary-fill-hover": "oklch(0.72 0.184 264)", "primary-fill-active": "oklch(0.78 0.17 264)", "primary-text": "oklch(0.95 0.0608 264)", "primary-text-secondary": "oklch(0.76 0.07 264)", "primary-text-muted": "oklch(0.62 0.04 264)", "primary-on-fill": "oklch(0.15 0.006 264)", "neutral-surface": "oklch(0.15 0.0004 264)", "neutral-surface-alt": "oklch(0.195 0.0006 264)", "neutral-interactive": "oklch(0.25 0.0008 264)", "neutral-interactive-hover": "oklch(0.31 0.0013 264)", "neutral-interactive-active": "oklch(0.37 0.0018 264)", "neutral-fill": "oklch(0.65 0.007 264)", "neutral-fill-hover": "oklch(0.72 0.0064 264)", "neutral-fill-active": "oklch(0.78 0.006 264)", "neutral-text": "oklch(0.95 0.0032 264)", "neutral-text-secondary": "oklch(0.76 0.0025 264)", "neutral-text-muted": "oklch(0.62 0.0014 264)", "neutral-on-fill": "oklch(0.15 0 264)", "info-surface": "oklch(0.15 0.008 294)", "info-surface-alt": "oklch(0.195 0.0128 294)", "info-interactive": "oklch(0.25 0.0192 294)", "info-interactive-hover": "oklch(0.31 0.0288 294)", "info-interactive-active": "oklch(0.37 0.04 294)", "info-fill": "oklch(0.65 0.16 294)", "info-fill-hover": "oklch(0.72 0.1472 294)", "info-fill-active": "oklch(0.78 0.136 294)", "info-text": "oklch(0.95 0.0608 294)", "info-text-secondary": "oklch(0.76 0.056 294)", "info-text-muted": "oklch(0.62 0.032 294)", "info-on-fill": "oklch(0.15 0.0048 294)", "success-surface": "oklch(0.15 0.0076 155)", "success-surface-alt": "oklch(0.195 0.0122 155)", "success-interactive": "oklch(0.25 0.0182 155)", "success-interactive-hover": "oklch(0.31 0.0274 155)", "success-interactive-active": "oklch(0.37 0.038 155)", "success-fill": "oklch(0.65 0.152 155)", "success-fill-hover": "oklch(0.72 0.1398 155)", "success-fill-active": "oklch(0.78 0.1292 155)", "success-text": "oklch(0.95 0.0608 155)", "success-text-secondary": "oklch(0.76 0.0532 155)", "success-text-muted": "oklch(0.62 0.0304 155)", "success-on-fill": "oklch(0.15 0.0046 155)", "warning-surface": "oklch(0.15 0.0072 85)", "warning-surface-alt": "oklch(0.195 0.0115 85)", "warning-interactive": "oklch(0.25 0.0173 85)", "warning-interactive-hover": "oklch(0.31 0.0259 85)", "warning-interactive-active": "oklch(0.37 0.036 85)", "warning-fill": "oklch(0.65 0.144 85)", "warning-fill-hover": "oklch(0.72 0.1325 85)", "warning-fill-active": "oklch(0.78 0.1224 85)", "warning-text": "oklch(0.95 0.0608 85)", "warning-text-secondary": "oklch(0.76 0.0504 85)", "warning-text-muted": "oklch(0.62 0.0288 85)", "warning-on-fill": "oklch(0.15 0.0043 85)", "danger-surface": "oklch(0.15 0.0096 25)", "danger-surface-alt": "oklch(0.195 0.0154 25)", "danger-interactive": "oklch(0.25 0.023 25)", "danger-interactive-hover": "oklch(0.31 0.0346 25)", "danger-interactive-active": "oklch(0.37 0.048 25)", "danger-fill": "oklch(0.65 0.192 25)", "danger-fill-hover": "oklch(0.72 0.1766 25)", "danger-fill-active": "oklch(0.78 0.1632 25)", "danger-text": "oklch(0.95 0.0608 25)", "danger-text-secondary": "oklch(0.76 0.0672 25)", "danger-text-muted": "oklch(0.62 0.0384 25)", "danger-on-fill": "oklch(0.15 0.0058 25)" } } }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "accordion", "type": "registry:ui", "title": "Accordion", "description": "A vertically stacked set of interactive headings that each reveal a section of content.", "dependencies": [ "@base-ui/react", "lucide-react" ], "registryDependencies": [], "files": [ { "path": "ui/accordion.tsx", "content": "import { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\"\nimport { cn } from \"cn\"\n\nimport { ChevronDown, ChevronUp } from \"lucide-react\"\n\nfunction Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {\n return (\n \n )\n}\n\nfunction AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {\n return (\n \n )\n}\n\nfunction AccordionTrigger({\n className,\n children,\n ...props\n}: AccordionPrimitive.Trigger.Props) {\n return (\n \n \n {children}\n \n \n )\n}\n\nfunction AccordionContent({\n className,\n children,\n ...props\n}: AccordionPrimitive.Panel.Props) {\n return (\n \n \n {children}\n \n \n )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n", "type": "registry:ui", "target": "components/ui/accordion.tsx" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "alert-dialog", "type": "registry:ui", "title": "Alert Dialog", "description": "An interruptive confirmation modal that requires explicit user confirmation, featuring accessible alertdialog roles and focus trapping.", "dependencies": [ "@base-ui/react", "class-variance-authority" ], "registryDependencies": [ "button" ], "files": [ { "path": "ui/alert-dialog.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AlertDialog as AlertDialogPrimitive } from \"@base-ui/react/alert-dialog\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"cn\"\n\nimport { Button, type ButtonProps } from \"@/components/ui/button\"\n\nexport type AlertDialogSize = \"sm\" | \"default\" | \"lg\" | \"xl\" | \"full\"\n\nconst AlertDialogContext = React.createContext<{ size: AlertDialogSize }>({\n size: \"default\",\n})\n\nconst alertDialogContentVariants = cva(\n \"cn-alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 bg-neutral-surface text-neutral-text shadow-2xl outline-none duration-200 data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0\",\n {\n variants: {\n size: {\n sm: \"max-w-sm p-4 gap-3 rounded-xl\",\n default: \"max-w-lg p-6 gap-4 rounded-2xl\",\n lg: \"max-w-2xl p-6 sm:p-8 gap-5 rounded-2xl\",\n xl: \"max-w-4xl p-6 sm:p-8 gap-6 rounded-3xl\",\n full: \"max-w-[calc(100vw-2rem)] max-h-[calc(100dvh-2rem)] sm:max-w-[calc(100vw-4rem)] sm:max-h-[calc(100dvh-4rem)] p-6 sm:p-10 gap-6 rounded-3xl overflow-y-auto\",\n },\n },\n defaultVariants: {\n size: \"default\",\n },\n }\n)\n\nfunction AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {\n return \n}\n\nfunction AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {\n return (\n \n )\n}\n\nfunction AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {\n return (\n \n )\n}\n\nfunction AlertDialogOverlay({\n className,\n ...props\n}: AlertDialogPrimitive.Backdrop.Props) {\n return (\n \n )\n}\n\nexport interface AlertDialogContentProps\n extends Omit,\n VariantProps {\n className?: string\n /**\n * Alert dialog size tier (`sm` | `default` | `lg` | `xl` | `full`) controlling width, padding, and density.\n * @default \"default\"\n */\n size?: AlertDialogSize\n}\n\nfunction AlertDialogContent({\n className,\n size = \"default\",\n children,\n ...props\n}: AlertDialogContentProps) {\n return (\n \n \n \n \n {children}\n \n \n \n )\n}\n\nfunction AlertDialogHeader({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n const { size } = React.useContext(AlertDialogContext)\n return (\n \n )\n}\n\nfunction AlertDialogFooter({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n const { size } = React.useContext(AlertDialogContext)\n return (\n \n )\n}\n\nfunction AlertDialogMedia({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction AlertDialogTitle({\n className,\n ...props\n}: React.ComponentProps) {\n const { size } = React.useContext(AlertDialogContext)\n return (\n \n )\n}\n\nfunction AlertDialogDescription({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nexport interface AlertDialogActionProps extends ButtonProps {}\n\nfunction AlertDialogAction({\n className,\n variant = \"default\",\n intent = \"primary\",\n ...props\n}: AlertDialogActionProps) {\n return (\n \n )\n}\n\nexport interface AlertDialogCancelProps\n extends AlertDialogPrimitive.Close.Props,\n Pick {\n className?: string\n}\n\nfunction AlertDialogCancel({\n className,\n variant = \"outline\",\n size = \"default\",\n ...props\n}: AlertDialogCancelProps) {\n return (\n }\n className={cn(\"cn-alert-dialog-cancel\", className)}\n {...props}\n />\n )\n}\n\nexport {\n AlertDialog,\n AlertDialogAction,\n AlertDialogCancel,\n AlertDialogContent,\n AlertDialogDescription,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogMedia,\n AlertDialogOverlay,\n AlertDialogPortal,\n AlertDialogTitle,\n AlertDialogTrigger,\n alertDialogContentVariants,\n}\n", "type": "registry:ui", "target": "components/ui/alert-dialog.tsx" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "alert", "type": "registry:ui", "title": "Alert", "description": "Displays a callout for user attention.", "dependencies": [ "class-variance-authority", "lucide-react" ], "registryDependencies": [ "button" ], "files": [ { "path": "ui/alert.tsx", "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { X } from \"icons\"\nimport { cn } from \"cn\"\n\nimport { Button } from \"@/components/ui/button\"\n\nexport type AlertIntent =\n | \"neutral\"\n | \"primary\"\n | \"success\"\n | \"warning\"\n | \"danger\"\n | \"info\"\n\nexport type AlertSize = \"sm\" | \"default\" | \"lg\"\n\nexport type AlertVariant = \"subtle\" | \"outline\" | \"surface\" | \"solid\" | \"default\" | \"destructive\"\n\ninterface AlertContextValue {\n size: AlertSize\n intent: AlertIntent\n variant: AlertVariant\n onClose?: () => void\n}\n\nconst AlertContext = React.createContext({\n size: \"default\",\n intent: \"neutral\",\n variant: \"subtle\",\n})\n\nexport const useAlertContext = () => React.useContext(AlertContext)\n\nconst alertVariants = cva(\"cn-alert group/alert\", {\n variants: {\n variant: {\n subtle: \"cn-alert-variant-subtle\",\n outline: \"cn-alert-variant-outline\",\n surface: \"cn-alert-variant-surface\",\n solid: \"cn-alert-variant-solid\",\n // Backwards compatibility aliases\n default: \"cn-alert-variant-default\",\n destructive: \"cn-alert-variant-destructive\",\n },\n size: {\n sm: \"cn-alert-size-sm\",\n default: \"cn-alert-size-default\",\n lg: \"cn-alert-size-lg\",\n },\n },\n defaultVariants: {\n variant: \"subtle\",\n size: \"default\",\n },\n})\n\nexport interface AlertProps\n extends React.ComponentProps<\"div\">,\n Omit, \"size\"> {\n /**\n * Semantic intent of the alert banner mapped to OKLCH design tokens.\n * @default \"neutral\"\n */\n intent?: AlertIntent\n /**\n * Proportional density scale for the banner (`sm` | `default` | `lg`).\n * @default \"default\"\n */\n size?: AlertSize\n /**\n * Optional custom leading icon or indicator element.\n * When provided, it renders directly in the leading position.\n */\n icon?: React.ReactNode\n /**\n * Callback invoked when the alert is dismissed.\n * If provided and `showCloseButton` is not explicitly false, an accessible close button\n * is automatically rendered at the header or corner.\n */\n onClose?: () => void\n /**\n * Whether to render a close button when `onClose` is provided.\n * @default true\n */\n showCloseButton?: boolean\n}\n\nfunction Alert({\n className,\n variant = \"subtle\",\n intent: userIntent,\n size = \"default\",\n icon,\n onClose,\n showCloseButton = true,\n role,\n children,\n ...props\n}: AlertProps) {\n // Map legacy destructive variant to danger intent if intent not explicitly set\n const resolvedIntent: AlertIntent =\n userIntent ?? (variant === \"destructive\" ? \"danger\" : \"neutral\")\n\n // For high-urgency alerts, default role is 'alert'; otherwise 'status'\n const resolvedRole =\n role ?? (resolvedIntent === \"danger\" ? \"alert\" : \"status\")\n\n const resolvedVariant: AlertVariant = variant ?? \"subtle\"\n const shouldRenderAutoClose = Boolean(onClose && showCloseButton)\n\n return (\n \n \n {icon && {icon}}\n
{children}
\n {shouldRenderAutoClose && }\n \n \n )\n}\n\nfunction AlertIcon({ className, children, ...props }: React.ComponentProps<\"div\">) {\n const { size } = useAlertContext()\n return (\n \n {children}\n \n )\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n const { size } = useAlertContext()\n return (\n \n )\n}\n\nfunction AlertDescription({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n const { size } = useAlertContext()\n return (\n \n )\n}\n\nfunction AlertAction({ className, ...props }: React.ComponentProps<\"div\">) {\n const { size } = useAlertContext()\n return (\n \n )\n}\n\nexport interface AlertCloseProps\n extends Omit, \"size\" | \"variant\"> {\n /**\n * Optional custom button size.\n * Defaults to proportional icon sizes (`icon-xs` for `sm`, `icon-sm` for `default`/`lg`).\n */\n size?: \"icon-xs\" | \"icon-sm\" | \"icon\" | \"icon-lg\" | \"xs\" | \"sm\" | \"default\" | \"lg\"\n /**\n * Optional button variant override.\n * Defaults to \"ghost\".\n */\n variant?: React.ComponentProps[\"variant\"]\n}\n\nfunction AlertClose({\n className,\n size: customSize,\n variant: customVariant,\n onClick,\n children,\n ...props\n}: AlertCloseProps) {\n const { size, variant, intent, onClose } = useAlertContext()\n const handleClick = onClick ?? onClose\n\n const buttonSize =\n customSize ?? (size === \"sm\" ? \"icon-xs\" : \"icon-sm\")\n\n const isSolid = variant === \"solid\"\n\n return (\n \n {children ?? (\n <>\n \n Close alert\n \n )}\n \n )\n}\n\nexport {\n Alert,\n AlertIcon,\n AlertTitle,\n AlertDescription,\n AlertAction,\n AlertClose,\n}\n", "type": "registry:ui", "target": "components/ui/alert.tsx" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "aspect-ratio", "type": "registry:ui", "title": "Aspect ratio", "description": "karan-ui aspect-ratio component built with Base UI.", "dependencies": [], "registryDependencies": [], "files": [ { "path": "ui/aspect-ratio.tsx", "content": "import { cn } from \"cn\"\n\nfunction AspectRatio({\n ratio,\n className,\n ...props\n}: React.ComponentProps<\"div\"> & { ratio: number }) {\n return (\n \n )\n}\n\nexport { AspectRatio }\n", "type": "registry:ui", "target": "components/ui/aspect-ratio.tsx" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "avatar", "type": "registry:ui", "title": "Avatar", "description": "An image element with a fallback for representing the user.", "dependencies": [ "@base-ui/react" ], "registryDependencies": [], "files": [ { "path": "ui/avatar.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Avatar as AvatarPrimitive } from \"@base-ui/react/avatar\"\nimport { cn } from \"cn\"\n\nfunction Avatar({\n className,\n size = \"default\",\n ...props\n}: AvatarPrimitive.Root.Props & {\n size?: \"default\" | \"sm\" | \"lg\"\n}) {\n return (\n \n )\n}\n\nfunction AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {\n return (\n \n )\n}\n\nfunction AvatarFallback({\n className,\n ...props\n}: AvatarPrimitive.Fallback.Props) {\n return (\n \n )\n}\n\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<\"span\">) {\n return (\n svg]:hidden\",\n \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\",\n \"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction AvatarGroupCount({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nexport {\n Avatar,\n AvatarImage,\n AvatarFallback,\n AvatarGroup,\n AvatarGroupCount,\n AvatarBadge,\n}\n", "type": "registry:ui", "target": "components/ui/avatar.tsx" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "badge", "type": "registry:ui", "title": "Badge", "description": "Displays a badge or a component that looks like a badge.", "dependencies": [ "@base-ui/react", "class-variance-authority" ], "registryDependencies": [], "files": [ { "path": "ui/badge.tsx", "content": "import { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"cn\"\n\nconst badgeVariants = cva(\n \"cn-badge group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap focus-visible:border-primary-fill focus-visible:ring-[3px] focus-visible:ring-primary-fill/50 aria-invalid:border-danger-fill aria-invalid:ring-danger-fill/20 dark:aria-invalid:ring-danger-fill/40 [&>svg]:pointer-events-none\",\n {\n variants: {\n variant: {\n default: \"cn-badge-variant-default\",\n secondary: \"cn-badge-variant-secondary\",\n destructive: \"cn-badge-variant-destructive\",\n outline: \"cn-badge-variant-outline\",\n ghost: \"cn-badge-variant-ghost\",\n link: \"cn-badge-variant-link\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nfunction Badge({\n className,\n variant = \"default\",\n render,\n ...props\n}: useRender.ComponentProps<\"span\"> & VariantProps) {\n return useRender({\n defaultTagName: \"span\",\n props: mergeProps<\"span\">(\n {\n className: cn(badgeVariants({ variant }), className),\n },\n props\n ),\n render,\n state: {\n slot: \"badge\",\n variant,\n },\n })\n}\n\nexport { Badge, badgeVariants }\n", "type": "registry:ui", "target": "components/ui/badge.tsx" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "breadcrumb", "type": "registry:ui", "title": "Breadcrumb", "description": "Displays the path to the current resource using a hierarchy of links.", "dependencies": [ "@base-ui/react", "class-variance-authority", "lucide-react" ], "registryDependencies": [], "files": [ { "path": "ui/breadcrumb.tsx", "content": "import * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"cn\"\n\nimport { ChevronRight, MoreHorizontal } from \"lucide-react\"\n\nexport type BreadcrumbSize = \"sm\" | \"default\" | \"lg\"\n\ninterface BreadcrumbContextProps {\n size: BreadcrumbSize\n}\n\nconst BreadcrumbContext = React.createContext({\n size: \"default\",\n})\n\nconst breadcrumbListVariants = cva(\n \"cn-breadcrumb-list flex flex-wrap items-center wrap-break-word text-neutral-text-muted\",\n {\n variants: {\n size: {\n sm: \"text-xs gap-1 sm:gap-1.5\",\n default: \"text-sm gap-1.5 sm:gap-2\",\n lg: \"text-base gap-2 sm:gap-2.5\",\n },\n },\n defaultVariants: {\n size: \"default\",\n },\n }\n)\n\nexport interface BreadcrumbProps\n extends React.ComponentProps<\"nav\">,\n VariantProps {\n /**\n * Sizing scale for breadcrumb items, dividers, and typography (`sm` | `default` | `lg`).\n * @default \"default\"\n */\n size?: BreadcrumbSize\n}\n\nfunction Breadcrumb({\n className,\n size = \"default\",\n ...props\n}: BreadcrumbProps) {\n return (\n \n \n \n )\n}\n\nexport interface BreadcrumbListProps extends React.ComponentProps<\"ol\"> {\n size?: BreadcrumbSize\n}\n\nfunction BreadcrumbList({ className, size: customSize, ...props }: BreadcrumbListProps) {\n const { size } = React.useContext(BreadcrumbContext)\n const resolvedSize = customSize ?? size\n\n return (\n \n )\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n const { size } = React.useContext(BreadcrumbContext)\n\n return (\n \n )\n}\n\nexport interface BreadcrumbLinkProps extends useRender.ComponentProps<\"a\"> {\n /**\n * Optional leading icon displayed before the breadcrumb link label.\n */\n icon?: React.ReactNode\n}\n\nfunction BreadcrumbLink({\n className,\n render,\n icon,\n children,\n ...props\n}: BreadcrumbLinkProps) {\n const { size } = React.useContext(BreadcrumbContext)\n\n return useRender({\n defaultTagName: \"a\",\n props: mergeProps<\"a\">(\n {\n className: cn(\n \"cn-breadcrumb-link inline-flex items-center gap-1.5 hover:text-neutral-text transition-colors outline-hidden focus-visible:ring-1 focus-visible:ring-primary-fill rounded-xs\",\n size === \"sm\" ? \"[&_svg]:size-3\" : size === \"lg\" ? \"[&_svg]:size-4\" : \"[&_svg]:size-3.5\",\n className\n ),\n children: (\n <>\n {icon && {icon}}\n {children}\n \n ),\n },\n props\n ),\n render,\n state: {\n slot: \"breadcrumb-link\",\n },\n })\n}\n\nexport interface BreadcrumbPageProps extends React.ComponentProps<\"span\"> {\n /**\n * Optional leading icon displayed before the current page title.\n */\n icon?: React.ReactNode\n}\n\nfunction BreadcrumbPage({\n className,\n icon,\n children,\n ...props\n}: BreadcrumbPageProps) {\n const { size } = React.useContext(BreadcrumbContext)\n\n return (\n \n {icon && {icon}}\n {children}\n \n )\n}\n\nfunction BreadcrumbSeparator({\n children,\n className,\n ...props\n}: React.ComponentProps<\"li\">) {\n const { size } = React.useContext(BreadcrumbContext)\n\n return (\n svg]:size-3\" : size === \"lg\" ? \"[&>svg]:size-4\" : \"[&>svg]:size-3.5\",\n className\n )}\n {...props}\n >\n {children ?? (\n \n )}\n \n )\n}\n\nfunction BreadcrumbEllipsis({\n className,\n ...props\n}: React.ComponentProps<\"span\">) {\n const { size } = React.useContext(BreadcrumbContext)\n\n return (\n svg]:size-3\" : size === \"lg\" ? \"size-6 [&>svg]:size-4.5\" : \"size-5 [&>svg]:size-3.5\",\n className\n )}\n {...props}\n >\n \n More\n \n )\n}\n\nexport {\n Breadcrumb,\n BreadcrumbList,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbPage,\n BreadcrumbSeparator,\n BreadcrumbEllipsis,\n breadcrumbListVariants,\n}\n", "type": "registry:ui", "target": "components/ui/breadcrumb.tsx" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "button-group", "type": "registry:ui", "title": "Button group", "description": "karan-ui button-group component built with Base UI.", "dependencies": [ "@base-ui/react", "class-variance-authority" ], "registryDependencies": [ "button", "separator" ], "files": [ { "path": "ui/button-group.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"cn\"\n\nimport type { ButtonIntent, ButtonVariant } from \"@/components/ui/button\"\nimport { Separator } from \"@/components/ui/separator\"\n\nexport type ButtonGroupSize = \"xs\" | \"sm\" | \"default\" | \"lg\"\nexport type ButtonGroupOrientation = \"horizontal\" | \"vertical\"\n\nexport interface ButtonGroupContextValue {\n variant?: ButtonVariant\n size?: ButtonGroupSize\n intent?: ButtonIntent\n disabled?: boolean\n orientation?: ButtonGroupOrientation\n attached?: boolean\n}\n\nconst ButtonGroupContext = React.createContext(\n null\n)\n\nexport function useButtonGroupContext() {\n return React.useContext(ButtonGroupContext)\n}\n\nconst buttonGroupVariants = cva(\n \"cn-button-group inline-flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-20 *:hover:z-10 *:active:z-10 *:[&[data-pressed]]:z-10 [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n {\n variants: {\n orientation: {\n horizontal: \"cn-button-group-orientation-horizontal flex-row\",\n vertical: \"cn-button-group-orientation-vertical flex-col\",\n },\n attached: {\n true: [\n \"*:data-[slot=button]:bg-clip-border\",\n \"data-[orientation=horizontal]:[&>[data-slot]:not(:last-child)]:rounded-e-none\",\n \"data-[orientation=horizontal]:[&>[data-slot]:not(:first-child)]:rounded-s-none\",\n \"data-[orientation=horizontal]:[&>[data-slot=button][data-variant=outline]~[data-slot]]:-ms-px\",\n \"data-[orientation=horizontal]:[&>[data-slot=button-group-text]~[data-slot]]:-ms-px\",\n \"data-[orientation=horizontal]:[&>[data-slot]~[data-slot=button-group-text]]:-ms-px\",\n \"data-[orientation=horizontal]:[&>[data-slot=button][data-variant=default]:not(:hover):not(:active):not([data-pressed]):not(:focus-visible)+[data-slot=button][data-variant=default]:not(:hover):not(:active):not([data-pressed]):not(:focus-visible)]:border-s-neutral-on-fill/20\",\n \"data-[orientation=horizontal]:[&>[data-slot=button][data-variant=secondary]:not(:hover):not(:active):not([data-pressed]):not(:focus-visible)+[data-slot=button][data-variant=secondary]:not(:hover):not(:active):not([data-pressed]):not(:focus-visible)]:border-s-neutral-text/15\",\n \"data-[orientation=vertical]:[&>[data-slot]:not(:last-child)]:rounded-b-none\",\n \"data-[orientation=vertical]:[&>[data-slot]:not(:first-child)]:rounded-t-none\",\n \"data-[orientation=vertical]:[&>[data-slot=button][data-variant=outline]~[data-slot]]:-mt-px\",\n \"data-[orientation=vertical]:[&>[data-slot=button-group-text]~[data-slot]]:-mt-px\",\n \"data-[orientation=vertical]:[&>[data-slot]~[data-slot=button-group-text]]:-mt-px\",\n \"data-[orientation=vertical]:[&>[data-slot=button][data-variant=default]:not(:hover):not(:active):not([data-pressed]):not(:focus-visible)+[data-slot=button][data-variant=default]:not(:hover):not(:active):not([data-pressed]):not(:focus-visible)]:border-t-neutral-on-fill/20\",\n \"data-[orientation=vertical]:[&>[data-slot=button][data-variant=secondary]:not(:hover):not(:active):not([data-pressed]):not(:focus-visible)+[data-slot=button][data-variant=secondary]:not(:hover):not(:active):not([data-pressed]):not(:focus-visible)]:border-t-neutral-text/15\",\n ].join(\" \"),\n false: \"\",\n },\n size: {\n xs: \"data-[attached=false]:gap-1\",\n sm: \"data-[attached=false]:gap-1\",\n default: \"data-[attached=false]:gap-1.5\",\n lg: \"data-[attached=false]:gap-2\",\n },\n },\n defaultVariants: {\n orientation: \"horizontal\",\n attached: true,\n size: \"default\",\n },\n }\n)\n\nexport interface ButtonGroupProps\n extends React.ComponentProps<\"div\">,\n Omit, \"attached\" | \"size\"> {\n /**\n * Layout direction of the group (`\"horizontal\"` | `\"vertical\"`).\n * @default \"horizontal\"\n */\n orientation?: ButtonGroupOrientation\n /**\n * When `true`, buttons are joined into a single contiguous bar with collapsed inner corners.\n * When `false`, buttons render as a spaced toolbar cluster with individual rounded corners.\n * @default true\n */\n attached?: boolean\n /**\n * Shared visual variant inherited by child `Button` components unless overridden on the child.\n */\n variant?: ButtonVariant\n /**\n * Shared semantic color intent inherited by child `Button` components unless overridden on the child.\n */\n intent?: ButtonIntent\n /**\n * Shared size scale inherited by child `Button` and `ButtonGroupText` components unless overridden on the child.\n */\n size?: ButtonGroupSize\n /**\n * Disables all child `Button` components in the group when `true`.\n */\n disabled?: boolean\n}\n\nfunction ButtonGroup({\n className,\n orientation = \"horizontal\",\n attached = true,\n variant,\n intent,\n size,\n disabled,\n ...props\n}: ButtonGroupProps) {\n const resolvedOrientation: ButtonGroupOrientation = orientation || \"horizontal\"\n const resolvedAttached = attached !== false\n const resolvedSize: ButtonGroupSize = size || \"default\"\n\n const contextValue = React.useMemo(\n () => ({\n variant,\n size,\n intent,\n disabled,\n orientation: resolvedOrientation,\n attached: resolvedAttached,\n }),\n [variant, size, intent, disabled, resolvedOrientation, resolvedAttached]\n )\n\n return (\n \n \n \n )\n}\n\nconst buttonGroupTextVariants = cva(\n \"cn-button-group-text inline-flex shrink-0 items-center border border-neutral-interactive bg-neutral-interactive/60 text-neutral-text font-medium whitespace-nowrap select-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n {\n variants: {\n size: {\n xs: \"h-6 gap-1 rounded-md px-2 text-xs [&_svg:not([class*='size-'])]:size-3\",\n sm: \"h-7 gap-1 rounded-md px-2.5 text-xs [&_svg:not([class*='size-'])]:size-3.5\",\n default:\n \"h-8 gap-1.5 rounded-lg px-3 text-sm [&_svg:not([class*='size-'])]:size-4\",\n lg: \"h-9 gap-2 rounded-lg px-3.5 text-sm [&_svg:not([class*='size-'])]:size-4\",\n },\n },\n defaultVariants: {\n size: \"default\",\n },\n }\n)\n\nexport interface ButtonGroupTextProps extends useRender.ComponentProps<\"div\"> {\n /**\n * Size scale matching sibling buttons (`\"xs\"` | `\"sm\"` | `\"default\"` | `\"lg\"`).\n * Inherits from parent `ButtonGroup` when omitted.\n */\n size?: ButtonGroupSize\n}\n\nfunction ButtonGroupText({\n className,\n size,\n render,\n ...props\n}: ButtonGroupTextProps) {\n const groupContext = useButtonGroupContext()\n const resolvedSize: ButtonGroupSize = size ?? groupContext?.size ?? \"default\"\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(\n {\n className: cn(buttonGroupTextVariants({ size: resolvedSize }), className),\n },\n props\n ),\n render,\n state: {\n slot: \"button-group-text\",\n size: resolvedSize,\n },\n })\n}\n\nfunction ButtonGroupSeparator({\n className,\n orientation,\n ...props\n}: React.ComponentProps) {\n const groupContext = useButtonGroupContext()\n const resolvedOrientation =\n orientation ??\n (groupContext?.orientation === \"vertical\" ? \"horizontal\" : \"vertical\")\n\n return (\n \n )\n}\n\nexport {\n ButtonGroup,\n ButtonGroupContext,\n ButtonGroupSeparator,\n ButtonGroupText,\n buttonGroupTextVariants,\n buttonGroupVariants,\n}\n", "type": "registry:ui", "target": "components/ui/button-group.tsx" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "button", "type": "registry:ui", "title": "Button", "description": "Displays a button or a component that looks like a button.", "dependencies": [ "@base-ui/react", "class-variance-authority", "lucide-react" ], "registryDependencies": [ "button-group" ], "files": [ { "path": "ui/button.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Loader2 } from \"icons\"\nimport { cn } from \"cn\"\n\nimport { useButtonGroupContext } from \"@/components/ui/button-group\"\n\nexport type ButtonVariant =\n | \"default\"\n | \"outline\"\n | \"secondary\"\n | \"ghost\"\n | \"link\"\n\nexport type ButtonIntent =\n | \"neutral\"\n | \"primary\"\n | \"success\"\n | \"warning\"\n | \"danger\"\n | \"info\"\n\nexport type ButtonAlign = \"start\" | \"center\" | \"end\"\n\nconst INTENT_VARIANT_CLASSES: Record> = {\n primary: {\n default:\n \"bg-primary-fill text-primary-on-fill hover:bg-primary-fill-hover active:bg-primary-fill-active [&[data-pressed]]:bg-primary-fill-active focus-visible:border-primary-fill focus-visible:ring-primary-fill/30\",\n secondary:\n \"bg-primary-interactive text-primary-text-secondary hover:bg-primary-interactive-hover active:bg-primary-interactive-active [&[data-pressed]]:bg-primary-interactive-active focus-visible:border-primary-fill focus-visible:ring-primary-fill/30\",\n outline:\n \"border-primary-interactive bg-neutral-surface dark:bg-transparent text-primary-text-secondary hover:bg-primary-interactive dark:hover:bg-primary-interactive hover:text-primary-text-secondary active:bg-primary-interactive-hover dark:active:bg-primary-interactive-hover [&[data-pressed]]:bg-primary-interactive-hover dark:[&[data-pressed]]:bg-primary-interactive-hover focus-visible:border-primary-fill focus-visible:ring-primary-fill/30\",\n ghost:\n \"bg-transparent text-primary-text-secondary hover:bg-primary-interactive hover:text-primary-text-secondary active:bg-primary-interactive-hover [&[data-pressed]]:bg-primary-interactive-hover focus-visible:border-primary-fill focus-visible:ring-primary-fill/30\",\n link:\n \"bg-transparent text-primary-text-secondary underline-offset-4 hover:text-primary-fill hover:underline focus-visible:text-primary-fill focus-visible:underline active:text-primary-text-secondary [&[data-pressed]]:text-primary-text-secondary focus-visible:ring-primary-fill/30\",\n },\n neutral: {\n default:\n \"bg-neutral-fill text-neutral-on-fill hover:bg-neutral-fill-hover active:bg-neutral-fill-active [&[data-pressed]]:bg-neutral-fill-active focus-visible:border-neutral-fill focus-visible:ring-neutral-fill/30\",\n secondary:\n \"bg-neutral-interactive text-neutral-text hover:bg-neutral-interactive-hover active:bg-neutral-interactive-active [&[data-pressed]]:bg-neutral-interactive-active focus-visible:border-neutral-fill focus-visible:ring-neutral-fill/30\",\n outline:\n \"border-neutral-interactive bg-neutral-surface dark:bg-transparent text-neutral-text hover:bg-neutral-interactive dark:hover:bg-neutral-interactive hover:text-neutral-text active:bg-neutral-interactive-hover dark:active:bg-neutral-interactive-hover [&[data-pressed]]:bg-neutral-interactive-hover dark:[&[data-pressed]]:bg-neutral-interactive-hover focus-visible:border-neutral-fill focus-visible:ring-neutral-fill/30\",\n ghost:\n \"bg-transparent text-neutral-text hover:bg-neutral-interactive hover:text-neutral-text active:bg-neutral-interactive-hover [&[data-pressed]]:bg-neutral-interactive-hover focus-visible:border-neutral-fill focus-visible:ring-neutral-fill/30\",\n link:\n \"bg-transparent text-neutral-text-secondary underline-offset-4 hover:text-neutral-text hover:underline focus-visible:text-neutral-text focus-visible:underline active:text-neutral-text-secondary [&[data-pressed]]:text-neutral-text-secondary focus-visible:ring-neutral-fill/30\",\n },\n success: {\n default:\n \"bg-success-fill text-success-on-fill hover:bg-success-fill-hover active:bg-success-fill-active [&[data-pressed]]:bg-success-fill-active focus-visible:border-success-fill focus-visible:ring-success-fill/30\",\n secondary:\n \"bg-success-interactive text-success-text-secondary hover:bg-success-interactive-hover active:bg-success-interactive-active [&[data-pressed]]:bg-success-interactive-active focus-visible:border-success-fill focus-visible:ring-success-fill/30\",\n outline:\n \"border-success-interactive bg-neutral-surface dark:bg-transparent text-success-text-secondary hover:bg-success-interactive dark:hover:bg-success-interactive hover:text-success-text-secondary active:bg-success-interactive-hover dark:active:bg-success-interactive-hover [&[data-pressed]]:bg-success-interactive-hover dark:[&[data-pressed]]:bg-success-interactive-hover focus-visible:border-success-fill focus-visible:ring-success-fill/30\",\n ghost:\n \"bg-transparent text-success-text-secondary hover:bg-success-interactive hover:text-success-text-secondary active:bg-success-interactive-hover [&[data-pressed]]:bg-success-interactive-hover focus-visible:border-success-fill focus-visible:ring-success-fill/30\",\n link:\n \"bg-transparent text-success-text-secondary underline-offset-4 hover:text-success-fill hover:underline focus-visible:text-success-fill focus-visible:underline active:text-success-text-secondary [&[data-pressed]]:text-success-text-secondary focus-visible:ring-success-fill/30\",\n },\n warning: {\n default:\n \"bg-warning-fill text-warning-on-fill hover:bg-warning-fill-hover active:bg-warning-fill-active [&[data-pressed]]:bg-warning-fill-active focus-visible:border-warning-fill focus-visible:ring-warning-fill/30\",\n secondary:\n \"bg-warning-interactive text-warning-text-secondary hover:bg-warning-interactive-hover active:bg-warning-interactive-active [&[data-pressed]]:bg-warning-interactive-active focus-visible:border-warning-fill focus-visible:ring-warning-fill/30\",\n outline:\n \"border-warning-interactive bg-neutral-surface dark:bg-transparent text-warning-text-secondary hover:bg-warning-interactive dark:hover:bg-warning-interactive hover:text-warning-text-secondary active:bg-warning-interactive-hover dark:active:bg-warning-interactive-hover [&[data-pressed]]:bg-warning-interactive-hover dark:[&[data-pressed]]:bg-warning-interactive-hover focus-visible:border-warning-fill focus-visible:ring-warning-fill/30\",\n ghost:\n \"bg-transparent text-warning-text-secondary hover:bg-warning-interactive hover:text-warning-text-secondary active:bg-warning-interactive-hover [&[data-pressed]]:bg-warning-interactive-hover focus-visible:border-warning-fill focus-visible:ring-warning-fill/30\",\n link:\n \"bg-transparent text-warning-text-secondary underline-offset-4 hover:text-warning-fill hover:underline focus-visible:text-warning-fill focus-visible:underline active:text-warning-text-secondary [&[data-pressed]]:text-warning-text-secondary focus-visible:ring-warning-fill/30\",\n },\n info: {\n default:\n \"bg-info-fill text-info-on-fill hover:bg-info-fill-hover active:bg-info-fill-active [&[data-pressed]]:bg-info-fill-active focus-visible:border-info-fill focus-visible:ring-info-fill/30\",\n secondary:\n \"bg-info-interactive text-info-text-secondary hover:bg-info-interactive-hover active:bg-info-interactive-active [&[data-pressed]]:bg-info-interactive-active focus-visible:border-info-fill focus-visible:ring-info-fill/30\",\n outline:\n \"border-info-interactive bg-neutral-surface dark:bg-transparent text-info-text-secondary hover:bg-info-interactive dark:hover:bg-info-interactive hover:text-info-text-secondary active:bg-info-interactive-hover dark:active:bg-info-interactive-hover [&[data-pressed]]:bg-info-interactive-hover dark:[&[data-pressed]]:bg-info-interactive-hover focus-visible:border-info-fill focus-visible:ring-info-fill/30\",\n ghost:\n \"bg-transparent text-info-text-secondary hover:bg-info-interactive hover:text-info-text-secondary active:bg-info-interactive-hover [&[data-pressed]]:bg-info-interactive-hover focus-visible:border-info-fill focus-visible:ring-info-fill/30\",\n link:\n \"bg-transparent text-info-text-secondary underline-offset-4 hover:text-info-fill hover:underline focus-visible:text-info-fill focus-visible:underline active:text-info-text-secondary [&[data-pressed]]:text-info-text-secondary focus-visible:ring-info-fill/30\",\n },\n danger: {\n default:\n \"bg-danger-fill text-danger-on-fill hover:bg-danger-fill-hover active:bg-danger-fill-active [&[data-pressed]]:bg-danger-fill-active focus-visible:border-danger-fill focus-visible:ring-danger-fill/30\",\n secondary:\n \"bg-danger-interactive text-danger-text-secondary hover:bg-danger-interactive-hover active:bg-danger-interactive-active [&[data-pressed]]:bg-danger-interactive-active focus-visible:border-danger-fill focus-visible:ring-danger-fill/30\",\n outline:\n \"border-danger-interactive bg-neutral-surface dark:bg-transparent text-danger-text-secondary hover:bg-danger-interactive dark:hover:bg-danger-interactive hover:text-danger-text-secondary active:bg-danger-interactive-hover dark:active:bg-danger-interactive-hover [&[data-pressed]]:bg-danger-interactive-hover dark:[&[data-pressed]]:bg-danger-interactive-hover focus-visible:border-danger-fill focus-visible:ring-danger-fill/30\",\n ghost:\n \"bg-transparent text-danger-text-secondary hover:bg-danger-interactive hover:text-danger-text-secondary active:bg-danger-interactive-hover [&[data-pressed]]:bg-danger-interactive-hover focus-visible:border-danger-fill focus-visible:ring-danger-fill/30\",\n link:\n \"bg-transparent text-danger-text-secondary underline-offset-4 hover:text-danger-fill hover:underline focus-visible:text-danger-fill focus-visible:underline active:text-danger-text-secondary [&[data-pressed]]:text-danger-text-secondary focus-visible:ring-danger-fill/30\",\n },\n}\n\nconst buttonVariants = cva(\n \"cn-button group/button shrink-0 items-center whitespace-nowrap transition-[background-color,color,border-color,box-shadow] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 cursor-pointer\",\n {\n variants: {\n variant: {\n default: \"cn-button-variant-default\",\n outline: \"cn-button-variant-outline\",\n secondary: \"cn-button-variant-secondary\",\n ghost: \"cn-button-variant-ghost\",\n link: \"cn-button-variant-link\",\n },\n size: {\n xs: \"cn-button-size-xs h-6 gap-1 rounded-md px-2 text-xs [&_svg:not([class*='size-'])]:size-3\",\n sm: \"cn-button-size-sm h-7 gap-1 rounded-md px-2 text-xs [&_svg:not([class*='size-'])]:size-3.5\",\n default: \"cn-button-size-default h-8 gap-1.5 rounded-lg px-3 text-sm [&_svg:not([class*='size-'])]:size-4\",\n lg: \"cn-button-size-lg h-9 gap-2 rounded-lg px-3.5 text-sm [&_svg:not([class*='size-'])]:size-4\",\n \"icon-xs\": \"cn-button-size-icon-xs size-6 rounded-md [&_svg:not([class*='size-'])]:size-3\",\n \"icon-sm\": \"cn-button-size-icon-sm size-7 rounded-md [&_svg:not([class*='size-'])]:size-3.5\",\n icon: \"cn-button-size-icon size-8 rounded-lg [&_svg:not([class*='size-'])]:size-4\",\n \"icon-lg\": \"cn-button-size-icon-lg size-9 rounded-lg [&_svg:not([class*='size-'])]:size-4\",\n },\n wide: {\n true: \"flex w-full\",\n false: \"inline-flex\",\n },\n align: {\n start: \"justify-start text-start\",\n center: \"justify-center text-center\",\n end: \"justify-end text-end\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n wide: false,\n align: \"center\",\n },\n }\n)\n\nexport interface ButtonProps\n extends Omit,\n VariantProps {\n className?: string\n /**\n * Semantic color intent for the button across variants.\n * Defaults to `\"primary\"` for `variant=\"default\"` and `\"neutral\"` for all other variants.\n */\n intent?: ButtonIntent\n /**\n * Expand button to full width (`w-full`).\n */\n wide?: boolean\n /**\n * Horizontal content alignment inside the button (`start` | `center` | `end`).\n */\n align?: ButtonAlign\n /**\n * Element or icon rendered before `children`.\n */\n leading?: React.ReactNode\n /**\n * Alias for `leading` — element or icon rendered before `children`.\n */\n icon?: React.ReactNode\n /**\n * Element or icon rendered after `children`.\n */\n trailing?: React.ReactNode\n /**\n * Displays an inline spinner in the leading slot and disables interactions.\n */\n loading?: boolean\n}\n\nfunction Button({\n className,\n variant,\n size,\n intent,\n wide = false,\n align = \"center\",\n leading,\n icon,\n trailing,\n loading = false,\n disabled,\n onKeyDown,\n onKeyUp,\n onBlur,\n children,\n ...props\n}: ButtonProps) {\n const groupContext = useButtonGroupContext()\n const [isPressed, setIsPressed] = React.useState(false)\n const pressStartRef = React.useRef(0)\n const releaseTimerRef = React.useRef | null>(null)\n\n React.useEffect(() => {\n return () => {\n if (releaseTimerRef.current) {\n clearTimeout(releaseTimerRef.current)\n }\n }\n }, [])\n\n const isDisabled = Boolean(disabled || groupContext?.disabled || loading)\n\n const handleKeyDown: NonNullable = (e) => {\n onKeyDown?.(e)\n if (e.defaultPrevented || isDisabled) return\n if (e.key === \"Enter\" || e.key === \" \") {\n if (!e.repeat) {\n if (releaseTimerRef.current) {\n clearTimeout(releaseTimerRef.current)\n releaseTimerRef.current = null\n }\n pressStartRef.current = performance.now()\n setIsPressed(true)\n }\n }\n }\n\n const handleKeyUp: NonNullable = (e) => {\n onKeyUp?.(e)\n if (e.key === \"Enter\" || e.key === \" \") {\n const elapsed = performance.now() - pressStartRef.current\n const minDuration = 150\n if (elapsed < minDuration) {\n if (releaseTimerRef.current) {\n clearTimeout(releaseTimerRef.current)\n }\n releaseTimerRef.current = setTimeout(() => {\n setIsPressed(false)\n releaseTimerRef.current = null\n }, minDuration - elapsed)\n } else {\n setIsPressed(false)\n }\n }\n }\n\n const handleBlur: NonNullable = (e) => {\n onBlur?.(e)\n if (releaseTimerRef.current) {\n clearTimeout(releaseTimerRef.current)\n releaseTimerRef.current = null\n }\n setIsPressed(false)\n }\n\n const resolvedVariant: ButtonVariant =\n variant ?? groupContext?.variant ?? \"default\"\n const resolvedSize = size ?? groupContext?.size ?? \"default\"\n const resolvedIntent: ButtonIntent =\n intent ??\n groupContext?.intent ??\n (resolvedVariant === \"default\" ? \"primary\" : \"neutral\")\n\n const leadingNode = loading ? (\n \n ) : (\n leading ?? icon\n )\n const hasAffixes =\n (leadingNode !== undefined && leadingNode !== null) ||\n (trailing !== undefined && trailing !== null)\n\n const intentClasses = INTENT_VARIANT_CLASSES[resolvedIntent]?.[resolvedVariant]\n\n return (\n \n {hasAffixes ? (\n <>\n {leadingNode !== undefined && leadingNode !== null && (\n \n {leadingNode}\n \n )}\n {children}\n {trailing !== undefined && trailing !== null && (\n \n {trailing}\n \n )}\n \n ) : (\n children\n )}\n \n )\n}\n\nexport { Button, buttonVariants }\n", "type": "registry:ui", "target": "components/ui/button.tsx" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "calendar", "type": "registry:ui", "title": "Calendar", "description": "A date field component that allows users to enter and edit date.", "dependencies": [ "react-day-picker", "lucide-react" ], "registryDependencies": [ "button" ], "files": [ { "path": "ui/calendar.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"cn\"\nimport {\n DayPicker,\n getDefaultClassNames,\n type DayButton,\n type Locale,\n} from \"react-day-picker\"\n\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport { ChevronDown, ChevronLeft, ChevronRight } from \"lucide-react\"\n\nfunction Calendar({\n className,\n classNames,\n showOutsideDays = true,\n captionLayout = \"label\",\n buttonVariant = \"ghost\",\n locale,\n formatters,\n components,\n ...props\n}: React.ComponentProps & {\n buttonVariant?: React.ComponentProps[\"variant\"]\n}) {\n const defaultClassNames = getDefaultClassNames()\n\n return (\n svg]:rotate-180`,\n String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n className\n )}\n captionLayout={captionLayout}\n locale={locale}\n formatters={{\n formatMonthDropdown: (date) =>\n date.toLocaleString(locale?.code, { month: \"short\" }),\n ...formatters,\n }}\n classNames={{\n root: cn(\"w-fit\", defaultClassNames.root),\n months: cn(\n \"relative flex flex-col gap-4 md:flex-row\",\n defaultClassNames.months\n ),\n month: cn(\"flex w-full flex-col gap-4\", defaultClassNames.month),\n nav: cn(\n \"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1\",\n defaultClassNames.nav\n ),\n button_previous: cn(\n buttonVariants({ variant: buttonVariant }),\n \"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\",\n defaultClassNames.button_previous\n ),\n button_next: cn(\n buttonVariants({ variant: buttonVariant }),\n \"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\",\n defaultClassNames.button_next\n ),\n month_caption: cn(\n \"flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)\",\n defaultClassNames.month_caption\n ),\n dropdowns: cn(\n \"flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium\",\n defaultClassNames.dropdowns\n ),\n dropdown_root: cn(\n \"cn-calendar-dropdown-root relative rounded-(--cell-radius)\",\n defaultClassNames.dropdown_root\n ),\n dropdown: cn(\n \"absolute inset-0 bg-neutral-surface-alt opacity-0\",\n defaultClassNames.dropdown\n ),\n caption_label: cn(\n \"font-medium select-none\",\n captionLayout === \"label\"\n ? \"cn-calendar-caption text-sm\"\n : \"cn-calendar-caption-label flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground\",\n defaultClassNames.caption_label\n ),\n month_grid: cn(\"w-full border-collapse\", defaultClassNames.month_grid),\n weekdays: cn(\"flex\", defaultClassNames.weekdays),\n weekday: cn(\n \"flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-neutral-text-muted select-none\",\n defaultClassNames.weekday\n ),\n week: cn(\"mt-2 flex w-full\", defaultClassNames.week),\n week_number_header: cn(\n \"w-(--cell-size) select-none\",\n defaultClassNames.week_number_header\n ),\n week_number: cn(\n \"text-[0.8rem] text-neutral-text-muted select-none\",\n defaultClassNames.week_number\n ),\n day: cn(\n \"group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)\",\n props.showWeekNumber\n ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n defaultClassNames.day\n ),\n range_start: cn(\n \"relative isolate z-0 rounded-l-(--cell-radius) bg-neutral-surface-alt after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-neutral-surface-alt\",\n defaultClassNames.range_start\n ),\n range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n range_end: cn(\n \"relative isolate z-0 rounded-r-(--cell-radius) bg-neutral-surface-alt after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-neutral-surface-alt\",\n defaultClassNames.range_end\n ),\n today: cn(\n \"rounded-(--cell-radius) bg-neutral-surface-alt text-neutral-text data-[selected=true]:rounded-none\",\n defaultClassNames.today\n ),\n outside: cn(\n \"text-neutral-text-muted aria-selected:text-neutral-text-muted\",\n defaultClassNames.outside\n ),\n disabled: cn(\n \"text-neutral-text-muted opacity-50\",\n defaultClassNames.disabled\n ),\n hidden: cn(\"invisible\", defaultClassNames.hidden),\n ...classNames,\n }}\n components={{\n Root: ({ className, rootRef, ...props }) => {\n return (\n \n )\n },\n Chevron: ({ className, orientation, ...props }) => {\n if (orientation === \"left\") {\n return (\n \n )\n }\n\n if (orientation === \"right\") {\n return (\n \n )\n }\n\n return (\n \n )\n },\n DayButton: ({ ...props }) => (\n \n ),\n WeekNumber: ({ children, ...props }) => {\n return (\n \n
\n {children}\n
\n \n )\n },\n ...components,\n }}\n {...props}\n />\n )\n}\n\nfunction CalendarDayButton({\n className,\n day,\n modifiers,\n locale,\n ...props\n}: React.ComponentProps & { locale?: Partial }) {\n const defaultClassNames = getDefaultClassNames()\n\n const ref = React.useRef(null)\n React.useEffect(() => {\n if (modifiers.focused) ref.current?.focus()\n }, [modifiers.focused])\n\n return (\n span]:text-xs [&>span]:opacity-70\",\n defaultClassNames.day,\n className\n )}\n {...props}\n />\n )\n}\n\nexport { Calendar, CalendarDayButton }\n", "type": "registry:ui", "target": "components/ui/calendar.tsx" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "card", "type": "registry:ui", "title": "Card", "description": "Displays a card with header, content, and footer.", "dependencies": [ "@base-ui/react", "class-variance-authority" ], "registryDependencies": [], "files": [ { "path": "ui/card.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"cn\"\n\nexport type CardVariant = \"default\" | \"tint\" | \"outline\" | \"ghost\"\n\nexport type CardIntent =\n | \"neutral\"\n | \"primary\"\n | \"info\"\n | \"success\"\n | \"warning\"\n | \"danger\"\n\nexport type CardSize = \"sm\" | \"default\" | \"lg\"\n\ntype CanonicalCardVariant = \"default\" | \"outline\" | \"ghost\"\n\nconst CARD_INTENT_VARIANT_CLASSES: Record<\n CardIntent,\n Record\n> = {\n neutral: {\n default:\n \"border-transparent [--current-surface:var(--neutral-surface-alt)] bg-(--current-surface) text-neutral-text\",\n outline:\n \"border-neutral-interactive [--current-surface:var(--neutral-surface)] bg-(--current-surface) text-neutral-text dark:bg-transparent\",\n ghost: \"border-transparent bg-transparent text-neutral-text shadow-none\",\n },\n primary: {\n default:\n \"border-transparent [--current-surface:var(--primary-surface-alt)] bg-(--current-surface) text-primary-text\",\n outline:\n \"border-primary-interactive [--current-surface:var(--primary-surface)] dark:[--current-surface:var(--neutral-surface)] bg-(--current-surface) dark:bg-transparent text-primary-text\",\n ghost: \"border-transparent bg-transparent text-primary-text shadow-none\",\n },\n info: {\n default:\n \"border-transparent [--current-surface:var(--info-surface-alt)] bg-(--current-surface) text-info-text\",\n outline:\n \"border-info-interactive [--current-surface:var(--info-surface)] dark:[--current-surface:var(--neutral-surface)] bg-(--current-surface) dark:bg-transparent text-info-text\",\n ghost: \"border-transparent bg-transparent text-info-text shadow-none\",\n },\n success: {\n default:\n \"border-transparent [--current-surface:var(--success-surface-alt)] bg-(--current-surface) text-success-text\",\n outline:\n \"border-success-interactive [--current-surface:var(--success-surface)] dark:[--current-surface:var(--neutral-surface)] bg-(--current-surface) dark:bg-transparent text-success-text\",\n ghost: \"border-transparent bg-transparent text-success-text shadow-none\",\n },\n warning: {\n default:\n \"border-transparent [--current-surface:var(--warning-surface-alt)] bg-(--current-surface) text-warning-text\",\n outline:\n \"border-warning-interactive [--current-surface:var(--warning-surface)] dark:[--current-surface:var(--neutral-surface)] bg-(--current-surface) dark:bg-transparent text-warning-text\",\n ghost: \"border-transparent bg-transparent text-warning-text shadow-none\",\n },\n danger: {\n default:\n \"border-transparent [--current-surface:var(--danger-surface-alt)] bg-(--current-surface) text-danger-text\",\n outline:\n \"border-danger-interactive [--current-surface:var(--danger-surface)] dark:[--current-surface:var(--neutral-surface)] bg-(--current-surface) dark:bg-transparent text-danger-text\",\n ghost: \"border-transparent bg-transparent text-danger-text shadow-none\",\n },\n}\n\nconst CARD_INTERACTIVE_INTENT_CLASSES: Record<\n CardIntent,\n Record\n> = {\n neutral: {\n default:\n \"hover:[--current-surface:var(--neutral-interactive)] active:[--current-surface:var(--neutral-interactive-hover)] [&[data-pressed]]:[--current-surface:var(--neutral-interactive-hover)] focus-visible:border-neutral-fill focus-visible:ring-neutral-fill/30\",\n outline:\n \"hover:border-neutral-interactive-hover hover:[--current-surface:var(--neutral-surface-alt)] hover:bg-(--current-surface) active:[--current-surface:var(--neutral-interactive)] active:bg-(--current-surface) [&[data-pressed]]:[--current-surface:var(--neutral-interactive)] [&[data-pressed]]:bg-(--current-surface) focus-visible:border-neutral-fill focus-visible:ring-neutral-fill/30\",\n ghost:\n \"hover:[--current-surface:var(--neutral-surface-alt)] hover:bg-(--current-surface) active:[--current-surface:var(--neutral-interactive)] active:bg-(--current-surface) [&[data-pressed]]:[--current-surface:var(--neutral-interactive)] [&[data-pressed]]:bg-(--current-surface) focus-visible:border-neutral-fill focus-visible:ring-neutral-fill/30\",\n },\n primary: {\n default:\n \"hover:[--current-surface:var(--primary-interactive)] active:[--current-surface:var(--primary-interactive-hover)] [&[data-pressed]]:[--current-surface:var(--primary-interactive-hover)] focus-visible:border-primary-fill focus-visible:ring-primary-fill/30\",\n outline:\n \"hover:border-primary-interactive-hover hover:[--current-surface:var(--primary-surface-alt)] hover:bg-(--current-surface) active:[--current-surface:var(--primary-interactive)] active:bg-(--current-surface) [&[data-pressed]]:[--current-surface:var(--primary-interactive)] [&[data-pressed]]:bg-(--current-surface) focus-visible:border-primary-fill focus-visible:ring-primary-fill/30\",\n ghost:\n \"hover:[--current-surface:var(--primary-surface-alt)] hover:bg-(--current-surface) active:[--current-surface:var(--primary-interactive)] active:bg-(--current-surface) [&[data-pressed]]:[--current-surface:var(--primary-interactive)] [&[data-pressed]]:bg-(--current-surface) focus-visible:border-primary-fill focus-visible:ring-primary-fill/30\",\n },\n info: {\n default:\n \"hover:[--current-surface:var(--info-interactive)] active:[--current-surface:var(--info-interactive-hover)] [&[data-pressed]]:[--current-surface:var(--info-interactive-hover)] focus-visible:border-info-fill focus-visible:ring-info-fill/30\",\n outline:\n \"hover:border-info-interactive-hover hover:[--current-surface:var(--info-surface-alt)] hover:bg-(--current-surface) active:[--current-surface:var(--info-interactive)] active:bg-(--current-surface) [&[data-pressed]]:[--current-surface:var(--info-interactive)] [&[data-pressed]]:bg-(--current-surface) focus-visible:border-info-fill focus-visible:ring-info-fill/30\",\n ghost:\n \"hover:[--current-surface:var(--info-surface-alt)] hover:bg-(--current-surface) active:[--current-surface:var(--info-interactive)] active:bg-(--current-surface) [&[data-pressed]]:[--current-surface:var(--info-interactive)] [&[data-pressed]]:bg-(--current-surface) focus-visible:border-info-fill focus-visible:ring-info-fill/30\",\n },\n success: {\n default:\n \"hover:[--current-surface:var(--success-interactive)] active:[--current-surface:var(--success-interactive-hover)] [&[data-pressed]]:[--current-surface:var(--success-interactive-hover)] focus-visible:border-success-fill focus-visible:ring-success-fill/30\",\n outline:\n \"hover:border-success-interactive-hover hover:[--current-surface:var(--success-surface-alt)] hover:bg-(--current-surface) active:[--current-surface:var(--success-interactive)] active:bg-(--current-surface) [&[data-pressed]]:[--current-surface:var(--success-interactive)] [&[data-pressed]]:bg-(--current-surface) focus-visible:border-success-fill focus-visible:ring-success-fill/30\",\n ghost:\n \"hover:[--current-surface:var(--success-surface-alt)] hover:bg-(--current-surface) active:[--current-surface:var(--success-interactive)] active:bg-(--current-surface) [&[data-pressed]]:[--current-surface:var(--success-interactive)] [&[data-pressed]]:bg-(--current-surface) focus-visible:border-success-fill focus-visible:ring-success-fill/30\",\n },\n warning: {\n default:\n \"hover:[--current-surface:var(--warning-interactive)] active:[--current-surface:var(--warning-interactive-hover)] [&[data-pressed]]:[--current-surface:var(--warning-interactive-hover)] focus-visible:border-warning-fill focus-visible:ring-warning-fill/30\",\n outline:\n \"hover:border-warning-interactive-hover hover:[--current-surface:var(--warning-surface-alt)] hover:bg-(--current-surface) active:[--current-surface:var(--warning-interactive)] active:bg-(--current-surface) [&[data-pressed]]:[--current-surface:var(--warning-interactive)] [&[data-pressed]]:bg-(--current-surface) focus-visible:border-warning-fill focus-visible:ring-warning-fill/30\",\n ghost:\n \"hover:[--current-surface:var(--warning-surface-alt)] hover:bg-(--current-surface) active:[--current-surface:var(--warning-interactive)] active:bg-(--current-surface) [&[data-pressed]]:[--current-surface:var(--warning-interactive)] [&[data-pressed]]:bg-(--current-surface) focus-visible:border-warning-fill focus-visible:ring-warning-fill/30\",\n },\n danger: {\n default:\n \"hover:[--current-surface:var(--danger-interactive)] active:[--current-surface:var(--danger-interactive-hover)] [&[data-pressed]]:[--current-surface:var(--danger-interactive-hover)] focus-visible:border-danger-fill focus-visible:ring-danger-fill/30\",\n outline:\n \"hover:border-danger-interactive-hover hover:[--current-surface:var(--danger-surface-alt)] hover:bg-(--current-surface) active:[--current-surface:var(--danger-interactive)] active:bg-(--current-surface) [&[data-pressed]]:[--current-surface:var(--danger-interactive)] [&[data-pressed]]:bg-(--current-surface) focus-visible:border-danger-fill focus-visible:ring-danger-fill/30\",\n ghost:\n \"hover:[--current-surface:var(--danger-surface-alt)] hover:bg-(--current-surface) active:[--current-surface:var(--danger-interactive)] active:bg-(--current-surface) [&[data-pressed]]:[--current-surface:var(--danger-interactive)] [&[data-pressed]]:bg-(--current-surface) focus-visible:border-danger-fill focus-visible:ring-danger-fill/30\",\n },\n}\n\nconst cardVariants = cva(\n \"cn-card group/card relative flex flex-col overflow-hidden border bg-clip-padding py-(--card-spacing) text-sm transition-[background-color,color,border-color,box-shadow,--current-surface] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] has-[>img:first-child]:pt-0\",\n {\n variants: {\n variant: {\n default: \"cn-card-variant-default\",\n tint: \"cn-card-variant-default\",\n outline: \"cn-card-variant-outline\",\n ghost: \"cn-card-variant-ghost\",\n },\n size: {\n sm: \"cn-card-size-sm gap-3 rounded-xl [--card-spacing:--spacing(4)] *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl\",\n default:\n \"cn-card-size-default gap-4 rounded-2xl [--card-spacing:--spacing(5)] *:[img:first-child]:rounded-t-2xl *:[img:last-child]:rounded-b-2xl\",\n lg: \"cn-card-size-lg gap-5 rounded-3xl [--card-spacing:--spacing(6)] *:[img:first-child]:rounded-t-3xl *:[img:last-child]:rounded-b-3xl\",\n },\n interactive: {\n true: \"cn-card-interactive cursor-pointer select-none outline-none focus-visible:ring-3\",\n false: \"\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n interactive: false,\n },\n }\n)\n\nexport interface CardProps\n extends useRender.ComponentProps<\"div\">,\n VariantProps {\n /**\n * Structural surface variant (`default` | `tint` | `outline` | `ghost`).\n * `default` and `tint` render a soft tinted surface; `outline` renders a 1px border; `ghost` renders a transparent surface.\n * @default \"default\"\n */\n variant?: CardVariant\n /**\n * Semantic OKLCH color intent (`neutral` | `primary` | `info` | `success` | `warning` | `danger`).\n * @default \"neutral\"\n */\n intent?: CardIntent\n /**\n * Proportional padding and corner radius tier following `P = R + 2px` at 1x (`sm`: 14px radius / 16px padding, `default`: 18px radius / 20px padding, `lg`: 22px radius / 24px padding).\n * @default \"default\"\n */\n size?: CardSize\n /**\n * Enables hover/active surface & border transitions, pointer cursor, keyboard focus ring (`focus-visible`), and Enter/Space activation.\n * @default false\n */\n interactive?: boolean\n}\n\nfunction Card({\n className,\n variant = \"default\",\n intent = \"neutral\",\n size = \"default\",\n interactive = false,\n render,\n tabIndex,\n onKeyDown,\n onKeyUp,\n onBlur,\n onClick,\n ...props\n}: CardProps) {\n const [isPressed, setIsPressed] = React.useState(false)\n\n const canonicalVariant: CanonicalCardVariant =\n variant === \"outline\"\n ? \"outline\"\n : variant === \"ghost\"\n ? \"ghost\"\n : \"default\"\n\n const resolvedIntent: CardIntent = intent ?? \"neutral\"\n const resolvedSize: CardSize = size ?? \"default\"\n const isInteractive = Boolean(interactive)\n\n const intentClasses =\n CARD_INTENT_VARIANT_CLASSES[resolvedIntent]?.[canonicalVariant]\n const interactiveClasses = isInteractive\n ? CARD_INTERACTIVE_INTENT_CLASSES[resolvedIntent]?.[canonicalVariant]\n : undefined\n\n const resolvedTabIndex =\n tabIndex !== undefined\n ? tabIndex\n : isInteractive && !render\n ? 0\n : undefined\n\n const handleKeyDown: React.KeyboardEventHandler = (e) => {\n onKeyDown?.(e)\n if (e.defaultPrevented || !isInteractive) return\n if (e.key === \"Enter\" || e.key === \" \") {\n if (!render) {\n if (e.key === \" \") {\n e.preventDefault()\n }\n setIsPressed(true)\n if (e.key === \"Enter\") {\n e.currentTarget.click()\n }\n } else {\n setIsPressed(true)\n }\n }\n }\n\n const handleKeyUp: React.KeyboardEventHandler = (e) => {\n onKeyUp?.(e)\n if (!isInteractive) return\n if (e.key === \"Enter\" || e.key === \" \") {\n setIsPressed(false)\n if (!render && e.key === \" \") {\n e.currentTarget.click()\n }\n }\n }\n\n const handleBlur: React.FocusEventHandler = (e) => {\n onBlur?.(e)\n if (isPressed) {\n setIsPressed(false)\n }\n }\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(\n {\n tabIndex: resolvedTabIndex,\n onClick,\n onKeyDown: handleKeyDown,\n onKeyUp: handleKeyUp,\n onBlur: handleBlur,\n className: cn(\n cardVariants({\n variant,\n size: resolvedSize,\n interactive: isInteractive,\n }),\n intentClasses,\n interactiveClasses,\n className\n ),\n } as Record,\n props as Record\n ),\n render,\n state: {\n slot: \"card\",\n variant: canonicalVariant,\n intent: resolvedIntent,\n size: resolvedSize,\n interactive: isInteractive,\n pressed: isPressed,\n },\n stateAttributesMapping: {\n interactive: (val) => (val ? { \"data-interactive\": \"\" } : null),\n pressed: (val) => (val ? { \"data-pressed\": \"\" } : null),\n },\n })\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nexport {\n Card,\n CardHeader,\n CardFooter,\n CardTitle,\n CardAction,\n CardDescription,\n CardContent,\n cardVariants,\n}\n", "type": "registry:ui", "target": "components/ui/card.tsx" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "carousel", "type": "registry:ui", "title": "Carousel", "description": "A carousel with motion and swipe built using Embla.", "dependencies": [ "embla-carousel-react", "lucide-react" ], "registryDependencies": [ "button" ], "files": [ { "path": "ui/carousel.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"cn\"\nimport useEmblaCarousel, {\n type UseEmblaCarouselType,\n} from \"embla-carousel-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { ChevronLeft, ChevronRight } from \"lucide-react\"\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ntype CarouselProps = {\n opts?: CarouselOptions\n plugins?: CarouselPlugin\n orientation?: \"horizontal\" | \"vertical\"\n setApi?: (api: CarouselApi) => void\n}\n\ntype CarouselContextProps = {\n carouselRef: ReturnType[0]\n api: ReturnType[1]\n scrollPrev: () => void\n scrollNext: () => void\n canScrollPrev: boolean\n canScrollNext: boolean\n} & CarouselProps\n\nconst CarouselContext = React.createContext(null)\n\nfunction useCarousel() {\n const context = React.useContext(CarouselContext)\n\n if (!context) {\n throw new Error(\"useCarousel must be used within a \")\n }\n\n return context\n}\n\nfunction Carousel({\n orientation = \"horizontal\",\n opts,\n setApi,\n plugins,\n className,\n children,\n ...props\n}: React.ComponentProps<\"div\"> & CarouselProps) {\n const [carouselRef, api] = useEmblaCarousel(\n {\n ...opts,\n axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n },\n plugins\n )\n const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n const onSelect = React.useCallback((api: CarouselApi) => {\n if (!api) return\n setCanScrollPrev(api.canScrollPrev())\n setCanScrollNext(api.canScrollNext())\n }, [])\n\n const scrollPrev = React.useCallback(() => {\n api?.scrollPrev()\n }, [api])\n\n const scrollNext = React.useCallback(() => {\n api?.scrollNext()\n }, [api])\n\n const handleKeyDown = React.useCallback(\n (event: React.KeyboardEvent) => {\n if (event.key === \"ArrowLeft\") {\n event.preventDefault()\n scrollPrev()\n } else if (event.key === \"ArrowRight\") {\n event.preventDefault()\n scrollNext()\n }\n },\n [scrollPrev, scrollNext]\n )\n\n React.useEffect(() => {\n if (!api || !setApi) return\n setApi(api)\n }, [api, setApi])\n\n React.useEffect(() => {\n if (!api) return\n onSelect(api)\n api.on(\"reInit\", onSelect)\n api.on(\"select\", onSelect)\n\n return () => {\n api?.off(\"select\", onSelect)\n }\n }, [api, onSelect])\n\n return (\n \n \n {children}\n \n \n )\n}\n\nfunction CarouselContent({ className, ...props }: React.ComponentProps<\"div\">) {\n const { carouselRef, orientation } = useCarousel()\n\n return (\n \n \n \n )\n}\n\nfunction CarouselItem({ className, ...props }: React.ComponentProps<\"div\">) {\n const { orientation } = useCarousel()\n\n return (\n \n )\n}\n\nfunction CarouselPrevious({\n className,\n variant = \"outline\",\n size = \"icon-sm\",\n ...props\n}: React.ComponentProps) {\n const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n return (\n \n \n Previous slide\n \n )\n}\n\nfunction CarouselNext({\n className,\n variant = \"outline\",\n size = \"icon-sm\",\n ...props\n}: React.ComponentProps) {\n const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n return (\n \n \n Next slide\n \n )\n}\n\nexport {\n type CarouselApi,\n Carousel,\n CarouselContent,\n CarouselItem,\n CarouselPrevious,\n CarouselNext,\n useCarousel,\n}\n", "type": "registry:ui", "target": "components/ui/carousel.tsx" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "chart", "type": "registry:ui", "title": "Chart", "description": "Responsive, themeable charts built using Recharts and Tailwind v4 CSS variables.", "dependencies": [ "recharts" ], "registryDependencies": [], "files": [ { "path": "ui/chart.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"cn\"\nimport * as RechartsPrimitive from \"recharts\"\nimport type { TooltipValueType } from \"recharts\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const\ntype TooltipNameType = number | string\n\nexport type ChartConfig = Record<\n string,\n {\n label?: React.ReactNode\n icon?: React.ComponentType\n } & (\n | { color?: string; theme?: never }\n | { color?: never; theme: Record }\n )\n>\n\ntype ChartContextProps = {\n config: ChartConfig\n}\n\nconst ChartContext = React.createContext(null)\n\nfunction useChart() {\n const context = React.useContext(ChartContext)\n\n if (!context) {\n throw new Error(\"useChart must be used within a \")\n }\n\n return context\n}\n\nfunction ChartContainer({\n id,\n className,\n children,\n config,\n initialDimension = INITIAL_DIMENSION,\n ...props\n}: React.ComponentProps<\"div\"> & {\n config: ChartConfig\n children: React.ComponentProps<\n typeof RechartsPrimitive.ResponsiveContainer\n >[\"children\"]\n initialDimension?: {\n width: number\n height: number\n }\n}) {\n const uniqueId = React.useId()\n const chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`\n\n return (\n \n \n \n \n {children}\n \n \n \n )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n const colorConfig = Object.entries(config).filter(\n ([, config]) => config.theme ?? config.color\n )\n\n if (!colorConfig.length) {\n return null\n }\n\n return (\n `\n${prefix} [data-chart=${id}] {\n${colorConfig\n .map(([key, itemConfig]) => {\n const color =\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??\n itemConfig.color\n return color ? ` --color-${key}: ${color};` : null\n })\n .join(\"\\n\")}\n}\n`\n )\n .join(\"\\n\"),\n }}\n />\n )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n active,\n payload,\n className,\n indicator = \"dot\",\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey,\n}: React.ComponentProps &\n React.ComponentProps<\"div\"> & {\n hideLabel?: boolean\n hideIndicator?: boolean\n indicator?: \"line\" | \"dot\" | \"dashed\"\n nameKey?: string\n labelKey?: string\n } & Omit<\n RechartsPrimitive.DefaultTooltipContentProps<\n TooltipValueType,\n TooltipNameType\n >,\n \"accessibilityLayer\"\n >) {\n const { config } = useChart()\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null\n }\n\n const [item] = payload\n const key = `${labelKey ?? item?.dataKey ?? item?.name ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const value =\n !labelKey && typeof label === \"string\"\n ? (config[label]?.label ?? label)\n : itemConfig?.label\n\n if (labelFormatter) {\n return (\n
\n {labelFormatter(value, payload)}\n
\n )\n }\n\n if (!value) {\n return null\n }\n\n return
{value}
\n }, [\n label,\n labelFormatter,\n payload,\n hideLabel,\n labelClassName,\n config,\n labelKey,\n ])\n\n if (!active || !payload?.length) {\n return null\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n return (\n \n {!nestLabel ? tooltipLabel : null}\n
\n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const indicatorColor = color ?? item.payload?.fill ?? item.color\n\n return (\n svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-neutral-text-muted\",\n indicator === \"dot\" && \"items-center\"\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n \n ) : (\n !hideIndicator && (\n \n )\n )}\n \n
\n {nestLabel ? tooltipLabel : null}\n \n {itemConfig?.label ?? item.name}\n \n
\n {item.value != null && (\n \n {typeof item.value === \"number\"\n ? item.value.toLocaleString()\n : String(item.value)}\n \n )}\n
\n \n )}\n \n )\n })}\n \n \n )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n className,\n hideIcon = false,\n payload,\n verticalAlign = \"bottom\",\n nameKey,\n}: React.ComponentProps<\"div\"> & {\n hideIcon?: boolean\n nameKey?: string\n} & RechartsPrimitive.DefaultLegendContentProps) {\n const { config } = useChart()\n\n if (!payload?.length) {\n return null\n }\n\n return (\n \n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n return (\n svg]:h-3 [&>svg]:w-3 [&>svg]:text-neutral-text-muted\"\n )}\n >\n {itemConfig?.icon && !hideIcon ? (\n \n ) : (\n \n )}\n {itemConfig?.label}\n \n )\n })}\n \n )\n}\n\nfunction getPayloadConfigFromPayload(\n config: ChartConfig,\n payload: unknown,\n key: string\n) {\n if (typeof payload !== \"object\" || payload === null) {\n return undefined\n }\n\n const payloadPayload =\n \"payload\" in payload &&\n typeof payload.payload === \"object\" &&\n payload.payload !== null\n ? payload.payload\n : undefined\n\n let configLabelKey: string = key\n\n if (\n key in payload &&\n typeof payload[key as keyof typeof payload] === \"string\"\n ) {\n configLabelKey = payload[key as keyof typeof payload] as string\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n ) {\n configLabelKey = payloadPayload[\n key as keyof typeof payloadPayload\n ] as string\n }\n\n return configLabelKey in config ? config[configLabelKey] : config[key]\n}\n\nexport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n}\n", "type": "registry:ui", "target": "components/ui/chart.tsx" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "checkbox-group", "type": "registry:ui", "title": "Checkbox Group", "description": "Provides shared state and automatic parent indeterminate synchronization for a group of checkboxes.", "dependencies": [], "registryDependencies": [], "files": [ { "path": "ui/checkbox-group.tsx", "content": "\"use client\"\n\nexport {\n CheckboxGroup,\n type CheckboxGroupProps,\n} from \"@/components/ui/checkbox\"\n", "type": "registry:ui", "target": "components/ui/checkbox-group.tsx" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "checkbox", "type": "registry:ui", "title": "Checkbox", "description": "A control that allows the user to toggle between checked, unchecked, and indeterminate states.", "dependencies": [ "@base-ui/react", "lucide-react" ], "registryDependencies": [], "files": [ { "path": "ui/checkbox.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\"\nimport { CheckboxGroup as CheckboxGroupPrimitive } from \"@base-ui/react/checkbox-group\"\nimport { Check, Minus } from \"icons\"\nimport { cn } from \"cn\"\n\ninterface CheckboxGroupRegistryContextValue {\n registerChildValue: (value: string) => () => void\n}\n\nconst CheckboxGroupRegistryContext =\n React.createContext(null)\n\nfunction collectChildCheckboxValues(children: React.ReactNode): string[] {\n const values: string[] = []\n\n const visit = (node: React.ReactNode) => {\n React.Children.forEach(node, (child) => {\n if (!React.isValidElement(child)) return\n const childProps = child.props as Record\n const isParent = Boolean(childProps?.parent)\n const rawValue =\n typeof childProps?.value === \"string\"\n ? childProps.value\n : typeof childProps?.name === \"string\"\n ? childProps.name\n : undefined\n\n if (\n !isParent &&\n rawValue &&\n (child.type === Checkbox ||\n (typeof child.type === \"function\" &&\n (child.type as { displayName?: string }).displayName ===\n \"Checkbox\"))\n ) {\n if (!values.includes(rawValue)) {\n values.push(rawValue)\n }\n }\n\n if (childProps?.children) {\n visit(childProps.children as React.ReactNode)\n }\n })\n }\n\n visit(children)\n return values\n}\n\nexport type CheckboxProps = CheckboxPrimitive.Root.Props\n\nfunction Checkbox({\n className,\n value,\n name,\n parent,\n indeterminate,\n ...props\n}: CheckboxProps) {\n const registry = React.useContext(CheckboxGroupRegistryContext)\n const itemKey = value ?? name\n\n React.useEffect(() => {\n if (!registry || parent || !itemKey) return\n return registry.registerChildValue(itemKey)\n }, [registry, parent, itemKey])\n\n return (\n \n \n \n \n \n \n )\n}\nCheckbox.displayName = \"Checkbox\"\n\nexport interface CheckboxGroupProps extends CheckboxGroupPrimitive.Props {\n /**\n * Layout orientation of the checkbox group (`vertical` | `horizontal`).\n * @default \"vertical\"\n */\n orientation?: \"vertical\" | \"horizontal\"\n}\n\nfunction CheckboxGroup({\n className,\n allValues: allValuesProp,\n orientation = \"vertical\",\n children,\n ...props\n}: CheckboxGroupProps) {\n const [registeredValues, setRegisteredValues] = React.useState([])\n\n const registerChildValue = React.useCallback((val: string) => {\n setRegisteredValues((prev) => (prev.includes(val) ? prev : [...prev, val]))\n return () => {\n setRegisteredValues((prev) => prev.filter((item) => item !== val))\n }\n }, [])\n\n const scannedValues = React.useMemo(\n () => collectChildCheckboxValues(children),\n [children]\n )\n\n const resolvedAllValues = React.useMemo(() => {\n if (allValuesProp && allValuesProp.length > 0) {\n return allValuesProp\n }\n const merged = [...scannedValues]\n for (const val of registeredValues) {\n if (!merged.includes(val)) {\n merged.push(val)\n }\n }\n return merged\n }, [allValuesProp, scannedValues, registeredValues])\n\n const registryContextValue = React.useMemo(\n () => ({ registerChildValue }),\n [registerChildValue]\n )\n\n return (\n \n \n {children}\n \n \n )\n}\nCheckboxGroup.displayName = \"CheckboxGroup\"\n\nexport { Checkbox, CheckboxGroup }\n", "type": "registry:ui", "target": "components/ui/checkbox.tsx" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "collapsible-section", "type": "registry:ui", "title": "Collapsible Section", "description": "A collapsible section with a full-width trigger row (label + dedicated trailing chevron) and a content container below it.", "dependencies": [ "@base-ui/react", "lucide-react" ], "registryDependencies": [], "files": [ { "path": "ui/collapsible-section.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Collapsible as CollapsiblePrimitive } from \"@base-ui/react/collapsible\"\nimport { ChevronDown } from \"icons\"\nimport { cn } from \"cn\"\n\nexport interface CollapsibleSectionProps\n extends Omit {\n /**\n * Optional shorthand label rendered inside the trigger row when not composing `` directly.\n */\n label?: React.ReactNode\n /**\n * Alias for `label` — content rendered inside the trigger row when using shorthand mode.\n */\n title?: React.ReactNode\n /**\n * Additional class names for the trigger row in shorthand mode.\n */\n triggerClassName?: string\n /**\n * Additional class names for the content div below the trigger row in shorthand mode.\n */\n contentClassName?: string\n}\n\nfunction CollapsibleSection({\n label,\n title,\n triggerClassName,\n contentClassName,\n className,\n children,\n ...props\n}: CollapsibleSectionProps) {\n const shorthandTrigger = label ?? title\n\n return (\n \n {shorthandTrigger !== undefined ? (\n <>\n \n {shorthandTrigger}\n \n \n {children}\n \n \n ) : (\n children\n )}\n \n )\n}\nCollapsibleSection.displayName = \"CollapsibleSection\"\n\nexport type CollapsibleSectionTriggerProps = CollapsiblePrimitive.Trigger.Props\n\nfunction CollapsibleSectionTrigger({\n className,\n children,\n ...props\n}: CollapsibleSectionTriggerProps) {\n return (\n \n \n {children}\n \n \n \n )\n}\nCollapsibleSectionTrigger.displayName = \"CollapsibleSectionTrigger\"\n\nexport type CollapsibleSectionContentProps = CollapsiblePrimitive.Panel.Props\n\nfunction CollapsibleSectionContent({\n className,\n children,\n ...props\n}: CollapsibleSectionContentProps) {\n return (\n \n \n {children}\n \n \n )\n}\nCollapsibleSectionContent.displayName = \"CollapsibleSectionContent\"\n\nexport {\n CollapsibleSection,\n CollapsibleSectionTrigger,\n CollapsibleSectionContent,\n}\n", "type": "registry:ui", "target": "components/ui/collapsible-section.tsx" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "collapsible", "type": "registry:ui", "title": "Collapsible", "description": "An interactive component which can be expanded/collapsed.", "dependencies": [ "@base-ui/react" ], "registryDependencies": [], "files": [ { "path": "ui/collapsible.tsx", "content": "\"use client\"\n\nimport { Collapsible as CollapsiblePrimitive } from \"@base-ui/react/collapsible\"\n\nfunction Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {\n return \n}\n\nfunction CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) {\n return (\n \n )\n}\n\nfunction CollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props) {\n return (\n \n )\n}\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent }\n\n\n", "type": "registry:ui", "target": "components/ui/collapsible.tsx" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "combobox", "type": "registry:ui", "title": "Combobox", "description": "Autocomplete input paired with a filterable suggestion list built on Base UI primitives.", "dependencies": [ "@base-ui/react", "class-variance-authority", "lucide-react" ], "registryDependencies": [ "button", "input-group" ], "files": [ { "path": "ui/combobox.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"cn\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupInput,\n useInputGroupContext,\n type InputGroupSize,\n type InputGroupVariant,\n type InputGroupShape,\n} from \"@/components/ui/input-group\"\nimport { Check, ChevronsUpDown, X } from \"lucide-react\"\n\nexport interface ComboboxContextValue {\n size?: InputGroupSize\n variant?: InputGroupVariant\n shape?: InputGroupShape\n anchorRef?: React.MutableRefObject\n}\n\nconst ComboboxContext = React.createContext({})\n\nfunction useComboboxContext() {\n return React.useContext(ComboboxContext)\n}\n\nconst ComboboxInsideContentContext = React.createContext(false)\n\nfunction defaultItemToStringLabel(item: any): string {\n if (item == null) return \"\"\n if (typeof item === \"string\") return item\n if (typeof item.label === \"string\") return item.label\n if (typeof item.name === \"string\") return item.name\n if (typeof item.title === \"string\") return item.title\n if (typeof item.value === \"string\") return item.value\n return String(item)\n}\n\nfunction defaultIsItemEqualToValue(item: any, value: any): boolean {\n if (item === value) return true\n if (item == null || value == null) return false\n if (typeof item === \"object\" && typeof value === \"object\") {\n if (item.value !== undefined && value.value !== undefined) {\n return item.value === value.value\n }\n if (item.id !== undefined && value.id !== undefined) {\n return item.id === value.id\n }\n }\n return false\n}\n\nexport interface ComboboxProps<\n Value,\n Multiple extends boolean | undefined = false,\n Item = Value,\n> extends ComboboxPrimitive.Root.Props {\n size?: InputGroupSize\n variant?: InputGroupVariant\n shape?: InputGroupShape\n}\n\nfunction Combobox<\n Value,\n Multiple extends boolean | undefined = false,\n Item = Value,\n>({\n size = \"default\",\n variant = \"default\",\n shape = \"default\",\n itemToStringLabel,\n isItemEqualToValue,\n children,\n ...props\n}: ComboboxProps) {\n const anchorRef = React.useRef(null)\n const resolvedItemToStringLabel =\n itemToStringLabel ??\n (props as any).itemToStringValue ??\n defaultItemToStringLabel\n\n return (\n \n \n {children}\n \n \n )\n}\n\nCombobox.createItems = ComboboxPrimitive.createItems\nCombobox.useFilter = ComboboxPrimitive.useFilter\nCombobox.useFilteredItems = ComboboxPrimitive.useFilteredItems\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n return \n}\n\nexport interface ComboboxTriggerProps extends ComboboxPrimitive.Trigger.Props {\n /**\n * Custom icon node to replace the default dual ChevronsUpDown. Pass `null` or `false` to hide.\n */\n icon?: React.ReactNode\n}\n\nconst ComboboxTrigger = React.forwardRef<\n HTMLElement,\n ComboboxTriggerProps\n>(function ComboboxTrigger(\n { className, children, icon, ...props },\n ref\n) {\n const showDefaultIcon = icon === undefined\n const ctx = useComboboxContext()\n const isInsideContent = React.useContext(ComboboxInsideContentContext)\n const isInsideGroup = useInputGroupContext() !== null\n\n const handleRef = React.useCallback(\n (node: HTMLElement | null) => {\n if (!isInsideContent && !isInsideGroup && ctx.anchorRef && node) {\n ctx.anchorRef.current = node as HTMLDivElement\n }\n if (typeof ref === \"function\") {\n ref(node)\n } else if (ref) {\n ;(ref as React.MutableRefObject).current = node\n }\n },\n [isInsideContent, isInsideGroup, ctx.anchorRef, ref]\n )\n\n return (\n \n {children}\n {showDefaultIcon ? (\n \n ) : (\n icon\n )}\n \n )\n})\n\nexport interface ComboboxClearProps extends ComboboxPrimitive.Clear.Props {\n /**\n * Custom icon node to replace the default clear X. Pass `null` or `false` to hide.\n */\n icon?: React.ReactNode\n}\n\nfunction ComboboxClear({\n className,\n children,\n icon,\n render,\n ...props\n}: ComboboxClearProps) {\n const showDefaultIcon = icon === undefined\n\n return (\n }\n className={cn(\"cn-combobox-clear not-data-[visible]:hidden\", className)}\n {...props}\n >\n {children}\n {showDefaultIcon ? (\n \n ) : (\n icon\n )}\n \n )\n}\n\nfunction ComboboxInputGroup({\n className,\n ...props\n}: ComboboxPrimitive.InputGroup.Props) {\n return (\n \n )\n}\n\nexport interface ComboboxInputProps\n extends Omit {\n size?: InputGroupSize\n variant?: InputGroupVariant\n shape?: InputGroupShape\n showTrigger?: boolean\n showClear?: boolean\n leading?: React.ReactNode\n trailing?: React.ReactNode\n}\n\nfunction ComboboxInput({\n className,\n children,\n disabled = false,\n showTrigger: showTriggerProp,\n showClear = false,\n size: sizeProp,\n variant: variantProp,\n shape: shapeProp,\n leading,\n trailing,\n ...props\n}: ComboboxInputProps) {\n const ctx = useComboboxContext()\n const isInsideContent = React.useContext(ComboboxInsideContentContext)\n\n const size = sizeProp ?? ctx.size ?? \"default\"\n const variant = isInsideContent\n ? \"ghost\"\n : variantProp ?? ctx.variant ?? \"default\"\n const shape = isInsideContent\n ? \"default\"\n : shapeProp ?? ctx.shape ?? \"default\"\n\n // Inside ComboboxContent (e.g. popup search), default to hiding the dropdown trigger chevron\n const showTrigger = showTriggerProp ?? !isInsideContent\n\n const triggerSize =\n size === \"xs\"\n ? \"icon-xs\"\n : size === \"sm\"\n ? \"icon-xs\"\n : size === \"lg\"\n ? \"icon-sm\"\n : \"icon-xs\"\n\n const hasTrailingContent = Boolean(showClear || showTrigger || trailing)\n\n return (\n {\n if (!isInsideContent && ctx.anchorRef) {\n ctx.anchorRef.current = node\n }\n }}\n size={size}\n variant={variant}\n shape={shape}\n disabled={disabled}\n className={cn(\n \"cn-combobox-input w-full\",\n isInsideContent &&\n \"cn-combobox-popup-search h-10 rounded-none border-0 border-b border-neutral-interactive/80 bg-transparent shadow-none ring-0! outline-none! hover:bg-transparent hover:border-neutral-interactive/80 focus:border-neutral-interactive/80! focus-within:border-neutral-interactive/80! has-[:focus-visible]:border-neutral-interactive/80! focus:ring-0! focus-within:ring-0! has-[:focus-visible]:ring-0! focus:bg-transparent! focus-within:bg-transparent! has-[:focus-visible]:bg-transparent!\",\n className\n )}\n />\n }\n >\n {leading && (\n {leading}\n )}\n }\n {...props}\n />\n {hasTrailingContent && (\n \n
\n {showClear && }\n {showTrigger && (\n }\n data-slot=\"input-group-button\"\n className=\"data-pressed:bg-transparent\"\n disabled={disabled}\n />\n )}\n
\n {trailing}\n \n )}\n {children}\n \n )\n}\n\nexport interface ComboboxContentProps\n extends ComboboxPrimitive.Popup.Props,\n Pick<\n ComboboxPrimitive.Positioner.Props,\n \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\"\n > {\n /**\n * When true, renders an aligned arrow pointing to the anchor trigger.\n * @default false\n */\n withArrow?: boolean\n}\n\nfunction ComboboxContent({\n className,\n side = \"bottom\",\n sideOffset = 6,\n align = \"start\",\n alignOffset = 0,\n anchor,\n withArrow = false,\n children,\n ...props\n}: ComboboxContentProps) {\n const ctx = useComboboxContext()\n const resolvedAnchor =\n anchor ?? (ctx.anchorRef?.current ? ctx.anchorRef : undefined)\n\n return (\n \n \n \n \n {children}\n {withArrow && (\n \n )}\n \n \n \n \n )\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n return (\n \n )\n}\n\nexport interface ComboboxItemProps extends ComboboxPrimitive.Item.Props {\n /**\n * Proportional density size tier (`xs` | `sm` | `default` | `lg`).\n */\n size?: InputGroupSize\n /**\n * Optional leading icon or avatar element.\n */\n icon?: React.ReactNode\n /**\n * Optional subtitle description text displayed below the primary item title.\n */\n subText?: React.ReactNode\n /**\n * Optional trailing secondary content (e.g., status badge, category tag, metadata).\n */\n secondaryContent?: React.ReactNode\n /**\n * Item semantic variant. Set to `\"destructive\"` for dangerous or removal actions.\n * @default \"default\"\n */\n variant?: \"default\" | \"destructive\"\n}\n\nfunction ComboboxItem({\n className,\n children,\n size: sizeProp,\n icon,\n subText,\n secondaryContent,\n variant = \"default\",\n ...props\n}: ComboboxItemProps) {\n const ctx = useComboboxContext()\n const size = sizeProp ?? ctx.size ?? \"default\"\n\n const sizeClasses =\n size === \"xs\"\n ? \"py-1 px-2 text-xs rounded-md gap-1.5\"\n : size === \"sm\"\n ? \"py-1.5 px-2.5 text-xs rounded-md gap-2\"\n : size === \"lg\"\n ? \"py-2 px-3 text-base rounded-lg gap-2.5\"\n : \"py-1.5 px-2.5 text-sm rounded-lg gap-2\"\n\n const iconSizeClasses =\n size === \"xs\" || size === \"sm\"\n ? \"[&_svg]:size-3.5\"\n : size === \"lg\"\n ? \"[&_svg]:size-5\"\n : \"[&_svg]:size-4\"\n\n const indicatorSizeClasses =\n size === \"xs\" || size === \"sm\"\n ? \"size-3.5\"\n : size === \"lg\"\n ? \"size-4.5\"\n : \"size-4\"\n\n return (\n \n
\n {icon && (\n \n {icon}\n \n )}\n\n {subText ? (\n
\n \n {children}\n \n \n {subText}\n \n
\n ) : (\n {children}\n )}\n
\n\n
\n {secondaryContent && (\n \n {secondaryContent}\n \n )}\n\n \n }\n >\n \n \n
\n \n )\n}\n\nfunction ComboboxItemIndicator({\n className,\n children,\n ...props\n}: ComboboxPrimitive.ItemIndicator.Props) {\n return (\n \n {children ?? (\n \n )}\n \n )\n}\n\nfunction ComboboxItemText({\n className,\n ...props\n}: React.ComponentProps<\"span\">) {\n return (\n \n )\n}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\n return (\n \n )\n}\n\nfunction ComboboxLabel({\n className,\n ...props\n}: ComboboxPrimitive.GroupLabel.Props) {\n return (\n \n )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n return (\n \n )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n return (\n \n )\n}\n\nfunction ComboboxSeparator({\n className,\n ...props\n}: ComboboxPrimitive.Separator.Props) {\n return (\n \n )\n}\n\nconst comboboxChipsVariants = cva(\n \"cn-combobox-chips relative flex w-full flex-wrap items-center border bg-clip-padding transition-[background-color,color,border-color,box-shadow] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] focus-within:ring-3 focus-within:border-primary-fill focus-within:ring-primary-fill/30 has-aria-invalid:border-danger-fill dark:has-aria-invalid:border-danger-fill/60 has-aria-invalid:ring-3 has-aria-invalid:ring-danger-fill/20 dark:has-aria-invalid:ring-danger-fill/40 has-[:disabled]:pointer-events-none has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50\",\n {\n variants: {\n variant: {\n default:\n \"border-transparent bg-neutral-interactive/60 text-neutral-text dark:bg-neutral-interactive/50 hover:bg-neutral-interactive dark:hover:bg-neutral-interactive/80 focus-within:bg-neutral-surface dark:focus-within:bg-neutral-surface-alt\",\n outline:\n \"border-neutral-interactive bg-neutral-surface text-neutral-text dark:bg-transparent hover:border-neutral-interactive-hover hover:bg-neutral-surface-alt/60 dark:hover:border-neutral-interactive-hover dark:hover:bg-neutral-interactive/30 focus-within:bg-neutral-surface dark:focus-within:bg-transparent\",\n ghost:\n \"border-transparent bg-transparent text-neutral-text hover:bg-neutral-interactive/60 dark:hover:bg-neutral-interactive/50 focus-within:bg-neutral-surface dark:focus-within:bg-neutral-surface-alt\",\n },\n size: {\n xs: \"min-h-6 gap-1 rounded-md px-1.5 py-0.5 text-xs\",\n sm: \"min-h-7 gap-1 rounded-md px-2 py-0.5 text-xs\",\n default: \"min-h-8 gap-1.5 rounded-lg px-2.5 py-1 text-sm\",\n lg: \"min-h-9 gap-1.5 rounded-lg px-3 py-1 text-sm\",\n },\n shape: {\n default: \"\",\n pill: \"rounded-full\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n shape: \"default\",\n },\n }\n)\n\nexport interface ComboboxChipsProps\n extends React.ComponentPropsWithRef,\n ComboboxPrimitive.Chips.Props,\n VariantProps {}\n\nconst ComboboxChips = React.forwardRef<\n React.ComponentRef,\n ComboboxChipsProps\n>(function ComboboxChips(\n {\n className,\n size: sizeProp,\n variant: variantProp,\n shape: shapeProp,\n ...props\n },\n ref\n) {\n const ctx = useComboboxContext()\n const size = sizeProp ?? ctx.size ?? \"default\"\n const variant = variantProp ?? ctx.variant ?? \"default\"\n const shape = shapeProp ?? ctx.shape ?? \"default\"\n\n const handleRef = React.useCallback(\n (node: HTMLDivElement | null) => {\n if (ctx.anchorRef) {\n ctx.anchorRef.current = node\n }\n if (typeof ref === \"function\") {\n ref(node)\n } else if (ref) {\n ;(ref as React.MutableRefObject).current = node\n }\n },\n [ctx.anchorRef, ref]\n )\n\n return (\n \n )\n})\n\nconst comboboxChipVariants = cva(\n \"cn-combobox-chip flex w-fit items-center justify-center gap-1 font-medium whitespace-nowrap border bg-neutral-surface dark:bg-neutral-surface-alt text-neutral-text border-neutral-interactive/80 shadow-xs transition-colors\",\n {\n variants: {\n size: {\n xs: \"h-4.5 rounded-sm ps-1.5 pe-0.5 text-[10px]\",\n sm: \"h-5 rounded-md ps-2 pe-0.5 text-xs\",\n default: \"h-6 rounded-md ps-2.5 pe-1 text-xs\",\n lg: \"h-6.5 rounded-md ps-3 pe-1.5 text-sm\",\n },\n },\n defaultVariants: {\n size: \"default\",\n },\n }\n)\n\nexport interface ComboboxChipProps\n extends ComboboxPrimitive.Chip.Props,\n VariantProps {\n showRemove?: boolean\n}\n\nfunction ComboboxChip({\n className,\n children,\n showRemove = true,\n size: sizeProp,\n ...props\n}: ComboboxChipProps) {\n const ctx = useComboboxContext()\n const size = sizeProp ?? ctx.size ?? \"default\"\n\n return (\n \n {children}\n {showRemove && }\n \n )\n}\n\nexport interface ComboboxChipRemoveProps\n extends ComboboxPrimitive.ChipRemove.Props {\n /**\n * Custom icon node to replace the default remove X. Pass `null` or `false` to hide.\n */\n icon?: React.ReactNode\n size?: InputGroupSize\n}\n\nfunction ComboboxChipRemove({\n className,\n children,\n icon,\n size = \"default\",\n ...props\n}: ComboboxChipRemoveProps) {\n const showDefaultIcon = icon === undefined\n const iconSizeClass = size === \"xs\" ? \"size-2.5\" : \"size-3\"\n\n return (\n \n {children}\n {showDefaultIcon ? (\n \n ) : (\n icon\n )}\n \n )\n}\n\nfunction ComboboxChipsInput({\n className,\n ...props\n}: ComboboxPrimitive.Input.Props) {\n return (\n \n )\n}\n\nfunction useComboboxAnchor() {\n return React.useRef(null)\n}\n\nconst createComboboxItems = ComboboxPrimitive.createItems\nconst useComboboxFilter = ComboboxPrimitive.useFilter\nconst useComboboxFilteredItems = ComboboxPrimitive.useFilteredItems\n\nexport {\n Combobox,\n ComboboxContext,\n useComboboxContext,\n ComboboxInput,\n ComboboxInputGroup,\n ComboboxContent,\n ComboboxList,\n ComboboxItem,\n ComboboxItemIndicator,\n ComboboxItemText,\n ComboboxGroup,\n ComboboxLabel,\n ComboboxCollection,\n ComboboxEmpty,\n ComboboxSeparator,\n ComboboxChips,\n ComboboxChip,\n ComboboxChipRemove,\n ComboboxChipsInput,\n ComboboxTrigger,\n ComboboxClear,\n ComboboxValue,\n useComboboxAnchor,\n createComboboxItems,\n useComboboxFilter,\n useComboboxFilteredItems,\n}\n", "type": "registry:ui", "target": "components/ui/combobox.tsx" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "command", "type": "registry:ui", "title": "Command", "description": "Fast, composable, unstyled command menu for React.", "dependencies": [ "cmdk", "class-variance-authority", "lucide-react" ], "registryDependencies": [ "dialog" ], "files": [ { "path": "ui/command.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"cn\"\n\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogHeader,\n DialogTitle,\n} from \"@/components/ui/dialog\"\nimport { Check, Search } from \"lucide-react\"\n\nexport type CommandSize = \"sm\" | \"default\" | \"lg\"\n\ninterface CommandContextValue {\n size: CommandSize\n}\n\nconst CommandContext = React.createContext({\n size: \"default\",\n})\n\nexport const useCommand = () => React.useContext(CommandContext)\n\nconst commandVariants = cva(\n \"cn-command flex size-full flex-col overflow-hidden text-neutral-text transition-colors\",\n {\n variants: {\n size: {\n sm: \"cn-command-size-sm rounded-xl\",\n default: \"cn-command-size-default rounded-2xl\",\n lg: \"cn-command-size-lg rounded-3xl\",\n },\n },\n defaultVariants: {\n size: \"default\",\n },\n }\n)\n\nexport interface CommandProps\n extends React.ComponentProps,\n VariantProps {\n /**\n * Proportional density scale for search input, list items, and typography (`sm` | `default` | `lg`).\n * Container and item corner curvature automatically adapt to the size and theme radius tokens.\n * @default \"default\"\n */\n size?: CommandSize\n}\n\nfunction Command({\n className,\n size = \"default\",\n children,\n ...props\n}: CommandProps) {\n const contextValue = React.useMemo(() => ({ size }), [size])\n\n return (\n \n \n {children}\n \n \n )\n}\n\nexport interface CommandDialogProps\n extends Omit, \"children\"> {\n title?: string\n description?: string\n children: React.ReactNode\n className?: string\n showCloseButton?: boolean\n /**\n * Proportional density size tier (`sm` | `default` | `lg`).\n * @default \"default\"\n */\n size?: CommandSize\n}\n\nfunction CommandDialog({\n title = \"Command Palette\",\n description = \"Search for a command to run...\",\n children,\n className,\n showCloseButton = false,\n size = \"default\",\n ...props\n}: CommandDialogProps) {\n const dialogSize = size === \"sm\" ? \"sm\" : size === \"lg\" ? \"lg\" : \"default\"\n\n return (\n \n \n {title}\n {description}\n \n \n \n {children}\n \n \n \n )\n}\n\nexport interface CommandInputProps\n extends React.ComponentProps {\n /**\n * Optional custom leading search icon. Pass `null` or `false` to omit.\n */\n icon?: React.ReactNode | false | null\n /**\n * Optional trailing content (e.g. keyboard badge, clear trigger, or spinner).\n */\n trailing?: React.ReactNode\n}\n\nfunction CommandInput({\n className,\n icon,\n trailing,\n ...props\n}: CommandInputProps) {\n const { size } = useCommand()\n\n return (\n \n {icon !== false && icon !== null && (\n \n {icon ?? (\n \n )}\n \n )}\n \n {trailing &&
{trailing}
}\n \n )\n}\n\nfunction CommandList({\n className,\n ...props\n}: React.ComponentProps) {\n const { size } = useCommand()\n\n return (\n \n )\n}\n\nfunction CommandEmpty({\n className,\n ...props\n}: React.ComponentProps) {\n const { size } = useCommand()\n\n return (\n \n )\n}\n\nfunction CommandLoading({\n className,\n ...props\n}: React.ComponentProps) {\n const { size } = useCommand()\n\n return (\n \n )\n}\n\nfunction CommandGroup({\n className,\n ...props\n}: React.ComponentProps) {\n const { size } = useCommand()\n\n return (\n \n )\n}\n\nfunction CommandSeparator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nexport interface CommandItemProps\n extends React.ComponentProps {\n /**\n * Leading icon element rendered before the item label.\n */\n icon?: React.ReactNode\n /**\n * Optional multiline secondary descriptive text rendered below the primary label.\n */\n subText?: React.ReactNode\n /**\n * Secondary content (such as tag, category, badge, or hotkey) rendered in the trailing flex container.\n */\n secondaryContent?: React.ReactNode\n /**\n * Keyboard shortcut element (string or JSX like ) rendered in the trailing flex container.\n */\n shortcut?: React.ReactNode\n /**\n * Visual intent variant (`default` | `destructive`).\n * @default \"default\"\n */\n variant?: \"default\" | \"destructive\"\n /**\n * Insets the item content to align with sibling items that have leading icons.\n * @default false\n */\n inset?: boolean\n /**\n * Optional check indicator state for multi-select command items.\n */\n checked?: boolean\n}\n\nfunction CommandItem({\n className,\n children,\n icon,\n subText,\n secondaryContent,\n shortcut,\n variant = \"default\",\n inset = false,\n checked,\n ...props\n}: CommandItemProps) {\n const { size } = useCommand()\n\n // Inner radius automatically scales concentrically (R_inner = R_outer - padding)\n const itemRadiusClass =\n size === \"sm\" ? \"rounded-md\" : size === \"lg\" ? \"rounded-xl\" : \"rounded-lg\"\n\n const hasSlots = Boolean(icon || subText || secondaryContent || shortcut || checked)\n\n return (\n \n {hasSlots ? (\n <>\n {icon && (\n \n {icon}\n \n )}\n\n {subText ? (\n
\n {children}\n \n {subText}\n \n
\n ) : (\n {children}\n )}\n\n {(secondaryContent || shortcut || checked) && (\n \n {secondaryContent}\n {shortcut && (\n typeof shortcut === \"string\" ? (\n {shortcut}\n ) : (\n shortcut\n )\n )}\n {checked && (\n \n )}\n \n )}\n \n ) : (\n children\n )}\n \n )\n}\n\nfunction CommandShortcut({\n className,\n ...props\n}: React.ComponentProps<\"span\">) {\n return (\n \n )\n}\n\nexport {\n Command,\n CommandDialog,\n CommandInput,\n CommandList,\n CommandEmpty,\n CommandLoading,\n CommandGroup,\n CommandItem,\n CommandShortcut,\n CommandSeparator,\n}\n", "type": "registry:ui", "target": "components/ui/command.tsx" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "context-menu", "type": "registry:ui", "title": "Context Menu", "description": "Displays a menu to the user — such as a set of actions or functions — triggered by a button.", "dependencies": [ "@base-ui/react", "class-variance-authority", "lucide-react" ], "registryDependencies": [], "files": [ { "path": "ui/context-menu.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"@base-ui/react/context-menu\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"cn\"\n\nimport { Check, ChevronRight } from \"lucide-react\"\n\nexport type ContextMenuSize = \"sm\" | \"default\" | \"lg\"\n\ninterface ContextMenuDensityContextProps {\n size: ContextMenuSize\n hasIcons: boolean\n}\n\nconst ContextMenuDensityContext = React.createContext({\n size: \"default\",\n hasIcons: false,\n})\n\nfunction ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {\n return \n}\n\nfunction ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) {\n return (\n \n )\n}\n\nfunction ContextMenuTrigger({\n className,\n ...props\n}: ContextMenuPrimitive.Trigger.Props) {\n return (\n \n )\n}\n\nconst contextMenuContentVariants = cva(\n \"cn-context-menu-content cn-context-menu-content-logical cn-menu-target cn-menu-translucent z-50 origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden\",\n {\n variants: {\n size: {\n sm: \"min-w-40 p-1 text-xs\",\n default: \"min-w-48 p-1.5 text-sm\",\n lg: \"min-w-56 p-2 text-base\",\n },\n },\n defaultVariants: {\n size: \"default\",\n },\n }\n)\n\nexport interface ContextMenuContentProps\n extends ContextMenuPrimitive.Popup.Props,\n Pick<\n ContextMenuPrimitive.Positioner.Props,\n \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n >,\n VariantProps {\n /**\n * Proportional sizing scale for the context menu and its contained items (`sm` | `default` | `lg`).\n * @default \"default\"\n */\n size?: ContextMenuSize\n /**\n * Reserves an icon gutter across all items so text aligns evenly even if only some items have icons.\n * @default false\n */\n hasIcons?: boolean\n}\n\nfunction ContextMenuContent({\n className,\n align = \"start\",\n alignOffset = 4,\n side = \"right\",\n sideOffset = 2,\n size = \"default\",\n hasIcons = false,\n children,\n ...props\n}: ContextMenuContentProps) {\n const contextValue = React.useMemo(\n () => ({ size, hasIcons }),\n [size, hasIcons]\n )\n\n return (\n \n \n \n \n {children}\n \n \n \n \n )\n}\n\nconst ContextMenuGroupContext = React.createContext(false)\n\nfunction ContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props) {\n return (\n \n \n \n )\n}\n\nexport interface ContextMenuLabelProps extends React.ComponentProps<\"div\"> {\n inset?: boolean\n}\n\nfunction ContextMenuLabel({\n className,\n inset,\n ...props\n}: ContextMenuLabelProps) {\n const isInsideGroup = React.useContext(ContextMenuGroupContext)\n\n if (isInsideGroup) {\n return (\n \n )\n }\n\n return (\n \n )\n}\n\nexport interface ContextMenuItemProps extends ContextMenuPrimitive.Item.Props {\n inset?: boolean\n variant?: \"default\" | \"destructive\"\n /**\n * Leading icon element rendered before the item label.\n */\n icon?: React.ReactNode\n /**\n * Optional multiline secondary descriptive text rendered below the primary label.\n */\n subText?: React.ReactNode\n /**\n * Secondary content (such as hotkey kbd, badge, or status) rendered in the trailing flex container.\n */\n secondaryContent?: React.ReactNode\n /**\n * Shorthand keyboard shortcut text (e.g., \"⌘C\") or custom element.\n * @deprecated Use `secondaryContent` with a `` component instead.\n */\n shortcut?: React.ReactNode\n}\n\nfunction ContextMenuItem({\n className,\n inset,\n variant = \"default\",\n icon,\n subText,\n secondaryContent,\n shortcut,\n children,\n ...props\n}: ContextMenuItemProps) {\n const { hasIcons, size } = React.useContext(ContextMenuDensityContext)\n const shouldApplyInset = inset && !hasIcons\n\n const trailing = secondaryContent ?? (\n typeof shortcut === \"string\" ? (\n {shortcut}\n ) : (\n shortcut\n )\n )\n\n return (\n \n {icon ? (\n \n {icon}\n \n ) : hasIcons ? (\n \n ) : null}\n\n {subText ? (\n
\n \n {children}\n \n \n {subText}\n \n
\n ) : (\n \n {children}\n \n )}\n\n {trailing && (\n \n {trailing}\n \n )}\n \n )\n}\n\nfunction ContextMenuSub({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props) {\n return (\n \n )\n}\n\nexport interface ContextMenuSubTriggerProps extends ContextMenuPrimitive.SubmenuTrigger.Props {\n inset?: boolean\n icon?: React.ReactNode\n subText?: React.ReactNode\n secondaryContent?: React.ReactNode\n}\n\nfunction ContextMenuSubTrigger({\n className,\n inset,\n icon,\n subText,\n secondaryContent,\n children,\n ...props\n}: ContextMenuSubTriggerProps) {\n const { hasIcons, size } = React.useContext(ContextMenuDensityContext)\n const shouldApplyInset = inset && !hasIcons\n\n return (\n \n {icon ? (\n \n {icon}\n \n ) : hasIcons ? (\n \n ) : null}\n\n {subText ? (\n
\n \n {children}\n \n \n {subText}\n \n
\n ) : (\n \n {children}\n \n )}\n\n \n {secondaryContent}\n \n \n \n )\n}\n\nfunction ContextMenuSubContent({\n align = \"start\",\n alignOffset = -3,\n side = \"right\",\n sideOffset = 2,\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nexport interface ContextMenuCheckboxItemProps extends ContextMenuPrimitive.CheckboxItem.Props {\n inset?: boolean\n icon?: React.ReactNode\n subText?: React.ReactNode\n secondaryContent?: React.ReactNode\n /**\n * Shorthand keyboard shortcut text or custom element.\n * @deprecated Use `secondaryContent` with a `` component instead.\n */\n shortcut?: React.ReactNode\n}\n\nfunction ContextMenuCheckboxItem({\n className,\n children,\n checked,\n inset,\n icon,\n subText,\n secondaryContent,\n shortcut,\n ...props\n}: ContextMenuCheckboxItemProps) {\n const { hasIcons, size } = React.useContext(ContextMenuDensityContext)\n const shouldApplyInset = inset && !hasIcons\n\n const trailing = secondaryContent ?? (\n typeof shortcut === \"string\" ? (\n {shortcut}\n ) : (\n shortcut\n )\n )\n\n return (\n \n {icon ? (\n \n {icon}\n \n ) : hasIcons ? (\n \n ) : null}\n\n {subText ? (\n
\n \n {children}\n \n \n {subText}\n \n
\n ) : (\n \n {children}\n \n )}\n\n {trailing ? (\n \n {trailing}\n \n \n \n \n ) : (\n \n \n \n )}\n \n )\n}\n\nfunction ContextMenuRadioGroup({ ...props }: ContextMenuPrimitive.RadioGroup.Props) {\n return (\n \n \n \n )\n}\n\nexport interface ContextMenuRadioItemProps extends ContextMenuPrimitive.RadioItem.Props {\n inset?: boolean\n icon?: React.ReactNode\n subText?: React.ReactNode\n secondaryContent?: React.ReactNode\n /**\n * Shorthand keyboard shortcut text or custom element.\n * @deprecated Use `secondaryContent` with a `` component instead.\n */\n shortcut?: React.ReactNode\n}\n\nfunction ContextMenuRadioItem({\n className,\n children,\n inset,\n icon,\n subText,\n secondaryContent,\n shortcut,\n ...props\n}: ContextMenuRadioItemProps) {\n const { hasIcons, size } = React.useContext(ContextMenuDensityContext)\n const shouldApplyInset = inset && !hasIcons\n\n const trailing = secondaryContent ?? (\n typeof shortcut === \"string\" ? (\n {shortcut}\n ) : (\n shortcut\n )\n )\n\n return (\n \n {icon ? (\n \n {icon}\n \n ) : hasIcons ? (\n \n ) : null}\n\n {subText ? (\n
\n \n {children}\n \n \n {subText}\n \n
\n ) : (\n \n {children}\n \n )}\n\n {trailing ? (\n \n {trailing}\n \n \n \n \n ) : (\n \n \n \n )}\n \n )\n}\n\nfunction ContextMenuSeparator({\n className,\n ...props\n}: ContextMenuPrimitive.Separator.Props) {\n return (\n \n )\n}\n\nfunction ContextMenuShortcut({\n className,\n ...props\n}: React.ComponentProps<\"span\">) {\n return (\n \n )\n}\n\nexport {\n ContextMenu,\n ContextMenuTrigger,\n ContextMenuContent,\n ContextMenuItem,\n ContextMenuCheckboxItem,\n ContextMenuRadioItem,\n ContextMenuLabel,\n ContextMenuSeparator,\n ContextMenuShortcut,\n ContextMenuGroup,\n ContextMenuPortal,\n ContextMenuSub,\n ContextMenuSubContent,\n ContextMenuSubTrigger,\n ContextMenuRadioGroup,\n contextMenuContentVariants,\n}\n", "type": "registry:ui", "target": "components/ui/context-menu.tsx" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "dialog", "type": "registry:ui", "title": "Dialog", "description": "A modal window overlaid on the primary viewport with animated soft backdrop blur, smooth scale transition, and built-in header close button.", "dependencies": [ "@base-ui/react", "class-variance-authority", "lucide-react" ], "registryDependencies": [ "button" ], "files": [ { "path": "ui/dialog.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { X } from \"icons\"\nimport { cn } from \"cn\"\n\nimport { Button } from \"@/components/ui/button\"\n\nexport type DialogSize = \"sm\" | \"default\" | \"lg\" | \"xl\" | \"full\"\n\nconst DialogContext = React.createContext<{ size: DialogSize }>({\n size: \"default\",\n})\n\nconst dialogContentVariants = cva(\n \"cn-dialog-content fixed top-1/2 left-1/2 z-50 grid w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 bg-neutral-surface text-neutral-text shadow-2xl outline-none duration-200 data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0\",\n {\n variants: {\n size: {\n sm: \"max-w-sm p-4 gap-3 rounded-xl\",\n default: \"max-w-lg p-6 gap-4 rounded-2xl\",\n lg: \"max-w-2xl p-6 sm:p-8 gap-5 rounded-2xl\",\n xl: \"max-w-4xl p-6 sm:p-8 gap-6 rounded-3xl\",\n full: \"max-w-[calc(100vw-2rem)] max-h-[calc(100dvh-2rem)] sm:max-w-[calc(100vw-4rem)] sm:max-h-[calc(100dvh-4rem)] p-6 sm:p-10 gap-6 rounded-3xl overflow-y-auto\",\n },\n },\n defaultVariants: {\n size: \"default\",\n },\n }\n)\n\nfunction Dialog({ ...props }: DialogPrimitive.Root.Props) {\n return \n}\n\nfunction DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {\n return \n}\n\nfunction DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {\n return \n}\n\nfunction DialogClose({ ...props }: DialogPrimitive.Close.Props) {\n return \n}\n\nfunction DialogOverlay({\n className,\n ...props\n}: DialogPrimitive.Backdrop.Props) {\n return (\n \n )\n}\n\nexport interface DialogContentProps\n extends Omit,\n VariantProps {\n className?: string\n /**\n * Modal size tier (`sm` | `default` | `lg` | `xl` | `full`) controlling max-width, internal padding, and density.\n * @default \"default\"\n */\n size?: DialogSize\n /**\n * Optional close button rendered inside the content box when no DialogHeader is present.\n * @default false\n */\n showCloseButton?: boolean\n}\n\nfunction DialogContent({\n className,\n children,\n size = \"default\",\n showCloseButton = false,\n ...props\n}: DialogContentProps) {\n return (\n \n \n \n \n {children}\n {showCloseButton && (\n \n }\n >\n \n Close\n \n )}\n \n \n \n )\n}\n\nexport interface DialogHeaderProps extends React.ComponentProps<\"div\"> {\n /**\n * When true (default), renders a close button inside the header slot.\n * @default true\n */\n showCloseButton?: boolean\n}\n\nfunction DialogHeader({\n className,\n children,\n showCloseButton = true,\n ...props\n}: DialogHeaderProps) {\n const { size } = React.useContext(DialogContext)\n return (\n \n {children}\n {showCloseButton && (\n \n }\n >\n \n Close\n \n )}\n \n )\n}\n\nfunction DialogBody({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction DialogFooter({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n const { size } = React.useContext(DialogContext)\n return (\n \n )\n}\n\nfunction DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {\n const { size } = React.useContext(DialogContext)\n return (\n \n )\n}\n\nfunction DialogDescription({\n className,\n ...props\n}: DialogPrimitive.Description.Props) {\n return (\n \n )\n}\n\nexport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogBody,\n DialogOverlay,\n DialogPortal,\n DialogTitle,\n DialogTrigger,\n dialogContentVariants,\n}\n", "type": "registry:ui", "target": "components/ui/dialog.tsx" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "drawer", "type": "registry:ui", "title": "Drawer", "description": "A touch-friendly sliding drawer with authentic gesture physics, drag-to-dismiss handle, and floating card mode built on Base UI.", "dependencies": [ "@base-ui/react", "lucide-react" ], "registryDependencies": [ "button" ], "files": [ { "path": "ui/drawer.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"@base-ui/react/drawer\"\nimport { X } from \"icons\"\nimport { cn } from \"cn\"\n\nimport { Button } from \"@/components/ui/button\"\n\nexport type DrawerSide = \"top\" | \"bottom\" | \"left\" | \"right\" | \"start\" | \"end\"\nexport type DrawerSize = \"sm\" | \"default\" | \"lg\" | \"xl\" | \"full\"\n\ntype DrawerContextProps = {\n hasSnapPoints: boolean\n modal: DrawerPrimitive.Root.Props[\"modal\"]\n showSwipeHandle: boolean\n swipeDirection?: DrawerPrimitive.Root.Props[\"swipeDirection\"]\n side: DrawerSide\n floating: boolean\n size: DrawerSize\n}\n\nconst DrawerContext = React.createContext(null)\n\nexport function useDrawer() {\n const context = React.useContext(DrawerContext)\n if (!context) {\n throw new Error(\"useDrawer must be used within a Drawer.\")\n }\n return context\n}\n\nexport interface DrawerProps extends DrawerPrimitive.Root.Props {\n /**\n * The edge from which the drawer slides in (`top` | `bottom` | `left` | `right` | `start` | `end`).\n * Defaults to `\"bottom\"` when floating=true, and `\"right\"` when floating=false.\n */\n side?: DrawerSide\n /**\n * When true (default for Drawer), renders with shadcn drawer styles (bottom/floating drawer with swipe handle and gesture physics).\n * When false, converts to exact shadcn sheet styles (docked flush against viewport edge with slide transitions).\n * @default true\n */\n floating?: boolean\n /**\n * Size scale for drawer width (on side drawers) or height (on vertical drawers).\n * @default \"default\"\n */\n size?: DrawerSize\n /**\n * Whether to show a touch swipe handle pill on the dismissible edge.\n * Only active when floating=true. Defaults to true for bottom/top drawers in floating mode.\n */\n showSwipeHandle?: boolean\n}\n\nfunction resolveDefaultSwipeDirection(side: DrawerSide): NonNullable {\n if (side === \"top\") return \"up\"\n if (side === \"bottom\") return \"down\"\n if (side === \"left\" || side === \"start\") return \"left\"\n return \"right\"\n}\n\nfunction Drawer({\n side: customSide,\n floating = true,\n size = \"default\",\n modal = true,\n showSwipeHandle,\n snapPoints,\n swipeDirection: customSwipeDirection,\n ...props\n}: DrawerProps) {\n const side = customSide ?? (floating ? \"bottom\" : \"right\")\n const resolvedSwipeDirection = floating\n ? (customSwipeDirection ?? resolveDefaultSwipeDirection(side))\n : customSwipeDirection\n\n const isVertical = resolvedSwipeDirection === \"down\" || resolvedSwipeDirection === \"up\"\n const resolvedShowSwipeHandle = floating && (showSwipeHandle ?? (isVertical || side === \"bottom\"))\n const hasSnapPoints = snapPoints != null && snapPoints.length > 0\n\n const contextValue = React.useMemo(\n () => ({\n hasSnapPoints,\n modal,\n showSwipeHandle: resolvedShowSwipeHandle,\n swipeDirection: resolvedSwipeDirection,\n side,\n floating,\n size,\n }),\n [hasSnapPoints, modal, resolvedShowSwipeHandle, resolvedSwipeDirection, side, floating, size]\n )\n\n return (\n \n \n \n )\n}\n\nfunction DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props) {\n return \n}\n\nfunction DrawerPortal({ ...props }: DrawerPrimitive.Portal.Props) {\n return \n}\n\nfunction DrawerClose({ ...props }: DrawerPrimitive.Close.Props) {\n return \n}\n\nfunction DrawerOverlay({\n className,\n ...props\n}: DrawerPrimitive.Backdrop.Props) {\n return (\n \n )\n}\n\nfunction DrawerSwipeHandle({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nexport interface DrawerContentProps extends DrawerPrimitive.Popup.Props {\n /**\n * Optional override for floating mode.\n * If false, converts into shadcn sheet styling.\n */\n floating?: boolean\n /**\n * Optional override for side edge.\n */\n side?: DrawerSide\n /**\n * Optional override for size.\n */\n size?: DrawerSize\n}\n\nfunction DrawerContent({\n className,\n children,\n floating: contentFloating,\n side: contentSide,\n size: contentSize,\n ...props\n}: DrawerContentProps) {\n const context = useDrawer()\n const isFloating = contentFloating ?? context.floating\n const side = contentSide ?? context.side\n const resolvedSize = contentSize ?? context.size\n const { hasSnapPoints, modal, showSwipeHandle, swipeDirection } = context\n\n const contentClasses = isFloating\n ? cn(\n \"cn-drawer-popup fixed z-50 flex flex-col bg-neutral-surface text-neutral-text border border-neutral-interactive/80 shadow-2xl outline-none transition-[transform,opacity] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] data-ending-style:opacity-0 data-starting-style:opacity-0\",\n side === \"bottom\" &&\n \"inset-x-0 bottom-0 rounded-t-[16px] max-h-[85dvh] data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom data-ending-style:translate-y-full data-starting-style:translate-y-full sm:inset-x-4 sm:bottom-4 sm:mx-auto sm:max-w-lg sm:rounded-2xl\",\n side === \"top\" &&\n \"inset-x-0 top-0 rounded-b-[16px] max-h-[85dvh] data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top data-ending-style:-translate-y-full data-starting-style:-translate-y-full sm:inset-x-4 sm:top-4 sm:mx-auto sm:max-w-lg sm:rounded-2xl\",\n side === \"left\" &&\n \"inset-y-2 left-2 w-3/4 sm:max-w-sm rounded-2xl data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left data-ending-style:-translate-x-full data-starting-style:-translate-x-full\",\n side === \"right\" &&\n \"inset-y-2 right-2 w-3/4 sm:max-w-sm rounded-2xl data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right data-ending-style:translate-x-full data-starting-style:translate-x-full\",\n side === \"start\" &&\n \"inset-y-2 start-2 w-3/4 sm:max-w-sm rounded-2xl ltr:data-[state=closed]:slide-out-to-left rtl:data-[state=closed]:slide-out-to-right ltr:data-[state=open]:slide-in-from-left rtl:data-[state=open]:slide-in-from-right ltr:data-ending-style:-translate-x-full rtl:data-ending-style:translate-x-full ltr:data-starting-style:-translate-x-full rtl:data-starting-style:translate-x-full\",\n side === \"end\" &&\n \"inset-y-2 end-2 w-3/4 sm:max-w-sm rounded-2xl ltr:data-[state=closed]:slide-out-to-right rtl:data-[state=closed]:slide-out-to-left ltr:data-[state=open]:slide-in-from-right rtl:data-[state=open]:slide-in-from-left ltr:data-ending-style:translate-x-full rtl:data-ending-style:-translate-x-full ltr:data-starting-style:translate-x-full rtl:data-starting-style:-translate-x-full\",\n className\n )\n : cn(\n \"cn-sheet-content fixed z-50 flex flex-col bg-neutral-surface text-neutral-text shadow-xl outline-none transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out data-ending-style:opacity-0 data-starting-style:opacity-0\",\n side === \"top\" &&\n \"inset-x-0 top-0 border-b border-neutral-interactive/80 data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top data-ending-style:-translate-y-full data-starting-style:-translate-y-full\",\n side === \"bottom\" &&\n \"inset-x-0 bottom-0 border-t border-neutral-interactive/80 data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom data-ending-style:translate-y-full data-starting-style:translate-y-full\",\n side === \"left\" &&\n \"inset-y-0 left-0 h-full w-3/4 border-r border-neutral-interactive/80 sm:max-w-sm data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left data-ending-style:-translate-x-full data-starting-style:-translate-x-full\",\n side === \"right\" &&\n \"inset-y-0 right-0 h-full w-3/4 border-l border-neutral-interactive/80 sm:max-w-sm data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right data-ending-style:translate-x-full data-starting-style:translate-x-full\",\n side === \"start\" &&\n \"inset-y-0 start-0 h-full w-3/4 border-e border-neutral-interactive/80 sm:max-w-sm ltr:data-[state=closed]:slide-out-to-left rtl:data-[state=closed]:slide-out-to-right ltr:data-[state=open]:slide-in-from-left rtl:data-[state=open]:slide-in-from-right ltr:data-ending-style:-translate-x-full rtl:data-ending-style:translate-x-full ltr:data-starting-style:-translate-x-full rtl:data-starting-style:translate-x-full\",\n side === \"end\" &&\n \"inset-y-0 end-0 h-full w-3/4 border-s border-neutral-interactive/80 sm:max-w-sm ltr:data-[state=closed]:slide-out-to-right rtl:data-[state=closed]:slide-out-to-left ltr:data-[state=open]:slide-in-from-right rtl:data-[state=open]:slide-in-from-left ltr:data-ending-style:translate-x-full rtl:data-ending-style:-translate-x-full ltr:data-starting-style:translate-x-full rtl:data-starting-style:-translate-x-full\",\n className\n )\n\n return (\n \n {modal !== false && }\n \n \n {isFloating && showSwipeHandle && side === \"bottom\" && }\n \n {children}\n \n {isFloating && showSwipeHandle && side === \"top\" && }\n \n \n \n )\n}\n\nexport interface DrawerHeaderProps extends React.ComponentProps<\"div\"> {\n /**\n * When true (default), renders a close button in the header.\n * @default true\n */\n showCloseButton?: boolean\n}\n\nfunction DrawerHeader({\n className,\n children,\n showCloseButton = true,\n ...props\n}: DrawerHeaderProps) {\n return (\n \n {children}\n {showCloseButton && (\n \n }\n >\n \n Close\n \n )}\n \n )\n}\n\nfunction DrawerBody({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props) {\n return (\n \n )\n}\n\nfunction DrawerDescription({\n className,\n ...props\n}: DrawerPrimitive.Description.Props) {\n return (\n \n )\n}\n\nfunction DrawerSwipeArea({ ...props }: DrawerPrimitive.SwipeArea.Props) {\n return \n}\n\nexport {\n Drawer,\n DrawerPortal,\n DrawerOverlay,\n DrawerSwipeHandle,\n DrawerSwipeArea,\n DrawerTrigger,\n DrawerClose,\n DrawerContent,\n DrawerHeader,\n DrawerBody,\n DrawerFooter,\n DrawerTitle,\n DrawerDescription,\n}\n", "type": "registry:ui", "target": "components/ui/drawer.tsx" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "dropdown-menu", "type": "registry:ui", "title": "Dropdown Menu", "description": "Displays a menu to the user—such as a set of actions or functions—triggered by a button.", "dependencies": [ "@base-ui/react", "class-variance-authority", "lucide-react" ], "registryDependencies": [], "files": [ { "path": "ui/dropdown-menu.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"cn\"\n\nimport { Check, ChevronRight } from \"lucide-react\"\n\nexport type DropdownMenuSize = \"sm\" | \"default\" | \"lg\"\n\ninterface DropdownMenuDensityContextProps {\n size: DropdownMenuSize\n hasIcons: boolean\n hasCheckmarks: boolean\n}\n\nconst DropdownMenuDensityContext = React.createContext({\n size: \"default\",\n hasIcons: false,\n hasCheckmarks: false,\n})\n\nfunction DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {\n return \n}\n\nfunction DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {\n return \n}\n\nfunction DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {\n return \n}\n\nconst dropdownMenuContentVariants = cva(\n \"cn-dropdown-menu-content cn-dropdown-menu-content-logical cn-menu-target cn-menu-translucent z-50 origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden\",\n {\n variants: {\n size: {\n sm: \"min-w-40 p-1 text-xs\",\n default: \"min-w-48 p-1.5 text-sm\",\n lg: \"min-w-56 p-2 text-base\",\n },\n },\n defaultVariants: {\n size: \"default\",\n },\n }\n)\n\nexport interface DropdownMenuContentProps\n extends MenuPrimitive.Popup.Props,\n Pick<\n MenuPrimitive.Positioner.Props,\n \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n >,\n VariantProps {\n /**\n * Proportional sizing scale for the dropdown menu and its contained items (`sm` | `default` | `lg`).\n * @default \"default\"\n */\n size?: DropdownMenuSize\n /**\n * Reserves an icon gutter across all items so text aligns evenly even if only some items have icons.\n * @default false\n */\n hasIcons?: boolean\n /**\n * Reserves a checkmark indicator gutter across all items.\n * @default false\n */\n hasCheckmarks?: boolean\n /**\n * When true, renders an aligned arrow pointing to the anchor trigger.\n * @default false\n */\n withArrow?: boolean\n}\n\nfunction DropdownMenuContent({\n align = \"start\",\n alignOffset = 0,\n side = \"bottom\",\n sideOffset = 4,\n size = \"default\",\n hasIcons = false,\n hasCheckmarks = false,\n withArrow = false,\n className,\n children,\n ...props\n}: DropdownMenuContentProps) {\n const contextValue = React.useMemo(\n () => ({ size, hasIcons, hasCheckmarks }),\n [size, hasIcons, hasCheckmarks]\n )\n\n return (\n \n \n \n \n {children}\n {withArrow && (\n \n )}\n \n \n \n \n )\n}\n\nconst DropdownMenuGroupContext = React.createContext(false)\n\nfunction DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {\n return (\n \n \n \n )\n}\n\nexport interface DropdownMenuLabelProps extends React.ComponentProps<\"div\"> {\n inset?: boolean\n}\n\nfunction DropdownMenuLabel({\n className,\n inset,\n ...props\n}: DropdownMenuLabelProps) {\n const isInsideGroup = React.useContext(DropdownMenuGroupContext)\n\n if (isInsideGroup) {\n return (\n \n )\n }\n\n return (\n \n )\n}\n\nexport interface DropdownMenuItemProps extends MenuPrimitive.Item.Props {\n inset?: boolean\n variant?: \"default\" | \"destructive\"\n /**\n * Leading icon element rendered before the item label.\n */\n icon?: React.ReactNode\n /**\n * Optional multiline secondary descriptive text rendered below the primary label.\n */\n subText?: React.ReactNode\n /**\n * Secondary content (such as hotkey kbd, badge, or status) rendered in the trailing flex container.\n */\n secondaryContent?: React.ReactNode\n /**\n * Shorthand keyboard shortcut text (e.g., \"⌘K\") or custom element.\n * @deprecated Use `secondaryContent` with a `` component instead.\n */\n shortcut?: React.ReactNode\n}\n\nfunction DropdownMenuItem({\n className,\n inset,\n variant = \"default\",\n icon,\n subText,\n secondaryContent,\n shortcut,\n children,\n ...props\n}: DropdownMenuItemProps) {\n const { hasIcons, size } = React.useContext(DropdownMenuDensityContext)\n const shouldApplyInset = inset && !hasIcons\n\n const trailing = secondaryContent ?? (\n typeof shortcut === \"string\" ? (\n {shortcut}\n ) : (\n shortcut\n )\n )\n\n return (\n \n {icon ? (\n \n {icon}\n \n ) : hasIcons ? (\n \n ) : null}\n\n {subText ? (\n
\n \n {children}\n \n \n {subText}\n \n
\n ) : (\n \n {children}\n \n )}\n\n {trailing && (\n \n {trailing}\n \n )}\n \n )\n}\n\nfunction DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {\n return \n}\n\nexport interface DropdownMenuSubTriggerProps extends MenuPrimitive.SubmenuTrigger.Props {\n inset?: boolean\n icon?: React.ReactNode\n subText?: React.ReactNode\n secondaryContent?: React.ReactNode\n}\n\nfunction DropdownMenuSubTrigger({\n className,\n inset,\n icon,\n subText,\n secondaryContent,\n children,\n ...props\n}: DropdownMenuSubTriggerProps) {\n const { hasIcons, size } = React.useContext(DropdownMenuDensityContext)\n const shouldApplyInset = inset && !hasIcons\n\n return (\n \n {icon ? (\n \n {icon}\n \n ) : hasIcons ? (\n \n ) : null}\n\n {subText ? (\n
\n \n {children}\n \n \n {subText}\n \n
\n ) : (\n \n {children}\n \n )}\n\n \n {secondaryContent}\n \n \n \n )\n}\n\nfunction DropdownMenuSubContent({\n align = \"start\",\n alignOffset = -3,\n side = \"right\",\n sideOffset = 2,\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nexport interface DropdownMenuCheckboxItemProps extends MenuPrimitive.CheckboxItem.Props {\n inset?: boolean\n icon?: React.ReactNode\n subText?: React.ReactNode\n secondaryContent?: React.ReactNode\n /**\n * Shorthand keyboard shortcut text or custom element.\n * @deprecated Use `secondaryContent` with a `` component instead.\n */\n shortcut?: React.ReactNode\n}\n\nfunction DropdownMenuCheckboxItem({\n className,\n children,\n checked,\n inset,\n icon,\n subText,\n secondaryContent,\n shortcut,\n ...props\n}: DropdownMenuCheckboxItemProps) {\n const { hasIcons, size } = React.useContext(DropdownMenuDensityContext)\n const shouldApplyInset = inset && !hasIcons\n\n const trailing = secondaryContent ?? (\n typeof shortcut === \"string\" ? (\n {shortcut}\n ) : (\n shortcut\n )\n )\n\n return (\n \n {icon ? (\n \n {icon}\n \n ) : hasIcons ? (\n \n ) : null}\n\n {subText ? (\n
\n \n {children}\n \n \n {subText}\n \n
\n ) : (\n \n {children}\n \n )}\n\n {trailing ? (\n \n {trailing}\n \n \n \n \n ) : (\n \n \n \n )}\n \n )\n}\n\nfunction DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {\n return (\n \n \n \n )\n}\n\nexport interface DropdownMenuRadioItemProps extends MenuPrimitive.RadioItem.Props {\n inset?: boolean\n icon?: React.ReactNode\n subText?: React.ReactNode\n secondaryContent?: React.ReactNode\n /**\n * Shorthand keyboard shortcut text or custom element.\n * @deprecated Use `secondaryContent` with a `` component instead.\n */\n shortcut?: React.ReactNode\n}\n\nfunction DropdownMenuRadioItem({\n className,\n children,\n inset,\n icon,\n subText,\n secondaryContent,\n shortcut,\n ...props\n}: DropdownMenuRadioItemProps) {\n const { hasIcons, size } = React.useContext(DropdownMenuDensityContext)\n const shouldApplyInset = inset && !hasIcons\n\n const trailing = secondaryContent ?? (\n typeof shortcut === \"string\" ? (\n {shortcut}\n ) : (\n shortcut\n )\n )\n\n return (\n \n {icon ? (\n \n {icon}\n \n ) : hasIcons ? (\n \n ) : null}\n\n {subText ? (\n
\n \n {children}\n \n \n {subText}\n \n
\n ) : (\n \n {children}\n \n )}\n\n {trailing ? (\n \n {trailing}\n \n \n \n \n ) : (\n \n \n \n )}\n \n )\n}\n\nfunction DropdownMenuSeparator({\n className,\n ...props\n}: MenuPrimitive.Separator.Props) {\n return (\n \n )\n}\n\nfunction DropdownMenuShortcut({\n className,\n ...props\n}: React.ComponentProps<\"span\">) {\n return (\n \n )\n}\n\nexport {\n DropdownMenu,\n DropdownMenuPortal,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuLabel,\n DropdownMenuItem,\n DropdownMenuCheckboxItem,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuSub,\n DropdownMenuSubTrigger,\n DropdownMenuSubContent,\n dropdownMenuContentVariants,\n}\n", "type": "registry:ui", "target": "components/ui/dropdown-menu.tsx" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "empty", "type": "registry:ui", "title": "Empty", "description": "karan-ui empty component built with Base UI.", "dependencies": [ "class-variance-authority" ], "registryDependencies": [], "files": [ { "path": "ui/empty.tsx", "content": "import { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"cn\"\n\nfunction Empty({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction EmptyHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nconst emptyMediaVariants = cva(\n \"cn-empty-media flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n {\n variants: {\n variant: {\n default: \"cn-empty-media-default\",\n icon: \"cn-empty-media-icon\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nfunction EmptyMedia({\n className,\n variant = \"default\",\n ...props\n}: React.ComponentProps<\"div\"> & VariantProps) {\n return (\n \n )\n}\n\nfunction EmptyTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction EmptyDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n return (\n a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction EmptyContent({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nexport {\n Empty,\n EmptyHeader,\n EmptyTitle,\n EmptyDescription,\n EmptyContent,\n EmptyMedia,\n}\n", "type": "registry:ui", "target": "components/ui/empty.tsx" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "field", "type": "registry:ui", "title": "Field", "description": "Form control wrapper with label, subtitle description, input, and multi-intent bottom caption.", "dependencies": [ "class-variance-authority" ], "registryDependencies": [ "label", "separator" ], "files": [ { "path": "ui/field.tsx", "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"cn\"\n\nimport { Label } from \"@/components/ui/label\"\nimport { Separator } from \"@/components/ui/separator\"\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n return (\n \n )\n}\n\nfunction FieldLegend({\n className,\n variant = \"legend\",\n ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n return (\n \n )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nconst fieldVariants = cva(\"cn-field group/field flex w-full\", {\n variants: {\n orientation: {\n vertical:\n \"cn-field-orientation-vertical flex-col *:w-full [&>.sr-only]:w-auto\",\n horizontal:\n \"cn-field-orientation-horizontal flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n responsive:\n \"cn-field-orientation-responsive flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n },\n },\n defaultVariants: {\n orientation: \"vertical\",\n },\n})\n\nfunction Field({\n className,\n orientation = \"vertical\",\n ...props\n}: React.ComponentProps<\"div\"> & VariantProps) {\n return (\n \n )\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction FieldLabel({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n [data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n return (\n a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary-text\",\n className\n )}\n {...props}\n />\n )\n}\n\nconst fieldCaptionVariants = cva(\n \"cn-field-caption text-xs leading-snug font-normal [&>a]:underline [&>a]:underline-offset-4\",\n {\n variants: {\n intent: {\n neutral: \"text-neutral-text-muted [&>a:hover]:text-neutral-text\",\n danger: \"text-danger-text [&>a:hover]:text-danger-text/80\",\n success: \"text-success-text [&>a:hover]:text-success-text/80\",\n warning: \"text-warning-text [&>a:hover]:text-warning-text/80\",\n info: \"text-info-text [&>a:hover]:text-info-text/80\",\n primary: \"text-primary-text [&>a:hover]:text-primary-text/80\",\n },\n },\n defaultVariants: {\n intent: \"neutral\",\n },\n }\n)\n\nfunction FieldCaption({\n className,\n intent,\n children,\n errors,\n role,\n ...props\n}: React.ComponentProps<\"div\"> &\n VariantProps & {\n errors?: Array<{ message?: string } | undefined>\n }) {\n const content = useMemo(() => {\n if (children) {\n return children\n }\n\n if (!errors?.length) {\n return null\n }\n\n const uniqueErrors = [\n ...new Map(errors.map((error) => [error?.message, error])).values(),\n ]\n\n if (uniqueErrors.length === 1) {\n return uniqueErrors[0]?.message\n }\n\n return (\n
    \n {uniqueErrors.map(\n (error, index) =>\n error?.message &&
  • {error.message}
    • \n )}\n
\n )\n }, [children, errors])\n\n if (!content) {\n return null\n }\n\n const effectiveIntent = intent ?? (errors?.length ? \"danger\" : \"neutral\")\n const isAlert = effectiveIntent === \"danger\"\n\n return (\n \n {content}\n \n )\n}\n\nconst FormCaption = FieldCaption\n\nfunction FieldSeparator({\n children,\n className,\n ...props\n}: React.ComponentProps<\"div\"> & {\n children?: React.ReactNode\n}) {\n return (\n \n \n {children && (\n \n {children}\n \n )}\n \n )\n}\n\nexport {\n Field,\n FieldLabel,\n FieldDescription,\n FieldCaption,\n FormCaption,\n fieldCaptionVariants,\n FieldGroup,\n FieldLegend,\n FieldSeparator,\n FieldSet,\n FieldContent,\n FieldTitle,\n}\n", "type": "registry:ui", "target": "components/ui/field.tsx" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "hover-card", "type": "registry:ui", "title": "Hover Card", "description": "For sighted users to preview rich content available behind an anchor link or button trigger on hover.", "dependencies": [ "@base-ui/react", "class-variance-authority" ], "registryDependencies": [], "files": [ { "path": "ui/hover-card.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { PreviewCard as PreviewCardPrimitive } from \"@base-ui/react/preview-card\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"cn\"\n\nexport type HoverCardSize = \"sm\" | \"default\" | \"lg\"\n\nconst hoverCardContentVariants = cva(\n \"cn-hover-card-content relative z-50 origin-(--transform-origin) rounded-xl border border-neutral-interactive/80 bg-neutral-surface text-neutral-text shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 duration-150 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0\",\n {\n variants: {\n size: {\n sm: \"w-64 p-3 text-xs\",\n default: \"w-80 p-4 text-sm\",\n lg: \"w-96 p-5 text-sm\",\n },\n },\n defaultVariants: {\n size: \"default\",\n },\n }\n)\n\nfunction HoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {\n return \n}\n\nfunction HoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props) {\n return (\n \n )\n}\n\nexport interface HoverCardContentProps\n extends Omit,\n Pick<\n PreviewCardPrimitive.Positioner.Props,\n \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n >,\n VariantProps {\n className?: string\n /**\n * Size scale for card width and padding (`sm` | `default` | `lg`).\n * @default \"default\"\n */\n size?: HoverCardSize\n /**\n * When true, renders an aligned arrow pointing to the anchor trigger.\n * @default false\n */\n withArrow?: boolean\n}\n\nfunction HoverCardContent({\n className,\n side = \"bottom\",\n sideOffset = 8,\n align = \"center\",\n alignOffset = 0,\n size = \"default\",\n withArrow = false,\n children,\n ...props\n}: HoverCardContentProps) {\n return (\n \n \n \n {children}\n {withArrow && (\n \n )}\n \n \n \n )\n}\n\nexport {\n HoverCard,\n HoverCardTrigger,\n HoverCardContent,\n hoverCardContentVariants,\n}\n", "type": "registry:ui", "target": "components/ui/hover-card.tsx" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "input-group", "type": "registry:ui", "title": "Input Group", "description": "Compound input container attaching icons, text addons, buttons, or dropdowns to inputs and textareas with synchronized focus rings.", "dependencies": [ "class-variance-authority" ], "registryDependencies": [ "button", "input", "textarea" ], "files": [ { "path": "ui/input-group.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"cn\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\nexport type InputGroupVariant = \"default\" | \"outline\" | \"ghost\"\nexport type InputGroupSize = \"xs\" | \"sm\" | \"default\" | \"lg\"\nexport type InputGroupShape = \"default\" | \"pill\"\n\nexport interface InputGroupContextValue {\n variant?: InputGroupVariant\n size?: InputGroupSize\n shape?: InputGroupShape\n disabled?: boolean\n}\n\nconst InputGroupContext = React.createContext(null)\n\nfunction useInputGroupContext() {\n return React.useContext(InputGroupContext)\n}\n\nconst inputGroupVariants = cva(\n \"group/input-group cn-input-group relative flex w-full min-w-0 items-center border bg-clip-padding outline-none transition-[background-color,color,border-color,box-shadow] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] has-[:disabled]:pointer-events-none has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50 data-[disabled=true]:pointer-events-none data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50 has-[[aria-invalid=true]]:border-danger-fill dark:has-[[aria-invalid=true]]:border-danger-fill/60 has-[[aria-invalid=true]]:ring-3 has-[[aria-invalid=true]]:ring-danger-fill/20 dark:has-[[aria-invalid=true]]:ring-danger-fill/40 has-[>textarea]:h-auto has-[>[data-slot=textarea-wrapper]]:h-auto has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col [&_[data-slot=input]]:border-0! [&_[data-slot=input]]:bg-transparent! [&_[data-slot=input]]:shadow-none! [&_[data-slot=input]]:ring-0! [&_[data-slot=input]]:rounded-none! [&_[data-slot=input]]:h-full! [&_[data-slot=input]]:hover:bg-transparent! [&_[data-slot=input]]:dark:hover:bg-transparent! [&_[data-slot=input]]:focus-visible:bg-transparent! [&_[data-slot=input]]:dark:focus-visible:bg-transparent! [&_[data-slot=input]]:focus-visible:ring-0! [&_[data-slot=input]]:focus-visible:border-transparent! [&_[data-slot=input-wrapper]]:border-0! [&_[data-slot=input-wrapper]]:bg-transparent! [&_[data-slot=input-wrapper]]:shadow-none! [&_[data-slot=input-wrapper]]:ring-0! [&_[data-slot=input-wrapper]]:rounded-none! [&_[data-slot=input-wrapper]]:h-full! [&_[data-slot=textarea-wrapper]]:border-0! [&_[data-slot=textarea-wrapper]]:bg-transparent! [&_[data-slot=textarea-wrapper]]:shadow-none! [&_[data-slot=textarea-wrapper]]:ring-0! [&_[data-slot=textarea-wrapper]]:rounded-none! [&_textarea]:border-0! [&_textarea]:bg-transparent! [&_textarea]:shadow-none! [&_textarea]:ring-0! [&_textarea]:rounded-none! [&_textarea]:hover:bg-transparent! [&_textarea]:dark:hover:bg-transparent! [&_textarea]:focus-visible:bg-transparent! [&_textarea]:dark:focus-visible:bg-transparent! [&_textarea]:focus-visible:ring-0!\",\n {\n variants: {\n variant: {\n default:\n \"cn-input-group-variant-default border-transparent bg-neutral-interactive/60 text-neutral-text dark:bg-neutral-interactive/50 hover:bg-neutral-interactive dark:hover:bg-neutral-interactive/80 has-[:focus-visible]:border-primary-fill has-[:focus-visible]:bg-neutral-surface dark:has-[:focus-visible]:bg-neutral-surface-alt has-[:focus-visible]:ring-3 has-[:focus-visible]:ring-primary-fill/30\",\n outline:\n \"cn-input-group-variant-outline border-neutral-interactive bg-neutral-surface text-neutral-text dark:bg-transparent hover:border-neutral-interactive-hover hover:bg-neutral-surface-alt/60 dark:hover:border-neutral-interactive-hover dark:hover:bg-neutral-interactive/30 has-[:focus-visible]:border-primary-fill has-[:focus-visible]:bg-neutral-surface dark:has-[:focus-visible]:bg-transparent has-[:focus-visible]:ring-3 has-[:focus-visible]:ring-primary-fill/30\",\n ghost:\n \"cn-input-group-variant-ghost border-transparent bg-transparent text-neutral-text hover:bg-neutral-interactive/60 dark:hover:bg-neutral-interactive/50 has-[:focus-visible]:border-primary-fill has-[:focus-visible]:bg-neutral-surface dark:has-[:focus-visible]:bg-neutral-surface-alt has-[:focus-visible]:ring-3 has-[:focus-visible]:ring-primary-fill/30\",\n },\n size: {\n xs: \"cn-input-group-size-xs h-6 rounded-md text-xs\",\n sm: \"cn-input-group-size-sm h-7 rounded-md text-xs\",\n default: \"cn-input-group-size-default h-8 rounded-lg text-sm\",\n lg: \"cn-input-group-size-lg h-9 rounded-lg text-sm\",\n },\n shape: {\n default: \"\",\n pill: \"rounded-full has-data-[align=block-end]:rounded-3xl has-data-[align=block-start]:rounded-3xl\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n shape: \"default\",\n },\n }\n)\n\nexport interface InputGroupProps\n extends React.ComponentProps<\"div\">,\n VariantProps {\n disabled?: boolean\n}\n\nconst InputGroup = React.forwardRef(\n function InputGroup(\n {\n className,\n variant = \"default\",\n size = \"default\",\n shape = \"default\",\n disabled,\n ...props\n },\n ref\n ) {\n const contextValue = React.useMemo(\n () => ({\n variant: variant ?? \"default\",\n size: size ?? \"default\",\n shape: shape ?? \"default\",\n disabled: Boolean(disabled),\n }),\n [variant, size, shape, disabled]\n )\n\n return (\n \n \n \n )\n }\n)\n\nexport type InputGroupAddonAlign =\n | \"inline-start\"\n | \"inline-end\"\n | \"block-start\"\n | \"block-end\"\n\nconst inputGroupAddonVariants = cva(\n \"cn-input-group-addon flex cursor-text items-center justify-center select-none text-neutral-text-muted transition-colors font-medium\",\n {\n variants: {\n align: {\n \"inline-start\": \"cn-input-group-addon-align-inline-start order-first\",\n \"inline-end\": \"cn-input-group-addon-align-inline-end order-last\",\n \"block-start\":\n \"cn-input-group-addon-align-block-start order-first w-full justify-start\",\n \"block-end\":\n \"cn-input-group-addon-align-block-end order-last w-full justify-start\",\n },\n size: {\n xs: \"text-xs [&_svg:not([class*='size-'])]:size-3\",\n sm: \"text-xs [&_svg:not([class*='size-'])]:size-3.5\",\n default: \"text-sm [&_svg:not([class*='size-'])]:size-4\",\n lg: \"text-sm [&_svg:not([class*='size-'])]:size-4\",\n },\n },\n defaultVariants: {\n align: \"inline-start\",\n size: \"default\",\n },\n }\n)\n\nexport interface InputGroupAddonProps\n extends React.ComponentProps<\"div\">,\n Omit, \"size\"> {\n size?: InputGroupSize\n}\n\nfunction InputGroupAddon({\n className,\n align = \"inline-start\",\n size,\n ...props\n}: InputGroupAddonProps) {\n const groupContext = useInputGroupContext()\n const resolvedSize: InputGroupSize = size ?? groupContext?.size ?? \"default\"\n\n return (\n {\n if ((e.target as HTMLElement).closest(\"button, a, input, select, textarea\")) {\n return\n }\n e.currentTarget.parentElement?.querySelector(\"input, textarea\")?.focus()\n }}\n {...props}\n />\n )\n}\n\nconst inputGroupButtonVariants = cva(\n \"cn-input-group-button flex items-center shadow-none transition-transform duration-100\",\n {\n variants: {\n size: {\n xs: \"cn-input-group-button-size-xs h-5 gap-1 rounded-sm px-1.5 text-xs [&>svg:not([class*='size-'])]:size-3\",\n sm: \"cn-input-group-button-size-sm h-6 gap-1 rounded-md px-2 text-xs [&>svg:not([class*='size-'])]:size-3.5\",\n default:\n \"cn-input-group-button-size-default h-6.5 gap-1.5 rounded-md px-2.5 text-xs [&>svg:not([class*='size-'])]:size-4\",\n lg: \"cn-input-group-button-size-lg h-7.5 gap-1.5 rounded-md px-3 text-sm [&>svg:not([class*='size-'])]:size-4\",\n \"icon-xs\":\n \"cn-input-group-button-size-icon-xs size-5 rounded-sm p-0 [&>svg:not([class*='size-'])]:size-3\",\n \"icon-sm\":\n \"cn-input-group-button-size-icon-sm size-6 rounded-md p-0 [&>svg:not([class*='size-'])]:size-3.5\",\n icon: \"cn-input-group-button-size-icon size-6.5 rounded-md p-0 [&>svg:not([class*='size-'])]:size-4\",\n \"icon-lg\":\n \"cn-input-group-button-size-icon-lg size-7.5 rounded-md p-0 [&>svg:not([class*='size-'])]:size-4\",\n },\n },\n defaultVariants: {\n size: \"xs\",\n },\n }\n)\n\nexport interface InputGroupButtonProps\n extends Omit, \"size\" | \"type\">,\n VariantProps {\n type?: \"button\" | \"submit\" | \"reset\"\n}\n\nfunction InputGroupButton({\n className,\n type = \"button\",\n variant = \"ghost\",\n size,\n ...props\n}: InputGroupButtonProps) {\n const groupContext = useInputGroupContext()\n\n const defaultButtonSize = React.useMemo(() => {\n switch (groupContext?.size) {\n case \"xs\":\n return \"xs\"\n case \"sm\":\n return \"xs\"\n case \"lg\":\n return \"sm\"\n case \"default\":\n default:\n return \"xs\"\n }\n }, [groupContext?.size])\n\n const resolvedSize = size ?? defaultButtonSize\n\n return (\n \n )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n const groupContext = useInputGroupContext()\n const isCompact = groupContext?.size === \"xs\" || groupContext?.size === \"sm\"\n\n return (\n \n )\n}\n\nfunction InputGroupInput({\n className,\n size,\n variant,\n disabled,\n ...props\n}: React.ComponentProps) {\n const groupContext = useInputGroupContext()\n const resolvedSize = size ?? groupContext?.size ?? \"default\"\n const resolvedVariant = variant ?? groupContext?.variant ?? \"default\"\n const resolvedDisabled = Boolean(disabled || groupContext?.disabled)\n\n return (\n \n )\n}\n\nfunction InputGroupTextarea({\n className,\n size,\n variant,\n disabled,\n ...props\n}: React.ComponentProps) {\n const groupContext = useInputGroupContext()\n const resolvedSize = size ?? groupContext?.size ?? \"default\"\n const resolvedVariant = variant ?? groupContext?.variant ?? \"default\"\n const resolvedDisabled = Boolean(disabled || groupContext?.disabled)\n\n return (\n \n )\n}\n\nexport {\n InputGroup,\n InputGroupContext,\n useInputGroupContext,\n InputGroupAddon,\n InputGroupButton,\n InputGroupText,\n InputGroupInput,\n InputGroupTextarea,\n inputGroupVariants,\n inputGroupAddonVariants,\n inputGroupButtonVariants,\n}\n", "type": "registry:ui", "target": "components/ui/input-group.tsx" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "input-otp", "type": "registry:ui", "title": "Input OTP", "description": "A accessible and customizable one-time password component with copy paste functionality.", "dependencies": [ "input-otp", "class-variance-authority", "lucide-react" ], "registryDependencies": [ "button-group" ], "files": [ { "path": "ui/input-otp.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n OTPInput,\n OTPInputContext,\n REGEXP_ONLY_CHARS,\n REGEXP_ONLY_DIGITS,\n REGEXP_ONLY_DIGITS_AND_CHARS,\n} from \"input-otp\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"cn\"\n\nimport { Minus } from \"lucide-react\"\nimport { useButtonGroupContext } from \"@/components/ui/button-group\"\n\nexport type InputOTPVariant = \"default\" | \"outline\" | \"ghost\"\nexport type InputOTPSize = \"xs\" | \"sm\" | \"default\" | \"lg\" | \"xl\"\n\ninterface InputOTPCustomContextValue {\n variant?: InputOTPVariant\n size?: InputOTPSize\n disabled?: boolean\n}\n\nconst InputOTPCustomContext = React.createContext({\n variant: \"default\",\n size: \"default\",\n})\n\nconst InputOTPGroupContext = React.createContext<{\n isGroup: boolean\n} | null>(null)\n\nconst inputOTPContainerVariants = cva(\n \"cn-input-otp flex items-center has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50\",\n {\n variants: {\n size: {\n xs: \"gap-1\",\n sm: \"gap-1.5\",\n default: \"gap-2\",\n lg: \"gap-2.5\",\n xl: \"gap-3\",\n },\n },\n defaultVariants: {\n size: \"default\",\n },\n }\n)\n\nconst inputOTPGroupVariants = cva(\n \"cn-input-otp-group flex items-center isolate relative has-aria-invalid:border-danger-fill has-aria-invalid:ring-3 has-aria-invalid:ring-danger-fill/20 dark:has-aria-invalid:ring-danger-fill/40 [&>[data-slot=input-otp-slot]:not(:last-child)]:rounded-e-none [&>[data-slot=input-otp-slot]:not(:first-child)]:rounded-s-none [&>[data-slot=input-otp-slot]:not(:first-child)]:-ms-px [&>[data-slot=input-otp-slot]:first-child]:rounded-s-[inherit] [&>[data-slot=input-otp-slot]:last-child]:rounded-e-[inherit]\",\n {\n variants: {\n size: {\n xs: \"rounded-md\",\n sm: \"rounded-md\",\n default: \"rounded-lg\",\n lg: \"rounded-lg\",\n xl: \"rounded-lg\",\n },\n },\n defaultVariants: {\n size: \"default\",\n },\n }\n)\n\nconst inputOTPSlotVariants = cva(\n \"cn-input-otp-slot relative flex items-center justify-center font-medium outline-none transition-[background-color,color,border-color,box-shadow] duration-150 select-none data-[active=true]:z-10\",\n {\n variants: {\n variant: {\n default:\n \"cn-input-otp-slot-variant-default border border-neutral-interactive/60 bg-neutral-interactive/60 text-neutral-text dark:bg-neutral-interactive/50 dark:border-neutral-interactive/40 hover:bg-neutral-interactive dark:hover:bg-neutral-interactive/80 data-[active=true]:border-primary-fill data-[active=true]:bg-neutral-surface dark:data-[active=true]:bg-neutral-surface-alt data-[active=true]:ring-3 data-[active=true]:ring-primary-fill/30 aria-invalid:border-danger-fill dark:aria-invalid:border-danger-fill/60 aria-invalid:ring-3 aria-invalid:ring-danger-fill/20 dark:aria-invalid:ring-danger-fill/40\",\n outline:\n \"cn-input-otp-slot-variant-outline border border-neutral-interactive bg-neutral-surface text-neutral-text dark:bg-transparent hover:border-neutral-interactive-hover hover:bg-neutral-surface-alt/60 dark:hover:border-neutral-interactive-hover dark:hover:bg-neutral-interactive/30 data-[active=true]:border-primary-fill data-[active=true]:bg-neutral-surface dark:data-[active=true]:bg-transparent data-[active=true]:ring-3 data-[active=true]:ring-primary-fill/30 aria-invalid:border-danger-fill dark:aria-invalid:border-danger-fill/60 aria-invalid:ring-3 aria-invalid:ring-danger-fill/20 dark:aria-invalid:ring-danger-fill/40\",\n ghost:\n \"cn-input-otp-slot-variant-ghost border border-transparent bg-transparent text-neutral-text hover:bg-neutral-interactive/60 dark:hover:bg-neutral-interactive/50 data-[active=true]:border-primary-fill data-[active=true]:bg-neutral-surface dark:data-[active=true]:bg-neutral-surface-alt data-[active=true]:ring-3 data-[active=true]:ring-primary-fill/30 aria-invalid:border-danger-fill dark:aria-invalid:border-danger-fill/60 aria-invalid:ring-3 aria-invalid:ring-danger-fill/20 dark:aria-invalid:ring-danger-fill/40\",\n },\n size: {\n xs: \"cn-input-otp-slot-size-xs size-6 rounded-md text-xs\",\n sm: \"cn-input-otp-slot-size-sm size-7 rounded-md text-xs\",\n default: \"cn-input-otp-slot-size-default size-8 rounded-lg text-sm\",\n lg: \"cn-input-otp-slot-size-lg size-9 rounded-lg text-sm\",\n xl: \"cn-input-otp-slot-size-xl size-10 rounded-lg text-base\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nconst CARET_SIZE_MAP: Record = {\n xs: \"h-3\",\n sm: \"h-3.5\",\n default: \"h-4\",\n lg: \"h-4.5\",\n xl: \"h-5\",\n}\n\nconst SEPARATOR_ICON_SIZE_MAP: Record = {\n xs: \"[&_svg:not([class*='size-'])]:size-3\",\n sm: \"[&_svg:not([class*='size-'])]:size-3.5\",\n default: \"[&_svg:not([class*='size-'])]:size-4\",\n lg: \"[&_svg:not([class*='size-'])]:size-4\",\n xl: \"[&_svg:not([class*='size-'])]:size-5\",\n}\n\nexport type InputOTPProps = Omit<\n React.ComponentProps,\n \"size\"\n> & {\n /**\n * Visual surface variant matching `Input` (`default` | `outline` | `ghost`).\n * @default \"default\"\n */\n variant?: InputOTPVariant\n /**\n * Density/size tier matching `Input` and `Button` heights (`xs` | `sm` | `default` | `lg` | `xl`).\n * Corner radius automatically synchronizes to the active theme matching `Input`.\n * @default \"default\"\n */\n size?: InputOTPSize\n /**\n * Optional custom class for the outer container.\n */\n containerClassName?: string\n}\n\nfunction InputOTP({\n className,\n containerClassName,\n variant,\n size,\n disabled,\n ...props\n}: InputOTPProps) {\n const buttonGroup = useButtonGroupContext()\n\n const groupVariant: InputOTPVariant | undefined =\n buttonGroup?.variant === \"outline\"\n ? \"outline\"\n : buttonGroup?.variant === \"ghost\"\n ? \"ghost\"\n : buttonGroup?.variant === \"default\" ||\n buttonGroup?.variant === \"secondary\"\n ? \"default\"\n : undefined\n\n const resolvedVariant: InputOTPVariant = variant ?? groupVariant ?? \"default\"\n const resolvedSize: InputOTPSize = (size ?? buttonGroup?.size ?? \"default\") as InputOTPSize\n const isDisabled = Boolean(disabled || buttonGroup?.disabled)\n\n const contextValue = React.useMemo(\n () => ({\n variant: resolvedVariant,\n size: resolvedSize,\n disabled: isDisabled,\n }),\n [resolvedVariant, resolvedSize, isDisabled]\n )\n\n return (\n \n \n \n )\n}\n\nexport interface InputOTPGroupProps\n extends React.ComponentProps<\"div\">,\n VariantProps {\n /**\n * Optional variant override for this group.\n */\n variant?: InputOTPVariant\n /**\n * Optional size override for this group.\n */\n size?: InputOTPSize\n}\n\nfunction InputOTPGroup({\n className,\n variant,\n size,\n ...props\n}: InputOTPGroupProps) {\n const rootContext = React.useContext(InputOTPCustomContext)\n\n const resolvedVariant = variant ?? rootContext.variant ?? \"default\"\n const resolvedSize = size ?? rootContext.size ?? \"default\"\n\n const groupStyleContext = React.useMemo(\n () => ({\n variant: resolvedVariant,\n size: resolvedSize,\n disabled: rootContext.disabled,\n }),\n [resolvedVariant, resolvedSize, rootContext.disabled]\n )\n\n const groupPresenceContext = React.useMemo(\n () => ({\n isGroup: true,\n }),\n []\n )\n\n return (\n \n \n \n \n \n )\n}\n\nexport interface InputOTPSlotProps\n extends React.ComponentProps<\"div\">,\n VariantProps {\n /**\n * The 0-based index of this character slot.\n */\n index: number\n /**\n * Optional variant override for this slot.\n */\n variant?: InputOTPVariant\n /**\n * Optional density/size override for this slot.\n */\n size?: InputOTPSize\n}\n\nfunction InputOTPSlot({\n index,\n className,\n variant,\n size,\n ...props\n}: InputOTPSlotProps) {\n const inputOTPContext = React.useContext(OTPInputContext)\n const rootContext = React.useContext(InputOTPCustomContext)\n const groupContext = React.useContext(InputOTPGroupContext)\n\n const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}\n\n const resolvedVariant = variant ?? rootContext.variant ?? \"default\"\n const resolvedSize = size ?? rootContext.size ?? \"default\"\n\n const isInsideGroup = Boolean(groupContext?.isGroup)\n\n return (\n \n {char}\n {hasFakeCaret && (\n
\n \n
\n )}\n \n )\n}\n\nexport interface InputOTPSeparatorProps extends React.ComponentProps<\"div\"> {\n /**\n * Optional size override for separator icon scaling.\n */\n size?: InputOTPSize\n}\n\nfunction InputOTPSeparator({\n className,\n size,\n children,\n ...props\n}: InputOTPSeparatorProps) {\n const rootContext = React.useContext(InputOTPCustomContext)\n const resolvedSize = size ?? rootContext.size ?? \"default\"\n\n return (\n \n {children ?? (\n \n )}\n \n )\n}\n\nexport {\n InputOTP,\n InputOTPGroup,\n InputOTPSlot,\n InputOTPSeparator,\n inputOTPContainerVariants,\n inputOTPGroupVariants,\n inputOTPSlotVariants,\n REGEXP_ONLY_CHARS,\n REGEXP_ONLY_DIGITS,\n REGEXP_ONLY_DIGITS_AND_CHARS,\n}\n", "type": "registry:ui", "target": "components/ui/input-otp.tsx" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "input", "type": "registry:ui", "title": "Input", "description": "Displays a form input field or a component that looks like an input field.", "dependencies": [ "@base-ui/react", "class-variance-authority", "lucide-react" ], "registryDependencies": [ "button-group" ], "files": [ { "path": "ui/input.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Input as InputPrimitive } from \"@base-ui/react/input\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Eye, EyeOff, X } from \"icons\"\nimport { cn } from \"cn\"\n\nimport { useButtonGroupContext } from \"@/components/ui/button-group\"\n\nexport type InputVariant = \"default\" | \"outline\" | \"ghost\"\nexport type InputSize = \"xs\" | \"sm\" | \"default\" | \"lg\"\n\nconst inputVariants = cva(\n \"cn-input w-full min-w-0 border bg-clip-padding outline-none transition-[background-color,color,border-color,box-shadow] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] selection:bg-primary-fill selection:text-primary-on-fill file:inline-flex file:items-center file:border-0 file:bg-transparent file:font-medium file:text-neutral-text placeholder:text-neutral-text-muted disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-danger-fill dark:aria-invalid:border-danger-fill/60 aria-invalid:ring-3 aria-invalid:ring-danger-fill/20 dark:aria-invalid:ring-danger-fill/40\",\n {\n variants: {\n variant: {\n default:\n \"cn-input-variant-default border-transparent bg-neutral-interactive/60 text-neutral-text dark:bg-neutral-interactive/50 hover:bg-neutral-interactive dark:hover:bg-neutral-interactive/80 focus-visible:border-primary-fill focus-visible:bg-neutral-surface dark:focus-visible:bg-neutral-surface-alt focus-visible:ring-3 focus-visible:ring-primary-fill/30\",\n outline:\n \"cn-input-variant-outline border-neutral-interactive bg-neutral-surface text-neutral-text dark:bg-transparent hover:border-neutral-interactive-hover hover:bg-neutral-surface-alt/60 dark:hover:border-neutral-interactive-hover dark:hover:bg-neutral-interactive/30 focus-visible:border-primary-fill focus-visible:bg-neutral-surface dark:focus-visible:bg-transparent focus-visible:ring-3 focus-visible:ring-primary-fill/30\",\n ghost:\n \"cn-input-variant-ghost border-transparent bg-transparent text-neutral-text hover:bg-neutral-interactive/60 dark:hover:bg-neutral-interactive/50 focus-visible:border-primary-fill focus-visible:bg-neutral-surface dark:focus-visible:bg-neutral-surface-alt focus-visible:ring-3 focus-visible:ring-primary-fill/30\",\n },\n size: {\n xs: \"cn-input-size-xs h-6 rounded-md px-2 text-xs file:h-4 file:text-xs\",\n sm: \"cn-input-size-sm h-7 rounded-md px-2.5 text-xs file:h-5 file:text-xs\",\n default:\n \"cn-input-size-default h-8 rounded-lg px-3 text-sm file:h-6 file:text-xs\",\n lg: \"cn-input-size-lg h-9 rounded-lg px-3.5 text-sm file:h-7 file:text-sm\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nconst PASSWORD_PADDING_END: Record = {\n xs: \"pe-7\",\n sm: \"pe-7.5\",\n default: \"pe-8.5\",\n lg: \"pe-9.5\",\n}\n\nconst PASSWORD_TOGGLE_SIZE: Record = {\n xs: \"end-1 size-4.5 rounded-sm [&_svg]:size-3\",\n sm: \"end-1 size-5 rounded-sm [&_svg]:size-3.5\",\n default: \"end-1 size-6 rounded-md [&_svg]:size-4\",\n lg: \"end-1 size-7 rounded-md [&_svg]:size-4\",\n}\n\nconst FILE_WRAPPER_SIZE: Record = {\n xs: \"ps-1 pe-2 gap-1.5\",\n sm: \"ps-1 pe-2.5 gap-2\",\n default: \"ps-1 pe-3 gap-2.5\",\n lg: \"ps-1 pe-3.5 gap-2.5\",\n}\n\nconst FILE_BUTTON_SIZE: Record = {\n xs: \"h-4 rounded-sm px-1.5 text-[11px]\",\n sm: \"h-5 rounded-sm px-2 text-xs\",\n default: \"h-6 rounded-md px-2.5 text-xs\",\n lg: \"h-7 rounded-md px-3 text-xs\",\n}\n\nconst FILE_BUTTON_VARIANT: Record = {\n default:\n \"bg-neutral-surface text-neutral-text shadow-2xs ring-1 ring-neutral-interactive/80 dark:bg-neutral-surface-alt group-hover/input-wrapper:bg-neutral-surface-alt dark:group-hover/input-wrapper:bg-neutral-interactive\",\n outline:\n \"bg-neutral-interactive text-neutral-text group-hover/input-wrapper:bg-neutral-interactive-hover\",\n ghost:\n \"bg-neutral-interactive text-neutral-text group-hover/input-wrapper:bg-neutral-interactive-hover\",\n}\n\nconst FILE_WRAPPER_FOCUS_VARIANT: Record = {\n default:\n \"has-[:focus-visible]:border-primary-fill has-[:focus-visible]:bg-neutral-surface dark:has-[:focus-visible]:bg-neutral-surface-alt has-[:focus-visible]:ring-3 has-[:focus-visible]:ring-primary-fill/30\",\n outline:\n \"has-[:focus-visible]:border-primary-fill has-[:focus-visible]:bg-neutral-surface dark:has-[:focus-visible]:bg-transparent has-[:focus-visible]:ring-3 has-[:focus-visible]:ring-primary-fill/30\",\n ghost:\n \"has-[:focus-visible]:border-primary-fill has-[:focus-visible]:bg-neutral-surface dark:has-[:focus-visible]:bg-neutral-surface-alt has-[:focus-visible]:ring-3 has-[:focus-visible]:ring-primary-fill/30\",\n}\n\nconst WRAPPER_LAYOUT_CLASS_RE =\n /^(?:w-|max-w-|min-w-|flex|grow|shrink|basis-|self-|col-|row-|m[xytrblse]?-|order-)/\n\nexport interface InputProps\n extends Omit, \"size\">,\n VariantProps {\n /**\n * Visual emphasis variant of the input (`default` | `outline` | `ghost`).\n */\n variant?: InputVariant\n /**\n * Proportional height, corner radius, padding, and font size tier (`xs` | `sm` | `default` | `lg`).\n * Matches `Button` dimensions at each corresponding tier.\n */\n size?: InputSize\n /**\n * Native HTML `size` attribute for character width if needed.\n */\n htmlSize?: number\n /**\n * When `type=\"password\"`, displays a trailing button to toggle password visibility.\n * Defaults to `true` for password inputs.\n */\n passwordToggle?: boolean\n /**\n * Alias for `passwordToggle`.\n */\n showPasswordToggle?: boolean\n /**\n * Initial visibility state when `type=\"password\"` and password toggle is enabled.\n */\n defaultPasswordVisible?: boolean\n /**\n * When `type=\"file\"`, customizes the Browse trigger badge label.\n * Pass `null` or `false` to hide the trigger badge.\n * @default \"Browse\"\n */\n browseLabel?: React.ReactNode\n /**\n * When `type=\"file\"`, customizes the status text shown when no file is selected.\n * @default \"No file selected\"\n */\n noFileLabel?: React.ReactNode\n /**\n * When `type=\"file\"`, customizes how a single selected file's label is rendered.\n * Defaults to displaying `file.name`.\n */\n fileSelectedLabel?: (file: File) => React.ReactNode\n /**\n * When `type=\"file\"` and `multiple` files are selected, customizes the summary label.\n * Supports a template string with `{count}` (e.g. `\"{count} files selected\"`) or a render function.\n * @default \"{count} files selected\"\n */\n filesSelectedLabel?:\n | string\n | ((count: number, files: File[]) => React.ReactNode)\n /**\n * When `type=\"file\"`, shows a trailing clear button when one or more files are selected.\n * @default true\n */\n fileClearable?: boolean\n /**\n * Accessible label for the trailing file clear button.\n * @default \"Clear selected files\"\n */\n clearFileLabel?: string\n /**\n * Optional className applied to the outer wrapper when password toggle or file input is rendered.\n */\n wrapperClassName?: string\n /**\n * When `true`, indicates the input is embedded inside an `InputGroup`.\n * Automatically disables independent borders, backgrounds, and outer focus rings\n * so the enclosing `InputGroup` container acts as the single unified visual surface.\n */\n inGroup?: boolean\n}\n\nfunction Input({\n className,\n wrapperClassName,\n type = \"text\",\n variant,\n size,\n htmlSize,\n passwordToggle,\n showPasswordToggle,\n defaultPasswordVisible = false,\n browseLabel = \"Browse\",\n noFileLabel = \"No file selected\",\n fileSelectedLabel,\n filesSelectedLabel = \"{count} files selected\",\n fileClearable = true,\n clearFileLabel = \"Clear selected files\",\n disabled,\n inGroup,\n onChange,\n ref,\n ...props\n}: InputProps) {\n const groupContext = useButtonGroupContext()\n const dataSlotProp = (props as Record)[\"data-slot\"]\n const isInGroup = Boolean(\n inGroup ||\n dataSlotProp === \"input-group-control\" ||\n (typeof className === \"string\" && className.includes(\"cn-input-group-input\"))\n )\n const [ isPasswordVisible, setIsPasswordVisible ] = React.useState(\n defaultPasswordVisible\n )\n const [ selectedFiles, setSelectedFiles ] = React.useState([])\n const fileInputRef = React.useRef(null)\n\n const setMergedFileRef = React.useCallback(\n (node: HTMLInputElement | null) => {\n fileInputRef.current = node\n if (typeof ref === \"function\") {\n ref(node)\n } else if (ref) {\n ;(ref as React.MutableRefObject).current = node\n }\n },\n [ ref ]\n )\n\n const groupVariant: InputVariant | undefined =\n groupContext?.variant === \"outline\"\n ? \"outline\"\n : groupContext?.variant === \"ghost\"\n ? \"ghost\"\n : groupContext?.variant === \"default\" ||\n groupContext?.variant === \"secondary\"\n ? \"default\"\n : undefined\n\n const resolvedVariant: InputVariant = variant ?? groupVariant ?? \"default\"\n\n const resolvedSize: InputSize = size ?? groupContext?.size ?? \"default\"\n const isDisabled = Boolean(disabled || groupContext?.disabled)\n\n const isFileType = type === \"file\"\n const isPasswordType = type === \"password\"\n const hasPasswordToggle =\n isPasswordType && (passwordToggle ?? showPasswordToggle ?? true)\n const effectiveType =\n hasPasswordToggle && isPasswordVisible ? \"text\" : type\n\n if (isFileType) {\n const tokens = (className ?? \"\").split(/\\s+/).filter(Boolean)\n const forwardedWrapperClasses = tokens.filter((t) =>\n WRAPPER_LAYOUT_CLASS_RE.test(t)\n )\n\n const hasFiles = selectedFiles.length > 0\n const showClearButton = fileClearable && hasFiles && !isDisabled\n\n const renderedFileStatus: React.ReactNode = !hasFiles\n ? noFileLabel\n : selectedFiles.length === 1\n ? fileSelectedLabel\n ? fileSelectedLabel(selectedFiles[0])\n : selectedFiles[0].name\n : typeof filesSelectedLabel === \"function\"\n ? filesSelectedLabel(selectedFiles.length, selectedFiles)\n : filesSelectedLabel.replace(\n /\\{count\\}/g,\n String(selectedFiles.length)\n )\n\n const handleFileChange = (event: React.ChangeEvent) => {\n const files = event.target.files ? Array.from(event.target.files) : []\n setSelectedFiles(files)\n onChange?.(event)\n }\n\n const handleClearFiles = (event: React.MouseEvent) => {\n event.preventDefault()\n event.stopPropagation()\n if (fileInputRef.current) {\n fileInputRef.current.value = \"\"\n }\n setSelectedFiles([])\n }\n\n return (\n \n \n {browseLabel !== null && browseLabel !== false && (\n \n {browseLabel}\n \n )}\n \n {renderedFileStatus}\n \n {showClearButton && (\n \n \n \n )}\n \n )\n }\n\n if (!hasPasswordToggle) {\n return (\n \n )\n }\n\n const tokens = (className ?? \"\").split(/\\s+/).filter(Boolean)\n const forwardedWrapperClasses = tokens.filter((t) =>\n WRAPPER_LAYOUT_CLASS_RE.test(t)\n )\n\n return (\n [data-slot=input]]:rounded-[inherit]\",\n forwardedWrapperClasses,\n wrapperClassName\n )}\n >\n \n setIsPasswordVisible((prev) => !prev)}\n className={cn(\n \"cn-input-password-toggle absolute top-1/2 z-10 inline-flex -translate-y-1/2 items-center justify-center text-neutral-text-muted transition-colors duration-150 outline-none select-none cursor-pointer hover:bg-neutral-interactive/80 hover:text-neutral-text active:bg-neutral-interactive-hover focus-visible:ring-2 focus-visible:ring-primary-fill/40 focus-visible:text-neutral-text disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n PASSWORD_TOGGLE_SIZE[resolvedSize]\n )}\n >\n {isPasswordVisible ? (\n \n ) : (\n \n )}\n \n \n )\n}\n\nexport { Input, inputVariants }\n", "type": "registry:ui", "target": "components/ui/input.tsx" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "item", "type": "registry:ui", "title": "Item", "description": "karan-ui item component built with Base UI.", "dependencies": [ "@base-ui/react", "class-variance-authority" ], "registryDependencies": [ "separator" ], "files": [ { "path": "ui/item.tsx", "content": "import * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"cn\"\n\nimport { Separator } from \"@/components/ui/separator\"\n\nfunction ItemGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction ItemSeparator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nconst itemVariants = cva(\n \"cn-item group/item flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:border-primary-fill focus-visible:ring-[3px] focus-visible:ring-primary-fill/50 [a]:transition-colors\",\n {\n variants: {\n variant: {\n default: \"cn-item-variant-default\",\n outline: \"cn-item-variant-outline\",\n muted: \"cn-item-variant-muted\",\n },\n size: {\n default: \"cn-item-size-default\",\n sm: \"cn-item-size-sm\",\n xs: \"cn-item-size-xs\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nfunction Item({\n className,\n variant = \"default\",\n size = \"default\",\n render,\n ...props\n}: useRender.ComponentProps<\"div\"> & VariantProps) {\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(\n {\n className: cn(itemVariants({ variant, size, className })),\n },\n props\n ),\n render,\n state: {\n slot: \"item\",\n variant,\n size,\n },\n })\n}\n\nconst itemMediaVariants = cva(\n \"cn-item-media flex shrink-0 items-center justify-center [&_svg]:pointer-events-none\",\n {\n variants: {\n variant: {\n default: \"cn-item-media-variant-default\",\n icon: \"cn-item-media-variant-icon\",\n image: \"cn-item-media-variant-image\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nfunction ItemMedia({\n className,\n variant = \"default\",\n ...props\n}: React.ComponentProps<\"div\"> & VariantProps) {\n return (\n \n )\n}\n\nfunction ItemContent({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction ItemTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction ItemDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n return (\n a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction ItemActions({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction ItemHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction ItemFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nexport {\n Item,\n ItemMedia,\n ItemContent,\n ItemActions,\n ItemGroup,\n ItemSeparator,\n ItemTitle,\n ItemDescription,\n ItemHeader,\n ItemFooter,\n}\n", "type": "registry:ui", "target": "components/ui/item.tsx" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "kbd", "type": "registry:ui", "title": "Kbd", "description": "karan-ui kbd component built with Base UI.", "dependencies": [ "class-variance-authority" ], "registryDependencies": [], "files": [ { "path": "ui/kbd.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"cn\"\n\nexport type KbdVariant = \"subtle\" | \"ghost\" | \"solid\"\nexport type KbdSize = \"xs\" | \"sm\" | \"default\" | \"lg\"\n\ninterface KbdGroupContextProps {\n size?: KbdSize\n variant?: KbdVariant\n}\n\nconst KbdGroupContext = React.createContext({})\n\nconst kbdVariants = cva(\n \"cn-kbd pointer-events-none inline-flex items-center justify-center select-none font-sans tracking-normal font-medium transition-colors\",\n {\n variants: {\n variant: {\n subtle: \"border border-neutral-interactive/80 bg-neutral-surface-alt dark:bg-neutral-surface-alt/70 text-neutral-text shadow-2xs\",\n ghost: \"border-transparent bg-transparent text-neutral-text-muted shadow-none min-w-0 px-0.5\",\n solid: \"border border-transparent bg-neutral-interactive text-neutral-text\",\n },\n size: {\n xs: \"h-4 min-w-4 px-1 text-[10px] rounded-xs [&_svg]:size-2.5\",\n sm: \"h-4.5 min-w-4.5 px-1.5 text-[11px] rounded-sm [&_svg]:size-3\",\n default: \"h-5 min-w-5 px-1.5 text-xs rounded-md [&_svg]:size-3\",\n lg: \"h-6 min-w-6 px-2 text-sm rounded-lg [&_svg]:size-3.5\",\n },\n },\n defaultVariants: {\n variant: \"subtle\",\n size: \"default\",\n },\n }\n)\n\nexport interface KbdProps\n extends Omit, \"size\">,\n VariantProps {\n /**\n * Visual style variant (`subtle` elevated card | `ghost` borderless & backgroundless | `solid` filled).\n * @default \"subtle\"\n */\n variant?: KbdVariant\n /**\n * Density and size scale (`xs` | `sm` | `default` | `lg`).\n * @default \"default\"\n */\n size?: KbdSize\n}\n\nfunction Kbd({\n className,\n variant: propVariant,\n size: propSize,\n ...props\n}: KbdProps) {\n const group = React.useContext(KbdGroupContext)\n const variant = propVariant ?? group.variant ?? \"subtle\"\n const size = propSize ?? group.size ?? \"default\"\n\n return (\n \n )\n}\n\nexport interface KbdGroupProps extends Omit, \"size\"> {\n /**\n * Cascading visual style variant applied to all nested keycaps.\n * @default \"subtle\"\n */\n variant?: KbdVariant\n /**\n * Cascading size scale applied to all nested keycaps.\n * @default \"default\"\n */\n size?: KbdSize\n /**\n * Optional separator rendered between keycaps (e.g. \"+\" or \"then\").\n */\n separator?: React.ReactNode\n /**\n * When true, joins keycaps with normalized rounded corners and border collapse.\n * @default false\n */\n attached?: boolean\n}\n\nfunction KbdGroup({\n className,\n variant = \"subtle\",\n size = \"default\",\n separator,\n attached = false,\n children,\n ...props\n}: KbdGroupProps) {\n const items = React.Children.toArray(children)\n\n return (\n [data-slot=kbd]]:rounded-none [&>[data-slot=kbd]:first-child]:rounded-s-md [&>[data-slot=kbd]:last-child]:rounded-e-md [&>[data-slot=kbd]:not(:first-child)]:-ms-px\"\n : variant === \"ghost\"\n ? \"gap-0\"\n : \"gap-1 has-data-[variant=ghost]:gap-0\",\n className\n )}\n {...props}\n >\n \n {separator && !attached\n ? items.map((child, idx) => (\n \n {idx > 0 && (\n \n {separator}\n \n )}\n {child}\n \n ))\n : children}\n \n \n )\n}\n\nexport { Kbd, KbdGroup, kbdVariants }\n", "type": "registry:ui", "target": "components/ui/kbd.tsx" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "label", "type": "registry:ui", "title": "Label", "description": "karan-ui label component built with Base UI.", "dependencies": [ "class-variance-authority" ], "registryDependencies": [], "files": [ { "path": "ui/label.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"cn\"\n\nexport type LabelSize = \"xs\" | \"sm\" | \"default\" | \"lg\"\nexport type LabelIntent = \"neutral\" | \"primary\" | \"danger\" | \"success\" | \"warning\"\n\nconst labelVariants = cva(\n \"cn-label inline-flex items-center select-none font-medium transition-colors data-disabled:cursor-not-allowed data-disabled:opacity-50 data-disabled:pointer-events-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50\",\n {\n variants: {\n size: {\n xs: \"text-xs leading-none\",\n sm: \"text-xs leading-none font-medium\",\n default: \"text-sm leading-none font-medium\",\n lg: \"text-base leading-none font-medium\",\n },\n intent: {\n neutral: \"text-neutral-text\",\n primary: \"text-primary-text\",\n danger: \"text-danger-text\",\n success: \"text-success-text\",\n warning: \"text-warning-text\",\n },\n },\n defaultVariants: {\n size: \"default\",\n intent: \"neutral\",\n },\n }\n)\n\nexport interface LabelProps\n extends React.ComponentProps<\"label\">,\n VariantProps {\n /**\n * Density and typography scale (`xs` | `sm` | `default` | `lg`).\n * @default \"default\"\n */\n size?: LabelSize\n /**\n * Semantic intent for the label text (`neutral` | `primary` | `danger` | `success` | `warning`).\n * @default \"neutral\"\n */\n intent?: LabelIntent\n /**\n * Appends an accessible red asterisk indicator (*) representing a required field.\n * Styled as a solid step with font-medium inline baseline alignment.\n * @default false\n */\n required?: boolean\n /**\n * Appends an optional indicator suffix to clarify non-mandatory inputs.\n * Pass `true` for the default `(optional)` text, or provide custom text / ReactNode (e.g. `optional=\"Optional\"` or `optional=\"(اختیاری)\"`).\n * @default false\n */\n optional?: boolean | React.ReactNode\n /**\n * Whether the label is visually and interactively disabled.\n * @default false\n */\n disabled?: boolean\n /**\n * Leading icon element rendered before the label text.\n */\n leading?: React.ReactNode\n /**\n * Multiline supporting text rendered directly below the label.\n */\n subText?: React.ReactNode\n}\n\nfunction Label({\n className,\n size = \"default\",\n intent = \"neutral\",\n required = false,\n optional = false,\n disabled = false,\n leading,\n subText,\n children,\n ...props\n}: LabelProps) {\n const optionalContent = typeof optional === \"boolean\" ? (optional ? \"(optional)\" : null) : optional\n\n const labelCore = (\n \n {leading && (\n \n {leading}\n \n )}\n {children}\n {required && (\n \n *\n \n )}\n {optionalContent && (\n \n {optionalContent}\n \n )}\n \n )\n\n if (subText) {\n return (\n \n {labelCore}\n \n {subText}\n \n \n )\n }\n\n return (\n \n {labelCore}\n \n )\n}\n\nexport { Label, labelVariants }\n", "type": "registry:ui", "target": "components/ui/label.tsx" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "menubar", "type": "registry:ui", "title": "Menubar", "description": "A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.", "dependencies": [ "@base-ui/react", "class-variance-authority" ], "registryDependencies": [ "dropdown-menu" ], "files": [ { "path": "ui/menubar.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menubar as MenubarPrimitive } from \"@base-ui/react/menubar\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"cn\"\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuCheckboxItem,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuLabel,\n DropdownMenuPortal,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuTrigger,\n type DropdownMenuSize,\n} from \"@/components/ui/dropdown-menu\"\n\nexport type MenubarSize = DropdownMenuSize\n\ninterface MenubarContextProps {\n size: MenubarSize\n hasIcons?: boolean\n}\n\nconst MenubarContext = React.createContext({\n size: \"default\",\n hasIcons: false,\n})\n\nconst menubarVariants = cva(\n \"cn-menubar flex items-center gap-1 border border-neutral-interactive/80 bg-neutral-surface-alt/60 p-1 shadow-2xs\",\n {\n variants: {\n size: {\n sm: \"h-8 rounded-lg text-xs\",\n default: \"h-9 rounded-xl text-sm\",\n lg: \"h-10 rounded-xl text-base\",\n },\n },\n defaultVariants: {\n size: \"default\",\n },\n }\n)\n\nexport interface MenubarProps\n extends MenubarPrimitive.Props,\n VariantProps {\n size?: MenubarSize\n hasIcons?: boolean\n}\n\nfunction Menubar({\n className,\n size = \"default\",\n hasIcons = false,\n ...props\n}: MenubarProps) {\n return (\n \n \n \n )\n}\n\nfunction MenubarMenu({ ...props }: React.ComponentProps) {\n return \n}\n\nfunction MenubarGroup({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction MenubarPortal({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction MenubarTrigger({\n className,\n ...props\n}: React.ComponentProps) {\n const { size } = React.useContext(MenubarContext)\n\n return (\n \n )\n}\n\nfunction MenubarContent({\n className,\n align = \"start\",\n alignOffset = -4,\n sideOffset = 8,\n size: customSize,\n hasIcons: customHasIcons,\n ...props\n}: React.ComponentProps) {\n const { size, hasIcons: contextHasIcons } = React.useContext(MenubarContext)\n const resolvedSize = customSize ?? size\n const resolvedHasIcons = customHasIcons ?? contextHasIcons\n\n return (\n \n )\n}\n\nfunction MenubarItem({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction MenubarCheckboxItem({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction MenubarRadioGroup({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction MenubarRadioItem({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction MenubarLabel({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction MenubarSeparator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction MenubarShortcut({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction MenubarSub({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction MenubarSubTrigger({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction MenubarSubContent({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nexport {\n Menubar,\n MenubarPortal,\n MenubarMenu,\n MenubarTrigger,\n MenubarContent,\n MenubarGroup,\n MenubarSeparator,\n MenubarLabel,\n MenubarItem,\n MenubarShortcut,\n MenubarCheckboxItem,\n MenubarRadioGroup,\n MenubarRadioItem,\n MenubarSub,\n MenubarSubTrigger,\n MenubarSubContent,\n menubarVariants,\n}\n", "type": "registry:ui", "target": "components/ui/menubar.tsx" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "navigation-menu", "type": "registry:ui", "title": "Navigation Menu", "description": "A collection of links for navigating websites.", "dependencies": [ "@base-ui/react", "class-variance-authority", "lucide-react" ], "registryDependencies": [], "files": [ { "path": "ui/navigation-menu.tsx", "content": "import { NavigationMenu as NavigationMenuPrimitive } from \"@base-ui/react/navigation-menu\"\nimport { cva } from \"class-variance-authority\"\nimport { cn } from \"cn\"\n\nimport { ChevronDown } from \"lucide-react\"\n\nfunction NavigationMenu({\n align = \"start\",\n className,\n children,\n ...props\n}: NavigationMenuPrimitive.Root.Props &\n Pick) {\n return (\n \n {children}\n \n \n )\n}\n\nfunction NavigationMenuList({\n className,\n ...props\n}: React.ComponentPropsWithRef) {\n return (\n \n )\n}\n\nfunction NavigationMenuItem({\n className,\n ...props\n}: React.ComponentPropsWithRef) {\n return (\n \n )\n}\n\nconst navigationMenuTriggerStyle = cva(\n \"cn-navigation-menu-trigger group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center outline-none disabled:pointer-events-none\"\n)\n\nfunction NavigationMenuTrigger({\n className,\n children,\n ...props\n}: NavigationMenuPrimitive.Trigger.Props) {\n return (\n \n {children}{\" \"}\n \n \n )\n}\n\nfunction NavigationMenuContent({\n className,\n ...props\n}: NavigationMenuPrimitive.Content.Props) {\n return (\n \n )\n}\n\nfunction NavigationMenuPositioner({\n className,\n side = \"bottom\",\n sideOffset = 8,\n align = \"start\",\n alignOffset = 0,\n ...props\n}: NavigationMenuPrimitive.Positioner.Props) {\n return (\n \n \n \n \n \n \n \n )\n}\n\nfunction NavigationMenuLink({\n className,\n ...props\n}: NavigationMenuPrimitive.Link.Props) {\n return (\n \n )\n}\n\nfunction NavigationMenuIndicator({\n className,\n ...props\n}: React.ComponentPropsWithRef) {\n return (\n \n
\n \n )\n}\n\nexport {\n NavigationMenu,\n NavigationMenuContent,\n NavigationMenuIndicator,\n NavigationMenuItem,\n NavigationMenuLink,\n NavigationMenuList,\n NavigationMenuTrigger,\n navigationMenuTriggerStyle,\n NavigationMenuPositioner,\n}\n", "type": "registry:ui", "target": "components/ui/navigation-menu.tsx" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "pagination", "type": "registry:ui", "title": "Pagination", "description": "Pagination with page navigation, next and previous links.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "button" ], "files": [ { "path": "ui/pagination.tsx", "content": "import * as React from \"react\"\nimport { cn } from \"cn\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { ChevronLeft, ChevronRight, MoreHorizontal } from \"lucide-react\"\n\nexport type PaginationSize = \"xs\" | \"sm\" | \"default\" | \"lg\"\ntype ButtonSize = React.ComponentProps[\"size\"]\n\nexport type PageFormatter = (page: number) => React.ReactNode\n\nexport interface PaginationContextProps {\n size: PaginationSize\n previousLabel?: React.ReactNode\n nextLabel?: React.ReactNode\n ellipsisLabel?: string\n locale?: string\n formatPage?: PageFormatter\n}\n\nconst PaginationContext = React.createContext({\n size: \"default\",\n})\n\nexport interface PaginationProps extends React.ComponentProps<\"nav\"> {\n /**\n * Sizing scale for pagination buttons, links, and icons (`xs` | `sm` | `default` | `lg`).\n * @default \"default\"\n */\n size?: PaginationSize\n /**\n * Default label for the Previous button. Cascades down to PaginationPrevious.\n * @default \"Previous\"\n */\n previousLabel?: React.ReactNode\n /**\n * Default label for the Next button. Cascades down to PaginationNext.\n * @default \"Next\"\n */\n nextLabel?: React.ReactNode\n /**\n * Default screen-reader text for PaginationEllipsis. Cascades to PaginationEllipsis.\n * @default \"More pages\"\n */\n ellipsisLabel?: string\n /**\n * BCP 47 language tag (e.g. `fa-IR`, `ar-EG`, `en-US`) for localized page number formatting via Intl.NumberFormat.\n */\n locale?: string\n /**\n * Custom formatter function for page numbers (e.g. `(p) => \\`P.\\${p}\\`` or Roman numerals).\n */\n formatPage?: PageFormatter\n}\n\nfunction Pagination({\n className,\n size = \"default\",\n previousLabel,\n nextLabel,\n ellipsisLabel,\n locale,\n formatPage,\n ...props\n}: PaginationProps) {\n return (\n \n \n \n )\n}\n\nfunction PaginationContent({\n className,\n ...props\n}: React.ComponentProps<\"ul\">) {\n return (\n \n )\n}\n\nfunction PaginationItem({ ...props }: React.ComponentProps<\"li\">) {\n return
  • \n}\n\nexport type PaginationLinkProps = {\n isActive?: boolean\n size?: ButtonSize\n page?: number\n formatPage?: PageFormatter\n disabled?: boolean\n} & React.ComponentProps<\"a\">\n\nfunction resolveButtonIconSize(size: PaginationSize): ButtonSize {\n if (size === \"xs\") return \"icon-xs\"\n if (size === \"sm\") return \"icon-sm\"\n if (size === \"lg\") return \"icon-lg\"\n return \"icon\"\n}\n\nfunction PaginationLink({\n className,\n isActive,\n size: customSize,\n page,\n formatPage: customFormatPage,\n disabled,\n children,\n ...props\n}: PaginationLinkProps) {\n const context = React.useContext(PaginationContext)\n const size = context.size\n const resolvedSize = customSize ?? resolveButtonIconSize(size)\n\n // Resolve numeric page: explicit page prop > numeric children > numeric string children\n const numericPage =\n page ??\n (typeof children === \"number\"\n ? children\n : typeof children === \"string\" && /^\\d+$/.test(children.trim())\n ? parseInt(children.trim(), 10)\n : undefined)\n\n // Resolve formatter priority: customFormatPage > context.formatPage > context.locale\n const formatter =\n customFormatPage ??\n context.formatPage ??\n (context.locale\n ? (p: number) => {\n try {\n return new Intl.NumberFormat(context.locale).format(p)\n } catch {\n return String(p)\n }\n }\n : undefined)\n\n const renderedContent =\n numericPage !== undefined && formatter\n ? formatter(numericPage)\n : (children ?? (numericPage !== undefined ? String(numericPage) : null))\n\n const defaultAriaLabel =\n numericPage !== undefined ? `Page ${numericPage}` : undefined\n\n return (\n {\n e.preventDefault()\n }\n : props.onClick\n }\n />\n }\n >\n {renderedContent}\n \n )\n}\n\nexport interface PaginationPreviousProps\n extends Omit, \"size\"> {\n text?: React.ReactNode\n label?: React.ReactNode\n size?: ButtonSize\n icon?: React.ReactNode\n showIcon?: boolean\n showLabel?: boolean\n}\n\nfunction PaginationPrevious({\n className,\n text,\n label,\n children,\n size: customSize,\n icon,\n showIcon = true,\n showLabel,\n disabled,\n ...props\n}: PaginationPreviousProps) {\n const context = React.useContext(PaginationContext)\n const size = context.size\n\n const resolvedLabel =\n children ?? label ?? text ?? context.previousLabel ?? \"Previous\"\n const isLabelVisible =\n showLabel !== false && resolvedLabel !== null && resolvedLabel !== \"\"\n const isIconOnly = !isLabelVisible && showIcon\n\n const resolvedSize =\n customSize ?? (isIconOnly ? resolveButtonIconSize(size) : size)\n\n const defaultAriaLabel =\n typeof resolvedLabel === \"string\" ? resolvedLabel : \"Go to previous page\"\n\n return (\n {\n e.preventDefault()\n }\n : props.onClick\n }\n />\n }\n >\n {showIcon &&\n (icon ?? (\n \n ))}\n {isLabelVisible ? (\n \n ) : null}\n \n )\n}\n\nexport interface PaginationNextProps\n extends Omit, \"size\"> {\n text?: React.ReactNode\n label?: React.ReactNode\n size?: ButtonSize\n icon?: React.ReactNode\n showIcon?: boolean\n showLabel?: boolean\n}\n\nfunction PaginationNext({\n className,\n text,\n label,\n children,\n size: customSize,\n icon,\n showIcon = true,\n showLabel,\n disabled,\n ...props\n}: PaginationNextProps) {\n const context = React.useContext(PaginationContext)\n const size = context.size\n\n const resolvedLabel =\n children ?? label ?? text ?? context.nextLabel ?? \"Next\"\n const isLabelVisible =\n showLabel !== false && resolvedLabel !== null && resolvedLabel !== \"\"\n const isIconOnly = !isLabelVisible && showIcon\n\n const resolvedSize =\n customSize ?? (isIconOnly ? resolveButtonIconSize(size) : size)\n\n const defaultAriaLabel =\n typeof resolvedLabel === \"string\" ? resolvedLabel : \"Go to next page\"\n\n return (\n {\n e.preventDefault()\n }\n : props.onClick\n }\n />\n }\n >\n {isLabelVisible ? (\n \n ) : null}\n {showIcon &&\n (icon ?? (\n \n ))}\n \n )\n}\n\nexport interface PaginationEllipsisProps\n extends React.ComponentProps<\"span\"> {\n label?: string\n srText?: string\n}\n\nfunction PaginationEllipsis({\n className,\n label,\n srText,\n ...props\n}: PaginationEllipsisProps) {\n const context = React.useContext(PaginationContext)\n const size = context.size\n const resolvedSrText =\n srText ?? label ?? context.ellipsisLabel ?? \"More pages\"\n\n return (\n svg]:size-3\",\n size === \"sm\" && \"size-7 text-xs [&>svg]:size-3.5\",\n size === \"default\" && \"size-8 text-sm [&>svg]:size-4\",\n size === \"lg\" && \"size-9 text-base [&>svg]:size-4.5\",\n className\n )}\n {...props}\n >\n \n {resolvedSrText}\n \n )\n}\n\nexport {\n Pagination,\n PaginationContent,\n PaginationEllipsis,\n PaginationItem,\n PaginationLink,\n PaginationNext,\n PaginationPrevious,\n}\n", "type": "registry:ui", "target": "components/ui/pagination.tsx" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "popover", "type": "registry:ui", "title": "Popover", "description": "An anchored floating content card with collision detection, arrow pointer, and default vs inverted surface contrast.", "dependencies": [ "@base-ui/react", "class-variance-authority" ], "registryDependencies": [], "files": [ { "path": "ui/popover.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Popover as PopoverPrimitive } from \"@base-ui/react/popover\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"cn\"\n\nexport type PopoverSize = \"sm\" | \"default\" | \"lg\"\n\nconst popoverContentVariants = cva(\n \"cn-popover-content relative z-50 origin-(--transform-origin) rounded-xl border border-neutral-interactive/80 bg-neutral-surface text-neutral-text shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 duration-150 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0\",\n {\n variants: {\n size: {\n sm: \"w-64 p-3 text-xs\",\n default: \"w-72 sm:w-80 p-4 text-sm\",\n lg: \"w-80 sm:w-96 p-5 text-sm\",\n },\n },\n defaultVariants: {\n size: \"default\",\n },\n }\n)\n\nfunction Popover({ ...props }: PopoverPrimitive.Root.Props) {\n return \n}\n\nfunction PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {\n return \n}\n\nfunction PopoverClose({ ...props }: PopoverPrimitive.Close.Props) {\n return \n}\n\nexport interface PopoverContentProps\n extends Omit,\n Pick<\n PopoverPrimitive.Positioner.Props,\n \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n >,\n VariantProps {\n className?: string\n /**\n * Size scale for popover width and internal padding (`sm` | `default` | `lg`).\n * @default \"default\"\n */\n size?: PopoverSize\n /**\n * When true, renders an aligned arrow pointing to the anchor element.\n * @default false\n */\n withArrow?: boolean\n}\n\nfunction PopoverContent({\n className,\n align = \"center\",\n alignOffset = 0,\n side = \"bottom\",\n sideOffset = 8,\n size = \"default\",\n withArrow = false,\n children,\n ...props\n}: PopoverContentProps) {\n return (\n \n \n \n {children}\n {withArrow && (\n \n )}\n \n \n \n )\n}\n\nfunction PopoverHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {\n return (\n \n )\n}\n\nfunction PopoverDescription({\n className,\n ...props\n}: PopoverPrimitive.Description.Props) {\n return (\n \n )\n}\n\nexport {\n Popover,\n PopoverContent,\n PopoverDescription,\n PopoverHeader,\n PopoverTitle,\n PopoverTrigger,\n PopoverClose,\n popoverContentVariants,\n}\n", "type": "registry:ui", "target": "components/ui/popover.tsx" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "progress", "type": "registry:ui", "title": "Progress", "description": "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.", "dependencies": [ "@base-ui/react", "class-variance-authority" ], "registryDependencies": [], "files": [ { "path": "ui/progress.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { createPortal } from \"react-dom\"\nimport { Progress as ProgressPrimitive } from \"@base-ui/react/progress\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"cn\"\n\nconst progressVariants = cva(\"cn-progress-root flex flex-wrap gap-2 w-full\", {\n variants: {\n size: {\n sm: \"text-xs\",\n default: \"text-sm\",\n lg: \"text-base\",\n },\n },\n defaultVariants: {\n size: \"default\",\n },\n})\n\nconst progressTrackVariants = cva(\n \"cn-progress-track relative flex w-full items-center bg-neutral-interactive rounded-full\",\n {\n variants: {\n size: {\n sm: \"h-1.5\",\n default: \"h-2.5\",\n lg: \"h-4\",\n },\n },\n defaultVariants: {\n size: \"default\",\n },\n }\n)\n\nconst progressIndicatorVariants = cva(\n \"cn-progress-indicator h-full rounded-full transition-all duration-300\",\n {\n variants: {\n intent: {\n primary: \"bg-primary-fill\",\n neutral: \"bg-neutral-text\",\n success: \"bg-success-fill\",\n warning: \"bg-warning-fill\",\n danger: \"bg-danger-fill\",\n info: \"bg-info-fill\",\n },\n indeterminateStyle: {\n default:\n \"data-indeterminate:w-1/3! data-indeterminate:animate-[progress-indeterminate_1.5s_infinite_ease-in-out]\",\n pulse:\n \"data-indeterminate:w-full! data-indeterminate:animate-[progress-progressing-pulse_1.2s_infinite_ease-in-out]\",\n striped:\n \"data-indeterminate:w-full! data-indeterminate:bg-[linear-gradient(45deg,rgba(255,255,255,0.25)_25%,transparent_25%,transparent_50%,rgba(255,255,255,0.25)_50%,rgba(255,255,255,0.25)_75%,transparent_75%,transparent)] data-indeterminate:bg-[length:1rem_1rem] data-indeterminate:animate-[progress-progressing-stripe_1s_linear_infinite]\",\n },\n progressingStyle: {\n default: \"data-progressing:transition-all\",\n pulse:\n \"data-progressing:animate-[progress-progressing-pulse_1.5s_infinite_ease-in-out]\",\n striped:\n \"data-progressing:bg-[linear-gradient(45deg,rgba(255,255,255,0.25)_25%,transparent_25%,transparent_50%,rgba(255,255,255,0.25)_50%,rgba(255,255,255,0.25)_75%,transparent_75%,transparent)] data-progressing:bg-[length:1rem_1rem] data-progressing:animate-[progress-progressing-stripe_1s_linear_infinite]\",\n },\n },\n defaultVariants: {\n intent: \"primary\",\n indeterminateStyle: \"default\",\n progressingStyle: \"default\",\n },\n }\n)\n\nexport interface ProgressProps\n extends Omit,\n VariantProps,\n Pick<\n VariantProps,\n \"intent\" | \"indeterminateStyle\" | \"progressingStyle\"\n > {\n /**\n * Optional container ID to render the progress bar docked at the top edge of that specific element.\n * If `top` is true and `targetId` is omitted, it renders fixed at the very top of the window / document.body.\n */\n targetId?: string\n /**\n * Convenience flag to render the progress bar docked at the top edge of the target element (or window/body if targetId is omitted).\n * Sets absolute/fixed positioning, flush edge alignment, z-index 50, and seamless corners.\n */\n top?: boolean\n}\n\nfunction Progress({\n className,\n children,\n value = null,\n size = \"default\",\n intent = \"primary\",\n indeterminateStyle = \"default\",\n progressingStyle = \"default\",\n top = false,\n targetId,\n ...props\n}: ProgressProps) {\n const [mounted, setMounted] = React.useState(false)\n\n React.useEffect(() => {\n setMounted(true)\n }, [])\n\n // If top is requested or targetId is explicitly provided, render as an elevated top bar\n const isTopBar = top || Boolean(targetId)\n\n const progressElement = (\n \n {children}\n \n \n \n \n )\n\n if (isTopBar && mounted) {\n if (targetId) {\n const container = document.getElementById(targetId)\n if (container) {\n // Ensure container has relative positioning so absolute top-0 anchors correctly\n if (window.getComputedStyle(container).position === \"static\") {\n container.style.position = \"relative\"\n }\n return createPortal(progressElement, container)\n }\n }\n return createPortal(progressElement, document.body)\n }\n\n return progressElement\n}\n\nexport interface ProgressTrackProps\n extends ProgressPrimitive.Track.Props,\n VariantProps {}\n\nfunction ProgressTrack({ className, size, ...props }: ProgressTrackProps) {\n return (\n \n )\n}\n\nexport interface ProgressIndicatorProps\n extends ProgressPrimitive.Indicator.Props,\n VariantProps {}\n\nfunction ProgressIndicator({\n className,\n intent,\n indeterminateStyle,\n progressingStyle,\n ...props\n}: ProgressIndicatorProps) {\n return (\n \n )\n}\n\nfunction ProgressLabel({ className, ...props }: ProgressPrimitive.Label.Props) {\n return (\n \n )\n}\n\nfunction ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props) {\n return (\n \n )\n}\n\nexport {\n Progress,\n ProgressTrack,\n ProgressIndicator,\n ProgressLabel,\n ProgressValue,\n progressVariants,\n progressTrackVariants,\n progressIndicatorVariants,\n}\n", "type": "registry:ui", "target": "components/ui/progress.tsx" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "radio-group", "type": "registry:ui", "title": "Radio Group", "description": "A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.", "dependencies": [ "@base-ui/react" ], "registryDependencies": [], "files": [ { "path": "ui/radio-group.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Radio as RadioPrimitive } from \"@base-ui/react/radio\"\nimport { RadioGroup as RadioGroupPrimitive } from \"@base-ui/react/radio-group\"\nimport { cn } from \"cn\"\n\nexport interface RadioGroupProps extends RadioGroupPrimitive.Props {\n orientation?: \"vertical\" | \"horizontal\"\n}\n\nfunction RadioGroup({\n className,\n orientation = \"vertical\",\n ...props\n}: RadioGroupProps) {\n return (\n \n )\n}\n\nexport type RadioGroupIndicatorProps = RadioPrimitive.Indicator.Props\n\nfunction RadioGroupIndicator({\n className,\n children,\n keepMounted = true,\n ...props\n}: RadioGroupIndicatorProps) {\n return (\n \n \n {children ?? (\n \n )}\n \n \n )\n}\n\nexport type RadioGroupItemProps = RadioPrimitive.Root.Props\n\nfunction RadioGroupItem({\n className,\n children,\n ...props\n}: RadioGroupItemProps) {\n const hasCustomChildren =\n children !== undefined &&\n children !== null &&\n children !== false &&\n React.Children.count(children) > 0\n\n return (\n \n {hasCustomChildren ? (\n children\n ) : (\n \n \n \n )}\n \n )\n}\n\nexport { RadioGroup, RadioGroupItem, RadioGroupIndicator }\n\n", "type": "registry:ui", "target": "components/ui/radio-group.tsx" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "resizable", "type": "registry:ui", "title": "Resizable", "description": "Accessible resizable panel groups and layouts with keyboard support.", "dependencies": [ "react-resizable-panels" ], "registryDependencies": [], "files": [ { "path": "ui/resizable.tsx", "content": "\"use client\"\n\nimport { cn } from \"cn\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nfunction ResizablePanelGroup({\n className,\n ...props\n}: ResizablePrimitive.GroupProps) {\n return (\n \n )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n return \n}\n\nfunction ResizableHandle({\n withHandle,\n className,\n ...props\n}: ResizablePrimitive.SeparatorProps & {\n withHandle?: boolean\n}) {\n return (\n div]:rotate-90\",\n className\n )}\n {...props}\n >\n {withHandle && (\n
    \n )}\n \n )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n", "type": "registry:ui", "target": "components/ui/resizable.tsx" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "scroll-area", "type": "registry:ui", "title": "Scroll Area", "description": "Augments native scroll functionality for custom, cross-browser styling.", "dependencies": [ "@base-ui/react" ], "registryDependencies": [], "files": [ { "path": "ui/scroll-area.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ScrollArea as ScrollAreaPrimitive } from \"@base-ui/react/scroll-area\"\nimport { cn } from \"cn\"\n\nfunction ScrollArea({\n className,\n children,\n ...props\n}: ScrollAreaPrimitive.Root.Props) {\n return (\n \n \n {children}\n \n \n \n \n )\n}\n\nfunction ScrollBar({\n className,\n orientation = \"vertical\",\n ...props\n}: ScrollAreaPrimitive.Scrollbar.Props) {\n return (\n \n \n \n )\n}\n\nexport { ScrollArea, ScrollBar }\n", "type": "registry:ui", "target": "components/ui/scroll-area.tsx" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "select", "type": "registry:ui", "title": "Select", "description": "Displays a list of options for the user to pick from—triggered by a button.", "dependencies": [ "@base-ui/react", "class-variance-authority", "lucide-react" ], "registryDependencies": [ "button-group" ], "files": [ { "path": "ui/select.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Check, ChevronDown, ChevronsUpDown, ChevronUp } from \"icons\"\nimport { cn } from \"cn\"\n\nimport { useButtonGroupContext } from \"@/components/ui/button-group\"\n\nexport type SelectSize = \"xs\" | \"sm\" | \"default\" | \"lg\"\n\nconst selectTriggerVariants = cva(\n \"cn-select-trigger group/select-trigger inline-flex w-fit items-center justify-between whitespace-nowrap border border-neutral-interactive bg-neutral-surface text-neutral-text dark:bg-transparent hover:border-neutral-interactive-hover hover:bg-neutral-interactive dark:hover:bg-neutral-interactive active:bg-neutral-interactive-hover data-popup-open:border-neutral-interactive-hover data-popup-open:bg-neutral-interactive bg-clip-padding font-medium outline-none select-none transition-[background-color,color,border-color,box-shadow] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] data-placeholder:text-neutral-text-muted data-placeholder:font-normal focus-visible:border-primary-fill focus-visible:ring-3 focus-visible:ring-primary-fill/30 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50 aria-invalid:border-danger-fill dark:aria-invalid:border-danger-fill/60 aria-invalid:ring-3 aria-invalid:ring-danger-fill/20 dark:aria-invalid:ring-danger-fill/40 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:truncate [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n {\n variants: {\n size: {\n xs: \"cn-select-trigger-size-xs h-6 gap-1 rounded-md px-2 text-xs *:data-[slot=select-value]:gap-1 [&_svg:not([class*='size-'])]:size-3\",\n sm: \"cn-select-trigger-size-sm h-7 gap-1.5 rounded-md px-2.5 text-xs *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n default:\n \"cn-select-trigger-size-default h-8 gap-1.5 rounded-lg px-3 text-sm *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4\",\n lg: \"cn-select-trigger-size-lg h-9 gap-2 rounded-lg px-3.5 text-sm *:data-[slot=select-value]:gap-2 [&_svg:not([class*='size-'])]:size-4\",\n },\n },\n defaultVariants: {\n size: \"default\",\n },\n }\n)\n\ninterface SelectContextValue {\n size?: SelectSize\n alignWithItem?: boolean\n placeholder?: React.ReactNode\n disabled?: boolean\n}\n\nconst SelectContext = React.createContext(null)\n\nfunction useSelectContext() {\n return React.useContext(SelectContext)\n}\n\nconst SelectGroupPresentContext = React.createContext(false)\n\nfunction extractItemsFromChildren(\n children: React.ReactNode,\n acc: Record = {}\n): Record {\n React.Children.forEach(children, (child) => {\n if (!React.isValidElement(child)) return\n const childProps = child.props as Record\n if (\n childProps &&\n \"value\" in childProps &&\n childProps.value !== undefined &&\n childProps.value !== null &&\n (child.type === SelectItem ||\n (child.type as any)?.displayName === \"SelectItem\" ||\n childProps[\"data-slot\"] === \"select-item\")\n ) {\n const key = String(childProps.value)\n acc[key] = childProps.label ?? childProps.children\n return\n }\n if (childProps?.children) {\n extractItemsFromChildren(childProps.children, acc)\n }\n })\n return acc\n}\n\nexport interface SelectProps<\n Value = any,\n Multiple extends boolean | undefined = false,\n> extends SelectPrimitive.Root.Props {\n /**\n * Proportional height, corner radius, padding, and font size tier (`xs` | `sm` | `default` | `lg`).\n * Matches `Button` and `Input` dimensions 1:1.\n * @default \"default\"\n */\n size?: SelectSize\n /**\n * Alias for Base UI's `alignItemWithTrigger` on `SelectPositioner`.\n * When `true`, overlaps the trigger so the selected item's text aligns with the trigger text.\n * When `false`, positions the popup below/above the trigger like a standard dropdown menu.\n * @default true\n */\n alignWithItem?: boolean\n /**\n * Native Base UI `SelectPositioner` prop (`alignItemWithTrigger`).\n */\n alignItemWithTrigger?: boolean\n /**\n * Optional placeholder text inherited by `SelectValue` when no value is selected.\n */\n placeholder?: React.ReactNode\n}\n\nfunction Select({\n size,\n alignWithItem,\n alignItemWithTrigger,\n placeholder,\n disabled,\n items,\n children,\n ...props\n}: SelectProps) {\n const resolvedAlignWithItem = alignWithItem ?? alignItemWithTrigger\n\n const resolvedItems = React.useMemo(() => {\n if (items !== undefined) return items\n const extracted = extractItemsFromChildren(children)\n return Object.keys(extracted).length > 0 ? extracted : undefined\n }, [items, children])\n\n const contextValue = React.useMemo(\n () => ({\n size,\n alignWithItem: resolvedAlignWithItem,\n placeholder,\n disabled,\n }),\n [size, resolvedAlignWithItem, placeholder, disabled]\n )\n\n return (\n \n \n {children}\n \n \n )\n}\n\nfunction SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {\n return (\n \n \n \n )\n}\n\nfunction SelectValue({\n className,\n placeholder,\n ...props\n}: SelectPrimitive.Value.Props) {\n const selectContext = useSelectContext()\n const resolvedPlaceholder = selectContext?.placeholder ?? placeholder\n\n return (\n \n )\n}\n\nexport interface SelectTriggerProps\n extends Omit,\n VariantProps {\n className?: string\n /**\n * Optional custom button element to render instead of the default trigger button (e.g. `as={
    \n )\n }\n\n return (\n \n )\n}\n\nexport { Separator, separatorVariants }\n", "type": "registry:ui", "target": "components/ui/separator.tsx" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "sheet", "type": "registry:ui", "title": "Sheet", "description": "A side-sliding panel on any viewport edge with gesture touch physics and default floating card mode.", "dependencies": [], "registryDependencies": [ "drawer" ], "files": [ { "path": "ui/sheet.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n Drawer,\n DrawerTrigger,\n DrawerPortal,\n DrawerOverlay,\n DrawerClose,\n DrawerContent,\n DrawerHeader,\n DrawerBody,\n DrawerFooter,\n DrawerTitle,\n DrawerDescription,\n DrawerSwipeArea,\n type DrawerProps,\n type DrawerContentProps,\n type DrawerHeaderProps,\n type DrawerSide,\n type DrawerSize,\n} from \"@/components/ui/drawer\"\n\nexport type SheetSide = DrawerSide\nexport type SheetSize = DrawerSize\n\nexport interface SheetProps extends Omit {\n /**\n * When false (default for Sheet), renders docked flush against the viewport edge with exact shadcn sheet styles.\n * When true, renders as a floating drawer card.\n * @default false\n */\n floating?: boolean\n /**\n * The edge of the screen from which the sheet slides in (`top` | `bottom` | `left` | `right` | `start` | `end`).\n * @default \"right\"\n */\n side?: SheetSide\n}\n\nfunction Sheet({ side = \"right\", floating = false, ...props }: SheetProps) {\n return \n}\n\nexport interface SheetContentProps extends DrawerContentProps {}\n\nfunction SheetContent({\n side,\n floating = false,\n ...props\n}: SheetContentProps & { side?: SheetSide }) {\n return \n}\n\nconst SheetTrigger = DrawerTrigger\nconst SheetPortal = DrawerPortal\nconst SheetOverlay = DrawerOverlay\nconst SheetClose = DrawerClose\nconst SheetHeader = DrawerHeader\nconst SheetBody = DrawerBody\nconst SheetFooter = DrawerFooter\nconst SheetTitle = DrawerTitle\nconst SheetDescription = DrawerDescription\nconst SheetSwipeArea = DrawerSwipeArea\n\nexport {\n Sheet,\n SheetTrigger,\n SheetPortal,\n SheetOverlay,\n SheetClose,\n SheetContent,\n SheetHeader,\n SheetBody,\n SheetFooter,\n SheetTitle,\n SheetDescription,\n SheetSwipeArea,\n}\nexport type { DrawerHeaderProps as SheetHeaderProps }\n", "type": "registry:ui", "target": "components/ui/sheet.tsx" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "sidebar", "type": "registry:ui", "title": "Sidebar", "description": "A composable, themeable and customizable sidebar component.", "dependencies": [ "@base-ui/react", "class-variance-authority", "lucide-react" ], "registryDependencies": [ "button", "input", "separator", "sheet", "skeleton", "tooltip" ], "files": [ { "path": "ui/sidebar.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"cn\"\n\nimport { useIsMobile } from \"@/registry/bases/base/hooks/use-mobile\"\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n Sheet,\n SheetContent,\n SheetDescription,\n SheetHeader,\n SheetTitle,\n} from \"@/components/ui/sheet\"\nimport { Skeleton } from \"@/components/ui/skeleton\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/components/ui/tooltip\"\nimport { PanelLeft } from \"lucide-react\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\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}\n\nconst SidebarContext = React.createContext(null)\n\nfunction useSidebar() {\n const context = React.useContext(SidebarContext)\n if (!context) {\n throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n }\n\n return context\n}\n\nfunction SidebarProvider({\n defaultOpen = true,\n open: openProp,\n onOpenChange: setOpenProp,\n className,\n style,\n children,\n ...props\n}: React.ComponentProps<\"div\"> & {\n defaultOpen?: boolean\n open?: boolean\n onOpenChange?: (open: boolean) => void\n}) {\n const isMobile = useIsMobile()\n const [openMobile, setOpenMobile] = React.useState(false)\n\n // This is the internal state of the sidebar.\n // We use openProp and setOpenProp for control from outside the component.\n const [_open, _setOpen] = React.useState(defaultOpen)\n const open = openProp ?? _open\n const setOpen = React.useCallback(\n (value: boolean | ((value: boolean) => boolean)) => {\n const openState = typeof value === \"function\" ? value(open) : value\n if (setOpenProp) {\n setOpenProp(openState)\n } else {\n _setOpen(openState)\n }\n\n // This sets the cookie to keep the sidebar state.\n document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n },\n [setOpenProp, open]\n )\n\n // Helper to toggle the sidebar.\n const toggleSidebar = React.useCallback(() => {\n return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n }, [isMobile, setOpen, setOpenMobile])\n\n // Adds a keyboard shortcut to toggle the sidebar.\n React.useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (\n event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n (event.metaKey || event.ctrlKey)\n ) {\n event.preventDefault()\n toggleSidebar()\n }\n }\n\n window.addEventListener(\"keydown\", handleKeyDown)\n return () => window.removeEventListener(\"keydown\", handleKeyDown)\n }, [toggleSidebar])\n\n // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n // This makes it easier to style the sidebar with Tailwind classes.\n const state = open ? \"expanded\" : \"collapsed\"\n\n const contextValue = React.useMemo(\n () => ({\n state,\n open,\n setOpen,\n isMobile,\n openMobile,\n setOpenMobile,\n toggleSidebar,\n }),\n [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n )\n\n return (\n \n \n {children}\n
    • \n \n )\n}\n\nfunction Sidebar({\n side = \"left\",\n variant = \"sidebar\",\n collapsible = \"offcanvas\",\n className,\n children,\n dir,\n ...props\n}: React.ComponentProps<\"div\"> & {\n side?: \"left\" | \"right\"\n variant?: \"sidebar\" | \"floating\" | \"inset\"\n collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n}) {\n const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n if (collapsible === \"none\") {\n return (\n \n {children}\n \n )\n }\n\n if (isMobile) {\n return (\n \n button]:hidden\"\n style={\n {\n \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n } as React.CSSProperties\n }\n side={side}\n >\n \n Sidebar\n Displays the mobile sidebar.\n \n
    {children}
    \n \n     \n )\n }\n\n return (\n