@radix-ng/primitives 0.12.1 → 0.13.0

package/tabs/stories/tabs.stories.ts

@@ -1,213 +0,0 @@
-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

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

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

@@ -1,87 +0,0 @@
-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

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

package/toggle/src/toggle.directive.ts

@@ -1,49 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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

@@ -1,84 +0,0 @@
-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

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

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

@@ -1,73 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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);
-}