@rotki/ui-library 2.15.0 → 2.16.1

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

@@ -1,81 +1,85 @@
 import { transformCase } from "../../utils/helpers.js";
-const ASSET_MAPPINGS_URL = "https://raw.githubusercontent.com/rotki/data";
-const SESSION_SOURCES_PREFIX = "rui-logo-sources";
-const SESSION_VERIFIED_PREFIX = "rui-logo-verified";
-const sourcesCache = /* @__PURE__ */ new Map();
+//#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";
+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");
+	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 {
-  }
+	try {
+		sessionStorage.setItem(key, value);
+	} catch {}
 }
 function readSessionStorage(key) {
-  try {
-    return sessionStorage.getItem(key) ?? void 0;
-  } catch {
-    return void 0;
-  }
+	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 {
-  }
-  return void 0;
+	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}`);
+	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);
+	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 {
-  }
+	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 void 0;
-  } catch {
-    return void 0;
-  }
+	try {
+		const response = await fetch(`${ASSET_MAPPINGS_URL}/${branch}/constants/asset-mappings.json`);
+		if (!response.ok) return void 0;
+		const links = transformCase((await response.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;
+	const cached = sourcesCache.get(branch);
+	if (cached) return cached;
+	const promise = fetchSourcesFromNetwork(branch);
+	sourcesCache.set(branch, promise);
+	return promise;
 }
-export {
-  getCachedLogoSources,
-  getLogoSources,
-  getVerifiedLogoUrl,
-  removeVerifiedLogoUrl,
-  setVerifiedLogoUrl
-};
-//# sourceMappingURL=use-logo-sources.js.map
+//#endregion
+export { getCachedLogoSources, getLogoSources, getVerifiedLogoUrl, removeVerifiedLogoUrl, setVerifiedLogoUrl };
+
+//# sourceMappingURL=use-logo-sources.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"use-logo-sources.js","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// Module-level cache: deduplicates asset-mappings fetches across all RuiLogo instances.\n// Keyed by branch so different branches don't share stale data.\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"],"names":[],"mappings":";AAGA,MAAM,qBAAqB;AAC3B,MAAM,yBAAyB;AAC/B,MAAM,0BAA0B;AAIhC,MAAM,mCAAmB,IAAA;AAEzB,SAAS,gBAAgB,OAAwC;AAC/D,MAAI,OAAO,UAAU,YAAY,UAAU;AACzC,WAAO;AAET,SAAO,OAAO,OAAO,KAAK,EAAE,MAAM,OAAK,MAAM,UAAa,OAAO,MAAM,QAAQ;AACjF;AAEA,SAAS,oBAAoB,KAAa,OAAqB;AAC7D,MAAI;AACF,mBAAe,QAAQ,KAAK,KAAK;AAAA,EACnC,QACM;AAAA,EAEN;AACF;AAEA,SAAS,mBAAmB,KAAiC;AAC3D,MAAI;AACF,WAAO,eAAe,QAAQ,GAAG,KAAK;AAAA,EACxC,QACM;AACJ,WAAO;AAAA,EACT;AACF;AAqBO,SAAS,qBAAqB,QAA2C;AAC9E,QAAM,MAAM,mBAAmB,GAAG,sBAAsB,IAAI,MAAM,EAAE;AACpE,MAAI,CAAC;AACH,WAAO;AAET,MAAI;AACF,UAAM,SAAkB,KAAK,MAAM,GAAG;AACtC,QAAI,gBAAgB,MAAM;AACxB,aAAO;AAAA,EACX,QACM;AAAA,EAEN;AACA,SAAO;AACT;AAMO,SAAS,mBAAmB,QAAgB,MAAkC;AACnF,SAAO,mBAAmB,GAAG,uBAAuB,IAAI,MAAM,IAAI,IAAI,EAAE;AAC1E;AAKO,SAAS,mBAAmB,QAAgB,MAAc,KAAmB;AAClF,sBAAoB,GAAG,uBAAuB,IAAI,MAAM,IAAI,IAAI,IAAI,GAAG;AACzE;AAMO,SAAS,sBAAsB,QAAgB,MAAoB;AACxE,MAAI;AACF,mBAAe,WAAW,GAAG,uBAAuB,IAAI,MAAM,IAAI,IAAI,EAAE;AAAA,EAC1E,QACM;AAAA,EAEN;AACF;AAEA,eAAe,wBAAwB,QAAoD;AACzF,MAAI;AACF,UAAM,WAAW,MAAM;AAAA,MACrB,GAAG,kBAAkB,IAAI,MAAM;AAAA,IAAA;AAGjC,QAAI,CAAC,SAAS;AACZ,aAAO;AAET,UAAM,OAAO,MAAM,SAAS,KAAA;AAC5B,UAAM,QAAQ,cAAc,MAAM,MAAM,WAAW;AACnD,QAAI,gBAAgB,KAAK,GAAG;AAC1B,0BAAoB,GAAG,sBAAsB,IAAI,MAAM,IAAI,KAAK,UAAU,KAAK,CAAC;AAChF,aAAO;AAAA,IACT;AAEA,WAAO;AAAA,EACT,QACM;AACJ,WAAO;AAAA,EACT;AACF;AAMO,SAAS,eAAe,QAAoD;AACjF,QAAM,SAAS,aAAa,IAAI,MAAM;AACtC,MAAI;AACF,WAAO;AAET,QAAM,UAAU,wBAAwB,MAAM;AAC9C,eAAa,IAAI,QAAQ,OAAO;AAChC,SAAO;AACT;"}
+{"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// Module-level cache: deduplicates asset-mappings fetches across all RuiLogo instances.\n// Keyed by branch so different branches don't share stale data.\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;AAIhC,IAAM,+BAAe,IAAI,KAAiD;AAE1E,SAAS,gBAAgB,OAAwC;AAC/D,KAAI,OAAO,UAAU,YAAY,UAAU,KACzC,QAAO;AAET,QAAO,OAAO,OAAO,MAAM,CAAC,OAAM,MAAK,MAAM,KAAA,KAAa,OAAO,MAAM,SAAS;;AAGlF,SAAS,oBAAoB,KAAa,OAAqB;AAC7D,KAAI;AACF,iBAAe,QAAQ,KAAK,MAAM;SAE9B;;AAKR,SAAS,mBAAmB,KAAiC;AAC3D,KAAI;AACF,SAAO,eAAe,QAAQ,IAAI,IAAI,KAAA;SAElC;AACJ;;;;;;;AAuBJ,SAAgB,qBAAqB,QAA2C;CAC9E,MAAM,MAAM,mBAAmB,GAAG,uBAAuB,GAAG,SAAS;AACrE,KAAI,CAAC,IACH,QAAO,KAAA;AAET,KAAI;EACF,MAAM,SAAkB,KAAK,MAAM,IAAI;AACvC,MAAI,gBAAgB,OAAO,CACzB,QAAO;SAEL;;;;;;AAUR,SAAgB,mBAAmB,QAAgB,MAAkC;AACnF,QAAO,mBAAmB,GAAG,wBAAwB,GAAG,OAAO,GAAG,OAAO;;;;;AAM3E,SAAgB,mBAAmB,QAAgB,MAAc,KAAmB;AAClF,qBAAoB,GAAG,wBAAwB,GAAG,OAAO,GAAG,QAAQ,IAAI;;;;;;AAO1E,SAAgB,sBAAsB,QAAgB,MAAoB;AACxE,KAAI;AACF,iBAAe,WAAW,GAAG,wBAAwB,GAAG,OAAO,GAAG,OAAO;SAErE;;AAKR,eAAe,wBAAwB,QAAoD;AACzF,KAAI;EACF,MAAM,WAAW,MAAM,MACrB,GAAG,mBAAmB,GAAG,OAAO,gCACjC;AAED,MAAI,CAAC,SAAS,GACZ,QAAO,KAAA;EAGT,MAAM,QAAQ,eADD,MAAM,SAAS,MAAM,GACA,MAAM,YAAY;AACpD,MAAI,gBAAgB,MAAM,EAAE;AAC1B,uBAAoB,GAAG,uBAAuB,GAAG,UAAU,KAAK,UAAU,MAAM,CAAC;AACjF,UAAO;;AAGT;SAEI;AACJ;;;;;;;AAQJ,SAAgB,eAAe,QAAoD;CACjF,MAAM,SAAS,aAAa,IAAI,OAAO;AACvC,KAAI,OACF,QAAO;CAET,MAAM,UAAU,wBAAwB,OAAO;AAC/C,cAAa,IAAI,QAAQ,QAAQ;AACjC,QAAO"}

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

@@ -0,0 +1,7 @@
+import RuiBadge_vue_vue_type_script_setup_true_lang_default from "./RuiBadge.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/overlays/badge/RuiBadge.vue
+var RuiBadge_default = RuiBadge_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RuiBadge_default as default };
+
+//# sourceMappingURL=RuiBadge.js.map

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

@@ -0,0 +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 absolute bg-transparent text-rui-light-text dark:text-rui-text',\n    content: 'flex items-center px-1',\n  },\n  variants: {\n    color: {\n      default: {},\n      primary: { badge: 'text-white bg-rui-primary' },\n      secondary: { badge: 'text-white bg-rui-secondary' },\n      error: { badge: 'text-white bg-rui-error' },\n      warning: { badge: 'text-white bg-rui-warning' },\n      info: { badge: 'text-white bg-rui-info' },\n      success: { badge: 'text-white bg-rui-success' },\n    },\n    size: {\n      sm: { badge: 'min-h-4 min-w-4' },\n      md: { badge: 'min-h-5 min-w-5' },\n      lg: { badge: 'min-h-6 min-w-6' },\n    },\n    rounded: {\n      sm: { badge: 'rounded-sm' },\n      md: { badge: 'rounded-md' },\n      lg: { badge: 'rounded-lg' },\n      full: { badge: 'rounded-full' },\n    },\n    dot: {\n      true: {},\n    },\n  },\n  compoundVariants: [\n    // Dot default color\n    { dot: true, color: 'default', class: { badge: 'bg-gray-500' } },\n\n    // Dot sizes (smaller than normal badge)\n    { dot: true, size: 'sm', class: { badge: 'min-w-1.5 min-h-1.5' } },\n    { dot: true, size: 'md', class: { badge: 'min-w-2 min-h-2' } },\n    { dot: true, size: 'lg', class: { badge: 'min-w-2.5 min-h-2.5' } },\n  ],\n  compoundSlots: [\n    // Dark mode: warning/success/info keep light text on colored bg\n    { slots: ['badge'], color: ['warning', 'success', 'info'], class: 'dark:text-rui-light-text' },\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}));\n\n// Position configs: [leftOffset, rightBase, edgeBase, centerOffset] (rem / calc expressions)\nconst DOT_POS: PosConfig = [-0.25, '100% - 0.25rem', '100% - 0.25rem', 0.25];\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 : 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    <Transition\n      appear\n      enter-active-class=\"transform ease-out duration-200\"\n      enter-from-class=\"scale-0\"\n      enter-to-class=\"scale-100\"\n      leave-active-class=\"transform ease-in duration-150\"\n      leave-from-class=\"scale-100\"\n      leave-to-class=\"scale-0\"\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-label=\"Badge\"\n        aria-live=\"polite\"\n        role=\"status\"\n      >\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              size=\"16\"\n              :class=\"{ 'ml-0.5': hasText }\"\n            />\n          </slot>\n        </span>\n      </div>\n    </Transition>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/overlays/badge/RuiBadge.vue.d.ts

@@ -1,5 +1,6 @@
 import type { ContextColorsType } from '../../../consts/colors.js';
 import type { RuiIcons } from '../../../icons/index.js';
+import { BadgePlacement, BadgeRounded, BadgeSize } from '../../../components/overlays/badge/badge-props.js';
 export interface Props {
     text?: string | null;
     icon?: RuiIcons | null;
@@ -8,9 +9,9 @@ export interface Props {
     left?: boolean;
     offsetX?: string | number;
     offsetY?: string | number;
-    placement?: 'top' | 'center' | 'bottom';
-    size?: 'sm' | 'md' | 'lg';
-    rounded?: 'sm' | 'md' | 'lg' | 'full';
+    placement?: BadgePlacement;
+    size?: BadgeSize;
+    rounded?: BadgeRounded;
     color?: 'default' | ContextColorsType;
 }
 type __VLS_Slots = {

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

@@ -0,0 +1,189 @@
+import { tv } from "../../../utils/tv.js";
+import RuiIcon_default from "../../icons/RuiIcon.js";
+import { BadgePlacement, BadgeRounded, BadgeSize } from "./badge-props.js";
+import { Transition, computed, createBlock, createCommentVNode, createElementBlock, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderSlot, toDisplayString, unref, useSlots, withCtx } from "vue";
+import { get } from "@vueuse/shared";
+//#region src/components/overlays/badge/RuiBadge.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"data-placement",
+	"data-dot",
+	"data-left"
+];
+var RuiBadge_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "RuiBadge",
+	__name: "RuiBadge",
+	props: {
+		text: { default: null },
+		icon: { default: null },
+		modelValue: {
+			type: Boolean,
+			default: true
+		},
+		dot: {
+			type: Boolean,
+			default: false
+		},
+		left: {
+			type: Boolean,
+			default: false
+		},
+		offsetX: { default: 0 },
+		offsetY: { default: 0 },
+		placement: { default: () => BadgePlacement.top },
+		size: { default: () => BadgeSize.md },
+		rounded: { default: () => BadgeRounded.full },
+		color: { default: "primary" }
+	},
+	setup(__props) {
+		const slots = useSlots();
+		const badgeStyles = tv({
+			slots: {
+				wrapper: "relative inline-block",
+				badge: "flex items-center justify-center text-xs font-medium absolute bg-transparent text-rui-light-text dark:text-rui-text",
+				content: "flex items-center px-1"
+			},
+			variants: {
+				color: {
+					default: {},
+					primary: { badge: "text-white bg-rui-primary" },
+					secondary: { badge: "text-white bg-rui-secondary" },
+					error: { badge: "text-white bg-rui-error" },
+					warning: { badge: "text-white bg-rui-warning" },
+					info: { badge: "text-white bg-rui-info" },
+					success: { badge: "text-white bg-rui-success" }
+				},
+				size: {
+					sm: { badge: "min-h-4 min-w-4" },
+					md: { badge: "min-h-5 min-w-5" },
+					lg: { badge: "min-h-6 min-w-6" }
+				},
+				rounded: {
+					sm: { badge: "rounded-sm" },
+					md: { badge: "rounded-md" },
+					lg: { badge: "rounded-lg" },
+					full: { badge: "rounded-full" }
+				},
+				dot: { true: {} }
+			},
+			compoundVariants: [
+				{
+					dot: true,
+					color: "default",
+					class: { badge: "bg-gray-500" }
+				},
+				{
+					dot: true,
+					size: "sm",
+					class: { badge: "min-w-1.5 min-h-1.5" }
+				},
+				{
+					dot: true,
+					size: "md",
+					class: { badge: "min-w-2 min-h-2" }
+				},
+				{
+					dot: true,
+					size: "lg",
+					class: { badge: "min-w-2.5 min-h-2.5" }
+				}
+			],
+			compoundSlots: [{
+				slots: ["badge"],
+				color: [
+					"warning",
+					"success",
+					"info"
+				],
+				class: "dark:text-rui-light-text"
+			}],
+			defaultVariants: {
+				color: "primary",
+				size: "md",
+				rounded: "full",
+				dot: false
+			}
+		});
+		const hasText = computed(() => !!__props.text || !!slots.badge);
+		const hasIconAndText = computed(() => (!!__props.icon || !!slots.icon) && get(hasText));
+		const ui = computed(() => badgeStyles({
+			color: __props.color,
+			size: __props.size,
+			rounded: __props.rounded,
+			dot: __props.dot
+		}));
+		const DOT_POS = [
+			-.25,
+			"100% - 0.25rem",
+			"100% - 0.25rem",
+			.25
+		];
+		const BADGE_POS = {
+			sm: [
+				-.85,
+				"100% - 0.375rem",
+				"100% - 0.375rem",
+				.55
+			],
+			md: [
+				-.95,
+				"100% - 0.5rem",
+				"100% - 0.5rem",
+				.65
+			],
+			lg: [
+				-1.05,
+				"100% - 0.5rem",
+				"100% - 0.5rem",
+				.75
+			]
+		};
+		const positionStyle = computed(() => {
+			const ox = Number(__props.offsetX) * .0625;
+			const oy = Number(__props.offsetY) * .0625;
+			const [l, r, edge, center] = __props.dot ? DOT_POS : BADGE_POS[__props.size];
+			const horizontal = `calc(${__props.left ? `${l}rem` : r} + ${ox}rem)`;
+			const vertical = __props.placement === "center" ? `calc(50% - ${center}rem - ${oy}rem)` : `calc(${edge} - ${oy}rem)`;
+			return {
+				left: horizontal,
+				[__props.placement === "top" ? "bottom" : "top"]: vertical
+			};
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(ui).wrapper()) }, [renderSlot(_ctx.$slots, "default"), createVNode(Transition, {
+				appear: "",
+				"enter-active-class": "transform ease-out duration-200",
+				"enter-from-class": "scale-0",
+				"enter-to-class": "scale-100",
+				"leave-active-class": "transform ease-in duration-150",
+				"leave-from-class": "scale-100",
+				"leave-to-class": "scale-0"
+			}, {
+				default: withCtx(() => [__props.modelValue ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(unref(ui).badge()),
+					style: normalizeStyle(unref(positionStyle)),
+					"data-placement": __props.placement,
+					"data-dot": __props.dot || void 0,
+					"data-left": __props.left || void 0,
+					"aria-atomic": "true",
+					"aria-label": "Badge",
+					"aria-live": "polite",
+					role: "status"
+				}, [!__props.dot ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					class: normalizeClass(unref(ui).content({ class: unref(hasIconAndText) ? "px-2" : void 0 }))
+				}, [renderSlot(_ctx.$slots, "badge", {}, () => [createTextVNode(toDisplayString(__props.text), 1)]), renderSlot(_ctx.$slots, "icon", {}, () => [__props.icon ? (openBlock(), createBlock(RuiIcon_default, {
+					key: 0,
+					name: __props.icon,
+					size: "16",
+					class: normalizeClass({ "ml-0.5": unref(hasText) })
+				}, null, 8, ["name", "class"])) : createCommentVNode("", true)])], 2)) : createCommentVNode("", true)], 14, _hoisted_1)) : createCommentVNode("", true)]),
+				_: 3
+			})], 2);
+		};
+	}
+});
+//#endregion
+export { RuiBadge_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RuiBadge.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +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 absolute bg-transparent text-rui-light-text dark:text-rui-text',\n    content: 'flex items-center px-1',\n  },\n  variants: {\n    color: {\n      default: {},\n      primary: { badge: 'text-white bg-rui-primary' },\n      secondary: { badge: 'text-white bg-rui-secondary' },\n      error: { badge: 'text-white bg-rui-error' },\n      warning: { badge: 'text-white bg-rui-warning' },\n      info: { badge: 'text-white bg-rui-info' },\n      success: { badge: 'text-white bg-rui-success' },\n    },\n    size: {\n      sm: { badge: 'min-h-4 min-w-4' },\n      md: { badge: 'min-h-5 min-w-5' },\n      lg: { badge: 'min-h-6 min-w-6' },\n    },\n    rounded: {\n      sm: { badge: 'rounded-sm' },\n      md: { badge: 'rounded-md' },\n      lg: { badge: 'rounded-lg' },\n      full: { badge: 'rounded-full' },\n    },\n    dot: {\n      true: {},\n    },\n  },\n  compoundVariants: [\n    // Dot default color\n    { dot: true, color: 'default', class: { badge: 'bg-gray-500' } },\n\n    // Dot sizes (smaller than normal badge)\n    { dot: true, size: 'sm', class: { badge: 'min-w-1.5 min-h-1.5' } },\n    { dot: true, size: 'md', class: { badge: 'min-w-2 min-h-2' } },\n    { dot: true, size: 'lg', class: { badge: 'min-w-2.5 min-h-2.5' } },\n  ],\n  compoundSlots: [\n    // Dark mode: warning/success/info keep light text on colored bg\n    { slots: ['badge'], color: ['warning', 'success', 'info'], class: 'dark:text-rui-light-text' },\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}));\n\n// Position configs: [leftOffset, rightBase, edgeBase, centerOffset] (rem / calc expressions)\nconst DOT_POS: PosConfig = [-0.25, '100% - 0.25rem', '100% - 0.25rem', 0.25];\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 : 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    <Transition\n      appear\n      enter-active-class=\"transform ease-out duration-200\"\n      enter-from-class=\"scale-0\"\n      enter-to-class=\"scale-100\"\n      leave-active-class=\"transform ease-in duration-150\"\n      leave-from-class=\"scale-100\"\n      leave-to-class=\"scale-0\"\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-label=\"Badge\"\n        aria-live=\"polite\"\n        role=\"status\"\n      >\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              size=\"16\"\n              :class=\"{ 'ml-0.5': hasText }\"\n            />\n          </slot>\n        </span>\n      </div>\n    </Transition>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/overlays/badge/badge-props.d.ts

@@ -0,0 +1,19 @@
+export declare const BadgePlacement: {
+    readonly top: "top";
+    readonly center: "center";
+    readonly bottom: "bottom";
+};
+export type BadgePlacement = (typeof BadgePlacement)[keyof typeof BadgePlacement];
+export declare const BadgeSize: {
+    readonly sm: "sm";
+    readonly md: "md";
+    readonly lg: "lg";
+};
+export type BadgeSize = (typeof BadgeSize)[keyof typeof BadgeSize];
+export declare const BadgeRounded: {
+    readonly sm: "sm";
+    readonly md: "md";
+    readonly lg: "lg";
+    readonly full: "full";
+};
+export type BadgeRounded = (typeof BadgeRounded)[keyof typeof BadgeRounded];

package/dist/components/overlays/badge/badge-props.js

@@ -0,0 +1,21 @@
+//#region src/components/overlays/badge/badge-props.ts
+var BadgePlacement = {
+	top: "top",
+	center: "center",
+	bottom: "bottom"
+};
+var BadgeSize = {
+	sm: "sm",
+	md: "md",
+	lg: "lg"
+};
+var BadgeRounded = {
+	sm: "sm",
+	md: "md",
+	lg: "lg",
+	full: "full"
+};
+//#endregion
+export { BadgePlacement, BadgeRounded, BadgeSize };
+
+//# sourceMappingURL=badge-props.js.map

package/dist/components/overlays/badge/badge-props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge-props.js","names":[],"sources":["../../../../src/components/overlays/badge/badge-props.ts"],"sourcesContent":["export const BadgePlacement = {\n  top: 'top',\n  center: 'center',\n  bottom: 'bottom',\n} as const;\n\nexport type BadgePlacement = (typeof BadgePlacement)[keyof typeof BadgePlacement];\n\nexport const BadgeSize = {\n  sm: 'sm',\n  md: 'md',\n  lg: 'lg',\n} as const;\n\nexport type BadgeSize = (typeof BadgeSize)[keyof typeof BadgeSize];\n\nexport const BadgeRounded = {\n  sm: 'sm',\n  md: 'md',\n  lg: 'lg',\n  full: 'full',\n} as const;\n\nexport type BadgeRounded = (typeof BadgeRounded)[keyof typeof BadgeRounded];\n"],"mappings":";AAAA,IAAa,iBAAiB;CAC5B,KAAK;CACL,QAAQ;CACR,QAAQ;CACT;AAID,IAAa,YAAY;CACvB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAID,IAAa,eAAe;CAC1B,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,MAAM;CACP"}

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

@@ -0,0 +1,7 @@
+import RuiBottomSheet_vue_vue_type_script_setup_true_lang_default from "./RuiBottomSheet.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/overlays/bottom-sheet/RuiBottomSheet.vue
+var RuiBottomSheet_default = RuiBottomSheet_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RuiBottomSheet_default as default };
+
+//# sourceMappingURL=RuiBottomSheet.js.map

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

@@ -0,0 +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// keep these props in sync with Dialog props\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

@@ -0,0 +1,51 @@
+import RuiDialog_default from "../dialog/RuiDialog.js";
+import { createBlock, createSlots, defineComponent, guardReactiveProps, mergeModels, mergeProps, normalizeProps, openBlock, renderList, renderSlot, useModel, withCtx } from "vue";
+//#region src/components/overlays/bottom-sheet/RuiBottomSheet.vue?vue&type=script&setup=true&lang.ts
+var RuiBottomSheet_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "RuiBottomSheet",
+	inheritAttrs: false,
+	__name: "RuiBottomSheet",
+	props: /* @__PURE__ */ mergeModels({
+		persistent: {
+			type: Boolean,
+			default: false
+		},
+		width: {},
+		maxWidth: {}
+	}, {
+		"modelValue": {
+			type: Boolean,
+			default: false
+		},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const modelValue = useModel(__props, "modelValue");
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(RuiDialog_default, mergeProps({
+				modelValue: modelValue.value,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
+				"bottom-sheet": ""
+			}, _ctx.$attrs, {
+				persistent: __props.persistent,
+				width: __props.width,
+				"max-width": __props.maxWidth
+			}), createSlots({ _: 2 }, [renderList(Object.keys(_ctx.$slots), (slot) => {
+				return {
+					name: slot,
+					fn: withCtx((scope) => [renderSlot(_ctx.$slots, slot, normalizeProps(guardReactiveProps(scope)))])
+				};
+			})]), 1040, [
+				"modelValue",
+				"persistent",
+				"width",
+				"max-width"
+			]);
+		};
+	}
+});
+//#endregion
+export { RuiBottomSheet_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RuiBottomSheet.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +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// keep these props in sync with Dialog props\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,aAAoB;;uBAMzD,YAiBY,mBAjBZ,WAiBY;gBAhBD,WAAA;4EAAU,QAAA;IACnB,gBAAA;MACQA,KAAAA,QAAM;IACb,YAAY,QAAA;IACZ,OAAO,QAAA;IACP,aAAW,QAAA;yCAGK,OAAO,KAAKC,KAAAA,OAAM,GAA1B,SAAI;;WACV;kBAAQ,UAAK,CAEd,WAGE,KAAA,QADO,MAAI,eAAA,mBADH,MAAK,CAAA,CAAA,CAAA,CAAA"}

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

@@ -0,0 +1,7 @@
+import RuiDialog_vue_vue_type_script_setup_true_lang_default from "./RuiDialog.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/overlays/dialog/RuiDialog.vue
+var RuiDialog_default = RuiDialog_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RuiDialog_default as default };
+
+//# sourceMappingURL=RuiDialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RuiDialog.js","names":[],"sources":["../../../../src/components/overlays/dialog/RuiDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VueClassValue } from '@/types/class-value';\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  bottomSheet?: boolean;\n  classNames?: RuiDialogClassNames;\n  /** @deprecated Use `classNames.content` instead */\n  contentClass?: string | string[] | Record<string, boolean>;\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  bottomSheet = false,\n  classNames,\n  contentClass = '',\n  zIndex = 9999,\n  ariaLabel,\n} = defineProps<DialogProps>();\n\nconst emit = defineEmits<{\n  'closed': [];\n  'click:outside': [];\n  'click:esc': [];\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),\n}));\n\nconst dialog = tv({\n  slots: {\n    root: 'fixed inset-0',\n    overlay: 'absolute inset-0 backdrop-blur bg-rui-grey-500/50 dark:bg-black/50',\n    content: 'absolute left-1/2 bottom-0 -translate-x-1/2 outline-none overflow-y-auto max-h-[90vh]',\n  },\n  variants: {\n    bottomSheet: {\n      true: { content: '' },\n      false: { content: 'top-1/2 -translate-y-1/2 bottom-auto' },\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 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) ?? cn(contentClass) })\"\n          >\n            <slot v-bind=\"{ isOpen: modelValue, close }\" />\n          </div>\n        </Transition>\n      </div>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":""}

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

@@ -1,8 +1,15 @@
+import type { VueClassValue } from '../../../types/class-value';
+export interface RuiDialogClassNames {
+    root?: VueClassValue;
+    content?: VueClassValue;
+}
 export interface DialogProps {
     persistent?: boolean;
     width?: string | number;
     maxWidth?: string | number;
     bottomSheet?: boolean;
+    classNames?: RuiDialogClassNames;
+    /** @deprecated Use `classNames.content` instead */
     contentClass?: string | string[] | Record<string, boolean>;
     zIndex?: string | number;
     ariaLabel?: string;