@egose/shadcn-theme-ng-tw 0.0.28 → 0.2.0

package/radio-group/README.md

@@ -1,64 +1,365 @@
-# RadioGroup
+# Radio Group (`@egose/shadcn-theme-ng/radio-group`)
 
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.2.0.
+A shadcn/ui-style **Radio Group** for Angular — a set of mutually exclusive options where exactly one can be selected. This is the Angular equivalent of shadcn/ui `RadioGroup` / `RadioGroupItem`.
 
-## Code scaffolding
+The primitives come from **spartan-ng/brain** (`BrnRadioGroup`, `BrnRadio`, `BrnFieldControlDescribedBy`): keyboard navigation (arrow keys), roving tabindex, and form integration are handled by `BrnRadioGroup`/`BrnRadio`, while this package adds the shadcn look (grid layout, circular indicator, focus ring, error styling).
 
-Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+> **Ships as:** `@egose/shadcn-theme-ng/radio-group` and `@egose/shadcn-theme-ng-tw/radio-group` (the `tw:`-prefixed Tailwind variant — same API, class strings prefixed with `tw:`).
+> See the [package README](../../README.md) for installation, peer dependencies, and Tailwind setup. Do not publish this project directory independently.
+
+## Installation
 
 ```bash
-ng generate component component-name
+# Plain Tailwind (no prefix)
+npm install @egose/shadcn-theme-ng
+
+# Or the tw:-prefixed variant
+npm install @egose/shadcn-theme-ng-tw
 ```
 
-For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+Import from the subpath (not the package root):
 
-```bash
-ng generate --help
+```ts
+import { HlmRadioGroupImports } from '@egose/shadcn-theme-ng/radio-group';
+// tw variant:
+// import { HlmRadioGroupImports } from '@egose/shadcn-theme-ng-tw/radio-group';
 ```
 
-## Building
+Peer dependencies (see [package README](../../README.md) for versions): `@angular/core`, `@angular/common`, `@spartan-ng/brain`. `@angular/cdk` is required transitively by `HlmRadio` (boolean coercion).
 
-To build the library, run:
+## Imports
 
-```bash
-ng build radio-group
+Real exported symbols (from `src/public-api.ts`):
+
+| Symbol                 | Kind          | Description                                                       |
+| ---------------------- | ------------- | ----------------------------------------------------------------- |
+| `HlmRadioGroup`        | Directive     | Group container; forwards `BrnRadioGroup`                         |
+| `HlmRadio`             | Component     | Single radio item (`hlm-radio`), wraps `BrnRadio`                 |
+| `HlmRadioIndicator`    | Component     | Circular visual indicator dot                                     |
+| `HlmRadioGroupImports` | `const` array | `[HlmRadioGroup, HlmRadio, HlmRadioIndicator]` standalone imports |
+| `HlmRadioGroupModule`  | `NgModule`    | NgModule wrapper re-exporting the three above                     |
+
+Standalone usage:
+
+```ts
+import { Component } from '@angular/core';
+import { HlmRadioGroupImports } from '@egose/shadcn-theme-ng/radio-group';
+
+@Component({
+  selector: 'app-demo',
+  standalone: true,
+  imports: [HlmRadioGroupImports],
+  template: `...`,
+})
+export class DemoComponent {}
 ```
 
-This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+NgModule usage:
 
-### Publishing the Library
+```ts
+import { NgModule } from '@angular/core';
+import { HlmRadioGroupModule } from '@egose/shadcn-theme-ng/radio-group';
 
-Once the project is built, you can publish your library by following these steps:
+@NgModule({ imports: [HlmRadioGroupModule] })
+export class DemoModule {}
+```
+
+You can also import the pieces individually (`import { HlmRadioGroup, HlmRadio, HlmRadioIndicator } from '...'`).
 
-1. Navigate to the `dist` directory:
+## Anatomy / Structure
 
-   ```bash
-   cd dist/radio-group
-   ```
+```html
+<!-- Attribute form on a div -->
+<div hlmRadioGroup name="plan" [value]="plan()" (valueChange)="plan.set($event)">
+  <hlm-radio value="free" inputId="plan-free">
+    <hlm-radio-indicator />
+    Free
+  </hlm-radio>
 
-2. Run the `npm publish` command to publish your library to the npm registry:
-   ```bash
-   npm publish
-   ```
+  <hlm-radio value="pro" inputId="plan-pro">
+    <hlm-radio-indicator />
+    Pro
+  </hlm-radio>
+</div>
 
-## Running unit tests
+<!-- Element form also works -->
+<hlm-radio-group name="plan">
+  <hlm-radio value="free"><hlm-radio-indicator />Free</hlm-radio>
+</hlm-radio-group>
+```
 
-To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+Real selectors:
 
-```bash
-ng test
+| Selector                             | Class               | Notes                                                                                                                                                    |
+| ------------------------------------ | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `[hlmRadioGroup]`, `hlm-radio-group` | `HlmRadioGroup`     | Group host; `data-slot="radio-group"`                                                                                                                    |
+| `hlm-radio`                          | `HlmRadio<T>`       | Item host; `data-slot="radio-group-item"`; projects `[target],[indicator],hlm-radio-indicator` into the indicator slot, everything else as label content |
+| `hlm-radio-indicator`                | `HlmRadioIndicator` | Visual dot; `data-slot="radio-group-indicator"`                                                                                                          |
+
+## API reference
+
+### HlmRadioGroup (directive)
+
+Thin directive wrapper over `BrnRadioGroup` (plus `BrnFieldControlDescribedBy` for form-field `aria-describedby` wiring). Own inputs:
+
+| Input                 | Type         | Default | Description                                  |
+| --------------------- | ------------ | ------- | -------------------------------------------- |
+| `class` (`userClass`) | `ClassValue` | `''`    | Extra classes appended to `tw:grid tw:gap-3` |
+
+Forwarded `BrnRadioGroup` host-directive bindings:
+
+| Binding       | Kind   | Description                              |
+| ------------- | ------ | ---------------------------------------- |
+| `name`        | input  | Radio group name (native input grouping) |
+| `value`       | input  | Currently selected value                 |
+| `disabled`    | input  | Disables the whole group                 |
+| `required`    | input  | Marks the group as required              |
+| `valueChange` | output | Emits the newly selected value           |
+
+The host also reflects form state as attributes: `aria-invalid`/`data-invalid` when the bound control is invalid, plus `data-dirty` and `data-touched`.
+
+### HlmRadio\<T\> (component)
+
+| Input                                  | Type                  | Default      | Description                                                                                        |
+| -------------------------------------- | --------------------- | ------------ | -------------------------------------------------------------------------------------------------- |
+| `value`                                | `T`                   | **required** | The value this item represents                                                                     |
+| `inputId`                              | `string \| undefined` | `undefined`  | `id` placed on the underlying `brn-radio` element; also used to find an associated `<label [for]>` |
+| `aria-label` (`ariaLabel`)             | `string \| undefined` | `undefined`  | Accessible name when there is no visible label                                                     |
+| `aria-labelledby` (`ariaLabelledby`)   | `string \| undefined` | `undefined`  | Id(s) of labelling element(s)                                                                      |
+| `aria-describedby` (`ariaDescribedby`) | `string \| undefined` | `undefined`  | Id(s) of describing element(s)                                                                     |
+| `required`                             | `boolean`             | `false`      | Native required flag (boolean-coerced)                                                             |
+| `disabled`                             | `boolean`             | `false`      | Disables this item (boolean-coerced); mirrors `data-disabled` onto an associated `<label>`         |
+| `class` (`userClass`)                  | `ClassValue`          | `''`         | Extra classes                                                                                      |
+
+| Output   | Type                | Description                                    |
+| -------- | ------------------- | ---------------------------------------------- |
+| `change` | `BrnRadioChange<T>` | Emitted when this item's checked state changes |
+
+Label association detail: on init the component looks for `closest('label')`, falling back to `document.querySelector('label[for=inputId]')`, and mirrors `data-disabled="true"/"false"` onto that label so label styling follows the disabled state. IDs containing special characters (e.g. quotes/brackets) are matched safely via `htmlFor` comparison, not a CSS selector.
+
+### HlmRadioIndicator (component)
+
+No inputs/outputs. Renders the styled outer circle; the inner dot fills via `group-data-[checked=true]` when the parent `brn-radio` reports checked. Always place it inside `hlm-radio` (it matches the `hlm-radio-indicator` content slot).
+
+## Examples
+
+### 1. Basic usage
+
+```ts
+import { Component, signal } from '@angular/core';
+import { HlmRadioGroupImports } from '@egose/shadcn-theme-ng/radio-group';
+
+@Component({
+  selector: 'app-basic-radio',
+  standalone: true,
+  imports: [HlmRadioGroupImports],
+  template: `
+    <div hlmRadioGroup name="fruit" [value]="fruit()" (valueChange)="fruit.set($event)">
+      <hlm-radio value="apple" inputId="fruit-apple">
+        <hlm-radio-indicator />
+        Apple
+      </hlm-radio>
+      <hlm-radio value="banana" inputId="fruit-banana">
+        <hlm-radio-indicator />
+        Banana
+      </hlm-radio>
+      <hlm-radio value="orange" inputId="fruit-orange">
+        <hlm-radio-indicator />
+        Orange
+      </hlm-radio>
+    </div>
+    <p>Selected: {{ fruit() }}</p>
+  `,
+})
+export class BasicRadioComponent {
+  readonly fruit = signal('apple');
+}
 ```
 
-## Running end-to-end tests
+### 2. Element selector form + external labels
 
-For end-to-end (e2e) testing, run:
+`hlm-radio-group` works as an element, and labels can live outside the item via `for`/`inputId`:
 
-```bash
-ng e2e
+```ts
+import { Component, signal } from '@angular/core';
+import { HlmRadioGroupImports } from '@egose/shadcn-theme-ng/radio-group';
+
+@Component({
+  selector: 'app-labelled-radio',
+  standalone: true,
+  imports: [HlmRadioGroupImports],
+  template: `
+    <hlm-radio-group name="contact">
+      <label for="c-email">Email me</label>
+      <hlm-radio value="email" inputId="c-email"><hlm-radio-indicator /></hlm-radio>
+
+      <label for="c-sms">Text me</label>
+      <hlm-radio value="sms" inputId="c-sms"><hlm-radio-indicator /></hlm-radio>
+    </hlm-radio-group>
+  `,
+})
+export class LabelledRadioComponent {}
+```
+
+Wrapping the item in a `<label>` also works — the item finds it with `closest('label')`:
+
+```html
+<hlm-radio-group name="contact">
+  <label>
+    <hlm-radio value="email"><hlm-radio-indicator /></hlm-radio>
+    Email me
+  </label>
+</hlm-radio-group>
+```
+
+### 3. Reactive forms
+
+`BrnRadioGroup` is a `ControlValueAccessor`, so `formControlName`/`formControl` bind on the group host:
+
+```ts
+import { Component } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { HlmRadioGroupImports } from '@egose/shadcn-theme-ng/radio-group';
+
+@Component({
+  selector: 'app-reactive-radio',
+  standalone: true,
+  imports: [HlmRadioGroupImports, ReactiveFormsModule],
+  template: `
+    <form [formGroup]="form" (ngSubmit)="submit()">
+      <div hlmRadioGroup formControlName="plan">
+        <hlm-radio value="hobby"><hlm-radio-indicator />Hobby</hlm-radio>
+        <hlm-radio value="pro"><hlm-radio-indicator />Pro</hlm-radio>
+        <hlm-radio value="enterprise"><hlm-radio-indicator />Enterprise</hlm-radio>
+      </div>
+      @if (form.controls.plan.invalid && form.controls.plan.touched) {
+        <p class="tw:text-destructive tw:text-sm">Please pick a plan.</p>
+      }
+      <button type="submit">Continue</button>
+    </form>
+  `,
+})
+export class ReactiveRadioComponent {
+  readonly form = new FormGroup({
+    plan: new FormControl<string | null>(null, Validators.required),
+  });
+
+  submit(): void {
+    this.form.markAllAsTouched();
+    console.log(this.form.value);
+  }
+}
+```
+
+When the control is invalid + touched, the group automatically gets `data-invalid="true"` (and destructive text styling) via the forwarded control state — no manual class juggling needed.
+
+### 4. Disabled states (group vs item)
+
+```ts
+import { Component, signal } from '@angular/core';
+import { HlmRadioGroupImports } from '@egose/shadcn-theme-ng/radio-group';
+
+@Component({
+  selector: 'app-disabled-radio',
+  standalone: true,
+  imports: [HlmRadioGroupImports],
+  template: `
+    <!-- Whole group disabled -->
+    <div hlmRadioGroup name="a" value="one" disabled>
+      <hlm-radio value="one"><hlm-radio-indicator />One</hlm-radio>
+      <hlm-radio value="two"><hlm-radio-indicator />Two</hlm-radio>
+    </div>
+
+    <!-- Single item disabled; its <label> gets data-disabled="true" -->
+    <div hlmRadioGroup name="b" [value]="choice()" (valueChange)="choice.set($event)">
+      <label for="b-one">One (soon unavailable)</label>
+      <hlm-radio value="one" inputId="b-one" disabled><hlm-radio-indicator /></hlm-radio>
+      <label for="b-two">Two</label>
+      <hlm-radio value="two" inputId="b-two"><hlm-radio-indicator /></hlm-radio>
+    </div>
+  `,
+})
+export class DisabledRadioComponent {
+  readonly choice = signal('two');
+}
 ```
 
-Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+### 5. Per-item change events + typed values
+
+`HlmRadio` is generic — `value` can be any type, and `change` emits `BrnRadioChange<T>`:
+
+```ts
+import { Component, signal } from '@angular/core';
+import { HlmRadioGroupImports } from '@egose/shadcn-theme-ng/radio-group';
+import type { BrnRadioChange } from '@spartan-ng/brain/radio-group';
+
+interface Tier {
+  id: string;
+  price: number;
+}
+
+@Component({
+  selector: 'app-typed-radio',
+  standalone: true,
+  imports: [HlmRadioGroupImports],
+  template: `
+    <div hlmRadioGroup name="tier" (valueChange)="onGroupChange($event)">
+      @for (tier of tiers; track tier.id) {
+        <hlm-radio [value]="tier" (change)="onItemChange($event)">
+          <hlm-radio-indicator />
+          {{ tier.id }} — ${{ tier.price }}/mo
+        </hlm-radio>
+      }
+    </div>
+  `,
+})
+export class TypedRadioComponent {
+  readonly tiers: Tier[] = [
+    { id: 'starter', price: 0 },
+    { id: 'growth', price: 29 },
+  ];
+
+  onGroupChange(value: Tier): void {
+    console.log('group selected:', value.id);
+  }
+
+  onItemChange(event: BrnRadioChange<Tier>): void {
+    console.log('item checked:', event.value.id, event.checked);
+  }
+}
+```
+
+### 6. Custom indicator content (target slot)
+
+Anything projected with `[target]` or `[indicator]` goes into the indicator slot instead of the default label position:
+
+```html
+<div hlmRadioGroup name="layout">
+  <hlm-radio value="grid">
+    <span target class="tw:flex tw:items-center tw:gap-2">
+      <hlm-radio-indicator />
+      <strong>Grid</strong>
+    </span>
+    <span class="tw:text-muted-foreground tw:text-sm">Cards in a grid</span>
+  </hlm-radio>
+</div>
+```
+
+## Accessibility notes
+
+- The group uses the native `radiogroup` semantics from `BrnRadioGroup`, including arrow-key navigation and roving tabindex — keep all `hlm-radio` items inside one group container.
+- Always provide `name` so assistive tech (and native form serialization) treats the items as one group.
+- Prefer visible text content inside `hlm-radio`; use `aria-label`/`aria-labelledby` only when the item has no visible label.
+- Disabled items expose `data-disabled` (and the native disabled state on the inner input) and are skipped in keyboard navigation.
+- Invalid form state is announced via `aria-invalid="true"` on the group host.
+
+## Theming / CSS variables
+
+Styling is class-driven (no component-specific CSS variables). Override via the `class` input on any of the three pieces; the indicator's checked dot keys off `group-data-[checked=true]`, and the group invalid state off `data-[invalid=true]`.
 
-## Additional Resources
+## Related subpaths
 
-For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+- `@egose/shadcn-theme-ng/label` — labelling radio items and form rows
+- `@egose/shadcn-theme-ng/field` / `form-field` — form rows, descriptions, and error text wired via `BrnFieldControlDescribedBy`
+- `@egose/shadcn-theme-ng/checkbox` — multi-select counterpart
+- `@egose/shadcn-theme-ng/form-field-simple` — lightweight wrapper for reactive-form controls

package/radio-group/fesm2022/radio-group.mjs

@@ -24,7 +24,7 @@ class HlmRadio {
     _errorStateClass = computed(() => (this._groupSpartanInvalid() ? 'text-destructive' : ''), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_errorStateClass" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
-    _computedClass = computed(() => hlm('group relative flex items-center gap-x-3', 'data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50', this.userClass(), this._errorStateClass()), /* @ts-ignore */
+    _computedClass = computed(() => hlm('tw:group tw:relative tw:flex tw:items-center tw:gap-x-3', 'tw:data-[disabled=true]:cursor-not-allowed tw:data-[disabled=true]:opacity-50', this.userClass(), this._errorStateClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_computedClass" }] : /* istanbul ignore next */ []));
     /** Used to set the id on the underlying brn element. */
     inputId = input(undefined, /* @ts-ignore */
@@ -54,15 +54,18 @@ class HlmRadio {
             const isDisabled = this.disabled();
             if (!this._elementRef.nativeElement || !this._isBrowser)
                 return;
+            const inputId = this.inputId();
             const labelElement = this._elementRef.nativeElement.closest('label') ??
-                this._document.querySelector(`label[for="${this.inputId()}"]`);
+                (inputId
+                    ? Array.from(this._document.getElementsByTagName('label')).find((label) => label.htmlFor === inputId)
+                    : undefined);
             if (!labelElement)
                 return;
             this._renderer.setAttribute(labelElement, 'data-disabled', isDisabled ? 'true' : 'false');
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmRadio, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: HlmRadio, isStandalone: true, selector: "hlm-radio", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", 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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, host: { attributes: { "data-slot": "radio-group-item" }, properties: { "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null", "attr.data-disabled": "disabled() ? \"\" : null" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmRadio, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.3", type: HlmRadio, isStandalone: true, selector: "hlm-radio", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", 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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, host: { attributes: { "data-slot": "radio-group-item" }, properties: { "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null", "attr.data-disabled": "disabled() ? \"\" : null" } }, ngImport: i0, template: `
     <brn-radio
       [id]="inputId()"
       [class]="_computedClass()"
@@ -84,7 +87,7 @@ class HlmRadio {
     </brn-radio>
   `, isInline: true, dependencies: [{ kind: "component", type: BrnRadio, selector: "brn-radio", inputs: ["disabled", "id", "aria-label", "aria-labelledby", "aria-describedby", "value", "inputStyles", "required"], outputs: ["change"], exportAs: ["brnRadio"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmRadio, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmRadio, decorators: [{
             type: Component,
             args: [{
                     selector: 'hlm-radio',
@@ -133,12 +136,16 @@ class HlmRadioGroup {
     _errorState = computed(() => this._brnRadioGroup.controlState?.()?.spartanInvalid, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_errorState" }] : /* istanbul ignore next */ []));
     constructor() {
-        classes(() => ['grid gap-3', this.userClass(), this._errorState() ? 'data-[invalid=true]:text-destructive' : '']);
+        classes(() => [
+            'tw:grid tw:gap-3',
+            this.userClass(),
+            this._errorState() ? 'tw:data-[invalid=true]:text-destructive' : '',
+        ]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmRadioGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: HlmRadioGroup, isStandalone: true, selector: "[hlmRadioGroup],hlm-radio-group", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "radio-group" }, properties: { "attr.aria-invalid": "_ariaInvalid() ? \"true\" : null", "attr.data-invalid": "_ariaInvalid() ? \"true\" : null", "attr.data-dirty": "_dirty() ? \"true\" : null", "attr.data-touched": "_touched() ? \"true\" : null" } }, hostDirectives: [{ directive: i1.BrnRadioGroup, inputs: ["name", "name", "value", "value", "disabled", "disabled", "required", "required"], outputs: ["valueChange", "valueChange"] }, { directive: i2.BrnFieldControlDescribedBy }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmRadioGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: HlmRadioGroup, isStandalone: true, selector: "[hlmRadioGroup],hlm-radio-group", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "radio-group" }, properties: { "attr.aria-invalid": "_ariaInvalid() ? \"true\" : null", "attr.data-invalid": "_ariaInvalid() ? \"true\" : null", "attr.data-dirty": "_dirty() ? \"true\" : null", "attr.data-touched": "_touched() ? \"true\" : null" } }, hostDirectives: [{ directive: i1.BrnRadioGroup, inputs: ["name", "name", "value", "value", "disabled", "disabled", "required", "required"], outputs: ["valueChange", "valueChange"] }, { directive: i2.BrnFieldControlDescribedBy }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmRadioGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmRadioGroup, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmRadioGroup],hlm-radio-group',
@@ -162,12 +169,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 
 class HlmRadioIndicator {
     constructor() {
-        classes(() => 'border-input text-primary group-has-[:focus-visible]:border-ring group-has-[:focus-visible]:ring-ring/50 dark:bg-input/30 group-data=[disabled=true]:cursor-not-allowed group-data=[disabled=true]:opacity-50 relative flex aspect-square size-4 shrink-0 items-center justify-center rounded-full border shadow-xs transition-[color,box-shadow] outline-none group-has-[:focus-visible]:ring-[3px]');
+        classes(() => 'tw:border-input tw:text-primary tw:group-has-[:focus-visible]:border-ring tw:group-has-[:focus-visible]:ring-ring/50 tw:dark:bg-input/30 tw:group-data-[disabled=true]:cursor-not-allowed tw:group-data-[disabled=true]:opacity-50 tw:relative tw:flex tw:aspect-square tw:size-4 tw:shrink-0 tw:items-center tw:justify-center tw:rounded-full tw:border tw:shadow-xs tw:transition-[color,box-shadow] tw:outline-none tw:group-has-[:focus-visible]:ring-[3px]');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmRadioIndicator, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: HlmRadioIndicator, isStandalone: true, selector: "hlm-radio-indicator", host: { attributes: { "data-slot": "radio-group-indicator" } }, ngImport: i0, template: ` <div class="group-data-[checked=true]:bg-primary size-2 rounded-full bg-transparent"></div> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmRadioIndicator, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.3", type: HlmRadioIndicator, isStandalone: true, selector: "hlm-radio-indicator", host: { attributes: { "data-slot": "radio-group-indicator" } }, ngImport: i0, template: ` <div class="tw:group-data-[checked=true]:bg-primary tw:size-2 tw:rounded-full tw:bg-transparent"></div> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmRadioIndicator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmRadioIndicator, decorators: [{
             type: Component,
             args: [{
                     selector: 'hlm-radio-indicator',
@@ -175,7 +182,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                     host: {
                         'data-slot': 'radio-group-indicator',
                     },
-                    template: ` <div class="group-data-[checked=true]:bg-primary size-2 rounded-full bg-transparent"></div> `,
+                    template: ` <div class="tw:group-data-[checked=true]:bg-primary tw:size-2 tw:rounded-full tw:bg-transparent"></div> `,
                 }]
         }], ctorParameters: () => [] });
 
@@ -184,11 +191,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 const HlmRadioGroupImports = [HlmRadioGroup, HlmRadio, HlmRadioIndicator];
 class HlmRadioGroupModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmRadioGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: HlmRadioGroupModule, imports: [HlmRadioGroup, HlmRadio, HlmRadioIndicator], exports: [HlmRadioGroup, HlmRadio, HlmRadioIndicator] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmRadioGroupModule, imports: [HlmRadio] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmRadioGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.3", ngImport: i0, type: HlmRadioGroupModule, imports: [HlmRadioGroup, HlmRadio, HlmRadioIndicator], exports: [HlmRadioGroup, HlmRadio, HlmRadioIndicator] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmRadioGroupModule, imports: [HlmRadio] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmRadioGroupModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmRadioGroupModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...HlmRadioGroupImports],
@@ -201,4 +208,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 
 export { HlmRadio, HlmRadioGroup, HlmRadioGroupImports, HlmRadioGroupModule, HlmRadioIndicator };
-//# sourceMappingURL=radio-group.mjs.map
+