atlas-react-kit 0.13.0 → 1.1.0
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/COMPONENTS.md +144 -120
- package/DESIGN_RULES.md +53 -32
- package/README.md +12 -53
- package/dist/accordion.d.ts +1 -0
- package/dist/avatar.d.ts +1 -0
- package/dist/badge.d.ts +2 -3
- package/dist/breadcrumb.d.ts +2 -3
- package/dist/button.d.ts +2 -3
- package/dist/calendar.d.ts +2 -0
- package/dist/card.d.ts +3 -0
- package/dist/chart.d.ts +152 -0
- package/dist/chart.js +177 -0
- package/dist/color-legend.d.ts +8 -0
- package/dist/combobox.d.ts +13 -4
- package/dist/combobox.js +1 -8
- package/dist/date-picker.d.ts +26 -3
- package/dist/date-picker.js +37 -31
- package/dist/date-time-picker.d.ts +5 -2
- package/dist/date-time-picker.js +25 -38
- package/dist/dialog.d.ts +1 -0
- package/dist/dialog.js +4 -2
- package/dist/dropdown-menu.d.ts +9 -8
- package/dist/empty-panel.d.ts +8 -2
- package/dist/empty-panel.js +2 -2
- package/dist/error-boundary.d.ts +6 -1
- package/dist/field.d.ts +3 -0
- package/dist/field.js +1 -1
- package/dist/form/checkbox-field.d.ts +45 -0
- package/dist/form/checkbox-field.js +39 -0
- package/dist/form/combobox-field.d.ts +13 -0
- package/dist/form/combobox-field.js +14 -0
- package/dist/form/control-field.d.ts +6 -7
- package/dist/form/date-picker-field.d.ts +12 -21
- package/dist/form/date-picker-field.js +5 -4
- package/dist/form/date-time-picker-field.d.ts +7 -22
- package/dist/form/date-time-picker-field.js +4 -3
- package/dist/form/feedback-field.d.ts +2 -0
- package/dist/form/field-error.d.ts +35 -3
- package/dist/form/field-shell.d.ts +35 -6
- package/dist/form/field-shell.js +1 -1
- package/dist/form/focus-first-invalid.d.ts +28 -0
- package/dist/form/focus-first-invalid.js +29 -0
- package/dist/form/markdown-field.d.ts +4 -16
- package/dist/form/select-field.d.ts +13 -7
- package/dist/form/select-field.js +3 -2
- package/dist/form/text-field.d.ts +29 -10
- package/dist/form/text-field.js +4 -0
- package/dist/form/toggle-group-field.d.ts +30 -0
- package/dist/form/toggle-group-field.js +19 -0
- package/dist/info-tip.d.ts +10 -1
- package/dist/internal/as-child.d.ts +8 -0
- package/dist/internal/as-child.js +1 -0
- package/dist/internal/form-control.d.ts +3 -2
- package/dist/internal/form-control.js +3 -2
- package/dist/internal/kanban-layout.d.ts +55 -0
- package/dist/internal/kanban-layout.js +80 -0
- package/dist/internal/kanban-plugins.d.ts +17 -0
- package/dist/internal/kanban-plugins.js +17 -0
- package/dist/internal/listbox-navigation.d.ts +0 -11
- package/dist/internal/listbox-navigation.js +2 -2
- package/dist/internal/listbox-option.d.ts +0 -15
- package/dist/internal/listbox-option.js +1 -1
- package/dist/internal/use-drag-scroll.d.ts +17 -0
- package/dist/internal/use-drag-scroll.js +98 -0
- package/dist/internal/use-media-query.d.ts +4 -2
- package/dist/internal/use-media-query.js +11 -15
- package/dist/kanban.d.ts +84 -0
- package/dist/kanban.js +197 -0
- package/dist/markdown.d.ts +2 -0
- package/dist/meter.d.ts +7 -0
- package/dist/nav-link.d.ts +15 -6
- package/dist/nav-link.js +14 -4
- package/dist/next/nav-link.d.ts +6 -3
- package/dist/next/nav-link.js +8 -6
- package/dist/next/period-stepper.d.ts +11 -0
- package/dist/next/period-stepper.js +16 -0
- package/dist/next/tabs-nav-link.d.ts +6 -0
- package/dist/next/tabs-nav-link.js +8 -3
- package/dist/page-header.d.ts +19 -0
- package/dist/page-header.js +11 -0
- package/dist/pagination.d.ts +2 -0
- package/dist/period-stepper.d.ts +32 -0
- package/dist/period-stepper.js +27 -0
- package/dist/picker-shell.d.ts +33 -18
- package/dist/picker-shell.js +12 -10
- package/dist/progress.d.ts +1 -0
- package/dist/search-picker.d.ts +12 -0
- package/dist/select.d.ts +1 -0
- package/dist/skip-link.d.ts +7 -0
- package/dist/skip-link.js +10 -0
- package/dist/slider.d.ts +11 -0
- package/dist/sortable-table-head.d.ts +2 -0
- package/dist/stat-tile.d.ts +5 -0
- package/dist/table-body-skeleton.d.ts +2 -0
- package/dist/table.d.ts +1 -0
- package/dist/tabs.d.ts +27 -12
- package/dist/tabs.js +23 -10
- package/dist/toast.d.ts +7 -1
- package/dist/toggle-group.d.ts +9 -2
- package/dist/toggle-group.js +2 -1
- package/package.json +72 -6
- package/skills/atlas-react-kit/SKILL.md +46 -40
- package/theme.css +13 -0
|
@@ -42,10 +42,9 @@ root (or a `dark` class on an ancestor). Toasts need one `<Toaster />` from
|
|
|
42
42
|
`atlas-react-kit/toast`; show them with `toast()` from the same module, using
|
|
43
43
|
only the options it declares. Never import a toast library such as `sonner`
|
|
44
44
|
directly: the kit owns the toast API, and a second copy never reaches its
|
|
45
|
-
toaster.
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
around unstyled components.
|
|
45
|
+
toaster. Some entry points need optional peers; install the extras from the
|
|
46
|
+
"Optional peer dependencies" table in `COMPONENTS.md` when you import them.
|
|
47
|
+
Fix missing setup rather than working around unstyled components.
|
|
49
48
|
|
|
50
49
|
## 3. Pick the kit component for the job
|
|
51
50
|
|
|
@@ -53,42 +52,49 @@ Import each component from its subpath, e.g.
|
|
|
53
52
|
`import { Button } from "atlas-react-kit/button"`. There is no root barrel, and
|
|
54
53
|
`dist/` or `internal/` paths are not public API.
|
|
55
54
|
|
|
56
|
-
| Need
|
|
57
|
-
|
|
|
58
|
-
| Short fixed list (a handful of options)
|
|
59
|
-
| Long or searchable list (timezones, currencies)
|
|
60
|
-
| Always-visible searchable list (places)
|
|
61
|
-
| One date, or a from/to range
|
|
62
|
-
| Date and time (not `datetime-local`)
|
|
63
|
-
| Labelled field with error text
|
|
64
|
-
|
|
|
65
|
-
|
|
|
66
|
-
|
|
|
67
|
-
|
|
|
68
|
-
|
|
|
69
|
-
|
|
|
70
|
-
|
|
|
71
|
-
|
|
|
72
|
-
|
|
|
73
|
-
|
|
|
74
|
-
|
|
|
75
|
-
|
|
|
76
|
-
|
|
|
77
|
-
|
|
|
78
|
-
|
|
|
79
|
-
|
|
|
80
|
-
|
|
|
81
|
-
|
|
|
82
|
-
|
|
|
83
|
-
|
|
|
84
|
-
|
|
|
85
|
-
|
|
|
86
|
-
|
|
|
87
|
-
|
|
|
88
|
-
|
|
|
89
|
-
|
|
|
90
|
-
|
|
|
91
|
-
|
|
|
55
|
+
| Need | Use |
|
|
56
|
+
| ---------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
|
|
57
|
+
| Short fixed list (a handful of options) | `Select` family from `select` |
|
|
58
|
+
| Long or searchable list (timezones, currencies) | `Combobox` from `combobox` with `{ value, label }[]` options; set `creatable` to invent a value the catalog lacks |
|
|
59
|
+
| Always-visible searchable list (places) | `SearchPicker` from `search-picker` |
|
|
60
|
+
| One date, or a from/to range | `DatePickerButton` from `date-picker` (`mode="range"` for ranges) |
|
|
61
|
+
| Date and time (not `datetime-local`) | `DateTimePickerButton` from `date-time-picker` |
|
|
62
|
+
| Labelled field with error text | `FormTextField`, `FormSelectField`, `FormDatePickerField`, `FormDateTimePickerField`, `FormMarkdownField` from `form/*` |
|
|
63
|
+
| Checkbox, checkbox group, toggle group, combobox in a form | `FormCheckboxField`, `FormCheckboxGroupField`, `FormToggleGroupField`, `FormComboboxField` from `form/*` |
|
|
64
|
+
| Custom control the kit has no form field for | `FormControlField` from `form/control-field` |
|
|
65
|
+
| Form-level error (save failed) | `FormFeedbackField` from `form/feedback-field` |
|
|
66
|
+
| Content panels on one page | `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent` from `tabs` |
|
|
67
|
+
| View switch that changes the URL | `TabsNav` with `TabsNavLink` from `tabs` (`asChild` for a router link); Next: `next/tabs-nav-link` |
|
|
68
|
+
| App shell nav (Calendar, Tasks, Settings) | `NavLink` from `nav-link` (`asChild` for a router link); Next: `next/nav-link`; `active={isNavActive(pathname, href)}` |
|
|
69
|
+
| Focus the first invalid field when a submit fails | `focusFirstInvalid(formId)` from `form/focus-first-invalid`; give fields `id={field.name}` |
|
|
70
|
+
| Skip-to-content link | `SkipLink` from `skip-link` |
|
|
71
|
+
| Page title row with actions | `PageHeader` from `page-header` |
|
|
72
|
+
| Previous / today / next period | `PeriodStepper` from `period-stepper`; `next/period-stepper` for URL periods |
|
|
73
|
+
| Cards in columns that drag | `KanbanBoard` from `kanban`; `KanbanSkeleton` while loading |
|
|
74
|
+
| SVG chart axes, grid, tooltip, legend | `chart` helpers (`chartFrame`, `ChartYAxisGrid`, `ChartTooltip`, `ChartLegend`) |
|
|
75
|
+
| Status chip (paid, pending, failed) | `Badge variant="soft"` with `tone="success"`, `"warning"`, `"destructive"`, or `"neutral"` |
|
|
76
|
+
| Data table | `Table` family from `table`; `SortableTableHead`; `TableBodySkeleton` while loading |
|
|
77
|
+
| Nothing to show yet | `EmptyPanel` from `empty-panel` |
|
|
78
|
+
| Grouped content | `Card` family from `card`; `<Card flush>` for an edge-to-edge table or list |
|
|
79
|
+
| Modal | `Dialog` family from `dialog` |
|
|
80
|
+
| Label for an icon button, or a short hint | `Tooltip` from `tooltip`; keep `aria-label` on icon buttons |
|
|
81
|
+
| Longer help from a glyph | `InfoTip` / `InlineTip` from `info-tip` (not `Tooltip`) |
|
|
82
|
+
| Color scale key | `ColorLegend` from `color-legend` |
|
|
83
|
+
| GitHub-flavoured Markdown | `Markdown` from `markdown`; write/preview with `FormMarkdownField` |
|
|
84
|
+
| Summary figure in a strip | `StatTile` from `stat-tile` (`statTileGrid`, `sectionLabel`) |
|
|
85
|
+
| Value against a scale, optional ticks | `Meter` from `meter` (not `Progress`) |
|
|
86
|
+
| Number on a continuous scale | `Slider` from `slider` |
|
|
87
|
+
| Row actions or an overflow menu of commands | `DropdownMenu` family from `dropdown-menu` |
|
|
88
|
+
| Setting that applies immediately | `Switch` from `switch`; `Checkbox` for choices submitted with a form |
|
|
89
|
+
| One choice from a few visible options | `RadioGroup` and `RadioGroupItem` from `radio-group` |
|
|
90
|
+
| Inline message about a page or section | `Alert` from `alert` (`success`, `warning`, `destructive` variants) |
|
|
91
|
+
| Person or workspace image | `Avatar`, `AvatarImage`, `AvatarFallback` from `avatar` |
|
|
92
|
+
| Sections that expand in place | `Accordion` family from `accordion` |
|
|
93
|
+
| Pages of a long list | `Pagination` family from `pagination` |
|
|
94
|
+
| Where the page sits in a hierarchy | `Breadcrumb` family from `breadcrumb` |
|
|
95
|
+
| Work in progress | `Progress` from `progress` when the percent is known, else `Spinner` from `spinner` |
|
|
96
|
+
| Crash recovery around a section | `ErrorBoundary` from `error-boundary` |
|
|
97
|
+
| Conditional classes | `cn` from `utils` |
|
|
92
98
|
|
|
93
99
|
If nothing fits, build the piece in the app from kit primitives and semantic
|
|
94
100
|
tokens. Do not copy kit source into the app; a missing shared component belongs
|
package/theme.css
CHANGED
|
@@ -90,6 +90,7 @@
|
|
|
90
90
|
}
|
|
91
91
|
|
|
92
92
|
:root {
|
|
93
|
+
color-scheme: light;
|
|
93
94
|
--background: oklch(1 0 0);
|
|
94
95
|
--foreground: oklch(0.145 0 0);
|
|
95
96
|
--card: oklch(1 0 0);
|
|
@@ -142,6 +143,7 @@
|
|
|
142
143
|
}
|
|
143
144
|
|
|
144
145
|
.dark {
|
|
146
|
+
color-scheme: dark;
|
|
145
147
|
--background: oklch(0.145 0 0);
|
|
146
148
|
--foreground: oklch(0.985 0 0);
|
|
147
149
|
--card: oklch(0.205 0 0);
|
|
@@ -197,6 +199,17 @@
|
|
|
197
199
|
* Radix can unmount closing overlays. `!important` in this early layer
|
|
198
200
|
* beats the utility classes that set the animations.
|
|
199
201
|
*/
|
|
202
|
+
/*
|
|
203
|
+
* Forced colors (Windows High Contrast) drop box-shadow, which is how the
|
|
204
|
+
* kit draws its focus ring, so keyboard focus would vanish. Draw it as a
|
|
205
|
+
* system-colored outline there instead (WCAG 2.4.7).
|
|
206
|
+
*/
|
|
207
|
+
@media (forced-colors: active) {
|
|
208
|
+
:focus-visible {
|
|
209
|
+
outline: 2px solid Highlight !important;
|
|
210
|
+
outline-offset: 2px !important;
|
|
211
|
+
}
|
|
212
|
+
}
|
|
200
213
|
@media (prefers-reduced-motion: reduce) {
|
|
201
214
|
*,
|
|
202
215
|
::before,
|