@agentero/design-system 0.31.0 → 0.31.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 +9 -86
- package/mcp/manifests/components.json +4 -303
- package/package.json +1 -1
- package/src/input/input.d.ts +6 -39
- package/src/textarea/textarea.d.ts +6 -20
|
@@ -594,7 +594,7 @@
|
|
|
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>4.4s</strong>.
|
|
598
598
|
</div>
|
|
599
599
|
<h2 class="section-title">Components</h2>
|
|
600
600
|
<div class="grid" role="list">
|
|
@@ -6435,7 +6435,7 @@ trigger-dense UIs where an instant preview reads as more responsive.</div>
|
|
|
6435
6435
|
<div class="title">
|
|
6436
6436
|
<h2><span class="status-dot dot-ok"></span> Input</h2>
|
|
6437
6437
|
<div class="badges">
|
|
6438
|
-
<label for="c-17-components-input-props" class="badge ok as-toggle">
|
|
6438
|
+
<label for="c-17-components-input-props" class="badge ok as-toggle">1 prop type</label>
|
|
6439
6439
|
|
|
6440
6440
|
<label for="c-17-components-input-stories" class="badge ok as-toggle">9 stories</label>
|
|
6441
6441
|
|
|
@@ -6449,9 +6449,9 @@ trigger-dense UIs where an instant preview reads as more responsive.</div>
|
|
|
6449
6449
|
`aria-describedby` on its own; standalone, as here, they are plain props set
|
|
6450
6450
|
by hand.
|
|
6451
6451
|
|
|
6452
|
-
|
|
6453
|
-
destructive border follows, so the styling can never disagree with
|
|
6454
|
-
assistive technology announces.</div>
|
|
6452
|
+
The invalid state has no prop of its own. Mark the control `aria-invalid`
|
|
6453
|
+
and the destructive border follows, so the styling can never disagree with
|
|
6454
|
+
what assistive technology announces.</div>
|
|
6455
6455
|
<div class="kv"><span class="chip">summary: Base single-line text control that takes its wiring from InputContext</span><span class="chip">example: <Label htmlFor="email">Email</Label>
|
|
6456
6456
|
<Input id="email" type="email" placeholder="you@example.com" /></span><span class="chip">example: <Input id="email" aria-invalid aria-describedby="email-error" />
|
|
6457
6457
|
<span id="email-error">Enter a valid email address.</span></span></div>
|
|
@@ -6473,58 +6473,18 @@ assistive technology announces.</div>
|
|
|
6473
6473
|
<div class="note ok">
|
|
6474
6474
|
<div class="row">
|
|
6475
6475
|
<span class="ex-name">Prop types <small>(react-component-meta)</small></span>
|
|
6476
|
-
<span class="badge ok">
|
|
6476
|
+
<span class="badge ok">1 prop type</span>
|
|
6477
6477
|
</div>
|
|
6478
6478
|
<pre><code>Component: src/input/input.tsx::Input</code></pre>
|
|
6479
6479
|
<pre><code>Props:</code></pre>
|
|
6480
6480
|
<pre><code>/**
|
|
6481
|
-
* Indicates the entered value does not conform to the format expected by the application.
|
|
6482
|
-
* Set this when the value fails validation: it drives the destructive border
|
|
6483
|
-
* and is what assistive technology announces. Point `aria-describedby` at
|
|
6484
|
-
* the error message so the two are read together.
|
|
6485
|
-
*/
|
|
6486
|
-
aria-invalid?: boolean | "true" | "false" | "grammar" | "spelling" | undefined
|
|
6487
|
-
|
|
6488
|
-
/**
|
|
6489
|
-
* Blocks interaction, greys the control out and drops its shadow. The value
|
|
6490
|
-
* is not submitted. When the user still needs to read or copy the value,
|
|
6491
|
-
* use `readOnly` instead.
|
|
6492
|
-
*/
|
|
6493
|
-
disabled?: boolean
|
|
6494
|
-
|
|
6495
|
-
/**
|
|
6496
|
-
* Short hint shown while the field is empty. It disappears on the first
|
|
6497
|
-
* keystroke, so it is never a substitute for a label.
|
|
6498
|
-
*/
|
|
6499
|
-
placeholder?: string
|
|
6500
|
-
|
|
6501
|
-
/**
|
|
6502
|
-
* Keeps the value focusable and copyable but not editable, and still
|
|
6503
|
-
* submits it. Unlike `disabled`, it stays in the tab order.
|
|
6504
|
-
*/
|
|
6505
|
-
readOnly?: boolean
|
|
6506
|
-
|
|
6507
|
-
/**
|
|
6508
|
-
* Marks the control required for both the browser and assistive technology.
|
|
6509
|
-
*/
|
|
6510
|
-
required?: boolean
|
|
6511
|
-
|
|
6512
|
-
/**
|
|
6513
6481
|
* Control height. Defaults to `'md'`.
|
|
6514
6482
|
* - `sm` (32px) — dense layouts where vertical space is tight.
|
|
6515
6483
|
* - `md` (40px) — standard form density.
|
|
6516
6484
|
* - `lg` (48px) — low-density forms and larger touch targets. Also raises
|
|
6517
6485
|
* the text to `base` and the corner radius to `lg`.
|
|
6518
6486
|
*/
|
|
6519
|
-
size?: "sm" | "md" | "lg"
|
|
6520
|
-
|
|
6521
|
-
/**
|
|
6522
|
-
* Native input type. Picks the on-screen keyboard on touch devices and the
|
|
6523
|
-
* browser's own parsing, so set it even when you validate yourself.
|
|
6524
|
-
* Defaults to `'text'`. Multi-line text is not one of the options — that is
|
|
6525
|
-
* a TextArea.
|
|
6526
|
-
*/
|
|
6527
|
-
type?: HTMLInputTypeAttribute | undefined</code></pre>
|
|
6487
|
+
size?: "sm" | "md" | "lg"</code></pre>
|
|
6528
6488
|
</div>
|
|
6529
6489
|
</div>
|
|
6530
6490
|
|
|
@@ -9059,7 +9019,7 @@ leading + trailing icons, and icon-only.</div>
|
|
|
9059
9019
|
<div class="title">
|
|
9060
9020
|
<h2><span class="status-dot dot-ok"></span> TextArea</h2>
|
|
9061
9021
|
<div class="badges">
|
|
9062
|
-
<label for="c-29-components-textarea-props" class="badge ok as-toggle">
|
|
9022
|
+
<label for="c-29-components-textarea-props" class="badge ok as-toggle">1 prop type</label>
|
|
9063
9023
|
|
|
9064
9024
|
<label for="c-29-components-textarea-stories" class="badge ok as-toggle">6 stories</label>
|
|
9065
9025
|
|
|
@@ -9091,48 +9051,11 @@ states. It wires nothing on its own: `id`, `aria-invalid` and
|
|
|
9091
9051
|
<div class="note ok">
|
|
9092
9052
|
<div class="row">
|
|
9093
9053
|
<span class="ex-name">Prop types <small>(react-component-meta)</small></span>
|
|
9094
|
-
<span class="badge ok">
|
|
9054
|
+
<span class="badge ok">1 prop type</span>
|
|
9095
9055
|
</div>
|
|
9096
9056
|
<pre><code>Component: src/textarea/textarea.tsx::TextArea</code></pre>
|
|
9097
9057
|
<pre><code>Props:</code></pre>
|
|
9098
9058
|
<pre><code>/**
|
|
9099
|
-
* Indicates the entered value does not conform to the format expected by the application.
|
|
9100
|
-
* Drives the destructive border and is what assistive technology announces.
|
|
9101
|
-
*/
|
|
9102
|
-
aria-invalid?: boolean | "true" | "false" | "grammar" | "spelling" | undefined
|
|
9103
|
-
|
|
9104
|
-
/**
|
|
9105
|
-
* Blocks interaction and drops the value from the submission. Use `readOnly`
|
|
9106
|
-
* when the user still needs to read or copy it.
|
|
9107
|
-
*/
|
|
9108
|
-
disabled?: boolean
|
|
9109
|
-
|
|
9110
|
-
/**
|
|
9111
|
-
* Caps the value in UTF-16 code units: typing stops there and a paste is cut.
|
|
9112
|
-
*/
|
|
9113
|
-
maxLength?: number
|
|
9114
|
-
|
|
9115
|
-
/**
|
|
9116
|
-
* Hint shown while empty; never a substitute for a label.
|
|
9117
|
-
*/
|
|
9118
|
-
placeholder?: string
|
|
9119
|
-
|
|
9120
|
-
/**
|
|
9121
|
-
* Focusable, copyable and submitted, but not editable.
|
|
9122
|
-
*/
|
|
9123
|
-
readOnly?: boolean
|
|
9124
|
-
|
|
9125
|
-
/**
|
|
9126
|
-
* Marks the control required for both the browser and assistive technology.
|
|
9127
|
-
*/
|
|
9128
|
-
required?: boolean
|
|
9129
|
-
|
|
9130
|
-
/**
|
|
9131
|
-
* Rows visible at rest when three are not enough.
|
|
9132
|
-
*/
|
|
9133
|
-
rows?: number
|
|
9134
|
-
|
|
9135
|
-
/**
|
|
9136
9059
|
* Defaults to `'md'`. The first row measures one Input of the same size and
|
|
9137
9060
|
* three rows show at rest: `sm` 76px, `md` 84px, `lg` 96px (`lg` also raises
|
|
9138
9061
|
* the text to `base` and the radius to `lg`).
|
|
@@ -6461,13 +6461,13 @@
|
|
|
6461
6461
|
"<Input id=\"email\" aria-invalid aria-describedby=\"email-error\" />\n<span id=\"email-error\">Enter a valid email address.</span>"
|
|
6462
6462
|
]
|
|
6463
6463
|
},
|
|
6464
|
-
"description": "Input is the base single-line text control. When a container such as\n`FieldText` provides `InputContext`, it picks up `id`, `aria-invalid` and\n`aria-describedby` on its own; standalone, as here, they are plain props set\nby hand.\n\
|
|
6464
|
+
"description": "Input is the base single-line text control. When a container such as\n`FieldText` provides `InputContext`, it picks up `id`, `aria-invalid` and\n`aria-describedby` on its own; standalone, as here, they are plain props set\nby hand.\n\nThe invalid state has no prop of its own. Mark the control `aria-invalid`\nand the destructive border follows, so the styling can never disagree with\nwhat assistive technology announces.",
|
|
6465
6465
|
"summary": "Base single-line text control that takes its wiring from InputContext",
|
|
6466
6466
|
"reactComponentMeta": {
|
|
6467
6467
|
"displayName": "Input",
|
|
6468
6468
|
"exportName": "Input",
|
|
6469
6469
|
"filePath": "/home/runner/work/design-system/design-system/src/input/input.tsx",
|
|
6470
|
-
"description": "Input is the design system's base single-line text control. Reach for it\nwhenever a form collects free text, and pair it with\n[Label](?path=/docs/components-label--docs) so the control has an accessible\nname.\n\nWhen a container provides `InputContext`, the input takes its wiring (`id`,\n`aria-describedby`, `aria-invalid`, `required`, `disabled`, `readOnly`) from\nit with nothing passed by hand; `FieldText` is one such container. Standalone it\nrenders exactly the props it is given, and its own props always win over the\ncontext.
|
|
6470
|
+
"description": "Input is the design system's base single-line text control. Reach for it\nwhenever a form collects free text, and pair it with\n[Label](?path=/docs/components-label--docs) so the control has an accessible\nname.\n\nWhen a container provides `InputContext`, the input takes its wiring (`id`,\n`aria-describedby`, `aria-invalid`, `required`, `disabled`, `readOnly`) from\nit with nothing passed by hand; `FieldText` is one such container. Standalone it\nrenders exactly the props it is given, and its own props always win over the\ncontext. Every standard `<input>` attribute is accepted and forwarded, so\n`type`, `placeholder`, `required`, `disabled`, `readOnly` and the rest work\nas in plain HTML. The invalid state has no prop of its own: `aria-invalid`\ndrives the destructive border, so the styling can never disagree with what\nassistive technology announces. Point `aria-describedby` at the error message\nso the two are read together.\n\nDo not use Input for multi-line text; that is TextArea's job. It also has no\nslots for leading or trailing addons — an input with a currency prefix or a\nunit suffix belongs in an input group, not here.",
|
|
6471
6471
|
"jsDocTags": {
|
|
6472
6472
|
"summary": [
|
|
6473
6473
|
"Base single-line text control that takes its wiring from InputContext"
|
|
@@ -6478,144 +6478,6 @@
|
|
|
6478
6478
|
]
|
|
6479
6479
|
},
|
|
6480
6480
|
"props": {
|
|
6481
|
-
"aria-invalid": {
|
|
6482
|
-
"name": "aria-invalid",
|
|
6483
|
-
"required": false,
|
|
6484
|
-
"type": {
|
|
6485
|
-
"name": "boolean | \"true\" | \"false\" | \"grammar\" | \"spelling\" | undefined"
|
|
6486
|
-
},
|
|
6487
|
-
"description": "Indicates the entered value does not conform to the format expected by the application.\nSet this when the value fails validation: it drives the destructive border\nand is what assistive technology announces. Point `aria-describedby` at\nthe error message so the two are read together.",
|
|
6488
|
-
"defaultValue": null,
|
|
6489
|
-
"parent": {
|
|
6490
|
-
"name": "AriaAttributes",
|
|
6491
|
-
"fileName": "node_modules/@types/react/index.d.ts"
|
|
6492
|
-
},
|
|
6493
|
-
"declarations": [
|
|
6494
|
-
{
|
|
6495
|
-
"name": "AriaAttributes",
|
|
6496
|
-
"fileName": "node_modules/@types/react/index.d.ts"
|
|
6497
|
-
},
|
|
6498
|
-
{
|
|
6499
|
-
"name": "TypeLiteral",
|
|
6500
|
-
"fileName": "src/input/input.tsx"
|
|
6501
|
-
}
|
|
6502
|
-
]
|
|
6503
|
-
},
|
|
6504
|
-
"type": {
|
|
6505
|
-
"name": "type",
|
|
6506
|
-
"required": false,
|
|
6507
|
-
"type": {
|
|
6508
|
-
"name": "HTMLInputTypeAttribute | undefined"
|
|
6509
|
-
},
|
|
6510
|
-
"description": "Native input type. Picks the on-screen keyboard on touch devices and the\nbrowser's own parsing, so set it even when you validate yourself.\nDefaults to `'text'`. Multi-line text is not one of the options — that is\na TextArea.",
|
|
6511
|
-
"defaultValue": null,
|
|
6512
|
-
"parent": {
|
|
6513
|
-
"name": "InputHTMLAttributes",
|
|
6514
|
-
"fileName": "node_modules/@types/react/index.d.ts"
|
|
6515
|
-
},
|
|
6516
|
-
"declarations": [
|
|
6517
|
-
{
|
|
6518
|
-
"name": "InputHTMLAttributes",
|
|
6519
|
-
"fileName": "node_modules/@types/react/index.d.ts"
|
|
6520
|
-
},
|
|
6521
|
-
{
|
|
6522
|
-
"name": "TypeLiteral",
|
|
6523
|
-
"fileName": "src/input/input.tsx"
|
|
6524
|
-
}
|
|
6525
|
-
]
|
|
6526
|
-
},
|
|
6527
|
-
"disabled": {
|
|
6528
|
-
"name": "disabled",
|
|
6529
|
-
"required": false,
|
|
6530
|
-
"type": {
|
|
6531
|
-
"name": "boolean"
|
|
6532
|
-
},
|
|
6533
|
-
"description": "Blocks interaction, greys the control out and drops its shadow. The value\nis not submitted. When the user still needs to read or copy the value,\nuse `readOnly` instead.",
|
|
6534
|
-
"defaultValue": null,
|
|
6535
|
-
"parent": {
|
|
6536
|
-
"name": "InputHTMLAttributes",
|
|
6537
|
-
"fileName": "node_modules/@types/react/index.d.ts"
|
|
6538
|
-
},
|
|
6539
|
-
"declarations": [
|
|
6540
|
-
{
|
|
6541
|
-
"name": "InputHTMLAttributes",
|
|
6542
|
-
"fileName": "node_modules/@types/react/index.d.ts"
|
|
6543
|
-
},
|
|
6544
|
-
{
|
|
6545
|
-
"name": "TypeLiteral",
|
|
6546
|
-
"fileName": "src/input/input.tsx"
|
|
6547
|
-
}
|
|
6548
|
-
]
|
|
6549
|
-
},
|
|
6550
|
-
"required": {
|
|
6551
|
-
"name": "required",
|
|
6552
|
-
"required": false,
|
|
6553
|
-
"type": {
|
|
6554
|
-
"name": "boolean"
|
|
6555
|
-
},
|
|
6556
|
-
"description": "Marks the control required for both the browser and assistive technology.",
|
|
6557
|
-
"defaultValue": null,
|
|
6558
|
-
"parent": {
|
|
6559
|
-
"name": "InputHTMLAttributes",
|
|
6560
|
-
"fileName": "node_modules/@types/react/index.d.ts"
|
|
6561
|
-
},
|
|
6562
|
-
"declarations": [
|
|
6563
|
-
{
|
|
6564
|
-
"name": "InputHTMLAttributes",
|
|
6565
|
-
"fileName": "node_modules/@types/react/index.d.ts"
|
|
6566
|
-
},
|
|
6567
|
-
{
|
|
6568
|
-
"name": "TypeLiteral",
|
|
6569
|
-
"fileName": "src/input/input.tsx"
|
|
6570
|
-
}
|
|
6571
|
-
]
|
|
6572
|
-
},
|
|
6573
|
-
"readOnly": {
|
|
6574
|
-
"name": "readOnly",
|
|
6575
|
-
"required": false,
|
|
6576
|
-
"type": {
|
|
6577
|
-
"name": "boolean"
|
|
6578
|
-
},
|
|
6579
|
-
"description": "Keeps the value focusable and copyable but not editable, and still\nsubmits it. Unlike `disabled`, it stays in the tab order.",
|
|
6580
|
-
"defaultValue": null,
|
|
6581
|
-
"parent": {
|
|
6582
|
-
"name": "InputHTMLAttributes",
|
|
6583
|
-
"fileName": "node_modules/@types/react/index.d.ts"
|
|
6584
|
-
},
|
|
6585
|
-
"declarations": [
|
|
6586
|
-
{
|
|
6587
|
-
"name": "InputHTMLAttributes",
|
|
6588
|
-
"fileName": "node_modules/@types/react/index.d.ts"
|
|
6589
|
-
},
|
|
6590
|
-
{
|
|
6591
|
-
"name": "TypeLiteral",
|
|
6592
|
-
"fileName": "src/input/input.tsx"
|
|
6593
|
-
}
|
|
6594
|
-
]
|
|
6595
|
-
},
|
|
6596
|
-
"placeholder": {
|
|
6597
|
-
"name": "placeholder",
|
|
6598
|
-
"required": false,
|
|
6599
|
-
"type": {
|
|
6600
|
-
"name": "string"
|
|
6601
|
-
},
|
|
6602
|
-
"description": "Short hint shown while the field is empty. It disappears on the first\nkeystroke, so it is never a substitute for a label.",
|
|
6603
|
-
"defaultValue": null,
|
|
6604
|
-
"parent": {
|
|
6605
|
-
"name": "InputHTMLAttributes",
|
|
6606
|
-
"fileName": "node_modules/@types/react/index.d.ts"
|
|
6607
|
-
},
|
|
6608
|
-
"declarations": [
|
|
6609
|
-
{
|
|
6610
|
-
"name": "InputHTMLAttributes",
|
|
6611
|
-
"fileName": "node_modules/@types/react/index.d.ts"
|
|
6612
|
-
},
|
|
6613
|
-
{
|
|
6614
|
-
"name": "TypeLiteral",
|
|
6615
|
-
"fileName": "src/input/input.tsx"
|
|
6616
|
-
}
|
|
6617
|
-
]
|
|
6618
|
-
},
|
|
6619
6481
|
"size": {
|
|
6620
6482
|
"name": "size",
|
|
6621
6483
|
"required": false,
|
|
@@ -8671,7 +8533,7 @@
|
|
|
8671
8533
|
"displayName": "TextArea",
|
|
8672
8534
|
"exportName": "TextArea",
|
|
8673
8535
|
"filePath": "/home/runner/work/design-system/design-system/src/textarea/textarea.tsx",
|
|
8674
|
-
"description": "TextArea is the design system's multi-line text control: Input's skin, states\nand sizes on a single `<textarea>` with nothing around it, so the native\nresize handle and scrollbar keep working. Pair it with\n[Label](?path=/docs/components-label--docs) the way you pair an Input.\n\nIt wires nothing itself — `id`, `aria-describedby` and `aria-invalid` are the\nfield owner's job, and
|
|
8536
|
+
"description": "TextArea is the design system's multi-line text control: Input's skin, states\nand sizes on a single `<textarea>` with nothing around it, so the native\nresize handle and scrollbar keep working. Pair it with\n[Label](?path=/docs/components-label--docs) the way you pair an Input.\n\nIt wires nothing itself — `id`, `aria-describedby` and `aria-invalid` are the\nfield owner's job. The invalid state has no prop of its own: `aria-invalid`\ndrives the destructive border, the same as Input. Every `<textarea>` attribute\nis accepted and forwarded, so `placeholder`, `required`, `disabled`,\n`readOnly`, `maxLength` and the rest work as in plain HTML; `rows` raises the\nresting height when three rows are not enough. It holds no value either, so a\ncharacter counter belongs to whoever owns it.",
|
|
8675
8537
|
"jsDocTags": {
|
|
8676
8538
|
"summary": [
|
|
8677
8539
|
"Base multi-line text control sharing Input's skin, states and sizes"
|
|
@@ -8681,167 +8543,6 @@
|
|
|
8681
8543
|
]
|
|
8682
8544
|
},
|
|
8683
8545
|
"props": {
|
|
8684
|
-
"disabled": {
|
|
8685
|
-
"name": "disabled",
|
|
8686
|
-
"required": false,
|
|
8687
|
-
"type": {
|
|
8688
|
-
"name": "boolean"
|
|
8689
|
-
},
|
|
8690
|
-
"description": "Blocks interaction and drops the value from the submission. Use `readOnly`\nwhen the user still needs to read or copy it.",
|
|
8691
|
-
"defaultValue": null,
|
|
8692
|
-
"parent": {
|
|
8693
|
-
"name": "TextareaHTMLAttributes",
|
|
8694
|
-
"fileName": "node_modules/@types/react/index.d.ts"
|
|
8695
|
-
},
|
|
8696
|
-
"declarations": [
|
|
8697
|
-
{
|
|
8698
|
-
"name": "TextareaHTMLAttributes",
|
|
8699
|
-
"fileName": "node_modules/@types/react/index.d.ts"
|
|
8700
|
-
},
|
|
8701
|
-
{
|
|
8702
|
-
"name": "TypeLiteral",
|
|
8703
|
-
"fileName": "src/textarea/textarea.tsx"
|
|
8704
|
-
}
|
|
8705
|
-
]
|
|
8706
|
-
},
|
|
8707
|
-
"maxLength": {
|
|
8708
|
-
"name": "maxLength",
|
|
8709
|
-
"required": false,
|
|
8710
|
-
"type": {
|
|
8711
|
-
"name": "number"
|
|
8712
|
-
},
|
|
8713
|
-
"description": "Caps the value in UTF-16 code units: typing stops there and a paste is cut.",
|
|
8714
|
-
"defaultValue": null,
|
|
8715
|
-
"parent": {
|
|
8716
|
-
"name": "TextareaHTMLAttributes",
|
|
8717
|
-
"fileName": "node_modules/@types/react/index.d.ts"
|
|
8718
|
-
},
|
|
8719
|
-
"declarations": [
|
|
8720
|
-
{
|
|
8721
|
-
"name": "TextareaHTMLAttributes",
|
|
8722
|
-
"fileName": "node_modules/@types/react/index.d.ts"
|
|
8723
|
-
},
|
|
8724
|
-
{
|
|
8725
|
-
"name": "TypeLiteral",
|
|
8726
|
-
"fileName": "src/textarea/textarea.tsx"
|
|
8727
|
-
}
|
|
8728
|
-
]
|
|
8729
|
-
},
|
|
8730
|
-
"placeholder": {
|
|
8731
|
-
"name": "placeholder",
|
|
8732
|
-
"required": false,
|
|
8733
|
-
"type": {
|
|
8734
|
-
"name": "string"
|
|
8735
|
-
},
|
|
8736
|
-
"description": "Hint shown while empty; never a substitute for a label.",
|
|
8737
|
-
"defaultValue": null,
|
|
8738
|
-
"parent": {
|
|
8739
|
-
"name": "TextareaHTMLAttributes",
|
|
8740
|
-
"fileName": "node_modules/@types/react/index.d.ts"
|
|
8741
|
-
},
|
|
8742
|
-
"declarations": [
|
|
8743
|
-
{
|
|
8744
|
-
"name": "TextareaHTMLAttributes",
|
|
8745
|
-
"fileName": "node_modules/@types/react/index.d.ts"
|
|
8746
|
-
},
|
|
8747
|
-
{
|
|
8748
|
-
"name": "TypeLiteral",
|
|
8749
|
-
"fileName": "src/textarea/textarea.tsx"
|
|
8750
|
-
}
|
|
8751
|
-
]
|
|
8752
|
-
},
|
|
8753
|
-
"readOnly": {
|
|
8754
|
-
"name": "readOnly",
|
|
8755
|
-
"required": false,
|
|
8756
|
-
"type": {
|
|
8757
|
-
"name": "boolean"
|
|
8758
|
-
},
|
|
8759
|
-
"description": "Focusable, copyable and submitted, but not editable.",
|
|
8760
|
-
"defaultValue": null,
|
|
8761
|
-
"parent": {
|
|
8762
|
-
"name": "TextareaHTMLAttributes",
|
|
8763
|
-
"fileName": "node_modules/@types/react/index.d.ts"
|
|
8764
|
-
},
|
|
8765
|
-
"declarations": [
|
|
8766
|
-
{
|
|
8767
|
-
"name": "TextareaHTMLAttributes",
|
|
8768
|
-
"fileName": "node_modules/@types/react/index.d.ts"
|
|
8769
|
-
},
|
|
8770
|
-
{
|
|
8771
|
-
"name": "TypeLiteral",
|
|
8772
|
-
"fileName": "src/textarea/textarea.tsx"
|
|
8773
|
-
}
|
|
8774
|
-
]
|
|
8775
|
-
},
|
|
8776
|
-
"required": {
|
|
8777
|
-
"name": "required",
|
|
8778
|
-
"required": false,
|
|
8779
|
-
"type": {
|
|
8780
|
-
"name": "boolean"
|
|
8781
|
-
},
|
|
8782
|
-
"description": "Marks the control required for both the browser and assistive technology.",
|
|
8783
|
-
"defaultValue": null,
|
|
8784
|
-
"parent": {
|
|
8785
|
-
"name": "TextareaHTMLAttributes",
|
|
8786
|
-
"fileName": "node_modules/@types/react/index.d.ts"
|
|
8787
|
-
},
|
|
8788
|
-
"declarations": [
|
|
8789
|
-
{
|
|
8790
|
-
"name": "TextareaHTMLAttributes",
|
|
8791
|
-
"fileName": "node_modules/@types/react/index.d.ts"
|
|
8792
|
-
},
|
|
8793
|
-
{
|
|
8794
|
-
"name": "TypeLiteral",
|
|
8795
|
-
"fileName": "src/textarea/textarea.tsx"
|
|
8796
|
-
}
|
|
8797
|
-
]
|
|
8798
|
-
},
|
|
8799
|
-
"rows": {
|
|
8800
|
-
"name": "rows",
|
|
8801
|
-
"required": false,
|
|
8802
|
-
"type": {
|
|
8803
|
-
"name": "number"
|
|
8804
|
-
},
|
|
8805
|
-
"description": "Rows visible at rest when three are not enough.",
|
|
8806
|
-
"defaultValue": null,
|
|
8807
|
-
"parent": {
|
|
8808
|
-
"name": "TextareaHTMLAttributes",
|
|
8809
|
-
"fileName": "node_modules/@types/react/index.d.ts"
|
|
8810
|
-
},
|
|
8811
|
-
"declarations": [
|
|
8812
|
-
{
|
|
8813
|
-
"name": "TextareaHTMLAttributes",
|
|
8814
|
-
"fileName": "node_modules/@types/react/index.d.ts"
|
|
8815
|
-
},
|
|
8816
|
-
{
|
|
8817
|
-
"name": "TypeLiteral",
|
|
8818
|
-
"fileName": "src/textarea/textarea.tsx"
|
|
8819
|
-
}
|
|
8820
|
-
]
|
|
8821
|
-
},
|
|
8822
|
-
"aria-invalid": {
|
|
8823
|
-
"name": "aria-invalid",
|
|
8824
|
-
"required": false,
|
|
8825
|
-
"type": {
|
|
8826
|
-
"name": "boolean | \"true\" | \"false\" | \"grammar\" | \"spelling\" | undefined"
|
|
8827
|
-
},
|
|
8828
|
-
"description": "Indicates the entered value does not conform to the format expected by the application.\nDrives the destructive border and is what assistive technology announces.",
|
|
8829
|
-
"defaultValue": null,
|
|
8830
|
-
"parent": {
|
|
8831
|
-
"name": "AriaAttributes",
|
|
8832
|
-
"fileName": "node_modules/@types/react/index.d.ts"
|
|
8833
|
-
},
|
|
8834
|
-
"declarations": [
|
|
8835
|
-
{
|
|
8836
|
-
"name": "AriaAttributes",
|
|
8837
|
-
"fileName": "node_modules/@types/react/index.d.ts"
|
|
8838
|
-
},
|
|
8839
|
-
{
|
|
8840
|
-
"name": "TypeLiteral",
|
|
8841
|
-
"fileName": "src/textarea/textarea.tsx"
|
|
8842
|
-
}
|
|
8843
|
-
]
|
|
8844
|
-
},
|
|
8845
8546
|
"size": {
|
|
8846
8547
|
"name": "size",
|
|
8847
8548
|
"required": false,
|
|
@@ -9706,6 +9407,6 @@
|
|
|
9706
9407
|
},
|
|
9707
9408
|
"meta": {
|
|
9708
9409
|
"docgen": "react-component-meta",
|
|
9709
|
-
"durationMs":
|
|
9410
|
+
"durationMs": 4426
|
|
9710
9411
|
}
|
|
9711
9412
|
}
|
package/package.json
CHANGED
package/src/input/input.d.ts
CHANGED
|
@@ -29,12 +29,6 @@ export declare const inputRecipe: import('tailwind-variants').TVReturnType<{
|
|
|
29
29
|
export type InputVariants = VariantProps<typeof inputRecipe>;
|
|
30
30
|
/** Control height. See the `size` prop for when to reach for each one. */
|
|
31
31
|
export type InputSize = NonNullable<InputVariants['size']>;
|
|
32
|
-
/**
|
|
33
|
-
* Every standard `<input>` attribute is accepted and forwarded. The handful
|
|
34
|
-
* redeclared below are the ones worth documenting: they are what most callers
|
|
35
|
-
* reach for, and `react-docgen` does not expand native attributes, so without
|
|
36
|
-
* this they would be invisible in the docs and the MCP manifest.
|
|
37
|
-
*/
|
|
38
32
|
export type InputProps = Omit<ComponentPropsWithRef<'input'>, 'size'> & {
|
|
39
33
|
/**
|
|
40
34
|
* Control height. Defaults to `'md'`.
|
|
@@ -44,37 +38,6 @@ export type InputProps = Omit<ComponentPropsWithRef<'input'>, 'size'> & {
|
|
|
44
38
|
* the text to `base` and the corner radius to `lg`.
|
|
45
39
|
*/
|
|
46
40
|
size?: InputSize;
|
|
47
|
-
/**
|
|
48
|
-
* Native input type. Picks the on-screen keyboard on touch devices and the
|
|
49
|
-
* browser's own parsing, so set it even when you validate yourself.
|
|
50
|
-
* Defaults to `'text'`. Multi-line text is not one of the options — that is
|
|
51
|
-
* a TextArea.
|
|
52
|
-
*/
|
|
53
|
-
type?: ComponentPropsWithRef<'input'>['type'];
|
|
54
|
-
/**
|
|
55
|
-
* Short hint shown while the field is empty. It disappears on the first
|
|
56
|
-
* keystroke, so it is never a substitute for a label.
|
|
57
|
-
*/
|
|
58
|
-
placeholder?: string;
|
|
59
|
-
/**
|
|
60
|
-
* Blocks interaction, greys the control out and drops its shadow. The value
|
|
61
|
-
* is not submitted. When the user still needs to read or copy the value,
|
|
62
|
-
* use `readOnly` instead.
|
|
63
|
-
*/
|
|
64
|
-
disabled?: boolean;
|
|
65
|
-
/**
|
|
66
|
-
* Keeps the value focusable and copyable but not editable, and still
|
|
67
|
-
* submits it. Unlike `disabled`, it stays in the tab order.
|
|
68
|
-
*/
|
|
69
|
-
readOnly?: boolean;
|
|
70
|
-
/** Marks the control required for both the browser and assistive technology. */
|
|
71
|
-
required?: boolean;
|
|
72
|
-
/**
|
|
73
|
-
* Set this when the value fails validation: it drives the destructive border
|
|
74
|
-
* and is what assistive technology announces. Point `aria-describedby` at
|
|
75
|
-
* the error message so the two are read together.
|
|
76
|
-
*/
|
|
77
|
-
'aria-invalid'?: ComponentPropsWithRef<'input'>['aria-invalid'];
|
|
78
41
|
};
|
|
79
42
|
/**
|
|
80
43
|
* Input is the design system's base single-line text control. Reach for it
|
|
@@ -86,8 +49,12 @@ export type InputProps = Omit<ComponentPropsWithRef<'input'>, 'size'> & {
|
|
|
86
49
|
* `aria-describedby`, `aria-invalid`, `required`, `disabled`, `readOnly`) from
|
|
87
50
|
* it with nothing passed by hand; `FieldText` is one such container. Standalone it
|
|
88
51
|
* renders exactly the props it is given, and its own props always win over the
|
|
89
|
-
* context.
|
|
90
|
-
*
|
|
52
|
+
* context. Every standard `<input>` attribute is accepted and forwarded, so
|
|
53
|
+
* `type`, `placeholder`, `required`, `disabled`, `readOnly` and the rest work
|
|
54
|
+
* as in plain HTML. The invalid state has no prop of its own: `aria-invalid`
|
|
55
|
+
* drives the destructive border, so the styling can never disagree with what
|
|
56
|
+
* assistive technology announces. Point `aria-describedby` at the error message
|
|
57
|
+
* so the two are read together.
|
|
91
58
|
*
|
|
92
59
|
* Do not use Input for multi-line text; that is TextArea's job. It also has no
|
|
93
60
|
* slots for leading or trailing addons — an input with a currency prefix or a
|
|
@@ -40,7 +40,6 @@ export declare const textAreaRecipe: import('tailwind-variants').TVReturnType<{
|
|
|
40
40
|
export type TextAreaVariants = VariantProps<typeof textAreaRecipe>;
|
|
41
41
|
/** Control size, the same three as Input. */
|
|
42
42
|
export type TextAreaSize = NonNullable<TextAreaVariants['size']>;
|
|
43
|
-
/** Every `<textarea>` attribute is forwarded; these are redeclared so the docs and the MCP manifest list them. */
|
|
44
43
|
export type TextAreaProps = ComponentPropsWithRef<'textarea'> & {
|
|
45
44
|
/**
|
|
46
45
|
* Defaults to `'md'`. The first row measures one Input of the same size and
|
|
@@ -48,23 +47,6 @@ export type TextAreaProps = ComponentPropsWithRef<'textarea'> & {
|
|
|
48
47
|
* the text to `base` and the radius to `lg`).
|
|
49
48
|
*/
|
|
50
49
|
size?: TextAreaSize;
|
|
51
|
-
/** Rows visible at rest when three are not enough. */
|
|
52
|
-
rows?: number;
|
|
53
|
-
/** Hint shown while empty; never a substitute for a label. */
|
|
54
|
-
placeholder?: string;
|
|
55
|
-
/** Caps the value in UTF-16 code units: typing stops there and a paste is cut. */
|
|
56
|
-
maxLength?: number;
|
|
57
|
-
/**
|
|
58
|
-
* Blocks interaction and drops the value from the submission. Use `readOnly`
|
|
59
|
-
* when the user still needs to read or copy it.
|
|
60
|
-
*/
|
|
61
|
-
disabled?: boolean;
|
|
62
|
-
/** Focusable, copyable and submitted, but not editable. */
|
|
63
|
-
readOnly?: boolean;
|
|
64
|
-
/** Marks the control required for both the browser and assistive technology. */
|
|
65
|
-
required?: boolean;
|
|
66
|
-
/** Drives the destructive border and is what assistive technology announces. */
|
|
67
|
-
'aria-invalid'?: ComponentPropsWithRef<'textarea'>['aria-invalid'];
|
|
68
50
|
};
|
|
69
51
|
/**
|
|
70
52
|
* TextArea is the design system's multi-line text control: Input's skin, states
|
|
@@ -73,8 +55,12 @@ export type TextAreaProps = ComponentPropsWithRef<'textarea'> & {
|
|
|
73
55
|
* [Label](?path=/docs/components-label--docs) the way you pair an Input.
|
|
74
56
|
*
|
|
75
57
|
* It wires nothing itself — `id`, `aria-describedby` and `aria-invalid` are the
|
|
76
|
-
* field owner's job
|
|
77
|
-
*
|
|
58
|
+
* field owner's job. The invalid state has no prop of its own: `aria-invalid`
|
|
59
|
+
* drives the destructive border, the same as Input. Every `<textarea>` attribute
|
|
60
|
+
* is accepted and forwarded, so `placeholder`, `required`, `disabled`,
|
|
61
|
+
* `readOnly`, `maxLength` and the rest work as in plain HTML; `rows` raises the
|
|
62
|
+
* resting height when three rows are not enough. It holds no value either, so a
|
|
63
|
+
* character counter belongs to whoever owns it.
|
|
78
64
|
*
|
|
79
65
|
* @summary Base multi-line text control sharing Input's skin, states and sizes
|
|
80
66
|
*
|