@rotki/ui-library 3.1.7 → 3.3.0

package/dist/components/cards/RuiCardHeader.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiCardHeader.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useSlots","_openBlock","_createElementBlock","_mergeProps","_unref","_normalizeClass","_renderSlot","_createCommentVNode","_createElementVNode"],"sources":["../../../src/components/cards/RuiCardHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  dense?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiCardHeader',\n  inheritAttrs: false,\n});\n\nconst { dense = false } = defineProps<Props>();\n\nconst slots = defineSlots<{\n  prepend?: () => any;\n  header?: () => any;\n  subheader?: () => any;\n}>();\n\nconst cardHeader = tv({\n  slots: {\n    root: 'flex',\n    prepend: 'rounded-full flex items-center justify-center bg-rui-neutral-200 text-rui-neutral-700 dark:bg-rui-neutral-700 dark:text-rui-neutral-200 overflow-hidden',\n    // one title style whether or not there is a prepend: a card title is a section heading, not a page title\n    header: 'text-base font-semibold text-rui-text',\n  },\n  variants: {\n    dense: {\n      true: {\n        root: 'p-3 between:ml-2 between:mr-0',\n        prepend: 'text-base p-[0.08rem] w-9 h-9',\n      },\n      false: {\n        root: 'p-4 between:ml-4 between:mr-0',\n        prepend: 'text-[1.25rem] w-10 h-10',\n      },\n    },\n  },\n  defaultVariants: { dense: false },\n});\n\nconst ui = computed<ReturnType<typeof cardHeader>>(() => cardHeader({ dense }));\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    v-bind=\"$attrs\"\n  >\n    <div\n      v-if=\"slots.prepend\"\n      data-id=\"prepend\"\n      :class=\"ui.prepend()\"\n    >\n      <slot name=\"prepend\" />\n    </div>\n    <div class=\"flex flex-col justify-center\">\n      <h5\n        v-if=\"slots.header\"\n        data-id=\"header\"\n        :class=\"ui.header()\"\n      >\n        <slot name=\"header\" />\n      </h5>\n      <p\n        v-if=\"slots.subheader\"\n        data-id=\"subheader\"\n        class=\"text-rui-text-secondary text-body-2 mb-0\"\n      >\n        <slot name=\"subheader\" />\n      </p>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAcA,MAAM,QAAQC,SAAA;EAMd,MAAM,aAAa,GAAG;GACpB,OAAO;IACL,MAAM;IACN,SAAS;IAET,QAAQ;GACV;GACA,UAAU,EACR,OAAO;IACL,MAAM;KACJ,MAAM;KACN,SAAS;IACX;IACA,OAAO;KACL,MAAM;KACN,SAAS;IACX;GACF,EACF;GACA,iBAAiB,EAAE,OAAO,MAAM;EAClC,CAAC;EAED,MAAM,KAAK,eAA8C,WAAW,EAAE,OAAI,QAAA,MAAE,CAAC,CAAC;;GAI5E,OAAAC,UAAA,GAAAC,mBA2BM,OA3BNC,WA2BM,EA1BH,OAAOC,MAAA,EAAA,CAAE,CAAC,KAAI,EACPL,GAAAA,KAAAA,MAAM,GAAA,CAGN,MAAM,WADdE,UAAA,GAAAC,mBAMM,OAAA;;IAJJ,WAAQ;IACP,OAAKG,eAAED,MAAA,EAAA,CAAE,CAAC,QAAO,CAAA;GAElBE,GAAAA,CAAAA,WAAuB,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAEzBE,mBAeM,OAfN,YAeM,CAbI,MAAM,UADdP,UAAA,GAAAC,mBAMK,MAAA;;IAJH,WAAQ;IACP,OAAKG,eAAED,MAAA,EAAA,CAAE,CAAC,OAAM,CAAA;GAEjBE,GAAAA,CAAAA,WAAsB,KAAA,QAAA,QAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAGhB,MAAM,aADdL,UAAA,GAAAC,mBAMI,KANJ,YAMI,CADFI,WAAyB,KAAA,QAAA,WAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA,CAAA,GAAA,EAAA"}
+{"version":3,"file":"RuiCardHeader.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useSlots","_openBlock","_createElementBlock","_mergeProps","_unref","_normalizeClass","_renderSlot","_createCommentVNode","_createElementVNode"],"sources":["../../../src/components/cards/RuiCardHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue';\nimport { cardHeaderStyles } from './card-header-styles';\n\nexport interface Props {\n  dense?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiCardHeader',\n  inheritAttrs: false,\n});\n\nconst { dense = false } = defineProps<Props & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props>>();\n\nconst slots = defineSlots<{\n  prepend?: () => any;\n  header?: () => any;\n  subheader?: () => any;\n}>();\n\nconst ui = computed<ReturnType<typeof cardHeaderStyles>>(() => cardHeaderStyles({ dense }));\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    v-bind=\"$attrs\"\n  >\n    <div\n      v-if=\"slots.prepend\"\n      data-id=\"prepend\"\n      :class=\"ui.prepend()\"\n    >\n      <slot name=\"prepend\" />\n    </div>\n    <div class=\"flex flex-col justify-center\">\n      <h5\n        v-if=\"slots.header\"\n        data-id=\"header\"\n        :class=\"ui.header()\"\n      >\n        <slot name=\"header\" />\n      </h5>\n      <p\n        v-if=\"slots.subheader\"\n        data-id=\"subheader\"\n        class=\"text-rui-text-secondary text-body-2 mb-0\"\n      >\n        <slot name=\"subheader\" />\n      </p>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAeA,MAAM,QAAQC,SAAA;EAMd,MAAM,KAAK,eAAoD,iBAAiB,EAAE,OAAI,QAAA,MAAE,CAAC,CAAC;;GAIxF,OAAAC,UAAA,GAAAC,mBA2BM,OA3BNC,WA2BM,EA1BH,OAAOC,MAAA,EAAA,CAAE,CAAC,KAAI,EACPL,GAAAA,KAAAA,MAAM,GAAA,CAGN,MAAM,WADdE,UAAA,GAAAC,mBAMM,OAAA;;IAJJ,WAAQ;IACP,OAAKG,eAAED,MAAA,EAAA,CAAE,CAAC,QAAO,CAAA;GAElBE,GAAAA,CAAAA,WAAuB,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAEzBE,mBAeM,OAfN,YAeM,CAbI,MAAM,UADdP,UAAA,GAAAC,mBAMK,MAAA;;IAJH,WAAQ;IACP,OAAKG,eAAED,MAAA,EAAA,CAAE,CAAC,OAAM,CAAA;GAEjBE,GAAAA,CAAAA,WAAsB,KAAA,QAAA,QAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAGhB,MAAM,aADdL,UAAA,GAAAC,mBAMI,KANJ,YAMI,CADFI,WAAyB,KAAA,QAAA,WAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA,CAAA,GAAA,EAAA"}

package/dist/components/cards/card-header-styles.d.ts

@@ -0,0 +1,46 @@
+export declare const cardHeaderStyles: import("tailwind-variants").TVReturnType<{
+    dense: {
+        true: {
+            root: string;
+            prepend: string;
+        };
+        false: {
+            root: string;
+            prepend: string;
+        };
+    };
+}, {
+    root: string;
+    prepend: string;
+    header: string;
+}, undefined, {
+    dense: {
+        true: {
+            root: string;
+            prepend: string;
+        };
+        false: {
+            root: string;
+            prepend: string;
+        };
+    };
+}, {
+    root: string;
+    prepend: string;
+    header: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    dense: {
+        true: {
+            root: string;
+            prepend: string;
+        };
+        false: {
+            root: string;
+            prepend: string;
+        };
+    };
+}, {
+    root: string;
+    prepend: string;
+    header: string;
+}>>;

package/dist/components/cards/card-header-styles.js

@@ -0,0 +1,24 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/cards/card-header-styles.ts
+var cardHeaderStyles = tv({
+	slots: {
+		root: "flex",
+		prepend: "rounded-full flex items-center justify-center bg-rui-neutral-200 text-rui-neutral-700 dark:bg-rui-neutral-700 dark:text-rui-neutral-200 overflow-hidden",
+		header: "text-base font-semibold text-rui-text"
+	},
+	variants: { dense: {
+		true: {
+			root: "p-3 between:ml-2 between:mr-0",
+			prepend: "text-base p-[0.08rem] w-9 h-9"
+		},
+		false: {
+			root: "p-4 between:ml-4 between:mr-0",
+			prepend: "text-[1.25rem] w-10 h-10"
+		}
+	} },
+	defaultVariants: { dense: false }
+});
+//#endregion
+export { cardHeaderStyles };
+
+//# sourceMappingURL=card-header-styles.js.map

package/dist/components/cards/card-header-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-header-styles.js","names":[],"sources":["../../../src/components/cards/card-header-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const cardHeaderStyles = tv({\n  slots: {\n    root: 'flex',\n    prepend: 'rounded-full flex items-center justify-center bg-rui-neutral-200 text-rui-neutral-700 dark:bg-rui-neutral-700 dark:text-rui-neutral-200 overflow-hidden',\n    // one title style whether or not there is a prepend: a card title is a section heading, not a page title\n    header: 'text-base font-semibold text-rui-text',\n  },\n  variants: {\n    dense: {\n      true: {\n        root: 'p-3 between:ml-2 between:mr-0',\n        prepend: 'text-base p-[0.08rem] w-9 h-9',\n      },\n      false: {\n        root: 'p-4 between:ml-4 between:mr-0',\n        prepend: 'text-[1.25rem] w-10 h-10',\n      },\n    },\n  },\n  defaultVariants: { dense: false },\n});\n"],"mappings":";;AAEA,IAAa,mBAAmB,GAAG;CACjC,OAAO;EACL,MAAM;EACN,SAAS;EAET,QAAQ;CACV;CACA,UAAU,EACR,OAAO;EACL,MAAM;GACJ,MAAM;GACN,SAAS;EACX;EACA,OAAO;GACL,MAAM;GACN,SAAS;EACX;CACF,EACF;CACA,iBAAiB,EAAE,OAAO,MAAM;AAClC,CAAC"}

package/dist/components/cards/card-styles.d.ts

@@ -0,0 +1,175 @@
+export declare const cardStyles: import("tailwind-variants").TVReturnType<{
+    variant: {
+        flat: {
+            root: string;
+        };
+        outlined: {
+            root: string;
+        };
+    };
+    rounded: {
+        sm: {
+            root: string;
+            image: string;
+        };
+        md: {
+            root: string;
+            image: string;
+        };
+        lg: {
+            root: string;
+            image: string;
+        };
+    };
+    divide: {
+        true: {
+            root: string;
+        };
+    };
+    padding: {
+        none: {
+            content: string;
+        };
+        dense: {
+            content: string;
+        };
+        normal: {
+            content: string;
+        };
+    };
+    dense: {
+        true: {
+            footer: string;
+        };
+        false: {
+            footer: string;
+        };
+    };
+    underHeader: {
+        true: {
+            content: string;
+        };
+        false: {};
+    };
+}, {
+    root: string;
+    image: string;
+    content: string;
+    footer: string[];
+}, undefined, {
+    variant: {
+        flat: {
+            root: string;
+        };
+        outlined: {
+            root: string;
+        };
+    };
+    rounded: {
+        sm: {
+            root: string;
+            image: string;
+        };
+        md: {
+            root: string;
+            image: string;
+        };
+        lg: {
+            root: string;
+            image: string;
+        };
+    };
+    divide: {
+        true: {
+            root: string;
+        };
+    };
+    padding: {
+        none: {
+            content: string;
+        };
+        dense: {
+            content: string;
+        };
+        normal: {
+            content: string;
+        };
+    };
+    dense: {
+        true: {
+            footer: string;
+        };
+        false: {
+            footer: string;
+        };
+    };
+    underHeader: {
+        true: {
+            content: string;
+        };
+        false: {};
+    };
+}, {
+    root: string;
+    image: string;
+    content: string;
+    footer: string[];
+}, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        flat: {
+            root: string;
+        };
+        outlined: {
+            root: string;
+        };
+    };
+    rounded: {
+        sm: {
+            root: string;
+            image: string;
+        };
+        md: {
+            root: string;
+            image: string;
+        };
+        lg: {
+            root: string;
+            image: string;
+        };
+    };
+    divide: {
+        true: {
+            root: string;
+        };
+    };
+    padding: {
+        none: {
+            content: string;
+        };
+        dense: {
+            content: string;
+        };
+        normal: {
+            content: string;
+        };
+    };
+    dense: {
+        true: {
+            footer: string;
+        };
+        false: {
+            footer: string;
+        };
+    };
+    underHeader: {
+        true: {
+            content: string;
+        };
+        false: {};
+    };
+}, {
+    root: string;
+    image: string;
+    content: string;
+    footer: string[];
+}>>;

package/dist/components/cards/card-styles.js

@@ -0,0 +1,62 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/cards/card-styles.ts
+var cardStyles = tv({
+	slots: {
+		root: "flex flex-col h-full w-full bg-rui-surface",
+		image: "overflow-hidden",
+		content: "text-sm/6 text-rui-text overflow-y-auto outline-hidden focus-visible:focus-ring focus-visible:-outline-offset-2",
+		footer: [
+			"flex between:ml-2 between:mr-0 items-center justify-start mt-auto",
+			"[&>[data-variant=text][data-size=xs]:first-child]:-ms-1",
+			"[&>[data-variant=text][data-size=sm]:first-child]:-ms-1.5",
+			"[&>[data-variant=text][data-size=md]:first-child]:-ms-2",
+			"[&>[data-variant=text][data-size=lg]:first-child]:-ms-2.5",
+			"[&>[data-variant=text][data-size$=xl]:first-child]:-ms-2.5"
+		]
+	},
+	variants: {
+		variant: {
+			flat: { root: "" },
+			outlined: { root: "border border-rui-divider" }
+		},
+		rounded: {
+			sm: {
+				root: "rounded-rui-sm",
+				image: "rounded-t-rui-sm"
+			},
+			md: {
+				root: "rounded-rui-card",
+				image: "rounded-t-rui-card"
+			},
+			lg: {
+				root: "rounded-rui-lg",
+				image: "rounded-t-rui-lg"
+			}
+		},
+		divide: { true: { root: "between:border-t between:border-b-0 between:border-rui-divider" } },
+		padding: {
+			none: { content: "p-0" },
+			dense: { content: "p-3" },
+			normal: { content: "p-4" }
+		},
+		dense: {
+			true: { footer: "p-3 pt-1" },
+			false: { footer: "p-4 pt-2" }
+		},
+		underHeader: {
+			true: { content: "pt-0" },
+			false: {}
+		}
+	},
+	defaultVariants: {
+		variant: "outlined",
+		rounded: "md",
+		padding: "normal",
+		dense: false,
+		underHeader: false
+	}
+});
+//#endregion
+export { cardStyles };
+
+//# sourceMappingURL=card-styles.js.map

package/dist/components/cards/card-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-styles.js","names":[],"sources":["../../../src/components/cards/card-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const cardStyles = tv({\n  slots: {\n    root: 'flex flex-col h-full w-full bg-rui-surface',\n    image: 'overflow-hidden',\n    content: 'text-sm/6 text-rui-text overflow-y-auto outline-hidden focus-visible:focus-ring focus-visible:-outline-offset-2',\n    // a leading text button moves out by its side padding to align its label; unquoted selectors, quoted ones break consumer builds\n    footer: [\n      'flex between:ml-2 between:mr-0 items-center justify-start mt-auto',\n      '[&>[data-variant=text][data-size=xs]:first-child]:-ms-1',\n      '[&>[data-variant=text][data-size=sm]:first-child]:-ms-1.5',\n      '[&>[data-variant=text][data-size=md]:first-child]:-ms-2',\n      '[&>[data-variant=text][data-size=lg]:first-child]:-ms-2.5',\n      '[&>[data-variant=text][data-size$=xl]:first-child]:-ms-2.5',\n    ],\n  },\n  variants: {\n    variant: {\n      flat: { root: '' },\n      outlined: { root: 'border border-rui-divider' },\n    },\n    rounded: {\n      sm: { root: 'rounded-rui-sm', image: 'rounded-t-rui-sm' },\n      md: { root: 'rounded-rui-card', image: 'rounded-t-rui-card' },\n      lg: { root: 'rounded-rui-lg', image: 'rounded-t-rui-lg' },\n    },\n    divide: {\n      true: { root: 'between:border-t between:border-b-0 between:border-rui-divider' },\n    },\n    padding: {\n      none: { content: 'p-0' },\n      dense: { content: 'p-3' },\n      normal: { content: 'p-4' },\n    },\n    dense: {\n      // the footer keeps the content's side padding, so its buttons line up with the text above\n      true: { footer: 'p-3 pt-1' },\n      false: { footer: 'p-4 pt-2' },\n    },\n    underHeader: {\n      true: { content: 'pt-0' },\n      false: {},\n    },\n  },\n  defaultVariants: { variant: 'outlined', rounded: 'md', padding: 'normal', dense: false, underHeader: false },\n});\n"],"mappings":";;AAEA,IAAa,aAAa,GAAG;CAC3B,OAAO;EACL,MAAM;EACN,OAAO;EACP,SAAS;EAET,QAAQ;GACN;GACA;GACA;GACA;GACA;GACA;EACF;CACF;CACA,UAAU;EACR,SAAS;GACP,MAAM,EAAE,MAAM,GAAG;GACjB,UAAU,EAAE,MAAM,4BAA4B;EAChD;EACA,SAAS;GACP,IAAI;IAAE,MAAM;IAAkB,OAAO;GAAmB;GACxD,IAAI;IAAE,MAAM;IAAoB,OAAO;GAAqB;GAC5D,IAAI;IAAE,MAAM;IAAkB,OAAO;GAAmB;EAC1D;EACA,QAAQ,EACN,MAAM,EAAE,MAAM,iEAAiE,EACjF;EACA,SAAS;GACP,MAAM,EAAE,SAAS,MAAM;GACvB,OAAO,EAAE,SAAS,MAAM;GACxB,QAAQ,EAAE,SAAS,MAAM;EAC3B;EACA,OAAO;GAEL,MAAM,EAAE,QAAQ,WAAW;GAC3B,OAAO,EAAE,QAAQ,WAAW;EAC9B;EACA,aAAa;GACX,MAAM,EAAE,SAAS,OAAO;GACxB,OAAO,CAAC;EACV;CACF;CACA,iBAAiB;EAAE,SAAS;EAAY,SAAS;EAAM,SAAS;EAAU,OAAO;EAAO,aAAa;CAAM;AAC7G,CAAC"}

package/dist/components/chips/RuiChip.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiChip.js","names":["_sfc_main"],"sources":["../../../src/components/chips/RuiChip.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { StyleValue } from 'vue';\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport type { VueClassValue } from '@/types/class-value';\nimport { objectOmit } from '@vueuse/shared';\nimport { CHIP_CLOSE_ICON_SIZES, ChipSize, ChipVariant } from '@/components/chips/chip-props';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiChipClassNames {\n  root?: VueClassValue;\n  content?: VueClassValue;\n}\n\nexport interface Props {\n  tile?: boolean;\n  clickable?: boolean;\n  closeable?: boolean;\n  disabled?: boolean;\n  size?: ChipSize;\n  variant?: ChipVariant;\n  color?: 'grey' | ContextColorsType;\n  closeIcon?: RuiIcons;\n  /**\n   * Takes the close button out of the tab order, for a chip inside a widget that removes chips from\n   * the keyboard itself, as RuiAutoComplete does with Backspace. The button still takes clicks.\n   */\n  closeUnfocusable?: boolean;\n  bgColor?: string;\n  textColor?: string;\n  classNames?: RuiChipClassNames;\n}\n\ndefineOptions({\n  name: 'RuiChip',\n  inheritAttrs: false,\n});\n\nconst {\n  tile = false,\n  size = ChipSize.md,\n  color = 'grey',\n  clickable = false,\n  closeable = false,\n  disabled = false,\n  variant = ChipVariant.filled,\n  closeIcon = 'lu-x',\n  closeUnfocusable = false,\n  bgColor = undefined,\n  textColor = undefined,\n  classNames,\n} = defineProps<Props>();\n\nconst emit = defineEmits<{\n  'click:close': [];\n  'click': [e: MouseEvent];\n}>();\n\nconst slots = defineSlots<{\n  prepend?: () => any;\n  default?: () => any;\n}>();\n\nconst root = useTemplateRef<HTMLDivElement>('root');\n\nconst chipStyles = tv({\n  slots: {\n    // min-h sets the height and items-center the rest, so a prefix or a border never adds to it\n    root: 'inline-flex items-center justify-between px-2 transition duration-150 cursor-default outline-hidden max-w-full truncate',\n    // the avatar's neutral pair, so initials stay readable on any chip color\n    prepend: 'rounded-full flex items-center justify-center shrink-0 w-6 h-6 text-[0.625rem] font-semibold text-rui-neutral-700 bg-rui-neutral-200 dark:text-rui-neutral-200 dark:bg-rui-neutral-700 overflow-hidden',\n    label: 'truncate px-2 text-[0.8125rem]/5',\n    // a round hover fill marks the close icon as its own button\n    close: 'rounded-full flex items-center p-0.5 inset-y-0 focus:outline-hidden transition-colors hover:bg-rui-pressed',\n    // 80% keeps the icon at 3:1 on a filled chip and on the page; full on hover\n    closeIcon: 'opacity-80 hover:opacity-100 transition-opacity',\n  },\n  variants: {\n    tile: {\n      true: { root: 'rounded-rui-sm' },\n      false: { root: 'rounded-full' },\n    },\n    size: {\n      // 28px, to sit in a 44px table row; sm is 24px with 12px text\n      md: { root: 'min-h-7' },\n      sm: {\n        root: 'min-h-6',\n        prepend: 'text-[0.5rem] p-[0.08rem] w-4 h-4',\n        label: 'px-1.5 text-xs/4',\n        close: 'p-px',\n      },\n      // 20px for a count: 11px tabular figures keep a changing number from shifting the row\n      xs: {\n        root: 'min-h-5 px-1',\n        prepend: 'text-[0.5rem] p-[0.08rem] w-4 h-4',\n        label: 'px-1 text-[0.6875rem]/4 tabular-nums',\n        close: 'p-px',\n      },\n    },\n    // a leading circle sits as far from the start edge as from the top, like an avatar in a pill\n    prepended: {\n      true: { root: 'pl-0.5' },\n      false: {},\n    },\n    closeable: {\n      true: {},\n      false: {},\n    },\n    disabled: {\n      true: { root: '!text-rui-text-disabled cursor-default', close: 'cursor-default hover:bg-transparent dark:hover:bg-transparent' },\n      false: {},\n    },\n    clickable: {\n      true: { root: 'cursor-pointer' },\n      false: { root: 'cursor-default', close: 'cursor-default' },\n    },\n    variant: {\n      filled: {},\n      outlined: {},\n      tonal: {},\n    },\n    color: {\n      grey: { root: 'text-rui-text' },\n      primary: {},\n      secondary: {},\n      error: {},\n      warning: {},\n      info: {},\n      success: {},\n    },\n  },\n  compoundVariants: [\n    // Interactive states (clickable + not disabled): a tint over any fill, which keeps the text color\n    { clickable: true, disabled: false, class: { root: 'hover:state-layer active:state-layer-pressed focus-visible:focus-ring' } },\n\n    // Grey filled: a solid step above the tonal tint\n    { color: 'grey', variant: 'filled', class: { root: 'bg-rui-neutral-200 dark:bg-rui-neutral-700' } },\n\n    // Outlined: the border is the text color at 40%, so it follows the brighter text tone in dark\n    { variant: 'outlined', class: { root: 'border border-current/40 bg-transparent' } },\n\n    // Context colors: filled bg\n    { color: 'primary', variant: 'filled', class: { root: 'bg-rui-primary' } },\n    { color: 'secondary', variant: 'filled', class: { root: 'bg-rui-secondary' } },\n    // in dark a status color's `main` is a text tone, so the fill is its deep `darker`\n    { color: 'error', variant: 'filled', class: { root: 'bg-rui-error dark:bg-rui-error-darker' } },\n    { color: 'warning', variant: 'filled', class: { root: 'bg-rui-warning dark:bg-rui-warning-darker' } },\n    { color: 'info', variant: 'filled', class: { root: 'bg-rui-info dark:bg-rui-info-darker' } },\n    { color: 'success', variant: 'filled', class: { root: 'bg-rui-success dark:bg-rui-success-darker' } },\n\n    // Context colors: outlined text\n    { color: 'primary', variant: 'outlined', class: { root: 'text-rui-primary dark:text-rui-primary-lighter' } },\n    { color: 'secondary', variant: 'outlined', class: { root: 'text-rui-secondary dark:text-rui-secondary-lighter' } },\n    { color: 'error', variant: 'outlined', class: { root: 'text-rui-error dark:text-rui-error-lighter' } },\n    { color: 'warning', variant: 'outlined', class: { root: 'text-rui-warning' } },\n    { color: 'info', variant: 'outlined', class: { root: 'text-rui-info' } },\n    { color: 'success', variant: 'outlined', class: { root: 'text-rui-success' } },\n\n    // Tonal: a tint with the deeper tone as text, 4.5:1; primary and secondary sit near grey, so tint harder\n    { color: 'grey', variant: 'tonal', class: { root: 'bg-rui-neutral-500/10 dark:bg-rui-neutral-400/10' } },\n    { color: 'primary', variant: 'tonal', class: { root: 'bg-rui-primary/15 text-rui-primary-darker dark:bg-rui-primary/35 dark:text-rui-primary-lighter' } },\n    { color: 'secondary', variant: 'tonal', class: { root: 'bg-rui-secondary/20 text-rui-secondary-darker dark:bg-rui-secondary/35 dark:text-rui-secondary-lighter' } },\n    { color: 'error', variant: 'tonal', class: { root: 'bg-rui-error/10 text-rui-error-darker dark:bg-rui-error/20 dark:text-rui-error-lighter' } },\n    { color: 'warning', variant: 'tonal', class: { root: 'bg-rui-warning/10 text-rui-warning-darker dark:bg-rui-warning/20 dark:text-rui-warning-lighter' } },\n    { color: 'info', variant: 'tonal', class: { root: 'bg-rui-info/10 text-rui-info-darker dark:bg-rui-info/20 dark:text-rui-info-lighter' } },\n    { color: 'success', variant: 'tonal', class: { root: 'bg-rui-success/10 text-rui-success-darker dark:bg-rui-success/20 dark:text-rui-success-lighter' } },\n\n    // sm: a 16px circle in a 24px chip, 4px in from the start as from the top\n    { size: 'sm', prepended: true, class: { root: 'pl-1' } },\n    // in a tile chip the prefix follows the corners: the chip's 6px radius less the 2px inset\n    { tile: true, class: { prepend: 'rounded-sm' } },\n    // the close button's round hover area mirrors the prefix: as far from the end edge as from the top\n    { closeable: true, class: { root: 'pr-1', label: 'pr-1' } },\n    { closeable: true, size: 'sm', class: { root: 'pr-1', label: 'pr-0.5' } },\n    // xs: the 12px close area sits 2px from the end edge, as the 16px prefix does from the start\n    { closeable: true, size: 'xs', class: { root: 'pr-0.5', label: 'pr-0.5' } },\n\n    // Disabled: a flat neutral chip in any color, like a disabled button\n    { disabled: true, variant: ['filled', 'tonal'], class: { root: '!bg-rui-neutral-100 dark:!bg-rui-neutral-800' } },\n    { disabled: true, variant: 'outlined', class: { root: '!border-rui-divider' } },\n  ],\n  compoundSlots: [\n    // Every filled color takes light text, in both themes\n    { slots: ['root'], color: ['primary', 'secondary', 'error', 'warning', 'info', 'success'], variant: 'filled', class: 'text-rui-dark-text' },\n  ],\n  defaultVariants: {\n    tile: false,\n    size: 'md',\n    disabled: false,\n    clickable: false,\n    variant: 'filled',\n    color: 'grey',\n  },\n});\n\nconst ui = computed<ReturnType<typeof chipStyles>>(() => chipStyles({\n  tile,\n  size,\n  color,\n  variant,\n  disabled,\n  clickable,\n  prepended: !!slots.prepend,\n  closeable,\n}));\n\nconst style = computed<Partial<StyleValue>>(() => {\n  const s: Partial<StyleValue> = {};\n  if (bgColor)\n    s.backgroundColor = bgColor;\n  if (textColor)\n    s.color = textColor;\n  return s;\n});\n\nfunction click(e: MouseEvent): void {\n  if (!clickable || disabled)\n    return;\n\n  emit('click', e);\n}\n\n/**\n * Enter and Space activate a clickable chip as they would a button, through a\n * real click so the handler still gets a `MouseEvent`.\n *\n * @param e - the key press on the chip\n */\nfunction onKeydown(e: KeyboardEvent): void {\n  if (!clickable || disabled || e.target !== get(root))\n    return;\n  if (e.key !== 'Enter' && e.key !== ' ')\n    return;\n\n  e.preventDefault();\n  get(root)?.click();\n}\n</script>\n\n<template>\n  <div\n    ref=\"root\"\n    :class=\"ui.root({ class: cn(classNames?.root) })\"\n    :style=\"style\"\n    :data-variant=\"variant\"\n    :data-color=\"color\"\n    :data-disabled=\"disabled || undefined\"\n    :role=\"clickable ? 'button' : undefined\"\n    :tabindex=\"clickable && !disabled ? 0 : undefined\"\n    :aria-disabled=\"clickable && disabled ? true : undefined\"\n    v-bind=\"objectOmit($attrs, ['onClick'])\"\n    @click=\"click($event)\"\n    @keydown=\"onKeydown($event)\"\n  >\n    <div\n      v-if=\"$slots.prepend\"\n      :class=\"ui.prepend()\"\n    >\n      <slot name=\"prepend\" />\n    </div>\n    <span :class=\"ui.label({ class: cn(classNames?.content) })\">\n      <slot />\n    </span>\n    <button\n      v-if=\"closeable\"\n      :class=\"ui.close()\"\n      :disabled=\"disabled\"\n      type=\"button\"\n      aria-label=\"Remove\"\n      :tabindex=\"closeUnfocusable ? -1 : undefined\"\n      @click.stop=\"emit('click:close')\"\n    >\n      <RuiIcon\n        :class=\"ui.closeIcon()\"\n        :size=\"CHIP_CLOSE_ICON_SIZES[size]\"\n        :name=\"closeIcon\"\n      />\n    </button>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiChip.js","names":["_sfc_main"],"sources":["../../../src/components/chips/RuiChip.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { HTMLAttributes, StyleValue } from 'vue';\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport type { VueClassValue } from '@/types/class-value';\nimport { objectOmit } from '@vueuse/shared';\nimport { CHIP_CLOSE_ICON_SIZES, ChipSize, ChipVariant } from '@/components/chips/chip-props';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { cn } from '@/utils/tv';\nimport { chipStyles } from './chip-styles';\n\nexport interface RuiChipClassNames {\n  root?: VueClassValue;\n  content?: VueClassValue;\n}\n\nexport interface Props {\n  tile?: boolean;\n  clickable?: boolean;\n  closeable?: boolean;\n  disabled?: boolean;\n  size?: ChipSize;\n  variant?: ChipVariant;\n  color?: 'grey' | ContextColorsType;\n  closeIcon?: RuiIcons;\n  /**\n   * Takes the close button out of the tab order, for a chip inside a widget that removes chips from\n   * the keyboard itself, as RuiAutoComplete does with Backspace. The button still takes clicks.\n   */\n  closeUnfocusable?: boolean;\n  bgColor?: string;\n  textColor?: string;\n  classNames?: RuiChipClassNames;\n}\n\ndefineOptions({\n  name: 'RuiChip',\n  inheritAttrs: false,\n});\n\nconst {\n  tile = false,\n  size = ChipSize.md,\n  color = 'grey',\n  clickable = false,\n  closeable = false,\n  disabled = false,\n  variant = ChipVariant.filled,\n  closeIcon = 'lu-x',\n  closeUnfocusable = false,\n  bgColor = undefined,\n  textColor = undefined,\n  classNames,\n} = defineProps<Props & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props | 'onClick'>>();\n\nconst emit = defineEmits<{\n  'click:close': [];\n  'click': [e: MouseEvent];\n}>();\n\nconst slots = defineSlots<{\n  prepend?: () => any;\n  default?: () => any;\n}>();\n\nconst root = useTemplateRef<HTMLDivElement>('root');\n\nconst ui = computed<ReturnType<typeof chipStyles>>(() => chipStyles({\n  tile,\n  size,\n  color,\n  variant,\n  disabled,\n  clickable,\n  prepended: !!slots.prepend,\n  closeable,\n}));\n\nconst style = computed<Partial<StyleValue>>(() => {\n  const s: Partial<StyleValue> = {};\n  if (bgColor)\n    s.backgroundColor = bgColor;\n  if (textColor)\n    s.color = textColor;\n  return s;\n});\n\nfunction click(e: MouseEvent): void {\n  if (!clickable || disabled)\n    return;\n\n  emit('click', e);\n}\n\n/**\n * Enter and Space activate a clickable chip as they would a button, through a\n * real click so the handler still gets a `MouseEvent`.\n *\n * @param e - the key press on the chip\n */\nfunction onKeydown(e: KeyboardEvent): void {\n  if (!clickable || disabled || e.target !== get(root))\n    return;\n  if (e.key !== 'Enter' && e.key !== ' ')\n    return;\n\n  e.preventDefault();\n  get(root)?.click();\n}\n</script>\n\n<template>\n  <div\n    ref=\"root\"\n    :class=\"ui.root({ class: cn(classNames?.root) })\"\n    :style=\"style\"\n    :data-variant=\"variant\"\n    :data-color=\"color\"\n    :data-disabled=\"disabled || undefined\"\n    :role=\"clickable ? 'button' : undefined\"\n    :tabindex=\"clickable && !disabled ? 0 : undefined\"\n    :aria-disabled=\"clickable && disabled ? true : undefined\"\n    v-bind=\"objectOmit($attrs, ['onClick'])\"\n    @click=\"click($event)\"\n    @keydown=\"onKeydown($event)\"\n  >\n    <div\n      v-if=\"$slots.prepend\"\n      :class=\"ui.prepend()\"\n    >\n      <slot name=\"prepend\" />\n    </div>\n    <span :class=\"ui.label({ class: cn(classNames?.content) })\">\n      <slot />\n    </span>\n    <button\n      v-if=\"closeable\"\n      :class=\"ui.close()\"\n      :disabled=\"disabled\"\n      type=\"button\"\n      aria-label=\"Remove\"\n      :tabindex=\"closeUnfocusable ? -1 : undefined\"\n      @click.stop=\"emit('click:close')\"\n    >\n      <RuiIcon\n        :class=\"ui.closeIcon()\"\n        :size=\"CHIP_CLOSE_ICON_SIZES[size]\"\n        :name=\"closeIcon\"\n      />\n    </button>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/chips/RuiChip.vue.d.ts

@@ -1,3 +1,4 @@
+import type { HTMLAttributes } from 'vue';
 import type { ContextColorsType } from '../../consts/colors.js';
 import type { RuiIcons } from '../../icons/index.js';
 import type { VueClassValue } from '../../types/class-value.js';
@@ -24,14 +25,15 @@ export interface Props {
     textColor?: string;
     classNames?: RuiChipClassNames;
 }
+type __VLS_Props = Props & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props | 'onClick'>;
 type __VLS_Slots = {
     prepend?: () => any;
     default?: () => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (e: MouseEvent) => any;
     "click:close": () => any;
-}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onClick?: ((e: MouseEvent) => any) | undefined;
     "onClick:close"?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/chips/RuiChip.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,8 @@
 import { get, objectOmit } from "../../vendor/@vueuse/shared/dist/index.js";
-import { cn, tv } from "../../utils/tv.js";
+import { cn } from "../../utils/tv.js";
 import RuiIcon_default from "../icons/RuiIcon.js";
 import { CHIP_CLOSE_ICON_SIZES, ChipSize, ChipVariant } from "./chip-props.js";
+import { chipStyles } from "./chip-styles.js";
 import { computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderSlot, unref, useSlots, useTemplateRef, withModifiers } from "vue";
 //#region src/components/chips/RuiChip.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
@@ -51,246 +52,6 @@ var RuiChip_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 		const emit = __emit;
 		const slots = useSlots();
 		const root = useTemplateRef("root");
-		const chipStyles = tv({
-			slots: {
-				root: "inline-flex items-center justify-between px-2 transition duration-150 cursor-default outline-hidden max-w-full truncate",
-				prepend: "rounded-full flex items-center justify-center shrink-0 w-6 h-6 text-[0.625rem] font-semibold text-rui-neutral-700 bg-rui-neutral-200 dark:text-rui-neutral-200 dark:bg-rui-neutral-700 overflow-hidden",
-				label: "truncate px-2 text-[0.8125rem]/5",
-				close: "rounded-full flex items-center p-0.5 inset-y-0 focus:outline-hidden transition-colors hover:bg-rui-pressed",
-				closeIcon: "opacity-80 hover:opacity-100 transition-opacity"
-			},
-			variants: {
-				tile: {
-					true: { root: "rounded-rui-sm" },
-					false: { root: "rounded-full" }
-				},
-				size: {
-					md: { root: "min-h-7" },
-					sm: {
-						root: "min-h-6",
-						prepend: "text-[0.5rem] p-[0.08rem] w-4 h-4",
-						label: "px-1.5 text-xs/4",
-						close: "p-px"
-					},
-					xs: {
-						root: "min-h-5 px-1",
-						prepend: "text-[0.5rem] p-[0.08rem] w-4 h-4",
-						label: "px-1 text-[0.6875rem]/4 tabular-nums",
-						close: "p-px"
-					}
-				},
-				prepended: {
-					true: { root: "pl-0.5" },
-					false: {}
-				},
-				closeable: {
-					true: {},
-					false: {}
-				},
-				disabled: {
-					true: {
-						root: "!text-rui-text-disabled cursor-default",
-						close: "cursor-default hover:bg-transparent dark:hover:bg-transparent"
-					},
-					false: {}
-				},
-				clickable: {
-					true: { root: "cursor-pointer" },
-					false: {
-						root: "cursor-default",
-						close: "cursor-default"
-					}
-				},
-				variant: {
-					filled: {},
-					outlined: {},
-					tonal: {}
-				},
-				color: {
-					grey: { root: "text-rui-text" },
-					primary: {},
-					secondary: {},
-					error: {},
-					warning: {},
-					info: {},
-					success: {}
-				}
-			},
-			compoundVariants: [
-				{
-					clickable: true,
-					disabled: false,
-					class: { root: "hover:state-layer active:state-layer-pressed focus-visible:focus-ring" }
-				},
-				{
-					color: "grey",
-					variant: "filled",
-					class: { root: "bg-rui-neutral-200 dark:bg-rui-neutral-700" }
-				},
-				{
-					variant: "outlined",
-					class: { root: "border border-current/40 bg-transparent" }
-				},
-				{
-					color: "primary",
-					variant: "filled",
-					class: { root: "bg-rui-primary" }
-				},
-				{
-					color: "secondary",
-					variant: "filled",
-					class: { root: "bg-rui-secondary" }
-				},
-				{
-					color: "error",
-					variant: "filled",
-					class: { root: "bg-rui-error dark:bg-rui-error-darker" }
-				},
-				{
-					color: "warning",
-					variant: "filled",
-					class: { root: "bg-rui-warning dark:bg-rui-warning-darker" }
-				},
-				{
-					color: "info",
-					variant: "filled",
-					class: { root: "bg-rui-info dark:bg-rui-info-darker" }
-				},
-				{
-					color: "success",
-					variant: "filled",
-					class: { root: "bg-rui-success dark:bg-rui-success-darker" }
-				},
-				{
-					color: "primary",
-					variant: "outlined",
-					class: { root: "text-rui-primary dark:text-rui-primary-lighter" }
-				},
-				{
-					color: "secondary",
-					variant: "outlined",
-					class: { root: "text-rui-secondary dark:text-rui-secondary-lighter" }
-				},
-				{
-					color: "error",
-					variant: "outlined",
-					class: { root: "text-rui-error dark:text-rui-error-lighter" }
-				},
-				{
-					color: "warning",
-					variant: "outlined",
-					class: { root: "text-rui-warning" }
-				},
-				{
-					color: "info",
-					variant: "outlined",
-					class: { root: "text-rui-info" }
-				},
-				{
-					color: "success",
-					variant: "outlined",
-					class: { root: "text-rui-success" }
-				},
-				{
-					color: "grey",
-					variant: "tonal",
-					class: { root: "bg-rui-neutral-500/10 dark:bg-rui-neutral-400/10" }
-				},
-				{
-					color: "primary",
-					variant: "tonal",
-					class: { root: "bg-rui-primary/15 text-rui-primary-darker dark:bg-rui-primary/35 dark:text-rui-primary-lighter" }
-				},
-				{
-					color: "secondary",
-					variant: "tonal",
-					class: { root: "bg-rui-secondary/20 text-rui-secondary-darker dark:bg-rui-secondary/35 dark:text-rui-secondary-lighter" }
-				},
-				{
-					color: "error",
-					variant: "tonal",
-					class: { root: "bg-rui-error/10 text-rui-error-darker dark:bg-rui-error/20 dark:text-rui-error-lighter" }
-				},
-				{
-					color: "warning",
-					variant: "tonal",
-					class: { root: "bg-rui-warning/10 text-rui-warning-darker dark:bg-rui-warning/20 dark:text-rui-warning-lighter" }
-				},
-				{
-					color: "info",
-					variant: "tonal",
-					class: { root: "bg-rui-info/10 text-rui-info-darker dark:bg-rui-info/20 dark:text-rui-info-lighter" }
-				},
-				{
-					color: "success",
-					variant: "tonal",
-					class: { root: "bg-rui-success/10 text-rui-success-darker dark:bg-rui-success/20 dark:text-rui-success-lighter" }
-				},
-				{
-					size: "sm",
-					prepended: true,
-					class: { root: "pl-1" }
-				},
-				{
-					tile: true,
-					class: { prepend: "rounded-sm" }
-				},
-				{
-					closeable: true,
-					class: {
-						root: "pr-1",
-						label: "pr-1"
-					}
-				},
-				{
-					closeable: true,
-					size: "sm",
-					class: {
-						root: "pr-1",
-						label: "pr-0.5"
-					}
-				},
-				{
-					closeable: true,
-					size: "xs",
-					class: {
-						root: "pr-0.5",
-						label: "pr-0.5"
-					}
-				},
-				{
-					disabled: true,
-					variant: ["filled", "tonal"],
-					class: { root: "!bg-rui-neutral-100 dark:!bg-rui-neutral-800" }
-				},
-				{
-					disabled: true,
-					variant: "outlined",
-					class: { root: "!border-rui-divider" }
-				}
-			],
-			compoundSlots: [{
-				slots: ["root"],
-				color: [
-					"primary",
-					"secondary",
-					"error",
-					"warning",
-					"info",
-					"success"
-				],
-				variant: "filled",
-				class: "text-rui-dark-text"
-			}],
-			defaultVariants: {
-				tile: false,
-				size: "md",
-				disabled: false,
-				clickable: false,
-				variant: "filled",
-				color: "grey"
-			}
-		});
 		const ui = computed(() => chipStyles({
 			tile: __props.tile,
 			size: __props.size,