{"id":50372427,"url":"https://github.com/snatuva/angular-primitives","last_synced_at":"2026-06-01T10:00:44.729Z","repository":{"id":330470815,"uuid":"1122591000","full_name":"snatuva/angular-primitives","owner":"snatuva","description":null,"archived":false,"fork":false,"pushed_at":"2026-05-27T21:29:47.000Z","size":388,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-27T22:07:31.345Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/snatuva.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"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-12-25T04:47:01.000Z","updated_at":"2026-05-27T21:29:50.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/snatuva/angular-primitives","commit_stats":null,"previous_names":["sridhar-natuva/angular-primitives","snatuva/angular-primitives"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/snatuva/angular-primitives","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/snatuva%2Fangular-primitives","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/snatuva%2Fangular-primitives/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/snatuva%2Fangular-primitives/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/snatuva%2Fangular-primitives/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/snatuva","download_url":"https://codeload.github.com/snatuva/angular-primitives/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/snatuva%2Fangular-primitives/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33769492,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-01T02:00:06.963Z","response_time":115,"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":[],"created_at":"2026-05-30T08:00:26.078Z","updated_at":"2026-06-01T10:00:44.720Z","avatar_url":"https://github.com/snatuva.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["UI Primitives"],"readme":"# @snatuva/primitives\n\n\u003e Signals-first Angular primitives for building scalable, accessible UI systems.\n\n[![npm version](https://img.shields.io/npm/v/@snatuva/primitives)](https://www.npmjs.com/package/@snatuva/primitives)\n[![Angular](https://img.shields.io/badge/Angular-v17%2B-dd0031)](https://angular.dev)\n[![license](https://img.shields.io/npm/l/@snatuva/primitives)](./LICENSE)\n\n---\n\n## Overview\n\nMost Angular component libraries hand you finished UI. `@snatuva/primitives` hands you the foundations — unstyled, composable, and accessible building blocks you wire together your way.\n\nNo `NgModule`. No fighting the design system. Just clean primitives built on Angular Signals.\n\n---\n\n## Installation\n\n```bash\nnpm install @snatuva/primitives\n```\n\nRequires **Angular 17+**.\n\n---\n\n## Why primitives?\n\n| Traditional component libraries | `@snatuva/primitives` |\n|---|---|\n| Opinionated styles, hard to override | Zero styles — you own the look |\n| Bulky bundles with unused components | Tree-shakable, import only what you use |\n| RxJS-heavy internal state | Angular Signals throughout |\n| NgModule-based | Standalone-first |\n\n---\n\n## Primitives\n\n### Tabs\n\nA fully accessible tabs implementation following the [ARIA tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).\n\n**Directives**\n\n| Directive | Description | Inputs |\n|---|---|---|\n| `apTabs` | Root scope and state provider | — |\n| `apTabList` | Container for tab triggers | `orientation?: 'horizontal' \\| 'vertical'` (default: `'horizontal'`) |\n| `apTabTrigger` | Interactive tab button | `tabId: string`, `disabled?: boolean` |\n| `apTabPanel` | Panel region | `id: string`, `disabled?: boolean` |\n| `apTabContent` | Structural directive — conditionally renders active panel | `tabId: string` |\n\n**Import**\n\n```ts\nimport {\n  TabsDirective,\n  TabListDirective,\n  TabTriggerDirective,\n  TabPanelDirective,\n} from '@snatuva/primitives';\n```\n\n**Usage**\n\n```html\n\u003cdiv apTabs\u003e\n  \u003cdiv apTabList\u003e\n    \u003cbutton apTabTrigger tabId=\"overview\"\u003eOverview\u003c/button\u003e\n    \u003cbutton apTabTrigger tabId=\"details\"\u003eDetails\u003c/button\u003e\n    \u003cbutton apTabTrigger tabId=\"settings\" [disabled]=\"true\"\u003eSettings\u003c/button\u003e\n  \u003c/div\u003e\n\n  \u003csection apTabPanel id=\"overview\"\u003e\n    \u003cp\u003eOverview content\u003c/p\u003e\n  \u003c/section\u003e\n  \u003csection apTabPanel id=\"details\"\u003e\n    \u003cp\u003eDetails content\u003c/p\u003e\n  \u003c/section\u003e\n  \u003csection apTabPanel id=\"settings\"\u003e\n    \u003cp\u003eSettings content\u003c/p\u003e\n  \u003c/section\u003e\n\u003c/div\u003e\n```\n\nARIA attributes (`role=\"tab\"`, `aria-selected`, `aria-controls`, `role=\"tabpanel\"`, `aria-labelledby`, `aria-hidden`) are applied automatically.\n\n**Vertical tabs**\n\n```html\n\u003cdiv apTabs\u003e\n  \u003cdiv apTabList orientation=\"vertical\"\u003e\n    \u003cbutton apTabTrigger tabId=\"profile\"\u003eProfile\u003c/button\u003e\n    \u003cbutton apTabTrigger tabId=\"billing\"\u003eBilling\u003c/button\u003e\n  \u003c/div\u003e\n  \u003csection apTabPanel id=\"profile\"\u003e...\u003c/section\u003e\n  \u003csection apTabPanel id=\"billing\"\u003e...\u003c/section\u003e\n\u003c/div\u003e\n```\n\n**Conditional rendering with `apTabContent`**\n\nUse `apTabContent` to defer rendering panel content until the tab is active:\n\n```html\n\u003csection apTabPanel id=\"analytics\"\u003e\n  \u003cng-template apTabContent tabId=\"analytics\"\u003e\n    \u003c!-- Only rendered when this panel is active --\u003e\n    \u003capp-analytics-chart /\u003e\n  \u003c/ng-template\u003e\n\u003c/section\u003e\n```\n\n---\n\n## Accessibility\n\nEvery primitive is built to satisfy ARIA authoring practices out of the box:\n\n- Semantic roles applied automatically\n- Keyboard navigation (Arrow keys, Home, End, Tab)\n- `aria-selected`, `aria-controls`, `aria-labelledby`, `aria-hidden` wired up\n- Focus management handled internally\n- Disabled states respected by both keyboard and assistive technology\n\n---\n\n## Core design principles\n\n**Signals-first.** State is managed with Angular Signals. RxJS is used only where it is the right tool, not the default.\n\n**Standalone.** No `NgModule` required. Drop a directive into any standalone component.\n\n**Headless.** Primitives ship with zero styles. You apply your design system on top — CSS, Tailwind, or anything else.\n\n**Composable.** Primitives are scoped and self-contained. Nest them, extend them, or combine them without fighting internal abstractions.\n\n**Tree-shakable.** Only the primitives you import end up in your bundle.\n\n---\n\n## Roadmap\n\n- [x] Tabs\n- [x] Accordion\n- [x] Dialog / Modal\n- [ ] Popover\n- [ ] Select\n- [ ] Checkbox \u0026 Radio group\n- [ ] Toggle / Switch\n- [x] Tooltip\n- [ ] Accessibility utilities\n- [ ] CDK integrations\n- [ ] Documentation site\n\n---\n\n## Contributing\n\nContributions are welcome. If you have ideas for new primitives, accessibility improvements, or API refinements, open an issue or pull request.\n\n---\n\n## Author\n\nBuilt by **Siva Sridhar Natuva**.\n\n---\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsnatuva%2Fangular-primitives","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsnatuva%2Fangular-primitives","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsnatuva%2Fangular-primitives/lists"}