egutierrez
dc78d8fea3
Componentes React reutilizables: card, dialog, tabs, select, alert, badge, button, input, label, skeleton, tooltip, progress_bar, page_header, form_field, settings_page, crud_page, analytics_page, dashboard_layout. Charts: area, bar, line, sparkline, kpi_card, chart_container. Hooks Wails: use_wails_query, use_wails_mutation, use_wails_stream, use_wails_event, use_animated_canvas. Funciones core: cn, format_compact, chart_colors, get_series_color, wails_cache, theme_config_to_colors. Tipos: chart_series, wails_ipc, theme_config, component_variants. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
89 lines
3.6 KiB
TypeScript
89 lines
3.6 KiB
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
import { Select as SelectPrimitive } from "@base-ui/react/select"
|
|
import { ChevronDown, Check } from "lucide-react"
|
|
import { cn } from "../core/cn"
|
|
|
|
function Select<T>({ ...props }: SelectPrimitive.Root.Props<T>) {
|
|
return <SelectPrimitive.Root data-slot="select" {...props} />
|
|
}
|
|
|
|
function SelectValue({ ...props }: SelectPrimitive.Value.Props) {
|
|
return <SelectPrimitive.Value data-slot="select-value" {...props} />
|
|
}
|
|
|
|
function SelectTrigger({ className, children, ...props }: SelectPrimitive.Trigger.Props) {
|
|
return (
|
|
<SelectPrimitive.Trigger
|
|
data-slot="select-trigger"
|
|
className={cn(
|
|
"flex h-8 w-full items-center justify-between gap-2 rounded-lg border border-input bg-transparent px-2.5 py-1 text-sm transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 [&>span]:line-clamp-1",
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
<SelectPrimitive.Icon>
|
|
<ChevronDown className="size-4 shrink-0 text-muted-foreground" />
|
|
</SelectPrimitive.Icon>
|
|
</SelectPrimitive.Trigger>
|
|
)
|
|
}
|
|
|
|
function SelectPortal({ ...props }: SelectPrimitive.Portal.Props) {
|
|
return <SelectPrimitive.Portal data-slot="select-portal" {...props} />
|
|
}
|
|
|
|
function SelectContent({ className, children, ...props }: SelectPrimitive.Positioner.Props) {
|
|
return (
|
|
<SelectPortal>
|
|
<SelectPrimitive.Positioner
|
|
data-slot="select-content"
|
|
className={cn(
|
|
"relative z-50 max-h-[300px] min-w-[8rem] overflow-hidden rounded-lg border bg-popover text-popover-foreground shadow-md",
|
|
"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
|
|
"data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
|
className
|
|
)}
|
|
sideOffset={4}
|
|
{...props}
|
|
>
|
|
<SelectPrimitive.Popup className="w-full p-1">{children}</SelectPrimitive.Popup>
|
|
</SelectPrimitive.Positioner>
|
|
</SelectPortal>
|
|
)
|
|
}
|
|
|
|
function SelectGroup({ ...props }: SelectPrimitive.Group.Props) {
|
|
return <SelectPrimitive.Group data-slot="select-group" {...props} />
|
|
}
|
|
|
|
function SelectGroupLabel({ className, ...props }: SelectPrimitive.GroupLabel.Props) {
|
|
return <SelectPrimitive.GroupLabel data-slot="select-group-label" className={cn("px-2 py-1.5 text-xs font-medium text-muted-foreground", className)} {...props} />
|
|
}
|
|
|
|
function SelectItem({ className, children, ...props }: SelectPrimitive.Item.Props) {
|
|
return (
|
|
<SelectPrimitive.Item
|
|
data-slot="select-item"
|
|
className={cn(
|
|
"relative flex w-full cursor-default select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
<span className="absolute left-2 flex size-4 items-center justify-center">
|
|
<SelectPrimitive.ItemIndicator><Check className="size-4" /></SelectPrimitive.ItemIndicator>
|
|
</span>
|
|
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
|
|
</SelectPrimitive.Item>
|
|
)
|
|
}
|
|
|
|
function SelectSeparator({ className, ...props }: React.ComponentProps<"div">) {
|
|
return <div data-slot="select-separator" className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
|
|
}
|
|
|
|
export { Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectPortal, SelectSeparator, SelectTrigger, SelectValue }
|