@sybilion/uilib 1.3.84 → 1.3.86

package/dist/esm/components/ui/Chat/ChatEmptyState/ChatEmptyState.js

@@ -1,9 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import S from './ChatEmptyState.styl.js';
 import SparklesIcon from './icons/sparkles.svg.js';
+import cn from 'classnames';
 
-function ChatEmptyState({ icon = jsx(SparklesIcon, {}), title = 'Start a conversation', description, additionalContent, children, }) {
-    return (jsxs("div", { className: S.root, children: [icon && jsx("div", { className: S.icon, children: icon }), title && jsx("h2", { children: title }), description && jsx("p", { children: description }), additionalContent, children] }));
+function ChatEmptyState({ icon = jsx(SparklesIcon, {}), title = 'Start a conversation', description, additionalContent, children, className, }) {
+    return (jsxs("div", { className: cn(S.root, className), children: [icon && jsx("div", { className: S.icon, children: icon }), title && jsx("h2", { children: title }), description && jsx("p", { children: description }), additionalContent, children] }));
 }
 
 export { ChatEmptyState };

package/dist/esm/components/ui/Chat/ChatPrompt/ChatPrompt.styl.js

@@ -1,7 +1,7 @@
 import styleInject from 'style-inject';
 
-var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.ChatPrompt_root__5G5bq{align-items:stretch;display:flex;flex-direction:column;gap:var(--p-2);padding:var(--p-3);position:relative}.ChatPrompt_composer__H3c3N{align-items:flex-end;display:flex;flex-direction:row;gap:var(--p-3);position:relative;width:100%}.ChatPrompt_fileInput__xdgPn{display:none}.ChatPrompt_attachButton__gi-qF{align-self:flex-end;flex-shrink:0}.ChatPrompt_editorWrap__Q7gat{align-self:stretch;flex:1;min-width:0}.ChatPrompt_editorMount__Phh4D{background:transparent;border:none;border-radius:0!important;box-shadow:none!important;display:flex;flex:1;flex-direction:column;max-height:200px;min-height:40px;min-width:0;padding:0!important}.ChatPrompt_editorMount__Phh4D:focus-within{box-shadow:none!important}.ChatPrompt_editorMount__Phh4D .ProseMirror{border:none!important;box-shadow:none!important;flex:1;margin:0;max-height:200px!important;min-height:40px!important;outline:none!important;overflow-x:hidden!important;overflow-y:auto!important;padding:var(--p-2) 0 0!important;resize:none!important;white-space:pre-wrap;word-break:break-word}.ChatPrompt_editorMount__Phh4D .ProseMirror p.is-empty.is-editor-empty:before{color:var(--muted-foreground);content:attr(data-placeholder);float:left;height:0;pointer-events:none}.ChatPrompt_editorMount__Phh4D .ProseMirror .chat-prompt-command-chip,.ChatPrompt_editorMount__Phh4D .ProseMirror .slash-mention{align-items:center;background:var(--muted);border-radius:var(--radius-sm);display:inline-flex;font-size:.875em;line-height:1.4;padding:0 var(--p-1);-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:baseline;white-space:nowrap}.ChatPrompt_editorMount__Phh4D .ProseMirror .chat-prompt-command-chip{color:var(--foreground)}.ChatPrompt_submitColumn__0rY1R{align-items:center;display:flex;flex-direction:column;flex-shrink:0;justify-content:flex-end;margin-top:-4px}.ChatPrompt_submitColumn__0rY1R>button:focus{box-shadow:0 0 0 2px var(--brand-color-500)!important}.ChatPrompt_submitColumn__0rY1R>button:first-child{border:none;position:relative;transition:all .2s}.ChatPrompt_submitColumn__0rY1R>button:first-child:focus{transform:scale(1.2)}.ChatPrompt_submitColumn__0rY1R>button:first-child:before{bottom:-100%;content:\"\";left:-100%;position:absolute;right:-100%;top:-100%}.ChatPrompt_attachments__KG-fG{display:flex;flex-wrap:wrap;gap:var(--p-2);margin-bottom:var(--p-2)}.ChatPrompt_attachmentItem__QJk7J{flex:1 1 300px;max-width:300px;min-width:0}";
-var S = {"root":"ChatPrompt_root__5G5bq","composer":"ChatPrompt_composer__H3c3N","fileInput":"ChatPrompt_fileInput__xdgPn","attachButton":"ChatPrompt_attachButton__gi-qF","editorWrap":"ChatPrompt_editorWrap__Q7gat","editorMount":"ChatPrompt_editorMount__Phh4D","submitColumn":"ChatPrompt_submitColumn__0rY1R","attachments":"ChatPrompt_attachments__KG-fG","attachmentItem":"ChatPrompt_attachmentItem__QJk7J"};
+var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.ChatPrompt_root__5G5bq{align-items:stretch;display:flex;flex-direction:column;gap:var(--p-2);padding:var(--p-3);position:relative}.ChatPrompt_composer__H3c3N{align-items:flex-end;display:flex;flex-direction:row;gap:var(--p-3);position:relative;width:100%}.ChatPrompt_fileInput__xdgPn{display:none}.ChatPrompt_attachButton__gi-qF,.ChatPrompt_submitButton__gvhDN{position:relative;top:-2px}.ChatPrompt_attachButton__gi-qF{align-self:flex-end;flex-shrink:0}.ChatPrompt_editorWrap__Q7gat{align-self:stretch;flex:1;min-width:0}.ChatPrompt_editorMount__Phh4D{background:transparent;border:none;border-radius:0!important;box-shadow:none!important;display:flex;flex:1;flex-direction:column;max-height:200px;min-height:40px;min-width:0;padding:0!important}.ChatPrompt_editorMount__Phh4D:focus-within{box-shadow:none!important}.ChatPrompt_editorMount__Phh4D .ProseMirror{border:none!important;box-shadow:none!important;flex:1;margin:0;max-height:200px!important;min-height:40px!important;outline:none!important;overflow-x:hidden!important;overflow-y:auto!important;padding:var(--p-2) 0 0!important;resize:none!important;white-space:pre-wrap;word-break:break-word}.ChatPrompt_editorMount__Phh4D .ProseMirror p.is-empty.is-editor-empty:before{color:var(--muted-foreground);content:attr(data-placeholder);float:left;height:0;pointer-events:none}.ChatPrompt_editorMount__Phh4D .ProseMirror .chat-prompt-command-chip,.ChatPrompt_editorMount__Phh4D .ProseMirror .slash-mention{align-items:center;background:var(--muted);border-radius:var(--radius-sm);display:inline-flex;font-size:.875em;line-height:1.4;padding:0 var(--p-1);-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:baseline;white-space:nowrap}.ChatPrompt_editorMount__Phh4D .ProseMirror .chat-prompt-command-chip{color:var(--foreground)}.ChatPrompt_submitColumn__0rY1R{align-items:center;display:flex;flex-direction:column;flex-shrink:0;justify-content:flex-end}.ChatPrompt_submitColumn__0rY1R>button:focus{box-shadow:0 0 0 2px var(--brand-color-500)!important}.ChatPrompt_submitColumn__0rY1R>button:first-child{border:none;position:relative;transition:all .2s}.ChatPrompt_submitColumn__0rY1R>button:first-child:focus{transform:scale(1.2)}.ChatPrompt_submitColumn__0rY1R>button:first-child:before{bottom:-100%;content:\"\";left:-100%;position:absolute;right:-100%;top:-100%}.ChatPrompt_attachments__KG-fG{display:flex;flex-wrap:wrap;gap:var(--p-2);margin-bottom:var(--p-2)}.ChatPrompt_attachmentItem__QJk7J{flex:1 1 300px;max-width:300px;min-width:0}";
+var S = {"root":"ChatPrompt_root__5G5bq","composer":"ChatPrompt_composer__H3c3N","fileInput":"ChatPrompt_fileInput__xdgPn","attachButton":"ChatPrompt_attachButton__gi-qF","submitButton":"ChatPrompt_submitButton__gvhDN","editorWrap":"ChatPrompt_editorWrap__Q7gat","editorMount":"ChatPrompt_editorMount__Phh4D","submitColumn":"ChatPrompt_submitColumn__0rY1R","attachments":"ChatPrompt_attachments__KG-fG","attachmentItem":"ChatPrompt_attachmentItem__QJk7J"};
 styleInject(css_248z);
 
 export { S as default };

package/dist/esm/components/ui/Chat/ChatSheet/ChatSelector.js

@@ -6,7 +6,8 @@ import { Button } from '../../Button/Button.js';
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '../../Select/Select.js';
 import S from './ChatSelector.styl.js';
 
-function ChatSelector({ id, wrapperClassName, className, onChatDeleted, onNewChat, }) {
+const deleteIconSize = (s) => s === 'sm' ? 16 : s === 'md' ? 18 : 20;
+function ChatSelector({ id, size = 'sm', variant = 'clear', wrapperClassName, className, onChatDeleted, onNewChat, }) {
     const { chats, currentChatId, setCurrentChatId, newChat, deleteChat } = useChatsForScopeId(id);
     const handleValueChange = (value) => {
         if (value === 'new') {
@@ -39,7 +40,7 @@ function ChatSelector({ id, wrapperClassName, className, onChatDeleted, onNewCha
         }
         return 'New chat';
     };
-    return (jsxs("div", { className: cn(S.wrapper, wrapperClassName), children: [jsx("div", { className: S.selectGrow, children: jsxs(Select, { variant: "clear", value: currentChatId?.toString() ?? '', onValueChange: handleValueChange, children: [jsx(SelectTrigger, { size: "sm", className: className ? cn(S.selectTrigger, className) : S.selectTrigger, children: jsx(SelectValue, { placeholder: "Select chat" }) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "new", children: "+ New Chat" }), chats.map(chat => (jsx(SelectItem, { value: chat.session_id.toString(), selected: chat.session_id === currentChatId, children: getChatDisplayName(chat) }, chat.session_id)))] })] }) }), currentChatId && chats.length > 0 && (jsx(Button, { type: "button", variant: "ghost", size: "sm", className: S.deleteBtn, "aria-label": "Delete chat", onClick: handleDeleteChat, children: jsx(Trash2Icon, { size: 16 }) }))] }));
+    return (jsxs("div", { className: cn(S.wrapper, variant === 'clear' ? S.variantClear : S.variantDefault, wrapperClassName), children: [jsx("div", { className: S.selectGrow, children: jsxs(Select, { variant: variant, value: currentChatId?.toString() ?? '', onValueChange: handleValueChange, children: [jsx(SelectTrigger, { size: size, variant: variant, className: className ? cn(S.selectTrigger, className) : S.selectTrigger, children: jsx(SelectValue, { placeholder: "Select chat" }) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "new", children: "+ New Chat" }), chats.map(chat => (jsx(SelectItem, { value: chat.session_id.toString(), selected: chat.session_id === currentChatId, children: getChatDisplayName(chat) }, chat.session_id)))] })] }) }), currentChatId && chats.length > 0 && (jsx(Button, { type: "button", variant: "ghost", size: size, className: S.deleteBtn, "aria-label": "Delete chat", onClick: handleDeleteChat, children: jsx(Trash2Icon, { size: deleteIconSize(size) }) }))] }));
 }
 
 export { ChatSelector };

package/dist/esm/components/ui/Chat/ChatSheet/ChatSelector.styl.js

@@ -1,7 +1,7 @@
 import styleInject from 'style-inject';
 
-var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.ChatSelector_wrapper__8Z4wN{align-items:center;display:flex;gap:var(--p-2);min-width:200px;z-index:1000}.ChatSelector_selectGrow__bGR0A{flex:1;min-width:0}.ChatSelector_selectTrigger__DASfc{width:100%}.ChatSelector_deleteBtn__oJ-9b{border-radius:50px;flex-shrink:0;opacity:0;pointer-events:none}.ChatSelector_wrapper__8Z4wN:hover .ChatSelector_deleteBtn__oJ-9b{opacity:1;pointer-events:auto}";
-var S = {"wrapper":"ChatSelector_wrapper__8Z4wN","selectGrow":"ChatSelector_selectGrow__bGR0A","selectTrigger":"ChatSelector_selectTrigger__DASfc","deleteBtn":"ChatSelector_deleteBtn__oJ-9b"};
+var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.ChatSelector_wrapper__8Z4wN{align-items:center;display:flex;gap:var(--p-1);min-width:160px;z-index:1000}.ChatSelector_selectGrow__bGR0A{flex:1;min-width:0}.ChatSelector_selectTrigger__DASfc{width:100%}.ChatSelector_deleteBtn__oJ-9b{border-radius:50px;flex-shrink:0;opacity:0;pointer-events:none}.ChatSelector_wrapper__8Z4wN:hover .ChatSelector_deleteBtn__oJ-9b{opacity:1;pointer-events:auto}.ChatSelector_variantClear__ZN0MI .ChatSelector_selectTrigger__DASfc{background-color:transparent;border:none;box-shadow:none}.ChatSelector_variantClear__ZN0MI .ChatSelector_selectTrigger__DASfc:hover{background-color:transparent;box-shadow:none}.ChatSelector_variantDefault__y-WeT .ChatSelector_selectTrigger__DASfc{background-color:var(--background)}.ChatSelector_variantDefault__y-WeT .ChatSelector_selectTrigger__DASfc:hover{box-shadow:0 0 0 2px var(--background)}";
+var S = {"wrapper":"ChatSelector_wrapper__8Z4wN","selectGrow":"ChatSelector_selectGrow__bGR0A","selectTrigger":"ChatSelector_selectTrigger__DASfc","deleteBtn":"ChatSelector_deleteBtn__oJ-9b","variantClear":"ChatSelector_variantClear__ZN0MI","variantDefault":"ChatSelector_variantDefault__y-WeT"};
 styleInject(css_248z);
 
 export { S as default };

package/dist/esm/components/ui/Chat/ChatSheet/ChatSheet.js

@@ -34,7 +34,7 @@ function ChatSheet({ triggerLabel = 'Open Chat', triggerAriaLabel, actionsRef, r
     if (inline) {
         return jsx(ChatChrome, { ...model.chromeProps });
     }
-    return (jsxs(Fragment, { children: [renderTrigger?.(model.toggleOpen) ?? (jsx(Button, { variant: "outline", "aria-label": triggerAriaLabel, onClick: model.toggleOpen, children: triggerLabel })), model.isOpen &&
+    return (jsxs(Fragment, { children: [renderTrigger?.(model.toggleOpen, model.isOpen) ?? (jsx(Button, { variant: "outline", "aria-label": triggerAriaLabel, onClick: model.toggleOpen, children: triggerLabel })), model.isOpen &&
                 model.chatPanelContainer &&
                 createPortal(jsx(ChatChrome, { ...model.chromeProps }), model.chatPanelContainer)] }));
 }

package/dist/esm/components/ui/FileChip/FileChip.js

@@ -3,7 +3,6 @@ import cn from 'classnames';
 import { CsvIcon } from '../../icons/CsvIcon/CsvIcon.js';
 import { CardHeader, CardAction } from '../Card/Card.js';
 import { XIcon, FileTextIcon } from '@phosphor-icons/react';
-import { LayoutDashboard } from 'lucide-react';
 import S from './FileChip.styl.js';
 
 const FORMAT_ICON_SIZE = 32;
@@ -11,16 +10,13 @@ function FormatIcon({ format }) {
     if (format === 'csv') {
         return jsx(CsvIcon, { size: FORMAT_ICON_SIZE });
     }
-    if (format === 'dashboard') {
-        return (jsx(LayoutDashboard, { size: FORMAT_ICON_SIZE, "aria-hidden": true, style: { color: 'var(--muted-foreground)' } }));
-    }
     return (jsx(FileTextIcon, { size: FORMAT_ICON_SIZE, "aria-hidden": true, style: { color: 'var(--muted-foreground)' } }));
 }
-function FileChipHeader({ name, format, hint, onRemove, }) {
-    return (jsx(CardHeader, { className: S.header, icon: jsx(FormatIcon, { format: format }), title: name, description: hint, titleClassName: S.title, descriptionClassName: S.hint, tooltipProps: { maxWidth: 400 }, children: onRemove ? (jsx(CardAction, { children: jsx("button", { type: "button", className: S.remove, "aria-label": `Remove ${name}`, onClick: onRemove, children: jsx(XIcon, { size: 14, "aria-hidden": true }) }) })) : null }));
+function FileChipHeader({ name, format, hint, icon, onRemove, }) {
+    return (jsx(CardHeader, { className: S.header, icon: icon ?? jsx(FormatIcon, { format: format }), title: name, description: hint, titleClassName: S.title, descriptionClassName: S.hint, tooltipProps: { maxWidth: 400 }, children: onRemove ? (jsx(CardAction, { children: jsx("button", { type: "button", className: S.remove, "aria-label": `Remove ${name}`, onClick: onRemove, children: jsx(XIcon, { size: 14, "aria-hidden": true }) }) })) : null }));
 }
-function FileChip({ name, format, hint, onClick, onRemove, className, }) {
-    const header = (jsx(FileChipHeader, { name: name, format: format, hint: hint, onRemove: onRemove }));
+function FileChip({ name, format, hint, icon, onClick, onRemove, className, }) {
+    const header = (jsx(FileChipHeader, { name: name, format: format, hint: hint, icon: icon, onRemove: onRemove }));
     if (onClick) {
         return (jsx("button", { type: "button", className: cn(S.root, S.interactive, className), "aria-label": `${hint}: ${name}`, onClick: onClick, children: header }));
     }

package/dist/esm/components/ui/Select/Select.styl.js

@@ -1,6 +1,6 @@
 import styleInject from 'style-inject';
 
-var css_248z = ".Select_selectTrigger__oTOBl{align-items:center;background-color:var(--background);border:none;border-radius:var(--p-4);box-shadow:none;color:var(--foreground);cursor:pointer;display:flex;font-size:var(--text-sm);font-weight:500;gap:var(--p-1);justify-content:space-between;max-width:calc(90vw - var(--page-x-padding)*2);outline:none;overflow:hidden;padding:var(--p-1) var(--p-3);position:relative;transition:all .2s ease-in-out;white-space:nowrap;width:-moz-fit-content;width:fit-content}.Select_selectTrigger__oTOBl:before{background-image:linear-gradient(to right,transparent,var(--background));content:\"\";display:block;height:100%;left:60vw;min-height:100%;min-width:var(--page-x-padding);position:absolute;width:var(--page-x-padding);width:20%}.Select_selectTrigger__oTOBl[aria-expanded=true]:before{display:none}.Select_selectTrigger__oTOBl.Select_darker__wwisI{background-color:var(--muted)}.Select_selectTrigger__oTOBl:hover{box-shadow:0 0 0 2px var(--background)}.Select_selectTrigger__oTOBl[data-size=md]{height:1.75rem}.Select_selectTrigger__oTOBl[data-size=sm]{font-size:var(--text-xs);height:1.75rem}.Select_selectTrigger__oTOBl[data-size=lg]{font-size:var(--text-sm);height:2.25rem}.Select_selectTrigger__oTOBl[data-placeholder]{color:var(--muted-foreground)}.Select_selectTrigger__oTOBl:focus-visible{border-color:var(--ring)}.Select_selectTrigger__oTOBl[aria-invalid=true]{border-color:var(--destructive)}.Select_selectTrigger__oTOBl:disabled{cursor:not-allowed;opacity:.5}.Select_selectTrigger__oTOBl [data-slot=select-value]{align-items:center;display:flex;gap:var(--p-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Select_selectTrigger__oTOBl svg{flex-shrink:0;pointer-events:none}.Select_selectTrigger__oTOBl svg:not([class*=text-]){color:var(--foreground)}.Select_selectTrigger__oTOBl svg:not([class*=size-]){height:1rem;width:1rem}.dark .Select_selectTrigger__oTOBl:not(.Select_darker__wwisI){background-color:var(--background)}.dark .Select_selectTrigger__oTOBl:not(.Select_darker__wwisI):hover{background-color:var(--background-alpha-800)}.Select_clear__vxo-N{background-color:transparent;border:none;box-shadow:none;padding:0}.Select_clear__vxo-N:focus-visible{border:none;box-shadow:none}@media (prefers-color-scheme:dark){.Select_clear__vxo-N,.Select_clear__vxo-N:hover{background-color:transparent}}.Select_selectContent__Wbegi{background-color:var(--popover);border:1px solid var(--border);border-radius:var(--p-4);box-shadow:0 10px 15px -3px rgba(0,0,0,.1);color:var(--popover-foreground);max-height:var(--radix-select-content-available-height);min-width:8rem;overflow-x:hidden;overflow-y:auto;position:relative;transform-origin:var(--radix-select-content-transform-origin);z-index:1100}.Select_selectContent__Wbegi[data-state=open]{animation:Select_fadeIn__hm7v- .25s,Select_zoomIn__ep77v .1s}.Select_selectContent__Wbegi[data-state=closed]{animation:Select_fadeOut__A-ccN .25s,Select_zoomOut__pZ-7e .1s}.Select_selectContent__Wbegi[data-side=bottom]{animation:Select_fadeIn__hm7v- .25s,Select_slideInFromTop__O1LeF .1s}.Select_selectContent__Wbegi[data-side=left]{animation:Select_fadeIn__hm7v- .25s,Select_slideInFromRight__iJq-J .1s}.Select_selectContent__Wbegi[data-side=right]{animation:Select_fadeIn__hm7v- .25s,Select_slideInFromLeft__8tm7S .1s}.Select_selectContent__Wbegi[data-side=top]{animation:Select_fadeIn__hm7v- .25s,Select_slideInFromBottom__PsvX6 .1s}.Select_selectContentPopper__TU8Jn[data-side=bottom]{transform:translateY(.25rem)}.Select_selectContentPopper__TU8Jn[data-side=left]{transform:translateX(-.25rem)}.Select_selectContentPopper__TU8Jn[data-side=right]{transform:translateX(.25rem)}.Select_selectContentPopper__TU8Jn[data-side=top]{transform:translateY(-.25rem)}.Select_selectViewport__OtOW7{padding:var(--p-1)}.Select_selectViewportPopper__dUoFi{height:var(--radix-select-trigger-height);min-width:var(--radix-select-trigger-width);scroll-margin:var(--p-1) 0;width:100%}.Select_selectLabel__rX9cj{color:var(--muted-foreground);font-size:var(--text-xs);padding:var(--p-2) var(--p-2);padding-bottom:var(--p-2);padding-top:var(--p-2)}.Select_selectItem__JLg4D{align-items:center;border-radius:var(--radius-sm);cursor:default;display:flex;flex-grow:1;font-size:var(--text-sm);gap:var(--p-2);outline:none;padding:var(--p-1) var(--p-2);position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.Select_selectItem__JLg4D.Select_selected__tmqut{background-color:var(--accent);font-weight:600}.Select_selectItem__JLg4D:first-child{border-top-left-radius:var(--p-3);border-top-right-radius:var(--p-3)}.Select_selectItem__JLg4D:last-child{border-bottom-left-radius:var(--p-3);border-bottom-right-radius:var(--p-3)}.Select_selectItem__JLg4D:focus{background-color:var(--accent);color:var(--accent-foreground)}.Select_selectItem__JLg4D[data-disabled]{opacity:.5;pointer-events:none}.Select_selectItem__JLg4D svg{flex-shrink:0;pointer-events:none}.Select_selectItem__JLg4D svg:not([class*=text-]){color:var(--muted-foreground)}.Select_selectItem__JLg4D svg:not([class*=size-]){height:1rem;width:1rem}.Select_selectItem__JLg4D span:not([data-slot=analysis-icon]){display:flex;flex-grow:1;width:100%}.Select_selectItem__JLg4D span:last-child{align-items:center;display:flex;gap:var(--p-2)}.Select_selectItemText__9JXv9{align-items:center;display:flex;gap:var(--p-1)}.Select_selectItemIndicatorContainer__Vte2-{align-items:center;display:flex;height:var(--p-8);justify-content:center;position:absolute;right:0;width:var(--p-8)}.Select_selectItemIndicator__9HcxQ{height:1rem;width:1rem}.Select_selectSeparator__OZw53{background-color:var(--border);height:1px;margin:-.25rem var(--p-1) var(--p-1);pointer-events:none}.Select_selectScrollButton__-z-iR{align-items:center;cursor:default;display:flex;justify-content:center;padding:var(--p-1) 0}.Select_selectIcon__-TfP9{height:1rem;margin-right:calc(var(--p-1)*-1);opacity:.5;width:1rem}.Select_selectScrollIcon__ZyTUI{height:1rem;width:1rem}@keyframes Select_fadeIn__hm7v-{0%{opacity:0}to{opacity:1}}@keyframes Select_fadeOut__A-ccN{0%{opacity:1}to{opacity:0}}@keyframes Select_zoomIn__ep77v{0%{transform:scale(.95)}to{transform:scale(1)}}@keyframes Select_zoomOut__pZ-7e{0%{transform:scale(1)}to{transform:scale(.95)}}@keyframes Select_slideInFromTop__O1LeF{0%{transform:translateY(-.5rem)}to{transform:translateY(.2)}}@keyframes Select_slideInFromBottom__PsvX6{0%{transform:translateY(.5rem)}to{transform:translateY(.2)}}@keyframes Select_slideInFromLeft__8tm7S{0%{transform:translateX(-.5rem)}to{transform:translateX(.2)}}@keyframes Select_slideInFromRight__iJq-J{0%{transform:translateX(.5rem)}to{transform:translateY(.2)}}";
+var css_248z = ".Select_selectTrigger__oTOBl{align-items:center;background-color:var(--background);border:none;border-radius:var(--p-4);box-shadow:none;color:var(--foreground);cursor:pointer;display:flex;font-size:var(--text-sm);font-weight:500;gap:var(--p-1);justify-content:space-between;max-width:calc(90vw - var(--page-x-padding)*2);outline:none;overflow:hidden;padding:var(--p-1) var(--p-3);position:relative;transition:all .2s ease-in-out;white-space:nowrap;width:-moz-fit-content;width:fit-content}.Select_selectTrigger__oTOBl:before{background-image:linear-gradient(to right,transparent,var(--background));content:\"\";display:block;height:100%;left:60vw;min-height:100%;min-width:var(--page-x-padding);position:absolute;width:var(--page-x-padding);width:20%}.Select_selectTrigger__oTOBl[aria-expanded=true]:before{display:none}.Select_selectTrigger__oTOBl.Select_darker__wwisI{background-color:var(--muted)}.Select_selectTrigger__oTOBl:hover{box-shadow:0 0 0 2px var(--background)}.Select_selectTrigger__oTOBl[data-size=sm]{border-radius:var(--p-4);font-size:var(--text-xs);height:auto;min-height:28px;padding:0 var(--p-4)}.Select_selectTrigger__oTOBl[data-size=md]{border-radius:var(--p-4);font-size:var(--text-sm);height:auto;min-height:40px;padding:var(--p-3) var(--p-4)}.Select_selectTrigger__oTOBl[data-size=lg]{border-radius:var(--p-4);font-size:var(--text-sm);height:auto;min-height:auto;padding:var(--p-4) var(--p-6)}.Select_selectTrigger__oTOBl[data-placeholder]{color:var(--muted-foreground)}.Select_selectTrigger__oTOBl:focus-visible{border-color:var(--ring)}.Select_selectTrigger__oTOBl[aria-invalid=true]{border-color:var(--destructive)}.Select_selectTrigger__oTOBl:disabled{cursor:not-allowed;opacity:.5}.Select_selectTrigger__oTOBl [data-slot=select-value]{align-items:center;display:flex;gap:var(--p-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Select_selectTrigger__oTOBl svg{flex-shrink:0;pointer-events:none}.Select_selectTrigger__oTOBl svg:not([class*=text-]){color:var(--foreground)}.Select_selectTrigger__oTOBl svg:not([class*=size-]){height:1rem;width:1rem}.dark .Select_selectTrigger__oTOBl:not(.Select_darker__wwisI){background-color:var(--background)}.dark .Select_selectTrigger__oTOBl:not(.Select_darker__wwisI):hover{background-color:var(--background-alpha-800)}.Select_clear__vxo-N{background-color:transparent;border:none;box-shadow:none}.Select_clear__vxo-N:focus-visible{border:none;box-shadow:none}@media (prefers-color-scheme:dark){.Select_clear__vxo-N,.Select_clear__vxo-N:hover{background-color:transparent}}.Select_selectContent__Wbegi{background-color:var(--popover);border:1px solid var(--border);border-radius:var(--p-4);box-shadow:0 10px 15px -3px rgba(0,0,0,.1);color:var(--popover-foreground);max-height:var(--radix-select-content-available-height);min-width:8rem;overflow-x:hidden;overflow-y:auto;position:relative;transform-origin:var(--radix-select-content-transform-origin);z-index:1100}.Select_selectContent__Wbegi[data-state=open]{animation:Select_fadeIn__hm7v- .25s,Select_zoomIn__ep77v .1s}.Select_selectContent__Wbegi[data-state=closed]{animation:Select_fadeOut__A-ccN .25s,Select_zoomOut__pZ-7e .1s}.Select_selectContent__Wbegi[data-side=bottom]{animation:Select_fadeIn__hm7v- .25s,Select_slideInFromTop__O1LeF .1s}.Select_selectContent__Wbegi[data-side=left]{animation:Select_fadeIn__hm7v- .25s,Select_slideInFromRight__iJq-J .1s}.Select_selectContent__Wbegi[data-side=right]{animation:Select_fadeIn__hm7v- .25s,Select_slideInFromLeft__8tm7S .1s}.Select_selectContent__Wbegi[data-side=top]{animation:Select_fadeIn__hm7v- .25s,Select_slideInFromBottom__PsvX6 .1s}.Select_selectContentPopper__TU8Jn[data-side=bottom]{transform:translateY(.25rem)}.Select_selectContentPopper__TU8Jn[data-side=left]{transform:translateX(-.25rem)}.Select_selectContentPopper__TU8Jn[data-side=right]{transform:translateX(.25rem)}.Select_selectContentPopper__TU8Jn[data-side=top]{transform:translateY(-.25rem)}.Select_selectViewport__OtOW7{padding:var(--p-1)}.Select_selectViewportPopper__dUoFi{height:var(--radix-select-trigger-height);min-width:var(--radix-select-trigger-width);scroll-margin:var(--p-1) 0;width:100%}.Select_selectLabel__rX9cj{color:var(--muted-foreground);font-size:var(--text-xs);padding:var(--p-2) var(--p-2);padding-bottom:var(--p-2);padding-top:var(--p-2)}.Select_selectItem__JLg4D{align-items:center;border-radius:var(--radius-sm);cursor:default;display:flex;flex-grow:1;font-size:var(--text-sm);gap:var(--p-2);outline:none;padding:var(--p-1) var(--p-2);position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.Select_selectItem__JLg4D.Select_selected__tmqut{background-color:var(--accent);font-weight:600}.Select_selectItem__JLg4D:first-child{border-top-left-radius:var(--p-3);border-top-right-radius:var(--p-3)}.Select_selectItem__JLg4D:last-child{border-bottom-left-radius:var(--p-3);border-bottom-right-radius:var(--p-3)}.Select_selectItem__JLg4D:focus{background-color:var(--accent);color:var(--accent-foreground)}.Select_selectItem__JLg4D[data-disabled]{opacity:.5;pointer-events:none}.Select_selectItem__JLg4D svg{flex-shrink:0;pointer-events:none}.Select_selectItem__JLg4D svg:not([class*=text-]){color:var(--muted-foreground)}.Select_selectItem__JLg4D svg:not([class*=size-]){height:1rem;width:1rem}.Select_selectItem__JLg4D span:not([data-slot=analysis-icon]){display:flex;flex-grow:1;width:100%}.Select_selectItem__JLg4D span:last-child{align-items:center;display:flex;gap:var(--p-2)}.Select_selectItemText__9JXv9{align-items:center;display:flex;gap:var(--p-1)}.Select_selectItemIndicatorContainer__Vte2-{align-items:center;display:flex;height:var(--p-8);justify-content:center;position:absolute;right:0;width:var(--p-8)}.Select_selectItemIndicator__9HcxQ{height:1rem;width:1rem}.Select_selectSeparator__OZw53{background-color:var(--border);height:1px;margin:-.25rem var(--p-1) var(--p-1);pointer-events:none}.Select_selectScrollButton__-z-iR{align-items:center;cursor:default;display:flex;justify-content:center;padding:var(--p-1) 0}.Select_selectIcon__-TfP9{height:1rem;margin-right:calc(var(--p-1)*-1);opacity:.5;width:1rem}.Select_selectScrollIcon__ZyTUI{height:1rem;width:1rem}@keyframes Select_fadeIn__hm7v-{0%{opacity:0}to{opacity:1}}@keyframes Select_fadeOut__A-ccN{0%{opacity:1}to{opacity:0}}@keyframes Select_zoomIn__ep77v{0%{transform:scale(.95)}to{transform:scale(1)}}@keyframes Select_zoomOut__pZ-7e{0%{transform:scale(1)}to{transform:scale(.95)}}@keyframes Select_slideInFromTop__O1LeF{0%{transform:translateY(-.5rem)}to{transform:translateY(.2)}}@keyframes Select_slideInFromBottom__PsvX6{0%{transform:translateY(.5rem)}to{transform:translateY(.2)}}@keyframes Select_slideInFromLeft__8tm7S{0%{transform:translateX(-.5rem)}to{transform:translateX(.2)}}@keyframes Select_slideInFromRight__iJq-J{0%{transform:translateX(.5rem)}to{transform:translateY(.2)}}";
 var S = {"selectTrigger":"Select_selectTrigger__oTOBl","darker":"Select_darker__wwisI","clear":"Select_clear__vxo-N","selectContent":"Select_selectContent__Wbegi","fadeIn":"Select_fadeIn__hm7v-","zoomIn":"Select_zoomIn__ep77v","fadeOut":"Select_fadeOut__A-ccN","zoomOut":"Select_zoomOut__pZ-7e","slideInFromTop":"Select_slideInFromTop__O1LeF","slideInFromRight":"Select_slideInFromRight__iJq-J","slideInFromLeft":"Select_slideInFromLeft__8tm7S","slideInFromBottom":"Select_slideInFromBottom__PsvX6","selectContentPopper":"Select_selectContentPopper__TU8Jn","selectViewport":"Select_selectViewport__OtOW7","selectViewportPopper":"Select_selectViewportPopper__dUoFi","selectLabel":"Select_selectLabel__rX9cj","selectItem":"Select_selectItem__JLg4D","selected":"Select_selected__tmqut","selectItemText":"Select_selectItemText__9JXv9","selectItemIndicatorContainer":"Select_selectItemIndicatorContainer__Vte2-","selectItemIndicator":"Select_selectItemIndicator__9HcxQ","selectSeparator":"Select_selectSeparator__OZw53","selectScrollButton":"Select_selectScrollButton__-z-iR","selectIcon":"Select_selectIcon__-TfP9","selectScrollIcon":"Select_selectScrollIcon__ZyTUI"};
 styleInject(css_248z);
 

package/dist/esm/types/src/components/ui/Chat/ChatEmptyState/ChatEmptyState.d.ts

@@ -1,3 +1,3 @@
-import { PropsWithChildren } from 'react';
 import type { ChatEmptyStateProps } from './ChatEmptyState.types';
-export declare function ChatEmptyState({ icon, title, description, additionalContent, children, }: PropsWithChildren<ChatEmptyStateProps>): import("react/jsx-runtime").JSX.Element;
+import { PropsWithChildren } from 'react';
+export declare function ChatEmptyState({ icon, title, description, additionalContent, children, className, }: PropsWithChildren<ChatEmptyStateProps>): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/ui/Chat/ChatEmptyState/ChatEmptyState.types.d.ts

@@ -5,6 +5,7 @@ export type ChatEmptyStateContext = {
 export interface ChatEmptyStateProps {
     icon?: React.ReactNode;
     title?: string;
+    className?: string;
     description?: string;
     /** Extra block below description (resolved before render in `ChatEmptyState`). */
     additionalContent?: React.ReactNode;

package/dist/esm/types/src/components/ui/Chat/ChatSheet/ChatSelector.d.ts

@@ -1,4 +1,5 @@
-export interface ChatSelectorProps {
+import type { SelectProps, SelectTriggerProps } from '#uilib/components/ui/Select/Select.types.js';
+export interface ChatSelectorProps extends SelectProps, Pick<SelectTriggerProps, 'size' | 'variant'> {
     id: string;
     wrapperClassName?: string;
     className?: string;
@@ -6,4 +7,4 @@ export interface ChatSelectorProps {
     /** When set, used for "+ New Chat" instead of the default empty `newChat()`. */
     onNewChat?: () => void;
 }
-export declare function ChatSelector({ id, wrapperClassName, className, onChatDeleted, onNewChat, }: ChatSelectorProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatSelector({ id, size, variant, wrapperClassName, className, onChatDeleted, onNewChat, }: ChatSelectorProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/ui/Chat/ChatSheet/ChatSheet.d.ts

@@ -10,7 +10,7 @@ export interface ChatSheetProps extends Omit<UseChatPanelChromeModelInput, 'embe
     title?: string;
     /** Imperative open / new-chat for triggers outside `renderTrigger` (e.g. sidebar). */
     actionsRef?: React.MutableRefObject<ChatSheetActions | null>;
-    renderTrigger?: (toggleOpen: () => void) => React.ReactNode;
+    renderTrigger?: (toggleOpen: () => void, isOpen: boolean) => React.ReactNode;
     triggerLabel?: React.ReactNode;
     /** aria-label for icon-only trigger (required when trigger has no visible text) */
     triggerAriaLabel?: string;

package/dist/esm/types/src/components/ui/FileChip/FileChip.d.ts

@@ -1,2 +1,2 @@
 import type { FileChipProps } from './FileChip.types';
-export declare function FileChip({ name, format, hint, onClick, onRemove, className, }: FileChipProps): import("react/jsx-runtime").JSX.Element;
+export declare function FileChip({ name, format, hint, icon, onClick, onRemove, className, }: FileChipProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/ui/FileChip/FileChip.types.d.ts

@@ -1,8 +1,9 @@
-export type FileChipFormat = 'csv' | 'pdf' | 'text' | 'dashboard';
+export type FileChipFormat = 'csv' | 'pdf' | 'text';
 export type FileChipProps = {
     name: string;
     format: FileChipFormat;
     hint: string;
+    icon?: React.ReactNode;
     onClick?: () => void;
     onRemove?: () => void;
     disabled?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sybilion/uilib",
-  "version": "1.3.84",
+  "version": "1.3.86",
   "description": "Sybilion Design System — React UI components (Webpack + Stylus)",
   "publishConfig": {
     "access": "public",

package/src/components/ui/Chat/ChatEmptyState/ChatEmptyState.tsx

@@ -1,8 +1,8 @@
+import type { ChatEmptyStateProps } from './ChatEmptyState.types';
 import { PropsWithChildren } from 'react';
-
 import S from './ChatEmptyState.styl';
-import type { ChatEmptyStateProps } from './ChatEmptyState.types';
 import SparklesIcon from './icons/sparkles.svg';
+import cn from 'classnames';
 
 export function ChatEmptyState({
   icon = <SparklesIcon />,
@@ -10,9 +10,10 @@ export function ChatEmptyState({
   description,
   additionalContent,
   children,
+  className,
 }: PropsWithChildren<ChatEmptyStateProps>) {
   return (
-    <div className={S.root}>
+    <div className={cn(S.root, className)}>
       {icon && <div className={S.icon}>{icon}</div>}
       {title && <h2>{title}</h2>}
       {description && <p>{description}</p>}

package/src/components/ui/Chat/ChatEmptyState/ChatEmptyState.types.ts

@@ -7,6 +7,7 @@ export type ChatEmptyStateContext = {
 export interface ChatEmptyStateProps {
   icon?: React.ReactNode;
   title?: string;
+  className?: string;
   description?: string;
   /** Extra block below description (resolved before render in `ChatEmptyState`). */
   additionalContent?: React.ReactNode;

package/src/components/ui/Chat/ChatPrompt/ChatPrompt.styl

@@ -21,6 +21,11 @@ INPUT_MAX_HEIGHT = 200px
 .fileInput
   display none
 
+.attachButton
+.submitButton
+  position relative
+  top -2px
+
 .attachButton
   flex-shrink 0
   align-self flex-end
@@ -99,7 +104,6 @@ INPUT_MAX_HEIGHT = 200px
   flex-shrink 0
   align-items center
   justify-content flex-end
-  margin-top -4px
 
   & > button:focus
     box-shadow 0 0 0 2px var(--brand-color-500) !important

package/src/components/ui/Chat/ChatPrompt/ChatPrompt.styl.d.ts

@@ -9,6 +9,7 @@ interface CssExports {
   'editorWrap': string;
   'fileInput': string;
   'root': string;
+  'submitButton': string;
   'submitColumn': string;
 }
 export const cssExports: CssExports;

package/src/components/ui/Chat/ChatSheet/ChatSelector.styl

@@ -3,8 +3,8 @@
 .wrapper
   display flex
   align-items center
-  gap var(--p-2)
-  min-width 200px
+  gap var(--p-1)
+  min-width 160px
   z-index 1000
 
 .selectGrow
@@ -24,3 +24,19 @@
 .wrapper:hover .deleteBtn
   opacity 1
   pointer-events auto
+
+// Variant styles
+.variantClear .selectTrigger
+  border none
+  background-color transparent
+  box-shadow none
+
+  &:hover
+    box-shadow none
+    background-color transparent
+
+.variantDefault .selectTrigger
+  background-color var(--background)
+
+  &:hover
+    box-shadow 0 0 0 2px var(--background)

package/src/components/ui/Chat/ChatSheet/ChatSelector.styl.d.ts

@@ -4,6 +4,8 @@ interface CssExports {
   'deleteBtn': string;
   'selectGrow': string;
   'selectTrigger': string;
+  'variantClear': string;
+  'variantDefault': string;
   'wrapper': string;
 }
 export const cssExports: CssExports;

package/src/components/ui/Chat/ChatSheet/ChatSelector.tsx

@@ -1,6 +1,10 @@
 import cn from 'classnames';
 
 import { Chat } from '#uilib/components/ui/Chat/Chat.types';
+import type {
+  SelectProps,
+  SelectTriggerProps,
+} from '#uilib/components/ui/Select/Select.types.js';
 import { useChatsForScopeId } from '#uilib/contexts/chat-context';
 import { Trash2Icon } from 'lucide-react';
 
@@ -14,7 +18,8 @@ import {
 } from '../../Select/Select';
 import S from './ChatSelector.styl';
 
-export interface ChatSelectorProps {
+export interface ChatSelectorProps
+  extends SelectProps, Pick<SelectTriggerProps, 'size' | 'variant'> {
   id: string;
   wrapperClassName?: string;
   className?: string;
@@ -23,8 +28,13 @@ export interface ChatSelectorProps {
   onNewChat?: () => void;
 }
 
+const deleteIconSize = (s: NonNullable<SelectTriggerProps['size']>) =>
+  s === 'sm' ? 16 : s === 'md' ? 18 : 20;
+
 export function ChatSelector({
   id,
+  size = 'sm',
+  variant = 'clear',
   wrapperClassName,
   className,
   onChatDeleted,
@@ -67,15 +77,22 @@ export function ChatSelector({
   };
 
   return (
-    <div className={cn(S.wrapper, wrapperClassName)}>
+    <div
+      className={cn(
+        S.wrapper,
+        variant === 'clear' ? S.variantClear : S.variantDefault,
+        wrapperClassName,
+      )}
+    >
       <div className={S.selectGrow}>
         <Select
-          variant="clear"
+          variant={variant}
           value={currentChatId?.toString() ?? ''}
           onValueChange={handleValueChange}
         >
           <SelectTrigger
-            size="sm"
+            size={size}
+            variant={variant}
             className={
               className ? cn(S.selectTrigger, className) : S.selectTrigger
             }
@@ -100,12 +117,12 @@ export function ChatSelector({
         <Button
           type="button"
           variant="ghost"
-          size="sm"
+          size={size}
           className={S.deleteBtn}
           aria-label="Delete chat"
           onClick={handleDeleteChat}
         >
-          <Trash2Icon size={16} />
+          <Trash2Icon size={deleteIconSize(size)} />
         </Button>
       )}
     </div>

package/src/components/ui/Chat/ChatSheet/ChatSheet.tsx

@@ -22,7 +22,7 @@ export interface ChatSheetProps extends Omit<
   title?: string;
   /** Imperative open / new-chat for triggers outside `renderTrigger` (e.g. sidebar). */
   actionsRef?: React.MutableRefObject<ChatSheetActions | null>;
-  renderTrigger?: (toggleOpen: () => void) => React.ReactNode;
+  renderTrigger?: (toggleOpen: () => void, isOpen: boolean) => React.ReactNode;
   triggerLabel?: React.ReactNode;
   /** aria-label for icon-only trigger (required when trigger has no visible text) */
   triggerAriaLabel?: string;
@@ -88,7 +88,7 @@ export function ChatSheet({
 
   return (
     <>
-      {renderTrigger?.(model.toggleOpen) ?? (
+      {renderTrigger?.(model.toggleOpen, model.isOpen) ?? (
         <Button
           variant="outline"
           aria-label={triggerAriaLabel}

package/src/components/ui/FileChip/FileChip.tsx

@@ -3,7 +3,6 @@ import cn from 'classnames';
 import { CsvIcon } from '#uilib/components/icons/CsvIcon/CsvIcon';
 import { CardAction, CardHeader } from '#uilib/components/ui/Card';
 import { FileTextIcon, XIcon } from '@phosphor-icons/react';
-import { LayoutDashboard } from 'lucide-react';
 
 import S from './FileChip.styl';
 import type { FileChipFormat, FileChipProps } from './FileChip.types';
@@ -15,16 +14,6 @@ function FormatIcon({ format }: { format: FileChipFormat }) {
     return <CsvIcon size={FORMAT_ICON_SIZE} />;
   }
 
-  if (format === 'dashboard') {
-    return (
-      <LayoutDashboard
-        size={FORMAT_ICON_SIZE}
-        aria-hidden
-        style={{ color: 'var(--muted-foreground)' }}
-      />
-    );
-  }
-
   return (
     <FileTextIcon
       size={FORMAT_ICON_SIZE}
@@ -38,12 +27,16 @@ function FileChipHeader({
   name,
   format,
   hint,
+  icon,
   onRemove,
-}: Pick<FileChipProps, 'name' | 'format' | 'hint' | 'onRemove' | 'disabled'>) {
+}: Pick<
+  FileChipProps,
+  'name' | 'format' | 'hint' | 'icon' | 'onRemove' | 'disabled'
+>) {
   return (
     <CardHeader
       className={S.header}
-      icon={<FormatIcon format={format} />}
+      icon={icon ?? <FormatIcon format={format} />}
       title={name}
       description={hint}
       titleClassName={S.title}
@@ -70,6 +63,7 @@ export function FileChip({
   name,
   format,
   hint,
+  icon,
   onClick,
   onRemove,
   className,
@@ -79,6 +73,7 @@ export function FileChip({
       name={name}
       format={format}
       hint={hint}
+      icon={icon}
       onRemove={onRemove}
     />
   );

package/src/components/ui/FileChip/FileChip.types.ts

@@ -1,9 +1,10 @@
-export type FileChipFormat = 'csv' | 'pdf' | 'text' | 'dashboard';
+export type FileChipFormat = 'csv' | 'pdf' | 'text';
 
 export type FileChipProps = {
   name: string;
   format: FileChipFormat;
   hint: string;
+  icon?: React.ReactNode;
   onClick?: () => void;
   onRemove?: () => void;
   disabled?: boolean;

package/src/components/ui/Select/Select.styl

@@ -46,15 +46,25 @@
     box-shadow 0 0 0 2px var(--background)
     // color var(--muted-foreground)
 
-  &[data-size="md"]
-    height 1.75rem
-
   &[data-size="sm"]
-    height 1.75rem
+    height auto
+    min-height 28px
+    padding 0 var(--p-4)
+    border-radius var(--p-4)
     font-size var(--text-xs)
 
+  &[data-size="md"]
+    height auto
+    min-height 40px
+    padding var(--p-3) var(--p-4)
+    border-radius var(--p-4)
+    font-size var(--text-sm)
+
   &[data-size="lg"]
-    height 2.25rem
+    height auto
+    min-height auto
+    padding var(--p-4) var(--p-6)
+    border-radius var(--p-4)
     font-size var(--text-sm)
 
   &[data-placeholder]
@@ -97,7 +107,6 @@
 
 
 .clear
-  padding 0
   border none
   background-color transparent
   box-shadow none

package/src/docs/pages/SelectPage.tsx

@@ -1,5 +1,3 @@
-import { useState } from 'react';
-
 import { PageContentSection } from '#uilib/components/ui/Page';
 import {
   Select,
@@ -12,28 +10,87 @@ import {
 import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
 import { DocsHeaderActions } from '../docsHeaderActions';
 
-export default function SelectPage() {
-  const [v, setV] = useState('apple');
+const VARIANTS = ['default', 'clear'] as const;
+const SIZES = ['sm', 'md', 'lg'] as const;
+
+const FRUIT_OPTIONS = [
+  { value: 'apple', label: 'Apple' },
+  { value: 'orange', label: 'Orange' },
+  { value: 'banana', label: 'Banana' },
+] as const;
+
+function DemoSelect({
+  variant,
+  size,
+}: {
+  variant: (typeof VARIANTS)[number];
+  size: (typeof SIZES)[number];
+}) {
+  return (
+    <Select defaultValue="apple">
+      <SelectTrigger variant={variant} size={size} style={{ width: 200 }}>
+        <SelectValue placeholder="Pick fruit" />
+      </SelectTrigger>
+      <SelectContent>
+        {FRUIT_OPTIONS.map(o => (
+          <SelectItem key={o.value} value={o.value}>
+            {o.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}
 
+export default function SelectPage() {
   return (
     <>
       <AppPageHeader
         breadcrumbs={[{ label: 'Select' }]}
         title="Select"
-        subheader="Radix select."
+        subheader="Radix select — variants and sizes."
         actions={<DocsHeaderActions />}
       />
-      <PageContentSection>
-        <Select value={v} onValueChange={setV}>
-          <SelectTrigger style={{ width: 200 }}>
-            <SelectValue placeholder="Pick fruit" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="apple">Apple</SelectItem>
-            <SelectItem value="orange">Orange</SelectItem>
-            <SelectItem value="banana">Banana</SelectItem>
-          </SelectContent>
-        </Select>
+      <PageContentSection
+        style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}
+      >
+        <section>
+          <h3 style={{ marginBottom: '1rem' }}>Variants × sizes</h3>
+          <div style={{ overflowX: 'auto' }}>
+            <table style={{ borderCollapse: 'collapse', width: '100%' }}>
+              <thead>
+                <tr>
+                  <th style={{ textAlign: 'left', padding: '0.5rem' }} />
+                  {SIZES.map(s => (
+                    <th key={s} style={{ padding: '0.5rem' }}>
+                      {s}
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                {VARIANTS.map(v => (
+                  <tr key={v}>
+                    <td
+                      style={{
+                        padding: '0.5rem',
+                        fontWeight: 600,
+                        whiteSpace: 'nowrap',
+                      }}
+                    >
+                      {v}
+                    </td>
+                    {SIZES.map(s => (
+                      <td key={s} style={{ padding: '0.5rem' }}>
+                        <DemoSelect variant={v} size={s} />
+                      </td>
+                    ))}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </section>
       </PageContentSection>
     </>
   );