@rotki/ui-library 3.1.7 → 3.3.0

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 { 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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;
+}>>;

package/dist/components/chips/chip-styles.js

@@ -0,0 +1,246 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/chips/chip-styles.ts
+var 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"
+	}
+});
+//#endregion
+export { chipStyles };
+
+//# sourceMappingURL=chip-styles.js.map

package/dist/components/chips/chip-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip-styles.js","names":[],"sources":["../../../src/components/chips/chip-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const 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"],"mappings":"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"}

package/dist/components/color-picker/RuiColorBoard.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiColorBoard.js","names":["_sfc_main"],"sources":["../../../src/components/color-picker/RuiColorBoard.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { clamp } from '@vueuse/shared';\nimport tinycolor from 'tinycolor2';\nimport { cn, tv } from '@/utils/tv';\nimport { type Color, useElementDrag } from './utils';\n\ndefineOptions({\n  name: 'RuiColorBoard',\n  inheritAttrs: false,\n});\n\nconst { color } = defineProps<{\n  color: Color;\n}>();\n\nconst emit = defineEmits<{\n  'update:board': [event: { saturation: number; brightness: number }];\n}>();\n\nconst wrapper = useTemplateRef<HTMLElement>('wrapper');\n\nconst state = reactive({\n  hexString: hueToHex(color.hue),\n  saturation: color.saturation,\n  brightness: color.brightness,\n});\n\nconst cursorTop = ref<number>(0);\nconst cursorLeft = ref<number>(0);\n\nconst { handleClick, onMouseDown, onTouchStart } = useElementDrag(emitColor);\n\nconst cursorStyle = computed<{ top: string; left: string }>(() => ({\n  top: `${get(cursorTop) * 100}%`,\n  left: `${get(cursorLeft) * 100}%`,\n}));\n\nfunction hueToHex(hue: number): string {\n  return tinycolor({ h: hue, s: 1, v: 1 }).toHexString();\n}\n\nfunction updatePosition(): void {\n  set(cursorLeft, state.saturation);\n  set(cursorTop, 1 - state.brightness);\n}\n\nfunction emitColor(x: number, y: number): void {\n  const el = get(wrapper);\n  if (!el)\n    return;\n\n  const rect = el.getBoundingClientRect();\n  const { width, height, left, top } = rect;\n  let calculatedX = x - left;\n  let calculatedY = y - top;\n\n  calculatedX = clamp(calculatedX, 0, width);\n  calculatedY = clamp(calculatedY, 0, height);\n\n  const saturation = calculatedX / width;\n  const brightness = clamp(-(calculatedY / height) + 1, 0, 1);\n\n  set(cursorLeft, calculatedX / width);\n  set(cursorTop, calculatedY / height);\n\n  state.saturation = saturation;\n  state.brightness = brightness;\n\n  emit('update:board', { saturation, brightness });\n}\n\nwatch(\n  () => [color.hue, color.saturation, color.brightness] as const,\n  ([hue, saturation, brightness]) => {\n    state.hexString = hueToHex(hue);\n    state.saturation = saturation;\n    state.brightness = brightness;\n    updatePosition();\n  },\n);\n\nonMounted(() => {\n  updatePosition();\n});\n\nconst rootStyle = tv({ base: 'relative w-full h-40 overflow-hidden cursor-pointer rounded-rui-control' });\n</script>\n\n<template>\n  <div\n    ref=\"wrapper\"\n    role=\"slider\"\n    aria-label=\"Color saturation and brightness\"\n    :aria-valuetext=\"`Saturation ${Math.round(state.saturation * 100)}%, Brightness ${Math.round(state.brightness * 100)}%`\"\n    data-id=\"color-board\"\n    :class=\"rootStyle({ class: cn($attrs.class) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    :style=\"{ backgroundColor: state.hexString }\"\n    @click=\"handleClick($event)\"\n    @mousedown=\"onMouseDown($event)\"\n    @touchstart=\"onTouchStart($event)\"\n  >\n    <div class=\"absolute inset-0 to-transparent bg-linear-to-r from-white\" />\n    <div class=\"absolute inset-0 to-transparent bg-linear-to-t from-black\" />\n    <div\n      data-id=\"cursor\"\n      class=\"absolute w-5 h-5 -translate-x-1/2 -translate-y-1/2 border-2 border-white shadow-rui-control rounded-full after:content-[''] after:absolute after:inset-0 after:rounded-full after:border-2 after:border-black/15\"\n      :style=\"cursorStyle\"\n    />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiColorBoard.js","names":["_sfc_main"],"sources":["../../../src/components/color-picker/RuiColorBoard.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { clamp } from '@vueuse/shared';\nimport tinycolor from 'tinycolor2';\nimport { cn } from '@/utils/tv';\nimport { colorBoardStyles } from './color-board-styles';\nimport { type Color, useElementDrag } from './utils';\n\ndefineOptions({\n  name: 'RuiColorBoard',\n  inheritAttrs: false,\n});\n\nconst { color } = defineProps<{\n  color: Color;\n}>();\n\nconst emit = defineEmits<{\n  'update:board': [event: { saturation: number; brightness: number }];\n}>();\n\nconst wrapper = useTemplateRef<HTMLElement>('wrapper');\n\nconst state = reactive({\n  hexString: hueToHex(color.hue),\n  saturation: color.saturation,\n  brightness: color.brightness,\n});\n\nconst cursorTop = ref<number>(0);\nconst cursorLeft = ref<number>(0);\n\nconst { handleClick, onMouseDown, onTouchStart } = useElementDrag(emitColor);\n\nconst cursorStyle = computed<{ top: string; left: string }>(() => ({\n  top: `${get(cursorTop) * 100}%`,\n  left: `${get(cursorLeft) * 100}%`,\n}));\n\nfunction hueToHex(hue: number): string {\n  return tinycolor({ h: hue, s: 1, v: 1 }).toHexString();\n}\n\nfunction updatePosition(): void {\n  set(cursorLeft, state.saturation);\n  set(cursorTop, 1 - state.brightness);\n}\n\nfunction emitColor(x: number, y: number): void {\n  const el = get(wrapper);\n  if (!el)\n    return;\n\n  const rect = el.getBoundingClientRect();\n  const { width, height, left, top } = rect;\n  let calculatedX = x - left;\n  let calculatedY = y - top;\n\n  calculatedX = clamp(calculatedX, 0, width);\n  calculatedY = clamp(calculatedY, 0, height);\n\n  const saturation = calculatedX / width;\n  const brightness = clamp(-(calculatedY / height) + 1, 0, 1);\n\n  set(cursorLeft, calculatedX / width);\n  set(cursorTop, calculatedY / height);\n\n  state.saturation = saturation;\n  state.brightness = brightness;\n\n  emit('update:board', { saturation, brightness });\n}\n\nwatch(\n  () => [color.hue, color.saturation, color.brightness] as const,\n  ([hue, saturation, brightness]) => {\n    state.hexString = hueToHex(hue);\n    state.saturation = saturation;\n    state.brightness = brightness;\n    updatePosition();\n  },\n);\n\nonMounted(() => {\n  updatePosition();\n});\n</script>\n\n<template>\n  <div\n    ref=\"wrapper\"\n    role=\"slider\"\n    aria-label=\"Color saturation and brightness\"\n    :aria-valuetext=\"`Saturation ${Math.round(state.saturation * 100)}%, Brightness ${Math.round(state.brightness * 100)}%`\"\n    data-id=\"color-board\"\n    :class=\"colorBoardStyles({ class: cn($attrs.class) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    :style=\"{ backgroundColor: state.hexString }\"\n    @click=\"handleClick($event)\"\n    @mousedown=\"onMouseDown($event)\"\n    @touchstart=\"onTouchStart($event)\"\n  >\n    <div class=\"absolute inset-0 to-transparent bg-linear-to-r from-white\" />\n    <div class=\"absolute inset-0 to-transparent bg-linear-to-t from-black\" />\n    <div\n      data-id=\"cursor\"\n      class=\"absolute w-5 h-5 -translate-x-1/2 -translate-y-1/2 border-2 border-white shadow-rui-control rounded-full after:content-[''] after:absolute after:inset-0 after:rounded-full after:border-2 after:border-black/15\"\n      :style=\"cursorStyle\"\n    />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/color-picker/RuiColorBoard.vue_vue_type_script_setup_true_lang.js

@@ -1,5 +1,6 @@
 import { clamp, get, set } from "../../vendor/@vueuse/shared/dist/index.js";
-import { cn, tv } from "../../utils/tv.js";
+import { cn } from "../../utils/tv.js";
+import { colorBoardStyles } from "./color-board-styles.js";
 import { useElementDrag } from "./utils.js";
 import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeStyle, onMounted, openBlock, reactive, ref, unref, useTemplateRef, watch } from "vue";
 import tinycolor from "tinycolor2";
@@ -69,7 +70,6 @@ var RuiColorBoard_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 		onMounted(() => {
 			updatePosition();
 		});
-		const rootStyle = tv({ base: "relative w-full h-40 overflow-hidden cursor-pointer rounded-rui-control" });
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", mergeProps({
 				ref_key: "wrapper",
@@ -78,7 +78,7 @@ var RuiColorBoard_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 				"aria-label": "Color saturation and brightness",
 				"aria-valuetext": `Saturation ${Math.round(unref(state).saturation * 100)}%, Brightness ${Math.round(unref(state).brightness * 100)}%`,
 				"data-id": "color-board",
-				class: unref(rootStyle)({ class: unref(cn)(_ctx.$attrs.class) })
+				class: unref(colorBoardStyles)({ class: unref(cn)(_ctx.$attrs.class) })
 			}, {
 				..._ctx.$attrs,
 				class: void 0

package/dist/components/color-picker/RuiColorBoard.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiColorBoard.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_openBlock","_createElementBlock","_mergeProps","_unref","_createElementVNode","_normalizeStyle"],"sources":["../../../src/components/color-picker/RuiColorBoard.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { clamp } from '@vueuse/shared';\nimport tinycolor from 'tinycolor2';\nimport { cn, tv } from '@/utils/tv';\nimport { type Color, useElementDrag } from './utils';\n\ndefineOptions({\n  name: 'RuiColorBoard',\n  inheritAttrs: false,\n});\n\nconst { color } = defineProps<{\n  color: Color;\n}>();\n\nconst emit = defineEmits<{\n  'update:board': [event: { saturation: number; brightness: number }];\n}>();\n\nconst wrapper = useTemplateRef<HTMLElement>('wrapper');\n\nconst state = reactive({\n  hexString: hueToHex(color.hue),\n  saturation: color.saturation,\n  brightness: color.brightness,\n});\n\nconst cursorTop = ref<number>(0);\nconst cursorLeft = ref<number>(0);\n\nconst { handleClick, onMouseDown, onTouchStart } = useElementDrag(emitColor);\n\nconst cursorStyle = computed<{ top: string; left: string }>(() => ({\n  top: `${get(cursorTop) * 100}%`,\n  left: `${get(cursorLeft) * 100}%`,\n}));\n\nfunction hueToHex(hue: number): string {\n  return tinycolor({ h: hue, s: 1, v: 1 }).toHexString();\n}\n\nfunction updatePosition(): void {\n  set(cursorLeft, state.saturation);\n  set(cursorTop, 1 - state.brightness);\n}\n\nfunction emitColor(x: number, y: number): void {\n  const el = get(wrapper);\n  if (!el)\n    return;\n\n  const rect = el.getBoundingClientRect();\n  const { width, height, left, top } = rect;\n  let calculatedX = x - left;\n  let calculatedY = y - top;\n\n  calculatedX = clamp(calculatedX, 0, width);\n  calculatedY = clamp(calculatedY, 0, height);\n\n  const saturation = calculatedX / width;\n  const brightness = clamp(-(calculatedY / height) + 1, 0, 1);\n\n  set(cursorLeft, calculatedX / width);\n  set(cursorTop, calculatedY / height);\n\n  state.saturation = saturation;\n  state.brightness = brightness;\n\n  emit('update:board', { saturation, brightness });\n}\n\nwatch(\n  () => [color.hue, color.saturation, color.brightness] as const,\n  ([hue, saturation, brightness]) => {\n    state.hexString = hueToHex(hue);\n    state.saturation = saturation;\n    state.brightness = brightness;\n    updatePosition();\n  },\n);\n\nonMounted(() => {\n  updatePosition();\n});\n\nconst rootStyle = tv({ base: 'relative w-full h-40 overflow-hidden cursor-pointer rounded-rui-control' });\n</script>\n\n<template>\n  <div\n    ref=\"wrapper\"\n    role=\"slider\"\n    aria-label=\"Color saturation and brightness\"\n    :aria-valuetext=\"`Saturation ${Math.round(state.saturation * 100)}%, Brightness ${Math.round(state.brightness * 100)}%`\"\n    data-id=\"color-board\"\n    :class=\"rootStyle({ class: cn($attrs.class) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    :style=\"{ backgroundColor: state.hexString }\"\n    @click=\"handleClick($event)\"\n    @mousedown=\"onMouseDown($event)\"\n    @touchstart=\"onTouchStart($event)\"\n  >\n    <div class=\"absolute inset-0 to-transparent bg-linear-to-r from-white\" />\n    <div class=\"absolute inset-0 to-transparent bg-linear-to-t from-black\" />\n    <div\n      data-id=\"cursor\"\n      class=\"absolute w-5 h-5 -translate-x-1/2 -translate-y-1/2 border-2 border-white shadow-rui-control rounded-full after:content-[''] after:absolute after:inset-0 after:rounded-full after:border-2 after:border-black/15\"\n      :style=\"cursorStyle\"\n    />\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiColorBoard.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_openBlock","_createElementBlock","_mergeProps","_unref","_createElementVNode","_normalizeStyle"],"sources":["../../../src/components/color-picker/RuiColorBoard.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { clamp } from '@vueuse/shared';\nimport tinycolor from 'tinycolor2';\nimport { cn } from '@/utils/tv';\nimport { colorBoardStyles } from './color-board-styles';\nimport { type Color, useElementDrag } from './utils';\n\ndefineOptions({\n  name: 'RuiColorBoard',\n  inheritAttrs: false,\n});\n\nconst { color } = defineProps<{\n  color: Color;\n}>();\n\nconst emit = defineEmits<{\n  'update:board': [event: { saturation: number; brightness: number }];\n}>();\n\nconst wrapper = useTemplateRef<HTMLElement>('wrapper');\n\nconst state = reactive({\n  hexString: hueToHex(color.hue),\n  saturation: color.saturation,\n  brightness: color.brightness,\n});\n\nconst cursorTop = ref<number>(0);\nconst cursorLeft = ref<number>(0);\n\nconst { handleClick, onMouseDown, onTouchStart } = useElementDrag(emitColor);\n\nconst cursorStyle = computed<{ top: string; left: string }>(() => ({\n  top: `${get(cursorTop) * 100}%`,\n  left: `${get(cursorLeft) * 100}%`,\n}));\n\nfunction hueToHex(hue: number): string {\n  return tinycolor({ h: hue, s: 1, v: 1 }).toHexString();\n}\n\nfunction updatePosition(): void {\n  set(cursorLeft, state.saturation);\n  set(cursorTop, 1 - state.brightness);\n}\n\nfunction emitColor(x: number, y: number): void {\n  const el = get(wrapper);\n  if (!el)\n    return;\n\n  const rect = el.getBoundingClientRect();\n  const { width, height, left, top } = rect;\n  let calculatedX = x - left;\n  let calculatedY = y - top;\n\n  calculatedX = clamp(calculatedX, 0, width);\n  calculatedY = clamp(calculatedY, 0, height);\n\n  const saturation = calculatedX / width;\n  const brightness = clamp(-(calculatedY / height) + 1, 0, 1);\n\n  set(cursorLeft, calculatedX / width);\n  set(cursorTop, calculatedY / height);\n\n  state.saturation = saturation;\n  state.brightness = brightness;\n\n  emit('update:board', { saturation, brightness });\n}\n\nwatch(\n  () => [color.hue, color.saturation, color.brightness] as const,\n  ([hue, saturation, brightness]) => {\n    state.hexString = hueToHex(hue);\n    state.saturation = saturation;\n    state.brightness = brightness;\n    updatePosition();\n  },\n);\n\nonMounted(() => {\n  updatePosition();\n});\n</script>\n\n<template>\n  <div\n    ref=\"wrapper\"\n    role=\"slider\"\n    aria-label=\"Color saturation and brightness\"\n    :aria-valuetext=\"`Saturation ${Math.round(state.saturation * 100)}%, Brightness ${Math.round(state.brightness * 100)}%`\"\n    data-id=\"color-board\"\n    :class=\"colorBoardStyles({ class: cn($attrs.class) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    :style=\"{ backgroundColor: state.hexString }\"\n    @click=\"handleClick($event)\"\n    @mousedown=\"onMouseDown($event)\"\n    @touchstart=\"onTouchStart($event)\"\n  >\n    <div class=\"absolute inset-0 to-transparent bg-linear-to-r from-white\" />\n    <div class=\"absolute inset-0 to-transparent bg-linear-to-t from-black\" />\n    <div\n      data-id=\"cursor\"\n      class=\"absolute w-5 h-5 -translate-x-1/2 -translate-y-1/2 border-2 border-white shadow-rui-control rounded-full after:content-[''] after:absolute after:inset-0 after:rounded-full after:border-2 after:border-black/15\"\n      :style=\"cursorStyle\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAgBA,MAAM,OAAO;EAIb,MAAM,UAAU,eAA4B,SAAS;EAErD,MAAM,QAAQ,SAAS;GACrB,WAAW,SAAS,QAAA,MAAM,GAAG;GAC7B,YAAY,QAAA,MAAM;GAClB,YAAY,QAAA,MAAM;EACpB,CAAC;EAED,MAAM,YAAY,IAAY,CAAC;EAC/B,MAAM,aAAa,IAAY,CAAC;EAEhC,MAAM,EAAE,aAAa,aAAa,iBAAiB,eAAe,SAAS;EAE3E,MAAM,cAAc,gBAA+C;GACjE,KAAK,GAAG,IAAI,SAAS,IAAI,IAAI;GAC7B,MAAM,GAAG,IAAI,UAAU,IAAI,IAAI;EACjC,EAAE;EAEF,SAAS,SAAS,KAAqB;GACrC,OAAO,UAAU;IAAE,GAAG;IAAK,GAAG;IAAG,GAAG;GAAE,CAAC,CAAC,CAAC,YAAY;EACvD;EAEA,SAAS,iBAAuB;GAC9B,IAAI,YAAY,MAAM,UAAU;GAChC,IAAI,WAAW,IAAI,MAAM,UAAU;EACrC;EAEA,SAAS,UAAU,GAAW,GAAiB;GAC7C,MAAM,KAAK,IAAI,OAAO;GACtB,IAAI,CAAC,IACH;GAGF,MAAM,EAAE,OAAO,QAAQ,MAAM,QADhB,GAAG,sBACqB;GACrC,IAAI,cAAc,IAAI;GACtB,IAAI,cAAc,IAAI;GAEtB,cAAc,MAAM,aAAa,GAAG,KAAK;GACzC,cAAc,MAAM,aAAa,GAAG,MAAM;GAE1C,MAAM,aAAa,cAAc;GACjC,MAAM,aAAa,MAAM,EAAE,cAAc,UAAU,GAAG,GAAG,CAAC;GAE1D,IAAI,YAAY,cAAc,KAAK;GACnC,IAAI,WAAW,cAAc,MAAM;GAEnC,MAAM,aAAa;GACnB,MAAM,aAAa;GAEnB,KAAK,gBAAgB;IAAE;IAAY;GAAW,CAAC;EACjD;EAEA,YACQ;GAAC,QAAA,MAAM;GAAK,QAAA,MAAM;GAAY,QAAA,MAAM;EAAU,IACnD,CAAC,KAAK,YAAY,gBAAgB;GACjC,MAAM,YAAY,SAAS,GAAG;GAC9B,MAAM,aAAa;GACnB,MAAM,aAAa;GACnB,eAAe;EACjB,CACF;EAEA,gBAAgB;GACd,eAAe;EACjB,CAAC;;GAIC,OAAAC,UAAA,GAAAC,mBAoBM,OApBNC,WAoBM;IAnBA,SAAA;IAAJ,KAAI;IACJ,MAAK;IACL,cAAW;IACV,kBAAc,cAAgB,KAAK,MAAMC,MAAA,KAAA,CAAK,CAAC,aAAU,GAAA,EAAA,gBAAwB,KAAK,MAAMA,MAAA,KAAA,CAAK,CAAC,aAAU,GAAA,EAAA;IAC7G,WAAQ;IACP,OAAOA,MAAA,gBAAA,CAAgB,CAAA,EAAA,OAAUA,MAAA,EAAA,CAAE,CAACJ,KAAAA,OAAO,KAAK,EAAA,CAAA;GACpCA,GAAAA;IAAAA,GAAAA,KAAAA;IAAM,OAAS,KAAA;GAAS,GAAA;IACpC,OAAK,EAAA,iBAAqBI,MAAA,KAAA,CAAK,CAAC,UAAS;IACzC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAEA,MAAA,WAAA,CAAW,CAAC,MAAM;IACzB,aAAS,OAAA,OAAA,OAAA,MAAA,WAAEA,MAAA,WAAA,CAAW,CAAC,MAAM;IAC7B,cAAU,OAAA,OAAA,OAAA,MAAA,WAAEA,MAAA,YAAA,CAAY,CAAC,MAAM;;IAEhC,OAAA,OAAA,OAAA,KAAAC,mBAAyE,OAAA,EAApE,OAAM,4DAA2D,GAAA,MAAA,EAAA;IACtE,OAAA,OAAA,OAAA,KAAAA,mBAAyE,OAAA,EAApE,OAAM,4DAA2D,GAAA,MAAA,EAAA;IACtEA,mBAIE,OAAA;KAHA,WAAQ;KACR,OAAM;KACL,OAAKC,eAAEF,MAAA,WAAA,CAAW"}

package/dist/components/color-picker/RuiColorHue.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiColorHue.js","names":["_sfc_main"],"sources":["../../../src/components/color-picker/RuiColorHue.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { clamp } from '@vueuse/shared';\nimport { cn, tv } from '@/utils/tv';\nimport { roundTwoDecimal, useElementDrag } from './utils';\n\ninterface Limit {\n  lowerLimit: number;\n  upperLimit: number;\n  availableWidth: number;\n}\n\ndefineOptions({\n  name: 'RuiColorHue',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<number>({ required: true });\n\nconst barElement = useTemplateRef<HTMLElement>('barElement');\n\nconst MAX_HUE = 360;\nconst CURSOR_WIDTH = 16;\nconst cursorLeft = ref<string>('');\n\nconst { handleClick, onMouseDown, onTouchStart } = useElementDrag(emitHue);\n\nconst cursorStyle = computed<{ left: string }>(() => ({\n  left: get(cursorLeft),\n}));\n\nfunction getLimit(width: number): Limit {\n  const lowerLimit = CURSOR_WIDTH / 2;\n  const upperLimit = width - lowerLimit;\n  const availableWidth = upperLimit - lowerLimit;\n\n  return { lowerLimit, upperLimit, availableWidth };\n}\n\nfunction updatePosition(): void {\n  set(cursorLeft, getCursorLeft());\n}\n\nfunction getCursorLeft(): string {\n  const el = get(barElement);\n  if (!el)\n    return '0';\n\n  const rect = el.getBoundingClientRect();\n  const actualWidth = rect.width;\n  const { lowerLimit, availableWidth } = getLimit(actualWidth);\n\n  const hueVal = get(modelValue);\n  const usedHue = hueVal === MAX_HUE ? MAX_HUE : hueVal % MAX_HUE;\n\n  const percentage = roundTwoDecimal((usedHue / MAX_HUE) * (availableWidth / actualWidth) * 100);\n  return `calc(${percentage}% + ${lowerLimit}px)`;\n}\n\nfunction emitHue(x: number): void {\n  const el = get(barElement);\n  if (!el)\n    return;\n\n  const rect = el.getBoundingClientRect();\n  let calculatedX = x - rect.left;\n\n  const { lowerLimit, upperLimit, availableWidth } = getLimit(rect.width);\n  calculatedX = clamp(calculatedX, lowerLimit, upperLimit);\n\n  set(modelValue, Math.round(((calculatedX - lowerLimit) / availableWidth) * MAX_HUE));\n}\n\nwatch(modelValue, () => {\n  updatePosition();\n});\n\nonMounted(() => {\n  updatePosition();\n});\n\nconst rootStyle = tv({ base: 'relative w-full h-3.5 rounded-full cursor-pointer bg-hue-spectrum' });\n</script>\n\n<template>\n  <div\n    ref=\"barElement\"\n    role=\"slider\"\n    aria-label=\"Hue\"\n    :aria-valuenow=\"modelValue\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"360\"\n    data-id=\"color-hue\"\n    :class=\"rootStyle({ class: cn($attrs.class) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    @click=\"handleClick($event)\"\n    @mousedown=\"onMouseDown($event)\"\n    @touchstart=\"onTouchStart($event)\"\n  >\n    <div\n      data-id=\"cursor\"\n      class=\"absolute w-4 h-4 transform top-1/2 -translate-x-1/2 -translate-y-1/2 shadow-rui-control bg-white rounded-full\"\n      :style=\"cursorStyle\"\n    />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiColorHue.js","names":["_sfc_main"],"sources":["../../../src/components/color-picker/RuiColorHue.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { clamp } from '@vueuse/shared';\nimport { cn } from '@/utils/tv';\nimport { colorHueStyles } from './color-hue-styles';\nimport { roundTwoDecimal, useElementDrag } from './utils';\n\ninterface Limit {\n  lowerLimit: number;\n  upperLimit: number;\n  availableWidth: number;\n}\n\ndefineOptions({\n  name: 'RuiColorHue',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<number>({ required: true });\n\nconst barElement = useTemplateRef<HTMLElement>('barElement');\n\nconst MAX_HUE = 360;\nconst CURSOR_WIDTH = 16;\nconst cursorLeft = ref<string>('');\n\nconst { handleClick, onMouseDown, onTouchStart } = useElementDrag(emitHue);\n\nconst cursorStyle = computed<{ left: string }>(() => ({\n  left: get(cursorLeft),\n}));\n\nfunction getLimit(width: number): Limit {\n  const lowerLimit = CURSOR_WIDTH / 2;\n  const upperLimit = width - lowerLimit;\n  const availableWidth = upperLimit - lowerLimit;\n\n  return { lowerLimit, upperLimit, availableWidth };\n}\n\nfunction updatePosition(): void {\n  set(cursorLeft, getCursorLeft());\n}\n\nfunction getCursorLeft(): string {\n  const el = get(barElement);\n  if (!el)\n    return '0';\n\n  const rect = el.getBoundingClientRect();\n  const actualWidth = rect.width;\n  const { lowerLimit, availableWidth } = getLimit(actualWidth);\n\n  const hueVal = get(modelValue);\n  const usedHue = hueVal === MAX_HUE ? MAX_HUE : hueVal % MAX_HUE;\n\n  const percentage = roundTwoDecimal((usedHue / MAX_HUE) * (availableWidth / actualWidth) * 100);\n  return `calc(${percentage}% + ${lowerLimit}px)`;\n}\n\nfunction emitHue(x: number): void {\n  const el = get(barElement);\n  if (!el)\n    return;\n\n  const rect = el.getBoundingClientRect();\n  let calculatedX = x - rect.left;\n\n  const { lowerLimit, upperLimit, availableWidth } = getLimit(rect.width);\n  calculatedX = clamp(calculatedX, lowerLimit, upperLimit);\n\n  set(modelValue, Math.round(((calculatedX - lowerLimit) / availableWidth) * MAX_HUE));\n}\n\nwatch(modelValue, () => {\n  updatePosition();\n});\n\nonMounted(() => {\n  updatePosition();\n});\n</script>\n\n<template>\n  <div\n    ref=\"barElement\"\n    role=\"slider\"\n    aria-label=\"Hue\"\n    :aria-valuenow=\"modelValue\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"360\"\n    data-id=\"color-hue\"\n    :class=\"colorHueStyles({ class: cn($attrs.class) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    @click=\"handleClick($event)\"\n    @mousedown=\"onMouseDown($event)\"\n    @touchstart=\"onTouchStart($event)\"\n  >\n    <div\n      data-id=\"cursor\"\n      class=\"absolute w-4 h-4 transform top-1/2 -translate-x-1/2 -translate-y-1/2 shadow-rui-control bg-white rounded-full\"\n      :style=\"cursorStyle\"\n    />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/color-picker/RuiColorHue.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,7 @@
 import { clamp, get, set } from "../../vendor/@vueuse/shared/dist/index.js";
-import { cn, tv } from "../../utils/tv.js";
+import { cn } from "../../utils/tv.js";
 import { roundTwoDecimal, useElementDrag } from "./utils.js";
+import { colorHueStyles } from "./color-hue-styles.js";
 import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeStyle, onMounted, openBlock, ref, unref, useModel, useTemplateRef, watch } from "vue";
 //#region src/components/color-picker/RuiColorHue.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["aria-valuenow"];
@@ -57,7 +58,6 @@ var RuiColorHue_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 		onMounted(() => {
 			updatePosition();
 		});
-		const rootStyle = tv({ base: "relative w-full h-3.5 rounded-full cursor-pointer bg-hue-spectrum" });
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", mergeProps({
 				ref_key: "barElement",
@@ -68,7 +68,7 @@ var RuiColorHue_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 				"aria-valuemin": "0",
 				"aria-valuemax": "360",
 				"data-id": "color-hue",
-				class: unref(rootStyle)({ class: unref(cn)(_ctx.$attrs.class) })
+				class: unref(colorHueStyles)({ class: unref(cn)(_ctx.$attrs.class) })
 			}, {
 				..._ctx.$attrs,
 				class: void 0