@caratlogic/design-system 0.1.20 → 0.1.21

package/dist/ui.esm.js

@@ -3246,7 +3246,7 @@ function SelectTrigger({ className, size = 'default', children, ...props }) {
     return (jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn("border-input-border cursor-pointer data-[placeholder]:!text-[var(--placeholder)] data-[placeholder]:!text-sm [&_[data-placeholder]]:!text-[var(--placeholder)] [&_[data-placeholder]]:!text-sm [&_span[data-placeholder]]:!text-[var(--placeholder)] [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-full items-center justify-between gap-2 rounded-md border bg-input-background px-3 py-2 text-sm whitespace-nowrap shadow-[0_1px_2px_0_rgba(0,0,0,0.05)] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:bg-muted/50 disabled:text-label data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, jsx(SelectPrimitive.Icon, { asChild: true, children: jsx(ChevronDown, { className: "size-4 text-gray-600" }) })] }));
 }
 function SelectContent({ className, children, position = 'popper', searchable = true, // default: all selects are searchable
-searchPlaceholder = 'Search...', ...props }) {
+searchPlaceholder = 'Search...', emptyMessage = 'No options available', ...props }) {
     // Use the shared search context provided by Select root
     const searchCtx = useSelectSearchContext();
     const searchTerm = searchCtx?.searchTerm ?? '';
@@ -3258,7 +3258,9 @@ searchPlaceholder = 'Search...', ...props }) {
     return (jsx(SelectPrimitive.Portal, { children: jsxs(SelectPrimitive.Content, { "data-slot": "select-content", className: cn('bg-card cursor-pointer text-popover-foreground 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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg border border-border shadow-[0_10px_15px_-3px_rgba(0,0,0,0.10),0_4px_6px_-4px_rgba(0,0,0,0.10)]', position === 'popper' &&
                 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className), position: position, ...props, children: [searchable && (jsx("div", { className: "p-2 pb-1", children: jsxs("div", { className: "flex h-9 w-full items-center gap-2 rounded-lg bg-secondary px-3", children: [jsx(Search, { className: "h-4 w-4 shrink-0 text-[#737373]", "aria-hidden": "true" }), jsx("input", { type: "search", className: "min-w-0 flex-1 bg-transparent text-sm text-foreground outline-none placeholder:text-placeholder", placeholder: searchPlaceholder, value: searchTerm, onChange: (e) => setSearchTerm?.(e.target.value), 
                                 // prevent keys from interfering with Radix keyboard nav
-                                onKeyDown: (e) => e.stopPropagation() })] }) })), jsx(SelectScrollUpButton, {}), jsx(SelectPrimitive.Viewport, { className: cn('p-1 max-h-[12.5rem] overflow-y-auto', position === 'popper' &&
+                                onKeyDown: (e) => e.stopPropagation() })] }) })), jsx(SelectScrollUpButton, {}), jsx(SelectPrimitive.Viewport, { "data-slot": "select-viewport", style: {
+                        '--select-empty-message': JSON.stringify(searchTerm ? 'No matching options' : emptyMessage),
+                    }, className: cn('p-1 max-h-[12.5rem] overflow-y-auto', 'empty:after:block empty:after:px-2 empty:after:py-4 empty:after:text-center empty:after:text-sm empty:after:text-muted-foreground empty:after:content-(--select-empty-message)', position === 'popper' &&
                         'w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1'), children: children }), jsx(SelectScrollDownButton, {})] }) }));
 }
 function SelectLabel({ className, ...props }) {