@agentero/design-system 0.35.0 → 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 +300 -106
- package/mcp/manifests/components.json +169 -1
- package/package.json +3 -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
|
@@ -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>
|
|
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
|
|
|
@@ -7915,9 +8109,9 @@ several search fields does not read "Clear search" twice.</div>
|
|
|
7915
8109
|
<div class="title">
|
|
7916
8110
|
<h2><span class="status-dot dot-ok"></span> InputTel</h2>
|
|
7917
8111
|
<div class="badges">
|
|
7918
|
-
<label for="c-
|
|
8112
|
+
<label for="c-22-components-inputtel-props" class="badge ok as-toggle">1 prop type</label>
|
|
7919
8113
|
|
|
7920
|
-
<label for="c-
|
|
8114
|
+
<label for="c-22-components-inputtel-stories" class="badge ok as-toggle">11 stories</label>
|
|
7921
8115
|
|
|
7922
8116
|
|
|
7923
8117
|
</div>
|
|
@@ -7938,10 +8132,10 @@ with the masked text already in `event.target.value`.</div>
|
|
|
7938
8132
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
7939
8133
|
|
|
7940
8134
|
|
|
7941
|
-
<input id="c-
|
|
8135
|
+
<input id="c-22-components-inputtel-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
7942
8136
|
|
|
7943
8137
|
|
|
7944
|
-
<input id="c-
|
|
8138
|
+
<input id="c-22-components-inputtel-props" class="tg tg-props" type="checkbox" hidden />
|
|
7945
8139
|
|
|
7946
8140
|
<div class="panels">
|
|
7947
8141
|
|
|
@@ -8179,9 +8373,9 @@ with the input.</div>
|
|
|
8179
8373
|
<div class="title">
|
|
8180
8374
|
<h2><span class="status-dot dot-ok"></span> Label</h2>
|
|
8181
8375
|
<div class="badges">
|
|
8182
|
-
<label for="c-
|
|
8376
|
+
<label for="c-23-components-label-props" class="badge ok as-toggle">3 prop types</label>
|
|
8183
8377
|
|
|
8184
|
-
<label for="c-
|
|
8378
|
+
<label for="c-23-components-label-stories" class="badge ok as-toggle">5 stories</label>
|
|
8185
8379
|
|
|
8186
8380
|
|
|
8187
8381
|
</div>
|
|
@@ -8201,10 +8395,10 @@ still has to carry `required` / `aria-required`.</div>
|
|
|
8201
8395
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
8202
8396
|
|
|
8203
8397
|
|
|
8204
|
-
<input id="c-
|
|
8398
|
+
<input id="c-23-components-label-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
8205
8399
|
|
|
8206
8400
|
|
|
8207
|
-
<input id="c-
|
|
8401
|
+
<input id="c-23-components-label-props" class="tg tg-props" type="checkbox" hidden />
|
|
8208
8402
|
|
|
8209
8403
|
<div class="panels">
|
|
8210
8404
|
|
|
@@ -8328,9 +8522,9 @@ field's control with no `htmlFor`. An explicit `htmlFor` still wins.</div>
|
|
|
8328
8522
|
<div class="title">
|
|
8329
8523
|
<h2><span class="status-dot dot-ok"></span> Loading</h2>
|
|
8330
8524
|
<div class="badges">
|
|
8331
|
-
<label for="c-
|
|
8525
|
+
<label for="c-24-components-loading-props" class="badge ok as-toggle">1 prop type</label>
|
|
8332
8526
|
|
|
8333
|
-
<label for="c-
|
|
8527
|
+
<label for="c-24-components-loading-stories" class="badge ok as-toggle">7 stories</label>
|
|
8334
8528
|
|
|
8335
8529
|
|
|
8336
8530
|
</div>
|
|
@@ -8347,10 +8541,10 @@ parent font size via `em`-based size variants (`sm`, `md`, `lg`).</div>
|
|
|
8347
8541
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
8348
8542
|
|
|
8349
8543
|
|
|
8350
|
-
<input id="c-
|
|
8544
|
+
<input id="c-24-components-loading-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
8351
8545
|
|
|
8352
8546
|
|
|
8353
|
-
<input id="c-
|
|
8547
|
+
<input id="c-24-components-loading-props" class="tg tg-props" type="checkbox" hidden />
|
|
8354
8548
|
|
|
8355
8549
|
<div class="panels">
|
|
8356
8550
|
|
|
@@ -8501,9 +8695,9 @@ against the dark background.</div>
|
|
|
8501
8695
|
<div class="title">
|
|
8502
8696
|
<h2><span class="status-dot dot-ok"></span> Modal.Root</h2>
|
|
8503
8697
|
<div class="badges">
|
|
8504
|
-
<label for="c-
|
|
8698
|
+
<label for="c-25-components-modal-props" class="badge ok as-toggle">5 prop types</label>
|
|
8505
8699
|
|
|
8506
|
-
<label for="c-
|
|
8700
|
+
<label for="c-25-components-modal-stories" class="badge ok as-toggle">6 stories</label>
|
|
8507
8701
|
|
|
8508
8702
|
|
|
8509
8703
|
</div>
|
|
@@ -8549,10 +8743,10 @@ import { Modal } from '@agentero/design-system/modal';
|
|
|
8549
8743
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
8550
8744
|
|
|
8551
8745
|
|
|
8552
|
-
<input id="c-
|
|
8746
|
+
<input id="c-25-components-modal-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
8553
8747
|
|
|
8554
8748
|
|
|
8555
|
-
<input id="c-
|
|
8749
|
+
<input id="c-25-components-modal-props" class="tg tg-props" type="checkbox" hidden />
|
|
8556
8750
|
|
|
8557
8751
|
<div class="panels">
|
|
8558
8752
|
|
|
@@ -8772,9 +8966,9 @@ announced as an `alertdialog`. Only the footer actions close it.</div>
|
|
|
8772
8966
|
<div class="title">
|
|
8773
8967
|
<h2><span class="status-dot dot-ok"></span> Pagination</h2>
|
|
8774
8968
|
<div class="badges">
|
|
8775
|
-
<label for="c-
|
|
8969
|
+
<label for="c-26-components-pagination-props" class="badge ok as-toggle">5 prop types</label>
|
|
8776
8970
|
|
|
8777
|
-
<label for="c-
|
|
8971
|
+
<label for="c-26-components-pagination-stories" class="badge ok as-toggle">7 stories</label>
|
|
8778
8972
|
|
|
8779
8973
|
|
|
8780
8974
|
</div>
|
|
@@ -8804,10 +8998,10 @@ const [page, setPage] = useState(1);
|
|
|
8804
8998
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
8805
8999
|
|
|
8806
9000
|
|
|
8807
|
-
<input id="c-
|
|
9001
|
+
<input id="c-26-components-pagination-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
8808
9002
|
|
|
8809
9003
|
|
|
8810
|
-
<input id="c-
|
|
9004
|
+
<input id="c-26-components-pagination-props" class="tg tg-props" type="checkbox" hidden />
|
|
8811
9005
|
|
|
8812
9006
|
<div class="panels">
|
|
8813
9007
|
|
|
@@ -8962,9 +9156,9 @@ entries summary follow along.</div>
|
|
|
8962
9156
|
<div class="title">
|
|
8963
9157
|
<h2><span class="status-dot dot-ok"></span> Popover.Root</h2>
|
|
8964
9158
|
<div class="badges">
|
|
8965
|
-
<label for="c-
|
|
9159
|
+
<label for="c-27-components-popover-props" class="badge ok as-toggle">5 prop types</label>
|
|
8966
9160
|
|
|
8967
|
-
<label for="c-
|
|
9161
|
+
<label for="c-27-components-popover-stories" class="badge ok as-toggle">5 stories</label>
|
|
8968
9162
|
|
|
8969
9163
|
|
|
8970
9164
|
</div>
|
|
@@ -8993,10 +9187,10 @@ import { Popover } from '@agentero/design-system/popover';
|
|
|
8993
9187
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
8994
9188
|
|
|
8995
9189
|
|
|
8996
|
-
<input id="c-
|
|
9190
|
+
<input id="c-27-components-popover-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
8997
9191
|
|
|
8998
9192
|
|
|
8999
|
-
<input id="c-
|
|
9193
|
+
<input id="c-27-components-popover-props" class="tg tg-props" type="checkbox" hidden />
|
|
9000
9194
|
|
|
9001
9195
|
<div class="panels">
|
|
9002
9196
|
|
|
@@ -9195,9 +9389,9 @@ focus returning to its trigger once the modal closes.</div>
|
|
|
9195
9389
|
<div class="title">
|
|
9196
9390
|
<h2><span class="status-dot dot-ok"></span> Progress</h2>
|
|
9197
9391
|
<div class="badges">
|
|
9198
|
-
<label for="c-
|
|
9392
|
+
<label for="c-28-components-progress-props" class="badge ok as-toggle">4 prop types</label>
|
|
9199
9393
|
|
|
9200
|
-
<label for="c-
|
|
9394
|
+
<label for="c-28-components-progress-stories" class="badge ok as-toggle">4 stories</label>
|
|
9201
9395
|
|
|
9202
9396
|
|
|
9203
9397
|
</div>
|
|
@@ -9216,10 +9410,10 @@ with `currentColor`, so recolor it with a plain text class — e.g.
|
|
|
9216
9410
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
9217
9411
|
|
|
9218
9412
|
|
|
9219
|
-
<input id="c-
|
|
9413
|
+
<input id="c-28-components-progress-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
9220
9414
|
|
|
9221
9415
|
|
|
9222
|
-
<input id="c-
|
|
9416
|
+
<input id="c-28-components-progress-props" class="tg tg-props" type="checkbox" hidden />
|
|
9223
9417
|
|
|
9224
9418
|
<div class="panels">
|
|
9225
9419
|
|
|
@@ -9338,7 +9532,7 @@ percentage: number</code></pre>
|
|
|
9338
9532
|
<div class="badges">
|
|
9339
9533
|
|
|
9340
9534
|
|
|
9341
|
-
<label for="c-
|
|
9535
|
+
<label for="c-29-components-skeleton-stories" class="badge ok as-toggle">4 stories</label>
|
|
9342
9536
|
|
|
9343
9537
|
|
|
9344
9538
|
</div>
|
|
@@ -9355,7 +9549,7 @@ shape it with Tailwind classes to mirror the content it stands in for.</div>
|
|
|
9355
9549
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
9356
9550
|
|
|
9357
9551
|
|
|
9358
|
-
<input id="c-
|
|
9552
|
+
<input id="c-29-components-skeleton-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
9359
9553
|
|
|
9360
9554
|
|
|
9361
9555
|
|
|
@@ -9451,9 +9645,9 @@ shape it with Tailwind classes to mirror the content it stands in for.</div>
|
|
|
9451
9645
|
<div class="title">
|
|
9452
9646
|
<h2><span class="status-dot dot-ok"></span> Switch</h2>
|
|
9453
9647
|
<div class="badges">
|
|
9454
|
-
<label for="c-
|
|
9648
|
+
<label for="c-30-components-switch-props" class="badge ok as-toggle">8 prop types</label>
|
|
9455
9649
|
|
|
9456
|
-
<label for="c-
|
|
9650
|
+
<label for="c-30-components-switch-stories" class="badge ok as-toggle">7 stories</label>
|
|
9457
9651
|
|
|
9458
9652
|
|
|
9459
9653
|
</div>
|
|
@@ -9469,10 +9663,10 @@ a Checkbox for a single boolean that applies instantly, and pair it with a
|
|
|
9469
9663
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
9470
9664
|
|
|
9471
9665
|
|
|
9472
|
-
<input id="c-
|
|
9666
|
+
<input id="c-30-components-switch-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
9473
9667
|
|
|
9474
9668
|
|
|
9475
|
-
<input id="c-
|
|
9669
|
+
<input id="c-30-components-switch-props" class="tg tg-props" type="checkbox" hidden />
|
|
9476
9670
|
|
|
9477
9671
|
<div class="panels">
|
|
9478
9672
|
|
|
@@ -9653,9 +9847,9 @@ size?: "sm" | "md"</code></pre>
|
|
|
9653
9847
|
<div class="title">
|
|
9654
9848
|
<h2><span class="status-dot dot-ok"></span> Table.Root</h2>
|
|
9655
9849
|
<div class="badges">
|
|
9656
|
-
<label for="c-
|
|
9850
|
+
<label for="c-31-components-table-props" class="badge ok as-toggle">6 prop types</label>
|
|
9657
9851
|
|
|
9658
|
-
<label for="c-
|
|
9852
|
+
<label for="c-31-components-table-stories" class="badge ok as-toggle">10 stories</label>
|
|
9659
9853
|
|
|
9660
9854
|
|
|
9661
9855
|
</div>
|
|
@@ -9686,10 +9880,10 @@ import { Table } from '@agentero/design-system/table';
|
|
|
9686
9880
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
9687
9881
|
|
|
9688
9882
|
|
|
9689
|
-
<input id="c-
|
|
9883
|
+
<input id="c-31-components-table-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
9690
9884
|
|
|
9691
9885
|
|
|
9692
|
-
<input id="c-
|
|
9886
|
+
<input id="c-31-components-table-props" class="tg tg-props" type="checkbox" hidden />
|
|
9693
9887
|
|
|
9694
9888
|
<div class="panels">
|
|
9695
9889
|
|
|
@@ -9907,9 +10101,9 @@ keeps its padding.</div>
|
|
|
9907
10101
|
<div class="title">
|
|
9908
10102
|
<h2><span class="status-dot dot-ok"></span> Tabs.Root</h2>
|
|
9909
10103
|
<div class="badges">
|
|
9910
|
-
<label for="c-
|
|
10104
|
+
<label for="c-32-components-tabs-props" class="badge ok as-toggle">9 prop types</label>
|
|
9911
10105
|
|
|
9912
|
-
<label for="c-
|
|
10106
|
+
<label for="c-32-components-tabs-stories" class="badge ok as-toggle">8 stories</label>
|
|
9913
10107
|
|
|
9914
10108
|
|
|
9915
10109
|
</div>
|
|
@@ -9940,10 +10134,10 @@ import { Tabs } from '@agentero/design-system/tabs';
|
|
|
9940
10134
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
9941
10135
|
|
|
9942
10136
|
|
|
9943
|
-
<input id="c-
|
|
10137
|
+
<input id="c-32-components-tabs-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
9944
10138
|
|
|
9945
10139
|
|
|
9946
|
-
<input id="c-
|
|
10140
|
+
<input id="c-32-components-tabs-props" class="tg tg-props" type="checkbox" hidden />
|
|
9947
10141
|
|
|
9948
10142
|
<div class="panels">
|
|
9949
10143
|
|
|
@@ -10164,9 +10358,9 @@ tablist role is announced.</div>
|
|
|
10164
10358
|
<div class="title">
|
|
10165
10359
|
<h2><span class="status-dot dot-ok"></span> Tag</h2>
|
|
10166
10360
|
<div class="badges">
|
|
10167
|
-
<label for="c-
|
|
10361
|
+
<label for="c-33-components-tag-props" class="badge ok as-toggle">8 prop types</label>
|
|
10168
10362
|
|
|
10169
|
-
<label for="c-
|
|
10363
|
+
<label for="c-33-components-tag-stories" class="badge ok as-toggle">12 stories</label>
|
|
10170
10364
|
|
|
10171
10365
|
|
|
10172
10366
|
</div>
|
|
@@ -10185,10 +10379,10 @@ it an interactive link or button, which adds the pointer cursor and hover fill.<
|
|
|
10185
10379
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
10186
10380
|
|
|
10187
10381
|
|
|
10188
|
-
<input id="c-
|
|
10382
|
+
<input id="c-33-components-tag-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
10189
10383
|
|
|
10190
10384
|
|
|
10191
|
-
<input id="c-
|
|
10385
|
+
<input id="c-33-components-tag-props" class="tg tg-props" type="checkbox" hidden />
|
|
10192
10386
|
|
|
10193
10387
|
<div class="panels">
|
|
10194
10388
|
|
|
@@ -10613,9 +10807,9 @@ leading + trailing icons, and icon-only.</div>
|
|
|
10613
10807
|
<div class="title">
|
|
10614
10808
|
<h2><span class="status-dot dot-ok"></span> TextArea</h2>
|
|
10615
10809
|
<div class="badges">
|
|
10616
|
-
<label for="c-
|
|
10810
|
+
<label for="c-34-components-textarea-props" class="badge ok as-toggle">1 prop type</label>
|
|
10617
10811
|
|
|
10618
|
-
<label for="c-
|
|
10812
|
+
<label for="c-34-components-textarea-stories" class="badge ok as-toggle">6 stories</label>
|
|
10619
10813
|
|
|
10620
10814
|
|
|
10621
10815
|
</div>
|
|
@@ -10632,10 +10826,10 @@ states. It wires nothing on its own: `id`, `aria-invalid` and
|
|
|
10632
10826
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
10633
10827
|
|
|
10634
10828
|
|
|
10635
|
-
<input id="c-
|
|
10829
|
+
<input id="c-34-components-textarea-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
10636
10830
|
|
|
10637
10831
|
|
|
10638
|
-
<input id="c-
|
|
10832
|
+
<input id="c-34-components-textarea-props" class="tg tg-props" type="checkbox" hidden />
|
|
10639
10833
|
|
|
10640
10834
|
<div class="panels">
|
|
10641
10835
|
|
|
@@ -10767,9 +10961,9 @@ size and the minimum height shows three rows.</div>
|
|
|
10767
10961
|
<div class="title">
|
|
10768
10962
|
<h2><span class="status-dot dot-ok"></span> Toast</h2>
|
|
10769
10963
|
<div class="badges">
|
|
10770
|
-
<label for="c-
|
|
10964
|
+
<label for="c-35-components-toast-props" class="badge ok as-toggle">11 prop types</label>
|
|
10771
10965
|
|
|
10772
|
-
<label for="c-
|
|
10966
|
+
<label for="c-35-components-toast-stories" class="badge ok as-toggle">11 stories</label>
|
|
10773
10967
|
|
|
10774
10968
|
|
|
10775
10969
|
</div>
|
|
@@ -10788,10 +10982,10 @@ common feedback patterns.</div>
|
|
|
10788
10982
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
10789
10983
|
|
|
10790
10984
|
|
|
10791
|
-
<input id="c-
|
|
10985
|
+
<input id="c-35-components-toast-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
10792
10986
|
|
|
10793
10987
|
|
|
10794
|
-
<input id="c-
|
|
10988
|
+
<input id="c-35-components-toast-props" class="tg tg-props" type="checkbox" hidden />
|
|
10795
10989
|
|
|
10796
10990
|
<div class="panels">
|
|
10797
10991
|
|
|
@@ -11220,9 +11414,9 @@ action (e.g., a sync icon for a sync-in-progress toast).</div>
|
|
|
11220
11414
|
<div class="title">
|
|
11221
11415
|
<h2><span class="status-dot dot-ok"></span> Tooltip</h2>
|
|
11222
11416
|
<div class="badges">
|
|
11223
|
-
<label for="c-
|
|
11417
|
+
<label for="c-36-components-tooltip-props" class="badge ok as-toggle">12 prop types</label>
|
|
11224
11418
|
|
|
11225
|
-
<label for="c-
|
|
11419
|
+
<label for="c-36-components-tooltip-stories" class="badge ok as-toggle">5 stories</label>
|
|
11226
11420
|
|
|
11227
11421
|
|
|
11228
11422
|
</div>
|
|
@@ -11241,10 +11435,10 @@ on hover or focus.</div>
|
|
|
11241
11435
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
11242
11436
|
|
|
11243
11437
|
|
|
11244
|
-
<input id="c-
|
|
11438
|
+
<input id="c-36-components-tooltip-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
11245
11439
|
|
|
11246
11440
|
|
|
11247
|
-
<input id="c-
|
|
11441
|
+
<input id="c-36-components-tooltip-props" class="tg tg-props" type="checkbox" hidden />
|
|
11248
11442
|
|
|
11249
11443
|
<div class="panels">
|
|
11250
11444
|
|
|
@@ -11416,9 +11610,9 @@ sideOffset?: number = 4</code></pre>
|
|
|
11416
11610
|
<div class="title">
|
|
11417
11611
|
<h2><span class="status-dot dot-ok"></span> ValidationList</h2>
|
|
11418
11612
|
<div class="badges">
|
|
11419
|
-
<label for="c-
|
|
11613
|
+
<label for="c-37-components-validationlist-props" class="badge ok as-toggle">2 prop types</label>
|
|
11420
11614
|
|
|
11421
|
-
<label for="c-
|
|
11615
|
+
<label for="c-37-components-validationlist-stories" class="badge ok as-toggle">4 stories</label>
|
|
11422
11616
|
|
|
11423
11617
|
|
|
11424
11618
|
</div>
|
|
@@ -11439,10 +11633,10 @@ your form validation; it does not own the input or block submission.</div>
|
|
|
11439
11633
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
11440
11634
|
|
|
11441
11635
|
|
|
11442
|
-
<input id="c-
|
|
11636
|
+
<input id="c-37-components-validationlist-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
11443
11637
|
|
|
11444
11638
|
|
|
11445
|
-
<input id="c-
|
|
11639
|
+
<input id="c-37-components-validationlist-props" class="tg tg-props" type="checkbox" hidden />
|
|
11446
11640
|
|
|
11447
11641
|
<div class="panels">
|
|
11448
11642
|
|
|
@@ -6779,6 +6779,174 @@
|
|
|
6779
6779
|
],
|
|
6780
6780
|
"import": "import { Field, FieldText, InputPassword, Label } from \"@agentero/design-system\";"
|
|
6781
6781
|
},
|
|
6782
|
+
"components-debouncedinputsearch": {
|
|
6783
|
+
"id": "components-debouncedinputsearch",
|
|
6784
|
+
"name": "DebouncedInputSearch",
|
|
6785
|
+
"path": "./src/input-search/debounced-input-search.stories.tsx",
|
|
6786
|
+
"jsDocTags": {
|
|
6787
|
+
"summary": [
|
|
6788
|
+
"Search input that reports the query once the user pauses typing"
|
|
6789
|
+
],
|
|
6790
|
+
"dataAttribute": [
|
|
6791
|
+
"{string} data-slot - Always set to \"input-search\" on the frame"
|
|
6792
|
+
],
|
|
6793
|
+
"example": [
|
|
6794
|
+
"<DebouncedInputSearch\n aria-label=\"Search agencies\"\n value={filters.query}\n onChange={event => setFilters({ ...filters, query: event.target.value })}\n isLoading={isFetching}\n/>"
|
|
6795
|
+
]
|
|
6796
|
+
},
|
|
6797
|
+
"description": "DebouncedInputSearch is an `InputSearch` for filters that are expensive to\nrun. Keystrokes show up at once, but `onChange` fires only once the user\npauses for 300ms, with the last change event. It is always controlled:\n`value` and `onChange` are required, and the field follows a `value`\nchanged from outside.",
|
|
6798
|
+
"summary": "Search input that reports the query once the user pauses typing",
|
|
6799
|
+
"reactComponentMeta": {
|
|
6800
|
+
"displayName": "DebouncedInputSearch",
|
|
6801
|
+
"exportName": "DebouncedInputSearch",
|
|
6802
|
+
"filePath": "/home/runner/work/design-system/design-system/src/input-search/debounced-input-search.tsx",
|
|
6803
|
+
"description": "DebouncedInputSearch is an [InputSearch](?path=/docs/components-inputsearch--docs)\nfor filters that are expensive to run: a table query, a request to the\nserver. Keystrokes show up in the field at once, but `onChange` fires only\nonce the user pauses for `DEBOUNCE_TIME` (300ms), with the last change\nevent, so the page runs one search per pause instead of one per key. It is\nalways controlled: `value` and `onChange` are required, the page owns the\nquery, and the field follows a `value` changed from outside while the user\nis not typing.\n\nEvery other prop goes to the InputSearch and from there to the `<input>`:\nthe `ref`, `size`, `isLoading`, `placeholder`, `aria-*` and every other\nstandard attribute. Only `type` is not accepted. `className` styles the\nframe.\n\nDo not use it where every keystroke matters, such as filtering a short list\nalready in memory; that is a plain\n[InputSearch](?path=/docs/components-inputsearch--docs). To pick a value from\nthe results, use [Combobox](?path=/docs/components-combobox--docs).",
|
|
6804
|
+
"jsDocTags": {
|
|
6805
|
+
"summary": [
|
|
6806
|
+
"Search input that reports the query once the user pauses typing"
|
|
6807
|
+
],
|
|
6808
|
+
"dataAttribute": [
|
|
6809
|
+
"{string} data-slot - Always set to \"input-search\" on the frame"
|
|
6810
|
+
],
|
|
6811
|
+
"example": [
|
|
6812
|
+
"<DebouncedInputSearch\n aria-label=\"Search agencies\"\n value={filters.query}\n onChange={event => setFilters({ ...filters, query: event.target.value })}\n isLoading={isFetching}\n/>"
|
|
6813
|
+
]
|
|
6814
|
+
},
|
|
6815
|
+
"props": {
|
|
6816
|
+
"size": {
|
|
6817
|
+
"name": "size",
|
|
6818
|
+
"required": false,
|
|
6819
|
+
"type": {
|
|
6820
|
+
"name": "enum",
|
|
6821
|
+
"raw": "\"sm\" | \"md\" | \"lg\"",
|
|
6822
|
+
"value": [
|
|
6823
|
+
{
|
|
6824
|
+
"value": "\"sm\""
|
|
6825
|
+
},
|
|
6826
|
+
{
|
|
6827
|
+
"value": "\"md\""
|
|
6828
|
+
},
|
|
6829
|
+
{
|
|
6830
|
+
"value": "\"lg\""
|
|
6831
|
+
}
|
|
6832
|
+
]
|
|
6833
|
+
},
|
|
6834
|
+
"description": "Control height. Defaults to `'md'`.\n- `sm` (32px) — dense layouts where vertical space is tight.\n- `md` (40px) — standard form density.\n- `lg` (48px) — low-density forms and larger touch targets. Also raises\n the text to `base` and the corner radius to `lg`.",
|
|
6835
|
+
"defaultValue": null,
|
|
6836
|
+
"parent": {
|
|
6837
|
+
"name": "InputProps",
|
|
6838
|
+
"fileName": "src/input/input.tsx"
|
|
6839
|
+
},
|
|
6840
|
+
"declarations": [
|
|
6841
|
+
{
|
|
6842
|
+
"name": "TypeLiteral",
|
|
6843
|
+
"fileName": "src/input/input.tsx"
|
|
6844
|
+
}
|
|
6845
|
+
]
|
|
6846
|
+
},
|
|
6847
|
+
"clearLabel": {
|
|
6848
|
+
"name": "clearLabel",
|
|
6849
|
+
"required": false,
|
|
6850
|
+
"type": {
|
|
6851
|
+
"name": "string"
|
|
6852
|
+
},
|
|
6853
|
+
"description": "Accessible name of the clear button. Defaults to `'Clear search'`; name it\nafter what is searched (`'Clear agency search'`) when a page carries\nseveral search fields.",
|
|
6854
|
+
"defaultValue": null,
|
|
6855
|
+
"parent": {
|
|
6856
|
+
"name": "InputSearchProps",
|
|
6857
|
+
"fileName": "src/input-search/input-search.tsx"
|
|
6858
|
+
},
|
|
6859
|
+
"declarations": [
|
|
6860
|
+
{
|
|
6861
|
+
"name": "TypeLiteral",
|
|
6862
|
+
"fileName": "src/input-search/input-search.tsx"
|
|
6863
|
+
}
|
|
6864
|
+
]
|
|
6865
|
+
},
|
|
6866
|
+
"isLoading": {
|
|
6867
|
+
"name": "isLoading",
|
|
6868
|
+
"required": false,
|
|
6869
|
+
"type": {
|
|
6870
|
+
"name": "boolean"
|
|
6871
|
+
},
|
|
6872
|
+
"description": "Shows a spinner at the end of the frame, in place of the clear button,\nwhile the results for the current text are on their way. Defaults to\n`false`.",
|
|
6873
|
+
"defaultValue": null,
|
|
6874
|
+
"parent": {
|
|
6875
|
+
"name": "InputSearchProps",
|
|
6876
|
+
"fileName": "src/input-search/input-search.tsx"
|
|
6877
|
+
},
|
|
6878
|
+
"declarations": [
|
|
6879
|
+
{
|
|
6880
|
+
"name": "TypeLiteral",
|
|
6881
|
+
"fileName": "src/input-search/input-search.tsx"
|
|
6882
|
+
}
|
|
6883
|
+
]
|
|
6884
|
+
},
|
|
6885
|
+
"value": {
|
|
6886
|
+
"name": "value",
|
|
6887
|
+
"required": true,
|
|
6888
|
+
"type": {
|
|
6889
|
+
"name": "string"
|
|
6890
|
+
},
|
|
6891
|
+
"description": "The query the page is filtering by. The field shows it, and follows it\nwhen it changes from outside (a reset button, a saved filter, navigation),\nunless the user is in the middle of typing: then what they typed stays,\nand `onChange` reports it once they pause.",
|
|
6892
|
+
"defaultValue": null,
|
|
6893
|
+
"parent": {
|
|
6894
|
+
"name": "DebouncedInputSearchProps",
|
|
6895
|
+
"fileName": "src/input-search/debounced-input-search.tsx"
|
|
6896
|
+
},
|
|
6897
|
+
"declarations": [
|
|
6898
|
+
{
|
|
6899
|
+
"name": "TypeLiteral",
|
|
6900
|
+
"fileName": "src/input-search/debounced-input-search.tsx"
|
|
6901
|
+
}
|
|
6902
|
+
]
|
|
6903
|
+
},
|
|
6904
|
+
"onChange": {
|
|
6905
|
+
"name": "onChange",
|
|
6906
|
+
"required": true,
|
|
6907
|
+
"type": {
|
|
6908
|
+
"name": "ChangeEventHandler<HTMLInputElement>"
|
|
6909
|
+
},
|
|
6910
|
+
"description": "Fires once the user has stopped typing for `DEBOUNCE_TIME` milliseconds,\nwith the change event of the last keystroke; clearing the field goes\nthrough the same delay. A pending call fires at once when the user\npresses Enter, and is dropped when the field unmounts, so a page that is\nnavigating away is not sent back. Read the text from `event.target.value`, which is\nwhat the field shows at that moment. `event.currentTarget` is no longer\nset by then, since the event is delivered after the browser's dispatch.",
|
|
6911
|
+
"defaultValue": null,
|
|
6912
|
+
"parent": {
|
|
6913
|
+
"name": "DebouncedInputSearchProps",
|
|
6914
|
+
"fileName": "src/input-search/debounced-input-search.tsx"
|
|
6915
|
+
},
|
|
6916
|
+
"declarations": [
|
|
6917
|
+
{
|
|
6918
|
+
"name": "TypeLiteral",
|
|
6919
|
+
"fileName": "src/input-search/debounced-input-search.tsx"
|
|
6920
|
+
}
|
|
6921
|
+
]
|
|
6922
|
+
}
|
|
6923
|
+
}
|
|
6924
|
+
},
|
|
6925
|
+
"stories": [
|
|
6926
|
+
{
|
|
6927
|
+
"id": "components-debouncedinputsearch--default",
|
|
6928
|
+
"name": "Default",
|
|
6929
|
+
"snippet": "const Default = () => {\n const [query, setQuery] = useState(args.value);\n\n return (\n <div style={{ display: 'grid', gap: '1rem' }}>\n <DebouncedInputSearch\n aria-label=\"Search agencies\"\n value={query}\n onChange={event => {\n setQuery(event.target.value);\n args.onChange(event);\n }} />\n <output>Filtering by: {query}</output>\n </div>\n );\n};",
|
|
6930
|
+
"description": "A page filtering by a query it owns, shown below the field. Typing shows up\nin the field at once; `onChange` arrives once the user pauses, with the\nwhole text in `event.target.value`, and only then does the query below\nchange. Clearing the field goes through the same delay.",
|
|
6931
|
+
"summary": "Controlled query reported once the user stops typing"
|
|
6932
|
+
},
|
|
6933
|
+
{
|
|
6934
|
+
"id": "components-debouncedinputsearch--external-value",
|
|
6935
|
+
"name": "External Value",
|
|
6936
|
+
"snippet": "const ExternalValue = () => {\n const [query, setQuery] = useState('Acme');\n\n return (\n <div style={{ display: 'grid', gap: '1rem' }}>\n <DebouncedInputSearch\n aria-label=\"Search agencies\"\n value={query}\n onChange={event => {\n setQuery(event.target.value);\n args.onChange(event);\n }} />\n <Button variant=\"secondary\" size=\"sm\" onClick={() => setQuery('Travelers')}>Apply saved search\n </Button>\n <output>Filtering by: {query}</output>\n </div>\n );\n};",
|
|
6937
|
+
"description": "The field follows `value` when the page changes it from outside, here a\nsaved search applied with a button: nothing is being typed, so the new\nquery replaces the text.",
|
|
6938
|
+
"summary": "Field following a value changed from outside while idle"
|
|
6939
|
+
},
|
|
6940
|
+
{
|
|
6941
|
+
"id": "components-debouncedinputsearch--submit-on-enter",
|
|
6942
|
+
"name": "Submit On Enter",
|
|
6943
|
+
"snippet": "const SubmitOnEnter = () => {\n const [query, setQuery] = useState(args.value);\n\n return (\n <div style={{ display: 'grid', gap: '1rem' }}>\n <DebouncedInputSearch\n aria-label=\"Search agencies\"\n value={query}\n onChange={event => {\n setQuery(event.target.value);\n args.onChange(event);\n }} />\n <output>Filtering by: {query}</output>\n </div>\n );\n};",
|
|
6944
|
+
"description": "Pressing Enter reports the text at once instead of waiting for the pause.",
|
|
6945
|
+
"summary": "Enter reports the pending query without waiting"
|
|
6946
|
+
}
|
|
6947
|
+
],
|
|
6948
|
+
"import": "import { Button, DebouncedInputSearch } from \"@agentero/design-system\";"
|
|
6949
|
+
},
|
|
6782
6950
|
"components-inputsearch": {
|
|
6783
6951
|
"id": "components-inputsearch",
|
|
6784
6952
|
"name": "InputSearch",
|
|
@@ -10055,6 +10223,6 @@
|
|
|
10055
10223
|
},
|
|
10056
10224
|
"meta": {
|
|
10057
10225
|
"docgen": "react-component-meta",
|
|
10058
|
-
"durationMs":
|
|
10226
|
+
"durationMs": 3866
|
|
10059
10227
|
}
|
|
10060
10228
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@agentero/design-system",
|
|
3
|
-
"version": "0.35.
|
|
3
|
+
"version": "0.35.1",
|
|
4
4
|
"description": "A React component library built with Tailwind CSS v4 and Radix UI primitives",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -216,6 +216,7 @@
|
|
|
216
216
|
"cmdk": "^1.1.1",
|
|
217
217
|
"sonner": "^2.0.7",
|
|
218
218
|
"tailwind-merge": "^3.5.0",
|
|
219
|
-
"tailwind-variants": "^3.2.2"
|
|
219
|
+
"tailwind-variants": "^3.2.2",
|
|
220
|
+
"use-debounce": "^10.1.1"
|
|
220
221
|
}
|
|
221
222
|
}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { ChangeEventHandler } from 'react';
|
|
2
|
+
import { InputSearchProps } from './input-search';
|
|
3
|
+
export type DebouncedInputSearchProps = Omit<InputSearchProps, 'value' | 'defaultValue' | 'onChange'> & {
|
|
4
|
+
/**
|
|
5
|
+
* The query the page is filtering by. The field shows it, and follows it
|
|
6
|
+
* when it changes from outside (a reset button, a saved filter, navigation),
|
|
7
|
+
* unless the user is in the middle of typing: then what they typed stays,
|
|
8
|
+
* and `onChange` reports it once they pause.
|
|
9
|
+
*/
|
|
10
|
+
value: string;
|
|
11
|
+
/**
|
|
12
|
+
* Fires once the user has stopped typing for `DEBOUNCE_TIME` milliseconds,
|
|
13
|
+
* with the change event of the last keystroke; clearing the field goes
|
|
14
|
+
* through the same delay. A pending call fires at once when the user
|
|
15
|
+
* presses Enter, and is dropped when the field unmounts, so a page that is
|
|
16
|
+
* navigating away is not sent back. Read the text from `event.target.value`, which is
|
|
17
|
+
* what the field shows at that moment. `event.currentTarget` is no longer
|
|
18
|
+
* set by then, since the event is delivered after the browser's dispatch.
|
|
19
|
+
*/
|
|
20
|
+
onChange: ChangeEventHandler<HTMLInputElement>;
|
|
21
|
+
};
|
|
22
|
+
/**
|
|
23
|
+
* DebouncedInputSearch is an [InputSearch](?path=/docs/components-inputsearch--docs)
|
|
24
|
+
* for filters that are expensive to run: a table query, a request to the
|
|
25
|
+
* server. Keystrokes show up in the field at once, but `onChange` fires only
|
|
26
|
+
* once the user pauses for `DEBOUNCE_TIME` (300ms), with the last change
|
|
27
|
+
* event, so the page runs one search per pause instead of one per key. It is
|
|
28
|
+
* always controlled: `value` and `onChange` are required, the page owns the
|
|
29
|
+
* query, and the field follows a `value` changed from outside while the user
|
|
30
|
+
* is not typing.
|
|
31
|
+
*
|
|
32
|
+
* Every other prop goes to the InputSearch and from there to the `<input>`:
|
|
33
|
+
* the `ref`, `size`, `isLoading`, `placeholder`, `aria-*` and every other
|
|
34
|
+
* standard attribute. Only `type` is not accepted. `className` styles the
|
|
35
|
+
* frame.
|
|
36
|
+
*
|
|
37
|
+
* Do not use it where every keystroke matters, such as filtering a short list
|
|
38
|
+
* already in memory; that is a plain
|
|
39
|
+
* [InputSearch](?path=/docs/components-inputsearch--docs). To pick a value from
|
|
40
|
+
* the results, use [Combobox](?path=/docs/components-combobox--docs).
|
|
41
|
+
*
|
|
42
|
+
* @summary Search input that reports the query once the user pauses typing
|
|
43
|
+
* @dataAttribute {string} data-slot - Always set to "input-search" on the frame
|
|
44
|
+
*
|
|
45
|
+
* @example
|
|
46
|
+
* <DebouncedInputSearch
|
|
47
|
+
* aria-label="Search agencies"
|
|
48
|
+
* value={filters.query}
|
|
49
|
+
* onChange={event => setFilters({ ...filters, query: event.target.value })}
|
|
50
|
+
* isLoading={isFetching}
|
|
51
|
+
* />
|
|
52
|
+
*/
|
|
53
|
+
export declare const DebouncedInputSearch: {
|
|
54
|
+
({ value, onChange, onKeyDown, ...props }: DebouncedInputSearchProps): import("react/jsx-runtime").JSX.Element;
|
|
55
|
+
displayName: string;
|
|
56
|
+
};
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { chain as e } from "../../lib/merge-props.js";
|
|
3
|
+
import "./constants.js";
|
|
4
|
+
import { InputSearch as t } from "./input-search.js";
|
|
5
|
+
import { useState as n } from "react";
|
|
6
|
+
import { jsx as r } from "react/jsx-runtime";
|
|
7
|
+
import { useDebouncedCallback as i } from "use-debounce";
|
|
8
|
+
//#region src/input-search/debounced-input-search.tsx
|
|
9
|
+
var a = ({ value: a, onChange: o, onKeyDown: s, ...c }) => {
|
|
10
|
+
let [l, u] = n(a), [d, f] = n(a), p = i(o, 300);
|
|
11
|
+
a !== d && (f(a), p.isPending() || u(a));
|
|
12
|
+
let m = (e) => {
|
|
13
|
+
u(e.target.value), p(e);
|
|
14
|
+
}, h = (e) => {
|
|
15
|
+
let t = e.nativeEvent.isComposing || e.keyCode === 229;
|
|
16
|
+
e.key === "Enter" && !t && p.flush();
|
|
17
|
+
};
|
|
18
|
+
return /* @__PURE__ */ r(t, {
|
|
19
|
+
...c,
|
|
20
|
+
value: l,
|
|
21
|
+
onChange: m,
|
|
22
|
+
onKeyDown: e(h, s)
|
|
23
|
+
});
|
|
24
|
+
};
|
|
25
|
+
a.displayName = "DebouncedInputSearch";
|
|
26
|
+
//#endregion
|
|
27
|
+
export { a as DebouncedInputSearch };
|
|
@@ -1,2 +1,5 @@
|
|
|
1
|
+
export { DEBOUNCE_TIME } from './constants';
|
|
2
|
+
export { DebouncedInputSearch } from './debounced-input-search';
|
|
3
|
+
export type { DebouncedInputSearchProps } from './debounced-input-search';
|
|
1
4
|
export { InputSearch, inputSearchRecipe } from './input-search';
|
|
2
5
|
export type { InputSearchProps } from './input-search';
|
|
@@ -1,2 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
1
|
+
import { DEBOUNCE_TIME as e } from "./constants.js";
|
|
2
|
+
import { InputSearch as t, inputSearchRecipe as n } from "./input-search.js";
|
|
3
|
+
import { DebouncedInputSearch as r } from "./debounced-input-search.js";
|
|
4
|
+
export { e as DEBOUNCE_TIME, r as DebouncedInputSearch, t as InputSearch, n as inputSearchRecipe };
|