@fungi.computer/caps 0.0.0-stage → 0.0.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/LICENSE +21 -0
- package/README.md +1125 -2
- package/dist/blocks/app-bar.d.ts +43 -0
- package/dist/blocks/app-bar.js +244 -0
- package/dist/blocks/app-status-bar.d.ts +93 -0
- package/dist/blocks/app-status-bar.js +42 -0
- package/dist/blocks/async-state.d.ts +21 -0
- package/dist/blocks/async-state.js +8 -0
- package/dist/blocks/card-grid.d.ts +11 -0
- package/dist/blocks/card-grid.js +21 -0
- package/dist/blocks/command-menu.d.ts +26 -0
- package/dist/blocks/command-menu.js +70 -0
- package/dist/blocks/composer.d.ts +23 -0
- package/dist/blocks/composer.js +13 -0
- package/dist/blocks/empty-state.d.ts +59 -0
- package/dist/blocks/empty-state.js +35 -0
- package/dist/blocks/faq-chat.d.ts +62 -0
- package/dist/blocks/faq-chat.js +77 -0
- package/dist/blocks/game-share-card.d.ts +17 -0
- package/dist/blocks/game-share-card.js +9 -0
- package/dist/blocks/launcher-grid.d.ts +50 -0
- package/dist/blocks/launcher-grid.js +11 -0
- package/dist/blocks/listing-detail.d.ts +23 -0
- package/dist/blocks/listing-detail.js +12 -0
- package/dist/blocks/loading-state.d.ts +5 -0
- package/dist/blocks/loading-state.js +8 -0
- package/dist/blocks/mosaic.d.ts +29 -0
- package/dist/blocks/mosaic.js +19 -0
- package/dist/blocks/permission-grid.d.ts +45 -0
- package/dist/blocks/permission-grid.js +14 -0
- package/dist/blocks/pricing-card.d.ts +53 -0
- package/dist/blocks/pricing-card.js +12 -0
- package/dist/blocks/release-tag.d.ts +20 -0
- package/dist/blocks/release-tag.js +10 -0
- package/dist/blocks/resource-select.d.ts +22 -0
- package/dist/blocks/resource-select.js +16 -0
- package/dist/blocks/result-state.d.ts +15 -0
- package/dist/blocks/result-state.js +8 -0
- package/dist/blocks/section-card.d.ts +31 -0
- package/dist/blocks/section-card.js +7 -0
- package/dist/blocks/section-heading.d.ts +13 -0
- package/dist/blocks/section-heading.js +11 -0
- package/dist/blocks/spec-sheet.d.ts +125 -0
- package/dist/blocks/spec-sheet.js +47 -0
- package/dist/blocks/status-tray.d.ts +83 -0
- package/dist/blocks/status-tray.js +79 -0
- package/dist/blocks/upload-queue.d.ts +48 -0
- package/dist/blocks/upload-queue.js +24 -0
- package/dist/components/action-row.d.ts +16 -0
- package/dist/components/action-row.js +11 -0
- package/dist/components/activity-line.d.ts +33 -0
- package/dist/components/activity-line.js +69 -0
- package/dist/components/alert.d.ts +17 -0
- package/dist/components/alert.js +17 -0
- package/dist/components/badge.d.ts +19 -0
- package/dist/components/badge.js +24 -0
- package/dist/components/button.d.ts +55 -0
- package/dist/components/button.js +230 -0
- package/dist/components/card.d.ts +61 -0
- package/dist/components/card.js +48 -0
- package/dist/components/chat-bubble.d.ts +34 -0
- package/dist/components/chat-bubble.js +10 -0
- package/dist/components/checkbox-bead.d.ts +6 -0
- package/dist/components/checkbox-bead.js +67 -0
- package/dist/components/checkbox.d.ts +21 -0
- package/dist/components/checkbox.js +46 -0
- package/dist/components/code-input.d.ts +35 -0
- package/dist/components/code-input.js +126 -0
- package/dist/components/combobox.d.ts +86 -0
- package/dist/components/combobox.js +218 -0
- package/dist/components/confirm-action.d.ts +23 -0
- package/dist/components/confirm-action.js +64 -0
- package/dist/components/copy-field.d.ts +53 -0
- package/dist/components/copy-field.js +49 -0
- package/dist/components/count-badge.d.ts +15 -0
- package/dist/components/count-badge.js +9 -0
- package/dist/components/cover-pattern.d.ts +19 -0
- package/dist/components/cover-pattern.js +74 -0
- package/dist/components/data-list.d.ts +25 -0
- package/dist/components/data-list.js +16 -0
- package/dist/components/dialog.d.ts +39 -0
- package/dist/components/dialog.js +73 -0
- package/dist/components/diff-view.d.ts +14 -0
- package/dist/components/diff-view.js +13 -0
- package/dist/components/disclosure.d.ts +29 -0
- package/dist/components/disclosure.js +19 -0
- package/dist/components/dropdown-menu.d.ts +49 -0
- package/dist/components/dropdown-menu.js +98 -0
- package/dist/components/field-guide.d.ts +41 -0
- package/dist/components/field-guide.js +18 -0
- package/dist/components/field.d.ts +164 -0
- package/dist/components/field.js +228 -0
- package/dist/components/game-feedback.d.ts +84 -0
- package/dist/components/game-feedback.js +48 -0
- package/dist/components/game-hud.d.ts +126 -0
- package/dist/components/game-hud.js +136 -0
- package/dist/components/generation-frame.d.ts +36 -0
- package/dist/components/generation-frame.js +97 -0
- package/dist/components/gooey.d.ts +32 -0
- package/dist/components/gooey.js +25 -0
- package/dist/components/hold-button.d.ts +26 -0
- package/dist/components/hold-button.js +115 -0
- package/dist/components/icon-button.d.ts +24 -0
- package/dist/components/icon-button.js +18 -0
- package/dist/components/icon-checkbox.d.ts +20 -0
- package/dist/components/icon-checkbox.js +9 -0
- package/dist/components/icon-choice-mark.d.ts +6 -0
- package/dist/components/icon-choice-mark.js +5 -0
- package/dist/components/icon-lamp.d.ts +42 -0
- package/dist/components/icon-lamp.js +15 -0
- package/dist/components/icon-radio.d.ts +16 -0
- package/dist/components/icon-radio.js +9 -0
- package/dist/components/inline-code.d.ts +3 -0
- package/dist/components/inline-code.js +7 -0
- package/dist/components/input-group.d.ts +9 -0
- package/dist/components/input-group.js +15 -0
- package/dist/components/input.d.ts +15 -0
- package/dist/components/input.js +15 -0
- package/dist/components/item-grid.d.ts +110 -0
- package/dist/components/item-grid.js +136 -0
- package/dist/components/keycap.d.ts +80 -0
- package/dist/components/keycap.js +18 -0
- package/dist/components/label.d.ts +13 -0
- package/dist/components/label.js +7 -0
- package/dist/components/listbox.d.ts +50 -0
- package/dist/components/listbox.js +134 -0
- package/dist/components/loader-blobs.d.ts +5 -0
- package/dist/components/loader-blobs.js +128 -0
- package/dist/components/loader.d.ts +21 -0
- package/dist/components/loader.js +25 -0
- package/dist/components/markdown.d.ts +23 -0
- package/dist/components/markdown.js +70 -0
- package/dist/components/minimap-labels.d.ts +39 -0
- package/dist/components/minimap-labels.js +113 -0
- package/dist/components/monogram.d.ts +32 -0
- package/dist/components/monogram.js +24 -0
- package/dist/components/motion-visibility.d.ts +2 -0
- package/dist/components/motion-visibility.js +25 -0
- package/dist/components/navigation-rail.d.ts +11 -0
- package/dist/components/navigation-rail.js +55 -0
- package/dist/components/overlay-root.d.ts +16 -0
- package/dist/components/overlay-root.js +24 -0
- package/dist/components/pixel-number.d.ts +50 -0
- package/dist/components/pixel-number.js +113 -0
- package/dist/components/popover.d.ts +31 -0
- package/dist/components/popover.js +24 -0
- package/dist/components/presence.d.ts +59 -0
- package/dist/components/presence.js +232 -0
- package/dist/components/price-tag.d.ts +11 -0
- package/dist/components/price-tag.js +6 -0
- package/dist/components/progress.d.ts +25 -0
- package/dist/components/progress.js +24 -0
- package/dist/components/prose.d.ts +14 -0
- package/dist/components/prose.js +10 -0
- package/dist/components/quota-meter.d.ts +24 -0
- package/dist/components/quota-meter.js +11 -0
- package/dist/components/radio-bead.d.ts +4 -0
- package/dist/components/radio-bead.js +53 -0
- package/dist/components/radio-group.d.ts +54 -0
- package/dist/components/radio-group.js +64 -0
- package/dist/components/resize-handle.d.ts +23 -0
- package/dist/components/resize-handle.js +31 -0
- package/dist/components/rough-drawing.d.ts +42 -0
- package/dist/components/rough-drawing.js +231 -0
- package/dist/components/rough.d.ts +68 -0
- package/dist/components/rough.js +33 -0
- package/dist/components/scroll-area.d.ts +12 -0
- package/dist/components/scroll-area.js +96 -0
- package/dist/components/scroll-motion.d.ts +12 -0
- package/dist/components/scroll-motion.js +31 -0
- package/dist/components/scroll-to-bottom-blob-state.d.ts +40 -0
- package/dist/components/scroll-to-bottom-blob-state.js +109 -0
- package/dist/components/scroll-to-bottom-blob.d.ts +16 -0
- package/dist/components/scroll-to-bottom-blob.js +174 -0
- package/dist/components/select.d.ts +9 -0
- package/dist/components/select.js +12 -0
- package/dist/components/selectable.d.ts +13 -0
- package/dist/components/selectable.js +45 -0
- package/dist/components/send-action.d.ts +33 -0
- package/dist/components/send-action.js +96 -0
- package/dist/components/separator.d.ts +11 -0
- package/dist/components/separator.js +7 -0
- package/dist/components/skeleton.d.ts +5 -0
- package/dist/components/skeleton.js +7 -0
- package/dist/components/slider.d.ts +18 -0
- package/dist/components/slider.js +31 -0
- package/dist/components/stat.d.ts +17 -0
- package/dist/components/stat.js +7 -0
- package/dist/components/status-bead.d.ts +9 -0
- package/dist/components/status-bead.js +107 -0
- package/dist/components/status-mark.d.ts +12 -0
- package/dist/components/status-mark.js +177 -0
- package/dist/components/status.d.ts +38 -0
- package/dist/components/status.js +28 -0
- package/dist/components/store-card.d.ts +21 -0
- package/dist/components/store-card.js +10 -0
- package/dist/components/surface.d.ts +89 -0
- package/dist/components/surface.js +31 -0
- package/dist/components/switch-bead.d.ts +4 -0
- package/dist/components/switch-bead.js +62 -0
- package/dist/components/switch.d.ts +11 -0
- package/dist/components/switch.js +36 -0
- package/dist/components/tabs.d.ts +55 -0
- package/dist/components/tabs.js +81 -0
- package/dist/components/technonomicon.d.ts +192 -0
- package/dist/components/technonomicon.js +121 -0
- package/dist/components/textarea.d.ts +9 -0
- package/dist/components/textarea.js +11 -0
- package/dist/components/toaster.d.ts +4 -0
- package/dist/components/toaster.js +13 -0
- package/dist/components/tool-call-chip.d.ts +22 -0
- package/dist/components/tool-call-chip.js +100 -0
- package/dist/components/tooltip.d.ts +41 -0
- package/dist/components/tooltip.js +169 -0
- package/dist/components/trading-card.d.ts +60 -0
- package/dist/components/trading-card.js +13 -0
- package/dist/components/undo-action.d.ts +52 -0
- package/dist/components/undo-action.js +100 -0
- package/dist/components/undo-toast.d.ts +21 -0
- package/dist/components/undo-toast.js +58 -0
- package/dist/components/visually-hidden.d.ts +9 -0
- package/dist/components/visually-hidden.js +11 -0
- package/dist/components/window.d.ts +65 -0
- package/dist/components/window.js +31 -0
- package/dist/components/wizard.d.ts +17 -0
- package/dist/components/wizard.js +19 -0
- package/dist/enhance/cigarette-card.d.ts +8 -0
- package/dist/enhance/cigarette-card.js +33 -0
- package/dist/enhance/sketch.d.ts +16 -0
- package/dist/enhance/sketch.js +130 -0
- package/dist/form-error.d.ts +7 -0
- package/dist/form-error.js +14 -0
- package/dist/form-fields.d.ts +15 -0
- package/dist/form-fields.js +250 -0
- package/dist/form-schema.d.ts +166 -0
- package/dist/form-schema.js +398 -0
- package/dist/form.d.ts +30 -0
- package/dist/form.js +20 -0
- package/dist/lib/cn.d.ts +8 -0
- package/dist/lib/cn.js +12 -0
- package/dist/lib/format-money.d.ts +2 -0
- package/dist/lib/format-money.js +22 -0
- package/dist/lib/glide.d.ts +12 -0
- package/dist/lib/glide.js +143 -0
- package/dist/lib/ime.d.ts +3 -0
- package/dist/lib/ime.js +8 -0
- package/dist/lib/motion-spring.d.ts +27 -0
- package/dist/lib/motion-spring.js +36 -0
- package/dist/lib/motion.d.ts +51 -0
- package/dist/lib/motion.js +161 -0
- package/dist/lib/reorder-motion.d.ts +13 -0
- package/dist/lib/reorder-motion.js +201 -0
- package/dist/lib/seed-hash.d.ts +6 -0
- package/dist/lib/seed-hash.js +13 -0
- package/dist/lib/tanstack-highlight.d.ts +4 -0
- package/dist/lib/tanstack-highlight.js +41 -0
- package/dist/schema-form.d.ts +120 -0
- package/dist/schema-form.js +129 -0
- package/dist/styles.css +18814 -0
- package/docs/api/README.md +134 -0
- package/docs/api/blocks/app-bar.md +227 -0
- package/docs/api/blocks/app-status-bar.md +257 -0
- package/docs/api/blocks/async-state.md +53 -0
- package/docs/api/blocks/card-grid.md +31 -0
- package/docs/api/blocks/command-menu.md +89 -0
- package/docs/api/blocks/composer.md +40 -0
- package/docs/api/blocks/empty-state.md +97 -0
- package/docs/api/blocks/faq-chat.md +147 -0
- package/docs/api/blocks/game-share-card.md +40 -0
- package/docs/api/blocks/launcher-grid.md +86 -0
- package/docs/api/blocks/listing-detail.md +51 -0
- package/docs/api/blocks/loading-state.md +21 -0
- package/docs/api/blocks/mosaic.md +94 -0
- package/docs/api/blocks/permission-grid.md +79 -0
- package/docs/api/blocks/pricing-card.md +90 -0
- package/docs/api/blocks/release-tag.md +62 -0
- package/docs/api/blocks/resource-select.md +126 -0
- package/docs/api/blocks/result-state.md +42 -0
- package/docs/api/blocks/section-card.md +42 -0
- package/docs/api/blocks/section-heading.md +61 -0
- package/docs/api/blocks/spec-sheet.md +400 -0
- package/docs/api/blocks/status-tray.md +141 -0
- package/docs/api/blocks/upload-queue.md +110 -0
- package/docs/api/components/action-row.md +51 -0
- package/docs/api/components/activity-line.md +103 -0
- package/docs/api/components/alert.md +60 -0
- package/docs/api/components/badge.md +77 -0
- package/docs/api/components/button.md +94 -0
- package/docs/api/components/card.md +165 -0
- package/docs/api/components/chat-bubble.md +66 -0
- package/docs/api/components/checkbox-bead.md +20 -0
- package/docs/api/components/checkbox.md +42 -0
- package/docs/api/components/code-input.md +61 -0
- package/docs/api/components/combobox.md +303 -0
- package/docs/api/components/confirm-action.md +58 -0
- package/docs/api/components/copy-field.md +106 -0
- package/docs/api/components/count-badge.md +39 -0
- package/docs/api/components/cover-pattern.md +43 -0
- package/docs/api/components/data-list.md +80 -0
- package/docs/api/components/dialog.md +235 -0
- package/docs/api/components/diff-view.md +59 -0
- package/docs/api/components/disclosure.md +71 -0
- package/docs/api/components/dropdown-menu.md +269 -0
- package/docs/api/components/field-guide.md +174 -0
- package/docs/api/components/field.md +252 -0
- package/docs/api/components/game-feedback.md +157 -0
- package/docs/api/components/game-hud.md +359 -0
- package/docs/api/components/generation-frame.md +59 -0
- package/docs/api/components/hold-button.md +44 -0
- package/docs/api/components/icon-button.md +56 -0
- package/docs/api/components/icon-checkbox.md +42 -0
- package/docs/api/components/icon-choice-mark.md +31 -0
- package/docs/api/components/icon-lamp.md +92 -0
- package/docs/api/components/icon-radio.md +42 -0
- package/docs/api/components/inline-code.md +21 -0
- package/docs/api/components/input-group.md +53 -0
- package/docs/api/components/input.md +54 -0
- package/docs/api/components/item-grid.md +262 -0
- package/docs/api/components/keycap.md +102 -0
- package/docs/api/components/label.md +40 -0
- package/docs/api/components/listbox.md +131 -0
- package/docs/api/components/loader-blobs.md +9 -0
- package/docs/api/components/loader.md +51 -0
- package/docs/api/components/markdown.md +91 -0
- package/docs/api/components/minimap-labels.md +84 -0
- package/docs/api/components/monogram.md +96 -0
- package/docs/api/components/motion-visibility.md +9 -0
- package/docs/api/components/navigation-rail.md +37 -0
- package/docs/api/components/overlay-root.md +92 -0
- package/docs/api/components/pixel-number.md +120 -0
- package/docs/api/components/popover.md +80 -0
- package/docs/api/components/presence.md +106 -0
- package/docs/api/components/price-tag.md +48 -0
- package/docs/api/components/progress.md +90 -0
- package/docs/api/components/prose.md +48 -0
- package/docs/api/components/quota-meter.md +47 -0
- package/docs/api/components/radio-bead.md +9 -0
- package/docs/api/components/radio-group.md +126 -0
- package/docs/api/components/resize-handle.md +46 -0
- package/docs/api/components/rough-drawing.md +122 -0
- package/docs/api/components/rough.md +66 -0
- package/docs/api/components/scroll-area.md +22 -0
- package/docs/api/components/scroll-motion.md +9 -0
- package/docs/api/components/scroll-to-bottom-blob-state.md +162 -0
- package/docs/api/components/scroll-to-bottom-blob.md +73 -0
- package/docs/api/components/select.md +39 -0
- package/docs/api/components/send-action.md +58 -0
- package/docs/api/components/separator.md +38 -0
- package/docs/api/components/skeleton.md +31 -0
- package/docs/api/components/slider.md +70 -0
- package/docs/api/components/stat.md +42 -0
- package/docs/api/components/status-bead.md +19 -0
- package/docs/api/components/status-mark.md +19 -0
- package/docs/api/components/status.md +105 -0
- package/docs/api/components/store-card.md +53 -0
- package/docs/api/components/surface.md +161 -0
- package/docs/api/components/switch-bead.md +9 -0
- package/docs/api/components/switch.md +40 -0
- package/docs/api/components/tabs.md +138 -0
- package/docs/api/components/technonomicon.md +773 -0
- package/docs/api/components/textarea.md +40 -0
- package/docs/api/components/toaster.md +29 -0
- package/docs/api/components/tool-call-chip.md +68 -0
- package/docs/api/components/tooltip.md +113 -0
- package/docs/api/components/trading-card.md +95 -0
- package/docs/api/components/undo-action.md +117 -0
- package/docs/api/components/undo-toast.md +49 -0
- package/docs/api/components/visually-hidden.md +37 -0
- package/docs/api/components/window.md +291 -0
- package/docs/api/components/wizard.md +65 -0
- package/docs/api/enhance/cigarette-card.md +52 -0
- package/docs/api/enhance/sketch.md +42 -0
- package/docs/api/form.md +1623 -0
- package/docs/api/lib/cn.md +46 -0
- package/docs/api/lib/format-money.md +30 -0
- package/docs/api/lib/glide.md +36 -0
- package/docs/api/lib/ime.md +29 -0
- package/docs/api/lib/motion-spring.md +91 -0
- package/docs/api/lib/motion.md +212 -0
- package/docs/api/lib/reorder-motion.md +46 -0
- package/docs/api/lib/seed-hash.md +31 -0
- package/docs/api/lib/tanstack-highlight.md +40 -0
- package/package.json +597 -3
- package/src/app-status-bar.css +158 -0
- package/src/fonts.css +1 -0
- package/src/status-tray.css +282 -0
- package/src/styles.css +10177 -0
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
<!-- Generated by Botanical API docs (TypeDoc + typedoc-plugin-markdown). Do not edit. -->
|
|
2
|
+
|
|
3
|
+
[**@fungi.computer/caps**](../README.md)
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
[@fungi.computer/caps](../README.md) / components/activity-line
|
|
8
|
+
|
|
9
|
+
# components/activity-line
|
|
10
|
+
|
|
11
|
+
## Type Aliases
|
|
12
|
+
|
|
13
|
+
### ActivityState
|
|
14
|
+
|
|
15
|
+
```ts
|
|
16
|
+
type ActivityState = "running" | "done" | "failed";
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
Where a piece of agent work stands.
|
|
20
|
+
|
|
21
|
+
---
|
|
22
|
+
|
|
23
|
+
### ActivityLineProps
|
|
24
|
+
|
|
25
|
+
```ts
|
|
26
|
+
type ActivityLineProps = Readonly<{
|
|
27
|
+
state: ActivityState;
|
|
28
|
+
startedAt: number;
|
|
29
|
+
finishedAt?: number;
|
|
30
|
+
label: string;
|
|
31
|
+
doneLabel: string;
|
|
32
|
+
failedLabel?: string;
|
|
33
|
+
children?: ReactNode;
|
|
34
|
+
className?: string;
|
|
35
|
+
}>;
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
Props accepted by ActivityLine.
|
|
39
|
+
|
|
40
|
+
## Functions
|
|
41
|
+
|
|
42
|
+
### formatElapsed()
|
|
43
|
+
|
|
44
|
+
```ts
|
|
45
|
+
function formatElapsed(milliseconds): string;
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
Short elapsed time: `0.4s`, `4.2s`, `42s`, `3m 05s`.
|
|
49
|
+
|
|
50
|
+
#### Parameters
|
|
51
|
+
|
|
52
|
+
| Parameter | Type |
|
|
53
|
+
| -------------- | -------- |
|
|
54
|
+
| `milliseconds` | `number` |
|
|
55
|
+
|
|
56
|
+
#### Returns
|
|
57
|
+
|
|
58
|
+
`string`
|
|
59
|
+
|
|
60
|
+
---
|
|
61
|
+
|
|
62
|
+
### useElapsed()
|
|
63
|
+
|
|
64
|
+
```ts
|
|
65
|
+
function useElapsed(startedAt, finishedAt, running): number;
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
A clock that ticks while `running` and holds still otherwise. Times are epoch
|
|
69
|
+
milliseconds (`Date.now()`), owned by the caller.
|
|
70
|
+
|
|
71
|
+
#### Parameters
|
|
72
|
+
|
|
73
|
+
| Parameter | Type |
|
|
74
|
+
| ------------ | ----------------------- |
|
|
75
|
+
| `startedAt` | `number` |
|
|
76
|
+
| `finishedAt` | `number` \| `undefined` |
|
|
77
|
+
| `running` | `boolean` |
|
|
78
|
+
|
|
79
|
+
#### Returns
|
|
80
|
+
|
|
81
|
+
`number`
|
|
82
|
+
|
|
83
|
+
---
|
|
84
|
+
|
|
85
|
+
### ActivityLine()
|
|
86
|
+
|
|
87
|
+
```ts
|
|
88
|
+
function ActivityLine(__namedParameters): Element;
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
One line of agent activity. While running it says what is happening with a live
|
|
92
|
+
clock and shows its trace; when done it settles into "Thought for 4.2s" and
|
|
93
|
+
folds the trace away, one click from reopening.
|
|
94
|
+
|
|
95
|
+
#### Parameters
|
|
96
|
+
|
|
97
|
+
| Parameter | Type |
|
|
98
|
+
| ------------------- | ----------------------------------------- |
|
|
99
|
+
| `__namedParameters` | [`ActivityLineProps`](#activitylineprops) |
|
|
100
|
+
|
|
101
|
+
#### Returns
|
|
102
|
+
|
|
103
|
+
`Element`
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
<!-- Generated by Botanical API docs (TypeDoc + typedoc-plugin-markdown). Do not edit. -->
|
|
2
|
+
|
|
3
|
+
[**@fungi.computer/caps**](../README.md)
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
[@fungi.computer/caps](../README.md) / components/alert
|
|
8
|
+
|
|
9
|
+
# components/alert
|
|
10
|
+
|
|
11
|
+
## Type Aliases
|
|
12
|
+
|
|
13
|
+
### AlertTone
|
|
14
|
+
|
|
15
|
+
```ts
|
|
16
|
+
type AlertTone =
|
|
17
|
+
| "neutral"
|
|
18
|
+
| "primary"
|
|
19
|
+
| "secondary"
|
|
20
|
+
| "accent"
|
|
21
|
+
| "success"
|
|
22
|
+
| "info"
|
|
23
|
+
| "warning"
|
|
24
|
+
| "error";
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
Supported AlertTone values.
|
|
28
|
+
|
|
29
|
+
---
|
|
30
|
+
|
|
31
|
+
### AlertProps
|
|
32
|
+
|
|
33
|
+
```ts
|
|
34
|
+
type AlertProps = object & Omit<HTMLAttributes<HTMLDivElement>, "title">;
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
Props accepted by Alert.
|
|
38
|
+
|
|
39
|
+
#### Type Declaration
|
|
40
|
+
|
|
41
|
+
| Name | Type |
|
|
42
|
+
| -------------- | ------------------------- |
|
|
43
|
+
| `action?` | `ReactNode` |
|
|
44
|
+
| `description?` | `ReactNode` |
|
|
45
|
+
| `title?` | `ReactNode` |
|
|
46
|
+
| `tone?` | [`AlertTone`](#alerttone) |
|
|
47
|
+
|
|
48
|
+
## Variables
|
|
49
|
+
|
|
50
|
+
### Alert
|
|
51
|
+
|
|
52
|
+
```ts
|
|
53
|
+
const Alert: ForwardRefExoticComponent<
|
|
54
|
+
object &
|
|
55
|
+
Omit<HTMLAttributes<HTMLDivElement>, "title"> &
|
|
56
|
+
RefAttributes<HTMLDivElement>
|
|
57
|
+
>;
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
A caller-labelled alert presentation.
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
<!-- Generated by Botanical API docs (TypeDoc + typedoc-plugin-markdown). Do not edit. -->
|
|
2
|
+
|
|
3
|
+
[**@fungi.computer/caps**](../README.md)
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
[@fungi.computer/caps](../README.md) / components/badge
|
|
8
|
+
|
|
9
|
+
# components/badge
|
|
10
|
+
|
|
11
|
+
## Type Aliases
|
|
12
|
+
|
|
13
|
+
### BadgeTone
|
|
14
|
+
|
|
15
|
+
```ts
|
|
16
|
+
type BadgeTone =
|
|
17
|
+
| "neutral"
|
|
18
|
+
| "primary"
|
|
19
|
+
| "secondary"
|
|
20
|
+
| "accent"
|
|
21
|
+
| "success"
|
|
22
|
+
| "info"
|
|
23
|
+
| "warning"
|
|
24
|
+
| "error";
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
Supported BadgeTone values.
|
|
28
|
+
|
|
29
|
+
---
|
|
30
|
+
|
|
31
|
+
### BadgeSize
|
|
32
|
+
|
|
33
|
+
```ts
|
|
34
|
+
type BadgeSize = "sm" | "default" | "lg";
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
Supported BadgeSize values.
|
|
38
|
+
|
|
39
|
+
---
|
|
40
|
+
|
|
41
|
+
### BadgeVariant
|
|
42
|
+
|
|
43
|
+
```ts
|
|
44
|
+
type BadgeVariant = "solid" | "quiet";
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
`quiet` is a soft tint with no outline, for labels that sit beside keys.
|
|
48
|
+
|
|
49
|
+
---
|
|
50
|
+
|
|
51
|
+
### BadgeProps
|
|
52
|
+
|
|
53
|
+
```ts
|
|
54
|
+
type BadgeProps = object & HTMLAttributes<HTMLSpanElement>;
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
Props accepted by Badge.
|
|
58
|
+
|
|
59
|
+
#### Type Declaration
|
|
60
|
+
|
|
61
|
+
| Name | Type |
|
|
62
|
+
| ---------- | ------------------------------- |
|
|
63
|
+
| `size?` | [`BadgeSize`](#badgesize) |
|
|
64
|
+
| `variant?` | [`BadgeVariant`](#badgevariant) |
|
|
65
|
+
| `tone?` | [`BadgeTone`](#badgetone) |
|
|
66
|
+
|
|
67
|
+
## Variables
|
|
68
|
+
|
|
69
|
+
### Badge
|
|
70
|
+
|
|
71
|
+
```ts
|
|
72
|
+
const Badge: ForwardRefExoticComponent<
|
|
73
|
+
object & HTMLAttributes<HTMLSpanElement> & RefAttributes<HTMLSpanElement>
|
|
74
|
+
>;
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
A compact status or category label.
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
<!-- Generated by Botanical API docs (TypeDoc + typedoc-plugin-markdown). Do not edit. -->
|
|
2
|
+
|
|
3
|
+
[**@fungi.computer/caps**](../README.md)
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
[@fungi.computer/caps](../README.md) / components/button
|
|
8
|
+
|
|
9
|
+
# components/button
|
|
10
|
+
|
|
11
|
+
## Type Aliases
|
|
12
|
+
|
|
13
|
+
### ButtonVariant
|
|
14
|
+
|
|
15
|
+
```ts
|
|
16
|
+
type ButtonVariant =
|
|
17
|
+
| "primary"
|
|
18
|
+
| "secondary"
|
|
19
|
+
| "accent"
|
|
20
|
+
| "destructive"
|
|
21
|
+
| "outline"
|
|
22
|
+
| "ghost"
|
|
23
|
+
| "ghost-destructive"
|
|
24
|
+
| "link";
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
Supported Button visual variants.
|
|
28
|
+
|
|
29
|
+
---
|
|
30
|
+
|
|
31
|
+
### ButtonSize
|
|
32
|
+
|
|
33
|
+
```ts
|
|
34
|
+
type ButtonSize = "xs" | "sm" | "default" | "lg" | "icon" | "menubar";
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
Supported ButtonSize values.
|
|
38
|
+
|
|
39
|
+
---
|
|
40
|
+
|
|
41
|
+
### ButtonResult
|
|
42
|
+
|
|
43
|
+
```ts
|
|
44
|
+
type ButtonResult = "done" | "failed";
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
The outcome of a Button's last action.
|
|
48
|
+
|
|
49
|
+
---
|
|
50
|
+
|
|
51
|
+
### ButtonProps
|
|
52
|
+
|
|
53
|
+
```ts
|
|
54
|
+
type ButtonProps = object & ButtonHTMLAttributes<HTMLButtonElement>;
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
Props accepted by Button.
|
|
58
|
+
|
|
59
|
+
#### Type Declaration
|
|
60
|
+
|
|
61
|
+
| Name | Type | Description |
|
|
62
|
+
| ---------------- | --------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
63
|
+
| `asChild?` | `boolean` | - |
|
|
64
|
+
| `loading?` | `boolean` | - |
|
|
65
|
+
| `result?` | [`ButtonResult`](#buttonresult) | The outcome of the last action. Becoming `done` plays a short beat: a check (and `resultLabel`) springs in, holds, then settles back to the label. Becoming `failed` shakes the label by the theme's `--stipe-motion-shake`. Say what failed elsewhere, next to the action. |
|
|
66
|
+
| `resultLabel?` | `ReactNode` | What the done beat says, such as "Installed". The button keeps the wider of its two labels, so nothing shifts. |
|
|
67
|
+
| `onResultEnd()?` | () => `void` | Called when the done beat has held long enough to read, just before it would settle back to the label. Replace the button here to hand off to what comes next (an "Installed" mark, an "Open" action). |
|
|
68
|
+
| `size?` | [`ButtonSize`](#buttonsize) | - |
|
|
69
|
+
| `variant?` | [`ButtonVariant`](#buttonvariant) | - |
|
|
70
|
+
|
|
71
|
+
---
|
|
72
|
+
|
|
73
|
+
### ButtonElement
|
|
74
|
+
|
|
75
|
+
```ts
|
|
76
|
+
type ButtonElement = ElementRef<"button">;
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
The native element type used by Button.
|
|
80
|
+
|
|
81
|
+
## Variables
|
|
82
|
+
|
|
83
|
+
### Button
|
|
84
|
+
|
|
85
|
+
```ts
|
|
86
|
+
const Button: ForwardRefExoticComponent<
|
|
87
|
+
object &
|
|
88
|
+
ButtonHTMLAttributes<HTMLButtonElement> &
|
|
89
|
+
RefAttributes<HTMLButtonElement>
|
|
90
|
+
>;
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
A reusable button with caller-controlled native behavior and intrinsic loading
|
|
94
|
+
presentation.
|
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
<!-- Generated by Botanical API docs (TypeDoc + typedoc-plugin-markdown). Do not edit. -->
|
|
2
|
+
|
|
3
|
+
[**@fungi.computer/caps**](../README.md)
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
[@fungi.computer/caps](../README.md) / components/card
|
|
8
|
+
|
|
9
|
+
# components/card
|
|
10
|
+
|
|
11
|
+
## Type Aliases
|
|
12
|
+
|
|
13
|
+
### CardProps
|
|
14
|
+
|
|
15
|
+
```ts
|
|
16
|
+
type CardProps = object & HTMLAttributes<HTMLDivElement>;
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
Props accepted by Card.
|
|
20
|
+
|
|
21
|
+
#### Type Declaration
|
|
22
|
+
|
|
23
|
+
| Name | Type | Description |
|
|
24
|
+
| ----------- | -------------------------------------------------------------------- | ---------------------------------------------------------------------- |
|
|
25
|
+
| `variant?` | `"surface"` \| `"outline"` \| `"interactive"` \| `"game"` \| `"fit"` | - |
|
|
26
|
+
| `featured?` | `boolean` | Emphasize a featured item without changing its interaction. |
|
|
27
|
+
| `state?` | `"empty"` | Present the absence of content within the same card shell. |
|
|
28
|
+
| `density?` | `"regular"` \| `"compact"` | Reduce card section padding when several related details share a page. |
|
|
29
|
+
|
|
30
|
+
---
|
|
31
|
+
|
|
32
|
+
### CenteredCardProps
|
|
33
|
+
|
|
34
|
+
```ts
|
|
35
|
+
type CenteredCardProps = CardProps & object;
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
Props accepted by CenteredCard.
|
|
39
|
+
|
|
40
|
+
#### Type Declaration
|
|
41
|
+
|
|
42
|
+
| Name | Type |
|
|
43
|
+
| -------- | ----------------------- |
|
|
44
|
+
| `width?` | `"default"` \| `"wide"` |
|
|
45
|
+
|
|
46
|
+
---
|
|
47
|
+
|
|
48
|
+
### CardHeaderProps
|
|
49
|
+
|
|
50
|
+
```ts
|
|
51
|
+
type CardHeaderProps = object & HTMLAttributes<HTMLDivElement>;
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
A card header layout with optional centered alignment.
|
|
55
|
+
|
|
56
|
+
#### Type Declaration
|
|
57
|
+
|
|
58
|
+
| Name | Type |
|
|
59
|
+
| ------------ | ----------------------- |
|
|
60
|
+
| `alignment?` | `"start"` \| `"center"` |
|
|
61
|
+
|
|
62
|
+
---
|
|
63
|
+
|
|
64
|
+
### CardTitleProps
|
|
65
|
+
|
|
66
|
+
```ts
|
|
67
|
+
type CardTitleProps = HTMLAttributes<HTMLHeadingElement> & object;
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
Props accepted by CardTitle.
|
|
71
|
+
|
|
72
|
+
#### Type Declaration
|
|
73
|
+
|
|
74
|
+
| Name | Type | Description |
|
|
75
|
+
| -------- | ---------- | ------------------------------------------------------------------ |
|
|
76
|
+
| `level?` | `2` \| `3` | Heading level; the host keeps its document outline. Defaults to 3. |
|
|
77
|
+
|
|
78
|
+
## Variables
|
|
79
|
+
|
|
80
|
+
### Card
|
|
81
|
+
|
|
82
|
+
```ts
|
|
83
|
+
const Card: ForwardRefExoticComponent<
|
|
84
|
+
object & HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>
|
|
85
|
+
>;
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
A presentational card shell.
|
|
89
|
+
|
|
90
|
+
---
|
|
91
|
+
|
|
92
|
+
### CenteredCard
|
|
93
|
+
|
|
94
|
+
```ts
|
|
95
|
+
const CenteredCard: ForwardRefExoticComponent<
|
|
96
|
+
object &
|
|
97
|
+
HTMLAttributes<HTMLDivElement> &
|
|
98
|
+
object &
|
|
99
|
+
RefAttributes<HTMLDivElement>
|
|
100
|
+
>;
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
Center one primary card in a welcoming, viewport-filling page stage.
|
|
104
|
+
|
|
105
|
+
---
|
|
106
|
+
|
|
107
|
+
### CardHeader
|
|
108
|
+
|
|
109
|
+
```ts
|
|
110
|
+
const CardHeader: ForwardRefExoticComponent<
|
|
111
|
+
object & HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>
|
|
112
|
+
>;
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
Render a Caps card header with the requested alignment.
|
|
116
|
+
|
|
117
|
+
---
|
|
118
|
+
|
|
119
|
+
### CardTitle
|
|
120
|
+
|
|
121
|
+
```ts
|
|
122
|
+
const CardTitle: ForwardRefExoticComponent<
|
|
123
|
+
HTMLAttributes<HTMLHeadingElement> &
|
|
124
|
+
object &
|
|
125
|
+
RefAttributes<HTMLHeadingElement>
|
|
126
|
+
>;
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
A card title element.
|
|
130
|
+
|
|
131
|
+
---
|
|
132
|
+
|
|
133
|
+
### CardDescription
|
|
134
|
+
|
|
135
|
+
```ts
|
|
136
|
+
const CardDescription: ForwardRefExoticComponent<
|
|
137
|
+
HTMLAttributes<HTMLParagraphElement> & RefAttributes<HTMLParagraphElement>
|
|
138
|
+
>;
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
A card supporting-description element.
|
|
142
|
+
|
|
143
|
+
---
|
|
144
|
+
|
|
145
|
+
### CardContent
|
|
146
|
+
|
|
147
|
+
```ts
|
|
148
|
+
const CardContent: ForwardRefExoticComponent<
|
|
149
|
+
HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>
|
|
150
|
+
>;
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
A card body layout.
|
|
154
|
+
|
|
155
|
+
---
|
|
156
|
+
|
|
157
|
+
### CardFooter
|
|
158
|
+
|
|
159
|
+
```ts
|
|
160
|
+
const CardFooter: ForwardRefExoticComponent<
|
|
161
|
+
HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>
|
|
162
|
+
>;
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
A card footer layout.
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
<!-- Generated by Botanical API docs (TypeDoc + typedoc-plugin-markdown). Do not edit. -->
|
|
2
|
+
|
|
3
|
+
[**@fungi.computer/caps**](../README.md)
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
[@fungi.computer/caps](../README.md) / components/chat-bubble
|
|
8
|
+
|
|
9
|
+
# components/chat-bubble
|
|
10
|
+
|
|
11
|
+
## Type Aliases
|
|
12
|
+
|
|
13
|
+
### ChatBubbleSide
|
|
14
|
+
|
|
15
|
+
```ts
|
|
16
|
+
type ChatBubbleSide = "agent" | "user";
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
Which side of the conversation a bubble sits on.
|
|
20
|
+
|
|
21
|
+
---
|
|
22
|
+
|
|
23
|
+
### ChatBubbleState
|
|
24
|
+
|
|
25
|
+
```ts
|
|
26
|
+
type ChatBubbleState = "settled" | "pending" | "error";
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
`pending` is still being written; `error` is a turn that did not finish.
|
|
30
|
+
|
|
31
|
+
---
|
|
32
|
+
|
|
33
|
+
### ChatBubbleProps
|
|
34
|
+
|
|
35
|
+
```ts
|
|
36
|
+
type ChatBubbleProps = object &
|
|
37
|
+
Omit<HTMLAttributes<HTMLDivElement>, "children">;
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
Props accepted by ChatBubble.
|
|
41
|
+
|
|
42
|
+
#### Type Declaration
|
|
43
|
+
|
|
44
|
+
| Name | Type | Description |
|
|
45
|
+
| ----------- | ------------------------------------- | ----------------------------------------------------------------------- |
|
|
46
|
+
| `side` | [`ChatBubbleSide`](#chatbubbleside) | An agent speaks from the left with its mark; the person from the right. |
|
|
47
|
+
| `avatar?` | `ReactNode` | A mark for an agent, drawn beside its bubble. |
|
|
48
|
+
| `name?` | `ReactNode` | Who is speaking, on the line above the bubble. |
|
|
49
|
+
| `time?` | `ReactNode` | When it was said, or what the speaker is doing instead. |
|
|
50
|
+
| `state?` | [`ChatBubbleState`](#chatbubblestate) | - |
|
|
51
|
+
| `children?` | `ReactNode` | - |
|
|
52
|
+
|
|
53
|
+
## Variables
|
|
54
|
+
|
|
55
|
+
### ChatBubble
|
|
56
|
+
|
|
57
|
+
```ts
|
|
58
|
+
const ChatBubble: ForwardRefExoticComponent<
|
|
59
|
+
object &
|
|
60
|
+
Omit<HTMLAttributes<HTMLDivElement>, "children"> &
|
|
61
|
+
RefAttributes<HTMLDivElement>
|
|
62
|
+
>;
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
One turn of a conversation: who said it, when, and what. It owns the sides, the
|
|
66
|
+
bubble and the still-writing dots; the caller owns the content.
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<!-- Generated by Botanical API docs (TypeDoc + typedoc-plugin-markdown). Do not edit. -->
|
|
2
|
+
|
|
3
|
+
[**@fungi.computer/caps**](../README.md)
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
[@fungi.computer/caps](../README.md) / components/checkbox-bead
|
|
8
|
+
|
|
9
|
+
# components/checkbox-bead
|
|
10
|
+
|
|
11
|
+
## Type Aliases
|
|
12
|
+
|
|
13
|
+
### CheckboxState
|
|
14
|
+
|
|
15
|
+
```ts
|
|
16
|
+
type CheckboxState = "unchecked" | "checked" | "mixed";
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
Visual state of a checkbox's mark: unchecked, checked, or indeterminate
|
|
20
|
+
("mixed").
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
<!-- Generated by Botanical API docs (TypeDoc + typedoc-plugin-markdown). Do not edit. -->
|
|
2
|
+
|
|
3
|
+
[**@fungi.computer/caps**](../README.md)
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
[@fungi.computer/caps](../README.md) / components/checkbox
|
|
8
|
+
|
|
9
|
+
# components/checkbox
|
|
10
|
+
|
|
11
|
+
## Type Aliases
|
|
12
|
+
|
|
13
|
+
### CheckboxProps
|
|
14
|
+
|
|
15
|
+
```ts
|
|
16
|
+
type CheckboxProps = object & InputHTMLAttributes<HTMLInputElement>;
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
Props accepted by Checkbox.
|
|
20
|
+
|
|
21
|
+
#### Type Declaration
|
|
22
|
+
|
|
23
|
+
| Name | Type | Description |
|
|
24
|
+
| ---------------- | -------------------------- | ---------------------------------------------------------------------------- |
|
|
25
|
+
| `appearance?` | `"default"` \| `"compact"` | Compact instruments keep the wrapper's focus ring and disabled ink readable. |
|
|
26
|
+
| `indicator?` | `ReactNode` | Replaces the bead while the native input continues to own selection. |
|
|
27
|
+
| `invalid?` | `boolean` | - |
|
|
28
|
+
| `indeterminate?` | `boolean` | Shows a mixed selection while checked still controls native form submission. |
|
|
29
|
+
|
|
30
|
+
## Variables
|
|
31
|
+
|
|
32
|
+
### Checkbox
|
|
33
|
+
|
|
34
|
+
```ts
|
|
35
|
+
const Checkbox: ForwardRefExoticComponent<
|
|
36
|
+
object &
|
|
37
|
+
InputHTMLAttributes<HTMLInputElement> &
|
|
38
|
+
RefAttributes<HTMLInputElement>
|
|
39
|
+
>;
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
A native checkbox with styled invalid-state presentation.
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
<!-- Generated by Botanical API docs (TypeDoc + typedoc-plugin-markdown). Do not edit. -->
|
|
2
|
+
|
|
3
|
+
[**@fungi.computer/caps**](../README.md)
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
[@fungi.computer/caps](../README.md) / components/code-input
|
|
8
|
+
|
|
9
|
+
# components/code-input
|
|
10
|
+
|
|
11
|
+
## Type Aliases
|
|
12
|
+
|
|
13
|
+
### CodeInputStatus
|
|
14
|
+
|
|
15
|
+
```ts
|
|
16
|
+
type CodeInputStatus = "idle" | "invalid" | "accepted";
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
What the caller has learned about the entered code.
|
|
20
|
+
|
|
21
|
+
---
|
|
22
|
+
|
|
23
|
+
### CodeInputProps
|
|
24
|
+
|
|
25
|
+
```ts
|
|
26
|
+
type CodeInputProps = object &
|
|
27
|
+
Omit<
|
|
28
|
+
InputHTMLAttributes<HTMLInputElement>,
|
|
29
|
+
"value" | "defaultValue" | "onChange" | "maxLength" | "size"
|
|
30
|
+
>;
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
Props accepted by CodeInput.
|
|
34
|
+
|
|
35
|
+
#### Type Declaration
|
|
36
|
+
|
|
37
|
+
| Name | Type | Description |
|
|
38
|
+
| ----------------- | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
39
|
+
| `length?` | `number` | How many characters the code has. |
|
|
40
|
+
| `value` | `string` | The current code. |
|
|
41
|
+
| `onValueChange()` | (`value`) => `void` | Receives the code after a native edit or a normalized paste. |
|
|
42
|
+
| `status?` | [`CodeInputStatus`](#codeinputstatus) | `invalid` shakes the slots in a cascade and marks them; `accepted` lifts them in a wave. Say what was wrong next to the field, as with any error. |
|
|
43
|
+
|
|
44
|
+
## Variables
|
|
45
|
+
|
|
46
|
+
### CodeInput
|
|
47
|
+
|
|
48
|
+
```ts
|
|
49
|
+
const CodeInput: ForwardRefExoticComponent<
|
|
50
|
+
object &
|
|
51
|
+
Omit<
|
|
52
|
+
InputHTMLAttributes<HTMLInputElement>,
|
|
53
|
+
"defaultValue" | "onChange" | "size" | "value" | "maxLength"
|
|
54
|
+
> &
|
|
55
|
+
RefAttributes<HTMLInputElement>
|
|
56
|
+
>;
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
A short code (a sign-in or pairing code) shown as one slot per character. It is
|
|
60
|
+
a single native input underneath, so typing, pasting, one-time-code autofill and
|
|
61
|
+
screen readers behave as they do on any text field.
|