@agentero/design-system 0.35.0 → 0.36.0
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 +621 -106
- package/mcp/manifests/components.json +447 -1
- package/package.json +8 -2
- package/src/input/context.d.ts +11 -2
- package/src/input/index.d.ts +1 -0
- package/src/input-number/index.d.ts +2 -0
- package/src/input-number/index.js +2 -0
- package/src/input-number/input-number.d.ts +82 -0
- package/src/input-number/input-number.js +33 -0
- 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
|
@@ -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">39 components ok</span><span class="filter-pill ok" aria-disabled="true">319 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>5.
|
|
597
|
+
Using <code>react-component-meta</code>. Generation took <strong>5.1s</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
|
|
|
@@ -7503,6 +7697,327 @@ button's start corners with the frame.</div>
|
|
|
7503
7697
|
</div>
|
|
7504
7698
|
|
|
7505
7699
|
|
|
7700
|
+
</div>
|
|
7701
|
+
</article>
|
|
7702
|
+
<article
|
|
7703
|
+
class="card
|
|
7704
|
+
no-error
|
|
7705
|
+
no-info
|
|
7706
|
+
no-story-error
|
|
7707
|
+
no-doc-error"
|
|
7708
|
+
role="listitem"
|
|
7709
|
+
aria-label="InputNumber">
|
|
7710
|
+
<div class="head">
|
|
7711
|
+
<div class="title">
|
|
7712
|
+
<h2><span class="status-dot dot-ok"></span> InputNumber</h2>
|
|
7713
|
+
<div class="badges">
|
|
7714
|
+
<label for="c-20-components-inputnumber-props" class="badge ok as-toggle">7 prop types</label>
|
|
7715
|
+
|
|
7716
|
+
<label for="c-20-components-inputnumber-stories" class="badge ok as-toggle">11 stories</label>
|
|
7717
|
+
|
|
7718
|
+
|
|
7719
|
+
</div>
|
|
7720
|
+
</div>
|
|
7721
|
+
<div class="meta" title="./src/input-number/input-number.stories.tsx">components-inputnumber · ./src/input-number/input-number.stories.tsx</div>
|
|
7722
|
+
<div>Numeric input formatting as you type, built on react-number-format</div>
|
|
7723
|
+
<div class="hint">InputNumber is a text field that only takes digits and a decimal point and
|
|
7724
|
+
formats them as the user types: thousands separators on request, leading
|
|
7725
|
+
zeros kept unless turned off, no sign. `onChange` fires with the formatted text in
|
|
7726
|
+
`event.target.value`. It is an `Input` driven by `react-number-format`, so
|
|
7727
|
+
it takes its label, messages and states from a surrounding `FieldText`.</div>
|
|
7728
|
+
<div class="kv"><span class="chip">summary: Numeric input formatting as you type, built on react-number-format</span><span class="chip">dataAttribute: {string} data-slot - Always set to "input-number"</span><span class="chip">example: <FieldText>
|
|
7729
|
+
<Label>Annual premium</Label>
|
|
7730
|
+
<InputNumber name="premium" thousandSeparator allowLeadingZeros={false} />
|
|
7731
|
+
</FieldText></span></div>
|
|
7732
|
+
</div>
|
|
7733
|
+
|
|
7734
|
+
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
7735
|
+
|
|
7736
|
+
|
|
7737
|
+
<input id="c-20-components-inputnumber-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
7738
|
+
|
|
7739
|
+
|
|
7740
|
+
<input id="c-20-components-inputnumber-props" class="tg tg-props" type="checkbox" hidden />
|
|
7741
|
+
|
|
7742
|
+
<div class="panels">
|
|
7743
|
+
|
|
7744
|
+
|
|
7745
|
+
|
|
7746
|
+
<div class="panel panel-props">
|
|
7747
|
+
<div class="note ok">
|
|
7748
|
+
<div class="row">
|
|
7749
|
+
<span class="ex-name">Prop types <small>(react-component-meta)</small></span>
|
|
7750
|
+
<span class="badge ok">7 prop types</span>
|
|
7751
|
+
</div>
|
|
7752
|
+
<pre><code>Component: src/input-number/input-number.tsx::InputNumber</code></pre>
|
|
7753
|
+
<pre><code>Props:</code></pre>
|
|
7754
|
+
<pre><code>/**
|
|
7755
|
+
* Keeps zeros typed in front of the number (`007`), which an identifier
|
|
7756
|
+
* such as an NPN or a ZIP code needs. Set it to `false` for an amount, so
|
|
7757
|
+
* `007` becomes `7` once the field loses focus, and `onChange` fires with
|
|
7758
|
+
* the trimmed value. Defaults to `true`.
|
|
7759
|
+
*/
|
|
7760
|
+
allowLeadingZeros?: boolean = true
|
|
7761
|
+
|
|
7762
|
+
/**
|
|
7763
|
+
* Initial value of an uncontrolled field, in the same forms as `value`.
|
|
7764
|
+
*/
|
|
7765
|
+
defaultValue?: string | number | null | undefined
|
|
7766
|
+
|
|
7767
|
+
/**
|
|
7768
|
+
* Highest value the field accepts. A keystroke or paste that would take
|
|
7769
|
+
* the number above it is dropped before it reaches the field, so `onChange`
|
|
7770
|
+
* is not called for it. No limit by default.
|
|
7771
|
+
*/
|
|
7772
|
+
maxNumber?: number
|
|
7773
|
+
|
|
7774
|
+
/**
|
|
7775
|
+
* Control height. Defaults to `'md'`.
|
|
7776
|
+
* - `sm` (32px) — dense layouts where vertical space is tight.
|
|
7777
|
+
* - `md` (40px) — standard form density.
|
|
7778
|
+
* - `lg` (48px) — low-density forms and larger touch targets. Also raises
|
|
7779
|
+
* the text to `base` and the corner radius to `lg`.
|
|
7780
|
+
*/
|
|
7781
|
+
size?: "sm" | "md" | "lg"
|
|
7782
|
+
|
|
7783
|
+
/**
|
|
7784
|
+
* Groups the integer part in thousands with a comma as the user types
|
|
7785
|
+
* (`1,234,567`). The separators are part of `event.target.value`. Defaults
|
|
7786
|
+
* to `false`.
|
|
7787
|
+
*/
|
|
7788
|
+
thousandSeparator?: boolean = false
|
|
7789
|
+
|
|
7790
|
+
/**
|
|
7791
|
+
* The underlying `<input>` type. Defaults to `'text'`.
|
|
7792
|
+
* - `text` — the general case.
|
|
7793
|
+
* - `tel` — brings up the numeric keypad on phones, for codes and
|
|
7794
|
+
* identifiers that are digits only.
|
|
7795
|
+
* - `password` — masks the digits, for a PIN.
|
|
7796
|
+
*/
|
|
7797
|
+
type?: "text" | "tel" | "password"
|
|
7798
|
+
|
|
7799
|
+
/**
|
|
7800
|
+
* The number to show, as a number or as a string of digits. It is displayed
|
|
7801
|
+
* formatted according to `thousandSeparator`. `null` and `''` both clear the
|
|
7802
|
+
* field.
|
|
7803
|
+
*/
|
|
7804
|
+
value?: string | number | null | undefined</code></pre>
|
|
7805
|
+
</div>
|
|
7806
|
+
</div>
|
|
7807
|
+
|
|
7808
|
+
<div class="panel panel-stories">
|
|
7809
|
+
|
|
7810
|
+
|
|
7811
|
+
|
|
7812
|
+
<div class="note ok">
|
|
7813
|
+
<div class="row">
|
|
7814
|
+
<span class="ex-name">Imports</span>
|
|
7815
|
+
</div>
|
|
7816
|
+
<pre><code>import { Controller, Field, FieldText, InputContext, InputGroup, InputNumber, Label } from "@agentero/design-system";</code></pre>
|
|
7817
|
+
</div>
|
|
7818
|
+
|
|
7819
|
+
|
|
7820
|
+
<div class="note ok">
|
|
7821
|
+
<div class="row">
|
|
7822
|
+
<span class="ex-name">Default</span>
|
|
7823
|
+
<span class="badge ok">story ok</span>
|
|
7824
|
+
</div>
|
|
7825
|
+
<div>Numeric field that ignores letters and signs</div>
|
|
7826
|
+
<div class="hint">Only digits and a decimal point make it into the field: letters and a minus
|
|
7827
|
+
sign are ignored as they are typed. `onChange` reports the text as it is shown, and the `ref`
|
|
7828
|
+
points at the `<input>` element.</div>
|
|
7829
|
+
<pre><code>const Default = () => <InputNumber
|
|
7830
|
+
aria-label="Premium"
|
|
7831
|
+
onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}
|
|
7832
|
+
ref={inputRef} />;</code></pre>
|
|
7833
|
+
</div>
|
|
7834
|
+
<div class="note ok">
|
|
7835
|
+
<div class="row">
|
|
7836
|
+
<span class="ex-name">Type Tel</span>
|
|
7837
|
+
<span class="badge ok">story ok</span>
|
|
7838
|
+
</div>
|
|
7839
|
+
<div>Numeric keypad on phones through the tel input type</div>
|
|
7840
|
+
<div class="hint">`type="tel"` brings up the numeric keypad on phones. The field still
|
|
7841
|
+
formats and filters the same way; only the underlying input type changes.</div>
|
|
7842
|
+
<pre><code>const TypeTel = () => <InputNumber
|
|
7843
|
+
aria-label="NPN"
|
|
7844
|
+
onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}
|
|
7845
|
+
type="tel" />;</code></pre>
|
|
7846
|
+
</div>
|
|
7847
|
+
<div class="note ok">
|
|
7848
|
+
<div class="row">
|
|
7849
|
+
<span class="ex-name">Thousand Separator</span>
|
|
7850
|
+
<span class="badge ok">story ok</span>
|
|
7851
|
+
</div>
|
|
7852
|
+
<div>Thousands grouped with commas as the user types</div>
|
|
7853
|
+
<div class="hint">With `thousandSeparator` the integer part is grouped with commas as the
|
|
7854
|
+
user types, and the commas are part of what `onChange` reports.</div>
|
|
7855
|
+
<pre><code>const ThousandSeparator = () => <InputNumber
|
|
7856
|
+
aria-label="Premium"
|
|
7857
|
+
onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}
|
|
7858
|
+
thousandSeparator />;</code></pre>
|
|
7859
|
+
</div>
|
|
7860
|
+
<div class="note ok">
|
|
7861
|
+
<div class="row">
|
|
7862
|
+
<span class="ex-name">Max Number</span>
|
|
7863
|
+
<span class="badge ok">story ok</span>
|
|
7864
|
+
</div>
|
|
7865
|
+
<div>Keystrokes that would exceed a maximum are dropped</div>
|
|
7866
|
+
<div class="hint">`maxNumber` caps the value: a keystroke that would push the number above
|
|
7867
|
+
it is dropped, so the field keeps its previous value and `onChange` is not
|
|
7868
|
+
called for it.</div>
|
|
7869
|
+
<pre><code>const MaxNumber = () => <InputNumber
|
|
7870
|
+
aria-label="Commission rate"
|
|
7871
|
+
onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}
|
|
7872
|
+
maxNumber={100} />;</code></pre>
|
|
7873
|
+
</div>
|
|
7874
|
+
<div class="note ok">
|
|
7875
|
+
<div class="row">
|
|
7876
|
+
<span class="ex-name">Leading Zeros</span>
|
|
7877
|
+
<span class="badge ok">story ok</span>
|
|
7878
|
+
</div>
|
|
7879
|
+
<div>Leading zeros kept by default, dropped on blur when turned off</div>
|
|
7880
|
+
<div class="hint">Leading zeros are kept by default, as an NPN or a ZIP code needs. With
|
|
7881
|
+
`allowLeadingZeros` off they are dropped once the field loses focus, which
|
|
7882
|
+
is what an amount wants, and `onChange` reports the trimmed value.</div>
|
|
7883
|
+
<pre><code>const LeadingZeros = () => <div style={{ display: 'grid', gap: '1rem' }}>
|
|
7884
|
+
<InputNumber
|
|
7885
|
+
onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}
|
|
7886
|
+
aria-label="ZIP code" />
|
|
7887
|
+
<InputNumber
|
|
7888
|
+
onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}
|
|
7889
|
+
aria-label="Amount"
|
|
7890
|
+
allowLeadingZeros={false} />
|
|
7891
|
+
</div>;</code></pre>
|
|
7892
|
+
</div>
|
|
7893
|
+
<div class="note ok">
|
|
7894
|
+
<div class="row">
|
|
7895
|
+
<span class="ex-name">Controlled</span>
|
|
7896
|
+
<span class="badge ok">story ok</span>
|
|
7897
|
+
</div>
|
|
7898
|
+
<div>Controlled field showing a numeric value formatted</div>
|
|
7899
|
+
<div class="hint">A controlled field takes `value` as a number and shows it formatted. The
|
|
7900
|
+
state keeps what `onChange` reports, so it holds the formatted text.</div>
|
|
7901
|
+
<pre><code>const Controlled = () => {
|
|
7902
|
+
const [premium, setPremium] = useState<number | string>(1234);
|
|
7903
|
+
|
|
7904
|
+
return (
|
|
7905
|
+
<InputNumber
|
|
7906
|
+
aria-label="Premium"
|
|
7907
|
+
thousandSeparator
|
|
7908
|
+
value={premium}
|
|
7909
|
+
onChange={event => {
|
|
7910
|
+
setPremium(event.target.value);
|
|
7911
|
+
args.onChange?.(event);
|
|
7912
|
+
}} />
|
|
7913
|
+
);
|
|
7914
|
+
};</code></pre>
|
|
7915
|
+
</div>
|
|
7916
|
+
<div class="note ok">
|
|
7917
|
+
<div class="row">
|
|
7918
|
+
<span class="ex-name">Inside Input Group</span>
|
|
7919
|
+
<span class="badge ok">story ok</span>
|
|
7920
|
+
</div>
|
|
7921
|
+
<div>Amount with a currency prefix inside an input group</div>
|
|
7922
|
+
<div class="hint">Inside an `InputGroup` the field sits behind a currency affix and the
|
|
7923
|
+
frame takes its focus, disabled and invalid states from the input.</div>
|
|
7924
|
+
<pre><code>const InsideInputGroup = () => <InputGroup.Root>
|
|
7925
|
+
<InputGroup.Text>$</InputGroup.Text>
|
|
7926
|
+
<InputNumber
|
|
7927
|
+
aria-label="Premium"
|
|
7928
|
+
onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}
|
|
7929
|
+
thousandSeparator
|
|
7930
|
+
allowLeadingZeros={false}
|
|
7931
|
+
placeholder="0" />
|
|
7932
|
+
</InputGroup.Root>;</code></pre>
|
|
7933
|
+
</div>
|
|
7934
|
+
<div class="note ok">
|
|
7935
|
+
<div class="row">
|
|
7936
|
+
<span class="ex-name">Inside Field Text</span>
|
|
7937
|
+
<span class="badge ok">story ok</span>
|
|
7938
|
+
</div>
|
|
7939
|
+
<div>Label, messages and states reaching the input from a FieldText</div>
|
|
7940
|
+
<div class="hint">Inside a `FieldText` the input takes its label, description and states from
|
|
7941
|
+
the field. `invalid` on the field sets `aria-invalid`, which paints the
|
|
7942
|
+
destructive border, and `disabled` reaches the input the same way.</div>
|
|
7943
|
+
<pre><code>const InsideFieldText = () => (
|
|
7944
|
+
<div style={{ display: 'grid', gap: '1.5rem' }}>
|
|
7945
|
+
<FieldText required>
|
|
7946
|
+
<Label>NPN</Label>
|
|
7947
|
+
<InputNumber type="tel" />
|
|
7948
|
+
<Field.Description>The 7 to 10 digit National Producer Number.</Field.Description>
|
|
7949
|
+
</FieldText>
|
|
7950
|
+
<FieldText invalid>
|
|
7951
|
+
<Label>Years in business</Label>
|
|
7952
|
+
<InputNumber defaultValue={150} />
|
|
7953
|
+
<Field.Error errors={[{ message: 'Enter at most 100 years.' }]} />
|
|
7954
|
+
</FieldText>
|
|
7955
|
+
<FieldText disabled>
|
|
7956
|
+
<Label>Agency code</Label>
|
|
7957
|
+
<InputNumber defaultValue="00412" />
|
|
7958
|
+
</FieldText>
|
|
7959
|
+
</div>
|
|
7960
|
+
);</code></pre>
|
|
7961
|
+
</div>
|
|
7962
|
+
<div class="note ok">
|
|
7963
|
+
<div class="row">
|
|
7964
|
+
<span class="ex-name">Disabled</span>
|
|
7965
|
+
<span class="badge ok">story ok</span>
|
|
7966
|
+
</div>
|
|
7967
|
+
<div>Disabled field with a formatted value</div>
|
|
7968
|
+
<div class="hint">A disabled field keeps its formatted value and takes no input.</div>
|
|
7969
|
+
<pre><code>const Disabled = () => <InputNumber
|
|
7970
|
+
aria-label="Premium"
|
|
7971
|
+
onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}
|
|
7972
|
+
disabled
|
|
7973
|
+
thousandSeparator
|
|
7974
|
+
defaultValue={12500} />;</code></pre>
|
|
7975
|
+
</div>
|
|
7976
|
+
<div class="note ok">
|
|
7977
|
+
<div class="row">
|
|
7978
|
+
<span class="ex-name">Invalid</span>
|
|
7979
|
+
<span class="badge ok">story ok</span>
|
|
7980
|
+
</div>
|
|
7981
|
+
<div>Invalid state driven by aria-invalid</div>
|
|
7982
|
+
<div class="hint">`aria-invalid` paints the destructive border, the same way it does on a
|
|
7983
|
+
plain `Input`.</div>
|
|
7984
|
+
<pre><code>const Invalid = () => <InputNumber
|
|
7985
|
+
aria-label="Premium"
|
|
7986
|
+
onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}
|
|
7987
|
+
aria-invalid
|
|
7988
|
+
defaultValue={0} />;</code></pre>
|
|
7989
|
+
</div>
|
|
7990
|
+
<div class="note ok">
|
|
7991
|
+
<div class="row">
|
|
7992
|
+
<span class="ex-name">All Sizes</span>
|
|
7993
|
+
<span class="badge ok">story ok</span>
|
|
7994
|
+
</div>
|
|
7995
|
+
<div>The three sizes side by side</div>
|
|
7996
|
+
<div class="hint">The three sizes match Input's: 32, 40 or 48px tall.</div>
|
|
7997
|
+
<pre><code>const AllSizes = () => <div style={{ display: 'grid', gap: '1rem' }}>
|
|
7998
|
+
<InputNumber
|
|
7999
|
+
onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}
|
|
8000
|
+
thousandSeparator
|
|
8001
|
+
defaultValue={1234}
|
|
8002
|
+
size="sm"
|
|
8003
|
+
aria-label="Small" />
|
|
8004
|
+
<InputNumber
|
|
8005
|
+
onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}
|
|
8006
|
+
thousandSeparator
|
|
8007
|
+
defaultValue={1234}
|
|
8008
|
+
size="md"
|
|
8009
|
+
aria-label="Medium" />
|
|
8010
|
+
<InputNumber
|
|
8011
|
+
onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}
|
|
8012
|
+
thousandSeparator
|
|
8013
|
+
defaultValue={1234}
|
|
8014
|
+
size="lg"
|
|
8015
|
+
aria-label="Large" />
|
|
8016
|
+
</div>;</code></pre>
|
|
8017
|
+
</div>
|
|
8018
|
+
</div>
|
|
8019
|
+
|
|
8020
|
+
|
|
7506
8021
|
</div>
|
|
7507
8022
|
</article>
|
|
7508
8023
|
<article
|
|
@@ -7517,9 +8032,9 @@ button's start corners with the frame.</div>
|
|
|
7517
8032
|
<div class="title">
|
|
7518
8033
|
<h2><span class="status-dot dot-ok"></span> InputPassword</h2>
|
|
7519
8034
|
<div class="badges">
|
|
7520
|
-
<label for="c-
|
|
8035
|
+
<label for="c-21-components-inputpassword-props" class="badge ok as-toggle">1 prop type</label>
|
|
7521
8036
|
|
|
7522
|
-
<label for="c-
|
|
8037
|
+
<label for="c-21-components-inputpassword-stories" class="badge ok as-toggle">5 stories</label>
|
|
7523
8038
|
|
|
7524
8039
|
|
|
7525
8040
|
</div>
|
|
@@ -7540,10 +8055,10 @@ rendered while the input is disabled.</div>
|
|
|
7540
8055
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
7541
8056
|
|
|
7542
8057
|
|
|
7543
|
-
<input id="c-
|
|
8058
|
+
<input id="c-21-components-inputpassword-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
7544
8059
|
|
|
7545
8060
|
|
|
7546
|
-
<input id="c-
|
|
8061
|
+
<input id="c-21-components-inputpassword-props" class="tg tg-props" type="checkbox" hidden />
|
|
7547
8062
|
|
|
7548
8063
|
<div class="panels">
|
|
7549
8064
|
|
|
@@ -7685,9 +8200,9 @@ the field through the frame. A disabled field removes the toggle too.</div>
|
|
|
7685
8200
|
<div class="title">
|
|
7686
8201
|
<h2><span class="status-dot dot-ok"></span> InputSearch</h2>
|
|
7687
8202
|
<div class="badges">
|
|
7688
|
-
<label for="c-
|
|
8203
|
+
<label for="c-22-components-inputsearch-props" class="badge ok as-toggle">3 prop types</label>
|
|
7689
8204
|
|
|
7690
|
-
<label for="c-
|
|
8205
|
+
<label for="c-22-components-inputsearch-stories" class="badge ok as-toggle">7 stories</label>
|
|
7691
8206
|
|
|
7692
8207
|
|
|
7693
8208
|
</div>
|
|
@@ -7710,10 +8225,10 @@ once there is text. It is an `Input` of `type="search"` inside an
|
|
|
7710
8225
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
7711
8226
|
|
|
7712
8227
|
|
|
7713
|
-
<input id="c-
|
|
8228
|
+
<input id="c-22-components-inputsearch-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
7714
8229
|
|
|
7715
8230
|
|
|
7716
|
-
<input id="c-
|
|
8231
|
+
<input id="c-22-components-inputsearch-props" class="tg tg-props" type="checkbox" hidden />
|
|
7717
8232
|
|
|
7718
8233
|
<div class="panels">
|
|
7719
8234
|
|
|
@@ -7915,9 +8430,9 @@ several search fields does not read "Clear search" twice.</div>
|
|
|
7915
8430
|
<div class="title">
|
|
7916
8431
|
<h2><span class="status-dot dot-ok"></span> InputTel</h2>
|
|
7917
8432
|
<div class="badges">
|
|
7918
|
-
<label for="c-
|
|
8433
|
+
<label for="c-23-components-inputtel-props" class="badge ok as-toggle">1 prop type</label>
|
|
7919
8434
|
|
|
7920
|
-
<label for="c-
|
|
8435
|
+
<label for="c-23-components-inputtel-stories" class="badge ok as-toggle">11 stories</label>
|
|
7921
8436
|
|
|
7922
8437
|
|
|
7923
8438
|
</div>
|
|
@@ -7938,10 +8453,10 @@ with the masked text already in `event.target.value`.</div>
|
|
|
7938
8453
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
7939
8454
|
|
|
7940
8455
|
|
|
7941
|
-
<input id="c-
|
|
8456
|
+
<input id="c-23-components-inputtel-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
7942
8457
|
|
|
7943
8458
|
|
|
7944
|
-
<input id="c-
|
|
8459
|
+
<input id="c-23-components-inputtel-props" class="tg tg-props" type="checkbox" hidden />
|
|
7945
8460
|
|
|
7946
8461
|
<div class="panels">
|
|
7947
8462
|
|
|
@@ -8179,9 +8694,9 @@ with the input.</div>
|
|
|
8179
8694
|
<div class="title">
|
|
8180
8695
|
<h2><span class="status-dot dot-ok"></span> Label</h2>
|
|
8181
8696
|
<div class="badges">
|
|
8182
|
-
<label for="c-
|
|
8697
|
+
<label for="c-24-components-label-props" class="badge ok as-toggle">3 prop types</label>
|
|
8183
8698
|
|
|
8184
|
-
<label for="c-
|
|
8699
|
+
<label for="c-24-components-label-stories" class="badge ok as-toggle">5 stories</label>
|
|
8185
8700
|
|
|
8186
8701
|
|
|
8187
8702
|
</div>
|
|
@@ -8201,10 +8716,10 @@ still has to carry `required` / `aria-required`.</div>
|
|
|
8201
8716
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
8202
8717
|
|
|
8203
8718
|
|
|
8204
|
-
<input id="c-
|
|
8719
|
+
<input id="c-24-components-label-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
8205
8720
|
|
|
8206
8721
|
|
|
8207
|
-
<input id="c-
|
|
8722
|
+
<input id="c-24-components-label-props" class="tg tg-props" type="checkbox" hidden />
|
|
8208
8723
|
|
|
8209
8724
|
<div class="panels">
|
|
8210
8725
|
|
|
@@ -8328,9 +8843,9 @@ field's control with no `htmlFor`. An explicit `htmlFor` still wins.</div>
|
|
|
8328
8843
|
<div class="title">
|
|
8329
8844
|
<h2><span class="status-dot dot-ok"></span> Loading</h2>
|
|
8330
8845
|
<div class="badges">
|
|
8331
|
-
<label for="c-
|
|
8846
|
+
<label for="c-25-components-loading-props" class="badge ok as-toggle">1 prop type</label>
|
|
8332
8847
|
|
|
8333
|
-
<label for="c-
|
|
8848
|
+
<label for="c-25-components-loading-stories" class="badge ok as-toggle">7 stories</label>
|
|
8334
8849
|
|
|
8335
8850
|
|
|
8336
8851
|
</div>
|
|
@@ -8347,10 +8862,10 @@ parent font size via `em`-based size variants (`sm`, `md`, `lg`).</div>
|
|
|
8347
8862
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
8348
8863
|
|
|
8349
8864
|
|
|
8350
|
-
<input id="c-
|
|
8865
|
+
<input id="c-25-components-loading-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
8351
8866
|
|
|
8352
8867
|
|
|
8353
|
-
<input id="c-
|
|
8868
|
+
<input id="c-25-components-loading-props" class="tg tg-props" type="checkbox" hidden />
|
|
8354
8869
|
|
|
8355
8870
|
<div class="panels">
|
|
8356
8871
|
|
|
@@ -8501,9 +9016,9 @@ against the dark background.</div>
|
|
|
8501
9016
|
<div class="title">
|
|
8502
9017
|
<h2><span class="status-dot dot-ok"></span> Modal.Root</h2>
|
|
8503
9018
|
<div class="badges">
|
|
8504
|
-
<label for="c-
|
|
9019
|
+
<label for="c-26-components-modal-props" class="badge ok as-toggle">5 prop types</label>
|
|
8505
9020
|
|
|
8506
|
-
<label for="c-
|
|
9021
|
+
<label for="c-26-components-modal-stories" class="badge ok as-toggle">6 stories</label>
|
|
8507
9022
|
|
|
8508
9023
|
|
|
8509
9024
|
</div>
|
|
@@ -8549,10 +9064,10 @@ import { Modal } from '@agentero/design-system/modal';
|
|
|
8549
9064
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
8550
9065
|
|
|
8551
9066
|
|
|
8552
|
-
<input id="c-
|
|
9067
|
+
<input id="c-26-components-modal-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
8553
9068
|
|
|
8554
9069
|
|
|
8555
|
-
<input id="c-
|
|
9070
|
+
<input id="c-26-components-modal-props" class="tg tg-props" type="checkbox" hidden />
|
|
8556
9071
|
|
|
8557
9072
|
<div class="panels">
|
|
8558
9073
|
|
|
@@ -8772,9 +9287,9 @@ announced as an `alertdialog`. Only the footer actions close it.</div>
|
|
|
8772
9287
|
<div class="title">
|
|
8773
9288
|
<h2><span class="status-dot dot-ok"></span> Pagination</h2>
|
|
8774
9289
|
<div class="badges">
|
|
8775
|
-
<label for="c-
|
|
9290
|
+
<label for="c-27-components-pagination-props" class="badge ok as-toggle">5 prop types</label>
|
|
8776
9291
|
|
|
8777
|
-
<label for="c-
|
|
9292
|
+
<label for="c-27-components-pagination-stories" class="badge ok as-toggle">7 stories</label>
|
|
8778
9293
|
|
|
8779
9294
|
|
|
8780
9295
|
</div>
|
|
@@ -8804,10 +9319,10 @@ const [page, setPage] = useState(1);
|
|
|
8804
9319
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
8805
9320
|
|
|
8806
9321
|
|
|
8807
|
-
<input id="c-
|
|
9322
|
+
<input id="c-27-components-pagination-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
8808
9323
|
|
|
8809
9324
|
|
|
8810
|
-
<input id="c-
|
|
9325
|
+
<input id="c-27-components-pagination-props" class="tg tg-props" type="checkbox" hidden />
|
|
8811
9326
|
|
|
8812
9327
|
<div class="panels">
|
|
8813
9328
|
|
|
@@ -8962,9 +9477,9 @@ entries summary follow along.</div>
|
|
|
8962
9477
|
<div class="title">
|
|
8963
9478
|
<h2><span class="status-dot dot-ok"></span> Popover.Root</h2>
|
|
8964
9479
|
<div class="badges">
|
|
8965
|
-
<label for="c-
|
|
9480
|
+
<label for="c-28-components-popover-props" class="badge ok as-toggle">5 prop types</label>
|
|
8966
9481
|
|
|
8967
|
-
<label for="c-
|
|
9482
|
+
<label for="c-28-components-popover-stories" class="badge ok as-toggle">5 stories</label>
|
|
8968
9483
|
|
|
8969
9484
|
|
|
8970
9485
|
</div>
|
|
@@ -8993,10 +9508,10 @@ import { Popover } from '@agentero/design-system/popover';
|
|
|
8993
9508
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
8994
9509
|
|
|
8995
9510
|
|
|
8996
|
-
<input id="c-
|
|
9511
|
+
<input id="c-28-components-popover-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
8997
9512
|
|
|
8998
9513
|
|
|
8999
|
-
<input id="c-
|
|
9514
|
+
<input id="c-28-components-popover-props" class="tg tg-props" type="checkbox" hidden />
|
|
9000
9515
|
|
|
9001
9516
|
<div class="panels">
|
|
9002
9517
|
|
|
@@ -9195,9 +9710,9 @@ focus returning to its trigger once the modal closes.</div>
|
|
|
9195
9710
|
<div class="title">
|
|
9196
9711
|
<h2><span class="status-dot dot-ok"></span> Progress</h2>
|
|
9197
9712
|
<div class="badges">
|
|
9198
|
-
<label for="c-
|
|
9713
|
+
<label for="c-29-components-progress-props" class="badge ok as-toggle">4 prop types</label>
|
|
9199
9714
|
|
|
9200
|
-
<label for="c-
|
|
9715
|
+
<label for="c-29-components-progress-stories" class="badge ok as-toggle">4 stories</label>
|
|
9201
9716
|
|
|
9202
9717
|
|
|
9203
9718
|
</div>
|
|
@@ -9216,10 +9731,10 @@ with `currentColor`, so recolor it with a plain text class — e.g.
|
|
|
9216
9731
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
9217
9732
|
|
|
9218
9733
|
|
|
9219
|
-
<input id="c-
|
|
9734
|
+
<input id="c-29-components-progress-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
9220
9735
|
|
|
9221
9736
|
|
|
9222
|
-
<input id="c-
|
|
9737
|
+
<input id="c-29-components-progress-props" class="tg tg-props" type="checkbox" hidden />
|
|
9223
9738
|
|
|
9224
9739
|
<div class="panels">
|
|
9225
9740
|
|
|
@@ -9338,7 +9853,7 @@ percentage: number</code></pre>
|
|
|
9338
9853
|
<div class="badges">
|
|
9339
9854
|
|
|
9340
9855
|
|
|
9341
|
-
<label for="c-
|
|
9856
|
+
<label for="c-30-components-skeleton-stories" class="badge ok as-toggle">4 stories</label>
|
|
9342
9857
|
|
|
9343
9858
|
|
|
9344
9859
|
</div>
|
|
@@ -9355,7 +9870,7 @@ shape it with Tailwind classes to mirror the content it stands in for.</div>
|
|
|
9355
9870
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
9356
9871
|
|
|
9357
9872
|
|
|
9358
|
-
<input id="c-
|
|
9873
|
+
<input id="c-30-components-skeleton-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
9359
9874
|
|
|
9360
9875
|
|
|
9361
9876
|
|
|
@@ -9451,9 +9966,9 @@ shape it with Tailwind classes to mirror the content it stands in for.</div>
|
|
|
9451
9966
|
<div class="title">
|
|
9452
9967
|
<h2><span class="status-dot dot-ok"></span> Switch</h2>
|
|
9453
9968
|
<div class="badges">
|
|
9454
|
-
<label for="c-
|
|
9969
|
+
<label for="c-31-components-switch-props" class="badge ok as-toggle">8 prop types</label>
|
|
9455
9970
|
|
|
9456
|
-
<label for="c-
|
|
9971
|
+
<label for="c-31-components-switch-stories" class="badge ok as-toggle">7 stories</label>
|
|
9457
9972
|
|
|
9458
9973
|
|
|
9459
9974
|
</div>
|
|
@@ -9469,10 +9984,10 @@ a Checkbox for a single boolean that applies instantly, and pair it with a
|
|
|
9469
9984
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
9470
9985
|
|
|
9471
9986
|
|
|
9472
|
-
<input id="c-
|
|
9987
|
+
<input id="c-31-components-switch-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
9473
9988
|
|
|
9474
9989
|
|
|
9475
|
-
<input id="c-
|
|
9990
|
+
<input id="c-31-components-switch-props" class="tg tg-props" type="checkbox" hidden />
|
|
9476
9991
|
|
|
9477
9992
|
<div class="panels">
|
|
9478
9993
|
|
|
@@ -9653,9 +10168,9 @@ size?: "sm" | "md"</code></pre>
|
|
|
9653
10168
|
<div class="title">
|
|
9654
10169
|
<h2><span class="status-dot dot-ok"></span> Table.Root</h2>
|
|
9655
10170
|
<div class="badges">
|
|
9656
|
-
<label for="c-
|
|
10171
|
+
<label for="c-32-components-table-props" class="badge ok as-toggle">6 prop types</label>
|
|
9657
10172
|
|
|
9658
|
-
<label for="c-
|
|
10173
|
+
<label for="c-32-components-table-stories" class="badge ok as-toggle">10 stories</label>
|
|
9659
10174
|
|
|
9660
10175
|
|
|
9661
10176
|
</div>
|
|
@@ -9686,10 +10201,10 @@ import { Table } from '@agentero/design-system/table';
|
|
|
9686
10201
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
9687
10202
|
|
|
9688
10203
|
|
|
9689
|
-
<input id="c-
|
|
10204
|
+
<input id="c-32-components-table-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
9690
10205
|
|
|
9691
10206
|
|
|
9692
|
-
<input id="c-
|
|
10207
|
+
<input id="c-32-components-table-props" class="tg tg-props" type="checkbox" hidden />
|
|
9693
10208
|
|
|
9694
10209
|
<div class="panels">
|
|
9695
10210
|
|
|
@@ -9907,9 +10422,9 @@ keeps its padding.</div>
|
|
|
9907
10422
|
<div class="title">
|
|
9908
10423
|
<h2><span class="status-dot dot-ok"></span> Tabs.Root</h2>
|
|
9909
10424
|
<div class="badges">
|
|
9910
|
-
<label for="c-
|
|
10425
|
+
<label for="c-33-components-tabs-props" class="badge ok as-toggle">9 prop types</label>
|
|
9911
10426
|
|
|
9912
|
-
<label for="c-
|
|
10427
|
+
<label for="c-33-components-tabs-stories" class="badge ok as-toggle">8 stories</label>
|
|
9913
10428
|
|
|
9914
10429
|
|
|
9915
10430
|
</div>
|
|
@@ -9940,10 +10455,10 @@ import { Tabs } from '@agentero/design-system/tabs';
|
|
|
9940
10455
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
9941
10456
|
|
|
9942
10457
|
|
|
9943
|
-
<input id="c-
|
|
10458
|
+
<input id="c-33-components-tabs-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
9944
10459
|
|
|
9945
10460
|
|
|
9946
|
-
<input id="c-
|
|
10461
|
+
<input id="c-33-components-tabs-props" class="tg tg-props" type="checkbox" hidden />
|
|
9947
10462
|
|
|
9948
10463
|
<div class="panels">
|
|
9949
10464
|
|
|
@@ -10164,9 +10679,9 @@ tablist role is announced.</div>
|
|
|
10164
10679
|
<div class="title">
|
|
10165
10680
|
<h2><span class="status-dot dot-ok"></span> Tag</h2>
|
|
10166
10681
|
<div class="badges">
|
|
10167
|
-
<label for="c-
|
|
10682
|
+
<label for="c-34-components-tag-props" class="badge ok as-toggle">8 prop types</label>
|
|
10168
10683
|
|
|
10169
|
-
<label for="c-
|
|
10684
|
+
<label for="c-34-components-tag-stories" class="badge ok as-toggle">12 stories</label>
|
|
10170
10685
|
|
|
10171
10686
|
|
|
10172
10687
|
</div>
|
|
@@ -10185,10 +10700,10 @@ it an interactive link or button, which adds the pointer cursor and hover fill.<
|
|
|
10185
10700
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
10186
10701
|
|
|
10187
10702
|
|
|
10188
|
-
<input id="c-
|
|
10703
|
+
<input id="c-34-components-tag-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
10189
10704
|
|
|
10190
10705
|
|
|
10191
|
-
<input id="c-
|
|
10706
|
+
<input id="c-34-components-tag-props" class="tg tg-props" type="checkbox" hidden />
|
|
10192
10707
|
|
|
10193
10708
|
<div class="panels">
|
|
10194
10709
|
|
|
@@ -10613,9 +11128,9 @@ leading + trailing icons, and icon-only.</div>
|
|
|
10613
11128
|
<div class="title">
|
|
10614
11129
|
<h2><span class="status-dot dot-ok"></span> TextArea</h2>
|
|
10615
11130
|
<div class="badges">
|
|
10616
|
-
<label for="c-
|
|
11131
|
+
<label for="c-35-components-textarea-props" class="badge ok as-toggle">1 prop type</label>
|
|
10617
11132
|
|
|
10618
|
-
<label for="c-
|
|
11133
|
+
<label for="c-35-components-textarea-stories" class="badge ok as-toggle">6 stories</label>
|
|
10619
11134
|
|
|
10620
11135
|
|
|
10621
11136
|
</div>
|
|
@@ -10632,10 +11147,10 @@ states. It wires nothing on its own: `id`, `aria-invalid` and
|
|
|
10632
11147
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
10633
11148
|
|
|
10634
11149
|
|
|
10635
|
-
<input id="c-
|
|
11150
|
+
<input id="c-35-components-textarea-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
10636
11151
|
|
|
10637
11152
|
|
|
10638
|
-
<input id="c-
|
|
11153
|
+
<input id="c-35-components-textarea-props" class="tg tg-props" type="checkbox" hidden />
|
|
10639
11154
|
|
|
10640
11155
|
<div class="panels">
|
|
10641
11156
|
|
|
@@ -10767,9 +11282,9 @@ size and the minimum height shows three rows.</div>
|
|
|
10767
11282
|
<div class="title">
|
|
10768
11283
|
<h2><span class="status-dot dot-ok"></span> Toast</h2>
|
|
10769
11284
|
<div class="badges">
|
|
10770
|
-
<label for="c-
|
|
11285
|
+
<label for="c-36-components-toast-props" class="badge ok as-toggle">11 prop types</label>
|
|
10771
11286
|
|
|
10772
|
-
<label for="c-
|
|
11287
|
+
<label for="c-36-components-toast-stories" class="badge ok as-toggle">11 stories</label>
|
|
10773
11288
|
|
|
10774
11289
|
|
|
10775
11290
|
</div>
|
|
@@ -10788,10 +11303,10 @@ common feedback patterns.</div>
|
|
|
10788
11303
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
10789
11304
|
|
|
10790
11305
|
|
|
10791
|
-
<input id="c-
|
|
11306
|
+
<input id="c-36-components-toast-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
10792
11307
|
|
|
10793
11308
|
|
|
10794
|
-
<input id="c-
|
|
11309
|
+
<input id="c-36-components-toast-props" class="tg tg-props" type="checkbox" hidden />
|
|
10795
11310
|
|
|
10796
11311
|
<div class="panels">
|
|
10797
11312
|
|
|
@@ -11220,9 +11735,9 @@ action (e.g., a sync icon for a sync-in-progress toast).</div>
|
|
|
11220
11735
|
<div class="title">
|
|
11221
11736
|
<h2><span class="status-dot dot-ok"></span> Tooltip</h2>
|
|
11222
11737
|
<div class="badges">
|
|
11223
|
-
<label for="c-
|
|
11738
|
+
<label for="c-37-components-tooltip-props" class="badge ok as-toggle">12 prop types</label>
|
|
11224
11739
|
|
|
11225
|
-
<label for="c-
|
|
11740
|
+
<label for="c-37-components-tooltip-stories" class="badge ok as-toggle">5 stories</label>
|
|
11226
11741
|
|
|
11227
11742
|
|
|
11228
11743
|
</div>
|
|
@@ -11241,10 +11756,10 @@ on hover or focus.</div>
|
|
|
11241
11756
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
11242
11757
|
|
|
11243
11758
|
|
|
11244
|
-
<input id="c-
|
|
11759
|
+
<input id="c-37-components-tooltip-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
11245
11760
|
|
|
11246
11761
|
|
|
11247
|
-
<input id="c-
|
|
11762
|
+
<input id="c-37-components-tooltip-props" class="tg tg-props" type="checkbox" hidden />
|
|
11248
11763
|
|
|
11249
11764
|
<div class="panels">
|
|
11250
11765
|
|
|
@@ -11416,9 +11931,9 @@ sideOffset?: number = 4</code></pre>
|
|
|
11416
11931
|
<div class="title">
|
|
11417
11932
|
<h2><span class="status-dot dot-ok"></span> ValidationList</h2>
|
|
11418
11933
|
<div class="badges">
|
|
11419
|
-
<label for="c-
|
|
11934
|
+
<label for="c-38-components-validationlist-props" class="badge ok as-toggle">2 prop types</label>
|
|
11420
11935
|
|
|
11421
|
-
<label for="c-
|
|
11936
|
+
<label for="c-38-components-validationlist-stories" class="badge ok as-toggle">4 stories</label>
|
|
11422
11937
|
|
|
11423
11938
|
|
|
11424
11939
|
</div>
|
|
@@ -11439,10 +11954,10 @@ your form validation; it does not own the input or block submission.</div>
|
|
|
11439
11954
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
11440
11955
|
|
|
11441
11956
|
|
|
11442
|
-
<input id="c-
|
|
11957
|
+
<input id="c-38-components-validationlist-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
11443
11958
|
|
|
11444
11959
|
|
|
11445
|
-
<input id="c-
|
|
11960
|
+
<input id="c-38-components-validationlist-props" class="tg tg-props" type="checkbox" hidden />
|
|
11446
11961
|
|
|
11447
11962
|
<div class="panels">
|
|
11448
11963
|
|