@assure-one/design-system 1.35.0 → 1.36.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/README.md +52 -0
- package/codemods/README.md +102 -12
- package/codemods/lib/registry.mjs +3 -0
- package/codemods/transforms/cm-07-input-size.mjs +104 -0
- package/codemods/transforms/cm-08-search-select-to-combobox.mjs +236 -0
- package/codemods/transforms/cm-10-date-picker-value-change.mjs +416 -0
- package/codemods/transforms/cm-14-hidden-mirrors.mjs +2 -2
- package/dist/css/components.css +1 -1
- package/dist/design-system-provider-cPUklDJv.d.ts +220 -0
- package/dist/icons/index.d.ts +2 -2
- package/dist/{index-B3OiMlQv.d.ts → index-CQwzTm0v.d.ts} +1 -1
- package/dist/index.d.ts +2011 -399
- package/dist/index.js +8859 -5262
- package/dist/index.js.map +1 -1
- package/dist/next/index.d.ts +20 -0
- package/dist/next/index.js +16 -0
- package/dist/next/index.js.map +1 -0
- package/dist/styles.css +1 -1
- package/dist/{system-lyhOUTpa.d.ts → system-BDU18fVg.d.ts} +1 -1
- package/dist/testing/index.cjs +133 -11
- package/dist/testing/index.d.cts +98 -2
- package/dist/testing/index.d.ts +98 -2
- package/dist/testing/index.js +132 -12
- package/dist/tokens/index.d.ts +1 -1
- package/docs/components.md +601 -0
- package/docs/components.registry.json +1586 -0
- package/docs/for-ai-agents.md +153 -0
- package/package.json +15 -3
|
@@ -0,0 +1,220 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ComponentType, AnchorHTMLAttributes, Ref, ReactNode, ImgHTMLAttributes } from 'react';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* L0 foundation (W5-20, ADR-010). The typed messages catalogue every
|
|
6
|
+
* design-system component reads its generic strings from (target architecture
|
|
7
|
+
* §38): accessibility and micro-copy with a universal meaning — Clear, No
|
|
8
|
+
* results, Loading, optional — never product copy, which is always the
|
|
9
|
+
* consumer's (`children`, `label`, `placeholder`).
|
|
10
|
+
*
|
|
11
|
+
* The catalogue is keyed by component namespace; each namespace is the
|
|
12
|
+
* `*Messages` interface that component already accepted through its
|
|
13
|
+
* `messages` prop before the provider existed, so the resolution order is one
|
|
14
|
+
* rule everywhere: **prop > provider > English default**. A value is a string
|
|
15
|
+
* or, where a parameter is involved, a function of that parameter (no string
|
|
16
|
+
* concatenation or pluralisation inside components).
|
|
17
|
+
*
|
|
18
|
+
* The English defaults live in `./en.ts`; `./en.json` is generated from it
|
|
19
|
+
* (`pnpm messages:generate`) so translators start from the full list.
|
|
20
|
+
*/
|
|
21
|
+
/** The copy a `Select` renders. @experimental */
|
|
22
|
+
interface SelectMessages {
|
|
23
|
+
/** The accessible name of the `clearable` button. Default `"Clear selection"`. */
|
|
24
|
+
clear: string;
|
|
25
|
+
}
|
|
26
|
+
/** The copy a `SearchInput` renders. @experimental */
|
|
27
|
+
interface SearchInputMessages {
|
|
28
|
+
/** The accessible name of the clear button. Default `"Clear search"`. */
|
|
29
|
+
clear: string;
|
|
30
|
+
}
|
|
31
|
+
/** The copy a `Combobox` (and `MultiSelect`) renders. @experimental */
|
|
32
|
+
interface ComboboxMessages {
|
|
33
|
+
/** The empty state when the query matches nothing. */
|
|
34
|
+
empty: string;
|
|
35
|
+
/** The loading state while `loading`. */
|
|
36
|
+
loading: string;
|
|
37
|
+
/** The label of the create row for a query. */
|
|
38
|
+
create: (query: string) => string;
|
|
39
|
+
/** The accessible name of the clear button. */
|
|
40
|
+
clear: string;
|
|
41
|
+
/** The accessible name of the toggle button. */
|
|
42
|
+
toggle: string;
|
|
43
|
+
/** The accessible name of a chip's remove button (`multiple`). */
|
|
44
|
+
remove: (label: string) => string;
|
|
45
|
+
}
|
|
46
|
+
/**
|
|
47
|
+
* The copy a `Field` renders (target architecture §24.5).
|
|
48
|
+
*
|
|
49
|
+
* @experimental
|
|
50
|
+
*/
|
|
51
|
+
interface FieldMessages {
|
|
52
|
+
/** The indicator after the label of an optional field. Default `"optional"`, rendered in parentheses. */
|
|
53
|
+
optional: string;
|
|
54
|
+
}
|
|
55
|
+
/** The default dropzone copy a `FileUpload` renders when it has no `children`. @experimental */
|
|
56
|
+
interface FileUploadMessages {
|
|
57
|
+
/** The emphasised call to action. Default `"Click to upload"`. */
|
|
58
|
+
prompt: string;
|
|
59
|
+
/** The rest of the sentence after the prompt. Default `" or drag and drop"`. */
|
|
60
|
+
dragHint: string;
|
|
61
|
+
/** The accepted-types line; receives the `accept` list. */
|
|
62
|
+
accepted: (accept: string) => string;
|
|
63
|
+
/** The size-limit line; receives the formatted limit (e.g. `"10 MB"`). */
|
|
64
|
+
maxSize: (size: string) => string;
|
|
65
|
+
}
|
|
66
|
+
/**
|
|
67
|
+
* The whole catalogue, one namespace per component. This is the type a
|
|
68
|
+
* consumer's i18n lint can check for completeness.
|
|
69
|
+
*
|
|
70
|
+
* @experimental
|
|
71
|
+
*/
|
|
72
|
+
interface DsMessages {
|
|
73
|
+
select: SelectMessages;
|
|
74
|
+
searchInput: SearchInputMessages;
|
|
75
|
+
combobox: ComboboxMessages;
|
|
76
|
+
field: FieldMessages;
|
|
77
|
+
fileUpload: FileUploadMessages;
|
|
78
|
+
}
|
|
79
|
+
/** A component namespace of the catalogue. @experimental */
|
|
80
|
+
type DsMessageNamespace = keyof DsMessages;
|
|
81
|
+
/**
|
|
82
|
+
* What `DesignSystemProvider messages` accepts: any subset of namespaces, each
|
|
83
|
+
* any subset of its keys. Every omitted key keeps its English default.
|
|
84
|
+
*
|
|
85
|
+
* @experimental
|
|
86
|
+
*/
|
|
87
|
+
type DsMessagesOverride = {
|
|
88
|
+
[N in DsMessageNamespace]?: Partial<DsMessages[N]>;
|
|
89
|
+
};
|
|
90
|
+
|
|
91
|
+
/**
|
|
92
|
+
* L0 foundation (W5-21, ADR-010). The adapters through which the design
|
|
93
|
+
* system renders an application's router link and image component without
|
|
94
|
+
* importing them itself.
|
|
95
|
+
*
|
|
96
|
+
* `LinkButton` and `Logo` read these from `DesignSystemProvider`. Without a
|
|
97
|
+
* provider they keep their static `next/link` / `next/image` imports (C-NEXT-PEER)
|
|
98
|
+
* until 2.0, so nothing changes for a Next.js app that renders no provider;
|
|
99
|
+
* `@assure-one/design-system/next` exports a provider that passes exactly
|
|
100
|
+
* those two, and a non-Next app passes its own.
|
|
101
|
+
*/
|
|
102
|
+
/** The props a link adapter receives: a plain anchor with an `href`. @experimental */
|
|
103
|
+
interface LinkComponentProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
|
|
104
|
+
href: string;
|
|
105
|
+
ref?: Ref<HTMLAnchorElement>;
|
|
106
|
+
children?: ReactNode;
|
|
107
|
+
}
|
|
108
|
+
/**
|
|
109
|
+
* A component that renders a link — `next/link`, React Router's `Link`, or a
|
|
110
|
+
* plain `<a>`. It must forward every anchor attribute and the ref.
|
|
111
|
+
*
|
|
112
|
+
* @experimental
|
|
113
|
+
*/
|
|
114
|
+
type LinkComponent = ComponentType<LinkComponentProps>;
|
|
115
|
+
/** The props an image adapter receives: `src`, `alt` and the intrinsic size. @experimental */
|
|
116
|
+
interface ImageComponentProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "width" | "height"> {
|
|
117
|
+
src: string;
|
|
118
|
+
alt: string;
|
|
119
|
+
width: number;
|
|
120
|
+
height: number;
|
|
121
|
+
/** Load eagerly, above the fold (`next/image` `priority`). */
|
|
122
|
+
priority?: boolean;
|
|
123
|
+
}
|
|
124
|
+
/**
|
|
125
|
+
* A component that renders an image — `next/image` or a plain `<img>`.
|
|
126
|
+
*
|
|
127
|
+
* @experimental
|
|
128
|
+
*/
|
|
129
|
+
type ImageComponent = ComponentType<ImageComponentProps>;
|
|
130
|
+
|
|
131
|
+
/** Text direction the provider announces. Context only until components adopt logical properties (W5-22). @experimental */
|
|
132
|
+
type DsDirection = "ltr" | "rtl";
|
|
133
|
+
/**
|
|
134
|
+
* The resolved messages of one component namespace: the component's own
|
|
135
|
+
* `messages` prop wins over the provider's catalogue, which wins over the
|
|
136
|
+
* English default. Works without a provider (English). Stable while the three
|
|
137
|
+
* inputs are.
|
|
138
|
+
*
|
|
139
|
+
* @experimental
|
|
140
|
+
*/
|
|
141
|
+
declare function useDsMessages<N extends DsMessageNamespace>(namespace: N, override?: Partial<DsMessages[N]> | undefined): DsMessages[N];
|
|
142
|
+
|
|
143
|
+
/**
|
|
144
|
+
* Props of `DesignSystemProvider` (W5-20, ADR-010, target architecture §43).
|
|
145
|
+
*
|
|
146
|
+
* @experimental
|
|
147
|
+
*/
|
|
148
|
+
interface DesignSystemProviderProps {
|
|
149
|
+
/**
|
|
150
|
+
* Overrides for the generic strings components render (Clear, No results,
|
|
151
|
+
* optional…), by component namespace. Any subset; omitted keys keep their
|
|
152
|
+
* English default. A component's own `messages` prop still wins. The full
|
|
153
|
+
* list is `DsMessages` (and `messages/en.json` in the package source).
|
|
154
|
+
*/
|
|
155
|
+
messages?: DsMessagesOverride;
|
|
156
|
+
/**
|
|
157
|
+
* The BCP 47 tag locale-aware components format with (dates, numbers).
|
|
158
|
+
* Default `"en-US"` on the server and on the client (amendment A3): pass the
|
|
159
|
+
* locale your app already knows server-side; never `navigator.language`
|
|
160
|
+
* during render.
|
|
161
|
+
*/
|
|
162
|
+
locale?: string;
|
|
163
|
+
/** Text direction. Context only for now — components adopt logical properties in W5-22. */
|
|
164
|
+
dir?: DsDirection;
|
|
165
|
+
/**
|
|
166
|
+
* Where portalled content (dialogs, menus, tooltips) mounts. `undefined`
|
|
167
|
+
* (default) keeps Radix's `document.body`. Read by the shared Portal of the
|
|
168
|
+
* overlay primitives as they adopt it.
|
|
169
|
+
*/
|
|
170
|
+
portalContainer?: HTMLElement | null;
|
|
171
|
+
/**
|
|
172
|
+
* The application's router link, rendered by `LinkButton` and `Logo`
|
|
173
|
+
* instead of their static `next/link` import (W5-21). A Next.js app uses
|
|
174
|
+
* `NextDesignSystemProvider` from `@assure-one/design-system/next`.
|
|
175
|
+
*/
|
|
176
|
+
linkComponent?: LinkComponent;
|
|
177
|
+
/** The application's image component, rendered by `Logo` instead of its static `next/image` import. */
|
|
178
|
+
imageComponent?: ImageComponent;
|
|
179
|
+
/**
|
|
180
|
+
* Shared tooltip defaults (`delayDuration`, `skipDelayDuration`,
|
|
181
|
+
* `disableHoverableContent`) for tooltips built directly on the Radix
|
|
182
|
+
* root. `false` mounts no `TooltipProvider`. The design system's own
|
|
183
|
+
* `Tooltip` still wraps its own provider today, so it is unaffected.
|
|
184
|
+
*/
|
|
185
|
+
tooltip?: TooltipDefaults | false;
|
|
186
|
+
/**
|
|
187
|
+
* Mount the toast region (`ToastProvider`) so `useToast()` works anywhere
|
|
188
|
+
* below. Off by default: an app that already renders `ToastProvider` keeps
|
|
189
|
+
* its single region (the `aria-label="Notifications"` region consumers
|
|
190
|
+
* select on, C-TOAST-ARIALABEL, must exist exactly once).
|
|
191
|
+
*/
|
|
192
|
+
toasts?: boolean;
|
|
193
|
+
children?: ReactNode;
|
|
194
|
+
}
|
|
195
|
+
/** The Radix `TooltipProvider` props the provider forwards. @experimental */
|
|
196
|
+
interface TooltipDefaults {
|
|
197
|
+
delayDuration?: number;
|
|
198
|
+
skipDelayDuration?: number;
|
|
199
|
+
disableHoverableContent?: boolean;
|
|
200
|
+
}
|
|
201
|
+
/**
|
|
202
|
+
* The optional application-level provider of the design system (W5-20,
|
|
203
|
+
* ADR-010). Thin by design: it owns only what CSS cannot — the messages
|
|
204
|
+
* catalogue, the locale, the text direction, the portal container, the link
|
|
205
|
+
* and image adapters, shared tooltip defaults and (opt-in) the toast region.
|
|
206
|
+
* Colour scheme, brand and density stay attributes + CSS on `<html>`.
|
|
207
|
+
*
|
|
208
|
+
* Everything works identically without it: every component falls back to
|
|
209
|
+
* the English catalogue, `"en-US"`, `document.body` and its static `next/*`
|
|
210
|
+
* import. The provider renders **no DOM wrapper** (only the toast region when
|
|
211
|
+
* `toasts` is set), so it cannot cause a hydration mismatch.
|
|
212
|
+
*
|
|
213
|
+
* Reserved: the `useConfirm` / `usePrompt` host (W5-18) mounts here once it
|
|
214
|
+
* exists — see the comment in the render tree.
|
|
215
|
+
*
|
|
216
|
+
* @experimental
|
|
217
|
+
*/
|
|
218
|
+
declare function DesignSystemProvider({ messages, locale, dir, portalContainer, linkComponent, imageComponent, tooltip, toasts, children, }: DesignSystemProviderProps): react_jsx_runtime.JSX.Element;
|
|
219
|
+
|
|
220
|
+
export { type ComboboxMessages as C, type DesignSystemProviderProps as D, type FileUploadMessages as F, type ImageComponent as I, type LinkComponent as L, type SearchInputMessages as S, type TooltipDefaults as T, type SelectMessages as a, type FieldMessages as b, DesignSystemProvider as c, type DsDirection as d, type DsMessageNamespace as e, type DsMessages as f, type DsMessagesOverride as g, type ImageComponentProps as h, type LinkComponentProps as i, useDsMessages as u };
|
package/dist/icons/index.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export { A as AlertCircleIcon, a as AlertTriangleIcon, b as AlertTriangleSolidIcon, c as ArchiveIcon, d as ArrowDownIcon, e as ArrowLeftIcon, f as ArrowRightIcon, g as ArrowRightSmallIcon, h as ArrowUpIcon, i as AtSignIcon, B as BarChartIcon, j as BellIcon, k as BoldIcon, l as BrainIcon, m as BriefcaseIcon, n as Building2Icon, o as BuildingIcon, p as CalendarIcon, q as ChatBubbleIcon, r as CheckCircle2Icon, s as CheckCircleSolidIcon, t as CheckIcon, u as ChevronDownIcon, v as ChevronLeftIcon, w as ChevronRightIcon, x as ChevronUpIcon, y as ChevronsDownUpIcon, z as ChevronsUpDownIcon, D as CircleDotIcon, E as CircleIcon, F as ClipboardCheckIcon, G as ClockIcon, H as CloseIcon, J as CommandIcon, K as CopyIcon, L as CornerDownLeftIcon, M as CreditCardIcon, N as DocumentIcon, O as DollarSignIcon, P as DownloadIcon, Q as ExternalLinkIcon, R as ExtractIcon, T as EyeIcon, U as EyeOffIcon, W as FileIcon, X as FileReturnIcon, Y as FileTextIcon, Z as FilterIcon, _ as FlagIcon, $ as FolderClosedIcon, a0 as FolderOpenIcon, a1 as FolderPlusIcon, a2 as FolderUpIcon, a3 as GlobeIcon, a4 as GoogleBrandIcon, a5 as GripVerticalIcon, a6 as HelpCircleIcon, a7 as HistoryIcon, a8 as HomeIcon, a9 as IconComponent, aa as IconDefinition, ab as IconProps, ac as IconSize, ad as InboxIcon, ae as InfoCircleSolidIcon, af as InfoIcon, ag as ItalicIcon, ah as KanbanIcon, ai as KeyIcon, aj as LandmarkIcon, ak as LayersIcon, al as LayoutDashboardIcon, am as LayoutGridIcon, an as LayoutListIcon, ao as LightningIcon, ap as Link2Icon, aq as LinkIcon, ar as ListChecksIcon, as as ListIcon, at as ListOrderedIcon, au as LoaderIcon, av as LockIcon, aw as LockKeyholeIcon, ax as LockOpenIcon, ay as LogOutIcon, az as MailIcon, aA as MapPinIcon, aB as MaximizeIcon, aC as MenuIcon, aD as MessageCircleIcon, aE as MessageCircleWarningIcon, aF as MicIcon, aG as MicrosoftBrandIcon, aH as MinimizeIcon, aI as MinusIcon, aJ as MonitorIcon, aK as MoonIcon, aL as MoreHorizontalIcon, aM as MoveIcon, aN as PaletteIcon, aO as PanelLeftCloseIcon, aP as PanelLeftIcon, aQ as PanelRightIcon, aR as PaperclipIcon, aS as PauseIcon, aT as PenSignIcon, aU as PenToolIcon, aV as PencilIcon, aW as PhoneIcon, aX as PlayIcon, aY as PlusIcon, aZ as ReceiptIcon, a_ as RefreshCwIcon, a$ as ReplyIcon, b0 as RotateCcwIcon, b1 as SaveIcon, b2 as SearchIcon, b3 as SendIcon, b4 as SettingsIcon, b5 as ShieldIcon, b6 as SigmaIcon, b7 as SlashIcon, b8 as SmartphoneIcon, b9 as SparkleIcon, ba as SparklesIcon, bb as StarIcon, bc as StopIcon, bd as StrikethroughIcon, be as SunIcon, bf as TableIcon, bg as TagIcon, bh as TeamIcon, bi as ThumbsDownIcon, bj as ThumbsUpIcon, bk as TimerIcon, bl as Trash2Icon, bm as TrashIcon, bn as TrashSolidIcon, bo as TrendingDownIcon, bp as TrendingUpIcon, bq as UnderlineIcon, br as UploadIcon, bs as UserCircleIcon, bt as UserIcon, bu as UsersIcon, bv as VideoIcon, bw as Volume2Icon, bx as VolumeXIcon, by as WorkflowIcon, bz as XCircleSolidIcon, bA as XIcon, bB as ZoomInIcon, bC as ZoomOutIcon, bD as createIcon } from '../index-
|
|
2
|
-
import '../system-
|
|
1
|
+
export { A as AlertCircleIcon, a as AlertTriangleIcon, b as AlertTriangleSolidIcon, c as ArchiveIcon, d as ArrowDownIcon, e as ArrowLeftIcon, f as ArrowRightIcon, g as ArrowRightSmallIcon, h as ArrowUpIcon, i as AtSignIcon, B as BarChartIcon, j as BellIcon, k as BoldIcon, l as BrainIcon, m as BriefcaseIcon, n as Building2Icon, o as BuildingIcon, p as CalendarIcon, q as ChatBubbleIcon, r as CheckCircle2Icon, s as CheckCircleSolidIcon, t as CheckIcon, u as ChevronDownIcon, v as ChevronLeftIcon, w as ChevronRightIcon, x as ChevronUpIcon, y as ChevronsDownUpIcon, z as ChevronsUpDownIcon, D as CircleDotIcon, E as CircleIcon, F as ClipboardCheckIcon, G as ClockIcon, H as CloseIcon, J as CommandIcon, K as CopyIcon, L as CornerDownLeftIcon, M as CreditCardIcon, N as DocumentIcon, O as DollarSignIcon, P as DownloadIcon, Q as ExternalLinkIcon, R as ExtractIcon, T as EyeIcon, U as EyeOffIcon, W as FileIcon, X as FileReturnIcon, Y as FileTextIcon, Z as FilterIcon, _ as FlagIcon, $ as FolderClosedIcon, a0 as FolderOpenIcon, a1 as FolderPlusIcon, a2 as FolderUpIcon, a3 as GlobeIcon, a4 as GoogleBrandIcon, a5 as GripVerticalIcon, a6 as HelpCircleIcon, a7 as HistoryIcon, a8 as HomeIcon, a9 as IconComponent, aa as IconDefinition, ab as IconProps, ac as IconSize, ad as InboxIcon, ae as InfoCircleSolidIcon, af as InfoIcon, ag as ItalicIcon, ah as KanbanIcon, ai as KeyIcon, aj as LandmarkIcon, ak as LayersIcon, al as LayoutDashboardIcon, am as LayoutGridIcon, an as LayoutListIcon, ao as LightningIcon, ap as Link2Icon, aq as LinkIcon, ar as ListChecksIcon, as as ListIcon, at as ListOrderedIcon, au as LoaderIcon, av as LockIcon, aw as LockKeyholeIcon, ax as LockOpenIcon, ay as LogOutIcon, az as MailIcon, aA as MapPinIcon, aB as MaximizeIcon, aC as MenuIcon, aD as MessageCircleIcon, aE as MessageCircleWarningIcon, aF as MicIcon, aG as MicrosoftBrandIcon, aH as MinimizeIcon, aI as MinusIcon, aJ as MonitorIcon, aK as MoonIcon, aL as MoreHorizontalIcon, aM as MoveIcon, aN as PaletteIcon, aO as PanelLeftCloseIcon, aP as PanelLeftIcon, aQ as PanelRightIcon, aR as PaperclipIcon, aS as PauseIcon, aT as PenSignIcon, aU as PenToolIcon, aV as PencilIcon, aW as PhoneIcon, aX as PlayIcon, aY as PlusIcon, aZ as ReceiptIcon, a_ as RefreshCwIcon, a$ as ReplyIcon, b0 as RotateCcwIcon, b1 as SaveIcon, b2 as SearchIcon, b3 as SendIcon, b4 as SettingsIcon, b5 as ShieldIcon, b6 as SigmaIcon, b7 as SlashIcon, b8 as SmartphoneIcon, b9 as SparkleIcon, ba as SparklesIcon, bb as StarIcon, bc as StopIcon, bd as StrikethroughIcon, be as SunIcon, bf as TableIcon, bg as TagIcon, bh as TeamIcon, bi as ThumbsDownIcon, bj as ThumbsUpIcon, bk as TimerIcon, bl as Trash2Icon, bm as TrashIcon, bn as TrashSolidIcon, bo as TrendingDownIcon, bp as TrendingUpIcon, bq as UnderlineIcon, br as UploadIcon, bs as UserCircleIcon, bt as UserIcon, bu as UsersIcon, bv as VideoIcon, bw as Volume2Icon, bx as VolumeXIcon, by as WorkflowIcon, bz as XCircleSolidIcon, bA as XIcon, bB as ZoomInIcon, bC as ZoomOutIcon, bD as createIcon } from '../index-CQwzTm0v.js';
|
|
2
|
+
import '../system-BDU18fVg.js';
|
|
3
3
|
import 'react/jsx-runtime';
|