@comfyorg/design-system 1.1.0 → 1.2.0

package/src/icons/README.md

@@ -13,13 +13,15 @@ ComfyUI supports three types of icons that can be used throughout the interface.
   <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" />
+  <!-- In a design-system Button -->
+  <Button>
+    <i class="pi pi-save" />
+    Save
+  </Button>
 </template>
 ```
 
-[Browse all PrimeIcons →](https://primevue.org/icons/#list)
+[Browse all PrimeIcons →](https://github.com/primefaces/primeicons)
 
 ### 2. Iconify Icons (Recommended)
 
@@ -56,11 +58,9 @@ ComfyUI supports three types of icons that can be used throughout the interface.
   <i-comfy:node-tree />
   <i-comfy:my-custom-icon class="text-xl" />
 
-  <!-- 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 +71,15 @@ 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" />
+  <!-- PrimeIcon in button -->
+  <Button>
+    <i class="pi pi-check" />
+    Confirm
+  </Button>
 
-  <!-- Iconify/Custom in button (template) -->
+  <!-- Iconify/Custom in button -->
   <Button>
-    <template #icon>
-      <i class="icon-[lucide--save]" />
-    </template>
+    <i class="icon-[lucide--save]" />
     Save File
   </Button>
 </template>
@@ -98,13 +99,19 @@ 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>
 ```
 
@@ -244,13 +251,13 @@ 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>
 ```
@@ -357,7 +364,7 @@ See the [unplugin-icons documentation](https://github.com/unplugin/unplugin-icon
 
 ## Resources
 
-- [PrimeIcons List](https://primevue.org/icons/#list)
+- [PrimeIcons List](https://github.com/primefaces/primeicons)
 - [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()
+  }
+}

package/src/tag.variants.ts

@@ -0,0 +1,38 @@
+import type { VariantProps } from 'cva'
+import { cva } from 'cva'
+
+export const tagVariants = cva({
+  base: 'inline-flex h-6 max-w-full shrink-0 items-center justify-center gap-1 text-xs ring-offset-background backdrop-blur-sm data-[selected=true]:ring-2 data-[selected=true]:ring-foreground data-[selected=true]:ring-offset-1 data-[state=active]:ring-2 data-[state=active]:ring-foreground data-[state=active]:ring-offset-1 [&.ProseMirror-selectednode]:ring-2 [&.ProseMirror-selectednode]:ring-foreground [&.ProseMirror-selectednode]:ring-offset-1',
+  variants: {
+    shape: {
+      square: 'rounded-sm bg-muted',
+      rounded: 'rounded-full bg-secondary',
+      overlay: 'rounded-sm bg-zinc-500/40 text-white/90'
+    },
+    state: {
+      default: 'text-foreground',
+      unselected: 'text-muted-foreground opacity-70',
+      selected: 'text-foreground'
+    },
+    removable: {
+      true: 'py-1 pr-1 pl-2',
+      false: 'px-2 py-1'
+    },
+    interactive: {
+      true: 'cursor-pointer transition-colors focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-1 hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none aria-disabled:cursor-not-allowed aria-disabled:opacity-50',
+      false: ''
+    }
+  },
+  defaultVariants: {
+    shape: 'square',
+    state: 'default',
+    removable: false,
+    interactive: false
+  }
+})
+
+export const tagRemoveButtonVariants = cva({
+  base: 'w-4 overflow-hidden transition-[opacity,width] duration-150 hover:bg-transparent hover:opacity-100 data-disabled:pointer-events-none data-disabled:w-0 data-disabled:opacity-0'
+})
+
+export type TagVariants = VariantProps<typeof tagVariants>