@ojiepermana/angular 22.1.11 → 22.1.13

package/fesm2022/ojiepermana-angular-component-popover.mjs

@@ -1,7 +1,205 @@
-export * from '@ojiepermana/angular-component/popover';
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, Directive, InjectionToken, ViewContainerRef, ElementRef, DestroyRef, input, output, signal } from '@angular/core';
+import * as i1 from '@ojiepermana/angular/component/utils/scale';
+import { ComponentScaleDirective } from '@ojiepermana/angular/component/utils/scale';
+import { Overlay } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { UI_ID_GENERATOR } from '@ojiepermana/angular/component/utils/core';
+import { connectedPositionFor, oppositeSide, overlayDismissals } from '@ojiepermana/angular/component/utils/overlay';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+class PopoverContentDirective {
+    componentScale = inject(ComponentScaleDirective);
+    radius = this.componentScale.radius;
+    density = this.componentScale.density;
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PopoverContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: PopoverContentDirective, isStandalone: true, selector: "ng-template[PopoverContent]", exportAs: ["PopoverContent"], hostDirectives: [{ directive: i1.ComponentScaleDirective, inputs: ["radius", "radius", "density", "density"] }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PopoverContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[PopoverContent]',
+                    hostDirectives: [
+                        {
+                            directive: ComponentScaleDirective,
+                            inputs: ['radius', 'density'],
+                        },
+                    ],
+                    exportAs: 'PopoverContent',
+                    host: {},
+                }]
+        }] });
+
+const POPOVER_TRIGGER_DEFAULTS = new InjectionToken('POPOVER_TRIGGER_DEFAULTS');
+/**
+ * Where initial focus lands inside an opened pane. Deliberately the plain
+ * tabbable set rather than a CDK focus trap: the pane is a NON-modal dialog, so
+ * focus has to be able to walk straight out of it again.
+ */
+const PANE_FOCUSABLE_SELECTOR = [
+    'a[href]',
+    'button:not([disabled])',
+    'input:not([disabled])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    '[tabindex]:not([tabindex="-1"])',
+].join(',');
+class PopoverTriggerDirective {
+    overlay = inject(Overlay);
+    vcr = inject(ViewContainerRef);
+    el = inject(ElementRef);
+    destroyRef = inject(DestroyRef);
+    defaults = inject(POPOVER_TRIGGER_DEFAULTS, { optional: true });
+    idGenerator = inject(UI_ID_GENERATOR);
+    PopoverTrigger = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "PopoverTrigger" }] : /* istanbul ignore next */ []));
+    side = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+    align = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    sideOffset = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sideOffset" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    openedChange = output();
+    overlayRef = null;
+    isOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.destroyRef.onDestroy(() => this.close({ restoreFocus: false, emitOpenedChange: false }));
+    }
+    toggle() {
+        if (this.disabled())
+            return;
+        if (this.isOpen()) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    onKeyboardToggle(event) {
+        if (this.disabled() || this.usesNativeKeyboardActivation()) {
+            return;
+        }
+        event.preventDefault();
+        this.toggle();
+    }
+    open() {
+        if (this.isOpen() || this.disabled())
+            return;
+        const side = this.side() ?? this.defaults?.side?.() ?? 'bottom';
+        const align = this.align() ?? this.defaults?.align?.() ?? 'center';
+        const sideOffset = this.sideOffset() ?? this.defaults?.sideOffset?.() ?? 8;
+        const primary = connectedPositionFor(side, align, sideOffset);
+        const fallback = connectedPositionFor(oppositeSide(side), align, sideOffset);
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(this.el)
+            .withPositions([primary, fallback])
+            .withPush(true)
+            .withViewportMargin(8)
+            .withFlexibleDimensions(false);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            hasBackdrop: false,
+            panelClass: 'popover-panel',
+        });
+        const pane = this.overlayRef.overlayElement;
+        const portal = new TemplatePortal(this.PopoverTrigger().template, this.vcr);
+        this.overlayRef.attach(portal);
+        this.applyDialogSemantics(pane);
+        this.focusPane(pane);
+        overlayDismissals(this.overlayRef, this.el.nativeElement)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((dismissal) => {
+            // A pointer press outside is already handing focus to whatever was
+            // pressed; pulling it back to the trigger would steal it. Escape and
+            // detachment have no such destination, so they do restore.
+            this.close({ restoreFocus: !(dismissal instanceof MouseEvent) });
+        });
+        this.isOpen.set(true);
+        this.openedChange.emit(true);
+    }
+    close(options = {}) {
+        const { restoreFocus = true, emitOpenedChange = true } = options;
+        if (!this.isOpen())
+            return;
+        const overlayRef = this.overlayRef;
+        this.overlayRef = null;
+        this.isOpen.set(false);
+        overlayRef?.dispose();
+        if (emitOpenedChange) {
+            this.openedChange.emit(false);
+        }
+        if (restoreFocus) {
+            this.el.nativeElement.focus();
+        }
+    }
+    /**
+     * The pane opens with focus, because the trigger is the only way into it: a
+     * keyboard user who is left standing on the trigger can never reach the content
+     * at all (WCAG 2.4.3). A pane with nothing tabbable takes focus itself, so the
+     * content is at least announced and Escape still reaches the overlay.
+     */
+    focusPane(pane) {
+        const first = Array.from(pane.querySelectorAll(PANE_FOCUSABLE_SELECTOR)).find((element) => !element.hidden && !element.inert && element.getAttribute('aria-hidden') !== 'true');
+        if (first) {
+            first.focus();
+            return;
+        }
+        if (!pane.hasAttribute('tabindex')) {
+            pane.setAttribute('tabindex', '-1');
+        }
+        pane.focus();
+    }
+    /**
+     * The trigger advertises `aria-haspopup="dialog"`, so the opened pane must be
+     * a dialog: non-modal, labelled by its trigger so screen readers announce
+     * which control the content belongs to.
+     */
+    applyDialogSemantics(pane) {
+        const trigger = this.el.nativeElement;
+        if (!trigger.id) {
+            trigger.id = this.idGenerator.next('popover-trigger');
+        }
+        pane.setAttribute('role', 'dialog');
+        pane.setAttribute('aria-modal', 'false');
+        pane.setAttribute('aria-labelledby', trigger.id);
+    }
+    usesNativeKeyboardActivation() {
+        const host = this.el.nativeElement;
+        const tagName = host.tagName;
+        return (tagName === 'BUTTON' ||
+            tagName === 'INPUT' ||
+            tagName === 'SELECT' ||
+            tagName === 'TEXTAREA' ||
+            tagName === 'SUMMARY' ||
+            (tagName === 'A' && host.hasAttribute('href')));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PopoverTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: PopoverTriggerDirective, isStandalone: true, selector: "[PopoverTrigger]", inputs: { PopoverTrigger: { classPropertyName: "PopoverTrigger", publicName: "PopoverTrigger", isSignal: true, isRequired: true, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedChange: "openedChange" }, host: { listeners: { "click": "toggle()", "keydown.enter": "onKeyboardToggle($event)", "keydown.space": "onKeyboardToggle($event)", "keydown.escape": "close()" }, properties: { "attr.aria-expanded": "isOpen()", "attr.aria-haspopup": "\"dialog\"" } }, exportAs: ["PopoverTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PopoverTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[PopoverTrigger]',
+                    exportAs: 'PopoverTrigger',
+                    host: {
+                        '[attr.aria-expanded]': 'isOpen()',
+                        '[attr.aria-haspopup]': '"dialog"',
+                        '(click)': 'toggle()',
+                        '(keydown.enter)': 'onKeyboardToggle($event)',
+                        '(keydown.space)': 'onKeyboardToggle($event)',
+                        '(keydown.escape)': 'close()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { PopoverTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "PopoverTrigger", required: true }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }] } });
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+export { POPOVER_TRIGGER_DEFAULTS, PopoverContentDirective, PopoverTriggerDirective };

package/fesm2022/ojiepermana-angular-component-progress.mjs

@@ -1,7 +1,61 @@
-export * from '@ojiepermana/angular-component/progress';
+import * as i0 from '@angular/core';
+import { input, computed, Component } from '@angular/core';
+import { cn } from '@ojiepermana/angular/component/utils/core';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+class ProgressComponent {
+    value = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    max = input(100, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    indeterminate = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    ariaLabelledby = input(null, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    clamped = computed(() => {
+        const v = this.value() ?? 0;
+        return Math.max(0, Math.min(this.max(), v));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clamped" }] : /* istanbul ignore next */ []));
+    indicatorTransform = computed(() => {
+        if (this.indeterminate())
+            return 'translateX(-100%)';
+        const pct = (this.clamped() / this.max()) * 100;
+        return `translateX(-${100 - pct}%)`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indicatorTransform" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('relative h-2 w-full overflow-hidden rounded-full bg-secondary', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: ProgressComponent, isStandalone: true, selector: "ProgressBar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.role": "\"progressbar\"", "attr.aria-valuemin": "0", "attr.aria-valuemax": "max()", "attr.aria-valuenow": "indeterminate() ? null : clamped()", "attr.aria-label": "ariaLabel()", "attr.aria-labelledby": "ariaLabelledby()", "attr.data-state": "indeterminate() ? \"indeterminate\" : \"determinate\"" } }, ngImport: i0, template: `
+    <div
+      class="progress-indicator h-full w-full flex-1 bg-primary transition-transform"
+      [style.transform]="indicatorTransform()"
+    ></div>
+  `, isInline: true, styles: [":host{display:block}:host[data-state=indeterminate] .progress-indicator{animation:progress-indeterminate 1.5s cubic-bezier(.65,.815,.735,.395) infinite}@keyframes progress-indeterminate{0%{transform:translate(-100%)}to{transform:translate(100%)}}@media(prefers-reduced-motion:reduce){:host[data-state=indeterminate] .progress-indicator{animation:none}}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ProgressComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ProgressBar', host: {
+                        '[class]': 'classes()',
+                        '[attr.role]': '"progressbar"',
+                        '[attr.aria-valuemin]': '0',
+                        '[attr.aria-valuemax]': 'max()',
+                        '[attr.aria-valuenow]': 'indeterminate() ? null : clamped()',
+                        '[attr.aria-label]': 'ariaLabel()',
+                        '[attr.aria-labelledby]': 'ariaLabelledby()',
+                        '[attr.data-state]': 'indeterminate() ? "indeterminate" : "determinate"',
+                    }, template: `
+    <div
+      class="progress-indicator h-full w-full flex-1 bg-primary transition-transform"
+      [style.transform]="indicatorTransform()"
+    ></div>
+  `, styles: [":host{display:block}:host[data-state=indeterminate] .progress-indicator{animation:progress-indeterminate 1.5s cubic-bezier(.65,.815,.735,.395) infinite}@keyframes progress-indeterminate{0%{transform:translate(-100%)}to{transform:translate(100%)}}@media(prefers-reduced-motion:reduce){:host[data-state=indeterminate] .progress-indicator{animation:none}}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+export { ProgressComponent };

package/fesm2022/ojiepermana-angular-component-radio.mjs

@@ -1,7 +1,184 @@
-export * from '@ojiepermana/angular-component/radio';
+import * as i0 from '@angular/core';
+import { input, output, contentChildren, forwardRef, signal, computed, Component, inject, viewChild } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { injectUniqueId, cn } from '@ojiepermana/angular/component/utils/core';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+/**
+ * Radio group built on native `<input type="radio">` elements (shadcn
+ * pattern) — no Material dependency. Native radios with a shared `name`
+ * give arrow-key navigation and form semantics for free.
+ */
+class RadioGroupComponent {
+    name = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    orientation = input('vertical', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    ariaLabelledby = input(null, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
+    ariaDescribedby = input(null, { ...(ngDevMode ? { debugName: "ariaDescribedby" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
+    ariaInvalid = input(null, { ...(ngDevMode ? { debugName: "ariaInvalid" } : /* istanbul ignore next */ {}), alias: 'aria-invalid' });
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    valueChange = output();
+    generatedName = injectUniqueId('RadioGroup');
+    radios = contentChildren(forwardRef(() => RadioComponent), { ...(ngDevMode ? { debugName: "radios" } : /* istanbul ignore next */ {}), descendants: true });
+    value = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Shared native `name` so the browser groups the radios. */
+    resolvedName = computed(() => this.name() || this.generatedName, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedName" }] : /* istanbul ignore next */ []));
+    ariaInvalidAttr = computed(() => {
+        const ariaInvalid = this.ariaInvalid();
+        if (ariaInvalid === null) {
+            return null;
+        }
+        return ariaInvalid === false || ariaInvalid === 'false' ? 'false' : 'true';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaInvalidAttr" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('RadioGroup grid gap-2', this.orientation() === 'horizontal' ? 'grid-flow-col auto-cols-max' : '', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    onChange = () => { };
+    onTouched = () => { };
+    select(value) {
+        this.value.set(value);
+        this.onChange(value);
+        this.valueChange.emit(value);
+    }
+    markTouched() {
+        this.onTouched();
+    }
+    focus() {
+        const radios = this.radios();
+        const target = radios.find((radio) => radio.value() === this.value()) ?? radios[0];
+        target?.focus();
+    }
+    writeValue(v) {
+        this.value.set(v ?? null);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(d) {
+        this.disabled.set(d);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.4", type: RadioGroupComponent, isStandalone: true, selector: "RadioGroup", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, ariaInvalid: { classPropertyName: "ariaInvalid", publicName: "aria-invalid", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { attributes: { "role": "radiogroup" }, properties: { "class": "classes()", "attr.aria-label": "ariaLabel()", "attr.aria-labelledby": "ariaLabelledby()", "attr.aria-describedby": "ariaDescribedby()", "attr.aria-invalid": "ariaInvalidAttr()" } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RadioGroupComponent), multi: true },
+        ], queries: [{ propertyName: "radios", predicate: i0.forwardRef(() => RadioComponent), descendants: true, isSignal: true }], ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RadioGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'RadioGroup',
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RadioGroupComponent), multi: true },
+                    ],
+                    host: {
+                        role: 'radiogroup',
+                        '[class]': 'classes()',
+                        '[attr.aria-label]': 'ariaLabel()',
+                        '[attr.aria-labelledby]': 'ariaLabelledby()',
+                        '[attr.aria-describedby]': 'ariaDescribedby()',
+                        '[attr.aria-invalid]': 'ariaInvalidAttr()',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], ariaInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-invalid", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], radios: [{ type: i0.ContentChildren, args: [forwardRef(() => RadioComponent), { ...{ descendants: true }, isSignal: true }] }] } });
+class RadioComponent {
+    group = inject(RadioGroupComponent);
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    /** Accessible name for the radio input when no text is projected into `<Radio>`. */
+    ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    ariaLabelledby = input(null, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
+    selected = computed(() => this.group.value() === this.value(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this.group.disabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => cn('Radio inline-flex', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    labelClasses = computed(() => cn('inline-flex select-none items-center gap-2 text-sm font-medium leading-none', this.isDisabled() ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelClasses" }] : /* istanbul ignore next */ []));
+    circleClasses = computed(() => cn('inline-flex size-4 shrink-0 items-center justify-center rounded-full border border-input shadow-sm transition-colors', 'peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background', this.selected() ? 'border-primary' : ''), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "circleClasses" }] : /* istanbul ignore next */ []));
+    ref = viewChild.required('ref', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ref" }] : /* istanbul ignore next */ []));
+    handleChange() {
+        this.group.select(this.value());
+    }
+    handleBlur() {
+        this.group.markTouched();
+    }
+    focus() {
+        this.ref().nativeElement.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: RadioComponent, isStandalone: true, selector: "Radio", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, viewQueries: [{ propertyName: "ref", first: true, predicate: ["ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <label [class]="labelClasses()">
+      <input
+        #ref
+        type="radio"
+        class="peer sr-only"
+        [attr.name]="group.resolvedName()"
+        [attr.aria-label]="ariaLabel()"
+        [attr.aria-labelledby]="ariaLabelledby()"
+        [value]="value()"
+        [checked]="selected()"
+        [disabled]="isDisabled()"
+        (change)="handleChange()"
+        (blur)="handleBlur()"
+      />
+      <span aria-hidden="true" [class]="circleClasses()">
+        @if (selected()) {
+          <span class="size-2 rounded-full bg-primary"></span>
+        }
+      </span>
+      <ng-content />
+    </label>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RadioComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'Radio',
+                    host: { '[class]': 'hostClasses()' },
+                    template: `
+    <label [class]="labelClasses()">
+      <input
+        #ref
+        type="radio"
+        class="peer sr-only"
+        [attr.name]="group.resolvedName()"
+        [attr.aria-label]="ariaLabel()"
+        [attr.aria-labelledby]="ariaLabelledby()"
+        [value]="value()"
+        [checked]="selected()"
+        [disabled]="isDisabled()"
+        (change)="handleChange()"
+        (blur)="handleBlur()"
+      />
+      <span aria-hidden="true" [class]="circleClasses()">
+        @if (selected()) {
+          <span class="size-2 rounded-full bg-primary"></span>
+        }
+      </span>
+      <ng-content />
+    </label>
+  `,
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], ref: [{ type: i0.ViewChild, args: ['ref', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+export { RadioComponent, RadioGroupComponent };