division-ds 0.2.1 → 0.3.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/AGENTS.md +4 -4
- package/package.json +1 -1
- package/public/docs/components/accordion.md +1 -1
- package/public/docs/components/ai-label.md +1 -1
- package/public/docs/components/alert-dialog.md +1 -1
- package/public/docs/components/alert.md +1 -1
- package/public/docs/components/approval-request.md +1 -1
- package/public/docs/components/auth-form.md +1 -1
- package/public/docs/components/avatar-group.md +1 -1
- package/public/docs/components/avatar.md +1 -1
- package/public/docs/components/badge.md +1 -1
- package/public/docs/components/breadcrumbs.md +1 -1
- package/public/docs/components/button.md +1 -1
- package/public/docs/components/card.md +1 -1
- package/public/docs/components/carousel.md +1 -1
- package/public/docs/components/cart.md +1 -1
- package/public/docs/components/chart-panel.md +1 -1
- package/public/docs/components/chat-message.md +1 -1
- package/public/docs/components/chat-thread.md +1 -1
- package/public/docs/components/checkbox.md +1 -1
- package/public/docs/components/checkout-form.md +1 -1
- package/public/docs/components/command-palette.md +5 -2
- package/public/docs/components/data-table.md +1 -1
- package/public/docs/components/date-picker.md +166 -0
- package/public/docs/components/date-presets.md +111 -0
- package/public/docs/components/date-range-picker.md +135 -0
- package/public/docs/components/description-list.md +1 -1
- package/public/docs/components/dialog.md +1 -1
- package/public/docs/components/divider.md +1 -1
- package/public/docs/components/dropdown-menu.md +1 -1
- package/public/docs/components/empty-state.md +1 -1
- package/public/docs/components/footer.md +1 -1
- package/public/docs/components/form-field.md +2 -2
- package/public/docs/components/icon-button.md +1 -1
- package/public/docs/components/input.md +1 -1
- package/public/docs/components/kanban-board.md +1 -1
- package/public/docs/components/kbd.md +1 -1
- package/public/docs/components/link.md +1 -1
- package/public/docs/components/list-item.md +1 -1
- package/public/docs/components/loading-animation.md +1 -1
- package/public/docs/components/multi-select.md +5 -5
- package/public/docs/components/navbar.md +1 -1
- package/public/docs/components/newsletter-form.md +1 -1
- package/public/docs/components/page-header.md +1 -1
- package/public/docs/components/pagination.md +1 -1
- package/public/docs/components/product-card.md +1 -1
- package/public/docs/components/progress.md +1 -1
- package/public/docs/components/prompt-input.md +1 -1
- package/public/docs/components/quantity-stepper.md +2 -2
- package/public/docs/components/radio.md +1 -1
- package/public/docs/components/rating.md +1 -1
- package/public/docs/components/score-ring.md +1 -1
- package/public/docs/components/search.md +1 -1
- package/public/docs/components/section-heading.md +1 -1
- package/public/docs/components/segmented-control.md +1 -1
- package/public/docs/components/select.md +2 -2
- package/public/docs/components/sheet.md +1 -1
- package/public/docs/components/sidebar.md +1 -1
- package/public/docs/components/skeleton.md +1 -1
- package/public/docs/components/slider.md +1 -1
- package/public/docs/components/sparkline.md +1 -1
- package/public/docs/components/spinner.md +1 -1
- package/public/docs/components/stat.md +1 -1
- package/public/docs/components/status-tracker.md +1 -1
- package/public/docs/components/stepper.md +1 -1
- package/public/docs/components/switch.md +1 -1
- package/public/docs/components/tabs.md +1 -1
- package/public/docs/components/tag.md +1 -1
- package/public/docs/components/textarea.md +1 -1
- package/public/docs/components/time-field.md +127 -0
- package/public/docs/components/timeline.md +1 -1
- package/public/docs/components/toast.md +1 -1
- package/public/docs/components/tool-call.md +1 -1
- package/public/docs/components/tooltip.md +1 -1
- package/public/manifest/components.json +1045 -86
- package/scripts/lib/agent-docs.mjs +22 -1
- package/scripts/lib/mcp-tools.mjs +2 -14
- package/scripts/lib/props-validator.mjs +36 -2
- package/scripts/lib/search-score.mjs +24 -0
- package/skills/division-ds/SKILL.md +2 -2
- package/skills/division-ds/topics/forms.md +1 -1
- package/division-ds-0.2.1.tgz +0 -0
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
# DateRangePicker
|
|
2
|
+
|
|
3
|
+
> A start and an end date in one field, an add-on to DatePicker. Type both, or open two months side by side: the first day you pick is the start, the band follows you to the second, which sets the end and closes the calendar. Put DatePresets in `aside` for one-click periods like Last 7 days. Installs DatePicker with it.
|
|
4
|
+
|
|
5
|
+
- **Best for:** A booking, a report window, a leave request.
|
|
6
|
+
- **Not for:** One day: DatePicker.
|
|
7
|
+
- Molecule. Source: `src/components/molecules/date-range-picker/DateRangePicker.tsx`
|
|
8
|
+
- Rendered docs page: `/components/date-range-picker`
|
|
9
|
+
|
|
10
|
+
## Import
|
|
11
|
+
|
|
12
|
+
```tsx
|
|
13
|
+
import { DateRangePicker, EMPTY_RANGE, useDateRangePicker } from 'src/components/molecules/date-range-picker/DateRangePicker'
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file. An install has no index barrels: import each component from its own file, never from `components/molecules`.
|
|
17
|
+
|
|
18
|
+
## Props
|
|
19
|
+
|
|
20
|
+
| Prop | Type | Default | Description |
|
|
21
|
+
|---|---|---|---|
|
|
22
|
+
| `label` | `string` | | Names the field. Leave it out inside a FormField, which sets it from its own label. Outside one it is required, and `division-ds check` flags a missing one. |
|
|
23
|
+
| `value` | `{ start: string; end: string }` | | Controlled range. Each end is 'YYYY-MM-DD' or ''. |
|
|
24
|
+
| `defaultValue` | `{ start: string; end: string }` | `{ start: '', end: '' }` | Starting range when the picker holds it itself. |
|
|
25
|
+
| `onValueChange` | `(range: DateRange) => void` | | Fires when either end changes. Days picked in the calendar always arrive in order. |
|
|
26
|
+
| `min` | `string` | | Earliest date, 'YYYY-MM-DD'. |
|
|
27
|
+
| `max` | `string` | | Latest date, 'YYYY-MM-DD'. |
|
|
28
|
+
| `isDateDisabled` | `(date: string) => boolean` | | Days that cannot be picked. |
|
|
29
|
+
| `locale` | `string` | | Segment order, names and first day of the week. Defaults to the browser's. |
|
|
30
|
+
| `weekStartsOn` | `number` | | 0 Sunday to 6 Saturday. Defaults to the locale's. |
|
|
31
|
+
| `aside` | `ReactNode` | | Beside the months, in the popover. DatePresets reads and sets the range by itself here. |
|
|
32
|
+
| `partLabels` | `[string, string]` | `['Start date', 'End date']` | The names of the two dates. |
|
|
33
|
+
| `disabled` | `boolean` | `false` | Disables both dates and the button. |
|
|
34
|
+
| `invalid` | `boolean` | | Marks the field invalid. FormField sets it. |
|
|
35
|
+
| `required` | `boolean` | | Marks both dates required. FormField sets it. |
|
|
36
|
+
| `name` | `string` | | Submits name-start and name-end with a form. |
|
|
37
|
+
| `id` | `string` | | The field's id. FormField sets it. |
|
|
38
|
+
| `aria-describedby` | `string` | | The ids of the help and error text. FormField sets it. |
|
|
39
|
+
| `className` | `string` | | Combined with the field's classes. |
|
|
40
|
+
| `ref` | `Ref<HTMLDivElement>` | | The field's group element. |
|
|
41
|
+
| `useDateRangePicker()` | `() => { value: DateRange; select: (range: DateRange) => void } \| null` | | Inside the popover: the range, and a way to set it and close. For your own aside content. |
|
|
42
|
+
|
|
43
|
+
## Types and helpers
|
|
44
|
+
|
|
45
|
+
Exported beside the component, from the same file. Import a type with `import type { ... }`.
|
|
46
|
+
|
|
47
|
+
```ts
|
|
48
|
+
/** A start and an end, each 'YYYY-MM-DD' or '' while not chosen. */
|
|
49
|
+
export type DateRange = { start: IsoDate | ''; end: IsoDate | '' }
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
```ts
|
|
53
|
+
export const EMPTY_RANGE: DateRange = { start: '', end: '' }
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
```ts
|
|
57
|
+
/** The open picker's range, and a way to set it and close. DatePresets reads it, so a preset in
|
|
58
|
+
* `aside` needs no wiring. null outside a DateRangePicker. */
|
|
59
|
+
export const useDateRangePicker = () => useContext(Context)
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
## Examples
|
|
63
|
+
|
|
64
|
+
Each is compiled and rendered on the docs page. Imports are omitted; see above.
|
|
65
|
+
|
|
66
|
+
### Default
|
|
67
|
+
|
|
68
|
+
```tsx
|
|
69
|
+
<div className="w-full max-w-sm">
|
|
70
|
+
<DateRangePicker label="Stay" />
|
|
71
|
+
</div>
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
### With DatePresets beside the months
|
|
75
|
+
|
|
76
|
+
```tsx
|
|
77
|
+
<div className="w-full max-w-sm">
|
|
78
|
+
<FormField label="Report period" help="Pick a preset, or two days.">
|
|
79
|
+
<DateRangePicker aside={<DatePresets />} />
|
|
80
|
+
</FormField>
|
|
81
|
+
</div>
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
### Controlled: the page holds the range
|
|
85
|
+
|
|
86
|
+
```tsx
|
|
87
|
+
function Controlled() {
|
|
88
|
+
const [range, setRange] = useState<DateRange>({ start: '2026-11-09', end: '2026-11-13' })
|
|
89
|
+
return (
|
|
90
|
+
<div className="flex w-full max-w-sm flex-col gap-2">
|
|
91
|
+
<DateRangePicker label="Leave" value={range} onValueChange={setRange} />
|
|
92
|
+
<span className="font-mono text-xs text-[var(--color-text-secondary)]">
|
|
93
|
+
start: {range.start || '—'}, end: {range.end || '—'}
|
|
94
|
+
</span>
|
|
95
|
+
</div>
|
|
96
|
+
)
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
<Controlled />
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
### Limits: November and December only
|
|
103
|
+
|
|
104
|
+
```tsx
|
|
105
|
+
<div className="w-full max-w-sm">
|
|
106
|
+
<DateRangePicker label="Rental" min="2026-11-01" max="2026-12-30" defaultValue={{ start: '2026-11-20', end: '2026-11-23' }} />
|
|
107
|
+
</div>
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
## Keyboard
|
|
111
|
+
|
|
112
|
+
| Keys | Result |
|
|
113
|
+
|---|---|
|
|
114
|
+
| `0–9` `↑` `↓` | Types or steps the focused segment of either date. |
|
|
115
|
+
| `←` `→` | In the field: the next segment, across both dates. In the calendar: the day before or after, moving the band. |
|
|
116
|
+
| `Page Up` `Page Down` | A month earlier or later. With Shift, a year. |
|
|
117
|
+
| `Enter` `Space` | Picks the start, then the end, which closes the calendar. |
|
|
118
|
+
| `Esc` | Closes the calendar. A start picked without an end stays as the start. |
|
|
119
|
+
|
|
120
|
+
## Do
|
|
121
|
+
|
|
122
|
+
- Add DatePresets in aside when people mostly want the usual periods.
|
|
123
|
+
- Validate the length yourself if a range has a limit (a 30-day report), and say so in help text.
|
|
124
|
+
|
|
125
|
+
## Don't
|
|
126
|
+
|
|
127
|
+
- Don't use two separate DatePickers for a start and an end: nobody sees the band.
|
|
128
|
+
- Don't reorder a typed range for the user; the field marks it invalid so they can see what they typed.
|
|
129
|
+
|
|
130
|
+
## Anatomy
|
|
131
|
+
|
|
132
|
+
- **Field**: A group named by the label, holding two segmented dates (Start date, End date) and the calendar button. A typed end before the start marks it invalid.
|
|
133
|
+
- **Calendar**: Two months, stacked on narrow screens. The ends are solid accent squares, the days between a light accent band.
|
|
134
|
+
- **Hint**: "Pick the first day." or "Pick the last day.", under the months, announced when it changes.
|
|
135
|
+
- **Aside**: An optional column beside the months, for DatePresets.
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
import { DescriptionList } from 'src/components/molecules/description-list/DescriptionList'
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
-
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
|
|
16
|
+
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file. An install has no index barrels: import each component from its own file, never from `components/molecules`.
|
|
17
17
|
|
|
18
18
|
## Props
|
|
19
19
|
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
import { Dialog, DialogClose, DialogContent, DialogFooter, DialogTrigger } from 'src/components/organisms/dialog/Dialog'
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
-
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
|
|
16
|
+
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file. An install has no index barrels: import each component from its own file, never from `components/molecules`.
|
|
17
17
|
|
|
18
18
|
## Props
|
|
19
19
|
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
import { Divider } from 'src/components/atoms/divider/Divider'
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
-
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
|
|
16
|
+
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file. An install has no index barrels: import each component from its own file, never from `components/molecules`.
|
|
17
17
|
|
|
18
18
|
## Props
|
|
19
19
|
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from 'src/components/molecules/dropdown-menu/DropdownMenu'
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
-
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
|
|
16
|
+
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file. An install has no index barrels: import each component from its own file, never from `components/molecules`.
|
|
17
17
|
|
|
18
18
|
## Props
|
|
19
19
|
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
import { EmptyState } from 'src/components/molecules/empty-state/EmptyState'
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
-
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
|
|
16
|
+
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file. An install has no index barrels: import each component from its own file, never from `components/molecules`.
|
|
17
17
|
|
|
18
18
|
## Props
|
|
19
19
|
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
import { Footer } from 'src/components/organisms/footer/Footer'
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
-
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
|
|
16
|
+
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file. An install has no index barrels: import each component from its own file, never from `components/molecules`.
|
|
17
17
|
|
|
18
18
|
## Props
|
|
19
19
|
|
|
@@ -15,7 +15,7 @@ import { FormField } from 'src/components/molecules/form-field/FormField'
|
|
|
15
15
|
import { ErrorSummary } from 'src/components/molecules/form-field/ErrorSummary'
|
|
16
16
|
```
|
|
17
17
|
|
|
18
|
-
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
|
|
18
|
+
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file. An install has no index barrels: import each component from its own file, never from `components/molecules`.
|
|
19
19
|
|
|
20
20
|
## Props
|
|
21
21
|
|
|
@@ -25,7 +25,7 @@ Paths are from the Division DS repository root. Installed with shadcn they start
|
|
|
25
25
|
| `help` | `string` | | Instruction text, read out before any error. |
|
|
26
26
|
| `error` | `string` | | Sets invalid on the control and adds the error line. |
|
|
27
27
|
| `required` | `boolean` | `false` | Adds the asterisk (hidden from screen readers) and the built-in required attribute on the control. That attribute is what assistive technology actually announces. |
|
|
28
|
-
| `children` | `ReactElement` | | Exactly one control: Input, Textarea, Select or
|
|
28
|
+
| `children` | `ReactElement` | | Exactly one control: Input, Textarea, Select, MultiSelect, QuantityStepper, DatePicker, DateRangePicker or TimeField. The controls that name themselves (all but Input and Textarea) take the FormField label, so leave their own label out. An id you give the control is kept (point an ErrorSummary entry at it); without one, FormField makes one up. |
|
|
29
29
|
| `className` | `string` | | Extra CSS classes, merged with the outer element's own. When two Tailwind classes clash, the later one wins. |
|
|
30
30
|
| `ref` | `Ref<HTMLDivElement>` | | Passed through to the outer element. |
|
|
31
31
|
| `errors (ErrorSummary)` | `{ fieldId: string; message: string }[]` | | What stopped the form from submitting, in the order of the fields. Each entry links to its field and moves focus there. An empty list shows nothing. |
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
import { IconButton } from 'src/components/atoms/icon-button/IconButton'
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
-
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
|
|
16
|
+
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file. An install has no index barrels: import each component from its own file, never from `components/molecules`.
|
|
17
17
|
|
|
18
18
|
## Props
|
|
19
19
|
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
import { Input, inputVariants } from 'src/components/atoms/input/Input'
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
-
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
|
|
16
|
+
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file. An install has no index barrels: import each component from its own file, never from `components/molecules`.
|
|
17
17
|
|
|
18
18
|
## Requires
|
|
19
19
|
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
import { KanbanBoard, applyKanbanMove, groupKanbanItems, kanbanDragOver, kanbanDrop, kanbanMessages, kanbanPosition } from 'src/components/organisms/kanban-board/KanbanBoard'
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
-
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
|
|
16
|
+
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file. An install has no index barrels: import each component from its own file, never from `components/molecules`.
|
|
17
17
|
|
|
18
18
|
## Requires
|
|
19
19
|
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
import { Kbd } from 'src/components/atoms/kbd/Kbd'
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
-
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
|
|
16
|
+
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file. An install has no index barrels: import each component from its own file, never from `components/molecules`.
|
|
17
17
|
|
|
18
18
|
## Props
|
|
19
19
|
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
import { Link, linkVariants } from 'src/components/atoms/link/Link'
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
-
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
|
|
16
|
+
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file. An install has no index barrels: import each component from its own file, never from `components/molecules`.
|
|
17
17
|
|
|
18
18
|
## Props
|
|
19
19
|
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
import { List, ListItem } from 'src/components/molecules/list-item/ListItem'
|
|
15
15
|
```
|
|
16
16
|
|
|
17
|
-
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
|
|
17
|
+
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file. An install has no index barrels: import each component from its own file, never from `components/molecules`.
|
|
18
18
|
|
|
19
19
|
## Requires
|
|
20
20
|
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
import { LoadingAnimation } from 'src/components/atoms/loading-animation/LoadingAnimation'
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
-
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
|
|
16
|
+
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file. An install has no index barrels: import each component from its own file, never from `components/molecules`.
|
|
17
17
|
|
|
18
18
|
## Props
|
|
19
19
|
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
import { MultiSelect } from 'src/components/molecules/multi-select/MultiSelect'
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
-
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
|
|
16
|
+
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file. An install has no index barrels: import each component from its own file, never from `components/molecules`.
|
|
17
17
|
|
|
18
18
|
## Requires
|
|
19
19
|
|
|
@@ -23,7 +23,7 @@ Paths are from the Division DS repository root. Installed with shadcn they start
|
|
|
23
23
|
|
|
24
24
|
| Prop | Type | Default | Description |
|
|
25
25
|
|---|---|---|---|
|
|
26
|
-
| `label` | `string` | |
|
|
26
|
+
| `label` | `string` | | The name screen readers give the text field and the list. Leave it out inside a FormField, which sets it from its own label. Outside one it is required, and `division-ds check` flags a missing one. |
|
|
27
27
|
| `options` | `SelectOption[]` | | { value, label, disabled? }, the same rows Select takes. |
|
|
28
28
|
| `value` | `string[]` | | The current selection when the page keeps track of it (controlled), as option values in the order they were chosen. |
|
|
29
29
|
| `defaultValue` | `string[]` | | The starting selection when the component keeps track itself (uncontrolled). |
|
|
@@ -60,7 +60,7 @@ const LOADOUT = [
|
|
|
60
60
|
|
|
61
61
|
<div className="w-full max-w-md">
|
|
62
62
|
<FormField label="Loadout">
|
|
63
|
-
<MultiSelect
|
|
63
|
+
<MultiSelect options={LOADOUT} placeholder="Choose your kit…" />
|
|
64
64
|
</FormField>
|
|
65
65
|
</div>
|
|
66
66
|
```
|
|
@@ -84,7 +84,7 @@ function ControlledExample() {
|
|
|
84
84
|
return (
|
|
85
85
|
<div className="flex flex-col gap-2 w-full max-w-md">
|
|
86
86
|
<FormField label="Loadout" help="Remove a tag and watch the others close the gap.">
|
|
87
|
-
<MultiSelect
|
|
87
|
+
<MultiSelect options={LOADOUT} value={kit} onValueChange={setKit} />
|
|
88
88
|
</FormField>
|
|
89
89
|
<span className="font-mono text-xs text-[var(--color-text-secondary)]">value: [{kit.join(', ')}]</span>
|
|
90
90
|
</div>
|
|
@@ -110,7 +110,7 @@ const LOADOUT = [
|
|
|
110
110
|
|
|
111
111
|
<div className="w-full max-w-md">
|
|
112
112
|
<FormField label="Loadout" error="Pick eye protection.">
|
|
113
|
-
<MultiSelect
|
|
113
|
+
<MultiSelect options={LOADOUT} defaultValue={['mags']} />
|
|
114
114
|
</FormField>
|
|
115
115
|
</div>
|
|
116
116
|
```
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
import { Navbar } from 'src/components/organisms/navbar/Navbar'
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
-
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
|
|
16
|
+
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file. An install has no index barrels: import each component from its own file, never from `components/molecules`.
|
|
17
17
|
|
|
18
18
|
## Props
|
|
19
19
|
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
import { NewsletterForm } from 'src/components/organisms/newsletter-form/NewsletterForm'
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
-
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
|
|
16
|
+
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file. An install has no index barrels: import each component from its own file, never from `components/molecules`.
|
|
17
17
|
|
|
18
18
|
## Props
|
|
19
19
|
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
import { PageHeader } from 'src/components/molecules/page-header/PageHeader'
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
-
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
|
|
16
|
+
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file. An install has no index barrels: import each component from its own file, never from `components/molecules`.
|
|
17
17
|
|
|
18
18
|
## Props
|
|
19
19
|
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
import { Pagination, paginationRange } from 'src/components/molecules/pagination/Pagination'
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
-
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
|
|
16
|
+
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file. An install has no index barrels: import each component from its own file, never from `components/molecules`.
|
|
17
17
|
|
|
18
18
|
## Props
|
|
19
19
|
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
import { ProductCard, ProductGrid } from 'src/components/organisms/product-card/ProductCard'
|
|
15
15
|
```
|
|
16
16
|
|
|
17
|
-
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
|
|
17
|
+
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file. An install has no index barrels: import each component from its own file, never from `components/molecules`.
|
|
18
18
|
|
|
19
19
|
## Props
|
|
20
20
|
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
import { Progress } from 'src/components/atoms/progress/Progress'
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
-
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
|
|
16
|
+
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file. An install has no index barrels: import each component from its own file, never from `components/molecules`.
|
|
17
17
|
|
|
18
18
|
## Props
|
|
19
19
|
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
import { PromptInput } from 'src/components/molecules/prompt-input/PromptInput'
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
-
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
|
|
16
|
+
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file. An install has no index barrels: import each component from its own file, never from `components/molecules`.
|
|
17
17
|
|
|
18
18
|
## Requires
|
|
19
19
|
|
|
@@ -13,13 +13,13 @@
|
|
|
13
13
|
import { QuantityStepper, clampQuantity, gridMax } from 'src/components/molecules/quantity-stepper/QuantityStepper'
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
-
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
|
|
16
|
+
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file. An install has no index barrels: import each component from its own file, never from `components/molecules`.
|
|
17
17
|
|
|
18
18
|
## Props
|
|
19
19
|
|
|
20
20
|
| Prop | Type | Default | Description |
|
|
21
21
|
|---|---|---|---|
|
|
22
|
-
| `label` | `string` | |
|
|
22
|
+
| `label` | `string` | | Names the field and both buttons ("Decrease Speed loader quantity"). Leave it out inside a FormField, which sets it from its own label. Outside one it is required, and `division-ds check` flags a missing one. |
|
|
23
23
|
| `value` | `number` | | Controlled value (your page holds it). |
|
|
24
24
|
| `defaultValue` | `number` | `min` | Starting value when the component holds the value itself (uncontrolled). |
|
|
25
25
|
| `onValueChange` | `(value: number) => void` | | Fires with the final value, pulled inside the limits: after a button click, an arrow key, Home/End, or when typing is finished by leaving the field or pressing Enter. |
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
import { Radio, RadioGroup } from 'src/components/atoms/radio/Radio'
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
-
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
|
|
16
|
+
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file. An install has no index barrels: import each component from its own file, never from `components/molecules`.
|
|
17
17
|
|
|
18
18
|
## Props
|
|
19
19
|
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
import { Rating, RatingInput } from 'src/components/molecules/rating/Rating'
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
-
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
|
|
16
|
+
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file. An install has no index barrels: import each component from its own file, never from `components/molecules`.
|
|
17
17
|
|
|
18
18
|
## Props
|
|
19
19
|
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
import { ScoreRing, scoreBand } from 'src/components/atoms/score-ring/ScoreRing'
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
-
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
|
|
16
|
+
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file. An install has no index barrels: import each component from its own file, never from `components/molecules`.
|
|
17
17
|
|
|
18
18
|
## Props
|
|
19
19
|
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
import { Search } from 'src/components/molecules/search/Search'
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
-
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
|
|
16
|
+
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file. An install has no index barrels: import each component from its own file, never from `components/molecules`.
|
|
17
17
|
|
|
18
18
|
## Props
|
|
19
19
|
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
import { SectionHeading } from 'src/components/molecules/section-heading/SectionHeading'
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
-
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
|
|
16
|
+
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file. An install has no index barrels: import each component from its own file, never from `components/molecules`.
|
|
17
17
|
|
|
18
18
|
## Props
|
|
19
19
|
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
import { SegmentedControl } from 'src/components/molecules/segmented-control/SegmentedControl'
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
-
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
|
|
16
|
+
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file. An install has no index barrels: import each component from its own file, never from `components/molecules`.
|
|
17
17
|
|
|
18
18
|
## Props
|
|
19
19
|
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
import { Select } from 'src/components/atoms/select/Select'
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
-
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
|
|
16
|
+
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file. An install has no index barrels: import each component from its own file, never from `components/molecules`.
|
|
17
17
|
|
|
18
18
|
## Requires
|
|
19
19
|
|
|
@@ -23,7 +23,7 @@ Paths are from the Division DS repository root. Installed with shadcn they start
|
|
|
23
23
|
|
|
24
24
|
| Prop | Type | Default | Description |
|
|
25
25
|
|---|---|---|---|
|
|
26
|
-
| `label` | `string` | |
|
|
26
|
+
| `label` | `string` | | The trigger’s accessible name, the name a screen reader announces for it. Leave it out inside a FormField, which sets it from its own label. Outside one it is required, and `division-ds check` flags a missing one. |
|
|
27
27
|
| `options` | `SelectOptionWithIcon[]` | | { value, label, disabled?, icon? } rows shown in the listbox. Pass this or groups, never both. |
|
|
28
28
|
| `groups` | `SelectGroup[]` | | { label, options }[]: rows under headings. Pass this or options, never both. |
|
|
29
29
|
| `placeholder` | `string` | `'Select…'` | Shown until a value is chosen. |
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
import { Sheet, SheetClose, SheetContent, SheetTrigger } from 'src/components/organisms/sheet/Sheet'
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
-
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
|
|
16
|
+
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file. An install has no index barrels: import each component from its own file, never from `components/molecules`.
|
|
17
17
|
|
|
18
18
|
## Props
|
|
19
19
|
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
import { Sidebar } from 'src/components/organisms/sidebar/Sidebar'
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
-
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
|
|
16
|
+
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file. An install has no index barrels: import each component from its own file, never from `components/molecules`.
|
|
17
17
|
|
|
18
18
|
## Props
|
|
19
19
|
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
import { Skeleton, SkeletonGroup } from 'src/components/atoms/skeleton/Skeleton'
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
-
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
|
|
16
|
+
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file. An install has no index barrels: import each component from its own file, never from `components/molecules`.
|
|
17
17
|
|
|
18
18
|
## Props
|
|
19
19
|
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
import { Slider } from 'src/components/atoms/slider/Slider'
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
-
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
|
|
16
|
+
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file. An install has no index barrels: import each component from its own file, never from `components/molecules`.
|
|
17
17
|
|
|
18
18
|
## Props
|
|
19
19
|
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
import { Sparkline } from 'src/components/atoms/sparkline/Sparkline'
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
-
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
|
|
16
|
+
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file. An install has no index barrels: import each component from its own file, never from `components/molecules`.
|
|
17
17
|
|
|
18
18
|
## Props
|
|
19
19
|
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
import { Spinner, spinnerVariants } from 'src/components/atoms/spinner/Spinner'
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
-
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
|
|
16
|
+
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file. An install has no index barrels: import each component from its own file, never from `components/molecules`.
|
|
17
17
|
|
|
18
18
|
## Props
|
|
19
19
|
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
import { Stat } from 'src/components/molecules/stat/Stat'
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
-
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
|
|
16
|
+
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file. An install has no index barrels: import each component from its own file, never from `components/molecules`.
|
|
17
17
|
|
|
18
18
|
## Props
|
|
19
19
|
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
import { StatusTracker, statusTrackerText } from 'src/components/molecules/status-tracker/StatusTracker'
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
-
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
|
|
16
|
+
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file. An install has no index barrels: import each component from its own file, never from `components/molecules`.
|
|
17
17
|
|
|
18
18
|
## Requires
|
|
19
19
|
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
import { Stepper } from 'src/components/molecules/stepper/Stepper'
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
-
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
|
|
16
|
+
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file. An install has no index barrels: import each component from its own file, never from `components/molecules`.
|
|
17
17
|
|
|
18
18
|
## Props
|
|
19
19
|
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
import { Switch } from 'src/components/atoms/switch/Switch'
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
-
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
|
|
16
|
+
Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file. An install has no index barrels: import each component from its own file, never from `components/molecules`.
|
|
17
17
|
|
|
18
18
|
## Requires
|
|
19
19
|
|