{"_id":"@billy_mcdowell/prmn-angular-v3","_rev":"2-1d61d7f150f424b38e8bfc80f05c0837","name":"@billy_mcdowell/prmn-angular-v3","dist-tags":{"latest":"0.0.2"},"versions":{"0.0.1":{"name":"@billy_mcdowell/prmn-angular-v3","version":"0.0.1","_id":"@billy_mcdowell/prmn-angular-v3@0.0.1","maintainers":[{"name":"billy_mcdowell","email":"wilgemcdowell@gmail.com"}],"dist":{"shasum":"903eedbe7ec7165d93aa4daf82a27191f501adb1","tarball":"https://registry.npmjs.org/@billy_mcdowell/prmn-angular-v3/-/prmn-angular-v3-0.0.1.tgz","fileCount":5,"integrity":"sha512-/zUCwJNFiRXxEIa+cbuZ/iw0FenSZgy+b8IiNutyhBWWMox/8kfz142Sx5d4qg8S+9LHbhJW1ItepH1LISzcHA==","signatures":[{"sig":"MEUCIQD+HB80SIO0pXQlkk5q5pbtsTFqiaDD5Yd5DqqGF7+NkAIgSDgihkI8EWctJEeio0cGln4gyCCjSgezziVLzOs4cFo=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1490753},"module":"fesm2022/billy_mcdowell-prmn-angular-v3.mjs","exports":{".":{"types":"./index.d.ts","default":"./fesm2022/billy_mcdowell-prmn-angular-v3.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"023515790c2b9462a9561646ba3e5b910b7fdd4d","private":false,"typings":"index.d.ts","_npmUser":{"name":"billy_mcdowell","email":"wilgemcdowell@gmail.com"},"_npmVersion":"10.9.3","description":"Reusable, themeable UI primitives for Angular, built on top of `@spartan-ng/brain` and Tailwind CSS.","directories":{},"sideEffects":false,"_nodeVersion":"22.18.0","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^20.3.0","@angular/common":"^20.3.0"},"_npmOperationalInternal":{"tmp":"tmp/prmn-angular-v3_0.0.1_1773218763086_0.24890610576251437","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@billy_mcdowell/prmn-angular-v3","private":false,"version":"0.0.2","peerDependencies":{"@angular/common":"^20.3.0","@angular/core":"^20.3.0","@spartan-ng/brain":"^0.0.1-alpha.649","@ng-icons/core":"^33.1.0","@ng-icons/lucide":"^33.1.0","embla-carousel-angular":"^21.0.0","ngx-sonner":"^3.1.0"},"dependencies":{"tslib":"^2.3.0","class-variance-authority":"^0.7.1","clsx":"^2.1.1","tailwind-merge":"^3.5.0"},"sideEffects":false,"publishConfig":{"access":"public"},"module":"fesm2022/billy_mcdowell-prmn-angular-v3.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","default":"./fesm2022/billy_mcdowell-prmn-angular-v3.mjs"}},"_id":"@billy_mcdowell/prmn-angular-v3@0.0.2","gitHead":"1611b82fbdab3b4bc09f8bd4b0c462f27e15875a","description":"Reusable, themeable UI primitives for Angular, built on top of `@spartan-ng/brain` and Tailwind CSS.","_nodeVersion":"22.18.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-x690CmHjZSJdSB25EjdnbW8JB6dGdfY62oOwHGcqJfCN/GhClKtw3elAaik86V4SRKWzHmbytEWlY8RAhuyJ9A==","shasum":"f25f91ec4f4e4332c20658315e4795d5de471267","tarball":"https://registry.npmjs.org/@billy_mcdowell/prmn-angular-v3/-/prmn-angular-v3-0.0.2.tgz","fileCount":5,"unpackedSize":1497862,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIF/3pMEdpb/bEw6vw7JvKkbeS/K5TTWvaSlDUJf6DvTqAiEAtfOtihgEqDKJf4dd72CNC/7Iu6RZcwWeeK/jFQvgqaY="}]},"_npmUser":{"name":"billy_mcdowell","email":"wilgemcdowell@gmail.com"},"directories":{},"maintainers":[{"name":"billy_mcdowell","email":"wilgemcdowell@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/prmn-angular-v3_0.0.2_1773319491309_0.956877473622785"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-11T08:46:02.981Z","modified":"2026-03-12T12:44:51.575Z","0.0.1":"2026-03-11T08:46:03.257Z","0.0.2":"2026-03-12T12:44:51.464Z"},"description":"Reusable, themeable UI primitives for Angular, built on top of `@spartan-ng/brain` and Tailwind CSS.","maintainers":[{"name":"billy_mcdowell","email":"wilgemcdowell@gmail.com"}],"readme":"# PRMN Angular UI Library\n\nReusable, themeable UI primitives for Angular, built on top of `@spartan-ng/brain` and Tailwind CSS.\n\n> This README explains how to consume the `ui` library **from an external Angular application**, not how to develop the library itself.\n\n---\n\n## Package name\n\nThe library is published from the `projects/ui` workspace library as the scoped package `@billy_mcdowell/prmn-angular-v3`:\n\n```bash\nnpm install @billy_mcdowell/prmn-angular-v3\n```\n\nAll import examples below assume this package name.\n\n---\n\n## Prerequisites\n\n- **Angular**: `^20.3.0` (standalone components recommended). Your app should already be an Angular CLI app with `@angular/core` / `@angular/common` installed.\n- **Node / package manager**: Node 18+ with npm, pnpm, or yarn.\n- **CSS tooling** (installed in your app, typically as devDependencies):\n  - `tailwindcss@^4`\n  - `@tailwindcss/postcss`\n- **UI peer dependencies used by this library** (must be installed in your app):\n  - `@spartan-ng/brain`\n  - `@ng-icons/core`, `@ng-icons/lucide` (for icons)\n  - `embla-carousel-angular` (for carousel components)\n  - `ngx-sonner` (for toast notifications)\n\nYou may not need all of these for every project, but they are used across components exported by this library and are declared as `peerDependencies` of `@billy_mcdowell/prmn-angular-v3`.\n\n---\n\n## 1. Install the library and peer dependencies\n\nFrom your Angular application:\n\n```bash\nnpm install @billy_mcdowell/prmn-angular-v3 @spartan-ng/brain @ng-icons/core @ng-icons/lucide embla-carousel-angular ngx-sonner tailwindcss @tailwindcss/postcss\n```\n\nIf you are using pnpm or yarn, use the equivalent command.\n\n---\n\n## 2. Configure Tailwind CSS 4 + PostCSS\n\nCreate (or update) `postcss.config.json` in the root of your Angular app:\n\n```json\n{\n  \"plugins\": {\n    \"@tailwindcss/postcss\": {}\n  }\n}\n```\n\nTailwind 4 uses this PostCSS plugin to process the special `@import \"tailwindcss\";` directive that the library’s styles rely on.\n\n---\n\n## 3. Import the styles in your global stylesheet\n\nIn your app’s global stylesheet (for example `src/styles.css`), add the following:\n\n```css\n@import \"tailwindcss\";\n@import \"@spartan-ng/brain/hlm-tailwind-preset.css\";\n\n/* Theme tokens & base styles matching this UI library.\n   You can start with these values and tweak colors/typography as needed. */\n:root {\n  --background: #ffffff;\n  --foreground: #1d2327;\n  --card: #ffffff;\n  --card-foreground: #1d2327;\n  --popover: #ffffff;\n  --popover-foreground: #1d2327;\n  --primary: #21016b;\n  --primary-foreground: #ffffff;\n  --secondary: #4e5a62;\n  --secondary-foreground: #ffffff;\n  --muted: #f3f5f6;\n  --muted-foreground: #5f6c75;\n  --accent: #f78e1e;\n  --accent-foreground: #121516;\n  --destructive: #cb2420;\n  --destructive-foreground: #ffffff;\n  --border: #b8c0c6;\n  --input: #b8c0c6;\n  --ring: #5f6c75;\n  --sidebar: #f3f5f6;\n  --sidebar-foreground: #1d2327;\n  --sidebar-primary: #21016b;\n  --sidebar-primary-foreground: #ffffff;\n  --sidebar-accent: #f78e1e;\n  --sidebar-accent-foreground: #121516;\n  --sidebar-border: #b8c0c6;\n  --sidebar-ring: #5f6c75;\n  --font-sans: Libre Franklin, ui-sans-serif, sans-serif, system-ui;\n  --font-serif: Merriweather, ui-serif, serif;\n  --font-mono: Open Sans, ui-sans-serif, sans-serif, system-ui;\n  --radius: 0.125rem;\n}\n\n.dark {\n  --background: #1d2327;\n  --foreground: #ffffff;\n  --card: #1d2327;\n  --card-foreground: #ffffff;\n  --popover: #1d2327;\n  --popover-foreground: #ffffff;\n  --primary: #21016b;\n  --primary-foreground: #ffffff;\n  --secondary: #4e5a62;\n  --secondary-foreground: #ffffff;\n  --muted: #424d55;\n  --muted-foreground: #5f6c75;\n  --accent: #f78e1e;\n  --accent-foreground: #121516;\n  --destructive: #cb2420;\n  --destructive-foreground: #ffffff;\n  --border: #5f6c75;\n  --input: #424d55;\n  --ring: #5f6c75;\n  --sidebar: #1d2327;\n  --sidebar-foreground: #ffffff;\n  --sidebar-primary: #21016b;\n  --sidebar-primary-foreground: #ffffff;\n  --sidebar-accent: #f78e1e;\n  --sidebar-accent-foreground: #121516;\n  --sidebar-border: #5f6c75;\n  --sidebar-ring: #5f6c75;\n}\n\n@layer base {\n  * {\n    @apply border-border outline-ring/50;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}\n```\n\nNotes:\n\n- The color/spacing/font variables above are the same design tokens used by this library (you can customize them as needed).\n- Ensure your `index.html` (or root layout) toggles a `.dark` class on the `<html>` or `<body>` element if you want dark mode.\n\n---\n\n## 4. Import and use components\n\nAll public components/directives are exported from the library’s public API (`src/public-api.ts`), which is what consumers import from the npm package.\n\n### Example: Button\n\n```ts\n// app/example/example.component.ts\nimport { Component } from '@angular/core';\nimport { HlmButton } from '@billy_mcdowell/prmn-angular-v3';\n\n@Component({\n  standalone: true,\n  selector: 'app-example',\n  imports: [HlmButton],\n  template: `\n    <button hlmBtn variant=\"default\">\n      Primary button\n    </button>\n  `,\n})\nexport class ExampleComponent {}\n```\n\nYou can also use the convenience import group where available (for example, `HlmButtonImports`):\n\n```ts\nimport { HlmButtonImports } from '@billy_mcdowell/prmn-angular-v3';\n\n@Component({\n  standalone: true,\n  selector: 'app-example',\n  imports: [...HlmButtonImports],\n  template: `<button hlmBtn>Click me</button>`,\n})\nexport class ExampleComponent {}\n```\n\n### Other components\n\nThe library exposes many primitives, for example:\n\n- Accordion, Alert, Dialog, Dropdown Menu\n- Button, Badge, Avatar, Breadcrumb\n- Form elements (`Input`, `Textarea`, `Checkbox`, `RadioGroup`, `Switch`, `Select`, `NativeSelect`, etc.)\n- Layout and navigation (`Sidebar`, `NavigationMenu`, `Tabs`, `Pagination`, `Collapsible`, `ScrollArea`, `Resizable`)\n- Feedback components (`AlertDialog`, `Popover`, `Tooltip`, `Sonner` toasts, `Skeleton`, `Spinner`, `Progress`)\n- Typography utilities (`hlmH1`–`hlmH4`, `hlmP`, `hlmLead`, etc.)\n\nEach feature is exported from the root package (for example `import { HlmInput } from '@billy_mcdowell/prmn-angular-v3';`).  \nWhen in doubt, check the library’s `public-api.ts` for the full list of exports.\n\n---\n\n## 5. Running your app\n\nAfter installation and setup:\n\n```bash\nnpm run build      # build your Angular app\nnpm start          # or ng serve\n```\n\nYou should now see the components rendered with the design system styles from this library.\n\n---\n\n## Local development / Storybook (optional)\n\nIf you are working in this monorepo:\n\n- **Build the library**:\n\n  ```bash\n  npm run build:ui\n  ```\n\n- **Run Storybook for the UI library**:\n\n  ```bash\n  npm run storybook\n  ```\n\nThese commands are for contributors to this repo; external consumers only need the steps in sections 1–4.\n\n# PRMN Angular UI Library\n\nReusable, themeable UI primitives for Angular, built on top of `@spartan-ng/brain` and Tailwind CSS.\n\n> This README explains how to consume the `ui` library **from an external Angular application**, not how to develop the library itself.\n\n---\n\n## Package name\n\nThe library is published from the `projects/ui` workspace library as the scoped package `@billy_mcdowell/prmn-angular-v3`:\n\n```bash\nnpm install @billy_mcdowell/prmn-angular-v3\n```\n\nAll import examples below assume this package name.\n\n---\n\n## Prerequisites\n\n- **Angular**: `^20.3.0` (standalone components recommended)\n- **Node / package manager**: Node 18+ with npm, pnpm, or yarn\n- **CSS tooling**:\n  - `tailwindcss@^4`\n  - `@tailwindcss/postcss`\n- **UI dependencies used by this library** (install them in your app):\n  - `@spartan-ng/brain`\n  - `@ng-icons/core`, `@ng-icons/lucide` (for icons)\n  - `embla-carousel-angular` (for carousel components)\n  - `ngx-sonner` (for toast notifications)\n\nYou may not need all of these for every project, but they are used across components exported by this library.\n\n---\n\n## 1. Install the library and peer dependencies\n\nFrom your Angular application:\n\n```bash\nnpm install @billy_mcdowell/prmn-angular-v3 @spartan-ng/brain @ng-icons/core @ng-icons/lucide embla-carousel-angular ngx-sonner tailwindcss @tailwindcss/postcss\n```\n\nIf you are using pnpm or yarn, use the equivalent command.\n\n---\n\n## 2. Configure Tailwind CSS 4 + PostCSS\n\nCreate (or update) `postcss.config.json` in the root of your Angular app:\n\n```json\n{\n  \"plugins\": {\n    \"@tailwindcss/postcss\": {}\n  }\n}\n```\n\nTailwind 4 uses this PostCSS plugin to process the special `@import \"tailwindcss\";` directive that the library’s styles rely on.\n\n---\n\n## 3. Import the styles in your global stylesheet\n\nIn your app’s global stylesheet (for example `src/styles.css`), add the following:\n\n```css\n@import \"tailwindcss\";\n@import \"@spartan-ng/brain/hlm-tailwind-preset.css\";\n\n/* Theme tokens & base styles matching this UI library.\n   You can start with these values and tweak colors/typography as needed. */\n:root {\n  --background: #ffffff;\n  --foreground: #1d2327;\n  --card: #ffffff;\n  --card-foreground: #1d2327;\n  --popover: #ffffff;\n  --popover-foreground: #1d2327;\n  --primary: #21016b;\n  --primary-foreground: #ffffff;\n  --secondary: #4e5a62;\n  --secondary-foreground: #ffffff;\n  --muted: #f3f5f6;\n  --muted-foreground: #5f6c75;\n  --accent: #f78e1e;\n  --accent-foreground: #121516;\n  --destructive: #cb2420;\n  --destructive-foreground: #ffffff;\n  --border: #b8c0c6;\n  --input: #b8c0c6;\n  --ring: #5f6c75;\n  --sidebar: #f3f5f6;\n  --sidebar-foreground: #1d2327;\n  --sidebar-primary: #21016b;\n  --sidebar-primary-foreground: #ffffff;\n  --sidebar-accent: #f78e1e;\n  --sidebar-accent-foreground: #121516;\n  --sidebar-border: #b8c0c6;\n  --sidebar-ring: #5f6c75;\n  --font-sans: Libre Franklin, ui-sans-serif, sans-serif, system-ui;\n  --font-serif: Merriweather, ui-serif, serif;\n  --font-mono: Open Sans, ui-sans-serif, sans-serif, system-ui;\n  --radius: 0.125rem;\n}\n\n.dark {\n  --background: #1d2327;\n  --foreground: #ffffff;\n  --card: #1d2327;\n  --card-foreground: #ffffff;\n  --popover: #1d2327;\n  --popover-foreground: #ffffff;\n  --primary: #21016b;\n  --primary-foreground: #ffffff;\n  --secondary: #4e5a62;\n  --secondary-foreground: #ffffff;\n  --muted: #424d55;\n  --muted-foreground: #5f6c75;\n  --accent: #f78e1e;\n  --accent-foreground: #121516;\n  --destructive: #cb2420;\n  --destructive-foreground: #ffffff;\n  --border: #5f6c75;\n  --input: #424d55;\n  --ring: #5f6c75;\n  --sidebar: #1d2327;\n  --sidebar-foreground: #ffffff;\n  --sidebar-primary: #21016b;\n  --sidebar-primary-foreground: #ffffff;\n  --sidebar-accent: #f78e1e;\n  --sidebar-accent-foreground: #121516;\n  --sidebar-border: #5f6c75;\n  --sidebar-ring: #5f6c75;\n}\n\n@layer base {\n  * {\n    @apply border-border outline-ring/50;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}\n```\n\nNotes:\n\n- The color/spacing/font variables above are the same design tokens used by this library (you can customize them as needed).\n- Ensure your `index.html` (or root layout) toggles a `.dark` class on the `<html>` or `<body>` element if you want dark mode.\n\n---\n\n## 4. Import and use components\n\nAll public components/directives are exported from the library’s public API (`src/public-api.ts`), which is what consumers import from the npm package.\n\n### Example: Button\n\n```ts\n// app/example/example.component.ts\nimport { Component } from '@angular/core';\nimport { HlmButton } from '@billy_mcdowell/prmn-angular-v3';\n\n@Component({\n  standalone: true,\n  selector: 'app-example',\n  imports: [HlmButton],\n  template: `\n    <button hlmBtn variant=\"default\">\n      Primary button\n    </button>\n  `,\n})\nexport class ExampleComponent {}\n```\n\nYou can also use the convenience import group where available (for example, `HlmButtonImports`):\n\n```ts\nimport { HlmButtonImports } from '@billy_mcdowell/prmn-angular-v3';\n\n@Component({\n  standalone: true,\n  selector: 'app-example',\n  imports: [...HlmButtonImports],\n  template: `<button hlmBtn>Click me</button>`,\n})\nexport class ExampleComponent {}\n```\n\n### Other components\n\nThe library exposes many primitives, for example:\n\n- Accordion, Alert, Dialog, Dropdown Menu\n- Button, Badge, Avatar, Breadcrumb\n- Form elements (`Input`, `Textarea`, `Checkbox`, `RadioGroup`, `Switch`, `Select`, `NativeSelect`, etc.)\n- Layout and navigation (`Sidebar`, `NavigationMenu`, `Tabs`, `Pagination`, `Collapsible`, `ScrollArea`, `Resizable`)\n- Feedback components (`AlertDialog`, `Popover`, `Tooltip`, `Sonner` toasts, `Skeleton`, `Spinner`, `Progress`)\n- Typography utilities (`hlmH1`–`hlmH4`, `hlmP`, `hlmLead`, etc.)\n\nEach feature is exported from the root package (for example `import { HlmInput } from '@billy_mcdowell/prmn-angular-v3';`).  \nWhen in doubt, check the library’s `public-api.ts` for the full list of exports.\n\n---\n\n## 5. Running your app\n\nAfter installation and setup:\n\n```bash\nnpm run build      # build your Angular app\nnpm start          # or ng serve\n```\n\nYou should now see the components rendered with the design system styles from this library.\n\n---\n\n## Local development / Storybook (optional)\n\nIf you are working in this monorepo:\n\n- **Build the library**:\n\n  ```bash\n  npm run build:ui\n  ```\n\n- **Run Storybook for the UI library**:\n\n  ```bash\n  npm run storybook\n  ```\n\nThese commands are for contributors to this repo; external consumers only need the steps in sections 1–4.\n\n","readmeFilename":"README.md"}