{"_id":"@10x-roofing/ui-components","_rev":"2-6b12944a2d89f9598214334955f59cdf","name":"@10x-roofing/ui-components","dist-tags":{"latest":"1.1.0"},"versions":{"1.0.0":{"name":"@10x-roofing/ui-components","version":"1.0.0","keywords":["react","components","ui","design-system","10x-roofing"],"author":{"name":"10X Roofing Team"},"license":"MIT","_id":"@10x-roofing/ui-components@1.0.0","maintainers":[{"name":"vishnu01110110","email":"vbadam@cardoneventures.com"}],"dist":{"shasum":"cdd056d9637f4a1a7cd016afa0a0767e35cf4cfb","tarball":"https://registry.npmjs.org/@10x-roofing/ui-components/-/ui-components-1.0.0.tgz","fileCount":14,"integrity":"sha512-abI1yXT3OFkDkE09kgAtteQwSnZGJOoE7bjSfU3tFWpEFWMIH1aosUtK26jF1BRMLkmhhG2MSZbG659xy1ve1g==","signatures":[{"sig":"MEYCIQDWHskNnBfj9vF19fNYkHn7X4U17ZjTr84n9rn4xg5peQIhAODtDqQp9rj/AMn5esqnk7yzEebdngEZiahmKubRPMGW","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":337010},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./styles":"./dist/styles.css"},"gitHead":"065c848295507e86f60da351cda83a0a6a7bf627","scripts":{"dev":"tsup --watch","lint":"eslint src --ext .ts,.tsx","build":"tsup","type-check":"tsc --noEmit","prepublishOnly":"npm run build"},"_npmUser":{"name":"vishnu01110110","actor":{"name":"vishnu01110110","type":"user","email":"vbadam@cardoneventures.com"},"email":"vbadam@cardoneventures.com"},"_npmVersion":"10.8.2","description":"Reusable UI components for 10X Roofing applications","directories":{},"_nodeVersion":"20.19.2","dependencies":{"clsx":"^2.1.1","framer-motion":"^12.23.0","class-variance-authority":"^0.7.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.3.5","eslint":"^9.17.0","typescript":"^5.7.2","@types/react":"^18.3.12","@types/react-dom":"^18.3.1"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ui-components_1.0.0_1752004121209_0.8940961473259905","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@10x-roofing/ui-components","version":"1.1.0","description":"Reusable UI components for 10X Roofing applications","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./styles":"./dist/styles.css"},"scripts":{"build":"tsup","dev":"tsup --watch","type-check":"tsc --noEmit","lint":"eslint src --ext .ts,.tsx","prepublishOnly":"npm run build"},"keywords":["react","components","ui","design-system","10x-roofing"],"author":{"name":"10X Roofing Team"},"license":"MIT","peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"dependencies":{"class-variance-authority":"^0.7.1","clsx":"^2.1.1","framer-motion":"^12.23.0"},"devDependencies":{"@types/react":"^18.3.12","@types/react-dom":"^18.3.1","eslint":"^9.17.0","tsup":"^8.3.5","typescript":"^5.7.2"},"publishConfig":{"access":"public"},"_id":"@10x-roofing/ui-components@1.1.0","gitHead":"065c848295507e86f60da351cda83a0a6a7bf627","_nodeVersion":"20.19.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-Bw8/teP6wRdFqc5i16348+3AgdCJD9D6pyYL3B6YkqYh9EH7f0bzt773tZNFnSGpSkYt8fYWYBgQk80H6z5H+A==","shasum":"0a17d6c6e91c1a464f2fa91205e01ec44a619c0e","tarball":"https://registry.npmjs.org/@10x-roofing/ui-components/-/ui-components-1.1.0.tgz","fileCount":14,"unpackedSize":338979,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIDfDOwU8zEKFb1Yfo9Ix+WHul8ia1qSrOatSJHtoYna/AiEA9oxY6dbtXYLOEeeLQjGctMGNq6GaVo+VDl0n5vu/CUU="}]},"_npmUser":{"name":"vishnu01110110","email":"vbadam@cardoneventures.com","actor":{"name":"vishnu01110110","email":"vbadam@cardoneventures.com","type":"user"}},"directories":{},"maintainers":[{"name":"vishnu01110110","email":"vbadam@cardoneventures.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ui-components_1.1.0_1752004348191_0.5379860367663922"},"_hasShrinkwrap":false}},"time":{"created":"2025-07-08T19:48:40.847Z","modified":"2025-07-08T19:52:28.653Z","1.0.0":"2025-07-08T19:48:41.394Z","1.1.0":"2025-07-08T19:52:28.394Z"},"author":{"name":"10X Roofing Team"},"license":"MIT","keywords":["react","components","ui","design-system","10x-roofing"],"description":"Reusable UI components for 10X Roofing applications","maintainers":[{"name":"vishnu01110110","email":"vbadam@cardoneventures.com"}],"readme":"# 10X Roofing UI Components\n\nA reusable React component library built for the 10X Roofing ecosystem, featuring glass morphism design patterns, dashboard components, and comprehensive form elements.\n\n## Installation\n\n```bash\nnpm install @10x-roofing/ui-components\n```\n\n## Quick Start\n\n```tsx\nimport {\n  Button,\n  Card,\n  CardHeader,\n  CardTitle,\n  CardContent,\n  Heading,\n  Text,\n  StatusBar,\n  DataTable\n} from '@10x-roofing/ui-components';\n\nfunction MyDashboard() {\n  return (\n    <Card variant=\"default\">\n      <CardHeader>\n        <CardTitle>Sales Dashboard</CardTitle>\n      </CardHeader>\n      <CardContent>\n        <Heading size=\"h4\">Performance Metrics</Heading>\n        <StatusBar percentage={85} />\n        <Button variant=\"primary\">View Details</Button>\n      </CardContent>\n    </Card>\n  );\n}\n```\n\n## Components\n\n### Layout Components\n- **Card** - Glass morphism cards with variants: `default`, `simple`, `subtle`, `flat`\n- **LoadingAnimation** - Loading spinners and skeleton states\n\n### Form Components\n- **Button** - Multiple variants: `primary`, `secondary`, `glass`, `tab`, `outline`, `icon`\n- **Select** - Dropdown selectors with search and loading states\n- **SearchInput** - Debounced search with clear functionality\n- **FilterDropdown** - Filter dropdowns with icons and counts\n\n### Data Components\n- **DataTable** - Complete table with search, filtering, sorting, and pagination\n- **StatusBar** - KPI progress bars with automatic color coding\n- **TrendIndicator** - Trend arrows showing positive/negative/neutral states\n\n### Typography\n- **Heading** - Semantic headings: `hero`, `display`, `h1-h5`\n- **Text** - Body text: `body-lg`, `body`, `body-sm`, `caption`, `tiny`\n\n## Styling\n\nThis package uses Tailwind CSS and includes:\n- Glass morphism effects (`glass-elevated`, `glass-subtle`)\n- Brand gradient backgrounds (`brand-gradient`)\n- KPI color system (auto-colored based on percentages)\n- Typography scale matching dashboard patterns\n\n## Usage in Different Applications\n\n### React/Next.js Applications\n```tsx\nimport { Button, Card } from '@10x-roofing/ui-components';\n```\n\n### TypeScript Support\nAll components are fully typed with TypeScript interfaces.\n\n### Customization\nComponents use CSS classes that can be extended:\n```tsx\n<Button variant=\"primary\" className=\"my-custom-styles\">\n  Custom Button\n</Button>\n```\n\n## Design System\n\n- **Colors**: Automatic KPI coloring (green >80%, amber 60-80%, orange 40-60%, red <40%)\n- **Spacing**: 4px-based spacing system\n- **Animations**: Swift (100ms) and smooth (240ms) transitions\n- **Typography**: Montserrat font family with proper line heights\n\n## Examples\n\nSee `TestUIComponents.tsx` for comprehensive examples of all components in action.\n\n## Development\n\nBuilt with:\n- React 18+ \n- TypeScript\n- Tailwind CSS\n- Framer Motion (for animations)\n\nPerfect for sales dashboards, admin panels, data visualization tools, and any application needing professional glass morphism UI components. ","readmeFilename":"README.md"}