spoko-design-system 0.9.1 → 0.9.3

package/.astro/data-store.json

@@ -1 +1 @@
-[["Map",1,2],"meta::meta",["Map",3,4,5,6],"astro-version","5.11.0","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"site\":\"https://sds.spoko.space/\",\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":1234,\"streaming\":true,\"allowedHosts\":[]},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[\"placehold.co\",\"api.polo.blue\",\"polo.blue\",\"media.istockphoto.com\",\"freepik.com\",\"img.freepik.com\",\"polo6r.pl\"],\"remotePatterns\":[],\"responsiveStyles\":false},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":{\"type\":\"shiki\",\"excludeLangs\":[\"math\"]},\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"headingIdCompat\":false,\"preserveScriptOrder\":false,\"liveContentCollections\":false,\"csp\":false},\"legacy\":{\"collections\":false}}"]
+[["Map",1,2],"meta::meta",["Map",3,4,5,6],"astro-version","5.13.2","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"site\":\"https://sds.spoko.space/\",\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":1234,\"streaming\":true,\"allowedHosts\":[]},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[\"placehold.co\",\"api.polo.blue\",\"polo.blue\",\"media.istockphoto.com\",\"freepik.com\",\"img.freepik.com\",\"polo6r.pl\"],\"remotePatterns\":[],\"responsiveStyles\":false},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":{\"type\":\"shiki\",\"excludeLangs\":[\"math\"]},\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"headingIdCompat\":false,\"preserveScriptOrder\":false,\"liveContentCollections\":false,\"csp\":false,\"staticImportMetaEnv\":false,\"chromeDevtoolsWorkspace\":false},\"legacy\":{\"collections\":false}}"]

package/.astro/settings.json

@@ -1,5 +1,5 @@
 {
 	"_variables": {
-		"lastUpdateCheck": 1751564292126
+		"lastUpdateCheck": 1757938917015
 	}
 }

package/.astro/types.d.ts

@@ -1,2 +1 @@
 /// <reference types="astro/client" />
-/// <reference path="content.d.ts" />

package/.claude/settings.local.json

@@ -0,0 +1,12 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(git remote get-url:*)",
+      "Bash(npm run dev:*)",
+      "Bash(tasklist)",
+      "Bash(findstr:*)"
+    ],
+    "deny": [],
+    "ask": []
+  }
+}

package/README.md

@@ -1,5 +1,7 @@
 # Spoko Design System
 
+![Version](https://img.shields.io/github/package-json/v/polo-blue/sds)
+
 SDS is the easiest way to start websites with simple design system. Since Astro is compatible with many frameworks, you can import your components and document them right in the markdown files.
 The project is still in the development phase, use at your own risk ;-)
 #

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "0.9.1",
+  "version": "0.9.3",
   "private": false,
   "main": "./index.ts",
   "module": "./index.ts",
@@ -110,7 +110,7 @@
     "unocss": "^0.65.0",
     "vite": "^7.1.3"
   },
-  "packageManager": "pnpm@9.15.3",
+  "packageManager": "pnpm@10.16.1",
   "pnpm": {
     "default": "9.15.3",
     "overrides": {

package/public/locales/en/translation.json

@@ -5,5 +5,9 @@
     "sw-position":"Steering wheel position"
   },
   "copied": "Copied",
-  "copy": "Copy product code"
+  "copy": "Copy product code",
+  "date": {
+    "published": "Published",
+    "updated": "Updated"
+  }
 }

package/public/locales/pl/translation.json

@@ -2,8 +2,12 @@
     "part": {
         "for-lhd": "Do pojazdów LHD (z kierownicą z lewej strony)",
         "for-rhd": "Do pojazdów RHD (z kierownicą z prawej strony)",
-        "sw-position":"Pozycja kierownicy",
+        "sw-position":"Pozycja kierownicy"
     },
     "copied": "Skopiowano",
-    "copy": "Skopiuj numer produktu"
+    "copy": "Skopiuj numer produktu",
+    "date": {
+        "published": "Opublikowano",
+        "updated": "Zaktualizowano"
+    }
 }

package/src/pages/index.astro

@@ -103,21 +103,21 @@ const navItems = [
 
      <div>
       <Headline underline as="div" class="mx-auto text-gray-900" textSize="3xl">Examples:</Headline>
-      <ul class="grid text-2xl pt-6 lg:(auto-cols-max grid-flow-col py-6) text-left">
-        <li class="leading-5 me-6 mb-4 lg:mb-0">
-          <a href="https://catalog.polo.blue" class="example-link" target="_blank"> catalog.polo.blue</a>
+      <ul class="flex flex-wrap text-2xl pt-6 lg:(py-4 gap-4) text-left justify-center lg:justify-start w-full">
+        <li class="leading-5 me-6 mb-4 lg:mb-0 flex-shrink-0">
+          <a href="https://catalog.polo.blue" class="example-link whitespace-nowrap" target="_blank"> catalog.polo.blue</a>
         </li>
-        <li class="leading-5 me-6 mb-4 lg:mb-0">
-          <a href="https://polo.blue" class="example-link" target="_blank"> polo.blue</a>
+        <li class="leading-5 me-6 mb-4 lg:mb-0 flex-shrink-0">
+          <a href="https://polo.blue" class="example-link whitespace-nowrap" target="_blank"> polo.blue</a>
         </li>
-        <li class="leading-5 me-6 mb-4 lg:mb-0">
-          <a href="https://spoko.space" class="example-link" target="_blank"> spoko.space</a>
+        <li class="leading-5 me-6 mb-4 lg:mb-0 flex-shrink-0">
+          <a href="https://spoko.space" class="example-link whitespace-nowrap" target="_blank"> spoko.space</a>
         </li>
-        <li class="leading-5 me-6 mb-4 lg:mb-0">
-          <a href="https://sale.polo.blue/" class="example-link" target="_blank">sale.polo.blue</a>
+        <li class="leading-5 me-6 mb-4 lg:mb-0 flex-shrink-0">
+          <a href="https://sale.polo.blue/" class="example-link whitespace-nowrap" target="_blank">sale.polo.blue</a>
         </li>
-        <li class="leading-5 me-6 mb-4 lg:mb-0">
-          <a href="https://polo6r.pl" class="example-link" target="_blank">polo6r.pl</a>
+        <li class="leading-5 me-6 mb-4 lg:mb-0 flex-shrink-0">
+          <a href="https://polo6r.pl" class="example-link whitespace-nowrap" target="_blank">polo6r.pl</a>
         </li>
       </ul>
      </div>

package/uno-config/index.ts

@@ -19,6 +19,32 @@ import presetWebFonts from '@unocss/preset-web-fonts';    // Web fonts preset
 import { shortcuts } from './theme/shortcuts';
 import { theme } from './theme';
 
+// Static imports for all icon collections (prevents Vite module runner issues)
+import antDesignIcons from '@iconify-json/ant-design/icons.json';
+import biIcons from '@iconify-json/bi/icons.json';
+import bxIcons from '@iconify-json/bx/icons.json';
+import carbonIcons from '@iconify-json/carbon/icons.json';
+import circleFlagsIcons from '@iconify-json/circle-flags/icons.json';
+import eiIcons from '@iconify-json/ei/icons.json';
+import elIcons from '@iconify-json/el/icons.json';
+import eosIcons from '@iconify-json/eos-icons/icons.json';
+import etIcons from '@iconify-json/et/icons.json';
+import flowbiteIcons from '@iconify-json/flowbite/icons.json';
+import fluentIcons from '@iconify-json/fluent/icons.json';
+import fluentEmojiIcons from '@iconify-json/fluent-emoji/icons.json';
+import icIcons from '@iconify-json/ic/icons.json';
+import iconParkOutlineIcons from '@iconify-json/icon-park-outline/icons.json';
+import laIcons from '@iconify-json/la/icons.json';
+import lucideIcons from '@iconify-json/lucide/icons.json';
+import materialSymbolsLightIcons from '@iconify-json/material-symbols-light/icons.json';
+import mdiIcons from '@iconify-json/mdi/icons.json';
+import notoV1Icons from '@iconify-json/noto-v1/icons.json';
+import octiconIcons from '@iconify-json/octicon/icons.json';
+import phIcons from '@iconify-json/ph/icons.json';
+import simpleIcons from '@iconify-json/simple-icons/icons.json';
+import systemUiconsIcons from '@iconify-json/system-uicons/icons.json';
+import uilIcons from '@iconify-json/uil/icons.json';
+
 // List of peer selectors we want to preserve during build
 const peerSelectorClasses = [
   // Focus state classes
@@ -56,6 +82,12 @@ interface CustomConfig extends Partial<UserConfig> {
  */
 export function createSdsConfig(customConfig: CustomConfig = {}) {
   return defineConfig({
+    // Optimizations for static builds
+    ...(process.env.NODE_ENV === 'production' && {
+      inspector: false,
+      hmr: false,
+    }),
+
     // Transform directives and variant groups
     transformers: [
       transformerDirectives(),
@@ -101,134 +133,71 @@ export function createSdsConfig(customConfig: CustomConfig = {}) {
         };
       },
     ],
-    // Comprehensive safelist with all needed classes
+    // Optimized safelist for static Astro builds
     safelist: [
-      // Existing safelist items
+      // Layout and grid classes that might be used dynamically
       'md:grid-cols-product',
 
+      // Component-specific classes for static generation
       'breadcrumb-link-disabled',
       'breadcrumb-link',
       'breadcrumb-item',
       'features-list-caption',
       'features-list-ul',
       'features-list-item',
-
       'category-link-base',
       'category-link-active',
-      
-      // Base peer class
+
+      // Essential peer and input classes
       'peer',
-      
-      // All input component classes from shortcuts
-      'input-base',
-      'input-label-base',
-      'input-placeholder',
-      'input-standard',
-      'input-filled',
-      'input-wrapper-standard',
-      'input-wrapper-filled',
-      'input-label-standard',
-      'input-label-filled',
-      
-      // Label state shortcuts
-      'input-label-focus-color',
-      'input-label-focus-scale',
-      'input-label-focus-translate-standard',
-      'input-label-focus-translate-filled',
-      'input-label-placeholder',
-      'input-label-filled-standard',
-      'input-label-filled-filled',
-      'input-label-standard-state',
-      'input-label-filled-state',
-      
-      // Input types
-      'input-textarea',
       'resize-none',
-      
-      // Size variants
-      'input-sm',
-      'input-md',
-      'input-lg',
-      'input-label-sm',
-      'input-label-md',
-      'input-label-lg',
-      
-      // Status classes
-      'input-error',
-      'input-label-error',
-      'input-error-message',
-      'input-success',
-      'input-label-success',
-      'input-success-message',
-      
-      // Transform related classes
       'origin-top-left',
       'transform-gpu',
-      'translate-y-0',
-      '-translate-y-4',
-      '-translate-y-6',
-      'scale-75',
-      'scale-100',
-      
-      // Every possible arbitrary selector used
-      '[&:focus~label]:scale-75',
-      '[&:focus~label]:-translate-y-4',
-      '[&:focus~label]:-translate-y-6',
-      '[&:focus~label]:text-blue-light',
-      '[&:focus~label]:dark:text-blue-lightest',
-      '[&:focus~label]:start-0',
-      '[&:placeholder-shown~label]:scale-100',
-      '[&:placeholder-shown~label]:translate-y-0',
-      '[&:not(:placeholder-shown)~label]:scale-75',
-      '[&:not(:placeholder-shown)~label]:-translate-y-4',
-      '[&:not(:placeholder-shown)~label]:-translate-y-6',
-      
-      // Combinations of selectors
-      'peer:focus:text-blue-light',
-      'peer:focus:dark:text-blue-lightest',
-      'peer:focus:scale-75',
-      'peer:focus:-translate-y-4',
-      'peer:focus:-translate-y-6',
-      'peer:focus:start-0',
-      'peer-placeholder-shown:scale-100',
-      'peer-placeholder-shown:translate-y-0',
-      'peer-not-placeholder-shown:scale-75',
-      'peer-not-placeholder-shown:-translate-y-4',
-      'peer-not-placeholder-shown:-translate-y-6',
-      
-      // With !important for good measure
-      '[&:focus~label]:!scale-75',
-      '[&:focus~label]:!-translate-y-4',
-      '[&:focus~label]:!-translate-y-6',
-      '[&:not(:placeholder-shown)~label]:!scale-75',
-      '[&:not(:placeholder-shown)~label]:!-translate-y-4',
-      '[&:not(:placeholder-shown)~label]:!-translate-y-6',
-      
-      // Direct css vars that might be used
-      '--un-scale-x',
-      '--un-scale-y',
-      '--un-translate-y',
-      
-      // All peer selectors from the list
+
+      // All peer selectors from the list (needed for floating labels)
       ...peerSelectorClasses,
     ],
-    // Custom extractors to ensure peer classes are preserved
+    // Optimized extractors for static Astro builds
     extractors: [
       {
-        name: 'vue-astro',
-        extract({ code }) {
+        name: 'astro-static',
+        extract({ code, id }) {
           const result = new Set();
-          
-          // Extract all peer selectors in the code
-          const peerRegex = /peer-([a-zA-Z0-9-]+:[a-zA-Z0-9-]+)/g;
+
+          // Enhanced class extraction for Astro components
+          const classRegex = /class(?:Name)?=["'`]([^"'`]+)["'`]/g;
+          let match;
+          while ((match = classRegex.exec(code)) !== null) {
+            match[1].split(/\s+/).forEach(cls => {
+              if (cls) result.add(cls);
+            });
+          }
+
+          // Extract peer selectors
+          const peerRegex = /peer-[a-zA-Z0-9-]+(?::[a-zA-Z0-9-]+)*/g;
           const peerMatches = code.match(peerRegex);
           if (peerMatches) {
             peerMatches.forEach(match => result.add(match));
           }
-          
-          // Add all known peer selectors
-          peerSelectorClasses.forEach(cls => result.add(cls));
-          
+
+          // Extract shortcut references
+          const shortcutRegex = /\b(?:input|button|layout|component|product|jumbotron)-[a-zA-Z0-9-]+/g;
+          const shortcutMatches = code.match(shortcutRegex);
+          if (shortcutMatches) {
+            shortcutMatches.forEach(match => result.add(match));
+          }
+
+          // For .astro files, extract from both template and script sections
+          if (id && id.endsWith('.astro')) {
+            // Extract from dynamic class bindings
+            const dynamicClassRegex = /class:\w+\s*=\s*["'`]([^"'`]+)["'`]/g;
+            while ((match = dynamicClassRegex.exec(code)) !== null) {
+              match[1].split(/\s+/).forEach(cls => {
+                if (cls) result.add(cls);
+              });
+            }
+          }
+
           return result;
         },
       },
@@ -245,6 +214,33 @@ export function createSdsConfig(customConfig: CustomConfig = {}) {
           'display': 'inline-block',
           'vertical-align': 'middle',
         },
+        collections: {
+          // All icon collections with static imports to prevent Vite module runner issues
+          'ant-design': antDesignIcons,
+          'bi': biIcons,
+          'bx': bxIcons,
+          'carbon': carbonIcons,
+          'circle-flags': circleFlagsIcons,
+          'ei': eiIcons,
+          'el': elIcons,
+          'eos-icons': eosIcons,
+          'et': etIcons,
+          'flowbite': flowbiteIcons,
+          'fluent': fluentIcons,
+          'fluent-emoji': fluentEmojiIcons,
+          'ic': icIcons,
+          'icon-park-outline': iconParkOutlineIcons,
+          'la': laIcons,
+          'lucide': lucideIcons,
+          'material-symbols-light': materialSymbolsLightIcons,
+          'mdi': mdiIcons,
+          'noto-v1': notoV1Icons,
+          'octicon': octiconIcons,
+          'ph': phIcons,
+          'simple-icons': simpleIcons,
+          'system-uicons': systemUiconsIcons,
+          'uil': uilIcons,
+        }
       }),
       presetTypography(),
       presetWebFonts({
@@ -252,6 +248,19 @@ export function createSdsConfig(customConfig: CustomConfig = {}) {
         fonts: theme.fontFamily
       })
     ],
+
+    // Additional optimizations for static Astro builds
+    preflights: [
+      {
+        getCSS: () => `
+          /* Optimized base styles for static builds */
+          *,*::before,*::after{box-sizing:border-box}
+          html{line-height:1.15;-webkit-text-size-adjust:100%}
+          body{margin:0;font-family:system-ui,sans-serif}
+        `
+      }
+    ],
+
     ...customConfig
   });
 }