{"_id":"@edwardguerra/design-system","name":"@edwardguerra/design-system","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@edwardguerra/design-system","version":"1.0.0","description":"Design tokens and React components shared across Edward Guerra, Material and Home, and Midwest Husbands","main":"dist/index.cjs","module":"dist/index.mjs","types":"dist/types/index.d.ts","exports":{".":{"types":"./dist/types/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.cjs"},"./tokens.css":"./dist/css/tokens.css","./brand-themes.css":"./dist/css/main.css","./components.css":"./dist/style.css","./dist/*":"./dist/*","./tokens/*":"./tokens/*"},"scripts":{"build":"npm run build:tokens && npm run build:css && npm run build:components && npm run build:types","build:tokens":"node scripts/build-tokens.js","build:css":"sass src/styles:dist/css --no-source-map","build:components":"tsc && vite build","build:types":"tsc --noEmit false --emitDeclarationOnly --declarationMap false --outDir dist/types","prepublishOnly":"npm run build && npm run test -- --run","dev":"vite","lint":"eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0","format":"prettier --write \"src/**/*.{ts,tsx,json,css,scss}\"","test":"vitest","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"repository":{"type":"git","url":"git+https://github.com/edwardguerra/design-system.git"},"keywords":["design-system","components","ui","tokens"],"author":{"name":"Edward Guerra"},"license":"MIT","devDependencies":{"@storybook/addon-essentials":"^7.6.0","@storybook/addon-interactions":"^7.6.0","@storybook/addon-links":"^7.6.0","@storybook/blocks":"^7.6.0","@storybook/react":"^7.6.0","@storybook/react-vite":"^7.6.0","@storybook/testing-library":"^0.2.2","@testing-library/jest-dom":"^6.1.5","@testing-library/react":"^14.1.2","@testing-library/user-event":"^14.5.1","@types/react":"^18.2.43","@types/react-dom":"^18.2.17","@typescript-eslint/eslint-plugin":"^6.14.0","@typescript-eslint/parser":"^6.14.0","@vitejs/plugin-react":"^4.2.1","eslint":"^8.55.0","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-react-refresh":"^0.4.5","jsdom":"^23.0.1","prettier":"^3.1.1","react":"^18.2.0","react-dom":"^18.2.0","sass":"^1.69.5","storybook":"^7.6.0","style-dictionary":"^3.9.0","typescript":"^5.2.2","vite":"^5.0.8","vitest":"^1.0.4"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"_id":"@edwardguerra/design-system@1.0.0","gitHead":"7383afe5c5905296d6a378556f17c17409d91240","bugs":{"url":"https://github.com/edwardguerra/design-system/issues"},"homepage":"https://github.com/edwardguerra/design-system#readme","_nodeVersion":"23.2.0","_npmVersion":"10.9.1","dist":{"integrity":"sha512-5JUbSm2NauGyr2zaJLl64hx8jY1TGGUkcsgkSuAwANoN5PG/5wPY7SqCr1//wiZvcNf3xh+YQ3EPdMwtamgPFA==","shasum":"431df59ccdafc9e96e0f7ca64ffd0e3ca56027fd","tarball":"https://registry.npmjs.org/@edwardguerra/design-system/-/design-system-1.0.0.tgz","fileCount":131,"unpackedSize":479786,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIGRQ9Mu5QxPbbbeq375s1coc0CudcNVZGDg61IcxhpKtAiA7R0ZSd7z1GL5C2RPs2W4NBAHhrv+u2U0TgPB7cq3teg=="}]},"_npmUser":{"name":"edwardguerra","email":"edwardguerra.oh@gmail.com"},"directories":{},"maintainers":[{"name":"edwardguerra","email":"edwardguerra.oh@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/design-system_1.0.0_1783801770907_0.9091288734852767"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-11T20:29:30.779Z","1.0.0":"2026-07-11T20:29:31.062Z","modified":"2026-07-11T20:29:31.274Z"},"maintainers":[{"name":"edwardguerra","email":"edwardguerra.oh@gmail.com"}],"description":"Design tokens and React components shared across Edward Guerra, Material and Home, and Midwest Husbands","homepage":"https://github.com/edwardguerra/design-system#readme","keywords":["design-system","components","ui","tokens"],"repository":{"type":"git","url":"git+https://github.com/edwardguerra/design-system.git"},"author":{"name":"Edward Guerra"},"bugs":{"url":"https://github.com/edwardguerra/design-system/issues"},"license":"MIT","readme":"# Design System\n\nA React + TypeScript component library and token pipeline, shared across three real sites/brands: **Edward Guerra** (personal portfolio), **Material and Home**, and **Midwest Husbands**.\n\n## 🎯 Overview\n\n- **Token-based theming** with Style Dictionary, sourced from each brand's actual live CSS custom properties\n- **24 React components** with TypeScript\n- **Three real brand themes** — `eg`, `materialandhome`, `midwest-husbands`\n- **Storybook documentation** with a live theme switcher\n- **Testing** with Vitest + Testing Library\n\n## 🚀 Quick Start\n\n```bash\n# Install dependencies\nnpm install\n\n# Build tokens, CSS, and components\nnpm run build\n\n# Start Storybook\nnpm run storybook\n\n# Run tests\nnpm test\n```\n\n## 📦 Components\n\nAll 24 components are implemented: Button, Badge, Card, Input, Modal, Tabs, Accordion, Switch, Radio, ThemeProvider, Pagination, Icon, Tooltip, DescriptionList, Timeline, Carousel, List, Nav, Article, Feature, TOC, Slider, Table, Menu, Link.\n\nMost were ported directly from the SCSS shared across the three live sites (`2025-portfolio`, `materialandhome`, `midwest-husbands`, which all use the same component partial structure). A few — Pagination, Icon, DescriptionList, Nav, Article, Feature, TOC, and Tooltip — didn't have a clean componentized API in the source (page-specific layout CSS, or in Tooltip's case, no CSS at all), so their React APIs are original designs built from the tokens and visual patterns those sites do use, rather than a literal mirror.\n\n## 🎨 Tokens & Theming\n\nDesign tokens are defined in JSON (Style Dictionary) and compiled to CSS/SCSS/JS/TypeScript in `dist/tokens/`. The three brand themes live in `src/brand-themes.css`, keyed by `[data-color-theme=\"eg\" | \"materialandhome\" | \"midwest-husbands\"]`, each setting the same `--eg-*` semantic variable names components already use — see [THEME_SWITCHING.md](./THEME_SWITCHING.md).\n\n```\ntokens/\n├── core/           # Primitive tokens (colors, spacing, typography)\n├── semantic/       # Component-specific tokens\n└── brands/         # Brand primary/secondary/tint (eg, materialandhome, midwest-husbands)\n```\n\n## 🏗️ Project Structure\n\n```\n.\n├── src/\n│   ├── components/       # React components (24)\n│   ├── brand-themes.css  # The 3 real brand theme definitions\n│   ├── styles/            # Compiles to the static-site CSS bundle\n│   └── index.ts           # Public exports\n├── tokens/                # Design token definitions\n├── dist/                  # Build output (tokens, CSS, components)\n└── .storybook/             # Storybook config\n```\n\n## 🧪 Testing\n\n```bash\nnpm test              # Watch mode\nnpm test -- --run     # Run once\nnpm run lint\n```\n\n## 📖 Documentation\n\n```bash\nnpm run storybook            # http://localhost:6006\nnpm run build-storybook      # Static build\n```\n\n## 📄 License\n\n[Your License Here]\n","readmeFilename":"README.md","_rev":"1-35e7ee09534737000992bc87d38efaa6"}