@radix-ng/primitives 0.12.1 → 0.13.0

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

@@ -1,70 +0,0 @@
-/* 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

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

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

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

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

package/separator/src/separator.directive.ts

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

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

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

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

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

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

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

package/switch/index.ts

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

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