@rotki/ui-library 2.15.0 → 2.16.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"RuiChip.js","names":[],"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  bgColor?: string;\n  textColor?: string;\n  classNames?: RuiChipClassNames;\n  /** @deprecated Use `classNames.content` instead */\n  contentClass?: string;\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-circle-x',\n  bgColor = undefined,\n  textColor = undefined,\n  classNames,\n  contentClass = '',\n} = defineProps<Props>();\n\nconst emit = defineEmits<{\n  'click:close': [];\n  'click': [e: MouseEvent];\n}>();\n\ndefineSlots<{\n  prepend?: () => any;\n  default?: () => any;\n}>();\n\nconst chipStyles = tv({\n  slots: {\n    root: 'inline-flex items-center justify-between px-2 py-1 transition-all cursor-default outline-none max-w-full truncate',\n    prepend: 'rounded-full flex items-center justify-center pr-0 w-6 h-6 text-[0.6rem] text-white bg-rui-grey-400 dark:bg-rui-grey-700 overflow-hidden',\n    label: 'truncate px-2 text-[0.8125rem]',\n    close: 'rounded-full flex items-center p-[0.13rem] pl-0 inset-y-0 focus:outline-none',\n    closeIcon: 'opacity-50 hover:opacity-80 dark:hover:text-rui-grey-300 transition-opacity',\n  },\n  variants: {\n    tile: {\n      true: { root: 'rounded-lg' },\n      false: { root: 'rounded-full' },\n    },\n    size: {\n      md: { root: 'min-h-8' },\n      sm: {\n        root: 'py-[0.19rem]',\n        prepend: 'text-[0.5rem] p-[0.08rem] w-4 h-4',\n        label: 'px-1.5 text-[0.7rem]',\n        close: 'p-[0.08rem]',\n      },\n    },\n    disabled: {\n      true: { root: 'opacity-40 cursor-default', close: 'cursor-default' },\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    },\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)\n    { clickable: true, disabled: false, class: { root: 'hover:brightness-90 focus:brightness-75 dark:hover:brightness-110' } },\n\n    // Grey filled/outlined\n    { color: 'grey', variant: 'filled', class: { root: 'bg-rui-grey-200 dark:bg-rui-grey-800' } },\n    { color: 'grey', variant: 'outlined', class: { root: 'border border-black/[0.26] bg-transparent dark:border-white/[0.26]' } },\n    { color: 'grey', variant: 'outlined', clickable: true, disabled: false, class: { root: 'hover:bg-black/[0.04] focus:bg-black/[0.12] dark:hover:bg-white/[0.04] dark:focus:bg-white/[0.12]' } },\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    { color: 'error', variant: 'filled', class: { root: 'bg-rui-error' } },\n    { color: 'warning', variant: 'filled', class: { root: 'bg-rui-warning' } },\n    { color: 'info', variant: 'filled', class: { root: 'bg-rui-info' } },\n    { color: 'success', variant: 'filled', class: { root: 'bg-rui-success' } },\n\n    // Context colors — outlined base\n    { color: 'primary', variant: 'outlined', class: { root: 'border text-rui-primary border-rui-primary/50 bg-transparent' } },\n    { color: 'secondary', variant: 'outlined', class: { root: 'border text-rui-secondary border-rui-secondary/50 bg-transparent' } },\n    { color: 'error', variant: 'outlined', class: { root: 'border text-rui-error border-rui-error/50 bg-transparent' } },\n    { color: 'warning', variant: 'outlined', class: { root: 'border text-rui-warning border-rui-warning/50 bg-transparent' } },\n    { color: 'info', variant: 'outlined', class: { root: 'border text-rui-info border-rui-info/50 bg-transparent' } },\n    { color: 'success', variant: 'outlined', class: { root: 'border text-rui-success border-rui-success/50 bg-transparent' } },\n\n    // Context colors — outlined interactive\n    { color: 'primary', variant: 'outlined', clickable: true, disabled: false, class: { root: 'hover:bg-rui-primary/[0.04] focus:bg-rui-primary/[0.12]' } },\n    { color: 'secondary', variant: 'outlined', clickable: true, disabled: false, class: { root: 'hover:bg-rui-secondary/[0.04] focus:bg-rui-secondary/[0.12]' } },\n    { color: 'error', variant: 'outlined', clickable: true, disabled: false, class: { root: 'hover:bg-rui-error/[0.04] focus:bg-rui-error/[0.12]' } },\n    { color: 'warning', variant: 'outlined', clickable: true, disabled: false, class: { root: 'hover:bg-rui-warning/[0.04] focus:bg-rui-warning/[0.12]' } },\n    { color: 'info', variant: 'outlined', clickable: true, disabled: false, class: { root: 'hover:bg-rui-info/[0.04] focus:bg-rui-info/[0.12]' } },\n    { color: 'success', variant: 'outlined', clickable: true, disabled: false, class: { root: 'hover:bg-rui-success/[0.04] focus:bg-rui-success/[0.12]' } },\n  ],\n  compoundSlots: [\n    // All context colors filled share dark text\n    { slots: ['root'], color: ['primary', 'secondary', 'error', 'warning', 'info', 'success'], variant: 'filled', class: 'text-rui-dark-text' },\n    // Dark mode: warning/success/info filled use light text\n    { slots: ['root'], color: ['warning', 'success', 'info'], variant: 'filled', class: 'dark:text-rui-light-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}));\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</script>\n\n<template>\n  <div\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=\"button\"\n    tabindex=\"0\"\n    v-bind=\"objectOmit($attrs, ['onClick'])\"\n    @click=\"click($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) ?? contentClass })\">\n      <slot />\n    </span>\n    <button\n      v-if=\"closeable\"\n      :class=\"ui.close()\"\n      :disabled=\"disabled\"\n      type=\"button\"\n      @click.stop=\"emit('click:close')\"\n    >\n      <RuiIcon\n        :class=\"ui.closeIcon()\"\n        :size=\"CHIP_CLOSE_ICON_SIZES[size]\"\n        :name=\"closeIcon\"\n      />\n    </button>\n  </div>\n</template>\n"],"mappings":""}

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

@@ -1,16 +1,24 @@
 import type { ContextColorsType } from '../../consts/colors.js';
 import type { RuiIcons } from '../../icons/index.js';
+import type { VueClassValue } from '../../types/class-value';
+import { ChipSize, ChipVariant } from '../../components/chips/chip-props.js';
+export interface RuiChipClassNames {
+    root?: VueClassValue;
+    content?: VueClassValue;
+}
 export interface Props {
     tile?: boolean;
     clickable?: boolean;
     closeable?: boolean;
     disabled?: boolean;
-    size?: 'sm' | 'md';
-    variant?: 'filled' | 'outlined';
+    size?: ChipSize;
+    variant?: ChipVariant;
     color?: 'grey' | ContextColorsType;
     closeIcon?: RuiIcons;
     bgColor?: string;
     textColor?: string;
+    classNames?: RuiChipClassNames;
+    /** @deprecated Use `classNames.content` instead */
     contentClass?: string;
 }
 type __VLS_Slots = {

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

@@ -0,0 +1,308 @@
+import { cn, tv } from "../../utils/tv.js";
+import RuiIcon_default from "../icons/RuiIcon.js";
+import { CHIP_CLOSE_ICON_SIZES, ChipSize, ChipVariant } from "./chip-props.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderSlot, unref, withModifiers } from "vue";
+import { objectOmit } from "@vueuse/shared";
+//#region src/components/chips/RuiChip.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"data-variant",
+	"data-color",
+	"data-disabled"
+];
+var _hoisted_2 = ["disabled"];
+var RuiChip_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "RuiChip",
+	inheritAttrs: false,
+	__name: "RuiChip",
+	props: {
+		tile: {
+			type: Boolean,
+			default: false
+		},
+		clickable: {
+			type: Boolean,
+			default: false
+		},
+		closeable: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		size: { default: () => ChipSize.md },
+		variant: { default: () => ChipVariant.filled },
+		color: { default: "grey" },
+		closeIcon: { default: "lu-circle-x" },
+		bgColor: { default: () => void 0 },
+		textColor: { default: () => void 0 },
+		classNames: {},
+		contentClass: { default: "" }
+	},
+	emits: ["click:close", "click"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const chipStyles = tv({
+			slots: {
+				root: "inline-flex items-center justify-between px-2 py-1 transition-all cursor-default outline-none max-w-full truncate",
+				prepend: "rounded-full flex items-center justify-center pr-0 w-6 h-6 text-[0.6rem] text-white bg-rui-grey-400 dark:bg-rui-grey-700 overflow-hidden",
+				label: "truncate px-2 text-[0.8125rem]",
+				close: "rounded-full flex items-center p-[0.13rem] pl-0 inset-y-0 focus:outline-none",
+				closeIcon: "opacity-50 hover:opacity-80 dark:hover:text-rui-grey-300 transition-opacity"
+			},
+			variants: {
+				tile: {
+					true: { root: "rounded-lg" },
+					false: { root: "rounded-full" }
+				},
+				size: {
+					md: { root: "min-h-8" },
+					sm: {
+						root: "py-[0.19rem]",
+						prepend: "text-[0.5rem] p-[0.08rem] w-4 h-4",
+						label: "px-1.5 text-[0.7rem]",
+						close: "p-[0.08rem]"
+					}
+				},
+				disabled: {
+					true: {
+						root: "opacity-40 cursor-default",
+						close: "cursor-default"
+					},
+					false: {}
+				},
+				clickable: {
+					true: { root: "cursor-pointer" },
+					false: {
+						root: "cursor-default",
+						close: "cursor-default"
+					}
+				},
+				variant: {
+					filled: {},
+					outlined: {}
+				},
+				color: {
+					grey: { root: "text-rui-text" },
+					primary: {},
+					secondary: {},
+					error: {},
+					warning: {},
+					info: {},
+					success: {}
+				}
+			},
+			compoundVariants: [
+				{
+					clickable: true,
+					disabled: false,
+					class: { root: "hover:brightness-90 focus:brightness-75 dark:hover:brightness-110" }
+				},
+				{
+					color: "grey",
+					variant: "filled",
+					class: { root: "bg-rui-grey-200 dark:bg-rui-grey-800" }
+				},
+				{
+					color: "grey",
+					variant: "outlined",
+					class: { root: "border border-black/[0.26] bg-transparent dark:border-white/[0.26]" }
+				},
+				{
+					color: "grey",
+					variant: "outlined",
+					clickable: true,
+					disabled: false,
+					class: { root: "hover:bg-black/[0.04] focus:bg-black/[0.12] dark:hover:bg-white/[0.04] dark:focus:bg-white/[0.12]" }
+				},
+				{
+					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" }
+				},
+				{
+					color: "warning",
+					variant: "filled",
+					class: { root: "bg-rui-warning" }
+				},
+				{
+					color: "info",
+					variant: "filled",
+					class: { root: "bg-rui-info" }
+				},
+				{
+					color: "success",
+					variant: "filled",
+					class: { root: "bg-rui-success" }
+				},
+				{
+					color: "primary",
+					variant: "outlined",
+					class: { root: "border text-rui-primary border-rui-primary/50 bg-transparent" }
+				},
+				{
+					color: "secondary",
+					variant: "outlined",
+					class: { root: "border text-rui-secondary border-rui-secondary/50 bg-transparent" }
+				},
+				{
+					color: "error",
+					variant: "outlined",
+					class: { root: "border text-rui-error border-rui-error/50 bg-transparent" }
+				},
+				{
+					color: "warning",
+					variant: "outlined",
+					class: { root: "border text-rui-warning border-rui-warning/50 bg-transparent" }
+				},
+				{
+					color: "info",
+					variant: "outlined",
+					class: { root: "border text-rui-info border-rui-info/50 bg-transparent" }
+				},
+				{
+					color: "success",
+					variant: "outlined",
+					class: { root: "border text-rui-success border-rui-success/50 bg-transparent" }
+				},
+				{
+					color: "primary",
+					variant: "outlined",
+					clickable: true,
+					disabled: false,
+					class: { root: "hover:bg-rui-primary/[0.04] focus:bg-rui-primary/[0.12]" }
+				},
+				{
+					color: "secondary",
+					variant: "outlined",
+					clickable: true,
+					disabled: false,
+					class: { root: "hover:bg-rui-secondary/[0.04] focus:bg-rui-secondary/[0.12]" }
+				},
+				{
+					color: "error",
+					variant: "outlined",
+					clickable: true,
+					disabled: false,
+					class: { root: "hover:bg-rui-error/[0.04] focus:bg-rui-error/[0.12]" }
+				},
+				{
+					color: "warning",
+					variant: "outlined",
+					clickable: true,
+					disabled: false,
+					class: { root: "hover:bg-rui-warning/[0.04] focus:bg-rui-warning/[0.12]" }
+				},
+				{
+					color: "info",
+					variant: "outlined",
+					clickable: true,
+					disabled: false,
+					class: { root: "hover:bg-rui-info/[0.04] focus:bg-rui-info/[0.12]" }
+				},
+				{
+					color: "success",
+					variant: "outlined",
+					clickable: true,
+					disabled: false,
+					class: { root: "hover:bg-rui-success/[0.04] focus:bg-rui-success/[0.12]" }
+				}
+			],
+			compoundSlots: [{
+				slots: ["root"],
+				color: [
+					"primary",
+					"secondary",
+					"error",
+					"warning",
+					"info",
+					"success"
+				],
+				variant: "filled",
+				class: "text-rui-dark-text"
+			}, {
+				slots: ["root"],
+				color: [
+					"warning",
+					"success",
+					"info"
+				],
+				variant: "filled",
+				class: "dark:text-rui-light-text"
+			}],
+			defaultVariants: {
+				tile: false,
+				size: "md",
+				disabled: false,
+				clickable: false,
+				variant: "filled",
+				color: "grey"
+			}
+		});
+		const ui = computed(() => chipStyles({
+			tile: __props.tile,
+			size: __props.size,
+			color: __props.color,
+			variant: __props.variant,
+			disabled: __props.disabled,
+			clickable: __props.clickable
+		}));
+		const style = computed(() => {
+			const s = {};
+			if (__props.bgColor) s.backgroundColor = __props.bgColor;
+			if (__props.textColor) s.color = __props.textColor;
+			return s;
+		});
+		function click(e) {
+			if (!__props.clickable || __props.disabled) return;
+			emit("click", e);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps({
+				class: unref(ui).root({ class: unref(cn)(__props.classNames?.root) }),
+				style: unref(style),
+				"data-variant": __props.variant,
+				"data-color": __props.color,
+				"data-disabled": __props.disabled || void 0,
+				role: "button",
+				tabindex: "0"
+			}, unref(objectOmit)(_ctx.$attrs, ["onClick"]), { onClick: _cache[1] || (_cache[1] = ($event) => click($event)) }), [
+				_ctx.$slots.prepend ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(unref(ui).prepend())
+				}, [renderSlot(_ctx.$slots, "prepend")], 2)) : createCommentVNode("", true),
+				createElementVNode("span", { class: normalizeClass(unref(ui).label({ class: unref(cn)(__props.classNames?.content) ?? __props.contentClass })) }, [renderSlot(_ctx.$slots, "default")], 2),
+				__props.closeable ? (openBlock(), createElementBlock("button", {
+					key: 1,
+					class: normalizeClass(unref(ui).close()),
+					disabled: __props.disabled,
+					type: "button",
+					onClick: _cache[0] || (_cache[0] = withModifiers(($event) => emit("click:close"), ["stop"]))
+				}, [createVNode(RuiIcon_default, {
+					class: normalizeClass(unref(ui).closeIcon()),
+					size: unref(CHIP_CLOSE_ICON_SIZES)[__props.size],
+					name: __props.closeIcon
+				}, null, 8, [
+					"class",
+					"size",
+					"name"
+				])], 10, _hoisted_2)) : createCommentVNode("", true)
+			], 16, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { RuiChip_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RuiChip.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RuiChip.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots"],"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  bgColor?: string;\n  textColor?: string;\n  classNames?: RuiChipClassNames;\n  /** @deprecated Use `classNames.content` instead */\n  contentClass?: string;\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-circle-x',\n  bgColor = undefined,\n  textColor = undefined,\n  classNames,\n  contentClass = '',\n} = defineProps<Props>();\n\nconst emit = defineEmits<{\n  'click:close': [];\n  'click': [e: MouseEvent];\n}>();\n\ndefineSlots<{\n  prepend?: () => any;\n  default?: () => any;\n}>();\n\nconst chipStyles = tv({\n  slots: {\n    root: 'inline-flex items-center justify-between px-2 py-1 transition-all cursor-default outline-none max-w-full truncate',\n    prepend: 'rounded-full flex items-center justify-center pr-0 w-6 h-6 text-[0.6rem] text-white bg-rui-grey-400 dark:bg-rui-grey-700 overflow-hidden',\n    label: 'truncate px-2 text-[0.8125rem]',\n    close: 'rounded-full flex items-center p-[0.13rem] pl-0 inset-y-0 focus:outline-none',\n    closeIcon: 'opacity-50 hover:opacity-80 dark:hover:text-rui-grey-300 transition-opacity',\n  },\n  variants: {\n    tile: {\n      true: { root: 'rounded-lg' },\n      false: { root: 'rounded-full' },\n    },\n    size: {\n      md: { root: 'min-h-8' },\n      sm: {\n        root: 'py-[0.19rem]',\n        prepend: 'text-[0.5rem] p-[0.08rem] w-4 h-4',\n        label: 'px-1.5 text-[0.7rem]',\n        close: 'p-[0.08rem]',\n      },\n    },\n    disabled: {\n      true: { root: 'opacity-40 cursor-default', close: 'cursor-default' },\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    },\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)\n    { clickable: true, disabled: false, class: { root: 'hover:brightness-90 focus:brightness-75 dark:hover:brightness-110' } },\n\n    // Grey filled/outlined\n    { color: 'grey', variant: 'filled', class: { root: 'bg-rui-grey-200 dark:bg-rui-grey-800' } },\n    { color: 'grey', variant: 'outlined', class: { root: 'border border-black/[0.26] bg-transparent dark:border-white/[0.26]' } },\n    { color: 'grey', variant: 'outlined', clickable: true, disabled: false, class: { root: 'hover:bg-black/[0.04] focus:bg-black/[0.12] dark:hover:bg-white/[0.04] dark:focus:bg-white/[0.12]' } },\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    { color: 'error', variant: 'filled', class: { root: 'bg-rui-error' } },\n    { color: 'warning', variant: 'filled', class: { root: 'bg-rui-warning' } },\n    { color: 'info', variant: 'filled', class: { root: 'bg-rui-info' } },\n    { color: 'success', variant: 'filled', class: { root: 'bg-rui-success' } },\n\n    // Context colors — outlined base\n    { color: 'primary', variant: 'outlined', class: { root: 'border text-rui-primary border-rui-primary/50 bg-transparent' } },\n    { color: 'secondary', variant: 'outlined', class: { root: 'border text-rui-secondary border-rui-secondary/50 bg-transparent' } },\n    { color: 'error', variant: 'outlined', class: { root: 'border text-rui-error border-rui-error/50 bg-transparent' } },\n    { color: 'warning', variant: 'outlined', class: { root: 'border text-rui-warning border-rui-warning/50 bg-transparent' } },\n    { color: 'info', variant: 'outlined', class: { root: 'border text-rui-info border-rui-info/50 bg-transparent' } },\n    { color: 'success', variant: 'outlined', class: { root: 'border text-rui-success border-rui-success/50 bg-transparent' } },\n\n    // Context colors — outlined interactive\n    { color: 'primary', variant: 'outlined', clickable: true, disabled: false, class: { root: 'hover:bg-rui-primary/[0.04] focus:bg-rui-primary/[0.12]' } },\n    { color: 'secondary', variant: 'outlined', clickable: true, disabled: false, class: { root: 'hover:bg-rui-secondary/[0.04] focus:bg-rui-secondary/[0.12]' } },\n    { color: 'error', variant: 'outlined', clickable: true, disabled: false, class: { root: 'hover:bg-rui-error/[0.04] focus:bg-rui-error/[0.12]' } },\n    { color: 'warning', variant: 'outlined', clickable: true, disabled: false, class: { root: 'hover:bg-rui-warning/[0.04] focus:bg-rui-warning/[0.12]' } },\n    { color: 'info', variant: 'outlined', clickable: true, disabled: false, class: { root: 'hover:bg-rui-info/[0.04] focus:bg-rui-info/[0.12]' } },\n    { color: 'success', variant: 'outlined', clickable: true, disabled: false, class: { root: 'hover:bg-rui-success/[0.04] focus:bg-rui-success/[0.12]' } },\n  ],\n  compoundSlots: [\n    // All context colors filled share dark text\n    { slots: ['root'], color: ['primary', 'secondary', 'error', 'warning', 'info', 'success'], variant: 'filled', class: 'text-rui-dark-text' },\n    // Dark mode: warning/success/info filled use light text\n    { slots: ['root'], color: ['warning', 'success', 'info'], variant: 'filled', class: 'dark:text-rui-light-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}));\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</script>\n\n<template>\n  <div\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=\"button\"\n    tabindex=\"0\"\n    v-bind=\"objectOmit($attrs, ['onClick'])\"\n    @click=\"click($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) ?? contentClass })\">\n      <slot />\n    </span>\n    <button\n      v-if=\"closeable\"\n      :class=\"ui.close()\"\n      :disabled=\"disabled\"\n      type=\"button\"\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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"}

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

@@ -0,0 +1,11 @@
+export declare const ChipSize: {
+    readonly sm: "sm";
+    readonly md: "md";
+};
+export type ChipSize = (typeof ChipSize)[keyof typeof ChipSize];
+export declare const ChipVariant: {
+    readonly filled: "filled";
+    readonly outlined: "outlined";
+};
+export type ChipVariant = (typeof ChipVariant)[keyof typeof ChipVariant];
+export declare const CHIP_CLOSE_ICON_SIZES: Record<ChipSize, number>;

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

@@ -0,0 +1,17 @@
+//#region src/components/chips/chip-props.ts
+var ChipSize = {
+	sm: "sm",
+	md: "md"
+};
+var ChipVariant = {
+	filled: "filled",
+	outlined: "outlined"
+};
+var CHIP_CLOSE_ICON_SIZES = {
+	sm: 16,
+	md: 24
+};
+//#endregion
+export { CHIP_CLOSE_ICON_SIZES, ChipSize, ChipVariant };
+
+//# sourceMappingURL=chip-props.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chip-props.js","names":[],"sources":["../../../src/components/chips/chip-props.ts"],"sourcesContent":["export const ChipSize = {\n  sm: 'sm',\n  md: 'md',\n} as const;\n\nexport type ChipSize = (typeof ChipSize)[keyof typeof ChipSize];\n\nexport const ChipVariant = {\n  filled: 'filled',\n  outlined: 'outlined',\n} as const;\n\nexport type ChipVariant = (typeof ChipVariant)[keyof typeof ChipVariant];\n\nexport const CHIP_CLOSE_ICON_SIZES: Record<ChipSize, number> = {\n  sm: 16,\n  md: 24,\n};\n"],"mappings":";AAAA,IAAa,WAAW;CACtB,IAAI;CACJ,IAAI;CACL;AAID,IAAa,cAAc;CACzB,QAAQ;CACR,UAAU;CACX;AAID,IAAa,wBAAkD;CAC7D,IAAI;CACJ,IAAI;CACL"}

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

@@ -0,0 +1,7 @@
+import RuiColorBoard_vue_vue_type_script_setup_true_lang_default from "./RuiColorBoard.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/color-picker/RuiColorBoard.vue
+var RuiColorBoard_default = RuiColorBoard_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RuiColorBoard_default as default };
+
+//# sourceMappingURL=RuiColorBoard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RuiColorBoard.js","names":[],"sources":["../../../src/components/color-picker/RuiColorBoard.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { clamp } from '@vueuse/shared';\nimport tinycolor from 'tinycolor2';\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=\"relative w-full h-40 overflow-hidden cursor-pointer\"\n    v-bind=\"$attrs\"\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-gradient-to-r from-white\" />\n    <div class=\"absolute inset-0 to-transparent bg-gradient-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 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.d.ts

@@ -1,4 +1,4 @@
-import { Color } from './utils.js';
+import { type Color } from './utils.js';
 type __VLS_Props = {
     color: Color;
 };

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

@@ -0,0 +1,100 @@
+import { useElementDrag } from "./utils.js";
+import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeStyle, onMounted, openBlock, reactive, ref, unref, useTemplateRef, watch } from "vue";
+import { clamp, get, set } from "@vueuse/shared";
+import tinycolor from "tinycolor2";
+//#region src/components/color-picker/RuiColorBoard.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-valuetext"];
+var RuiColorBoard_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "RuiColorBoard",
+	inheritAttrs: false,
+	__name: "RuiColorBoard",
+	props: { color: {} },
+	emits: ["update:board"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const wrapper = useTemplateRef("wrapper");
+		const state = reactive({
+			hexString: hueToHex(__props.color.hue),
+			saturation: __props.color.saturation,
+			brightness: __props.color.brightness
+		});
+		const cursorTop = ref(0);
+		const cursorLeft = ref(0);
+		const { handleClick, onMouseDown, onTouchStart } = useElementDrag(emitColor);
+		const cursorStyle = computed(() => ({
+			top: `${get(cursorTop) * 100}%`,
+			left: `${get(cursorLeft) * 100}%`
+		}));
+		function hueToHex(hue) {
+			return tinycolor({
+				h: hue,
+				s: 1,
+				v: 1
+			}).toHexString();
+		}
+		function updatePosition() {
+			set(cursorLeft, state.saturation);
+			set(cursorTop, 1 - state.brightness);
+		}
+		function emitColor(x, y) {
+			const el = get(wrapper);
+			if (!el) return;
+			const { width, height, left, top } = el.getBoundingClientRect();
+			let calculatedX = x - left;
+			let calculatedY = y - top;
+			calculatedX = clamp(calculatedX, 0, width);
+			calculatedY = clamp(calculatedY, 0, height);
+			const saturation = calculatedX / width;
+			const brightness = clamp(-(calculatedY / height) + 1, 0, 1);
+			set(cursorLeft, calculatedX / width);
+			set(cursorTop, calculatedY / height);
+			state.saturation = saturation;
+			state.brightness = brightness;
+			emit("update:board", {
+				saturation,
+				brightness
+			});
+		}
+		watch(() => [
+			__props.color.hue,
+			__props.color.saturation,
+			__props.color.brightness
+		], ([hue, saturation, brightness]) => {
+			state.hexString = hueToHex(hue);
+			state.saturation = saturation;
+			state.brightness = brightness;
+			updatePosition();
+		});
+		onMounted(() => {
+			updatePosition();
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps({
+				ref_key: "wrapper",
+				ref: wrapper,
+				role: "slider",
+				"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: "relative w-full h-40 overflow-hidden cursor-pointer"
+			}, _ctx.$attrs, {
+				style: { backgroundColor: unref(state).hexString },
+				onClick: _cache[0] || (_cache[0] = ($event) => unref(handleClick)($event)),
+				onMousedown: _cache[1] || (_cache[1] = ($event) => unref(onMouseDown)($event)),
+				onTouchstart: _cache[2] || (_cache[2] = ($event) => unref(onTouchStart)($event))
+			}), [
+				_cache[3] || (_cache[3] = createElementVNode("div", { class: "absolute inset-0 to-transparent bg-gradient-to-r from-white" }, null, -1)),
+				_cache[4] || (_cache[4] = createElementVNode("div", { class: "absolute inset-0 to-transparent bg-gradient-to-t from-black" }, null, -1)),
+				createElementVNode("div", {
+					"data-id": "cursor",
+					class: "absolute w-5 h-5 -translate-x-1/2 -translate-y-1/2 border-2 border-white shadow rounded-full after:content-[''] after:absolute after:inset-0 after:rounded-full after:border-2 after:border-black/15",
+					style: normalizeStyle(unref(cursorStyle))
+				}, null, 4)
+			], 16, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { RuiColorBoard_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RuiColorBoard.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RuiColorBoard.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/color-picker/RuiColorBoard.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { clamp } from '@vueuse/shared';\nimport tinycolor from 'tinycolor2';\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=\"relative w-full h-40 overflow-hidden cursor-pointer\"\n    v-bind=\"$attrs\"\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-gradient-to-r from-white\" />\n    <div class=\"absolute inset-0 to-transparent bg-gradient-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 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":";;;;;;;;;;;;;EAcA,MAAM,OAAO;EAIb,MAAM,UAAU,eAA4B,UAAU;EAEtD,MAAM,QAAQ,SAAS;GACrB,WAAW,SAAS,QAAA,MAAM,IAAI;GAC9B,YAAY,QAAA,MAAM;GAClB,YAAY,QAAA,MAAM;GACnB,CAAC;EAEF,MAAM,YAAY,IAAY,EAAE;EAChC,MAAM,aAAa,IAAY,EAAE;EAEjC,MAAM,EAAE,aAAa,aAAa,iBAAiB,eAAe,UAAU;EAE5E,MAAM,cAAc,gBAA+C;GACjE,KAAK,GAAG,IAAI,UAAU,GAAG,IAAI;GAC7B,MAAM,GAAG,IAAI,WAAW,GAAG,IAAI;GAChC,EAAE;EAEH,SAAS,SAAS,KAAqB;AACrC,UAAO,UAAU;IAAE,GAAG;IAAK,GAAG;IAAG,GAAG;IAAG,CAAC,CAAC,aAAa;;EAGxD,SAAS,iBAAuB;AAC9B,OAAI,YAAY,MAAM,WAAW;AACjC,OAAI,WAAW,IAAI,MAAM,WAAW;;EAGtC,SAAS,UAAU,GAAW,GAAiB;GAC7C,MAAM,KAAK,IAAI,QAAQ;AACvB,OAAI,CAAC,GACH;GAGF,MAAM,EAAE,OAAO,QAAQ,MAAM,QADhB,GAAG,uBAAuB;GAEvC,IAAI,cAAc,IAAI;GACtB,IAAI,cAAc,IAAI;AAEtB,iBAAc,MAAM,aAAa,GAAG,MAAM;AAC1C,iBAAc,MAAM,aAAa,GAAG,OAAO;GAE3C,MAAM,aAAa,cAAc;GACjC,MAAM,aAAa,MAAM,EAAE,cAAc,UAAU,GAAG,GAAG,EAAE;AAE3D,OAAI,YAAY,cAAc,MAAM;AACpC,OAAI,WAAW,cAAc,OAAO;AAEpC,SAAM,aAAa;AACnB,SAAM,aAAa;AAEnB,QAAK,gBAAgB;IAAE;IAAY;IAAY,CAAC;;AAGlD,cACQ;GAAC,QAAA,MAAM;GAAK,QAAA,MAAM;GAAY,QAAA,MAAM;GAAW,GACpD,CAAC,KAAK,YAAY,gBAAgB;AACjC,SAAM,YAAY,SAAS,IAAI;AAC/B,SAAM,aAAa;AACnB,SAAM,aAAa;AACnB,mBAAgB;IAEnB;AAED,kBAAgB;AACd,mBAAgB;IAChB;;uBAIA,mBAoBM,OApBN,WAoBM;aAnBA;IAAJ,KAAI;IACJ,MAAK;IACL,cAAW;IACV,kBAAc,cAAgB,KAAK,MAAM,MAAA,MAAK,CAAC,aAAU,IAAA,CAAA,gBAAwB,KAAK,MAAM,MAAA,MAAK,CAAC,aAAU,IAAA,CAAA;IAC7G,WAAQ;IACR,OAAM;MACEA,KAAAA,QAAM;IACb,OAAK,EAAA,iBAAqB,MAAA,MAAK,CAAC,WAAS;IACzC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,YAAW,CAAC,OAAM;IACzB,aAAS,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,YAAW,CAAC,OAAM;IAC7B,cAAU,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,aAAY,CAAC,OAAM;;8BAEhC,mBAA2E,OAAA,EAAtE,OAAM,+DAA6D,EAAA,MAAA,GAAA;8BACxE,mBAA2E,OAAA,EAAtE,OAAM,+DAA6D,EAAA,MAAA,GAAA;IACxE,mBAIE,OAAA;KAHA,WAAQ;KACR,OAAM;KACL,OAAK,eAAE,MAAA,YAAW,CAAA"}

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

@@ -0,0 +1,7 @@
+import RuiColorDisplay_vue_vue_type_script_setup_true_lang_default from "./RuiColorDisplay.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/color-picker/RuiColorDisplay.vue
+var RuiColorDisplay_default = RuiColorDisplay_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RuiColorDisplay_default as default };
+
+//# sourceMappingURL=RuiColorDisplay.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RuiColorDisplay.js","names":[],"sources":["../../../src/components/color-picker/RuiColorDisplay.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport RuiTooltip from '@/components/overlays/tooltip/RuiTooltip.vue';\n\ndefineOptions({\n  name: 'RuiColorDisplay',\n  inheritAttrs: false,\n});\n\nconst { color } = defineProps<{\n  color: string;\n}>();\n\nconst { copy, copied } = useClipboard({ source: () => color });\n</script>\n\n<template>\n  <RuiTooltip\n    :options=\"{ placement: 'top' }\"\n    :close-delay=\"400\"\n    :class-names=\"{ tooltip: 'text-center' }\"\n    v-bind=\"$attrs\"\n  >\n    <template #activator>\n      <div\n        class=\"w-8 h-8 min-w-8 min-h-8 rounded-full cursor-pointer\"\n        data-id=\"color-display\"\n        :style=\"{ background: color }\"\n        @click=\"copy()\"\n      />\n    </template>\n    <div :class=\"{ 'h-0 overflow-hidden': copied }\">\n      Click to copy\n    </div>\n    <div\n      v-if=\"copied\"\n      class=\"text-rui-success\"\n    >\n      COPIED!\n    </div>\n  </RuiTooltip>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,37 @@
+import RuiTooltip_default from "../overlays/tooltip/RuiTooltip.js";
+import { createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, unref, withCtx } from "vue";
+import { useClipboard } from "@vueuse/core";
+//#region src/components/color-picker/RuiColorDisplay.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "text-rui-success"
+};
+var RuiColorDisplay_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "RuiColorDisplay",
+	inheritAttrs: false,
+	__name: "RuiColorDisplay",
+	props: { color: {} },
+	setup(__props) {
+		const { copy, copied } = useClipboard({ source: () => __props.color });
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(RuiTooltip_default, mergeProps({
+				options: { placement: "top" },
+				"close-delay": 400,
+				"class-names": { tooltip: "text-center" }
+			}, _ctx.$attrs), {
+				activator: withCtx(() => [createElementVNode("div", {
+					class: "w-8 h-8 min-w-8 min-h-8 rounded-full cursor-pointer",
+					"data-id": "color-display",
+					style: normalizeStyle({ background: __props.color }),
+					onClick: _cache[0] || (_cache[0] = ($event) => unref(copy)())
+				}, null, 4)]),
+				default: withCtx(() => [createElementVNode("div", { class: normalizeClass({ "h-0 overflow-hidden": unref(copied) }) }, " Click to copy ", 2), unref(copied) ? (openBlock(), createElementBlock("div", _hoisted_1, " COPIED! ")) : createCommentVNode("", true)]),
+				_: 1
+			}, 16);
+		};
+	}
+});
+//#endregion
+export { RuiColorDisplay_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RuiColorDisplay.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RuiColorDisplay.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/color-picker/RuiColorDisplay.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport RuiTooltip from '@/components/overlays/tooltip/RuiTooltip.vue';\n\ndefineOptions({\n  name: 'RuiColorDisplay',\n  inheritAttrs: false,\n});\n\nconst { color } = defineProps<{\n  color: string;\n}>();\n\nconst { copy, copied } = useClipboard({ source: () => color });\n</script>\n\n<template>\n  <RuiTooltip\n    :options=\"{ placement: 'top' }\"\n    :close-delay=\"400\"\n    :class-names=\"{ tooltip: 'text-center' }\"\n    v-bind=\"$attrs\"\n  >\n    <template #activator>\n      <div\n        class=\"w-8 h-8 min-w-8 min-h-8 rounded-full cursor-pointer\"\n        data-id=\"color-display\"\n        :style=\"{ background: color }\"\n        @click=\"copy()\"\n      />\n    </template>\n    <div :class=\"{ 'h-0 overflow-hidden': copied }\">\n      Click to copy\n    </div>\n    <div\n      v-if=\"copied\"\n      class=\"text-rui-success\"\n    >\n      COPIED!\n    </div>\n  </RuiTooltip>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAYA,MAAM,EAAE,MAAM,WAAW,aAAa,EAAE,cAAc,QAAA,OAAO,CAAC;;uBAI5D,YAuBa,oBAvBb,WAuBa;IAtBV,SAAS,EAAA,WAAA,OAAoB;IAC7B,eAAa;IACb,eAAa,EAAA,SAAA,eAAA;MACNA,KAAAA,OAAM,EAAA;IAEH,WAAS,cAMhB,CALF,mBAKE,OAAA;KAJA,OAAM;KACN,WAAQ;KACP,OAAK,eAAA,EAAA,YAAgB,QAAA,OAAK,CAAA;KAC1B,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,KAAI,EAAA;;2BAKV,CAFN,mBAEM,OAAA,EAFA,OAAK,eAAA,EAAA,uBAA2B,MAAA,OAAM,EAAA,CAAA,EAAA,EAAI,mBAEhD,EAAA,EAEQ,MAAA,OAAM,IAAA,WAAA,EADd,mBAKM,OALN,YAGC,YAED,IAAA,mBAAA,IAAA,KAAA,CAAA,CAAA"}

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

@@ -0,0 +1,7 @@
+import RuiColorHue_vue_vue_type_script_setup_true_lang_default from "./RuiColorHue.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/color-picker/RuiColorHue.vue
+var RuiColorHue_default = RuiColorHue_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RuiColorHue_default as default };
+
+//# sourceMappingURL=RuiColorHue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RuiColorHue.js","names":[],"sources":["../../../src/components/color-picker/RuiColorHue.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { clamp } from '@vueuse/shared';\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=\"relative w-full h-3.5 rounded-full cursor-pointer bg-hue-spectrum\"\n    v-bind=\"$attrs\"\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-2 bg-white rounded-full\"\n      :style=\"cursorStyle\"\n    />\n  </div>\n</template>\n"],"mappings":""}