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

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>