@ng-primitives/mcp 0.95.0

package/src/generated/primitives-data.json

@@ -0,0 +1,1521 @@
+[
+  {
+    "name": "a11y",
+    "entryPoint": "ng-primitives/a11y",
+    "exports": [
+      "injectVisuallyHiddenState",
+      "ngpVisuallyHidden",
+      "NgpVisuallyHiddenStateToken",
+      "provideVisuallyHiddenState",
+      "type NgpVisuallyHiddenProps",
+      "type NgpVisuallyHiddenState"
+    ],
+    "hasSecondaryEntryPoint": true,
+    "category": "utility",
+    "description": "a11y primitive component",
+    "accessibility": [],
+    "examples": []
+  },
+  {
+    "name": "accordion",
+    "entryPoint": "ng-primitives/accordion",
+    "exports": [
+      "NgpAccordionContent",
+      "injectAccordionContentState",
+      "ngpAccordionContent",
+      "NgpAccordionContentStateToken",
+      "provideAccordionContentState",
+      "type NgpAccordionContentProps",
+      "type NgpAccordionContentState",
+      "NgpAccordionItem",
+      "injectAccordionItemState",
+      "ngpAccordionItem",
+      "NgpAccordionItemStateToken",
+      "provideAccordionItemState",
+      "type NgpAccordionItemProps",
+      "type NgpAccordionItemState",
+      "NgpAccordionTrigger",
+      "NgpAccordion",
+      "injectAccordionState",
+      "ngpAccordion",
+      "NgpAccordionStateToken",
+      "NgpAccordionType",
+      "provideAccordionState",
+      "type NgpAccordionProps",
+      "type NgpAccordionState",
+      "NgpAccordionConfig",
+      "provideAccordionConfig",
+      "NgpAccordionTriggerStateToken",
+      "ngpAccordionTrigger",
+      "injectAccordionTriggerState",
+      "provideAccordionTriggerState",
+      "type NgpAccordionTriggerState",
+      "type NgpAccordionTriggerProps"
+    ],
+    "hasSecondaryEntryPoint": true,
+    "category": "layout",
+    "description": "Display a series of panels that can be expanded or collapsed.",
+    "accessibility": [
+      "ARIA design"
+    ],
+    "examples": [
+      {
+        "name": "example-0",
+        "code": "import {\n  NgpAccordion,\n  NgpAccordionItem,\n  NgpAccordionTrigger,\n  NgpAccordionContent,\n} from 'ng-primitives/accordion';",
+        "description": "Import"
+      },
+      {
+        "name": "example-1",
+        "code": "<div ngpAccordion ngpAccordionType=\"single\" ngpAccordionCollapsible>\n  <div ngpAccordionItem ngpAccordionItemValue=\"item-1\">\n    <h3>\n      <button ngpAccordionTrigger ngpButton>Would you like to learn more?</button>\n    </h3>\n    <div ngpAccordionContent>If you would like to learn more please reach out to us on GitHub.</div>\n  </div>\n\n  <div ngpAccordionItem ngpAccordionItemValue=\"item-2\">\n    <h3>\n      <button ngpAccordionTrigger ngpButton>Can I use this in my project?</button>\n    </h3>\n    <div ngpAccordionContent>Yes, this is open source and you can use it in your project.</div>\n  </div>\n</div>",
+        "description": "Usage"
+      },
+      {
+        "name": "example-2",
+        "code": "import { provideAccordionConfig } from 'ng-primitives/accordion';\n\nbootstrapApplication(AppComponent, {\n  providers: [\n    provideAccordionConfig({\n      type: 'multiple',\n      collapsible: true,\n      orientation: 'horizontal',\n    }),\n  ],\n});",
+        "description": "Global Configuration"
+      }
+    ],
+    "reusableComponent": {
+      "code": "import { Component, input } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { heroChevronDownMini } from '@ng-icons/heroicons/mini';\nimport {\n  NgpAccordionContent,\n  NgpAccordionItem,\n  NgpAccordionTrigger,\n} from 'ng-primitives/accordion';\nimport { NgpButton } from 'ng-primitives/button';\n\n@Component({\n  selector: 'app-accordion-item',\n  hostDirectives: [\n    {\n      directive: NgpAccordionItem,\n      inputs: ['ngpAccordionItemValue:value', 'ngpAccordionItemDisabled:disabled'],\n    },\n  ],\n  imports: [NgpAccordionContent, NgpAccordionTrigger, NgpButton, NgIcon],\n  providers: [provideIcons({ heroChevronDownMini })],\n  template: `\n    <button ngpAccordionTrigger ngpButton>\n      {{ heading() }}\n\n      <ng-icon name=\"heroChevronDownMini\" />\n    </button>\n    <div ngpAccordionContent>\n      <ng-content />\n    </div>\n  `,\n  styles: `\n    :host {\n      display: block;\n    }\n\n    :host:has(+ :host) {\n      border-bottom: 1px solid var(--ngp-border);\n    }\n\n    [ngpAccordionTrigger] {\n      display: flex;\n      padding-left: 1rem;\n      padding-right: 1rem;\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n      font-weight: 500;\n      justify-content: space-between;\n      align-items: center;\n      width: 100%;\n      height: 2.75rem;\n      border-radius: 0.75rem;\n      outline: none;\n      color: var(--ngp-text-primary);\n      background-color: var(--ngp-background);\n      border: none;\n    }\n\n    [ngpAccordionTrigger][data-focus-visible] {\n      outline: 2px solid var(--ngp-focus-ring);\n    }\n\n    [ngpAccordionContent] {\n      font-size: 0.875rem;\n      color: var(--ngp-text-secondary);\n      overflow: hidden;\n      padding: 0 16px;\n      box-sizing: border-box;\n    }\n\n    [ngpAccordionContent][data-open] {\n      animation: slideDown 0.2s ease-in-out forwards;\n    }\n\n    [ngpAccordionContent][data-closed] {\n      animation: slideUp 0.2s ease-in-out forwards;\n    }\n\n    ng-icon {\n      font-size: 1.25rem;\n      color: var(--ngp-text-secondary);\n    }\n\n    [ngpAccordionTrigger][data-open] ng-icon {\n      transform: rotate(180deg);\n    }\n\n    @keyframes slideDown {\n      from {\n        height: 0;\n      }\n      to {\n        height: var(--ngp-accordion-content-height);\n      }\n    }\n\n    @keyframes slideUp {\n      from {\n        height: var(--ngp-accordion-content-height);\n      }\n      to {\n        height: 0;\n      }\n    }\n  `,\n})\nexport class AccordionItem {\n  /** The accordion item heading */\n  readonly heading = input.required<string>();\n}\n",
+      "hasVariants": false,
+      "hasSizes": true
+    }
+  },
+  {
+    "name": "ai",
+    "entryPoint": "ng-primitives/ai",
+    "exports": [
+      "NgpPromptComposerInput",
+      "NgpPromptComposerSubmit",
+      "NgpPromptComposer",
+      "NgpThreadMessage",
+      "NgpThread",
+      "NgpPromptComposerDictation",
+      "NgpThreadViewport",
+      "NgpThreadSuggestion",
+      "providePromptComposerState",
+      "injectPromptComposerState",
+      "providePromptComposerDictationState",
+      "injectPromptComposerDictationState",
+      "providePromptComposerInputState",
+      "injectPromptComposerInputState",
+      "providePromptComposerSubmitState",
+      "injectPromptComposerSubmitState",
+      "provideThreadState",
+      "injectThreadState",
+      "provideThreadSuggestionState",
+      "injectThreadSuggestionState",
+      "provideThreadViewportState",
+      "injectThreadViewportState",
+      "provideThreadMessageState",
+      "injectThreadMessageState"
+    ],
+    "hasSecondaryEntryPoint": true,
+    "category": "utility",
+    "description": "ai primitive component",
+    "accessibility": [],
+    "examples": []
+  },
+  {
+    "name": "autofill",
+    "entryPoint": "ng-primitives/autofill",
+    "exports": [
+      "NgpAutofill",
+      "NgpAutofillStateToken",
+      "ngpAutofill",
+      "injectAutofillState",
+      "provideAutofillState",
+      "type NgpAutofillState",
+      "type NgpAutofillProps"
+    ],
+    "hasSecondaryEntryPoint": true,
+    "category": "utility",
+    "description": "autofill primitive component",
+    "accessibility": [],
+    "examples": []
+  },
+  {
+    "name": "avatar",
+    "entryPoint": "ng-primitives/avatar",
+    "exports": [
+      "NgpAvatarFallback",
+      "injectAvatarFallbackState",
+      "ngpAvatarFallback",
+      "NgpAvatarFallbackStateToken",
+      "provideAvatarFallbackState",
+      "type NgpAvatarFallbackProps",
+      "type NgpAvatarFallbackState",
+      "NgpAvatarImage",
+      "injectAvatarImageState",
+      "ngpAvatarImage",
+      "NgpAvatarImageStateToken",
+      "provideAvatarImageState",
+      "type NgpAvatarImageProps",
+      "type NgpAvatarImageState",
+      "NgpAvatar",
+      "injectAvatarState",
+      "ngpAvatar",
+      "NgpAvatarStateToken",
+      "NgpAvatarStatus",
+      "provideAvatarState",
+      "type NgpAvatarProps",
+      "type NgpAvatarState",
+      "NgpAvatarConfig",
+      "provideAvatarConfig"
+    ],
+    "hasSecondaryEntryPoint": true,
+    "category": "data",
+    "description": "Display an image that represents a user with a text fallback.",
+    "accessibility": [],
+    "examples": [
+      {
+        "name": "example-0",
+        "code": "<span ngpAvatar>\n  <img ngpAvatarImage src=\"...\" alt=\"...\" />\n  <span ngpAvatarFallback>NG</span>\n</span>",
+        "description": "Usage"
+      },
+      {
+        "name": "example-1",
+        "code": "import { provideAvatarConfig } from 'ng-primitives/avatar';\n\nbootstrapApplication(AppComponent, {\n  providers: [provideAvatarConfig({ delay: 1000 })],\n});",
+        "description": "Global Configuration"
+      }
+    ],
+    "reusableComponent": {
+      "code": "import { Component, input } from '@angular/core';\nimport { NgpAvatar, NgpAvatarFallback, NgpAvatarImage } from 'ng-primitives/avatar';\n\n@Component({\n  selector: 'app-avatar',\n  hostDirectives: [NgpAvatar],\n  imports: [NgpAvatarImage, NgpAvatarFallback],\n  template: `\n    @if (image()) {\n      <img [src]=\"image()\" ngpAvatarImage alt=\"Profile Image\" />\n    }\n    <span ngpAvatarFallback>{{ fallback() }}</span>\n  `,\n  styles: `\n    :host {\n      position: relative;\n      display: inline-flex;\n      width: 3rem;\n      height: 3rem;\n      align-items: center;\n      justify-content: center;\n      border-radius: 9999px;\n      border-width: 2px;\n      border-color: var(--ngp-avatar-border);\n      background-color: var(--ngp-avatar-background);\n      vertical-align: middle;\n      overflow: hidden;\n    }\n\n    :host:before {\n      content: '';\n      position: absolute;\n      inset: 0;\n      border-radius: 9999px;\n      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);\n    }\n\n    [ngpAvatarImage] {\n      width: 100%;\n      height: 100%;\n    }\n\n    [ngpAvatarFallback] {\n      text-align: center;\n      font-weight: 500;\n      color: var(--ngp-text-emphasis);\n    }\n  `,\n})\nexport class Avatar {\n  /** Define the avatar image source */\n  readonly image = input<string>();\n\n  /** Define the avatar fallback text */\n  readonly fallback = input<string>();\n}\n",
+      "hasVariants": false,
+      "hasSizes": false
+    }
+  },
+  {
+    "name": "breadcrumbs",
+    "entryPoint": "ng-primitives/breadcrumbs",
+    "exports": [
+      "NgpBreadcrumbEllipsis",
+      "NgpBreadcrumbItem",
+      "NgpBreadcrumbLink",
+      "NgpBreadcrumbList",
+      "NgpBreadcrumbPage",
+      "NgpBreadcrumbSeparator",
+      "NgpBreadcrumbs",
+      "NgpBreadcrumbsStateToken",
+      "ngpBreadcrumbs",
+      "injectBreadcrumbsState",
+      "provideBreadcrumbsState",
+      "type NgpBreadcrumbsState",
+      "type NgpBreadcrumbsProps",
+      "NgpBreadcrumbListStateToken",
+      "ngpBreadcrumbList",
+      "injectBreadcrumbListState",
+      "provideBreadcrumbListState",
+      "type NgpBreadcrumbListState",
+      "type NgpBreadcrumbListProps",
+      "NgpBreadcrumbItemStateToken",
+      "ngpBreadcrumbItem",
+      "injectBreadcrumbItemState",
+      "provideBreadcrumbItemState",
+      "type NgpBreadcrumbItemState",
+      "type NgpBreadcrumbItemProps",
+      "NgpBreadcrumbLinkStateToken",
+      "ngpBreadcrumbLink",
+      "injectBreadcrumbLinkState",
+      "provideBreadcrumbLinkState",
+      "type NgpBreadcrumbLinkState",
+      "type NgpBreadcrumbLinkProps",
+      "NgpBreadcrumbPageStateToken",
+      "ngpBreadcrumbPage",
+      "injectBreadcrumbPageState",
+      "provideBreadcrumbPageState",
+      "type NgpBreadcrumbPageState",
+      "type NgpBreadcrumbPageProps",
+      "NgpBreadcrumbSeparatorStateToken",
+      "ngpBreadcrumbSeparator",
+      "injectBreadcrumbSeparatorState",
+      "provideBreadcrumbSeparatorState",
+      "type NgpBreadcrumbSeparatorState",
+      "type NgpBreadcrumbSeparatorProps",
+      "NgpBreadcrumbEllipsisStateToken",
+      "ngpBreadcrumbEllipsis",
+      "injectBreadcrumbEllipsisState",
+      "provideBreadcrumbEllipsisState",
+      "type NgpBreadcrumbEllipsisState",
+      "type NgpBreadcrumbEllipsisProps"
+    ],
+    "hasSecondaryEntryPoint": true,
+    "category": "navigation",
+    "description": "Help users understand their location within a hierarchy with a fully accessible breadcrumb trail.",
+    "accessibility": [
+      "ARIA Breadcrumb"
+    ],
+    "examples": [
+      {
+        "name": "example-0",
+        "code": "import {\n  NgpBreadcrumbs,\n  NgpBreadcrumbList,\n  NgpBreadcrumbItem,\n  NgpBreadcrumbLink,\n  NgpBreadcrumbSeparator,\n  NgpBreadcrumbEllipsis,\n  NgpBreadcrumbPage,\n} from 'ng-primitives/breadcrumbs';",
+        "description": "Import"
+      },
+      {
+        "name": "example-1",
+        "code": "<nav aria-label=\"Breadcrumb\" ngpBreadcrumbs>\n  <ol ngpBreadcrumbList>\n    <li ngpBreadcrumbItem>\n      <a ngpBreadcrumbLink href=\"/\">Home</a>\n    </li>\n\n    <li ngpBreadcrumbSeparator>/</li>\n\n    <li ngpBreadcrumbItem>\n      <button type=\"button\" aria-label=\"Toggle breadcrumb menu\">\n        <span ngpBreadcrumbEllipsis>...</span>\n      </button>\n    </li>\n\n    <li ngpBreadcrumbSeparator>/</li>\n\n    <li ngpBreadcrumbItem>\n      <a ngpBreadcrumbLink href=\"...\">Components</a>\n    </li>\n\n    <li ngpBreadcrumbSeparator>/</li>\n\n    <li ngpBreadcrumbItem>\n      <span ngpBreadcrumbPage>Breadcrumbs</span>\n    </li>\n  </ol>\n</nav>",
+        "description": "Usage"
+      }
+    ]
+  },
+  {
+    "name": "button",
+    "entryPoint": "ng-primitives/button",
+    "exports": [
+      "NgpButton",
+      "injectButtonState",
+      "ngpButton",
+      "NgpButtonProps",
+      "NgpButtonState",
+      "provideButtonState"
+    ],
+    "hasSecondaryEntryPoint": true,
+    "category": "form",
+    "description": "A button is a clickable element that can be used to trigger an action. This primitive enhances the native button element with improved accessibility and interaction handling for hover, press and focus.",
+    "accessibility": [],
+    "examples": [
+      {
+        "name": "example-0",
+        "code": "<button ngpButton>Button</button>",
+        "description": "Usage"
+      }
+    ],
+    "reusableComponent": {
+      "code": "import { Component, input } from '@angular/core';\nimport { NgpButton } from 'ng-primitives/button';\n\n/**\n * The size of the button.\n */\nexport type ButtonSize = 'sm' | 'md' | 'lg' | 'xl';\n\n/**\n * The variant of the button.\n */\nexport type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link';\n\n@Component({\n  selector: 'button[app-button]',\n  hostDirectives: [{ directive: NgpButton, inputs: ['disabled'] }],\n  template: `\n    <ng-content select=\"[slot=leading]\" />\n    <ng-content />\n    <ng-content select=\"[slot=trailing]\" />\n  `,\n  host: {\n    '[attr.data-size]': 'size()',\n    '[attr.data-variant]': 'variant()',\n  },\n  styles: `\n    :host {\n      padding-left: 1rem;\n      padding-right: 1rem;\n      border-radius: 0.5rem;\n      color: var(--ngp-text-primary);\n      border: none;\n      height: 2.5rem;\n      font-weight: 500;\n      background-color: var(--ngp-background);\n      transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1);\n      box-shadow: var(--ngp-button-shadow);\n      box-sizing: border-box;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      cursor: pointer;\n      gap: 0.5rem;\n    }\n\n    :host[data-hover] {\n      background-color: var(--ngp-background-hover);\n    }\n\n    :host[data-focus-visible] {\n      outline: 2px solid var(--ngp-focus-ring);\n    }\n\n    :host[data-press] {\n      background-color: var(--ngp-background-active);\n    }\n\n    /* Size variants */\n    :host[data-size='sm'] {\n      height: 2rem;\n      padding-left: 0.75rem;\n      padding-right: 0.75rem;\n      font-size: 0.875rem;\n      --ng-icon__size: 0.875rem;\n    }\n\n    :host[data-size='md'],\n    :host:not([data-size]) {\n      height: 2.5rem;\n      padding-left: 1rem;\n      padding-right: 1rem;\n      font-size: 0.875rem;\n      --ng-icon__size: 0.875rem;\n    }\n\n    :host[data-size='lg'] {\n      height: 3rem;\n      padding-left: 1.25rem;\n      padding-right: 1.25rem;\n      font-size: 1rem;\n      --ng-icon__size: 1rem;\n    }\n\n    :host[data-size='xl'] {\n      height: 3.5rem;\n      padding-left: 1.5rem;\n      padding-right: 1.5rem;\n      font-size: 1.125rem;\n      --ng-icon__size: 1.125rem;\n    }\n\n    /* Variant styles */\n    :host[data-variant='primary'],\n    :host:not([data-variant]) {\n      background-color: var(--ngp-background);\n      color: var(--ngp-text-primary);\n      border: none;\n    }\n\n    :host[data-variant='primary'][data-hover],\n    :host:not([data-variant])[data-hover] {\n      background-color: var(--ngp-background-hover);\n    }\n\n    :host[data-variant='primary'][data-press],\n    :host:not([data-variant])[data-press] {\n      background-color: var(--ngp-background-active);\n    }\n\n    :host[data-variant='secondary'] {\n      background-color: var(--ngp-secondary-background, #f1f5f9);\n      color: var(--ngp-secondary-text, #0f172a);\n      border: none;\n    }\n\n    :host[data-variant='secondary'][data-hover] {\n      background-color: var(--ngp-secondary-background-hover, #e2e8f0);\n    }\n\n    :host[data-variant='secondary'][data-press] {\n      background-color: var(--ngp-secondary-background-active, #cbd5e1);\n    }\n\n    :host[data-variant='destructive'] {\n      background-color: var(--ngp-destructive-background, #ef4444);\n      color: var(--ngp-destructive-text, #ffffff);\n      border: none;\n    }\n\n    :host[data-variant='destructive'][data-hover] {\n      background-color: var(--ngp-destructive-background-hover, #dc2626);\n    }\n\n    :host[data-variant='destructive'][data-press] {\n      background-color: var(--ngp-destructive-background-active, #b91c1c);\n    }\n\n    :host[data-variant='outline'] {\n      background-color: transparent;\n      color: var(--ngp-text-primary);\n      border: 1px solid var(--ngp-outline-border, #e2e8f0);\n      box-shadow: none;\n    }\n\n    :host[data-variant='outline'][data-hover] {\n      background-color: var(--ngp-background-hover);\n      border-color: var(--ngp-outline-border-hover, #cbd5e1);\n    }\n\n    :host[data-variant='outline'][data-press] {\n      background-color: var(--ngp-outline-background-active, rgba(15, 23, 42, 0.1));\n    }\n\n    :host[data-variant='ghost'] {\n      background-color: transparent;\n      color: var(--ngp-text-primary);\n      border: none;\n      box-shadow: none;\n    }\n\n    :host[data-variant='ghost'][data-hover] {\n      background-color: var(--ngp-background-hover);\n    }\n\n    :host[data-variant='ghost'][data-press] {\n      background-color: var(--ngp-background-active);\n    }\n\n    :host[data-variant='link'] {\n      background-color: transparent;\n      color: var(--ngp-link-color, #3b82f6);\n      border: none;\n      box-shadow: none;\n      text-decoration: underline;\n      text-underline-offset: 4px;\n    }\n\n    :host[data-variant='link'][data-hover] {\n      text-decoration-thickness: 2px;\n    }\n\n    :host[disabled] {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n  `,\n})\nexport class Button {\n  /**\n   * The size of the button.\n   */\n  readonly size = input<ButtonSize>('md');\n\n  /**\n   * The variant of the button.\n   */\n  readonly variant = input<ButtonVariant>('primary');\n}\n",
+      "hasVariants": true,
+      "hasSizes": true
+    }
+  },
+  {
+    "name": "checkbox",
+    "entryPoint": "ng-primitives/checkbox",
+    "exports": [
+      "NgpCheckbox",
+      "injectCheckboxState",
+      "ngpCheckbox",
+      "NgpCheckboxProps",
+      "NgpCheckboxState",
+      "provideCheckboxState"
+    ],
+    "hasSecondaryEntryPoint": true,
+    "category": "form",
+    "description": "Perform state toggling.",
+    "accessibility": [
+      "ARIA design"
+    ],
+    "examples": [
+      {
+        "name": "example-0",
+        "code": "<span ngpCheckbox [(ngpCheckboxChecked)]=\"checked\">\n  <ng-icon name=\"checkmark\" aria-hidden=\"true\" />\n</span>",
+        "description": "Usage"
+      }
+    ],
+    "reusableComponent": {
+      "code": "import { Component } from '@angular/core';\nimport { ControlValueAccessor } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { heroCheckMini, heroMinusMini } from '@ng-icons/heroicons/mini';\nimport { injectCheckboxState, NgpCheckbox } from 'ng-primitives/checkbox';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'app-checkbox',\n  hostDirectives: [\n    {\n      directive: NgpCheckbox,\n      inputs: [\n        'ngpCheckboxChecked:checked',\n        'ngpCheckboxIndeterminate:indeterminate',\n        'ngpCheckboxDisabled:disabled',\n      ],\n      outputs: [\n        'ngpCheckboxCheckedChange:checkedChange',\n        'ngpCheckboxIndeterminateChange:indeterminateChange',\n      ],\n    },\n  ],\n  providers: [provideValueAccessor(Checkbox), provideIcons({ heroCheckMini, heroMinusMini })],\n  imports: [NgIcon],\n  template: `\n    @if (state().indeterminate()) {\n      <ng-icon name=\"heroMinusMini\" />\n    } @else if (state().checked()) {\n      <ng-icon name=\"heroCheckMini\" />\n    }\n  `,\n  styles: `\n    :host {\n      display: flex;\n      width: 1.25rem;\n      height: 1.25rem;\n      cursor: pointer;\n      align-items: center;\n      justify-content: center;\n      border-radius: 0.25rem;\n      border: 1px solid var(--ngp-border);\n      background-color: transparent;\n      padding: 0;\n      outline: none;\n      flex: none;\n      color: var(--ngp-text-inverse);\n      font-size: 0.75rem;\n    }\n\n    :host[data-hover] {\n      background-color: var(--ngp-background-hover);\n    }\n\n    :host[data-checked],\n    :host[data-indeterminate] {\n      border-color: var(--ngp-background-inverse);\n      background-color: var(--ngp-background-inverse);\n    }\n\n    :host[data-focus-visible] {\n      outline: 2px solid var(--ngp-focus-ring);\n      outline-offset: 2px;\n    }\n  `,\n  host: {\n    '(focusout)': 'onTouchedFn?.()',\n  },\n})\nexport class Checkbox implements ControlValueAccessor {\n  /**\n   * The checked state of the checkbox.\n   */\n  protected readonly state = injectCheckboxState();\n\n  /**\n   * The onChange function for the checkbox.\n   */\n  protected onChangeFn?: ChangeFn<boolean>;\n\n  /**\n   * The onTouched function for the checkbox.\n   */\n  protected onTouchedFn?: TouchedFn;\n\n  constructor() {\n    // Whenever the user interacts with the checkbox, call the onChange function with the new value.\n    this.state().checkedChange.subscribe(checked => this.onChangeFn?.(checked));\n  }\n\n  writeValue(checked: boolean): void {\n    this.state().setChecked(checked);\n  }\n\n  registerOnChange(fn: ChangeFn<boolean>): void {\n    this.onChangeFn = fn;\n  }\n\n  registerOnTouched(fn: TouchedFn): void {\n    this.onTouchedFn = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.state().setDisabled(isDisabled);\n  }\n}\n",
+      "hasVariants": false,
+      "hasSizes": true
+    }
+  },
+  {
+    "name": "combobox",
+    "entryPoint": "ng-primitives/combobox",
+    "exports": [
+      "NgpComboboxButton",
+      "NgpComboboxDropdown",
+      "NgpComboboxInput",
+      "NgpComboboxOption",
+      "NgpComboboxPortal",
+      "NgpCombobox",
+      "type NgpComboboxPlacement",
+      "injectComboboxState",
+      "provideComboboxState",
+      "NgpComboboxConfig",
+      "provideComboboxConfig"
+    ],
+    "hasSecondaryEntryPoint": true,
+    "category": "form",
+    "description": "The Combobox primitive is a combination of a dropdown and an input field. It allows users to select from a list of options while filtering the list based on their input.",
+    "accessibility": [
+      "keyboard navigation",
+      "Keyboard Navigation",
+      "Focus Management"
+    ],
+    "examples": [
+      {
+        "name": "example-0",
+        "code": "import {\n  NgpCombobox,\n  NgpComboboxButton,\n  NgpComboboxDropdown,\n  NgpComboboxInput,\n  NgpComboboxOption,\n  NgpComboboxPortal,\n} from 'ng-primitives/combobox';",
+        "description": "Import"
+      },
+      {
+        "name": "example-1",
+        "code": "<div ngpCombobox>\n  <input ngpComboboxInput />\n  <button ngpComboboxButton>▼</button>\n  <div ngpComboboxDropdown>\n    @for (option of options; track option) {\n    <div ngpComboboxOption [ngpComboboxOptionValue]=\"option\">{{ option }}</div>\n    }\n  </div>\n</div>",
+        "description": "Usage"
+      },
+      {
+        "name": "example-2",
+        "code": "<div ngpCombobox>\n  <button ngpComboboxButton>{{ selectedOption || 'Select an option' }} ▼</button>\n  <div ngpComboboxDropdown>\n    @for (option of options; track option) {\n    <div ngpComboboxOption [ngpComboboxOptionValue]=\"option\">{{ option }}</div>\n    }\n  </div>\n</div>",
+        "description": "Without Input Field"
+      },
+      {
+        "name": "example-3",
+        "code": "<div ngpComboboxOptionValue=\"all\" ngpComboboxOption>Select All</div>",
+        "description": "Select All Functionality"
+      },
+      {
+        "name": "example-4",
+        "code": "import { provideComboboxConfig } from 'ng-primitives/combobox';\n\nbootstrapApplication(AppComponent, {\n  providers: [provideComboboxConfig({ placement: 'bottom', container: document.body })],\n});",
+        "description": "Global Configuration"
+      }
+    ],
+    "reusableComponent": {
+      "code": "import { BooleanInput } from '@angular/cdk/coercion';\nimport { booleanAttribute, Component, computed, input, model, signal } from '@angular/core';\nimport { ControlValueAccessor } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { heroChevronDown } from '@ng-icons/heroicons/outline';\nimport {\n  NgpCombobox,\n  NgpComboboxButton,\n  NgpComboboxDropdown,\n  NgpComboboxInput,\n  NgpComboboxOption,\n  NgpComboboxPortal,\n} from 'ng-primitives/combobox';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'app-combobox',\n  imports: [\n    NgpCombobox,\n    NgpComboboxDropdown,\n    NgpComboboxOption,\n    NgpComboboxInput,\n    NgpComboboxPortal,\n    NgpComboboxButton,\n    NgIcon,\n  ],\n  providers: [provideIcons({ heroChevronDown }), provideValueAccessor(Combobox)],\n  template: `\n    <div\n      [(ngpComboboxValue)]=\"value\"\n      [ngpComboboxDisabled]=\"disabled() || formDisabled()\"\n      (ngpComboboxOpenChange)=\"resetOnClose($event)\"\n      (ngpComboboxValueChange)=\"onValueChange($event)\"\n      ngpCombobox\n    >\n      <input\n        [value]=\"filter()\"\n        [placeholder]=\"placeholder()\"\n        (input)=\"onFilterChange($event)\"\n        (blur)=\"onTouched?.()\"\n        ngpComboboxInput\n      />\n\n      <button ngpComboboxButton aria-label=\"Toggle dropdown\">\n        <ng-icon name=\"heroChevronDown\" />\n      </button>\n\n      <div *ngpComboboxPortal ngpComboboxDropdown>\n        @for (option of filteredOptions(); track option) {\n          <div [ngpComboboxOptionValue]=\"option\" ngpComboboxOption>\n            {{ option }}\n          </div>\n        } @empty {\n          <div class=\"empty-message\">No options found</div>\n        }\n      </div>\n    </div>\n  `,\n  styles: `\n    [ngpCombobox] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      height: 36px;\n      width: 300px;\n      border-radius: 8px;\n      border: none;\n      background-color: var(--ngp-background);\n      box-shadow: var(--ngp-input-shadow);\n      box-sizing: border-box;\n    }\n\n    [ngpCombobox][data-focus] {\n      outline: 2px solid var(--ngp-focus-ring);\n      outline-offset: 2px;\n    }\n\n    [ngpComboboxInput] {\n      flex: 1;\n      padding: 0 16px;\n      border: none;\n      background-color: transparent;\n      color: var(--ngp-text);\n      font-family: inherit;\n      font-size: 14px;\n      padding: 0 16px;\n      outline: none;\n      height: 100%;\n    }\n\n    [ngpComboboxButton] {\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 100%;\n      width: 36px;\n      background-color: transparent;\n      border: none;\n      color: var(--ngp-text);\n      cursor: pointer;\n      box-sizing: border-box;\n    }\n\n    [ngpComboboxDropdown] {\n      background-color: var(--ngp-background);\n      border: 1px solid var(--ngp-border);\n      padding: 0.25rem;\n      border-radius: 0.75rem;\n      outline: none;\n      position: absolute;\n      animation: popover-show 0.1s ease-out;\n      width: var(--ngp-combobox-width);\n      box-shadow: var(--ngp-shadow-lg);\n      box-sizing: border-box;\n      margin-top: 4px;\n      max-height: 240px;\n      overflow-y: auto;\n      transform-origin: var(--ngp-combobox-transform-origin);\n    }\n\n    [ngpComboboxDropdown][data-enter] {\n      animation: combobox-show 0.1s ease-out;\n    }\n\n    [ngpComboboxDropdown][data-exit] {\n      animation: combobox-hide 0.1s ease-out;\n    }\n\n    [ngpComboboxOption] {\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n      padding: 0.375rem 0.75rem;\n      cursor: pointer;\n      border-radius: 0.5rem;\n      width: 100%;\n      height: 36px;\n      font-size: 14px;\n      color: var(--ngp-text-primary);\n      box-sizing: border-box;\n    }\n\n    [ngpComboboxOption][data-hover] {\n      background-color: var(--ngp-background-hover);\n    }\n\n    [ngpComboboxOption][data-press] {\n      background-color: var(--ngp-background-active);\n    }\n\n    [ngpComboboxOption][data-active] {\n      background-color: var(--ngp-background-active);\n    }\n\n    .empty-message {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      padding: 0.5rem;\n      color: var(--ngp-text-secondary);\n      font-size: 14px;\n      font-weight: 500;\n      text-align: center;\n    }\n\n    @keyframes combobox-show {\n      0% {\n        opacity: 0;\n        transform: translateY(-10px) scale(0.9);\n      }\n      100% {\n        opacity: 1;\n        transform: translateY(0) scale(1);\n      }\n    }\n\n    @keyframes combobox-hide {\n      0% {\n        opacity: 1;\n        transform: translateY(0) scale(1);\n      }\n      100% {\n        opacity: 0;\n        transform: translateY(-10px) scale(0.9);\n      }\n    }\n  `,\n})\nexport class Combobox implements ControlValueAccessor {\n  /** The options for the combobox. */\n  readonly options = input<string[]>([]);\n\n  /** The selected value. */\n  readonly value = model<string | undefined>();\n\n  /** The placeholder for the input. */\n  readonly placeholder = input<string>('');\n\n  /** The disabled state of the combobox. */\n  readonly disabled = input<boolean, BooleanInput>(false, {\n    transform: booleanAttribute,\n  });\n\n  /** The filter value. */\n  protected readonly filter = signal<string>('');\n\n  /** Get the filtered options. */\n  protected readonly filteredOptions = computed(() =>\n    this.options().filter(option => option.toLowerCase().includes(this.filter().toLowerCase())),\n  );\n\n  /** Store the form disabled state */\n  protected readonly formDisabled = signal(false);\n\n  /** The on change callback */\n  private onChange?: ChangeFn<string>;\n\n  /** The on touch callback */\n  protected onTouched?: TouchedFn;\n\n  onFilterChange(event: Event): void {\n    const input = event.target as HTMLInputElement;\n    this.filter.set(input.value);\n  }\n\n  writeValue(value: string | undefined): void {\n    this.value.set(value);\n    this.filter.set(value ?? '');\n  }\n\n  registerOnChange(fn: ChangeFn<string | undefined>): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: TouchedFn): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.formDisabled.set(isDisabled);\n  }\n\n  protected onValueChange(value: string): void {\n    this.onChange?.(value);\n    // update the filter value\n    this.filter.set(value);\n  }\n\n  protected resetOnClose(open: boolean): void {\n    // if the dropdown is closed, reset the filter value\n    if (open) {\n      return;\n    }\n\n    // if the filter value is empty, set the value to undefined\n    if (this.filter() === '') {\n      this.value.set(undefined);\n    } else {\n      // otherwise set the filter value to the selected value\n      this.filter.set(this.value() ?? '');\n    }\n  }\n}\n",
+      "hasVariants": false,
+      "hasSizes": true
+    }
+  },
+  {
+    "name": "date-picker",
+    "entryPoint": "ng-primitives/date-picker",
+    "exports": [
+      "injectDatePickerConfig",
+      "provideDatePickerConfig",
+      "NgpDatePickerCellRender",
+      "injectDatePickerCellDate",
+      "injectDatePickerCellRender",
+      "NgpDatePickerCellRenderToken",
+      "NgpDatePickerCell",
+      "NgpDatePickerDateButton",
+      "injectDatePickerDateButton",
+      "NgpDatePickerDateButtonToken",
+      "NgpDatePickerGrid",
+      "NgpDatePickerLabel",
+      "injectDatePickerLabel",
+      "NgpDatePickerLabelToken",
+      "NgpDatePickerNextMonth",
+      "NgpDatePickerPreviousMonth",
+      "NgpDatePickerRowRender",
+      "injectDatePickerRowRender",
+      "injectDatePickerWeek",
+      "NgpDatePickerRowRenderToken",
+      "NgpDatePicker",
+      "transformToFirstDayOfWeekNumber",
+      "type NgpDatePickerFirstDayOfWeekNumber",
+      "type NgpDatePickerFirstDayOfWeekNumberInput",
+      "injectDatePickerState",
+      "provideDatePickerState",
+      "NgpDateRangePicker",
+      "provideDateRangePickerState",
+      "injectDateRangePickerState"
+    ],
+    "hasSecondaryEntryPoint": true,
+    "category": "date-time",
+    "description": "A date picker is a component that allows users to select a date from a calendar and navigate through months and years.",
+    "accessibility": [
+      "ARIA design"
+    ],
+    "examples": [
+      {
+        "name": "example-0",
+        "code": "import {\n  NgpDatePicker,\n  NgpDateRangePicker,\n  NgpDatePickerLabel,\n  NgpDatePickerNextMonth,\n  NgpDatePickerPreviousMonth,\n  NgpDatePickerGrid,\n  NgpDatePickerCell,\n  NgpDatePickerRowRender,\n  NgpDatePickerCellRender,\n  NgpDatePickerDateButton,\n} from 'ng-primitives/date-picker';",
+        "description": "Import"
+      },
+      {
+        "name": "example-1",
+        "code": "<div ngpDatePicker>\n  <div>\n    <button ngpDatePickerPreviousMonth>...</button>\n    <h2 ngpDatePickerLabel>...</h2>\n    <button ngpDatePickerNextMonth>...</button>\n  </div>\n  <table ngpDatePickerGrid>\n    <thead>\n      <tr>\n        <th scope=\"col\" abbr=\"Sunday\">S</th>\n        ...\n      </tr>\n    </thead>\n    <tbody>\n      <tr *ngpDatePickerRowRender>\n        <td *ngpDatePickerCellRender=\"let date\" ngpDatePickerCell>\n          <button ngpDatePickerDateButton>...</button>\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</div>",
+        "description": "Usage"
+      },
+      {
+        "name": "example-2",
+        "code": "import { provideDatePickerConfig } from 'ng-primitives/date-picker';\n\nbootstrapApplication(AppComponent, {\n  providers: [\n    provideDatePickerConfig({\n      firstDayOfWeek: 1, // Monday\n    }),\n  ],\n});",
+        "description": "Global Configuration"
+      }
+    ],
+    "reusableComponent": {
+      "code": "import { Component, computed } from '@angular/core';\nimport { ControlValueAccessor } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { heroChevronLeftMini, heroChevronRightMini } from '@ng-icons/heroicons/mini';\nimport {\n  injectDatePickerState,\n  NgpDatePicker,\n  NgpDatePickerCell,\n  NgpDatePickerCellRender,\n  NgpDatePickerDateButton,\n  NgpDatePickerGrid,\n  NgpDatePickerLabel,\n  NgpDatePickerNextMonth,\n  NgpDatePickerPreviousMonth,\n  NgpDatePickerRowRender,\n} from 'ng-primitives/date-picker';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'app-date-picker',\n  hostDirectives: [\n    {\n      directive: NgpDatePicker,\n      inputs: [\n        'ngpDatePickerDate: date',\n        'ngpDatePickerMin: min',\n        'ngpDatePickerMax: max',\n        'ngpDatePickerDisabled: disabled',\n      ],\n      outputs: ['ngpDatePickerDateChange: dateChange'],\n    },\n  ],\n  imports: [\n    NgIcon,\n    NgpDatePickerLabel,\n    NgpDatePickerNextMonth,\n    NgpDatePickerPreviousMonth,\n    NgpDatePickerGrid,\n    NgpDatePickerCell,\n    NgpDatePickerRowRender,\n    NgpDatePickerCellRender,\n    NgpDatePickerDateButton,\n  ],\n  providers: [\n    provideIcons({ heroChevronRightMini, heroChevronLeftMini }),\n    provideValueAccessor(DatePicker),\n  ],\n  template: `\n    <div class=\"date-picker-header\">\n      <button ngpDatePickerPreviousMonth aria-label=\"previous month\">\n        <ng-icon name=\"heroChevronLeftMini\" />\n      </button>\n      <h2 ngpDatePickerLabel>{{ label() }}</h2>\n      <button ngpDatePickerNextMonth aria-label=\"next month\">\n        <ng-icon name=\"heroChevronRightMini\" />\n      </button>\n    </div>\n    <table ngpDatePickerGrid>\n      <thead>\n        <tr>\n          <th scope=\"col\" abbr=\"Sunday\">S</th>\n          <th scope=\"col\" abbr=\"Monday\">M</th>\n          <th scope=\"col\" abbr=\"Tuesday\">T</th>\n          <th scope=\"col\" abbr=\"Wednesday\">W</th>\n          <th scope=\"col\" abbr=\"Thursday\">T</th>\n          <th scope=\"col\" abbr=\"Friday\">F</th>\n          <th scope=\"col\" abbr=\"Saturday\">S</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr *ngpDatePickerRowRender>\n          <td *ngpDatePickerCellRender=\"let date\" ngpDatePickerCell>\n            <button ngpDatePickerDateButton>\n              {{ date.getDate() }}\n            </button>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  `,\n  styles: `\n    :host {\n      display: inline-block;\n      background-color: var(--ngp-background);\n      border-radius: 12px;\n      padding: 16px;\n      box-shadow: var(--ngp-shadow);\n      border: 1px solid var(--ngp-border);\n    }\n\n    .date-picker-header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      height: 36px;\n      margin-bottom: 16px;\n    }\n\n    th {\n      font-size: 14px;\n      font-weight: 500;\n      width: 40px;\n      height: 40px;\n      text-align: center;\n      color: var(--ngp-text-secondary);\n    }\n\n    [ngpDatePickerLabel] {\n      font-size: 14px;\n      font-weight: 500;\n      color: var(--ngp-text-primary);\n    }\n\n    [ngpDatePickerPreviousMonth],\n    [ngpDatePickerNextMonth] {\n      all: unset;\n      width: 32px;\n      height: 32px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: 8px;\n      font-size: 20px;\n      border: 1px solid var(--ngp-border);\n      cursor: pointer;\n    }\n\n    [ngpDatePickerPreviousMonth][data-hover],\n    [ngpDatePickerNextMonth][data-hover] {\n      background-color: var(--ngp-background-hover);\n    }\n\n    [ngpDatePickerPreviousMonth][data-focus-visible],\n    [ngpDatePickerNextMonth][data-focus-visible] {\n      outline: 2px solid var(--ngp-focus-ring);\n    }\n\n    [ngpDatePickerPreviousMonth][data-press],\n    [ngpDatePickerNextMonth][data-press] {\n      background-color: var(--ngp-background-active);\n    }\n\n    [ngpDatePickerPreviousMonth][data-disabled],\n    [ngpDatePickerNextMonth][data-disabled] {\n      cursor: not-allowed;\n      color: var(--ngp-text-disabled);\n    }\n\n    [ngpDatePickerDateButton] {\n      all: unset;\n      width: 40px;\n      height: 40px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: 8px;\n      cursor: pointer;\n    }\n\n    [ngpDatePickerDateButton][data-today] {\n      color: var(--ngp-text-blue);\n    }\n\n    [ngpDatePickerDateButton][data-hover] {\n      background-color: var(--ngp-background-hover);\n    }\n\n    [ngpDatePickerDateButton][data-focus-visible] {\n      outline: 2px solid var(--ngp-focus-ring);\n      outline-offset: 2px;\n    }\n\n    [ngpDatePickerDateButton][data-press] {\n      background-color: var(--ngp-background-active);\n    }\n\n    [ngpDatePickerDateButton][data-outside-month] {\n      color: var(--ngp-text-disabled);\n    }\n\n    [ngpDatePickerDateButton][data-selected] {\n      background-color: var(--ngp-background-inverse);\n      color: var(--ngp-text-inverse);\n    }\n\n    [ngpDatePickerDateButton][data-selected][data-outside-month] {\n      background-color: var(--ngp-background-disabled);\n      color: var(--ngp-text-disabled);\n    }\n\n    [ngpDatePickerDateButton][data-disabled] {\n      cursor: not-allowed;\n      color: var(--ngp-text-disabled);\n    }\n  `,\n  host: {\n    '(focusout)': 'onTouched?.()',\n  },\n})\nexport class DatePicker implements ControlValueAccessor {\n  /** Access the date picker host directive */\n  private readonly state = injectDatePickerState<Date>();\n\n  /**\n   * Get the current focused date in string format.\n   * @returns The focused date in \"February 2024\" format.\n   */\n  readonly label = computed(\n    () =>\n      `${this.state().focusedDate().toLocaleString('default', { month: 'long' })} ${this.state().focusedDate().getFullYear()}`,\n  );\n\n  /**\n   * The onChange callback function for the date picker.\n   */\n  protected onChange?: ChangeFn<Date | undefined>;\n\n  /**\n   * The onTouched callback function for the date picker.\n   */\n  protected onTouched?: TouchedFn;\n\n  constructor() {\n    // Whenever the user interacts with the date picker, call the onChange function with the new value.\n    this.state().dateChange.subscribe(date => this.onChange?.(date));\n  }\n\n  writeValue(date: Date): void {\n    this.state().select(date);\n  }\n\n  registerOnChange(fn: ChangeFn<Date | undefined>): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: TouchedFn): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.state().disabled.set(isDisabled);\n  }\n}\n",
+      "hasVariants": false,
+      "hasSizes": true
+    }
+  },
+  {
+    "name": "date-time",
+    "entryPoint": "ng-primitives/date-time",
+    "exports": [
+      "NgpDateAdapter",
+      "NgpDateUnits",
+      "NgpDuration",
+      "injectDateAdapter",
+      "provideDateAdapter",
+      "NgpNativeDateAdapter"
+    ],
+    "hasSecondaryEntryPoint": true,
+    "category": "date-time",
+    "description": "date-time primitive component",
+    "accessibility": [],
+    "examples": []
+  },
+  {
+    "name": "date-time-luxon",
+    "entryPoint": "ng-primitives/date-time-luxon",
+    "exports": [],
+    "hasSecondaryEntryPoint": true,
+    "category": "date-time",
+    "description": "date-time-luxon primitive component",
+    "accessibility": [],
+    "examples": []
+  },
+  {
+    "name": "dialog",
+    "entryPoint": "ng-primitives/dialog",
+    "exports": [
+      "NgpDialogConfig",
+      "provideDialogConfig",
+      "NgpDialogDescription",
+      "NgpDialogOverlay",
+      "NgpDialogTitle",
+      "NgpDialogTrigger",
+      "NgpDialog",
+      "injectDialogRef",
+      "NgpDialogRef",
+      "injectDialogState",
+      "provideDialogState",
+      "NgpDialogManager"
+    ],
+    "hasSecondaryEntryPoint": true,
+    "category": "feedback",
+    "description": "A dialog is a floating window that can be used to display information or prompt the user for input.",
+    "accessibility": [
+      "ARIA design"
+    ],
+    "examples": [
+      {
+        "name": "example-0",
+        "code": "import {\n  NgpDialog,\n  NgpDialogTitle,\n  NgpDialogDescription,\n  NgpDialogTrigger,\n  NgpDialogOverlay,\n} from 'ng-primitives/dialog';",
+        "description": "Import"
+      },
+      {
+        "name": "example-1",
+        "code": "<button [ngpDialogTrigger]=\"dialog\" ngpButton>Launch Dialog</button>\n\n<ng-template #dialog let-close=\"close\">\n  <div ngpDialogOverlay>\n    <div ngpDialog>\n      <h1 ngpDialogTitle>Publish this article?</h1>\n      <p ngpDialogDescription>\n        Are you sure you want to publish this article? This action is irreversible.\n      </p>\n      <div class=\"dialog-footer\">\n        <button (click)=\"close()\" ngpButton>Cancel</button>\n        <button (click)=\"close()\" ngpButton>Confirm</button>\n      </div>\n    </div>\n  </div>\n</ng-template>",
+        "description": "Usage"
+      }
+    ],
+    "reusableComponent": {
+      "code": "import { Component, input } from '@angular/core';\nimport {\n  NgpDialog,\n  NgpDialogDescription,\n  NgpDialogOverlay,\n  NgpDialogTitle,\n  provideDialogState,\n} from 'ng-primitives/dialog';\n\n@Component({\n  selector: 'app-dialog',\n  hostDirectives: [NgpDialogOverlay],\n  imports: [NgpDialog, NgpDialogTitle, NgpDialogDescription],\n  providers: [\n    // We need to hoist the dialog state to the host component so that it can be used\n    // within ng-content\n    provideDialogState(),\n  ],\n  template: `\n    <div ngpDialog>\n      <h2 ngpDialogTitle>{{ header() }}</h2>\n      <p ngpDialogDescription>\n        <ng-content />\n      </p>\n    </div>\n  `,\n  styles: `\n    :host {\n      background-color: rgba(0, 0, 0, 0.5);\n      backdrop-filter: blur(4px);\n      position: fixed;\n      inset: 0;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      animation: fadeIn 300ms cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    :host[data-exit] {\n      animation: fadeOut 300ms cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    [ngpDialog] {\n      background-color: var(--ngp-background);\n      padding: 24px;\n      border-radius: 8px;\n      box-shadow: var(--ngp-shadow);\n      animation: slideIn 300ms cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    [ngpDialog][data-exit] {\n      animation: slideOut 300ms cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    [ngpDialogTitle] {\n      font-size: 18px;\n      line-height: 28px;\n      font-weight: 600;\n      color: var(--ngp-text-primary);\n      margin: 0 0 4px;\n    }\n\n    [ngpDialogDescription] {\n      font-size: 14px;\n      line-height: 20px;\n      color: var(--ngp-text-secondary);\n      margin: 0;\n    }\n\n    @keyframes fadeIn {\n      0% {\n        opacity: 0;\n      }\n      100% {\n        opacity: 1;\n      }\n    }\n\n    @keyframes fadeOut {\n      0% {\n        opacity: 1;\n      }\n      100% {\n        opacity: 0;\n      }\n    }\n\n    @keyframes slideIn {\n      0% {\n        transform: translateY(-20px);\n        opacity: 0;\n      }\n      100% {\n        transform: translateY(0);\n        opacity: 1;\n      }\n    }\n    @keyframes slideOut {\n      0% {\n        transform: translateY(0);\n        opacity: 1;\n      }\n\n      100% {\n        transform: translateY(-20px);\n        opacity: 0;\n      }\n    }\n  `,\n})\nexport class Dialog {\n  /** The dialog title */\n  readonly header = input.required<string>();\n}\n",
+      "hasVariants": false,
+      "hasSizes": true
+    }
+  },
+  {
+    "name": "file-upload",
+    "entryPoint": "ng-primitives/file-upload",
+    "exports": [
+      "NgpFileDropzone",
+      "injectFileDropzoneState",
+      "provideFileDropzoneState",
+      "NgpFileUpload",
+      "injectFileUploadState",
+      "provideFileUploadState"
+    ],
+    "hasSecondaryEntryPoint": true,
+    "category": "form",
+    "description": "The file upload primitive allows you to trigger a file upload from any element, giving you the more control over the appearance and behavior compared to the native file input.",
+    "accessibility": [],
+    "examples": [
+      {
+        "name": "example-0",
+        "code": "<button\n  ngpFileUpload\n  (ngpFileUploadSelected)=\"onFilesSelected($event)\"\n  (ngpFileUploadCanceled)=\"onCancel()\"\n></button>",
+        "description": "Usage"
+      }
+    ],
+    "reusableComponent": {
+      "code": "import { Component } from '@angular/core';\nimport { NgpFileUpload } from 'ng-primitives/file-upload';\n\n@Component({\n  selector: 'app-file-upload',\n  hostDirectives: [\n    {\n      directive: NgpFileUpload,\n      inputs: [\n        'ngpFileUploadFileTypes:types',\n        'ngpFileUploadMultiple:multiple',\n        'ngpFileUploadDirectory:directory',\n        'ngpFileUploadDragDrop:dragDrop',\n        'ngpFileUploadDisabled:disabled',\n      ],\n      outputs: ['ngpFileUploadSelected:selected', 'ngpFileUploadCanceled:canceled'],\n    },\n  ],\n  template: `\n    Drop files here or click to upload\n  `,\n  styles: `\n    :host {\n      display: flex;\n      cursor: pointer;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      row-gap: 0.25rem;\n      border-radius: 0.5rem;\n      border: 1px dashed var(--ngp-border-secondary);\n      background-color: var(--ngp-background);\n      padding: 2rem 3rem;\n    }\n\n    :host[data-dragover] {\n      border-color: var(--ngp-border);\n      background-color: var(--ngp-background-hover);\n    }\n  `,\n})\nexport class FileUpload {}\n",
+      "hasVariants": false,
+      "hasSizes": false
+    }
+  },
+  {
+    "name": "focus-trap",
+    "entryPoint": "ng-primitives/focus-trap",
+    "exports": [
+      "NgpFocusTrap",
+      "NgpFocusTrapState",
+      "NgpFocusTrapProps",
+      "ngpFocusTrap",
+      "injectFocusTrapState",
+      "provideFocusTrapState"
+    ],
+    "hasSecondaryEntryPoint": true,
+    "category": "utility",
+    "description": "focus-trap primitive component",
+    "accessibility": [],
+    "examples": []
+  },
+  {
+    "name": "form-field",
+    "entryPoint": "ng-primitives/form-field",
+    "exports": [
+      "NgpDescription",
+      "injectDescriptionState",
+      "ngpDescription",
+      "provideDescriptionState",
+      "type NgpDescriptionProps",
+      "type NgpDescriptionState",
+      "NgpError",
+      "injectErrorState",
+      "ngpError",
+      "provideErrorState",
+      "type NgpErrorProps",
+      "type NgpErrorState",
+      "NgpFormControl",
+      "ngpFormControl",
+      "NgpFormField",
+      "injectFormFieldState",
+      "ngpFormField",
+      "provideFormFieldState",
+      "type NgpFormFieldProps",
+      "type NgpFormFieldState",
+      "NgpLabel",
+      "injectLabelState",
+      "ngpLabel",
+      "provideLabelState",
+      "type NgpLabelProps",
+      "type NgpLabelState"
+    ],
+    "hasSecondaryEntryPoint": true,
+    "category": "form",
+    "description": "<docs-example name=\"form-field\"></docs-example>",
+    "accessibility": [
+      "screen reader"
+    ],
+    "examples": [
+      {
+        "name": "example-0",
+        "code": "import {\n  NgpFormField,\n  NgpLabel,\n  NgpDescription,\n  NgpError,\n  NgpFormControl,\n} from 'ng-primitives/form-field';",
+        "description": "Import"
+      },
+      {
+        "name": "example-1",
+        "code": "<div ngpFormField>\n  <label ngpLabel>Label</label>\n  <!-- Typically ngpFormControl would not be used directly, but a primitive like ngpInput would be used instead -->\n  <input ngpFormControl />\n  <p ngpDescription>Description</p>\n  <p ngpError ngpErrorValidator=\"required\">Error</p>\n</div>",
+        "description": "Usage"
+      }
+    ],
+    "reusableComponent": {
+      "code": "import { Component } from '@angular/core';\nimport { NgpFormField } from 'ng-primitives/form-field';\n\n@Component({\n  selector: 'app-form-field',\n  hostDirectives: [NgpFormField],\n  template: `\n    <ng-content />\n  `,\n  styles: `\n    :host {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n      width: 90%;\n    }\n  `,\n})\nexport class FormField {}\n",
+      "hasVariants": false,
+      "hasSizes": false
+    }
+  },
+  {
+    "name": "input",
+    "entryPoint": "ng-primitives/input",
+    "exports": [
+      "NgpInput",
+      "injectInputState",
+      "ngpInput",
+      "NgpInputProps",
+      "NgpInputState",
+      "provideInputState"
+    ],
+    "hasSecondaryEntryPoint": true,
+    "category": "form",
+    "description": "The input primitive can be used to enhance the accessibility of an input element and provide consistent interaction handling for hover, focus, press and autofill states.",
+    "accessibility": [],
+    "examples": [
+      {
+        "name": "example-0",
+        "code": "<input ngpInput type=\"text\" />",
+        "description": "Usage"
+      }
+    ],
+    "reusableComponent": {
+      "code": "import { Component } from '@angular/core';\nimport { NgpInput } from 'ng-primitives/input';\n\n@Component({\n  selector: 'input[app-input]',\n  hostDirectives: [{ directive: NgpInput, inputs: ['disabled'] }],\n  template: '',\n  styles: `\n    :host {\n      height: 36px;\n      width: 100%;\n      border-radius: 8px;\n      padding: 0 16px;\n      border: none;\n      box-shadow: var(--ngp-input-shadow);\n      outline: none;\n      box-sizing: border-box;\n    }\n\n    :host:focus {\n      outline: 2px solid var(--ngp-focus-ring);\n      outline-offset: 2px;\n    }\n\n    :host::placeholder {\n      color: var(--ngp-text-placeholder);\n    }\n  `,\n})\nexport class Input {}\n",
+      "hasVariants": false,
+      "hasSizes": false
+    }
+  },
+  {
+    "name": "input-otp",
+    "entryPoint": "ng-primitives/input-otp",
+    "exports": [
+      "NgpInputOtpInput",
+      "NgpInputOtpSlot",
+      "NgpInputOtp",
+      "type NgpInputOtpInputMode",
+      "injectInputOtpState",
+      "provideInputOtpState"
+    ],
+    "hasSecondaryEntryPoint": true,
+    "category": "form",
+    "description": "One-Time Password (OTP) input component with individual character slots for secure authentication codes.",
+    "accessibility": [],
+    "examples": [
+      {
+        "name": "example-0",
+        "code": "<div ngpInputOtp [(ngpInputOtpValue)]=\"otpValue\">\n  <input ngpInputOtpInput />\n\n  <div>\n    <div ngpInputOtpSlot></div>\n    <div ngpInputOtpSlot></div>\n    <div ngpInputOtpSlot></div>\n  </div>\n</div>",
+        "description": "Usage"
+      }
+    ],
+    "reusableComponent": {
+      "code": "import { BooleanInput, NumberInput } from '@angular/cdk/coercion';\nimport {\n  booleanAttribute,\n  Component,\n  computed,\n  forwardRef,\n  input,\n  model,\n  numberAttribute,\n  signal,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { NgpInputOtp, NgpInputOtpInput, NgpInputOtpSlot } from 'ng-primitives/input-otp';\nimport { ChangeFn, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'app-input-otp',\n  imports: [NgpInputOtp, NgpInputOtpInput, NgpInputOtpSlot],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => InputOtp),\n      multi: true,\n    },\n  ],\n  template: `\n    <div\n      [ngpInputOtpValue]=\"value()\"\n      [ngpInputOtpDisabled]=\"disabled() || formDisabled()\"\n      [ngpInputOtpPattern]=\"pattern()\"\n      [ngpInputOtpPlaceholder]=\"placeholder()\"\n      [ngpInputOtpInputMode]=\"inputMode()\"\n      (ngpInputOtpValueChange)=\"onValueChange($event)\"\n      (ngpInputOtpComplete)=\"onComplete()\"\n      ngpInputOtp\n    >\n      <input ngpInputOtpInput />\n      <div class=\"slots\">\n        @for (_ of slots(); track $index) {\n          <div class=\"slot\" ngpInputOtpSlot></div>\n        }\n      </div>\n    </div>\n  `,\n  styles: `\n    :host {\n      display: inline-flex;\n      flex-direction: column;\n      gap: 12px;\n      max-width: 100%;\n    }\n\n    .slots {\n      display: flex;\n      gap: 8px;\n    }\n\n    .slot {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 48px;\n      height: 48px;\n      border: 2px solid var(--ngp-border);\n      border-radius: 8px;\n      background: var(--ngp-background);\n      font-size: 18px;\n      font-weight: 600;\n      color: var(--ngp-text-primary);\n      transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);\n      cursor: pointer;\n      position: relative;\n    }\n\n    .slot[data-filled] {\n      border-color: var(--ngp-border-strong);\n      background: var(--ngp-background-accent);\n    }\n\n    .slot[data-active] {\n      border-color: var(--ngp-focus-ring);\n      box-shadow: 0 0 0 1px var(--ngp-focus-ring);\n    }\n\n    .slot[data-placeholder] {\n      color: var(--ngp-text-placeholder);\n    }\n\n    .slot[data-caret]::after {\n      content: '';\n      position: absolute;\n      width: 2px;\n      height: 20px;\n      background: var(--ngp-focus-ring);\n      animation: blink 1s infinite;\n    }\n\n    @keyframes blink {\n      0%,\n      50% {\n        opacity: 1;\n      }\n      51%,\n      100% {\n        opacity: 0;\n      }\n    }\n\n    :host([data-disabled]) .slot {\n      background: var(--ngp-background-disabled);\n      color: var(--ngp-text-disabled);\n      border-color: var(--ngp-border-disabled);\n      cursor: not-allowed;\n    }\n  `,\n})\nexport class InputOtp implements ControlValueAccessor {\n  /**\n   * The number of slots to display.\n   */\n  readonly length = input<number, NumberInput>(6, {\n    transform: numberAttribute,\n  });\n\n  /**\n   * Whether the input is disabled.\n   */\n  readonly disabled = input<boolean, BooleanInput>(false, {\n    transform: booleanAttribute,\n  });\n\n  /**\n   * The pattern for allowed characters.\n   */\n  readonly pattern = input('[0-9]');\n\n  /**\n   * The placeholder character for empty slots.\n   */\n  readonly placeholder = input('');\n\n  /**\n   * The input mode for the hidden input.\n   */\n  readonly inputMode = input<'numeric' | 'text' | 'decimal' | 'tel' | 'search' | 'email' | 'url'>(\n    'numeric',\n  );\n\n  /**\n   * Create an array for tracking slots.\n   */\n  protected readonly slots = computed(() => Array.from({ length: this.length() }, (_, i) => i));\n\n  /**\n   * The current value.\n   */\n  readonly value = model<string>('');\n\n  private onChange: ChangeFn<string> = () => {};\n  private onTouched: TouchedFn = () => {};\n\n  protected readonly formDisabled = signal(false);\n\n  /**\n   * Handle value changes from the input-otp directive.\n   */\n  onValueChange(value: string): void {\n    this.value.set(value);\n    this.onChange(value);\n  }\n\n  /**\n   * Handle completion events from the input-otp directive.\n   */\n  onComplete(): void {\n    this.onTouched();\n  }\n\n  // ControlValueAccessor implementation\n  writeValue(value: string): void {\n    this.value.set(value);\n  }\n\n  registerOnChange(fn: ChangeFn<string>): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: TouchedFn): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.formDisabled.set(isDisabled);\n  }\n}\n",
+      "hasVariants": false,
+      "hasSizes": true
+    }
+  },
+  {
+    "name": "interactions",
+    "entryPoint": "ng-primitives/interactions",
+    "exports": [
+      "NgpInteractionsConfig",
+      "provideInteractionsConfig",
+      "NgpFocusVisible",
+      "ngpFocusVisible",
+      "NgpFocus",
+      "ngpFocus",
+      "NgpHover",
+      "ngpHover",
+      "ngpInteractions",
+      "NgpMove",
+      "NgpMoveEvent",
+      "NgpPress",
+      "ngpPress"
+    ],
+    "hasSecondaryEntryPoint": true,
+    "category": "utility",
+    "description": "interactions primitive component",
+    "accessibility": [],
+    "examples": []
+  },
+  {
+    "name": "listbox",
+    "entryPoint": "ng-primitives/listbox",
+    "exports": [
+      "NgpListboxHeader",
+      "NgpListboxOption",
+      "NgpListboxSection",
+      "NgpListboxTrigger",
+      "NgpListbox",
+      "injectListboxState",
+      "provideListboxState"
+    ],
+    "hasSecondaryEntryPoint": true,
+    "category": "form",
+    "description": "A listbox presents a set of choices and lets users select one or multiple options.",
+    "accessibility": [
+      "ARIA Listbox"
+    ],
+    "examples": [
+      {
+        "name": "example-0",
+        "code": "<div ngpListbox>\n  <div ngpListboxOption ngpListboxOptionValue=\"1\">Option 1</div>\n  <div ngpListboxOption ngpListboxOptionValue=\"2\">Option 2</div>\n  <div ngpListboxOption ngpListboxOptionValue=\"3\">Option 3</div>\n</div>",
+        "description": "Usage"
+      }
+    ],
+    "reusableComponent": {
+      "code": "import { Component } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { heroCheckSolid } from '@ng-icons/heroicons/solid';\nimport { NgpListboxOption } from 'ng-primitives/listbox';\n\n@Component({\n  selector: 'app-listbox-option',\n  hostDirectives: [\n    {\n      directive: NgpListboxOption,\n      inputs: ['id', 'ngpListboxOptionValue:value', 'ngpListboxOptionDisabled:disabled'],\n    },\n  ],\n  imports: [NgIcon],\n  providers: [provideIcons({ heroCheckSolid })],\n  template: `\n    <ng-icon name=\"heroCheckSolid\" size=\"16px\" />\n    <ng-content />\n  `,\n  styles: `\n    :host {\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n      padding: 0.375rem 0.75rem;\n      cursor: pointer;\n      border-radius: 0.5rem;\n      width: 100%;\n      height: 36px;\n      box-sizing: border-box;\n    }\n\n    :host[data-hover] {\n      background-color: var(--ngp-background-hover);\n    }\n\n    :host[data-press] {\n      background-color: var(--ngp-background-active);\n    }\n\n    :host[data-active] {\n      background-color: var(--ngp-background-active);\n    }\n\n    :host ng-icon {\n      visibility: hidden;\n    }\n\n    :host[data-selected] ng-icon {\n      visibility: visible;\n    }\n  `,\n})\nexport class ListboxOption {}\n",
+      "hasVariants": false,
+      "hasSizes": true
+    }
+  },
+  {
+    "name": "menu",
+    "entryPoint": "ng-primitives/menu",
+    "exports": [
+      "injectOverlayContext as injectMenuContext",
+      "NgpMenuConfig",
+      "provideMenuConfig",
+      "NgpMenuItem",
+      "injectMenuItemState",
+      "NgpMenuItemProps",
+      "NgpMenuItemState",
+      "provideMenuItemState",
+      "NgpMenuTrigger",
+      "type NgpMenuPlacement",
+      "injectMenuTriggerState",
+      "NgpMenuTriggerProps",
+      "NgpMenuTriggerState",
+      "provideMenuTriggerState",
+      "NgpMenu",
+      "injectMenuState",
+      "NgpMenuProps",
+      "NgpMenuState",
+      "provideMenuState",
+      "NgpSubmenuTrigger",
+      "injectSubmenuTriggerState",
+      "NgpSubmenuTriggerProps",
+      "NgpSubmenuTriggerState",
+      "provideSubmenuTriggerState"
+    ],
+    "hasSecondaryEntryPoint": true,
+    "category": "navigation",
+    "description": "A menu is a list of options or commands presented to the user in a dropdown list.",
+    "accessibility": [
+      "ARIA Authoring"
+    ],
+    "examples": [
+      {
+        "name": "example-0",
+        "code": "<button [ngpMenuTrigger]=\"menu\" ngpButton></button>\n\n<ng-template #menu>\n  <div ngpMenu>\n    <button ngpMenuItem>Item 1</button>\n    <button ngpMenuItem>Item 2</button>\n    <button ngpMenuItem>Item 3</button>\n  </div>\n</ng-template>",
+        "description": "Usage"
+      },
+      {
+        "name": "example-1",
+        "code": "<!-- Simple number offset -->\n<button [ngpMenuTrigger]=\"menu\" ngpMenuTriggerOffset=\"12\">Menu with 12px offset</button>\n\n<!-- Object offset for precise control -->\n<button\n  [ngpMenuTrigger]=\"menu\"\n  [ngpMenuTriggerOffset]=\"{mainAxis: 8, crossAxis: 4, alignmentAxis: 2}\"\n>\n  Menu with custom offset\n</button>",
+        "description": "Custom Offset"
+      },
+      {
+        "name": "example-2",
+        "code": "import { provideMenuConfig } from 'ng-primitives/menu';\n\nbootstrapApplication(AppComponent, {\n  providers: [\n    provideMenuConfig({\n      offset: 4,\n      placement: 'top',\n      flip: true,\n      container: document.body,\n      scrollBehavior: 'reposition',\n    }),\n  ],\n});",
+        "description": "Global Configuration"
+      },
+      {
+        "name": "example-3",
+        "code": "offset: {\n    mainAxis: 8,     // Distance between menu and trigger element\n    crossAxis: 4,    // Skidding along the alignment axis  \n    alignmentAxis: 2 // Same as crossAxis but for aligned placements\n  }",
+        "description": "NgpMenuConfig"
+      }
+    ],
+    "reusableComponent": {
+      "code": "import { Component } from '@angular/core';\nimport { NgpMenuItem } from 'ng-primitives/menu';\n\n@Component({\n  selector: 'button[app-menu-item]',\n  hostDirectives: [NgpMenuItem],\n  template: `\n    <ng-content />\n  `,\n  styles: `\n    :host {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 6px 8px 6px 14px;\n      border: none;\n      background: none;\n      cursor: pointer;\n      transition: background-color 0.2s;\n      border-radius: 4px;\n      min-width: 120px;\n      text-align: start;\n      outline: none;\n      font-size: 14px;\n      font-weight: 400;\n    }\n\n    :host[data-hover] {\n      background-color: var(--ngp-background-active);\n    }\n\n    :host[data-focus-visible] {\n      outline: 2px solid var(--ngp-focus-ring);\n      z-index: 1;\n    }\n  `,\n})\nexport class MenuItem {}\n",
+      "hasVariants": false,
+      "hasSizes": true
+    }
+  },
+  {
+    "name": "meter",
+    "entryPoint": "ng-primitives/meter",
+    "exports": [
+      "NgpMeter",
+      "provideMeterState",
+      "injectMeterState",
+      "NgpMeterTrack",
+      "NgpMeterIndicator",
+      "NgpMeterValue",
+      "NgpMeterLabel"
+    ],
+    "hasSecondaryEntryPoint": true,
+    "category": "feedback",
+    "description": "A meter is a visual representation of a value within a range.",
+    "accessibility": [],
+    "examples": [
+      {
+        "name": "example-0",
+        "code": "import {\n  NgpMeter,\n  NgpMeterValue,\n  NgpMeterIndicator,\n  NgpMeterTrack,\n  NgpMeterLabel,\n} from 'ng-primitives/meter';",
+        "description": "Import"
+      },
+      {
+        "name": "example-1",
+        "code": "<div ngpMeter>\n  <span ngpMeterLabel>Label</span>\n  <span ngpMeterValue>Value</span>\n  <div ngpMeterTrack>\n    <div ngpMeterIndicator></div>\n  </div>\n</div>",
+        "description": "Usage"
+      }
+    ],
+    "reusableComponent": {
+      "code": "import { NumberInput } from '@angular/cdk/coercion';\nimport { Component, input, numberAttribute } from '@angular/core';\nimport {\n  NgpMeter,\n  NgpMeterIndicator,\n  NgpMeterLabel,\n  NgpMeterTrack,\n  NgpMeterValue,\n} from 'ng-primitives/meter';\n\n@Component({\n  selector: 'app-meter',\n  hostDirectives: [\n    { directive: NgpMeter, inputs: ['ngpMeterValue:value', 'ngpMeterMin:min', 'ngpMeterMax:max'] },\n  ],\n  imports: [NgpMeterIndicator, NgpMeterLabel, NgpMeterValue, NgpMeterTrack],\n  template: `\n    <span ngpMeterLabel>{{ label() }}</span>\n    <span ngpMeterValue>{{ value() }}%</span>\n\n    <div ngpMeterTrack>\n      <div ngpMeterIndicator></div>\n    </div>\n  `,\n  styles: `\n    :host {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      grid-row-gap: 0.5rem;\n      width: 200px;\n      box-sizing: border-box;\n      padding: 0.5rem;\n    }\n\n    [ngpMeterLabel] {\n      color: var(--ngp-text-emphasis);\n      font-size: 14px;\n      font-weight: 600;\n    }\n\n    [ngpMeterValue] {\n      color: var(--ngp-text-secondary);\n      font-size: 14px;\n      font-weight: 500;\n      text-align: right;\n      grid-column-start: 2;\n      text-align: end;\n    }\n\n    [ngpMeterTrack] {\n      grid-column: 1 / 3;\n      overflow: hidden;\n      background-color: var(--ngp-background);\n      box-shadow: var(--ngp-shadow-border);\n      border-radius: 4px;\n      height: 8px;\n    }\n\n    [ngpMeterIndicator] {\n      background-color: var(--ngp-background-success);\n      height: 100%;\n      transition: width 0.2s ease-in-out;\n      inset-inline-start: 0px;\n      border-radius: 4px;\n    }\n  `,\n})\nexport class Meter {\n  /** The value of the meter. */\n  readonly value = input<number, NumberInput>(0, {\n    transform: numberAttribute,\n  });\n\n  /** The label of the meter. */\n  readonly label = input.required<string>();\n}\n",
+      "hasVariants": false,
+      "hasSizes": true
+    }
+  },
+  {
+    "name": "pagination",
+    "entryPoint": "ng-primitives/pagination",
+    "exports": [
+      "NgpPaginationButton",
+      "NgpPaginationFirst",
+      "NgpPaginationLast",
+      "NgpPaginationNext",
+      "NgpPaginationPrevious",
+      "NgpPagination",
+      "injectPaginationState",
+      "providePaginationState"
+    ],
+    "hasSecondaryEntryPoint": true,
+    "category": "navigation",
+    "description": "The Pagination primitives provide a set of directives to create a pagination control. The pagination control is used to navigate through a set of data that is split into multiple pages.",
+    "accessibility": [],
+    "examples": [
+      {
+        "name": "example-0",
+        "code": "import {\n  NgpPagination,\n  NgpPaginationButton,\n  NgpPaginationFirst,\n  NgpPaginationNext,\n  NgpPaginationPrevious,\n  NgpPaginationLast,\n} from 'ng-primitives/pagination';",
+        "description": "Import"
+      },
+      {
+        "name": "example-1",
+        "code": "<nav\n  [(ngpPaginationPage)]=\"page\"\n  ngpPagination\n  ngpPaginationPageCount=\"5\"\n  aria-label=\"Pagination Navigation\"\n>\n  <ul>\n    <li>\n      <a ngpPaginationFirst aria-label=\"First Page\">\n        <ng-icon name=\"heroChevronDoubleLeft\" />\n      </a>\n    </li>\n\n    <li>\n      <a ngpPaginationPrevious aria-label=\"Previous Page\">\n        <ng-icon name=\"heroChevronLeft\" />\n      </a>\n    </li>\n\n    <li>\n      <a ngpPaginationButton ngpPaginationButtonPage=\"1\" aria-label=\"Page 1\">1</a>\n    </li>\n    <li>\n      <a ngpPaginationButton ngpPaginationButtonPage=\"2\" aria-label=\"Page 2\">2</a>\n    </li>\n    <li>\n      <a ngpPaginationButton ngpPaginationButtonPage=\"3\" aria-label=\"Page 3\">3</a>\n    </li>\n    <li>\n      <a ngpPaginationButton ngpPaginationButtonPage=\"4\" aria-label=\"Page 4\">4</a>\n    </li>\n    <li>\n      <a ngpPaginationButton ngpPaginationButtonPage=\"5\" aria-label=\"Page 5\">5</a>\n    </li>\n\n    <li>\n      <a ngpPaginationNext aria-label=\"Next Page\">\n        <ng-icon name=\"heroChevronRight\" />\n      </a>\n    </li>\n\n    <li>\n      <a ngpPaginationLast aria-label=\"Last Page\">\n        <ng-icon name=\"heroChevronDoubleRight\" />\n      </a>\n    </li>\n  </ul>\n</nav>",
+        "description": "Usage"
+      }
+    ],
+    "reusableComponent": {
+      "code": "import { Component, computed } from '@angular/core';\nimport { ControlValueAccessor } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport {\n  heroChevronDoubleLeft,\n  heroChevronDoubleRight,\n  heroChevronLeft,\n  heroChevronRight,\n} from '@ng-icons/heroicons/outline';\nimport {\n  injectPaginationState,\n  NgpPagination,\n  NgpPaginationButton,\n  NgpPaginationFirst,\n  NgpPaginationLast,\n  NgpPaginationNext,\n  NgpPaginationPrevious,\n} from 'ng-primitives/pagination';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'app-pagination',\n  hostDirectives: [\n    {\n      directive: NgpPagination,\n      inputs: [\n        'ngpPaginationPage:page',\n        'ngpPaginationPageCount:pageCount',\n        'ngpPaginationDisabled:disabled',\n      ],\n      outputs: ['ngpPaginationPageChange:pageChange'],\n    },\n  ],\n  imports: [\n    NgpPaginationButton,\n    NgpPaginationFirst,\n    NgpPaginationLast,\n    NgpPaginationNext,\n    NgpPaginationPrevious,\n    NgIcon,\n  ],\n  providers: [\n    provideValueAccessor(NgpPagination),\n    provideIcons({\n      heroChevronDoubleLeft,\n      heroChevronDoubleRight,\n      heroChevronLeft,\n      heroChevronRight,\n    }),\n  ],\n  template: `\n    <ul>\n      <li>\n        <button ngpPaginationFirst aria-label=\"First Page\">\n          <ng-icon name=\"heroChevronDoubleLeft\" />\n        </button>\n      </li>\n\n      <li>\n        <button ngpPaginationPrevious aria-label=\"Previous Page\">\n          <ng-icon name=\"heroChevronLeft\" />\n        </button>\n      </li>\n\n      @for (page of pages(); track page) {\n        <li>\n          <button\n            [ngpPaginationButtonPage]=\"page\"\n            [attr.aria-label]=\"'Page ' + page\"\n            ngpPaginationButton\n          >\n            {{ page }}\n          </button>\n        </li>\n      }\n\n      <li>\n        <button ngpPaginationNext aria-label=\"Next Page\">\n          <ng-icon name=\"heroChevronRight\" />\n        </button>\n      </li>\n\n      <li>\n        <button ngpPaginationLast aria-label=\"Last Page\">\n          <ng-icon name=\"heroChevronDoubleRight\" />\n        </button>\n      </li>\n    </ul>\n  `,\n  styles: `\n    ul {\n      display: flex;\n      align-items: center;\n      column-gap: 0.5rem;\n      list-style: none;\n    }\n\n    [ngpPaginationFirst],\n    [ngpPaginationPrevious],\n    [ngpPaginationButton],\n    [ngpPaginationNext],\n    [ngpPaginationLast] {\n      all: unset;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      width: 2rem;\n      height: 2rem;\n      border-radius: 0.5rem;\n      color: var(--ngp-text-primary);\n      outline: none;\n      font-size: 14px;\n      font-weight: 500;\n      background-color: var(--ngp-background);\n      box-shadow: var(--ngp-button-shadow);\n      cursor: pointer;\n      transition: background-color 0.2s;\n\n      &[data-hover]:not([data-disabled]):not([data-selected]) {\n        background-color: var(--ngp-background-hover);\n      }\n\n      &[data-focus-visible]:not([data-disabled]) {\n        outline: 2px solid var(--ngp-focus-ring);\n      }\n\n      &[data-press]:not([data-disabled]):not([data-selected]) {\n        background-color: var(--ngp-background-active);\n      }\n\n      &[data-disabled] {\n        color: rgb(210 210 210);\n        background-color: var(--ngp-background-disabled);\n        cursor: not-allowed;\n        box-shadow: none;\n      }\n\n      &[data-selected] {\n        background-color: var(--ngp-background-inverse);\n        color: var(--ngp-text-inverse);\n      }\n    }\n  `,\n  host: {\n    '(focusout)': 'onTouched?.()',\n  },\n})\nexport class Pagination implements ControlValueAccessor {\n  /** Access the pagination state */\n  protected readonly state = injectPaginationState();\n\n  /** Get the pages as an array we can iterate over */\n  protected readonly pages = computed(() =>\n    Array.from({ length: this.state().pageCount() }).map((_, i) => i + 1),\n  );\n\n  /** The onChange callback */\n  private onChange?: ChangeFn<number>;\n\n  /** The onTouched callback */\n  protected onTouched?: TouchedFn;\n\n  constructor() {\n    this.state().pageChange.subscribe(value => this.onChange?.(value));\n  }\n\n  /** Write a new value to the control */\n  writeValue(value: number): void {\n    this.state().page.set(value);\n  }\n\n  /** Register a callback to be called when the value changes */\n  registerOnChange(fn: ChangeFn<number>): void {\n    this.onChange = fn;\n  }\n\n  /** Register a callback to be called when the control is touched */\n  registerOnTouched(fn: TouchedFn): void {\n    this.onTouched = fn;\n  }\n}\n",
+      "hasVariants": false,
+      "hasSizes": true
+    }
+  },
+  {
+    "name": "popover",
+    "entryPoint": "ng-primitives/popover",
+    "exports": [
+      "injectOverlayContext as injectPopoverContext",
+      "NgpPopoverConfig",
+      "providePopoverConfig",
+      "NgpPopoverArrow",
+      "NgpPopoverTrigger",
+      "type NgpPopoverPlacement",
+      "injectPopoverTriggerState",
+      "providePopoverTriggerState",
+      "NgpPopover"
+    ],
+    "hasSecondaryEntryPoint": true,
+    "category": "feedback",
+    "description": "Display arbitrary content inside floating panels.",
+    "accessibility": [],
+    "examples": [
+      {
+        "name": "example-0",
+        "code": "<button [ngpPopoverTrigger]=\"popover\" (ngpPopoverTriggerOpenChange)=\"onPopoverStateChange($event)\">\n  Click me\n</button>\n\n<ng-template #popover>\n  <div ngpPopover>Popover content</div>\n</ng-template>",
+        "description": "Usage"
+      },
+      {
+        "name": "example-1",
+        "code": "<!-- Simple number offset -->\n<button [ngpPopoverTrigger]=\"popover\" ngpPopoverTriggerOffset=\"12\">Popover with 12px offset</button>\n\n<!-- Object offset for precise control -->\n<button\n  [ngpPopoverTrigger]=\"popover\"\n  [ngpPopoverTriggerOffset]=\"{mainAxis: 8, crossAxis: 4, alignmentAxis: 2}\"\n>\n  Popover with custom offset\n</button>",
+        "description": "Custom Offset"
+      },
+      {
+        "name": "example-2",
+        "code": "import { providePopoverConfig } from 'ng-primitives/popover';\n\nbootstrapApplication(AppComponent, {\n  providers: [\n    providePopoverConfig({\n      offset: 4,\n      placement: 'top',\n      showDelay: 0,\n      hideDelay: 0,\n      flip: true,\n      container: document.body,\n      closeOnOutsideClick: true,\n      scrollBehavior: 'reposition',\n    }),\n  ],\n});",
+        "description": "Global Configuration"
+      },
+      {
+        "name": "example-3",
+        "code": "offset: {\n    mainAxis: 8,     // Distance between popover and trigger element\n    crossAxis: 4,    // Skidding along the alignment axis  \n    alignmentAxis: 2 // Same as crossAxis but for aligned placements\n  }",
+        "description": "NgpPopoverConfig"
+      }
+    ],
+    "reusableComponent": {
+      "code": "import { Directive, input } from '@angular/core';\nimport { injectPopoverTriggerState } from 'ng-primitives/popover';\nimport { NgpPopoverTrigger } from 'ng-primitives/popover';\nimport { Popover } from './popover';\n\n@Directive({\n  selector: '[appPopoverTrigger]',\n  hostDirectives: [\n    {\n      directive: NgpPopoverTrigger,\n      inputs: [\n        'ngpPopoverTriggerDisabled:appPopoverTriggerDisabled',\n        'ngpPopoverTriggerPlacement:appPopoverTriggerPlacement',\n        'ngpPopoverTriggerOffset:appPopoverTriggerOffset',\n        'ngpPopoverTriggerShowDelay:appPopoverTriggerShowDelay',\n        'ngpPopoverTriggerHideDelay:appPopoverTriggerHideDelay',\n        'ngpPopoverTriggerFlip:appPopoverTriggerFlip',\n        'ngpPopoverTriggerContainer:appPopoverTriggerContainer',\n        'ngpPopoverTriggerCloseOnOutsideClick:appPopoverTriggerCloseOnOutsideClick',\n        'ngpPopoverTriggerCloseOnEscape:appPopoverTriggerCloseOnEscape',\n        'ngpPopoverTriggerScrollBehavior:appPopoverTriggerScrollBehavior',\n        'ngpPopoverTriggerContext:appPopoverTrigger',\n      ],\n    },\n  ],\n})\nexport class PopoverTrigger {\n  /** Access the popover trigger */\n  private readonly popoverTrigger = injectPopoverTriggerState();\n\n  /** Define the content of the popover */\n  readonly content = input.required<string>({\n    alias: 'appPopoverTrigger',\n  });\n\n  constructor() {\n    this.popoverTrigger().popover.set(Popover);\n  }\n}\n",
+      "hasVariants": false,
+      "hasSizes": false
+    }
+  },
+  {
+    "name": "portal",
+    "entryPoint": "ng-primitives/portal",
+    "exports": [
+      "createOverlay",
+      "injectOverlay",
+      "NgpOverlay",
+      "NgpOverlayConfig",
+      "NgpOverlayContent",
+      "NgpOverlayTemplateContext",
+      "setupOverlayArrow",
+      "injectOverlayContext",
+      "provideOverlayContext",
+      "createPortal",
+      "NgpComponentPortal",
+      "NgpPortal",
+      "NgpTemplatePortal",
+      "BlockScrollStrategy",
+      "NoopScrollStrategy",
+      "ScrollStrategy",
+      "NgpOffset",
+      "NgpOffsetInput",
+      "NgpOffsetOptions",
+      "coerceOffset"
+    ],
+    "hasSecondaryEntryPoint": true,
+    "category": "layout",
+    "description": "portal primitive component",
+    "accessibility": [],
+    "examples": []
+  },
+  {
+    "name": "progress",
+    "entryPoint": "ng-primitives/progress",
+    "exports": [
+      "NgpProgressIndicator",
+      "NgpProgressLabel",
+      "NgpProgressTrack",
+      "NgpProgressValue",
+      "NgpProgress",
+      "NgpProgressValueTextFn",
+      "injectProgressState",
+      "provideProgressState"
+    ],
+    "hasSecondaryEntryPoint": true,
+    "category": "feedback",
+    "description": "Display an indicator representing the progress of a task.",
+    "accessibility": [
+      "ARIA Progressbar"
+    ],
+    "examples": [
+      {
+        "name": "example-0",
+        "code": "import {\n  NgpProgress,\n  NgpProgressTrack,\n  NgpProgressLabel,\n  NgpProgressValue,\n  NgpProgressIndicator,\n} from 'ng-primitives/progress';",
+        "description": "Import"
+      },
+      {
+        "name": "example-1",
+        "code": "<div ngpProgress [ngpProgressValue]=\"percentage\">\n  <label ngpProgressLabel></label>\n  <span ngpProgressValue></span>\n\n  <div ngpProgressTrack>\n    <div ngpProgressIndicator></div>\n  </div>\n</div>",
+        "description": "Usage"
+      }
+    ],
+    "reusableComponent": {
+      "code": "import { NumberInput } from '@angular/cdk/coercion';\nimport { Component, input, numberAttribute } from '@angular/core';\nimport {\n  NgpProgress,\n  NgpProgressIndicator,\n  NgpProgressLabel,\n  NgpProgressTrack,\n  NgpProgressValue,\n} from 'ng-primitives/progress';\n\n@Component({\n  selector: 'app-progress',\n  hostDirectives: [\n    {\n      directive: NgpProgress,\n      inputs: ['ngpProgressValue:value', 'ngpProgressMax:max', 'ngpProgressValueLabel:valueLabel'],\n    },\n  ],\n  imports: [NgpProgressIndicator, NgpProgressTrack, NgpProgressLabel, NgpProgressValue],\n  template: `\n    <label ngpProgressLabel>{{ label() }}</label>\n    <span ngpProgressValue>{{ value() }}%</span>\n\n    <div ngpProgressTrack>\n      <div ngpProgressIndicator></div>\n    </div>\n  `,\n  styles: `\n    :host {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      grid-row-gap: 0.5rem;\n      width: 200px;\n      box-sizing: border-box;\n      padding: 0.5rem;\n    }\n\n    [ngpProgressLabel] {\n      color: var(--ngp-text-emphasis);\n      font-size: 14px;\n      font-weight: 600;\n    }\n\n    [ngpProgressValue] {\n      color: var(--ngp-text-secondary);\n      font-size: 14px;\n      font-weight: 500;\n      text-align: right;\n      grid-column-start: 2;\n      text-align: end;\n    }\n\n    [ngpProgressTrack] {\n      grid-column: 1 / 3;\n      position: relative;\n      height: 12px;\n      width: 100%;\n      max-width: 320px;\n      overflow: hidden;\n      border-radius: 0.5rem;\n      border: 1px solid var(--ngp-border);\n      background-color: var(--ngp-background);\n    }\n\n    [ngpProgressIndicator] {\n      height: 100%;\n      border-radius: 0.5rem;\n      background-color: var(--ngp-background-inverse);\n      transition: width 150ms cubic-bezier(0.4, 0, 0.2, 1);\n    }\n  `,\n})\nexport class Progress {\n  /** The value of the progress. */\n  readonly value = input<number, NumberInput>(0, {\n    transform: numberAttribute,\n  });\n\n  /** The label of the progress. */\n  readonly label = input.required<string>();\n}\n",
+      "hasVariants": false,
+      "hasSizes": true
+    }
+  },
+  {
+    "name": "radio",
+    "entryPoint": "ng-primitives/radio",
+    "exports": [
+      "NgpRadioGroup",
+      "injectRadioGroupState",
+      "provideRadioGroupState",
+      "NgpRadioIndicator",
+      "NgpRadioItem",
+      "injectRadioItemState",
+      "provideRadioItemState"
+    ],
+    "hasSecondaryEntryPoint": true,
+    "category": "form",
+    "description": "Selection within a group.",
+    "accessibility": [
+      "ARIA design"
+    ],
+    "examples": [
+      {
+        "name": "example-0",
+        "code": "<div ngpRadioGroup [(ngpRadioGroupValue)]=\"value\">\n  <button ngpRadioItem ngpRadioItemValue=\"Option 1\">\n    <ng-icon ngpRadioIndicator name=\"dot\" />\n    Option 1\n  </button>\n\n  <button ngpRadioItem ngpRadioItemValue=\"Option 2\">\n    <ng-icon ngpRadioIndicator name=\"dot\" />\n    Option 2\n  </button>\n\n  <button ngpRadioItem ngpRadioItemValue=\"Option 3\">\n    <ng-icon ngpRadioIndicator name=\"dot\" />\n    Option 3\n  </button>\n</div>",
+        "description": "Usage"
+      }
+    ],
+    "reusableComponent": {
+      "code": "import { Component } from '@angular/core';\nimport { ControlValueAccessor } from '@angular/forms';\nimport { injectRadioGroupState, NgpRadioGroup } from 'ng-primitives/radio';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'app-radio-group',\n  hostDirectives: [\n    {\n      directive: NgpRadioGroup,\n      inputs: [\n        'ngpRadioGroupValue:value',\n        'ngpRadioGroupDisabled:disabled',\n        'ngpRadioGroupOrientation:orientation',\n      ],\n      outputs: ['ngpRadioGroupValueChange:valueChange'],\n    },\n  ],\n  providers: [provideValueAccessor(RadioGroup)],\n  template: `\n    <ng-content />\n  `,\n  styles: `\n    :host {\n      display: flex;\n      flex-direction: column;\n      row-gap: 1rem;\n    }\n  `,\n  host: {\n    '(focusout)': 'onTouched?.()',\n  },\n})\nexport class RadioGroup implements ControlValueAccessor {\n  /** Access the radio group state */\n  protected readonly state = injectRadioGroupState<string>();\n\n  /** The on change callback */\n  private onChange?: ChangeFn<string | null>;\n\n  /** The on touched callback */\n  protected onTouched?: TouchedFn;\n\n  constructor() {\n    this.state().valueChange.subscribe(value => this.onChange?.(value));\n  }\n\n  /** Write a new value to the radio group */\n  writeValue(value: string): void {\n    this.state().value.set(value);\n  }\n\n  /** Register the on change callback */\n  registerOnChange(onChange: ChangeFn<string | null>): void {\n    this.onChange = onChange;\n  }\n\n  /** Register the on touched callback */\n  registerOnTouched(onTouched: TouchedFn): void {\n    this.onTouched = onTouched;\n  }\n}\n",
+      "hasVariants": false,
+      "hasSizes": false
+    }
+  },
+  {
+    "name": "resize",
+    "entryPoint": "ng-primitives/resize",
+    "exports": [
+      "Dimensions",
+      "NgpResize"
+    ],
+    "hasSecondaryEntryPoint": true,
+    "category": "utility",
+    "description": "Perform actions on element resize.",
+    "accessibility": [],
+    "examples": [
+      {
+        "name": "example-0",
+        "code": "<div (ngpResize)=\"onResize($event)\"></div>",
+        "description": "Usage"
+      }
+    ]
+  },
+  {
+    "name": "roving-focus",
+    "entryPoint": "ng-primitives/roving-focus",
+    "exports": [
+      "NgpRovingFocusGroup",
+      "injectRovingFocusGroupState",
+      "ngpRovingFocusGroup",
+      "NgpRovingFocusGroupProps",
+      "NgpRovingFocusGroupState",
+      "NgpRovingFocusGroupStateToken",
+      "provideRovingFocusGroupState",
+      "injectRovingFocusGroup",
+      "NgpRovingFocusGroupOptions",
+      "NgpRovingFocusGroupToken",
+      "provideRovingFocusGroup",
+      "NgpRovingFocusItem",
+      "injectRovingFocusItemState",
+      "ngpRovingFocusItem",
+      "NgpRovingFocusItemProps",
+      "NgpRovingFocusItemState",
+      "NgpRovingFocusItemStateToken",
+      "provideRovingFocusItemState"
+    ],
+    "hasSecondaryEntryPoint": true,
+    "category": "utility",
+    "description": "Handle focus for a group of elements.",
+    "accessibility": [
+      "ARIA Keyboard"
+    ],
+    "examples": [
+      {
+        "name": "example-0",
+        "code": "<div ngpRovingFocusGroup>\n  <button ngpRovingFocusItem>Item 1</button>\n  <button ngpRovingFocusItem>Item 2</button>\n  <button ngpRovingFocusItem>Item 3</button>\n</div>",
+        "description": "Usage"
+      }
+    ]
+  },
+  {
+    "name": "search",
+    "entryPoint": "ng-primitives/search",
+    "exports": [
+      "NgpSearchClear",
+      "NgpSearch",
+      "provideSearchState",
+      "injectSearchState"
+    ],
+    "hasSecondaryEntryPoint": true,
+    "category": "form",
+    "description": "The search primitive is a form control that allows users to enter a search query and clear the input.",
+    "accessibility": [
+      "ARIA design"
+    ],
+    "examples": [
+      {
+        "name": "example-0",
+        "code": "<div ngpFormField>\n  <label ngpLabel>Label</label>\n  <div ngpSearch>\n    <input ngpInput type=\"search\" />\n    <button ngpSearchClear ngpButton aria-label=\"Clear search\">Clear</button>\n  </div>\n</div>",
+        "description": "Usage"
+      }
+    ],
+    "reusableComponent": {
+      "code": "import { Component, input, model } from '@angular/core';\nimport { ControlValueAccessor } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { heroMagnifyingGlass } from '@ng-icons/heroicons/outline';\nimport { NgpButton } from 'ng-primitives/button';\nimport { NgpInput } from 'ng-primitives/input';\nimport { NgpSearch, NgpSearchClear } from 'ng-primitives/search';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'app-search',\n  hostDirectives: [NgpSearch],\n  imports: [NgIcon, NgpSearchClear, NgpInput, NgpButton],\n  providers: [provideValueAccessor(Search), provideIcons({ heroMagnifyingGlass })],\n  template: `\n    <ng-icon name=\"heroMagnifyingGlass\" />\n    <input\n      [value]=\"query()\"\n      [placeholder]=\"placeholder()\"\n      (input)=\"onQueryChange($event)\"\n      ngpInput\n      type=\"search\"\n    />\n    <button ngpSearchClear ngpButton aria-label=\"Clear search\">Clear</button>\n  `,\n  styles: `\n    :host {\n      display: block;\n      position: relative;\n    }\n\n    [ngpInput] {\n      height: 36px;\n      width: 100%;\n      border-radius: 8px;\n      padding: 0 16px 0 40px;\n      border: none;\n      background: var(--ngp-background);\n      box-shadow: var(--ngp-input-shadow);\n      outline: none;\n    }\n\n    /* clears the 'X' from Chrome */\n    [ngpInput]::-webkit-search-decoration,\n    [ngpInput]::-webkit-search-cancel-button,\n    [ngpInput]::-webkit-search-results-button,\n    [ngpInput]::-webkit-search-results-decoration {\n      display: none;\n    }\n\n    [ngpInput][data-focus] {\n      outline: 2px solid var(--ngp-focus-ring);\n      outline-offset: 0px;\n    }\n\n    [ngpInput]::placeholder {\n      color: var(--ngp-text-placeholder);\n    }\n\n    [ngpButton] {\n      position: absolute;\n      top: 0;\n      right: 0;\n      height: 36px;\n      padding: 0 16px;\n      border: none;\n      border-radius: 0 8px 8px 0;\n      background-color: transparent;\n      color: var(--ngp-text-blue);\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n      cursor: pointer;\n      outline: none;\n      display: none;\n    }\n\n    [ngpButton]:not([data-empty]) {\n      display: block;\n    }\n\n    ng-icon {\n      position: absolute;\n      font-size: 1.25rem;\n      top: 18px;\n      left: 12px;\n      transform: translateY(-50%);\n      color: var(--ngp-text-tertiary);\n    }\n  `,\n  host: {\n    '(focusout)': 'onTouched?.()',\n  },\n})\nexport class Search implements ControlValueAccessor {\n  /** The search query */\n  readonly query = model<string>('');\n\n  /** The placeholder text */\n  readonly placeholder = input<string>('');\n\n  /** The function to call when the value changes */\n  private onChange?: ChangeFn<string>;\n\n  /** The function to call when the control is touched */\n  protected onTouched?: TouchedFn;\n\n  writeValue(value: string): void {\n    this.query.set(value);\n  }\n\n  registerOnChange(fn: ChangeFn<string>): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: TouchedFn): void {\n    this.onTouched = fn;\n  }\n\n  protected onQueryChange(event: Event): void {\n    const input = event.target as HTMLInputElement;\n    this.query.set(input.value);\n    this.onChange?.(input.value);\n  }\n}\n",
+      "hasVariants": false,
+      "hasSizes": true
+    }
+  },
+  {
+    "name": "select",
+    "entryPoint": "ng-primitives/select",
+    "exports": [
+      "NgpNativeSelect",
+      "injectNativeSelectState",
+      "provideNativeSelectState",
+      "NgpSelectDropdown",
+      "NgpSelectOption",
+      "NgpSelectPortal",
+      "NgpSelect",
+      "injectSelectState",
+      "provideSelectState",
+      "provideSelectConfig",
+      "injectSelectConfig"
+    ],
+    "hasSecondaryEntryPoint": true,
+    "category": "form",
+    "description": "A select is a form control that allows users to select options from a list.",
+    "accessibility": [],
+    "examples": [
+      {
+        "name": "example-0",
+        "code": "import {\n  NgpSelect,\n  NgpSelectDropdown,\n  NgpSelectPortal,\n  NgpSelectOption,\n} from 'ng-primitives/select';",
+        "description": "Import"
+      },
+      {
+        "name": "example-1",
+        "code": "<div ngpSelect>\n  <div *ngpSelectPortal ngpSelectDropdown>\n    <div ngpSelectOptionValue=\"option-1\" ngpSelectOption>One</div>\n    <div ngpSelectOptionValue=\"option-2\" ngpSelectOption>Two</div>\n    <div ngpSelectOptionValue=\"option-3\" ngpSelectOption>Three</div>\n  </div>\n</div>",
+        "description": "Usage"
+      }
+    ],
+    "reusableComponent": {
+      "code": "import { BooleanInput } from '@angular/cdk/coercion';\nimport { booleanAttribute, Component, input, model, signal } from '@angular/core';\nimport { ControlValueAccessor } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { heroChevronDown } from '@ng-icons/heroicons/outline';\nimport {\n  NgpSelect,\n  NgpSelectDropdown,\n  NgpSelectOption,\n  NgpSelectPortal,\n} from 'ng-primitives/select';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'app-select',\n  imports: [NgpSelect, NgpSelectDropdown, NgpSelectOption, NgpSelectPortal, NgIcon],\n  providers: [provideIcons({ heroChevronDown }), provideValueAccessor(Select)],\n  template: `\n    <div\n      [(ngpSelectValue)]=\"value\"\n      [ngpSelectDisabled]=\"disabled() || formDisabled()\"\n      (ngpSelectValueChange)=\"onValueChange($event)\"\n      ngpSelect\n    >\n      @if (value(); as value) {\n        <span class=\"select-value\">{{ value }}</span>\n      } @else {\n        <span class=\"select-placeholder\">{{ placeholder() }}</span>\n      }\n\n      <ng-icon name=\"heroChevronDown\" />\n\n      <div *ngpSelectPortal ngpSelectDropdown>\n        @for (option of options(); track option) {\n          <div [ngpSelectOptionValue]=\"option\" ngpSelectOption>\n            {{ option }}\n          </div>\n        } @empty {\n          <div class=\"empty-message\">No options found</div>\n        }\n      </div>\n    </div>\n  `,\n  styles: `\n    [ngpSelect] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      height: 36px;\n      width: 300px;\n      border-radius: 8px;\n      border: none;\n      background-color: var(--ngp-background);\n      box-shadow: var(--ngp-input-shadow);\n      box-sizing: border-box;\n    }\n\n    [ngpSelect][data-focus] {\n      outline: 2px solid var(--ngp-focus-ring);\n      outline-offset: 2px;\n    }\n\n    .select-value,\n    .select-placeholder {\n      display: flex;\n      align-items: center;\n      flex: 1;\n      padding: 0 16px;\n      background-color: transparent;\n      color: var(--ngp-text-primary);\n      font-family: inherit;\n      font-size: 14px;\n      padding: 0 16px;\n      height: 100%;\n    }\n\n    .select-placeholder {\n      color: var(--ngp-text-secondary);\n    }\n\n    ng-icon {\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 100%;\n      margin-inline: 8px;\n      font-size: 14px;\n    }\n\n    [ngpSelectDropdown] {\n      background-color: var(--ngp-background);\n      border: 1px solid var(--ngp-border);\n      padding: 0.25rem;\n      border-radius: 0.75rem;\n      outline: none;\n      position: absolute;\n      animation: popover-show 0.1s ease-out;\n      width: var(--ngp-select-width);\n      box-shadow: var(--ngp-shadow-lg);\n      box-sizing: border-box;\n      margin-top: 4px;\n      max-height: 240px;\n      overflow-y: auto;\n      transform-origin: var(--ngp-select-transform-origin);\n    }\n\n    [ngpSelectDropdown][data-enter] {\n      animation: select-show 0.1s ease-out;\n    }\n\n    [ngpSelectDropdown][data-exit] {\n      animation: select-hide 0.1s ease-out;\n    }\n\n    [ngpSelectOption] {\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n      padding: 0.375rem 0.75rem;\n      cursor: pointer;\n      border-radius: 0.5rem;\n      width: 100%;\n      height: 36px;\n      font-size: 14px;\n      color: var(--ngp-text-primary);\n      box-sizing: border-box;\n    }\n\n    [ngpSelectOption][data-hover] {\n      background-color: var(--ngp-background-hover);\n    }\n\n    [ngpSelectOption][data-press] {\n      background-color: var(--ngp-background-active);\n    }\n\n    [ngpSelectOption][data-active] {\n      background-color: var(--ngp-background-active);\n    }\n\n    .empty-message {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      padding: 0.5rem;\n      color: var(--ngp-text-secondary);\n      font-size: 14px;\n      font-weight: 500;\n      text-align: center;\n    }\n\n    @keyframes select-show {\n      0% {\n        opacity: 0;\n        transform: translateY(-10px) scale(0.9);\n      }\n      100% {\n        opacity: 1;\n        transform: translateY(0) scale(1);\n      }\n    }\n\n    @keyframes select-hide {\n      0% {\n        opacity: 1;\n        transform: translateY(0) scale(1);\n      }\n      100% {\n        opacity: 0;\n        transform: translateY(-10px) scale(0.9);\n      }\n    }\n  `,\n})\nexport class Select implements ControlValueAccessor {\n  /** The options for the select. */\n  readonly options = input<string[]>([]);\n\n  /** The selected value. */\n  readonly value = model<string | undefined>();\n\n  /** The placeholder for the input. */\n  readonly placeholder = input<string>('');\n\n  /** The disabled state of the select. */\n  readonly disabled = input<boolean, BooleanInput>(false, {\n    transform: booleanAttribute,\n  });\n\n  /** Store the form disabled state */\n  protected readonly formDisabled = signal(false);\n\n  /** The on change callback */\n  private onChange?: ChangeFn<string>;\n\n  /** The on touch callback */\n  protected onTouched?: TouchedFn;\n\n  writeValue(value: string | undefined): void {\n    this.value.set(value);\n  }\n\n  registerOnChange(fn: ChangeFn<string | undefined>): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: TouchedFn): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.formDisabled.set(isDisabled);\n  }\n\n  protected onValueChange(value: string): void {\n    this.onChange?.(value);\n  }\n}\n",
+      "hasVariants": false,
+      "hasSizes": true
+    }
+  },
+  {
+    "name": "separator",
+    "entryPoint": "ng-primitives/separator",
+    "exports": [
+      "NgpSeparatorConfig",
+      "provideSeparatorConfig",
+      "NgpSeparator"
+    ],
+    "hasSecondaryEntryPoint": true,
+    "category": "layout",
+    "description": "The separator primitive allow you to semantically separate content either horizontally or vertically.",
+    "accessibility": [
+      "ARIA Separator"
+    ],
+    "examples": [
+      {
+        "name": "example-0",
+        "code": "<div ngpSeparator></div>",
+        "description": "Usage"
+      },
+      {
+        "name": "example-1",
+        "code": "import { provideSeparatorConfig } from 'ng-primitives/tabs';\n\nbootstrapApplication(AppComponent, {\n  providers: [\n    provideSeparatorConfig({\n      orientation: 'horizontal',\n    }),\n  ],\n});",
+        "description": "Global Configuration"
+      }
+    ],
+    "reusableComponent": {
+      "code": "import { Component } from '@angular/core';\nimport { NgpSeparator } from 'ng-primitives/separator';\n\n@Component({\n  selector: '[app-separator]',\n  hostDirectives: [{ directive: NgpSeparator, inputs: ['ngpSeparatorOrientation:orientation'] }],\n  template: ``,\n  styles: `\n    :host {\n      background-color: var(--ngp-border);\n      height: 1px;\n    }\n  `,\n})\nexport class Separator {}\n",
+      "hasVariants": false,
+      "hasSizes": false
+    }
+  },
+  {
+    "name": "slider",
+    "entryPoint": "ng-primitives/slider",
+    "exports": [
+      "NgpSliderRange",
+      "injectSliderRangeState",
+      "ngpSliderRange",
+      "NgpSliderRangeProps",
+      "NgpSliderRangeState",
+      "provideSliderRangeState",
+      "NgpSliderThumb",
+      "injectSliderThumbState",
+      "ngpSliderThumb",
+      "NgpSliderThumbProps",
+      "NgpSliderThumbState",
+      "provideSliderThumbState",
+      "NgpSliderTrack",
+      "injectSliderTrackState",
+      "ngpSliderTrack",
+      "NgpSliderTrackProps",
+      "NgpSliderTrackState",
+      "provideSliderTrackState",
+      "NgpSlider",
+      "injectSliderState",
+      "ngpSlider",
+      "NgpSliderProps",
+      "NgpSliderState",
+      "provideSliderState",
+      "NgpRangeSliderRange",
+      "NgpRangeSliderThumb",
+      "NgpRangeSliderTrack",
+      "NgpRangeSlider",
+      "injectRangeSliderState",
+      "provideRangeSliderState"
+    ],
+    "hasSecondaryEntryPoint": true,
+    "category": "form",
+    "description": "Select a value within a range.",
+    "accessibility": [
+      "ARIA design"
+    ],
+    "examples": [
+      {
+        "name": "example-0",
+        "code": "<div ngpSlider>\n  <div ngpSliderTrack>\n    <div ngpSliderRange></div>\n  </div>\n  <div ngpSliderThumb></div>\n</div>",
+        "description": "Usage"
+      }
+    ],
+    "reusableComponent": {
+      "code": "import { Component, input } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { ControlValueAccessor } from '@angular/forms';\nimport {\n  injectSliderState,\n  NgpSlider,\n  NgpSliderRange,\n  NgpSliderThumb,\n  NgpSliderTrack,\n} from 'ng-primitives/slider';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'app-slider',\n  hostDirectives: [\n    {\n      directive: NgpSlider,\n      inputs: [\n        'ngpSliderValue:value',\n        'ngpSliderMin:min',\n        'ngpSliderMax:max',\n        'ngpSliderDisabled:disabled',\n      ],\n      outputs: ['ngpSliderValueChange:valueChange'],\n    },\n  ],\n  imports: [NgpSliderTrack, NgpSliderRange, NgpSliderThumb],\n  providers: [provideValueAccessor(Slider)],\n  template: `\n    <div ngpSliderTrack>\n      <div ngpSliderRange></div>\n    </div>\n    <div [ariaLabel]=\"ariaLabel()\" ngpSliderThumb></div>\n  `,\n  styles: `\n    :host {\n      display: flex;\n      position: relative;\n      width: 200px;\n      height: 20px;\n      touch-action: none;\n      user-select: none;\n      align-items: center;\n    }\n\n    [ngpSliderTrack] {\n      position: relative;\n      height: 5px;\n      width: 100%;\n      border-radius: 999px;\n      background-color: var(--ngp-background-secondary);\n    }\n\n    [ngpSliderRange] {\n      position: absolute;\n      height: 100%;\n      border-radius: 999px;\n      background-color: var(--ngp-background-inverse);\n    }\n\n    [ngpSliderThumb] {\n      position: absolute;\n      display: block;\n      height: 20px;\n      width: 20px;\n      border-radius: 10px;\n      background-color: white;\n      box-shadow: var(--ngp-button-shadow);\n      outline: none;\n      transform: translateX(-50%);\n    }\n\n    [ngpSliderThumb][data-focus-visible] {\n      outline: 2px solid var(--ngp-focus-ring);\n      outline-offset: 0;\n    }\n  `,\n  host: {\n    '(focusout)': 'onTouched?.()',\n  },\n})\nexport class Slider implements ControlValueAccessor {\n  /** Access the slider state */\n  private readonly state = injectSliderState();\n\n  /** Forward the aria-label to the thumb */\n  readonly ariaLabel = input<string | null>(null, {\n    alias: 'aria-label',\n  });\n\n  /**\n   * The onChange callback function.\n   */\n  private onChange?: ChangeFn<number>;\n\n  /**\n   * The onTouched callback function.\n   */\n  protected onTouched?: TouchedFn;\n\n  constructor() {\n    // Whenever the user interacts with the slider, call the onChange function with the new value.\n    this.state()\n      .valueChange.pipe(takeUntilDestroyed())\n      .subscribe(value => this.onChange?.(value));\n  }\n\n  writeValue(value: number): void {\n    this.state().setValue(value);\n  }\n\n  registerOnChange(fn: ChangeFn<number>): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: TouchedFn): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.state().setDisabled(isDisabled);\n  }\n}\n",
+      "hasVariants": false,
+      "hasSizes": false
+    }
+  },
+  {
+    "name": "state",
+    "entryPoint": "ng-primitives/state",
+    "exports": [],
+    "hasSecondaryEntryPoint": true,
+    "category": "utility",
+    "description": "state primitive component",
+    "accessibility": [],
+    "examples": []
+  },
+  {
+    "name": "switch",
+    "entryPoint": "ng-primitives/switch",
+    "exports": [
+      "NgpSwitchThumb",
+      "injectSwitchThumbState",
+      "ngpSwitchThumb",
+      "NgpSwitchThumbProps",
+      "NgpSwitchThumbState",
+      "provideSwitchThumbState",
+      "NgpSwitch",
+      "injectSwitchState",
+      "ngpSwitch",
+      "NgpSwitchProps",
+      "NgpSwitchState",
+      "provideSwitchState"
+    ],
+    "hasSecondaryEntryPoint": true,
+    "category": "form",
+    "description": "Perform state toggling.",
+    "accessibility": [
+      "ARIA switch"
+    ],
+    "examples": [
+      {
+        "name": "example-0",
+        "code": "<button ngpSwitch [(ngpSwitchChecked)]=\"checked\">\n  <span ngpSwitchThumb></span>\n</button>",
+        "description": "Usage"
+      }
+    ],
+    "reusableComponent": {
+      "code": "import { Component } from '@angular/core';\nimport { ControlValueAccessor } from '@angular/forms';\nimport { injectSwitchState, NgpSwitch, NgpSwitchThumb } from 'ng-primitives/switch';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'app-switch',\n  hostDirectives: [\n    {\n      directive: NgpSwitch,\n      inputs: ['ngpSwitchChecked:checked', 'ngpSwitchDisabled:disabled'],\n      outputs: ['ngpSwitchCheckedChange:checkedChange'],\n    },\n  ],\n  imports: [NgpSwitchThumb],\n  template: `\n    <span ngpSwitchThumb></span>\n  `,\n  styles: `\n    :host {\n      display: inline-flex;\n      align-items: center;\n      position: relative;\n      width: 2.5rem;\n      height: 1.5rem;\n      border-radius: 999px;\n      background-color: var(--ngp-background-secondary);\n      border: 1px solid var(--ngp-border);\n      padding: 0;\n      outline: none;\n      transition-property:\n        color, background-color, border-color, text-decoration-color, fill, stroke;\n      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n      transition-duration: 150ms;\n      box-sizing: border-box;\n    }\n\n    :host[data-focus-visible] {\n      outline: 2px solid var(--ngp-focus-ring);\n    }\n\n    :host[data-checked] {\n      background-color: var(--ngp-background-blue);\n      border-color: var(--ngp-border-blue);\n    }\n\n    [ngpSwitchThumb] {\n      display: block;\n      height: 1.25rem;\n      width: 1.25rem;\n      border-radius: 999px;\n      background-color: white;\n      box-shadow: var(--ngp-button-shadow);\n      outline: none;\n      transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);\n      transform: translateX(1px);\n      box-sizing: border-box;\n    }\n\n    [ngpSwitchThumb][data-checked] {\n      transform: translateX(17px);\n    }\n  `,\n  providers: [provideValueAccessor(Switch)],\n  host: {\n    '(focusout)': 'onTouched?.()',\n  },\n})\nexport class Switch implements ControlValueAccessor {\n  /** Access the switch state. */\n  private readonly switch = injectSwitchState();\n\n  /** The on change callback */\n  private onChange?: ChangeFn<boolean>;\n\n  /** The on touched callback */\n  protected onTouched?: TouchedFn;\n\n  constructor() {\n    // Any time the switch changes, update the form value.\n    this.switch().checkedChange.subscribe(value => this.onChange?.(value));\n  }\n\n  /** Write a new value to the switch. */\n  writeValue(value: boolean): void {\n    this.switch().setChecked(value);\n  }\n\n  /** Register a callback function to be called when the value changes. */\n  registerOnChange(fn: ChangeFn<boolean>): void {\n    this.onChange = fn;\n  }\n\n  /** Register a callback function to be called when the switch is touched. */\n  registerOnTouched(fn: TouchedFn): void {\n    this.onTouched = fn;\n  }\n\n  /** Set the disabled state of the switch. */\n  setDisabledState(isDisabled: boolean): void {\n    this.switch().setDisabled(isDisabled);\n  }\n}\n",
+      "hasVariants": false,
+      "hasSizes": false
+    }
+  },
+  {
+    "name": "tabs",
+    "entryPoint": "ng-primitives/tabs",
+    "exports": [
+      "NgpTabsConfig",
+      "provideTabsConfig",
+      "NgpTabButton",
+      "injectTabButtonState",
+      "ngpTabButton",
+      "NgpTabButtonProps",
+      "NgpTabButtonState",
+      "NgpTabButtonStateToken",
+      "provideTabButtonState",
+      "NgpTabList",
+      "injectTabListState",
+      "ngpTabList",
+      "NgpTabListProps",
+      "NgpTabListState",
+      "NgpTabListStateToken",
+      "provideTabListState",
+      "NgpTabPanel",
+      "injectTabPanelState",
+      "ngpTabPanel",
+      "NgpTabPanelProps",
+      "NgpTabPanelState",
+      "NgpTabPanelStateToken",
+      "provideTabPanelState",
+      "NgpTabset",
+      "injectTabsetState",
+      "ngpTabset",
+      "NgpTabsetProps",
+      "NgpTabsetState",
+      "NgpTabsetStateToken",
+      "provideTabsetState"
+    ],
+    "hasSecondaryEntryPoint": true,
+    "category": "navigation",
+    "description": "Dynamically show and hide content based on an active tab.",
+    "accessibility": [
+      "ARIA design"
+    ],
+    "examples": [
+      {
+        "name": "example-0",
+        "code": "<div ngpTabset>\n  <div ngpTabList>\n    <button ngpTabButton ngpTabButtonValue=\"tab1\">Tab 1</button>\n    <button ngpTabButton ngpTabButtonValue=\"tab2\">Tab 2</button>\n    <button ngpTabButton ngpTabButtonValue=\"tab3\">Tab 3</button>\n  </div>\n  <div ngpTabPanel ngpTabPanelValue=\"tab1\">Tab 1 content</div>\n  <div ngpTabPanel ngpTabPanelValue=\"tab2\">Tab 2 content</div>\n  <div ngpTabPanel ngpTabPanelValue=\"tab3\">Tab 3 content</div>\n</div>",
+        "description": "Usage"
+      },
+      {
+        "name": "example-1",
+        "code": "import { provideTabsConfig } from 'ng-primitives/tabs';\n\nbootstrapApplication(AppComponent, {\n  providers: [\n    provideTabsConfig({\n      orientation: 'horizontal',\n      activateOnFocus: false,\n      wrap: false,\n    }),\n  ],\n});",
+        "description": "Global Configuration"
+      }
+    ],
+    "reusableComponent": {
+      "code": "import { Component, input, TemplateRef, viewChild } from '@angular/core';\n\n@Component({\n  selector: 'app-tab',\n  template: `\n    <ng-template #content>\n      <ng-content />\n    </ng-template>\n  `,\n})\nexport class Tab {\n  /**\n   * The value of the tab.\n   */\n  readonly value = input<string>();\n\n  /**\n   * The label of the tab.\n   */\n  readonly label = input<string>();\n\n  /**\n   * The content of the tab.\n   */\n  readonly content = viewChild.required<TemplateRef<void>>('content');\n}\n",
+      "hasVariants": false,
+      "hasSizes": false
+    }
+  },
+  {
+    "name": "textarea",
+    "entryPoint": "ng-primitives/textarea",
+    "exports": [
+      "NgpTextarea",
+      "injectTextareaState",
+      "ngpTextarea",
+      "NgpTextareaProps",
+      "NgpTextareaState",
+      "provideTextareaState"
+    ],
+    "hasSecondaryEntryPoint": true,
+    "category": "form",
+    "description": "The textarea primitive can be used to enhance the accessibility of a textarea element and provide consistent interaction handling for hover, focus and press states.",
+    "accessibility": [],
+    "examples": [
+      {
+        "name": "example-0",
+        "code": "<textarea ngpTextarea></textarea>",
+        "description": "Usage"
+      }
+    ],
+    "reusableComponent": {
+      "code": "import { Component } from '@angular/core';\nimport { NgpTextarea } from 'ng-primitives/textarea';\n\n@Component({\n  selector: 'textarea[app-textarea]',\n  hostDirectives: [{ directive: NgpTextarea, inputs: ['disabled'] }],\n  template: `\n    <ng-content />\n  `,\n  styles: `\n    :host {\n      height: 72px;\n      width: 90%;\n      border-radius: 8px;\n      padding: 8px 12px;\n      border: none;\n      box-shadow: var(--ngp-input-shadow);\n      outline: none;\n      font-family: inherit;\n    }\n\n    :host[data-focus] {\n      outline: 2px solid var(--ngp-focus-ring);\n      outline-offset: 0;\n    }\n\n    :host::placeholder {\n      color: var(--ngp-text-placeholder);\n    }\n  `,\n})\nexport class Textarea {}\n",
+      "hasVariants": false,
+      "hasSizes": false
+    }
+  },
+  {
+    "name": "toast",
+    "entryPoint": "ng-primitives/toast",
+    "exports": [
+      "NgpToastConfig",
+      "provideToastConfig",
+      "NgpToast",
+      "injectToastContext",
+      "NgpToastManager"
+    ],
+    "hasSecondaryEntryPoint": true,
+    "category": "feedback",
+    "description": "A toast is a non-modal, unobtrusive window element used to display brief, auto-expiring messages to the user.",
+    "accessibility": [
+      "aria live"
+    ],
+    "examples": [
+      {
+        "name": "example-0",
+        "code": "<ng-template #toast>\n  <div ngpToast>...</div>\n</ng-template>",
+        "description": "Usage"
+      },
+      {
+        "name": "example-1",
+        "code": "import { NgpToastManager } from 'ng-primitives/toast';\n\nexport class MyComponent {\n  private readonly toastManager = inject(NgpToastManager);\n\n  showToast(): void {\n    this.toastManager.show(toastTemplate);\n    // or\n    this.toastManager.show(MyToastComponent);\n  }\n}",
+        "description": "Usage"
+      },
+      {
+        "name": "example-2",
+        "code": "import { provideToastConfig } from 'ng-primitives/toast';\n\nbootstrapApplication(AppComponent, {\n  providers: [\n    provideToastConfig({\n      placement: 'top-end',\n      duration: 5000,\n      offsetTop: 16,\n      offsetBottom: 16,\n      offsetLeft: 16,\n      offsetRight: 16,\n      dismissible: true,\n      maxToasts: 3,\n      zIndex: 9999999,\n      swipeDirections: ['left', 'right'],\n      ariaLive: 'assertive',\n      gap: 16,\n    }),\n  ],\n});",
+        "description": "Global Configuration"
+      }
+    ],
+    "reusableComponent": {
+      "code": "import { Component, inject } from '@angular/core';\nimport { NgpButton } from 'ng-primitives/button';\nimport { injectToastContext, NgpToast, NgpToastManager } from 'ng-primitives/toast';\n\n@Component({\n  selector: 'app-toast',\n  imports: [NgpButton],\n  hostDirectives: [NgpToast],\n  template: `\n    <p class=\"toast-title\">{{ context.header }}</p>\n    <p class=\"toast-description\">{{ context.description }}</p>\n    <button class=\"toast-dismiss\" (click)=\"dismiss()\" ngpButton>Dismiss</button>\n  `,\n  styles: `\n    :host {\n      position: absolute;\n      touch-action: none;\n      transition:\n        transform 0.4s,\n        opacity 0.4s,\n        height 0.4s,\n        box-shadow 0.2s;\n      box-sizing: border-box;\n      align-items: center;\n      gap: 6px;\n      display: inline-grid;\n      background: var(--ngp-background);\n      box-shadow: var(--ngp-shadow);\n      border: 1px solid var(--ngp-border);\n      padding: 12px 16px;\n      opacity: 0;\n      transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);\n      border-radius: 8px;\n      z-index: var(--ngp-toast-z-index);\n      grid-template-columns: 1fr auto;\n      grid-template-rows: min-content min-content;\n      column-gap: 12px;\n      align-items: center;\n      width: var(--ngp-toast-width);\n      height: fit-content;\n      transform: var(--y);\n    }\n\n    .toast-title {\n      color: var(--ngp-text-primary);\n      font-size: 0.75rem;\n      font-weight: 600;\n      margin: 0;\n      grid-column: 1 / 2;\n      grid-row: 1;\n      line-height: 16px;\n      user-select: none;\n    }\n\n    .toast-description {\n      font-size: 0.75rem;\n      margin: 0;\n      color: var(--ngp-text-secondary);\n      grid-column: 1 / 2;\n      grid-row: 2;\n      line-height: 16px;\n      user-select: none;\n    }\n\n    .toast-dismiss {\n      background: var(--ngp-background-inverse);\n      color: var(--ngp-text-inverse);\n      border: none;\n      border-radius: 8px;\n      padding: 4px 8px;\n      font-weight: 600;\n      font-size: 12px;\n      cursor: pointer;\n      grid-column: 2 / 3;\n      grid-row: 1 / 3;\n      max-height: 27px;\n    }\n\n    :host[data-position-x='end'] {\n      right: 0;\n    }\n\n    :host[data-position-x='start'] {\n      left: 0;\n    }\n\n    :host[data-position-y='top'] {\n      top: 0;\n      --lift: 1;\n      --lift-amount: calc(var(--lift) * var(--ngp-toast-gap));\n      --y: translateY(-100%);\n    }\n\n    :host[data-position-y='bottom'] {\n      bottom: 0;\n      --lift: -1;\n      --lift-amount: calc(var(--lift) * var(--ngp-toast-gap));\n      --y: translateY(100%);\n    }\n\n    :host[data-enter] {\n      opacity: 1;\n      --y: translateY(0);\n    }\n\n    :host[data-exit] {\n      opacity: 0;\n      --y: translateY(calc(calc(var(--lift) * var(--ngp-toast-gap)) * -1));\n    }\n\n    :host[data-visible='false'] {\n      opacity: 0;\n      pointer-events: none;\n    }\n\n    :host[data-expanded='true']::after {\n      content: '';\n      position: absolute;\n      left: 0;\n      height: calc(var(--ngp-toast-gap) + 1px);\n      bottom: 100%;\n      width: 100%;\n    }\n\n    :host[data-expanded='false'][data-front='false'] {\n      --scale: var(--ngp-toasts-before) * 0.05 + 1;\n      --y: translateY(calc(var(--lift-amount) * var(--ngp-toasts-before)))\n        scale(calc(-1 * var(--scale)));\n      height: var(--ngp-toast-front-height);\n    }\n\n    :host[data-expanded='true'] {\n      --y: translateY(calc(var(--lift) * var(--ngp-toast-offset)));\n      height: var(--ngp-toast-height);\n    }\n\n    :host[data-swiping='true'] {\n      transform: var(--y) translateY(var(--ngp-toast-swipe-amount-y, 0))\n        translateX(var(--ngp-toast-swipe-amount-x, 0));\n      transition: none;\n    }\n\n    :host[data-swiping='true'][data-swipe-direction='left'] {\n      /* Fade out from -45px to -100px swipe */\n      opacity: calc(1 - clamp(0, ((-1 * var(--ngp-toast-swipe-x, 0px)) - 45) / 55, 1));\n    }\n\n    :host[data-swiping='true'][data-swipe-direction='right'] {\n      /* Fade out from 45px to 100px swipe */\n      opacity: calc(1 - clamp(0, (var(--ngp-toast-swipe-x, 0px) - 45) / 55, 1));\n    }\n\n    :host[data-swiping='true'][data-swipe-direction='top'] {\n      /* Fade out from -45px to -100px swipe */\n      opacity: calc(1 - clamp(0, ((-1 * var(--ngp-toast-swipe-y, 0px)) - 45) / 55, 1));\n    }\n\n    :host[data-swiping='true'][data-swipe-direction='bottom'] {\n      /* Fade out from 45px to 100px swipe */\n      opacity: calc(1 - clamp(0, (var(--ngp-toast-swipe-y, 0px) - 45) / 55, 1));\n    }\n  `,\n})\nexport class Toast {\n  private readonly toastManager = inject(NgpToastManager);\n  private readonly toast = inject(NgpToast);\n  protected readonly context = injectToastContext<ToastContext>();\n\n  dismiss(): void {\n    this.toastManager.dismiss(this.toast);\n  }\n}\n\ninterface ToastContext {\n  header: string;\n  description: string;\n}\n",
+      "hasVariants": false,
+      "hasSizes": true
+    }
+  },
+  {
+    "name": "toggle",
+    "entryPoint": "ng-primitives/toggle",
+    "exports": [
+      "NgpToggle",
+      "injectToggleState",
+      "ngpToggle",
+      "NgpToggleProps",
+      "NgpToggleState",
+      "provideToggleState"
+    ],
+    "hasSecondaryEntryPoint": true,
+    "category": "form",
+    "description": "Toggle a button on and off.",
+    "accessibility": [],
+    "examples": [
+      {
+        "name": "example-0",
+        "code": "<button ngpToggle [(ngpToggleSelected)]=\"selected\">Toggle</button>",
+        "description": "Usage"
+      }
+    ],
+    "reusableComponent": {
+      "code": "import { Component } from '@angular/core';\nimport { ControlValueAccessor } from '@angular/forms';\nimport { NgpButton } from 'ng-primitives/button';\nimport { injectToggleState, NgpToggle } from 'ng-primitives/toggle';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'button[app-toggle]',\n  hostDirectives: [\n    {\n      directive: NgpToggle,\n      inputs: ['ngpToggleSelected:selected', 'ngpToggleDisabled:disabled'],\n      outputs: ['ngpToggleSelectedChange:selectedChange'],\n    },\n    { directive: NgpButton, inputs: ['disabled'] },\n  ],\n  template: `\n    <ng-content />\n  `,\n  styles: `\n    :host {\n      padding-left: 1rem;\n      padding-right: 1rem;\n      border-radius: 0.5rem;\n      color: var(--ngp-text-primary);\n      border: none;\n      outline: none;\n      height: 2.5rem;\n      font-weight: 500;\n      background-color: var(--ngp-background);\n      transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1);\n      box-shadow: var(--ngp-button-shadow);\n    }\n\n    :host[data-hover] {\n      background-color: var(--ngp-background-hover);\n    }\n\n    :host[data-focus-visible] {\n      outline: 2px solid var(--ngp-focus-ring);\n      outline-offset: 2px;\n    }\n\n    :host[data-press] {\n      background-color: var(--ngp-background-active);\n    }\n\n    :host[data-selected] {\n      background-color: var(--ngp-background-inverse);\n      color: var(--ngp-text-inverse);\n    }\n  `,\n  providers: [provideValueAccessor(Toggle)],\n  host: {\n    '(focusout)': 'onTouched?.()',\n  },\n})\nexport class Toggle implements ControlValueAccessor {\n  /** Access the toggle state. */\n  private readonly toggle = injectToggleState();\n\n  /** The on change callback */\n  private onChange?: ChangeFn<boolean>;\n\n  /** The on touched callback */\n  protected onTouched?: TouchedFn;\n\n  constructor() {\n    // Any time the toggle changes, update the form value.\n    this.toggle().selectedChange.subscribe(value => this.onChange?.(value));\n  }\n\n  /** Write a new value to the toggle. */\n  writeValue(value: boolean): void {\n    this.toggle().setSelected(value);\n  }\n\n  /** Register a callback function to be called when the value changes. */\n  registerOnChange(fn: ChangeFn<boolean>): void {\n    this.onChange = fn;\n  }\n\n  /** Register a callback function to be called when the toggle is touched. */\n  registerOnTouched(fn: TouchedFn): void {\n    this.onTouched = fn;\n  }\n\n  /** Set the disabled state of the toggle. */\n  setDisabledState(isDisabled: boolean): void {\n    this.toggle().setDisabled(isDisabled);\n  }\n}\n",
+      "hasVariants": false,
+      "hasSizes": false
+    }
+  },
+  {
+    "name": "toggle-group",
+    "entryPoint": "ng-primitives/toggle-group",
+    "exports": [
+      "NgpToggleGroupConfig",
+      "provideToggleGroupConfig",
+      "NgpToggleGroupItem",
+      "injectToggleGroupItemState",
+      "provideToggleGroupItemState",
+      "NgpToggleGroup",
+      "injectToggleGroupState",
+      "provideToggleGroupState"
+    ],
+    "hasSecondaryEntryPoint": true,
+    "category": "form",
+    "description": "The toggle group primitive is a collection of toggle buttons that can be used to select one or more options.",
+    "accessibility": [],
+    "examples": [
+      {
+        "name": "example-0",
+        "code": "<div ngpToggleGroup>\n  <button ngpToggleGroupItem ngpToggleGroupItemValue=\"1\">Option 1</button>\n  <button ngpToggleGroupItem ngpToggleGroupItemValue=\"2\">Option 2</button>\n  <button ngpToggleGroupItem ngpToggleGroupItemValue=\"3\">Option 3</button>\n</div>",
+        "description": "Usage"
+      },
+      {
+        "name": "example-1",
+        "code": "import { provideToggleGroupConfig } from 'ng-primitives/toggle-group';\n\nbootstrapApplication(AppComponent, {\n  providers: [\n    provideToggleGroupConfig({\n      orientation: 'vertical',\n      type: 'multiple',\n    }),\n  ],\n});",
+        "description": "Global Configuration"
+      }
+    ],
+    "reusableComponent": {
+      "code": "import { Component } from '@angular/core';\nimport { NgpButton } from 'ng-primitives/button';\nimport { NgpToggleGroupItem } from 'ng-primitives/toggle-group';\n\n@Component({\n  selector: 'button[app-toggle-group-item]',\n  hostDirectives: [\n    {\n      directive: NgpToggleGroupItem,\n      inputs: ['ngpToggleGroupItemValue:value', 'ngpToggleGroupItemDisabled:disabled'],\n    },\n    {\n      directive: NgpButton,\n      inputs: ['disabled'],\n    },\n  ],\n  template: `\n    <ng-content />\n  `,\n  styles: `\n    :host {\n      display: flex;\n      width: 2rem;\n      height: 2rem;\n      align-items: center;\n      justify-content: center;\n      border-radius: 0.25rem;\n      border: 1px solid transparent;\n      background: transparent;\n      outline: none;\n      transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);\n      box-sizing: border-box;\n      color: var(--ngp-text-primary);\n      font-size: 1.125rem;\n    }\n\n    :host[data-hover] {\n      background-color: var(--ngp-background-hover);\n      border-color: var(--ngp-border);\n    }\n\n    :host[data-focus-visible] {\n      outline: 2px solid var(--ngp-focus-ring);\n    }\n\n    :host[data-press] {\n      background-color: var(--ngp-background-active);\n    }\n\n    :host[data-selected] {\n      background-color: var(--ngp-background-inverse);\n      color: var(--ngp-text-inverse);\n      border-color: transparent;\n    }\n  `,\n})\nexport class ToggleGroupItem {}\n",
+      "hasVariants": false,
+      "hasSizes": true
+    }
+  },
+  {
+    "name": "toolbar",
+    "entryPoint": "ng-primitives/toolbar",
+    "exports": [
+      "NgpToolbar",
+      "provideToolbarState",
+      "injectToolbarState"
+    ],
+    "hasSecondaryEntryPoint": true,
+    "category": "navigation",
+    "description": "The Toolbar primitive is a container for grouping related controls.",
+    "accessibility": [
+      "ARIA Toolbar"
+    ],
+    "examples": [
+      {
+        "name": "example-0",
+        "code": "<div ngpToolbar>\n  <!-- Toolbar content -->\n</div>",
+        "description": "Usage"
+      }
+    ],
+    "reusableComponent": {
+      "code": "import { Component } from '@angular/core';\nimport { NgpButton } from 'ng-primitives/button';\nimport { NgpRovingFocusItem } from 'ng-primitives/roving-focus';\n\n@Component({\n  selector: 'button[app-toolbar-button]',\n  hostDirectives: [\n    { directive: NgpButton, inputs: ['disabled'] },\n    {\n      directive: NgpRovingFocusItem,\n      inputs: ['ngpRovingFocusItemDisabled:disabled'],\n    },\n  ],\n  host: {\n    type: 'button',\n  },\n  template: `\n    <ng-content />\n  `,\n  styles: `\n    :host {\n      display: flex;\n      width: 2rem;\n      height: 2rem;\n      align-items: center;\n      justify-content: center;\n      border-radius: 0.25rem;\n      border: 1px solid transparent;\n      background: transparent;\n      outline: none;\n      transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);\n      box-sizing: border-box;\n      color: var(--ngp-text-primary);\n      cursor: pointer;\n    }\n\n    :host[data-hover] {\n      background-color: var(--ngp-background-hover);\n      border-color: var(--ngp-border);\n    }\n\n    :host[data-focus-visible] {\n      outline: 2px solid var(--ngp-focus-ring);\n    }\n\n    :host[data-press] {\n      background-color: var(--ngp-background-active);\n    }\n\n    :host[data-selected] {\n      background-color: var(--ngp-background-inverse);\n      color: var(--ngp-text-inverse);\n    }\n  `,\n})\nexport class ToolbarButton {}\n",
+      "hasVariants": false,
+      "hasSizes": false
+    }
+  },
+  {
+    "name": "tooltip",
+    "entryPoint": "ng-primitives/tooltip",
+    "exports": [
+      "injectOverlayContext as injectTooltipContext",
+      "NgpTooltipConfig",
+      "provideTooltipConfig",
+      "NgpTooltipArrow",
+      "NgpTooltipTrigger",
+      "type NgpTooltipPlacement",
+      "injectTooltipTriggerState",
+      "provideTooltipTriggerState",
+      "NgpTooltip"
+    ],
+    "hasSecondaryEntryPoint": true,
+    "category": "feedback",
+    "description": "Display additional information on hover.",
+    "accessibility": [],
+    "examples": [
+      {
+        "name": "example-0",
+        "code": "<button [ngpTooltipTrigger]=\"tooltip\" ngpButton>Hover me</button>\n\n<ng-template #tooltip>\n  <div ngpTooltip>Tooltip content</div>\n</ng-template>",
+        "description": "Usage"
+      },
+      {
+        "name": "example-1",
+        "code": "<!-- Simple number offset -->\n<button [ngpTooltipTrigger]=\"tooltip\" ngpTooltipTriggerOffset=\"12\">Tooltip with 12px offset</button>\n\n<!-- Object offset for precise control -->\n<button\n  [ngpTooltipTrigger]=\"tooltip\"\n  [ngpTooltipTriggerOffset]=\"{mainAxis: 8, crossAxis: 4, alignmentAxis: 2}\"\n>\n  Tooltip with custom offset\n</button>",
+        "description": "Custom Offset"
+      },
+      {
+        "name": "example-2",
+        "code": "<!-- Simple usage - uses text content automatically -->\n<div class=\"truncated-text\" ngpTooltipTrigger>\n  This text might be truncated with ellipsis and show the full content in the tooltip\n</div>\n\n<!-- Passing content directly takes precedence -->\n<button [ngpTooltipTrigger]=\"myToolip\">This won't show a tooltip unless content is provided</button>",
+        "description": "Using Text Content as Tooltip"
+      },
+      {
+        "name": "example-3",
+        "code": "<div\n  class=\"truncated-text\"\n  appTooltipTrigger=\"This tooltip only shows when text overflows\"\n  ngpTooltipTriggerShowOnOverflow\n>\n  This text might be truncated\n</div>",
+        "description": "Conditional Tooltips"
+      },
+      {
+        "name": "example-4",
+        "code": "import { provideTooltipConfig } from 'ng-primitives/tooltip';\n\nbootstrapApplication(AppComponent, {\n  providers: [\n    provideTooltipConfig({\n      offset: 4,\n      placement: 'top',\n      showDelay: 0,\n      hideDelay: 500,\n      flip: true,\n      container: document.body,\n      showOnOverflow: false,\n      useTextContent: true,\n    }),\n  ],\n});",
+        "description": "Global Configuration"
+      },
+      {
+        "name": "example-5",
+        "code": "offset: {\n  mainAxis: 8,     // Distance between tooltip and trigger element\n  crossAxis: 4,    // Skidding along the alignment axis\n  alignmentAxis: 2 // Same as crossAxis but for aligned placements\n}",
+        "description": "NgpTooltipConfig"
+      }
+    ],
+    "reusableComponent": {
+      "code": "import { Directive, input } from '@angular/core';\nimport { injectTooltipTriggerState, NgpTooltipTrigger } from 'ng-primitives/tooltip';\nimport { Tooltip } from './tooltip';\n\n@Directive({\n  selector: '[appTooltipTrigger]',\n  hostDirectives: [\n    {\n      directive: NgpTooltipTrigger,\n      inputs: [\n        'ngpTooltipTriggerPlacement:appTooltipTriggerPlacement',\n        'ngpTooltipTriggerDisabled:appTooltipTriggerDisabled',\n        'ngpTooltipTriggerOffset:appTooltipTriggerOffset',\n        'ngpTooltipTriggerShowDelay:appTooltipTriggerShowDelay',\n        'ngpTooltipTriggerHideDelay:appTooltipTriggerHideDelay',\n        'ngpTooltipTriggerFlip:appTooltipTriggerFlip',\n        'ngpTooltipTriggerContainer:appTooltipTriggerContainer',\n        'ngpTooltipTriggerShowOnOverflow:appTooltipTriggerShowOnOverflow',\n        'ngpTooltipTriggerContext:appTooltipTrigger',\n      ],\n    },\n  ],\n})\nexport class TooltipTrigger {\n  /** Access the tooltip trigger */\n  private readonly tooltipTrigger = injectTooltipTriggerState();\n\n  /** Define the content of the tooltip */\n  readonly content = input.required<string>({\n    alias: 'appTooltipTrigger',\n  });\n\n  constructor() {\n    this.tooltipTrigger().tooltip.set(Tooltip);\n  }\n}\n",
+      "hasVariants": false,
+      "hasSizes": false
+    }
+  }
+]