@7pmlabs/design-system 2.0.1 → 2.0.3

package/dist/design-system25.js

@@ -30,31 +30,36 @@ var f = [
 	},
 	setup(t) {
 		u((e) => ({
-			v46b8c47b: n.value.width,
-			v7690d112: n.value.height,
-			v3d749fa1: n.value.transform,
-			v75dd342e: n.value.fill
+			v980e8a80: o.value.width,
+			v9d60b926: o.value.height,
+			fcd42934: o.value.transform,
+			v3752e149: o.value.fill
 		}));
-		let n = i(() => ({
+		let n = "/_design-system/icons".replace(/\/{2,}/g, "/"), o = i(() => ({
 			width: t.width || `${r[t.size]}rem`,
 			height: t.height || `${r[t.size]}rem`,
 			transform: `rotate(${t.rotate}deg)`,
 			fill: ["currentColor", ...Object.values(e)].includes(t.color) ? void 0 : t.color
-		})), o = i(() => t.brand ? "brands" : t.variant), p = l("");
-		return d(() => [t.icon, o.value], async () => {
-			p.value = "";
-			let e = `/node_modules/@7pmlabs/design-system/dist/assets/icons/${o.value}/${t.icon}.svg`;
+		})), p = i(() => t.brand ? "brands" : t.variant), m = Object.freeze({ __BICON_STATIC_ICONS_PLACEHOLDER__: "" }), h = l("");
+		return d(() => [t.icon, p.value], async () => {
+			let e = `${p.value}/${t.icon}`, r = m[e];
+			if (r !== void 0) {
+				h.value = r;
+				return;
+			}
+			h.value = "";
+			let i = `${n}/${e}.svg`;
 			try {
-				let n = await fetch(e);
-				if (!n.ok) {
-					console.warn(`[BIcon] Could not load icon '${t.icon}' from '${e}' (HTTP ${n.status})`);
+				let e = await fetch(i);
+				if (!e.ok) {
+					console.warn(`[BIcon] Could not load icon '${t.icon}' from '${i}' (HTTP ${e.status})`);
 					return;
 				}
-				p.value = await n.text();
+				h.value = await e.text();
 			} catch {
-				console.warn(`[BIcon] Could not load icon '${t.icon}' from '${e}'`);
+				console.warn(`[BIcon] Could not load icon '${t.icon}' from '${i}'`);
 			}
-		}, { immediate: !0 }), (e, r) => (c(), a("span", {
+		}, { immediate: !0 }), (e, n) => (c(), a("span", {
 			class: s(["b-icon", [{
 				"b:fill-current": t.color === "currentColor",
 				"b:fill-primary": t.color === "primary",
@@ -63,12 +68,12 @@ var f = [
 				"b:fill-failure": t.color === "failure",
 				"b:fill-warning": t.color === "warning",
 				"b:fill-info": t.color === "info",
-				"b-icon--color": !!n.value.fill
+				"b-icon--color": !!o.value.fill
 			}]]),
 			"aria-hidden": !!t.decorative || void 0,
 			"aria-label": t.ariaLabel,
 			"aria-labelledby": t.ariaLabelledby,
-			innerHTML: p.value
+			innerHTML: h.value
 		}, null, 10, f));
 	}
 });

package/dist/design-system25.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system25.js","names":[],"sources":["../src/components/BIcon/BIcon.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { BIconBrandName, BIconName } from '@/components/BIcon/BIconEnum.ts';\nimport { BIconSizeMap } from '@/constants';\nimport { BCommonColor, BIconSize, BIconVariant } from '@/types';\nimport { computed, ref, watch } from 'vue';\n\nconst {\n  icon,\n  variant = BIconVariant.Regular,\n  size = BIconSize.Medium,\n  decorative = true,\n  rotate = 0,\n  brand = false,\n  color = 'currentColor',\n  width,\n  height,\n} = defineProps<{\n  /**\n   * Icon name, should match the file name in the assets/icons folder\n   * @example 'check', 'cross', 'arrow-right'\n   */\n  icon: `${BIconName}` | `${BIconBrandName}`;\n  /**\n   * Predefined icon variant, such as 'regular', 'solid', 'light', etc.\n   * @default 'regular'\n   */\n  variant?: `${BIconVariant}`;\n  /**\n   * Predefined icon sizes\n   * @default 'medium'\n   */\n  size?: `${BIconSize}`;\n  /**\n   * Custom color for the icon, can be a CSS color value or a theme color\n   * @example 'currentColor', 'primary', 'secondary', '#808080', 'rgb(128, 128, 128)', 'hsl(0, 0%, 50%)'\n   */\n  color?: string | 'currentColor' | `${BCommonColor}`;\n  /**\n   * Custom width\n   * @example '2rem', '24px', '1.5em'\n   */\n  width?: string;\n  /**\n   * Custom height\n   * @example '2rem', '24px', '1.5em'\n   */\n  height?: string;\n  /**\n   * Whether icon is decorative (sets aria-hidden)\n   * @default true\n   */\n  decorative?: boolean;\n  /**\n   * Accessible label for meaningful icons\n   */\n  ariaLabel?: string;\n  /**\n   * ID of element that labels this icon\n   */\n  ariaLabelledby?: string;\n  /**\n   * Icon rotation in degrees\n   * @default 0\n   */\n  rotate?: number;\n  /**\n   * Whether the icon is a brand icon\n   */\n  brand?: boolean;\n}>();\n\nconst ICONS_BASE_URL = import.meta.env.DEV\n  ? '/src/assets/icons'\n  : `/node_modules/${__PACKAGE_NAME__}/dist/assets/icons`;\n\nconst svgStyle = computed(() => ({\n  width: width || `${BIconSizeMap[size]}rem`,\n  height: height || `${BIconSizeMap[size]}rem`,\n  transform: `rotate(${rotate}deg)`,\n  fill: ['currentColor', ...Object.values(BCommonColor)].includes(color) ? undefined : color,\n}));\n\nconst iconFolder = computed(() => (brand ? 'brands' : variant));\n\n/**\n * SVG markup fetched at runtime from the static assets folder.\n * No dynamic import() - icons are NOT bundled as JS chunks.\n * They are served as plain .svg files copied to dist/assets/icons by viteStaticCopy.\n */\nconst svgMarkup = ref<string>('');\n\nconst loadIcon = async () => {\n  svgMarkup.value = '';\n  const url = `${ICONS_BASE_URL}/${iconFolder.value}/${icon}.svg`;\n  try {\n    const res = await fetch(url);\n    if (!res.ok) {\n      console.warn(`[BIcon] Could not load icon '${icon}' from '${url}' (HTTP ${res.status})`);\n      return;\n    }\n    svgMarkup.value = await res.text();\n  } catch {\n    console.warn(`[BIcon] Could not load icon '${icon}' from '${url}'`);\n  }\n};\n\nwatch(() => [icon, iconFolder.value], loadIcon, { immediate: true });\n</script>\n\n<template>\n  <!-- v-html renders the raw SVG markup inline so fill/color CSS works normally -->\n  <span\n    class=\"b-icon\"\n    :class=\"[\n      {\n        'b:fill-current': color === 'currentColor',\n        'b:fill-primary': color === 'primary',\n        'b:fill-secondary': color === 'secondary',\n        'b:fill-success': color === 'success',\n        'b:fill-failure': color === 'failure',\n        'b:fill-warning': color === 'warning',\n        'b:fill-info': color === 'info',\n        'b-icon--color': !!svgStyle.fill,\n      },\n    ]\"\n    :aria-hidden=\"!!decorative || undefined\"\n    :aria-label=\"ariaLabel\"\n    :aria-labelledby=\"ariaLabelledby\"\n    v-html=\"svgMarkup\"\n  />\n</template>\n\n<style scoped>\n.b-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: v-bind('svgStyle.width');\n  height: v-bind('svgStyle.height');\n  transform: v-bind('svgStyle.transform');\n}\n\n/* Size the inner <svg> element to fill the wrapper span */\n.b-icon :deep(svg) {\n  width: 100%;\n  height: 100%;\n}\n\n.b-icon--color :deep(svg) {\n  fill: v-bind('svgStyle.fill');\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuEA,IAIM,IAAW,SAAgB;GAC/B,OAAO,EAAA,SAAS,GAAG,EAAa,EAAA,MAAM;GACtC,QAAQ,EAAA,UAAU,GAAG,EAAa,EAAA,MAAM;GACxC,WAAW,UAAU,EAAA,OAAO;GAC5B,MAAM,CAAC,gBAAgB,GAAG,OAAO,OAAO,EAAa,CAAC,CAAC,SAAS,EAAA,MAAM,GAAG,KAAA,IAAY,EAAA;GACtF,EAAE,EAEG,IAAa,QAAgB,EAAA,QAAQ,WAAW,EAAA,QAAS,EAOzD,IAAY,EAAY,GAAG;SAiBjC,QAAY,CAAC,EAAA,MAAM,EAAW,MAAM,EAfnB,YAAY;AAC3B,KAAU,QAAQ;GAClB,IAAM,IAAM,0DAAqB,EAAW,MAAM,GAAG,EAAA,KAAK;AAC1D,OAAI;IACF,IAAM,IAAM,MAAM,MAAM,EAAI;AAC5B,QAAI,CAAC,EAAI,IAAI;AACX,aAAQ,KAAK,gCAAgC,EAAA,KAAK,UAAU,EAAI,UAAU,EAAI,OAAO,GAAG;AACxF;;AAEF,MAAU,QAAQ,MAAM,EAAI,MAAM;WAC5B;AACN,YAAQ,KAAK,gCAAgC,EAAA,KAAK,UAAU,EAAI,GAAG;;KAIvB,EAAE,WAAW,IAAM,CAAC,kBAKlE,EAkBE,QAAA;GAjBA,OAAK,EAAA,CAAC,UAAQ,CAAA;sBAC8B,EAAA,UAAK;sBAA+C,EAAA,UAAK;wBAA4C,EAAA,UAAK;sBAA4C,EAAA,UAAK;sBAA0C,EAAA,UAAK;sBAA0C,EAAA,UAAK;mBAAuC,EAAA,UAAK;uBAAwC,EAAA,MAAS;;GAYjY,eAAW,CAAA,CAAI,EAAA,cAAc,KAAA;GAC7B,cAAY,EAAA;GACZ,mBAAiB,EAAA;GAClB,WAAQ,EAAA"}
+{"version":3,"file":"design-system25.js","names":[],"sources":["../src/components/BIcon/BIcon.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { BIconBrandName, BIconName } from '@/components/BIcon/BIconEnum.ts';\nimport { BIconSizeMap } from '@/constants';\nimport { BCommonColor, BIconSize, BIconVariant } from '@/types';\nimport { computed, ref, watch } from 'vue';\n\nconst {\n  icon,\n  variant = BIconVariant.Regular,\n  size = BIconSize.Medium,\n  decorative = true,\n  rotate = 0,\n  brand = false,\n  color = 'currentColor',\n  width,\n  height,\n} = defineProps<{\n  /**\n   * Icon name, should match the file name in the assets/icons folder\n   * @example 'check', 'cross', 'arrow-right'\n   */\n  icon: `${BIconName}` | `${BIconBrandName}`;\n  /**\n   * Predefined icon variant, such as 'regular', 'solid', 'light', etc.\n   * @default 'regular'\n   */\n  variant?: `${BIconVariant}`;\n  /**\n   * Predefined icon sizes\n   * @default 'medium'\n   */\n  size?: `${BIconSize}`;\n  /**\n   * Custom color for the icon, can be a CSS color value or a theme color\n   * @example 'currentColor', 'primary', 'secondary', '#808080', 'rgb(128, 128, 128)', 'hsl(0, 0%, 50%)'\n   */\n  color?: string | 'currentColor' | `${BCommonColor}`;\n  /**\n   * Custom width\n   * @example '2rem', '24px', '1.5em'\n   */\n  width?: string;\n  /**\n   * Custom height\n   * @example '2rem', '24px', '1.5em'\n   */\n  height?: string;\n  /**\n   * Whether icon is decorative (sets aria-hidden)\n   * @default true\n   */\n  decorative?: boolean;\n  /**\n   * Accessible label for meaningful icons\n   */\n  ariaLabel?: string;\n  /**\n   * ID of element that labels this icon\n   */\n  ariaLabelledby?: string;\n  /**\n   * Icon rotation in degrees\n   * @default 0\n   */\n  rotate?: number;\n  /**\n   * Whether the icon is a brand icon\n   */\n  brand?: boolean;\n}>();\n\n// Resolved at build time by the consuming bundler. For lib-mode publishes this\n// bakes to '/' (default Vite base), preserving the historical `/_design-system/icons`\n// URL. For consumers that build from source with a non-root base (e.g. Storybook\n// deployed under a project subpath), the base is honored automatically.\nconst ICONS_BASE_URL = `${import.meta.env.BASE_URL}_design-system/icons`.replace(\n  /\\/{2,}/g,\n  '/',\n);\n\nconst svgStyle = computed(() => ({\n  width: width || `${BIconSizeMap[size]}rem`,\n  height: height || `${BIconSizeMap[size]}rem`,\n  transform: `rotate(${rotate}deg)`,\n  fill: ['currentColor', ...Object.values(BCommonColor)].includes(color) ? undefined : color,\n}));\n\nconst iconFolder = computed(() => (brand ? 'brands' : variant));\n\n/**\n * Map of `<variant>/<icon-name>` → raw SVG markup.\n *\n * In the published library this object literal is an inert sentinel — the\n * `__BICON_STATIC_ICONS_PLACEHOLDER__` key is never read at runtime. When the\n * `@7pmlabs/design-system/vite` plugin is in the consumer's pipeline, its\n * `transform` hook replaces this exact literal in the bundled BIcon module\n * with the AST-scanned set of statically-used icons, so they render in the\n * first frame without a network roundtrip.\n *\n * Consumers without the plugin keep the inert object and fall back to the\n * runtime fetch below — the build succeeds either way.\n */\nconst STATIC_ICONS: Readonly<Record<string, string>> = Object.freeze({\n  __BICON_STATIC_ICONS_PLACEHOLDER__: '',\n});\n\nconst svgMarkup = ref<string>('');\n\nconst loadIcon = async () => {\n  const key = `${iconFolder.value}/${icon}`;\n  const inlined = STATIC_ICONS[key];\n  if (inlined !== undefined) {\n    svgMarkup.value = inlined;\n    return;\n  }\n  svgMarkup.value = '';\n  const url = `${ICONS_BASE_URL}/${key}.svg`;\n  try {\n    const res = await fetch(url);\n    if (!res.ok) {\n      console.warn(`[BIcon] Could not load icon '${icon}' from '${url}' (HTTP ${res.status})`);\n      return;\n    }\n    svgMarkup.value = await res.text();\n  } catch {\n    console.warn(`[BIcon] Could not load icon '${icon}' from '${url}'`);\n  }\n};\n\nwatch(() => [icon, iconFolder.value], loadIcon, { immediate: true });\n</script>\n\n<template>\n  <!-- v-html renders the raw SVG markup inline so fill/color CSS works normally -->\n  <span\n    class=\"b-icon\"\n    :class=\"[\n      {\n        'b:fill-current': color === 'currentColor',\n        'b:fill-primary': color === 'primary',\n        'b:fill-secondary': color === 'secondary',\n        'b:fill-success': color === 'success',\n        'b:fill-failure': color === 'failure',\n        'b:fill-warning': color === 'warning',\n        'b:fill-info': color === 'info',\n        'b-icon--color': !!svgStyle.fill,\n      },\n    ]\"\n    :aria-hidden=\"!!decorative || undefined\"\n    :aria-label=\"ariaLabel\"\n    :aria-labelledby=\"ariaLabelledby\"\n    v-html=\"svgMarkup\"\n  />\n</template>\n\n<style scoped>\n.b-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: v-bind('svgStyle.width');\n  height: v-bind('svgStyle.height');\n  transform: v-bind('svgStyle.transform');\n}\n\n/* Size the inner <svg> element to fill the wrapper span */\n.b-icon :deep(svg) {\n  width: 100%;\n  height: 100%;\n}\n\n.b-icon--color :deep(svg) {\n  fill: v-bind('svgStyle.fill');\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2EA,IAAM,IAAiB,wBAAkD,QACvE,WACA,IACD,EAEK,IAAW,SAAgB;GAC/B,OAAO,EAAA,SAAS,GAAG,EAAa,EAAA,MAAM;GACtC,QAAQ,EAAA,UAAU,GAAG,EAAa,EAAA,MAAM;GACxC,WAAW,UAAU,EAAA,OAAO;GAC5B,MAAM,CAAC,gBAAgB,GAAG,OAAO,OAAO,EAAa,CAAC,CAAC,SAAS,EAAA,MAAM,GAAG,KAAA,IAAY,EAAA;GACtF,EAAE,EAEG,IAAa,QAAgB,EAAA,QAAQ,WAAW,EAAA,QAAS,EAezD,IAAiD,OAAO,OAAO,EACnE,oCAAoC,IACrC,CAAC,EAEI,IAAY,EAAY,GAAG;SAuBjC,QAAY,CAAC,EAAA,MAAM,EAAW,MAAM,EArBnB,YAAY;GAC3B,IAAM,IAAM,GAAG,EAAW,MAAM,GAAG,EAAA,QAC7B,IAAU,EAAa;AAC7B,OAAI,MAAY,KAAA,GAAW;AACzB,MAAU,QAAQ;AAClB;;AAEF,KAAU,QAAQ;GAClB,IAAM,IAAM,GAAG,EAAe,GAAG,EAAI;AACrC,OAAI;IACF,IAAM,IAAM,MAAM,MAAM,EAAI;AAC5B,QAAI,CAAC,EAAI,IAAI;AACX,aAAQ,KAAK,gCAAgC,EAAA,KAAK,UAAU,EAAI,UAAU,EAAI,OAAO,GAAG;AACxF;;AAEF,MAAU,QAAQ,MAAM,EAAI,MAAM;WAC5B;AACN,YAAQ,KAAK,gCAAgC,EAAA,KAAK,UAAU,EAAI,GAAG;;KAIvB,EAAE,WAAW,IAAM,CAAC,kBAKlE,EAkBE,QAAA;GAjBA,OAAK,EAAA,CAAC,UAAQ,CAAA;sBAC8B,EAAA,UAAK;sBAA+C,EAAA,UAAK;wBAA4C,EAAA,UAAK;sBAA4C,EAAA,UAAK;sBAA0C,EAAA,UAAK;sBAA0C,EAAA,UAAK;mBAAuC,EAAA,UAAK;uBAAwC,EAAA,MAAS;;GAYjY,eAAW,CAAA,CAAI,EAAA,cAAc,KAAA;GAC7B,cAAY,EAAA;GACZ,mBAAiB,EAAA;GAClB,WAAQ,EAAA"}

package/dist/design-system27.js

@@ -2,7 +2,7 @@ import e from "./design-system14.js";
 import t from "./design-system25.js";
 /* empty css                */
 //#region src/components/BIcon/BIcon.vue
-var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-15f63dfa"]]);
+var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-adf55fbd"]]);
 //#endregion
 export { n as default };
 

package/dist/design-system27.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system27.js","names":[],"sources":["../src/components/BIcon/BIcon.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { BIconBrandName, BIconName } from '@/components/BIcon/BIconEnum.ts';\nimport { BIconSizeMap } from '@/constants';\nimport { BCommonColor, BIconSize, BIconVariant } from '@/types';\nimport { computed, ref, watch } from 'vue';\n\nconst {\n  icon,\n  variant = BIconVariant.Regular,\n  size = BIconSize.Medium,\n  decorative = true,\n  rotate = 0,\n  brand = false,\n  color = 'currentColor',\n  width,\n  height,\n} = defineProps<{\n  /**\n   * Icon name, should match the file name in the assets/icons folder\n   * @example 'check', 'cross', 'arrow-right'\n   */\n  icon: `${BIconName}` | `${BIconBrandName}`;\n  /**\n   * Predefined icon variant, such as 'regular', 'solid', 'light', etc.\n   * @default 'regular'\n   */\n  variant?: `${BIconVariant}`;\n  /**\n   * Predefined icon sizes\n   * @default 'medium'\n   */\n  size?: `${BIconSize}`;\n  /**\n   * Custom color for the icon, can be a CSS color value or a theme color\n   * @example 'currentColor', 'primary', 'secondary', '#808080', 'rgb(128, 128, 128)', 'hsl(0, 0%, 50%)'\n   */\n  color?: string | 'currentColor' | `${BCommonColor}`;\n  /**\n   * Custom width\n   * @example '2rem', '24px', '1.5em'\n   */\n  width?: string;\n  /**\n   * Custom height\n   * @example '2rem', '24px', '1.5em'\n   */\n  height?: string;\n  /**\n   * Whether icon is decorative (sets aria-hidden)\n   * @default true\n   */\n  decorative?: boolean;\n  /**\n   * Accessible label for meaningful icons\n   */\n  ariaLabel?: string;\n  /**\n   * ID of element that labels this icon\n   */\n  ariaLabelledby?: string;\n  /**\n   * Icon rotation in degrees\n   * @default 0\n   */\n  rotate?: number;\n  /**\n   * Whether the icon is a brand icon\n   */\n  brand?: boolean;\n}>();\n\nconst ICONS_BASE_URL = import.meta.env.DEV\n  ? '/src/assets/icons'\n  : `/node_modules/${__PACKAGE_NAME__}/dist/assets/icons`;\n\nconst svgStyle = computed(() => ({\n  width: width || `${BIconSizeMap[size]}rem`,\n  height: height || `${BIconSizeMap[size]}rem`,\n  transform: `rotate(${rotate}deg)`,\n  fill: ['currentColor', ...Object.values(BCommonColor)].includes(color) ? undefined : color,\n}));\n\nconst iconFolder = computed(() => (brand ? 'brands' : variant));\n\n/**\n * SVG markup fetched at runtime from the static assets folder.\n * No dynamic import() - icons are NOT bundled as JS chunks.\n * They are served as plain .svg files copied to dist/assets/icons by viteStaticCopy.\n */\nconst svgMarkup = ref<string>('');\n\nconst loadIcon = async () => {\n  svgMarkup.value = '';\n  const url = `${ICONS_BASE_URL}/${iconFolder.value}/${icon}.svg`;\n  try {\n    const res = await fetch(url);\n    if (!res.ok) {\n      console.warn(`[BIcon] Could not load icon '${icon}' from '${url}' (HTTP ${res.status})`);\n      return;\n    }\n    svgMarkup.value = await res.text();\n  } catch {\n    console.warn(`[BIcon] Could not load icon '${icon}' from '${url}'`);\n  }\n};\n\nwatch(() => [icon, iconFolder.value], loadIcon, { immediate: true });\n</script>\n\n<template>\n  <!-- v-html renders the raw SVG markup inline so fill/color CSS works normally -->\n  <span\n    class=\"b-icon\"\n    :class=\"[\n      {\n        'b:fill-current': color === 'currentColor',\n        'b:fill-primary': color === 'primary',\n        'b:fill-secondary': color === 'secondary',\n        'b:fill-success': color === 'success',\n        'b:fill-failure': color === 'failure',\n        'b:fill-warning': color === 'warning',\n        'b:fill-info': color === 'info',\n        'b-icon--color': !!svgStyle.fill,\n      },\n    ]\"\n    :aria-hidden=\"!!decorative || undefined\"\n    :aria-label=\"ariaLabel\"\n    :aria-labelledby=\"ariaLabelledby\"\n    v-html=\"svgMarkup\"\n  />\n</template>\n\n<style scoped>\n.b-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: v-bind('svgStyle.width');\n  height: v-bind('svgStyle.height');\n  transform: v-bind('svgStyle.transform');\n}\n\n/* Size the inner <svg> element to fill the wrapper span */\n.b-icon :deep(svg) {\n  width: 100%;\n  height: 100%;\n}\n\n.b-icon--color :deep(svg) {\n  fill: v-bind('svgStyle.fill');\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system27.js","names":[],"sources":["../src/components/BIcon/BIcon.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { BIconBrandName, BIconName } from '@/components/BIcon/BIconEnum.ts';\nimport { BIconSizeMap } from '@/constants';\nimport { BCommonColor, BIconSize, BIconVariant } from '@/types';\nimport { computed, ref, watch } from 'vue';\n\nconst {\n  icon,\n  variant = BIconVariant.Regular,\n  size = BIconSize.Medium,\n  decorative = true,\n  rotate = 0,\n  brand = false,\n  color = 'currentColor',\n  width,\n  height,\n} = defineProps<{\n  /**\n   * Icon name, should match the file name in the assets/icons folder\n   * @example 'check', 'cross', 'arrow-right'\n   */\n  icon: `${BIconName}` | `${BIconBrandName}`;\n  /**\n   * Predefined icon variant, such as 'regular', 'solid', 'light', etc.\n   * @default 'regular'\n   */\n  variant?: `${BIconVariant}`;\n  /**\n   * Predefined icon sizes\n   * @default 'medium'\n   */\n  size?: `${BIconSize}`;\n  /**\n   * Custom color for the icon, can be a CSS color value or a theme color\n   * @example 'currentColor', 'primary', 'secondary', '#808080', 'rgb(128, 128, 128)', 'hsl(0, 0%, 50%)'\n   */\n  color?: string | 'currentColor' | `${BCommonColor}`;\n  /**\n   * Custom width\n   * @example '2rem', '24px', '1.5em'\n   */\n  width?: string;\n  /**\n   * Custom height\n   * @example '2rem', '24px', '1.5em'\n   */\n  height?: string;\n  /**\n   * Whether icon is decorative (sets aria-hidden)\n   * @default true\n   */\n  decorative?: boolean;\n  /**\n   * Accessible label for meaningful icons\n   */\n  ariaLabel?: string;\n  /**\n   * ID of element that labels this icon\n   */\n  ariaLabelledby?: string;\n  /**\n   * Icon rotation in degrees\n   * @default 0\n   */\n  rotate?: number;\n  /**\n   * Whether the icon is a brand icon\n   */\n  brand?: boolean;\n}>();\n\n// Resolved at build time by the consuming bundler. For lib-mode publishes this\n// bakes to '/' (default Vite base), preserving the historical `/_design-system/icons`\n// URL. For consumers that build from source with a non-root base (e.g. Storybook\n// deployed under a project subpath), the base is honored automatically.\nconst ICONS_BASE_URL = `${import.meta.env.BASE_URL}_design-system/icons`.replace(\n  /\\/{2,}/g,\n  '/',\n);\n\nconst svgStyle = computed(() => ({\n  width: width || `${BIconSizeMap[size]}rem`,\n  height: height || `${BIconSizeMap[size]}rem`,\n  transform: `rotate(${rotate}deg)`,\n  fill: ['currentColor', ...Object.values(BCommonColor)].includes(color) ? undefined : color,\n}));\n\nconst iconFolder = computed(() => (brand ? 'brands' : variant));\n\n/**\n * Map of `<variant>/<icon-name>` → raw SVG markup.\n *\n * In the published library this object literal is an inert sentinel — the\n * `__BICON_STATIC_ICONS_PLACEHOLDER__` key is never read at runtime. When the\n * `@7pmlabs/design-system/vite` plugin is in the consumer's pipeline, its\n * `transform` hook replaces this exact literal in the bundled BIcon module\n * with the AST-scanned set of statically-used icons, so they render in the\n * first frame without a network roundtrip.\n *\n * Consumers without the plugin keep the inert object and fall back to the\n * runtime fetch below — the build succeeds either way.\n */\nconst STATIC_ICONS: Readonly<Record<string, string>> = Object.freeze({\n  __BICON_STATIC_ICONS_PLACEHOLDER__: '',\n});\n\nconst svgMarkup = ref<string>('');\n\nconst loadIcon = async () => {\n  const key = `${iconFolder.value}/${icon}`;\n  const inlined = STATIC_ICONS[key];\n  if (inlined !== undefined) {\n    svgMarkup.value = inlined;\n    return;\n  }\n  svgMarkup.value = '';\n  const url = `${ICONS_BASE_URL}/${key}.svg`;\n  try {\n    const res = await fetch(url);\n    if (!res.ok) {\n      console.warn(`[BIcon] Could not load icon '${icon}' from '${url}' (HTTP ${res.status})`);\n      return;\n    }\n    svgMarkup.value = await res.text();\n  } catch {\n    console.warn(`[BIcon] Could not load icon '${icon}' from '${url}'`);\n  }\n};\n\nwatch(() => [icon, iconFolder.value], loadIcon, { immediate: true });\n</script>\n\n<template>\n  <!-- v-html renders the raw SVG markup inline so fill/color CSS works normally -->\n  <span\n    class=\"b-icon\"\n    :class=\"[\n      {\n        'b:fill-current': color === 'currentColor',\n        'b:fill-primary': color === 'primary',\n        'b:fill-secondary': color === 'secondary',\n        'b:fill-success': color === 'success',\n        'b:fill-failure': color === 'failure',\n        'b:fill-warning': color === 'warning',\n        'b:fill-info': color === 'info',\n        'b-icon--color': !!svgStyle.fill,\n      },\n    ]\"\n    :aria-hidden=\"!!decorative || undefined\"\n    :aria-label=\"ariaLabel\"\n    :aria-labelledby=\"ariaLabelledby\"\n    v-html=\"svgMarkup\"\n  />\n</template>\n\n<style scoped>\n.b-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: v-bind('svgStyle.width');\n  height: v-bind('svgStyle.height');\n  transform: v-bind('svgStyle.transform');\n}\n\n/* Size the inner <svg> element to fill the wrapper span */\n.b-icon :deep(svg) {\n  width: 100%;\n  height: 100%;\n}\n\n.b-icon--color :deep(svg) {\n  fill: v-bind('svgStyle.fill');\n}\n</style>\n"],"mappings":""}

package/dist/types/components/BIcon/BIcon.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,39 @@
+import type { Plugin } from 'vite';
+export interface DesignSystemPluginOptions {
+    /**
+     * Source directory for SVG icons.
+     * Defaults to `<dir-of-@7pmlabs/design-system>/dist/assets/icons`,
+     * resolved from the consumer's `node_modules`.
+     */
+    iconsDir?: string;
+    /**
+     * URL prefix at which icons are served (runtime fallback).
+     * Must match `BIcon`'s hardcoded path. Default: `/_design-system/icons`.
+     */
+    iconsRoute?: string;
+    /**
+     * Whether to copy the icon directory into `outDir` during build (runtime fallback).
+     * Set to `false` when running inside the design system's own dev/storybook —
+     * we don't want to pollute the published `dist/`.
+     * Default: `true`.
+     */
+    emit?: boolean;
+    /**
+     * Project-relative roots (or absolute paths) to scan for static `<BIcon>`
+     * usage. Default: `['src']`.
+     */
+    include?: string[];
+    /**
+     * Variant assumed when `<BIcon icon="..." />` has no explicit `variant` prop.
+     * Must match `BIconVariant.Regular` in the lib. Default: `'regular'`.
+     */
+    defaultVariant?: string;
+    /**
+     * Keep the runtime fetch fallback (dev middleware + build-time copy) for
+     * icons that can't be statically resolved (dynamic `:icon` bindings, etc.).
+     * Default: `true`.
+     */
+    runtimeFallback?: boolean;
+}
+export declare function designSystem(options?: DesignSystemPluginOptions): Plugin;
+export default designSystem;

package/dist/vite/index.js

@@ -0,0 +1,338 @@
+import { createReadStream } from 'node:fs';
+import { copyFile, mkdir, readdir, readFile, stat } from 'node:fs/promises';
+import { createRequire } from 'node:module';
+import { dirname, extname, join, resolve } from 'node:path';
+const DEFAULT_ROUTE = '/_design-system/icons';
+// Sentinel literal shipped in the published BIcon module. The plugin's
+// transform finds this exact pattern and replaces it with a populated map of
+// statically-used icons. Consumers without this plugin keep the inert literal
+// and fall back to the runtime fetch path inside BIcon.
+const PLACEHOLDER_KEY = '__BICON_STATIC_ICONS_PLACEHOLDER__';
+const PLACEHOLDER_RE = new RegExp(`Object\\.freeze\\(\\s*\\{\\s*(?:["']?)${PLACEHOLDER_KEY}\\1?\\s*:\\s*["']["']\\s*,?\\s*\\}\\s*\\)`);
+const SCAN_EXTS = new Set(['.vue', '.tsx', '.jsx', '.ts', '.js', '.mts', '.mjs']);
+const SKIP_DIRS = new Set([
+    'node_modules',
+    'dist',
+    '.nuxt',
+    '.output',
+    '.git',
+    '.cache',
+    '.vite',
+]);
+// Matches an opening BIcon tag (PascalCase or kebab-case). The capture is the
+// inner attribute string. `[^>]*?` is non-greedy and won't handle a `>` inside
+// an attribute value — acceptable, that's vanishingly rare.
+const TAG_RE = /<(?:BIcon|b-icon)\b([^>]*?)\/?>/g;
+function makeStaticAttrRe(name) {
+    // Negative lookbehind excludes `:icon=`, `v-bind:icon=`, `@icon=`, `data-icon=`, etc.
+    return new RegExp(`(?<![\\w:@.-])${name}\\s*=\\s*"([^"]*)"`);
+}
+function makeBooleanAttrRe(name) {
+    return new RegExp(`(?<![\\w:@.-])${name}(?=[\\s/>])`);
+}
+function makeDynamicAttrRe(name) {
+    return new RegExp(`(?:^|\\s)(?::|v-bind:)${name}\\s*=`);
+}
+function getStaticAttr(attrs, name) {
+    const m = makeStaticAttrRe(name).exec(attrs);
+    return m ? m[1] : undefined;
+}
+function hasBooleanAttr(attrs, name) {
+    return makeBooleanAttrRe(name).test(attrs);
+}
+function hasDynamicAttr(attrs, name) {
+    if (makeDynamicAttrRe(name).test(attrs))
+        return true;
+    if (/(?:^|\s)v-bind\s*=/.test(attrs))
+        return true;
+    return false;
+}
+function scanCode(code, defaultVariant) {
+    const keys = new Set();
+    TAG_RE.lastIndex = 0;
+    let m;
+    while ((m = TAG_RE.exec(code)) !== null) {
+        const attrs = m[1] ?? '';
+        if (hasDynamicAttr(attrs, 'icon'))
+            continue;
+        const icon = getStaticAttr(attrs, 'icon');
+        if (!icon)
+            continue;
+        let variant;
+        if (hasBooleanAttr(attrs, 'brand') || getStaticAttr(attrs, 'brand') === 'true') {
+            variant = 'brands';
+        }
+        else if (hasDynamicAttr(attrs, 'brand') || hasDynamicAttr(attrs, 'variant')) {
+            continue;
+        }
+        else {
+            variant = getStaticAttr(attrs, 'variant') || defaultVariant;
+        }
+        keys.add(`${variant}/${icon}`);
+    }
+    return keys;
+}
+async function* walkDir(dir) {
+    let entries;
+    try {
+        entries = await readdir(dir, { withFileTypes: true });
+    }
+    catch {
+        return;
+    }
+    for (const entry of entries) {
+        if (entry.name.startsWith('.'))
+            continue;
+        if (SKIP_DIRS.has(entry.name))
+            continue;
+        const full = join(dir, entry.name);
+        if (entry.isDirectory()) {
+            yield* walkDir(full);
+        }
+        else if (entry.isFile() && SCAN_EXTS.has(extname(entry.name))) {
+            yield full;
+        }
+    }
+}
+function resolveDefaultIconsDir() {
+    const require = createRequire(import.meta.url);
+    const pkgPath = require.resolve('@7pmlabs/design-system/package.json');
+    return join(dirname(pkgPath), 'dist/assets/icons');
+}
+async function copyDir(src, dest) {
+    await mkdir(dest, { recursive: true });
+    const entries = await readdir(src, { withFileTypes: true });
+    await Promise.all(entries.map(async (entry) => {
+        const s = join(src, entry.name);
+        const d = join(dest, entry.name);
+        if (entry.isDirectory())
+            await copyDir(s, d);
+        else if (entry.isFile())
+            await copyFile(s, d);
+    }));
+}
+function normalizeRoute(route) {
+    let r = route.startsWith('/') ? route : `/${route}`;
+    if (r.endsWith('/'))
+        r = r.slice(0, -1);
+    return r;
+}
+function makeIconMiddleware(iconsDir) {
+    return async (req, res, next) => {
+        if (!req.url)
+            return next();
+        const relPath = decodeURIComponent(req.url.split('?')[0]);
+        const filePath = resolve(iconsDir, '.' + relPath);
+        if (!filePath.startsWith(iconsDir)) {
+            res.statusCode = 403;
+            res.end('Forbidden');
+            return;
+        }
+        try {
+            const st = await stat(filePath);
+            if (!st.isFile())
+                return next();
+            res.setHeader('Content-Type', 'image/svg+xml');
+            res.setHeader('Cache-Control', 'public, max-age=31536000, immutable');
+            createReadStream(filePath).pipe(res);
+        }
+        catch {
+            next();
+        }
+    };
+}
+export function designSystem(options = {}) {
+    const route = normalizeRoute(options.iconsRoute ?? DEFAULT_ROUTE);
+    const emit = options.emit !== false;
+    const defaultVariant = options.defaultVariant ?? 'regular';
+    const runtimeFallback = options.runtimeFallback !== false;
+    let resolvedIconsDir;
+    let viteConfig;
+    let server;
+    // Per-source-file scan results — lets us update incrementally on edits
+    // in dev (`handleHotUpdate`) without re-reading every file.
+    const fileKeys = new Map();
+    const allKeys = new Set();
+    // Cached SVG content keyed by `<variant>/<name>`. Lazily filled.
+    const svgCache = new Map();
+    // Modules that contain the placeholder literal — invalidated when the
+    // icon set changes so they get re-transformed with the new map.
+    const consumerModules = new Set();
+    function getIconsDir() {
+        if (resolvedIconsDir)
+            return resolvedIconsDir;
+        const dir = options.iconsDir ?? resolveDefaultIconsDir();
+        resolvedIconsDir = resolve(dir);
+        return resolvedIconsDir;
+    }
+    function recomputeAllKeys() {
+        allKeys.clear();
+        for (const set of fileKeys.values()) {
+            for (const k of set)
+                allKeys.add(k);
+        }
+    }
+    function updateFileKeys(file, keys) {
+        const prev = fileKeys.get(file);
+        const same = prev && prev.size === keys.size && [...keys].every((k) => prev.has(k));
+        if (same)
+            return false;
+        if (keys.size === 0)
+            fileKeys.delete(file);
+        else
+            fileKeys.set(file, keys);
+        recomputeAllKeys();
+        return true;
+    }
+    async function loadSvg(key) {
+        if (svgCache.has(key))
+            return svgCache.get(key);
+        const iconsDir = getIconsDir();
+        const filePath = resolve(iconsDir, key + '.svg');
+        if (!filePath.startsWith(iconsDir))
+            return undefined;
+        try {
+            const content = await readFile(filePath, 'utf-8');
+            svgCache.set(key, content);
+            return content;
+        }
+        catch {
+            return undefined;
+        }
+    }
+    async function buildStaticIconsLiteral() {
+        const sortedKeys = [...allKeys].sort();
+        const entries = [];
+        for (const key of sortedKeys) {
+            const svg = await loadSvg(key);
+            if (svg === undefined)
+                continue;
+            entries.push(`${JSON.stringify(key)}:${JSON.stringify(svg)}`);
+        }
+        return `Object.freeze({${entries.join(',')}})`;
+    }
+    function invalidateConsumerModules() {
+        if (!server)
+            return;
+        for (const id of consumerModules) {
+            const mod = server.moduleGraph.getModuleById(id);
+            if (!mod)
+                continue;
+            server.moduleGraph.invalidateModule(mod);
+            void server.reloadModule(mod).catch(() => {
+                /* swallow — happens during teardown */
+            });
+        }
+    }
+    return {
+        name: '@7pmlabs/design-system',
+        configResolved(config) {
+            viteConfig = config;
+        },
+        async buildStart() {
+            if (!viteConfig)
+                return;
+            // Library builds publish the inert sentinel — no need to scan.
+            if (viteConfig.build.lib)
+                return;
+            const root = viteConfig.root;
+            const includes = options.include ?? ['src'];
+            fileKeys.clear();
+            consumerModules.clear();
+            for (const inc of includes) {
+                const dir = resolve(root, inc);
+                try {
+                    const st = await stat(dir);
+                    if (!st.isDirectory())
+                        continue;
+                }
+                catch {
+                    continue;
+                }
+                for await (const file of walkDir(dir)) {
+                    try {
+                        const code = await readFile(file, 'utf-8');
+                        const keys = scanCode(code, defaultVariant);
+                        if (keys.size > 0)
+                            fileKeys.set(file, keys);
+                    }
+                    catch {
+                        /* ignore unreadable */
+                    }
+                }
+            }
+            recomputeAllKeys();
+        },
+        async transform(code, id) {
+            // Skip when this plugin is running inside a library build (the lib's
+            // own dev/build pipeline). We must NOT bake icons into the published
+            // BIcon module — consumers' copies of this plugin would then find the
+            // sentinel already replaced and silently fail to inline their own
+            // statically-used icons. The lib publishes with the inert literal
+            // intact; storybook/dev just pay the runtime-fetch tax during preview.
+            if (viteConfig?.build.lib)
+                return null;
+            // Inject the populated map into any module that carries the sentinel.
+            // In practice that's exactly the published BIcon module from the lib,
+            // but we don't hard-code its path — any module the lib ships in the
+            // future with the same sentinel will be patched the same way.
+            if (!code.includes(PLACEHOLDER_KEY))
+                return null;
+            consumerModules.add(id);
+            const replacement = await buildStaticIconsLiteral();
+            const next = code.replace(PLACEHOLDER_RE, replacement);
+            if (next === code)
+                return null;
+            return { code: next, map: null };
+        },
+        // Dev-only: when a consumer source file changes, re-scan it from disk
+        // (NOT from a `transform`-time `code` param — vite-plugin-vue would have
+        // compiled the template away by then) and invalidate the BIcon module
+        // so its sentinel is replaced with the updated map.
+        async handleHotUpdate({ file }) {
+            const cleanId = file.split('?')[0];
+            if (!SCAN_EXTS.has(extname(cleanId)))
+                return;
+            const norm = cleanId.replace(/\\/g, '/');
+            if (norm.includes('/node_modules/') ||
+                norm.includes('/.nuxt/') ||
+                norm.includes('/.output/')) {
+                return;
+            }
+            let code;
+            try {
+                code = await readFile(cleanId, 'utf-8');
+            }
+            catch {
+                return;
+            }
+            const keys = scanCode(code, defaultVariant);
+            if (updateFileKeys(cleanId, keys))
+                invalidateConsumerModules();
+        },
+        configureServer(s) {
+            server = s;
+            if (!runtimeFallback)
+                return;
+            const handler = makeIconMiddleware(getIconsDir());
+            s.middlewares.use(route, handler);
+        },
+        configurePreviewServer(s) {
+            if (!runtimeFallback)
+                return;
+            const handler = makeIconMiddleware(getIconsDir());
+            s.middlewares.use(route, handler);
+        },
+        async closeBundle() {
+            if (!emit || !runtimeFallback)
+                return;
+            if (!viteConfig || viteConfig.command !== 'build')
+                return;
+            const iconsDir = getIconsDir();
+            const outDir = resolve(viteConfig.root, viteConfig.build.outDir);
+            const dest = join(outDir, route);
+            await copyDir(iconsDir, dest);
+        },
+    };
+}
+export default designSystem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@7pmlabs/design-system",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "type": "module",
   "homepage": "https://github.com/ngphanducthinh/design-system",
   "repository": {
@@ -13,7 +13,8 @@
   "scripts": {
     "dev": "vite",
     "build": "run-s lint-all build:lib",
-    "build:lib": "vite build && npm run build:types",
+    "build:lib": "vite build && npm run build:vite-plugin && npm run build:types",
+    "build:vite-plugin": "tsc -p tsconfig.vite-plugin.json",
     "build:types": "vue-tsc --project tsconfig.types.json --declaration --emitDeclarationOnly --outDir dist/types",
     "lint-all": "run-p lint type-check",
     "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
@@ -103,10 +104,15 @@
       "import": "./dist/design-system.js",
       "types": "./dist/types/index.d.ts"
     },
+    "./vite": {
+      "import": "./dist/vite/index.js",
+      "types": "./dist/types/vite/index.d.ts"
+    },
     "./style.css": {
       "import": "./dist/design-system.css",
       "require": "./dist/design-system.css"
-    }
+    },
+    "./package.json": "./package.json"
   },
   "sideEffects": [
     "dist/design-system.css",