@radix-ng/primitives 0.12.1 → 0.13.0

package/checkbox/stories/checkbox-group.component.ts

@@ -1,87 +0,0 @@
-import { JsonPipe } from '@angular/common';
-import { Component } from '@angular/core';
-import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { RdxLabelDirective } from '@radix-ng/primitives/label';
-import { LucideAngularModule } from 'lucide-angular';
-import { RdxCheckboxIndicatorDirective } from '../src/checkbox-indicator.directive';
-import { RdxCheckboxInputDirective } from '../src/checkbox-input.directive';
-import { RdxCheckboxDirective } from '../src/checkbox.directive';
-
-@Component({
-    selector: 'checkbox-groups-forms-example',
-    template: `
-        <section [formGroup]="personality">
-            <p>
-                <label class="Label" rdxLabel htmlFor="r1">
-                    <button class="CheckboxRoot" CheckboxRoot formControlName="fun">
-                        <lucide-angular class="CheckboxIndicator" CheckboxIndicator size="16" name="check" />
-                        <input class="Input cdk-visually-hidden" id="r1" CheckboxInput />
-                    </button>
-                    Fun
-                </label>
-            </p>
-            <p>
-                <label class="Label" rdxLabel htmlFor="r2">
-                    <button
-                        class="CheckboxRoot rt-BaseCheckboxRoot rt-CheckboxRoot"
-                        CheckboxRoot
-                        formControlName="serious"
-                    >
-                        <lucide-angular class="CheckboxIndicator" CheckboxIndicator size="16" name="check" />
-                        <input class="Input cdk-visually-hidden" id="r2" CheckboxInput />
-                    </button>
-                    Serious
-                </label>
-            </p>
-            <p>
-                <label class="Label" rdxLabel htmlFor="r3">
-                    <button class="CheckboxRoot" CheckboxRoot formControlName="smart">
-                        <lucide-angular class="CheckboxIndicator" CheckboxIndicator size="16" name="check" />
-                        <input class="Input cdk-visually-hidden" id="r3" CheckboxInput />
-                    </button>
-                    Smart
-                </label>
-            </p>
-        </section>
-        <section class="Label" [formGroup]="personality">
-            <h4>You chose:&nbsp;</h4>
-            {{ personality.value | json }}
-        </section>
-
-        <button
-            class="rt-reset rt-BaseButton rt-r-size-2 rt-variant-solid rt-Button"
-            (click)="toggleDisable()"
-            data-accent-color="cyan"
-        >
-            Toggle disabled state
-        </button>
-    `,
-    styleUrl: 'checkbox-group.styles.scss',
-    standalone: true,
-    imports: [
-        FormsModule,
-        ReactiveFormsModule,
-        JsonPipe,
-        RdxLabelDirective,
-        RdxCheckboxDirective,
-        RdxCheckboxIndicatorDirective,
-        LucideAngularModule,
-        RdxCheckboxInputDirective
-    ]
-})
-export class CheckboxReactiveFormsExampleComponent {
-    personality = this.formBuilder.group({
-        fun: false,
-        serious: false,
-        smart: false
-    });
-
-    constructor(protected formBuilder: FormBuilder) {}
-
-    toggleDisable() {
-        const checkbox = this.personality.get('serious');
-        if (checkbox != null) {
-            checkbox.disabled ? checkbox.enable() : checkbox.disable();
-        }
-    }
-}

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

@@ -1,49 +0,0 @@
-.Input {
-    transform: translateX(-100%);
-    position: absolute;
-    pointer-events: none;
-    opacity: 0;
-    margin: 0;
-    width: 25px;
-    height: 25px;
-}
-
-.CheckboxRoot {
-    all: unset;
-    background-color: white;
-    width: 25px;
-    height: 25px;
-    margin-right: 15px;
-    border-radius: 4px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-shadow: 0 2px 10px var(--black-a7);
-
-    &:where(:disabled) {
-        cursor: var(--cursor-disabled);
-        background-color: var(--gray-5);
-    }
-}
-
-.CheckboxRoot:focus {
-    box-shadow: 0 0 0 2px black;
-}
-
-.CheckboxIndicator {
-    align-items: center;
-    display: flex;
-    color: var(--violet-11);
-}
-
-.CheckboxIndicator[data-state='unchecked'] {
-    display: none;
-}
-
-.Label {
-    color: white;
-    font-size: 15px;
-    line-height: 1;
-    display: flex;
-    align-items: center;
-}

package/checkbox/stories/checkbox-indeterminate.component.ts

@@ -1,52 +0,0 @@
-import { Component, model } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { RdxLabelDirective } from '@radix-ng/primitives/label';
-import { LucideAngularModule } from 'lucide-angular';
-import { RdxCheckboxIndicatorDirective } from '../src/checkbox-indicator.directive';
-import { RdxCheckboxInputDirective } from '../src/checkbox-input.directive';
-import { RdxCheckboxDirective } from '../src/checkbox.directive';
-
-@Component({
-    selector: 'checkbox-indeterminate-example',
-    template: `
-        <label class="Label" rdxLabel htmlFor="r1">
-            <button class="CheckboxRoot" [(indeterminate)]="indeterminate" [(ngModel)]="checked" CheckboxRoot>
-                <lucide-angular class="CheckboxIndicator" [name]="iconName()" CheckboxIndicator size="16" />
-                <input class="Input" id="r1" CheckboxInput />
-            </button>
-            I'm a checkbox
-        </label>
-
-        <p>
-            <button
-                class="rt-reset rt-BaseButton rt-r-size-2 rt-variant-solid rt-Button"
-                (click)="toggleIndeterminate()"
-                data-accent-color="cyan"
-            >
-                Toggle Indeterminate state
-            </button>
-        </p>
-    `,
-    styleUrl: 'checkbox-group.styles.scss',
-    standalone: true,
-    imports: [
-        FormsModule,
-        RdxLabelDirective,
-        RdxCheckboxDirective,
-        RdxCheckboxIndicatorDirective,
-        LucideAngularModule,
-        RdxCheckboxInputDirective
-    ]
-})
-export class CheckboxIndeterminateComponent {
-    readonly indeterminate = model(false);
-    readonly checked = model(false);
-
-    readonly iconName = model('check');
-
-    toggleIndeterminate() {
-        this.indeterminate.set(!this.indeterminate());
-
-        this.iconName() === 'check' ? this.iconName.set('minus') : this.iconName.set('check');
-    }
-}

package/checkbox/stories/checkbox.docs.mdx

@@ -1,58 +0,0 @@
-import { ArgTypes, Canvas, Markdown, Meta } from '@storybook/blocks';
-import { RdxCheckboxDirective } from '../src/checkbox.directive';
-import * as CheckboxDirectiveStories from './checkbox.stories';
-
-<Meta title="Primitives/Checkbox" />
-
-# Checkbox
-
-#### A control that allows the user to toggle between checked and not checked.
-
-<Canvas sourceState="hidden" of={CheckboxDirectiveStories.Default} />
-
-## Features
-
-- ✅ Full keyboard navigation.
-- ✅ Supports indeterminate \_state.
-- ✅ Can be controlled or uncontrolled.
-
-## Import
-
-Get started with importing the directives:
-
-```typescript
-import { RdxCheckboxDirective, RdxCheckboxIndicatorDirective } from '@radix-ng/primitives/checkbox';
-```
-
-## Anatomy
-
-```html
-<button CheckboxRoot [(checked)]="checked">
-  <lucide-angular CheckboxIndicator name="check"></lucide-angular>
-  <input class="cdk-visually-hidden" CheckboxInput type="checkbox" />
-</button>
-```
-
-## API Reference
-
-### RdxCheckboxDirective
-
-<ArgTypes of={RdxCheckboxDirective} />
-
-### RdxCheckboxIndicatorDirective
-
-### RdxRadioIndicatorDirective
-
-## Accessibility
-
-Adheres to the [tri-\_state Checkbox WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox).
-
-### Keyboard Interactions
-
-<Markdown>
-  {`
-  | Key | Description |
-  | ----------- | --------- |
-  | Space       | Checks/unchecks the checkbox.        |
-  `}
-</Markdown>

package/checkbox/stories/checkbox.stories.ts

@@ -1,105 +0,0 @@
-import { componentWrapperDecorator, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-import { Check, LucideAngularModule, Minus } from 'lucide-angular';
-import { RdxLabelDirective } from '../../label';
-import { RdxCheckboxIndicatorDirective } from '../src/checkbox-indicator.directive';
-import { RdxCheckboxInputDirective } from '../src/checkbox-input.directive';
-import { RdxCheckboxDirective } from '../src/checkbox.directive';
-import { CheckboxReactiveFormsExampleComponent } from './checkbox-group.component';
-import { CheckboxIndeterminateComponent } from './checkbox-indeterminate.component';
-
-export default {
-    title: 'Primitives/Checkbox',
-    decorators: [
-        moduleMetadata({
-            imports: [
-                RdxLabelDirective,
-                RdxCheckboxDirective,
-                RdxCheckboxIndicatorDirective,
-                RdxCheckboxInputDirective,
-                LucideAngularModule,
-                LucideAngularModule.pick({ Check, Minus }),
-                CheckboxReactiveFormsExampleComponent,
-                CheckboxIndeterminateComponent
-            ]
-        }),
-        componentWrapperDecorator(
-            (story) =>
-                `<div class="radix-themes light light-theme radix-themes-default-fonts"
-                      data-accent-color="indigo"
-                      data-gray-color="slate"
-                      data-radius="medium"
-                      data-scaling="100%">${story}</div>`
-        )
-    ]
-} as Meta;
-
-type Story = StoryObj;
-
-export const Default: Story = {
-    render: () => ({
-        template: `
-<form>
-    <div style="display: flex; align-items: center;">
-        <button CheckboxRoot class="CheckboxRoot" id="r1" [(checked)]="checked">
-            <lucide-angular CheckboxIndicator class="CheckboxIndicator" size="16" name="check"></lucide-angular>
-            <input CheckboxInput type="checkbox" class="cdk-visually-hidden"/>
-        </button>
-        <label rdxLabel htmlFor="r1" class="Label">Check Item</label>
-    </div>
-</form>
-
-<style>
-button {
-    all: unset;
-}
-
-.CheckboxRoot {
-    background-color: white;
-    width: 25px;
-    height: 25px;
-    border-radius: 4px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-shadow: 0 2px 10px var(--black-a7);
-}
-.CheckboxRoot:hover {
-    background-color: var(--violet-3);
-}
-.CheckboxRoot:focus {
-    box-shadow: 0 0 0 2px black;
-}
-
-.CheckboxIndicator {
-    align-items: center;
-    display: flex;
-    color: var(--violet-11);
-}
-
-.CheckboxIndicator[data-state='unchecked'] {
-    display: none;
-}
-
-.Label {
-    color: white;
-    padding-left: 15px;
-    font-size: 15px;
-    line-height: 1;
-}
-</style>
-`
-    })
-};
-
-export const CheckboxGroup: Story = {
-    name: 'With Reactive forms',
-    render: () => ({
-        template: `<checkbox-groups-forms-example></checkbox-groups-forms-example>`
-    })
-};
-
-export const indeterminate: Story = {
-    render: () => ({
-        template: `<checkbox-indeterminate-example></checkbox-indeterminate-example>`
-    })
-};

package/collapsible/__tests__/collapsible-content.directive.spec.ts

@@ -1,30 +0,0 @@
-import { Component } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { RdxCollapsibleContentDirective } from '../src/collapsible-content.directive';
-import { RdxCollapsibleRootDirective } from '../src/collapsible-root.directive';
-
-@Component({
-    selector: 'rdx-collapsible-mock-trigger',
-    standalone: true,
-    imports: [RdxCollapsibleRootDirective, RdxCollapsibleContentDirective],
-    template: `
-        <div CollapsibleRoot>
-            <div CollapsibleContent>Content</div>
-        </div>
-    `
-})
-class RdxCollapsibleMockComponent {}
-
-describe('RdxCollapsibleContentDirective', () => {
-    let component: RdxCollapsibleMockComponent;
-    let fixture: ComponentFixture<RdxCollapsibleMockComponent>;
-
-    beforeEach(() => {
-        fixture = TestBed.createComponent(RdxCollapsibleMockComponent);
-        component = fixture.componentInstance;
-    });
-
-    it('should create an instance', () => {
-        expect(component).toBeTruthy();
-    });
-});

package/collapsible/__tests__/collapsible-root.directive.spec.ts

@@ -1,27 +0,0 @@
-import { Component } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { RdxCollapsibleRootDirective } from '../src/collapsible-root.directive';
-
-@Component({
-    selector: 'rdx-collapsible-mock-trigger',
-    standalone: true,
-    imports: [RdxCollapsibleRootDirective],
-    template: `
-        <div CollapsibleRoot></div>
-    `
-})
-class RdxCollapsibleMockComponent {}
-
-describe('RdxCollapsibleRootDirective', () => {
-    let component: RdxCollapsibleMockComponent;
-    let fixture: ComponentFixture<RdxCollapsibleMockComponent>;
-
-    beforeEach(() => {
-        fixture = TestBed.createComponent(RdxCollapsibleMockComponent);
-        component = fixture.componentInstance;
-    });
-
-    it('should create an instance', () => {
-        expect(component).toBeTruthy();
-    });
-});

package/collapsible/__tests__/collapsible-trigger.directive.spec.ts

@@ -1,30 +0,0 @@
-import { Component } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { RdxCollapsibleRootDirective } from '../src/collapsible-root.directive';
-import { RdxCollapsibleTriggerDirective } from '../src/collapsible-trigger.directive';
-
-@Component({
-    selector: 'rdx-collapsible-mock-trigger',
-    standalone: true,
-    imports: [RdxCollapsibleRootDirective, RdxCollapsibleTriggerDirective],
-    template: `
-        <div CollapsibleRoot>
-            <button CollapsibleTrigger>Trigger</button>
-        </div>
-    `
-})
-class RdxCollapsibleMockComponent {}
-
-describe('RdxCollapsibleTriggerDirective', () => {
-    let component: RdxCollapsibleMockComponent;
-    let fixture: ComponentFixture<RdxCollapsibleMockComponent>;
-
-    beforeEach(() => {
-        fixture = TestBed.createComponent(RdxCollapsibleMockComponent);
-        component = fixture.componentInstance;
-    });
-
-    it('should create an instance', () => {
-        expect(component).toBeTruthy();
-    });
-});

package/collapsible/ng-package.json

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

package/collapsible/src/collapsible-content.directive.ts

@@ -1,34 +0,0 @@
-import { Directive, ElementRef, inject } from '@angular/core';
-import { RdxCollapsibleContentToken } from './collapsible-content.token';
-import { RdxCollapsibleRootDirective } from './collapsible-root.directive';
-
-@Directive({
-    selector: '[rdxCollapsibleContent]',
-    standalone: true,
-    providers: [
-        {
-            provide: RdxCollapsibleContentToken,
-            useExisting: RdxCollapsibleContentDirective
-        }
-    ],
-    host: {
-        '[attr.data-state]': 'collapsible.getState()',
-        '[attr.data-disabled]': 'getDisabled()'
-    }
-})
-export class RdxCollapsibleContentDirective {
-    /**
-     * @ignore
-     */
-    protected readonly collapsible = inject(RdxCollapsibleRootDirective);
-
-    /**
-     * Reference to CollapsibleContent host element
-     * @ignore
-     */
-    elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
-
-    getDisabled(): string | undefined {
-        return this.collapsible.disabled ? 'disabled' : undefined;
-    }
-}

package/collapsible/src/collapsible-content.token.ts

@@ -1,6 +0,0 @@
-import { InjectionToken } from '@angular/core';
-import { RdxCollapsibleContentDirective } from './collapsible-content.directive';
-
-export const RdxCollapsibleContentToken = new InjectionToken<RdxCollapsibleContentDirective>(
-    'RdxCollapsibleContentToken'
-);

package/collapsible/src/collapsible-root.directive.ts

@@ -1,120 +0,0 @@
-import { contentChild, Directive, EventEmitter, inject, InjectionToken, Input, Output } from '@angular/core';
-import { asyncScheduler } from 'rxjs';
-import { RdxCollapsibleContentToken } from './collapsible-content.token';
-
-const RdxCollapsibleRootToken = new InjectionToken<RdxCollapsibleRootDirective>('RdxCollapsibleRootToken');
-
-export function injectCollapsible(): RdxCollapsibleRootDirective {
-    return inject(RdxCollapsibleRootDirective);
-}
-
-export type RdxCollapsibleState = 'open' | 'closed';
-
-@Directive({
-    selector: '[rdxCollapsibleRoot]',
-    standalone: true,
-    exportAs: 'collapsibleRoot',
-    providers: [{ provide: RdxCollapsibleRootToken, useExisting: RdxCollapsibleRootDirective }],
-    host: {
-        '[attr.data-state]': 'getState()',
-        '[attr.data-disabled]': 'disabled ? "" : undefined'
-    }
-})
-export class RdxCollapsibleRootDirective {
-    /**
-     * Reference to RdxCollapsibleContent directive
-     * @private
-     * @ignore
-     */
-    private readonly contentDirective = contentChild.required(RdxCollapsibleContentToken);
-
-    /**
-     * Stores collapsible state
-     * @private
-     * @ignore
-     */
-    private _open = false;
-
-    /**
-     * Determines whether a directive is available for interaction.
-     * When true, prevents the user from interacting with the collapsible.
-     */
-    @Input() disabled = false;
-
-    /**
-     * The controlled open state of the collapsible.
-     * Sets the state of the directive. `true` - expanded, `false` - collapsed
-     * @param {boolean} value
-     */
-    @Input() set open(value: boolean) {
-        if (value !== this._open) {
-            this.onOpenChange.emit(value);
-        }
-
-        this._open = value;
-        this.setPresence();
-    }
-
-    /**
-     * Emitted with new value when directive state changed.
-     * Event handler called when the open state of the collapsible changes.
-     */
-    @Output() onOpenChange = new EventEmitter<boolean>();
-
-    /**
-     * Allows to change directive state
-     * @param {boolean | undefined} value
-     */
-    setOpen(value?: boolean) {
-        if (this.disabled) {
-            return;
-        }
-
-        if (value === undefined) {
-            this.open = !this._open;
-        } else {
-            this.open = value;
-        }
-
-        this.setPresence();
-    }
-
-    /**
-     * Returns directive state (open | closed)
-     */
-    getState(): RdxCollapsibleState {
-        return this._open ? 'open' : 'closed';
-    }
-
-    /**
-     * Returns current directive state
-     */
-    isOpen(): boolean {
-        return this._open;
-    }
-
-    /**
-     * Controls visibility of content
-     * @private
-     * @ignore
-     */
-    private setPresence(): void {
-        if (!this.contentDirective) {
-            return;
-        }
-
-        this.contentDirective().elementRef.nativeElement.setAttribute('data-state', this.getState());
-
-        if (this.isOpen()) {
-            this.contentDirective().elementRef.nativeElement.removeAttribute('hidden');
-        } else {
-            asyncScheduler.schedule(() => {
-                const animations = this.contentDirective().elementRef.nativeElement.getAnimations();
-
-                if (animations === undefined || animations.length === 0) {
-                    this.contentDirective().elementRef.nativeElement.setAttribute('hidden', '');
-                }
-            });
-        }
-    }
-}

package/collapsible/src/collapsible-trigger.directive.ts

@@ -1,44 +0,0 @@
-import { Directive } from '@angular/core';
-import { injectCollapsible, RdxCollapsibleState } from './collapsible-root.directive';
-
-@Directive({
-    selector: '[rdxCollapsibleTrigger]',
-    standalone: true,
-    host: {
-        '(click)': 'onOpenToggle()',
-        '[attr.data-state]': 'getState()',
-        '[attr.aria-expanded]': 'getState() === "open" ? "true" : "false"',
-        '[disabled]': 'getDisabled()'
-    }
-})
-export class RdxCollapsibleTriggerDirective {
-    /**
-     * Reference to CollapsibleRoot
-     * @private
-     * @ignore
-     */
-    private readonly collapsible = injectCollapsible();
-
-    /**
-     * Called on trigger clicked
-     */
-    onOpenToggle(): void {
-        this.collapsible.setOpen();
-    }
-
-    /**
-     * Returns current directive state (open | closed)
-     * @ignore
-     */
-    getState(): RdxCollapsibleState {
-        return this.collapsible.getState();
-    }
-
-    /**
-     * Returns current trigger state
-     * @ignore
-     */
-    getDisabled(): string | undefined {
-        return this.collapsible.disabled ? 'disabled' : undefined;
-    }
-}