@rotki/ui-library 3.1.6 → 3.2.0

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

@@ -1 +1 @@
-{"version":3,"file":"RuiCard.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useSlots","_openBlock","_createElementBlock","_mergeProps","_unref","_normalizeClass","_renderSlot","_createCommentVNode","_createBlock","RuiCardHeader","_createSlots","_withCtx"],"sources":["../../../src/components/cards/RuiCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VueClassValue } from '@/types/class-value';\nimport { computed } from 'vue';\nimport RuiCardHeader from '@/components/cards/RuiCardHeader.vue';\nimport { useKeyboardScroll } from '@/composables/keyboard-scroll';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiCardClassNames {\n  root?: VueClassValue;\n  content?: VueClassValue;\n  footer?: VueClassValue;\n  image?: VueClassValue;\n}\n\nexport interface Props {\n  dense?: boolean;\n  divide?: boolean;\n  variant?: 'flat' | 'outlined';\n  rounded?: 'sm' | 'md' | 'lg';\n  noPadding?: boolean;\n  /**\n   * Drops the content's top padding when a header renders, so the header's bottom padding is the\n   * only gap between them (16px, 12px when `dense`) instead of both paddings stacked. Ignored with\n   * `divide`, which draws a border there.\n   */\n  tightHeaderGap?: boolean;\n  classNames?: RuiCardClassNames;\n}\n\ndefineOptions({\n  name: 'RuiCard',\n  inheritAttrs: false,\n});\n\nconst {\n  divide = false,\n  dense = false,\n  variant: cardVariant = 'outlined',\n  rounded = 'md',\n  noPadding = false,\n  tightHeaderGap = false,\n  classNames,\n} = defineProps<Props>();\n\nconst slots = defineSlots<{\n  'image'?: () => any;\n  'custom-header'?: () => any;\n  'prepend'?: () => any;\n  'header'?: () => any;\n  'subheader'?: () => any;\n  'default'?: () => any;\n  'footer'?: () => any;\n}>();\n\nconst card = 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\nconst content = useTemplateRef<HTMLDivElement>('content');\n// a fixed-height card scrolls its content, which keyboard users need to reach when it holds no controls\nconst contentTabindex = useKeyboardScroll(content);\n\nconst hasHeadContent = computed<boolean>(() => !!slots.header || !!slots.subheader);\n\nconst contentPadding = computed<'none' | 'dense' | 'normal'>(() => {\n  if (noPadding)\n    return 'none';\n  return dense ? 'dense' : 'normal';\n});\n\n// only under a header (built-in or `custom-header`), and not with `divide`, whose border needs space on both sides\nconst underHeader = computed<boolean>(() => tightHeaderGap && !divide && (get(hasHeadContent) || !!slots['custom-header']));\n\nconst ui = computed<ReturnType<typeof card>>(() => card({\n  variant: cardVariant,\n  rounded,\n  divide,\n  dense,\n  padding: get(contentPadding),\n  underHeader: get(underHeader),\n}));\n</script>\n\n<template>\n  <div\n    :class=\"ui.root({ class: cn(classNames?.root ?? $attrs.class) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <div\n      v-if=\"slots.image\"\n      data-id=\"card-image\"\n      :class=\"ui.image({ class: cn(classNames?.image) })\"\n    >\n      <slot name=\"image\" />\n    </div>\n    <slot name=\"custom-header\">\n      <RuiCardHeader\n        v-if=\"hasHeadContent\"\n        :dense=\"dense\"\n      >\n        <template\n          v-if=\"slots.prepend\"\n          #prepend\n        >\n          <slot name=\"prepend\" />\n        </template>\n        <template\n          v-if=\"slots.header\"\n          #header\n        >\n          <slot name=\"header\" />\n        </template>\n        <template\n          v-if=\"slots.subheader\"\n          #subheader\n        >\n          <slot name=\"subheader\" />\n        </template>\n      </RuiCardHeader>\n    </slot>\n    <div\n      v-if=\"slots.default\"\n      ref=\"content\"\n      data-id=\"card-content\"\n      :tabindex=\"contentTabindex\"\n      :class=\"ui.content({ class: cn(classNames?.content) })\"\n    >\n      <slot />\n    </div>\n    <div\n      v-if=\"slots.footer\"\n      data-id=\"card-footer\"\n      :class=\"ui.footer({ class: cn(classNames?.footer) })\"\n    >\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiCard.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useSlots","_openBlock","_createElementBlock","_mergeProps","_unref","_normalizeClass","_renderSlot","_createCommentVNode","_createBlock","RuiCardHeader","_createSlots","_withCtx"],"sources":["../../../src/components/cards/RuiCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VueClassValue } from '@/types/class-value';\nimport { computed } from 'vue';\nimport RuiCardHeader from '@/components/cards/RuiCardHeader.vue';\nimport { useKeyboardScroll } from '@/composables/keyboard-scroll';\nimport { cn } from '@/utils/tv';\nimport { cardStyles } from './card-styles';\n\nexport interface RuiCardClassNames {\n  root?: VueClassValue;\n  content?: VueClassValue;\n  footer?: VueClassValue;\n  image?: VueClassValue;\n}\n\nexport interface Props {\n  dense?: boolean;\n  divide?: boolean;\n  variant?: 'flat' | 'outlined';\n  rounded?: 'sm' | 'md' | 'lg';\n  noPadding?: boolean;\n  /**\n   * Drops the content's top padding when a header renders, so the header's bottom padding is the\n   * only gap between them (16px, 12px when `dense`) instead of both paddings stacked. Ignored with\n   * `divide`, which draws a border there.\n   */\n  tightHeaderGap?: boolean;\n  classNames?: RuiCardClassNames;\n}\n\ndefineOptions({\n  name: 'RuiCard',\n  inheritAttrs: false,\n});\n\nconst {\n  divide = false,\n  dense = false,\n  variant: cardVariant = 'outlined',\n  rounded = 'md',\n  noPadding = false,\n  tightHeaderGap = false,\n  classNames,\n} = defineProps<Props>();\n\nconst slots = defineSlots<{\n  'image'?: () => any;\n  'custom-header'?: () => any;\n  'prepend'?: () => any;\n  'header'?: () => any;\n  'subheader'?: () => any;\n  'default'?: () => any;\n  'footer'?: () => any;\n}>();\n\nconst content = useTemplateRef<HTMLDivElement>('content');\n// a fixed-height card scrolls its content, which keyboard users need to reach when it holds no controls\nconst contentTabindex = useKeyboardScroll(content);\n\nconst hasHeadContent = computed<boolean>(() => !!slots.header || !!slots.subheader);\n\nconst contentPadding = computed<'none' | 'dense' | 'normal'>(() => {\n  if (noPadding)\n    return 'none';\n  return dense ? 'dense' : 'normal';\n});\n\n// only under a header (built-in or `custom-header`), and not with `divide`, whose border needs space on both sides\nconst underHeader = computed<boolean>(() => tightHeaderGap && !divide && (get(hasHeadContent) || !!slots['custom-header']));\n\nconst ui = computed<ReturnType<typeof cardStyles>>(() => cardStyles({\n  variant: cardVariant,\n  rounded,\n  divide,\n  dense,\n  padding: get(contentPadding),\n  underHeader: get(underHeader),\n}));\n</script>\n\n<template>\n  <div\n    :class=\"ui.root({ class: cn(classNames?.root ?? $attrs.class) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <div\n      v-if=\"slots.image\"\n      data-id=\"card-image\"\n      :class=\"ui.image({ class: cn(classNames?.image) })\"\n    >\n      <slot name=\"image\" />\n    </div>\n    <slot name=\"custom-header\">\n      <RuiCardHeader\n        v-if=\"hasHeadContent\"\n        :dense=\"dense\"\n      >\n        <template\n          v-if=\"slots.prepend\"\n          #prepend\n        >\n          <slot name=\"prepend\" />\n        </template>\n        <template\n          v-if=\"slots.header\"\n          #header\n        >\n          <slot name=\"header\" />\n        </template>\n        <template\n          v-if=\"slots.subheader\"\n          #subheader\n        >\n          <slot name=\"subheader\" />\n        </template>\n      </RuiCardHeader>\n    </slot>\n    <div\n      v-if=\"slots.default\"\n      ref=\"content\"\n      data-id=\"card-content\"\n      :tabindex=\"contentTabindex\"\n      :class=\"ui.content({ class: cn(classNames?.content) })\"\n    >\n      <slot />\n    </div>\n    <div\n      v-if=\"slots.footer\"\n      data-id=\"card-footer\"\n      :class=\"ui.footer({ class: cn(classNames?.footer) })\"\n    >\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6CA,MAAM,QAAQC,SAAA;EAUd,MAAM,UAAU,eAA+B,SAAS;EAExD,MAAM,kBAAkB,kBAAkB,OAAO;EAEjD,MAAM,iBAAiB,eAAwB,CAAC,CAAC,MAAM,UAAU,CAAC,CAAC,MAAM,SAAS;EAElF,MAAM,iBAAiB,eAA4C;GACjE,IAAI,QAAA,WACF,OAAO;GACT,OAAO,QAAA,QAAQ,UAAU;EAC3B,CAAC;EAGD,MAAM,cAAc,eAAwB,QAAA,kBAAkB,CAAC,QAAA,WAAW,IAAI,cAAc,KAAK,CAAC,CAAC,MAAM,iBAAiB;EAE1H,MAAM,KAAK,eAA8C,WAAW;GAClE,SAAS,QAAA;GACT,SAAM,QAAA;GACN,QAAK,QAAA;GACL,OAAI,QAAA;GACJ,SAAS,IAAI,cAAc;GAC3B,aAAa,IAAI,WAAW;EAC9B,CAAC,CAAC;;GAIA,OAAAC,UAAA,GAAAC,mBAoDM,OApDNC,WAoDM,EAnDH,OAAO,GAAA,MAAG,KAAI,EAAA,OAAUC,MAAA,EAAA,CAAE,CAAC,QAAA,YAAY,QAAQL,KAAAA,OAAO,KAAK,EAAA,CAAA,EAC/CA,GAAAA;IAAAA,GAAAA,KAAAA;IAAM,OAAS,KAAA;GAAS,CAAA,GAAA;IAG7B,MAAM,SADdE,UAAA,GAAAC,mBAMM,OAAA;;KAJJ,WAAQ;KACP,OAAKG,eAAE,GAAA,MAAG,MAAK,EAAA,OAAUD,MAAA,EAAA,CAAE,CAAC,QAAA,YAAY,KAAK,EAAA,CAAA,CAAA;IAE9CE,GAAAA,CAAAA,WAAqB,KAAA,QAAA,OAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;IAEvBA,WAwBO,KAAA,QAAA,iBAAA,CAAA,SAAA,CAtBG,eAAA,SADRL,UAAA,GAAAO,YAsBgBC,uBAAA;;KApBb,OAAO,QAAA;;KAGA,MAAM,UAAA;MACX,MAAA;MAED,IAAAE,cAAuB,CAAvBL,WAAuB,KAAA,QAAA,SAAA,CAAA,CAAA;;;KAGjB,MAAM,SAAA;MACX,MAAA;MAED,IAAAK,cAAsB,CAAtBL,WAAsB,KAAA,QAAA,QAAA,CAAA,CAAA;;;KAGhB,MAAM,YAAA;MACX,MAAA;MAED,IAAAK,cAAyB,CAAzBL,WAAyB,KAAA,QAAA,WAAA,CAAA,CAAA;;;;IAKvB,MAAM,WADdL,UAAA,GAAAC,mBAQM,OAAA;;KANA,SAAA;KAAJ,KAAI;KACJ,WAAQ;KACP,UAAUE,MAAA,eAAA;KACV,OAAKC,eAAE,GAAA,MAAG,QAAO,EAAA,OAAUD,MAAA,EAAA,CAAE,CAAC,QAAA,YAAY,OAAO,EAAA,CAAA,CAAA;IAElDE,GAAAA,CAAAA,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,IAAA,UAAA,KAAA,mBAAA,IAAA,IAAA;IAGF,MAAM,UADdL,UAAA,GAAAC,mBAMM,OAAA;;KAJJ,WAAQ;KACP,OAAKG,eAAE,GAAA,MAAG,OAAM,EAAA,OAAUD,MAAA,EAAA,CAAE,CAAC,QAAA,YAAY,MAAM,EAAA,CAAA,CAAA;IAEhDE,GAAAA,CAAAA,WAAsB,KAAA,QAAA,QAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"RuiCardHeader.js","names":["_sfc_main"],"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":""}
+{"version":3,"file":"RuiCardHeader.js","names":["_sfc_main"],"sources":["../../../src/components/cards/RuiCardHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\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>();\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":""}

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

@@ -1,4 +1,4 @@
-import { tv } from "../../utils/tv.js";
+import { cardHeaderStyles } from "./card-header-styles.js";
 import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderSlot, unref, useSlots } from "vue";
 //#region src/components/cards/RuiCardHeader.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "flex flex-col justify-center" };
@@ -17,25 +17,7 @@ var RuiCardHeader_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 	} },
 	setup(__props) {
 		const slots = useSlots();
-		const cardHeader = 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 }
-		});
-		const ui = computed(() => cardHeader({ dense: __props.dense }));
+		const ui = computed(() => cardHeaderStyles({ dense: __props.dense }));
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", mergeProps({ class: unref(ui).root() }, _ctx.$attrs), [slots.prepend ? (openBlock(), createElementBlock("div", {
 				key: 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 { 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>();\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":";;;;;;;;;;;;;;;;;;EAcA,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 { 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>();\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":""}