@300codes/design-system 1.2.5 → 1.2.7

package/README.md

@@ -138,12 +138,29 @@ cp -r node_modules/@300codes/design-system/public/icons public/
 
 Available sizes: `2xs` · `xs` · `sm` · `md` · `lg` · `xl` · `2xl` · `3xl` · `auto`
 
-By default icons are loaded from `/icons/{name}.svg`. If your icons live elsewhere, pass a custom `basePath` prop:
+By default icons are loaded from `/icons/{name}.svg`. If your icons live elsewhere, pass a custom `iconPath` prop:
 
 ```vue
-<BaseIcon name="star" base-path="/assets/icons" size="md" />
+<BaseIcon name="star" icon-path="/assets/icons" size="md" />
 ```
 
+### SSR — server-side base directory
+
+During SSR, `BaseIcon` reads SVG files directly from the filesystem. It looks in `public/` in dev and `_client/` in production builds (Astro default). If your framework uses a different output directory, set `DS_PUBLIC_PATH`:
+
+```bash
+# Nuxt (files end up in .output/public/)
+DS_PUBLIC_PATH=.output/public nuxt build
+
+# Astro (default — _client/ is already the built-in default, no override needed)
+# DS_PUBLIC_PATH=_client
+
+# Custom deployment
+DS_PUBLIC_PATH=dist/static astro build
+```
+
+The variable is resolved by Vite at build time via `import.meta.env.DS_PUBLIC_PATH`.
+
 ---
 
 ## Storybook

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@300codes/design-system",
-  "version": "1.2.5",
+  "version": "1.2.7",
   "type": "module",
   "files": [
     "src/components",

package/src/components/BaseIcon/BaseIcon.vue

@@ -15,11 +15,11 @@ const props = withDefaults(defineProps<BaseIconProps>(), {
 
 const sizeClasses: Record<IconSize, string> = {
   '2xs': 'w-3 min-w-3 h-3',
-  'xs':  'w-4 min-w-4 h-4',
-  'sm':  'w-5 min-w-5 h-5',
-  'md':  'w-6 min-w-6 h-6',
-  'lg':  'w-8 min-w-8 h-8',
-  'xl':  'w-10 min-w-10 h-10',
+  'xs': 'w-4 min-w-4 h-4',
+  'sm': 'w-5 min-w-5 h-5',
+  'md': 'w-6 min-w-6 h-6',
+  'lg': 'w-8 min-w-8 h-8',
+  'xl': 'w-10 min-w-10 h-10',
   '2xl': 'w-12 min-w-12 h-12',
   '3xl': 'w-16 min-w-16 h-16',
   'auto': '',
@@ -30,7 +30,11 @@ const iconClasses = computed(() => sizeClasses[props.size]);
 const svgHtml = ref('');
 const spanRef = ref<HTMLElement | null>(null);
 const isServer = typeof window === 'undefined';
-const notFound = '<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256"><path d="M48,48V208H80a8,8,0,0,1,0,16H40a8,8,0,0,1-8-8V40a8,8,0,0,1,8-8H80a8,8,0,0,1,0,16ZM216,32H176a8,8,0,0,0,0,16h32V208H176a8,8,0,0,0,0,16h40a8,8,0,0,0,8-8V40A8,8,0,0,0,216,32Z"></path></svg>';
+const notFound =
+  '<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256"><path d="M48,48V208H80a8,8,0,0,1,0,16H40a8,8,0,0,1-8-8V40a8,8,0,0,1,8-8H80a8,8,0,0,1,0,16ZM216,32H176a8,8,0,0,0,0,16h32V208H176a8,8,0,0,0,0,16h40a8,8,0,0,0,8-8V40A8,8,0,0,0,216,32Z"></path></svg>';
+
+// DS_PUBLIC_PATH overrides the server-side base directory (e.g. _client for Astro, .output/public for Nuxt).
+const serverBase = import.meta.env.PROD ? (import.meta.env.DS_PUBLIC_PATH || '_client') : 'public';
 
 async function getSvgContent(name: string): Promise<string> {
   const warnNotFound = () =>
@@ -41,7 +45,7 @@ async function getSvgContent(name: string): Promise<string> {
     const fs = await import('fs/promises');
 
     try {
-      const filePath = path.join(process.cwd(), 'public', props.iconPath, `${name}.svg`);
+      const filePath = path.join(process.cwd(), serverBase, props.iconPath, `${name}.svg`);
       return await fs.readFile(filePath, 'utf8');
     } catch {
       warnNotFound();
@@ -69,7 +73,7 @@ watch(
   () => props.name,
   async (newName) => {
     svgHtml.value = await getSvgContent(newName);
-  },
+  }
 );
 
 onMounted(async () => {

package/src/components/BaseTooltip/BaseTooltip.vue

@@ -69,6 +69,7 @@ const emit = defineEmits<{
   color: var(--baseTooltip-fg, #ffffff);
   border-radius: var(--baseTooltip-radius, 0.5rem);
   max-width: var(--baseTooltip-max-w, 12.25rem);
+  width: var(--baseTooltip-max-w, 12.25rem);
   padding: var(--baseTooltip-py, 0.75rem) var(--baseTooltip-px, 0.75rem);
   font-size: var(--baseTooltip-font-size, 0.75rem);
 }