ds-one 0.2.0-alpha.3 → 0.2.5-alpha.10

package/DS1/index.ts

@@ -1,50 +1,52 @@
-// DS one - Main entry point for all components
-// Export all components for easy importing
+/**
+ * DS one - Main entry point for all components
+ *
+ * This module initializes core utilities and exports all design system components
+ * organized by layer: 0-face (foundation), 2-core (components), 3-unit (composites), 4-page (layouts)
+ */
+
+// ============================================================================
+// Initialization (side-effect imports)
+// ============================================================================
 
 // Initialize device detection (will auto-detect and log on load)
-import "./0-face/2025-04-23-device";
+import "./0-face/device";
+
+// Initialize language utilities (will auto-load external translations if available)
+import "./0-face/i18n";
+
+// ============================================================================
+// 0-face: Foundation & Utilities
+// ============================================================================
+
+export * from "./0-face/device";
+export * from "./0-face/i18n";
+export * from "./0-face/preferences";
+export * from "./0-face/pricing";
+export * from "./0-face/theme";
 
-// Initialize CDN loader (will auto-load external translations if available)
-import "./utils/cdn-loader";
+// ============================================================================
+// 2-core: Core Components
+// ============================================================================
 
-// Core components
 export * from "./2-core/ds-button";
-export * from "./2-core/ds-text";
-export * from "./2-core/ds-icon";
-export * from "./2-core/ds-link";
 export * from "./2-core/ds-cycle";
+export * from "./2-core/ds-icon";
+export * from "./2-core/ds-text";
 export * from "./2-core/ds-tooltip";
-export * from "./2-core/ds-price";
-export * from "./2-core/ds-markdown";
-export * from "./2-core/ds-home";
-export * from "./2-core/ds-year";
-export * from "./2-core/ds-title";
-export * from "./2-core/ds-header";
-export * from "./2-core/ds-attributes";
-export * from "./2-core/ds-downloadcv";
-export * from "./2-core/ds-article";
-export * from "./2-core/ds-viewtoggle";
-export * from "./2-core/ds-squarecircle";
-
-// Unit components
+export * from "./2-core/ds-date";
+
+// ============================================================================
+// 3-unit: Composite Components
+// ============================================================================
+
 export * from "./3-unit/ds-list";
-export * from "./3-unit/ds-panel";
 export * from "./3-unit/ds-row";
-export * from "./3-unit/ds-singlenav";
-export * from "./3-unit/ds-doublenav";
 export * from "./3-unit/ds-table";
 
-// Page components
+// ============================================================================
+// 4-page: Layout Components
+// ============================================================================
+
 export * from "./4-page/ds-grid";
 export * from "./4-page/ds-layout";
-
-// Utilities
-export * from "./utils/language";
-export * from "./utils/theme";
-export * from "./utils/viewMode";
-export * from "./utils/settings";
-export * from "./utils/pricing";
-export * from "./utils/scroll";
-
-// Device detection
-export * from "./0-face/2025-04-23-device";

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025 Jo4712
+Copyright (c) 2025 0001
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,19 +1,12 @@
-# DS one
+# DS one (0.2.5-alpha.10)
 
-Build modern UIs with web components!
+A plug and play design system
 
-> A component-based design system built with TypeScript and LitElement that provides reusable UI components with built-in theming, internationalization, and accessibility features.
+> A component-based design system built with Lit that provides reusable UI components with built-in theming, internationalization, and accessibility features.
 
-[![npm version](https://img.shields.io/npm/v/ds-one/alpha.svg)](https://www.npmjs.com/package/ds-one)
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+**DS one** is a comprehensive modern design system that provides a set of reusable UI components built with Web Components via Lit. Available via CDN or npm.
 
-**DS one** is a modern design system that provides a comprehensive set of reusable UI components built with Web Components. Think "Material Design meets Web Standards"—a simple, accessible component library that works with any framework or vanilla JavaScript.
-
-**📦 Now available on NPM!** Install with `bun add ds-one@alpha` and start building today.
-
-## 🚀 Quick Start
-
-### Install
+## Installation
 
 ```bash
 # Using bun (recommended)
@@ -24,171 +17,92 @@ npm install ds-one@alpha
 
 # Using yarn
 yarn add ds-one@alpha
+
 ```
 
-**Note**: Currently published as alpha version `0.2.0-alpha.3`. Use `@alpha` tag to install.
+**Note**: Currently published as alpha version `0.2.5-alpha.10`
+
+## Quick Start
 
-### Basic Usage (CDN)
+### CDN Usage
 
 ```html
 <!DOCTYPE html>
 <html>
   <head>
-    <!-- Load DS one CSS -->
+    <!-- CSS -->
     <link
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/ds-one@alpha/DS1/1-root/one.css"
     />
-    <!-- Load DS one components -->
+    <!-- Bundle -->
     <script type="module">
       import "https://cdn.jsdelivr.net/npm/ds-one@alpha/dist/ds-one.bundle.min.js";
     </script>
   </head>
   <body>
-    <ds-button variant="primary">Get Started</ds-button>
-    <ds-text key="welcome">Welcome to DS one</ds-text>
+    <ds-button variant="primary" key="getStarted"></ds-button>
+    <ds-text key="welcome"></ds-text>
   </body>
 </html>
 ```
 
-### Online demo
+### NPM Usage
 
-Try DS one in your browser: **[dsone.dev](https://dsone.dev)** (documentation slugs to be decided)
+```tsx
+import "ds-one/styles";
+import "ds-one";
+```
 
-## ✨ Features
+## Documentation
 
-### Core Components
+See the full documentation for DS one at: [**dsone.dev**](https://dsone.dev/)
 
-- **Web Components**: Built with LitElement for maximum compatibility
-- **TypeScript support**: Full type definitions and IntelliSense
-- **Accessibility**: ARIA support and keyboard navigation built-in
-- **Responsive design**: Mobile-first with scaling factors
-- **Theme system**: CSS custom properties for easy customization
+## Features
 
 ### Internationalization
 
-- **Language keys**: All text via camelCase keys for full i18n
-- **Notion CMS integration**: Dynamic content management
-- **Fallback support**: Graceful degradation when translations missing
-- **Multi-language**: Built-in language switching
-
-### Developer Experience
-
-- **Zero dependencies**: Pure Web Components, no framework required
-- **Fast loading**: Optimized bundle size and tree-shaking
-- **Hot reload**: Live updates in development
-- **Comprehensive testing**: Full test coverage
+- **Language keys**: Add a `translations.json` to your project and everything is translatable with the cycle type language button
+- **Multi-language**: Automatically switches language based on browser language settings
 
-## Documentation
-
-- **[Component Reference](./docs/components.md)** - Complete component API documentation
-- **[Theming Guide](./docs/theming.md)** - Customization and accent colors
-- **[Internationalization](./docs/i18n.md)** - Language keys and Notion CMS setup
-- **[Examples](./docs/examples.md)** - Usage examples and patterns
-
-## Current Status: v0.2.0-alpha.3
+### Core Components
 
-**⚠️ Alpha Release**: This is an early alpha version. The API may change as we refine the components and architecture.
+- **Web Components**: Built with Lit for maximum compatibility
+- **Responsive design**: Mobile-first approach with scaling factor
+- **Theme system**: CSS custom properties for easy customization
 
 ### Completed Features
 
 - ✅ Core component library (ds-button, ds-text, ds-icon, etc.)
-- ✅ Theming system with accent color support
+- ✅ Theming system with accent colors
 - ✅ Internationalization with language keys
 - ✅ Responsive design with mobile scaling
-- ✅ TypeScript definitions and type safety
-- ✅ Accessibility features and ARIA support
 - ✅ CDN delivery via jsDelivr
 - ✅ NPM package published
 
 ### In Progress
 
-- 🚧 Component naming standardization (ds-\* prefix)
-- 🚧 Enhanced theming documentation
-- 🚧 Component testing suite
-- 🚧 Documentation site refinement
-- 🚧 Additional component variants and states
-
-### Planned for Beta
-
-- 📋 Stable API and naming conventions
-- 📋 Comprehensive documentation with examples
-- 📋 Form components (input, select, checkbox, etc.)
-- 📋 Navigation components
-- 📋 Animation system
-- 📋 Design tokens documentation
+- 🚧 Documentation site
+- 🚧 Additional component variants and states defined in Figma
 
 ## Architecture
 
 ```
 DS one/
+├── dist/             # Built files for NPM
 ├── DS1/
-│   ├── 0-face/       # Device and language detection
+│   ├── 0-face/       # Utilities for device detection, internationalization,
+│   │                 # localStorage preferences, pricing and theme
 │   ├── 1-root/       # Core styles, fonts, and design tokens
-│   ├── 2-core/       # Core components (buttons, text, etc.)
-│   ├── 3-unit/       # Composite components
-│   ├── 4-page/       # Page-level components
-│   ├── x-utils/      # Shared utilities (language, theme, etc.)
+│   │                 # (everything as CSS variables)
+│   ├── 2-core/       # Core components (banner, buttons, text, cycle,
+│   │                 # date, icon, input, tooltip)
+│   ├── 3-unit/       # Composite components (list, row, table)
+│   ├── 4-page/       # Page-level components for layout (layout, grid)
 │   └── x-icon/       # SVG icon library
-├── dist/             # Built files for NPM
 ├── examples/         # HTML examples
 └── docs/             # Documentation
-```
 
-## Roadmap
-
-### v0.2.0-beta (Target: Q2 2025)
-
-- [ ] Finalize component naming (ds-\* prefix for all components)
-- [ ] Complete core component set
-- [ ] Enhanced theming system
-- [ ] Component testing suite
-- [ ] Comprehensive documentation
-
-### v0.5.0 (Target: Q3 2025)
-
-- [ ] Advanced components (forms, navigation, data display)
-- [ ] Animation system
-- [ ] Design tokens
-- [ ] Figma integration
-
-### v1.0.0 (Production - Target: Q4 2025)
-
-- [ ] Complete feature set
-- [ ] Production-ready tooling
-- [ ] Long-term API stability
-- [ ] Performance optimizations
-
-### Development Setup
-
-```bash
-# Clone the repository
-git clone https://github.com/0001-labs/ds-one.git
-cd ds-one
-
-# Install dependencies
-bun install
-
-# Run tests
-bun test
-
-# Start development server
-bun run dev
-
-# Build components
-bun run build
-```
-
-### Release Process
-
-```bash
-# Create a new alpha release (recommended for now)
-bun run release:pre:alpha  # Bumps alpha version (e.g., 0.2.0-alpha.3 → 0.2.0-alpha.3)
-
-# Other release commands (for future use)
-bun run release:patch      # For patch releases
-bun run release:minor      # For minor releases
-bun run release:major      # For major releases
 ```
 
 ## License
@@ -197,11 +111,7 @@ MIT © [DS one](https://github.com/0001-labs/ds-one)
 
 ## 🔗 Links
 
-- **[Website](https://dsone.dev)** - Official website (slugs to be decided)
-- **[GitHub](https://github.com/0001-labs/ds-one)** - Source code and issues
-- **[NPM Package](https://www.npmjs.com/package/ds-one)** - Install with `@alpha` tag
-- **[CDN](https://cdn.jsdelivr.net/npm/ds-one@alpha/)** - Direct browser usage
-
----
-
-**DS one** - _Build modern UIs with web components that work everywhere._
+- [**Website**](https://dsone.dev/) - Official website
+- [**GitHub**](https://github.com/0001-labs/ds-one) - Source code and issues
+- [**NPM Package**](https://www.npmjs.com/package/ds-one) - Install with `@alpha` tag
+- [**CDN**](https://cdn.jsdelivr.net/npm/ds-one@alpha/) - Direct browser usage

package/dist/0-face/{2025-04-23-device.d.ts → device.d.ts}

@@ -22,4 +22,4 @@ export declare function getDeviceInfo(): DeviceInfo;
  * Initialize device detection and log to console
  */
 export declare function initDeviceDetection(): DeviceInfo;
-//# sourceMappingURL=2025-04-23-device.d.ts.map
+//# sourceMappingURL=device.d.ts.map

package/dist/0-face/device.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"device.d.ts","sourceRoot":"","sources":["../../DS1/0-face/device.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEzD,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,EAAE,OAAO,CAAC;IACxB,UAAU,EAAE,UAAU,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,IAAI,OAAO,CA0B5C;AAED;;GAEG;AACH,wBAAgB,aAAa,IAAI,UAAU,CA6B1C;AAED;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,UAAU,CAkDhD"}

package/dist/0-face/{2025-04-23-device.js → device.js}

@@ -61,14 +61,18 @@ export function initDeviceDetection() {
         const designWidth = 280;
         const actualWidth = deviceInfo.screenWidth;
         const scalingFactor = actualWidth / designWidth;
-        // Set CSS custom property for scaling
-        document.documentElement.style.setProperty("--scaling-factor-mobile", scalingFactor.toFixed(3));
+        // Set CSS custom property for scaling on html element
+        document.documentElement.style.setProperty("--sf", scalingFactor.toFixed(3));
+        // Also set --sf for backwards compatibility
+        document.documentElement.style.setProperty("--sf", scalingFactor.toFixed(3));
         console.log(`[DS one] Mobile device detected - ${deviceInfo.deviceType} (${deviceInfo.screenWidth}x${deviceInfo.screenHeight}), scaling factor: ${scalingFactor.toFixed(2)}`);
     }
     else {
         // Desktop - no scaling
         if (typeof document !== "undefined") {
-            document.documentElement.style.setProperty("--scaling-factor-mobile", "1");
+            document.documentElement.style.setProperty("--sf", "1");
+            // Also set --sf for backwards compatibility
+            document.documentElement.style.setProperty("--sf", "1");
         }
         console.log(`[DS one] Desktop device detected (${deviceInfo.screenWidth}x${deviceInfo.screenHeight})`);
     }

package/dist/{utils/language.d.ts → 0-face/i18n.d.ts}

@@ -19,11 +19,9 @@ export declare const currentLanguage: {
 export declare function translate(key: string): string;
 export declare function hasTranslation(key: string, language?: LanguageCode): boolean;
 export declare function getText(key: string): string;
-export declare function getNotionText(key: string, language?: LanguageCode): Promise<string | null>;
-export declare function setNotionText(key: string, value: string, language?: LanguageCode): void;
 export declare function getAvailableLanguages(): Promise<LanguageCode[]>;
 export declare function getAvailableLanguagesSync(): LanguageCode[];
 export declare function loadTranslations(language: LanguageCode, translations: TranslationData): void;
 export declare function setLanguage(language: LanguageCode): void;
 export {};
-//# sourceMappingURL=language.d.ts.map
+//# sourceMappingURL=i18n.d.ts.map

package/dist/0-face/i18n.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../DS1/0-face/i18n.ts"],"names":[],"mappings":"AACA,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC;AAGlC,KAAK,eAAe,GAAG;IACrB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB,CAAC;AAyDF,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,mBAAmB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;QACtD,wBAAwB,CAAC,EAAE,MAAM,CAAC;KACnC;CACF;AA+RD,wBAAgB,sBAAsB,CACpC,IAAI,EAAE,YAAY,EAClB,OAAO,GAAE;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAO,GAChC,MAAM,CA6CR;AAqDD,wBAAgB,kBAAkB,IAAI,YAAY,CAwBjD;AAWD,eAAO,MAAM,eAAe;;gBAGL,YAAY;CAWlC,CAAC;AAuDF,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAiB7C;AAED,wBAAgB,cAAc,CAC5B,GAAG,EAAE,MAAM,EACX,QAAQ,GAAE,YAAoC,GAC7C,OAAO,CAmBT;AAGD,wBAAgB,OAAO,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAE3C;AAGD,wBAAgB,qBAAqB,IAAI,OAAO,CAAC,YAAY,EAAE,CAAC,CAS/D;AAGD,wBAAgB,yBAAyB,IAAI,YAAY,EAAE,CAO1D;AAGD,wBAAgB,gBAAgB,CAC9B,QAAQ,EAAE,YAAY,EACtB,YAAY,EAAE,eAAe,GAC5B,IAAI,CAON;AAGD,wBAAgB,WAAW,CAAC,QAAQ,EAAE,YAAY,GAAG,IAAI,CAgBxD"}