@stfrigerio/sito-template 0.1.35 → 0.1.37

package/dist/themes/default.css

@@ -0,0 +1,47 @@
+/* Default Theme — Purple & Teal */
+
+:root,
+:root[data-theme="default"],
+[data-theme="default"] {
+    --color-primary: #7c3aed;
+    --color-secondary: #14b8a6;
+    --color-accent: #ec4899;
+
+    --color-background: #ffffff;
+    --color-background-secondary: #fafafa;
+    --color-background-tertiary: #f5f5f5;
+    --color-surface: #ffffff;
+    --color-surface-hover: #fafafa;
+
+    --color-text: #18181b;
+    --color-text-secondary: #71717a;
+    --color-text-tertiary: #a1a1aa;
+    --color-text-muted: #d4d4d8;
+    --color-text-inverse: #ffffff;
+
+    --color-border: #e4e4e7;
+    --color-border-hover: #d4d4d8;
+}
+
+/* Default Dark */
+:root[data-theme="dark"],
+[data-theme="dark"] {
+    --color-primary: #a78bfa;
+    --color-secondary: #2dd4bf;
+    --color-accent: #f472b6;
+
+    --color-background: #0a0a0a;
+    --color-background-secondary: #18181b;
+    --color-background-tertiary: #27272a;
+    --color-surface: #18181b;
+    --color-surface-hover: #27272a;
+
+    --color-text: #fafafa;
+    --color-text-secondary: #a1a1aa;
+    --color-text-tertiary: #71717a;
+    --color-text-muted: #52525b;
+    --color-text-inverse: #0a0a0a;
+
+    --color-border: #27272a;
+    --color-border-hover: #3f3f46;
+}

package/dist/themes/dmood.css

@@ -0,0 +1,46 @@
+/* Dmood Theme — Bold Blue */
+
+:root[data-theme="dmood"],
+[data-theme="dmood"] {
+    --color-primary: #0500F2;
+    --color-secondary: #fd79a8;
+    --color-accent: #fd79a8;
+
+    --color-background: #ffffff;
+    --color-background-secondary: #f8f8f8;
+    --color-background-tertiary: #e8e8e8;
+    --color-surface: #ffffff;
+    --color-surface-hover: #f8f8f8;
+
+    --color-text: #2d3436;
+    --color-text-secondary: #707070;
+    --color-text-tertiary: #909090;
+    --color-text-muted: #b0b0b0;
+    --color-text-inverse: #ffffff;
+
+    --color-border: #dfe6e9;
+    --color-border-hover: #c0c0c0;
+}
+
+/* Dmood Dark */
+:root[data-theme="dmood-dark"],
+[data-theme="dmood-dark"] {
+    --color-primary: #4946ff;
+    --color-secondary: #ffb3d0;
+    --color-accent: #ffb3d0;
+
+    --color-background: #1a1a1a;
+    --color-background-secondary: #252525;
+    --color-background-tertiary: #333333;
+    --color-surface: #252525;
+    --color-surface-hover: #333333;
+
+    --color-text: #f0f0f0;
+    --color-text-secondary: #c0c0c0;
+    --color-text-tertiary: #909090;
+    --color-text-muted: #707070;
+    --color-text-inverse: #1a1a1a;
+
+    --color-border: #404040;
+    --color-border-hover: #505050;
+}

package/dist/themes/globals.css

@@ -0,0 +1,110 @@
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+
+html {
+	font-size: 16px;
+}
+
+body {
+	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+		'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+		sans-serif;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	line-height: 1.5;
+}
+
+code {
+	font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+		monospace;
+}
+
+button {
+	font-family: inherit;
+	cursor: pointer;
+}
+
+input, textarea, select {
+	font-family: inherit;
+	font-size: inherit;
+}
+
+a {
+	color: inherit;
+	text-decoration: none;
+}
+
+ul, ol {
+	list-style: none;
+}
+
+/* Global Typography */
+h1 {
+	font-size: 36px;
+	font-weight: 700;
+	color: var(--color-text);
+	margin-bottom: 16px;
+}
+
+h2 {
+	font-size: 32px;
+	font-weight: 600;
+	color: var(--color-text);
+	margin-bottom: 12px;
+}
+
+h3 {
+	font-size: 20px;
+	font-weight: 600;
+	color: var(--color-text);
+	margin-bottom: 12px;
+}
+
+h4 {
+	font-size: 18px;
+	font-weight: 600;
+	color: var(--color-text);
+	margin-bottom: 8px;
+}
+
+h5 {
+	font-size: 16px;
+	font-weight: 600;
+	color: var(--color-text);
+	margin-bottom: 8px;
+}
+
+h6 {
+	font-size: 14px;
+	font-weight: 600;
+	color: var(--color-text-secondary);
+	margin-bottom: 8px;
+}
+
+p {
+	color: var(--color-text);
+	line-height: 1.6;
+	margin-bottom: 16px;
+}
+
+@media (max-width: 768px) {
+	.header {
+		padding: 16px;
+		margin-bottom: 24px;
+	}
+	
+	h1 {
+		font-size: 28px;
+	}
+	
+	h2 {
+		font-size: 24px;
+	}
+	
+	h3 {
+		font-size: 18px;
+	}
+}

package/dist/themes/lossito.css

@@ -0,0 +1,52 @@
+/* Lossito Theme — Blue & Gold */
+
+:root[data-theme="lossito"],
+[data-theme="lossito"] {
+    --color-primary: #3b82f6;
+    --color-secondary: #1f2937;
+    --color-accent: #3b82f6;
+
+    --color-background: #f8fafc;
+    --color-background-secondary: #ffffff;
+    --color-background-tertiary: #f1f5f9;
+    --color-surface: #ffffff;
+    --color-surface-hover: #f8fafc;
+
+    --color-text: #0f172a;
+    --color-text-secondary: #475569;
+    --color-text-tertiary: #64748b;
+    --color-text-muted: #94a3b8;
+    --color-text-inverse: #ffffff;
+
+    --color-border: #e2e8f0;
+    --color-border-hover: #cbd5e1;
+}
+
+/* Lossito Dark */
+:root[data-theme="lossito-dark"],
+[data-theme="lossito-dark"] {
+    --color-primary: #f5b829;
+    --color-secondary: #e5e7eb;
+    --color-accent: #fce390;
+
+    --color-background: #010907;
+    --color-background-secondary: #0e1a19;
+    --color-background-tertiary: #040d1b;
+    --color-surface: #0e1a19;
+    --color-surface-hover: #040d1b;
+
+    --color-text: #f1f5f9;
+    --color-text-secondary: #cbd5e1;
+    --color-text-tertiary: #94a3b8;
+    --color-text-muted: #64748b;
+    --color-text-inverse: #111827;
+
+    --color-border: #3e3c03;
+    --color-border-hover: #4b5563;
+
+    /* Status overrides — lossito-dark uses its own palette */
+    --color-success: #22c55e;
+    --color-error: #fd4545;
+    --color-warning: #fef3c7;
+    --color-info: #dbeafe;
+}

package/dist/tokens/tokens.css

@@ -0,0 +1,79 @@
+/* Design Tokens - Structural/Layout Variables Only */
+:root {
+  /* Spacing System */
+  --spacing-xs: 0.25rem;  /* 4px */
+  --spacing-sm: 0.5rem;   /* 8px */
+  --spacing-md: 1rem;     /* 16px */
+  --spacing-lg: 1.5rem;   /* 24px */
+  --spacing-xl: 2rem;     /* 32px */
+  --spacing-2xl: 3rem;    /* 48px */
+  --spacing-3xl: 4rem;    /* 64px */
+  --spacing-4xl: 6rem;    /* 96px */
+  
+  /* Border Radius */
+  --radius-sm: 0.375rem;  /* 6px */
+  --radius-md: 0.5rem;    /* 8px */
+  --radius-lg: 0.75rem;   /* 12px */
+  --radius-xl: 1rem;      /* 16px */
+  --radius-2xl: 1.5rem;   /* 24px */
+  --radius-full: 9999px;
+  
+  /* Typography Scale */
+  --font-size-xs: 0.75rem;    /* 12px */
+  --font-size-sm: 0.875rem;   /* 14px */
+  --font-size-base: 1rem;     /* 16px */
+  --font-size-lg: 1.125rem;   /* 18px */
+  --font-size-xl: 1.25rem;    /* 20px */
+  --font-size-2xl: 1.5rem;    /* 24px */
+  --font-size-3xl: 1.875rem;  /* 30px */
+  --font-size-4xl: 2.25rem;   /* 36px */
+  --font-size-5xl: 3rem;      /* 48px */
+  
+  /* Font Weights */
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
+  
+  /* Font Family */
+  --font-family-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --font-family-mono: 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
+  
+  /* Line Heights */
+  --line-height-tight: 1.25;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.75;
+  --line-height-loose: 2;
+  
+  /* Letter Spacing */
+  --letter-spacing-tight: -0.025em;
+  --letter-spacing-normal: 0;
+  --letter-spacing-wide: 0.025em;
+  --letter-spacing-wider: 0.05em;
+  --letter-spacing-widest: 0.1em;
+  
+  /* Transitions */
+  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-slower: 500ms cubic-bezier(0.4, 0, 0.2, 1);
+  
+  /* Z-Index Scale */
+  --z-index-dropdown: 1000;
+  --z-index-sticky: 1020;
+  --z-index-fixed: 1030;
+  --z-index-modal-backdrop: 1040;
+  --z-index-modal: 1050;
+  --z-index-popover: 1060;
+  --z-index-tooltip: 1070;
+  
+  /* Breakpoints (for reference - use in media queries) */
+  --breakpoint-xs: 480px;
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+  --breakpoint-2xl: 1536px;
+}

package/dist/utils/formUtils.d.ts

@@ -1,8 +1,3 @@
 export declare const formatDateToEuropean: (date: string | Date | undefined) => string;
 export declare const parseEuropeanDate: (dateString: string) => string;
-export declare const formatTimeDisplay: (value: string) => string;
-export declare const parseTime: (timeString: string) => {
-    hours: number;
-    minutes: number;
-} | null;
 //# sourceMappingURL=formUtils.d.ts.map

package/dist/utils/formUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"formUtils.d.ts","sourceRoot":"","sources":["../../src/utils/formUtils.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,oBAAoB,GAAI,MAAM,MAAM,GAAG,IAAI,GAAG,SAAS,KAAG,MAQtE,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,YAAY,MAAM,KAAG,MAiBtD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,OAAO,MAAM,KAAG,MAcjD,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,YAAY,MAAM,KAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,GAAG,IAUnF,CAAC"}
+{"version":3,"file":"formUtils.d.ts","sourceRoot":"","sources":["../../src/utils/formUtils.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,oBAAoB,GAAI,MAAM,MAAM,GAAG,IAAI,GAAG,SAAS,KAAG,MAQtE,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,YAAY,MAAM,KAAG,MAiBtD,CAAC"}

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@stfrigerio/sito-template",
-  "version": "0.1.35",
+  "version": "0.1.37",
   "description": "A library of React components with animations for quick website development",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "storybook-static"
   ],
   "exports": {
     ".": {
@@ -15,6 +16,11 @@
       "types": "./dist/index.d.ts"
     },
     "./styles": "./dist/styles.css",
+    "./tokens": "./dist/tokens/tokens.css",
+    "./themes/default": "./dist/themes/default.css",
+    "./themes/lossito": "./dist/themes/lossito.css",
+    "./themes/dmood": "./dist/themes/dmood.css",
+    "./themes/globals": "./dist/themes/globals.css",
     "./atoms": {
       "import": "./dist/components/atoms/index.esm.js",
       "types": "./dist/components/atoms/index.d.ts"
@@ -35,23 +41,34 @@
     "build:lib": "rollup -c",
     "build:app": "vite build",
     "lint": "eslint . --ext .ts,.tsx",
-    "typecheck": "tsc --noEmit",
+    "typecheck": "bash scripts/check-types.sh",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "release": "bash -c 'source ~/.bash_functions && pushino \"releasing new stuff\" && npm version patch && npm run build && npm publish && git push'"
+    "release": "bash -c 'set -a && source .env && set +a && source ~/.bash_functions && pushino \"releasing new stuff\" && npm version patch && npm run build && npm publish && git push'"
   },
   "peerDependencies": {
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
   "dependencies": {
-    "@types/d3": "^7.4.3",
+    "@gsap/react": "^2.1.2",
+    "@react-three/drei": "^9.122.0",
+    "@react-three/fiber": "^8.18.0",
+    "@react-three/postprocessing": "^2.19.1",
+    "@react-three/rapier": "^1.5.0",
     "d3": "^7.9.0",
     "framer-motion": "^12.23.12",
-    "gsap": "^3.12.0",
+    "gsap": "^3.14.2",
     "lucide-react": "^0.539.0",
-    "react-icons": "^5.5.0",
-    "react-router-dom": "^7.8.1"
+    "maath": "^0.10.8",
+    "motion": "^12.38.0",
+    "ogl": "^1.0.11",
+    "postprocessing": "^6.39.0",
+    "react-icons": "^5.6.0",
+    "react-router-dom": "^7.14.0",
+    "three": "^0.183.2"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.0",
@@ -62,6 +79,10 @@
     "@storybook/addon-links": "^9.1.2",
     "@storybook/addon-onboarding": "^9.1.2",
     "@storybook/react-vite": "^9.1.2",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/d3": "^7.4.3",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
@@ -71,7 +92,7 @@
     "eslint-plugin-react": "^7.0.0",
     "eslint-plugin-react-hooks": "^4.0.0",
     "eslint-plugin-storybook": "^9.1.2",
-    "jest": "^29.0.0",
+    "jsdom": "^29.0.2",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "rollup": "^4.0.0",
@@ -81,7 +102,8 @@
     "storybook": "^9.1.2",
     "tslib": "^2.0.0",
     "typescript": "^5.0.0",
-    "vite": "^5.0.0"
+    "vite": "^5.0.0",
+    "vitest": "^4.1.4"
   },
   "repository": {
     "type": "git",

package/storybook-static/assets/AllAtoms.stories-DBoQZmq-.js

@@ -0,0 +1,109 @@
+import{j as e,r as a}from"./iframe-BUaP2gIF.js";import{B as s}from"./Button-VfdDKp2T.js";import{C as t}from"./Card-D-kcaQHV.js";import{C as v}from"./Checkbox-BHwlDfRP.js";import{D as R}from"./DateInput-Cu3PZYc0.js";import{S as Se}from"./SearchableDropdown-ByAXm1md.js";import{S as $}from"./SelectInput-D-AwfWVz.js";import{T as G}from"./TextArea-B_sATPlw.js";import{T as d}from"./TextInput-ZGg8LTL_.js";import{T as h}from"./Toggle-BQ2KHBDr.js";import{N as V}from"./NumberStepper-BZGlrWCN.js";import{T as g}from"./ToggleButton-Dl6hvkJv.js";import"./preload-helper-C1FmrZbK.js";import"./proxy-9Y4F2rF8.js";import"./index-5bdJXrkD.js";import"./index-CZs7_DA6.js";const Ge={title:"Atoms/All Atoms Showcase",parameters:{layout:"padded",docs:{description:{component:"A comprehensive showcase of all atomic components in the design system."}}}},ke=()=>{var Q,X;const[f,z]=a.useState(!1),[b,B]=a.useState(!0),[C,O]=a.useState(!1),[u,w]=a.useState("2024-01-01"),[n,D]=a.useState("2024-12-25"),[c,j]=a.useState(""),[i,A]=a.useState(""),[y,I]=a.useState("medium"),[S,p]=a.useState(""),[o,te]=a.useState("This is some pre-filled text that you can edit..."),[L,le]=a.useState(""),[se,H]=a.useState("Pre-filled value"),[re,F]=a.useState(""),[x,U]=a.useState(!1),[oe,ne]=a.useState(!0),[ie,ce]=a.useState(5),[de,ge]=a.useState(0),[ue,pe]=a.useState(7),[N,xe]=a.useState(!1),[E,me]=a.useState(!1),[W,ve]=a.useState(!1),[M,he]=a.useState(!1),[P,fe]=a.useState(!1),[Te,be]=a.useState(0),[Ve,Ce]=a.useState(""),_=[{value:"react",label:"React"},{value:"vue",label:"Vue"},{value:"angular",label:"Angular"},{value:"svelte",label:"Svelte"},{value:"solid",label:"Solid"},{value:"qwik",label:"Qwik"},{value:"ember",label:"Ember"},{value:"backbone",label:"Backbone"}],je=[{value:"small",label:"Small"},{value:"medium",label:"Medium"},{value:"large",label:"Large"},{value:"xlarge",label:"Extra Large"}],q=[{value:"frontend",label:"Frontend Development"},{value:"backend",label:"Backend Development"},{value:"fullstack",label:"Full Stack"},{value:"mobile",label:"Mobile Development"},{value:"devops",label:"DevOps"},{value:"design",label:"UI/UX Design"}],r=l=>{be(m=>m+1),Ce(l)},ye=l=>{l.length<3?F("Must be at least 3 characters"):l.length>20?F("Must be less than 20 characters"):F("")};return e.jsxs("div",{style:{maxWidth:"1200px",margin:"0 auto",padding:"var(--spacing-xl)",fontFamily:"var(--font-primary)"},children:[e.jsx("h1",{style:{marginBottom:"var(--spacing-xl)",color:"var(--color-text)",fontSize:"var(--font-size-4xl)"},children:"Atomic Components Showcase"}),e.jsxs("section",{style:{marginBottom:"var(--spacing-3xl)"},children:[e.jsx("h2",{style:{marginBottom:"var(--spacing-lg)",color:"var(--color-text)",fontSize:"var(--font-size-2xl)"},children:"Buttons"}),e.jsxs(t,{children:[e.jsx("p",{style:{marginBottom:"var(--spacing-md)",color:"var(--color-text-secondary)"},children:"Various button variants and sizes"}),e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(150px, 1fr))",gap:"var(--spacing-md)",marginBottom:"var(--spacing-lg)"},children:[e.jsx(s,{variant:"primary",onClick:()=>r("Primary"),children:"Primary"}),e.jsx(s,{variant:"secondary",onClick:()=>r("Secondary"),children:"Secondary"}),e.jsx(s,{variant:"outline",onClick:()=>r("Outline"),children:"Outline"}),e.jsx(s,{variant:"ghost",onClick:()=>r("Ghost"),children:"Ghost"}),e.jsx(s,{variant:"danger",onClick:()=>r("Danger"),children:"Danger"}),e.jsx(s,{disabled:!0,onClick:()=>r("Disabled"),children:"Disabled (No Click)"})]}),e.jsxs("div",{style:{display:"flex",gap:"var(--spacing-md)",flexWrap:"wrap",alignItems:"center"},children:[e.jsx(s,{size:"small",onClick:()=>r("Small"),children:"Small"}),e.jsx(s,{size:"medium",onClick:()=>r("Medium"),children:"Medium"}),e.jsx(s,{size:"large",onClick:()=>r("Large"),children:"Large"}),e.jsx(s,{fullWidth:!0,onClick:()=>r("Full Width"),children:"Full Width Button"})]})]})]}),e.jsxs("section",{style:{marginBottom:"var(--spacing-3xl)"},children:[e.jsx("h2",{style:{marginBottom:"var(--spacing-lg)",color:"var(--color-text)",fontSize:"var(--font-size-2xl)"},children:"Cards"}),e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(250px, 1fr))",gap:"var(--spacing-lg)"},children:[e.jsxs(t,{children:[e.jsx("h3",{style:{marginBottom:"var(--spacing-sm)"},children:"Default Card"}),e.jsx("p",{children:"A basic card component with padding and background."})]}),e.jsxs(t,{variant:"elevated",children:[e.jsx("h3",{style:{marginBottom:"var(--spacing-sm)"},children:"Elevated Card"}),e.jsx("p",{children:"This card has a shadow effect for depth."})]}),e.jsxs(t,{variant:"outlined",children:[e.jsx("h3",{style:{marginBottom:"var(--spacing-sm)"},children:"Outlined Card"}),e.jsx("p",{children:"This card has a border instead of a background."})]})]})]}),e.jsxs("section",{style:{marginBottom:"var(--spacing-3xl)"},children:[e.jsx("h2",{style:{marginBottom:"var(--spacing-lg)",color:"var(--color-text)",fontSize:"var(--font-size-2xl)"},children:"Form Inputs"}),e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(300px, 1fr))",gap:"var(--spacing-lg)"},children:[e.jsxs(t,{children:[e.jsx(d,{value:L,label:"Text Input with Validation",onChange:l=>{le(l),ye(l)},placeholder:"Type 3-20 characters...",error:re}),e.jsxs("p",{style:{marginTop:"var(--spacing-xs)",fontSize:"var(--font-size-xs)",color:"var(--color-text-tertiary)"},children:['Current value: "',L,'" (',L.length," chars)"]})]}),e.jsxs(t,{children:[e.jsx(d,{label:"Pre-filled Text Input",value:se,onChange:H,placeholder:"Enter text here..."}),e.jsx(s,{size:"small",variant:"outline",onClick:()=>H(""),style:{marginTop:"var(--spacing-xs)"},children:"Clear"})]}),e.jsxs(t,{children:[e.jsx(R,{label:"Start Date",value:u,onChange:w}),e.jsx("div",{style:{marginTop:"var(--spacing-md)"},children:e.jsx(R,{label:"End Date",value:n,onChange:D})}),e.jsxs("p",{style:{marginTop:"var(--spacing-xs)",fontSize:"var(--font-size-xs)",color:"var(--color-text-tertiary)"},children:["Selected range: ",u," to ",n]})]}),e.jsxs(t,{children:[e.jsx($,{label:"Size Selection",value:y,onChange:I,options:je}),e.jsx($,{label:"Category Selection",value:i,onChange:A,options:q,placeholder:"Choose category..."}),i&&e.jsxs("p",{style:{marginTop:"var(--spacing-xs)",padding:"var(--spacing-xs)",background:"var(--color-primary)",color:"var(--color-text-inverse)",borderRadius:"var(--radius-sm)",fontSize:"var(--font-size-xs)"},children:["Selected: ",(Q=q.find(l=>l.value===i))==null?void 0:Q.label]})]}),e.jsxs(t,{children:[e.jsx(Se,{label:"Searchable Framework Selector",options:_,value:c,onChange:j,placeholder:"Search or select framework..."}),c&&e.jsxs("div",{style:{marginTop:"var(--spacing-md)"},children:[e.jsxs("p",{style:{fontSize:"var(--font-size-sm)",marginBottom:"var(--spacing-xs)"},children:["You selected: ",e.jsx("strong",{children:(X=_.find(l=>l.value===c))==null?void 0:X.label})]}),e.jsx(s,{size:"small",variant:"outline",onClick:()=>j(""),children:"Clear Selection"})]})]}),e.jsx(t,{style:{gridColumn:"span 2"},children:e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"1fr 1fr",gap:"var(--spacing-md)"},children:[e.jsxs("div",{children:[e.jsx(G,{label:"Empty Text Area",value:S,onChange:p,placeholder:"Start typing here...",rows:4}),e.jsxs("p",{style:{marginTop:"var(--spacing-xs)",fontSize:"var(--font-size-xs)",color:"var(--color-text-tertiary)"},children:["Character count: ",S.length]})]}),e.jsxs("div",{children:[e.jsx(G,{label:"Pre-filled Text Area",value:o,onChange:te,rows:4}),e.jsxs("p",{style:{marginTop:"var(--spacing-xs)",fontSize:"var(--font-size-xs)",color:"var(--color-text-tertiary)"},children:["Word count: ",o.split(/\s+/).filter(l=>l).length," words"]})]})]})})]})]}),e.jsxs("section",{style:{marginBottom:"var(--spacing-3xl)"},children:[e.jsx("h2",{style:{marginBottom:"var(--spacing-lg)",color:"var(--color-text)",fontSize:"var(--font-size-2xl)"},children:"Number Steppers & Toggle Buttons"}),e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(300px, 1fr))",gap:"var(--spacing-lg)",marginBottom:"var(--spacing-lg)"},children:[e.jsxs(t,{children:[e.jsx("h3",{style:{marginBottom:"var(--spacing-md)",fontSize:"var(--font-size-lg)",color:"var(--color-text)"},children:"Number Steppers"}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"var(--spacing-lg)"},children:[e.jsx(V,{value:ie,onChange:ce,min:0,max:100,step:5,label:"Cigarettes",icon:"🚬"}),e.jsx(V,{value:de,onChange:ge,min:0,max:10,step:1,label:"Water Glasses",icon:"💧",variant:"filled",showPlusMinus:!0}),e.jsx(V,{value:ue,onChange:pe,min:0,max:12,step:.5,label:"Sleep Hours",icon:"😴",variant:"outlined"})]})]}),e.jsxs(t,{children:[e.jsx("h3",{style:{marginBottom:"var(--spacing-md)",fontSize:"var(--font-size-lg)",color:"var(--color-text)"},children:"Boolean Habit Toggles"}),e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(2, 1fr)",gap:"var(--spacing-md)"},children:[e.jsx(g,{active:N,onClick:()=>xe(!N),icon:"🦷",label:"Teeth",variant:"outlined",activeColor:"success",showCheckmark:!0}),e.jsx(g,{active:E,onClick:()=>me(!E),icon:"🚿",label:"Shower",variant:"outlined",activeColor:"success",showCheckmark:!0}),e.jsx(g,{active:W,onClick:()=>ve(!W),icon:"🧘",label:"Meditate",variant:"outlined",activeColor:"success",showCheckmark:!0}),e.jsx(g,{active:M,onClick:()=>he(!M),icon:"💊",label:"Vitamins",variant:"outlined",activeColor:"success",showCheckmark:!0}),e.jsx(g,{active:P,onClick:()=>fe(!P),icon:"💪",label:"Exercise",variant:"outlined",activeColor:"success",showCheckmark:!0})]}),e.jsx("div",{style:{marginTop:"var(--spacing-md)",padding:"var(--spacing-sm)",background:"var(--color-background-secondary)",borderRadius:"var(--radius-sm)"},children:e.jsxs("p",{style:{fontSize:"var(--font-size-xs)"},children:["Completed habits: ",[N&&"Teeth",E&&"Shower",W&&"Meditate",M&&"Vitamins",P&&"Exercise"].filter(Boolean).join(", ")||"None"]})})]})]})]}),e.jsxs("section",{style:{marginBottom:"var(--spacing-3xl)"},children:[e.jsx("h2",{style:{marginBottom:"var(--spacing-lg)",color:"var(--color-text)",fontSize:"var(--font-size-2xl)"},children:"Toggle Controls"}),e.jsx(t,{children:e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(300px, 1fr))",gap:"var(--spacing-lg)"},children:[e.jsxs("div",{children:[e.jsx("h3",{style:{marginBottom:"var(--spacing-md)",fontSize:"var(--font-size-lg)",color:"var(--color-text)"},children:"Checkboxes"}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"var(--spacing-md)"},children:[e.jsx(v,{checked:f,onChange:z,label:"Accept terms and conditions"}),e.jsx(v,{checked:b,onChange:B,label:"Subscribe to newsletter"}),e.jsx(v,{checked:C,onChange:O,label:"Enable notifications"})]}),e.jsx("div",{style:{marginTop:"var(--spacing-md)",padding:"var(--spacing-sm)",background:"var(--color-background-secondary)",borderRadius:"var(--radius-sm)"},children:e.jsxs("p",{style:{fontSize:"var(--font-size-xs)"},children:["Checked items: ",[f&&"Terms",b&&"Newsletter",C&&"Notifications"].filter(Boolean).join(", ")||"None"]})})]}),e.jsxs("div",{children:[e.jsx("h3",{style:{marginBottom:"var(--spacing-md)",fontSize:"var(--font-size-lg)",color:"var(--color-text)"},children:"Toggle Switches"}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"var(--spacing-md)"},children:[e.jsx(h,{isOn:x,onToggle:U,leftLabel:"Off",rightLabel:"On"}),e.jsx(h,{isOn:oe,onToggle:ne,leftLabel:"Off",rightLabel:"On"}),e.jsx(h,{isOn:!x,onToggle:l=>U(!l),leftLabel:"Off",rightLabel:"On"})]}),e.jsx("div",{style:{marginTop:"var(--spacing-md)",padding:"var(--spacing-sm)",background:x?"var(--color-grey-900)":"var(--color-background-secondary)",color:x?"var(--color-text-inverse)":"var(--color-text)",borderRadius:"var(--radius-sm)",transition:"all 0.3s ease"},children:e.jsxs("p",{style:{fontSize:"var(--font-size-xs)"},children:["Dark mode is ",x?"ON":"OFF"]})})]})]})})]}),e.jsxs("section",{style:{marginBottom:"var(--spacing-3xl)"},children:[e.jsx("h2",{style:{marginBottom:"var(--spacing-lg)",color:"var(--color-text)",fontSize:"var(--font-size-2xl)"},children:"Component States Demo"}),e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(250px, 1fr))",gap:"var(--spacing-lg)"},children:[e.jsxs(t,{children:[e.jsx("h3",{style:{marginBottom:"var(--spacing-sm)",color:"var(--color-text-secondary)",fontSize:"var(--font-size-sm)"},children:"Error State"}),e.jsx(d,{label:"Error State Input",value:"Invalid input",onChange:()=>{},error:"This field has an error"}),e.jsx("div",{style:{marginTop:"var(--spacing-sm)"},children:e.jsx(v,{checked:!1,onChange:()=>{},label:"Error checkbox (disabled)",disabled:!0})})]}),e.jsxs(t,{children:[e.jsx("h3",{style:{marginBottom:"var(--spacing-sm)",color:"var(--color-text-secondary)",fontSize:"var(--font-size-sm)"},children:"Disabled State"}),e.jsx(d,{label:"Disabled Input",value:"Disabled input",onChange:()=>{},disabled:!0}),e.jsx("div",{style:{marginTop:"var(--spacing-sm)"},children:e.jsx(s,{disabled:!0,children:"Disabled Button"})}),e.jsx("div",{style:{marginTop:"var(--spacing-sm)"},children:e.jsx(h,{isOn:!0,onToggle:()=>{},leftLabel:"Off",rightLabel:"On"})})]}),e.jsxs(t,{children:[e.jsx("h3",{style:{marginBottom:"var(--spacing-sm)",color:"var(--color-text-secondary)",fontSize:"var(--font-size-sm)"},children:"Loading State"}),e.jsx(s,{loading:!0,children:"Loading..."}),e.jsx("div",{style:{marginTop:"var(--spacing-sm)"},children:e.jsx(d,{label:"Loading Input",value:"Loading...",onChange:()=>{},disabled:!0,placeholder:"Processing..."})})]}),e.jsxs(t,{children:[e.jsx("h3",{style:{marginBottom:"var(--spacing-sm)",color:"var(--color-text-secondary)",fontSize:"var(--font-size-sm)"},children:"Success State"}),e.jsx("div",{style:{padding:"var(--spacing-sm)",background:"var(--color-success-bg)",color:"var(--color-success)",borderRadius:"var(--radius-sm)",marginBottom:"var(--spacing-sm)"},children:"✓ Successfully saved!"}),e.jsx(s,{variant:"primary",onClick:()=>alert("Saved!"),children:"Save Changes"})]})]})]}),e.jsxs("section",{children:[e.jsx("h2",{style:{marginBottom:"var(--spacing-lg)",color:"var(--color-text)",fontSize:"var(--font-size-2xl)"},children:"Live Theme Colors"}),e.jsxs(t,{children:[e.jsx("p",{style:{marginBottom:"var(--spacing-md)",color:"var(--color-text-secondary)"},children:"These colors update automatically when you switch themes"}),e.jsx("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fill, minmax(150px, 1fr))",gap:"var(--spacing-md)"},children:[{name:"Primary",var:"--color-primary"},{name:"Secondary",var:"--color-secondary"},{name:"Success",var:"--color-success"},{name:"Warning",var:"--color-warning"},{name:"Error",var:"--color-error"},{name:"Info",var:"--color-info"}].map(l=>e.jsxs("div",{style:{textAlign:"center"},children:[e.jsx("div",{style:{width:"100%",height:"80px",backgroundColor:`var(${l.var})`,borderRadius:"var(--radius-md)",marginBottom:"var(--spacing-xs)",border:"1px solid var(--color-border)",cursor:"pointer",transition:"transform 0.2s ease"},onClick:()=>alert(`This is the ${l.name} color!`),onMouseEnter:m=>m.currentTarget.style.transform="scale(1.05)",onMouseLeave:m=>m.currentTarget.style.transform="scale(1)"}),e.jsx("span",{style:{fontSize:"var(--font-size-sm)",color:"var(--color-text-secondary)"},children:l.name})]},l.name))})]})]})]})},k={render:()=>e.jsx(ke,{})},T={render:()=>{const[f,z]=a.useState(""),[b,B]=a.useState("2024-01-01"),[C,O]=a.useState(""),[u,w]=a.useState(!1),[n,D]=a.useState(!1),[c,j]=a.useState(0),[i,A]=a.useState(!1),[y,I]=a.useState(""),[S,p]=a.useState(0);return e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(250px, 1fr))",gap:"var(--spacing-xl)",padding:"var(--spacing-xl)"},children:[e.jsxs(t,{children:[e.jsx("h3",{children:"Interactive Buttons"}),e.jsxs("p",{style:{fontSize:"var(--font-size-sm)",color:"var(--color-text-secondary)",marginBottom:"12px"},children:["Clicks: ",S]}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"8px",marginTop:"12px"},children:[e.jsx(s,{variant:"primary",size:"small",onClick:()=>p(o=>o+1),children:"Primary"}),e.jsx(s,{variant:"secondary",size:"small",onClick:()=>p(o=>o+1),children:"Secondary"}),e.jsx(s,{variant:"outline",size:"small",onClick:()=>p(o=>o+1),children:"Outline"})]})]}),e.jsxs(t,{children:[e.jsx("h3",{children:"Form Inputs"}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"8px",marginTop:"12px"},children:[e.jsx(d,{label:"Compact Text",value:f,onChange:z,placeholder:"Type something..."}),e.jsx(R,{label:"Compact Date",value:b,onChange:B}),e.jsx($,{label:"Compact Select",value:C,onChange:O,options:[{value:"1",label:"Option 1"},{value:"2",label:"Option 2"},{value:"3",label:"Option 3"}],placeholder:"Select an option"})]})]}),e.jsxs(t,{children:[e.jsx("h3",{children:"Toggle Controls"}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"12px",marginTop:"12px"},children:[e.jsx(v,{checked:u,onChange:w,label:`Checkbox (${u?"ON":"OFF"})`}),e.jsx(h,{isOn:n,onToggle:D,leftLabel:"Off",rightLabel:"On"}),e.jsx(V,{value:c,onChange:j,min:0,max:10,step:1,label:"Count",icon:"🔢",size:"small"}),e.jsx(g,{active:i,onClick:()=>A(!i),icon:"⭐",label:"Favorite",size:"small",showCheckmark:!0})]}),e.jsxs("div",{style:{marginTop:"12px",padding:"8px",background:n?"var(--color-primary)":"var(--color-background-secondary)",color:n?"var(--color-text-inverse)":"var(--color-text)",borderRadius:"var(--radius-sm)",fontSize:"var(--font-size-xs)",textAlign:"center",transition:"all 0.3s ease"},children:["Toggle: ",n?"ON":"OFF"," | Number: ",c," | Button: ",i?"Active":"Inactive"]})]}),e.jsxs(t,{children:[e.jsx("h3",{children:"Text Area"}),e.jsxs("div",{style:{marginTop:"12px"},children:[e.jsx(G,{label:"Compact Text Area",value:y,onChange:I,placeholder:"Write something...",rows:3}),e.jsxs("p",{style:{marginTop:"8px",fontSize:"var(--font-size-xs)",color:"var(--color-text-secondary)"},children:[y.length," characters"]})]})]})]})}};var Y,J,K;k.parameters={...k.parameters,docs:{...(Y=k.parameters)==null?void 0:Y.docs,source:{originalSource:`{
+  render: () => <ShowcaseWrapper />
+}`,...(K=(J=k.parameters)==null?void 0:J.docs)==null?void 0:K.source}}};var Z,ee,ae;T.parameters={...T.parameters,docs:{...(Z=T.parameters)==null?void 0:Z.docs,source:{originalSource:`{
+  render: () => {
+    // State for controlled components
+    const [textValue, setTextValue] = useState('');
+    const [dateValue, setDateValue] = useState('2024-01-01');
+    const [selectValue, setSelectValue] = useState('');
+    const [checkboxValue, setCheckboxValue] = useState(false);
+    const [toggleValue, setToggleValue] = useState(false);
+    const [numberValue, setNumberValue] = useState(0);
+    const [toggleBtnValue, setToggleBtnValue] = useState(false);
+    const [textAreaValue, setTextAreaValue] = useState('');
+    const [clickCount, setClickCount] = useState(0);
+    return <div style={{
+      display: 'grid',
+      gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
+      gap: 'var(--spacing-xl)',
+      padding: 'var(--spacing-xl)'
+    }}>
+                <Card>
+                    <h3>Interactive Buttons</h3>
+                    <p style={{
+          fontSize: 'var(--font-size-sm)',
+          color: 'var(--color-text-secondary)',
+          marginBottom: '12px'
+        }}>
+                        Clicks: {clickCount}
+                    </p>
+                    <div style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '8px',
+          marginTop: '12px'
+        }}>
+                        <Button variant="primary" size="small" onClick={() => setClickCount(c => c + 1)}>Primary</Button>
+                        <Button variant="secondary" size="small" onClick={() => setClickCount(c => c + 1)}>Secondary</Button>
+                        <Button variant="outline" size="small" onClick={() => setClickCount(c => c + 1)}>Outline</Button>
+                    </div>
+                </Card>
+
+                <Card>
+                    <h3>Form Inputs</h3>
+                    <div style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '8px',
+          marginTop: '12px'
+        }}>
+                        <TextInput label="Compact Text" value={textValue} onChange={setTextValue} placeholder="Type something..." />
+                        <DateInput label="Compact Date" value={dateValue} onChange={setDateValue} />
+                        <SelectInput label="Compact Select" value={selectValue} onChange={setSelectValue} options={[{
+            value: '1',
+            label: 'Option 1'
+          }, {
+            value: '2',
+            label: 'Option 2'
+          }, {
+            value: '3',
+            label: 'Option 3'
+          }]} placeholder="Select an option" />
+                    </div>
+                </Card>
+
+                <Card>
+                    <h3>Toggle Controls</h3>
+                    <div style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '12px',
+          marginTop: '12px'
+        }}>
+                        <Checkbox checked={checkboxValue} onChange={setCheckboxValue} label={\`Checkbox (\${checkboxValue ? 'ON' : 'OFF'})\`} />
+                        <Toggle isOn={toggleValue} onToggle={setToggleValue} leftLabel="Off" rightLabel="On" />
+                        <NumberStepper value={numberValue} onChange={setNumberValue} min={0} max={10} step={1} label="Count" icon="🔢" size="small" />
+                        <ToggleButton active={toggleBtnValue} onClick={() => setToggleBtnValue(!toggleBtnValue)} icon="⭐" label="Favorite" size="small" showCheckmark />
+                    </div>
+                    <div style={{
+          marginTop: '12px',
+          padding: '8px',
+          background: toggleValue ? 'var(--color-primary)' : 'var(--color-background-secondary)',
+          color: toggleValue ? 'var(--color-text-inverse)' : 'var(--color-text)',
+          borderRadius: 'var(--radius-sm)',
+          fontSize: 'var(--font-size-xs)',
+          textAlign: 'center',
+          transition: 'all 0.3s ease'
+        }}>
+                        Toggle: {toggleValue ? 'ON' : 'OFF'} | Number: {numberValue} | Button: {toggleBtnValue ? 'Active' : 'Inactive'}
+                    </div>
+                </Card>
+
+                <Card>
+                    <h3>Text Area</h3>
+                    <div style={{
+          marginTop: '12px'
+        }}>
+                        <TextArea label="Compact Text Area" value={textAreaValue} onChange={setTextAreaValue} placeholder="Write something..." rows={3} />
+                        <p style={{
+            marginTop: '8px',
+            fontSize: 'var(--font-size-xs)',
+            color: 'var(--color-text-secondary)'
+          }}>
+                            {textAreaValue.length} characters
+                        </p>
+                    </div>
+                </Card>
+            </div>;
+  }
+}`,...(ae=(ee=T.parameters)==null?void 0:ee.docs)==null?void 0:ae.source}}};const He=["AllAtomsShowcase","CompactView"];export{k as AllAtomsShowcase,T as CompactView,He as __namedExportsOrder,Ge as default};

package/storybook-static/assets/AnimationPlayer-UXJjBKtF.css

@@ -0,0 +1 @@
+.particle-tree-container{width:100%;height:100%;position:relative;overflow:hidden;background:linear-gradient(to bottom,beige,#e8e8d0)}.particle-tree-canvas{width:100%;height:100%;position:absolute;top:0;left:0}.dna-helix-container{width:100%;height:100%;position:relative;overflow:hidden;background:linear-gradient(to bottom,#f0f0f0,#e0e0e0)}.dna-helix-canvas{width:100%;height:100%;position:absolute;top:0;left:0}