@rotki/ui-library 3.0.0-beta.2 → 3.0.0-beta.4

package/dist/components/helpers/RuiFormTextDetail.vue_vue_type_script_setup_true_lang.js

@@ -31,8 +31,7 @@ var RuiFormTextDetail_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 				"enter-to-class": "opacity-100 translate-y-0",
 				"leave-from-class": "opacity-100 -translate-y-2",
 				"leave-active-class": "transform transition",
-				"leave-to-class": "opacity-0 -translate-y-2 h-0",
-				appear: ""
+				"leave-to-class": "opacity-0 -translate-y-2 h-0"
 			}, {
 				default: withCtx(() => [unref(hasError) ? (openBlock(), createElementBlock("div", _hoisted_1, toDisplayString(unref(formattedErrorMessages)[0]), 1)) : unref(hasSuccess) ? (openBlock(), createElementBlock("div", _hoisted_2, toDisplayString(unref(formattedSuccessMessages)[0]), 1)) : _ctx.$slots.hint || __props.hint ? (openBlock(), createElementBlock("div", _hoisted_3, [renderSlot(_ctx.$slots, "hint", {}, () => [createTextVNode(toDisplayString(__props.hint), 1)])])) : createCommentVNode("", true)]),
 				_: 3

package/dist/components/helpers/RuiFormTextDetail.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiFormTextDetail.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/helpers/RuiFormTextDetail.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useFormTextDetail } from '@/utils/form-text-detail';\n\nconst {\n  errorMessages = [],\n  successMessages = [],\n  hint = '',\n} = defineProps<{\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hint?: string;\n}>();\n\ndefineSlots<{\n  /** Rich hint content, shown in place of the `hint` text while there is no error or success message. */\n  hint?: () => any;\n}>();\n\nconst { formattedErrorMessages, formattedSuccessMessages, hasError, hasSuccess } =\n  useFormTextDetail(\n    () => errorMessages,\n    () => successMessages,\n  );\n</script>\n\n<template>\n  <TransitionGroup\n    tag=\"div\"\n    class=\"details min-h-6\"\n    enter-from-class=\"opacity-0 -translate-y-2 h-0\"\n    enter-active-class=\"transform transition\"\n    enter-to-class=\"opacity-100 translate-y-0\"\n    leave-from-class=\"opacity-100 -translate-y-2\"\n    leave-active-class=\"transform transition\"\n    leave-to-class=\"opacity-0 -translate-y-2 h-0\"\n    appear\n  >\n    <div\n      v-if=\"hasError\"\n      key=\"error\"\n      class=\"text-rui-error dark:text-rui-error-lighter text-caption\"\n    >\n      {{ formattedErrorMessages[0] }}\n    </div>\n    <div\n      v-else-if=\"hasSuccess\"\n      key=\"success\"\n      class=\"text-rui-success text-caption\"\n    >\n      {{ formattedSuccessMessages[0] }}\n    </div>\n    <div\n      v-else-if=\"$slots.hint || hint\"\n      key=\"hint\"\n      class=\"text-rui-text-secondary text-caption\"\n    >\n      <slot name=\"hint\">\n        {{ hint }}\n      </slot>\n    </div>\n  </TransitionGroup>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAkBA,MAAM,EAAE,wBAAwB,0BAA0B,UAAU,eAClE,wBACQ,QAAA,qBACA,QAAA,eACR;;GAIA,OAAA,UAAA,GAAA,YAkCkB,iBAAA;IAjChB,KAAI;IACJ,OAAM;IACN,oBAAiB;IACjB,sBAAmB;IACnB,kBAAe;IACf,oBAAiB;IACjB,sBAAmB;IACnB,kBAAe;IACf,QAAA;;IAEA,SAAA,cAMM,CALE,MAAA,QAAA,KADR,UAAA,GAAA,mBAMM,OANN,YAMM,gBADD,MAAA,sBAAA,CAAsB,CAAA,EAAA,GAAA,CAAA,KAGd,MAAA,UAAA,KADb,UAAA,GAAA,mBAMM,OANN,YAMM,gBADD,MAAA,wBAAA,CAAwB,CAAA,EAAA,GAAA,CAAA,KAGhBA,KAAAA,OAAO,QAAQ,QAAA,QAD5B,UAAA,GAAA,mBAQM,OARN,YAQM,CAHJ,WAEO,KAAA,QAAA,QAAA,CAAA,SAAA,CADF,gBAAA,gBAAA,QAAA,IAAI,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA"}
+{"version":3,"file":"RuiFormTextDetail.vue_vue_type_script_setup_true_lang.js","names":["$slots","_openBlock","_createBlock","_TransitionGroup","_withCtx","_unref","_createElementBlock","_toDisplayString","_renderSlot","_createTextVNode","_createCommentVNode"],"sources":["../../../src/components/helpers/RuiFormTextDetail.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useFormTextDetail } from '@/utils/form-text-detail';\n\nconst {\n  errorMessages = [],\n  successMessages = [],\n  hint = '',\n} = defineProps<{\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hint?: string;\n}>();\n\ndefineSlots<{\n  /** Rich hint content, shown in place of the `hint` text while there is no error or success message. */\n  hint?: () => any;\n}>();\n\nconst { formattedErrorMessages, formattedSuccessMessages, hasError, hasSuccess } =\n  useFormTextDetail(\n    () => errorMessages,\n    () => successMessages,\n  );\n</script>\n\n<template>\n  <!-- No `appear`: a hint present on first render is in place when the field shows, rather than\n       sliding in each time a dialog or page opens; only a change of message animates. -->\n  <TransitionGroup\n    tag=\"div\"\n    class=\"details min-h-6\"\n    enter-from-class=\"opacity-0 -translate-y-2 h-0\"\n    enter-active-class=\"transform transition\"\n    enter-to-class=\"opacity-100 translate-y-0\"\n    leave-from-class=\"opacity-100 -translate-y-2\"\n    leave-active-class=\"transform transition\"\n    leave-to-class=\"opacity-0 -translate-y-2 h-0\"\n  >\n    <div\n      v-if=\"hasError\"\n      key=\"error\"\n      class=\"text-rui-error dark:text-rui-error-lighter text-caption\"\n    >\n      {{ formattedErrorMessages[0] }}\n    </div>\n    <div\n      v-else-if=\"hasSuccess\"\n      key=\"success\"\n      class=\"text-rui-success text-caption\"\n    >\n      {{ formattedSuccessMessages[0] }}\n    </div>\n    <div\n      v-else-if=\"$slots.hint || hint\"\n      key=\"hint\"\n      class=\"text-rui-text-secondary text-caption\"\n    >\n      <slot name=\"hint\">\n        {{ hint }}\n      </slot>\n    </div>\n  </TransitionGroup>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAkBA,MAAM,EAAE,wBAAwB,0BAA0B,UAAU,eAClE,wBACQ,QAAA,qBACA,QAAA,eACR;;GAMA,OAAAC,UAAA,GAAAC,YAiCkBC,iBAAA;IAhChB,KAAI;IACJ,OAAM;IACN,oBAAiB;IACjB,sBAAmB;IACnB,kBAAe;IACf,oBAAiB;IACjB,sBAAmB;IACnB,kBAAe;;IAEf,SAAAC,cAMM,CALEC,MAAA,QAAA,KADRJ,UAAA,GAAAK,mBAMM,OANN,YAMMC,gBADDF,MAAA,sBAAA,CAAsB,CAAA,EAAA,GAAA,CAAA,KAGdA,MAAA,UAAA,KADbJ,UAAA,GAAAK,mBAMM,OANN,YAMMC,gBADDF,MAAA,wBAAA,CAAwB,CAAA,EAAA,GAAA,CAAA,KAGhBL,KAAAA,OAAO,QAAQ,QAAA,QAD5BC,UAAA,GAAAK,mBAQM,OARN,YAQM,CAHJE,WAEO,KAAA,QAAA,QAAA,CAAA,SAAA,CADFC,gBAAAF,gBAAA,QAAA,IAAI,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA"}

package/dist/components/icons/RuiIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiIcon.js","names":[],"sources":["../../../src/components/icons/RuiIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ClassValue } from 'vue';\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport { objectOmit } from '@vueuse/shared';\nimport { useIcons } from '@/composables/icons';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface Props {\n  name: RuiIcons;\n  size?: number | string;\n  color?: ContextColorsType;\n}\n\ndefineOptions({\n  name: 'RuiIcon',\n  // A fallthrough class would land beside the variant classes and leave the cascade to break the tie; `ui` merges instead\n  inheritAttrs: false,\n});\n\nconst { name, size, color } = defineProps<Props>();\n\nconst { registeredIcons } = useIcons();\n\ntype SvgComponent = [tag: string, attrs: Record<string, string>];\n\n/**\n * The icon's box is always driven by `--rui-icon-size`, so flex shrinking is\n * never wanted: `shrink-0` keeps the size beside a long grow sibling,\n * such as a `w-full` button label in `variant=\"list\"`. Without it the svg is\n * compressed along the main axis while its height stays put, drawing a sliver\n * of a glyph.\n *\n * The stroke is set on the svg as CSS, so `--rui-icon-stroke` can retune it.\n * Lucide's 2 reads heavy beside Inter; 1.5 would draw a 16px glyph at a\n * single, blurry pixel.\n */\nconst iconStyles = tv({\n  base: 'shrink-0 w-(--rui-icon-size,1.5rem) h-(--rui-icon-size,1.5rem) [stroke-width:var(--rui-icon-stroke,1.75)]',\n  variants: {\n    color: {\n      primary: 'text-rui-primary',\n      secondary: 'text-rui-secondary',\n      error: 'text-rui-error',\n      warning: 'text-rui-warning',\n      info: 'text-rui-info',\n      success: 'text-rui-success',\n    },\n  },\n});\n\nconst hasExplicitSize = computed<boolean>(() => size !== undefined);\n\nfunction ui(attrsClass: ClassValue): string {\n  return iconStyles({ color, class: cn(attrsClass) });\n}\n\n/**\n * The `size` prop as an inline CSS custom property on the svg. Inline style\n * beats any inherited value for the same property on this element, so a\n * consumer's size beats the button's `--rui-icon-size` without !important.\n *\n * A bare number is coerced to px, including the numeric string a template\n * binding like `:size=\"16\"` resolves to, while a value that already carries a\n * unit passes through. CSS needs that coercion; the `width`/`height`\n * presentation attributes this replaced treated bare numbers as px themselves.\n */\nconst sizeStyle = computed<Record<string, string> | undefined>(() => {\n  if (!get(hasExplicitSize))\n    return undefined;\n  const raw = String(size);\n  const value = /^\\d+(?:\\.\\d+)?$/.test(raw) ? `${raw}px` : raw;\n  return { '--rui-icon-size': value };\n});\n\nconst isFill = computed<boolean>(() => name.endsWith('-fill'));\n\n/**\n * What is registered is the only thing that matters here. An app may register\n * its own icons through `createRui(\\{ theme: \\{ icons \\} \\})`, brand logos\n * among them since the library carries none, and those names never appear in\n * the generated `RuiIcons` list. Validating against that list warned for\n * precisely the icons the registration API exists to support. A genuinely\n * unknown name is still caught by the check that decides whether anything\n * renders.\n */\nconst components = computed<SvgComponent[] | undefined>(() => {\n  const found = registeredIcons[name];\n\n  if (!found) {\n    console.error(\n      `Icons \"${name}\" not found. Make sure that you have register the icon when installing the RuiPlugin`,\n    );\n  }\n  return found;\n});\n</script>\n\n<template>\n  <svg\n    aria-hidden=\"true\"\n    class=\"rui-icon\"\n    :class=\"ui($attrs.class)\"\n    :style=\"sizeStyle\"\n    viewBox=\"0 0 24 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    v-bind=\"objectOmit($attrs, ['class'])\"\n  >\n    <component\n      :is=\"component[0]\"\n      v-for=\"(component, index) in components\"\n      :key=\"index\"\n      v-bind=\"component[1]\"\n      :fill=\"!isFill ? 'none' : 'currentColor'\"\n      :stroke=\"!isFill ? 'currentColor' : 'none'\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      fill-rule=\"evenodd\"\n      clip-rule=\"evenodd\"\n    />\n  </svg>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiIcon.js","names":["_sfc_main"],"sources":["../../../src/components/icons/RuiIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ClassValue } from 'vue';\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport { objectOmit } from '@vueuse/shared';\nimport { useIcons } from '@/composables/icons';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface Props {\n  name: RuiIcons;\n  size?: number | string;\n  color?: ContextColorsType;\n}\n\ndefineOptions({\n  name: 'RuiIcon',\n  // A fallthrough class would land beside the variant classes and leave the cascade to break the tie; `ui` merges instead\n  inheritAttrs: false,\n});\n\nconst { name, size, color } = defineProps<Props>();\n\nconst { registeredIcons } = useIcons();\n\ntype SvgComponent = [tag: string, attrs: Record<string, string>];\n\n/**\n * The icon's box is always driven by `--rui-icon-size`, so flex shrinking is\n * never wanted: `shrink-0` keeps the size beside a long grow sibling,\n * such as a `w-full` button label in `variant=\"list\"`. Without it the svg is\n * compressed along the main axis while its height stays put, drawing a sliver\n * of a glyph.\n *\n * The stroke is set on the svg as CSS, so `--rui-icon-stroke` can retune it.\n * Lucide's 2 reads heavy beside Inter; 1.5 would draw a 16px glyph at a\n * single, blurry pixel.\n *\n * The svg also carries the default paint, outlined in `currentColor`, and\n * every primitive inherits it unless it sets its own `fill` or `stroke`. That\n * is how lucide draws, so its solid dots (tag, palette) stay solid, and how an\n * icon mixes a stroked outline with a solid mark.\n */\nconst iconStyles = tv({\n  base: 'shrink-0 w-(--rui-icon-size,1.5rem) h-(--rui-icon-size,1.5rem) [stroke-width:var(--rui-icon-stroke,1.75)]',\n  variants: {\n    color: {\n      primary: 'text-rui-primary',\n      secondary: 'text-rui-secondary',\n      error: 'text-rui-error',\n      warning: 'text-rui-warning',\n      info: 'text-rui-info',\n      success: 'text-rui-success',\n    },\n  },\n});\n\nconst hasExplicitSize = computed<boolean>(() => size !== undefined);\n\nfunction ui(attrsClass: ClassValue): string {\n  return iconStyles({ color, class: cn(attrsClass) });\n}\n\n/**\n * The `size` prop as an inline CSS custom property on the svg. Inline style\n * beats any inherited value for the same property on this element, so a\n * consumer's size beats the button's `--rui-icon-size` without !important.\n *\n * A bare number is coerced to px, including the numeric string a template\n * binding like `:size=\"16\"` resolves to, while a value that already carries a\n * unit passes through. CSS needs that coercion; the `width`/`height`\n * presentation attributes this replaced treated bare numbers as px themselves.\n */\nconst sizeStyle = computed<Record<string, string> | undefined>(() => {\n  if (!get(hasExplicitSize))\n    return undefined;\n  const raw = String(size);\n  const value = /^\\d+(?:\\.\\d+)?$/.test(raw) ? `${raw}px` : raw;\n  return { '--rui-icon-size': value };\n});\n\n/**\n * What is registered is the only thing that matters here. An app may register\n * its own icons through `createRui(\\{ theme: \\{ icons \\} \\})`, brand logos\n * among them since the library carries none, and those names never appear in\n * the generated `RuiIcons` list. Validating against that list warned for\n * precisely the icons the registration API exists to support. A genuinely\n * unknown name is still caught by the check that decides whether anything\n * renders.\n */\nconst components = computed<SvgComponent[] | undefined>(() => {\n  const found = registeredIcons[name];\n\n  if (!found) {\n    console.error(\n      `Icons \"${name}\" not found. Make sure that you have register the icon when installing the RuiPlugin`,\n    );\n  }\n  return found;\n});\n</script>\n\n<template>\n  <svg\n    aria-hidden=\"true\"\n    class=\"rui-icon\"\n    :class=\"ui($attrs.class)\"\n    :style=\"sizeStyle\"\n    viewBox=\"0 0 24 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    v-bind=\"objectOmit($attrs, ['class'])\"\n  >\n    <component\n      :is=\"component[0]\"\n      v-for=\"(component, index) in components\"\n      :key=\"index\"\n      v-bind=\"component[1]\"\n    />\n  </svg>\n</template>\n"],"mappings":""}

package/dist/components/icons/RuiIcon.vue_vue_type_script_setup_true_lang.js

@@ -13,6 +13,11 @@ import { Fragment, computed, createBlock, createElementBlock, defineComponent, m
 * The stroke is set on the svg as CSS, so `--rui-icon-stroke` can retune it.
 * Lucide's 2 reads heavy beside Inter; 1.5 would draw a 16px glyph at a
 * single, blurry pixel.
+*
+* The svg also carries the default paint, outlined in `currentColor`, and
+* every primitive inherits it unless it sets its own `fill` or `stroke`. That
+* is how lucide draws, so its solid dots (tag, palette) stay solid, and how an
+* icon mixes a stroked outline with a solid mark.
 */
 var RuiIcon_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "RuiIcon",
@@ -58,7 +63,6 @@ var RuiIcon_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 			const raw = String(__props.size);
 			return { "--rui-icon-size": /^\d+(?:\.\d+)?$/.test(raw) ? `${raw}px` : raw };
 		});
-		const isFill = computed(() => __props.name.endsWith("-fill"));
 		/**
 		* What is registered is the only thing that matters here. An app may register
 		* its own icons through `createRui(\{ theme: \{ icons \} \})`, brand logos
@@ -79,16 +83,13 @@ var RuiIcon_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 				class: ["rui-icon", ui(_ctx.$attrs.class)],
 				style: unref(sizeStyle),
 				viewBox: "0 0 24 24",
-				xmlns: "http://www.w3.org/2000/svg"
+				xmlns: "http://www.w3.org/2000/svg",
+				fill: "none",
+				stroke: "currentColor",
+				"stroke-linecap": "round",
+				"stroke-linejoin": "round"
 			}, unref(objectOmit)(_ctx.$attrs, ["class"])), [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(components), (component, index) => {
-				return openBlock(), createBlock(resolveDynamicComponent(component[0]), mergeProps({ key: index }, { ref_for: true }, component[1], {
-					fill: !unref(isFill) ? "none" : "currentColor",
-					stroke: !unref(isFill) ? "currentColor" : "none",
-					"stroke-linecap": "round",
-					"stroke-linejoin": "round",
-					"fill-rule": "evenodd",
-					"clip-rule": "evenodd"
-				}), null, 16, ["fill", "stroke"]);
+				return openBlock(), createBlock(resolveDynamicComponent(component[0]), mergeProps({ key: index }, { ref_for: true }, component[1]), null, 16);
 			}), 128))], 16);
 		};
 	}

package/dist/components/icons/RuiIcon.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiIcon.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/icons/RuiIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ClassValue } from 'vue';\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport { objectOmit } from '@vueuse/shared';\nimport { useIcons } from '@/composables/icons';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface Props {\n  name: RuiIcons;\n  size?: number | string;\n  color?: ContextColorsType;\n}\n\ndefineOptions({\n  name: 'RuiIcon',\n  // A fallthrough class would land beside the variant classes and leave the cascade to break the tie; `ui` merges instead\n  inheritAttrs: false,\n});\n\nconst { name, size, color } = defineProps<Props>();\n\nconst { registeredIcons } = useIcons();\n\ntype SvgComponent = [tag: string, attrs: Record<string, string>];\n\n/**\n * The icon's box is always driven by `--rui-icon-size`, so flex shrinking is\n * never wanted: `shrink-0` keeps the size beside a long grow sibling,\n * such as a `w-full` button label in `variant=\"list\"`. Without it the svg is\n * compressed along the main axis while its height stays put, drawing a sliver\n * of a glyph.\n *\n * The stroke is set on the svg as CSS, so `--rui-icon-stroke` can retune it.\n * Lucide's 2 reads heavy beside Inter; 1.5 would draw a 16px glyph at a\n * single, blurry pixel.\n */\nconst iconStyles = tv({\n  base: 'shrink-0 w-(--rui-icon-size,1.5rem) h-(--rui-icon-size,1.5rem) [stroke-width:var(--rui-icon-stroke,1.75)]',\n  variants: {\n    color: {\n      primary: 'text-rui-primary',\n      secondary: 'text-rui-secondary',\n      error: 'text-rui-error',\n      warning: 'text-rui-warning',\n      info: 'text-rui-info',\n      success: 'text-rui-success',\n    },\n  },\n});\n\nconst hasExplicitSize = computed<boolean>(() => size !== undefined);\n\nfunction ui(attrsClass: ClassValue): string {\n  return iconStyles({ color, class: cn(attrsClass) });\n}\n\n/**\n * The `size` prop as an inline CSS custom property on the svg. Inline style\n * beats any inherited value for the same property on this element, so a\n * consumer's size beats the button's `--rui-icon-size` without !important.\n *\n * A bare number is coerced to px, including the numeric string a template\n * binding like `:size=\"16\"` resolves to, while a value that already carries a\n * unit passes through. CSS needs that coercion; the `width`/`height`\n * presentation attributes this replaced treated bare numbers as px themselves.\n */\nconst sizeStyle = computed<Record<string, string> | undefined>(() => {\n  if (!get(hasExplicitSize))\n    return undefined;\n  const raw = String(size);\n  const value = /^\\d+(?:\\.\\d+)?$/.test(raw) ? `${raw}px` : raw;\n  return { '--rui-icon-size': value };\n});\n\nconst isFill = computed<boolean>(() => name.endsWith('-fill'));\n\n/**\n * What is registered is the only thing that matters here. An app may register\n * its own icons through `createRui(\\{ theme: \\{ icons \\} \\})`, brand logos\n * among them since the library carries none, and those names never appear in\n * the generated `RuiIcons` list. Validating against that list warned for\n * precisely the icons the registration API exists to support. A genuinely\n * unknown name is still caught by the check that decides whether anything\n * renders.\n */\nconst components = computed<SvgComponent[] | undefined>(() => {\n  const found = registeredIcons[name];\n\n  if (!found) {\n    console.error(\n      `Icons \"${name}\" not found. Make sure that you have register the icon when installing the RuiPlugin`,\n    );\n  }\n  return found;\n});\n</script>\n\n<template>\n  <svg\n    aria-hidden=\"true\"\n    class=\"rui-icon\"\n    :class=\"ui($attrs.class)\"\n    :style=\"sizeStyle\"\n    viewBox=\"0 0 24 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    v-bind=\"objectOmit($attrs, ['class'])\"\n  >\n    <component\n      :is=\"component[0]\"\n      v-for=\"(component, index) in components\"\n      :key=\"index\"\n      v-bind=\"component[1]\"\n      :fill=\"!isFill ? 'none' : 'currentColor'\"\n      :stroke=\"!isFill ? 'currentColor' : 'none'\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      fill-rule=\"evenodd\"\n      clip-rule=\"evenodd\"\n    />\n  </svg>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;EAsBA,MAAM,EAAE,oBAAoB,SAAS;EAerC,MAAM,aAAa,GAAG;GACpB,MAAM;GACN,UAAU,EACR,OAAO;IACL,SAAS;IACT,WAAW;IACX,OAAO;IACP,SAAS;IACT,MAAM;IACN,SAAS;GACX,EACF;EACF,CAAC;EAED,MAAM,kBAAkB,eAAwB,QAAA,SAAS,KAAA,CAAS;EAElE,SAAS,GAAG,YAAgC;GAC1C,OAAO,WAAW;IAAE,OAAI,QAAA;IAAG,OAAO,GAAG,UAAU;GAAE,CAAC;EACpD;;;;;;;;;;;EAYA,MAAM,YAAY,eAAmD;GACnE,IAAI,CAAC,IAAI,eAAe,GACtB,OAAO,KAAA;GACT,MAAM,MAAM,OAAO,QAAA,IAAI;GAEvB,OAAO,EAAE,mBADK,kBAAkB,KAAK,GAAG,IAAI,GAAG,IAAI,MAAM,IACvB;EACpC,CAAC;EAED,MAAM,SAAS,eAAwB,QAAA,KAAK,SAAS,OAAO,CAAC;;;;;;;;;;EAW7D,MAAM,aAAa,eAA2C;GAC5D,MAAM,QAAQ,gBAAgB,QAAA;GAE9B,IAAI,CAAC,OACH,QAAQ,MACN,UAAU,QAAA,KAAK,qFACjB;GAEF,OAAO;EACT,CAAC;;GAIC,OAAA,UAAA,GAAA,mBAqBM,OArBN,WAqBM;IApBJ,eAAY;IACZ,OAAK,CAAC,YACE,GAAGA,KAAAA,OAAO,KAAK,CAAA;IACtB,OAAO,MAAA,SAAA;IACR,SAAQ;IACR,OAAM;GACE,GAAA,MAAA,UAAA,CAAU,CAACA,KAAAA,QAAM,CAAA,OAAA,CAAA,CAAA,GAAA,EAEzB,UAAA,IAAA,GAAA,mBAWE,UAAA,MAAA,WAT6B,MAAA,UAAA,IAArB,WAAW,UAAK;IAF1B,OAAA,UAAA,GAAA,YAWE,wBAVK,UAAS,EAAA,GADhB,WAWE,EARC,KAAK,MAAK,GAAA,EAAA,SAAA,KAAA,GACH,UAAS,IAAA;KAChB,MAAI,CAAG,MAAA,MAAA,IAAM,SAAA;KACb,QAAM,CAAG,MAAA,MAAA,IAAM,iBAAA;KAChB,kBAAe;KACf,mBAAgB;KAChB,aAAU;KACV,aAAU"}
+{"version":3,"file":"RuiIcon.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_openBlock","_createElementBlock","_mergeProps","_unref","_Fragment","_renderList","_createBlock","_resolveDynamicComponent"],"sources":["../../../src/components/icons/RuiIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ClassValue } from 'vue';\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport { objectOmit } from '@vueuse/shared';\nimport { useIcons } from '@/composables/icons';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface Props {\n  name: RuiIcons;\n  size?: number | string;\n  color?: ContextColorsType;\n}\n\ndefineOptions({\n  name: 'RuiIcon',\n  // A fallthrough class would land beside the variant classes and leave the cascade to break the tie; `ui` merges instead\n  inheritAttrs: false,\n});\n\nconst { name, size, color } = defineProps<Props>();\n\nconst { registeredIcons } = useIcons();\n\ntype SvgComponent = [tag: string, attrs: Record<string, string>];\n\n/**\n * The icon's box is always driven by `--rui-icon-size`, so flex shrinking is\n * never wanted: `shrink-0` keeps the size beside a long grow sibling,\n * such as a `w-full` button label in `variant=\"list\"`. Without it the svg is\n * compressed along the main axis while its height stays put, drawing a sliver\n * of a glyph.\n *\n * The stroke is set on the svg as CSS, so `--rui-icon-stroke` can retune it.\n * Lucide's 2 reads heavy beside Inter; 1.5 would draw a 16px glyph at a\n * single, blurry pixel.\n *\n * The svg also carries the default paint, outlined in `currentColor`, and\n * every primitive inherits it unless it sets its own `fill` or `stroke`. That\n * is how lucide draws, so its solid dots (tag, palette) stay solid, and how an\n * icon mixes a stroked outline with a solid mark.\n */\nconst iconStyles = tv({\n  base: 'shrink-0 w-(--rui-icon-size,1.5rem) h-(--rui-icon-size,1.5rem) [stroke-width:var(--rui-icon-stroke,1.75)]',\n  variants: {\n    color: {\n      primary: 'text-rui-primary',\n      secondary: 'text-rui-secondary',\n      error: 'text-rui-error',\n      warning: 'text-rui-warning',\n      info: 'text-rui-info',\n      success: 'text-rui-success',\n    },\n  },\n});\n\nconst hasExplicitSize = computed<boolean>(() => size !== undefined);\n\nfunction ui(attrsClass: ClassValue): string {\n  return iconStyles({ color, class: cn(attrsClass) });\n}\n\n/**\n * The `size` prop as an inline CSS custom property on the svg. Inline style\n * beats any inherited value for the same property on this element, so a\n * consumer's size beats the button's `--rui-icon-size` without !important.\n *\n * A bare number is coerced to px, including the numeric string a template\n * binding like `:size=\"16\"` resolves to, while a value that already carries a\n * unit passes through. CSS needs that coercion; the `width`/`height`\n * presentation attributes this replaced treated bare numbers as px themselves.\n */\nconst sizeStyle = computed<Record<string, string> | undefined>(() => {\n  if (!get(hasExplicitSize))\n    return undefined;\n  const raw = String(size);\n  const value = /^\\d+(?:\\.\\d+)?$/.test(raw) ? `${raw}px` : raw;\n  return { '--rui-icon-size': value };\n});\n\n/**\n * What is registered is the only thing that matters here. An app may register\n * its own icons through `createRui(\\{ theme: \\{ icons \\} \\})`, brand logos\n * among them since the library carries none, and those names never appear in\n * the generated `RuiIcons` list. Validating against that list warned for\n * precisely the icons the registration API exists to support. A genuinely\n * unknown name is still caught by the check that decides whether anything\n * renders.\n */\nconst components = computed<SvgComponent[] | undefined>(() => {\n  const found = registeredIcons[name];\n\n  if (!found) {\n    console.error(\n      `Icons \"${name}\" not found. Make sure that you have register the icon when installing the RuiPlugin`,\n    );\n  }\n  return found;\n});\n</script>\n\n<template>\n  <svg\n    aria-hidden=\"true\"\n    class=\"rui-icon\"\n    :class=\"ui($attrs.class)\"\n    :style=\"sizeStyle\"\n    viewBox=\"0 0 24 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    v-bind=\"objectOmit($attrs, ['class'])\"\n  >\n    <component\n      :is=\"component[0]\"\n      v-for=\"(component, index) in components\"\n      :key=\"index\"\n      v-bind=\"component[1]\"\n    />\n  </svg>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsBA,MAAM,EAAE,oBAAoB,SAAS;EAoBrC,MAAM,aAAa,GAAG;GACpB,MAAM;GACN,UAAU,EACR,OAAO;IACL,SAAS;IACT,WAAW;IACX,OAAO;IACP,SAAS;IACT,MAAM;IACN,SAAS;GACX,EACF;EACF,CAAC;EAED,MAAM,kBAAkB,eAAwB,QAAA,SAAS,KAAA,CAAS;EAElE,SAAS,GAAG,YAAgC;GAC1C,OAAO,WAAW;IAAE,OAAI,QAAA;IAAG,OAAO,GAAG,UAAU;GAAE,CAAC;EACpD;;;;;;;;;;;EAYA,MAAM,YAAY,eAAmD;GACnE,IAAI,CAAC,IAAI,eAAe,GACtB,OAAO,KAAA;GACT,MAAM,MAAM,OAAO,QAAA,IAAI;GAEvB,OAAO,EAAE,mBADK,kBAAkB,KAAK,GAAG,IAAI,GAAG,IAAI,MAAM,IACvB;EACpC,CAAC;;;;;;;;;;EAWD,MAAM,aAAa,eAA2C;GAC5D,MAAM,QAAQ,gBAAgB,QAAA;GAE9B,IAAI,CAAC,OACH,QAAQ,MACN,UAAU,QAAA,KAAK,qFACjB;GAEF,OAAO;EACT,CAAC;;GAIC,OAAAC,UAAA,GAAAC,mBAmBM,OAnBNC,WAmBM;IAlBJ,eAAY;IACZ,OAAK,CAAC,YACE,GAAGH,KAAAA,OAAO,KAAK,CAAA;IACtB,OAAOI,MAAA,SAAA;IACR,SAAQ;IACR,OAAM;IACN,MAAK;IACL,QAAO;IACP,kBAAe;IACf,mBAAgB;GACR,GAAAA,MAAA,UAAA,CAAU,CAACJ,KAAAA,QAAM,CAAA,OAAA,CAAA,CAAA,GAAA,EAEzBC,UAAA,IAAA,GAAAC,mBAKEG,UAAA,MAAAC,WAH6BF,MAAA,UAAA,IAArB,WAAW,UAAK;IAF1B,OAAAH,UAAA,GAAAM,YAKEC,wBAJK,UAAS,EAAA,GADhBL,WAKE,EAFC,KAAK,MAAK,GAAA,EAAA,SAAA,KAAA,GACH,UAAS,EAAA,GAAA,MAAA,EAAA"}

package/dist/components/index.d.ts

@@ -1,59 +1,59 @@
-import type { AutoCompleteProps, RuiAutoCompleteClassNames } from './forms/auto-complete/auto-complete-props';
-import type { TableColumn as DataTableColumn, GroupKeys as DataTableGroupKeys, SortColumn as DataTableSortColumn, TableSortData as DataTableSortData, GroupData } from './tables/RuiTableHead.vue';
-import RuiAccordion, { type AccordionProps, type RuiAccordionClassNames } from './accordions/accordion/RuiAccordion.vue';
-import RuiAccordions, { type Props as AccordionsProps } from './accordions/accordions/RuiAccordions.vue';
-import RuiAlert, { type Props as AlertProps } from './alerts/RuiAlert.vue';
-import RuiAvatar, { type Props as AvatarProps } from './avatars/RuiAvatar.vue';
-import RuiAvatarGroup, { type Props as AvatarGroupProps } from './avatars/RuiAvatarGroup.vue';
-import RuiButtonGroup, { type Props as ButtonGroupProps } from './buttons/button-group/RuiButtonGroup.vue';
-import RuiButton, { type Props as ButtonProps } from './buttons/button/RuiButton.vue';
-import RuiCalendar, { type CalendarProps } from './calendar/RuiCalendar.vue';
-import RuiCard, { type Props as CardProps, type RuiCardClassNames } from './cards/RuiCard.vue';
-import RuiCardHeader, { type Props as CardHeaderProps } from './cards/RuiCardHeader.vue';
-import RuiChip, { type Props as ChipProps, type RuiChipClassNames } from './chips/RuiChip.vue';
-import RuiColorPicker from './color-picker/RuiColorPicker.vue';
-import RuiDateTimePicker, { type RuiDateTimePickerProps } from './date-time-picker/RuiDateTimePicker.vue';
-import RuiTimezoneSelect, { type RuiTimezoneSelectProps } from './date-time-picker/RuiTimezoneSelect.vue';
-import RuiDivider, { type Props as DividerProps } from './divider/RuiDivider.vue';
-import RuiAutoComplete from './forms/auto-complete/RuiAutoComplete.vue';
-import RuiCategoryPicker, { type RuiCategoryPickerClassNames, type RuiCategoryPickerProps } from './forms/category-picker/RuiCategoryPicker.vue';
-import RuiCheckboxGroup, { type Props as CheckboxGroupProps } from './forms/checkbox/checkbox-group/RuiCheckboxGroup.vue';
-import RuiCheckbox, { type Props as CheckboxProps } from './forms/checkbox/RuiCheckbox.vue';
-import RuiFieldDefaults, { type FieldDefaultsProps } from './forms/field-defaults/RuiFieldDefaults.vue';
-import RuiFileUpload, { type FileUploadProps } from './forms/file-upload/RuiFileUpload.vue';
-import RuiRadioGroup, { type Props as RadioGroupProps } from './forms/radio-button/radio-group/RuiRadioGroup.vue';
-import RuiRadio, { type RadioProps } from './forms/radio-button/radio/RuiRadio.vue';
-import RuiRevealableTextField, { type Props as RevealableTextFieldProps } from './forms/revealable-text-field/RuiRevealableTextField.vue';
-import RuiMenuSelect, { type MenuSelectProps, type RuiMenuSelectClassNames } from './forms/select/RuiMenuSelect.vue';
-import RuiSimpleSelect, { type Props as SimpleSelectProps } from './forms/select/RuiSimpleSelect.vue';
-import RuiSlider, { type RuiSliderClassNames, type Props as SliderProps } from './forms/slider/RuiSlider.vue';
-import RuiSwitch, { type Props as SwitchProps } from './forms/switch/RuiSwitch.vue';
-import RuiTextArea, { type TextAreaProps } from './forms/text-area/RuiTextArea.vue';
-import RuiTextField, { type TextFieldProps } from './forms/text-field/RuiTextField.vue';
-import RuiIcon, { type Props as IconProps } from './icons/RuiIcon.vue';
-import RuiSkeletonLoader, { type Props as SkeletonLoaderProps } from './loaders/RuiSkeletonLoader.vue';
-import RuiLogo, { type Props as LogoProps } from './logos/RuiLogo.vue';
-import RuiBadge, { type Props as BadgeProps } from './overlays/badge/RuiBadge.vue';
-import RuiBottomSheet, { type BottomSheetProps } from './overlays/bottom-sheet/RuiBottomSheet.vue';
-import RuiDialog, { type DialogProps, type RuiDialogClassNames } from './overlays/dialog/RuiDialog.vue';
-import RuiMenu, { type MenuProps, type RuiMenuClassNames, type RuiMenuRole } from './overlays/menu/RuiMenu.vue';
-import RuiNavigationDrawer, { type NavigationDrawerProps, type RuiNavigationDrawerClassNames } from './overlays/navigation-drawer/RuiNavigationDrawer.vue';
-import RuiNotification, { type NotificationProps } from './overlays/notification/RuiNotification.vue';
-import RuiTooltip, { type RuiTooltipClassNames, type Props as TooltipProps } from './overlays/tooltip/RuiTooltip.vue';
-import RuiProgress, { type Props as ProgressProps } from './progress/RuiProgress.vue';
-import RuiFooterStepper, { type Props as FooterStepperProps } from './steppers/RuiFooterStepper.vue';
-import RuiStepper, { type RuiStepperClassNames, type Props as StepperProps } from './steppers/RuiStepper.vue';
-import RuiDataTable, { type TableOptions as DataTableOptions, type Props as DataTableProps } from './tables/RuiDataTable.vue';
-import RuiTableRowExpander, { type Props as ExpandButtonProps } from './tables/RuiExpandButton.vue';
-import RuiTable, { type TableEmpty, type Props as TableProps } from './tables/RuiTable.vue';
-import RuiTableEmptyState, { type TableEmptyStateProps } from './tables/RuiTableEmptyState.vue';
-import RuiTableErrorState, { type TableErrorStateProps } from './tables/RuiTableErrorState.vue';
-import RuiTableLoadingState, { type TableLoadingStateProps } from './tables/RuiTableLoadingState.vue';
-import RuiTablePagination, { type TablePaginationData, type Props as TablePaginationProps } from './tables/RuiTablePagination.vue';
-import RuiTabItem, { type Props as TabItemProps } from './tabs/tab-item/RuiTabItem.vue';
-import RuiTabItems from './tabs/tab-items/RuiTabItems.vue';
-import RuiTab, { type RuiTabClassNames, type Props as TabProps } from './tabs/tab/RuiTab.vue';
-import RuiTabs, { type Props as TabsProps } from './tabs/tabs/RuiTabs.vue';
-import RuiTimePicker, { type RuiTimePickerProps } from './time-picker/RuiTimePicker.vue';
+import type { AutoCompleteProps, RuiAutoCompleteClassNames } from './forms/auto-complete/auto-complete-props.js';
+import type { TableColumn as DataTableColumn, GroupKeys as DataTableGroupKeys, SortColumn as DataTableSortColumn, TableSortData as DataTableSortData, GroupData } from './tables/RuiTableHead.vue.js';
+import RuiAccordion, { type AccordionProps, type RuiAccordionClassNames } from './accordions/accordion/RuiAccordion.vue.js';
+import RuiAccordions, { type Props as AccordionsProps } from './accordions/accordions/RuiAccordions.vue.js';
+import RuiAlert, { type Props as AlertProps } from './alerts/RuiAlert.vue.js';
+import RuiAvatar, { type Props as AvatarProps } from './avatars/RuiAvatar.vue.js';
+import RuiAvatarGroup, { type Props as AvatarGroupProps } from './avatars/RuiAvatarGroup.vue.js';
+import RuiButtonGroup, { type Props as ButtonGroupProps } from './buttons/button-group/RuiButtonGroup.vue.js';
+import RuiButton, { type Props as ButtonProps } from './buttons/button/RuiButton.vue.js';
+import RuiCalendar, { type CalendarProps } from './calendar/RuiCalendar.vue.js';
+import RuiCard, { type Props as CardProps, type RuiCardClassNames } from './cards/RuiCard.vue.js';
+import RuiCardHeader, { type Props as CardHeaderProps } from './cards/RuiCardHeader.vue.js';
+import RuiChip, { type Props as ChipProps, type RuiChipClassNames } from './chips/RuiChip.vue.js';
+import RuiColorPicker from './color-picker/RuiColorPicker.vue.js';
+import RuiDateTimePicker, { type RuiDateTimePickerProps } from './date-time-picker/RuiDateTimePicker.vue.js';
+import RuiTimezoneSelect, { type RuiTimezoneSelectProps } from './date-time-picker/RuiTimezoneSelect.vue.js';
+import RuiDivider, { type Props as DividerProps } from './divider/RuiDivider.vue.js';
+import RuiAutoComplete from './forms/auto-complete/RuiAutoComplete.vue.js';
+import RuiCategoryPicker, { type RuiCategoryPickerClassNames, type RuiCategoryPickerProps } from './forms/category-picker/RuiCategoryPicker.vue.js';
+import RuiCheckboxGroup, { type Props as CheckboxGroupProps } from './forms/checkbox/checkbox-group/RuiCheckboxGroup.vue.js';
+import RuiCheckbox, { type Props as CheckboxProps } from './forms/checkbox/RuiCheckbox.vue.js';
+import RuiFieldDefaults, { type FieldDefaultsProps } from './forms/field-defaults/RuiFieldDefaults.vue.js';
+import RuiFileUpload, { type FileUploadProps } from './forms/file-upload/RuiFileUpload.vue.js';
+import RuiRadioGroup, { type Props as RadioGroupProps } from './forms/radio-button/radio-group/RuiRadioGroup.vue.js';
+import RuiRadio, { type RadioProps } from './forms/radio-button/radio/RuiRadio.vue.js';
+import RuiRevealableTextField, { type Props as RevealableTextFieldProps } from './forms/revealable-text-field/RuiRevealableTextField.vue.js';
+import RuiMenuSelect, { type MenuSelectProps, type RuiMenuSelectClassNames } from './forms/select/RuiMenuSelect.vue.js';
+import RuiSimpleSelect, { type Props as SimpleSelectProps } from './forms/select/RuiSimpleSelect.vue.js';
+import RuiSlider, { type RuiSliderClassNames, type Props as SliderProps } from './forms/slider/RuiSlider.vue.js';
+import RuiSwitch, { type Props as SwitchProps } from './forms/switch/RuiSwitch.vue.js';
+import RuiTextArea, { type TextAreaProps } from './forms/text-area/RuiTextArea.vue.js';
+import RuiTextField, { type TextFieldProps } from './forms/text-field/RuiTextField.vue.js';
+import RuiIcon, { type Props as IconProps } from './icons/RuiIcon.vue.js';
+import RuiSkeletonLoader, { type Props as SkeletonLoaderProps } from './loaders/RuiSkeletonLoader.vue.js';
+import RuiLogo, { type Props as LogoProps } from './logos/RuiLogo.vue.js';
+import RuiBadge, { type Props as BadgeProps } from './overlays/badge/RuiBadge.vue.js';
+import RuiBottomSheet, { type BottomSheetProps } from './overlays/bottom-sheet/RuiBottomSheet.vue.js';
+import RuiDialog, { type DialogProps, type RuiDialogClassNames } from './overlays/dialog/RuiDialog.vue.js';
+import RuiMenu, { type MenuProps, type RuiMenuClassNames, type RuiMenuRole } from './overlays/menu/RuiMenu.vue.js';
+import RuiNavigationDrawer, { type NavigationDrawerProps, type RuiNavigationDrawerClassNames } from './overlays/navigation-drawer/RuiNavigationDrawer.vue.js';
+import RuiNotification, { type NotificationProps } from './overlays/notification/RuiNotification.vue.js';
+import RuiTooltip, { type RuiTooltipClassNames, type Props as TooltipProps } from './overlays/tooltip/RuiTooltip.vue.js';
+import RuiProgress, { type Props as ProgressProps } from './progress/RuiProgress.vue.js';
+import RuiFooterStepper, { type Props as FooterStepperProps } from './steppers/RuiFooterStepper.vue.js';
+import RuiStepper, { type RuiStepperClassNames, type Props as StepperProps } from './steppers/RuiStepper.vue.js';
+import RuiDataTable, { type TableOptions as DataTableOptions, type Props as DataTableProps } from './tables/RuiDataTable.vue.js';
+import RuiTableRowExpander, { type Props as ExpandButtonProps } from './tables/RuiExpandButton.vue.js';
+import RuiTable, { type TableEmpty, type Props as TableProps } from './tables/RuiTable.vue.js';
+import RuiTableEmptyState, { type TableEmptyStateProps } from './tables/RuiTableEmptyState.vue.js';
+import RuiTableErrorState, { type TableErrorStateProps } from './tables/RuiTableErrorState.vue.js';
+import RuiTableLoadingState, { type TableLoadingStateProps } from './tables/RuiTableLoadingState.vue.js';
+import RuiTablePagination, { type TablePaginationData, type Props as TablePaginationProps } from './tables/RuiTablePagination.vue.js';
+import RuiTabItem, { type Props as TabItemProps } from './tabs/tab-item/RuiTabItem.vue.js';
+import RuiTabItems from './tabs/tab-items/RuiTabItems.vue.js';
+import RuiTab, { type RuiTabClassNames, type Props as TabProps } from './tabs/tab/RuiTab.vue.js';
+import RuiTabs, { type Props as TabsProps } from './tabs/tabs/RuiTabs.vue.js';
+import RuiTimePicker, { type RuiTimePickerProps } from './time-picker/RuiTimePicker.vue.js';
 export type { AccordionProps, AccordionsProps, AlertProps, AutoCompleteProps, AvatarGroupProps, AvatarProps, BadgeProps, BottomSheetProps, ButtonGroupProps, ButtonProps, CalendarProps, CardHeaderProps, CardProps, CheckboxGroupProps, CheckboxProps, ChipProps, DataTableColumn, DataTableGroupKeys, DataTableOptions, DataTableProps, DataTableSortColumn, DataTableSortData, DialogProps, DividerProps, ExpandButtonProps, FieldDefaultsProps, FileUploadProps, FooterStepperProps, GroupData, IconProps, LogoProps, MenuProps, MenuSelectProps, NavigationDrawerProps, NotificationProps, ProgressProps, RadioGroupProps, RadioProps, RevealableTextFieldProps, RuiAccordionClassNames, RuiAutoCompleteClassNames, RuiCardClassNames, RuiCategoryPickerClassNames, RuiCategoryPickerProps, RuiChipClassNames, RuiDateTimePickerProps, RuiDialogClassNames, RuiMenuClassNames, RuiMenuRole, RuiMenuSelectClassNames, RuiNavigationDrawerClassNames, RuiSliderClassNames, RuiStepperClassNames, RuiTabClassNames, RuiTimePickerProps, RuiTimezoneSelectProps, RuiTooltipClassNames, SimpleSelectProps, SkeletonLoaderProps, SliderProps, StepperProps, SwitchProps, TabItemProps, TableEmpty, TableEmptyStateProps, TableErrorStateProps, TableLoadingStateProps, TablePaginationData, TablePaginationProps, TableProps, TabProps, TabsProps, TextAreaProps, TextFieldProps, TooltipProps, };
 export { RuiAccordion, RuiAccordions, RuiAlert, RuiAutoComplete, RuiAvatar, RuiAvatarGroup, RuiBadge, RuiBottomSheet, RuiButton, RuiButtonGroup, RuiCalendar, RuiCard, RuiCardHeader, RuiCategoryPicker, RuiCheckbox, RuiCheckboxGroup, RuiChip, RuiColorPicker, RuiDataTable, RuiDateTimePicker, RuiDialog, RuiDivider, RuiFieldDefaults, RuiFileUpload, RuiFooterStepper, RuiIcon, RuiLogo, RuiMenu, RuiMenuSelect, RuiNavigationDrawer, RuiNotification, RuiProgress, RuiRadio, RuiRadioGroup, RuiRevealableTextField, RuiSimpleSelect, RuiSkeletonLoader, RuiSlider, RuiStepper, RuiSwitch, RuiTab, RuiTabItem, RuiTabItems, RuiTable, RuiTableEmptyState, RuiTableErrorState, RuiTableLoadingState, RuiTablePagination, RuiTableRowExpander, RuiTabs, RuiTextArea, RuiTextField, RuiTimePicker, RuiTimezoneSelect, RuiTooltip, };

package/dist/components/loaders/RuiSkeletonBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiSkeletonBase.js","names":[],"sources":["../../../src/components/loaders/RuiSkeletonBase.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';\n}\n\ndefineOptions({\n  name: 'RuiSkeletonLoaderBase',\n});\n\nconst { rounded } = defineProps<Props>();\n\nconst skeleton = tv({\n  // zinc steps rather than translucent black and white, which in dark came out lighter than any surface\n  base: 'animate-pulse bg-rui-neutral-200 dark:bg-rui-neutral-800',\n  variants: {\n    rounded: {\n      none: 'rounded-none',\n      sm: 'rounded-xs',\n      md: 'rounded-rui-control',\n      lg: 'rounded-rui-card',\n      full: 'rounded-full',\n    },\n  },\n});\n\nconst ui = computed<string>(() => skeleton({ rounded }));\n</script>\n\n<template>\n  <!-- decoration only: an alert role made a screen reader announce every bar -->\n  <div\n    :class=\"ui\"\n    data-id=\"skeleton\"\n    aria-hidden=\"true\"\n  />\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiSkeletonBase.js","names":["_sfc_main"],"sources":["../../../src/components/loaders/RuiSkeletonBase.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';\n}\n\ndefineOptions({\n  name: 'RuiSkeletonLoaderBase',\n});\n\nconst { rounded } = defineProps<Props>();\n\nconst skeleton = tv({\n  // zinc steps rather than translucent black and white, which in dark came out lighter than any surface\n  base: 'animate-pulse bg-rui-neutral-200 dark:bg-rui-neutral-800',\n  variants: {\n    rounded: {\n      none: 'rounded-none',\n      sm: 'rounded-xs',\n      md: 'rounded-rui-control',\n      lg: 'rounded-rui-card',\n      full: 'rounded-full',\n    },\n  },\n});\n\nconst ui = computed<string>(() => skeleton({ rounded }));\n</script>\n\n<template>\n  <!-- decoration only: an alert role made a screen reader announce every bar -->\n  <div\n    :class=\"ui\"\n    data-id=\"skeleton\"\n    aria-hidden=\"true\"\n  />\n</template>\n"],"mappings":""}

package/dist/components/loaders/RuiSkeletonBase.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiSkeletonBase.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/loaders/RuiSkeletonBase.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';\n}\n\ndefineOptions({\n  name: 'RuiSkeletonLoaderBase',\n});\n\nconst { rounded } = defineProps<Props>();\n\nconst skeleton = tv({\n  // zinc steps rather than translucent black and white, which in dark came out lighter than any surface\n  base: 'animate-pulse bg-rui-neutral-200 dark:bg-rui-neutral-800',\n  variants: {\n    rounded: {\n      none: 'rounded-none',\n      sm: 'rounded-xs',\n      md: 'rounded-rui-control',\n      lg: 'rounded-rui-card',\n      full: 'rounded-full',\n    },\n  },\n});\n\nconst ui = computed<string>(() => skeleton({ rounded }));\n</script>\n\n<template>\n  <!-- decoration only: an alert role made a screen reader announce every bar -->\n  <div\n    :class=\"ui\"\n    data-id=\"skeleton\"\n    aria-hidden=\"true\"\n  />\n</template>\n"],"mappings":";;;;;;;;EAaA,MAAM,WAAW,GAAG;GAElB,MAAM;GACN,UAAU,EACR,SAAS;IACP,MAAM;IACN,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,MAAM;GACR,EACF;EACF,CAAC;EAED,MAAM,KAAK,eAAuB,SAAS,EAAE,SAAM,QAAA,QAAE,CAAC,CAAC;;GAKrD,OAAA,UAAA,GAAA,mBAIE,OAAA;IAHC,OAAK,eAAE,MAAA,EAAA,CAAE;IACV,WAAQ;IACR,eAAY"}
+{"version":3,"file":"RuiSkeletonBase.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_unref"],"sources":["../../../src/components/loaders/RuiSkeletonBase.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';\n}\n\ndefineOptions({\n  name: 'RuiSkeletonLoaderBase',\n});\n\nconst { rounded } = defineProps<Props>();\n\nconst skeleton = tv({\n  // zinc steps rather than translucent black and white, which in dark came out lighter than any surface\n  base: 'animate-pulse bg-rui-neutral-200 dark:bg-rui-neutral-800',\n  variants: {\n    rounded: {\n      none: 'rounded-none',\n      sm: 'rounded-xs',\n      md: 'rounded-rui-control',\n      lg: 'rounded-rui-card',\n      full: 'rounded-full',\n    },\n  },\n});\n\nconst ui = computed<string>(() => skeleton({ rounded }));\n</script>\n\n<template>\n  <!-- decoration only: an alert role made a screen reader announce every bar -->\n  <div\n    :class=\"ui\"\n    data-id=\"skeleton\"\n    aria-hidden=\"true\"\n  />\n</template>\n"],"mappings":";;;;;;;;EAaA,MAAM,WAAW,GAAG;GAElB,MAAM;GACN,UAAU,EACR,SAAS;IACP,MAAM;IACN,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,MAAM;GACR,EACF;EACF,CAAC;EAED,MAAM,KAAK,eAAuB,SAAS,EAAE,SAAM,QAAA,QAAE,CAAC,CAAC;;GAKrD,OAAAA,UAAA,GAAAC,mBAIE,OAAA;IAHC,OAAKC,eAAEC,MAAA,EAAA,CAAE;IACV,WAAQ;IACR,eAAY"}

package/dist/components/loaders/RuiSkeletonLoader.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiSkeletonLoader.js","names":[],"sources":["../../../src/components/loaders/RuiSkeletonLoader.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiSkeletonBase, {\n  type Props as SkeletonBaseProps,\n} from '@/components/loaders/RuiSkeletonBase.vue';\nimport { SkeletonType } from '@/components/loaders/skeleton-type';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface Props extends SkeletonBaseProps {\n  type?: SkeletonType;\n}\n\ndefineOptions({\n  name: 'RuiSkeletonLoader',\n  inheritAttrs: false,\n});\n\nconst { type = SkeletonType.TEXT, rounded } = defineProps<Props>();\n\nconst multiLineTypes: SkeletonType[] = [SkeletonType.PARAGRAPH, SkeletonType.ARTICLE];\n\nconst skeletonType = tv({\n  variants: {\n    type: {\n      [SkeletonType.CUSTOM]: 'box-border',\n      [SkeletonType.TEXT]: 'w-full h-4 rounded-rui-control',\n      [SkeletonType.HEADING]: 'w-full h-6 rounded-rui-control',\n      [SkeletonType.BUTTON]: 'w-full max-w-24 h-9 rounded-rui-control',\n      [SkeletonType.ICON]: 'w-6 h-6 rounded-full',\n      [SkeletonType.AVATAR]: 'w-10 h-10 rounded-full',\n      [SkeletonType.THUMBNAIL]: 'w-14 h-14 rounded-xs',\n      [SkeletonType.PARAGRAPH]: 'flex flex-col gap-2',\n      [SkeletonType.ARTICLE]: 'flex flex-col gap-2',\n    },\n  },\n});\n\nconst attrs = useAttrs();\nconst ui = computed<string>(() => skeletonType({ type, class: cn(attrs.class) }));\nconst isMultiLine = computed<boolean>(() => multiLineTypes.includes(type));\n</script>\n\n<template>\n  <RuiSkeletonBase\n    v-if=\"!isMultiLine\"\n    :class=\"ui\"\n    :rounded=\"rounded\"\n    v-bind=\"{ ...attrs, class: undefined }\"\n  />\n  <div\n    v-else\n    :class=\"ui\"\n    v-bind=\"{ ...attrs, class: undefined }\"\n  >\n    <RuiSkeletonBase\n      v-if=\"type === SkeletonType.ARTICLE\"\n      class=\"w-full h-6 rounded-rui-control mb-1\"\n      :rounded=\"rounded\"\n    />\n    <RuiSkeletonBase\n      class=\"w-full h-3 rounded-rui-control\"\n      :rounded=\"rounded\"\n    />\n    <RuiSkeletonBase\n      class=\"w-full h-3 rounded-rui-control max-w-[80%]\"\n      :rounded=\"rounded\"\n    />\n    <RuiSkeletonBase\n      class=\"w-full h-3 rounded-rui-control max-w-[90%]\"\n      :rounded=\"rounded\"\n    />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiSkeletonLoader.js","names":["_sfc_main"],"sources":["../../../src/components/loaders/RuiSkeletonLoader.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiSkeletonBase, {\n  type Props as SkeletonBaseProps,\n} from '@/components/loaders/RuiSkeletonBase.vue';\nimport { SkeletonType } from '@/components/loaders/skeleton-type';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface Props extends SkeletonBaseProps {\n  type?: SkeletonType;\n}\n\ndefineOptions({\n  name: 'RuiSkeletonLoader',\n  inheritAttrs: false,\n});\n\nconst { type = SkeletonType.TEXT, rounded } = defineProps<Props>();\n\nconst multiLineTypes: SkeletonType[] = [SkeletonType.PARAGRAPH, SkeletonType.ARTICLE];\n\nconst skeletonType = tv({\n  variants: {\n    type: {\n      [SkeletonType.CUSTOM]: 'box-border',\n      [SkeletonType.TEXT]: 'w-full h-4 rounded-rui-control',\n      [SkeletonType.HEADING]: 'w-full h-6 rounded-rui-control',\n      [SkeletonType.BUTTON]: 'w-full max-w-24 h-9 rounded-rui-control',\n      [SkeletonType.ICON]: 'w-6 h-6 rounded-full',\n      [SkeletonType.AVATAR]: 'w-10 h-10 rounded-full',\n      [SkeletonType.THUMBNAIL]: 'w-14 h-14 rounded-xs',\n      [SkeletonType.PARAGRAPH]: 'flex flex-col gap-2',\n      [SkeletonType.ARTICLE]: 'flex flex-col gap-2',\n    },\n  },\n});\n\nconst attrs = useAttrs();\nconst ui = computed<string>(() => skeletonType({ type, class: cn(attrs.class) }));\nconst isMultiLine = computed<boolean>(() => multiLineTypes.includes(type));\n</script>\n\n<template>\n  <RuiSkeletonBase\n    v-if=\"!isMultiLine\"\n    :class=\"ui\"\n    :rounded=\"rounded\"\n    v-bind=\"{ ...attrs, class: undefined }\"\n  />\n  <div\n    v-else\n    :class=\"ui\"\n    v-bind=\"{ ...attrs, class: undefined }\"\n  >\n    <RuiSkeletonBase\n      v-if=\"type === SkeletonType.ARTICLE\"\n      class=\"w-full h-6 rounded-rui-control mb-1\"\n      :rounded=\"rounded\"\n    />\n    <RuiSkeletonBase\n      class=\"w-full h-3 rounded-rui-control\"\n      :rounded=\"rounded\"\n    />\n    <RuiSkeletonBase\n      class=\"w-full h-3 rounded-rui-control max-w-[80%]\"\n      :rounded=\"rounded\"\n    />\n    <RuiSkeletonBase\n      class=\"w-full h-3 rounded-rui-control max-w-[90%]\"\n      :rounded=\"rounded\"\n    />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/loaders/RuiSkeletonLoader.vue.d.ts

@@ -1,4 +1,4 @@
-import { type Props as SkeletonBaseProps } from './RuiSkeletonBase.vue';
+import { type Props as SkeletonBaseProps } from './RuiSkeletonBase.vue.js';
 import { SkeletonType } from './skeleton-type.js';
 export interface Props extends SkeletonBaseProps {
     type?: SkeletonType;

package/dist/components/loaders/RuiSkeletonLoader.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiSkeletonLoader.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/loaders/RuiSkeletonLoader.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiSkeletonBase, {\n  type Props as SkeletonBaseProps,\n} from '@/components/loaders/RuiSkeletonBase.vue';\nimport { SkeletonType } from '@/components/loaders/skeleton-type';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface Props extends SkeletonBaseProps {\n  type?: SkeletonType;\n}\n\ndefineOptions({\n  name: 'RuiSkeletonLoader',\n  inheritAttrs: false,\n});\n\nconst { type = SkeletonType.TEXT, rounded } = defineProps<Props>();\n\nconst multiLineTypes: SkeletonType[] = [SkeletonType.PARAGRAPH, SkeletonType.ARTICLE];\n\nconst skeletonType = tv({\n  variants: {\n    type: {\n      [SkeletonType.CUSTOM]: 'box-border',\n      [SkeletonType.TEXT]: 'w-full h-4 rounded-rui-control',\n      [SkeletonType.HEADING]: 'w-full h-6 rounded-rui-control',\n      [SkeletonType.BUTTON]: 'w-full max-w-24 h-9 rounded-rui-control',\n      [SkeletonType.ICON]: 'w-6 h-6 rounded-full',\n      [SkeletonType.AVATAR]: 'w-10 h-10 rounded-full',\n      [SkeletonType.THUMBNAIL]: 'w-14 h-14 rounded-xs',\n      [SkeletonType.PARAGRAPH]: 'flex flex-col gap-2',\n      [SkeletonType.ARTICLE]: 'flex flex-col gap-2',\n    },\n  },\n});\n\nconst attrs = useAttrs();\nconst ui = computed<string>(() => skeletonType({ type, class: cn(attrs.class) }));\nconst isMultiLine = computed<boolean>(() => multiLineTypes.includes(type));\n</script>\n\n<template>\n  <RuiSkeletonBase\n    v-if=\"!isMultiLine\"\n    :class=\"ui\"\n    :rounded=\"rounded\"\n    v-bind=\"{ ...attrs, class: undefined }\"\n  />\n  <div\n    v-else\n    :class=\"ui\"\n    v-bind=\"{ ...attrs, class: undefined }\"\n  >\n    <RuiSkeletonBase\n      v-if=\"type === SkeletonType.ARTICLE\"\n      class=\"w-full h-6 rounded-rui-control mb-1\"\n      :rounded=\"rounded\"\n    />\n    <RuiSkeletonBase\n      class=\"w-full h-3 rounded-rui-control\"\n      :rounded=\"rounded\"\n    />\n    <RuiSkeletonBase\n      class=\"w-full h-3 rounded-rui-control max-w-[80%]\"\n      :rounded=\"rounded\"\n    />\n    <RuiSkeletonBase\n      class=\"w-full h-3 rounded-rui-control max-w-[90%]\"\n      :rounded=\"rounded\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAkBA,MAAM,iBAAiC,CAAC,aAAa,WAAW,aAAa,OAAO;EAEpF,MAAM,eAAe,GAAG,EACtB,UAAU,EACR,MAAM;IACH,aAAa,SAAS;IACtB,aAAa,OAAO;IACpB,aAAa,UAAU;IACvB,aAAa,SAAS;IACtB,aAAa,OAAO;IACpB,aAAa,SAAS;IACtB,aAAa,YAAY;IACzB,aAAa,YAAY;IACzB,aAAa,UAAU;EAC1B,EACF,EACF,CAAC;EAED,MAAM,QAAQ,SAAS;EACvB,MAAM,KAAK,eAAuB,aAAa;GAAE,MAAG,QAAA;GAAG,OAAO,GAAG,MAAM,KAAK;EAAE,CAAC,CAAC;EAChF,MAAM,cAAc,eAAwB,eAAe,SAAS,QAAA,IAAI,CAAC;;GAK9D,OAAA,CAAA,MAAA,WAAA,KADT,UAAA,GAAA,YAKE,yBALF,WAKE;;IAHC,OAAO,MAAA,EAAA;IACP,SAAS,QAAA;GACG,GAAA;IAAA,GAAA,MAAA,KAAA;IAAK,OAAS,KAAA;GAAS,CAAA,GAAA,MAAA,IAAA,CAAA,SAAA,SAAA,CAAA,MAEtC,UAAA,GAAA,mBAsBM,OAtBN,WAsBM;;IApBH,OAAO,MAAA,EAAA;GACK,GAAA;IAAA,GAAA,MAAA,KAAA;IAAK,OAAS,KAAA;GAAS,CAAA,GAAA;IAG5B,QAAA,SAAS,MAAA,YAAA,CAAY,CAAC,WAD9B,UAAA,GAAA,YAIE,yBAAA;;KAFA,OAAM;KACL,SAAS,QAAA;;IAEZ,YAGE,yBAAA;KAFA,OAAM;KACL,SAAS,QAAA;;IAEZ,YAGE,yBAAA;KAFA,OAAM;KACL,SAAS,QAAA;;IAEZ,YAGE,yBAAA;KAFA,OAAM;KACL,SAAS,QAAA"}
+{"version":3,"file":"RuiSkeletonLoader.vue_vue_type_script_setup_true_lang.js","names":["_unref","_openBlock","_createBlock","RuiSkeletonBase","_mergeProps","_createElementBlock","_createCommentVNode","_createVNode"],"sources":["../../../src/components/loaders/RuiSkeletonLoader.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiSkeletonBase, {\n  type Props as SkeletonBaseProps,\n} from '@/components/loaders/RuiSkeletonBase.vue';\nimport { SkeletonType } from '@/components/loaders/skeleton-type';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface Props extends SkeletonBaseProps {\n  type?: SkeletonType;\n}\n\ndefineOptions({\n  name: 'RuiSkeletonLoader',\n  inheritAttrs: false,\n});\n\nconst { type = SkeletonType.TEXT, rounded } = defineProps<Props>();\n\nconst multiLineTypes: SkeletonType[] = [SkeletonType.PARAGRAPH, SkeletonType.ARTICLE];\n\nconst skeletonType = tv({\n  variants: {\n    type: {\n      [SkeletonType.CUSTOM]: 'box-border',\n      [SkeletonType.TEXT]: 'w-full h-4 rounded-rui-control',\n      [SkeletonType.HEADING]: 'w-full h-6 rounded-rui-control',\n      [SkeletonType.BUTTON]: 'w-full max-w-24 h-9 rounded-rui-control',\n      [SkeletonType.ICON]: 'w-6 h-6 rounded-full',\n      [SkeletonType.AVATAR]: 'w-10 h-10 rounded-full',\n      [SkeletonType.THUMBNAIL]: 'w-14 h-14 rounded-xs',\n      [SkeletonType.PARAGRAPH]: 'flex flex-col gap-2',\n      [SkeletonType.ARTICLE]: 'flex flex-col gap-2',\n    },\n  },\n});\n\nconst attrs = useAttrs();\nconst ui = computed<string>(() => skeletonType({ type, class: cn(attrs.class) }));\nconst isMultiLine = computed<boolean>(() => multiLineTypes.includes(type));\n</script>\n\n<template>\n  <RuiSkeletonBase\n    v-if=\"!isMultiLine\"\n    :class=\"ui\"\n    :rounded=\"rounded\"\n    v-bind=\"{ ...attrs, class: undefined }\"\n  />\n  <div\n    v-else\n    :class=\"ui\"\n    v-bind=\"{ ...attrs, class: undefined }\"\n  >\n    <RuiSkeletonBase\n      v-if=\"type === SkeletonType.ARTICLE\"\n      class=\"w-full h-6 rounded-rui-control mb-1\"\n      :rounded=\"rounded\"\n    />\n    <RuiSkeletonBase\n      class=\"w-full h-3 rounded-rui-control\"\n      :rounded=\"rounded\"\n    />\n    <RuiSkeletonBase\n      class=\"w-full h-3 rounded-rui-control max-w-[80%]\"\n      :rounded=\"rounded\"\n    />\n    <RuiSkeletonBase\n      class=\"w-full h-3 rounded-rui-control max-w-[90%]\"\n      :rounded=\"rounded\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAkBA,MAAM,iBAAiC,CAAC,aAAa,WAAW,aAAa,OAAO;EAEpF,MAAM,eAAe,GAAG,EACtB,UAAU,EACR,MAAM;IACH,aAAa,SAAS;IACtB,aAAa,OAAO;IACpB,aAAa,UAAU;IACvB,aAAa,SAAS;IACtB,aAAa,OAAO;IACpB,aAAa,SAAS;IACtB,aAAa,YAAY;IACzB,aAAa,YAAY;IACzB,aAAa,UAAU;EAC1B,EACF,EACF,CAAC;EAED,MAAM,QAAQ,SAAS;EACvB,MAAM,KAAK,eAAuB,aAAa;GAAE,MAAG,QAAA;GAAG,OAAO,GAAG,MAAM,KAAK;EAAE,CAAC,CAAC;EAChF,MAAM,cAAc,eAAwB,eAAe,SAAS,QAAA,IAAI,CAAC;;GAK9D,OAAA,CAAAA,MAAA,WAAA,KADTC,UAAA,GAAAC,YAKEC,yBALFC,WAKE;;IAHC,OAAOJ,MAAA,EAAA;IACP,SAAS,QAAA;GACG,GAAA;IAAA,GAAAA,MAAA,KAAA;IAAK,OAAS,KAAA;GAAS,CAAA,GAAA,MAAA,IAAA,CAAA,SAAA,SAAA,CAAA,MAEtCC,UAAA,GAAAI,mBAsBM,OAtBND,WAsBM;;IApBH,OAAOJ,MAAA,EAAA;GACK,GAAA;IAAA,GAAAA,MAAA,KAAA;IAAK,OAAS,KAAA;GAAS,CAAA,GAAA;IAG5B,QAAA,SAASA,MAAA,YAAA,CAAY,CAAC,WAD9BC,UAAA,GAAAC,YAIEC,yBAAA;;KAFA,OAAM;KACL,SAAS,QAAA;;IAEZI,YAGEJ,yBAAA;KAFA,OAAM;KACL,SAAS,QAAA;;IAEZI,YAGEJ,yBAAA;KAFA,OAAM;KACL,SAAS,QAAA;;IAEZI,YAGEJ,yBAAA;KAFA,OAAM;KACL,SAAS,QAAA"}

package/dist/components/logos/RuiLogo.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiLogo.js","names":[],"sources":["../../../src/components/logos/RuiLogo.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport fallback from '@/components/logos/logo.svg';\nimport { getVerifiedLogoUrl, removeVerifiedLogoUrl, setVerifiedLogoUrl } from '@/components/logos/verified-logo';\nimport { useLogoOptions } from '@/composables/defaults/logo';\n\nexport interface Props {\n  text?: boolean;\n  /**\n   * Name handed to the `logo.resolve` option of `createRui`. Without a resolver\n   * the bundled logo shows.\n   */\n  logo?: string;\n  size?: string | number; // in rems\n  /**\n   * Appended to the resolved URL as `key`, so each instance loads its own copy.\n   */\n  uniqueKey?: string | number;\n  src?: string;\n}\n\ndefineOptions({\n  name: 'RuiLogo',\n});\n\nconst { text = false, logo, size = 3, uniqueKey, src } = defineProps<Props>();\n\nconst appName = 'rotki';\n\nconst resolvedUrl = ref<string>();\nconst error = ref<boolean>(false);\nconst seasonalReady = ref<boolean>(false);\n\nconst isMounted = ref<boolean>(false);\n\nconst customImageRef = useTemplateRef<HTMLImageElement>('customImageRef');\n\nconst logoOptions = useLogoOptions();\n\nconst externalSource = computed<string | undefined>(() => {\n  if (src)\n    return src;\n\n  const url = get(resolvedUrl);\n  if (!url || uniqueKey === undefined)\n    return url;\n\n  return `${url}${url.includes('?') ? '&' : '?'}key=${uniqueKey}`;\n});\n\nconst showCustom = computed<boolean>(() => !!src || (!!get(externalSource) && get(seasonalReady) && !get(error)));\n\nfunction preloadImage(url: string): void {\n  const existing = document.head.querySelectorAll<HTMLLinkElement>('link[rel=\"preload\"][as=\"image\"]');\n  for (const link of existing) {\n    if (link.href === url)\n      return;\n  }\n\n  const link = document.createElement('link');\n  link.rel = 'preload';\n  link.as = 'image';\n  link.href = url;\n  document.head.appendChild(link);\n}\n\nasync function callResolver(name: string): Promise<string | undefined> {\n  try {\n    return await logoOptions?.resolve(name);\n  }\n  catch {\n    // A failing resolver leaves the bundled logo in place\n    return undefined;\n  }\n}\n\n/**\n * Asks the app's resolver for the logo URL. It runs only after mount, so the\n * server and the client's first render both show the bundled fallback (or\n * `src`) and hydration matches.\n */\nasync function resolveLogo(): Promise<void> {\n  if (!get(isMounted))\n    return;\n\n  if (src || !logo || !logoOptions) {\n    set(resolvedUrl, undefined);\n    return;\n  }\n\n  const name = logo;\n  const url = await callResolver(name);\n\n  // The logo prop changed while the resolver ran; that newer run wins\n  if (name !== logo)\n    return;\n\n  set(error, false);\n  // A URL that already decoded in this session is shown without waiting for it again\n  set(seasonalReady, !!url && getVerifiedLogoUrl(name) === url);\n  set(resolvedUrl, url);\n\n  const source = get(externalSource);\n  if (source)\n    preloadImage(source);\n}\n\nfunction onImageError(): void {\n  set(error, true);\n  if (logo)\n    removeVerifiedLogoUrl(logo);\n}\n\nfunction onImageLoaded(): void {\n  const img = get(customImageRef);\n  if (!img)\n    return;\n\n  img.decode()\n    .then(() => {\n      set(seasonalReady, true);\n      // Remember the decoded URL so the next page load can trust it immediately\n      const url = get(resolvedUrl);\n      if (url && logo)\n        setVerifiedLogoUrl(logo, url);\n    })\n    .catch(() => set(error, true));\n}\n\nwatch(() => get(customImageRef)?.complete, (complete) => {\n  if (complete)\n    onImageLoaded();\n});\n\nwatchEffect(resolveLogo);\n\nonMounted(() => {\n  set(isMounted, true);\n});\n</script>\n\n<template>\n  <div\n    class=\"gap-x-4 flex items-center relative\"\n    :style=\"{ height: `${size}rem` }\"\n  >\n    <div\n      class=\"relative\"\n      :style=\"{ width: `${size}rem`, height: `${size}rem` }\"\n    >\n      <!-- Fallback: always in DOM, fades out when custom image is ready -->\n      <img\n        :src=\"fallback\"\n        :alt=\"appName\"\n        data-image=\"fallback\"\n        class=\"absolute inset-0 h-full w-full transition ease-out duration-200\"\n        :class=\"showCustom ? 'opacity-0' : 'opacity-100'\"\n      />\n\n      <!-- Custom/seasonal image: fades in when decoded -->\n      <img\n        v-if=\"externalSource && !error\"\n        ref=\"customImageRef\"\n        :src=\"externalSource\"\n        :alt=\"appName\"\n        data-image=\"custom\"\n        class=\"absolute inset-0 h-full w-full transition ease-out duration-200\"\n        :class=\"showCustom ? 'opacity-100' : 'opacity-0 pointer-events-none'\"\n        @error=\"onImageError()\"\n        @load=\"onImageLoaded()\"\n      />\n    </div>\n\n    <div\n      v-if=\"text\"\n      class=\"text-h4 text-rui-primary dark:text-rui-text\"\n    >\n      {{ appName }}\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiLogo.js","names":["_sfc_main"],"sources":["../../../src/components/logos/RuiLogo.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport fallback from '@/components/logos/logo.svg';\nimport { getVerifiedLogoUrl, removeVerifiedLogoUrl, setVerifiedLogoUrl } from '@/components/logos/verified-logo';\nimport { useLogoOptions } from '@/composables/defaults/logo';\n\nexport interface Props {\n  text?: boolean;\n  /**\n   * Name handed to the `logo.resolve` option of `createRui`. Without a resolver\n   * the bundled logo shows.\n   */\n  logo?: string;\n  size?: string | number; // in rems\n  /**\n   * Appended to the resolved URL as `key`, so each instance loads its own copy.\n   */\n  uniqueKey?: string | number;\n  src?: string;\n}\n\ndefineOptions({\n  name: 'RuiLogo',\n});\n\nconst { text = false, logo, size = 3, uniqueKey, src } = defineProps<Props>();\n\nconst appName = 'rotki';\n\nconst resolvedUrl = ref<string>();\nconst error = ref<boolean>(false);\nconst seasonalReady = ref<boolean>(false);\n\nconst isMounted = ref<boolean>(false);\n\nconst customImageRef = useTemplateRef<HTMLImageElement>('customImageRef');\n\nconst logoOptions = useLogoOptions();\n\nconst externalSource = computed<string | undefined>(() => {\n  if (src)\n    return src;\n\n  const url = get(resolvedUrl);\n  if (!url || uniqueKey === undefined)\n    return url;\n\n  return `${url}${url.includes('?') ? '&' : '?'}key=${uniqueKey}`;\n});\n\nconst showCustom = computed<boolean>(() => !!src || (!!get(externalSource) && get(seasonalReady) && !get(error)));\n\nfunction preloadImage(url: string): void {\n  const existing = document.head.querySelectorAll<HTMLLinkElement>('link[rel=\"preload\"][as=\"image\"]');\n  for (const link of existing) {\n    if (link.href === url)\n      return;\n  }\n\n  const link = document.createElement('link');\n  link.rel = 'preload';\n  link.as = 'image';\n  link.href = url;\n  document.head.appendChild(link);\n}\n\nasync function callResolver(name: string): Promise<string | undefined> {\n  try {\n    return await logoOptions?.resolve(name);\n  }\n  catch {\n    // A failing resolver leaves the bundled logo in place\n    return undefined;\n  }\n}\n\n/**\n * Asks the app's resolver for the logo URL. It runs only after mount, so the\n * server and the client's first render both show the bundled fallback (or\n * `src`) and hydration matches.\n */\nasync function resolveLogo(): Promise<void> {\n  if (!get(isMounted))\n    return;\n\n  if (src || !logo || !logoOptions) {\n    set(resolvedUrl, undefined);\n    return;\n  }\n\n  const name = logo;\n  const url = await callResolver(name);\n\n  // The logo prop changed while the resolver ran; that newer run wins\n  if (name !== logo)\n    return;\n\n  set(error, false);\n  // A URL that already decoded in this session is shown without waiting for it again\n  set(seasonalReady, !!url && getVerifiedLogoUrl(name) === url);\n  set(resolvedUrl, url);\n\n  const source = get(externalSource);\n  if (source)\n    preloadImage(source);\n}\n\nfunction onImageError(): void {\n  set(error, true);\n  if (logo)\n    removeVerifiedLogoUrl(logo);\n}\n\nfunction onImageLoaded(): void {\n  const img = get(customImageRef);\n  if (!img)\n    return;\n\n  img.decode()\n    .then(() => {\n      set(seasonalReady, true);\n      // Remember the decoded URL so the next page load can trust it immediately\n      const url = get(resolvedUrl);\n      if (url && logo)\n        setVerifiedLogoUrl(logo, url);\n    })\n    .catch(() => set(error, true));\n}\n\nwatch(() => get(customImageRef)?.complete, (complete) => {\n  if (complete)\n    onImageLoaded();\n});\n\nwatchEffect(resolveLogo);\n\nonMounted(() => {\n  set(isMounted, true);\n});\n</script>\n\n<template>\n  <div\n    class=\"gap-x-4 flex items-center relative\"\n    :style=\"{ height: `${size}rem` }\"\n  >\n    <div\n      class=\"relative\"\n      :style=\"{ width: `${size}rem`, height: `${size}rem` }\"\n    >\n      <!-- Fallback: always in DOM, fades out when custom image is ready -->\n      <img\n        :src=\"fallback\"\n        :alt=\"appName\"\n        data-image=\"fallback\"\n        class=\"absolute inset-0 h-full w-full transition ease-out duration-200\"\n        :class=\"showCustom ? 'opacity-0' : 'opacity-100'\"\n      />\n\n      <!-- Custom/seasonal image: fades in when decoded -->\n      <img\n        v-if=\"externalSource && !error\"\n        ref=\"customImageRef\"\n        :src=\"externalSource\"\n        :alt=\"appName\"\n        data-image=\"custom\"\n        class=\"absolute inset-0 h-full w-full transition ease-out duration-200\"\n        :class=\"showCustom ? 'opacity-100' : 'opacity-0 pointer-events-none'\"\n        @error=\"onImageError()\"\n        @load=\"onImageLoaded()\"\n      />\n    </div>\n\n    <div\n      v-if=\"text\"\n      class=\"text-h4 text-rui-primary dark:text-rui-text\"\n    >\n      {{ appName }}\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/logos/RuiLogo.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiLogo.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/logos/RuiLogo.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport fallback from '@/components/logos/logo.svg';\nimport { getVerifiedLogoUrl, removeVerifiedLogoUrl, setVerifiedLogoUrl } from '@/components/logos/verified-logo';\nimport { useLogoOptions } from '@/composables/defaults/logo';\n\nexport interface Props {\n  text?: boolean;\n  /**\n   * Name handed to the `logo.resolve` option of `createRui`. Without a resolver\n   * the bundled logo shows.\n   */\n  logo?: string;\n  size?: string | number; // in rems\n  /**\n   * Appended to the resolved URL as `key`, so each instance loads its own copy.\n   */\n  uniqueKey?: string | number;\n  src?: string;\n}\n\ndefineOptions({\n  name: 'RuiLogo',\n});\n\nconst { text = false, logo, size = 3, uniqueKey, src } = defineProps<Props>();\n\nconst appName = 'rotki';\n\nconst resolvedUrl = ref<string>();\nconst error = ref<boolean>(false);\nconst seasonalReady = ref<boolean>(false);\n\nconst isMounted = ref<boolean>(false);\n\nconst customImageRef = useTemplateRef<HTMLImageElement>('customImageRef');\n\nconst logoOptions = useLogoOptions();\n\nconst externalSource = computed<string | undefined>(() => {\n  if (src)\n    return src;\n\n  const url = get(resolvedUrl);\n  if (!url || uniqueKey === undefined)\n    return url;\n\n  return `${url}${url.includes('?') ? '&' : '?'}key=${uniqueKey}`;\n});\n\nconst showCustom = computed<boolean>(() => !!src || (!!get(externalSource) && get(seasonalReady) && !get(error)));\n\nfunction preloadImage(url: string): void {\n  const existing = document.head.querySelectorAll<HTMLLinkElement>('link[rel=\"preload\"][as=\"image\"]');\n  for (const link of existing) {\n    if (link.href === url)\n      return;\n  }\n\n  const link = document.createElement('link');\n  link.rel = 'preload';\n  link.as = 'image';\n  link.href = url;\n  document.head.appendChild(link);\n}\n\nasync function callResolver(name: string): Promise<string | undefined> {\n  try {\n    return await logoOptions?.resolve(name);\n  }\n  catch {\n    // A failing resolver leaves the bundled logo in place\n    return undefined;\n  }\n}\n\n/**\n * Asks the app's resolver for the logo URL. It runs only after mount, so the\n * server and the client's first render both show the bundled fallback (or\n * `src`) and hydration matches.\n */\nasync function resolveLogo(): Promise<void> {\n  if (!get(isMounted))\n    return;\n\n  if (src || !logo || !logoOptions) {\n    set(resolvedUrl, undefined);\n    return;\n  }\n\n  const name = logo;\n  const url = await callResolver(name);\n\n  // The logo prop changed while the resolver ran; that newer run wins\n  if (name !== logo)\n    return;\n\n  set(error, false);\n  // A URL that already decoded in this session is shown without waiting for it again\n  set(seasonalReady, !!url && getVerifiedLogoUrl(name) === url);\n  set(resolvedUrl, url);\n\n  const source = get(externalSource);\n  if (source)\n    preloadImage(source);\n}\n\nfunction onImageError(): void {\n  set(error, true);\n  if (logo)\n    removeVerifiedLogoUrl(logo);\n}\n\nfunction onImageLoaded(): void {\n  const img = get(customImageRef);\n  if (!img)\n    return;\n\n  img.decode()\n    .then(() => {\n      set(seasonalReady, true);\n      // Remember the decoded URL so the next page load can trust it immediately\n      const url = get(resolvedUrl);\n      if (url && logo)\n        setVerifiedLogoUrl(logo, url);\n    })\n    .catch(() => set(error, true));\n}\n\nwatch(() => get(customImageRef)?.complete, (complete) => {\n  if (complete)\n    onImageLoaded();\n});\n\nwatchEffect(resolveLogo);\n\nonMounted(() => {\n  set(isMounted, true);\n});\n</script>\n\n<template>\n  <div\n    class=\"gap-x-4 flex items-center relative\"\n    :style=\"{ height: `${size}rem` }\"\n  >\n    <div\n      class=\"relative\"\n      :style=\"{ width: `${size}rem`, height: `${size}rem` }\"\n    >\n      <!-- Fallback: always in DOM, fades out when custom image is ready -->\n      <img\n        :src=\"fallback\"\n        :alt=\"appName\"\n        data-image=\"fallback\"\n        class=\"absolute inset-0 h-full w-full transition ease-out duration-200\"\n        :class=\"showCustom ? 'opacity-0' : 'opacity-100'\"\n      />\n\n      <!-- Custom/seasonal image: fades in when decoded -->\n      <img\n        v-if=\"externalSource && !error\"\n        ref=\"customImageRef\"\n        :src=\"externalSource\"\n        :alt=\"appName\"\n        data-image=\"custom\"\n        class=\"absolute inset-0 h-full w-full transition ease-out duration-200\"\n        :class=\"showCustom ? 'opacity-100' : 'opacity-0 pointer-events-none'\"\n        @error=\"onImageError()\"\n        @load=\"onImageLoaded()\"\n      />\n    </div>\n\n    <div\n      v-if=\"text\"\n      class=\"text-h4 text-rui-primary dark:text-rui-text\"\n    >\n      {{ appName }}\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiLogo.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeStyle","_createElementVNode","_unref","fallback","_normalizeClass","_createCommentVNode","_toDisplayString"],"sources":["../../../src/components/logos/RuiLogo.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport fallback from '@/components/logos/logo.svg';\nimport { getVerifiedLogoUrl, removeVerifiedLogoUrl, setVerifiedLogoUrl } from '@/components/logos/verified-logo';\nimport { useLogoOptions } from '@/composables/defaults/logo';\n\nexport interface Props {\n  text?: boolean;\n  /**\n   * Name handed to the `logo.resolve` option of `createRui`. Without a resolver\n   * the bundled logo shows.\n   */\n  logo?: string;\n  size?: string | number; // in rems\n  /**\n   * Appended to the resolved URL as `key`, so each instance loads its own copy.\n   */\n  uniqueKey?: string | number;\n  src?: string;\n}\n\ndefineOptions({\n  name: 'RuiLogo',\n});\n\nconst { text = false, logo, size = 3, uniqueKey, src } = defineProps<Props>();\n\nconst appName = 'rotki';\n\nconst resolvedUrl = ref<string>();\nconst error = ref<boolean>(false);\nconst seasonalReady = ref<boolean>(false);\n\nconst isMounted = ref<boolean>(false);\n\nconst customImageRef = useTemplateRef<HTMLImageElement>('customImageRef');\n\nconst logoOptions = useLogoOptions();\n\nconst externalSource = computed<string | undefined>(() => {\n  if (src)\n    return src;\n\n  const url = get(resolvedUrl);\n  if (!url || uniqueKey === undefined)\n    return url;\n\n  return `${url}${url.includes('?') ? '&' : '?'}key=${uniqueKey}`;\n});\n\nconst showCustom = computed<boolean>(() => !!src || (!!get(externalSource) && get(seasonalReady) && !get(error)));\n\nfunction preloadImage(url: string): void {\n  const existing = document.head.querySelectorAll<HTMLLinkElement>('link[rel=\"preload\"][as=\"image\"]');\n  for (const link of existing) {\n    if (link.href === url)\n      return;\n  }\n\n  const link = document.createElement('link');\n  link.rel = 'preload';\n  link.as = 'image';\n  link.href = url;\n  document.head.appendChild(link);\n}\n\nasync function callResolver(name: string): Promise<string | undefined> {\n  try {\n    return await logoOptions?.resolve(name);\n  }\n  catch {\n    // A failing resolver leaves the bundled logo in place\n    return undefined;\n  }\n}\n\n/**\n * Asks the app's resolver for the logo URL. It runs only after mount, so the\n * server and the client's first render both show the bundled fallback (or\n * `src`) and hydration matches.\n */\nasync function resolveLogo(): Promise<void> {\n  if (!get(isMounted))\n    return;\n\n  if (src || !logo || !logoOptions) {\n    set(resolvedUrl, undefined);\n    return;\n  }\n\n  const name = logo;\n  const url = await callResolver(name);\n\n  // The logo prop changed while the resolver ran; that newer run wins\n  if (name !== logo)\n    return;\n\n  set(error, false);\n  // A URL that already decoded in this session is shown without waiting for it again\n  set(seasonalReady, !!url && getVerifiedLogoUrl(name) === url);\n  set(resolvedUrl, url);\n\n  const source = get(externalSource);\n  if (source)\n    preloadImage(source);\n}\n\nfunction onImageError(): void {\n  set(error, true);\n  if (logo)\n    removeVerifiedLogoUrl(logo);\n}\n\nfunction onImageLoaded(): void {\n  const img = get(customImageRef);\n  if (!img)\n    return;\n\n  img.decode()\n    .then(() => {\n      set(seasonalReady, true);\n      // Remember the decoded URL so the next page load can trust it immediately\n      const url = get(resolvedUrl);\n      if (url && logo)\n        setVerifiedLogoUrl(logo, url);\n    })\n    .catch(() => set(error, true));\n}\n\nwatch(() => get(customImageRef)?.complete, (complete) => {\n  if (complete)\n    onImageLoaded();\n});\n\nwatchEffect(resolveLogo);\n\nonMounted(() => {\n  set(isMounted, true);\n});\n</script>\n\n<template>\n  <div\n    class=\"gap-x-4 flex items-center relative\"\n    :style=\"{ height: `${size}rem` }\"\n  >\n    <div\n      class=\"relative\"\n      :style=\"{ width: `${size}rem`, height: `${size}rem` }\"\n    >\n      <!-- Fallback: always in DOM, fades out when custom image is ready -->\n      <img\n        :src=\"fallback\"\n        :alt=\"appName\"\n        data-image=\"fallback\"\n        class=\"absolute inset-0 h-full w-full transition ease-out duration-200\"\n        :class=\"showCustom ? 'opacity-0' : 'opacity-100'\"\n      />\n\n      <!-- Custom/seasonal image: fades in when decoded -->\n      <img\n        v-if=\"externalSource && !error\"\n        ref=\"customImageRef\"\n        :src=\"externalSource\"\n        :alt=\"appName\"\n        data-image=\"custom\"\n        class=\"absolute inset-0 h-full w-full transition ease-out duration-200\"\n        :class=\"showCustom ? 'opacity-100' : 'opacity-0 pointer-events-none'\"\n        @error=\"onImageError()\"\n        @load=\"onImageLoaded()\"\n      />\n    </div>\n\n    <div\n      v-if=\"text\"\n      class=\"text-h4 text-rui-primary dark:text-rui-text\"\n    >\n      {{ appName }}\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/overlays/badge/RuiBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiBadge.js","names":[],"sources":["../../../../src/components/overlays/badge/RuiBadge.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { BadgePlacement, BadgeRounded, BadgeSize } from '@/components/overlays/badge/badge-props';\nimport { tv } from '@/utils/tv';\n\ntype PosConfig = [left: number, right: string, edge: string, center: number];\n\nexport interface Props {\n  text?: string | null;\n  icon?: RuiIcons | null;\n  modelValue?: boolean;\n  dot?: boolean;\n  left?: boolean;\n  offsetX?: string | number;\n  offsetY?: string | number;\n  placement?: BadgePlacement;\n  size?: BadgeSize;\n  rounded?: BadgeRounded;\n  color?: 'default' | ContextColorsType;\n}\n\ndefineOptions({\n  name: 'RuiBadge',\n});\n\nconst {\n  text = null,\n  icon = null,\n  modelValue = true,\n  dot = false,\n  placement = BadgePlacement.top,\n  left = false,\n  size = BadgeSize.md,\n  rounded = BadgeRounded.full,\n  color = 'primary',\n  offsetX = 0,\n  offsetY = 0,\n} = defineProps<Props>();\n\nconst slots = defineSlots<{\n  default?: () => any;\n  badge?: () => any;\n  icon?: () => any;\n}>();\n\nconst badgeStyles = tv({\n  slots: {\n    wrapper: 'relative inline-block',\n    badge: 'flex items-center justify-center text-xs font-medium tabular-nums absolute bg-transparent text-rui-text',\n    content: 'flex items-center gap-1 px-1.5',\n  },\n  variants: {\n    // `-fill` is `main` in light and, for a status color, the deep `darker` in dark, where `main` is a text tone\n    color: {\n      default: { badge: 'bg-rui-neutral-200 dark:bg-rui-neutral-700' },\n      primary: { badge: 'bg-rui-primary-fill text-rui-primary-foreground' },\n      secondary: { badge: 'bg-rui-secondary-fill text-rui-secondary-foreground' },\n      error: { badge: 'bg-rui-error-fill text-rui-error-foreground' },\n      warning: { badge: 'bg-rui-warning-fill text-rui-warning-foreground' },\n      info: { badge: 'bg-rui-info-fill text-rui-info-foreground' },\n      success: { badge: 'bg-rui-success-fill text-rui-success-foreground' },\n    },\n    // the icon is 60% of the badge height, as the text is, rather than filling it\n    size: {\n      sm: { badge: 'min-h-4 min-w-4 text-caption-2 [--rui-icon-size:0.625rem]' },\n      md: { badge: 'min-h-5 min-w-5 [--rui-icon-size:0.75rem]' },\n      lg: { badge: 'min-h-6 min-w-6 [--rui-icon-size:0.875rem]' },\n    },\n    rounded: {\n      sm: { badge: 'rounded-xs' },\n      md: { badge: 'rounded-rui-control' },\n      lg: { badge: 'rounded-rui-card' },\n      full: { badge: 'rounded-full' },\n    },\n    // A surface ring keeps a dot apart from whatever it overlaps, such as an avatar edge\n    dot: {\n      true: { badge: 'ring-2 ring-rui-surface' },\n    },\n    // an icon alone needs no side padding, so the badge stays as wide as it is tall\n    iconOnly: {\n      true: { content: 'px-0' },\n      false: {},\n    },\n  },\n  compoundVariants: [\n    // the default dot is a step lighter in dark, where neutral-500 nearly vanished against a dark control\n    { dot: true, color: 'default', class: { badge: 'bg-rui-neutral-500 dark:bg-rui-neutral-400' } },\n    // A dot carries no text, so it keeps the brighter `main`, which reads better as a small mark on a dark page\n    { dot: true, color: 'error', class: { badge: 'dark:bg-rui-error' } },\n    { dot: true, color: 'warning', class: { badge: 'dark:bg-rui-warning' } },\n    { dot: true, color: 'info', class: { badge: 'dark:bg-rui-info' } },\n    { dot: true, color: 'success', class: { badge: 'dark:bg-rui-success' } },\n\n    // Dot sizes: 8, 10 and 12px, since half of a dot sits off the corner and reads smaller than it is\n    { dot: true, size: 'sm', class: { badge: 'min-w-2 min-h-2' } },\n    { dot: true, size: 'md', class: { badge: 'min-w-2.5 min-h-2.5' } },\n    { dot: true, size: 'lg', class: { badge: 'min-w-3 min-h-3' } },\n  ],\n  defaultVariants: {\n    color: 'primary',\n    size: 'md',\n    rounded: 'full',\n    dot: false,\n  },\n});\n\nconst hasText = computed<boolean>(() => !!text || !!slots.badge);\n\nconst hasIconAndText = computed<boolean>(() => (!!icon || !!slots.icon) && get(hasText));\n\nconst ui = computed<ReturnType<typeof badgeStyles>>(() => badgeStyles({\n  color,\n  size,\n  rounded,\n  dot,\n  iconOnly: (!!icon || !!slots.icon) && !get(hasText),\n}));\n\n/** Dot positions as [leftOffset, rightBase, edgeBase, centerOffset]; a dot's center sits on the corner, so each size moves by half its diameter. */\nconst DOT_POS: Record<BadgeSize, PosConfig> = {\n  sm: [-0.25, '100% - 0.25rem', '100% - 0.25rem', 0.25],\n  md: [-0.3125, '100% - 0.3125rem', '100% - 0.3125rem', 0.3125],\n  lg: [-0.375, '100% - 0.375rem', '100% - 0.375rem', 0.375],\n};\nconst BADGE_POS: Record<BadgeSize, PosConfig> = {\n  sm: [-0.85, '100% - 0.375rem', '100% - 0.375rem', 0.55],\n  md: [-0.95, '100% - 0.5rem', '100% - 0.5rem', 0.65],\n  lg: [-1.05, '100% - 0.5rem', '100% - 0.5rem', 0.75],\n};\n\nconst positionStyle = computed<Record<string, string>>(() => {\n  const ox = Number(offsetX) * 0.0625;\n  const oy = Number(offsetY) * 0.0625;\n  const [l, r, edge, center] = dot ? DOT_POS[size] : BADGE_POS[size];\n\n  const horizontal = `calc(${left ? `${l}rem` : r} + ${ox}rem)`;\n  const vertical = placement === 'center'\n    ? `calc(50% - ${center}rem - ${oy}rem)`\n    : `calc(${edge} - ${oy}rem)`;\n\n  return {\n    left: horizontal,\n    [placement === 'top' ? 'bottom' : 'top']: vertical,\n  };\n});\n</script>\n\n<template>\n  <div :class=\"ui.wrapper()\">\n    <slot />\n    <!-- under reduced motion the badge appears and leaves at full size, with no scale -->\n    <Transition\n      appear\n      enter-active-class=\"transition-[scale] ease-out duration-200 motion-reduce:transition-none\"\n      enter-from-class=\"scale-0 motion-reduce:scale-100\"\n      enter-to-class=\"scale-100\"\n      leave-active-class=\"transition-[scale] ease-in duration-150 motion-reduce:transition-none\"\n      leave-from-class=\"scale-100\"\n      leave-to-class=\"scale-0 motion-reduce:scale-100\"\n    >\n      <div\n        v-if=\"modelValue\"\n        :class=\"ui.badge()\"\n        :style=\"positionStyle\"\n        :data-placement=\"placement\"\n        :data-dot=\"dot || undefined\"\n        :data-left=\"left || undefined\"\n        aria-atomic=\"true\"\n        aria-live=\"polite\"\n        role=\"status\"\n      >\n        <!-- no aria-label: on a live region it replaced the count, so a reader announced \"Badge\" -->\n        <span\n          v-if=\"!dot\"\n          :class=\"ui.content({ class: hasIconAndText ? 'px-2' : undefined })\"\n        >\n          <slot name=\"badge\">\n            {{ text }}\n          </slot>\n          <slot name=\"icon\">\n            <RuiIcon\n              v-if=\"icon\"\n              :name=\"icon\"\n            />\n          </slot>\n        </span>\n      </div>\n    </Transition>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiBadge.js","names":["_sfc_main"],"sources":["../../../../src/components/overlays/badge/RuiBadge.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { BadgePlacement, BadgeRounded, BadgeSize } from '@/components/overlays/badge/badge-props';\nimport { tv } from '@/utils/tv';\n\ntype PosConfig = [left: number, right: string, edge: string, center: number];\n\nexport interface Props {\n  text?: string | null;\n  icon?: RuiIcons | null;\n  modelValue?: boolean;\n  dot?: boolean;\n  left?: boolean;\n  offsetX?: string | number;\n  offsetY?: string | number;\n  placement?: BadgePlacement;\n  size?: BadgeSize;\n  rounded?: BadgeRounded;\n  color?: 'default' | ContextColorsType;\n}\n\ndefineOptions({\n  name: 'RuiBadge',\n});\n\nconst {\n  text = null,\n  icon = null,\n  modelValue = true,\n  dot = false,\n  placement = BadgePlacement.top,\n  left = false,\n  size = BadgeSize.md,\n  rounded = BadgeRounded.full,\n  color = 'primary',\n  offsetX = 0,\n  offsetY = 0,\n} = defineProps<Props>();\n\nconst slots = defineSlots<{\n  default?: () => any;\n  badge?: () => any;\n  icon?: () => any;\n}>();\n\nconst badgeStyles = tv({\n  slots: {\n    wrapper: 'relative inline-block',\n    badge: 'flex items-center justify-center text-xs font-medium tabular-nums absolute bg-transparent text-rui-text',\n    content: 'flex items-center gap-1 px-1.5',\n  },\n  variants: {\n    // `-fill` is `main` in light and, for a status color, the deep `darker` in dark, where `main` is a text tone\n    color: {\n      default: { badge: 'bg-rui-neutral-200 dark:bg-rui-neutral-700' },\n      primary: { badge: 'bg-rui-primary-fill text-rui-primary-foreground' },\n      secondary: { badge: 'bg-rui-secondary-fill text-rui-secondary-foreground' },\n      error: { badge: 'bg-rui-error-fill text-rui-error-foreground' },\n      warning: { badge: 'bg-rui-warning-fill text-rui-warning-foreground' },\n      info: { badge: 'bg-rui-info-fill text-rui-info-foreground' },\n      success: { badge: 'bg-rui-success-fill text-rui-success-foreground' },\n    },\n    // the icon is 60% of the badge height, as the text is, rather than filling it\n    size: {\n      sm: { badge: 'min-h-4 min-w-4 text-caption-2 [--rui-icon-size:0.625rem]' },\n      md: { badge: 'min-h-5 min-w-5 [--rui-icon-size:0.75rem]' },\n      lg: { badge: 'min-h-6 min-w-6 [--rui-icon-size:0.875rem]' },\n    },\n    rounded: {\n      sm: { badge: 'rounded-xs' },\n      md: { badge: 'rounded-rui-control' },\n      lg: { badge: 'rounded-rui-card' },\n      full: { badge: 'rounded-full' },\n    },\n    // A surface ring keeps a dot apart from whatever it overlaps, such as an avatar edge\n    dot: {\n      true: { badge: 'ring-2 ring-rui-surface' },\n    },\n    // an icon alone needs no side padding, so the badge stays as wide as it is tall\n    iconOnly: {\n      true: { content: 'px-0' },\n      false: {},\n    },\n  },\n  compoundVariants: [\n    // the default dot is a step lighter in dark, where neutral-500 nearly vanished against a dark control\n    { dot: true, color: 'default', class: { badge: 'bg-rui-neutral-500 dark:bg-rui-neutral-400' } },\n    // A dot carries no text, so it keeps the brighter `main`, which reads better as a small mark on a dark page\n    { dot: true, color: 'error', class: { badge: 'dark:bg-rui-error' } },\n    { dot: true, color: 'warning', class: { badge: 'dark:bg-rui-warning' } },\n    { dot: true, color: 'info', class: { badge: 'dark:bg-rui-info' } },\n    { dot: true, color: 'success', class: { badge: 'dark:bg-rui-success' } },\n\n    // Dot sizes: 8, 10 and 12px, since half of a dot sits off the corner and reads smaller than it is\n    { dot: true, size: 'sm', class: { badge: 'min-w-2 min-h-2' } },\n    { dot: true, size: 'md', class: { badge: 'min-w-2.5 min-h-2.5' } },\n    { dot: true, size: 'lg', class: { badge: 'min-w-3 min-h-3' } },\n  ],\n  defaultVariants: {\n    color: 'primary',\n    size: 'md',\n    rounded: 'full',\n    dot: false,\n  },\n});\n\nconst hasText = computed<boolean>(() => !!text || !!slots.badge);\n\nconst hasIconAndText = computed<boolean>(() => (!!icon || !!slots.icon) && get(hasText));\n\nconst ui = computed<ReturnType<typeof badgeStyles>>(() => badgeStyles({\n  color,\n  size,\n  rounded,\n  dot,\n  iconOnly: (!!icon || !!slots.icon) && !get(hasText),\n}));\n\n/** Dot positions as [leftOffset, rightBase, edgeBase, centerOffset]; a dot's center sits on the corner, so each size moves by half its diameter. */\nconst DOT_POS: Record<BadgeSize, PosConfig> = {\n  sm: [-0.25, '100% - 0.25rem', '100% - 0.25rem', 0.25],\n  md: [-0.3125, '100% - 0.3125rem', '100% - 0.3125rem', 0.3125],\n  lg: [-0.375, '100% - 0.375rem', '100% - 0.375rem', 0.375],\n};\nconst BADGE_POS: Record<BadgeSize, PosConfig> = {\n  sm: [-0.85, '100% - 0.375rem', '100% - 0.375rem', 0.55],\n  md: [-0.95, '100% - 0.5rem', '100% - 0.5rem', 0.65],\n  lg: [-1.05, '100% - 0.5rem', '100% - 0.5rem', 0.75],\n};\n\nconst positionStyle = computed<Record<string, string>>(() => {\n  const ox = Number(offsetX) * 0.0625;\n  const oy = Number(offsetY) * 0.0625;\n  const [l, r, edge, center] = dot ? DOT_POS[size] : BADGE_POS[size];\n\n  const horizontal = `calc(${left ? `${l}rem` : r} + ${ox}rem)`;\n  const vertical = placement === 'center'\n    ? `calc(50% - ${center}rem - ${oy}rem)`\n    : `calc(${edge} - ${oy}rem)`;\n\n  return {\n    left: horizontal,\n    [placement === 'top' ? 'bottom' : 'top']: vertical,\n  };\n});\n</script>\n\n<template>\n  <div :class=\"ui.wrapper()\">\n    <slot />\n    <!-- under reduced motion the badge appears and leaves at full size, with no scale -->\n    <Transition\n      appear\n      enter-active-class=\"transition-[scale] ease-out duration-200 motion-reduce:transition-none\"\n      enter-from-class=\"scale-0 motion-reduce:scale-100\"\n      enter-to-class=\"scale-100\"\n      leave-active-class=\"transition-[scale] ease-in duration-150 motion-reduce:transition-none\"\n      leave-from-class=\"scale-100\"\n      leave-to-class=\"scale-0 motion-reduce:scale-100\"\n    >\n      <div\n        v-if=\"modelValue\"\n        :class=\"ui.badge()\"\n        :style=\"positionStyle\"\n        :data-placement=\"placement\"\n        :data-dot=\"dot || undefined\"\n        :data-left=\"left || undefined\"\n        aria-atomic=\"true\"\n        aria-live=\"polite\"\n        role=\"status\"\n      >\n        <!-- no aria-label: on a live region it replaced the count, so a reader announced \"Badge\" -->\n        <span\n          v-if=\"!dot\"\n          :class=\"ui.content({ class: hasIconAndText ? 'px-2' : undefined })\"\n        >\n          <slot name=\"badge\">\n            {{ text }}\n          </slot>\n          <slot name=\"icon\">\n            <RuiIcon\n              v-if=\"icon\"\n              :name=\"icon\"\n            />\n          </slot>\n        </span>\n      </div>\n    </Transition>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/overlays/badge/RuiBadge.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiBadge.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/overlays/badge/RuiBadge.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { BadgePlacement, BadgeRounded, BadgeSize } from '@/components/overlays/badge/badge-props';\nimport { tv } from '@/utils/tv';\n\ntype PosConfig = [left: number, right: string, edge: string, center: number];\n\nexport interface Props {\n  text?: string | null;\n  icon?: RuiIcons | null;\n  modelValue?: boolean;\n  dot?: boolean;\n  left?: boolean;\n  offsetX?: string | number;\n  offsetY?: string | number;\n  placement?: BadgePlacement;\n  size?: BadgeSize;\n  rounded?: BadgeRounded;\n  color?: 'default' | ContextColorsType;\n}\n\ndefineOptions({\n  name: 'RuiBadge',\n});\n\nconst {\n  text = null,\n  icon = null,\n  modelValue = true,\n  dot = false,\n  placement = BadgePlacement.top,\n  left = false,\n  size = BadgeSize.md,\n  rounded = BadgeRounded.full,\n  color = 'primary',\n  offsetX = 0,\n  offsetY = 0,\n} = defineProps<Props>();\n\nconst slots = defineSlots<{\n  default?: () => any;\n  badge?: () => any;\n  icon?: () => any;\n}>();\n\nconst badgeStyles = tv({\n  slots: {\n    wrapper: 'relative inline-block',\n    badge: 'flex items-center justify-center text-xs font-medium tabular-nums absolute bg-transparent text-rui-text',\n    content: 'flex items-center gap-1 px-1.5',\n  },\n  variants: {\n    // `-fill` is `main` in light and, for a status color, the deep `darker` in dark, where `main` is a text tone\n    color: {\n      default: { badge: 'bg-rui-neutral-200 dark:bg-rui-neutral-700' },\n      primary: { badge: 'bg-rui-primary-fill text-rui-primary-foreground' },\n      secondary: { badge: 'bg-rui-secondary-fill text-rui-secondary-foreground' },\n      error: { badge: 'bg-rui-error-fill text-rui-error-foreground' },\n      warning: { badge: 'bg-rui-warning-fill text-rui-warning-foreground' },\n      info: { badge: 'bg-rui-info-fill text-rui-info-foreground' },\n      success: { badge: 'bg-rui-success-fill text-rui-success-foreground' },\n    },\n    // the icon is 60% of the badge height, as the text is, rather than filling it\n    size: {\n      sm: { badge: 'min-h-4 min-w-4 text-caption-2 [--rui-icon-size:0.625rem]' },\n      md: { badge: 'min-h-5 min-w-5 [--rui-icon-size:0.75rem]' },\n      lg: { badge: 'min-h-6 min-w-6 [--rui-icon-size:0.875rem]' },\n    },\n    rounded: {\n      sm: { badge: 'rounded-xs' },\n      md: { badge: 'rounded-rui-control' },\n      lg: { badge: 'rounded-rui-card' },\n      full: { badge: 'rounded-full' },\n    },\n    // A surface ring keeps a dot apart from whatever it overlaps, such as an avatar edge\n    dot: {\n      true: { badge: 'ring-2 ring-rui-surface' },\n    },\n    // an icon alone needs no side padding, so the badge stays as wide as it is tall\n    iconOnly: {\n      true: { content: 'px-0' },\n      false: {},\n    },\n  },\n  compoundVariants: [\n    // the default dot is a step lighter in dark, where neutral-500 nearly vanished against a dark control\n    { dot: true, color: 'default', class: { badge: 'bg-rui-neutral-500 dark:bg-rui-neutral-400' } },\n    // A dot carries no text, so it keeps the brighter `main`, which reads better as a small mark on a dark page\n    { dot: true, color: 'error', class: { badge: 'dark:bg-rui-error' } },\n    { dot: true, color: 'warning', class: { badge: 'dark:bg-rui-warning' } },\n    { dot: true, color: 'info', class: { badge: 'dark:bg-rui-info' } },\n    { dot: true, color: 'success', class: { badge: 'dark:bg-rui-success' } },\n\n    // Dot sizes: 8, 10 and 12px, since half of a dot sits off the corner and reads smaller than it is\n    { dot: true, size: 'sm', class: { badge: 'min-w-2 min-h-2' } },\n    { dot: true, size: 'md', class: { badge: 'min-w-2.5 min-h-2.5' } },\n    { dot: true, size: 'lg', class: { badge: 'min-w-3 min-h-3' } },\n  ],\n  defaultVariants: {\n    color: 'primary',\n    size: 'md',\n    rounded: 'full',\n    dot: false,\n  },\n});\n\nconst hasText = computed<boolean>(() => !!text || !!slots.badge);\n\nconst hasIconAndText = computed<boolean>(() => (!!icon || !!slots.icon) && get(hasText));\n\nconst ui = computed<ReturnType<typeof badgeStyles>>(() => badgeStyles({\n  color,\n  size,\n  rounded,\n  dot,\n  iconOnly: (!!icon || !!slots.icon) && !get(hasText),\n}));\n\n/** Dot positions as [leftOffset, rightBase, edgeBase, centerOffset]; a dot's center sits on the corner, so each size moves by half its diameter. */\nconst DOT_POS: Record<BadgeSize, PosConfig> = {\n  sm: [-0.25, '100% - 0.25rem', '100% - 0.25rem', 0.25],\n  md: [-0.3125, '100% - 0.3125rem', '100% - 0.3125rem', 0.3125],\n  lg: [-0.375, '100% - 0.375rem', '100% - 0.375rem', 0.375],\n};\nconst BADGE_POS: Record<BadgeSize, PosConfig> = {\n  sm: [-0.85, '100% - 0.375rem', '100% - 0.375rem', 0.55],\n  md: [-0.95, '100% - 0.5rem', '100% - 0.5rem', 0.65],\n  lg: [-1.05, '100% - 0.5rem', '100% - 0.5rem', 0.75],\n};\n\nconst positionStyle = computed<Record<string, string>>(() => {\n  const ox = Number(offsetX) * 0.0625;\n  const oy = Number(offsetY) * 0.0625;\n  const [l, r, edge, center] = dot ? DOT_POS[size] : BADGE_POS[size];\n\n  const horizontal = `calc(${left ? `${l}rem` : r} + ${ox}rem)`;\n  const vertical = placement === 'center'\n    ? `calc(50% - ${center}rem - ${oy}rem)`\n    : `calc(${edge} - ${oy}rem)`;\n\n  return {\n    left: horizontal,\n    [placement === 'top' ? 'bottom' : 'top']: vertical,\n  };\n});\n</script>\n\n<template>\n  <div :class=\"ui.wrapper()\">\n    <slot />\n    <!-- under reduced motion the badge appears and leaves at full size, with no scale -->\n    <Transition\n      appear\n      enter-active-class=\"transition-[scale] ease-out duration-200 motion-reduce:transition-none\"\n      enter-from-class=\"scale-0 motion-reduce:scale-100\"\n      enter-to-class=\"scale-100\"\n      leave-active-class=\"transition-[scale] ease-in duration-150 motion-reduce:transition-none\"\n      leave-from-class=\"scale-100\"\n      leave-to-class=\"scale-0 motion-reduce:scale-100\"\n    >\n      <div\n        v-if=\"modelValue\"\n        :class=\"ui.badge()\"\n        :style=\"positionStyle\"\n        :data-placement=\"placement\"\n        :data-dot=\"dot || undefined\"\n        :data-left=\"left || undefined\"\n        aria-atomic=\"true\"\n        aria-live=\"polite\"\n        role=\"status\"\n      >\n        <!-- no aria-label: on a live region it replaced the count, so a reader announced \"Badge\" -->\n        <span\n          v-if=\"!dot\"\n          :class=\"ui.content({ class: hasIconAndText ? 'px-2' : undefined })\"\n        >\n          <slot name=\"badge\">\n            {{ text }}\n          </slot>\n          <slot name=\"icon\">\n            <RuiIcon\n              v-if=\"icon\"\n              :name=\"icon\"\n            />\n          </slot>\n        </span>\n      </div>\n    </Transition>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiBadge.vue_vue_type_script_setup_true_lang.js","names":["_useSlots","_openBlock","_createElementBlock","_normalizeClass","_unref","_renderSlot","_createVNode","_Transition","_withCtx","_normalizeStyle","_createTextVNode","_toDisplayString","_createBlock","RuiIcon","_createCommentVNode"],"sources":["../../../../src/components/overlays/badge/RuiBadge.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { BadgePlacement, BadgeRounded, BadgeSize } from '@/components/overlays/badge/badge-props';\nimport { tv } from '@/utils/tv';\n\ntype PosConfig = [left: number, right: string, edge: string, center: number];\n\nexport interface Props {\n  text?: string | null;\n  icon?: RuiIcons | null;\n  modelValue?: boolean;\n  dot?: boolean;\n  left?: boolean;\n  offsetX?: string | number;\n  offsetY?: string | number;\n  placement?: BadgePlacement;\n  size?: BadgeSize;\n  rounded?: BadgeRounded;\n  color?: 'default' | ContextColorsType;\n}\n\ndefineOptions({\n  name: 'RuiBadge',\n});\n\nconst {\n  text = null,\n  icon = null,\n  modelValue = true,\n  dot = false,\n  placement = BadgePlacement.top,\n  left = false,\n  size = BadgeSize.md,\n  rounded = BadgeRounded.full,\n  color = 'primary',\n  offsetX = 0,\n  offsetY = 0,\n} = defineProps<Props>();\n\nconst slots = defineSlots<{\n  default?: () => any;\n  badge?: () => any;\n  icon?: () => any;\n}>();\n\nconst badgeStyles = tv({\n  slots: {\n    wrapper: 'relative inline-block',\n    badge: 'flex items-center justify-center text-xs font-medium tabular-nums absolute bg-transparent text-rui-text',\n    content: 'flex items-center gap-1 px-1.5',\n  },\n  variants: {\n    // `-fill` is `main` in light and, for a status color, the deep `darker` in dark, where `main` is a text tone\n    color: {\n      default: { badge: 'bg-rui-neutral-200 dark:bg-rui-neutral-700' },\n      primary: { badge: 'bg-rui-primary-fill text-rui-primary-foreground' },\n      secondary: { badge: 'bg-rui-secondary-fill text-rui-secondary-foreground' },\n      error: { badge: 'bg-rui-error-fill text-rui-error-foreground' },\n      warning: { badge: 'bg-rui-warning-fill text-rui-warning-foreground' },\n      info: { badge: 'bg-rui-info-fill text-rui-info-foreground' },\n      success: { badge: 'bg-rui-success-fill text-rui-success-foreground' },\n    },\n    // the icon is 60% of the badge height, as the text is, rather than filling it\n    size: {\n      sm: { badge: 'min-h-4 min-w-4 text-caption-2 [--rui-icon-size:0.625rem]' },\n      md: { badge: 'min-h-5 min-w-5 [--rui-icon-size:0.75rem]' },\n      lg: { badge: 'min-h-6 min-w-6 [--rui-icon-size:0.875rem]' },\n    },\n    rounded: {\n      sm: { badge: 'rounded-xs' },\n      md: { badge: 'rounded-rui-control' },\n      lg: { badge: 'rounded-rui-card' },\n      full: { badge: 'rounded-full' },\n    },\n    // A surface ring keeps a dot apart from whatever it overlaps, such as an avatar edge\n    dot: {\n      true: { badge: 'ring-2 ring-rui-surface' },\n    },\n    // an icon alone needs no side padding, so the badge stays as wide as it is tall\n    iconOnly: {\n      true: { content: 'px-0' },\n      false: {},\n    },\n  },\n  compoundVariants: [\n    // the default dot is a step lighter in dark, where neutral-500 nearly vanished against a dark control\n    { dot: true, color: 'default', class: { badge: 'bg-rui-neutral-500 dark:bg-rui-neutral-400' } },\n    // A dot carries no text, so it keeps the brighter `main`, which reads better as a small mark on a dark page\n    { dot: true, color: 'error', class: { badge: 'dark:bg-rui-error' } },\n    { dot: true, color: 'warning', class: { badge: 'dark:bg-rui-warning' } },\n    { dot: true, color: 'info', class: { badge: 'dark:bg-rui-info' } },\n    { dot: true, color: 'success', class: { badge: 'dark:bg-rui-success' } },\n\n    // Dot sizes: 8, 10 and 12px, since half of a dot sits off the corner and reads smaller than it is\n    { dot: true, size: 'sm', class: { badge: 'min-w-2 min-h-2' } },\n    { dot: true, size: 'md', class: { badge: 'min-w-2.5 min-h-2.5' } },\n    { dot: true, size: 'lg', class: { badge: 'min-w-3 min-h-3' } },\n  ],\n  defaultVariants: {\n    color: 'primary',\n    size: 'md',\n    rounded: 'full',\n    dot: false,\n  },\n});\n\nconst hasText = computed<boolean>(() => !!text || !!slots.badge);\n\nconst hasIconAndText = computed<boolean>(() => (!!icon || !!slots.icon) && get(hasText));\n\nconst ui = computed<ReturnType<typeof badgeStyles>>(() => badgeStyles({\n  color,\n  size,\n  rounded,\n  dot,\n  iconOnly: (!!icon || !!slots.icon) && !get(hasText),\n}));\n\n/** Dot positions as [leftOffset, rightBase, edgeBase, centerOffset]; a dot's center sits on the corner, so each size moves by half its diameter. */\nconst DOT_POS: Record<BadgeSize, PosConfig> = {\n  sm: [-0.25, '100% - 0.25rem', '100% - 0.25rem', 0.25],\n  md: [-0.3125, '100% - 0.3125rem', '100% - 0.3125rem', 0.3125],\n  lg: [-0.375, '100% - 0.375rem', '100% - 0.375rem', 0.375],\n};\nconst BADGE_POS: Record<BadgeSize, PosConfig> = {\n  sm: [-0.85, '100% - 0.375rem', '100% - 0.375rem', 0.55],\n  md: [-0.95, '100% - 0.5rem', '100% - 0.5rem', 0.65],\n  lg: [-1.05, '100% - 0.5rem', '100% - 0.5rem', 0.75],\n};\n\nconst positionStyle = computed<Record<string, string>>(() => {\n  const ox = Number(offsetX) * 0.0625;\n  const oy = Number(offsetY) * 0.0625;\n  const [l, r, edge, center] = dot ? DOT_POS[size] : BADGE_POS[size];\n\n  const horizontal = `calc(${left ? `${l}rem` : r} + ${ox}rem)`;\n  const vertical = placement === 'center'\n    ? `calc(50% - ${center}rem - ${oy}rem)`\n    : `calc(${edge} - ${oy}rem)`;\n\n  return {\n    left: horizontal,\n    [placement === 'top' ? 'bottom' : 'top']: vertical,\n  };\n});\n</script>\n\n<template>\n  <div :class=\"ui.wrapper()\">\n    <slot />\n    <!-- under reduced motion the badge appears and leaves at full size, with no scale -->\n    <Transition\n      appear\n      enter-active-class=\"transition-[scale] ease-out duration-200 motion-reduce:transition-none\"\n      enter-from-class=\"scale-0 motion-reduce:scale-100\"\n      enter-to-class=\"scale-100\"\n      leave-active-class=\"transition-[scale] ease-in duration-150 motion-reduce:transition-none\"\n      leave-from-class=\"scale-100\"\n      leave-to-class=\"scale-0 motion-reduce:scale-100\"\n    >\n      <div\n        v-if=\"modelValue\"\n        :class=\"ui.badge()\"\n        :style=\"positionStyle\"\n        :data-placement=\"placement\"\n        :data-dot=\"dot || undefined\"\n        :data-left=\"left || undefined\"\n        aria-atomic=\"true\"\n        aria-live=\"polite\"\n        role=\"status\"\n      >\n        <!-- no aria-label: on a live region it replaced the count, so a reader announced \"Badge\" -->\n        <span\n          v-if=\"!dot\"\n          :class=\"ui.content({ class: hasIconAndText ? 'px-2' : undefined })\"\n        >\n          <slot name=\"badge\">\n            {{ text }}\n          </slot>\n          <slot name=\"icon\">\n            <RuiIcon\n              v-if=\"icon\"\n              :name=\"icon\"\n            />\n          </slot>\n        </span>\n      </div>\n    </Transition>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/overlays/bottom-sheet/RuiBottomSheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiBottomSheet.js","names":[],"sources":["../../../../src/components/overlays/bottom-sheet/RuiBottomSheet.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport RuiDialog from '@/components/overlays/dialog/RuiDialog.vue';\n\n/** The sheet's props, which stay in step with RuiDialog's. */\nexport interface BottomSheetProps {\n  persistent?: boolean;\n  width?: string | number;\n  maxWidth?: string | number;\n}\n\ndefineOptions({\n  name: 'RuiBottomSheet',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst { persistent = false, width, maxWidth } = defineProps<BottomSheetProps>();\n</script>\n\n<template>\n  <RuiDialog\n    v-model=\"modelValue\"\n    bottom-sheet\n    v-bind=\"$attrs\"\n    :persistent=\"persistent\"\n    :width=\"width\"\n    :max-width=\"maxWidth\"\n  >\n    <template\n      v-for=\"slot in Object.keys($slots)\"\n      #[slot]=\"scope\"\n    >\n      <slot\n        v-bind=\"scope\"\n        :name=\"slot\"\n      />\n    </template>\n  </RuiDialog>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiBottomSheet.js","names":["_sfc_main"],"sources":["../../../../src/components/overlays/bottom-sheet/RuiBottomSheet.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport RuiDialog from '@/components/overlays/dialog/RuiDialog.vue';\n\n/** The sheet's props, which stay in step with RuiDialog's. */\nexport interface BottomSheetProps {\n  persistent?: boolean;\n  width?: string | number;\n  maxWidth?: string | number;\n}\n\ndefineOptions({\n  name: 'RuiBottomSheet',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst { persistent = false, width, maxWidth } = defineProps<BottomSheetProps>();\n</script>\n\n<template>\n  <RuiDialog\n    v-model=\"modelValue\"\n    bottom-sheet\n    v-bind=\"$attrs\"\n    :persistent=\"persistent\"\n    :width=\"width\"\n    :max-width=\"maxWidth\"\n  >\n    <template\n      v-for=\"slot in Object.keys($slots)\"\n      #[slot]=\"scope\"\n    >\n      <slot\n        v-bind=\"scope\"\n        :name=\"slot\"\n      />\n    </template>\n  </RuiDialog>\n</template>\n"],"mappings":""}

package/dist/components/overlays/bottom-sheet/RuiBottomSheet.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiBottomSheet.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots"],"sources":["../../../../src/components/overlays/bottom-sheet/RuiBottomSheet.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport RuiDialog from '@/components/overlays/dialog/RuiDialog.vue';\n\n/** The sheet's props, which stay in step with RuiDialog's. */\nexport interface BottomSheetProps {\n  persistent?: boolean;\n  width?: string | number;\n  maxWidth?: string | number;\n}\n\ndefineOptions({\n  name: 'RuiBottomSheet',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst { persistent = false, width, maxWidth } = defineProps<BottomSheetProps>();\n</script>\n\n<template>\n  <RuiDialog\n    v-model=\"modelValue\"\n    bottom-sheet\n    v-bind=\"$attrs\"\n    :persistent=\"persistent\"\n    :width=\"width\"\n    :max-width=\"maxWidth\"\n  >\n    <template\n      v-for=\"slot in Object.keys($slots)\"\n      #[slot]=\"scope\"\n    >\n      <slot\n        v-bind=\"scope\"\n        :name=\"slot\"\n      />\n    </template>\n  </RuiDialog>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAeA,MAAM,aAAa,SAAoB,SAAA,YAAmB;;GAMxD,OAAA,UAAA,GAAA,YAiBY,mBAjBZ,WAiBY;IAhBD,YAAA,WAAA;IAAA,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,WAAU,QAAA;IACnB,gBAAA;GACQA,GAAAA,KAAAA,QAAM;IACb,YAAY,QAAA;IACZ,OAAO,QAAA;IACP,aAAW,QAAA;GAGK,CAAA,GAAA,YAAA,EAAA,GAAA,EAAA,GAAA,CAAA,WAAA,OAAO,KAAKC,KAAAA,MAAM,IAA1B,SAAI;;KACV,MAAA;KAED,IAAA,SAFS,UAAK,CAEd,WAGE,KAAA,QADO,MAAI,eAAA,mBADH,KAAK,CAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"RuiBottomSheet.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots","_useModel","_openBlock","_createBlock","RuiDialog","_mergeProps","_createSlots","_renderList","_withCtx","_renderSlot","_normalizeProps","_guardReactiveProps"],"sources":["../../../../src/components/overlays/bottom-sheet/RuiBottomSheet.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport RuiDialog from '@/components/overlays/dialog/RuiDialog.vue';\n\n/** The sheet's props, which stay in step with RuiDialog's. */\nexport interface BottomSheetProps {\n  persistent?: boolean;\n  width?: string | number;\n  maxWidth?: string | number;\n}\n\ndefineOptions({\n  name: 'RuiBottomSheet',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst { persistent = false, width, maxWidth } = defineProps<BottomSheetProps>();\n</script>\n\n<template>\n  <RuiDialog\n    v-model=\"modelValue\"\n    bottom-sheet\n    v-bind=\"$attrs\"\n    :persistent=\"persistent\"\n    :width=\"width\"\n    :max-width=\"maxWidth\"\n  >\n    <template\n      v-for=\"slot in Object.keys($slots)\"\n      #[slot]=\"scope\"\n    >\n      <slot\n        v-bind=\"scope\"\n        :name=\"slot\"\n      />\n    </template>\n  </RuiDialog>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAeA,MAAM,aAAaE,SAAoB,SAAA,YAAmB;;GAMxD,OAAAC,UAAA,GAAAC,YAiBYC,mBAjBZC,WAiBY;IAhBD,YAAA,WAAA;IAAA,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,WAAU,QAAA;IACnB,gBAAA;GACQN,GAAAA,KAAAA,QAAM;IACb,YAAY,QAAA;IACZ,OAAO,QAAA;IACP,aAAW,QAAA;GAGKQ,CAAAA,GAAAA,YAAAA,EAAAA,GAAAA,EAAAA,GAAAA,CAAAA,WAAA,OAAO,KAAKP,KAAAA,MAAM,IAA1B,SAAI;;KACV,MAAA;KAED,IAAAQ,SAFS,UAAK,CAEdC,WAGE,KAAA,QADO,MAAIC,eAAAC,mBADH,KAAK,CAAA,CAAA,CAAA,CAAA"}

package/dist/components/overlays/dialog/RuiDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiDialog.js","names":[],"sources":["../../../../src/components/overlays/dialog/RuiDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { DialogSize } from '@/consts/tokens';\nimport type { VueClassValue } from '@/types/class-value';\nimport { ButtonGroupBoundary } from '@/components/buttons/button-group/button-group-context';\nimport { useDismissableOverlay } from '@/composables/overlay-stack';\nimport { useTimeoutManager } from '@/composables/timeout-manager';\nimport { getNonRootAttrs, getRootAttrs, transformPropsUnit } from '@/utils/helpers';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiDialogClassNames {\n  root?: VueClassValue;\n  content?: VueClassValue;\n}\n\nexport interface DialogProps {\n  persistent?: boolean;\n  width?: string | number;\n  maxWidth?: string | number;\n  /** A preset max width, `--rui-dialog-<size>`; an explicit `maxWidth` wins */\n  size?: DialogSize;\n  bottomSheet?: boolean;\n  classNames?: RuiDialogClassNames;\n  zIndex?: string | number;\n  ariaLabel?: string;\n}\n\ndefineOptions({\n  name: 'RuiDialog',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n  persistent = false,\n  width = '98%',\n  maxWidth,\n  size,\n  bottomSheet = false,\n  classNames,\n  zIndex = 'var(--rui-z-dialog)',\n  ariaLabel,\n} = defineProps<DialogProps>();\n\nconst emit = defineEmits<{\n  'closed': [];\n  'click:outside': [];\n  'click:esc': [];\n  /**\n   * The overlay stack asked this dialog to go, which is what a back gesture\n   * reaches it as. Closes unless persistent, like escape does, so a dialog that\n   * has to ask before discarding should bind `persistent` and answer here.\n   */\n  'dismiss': [];\n}>();\n\ndefineSlots<{\n  activator?: (props: { attrs: { onClick: () => void }; isOpen: boolean }) => any;\n  default?: (props: { isOpen: boolean; close: () => void }) => any;\n}>();\n\nconst transitioning = ref<boolean>(false);\nconst contentRef = useTemplateRef<HTMLDivElement>('contentRef');\n\nconst leaveTimeout = useTimeoutManager();\n\nconst alive = computed<boolean>(() => get(modelValue) || get(transitioning));\n\nconst style = computed<{ width: string | undefined; maxWidth: string | undefined }>(() => ({\n  width: transformPropsUnit(width),\n  maxWidth: transformPropsUnit(maxWidth) ?? (size ? `var(--rui-dialog-${size})` : undefined),\n}));\n\nconst dialog = tv({\n  slots: {\n    root: 'fixed inset-0',\n    overlay: 'absolute inset-0 backdrop-blur-sm bg-rui-neutral-950/40 dark:bg-black/60',\n    content: 'absolute left-1/2 bottom-0 -translate-x-1/2 outline-hidden overflow-y-auto max-h-(--rui-dialog-max-height)',\n  },\n  variants: {\n    /*\n     * The corners match a RuiCard's, the usual content, which the box clips while it scrolls.\n     * A sheet sits on the screen's bottom edge, so its content's bottom corners are squared.\n     */\n    bottomSheet: {\n      true: { content: 'rounded-t-rui-card shadow-rui-drawer *:rounded-b-none' },\n      false: { content: 'top-1/2 -translate-y-1/2 bottom-auto rounded-rui-card shadow-rui-menu' },\n    },\n  },\n  defaultVariants: { bottomSheet: false },\n});\n\nconst ui = computed<ReturnType<typeof dialog>>(() => dialog({ bottomSheet }));\n\nconst dialogAttrs: { onClick: () => void } = {\n  onClick: toggle,\n};\n\nconst contentTransition = computed<Record<string, string>>(() => {\n  if (!bottomSheet) {\n    return {\n      enterFromClass: 'opacity-0 scale-95',\n      enterActiveClass: 'transition-all ease-out duration-200',\n      enterToClass: 'opacity-100 scale-100',\n      leaveFromClass: 'opacity-100 scale-100',\n      leaveActiveClass: 'transition-all ease-in duration-150',\n      leaveToClass: 'opacity-0 scale-95',\n    };\n  }\n\n  return {\n    enterFromClass: 'translate-y-full',\n    enterActiveClass: 'transition-transform ease-out duration-300',\n    enterToClass: 'translate-y-0',\n    leaveFromClass: 'translate-y-0',\n    leaveActiveClass: 'transition-transform ease-in duration-200',\n    leaveToClass: 'translate-y-full',\n  };\n});\n\nfunction toggle(): void {\n  set(modelValue, !get(modelValue));\n}\n\nfunction close(): void {\n  set(modelValue, false);\n}\n\nfunction onEscClick(): void {\n  if (!persistent) {\n    close();\n  }\n  emit('click:esc');\n}\n\nfunction onClickOutside(): void {\n  if (!persistent) {\n    close();\n  }\n  emit('click:outside');\n}\n\nfunction onDismiss(): void {\n  if (!persistent) {\n    close();\n  }\n  emit('dismiss');\n}\n\n/**\n * Registration follows `modelValue` alone, never `persistent`: a dialog that\n * turns persistent partway through its life has to stay in the stack and refuse\n * in `onDismiss`, or the gesture starts passing through exactly once there is\n * work to lose. A dialog playing its leave transition is already on its way out\n * and does not hold the stack.\n */\nuseDismissableOverlay(modelValue, onDismiss);\n\nfunction onLeaveComplete(): void {\n  leaveTimeout.clear();\n  if (get(transitioning)) {\n    set(transitioning, false);\n    emit('closed');\n  }\n}\n\nwatch(modelValue, (value) => {\n  if (!value) {\n    set(transitioning, true);\n    // Safety fallback if transitionend is not detected\n    leaveTimeout.create(onLeaveComplete, 400);\n  }\n});\n\nwatch(contentRef, (ref) => {\n  if (ref) {\n    nextTick(() => ref.focus());\n  }\n  else {\n    onLeaveComplete();\n  }\n});\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <slot\n      name=\"activator\"\n      v-bind=\"{ attrs: dialogAttrs, isOpen: modelValue }\"\n    />\n    <Teleport to=\"body\">\n      <div\n        v-if=\"alive\"\n        :class=\"ui.root({ class: cn(classNames?.root) })\"\n        :style=\"{ zIndex }\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        :aria-label=\"ariaLabel\"\n        tabindex=\"0\"\n        v-bind=\"getNonRootAttrs($attrs)\"\n        @keydown.esc.stop=\"onEscClick()\"\n      >\n        <Transition\n          enter-from-class=\"opacity-0\"\n          enter-active-class=\"transition-opacity ease-out duration-200\"\n          enter-to-class=\"opacity-100\"\n          leave-from-class=\"opacity-100\"\n          leave-active-class=\"transition-opacity ease-in duration-150\"\n          leave-to-class=\"opacity-0\"\n        >\n          <div\n            v-if=\"modelValue\"\n            data-id=\"overlay\"\n            :class=\"ui.overlay()\"\n            @click.stop=\"onClickOutside()\"\n          />\n        </Transition>\n        <Transition\n          v-bind=\"contentTransition\"\n          @after-leave=\"onLeaveComplete()\"\n        >\n          <div\n            v-if=\"modelValue\"\n            ref=\"contentRef\"\n            data-id=\"content\"\n            :style=\"style\"\n            tabindex=\"0\"\n            :data-bottom-sheet=\"bottomSheet || undefined\"\n            :class=\"ui.content({ class: cn(classNames?.content) })\"\n          >\n            <ButtonGroupBoundary>\n              <slot v-bind=\"{ isOpen: modelValue, close }\" />\n            </ButtonGroupBoundary>\n          </div>\n        </Transition>\n      </div>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiDialog.js","names":["_sfc_main"],"sources":["../../../../src/components/overlays/dialog/RuiDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { DialogSize } from '@/consts/tokens';\nimport type { VueClassValue } from '@/types/class-value';\nimport { ButtonGroupBoundary } from '@/components/buttons/button-group/button-group-context';\nimport { useDismissableOverlay } from '@/composables/overlay-stack';\nimport { useTimeoutManager } from '@/composables/timeout-manager';\nimport { getNonRootAttrs, getRootAttrs, transformPropsUnit } from '@/utils/helpers';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiDialogClassNames {\n  root?: VueClassValue;\n  content?: VueClassValue;\n}\n\nexport interface DialogProps {\n  persistent?: boolean;\n  width?: string | number;\n  maxWidth?: string | number;\n  /** A preset max width, `--rui-dialog-<size>`; an explicit `maxWidth` wins */\n  size?: DialogSize;\n  bottomSheet?: boolean;\n  classNames?: RuiDialogClassNames;\n  zIndex?: string | number;\n  ariaLabel?: string;\n}\n\ndefineOptions({\n  name: 'RuiDialog',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n  persistent = false,\n  width = '98%',\n  maxWidth,\n  size,\n  bottomSheet = false,\n  classNames,\n  zIndex = 'var(--rui-z-dialog)',\n  ariaLabel,\n} = defineProps<DialogProps>();\n\nconst emit = defineEmits<{\n  'closed': [];\n  'click:outside': [];\n  'click:esc': [];\n  /**\n   * The overlay stack asked this dialog to go, which is what a back gesture\n   * reaches it as. Closes unless persistent, like escape does, so a dialog that\n   * has to ask before discarding should bind `persistent` and answer here.\n   */\n  'dismiss': [];\n}>();\n\ndefineSlots<{\n  activator?: (props: { attrs: { onClick: () => void }; isOpen: boolean }) => any;\n  default?: (props: { isOpen: boolean; close: () => void }) => any;\n}>();\n\nconst transitioning = ref<boolean>(false);\nconst contentRef = useTemplateRef<HTMLDivElement>('contentRef');\n\nconst leaveTimeout = useTimeoutManager();\n\nconst alive = computed<boolean>(() => get(modelValue) || get(transitioning));\n\nconst style = computed<{ width: string | undefined; maxWidth: string | undefined }>(() => ({\n  width: transformPropsUnit(width),\n  maxWidth: transformPropsUnit(maxWidth) ?? (size ? `var(--rui-dialog-${size})` : undefined),\n}));\n\nconst dialog = tv({\n  slots: {\n    root: 'fixed inset-0',\n    overlay: 'absolute inset-0 backdrop-blur-sm bg-rui-neutral-950/40 dark:bg-black/60',\n    content: 'absolute left-1/2 bottom-0 -translate-x-1/2 outline-hidden overflow-y-auto max-h-(--rui-dialog-max-height)',\n  },\n  variants: {\n    /*\n     * The corners match a RuiCard's, the usual content, which the box clips while it scrolls.\n     * A sheet sits on the screen's bottom edge, so its content's bottom corners are squared.\n     */\n    bottomSheet: {\n      true: { content: 'rounded-t-rui-card shadow-rui-drawer *:rounded-b-none' },\n      false: { content: 'top-1/2 -translate-y-1/2 bottom-auto rounded-rui-card shadow-rui-menu' },\n    },\n  },\n  defaultVariants: { bottomSheet: false },\n});\n\nconst ui = computed<ReturnType<typeof dialog>>(() => dialog({ bottomSheet }));\n\nconst dialogAttrs: { onClick: () => void } = {\n  onClick: toggle,\n};\n\nconst contentTransition = computed<Record<string, string>>(() => {\n  if (!bottomSheet) {\n    return {\n      enterFromClass: 'opacity-0 scale-95',\n      enterActiveClass: 'transition-all ease-out duration-200',\n      enterToClass: 'opacity-100 scale-100',\n      leaveFromClass: 'opacity-100 scale-100',\n      leaveActiveClass: 'transition-all ease-in duration-150',\n      leaveToClass: 'opacity-0 scale-95',\n    };\n  }\n\n  return {\n    enterFromClass: 'translate-y-full',\n    enterActiveClass: 'transition-transform ease-out duration-300',\n    enterToClass: 'translate-y-0',\n    leaveFromClass: 'translate-y-0',\n    leaveActiveClass: 'transition-transform ease-in duration-200',\n    leaveToClass: 'translate-y-full',\n  };\n});\n\nfunction toggle(): void {\n  set(modelValue, !get(modelValue));\n}\n\nfunction close(): void {\n  set(modelValue, false);\n}\n\nfunction onEscClick(): void {\n  if (!persistent) {\n    close();\n  }\n  emit('click:esc');\n}\n\nfunction onClickOutside(): void {\n  if (!persistent) {\n    close();\n  }\n  emit('click:outside');\n}\n\nfunction onDismiss(): void {\n  if (!persistent) {\n    close();\n  }\n  emit('dismiss');\n}\n\n/**\n * Registration follows `modelValue` alone, never `persistent`: a dialog that\n * turns persistent partway through its life has to stay in the stack and refuse\n * in `onDismiss`, or the gesture starts passing through exactly once there is\n * work to lose. A dialog playing its leave transition is already on its way out\n * and does not hold the stack.\n */\nuseDismissableOverlay(modelValue, onDismiss);\n\nfunction onLeaveComplete(): void {\n  leaveTimeout.clear();\n  if (get(transitioning)) {\n    set(transitioning, false);\n    emit('closed');\n  }\n}\n\nwatch(modelValue, (value) => {\n  if (!value) {\n    set(transitioning, true);\n    // Safety fallback if transitionend is not detected\n    leaveTimeout.create(onLeaveComplete, 400);\n  }\n});\n\nwatch(contentRef, (ref) => {\n  if (ref) {\n    nextTick(() => ref.focus());\n  }\n  else {\n    onLeaveComplete();\n  }\n});\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <slot\n      name=\"activator\"\n      v-bind=\"{ attrs: dialogAttrs, isOpen: modelValue }\"\n    />\n    <Teleport to=\"body\">\n      <div\n        v-if=\"alive\"\n        :class=\"ui.root({ class: cn(classNames?.root) })\"\n        :style=\"{ zIndex }\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        :aria-label=\"ariaLabel\"\n        tabindex=\"0\"\n        v-bind=\"getNonRootAttrs($attrs)\"\n        @keydown.esc.stop=\"onEscClick()\"\n      >\n        <Transition\n          enter-from-class=\"opacity-0\"\n          enter-active-class=\"transition-opacity ease-out duration-200\"\n          enter-to-class=\"opacity-100\"\n          leave-from-class=\"opacity-100\"\n          leave-active-class=\"transition-opacity ease-in duration-150\"\n          leave-to-class=\"opacity-0\"\n        >\n          <div\n            v-if=\"modelValue\"\n            data-id=\"overlay\"\n            :class=\"ui.overlay()\"\n            @click.stop=\"onClickOutside()\"\n          />\n        </Transition>\n        <Transition\n          v-bind=\"contentTransition\"\n          @after-leave=\"onLeaveComplete()\"\n        >\n          <div\n            v-if=\"modelValue\"\n            ref=\"contentRef\"\n            data-id=\"content\"\n            :style=\"style\"\n            tabindex=\"0\"\n            :data-bottom-sheet=\"bottomSheet || undefined\"\n            :class=\"ui.content({ class: cn(classNames?.content) })\"\n          >\n            <ButtonGroupBoundary>\n              <slot v-bind=\"{ isOpen: modelValue, close }\" />\n            </ButtonGroupBoundary>\n          </div>\n        </Transition>\n      </div>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/overlays/dialog/RuiDialog.vue.d.ts

@@ -1,5 +1,5 @@
 import type { DialogSize } from '../../../consts/tokens.js';
-import type { VueClassValue } from '../../../types/class-value';
+import type { VueClassValue } from '../../../types/class-value.js';
 export interface RuiDialogClassNames {
     root?: VueClassValue;
     content?: VueClassValue;