@agentero/design-system 0.34.2 → 0.35.0

package/mcp/manifests/components.html

@@ -588,13 +588,13 @@
 <header>
   <div class="wrap">
     <h1>Manifest Debugger</h1>
-    <div class="summary"><a class="filter-pill all" data-k="all" href="#filter-all">All</a><span class="filter-pill ok" aria-disabled="true">36 components ok</span><span class="filter-pill ok" aria-disabled="true">294 stories ok</span></div>
+    <div class="summary"><a class="filter-pill all" data-k="all" href="#filter-all">All</a><span class="filter-pill ok" aria-disabled="true">37 components ok</span><span class="filter-pill ok" aria-disabled="true">305 stories ok</span></div>
   </div>
 </header>
 <main>
   <div class="wrap">
     <div class="note ok" style="margin-bottom: 16px;">
-              Using <code>react-component-meta</code>. Generation took <strong>3.1s</strong>.
+              Using <code>react-component-meta</code>. Generation took <strong>5.0s</strong>.
             </div>
     <h2 class="section-title">Components</h2>
     <div class="grid" role="list">
@@ -7901,6 +7901,270 @@ several search fields does not read &quot;Clear search&quot; twice.</div>
         </div>
     
     
+  </div>
+</article>
+<article
+  class="card 
+  no-error 
+  no-info 
+  no-story-error
+  no-doc-error"
+  role="listitem"
+  aria-label="InputTel">
+  <div class="head">
+    <div class="title">
+      <h2><span class="status-dot dot-ok"></span> InputTel</h2>
+      <div class="badges">
+        <label for="c-21-components-inputtel-props" class="badge ok as-toggle">1 prop type</label>
+        
+        <label for="c-21-components-inputtel-stories" class="badge ok as-toggle">11 stories</label>
+        
+        
+      </div>
+    </div>
+    <div class="meta" title="./src/input-tel/input-tel.stories.tsx">components-inputtel · ./src/input-tel/input-tel.stories.tsx</div>
+    <div>US phone input with a +1 prefix that masks as you type</div>
+    <div class="hint">InputTel is a US phone number field that masks as you type: the digits are
+laid out as `(555) 123-4567`, anything else is dropped and the caret stays
+next to the digit just edited. It is an `Input` of `type=&quot;tel&quot;` inside an
+`InputGroup` frame with a `+1` prefix; `onChange` receives the native event
+with the masked text already in `event.target.value`.</div>
+    <div class="kv"><span class="chip">summary: US phone input with a +1 prefix that masks as you type</span><span class="chip">dataAttribute: {string} data-slot - Always set to &quot;input-tel&quot; on the frame</span><span class="chip">example: &lt;FieldText&gt;
+  &lt;Label&gt;Phone number&lt;/Label&gt;
+  &lt;InputTel name=&quot;phone&quot; autoComplete=&quot;tel-national&quot; placeholder=&quot;(555) 000-0000&quot; /&gt;
+&lt;/FieldText&gt;</span></div>
+  </div>
+
+  <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
+  
+  
+  <input id="c-21-components-inputtel-stories" class="tg tg-stories" type="checkbox" hidden />
+  
+  
+  <input id="c-21-components-inputtel-props" class="tg tg-props" type="checkbox" hidden />
+
+  <div class="panels">
+    
+    
+    
+        <div class="panel panel-props">
+          <div class="note ok">
+            <div class="row">
+              <span class="ex-name">Prop types <small>(react-component-meta)</small></span>
+              <span class="badge ok">1 prop type</span>
+            </div>
+            <pre><code>Component: src/input-tel/input-tel.tsx::InputTel</code></pre>
+            <pre><code>Props:</code></pre>
+            <pre><code>/**
+ * Control height. Defaults to `&#39;md&#39;`.
+ * - `sm` (32px) — dense layouts where vertical space is tight.
+ * - `md` (40px) — standard form density.
+ * - `lg` (48px) — low-density forms and larger touch targets. Also raises
+ *   the text to `base` and the corner radius to `lg`.
+ */
+size?: &quot;sm&quot; | &quot;md&quot; | &quot;lg&quot;</code></pre>
+          </div>
+        </div>
+    
+        <div class="panel panel-stories">
+          
+          
+          
+          <div class="note ok">
+                <div class="row">
+                  <span class="ex-name">Imports</span>
+                </div>
+                <pre><code>import { Button, Field, FieldText, InputContext, InputTel, Label } from "@agentero/design-system";</code></pre>
+              </div>
+          
+          
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Default</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Phone field with a +1 prefix masking the digits as they are typed</div>
+              <div class="hint">An uncontrolled phone field with its `+1` prefix. Typing the ten digits lays
+them out as `(555) 123-4567`, and every `onChange` call carries the masked
+text in `event.target.value`; the prefix never enters the value.</div>
+              <pre><code>const Default = () =&gt; &lt;InputTel
+    aria-label=&quot;Phone number&quot;
+    onChange={fn((event: ChangeEvent&lt;HTMLInputElement&gt;) =&gt; event.target.value)} /&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Controlled</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Controlled phone field storing the masked value</div>
+              <div class="hint">A controlled phone field. The state that owns the value stores what
+`event.target.value` reports, which is already masked, and the input shows
+it back unchanged. A partial number carries the separator that comes before
+the next digit, so six digits read `(555) 123-`.</div>
+              <pre><code>const Controlled = () =&gt; {
+    const [phone, setPhone] = useState(&#39;&#39;);
+
+    return (
+        &lt;InputTel
+            aria-label=&quot;Phone number&quot;
+            value={phone}
+            onChange={event =&gt; {
+                setPhone(event.target.value);
+                args.onChange?.(event);
+            }} /&gt;
+    );
+};</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Caret In The Middle</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Caret staying put when a digit is inserted mid-number</div>
+              <div class="hint">Editing in the middle of a full number: a digit typed after `(5` shifts the
+rest right, the eleventh digit falls off the end and the caret stays after
+the digit just typed instead of jumping to the end.</div>
+              <pre><code>const CaretInTheMiddle = () =&gt; &lt;InputTel
+    aria-label=&quot;Phone number&quot;
+    onChange={fn((event: ChangeEvent&lt;HTMLInputElement&gt;) =&gt; event.target.value)} /&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Backspace Over Mask Characters</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Backspace trimming the separators the mask added</div>
+              <div class="hint">Backspace over the mask&#39;s own characters: after `555` the field shows
+`(555) `, and deleting backwards trims the separators along with the digit
+under the caret instead of leaving a dangling `) `.</div>
+              <pre><code>const BackspaceOverMaskCharacters = () =&gt; &lt;InputTel
+    aria-label=&quot;Phone number&quot;
+    onChange={fn((event: ChangeEvent&lt;HTMLInputElement&gt;) =&gt; event.target.value)} /&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Paste</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Pasted number reduced to its digits and masked</div>
+              <div class="hint">A pasted number in any format is reduced to its digits and masked, so
+`555-123-4567` from a clipboard ends up as `(555) 123-4567`.</div>
+              <pre><code>const Paste = () =&gt; &lt;InputTel
+    aria-label=&quot;Phone number&quot;
+    onChange={fn((event: ChangeEvent&lt;HTMLInputElement&gt;) =&gt; event.target.value)} /&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Paste With Country Code</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Pasted number with a +1 country code</div>
+              <div class="hint">A number that carries the `+1` country code, as copied from a signature or
+filled in by the browser&#39;s autofill, loses the code and keeps its ten
+national digits: `+1 (555) 123-4567` ends up as `(555) 123-4567`.</div>
+              <pre><code>const PasteWithCountryCode = () =&gt; &lt;InputTel
+    aria-label=&quot;Phone number&quot;
+    onChange={fn((event: ChangeEvent&lt;HTMLInputElement&gt;) =&gt; event.target.value)} /&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Inside Field Text</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Label and description reaching the input through the field</div>
+              <div class="hint">Inside a `FieldText` the input takes its label, description and states from
+the field, and the masked value still reaches a handler the field provides.</div>
+              <pre><code>const InsideFieldText = () =&gt; (
+    &lt;FieldText&gt;
+        &lt;Label&gt;Phone number&lt;/Label&gt;
+        &lt;InputTel /&gt;
+        &lt;Field.Description&gt;We only call about your account.&lt;/Field.Description&gt;
+    &lt;/FieldText&gt;
+);</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">With React Hook Form</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Masked value reaching react-hook-form through register</div>
+              <div class="hint">Registered with react-hook-form, the form receives the masked value: the
+`register` handler reads `event.target.value` like any other change.</div>
+              <pre><code>const WithReactHookForm = () =&gt; {
+    const { register, handleSubmit } = useForm&lt;ContactValues&gt;({
+        defaultValues: { phone: &#39;&#39; }
+    });
+
+    return (
+        &lt;form
+            aria-label=&quot;Contact&quot;
+            noValidate
+            onSubmit={handleSubmit(values =&gt; onSubmit(values))}
+            style={{ display: &#39;grid&#39;, gap: &#39;1rem&#39; }}&gt;
+            &lt;InputTel aria-label=&quot;Phone number&quot; {...register(&#39;phone&#39;)} /&gt;
+            &lt;Button type=&quot;submit&quot;&gt;Save&lt;/Button&gt;
+        &lt;/form&gt;
+    );
+};</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Disabled</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Disabled phone field</div>
+              <div class="hint">A disabled phone field keeps its masked value and takes no input.</div>
+              <pre><code>const Disabled = () =&gt; &lt;InputTel
+    aria-label=&quot;Phone number&quot;
+    onChange={fn((event: ChangeEvent&lt;HTMLInputElement&gt;) =&gt; event.target.value)}
+    disabled
+    defaultValue=&quot;(555) 123-4567&quot; /&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Invalid</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Invalid field driving the frame&#39;s destructive border</div>
+              <div class="hint">`invalid` on the surrounding `FieldText` sets `aria-invalid` on the input,
+which paints the frame&#39;s destructive border, and `Field.Error` is announced
+with the input.</div>
+              <pre><code>const Invalid = () =&gt; (
+    &lt;FieldText invalid&gt;
+        &lt;Label&gt;Phone number&lt;/Label&gt;
+        &lt;InputTel defaultValue=&quot;(555) 12&quot; /&gt;
+        &lt;Field.Error errors={[{ message: &#39;Enter a 10-digit phone number.&#39; }]} /&gt;
+    &lt;/FieldText&gt;
+);</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">All Sizes</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>The three sizes side by side</div>
+              <div class="hint">The three sizes match Input&#39;s: the frame is 32, 40 or 48px tall.</div>
+              <pre><code>const AllSizes = () =&gt; &lt;div style={{ display: &#39;grid&#39;, gap: &#39;1rem&#39; }}&gt;
+    &lt;InputTel
+        onChange={fn((event: ChangeEvent&lt;HTMLInputElement&gt;) =&gt; event.target.value)}
+        size=&quot;sm&quot;
+        aria-label=&quot;Small&quot;
+        defaultValue=&quot;(555) 123-4567&quot; /&gt;
+    &lt;InputTel
+        onChange={fn((event: ChangeEvent&lt;HTMLInputElement&gt;) =&gt; event.target.value)}
+        size=&quot;md&quot;
+        aria-label=&quot;Medium&quot;
+        defaultValue=&quot;(555) 123-4567&quot; /&gt;
+    &lt;InputTel
+        onChange={fn((event: ChangeEvent&lt;HTMLInputElement&gt;) =&gt; event.target.value)}
+        size=&quot;lg&quot;
+        aria-label=&quot;Large&quot;
+        defaultValue=&quot;(555) 123-4567&quot; /&gt;
+&lt;/div&gt;;</code></pre>
+            </div>
+        </div>
+    
+    
   </div>
 </article>
 <article
@@ -7915,9 +8179,9 @@ several search fields does not read &quot;Clear search&quot; twice.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Label</h2>
       <div class="badges">
-        <label for="c-21-components-label-props" class="badge ok as-toggle">3 prop types</label>
+        <label for="c-22-components-label-props" class="badge ok as-toggle">3 prop types</label>
         
-        <label for="c-21-components-label-stories" class="badge ok as-toggle">5 stories</label>
+        <label for="c-22-components-label-stories" class="badge ok as-toggle">5 stories</label>
         
         
       </div>
@@ -7937,10 +8201,10 @@ still has to carry `required` / `aria-required`.</div>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-21-components-label-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-22-components-label-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-21-components-label-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-22-components-label-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -8064,9 +8328,9 @@ field&#39;s control with no `htmlFor`. An explicit `htmlFor` still wins.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Loading</h2>
       <div class="badges">
-        <label for="c-22-components-loading-props" class="badge ok as-toggle">1 prop type</label>
+        <label for="c-23-components-loading-props" class="badge ok as-toggle">1 prop type</label>
         
-        <label for="c-22-components-loading-stories" class="badge ok as-toggle">7 stories</label>
+        <label for="c-23-components-loading-stories" class="badge ok as-toggle">7 stories</label>
         
         
       </div>
@@ -8083,10 +8347,10 @@ parent font size via `em`-based size variants (`sm`, `md`, `lg`).</div>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-22-components-loading-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-23-components-loading-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-22-components-loading-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-23-components-loading-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -8237,9 +8501,9 @@ against the dark background.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Modal.Root</h2>
       <div class="badges">
-        <label for="c-23-components-modal-props" class="badge ok as-toggle">5 prop types</label>
+        <label for="c-24-components-modal-props" class="badge ok as-toggle">5 prop types</label>
         
-        <label for="c-23-components-modal-stories" class="badge ok as-toggle">6 stories</label>
+        <label for="c-24-components-modal-stories" class="badge ok as-toggle">6 stories</label>
         
         
       </div>
@@ -8285,10 +8549,10 @@ import { Modal } from &#39;@agentero/design-system/modal&#39;;
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-23-components-modal-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-24-components-modal-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-23-components-modal-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-24-components-modal-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -8508,9 +8772,9 @@ announced as an `alertdialog`. Only the footer actions close it.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Pagination</h2>
       <div class="badges">
-        <label for="c-24-components-pagination-props" class="badge ok as-toggle">5 prop types</label>
+        <label for="c-25-components-pagination-props" class="badge ok as-toggle">5 prop types</label>
         
-        <label for="c-24-components-pagination-stories" class="badge ok as-toggle">7 stories</label>
+        <label for="c-25-components-pagination-stories" class="badge ok as-toggle">7 stories</label>
         
         
       </div>
@@ -8540,10 +8804,10 @@ const [page, setPage] = useState(1);
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-24-components-pagination-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-25-components-pagination-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-24-components-pagination-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-25-components-pagination-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -8698,9 +8962,9 @@ entries summary follow along.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Popover.Root</h2>
       <div class="badges">
-        <label for="c-25-components-popover-props" class="badge ok as-toggle">5 prop types</label>
+        <label for="c-26-components-popover-props" class="badge ok as-toggle">5 prop types</label>
         
-        <label for="c-25-components-popover-stories" class="badge ok as-toggle">5 stories</label>
+        <label for="c-26-components-popover-stories" class="badge ok as-toggle">5 stories</label>
         
         
       </div>
@@ -8729,10 +8993,10 @@ import { Popover } from &#39;@agentero/design-system/popover&#39;;
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-25-components-popover-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-26-components-popover-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-25-components-popover-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-26-components-popover-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -8931,9 +9195,9 @@ focus returning to its trigger once the modal closes.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Progress</h2>
       <div class="badges">
-        <label for="c-26-components-progress-props" class="badge ok as-toggle">4 prop types</label>
+        <label for="c-27-components-progress-props" class="badge ok as-toggle">4 prop types</label>
         
-        <label for="c-26-components-progress-stories" class="badge ok as-toggle">4 stories</label>
+        <label for="c-27-components-progress-stories" class="badge ok as-toggle">4 stories</label>
         
         
       </div>
@@ -8952,10 +9216,10 @@ with `currentColor`, so recolor it with a plain text class — e.g.
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-26-components-progress-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-27-components-progress-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-26-components-progress-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-27-components-progress-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -9074,7 +9338,7 @@ percentage: number</code></pre>
       <div class="badges">
         
         
-        <label for="c-27-components-skeleton-stories" class="badge ok as-toggle">4 stories</label>
+        <label for="c-28-components-skeleton-stories" class="badge ok as-toggle">4 stories</label>
         
         
       </div>
@@ -9091,7 +9355,7 @@ shape it with Tailwind classes to mirror the content it stands in for.</div>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-27-components-skeleton-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-28-components-skeleton-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
   
@@ -9187,9 +9451,9 @@ shape it with Tailwind classes to mirror the content it stands in for.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Switch</h2>
       <div class="badges">
-        <label for="c-28-components-switch-props" class="badge ok as-toggle">8 prop types</label>
+        <label for="c-29-components-switch-props" class="badge ok as-toggle">8 prop types</label>
         
-        <label for="c-28-components-switch-stories" class="badge ok as-toggle">7 stories</label>
+        <label for="c-29-components-switch-stories" class="badge ok as-toggle">7 stories</label>
         
         
       </div>
@@ -9205,10 +9469,10 @@ a Checkbox for a single boolean that applies instantly, and pair it with a
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-28-components-switch-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-29-components-switch-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-28-components-switch-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-29-components-switch-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -9389,9 +9653,9 @@ size?: &quot;sm&quot; | &quot;md&quot;</code></pre>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Table.Root</h2>
       <div class="badges">
-        <label for="c-29-components-table-props" class="badge ok as-toggle">6 prop types</label>
+        <label for="c-30-components-table-props" class="badge ok as-toggle">6 prop types</label>
         
-        <label for="c-29-components-table-stories" class="badge ok as-toggle">10 stories</label>
+        <label for="c-30-components-table-stories" class="badge ok as-toggle">10 stories</label>
         
         
       </div>
@@ -9422,10 +9686,10 @@ import { Table } from &#39;@agentero/design-system/table&#39;;
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-29-components-table-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-30-components-table-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-29-components-table-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-30-components-table-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -9643,9 +9907,9 @@ keeps its padding.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Tabs.Root</h2>
       <div class="badges">
-        <label for="c-30-components-tabs-props" class="badge ok as-toggle">9 prop types</label>
+        <label for="c-31-components-tabs-props" class="badge ok as-toggle">9 prop types</label>
         
-        <label for="c-30-components-tabs-stories" class="badge ok as-toggle">8 stories</label>
+        <label for="c-31-components-tabs-stories" class="badge ok as-toggle">8 stories</label>
         
         
       </div>
@@ -9676,10 +9940,10 @@ import { Tabs } from &#39;@agentero/design-system/tabs&#39;;
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-30-components-tabs-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-31-components-tabs-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-30-components-tabs-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-31-components-tabs-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -9900,9 +10164,9 @@ tablist role is announced.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Tag</h2>
       <div class="badges">
-        <label for="c-31-components-tag-props" class="badge ok as-toggle">8 prop types</label>
+        <label for="c-32-components-tag-props" class="badge ok as-toggle">8 prop types</label>
         
-        <label for="c-31-components-tag-stories" class="badge ok as-toggle">12 stories</label>
+        <label for="c-32-components-tag-stories" class="badge ok as-toggle">12 stories</label>
         
         
       </div>
@@ -9921,10 +10185,10 @@ it an interactive link or button, which adds the pointer cursor and hover fill.<
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-31-components-tag-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-32-components-tag-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-31-components-tag-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-32-components-tag-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -10349,9 +10613,9 @@ leading + trailing icons, and icon-only.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> TextArea</h2>
       <div class="badges">
-        <label for="c-32-components-textarea-props" class="badge ok as-toggle">1 prop type</label>
+        <label for="c-33-components-textarea-props" class="badge ok as-toggle">1 prop type</label>
         
-        <label for="c-32-components-textarea-stories" class="badge ok as-toggle">6 stories</label>
+        <label for="c-33-components-textarea-stories" class="badge ok as-toggle">6 stories</label>
         
         
       </div>
@@ -10368,10 +10632,10 @@ states. It wires nothing on its own: `id`, `aria-invalid` and
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-32-components-textarea-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-33-components-textarea-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-32-components-textarea-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-33-components-textarea-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -10503,9 +10767,9 @@ size and the minimum height shows three rows.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Toast</h2>
       <div class="badges">
-        <label for="c-33-components-toast-props" class="badge ok as-toggle">11 prop types</label>
+        <label for="c-34-components-toast-props" class="badge ok as-toggle">11 prop types</label>
         
-        <label for="c-33-components-toast-stories" class="badge ok as-toggle">11 stories</label>
+        <label for="c-34-components-toast-stories" class="badge ok as-toggle">11 stories</label>
         
         
       </div>
@@ -10524,10 +10788,10 @@ common feedback patterns.</div>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-33-components-toast-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-34-components-toast-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-33-components-toast-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-34-components-toast-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -10956,9 +11220,9 @@ action (e.g., a sync icon for a sync-in-progress toast).</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Tooltip</h2>
       <div class="badges">
-        <label for="c-34-components-tooltip-props" class="badge ok as-toggle">12 prop types</label>
+        <label for="c-35-components-tooltip-props" class="badge ok as-toggle">12 prop types</label>
         
-        <label for="c-34-components-tooltip-stories" class="badge ok as-toggle">5 stories</label>
+        <label for="c-35-components-tooltip-stories" class="badge ok as-toggle">5 stories</label>
         
         
       </div>
@@ -10977,10 +11241,10 @@ on hover or focus.</div>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-34-components-tooltip-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-35-components-tooltip-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-34-components-tooltip-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-35-components-tooltip-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -11152,9 +11416,9 @@ sideOffset?: number = 4</code></pre>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> ValidationList</h2>
       <div class="badges">
-        <label for="c-35-components-validationlist-props" class="badge ok as-toggle">2 prop types</label>
+        <label for="c-36-components-validationlist-props" class="badge ok as-toggle">2 prop types</label>
         
-        <label for="c-35-components-validationlist-stories" class="badge ok as-toggle">4 stories</label>
+        <label for="c-36-components-validationlist-stories" class="badge ok as-toggle">4 stories</label>
         
         
       </div>
@@ -11175,10 +11439,10 @@ your form validation; it does not own the input or block submission.</div>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-35-components-validationlist-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-36-components-validationlist-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-35-components-validationlist-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-36-components-validationlist-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     

package/mcp/manifests/components.json

@@ -6941,6 +6941,154 @@
       ],
       "import": "import { Field, FieldText, InputSearch, Label } from \"@agentero/design-system\";"
     },
+    "components-inputtel": {
+      "id": "components-inputtel",
+      "name": "InputTel",
+      "path": "./src/input-tel/input-tel.stories.tsx",
+      "jsDocTags": {
+        "summary": [
+          "US phone input with a +1 prefix that masks as you type"
+        ],
+        "dataAttribute": [
+          "{string} data-slot - Always set to \"input-tel\" on the frame"
+        ],
+        "example": [
+          "<FieldText>\n  <Label>Phone number</Label>\n  <InputTel name=\"phone\" autoComplete=\"tel-national\" placeholder=\"(555) 000-0000\" />\n</FieldText>"
+        ]
+      },
+      "description": "InputTel is a US phone number field that masks as you type: the digits are\nlaid out as `(555) 123-4567`, anything else is dropped and the caret stays\nnext to the digit just edited. It is an `Input` of `type=\"tel\"` inside an\n`InputGroup` frame with a `+1` prefix; `onChange` receives the native event\nwith the masked text already in `event.target.value`.",
+      "summary": "US phone input with a +1 prefix that masks as you type",
+      "reactComponentMeta": {
+        "displayName": "InputTel",
+        "exportName": "InputTel",
+        "filePath": "/home/runner/work/design-system/design-system/src/input-tel/input-tel.tsx",
+        "description": "InputTel is a US phone number field that masks as you type: the digits the\nuser enters are laid out as `(555) 123-4567` while typing, pasting or\ndeleting, anything that is not a digit is dropped, and the caret stays next\nto the digit just edited instead of jumping to the end. A leading `+1`\ncountry code, as pasted or filled in by the browser's autofill, is dropped\ntoo; past that, the eleventh digit and beyond are ignored. `onChange`\nreceives the native change event with the masked text already in\n`event.target.value`, so a controlled field, an uncontrolled one and one\nregistered with react-hook-form all store `(555) 123-4567`, never the bare\ndigits.\n\nIt is an [Input](?path=/docs/components-input--docs) of `type=\"tel\"` inside\nan [InputGroup](?path=/docs/components-inputgroup--docs) frame that always\nshows a `+1` prefix in front of the number. The prefix is part of the frame,\nnot of the value. `className` styles the frame. Every other prop goes to the\n`<input>`: the `ref`, `id`, `name`, `value`, `onChange`, `aria-*` and every\nother standard attribute, such as `placeholder`, `autoComplete` or\n`required`. Only `type` is not accepted. Inside a `FieldText` the input\ntakes its label, messages and states from the field as a plain `Input` does.\nThe invalid state comes from `aria-invalid`, and the frame paints the\ndestructive border.\n\nDo not use it for international numbers or extensions; the mask only knows\nthe ten-digit US format. For free-form text that happens to hold a number,\nuse `Input`.",
+        "jsDocTags": {
+          "summary": [
+            "US phone input with a +1 prefix that masks as you type"
+          ],
+          "dataAttribute": [
+            "{string} data-slot - Always set to \"input-tel\" on the frame"
+          ],
+          "example": [
+            "<FieldText>\n  <Label>Phone number</Label>\n  <InputTel name=\"phone\" autoComplete=\"tel-national\" placeholder=\"(555) 000-0000\" />\n</FieldText>"
+          ]
+        },
+        "props": {
+          "size": {
+            "name": "size",
+            "required": false,
+            "type": {
+              "name": "enum",
+              "raw": "\"sm\" | \"md\" | \"lg\"",
+              "value": [
+                {
+                  "value": "\"sm\""
+                },
+                {
+                  "value": "\"md\""
+                },
+                {
+                  "value": "\"lg\""
+                }
+              ]
+            },
+            "description": "Control height. Defaults to `'md'`.\n- `sm` (32px) — dense layouts where vertical space is tight.\n- `md` (40px) — standard form density.\n- `lg` (48px) — low-density forms and larger touch targets. Also raises\n  the text to `base` and the corner radius to `lg`.",
+            "defaultValue": null,
+            "parent": {
+              "name": "InputProps",
+              "fileName": "src/input/input.tsx"
+            },
+            "declarations": [
+              {
+                "name": "TypeLiteral",
+                "fileName": "src/input/input.tsx"
+              }
+            ]
+          }
+        }
+      },
+      "stories": [
+        {
+          "id": "components-inputtel--default",
+          "name": "Default",
+          "snippet": "const Default = () => <InputTel\n    aria-label=\"Phone number\"\n    onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)} />;",
+          "description": "An uncontrolled phone field with its `+1` prefix. Typing the ten digits lays\nthem out as `(555) 123-4567`, and every `onChange` call carries the masked\ntext in `event.target.value`; the prefix never enters the value.",
+          "summary": "Phone field with a +1 prefix masking the digits as they are typed"
+        },
+        {
+          "id": "components-inputtel--controlled",
+          "name": "Controlled",
+          "snippet": "const Controlled = () => {\n    const [phone, setPhone] = useState('');\n\n    return (\n        <InputTel\n            aria-label=\"Phone number\"\n            value={phone}\n            onChange={event => {\n                setPhone(event.target.value);\n                args.onChange?.(event);\n            }} />\n    );\n};",
+          "description": "A controlled phone field. The state that owns the value stores what\n`event.target.value` reports, which is already masked, and the input shows\nit back unchanged. A partial number carries the separator that comes before\nthe next digit, so six digits read `(555) 123-`.",
+          "summary": "Controlled phone field storing the masked value"
+        },
+        {
+          "id": "components-inputtel--caret-in-the-middle",
+          "name": "Caret In The Middle",
+          "snippet": "const CaretInTheMiddle = () => <InputTel\n    aria-label=\"Phone number\"\n    onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)} />;",
+          "description": "Editing in the middle of a full number: a digit typed after `(5` shifts the\nrest right, the eleventh digit falls off the end and the caret stays after\nthe digit just typed instead of jumping to the end.",
+          "summary": "Caret staying put when a digit is inserted mid-number"
+        },
+        {
+          "id": "components-inputtel--backspace-over-mask-characters",
+          "name": "Backspace Over Mask Characters",
+          "snippet": "const BackspaceOverMaskCharacters = () => <InputTel\n    aria-label=\"Phone number\"\n    onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)} />;",
+          "description": "Backspace over the mask's own characters: after `555` the field shows\n`(555) `, and deleting backwards trims the separators along with the digit\nunder the caret instead of leaving a dangling `) `.",
+          "summary": "Backspace trimming the separators the mask added"
+        },
+        {
+          "id": "components-inputtel--paste",
+          "name": "Paste",
+          "snippet": "const Paste = () => <InputTel\n    aria-label=\"Phone number\"\n    onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)} />;",
+          "description": "A pasted number in any format is reduced to its digits and masked, so\n`555-123-4567` from a clipboard ends up as `(555) 123-4567`.",
+          "summary": "Pasted number reduced to its digits and masked"
+        },
+        {
+          "id": "components-inputtel--paste-with-country-code",
+          "name": "Paste With Country Code",
+          "snippet": "const PasteWithCountryCode = () => <InputTel\n    aria-label=\"Phone number\"\n    onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)} />;",
+          "description": "A number that carries the `+1` country code, as copied from a signature or\nfilled in by the browser's autofill, loses the code and keeps its ten\nnational digits: `+1 (555) 123-4567` ends up as `(555) 123-4567`.",
+          "summary": "Pasted number with a +1 country code"
+        },
+        {
+          "id": "components-inputtel--inside-field-text",
+          "name": "Inside Field Text",
+          "snippet": "const InsideFieldText = () => (\n    <FieldText>\n        <Label>Phone number</Label>\n        <InputTel />\n        <Field.Description>We only call about your account.</Field.Description>\n    </FieldText>\n);",
+          "description": "Inside a `FieldText` the input takes its label, description and states from\nthe field, and the masked value still reaches a handler the field provides.",
+          "summary": "Label and description reaching the input through the field"
+        },
+        {
+          "id": "components-inputtel--with-react-hook-form",
+          "name": "With React Hook Form",
+          "snippet": "const WithReactHookForm = () => {\n    const { register, handleSubmit } = useForm<ContactValues>({\n        defaultValues: { phone: '' }\n    });\n\n    return (\n        <form\n            aria-label=\"Contact\"\n            noValidate\n            onSubmit={handleSubmit(values => onSubmit(values))}\n            style={{ display: 'grid', gap: '1rem' }}>\n            <InputTel aria-label=\"Phone number\" {...register('phone')} />\n            <Button type=\"submit\">Save</Button>\n        </form>\n    );\n};",
+          "description": "Registered with react-hook-form, the form receives the masked value: the\n`register` handler reads `event.target.value` like any other change.",
+          "summary": "Masked value reaching react-hook-form through register"
+        },
+        {
+          "id": "components-inputtel--disabled",
+          "name": "Disabled",
+          "snippet": "const Disabled = () => <InputTel\n    aria-label=\"Phone number\"\n    onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}\n    disabled\n    defaultValue=\"(555) 123-4567\" />;",
+          "description": "A disabled phone field keeps its masked value and takes no input.",
+          "summary": "Disabled phone field"
+        },
+        {
+          "id": "components-inputtel--invalid",
+          "name": "Invalid",
+          "snippet": "const Invalid = () => (\n    <FieldText invalid>\n        <Label>Phone number</Label>\n        <InputTel defaultValue=\"(555) 12\" />\n        <Field.Error errors={[{ message: 'Enter a 10-digit phone number.' }]} />\n    </FieldText>\n);",
+          "description": "`invalid` on the surrounding `FieldText` sets `aria-invalid` on the input,\nwhich paints the frame's destructive border, and `Field.Error` is announced\nwith the input.",
+          "summary": "Invalid field driving the frame's destructive border"
+        },
+        {
+          "id": "components-inputtel--all-sizes",
+          "name": "All Sizes",
+          "snippet": "const AllSizes = () => <div style={{ display: 'grid', gap: '1rem' }}>\n    <InputTel\n        onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}\n        size=\"sm\"\n        aria-label=\"Small\"\n        defaultValue=\"(555) 123-4567\" />\n    <InputTel\n        onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}\n        size=\"md\"\n        aria-label=\"Medium\"\n        defaultValue=\"(555) 123-4567\" />\n    <InputTel\n        onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}\n        size=\"lg\"\n        aria-label=\"Large\"\n        defaultValue=\"(555) 123-4567\" />\n</div>;",
+          "description": "The three sizes match Input's: the frame is 32, 40 or 48px tall.",
+          "summary": "The three sizes side by side"
+        }
+      ],
+      "import": "import { Button, Field, FieldText, InputContext, InputTel, Label } from \"@agentero/design-system\";"
+    },
     "components-input": {
       "id": "components-input",
       "name": "Input",
@@ -9907,6 +10055,6 @@
   },
   "meta": {
     "docgen": "react-component-meta",
-    "durationMs": 3150
+    "durationMs": 4990
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agentero/design-system",
-	"version": "0.34.2",
+	"version": "0.35.0",
 	"description": "A React component library built with Tailwind CSS v4 and Radix UI primitives",
 	"type": "module",
 	"license": "Apache-2.0",
@@ -105,6 +105,10 @@
 			"types": "./src/input-search/index.d.ts",
 			"import": "./src/input-search/index.js"
 		},
+		"./input-tel": {
+			"types": "./src/input-tel/index.d.ts",
+			"import": "./src/input-tel/index.js"
+		},
 		"./label": {
 			"types": "./src/label/index.d.ts",
 			"import": "./src/label/index.js"

package/src/input-tel/index.d.ts

@@ -0,0 +1,2 @@
+export { InputTel } from './input-tel';
+export type { InputTelProps } from './input-tel';

package/src/input-tel/index.js

@@ -0,0 +1,2 @@
+import { InputTel as e } from "./input-tel.js";
+export { e as InputTel };

package/src/input-tel/input-tel.d.ts

@@ -0,0 +1,42 @@
+import { InputProps } from '../input';
+export type InputTelProps = Omit<InputProps, 'type'>;
+/**
+ * InputTel is a US phone number field that masks as you type: the digits the
+ * user enters are laid out as `(555) 123-4567` while typing, pasting or
+ * deleting, anything that is not a digit is dropped, and the caret stays next
+ * to the digit just edited instead of jumping to the end. A leading `+1`
+ * country code, as pasted or filled in by the browser's autofill, is dropped
+ * too; past that, the eleventh digit and beyond are ignored. `onChange`
+ * receives the native change event with the masked text already in
+ * `event.target.value`, so a controlled field, an uncontrolled one and one
+ * registered with react-hook-form all store `(555) 123-4567`, never the bare
+ * digits.
+ *
+ * It is an [Input](?path=/docs/components-input--docs) of `type="tel"` inside
+ * an [InputGroup](?path=/docs/components-inputgroup--docs) frame that always
+ * shows a `+1` prefix in front of the number. The prefix is part of the frame,
+ * not of the value. `className` styles the frame. Every other prop goes to the
+ * `<input>`: the `ref`, `id`, `name`, `value`, `onChange`, `aria-*` and every
+ * other standard attribute, such as `placeholder`, `autoComplete` or
+ * `required`. Only `type` is not accepted. Inside a `FieldText` the input
+ * takes its label, messages and states from the field as a plain `Input` does.
+ * The invalid state comes from `aria-invalid`, and the frame paints the
+ * destructive border.
+ *
+ * Do not use it for international numbers or extensions; the mask only knows
+ * the ten-digit US format. For free-form text that happens to hold a number,
+ * use `Input`.
+ *
+ * @summary US phone input with a +1 prefix that masks as you type
+ * @dataAttribute {string} data-slot - Always set to "input-tel" on the frame
+ *
+ * @example
+ * <FieldText>
+ *   <Label>Phone number</Label>
+ *   <InputTel name="phone" autoComplete="tel-national" placeholder="(555) 000-0000" />
+ * </FieldText>
+ */
+export declare const InputTel: {
+    (props: InputTelProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/src/input-tel/input-tel.js

@@ -0,0 +1,46 @@
+"use client";
+import { mergeRefs as e } from "../../lib/merge-props.js";
+import { InputContext as t, useInputContext as n } from "../input/context.js";
+import { Input as r } from "../input/input.js";
+import { InputGroup as i } from "../input-group/index.js";
+import { US_PHONE_MASK as a, applyMask as o, getCursorPosition as s, getDeletionType as c, toNationalDigits as l } from "./mask.js";
+import { useMemo as u, useRef as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/input-tel/input-tel.tsx
+var m = (m) => {
+	let { className: h, onChange: g, ref: _, ...v } = n(m), y = d(null), b = u(() => e(y, _), [_]), x = (e) => {
+		let t = c(e.nativeEvent.inputType), { value: n, selectionStart: r } = e.target, i = o({
+			value: l(n),
+			mask: a,
+			maskSymbol: ".",
+			trimNonMaskCharsLeftover: t === "backward"
+		}), u = s({
+			cursorPositionAfterInput: r ?? 0,
+			phoneAfterInput: n,
+			phoneAfterFormatted: i,
+			deletion: t
+		});
+		e.target.value = i;
+		let d = () => {
+			let e = y.current;
+			e && e === document.activeElement && e.setSelectionRange(u, u);
+		};
+		g ? (g(e), Promise.resolve().then(d)) : d();
+	};
+	return /* @__PURE__ */ p(i.Root, {
+		"data-slot": "input-tel",
+		className: h,
+		children: [/* @__PURE__ */ f(i.Text, { children: "+1" }), /* @__PURE__ */ f(t, {
+			value: null,
+			children: /* @__PURE__ */ f(r, {
+				...v,
+				type: "tel",
+				ref: b,
+				onChange: x
+			})
+		})]
+	});
+};
+m.displayName = "InputTel";
+//#endregion
+export { m as InputTel };

package/src/input-tel/mask.d.ts

@@ -0,0 +1,51 @@
+/** The US phone mask InputTel applies: three groups of 3, 3 and 4 digits. */
+export declare const US_PHONE_MASK = "(...) ...-....";
+/** The character that marks a digit slot in a mask. */
+export declare const MASK_SYMBOL = ".";
+/**
+ * Reduces a phone number in any format to its national digits: drops
+ * everything that is not a digit and, past ten digits, the leading `1` of the
+ * `+1` country code. No US area code starts with `1`, so a national number is
+ * never cut.
+ */
+export declare const toNationalDigits: (value: string) => string;
+type ApplyMaskArgs = {
+    value: string;
+    mask: string;
+    maskSymbol: string;
+    /**
+     * @description Removes all non-maskSymbol chars from the result's ending if the value is shorter than the mask
+     * @example
+     * value: "1234"
+     * mask: "(....) ...."
+     * if true -> "(1234"
+     * if false -> "(1234) "
+     */
+    trimNonMaskCharsLeftover?: boolean;
+};
+/**
+ * Places each character of `value` in the next `maskSymbol` slot of `mask`,
+ * keeping the mask's own characters in between. A value longer than the mask
+ * is cut; a shorter one stops at its last character, followed by the
+ * separators up to the next slot unless `trimNonMaskCharsLeftover` is set.
+ */
+export declare const applyMask: ({ value, mask, maskSymbol, trimNonMaskCharsLeftover }: ApplyMaskArgs) => string;
+export declare const isNumeric: (str?: string) => boolean;
+type GetCursorPositionProps = {
+    phoneAfterInput: string;
+    phoneAfterFormatted: string;
+    cursorPositionAfterInput: number;
+    deletion?: 'forward' | 'backward' | undefined;
+};
+/**
+ * Finds where the caret should sit in the formatted phone after an edit, so
+ * that it stays after the digit the user just typed or removed instead of
+ * jumping to the end when the mask characters move around it.
+ */
+export declare const getCursorPosition: ({ phoneAfterInput, phoneAfterFormatted, cursorPositionAfterInput, deletion }: GetCursorPositionProps) => number;
+/**
+ * Reads the `inputType` of a native `input` event and tells whether the edit
+ * removed characters, and in which direction. `undefined` for an insertion.
+ */
+export declare const getDeletionType: (inputType?: string) => "forward" | "backward" | undefined;
+export {};

package/src/input-tel/mask.js

@@ -0,0 +1,39 @@
+//#region src/input-tel/mask.ts
+var e = "(...) ...-....", t = (e) => {
+	let t = e.replace(/\D/g, "");
+	return t.length > 10 && t.startsWith("1") ? t.slice(1) : t;
+}, n = ({ value: e, mask: t, maskSymbol: n, trimNonMaskCharsLeftover: r = !1 }) => {
+	if (!e) return "";
+	let i = "", a = 0;
+	for (let o of t.split("")) {
+		if (a >= e.length) {
+			if (!r && o !== n) {
+				i += o;
+				continue;
+			}
+			break;
+		}
+		o === n ? (i += e[a], a += 1) : i += o;
+	}
+	return i;
+}, r = (e) => e ? /^\d+$/.test(e) : !1, i = ({ phoneAfterInput: e, phoneAfterFormatted: t, cursorPositionAfterInput: n, deletion: i }) => {
+	let a = null;
+	for (let t = n - 1; t >= 0; --t) if (r(e[t])) {
+		a = t;
+		break;
+	}
+	if (a === null) {
+		for (let n = 0; n < e.length; n += 1) if (r(t[n])) return n;
+		return e.length;
+	}
+	let o = 0;
+	for (let t = 0; t < a; t += 1) r(e[t]) && (o += 1);
+	let s = 0, c = 0;
+	for (let e = 0; e < t.length && (s += 1, r(t[e]) && (c += 1), !(c >= o + 1)); e += 1);
+	if (i !== "backward") for (; !r(t[s]) && s < t.length;) s += 1;
+	return s;
+}, a = (e) => {
+	if (e?.toLocaleLowerCase().includes("delete") ?? !1) return e?.toLocaleLowerCase().includes("forward") ? "forward" : "backward";
+};
+//#endregion
+export { e as US_PHONE_MASK, n as applyMask, i as getCursorPosition, a as getDeletionType, r as isNumeric, t as toNationalDigits };