{"_id":"@astralisone/risk-ds","name":"@astralisone/risk-ds","dist-tags":{"latest":"1.2.16"},"versions":{"1.2.16":{"name":"@astralisone/risk-ds","version":"1.2.16","type":"module","description":"Modern glassmorphism design system with React, TypeScript, and Tailwind CSS","main":"./dist/index.cjs.js","module":"./dist/index.esm.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css","./dist/styles.css":"./dist/styles.css","./dist/styles2.css":"./dist/styles.css","./theme":{"types":"./dist/theme/index.d.ts","import":"./dist/theme/index.js","require":"./dist/theme/index.cjs"},"./components/layout":{"types":"./dist/components/layout/index.d.ts","import":"./dist/components/layout/index.js","require":"./dist/components/layout/index.cjs"},"./components/ui":{"types":"./dist/components/ui/index.d.ts","import":"./dist/components/ui/index.js","require":"./dist/components/ui/index.cjs"},"./components/cards":{"types":"./dist/components/cards/index.d.ts","import":"./dist/components/cards/index.js","require":"./dist/components/cards/index.cjs"},"./components/charts":{"types":"./dist/components/charts/index.d.ts","import":"./dist/components/charts/index.js","require":"./dist/components/charts/index.cjs"},"./tailwind":"./src/theme/tailwind.preset.js","./examples/*":"./examples/*"},"scripts":{"dev":"vite","build":"yarn build-lib","build-lib":"vite build --config vite.lib.config.ts","build-dev":"tsc && vite build","preview":"vite preview","storybook":"storybook dev -p 6006","build-storybook":"storybook build","test":"playwright test","test:ui":"playwright test --ui","test:headed":"playwright test --headed","lint":"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0","lint:fix":"eslint . --ext ts,tsx --fix","type-check":"tsc --noEmit","create-project":"node scripts/create-project.js"},"dependencies":{"clsx":"^2.0.0","framer-motion":"^10.16.4","recharts":"^2.8.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"devDependencies":{"react":"^18.2.0","react-dom":"^18.2.0","@playwright/test":"^1.40.0","@storybook/addon-essentials":"^7.5.3","@storybook/addon-interactions":"^7.5.3","@storybook/addon-links":"^7.5.3","@storybook/addon-onboarding":"^1.0.8","@storybook/blocks":"^7.5.3","@storybook/react":"^7.5.3","@storybook/react-vite":"^7.5.3","@storybook/testing-library":"^0.2.2","@types/react":"^18.2.37","@types/react-dom":"^18.2.15","@typescript-eslint/eslint-plugin":"^6.10.0","@typescript-eslint/parser":"^6.10.0","@vitejs/plugin-react":"^4.1.0","autoprefixer":"^10.4.16","eslint":"^8.53.0","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-react-refresh":"^0.4.4","eslint-plugin-storybook":"^0.6.15","postcss":"^8.4.31","storybook":"^7.5.3","tailwindcss":"^3.3.5","typescript":"^5.2.2","vite":"^4.5.0","vite-plugin-dts":"^3.6.3"},"keywords":["react","typescript","tailwind","design-system","glassmorphism","components","ui-components","risk-management","dashboard","charts"],"author":{"name":"Gregory Starr"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/astralisone/risk-ds.git"},"homepage":"https://github.com/astralisone/risk-ds#readme","bugs":{"url":"https://github.com/astralisone/risk-ds/issues"},"publishConfig":{"access":"public"},"engines":{"node":">=16.0.0"},"sideEffects":["**/*.css"],"_id":"@astralisone/risk-ds@1.2.16","_nodeVersion":"22.16.0","_npmVersion":"11.4.2","dist":{"integrity":"sha512-u8UGqvWKlhJpBZksBEAM3DQaCjDFVQ7lLR20E+6ilfLnfSJoO0o13HsVX6tJYKmpflwfQjWRLJ/9d1Jrb41uGA==","shasum":"973a75f4c030712f211d7884e91e285d890d924a","tarball":"https://registry.npmjs.org/@astralisone/risk-ds/-/risk-ds-1.2.16.tgz","fileCount":191,"unpackedSize":577839,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIB/p4Hlia40bHIg9M5sODK5S6Q9id4r3mzbgMYrnUEncAiEA3K4BSresrvXvv+FpjTKIfZIlUr0+aJgh7Mh0FwIKQxg="}]},"_npmUser":{"name":"astralisadmin","email":"ceo@astralisone.com","actor":{"name":"astralisadmin","email":"ceo@astralisone.com","type":"user"}},"directories":{},"maintainers":[{"name":"astralisadmin","email":"ceo@astralisone.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/risk-ds_1.2.16_1750675018024_0.15245638930785366"},"_hasShrinkwrap":false}},"time":{"created":"2025-06-23T10:36:57.897Z","1.2.16":"2025-06-23T10:36:58.208Z","modified":"2025-06-23T10:36:58.516Z"},"maintainers":[{"name":"astralisadmin","email":"ceo@astralisone.com"}],"description":"Modern glassmorphism design system with React, TypeScript, and Tailwind CSS","homepage":"https://github.com/astralisone/risk-ds#readme","keywords":["react","typescript","tailwind","design-system","glassmorphism","components","ui-components","risk-management","dashboard","charts"],"repository":{"type":"git","url":"git+https://github.com/astralisone/risk-ds.git"},"author":{"name":"Gregory Starr"},"bugs":{"url":"https://github.com/astralisone/risk-ds/issues"},"license":"MIT","readme":"# risk-ds Shield Design System\n\nA modern, production-ready React component library built with TypeScript, Tailwind CSS, and featuring beautiful glassmorphism designs inspired by financial dashboards.\n\n## ✨ Features\n\n- 🎨 **Glassmorphism Design** - Modern, translucent UI components with backdrop blur effects\n- 🚀 **React 18 + TypeScript** - Full type safety and modern React features\n- 🎭 **Tailwind CSS** - Utility-first styling with custom design tokens\n- 📚 **Storybook** - Interactive component documentation and testing\n- 🧪 **Playwright Testing** - Comprehensive E2E testing for all components\n- 🔄 **Dynamic Loading** - Lazy loading support for optimal performance\n- 📱 **Responsive** - Mobile-first design approach\n- ♿ **Accessible** - ARIA compliant components\n- 🎬 **Animations** - Smooth animations with Framer Motion\n\n## 🚀 Quick Start\n\n### Installation\n\n```bash\n# Install via npm\nnpm install @risk-ds/design-system\n\n# Install via yarn\nyarn add @risk-ds/design-system\n\n# Install peer dependencies (if not already installed)\nnpm install react react-dom\n```\n\n# Start Storybook for development\nnpm run storybook\n\n\n### Basic Usage\n\n```tsx\nimport { ProgressRing, MetricCard, StatCard } from '@risk-ds/design-system';\nimport '@risk-ds/design-system/styles';\n\nfunction App() {\n  return (\n    <div>\n      <ProgressRing \n        value={75} \n        size=\"lg\" \n        variant=\"primary\" \n        label=\"Progress\"\n      />\n      \n      <MetricCard\n        title=\"Revenue\"\n        value=\"$142.5K\"\n        change=\"+12.5%\"\n        changeType=\"positive\"\n        variant=\"success\"\n      />\n    </div>\n  );\n}\n```\n\n### With Tailwind CSS\n\nIf you're using Tailwind CSS in your project, you can import the raw components:\n\n```tsx\nimport { ProgressRing } from '@risk-ds/design-system';\n// No need to import styles separately - they're included in your Tailwind build\n```\n\n## 📦 Components\n\n### ProgressRing\n\nA circular progress indicator with customizable styling and animations.\n\n**Props:**\n- `value` (number): Progress value from 0 to 100\n- `size` ('sm' | 'md' | 'lg' | 'xl'): Size of the ring\n- `variant` ('primary' | 'secondary' | 'success' | 'warning'): Color variant\n- `strokeWidth` (number): Thickness of the ring\n- `showPercentage` (boolean): Show percentage in center\n- `label` (string): Optional label text\n- `animationDuration` (number): Animation duration in seconds\n\n**Example:**\n```tsx\n<ProgressRing\n  value={45}\n  size=\"lg\"\n  variant=\"primary\"\n  showPercentage={true}\n  label=\"Completion\"\n  strokeWidth={12}\n/>\n```\n\n## 🎨 Design Tokens\n\nThe design system includes comprehensive design tokens for:\n\n- **Colors**: Primary, secondary, success, warning, and neutral palettes\n- **Typography**: Inter font family with responsive sizing\n- **Spacing**: Consistent spacing scale\n- **Shadows**: Glassmorphism-specific shadow effects\n- **Animations**: Smooth transitions and keyframes\n\n## 🧪 Testing\n\n### Storybook Stories\n\nEach component includes comprehensive Storybook stories covering:\n- Default usage\n- All variants and sizes\n- Interactive playground\n- Edge cases\n\n### Playwright Tests\n\nAutomated tests verify:\n- Component rendering\n- Props functionality\n- Visual regression\n- Responsive behavior\n- Accessibility compliance\n\n```bash\n# Run all tests\nnpm run test\n\n# Run tests with UI\nnpm run test:ui\n\n# Run tests in headed mode\nnpm run test:headed\n```\n\n## 🛠 Development\n\n### Project Structure\n\n```\nsrc/\n├── components/\n│   └── charts/\n│       └── ProgressRing/\n│           ├── ProgressRing.tsx\n│           └── ProgressRing.stories.tsx\n├── index.ts\n└── index.css\n\ntests/\n└── components/\n    └── ProgressRing.spec.ts\n\n.storybook/\n├── main.ts\n└── preview.ts\n```\n\n### Scripts\n\n```bash\n# Development\nnpm run dev          # Start Vite dev server\nnpm run storybook    # Start Storybook\n\n# Building\nnpm run build        # Build the library\nnpm run build-lib    # Build for distribution\n\n# Testing\nnpm run test         # Run Playwright tests\nnpm run lint         # Run ESLint\nnpm run type-check   # Run TypeScript checks\n```\n\n## 🎯 Roadmap\n\n### Phase 1 (Current)\n- [x] ProgressRing component\n- [x] Storybook setup\n- [x] Playwright testing\n- [x] TypeScript configuration\n\n### Phase 2 (Next)\n- [ ] StatCard component\n- [ ] MetricCard component  \n- [ ] BarChart component\n- [ ] BaseCard component\n\n### Phase 3 (Future)\n- [ ] Layout components (Sidebar, Header)\n- [ ] Form components (SearchInput, Button)\n- [ ] Data display components\n- [ ] Complete dashboard template\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create a feature branch\n3. Add your component with stories and tests\n4. Run tests and ensure they pass\n5. Submit a pull request\n\n## 📄 License\n\nMIT License - see LICENSE file for details.\n\n---\n\nBuilt with ❤️ for modern web applications ","readmeFilename":"README.md","_rev":"1-166805d79544cda4f6a2af69d0a3e021"}