{"id":32724385,"url":"https://github.com/spexop-ui/spexop-packages","last_synced_at":"2025-11-03T01:01:55.443Z","repository":{"id":320053325,"uuid":"1080623594","full_name":"spexop-ui/spexop-packages","owner":"spexop-ui","description":"Spexop Design System - Professional React component library with a flexible theme system. Build modern web applications with primitives-first architecture.","archived":false,"fork":false,"pushed_at":"2025-10-30T17:34:37.000Z","size":5286,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-30T17:37:23.048Z","etag":null,"topics":["accessibility","components","css-modules","design-system","primitives-first","react","theme-system","typescript","ui-library"],"latest_commit_sha":null,"homepage":"https://spexop.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/spexop-ui.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-10-21T16:19:39.000Z","updated_at":"2025-10-30T17:34:41.000Z","dependencies_parsed_at":"2025-10-21T18:35:23.345Z","dependency_job_id":null,"html_url":"https://github.com/spexop-ui/spexop-packages","commit_stats":null,"previous_names":["spexop-ui/spexop-packages"],"tags_count":21,"template":false,"template_full_name":null,"purl":"pkg:github/spexop-ui/spexop-packages","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spexop-ui%2Fspexop-packages","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spexop-ui%2Fspexop-packages/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spexop-ui%2Fspexop-packages/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spexop-ui%2Fspexop-packages/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/spexop-ui","download_url":"https://codeload.github.com/spexop-ui/spexop-packages/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spexop-ui%2Fspexop-packages/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":282138725,"owners_count":26620479,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-11-01T02:00:06.759Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["accessibility","components","css-modules","design-system","primitives-first","react","theme-system","typescript","ui-library"],"created_at":"2025-11-03T01:00:38.734Z","updated_at":"2025-11-03T01:01:55.426Z","avatar_url":"https://github.com/spexop-ui.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Spexop Design System\n\nProfessional React component library with a flexible theme system. Build modern web applications with primitives-first architecture.\n\n## 📦 Packages\n\n- **[@spexop/react](./packages/react)** - 60+ React components with full theme support\n- **[@spexop/theme](./packages/theme)** - Theme system with 13 presets and 29+ export formats\n- **[@spexop/icons](./packages/icons)** - 269 icons with filled variants and brand icons\n- **[@spexop/cli](./packages/cli)** - CLI tools for scaffolding and utilities (v0.6.2)\n\n## 🚀 Quick Start\n\n### Scaffold a New Project\n\nThe fastest way to get started:\n\n```bash\n# Create a new Spexop app (no installation needed)\nnpx @spexop/cli create my-app\n\n# Or install globally\nnpm install -g @spexop/cli\nspexop create my-app\n```\n\n### For End Users (npm packages)\n\n```bash\nnpm install @spexop/react @spexop/theme @spexop/icons\n```\n\n### For Contributors (workspace development)\n\nSee **[WORKSPACE.md](./WORKSPACE.md)** for complete workspace guide.\n\n```bash\n# Install dependencies\npnpm install\n\n# Build packages\npnpm build:icons \u0026\u0026 pnpm build:theme \u0026\u0026 pnpm build:react\n```\n### With Pre-built Theme\n\n```typescript\nimport { Button, Grid, Card, Icon } from '@spexop/react';\nimport { Home } from '@spexop/icons';\nimport '@spexop/theme/dist/css/tech.css';\nimport '@spexop/react/dist/index.css';\n\nfunction App() {\n  return (\n    \u003cGrid columns={12} gap={24}\u003e\n      \u003cCard\u003e\n        \u003cIcon name={Home} size={24} /\u003e\n        \u003cButton variant=\"primary\"\u003eGet Started\u003c/Button\u003e\n      \u003c/Card\u003e\n    \u003c/Grid\u003e\n  );\n}\n```\n\n### With Custom Theme\n\n```typescript\nimport { ThemeProvider } from '@spexop/react';\nimport { techPreset } from '@spexop/theme';\n\nfunction App() {\n  return (\n    \u003cThemeProvider theme={techPreset}\u003e\n      \u003cYourApp /\u003e\n    \u003c/ThemeProvider\u003e\n  );\n}\n```\n\n## ⚡ Quick Start with Helper Utilities\n\nReduce boilerplate by 87% with Spexop helper utilities:\n\n### Before (145 lines)\n\n```typescript\n// Manual hash routing\nconst getPathFromHash = () =\u003e window.location.hash.slice(1) || \"/\";\nconst [currentPath, setCurrentPath] = useState(getPathFromHash);\nuseEffect(() =\u003e {\n  const handleHashChange = () =\u003e setCurrentPath(getPathFromHash());\n  window.addEventListener(\"hashchange\", handleHashChange);\n  return () =\u003e window.removeEventListener(\"hashchange\", handleHashChange);\n}, []);\n\n// Manual command generation (50+ lines)\nconst commands = [\n  {\n    id: \"home\",\n    label: \"Go to Home\",\n    description: \"Navigate to home page\",\n    category: \"Navigation\",\n    onSelect: () =\u003e {\n      window.location.hash = \"/\";\n      window.scrollTo(0, 0);\n    },\n  },\n  // ... repetitive\n];\n\n// Manual search data (40+ lines)\n// Manual HMR setup (12+ lines)\n// Manual provider nesting (10+ lines)\n```\n\n### After (30 lines)\n\n```typescript\nimport { \n  useHashRouter, \n  createNavigationCommands, \n  createSearchResults,\n  createSpexopRoot,\n  SpexopProvider,\n  AppLayout \n} from '@spexop/react';\n\n// Define routes once\nconst routes = [\n  { path: '/', label: 'Home', description: 'Home page', icon: 'Home' },\n  { path: '/about', label: 'About', description: 'About us', icon: 'Info' },\n];\n\n// Generate everything automatically\nconst commands = createNavigationCommands(routes);\nconst searchData = createSearchResults(routes);\n\nfunction App() {\n  const { Component } = useHashRouter({\n    '/': HomePage,\n    '/about': AboutPage,\n  });\n  \n  return (\n    \u003cSpexopProvider\u003e\n      \u003cAppLayout topBar={\u003cTopBar /\u003e} sidebar={\u003cSidebar /\u003e}\u003e\n        \u003cCommandPalette commands={commands} /\u003e\n        \u003cSearchModal results={searchData} /\u003e\n        {Component \u0026\u0026 \u003cComponent /\u003e}\n      \u003c/AppLayout\u003e\n    \u003c/SpexopProvider\u003e\n  );\n}\n\ncreateSpexopRoot(document.getElementById('root')!).render(\u003cApp /\u003e);\n```\n\n**Result:** 87% less boilerplate, fully typed, accessible by default.\n\n[Learn more about helper utilities →](./packages/react/src/utils/README.md)\n\n## 📖 Documentation\n\nFor examples and usage guides, see the documentation site: [docs.spexop.com](https://docs.spexop.com)\n\n### For Contributors\n\n- **[CONTRIBUTING.md](./CONTRIBUTING.md)** - Contribution guidelines\n- [Getting Started](./docs/getting-started.md) - Quick start for contributors\n\n### For End Users\n\n- [Theme System Guide](./packages/theme/README.md)\n- [Component Documentation](./packages/react/README.md)\n- [Icons Catalog](./packages/icons/ICONS.md) - All 269 icons\n- [CLI Tools](./packages/cli/README.md)\n\n## 🔗 Links\n\n- **Website**: \u003chttps://spexop.com\u003e\n- **Theme Builder**: \u003chttps://builder.spexop.com\u003e\n- **Documentation**: \u003chttps://docs.spexop.com\u003e\n- **npm**: [@spexop/react](https://www.npmjs.com/package/@spexop/react), [@spexop/theme](https://www.npmjs.com/package/@spexop/theme), [@spexop/icons](https://www.npmjs.com/package/@spexop/icons)\n\n## 🤝 Contributing\n\nSee [CONTRIBUTING.md](./CONTRIBUTING.md) for contribution guidelines.\n\n## 📄 License\n\nMIT © Spexop Team\n\n---\n\n**Spexop Design System** • Built with TypeScript \u0026 React\n\n[GitHub](https://github.com/spexop-ui/spexop-packages) • [npm](https://www.npmjs.com/org/spexop) • [Website](https://spexop.com)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspexop-ui%2Fspexop-packages","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspexop-ui%2Fspexop-packages","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspexop-ui%2Fspexop-packages/lists"}