From b63116f8e79e1eeafbead0d999f5fb535275b9a8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adri=C3=A1n=20UB?= <22903142+adrian-ub@users.noreply.github.com> Date: Sat, 9 Nov 2024 12:06:11 -0500 Subject: [PATCH] docs: add toggle component --- docs/src/components/Announcement.astro | 4 +- docs/src/config/docs.ts | 6 ++ docs/src/content/docs/components/toggle.mdx | 57 +++++++++++++++++++ .../registry/default/example/toggle-demo.ts | 18 ++++++ docs/src/registry/default/ui/toggle.ts | 47 +++++++++++++++ .../registry/new-york/example/toggle-demo.ts | 18 ++++++ docs/src/registry/new-york/ui/toggle.ts | 47 +++++++++++++++ docs/src/registry/registry-examples.ts | 6 ++ docs/src/registry/registry-ui.ts | 6 ++ 9 files changed, 207 insertions(+), 2 deletions(-) create mode 100644 docs/src/content/docs/components/toggle.mdx create mode 100644 docs/src/registry/default/example/toggle-demo.ts create mode 100644 docs/src/registry/default/ui/toggle.ts create mode 100644 docs/src/registry/new-york/example/toggle-demo.ts create mode 100644 docs/src/registry/new-york/ui/toggle.ts 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' }], + }, ]