@feugene/granularity 0.4.6 → 0.5.0

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../src/components/shared/tones.ts"],"sourcesContent":["/**\n * Единый перечень дизайн-тонов для всех компонентов библиотеки.\n *\n * Источник истины: список объявлен как `as const`-кортеж, из которого\n * автоматически выводится тип `GrTone`. Это позволяет использовать\n * `GR_TONES` в рантайме (валидация, итерация, safelist) и `GrTone`\n * в типах одновременно, без расхождений.\n */\nexport const GR_TONES = [\n  'primary',\n  'neutral',\n  'success',\n  'warning',\n  'danger',\n  'info',\n  'slate',\n  'azure',\n] as const\n\nexport type GrTone = typeof GR_TONES[number]\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,IAAa,WAAW;CACtB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD"}

package/dist/types/src/components/GrAlert/GrAlert.vue.d.ts

@@ -1,4 +1,5 @@
-export type GrAlertTone = 'info' | 'success' | 'warning' | 'danger' | 'slate' | 'azure';
+import type { GrTone } from '../shared/tones';
+export type GrAlertTone = GrTone;
 export type GrAlertVariant = 'soft' | 'light';
 type __VLS_Props = {
     tone?: GrAlertTone;

package/dist/types/src/components/GrBadge/grBadgeStyles.d.ts

@@ -1,4 +1,5 @@
-export type GrBadgeTone = 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'slate' | 'azure';
+import type { GrTone } from '../shared/tones';
+export type GrBadgeTone = GrTone;
 export type GrBadgeSize = 'sm' | 'md' | 'lg';
 export type GrBadgeRadius = 'square' | 'semi' | 'round';
 export declare const sizeClassBySize: Record<GrBadgeSize, string>;

package/dist/types/src/components/GrButton/grButtonStyles.d.ts

@@ -1,5 +1,6 @@
+import type { GrTone } from '../shared/tones';
 export type GrButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'ghost-border';
-export type GrButtonTone = 'primary' | 'neutral' | 'success' | 'warning' | 'danger' | 'info' | 'slate' | 'azure';
+export type GrButtonTone = GrTone;
 export type GrButtonSize = 'xs' | 'sm' | 'md' | 'lg';
 export type GrButtonClassOptions = {
     variant: GrButtonVariant;

package/dist/types/src/components/GrProgressBar/grStyle.d.ts

@@ -1,2 +1,3 @@
-export type GrProgressBarTone = 'primary' | 'neutral' | 'success' | 'warning' | 'danger' | 'info' | 'slate' | 'azure';
+import type { GrTone } from '../shared/tones';
+export type GrProgressBarTone = GrTone;
 export declare function grProgressBarFillClass(tone: GrProgressBarTone): string;

package/dist/types/src/components/shared/tones.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Единый перечень дизайн-тонов для всех компонентов библиотеки.
+ *
+ * Источник истины: список объявлен как `as const`-кортеж, из которого
+ * автоматически выводится тип `GrTone`. Это позволяет использовать
+ * `GR_TONES` в рантайме (валидация, итерация, safelist) и `GrTone`
+ * в типах одновременно, без расхождений.
+ */
+export declare const GR_TONES: readonly ["primary", "neutral", "success", "warning", "danger", "info", "slate", "azure"];
+export type GrTone = typeof GR_TONES[number];

package/dist/types/src/composables/useToast.d.ts

@@ -1,4 +1,5 @@
-export type GrToastTone = 'primary' | 'neutral' | 'success' | 'warning' | 'danger' | 'info' | 'slate' | 'azure';
+import type { GrTone } from '../components/shared/tones';
+export type GrToastTone = GrTone;
 export type ToastInput = {
     title: string;
     message?: string;

package/dist/types/src/index.d.ts

@@ -50,5 +50,7 @@ export { initThemeEarly, useTheme } from './composables/useTheme';
 export type { ThemeName, UseThemeOptions } from './composables/useTheme';
 export { useToast } from './composables/useToast';
 export type { GrToastTone, Toast, ToastInput } from './composables/useToast';
+export { GR_TONES } from './components/shared/tones';
+export type { GrTone } from './components/shared/tones';
 export type * from './fileValidation/types';
 export * from './directives';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@feugene/granularity",
   "description": "Granularity design system package with Vue 3 components, consumed via the `@feugene/unocss-preset-granular` preset.",
-  "version": "0.4.6",
+  "version": "0.5.0",
   "license": "SEE LICENSE IN LICENSE",
   "author": {
     "name": "Evgeniy Fureev",
@@ -305,12 +305,12 @@
     }
   },
   "peerDependencies": {
-    "@feugene/unocss-preset-granular": "^0.2.0",
+    "@feugene/unocss-preset-granular": "^0.3.0",
     "vue": "^3.5.32"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^8.2.0",
-    "@feugene/unocss-preset-granular": "^0.2.0",
+    "@feugene/unocss-preset-granular": "^0.3.0",
     "@iconify-json/lucide": "^1.2.101",
     "@types/node": "^25.5.2",
     "@unocss/eslint-plugin": "^66.6.8",

package/dist/chunks/config-2wgwWaAB.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"config-2wgwWaAB.js","names":[],"sources":["../../src/components/GrIcon/config.ts"],"sourcesContent":["import {defineGranularComponent} from '@feugene/unocss-preset-granular/contract'\n\nexport const grIconConfig = defineGranularComponent(import.meta.url, {\n    name: 'GrIcon',\n    safelist: [],\n})"],"mappings":";;AAEA,IAAa,eAAe,wBAAwB,OAAO,KAAK,KAAK;CACjE,MAAM;CACN,UAAU,EAAE;CACf,CAAA"}

package/dist/chunks/config-BA0BWYzs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"config-BA0BWYzs.js","names":[],"sources":["../../src/components/GrImageViewer/config.ts"],"sourcesContent":["import { defineGranularComponent } from '@feugene/unocss-preset-granular/contract'\n\nexport const grImageViewerConfig = defineGranularComponent(import.meta.url, {\n  name: 'GrImageViewer',\n  // Литералы из шаблона UnoCSS находит сканом — safelist не нужен.\n  safelist: [],\n})\n"],"mappings":";;AAEA,IAAa,sBAAsB,wBAAwB,OAAO,KAAK,KAAK;CAC1E,MAAM;CAEN,UAAU,EAAE;CACb,CAAC"}

package/dist/chunks/config-BKRmlivc.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"config-BKRmlivc.js","names":[],"sources":["../../src/components/GrBottomNav/config.ts"],"sourcesContent":["import {defineGranularComponent} from '@feugene/unocss-preset-granular/contract'\n\nexport const grBottomNavConfig = defineGranularComponent(import.meta.url, {\n    name: 'GrBottomNav',\n    safelist: [],\n})"],"mappings":";;AAEA,IAAa,oBAAoB,wBAAwB,OAAO,KAAK,KAAK;CACtE,MAAM;CACN,UAAU,EAAE;CACf,CAAA"}

package/dist/chunks/config-C0j836dC.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"config-C0j836dC.js","names":[],"sources":["../../src/components/GrSkeleton/config.ts"],"sourcesContent":["import { defineGranularComponent } from '@feugene/unocss-preset-granular/contract'\n\nexport const grSkeletonConfig = defineGranularComponent(import.meta.url, {\n  name: 'GrSkeleton',\n  safelist: [],\n})\n"],"mappings":";;AAEA,IAAa,mBAAmB,wBAAwB,OAAO,KAAK,KAAK;CACvE,MAAM;CACN,UAAU,EAAE;CACb,CAAC"}

package/dist/chunks/config-C5SJXHQ4.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"config-C5SJXHQ4.js","names":[],"sources":["../../src/components/GrFormFile/config.ts"],"sourcesContent":["import { defineGranularComponent } from '@feugene/unocss-preset-granular/contract'\n\nexport const grFormFileConfig = defineGranularComponent(import.meta.url, {\n  name: 'GrFormFile',\n  dependencies: ['GrButton', 'GrIcon'],\n  // Литералы из шаблона UnoCSS находит сканом — safelist не нужен.\n  safelist: [],\n})\n"],"mappings":";;AAEA,IAAa,mBAAmB,wBAAwB,OAAO,KAAK,KAAK;CACvE,MAAM;CACN,cAAc,CAAC,YAAY,SAAS;CAEpC,UAAU,EAAE;CACb,CAAC"}

package/dist/chunks/config-C6SBJxcH.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"config-C6SBJxcH.js","names":[],"sources":["../../src/components/GrAlert/config.ts"],"sourcesContent":["import {defineGranularComponent} from '@feugene/unocss-preset-granular/contract'\n\nexport const grAlertConfig = defineGranularComponent(import.meta.url, {\n    name: 'GrAlert',\n    safelist: [],\n})\n"],"mappings":";;AAEA,IAAa,gBAAgB,wBAAwB,OAAO,KAAK,KAAK;CAClE,MAAM;CACN,UAAU,EAAE;CACf,CAAC"}

package/dist/chunks/config-CByfsV-z2.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"config-CByfsV-z2.js","names":[],"sources":["../../src/components/GrFileUpload/config.ts"],"sourcesContent":["import { defineGranularComponent } from '@feugene/unocss-preset-granular/contract'\n\nexport const grFileUploadConfig = defineGranularComponent(import.meta.url, {\n  name: 'GrFileUpload',\n  dependencies: ['GrIcon'],\n  // Литералы из шаблона UnoCSS находит сканом — safelist не нужен.\n  safelist: [],\n})\n"],"mappings":";;AAEA,IAAa,qBAAqB,wBAAwB,OAAO,KAAK,KAAK;CACzE,MAAM;CACN,cAAc,CAAC,SAAS;CAExB,UAAU,EAAE;CACb,CAAC"}

package/dist/chunks/config-CMZE2fu0.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"config-CMZE2fu0.js","names":[],"sources":["../../src/components/GrDataTable/config.ts"],"sourcesContent":["import { defineGranularComponent } from '@feugene/unocss-preset-granular/contract'\n\n// safelist пустой — все классы прописаны литералами в шаблоне, UnoCSS находит сканом\nexport const grDataTableConfig = defineGranularComponent(import.meta.url, {\n  name: 'GrDataTable',\n  safelist: [],\n  dependencies: ['GrTable', 'GrIcon'],\n})\n"],"mappings":";;AAGA,IAAa,oBAAoB,wBAAwB,OAAO,KAAK,KAAK;CACxE,MAAM;CACN,UAAU,EAAE;CACZ,cAAc,CAAC,WAAW,SAAS;CACpC,CAAC"}

package/dist/chunks/config-DW_RqmUp.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"config-DW_RqmUp.js","names":[],"sources":["../../src/components/GrBadgeWrap/config.ts"],"sourcesContent":["import {defineGranularComponent} from '@feugene/unocss-preset-granular/contract'\n\nexport const grBadgeWrapConfig = defineGranularComponent(import.meta.url, {\n  name: 'GrBadgeWrap',\n  safelist: [],\n})"],"mappings":";;AAEA,IAAa,oBAAoB,wBAAwB,OAAO,KAAK,KAAK;CACxE,MAAM;CACN,UAAU,EAAE;CACb,CAAA"}

package/dist/chunks/config-DmI1IQvI2.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"config-DmI1IQvI2.js","names":[],"sources":["../../src/components/GrTabs/config.ts"],"sourcesContent":["import {defineGranularComponent} from '@feugene/unocss-preset-granular/contract'\n\nexport const grTabsConfig = defineGranularComponent(import.meta.url, {\n    name: 'GrTabs',\n    safelist: []\n})\n"],"mappings":";;AAEA,IAAa,eAAe,wBAAwB,OAAO,KAAK,KAAK;CACjE,MAAM;CACN,UAAU,EAAE;CACf,CAAC"}

package/dist/chunks/config-Dnu4VuO0.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"config-Dnu4VuO0.js","names":[],"sources":["../../src/components/GrFormField/config.ts"],"sourcesContent":["import { defineGranularComponent } from '@feugene/unocss-preset-granular/contract'\n\nexport const grFormFieldConfig = defineGranularComponent(import.meta.url, {\n  name: 'GrFormField',\n  safelist: [],\n})\n"],"mappings":";;AAEA,IAAa,oBAAoB,wBAAwB,OAAO,KAAK,KAAK;CACxE,MAAM;CACN,UAAU,EAAE;CACb,CAAC"}

package/dist/chunks/config-TyzU6gLf.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"config-TyzU6gLf.js","names":[],"sources":["../../src/components/GrCheckbox/config.ts"],"sourcesContent":["import {defineGranularComponent} from '@feugene/unocss-preset-granular/contract'\n\nexport const grCheckboxConfig = defineGranularComponent(import.meta.url, {\n    name: 'GrCheckbox',\n    safelist: [],\n})"],"mappings":";;AAEA,IAAa,mBAAmB,wBAAwB,OAAO,KAAK,KAAK;CACrE,MAAM;CACN,UAAU,EAAE;CACf,CAAA"}

package/dist/chunks/config-etXh7Bsr2.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"config-etXh7Bsr2.js","names":[],"sources":["../../src/components/GrDropdownMenu/config.ts"],"sourcesContent":["import { defineGranularComponent } from '@feugene/unocss-preset-granular/contract'\n\nexport const grDropdownMenuConfig = defineGranularComponent(import.meta.url, {\n  name: 'GrDropdownMenu',\n  dependencies: ['GrDropdown'],\n  // Все токены прописаны статически в шаблонах подкомпонентов — UnoCSS находит их сканом.\n  safelist: [],\n})\n"],"mappings":";;AAEA,IAAa,uBAAuB,wBAAwB,OAAO,KAAK,KAAK;CAC3E,MAAM;CACN,cAAc,CAAC,aAAa;CAE5B,UAAU,EAAE;CACb,CAAC"}

package/dist/chunks/config-qJXIIY1E.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"config-qJXIIY1E.js","names":[],"sources":["../../src/components/GrSidebar/config.ts"],"sourcesContent":["import { defineGranularComponent } from '@feugene/unocss-preset-granular/contract'\n\nexport const grSidebarConfig = defineGranularComponent(import.meta.url, {\n  name: 'GrSidebar',\n  safelist: [],\n})\n"],"mappings":";;AAEA,IAAa,kBAAkB,wBAAwB,OAAO,KAAK,KAAK;CACtE,MAAM;CACN,UAAU,EAAE;CACb,CAAC"}

package/dist/chunks/config-rQlbnEKn.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"config-rQlbnEKn.js","names":[],"sources":["../../src/components/GrCard/config.ts"],"sourcesContent":["import { defineGranularComponent } from '@feugene/unocss-preset-granular/contract'\n\nexport const grCardConfig = defineGranularComponent(import.meta.url, {\n  name: 'GrCard',\n  safelist: [],\n})\n"],"mappings":";;AAEA,IAAa,eAAe,wBAAwB,OAAO,KAAK,KAAK;CACnE,MAAM;CACN,UAAU,EAAE;CACb,CAAC"}

package/dist/components/GrAlert/chunks/GrAlert-BjerGcU8.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"GrAlert-BjerGcU8.js","names":[],"sources":["../../../../src/components/GrAlert/GrAlert.vue","../../../../src/components/GrAlert/GrAlert.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport IconWarning from '~icons/lucide/alert-triangle'\nimport IconCheck from '~icons/lucide/check-circle'\nimport IconInfo from '~icons/lucide/info'\nimport IconClose from '~icons/lucide/x'\nimport IconError from '~icons/lucide/x-circle'\n\nexport type GrAlertTone = 'info' | 'success' | 'warning' | 'danger' | 'slate' | 'azure'\nexport type GrAlertVariant = 'soft' | 'light'\n\ntype GrAlertResolvedStyles = {\n  bg: string\n  border: string\n  icon: string\n  title: string\n  text: string\n  close: string\n  closeHover: string\n  Icon: unknown\n}\n\nconst DEFAULT_TEXT_COLORS = {\n  title: 'var(--fg)',\n  text: 'var(--muted-fg)',\n  close: 'var(--muted-fg)',\n  closeHover: 'var(--fg)',\n} as const\n\nconst WARNING_LIGHT_TEXT_COLOR = '#92400e'\n\nconst emit = defineEmits<{\n  (event: 'close'): void\n}>()\n\nconst props = withDefaults(defineProps<{\n  tone?: GrAlertTone\n  variant?: GrAlertVariant\n  title?: string\n  closable?: boolean\n  backgroundColor?: string\n  textColor?: string\n  borderColor?: string\n}>(), {\n  tone: 'info',\n  variant: 'soft',\n  title: undefined,\n  closable: false,\n  backgroundColor: undefined,\n  textColor: undefined,\n  borderColor: undefined,\n})\n\nconst getCustomColor = (value?: string) => value?.trim() || undefined\n\nconst SOFT_TONE_STYLES: Record<GrAlertTone, GrAlertResolvedStyles> = {\n  info: {\n    bg: 'var(--ds-info-light)',\n    border: 'color-mix(in srgb, var(--ds-info) 22%, var(--brd))',\n    icon: 'var(--ds-info)',\n    ...DEFAULT_TEXT_COLORS,\n    Icon: IconInfo,\n  },\n  success: {\n    bg: 'var(--ds-success-light)',\n    border: 'color-mix(in srgb, var(--ds-success) 22%, var(--brd))',\n    icon: 'var(--ds-success)',\n    ...DEFAULT_TEXT_COLORS,\n    Icon: IconCheck,\n  },\n  warning: {\n    bg: 'var(--ds-warning-light)',\n    border: 'color-mix(in srgb, var(--ds-warning) 22%, var(--brd))',\n    icon: 'var(--ds-warning)',\n    ...DEFAULT_TEXT_COLORS,\n    Icon: IconWarning,\n  },\n  danger: {\n    bg: 'var(--ds-danger-light)',\n    border: 'color-mix(in srgb, var(--ds-danger) 22%, var(--brd))',\n    icon: 'var(--ds-danger)',\n    ...DEFAULT_TEXT_COLORS,\n    Icon: IconError,\n  },\n  slate: {\n    bg: 'var(--ds-slate-light)',\n    border: 'color-mix(in srgb, var(--ds-slate) 22%, var(--brd))',\n    icon: 'var(--ds-slate)',\n    ...DEFAULT_TEXT_COLORS,\n    Icon: IconInfo,\n  },\n  azure: {\n    bg: 'var(--ds-azure-light)',\n    border: 'color-mix(in srgb, var(--ds-azure) 22%, var(--brd))',\n    icon: 'var(--ds-azure)',\n    ...DEFAULT_TEXT_COLORS,\n    Icon: IconInfo,\n  },\n}\n\nconst LIGHT_TONE_STYLES: Partial<Record<GrAlertTone, GrAlertResolvedStyles>> = {\n  warning: {\n    bg: '#fffbeb',\n    border: '#fcd34d',\n    icon: WARNING_LIGHT_TEXT_COLOR,\n    title: WARNING_LIGHT_TEXT_COLOR,\n    text: WARNING_LIGHT_TEXT_COLOR,\n    close: WARNING_LIGHT_TEXT_COLOR,\n    closeHover: WARNING_LIGHT_TEXT_COLOR,\n    Icon: IconWarning,\n  },\n}\n\nconst styles = computed<GrAlertResolvedStyles>(() => {\n  const base = (props.variant === 'light' ? LIGHT_TONE_STYLES[props.tone] : undefined) ?? SOFT_TONE_STYLES[props.tone]\n  const customTextColor = getCustomColor(props.textColor)\n\n  return {\n    ...base,\n    bg: getCustomColor(props.backgroundColor) ?? base.bg,\n    border: getCustomColor(props.borderColor) ?? base.border,\n    icon: customTextColor ?? base.icon,\n    title: customTextColor ?? base.title,\n    text: customTextColor ?? base.text,\n    close: customTextColor ?? base.close,\n    closeHover: customTextColor ?? base.closeHover,\n  }\n})\n\nconst rootStyle = computed(() => ({\n  '--ds-alert-bg': styles.value.bg,\n  '--ds-alert-brd': styles.value.border,\n  '--ds-alert-icon-color': styles.value.icon,\n  '--ds-alert-title-color': styles.value.title,\n  '--ds-alert-text-color': styles.value.text,\n  '--ds-alert-close-color': styles.value.close,\n  '--ds-alert-close-hover-color': styles.value.closeHover,\n  background: 'var(--ds-alert-bg)',\n  borderColor: 'var(--ds-alert-brd)',\n}))\n</script>\n\n<template>\n  <div\n    role=\"alert\"\n    class=\"rounded-[var(--ds-radius-lg)] border px-4 py-3\"\n    :style=\"rootStyle\"\n  >\n    <div class=\"flex items-start gap-3\">\n      <component :is=\"styles.Icon\" class=\"mt-0.5 h-5 w-5 text-[var(--ds-alert-icon-color)]\" aria-hidden=\"true\" />\n      <div class=\"min-w-0 flex-1\">\n        <div v-if=\"props.title\" class=\"text-[14px] font-700 text-[var(--ds-alert-title-color)]\">\n          {{ props.title }}\n        </div>\n        <div class=\"mt-0.5 text-[13px] text-[var(--ds-alert-text-color)]\">\n          <slot />\n        </div>\n      </div>\n\n      <button\n        v-if=\"props.closable\"\n        type=\"button\"\n        class=\"-mr-1 -mt-1 rounded-[var(--ds-radius-md)] p-1 text-[var(--ds-alert-close-color)] transition-colors hover:text-[var(--ds-alert-close-hover-color)]\"\n        aria-label=\"Close\"\n        @click=\"emit('close')\"\n      >\n        <IconClose class=\"h-4 w-4\" aria-hidden=\"true\" />\n      </button>\n    </div>\n  </div>\n</template>","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport IconWarning from '~icons/lucide/alert-triangle'\nimport IconCheck from '~icons/lucide/check-circle'\nimport IconInfo from '~icons/lucide/info'\nimport IconClose from '~icons/lucide/x'\nimport IconError from '~icons/lucide/x-circle'\n\nexport type GrAlertTone = 'info' | 'success' | 'warning' | 'danger' | 'slate' | 'azure'\nexport type GrAlertVariant = 'soft' | 'light'\n\ntype GrAlertResolvedStyles = {\n  bg: string\n  border: string\n  icon: string\n  title: string\n  text: string\n  close: string\n  closeHover: string\n  Icon: unknown\n}\n\nconst DEFAULT_TEXT_COLORS = {\n  title: 'var(--fg)',\n  text: 'var(--muted-fg)',\n  close: 'var(--muted-fg)',\n  closeHover: 'var(--fg)',\n} as const\n\nconst WARNING_LIGHT_TEXT_COLOR = '#92400e'\n\nconst emit = defineEmits<{\n  (event: 'close'): void\n}>()\n\nconst props = withDefaults(defineProps<{\n  tone?: GrAlertTone\n  variant?: GrAlertVariant\n  title?: string\n  closable?: boolean\n  backgroundColor?: string\n  textColor?: string\n  borderColor?: string\n}>(), {\n  tone: 'info',\n  variant: 'soft',\n  title: undefined,\n  closable: false,\n  backgroundColor: undefined,\n  textColor: undefined,\n  borderColor: undefined,\n})\n\nconst getCustomColor = (value?: string) => value?.trim() || undefined\n\nconst SOFT_TONE_STYLES: Record<GrAlertTone, GrAlertResolvedStyles> = {\n  info: {\n    bg: 'var(--ds-info-light)',\n    border: 'color-mix(in srgb, var(--ds-info) 22%, var(--brd))',\n    icon: 'var(--ds-info)',\n    ...DEFAULT_TEXT_COLORS,\n    Icon: IconInfo,\n  },\n  success: {\n    bg: 'var(--ds-success-light)',\n    border: 'color-mix(in srgb, var(--ds-success) 22%, var(--brd))',\n    icon: 'var(--ds-success)',\n    ...DEFAULT_TEXT_COLORS,\n    Icon: IconCheck,\n  },\n  warning: {\n    bg: 'var(--ds-warning-light)',\n    border: 'color-mix(in srgb, var(--ds-warning) 22%, var(--brd))',\n    icon: 'var(--ds-warning)',\n    ...DEFAULT_TEXT_COLORS,\n    Icon: IconWarning,\n  },\n  danger: {\n    bg: 'var(--ds-danger-light)',\n    border: 'color-mix(in srgb, var(--ds-danger) 22%, var(--brd))',\n    icon: 'var(--ds-danger)',\n    ...DEFAULT_TEXT_COLORS,\n    Icon: IconError,\n  },\n  slate: {\n    bg: 'var(--ds-slate-light)',\n    border: 'color-mix(in srgb, var(--ds-slate) 22%, var(--brd))',\n    icon: 'var(--ds-slate)',\n    ...DEFAULT_TEXT_COLORS,\n    Icon: IconInfo,\n  },\n  azure: {\n    bg: 'var(--ds-azure-light)',\n    border: 'color-mix(in srgb, var(--ds-azure) 22%, var(--brd))',\n    icon: 'var(--ds-azure)',\n    ...DEFAULT_TEXT_COLORS,\n    Icon: IconInfo,\n  },\n}\n\nconst LIGHT_TONE_STYLES: Partial<Record<GrAlertTone, GrAlertResolvedStyles>> = {\n  warning: {\n    bg: '#fffbeb',\n    border: '#fcd34d',\n    icon: WARNING_LIGHT_TEXT_COLOR,\n    title: WARNING_LIGHT_TEXT_COLOR,\n    text: WARNING_LIGHT_TEXT_COLOR,\n    close: WARNING_LIGHT_TEXT_COLOR,\n    closeHover: WARNING_LIGHT_TEXT_COLOR,\n    Icon: IconWarning,\n  },\n}\n\nconst styles = computed<GrAlertResolvedStyles>(() => {\n  const base = (props.variant === 'light' ? LIGHT_TONE_STYLES[props.tone] : undefined) ?? SOFT_TONE_STYLES[props.tone]\n  const customTextColor = getCustomColor(props.textColor)\n\n  return {\n    ...base,\n    bg: getCustomColor(props.backgroundColor) ?? base.bg,\n    border: getCustomColor(props.borderColor) ?? base.border,\n    icon: customTextColor ?? base.icon,\n    title: customTextColor ?? base.title,\n    text: customTextColor ?? base.text,\n    close: customTextColor ?? base.close,\n    closeHover: customTextColor ?? base.closeHover,\n  }\n})\n\nconst rootStyle = computed(() => ({\n  '--ds-alert-bg': styles.value.bg,\n  '--ds-alert-brd': styles.value.border,\n  '--ds-alert-icon-color': styles.value.icon,\n  '--ds-alert-title-color': styles.value.title,\n  '--ds-alert-text-color': styles.value.text,\n  '--ds-alert-close-color': styles.value.close,\n  '--ds-alert-close-hover-color': styles.value.closeHover,\n  background: 'var(--ds-alert-bg)',\n  borderColor: 'var(--ds-alert-brd)',\n}))\n</script>\n\n<template>\n  <div\n    role=\"alert\"\n    class=\"rounded-[var(--ds-radius-lg)] border px-4 py-3\"\n    :style=\"rootStyle\"\n  >\n    <div class=\"flex items-start gap-3\">\n      <component :is=\"styles.Icon\" class=\"mt-0.5 h-5 w-5 text-[var(--ds-alert-icon-color)]\" aria-hidden=\"true\" />\n      <div class=\"min-w-0 flex-1\">\n        <div v-if=\"props.title\" class=\"text-[14px] font-700 text-[var(--ds-alert-title-color)]\">\n          {{ props.title }}\n        </div>\n        <div class=\"mt-0.5 text-[13px] text-[var(--ds-alert-text-color)]\">\n          <slot />\n        </div>\n      </div>\n\n      <button\n        v-if=\"props.closable\"\n        type=\"button\"\n        class=\"-mr-1 -mt-1 rounded-[var(--ds-radius-md)] p-1 text-[var(--ds-alert-close-color)] transition-colors hover:text-[var(--ds-alert-close-hover-color)]\"\n        aria-label=\"Close\"\n        @click=\"emit('close')\"\n      >\n        <IconClose class=\"h-4 w-4\" aria-hidden=\"true\" />\n      </button>\n    </div>\n  </div>\n</template>"],"mappings":";;;;;;;;;;;;AA8BA,IAAM,2BAA2B;;;;;;;;;;;;;;;;;;;EAPjC,MAAM,sBAAsB;GAC1B,OAAO;GACP,MAAM;GACN,OAAO;GACP,YAAY;GACb;EAID,MAAM,OAAO;EAIb,MAAM,QAAQ;EAkBd,MAAM,kBAAkB,UAAmB,OAAO,MAAM,IAAI,KAAA;EAE5D,MAAM,mBAA+D;GACnE,MAAM;IACJ,IAAI;IACJ,QAAQ;IACR,MAAM;IACN,GAAG;IACH,MAAM;IACP;GACD,SAAS;IACP,IAAI;IACJ,QAAQ;IACR,MAAM;IACN,GAAG;IACH,MAAM;IACP;GACD,SAAS;IACP,IAAI;IACJ,QAAQ;IACR,MAAM;IACN,GAAG;IACH,MAAM;IACP;GACD,QAAQ;IACN,IAAI;IACJ,QAAQ;IACR,MAAM;IACN,GAAG;IACH,MAAM;IACP;GACD,OAAO;IACL,IAAI;IACJ,QAAQ;IACR,MAAM;IACN,GAAG;IACH,MAAM;IACP;GACD,OAAO;IACL,IAAI;IACJ,QAAQ;IACR,MAAM;IACN,GAAG;IACH,MAAM;IACP;GACH;EAEA,MAAM,oBAAyE,EAC7E,SAAS;GACP,IAAI;GACJ,QAAQ;GACR,MAAM;GACN,OAAO;GACP,MAAM;GACN,OAAO;GACP,YAAY;GACZ,MAAM;GACP,EACH;EAEA,MAAM,SAAS,eAAsC;GACnD,MAAM,QAAQ,MAAM,YAAY,UAAU,kBAAkB,MAAM,QAAQ,KAAA,MAAc,iBAAiB,MAAM;GAC/G,MAAM,kBAAkB,eAAe,MAAM,UAAS;AAEtD,UAAO;IACL,GAAG;IACH,IAAI,eAAe,MAAM,gBAAgB,IAAI,KAAK;IAClD,QAAQ,eAAe,MAAM,YAAY,IAAI,KAAK;IAClD,MAAM,mBAAmB,KAAK;IAC9B,OAAO,mBAAmB,KAAK;IAC/B,MAAM,mBAAmB,KAAK;IAC9B,OAAO,mBAAmB,KAAK;IAC/B,YAAY,mBAAmB,KAAK;IACtC;IACD;EAED,MAAM,YAAY,gBAAgB;GAChC,iBAAiB,OAAO,MAAM;GAC9B,kBAAkB,OAAO,MAAM;GAC/B,yBAAyB,OAAO,MAAM;GACtC,0BAA0B,OAAO,MAAM;GACvC,yBAAyB,OAAO,MAAM;GACtC,0BAA0B,OAAO,MAAM;GACvC,gCAAgC,OAAO,MAAM;GAC7C,YAAY;GACZ,aAAa;GACd,EAAC;;uBAIA,mBA0BM,OAAA;IAzBJ,MAAK;IACL,OAAM;IACL,OAAK,eAAE,UAAA,MAAS;OAEjB,mBAoBM,OApBN,YAoBM;kBAnBJ,YAA2G,wBAA3F,OAAA,MAAO,KAAI,EAAA;KAAE,OAAM;KAAmD,eAAY;;IAClG,mBAOM,OAPN,YAOM,CANO,MAAM,SAAA,WAAA,EAAjB,mBAEM,OAFN,YAEM,gBADD,MAAM,MAAK,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA,EAEhB,mBAEM,OAFN,YAEM,CADJ,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA,CAAA,CAAA;IAKJ,MAAM,YAAA,WAAA,EADd,mBAQS,UAAA;;KANP,MAAK;KACL,OAAM;KACN,cAAW;KACV,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,QAAA;QAEZ,YAAgD,MAAA,UAAA,EAAA;KAArC,OAAM;KAAU,eAAY"}