diff --git a/.storybook/main.ts b/.storybook/main.ts
new file mode 100644
index 0000000..360d7dc
--- /dev/null
+++ b/.storybook/main.ts
@@ -0,0 +1,94 @@
+import type { StorybookConfig } from '@storybook/preact-vite';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { readFileSync, existsSync } from 'fs';
+
+// ESM-compatible __dirname
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+/**
+ * DSS Unified Storybook Configuration
+ *
+ * Loads stories from:
+ * 1. DSS Core (packages/dss-ui/stories/) - atoms, molecules, organisms
+ * 2. Active project stories - templates, pages, project-specific components
+ *
+ * Project selection is controlled via:
+ * 1. STORYBOOK_PROJECT env var (highest priority)
+ * 2. .dss/state.json activeProject field (managed by Claude/admin-ui)
+ * 3. Default: 'admin-ui'
+ */
+
+// Read active project from DSS state
+function getActiveProject(): string {
+ // Env var takes priority
+ if (process.env.STORYBOOK_PROJECT) {
+ return process.env.STORYBOOK_PROJECT;
+ }
+
+ // Try reading from DSS state
+ const statePath = join(__dirname, '../.dss/state.json');
+ if (existsSync(statePath)) {
+ try {
+ const state = JSON.parse(readFileSync(statePath, 'utf-8'));
+ if (state.activeProject) {
+ return state.activeProject;
+ }
+ } catch (e) {
+ console.warn('Failed to read DSS state, using default project');
+ }
+ }
+
+ return 'admin-ui';
+}
+
+const activeProject = getActiveProject();
+console.log(`[DSS] Active project: ${activeProject}`);
+
+const config: StorybookConfig = {
+ stories: [
+ // DSS Core stories (always loaded)
+ '../packages/dss-ui/stories/**/*.stories.@(js|jsx|ts|tsx)',
+ '../packages/dss-ui/stories/**/*.mdx',
+ // Project-specific stories
+ `../${activeProject}/src/**/*.stories.@(js|jsx|ts|tsx)`,
+ `../${activeProject}/src/**/*.mdx`,
+ ],
+ addons: [
+ '@storybook/addon-docs',
+ '@storybook/addon-a11y',
+ ],
+ framework: {
+ name: '@storybook/preact-vite',
+ options: {},
+ },
+ docs: {
+ autodocs: 'tag',
+ },
+ staticDirs: [
+ '../packages/dss-ui/src/primitives',
+ ],
+ viteFinal: async (config) => {
+ config.server = config.server || {};
+ config.server.allowedHosts = [
+ 'localhost',
+ 'storybook.dss.overbits.luz.uy'
+ ];
+ // HMR configuration
+ // For local development: HMR works normally on localhost:6006
+ // For external access (storybook.dss.overbits.luz.uy): HMR is disabled
+ // because Vite uses a separate port (24678) that isn't proxied through nginx
+ // Disable HMR for external access - Vite's HMR websocket isn't proxied through nginx
+ config.server.hmr = false;
+ // Resolve packages for proper imports
+ config.resolve = config.resolve || {};
+ config.resolve.alias = {
+ ...config.resolve.alias,
+ '@dss/ui': join(__dirname, '../packages/dss-ui/src'),
+ };
+ return config;
+ },
+};
+
+export default config;
diff --git a/.storybook/preview.jsx b/.storybook/preview.jsx
new file mode 100644
index 0000000..eec931c
--- /dev/null
+++ b/.storybook/preview.jsx
@@ -0,0 +1,238 @@
+/**
+ * DSS Unified Storybook Preview
+ *
+ * Single Storybook instance that loads:
+ * - DSS Core components (atoms, molecules, organisms)
+ * - Project-specific stories (templates, pages)
+ *
+ * Toolbar controls:
+ * - Skin: shadcn, material, heroui
+ * - Mode: light/dark
+ */
+
+import { h } from 'preact';
+
+// Import all component CSS from DSS Core
+const coreStyles = import.meta.glob('../packages/dss-ui/src/atoms/*.css', { eager: true });
+
+// Import design tokens
+import '../packages/dss-ui/src/primitives/tokens.css';
+
+// Skin CSS variables - generated from skin dictionaries
+const skinStyles = {
+ shadcn: {
+ '--color-background': 'hsl(0 0% 100%)',
+ '--color-foreground': 'hsl(240 10% 3.9%)',
+ '--color-card': 'hsl(0 0% 100%)',
+ '--color-card-foreground': 'hsl(240 10% 3.9%)',
+ '--color-popover': 'hsl(0 0% 100%)',
+ '--color-popover-foreground': 'hsl(240 10% 3.9%)',
+ '--color-primary': 'hsl(240 5.9% 10%)',
+ '--color-primary-foreground': 'hsl(0 0% 98%)',
+ '--color-secondary': 'hsl(240 4.8% 95.9%)',
+ '--color-secondary-foreground': 'hsl(240 5.9% 10%)',
+ '--color-muted': 'hsl(240 4.8% 95.9%)',
+ '--color-muted-foreground': 'hsl(240 3.8% 46.1%)',
+ '--color-accent': 'hsl(240 4.8% 95.9%)',
+ '--color-accent-foreground': 'hsl(240 5.9% 10%)',
+ '--color-destructive': 'hsl(0 84.2% 60.2%)',
+ '--color-destructive-foreground': 'hsl(0 0% 98%)',
+ '--color-border': 'hsl(240 5.9% 90%)',
+ '--color-input': 'hsl(240 5.9% 90%)',
+ '--color-ring': 'hsl(240 5.9% 10%)',
+ '--radius': '0.5rem',
+ },
+ material: {
+ '--color-background': 'hsl(0 0% 99%)',
+ '--color-foreground': 'hsl(0 0% 10%)',
+ '--color-card': 'hsl(0 0% 100%)',
+ '--color-card-foreground': 'hsl(0 0% 10%)',
+ '--color-popover': 'hsl(0 0% 100%)',
+ '--color-popover-foreground': 'hsl(0 0% 10%)',
+ '--color-primary': 'hsl(262 80% 50%)',
+ '--color-primary-foreground': 'hsl(0 0% 100%)',
+ '--color-secondary': 'hsl(262 20% 90%)',
+ '--color-secondary-foreground': 'hsl(262 80% 30%)',
+ '--color-muted': 'hsl(0 0% 96%)',
+ '--color-muted-foreground': 'hsl(0 0% 45%)',
+ '--color-accent': 'hsl(262 20% 95%)',
+ '--color-accent-foreground': 'hsl(262 80% 40%)',
+ '--color-destructive': 'hsl(0 75% 42%)',
+ '--color-destructive-foreground': 'hsl(0 0% 100%)',
+ '--color-border': 'hsl(0 0% 88%)',
+ '--color-input': 'hsl(0 0% 88%)',
+ '--color-ring': 'hsl(262 80% 50%)',
+ '--radius': '1rem',
+ },
+ heroui: {
+ '--color-background': 'hsl(0 0% 100%)',
+ '--color-foreground': 'hsl(240 6% 10%)',
+ '--color-card': 'hsl(0 0% 100%)',
+ '--color-card-foreground': 'hsl(240 6% 10%)',
+ '--color-popover': 'hsl(0 0% 100%)',
+ '--color-popover-foreground': 'hsl(240 6% 10%)',
+ '--color-primary': 'hsl(212 100% 48%)',
+ '--color-primary-foreground': 'hsl(0 0% 100%)',
+ '--color-secondary': 'hsl(270 60% 52%)',
+ '--color-secondary-foreground': 'hsl(0 0% 100%)',
+ '--color-muted': 'hsl(240 5% 96%)',
+ '--color-muted-foreground': 'hsl(240 4% 46%)',
+ '--color-accent': 'hsl(212 100% 95%)',
+ '--color-accent-foreground': 'hsl(212 100% 40%)',
+ '--color-destructive': 'hsl(0 72% 51%)',
+ '--color-destructive-foreground': 'hsl(0 0% 100%)',
+ '--color-border': 'hsl(240 6% 90%)',
+ '--color-input': 'hsl(240 6% 90%)',
+ '--color-ring': 'hsl(212 100% 48%)',
+ '--radius': '0.75rem',
+ },
+};
+
+// Dark mode overrides
+const darkModeStyles = {
+ shadcn: {
+ '--color-background': 'hsl(240 10% 3.9%)',
+ '--color-foreground': 'hsl(0 0% 98%)',
+ '--color-card': 'hsl(240 10% 3.9%)',
+ '--color-card-foreground': 'hsl(0 0% 98%)',
+ '--color-popover': 'hsl(240 10% 3.9%)',
+ '--color-popover-foreground': 'hsl(0 0% 98%)',
+ '--color-primary': 'hsl(0 0% 98%)',
+ '--color-primary-foreground': 'hsl(240 5.9% 10%)',
+ '--color-secondary': 'hsl(240 3.7% 15.9%)',
+ '--color-secondary-foreground': 'hsl(0 0% 98%)',
+ '--color-muted': 'hsl(240 3.7% 15.9%)',
+ '--color-muted-foreground': 'hsl(240 5% 64.9%)',
+ '--color-accent': 'hsl(240 3.7% 15.9%)',
+ '--color-accent-foreground': 'hsl(0 0% 98%)',
+ '--color-destructive': 'hsl(0 62.8% 30.6%)',
+ '--color-destructive-foreground': 'hsl(0 0% 98%)',
+ '--color-border': 'hsl(240 3.7% 15.9%)',
+ '--color-input': 'hsl(240 3.7% 15.9%)',
+ '--color-ring': 'hsl(240 4.9% 83.9%)',
+ },
+ material: {
+ '--color-background': 'hsl(280 10% 8%)',
+ '--color-foreground': 'hsl(280 5% 90%)',
+ '--color-card': 'hsl(280 10% 12%)',
+ '--color-card-foreground': 'hsl(280 5% 90%)',
+ '--color-popover': 'hsl(280 10% 12%)',
+ '--color-popover-foreground': 'hsl(280 5% 90%)',
+ '--color-primary': 'hsl(262 80% 70%)',
+ '--color-primary-foreground': 'hsl(280 10% 8%)',
+ '--color-secondary': 'hsl(262 20% 25%)',
+ '--color-secondary-foreground': 'hsl(262 50% 85%)',
+ '--color-muted': 'hsl(280 10% 15%)',
+ '--color-muted-foreground': 'hsl(280 5% 60%)',
+ '--color-accent': 'hsl(262 20% 20%)',
+ '--color-accent-foreground': 'hsl(262 80% 80%)',
+ '--color-destructive': 'hsl(0 60% 50%)',
+ '--color-destructive-foreground': 'hsl(0 0% 100%)',
+ '--color-border': 'hsl(280 10% 20%)',
+ '--color-input': 'hsl(280 10% 20%)',
+ '--color-ring': 'hsl(262 80% 70%)',
+ },
+ heroui: {
+ '--color-background': 'hsl(240 10% 4%)',
+ '--color-foreground': 'hsl(0 0% 95%)',
+ '--color-card': 'hsl(240 10% 8%)',
+ '--color-card-foreground': 'hsl(0 0% 95%)',
+ '--color-popover': 'hsl(240 10% 8%)',
+ '--color-popover-foreground': 'hsl(0 0% 95%)',
+ '--color-primary': 'hsl(212 100% 55%)',
+ '--color-primary-foreground': 'hsl(0 0% 100%)',
+ '--color-secondary': 'hsl(270 60% 60%)',
+ '--color-secondary-foreground': 'hsl(0 0% 100%)',
+ '--color-muted': 'hsl(240 5% 15%)',
+ '--color-muted-foreground': 'hsl(240 4% 60%)',
+ '--color-accent': 'hsl(212 50% 15%)',
+ '--color-accent-foreground': 'hsl(212 100% 70%)',
+ '--color-destructive': 'hsl(0 72% 55%)',
+ '--color-destructive-foreground': 'hsl(0 0% 100%)',
+ '--color-border': 'hsl(240 6% 20%)',
+ '--color-input': 'hsl(240 6% 20%)',
+ '--color-ring': 'hsl(212 100% 55%)',
+ },
+};
+
+// Apply theme to document root
+const applyTheme = (skin, mode) => {
+ const root = document.documentElement;
+ const styles = mode === 'dark'
+ ? { ...skinStyles[skin], ...darkModeStyles[skin] }
+ : skinStyles[skin];
+
+ Object.entries(styles).forEach(([prop, value]) => {
+ root.style.setProperty(prop, value);
+ });
+
+ // Set background color on body for Storybook canvas
+ document.body.style.backgroundColor = styles['--color-background'];
+ document.body.style.color = styles['--color-foreground'];
+};
+
+/** @type { import('@storybook/preact').Preview } */
+const preview = {
+ globalTypes: {
+ skin: {
+ description: 'Design system skin',
+ defaultValue: 'shadcn',
+ toolbar: {
+ title: 'Skin',
+ icon: 'paintbrush',
+ items: [
+ { value: 'shadcn', title: 'shadcn/ui (Default)' },
+ { value: 'material', title: 'Material Design' },
+ { value: 'heroui', title: 'HeroUI' },
+ ],
+ dynamicTitle: true,
+ },
+ },
+ mode: {
+ description: 'Color mode',
+ defaultValue: 'light',
+ toolbar: {
+ title: 'Mode',
+ icon: 'circlehollow',
+ items: [
+ { value: 'light', title: 'Light', icon: 'sun' },
+ { value: 'dark', title: 'Dark', icon: 'moon' },
+ ],
+ dynamicTitle: true,
+ },
+ },
+ },
+ parameters: {
+ controls: {
+ matchers: {
+ color: /(background|color)$/i,
+ date: /Date$/i,
+ },
+ },
+ backgrounds: {
+ disable: true, // Use our custom theme system instead
+ },
+ options: {
+ storySort: {
+ order: [
+ '0. Overview',
+ '1. Primitives',
+ '2. Atoms',
+ '3. Molecules',
+ '4. Organisms',
+ '5. Templates', // Project-specific
+ '6. Pages', // Project-specific
+ ],
+ },
+ },
+ },
+ decorators: [
+ (Story, context) => {
+ const { skin, mode } = context.globals;
+ applyTheme(skin || 'shadcn', mode || 'light');
+ return h(Story, null);
+ },
+ ],
+};
+
+export default preview;
diff --git a/dss-claude-plugin/hooks/hooks.json b/dss-claude-plugin/hooks/hooks.json
index 18df84c..8dcb855 100644
--- a/dss-claude-plugin/hooks/hooks.json
+++ b/dss-claude-plugin/hooks/hooks.json
@@ -56,7 +56,7 @@
"hooks": [
{
"type": "command",
- "command": "node ${CLAUDE_PLUGIN_ROOT}/hooks/scripts/complexity-monitor.js",
+ "command": "node ${CLAUDE_PLUGIN_ROOT}/hooks/scripts/complexity-monitor.cjs",
"timeout": 5000,
"continueOnError": true
}
@@ -85,7 +85,7 @@
"hooks": [
{
"type": "command",
- "command": "node ${CLAUDE_PLUGIN_ROOT}/hooks/scripts/session-summary.js",
+ "command": "node ${CLAUDE_PLUGIN_ROOT}/hooks/scripts/session-summary.cjs",
"timeout": 10000,
"continueOnError": true
}
@@ -100,7 +100,7 @@
"hooks": [
{
"type": "command",
- "command": "node ${CLAUDE_PLUGIN_ROOT}/hooks/scripts/git-backup.js",
+ "command": "node ${CLAUDE_PLUGIN_ROOT}/hooks/scripts/git-backup.cjs",
"timeout": 10000,
"continueOnError": false
}
diff --git a/dss-claude-plugin/hooks/scripts/complexity-monitor.cjs b/dss-claude-plugin/hooks/scripts/complexity-monitor.cjs
new file mode 100755
index 0000000..64622c1
--- /dev/null
+++ b/dss-claude-plugin/hooks/scripts/complexity-monitor.cjs
@@ -0,0 +1,215 @@
+#!/usr/bin/env node
+/**
+ * DSS Complexity Monitor Hook
+ * Tracks code complexity metrics and warns on high-complexity code.
+ * Written from scratch for DSS.
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+// Configuration
+const DEFAULT_CONFIG = {
+ complexity_monitor: {
+ enabled: true,
+ max_function_lines: 50,
+ max_component_lines: 200,
+ max_props: 10,
+ max_nesting_depth: 4,
+ warn_only: true
+ }
+};
+
+function loadConfig() {
+ const configPath = path.join(process.env.HOME || '', '.dss', 'hooks-config.json');
+ try {
+ if (fs.existsSync(configPath)) {
+ const userConfig = JSON.parse(fs.readFileSync(configPath, 'utf8'));
+ return { ...DEFAULT_CONFIG, ...userConfig };
+ }
+ } catch (e) {
+ // Use defaults
+ }
+ return DEFAULT_CONFIG;
+}
+
+function countLines(content) {
+ return content.split('\n').length;
+}
+
+function countProps(content) {
+ // Count props in interface/type definition
+ const propsMatch = content.match(/(?:interface|type)\s+\w*Props[^{]*\{([^}]+)\}/);
+ if (propsMatch) {
+ const propsContent = propsMatch[1];
+ // Count semicolons or newlines with property definitions
+ const props = propsContent.split(/[;\n]/).filter(line => {
+ const trimmed = line.trim();
+ return trimmed && !trimmed.startsWith('//') && trimmed.includes(':');
+ });
+ return props.length;
+ }
+ return 0;
+}
+
+function countNestingDepth(content) {
+ let maxDepth = 0;
+ let currentDepth = 0;
+
+ for (const char of content) {
+ if (char === '{' || char === '(') {
+ currentDepth++;
+ maxDepth = Math.max(maxDepth, currentDepth);
+ } else if (char === '}' || char === ')') {
+ currentDepth = Math.max(0, currentDepth - 1);
+ }
+ }
+
+ return maxDepth;
+}
+
+function countFunctions(content) {
+ const patterns = [
+ /function\s+\w+\s*\([^)]*\)\s*\{/g,
+ /const\s+\w+\s*=\s*(?:async\s*)?\([^)]*\)\s*=>/g,
+ /const\s+\w+\s*=\s*(?:async\s*)?function/g
+ ];
+
+ let count = 0;
+ for (const pattern of patterns) {
+ const matches = content.match(pattern);
+ if (matches) count += matches.length;
+ }
+ return count;
+}
+
+function analyzeComplexity(content, filePath, config) {
+ const issues = [];
+ const monitorConfig = config.complexity_monitor || {};
+ const ext = path.extname(filePath).toLowerCase();
+
+ // Only analyze JS/TS files
+ if (!['.js', '.jsx', '.ts', '.tsx'].includes(ext)) {
+ return issues;
+ }
+
+ const lines = countLines(content);
+ const props = countProps(content);
+ const nesting = countNestingDepth(content);
+ const functions = countFunctions(content);
+
+ // Check component size (for tsx/jsx files)
+ if (['.tsx', '.jsx'].includes(ext)) {
+ if (lines > monitorConfig.max_component_lines) {
+ issues.push({
+ type: 'component_size',
+ severity: 'medium',
+ message: `Component has ${lines} lines (max: ${monitorConfig.max_component_lines})`,
+ suggestion: 'Consider breaking into smaller components'
+ });
+ }
+
+ if (props > monitorConfig.max_props) {
+ issues.push({
+ type: 'prop_count',
+ severity: 'medium',
+ message: `Component has ${props} props (max: ${monitorConfig.max_props})`,
+ suggestion: 'Consider grouping related props or using composition'
+ });
+ }
+ }
+
+ // Check nesting depth
+ if (nesting > monitorConfig.max_nesting_depth) {
+ issues.push({
+ type: 'nesting_depth',
+ severity: 'high',
+ message: `Nesting depth of ${nesting} (max: ${monitorConfig.max_nesting_depth})`,
+ suggestion: 'Extract nested logic into separate functions'
+ });
+ }
+
+ // Check function count (indicator of file doing too much)
+ if (functions > 10) {
+ issues.push({
+ type: 'function_count',
+ severity: 'low',
+ message: `File contains ${functions} functions`,
+ suggestion: 'Consider splitting into multiple modules'
+ });
+ }
+
+ return issues;
+}
+
+function formatOutput(issues, filePath) {
+ if (issues.length === 0) return '';
+
+ const severityIcons = {
+ high: '[HIGH]',
+ medium: '[MED]',
+ low: '[LOW]'
+ };
+
+ const lines = [`\n=== DSS Complexity Monitor: ${filePath} ===\n`];
+
+ for (const issue of issues) {
+ const icon = severityIcons[issue.severity] || '[?]';
+ lines.push(`${icon} ${issue.message}`);
+ lines.push(` Suggestion: ${issue.suggestion}\n`);
+ }
+
+ lines.push('='.repeat(50));
+ return lines.join('\n');
+}
+
+async function main() {
+ const config = loadConfig();
+
+ if (!config.complexity_monitor?.enabled) {
+ process.exit(0);
+ }
+
+ // Read input from stdin
+ let inputData;
+ try {
+ const chunks = [];
+ for await (const chunk of process.stdin) {
+ chunks.push(chunk);
+ }
+ inputData = JSON.parse(Buffer.concat(chunks).toString());
+ } catch (e) {
+ process.exit(0);
+ }
+
+ const toolName = inputData.tool_name || '';
+ const toolInput = inputData.tool_input || {};
+
+ if (!['Edit', 'Write'].includes(toolName)) {
+ process.exit(0);
+ }
+
+ const filePath = toolInput.file_path || '';
+ let content = '';
+
+ if (toolName === 'Write') {
+ content = toolInput.content || '';
+ } else if (toolName === 'Edit') {
+ content = toolInput.new_string || '';
+ }
+
+ if (!content || !filePath) {
+ process.exit(0);
+ }
+
+ const issues = analyzeComplexity(content, filePath, config);
+
+ if (issues.length > 0) {
+ const output = formatOutput(issues, filePath);
+ console.error(output);
+ }
+
+ process.exit(0);
+}
+
+main().catch(() => process.exit(0));
diff --git a/dss-claude-plugin/hooks/scripts/git-backup.cjs b/dss-claude-plugin/hooks/scripts/git-backup.cjs
new file mode 100755
index 0000000..e18b568
--- /dev/null
+++ b/dss-claude-plugin/hooks/scripts/git-backup.cjs
@@ -0,0 +1,182 @@
+#!/usr/bin/env node
+/**
+ * DSS Git Backup Hook
+ * Automatically commits changes when Claude Code session ends.
+ * Written from scratch for DSS.
+ */
+
+const fs = require('fs');
+const path = require('path');
+const { execSync } = require('child_process');
+
+// Configuration
+const DEFAULT_CONFIG = {
+ git_backup: {
+ enabled: true,
+ require_git_repo: true,
+ commit_only_if_changes: true,
+ include_timestamp: true,
+ commit_prefix: 'auto-backup',
+ show_logs: false
+ }
+};
+
+// Prevent duplicate execution (Claude Code bug workaround)
+const STATE_DIR = path.join(__dirname, '..', '.state');
+const LOCK_FILE = path.join(STATE_DIR, '.git-backup.lock');
+const LOCK_TIMEOUT_MS = 3000;
+
+function loadConfig() {
+ const configPath = path.join(process.env.HOME || '', '.dss', 'hooks-config.json');
+ try {
+ if (fs.existsSync(configPath)) {
+ const userConfig = JSON.parse(fs.readFileSync(configPath, 'utf8'));
+ return { ...DEFAULT_CONFIG, ...userConfig };
+ }
+ } catch (e) {
+ // Use defaults
+ }
+ return DEFAULT_CONFIG;
+}
+
+function checkLock() {
+ try {
+ if (!fs.existsSync(STATE_DIR)) {
+ fs.mkdirSync(STATE_DIR, { recursive: true });
+ }
+
+ if (fs.existsSync(LOCK_FILE)) {
+ const lastRun = parseInt(fs.readFileSync(LOCK_FILE, 'utf8'));
+ if (!isNaN(lastRun) && (Date.now() - lastRun < LOCK_TIMEOUT_MS)) {
+ return false; // Already ran recently
+ }
+ }
+
+ fs.writeFileSync(LOCK_FILE, Date.now().toString(), 'utf8');
+ return true;
+ } catch (e) {
+ return true; // Proceed on error
+ }
+}
+
+function isGitRepo() {
+ try {
+ execSync('git rev-parse --is-inside-work-tree', { stdio: 'pipe' });
+ return true;
+ } catch (e) {
+ return false;
+ }
+}
+
+function hasChanges() {
+ try {
+ const status = execSync('git status --porcelain', { encoding: 'utf8' });
+ return status.trim().length > 0;
+ } catch (e) {
+ return false;
+ }
+}
+
+function getChangeSummary() {
+ try {
+ const status = execSync('git status --short', { encoding: 'utf8' });
+ const lines = status.trim().split('\n').filter(Boolean);
+
+ let added = 0, modified = 0, deleted = 0;
+
+ for (const line of lines) {
+ const status = line.trim().charAt(0);
+ if (status === 'A' || status === '?') added++;
+ else if (status === 'M') modified++;
+ else if (status === 'D') deleted++;
+ }
+
+ return { added, modified, deleted, total: lines.length };
+ } catch (e) {
+ return { added: 0, modified: 0, deleted: 0, total: 0 };
+ }
+}
+
+function createBackup(config) {
+ const backupConfig = config.git_backup || {};
+
+ try {
+ // Stage all changes
+ execSync('git add -A', { stdio: 'pipe' });
+
+ // Build commit message
+ const parts = [backupConfig.commit_prefix || 'auto-backup'];
+
+ if (backupConfig.include_timestamp) {
+ const timestamp = new Date().toISOString().replace('T', ' ').replace(/\..+/, '');
+ parts.push(timestamp);
+ }
+
+ const summary = getChangeSummary();
+ const summaryText = `(${summary.total} files: +${summary.added} ~${summary.modified} -${summary.deleted})`;
+
+ const commitMessage = `${parts.join(': ')} ${summaryText}\n\nGenerated by DSS Git Backup Hook`;
+
+ // Create commit
+ execSync(`git commit -m "${commitMessage}"`, { stdio: 'pipe' });
+
+ // Get commit hash
+ const commitHash = execSync('git rev-parse --short HEAD', { encoding: 'utf8' }).trim();
+
+ return { success: true, hash: commitHash, files: summary.total };
+ } catch (e) {
+ return { success: false, error: e.message };
+ }
+}
+
+function log(config, message) {
+ if (config.git_backup?.show_logs) {
+ console.log(JSON.stringify({
+ systemMessage: message,
+ continue: true
+ }));
+ }
+}
+
+function main() {
+ // Prevent duplicate execution
+ if (!checkLock()) {
+ process.exit(0);
+ }
+
+ // Prevent hook recursion
+ if (process.env.STOP_HOOK_ACTIVE === 'true') {
+ process.exit(0);
+ }
+
+ const config = loadConfig();
+
+ if (!config.git_backup?.enabled) {
+ process.exit(0);
+ }
+
+ // Check for git repo
+ if (config.git_backup.require_git_repo && !isGitRepo()) {
+ log(config, 'DSS Git Backup: Not a git repository, skipping');
+ process.exit(0);
+ }
+
+ // Check for changes
+ if (config.git_backup.commit_only_if_changes && !hasChanges()) {
+ log(config, 'DSS Git Backup: No changes to commit');
+ process.exit(0);
+ }
+
+ // Create backup
+ const result = createBackup(config);
+
+ if (result.success) {
+ log(config, `DSS Git Backup: Committed ${result.files} files (${result.hash})`);
+ } else {
+ log(config, `DSS Git Backup: Failed - ${result.error}`);
+ }
+
+ process.exit(0);
+}
+
+main();
diff --git a/dss-claude-plugin/hooks/scripts/session-summary.cjs b/dss-claude-plugin/hooks/scripts/session-summary.cjs
new file mode 100755
index 0000000..8430a55
--- /dev/null
+++ b/dss-claude-plugin/hooks/scripts/session-summary.cjs
@@ -0,0 +1,194 @@
+#!/usr/bin/env node
+/**
+ * DSS Session Summary Hook
+ * Generates a summary report at the end of each Claude Code session.
+ * Written from scratch for DSS.
+ */
+
+const fs = require('fs');
+const path = require('path');
+const { execSync } = require('child_process');
+
+// Configuration
+const DEFAULT_CONFIG = {
+ session_summary: {
+ enabled: true,
+ output_file: '.dss-session-summary.md',
+ include_git_diff: true,
+ include_file_list: true,
+ max_diff_lines: 100
+ }
+};
+
+function loadConfig() {
+ const configPath = path.join(process.env.HOME || '', '.dss', 'hooks-config.json');
+ try {
+ if (fs.existsSync(configPath)) {
+ const userConfig = JSON.parse(fs.readFileSync(configPath, 'utf8'));
+ return { ...DEFAULT_CONFIG, ...userConfig };
+ }
+ } catch (e) {
+ // Use defaults
+ }
+ return DEFAULT_CONFIG;
+}
+
+function getGitInfo() {
+ const info = {
+ branch: '',
+ status: '',
+ diff: '',
+ modifiedFiles: []
+ };
+
+ try {
+ // Check if in git repo
+ execSync('git rev-parse --is-inside-work-tree', { stdio: 'pipe' });
+
+ // Get branch
+ info.branch = execSync('git branch --show-current', { encoding: 'utf8' }).trim();
+
+ // Get status
+ info.status = execSync('git status --short', { encoding: 'utf8' }).trim();
+
+ // Get modified files
+ const statusLines = info.status.split('\n').filter(Boolean);
+ info.modifiedFiles = statusLines.map(line => {
+ const parts = line.trim().split(/\s+/);
+ return {
+ status: parts[0],
+ file: parts.slice(1).join(' ')
+ };
+ });
+
+ // Get diff summary
+ try {
+ info.diff = execSync('git diff --stat', { encoding: 'utf8' }).trim();
+ } catch (e) {
+ info.diff = '';
+ }
+ } catch (e) {
+ // Not a git repo or git not available
+ }
+
+ return info;
+}
+
+function getSessionStats() {
+ // Try to read from session state if available
+ const stats = {
+ startTime: new Date().toISOString(),
+ filesModified: 0,
+ linesAdded: 0,
+ linesRemoved: 0
+ };
+
+ try {
+ // Get diff stats from git
+ const diffStat = execSync('git diff --numstat', { encoding: 'utf8' });
+ const lines = diffStat.trim().split('\n').filter(Boolean);
+
+ for (const line of lines) {
+ const [added, removed] = line.split('\t');
+ stats.linesAdded += parseInt(added) || 0;
+ stats.linesRemoved += parseInt(removed) || 0;
+ stats.filesModified++;
+ }
+ } catch (e) {
+ // Git not available
+ }
+
+ return stats;
+}
+
+function generateReport(config) {
+ const summaryConfig = config.session_summary || {};
+ const gitInfo = getGitInfo();
+ const stats = getSessionStats();
+
+ const timestamp = new Date().toLocaleString();
+ const lines = [];
+
+ lines.push('# DSS Session Summary');
+ lines.push(`\n**Generated:** ${timestamp}`);
+
+ if (gitInfo.branch) {
+ lines.push(`**Branch:** ${gitInfo.branch}`);
+ }
+
+ lines.push('\n## Changes Overview');
+ lines.push('');
+ lines.push(`- Files modified: ${stats.filesModified}`);
+ lines.push(`- Lines added: +${stats.linesAdded}`);
+ lines.push(`- Lines removed: -${stats.linesRemoved}`);
+
+ if (summaryConfig.include_file_list && gitInfo.modifiedFiles.length > 0) {
+ lines.push('\n## Modified Files');
+ lines.push('');
+ lines.push('| Status | File |');
+ lines.push('|--------|------|');
+
+ const statusLabels = {
+ 'M': 'Modified',
+ 'A': 'Added',
+ 'D': 'Deleted',
+ 'R': 'Renamed',
+ '??': 'Untracked'
+ };
+
+ for (const file of gitInfo.modifiedFiles.slice(0, 20)) {
+ const label = statusLabels[file.status] || file.status;
+ lines.push(`| ${label} | ${file.file} |`);
+ }
+
+ if (gitInfo.modifiedFiles.length > 20) {
+ lines.push(`| ... | +${gitInfo.modifiedFiles.length - 20} more files |`);
+ }
+ }
+
+ if (summaryConfig.include_git_diff && gitInfo.diff) {
+ lines.push('\n## Diff Summary');
+ lines.push('');
+ lines.push('```');
+ const diffLines = gitInfo.diff.split('\n');
+ const maxLines = summaryConfig.max_diff_lines || 100;
+ lines.push(diffLines.slice(0, maxLines).join('\n'));
+ if (diffLines.length > maxLines) {
+ lines.push(`... (${diffLines.length - maxLines} more lines)`);
+ }
+ lines.push('```');
+ }
+
+ lines.push('\n---');
+ lines.push('*Generated by DSS Session Summary Hook*');
+
+ return lines.join('\n');
+}
+
+function main() {
+ const config = loadConfig();
+
+ if (!config.session_summary?.enabled) {
+ process.exit(0);
+ }
+
+ try {
+ const report = generateReport(config);
+ const outputFile = config.session_summary.output_file || '.dss-session-summary.md';
+ const outputPath = path.join(process.cwd(), outputFile);
+
+ fs.writeFileSync(outputPath, report, 'utf8');
+
+ // Output confirmation
+ console.log(JSON.stringify({
+ systemMessage: `Session summary saved to ${outputFile}`,
+ continue: true
+ }));
+ } catch (e) {
+ // Fail silently
+ }
+
+ process.exit(0);
+}
+
+main();
diff --git a/dss-claude-plugin/hooks/scripts/token-validator.py b/dss-claude-plugin/hooks/scripts/token-validator.py
index b1bd076..018af1d 100755
--- a/dss-claude-plugin/hooks/scripts/token-validator.py
+++ b/dss-claude-plugin/hooks/scripts/token-validator.py
@@ -105,12 +105,10 @@ HARDCODED_PATTERNS = [
# Allowlist patterns (common exceptions)
ALLOWLIST = [
- r"#000000?", # Pure black
- r"#fff(fff)?", # Pure white
r"transparent",
r"inherit",
r"currentColor",
- r"var\(--", # Already using CSS variables
+ r"var\(--[^,)]+\)$", # CSS variables WITHOUT fallbacks only
r"theme\.", # Already using theme
r"colors\.", # Already using colors object
]
@@ -122,9 +120,9 @@ def get_config():
default_config = {
"token_validator": {
"enabled": True,
- "strict_mode": False,
- "warn_only": True,
- "categories": ["color", "spacing", "typography"],
+ "strict_mode": True, # Block writes with hardcoded values
+ "warn_only": False, # Actually enforce token usage
+ "categories": ["color", "spacing", "typography", "border", "effects"],
}
}
diff --git a/packages/dss-ui/src/atoms/Button.css b/packages/dss-ui/src/atoms/Button.css
new file mode 100644
index 0000000..d64a463
--- /dev/null
+++ b/packages/dss-ui/src/atoms/Button.css
@@ -0,0 +1,111 @@
+.button {
+ display: flex;
+ flex-direction: row;
+ gap: 8px;
+ padding: 7.5px 16px;
+ justify-content: center;
+ align-items: center;
+ background: var(--color-primary);
+ color: var(--color-primary-foreground);
+ border-radius: var(--radius);
+ border: none;
+ cursor: pointer;
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 1.25;
+ transition: background-color 0.15s ease;
+}
+
+.button--large {
+ padding: 9.5px 24.0px 9.5px 24.0px;
+ gap: 8.0px;
+}
+
+.button--mini {
+ padding: 3.0px 8.0px 3.0px 8.0px;
+ gap: 6.0px;
+}
+
+.button--regular {
+ padding: 7.5px 16.0px 7.5px 16.0px;
+ gap: 8.0px;
+}
+
+.button--small {
+ padding: 5.5px 12.0px 5.5px 12.0px;
+ gap: 6.0px;
+}
+
+.button--destructive {
+ background: var(--color-destructive);
+ color: var(--color-destructive-foreground);
+}
+
+.button--ghost {
+ background: transparent;
+ color: var(--color-foreground);
+}
+
+.button--ghost:hover {
+ background: var(--color-accent);
+}
+
+.button--ghost-muted {
+ background: transparent;
+ color: var(--color-muted-foreground);
+}
+
+.button--ghost-muted:hover {
+ background: var(--color-muted);
+}
+
+.button--outline {
+ background: transparent;
+ color: var(--color-foreground);
+ border: 1px solid var(--color-border);
+}
+
+.button--outline:hover {
+ background: var(--color-accent);
+}
+
+.button--primary {
+ background: var(--color-primary);
+ color: var(--color-primary-foreground);
+}
+
+.button--primary:hover {
+ opacity: 0.9;
+}
+
+.button--secondary {
+ background: var(--color-secondary);
+ color: var(--color-secondary-foreground);
+}
+
+.button--secondary:hover {
+ opacity: 0.9;
+}
+
+.button--default {
+ background: var(--color-primary);
+ color: var(--color-primary-foreground);
+}
+
+.button:disabled,
+.button--disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+ pointer-events: none;
+}
+
+.button:focus,
+.button--focus {
+ outline: 2px solid var(--color-ring);
+ outline-offset: 2px;
+}
+
+.button--hover-active,
+.button:hover:not(:disabled) {
+ opacity: 0.9;
+}
diff --git a/packages/dss-ui/src/atoms/Button.tsx b/packages/dss-ui/src/atoms/Button.tsx
new file mode 100644
index 0000000..6ab41a5
--- /dev/null
+++ b/packages/dss-ui/src/atoms/Button.tsx
@@ -0,0 +1,37 @@
+/**
+ * Button
+ * Auto-generated from Figma
+ *
+ * @classification atom
+ * @figma-id 9:1071
+ * @generated 2025-12-11T14:37:52.567978
+ */
+import './Button.css';
+
+export interface ButtonProps {
+ roundness?: 'Default' | 'Round';
+ variant?: 'Destructive' | 'Ghost' | 'Ghost Muted' | 'Outline' | 'Primary' | 'Secondary';
+ size?: 'Large' | 'Mini' | 'Regular' | 'Small';
+ state?: 'Default' | 'Disabled' | 'Focus' | 'Hover & Active';
+ icon?: preact.ComponentChildren;
+ label?: preact.ComponentChildren;
+ children?: preact.ComponentChildren;
+ className?: string;
+ style?: preact.JSX.CSSProperties;
+}
+
+export function Button({ roundness, variant, size, state, icon, label, children, className, style }: ButtonProps) {
+ const baseClass = 'button';
+ const toKebab = (s: string) => s.toLowerCase().replace(/\s+/g, '-');
+ const classes = [baseClass, roundness && `button--${toKebab(roundness)}`, variant && `button--${toKebab(variant)}`, size && `button--${toKebab(size)}`, state && `button--${toKebab(state)}`, className].filter(Boolean).join(' ');
+
+ return (
+
+ );
+}
+
+Button.displayName = 'Button';
diff --git a/packages/dss-ui/stories/AccordionTrigger.stories.tsx b/packages/dss-ui/stories/AccordionTrigger.stories.tsx
new file mode 100644
index 0000000..0065cb6
--- /dev/null
+++ b/packages/dss-ui/stories/AccordionTrigger.stories.tsx
@@ -0,0 +1,40 @@
+/**
+ * Accordion Trigger Stories
+ * @generated 2025-12-11T14:37:52.563341
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { AccordionTrigger, type AccordionTriggerProps } from '../src/atoms/AccordionTrigger';
+
+const meta: Meta = {
+ title: '3. Molecules/AccordionTrigger',
+ component: AccordionTrigger,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated AccordionTrigger component
+
+**Classification:** molecule
+**Slots:** icon, label
+**Figma ID:** 66:5034`
+ }
+ }
+ },
+ argTypes: {
+ state: {
+ control: 'select',
+ options: ['Closed', 'Focus', 'Open'],
+ description: 'State variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ state: 'Closed',
+ children: 'AccordionTrigger'
+ },
+};
diff --git a/packages/dss-ui/stories/Alert.stories.tsx b/packages/dss-ui/stories/Alert.stories.tsx
new file mode 100644
index 0000000..d771154
--- /dev/null
+++ b/packages/dss-ui/stories/Alert.stories.tsx
@@ -0,0 +1,46 @@
+/**
+ * Alert Stories
+ * @generated 2025-12-11T14:37:52.563973
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { Alert, type AlertProps } from '../src/atoms/Alert';
+
+const meta: Meta = {
+ title: '3. Molecules/Alert',
+ component: Alert,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated Alert component
+
+**Classification:** molecule
+**Slots:** None
+**Figma ID:** 58:5416`
+ }
+ }
+ },
+ argTypes: {
+ type: {
+ control: 'select',
+ options: ['Error', 'Neutral'],
+ description: 'Type variant',
+ },
+ flipIcon: {
+ control: 'select',
+ options: ['false', 'true'],
+ description: 'Flip Icon variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ type: 'Error',
+ flipIcon: 'false',
+ children: 'Alert'
+ },
+};
diff --git a/packages/dss-ui/stories/AlertDialog.stories.tsx b/packages/dss-ui/stories/AlertDialog.stories.tsx
new file mode 100644
index 0000000..b733880
--- /dev/null
+++ b/packages/dss-ui/stories/AlertDialog.stories.tsx
@@ -0,0 +1,40 @@
+/**
+ * Alert Dialog Stories
+ * @generated 2025-12-11T14:37:52.564485
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { AlertDialog, type AlertDialogProps } from '../src/atoms/AlertDialog';
+
+const meta: Meta = {
+ title: '3. Molecules/AlertDialog',
+ component: AlertDialog,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated AlertDialog component
+
+**Classification:** molecule
+**Slots:** None
+**Figma ID:** 139:11941`
+ }
+ }
+ },
+ argTypes: {
+ type: {
+ control: 'select',
+ options: ['Desktop', 'Mobile'],
+ description: 'Type variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ type: 'Desktop',
+ children: 'AlertDialog'
+ },
+};
diff --git a/packages/dss-ui/stories/Avatar.stories.tsx b/packages/dss-ui/stories/Avatar.stories.tsx
new file mode 100644
index 0000000..f4f2425
--- /dev/null
+++ b/packages/dss-ui/stories/Avatar.stories.tsx
@@ -0,0 +1,73 @@
+/**
+ * Avatar Stories
+ * @generated 2025-12-11T14:37:52.566544
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { Avatar, type AvatarProps } from '../src/atoms/Avatar';
+
+const meta: Meta = {
+ title: '2. Atoms/Avatar',
+ component: Avatar,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated Avatar component
+
+**Classification:** atom
+**Slots:** media
+**Figma ID:** 18:1398`
+ }
+ }
+ },
+ argTypes: {
+ picture: {
+ control: 'select',
+ options: ['false', 'true'],
+ description: 'Picture variant',
+ },
+ size: {
+ control: 'select',
+ options: ['Extra Tiny', 'Regular', 'Small', 'Tiny'],
+ description: 'Size variant',
+ },
+ roundnessType: {
+ control: 'select',
+ options: ['Round', 'Roundrect'],
+ description: 'Roundness Type variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ picture: 'false',
+ size: 'Extra Tiny',
+ roundnessType: 'Round',
+ children: 'Avatar'
+ },
+};
+
+export const SizeExtraTiny: Story = {
+ args: {
+ ...Default.args,
+ size: 'Extra Tiny',
+ },
+};
+
+export const SizeRegular: Story = {
+ args: {
+ ...Default.args,
+ size: 'Regular',
+ },
+};
+
+export const SizeSmall: Story = {
+ args: {
+ ...Default.args,
+ size: 'Small',
+ },
+};
diff --git a/packages/dss-ui/stories/AvatarStack.stories.tsx b/packages/dss-ui/stories/AvatarStack.stories.tsx
new file mode 100644
index 0000000..7899973
--- /dev/null
+++ b/packages/dss-ui/stories/AvatarStack.stories.tsx
@@ -0,0 +1,60 @@
+/**
+ * Avatar Stack Stories
+ * @generated 2025-12-11T14:37:52.567049
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { AvatarStack, type AvatarStackProps } from '../src/atoms/AvatarStack';
+
+const meta: Meta = {
+ title: '2. Atoms/AvatarStack',
+ component: AvatarStack,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated AvatarStack component
+
+**Classification:** atom
+**Slots:** None
+**Figma ID:** 22:9509`
+ }
+ }
+ },
+ argTypes: {
+ size: {
+ control: 'select',
+ options: ['Regular', 'Small'],
+ description: 'Size variant',
+ },
+ type: {
+ control: 'select',
+ options: ['Default'],
+ description: 'Type variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ size: 'Regular',
+ type: 'Default',
+ children: 'AvatarStack'
+ },
+};
+
+export const SizeRegular: Story = {
+ args: {
+ ...Default.args,
+ size: 'Regular',
+ },
+};
+
+export const SizeSmall: Story = {
+ args: {
+ ...Default.args,
+ size: 'Small',
+ },
+};
diff --git a/packages/dss-ui/stories/Badge.stories.tsx b/packages/dss-ui/stories/Badge.stories.tsx
new file mode 100644
index 0000000..9394fd7
--- /dev/null
+++ b/packages/dss-ui/stories/Badge.stories.tsx
@@ -0,0 +1,80 @@
+/**
+ * Badge Stories
+ * @generated 2025-12-11T14:37:52.567758
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { Badge, type BadgeProps } from '../src/atoms/Badge';
+
+const meta: Meta = {
+ title: '2. Atoms/Badge',
+ component: Badge,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated Badge component
+
+**Classification:** atom
+**Slots:** icon, label
+**Figma ID:** 19:6979`
+ }
+ }
+ },
+ argTypes: {
+ roundness: {
+ control: 'select',
+ options: ['Default', 'Round'],
+ description: 'Roundness variant',
+ },
+ variant: {
+ control: 'select',
+ options: ['Destructive', 'Ghost', 'Outline', 'Primary', 'Secondary'],
+ description: 'Variant variant',
+ },
+ state: {
+ control: 'select',
+ options: ['Default', 'Focus'],
+ description: 'State variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ roundness: 'Default',
+ variant: 'Destructive',
+ state: 'Default',
+ children: 'Badge'
+ },
+};
+
+export const Destructive: Story = {
+ args: {
+ ...Default.args,
+ variant: 'Destructive',
+ },
+};
+
+export const Ghost: Story = {
+ args: {
+ ...Default.args,
+ variant: 'Ghost',
+ },
+};
+
+export const Outline: Story = {
+ args: {
+ ...Default.args,
+ variant: 'Outline',
+ },
+};
+
+export const Primary: Story = {
+ args: {
+ ...Default.args,
+ variant: 'Primary',
+ },
+};
diff --git a/packages/dss-ui/stories/BasicTableCell.stories.tsx b/packages/dss-ui/stories/BasicTableCell.stories.tsx
new file mode 100644
index 0000000..726837b
--- /dev/null
+++ b/packages/dss-ui/stories/BasicTableCell.stories.tsx
@@ -0,0 +1,46 @@
+/**
+ * Basic Table Cell Stories
+ * @generated 2025-12-11T14:37:52.648193
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { BasicTableCell, type BasicTableCellProps } from '../src/atoms/BasicTableCell';
+
+const meta: Meta = {
+ title: '2. Atoms/BasicTableCell',
+ component: BasicTableCell,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated BasicTableCell component
+
+**Classification:** atom
+**Slots:** None
+**Figma ID:** 288:172242`
+ }
+ }
+ },
+ argTypes: {
+ parity: {
+ control: 'select',
+ options: ['Even', 'Odd'],
+ description: 'Parity variant',
+ },
+ alignment: {
+ control: 'select',
+ options: ['Left', 'Right'],
+ description: 'Alignment variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ parity: 'Even',
+ alignment: 'Left',
+ children: 'BasicTableCell'
+ },
+};
diff --git a/packages/dss-ui/stories/BasicTableHeader.stories.tsx b/packages/dss-ui/stories/BasicTableHeader.stories.tsx
new file mode 100644
index 0000000..6dc71db
--- /dev/null
+++ b/packages/dss-ui/stories/BasicTableHeader.stories.tsx
@@ -0,0 +1,40 @@
+/**
+ * Basic Table Header Stories
+ * @generated 2025-12-11T14:37:52.647707
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { BasicTableHeader, type BasicTableHeaderProps } from '../src/atoms/BasicTableHeader';
+
+const meta: Meta = {
+ title: '4. Organisms/BasicTableHeader',
+ component: BasicTableHeader,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated BasicTableHeader component
+
+**Classification:** organism
+**Slots:** None
+**Figma ID:** 164:18430`
+ }
+ }
+ },
+ argTypes: {
+ cellType: {
+ control: 'select',
+ options: ['Heading'],
+ description: 'Cell Type variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ cellType: 'Heading',
+ children: 'BasicTableHeader'
+ },
+};
diff --git a/packages/dss-ui/stories/Button.stories.tsx b/packages/dss-ui/stories/Button.stories.tsx
new file mode 100644
index 0000000..313dde2
--- /dev/null
+++ b/packages/dss-ui/stories/Button.stories.tsx
@@ -0,0 +1,107 @@
+/**
+ * Button Stories
+ * @generated 2025-12-11T14:37:52.568631
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { Button, type ButtonProps } from '../src/atoms/Button';
+
+const meta: Meta = {
+ title: '2. Atoms/Button',
+ component: Button,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated Button component
+
+**Classification:** atom
+**Slots:** icon, label
+**Figma ID:** 9:1071`
+ }
+ }
+ },
+ argTypes: {
+ roundness: {
+ control: 'select',
+ options: ['Default', 'Round'],
+ description: 'Roundness variant',
+ },
+ variant: {
+ control: 'select',
+ options: ['Destructive', 'Ghost', 'Ghost Muted', 'Outline', 'Primary', 'Secondary'],
+ description: 'Variant variant',
+ },
+ size: {
+ control: 'select',
+ options: ['Large', 'Mini', 'Regular', 'Small'],
+ description: 'Size variant',
+ },
+ state: {
+ control: 'select',
+ options: ['Default', 'Disabled', 'Focus', 'Hover & Active'],
+ description: 'State variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ roundness: 'Default',
+ variant: 'Destructive',
+ size: 'Large',
+ state: 'Default',
+ children: 'Button'
+ },
+};
+
+export const SizeLarge: Story = {
+ args: {
+ ...Default.args,
+ size: 'Large',
+ },
+};
+
+export const SizeMini: Story = {
+ args: {
+ ...Default.args,
+ size: 'Mini',
+ },
+};
+
+export const SizeRegular: Story = {
+ args: {
+ ...Default.args,
+ size: 'Regular',
+ },
+};
+
+export const Destructive: Story = {
+ args: {
+ ...Default.args,
+ variant: 'Destructive',
+ },
+};
+
+export const Ghost: Story = {
+ args: {
+ ...Default.args,
+ variant: 'Ghost',
+ },
+};
+
+export const GhostMuted: Story = {
+ args: {
+ ...Default.args,
+ variant: 'Ghost Muted',
+ },
+};
+
+export const Outline: Story = {
+ args: {
+ ...Default.args,
+ variant: 'Outline',
+ },
+};
diff --git a/packages/dss-ui/stories/ButtonGroup.stories.tsx b/packages/dss-ui/stories/ButtonGroup.stories.tsx
new file mode 100644
index 0000000..d0d8fd6
--- /dev/null
+++ b/packages/dss-ui/stories/ButtonGroup.stories.tsx
@@ -0,0 +1,79 @@
+/**
+ * Button Group Stories
+ * @generated 2025-12-11T14:37:52.569372
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { ButtonGroup, type ButtonGroupProps } from '../src/atoms/ButtonGroup';
+
+const meta: Meta = {
+ title: '2. Atoms/ButtonGroup',
+ component: ButtonGroup,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated ButtonGroup component
+
+**Classification:** atom
+**Slots:** icon, label
+**Figma ID:** 784:82792`
+ }
+ }
+ },
+ argTypes: {
+ skin: {
+ control: 'select',
+ options: ['Ghost', 'Outlined'],
+ description: 'Skin variant',
+ },
+ size: {
+ control: 'select',
+ options: ['Large', 'Regular', 'Small'],
+ description: 'Size variant',
+ },
+ position: {
+ control: 'select',
+ options: ['Left', 'Middle', 'Right', 'Single'],
+ description: 'Position variant',
+ },
+ state: {
+ control: 'select',
+ options: ['Default', 'Disabled', 'Focus', 'Hover'],
+ description: 'State variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ skin: 'Ghost',
+ size: 'Large',
+ position: 'Left',
+ state: 'Default',
+ children: 'ButtonGroup'
+ },
+};
+
+export const SizeLarge: Story = {
+ args: {
+ ...Default.args,
+ size: 'Large',
+ },
+};
+
+export const SizeRegular: Story = {
+ args: {
+ ...Default.args,
+ size: 'Regular',
+ },
+};
+
+export const SizeSmall: Story = {
+ args: {
+ ...Default.args,
+ size: 'Small',
+ },
+};
diff --git a/packages/dss-ui/stories/ButtonGroupIconButton.stories.tsx b/packages/dss-ui/stories/ButtonGroupIconButton.stories.tsx
new file mode 100644
index 0000000..b984c68
--- /dev/null
+++ b/packages/dss-ui/stories/ButtonGroupIconButton.stories.tsx
@@ -0,0 +1,79 @@
+/**
+ * Button Group Icon Button Stories
+ * @generated 2025-12-11T14:37:52.574909
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { ButtonGroupIconButton, type ButtonGroupIconButtonProps } from '../src/atoms/ButtonGroupIconButton';
+
+const meta: Meta = {
+ title: '2. Atoms/ButtonGroupIconButton',
+ component: ButtonGroupIconButton,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated ButtonGroupIconButton component
+
+**Classification:** atom
+**Slots:** icon
+**Figma ID:** 784:87178`
+ }
+ }
+ },
+ argTypes: {
+ skin: {
+ control: 'select',
+ options: ['Ghost', 'Outlined'],
+ description: 'Skin variant',
+ },
+ size: {
+ control: 'select',
+ options: ['Default', 'Large', 'Small'],
+ description: 'Size variant',
+ },
+ position: {
+ control: 'select',
+ options: ['Left', 'Middle', 'Right', 'Single'],
+ description: 'Position variant',
+ },
+ state: {
+ control: 'select',
+ options: ['Default', 'Disabled', 'Focus', 'Hover'],
+ description: 'State variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ skin: 'Ghost',
+ size: 'Default',
+ position: 'Left',
+ state: 'Default',
+ children: 'ButtonGroupIconButton'
+ },
+};
+
+export const SizeDefault: Story = {
+ args: {
+ ...Default.args,
+ size: 'Default',
+ },
+};
+
+export const SizeLarge: Story = {
+ args: {
+ ...Default.args,
+ size: 'Large',
+ },
+};
+
+export const SizeSmall: Story = {
+ args: {
+ ...Default.args,
+ size: 'Small',
+ },
+};
diff --git a/packages/dss-ui/stories/Card.stories.tsx b/packages/dss-ui/stories/Card.stories.tsx
new file mode 100644
index 0000000..a42fe38
--- /dev/null
+++ b/packages/dss-ui/stories/Card.stories.tsx
@@ -0,0 +1,40 @@
+/**
+ * Card Stories
+ * @generated 2025-12-11T14:37:52.575656
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { Card, type CardProps } from '../src/atoms/Card';
+
+const meta: Meta = {
+ title: '3. Molecules/Card',
+ component: Card,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated Card component
+
+**Classification:** molecule
+**Slots:** None
+**Figma ID:** 179:29234`
+ }
+ }
+ },
+ argTypes: {
+ slotNo: {
+ control: 'select',
+ options: ['1 Slot', '2 Slots', '3 Slots'],
+ description: 'Slot No. variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ slotNo: '1 Slot',
+ children: 'Card'
+ },
+};
diff --git a/packages/dss-ui/stories/Carousel.stories.tsx b/packages/dss-ui/stories/Carousel.stories.tsx
new file mode 100644
index 0000000..2d14105
--- /dev/null
+++ b/packages/dss-ui/stories/Carousel.stories.tsx
@@ -0,0 +1,40 @@
+/**
+ * Carousel Stories
+ * @generated 2025-12-11T14:37:52.576178
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { Carousel, type CarouselProps } from '../src/atoms/Carousel';
+
+const meta: Meta = {
+ title: '3. Molecules/Carousel',
+ component: Carousel,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated Carousel component
+
+**Classification:** molecule
+**Slots:** icon
+**Figma ID:** 164:18293`
+ }
+ }
+ },
+ argTypes: {
+ slides: {
+ control: 'select',
+ options: ['1 Slide', '2 Slides', '3 Slides'],
+ description: 'Slides variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ slides: '1 Slide',
+ children: 'Carousel'
+ },
+};
diff --git a/packages/dss-ui/stories/CarouselWithImage.stories.tsx b/packages/dss-ui/stories/CarouselWithImage.stories.tsx
new file mode 100644
index 0000000..eee9871
--- /dev/null
+++ b/packages/dss-ui/stories/CarouselWithImage.stories.tsx
@@ -0,0 +1,40 @@
+/**
+ * Carousel with Image Stories
+ * @generated 2025-12-11T14:37:52.576550
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { CarouselWithImage, type CarouselWithImageProps } from '../src/atoms/CarouselWithImage';
+
+const meta: Meta = {
+ title: '3. Molecules/CarouselWithImage',
+ component: CarouselWithImage,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated CarouselWithImage component
+
+**Classification:** molecule
+**Slots:** icon
+**Figma ID:** 164:18350`
+ }
+ }
+ },
+ argTypes: {
+ type: {
+ control: 'select',
+ options: ['1 Slide', '2 Slides', '3 Slides'],
+ description: 'Type variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ type: '1 Slide',
+ children: 'CarouselWithImage'
+ },
+};
diff --git a/packages/dss-ui/stories/Checkbox.stories.tsx b/packages/dss-ui/stories/Checkbox.stories.tsx
new file mode 100644
index 0000000..47bf0f1
--- /dev/null
+++ b/packages/dss-ui/stories/Checkbox.stories.tsx
@@ -0,0 +1,46 @@
+/**
+ * Checkbox Stories
+ * @generated 2025-12-11T14:37:52.577154
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { Checkbox, type CheckboxProps } from '../src/atoms/Checkbox';
+
+const meta: Meta = {
+ title: '2. Atoms/Checkbox',
+ component: Checkbox,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated Checkbox component
+
+**Classification:** atom
+**Slots:** icon
+**Figma ID:** 16:1790`
+ }
+ }
+ },
+ argTypes: {
+ checked: {
+ control: 'select',
+ options: ['Indeterminate', 'false', 'true'],
+ description: 'Checked variant',
+ },
+ state: {
+ control: 'select',
+ options: ['Default', 'Disabled', 'Error', 'Error Focus', 'Focus'],
+ description: 'State variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ checked: 'Indeterminate',
+ state: 'Default',
+ children: 'Checkbox'
+ },
+};
diff --git a/packages/dss-ui/stories/CheckboxGroup.stories.tsx b/packages/dss-ui/stories/CheckboxGroup.stories.tsx
new file mode 100644
index 0000000..1845520
--- /dev/null
+++ b/packages/dss-ui/stories/CheckboxGroup.stories.tsx
@@ -0,0 +1,46 @@
+/**
+ * Checkbox Group Stories
+ * @generated 2025-12-11T14:37:52.577669
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { CheckboxGroup, type CheckboxGroupProps } from '../src/atoms/CheckboxGroup';
+
+const meta: Meta = {
+ title: '2. Atoms/CheckboxGroup',
+ component: CheckboxGroup,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated CheckboxGroup component
+
+**Classification:** atom
+**Slots:** label
+**Figma ID:** 19:6040`
+ }
+ }
+ },
+ argTypes: {
+ layout: {
+ control: 'select',
+ options: ['Block', 'Inline'],
+ description: 'Layout variant',
+ },
+ checked: {
+ control: 'select',
+ options: ['false', 'true'],
+ description: 'Checked variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ layout: 'Block',
+ checked: 'false',
+ children: 'CheckboxGroup'
+ },
+};
diff --git a/packages/dss-ui/stories/CommandItem.stories.tsx b/packages/dss-ui/stories/CommandItem.stories.tsx
new file mode 100644
index 0000000..fa3f327
--- /dev/null
+++ b/packages/dss-ui/stories/CommandItem.stories.tsx
@@ -0,0 +1,40 @@
+/**
+ * Command Item Stories
+ * @generated 2025-12-11T14:37:52.582710
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { CommandItem, type CommandItemProps } from '../src/atoms/CommandItem';
+
+const meta: Meta = {
+ title: '2. Atoms/CommandItem',
+ component: CommandItem,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated CommandItem component
+
+**Classification:** atom
+**Slots:** None
+**Figma ID:** 66:5600`
+ }
+ }
+ },
+ argTypes: {
+ state: {
+ control: 'select',
+ options: ['Active', 'Hover', 'Regular'],
+ description: 'State variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ state: 'Active',
+ children: 'CommandItem'
+ },
+};
diff --git a/packages/dss-ui/stories/DatePicker.stories.tsx b/packages/dss-ui/stories/DatePicker.stories.tsx
new file mode 100644
index 0000000..0df154b
--- /dev/null
+++ b/packages/dss-ui/stories/DatePicker.stories.tsx
@@ -0,0 +1,40 @@
+/**
+ * Date Picker Stories
+ * @generated 2025-12-11T14:37:52.590881
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { DatePicker, type DatePickerProps } from '../src/atoms/DatePicker';
+
+const meta: Meta = {
+ title: '3. Molecules/DatePicker',
+ component: DatePicker,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated DatePicker component
+
+**Classification:** molecule
+**Slots:** None
+**Figma ID:** 288:119954`
+ }
+ }
+ },
+ argTypes: {
+ months: {
+ control: 'select',
+ options: ['1 Month', '2 months', '3 months'],
+ description: 'Months variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ months: '1 Month',
+ children: 'DatePicker'
+ },
+};
diff --git a/packages/dss-ui/stories/DatePickerDay.stories.tsx b/packages/dss-ui/stories/DatePickerDay.stories.tsx
new file mode 100644
index 0000000..17f9556
--- /dev/null
+++ b/packages/dss-ui/stories/DatePickerDay.stories.tsx
@@ -0,0 +1,46 @@
+/**
+ * .Date Picker / Day Stories
+ * @generated 2025-12-11T14:37:52.592745
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { DatePickerDay, type DatePickerDayProps } from '../src/atoms/DatePickerDay';
+
+const meta: Meta = {
+ title: '3. Molecules/DatePickerDay',
+ component: DatePickerDay,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated DatePickerDay component
+
+**Classification:** molecule
+**Slots:** None
+**Figma ID:** 781:40922`
+ }
+ }
+ },
+ argTypes: {
+ position: {
+ control: 'select',
+ options: ['Left', 'Middle', 'Right', 'Single'],
+ description: 'Position variant',
+ },
+ state: {
+ control: 'select',
+ options: ['Active', 'Default', 'Disabled', 'Selected'],
+ description: 'State variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ position: 'Left',
+ state: 'Active',
+ children: 'DatePickerDay'
+ },
+};
diff --git a/packages/dss-ui/stories/DatePickerHeader.stories.tsx b/packages/dss-ui/stories/DatePickerHeader.stories.tsx
new file mode 100644
index 0000000..b4cfd11
--- /dev/null
+++ b/packages/dss-ui/stories/DatePickerHeader.stories.tsx
@@ -0,0 +1,40 @@
+/**
+ * .Date Picker / Header Stories
+ * @generated 2025-12-11T14:37:52.593775
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { DatePickerHeader, type DatePickerHeaderProps } from '../src/atoms/DatePickerHeader';
+
+const meta: Meta = {
+ title: '3. Molecules/DatePickerHeader',
+ component: DatePickerHeader,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated DatePickerHeader component
+
+**Classification:** molecule
+**Slots:** icon
+**Figma ID:** 264:29273`
+ }
+ }
+ },
+ argTypes: {
+ type: {
+ control: 'select',
+ options: ['1 Month', '2 Months', '3 Months', 'Only Month', 'Only Year', 'Year and Month'],
+ description: 'Type variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ type: '1 Month',
+ children: 'DatePickerHeader'
+ },
+};
diff --git a/packages/dss-ui/stories/DatePickerInput.stories.tsx b/packages/dss-ui/stories/DatePickerInput.stories.tsx
new file mode 100644
index 0000000..c2bb5ca
--- /dev/null
+++ b/packages/dss-ui/stories/DatePickerInput.stories.tsx
@@ -0,0 +1,40 @@
+/**
+ * Date Picker Input Stories
+ * @generated 2025-12-11T14:37:52.593275
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { DatePickerInput, type DatePickerInputProps } from '../src/atoms/DatePickerInput';
+
+const meta: Meta = {
+ title: '2. Atoms/DatePickerInput',
+ component: DatePickerInput,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated DatePickerInput component
+
+**Classification:** atom
+**Slots:** None
+**Figma ID:** 60:9340`
+ }
+ }
+ },
+ argTypes: {
+ state: {
+ control: 'select',
+ options: ['Focus', 'Placeholder', 'Value'],
+ description: 'State variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ state: 'Focus',
+ children: 'DatePickerInput'
+ },
+};
diff --git a/packages/dss-ui/stories/Dialog.stories.tsx b/packages/dss-ui/stories/Dialog.stories.tsx
new file mode 100644
index 0000000..c01abdd
--- /dev/null
+++ b/packages/dss-ui/stories/Dialog.stories.tsx
@@ -0,0 +1,40 @@
+/**
+ * Dialog Stories
+ * @generated 2025-12-11T14:37:52.594247
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { Dialog, type DialogProps } from '../src/atoms/Dialog';
+
+const meta: Meta = {
+ title: '3. Molecules/Dialog',
+ component: Dialog,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated Dialog component
+
+**Classification:** molecule
+**Slots:** icon
+**Figma ID:** 151:12298`
+ }
+ }
+ },
+ argTypes: {
+ type: {
+ control: 'select',
+ options: ['Desktop', 'Desktop Scrollable', 'Mobile', 'Mobile Full Screen Scrollable'],
+ description: 'Type variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ type: 'Desktop',
+ children: 'Dialog'
+ },
+};
diff --git a/packages/dss-ui/stories/DialogFooter.stories.tsx b/packages/dss-ui/stories/DialogFooter.stories.tsx
new file mode 100644
index 0000000..1742f8f
--- /dev/null
+++ b/packages/dss-ui/stories/DialogFooter.stories.tsx
@@ -0,0 +1,40 @@
+/**
+ * Dialog Footer Stories
+ * @generated 2025-12-11T14:37:52.595530
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { DialogFooter, type DialogFooterProps } from '../src/atoms/DialogFooter';
+
+const meta: Meta = {
+ title: '3. Molecules/DialogFooter',
+ component: DialogFooter,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated DialogFooter component
+
+**Classification:** molecule
+**Slots:** None
+**Figma ID:** 176:21284`
+ }
+ }
+ },
+ argTypes: {
+ type: {
+ control: 'select',
+ options: ['2 Buttons Right', '2 Full-width Buttons', 'Single Full-width Button'],
+ description: 'Type variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ type: '2 Buttons Right',
+ children: 'DialogFooter'
+ },
+};
diff --git a/packages/dss-ui/stories/DialogHeader.stories.tsx b/packages/dss-ui/stories/DialogHeader.stories.tsx
new file mode 100644
index 0000000..b2813fd
--- /dev/null
+++ b/packages/dss-ui/stories/DialogHeader.stories.tsx
@@ -0,0 +1,40 @@
+/**
+ * Dialog Header Stories
+ * @generated 2025-12-11T14:37:52.594886
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { DialogHeader, type DialogHeaderProps } from '../src/atoms/DialogHeader';
+
+const meta: Meta = {
+ title: '3. Molecules/DialogHeader',
+ component: DialogHeader,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated DialogHeader component
+
+**Classification:** molecule
+**Slots:** icon
+**Figma ID:** 176:22344`
+ }
+ }
+ },
+ argTypes: {
+ type: {
+ control: 'select',
+ options: ['Close Only', 'Header', 'Icon Button Close'],
+ description: 'Type variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ type: 'Close Only',
+ children: 'DialogHeader'
+ },
+};
diff --git a/packages/dss-ui/stories/HorizontalField.stories.tsx b/packages/dss-ui/stories/HorizontalField.stories.tsx
new file mode 100644
index 0000000..c5ae6c3
--- /dev/null
+++ b/packages/dss-ui/stories/HorizontalField.stories.tsx
@@ -0,0 +1,40 @@
+/**
+ * Horizontal Field Stories
+ * @generated 2025-12-11T14:37:52.596505
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { HorizontalField, type HorizontalFieldProps } from '../src/atoms/HorizontalField';
+
+const meta: Meta = {
+ title: '3. Molecules/HorizontalField',
+ component: HorizontalField,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated HorizontalField component
+
+**Classification:** molecule
+**Slots:** label
+**Figma ID:** 120:13775`
+ }
+ }
+ },
+ argTypes: {
+ type: {
+ control: 'select',
+ options: ['Checkbox', 'Radio', 'Select', 'Slider', 'Text Value', 'Textarea'],
+ description: 'Type variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ type: 'Checkbox',
+ children: 'HorizontalField'
+ },
+};
diff --git a/packages/dss-ui/stories/IconButton.stories.tsx b/packages/dss-ui/stories/IconButton.stories.tsx
new file mode 100644
index 0000000..1f622b3
--- /dev/null
+++ b/packages/dss-ui/stories/IconButton.stories.tsx
@@ -0,0 +1,107 @@
+/**
+ * Icon Button Stories
+ * @generated 2025-12-11T14:37:52.598080
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { IconButton, type IconButtonProps } from '../src/atoms/IconButton';
+
+const meta: Meta = {
+ title: '2. Atoms/IconButton',
+ component: IconButton,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated IconButton component
+
+**Classification:** atom
+**Slots:** icon
+**Figma ID:** 9:775`
+ }
+ }
+ },
+ argTypes: {
+ roundness: {
+ control: 'select',
+ options: ['Default', 'Round'],
+ description: 'Roundness variant',
+ },
+ variant: {
+ control: 'select',
+ options: ['Destructive', 'Ghost', 'Ghost Muted', 'Outline', 'Primary', 'Secondary'],
+ description: 'Variant variant',
+ },
+ size: {
+ control: 'select',
+ options: ['Large', 'Mini', 'Regular', 'Small'],
+ description: 'Size variant',
+ },
+ state: {
+ control: 'select',
+ options: ['Default', 'Disabled', 'Focus', 'Hover & Active'],
+ description: 'State variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ roundness: 'Default',
+ variant: 'Destructive',
+ size: 'Large',
+ state: 'Default',
+ children: 'IconButton'
+ },
+};
+
+export const SizeLarge: Story = {
+ args: {
+ ...Default.args,
+ size: 'Large',
+ },
+};
+
+export const SizeMini: Story = {
+ args: {
+ ...Default.args,
+ size: 'Mini',
+ },
+};
+
+export const SizeRegular: Story = {
+ args: {
+ ...Default.args,
+ size: 'Regular',
+ },
+};
+
+export const Destructive: Story = {
+ args: {
+ ...Default.args,
+ variant: 'Destructive',
+ },
+};
+
+export const Ghost: Story = {
+ args: {
+ ...Default.args,
+ variant: 'Ghost',
+ },
+};
+
+export const GhostMuted: Story = {
+ args: {
+ ...Default.args,
+ variant: 'Ghost Muted',
+ },
+};
+
+export const Outline: Story = {
+ args: {
+ ...Default.args,
+ variant: 'Outline',
+ },
+};
diff --git a/packages/dss-ui/stories/Input.stories.tsx b/packages/dss-ui/stories/Input.stories.tsx
new file mode 100644
index 0000000..4c1918d
--- /dev/null
+++ b/packages/dss-ui/stories/Input.stories.tsx
@@ -0,0 +1,73 @@
+/**
+ * Input Stories
+ * @generated 2025-12-11T14:37:52.598773
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { Input, type InputProps } from '../src/atoms/Input';
+
+const meta: Meta = {
+ title: '2. Atoms/Input',
+ component: Input,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated Input component
+
+**Classification:** atom
+**Slots:** None
+**Figma ID:** 16:1738`
+ }
+ }
+ },
+ argTypes: {
+ roundness: {
+ control: 'select',
+ options: ['Default', 'Round'],
+ description: 'Roundness variant',
+ },
+ size: {
+ control: 'select',
+ options: ['Large', 'Mini', 'Regular', 'Small'],
+ description: 'Size variant',
+ },
+ state: {
+ control: 'select',
+ options: ['Disabled', 'Empty', 'Error', 'Error Focus', 'Focus', 'Placeholder', 'Value'],
+ description: 'State variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ roundness: 'Default',
+ size: 'Large',
+ state: 'Disabled',
+ children: 'Input'
+ },
+};
+
+export const SizeLarge: Story = {
+ args: {
+ ...Default.args,
+ size: 'Large',
+ },
+};
+
+export const SizeMini: Story = {
+ args: {
+ ...Default.args,
+ size: 'Mini',
+ },
+};
+
+export const SizeRegular: Story = {
+ args: {
+ ...Default.args,
+ size: 'Regular',
+ },
+};
diff --git a/packages/dss-ui/stories/InputFile.stories.tsx b/packages/dss-ui/stories/InputFile.stories.tsx
new file mode 100644
index 0000000..4035f4d
--- /dev/null
+++ b/packages/dss-ui/stories/InputFile.stories.tsx
@@ -0,0 +1,79 @@
+/**
+ * Input File Stories
+ * @generated 2025-12-11T14:37:52.604997
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { InputFile, type InputFileProps } from '../src/atoms/InputFile';
+
+const meta: Meta = {
+ title: '2. Atoms/InputFile',
+ component: InputFile,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated InputFile component
+
+**Classification:** atom
+**Slots:** None
+**Figma ID:** 66:5981`
+ }
+ }
+ },
+ argTypes: {
+ roundness: {
+ control: 'select',
+ options: ['Default', 'Round'],
+ description: 'Roundness variant',
+ },
+ fileChosen: {
+ control: 'select',
+ options: ['false', 'true'],
+ description: 'File Chosen variant',
+ },
+ size: {
+ control: 'select',
+ options: ['Large', 'Mini', 'Regular', 'Small'],
+ description: 'Size variant',
+ },
+ state: {
+ control: 'select',
+ options: ['Default', 'Error', 'Error Focus', 'Focus'],
+ description: 'State variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ roundness: 'Default',
+ fileChosen: 'false',
+ size: 'Large',
+ state: 'Default',
+ children: 'InputFile'
+ },
+};
+
+export const SizeLarge: Story = {
+ args: {
+ ...Default.args,
+ size: 'Large',
+ },
+};
+
+export const SizeMini: Story = {
+ args: {
+ ...Default.args,
+ size: 'Mini',
+ },
+};
+
+export const SizeRegular: Story = {
+ args: {
+ ...Default.args,
+ size: 'Regular',
+ },
+};
diff --git a/packages/dss-ui/stories/InputOtp.stories.tsx b/packages/dss-ui/stories/InputOtp.stories.tsx
new file mode 100644
index 0000000..8e2d09a
--- /dev/null
+++ b/packages/dss-ui/stories/InputOtp.stories.tsx
@@ -0,0 +1,73 @@
+/**
+ * Input OTP Stories
+ * @generated 2025-12-11T14:37:52.607301
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { InputOtp, type InputOtpProps } from '../src/atoms/InputOtp';
+
+const meta: Meta = {
+ title: '2. Atoms/InputOtp',
+ component: InputOtp,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated InputOtp component
+
+**Classification:** atom
+**Slots:** None
+**Figma ID:** 140:11468`
+ }
+ }
+ },
+ argTypes: {
+ size: {
+ control: 'select',
+ options: ['Default', 'Large', 'Mini', 'Small'],
+ description: 'Size variant',
+ },
+ position: {
+ control: 'select',
+ options: ['Left', 'Middle', 'Right'],
+ description: 'Position variant',
+ },
+ state: {
+ control: 'select',
+ options: ['Disabled', 'Empty', 'Error', 'Error Focus', 'Focus', 'Placeholder', 'Value'],
+ description: 'State variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ size: 'Default',
+ position: 'Left',
+ state: 'Disabled',
+ children: 'InputOtp'
+ },
+};
+
+export const SizeDefault: Story = {
+ args: {
+ ...Default.args,
+ size: 'Default',
+ },
+};
+
+export const SizeLarge: Story = {
+ args: {
+ ...Default.args,
+ size: 'Large',
+ },
+};
+
+export const SizeMini: Story = {
+ args: {
+ ...Default.args,
+ size: 'Mini',
+ },
+};
diff --git a/packages/dss-ui/stories/Label.stories.tsx b/packages/dss-ui/stories/Label.stories.tsx
new file mode 100644
index 0000000..60efdc1
--- /dev/null
+++ b/packages/dss-ui/stories/Label.stories.tsx
@@ -0,0 +1,40 @@
+/**
+ * Label Stories
+ * @generated 2025-12-11T14:37:52.608925
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { Label, type LabelProps } from '../src/atoms/Label';
+
+const meta: Meta = {
+ title: '2. Atoms/Label',
+ component: Label,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated Label component
+
+**Classification:** atom
+**Slots:** label
+**Figma ID:** 103:9453`
+ }
+ }
+ },
+ argTypes: {
+ layout: {
+ control: 'select',
+ options: ['Block', 'Inline'],
+ description: 'Layout variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ layout: 'Block',
+ children: 'Label'
+ },
+};
diff --git a/packages/dss-ui/stories/LinkButton.stories.tsx b/packages/dss-ui/stories/LinkButton.stories.tsx
new file mode 100644
index 0000000..0331459
--- /dev/null
+++ b/packages/dss-ui/stories/LinkButton.stories.tsx
@@ -0,0 +1,73 @@
+/**
+ * Link Button Stories
+ * @generated 2025-12-11T14:37:52.610405
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { LinkButton, type LinkButtonProps } from '../src/atoms/LinkButton';
+
+const meta: Meta = {
+ title: '2. Atoms/LinkButton',
+ component: LinkButton,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated LinkButton component
+
+**Classification:** atom
+**Slots:** icon, label
+**Figma ID:** 11:2014`
+ }
+ }
+ },
+ argTypes: {
+ roundness: {
+ control: 'select',
+ options: ['Default', 'Round'],
+ description: 'Roundness variant',
+ },
+ size: {
+ control: 'select',
+ options: ['Default', 'Large', 'Mini', 'Small'],
+ description: 'Size variant',
+ },
+ state: {
+ control: 'select',
+ options: ['Default', 'Focus', 'Hover & Active'],
+ description: 'State variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ roundness: 'Default',
+ size: 'Default',
+ state: 'Default',
+ children: 'LinkButton'
+ },
+};
+
+export const SizeDefault: Story = {
+ args: {
+ ...Default.args,
+ size: 'Default',
+ },
+};
+
+export const SizeLarge: Story = {
+ args: {
+ ...Default.args,
+ size: 'Large',
+ },
+};
+
+export const SizeMini: Story = {
+ args: {
+ ...Default.args,
+ size: 'Mini',
+ },
+};
diff --git a/packages/dss-ui/stories/LoadingButton.stories.tsx b/packages/dss-ui/stories/LoadingButton.stories.tsx
new file mode 100644
index 0000000..f013ad7
--- /dev/null
+++ b/packages/dss-ui/stories/LoadingButton.stories.tsx
@@ -0,0 +1,73 @@
+/**
+ * Loading Button Stories
+ * @generated 2025-12-11T14:37:52.611264
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { LoadingButton, type LoadingButtonProps } from '../src/atoms/LoadingButton';
+
+const meta: Meta = {
+ title: '2. Atoms/LoadingButton',
+ component: LoadingButton,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated LoadingButton component
+
+**Classification:** atom
+**Slots:** label
+**Figma ID:** 11:1126`
+ }
+ }
+ },
+ argTypes: {
+ roundness: {
+ control: 'select',
+ options: ['Default', 'Round'],
+ description: 'Roundness variant',
+ },
+ size: {
+ control: 'select',
+ options: ['Large', 'Mini', 'Regular', 'Small'],
+ description: 'Size variant',
+ },
+ state: {
+ control: 'select',
+ options: ['Default', 'Focus', 'Hover & Active'],
+ description: 'State variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ roundness: 'Default',
+ size: 'Large',
+ state: 'Default',
+ children: 'LoadingButton'
+ },
+};
+
+export const SizeLarge: Story = {
+ args: {
+ ...Default.args,
+ size: 'Large',
+ },
+};
+
+export const SizeMini: Story = {
+ args: {
+ ...Default.args,
+ size: 'Mini',
+ },
+};
+
+export const SizeRegular: Story = {
+ args: {
+ ...Default.args,
+ size: 'Regular',
+ },
+};
diff --git a/packages/dss-ui/stories/Marker.stories.tsx b/packages/dss-ui/stories/Marker.stories.tsx
new file mode 100644
index 0000000..52a48ae
--- /dev/null
+++ b/packages/dss-ui/stories/Marker.stories.tsx
@@ -0,0 +1,40 @@
+/**
+ * .Marker Stories
+ * @generated 2025-12-11T14:37:52.637414
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { Marker, type MarkerProps } from '../src/atoms/Marker';
+
+const meta: Meta = {
+ title: '2. Atoms/Marker',
+ component: Marker,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated Marker component
+
+**Classification:** atom
+**Slots:** None
+**Figma ID:** 162:17957`
+ }
+ }
+ },
+ argTypes: {
+ state: {
+ control: 'select',
+ options: ['Focus', 'Regular'],
+ description: 'State variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ state: 'Focus',
+ children: 'Marker'
+ },
+};
diff --git a/packages/dss-ui/stories/Menu.stories.tsx b/packages/dss-ui/stories/Menu.stories.tsx
new file mode 100644
index 0000000..146be36
--- /dev/null
+++ b/packages/dss-ui/stories/Menu.stories.tsx
@@ -0,0 +1,40 @@
+/**
+ * Menu Stories
+ * @generated 2025-12-11T14:37:52.623806
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { Menu, type MenuProps } from '../src/atoms/Menu';
+
+const meta: Meta = {
+ title: '3. Molecules/Menu',
+ component: Menu,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated Menu component
+
+**Classification:** molecule
+**Slots:** None
+**Figma ID:** 176:27848`
+ }
+ }
+ },
+ argTypes: {
+ spacing: {
+ control: 'select',
+ options: ['16px', '24px', '2px', '8px', 'None'],
+ description: 'Spacing variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ spacing: '16px',
+ children: 'Menu'
+ },
+};
diff --git a/packages/dss-ui/stories/MenuItem.stories.tsx b/packages/dss-ui/stories/MenuItem.stories.tsx
new file mode 100644
index 0000000..4006928
--- /dev/null
+++ b/packages/dss-ui/stories/MenuItem.stories.tsx
@@ -0,0 +1,66 @@
+/**
+ * Menu Item Stories
+ * @generated 2025-12-11T14:37:52.624404
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { MenuItem, type MenuItemProps } from '../src/atoms/MenuItem';
+
+const meta: Meta = {
+ title: '2. Atoms/MenuItem',
+ component: MenuItem,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated MenuItem component
+
+**Classification:** atom
+**Slots:** None
+**Figma ID:** 18:1010`
+ }
+ }
+ },
+ argTypes: {
+ size: {
+ control: 'select',
+ options: ['Large', 'Regular'],
+ description: 'Size variant',
+ },
+ type: {
+ control: 'select',
+ options: ['Default', 'Destructive'],
+ description: 'Type variant',
+ },
+ state: {
+ control: 'select',
+ options: ['Active', 'Default', 'Disabled', 'Focus', 'Hover', 'Selected'],
+ description: 'State variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ size: 'Large',
+ type: 'Default',
+ state: 'Active',
+ children: 'MenuItem'
+ },
+};
+
+export const SizeLarge: Story = {
+ args: {
+ ...Default.args,
+ size: 'Large',
+ },
+};
+
+export const SizeRegular: Story = {
+ args: {
+ ...Default.args,
+ size: 'Regular',
+ },
+};
diff --git a/packages/dss-ui/stories/Pagination.stories.tsx b/packages/dss-ui/stories/Pagination.stories.tsx
new file mode 100644
index 0000000..7df1459
--- /dev/null
+++ b/packages/dss-ui/stories/Pagination.stories.tsx
@@ -0,0 +1,46 @@
+/**
+ * Pagination Stories
+ * @generated 2025-12-11T14:37:52.613327
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { Pagination, type PaginationProps } from '../src/atoms/Pagination';
+
+const meta: Meta = {
+ title: '3. Molecules/Pagination',
+ component: Pagination,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated Pagination component
+
+**Classification:** molecule
+**Slots:** None
+**Figma ID:** 133:11358`
+ }
+ }
+ },
+ argTypes: {
+ type: {
+ control: 'select',
+ options: ['Next', 'Previous'],
+ description: 'Type variant',
+ },
+ state: {
+ control: 'select',
+ options: ['Disabled', 'Regular'],
+ description: 'State variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ type: 'Next',
+ state: 'Disabled',
+ children: 'Pagination'
+ },
+};
diff --git a/packages/dss-ui/stories/PaginationButton.stories.tsx b/packages/dss-ui/stories/PaginationButton.stories.tsx
new file mode 100644
index 0000000..62d53aa
--- /dev/null
+++ b/packages/dss-ui/stories/PaginationButton.stories.tsx
@@ -0,0 +1,40 @@
+/**
+ * Pagination Button Stories
+ * @generated 2025-12-11T14:37:52.614238
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { PaginationButton, type PaginationButtonProps } from '../src/atoms/PaginationButton';
+
+const meta: Meta = {
+ title: '2. Atoms/PaginationButton',
+ component: PaginationButton,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated PaginationButton component
+
+**Classification:** atom
+**Slots:** None
+**Figma ID:** 133:12195`
+ }
+ }
+ },
+ argTypes: {
+ active: {
+ control: 'select',
+ options: ['false', 'true'],
+ description: 'Active variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ active: 'false',
+ children: 'PaginationButton'
+ },
+};
diff --git a/packages/dss-ui/stories/Progress.stories.tsx b/packages/dss-ui/stories/Progress.stories.tsx
new file mode 100644
index 0000000..bc74b30
--- /dev/null
+++ b/packages/dss-ui/stories/Progress.stories.tsx
@@ -0,0 +1,40 @@
+/**
+ * Progress Stories
+ * @generated 2025-12-11T14:37:52.614683
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { Progress, type ProgressProps } from '../src/atoms/Progress';
+
+const meta: Meta = {
+ title: '2. Atoms/Progress',
+ component: Progress,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated Progress component
+
+**Classification:** atom
+**Slots:** None
+**Figma ID:** 438:64981`
+ }
+ }
+ },
+ argTypes: {
+ progress: {
+ control: 'select',
+ options: ['0', '10', '100', '25', '33', '50', '66', '75', '90'],
+ description: 'Progress variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ progress: '0',
+ children: 'Progress'
+ },
+};
diff --git a/packages/dss-ui/stories/Radio.stories.tsx b/packages/dss-ui/stories/Radio.stories.tsx
new file mode 100644
index 0000000..2a4cfb7
--- /dev/null
+++ b/packages/dss-ui/stories/Radio.stories.tsx
@@ -0,0 +1,46 @@
+/**
+ * Radio Stories
+ * @generated 2025-12-11T14:37:52.615139
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { Radio, type RadioProps } from '../src/atoms/Radio';
+
+const meta: Meta = {
+ title: '2. Atoms/Radio',
+ component: Radio,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated Radio component
+
+**Classification:** atom
+**Slots:** None
+**Figma ID:** 16:1796`
+ }
+ }
+ },
+ argTypes: {
+ checked: {
+ control: 'select',
+ options: ['false', 'true'],
+ description: 'Checked variant',
+ },
+ state: {
+ control: 'select',
+ options: ['Default', 'Disabled', 'Error', 'Error Focus', 'Focus'],
+ description: 'State variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ checked: 'false',
+ state: 'Default',
+ children: 'Radio'
+ },
+};
diff --git a/packages/dss-ui/stories/RadioGroup.stories.tsx b/packages/dss-ui/stories/RadioGroup.stories.tsx
new file mode 100644
index 0000000..0e93364
--- /dev/null
+++ b/packages/dss-ui/stories/RadioGroup.stories.tsx
@@ -0,0 +1,46 @@
+/**
+ * Radio Group Stories
+ * @generated 2025-12-11T14:37:52.615573
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { RadioGroup, type RadioGroupProps } from '../src/atoms/RadioGroup';
+
+const meta: Meta = {
+ title: '2. Atoms/RadioGroup',
+ component: RadioGroup,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated RadioGroup component
+
+**Classification:** atom
+**Slots:** label
+**Figma ID:** 19:6048`
+ }
+ }
+ },
+ argTypes: {
+ checked: {
+ control: 'select',
+ options: ['false', 'true'],
+ description: 'Checked variant',
+ },
+ layout: {
+ control: 'select',
+ options: ['Block', 'Inline'],
+ description: 'Layout variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ checked: 'false',
+ layout: 'Block',
+ children: 'RadioGroup'
+ },
+};
diff --git a/packages/dss-ui/stories/Resizable.stories.tsx b/packages/dss-ui/stories/Resizable.stories.tsx
new file mode 100644
index 0000000..92c90bb
--- /dev/null
+++ b/packages/dss-ui/stories/Resizable.stories.tsx
@@ -0,0 +1,40 @@
+/**
+ * Resizable Stories
+ * @generated 2025-12-11T14:37:52.621735
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { Resizable, type ResizableProps } from '../src/atoms/Resizable';
+
+const meta: Meta = {
+ title: '3. Molecules/Resizable',
+ component: Resizable,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated Resizable component
+
+**Classification:** molecule
+**Slots:** None
+**Figma ID:** 222:27733`
+ }
+ }
+ },
+ argTypes: {
+ orientation: {
+ control: 'select',
+ options: ['Horizontal', 'Vertical'],
+ description: 'Orientation variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ orientation: 'Horizontal',
+ children: 'Resizable'
+ },
+};
diff --git a/packages/dss-ui/stories/RichCheckboxGroup.stories.tsx b/packages/dss-ui/stories/RichCheckboxGroup.stories.tsx
new file mode 100644
index 0000000..1417275
--- /dev/null
+++ b/packages/dss-ui/stories/RichCheckboxGroup.stories.tsx
@@ -0,0 +1,46 @@
+/**
+ * Rich Checkbox Group Stories
+ * @generated 2025-12-11T14:37:52.582185
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { RichCheckboxGroup, type RichCheckboxGroupProps } from '../src/atoms/RichCheckboxGroup';
+
+const meta: Meta = {
+ title: '2. Atoms/RichCheckboxGroup',
+ component: RichCheckboxGroup,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated RichCheckboxGroup component
+
+**Classification:** atom
+**Slots:** None
+**Figma ID:** 19:6351`
+ }
+ }
+ },
+ argTypes: {
+ checked: {
+ control: 'select',
+ options: ['false', 'true'],
+ description: 'Checked variant',
+ },
+ flipped: {
+ control: 'select',
+ options: ['false', 'true'],
+ description: 'Flipped variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ checked: 'false',
+ flipped: 'false',
+ children: 'RichCheckboxGroup'
+ },
+};
diff --git a/packages/dss-ui/stories/RichRadioGroup.stories.tsx b/packages/dss-ui/stories/RichRadioGroup.stories.tsx
new file mode 100644
index 0000000..668bc78
--- /dev/null
+++ b/packages/dss-ui/stories/RichRadioGroup.stories.tsx
@@ -0,0 +1,46 @@
+/**
+ * Rich Radio Group Stories
+ * @generated 2025-12-11T14:37:52.619554
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { RichRadioGroup, type RichRadioGroupProps } from '../src/atoms/RichRadioGroup';
+
+const meta: Meta = {
+ title: '2. Atoms/RichRadioGroup',
+ component: RichRadioGroup,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated RichRadioGroup component
+
+**Classification:** atom
+**Slots:** None
+**Figma ID:** 19:5987`
+ }
+ }
+ },
+ argTypes: {
+ checked: {
+ control: 'select',
+ options: ['false', 'true'],
+ description: 'Checked variant',
+ },
+ flipped: {
+ control: 'select',
+ options: ['false', 'true'],
+ description: 'Flipped variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ checked: 'false',
+ flipped: 'false',
+ children: 'RichRadioGroup'
+ },
+};
diff --git a/packages/dss-ui/stories/RichSwitchGroup.stories.tsx b/packages/dss-ui/stories/RichSwitchGroup.stories.tsx
new file mode 100644
index 0000000..034748c
--- /dev/null
+++ b/packages/dss-ui/stories/RichSwitchGroup.stories.tsx
@@ -0,0 +1,46 @@
+/**
+ * Rich Switch Group Stories
+ * @generated 2025-12-11T14:37:52.647298
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { RichSwitchGroup, type RichSwitchGroupProps } from '../src/atoms/RichSwitchGroup';
+
+const meta: Meta = {
+ title: '2. Atoms/RichSwitchGroup',
+ component: RichSwitchGroup,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated RichSwitchGroup component
+
+**Classification:** atom
+**Slots:** None
+**Figma ID:** 19:6374`
+ }
+ }
+ },
+ argTypes: {
+ checked: {
+ control: 'select',
+ options: ['false', 'true'],
+ description: 'Checked variant',
+ },
+ flipped: {
+ control: 'select',
+ options: ['false', 'true'],
+ description: 'Flipped variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ checked: 'false',
+ flipped: 'false',
+ children: 'RichSwitchGroup'
+ },
+};
diff --git a/packages/dss-ui/stories/Scrollbar.stories.tsx b/packages/dss-ui/stories/Scrollbar.stories.tsx
new file mode 100644
index 0000000..fe5aae2
--- /dev/null
+++ b/packages/dss-ui/stories/Scrollbar.stories.tsx
@@ -0,0 +1,40 @@
+/**
+ * Scrollbar Stories
+ * @generated 2025-12-11T14:37:52.622244
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { Scrollbar, type ScrollbarProps } from '../src/atoms/Scrollbar';
+
+const meta: Meta = {
+ title: '2. Atoms/Scrollbar',
+ component: Scrollbar,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated Scrollbar component
+
+**Classification:** atom
+**Slots:** None
+**Figma ID:** 164:18669`
+ }
+ }
+ },
+ argTypes: {
+ type: {
+ control: 'select',
+ options: ['Horizontal', 'Vertical'],
+ description: 'Type variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ type: 'Horizontal',
+ children: 'Scrollbar'
+ },
+};
diff --git a/packages/dss-ui/stories/SelectCombobox.stories.tsx b/packages/dss-ui/stories/SelectCombobox.stories.tsx
new file mode 100644
index 0000000..fa47621
--- /dev/null
+++ b/packages/dss-ui/stories/SelectCombobox.stories.tsx
@@ -0,0 +1,73 @@
+/**
+ * Select & Combobox Stories
+ * @generated 2025-12-11T14:37:52.622921
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { SelectCombobox, type SelectComboboxProps } from '../src/atoms/SelectCombobox';
+
+const meta: Meta = {
+ title: '3. Molecules/SelectCombobox',
+ component: SelectCombobox,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated SelectCombobox component
+
+**Classification:** molecule
+**Slots:** None
+**Figma ID:** 16:1732`
+ }
+ }
+ },
+ argTypes: {
+ size: {
+ control: 'select',
+ options: ['Large', 'Mini', 'Regular', 'Small'],
+ description: 'Size variant',
+ },
+ state: {
+ control: 'select',
+ options: ['Default', 'Disabled', 'Error', 'Focus', 'Placeholder'],
+ description: 'State variant',
+ },
+ lines: {
+ control: 'select',
+ options: ['1 Line', '2 Lines'],
+ description: 'Lines variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ size: 'Large',
+ state: 'Default',
+ lines: '1 Line',
+ children: 'SelectCombobox'
+ },
+};
+
+export const SizeLarge: Story = {
+ args: {
+ ...Default.args,
+ size: 'Large',
+ },
+};
+
+export const SizeMini: Story = {
+ args: {
+ ...Default.args,
+ size: 'Mini',
+ },
+};
+
+export const SizeRegular: Story = {
+ args: {
+ ...Default.args,
+ size: 'Regular',
+ },
+};
diff --git a/packages/dss-ui/stories/SelectComboboxRightDecoration.stories.tsx b/packages/dss-ui/stories/SelectComboboxRightDecoration.stories.tsx
new file mode 100644
index 0000000..c08a628
--- /dev/null
+++ b/packages/dss-ui/stories/SelectComboboxRightDecoration.stories.tsx
@@ -0,0 +1,40 @@
+/**
+ * .Select & Combobox Right Decoration Stories
+ * @generated 2025-12-11T14:37:52.623360
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { SelectComboboxRightDecoration, type SelectComboboxRightDecorationProps } from '../src/atoms/SelectComboboxRightDecoration';
+
+const meta: Meta = {
+ title: '3. Molecules/SelectComboboxRightDecoration',
+ component: SelectComboboxRightDecoration,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated SelectComboboxRightDecoration component
+
+**Classification:** molecule
+**Slots:** icon
+**Figma ID:** 673:40340`
+ }
+ }
+ },
+ argTypes: {
+ type: {
+ control: 'select',
+ options: ['Combobox', 'Select'],
+ description: 'Type variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ type: 'Combobox',
+ children: 'SelectComboboxRightDecoration'
+ },
+};
diff --git a/packages/dss-ui/stories/SelectLeftDecoration.stories.tsx b/packages/dss-ui/stories/SelectLeftDecoration.stories.tsx
new file mode 100644
index 0000000..6651ee2
--- /dev/null
+++ b/packages/dss-ui/stories/SelectLeftDecoration.stories.tsx
@@ -0,0 +1,60 @@
+/**
+ * .Select Left Decoration Stories
+ * @generated 2025-12-11T14:37:52.625859
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { SelectLeftDecoration, type SelectLeftDecorationProps } from '../src/atoms/SelectLeftDecoration';
+
+const meta: Meta = {
+ title: '3. Molecules/SelectLeftDecoration',
+ component: SelectLeftDecoration,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated SelectLeftDecoration component
+
+**Classification:** molecule
+**Slots:** None
+**Figma ID:** 18:1373`
+ }
+ }
+ },
+ argTypes: {
+ type: {
+ control: 'select',
+ options: ['Avatar', 'Blank', 'Checkbox', 'Deco Icon Outline', 'Deco Icon Primary', 'Icon', 'Icon muted', 'Radio', 'Text', 'Text Muted'],
+ description: 'Type variant',
+ },
+ size: {
+ control: 'select',
+ options: ['Default', 'Large'],
+ description: 'Size variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ type: 'Avatar',
+ size: 'Default',
+ children: 'SelectLeftDecoration'
+ },
+};
+
+export const SizeDefault: Story = {
+ args: {
+ ...Default.args,
+ size: 'Default',
+ },
+};
+
+export const SizeLarge: Story = {
+ args: {
+ ...Default.args,
+ size: 'Large',
+ },
+};
diff --git a/packages/dss-ui/stories/SelectMenuGroupLabel.stories.tsx b/packages/dss-ui/stories/SelectMenuGroupLabel.stories.tsx
new file mode 100644
index 0000000..b01df9c
--- /dev/null
+++ b/packages/dss-ui/stories/SelectMenuGroupLabel.stories.tsx
@@ -0,0 +1,46 @@
+/**
+ * Select Menu Group Label Stories
+ * @generated 2025-12-11T14:37:52.624900
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { SelectMenuGroupLabel, type SelectMenuGroupLabelProps } from '../src/atoms/SelectMenuGroupLabel';
+
+const meta: Meta = {
+ title: '2. Atoms/SelectMenuGroupLabel',
+ component: SelectMenuGroupLabel,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated SelectMenuGroupLabel component
+
+**Classification:** atom
+**Slots:** label
+**Figma ID:** 80:10189`
+ }
+ }
+ },
+ argTypes: {
+ type: {
+ control: 'select',
+ options: ['Regular', 'Small'],
+ description: 'Type variant',
+ },
+ indented: {
+ control: 'select',
+ options: ['false', 'true'],
+ description: 'Indented variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ type: 'Regular',
+ indented: 'false',
+ children: 'SelectMenuGroupLabel'
+ },
+};
diff --git a/packages/dss-ui/stories/SelectMenuOverflow.stories.tsx b/packages/dss-ui/stories/SelectMenuOverflow.stories.tsx
new file mode 100644
index 0000000..e04916c
--- /dev/null
+++ b/packages/dss-ui/stories/SelectMenuOverflow.stories.tsx
@@ -0,0 +1,40 @@
+/**
+ * Select Menu Overflow Stories
+ * @generated 2025-12-11T14:37:52.625371
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { SelectMenuOverflow, type SelectMenuOverflowProps } from '../src/atoms/SelectMenuOverflow';
+
+const meta: Meta = {
+ title: '3. Molecules/SelectMenuOverflow',
+ component: SelectMenuOverflow,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated SelectMenuOverflow component
+
+**Classification:** molecule
+**Slots:** icon
+**Figma ID:** 28:6842`
+ }
+ }
+ },
+ argTypes: {
+ scrollDirection: {
+ control: 'select',
+ options: ['Scroll Down', 'Scroll Up'],
+ description: 'Scroll Direction variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ scrollDirection: 'Scroll Down',
+ children: 'SelectMenuOverflow'
+ },
+};
diff --git a/packages/dss-ui/stories/Separator.stories.tsx b/packages/dss-ui/stories/Separator.stories.tsx
new file mode 100644
index 0000000..64ca1b5
--- /dev/null
+++ b/packages/dss-ui/stories/Separator.stories.tsx
@@ -0,0 +1,46 @@
+/**
+ * Separator Stories
+ * @generated 2025-12-11T14:37:52.627851
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { Separator, type SeparatorProps } from '../src/atoms/Separator';
+
+const meta: Meta = {
+ title: '2. Atoms/Separator',
+ component: Separator,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated Separator component
+
+**Classification:** atom
+**Slots:** None
+**Figma ID:** 176:26202`
+ }
+ }
+ },
+ argTypes: {
+ spacing: {
+ control: 'select',
+ options: ['None', 'Regular', 'Spacious'],
+ description: 'Spacing variant',
+ },
+ direction: {
+ control: 'select',
+ options: ['Default', 'Vertical'],
+ description: 'Direction variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ spacing: 'None',
+ direction: 'Default',
+ children: 'Separator'
+ },
+};
diff --git a/packages/dss-ui/stories/Sheet.stories.tsx b/packages/dss-ui/stories/Sheet.stories.tsx
new file mode 100644
index 0000000..15d29ad
--- /dev/null
+++ b/packages/dss-ui/stories/Sheet.stories.tsx
@@ -0,0 +1,40 @@
+/**
+ * Sheet Stories
+ * @generated 2025-12-11T14:37:52.628321
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { Sheet, type SheetProps } from '../src/atoms/Sheet';
+
+const meta: Meta = {
+ title: '3. Molecules/Sheet',
+ component: Sheet,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated Sheet component
+
+**Classification:** molecule
+**Slots:** None
+**Figma ID:** 301:243831`
+ }
+ }
+ },
+ argTypes: {
+ scrollable: {
+ control: 'select',
+ options: ['false', 'true'],
+ description: 'Scrollable variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ scrollable: 'false',
+ children: 'Sheet'
+ },
+};
diff --git a/packages/dss-ui/stories/SidebarGroupLabel.stories.tsx b/packages/dss-ui/stories/SidebarGroupLabel.stories.tsx
new file mode 100644
index 0000000..1b7a086
--- /dev/null
+++ b/packages/dss-ui/stories/SidebarGroupLabel.stories.tsx
@@ -0,0 +1,40 @@
+/**
+ * Sidebar Group Label Stories
+ * @generated 2025-12-11T14:37:52.634095
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { SidebarGroupLabel, type SidebarGroupLabelProps } from '../src/atoms/SidebarGroupLabel';
+
+const meta: Meta = {
+ title: '2. Atoms/SidebarGroupLabel',
+ component: SidebarGroupLabel,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated SidebarGroupLabel component
+
+**Classification:** atom
+**Slots:** label
+**Figma ID:** 176:23790`
+ }
+ }
+ },
+ argTypes: {
+ type: {
+ control: 'select',
+ options: ['Action', 'Base', 'Collapsed', 'Expanded'],
+ description: 'Type variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ type: 'Action',
+ children: 'SidebarGroupLabel'
+ },
+};
diff --git a/packages/dss-ui/stories/SidebarItemCollapsed.stories.tsx b/packages/dss-ui/stories/SidebarItemCollapsed.stories.tsx
new file mode 100644
index 0000000..513413b
--- /dev/null
+++ b/packages/dss-ui/stories/SidebarItemCollapsed.stories.tsx
@@ -0,0 +1,40 @@
+/**
+ * Sidebar Item / Collapsed Stories
+ * @generated 2025-12-11T14:37:52.632617
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { SidebarItemCollapsed, type SidebarItemCollapsedProps } from '../src/atoms/SidebarItemCollapsed';
+
+const meta: Meta = {
+ title: '2. Atoms/SidebarItemCollapsed',
+ component: SidebarItemCollapsed,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated SidebarItemCollapsed component
+
+**Classification:** atom
+**Slots:** icon
+**Figma ID:** 28:5228`
+ }
+ }
+ },
+ argTypes: {
+ state: {
+ control: 'select',
+ options: ['Active', 'Regular'],
+ description: 'State variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ state: 'Active',
+ children: 'SidebarItemCollapsed'
+ },
+};
diff --git a/packages/dss-ui/stories/SidebarItemExpanded1stLevel.stories.tsx b/packages/dss-ui/stories/SidebarItemExpanded1stLevel.stories.tsx
new file mode 100644
index 0000000..8a128d2
--- /dev/null
+++ b/packages/dss-ui/stories/SidebarItemExpanded1stLevel.stories.tsx
@@ -0,0 +1,46 @@
+/**
+ * Sidebar Item / Expanded / 1st Level Stories
+ * @generated 2025-12-11T14:37:52.633240
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { SidebarItemExpanded1stLevel, type SidebarItemExpanded1stLevelProps } from '../src/atoms/SidebarItemExpanded1stLevel';
+
+const meta: Meta = {
+ title: '2. Atoms/SidebarItemExpanded1stLevel',
+ component: SidebarItemExpanded1stLevel,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated SidebarItemExpanded1stLevel component
+
+**Classification:** atom
+**Slots:** None
+**Figma ID:** 27:3414`
+ }
+ }
+ },
+ argTypes: {
+ state: {
+ control: 'select',
+ options: ['Active', 'Active Focus', 'Default', 'Focus'],
+ description: 'State variant',
+ },
+ type: {
+ control: 'select',
+ options: ['Badge', 'Base', 'Collapsed', 'Dropdown', 'Expanded'],
+ description: 'Type variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ state: 'Active',
+ type: 'Badge',
+ children: 'SidebarItemExpanded1stLevel'
+ },
+};
diff --git a/packages/dss-ui/stories/SidebarItemExpanded2ndLevel.stories.tsx b/packages/dss-ui/stories/SidebarItemExpanded2ndLevel.stories.tsx
new file mode 100644
index 0000000..2138fb0
--- /dev/null
+++ b/packages/dss-ui/stories/SidebarItemExpanded2ndLevel.stories.tsx
@@ -0,0 +1,40 @@
+/**
+ * Sidebar Item / Expanded / 2nd Level Stories
+ * @generated 2025-12-11T14:37:52.633614
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { SidebarItemExpanded2ndLevel, type SidebarItemExpanded2ndLevelProps } from '../src/atoms/SidebarItemExpanded2ndLevel';
+
+const meta: Meta = {
+ title: '2. Atoms/SidebarItemExpanded2ndLevel',
+ component: SidebarItemExpanded2ndLevel,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated SidebarItemExpanded2ndLevel component
+
+**Classification:** atom
+**Slots:** None
+**Figma ID:** 28:5147`
+ }
+ }
+ },
+ argTypes: {
+ state: {
+ control: 'select',
+ options: ['Active', 'Default'],
+ description: 'State variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ state: 'Active',
+ children: 'SidebarItemExpanded2ndLevel'
+ },
+};
diff --git a/packages/dss-ui/stories/SidebarMiniButton.stories.tsx b/packages/dss-ui/stories/SidebarMiniButton.stories.tsx
new file mode 100644
index 0000000..5533560
--- /dev/null
+++ b/packages/dss-ui/stories/SidebarMiniButton.stories.tsx
@@ -0,0 +1,40 @@
+/**
+ * .Sidebar Mini Button Stories
+ * @generated 2025-12-11T14:37:52.634554
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { SidebarMiniButton, type SidebarMiniButtonProps } from '../src/atoms/SidebarMiniButton';
+
+const meta: Meta = {
+ title: '2. Atoms/SidebarMiniButton',
+ component: SidebarMiniButton,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated SidebarMiniButton component
+
+**Classification:** atom
+**Slots:** icon
+**Figma ID:** 176:24085`
+ }
+ }
+ },
+ argTypes: {
+ state: {
+ control: 'select',
+ options: ['Default', 'Hover & Active'],
+ description: 'State variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ state: 'Default',
+ children: 'SidebarMiniButton'
+ },
+};
diff --git a/packages/dss-ui/stories/SliderHorizontal.stories.tsx b/packages/dss-ui/stories/SliderHorizontal.stories.tsx
new file mode 100644
index 0000000..78358c8
--- /dev/null
+++ b/packages/dss-ui/stories/SliderHorizontal.stories.tsx
@@ -0,0 +1,40 @@
+/**
+ * Slider Horizontal Stories
+ * @generated 2025-12-11T14:37:52.635519
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { SliderHorizontal, type SliderHorizontalProps } from '../src/atoms/SliderHorizontal';
+
+const meta: Meta = {
+ title: '2. Atoms/SliderHorizontal',
+ component: SliderHorizontal,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated SliderHorizontal component
+
+**Classification:** atom
+**Slots:** None
+**Figma ID:** 65:4902`
+ }
+ }
+ },
+ argTypes: {
+ type: {
+ control: 'select',
+ options: ['Default', 'Range narrow', 'Range wide'],
+ description: 'Type variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ type: 'Default',
+ children: 'SliderHorizontal'
+ },
+};
diff --git a/packages/dss-ui/stories/SliderVertical.stories.tsx b/packages/dss-ui/stories/SliderVertical.stories.tsx
new file mode 100644
index 0000000..9c7d513
--- /dev/null
+++ b/packages/dss-ui/stories/SliderVertical.stories.tsx
@@ -0,0 +1,40 @@
+/**
+ * Slider Vertical Stories
+ * @generated 2025-12-11T14:37:52.635928
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { SliderVertical, type SliderVerticalProps } from '../src/atoms/SliderVertical';
+
+const meta: Meta = {
+ title: '2. Atoms/SliderVertical',
+ component: SliderVertical,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated SliderVertical component
+
+**Classification:** atom
+**Slots:** None
+**Figma ID:** 162:17939`
+ }
+ }
+ },
+ argTypes: {
+ type: {
+ control: 'select',
+ options: ['Default', 'Range narrow', 'Range wide'],
+ description: 'Type variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ type: 'Default',
+ children: 'SliderVertical'
+ },
+};
diff --git a/packages/dss-ui/stories/Sonner.stories.tsx b/packages/dss-ui/stories/Sonner.stories.tsx
new file mode 100644
index 0000000..b09d09c
--- /dev/null
+++ b/packages/dss-ui/stories/Sonner.stories.tsx
@@ -0,0 +1,40 @@
+/**
+ * Sonner Stories
+ * @generated 2025-12-11T14:37:52.637877
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { Sonner, type SonnerProps } from '../src/atoms/Sonner';
+
+const meta: Meta = {
+ title: '3. Molecules/Sonner',
+ component: Sonner,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated Sonner component
+
+**Classification:** molecule
+**Slots:** None
+**Figma ID:** 139:11361`
+ }
+ }
+ },
+ argTypes: {
+ stack: {
+ control: 'select',
+ options: ['1 Level', '2 Levels', '3 Levels'],
+ description: 'Stack variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ stack: '1 Level',
+ children: 'Sonner'
+ },
+};
diff --git a/packages/dss-ui/stories/SonnerContent.stories.tsx b/packages/dss-ui/stories/SonnerContent.stories.tsx
new file mode 100644
index 0000000..8d400fd
--- /dev/null
+++ b/packages/dss-ui/stories/SonnerContent.stories.tsx
@@ -0,0 +1,40 @@
+/**
+ * Sonner Content Stories
+ * @generated 2025-12-11T14:37:52.640195
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { SonnerContent, type SonnerContentProps } from '../src/atoms/SonnerContent';
+
+const meta: Meta = {
+ title: '3. Molecules/SonnerContent',
+ component: SonnerContent,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated SonnerContent component
+
+**Classification:** molecule
+**Slots:** icon
+**Figma ID:** 139:11366`
+ }
+ }
+ },
+ argTypes: {
+ type: {
+ control: 'select',
+ options: ['Line and button', 'Lines and button', 'Loading', 'Simple'],
+ description: 'Type variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ type: 'Line and button',
+ children: 'SonnerContent'
+ },
+};
diff --git a/packages/dss-ui/stories/Spinner.stories.tsx b/packages/dss-ui/stories/Spinner.stories.tsx
new file mode 100644
index 0000000..6eac118
--- /dev/null
+++ b/packages/dss-ui/stories/Spinner.stories.tsx
@@ -0,0 +1,40 @@
+/**
+ * Spinner Stories
+ * @generated 2025-12-11T14:37:52.643850
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { Spinner, type SpinnerProps } from '../src/atoms/Spinner';
+
+const meta: Meta = {
+ title: '2. Atoms/Spinner',
+ component: Spinner,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated Spinner component
+
+**Classification:** atom
+**Slots:** None
+**Figma ID:** 757:154511`
+ }
+ }
+ },
+ argTypes: {
+ type: {
+ control: 'select',
+ options: ['Default', 'Mirrored'],
+ description: 'Type variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ type: 'Default',
+ children: 'Spinner'
+ },
+};
diff --git a/packages/dss-ui/stories/Switch.stories.tsx b/packages/dss-ui/stories/Switch.stories.tsx
new file mode 100644
index 0000000..ed839d7
--- /dev/null
+++ b/packages/dss-ui/stories/Switch.stories.tsx
@@ -0,0 +1,46 @@
+/**
+ * Switch Stories
+ * @generated 2025-12-11T14:37:52.646272
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { Switch, type SwitchProps } from '../src/atoms/Switch';
+
+const meta: Meta = {
+ title: '2. Atoms/Switch',
+ component: Switch,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated Switch component
+
+**Classification:** atom
+**Slots:** None
+**Figma ID:** 16:1801`
+ }
+ }
+ },
+ argTypes: {
+ checked: {
+ control: 'select',
+ options: ['false', 'true'],
+ description: 'Checked variant',
+ },
+ state: {
+ control: 'select',
+ options: ['Default', 'Disabled', 'Focus'],
+ description: 'State variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ checked: 'false',
+ state: 'Default',
+ children: 'Switch'
+ },
+};
diff --git a/packages/dss-ui/stories/SwitchGroup.stories.tsx b/packages/dss-ui/stories/SwitchGroup.stories.tsx
new file mode 100644
index 0000000..f56fd40
--- /dev/null
+++ b/packages/dss-ui/stories/SwitchGroup.stories.tsx
@@ -0,0 +1,46 @@
+/**
+ * Switch Group Stories
+ * @generated 2025-12-11T14:37:52.646820
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { SwitchGroup, type SwitchGroupProps } from '../src/atoms/SwitchGroup';
+
+const meta: Meta = {
+ title: '2. Atoms/SwitchGroup',
+ component: SwitchGroup,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated SwitchGroup component
+
+**Classification:** atom
+**Slots:** label
+**Figma ID:** 19:6406`
+ }
+ }
+ },
+ argTypes: {
+ layout: {
+ control: 'select',
+ options: ['Block', 'Inline'],
+ description: 'Layout variant',
+ },
+ checked: {
+ control: 'select',
+ options: ['false', 'true'],
+ description: 'Checked variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ layout: 'Block',
+ checked: 'false',
+ children: 'SwitchGroup'
+ },
+};
diff --git a/packages/dss-ui/stories/Tab.stories.tsx b/packages/dss-ui/stories/Tab.stories.tsx
new file mode 100644
index 0000000..7fb3ae6
--- /dev/null
+++ b/packages/dss-ui/stories/Tab.stories.tsx
@@ -0,0 +1,73 @@
+/**
+ * Tab Stories
+ * @generated 2025-12-11T14:37:52.648877
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { Tab, type TabProps } from '../src/atoms/Tab';
+
+const meta: Meta = {
+ title: '2. Atoms/Tab',
+ component: Tab,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated Tab component
+
+**Classification:** atom
+**Slots:** icon, label
+**Figma ID:** 9:634`
+ }
+ }
+ },
+ argTypes: {
+ size: {
+ control: 'select',
+ options: ['Large', 'Regular', 'Small'],
+ description: 'Size variant',
+ },
+ content: {
+ control: 'select',
+ options: ['Icon', 'Icon + Label', 'Label'],
+ description: 'Content variant',
+ },
+ state: {
+ control: 'select',
+ options: ['Active', 'Active Focus', 'Disabled', 'Inactive', 'Inactive Focus', 'Inactive Hover'],
+ description: 'State variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ size: 'Large',
+ content: 'Icon',
+ state: 'Active',
+ children: 'Tab'
+ },
+};
+
+export const SizeLarge: Story = {
+ args: {
+ ...Default.args,
+ size: 'Large',
+ },
+};
+
+export const SizeRegular: Story = {
+ args: {
+ ...Default.args,
+ size: 'Regular',
+ },
+};
+
+export const SizeSmall: Story = {
+ args: {
+ ...Default.args,
+ size: 'Small',
+ },
+};
diff --git a/packages/dss-ui/stories/TableCell.stories.tsx b/packages/dss-ui/stories/TableCell.stories.tsx
new file mode 100644
index 0000000..ff055c8
--- /dev/null
+++ b/packages/dss-ui/stories/TableCell.stories.tsx
@@ -0,0 +1,52 @@
+/**
+ * Table Cell Stories
+ * @generated 2025-12-11T14:37:52.590518
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { TableCell, type TableCellProps } from '../src/atoms/TableCell';
+
+const meta: Meta = {
+ title: '2. Atoms/TableCell',
+ component: TableCell,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated TableCell component
+
+**Classification:** atom
+**Slots:** None
+**Figma ID:** 19:6314`
+ }
+ }
+ },
+ argTypes: {
+ content: {
+ control: 'select',
+ options: ['Actions', 'Avatar', 'Avatar + Name', 'Badge', 'Buttons', 'Checkbox', 'Input', 'Text (1 Line)', 'Text (2 Lines)'],
+ description: 'Content variant',
+ },
+ alignment: {
+ control: 'select',
+ options: ['Left', 'Right'],
+ description: 'Alignment variant',
+ },
+ state: {
+ control: 'select',
+ options: ['Active', 'Default', 'Hover', 'Selected'],
+ description: 'State variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ content: 'Actions',
+ alignment: 'Left',
+ state: 'Active',
+ children: 'TableCell'
+ },
+};
diff --git a/packages/dss-ui/stories/TableHeader.stories.tsx b/packages/dss-ui/stories/TableHeader.stories.tsx
new file mode 100644
index 0000000..aa2e660
--- /dev/null
+++ b/packages/dss-ui/stories/TableHeader.stories.tsx
@@ -0,0 +1,52 @@
+/**
+ * Table Header Stories
+ * @generated 2025-12-11T14:37:52.584468
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { TableHeader, type TableHeaderProps } from '../src/atoms/TableHeader';
+
+const meta: Meta = {
+ title: '4. Organisms/TableHeader',
+ component: TableHeader,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated TableHeader component
+
+**Classification:** organism
+**Slots:** None
+**Figma ID:** 19:6472`
+ }
+ }
+ },
+ argTypes: {
+ content: {
+ control: 'select',
+ options: ['Checkbox', 'Empty', 'Sortable', 'Text'],
+ description: 'Content variant',
+ },
+ alignment: {
+ control: 'select',
+ options: ['Left', 'Right'],
+ description: 'Alignment variant',
+ },
+ state: {
+ control: 'select',
+ options: ['Active', 'Default', 'Hover', 'Selected'],
+ description: 'State variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ content: 'Checkbox',
+ alignment: 'Left',
+ state: 'Active',
+ children: 'TableHeader'
+ },
+};
diff --git a/packages/dss-ui/stories/Tabs.stories.tsx b/packages/dss-ui/stories/Tabs.stories.tsx
new file mode 100644
index 0000000..4a74145
--- /dev/null
+++ b/packages/dss-ui/stories/Tabs.stories.tsx
@@ -0,0 +1,73 @@
+/**
+ * Tabs Stories
+ * @generated 2025-12-11T14:37:52.649446
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { Tabs, type TabsProps } from '../src/atoms/Tabs';
+
+const meta: Meta = {
+ title: '3. Molecules/Tabs',
+ component: Tabs,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated Tabs component
+
+**Classification:** molecule
+**Slots:** None
+**Figma ID:** 9:639`
+ }
+ }
+ },
+ argTypes: {
+ size: {
+ control: 'select',
+ options: ['Large', 'Regular', 'Small'],
+ description: 'Size variant',
+ },
+ content: {
+ control: 'select',
+ options: ['Icon', 'Icon + Label', 'Label'],
+ description: 'Content variant',
+ },
+ parts: {
+ control: 'select',
+ options: ['2 Parts', '3 Parts', '4 Parts', '5 Parts'],
+ description: 'Parts variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ size: 'Large',
+ content: 'Icon',
+ parts: '2 Parts',
+ children: 'Tabs'
+ },
+};
+
+export const SizeLarge: Story = {
+ args: {
+ ...Default.args,
+ size: 'Large',
+ },
+};
+
+export const SizeRegular: Story = {
+ args: {
+ ...Default.args,
+ size: 'Regular',
+ },
+};
+
+export const SizeSmall: Story = {
+ args: {
+ ...Default.args,
+ size: 'Small',
+ },
+};
diff --git a/packages/dss-ui/stories/Textarea.stories.tsx b/packages/dss-ui/stories/Textarea.stories.tsx
new file mode 100644
index 0000000..db6acaa
--- /dev/null
+++ b/packages/dss-ui/stories/Textarea.stories.tsx
@@ -0,0 +1,46 @@
+/**
+ * Textarea Stories
+ * @generated 2025-12-11T14:37:52.650388
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { Textarea, type TextareaProps } from '../src/atoms/Textarea';
+
+const meta: Meta = {
+ title: '2. Atoms/Textarea',
+ component: Textarea,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated Textarea component
+
+**Classification:** atom
+**Slots:** None
+**Figma ID:** 16:1745`
+ }
+ }
+ },
+ argTypes: {
+ state: {
+ control: 'select',
+ options: ['Disabled', 'Empty', 'Error', 'Error Focus', 'Focus', 'Placeholder', 'Value'],
+ description: 'State variant',
+ },
+ roundness: {
+ control: 'select',
+ options: ['Default', 'Round'],
+ description: 'Roundness variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ state: 'Disabled',
+ roundness: 'Default',
+ children: 'Textarea'
+ },
+};
diff --git a/packages/dss-ui/stories/ToggleButton.stories.tsx b/packages/dss-ui/stories/ToggleButton.stories.tsx
new file mode 100644
index 0000000..2fe4470
--- /dev/null
+++ b/packages/dss-ui/stories/ToggleButton.stories.tsx
@@ -0,0 +1,91 @@
+/**
+ * Toggle Button Stories
+ * @generated 2025-12-11T14:37:52.651316
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { ToggleButton, type ToggleButtonProps } from '../src/atoms/ToggleButton';
+
+const meta: Meta = {
+ title: '2. Atoms/ToggleButton',
+ component: ToggleButton,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated ToggleButton component
+
+**Classification:** atom
+**Slots:** icon, label
+**Figma ID:** 816:112827`
+ }
+ }
+ },
+ argTypes: {
+ roundness: {
+ control: 'select',
+ options: ['Default', 'Round'],
+ description: 'Roundness variant',
+ },
+ skin: {
+ control: 'select',
+ options: ['Ghost', 'Outlined'],
+ description: 'Skin variant',
+ },
+ size: {
+ control: 'select',
+ options: ['Large', 'Mini', 'Regular', 'Small'],
+ description: 'Size variant',
+ },
+ position: {
+ control: 'select',
+ options: ['Left', 'Middle', 'Right', 'Single'],
+ description: 'Position variant',
+ },
+ active: {
+ control: 'select',
+ options: ['false', 'true'],
+ description: 'Active variant',
+ },
+ state: {
+ control: 'select',
+ options: ['Default', 'Disabled', 'Focus'],
+ description: 'State variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ roundness: 'Default',
+ skin: 'Ghost',
+ size: 'Large',
+ position: 'Left',
+ active: 'false',
+ state: 'Default',
+ children: 'ToggleButton'
+ },
+};
+
+export const SizeLarge: Story = {
+ args: {
+ ...Default.args,
+ size: 'Large',
+ },
+};
+
+export const SizeMini: Story = {
+ args: {
+ ...Default.args,
+ size: 'Mini',
+ },
+};
+
+export const SizeRegular: Story = {
+ args: {
+ ...Default.args,
+ size: 'Regular',
+ },
+};
diff --git a/packages/dss-ui/stories/ToggleIconButton.stories.tsx b/packages/dss-ui/stories/ToggleIconButton.stories.tsx
new file mode 100644
index 0000000..9e28f2d
--- /dev/null
+++ b/packages/dss-ui/stories/ToggleIconButton.stories.tsx
@@ -0,0 +1,91 @@
+/**
+ * Toggle Icon Button Stories
+ * @generated 2025-12-11T14:37:52.652538
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { ToggleIconButton, type ToggleIconButtonProps } from '../src/atoms/ToggleIconButton';
+
+const meta: Meta = {
+ title: '2. Atoms/ToggleIconButton',
+ component: ToggleIconButton,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated ToggleIconButton component
+
+**Classification:** atom
+**Slots:** icon
+**Figma ID:** 164:20378`
+ }
+ }
+ },
+ argTypes: {
+ roundness: {
+ control: 'select',
+ options: ['Default', 'Round'],
+ description: 'Roundness variant',
+ },
+ skin: {
+ control: 'select',
+ options: ['Ghost', 'Outlined'],
+ description: 'Skin variant',
+ },
+ size: {
+ control: 'select',
+ options: ['Default', 'Large', 'Mini', 'Small'],
+ description: 'Size variant',
+ },
+ position: {
+ control: 'select',
+ options: ['Left', 'Middle', 'Right', 'Single'],
+ description: 'Position variant',
+ },
+ active: {
+ control: 'select',
+ options: ['false', 'true'],
+ description: 'Active variant',
+ },
+ state: {
+ control: 'select',
+ options: ['Default', 'Disabled', 'Focus'],
+ description: 'State variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ roundness: 'Default',
+ skin: 'Ghost',
+ size: 'Default',
+ position: 'Left',
+ active: 'false',
+ state: 'Default',
+ children: 'ToggleIconButton'
+ },
+};
+
+export const SizeDefault: Story = {
+ args: {
+ ...Default.args,
+ size: 'Default',
+ },
+};
+
+export const SizeLarge: Story = {
+ args: {
+ ...Default.args,
+ size: 'Large',
+ },
+};
+
+export const SizeMini: Story = {
+ args: {
+ ...Default.args,
+ size: 'Mini',
+ },
+};
diff --git a/packages/dss-ui/stories/Tooltip.stories.tsx b/packages/dss-ui/stories/Tooltip.stories.tsx
new file mode 100644
index 0000000..e0bab80
--- /dev/null
+++ b/packages/dss-ui/stories/Tooltip.stories.tsx
@@ -0,0 +1,40 @@
+/**
+ * Tooltip Stories
+ * @generated 2025-12-11T14:37:52.654900
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { Tooltip, type TooltipProps } from '../src/atoms/Tooltip';
+
+const meta: Meta = {
+ title: '3. Molecules/Tooltip',
+ component: Tooltip,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated Tooltip component
+
+**Classification:** molecule
+**Slots:** None
+**Figma ID:** 133:14788`
+ }
+ }
+ },
+ argTypes: {
+ side: {
+ control: 'select',
+ options: ['Bottom', 'Left', 'Right', 'Top'],
+ description: 'Side variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ side: 'Bottom',
+ children: 'Tooltip'
+ },
+};
diff --git a/packages/dss-ui/stories/VerticalField.stories.tsx b/packages/dss-ui/stories/VerticalField.stories.tsx
new file mode 100644
index 0000000..9bede18
--- /dev/null
+++ b/packages/dss-ui/stories/VerticalField.stories.tsx
@@ -0,0 +1,40 @@
+/**
+ * Vertical Field Stories
+ * @generated 2025-12-11T14:37:52.595920
+ */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { VerticalField, type VerticalFieldProps } from '../src/atoms/VerticalField';
+
+const meta: Meta = {
+ title: '3. Molecules/VerticalField',
+ component: VerticalField,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: `Auto-generated VerticalField component
+
+**Classification:** molecule
+**Slots:** label
+**Figma ID:** 120:13754`
+ }
+ }
+ },
+ argTypes: {
+ type: {
+ control: 'select',
+ options: ['Checkbox', 'Radio', 'Select', 'Slider', 'Text Value', 'Textarea'],
+ description: 'Type variant',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ type: 'Checkbox',
+ children: 'VerticalField'
+ },
+};