diff --git a/docs/src/components/Announcement.astro b/docs/src/components/Announcement.astro index 8268530..2e35430 100644 --- a/docs/src/components/Announcement.astro +++ b/docs/src/components/Announcement.astro @@ -2,8 +2,8 @@ --- - - New progress component + + New toggle component + +## Installation + + + + + CLI + Manual + + + +```bash +npx shadcn-ng@latest add toggle +``` + + + + + + + +Install the following dependencies: + +```bash +npm install @radix-ng/primitives +``` + +Copy and paste the following code into your project. + + + +Update the import paths to match your project setup. + + + + + + + +## Usage + +```ts +import { UbToggleDirective } from "@/components/ui/toggle" +``` + +```html + +``` diff --git a/docs/src/registry/default/example/toggle-demo.ts b/docs/src/registry/default/example/toggle-demo.ts new file mode 100644 index 0000000..92dfabc --- /dev/null +++ b/docs/src/registry/default/example/toggle-demo.ts @@ -0,0 +1,18 @@ +import { UbToggleDirective } from '@/registry/default/ui/toggle' + +import { Component } from '@angular/core' +import { NgIconComponent, provideIcons } from '@ng-icons/core' +import { lucideBold } from '@ng-icons/lucide' + +@Component({ + standalone: true, + selector: '[toggle-demo-default]', + imports: [UbToggleDirective, NgIconComponent], + viewProviders: [provideIcons({ lucideBold })], + template: ` + + `, +}) +export default class ToggleDemoDefault { } diff --git a/docs/src/registry/default/ui/toggle.ts b/docs/src/registry/default/ui/toggle.ts new file mode 100644 index 0000000..8aa684d --- /dev/null +++ b/docs/src/registry/default/ui/toggle.ts @@ -0,0 +1,47 @@ +import { cn } from '@/lib/utils' +import { computed, Directive, input } from '@angular/core' +import { RdxToggleDirective } from '@radix-ng/primitives/toggle' +import { cva, type VariantProps } from 'class-variance-authority' + +const toggleVariants = cva( + 'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2', + { + variants: { + variant: { + default: 'bg-transparent', + outline: + 'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground', + }, + size: { + default: 'h-10 px-3 min-w-10', + sm: 'h-9 px-2.5 min-w-9', + lg: 'h-11 px-5 min-w-11', + }, + }, + defaultVariants: { + variant: 'default', + size: 'default', + }, + }, +) + +@Directive({ + standalone: true, + selector: 'button[ubToggle]', + host: { + '[class]': 'computedClass()', + }, + hostDirectives: [RdxToggleDirective], +}) +export class UbToggleDirective { + variant = input['variant']>() + size = input['size']>() + class = input() + computedClass = computed(() => cn( + toggleVariants({ + variant: this.variant(), + size: this.size(), + className: this.class(), + }), + )) +} diff --git a/docs/src/registry/new-york/example/toggle-demo.ts b/docs/src/registry/new-york/example/toggle-demo.ts new file mode 100644 index 0000000..a263872 --- /dev/null +++ b/docs/src/registry/new-york/example/toggle-demo.ts @@ -0,0 +1,18 @@ +import { UbToggleDirective } from '@/registry/new-york/ui/toggle' + +import { Component } from '@angular/core' +import { NgIconComponent, provideIcons } from '@ng-icons/core' +import { lucideBold } from '@ng-icons/lucide' + +@Component({ + standalone: true, + selector: '[toggle-demo-new-york]', + imports: [UbToggleDirective, NgIconComponent], + viewProviders: [provideIcons({ lucideBold })], + template: ` + + `, +}) +export default class ToggleDemoNewYork { } diff --git a/docs/src/registry/new-york/ui/toggle.ts b/docs/src/registry/new-york/ui/toggle.ts new file mode 100644 index 0000000..c395543 --- /dev/null +++ b/docs/src/registry/new-york/ui/toggle.ts @@ -0,0 +1,47 @@ +import { cn } from '@/lib/utils' +import { computed, Directive, input } from '@angular/core' +import { RdxToggleDirective } from '@radix-ng/primitives/toggle' +import { cva, type VariantProps } from 'class-variance-authority' + +const toggleVariants = cva( + 'inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', + { + variants: { + variant: { + default: 'bg-transparent', + outline: + 'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground', + }, + size: { + default: 'h-9 px-2 min-w-9', + sm: 'h-8 px-1.5 min-w-8', + lg: 'h-10 px-2.5 min-w-10', + }, + }, + defaultVariants: { + variant: 'default', + size: 'default', + }, + }, +) + +@Directive({ + standalone: true, + selector: 'button[ubToggle]', + host: { + '[class]': 'computedClass()', + }, + hostDirectives: [RdxToggleDirective], +}) +export class UbToggleDirective { + variant = input['variant']>() + size = input['size']>() + class = input() + computedClass = computed(() => cn( + toggleVariants({ + variant: this.variant(), + size: this.size(), + className: this.class(), + }), + )) +} diff --git a/docs/src/registry/registry-examples.ts b/docs/src/registry/registry-examples.ts index e95824b..05afc88 100644 --- a/docs/src/registry/registry-examples.ts +++ b/docs/src/registry/registry-examples.ts @@ -199,6 +199,12 @@ export const examples: Registry = [ registryDependencies: ['tabs'], files: ['example/tabs-demo.ts'], }, + { + name: 'toggle-demo', + type: 'registry:example', + registryDependencies: ['toggle'], + files: ['example/toggle-demo.ts'], + }, { name: 'typography-blockquote', type: 'registry:example', diff --git a/docs/src/registry/registry-ui.ts b/docs/src/registry/registry-ui.ts index 90ca7d9..437bdb3 100644 --- a/docs/src/registry/registry-ui.ts +++ b/docs/src/registry/registry-ui.ts @@ -128,4 +128,10 @@ export const ui: Registry = [ dependencies: ['@radix-ng/primitives'], files: [{ path: 'ui/tabs.ts', type: 'registry:ui' }], }, + { + name: 'toggle', + type: 'registry:ui', + dependencies: ['@radix-ng/primitives'], + files: [{ path: 'ui/toggle.ts', type: 'registry:ui' }], + }, ]