@rotki/ui-library 3.1.6 → 3.2.0

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":";;AAEA,IAAa,aAAa,GAAG;CAC3B,OAAO;EAEL,MAAM;EAEN,SAAS;EACT,OAAO;EAEP,OAAO;EAEP,WAAW;CACb;CACA,UAAU;EACR,MAAM;GACJ,MAAM,EAAE,MAAM,iBAAiB;GAC/B,OAAO,EAAE,MAAM,eAAe;EAChC;EACA,MAAM;GAEJ,IAAI,EAAE,MAAM,UAAU;GACtB,IAAI;IACF,MAAM;IACN,SAAS;IACT,OAAO;IACP,OAAO;GACT;GAEA,IAAI;IACF,MAAM;IACN,SAAS;IACT,OAAO;IACP,OAAO;GACT;EACF;EAEA,WAAW;GACT,MAAM,EAAE,MAAM,SAAS;GACvB,OAAO,CAAC;EACV;EACA,WAAW;GACT,MAAM,CAAC;GACP,OAAO,CAAC;EACV;EACA,UAAU;GACR,MAAM;IAAE,MAAM;IAA0C,OAAO;GAAgE;GAC/H,OAAO,CAAC;EACV;EACA,WAAW;GACT,MAAM,EAAE,MAAM,iBAAiB;GAC/B,OAAO;IAAE,MAAM;IAAkB,OAAO;GAAiB;EAC3D;EACA,SAAS;GACP,QAAQ,CAAC;GACT,UAAU,CAAC;GACX,OAAO,CAAC;EACV;EACA,OAAO;GACL,MAAM,EAAE,MAAM,gBAAgB;GAC9B,SAAS,CAAC;GACV,WAAW,CAAC;GACZ,OAAO,CAAC;GACR,SAAS,CAAC;GACV,MAAM,CAAC;GACP,SAAS,CAAC;EACZ;CACF;CACA,kBAAkB;EAEhB;GAAE,WAAW;GAAM,UAAU;GAAO,OAAO,EAAE,MAAM,wEAAwE;EAAE;EAG7H;GAAE,OAAO;GAAQ,SAAS;GAAU,OAAO,EAAE,MAAM,6CAA6C;EAAE;EAGlG;GAAE,SAAS;GAAY,OAAO,EAAE,MAAM,0CAA0C;EAAE;EAGlF;GAAE,OAAO;GAAW,SAAS;GAAU,OAAO,EAAE,MAAM,iBAAiB;EAAE;EACzE;GAAE,OAAO;GAAa,SAAS;GAAU,OAAO,EAAE,MAAM,mBAAmB;EAAE;EAE7E;GAAE,OAAO;GAAS,SAAS;GAAU,OAAO,EAAE,MAAM,wCAAwC;EAAE;EAC9F;GAAE,OAAO;GAAW,SAAS;GAAU,OAAO,EAAE,MAAM,4CAA4C;EAAE;EACpG;GAAE,OAAO;GAAQ,SAAS;GAAU,OAAO,EAAE,MAAM,sCAAsC;EAAE;EAC3F;GAAE,OAAO;GAAW,SAAS;GAAU,OAAO,EAAE,MAAM,4CAA4C;EAAE;EAGpG;GAAE,OAAO;GAAW,SAAS;GAAY,OAAO,EAAE,MAAM,iDAAiD;EAAE;EAC3G;GAAE,OAAO;GAAa,SAAS;GAAY,OAAO,EAAE,MAAM,qDAAqD;EAAE;EACjH;GAAE,OAAO;GAAS,SAAS;GAAY,OAAO,EAAE,MAAM,6CAA6C;EAAE;EACrG;GAAE,OAAO;GAAW,SAAS;GAAY,OAAO,EAAE,MAAM,mBAAmB;EAAE;EAC7E;GAAE,OAAO;GAAQ,SAAS;GAAY,OAAO,EAAE,MAAM,gBAAgB;EAAE;EACvE;GAAE,OAAO;GAAW,SAAS;GAAY,OAAO,EAAE,MAAM,mBAAmB;EAAE;EAG7E;GAAE,OAAO;GAAQ,SAAS;GAAS,OAAO,EAAE,MAAM,mDAAmD;EAAE;EACvG;GAAE,OAAO;GAAW,SAAS;GAAS,OAAO,EAAE,MAAM,iGAAiG;EAAE;EACxJ;GAAE,OAAO;GAAa,SAAS;GAAS,OAAO,EAAE,MAAM,yGAAyG;EAAE;EAClK;GAAE,OAAO;GAAS,SAAS;GAAS,OAAO,EAAE,MAAM,yFAAyF;EAAE;EAC9I;GAAE,OAAO;GAAW,SAAS;GAAS,OAAO,EAAE,MAAM,iGAAiG;EAAE;EACxJ;GAAE,OAAO;GAAQ,SAAS;GAAS,OAAO,EAAE,MAAM,qFAAqF;EAAE;EACzI;GAAE,OAAO;GAAW,SAAS;GAAS,OAAO,EAAE,MAAM,iGAAiG;EAAE;EAGxJ;GAAE,MAAM;GAAM,WAAW;GAAM,OAAO,EAAE,MAAM,OAAO;EAAE;EAEvD;GAAE,MAAM;GAAM,OAAO,EAAE,SAAS,aAAa;EAAE;EAE/C;GAAE,WAAW;GAAM,OAAO;IAAE,MAAM;IAAQ,OAAO;GAAO;EAAE;EAC1D;GAAE,WAAW;GAAM,MAAM;GAAM,OAAO;IAAE,MAAM;IAAQ,OAAO;GAAS;EAAE;EAExE;GAAE,WAAW;GAAM,MAAM;GAAM,OAAO;IAAE,MAAM;IAAU,OAAO;GAAS;EAAE;EAG1E;GAAE,UAAU;GAAM,SAAS,CAAC,UAAU,OAAO;GAAG,OAAO,EAAE,MAAM,+CAA+C;EAAE;EAChH;GAAE,UAAU;GAAM,SAAS;GAAY,OAAO,EAAE,MAAM,sBAAsB;EAAE;CAChF;CACA,eAAe,CAEb;EAAE,OAAO,CAAC,MAAM;EAAG,OAAO;GAAC;GAAW;GAAa;GAAS;GAAW;GAAQ;EAAS;EAAG,SAAS;EAAU,OAAO;CAAqB,CAC5I;CACA,iBAAiB;EACf,MAAM;EACN,MAAM;EACN,UAAU;EACV,WAAW;EACX,SAAS;EACT,OAAO;CACT;AACF,CAAC"}

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":";;;;;;;;;;;;;;EAeA,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;EAED,MAAM,YAAY,GAAG,EAAE,MAAM,0EAA0E,CAAC;;GAItG,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,SAAA,CAAS,CAAA,EAAA,OAAUA,MAAA,EAAA,CAAE,CAACJ,KAAAA,OAAO,KAAK,EAAA,CAAA;GAC7BA,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"}
+{"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

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

@@ -1 +1 @@
-{"version":3,"file":"RuiColorHue.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useModel","_openBlock","_createElementBlock","_mergeProps","_unref","_createElementVNode","_normalizeStyle"],"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":";;;;;;AAoBA,IAAM,UAAU;AAChB,IAAM,eAAe;;;;;;;;;;;EALrB,MAAM,aAAaC,SAAmB,SAAA,YAAmB;EAEzD,MAAM,aAAa,eAA4B,YAAY;EAI3D,MAAM,aAAa,IAAY,EAAE;EAEjC,MAAM,EAAE,aAAa,aAAa,iBAAiB,eAAe,OAAO;EAEzE,MAAM,cAAc,gBAAkC,EACpD,MAAM,IAAI,UAAU,EACtB,EAAE;EAEF,SAAS,SAAS,OAAsB;GACtC,MAAM,aAAa,eAAe;GAClC,MAAM,aAAa,QAAQ;GAG3B,OAAO;IAAE;IAAY;IAAY,gBAFV,aAAa;GAEY;EAClD;EAEA,SAAS,iBAAuB;GAC9B,IAAI,YAAY,cAAc,CAAC;EACjC;EAEA,SAAS,gBAAwB;GAC/B,MAAM,KAAK,IAAI,UAAU;GACzB,IAAI,CAAC,IACH,OAAO;GAGT,MAAM,cADO,GAAG,sBACI,CAAA,CAAK;GACzB,MAAM,EAAE,YAAY,mBAAmB,SAAS,WAAW;GAE3D,MAAM,SAAS,IAAI,UAAU;GAC7B,MAAM,UAAU,WAAW,UAAU,UAAU,SAAS;GAGxD,OAAO,QADY,gBAAiB,UAAU,WAAY,iBAAiB,eAAe,GAC3E,EAAW,MAAM,WAAW;EAC7C;EAEA,SAAS,QAAQ,GAAiB;GAChC,MAAM,KAAK,IAAI,UAAU;GACzB,IAAI,CAAC,IACH;GAEF,MAAM,OAAO,GAAG,sBAAsB;GACtC,IAAI,cAAc,IAAI,KAAK;GAE3B,MAAM,EAAE,YAAY,YAAY,mBAAmB,SAAS,KAAK,KAAK;GACtE,cAAc,MAAM,aAAa,YAAY,UAAU;GAEvD,IAAI,YAAY,KAAK,OAAQ,cAAc,cAAc,iBAAkB,OAAO,CAAC;EACrF;EAEA,MAAM,kBAAkB;GACtB,eAAe;EACjB,CAAC;EAED,gBAAgB;GACd,eAAe;EACjB,CAAC;EAED,MAAM,YAAY,GAAG,EAAE,MAAM,oEAAoE,CAAC;;GAIhG,OAAAC,UAAA,GAAAC,mBAmBM,OAnBNC,WAmBM;IAlBA,SAAA;IAAJ,KAAI;IACJ,MAAK;IACL,cAAW;IACV,iBAAe,WAAA;IAChB,iBAAc;IACd,iBAAc;IACd,WAAQ;IACP,OAAOC,MAAA,SAAA,CAAS,CAAA,EAAA,OAAUA,MAAA,EAAA,CAAE,CAACL,KAAAA,OAAO,KAAK,EAAA,CAAA;GAC7BA,GAAAA;IAAAA,GAAAA,KAAAA;IAAM,OAAS,KAAA;GAAS,GAAA;IACpC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAEK,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;GAEhCC,CAAAA,GAAAA,CAAAA,mBAIE,OAAA;IAHA,WAAQ;IACR,OAAM;IACL,OAAKC,eAAEF,MAAA,WAAA,CAAW"}
+{"version":3,"file":"RuiColorHue.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useModel","_openBlock","_createElementBlock","_mergeProps","_unref","_createElementVNode","_normalizeStyle"],"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":";;;;;;;AAqBA,IAAM,UAAU;AAChB,IAAM,eAAe;;;;;;;;;;;EALrB,MAAM,aAAaC,SAAmB,SAAA,YAAmB;EAEzD,MAAM,aAAa,eAA4B,YAAY;EAI3D,MAAM,aAAa,IAAY,EAAE;EAEjC,MAAM,EAAE,aAAa,aAAa,iBAAiB,eAAe,OAAO;EAEzE,MAAM,cAAc,gBAAkC,EACpD,MAAM,IAAI,UAAU,EACtB,EAAE;EAEF,SAAS,SAAS,OAAsB;GACtC,MAAM,aAAa,eAAe;GAClC,MAAM,aAAa,QAAQ;GAG3B,OAAO;IAAE;IAAY;IAAY,gBAFV,aAAa;GAEY;EAClD;EAEA,SAAS,iBAAuB;GAC9B,IAAI,YAAY,cAAc,CAAC;EACjC;EAEA,SAAS,gBAAwB;GAC/B,MAAM,KAAK,IAAI,UAAU;GACzB,IAAI,CAAC,IACH,OAAO;GAGT,MAAM,cADO,GAAG,sBACI,CAAA,CAAK;GACzB,MAAM,EAAE,YAAY,mBAAmB,SAAS,WAAW;GAE3D,MAAM,SAAS,IAAI,UAAU;GAC7B,MAAM,UAAU,WAAW,UAAU,UAAU,SAAS;GAGxD,OAAO,QADY,gBAAiB,UAAU,WAAY,iBAAiB,eAAe,GAC3E,EAAW,MAAM,WAAW;EAC7C;EAEA,SAAS,QAAQ,GAAiB;GAChC,MAAM,KAAK,IAAI,UAAU;GACzB,IAAI,CAAC,IACH;GAEF,MAAM,OAAO,GAAG,sBAAsB;GACtC,IAAI,cAAc,IAAI,KAAK;GAE3B,MAAM,EAAE,YAAY,YAAY,mBAAmB,SAAS,KAAK,KAAK;GACtE,cAAc,MAAM,aAAa,YAAY,UAAU;GAEvD,IAAI,YAAY,KAAK,OAAQ,cAAc,cAAc,iBAAkB,OAAO,CAAC;EACrF;EAEA,MAAM,kBAAkB;GACtB,eAAe;EACjB,CAAC;EAED,gBAAgB;GACd,eAAe;EACjB,CAAC;;GAIC,OAAAC,UAAA,GAAAC,mBAmBM,OAnBNC,WAmBM;IAlBA,SAAA;IAAJ,KAAI;IACJ,MAAK;IACL,cAAW;IACV,iBAAe,WAAA;IAChB,iBAAc;IACd,iBAAc;IACd,WAAQ;IACP,OAAOC,MAAA,cAAA,CAAc,CAAA,EAAA,OAAUA,MAAA,EAAA,CAAE,CAACL,KAAAA,OAAO,KAAK,EAAA,CAAA;GAClCA,GAAAA;IAAAA,GAAAA,KAAAA;IAAM,OAAS,KAAA;GAAS,GAAA;IACpC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAEK,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;GAEhCC,CAAAA,GAAAA,CAAAA,mBAIE,OAAA;IAHA,WAAQ;IACR,OAAM;IACL,OAAKC,eAAEF,MAAA,WAAA,CAAW"}

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

@@ -1 +1 @@
-{"version":3,"file":"RuiColorPicker.js","names":["_sfc_main"],"sources":["../../../src/components/color-picker/RuiColorPicker.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n// Inspired by https://github.com/aesoper101/vue3-colorpicker/\nimport RuiColorBoard from '@/components/color-picker/RuiColorBoard.vue';\nimport RuiColorDisplay from '@/components/color-picker/RuiColorDisplay.vue';\nimport RuiColorHue from '@/components/color-picker/RuiColorHue.vue';\nimport RuiColorInput from '@/components/color-picker/RuiColorInput.vue';\nimport { cn, tv } from '@/utils/tv';\nimport { Color } from './utils';\n\ndefineOptions({\n  name: 'RuiColorPicker',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<string>({ default: '' });\n\nconst state = reactive({\n  color: new Color(get(modelValue)),\n});\n\nfunction onBoardChange({\n  saturation,\n  brightness,\n}: {\n  saturation: number;\n  brightness: number;\n}): void {\n  state.color.saturation = saturation;\n  state.color.brightness = brightness;\n}\n\nwhenever(\n  modelValue,\n  (value: string) => {\n    if (state.color.hex !== value)\n      state.color = new Color(value);\n  },\n);\n\nwatch(\n  () => state.color.hex,\n  (hex: string) => {\n    set(modelValue, hex);\n  },\n  { immediate: true },\n);\n\nconst rootStyle = tv({ base: 'relative select-none' });\n</script>\n\n<template>\n  <div\n    role=\"application\"\n    aria-label=\"Color picker\"\n    data-id=\"color-picker\"\n    :class=\"rootStyle({ class: cn($attrs.class) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <RuiColorBoard\n      :color=\"state.color\"\n      @update:board=\"onBoardChange($event)\"\n    />\n    <div class=\"flex flex-col gap-5 p-4\">\n      <div class=\"flex items-center gap-4\">\n        <RuiColorDisplay :color=\"state.color.hexString\" />\n        <RuiColorHue\n          v-model=\"state.color.hue\"\n          class=\"flex-1\"\n        />\n      </div>\n\n      <RuiColorInput v-model=\"state.color\" />\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiColorPicker.js","names":["_sfc_main"],"sources":["../../../src/components/color-picker/RuiColorPicker.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n// Inspired by https://github.com/aesoper101/vue3-colorpicker/\nimport RuiColorBoard from '@/components/color-picker/RuiColorBoard.vue';\nimport RuiColorDisplay from '@/components/color-picker/RuiColorDisplay.vue';\nimport RuiColorHue from '@/components/color-picker/RuiColorHue.vue';\nimport RuiColorInput from '@/components/color-picker/RuiColorInput.vue';\nimport { cn } from '@/utils/tv';\nimport { colorPickerStyles } from './color-picker-styles';\nimport { Color } from './utils';\n\ndefineOptions({\n  name: 'RuiColorPicker',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<string>({ default: '' });\n\nconst state = reactive({\n  color: new Color(get(modelValue)),\n});\n\nfunction onBoardChange({\n  saturation,\n  brightness,\n}: {\n  saturation: number;\n  brightness: number;\n}): void {\n  state.color.saturation = saturation;\n  state.color.brightness = brightness;\n}\n\nwhenever(\n  modelValue,\n  (value: string) => {\n    if (state.color.hex !== value)\n      state.color = new Color(value);\n  },\n);\n\nwatch(\n  () => state.color.hex,\n  (hex: string) => {\n    set(modelValue, hex);\n  },\n  { immediate: true },\n);\n</script>\n\n<template>\n  <div\n    role=\"application\"\n    aria-label=\"Color picker\"\n    data-id=\"color-picker\"\n    :class=\"colorPickerStyles({ class: cn($attrs.class) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <RuiColorBoard\n      :color=\"state.color\"\n      @update:board=\"onBoardChange($event)\"\n    />\n    <div class=\"flex flex-col gap-5 p-4\">\n      <div class=\"flex items-center gap-4\">\n        <RuiColorDisplay :color=\"state.color.hexString\" />\n        <RuiColorHue\n          v-model=\"state.color.hue\"\n          class=\"flex-1\"\n        />\n      </div>\n\n      <RuiColorInput v-model=\"state.color\" />\n    </div>\n  </div>\n</template>\n"],"mappings":""}

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

@@ -1,10 +1,11 @@
 import { get, set, whenever } from "../../vendor/@vueuse/shared/dist/index.js";
-import { cn, tv } from "../../utils/tv.js";
+import { cn } from "../../utils/tv.js";
 import { Color } from "./utils.js";
 import RuiColorBoard_default from "./RuiColorBoard.js";
 import RuiColorDisplay_default from "./RuiColorDisplay.js";
 import RuiColorHue_default from "./RuiColorHue.js";
 import RuiColorInput_default from "./RuiColorInput.js";
+import { colorPickerStyles } from "./color-picker-styles.js";
 import { createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, openBlock, reactive, unref, useModel, watch } from "vue";
 //#region src/components/color-picker/RuiColorPicker.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "flex flex-col gap-5 p-4" };
@@ -31,13 +32,12 @@ var RuiColorPicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 		watch(() => state.color.hex, (hex) => {
 			set(modelValue, hex);
 		}, { immediate: true });
-		const rootStyle = tv({ base: "relative select-none" });
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", mergeProps({
 				role: "application",
 				"aria-label": "Color picker",
 				"data-id": "color-picker",
-				class: unref(rootStyle)({ class: unref(cn)(_ctx.$attrs.class) })
+				class: unref(colorPickerStyles)({ class: unref(cn)(_ctx.$attrs.class) })
 			}, {
 				..._ctx.$attrs,
 				class: void 0

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

@@ -1 +1 @@
-{"version":3,"file":"RuiColorPicker.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useModel","_openBlock","_createElementBlock","_mergeProps","_unref","_createVNode","RuiColorBoard","_createElementVNode","RuiColorDisplay","RuiColorHue","RuiColorInput"],"sources":["../../../src/components/color-picker/RuiColorPicker.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n// Inspired by https://github.com/aesoper101/vue3-colorpicker/\nimport RuiColorBoard from '@/components/color-picker/RuiColorBoard.vue';\nimport RuiColorDisplay from '@/components/color-picker/RuiColorDisplay.vue';\nimport RuiColorHue from '@/components/color-picker/RuiColorHue.vue';\nimport RuiColorInput from '@/components/color-picker/RuiColorInput.vue';\nimport { cn, tv } from '@/utils/tv';\nimport { Color } from './utils';\n\ndefineOptions({\n  name: 'RuiColorPicker',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<string>({ default: '' });\n\nconst state = reactive({\n  color: new Color(get(modelValue)),\n});\n\nfunction onBoardChange({\n  saturation,\n  brightness,\n}: {\n  saturation: number;\n  brightness: number;\n}): void {\n  state.color.saturation = saturation;\n  state.color.brightness = brightness;\n}\n\nwhenever(\n  modelValue,\n  (value: string) => {\n    if (state.color.hex !== value)\n      state.color = new Color(value);\n  },\n);\n\nwatch(\n  () => state.color.hex,\n  (hex: string) => {\n    set(modelValue, hex);\n  },\n  { immediate: true },\n);\n\nconst rootStyle = tv({ base: 'relative select-none' });\n</script>\n\n<template>\n  <div\n    role=\"application\"\n    aria-label=\"Color picker\"\n    data-id=\"color-picker\"\n    :class=\"rootStyle({ class: cn($attrs.class) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <RuiColorBoard\n      :color=\"state.color\"\n      @update:board=\"onBoardChange($event)\"\n    />\n    <div class=\"flex flex-col gap-5 p-4\">\n      <div class=\"flex items-center gap-4\">\n        <RuiColorDisplay :color=\"state.color.hexString\" />\n        <RuiColorHue\n          v-model=\"state.color.hue\"\n          class=\"flex-1\"\n        />\n      </div>\n\n      <RuiColorInput v-model=\"state.color\" />\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAcA,MAAM,aAAaC,SAAmB,SAAA,YAAgB;EAEtD,MAAM,QAAQ,SAAS,EACrB,OAAO,IAAI,MAAM,IAAI,UAAU,CAAC,EAClC,CAAC;EAED,SAAS,cAAc,EACrB,YACA,cAIO;GACP,MAAM,MAAM,aAAa;GACzB,MAAM,MAAM,aAAa;EAC3B;EAEA,SACE,aACC,UAAkB;GACjB,IAAI,MAAM,MAAM,QAAQ,OACtB,MAAM,QAAQ,IAAI,MAAM,KAAK;EACjC,CACF;EAEA,YACQ,MAAM,MAAM,MACjB,QAAgB;GACf,IAAI,YAAY,GAAG;EACrB,GACA,EAAE,WAAW,KAAK,CACpB;EAEA,MAAM,YAAY,GAAG,EAAE,MAAM,uBAAuB,CAAC;;GAInD,OAAAC,UAAA,GAAAC,mBAsBM,OAtBNC,WAsBM;IArBJ,MAAK;IACL,cAAW;IACX,WAAQ;IACP,OAAOC,MAAA,SAAA,CAAS,CAAA,EAAA,OAAUA,MAAA,EAAA,CAAE,CAACL,KAAAA,OAAO,KAAK,EAAA,CAAA;GAC7BA,GAAAA;IAAAA,GAAAA,KAAAA;IAAM,OAAS,KAAA;GAAS,CAAA,GAAA,CAErCM,YAGEC,uBAAA;IAFC,OAAOF,MAAA,KAAA,CAAK,CAAC;IACb,kBAAY,OAAA,OAAA,OAAA,MAAA,WAAE,cAAc,MAAM;GAErCG,GAAAA,MAAAA,GAAAA,CAAAA,OAAAA,CAAAA,GAAAA,mBAUM,OAVN,YAUM,CATJA,mBAMM,OANN,YAMM,CALJF,YAAkDG,yBAAA,EAAhC,OAAOJ,MAAA,KAAA,CAAK,CAAC,MAAM,UAAA,GAAA,MAAA,GAAA,CAAA,OAAA,CAAA,GACrCC,YAGEI,qBAAA;IAFS,YAAAL,MAAA,KAAA,CAAK,CAAC,MAAM;IAAZ,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MAAA,KAAA,CAAK,CAAC,MAAM,MAAG;IACxB,OAAM;GAIVC,GAAAA,MAAAA,GAAAA,CAAAA,YAAAA,CAAAA,CAAAA,CAAAA,GAAAA,YAAuCK,uBAAA;IAAf,YAAAN,MAAA,KAAA,CAAK,CAAC;IAAN,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MAAA,KAAA,CAAK,CAAC,QAAK"}
+{"version":3,"file":"RuiColorPicker.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useModel","_openBlock","_createElementBlock","_mergeProps","_unref","_createVNode","RuiColorBoard","_createElementVNode","RuiColorDisplay","RuiColorHue","RuiColorInput"],"sources":["../../../src/components/color-picker/RuiColorPicker.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n// Inspired by https://github.com/aesoper101/vue3-colorpicker/\nimport RuiColorBoard from '@/components/color-picker/RuiColorBoard.vue';\nimport RuiColorDisplay from '@/components/color-picker/RuiColorDisplay.vue';\nimport RuiColorHue from '@/components/color-picker/RuiColorHue.vue';\nimport RuiColorInput from '@/components/color-picker/RuiColorInput.vue';\nimport { cn } from '@/utils/tv';\nimport { colorPickerStyles } from './color-picker-styles';\nimport { Color } from './utils';\n\ndefineOptions({\n  name: 'RuiColorPicker',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<string>({ default: '' });\n\nconst state = reactive({\n  color: new Color(get(modelValue)),\n});\n\nfunction onBoardChange({\n  saturation,\n  brightness,\n}: {\n  saturation: number;\n  brightness: number;\n}): void {\n  state.color.saturation = saturation;\n  state.color.brightness = brightness;\n}\n\nwhenever(\n  modelValue,\n  (value: string) => {\n    if (state.color.hex !== value)\n      state.color = new Color(value);\n  },\n);\n\nwatch(\n  () => state.color.hex,\n  (hex: string) => {\n    set(modelValue, hex);\n  },\n  { immediate: true },\n);\n</script>\n\n<template>\n  <div\n    role=\"application\"\n    aria-label=\"Color picker\"\n    data-id=\"color-picker\"\n    :class=\"colorPickerStyles({ class: cn($attrs.class) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <RuiColorBoard\n      :color=\"state.color\"\n      @update:board=\"onBoardChange($event)\"\n    />\n    <div class=\"flex flex-col gap-5 p-4\">\n      <div class=\"flex items-center gap-4\">\n        <RuiColorDisplay :color=\"state.color.hexString\" />\n        <RuiColorHue\n          v-model=\"state.color.hue\"\n          class=\"flex-1\"\n        />\n      </div>\n\n      <RuiColorInput v-model=\"state.color\" />\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAeA,MAAM,aAAaC,SAAmB,SAAA,YAAgB;EAEtD,MAAM,QAAQ,SAAS,EACrB,OAAO,IAAI,MAAM,IAAI,UAAU,CAAC,EAClC,CAAC;EAED,SAAS,cAAc,EACrB,YACA,cAIO;GACP,MAAM,MAAM,aAAa;GACzB,MAAM,MAAM,aAAa;EAC3B;EAEA,SACE,aACC,UAAkB;GACjB,IAAI,MAAM,MAAM,QAAQ,OACtB,MAAM,QAAQ,IAAI,MAAM,KAAK;EACjC,CACF;EAEA,YACQ,MAAM,MAAM,MACjB,QAAgB;GACf,IAAI,YAAY,GAAG;EACrB,GACA,EAAE,WAAW,KAAK,CACpB;;GAIE,OAAAC,UAAA,GAAAC,mBAsBM,OAtBNC,WAsBM;IArBJ,MAAK;IACL,cAAW;IACX,WAAQ;IACP,OAAOC,MAAA,iBAAA,CAAiB,CAAA,EAAA,OAAUA,MAAA,EAAA,CAAE,CAACL,KAAAA,OAAO,KAAK,EAAA,CAAA;GACrCA,GAAAA;IAAAA,GAAAA,KAAAA;IAAM,OAAS,KAAA;GAAS,CAAA,GAAA,CAErCM,YAGEC,uBAAA;IAFC,OAAOF,MAAA,KAAA,CAAK,CAAC;IACb,kBAAY,OAAA,OAAA,OAAA,MAAA,WAAE,cAAc,MAAM;GAErCG,GAAAA,MAAAA,GAAAA,CAAAA,OAAAA,CAAAA,GAAAA,mBAUM,OAVN,YAUM,CATJA,mBAMM,OANN,YAMM,CALJF,YAAkDG,yBAAA,EAAhC,OAAOJ,MAAA,KAAA,CAAK,CAAC,MAAM,UAAA,GAAA,MAAA,GAAA,CAAA,OAAA,CAAA,GACrCC,YAGEI,qBAAA;IAFS,YAAAL,MAAA,KAAA,CAAK,CAAC,MAAM;IAAZ,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MAAA,KAAA,CAAK,CAAC,MAAM,MAAG;IACxB,OAAM;GAIVC,GAAAA,MAAAA,GAAAA,CAAAA,YAAAA,CAAAA,CAAAA,CAAAA,GAAAA,YAAuCK,uBAAA;IAAf,YAAAN,MAAA,KAAA,CAAK,CAAC;IAAN,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MAAA,KAAA,CAAK,CAAC,QAAK"}

package/dist/components/color-picker/color-board-styles.d.ts

@@ -0,0 +1 @@
+export declare const colorBoardStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "relative w-full h-40 overflow-hidden cursor-pointer rounded-rui-control", {} | {}, undefined, import("tailwind-variants").TVReturnTypeLike<unknown, undefined>>;

package/dist/components/color-picker/color-board-styles.js

@@ -0,0 +1,7 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/color-picker/color-board-styles.ts
+var colorBoardStyles = tv({ base: "relative w-full h-40 overflow-hidden cursor-pointer rounded-rui-control" });
+//#endregion
+export { colorBoardStyles };
+
+//# sourceMappingURL=color-board-styles.js.map

package/dist/components/color-picker/color-board-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-board-styles.js","names":[],"sources":["../../../src/components/color-picker/color-board-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const colorBoardStyles = tv({ base: 'relative w-full h-40 overflow-hidden cursor-pointer rounded-rui-control' });\n"],"mappings":";;AAEA,IAAa,mBAAmB,GAAG,EAAE,MAAM,0EAA0E,CAAC"}

package/dist/components/color-picker/color-hue-styles.d.ts

@@ -0,0 +1 @@
+export declare const colorHueStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "relative w-full h-3.5 rounded-full cursor-pointer bg-hue-spectrum", {} | {}, undefined, import("tailwind-variants").TVReturnTypeLike<unknown, undefined>>;

package/dist/components/color-picker/color-hue-styles.js

@@ -0,0 +1,7 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/color-picker/color-hue-styles.ts
+var colorHueStyles = tv({ base: "relative w-full h-3.5 rounded-full cursor-pointer bg-hue-spectrum" });
+//#endregion
+export { colorHueStyles };
+
+//# sourceMappingURL=color-hue-styles.js.map

package/dist/components/color-picker/color-hue-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-hue-styles.js","names":[],"sources":["../../../src/components/color-picker/color-hue-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const colorHueStyles = tv({ base: 'relative w-full h-3.5 rounded-full cursor-pointer bg-hue-spectrum' });\n"],"mappings":";;AAEA,IAAa,iBAAiB,GAAG,EAAE,MAAM,oEAAoE,CAAC"}

package/dist/components/color-picker/color-picker-styles.d.ts

@@ -0,0 +1 @@
+export declare const colorPickerStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "relative select-none", {} | {}, undefined, import("tailwind-variants").TVReturnTypeLike<unknown, undefined>>;

package/dist/components/color-picker/color-picker-styles.js

@@ -0,0 +1,7 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/color-picker/color-picker-styles.ts
+var colorPickerStyles = tv({ base: "relative select-none" });
+//#endregion
+export { colorPickerStyles };
+
+//# sourceMappingURL=color-picker-styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker-styles.js","names":[],"sources":["../../../src/components/color-picker/color-picker-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const colorPickerStyles = tv({ base: 'relative select-none' });\n"],"mappings":";;AAEA,IAAa,oBAAoB,GAAG,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/components/forms/field-label/RuiFieldLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiFieldLabel.js","names":["_sfc_main"],"sources":["../../../../src/components/forms/field-label/RuiFieldLabel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { tv } from '@/utils/tv';\n\n/**\n * The label a field shows above itself when its label placement is `top`, or\n * keeps for screen readers alone when it is `hidden`. A text input links it\n * through `for`; a select or picker, whose activator is not a labelable\n * element, points at its `id` with `aria-labelledby` instead.\n */\nexport interface FieldLabelProps {\n  text: string;\n  hidden?: boolean;\n  required?: boolean;\n  disabled?: boolean;\n  for?: string;\n  id?: string;\n}\n\ndefineOptions({\n  name: 'RuiFieldLabel',\n});\n\nconst {\n  text,\n  hidden = false,\n  required = false,\n  disabled = false,\n  for: forId = undefined,\n  id = undefined,\n} = defineProps<FieldLabelProps>();\n\nconst labelStyles = tv({\n  slots: {\n    root: 'block mb-1 text-sm leading-5 font-medium text-rui-text',\n    required: 'text-rui-error',\n  },\n  variants: {\n    hidden: {\n      true: { root: 'sr-only' },\n    },\n    disabled: {\n      true: { root: 'text-rui-text-disabled' },\n    },\n  },\n});\n\nconst ui = computed<ReturnType<typeof labelStyles>>(() => labelStyles({ hidden, disabled }));\n</script>\n\n<template>\n  <label\n    :id=\"id\"\n    :for=\"forId\"\n    :class=\"ui.root()\"\n    data-id=\"field-label\"\n  >\n    {{ text }}\n    <span\n      v-if=\"required\"\n      :class=\"ui.required()\"\n      aria-hidden=\"true\"\n    >\n      *\n    </span>\n  </label>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiFieldLabel.js","names":["_sfc_main"],"sources":["../../../../src/components/forms/field-label/RuiFieldLabel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { labelStyles } from './field-label-styles';\n\n/**\n * The label a field shows above itself when its label placement is `top`, or\n * keeps for screen readers alone when it is `hidden`. A text input links it\n * through `for`; a select or picker, whose activator is not a labelable\n * element, points at its `id` with `aria-labelledby` instead.\n */\nexport interface FieldLabelProps {\n  text: string;\n  hidden?: boolean;\n  required?: boolean;\n  disabled?: boolean;\n  for?: string;\n  id?: string;\n}\n\ndefineOptions({\n  name: 'RuiFieldLabel',\n});\n\nconst {\n  text,\n  hidden = false,\n  required = false,\n  disabled = false,\n  for: forId = undefined,\n  id = undefined,\n} = defineProps<FieldLabelProps>();\n\nconst ui = computed<ReturnType<typeof labelStyles>>(() => labelStyles({ hidden, disabled }));\n</script>\n\n<template>\n  <label\n    :id=\"id\"\n    :for=\"forId\"\n    :class=\"ui.root()\"\n    data-id=\"field-label\"\n  >\n    {{ text }}\n    <span\n      v-if=\"required\"\n      :class=\"ui.required()\"\n      aria-hidden=\"true\"\n    >\n      *\n    </span>\n  </label>\n</template>\n"],"mappings":""}

package/dist/components/forms/field-label/RuiFieldLabel.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,4 @@
-import { tv } from "../../../utils/tv.js";
+import { labelStyles } from "./field-label-styles.js";
 import { computed, createCommentVNode, createElementBlock, createTextVNode, defineComponent, normalizeClass, openBlock, toDisplayString, unref } from "vue";
 //#region src/components/forms/field-label/RuiFieldLabel.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["id", "for"];
@@ -23,16 +23,6 @@ var RuiFieldLabel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 		id: { default: () => void 0 }
 	},
 	setup(__props) {
-		const labelStyles = tv({
-			slots: {
-				root: "block mb-1 text-sm leading-5 font-medium text-rui-text",
-				required: "text-rui-error"
-			},
-			variants: {
-				hidden: { true: { root: "sr-only" } },
-				disabled: { true: { root: "text-rui-text-disabled" } }
-			}
-		});
 		const ui = computed(() => labelStyles({
 			hidden: __props.hidden,
 			disabled: __props.disabled

package/dist/components/forms/field-label/RuiFieldLabel.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiFieldLabel.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_unref","_createTextVNode","_toDisplayString","_createCommentVNode"],"sources":["../../../../src/components/forms/field-label/RuiFieldLabel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { tv } from '@/utils/tv';\n\n/**\n * The label a field shows above itself when its label placement is `top`, or\n * keeps for screen readers alone when it is `hidden`. A text input links it\n * through `for`; a select or picker, whose activator is not a labelable\n * element, points at its `id` with `aria-labelledby` instead.\n */\nexport interface FieldLabelProps {\n  text: string;\n  hidden?: boolean;\n  required?: boolean;\n  disabled?: boolean;\n  for?: string;\n  id?: string;\n}\n\ndefineOptions({\n  name: 'RuiFieldLabel',\n});\n\nconst {\n  text,\n  hidden = false,\n  required = false,\n  disabled = false,\n  for: forId = undefined,\n  id = undefined,\n} = defineProps<FieldLabelProps>();\n\nconst labelStyles = tv({\n  slots: {\n    root: 'block mb-1 text-sm leading-5 font-medium text-rui-text',\n    required: 'text-rui-error',\n  },\n  variants: {\n    hidden: {\n      true: { root: 'sr-only' },\n    },\n    disabled: {\n      true: { root: 'text-rui-text-disabled' },\n    },\n  },\n});\n\nconst ui = computed<ReturnType<typeof labelStyles>>(() => labelStyles({ hidden, disabled }));\n</script>\n\n<template>\n  <label\n    :id=\"id\"\n    :for=\"forId\"\n    :class=\"ui.root()\"\n    data-id=\"field-label\"\n  >\n    {{ text }}\n    <span\n      v-if=\"required\"\n      :class=\"ui.required()\"\n      aria-hidden=\"true\"\n    >\n      *\n    </span>\n  </label>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;EA+BA,MAAM,cAAc,GAAG;GACrB,OAAO;IACL,MAAM;IACN,UAAU;GACZ;GACA,UAAU;IACR,QAAQ,EACN,MAAM,EAAE,MAAM,UAAU,EAC1B;IACA,UAAU,EACR,MAAM,EAAE,MAAM,yBAAyB,EACzC;GACF;EACF,CAAC;EAED,MAAM,KAAK,eAA+C,YAAY;GAAE,QAAK,QAAA;GAAG,UAAO,QAAA;EAAE,CAAC,CAAC;;GAIzF,OAAAA,UAAA,GAAAC,mBAcQ,SAAA;IAbL,IAAI,QAAA;IACJ,KAAK,QAAA;IACL,OAAKC,eAAEC,MAAA,EAAA,CAAE,CAAC,KAAI,CAAA;IACf,WAAQ;GAELC,GAAAA,CAAAA,gBAAAC,gBAAA,QAAA,IAAI,IAAG,KACV,CAAA,GACQ,QAAA,YADRL,UAAA,GAAAC,mBAMO,QAAA;;IAJJ,OAAKC,eAAEC,MAAA,EAAA,CAAE,CAAC,SAAQ,CAAA;IACnB,eAAY;GACb,GAAA,OAED,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,IAAA,UAAA"}
+{"version":3,"file":"RuiFieldLabel.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_unref","_createTextVNode","_toDisplayString","_createCommentVNode"],"sources":["../../../../src/components/forms/field-label/RuiFieldLabel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { labelStyles } from './field-label-styles';\n\n/**\n * The label a field shows above itself when its label placement is `top`, or\n * keeps for screen readers alone when it is `hidden`. A text input links it\n * through `for`; a select or picker, whose activator is not a labelable\n * element, points at its `id` with `aria-labelledby` instead.\n */\nexport interface FieldLabelProps {\n  text: string;\n  hidden?: boolean;\n  required?: boolean;\n  disabled?: boolean;\n  for?: string;\n  id?: string;\n}\n\ndefineOptions({\n  name: 'RuiFieldLabel',\n});\n\nconst {\n  text,\n  hidden = false,\n  required = false,\n  disabled = false,\n  for: forId = undefined,\n  id = undefined,\n} = defineProps<FieldLabelProps>();\n\nconst ui = computed<ReturnType<typeof labelStyles>>(() => labelStyles({ hidden, disabled }));\n</script>\n\n<template>\n  <label\n    :id=\"id\"\n    :for=\"forId\"\n    :class=\"ui.root()\"\n    data-id=\"field-label\"\n  >\n    {{ text }}\n    <span\n      v-if=\"required\"\n      :class=\"ui.required()\"\n      aria-hidden=\"true\"\n    >\n      *\n    </span>\n  </label>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;EA+BA,MAAM,KAAK,eAA+C,YAAY;GAAE,QAAK,QAAA;GAAG,UAAO,QAAA;EAAE,CAAC,CAAC;;GAIzF,OAAAA,UAAA,GAAAC,mBAcQ,SAAA;IAbL,IAAI,QAAA;IACJ,KAAK,QAAA;IACL,OAAKC,eAAEC,MAAA,EAAA,CAAE,CAAC,KAAI,CAAA;IACf,WAAQ;GAELC,GAAAA,CAAAA,gBAAAC,gBAAA,QAAA,IAAI,IAAG,KACV,CAAA,GACQ,QAAA,YADRL,UAAA,GAAAC,mBAMO,QAAA;;IAJJ,OAAKC,eAAEC,MAAA,EAAA,CAAE,CAAC,SAAQ,CAAA;IACnB,eAAY;GACb,GAAA,OAED,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,IAAA,UAAA"}

package/dist/components/forms/field-label/field-label-styles.d.ts

@@ -0,0 +1,43 @@
+export declare const labelStyles: import("tailwind-variants").TVReturnType<{
+    hidden: {
+        true: {
+            root: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    required: string;
+}, undefined, {
+    hidden: {
+        true: {
+            root: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    required: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    hidden: {
+        true: {
+            root: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    required: string;
+}>>;