@radix-ng/primitives 0.1.0 → 0.2.0

package/checkbox/src/checkbox.directive.ts

@@ -1,138 +0,0 @@
-import {
-    Directive,
-    EventEmitter,
-    HostListener,
-    Input,
-    Output,
-    booleanAttribute
-} from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { CheckboxToken } from './checkbox.token';
-
-@Directive({
-    selector: 'button[rdxCheckbox]',
-    standalone: true,
-    providers: [
-        { provide: CheckboxToken, useExisting: CheckboxDirective },
-        { provide: NG_VALUE_ACCESSOR, useExisting: CheckboxDirective, multi: true }
-    ],
-    host: {
-        type: 'button',
-        role: 'checkbox',
-        '[disabled]': 'disabled',
-        '[attr.aria-checked]': 'indeterminate ? "mixed" : checked',
-        '[attr.data-disabled]': 'disabled ? "" : null',
-        '[attr.data-state]': 'state'
-    }
-})
-export class CheckboxDirective implements ControlValueAccessor {
-    /**
-     * Defines whether the checkbox is checked.
-     */
-    @Input({ transform: booleanAttribute }) checked = false;
-
-    /**
-     * Defines whether the checkbox is indeterminate.
-     */
-    @Input({ transform: booleanAttribute })
-    indeterminate = false;
-
-    /**
-     * Defines whether the checkbox is disabled.
-     */
-    @Input({ transform: booleanAttribute }) disabled = false;
-
-    /**
-     * Event emitted when the checkbox checked state changes.
-     */
-    @Output() readonly checkedChange = new EventEmitter<boolean>();
-
-    /**
-     * Event emitted when the indeterminate state changes.
-     */
-    @Output() readonly indeterminateChange = new EventEmitter<boolean>();
-
-    /**
-     * Determine the state
-     */
-    get state(): 'checked' | 'unchecked' | 'indeterminate' {
-        if (this.indeterminate) {
-            return 'indeterminate';
-        }
-        return this.checked ? 'checked' : 'unchecked';
-    }
-
-    /**
-     * Store the callback function that should be called when the checkbox checked state changes.
-     * @internal
-     */
-    private onChange?: (checked: boolean) => void;
-
-    /**
-     * Store the callback function that should be called when the checkbox is blurred.
-     * @internal
-     */
-    private onTouched?: () => void;
-
-    @HostListener('keydown', ['$event'])
-    onKeydown(event: KeyboardEvent): void {
-        // According to WAI ARIA, Checkboxes don't activate on enter keypress
-        if (event.key === 'Enter') {
-            event.preventDefault();
-        }
-    }
-
-    @HostListener('click')
-    onClick(): void {
-        this.checked = this.indeterminate ? true : !this.checked;
-        this.checkedChange.emit(this.checked);
-        this.onChange?.(this.checked);
-
-        // if the checkbox was indeterminate, it isn't anymore
-        if (this.indeterminate) {
-            this.indeterminate = false;
-            this.indeterminateChange.emit(this.indeterminate);
-        }
-    }
-
-    @HostListener('blur')
-    onBlur(): void {
-        this.onTouched?.();
-    }
-
-    /**
-     * Sets the checked state of the checkbox.
-     * @param checked The checked state of the checkbox.
-     * @internal
-     */
-    writeValue(checked: boolean): void {
-        this.checked = checked;
-    }
-
-    /**
-     * Registers a callback function that should be called when the checkbox checked state changes.
-     * @param fn The callback function.
-     * @internal
-     */
-    registerOnChange(fn: (checked: boolean) => void): void {
-        this.onChange = fn;
-    }
-
-    /**
-     * Registers a callback function that should be called when the checkbox is blurred.
-     * @param fn The callback function.
-     * @internal
-     */
-    registerOnTouched(fn: () => void): void {
-        this.onTouched = fn;
-    }
-
-    /**
-     * Sets the disabled state of the checkbox.
-     * @param isDisabled The disabled state of the checkbox.
-     * @internal
-     */
-    setDisabledState(isDisabled: boolean): void {
-        this.disabled = isDisabled;
-    }
-}

package/checkbox/src/checkbox.token.ts

@@ -1,8 +0,0 @@
-import { InjectionToken, inject } from '@angular/core';
-import type { CheckboxDirective } from './checkbox.directive';
-
-export const CheckboxToken = new InjectionToken<CheckboxDirective>('CheckboxToken');
-
-export function injectCheckbox(): CheckboxDirective {
-    return inject(CheckboxToken);
-}

package/checkbox/stories/checkbox.component.ts

@@ -1,50 +0,0 @@
-import { Component } from '@angular/core';
-import { CheckboxDirective } from '../src/checkbox.directive';
-import { CheckboxIndicatorDirective } from '../src/checkbox-indicator.directive';
-import { NgIconComponent, provideIcons } from '@ng-icons/core';
-import { lucideCheck } from '@ng-icons/lucide';
-import { LabelDirective } from '../../label';
-import classNames from 'classnames';
-import { NgIf } from '@angular/common';
-
-@Component({
-    selector: 'rdx-checkbox',
-    styleUrls: ['style.css'],
-    template: `
-        <div class="radix-themes light-theme">
-            <label rdxLabel>
-                <button
-                    class="{{ getClassnames() }}"
-                    data-accent-color
-                    rdxCheckbox
-                    [(checked)]="checked"
-                >
-                    <ng-icon
-                        color="white"
-                        rdxCheckboxIndicator
-                        class="rt-BaseCheckboxIndicator rt-CheckboxIndicator"
-                        name="lucideCheck"
-                    ></ng-icon>
-                </button>
-                Check Item
-            </label>
-        </div>
-    `,
-    standalone: true,
-    imports: [NgIf, LabelDirective, CheckboxDirective, CheckboxIndicatorDirective, NgIconComponent],
-    providers: [provideIcons({ lucideCheck })]
-})
-export class CheckboxComponent {
-    checked = false;
-    isFormControl = false;
-
-    getClassnames(): string {
-        return classNames(
-            'rt-reset',
-            'rt-BaseCheckboxRoot',
-            'rt-CheckboxRoot',
-            'rt-r-size-2',
-            'rt-variant-classic'
-        );
-    }
-}

package/checkbox/stories/checkbox.stories.ts

@@ -1,29 +0,0 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-import { CommonModule } from '@angular/common';
-
-import { CheckboxComponent } from './checkbox.component';
-import { BADGE } from '../../.storybook/helpers/bages-config';
-
-export default {
-    component: CheckboxComponent,
-    title: 'Primitives/Checkbox',
-    parameters: {
-        badges: [BADGE.SOON]
-    },
-    decorators: [
-        moduleMetadata({
-            imports: [CheckboxComponent, CommonModule]
-        })
-    ]
-} as Meta<CheckboxComponent>;
-
-type Story = StoryObj<CheckboxComponent>;
-
-export const Default: Story = {
-    render: () => ({
-        template: `
-        <rdx-checkbox></rdx-checkbox>
-
-`
-    })
-};

package/checkbox/stories/style.css

@@ -1,265 +0,0 @@
-
-/*@import "@radix-ui/themes/tokens.css";*/
-
-@import "@radix-ui/themes/src/components/reset.css";
-
-
-:root, .radix-theme, .light-theme {
-    --cursor-checkbox: default;
-    --black-a1: color(display-p3 0 0 0 / 0.05);
-    --black-a2: color(display-p3 0 0 0 / 0.1);
-    --black-a3: color(display-p3 0 0 0 / 0.15);
-    --black-a4: color(display-p3 0 0 0 / 0.2);
-    --black-a5: color(display-p3 0 0 0 / 0.3);
-    --black-a6: color(display-p3 0 0 0 / 0.4);
-    --black-a7: color(display-p3 0 0 0 / 0.5);
-    --black-a8: color(display-p3 0 0 0 / 0.6);
-    --black-a9: color(display-p3 0 0 0 / 0.7);
-    --black-a10: color(display-p3 0 0 0 / 0.8);
-    --black-a11: color(display-p3 0 0 0 / 0.9);
-    --black-a12: color(display-p3 0 0 0 / 0.95);
-    --gray-1: color(display-p3 0.988 0.988 0.988);
-    --gray-2: color(display-p3 0.975 0.975 0.975);
-    --gray-3: color(display-p3 0.939 0.939 0.939);
-    --gray-4: color(display-p3 0.908 0.908 0.908);
-    --gray-5: color(display-p3 0.88 0.88 0.88);
-    --gray-6: color(display-p3 0.849 0.849 0.849);
-    --gray-7: color(display-p3 0.807 0.807 0.807);
-    --gray-8: color(display-p3 0.732 0.732 0.732);
-    --gray-9: color(display-p3 0.553 0.553 0.553);
-    --gray-10: color(display-p3 0.512 0.512 0.512);
-    --gray-11: color(display-p3 0.392 0.392 0.392);
-    --gray-12: color(display-p3 0.125 0.125 0.125);
-    --gray-a1: color(display-p3 0 0 0 / 0.012);
-    --gray-a2: color(display-p3 0 0 0 / 0.024);
-    --gray-a3: color(display-p3 0 0 0 / 0.063);
-    --gray-a4: color(display-p3 0 0 0 / 0.09);
-    --gray-a5: color(display-p3 0 0 0 / 0.122);
-    --gray-a6: color(display-p3 0 0 0 / 0.153);
-    --gray-a7: color(display-p3 0 0 0 / 0.192);
-    --gray-a8: color(display-p3 0 0 0 / 0.267);
-    --gray-a9: color(display-p3 0 0 0 / 0.447);
-    --gray-a10: color(display-p3 0 0 0 / 0.486);
-    --gray-a11: color(display-p3 0 0 0 / 0.608);
-    --gray-a12: color(display-p3 0 0 0 / 0.875);
-    --white-a3: color(display-p3 1 1 1/0.15);
-    --white-a4: color(display-p3 1 1 1/0.2);
-    --indigo-8: color(display-p3 0.569 0.639 0.916);
-    --indigo-9: color(display-p3 0.276 0.384 0.837);
-    --indigo-indicator: var(--indigo-9);
-    --accent-indicator: var(--indigo-indicator);
-    --accent-8: var(--indigo-8);
-    --focus-8: var(--accent-8);
-    --scaling: 1;
-    --space-4: calc(16px * var(--scaling));
-    --radius-factor: 1;
-    --radius-1: calc(3px * var(--scaling) * var(--radius-factor));
-    --color-surface: hsla(0, 0%, 100%, .85);
-    --shadow-1: inset 0 0 0 1px var(--gray-a5),inset 0 1.5px 2px 0 var(--gray-a2),inset 0 1.5px 2px 0 var(--black-a2);
-}
-
-/***************************************************************************************************
- *                                                                                                 *
- * SIZES                                                                                           *
- *                                                                                                 *
- ***************************************************************************************************/
-
-
-.rt-BaseCheckboxRoot {
-    &:where(.rt-r-size-1) {
-        --checkbox-size: calc(var(--space-4) * 0.875);
-        --checkbox-indicator-size: calc(9px * var(--scaling));
-        --checkbox-border-radius: calc(var(--radius-1) * 0.875);
-    }
-
-    &:where(.rt-r-size-2) {
-        --checkbox-size: var(--space-4);
-        --checkbox-indicator-size: 15px;
-        --checkbox-border-radius: var(--radius-1);
-    }
-
-    &:where(.rt-r-size-3) {
-        --checkbox-size: calc(var(--space-4) * 1.25);
-        --checkbox-indicator-size: calc(12px * var(--scaling));
-        --checkbox-border-radius: calc(var(--radius-1) * 1.25);
-    }
-}
-
-.rt-BaseCheckboxRoot {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    vertical-align: top;
-    flex-shrink: 0;
-    cursor: var(--cursor-checkbox);
-
-    /* Unless in a skeleton, align with text line height when possible and fall back to own height */
-    height: var(--skeleton-height, var(--line-height, var(--checkbox-size)));
-    --skeleton-height-override: var(--checkbox-size);
-
-    /* Set root radius when in a skeleton */
-    border-radius: var(--skeleton-radius);
-    --skeleton-radius-override: var(--checkbox-border-radius);
-
-    &::before {
-        content: '';
-        display: block;
-        height: var(--checkbox-size);
-        width: var(--checkbox-size);
-        border-radius: var(--checkbox-border-radius);
-    }
-}
-
-.rt-BaseCheckboxIndicator {
-    position: absolute;
-    width: var(--checkbox-indicator-size);
-    height: var(--checkbox-indicator-size);
-
-    /* Required for subpixel alignment in Safari */
-    transform: translate(-50%, -50%);
-    top: 50%;
-    left: 50%;
-}
-
-
-
-/***************************************************************************************************
- *                                                                                                 *
- * VARIANTS                                                                                        *
- *                                                                                                 *
- ***************************************************************************************************/
-
-/* surface */
-
-.rt-BaseCheckboxRoot:where(.rt-variant-surface) {
-    &:where([data-state='unchecked']) {
-        &::before {
-            background-color: var(--color-surface);
-            box-shadow: inset 0 0 0 1px var(--gray-a7);
-        }
-    }
-
-    &:where([data-state='checked']) {
-        &::before {
-            background-color: var(--accent-indicator);
-        }
-
-        & :where(.rt-BaseCheckboxIndicator) {
-            color: var(--accent-contrast);
-        }
-
-        &:where(.rt-high-contrast) {
-            &::before {
-                background-color: var(--accent-12);
-            }
-
-            & :where(.rt-BaseCheckboxIndicator) {
-                color: var(--accent-1);
-            }
-        }
-    }
-
-    &:where(:disabled) {
-        &::before {
-            box-shadow: inset 0 0 0 1px var(--gray-a6);
-            background-color: transparent;
-        }
-
-        & :where(.rt-BaseCheckboxIndicator) {
-            color: var(--gray-a8);
-        }
-    }
-}
-
-/* classic */
-
-.rt-BaseCheckboxRoot:where(.rt-variant-classic) {
-    &:where([data-state='unchecked']) {
-        &::before {
-            background-color: var(--color-surface);
-            box-shadow: inset 0 0 0 1px var(--gray-a3), var(--shadow-1);
-        }
-    }
-
-    &:where([data-state='checked']) {
-        &::before {
-            background-color: var(--accent-indicator);
-            background-image: linear-gradient(to bottom, var(--white-a3), transparent, var(--black-a1));
-            box-shadow: inset 0 0.5px 0.5px var(--white-a4), inset 0 -0.5px 0.5px var(--black-a4);
-        }
-
-        & :where(.rt-BaseCheckboxIndicator) {
-            color: var(--accent-contrast);
-        }
-
-        &:where(.rt-high-contrast) {
-            &::before {
-                background-color: var(--accent-12);
-            }
-
-            & :where(.rt-BaseCheckboxIndicator) {
-                color: var(--accent-1);
-            }
-        }
-    }
-
-    &:where(:disabled) {
-        &::before {
-            box-shadow: var(--shadow-1);
-            background-color: transparent;
-            background-image: none;
-        }
-
-        & :where(.rt-BaseCheckboxIndicator) {
-            color: var(--gray-a8);
-        }
-    }
-}
-
-/* soft */
-
-.rt-BaseCheckboxRoot:where(.rt-variant-soft) {
-    &::before {
-        background-color: var(--accent-a5);
-    }
-
-    &:where([data-state='checked']) {
-        & :where(.rt-BaseCheckboxIndicator) {
-            color: var(--accent-a11);
-        }
-
-        &:where(.rt-high-contrast) {
-            & :where(.rt-BaseCheckboxIndicator) {
-                color: var(--accent-12);
-            }
-        }
-    }
-
-    &:where(:disabled) {
-        &::before {
-            background-color: transparent;
-        }
-
-        & :where(.rt-BaseCheckboxIndicator) {
-            color: var(--gray-a8);
-        }
-    }
-}
-
-.rt-CheckboxRoot {
-    &:where(:focus-visible) {
-        &::before {
-            outline: 2px solid var(--focus-8);
-            outline-offset: 2px;
-        }
-    }
-
-    &:where(:disabled) {
-        cursor: var(--cursor-disabled);
-
-        &::before {
-            background-color: var(--gray-a3);
-        }
-    }
-}

package/jest.config.ts

@@ -1,22 +0,0 @@
-/* eslint-disable */
-export default {
-    displayName: 'primitives',
-    preset: '../../jest.preset.cjs',
-    setupFilesAfterEnv: ['<rootDir>/test-setup.ts'],
-    coverageDirectory: '../../coverage/packages/primitives',
-    transform: {
-        '^.+\\.(ts|mjs|js|html)$': [
-            'jest-preset-angular',
-            {
-                tsconfig: '<rootDir>/tsconfig.spec.json',
-                stringifyContentPathRegex: '\\.(html|svg)$'
-            }
-        ]
-    },
-    transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
-    snapshotSerializers: [
-        'jest-preset-angular/build/serializers/no-ng-attributes',
-        'jest-preset-angular/build/serializers/ng-snapshot',
-        'jest-preset-angular/build/serializers/html-comment'
-    ]
-};

package/label/ng-package.json

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

package/label/src/label.directive.ts

@@ -1,36 +0,0 @@
-import { Directive, ElementRef, HostListener, Input, Optional } from '@angular/core';
-
-@Directive({
-    selector: 'label[rdxLabel]',
-    standalone: true,
-    host: {
-        '[attr.for]': 'htmlFor ? htmlFor : null'
-    }
-})
-export class LabelDirective {
-    /**
-     * The id of the element the label is associated with.
-     * @default '-'
-     */
-    @Input() htmlFor = '';
-
-    constructor(@Optional() private el: ElementRef) {}
-
-    // prevent text selection when double-clicking label
-    // The main problem with double-clicks in a web app is that
-    // you will have to create special code to handle this on touch enabled devices.
-    @HostListener('mousedown', ['$event'])
-    onMouseDown(event: MouseEvent): void {
-        const target = event.target as HTMLElement;
-
-        // only prevent text selection if clicking inside the label itself
-        if (['BUTTON', 'INPUT', 'SELECT', 'TEXTAREA'].includes(target.tagName)) {
-            return;
-        }
-
-        // prevent text selection when double-clicking label
-        if (this.el.nativeElement.contains(target) && !event.defaultPrevented && event.detail > 1) {
-            event.preventDefault();
-        }
-    }
-}

package/label/stories/label.docs.mdx

@@ -1,40 +0,0 @@
-import { ArgTypes, Canvas, Meta } from '@storybook/addon-docs';
-import * as LabelDirectiveStories from "./label.stories";
-import { LabelDirective } from '../src/label.directive';
-
-<Meta
-    title="Primitives/Label"
-/>
-
-# Label
-#### Renders an accessible label associated with controls.
-
-<Canvas sourceState='hidden' of={LabelDirectiveStories.Default}></Canvas>
-
-## Features
-- ✅ Text selection is prevented when double-clicking label.
-
-## Import
-
-Get started with importing the directive:
-
-```typescript
-import { LabelDirective } from '@radix-ng/primitives/label';
-```
-
-## Examples
-
-```html
-<label rdxLabel htmlFor="uniqId">First name</label>
-<input type="text" class="Input" id="uniqId" />
-
-```
-## API Reference
-
-<ArgTypes exclude={['onMouseDown']} of={LabelDirective} />
-
-## Accessibility
-
-This component is based on the native `label` element, it will automatically apply the correct labelling
-when wrapping controls or using the `for` attribute. For your own custom controls
-to work correctly, ensure they use native elements such as `button` or `input` as a base.

package/label/stories/label.stories.ts

@@ -1,63 +0,0 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-import { LabelDirective } from '../src/label.directive';
-import { CommonModule } from '@angular/common';
-import { labelExclude } from '../../.docs/utils/storybook';
-
-export default {
-    component: LabelDirective,
-    title: 'Primitives/Label',
-    parameters: {
-        controls: {
-            exclude: labelExclude
-        }
-    },
-    decorators: [
-        moduleMetadata({
-            imports: [LabelDirective, CommonModule]
-        })
-    ]
-} as Meta<LabelDirective>;
-
-type Story = StoryObj<LabelDirective>;
-
-export const Default: Story = {
-    render: (args) => ({
-        props: {
-            ...args
-        },
-        template: `
-<style>
-input {
-  all: unset;
-}
-
-.Input {
-  width: 200px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 4px;
-  padding: 0 10px;
-  margin-left: 10px;
-  height: 35px;
-  font-size: 15px;
-  line-height: 1;
-  color: white;
-  background-color: color(display-p3 0 0 0/0.3);
-  box-shadow: 0 0 0 1px color(display-p3 0 0 0/0.7);
-}
-
-label {
-    color: white;
-    font-size: 15px;
-    line-height: 35px;
-    font-weight: 500;
-}
-</style>
-
-<label rdxLabel htmlFor="uniqId">First Name </label>
-<input type="text" class="Input" id="uniqId" />
-
-`
-    })
-};

package/ng-package.json

@@ -1,7 +0,0 @@
-{
-    "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-    "dest": "../../dist/primitives",
-    "lib": {
-        "entryFile": "index.ts"
-    }
-}

package/progress/ng-package.json

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

package/progress/src/progress-indicator.directive.ts

@@ -1,15 +0,0 @@
-import { Directive } from '@angular/core';
-import { injectProgress } from './progress.token';
-
-@Directive({
-    selector: '[rdxProgressIndicator]',
-    standalone: true,
-    host: {
-        '[attr.data-state]': 'progress.state',
-        '[attr.data-value]': 'progress.value',
-        '[attr.data-max]': 'progress.max'
-    }
-})
-export class ProgressIndicatorDirective {
-    protected readonly progress = injectProgress();
-}