@radix-ng/primitives 0.11.0 → 0.12.0

package/tabs/stories/tabs.stories.ts

@@ -0,0 +1,213 @@
+import { componentWrapperDecorator, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { RdxTabsContentDirective } from '../src/tabs-content.directive';
+import { RdxTabsListDirective } from '../src/tabs-list.directive';
+import { RdxTabsRootDirective } from '../src/tabs-root.directive';
+import { RdxTabsTriggerDirective } from '../src/tabs-trigger.directive';
+
+export default {
+    title: 'Primitives/Tabs',
+    decorators: [
+        moduleMetadata({
+            imports: [
+                RdxTabsRootDirective,
+                RdxTabsListDirective,
+                RdxTabsTriggerDirective,
+                RdxTabsContentDirective
+            ]
+        }),
+        componentWrapperDecorator(
+            (story) =>
+                `
+                    <div class="radix-themes light light-theme"
+                      data-radius="medium"
+                      data-scaling="100%">${story}</div>`
+        )
+    ]
+} as Meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+    render: (args) => ({
+        props: args,
+        template: `
+<div rdxTabsRoot defaultValue="tab1" class="TabsRoot">
+    <div rdxTabsList class="TabsList">
+        <button rdxTabsTrigger value="tab1" class="TabsTrigger">Account</button>
+        <button rdxTabsTrigger value="tab2" class="TabsTrigger">Password</button>
+    </div>
+    <div rdxTabsContent class="TabsContent" value="tab1">
+    <p class="Text">Make changes to your account here. Click save when you're done.</p>
+      <fieldset class="Fieldset">
+        <label class="Label" for="name">
+          Name
+        </label>
+        <input class="Input" id="name" value="Pedro Duarte" />
+      </fieldset>
+      <fieldset class="Fieldset">
+        <label class="Label" for="username">
+          Username
+        </label>
+        <input class="Input" id="username" value="@peduarte" />
+      </fieldset>
+      <div style="display: flex; margin-top: 20px; justify-content: flex-end; ">
+        <button class="Button green">Save changes</button>
+      </div>
+</div>
+    <div rdxTabsContent class="TabsContent" value="tab2">
+        <p class="Text">Change your password here. After saving, you'll be logged out.</p>
+        <fieldset class="Fieldset">
+            <label class="Label" for="currentPassword">
+              Current password
+            </label>
+            <input class="Input" id="currentPassword" type="password" />
+        </fieldset>
+        <fieldset class="Fieldset">
+            <label class="Label" for="newPassword">
+              New password
+            </label>
+            <input class="Input" id="newPassword" type="password" />
+          </fieldset>
+          <fieldset class="Fieldset">
+            <label class="Label" for="confirmPassword">
+              Confirm password
+            </label>
+            <input class="Input" id="confirmPassword" type="password" />
+          </fieldset>
+          <div style="display: flex; margin-top: 20px; justify-content: flex-end;">
+            <button class="Button green">Change password</button>
+          </div>
+    </div>
+</div>
+
+<style>
+/* reset */
+button,
+fieldset,
+input {
+    all: unset;
+}
+
+.TabsRoot {
+    display: flex;
+    flex-direction: column;
+    width: 300px;
+    box-shadow: 0 2px 10px var(--black-a4);
+}
+
+.TabsList {
+    flex-shrink: 0;
+    display: flex;
+    border-bottom: 1px solid var(--mauve-6);
+}
+
+.TabsTrigger {
+    font-family: inherit;
+    background-color: white;
+    padding: 0 20px;
+    height: 45px;
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 15px;
+    line-height: 1;
+    color: var(--mauve-11);
+    user-select: none;
+}
+.TabsTrigger:first-child {
+    border-top-left-radius: 6px;
+}
+.TabsTrigger:last-child {
+    border-top-right-radius: 6px;
+}
+.TabsTrigger:hover {
+    color: var(--violet-11);
+}
+.TabsTrigger[data-state='active'] {
+    color: var(--violet-11);
+    box-shadow:
+        inset 0 -1px 0 0 currentColor,
+        0 1px 0 0 currentColor;
+}
+.TabsTrigger:focus {
+    position: relative;
+    box-shadow: 0 0 0 2px black;
+}
+
+.TabsContent {
+    flex-grow: 1;
+    padding: 20px;
+    background-color: white;
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+    outline: none;
+}
+.TabsContent:focus {
+    box-shadow: 0 0 0 2px black;
+}
+
+.Text {
+  margin-top: 0;
+  margin-bottom: 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+}
+
+.Fieldset {
+  margin-bottom: 15px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+.Label {
+  font-size: 13px;
+  line-height: 1;
+  margin-bottom: 10px;
+  color: var(--violet-12);
+  display: block;
+}
+
+.Input {
+  flex: 1 0 auto;
+  border-radius: 4px;
+  padding: 0 10px;
+  font-size: 15px;
+  line-height: 1;
+  color: var(--violet-11);
+  box-shadow: 0 0 0 1px var(--violet-7);
+  height: 35px;
+}
+.Input:focus {
+  box-shadow: 0 0 0 2px var(--violet-8);
+}
+
+.Button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+}
+.Button.green {
+  background-color: var(--green-4);
+  color: var(--green-11);
+}
+.Button.green:hover {
+  background-color: var(--green-5);
+}
+.Button.green:focus {
+  box-shadow: 0 0 0 2px var(--green-7);
+}
+
+</style>
+`
+    })
+};

package/test-setup.ts

@@ -0,0 +1 @@
+import 'jest-preset-angular/setup-jest';

package/toggle/__tests__/toggle.directive.spec.ts

@@ -0,0 +1,87 @@
+import { Component, DebugElement, Input } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { RdxToggleDirective } from '../src/toggle.directive';
+
+@Component({
+    template:
+        '<button rdxToggle [pressed]="pressed" [disabled]="disabled" (onPressedChange)="onToggle($event)">Toggle</button>'
+})
+class TestComponent {
+    @Input() pressed = false;
+    @Input() disabled = false;
+
+    onToggle(pressed: boolean) {
+        this.pressed = pressed;
+    }
+}
+
+describe('RdxToggleDirective', () => {
+    let component: TestComponent;
+    let fixture: ComponentFixture<TestComponent>;
+    let button: DebugElement;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [RdxToggleDirective],
+            declarations: [TestComponent]
+        }).compileComponents();
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(TestComponent);
+        component = fixture.componentInstance;
+        button = fixture.debugElement.query(By.css('button'));
+        fixture.detectChanges();
+    });
+
+    it('should initialize with default values', () => {
+        expect(component.pressed).toBe(false);
+        expect(component.disabled).toBe(false);
+    });
+
+    it('should apply the correct aria-pressed attribute', () => {
+        expect(button.nativeElement.getAttribute('aria-pressed')).toBe('false');
+        component.pressed = true;
+        fixture.detectChanges();
+        expect(button.nativeElement.getAttribute('aria-pressed')).toBe('true');
+    });
+
+    it('should apply the correct data-state attribute', () => {
+        expect(button.nativeElement.getAttribute('data-state')).toBe('off');
+        component.pressed = true;
+        fixture.detectChanges();
+        expect(button.nativeElement.getAttribute('data-state')).toBe('on');
+    });
+
+    it('should apply the correct data-disabled attribute', () => {
+        expect(button.nativeElement.getAttribute('data-disabled')).toBe('false');
+        component.disabled = true;
+        fixture.detectChanges();
+        expect(button.nativeElement.getAttribute('data-disabled')).toBe('true');
+    });
+
+    it('should toggle the pressed state on click', () => {
+        expect(component.pressed).toBe(false);
+        button.nativeElement.click();
+        expect(component.pressed).toBe(true);
+        button.nativeElement.click();
+        expect(component.pressed).toBe(false);
+    });
+
+    it('should not toggle the pressed state when disabled', () => {
+        component.disabled = true;
+        fixture.detectChanges();
+        expect(component.pressed).toBe(false);
+        button.nativeElement.click();
+        expect(component.pressed).toBe(false);
+    });
+
+    it('should emit the pressed state change event on toggle', () => {
+        const spy = jest.spyOn(component, 'onToggle');
+        button.nativeElement.click();
+        expect(spy).toHaveBeenCalledWith(true);
+        button.nativeElement.click();
+        expect(spy).toHaveBeenCalledWith(false);
+    });
+});

package/toggle/ng-package.json

@@ -0,0 +1,5 @@
+{
+    "lib": {
+        "entryFile": "index.ts"
+    }
+}

package/toggle/src/toggle.directive.ts

@@ -0,0 +1,49 @@
+import { Directive, EventEmitter, input, model, Output } from '@angular/core';
+
+export interface ToggleProps {
+    /**
+     * The controlled state of the toggle.
+     */
+    pressed?: boolean;
+    /**
+     * The state of the toggle when initially rendered. Use `defaultPressed`
+     * if you do not need to control the state of the toggle.
+     * @defaultValue false
+     */
+    defaultPressed?: boolean;
+    /**
+     * The callback that fires when the state of the toggle changes.
+     */
+    onPressedChange?: EventEmitter<boolean>;
+}
+
+@Directive({
+    selector: 'button[rdxToggle]',
+    exportAs: 'rdxToggle',
+    standalone: true,
+    host: {
+        type: 'button',
+        '[attr.aria-pressed]': 'pressed()',
+        '[attr.data-state]': 'pressed() ? "on" : "off"',
+        '[attr.data-disabled]': 'disabled()',
+
+        '(click)': 'toggle()'
+    }
+})
+export class RdxToggleDirective {
+    readonly defaultPressed = input<boolean>(false);
+    readonly pressed = model<boolean>(this.defaultPressed());
+    readonly disabled = input<boolean>(false);
+
+    /**
+     * Event emitted when the toggle is pressed.
+     */
+    @Output() readonly onPressedChange = new EventEmitter<boolean>();
+
+    protected toggle(): void {
+        if (!this.disabled()) {
+            this.pressed.set(!this.pressed());
+            this.onPressedChange.emit(this.pressed());
+        }
+    }
+}

package/toggle/stories/toggle.docs.mdx

@@ -0,0 +1,60 @@
+import { ArgTypes, Canvas, Markdown, Meta } from '@storybook/blocks';
+import * as ToggleDirectiveStories from './toggle.stories';
+import { RdxToggleDirective } from '../src/toggle.directive';
+
+<Meta title="Primitives/Toggle" />
+
+# Toggle
+
+#### A two-\_state button that can be either on or off.
+
+<Canvas sourceState="hidden" of={ToggleDirectiveStories.Default} />
+
+## Features
+
+- ✅ Full keyboard navigation.
+- ✅ Can be controlled or uncontrolled.
+
+## Import
+
+Get started with importing the directives:
+
+```typescript
+import { RdxToggleDirective } from '@radix-ng/primitives/toggle';
+```
+
+## Examples
+
+```html
+<button rdxToggle aria-label="Toggle italic">
+  <icon />
+</button>
+```
+
+## API Reference
+
+### RdxToggleDirective
+
+<ArgTypes of={RdxToggleDirective} />
+
+<Markdown>
+  {`
+  | Data Attribute | Value |
+  | ----------- | --------- |
+  | [data-state]       | "on" or "off"   |
+  | [data-disabled]    | Present when disabled      |
+  `}
+</Markdown>
+
+## Accessibility
+
+### Keyboard Interactions
+
+<Markdown>
+  {`
+  | Key | Description |
+  | ----------- | --------- |
+  | Space       | Activates/deactivates the toggle.       |
+  | Enter       | Activates/deactivates the toggle.  |
+  `}
+</Markdown>

package/toggle/stories/toggle.stories.ts

@@ -0,0 +1,84 @@
+import { componentWrapperDecorator, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { Italic, LucideAngularModule } from 'lucide-angular';
+import { RdxToggleDirective } from '../src/toggle.directive';
+
+export default {
+    title: 'Primitives/Toggle',
+    decorators: [
+        moduleMetadata({
+            imports: [
+                RdxToggleDirective,
+                LucideAngularModule,
+                LucideAngularModule.pick({ Italic })
+            ]
+        }),
+        componentWrapperDecorator(
+            (story) =>
+                `<div class="radix-themes light light-theme"
+                      data-radius="medium"
+                      data-scaling="100%">${story}
+
+                        <style>
+                            button {
+                                all: unset;
+                            }
+                            .Toggle {
+                              background-color: white;
+                              color: var(--mauve-11);
+                              height: 35px;
+                              width: 35px;
+                              border-radius: 4px;
+                              display: flex;
+                              font-size: 15px;
+                              line-height: 1;
+                              align-items: center;
+                              justify-content: center;
+                              box-shadow: 0 2px 10px var(--black-a7);
+                            }
+                            .Toggle:hover {
+                              background-color: var(--violet-3);
+                            }
+                            .Toggle[data-state='on'] {
+                              background-color: var(--violet-6);
+                              color: var(--violet-12);
+                            }
+                            .Toggle:focus {
+                              box-shadow: 0 0 0 2px black;
+                            }
+                        </style>
+
+                      </div>`
+        )
+    ],
+    argTypes: {
+        pressed: {
+            control: 'boolean'
+        }
+    }
+} as Meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+    render: () => ({
+        template: `
+<button rdxToggle aria-label="Toggle italic" class="Toggle">
+    <lucide-angular name="italic" size="16"></lucide-angular>
+</button>
+`
+    })
+};
+
+export const State: Story = {
+    render: (args) => ({
+        props: {
+            ...args,
+            pressed: true
+        },
+        template: `
+<button rdxToggle [pressed]="pressed" aria-label="Toggle italic" class="Toggle">
+    <lucide-angular name="italic" size="16"></lucide-angular>
+</button>
+`
+    })
+};

package/toggle-group/ng-package.json

@@ -0,0 +1,5 @@
+{
+    "lib": {
+        "entryFile": "index.ts"
+    }
+}

package/toggle-group/src/toggle-group-button.directive.ts

@@ -0,0 +1,73 @@
+import { booleanAttribute, Directive, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { RdxToggleGroupButtonToken } from './toggle-group-button.token';
+import { injectToggleGroup } from './toggle-group.token';
+
+@Directive({
+    selector: 'button[rdxToggleGroupButton]',
+    standalone: true,
+    providers: [{ provide: RdxToggleGroupButtonToken, useExisting: RdxToggleGroupButtonDirective }],
+    host: {
+        role: 'radio',
+        '[attr.aria-checked]': 'checked',
+        '[attr.aria-disabled]': 'disabled || toggleGroup.disabled',
+        '[attr.data-disabled]': 'disabled || toggleGroup.disabled',
+        '[attr.data-state]': 'checked ? "on" : "off"',
+        '[attr.data-orientation]': 'toggleGroup.orientation',
+
+        '(click)': 'toggle()'
+    }
+})
+export class RdxToggleGroupButtonDirective implements OnChanges {
+    /**
+     * Access the toggle group.
+     * @ignore
+     */
+    protected readonly toggleGroup = injectToggleGroup();
+
+    /**
+     * The value of this toggle button.
+     */
+    @Input({ required: true }) value!: string;
+
+    /**
+     * Whether this toggle button is disabled.
+     * @default false
+     */
+    @Input({ transform: booleanAttribute }) disabled = false;
+
+    /**
+     * Whether this toggle button is checked.
+     */
+    protected get checked(): boolean {
+        return this.toggleGroup.isSelected(this.value);
+    }
+
+    /**
+     * @ignore
+     */
+    ngOnChanges(changes: SimpleChanges): void {
+        if ('disabled' in changes) {
+            // TODO
+        }
+    }
+
+    /**
+     * @ignore
+     */
+    toggle(): void {
+        if (this.disabled) {
+            return;
+        }
+
+        this.toggleGroup.toggle(this.value);
+    }
+
+    /**
+     * Ensure the disabled state is propagated to the roving focus item.
+     * @internal
+     * @ignore
+     */
+    updateDisabled(): void {
+        // TODO
+    }
+}

package/toggle-group/src/toggle-group-button.token.ts

@@ -0,0 +1,8 @@
+import { inject, InjectionToken } from '@angular/core';
+import type { RdxToggleGroupButtonDirective } from './toggle-group-button.directive';
+
+export const RdxToggleGroupButtonToken = new InjectionToken<RdxToggleGroupButtonDirective>('RdxToggleGroupButtonToken');
+
+export function injectToggleGroupButton(): RdxToggleGroupButtonDirective {
+    return inject(RdxToggleGroupButtonToken);
+}