@agentero/design-system 0.31.8 → 0.32.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 +492 -111
- package/mcp/manifests/components.json +176 -12
- package/package.json +5 -1
- package/src/combobox/combobox.d.ts +91 -28
- package/src/combobox/combobox.js +95 -64
- package/src/combobox/icons.d.ts +16 -0
- package/src/combobox/icons.js +19 -1
- package/src/combobox/index.d.ts +6 -2
- package/src/input-group/index.d.ts +16 -0
- package/src/input-group/index.js +9 -0
- package/src/input-group/input-group.d.ts +130 -0
- package/src/input-group/input-group.js +79 -0
|
@@ -588,13 +588,13 @@
|
|
|
588
588
|
<header>
|
|
589
589
|
<div class="wrap">
|
|
590
590
|
<h1>Manifest Debugger</h1>
|
|
591
|
-
<div class="summary"><a class="filter-pill all" data-k="all" href="#filter-all">All</a><span class="filter-pill ok" aria-disabled="true">
|
|
591
|
+
<div class="summary"><a class="filter-pill all" data-k="all" href="#filter-all">All</a><span class="filter-pill ok" aria-disabled="true">34 components ok</span><span class="filter-pill ok" aria-disabled="true">281 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>4.
|
|
597
|
+
Using <code>react-component-meta</code>. Generation took <strong>4.0s</strong>.
|
|
598
598
|
</div>
|
|
599
599
|
<h2 class="section-title">Components</h2>
|
|
600
600
|
<div class="grid" role="list">
|
|
@@ -2855,9 +2855,9 @@ import { CheckList } from '@agentero/design-system/check-list';
|
|
|
2855
2855
|
<div class="title">
|
|
2856
2856
|
<h2><span class="status-dot dot-ok"></span> Combobox.Root</h2>
|
|
2857
2857
|
<div class="badges">
|
|
2858
|
-
<label for="c-7-components-combobox-props" class="badge ok as-toggle">
|
|
2858
|
+
<label for="c-7-components-combobox-props" class="badge ok as-toggle">39 prop types</label>
|
|
2859
2859
|
|
|
2860
|
-
<label for="c-7-components-combobox-stories" class="badge ok as-toggle">
|
|
2860
|
+
<label for="c-7-components-combobox-stories" class="badge ok as-toggle">10 stories</label>
|
|
2861
2861
|
|
|
2862
2862
|
|
|
2863
2863
|
</div>
|
|
@@ -2900,7 +2900,7 @@ import { Combobox } from '@agentero/design-system/combobox';
|
|
|
2900
2900
|
<div class="note ok">
|
|
2901
2901
|
<div class="row">
|
|
2902
2902
|
<span class="ex-name">Prop types <small>(react-component-meta)</small></span>
|
|
2903
|
-
<span class="badge ok">
|
|
2903
|
+
<span class="badge ok">39 prop types</span>
|
|
2904
2904
|
</div>
|
|
2905
2905
|
<pre><code>Component: src/combobox/index.ts::Combobox</code></pre>
|
|
2906
2906
|
<pre><code>Props:</code></pre>
|
|
@@ -3060,6 +3060,14 @@ locale?: LocalesArgument
|
|
|
3060
3060
|
*/
|
|
3061
3061
|
loopFocus?: boolean = true
|
|
3062
3062
|
|
|
3063
|
+
/**
|
|
3064
|
+
* Characters the query needs, spaces aside, before the list opens. Below it
|
|
3065
|
+
* focusing, clicking or pressing the chevron leaves the list shut, and
|
|
3066
|
+
* deleting back under it closes the list. Defaults to `0`: the list opens on
|
|
3067
|
+
* focus.
|
|
3068
|
+
*/
|
|
3069
|
+
minInputLength?: number = 0
|
|
3070
|
+
|
|
3063
3071
|
/**
|
|
3064
3072
|
* Determines if the popup enters a modal state when open.
|
|
3065
3073
|
* - `true`: user interaction is limited to the popup: document page scroll is locked and pointer interactions on outside elements are disabled.
|
|
@@ -3149,17 +3157,7 @@ virtualized?: boolean = false</code></pre>
|
|
|
3149
3157
|
<div class="row">
|
|
3150
3158
|
<span class="ex-name">Imports</span>
|
|
3151
3159
|
</div>
|
|
3152
|
-
<pre><code>import {
|
|
3153
|
-
Button,
|
|
3154
|
-
Combobox,
|
|
3155
|
-
Field,
|
|
3156
|
-
FieldText,
|
|
3157
|
-
IconSearch,
|
|
3158
|
-
Label,
|
|
3159
|
-
Modal,
|
|
3160
|
-
Skeleton,
|
|
3161
|
-
Tag,
|
|
3162
|
-
} from "@agentero/design-system";
|
|
3160
|
+
<pre><code>import { Button, Combobox, Field, FieldText, Label, Modal, Skeleton, Tag } from "@agentero/design-system";
|
|
3163
3161
|
import { Suspense } from "react";</code></pre>
|
|
3164
3162
|
</div>
|
|
3165
3163
|
|
|
@@ -3169,9 +3167,11 @@ import { Suspense } from "react";</code></pre>
|
|
|
3169
3167
|
<span class="ex-name">Default</span>
|
|
3170
3168
|
<span class="badge ok">story ok</span>
|
|
3171
3169
|
</div>
|
|
3172
|
-
|
|
3170
|
+
<div>Search field with a magnifier and clear button over an in-memory list</div>
|
|
3173
3171
|
<div class="hint">The common case: options are already in memory and Base UI filters them against
|
|
3174
|
-
what you type. Selecting a row fills the input and closes the list
|
|
3172
|
+
what you type. Selecting a row fills the input and closes the list. The field is
|
|
3173
|
+
a search out of the box — a magnifier in front, a clear button once something is
|
|
3174
|
+
picked — and the list hangs from the whole field.</div>
|
|
3175
3175
|
<pre><code>const Default = () => (
|
|
3176
3176
|
<Combobox.Root items={STATES}>
|
|
3177
3177
|
<Combobox.Input placeholder="Search states" aria-label="Search states" />
|
|
@@ -3186,6 +3186,83 @@ what you type. Selecting a row fills the input and closes the list.</div>
|
|
|
3186
3186
|
</Combobox.List>
|
|
3187
3187
|
</Combobox.Content>
|
|
3188
3188
|
</Combobox.Root>
|
|
3189
|
+
);</code></pre>
|
|
3190
|
+
</div>
|
|
3191
|
+
<div class="note ok">
|
|
3192
|
+
<div class="row">
|
|
3193
|
+
<span class="ex-name">Plain</span>
|
|
3194
|
+
<span class="badge ok">story ok</span>
|
|
3195
|
+
</div>
|
|
3196
|
+
<div>Bare input with no icon and no clear button</div>
|
|
3197
|
+
<div class="hint">`variant="plain"`: the input alone, with no magnifier and no clear button, for a
|
|
3198
|
+
field that needs no affordance — a FEIN lookup, a template name. The list still
|
|
3199
|
+
matches the field's width.</div>
|
|
3200
|
+
<pre><code>const Plain = () => (
|
|
3201
|
+
<Combobox.Root items={STATES}>
|
|
3202
|
+
<Combobox.Input variant="plain" placeholder="State" aria-label="State" />
|
|
3203
|
+
<Combobox.Content>
|
|
3204
|
+
<Combobox.Empty>No matches found</Combobox.Empty>
|
|
3205
|
+
<Combobox.List>
|
|
3206
|
+
{(state: string) => (
|
|
3207
|
+
<Combobox.Item key={state} value={state}>
|
|
3208
|
+
{state}
|
|
3209
|
+
</Combobox.Item>
|
|
3210
|
+
)}
|
|
3211
|
+
</Combobox.List>
|
|
3212
|
+
</Combobox.Content>
|
|
3213
|
+
</Combobox.Root>
|
|
3214
|
+
);</code></pre>
|
|
3215
|
+
</div>
|
|
3216
|
+
<div class="note ok">
|
|
3217
|
+
<div class="row">
|
|
3218
|
+
<span class="ex-name">Select</span>
|
|
3219
|
+
<span class="badge ok">story ok</span>
|
|
3220
|
+
</div>
|
|
3221
|
+
<div>Field with a chevron that toggles the list, for short known lists</div>
|
|
3222
|
+
<div class="hint">`variant="select"`: a chevron after the input opens and closes the list, for a
|
|
3223
|
+
short known list the user may want to browse before typing. It has no clear
|
|
3224
|
+
button by default. The chevron is out of the tab order — the input already
|
|
3225
|
+
opens the list from the keyboard with the arrow keys.</div>
|
|
3226
|
+
<pre><code>const Select = () => (
|
|
3227
|
+
<Combobox.Root items={STATES}>
|
|
3228
|
+
<Combobox.Input variant="select" placeholder="Choose a state" aria-label="State" />
|
|
3229
|
+
<Combobox.Content>
|
|
3230
|
+
<Combobox.Empty>No matches found</Combobox.Empty>
|
|
3231
|
+
<Combobox.List>
|
|
3232
|
+
{(state: string) => (
|
|
3233
|
+
<Combobox.Item key={state} value={state}>
|
|
3234
|
+
{state}
|
|
3235
|
+
</Combobox.Item>
|
|
3236
|
+
)}
|
|
3237
|
+
</Combobox.List>
|
|
3238
|
+
</Combobox.Content>
|
|
3239
|
+
</Combobox.Root>
|
|
3240
|
+
);</code></pre>
|
|
3241
|
+
</div>
|
|
3242
|
+
<div class="note ok">
|
|
3243
|
+
<div class="row">
|
|
3244
|
+
<span class="ex-name">Select With Clear</span>
|
|
3245
|
+
<span class="badge ok">story ok</span>
|
|
3246
|
+
</div>
|
|
3247
|
+
<div>Select field with a clear button added through showClear</div>
|
|
3248
|
+
<div class="hint">`showClear` overrides the variant's default: here it adds the clear button to a
|
|
3249
|
+
`select`, so a picked option can be removed without selecting the text and
|
|
3250
|
+
deleting it. While there is a value it takes the chevron's place; clearing
|
|
3251
|
+
brings the chevron back. Passing `false` drops it from `search`.</div>
|
|
3252
|
+
<pre><code>const SelectWithClear = () => (
|
|
3253
|
+
<Combobox.Root items={STATES} defaultValue="Florida">
|
|
3254
|
+
<Combobox.Input variant="select" showClear placeholder="Choose a state" aria-label="State" />
|
|
3255
|
+
<Combobox.Content>
|
|
3256
|
+
<Combobox.Empty>No matches found</Combobox.Empty>
|
|
3257
|
+
<Combobox.List>
|
|
3258
|
+
{(state: string) => (
|
|
3259
|
+
<Combobox.Item key={state} value={state}>
|
|
3260
|
+
{state}
|
|
3261
|
+
</Combobox.Item>
|
|
3262
|
+
)}
|
|
3263
|
+
</Combobox.List>
|
|
3264
|
+
</Combobox.Content>
|
|
3265
|
+
</Combobox.Root>
|
|
3189
3266
|
);</code></pre>
|
|
3190
3267
|
</div>
|
|
3191
3268
|
<div class="note ok">
|
|
@@ -3294,11 +3371,15 @@ out-of-order responses harmless. Drop a `useSuspenseQuery` where `use()` is.</di
|
|
|
3294
3371
|
<span class="ex-name">Async Search With Status</span>
|
|
3295
3372
|
<span class="badge ok">story ok</span>
|
|
3296
3373
|
</div>
|
|
3297
|
-
|
|
3374
|
+
<div>API search that waits for two characters, with loading status</div>
|
|
3298
3375
|
<div class="hint">The same search without Suspense, for a consumer that gets a `loading` flag from
|
|
3299
3376
|
its data layer instead: `filter={null}`, the rows arrive through `filteredItems`,
|
|
3300
3377
|
`Content` is marked busy and `Status` announces the wait. The list is cleared
|
|
3301
|
-
before each request and a request that is no longer the latest is dropped
|
|
3378
|
+
before each request and a request that is no longer the latest is dropped.
|
|
3379
|
+
|
|
3380
|
+
`minInputLength` keeps the list shut until two characters are typed — focusing
|
|
3381
|
+
the field opens nothing, and deleting back under the minimum closes it — and
|
|
3382
|
+
no request goes out for a shorter query either.</div>
|
|
3302
3383
|
<pre><code>const AsyncSearchWithStatus = () => {
|
|
3303
3384
|
const [results, setResults] = useState<Agency[]>([]);
|
|
3304
3385
|
const [isLoading, setIsLoading] = useState(false);
|
|
@@ -3307,6 +3388,11 @@ before each request and a request that is no longer the latest is dropped.</div>
|
|
|
3307
3388
|
|
|
3308
3389
|
const onInputValueChange = async (query: string) => {
|
|
3309
3390
|
const request = ++latestRequest.current;
|
|
3391
|
+
if (query.trim().length < MIN_QUERY_LENGTH) {
|
|
3392
|
+
setResults([]);
|
|
3393
|
+
setIsLoading(false);
|
|
3394
|
+
return;
|
|
3395
|
+
}
|
|
3310
3396
|
|
|
3311
3397
|
// The previous rows go before the wait starts: a list that no longer matches what is typed
|
|
3312
3398
|
// must not sit under the loading state.
|
|
@@ -3325,6 +3411,7 @@ before each request and a request that is no longer the latest is dropped.</div>
|
|
|
3325
3411
|
items={results}
|
|
3326
3412
|
filteredItems={results}
|
|
3327
3413
|
filter={null}
|
|
3414
|
+
minInputLength={MIN_QUERY_LENGTH}
|
|
3328
3415
|
itemToStringLabel={(agency: Agency) => agency.name}
|
|
3329
3416
|
isItemEqualToValue={(a: Agency, b: Agency) => a.id === b.id}
|
|
3330
3417
|
onInputValueChange={onInputValueChange}>
|
|
@@ -3379,39 +3466,6 @@ rest of the page from assistive technology, label included, and a
|
|
|
3379
3466
|
<Field.Description>The agency this agent will be added to.</Field.Description>
|
|
3380
3467
|
<Field.Error errors={[{ message: 'Pick an agency from the list' }]} />
|
|
3381
3468
|
</FieldText>
|
|
3382
|
-
);</code></pre>
|
|
3383
|
-
</div>
|
|
3384
|
-
<div class="note ok">
|
|
3385
|
-
<div class="row">
|
|
3386
|
-
<span class="ex-name">With Leading Icon</span>
|
|
3387
|
-
<span class="badge ok">story ok</span>
|
|
3388
|
-
</div>
|
|
3389
|
-
|
|
3390
|
-
<div class="hint">A leading icon is composed around the input, not baked in: not every combobox
|
|
3391
|
-
is a search (a FEIN lookup or a template picker are not), so the component
|
|
3392
|
-
ships no icon of its own. Until `InputGroup` lands in the design system, the
|
|
3393
|
-
marketplace search fields get theirs like this — the icon overlaid, the input
|
|
3394
|
-
padded past it.</div>
|
|
3395
|
-
<pre><code>const WithLeadingIcon = () => (
|
|
3396
|
-
<Combobox.Root items={STATES}>
|
|
3397
|
-
<div className="relative">
|
|
3398
|
-
<IconSearch
|
|
3399
|
-
aria-hidden
|
|
3400
|
-
className="pointer-events-none absolute top-1/2 left-3 -z-hide size-6 -translate-y-1/2 [&>path]:fill-icon-default-base-tertiary"
|
|
3401
|
-
/>
|
|
3402
|
-
<Combobox.Input className="pl-11" placeholder="Search states" aria-label="Search states" />
|
|
3403
|
-
</div>
|
|
3404
|
-
<Combobox.Content>
|
|
3405
|
-
<Combobox.Empty>No matches found</Combobox.Empty>
|
|
3406
|
-
<Combobox.List>
|
|
3407
|
-
{(state: string) => (
|
|
3408
|
-
<Combobox.Item key={state} value={state}>
|
|
3409
|
-
{state}
|
|
3410
|
-
</Combobox.Item>
|
|
3411
|
-
)}
|
|
3412
|
-
</Combobox.List>
|
|
3413
|
-
</Combobox.Content>
|
|
3414
|
-
</Combobox.Root>
|
|
3415
3469
|
);</code></pre>
|
|
3416
3470
|
</div>
|
|
3417
3471
|
<div class="note ok">
|
|
@@ -7045,6 +7099,333 @@ they cannot change.</div>
|
|
|
7045
7099
|
</div>
|
|
7046
7100
|
|
|
7047
7101
|
|
|
7102
|
+
</div>
|
|
7103
|
+
</article>
|
|
7104
|
+
<article
|
|
7105
|
+
class="card
|
|
7106
|
+
no-error
|
|
7107
|
+
no-info
|
|
7108
|
+
no-story-error
|
|
7109
|
+
no-doc-error"
|
|
7110
|
+
role="listitem"
|
|
7111
|
+
aria-label="InputGroup.Root">
|
|
7112
|
+
<div class="head">
|
|
7113
|
+
<div class="title">
|
|
7114
|
+
<h2><span class="status-dot dot-ok"></span> InputGroup.Root</h2>
|
|
7115
|
+
<div class="badges">
|
|
7116
|
+
|
|
7117
|
+
|
|
7118
|
+
<label for="c-18-components-inputgroup-stories" class="badge ok as-toggle">13 stories</label>
|
|
7119
|
+
|
|
7120
|
+
|
|
7121
|
+
</div>
|
|
7122
|
+
</div>
|
|
7123
|
+
<div class="meta" title="./src/input-group/input-group.stories.tsx">components-inputgroup · ./src/input-group/input-group.stories.tsx</div>
|
|
7124
|
+
<div>Bordered frame drawing an Input and its addons as one control</div>
|
|
7125
|
+
<div class="hint">InputGroup draws an `Input` and what sits beside it — an icon, a currency or
|
|
7126
|
+
unit affix, a trailing action — as one bordered control. The frame owns the
|
|
7127
|
+
border, the shadow and the focus ring; the `Input` inside renders bare and
|
|
7128
|
+
hands its state to the frame through `:has()`, so focus, `disabled`,
|
|
7129
|
+
`aria-invalid` and `size` are never wired by hand. Inside a `FieldText` the
|
|
7130
|
+
`Input` keeps taking its label and messages from the field.</div>
|
|
7131
|
+
<div class="kv"><span class="chip">summary: Bordered frame drawing an Input and its addons as one control</span><span class="chip">dataAttribute: {string} data-slot - Always set to "input-group"</span><span class="chip">example: <InputGroup.Root>
|
|
7132
|
+
<InputGroup.Text>$</InputGroup.Text>
|
|
7133
|
+
<Input inputMode="decimal" placeholder="0.00" />
|
|
7134
|
+
<InputGroup.Text>USD</InputGroup.Text>
|
|
7135
|
+
</InputGroup.Root></span></div>
|
|
7136
|
+
</div>
|
|
7137
|
+
|
|
7138
|
+
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
7139
|
+
|
|
7140
|
+
|
|
7141
|
+
<input id="c-18-components-inputgroup-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
7142
|
+
|
|
7143
|
+
|
|
7144
|
+
|
|
7145
|
+
|
|
7146
|
+
<div class="panels">
|
|
7147
|
+
|
|
7148
|
+
|
|
7149
|
+
|
|
7150
|
+
|
|
7151
|
+
<div class="panel panel-stories">
|
|
7152
|
+
|
|
7153
|
+
|
|
7154
|
+
|
|
7155
|
+
<div class="note ok">
|
|
7156
|
+
<div class="row">
|
|
7157
|
+
<span class="ex-name">Imports</span>
|
|
7158
|
+
</div>
|
|
7159
|
+
<pre><code>import {
|
|
7160
|
+
Button,
|
|
7161
|
+
Divider,
|
|
7162
|
+
DropdownMenu,
|
|
7163
|
+
Field,
|
|
7164
|
+
FieldText,
|
|
7165
|
+
IconCancel,
|
|
7166
|
+
IconKeyboardArrowDown,
|
|
7167
|
+
IconSearch,
|
|
7168
|
+
Input,
|
|
7169
|
+
InputGroup,
|
|
7170
|
+
Label,
|
|
7171
|
+
Tag,
|
|
7172
|
+
} from "@agentero/design-system";</code></pre>
|
|
7173
|
+
</div>
|
|
7174
|
+
|
|
7175
|
+
|
|
7176
|
+
<div class="note ok">
|
|
7177
|
+
<div class="row">
|
|
7178
|
+
<span class="ex-name">Default</span>
|
|
7179
|
+
<span class="badge ok">story ok</span>
|
|
7180
|
+
</div>
|
|
7181
|
+
<div>Leading icon addon with the frame drawing the focus ring</div>
|
|
7182
|
+
<div class="hint">A search field: the icon leads and the input takes the rest of the frame.
|
|
7183
|
+
Pressing the icon focuses the input, and the frame — not the input — draws the
|
|
7184
|
+
focus ring, so the two never show a double border.</div>
|
|
7185
|
+
<pre><code>const Default = () => (
|
|
7186
|
+
<InputGroup.Root>
|
|
7187
|
+
<InputGroup.Addon>
|
|
7188
|
+
<IconSearch />
|
|
7189
|
+
</InputGroup.Addon>
|
|
7190
|
+
<Input type="search" placeholder="Search agencies" aria-label="Search agencies" />
|
|
7191
|
+
</InputGroup.Root>
|
|
7192
|
+
);</code></pre>
|
|
7193
|
+
</div>
|
|
7194
|
+
<div class="note ok">
|
|
7195
|
+
<div class="row">
|
|
7196
|
+
<span class="ex-name">Text Affixes</span>
|
|
7197
|
+
<span class="badge ok">story ok</span>
|
|
7198
|
+
</div>
|
|
7199
|
+
<div>Currency prefix and unit suffix around an amount</div>
|
|
7200
|
+
<div class="hint">Text affixes on both sides. They are decoration only — a screen reader does
|
|
7201
|
+
not read them as part of the value — so the unit is also in the label.</div>
|
|
7202
|
+
<pre><code>const TextAffixes = () => (
|
|
7203
|
+
<InputGroup.Root>
|
|
7204
|
+
<InputGroup.Text>$</InputGroup.Text>
|
|
7205
|
+
<Input inputMode="decimal" placeholder="0.00" aria-label="Premium in US dollars" />
|
|
7206
|
+
<InputGroup.Text>USD</InputGroup.Text>
|
|
7207
|
+
</InputGroup.Root>
|
|
7208
|
+
);</code></pre>
|
|
7209
|
+
</div>
|
|
7210
|
+
<div class="note ok">
|
|
7211
|
+
<div class="row">
|
|
7212
|
+
<span class="ex-name">With Divider</span>
|
|
7213
|
+
<span class="badge ok">story ok</span>
|
|
7214
|
+
</div>
|
|
7215
|
+
<div>Protocol prefix and domain suffix split off by vertical dividers</div>
|
|
7216
|
+
<div class="hint">A `Divider` separates an affix from the value when it reads as a distinct
|
|
7217
|
+
segment, like a protocol before a domain. It spans the full height of the
|
|
7218
|
+
frame, meeting its border at both ends.</div>
|
|
7219
|
+
<pre><code>const WithDivider = () => (
|
|
7220
|
+
<InputGroup.Root>
|
|
7221
|
+
<InputGroup.Text>https://</InputGroup.Text>
|
|
7222
|
+
<Divider orientation="vertical" />
|
|
7223
|
+
<Input
|
|
7224
|
+
type="text"
|
|
7225
|
+
inputMode="url"
|
|
7226
|
+
autoCapitalize="none"
|
|
7227
|
+
placeholder="www.agentero"
|
|
7228
|
+
aria-label="Agency website"
|
|
7229
|
+
/>
|
|
7230
|
+
<Divider orientation="vertical" />
|
|
7231
|
+
<InputGroup.Text>.com</InputGroup.Text>
|
|
7232
|
+
</InputGroup.Root>
|
|
7233
|
+
);</code></pre>
|
|
7234
|
+
</div>
|
|
7235
|
+
<div class="note ok">
|
|
7236
|
+
<div class="row">
|
|
7237
|
+
<span class="ex-name">With Tags</span>
|
|
7238
|
+
<span class="badge ok">story ok</span>
|
|
7239
|
+
</div>
|
|
7240
|
+
<div>Leading and trailing tags tucked into the frame's padding</div>
|
|
7241
|
+
<div class="hint">A `Tag` in an addon labels what the value is. It tucks into the frame's
|
|
7242
|
+
padding on the side it touches and takes a tighter radius, so it sits inside
|
|
7243
|
+
the corner instead of competing with it.</div>
|
|
7244
|
+
<pre><code>const WithTags = () => (
|
|
7245
|
+
<div className="flex flex-col gap-4">
|
|
7246
|
+
<InputGroup.Root>
|
|
7247
|
+
<InputGroup.Addon>
|
|
7248
|
+
<Tag color="informative">FEIN</Tag>
|
|
7249
|
+
</InputGroup.Addon>
|
|
7250
|
+
<Input placeholder="XX-XXXXXXX" aria-label="FEIN" />
|
|
7251
|
+
</InputGroup.Root>
|
|
7252
|
+
<InputGroup.Root>
|
|
7253
|
+
<InputGroup.Addon>
|
|
7254
|
+
<IconSearch />
|
|
7255
|
+
</InputGroup.Addon>
|
|
7256
|
+
<Input placeholder="Describe your filters" aria-label="Describe your filters" />
|
|
7257
|
+
<InputGroup.Addon>
|
|
7258
|
+
<Tag color="informative">Beta</Tag>
|
|
7259
|
+
</InputGroup.Addon>
|
|
7260
|
+
</InputGroup.Root>
|
|
7261
|
+
</div>
|
|
7262
|
+
);</code></pre>
|
|
7263
|
+
</div>
|
|
7264
|
+
<div class="note ok">
|
|
7265
|
+
<div class="row">
|
|
7266
|
+
<span class="ex-name">With Button</span>
|
|
7267
|
+
<span class="badge ok">story ok</span>
|
|
7268
|
+
</div>
|
|
7269
|
+
|
|
7270
|
+
|
|
7271
|
+
<pre><code>const WithButton = () => (
|
|
7272
|
+
<InputGroup.Root>
|
|
7273
|
+
<Input value="https://agentero.com/r/abc123" readOnly aria-label="Referral link" />
|
|
7274
|
+
<Divider orientation="vertical" />
|
|
7275
|
+
<InputGroup.Addon variant="action">
|
|
7276
|
+
<Button type="button" variant="ghost" size="md" onClick={handleCopy}>
|
|
7277
|
+
Copy link
|
|
7278
|
+
</Button>
|
|
7279
|
+
</InputGroup.Addon>
|
|
7280
|
+
</InputGroup.Root>
|
|
7281
|
+
);</code></pre>
|
|
7282
|
+
</div>
|
|
7283
|
+
<div class="note ok">
|
|
7284
|
+
<div class="row">
|
|
7285
|
+
<span class="ex-name">Disabled</span>
|
|
7286
|
+
<span class="badge ok">story ok</span>
|
|
7287
|
+
</div>
|
|
7288
|
+
<div>Disabled input greying out the frame and its addons</div>
|
|
7289
|
+
<div class="hint">`disabled` on the input greys out the whole frame — background, border, icon
|
|
7290
|
+
and affix — and the frame stops offering the text cursor.</div>
|
|
7291
|
+
<pre><code>const Disabled = () => (
|
|
7292
|
+
<InputGroup.Root>
|
|
7293
|
+
<InputGroup.Addon>
|
|
7294
|
+
<IconSearch />
|
|
7295
|
+
</InputGroup.Addon>
|
|
7296
|
+
<Input placeholder="Search agencies" aria-label="Search agencies" disabled />
|
|
7297
|
+
<InputGroup.Text>USD</InputGroup.Text>
|
|
7298
|
+
</InputGroup.Root>
|
|
7299
|
+
);</code></pre>
|
|
7300
|
+
</div>
|
|
7301
|
+
<div class="note ok">
|
|
7302
|
+
<div class="row">
|
|
7303
|
+
<span class="ex-name">Invalid</span>
|
|
7304
|
+
<span class="badge ok">story ok</span>
|
|
7305
|
+
</div>
|
|
7306
|
+
<div>Invalid input driving the frame's destructive border</div>
|
|
7307
|
+
<div class="hint">`aria-invalid` on the input moves the destructive border to the frame, and
|
|
7308
|
+
the ring follows it on focus.</div>
|
|
7309
|
+
<pre><code>const Invalid = () => (
|
|
7310
|
+
<InputGroup.Root>
|
|
7311
|
+
<InputGroup.Text>$</InputGroup.Text>
|
|
7312
|
+
<Input defaultValue="-40" aria-invalid aria-label="Premium in US dollars" />
|
|
7313
|
+
</InputGroup.Root>
|
|
7314
|
+
);</code></pre>
|
|
7315
|
+
</div>
|
|
7316
|
+
<div class="note ok">
|
|
7317
|
+
<div class="row">
|
|
7318
|
+
<span class="ex-name">All Sizes</span>
|
|
7319
|
+
<span class="badge ok">story ok</span>
|
|
7320
|
+
</div>
|
|
7321
|
+
<div>The three input sizes inside the frame, heights matching Input</div>
|
|
7322
|
+
<div class="hint">The frame follows the input's `size`: the same height as a standalone
|
|
7323
|
+
`Input` of that size, and the larger corner radius with `lg`.</div>
|
|
7324
|
+
<pre><code>const AllSizes = () => (
|
|
7325
|
+
<div className="flex flex-col gap-4">
|
|
7326
|
+
{SIZES.map(size => (
|
|
7327
|
+
<InputGroup.Root key={size}>
|
|
7328
|
+
<InputGroup.Addon>
|
|
7329
|
+
<IconSearch />
|
|
7330
|
+
</InputGroup.Addon>
|
|
7331
|
+
<Input size={size} placeholder={`Size ${size}`} aria-label={`Size ${size}`} />
|
|
7332
|
+
</InputGroup.Root>
|
|
7333
|
+
))}
|
|
7334
|
+
</div>
|
|
7335
|
+
);</code></pre>
|
|
7336
|
+
</div>
|
|
7337
|
+
<div class="note ok">
|
|
7338
|
+
<div class="row">
|
|
7339
|
+
<span class="ex-name">Inside Field Text</span>
|
|
7340
|
+
<span class="badge ok">story ok</span>
|
|
7341
|
+
</div>
|
|
7342
|
+
<div>Label and description reaching the input through the frame</div>
|
|
7343
|
+
<div class="hint">Inside a `FieldText` nothing changes for the group: the `Input` reads the
|
|
7344
|
+
field's context at any depth, so the label names it and the description
|
|
7345
|
+
describes it with no ids written by hand. The frame is not in the way.</div>
|
|
7346
|
+
<pre><code>const InsideFieldText = () => (
|
|
7347
|
+
<FieldText required>
|
|
7348
|
+
<Label>Agency website</Label>
|
|
7349
|
+
<InputGroup.Root>
|
|
7350
|
+
<InputGroup.Text>https://</InputGroup.Text>
|
|
7351
|
+
<Input type="text" inputMode="url" autoCapitalize="none" placeholder="www.agentero.com" />
|
|
7352
|
+
</InputGroup.Root>
|
|
7353
|
+
<Field.Description>Shown on your public profile.</Field.Description>
|
|
7354
|
+
</FieldText>
|
|
7355
|
+
);</code></pre>
|
|
7356
|
+
</div>
|
|
7357
|
+
<div class="note ok">
|
|
7358
|
+
<div class="row">
|
|
7359
|
+
<span class="ex-name">Search Field</span>
|
|
7360
|
+
<span class="badge ok">story ok</span>
|
|
7361
|
+
</div>
|
|
7362
|
+
|
|
7363
|
+
|
|
7364
|
+
<pre><code>const SearchField = () => (
|
|
7365
|
+
<form onSubmit={handleSearchSubmit}>
|
|
7366
|
+
<FieldStates
|
|
7367
|
+
label="Agency"
|
|
7368
|
+
tooltip="Search by agency name or NPN."
|
|
7369
|
+
required
|
|
7370
|
+
error="Pick an agency from the list.">
|
|
7371
|
+
<SearchInput />
|
|
7372
|
+
</FieldStates>
|
|
7373
|
+
</form>
|
|
7374
|
+
);</code></pre>
|
|
7375
|
+
</div>
|
|
7376
|
+
<div class="note ok">
|
|
7377
|
+
<div class="row">
|
|
7378
|
+
<span class="ex-name">Email Field</span>
|
|
7379
|
+
<span class="badge ok">story ok</span>
|
|
7380
|
+
</div>
|
|
7381
|
+
<div>Email field with a leading icon, valid and invalid</div>
|
|
7382
|
+
<div class="hint">The email field from the Portal UI library: a leading icon is all it adds
|
|
7383
|
+
to the input.</div>
|
|
7384
|
+
<pre><code>const EmailField = () => (
|
|
7385
|
+
<FieldStates label="Email" required error="Enter a valid email address.">
|
|
7386
|
+
<InputGroup.Root>
|
|
7387
|
+
<InputGroup.Addon>
|
|
7388
|
+
<IconMail />
|
|
7389
|
+
</InputGroup.Addon>
|
|
7390
|
+
<Input type="email" placeholder="me@email.com" />
|
|
7391
|
+
</InputGroup.Root>
|
|
7392
|
+
</FieldStates>
|
|
7393
|
+
);</code></pre>
|
|
7394
|
+
</div>
|
|
7395
|
+
<div class="note ok">
|
|
7396
|
+
<div class="row">
|
|
7397
|
+
<span class="ex-name">Price Field</span>
|
|
7398
|
+
<span class="badge ok">story ok</span>
|
|
7399
|
+
</div>
|
|
7400
|
+
<div>Price field with a symbol and a currency picker, valid and invalid</div>
|
|
7401
|
+
<div class="hint">The price field from the Portal UI library: a currency symbol before the
|
|
7402
|
+
value and a currency picker after it. The picker is a `DropdownMenu` whose
|
|
7403
|
+
trigger fills an `action` addon, so it keeps the frame's height and an inset
|
|
7404
|
+
focus ring.</div>
|
|
7405
|
+
<pre><code>const PriceField = () => (
|
|
7406
|
+
<FieldStates label="Price" required error="Enter a price above zero.">
|
|
7407
|
+
<PriceInput />
|
|
7408
|
+
</FieldStates>
|
|
7409
|
+
);</code></pre>
|
|
7410
|
+
</div>
|
|
7411
|
+
<div class="note ok">
|
|
7412
|
+
<div class="row">
|
|
7413
|
+
<span class="ex-name">Phone Field</span>
|
|
7414
|
+
<span class="badge ok">story ok</span>
|
|
7415
|
+
</div>
|
|
7416
|
+
<div>Phone field with a leading country code picker, valid and invalid</div>
|
|
7417
|
+
<div class="hint">The optional phone field from the Portal UI library: a country code picker
|
|
7418
|
+
before the number. The picker leads, so the `action` addon rounds its
|
|
7419
|
+
button's start corners with the frame.</div>
|
|
7420
|
+
<pre><code>const PhoneField = () => (
|
|
7421
|
+
<FieldStates label="Phone number" error="Enter a 10-digit phone number.">
|
|
7422
|
+
<PhoneInput />
|
|
7423
|
+
</FieldStates>
|
|
7424
|
+
);</code></pre>
|
|
7425
|
+
</div>
|
|
7426
|
+
</div>
|
|
7427
|
+
|
|
7428
|
+
|
|
7048
7429
|
</div>
|
|
7049
7430
|
</article>
|
|
7050
7431
|
<article
|
|
@@ -7059,9 +7440,9 @@ they cannot change.</div>
|
|
|
7059
7440
|
<div class="title">
|
|
7060
7441
|
<h2><span class="status-dot dot-ok"></span> Label</h2>
|
|
7061
7442
|
<div class="badges">
|
|
7062
|
-
<label for="c-
|
|
7443
|
+
<label for="c-19-components-label-props" class="badge ok as-toggle">3 prop types</label>
|
|
7063
7444
|
|
|
7064
|
-
<label for="c-
|
|
7445
|
+
<label for="c-19-components-label-stories" class="badge ok as-toggle">5 stories</label>
|
|
7065
7446
|
|
|
7066
7447
|
|
|
7067
7448
|
</div>
|
|
@@ -7081,10 +7462,10 @@ still has to carry `required` / `aria-required`.</div>
|
|
|
7081
7462
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
7082
7463
|
|
|
7083
7464
|
|
|
7084
|
-
<input id="c-
|
|
7465
|
+
<input id="c-19-components-label-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
7085
7466
|
|
|
7086
7467
|
|
|
7087
|
-
<input id="c-
|
|
7468
|
+
<input id="c-19-components-label-props" class="tg tg-props" type="checkbox" hidden />
|
|
7088
7469
|
|
|
7089
7470
|
<div class="panels">
|
|
7090
7471
|
|
|
@@ -7204,9 +7585,9 @@ field's control with no `htmlFor`. An explicit `htmlFor` still wins.</div>
|
|
|
7204
7585
|
<div class="title">
|
|
7205
7586
|
<h2><span class="status-dot dot-ok"></span> Loading</h2>
|
|
7206
7587
|
<div class="badges">
|
|
7207
|
-
<label for="c-
|
|
7588
|
+
<label for="c-20-components-loading-props" class="badge ok as-toggle">1 prop type</label>
|
|
7208
7589
|
|
|
7209
|
-
<label for="c-
|
|
7590
|
+
<label for="c-20-components-loading-stories" class="badge ok as-toggle">7 stories</label>
|
|
7210
7591
|
|
|
7211
7592
|
|
|
7212
7593
|
</div>
|
|
@@ -7223,10 +7604,10 @@ parent font size via `em`-based size variants (`sm`, `md`, `lg`).</div>
|
|
|
7223
7604
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
7224
7605
|
|
|
7225
7606
|
|
|
7226
|
-
<input id="c-
|
|
7607
|
+
<input id="c-20-components-loading-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
7227
7608
|
|
|
7228
7609
|
|
|
7229
|
-
<input id="c-
|
|
7610
|
+
<input id="c-20-components-loading-props" class="tg tg-props" type="checkbox" hidden />
|
|
7230
7611
|
|
|
7231
7612
|
<div class="panels">
|
|
7232
7613
|
|
|
@@ -7377,9 +7758,9 @@ against the dark background.</div>
|
|
|
7377
7758
|
<div class="title">
|
|
7378
7759
|
<h2><span class="status-dot dot-ok"></span> Modal.Root</h2>
|
|
7379
7760
|
<div class="badges">
|
|
7380
|
-
<label for="c-
|
|
7761
|
+
<label for="c-21-components-modal-props" class="badge ok as-toggle">5 prop types</label>
|
|
7381
7762
|
|
|
7382
|
-
<label for="c-
|
|
7763
|
+
<label for="c-21-components-modal-stories" class="badge ok as-toggle">6 stories</label>
|
|
7383
7764
|
|
|
7384
7765
|
|
|
7385
7766
|
</div>
|
|
@@ -7425,10 +7806,10 @@ import { Modal } from '@agentero/design-system/modal';
|
|
|
7425
7806
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
7426
7807
|
|
|
7427
7808
|
|
|
7428
|
-
<input id="c-
|
|
7809
|
+
<input id="c-21-components-modal-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
7429
7810
|
|
|
7430
7811
|
|
|
7431
|
-
<input id="c-
|
|
7812
|
+
<input id="c-21-components-modal-props" class="tg tg-props" type="checkbox" hidden />
|
|
7432
7813
|
|
|
7433
7814
|
<div class="panels">
|
|
7434
7815
|
|
|
@@ -7648,9 +8029,9 @@ announced as an `alertdialog`. Only the footer actions close it.</div>
|
|
|
7648
8029
|
<div class="title">
|
|
7649
8030
|
<h2><span class="status-dot dot-ok"></span> Pagination</h2>
|
|
7650
8031
|
<div class="badges">
|
|
7651
|
-
<label for="c-
|
|
8032
|
+
<label for="c-22-components-pagination-props" class="badge ok as-toggle">5 prop types</label>
|
|
7652
8033
|
|
|
7653
|
-
<label for="c-
|
|
8034
|
+
<label for="c-22-components-pagination-stories" class="badge ok as-toggle">7 stories</label>
|
|
7654
8035
|
|
|
7655
8036
|
|
|
7656
8037
|
</div>
|
|
@@ -7680,10 +8061,10 @@ const [page, setPage] = useState(1);
|
|
|
7680
8061
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
7681
8062
|
|
|
7682
8063
|
|
|
7683
|
-
<input id="c-
|
|
8064
|
+
<input id="c-22-components-pagination-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
7684
8065
|
|
|
7685
8066
|
|
|
7686
|
-
<input id="c-
|
|
8067
|
+
<input id="c-22-components-pagination-props" class="tg tg-props" type="checkbox" hidden />
|
|
7687
8068
|
|
|
7688
8069
|
<div class="panels">
|
|
7689
8070
|
|
|
@@ -7838,9 +8219,9 @@ entries summary follow along.</div>
|
|
|
7838
8219
|
<div class="title">
|
|
7839
8220
|
<h2><span class="status-dot dot-ok"></span> Popover.Root</h2>
|
|
7840
8221
|
<div class="badges">
|
|
7841
|
-
<label for="c-
|
|
8222
|
+
<label for="c-23-components-popover-props" class="badge ok as-toggle">5 prop types</label>
|
|
7842
8223
|
|
|
7843
|
-
<label for="c-
|
|
8224
|
+
<label for="c-23-components-popover-stories" class="badge ok as-toggle">5 stories</label>
|
|
7844
8225
|
|
|
7845
8226
|
|
|
7846
8227
|
</div>
|
|
@@ -7869,10 +8250,10 @@ import { Popover } from '@agentero/design-system/popover';
|
|
|
7869
8250
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
7870
8251
|
|
|
7871
8252
|
|
|
7872
|
-
<input id="c-
|
|
8253
|
+
<input id="c-23-components-popover-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
7873
8254
|
|
|
7874
8255
|
|
|
7875
|
-
<input id="c-
|
|
8256
|
+
<input id="c-23-components-popover-props" class="tg tg-props" type="checkbox" hidden />
|
|
7876
8257
|
|
|
7877
8258
|
<div class="panels">
|
|
7878
8259
|
|
|
@@ -8071,9 +8452,9 @@ focus returning to its trigger once the modal closes.</div>
|
|
|
8071
8452
|
<div class="title">
|
|
8072
8453
|
<h2><span class="status-dot dot-ok"></span> Progress</h2>
|
|
8073
8454
|
<div class="badges">
|
|
8074
|
-
<label for="c-
|
|
8455
|
+
<label for="c-24-components-progress-props" class="badge ok as-toggle">4 prop types</label>
|
|
8075
8456
|
|
|
8076
|
-
<label for="c-
|
|
8457
|
+
<label for="c-24-components-progress-stories" class="badge ok as-toggle">4 stories</label>
|
|
8077
8458
|
|
|
8078
8459
|
|
|
8079
8460
|
</div>
|
|
@@ -8092,10 +8473,10 @@ with `currentColor`, so recolor it with a plain text class — e.g.
|
|
|
8092
8473
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
8093
8474
|
|
|
8094
8475
|
|
|
8095
|
-
<input id="c-
|
|
8476
|
+
<input id="c-24-components-progress-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
8096
8477
|
|
|
8097
8478
|
|
|
8098
|
-
<input id="c-
|
|
8479
|
+
<input id="c-24-components-progress-props" class="tg tg-props" type="checkbox" hidden />
|
|
8099
8480
|
|
|
8100
8481
|
<div class="panels">
|
|
8101
8482
|
|
|
@@ -8214,7 +8595,7 @@ percentage: number</code></pre>
|
|
|
8214
8595
|
<div class="badges">
|
|
8215
8596
|
|
|
8216
8597
|
|
|
8217
|
-
<label for="c-
|
|
8598
|
+
<label for="c-25-components-skeleton-stories" class="badge ok as-toggle">4 stories</label>
|
|
8218
8599
|
|
|
8219
8600
|
|
|
8220
8601
|
</div>
|
|
@@ -8231,7 +8612,7 @@ shape it with Tailwind classes to mirror the content it stands in for.</div>
|
|
|
8231
8612
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
8232
8613
|
|
|
8233
8614
|
|
|
8234
|
-
<input id="c-
|
|
8615
|
+
<input id="c-25-components-skeleton-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
8235
8616
|
|
|
8236
8617
|
|
|
8237
8618
|
|
|
@@ -8327,9 +8708,9 @@ shape it with Tailwind classes to mirror the content it stands in for.</div>
|
|
|
8327
8708
|
<div class="title">
|
|
8328
8709
|
<h2><span class="status-dot dot-ok"></span> Switch</h2>
|
|
8329
8710
|
<div class="badges">
|
|
8330
|
-
<label for="c-
|
|
8711
|
+
<label for="c-26-components-switch-props" class="badge ok as-toggle">8 prop types</label>
|
|
8331
8712
|
|
|
8332
|
-
<label for="c-
|
|
8713
|
+
<label for="c-26-components-switch-stories" class="badge ok as-toggle">7 stories</label>
|
|
8333
8714
|
|
|
8334
8715
|
|
|
8335
8716
|
</div>
|
|
@@ -8345,10 +8726,10 @@ a Checkbox for a single boolean that applies instantly, and pair it with a
|
|
|
8345
8726
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
8346
8727
|
|
|
8347
8728
|
|
|
8348
|
-
<input id="c-
|
|
8729
|
+
<input id="c-26-components-switch-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
8349
8730
|
|
|
8350
8731
|
|
|
8351
|
-
<input id="c-
|
|
8732
|
+
<input id="c-26-components-switch-props" class="tg tg-props" type="checkbox" hidden />
|
|
8352
8733
|
|
|
8353
8734
|
<div class="panels">
|
|
8354
8735
|
|
|
@@ -8529,9 +8910,9 @@ size?: "sm" | "md"</code></pre>
|
|
|
8529
8910
|
<div class="title">
|
|
8530
8911
|
<h2><span class="status-dot dot-ok"></span> Table.Root</h2>
|
|
8531
8912
|
<div class="badges">
|
|
8532
|
-
<label for="c-
|
|
8913
|
+
<label for="c-27-components-table-props" class="badge ok as-toggle">6 prop types</label>
|
|
8533
8914
|
|
|
8534
|
-
<label for="c-
|
|
8915
|
+
<label for="c-27-components-table-stories" class="badge ok as-toggle">10 stories</label>
|
|
8535
8916
|
|
|
8536
8917
|
|
|
8537
8918
|
</div>
|
|
@@ -8562,10 +8943,10 @@ import { Table } from '@agentero/design-system/table';
|
|
|
8562
8943
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
8563
8944
|
|
|
8564
8945
|
|
|
8565
|
-
<input id="c-
|
|
8946
|
+
<input id="c-27-components-table-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
8566
8947
|
|
|
8567
8948
|
|
|
8568
|
-
<input id="c-
|
|
8949
|
+
<input id="c-27-components-table-props" class="tg tg-props" type="checkbox" hidden />
|
|
8569
8950
|
|
|
8570
8951
|
<div class="panels">
|
|
8571
8952
|
|
|
@@ -8783,9 +9164,9 @@ keeps its padding.</div>
|
|
|
8783
9164
|
<div class="title">
|
|
8784
9165
|
<h2><span class="status-dot dot-ok"></span> Tabs.Root</h2>
|
|
8785
9166
|
<div class="badges">
|
|
8786
|
-
<label for="c-
|
|
9167
|
+
<label for="c-28-components-tabs-props" class="badge ok as-toggle">9 prop types</label>
|
|
8787
9168
|
|
|
8788
|
-
<label for="c-
|
|
9169
|
+
<label for="c-28-components-tabs-stories" class="badge ok as-toggle">8 stories</label>
|
|
8789
9170
|
|
|
8790
9171
|
|
|
8791
9172
|
</div>
|
|
@@ -8816,10 +9197,10 @@ import { Tabs } from '@agentero/design-system/tabs';
|
|
|
8816
9197
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
8817
9198
|
|
|
8818
9199
|
|
|
8819
|
-
<input id="c-
|
|
9200
|
+
<input id="c-28-components-tabs-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
8820
9201
|
|
|
8821
9202
|
|
|
8822
|
-
<input id="c-
|
|
9203
|
+
<input id="c-28-components-tabs-props" class="tg tg-props" type="checkbox" hidden />
|
|
8823
9204
|
|
|
8824
9205
|
<div class="panels">
|
|
8825
9206
|
|
|
@@ -9040,9 +9421,9 @@ tablist role is announced.</div>
|
|
|
9040
9421
|
<div class="title">
|
|
9041
9422
|
<h2><span class="status-dot dot-ok"></span> Tag</h2>
|
|
9042
9423
|
<div class="badges">
|
|
9043
|
-
<label for="c-
|
|
9424
|
+
<label for="c-29-components-tag-props" class="badge ok as-toggle">8 prop types</label>
|
|
9044
9425
|
|
|
9045
|
-
<label for="c-
|
|
9426
|
+
<label for="c-29-components-tag-stories" class="badge ok as-toggle">12 stories</label>
|
|
9046
9427
|
|
|
9047
9428
|
|
|
9048
9429
|
</div>
|
|
@@ -9061,10 +9442,10 @@ it an interactive link or button, which adds the pointer cursor and hover fill.<
|
|
|
9061
9442
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
9062
9443
|
|
|
9063
9444
|
|
|
9064
|
-
<input id="c-
|
|
9445
|
+
<input id="c-29-components-tag-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
9065
9446
|
|
|
9066
9447
|
|
|
9067
|
-
<input id="c-
|
|
9448
|
+
<input id="c-29-components-tag-props" class="tg tg-props" type="checkbox" hidden />
|
|
9068
9449
|
|
|
9069
9450
|
<div class="panels">
|
|
9070
9451
|
|
|
@@ -9489,9 +9870,9 @@ leading + trailing icons, and icon-only.</div>
|
|
|
9489
9870
|
<div class="title">
|
|
9490
9871
|
<h2><span class="status-dot dot-ok"></span> TextArea</h2>
|
|
9491
9872
|
<div class="badges">
|
|
9492
|
-
<label for="c-
|
|
9873
|
+
<label for="c-30-components-textarea-props" class="badge ok as-toggle">1 prop type</label>
|
|
9493
9874
|
|
|
9494
|
-
<label for="c-
|
|
9875
|
+
<label for="c-30-components-textarea-stories" class="badge ok as-toggle">6 stories</label>
|
|
9495
9876
|
|
|
9496
9877
|
|
|
9497
9878
|
</div>
|
|
@@ -9508,10 +9889,10 @@ states. It wires nothing on its own: `id`, `aria-invalid` and
|
|
|
9508
9889
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
9509
9890
|
|
|
9510
9891
|
|
|
9511
|
-
<input id="c-
|
|
9892
|
+
<input id="c-30-components-textarea-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
9512
9893
|
|
|
9513
9894
|
|
|
9514
|
-
<input id="c-
|
|
9895
|
+
<input id="c-30-components-textarea-props" class="tg tg-props" type="checkbox" hidden />
|
|
9515
9896
|
|
|
9516
9897
|
<div class="panels">
|
|
9517
9898
|
|
|
@@ -9643,9 +10024,9 @@ size and the minimum height shows three rows.</div>
|
|
|
9643
10024
|
<div class="title">
|
|
9644
10025
|
<h2><span class="status-dot dot-ok"></span> Toast</h2>
|
|
9645
10026
|
<div class="badges">
|
|
9646
|
-
<label for="c-
|
|
10027
|
+
<label for="c-31-components-toast-props" class="badge ok as-toggle">11 prop types</label>
|
|
9647
10028
|
|
|
9648
|
-
<label for="c-
|
|
10029
|
+
<label for="c-31-components-toast-stories" class="badge ok as-toggle">11 stories</label>
|
|
9649
10030
|
|
|
9650
10031
|
|
|
9651
10032
|
</div>
|
|
@@ -9664,10 +10045,10 @@ common feedback patterns.</div>
|
|
|
9664
10045
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
9665
10046
|
|
|
9666
10047
|
|
|
9667
|
-
<input id="c-
|
|
10048
|
+
<input id="c-31-components-toast-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
9668
10049
|
|
|
9669
10050
|
|
|
9670
|
-
<input id="c-
|
|
10051
|
+
<input id="c-31-components-toast-props" class="tg tg-props" type="checkbox" hidden />
|
|
9671
10052
|
|
|
9672
10053
|
<div class="panels">
|
|
9673
10054
|
|
|
@@ -10096,9 +10477,9 @@ action (e.g., a sync icon for a sync-in-progress toast).</div>
|
|
|
10096
10477
|
<div class="title">
|
|
10097
10478
|
<h2><span class="status-dot dot-ok"></span> Tooltip</h2>
|
|
10098
10479
|
<div class="badges">
|
|
10099
|
-
<label for="c-
|
|
10480
|
+
<label for="c-32-components-tooltip-props" class="badge ok as-toggle">12 prop types</label>
|
|
10100
10481
|
|
|
10101
|
-
<label for="c-
|
|
10482
|
+
<label for="c-32-components-tooltip-stories" class="badge ok as-toggle">5 stories</label>
|
|
10102
10483
|
|
|
10103
10484
|
|
|
10104
10485
|
</div>
|
|
@@ -10117,10 +10498,10 @@ on hover or focus.</div>
|
|
|
10117
10498
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
10118
10499
|
|
|
10119
10500
|
|
|
10120
|
-
<input id="c-
|
|
10501
|
+
<input id="c-32-components-tooltip-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
10121
10502
|
|
|
10122
10503
|
|
|
10123
|
-
<input id="c-
|
|
10504
|
+
<input id="c-32-components-tooltip-props" class="tg tg-props" type="checkbox" hidden />
|
|
10124
10505
|
|
|
10125
10506
|
<div class="panels">
|
|
10126
10507
|
|
|
@@ -10292,9 +10673,9 @@ sideOffset?: number = 4</code></pre>
|
|
|
10292
10673
|
<div class="title">
|
|
10293
10674
|
<h2><span class="status-dot dot-ok"></span> ValidationList</h2>
|
|
10294
10675
|
<div class="badges">
|
|
10295
|
-
<label for="c-
|
|
10676
|
+
<label for="c-33-components-validationlist-props" class="badge ok as-toggle">2 prop types</label>
|
|
10296
10677
|
|
|
10297
|
-
<label for="c-
|
|
10678
|
+
<label for="c-33-components-validationlist-stories" class="badge ok as-toggle">4 stories</label>
|
|
10298
10679
|
|
|
10299
10680
|
|
|
10300
10681
|
</div>
|
|
@@ -10315,10 +10696,10 @@ your form validation; it does not own the input or block submission.</div>
|
|
|
10315
10696
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
10316
10697
|
|
|
10317
10698
|
|
|
10318
|
-
<input id="c-
|
|
10699
|
+
<input id="c-33-components-validationlist-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
10319
10700
|
|
|
10320
10701
|
|
|
10321
|
-
<input id="c-
|
|
10702
|
+
<input id="c-33-components-validationlist-props" class="tg tg-props" type="checkbox" hidden />
|
|
10322
10703
|
|
|
10323
10704
|
<div class="panels">
|
|
10324
10705
|
|