@rotki/ui-library 3.1.6 → 3.2.0

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,

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

@@ -1 +1 @@
-{"version":3,"file":"RuiChip.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots","_useSlots","_openBlock","_createElementBlock","_mergeProps","_unref","_normalizeClass","_renderSlot","_createCommentVNode","_createElementVNode","_withModifiers","_createVNode","RuiIcon"],"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":"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"}
+{"version":3,"file":"RuiChip.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots","_useSlots","_openBlock","_createElementBlock","_mergeProps","_unref","_normalizeClass","_renderSlot","_createCommentVNode","_createElementVNode","_withModifiers","_createVNode","RuiIcon"],"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuDA,MAAM,OAAO;EAKb,MAAM,QAAQE,SAAA;EAKd,MAAM,OAAO,eAA+B,MAAM;EAElD,MAAM,KAAK,eAA8C,WAAW;GAClE,MAAG,QAAA;GACH,MAAG,QAAA;GACH,OAAI,QAAA;GACJ,SAAM,QAAA;GACN,UAAO,QAAA;GACP,WAAQ,QAAA;GACR,WAAW,CAAC,CAAC,MAAM;GACnB,WAAQ,QAAA;EACV,CAAC,CAAC;EAEF,MAAM,QAAQ,eAAoC;GAChD,MAAM,IAAyB,CAAC;GAChC,IAAI,QAAA,SACF,EAAE,kBAAkB,QAAA;GACtB,IAAI,QAAA,WACF,EAAE,QAAQ,QAAA;GACZ,OAAO;EACT,CAAC;EAED,SAAS,MAAM,GAAqB;GAClC,IAAI,CAAC,QAAA,aAAa,QAAA,UAChB;GAEF,KAAK,SAAS,CAAC;EACjB;;;;;;;EAQA,SAAS,UAAU,GAAwB;GACzC,IAAI,CAAC,QAAA,aAAa,QAAA,YAAY,EAAE,WAAW,IAAI,IAAI,GACjD;GACF,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KACjC;GAEF,EAAE,eAAe;GACjB,IAAI,IAAI,CAAC,EAAE,MAAM;EACnB;;GAIE,OAAAC,UAAA,GAAAC,mBAsCM,OAtCNC,WAsCM;IArCA,SAAA;IAAJ,KAAI;IACH,OAAOC,MAAA,EAAA,CAAE,CAAC,KAAI,EAAA,OAAUA,MAAA,EAAA,CAAE,CAAC,QAAA,YAAY,IAAI,EAAA,CAAA;IAC3C,OAAOA,MAAA,KAAA;IACP,gBAAc,QAAA;IACd,cAAY,QAAA;IACZ,iBAAe,QAAA,YAAY,KAAA;IAC3B,MAAM,QAAA,YAAS,WAAc,KAAA;IAC7B,UAAU,QAAA,aAAS,CAAK,QAAA,WAAQ,IAAO,KAAA;IACvC,iBAAe,QAAA,aAAa,QAAA,WAAQ,OAAU,KAAA;GACvC,GAAAA,MAAA,UAAA,CAAU,CAACN,KAAAA,QAAM,CAAA,SAAA,CAAA,GAAA;IACxB,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAM,MAAM;IACnB,WAAO,OAAA,OAAA,OAAA,MAAA,WAAE,UAAU,MAAM;;IAGlBC,KAAAA,OAAO,WADfE,UAAA,GAAAC,mBAKM,OAAA;;KAHH,OAAKG,eAAED,MAAA,EAAA,CAAE,CAAC,QAAO,CAAA;IAElBE,GAAAA,CAAAA,WAAuB,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;IAEzBE,mBAEO,QAAA,EAFA,OAAKH,eAAED,MAAA,EAAA,CAAE,CAAC,MAAK,EAAA,OAAUA,MAAA,EAAA,CAAE,CAAC,QAAA,YAAY,OAAO,EAAA,CAAA,CAAA,EAAA,GAAA,CACpDE,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA;IAGF,QAAA,aADRL,UAAA,GAAAC,mBAcS,UAAA;;KAZN,OAAKG,eAAED,MAAA,EAAA,CAAE,CAAC,MAAK,CAAA;KACf,UAAU,QAAA;KACX,MAAK;KACL,cAAW;KACV,UAAU,QAAA,mBAAgB,KAAQ,KAAA;KAClC,SAAK,OAAA,OAAA,OAAA,KAAAK,eAAA,WAAO,KAAI,aAAA,GAAA,CAAA,MAAA,CAAA;IAEjBC,GAAAA,CAAAA,YAIEC,iBAAA;KAHC,OAAKN,eAAED,MAAA,EAAA,CAAE,CAAC,UAAS,CAAA;KACnB,MAAMA,MAAA,qBAAA,CAAqB,CAAC,QAAA;KAC5B,MAAM,QAAA"}

package/dist/components/chips/chip-styles.d.ts

@@ -0,0 +1,223 @@
+export declare const chipStyles: import("tailwind-variants").TVReturnType<{
+    tile: {
+        true: {
+            root: string;
+        };
+        false: {
+            root: string;
+        };
+    };
+    size: {
+        md: {
+            root: string;
+        };
+        sm: {
+            root: string;
+            prepend: string;
+            label: string;
+            close: string;
+        };
+        xs: {
+            root: string;
+            prepend: string;
+            label: string;
+            close: string;
+        };
+    };
+    prepended: {
+        true: {
+            root: string;
+        };
+        false: {};
+    };
+    closeable: {
+        true: {};
+        false: {};
+    };
+    disabled: {
+        true: {
+            root: string;
+            close: string;
+        };
+        false: {};
+    };
+    clickable: {
+        true: {
+            root: string;
+        };
+        false: {
+            root: string;
+            close: string;
+        };
+    };
+    variant: {
+        filled: {};
+        outlined: {};
+        tonal: {};
+    };
+    color: {
+        grey: {
+            root: string;
+        };
+        primary: {};
+        secondary: {};
+        error: {};
+        warning: {};
+        info: {};
+        success: {};
+    };
+}, {
+    root: string;
+    prepend: string;
+    label: string;
+    close: string;
+    closeIcon: string;
+}, undefined, {
+    tile: {
+        true: {
+            root: string;
+        };
+        false: {
+            root: string;
+        };
+    };
+    size: {
+        md: {
+            root: string;
+        };
+        sm: {
+            root: string;
+            prepend: string;
+            label: string;
+            close: string;
+        };
+        xs: {
+            root: string;
+            prepend: string;
+            label: string;
+            close: string;
+        };
+    };
+    prepended: {
+        true: {
+            root: string;
+        };
+        false: {};
+    };
+    closeable: {
+        true: {};
+        false: {};
+    };
+    disabled: {
+        true: {
+            root: string;
+            close: string;
+        };
+        false: {};
+    };
+    clickable: {
+        true: {
+            root: string;
+        };
+        false: {
+            root: string;
+            close: string;
+        };
+    };
+    variant: {
+        filled: {};
+        outlined: {};
+        tonal: {};
+    };
+    color: {
+        grey: {
+            root: string;
+        };
+        primary: {};
+        secondary: {};
+        error: {};
+        warning: {};
+        info: {};
+        success: {};
+    };
+}, {
+    root: string;
+    prepend: string;
+    label: string;
+    close: string;
+    closeIcon: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    tile: {
+        true: {
+            root: string;
+        };
+        false: {
+            root: string;
+        };
+    };
+    size: {
+        md: {
+            root: string;
+        };
+        sm: {
+            root: string;
+            prepend: string;
+            label: string;
+            close: string;
+        };
+        xs: {
+            root: string;
+            prepend: string;
+            label: string;
+            close: string;
+        };
+    };
+    prepended: {
+        true: {
+            root: string;
+        };
+        false: {};
+    };
+    closeable: {
+        true: {};
+        false: {};
+    };
+    disabled: {
+        true: {
+            root: string;
+            close: string;
+        };
+        false: {};
+    };
+    clickable: {
+        true: {
+            root: string;
+        };
+        false: {
+            root: string;
+            close: string;
+        };
+    };
+    variant: {
+        filled: {};
+        outlined: {};
+        tonal: {};
+    };
+    color: {
+        grey: {
+            root: string;
+        };
+        primary: {};
+        secondary: {};
+        error: {};
+        warning: {};
+        info: {};
+        success: {};
+    };
+}, {
+    root: string;
+    prepend: string;
+    label: string;
+    close: string;
+    closeIcon: string;
+}>>;