@agentero/design-system 0.34.2 → 0.35.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/mcp/manifests/components.html +560 -102
- package/mcp/manifests/components.json +317 -1
- package/package.json +7 -2
- package/src/input-search/constants.d.ts +7 -0
- package/src/input-search/constants.js +4 -0
- package/src/input-search/debounced-input-search.d.ts +56 -0
- package/src/input-search/debounced-input-search.js +27 -0
- package/src/input-search/index.d.ts +3 -0
- package/src/input-search/index.js +4 -2
- package/src/input-tel/index.d.ts +2 -0
- package/src/input-tel/index.js +2 -0
- package/src/input-tel/input-tel.d.ts +42 -0
- package/src/input-tel/input-tel.js +46 -0
- package/src/input-tel/mask.d.ts +51 -0
- package/src/input-tel/mask.js +39 -0
|
@@ -588,13 +588,13 @@
|
|
|
588
588
|
<header>
|
|
589
589
|
<div class="wrap">
|
|
590
590
|
<h1>Manifest Debugger</h1>
|
|
591
|
-
<div class="summary"><a class="filter-pill all" data-k="all" href="#filter-all">All</a><span class="filter-pill ok" aria-disabled="true">
|
|
591
|
+
<div class="summary"><a class="filter-pill all" data-k="all" href="#filter-all">All</a><span class="filter-pill ok" aria-disabled="true">38 components ok</span><span class="filter-pill ok" aria-disabled="true">308 stories ok</span></div>
|
|
592
592
|
</div>
|
|
593
593
|
</header>
|
|
594
594
|
<main>
|
|
595
595
|
<div class="wrap">
|
|
596
596
|
<div class="note ok" style="margin-bottom: 16px;">
|
|
597
|
-
Using <code>react-component-meta</code>. Generation took <strong>3.
|
|
597
|
+
Using <code>react-component-meta</code>. Generation took <strong>3.9s</strong>.
|
|
598
598
|
</div>
|
|
599
599
|
<h2 class="section-title">Components</h2>
|
|
600
600
|
<div class="grid" role="list">
|
|
@@ -4437,6 +4437,200 @@ in flight.</div>
|
|
|
4437
4437
|
</div>
|
|
4438
4438
|
|
|
4439
4439
|
|
|
4440
|
+
</div>
|
|
4441
|
+
</article>
|
|
4442
|
+
<article
|
|
4443
|
+
class="card
|
|
4444
|
+
no-error
|
|
4445
|
+
no-info
|
|
4446
|
+
no-story-error
|
|
4447
|
+
no-doc-error"
|
|
4448
|
+
role="listitem"
|
|
4449
|
+
aria-label="DebouncedInputSearch">
|
|
4450
|
+
<div class="head">
|
|
4451
|
+
<div class="title">
|
|
4452
|
+
<h2><span class="status-dot dot-ok"></span> DebouncedInputSearch</h2>
|
|
4453
|
+
<div class="badges">
|
|
4454
|
+
<label for="c-10-components-debouncedinputsearch-props" class="badge ok as-toggle">5 prop types</label>
|
|
4455
|
+
|
|
4456
|
+
<label for="c-10-components-debouncedinputsearch-stories" class="badge ok as-toggle">3 stories</label>
|
|
4457
|
+
|
|
4458
|
+
|
|
4459
|
+
</div>
|
|
4460
|
+
</div>
|
|
4461
|
+
<div class="meta" title="./src/input-search/debounced-input-search.stories.tsx">components-debouncedinputsearch · ./src/input-search/debounced-input-search.stories.tsx</div>
|
|
4462
|
+
<div>Search input that reports the query once the user pauses typing</div>
|
|
4463
|
+
<div class="hint">DebouncedInputSearch is an `InputSearch` for filters that are expensive to
|
|
4464
|
+
run. Keystrokes show up at once, but `onChange` fires only once the user
|
|
4465
|
+
pauses for 300ms, with the last change event. It is always controlled:
|
|
4466
|
+
`value` and `onChange` are required, and the field follows a `value`
|
|
4467
|
+
changed from outside.</div>
|
|
4468
|
+
<div class="kv"><span class="chip">summary: Search input that reports the query once the user pauses typing</span><span class="chip">dataAttribute: {string} data-slot - Always set to "input-search" on the frame</span><span class="chip">example: <DebouncedInputSearch
|
|
4469
|
+
aria-label="Search agencies"
|
|
4470
|
+
value={filters.query}
|
|
4471
|
+
onChange={event => setFilters({ ...filters, query: event.target.value })}
|
|
4472
|
+
isLoading={isFetching}
|
|
4473
|
+
/></span></div>
|
|
4474
|
+
</div>
|
|
4475
|
+
|
|
4476
|
+
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
4477
|
+
|
|
4478
|
+
|
|
4479
|
+
<input id="c-10-components-debouncedinputsearch-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
4480
|
+
|
|
4481
|
+
|
|
4482
|
+
<input id="c-10-components-debouncedinputsearch-props" class="tg tg-props" type="checkbox" hidden />
|
|
4483
|
+
|
|
4484
|
+
<div class="panels">
|
|
4485
|
+
|
|
4486
|
+
|
|
4487
|
+
|
|
4488
|
+
<div class="panel panel-props">
|
|
4489
|
+
<div class="note ok">
|
|
4490
|
+
<div class="row">
|
|
4491
|
+
<span class="ex-name">Prop types <small>(react-component-meta)</small></span>
|
|
4492
|
+
<span class="badge ok">5 prop types</span>
|
|
4493
|
+
</div>
|
|
4494
|
+
<pre><code>Component: src/input-search/debounced-input-search.tsx::DebouncedInputSearch</code></pre>
|
|
4495
|
+
<pre><code>Props:</code></pre>
|
|
4496
|
+
<pre><code>/**
|
|
4497
|
+
* Accessible name of the clear button. Defaults to `'Clear search'`; name it
|
|
4498
|
+
* after what is searched (`'Clear agency search'`) when a page carries
|
|
4499
|
+
* several search fields.
|
|
4500
|
+
*/
|
|
4501
|
+
clearLabel?: string
|
|
4502
|
+
|
|
4503
|
+
/**
|
|
4504
|
+
* Shows a spinner at the end of the frame, in place of the clear button,
|
|
4505
|
+
* while the results for the current text are on their way. Defaults to
|
|
4506
|
+
* `false`.
|
|
4507
|
+
*/
|
|
4508
|
+
isLoading?: boolean
|
|
4509
|
+
|
|
4510
|
+
/**
|
|
4511
|
+
* Fires once the user has stopped typing for `DEBOUNCE_TIME` milliseconds,
|
|
4512
|
+
* with the change event of the last keystroke; clearing the field goes
|
|
4513
|
+
* through the same delay. A pending call fires at once when the user
|
|
4514
|
+
* presses Enter, and is dropped when the field unmounts, so a page that is
|
|
4515
|
+
* navigating away is not sent back. Read the text from `event.target.value`, which is
|
|
4516
|
+
* what the field shows at that moment. `event.currentTarget` is no longer
|
|
4517
|
+
* set by then, since the event is delivered after the browser's dispatch.
|
|
4518
|
+
*/
|
|
4519
|
+
onChange: ChangeEventHandler<HTMLInputElement>
|
|
4520
|
+
|
|
4521
|
+
/**
|
|
4522
|
+
* Control height. Defaults to `'md'`.
|
|
4523
|
+
* - `sm` (32px) — dense layouts where vertical space is tight.
|
|
4524
|
+
* - `md` (40px) — standard form density.
|
|
4525
|
+
* - `lg` (48px) — low-density forms and larger touch targets. Also raises
|
|
4526
|
+
* the text to `base` and the corner radius to `lg`.
|
|
4527
|
+
*/
|
|
4528
|
+
size?: "sm" | "md" | "lg"
|
|
4529
|
+
|
|
4530
|
+
/**
|
|
4531
|
+
* The query the page is filtering by. The field shows it, and follows it
|
|
4532
|
+
* when it changes from outside (a reset button, a saved filter, navigation),
|
|
4533
|
+
* unless the user is in the middle of typing: then what they typed stays,
|
|
4534
|
+
* and `onChange` reports it once they pause.
|
|
4535
|
+
*/
|
|
4536
|
+
value: string</code></pre>
|
|
4537
|
+
</div>
|
|
4538
|
+
</div>
|
|
4539
|
+
|
|
4540
|
+
<div class="panel panel-stories">
|
|
4541
|
+
|
|
4542
|
+
|
|
4543
|
+
|
|
4544
|
+
<div class="note ok">
|
|
4545
|
+
<div class="row">
|
|
4546
|
+
<span class="ex-name">Imports</span>
|
|
4547
|
+
</div>
|
|
4548
|
+
<pre><code>import { Button, DebouncedInputSearch } from "@agentero/design-system";</code></pre>
|
|
4549
|
+
</div>
|
|
4550
|
+
|
|
4551
|
+
|
|
4552
|
+
<div class="note ok">
|
|
4553
|
+
<div class="row">
|
|
4554
|
+
<span class="ex-name">Default</span>
|
|
4555
|
+
<span class="badge ok">story ok</span>
|
|
4556
|
+
</div>
|
|
4557
|
+
<div>Controlled query reported once the user stops typing</div>
|
|
4558
|
+
<div class="hint">A page filtering by a query it owns, shown below the field. Typing shows up
|
|
4559
|
+
in the field at once; `onChange` arrives once the user pauses, with the
|
|
4560
|
+
whole text in `event.target.value`, and only then does the query below
|
|
4561
|
+
change. Clearing the field goes through the same delay.</div>
|
|
4562
|
+
<pre><code>const Default = () => {
|
|
4563
|
+
const [query, setQuery] = useState(args.value);
|
|
4564
|
+
|
|
4565
|
+
return (
|
|
4566
|
+
<div style={{ display: 'grid', gap: '1rem' }}>
|
|
4567
|
+
<DebouncedInputSearch
|
|
4568
|
+
aria-label="Search agencies"
|
|
4569
|
+
value={query}
|
|
4570
|
+
onChange={event => {
|
|
4571
|
+
setQuery(event.target.value);
|
|
4572
|
+
args.onChange(event);
|
|
4573
|
+
}} />
|
|
4574
|
+
<output>Filtering by: {query}</output>
|
|
4575
|
+
</div>
|
|
4576
|
+
);
|
|
4577
|
+
};</code></pre>
|
|
4578
|
+
</div>
|
|
4579
|
+
<div class="note ok">
|
|
4580
|
+
<div class="row">
|
|
4581
|
+
<span class="ex-name">External Value</span>
|
|
4582
|
+
<span class="badge ok">story ok</span>
|
|
4583
|
+
</div>
|
|
4584
|
+
<div>Field following a value changed from outside while idle</div>
|
|
4585
|
+
<div class="hint">The field follows `value` when the page changes it from outside, here a
|
|
4586
|
+
saved search applied with a button: nothing is being typed, so the new
|
|
4587
|
+
query replaces the text.</div>
|
|
4588
|
+
<pre><code>const ExternalValue = () => {
|
|
4589
|
+
const [query, setQuery] = useState('Acme');
|
|
4590
|
+
|
|
4591
|
+
return (
|
|
4592
|
+
<div style={{ display: 'grid', gap: '1rem' }}>
|
|
4593
|
+
<DebouncedInputSearch
|
|
4594
|
+
aria-label="Search agencies"
|
|
4595
|
+
value={query}
|
|
4596
|
+
onChange={event => {
|
|
4597
|
+
setQuery(event.target.value);
|
|
4598
|
+
args.onChange(event);
|
|
4599
|
+
}} />
|
|
4600
|
+
<Button variant="secondary" size="sm" onClick={() => setQuery('Travelers')}>Apply saved search
|
|
4601
|
+
</Button>
|
|
4602
|
+
<output>Filtering by: {query}</output>
|
|
4603
|
+
</div>
|
|
4604
|
+
);
|
|
4605
|
+
};</code></pre>
|
|
4606
|
+
</div>
|
|
4607
|
+
<div class="note ok">
|
|
4608
|
+
<div class="row">
|
|
4609
|
+
<span class="ex-name">Submit On Enter</span>
|
|
4610
|
+
<span class="badge ok">story ok</span>
|
|
4611
|
+
</div>
|
|
4612
|
+
<div>Enter reports the pending query without waiting</div>
|
|
4613
|
+
<div class="hint">Pressing Enter reports the text at once instead of waiting for the pause.</div>
|
|
4614
|
+
<pre><code>const SubmitOnEnter = () => {
|
|
4615
|
+
const [query, setQuery] = useState(args.value);
|
|
4616
|
+
|
|
4617
|
+
return (
|
|
4618
|
+
<div style={{ display: 'grid', gap: '1rem' }}>
|
|
4619
|
+
<DebouncedInputSearch
|
|
4620
|
+
aria-label="Search agencies"
|
|
4621
|
+
value={query}
|
|
4622
|
+
onChange={event => {
|
|
4623
|
+
setQuery(event.target.value);
|
|
4624
|
+
args.onChange(event);
|
|
4625
|
+
}} />
|
|
4626
|
+
<output>Filtering by: {query}</output>
|
|
4627
|
+
</div>
|
|
4628
|
+
);
|
|
4629
|
+
};</code></pre>
|
|
4630
|
+
</div>
|
|
4631
|
+
</div>
|
|
4632
|
+
|
|
4633
|
+
|
|
4440
4634
|
</div>
|
|
4441
4635
|
</article>
|
|
4442
4636
|
<article
|
|
@@ -4451,9 +4645,9 @@ in flight.</div>
|
|
|
4451
4645
|
<div class="title">
|
|
4452
4646
|
<h2><span class="status-dot dot-ok"></span> Divider</h2>
|
|
4453
4647
|
<div class="badges">
|
|
4454
|
-
<label for="c-
|
|
4648
|
+
<label for="c-11-components-divider-props" class="badge ok as-toggle">4 prop types</label>
|
|
4455
4649
|
|
|
4456
|
-
<label for="c-
|
|
4650
|
+
<label for="c-11-components-divider-stories" class="badge ok as-toggle">10 stories</label>
|
|
4457
4651
|
|
|
4458
4652
|
|
|
4459
4653
|
</div>
|
|
@@ -4476,10 +4670,10 @@ When omitted, Divider renders a single line.</span><span class="chip">example: &
|
|
|
4476
4670
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
4477
4671
|
|
|
4478
4672
|
|
|
4479
|
-
<input id="c-
|
|
4673
|
+
<input id="c-11-components-divider-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
4480
4674
|
|
|
4481
4675
|
|
|
4482
|
-
<input id="c-
|
|
4676
|
+
<input id="c-11-components-divider-props" class="tg tg-props" type="checkbox" hidden />
|
|
4483
4677
|
|
|
4484
4678
|
<div class="panels">
|
|
4485
4679
|
|
|
@@ -4782,9 +4976,9 @@ related controls or inline links without visual weight.</div>
|
|
|
4782
4976
|
<div class="title">
|
|
4783
4977
|
<h2><span class="status-dot dot-ok"></span> DropdownMenu.Root</h2>
|
|
4784
4978
|
<div class="badges">
|
|
4785
|
-
<label for="c-
|
|
4979
|
+
<label for="c-12-components-dropdownmenu-props" class="badge ok as-toggle">6 prop types</label>
|
|
4786
4980
|
|
|
4787
|
-
<label for="c-
|
|
4981
|
+
<label for="c-12-components-dropdownmenu-stories" class="badge ok as-toggle">7 stories</label>
|
|
4788
4982
|
|
|
4789
4983
|
|
|
4790
4984
|
</div>
|
|
@@ -4843,10 +5037,10 @@ import { DropdownMenu } from '@agentero/design-system/dropdown-menu';
|
|
|
4843
5037
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
4844
5038
|
|
|
4845
5039
|
|
|
4846
|
-
<input id="c-
|
|
5040
|
+
<input id="c-12-components-dropdownmenu-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
4847
5041
|
|
|
4848
5042
|
|
|
4849
|
-
<input id="c-
|
|
5043
|
+
<input id="c-12-components-dropdownmenu-props" class="tg tg-props" type="checkbox" hidden />
|
|
4850
5044
|
|
|
4851
5045
|
<div class="panels">
|
|
4852
5046
|
|
|
@@ -5249,9 +5443,9 @@ actions outright unless the user needs to see them and understand why.</div>
|
|
|
5249
5443
|
<div class="title">
|
|
5250
5444
|
<h2><span class="status-dot dot-ok"></span> Field.Root</h2>
|
|
5251
5445
|
<div class="badges">
|
|
5252
|
-
<label for="c-
|
|
5446
|
+
<label for="c-13-components-field-props" class="badge ok as-toggle">6 prop types</label>
|
|
5253
5447
|
|
|
5254
|
-
<label for="c-
|
|
5448
|
+
<label for="c-13-components-field-stories" class="badge ok as-toggle">17 stories</label>
|
|
5255
5449
|
|
|
5256
5450
|
|
|
5257
5451
|
</div>
|
|
@@ -5283,10 +5477,10 @@ absent when there is none.</div>
|
|
|
5283
5477
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
5284
5478
|
|
|
5285
5479
|
|
|
5286
|
-
<input id="c-
|
|
5480
|
+
<input id="c-13-components-field-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
5287
5481
|
|
|
5288
5482
|
|
|
5289
|
-
<input id="c-
|
|
5483
|
+
<input id="c-13-components-field-props" class="tg tg-props" type="checkbox" hidden />
|
|
5290
5484
|
|
|
5291
5485
|
<div class="panels">
|
|
5292
5486
|
|
|
@@ -5787,9 +5981,9 @@ form library. `InputContext` extends the same way with `value`, `onChange`,
|
|
|
5787
5981
|
<div class="title">
|
|
5788
5982
|
<h2><span class="status-dot dot-ok"></span> FieldText</h2>
|
|
5789
5983
|
<div class="badges">
|
|
5790
|
-
<label for="c-
|
|
5984
|
+
<label for="c-14-components-fieldtext-props" class="badge ok as-toggle">6 prop types</label>
|
|
5791
5985
|
|
|
5792
|
-
<label for="c-
|
|
5986
|
+
<label for="c-14-components-fieldtext-stories" class="badge ok as-toggle">7 stories</label>
|
|
5793
5987
|
|
|
5794
5988
|
|
|
5795
5989
|
</div>
|
|
@@ -5816,10 +6010,10 @@ and `name`, and `FieldContext` with the errors, as the last story shows.</div>
|
|
|
5816
6010
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
5817
6011
|
|
|
5818
6012
|
|
|
5819
|
-
<input id="c-
|
|
6013
|
+
<input id="c-14-components-fieldtext-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
5820
6014
|
|
|
5821
6015
|
|
|
5822
|
-
<input id="c-
|
|
6016
|
+
<input id="c-14-components-fieldtext-props" class="tg tg-props" type="checkbox" hidden />
|
|
5823
6017
|
|
|
5824
6018
|
<div class="panels">
|
|
5825
6019
|
|
|
@@ -6057,9 +6251,9 @@ The input's own `onChange` still runs, chained after the provider's.</di
|
|
|
6057
6251
|
<div class="title">
|
|
6058
6252
|
<h2><span class="status-dot dot-ok"></span> Form.Root</h2>
|
|
6059
6253
|
<div class="badges">
|
|
6060
|
-
<label for="c-
|
|
6254
|
+
<label for="c-15-components-form-props" class="badge ok as-toggle">3 prop types</label>
|
|
6061
6255
|
|
|
6062
|
-
<label for="c-
|
|
6256
|
+
<label for="c-15-components-form-stories" class="badge ok as-toggle">2 stories</label>
|
|
6063
6257
|
|
|
6064
6258
|
|
|
6065
6259
|
</div>
|
|
@@ -6088,10 +6282,10 @@ keep a single copy, since the provider and the fields share one context.</div>
|
|
|
6088
6282
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
6089
6283
|
|
|
6090
6284
|
|
|
6091
|
-
<input id="c-
|
|
6285
|
+
<input id="c-15-components-form-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
6092
6286
|
|
|
6093
6287
|
|
|
6094
|
-
<input id="c-
|
|
6288
|
+
<input id="c-15-components-form-props" class="tg tg-props" type="checkbox" hidden />
|
|
6095
6289
|
|
|
6096
6290
|
<div class="panels">
|
|
6097
6291
|
|
|
@@ -6226,9 +6420,9 @@ Validation is react-hook-form's alone.</div>
|
|
|
6226
6420
|
<div class="title">
|
|
6227
6421
|
<h2><span class="status-dot dot-ok"></span> FormText</h2>
|
|
6228
6422
|
<div class="badges">
|
|
6229
|
-
<label for="c-
|
|
6423
|
+
<label for="c-16-components-formtext-props" class="badge ok as-toggle">15 prop types</label>
|
|
6230
6424
|
|
|
6231
|
-
<label for="c-
|
|
6425
|
+
<label for="c-16-components-formtext-stories" class="badge ok as-toggle">10 stories</label>
|
|
6232
6426
|
|
|
6233
6427
|
|
|
6234
6428
|
</div>
|
|
@@ -6258,10 +6452,10 @@ with the `FieldText`, `Label`, `Input` and `Field.*` primitives directly.</div>
|
|
|
6258
6452
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
6259
6453
|
|
|
6260
6454
|
|
|
6261
|
-
<input id="c-
|
|
6455
|
+
<input id="c-16-components-formtext-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
6262
6456
|
|
|
6263
6457
|
|
|
6264
|
-
<input id="c-
|
|
6458
|
+
<input id="c-16-components-formtext-props" class="tg tg-props" type="checkbox" hidden />
|
|
6265
6459
|
|
|
6266
6460
|
<div class="panels">
|
|
6267
6461
|
|
|
@@ -6724,9 +6918,9 @@ hand.</div>
|
|
|
6724
6918
|
<div class="title">
|
|
6725
6919
|
<h2><span class="status-dot dot-ok"></span> HoverCard.Root</h2>
|
|
6726
6920
|
<div class="badges">
|
|
6727
|
-
<label for="c-
|
|
6921
|
+
<label for="c-17-components-hovercard-props" class="badge ok as-toggle">6 prop types</label>
|
|
6728
6922
|
|
|
6729
|
-
<label for="c-
|
|
6923
|
+
<label for="c-17-components-hovercard-stories" class="badge ok as-toggle">7 stories</label>
|
|
6730
6924
|
|
|
6731
6925
|
|
|
6732
6926
|
</div>
|
|
@@ -6758,10 +6952,10 @@ import { HoverCard } from '@agentero/design-system/hover-card';
|
|
|
6758
6952
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
6759
6953
|
|
|
6760
6954
|
|
|
6761
|
-
<input id="c-
|
|
6955
|
+
<input id="c-17-components-hovercard-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
6762
6956
|
|
|
6763
6957
|
|
|
6764
|
-
<input id="c-
|
|
6958
|
+
<input id="c-17-components-hovercard-props" class="tg tg-props" type="checkbox" hidden />
|
|
6765
6959
|
|
|
6766
6960
|
<div class="panels">
|
|
6767
6961
|
|
|
@@ -7008,9 +7202,9 @@ trigger-dense UIs where an instant preview reads as more responsive.</div>
|
|
|
7008
7202
|
<div class="title">
|
|
7009
7203
|
<h2><span class="status-dot dot-ok"></span> Input</h2>
|
|
7010
7204
|
<div class="badges">
|
|
7011
|
-
<label for="c-
|
|
7205
|
+
<label for="c-18-components-input-props" class="badge ok as-toggle">1 prop type</label>
|
|
7012
7206
|
|
|
7013
|
-
<label for="c-
|
|
7207
|
+
<label for="c-18-components-input-stories" class="badge ok as-toggle">9 stories</label>
|
|
7014
7208
|
|
|
7015
7209
|
|
|
7016
7210
|
</div>
|
|
@@ -7033,10 +7227,10 @@ what assistive technology announces.</div>
|
|
|
7033
7227
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
7034
7228
|
|
|
7035
7229
|
|
|
7036
|
-
<input id="c-
|
|
7230
|
+
<input id="c-18-components-input-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
7037
7231
|
|
|
7038
7232
|
|
|
7039
|
-
<input id="c-
|
|
7233
|
+
<input id="c-18-components-input-props" class="tg tg-props" type="checkbox" hidden />
|
|
7040
7234
|
|
|
7041
7235
|
<div class="panels">
|
|
7042
7236
|
|
|
@@ -7210,7 +7404,7 @@ they cannot change.</div>
|
|
|
7210
7404
|
<div class="badges">
|
|
7211
7405
|
|
|
7212
7406
|
|
|
7213
|
-
<label for="c-
|
|
7407
|
+
<label for="c-19-components-inputgroup-stories" class="badge ok as-toggle">12 stories</label>
|
|
7214
7408
|
|
|
7215
7409
|
|
|
7216
7410
|
</div>
|
|
@@ -7233,7 +7427,7 @@ hands its state to the frame through `:has()`, so focus, `disabled`,
|
|
|
7233
7427
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
7234
7428
|
|
|
7235
7429
|
|
|
7236
|
-
<input id="c-
|
|
7430
|
+
<input id="c-19-components-inputgroup-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
7237
7431
|
|
|
7238
7432
|
|
|
7239
7433
|
|
|
@@ -7517,9 +7711,9 @@ button's start corners with the frame.</div>
|
|
|
7517
7711
|
<div class="title">
|
|
7518
7712
|
<h2><span class="status-dot dot-ok"></span> InputPassword</h2>
|
|
7519
7713
|
<div class="badges">
|
|
7520
|
-
<label for="c-
|
|
7714
|
+
<label for="c-20-components-inputpassword-props" class="badge ok as-toggle">1 prop type</label>
|
|
7521
7715
|
|
|
7522
|
-
<label for="c-
|
|
7716
|
+
<label for="c-20-components-inputpassword-stories" class="badge ok as-toggle">5 stories</label>
|
|
7523
7717
|
|
|
7524
7718
|
|
|
7525
7719
|
</div>
|
|
@@ -7540,10 +7734,10 @@ rendered while the input is disabled.</div>
|
|
|
7540
7734
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
7541
7735
|
|
|
7542
7736
|
|
|
7543
|
-
<input id="c-
|
|
7737
|
+
<input id="c-20-components-inputpassword-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
7544
7738
|
|
|
7545
7739
|
|
|
7546
|
-
<input id="c-
|
|
7740
|
+
<input id="c-20-components-inputpassword-props" class="tg tg-props" type="checkbox" hidden />
|
|
7547
7741
|
|
|
7548
7742
|
<div class="panels">
|
|
7549
7743
|
|
|
@@ -7685,9 +7879,9 @@ the field through the frame. A disabled field removes the toggle too.</div>
|
|
|
7685
7879
|
<div class="title">
|
|
7686
7880
|
<h2><span class="status-dot dot-ok"></span> InputSearch</h2>
|
|
7687
7881
|
<div class="badges">
|
|
7688
|
-
<label for="c-
|
|
7882
|
+
<label for="c-21-components-inputsearch-props" class="badge ok as-toggle">3 prop types</label>
|
|
7689
7883
|
|
|
7690
|
-
<label for="c-
|
|
7884
|
+
<label for="c-21-components-inputsearch-stories" class="badge ok as-toggle">7 stories</label>
|
|
7691
7885
|
|
|
7692
7886
|
|
|
7693
7887
|
</div>
|
|
@@ -7710,10 +7904,10 @@ once there is text. It is an `Input` of `type="search"` inside an
|
|
|
7710
7904
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
7711
7905
|
|
|
7712
7906
|
|
|
7713
|
-
<input id="c-
|
|
7907
|
+
<input id="c-21-components-inputsearch-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
7714
7908
|
|
|
7715
7909
|
|
|
7716
|
-
<input id="c-
|
|
7910
|
+
<input id="c-21-components-inputsearch-props" class="tg tg-props" type="checkbox" hidden />
|
|
7717
7911
|
|
|
7718
7912
|
<div class="panels">
|
|
7719
7913
|
|
|
@@ -7901,6 +8095,270 @@ several search fields does not read "Clear search" twice.</div>
|
|
|
7901
8095
|
</div>
|
|
7902
8096
|
|
|
7903
8097
|
|
|
8098
|
+
</div>
|
|
8099
|
+
</article>
|
|
8100
|
+
<article
|
|
8101
|
+
class="card
|
|
8102
|
+
no-error
|
|
8103
|
+
no-info
|
|
8104
|
+
no-story-error
|
|
8105
|
+
no-doc-error"
|
|
8106
|
+
role="listitem"
|
|
8107
|
+
aria-label="InputTel">
|
|
8108
|
+
<div class="head">
|
|
8109
|
+
<div class="title">
|
|
8110
|
+
<h2><span class="status-dot dot-ok"></span> InputTel</h2>
|
|
8111
|
+
<div class="badges">
|
|
8112
|
+
<label for="c-22-components-inputtel-props" class="badge ok as-toggle">1 prop type</label>
|
|
8113
|
+
|
|
8114
|
+
<label for="c-22-components-inputtel-stories" class="badge ok as-toggle">11 stories</label>
|
|
8115
|
+
|
|
8116
|
+
|
|
8117
|
+
</div>
|
|
8118
|
+
</div>
|
|
8119
|
+
<div class="meta" title="./src/input-tel/input-tel.stories.tsx">components-inputtel · ./src/input-tel/input-tel.stories.tsx</div>
|
|
8120
|
+
<div>US phone input with a +1 prefix that masks as you type</div>
|
|
8121
|
+
<div class="hint">InputTel is a US phone number field that masks as you type: the digits are
|
|
8122
|
+
laid out as `(555) 123-4567`, anything else is dropped and the caret stays
|
|
8123
|
+
next to the digit just edited. It is an `Input` of `type="tel"` inside an
|
|
8124
|
+
`InputGroup` frame with a `+1` prefix; `onChange` receives the native event
|
|
8125
|
+
with the masked text already in `event.target.value`.</div>
|
|
8126
|
+
<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 "input-tel" on the frame</span><span class="chip">example: <FieldText>
|
|
8127
|
+
<Label>Phone number</Label>
|
|
8128
|
+
<InputTel name="phone" autoComplete="tel-national" placeholder="(555) 000-0000" />
|
|
8129
|
+
</FieldText></span></div>
|
|
8130
|
+
</div>
|
|
8131
|
+
|
|
8132
|
+
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
8133
|
+
|
|
8134
|
+
|
|
8135
|
+
<input id="c-22-components-inputtel-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
8136
|
+
|
|
8137
|
+
|
|
8138
|
+
<input id="c-22-components-inputtel-props" class="tg tg-props" type="checkbox" hidden />
|
|
8139
|
+
|
|
8140
|
+
<div class="panels">
|
|
8141
|
+
|
|
8142
|
+
|
|
8143
|
+
|
|
8144
|
+
<div class="panel panel-props">
|
|
8145
|
+
<div class="note ok">
|
|
8146
|
+
<div class="row">
|
|
8147
|
+
<span class="ex-name">Prop types <small>(react-component-meta)</small></span>
|
|
8148
|
+
<span class="badge ok">1 prop type</span>
|
|
8149
|
+
</div>
|
|
8150
|
+
<pre><code>Component: src/input-tel/input-tel.tsx::InputTel</code></pre>
|
|
8151
|
+
<pre><code>Props:</code></pre>
|
|
8152
|
+
<pre><code>/**
|
|
8153
|
+
* Control height. Defaults to `'md'`.
|
|
8154
|
+
* - `sm` (32px) — dense layouts where vertical space is tight.
|
|
8155
|
+
* - `md` (40px) — standard form density.
|
|
8156
|
+
* - `lg` (48px) — low-density forms and larger touch targets. Also raises
|
|
8157
|
+
* the text to `base` and the corner radius to `lg`.
|
|
8158
|
+
*/
|
|
8159
|
+
size?: "sm" | "md" | "lg"</code></pre>
|
|
8160
|
+
</div>
|
|
8161
|
+
</div>
|
|
8162
|
+
|
|
8163
|
+
<div class="panel panel-stories">
|
|
8164
|
+
|
|
8165
|
+
|
|
8166
|
+
|
|
8167
|
+
<div class="note ok">
|
|
8168
|
+
<div class="row">
|
|
8169
|
+
<span class="ex-name">Imports</span>
|
|
8170
|
+
</div>
|
|
8171
|
+
<pre><code>import { Button, Field, FieldText, InputContext, InputTel, Label } from "@agentero/design-system";</code></pre>
|
|
8172
|
+
</div>
|
|
8173
|
+
|
|
8174
|
+
|
|
8175
|
+
<div class="note ok">
|
|
8176
|
+
<div class="row">
|
|
8177
|
+
<span class="ex-name">Default</span>
|
|
8178
|
+
<span class="badge ok">story ok</span>
|
|
8179
|
+
</div>
|
|
8180
|
+
<div>Phone field with a +1 prefix masking the digits as they are typed</div>
|
|
8181
|
+
<div class="hint">An uncontrolled phone field with its `+1` prefix. Typing the ten digits lays
|
|
8182
|
+
them out as `(555) 123-4567`, and every `onChange` call carries the masked
|
|
8183
|
+
text in `event.target.value`; the prefix never enters the value.</div>
|
|
8184
|
+
<pre><code>const Default = () => <InputTel
|
|
8185
|
+
aria-label="Phone number"
|
|
8186
|
+
onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)} />;</code></pre>
|
|
8187
|
+
</div>
|
|
8188
|
+
<div class="note ok">
|
|
8189
|
+
<div class="row">
|
|
8190
|
+
<span class="ex-name">Controlled</span>
|
|
8191
|
+
<span class="badge ok">story ok</span>
|
|
8192
|
+
</div>
|
|
8193
|
+
<div>Controlled phone field storing the masked value</div>
|
|
8194
|
+
<div class="hint">A controlled phone field. The state that owns the value stores what
|
|
8195
|
+
`event.target.value` reports, which is already masked, and the input shows
|
|
8196
|
+
it back unchanged. A partial number carries the separator that comes before
|
|
8197
|
+
the next digit, so six digits read `(555) 123-`.</div>
|
|
8198
|
+
<pre><code>const Controlled = () => {
|
|
8199
|
+
const [phone, setPhone] = useState('');
|
|
8200
|
+
|
|
8201
|
+
return (
|
|
8202
|
+
<InputTel
|
|
8203
|
+
aria-label="Phone number"
|
|
8204
|
+
value={phone}
|
|
8205
|
+
onChange={event => {
|
|
8206
|
+
setPhone(event.target.value);
|
|
8207
|
+
args.onChange?.(event);
|
|
8208
|
+
}} />
|
|
8209
|
+
);
|
|
8210
|
+
};</code></pre>
|
|
8211
|
+
</div>
|
|
8212
|
+
<div class="note ok">
|
|
8213
|
+
<div class="row">
|
|
8214
|
+
<span class="ex-name">Caret In The Middle</span>
|
|
8215
|
+
<span class="badge ok">story ok</span>
|
|
8216
|
+
</div>
|
|
8217
|
+
<div>Caret staying put when a digit is inserted mid-number</div>
|
|
8218
|
+
<div class="hint">Editing in the middle of a full number: a digit typed after `(5` shifts the
|
|
8219
|
+
rest right, the eleventh digit falls off the end and the caret stays after
|
|
8220
|
+
the digit just typed instead of jumping to the end.</div>
|
|
8221
|
+
<pre><code>const CaretInTheMiddle = () => <InputTel
|
|
8222
|
+
aria-label="Phone number"
|
|
8223
|
+
onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)} />;</code></pre>
|
|
8224
|
+
</div>
|
|
8225
|
+
<div class="note ok">
|
|
8226
|
+
<div class="row">
|
|
8227
|
+
<span class="ex-name">Backspace Over Mask Characters</span>
|
|
8228
|
+
<span class="badge ok">story ok</span>
|
|
8229
|
+
</div>
|
|
8230
|
+
<div>Backspace trimming the separators the mask added</div>
|
|
8231
|
+
<div class="hint">Backspace over the mask's own characters: after `555` the field shows
|
|
8232
|
+
`(555) `, and deleting backwards trims the separators along with the digit
|
|
8233
|
+
under the caret instead of leaving a dangling `) `.</div>
|
|
8234
|
+
<pre><code>const BackspaceOverMaskCharacters = () => <InputTel
|
|
8235
|
+
aria-label="Phone number"
|
|
8236
|
+
onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)} />;</code></pre>
|
|
8237
|
+
</div>
|
|
8238
|
+
<div class="note ok">
|
|
8239
|
+
<div class="row">
|
|
8240
|
+
<span class="ex-name">Paste</span>
|
|
8241
|
+
<span class="badge ok">story ok</span>
|
|
8242
|
+
</div>
|
|
8243
|
+
<div>Pasted number reduced to its digits and masked</div>
|
|
8244
|
+
<div class="hint">A pasted number in any format is reduced to its digits and masked, so
|
|
8245
|
+
`555-123-4567` from a clipboard ends up as `(555) 123-4567`.</div>
|
|
8246
|
+
<pre><code>const Paste = () => <InputTel
|
|
8247
|
+
aria-label="Phone number"
|
|
8248
|
+
onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)} />;</code></pre>
|
|
8249
|
+
</div>
|
|
8250
|
+
<div class="note ok">
|
|
8251
|
+
<div class="row">
|
|
8252
|
+
<span class="ex-name">Paste With Country Code</span>
|
|
8253
|
+
<span class="badge ok">story ok</span>
|
|
8254
|
+
</div>
|
|
8255
|
+
<div>Pasted number with a +1 country code</div>
|
|
8256
|
+
<div class="hint">A number that carries the `+1` country code, as copied from a signature or
|
|
8257
|
+
filled in by the browser's autofill, loses the code and keeps its ten
|
|
8258
|
+
national digits: `+1 (555) 123-4567` ends up as `(555) 123-4567`.</div>
|
|
8259
|
+
<pre><code>const PasteWithCountryCode = () => <InputTel
|
|
8260
|
+
aria-label="Phone number"
|
|
8261
|
+
onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)} />;</code></pre>
|
|
8262
|
+
</div>
|
|
8263
|
+
<div class="note ok">
|
|
8264
|
+
<div class="row">
|
|
8265
|
+
<span class="ex-name">Inside Field Text</span>
|
|
8266
|
+
<span class="badge ok">story ok</span>
|
|
8267
|
+
</div>
|
|
8268
|
+
<div>Label and description reaching the input through the field</div>
|
|
8269
|
+
<div class="hint">Inside a `FieldText` the input takes its label, description and states from
|
|
8270
|
+
the field, and the masked value still reaches a handler the field provides.</div>
|
|
8271
|
+
<pre><code>const InsideFieldText = () => (
|
|
8272
|
+
<FieldText>
|
|
8273
|
+
<Label>Phone number</Label>
|
|
8274
|
+
<InputTel />
|
|
8275
|
+
<Field.Description>We only call about your account.</Field.Description>
|
|
8276
|
+
</FieldText>
|
|
8277
|
+
);</code></pre>
|
|
8278
|
+
</div>
|
|
8279
|
+
<div class="note ok">
|
|
8280
|
+
<div class="row">
|
|
8281
|
+
<span class="ex-name">With React Hook Form</span>
|
|
8282
|
+
<span class="badge ok">story ok</span>
|
|
8283
|
+
</div>
|
|
8284
|
+
<div>Masked value reaching react-hook-form through register</div>
|
|
8285
|
+
<div class="hint">Registered with react-hook-form, the form receives the masked value: the
|
|
8286
|
+
`register` handler reads `event.target.value` like any other change.</div>
|
|
8287
|
+
<pre><code>const WithReactHookForm = () => {
|
|
8288
|
+
const { register, handleSubmit } = useForm<ContactValues>({
|
|
8289
|
+
defaultValues: { phone: '' }
|
|
8290
|
+
});
|
|
8291
|
+
|
|
8292
|
+
return (
|
|
8293
|
+
<form
|
|
8294
|
+
aria-label="Contact"
|
|
8295
|
+
noValidate
|
|
8296
|
+
onSubmit={handleSubmit(values => onSubmit(values))}
|
|
8297
|
+
style={{ display: 'grid', gap: '1rem' }}>
|
|
8298
|
+
<InputTel aria-label="Phone number" {...register('phone')} />
|
|
8299
|
+
<Button type="submit">Save</Button>
|
|
8300
|
+
</form>
|
|
8301
|
+
);
|
|
8302
|
+
};</code></pre>
|
|
8303
|
+
</div>
|
|
8304
|
+
<div class="note ok">
|
|
8305
|
+
<div class="row">
|
|
8306
|
+
<span class="ex-name">Disabled</span>
|
|
8307
|
+
<span class="badge ok">story ok</span>
|
|
8308
|
+
</div>
|
|
8309
|
+
<div>Disabled phone field</div>
|
|
8310
|
+
<div class="hint">A disabled phone field keeps its masked value and takes no input.</div>
|
|
8311
|
+
<pre><code>const Disabled = () => <InputTel
|
|
8312
|
+
aria-label="Phone number"
|
|
8313
|
+
onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}
|
|
8314
|
+
disabled
|
|
8315
|
+
defaultValue="(555) 123-4567" />;</code></pre>
|
|
8316
|
+
</div>
|
|
8317
|
+
<div class="note ok">
|
|
8318
|
+
<div class="row">
|
|
8319
|
+
<span class="ex-name">Invalid</span>
|
|
8320
|
+
<span class="badge ok">story ok</span>
|
|
8321
|
+
</div>
|
|
8322
|
+
<div>Invalid field driving the frame's destructive border</div>
|
|
8323
|
+
<div class="hint">`invalid` on the surrounding `FieldText` sets `aria-invalid` on the input,
|
|
8324
|
+
which paints the frame's destructive border, and `Field.Error` is announced
|
|
8325
|
+
with the input.</div>
|
|
8326
|
+
<pre><code>const Invalid = () => (
|
|
8327
|
+
<FieldText invalid>
|
|
8328
|
+
<Label>Phone number</Label>
|
|
8329
|
+
<InputTel defaultValue="(555) 12" />
|
|
8330
|
+
<Field.Error errors={[{ message: 'Enter a 10-digit phone number.' }]} />
|
|
8331
|
+
</FieldText>
|
|
8332
|
+
);</code></pre>
|
|
8333
|
+
</div>
|
|
8334
|
+
<div class="note ok">
|
|
8335
|
+
<div class="row">
|
|
8336
|
+
<span class="ex-name">All Sizes</span>
|
|
8337
|
+
<span class="badge ok">story ok</span>
|
|
8338
|
+
</div>
|
|
8339
|
+
<div>The three sizes side by side</div>
|
|
8340
|
+
<div class="hint">The three sizes match Input's: the frame is 32, 40 or 48px tall.</div>
|
|
8341
|
+
<pre><code>const AllSizes = () => <div style={{ display: 'grid', gap: '1rem' }}>
|
|
8342
|
+
<InputTel
|
|
8343
|
+
onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}
|
|
8344
|
+
size="sm"
|
|
8345
|
+
aria-label="Small"
|
|
8346
|
+
defaultValue="(555) 123-4567" />
|
|
8347
|
+
<InputTel
|
|
8348
|
+
onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}
|
|
8349
|
+
size="md"
|
|
8350
|
+
aria-label="Medium"
|
|
8351
|
+
defaultValue="(555) 123-4567" />
|
|
8352
|
+
<InputTel
|
|
8353
|
+
onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}
|
|
8354
|
+
size="lg"
|
|
8355
|
+
aria-label="Large"
|
|
8356
|
+
defaultValue="(555) 123-4567" />
|
|
8357
|
+
</div>;</code></pre>
|
|
8358
|
+
</div>
|
|
8359
|
+
</div>
|
|
8360
|
+
|
|
8361
|
+
|
|
7904
8362
|
</div>
|
|
7905
8363
|
</article>
|
|
7906
8364
|
<article
|
|
@@ -7915,9 +8373,9 @@ several search fields does not read "Clear search" twice.</div>
|
|
|
7915
8373
|
<div class="title">
|
|
7916
8374
|
<h2><span class="status-dot dot-ok"></span> Label</h2>
|
|
7917
8375
|
<div class="badges">
|
|
7918
|
-
<label for="c-
|
|
8376
|
+
<label for="c-23-components-label-props" class="badge ok as-toggle">3 prop types</label>
|
|
7919
8377
|
|
|
7920
|
-
<label for="c-
|
|
8378
|
+
<label for="c-23-components-label-stories" class="badge ok as-toggle">5 stories</label>
|
|
7921
8379
|
|
|
7922
8380
|
|
|
7923
8381
|
</div>
|
|
@@ -7937,10 +8395,10 @@ still has to carry `required` / `aria-required`.</div>
|
|
|
7937
8395
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
7938
8396
|
|
|
7939
8397
|
|
|
7940
|
-
<input id="c-
|
|
8398
|
+
<input id="c-23-components-label-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
7941
8399
|
|
|
7942
8400
|
|
|
7943
|
-
<input id="c-
|
|
8401
|
+
<input id="c-23-components-label-props" class="tg tg-props" type="checkbox" hidden />
|
|
7944
8402
|
|
|
7945
8403
|
<div class="panels">
|
|
7946
8404
|
|
|
@@ -8064,9 +8522,9 @@ field's control with no `htmlFor`. An explicit `htmlFor` still wins.</div>
|
|
|
8064
8522
|
<div class="title">
|
|
8065
8523
|
<h2><span class="status-dot dot-ok"></span> Loading</h2>
|
|
8066
8524
|
<div class="badges">
|
|
8067
|
-
<label for="c-
|
|
8525
|
+
<label for="c-24-components-loading-props" class="badge ok as-toggle">1 prop type</label>
|
|
8068
8526
|
|
|
8069
|
-
<label for="c-
|
|
8527
|
+
<label for="c-24-components-loading-stories" class="badge ok as-toggle">7 stories</label>
|
|
8070
8528
|
|
|
8071
8529
|
|
|
8072
8530
|
</div>
|
|
@@ -8083,10 +8541,10 @@ parent font size via `em`-based size variants (`sm`, `md`, `lg`).</div>
|
|
|
8083
8541
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
8084
8542
|
|
|
8085
8543
|
|
|
8086
|
-
<input id="c-
|
|
8544
|
+
<input id="c-24-components-loading-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
8087
8545
|
|
|
8088
8546
|
|
|
8089
|
-
<input id="c-
|
|
8547
|
+
<input id="c-24-components-loading-props" class="tg tg-props" type="checkbox" hidden />
|
|
8090
8548
|
|
|
8091
8549
|
<div class="panels">
|
|
8092
8550
|
|
|
@@ -8237,9 +8695,9 @@ against the dark background.</div>
|
|
|
8237
8695
|
<div class="title">
|
|
8238
8696
|
<h2><span class="status-dot dot-ok"></span> Modal.Root</h2>
|
|
8239
8697
|
<div class="badges">
|
|
8240
|
-
<label for="c-
|
|
8698
|
+
<label for="c-25-components-modal-props" class="badge ok as-toggle">5 prop types</label>
|
|
8241
8699
|
|
|
8242
|
-
<label for="c-
|
|
8700
|
+
<label for="c-25-components-modal-stories" class="badge ok as-toggle">6 stories</label>
|
|
8243
8701
|
|
|
8244
8702
|
|
|
8245
8703
|
</div>
|
|
@@ -8285,10 +8743,10 @@ import { Modal } from '@agentero/design-system/modal';
|
|
|
8285
8743
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
8286
8744
|
|
|
8287
8745
|
|
|
8288
|
-
<input id="c-
|
|
8746
|
+
<input id="c-25-components-modal-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
8289
8747
|
|
|
8290
8748
|
|
|
8291
|
-
<input id="c-
|
|
8749
|
+
<input id="c-25-components-modal-props" class="tg tg-props" type="checkbox" hidden />
|
|
8292
8750
|
|
|
8293
8751
|
<div class="panels">
|
|
8294
8752
|
|
|
@@ -8508,9 +8966,9 @@ announced as an `alertdialog`. Only the footer actions close it.</div>
|
|
|
8508
8966
|
<div class="title">
|
|
8509
8967
|
<h2><span class="status-dot dot-ok"></span> Pagination</h2>
|
|
8510
8968
|
<div class="badges">
|
|
8511
|
-
<label for="c-
|
|
8969
|
+
<label for="c-26-components-pagination-props" class="badge ok as-toggle">5 prop types</label>
|
|
8512
8970
|
|
|
8513
|
-
<label for="c-
|
|
8971
|
+
<label for="c-26-components-pagination-stories" class="badge ok as-toggle">7 stories</label>
|
|
8514
8972
|
|
|
8515
8973
|
|
|
8516
8974
|
</div>
|
|
@@ -8540,10 +8998,10 @@ const [page, setPage] = useState(1);
|
|
|
8540
8998
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
8541
8999
|
|
|
8542
9000
|
|
|
8543
|
-
<input id="c-
|
|
9001
|
+
<input id="c-26-components-pagination-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
8544
9002
|
|
|
8545
9003
|
|
|
8546
|
-
<input id="c-
|
|
9004
|
+
<input id="c-26-components-pagination-props" class="tg tg-props" type="checkbox" hidden />
|
|
8547
9005
|
|
|
8548
9006
|
<div class="panels">
|
|
8549
9007
|
|
|
@@ -8698,9 +9156,9 @@ entries summary follow along.</div>
|
|
|
8698
9156
|
<div class="title">
|
|
8699
9157
|
<h2><span class="status-dot dot-ok"></span> Popover.Root</h2>
|
|
8700
9158
|
<div class="badges">
|
|
8701
|
-
<label for="c-
|
|
9159
|
+
<label for="c-27-components-popover-props" class="badge ok as-toggle">5 prop types</label>
|
|
8702
9160
|
|
|
8703
|
-
<label for="c-
|
|
9161
|
+
<label for="c-27-components-popover-stories" class="badge ok as-toggle">5 stories</label>
|
|
8704
9162
|
|
|
8705
9163
|
|
|
8706
9164
|
</div>
|
|
@@ -8729,10 +9187,10 @@ import { Popover } from '@agentero/design-system/popover';
|
|
|
8729
9187
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
8730
9188
|
|
|
8731
9189
|
|
|
8732
|
-
<input id="c-
|
|
9190
|
+
<input id="c-27-components-popover-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
8733
9191
|
|
|
8734
9192
|
|
|
8735
|
-
<input id="c-
|
|
9193
|
+
<input id="c-27-components-popover-props" class="tg tg-props" type="checkbox" hidden />
|
|
8736
9194
|
|
|
8737
9195
|
<div class="panels">
|
|
8738
9196
|
|
|
@@ -8931,9 +9389,9 @@ focus returning to its trigger once the modal closes.</div>
|
|
|
8931
9389
|
<div class="title">
|
|
8932
9390
|
<h2><span class="status-dot dot-ok"></span> Progress</h2>
|
|
8933
9391
|
<div class="badges">
|
|
8934
|
-
<label for="c-
|
|
9392
|
+
<label for="c-28-components-progress-props" class="badge ok as-toggle">4 prop types</label>
|
|
8935
9393
|
|
|
8936
|
-
<label for="c-
|
|
9394
|
+
<label for="c-28-components-progress-stories" class="badge ok as-toggle">4 stories</label>
|
|
8937
9395
|
|
|
8938
9396
|
|
|
8939
9397
|
</div>
|
|
@@ -8952,10 +9410,10 @@ with `currentColor`, so recolor it with a plain text class — e.g.
|
|
|
8952
9410
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
8953
9411
|
|
|
8954
9412
|
|
|
8955
|
-
<input id="c-
|
|
9413
|
+
<input id="c-28-components-progress-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
8956
9414
|
|
|
8957
9415
|
|
|
8958
|
-
<input id="c-
|
|
9416
|
+
<input id="c-28-components-progress-props" class="tg tg-props" type="checkbox" hidden />
|
|
8959
9417
|
|
|
8960
9418
|
<div class="panels">
|
|
8961
9419
|
|
|
@@ -9074,7 +9532,7 @@ percentage: number</code></pre>
|
|
|
9074
9532
|
<div class="badges">
|
|
9075
9533
|
|
|
9076
9534
|
|
|
9077
|
-
<label for="c-
|
|
9535
|
+
<label for="c-29-components-skeleton-stories" class="badge ok as-toggle">4 stories</label>
|
|
9078
9536
|
|
|
9079
9537
|
|
|
9080
9538
|
</div>
|
|
@@ -9091,7 +9549,7 @@ shape it with Tailwind classes to mirror the content it stands in for.</div>
|
|
|
9091
9549
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
9092
9550
|
|
|
9093
9551
|
|
|
9094
|
-
<input id="c-
|
|
9552
|
+
<input id="c-29-components-skeleton-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
9095
9553
|
|
|
9096
9554
|
|
|
9097
9555
|
|
|
@@ -9187,9 +9645,9 @@ shape it with Tailwind classes to mirror the content it stands in for.</div>
|
|
|
9187
9645
|
<div class="title">
|
|
9188
9646
|
<h2><span class="status-dot dot-ok"></span> Switch</h2>
|
|
9189
9647
|
<div class="badges">
|
|
9190
|
-
<label for="c-
|
|
9648
|
+
<label for="c-30-components-switch-props" class="badge ok as-toggle">8 prop types</label>
|
|
9191
9649
|
|
|
9192
|
-
<label for="c-
|
|
9650
|
+
<label for="c-30-components-switch-stories" class="badge ok as-toggle">7 stories</label>
|
|
9193
9651
|
|
|
9194
9652
|
|
|
9195
9653
|
</div>
|
|
@@ -9205,10 +9663,10 @@ a Checkbox for a single boolean that applies instantly, and pair it with a
|
|
|
9205
9663
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
9206
9664
|
|
|
9207
9665
|
|
|
9208
|
-
<input id="c-
|
|
9666
|
+
<input id="c-30-components-switch-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
9209
9667
|
|
|
9210
9668
|
|
|
9211
|
-
<input id="c-
|
|
9669
|
+
<input id="c-30-components-switch-props" class="tg tg-props" type="checkbox" hidden />
|
|
9212
9670
|
|
|
9213
9671
|
<div class="panels">
|
|
9214
9672
|
|
|
@@ -9389,9 +9847,9 @@ size?: "sm" | "md"</code></pre>
|
|
|
9389
9847
|
<div class="title">
|
|
9390
9848
|
<h2><span class="status-dot dot-ok"></span> Table.Root</h2>
|
|
9391
9849
|
<div class="badges">
|
|
9392
|
-
<label for="c-
|
|
9850
|
+
<label for="c-31-components-table-props" class="badge ok as-toggle">6 prop types</label>
|
|
9393
9851
|
|
|
9394
|
-
<label for="c-
|
|
9852
|
+
<label for="c-31-components-table-stories" class="badge ok as-toggle">10 stories</label>
|
|
9395
9853
|
|
|
9396
9854
|
|
|
9397
9855
|
</div>
|
|
@@ -9422,10 +9880,10 @@ import { Table } from '@agentero/design-system/table';
|
|
|
9422
9880
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
9423
9881
|
|
|
9424
9882
|
|
|
9425
|
-
<input id="c-
|
|
9883
|
+
<input id="c-31-components-table-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
9426
9884
|
|
|
9427
9885
|
|
|
9428
|
-
<input id="c-
|
|
9886
|
+
<input id="c-31-components-table-props" class="tg tg-props" type="checkbox" hidden />
|
|
9429
9887
|
|
|
9430
9888
|
<div class="panels">
|
|
9431
9889
|
|
|
@@ -9643,9 +10101,9 @@ keeps its padding.</div>
|
|
|
9643
10101
|
<div class="title">
|
|
9644
10102
|
<h2><span class="status-dot dot-ok"></span> Tabs.Root</h2>
|
|
9645
10103
|
<div class="badges">
|
|
9646
|
-
<label for="c-
|
|
10104
|
+
<label for="c-32-components-tabs-props" class="badge ok as-toggle">9 prop types</label>
|
|
9647
10105
|
|
|
9648
|
-
<label for="c-
|
|
10106
|
+
<label for="c-32-components-tabs-stories" class="badge ok as-toggle">8 stories</label>
|
|
9649
10107
|
|
|
9650
10108
|
|
|
9651
10109
|
</div>
|
|
@@ -9676,10 +10134,10 @@ import { Tabs } from '@agentero/design-system/tabs';
|
|
|
9676
10134
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
9677
10135
|
|
|
9678
10136
|
|
|
9679
|
-
<input id="c-
|
|
10137
|
+
<input id="c-32-components-tabs-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
9680
10138
|
|
|
9681
10139
|
|
|
9682
|
-
<input id="c-
|
|
10140
|
+
<input id="c-32-components-tabs-props" class="tg tg-props" type="checkbox" hidden />
|
|
9683
10141
|
|
|
9684
10142
|
<div class="panels">
|
|
9685
10143
|
|
|
@@ -9900,9 +10358,9 @@ tablist role is announced.</div>
|
|
|
9900
10358
|
<div class="title">
|
|
9901
10359
|
<h2><span class="status-dot dot-ok"></span> Tag</h2>
|
|
9902
10360
|
<div class="badges">
|
|
9903
|
-
<label for="c-
|
|
10361
|
+
<label for="c-33-components-tag-props" class="badge ok as-toggle">8 prop types</label>
|
|
9904
10362
|
|
|
9905
|
-
<label for="c-
|
|
10363
|
+
<label for="c-33-components-tag-stories" class="badge ok as-toggle">12 stories</label>
|
|
9906
10364
|
|
|
9907
10365
|
|
|
9908
10366
|
</div>
|
|
@@ -9921,10 +10379,10 @@ it an interactive link or button, which adds the pointer cursor and hover fill.<
|
|
|
9921
10379
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
9922
10380
|
|
|
9923
10381
|
|
|
9924
|
-
<input id="c-
|
|
10382
|
+
<input id="c-33-components-tag-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
9925
10383
|
|
|
9926
10384
|
|
|
9927
|
-
<input id="c-
|
|
10385
|
+
<input id="c-33-components-tag-props" class="tg tg-props" type="checkbox" hidden />
|
|
9928
10386
|
|
|
9929
10387
|
<div class="panels">
|
|
9930
10388
|
|
|
@@ -10349,9 +10807,9 @@ leading + trailing icons, and icon-only.</div>
|
|
|
10349
10807
|
<div class="title">
|
|
10350
10808
|
<h2><span class="status-dot dot-ok"></span> TextArea</h2>
|
|
10351
10809
|
<div class="badges">
|
|
10352
|
-
<label for="c-
|
|
10810
|
+
<label for="c-34-components-textarea-props" class="badge ok as-toggle">1 prop type</label>
|
|
10353
10811
|
|
|
10354
|
-
<label for="c-
|
|
10812
|
+
<label for="c-34-components-textarea-stories" class="badge ok as-toggle">6 stories</label>
|
|
10355
10813
|
|
|
10356
10814
|
|
|
10357
10815
|
</div>
|
|
@@ -10368,10 +10826,10 @@ states. It wires nothing on its own: `id`, `aria-invalid` and
|
|
|
10368
10826
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
10369
10827
|
|
|
10370
10828
|
|
|
10371
|
-
<input id="c-
|
|
10829
|
+
<input id="c-34-components-textarea-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
10372
10830
|
|
|
10373
10831
|
|
|
10374
|
-
<input id="c-
|
|
10832
|
+
<input id="c-34-components-textarea-props" class="tg tg-props" type="checkbox" hidden />
|
|
10375
10833
|
|
|
10376
10834
|
<div class="panels">
|
|
10377
10835
|
|
|
@@ -10503,9 +10961,9 @@ size and the minimum height shows three rows.</div>
|
|
|
10503
10961
|
<div class="title">
|
|
10504
10962
|
<h2><span class="status-dot dot-ok"></span> Toast</h2>
|
|
10505
10963
|
<div class="badges">
|
|
10506
|
-
<label for="c-
|
|
10964
|
+
<label for="c-35-components-toast-props" class="badge ok as-toggle">11 prop types</label>
|
|
10507
10965
|
|
|
10508
|
-
<label for="c-
|
|
10966
|
+
<label for="c-35-components-toast-stories" class="badge ok as-toggle">11 stories</label>
|
|
10509
10967
|
|
|
10510
10968
|
|
|
10511
10969
|
</div>
|
|
@@ -10524,10 +10982,10 @@ common feedback patterns.</div>
|
|
|
10524
10982
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
10525
10983
|
|
|
10526
10984
|
|
|
10527
|
-
<input id="c-
|
|
10985
|
+
<input id="c-35-components-toast-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
10528
10986
|
|
|
10529
10987
|
|
|
10530
|
-
<input id="c-
|
|
10988
|
+
<input id="c-35-components-toast-props" class="tg tg-props" type="checkbox" hidden />
|
|
10531
10989
|
|
|
10532
10990
|
<div class="panels">
|
|
10533
10991
|
|
|
@@ -10956,9 +11414,9 @@ action (e.g., a sync icon for a sync-in-progress toast).</div>
|
|
|
10956
11414
|
<div class="title">
|
|
10957
11415
|
<h2><span class="status-dot dot-ok"></span> Tooltip</h2>
|
|
10958
11416
|
<div class="badges">
|
|
10959
|
-
<label for="c-
|
|
11417
|
+
<label for="c-36-components-tooltip-props" class="badge ok as-toggle">12 prop types</label>
|
|
10960
11418
|
|
|
10961
|
-
<label for="c-
|
|
11419
|
+
<label for="c-36-components-tooltip-stories" class="badge ok as-toggle">5 stories</label>
|
|
10962
11420
|
|
|
10963
11421
|
|
|
10964
11422
|
</div>
|
|
@@ -10977,10 +11435,10 @@ on hover or focus.</div>
|
|
|
10977
11435
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
10978
11436
|
|
|
10979
11437
|
|
|
10980
|
-
<input id="c-
|
|
11438
|
+
<input id="c-36-components-tooltip-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
10981
11439
|
|
|
10982
11440
|
|
|
10983
|
-
<input id="c-
|
|
11441
|
+
<input id="c-36-components-tooltip-props" class="tg tg-props" type="checkbox" hidden />
|
|
10984
11442
|
|
|
10985
11443
|
<div class="panels">
|
|
10986
11444
|
|
|
@@ -11152,9 +11610,9 @@ sideOffset?: number = 4</code></pre>
|
|
|
11152
11610
|
<div class="title">
|
|
11153
11611
|
<h2><span class="status-dot dot-ok"></span> ValidationList</h2>
|
|
11154
11612
|
<div class="badges">
|
|
11155
|
-
<label for="c-
|
|
11613
|
+
<label for="c-37-components-validationlist-props" class="badge ok as-toggle">2 prop types</label>
|
|
11156
11614
|
|
|
11157
|
-
<label for="c-
|
|
11615
|
+
<label for="c-37-components-validationlist-stories" class="badge ok as-toggle">4 stories</label>
|
|
11158
11616
|
|
|
11159
11617
|
|
|
11160
11618
|
</div>
|
|
@@ -11175,10 +11633,10 @@ your form validation; it does not own the input or block submission.</div>
|
|
|
11175
11633
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
11176
11634
|
|
|
11177
11635
|
|
|
11178
|
-
<input id="c-
|
|
11636
|
+
<input id="c-37-components-validationlist-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
11179
11637
|
|
|
11180
11638
|
|
|
11181
|
-
<input id="c-
|
|
11639
|
+
<input id="c-37-components-validationlist-props" class="tg tg-props" type="checkbox" hidden />
|
|
11182
11640
|
|
|
11183
11641
|
<div class="panels">
|
|
11184
11642
|
|