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

package/native-select/fesm2022/native-select.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { forwardRef, inject, input, computed, booleanAttribute, linkedSignal, output, ChangeDetectionStrategy, Component, Directive, NgModule } from '@angular/core';
+import { forwardRef, inject, input, computed, booleanAttribute, signal, linkedSignal, output, ChangeDetectionStrategy, Component, Directive, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideChevronDown } from '@ng-icons/lucide';
@@ -17,9 +17,15 @@ class HlmNativeSelect {
     static _id = 0;
     selectId = input(`hlm-native-select-${HlmNativeSelect._id++}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectId" }] : /* istanbul ignore next */ []));
+    /** Native `name` attribute forwarded to the inner `<select>`. */
+    name = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /** ID of the element describing the select (error/hint) for assistive tech. */
+    ariaDescribedby = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaDescribedby" }] : /* istanbul ignore next */ []));
     selectClass = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectClass" }] : /* istanbul ignore next */ []));
-    _computedSelectClass = computed(() => hlm('tw:border-input tw:placeholder:text-muted-foreground tw:selection:bg-primary tw:selection:text-primary-foreground tw:dark:bg-input/30 tw:dark:hover:bg-input/50 tw:focus-visible:border-ring tw:focus-visible:ring-ring/50 tw:data-[matches-spartan-invalid=true]:ring-destructive/20 tw:dark:data-[matches-spartan-invalid=true]:ring-destructive/40 tw:data-[matches-spartan-invalid=true]:border-destructive tw:dark:data-[matches-spartan-invalid=true]:border-destructive/50 tw:h-9 tw:w-full tw:min-w-0 tw:appearance-none tw:rounded-md tw:border tw:bg-transparent tw:py-1 tw:ps-2.5 tw:pe-8 tw:text-sm tw:shadow-xs tw:transition-[color,box-shadow] tw:select-none tw:focus-visible:ring-3 tw:data-[matches-spartan-invalid=true]:ring-3 tw:data-[size=sm]:h-8 tw:outline-none tw:disabled:pointer-events-none tw:disabled:cursor-not-allowed', this.selectClass()), /* @ts-ignore */
+    _computedSelectClass = computed(() => hlm('tw:border-input tw:placeholder:text-muted-foreground tw:selection:bg-primary tw:selection:text-primary-foreground tw:dark:bg-input/30 tw:dark:hover:bg-input/50 tw:focus-visible:border-ring tw:focus-visible:ring-ring/50 tw:data-[matches-spartan-invalid=true]:ring-destructive/20 tw:dark:data-[matches-spartan-invalid=true]:ring-destructive/40 tw:data-[matches-spartan-invalid=true]:border-destructive tw:dark:data-[matches-spartan-invalid=true]:border-destructive/50 tw:h-9 tw:w-full tw:min-w-0 tw:appearance-none tw:rounded-md tw:border tw:bg-transparent tw:py-1 tw:ps-2.5 tw:pe-8 tw:text-sm tw:text-foreground tw:shadow-xs tw:transition-[color,box-shadow] tw:select-none tw:focus-visible:ring-3 tw:data-[matches-spartan-invalid=true]:ring-3 tw:data-[size=sm]:h-8 tw:outline-none tw:disabled:pointer-events-none tw:disabled:cursor-not-allowed tw:[color-scheme:light] tw:dark:[color-scheme:dark]', this.selectClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_computedSelectClass" }] : /* istanbul ignore next */ []));
     selectIconClass = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectIconClass" }] : /* istanbul ignore next */ []));
@@ -28,7 +34,9 @@ class HlmNativeSelect {
     size = input('default', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    _disabled = linkedSignal(this.disabled, /* @ts-ignore */
+    _formDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []));
+    _disabled = computed(() => this.disabled() || this._formDisabled(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
     /** Whether to force the input into an invalid state. */
     forceInvalid = input(false, { ...(ngDevMode ? { debugName: "forceInvalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -73,10 +81,10 @@ class HlmNativeSelect {
         this._onTouched = fn;
     }
     setDisabledState(isDisabled) {
-        this._disabled.set(isDisabled);
+        this._formDisabled.set(isDisabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmNativeSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.3", type: HlmNativeSelect, isStandalone: true, selector: "hlm-native-select", inputs: { selectId: { classPropertyName: "selectId", publicName: "selectId", isSignal: true, isRequired: false, transformFunction: null }, selectClass: { classPropertyName: "selectClass", publicName: "selectClass", isSignal: true, isRequired: false, transformFunction: null }, selectIconClass: { classPropertyName: "selectIconClass", publicName: "selectIconClass", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, forceInvalid: { classPropertyName: "forceInvalid", publicName: "forceInvalid", isSignal: true, isRequired: false, transformFunction: null }, ariaInvalidOverride: { classPropertyName: "ariaInvalidOverride", publicName: "aria-invalid", isSignal: true, isRequired: false, transformFunction: null }, valueInput: { classPropertyName: "valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { attributes: { "data-slot": "native-select-wrapper" }, properties: { "attr.data-size": "size()" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.3", type: HlmNativeSelect, isStandalone: true, selector: "hlm-native-select", inputs: { selectId: { classPropertyName: "selectId", publicName: "selectId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, selectClass: { classPropertyName: "selectClass", publicName: "selectClass", isSignal: true, isRequired: false, transformFunction: null }, selectIconClass: { classPropertyName: "selectIconClass", publicName: "selectIconClass", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, forceInvalid: { classPropertyName: "forceInvalid", publicName: "forceInvalid", isSignal: true, isRequired: false, transformFunction: null }, ariaInvalidOverride: { classPropertyName: "ariaInvalidOverride", publicName: "aria-invalid", isSignal: true, isRequired: false, transformFunction: null }, valueInput: { classPropertyName: "valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { attributes: { "data-slot": "native-select-wrapper" }, properties: { "attr.data-size": "size()" } }, providers: [
             HLM_NATIVE_SELECT_VALUE_ACCESSOR,
             provideIcons({ lucideChevronDown }),
             provideBrnLabelable(HlmNativeSelect),
@@ -84,6 +92,8 @@ class HlmNativeSelect {
     <select
       data-slot="native-select"
       [id]="selectId()"
+      [attr.name]="name()"
+      [attr.aria-describedby]="ariaDescribedby()"
       [class]="_computedSelectClass()"
       [attr.data-size]="size()"
       [attr.aria-invalid]="_ariaInvalid() ? 'true' : null"
@@ -127,6 +137,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
     <select
       data-slot="native-select"
       [id]="selectId()"
+      [attr.name]="name()"
+      [attr.aria-describedby]="ariaDescribedby()"
       [class]="_computedSelectClass()"
       [attr.data-size]="size()"
       [attr.aria-invalid]="_ariaInvalid() ? 'true' : null"
@@ -150,7 +162,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
     />
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { selectId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectId", required: false }] }], selectClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectClass", required: false }] }], selectIconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectIconClass", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], forceInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceInvalid", required: false }] }], ariaInvalidOverride: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-invalid", required: false }] }], valueInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { selectId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectId", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }], selectClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectClass", required: false }] }], selectIconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectIconClass", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], forceInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceInvalid", required: false }] }], ariaInvalidOverride: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-invalid", required: false }] }], valueInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
 class HlmNativeSelectOptGroup {
     constructor() {

package/native-select/types/native-select.d.ts

@@ -14,13 +14,18 @@ declare class HlmNativeSelect implements ControlValueAccessor {
     private readonly _fieldControl;
     private static _id;
     readonly selectId: _angular_core.InputSignal<string>;
+    /** Native `name` attribute forwarded to the inner `<select>`. */
+    readonly name: _angular_core.InputSignal<string | undefined>;
+    /** ID of the element describing the select (error/hint) for assistive tech. */
+    readonly ariaDescribedby: _angular_core.InputSignal<string | null>;
     readonly selectClass: _angular_core.InputSignal<ClassValue>;
     protected readonly _computedSelectClass: _angular_core.Signal<string>;
     readonly selectIconClass: _angular_core.InputSignal<ClassValue>;
     protected readonly _computedSelectIconClass: _angular_core.Signal<string>;
     readonly size: _angular_core.InputSignal<"sm" | "default">;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
-    protected readonly _disabled: _angular_core.WritableSignal<boolean>;
+    private readonly _formDisabled;
+    protected readonly _disabled: _angular_core.Signal<boolean>;
     /** Whether to force the input into an invalid state. */
     readonly forceInvalid: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
     /** Manual override for aria-invalid. When not set, auto-detects from the parent autocomplete error state. */
@@ -45,7 +50,7 @@ declare class HlmNativeSelect implements ControlValueAccessor {
     registerOnTouched(fn: TouchFn): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<HlmNativeSelect, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HlmNativeSelect, "hlm-native-select", never, { "selectId": { "alias": "selectId"; "required": false; "isSignal": true; }; "selectClass": { "alias": "selectClass"; "required": false; "isSignal": true; }; "selectIconClass": { "alias": "selectIconClass"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "forceInvalid": { "alias": "forceInvalid"; "required": false; "isSignal": true; }; "ariaInvalidOverride": { "alias": "aria-invalid"; "required": false; "isSignal": true; }; "valueInput": { "alias": "value"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, ["*"], true, [{ directive: typeof i1.BrnFieldControl; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HlmNativeSelect, "hlm-native-select", never, { "selectId": { "alias": "selectId"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "ariaDescribedby": { "alias": "ariaDescribedby"; "required": false; "isSignal": true; }; "selectClass": { "alias": "selectClass"; "required": false; "isSignal": true; }; "selectIconClass": { "alias": "selectIconClass"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "forceInvalid": { "alias": "forceInvalid"; "required": false; "isSignal": true; }; "ariaInvalidOverride": { "alias": "aria-invalid"; "required": false; "isSignal": true; }; "valueInput": { "alias": "value"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, ["*"], true, [{ directive: typeof i1.BrnFieldControl; inputs: {}; outputs: {}; }]>;
 }
 
 declare class HlmNativeSelectOptGroup {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@egose/shadcn-theme-ng-tw",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Angular shadcn UI theme",
   "author": "Junmin Ahn",
   "bundles": [
@@ -150,14 +150,30 @@
       "types": "./field/types/field.d.ts",
       "default": "./field/fesm2022/field.mjs"
     },
+    "./form-autocomplete": {
+      "types": "./form-autocomplete/types/form-autocomplete.d.ts",
+      "default": "./form-autocomplete/fesm2022/form-autocomplete.mjs"
+    },
     "./form-checkbox": {
       "types": "./form-checkbox/types/form-checkbox.d.ts",
       "default": "./form-checkbox/fesm2022/form-checkbox.mjs"
     },
+    "./form-combobox": {
+      "types": "./form-combobox/types/form-combobox.d.ts",
+      "default": "./form-combobox/fesm2022/form-combobox.mjs"
+    },
     "./form-date-picker": {
       "types": "./form-date-picker/types/form-date-picker.d.ts",
       "default": "./form-date-picker/fesm2022/form-date-picker.mjs"
     },
+    "./form-date-picker-multi": {
+      "types": "./form-date-picker-multi/types/form-date-picker-multi.d.ts",
+      "default": "./form-date-picker-multi/fesm2022/form-date-picker-multi.mjs"
+    },
+    "./form-date-range-picker": {
+      "types": "./form-date-range-picker/types/form-date-range-picker.d.ts",
+      "default": "./form-date-range-picker/fesm2022/form-date-range-picker.mjs"
+    },
     "./form-field": {
       "types": "./form-field/types/form-field.d.ts",
       "default": "./form-field/fesm2022/form-field.mjs"
@@ -166,6 +182,26 @@
       "types": "./form-field-simple/types/form-field-simple.d.ts",
       "default": "./form-field-simple/fesm2022/form-field-simple.mjs"
     },
+    "./form-input-otp": {
+      "types": "./form-input-otp/types/form-input-otp.d.ts",
+      "default": "./form-input-otp/fesm2022/form-input-otp.mjs"
+    },
+    "./form-month-year-picker": {
+      "types": "./form-month-year-picker/types/form-month-year-picker.d.ts",
+      "default": "./form-month-year-picker/fesm2022/form-month-year-picker.mjs"
+    },
+    "./form-native-select": {
+      "types": "./form-native-select/types/form-native-select.d.ts",
+      "default": "./form-native-select/fesm2022/form-native-select.mjs"
+    },
+    "./form-phone-input": {
+      "types": "./form-phone-input/types/form-phone-input.d.ts",
+      "default": "./form-phone-input/fesm2022/form-phone-input.mjs"
+    },
+    "./form-radio-group": {
+      "types": "./form-radio-group/types/form-radio-group.d.ts",
+      "default": "./form-radio-group/fesm2022/form-radio-group.mjs"
+    },
     "./form-searchable-multiselect": {
       "types": "./form-searchable-multiselect/types/form-searchable-multiselect.d.ts",
       "default": "./form-searchable-multiselect/fesm2022/form-searchable-multiselect.mjs"
@@ -174,6 +210,14 @@
       "types": "./form-select/types/form-select.d.ts",
       "default": "./form-select/fesm2022/form-select.mjs"
     },
+    "./form-slider": {
+      "types": "./form-slider/types/form-slider.d.ts",
+      "default": "./form-slider/fesm2022/form-slider.mjs"
+    },
+    "./form-switch": {
+      "types": "./form-switch/types/form-switch.d.ts",
+      "default": "./form-switch/fesm2022/form-switch.mjs"
+    },
     "./form-text-input": {
       "types": "./form-text-input/types/form-text-input.d.ts",
       "default": "./form-text-input/fesm2022/form-text-input.mjs"
@@ -182,6 +226,14 @@
       "types": "./form-textarea/types/form-textarea.d.ts",
       "default": "./form-textarea/fesm2022/form-textarea.mjs"
     },
+    "./form-toggle": {
+      "types": "./form-toggle/types/form-toggle.d.ts",
+      "default": "./form-toggle/fesm2022/form-toggle.mjs"
+    },
+    "./form-toggle-group": {
+      "types": "./form-toggle-group/types/form-toggle-group.d.ts",
+      "default": "./form-toggle-group/fesm2022/form-toggle-group.mjs"
+    },
     "./hover-card": {
       "types": "./hover-card/types/hover-card.d.ts",
       "default": "./hover-card/fesm2022/hover-card.mjs"
@@ -238,6 +290,10 @@
       "types": "./pagination/types/pagination.d.ts",
       "default": "./pagination/fesm2022/pagination.mjs"
     },
+    "./phone-input": {
+      "types": "./phone-input/types/phone-input.d.ts",
+      "default": "./phone-input/fesm2022/phone-input.mjs"
+    },
     "./popover": {
       "types": "./popover/types/popover.d.ts",
       "default": "./popover/fesm2022/popover.mjs"

package/phone-input/README.md

@@ -0,0 +1,114 @@
+# Phone Input (`@egose/shadcn-theme-ng/phone-input`)
+
+A masked phone-number input. The form model holds raw digits (`"4155552671"`); the visible text is formatted (`"(415) 555-2671"`). Caret position is preserved across mask characters while typing or deleting — no DOM-selector lookups, no manual control subscriptions.
+
+> **Ships as:** `@egose/shadcn-theme-ng/phone-input` and `@egose/shadcn-theme-ng-tw/phone-input`
+> (the `tw:`-prefixed Tailwind variant). Both expose the identical TypeScript surface; only the
+> emitted Tailwind class strings differ. See the [package README](../../README.md) for install
+> steps, peer dependencies, and Tailwind setup. Do not publish this project directory independently.
+
+## Installation
+
+```bash
+# Plain Tailwind (no prefix)
+npm install @egose/shadcn-theme-ng
+
+# tw:-prefixed Tailwind variant
+npm install @egose/shadcn-theme-ng-tw
+```
+
+## Imports
+
+```ts
+import { HlmPhoneInput, formatNanpPhoneNumber, type PhoneNumberFormatter } from '@egose/shadcn-theme-ng/phone-input';
+// tw variant: replace with '@egose/shadcn-theme-ng-tw/phone-input'
+```
+
+`HlmPhoneInput` implements `ControlValueAccessor`: bind it with `formControlName`, `formControl`, or `ngModel`. Prefer `EgFormPhoneInput` (`@egose/shadcn-theme-ng/form-phone-input`) for the label/error/hint wrapper.
+
+## API reference
+
+### `HlmPhoneInput` — `hlm-phone-input`
+
+| Input               | Type                         | Default                 | Description                                        |
+| ------------------- | ---------------------------- | ----------------------- | -------------------------------------------------- |
+| `inputId`           | `string`                     | `hlm-phone-input-<n>`   | Native input id.                                   |
+| `name`              | `string \| undefined`        | —                       | Native `name` forwarded to the inner `<input>`.    |
+| `ariaLabel`         | `string \| undefined`        | —                       | Accessible label.                                  |
+| `ariaDescribedby`   | `string \| null`             | `null`                  | ID of the describing element.                      |
+| `placeholder`       | `string`                     | `''`                    | Input placeholder.                                 |
+| `autocomplete`      | `string`                     | `'tel'`                 | Native autocomplete token.                         |
+| `readonly`          | `boolean`                    | `false`                 | Native `readonly` state.                           |
+| `disabled`          | `boolean`                    | `false`                 | Interaction lock (form control stays enabled).     |
+| `forceInvalid`      | `boolean`                    | `false`                 | Forces invalid styling.                            |
+| `maxDigits`         | `number`                     | `10`                    | Maximum digit count kept in the model.             |
+| `modelFormat`       | `'digits' \| 'formatted'`    | `'digits'`              | Model shape: raw digits or formatted display text. |
+| `formatPhoneNumber` | `(digits: string) => string` | `formatNanpPhoneNumber` | Display formatter; receives raw digits.            |
+| `class`             | `ClassValue`                 | `''`                    | Extra classes on the inner `<input>`.              |
+| `inputClass`        | `ClassValue`                 | `''`                    | Extra classes on the inner `<input>`.              |
+
+Model values may be `string | null | undefined`; non-digit characters are stripped defensively on write. An empty model renders as empty text (no dangling mask characters) and emits `null`. With `modelFormat: 'formatted'` the model holds display text instead of digits — useful when a backend expects the masked value; validators then apply to the formatted string.
+
+### `formatNanpPhoneNumber(digits)`
+
+North-American numbering plan formatter: `4` → `(4`, `4155` → `(415) 5`, `4155552671` → `(415) 555-2671`, truncated to 10 digits. Pass a custom `PhoneNumberFormatter` for other plans (e.g. chunk-and-join national formats) together with a matching `maxDigits`.
+
+## Examples
+
+### 1. Standalone with formControl
+
+```ts
+import { Component, inject } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { HlmPhoneInput } from '@egose/shadcn-theme-ng/phone-input';
+
+@Component({
+  selector: 'app-callback',
+  standalone: true,
+  imports: [ReactiveFormsModule, HlmPhoneInput],
+  template: `
+    <form [formGroup]="form">
+      <label for="callback-phone">Callback number</label>
+      <hlm-phone-input formControlName="phone" inputId="callback-phone" />
+    </form>
+    <p>Digits: {{ form.value.phone ?? '—' }}</p>
+  `,
+})
+export class CallbackComponent {
+  private readonly fb = inject(FormBuilder);
+  readonly form = this.fb.group({ phone: ['', [Validators.required, Validators.minLength(10)]] });
+}
+```
+
+### 2. Custom format (UK-style 5+6 grouping)
+
+```ts
+@Component({
+  selector: 'app-uk-phone',
+  standalone: true,
+  imports: [ReactiveFormsModule, HlmPhoneInput],
+  template: ` <hlm-phone-input [formControl]="control" [formatPhoneNumber]="ukFormat" [maxDigits]="11" /> `,
+})
+export class UkPhoneComponent {
+  readonly control = new FormControl<string | null>(null);
+  readonly ukFormat = (digits: string) => {
+    const d = digits.replace(/\D/g, '').slice(0, 11);
+    if (d.length <= 5) return d;
+    return `${d.slice(0, 5)} ${d.slice(5)}`;
+  };
+}
+```
+
+## Accessibility notes
+
+- Wire a `<label for>` to `inputId`; pass `ariaLabel`/`ariaDescribedby` when composing manually (the `eg-form-phone-input` wrapper does this automatically).
+- Keep `autocomplete="tel"` (the default) so password managers and mobile keyboards offer phone autofill.
+
+## Theming / CSS variables
+
+No component-specific CSS variables; the inner input carries the shared `HlmInput` base. Append utilities via `class` / `inputClass`.
+
+## Related subpaths
+
+- `@egose/shadcn-theme-ng/form-phone-input` — `eg-form-phone-input` label/error/hint wrapper.
+- `@egose/shadcn-theme-ng/input` — `hlmInput` directive styling the inner input.

package/phone-input/fesm2022/phone-input.mjs

@@ -0,0 +1,191 @@
+import * as i0 from '@angular/core';
+import { forwardRef, input, booleanAttribute, computed, signal, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i1 from '@spartan-ng/brain/field';
+import { BrnFieldControl } from '@spartan-ng/brain/field';
+import { HlmInput } from '@egose/shadcn-theme-ng-tw/input';
+import { hlm } from '@egose/shadcn-theme-ng-tw/utils';
+
+const HLM_PHONE_INPUT_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => HlmPhoneInput),
+    multi: true,
+};
+function formatNanpPhoneNumber(digits) {
+    const d = digits.replace(/\D/g, '').slice(0, 10);
+    if (d.length === 0)
+        return '';
+    if (d.length <= 3)
+        return `(${d}`;
+    if (d.length <= 6)
+        return `(${d.slice(0, 3)}) ${d.slice(3)}`;
+    return `(${d.slice(0, 3)}) ${d.slice(3, 6)}-${d.slice(6)}`;
+}
+/**
+ * A masked phone input. The form model holds raw digits (`"4155552671"`);
+ * the visible text is formatted (`"(415) 555-2671"`). Caret position is
+ * preserved across mask characters while typing or deleting.
+ */
+class HlmPhoneInput {
+    static _id = 0;
+    inputId = input(`hlm-phone-input-${HlmPhoneInput._id++}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
+    name = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    ariaDescribedby = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaDescribedby" }] : /* istanbul ignore next */ []));
+    placeholder = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    autocomplete = input('tel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    forceInvalid = input(false, { ...(ngDevMode ? { debugName: "forceInvalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Maximum digit count kept in the model. Defaults to 10 (NANP). */
+    maxDigits = input(10, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxDigits" }] : /* istanbul ignore next */ []));
+    /**
+     * Shape of the form model: raw digits (`"4155552671"`, the default —
+     * validator- and storage-friendly) or formatted display text
+     * (`"(415) 555-2671"`).
+     */
+    modelFormat = input('digits', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "modelFormat" }] : /* istanbul ignore next */ []));
+    /** Display formatter. Receives raw digits, returns display text. */
+    formatPhoneNumber = input(formatNanpPhoneNumber, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formatPhoneNumber" }] : /* istanbul ignore next */ []));
+    /** Extra classes merged onto the inner `<input>` (over the `HlmInput` base). */
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    inputClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputClass" }] : /* istanbul ignore next */ []));
+    $inputClass = computed(() => hlm(this.userClass(), this.inputClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$inputClass" }] : /* istanbul ignore next */ []));
+    _formDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []));
+    disabledState = computed(() => this.disabled() || this._formDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
+    /** Raw digits held in the form model. */
+    _digits = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_digits" }] : /* istanbul ignore next */ []));
+    /** Formatted text shown in the input. */
+    _display = computed(() => this.formatPhoneNumber()(this._digits()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_display" }] : /* istanbul ignore next */ []));
+    _onChange;
+    _onTouched;
+    _emitModel(digits) {
+        if (digits === this._digits())
+            return;
+        this._digits.set(digits);
+        if (digits === '') {
+            this._onChange?.(null);
+        }
+        else if (this.modelFormat() === 'formatted') {
+            this._onChange?.(this.formatPhoneNumber()(digits));
+        }
+        else {
+            this._onChange?.(digits);
+        }
+    }
+    _handleInput(event) {
+        const element = event.target;
+        const caret = element.selectionStart ?? element.value.length;
+        const digitsBeforeCaret = element.value.slice(0, caret).replace(/\D/g, '').length;
+        const digits = element.value.replace(/\D/g, '').slice(0, Math.max(0, this.maxDigits()));
+        const formatted = this.formatPhoneNumber()(digits);
+        const target = Math.min(digitsBeforeCaret, digits.length);
+        let position = 0;
+        let seen = 0;
+        while (position < formatted.length && seen < target) {
+            if (/\d/.test(formatted[position]))
+                seen++;
+            position++;
+        }
+        element.value = formatted;
+        element.setSelectionRange(position, position);
+        this._emitModel(digits);
+    }
+    _handleBlur() {
+        this._onTouched?.();
+    }
+    /** CONTROL VALUE ACCESSOR */
+    writeValue(value) {
+        this._digits.set(String(value ?? '')
+            .replace(/\D/g, '')
+            .slice(0, Math.max(0, this.maxDigits())));
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._formDisabled.set(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmPhoneInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.3", type: HlmPhoneInput, isStandalone: true, selector: "hlm-phone-input", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, forceInvalid: { classPropertyName: "forceInvalid", publicName: "forceInvalid", isSignal: true, isRequired: false, transformFunction: null }, maxDigits: { classPropertyName: "maxDigits", publicName: "maxDigits", isSignal: true, isRequired: false, transformFunction: null }, modelFormat: { classPropertyName: "modelFormat", publicName: "modelFormat", isSignal: true, isRequired: false, transformFunction: null }, formatPhoneNumber: { classPropertyName: "formatPhoneNumber", publicName: "formatPhoneNumber", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-disabled": "disabledState() ? \"\" : null" }, classAttribute: "tw:block tw:w-full tw:min-w-0" }, providers: [HLM_PHONE_INPUT_VALUE_ACCESSOR], hostDirectives: [{ directive: i1.BrnFieldControl }], ngImport: i0, template: `
+    <input
+      #input
+      hlmInput
+      [id]="inputId()"
+      [attr.name]="name()"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-describedby]="ariaDescribedby()"
+      [placeholder]="placeholder()"
+      [autocomplete]="autocomplete()"
+      [readonly]="readonly()"
+      [disabled]="disabledState()"
+      [forceInvalid]="forceInvalid()"
+      [class]="$inputClass()"
+      [value]="_display()"
+      (input)="_handleInput($event)"
+      (blur)="_handleBlur()"
+    />
+  `, isInline: true, dependencies: [{ kind: "directive", type: HlmInput, selector: "[hlmInput]", inputs: ["ariaDescribedby"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmPhoneInput, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hlm-phone-input',
+                    imports: [HlmInput],
+                    providers: [HLM_PHONE_INPUT_VALUE_ACCESSOR],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    hostDirectives: [BrnFieldControl],
+                    host: {
+                        class: 'tw:block tw:w-full tw:min-w-0',
+                        '[attr.data-disabled]': 'disabledState() ? "" : null',
+                    },
+                    template: `
+    <input
+      #input
+      hlmInput
+      [id]="inputId()"
+      [attr.name]="name()"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-describedby]="ariaDescribedby()"
+      [placeholder]="placeholder()"
+      [autocomplete]="autocomplete()"
+      [readonly]="readonly()"
+      [disabled]="disabledState()"
+      [forceInvalid]="forceInvalid()"
+      [class]="$inputClass()"
+      [value]="_display()"
+      (input)="_handleInput($event)"
+      (blur)="_handleBlur()"
+    />
+  `,
+                }]
+        }], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], forceInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceInvalid", required: false }] }], maxDigits: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDigits", required: false }] }], modelFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "modelFormat", required: false }] }], formatPhoneNumber: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatPhoneNumber", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], inputClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputClass", required: false }] }] } });
+
+/*
+ * Public API Surface of phone-input
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { HLM_PHONE_INPUT_VALUE_ACCESSOR, HlmPhoneInput, formatNanpPhoneNumber };
+

package/phone-input/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "phone-input",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^20.3.0 || ^22.0.0",
+    "@angular/core": "^20.3.0 || ^22.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/phone-input.mjs",
+  "typings": "types/phone-input.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/phone-input.d.ts",
+      "default": "./fesm2022/phone-input.mjs"
+    }
+  },
+  "type": "module"
+}

package/phone-input/types/phone-input.d.ts

@@ -0,0 +1,67 @@
+import * as _angular_core from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { BooleanInput } from '@angular/cdk/coercion';
+import { ClassValue } from 'clsx';
+import { ChangeFn, TouchFn } from '@spartan-ng/brain/forms';
+import * as i1 from '@spartan-ng/brain/field';
+
+declare const HLM_PHONE_INPUT_VALUE_ACCESSOR: {
+    provide: _angular_core.InjectionToken<readonly ControlValueAccessor[]>;
+    useExisting: _angular_core.Type<any>;
+    multi: boolean;
+};
+/** Formats digit strings for display. Defaults to NANP `(XXX) XXX-XXXX` with an open paren while typing. */
+type PhoneNumberFormatter = (digits: string) => string;
+declare function formatNanpPhoneNumber(digits: string): string;
+/**
+ * A masked phone input. The form model holds raw digits (`"4155552671"`);
+ * the visible text is formatted (`"(415) 555-2671"`). Caret position is
+ * preserved across mask characters while typing or deleting.
+ */
+declare class HlmPhoneInput implements ControlValueAccessor {
+    private static _id;
+    readonly inputId: _angular_core.InputSignal<string>;
+    readonly name: _angular_core.InputSignal<string | undefined>;
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    readonly ariaDescribedby: _angular_core.InputSignal<string | null>;
+    readonly placeholder: _angular_core.InputSignal<string>;
+    readonly autocomplete: _angular_core.InputSignal<string>;
+    readonly readonly: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    readonly forceInvalid: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /** Maximum digit count kept in the model. Defaults to 10 (NANP). */
+    readonly maxDigits: _angular_core.InputSignal<number>;
+    /**
+     * Shape of the form model: raw digits (`"4155552671"`, the default —
+     * validator- and storage-friendly) or formatted display text
+     * (`"(415) 555-2671"`).
+     */
+    readonly modelFormat: _angular_core.InputSignal<"digits" | "formatted">;
+    /** Display formatter. Receives raw digits, returns display text. */
+    readonly formatPhoneNumber: _angular_core.InputSignal<PhoneNumberFormatter>;
+    /** Extra classes merged onto the inner `<input>` (over the `HlmInput` base). */
+    readonly userClass: _angular_core.InputSignal<ClassValue>;
+    readonly inputClass: _angular_core.InputSignal<ClassValue>;
+    protected readonly $inputClass: _angular_core.Signal<string>;
+    private readonly _formDisabled;
+    protected readonly disabledState: _angular_core.Signal<boolean>;
+    /** Raw digits held in the form model. */
+    protected readonly _digits: _angular_core.WritableSignal<string>;
+    /** Formatted text shown in the input. */
+    protected readonly _display: _angular_core.Signal<string>;
+    protected _onChange?: ChangeFn<string | null>;
+    protected _onTouched?: TouchFn;
+    private _emitModel;
+    protected _handleInput(event: Event): void;
+    protected _handleBlur(): void;
+    /** CONTROL VALUE ACCESSOR */
+    writeValue(value: string | null | undefined): void;
+    registerOnChange(fn: ChangeFn<string | null>): void;
+    registerOnTouched(fn: TouchFn): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HlmPhoneInput, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HlmPhoneInput, "hlm-phone-input", never, { "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaDescribedby": { "alias": "ariaDescribedby"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "forceInvalid": { "alias": "forceInvalid"; "required": false; "isSignal": true; }; "maxDigits": { "alias": "maxDigits"; "required": false; "isSignal": true; }; "modelFormat": { "alias": "modelFormat"; "required": false; "isSignal": true; }; "formatPhoneNumber": { "alias": "formatPhoneNumber"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "inputClass": { "alias": "inputClass"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.BrnFieldControl; inputs: {}; outputs: {}; }]>;
+}
+
+export { HLM_PHONE_INPUT_VALUE_ACCESSOR, HlmPhoneInput, formatNanpPhoneNumber };
+export type { PhoneNumberFormatter };

package/sheet/fesm2022/sheet.mjs

@@ -108,7 +108,7 @@ const sheetVariants = cva('tw:bg-background tw:data-[state=open]:animate-in tw:d
         },
     },
     defaultVariants: {
-        side: "tw:right",
+        side: 'right',
     },
 });
 class HlmSheetContent {