docs(registry): add collapsible

docs/src/config/docs.ts

@@ -118,6 +118,11 @@ export const docsConfig: TDocsConfig = {
           href: '/docs/components/card',
           items: [],
         },
+        {
+          title: 'Collapsible',
+          href: '/docs/components/collapsible',
+          items: [],
+        },
         {
           title: 'Input',
           href: '/docs/components/input',

docs/src/content/docs/components/collapsible.mdx

@@ -0,0 +1,70 @@
+---
+title: Collapsible
+description: An interactive component which expands/collapses a panel.
+links:
+  doc: https://www.radix-ng.com/primitives/components/collapsible
+  api: https://www.radix-ng.com/primitives/components/collapsible#api-reference
+---
+
+<ComponentPreview
+  name="collapsible-demo"
+  description="A collapsible component."
+/>
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn-ng@latest add collapsible
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ng/primitives
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="collapsible" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```ts
+import {
+  UbCollapsible,
+  UbCollapsibleContent,
+  UbCollapsibleTrigger
+} from '@/components/ui/collapsible'
+```
+
+```html
+<div ubCollapsible>
+  <button ubCollapsibleTrigger>Can I use this in my project?</button>
+  <div ubCollapsibleContent>
+    Yes. Free to use for personal and commercial projects. No attribution
+    required.
+  </div>
+</div>
+```

docs/src/registry/default/example/collapsible-demo.ts

@@ -0,0 +1,44 @@
+import { UbButtonDirective } from '@/registry/new-york/ui/button'
+
+import { UbCollapsible, UbCollapsibleContent, UbCollapsibleTrigger } from '@/registry/new-york/ui/collapsible'
+
+import { Component } from '@angular/core'
+
+import { NgIconComponent, provideIcons } from '@ng-icons/core'
+import { radixCaretSort } from '@ng-icons/radix-icons'
+
+@Component({
+  standalone: true,
+  selector: 'collapsible-demo-default',
+  imports: [UbCollapsible, UbCollapsibleContent, UbCollapsibleTrigger, UbButtonDirective, NgIconComponent],
+  viewProviders: [provideIcons({ radixCaretSort })],
+  template: `
+  <div ubCollapsible class="w-[350px] space-y-2" [open]="false">
+    <div class="flex items-center justify-between space-x-4 px-4">
+        <h4 className="text-sm font-semibold">
+          {{'@'}}peduarte starred 3 repositories
+        </h4>
+        <button ubButton variant="ghost" size="sm" ubCollapsibleTrigger>
+          <ng-icon name="radix-caret-sort" class="h-4 w-4"></ng-icon>
+          <span class="sr-only">Toggle</span>
+        </button>
+    </div>
+    <div class="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
+      {{'@'}}radix-ng/primitives
+    </div>
+
+    <div ubCollapsibleContent>
+      <div class="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
+        {{'@'}}radix-ng/colors
+      </div>
+      <div class="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
+        {{'@'}}angular/core
+      </div>
+    </div>
+  </div>
+  `,
+})
+
+export class CollapSibleDemoDefault { }
+
+export default CollapSibleDemoDefault

docs/src/registry/default/ui/collapsible.ts

@@ -0,0 +1,35 @@
+import { Directive } from '@angular/core'
+
+import {
+  RdxCollapsibleContentDirective,
+  RdxCollapsibleRootDirective,
+  RdxCollapsibleTriggerDirective,
+} from '@radix-ng/primitives/collapsible'
+
+@Directive({
+  standalone: true,
+  selector: '[ubCollapsible]',
+  exportAs: 'ubCollapsible',
+  hostDirectives: [
+    {
+      directive: RdxCollapsibleRootDirective,
+      inputs: ['open: open', 'disabled: disabled'],
+      outputs: ['onOpenChange: onOpenChange'],
+    },
+  ],
+})
+export class UbCollapsible { }
+
+@Directive({
+  standalone: true,
+  selector: '[ubCollapsibleTrigger]',
+  hostDirectives: [RdxCollapsibleTriggerDirective],
+})
+export class UbCollapsibleTrigger { }
+
+@Directive({
+  standalone: true,
+  selector: '[ubCollapsibleContent]',
+  hostDirectives: [RdxCollapsibleContentDirective],
+})
+export class UbCollapsibleContent { }

docs/src/registry/new-york/example/collapsible-demo.ts

@@ -0,0 +1,44 @@
+import { UbButtonDirective } from '@/registry/new-york/ui/button'
+
+import { UbCollapsible, UbCollapsibleContent, UbCollapsibleTrigger } from '@/registry/new-york/ui/collapsible'
+
+import { Component } from '@angular/core'
+
+import { NgIconComponent, provideIcons } from '@ng-icons/core'
+import { radixCaretSort } from '@ng-icons/radix-icons'
+
+@Component({
+  standalone: true,
+  selector: 'collapsible-demo-new-york',
+  imports: [UbCollapsible, UbCollapsibleContent, UbCollapsibleTrigger, UbButtonDirective, NgIconComponent],
+  viewProviders: [provideIcons({ radixCaretSort })],
+  template: `
+  <div ubCollapsible class="w-[350px] space-y-2" [open]="false">
+    <div class="flex items-center justify-between space-x-4 px-4">
+        <h4 className="text-sm font-semibold">
+          {{'@'}}peduarte starred 3 repositories
+        </h4>
+        <button ubButton variant="ghost" size="sm" ubCollapsibleTrigger>
+          <ng-icon name="radix-caret-sort" class="h-4 w-4"></ng-icon>
+          <span class="sr-only">Toggle</span>
+        </button>
+    </div>
+    <div class="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
+      {{'@'}}radix-ng/primitives
+    </div>
+
+    <div ubCollapsibleContent>
+      <div class="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
+        {{'@'}}radix-ng/colors
+      </div>
+      <div class="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
+        {{'@'}}angular/core
+      </div>
+    </div>
+  </div>
+  `,
+})
+
+export class CollapSibleDemoNewYork { }
+
+export default CollapSibleDemoNewYork

docs/src/registry/new-york/ui/collapsible.ts

@@ -0,0 +1,35 @@
+import { Directive } from '@angular/core'
+
+import {
+  RdxCollapsibleContentDirective,
+  RdxCollapsibleRootDirective,
+  RdxCollapsibleTriggerDirective,
+} from '@radix-ng/primitives/collapsible'
+
+@Directive({
+  standalone: true,
+  selector: '[ubCollapsible]',
+  exportAs: 'ubCollapsible',
+  hostDirectives: [
+    {
+      directive: RdxCollapsibleRootDirective,
+      inputs: ['open: open', 'disabled: disabled'],
+      outputs: ['onOpenChange: onOpenChange'],
+    },
+  ],
+})
+export class UbCollapsible { }
+
+@Directive({
+  standalone: true,
+  selector: '[ubCollapsibleTrigger]',
+  hostDirectives: [RdxCollapsibleTriggerDirective],
+})
+export class UbCollapsibleTrigger { }
+
+@Directive({
+  standalone: true,
+  selector: '[ubCollapsibleContent]',
+  hostDirectives: [RdxCollapsibleContentDirective],
+})
+export class UbCollapsibleContent { }

docs/src/registry/registry-ui.ts

@@ -60,6 +60,12 @@ export const ui: Registry = [
     type: 'registry:ui',
     files: ['ui/card.ts'],
   },
+  {
+    name: 'collapsible',
+    type: 'registry:ui',
+    dependencies: ['@radix-ng/primitives'],
+    files: ['ui/collapsible.ts'],
+  },
   {
     name: 'input',
     type: 'registry:ui',