@ciridae/ui 0.10.0 → 0.11.2

package/dist/components/ui/data-table-facet-filter.js

@@ -1,39 +1,51 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { CheckIcon, PlusCircleIcon } from "lucide-react";
-import { cn } from "../../lib/utils";
-import { useDataTable } from "./data-table-context";
-import { Badge } from "./badge";
-import { Button } from "./button";
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, } from "./command";
-import { Popover, PopoverContent, PopoverTrigger } from "./popover";
-import { Separator } from "./separator";
+import { cn } from "../../lib/utils.js";
+import { useDataTable } from "./data-table-context.js";
+import { Badge } from "./badge.js";
+import { Button } from "./button.js";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, } from "./command.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+import { Separator } from "./separator.js";
 /**
- * Narrow a column to a set of its own values.
- *
- * Counts come from the table's faceted row model, which `TanStackDataTable`
- * already builds -- so an option can say how many rows it would leave without
- * the caller counting anything itself. Pair with the `arrIncludesSome` filter
- * function, which is what a multi-select selection means.
+ * The facet-filter popover, controlled: one button per facet that wears the
+ * current selection, checkable values inside. The caller owns the selection --
+ * URL search state, column filters, anything -- and receives the whole next
+ * selection on every toggle, so the popover can never disagree with the list
+ * it narrows and there is nothing to apply or discard on close.
  */
-function DataTableFacetFilter({ columnId, options, title, }) {
-    const column = useDataTable().getColumn(columnId);
-    const counts = column?.getFacetedUniqueValues();
-    const selected = new Set(readSelection(column?.getFilterValue()));
-    const select = (value) => {
-        const next = new Set(selected);
+function FacetFilter({ counts, onSelectionChange, options, selected, title, }) {
+    const selectedSet = new Set(selected);
+    const toggle = (value) => {
+        const next = new Set(selectedSet);
         if (next.has(value))
             next.delete(value);
         else
             next.add(value);
-        // An empty selection is no filter at all, not a filter matching nothing.
-        column?.setFilterValue(next.size ? [...next] : undefined);
+        onSelectionChange([...next]);
     };
-    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { size: "sm", type: "button", variant: "outline", children: [_jsx(PlusCircleIcon, {}), title, selected.size > 0 ? (_jsxs(_Fragment, { children: [_jsx(Separator, { className: "mx-0.5 data-[orientation=vertical]:h-4", orientation: "vertical" }), _jsx(FacetSelectionSummary, { labels: options.filter((option) => selected.has(option.value)) })] })) : null] }) }), _jsx(PopoverContent, { align: "start", className: "w-52 p-0", children: _jsxs(Command, { children: [_jsx(CommandInput, { placeholder: title }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No matches." }), _jsx(CommandGroup, { children: options.map((option) => (_jsx(FacetOptionItem, { count: counts?.get(option.value), onSelect: () => {
-                                            select(option.value);
-                                        }, option: option, selected: selected.has(option.value) }, option.value))) }), selected.size > 0 ? (_jsxs(_Fragment, { children: [_jsx(CommandSeparator, {}), _jsx(CommandGroup, { children: _jsx(CommandItem, { className: "justify-center", onSelect: () => {
-                                                    column?.setFilterValue(undefined);
+    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { size: "sm", type: "button", variant: "outline", children: [_jsx(PlusCircleIcon, {}), title, selectedSet.size > 0 ? (_jsxs(_Fragment, { children: [_jsx(Separator, { className: "mx-0.5 data-[orientation=vertical]:h-4", orientation: "vertical" }), _jsx(FacetSelectionSummary, { labels: options.filter((option) => selectedSet.has(option.value)) })] })) : null] }) }), _jsx(PopoverContent, { align: "start", className: "w-52 p-0", children: _jsxs(Command, { children: [_jsx(CommandInput, { placeholder: title }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No matches." }), _jsx(CommandGroup, { children: options.map((option) => (_jsx(FacetOptionItem, { count: counts?.get(option.value), onSelect: () => {
+                                            toggle(option.value);
+                                        }, option: option, selected: selectedSet.has(option.value) }, option.value))) }), selectedSet.size > 0 ? (_jsxs(_Fragment, { children: [_jsx(CommandSeparator, {}), _jsx(CommandGroup, { children: _jsx(CommandItem, { className: "justify-center", onSelect: () => {
+                                                    onSelectionChange([]);
                                                 }, children: "Clear" }) })] })) : null] })] }) })] }));
 }
+/**
+ * The column-bound binding: narrow a column to a set of its own values.
+ *
+ * Selection lives in the column's filter value, and counts come from the
+ * table's faceted row model, which `TanStackDataTable` already builds -- so an
+ * option can say how many rows it would leave without the caller counting
+ * anything itself. Pair with the `arrIncludesSome` filter function, which is
+ * what a multi-select selection means.
+ */
+function DataTableFacetFilter({ columnId, options, title, }) {
+    const column = useDataTable().getColumn(columnId);
+    return (_jsx(FacetFilter, { counts: column?.getFacetedUniqueValues(), onSelectionChange: (values) => {
+            // An empty selection is no filter at all, not a filter matching nothing.
+            column?.setFilterValue(values.length ? values : undefined);
+        }, options: options, selected: readSelection(column?.getFilterValue()), title: title }));
+}
 /** Names the choices while they still fit, then counts them. */
 function FacetSelectionSummary({ labels }) {
     if (labels.length > 2)
@@ -50,4 +62,4 @@ function readSelection(value) {
         return [];
     return value.filter((entry) => typeof entry === "string");
 }
-export { DataTableFacetFilter };
+export { DataTableFacetFilter, FacetFilter };

package/dist/components/ui/data-table-grid.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowDownIcon, ArrowUpIcon, ChevronsUpDownIcon } from "lucide-react";
 import { flexRender, } from "@tanstack/react-table";
-import { cn } from "../../lib/utils";
-import { Button } from "./button";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table";
+import { cn } from "../../lib/utils.js";
+import { Button } from "./button.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table.js";
 /** Font taken from the enclosing `TableHead`; see `DataTableHeaderCell`. */
 const inheritType = { fontSize: "inherit", fontWeight: "inherit", lineHeight: "inherit" };
 function DataTableGrid({ empty, getRowClassName, onRowClick, rows, table, }) {

package/dist/components/ui/data-table-pagination.d.ts

@@ -1,5 +1,5 @@
 import type { Table as TanStackTable } from "@tanstack/react-table";
-import type { DataTablePaginationVariant, ResolvedDataTableLabels } from "./data-table-tanstack";
+import type { DataTablePaginationVariant, ResolvedDataTableLabels } from "./data-table-tanstack.js";
 declare function DataTablePagination<TData>({ footerControls, labels, pageSizeOptions, selectedRows, table, totalRows, variant, }: {
     /**
      * Controls that belong beside the row count rather than above the table --

package/dist/components/ui/data-table-pagination.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ChevronLeftIcon, ChevronRightIcon, ChevronsLeftIcon, ChevronsRightIcon, } from "lucide-react";
-import { Button } from "./button";
-import { NativeSelect, NativeSelectOption } from "./native-select";
-import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem } from "./pagination";
+import { Button } from "./button.js";
+import { NativeSelect, NativeSelectOption } from "./native-select.js";
+import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem } from "./pagination.js";
 function DataTablePagination({ footerControls, labels, pageSizeOptions, selectedRows, table, totalRows, variant = "compact", }) {
     const pagination = table.getState().pagination;
     // `-1` is TanStack's "unknown", which a server-driven table reports until it

package/dist/components/ui/data-table-search-input.d.ts

@@ -0,0 +1,14 @@
+type DataTableSearchInputProps = {
+    ariaLabel: string;
+    onChange: (value: string) => void;
+    placeholder: string;
+    value: string;
+};
+/**
+ * Shows what is being typed. Any debounce that turns the value into an address
+ * belongs in the caller's table state, next to everything else that decides
+ * what the table is looking at -- so a Clear that cancels a search cancels the
+ * write still in flight along with it.
+ */
+declare function DataTableSearchInput({ ariaLabel, onChange, placeholder, value, }: DataTableSearchInputProps): import("@types/react").JSX.Element;
+export { DataTableSearchInput, type DataTableSearchInputProps };

package/dist/components/ui/data-table-search-input.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SearchIcon } from "lucide-react";
+import { Input } from "./input.js";
+/**
+ * Shows what is being typed. Any debounce that turns the value into an address
+ * belongs in the caller's table state, next to everything else that decides
+ * what the table is looking at -- so a Clear that cancels a search cancels the
+ * write still in flight along with it.
+ */
+function DataTableSearchInput({ ariaLabel, onChange, placeholder, value, }) {
+    return (_jsxs("div", { className: "relative w-full sm:max-w-64", children: [_jsx(SearchIcon, { className: "pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { "aria-label": ariaLabel, className: "pl-8", onChange: (event) => {
+                    onChange(event.target.value);
+                }, placeholder: placeholder, type: "search", value: value })] }));
+}
+export { DataTableSearchInput };

package/dist/components/ui/data-table-tanstack.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { getCoreRowModel, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from "@tanstack/react-table";
-import { cn } from "../../lib/utils";
-import { TableSkeleton } from "./loading-state";
-import { DataTableTools } from "./data-table-controls";
-import { DataTableProvider } from "./data-table-context";
-import { DataTableGrid } from "./data-table-grid";
-import { DataTablePagination } from "./data-table-pagination";
+import { cn } from "../../lib/utils.js";
+import { TableSkeleton } from "./loading-state.js";
+import { DataTableTools } from "./data-table-controls.js";
+import { DataTableProvider } from "./data-table-context.js";
+import { DataTableGrid } from "./data-table-grid.js";
+import { DataTablePagination } from "./data-table-pagination.js";
 const defaultLabels = {
     columns: "Columns",
     empty: "No results.",

package/dist/components/ui/data-table.d.ts

@@ -1,8 +1,8 @@
 import * as React from "react";
-import { TableHead } from "./table";
-import { type TableSkeletonProps } from "./loading-state";
-import { TanStackDataTable } from "./data-table-tanstack";
-import type { DataTableLabels, TanStackDataTableProps } from "./data-table-tanstack";
+import { TableHead } from "./table.js";
+import { type TableSkeletonProps } from "./loading-state.js";
+import { TanStackDataTable } from "./data-table-tanstack.js";
+import type { DataTableLabels, TanStackDataTableProps } from "./data-table-tanstack.js";
 type SortDirection = "asc" | "desc";
 declare function DataTable({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function DataTableToolbar({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;

package/dist/components/ui/data-table.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowDownIcon, ArrowUpDownIcon, ArrowUpIcon } from "lucide-react";
-import { cn } from "../../lib/utils";
-import { Button } from "./button";
-import { TableHead } from "./table";
-import { TableSkeleton } from "./loading-state";
-import { TanStackDataTable } from "./data-table-tanstack";
+import { cn } from "../../lib/utils.js";
+import { Button } from "./button.js";
+import { TableHead } from "./table.js";
+import { TableSkeleton } from "./loading-state.js";
+import { TanStackDataTable } from "./data-table-tanstack.js";
 function DataTable({ className, ...props }) {
     return (_jsx("div", { "data-slot": "data-table", className: cn("grid gap-(--panel-gap)", className), ...props }));
 }

package/dist/components/ui/dialog.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { XIcon } from "lucide-react";
 import { Dialog as DialogPrimitive } from "radix-ui";
-import { cn } from "../../lib/utils";
-import { Button } from "./button";
+import { cn } from "../../lib/utils.js";
+import { Button } from "./button.js";
 const DialogPortalContainerContext = React.createContext({
     container: null,
     disableModalBehavior: false,

package/dist/components/ui/drawer.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Drawer as DrawerPrimitive } from "vaul";
-import { cn } from "../../lib/utils";
+import { cn } from "../../lib/utils.js";
 const DrawerPortalContainerContext = React.createContext({
     container: null,
     disableModalBehavior: false,

package/dist/components/ui/dropdown-menu.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
 import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
-import { cn } from "../../lib/utils";
+import { cn } from "../../lib/utils.js";
 const DropdownMenuPortalContainerContext = React.createContext({
     container: null,
     disableModalBehavior: false,

package/dist/components/ui/empty.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
-import { cn } from "../../lib/utils";
+import { cn } from "../../lib/utils.js";
 function Empty({ className, ...props }) {
     return (_jsx("div", { "data-slot": "empty", className: cn("flex min-w-0 flex-1 flex-col items-center justify-center gap-(--panel-gap) rounded-lg border-dashed p-(--panel-padding) text-center text-balance md:p-8", className), ...props }));
 }

package/dist/components/ui/expandable-data-table.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { DataTable } from "./data-table";
+import { DataTable } from "./data-table.js";
 type ExpandableDataTableColumn<TRow> = {
     id: string;
     header: React.ReactNode;

package/dist/components/ui/expandable-data-table.js

@@ -2,10 +2,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { ChevronRightIcon } from "lucide-react";
-import { cn } from "../../lib/utils";
-import { Button } from "./button";
-import { DataTable, DataTableContent, DataTableEmpty } from "./data-table";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table";
+import { cn } from "../../lib/utils.js";
+import { Button } from "./button.js";
+import { DataTable, DataTableContent, DataTableEmpty } from "./data-table.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table.js";
 function ExpandableDataTable({ rows, columns, getRowId, getRowLabel, renderExpandedRow, defaultExpandedRowId = null, expandedRowId, onExpandedRowIdChange, empty = "No rows found.", className, ...props }) {
     const tableId = React.useId();
     const [uncontrolledExpandedRowId, setUncontrolledExpandedRowId] = React.useState(defaultExpandedRowId);

package/dist/components/ui/field.d.ts

@@ -1,5 +1,5 @@
 import { type VariantProps } from "class-variance-authority";
-import { Label } from "./label";
+import { Label } from "./label.js";
 declare function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">): import("@types/react").JSX.Element;
 declare function FieldLegend({ className, variant, ...props }: React.ComponentProps<"legend"> & {
     variant?: "legend" | "label";

package/dist/components/ui/field.js

@@ -2,9 +2,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { cva } from "class-variance-authority";
-import { cn } from "../../lib/utils";
-import { Label } from "./label";
-import { Separator } from "./separator";
+import { cn } from "../../lib/utils.js";
+import { Label } from "./label.js";
+import { Separator } from "./separator.js";
 function FieldSet({ className, ...props }) {
     return (_jsx("fieldset", { "data-slot": "field-set", className: cn("flex flex-col gap-[calc(var(--panel-gap)+0.5rem)]", "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3", className), ...props }));
 }

package/dist/components/ui/file-upload-field-parts.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FileIcon, PaperclipIcon, UploadCloudIcon, XIcon } from "lucide-react";
-import { cn } from "../../lib/utils";
-import { Button } from "./button";
-import { Item, ItemActions, ItemContent, ItemDescription, ItemGroup, ItemGroupItem, ItemMedia, ItemTitle, } from "./item";
+import { cn } from "../../lib/utils.js";
+import { Button } from "./button.js";
+import { Item, ItemActions, ItemContent, ItemDescription, ItemGroup, ItemGroupItem, ItemMedia, ItemTitle, } from "./item.js";
 function FileUploadCompactControl({ acceptedFileTypes, disabled, dragActive, error, files, inputId, inputRef, maxAttachments, onAddFiles, onDragActiveChange, }) {
     const isAtLimit = files.length >= maxAttachments;
     return (_jsxs("div", { "data-drag-active": dragActive, className: cn("flex items-center gap-3 rounded-md border bg-card px-3 py-2 transition-colors", "data-[drag-active=true]:border-ring data-[drag-active=true]:bg-muted/50", disabled && "cursor-not-allowed opacity-60"), onDragEnter: (event) => handleDragEnter(event, disabled, onDragActiveChange), onDragLeave: (event) => handleDragLeave(event, onDragActiveChange), onDragOver: (event) => event.preventDefault(), onDrop: (event) => handleDrop(event, { disabled, onAddFiles, onDragActiveChange }), children: [_jsx("input", { accept: acceptedFileTypes, "aria-describedby": error ? `${inputId}-error` : undefined, className: "sr-only", disabled: disabled || isAtLimit, id: inputId, multiple: true, onChange: (event) => handleFileInputChange(event, onAddFiles), ref: inputRef, type: "file" }), _jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [_jsx(PaperclipIcon, { className: "size-4 shrink-0 text-muted-foreground" }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate text-sm font-medium", children: files.length > 0 ? `${files.length} attached` : "Attach files" }), _jsx("div", { className: "truncate text-xs text-muted-foreground", children: "Files stay in the browser until submit." })] })] }), _jsx(Button, { disabled: disabled || isAtLimit, onClick: () => inputRef.current?.click(), size: "sm", type: "button", variant: "outline", children: "Attach" })] }));

package/dist/components/ui/file-upload-field.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { FileUploadCompactControl, FileUploadDropZone, FileUploadList, } from "./file-upload-field-parts";
-import { Field, FieldContent, FieldDescription, FieldError, FieldLabel } from "./field";
+import { FileUploadCompactControl, FileUploadDropZone, FileUploadList, } from "./file-upload-field-parts.js";
+import { Field, FieldContent, FieldDescription, FieldError, FieldLabel } from "./field.js";
 function FileUploadField({ acceptedFileTypes, className, description, disabled = false, files, label = "Attachments", maxAttachmentSizeMb = 10, maxAttachments = 4, onFilesChange, showConstraints = true, variant = "dropzone", }) {
     const inputId = React.useId();
     const uploadState = useFileUploadFieldState({

package/dist/components/ui/form-sheet.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
-import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from "./alert-dialog";
-import { Sheet, SheetTrigger } from "./sheet";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from "./alert-dialog.js";
+import { Sheet, SheetTrigger } from "./sheet.js";
 const FormSheetContext = React.createContext(null);
 function useFormSheetActions() {
     const actions = React.useContext(FormSheetContext);

package/dist/components/ui/form.js

@@ -2,9 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { Slot } from "radix-ui";
 import { Controller, FormProvider, } from "react-hook-form";
-import { cn } from "../../lib/utils";
-import { FormFieldContext, FormItemContext, useFormField } from "./form-context";
-import { Label } from "./label";
+import { cn } from "../../lib/utils.js";
+import { FormFieldContext, FormItemContext, useFormField } from "./form-context.js";
+import { Label } from "./label.js";
 const Form = FormProvider;
 const FormField = ({ ...props }) => {
     const contextValue = React.useMemo(() => ({ name: props.name }), [props.name]);

package/dist/components/ui/hover-card.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { HoverCard as HoverCardPrimitive } from "radix-ui";
-import { cn } from "../../lib/utils";
+import { cn } from "../../lib/utils.js";
 const HoverCardPortalContainerContext = React.createContext({
     container: null,
 });

package/dist/components/ui/input-group.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
-import { Button } from "./button";
+import { Button } from "./button.js";
 declare function InputGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
     align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;

package/dist/components/ui/input-group.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
-import { cn } from "../../lib/utils";
-import { Button } from "./button";
-import { Input } from "./input";
-import { Textarea } from "./textarea";
+import { cn } from "../../lib/utils.js";
+import { Button } from "./button.js";
+import { Input } from "./input.js";
+import { Textarea } from "./textarea.js";
 function InputGroup({ className, ...props }) {
     return (_jsx("div", { "data-slot": "input-group", role: "group", className: cn("group/input-group relative flex w-full items-center rounded-md border border-input shadow-xs transition-[color,box-shadow] outline-none dark:bg-input/30", "h-(--control-height) min-w-0 has-[>textarea]:h-auto", 
         // Variants based on alignment.

package/dist/components/ui/input-otp.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { OTPInput, OTPInputContext } from "input-otp";
 import { MinusIcon } from "lucide-react";
-import { cn } from "../../lib/utils";
+import { cn } from "../../lib/utils.js";
 function InputOTP({ className, containerClassName, ...props }) {
     return (_jsx(OTPInput, { "data-slot": "input-otp", containerClassName: cn("flex items-center gap-2 has-disabled:opacity-50", containerClassName), className: cn("disabled:cursor-not-allowed", className), ...props }));
 }

package/dist/components/ui/input.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from "../../lib/utils";
+import { cn } from "../../lib/utils.js";
 function Input({ className, type, ...props }) {
     return (_jsx("input", { type: type, "data-slot": "input", className: cn("h-(--control-height) w-full min-w-0 rounded-md border border-input bg-transparent px-(--control-padding-x) py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-[calc(var(--control-height)-0.375rem)] file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30", "focus-visible:border-ring focus-visible:ring-[var(--focus-ring-width)] focus-visible:ring-ring/50", "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40", className), ...props }));
 }

package/dist/components/ui/item.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
-import { Separator } from "./separator";
+import { Separator } from "./separator.js";
 declare function ItemGroup({ className, role, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function ItemGroupItem({ role, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): React.JSX.Element;

package/dist/components/ui/item.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Slot } from "radix-ui";
-import { cn } from "../../lib/utils";
-import { Separator } from "./separator";
+import { cn } from "../../lib/utils.js";
+import { Separator } from "./separator.js";
 function ItemGroup({ className, role = "list", ...props }) {
     return (_jsx("div", { "data-slot": "item-group", role: role, className: cn("group/item-group flex flex-col", className), ...props }));
 }
@@ -12,12 +12,16 @@ function ItemGroupItem({ role = "listitem", ...props }) {
 function ItemSeparator({ className, ...props }) {
     return (_jsx(Separator, { "data-slot": "item-separator", orientation: "horizontal", className: cn("my-0", className), ...props }));
 }
-const itemVariants = cva("group/item flex flex-wrap items-center rounded-md border border-transparent text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[var(--focus-ring-width)] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-accent/50", {
+const itemVariants = cva(
+// Each variant owns the border color outright: `cn` does not resolve
+// Tailwind conflicts, so base + variant both setting it would leave the
+// winner to the consuming app's CSS emission order.
+"group/item flex flex-wrap items-center rounded-md border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[var(--focus-ring-width)] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-accent/50", {
     variants: {
         variant: {
-            default: "bg-transparent",
+            default: "border-transparent bg-transparent",
             outline: "border-border",
-            muted: "bg-muted/50",
+            muted: "border-transparent bg-muted/50",
         },
         size: {
             default: "gap-(--panel-gap) p-(--panel-padding)",

package/dist/components/ui/kbd.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from "../../lib/utils";
+import { cn } from "../../lib/utils.js";
 function Kbd({ className, ...props }) {
     return (_jsx("kbd", { "data-slot": "kbd", className: cn("pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none", "[&_svg:not([class*='size-'])]:size-3", "[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10", className), ...props }));
 }

package/dist/components/ui/label.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Label as LabelPrimitive } from "radix-ui";
-import { cn } from "../../lib/utils";
+import { cn } from "../../lib/utils.js";
 function Label({ className, ...props }) {
     return (_jsx(LabelPrimitive.Root, { "data-slot": "label", className: cn("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className), ...props }));
 }

package/dist/components/ui/loading-state.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Card } from "./card";
+import { Card } from "./card.js";
 type LoadingStateSize = "sm" | "default" | "lg";
 type LoadingStateProps = React.ComponentProps<"div"> & {
     description?: React.ReactNode;

package/dist/components/ui/loading-state.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { cn } from "../../lib/utils";
-import { Card, CardContent, CardHeader } from "./card";
-import { Skeleton } from "./skeleton";
-import { Spinner } from "./spinner";
+import { cn } from "../../lib/utils.js";
+import { Card, CardContent, CardHeader } from "./card.js";
+import { Skeleton } from "./skeleton.js";
+import { Spinner } from "./spinner.js";
 const loadingStateSizes = {
     sm: "min-h-14 gap-2 p-3",
     default: "min-h-24 gap-3 p-(--panel-padding)",

package/dist/components/ui/menubar.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
 import { Menubar as MenubarPrimitive } from "radix-ui";
-import { cn } from "../../lib/utils";
+import { cn } from "../../lib/utils.js";
 const MenubarPortalContainerContext = React.createContext({
     container: null,
 });

package/dist/components/ui/metrics-strip.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from "../../lib/utils";
+import { cn } from "../../lib/utils.js";
 function MetricsStrip({ className, ...props }) {
     return (_jsx("section", { "data-slot": "metrics-strip", className: cn("grid grid-cols-1 divide-y divide-border rounded-lg border bg-card text-card-foreground shadow-xs md:grid-cols-5 md:divide-x md:divide-y-0", className), ...props }));
 }

package/dist/components/ui/native-select.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronDownIcon } from "lucide-react";
-import { cn } from "../../lib/utils";
+import { cn } from "../../lib/utils.js";
 function NativeSelect({ className, size = "default", ...props }) {
     return (_jsxs("div", { className: "group/native-select relative w-fit has-[select:disabled]:opacity-50", "data-slot": "native-select-wrapper", children: [_jsx("select", { "data-slot": "native-select", "data-size": size, className: cn("h-(--control-height) w-full min-w-0 appearance-none rounded-md border border-input bg-transparent px-(--control-padding-x) py-1 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed data-[size=sm]:h-(--control-height-sm) dark:bg-input/30 dark:hover:bg-input/50", "focus-visible:border-ring focus-visible:ring-[var(--focus-ring-width)] focus-visible:ring-ring/50", "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40", className), ...props }), _jsx(ChevronDownIcon, { className: "pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 text-muted-foreground opacity-50 select-none", "aria-hidden": "true", "data-slot": "native-select-icon" })] }));
 }

package/dist/components/ui/navigation-menu.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronDownIcon } from "lucide-react";
 import { NavigationMenu as NavigationMenuPrimitive } from "radix-ui";
-import { cn } from "../../lib/utils";
-import { navigationMenuTriggerStyle } from "./navigation-menu-variants";
+import { cn } from "../../lib/utils.js";
+import { navigationMenuTriggerStyle } from "./navigation-menu-variants.js";
 function NavigationMenu({ className, children, viewport = true, ...props }) {
     return (_jsxs(NavigationMenuPrimitive.Root, { "data-slot": "navigation-menu", "data-viewport": viewport, className: cn("group/navigation-menu relative flex max-w-max flex-1 items-center justify-center", className), ...props, children: [children, viewport && _jsx(NavigationMenuViewport, {})] }));
 }

package/dist/components/ui/page-header.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Button } from "./button";
+import { Button } from "./button.js";
 type PageHeaderBreadcrumbItem = {
     label: string;
     to?: string;

package/dist/components/ui/page-header.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowLeftIcon } from "lucide-react";
-import { Button } from "./button";
-import { cn } from "../../lib/utils";
+import { Button } from "./button.js";
+import { cn } from "../../lib/utils.js";
 function PageHeader({ actions, backLink, breadcrumbItems, children, className, subtitle, title, ...props }) {
     if (hasPageHeaderConvenienceContent({ actions, backLink, breadcrumbItems, subtitle, title })) {
         return (_jsx("header", { "data-slot": "page-header", className: cn("border-b bg-background text-foreground", className), ...props, children: _jsx(PageHeaderConvenienceLayout, { actions: actions, backLink: backLink, breadcrumbItems: breadcrumbItems, subtitle: subtitle, title: title, children: children }) }));

package/dist/components/ui/pagination.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { Button } from "./button";
+import type { Button } from "./button.js";
 declare function Pagination({ className, ...props }: React.ComponentProps<"nav">): React.JSX.Element;
 declare function PaginationContent({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
 declare function PaginationItem({ ...props }: React.ComponentProps<"li">): React.JSX.Element;

package/dist/components/ui/pagination.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
-import { cn } from "../../lib/utils";
-import { buttonVariants } from "./button-variants";
+import { cn } from "../../lib/utils.js";
+import { buttonVariants } from "./button-variants.js";
 function Pagination({ className, ...props }) {
     return (_jsx("nav", { role: "navigation", "aria-label": "pagination", "data-slot": "pagination", className: cn("mx-auto flex w-full justify-center", className), ...props }));
 }

package/dist/components/ui/popover.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { Popover as PopoverPrimitive } from "radix-ui";
-import { cn } from "../../lib/utils";
+import { cn } from "../../lib/utils.js";
 const PopoverPortalContainerContext = React.createContext({
     container: null,
 });

package/dist/components/ui/progress.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Progress as ProgressPrimitive } from "radix-ui";
-import { cn } from "../../lib/utils";
+import { cn } from "../../lib/utils.js";
 function Progress({ className, value, ...props }) {
     return (_jsx(ProgressPrimitive.Root, { "data-slot": "progress", className: cn("relative h-2 w-full overflow-hidden rounded-full bg-primary/20", className), ...props, children: _jsx(ProgressPrimitive.Indicator, { "data-slot": "progress-indicator", className: "h-full w-full flex-1 bg-primary transition-all", style: { transform: `translateX(-${100 - (value || 0)}%)` } }) }));
 }

package/dist/components/ui/property-list.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from "../../lib/utils";
+import { cn } from "../../lib/utils.js";
 function PropertyList({ className, ...props }) {
     return (_jsx("dl", { "data-slot": "property-list", className: cn("grid border-t border-border text-sm", className), ...props }));
 }