@rotki/ui-library 2.26.1 → 3.0.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rotki/ui-library",
-  "version": "2.26.1",
+  "version": "3.0.0-beta.1",
   "description": "A vue design system and component library for rotki",
   "type": "module",
   "keywords": [
@@ -30,10 +30,11 @@
       "import": "./dist/index.js",
       "default": "./dist/index.js"
     },
-    "./theme": {
-      "types": "./dist/theme/index.d.ts",
-      "import": "./dist/theme/index.js",
-      "default": "./dist/theme/index.js"
+    "./tailwind.css": {
+      "default": "./dist/tailwind.css"
+    },
+    "./theme.css": {
+      "default": "./dist/theme.css"
     },
     "./components": {
       "types": "./dist/components/index.d.ts",
@@ -59,9 +60,6 @@
   },
   "typesVersions": {
     "*": {
-      "theme": [
-        "./dist/theme/index.d.ts"
-      ],
       "composables": [
         "./dist/composables/index.d.ts"
       ],
@@ -76,6 +74,9 @@
       ]
     }
   },
+  "sideEffects": [
+    "**/*.css"
+  ],
   "peerDependencies": {
     "dayjs": ">=1.11.13 <12",
     "vue": ">=3.5.0",
@@ -96,13 +97,15 @@
     "tinycolor2": "1.6.0"
   },
   "devDependencies": {
-    "@fontsource/roboto": "5.3.0",
+    "@fontsource-variable/geist-mono": "5.3.0",
+    "@fontsource-variable/inter": "5.3.0",
     "@storybook/addon-a11y": "10.6.0",
     "@storybook/addon-docs": "10.6.0",
     "@storybook/addon-links": "10.6.0",
     "@storybook/addon-themes": "10.6.0",
     "@storybook/addon-vitest": "10.6.0",
     "@storybook/vue3-vite": "10.6.0",
+    "@tailwindcss/vite": "4.3.3",
     "@tsconfig/node24": "24.0.5",
     "@types/node": "24.13.3",
     "@types/tinycolor2": "1.4.6",
@@ -113,24 +116,20 @@
     "@vitest/ui": "5.0.0",
     "@vue/test-utils": "2.5.0",
     "@vue/tsconfig": "0.9.1",
-    "autoprefixer": "10.5.4",
     "cac": "7.0.0",
     "consola": "3.4.2",
     "fast-glob": "3.3.3",
     "fast-xml-parser": "5.11.1",
-    "fs-extra": "11.4.0",
     "happy-dom": "20.14.0",
     "lucide": "1.40.0",
     "msw": "2.15.0",
-    "postcss": "8.5.28",
     "storybook": "10.6.0",
-    "tailwindcss": "3.4.19",
+    "tailwindcss": "4.3.3",
     "tsc-alias": "1.9.4",
     "tsx": "4.23.13",
     "typescript": "6.0.3",
     "unplugin-auto-import": "21.1.0",
     "vite": "8.2.2",
-    "vite-plugin-vue-devtools": "8.2.1",
     "vitest": "5.0.0",
     "vue": "3.5.42",
     "vue-component-meta": "3.3.11",
@@ -143,15 +142,17 @@
   },
   "scripts": {
     "build:prod": "tsx scripts/dist-build.mjs",
-    "build": "pnpm run generate-icons && vite build && cp src/vite-plugin/client.d.ts dist/vite-plugin/",
+    "build": "pnpm run generate-icons && vite build && cp src/vite-plugin/client.d.ts dist/vite-plugin/ && tsx scripts/copy-css.ts",
     "build:storybook": "STORYBOOK=true storybook build",
-    "build:tailwind": "tailwindcss -o dist/style.css --minify",
     "build:types": "vue-tsc -p tsconfig.build.json",
     "build:web-types": "tsx scripts/build-web-types.mjs",
     "generate-icons": "tsx scripts/generate-icons.ts",
+    "generate-theme": "tsx scripts/generate-theme.ts",
     "resolve:alias": "tsc-alias --replacer ./scripts/tsc-alias-replacer.cjs -p tsconfig.build.json --dir dist",
     "scan:library-icons": "tsx scripts/scan-library-icons.ts",
     "verify:dist": "tsx scripts/verify-dist.ts",
+    "verify:tree-shaking": "tsx scripts/verify-tree-shaking.ts",
+    "verify:css-size": "tsx scripts/verify-css-size.ts",
     "dev": "vite",
     "storybook": "storybook dev -p 6006",
     "test": "vitest --ui --project=unit",

package/dist/components/icons/LazyIcon.vue.d.ts

@@ -1,8 +0,0 @@
-import type { RuiIcons } from '../../icons/index.js';
-export interface LazyIconProps {
-    name: RuiIcons;
-    size?: number | string;
-}
-declare const __VLS_export: import("vue").DefineComponent<LazyIconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LazyIconProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/components/logos/use-logo-sources.d.ts

@@ -1,29 +0,0 @@
-import type { ExternalLinks } from './RuiLogo.vue';
-/**
- * Returns cached logo sources synchronously from sessionStorage.
- * Returns undefined if nothing is cached or sessionStorage is unavailable.
- */
-export declare function getCachedLogoSources(branch: string): ExternalLinks | undefined;
-/**
- * Returns a previously verified (successfully decoded) seasonal logo URL
- * for the given branch and logo type from sessionStorage.
- */
-export declare function getVerifiedLogoUrl(branch: string, logo: string): string | undefined;
-/**
- * Stores a verified seasonal logo URL in sessionStorage after successful decode.
- */
-export declare function setVerifiedLogoUrl(branch: string, logo: string, url: string): void;
-/**
- * Removes a previously verified seasonal logo URL from sessionStorage.
- * Called when an image fails to load so stale entries aren't trusted on next load.
- */
-export declare function removeVerifiedLogoUrl(branch: string, logo: string): void;
-/**
- * Fetches external logo sources for a given branch, deduplicating concurrent requests.
- * Uses a module-level cache so all RuiLogo instances share a single fetch per branch.
- */
-export declare function getLogoSources(branch: string): Promise<ExternalLinks | undefined>;
-/**
- * Clears the module-level cache and sessionStorage entries. Exposed for testing only.
- */
-export declare function clearLogoSourcesCache(): void;

package/dist/components/logos/use-logo-sources.js

@@ -1,90 +0,0 @@
-import { transformCase } from "../../utils/helpers.js";
-//#region src/components/logos/use-logo-sources.ts
-var ASSET_MAPPINGS_URL = "https://raw.githubusercontent.com/rotki/data";
-var SESSION_SOURCES_PREFIX = "rui-logo-sources";
-var SESSION_VERIFIED_PREFIX = "rui-logo-verified";
-/**
-* Deduplicates asset-mappings fetches across every RuiLogo, keyed by branch so
-* two branches never share stale data.
-*/
-var sourcesCache = /* @__PURE__ */ new Map();
-function isExternalLinks(value) {
-	if (typeof value !== "object" || value === null) return false;
-	return Object.values(value).every((v) => v === void 0 || typeof v === "string");
-}
-function writeSessionStorage(key, value) {
-	try {
-		sessionStorage.setItem(key, value);
-	} catch {}
-}
-function readSessionStorage(key) {
-	try {
-		return sessionStorage.getItem(key) ?? void 0;
-	} catch {
-		return;
-	}
-}
-/**
-* Returns cached logo sources synchronously from sessionStorage.
-* Returns undefined if nothing is cached or sessionStorage is unavailable.
-*/
-function getCachedLogoSources(branch) {
-	const raw = readSessionStorage(`${SESSION_SOURCES_PREFIX}:${branch}`);
-	if (!raw) return void 0;
-	try {
-		const parsed = JSON.parse(raw);
-		if (isExternalLinks(parsed)) return parsed;
-	} catch {}
-}
-/**
-* Returns a previously verified (successfully decoded) seasonal logo URL
-* for the given branch and logo type from sessionStorage.
-*/
-function getVerifiedLogoUrl(branch, logo) {
-	return readSessionStorage(`${SESSION_VERIFIED_PREFIX}:${branch}:${logo}`);
-}
-/**
-* Stores a verified seasonal logo URL in sessionStorage after successful decode.
-*/
-function setVerifiedLogoUrl(branch, logo, url) {
-	writeSessionStorage(`${SESSION_VERIFIED_PREFIX}:${branch}:${logo}`, url);
-}
-/**
-* Removes a previously verified seasonal logo URL from sessionStorage.
-* Called when an image fails to load so stale entries aren't trusted on next load.
-*/
-function removeVerifiedLogoUrl(branch, logo) {
-	try {
-		sessionStorage.removeItem(`${SESSION_VERIFIED_PREFIX}:${branch}:${logo}`);
-	} catch {}
-}
-async function fetchSourcesFromNetwork(branch) {
-	try {
-		const response = await fetch(`${ASSET_MAPPINGS_URL}/${branch}/constants/asset-mappings.json`);
-		if (!response.ok) return void 0;
-		const json = await response.json();
-		const links = transformCase(json?.logo, "camelCase");
-		if (isExternalLinks(links)) {
-			writeSessionStorage(`${SESSION_SOURCES_PREFIX}:${branch}`, JSON.stringify(links));
-			return links;
-		}
-		return;
-	} catch {
-		return;
-	}
-}
-/**
-* Fetches external logo sources for a given branch, deduplicating concurrent requests.
-* Uses a module-level cache so all RuiLogo instances share a single fetch per branch.
-*/
-function getLogoSources(branch) {
-	const cached = sourcesCache.get(branch);
-	if (cached) return cached;
-	const promise = fetchSourcesFromNetwork(branch);
-	sourcesCache.set(branch, promise);
-	return promise;
-}
-//#endregion
-export { getCachedLogoSources, getLogoSources, getVerifiedLogoUrl, removeVerifiedLogoUrl, setVerifiedLogoUrl };
-
-//# sourceMappingURL=use-logo-sources.js.map

package/dist/components/logos/use-logo-sources.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-logo-sources.js","names":[],"sources":["../../../src/components/logos/use-logo-sources.ts"],"sourcesContent":["import type { ExternalLinks } from '@/components/logos/RuiLogo.vue';\nimport { transformCase } from '@/utils/helpers';\n\nconst ASSET_MAPPINGS_URL = 'https://raw.githubusercontent.com/rotki/data';\nconst SESSION_SOURCES_PREFIX = 'rui-logo-sources';\nconst SESSION_VERIFIED_PREFIX = 'rui-logo-verified';\n\n/**\n * Deduplicates asset-mappings fetches across every RuiLogo, keyed by branch so\n * two branches never share stale data.\n */\nconst sourcesCache = new Map<string, Promise<ExternalLinks | undefined>>();\n\nfunction isExternalLinks(value: unknown): value is ExternalLinks {\n  if (typeof value !== 'object' || value === null)\n    return false;\n\n  return Object.values(value).every(v => v === undefined || typeof v === 'string');\n}\n\nfunction writeSessionStorage(key: string, value: string): void {\n  try {\n    sessionStorage.setItem(key, value);\n  }\n  catch {\n    // sessionStorage may be full or unavailable\n  }\n}\n\nfunction readSessionStorage(key: string): string | undefined {\n  try {\n    return sessionStorage.getItem(key) ?? undefined;\n  }\n  catch {\n    return undefined;\n  }\n}\n\nfunction clearSessionStorage(prefix: string): void {\n  try {\n    const keysToRemove: string[] = [];\n    for (let i = 0; i < sessionStorage.length; i++) {\n      const key = sessionStorage.key(i);\n      if (key?.startsWith(prefix))\n        keysToRemove.push(key);\n    }\n    keysToRemove.forEach(key => sessionStorage.removeItem(key));\n  }\n  catch {\n    // sessionStorage may be unavailable\n  }\n}\n\n/**\n * Returns cached logo sources synchronously from sessionStorage.\n * Returns undefined if nothing is cached or sessionStorage is unavailable.\n */\nexport function getCachedLogoSources(branch: string): ExternalLinks | undefined {\n  const raw = readSessionStorage(`${SESSION_SOURCES_PREFIX}:${branch}`);\n  if (!raw)\n    return undefined;\n\n  try {\n    const parsed: unknown = JSON.parse(raw);\n    if (isExternalLinks(parsed))\n      return parsed;\n  }\n  catch {\n    // Invalid JSON, ignore\n  }\n  return undefined;\n}\n\n/**\n * Returns a previously verified (successfully decoded) seasonal logo URL\n * for the given branch and logo type from sessionStorage.\n */\nexport function getVerifiedLogoUrl(branch: string, logo: string): string | undefined {\n  return readSessionStorage(`${SESSION_VERIFIED_PREFIX}:${branch}:${logo}`);\n}\n\n/**\n * Stores a verified seasonal logo URL in sessionStorage after successful decode.\n */\nexport function setVerifiedLogoUrl(branch: string, logo: string, url: string): void {\n  writeSessionStorage(`${SESSION_VERIFIED_PREFIX}:${branch}:${logo}`, url);\n}\n\n/**\n * Removes a previously verified seasonal logo URL from sessionStorage.\n * Called when an image fails to load so stale entries aren't trusted on next load.\n */\nexport function removeVerifiedLogoUrl(branch: string, logo: string): void {\n  try {\n    sessionStorage.removeItem(`${SESSION_VERIFIED_PREFIX}:${branch}:${logo}`);\n  }\n  catch {\n    // sessionStorage may be unavailable\n  }\n}\n\nasync function fetchSourcesFromNetwork(branch: string): Promise<ExternalLinks | undefined> {\n  try {\n    const response = await fetch(\n      `${ASSET_MAPPINGS_URL}/${branch}/constants/asset-mappings.json`,\n    );\n\n    if (!response.ok)\n      return undefined;\n\n    const json = await response.json();\n    const links = transformCase(json?.logo, 'camelCase');\n    if (isExternalLinks(links)) {\n      writeSessionStorage(`${SESSION_SOURCES_PREFIX}:${branch}`, JSON.stringify(links));\n      return links;\n    }\n\n    return undefined;\n  }\n  catch {\n    return undefined;\n  }\n}\n\n/**\n * Fetches external logo sources for a given branch, deduplicating concurrent requests.\n * Uses a module-level cache so all RuiLogo instances share a single fetch per branch.\n */\nexport function getLogoSources(branch: string): Promise<ExternalLinks | undefined> {\n  const cached = sourcesCache.get(branch);\n  if (cached)\n    return cached;\n\n  const promise = fetchSourcesFromNetwork(branch);\n  sourcesCache.set(branch, promise);\n  return promise;\n}\n\n/**\n * Clears the module-level cache and sessionStorage entries. Exposed for testing only.\n */\nexport function clearLogoSourcesCache(): void {\n  sourcesCache.clear();\n  clearSessionStorage(SESSION_SOURCES_PREFIX);\n  clearSessionStorage(SESSION_VERIFIED_PREFIX);\n}\n"],"mappings":";;AAGA,IAAM,qBAAqB;AAC3B,IAAM,yBAAyB;AAC/B,IAAM,0BAA0B;;;;;AAMhC,IAAM,+BAAe,IAAI,IAAgD;AAEzE,SAAS,gBAAgB,OAAwC;CAC/D,IAAI,OAAO,UAAU,YAAY,UAAU,MACzC,OAAO;CAET,OAAO,OAAO,OAAO,KAAK,CAAC,CAAC,OAAM,MAAK,MAAM,KAAA,KAAa,OAAO,MAAM,QAAQ;AACjF;AAEA,SAAS,oBAAoB,KAAa,OAAqB;CAC7D,IAAI;EACF,eAAe,QAAQ,KAAK,KAAK;CACnC,QACM,CAEN;AACF;AAEA,SAAS,mBAAmB,KAAiC;CAC3D,IAAI;EACF,OAAO,eAAe,QAAQ,GAAG,KAAK,KAAA;CACxC,QACM;EACJ;CACF;AACF;;;;;AAqBA,SAAgB,qBAAqB,QAA2C;CAC9E,MAAM,MAAM,mBAAmB,GAAG,uBAAuB,GAAG,QAAQ;CACpE,IAAI,CAAC,KACH,OAAO,KAAA;CAET,IAAI;EACF,MAAM,SAAkB,KAAK,MAAM,GAAG;EACtC,IAAI,gBAAgB,MAAM,GACxB,OAAO;CACX,QACM,CAEN;AAEF;;;;;AAMA,SAAgB,mBAAmB,QAAgB,MAAkC;CACnF,OAAO,mBAAmB,GAAG,wBAAwB,GAAG,OAAO,GAAG,MAAM;AAC1E;;;;AAKA,SAAgB,mBAAmB,QAAgB,MAAc,KAAmB;CAClF,oBAAoB,GAAG,wBAAwB,GAAG,OAAO,GAAG,QAAQ,GAAG;AACzE;;;;;AAMA,SAAgB,sBAAsB,QAAgB,MAAoB;CACxE,IAAI;EACF,eAAe,WAAW,GAAG,wBAAwB,GAAG,OAAO,GAAG,MAAM;CAC1E,QACM,CAEN;AACF;AAEA,eAAe,wBAAwB,QAAoD;CACzF,IAAI;EACF,MAAM,WAAW,MAAM,MACrB,GAAG,mBAAmB,GAAG,OAAO,+BAClC;EAEA,IAAI,CAAC,SAAS,IACZ,OAAO,KAAA;EAET,MAAM,OAAO,MAAM,SAAS,KAAK;EACjC,MAAM,QAAQ,cAAc,MAAM,MAAM,WAAW;EACnD,IAAI,gBAAgB,KAAK,GAAG;GAC1B,oBAAoB,GAAG,uBAAuB,GAAG,UAAU,KAAK,UAAU,KAAK,CAAC;GAChF,OAAO;EACT;EAEA;CACF,QACM;EACJ;CACF;AACF;;;;;AAMA,SAAgB,eAAe,QAAoD;CACjF,MAAM,SAAS,aAAa,IAAI,MAAM;CACtC,IAAI,QACF,OAAO;CAET,MAAM,UAAU,wBAAwB,MAAM;CAC9C,aAAa,IAAI,QAAQ,OAAO;CAChC,OAAO;AACT"}

package/dist/components/steppers/RuiStepperCustomIcon.js

@@ -1,7 +0,0 @@
-import RuiStepperCustomIcon_vue_vue_type_script_setup_true_lang_default from "./RuiStepperCustomIcon.vue_vue_type_script_setup_true_lang.js";
-//#region src/components/steppers/RuiStepperCustomIcon.vue
-var RuiStepperCustomIcon_default = RuiStepperCustomIcon_vue_vue_type_script_setup_true_lang_default;
-//#endregion
-export { RuiStepperCustomIcon_default as default };
-
-//# sourceMappingURL=RuiStepperCustomIcon.js.map

package/dist/components/steppers/RuiStepperCustomIcon.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"RuiStepperCustomIcon.js","names":[],"sources":["../../../src/components/steppers/RuiStepperCustomIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { StepperState } from '@/types/stepper';\nimport { tv } from '@/utils/tv';\n\ntype IndicatorState = typeof StepperState.inactive | typeof StepperState.active;\n\nconst { state = StepperState.inactive } = defineProps<{\n  state?: StepperState;\n  index: number;\n}>();\n\nconst stepperCustomIcon = tv({\n  base: 'inline-flex items-center justify-center rounded-full h-10 w-10 shrink-0 border border-rui-primary',\n  variants: {\n    state: {\n      [StepperState.inactive]: 'text-xs bg-white dark:bg-rui-primary dark:text-white dark:border-white',\n      [StepperState.active]: 'text-white bg-rui-primary dark:bg-white dark:text-rui-primary',\n    },\n  },\n  defaultVariants: { state: StepperState.active },\n});\n\nconst indicatorState = computed<IndicatorState>(() => state === StepperState.inactive ? StepperState.inactive : StepperState.active);\n</script>\n\n<template>\n  <span :class=\"stepperCustomIcon({ state: indicatorState })\">\n    <span\n      v-if=\"state === StepperState.inactive\"\n      class=\"text-rui-primary dark:text-white\"\n    >\n      {{ index }}\n    </span>\n    <RuiIcon\n      v-else-if=\"state === StepperState.active\"\n      name=\"lu-checkbox-blank-circle-fill\"\n      :size=\"20\"\n    />\n    <RuiIcon\n      v-else-if=\"state === StepperState.done\"\n      :size=\"20\"\n      name=\"lu-check\"\n    />\n    <span v-else>\n      {{ index }}\n    </span>\n  </span>\n</template>\n"],"mappings":""}

package/dist/components/steppers/RuiStepperCustomIcon.vue.d.ts

@@ -1,8 +0,0 @@
-import { StepperState } from '../../types/stepper.js';
-type __VLS_Props = {
-    state?: StepperState;
-    index: number;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/components/steppers/RuiStepperCustomIcon.vue_vue_type_script_setup_true_lang.js

@@ -1,43 +0,0 @@
-import { StepperState } from "../../types/stepper.js";
-import { tv } from "../../utils/tv.js";
-import RuiIcon_default from "../icons/RuiIcon.js";
-import { computed, createBlock, createElementBlock, defineComponent, normalizeClass, openBlock, toDisplayString, unref } from "vue";
-//#region src/components/steppers/RuiStepperCustomIcon.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = {
-	key: 0,
-	class: "text-rui-primary dark:text-white"
-};
-var _hoisted_2 = { key: 3 };
-var RuiStepperCustomIcon_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
-	__name: "RuiStepperCustomIcon",
-	props: {
-		state: { default: () => StepperState.inactive },
-		index: {}
-	},
-	setup(__props) {
-		const stepperCustomIcon = tv({
-			base: "inline-flex items-center justify-center rounded-full h-10 w-10 shrink-0 border border-rui-primary",
-			variants: { state: {
-				[StepperState.inactive]: "text-xs bg-white dark:bg-rui-primary dark:text-white dark:border-white",
-				[StepperState.active]: "text-white bg-rui-primary dark:bg-white dark:text-rui-primary"
-			} },
-			defaultVariants: { state: StepperState.active }
-		});
-		const indicatorState = computed(() => __props.state === StepperState.inactive ? StepperState.inactive : StepperState.active);
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("span", { class: normalizeClass(unref(stepperCustomIcon)({ state: unref(indicatorState) })) }, [__props.state === unref(StepperState).inactive ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(__props.index), 1)) : __props.state === unref(StepperState).active ? (openBlock(), createBlock(RuiIcon_default, {
-				key: 1,
-				name: "lu-checkbox-blank-circle-fill",
-				size: 20
-			})) : __props.state === unref(StepperState).done ? (openBlock(), createBlock(RuiIcon_default, {
-				key: 2,
-				size: 20,
-				name: "lu-check"
-			})) : (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(__props.index), 1))], 2);
-		};
-	}
-});
-//#endregion
-export { RuiStepperCustomIcon_vue_vue_type_script_setup_true_lang_default as default };
-
-//# sourceMappingURL=RuiStepperCustomIcon.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/steppers/RuiStepperCustomIcon.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"RuiStepperCustomIcon.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/steppers/RuiStepperCustomIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { StepperState } from '@/types/stepper';\nimport { tv } from '@/utils/tv';\n\ntype IndicatorState = typeof StepperState.inactive | typeof StepperState.active;\n\nconst { state = StepperState.inactive } = defineProps<{\n  state?: StepperState;\n  index: number;\n}>();\n\nconst stepperCustomIcon = tv({\n  base: 'inline-flex items-center justify-center rounded-full h-10 w-10 shrink-0 border border-rui-primary',\n  variants: {\n    state: {\n      [StepperState.inactive]: 'text-xs bg-white dark:bg-rui-primary dark:text-white dark:border-white',\n      [StepperState.active]: 'text-white bg-rui-primary dark:bg-white dark:text-rui-primary',\n    },\n  },\n  defaultVariants: { state: StepperState.active },\n});\n\nconst indicatorState = computed<IndicatorState>(() => state === StepperState.inactive ? StepperState.inactive : StepperState.active);\n</script>\n\n<template>\n  <span :class=\"stepperCustomIcon({ state: indicatorState })\">\n    <span\n      v-if=\"state === StepperState.inactive\"\n      class=\"text-rui-primary dark:text-white\"\n    >\n      {{ index }}\n    </span>\n    <RuiIcon\n      v-else-if=\"state === StepperState.active\"\n      name=\"lu-checkbox-blank-circle-fill\"\n      :size=\"20\"\n    />\n    <RuiIcon\n      v-else-if=\"state === StepperState.done\"\n      :size=\"20\"\n      name=\"lu-check\"\n    />\n    <span v-else>\n      {{ index }}\n    </span>\n  </span>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;EAYA,MAAM,oBAAoB,GAAG;GAC3B,MAAM;GACN,UAAU,EACR,OAAO;KACJ,aAAa,WAAW;KACxB,aAAa,SAAS;GACzB,EACF;GACA,iBAAiB,EAAE,OAAO,aAAa,OAAO;EAChD,CAAC;EAED,MAAM,iBAAiB,eAA+B,QAAA,UAAU,aAAa,WAAW,aAAa,WAAW,aAAa,MAAM;;GAIjI,OAAA,UAAA,GAAA,mBAoBO,QAAA,EApBA,OAAK,eAAE,MAAA,iBAAA,CAAiB,CAAA,EAAA,OAAU,MAAA,cAAA,EAAc,CAAA,CAAA,EAAA,GAAA,CAE7C,QAAA,UAAU,MAAA,YAAA,CAAY,CAAC,YAD/B,UAAA,GAAA,mBAKO,QALP,YAKO,gBADF,QAAA,KAAK,GAAA,CAAA,KAGG,QAAA,UAAU,MAAA,YAAA,CAAY,CAAC,UADpC,UAAA,GAAA,YAIE,iBAAA;;IAFA,MAAK;IACJ,MAAM;GAGI,CAAA,KAAA,QAAA,UAAU,MAAA,YAAA,CAAY,CAAC,QADpC,UAAA,GAAA,YAIE,iBAAA;;IAFC,MAAM;IACP,MAAK;GAEP,CAAA,MAAA,UAAA,GAAA,mBAEO,QAAA,YAAA,gBADF,QAAA,KAAK,GAAA,CAAA,EAAA,GAAA,CAAA"}

package/dist/composables/colors/common.d.ts

@@ -1,20 +0,0 @@
-import type { ContextColorsType } from '../../consts/colors.js';
-/**
- * Base color class maps used by multiple components.
- * Each map provides static Tailwind class strings keyed by context color.
- */
-/** `text-rui-{color}` — used by icon, checkbox (checked), form focus labels, etc. */
-export declare const textColorMap: Record<ContextColorsType, string>;
-/** `bg-rui-{color}` — used by switch, slider track, chip filled, etc. */
-export declare const bgColorMap: Record<ContextColorsType, string>;
-/** `before:bg-rui-{color}` — used by checkbox and radio ripple */
-export declare const beforeBgColorMap: Record<ContextColorsType, string>;
-/** `border-rui-{color}` — used by text fields, alerts, etc. */
-export declare const borderColorMap: Record<ContextColorsType, string>;
-/** `after:border-rui-{color}` — used by text field and text area labels */
-export declare const afterBorderColorMap: Record<ContextColorsType, string>;
-/**
- * Colors that need `dark:text-rui-light-text` on filled/default variants.
- * warning, success, info need special dark mode text treatment.
- */
-export declare const darkLightTextColorMap: Record<ContextColorsType, string>;

package/dist/composables/colors/index.d.ts

@@ -1,3 +0,0 @@
-export { afterBorderColorMap, beforeBgColorMap, bgColorMap, borderColorMap, darkLightTextColorMap, textColorMap, } from './common';
-export { getTextInputColorClasses, getTextInputValidationClasses } from './text-input';
-export type { TextInputColorClasses, TextInputValidationClasses } from './text-input';

package/dist/composables/colors/text-input.d.ts

@@ -1,27 +0,0 @@
-import type { ContextColorsType } from '../../consts/colors.js';
-interface TextInputColorClasses {
-    /** Focus label text color */
-    focusLabel: string;
-    /** Label after pseudo-element border */
-    labelAfterBorder: string;
-    /** Outlined fieldset border on focus */
-    outlinedFocusFieldset: string;
-    /** Text color for prepend, append, and input */
-    textContent: string;
-}
-interface TextInputValidationClasses {
-    /** Input border color with !important */
-    inputBorder: string;
-    /** Label text + after border with !important */
-    label: string;
-    /** Fieldset border with !important */
-    fieldset: string;
-}
-/**
- * Shared by RuiTextField and RuiTextArea — identical color patterns.
- *
- * Maps the SCSS color loop for all 6 context colors.
- */
-export declare function getTextInputColorClasses(color?: ContextColorsType): TextInputColorClasses | undefined;
-export declare function getTextInputValidationClasses(color: 'error' | 'success'): TextInputValidationClasses;
-export type { TextInputColorClasses, TextInputValidationClasses };

package/dist/composables/forms/auto-complete/index.js

@@ -1,5 +0,0 @@
-import { useAutoCompleteFocus } from "./focus.js";
-import { useAutoCompleteKeyboardNavigation } from "./keyboard-navigation.js";
-import { useAutoCompleteSearch } from "./search.js";
-import { useAutoCompleteValue } from "./value.js";
-export { useAutoCompleteFocus, useAutoCompleteKeyboardNavigation, useAutoCompleteSearch, useAutoCompleteValue };

package/dist/composables/forms/use-label-with-quote.d.ts

@@ -1,2 +0,0 @@
-import type { ComputedRef } from 'vue';
-export declare function useLabelWithQuote(label: () => string, required: () => boolean): ComputedRef<string>;

package/dist/composables/popper.d.ts

@@ -1,16 +0,0 @@
-import { type FloatingOptions, Placement, Strategy } from './floating.js';
-/** @deprecated Use FloatingOptions instead */
-export interface PopperOptions {
-    locked?: boolean;
-    overflowPadding?: number;
-    offsetDistance?: number;
-    offsetSkid?: number;
-    placement?: Placement;
-    strategy?: Strategy;
-    gpuAcceleration?: boolean;
-    adaptive?: boolean;
-    scroll?: boolean;
-    resize?: boolean;
-}
-/** @deprecated Use FloatingOptions directly. Will be removed in next major. */
-export declare function toFloatingOptions(opts: PopperOptions): FloatingOptions;

package/dist/composables/popper.js

@@ -1,23 +0,0 @@
-import { Placement, Strategy } from "./floating.js";
-//#region src/composables/popper.ts
-/** @deprecated Use FloatingOptions directly. Will be removed in next major. */
-function toFloatingOptions(opts) {
-	return {
-		autoUpdate: {
-			resize: opts.resize ?? true,
-			scroll: opts.scroll ?? true
-		},
-		flip: !(opts.locked ?? false),
-		offset: {
-			crossAxis: opts.offsetSkid ?? 0,
-			mainAxis: opts.offsetDistance ?? 8
-		},
-		placement: opts.placement ?? Placement.bottom,
-		shiftPadding: opts.overflowPadding ?? 8,
-		strategy: opts.strategy ?? Strategy.absolute
-	};
-}
-//#endregion
-export { toFloatingOptions };
-
-//# sourceMappingURL=popper.js.map

package/dist/composables/popper.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"popper.js","names":[],"sources":["../../src/composables/popper.ts"],"sourcesContent":["import { type FloatingOptions, Placement, Strategy } from './floating';\n\n/** @deprecated Use FloatingOptions instead */\nexport interface PopperOptions {\n  locked?: boolean;\n  overflowPadding?: number;\n  offsetDistance?: number;\n  offsetSkid?: number;\n  placement?: Placement;\n  strategy?: Strategy;\n  gpuAcceleration?: boolean;\n  adaptive?: boolean;\n  scroll?: boolean;\n  resize?: boolean;\n}\n\n/** @deprecated Use FloatingOptions directly. Will be removed in next major. */\nexport function toFloatingOptions(opts: PopperOptions): FloatingOptions {\n  return {\n    autoUpdate: {\n      resize: opts.resize ?? true,\n      scroll: opts.scroll ?? true,\n    },\n    flip: !(opts.locked ?? false),\n    offset: {\n      crossAxis: opts.offsetSkid ?? 0,\n      mainAxis: opts.offsetDistance ?? 8,\n    },\n    placement: opts.placement ?? Placement.bottom,\n    shiftPadding: opts.overflowPadding ?? 8,\n    strategy: opts.strategy ?? Strategy.absolute,\n  };\n}\n"],"mappings":";;;AAiBA,SAAgB,kBAAkB,MAAsC;CACtE,OAAO;EACL,YAAY;GACV,QAAQ,KAAK,UAAU;GACvB,QAAQ,KAAK,UAAU;EACzB;EACA,MAAM,EAAE,KAAK,UAAU;EACvB,QAAQ;GACN,WAAW,KAAK,cAAc;GAC9B,UAAU,KAAK,kBAAkB;EACnC;EACA,WAAW,KAAK,aAAa,UAAU;EACvC,cAAc,KAAK,mBAAmB;EACtC,UAAU,KAAK,YAAY,SAAS;CACtC;AACF"}

package/dist/consts/forms/auto-complete/index.d.ts

@@ -1,4 +0,0 @@
-declare const defaultTextProp = "text";
-declare const defaultKeyProp = "id";
-declare const defaultDisabledProp = "disabled";
-export { defaultDisabledProp, defaultKeyProp, defaultTextProp, };

package/dist/theme/index.d.ts

@@ -1,5 +0,0 @@
-declare const themePlugin: {
-    handler: import("tailwindcss/types/config").PluginCreator;
-    config?: Partial<import("tailwindcss/types/config").Config>;
-};
-export default themePlugin;

package/dist/theme/index.js

@@ -1,162 +0,0 @@
-import { baseColors, baseColorsIntensities, contextColors } from "../consts/colors.js";
-import plugin from "tailwindcss/plugin";
-//#region src/theme/index.ts
-var baseColorsCombination = Object.fromEntries(baseColors.map((color) => [color, Object.fromEntries(baseColorsIntensities.map((intensity) => [intensity, `rgba(var(--rui-${color}-${intensity}), <alpha-value>)`]))]));
-var contextColorsCombination = Object.fromEntries(["light", "dark"].map((theme) => [theme, Object.fromEntries(contextColors.map((color) => [color, {
-	darker: `rgba(var(--rui-${theme}-${color}-darker), <alpha-value>)`,
-	DEFAULT: `rgba(var(--rui-${theme}-${color}-main), <alpha-value>)`,
-	lighter: `rgba(var(--rui-${theme}-${color}-lighter), <alpha-value>)`,
-	shade: `color-mix(in srgb, black calc(<alpha-value> * 100%), rgb(var(--rui-${theme}-${color}-main)))`,
-	tint: `color-mix(in srgb, white calc(<alpha-value> * 100%), rgb(var(--rui-${theme}-${color}-main)))`
-}]))]));
-var adaptiveContextColorCombination = Object.fromEntries(contextColors.map((color) => [color, {
-	darker: `rgba(var(--rui-${color}-darker), <alpha-value>)`,
-	DEFAULT: `rgba(var(--rui-${color}-main), <alpha-value>)`,
-	lighter: `rgba(var(--rui-${color}-lighter), <alpha-value>)`,
-	shade: `color-mix(in srgb, black calc(<alpha-value> * 100%), rgb(var(--rui-${color}-main)))`,
-	tint: `color-mix(in srgb, white calc(<alpha-value> * 100%), rgb(var(--rui-${color}-main)))`
-}]));
-var textColorsCombination = Object.fromEntries(["light", "dark"].map((theme) => [theme, { text: {
-	DEFAULT: `var(--rui-${theme}-text-primary)`,
-	disabled: `var(--rui-${theme}-text-disabled)`,
-	secondary: `var(--rui-${theme}-text-secondary)`
-} }]));
-var adaptiveTextColorsCombination = { text: {
-	DEFAULT: `var(--rui-text-primary)`,
-	disabled: `var(--rui-text-disabled)`,
-	secondary: `var(--rui-text-secondary)`
-} };
-var surfaceColorsCombination = Object.fromEntries(["light", "dark"].map((theme) => [theme, { surface: {
-	DEFAULT: `rgba(var(--rui-${theme}-surface-primary), <alpha-value>)`,
-	secondary: `rgba(var(--rui-${theme}-surface-secondary), <alpha-value>)`,
-	overlay: `rgba(var(--rui-${theme}-surface-overlay), <alpha-value>)`
-} }]));
-var adaptiveSurfaceColorsCombination = { surface: {
-	DEFAULT: `rgba(var(--rui-surface-primary), <alpha-value>)`,
-	secondary: `rgba(var(--rui-surface-secondary), <alpha-value>)`,
-	overlay: `rgba(var(--rui-surface-overlay), <alpha-value>)`
-} };
-var themePlugin = plugin(({ addBase, addUtilities, addVariant, matchUtilities }) => {
-	/** Aliases every context colour to the given theme's own variable. */
-	const themeVariables = (theme) => Object.fromEntries([
-		...contextColors.flatMap((color) => [
-			[`--rui-${color}-main`, `var(--rui-${theme}-${color}-main)`],
-			[`--rui-${color}-darker`, `var(--rui-${theme}-${color}-darker)`],
-			[`--rui-${color}-lighter`, `var(--rui-${theme}-${color}-lighter)`]
-		]),
-		["--rui-text-primary", `var(--rui-${theme}-text-primary)`],
-		["--rui-text-secondary", `var(--rui-${theme}-text-secondary)`],
-		["--rui-text-disabled", `var(--rui-${theme}-text-disabled)`],
-		["--rui-surface-primary", `var(--rui-${theme}-surface-primary)`],
-		["--rui-surface-secondary", `var(--rui-${theme}-surface-secondary)`],
-		["--rui-surface-overlay", `var(--rui-${theme}-surface-overlay)`]
-	]);
-	addBase({
-		"html[data-theme=\"light\"], html.light": themeVariables("light"),
-		"html[data-theme=\"dark\"], html.dark": themeVariables("dark")
-	});
-	addUtilities({
-		".border-default": { "border-color": "rgb(var(--rui-grey-200))" },
-		".dark .border-default": { "border-color": "rgb(var(--rui-grey-800))" }
-	});
-	addUtilities({
-		".text-body-1": { "@apply text-base": {} },
-		".text-body-2": { "@apply text-sm": {} },
-		".text-caption": {
-			"@apply text-xs": {},
-			"line-height": "1.25rem"
-		},
-		".text-h1": {
-			"@apply text-8xl font-light": {},
-			"line-height": "7rem"
-		},
-		".text-h2": {
-			"@apply text-6xl font-light": {},
-			"line-height": "4.5rem"
-		},
-		".text-h3": {
-			"@apply text-5xl": {},
-			"line-height": "3.5rem"
-		},
-		".text-h4": {
-			"@apply text-4xl font-semibold": {},
-			"line-height": "2.625rem"
-		},
-		".text-h5": {
-			"@apply text-2xl": {},
-			"line-height": "2rem"
-		},
-		".text-h6": {
-			"@apply text-xl font-medium": {},
-			"line-height": "2rem"
-		},
-		".text-overline": {
-			"@apply text-xs uppercase": {},
-			"line-height": "2rem"
-		},
-		".text-subtitle-1": {
-			"@apply text-base": {},
-			"line-height": "1.75rem"
-		},
-		".text-subtitle-2": {
-			"@apply text-sm font-medium": {},
-			"line-height": "1.25rem"
-		}
-	});
-	matchUtilities(Object.fromEntries([
-		"bg-tint",
-		"bg-shade",
-		"text-tint",
-		"text-shade"
-	].map((item) => [item, (value) => ({ animation: `${item} 1s calc(${value} * -1s) linear forwards paused` })])));
-	addVariant("color-mix-supported", "@supports (color-mix())");
-}, { theme: { extend: {
-	boxShadow: {
-		1: "0px 2px 1px -1px var(--rui-shadow-primary), 0px 1px 1px var(--rui-shadow-secondary), 0px 1px 3px var(--rui-shadow-tertiary)",
-		10: "0px 6px 6px -3px var(--rui-shadow-primary), 0px 10px 14px 1px var(--rui-shadow-secondary), 0px 4px 18px 3px var(--rui-shadow-tertiary)",
-		11: "0px 6px 7px -4px var(--rui-shadow-primary), 0px 11px 15px 1px var(--rui-shadow-secondary), 0px 4px 20px 3px var(--rui-shadow-tertiary)",
-		12: "0px 7px 8px -4px var(--rui-shadow-primary), 0px 12px 17px 2px var(--rui-shadow-secondary), 0px 5px 22px 4px var(--rui-shadow-tertiary)",
-		13: "0px 7px 8px -4px var(--rui-shadow-primary), 0px 13px 19px 2px var(--rui-shadow-secondary), 0px 5px 24px 4px var(--rui-shadow-tertiary)",
-		14: "0px 7px 9px -4px var(--rui-shadow-primary), 0px 14px 21px 2px var(--rui-shadow-secondary), 0px 5px 26px 4px var(--rui-shadow-tertiary)",
-		15: "0px 8px 9px -5px var(--rui-shadow-primary), 0px 15px 22px 2px var(--rui-shadow-secondary), 0px 6px 28px 5px var(--rui-shadow-tertiary)",
-		16: "0px 8px 10px -5px var(--rui-shadow-primary), 0px 16px 24px 2px var(--rui-shadow-secondary), 0px 6px 30px 5px var(--rui-shadow-tertiary)",
-		17: "0px 8px 11px -5px var(--rui-shadow-primary), 0px 17px 26px 2px var(--rui-shadow-secondary), 0px 6px 32px 5px var(--rui-shadow-tertiary)",
-		18: "0px 9px 11px -5px var(--rui-shadow-primary), 0px 18px 28px 2px var(--rui-shadow-secondary), 0px 7px 34px 6px var(--rui-shadow-tertiary)",
-		19: "0px 9px 12px -6px var(--rui-shadow-primary), 0px 19px 29px 2px var(--rui-shadow-secondary), 0px 7px 36px 6px var(--rui-shadow-tertiary)",
-		2: "0px 3px 1px -2px var(--rui-shadow-primary), 0px 2px 2px var(--rui-shadow-secondary), 0px 1px 5px var(--rui-shadow-tertiary)",
-		20: "0px 10px 13px -6px var(--rui-shadow-primary), 0px 20px 31px 3px var(--rui-shadow-secondary), 0px 8px 38px 7px var(--rui-shadow-tertiary)",
-		21: "0px 10px 13px -6px var(--rui-shadow-primary), 0px 21px 33px 3px var(--rui-shadow-secondary), 0px 8px 40px 7px var(--rui-shadow-tertiary)",
-		22: "0px 10px 14px -6px var(--rui-shadow-primary), 0px 22px 35px 3px var(--rui-shadow-secondary), 0px 8px 42px 7px var(--rui-shadow-tertiary)",
-		23: "0px 11px 14px -7px var(--rui-shadow-primary), 0px 23px 36px 3px var(--rui-shadow-secondary), 0px 9px 44px 8px var(--rui-shadow-tertiary)",
-		24: "0px 11px 15px -7px var(--rui-shadow-primary), 0px 24px 38px 3px var(--rui-shadow-secondary), 0px 9px 46px 8px var(--rui-shadow-tertiary)",
-		3: "0px 3px 3px -2px var(--rui-shadow-primary), 0px 3px 4px var(--rui-shadow-secondary), 0px 1px 8px var(--rui-shadow-tertiary)",
-		4: "0px 2px 4px -1px var(--rui-shadow-primary), 0px 4px 5px var(--rui-shadow-secondary), 0px 1px 10px var(--rui-shadow-tertiary)",
-		5: "0px 3px 5px -1px var(--rui-shadow-primary), 0px 5px 8px var(--rui-shadow-secondary), 0px 1px 14px var(--rui-shadow-tertiary)",
-		6: "0px 3px 5px -1px var(--rui-shadow-primary), 0px 6px 10px var(--rui-shadow-secondary), 0px 1px 18px var(--rui-shadow-tertiary)",
-		7: "0px 4px 5px -2px var(--rui-shadow-primary), 0px 7px 10px 1px var(--rui-shadow-secondary), 0px 2px 16px 1px var(--rui-shadow-tertiary)",
-		8: "0px 5px 5px -3px var(--rui-shadow-primary), 0px 8px 10px 1px var(--rui-shadow-secondary), 0px 3px 14px 2px var(--rui-shadow-tertiary)",
-		9: "0px 5px 6px -3px var(--rui-shadow-primary), 0px 9px 12px 1px var(--rui-shadow-secondary), 0px 3px 16px 2px var(--rui-shadow-tertiary)"
-	},
-	colors: { rui: {
-		...baseColorsCombination,
-		...contextColorsCombination,
-		...textColorsCombination,
-		dark: {
-			...contextColorsCombination.dark,
-			...textColorsCombination.dark,
-			...surfaceColorsCombination.dark
-		},
-		light: {
-			...contextColorsCombination.light,
-			...textColorsCombination.light,
-			...surfaceColorsCombination.light
-		},
-		...adaptiveContextColorCombination,
-		...adaptiveTextColorsCombination,
-		...adaptiveSurfaceColorsCombination
-	} }
-} } });
-//#endregion
-export { themePlugin as default };
-
-//# sourceMappingURL=index.js.map