@comfyorg/design-system 1.1.0 → 1.3.0-alpha.0

package/src/css/theme.css

@@ -0,0 +1,243 @@
+@layer theme, base, components, utilities;
+
+@import './fonts.css';
+@import './component-support.css';
+@import './_deprecated-aliases.css';
+@import './_legacy-palette.css';
+@import 'tailwindcss/theme' layer(theme);
+@import 'tailwindcss/utilities' layer(utilities);
+
+@layer base {
+  *,
+  ::before,
+  ::after {
+    box-sizing: border-box;
+    border-color: var(--border);
+  }
+
+  button,
+  input,
+  select,
+  optgroup,
+  textarea,
+  ::file-selector-button {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+  }
+}
+
+/* Safelist dynamic comfy icons for node library folders */
+@source inline("icon-[comfy--{ai-model,anthropic,bfl,bria,bytedance,claude,comfy-cloud,comfy-logo,credits,elevenlabs,extensions-blocks,file-output,gemini,grok,hitpaw,ideogram,image-ai-edit,kling,ltxv,luma,magnific,mask,meshy,minimax,moonvalley-marey,node,openai,pin,pixverse,play,recraft,reve,rodin,runway,sora,stability-ai,template,tencent,topaz,tripo,veo,vidu,wan,wavespeed,workflow,quiver}]");
+
+/* Badge icon names are built at runtime, so the scanner cannot find them. */
+@source inline("icon-mask-[comfy--{3d-decomp,ai-model,anthropic,batch-images-node,bfl,bria,brightness-contrast,bytedance,canny,canny-to-image,canny-to-video,channels,chromatic-aberration,claude,comfy-c,comfy-logo,credits,depth-to-image,depth-to-video,dial,elevenlabs,extensions-blocks,file-output,frames-to-video,gemini,get-video-components,glow,grain,grok,hitpaw,ideogram,image-ai-edit,image-batch,image-blur,image-canny,image-captioning,image-collage,image-compare,image-depth,image-edit,image-inpaint,image-invert,image-outpaint,image-outpainting,image-remove-background,image-rotate,image-select-object-segmentation,image-shader,image-sharpen,image-to-3d,image-to-image,image-to-layers,image-to-video,image-upscale,image-vectorize,kling,load-3d,load-audio,load-video,lora-loader,ltxv,luma,magnific,mask,meshy,minimax,moonvalley-marey,node,open-ai-chat-node,openai,pin,pixverse,play,pose-to-image,pose-to-video,quiver,recraft,reve,rodin,runway,save-3d,save-audio,save-video,send,sora,stability-ai,template,tencent,text-prompt-enhance,text-to-3d,text-to-audio,text-to-image,text-to-video,topaz,tripo,veo,video-captioning,video-edit,video-enhance,video-extract-frame,video-inpaint,video-interpolation,video-select-object-segmentation,video-slice,video-split-screen,video-trim,video-upscale,vidu,voice-clone,wan,wavespeed,workflow}]");
+
+@theme {
+  --shadow-2xs: 0 1px 1px var(--shadow-color);
+  --shadow-xs: 0 1px 2px var(--shadow-color);
+  --shadow-sm: 0 1px 4px var(--shadow-color);
+  --shadow-md: 1px 1px 8px 0 var(--shadow-color);
+  --shadow-lg: 0 2px 16px 0 var(--shadow-color);
+  --shadow-xl: 0 8px 24px var(--shadow-color);
+  --shadow-2xl: 0 24px 80px var(--shadow-color);
+  --drop-shadow-xs: 0 1px 1px var(--shadow-color);
+  --drop-shadow-sm: 1px 1px 4px var(--shadow-color);
+  --drop-shadow-md: 1px 1px 8px var(--shadow-color);
+  --drop-shadow-lg: 0 9px 7px var(--shadow-color);
+  --shadow-inset-highlight: inset 0 1px 0 0 rgb(from white r g b / 0.1);
+
+  --color-bypass: #6a246a;
+  --color-success: var(--color-jade-600);
+}
+
+:root {
+  color-scheme: dark;
+
+  --background: var(--color-charcoal-800);
+  --foreground: var(--color-white);
+  --card: var(--color-charcoal-600);
+  --node-foreground: var(--color-smoke-700);
+  --node-header: var(--color-charcoal-700);
+  --node-border: var(--color-charcoal-100);
+  --primary: var(--color-azure-600);
+  --secondary: var(--color-charcoal-600);
+  --muted: var(--color-charcoal-300);
+  --muted-foreground: var(--color-smoke-800);
+  --accent: var(--color-charcoal-400);
+  --destructive: var(--color-coral-700);
+  --border: var(--color-charcoal-200);
+  --ring: var(--muted-foreground);
+  --popover: var(--background);
+  --input: var(--accent);
+  --node: var(--card);
+
+  --default-transition-duration: 0.1s;
+  --comfy-topbar-height: 2.5rem;
+  --workflow-tabs-height: 2.375rem;
+  --comfy-textarea-font-size: 10px;
+
+  --warning: var(--color-gold-600);
+  --shadow-color: rgb(0 0 0 / 0.4);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-node: var(--node);
+  --color-node-foreground: var(--node-foreground);
+  --color-node-header: var(--node-header);
+  --color-node-border: var(--node-border);
+  --color-popover: var(--popover);
+  --color-primary: var(--primary);
+  --color-secondary: var(--secondary);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  /* Semantic tokens */
+  --color-warning: var(--warning);
+}
+
+@utility floating-panel {
+  border-radius: var(--radius-xl);
+  padding: --spacing(1);
+  background-color: var(--background);
+  box-shadow: var(--shadow-inset-highlight), theme(boxShadow.lg);
+}
+
+/* Everthing below here to be cleaned up over time. */
+
+:root[data-palette-switching] * {
+  transition: none;
+}
+
+body {
+  width: 100vw;
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+  min-height: -webkit-fill-available;
+  max-height: -webkit-fill-available;
+  min-width: -webkit-fill-available;
+  max-width: -webkit-fill-available;
+  font-family: Inter, Arial, sans-serif;
+  background-color: var(--background);
+  color: var(--foreground);
+}
+
+.comfy-multiline-input {
+  background-color: var(--input);
+  color: var(--foreground);
+  overflow: hidden;
+  overflow-y: auto;
+  padding: 2px;
+  resize: none;
+  border: none;
+  box-sizing: border-box;
+  font-family: var(--font-mono);
+  font-size: var(--comfy-textarea-font-size);
+}
+
+@import './_markdown.css';
+
+@import './_legacy-ui.css';
+
+audio.comfy-audio.empty-audio-widget {
+  display: none;
+}
+
+#vue-app {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+/* [Desktop] Electron window specific styles */
+.app-drag {
+  app-region: drag;
+}
+
+.no-drag {
+  app-region: no-drag;
+}
+
+.window-actions-spacer {
+  width: calc(100vw - env(titlebar-area-width, 100vw));
+}
+/* End of [Desktop] Electron window specific styles */
+
+.lg-node {
+  /* Disable text selection on all nodes */
+  user-select: none;
+}
+
+.lg-node .lg-slot {
+  transition:
+    opacity 0.1s ease,
+    font-size 0.1s ease;
+}
+
+@import './_mask-editor.css';
+
+/* ===================== Skeleton Shimmer ===================== */
+.skeleton-shimmer {
+  background:
+    linear-gradient(135deg, rgb(188 188 188 / 0.5) 0%, rgb(0 0 0 / 0.5) 100%) 0
+      0 / 200% 200%,
+    #000;
+  animation: skeleton-shimmer 2s ease-in-out infinite;
+}
+
+@keyframes skeleton-shimmer {
+  0%,
+  100% {
+    background-position: 100% 100%;
+  }
+  50% {
+    background-position: 0 0;
+  }
+}
+
+@utility scroll-shadows-* {
+  overflow: auto;
+
+  background:
+    /* Shadow Cover TOP */
+    linear-gradient(--value(--color-*) 30%, transparent) center top,
+    /* Shadow Cover BOTTOM */
+    linear-gradient(transparent, --value(--color-*) 70%) center bottom,
+    /* Shadow TOP */
+    radial-gradient(
+        farthest-side at 50% 0,
+        color-mix(in oklab, --value(--color-*), #777777 35%),
+        60%,
+        transparent
+      )
+      center top,
+    /* Shadow BOTTOM */
+    radial-gradient(
+        farthest-side at 50% 100%,
+        color-mix(in oklab, --value(--color-*), #777777 35%),
+        60%,
+        transparent
+      )
+      center bottom;
+
+  background-repeat: no-repeat;
+  background-size:
+    300% 40px,
+    300% 40px,
+    300% 14px,
+    300% 14px;
+  background-attachment: local, local, scroll, scroll;
+}

package/src/css/themes/void.css

@@ -0,0 +1,102 @@
+@import '../component-support.css';
+
+@source '../../../dist';
+
+@theme static {
+  --font-inter: 'Inter', system-ui, sans-serif;
+  --font-sans: 'Inter', system-ui, sans-serif;
+  --font-display: 'PP Formula', 'Inter', system-ui, sans-serif;
+
+  --color-background: oklch(0.19 0.003 285);
+  --color-foreground: oklch(0.955 0.002 285);
+  --color-card: oklch(0.23 0.008 285);
+  --color-popover: oklch(0.23 0.008 285);
+  --color-primary: #0b8ce9;
+  --color-secondary: oklch(1 0 0 / 0.06);
+  --color-muted: oklch(1 0 0 / 0.06);
+  --color-muted-foreground: oklch(0.76 0.006 285);
+  --color-accent: oklch(1 0 0 / 0.1);
+  --color-input: oklch(1 0 0 / 0.06);
+  --color-border: oklch(1 0 0 / 0.08);
+  --color-ring: oklch(1 0 0 / 0.45);
+  --color-destructive: oklch(0.62 0.19 25);
+  --color-warning: oklch(0.82 0.14 85);
+  --color-success: oklch(0.78 0.15 155);
+
+  --color-content-background: oklch(0.14 0.005 285);
+  --color-card-hover: oklch(0.265 0.009 285);
+  --color-subtle-foreground: oklch(0.6 0.008 285);
+  --color-border-strong: oklch(1 0 0 / 0.14);
+  --color-media-overlay: oklch(0 0 0 / 0.55);
+
+  --text-ui: 13px;
+  --text-ui--line-height: 20px;
+  --text-heading: 16px;
+  --text-heading--line-height: 24px;
+  --text-title: 22px;
+  --text-title--line-height: 28px;
+  --text-display: 34px;
+  --text-display--line-height: 40px;
+
+  --radius-panel: 16px;
+  --radius-card: 12px;
+  --radius-control: 8px;
+  --radius-min: 4px;
+
+  --shadow-elev:
+    inset 0 1px 0 oklch(1 0 0 / 0.07), 0 1px 2px oklch(0 0 0 / 0.35),
+    0 6px 18px oklch(0 0 0 / 0.28);
+  --shadow-elev-hover:
+    inset 0 1px 0 oklch(1 0 0 / 0.09), 0 2px 4px oklch(0 0 0 / 0.35),
+    0 10px 26px oklch(0 0 0 / 0.34);
+  --shadow-popover:
+    inset 0 1px 0 oklch(1 0 0 / 0.07), 0 12px 32px oklch(0 0 0 / 0.45);
+  --shadow-highlight: inset 0 1px 0 oklch(1 0 0 / 0.06);
+
+  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
+  --animate-pop-in: pop-in 160ms var(--ease-out-expo);
+  --animate-fade-in: fade-in 160ms ease-out;
+  --animate-status-pulse: status-pulse 2s ease-out infinite;
+  --animate-shimmer: shimmer 1.6s ease-in-out infinite;
+
+  @keyframes pop-in {
+    from {
+      opacity: 0;
+      transform: translateY(4px) scale(0.98);
+    }
+  }
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+  }
+  @keyframes status-pulse {
+    0% {
+      box-shadow: 0 0 0 0 color-mix(in oklch, currentColor 55%, transparent);
+    }
+    70%,
+    100% {
+      box-shadow: 0 0 0 5px transparent;
+    }
+  }
+  @keyframes shimmer {
+    from {
+      background-position: 150% 0;
+    }
+    to {
+      background-position: -50% 0;
+    }
+  }
+}
+
+:root {
+  --muted: var(--color-muted);
+}
+
+@layer base {
+  *,
+  ::before,
+  ::after {
+    border-color: var(--color-border);
+  }
+}

package/src/icons/README.md

@@ -1,66 +1,38 @@
 # ComfyUI Icons Guide
 
-ComfyUI supports three types of icons that can be used throughout the interface. All icons are automatically imported - no manual imports needed!
+ComfyUI supports two types of icons: Lucide icons and custom icons. All icons are automatically imported - no manual imports needed!
 
 ## Quick Start - Code Examples
 
-### 1. PrimeIcons
+Lucide is the only third-party icon set. Don't add icons from other sets such as Heroicons, Tabler, or Carbon. PrimeIcons and Material Design Icons (`mdi`) are being phased out; don't add new uses, in first-party code or extensions. See [PrimeIcons (deprecated)](#primeicons-deprecated).
 
-```vue
-<template>
-  <!-- Basic usage -->
-  <i class="pi pi-plus" />
-  <i class="pi pi-cog" />
-  <i class="pi pi-check text-green-500" />
-
-  <!-- In PrimeVue components -->
-  <button icon="pi pi-save" label="Save" />
-  <button icon="pi pi-times" severity="danger" />
-</template>
-```
-
-[Browse all PrimeIcons →](https://primevue.org/icons/#list)
-
-### 2. Iconify Icons (Recommended)
+### 1. Lucide Icons
 
 ```vue
 <template>
-  <!-- Primary icon set: Lucide -->
   <i class="icon-[lucide--download]" />
   <i class="icon-[lucide--settings]" />
-  <i class="icon-[lucide--workflow]" class="text-2xl" />
-
-  <!-- Other popular icon sets -->
-  <i-mdi:folder-open />
-  <!-- Material Design Icons -->
-  <i-heroicons:document-text />
-  <!-- Heroicons -->
-  <i-tabler:brand-github />
-  <!-- Tabler Icons -->
-  <i-carbon:cloud-upload />
-  <!-- Carbon Icons -->
+  <i class="icon-[lucide--workflow] size-6" />
 
   <!-- With styling -->
-  <i class="icon-[lucide--save]" class="w-6 h-6 text-blue-500" />
+  <i class="icon-[lucide--save] size-6 text-blue-500" />
 </template>
 ```
 
-[Browse 200,000+ icons →](https://icon-sets.iconify.design/)
+[Browse Lucide icons →](https://lucide.dev/icons/)
 
-### 3. Custom Icons
+### 2. Custom Icons
 
 ```vue
 <template>
   <!-- Your custom SVG icons from packages/design-system/src/icons/ -->
   <i-comfy:workflow />
   <i-comfy:node-tree />
-  <i-comfy:my-custom-icon class="text-xl" />
+  <i-comfy:my-custom-icon class="size-5" />
 
-  <!-- In PrimeVue button -->
-  <Button severity="secondary">
-    <template #icon>
-      <i-comfy:workflow />
-    </template>
+  <!-- In a design-system Button -->
+  <Button variant="secondary">
+    <i-comfy:workflow />
   </Button>
 </template>
 ```
@@ -71,14 +43,8 @@ ComfyUI supports three types of icons that can be used throughout the interface.
 
 ```vue
 <template>
-  <!-- PrimeIcon in button (simple) -->
-  <Button icon="pi pi-check" label="Confirm" />
-
-  <!-- Iconify/Custom in button (template) -->
   <Button>
-    <template #icon>
-      <i class="icon-[lucide--save]" />
-    </template>
+    <i class="icon-[lucide--save]" />
     Save File
   </Button>
 </template>
@@ -98,32 +64,27 @@ ComfyUI supports three types of icons that can be used throughout the interface.
 
 ### With Tooltips
 
+Put the icon in a `Button` and give the button the tooltip, so keyboard users
+can reach it. See `packages/design-system/src/components/tooltip/README.md` for other triggers.
+
 ```vue
 <template>
-  <i
-    class="icon-[lucide--info]"
-    v-tooltip="'Click for more information'"
-    class="cursor-pointer"
-  />
+  <Button
+    variant="muted-textonly"
+    size="icon"
+    :tooltip="$t('g.learnMore')"
+    :aria-label="$t('g.learnMore')"
+  >
+    <i class="icon-[lucide--info]" />
+  </Button>
 </template>
 ```
 
-## Using Iconify Icons
-
-### Finding Icons
-
-1. Visit [Iconify Icon Sets](https://icon-sets.iconify.design/)
-2. Search or browse collections
-3. Click on any icon to get its name
-4. Use with `i-[collection]:[icon-name]` format
-
-### Popular Collections
+## Finding Lucide Icons
 
-- **Lucide** (`i-lucide:`) - Our primary icon set, clean and consistent
-- **Material Design Icons** (`i-mdi:`) - Comprehensive Material Design icons
-- **Heroicons** (`i-heroicons:`) - Beautiful hand-crafted SVG icons
-- **Tabler** (`i-tabler:`) - 3000+ free SVG icons
-- **Carbon** (`i-carbon:`) - IBM's design system icons
+1. Search [Lucide Icons](https://lucide.dev/icons/)
+2. Copy the icon's name, such as `folder-open`
+3. Use it as `icon-[lucide--folder-open]`
 
 ## Adding Custom Icons
 
@@ -201,23 +162,20 @@ claude.svg     fill="#d97757"       -> image (brand color preserved)
 
 ### Size & Styling
 
+`icon-[...]`, `icon-img-[...]`, and `icon-mask-[...]` default to `size-4` (16px). Font size has no effect on them, so don't size them with `text-*`. Override the size with `size-*` on the `<i>` itself:
+
 ```vue
 <template>
-  <!-- Size with Tailwind classes -->
-  <i class="icon-[lucide--plus]" class="w-4 h-4" />
-  <!-- 16px -->
-  <i class="icon-[lucide--plus]" class="w-6 h-6" />
-  <!-- 24px (default) -->
-  <i class="icon-[lucide--plus]" class="w-8 h-8" />
-  <!-- 32px -->
-
-  <!-- Or text size -->
-  <i class="icon-[lucide--plus]" class="text-sm" />
-  <i class="icon-[lucide--plus]" class="text-2xl" />
+  <i class="icon-[lucide--plus]" />
+  <!-- 16px (default) -->
+  <i class="icon-[lucide--plus] size-3" />
+  <!-- 12px -->
+  <i class="icon-[lucide--plus] size-6" />
+  <!-- 24px -->
 
   <!-- Colors -->
-  <i class="icon-[lucide--check]" class="text-green-500" />
-  <i class="icon-[lucide--x]" class="text-red-500" />
+  <i class="icon-[lucide--check] text-green-500" />
+  <i class="icon-[lucide--x] text-red-500" />
 </template>
 ```
 
@@ -244,17 +202,31 @@ Always use `currentColor` in SVGs for automatic theme adaptation:
 ```vue
 <template>
   <!-- Before -->
-  <Button icon="pi pi-download" />
+  <Button size="icon">
+    <i class="pi pi-download" />
+  </Button>
 
   <!-- After -->
-  <Button>
-    <template #icon>
-      <i class="icon-[lucide--download]" />
-    </template>
+  <Button size="icon">
+    <i class="icon-[lucide--download]" />
   </Button>
 </template>
 ```
 
+A `pi` glyph sized with a `text-*` class becomes an explicit `size-*` class. Pick the size by eye rather than converting the font size, because Lucide glyphs fill their viewBox differently from PrimeIcons:
+
+```vue
+<template>
+  <!-- Before -->
+  <i class="pi pi-folder text-lg" />
+
+  <!-- After -->
+  <i class="icon-[lucide--folder] size-5" />
+</template>
+```
+
+Use `scale-*` only when a wrapper hardcodes the icon's size, such as `SidebarIcon`, which sets `size-5` on the `<i>` it renders from an icon class string.
+
 ### From Inline SVG to Custom Icon
 
 ```vue
@@ -269,6 +241,10 @@ Always use `currentColor` in SVGs for automatic theme adaptation:
 </template>
 ```
 
+## PrimeIcons (deprecated)
+
+`primeicons` is still imported in `src/main.ts` only so existing extensions that render `pi pi-*` classes keep working while it is phased out. Don't use PrimeIcons in new code, including extensions.
+
 ## Technical Details
 
 ### Auto-Import System
@@ -280,7 +256,7 @@ Icons are automatically imported using `unplugin-icons` - no manual imports need
 The icon system has two layers:
 
 1. **Tailwind CSS Plugin** (`@iconify/tailwind4`):
-   - Configured via `@plugin` directive in `packages/design-system/src/css/style.css`
+   - Configured via `@plugin` directive in `packages/design-system/src/css/theme.css`
    - Uses `from-folder(comfy, ...)` to load SVGs from `packages/design-system/src/icons/`
    - Auto-cleans and optimizes SVGs at build time
 
@@ -345,19 +321,7 @@ Icons are fully typed. If TypeScript doesn't recognize a new custom icon:
 4. **Theme support**: Always use `currentColor` for adaptable icons
 5. **Test both themes**: Verify icons look good in light and dark modes
 
-## Adding Icon Collections
-
-To add an entire icon set from npm:
-
-1. Install the icon package
-2. Configure in `vite.config.mts`
-3. Use with the appropriate prefix
-
-See the [unplugin-icons documentation](https://github.com/unplugin/unplugin-icons) for details.
-
 ## Resources
 
-- [PrimeIcons List](https://primevue.org/icons/#list)
-- [Iconify Icon Browser](https://icon-sets.iconify.design/)
 - [Lucide Icons](https://lucide.dev/icons/)
 - [unplugin-icons docs](https://github.com/unplugin/unplugin-icons)

package/src/icons/astroid-filled.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.983 21.186a1 1 0 0 1-1.966 0a10 10 0 0 0-8.203-8.203a1 1 0 0 1 0-1.966a10 10 0 0 0 8.203-8.203a1 1 0 0 1 1.966 0a10 10 0 0 0 8.203 8.203a1 1 0 0 1 0 1.966a10 10 0 0 0-8.203 8.203Z" fill="currentColor"/>
+</svg>

package/src/icons/claude.svg

@@ -1 +1 @@
-<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Claude</title><path d="M4.709 15.955l4.72-2.647.08-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312-.006.006z" fill="#D97757" fill-rule="nonzero"></path></svg>
+<svg height="1em" style="line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Claude</title><path d="M4.709 15.955l4.72-2.647.08-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312-.006.006z" fill="#D97757" fill-rule="nonzero"></path></svg>

package/src/select.variants.ts

@@ -0,0 +1,53 @@
+import { cva } from 'cva'
+
+export const selectTriggerVariants = cva({
+  base: 'relative inline-flex cursor-pointer items-center rounded-lg border-[2.5px] border-solid bg-secondary text-foreground transition-all duration-200 ease-in-out outline-none select-none hover:bg-accent disabled:cursor-default disabled:opacity-30 disabled:hover:bg-secondary',
+  variants: {
+    size: {
+      md: 'h-8',
+      lg: 'h-10'
+    },
+    border: {
+      none: 'border-transparent focus-visible:border-border data-[state=open]:border-border',
+      active: 'border-foreground',
+      invalid: 'border-destructive'
+    }
+  },
+  defaultVariants: {
+    size: 'lg',
+    border: 'none'
+  }
+})
+
+export const selectItemVariants = cva({
+  base: 'flex cursor-pointer items-center px-2 outline-none hover:bg-accent',
+  variants: {
+    layout: {
+      multi:
+        'h-10 shrink-0 gap-2 rounded-lg data-highlighted:bg-muted data-highlighted:hover:bg-muted',
+      single:
+        'relative w-full justify-between gap-3 rounded-sm py-3 text-sm select-none focus:bg-accent data-[state=checked]:bg-muted data-[state=checked]:hover:bg-muted'
+    }
+  },
+  defaultVariants: {
+    layout: 'multi'
+  }
+})
+
+export const selectContentClass =
+  'z-overlay overflow-hidden rounded-lg p-2 bg-background text-foreground border border-solid shadow-md data-[state=closed]:animate-out data-[state=open]:animate-in 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'
+
+export const selectDropdownClass =
+  'flex shrink-0 cursor-pointer items-center justify-center pl-3 [&_i]:size-5'
+
+export const selectEmptyMessageClass = 'px-3 pb-4 text-sm text-muted-foreground'
+
+export const selectCountBadgeClass =
+  'flex size-3.5 items-center justify-center rounded-full bg-foreground text-[9px] font-semibold text-background'
+
+export function stopEscapeToDocument(event: KeyboardEvent) {
+  if (event.key === 'Escape') {
+    event.stopPropagation()
+    event.stopImmediatePropagation()
+  }
+}