@radix-ng/primitives 0.11.0 → 0.12.0

package/radio/stories/radio-group.styles.scss

@@ -0,0 +1,70 @@
+/* reset */
+button {
+    all: unset;
+}
+
+.RadioGroup {
+    display: flex;
+    align-items: center;
+}
+
+.RadioGroupRoot {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.RadioGroupItem {
+    background-color: white;
+    width: 25px;
+    height: 25px;
+    border-radius: 100%;
+    box-shadow: 0 2px 10px var(--black-a7);
+}
+
+.RadioGroupItem:hover {
+    background-color: var(--violet-3);
+}
+
+.RadioGroupItem:focus {
+    box-shadow: 0 0 0 2px black;
+}
+
+.RadioGroupIndicator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    position: relative;
+}
+
+.RadioGroupIndicator::after {
+    content: '';
+    display: block;
+    width: 11px;
+    height: 11px;
+    border-radius: 50%;
+    background-color: var(--violet-11);
+}
+
+.RadioGroupIndicator[data-state='unchecked'] {
+    display: none;
+}
+
+.Input {
+    transform: translateX(-100%);
+    position: absolute;
+    pointer-events: none;
+    opacity: 0;
+    margin: 0;
+    width: 25px;
+    height: 25px;
+}
+
+.Label {
+    color: white;
+    font-size: 15px;
+    line-height: 1;
+    padding-left: 15px;
+}

package/radio/stories/radio.docs.mdx

@@ -0,0 +1,68 @@
+import { ArgTypes, Canvas, Markdown, Meta } from '@storybook/blocks';
+import * as RadioDirectiveStories from './radio.stories';
+import { RdxRadioGroupDirective } from '../src/radio-root.directive';
+import { RdxRadioItemDirective } from '../src/radio-item.directive';
+
+<Meta title="Primitives/Radio Group" />
+
+# Radio Group
+
+#### A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
+
+<Canvas sourceState="hidden" of={RadioDirectiveStories.Default} />
+
+## Features
+
+- ✅ Full keyboard navigation.
+- ✅ Supports horizontal/vertical orientation.
+- ✅ Can be controlled or uncontrolled.
+
+## Import
+
+Get started with importing the directives:
+
+```typescript
+import { RdxRadioIndicatorDirective, RadioItemDirectiveб } from '@radix-ng/primitives/radio';
+```
+
+## Anatomy
+
+```html
+<div rdxRadioRoot>
+  <button rdxRadioItem value="default">
+    <div rdxRadioIndicator></div>
+  </button>
+</div>
+```
+
+## API Reference
+
+### CheckboxGroupDirective
+
+<ArgTypes of={RdxRadioGroupDirective} />
+
+### CheckboxGroupItemDirective
+
+<ArgTypes of={RdxRadioItemDirective} />
+
+### RdxRadioIndicatorDirective
+
+## Accessibility
+
+Adheres to the [Radio Group WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/radiobutton)
+and uses [roving tabindex](https://www.w3.org/TR/wai-aria-practices-1.2/examples/radio/radio.html) to manage focus movement among radio items.
+
+### Keyboard Interactions
+
+<Markdown>
+  {`
+  | Key | Description |
+  | ----------- | --------- |
+  | Tab         | Moves focus to either the checked radio item or the first radio item in the group. |
+  | Space       | When focus is on an unchecked radio item, checks it.        |
+  | ArrowDown   | Moves focus and checks the next radio item in the group.    |
+  | ArrowRight  |  Moves focus and checks the next radio item in the group.   |
+  | ArrowUp     |  Moves focus to the previous radio item in the group.       |
+  | ArrowLeft   |  Moves focus to the previous radio item in the group.       |
+  `}
+</Markdown>

package/radio/stories/radio.stories.ts

@@ -0,0 +1,155 @@
+import { componentWrapperDecorator, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { RdxLabelDirective } from '../../label';
+import { RdxRadioIndicatorDirective } from '../src/radio-indicator.directive';
+import { RdxRadioItemDirective } from '../src/radio-item.directive';
+import { RdxRadioGroupDirective } from '../src/radio-root.directive';
+import { RadioGroupComponent } from './radio-group.component';
+
+const html = String.raw;
+
+export default {
+    title: 'Primitives/Radio Group',
+    decorators: [
+        moduleMetadata({
+            imports: [
+                RdxLabelDirective,
+                RdxRadioItemDirective,
+                RdxRadioIndicatorDirective,
+                RdxRadioGroupDirective,
+                RadioGroupComponent
+            ]
+        }),
+        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: () => ({
+        template: html`
+            <form>
+                <div class="RadioGroupRoot" rdxRadioRoot aria-label="View density">
+                    <div style="display: flex; align-items: center;">
+                        <button class="RadioGroupItem" id="r1" rdxRadioItem value="default">
+                            <div class="RadioGroupIndicator" rdxRadioIndicator></div>
+                            <input
+                                class="Input"
+                                rdxRadioIndicator
+                                type="radio"
+                                aria-hidden="true"
+                                tabindex="-1"
+                                value="default"
+                            />
+                        </button>
+                        <label class="Label" rdxLabel htmlFor="r1">Default</label>
+                    </div>
+                    <div style="display: flex; align-items: center;">
+                        <button class="RadioGroupItem" id="r2" rdxRadioItem value="comfortable">
+                            <div class="RadioGroupIndicator" rdxRadioIndicator></div>
+                            <input
+                                class="Input"
+                                rdxRadioIndicator
+                                type="radio"
+                                aria-hidden="true"
+                                tabindex="-1"
+                                value="comfortable"
+                            />
+                        </button>
+                        <label class="Label" rdxLabel htmlFor="r2">Comfortable</label>
+                    </div>
+                    <div style="display: flex; align-items: center;">
+                        <button class="RadioGroupItem" id="r3" rdxRadioItem value="compact">
+                            <div class="RadioGroupIndicator" rdxRadioIndicator></div>
+                            <input
+                                class="Input"
+                                rdxRadioIndicator
+                                type="radio"
+                                aria-hidden="true"
+                                tabindex="-1"
+                                value="compact"
+                            />
+                        </button>
+                        <label class="Label" rdxLabel htmlFor="r3">Compact</label>
+                    </div>
+                </div>
+            </form>
+
+            <style>
+                /* reset */
+                button {
+                    all: unset;
+                }
+
+                .RadioGroupRoot {
+                    display: flex;
+                    flex-direction: column;
+                    gap: 10px;
+                }
+
+                .RadioGroupItem {
+                    background-color: white;
+                    width: 25px;
+                    height: 25px;
+                    border-radius: 100%;
+                    box-shadow: 0 2px 10px var(--black-a7);
+                }
+                .RadioGroupItem:hover {
+                    background-color: var(--violet-3);
+                }
+                .RadioGroupItem:focus {
+                    box-shadow: 0 0 0 2px black;
+                }
+
+                .RadioGroupIndicator {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    width: 100%;
+                    height: 100%;
+                    position: relative;
+                }
+                .RadioGroupIndicator::after {
+                    content: '';
+                    display: block;
+                    width: 11px;
+                    height: 11px;
+                    border-radius: 50%;
+                    background-color: var(--violet-11);
+                }
+
+                .RadioGroupIndicator[data-state='unchecked'] {
+                    display: none;
+                }
+
+                .Input {
+                    transform: translateX(-100%);
+                    position: absolute;
+                    pointer-events: none;
+                    opacity: 0;
+                    margin: 0;
+                    width: 25px;
+                    height: 25px;
+                }
+
+                .Label {
+                    color: white;
+                    font-size: 15px;
+                    line-height: 1;
+                    padding-left: 15px;
+                }
+            </style>
+        `
+    })
+};
+
+export const RadioGroup: Story = {
+    render: () => ({
+        template: `<radio-groups-forms-example></radio-groups-forms-example>`
+    })
+};

package/separator/__tests__/separator.directive.spec.ts

@@ -0,0 +1,58 @@
+import { Component, DebugElement } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { Orientation, RdxSeparatorRootDirective } from '../src/separator.directive';
+
+@Component({
+    template: '<div rdxSeparatorRoot [orientation]="orientation" [decorative]="decorative"></div>'
+})
+class TestComponent {
+    orientation: Orientation = 'horizontal';
+    decorative = false;
+}
+
+describe('SeparatorDirective', () => {
+    let component: TestComponent;
+    let fixture: ComponentFixture<TestComponent>;
+    let div: DebugElement;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            declarations: [TestComponent],
+            imports: [RdxSeparatorRootDirective]
+        }).compileComponents();
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(TestComponent);
+        component = fixture.componentInstance;
+        div = fixture.debugElement.query(By.css('div'));
+        fixture.detectChanges();
+    });
+
+    it('should create an instance', () => {
+        const directive = new RdxSeparatorRootDirective();
+        expect(directive).toBeTruthy();
+    });
+
+    it('should apply the correct role attribute based on decorative input', () => {
+        expect(div.nativeElement.getAttribute('role')).toBe('separator');
+        component.decorative = true;
+        fixture.detectChanges();
+        expect(div.nativeElement.getAttribute('role')).toBe('none');
+    });
+
+    it('should apply the correct aria-orientation attribute based on orientation input', () => {
+        expect(div.nativeElement.getAttribute('aria-orientation')).toBe(null);
+        component.orientation = 'vertical';
+        fixture.detectChanges();
+        expect(div.nativeElement.getAttribute('aria-orientation')).toBe('vertical');
+    });
+
+    it('should apply the correct data-orientation attribute based on orientation input', () => {
+        expect(div.nativeElement.getAttribute('data-orientation')).toBe('horizontal');
+        component.orientation = 'vertical';
+        fixture.detectChanges();
+        expect(div.nativeElement.getAttribute('data-orientation')).toBe('vertical');
+    });
+});

package/separator/ng-package.json

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

package/separator/src/separator.directive.ts

@@ -0,0 +1,35 @@
+import { booleanAttribute, Directive, Input } from '@angular/core';
+
+const DEFAULT_ORIENTATION = 'horizontal';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const ORIENTATIONS = ['horizontal', 'vertical'] as const;
+
+export type Orientation = (typeof ORIENTATIONS)[number];
+
+export interface SeparatorProps {
+    /**
+     * Either `vertical` or `horizontal`. Defaults to `horizontal`.
+     */
+    orientation?: Orientation;
+    /**
+     * Whether the component is purely decorative. When true, accessibility-related attributes
+     * are updated so that the rendered element is removed from the accessibility tree.
+     */
+    decorative?: boolean;
+}
+
+@Directive({
+    selector: 'div[rdxSeparatorRoot]',
+    standalone: true,
+    host: {
+        '[attr.role]': 'decorative ? "none" : "separator"',
+        // `aria-orientation` defaults to `horizontal` so we only need it if `orientation` is vertical
+        '[attr.aria-orientation]': '!decorative && orientation === "vertical" ? "vertical" : null',
+        '[attr.data-orientation]': 'orientation'
+    }
+})
+export class RdxSeparatorRootDirective implements SeparatorProps {
+    @Input() orientation: Orientation = DEFAULT_ORIENTATION;
+
+    @Input({ transform: booleanAttribute }) decorative = false;
+}

package/separator/stories/separator.docs.mdx

@@ -0,0 +1,37 @@
+import { ArgTypes, Canvas, Meta } from '@storybook/blocks';
+import { RdxSeparatorRootDirective } from '../src/separator.directive';
+import * as SeparatorDirectiveStories from './separator.stories';
+
+<Meta title="Primitives/Separator" />
+
+# Separator
+
+#### Visually or semantically separates content.
+
+<Canvas sourceState="hidden" of={SeparatorDirectiveStories.Default} />
+
+## Features
+
+- ✅ Supports horizontal and vertical orientations.
+
+## Usage
+
+Get started with importing the directive:
+
+```typescript
+import { RdxSeparatorRootDirective } from '@radix-ng/primitives/separator';
+```
+
+## Examples
+
+```html
+<div rdxSeparatorRoot decorative="decorative" orientation="vertical"></div>
+```
+
+## API Reference
+
+<ArgTypes of={RdxSeparatorRootDirective} />
+
+## Accessibility
+
+Adheres to the [`separator` role requirements](https://www.w3.org/TR/wai-aria-1.2/#separator).

package/separator/stories/separator.stories.ts

@@ -0,0 +1,82 @@
+import { CommonModule } from '@angular/common';
+import { componentWrapperDecorator, moduleMetadata } from '@storybook/angular';
+import { RdxSeparatorRootDirective } from '../src/separator.directive';
+
+export default {
+    component: RdxSeparatorRootDirective,
+    title: 'Primitives/Separator',
+    decorators: [
+        moduleMetadata({
+            imports: [RdxSeparatorRootDirective, CommonModule]
+        }),
+        componentWrapperDecorator(
+            (story) =>
+                `<div class="radix-themes light light-theme"
+                      data-radius="medium"
+                      data-scaling="100%">${story}</div>`
+        )
+    ]
+};
+
+export const Default = {
+    render: () => ({
+        template: `
+<style>
+
+.SeparatorRoot {
+  background-color: var(--violet-6);;
+}
+.SeparatorRoot[data-orientation='horizontal'] {
+  height: 1px;
+  width: 100%;
+}
+.SeparatorRoot[data-orientation='vertical'] {
+  height: 100%;
+  width: 1px;
+}
+
+.Text {
+  color: white;
+  font-size: 15px;
+  line-height: 20px;
+}
+
+</style>
+  <div style="width: 100%; max-width: 300px; margin: 0 15px;">
+    <div class="Text">
+      Radix Primitives
+    </div>
+    <div class="Text" style="font-weight: 500;">
+      An open-source UI component library.
+    </div>
+    <div rdxSeparatorRoot
+        class="SeparatorRoot"
+        style="margin: 15px 0;"
+    ></div>
+    <div style="display: flex; height: 1.25rem; align-items: center;">
+      <div class="Text">
+        Blog
+      </div>
+      <div rdxSeparatorRoot
+        class="SeparatorRoot"
+        decorative="decorative"
+        orientation="vertical"
+        style="margin: 0 15px;"
+      ></div>
+      <div class="Text">
+        Docs
+      </div>
+      <div rdxSeparatorRoot
+        class="SeparatorRoot"
+        decorative="decorative"
+        orientation="vertical"
+        style="margin: 0 15px;"
+      ></div>
+      <div class="Text">
+        Source
+      </div>
+    </div>
+  </div>
+`
+    })
+};

package/slider/src/slider-thumb.directives.ts

@@ -0,0 +1,60 @@
+import { AfterViewInit, Directive, ElementRef, inject, Input, NgZone, OnDestroy } from '@angular/core';
+import { Thumb } from './slider.types';
+
+@Directive({
+    standalone: true
+})
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+class RdxSliderThumbDirective implements AfterViewInit, OnDestroy {
+    @Input() thumbPosition: Thumb | undefined;
+
+    private sliderElement: HTMLInputElement | undefined;
+
+    private readonly ngZone = inject(NgZone);
+    private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
+
+    /** Thumb is currently pressed. */
+    isActive = false;
+    isHovered = false;
+
+    ngAfterViewInit() {
+        const input = this.sliderElement;
+
+        if (input) {
+            this.ngZone.runOutsideAngular(() => {
+                input.addEventListener('pointermove', this.onPointerMove);
+                input.addEventListener('pointerdown', this.onDragStart);
+                input.addEventListener('pointerup', this.onDragEnd);
+                input.addEventListener('pointerleave', this.onMouseLeave);
+            });
+        }
+    }
+
+    ngOnDestroy() {
+        const input = this.sliderElement;
+
+        if (input) {
+            input.removeEventListener('pointermove', this.onPointerMove);
+            input.removeEventListener('pointerdown', this.onDragStart);
+            input.removeEventListener('pointerup', this.onDragEnd);
+            input.removeEventListener('pointerleave', this.onMouseLeave);
+        }
+    }
+
+    private onPointerMove = (_event: PointerEvent): void => {};
+
+    private onDragStart = (event: PointerEvent): void => {
+        if (event.button !== 0) {
+            return;
+        }
+        this.isActive = true;
+    };
+
+    private onDragEnd = (_event: PointerEvent): void => {
+        this.isActive = false;
+    };
+
+    private onMouseLeave = (_event: PointerEvent): void => {
+        this.isHovered = false;
+    };
+}

package/slider/src/slider-track.directive.ts

@@ -0,0 +1,11 @@
+import { booleanAttribute, Directive, Input } from '@angular/core';
+
+@Directive({
+    standalone: true,
+    host: {
+        '[attr.data-disabled]': 'disabled'
+    }
+})
+export class SliderTrackDirective {
+    @Input({ transform: booleanAttribute }) disabled = false;
+}

package/slider/src/slider.directive.ts

@@ -0,0 +1,59 @@
+import {
+    AfterViewInit,
+    booleanAttribute,
+    ChangeDetectorRef,
+    Directive,
+    ElementRef,
+    inject,
+    Input,
+    NgZone,
+    numberAttribute,
+    OnDestroy
+} from '@angular/core';
+
+@Directive({
+    standalone: true
+})
+export class RdxSliderDirective implements AfterViewInit, OnDestroy {
+    private readonly cdr = inject(ChangeDetectorRef);
+    private readonly ngZone = inject(NgZone);
+    private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
+
+    @Input({ transform: numberAttribute }) max = 100;
+    @Input({ transform: numberAttribute }) min = 0;
+
+    @Input({ transform: booleanAttribute }) disabled = false;
+
+    private resizeObserver: ResizeObserver | null | undefined;
+    private resizeTimer: null | ReturnType<typeof setTimeout> = null;
+
+    ngAfterViewInit(): void {
+        this.observeHostResize();
+        this.cdr.detectChanges();
+    }
+
+    ngOnDestroy(): void {
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = null;
+    }
+
+    private observeHostResize() {
+        if (typeof ResizeObserver === 'undefined' || !ResizeObserver) {
+            return;
+        }
+
+        this.ngZone.runOutsideAngular(() => {
+            this.resizeObserver = new ResizeObserver(() => {
+                if (this.resizeTimer) {
+                    clearTimeout(this.resizeTimer);
+                }
+                this.onResize();
+            });
+            this.resizeObserver.observe(this.elementRef.nativeElement);
+        });
+    }
+
+    onResize(): void {
+        this.cdr.detectChanges();
+    }
+}

package/slider/src/slider.types.ts

@@ -0,0 +1,4 @@
+export enum Thumb {
+    START = 0,
+    END = 1
+}

package/switch/index.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { RdxSwitchInputDirective } from './src/switch-input.directive';
+import { RdxSwitchRootDirective } from './src/switch-root.directive';
+import { RdxSwitchThumbDirective } from './src/switch-thumb.directive';
+
+export * from './src/switch-input.directive';
+export * from './src/switch-root.directive';
+export * from './src/switch-thumb.directive';
+
+export type { SwitchProps } from './src/switch-root.directive';
+
+const switchImports = [
+    RdxSwitchRootDirective,
+    RdxSwitchInputDirective,
+    RdxSwitchThumbDirective
+];
+
+@NgModule({
+    imports: [...switchImports],
+    exports: [...switchImports]
+})
+export class RdxSwitchModule {}

package/switch/ng-package.json

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