@cocliny/ui-library 0.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.
@@ -0,0 +1,1346 @@
1
+ import { ClassValue } from 'clsx';
2
+ export { ClassValue } from 'clsx';
3
+ import * as react from 'react';
4
+ import { CSSProperties, ElementType, PropsWithChildren, ComponentPropsWithoutRef, ComponentPropsWithRef, ReactNode, AriaAttributes, HTMLAttributes } from 'react';
5
+ import * as DialogPrimitive from '@radix-ui/react-dialog';
6
+ import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
7
+ import * as PopoverPrimitive from '@radix-ui/react-popover';
8
+ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
9
+ import * as ToastPrimitives from '@radix-ui/react-toast';
10
+ import { DayPicker, DateRange } from 'react-day-picker';
11
+ import * as react_hook_form from 'react-hook-form';
12
+ import { FieldValues, FieldPath, ControllerProps } from 'react-hook-form';
13
+ import * as LabelPrimitive from '@radix-ui/react-label';
14
+ import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
15
+ import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
16
+ import * as AccordionPrimitive from '@radix-ui/react-accordion';
17
+ import * as AvatarPrimitive from '@radix-ui/react-avatar';
18
+ import { ColumnDef } from '@tanstack/react-table';
19
+ export { ColumnDef } from '@tanstack/react-table';
20
+
21
+ /**
22
+ * `cn` — the framework's single class-composition helper.
23
+ * clsx handles conditional composition; tailwind-merge resolves conflicts so
24
+ * the LAST class wins — which is what makes every component's `className`
25
+ * prop a true override rather than a lottery.
26
+ */
27
+
28
+ declare function cn(...inputs: ClassValue[]): string;
29
+
30
+ /**
31
+ * `defineVariants` — a strongly-typed variant engine (base + variants +
32
+ * compoundVariants + defaultVariants), hand-rolled so the framework carries no
33
+ * extra runtime dependency. API mirrors the industry-standard cva shape, so
34
+ * migrating to cva later would be mechanical.
35
+ *
36
+ * @example
37
+ * const button = defineVariants({
38
+ * base: "inline-flex items-center focus-ring",
39
+ * variants: {
40
+ * intent: { primary: "bg-primary text-primary-fg", danger: "bg-danger text-danger-fg" },
41
+ * size: { sm: "h-(--ml-control-h-sm)", md: "h-(--ml-control-h-md)" },
42
+ * },
43
+ * compoundVariants: [{ intent: "danger", size: "sm", className: "font-semibold" }],
44
+ * defaultVariants: { intent: "primary", size: "md" },
45
+ * });
46
+ * button({ size: "sm" }); // → merged class string
47
+ * type ButtonVariantProps = VariantProps<typeof button>;
48
+ */
49
+
50
+ type VariantsSchema = Record<string, Record<string, ClassValue>>;
51
+ type BooleanIfBoolKeys<TMap> = "true" extends keyof TMap ? boolean : never;
52
+ type VariantSelection<TVariants extends VariantsSchema> = {
53
+ [K in keyof TVariants]?: keyof TVariants[K] | BooleanIfBoolKeys<TVariants[K]>;
54
+ };
55
+ type CompoundVariant<TVariants extends VariantsSchema> = VariantSelection<TVariants> & {
56
+ className: ClassValue;
57
+ };
58
+ interface VariantsConfig<TVariants extends VariantsSchema> {
59
+ base?: ClassValue;
60
+ variants: TVariants;
61
+ compoundVariants?: ReadonlyArray<CompoundVariant<TVariants>>;
62
+ defaultVariants?: VariantSelection<TVariants>;
63
+ }
64
+ type VariantFn<TVariants extends VariantsSchema> = (selection?: VariantSelection<TVariants> & {
65
+ className?: ClassValue;
66
+ }) => string;
67
+ /** Extracts the props type of a variant function for reuse in component props. */
68
+ type VariantProps<T> = T extends VariantFn<infer V> ? VariantSelection<V> : never;
69
+ declare function defineVariants<TVariants extends VariantsSchema>(config: VariantsConfig<TVariants>): VariantFn<TVariants>;
70
+
71
+ /**
72
+ * Shared vocabulary types used across every component's public API.
73
+ * Keeping these in one module guarantees the whole framework speaks the same
74
+ * language for sizes, intents, radii, and density.
75
+ */
76
+
77
+ /** Standard component size scale. Components may support a subset. */
78
+ type Size = "xs" | "sm" | "md" | "lg" | "xl";
79
+ /** Semantic intent — maps 1:1 onto the semantic color tokens. */
80
+ type Intent = "neutral" | "primary" | "success" | "warning" | "danger" | "info";
81
+ /** Corner radius scale — maps onto the --radius-* tokens. */
82
+ type Radius = "xs" | "sm" | "md" | "lg" | "xl" | "pill";
83
+ /** Layout density — maps onto [data-density]. */
84
+ type Density = "comfortable" | "compact";
85
+ /** Color scheme selection. `system` follows prefers-color-scheme. */
86
+ type ColorScheme = "light" | "dark" | "system";
87
+ /** A concrete, resolved scheme (never `system`). */
88
+ type ResolvedColorScheme = Exclude<ColorScheme, "system">;
89
+ /**
90
+ * Props every framework component accepts. Spread `...rest` is additionally
91
+ * allowed per component, but these are guaranteed everywhere.
92
+ */
93
+ interface CommonProps {
94
+ /** Extra classes, merged override-safe (consumer classes win). */
95
+ className?: string;
96
+ /** Inline style escape hatch. */
97
+ style?: CSSProperties;
98
+ id?: string;
99
+ /** Stable hook for tests and analytics. */
100
+ "data-testid"?: string;
101
+ }
102
+
103
+ /**
104
+ * Polymorphic component machinery: strongly-typed `as` prop support so
105
+ * components like <Text as="label" htmlFor=…> get full IntelliSense for the
106
+ * rendered element's attributes, with `ref` typed to match.
107
+ */
108
+
109
+ type AsProp<C extends ElementType> = {
110
+ /** Element or component to render as. */
111
+ as?: C;
112
+ };
113
+ type OmitConflicts<C extends ElementType, P> = keyof (AsProp<C> & P);
114
+ /** Public props of a polymorphic component (no ref). */
115
+ type PolymorphicProps<C extends ElementType, P = object> = PropsWithChildren<P & AsProp<C>> & Omit<ComponentPropsWithoutRef<C>, OmitConflicts<C, P>>;
116
+ /** Correctly-typed ref for the rendered element. */
117
+ type PolymorphicRef<C extends ElementType> = ComponentPropsWithRef<C>["ref"];
118
+ /** Props of a polymorphic component including its ref. */
119
+ type PolymorphicPropsWithRef<C extends ElementType, P = object> = PolymorphicProps<C, P> & {
120
+ ref?: PolymorphicRef<C>;
121
+ };
122
+
123
+ /**
124
+ * Slot & render-hook typing. Complex components expose named slots; consumers
125
+ * override per-slot classes/styles without touching framework code, and can
126
+ * replace whole regions through render hooks.
127
+ */
128
+
129
+ /** Per-slot className overrides, e.g. `classNames={{ root: "…", header: "…" }}`. */
130
+ type SlotClassNames<TSlot extends string> = Partial<Record<TSlot, string>>;
131
+ /** Per-slot inline-style overrides. */
132
+ type SlotStyles<TSlot extends string> = Partial<Record<TSlot, CSSProperties>>;
133
+ /**
134
+ * A render hook: receives the default node plus the component's context, and
135
+ * returns what to actually render. Returning `defaultNode` unchanged keeps the
136
+ * built-in rendering, so hooks compose with zero cost when unused.
137
+ */
138
+ type RenderHook<TContext = void> = (defaultNode: ReactNode, context: TContext) => ReactNode;
139
+ /** Standard slot-override props for components with named slots. */
140
+ interface SlottableProps<TSlot extends string> {
141
+ /** Class overrides per named slot. Merged override-safe after framework classes. */
142
+ classNames?: SlotClassNames<TSlot>;
143
+ /** Inline-style overrides per named slot. */
144
+ styles?: SlotStyles<TSlot>;
145
+ }
146
+
147
+ /**
148
+ * Typed mirror of the semantic token surface declared in styles/index.css.
149
+ * `ThemeOverrides` is the public rebranding API: every key maps to one --ml-*
150
+ * CSS variable. Adding a token means adding it in exactly two places — the
151
+ * CSS `:root` block and this map — and the type system covers the rest.
152
+ */
153
+ /** Semantic token name → CSS custom-property it controls. */
154
+ declare const TOKEN_CSS_VARS: {
155
+ readonly background: "--ml-background";
156
+ readonly surface: "--ml-surface";
157
+ readonly surfaceRaised: "--ml-surface-raised";
158
+ readonly surfaceSunken: "--ml-surface-sunken";
159
+ readonly overlay: "--ml-overlay";
160
+ readonly border: "--ml-border";
161
+ readonly borderStrong: "--ml-border-strong";
162
+ readonly fg: "--ml-fg";
163
+ readonly fgMuted: "--ml-fg-muted";
164
+ readonly fgSubtle: "--ml-fg-subtle";
165
+ readonly fgDisabled: "--ml-fg-disabled";
166
+ readonly fgInverted: "--ml-fg-inverted";
167
+ readonly primary: "--ml-primary";
168
+ readonly primaryHover: "--ml-primary-hover";
169
+ readonly primaryActive: "--ml-primary-active";
170
+ readonly primaryFg: "--ml-primary-fg";
171
+ readonly primarySubtle: "--ml-primary-subtle";
172
+ readonly primarySubtleFg: "--ml-primary-subtle-fg";
173
+ readonly success: "--ml-success";
174
+ readonly successFg: "--ml-success-fg";
175
+ readonly successSubtle: "--ml-success-subtle";
176
+ readonly successSubtleFg: "--ml-success-subtle-fg";
177
+ readonly warning: "--ml-warning";
178
+ readonly warningFg: "--ml-warning-fg";
179
+ readonly warningSubtle: "--ml-warning-subtle";
180
+ readonly warningSubtleFg: "--ml-warning-subtle-fg";
181
+ readonly danger: "--ml-danger";
182
+ readonly dangerFg: "--ml-danger-fg";
183
+ readonly dangerSubtle: "--ml-danger-subtle";
184
+ readonly dangerSubtleFg: "--ml-danger-subtle-fg";
185
+ readonly info: "--ml-info";
186
+ readonly infoFg: "--ml-info-fg";
187
+ readonly infoSubtle: "--ml-info-subtle";
188
+ readonly infoSubtleFg: "--ml-info-subtle-fg";
189
+ readonly focusRing: "--ml-focus-ring";
190
+ readonly focusRingWidth: "--ml-focus-ring-width";
191
+ readonly focusRingOffset: "--ml-focus-ring-offset";
192
+ readonly durationFast: "--ml-duration-fast";
193
+ readonly durationNormal: "--ml-duration-normal";
194
+ readonly durationSlow: "--ml-duration-slow";
195
+ };
196
+ /** All override-able semantic token names. */
197
+ type ThemeToken = keyof typeof TOKEN_CSS_VARS;
198
+ /** Per-token value overrides (any valid CSS value for that property). */
199
+ type TokenValues = Partial<Record<ThemeToken, string>>;
200
+ /**
201
+ * Rebranding payload accepted by ThemeProvider. `light` applies to :root,
202
+ * `dark` to [data-theme="dark"]; `common` applies to both.
203
+ */
204
+ interface ThemeOverrides {
205
+ common?: TokenValues;
206
+ light?: TokenValues;
207
+ dark?: TokenValues;
208
+ }
209
+
210
+ /**
211
+ * Serialization of ThemeOverrides into CSS. Pure — unit-testable and usable
212
+ * server-side (the ThemeProvider renders the result into a <style> tag, so
213
+ * SSR output already carries the brand with no flash of default theme).
214
+ */
215
+
216
+ /**
217
+ * Builds the stylesheet text for a set of overrides. Scoped under a selector
218
+ * (default `:root`) so multiple branded regions can coexist if ever needed.
219
+ */
220
+ declare function themeOverridesToCss(overrides: ThemeOverrides, scope?: string): string;
221
+
222
+ interface ThemeContextValue {
223
+ /** The selected scheme, possibly `system`. */
224
+ colorScheme: ColorScheme;
225
+ /** The scheme actually in effect (system resolved). */
226
+ resolvedColorScheme: ResolvedColorScheme;
227
+ setColorScheme: (scheme: ColorScheme) => void;
228
+ density: Density;
229
+ setDensity: (density: Density) => void;
230
+ }
231
+ interface ThemeProviderProps {
232
+ children: ReactNode;
233
+ /** Initial scheme when nothing is persisted. @default "system" */
234
+ defaultColorScheme?: ColorScheme;
235
+ /** Initial density. @default "comfortable" */
236
+ defaultDensity?: Density;
237
+ /** Brand token overrides — the rebranding API. */
238
+ overrides?: ThemeOverrides;
239
+ /**
240
+ * localStorage key for the persisted scheme; pass `null` to disable
241
+ * persistence entirely. @default "ml-color-scheme"
242
+ */
243
+ storageKey?: string | null;
244
+ }
245
+ declare function ThemeProvider({ children, defaultColorScheme, defaultDensity, overrides, storageKey, }: ThemeProviderProps): react.JSX.Element;
246
+ /** Access the theme runtime. Throws outside a ThemeProvider. */
247
+ declare function useTheme(): ThemeContextValue;
248
+ /**
249
+ * Inline script for the document <head> that applies the persisted (or
250
+ * system) scheme BEFORE first paint, eliminating theme flash on SSR pages:
251
+ *
252
+ * ```tsx
253
+ * <script dangerouslySetInnerHTML={{ __html: getThemeInitScript() }} />
254
+ * ```
255
+ */
256
+ declare function getThemeInitScript(storageKey?: string): string;
257
+
258
+ type TextSize = "xs" | "sm" | "md" | "lg" | "xl";
259
+ type TextWeight = "regular" | "medium" | "semibold" | "bold";
260
+ type TextTone = "default" | "muted" | "subtle" | "disabled" | "danger" | "success" | "inverted";
261
+ type TextAlign = "left" | "center" | "right";
262
+ interface TextOwnProps {
263
+ size?: TextSize;
264
+ weight?: TextWeight;
265
+ tone?: TextTone;
266
+ align?: TextAlign;
267
+ /** Single-line ellipsis truncation. */
268
+ truncate?: boolean;
269
+ className?: string;
270
+ }
271
+ type TextProps<C extends ElementType = "span"> = PolymorphicProps<C, TextOwnProps>;
272
+
273
+ /**
274
+ * Polymorphic text primitive — the base of the typography system. Renders a
275
+ * <span> by default; any element/component via `as` with full prop typing.
276
+ *
277
+ * @example
278
+ * <Text size="sm" tone="muted" truncate>{patient.summary}</Text>
279
+ * <Text as="label" htmlFor="dob" weight="semibold">Date of birth</Text>
280
+ */
281
+ declare function Text<C extends ElementType = "span">(props: TextProps<C>): react.JSX.Element;
282
+
283
+ type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
284
+ type HeadingSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
285
+ interface HeadingOwnProps {
286
+ /** Semantic heading level (h1–h6). Visual size is independent via `size`. */
287
+ level?: HeadingLevel;
288
+ /** Visual size, decoupled from the semantic level. */
289
+ size?: HeadingSize;
290
+ className?: string;
291
+ }
292
+ type HeadingProps<C extends ElementType = "h2"> = PolymorphicProps<C, HeadingOwnProps>;
293
+ /**
294
+ * Semantic heading with size decoupled from level — correct document outline
295
+ * without giant fonts (e.g. `level={2} size="sm"` for a card title).
296
+ */
297
+ declare function Heading<C extends ElementType = "h2">(props: HeadingProps<C>): react.JSX.Element;
298
+
299
+ interface LabelProps extends ComponentPropsWithoutRef<"label"> {
300
+ /** Renders a required marker (with sr-only text for screen readers). */
301
+ required?: boolean;
302
+ }
303
+ /** Form label with consistent weight/size and an accessible required marker. */
304
+ declare function Label({ required, className, children, ...rest }: LabelProps): react.JSX.Element;
305
+
306
+ interface CodeProps extends ComponentPropsWithoutRef<"code"> {
307
+ /** Render as a block (<pre><code>) instead of inline. */
308
+ block?: boolean;
309
+ }
310
+ /** Inline code chip, or a scrollable code block with `block`. */
311
+ declare function Code({ block, className, children, ...rest }: CodeProps): react.JSX.Element;
312
+
313
+ interface LinkOwnProps {
314
+ variant?: "default" | "underline" | "inherit";
315
+ className?: string;
316
+ }
317
+ type LinkProps<C extends ElementType = "a"> = PolymorphicProps<C, LinkOwnProps>;
318
+ /**
319
+ * Anchor styling over any link implementation. Framework-agnostic by design:
320
+ * pass your router's component via `as` (e.g. `as={NextLink}`) — the framework
321
+ * never owns routing.
322
+ */
323
+ declare function Link<C extends ElementType = "a">(props: LinkProps<C>): react.JSX.Element;
324
+
325
+ type ButtonVariant = "solid" | "outline" | "ghost" | "subtle";
326
+ type ButtonIntent = "primary" | "neutral" | "success" | "warning" | "danger";
327
+ type ButtonSize = "sm" | "md" | "lg";
328
+ interface ButtonProps extends ComponentPropsWithoutRef<"button"> {
329
+ variant?: ButtonVariant;
330
+ intent?: ButtonIntent;
331
+ size?: ButtonSize;
332
+ /** Shows a spinner, sets aria-busy, and blocks activation. */
333
+ loading?: boolean;
334
+ /** Icon before the label. Sized by the button. */
335
+ startIcon?: ReactNode;
336
+ /** Icon after the label. */
337
+ endIcon?: ReactNode;
338
+ /** Stretch to the container width. */
339
+ fullWidth?: boolean;
340
+ }
341
+
342
+ /**
343
+ * The framework button. Variant (fill treatment) × intent (semantic color) ×
344
+ * size (density-aware height). `loading` swaps the start icon for a spinner,
345
+ * sets aria-busy, and blocks activation while keeping the label visible —
346
+ * layout never jumps.
347
+ *
348
+ * @example
349
+ * <Button intent="danger" variant="outline" onClick={onDelete}>Delete</Button>
350
+ * <Button loading={saving} onClick={onSave}>Save changes</Button>
351
+ */
352
+ declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
353
+
354
+ interface IconButtonProps extends Omit<ButtonProps, "startIcon" | "endIcon" | "children" | "fullWidth"> {
355
+ /** The icon to render. */
356
+ icon: ReactNode;
357
+ /** REQUIRED accessible name — icon-only controls are invisible to AT without it. */
358
+ "aria-label": string;
359
+ }
360
+ /**
361
+ * Square icon-only button. Reuses every Button variant/intent/size; the
362
+ * accessible name is enforced at the type level.
363
+ */
364
+ declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<HTMLButtonElement>>;
365
+
366
+ interface ButtonGroupProps extends ComponentPropsWithoutRef<"div"> {
367
+ /** Accessible name for the group. */
368
+ "aria-label": string;
369
+ }
370
+ /**
371
+ * Visually joins adjacent buttons into one segmented control: inner corners
372
+ * squared, borders collapsed. Works with any Button variant.
373
+ */
374
+ declare function ButtonGroup({ className, children, ...rest }: ButtonGroupProps): react.JSX.Element;
375
+
376
+ interface SpinnerProps {
377
+ size?: "xs" | "sm" | "md" | "lg";
378
+ /**
379
+ * Accessible label. Pass null ONLY when a parent already announces loading
380
+ * (e.g. a button with aria-busy) — the spinner is then presentation-only.
381
+ */
382
+ label?: string | null;
383
+ className?: string;
384
+ }
385
+ /** Indeterminate activity indicator. Inherits color from its context. */
386
+ declare function Spinner({ size, label, className }: SpinnerProps): react.JSX.Element;
387
+
388
+ interface SkeletonProps extends ComponentPropsWithoutRef<"div"> {
389
+ /** Shape preset. `text` renders at 1em so it matches surrounding line-height. */
390
+ variant?: "rect" | "text" | "circle";
391
+ }
392
+ /**
393
+ * Loading placeholder. aria-hidden by design: pair the REGION with aria-busy
394
+ * on the container so screen readers hear one busy state, not N skeletons.
395
+ */
396
+ declare function Skeleton({ variant, className, ...rest }: SkeletonProps): react.JSX.Element;
397
+
398
+ type AlertIntent = "info" | "success" | "warning" | "danger";
399
+ interface AlertProps extends Omit<ComponentPropsWithoutRef<"div">, "title"> {
400
+ intent?: AlertIntent;
401
+ /** Bold first line. */
402
+ title?: ReactNode;
403
+ /** Leading icon slot. */
404
+ icon?: ReactNode;
405
+ /** Trailing actions slot (buttons, dismiss). */
406
+ actions?: ReactNode;
407
+ }
408
+ /**
409
+ * Inline callout for statuses and outcomes. Danger/warning announce
410
+ * assertively (role=alert); info/success use role=status.
411
+ */
412
+ declare function Alert({ intent, title, icon, actions, className, children, ...rest }: AlertProps): react.JSX.Element;
413
+
414
+ interface ProgressProps extends Omit<ComponentPropsWithoutRef<"div">, "role"> {
415
+ /** Current value; omit for indeterminate. */
416
+ value?: number;
417
+ max?: number;
418
+ /** Accessible name for the bar. */
419
+ "aria-label": string;
420
+ size?: "sm" | "md";
421
+ }
422
+ /** Determinate/indeterminate progress bar with correct progressbar semantics. */
423
+ declare function Progress({ value, max, size, className, ...rest }: ProgressProps): react.JSX.Element;
424
+
425
+ interface StatusIndicatorProps extends ComponentPropsWithoutRef<"span"> {
426
+ intent?: Intent;
427
+ /** Hide the leading color dot. */
428
+ withDot?: boolean;
429
+ }
430
+ /**
431
+ * Semantic status pill (tinted fill + matching text + color dot) — the
432
+ * standard rendering for workflow states across clinical tables and headers.
433
+ */
434
+ declare function StatusIndicator({ intent, withDot, className, children, ...rest }: StatusIndicatorProps): react.JSX.Element;
435
+
436
+ interface EmptyStateProps extends Omit<ComponentPropsWithoutRef<"div">, "title"> {
437
+ /** One-line headline ("No sessions yet"). */
438
+ title: ReactNode;
439
+ /** Supporting copy explaining why / what to do next. */
440
+ description?: ReactNode;
441
+ /** Illustration / icon slot. */
442
+ icon?: ReactNode;
443
+ /** Call-to-action slot (typically a Button). */
444
+ actions?: ReactNode;
445
+ }
446
+ /** Centered empty-state block for lists, tables, and panels with no data. */
447
+ declare function EmptyState({ title, description, icon, actions, className, ...rest }: EmptyStateProps): react.JSX.Element;
448
+ /** ErrorState — EmptyState preset for failed loads. role=alert announces it. */
449
+ declare function ErrorState(props: EmptyStateProps): react.JSX.Element;
450
+ /** SuccessState — EmptyState preset for completed flows. */
451
+ declare function SuccessState(props: EmptyStateProps): react.JSX.Element;
452
+
453
+ interface LoadingOverlayProps extends ComponentPropsWithoutRef<"div"> {
454
+ /** Overlay renders (and blocks interaction) only while true. */
455
+ visible: boolean;
456
+ /** Accessible + visible loading text. */
457
+ label?: string;
458
+ }
459
+ /**
460
+ * Absolute overlay that dims and blocks its nearest positioned ancestor while
461
+ * `visible` — wrap the region in `relative`. Content stays mounted (no layout
462
+ * loss), which is the right pattern for refresh-in-place.
463
+ */
464
+ declare function LoadingOverlay({ visible, label, className, ...rest }: LoadingOverlayProps): react.JSX.Element | null;
465
+
466
+ declare const Dialog: react.FC<DialogPrimitive.DialogProps>;
467
+ declare const DialogTrigger: react.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
468
+ declare const DialogPortal: react.FC<DialogPrimitive.DialogPortalProps>;
469
+ declare const DialogClose: react.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
470
+ declare const DialogOverlay: react.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
471
+ declare const DialogContent: react.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
472
+ declare const DialogHeader: {
473
+ ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react.JSX.Element;
474
+ displayName: string;
475
+ };
476
+ declare const DialogFooter: {
477
+ ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react.JSX.Element;
478
+ displayName: string;
479
+ };
480
+ declare const DialogTitle: react.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & react.RefAttributes<HTMLHeadingElement>, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
481
+ declare const DialogDescription: react.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
482
+
483
+ /**
484
+ * Drawer — a modal panel that slides in from an edge of the viewport.
485
+ * Built on the same Radix Dialog behavior as `Dialog` (focus trap, Escape,
486
+ * overlay dismiss, aria-modal); only the presentation differs. Use it for
487
+ * mobile navigation, filter panels, and quick-look records.
488
+ */
489
+ declare const Drawer: react.FC<DialogPrimitive.DialogProps>;
490
+ declare const DrawerTrigger: react.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
491
+ declare const DrawerPortal: react.FC<DialogPrimitive.DialogPortalProps>;
492
+ declare const DrawerClose: react.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
493
+ declare const DrawerOverlay: react.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
494
+ declare const drawerContent: VariantFn<{
495
+ side: {
496
+ left: string;
497
+ right: string;
498
+ top: string;
499
+ bottom: string;
500
+ };
501
+ }>;
502
+ interface DrawerContentProps extends ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof drawerContent> {
503
+ /** Hide the built-in close button (e.g. when the content provides its own). */
504
+ hideCloseButton?: boolean;
505
+ }
506
+ declare const DrawerContent: react.ForwardRefExoticComponent<DrawerContentProps & react.RefAttributes<HTMLDivElement>>;
507
+ declare const DrawerHeader: {
508
+ ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react.JSX.Element;
509
+ displayName: string;
510
+ };
511
+ declare const DrawerFooter: {
512
+ ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react.JSX.Element;
513
+ displayName: string;
514
+ };
515
+ declare const DrawerTitle: react.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & react.RefAttributes<HTMLHeadingElement>, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
516
+ declare const DrawerDescription: react.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
517
+
518
+ declare const AlertDialog: react.FC<AlertDialogPrimitive.AlertDialogProps>;
519
+ declare const AlertDialogTrigger: react.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
520
+ declare const AlertDialogPortal: react.FC<AlertDialogPrimitive.AlertDialogPortalProps>;
521
+ declare const AlertDialogOverlay: react.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
522
+ declare const AlertDialogContent: react.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
523
+ declare const AlertDialogHeader: {
524
+ ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react.JSX.Element;
525
+ displayName: string;
526
+ };
527
+ declare const AlertDialogFooter: {
528
+ ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react.JSX.Element;
529
+ displayName: string;
530
+ };
531
+ declare const AlertDialogTitle: react.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & react.RefAttributes<HTMLHeadingElement>, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
532
+ declare const AlertDialogDescription: react.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
533
+ declare const AlertDialogAction: react.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
534
+ declare const AlertDialogCancel: react.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
535
+
536
+ declare const Popover: react.FC<PopoverPrimitive.PopoverProps>;
537
+ declare const PopoverTrigger: react.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & react.RefAttributes<HTMLButtonElement>>;
538
+ declare const PopoverAnchor: react.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & react.RefAttributes<HTMLDivElement>>;
539
+ declare const PopoverContent: react.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
540
+
541
+ declare const TooltipProvider: react.FC<TooltipPrimitive.TooltipProviderProps>;
542
+ declare const Tooltip: react.FC<TooltipPrimitive.TooltipProps>;
543
+ declare const TooltipTrigger: react.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & react.RefAttributes<HTMLButtonElement>>;
544
+ declare const TooltipContent: react.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
545
+
546
+ declare const ToastProvider: react.FC<ToastPrimitives.ToastProviderProps>;
547
+ declare const ToastViewport: react.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastViewportProps & react.RefAttributes<HTMLOListElement>, "ref"> & react.RefAttributes<HTMLOListElement>>;
548
+ declare const Toast: react.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastProps & react.RefAttributes<HTMLLIElement>, "ref"> & {
549
+ variant?: "default" | "success" | "danger" | "warning";
550
+ } & react.RefAttributes<HTMLLIElement>>;
551
+ declare const ToastAction: react.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastActionProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
552
+ declare const ToastClose: react.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastCloseProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
553
+ declare const ToastTitle: react.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastTitleProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
554
+ declare const ToastDescription: react.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastDescriptionProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
555
+
556
+ interface FieldProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
557
+ label: ReactNode;
558
+ /** Hint below the control. Hidden while an error shows. */
559
+ description?: ReactNode;
560
+ /** Validation message; presence marks the control invalid. */
561
+ error?: ReactNode;
562
+ required?: boolean;
563
+ disabled?: boolean;
564
+ /** The control. It receives id/aria wiring via Field context. */
565
+ children: ReactNode;
566
+ }
567
+ /**
568
+ * Form-field wrapper: renders label → control → description/error and wires
569
+ * htmlFor / aria-describedby / aria-invalid to the child input through
570
+ * context — one accessible pattern for every input in the framework.
571
+ * Submission and validation logic stay in the application (RHF/Zod adapters
572
+ * compose on top; the framework never submits).
573
+ */
574
+ declare function Field({ label, description, error, required, disabled, className, children, ...rest }: FieldProps): react.JSX.Element;
575
+
576
+ interface FieldContextValue {
577
+ inputId: string;
578
+ descriptionId: string | undefined;
579
+ errorId: string | undefined;
580
+ invalid: boolean;
581
+ required: boolean;
582
+ disabled: boolean;
583
+ }
584
+ /** Field wiring for the nearest <Field>; null when used standalone. */
585
+ declare function useFieldContext(): FieldContextValue | null;
586
+ /**
587
+ * Merges Field-provided a11y wiring with an input's own props (own props win).
588
+ * Inputs call this so they work both inside a <Field> and standalone.
589
+ */
590
+ declare function useFieldInputProps(own: {
591
+ id?: string;
592
+ "aria-describedby"?: string;
593
+ "aria-invalid"?: AriaAttributes["aria-invalid"];
594
+ disabled?: boolean;
595
+ required?: boolean;
596
+ }): {
597
+ id: string | undefined;
598
+ "aria-describedby": string | undefined;
599
+ "aria-invalid": true | undefined;
600
+ disabled: boolean | undefined;
601
+ required: boolean | undefined;
602
+ };
603
+
604
+ interface TextInputProps extends ComponentPropsWithoutRef<"input"> {
605
+ /** Leading adornment (icon, prefix text). */
606
+ startAdornment?: ReactNode;
607
+ /** Trailing adornment (icon, suffix, action). */
608
+ endAdornment?: ReactNode;
609
+ }
610
+ /** Shared control shell used by every text-like input for identical chrome. */
611
+ declare const inputClassName: (invalid: boolean, className?: string) => string;
612
+ /**
613
+ * Single-line text input. Inside a <Field> it inherits id/aria wiring
614
+ * automatically; standalone it behaves like a styled native input.
615
+ */
616
+ declare const TextInput: react.ForwardRefExoticComponent<TextInputProps & react.RefAttributes<HTMLInputElement>>;
617
+
618
+ type PasswordInputProps = Omit<TextInputProps, "type" | "endAdornment">;
619
+ /**
620
+ * Password input with an accessible show/hide toggle. The toggle is
621
+ * aria-pressed and never submits the surrounding form.
622
+ */
623
+ declare const PasswordInput: react.ForwardRefExoticComponent<PasswordInputProps & react.RefAttributes<HTMLInputElement>>;
624
+
625
+ type SearchInputProps = Omit<TextInputProps, "type" | "startAdornment">;
626
+ /** Search input: type=search semantics + a leading search icon. */
627
+ declare const SearchInput: react.ForwardRefExoticComponent<SearchInputProps & react.RefAttributes<HTMLInputElement>>;
628
+
629
+ type TextareaProps = ComponentPropsWithoutRef<"textarea">;
630
+ /** Multi-line input with the shared control chrome; vertical resize only. */
631
+ declare const Textarea: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & react.RefAttributes<HTMLTextAreaElement>>;
632
+
633
+ interface CheckboxProps extends Omit<ComponentPropsWithoutRef<"input">, "type"> {
634
+ /** Label rendered beside the box (clicking it toggles). */
635
+ label?: ReactNode;
636
+ /** Secondary line under the label. */
637
+ description?: ReactNode;
638
+ }
639
+ /**
640
+ * Native-input checkbox (real <input type="checkbox"> — free keyboard and
641
+ * form semantics) with token-driven visuals via accent-color.
642
+ */
643
+ declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
644
+
645
+ interface CodeInputProps {
646
+ /** Number of digits. @default 6 */
647
+ length?: number;
648
+ /** Controlled value (digits typed so far). */
649
+ value?: string;
650
+ /** Initial value in uncontrolled mode. */
651
+ defaultValue?: string;
652
+ /** Fired on every change with the digits typed so far. */
653
+ onChange?: (value: string) => void;
654
+ /** Fired once when all cells are filled. */
655
+ onComplete?: (value: string) => void;
656
+ disabled?: boolean;
657
+ /** Marks the group invalid (e.g. wrong code). */
658
+ error?: boolean;
659
+ /** Focus the first cell on mount. */
660
+ autoFocus?: boolean;
661
+ /** Accessible name of the group. @default "Verification code" */
662
+ "aria-label"?: string;
663
+ /** Form field name; the joined value submits via a hidden input. */
664
+ name?: string;
665
+ className?: string;
666
+ }
667
+ /**
668
+ * Segmented one-time-code entry (MFA, email verification): one cell per
669
+ * digit with auto-advance, Backspace stepping back, arrow-key movement, and
670
+ * full-code paste. Submits as a single hidden input when `name` is set.
671
+ *
672
+ * @example
673
+ * <CodeInput length={6} autoFocus onComplete={verify} error={failed} />
674
+ */
675
+ declare const CodeInput: react.ForwardRefExoticComponent<CodeInputProps & react.RefAttributes<HTMLDivElement>>;
676
+
677
+ interface SwitchProps extends Omit<ComponentPropsWithoutRef<"input">, "type" | "role"> {
678
+ label?: ReactNode;
679
+ }
680
+ /**
681
+ * Toggle switch built on a visually-hidden native checkbox with role=switch —
682
+ * native keyboard/forms behavior, switch semantics for AT, token-driven track.
683
+ */
684
+ declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLInputElement>>;
685
+
686
+ interface RadioOption<TValue extends string> {
687
+ value: TValue;
688
+ label: ReactNode;
689
+ description?: ReactNode;
690
+ disabled?: boolean;
691
+ }
692
+ interface RadioGroupProps<TValue extends string> {
693
+ /** Accessible name for the group. */
694
+ "aria-label"?: string;
695
+ options: ReadonlyArray<RadioOption<TValue>>;
696
+ /** Controlled value. */
697
+ value?: TValue;
698
+ /** Uncontrolled initial value. */
699
+ defaultValue?: TValue;
700
+ onChange?: (value: TValue) => void;
701
+ /** Shared native name; generated when omitted. */
702
+ name?: string;
703
+ orientation?: "vertical" | "horizontal";
704
+ disabled?: boolean;
705
+ className?: string;
706
+ }
707
+ /**
708
+ * Radio group over native inputs — native keyboard behavior (arrows within
709
+ * the group) and form semantics for free. Controlled or uncontrolled.
710
+ */
711
+ declare function RadioGroup<TValue extends string>({ options, value, defaultValue, onChange, name, orientation, disabled, className, ...rest }: RadioGroupProps<TValue>): react.JSX.Element;
712
+
713
+ interface SelectOption<TValue extends string = string> {
714
+ value: TValue;
715
+ label: string;
716
+ disabled?: boolean;
717
+ }
718
+ interface SelectProps extends ComponentPropsWithoutRef<"select"> {
719
+ /** Options; alternatively pass <option> children. */
720
+ options?: ReadonlyArray<SelectOption>;
721
+ /** Placeholder row rendered as a disabled empty-value option. */
722
+ placeholder?: string;
723
+ }
724
+ /**
725
+ * Styled NATIVE select — the right default for enterprise forms (OS pickers,
726
+ * mobile wheels, full a11y for free). A searchable custom Combobox arrives in
727
+ * Phase 5 for long option lists.
728
+ */
729
+ declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLSelectElement>>;
730
+
731
+ type CalendarProps = react.ComponentProps<typeof DayPicker>;
732
+ declare function Calendar({ className, classNames, showOutsideDays, ...props }: CalendarProps): react.JSX.Element;
733
+
734
+ interface DatePickerProps {
735
+ value?: Date;
736
+ onChange?: (date?: Date) => void;
737
+ placeholder?: string;
738
+ disabled?: boolean;
739
+ className?: string;
740
+ }
741
+ declare function DatePicker({ value, onChange, placeholder, disabled, className, }: DatePickerProps): react.JSX.Element;
742
+
743
+ declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>({ children, watch, getValues, getFieldState, setError, clearErrors, setValue, setValues, trigger, formState, resetField, reset, handleSubmit, unregister, control, register, setFocus, subscribe, }: react_hook_form.FormProviderProps<TFieldValues, TContext, TTransformedValues>) => react.JSX.Element;
744
+ declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => react.JSX.Element;
745
+ declare const FormItem: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
746
+ declare const useFormField: () => {
747
+ invalid: boolean;
748
+ isDirty: boolean;
749
+ isTouched: boolean;
750
+ isValidating: boolean;
751
+ error?: react_hook_form.FieldError;
752
+ id: string;
753
+ name: string;
754
+ formItemId: string;
755
+ formDescriptionId: string;
756
+ formMessageId: string;
757
+ };
758
+ declare const FormLabel: {
759
+ ({ className, required, ...props }: react.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & {
760
+ required?: boolean;
761
+ }): react.JSX.Element;
762
+ displayName: string;
763
+ };
764
+ declare const FormControl: react.ForwardRefExoticComponent<Omit<react.HTMLAttributes<HTMLElement> & {
765
+ children?: react.ReactNode;
766
+ } & react.RefAttributes<HTMLElement>, "ref"> & react.RefAttributes<HTMLElement>>;
767
+ declare const FormDescription: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLParagraphElement> & react.RefAttributes<HTMLParagraphElement>>;
768
+ declare const FormMessage: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLParagraphElement> & react.RefAttributes<HTMLParagraphElement>>;
769
+
770
+ declare const ToggleGroup: react.ForwardRefExoticComponent<(Omit<ToggleGroupPrimitive.ToggleGroupSingleProps & react.RefAttributes<HTMLDivElement>, "ref"> | Omit<ToggleGroupPrimitive.ToggleGroupMultipleProps & react.RefAttributes<HTMLDivElement>, "ref">) & react.RefAttributes<HTMLDivElement>>;
771
+ declare const ToggleGroupItem: react.ForwardRefExoticComponent<Omit<ToggleGroupPrimitive.ToggleGroupItemProps & react.RefAttributes<HTMLButtonElement>, "ref"> & {
772
+ badge?: react.ReactNode;
773
+ } & react.RefAttributes<HTMLButtonElement>>;
774
+
775
+ interface ComboboxOption {
776
+ value: string;
777
+ label: string;
778
+ }
779
+ interface ComboboxProps {
780
+ options: ComboboxOption[];
781
+ value?: string;
782
+ onChange?: (value: string) => void;
783
+ placeholder?: string;
784
+ emptyText?: string;
785
+ className?: string;
786
+ disabled?: boolean;
787
+ }
788
+ declare function Combobox({ options, value, onChange, placeholder, emptyText, className, disabled, }: ComboboxProps): react.JSX.Element;
789
+
790
+ interface MultiSelectOption {
791
+ value: string;
792
+ label: string;
793
+ }
794
+ interface MultiSelectProps extends Omit<react.HTMLAttributes<HTMLDivElement>, "onChange"> {
795
+ options: MultiSelectOption[];
796
+ value: string[];
797
+ onChange: (value: string[]) => void;
798
+ placeholder?: string;
799
+ disabled?: boolean;
800
+ }
801
+ declare const MultiSelect: react.ForwardRefExoticComponent<MultiSelectProps & react.RefAttributes<HTMLDivElement>>;
802
+
803
+ interface FileUploadProps extends Omit<react.HTMLAttributes<HTMLDivElement>, "onChange" | "onDrop"> {
804
+ onChange?: (files: File[]) => void;
805
+ accept?: string;
806
+ multiple?: boolean;
807
+ disabled?: boolean;
808
+ maxSize?: number;
809
+ }
810
+ declare const FileUpload: react.ForwardRefExoticComponent<FileUploadProps & react.RefAttributes<HTMLInputElement>>;
811
+
812
+ interface DateRangePickerProps {
813
+ value?: DateRange;
814
+ onChange?: (date?: DateRange) => void;
815
+ placeholder?: string;
816
+ disabled?: boolean;
817
+ className?: string;
818
+ }
819
+ declare function DateRangePicker({ value, onChange, placeholder, disabled, className, }: DateRangePickerProps): react.JSX.Element;
820
+
821
+ interface SliderProps extends Omit<react.InputHTMLAttributes<HTMLInputElement>, "onChange"> {
822
+ value?: number;
823
+ defaultValue?: number;
824
+ min?: number;
825
+ max?: number;
826
+ step?: number;
827
+ onChange?: (value: number) => void;
828
+ showTicks?: boolean;
829
+ }
830
+ declare const Slider: react.ForwardRefExoticComponent<SliderProps & react.RefAttributes<HTMLInputElement>>;
831
+
832
+ interface SignatureInputProps extends Omit<react.HTMLAttributes<HTMLDivElement>, "onChange"> {
833
+ onChange?: (signatureDataUrl: string | null) => void;
834
+ disabled?: boolean;
835
+ }
836
+ declare const SignatureInput: react.ForwardRefExoticComponent<SignatureInputProps & react.RefAttributes<HTMLDivElement>>;
837
+
838
+ type StackGap = "none" | "xs" | "sm" | "md" | "lg" | "xl";
839
+ type StackAlign = "stretch" | "start" | "center" | "end";
840
+ interface StackOwnProps {
841
+ direction?: "column" | "row";
842
+ gap?: StackGap;
843
+ align?: StackAlign;
844
+ wrap?: boolean;
845
+ className?: string;
846
+ }
847
+ type StackProps<C extends ElementType = "div"> = PolymorphicProps<C, StackOwnProps>;
848
+ /** One-dimensional layout: children spaced along a single axis. */
849
+ declare function Stack<C extends ElementType = "div">(props: StackProps<C>): react.JSX.Element;
850
+
851
+ interface FlexOwnProps {
852
+ align?: "stretch" | "start" | "center" | "end" | "baseline";
853
+ justify?: "start" | "center" | "end" | "between" | "around";
854
+ gap?: StackGap;
855
+ wrap?: boolean;
856
+ className?: string;
857
+ }
858
+ type FlexProps<C extends ElementType = "div"> = PolymorphicProps<C, FlexOwnProps>;
859
+ /** Row-oriented flexbox helper: toolbars, header rows, inline clusters. */
860
+ declare function Flex<C extends ElementType = "div">(props: FlexProps<C>): react.JSX.Element;
861
+
862
+ interface GridOwnProps {
863
+ /**
864
+ * Fixed column count, or `{ min: "220px" }` for the responsive
865
+ * auto-fit pattern (as many min-width columns as fit).
866
+ */
867
+ columns?: number | {
868
+ min: string;
869
+ };
870
+ gap?: StackGap;
871
+ className?: string;
872
+ style?: CSSProperties;
873
+ }
874
+ type GridProps<C extends ElementType = "div"> = PolymorphicProps<C, GridOwnProps>;
875
+ /** CSS-grid helper: fixed columns or responsive auto-fit via `columns={{ min }}`. */
876
+ declare function Grid<C extends ElementType = "div">(props: GridProps<C>): react.JSX.Element;
877
+
878
+ interface ContainerOwnProps {
879
+ size?: "sm" | "md" | "lg" | "xl" | "full";
880
+ className?: string;
881
+ }
882
+ type ContainerProps<C extends ElementType = "div"> = PolymorphicProps<C, ContainerOwnProps>;
883
+ /** Centered max-width page container with consistent side padding. */
884
+ declare function Container<C extends ElementType = "div">(props: ContainerProps<C>): react.JSX.Element;
885
+
886
+ interface PanelOwnProps {
887
+ padding?: "none" | "sm" | "md" | "lg";
888
+ elevation?: "flat" | "raised" | "overlay";
889
+ className?: string;
890
+ }
891
+ type PanelProps<C extends ElementType = "div"> = PolymorphicProps<C, PanelOwnProps>;
892
+ /** Bordered surface card — the building block of sectioned pages. */
893
+ declare function Panel<C extends ElementType = "div">(props: PanelProps<C>): react.JSX.Element;
894
+
895
+ interface DividerProps extends ComponentPropsWithoutRef<"div"> {
896
+ orientation?: "horizontal" | "vertical";
897
+ /** Optional inline label rendered mid-line (horizontal only). */
898
+ label?: ReactNode;
899
+ }
900
+ /** Semantic separator; supports a centered label ("or", section names). */
901
+ declare function Divider({ orientation, label, className, ...rest }: DividerProps): react.JSX.Element;
902
+
903
+ interface PageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
904
+ title: ReactNode;
905
+ description?: ReactNode;
906
+ actions?: ReactNode;
907
+ breadcrumbs?: ReactNode;
908
+ }
909
+ declare const PageHeader: react.ForwardRefExoticComponent<PageHeaderProps & react.RefAttributes<HTMLElement>>;
910
+
911
+ interface TabItem<TKey extends string> {
912
+ key: TKey;
913
+ label: ReactNode;
914
+ icon?: ReactNode;
915
+ /** Count/status pill after the label. */
916
+ badge?: ReactNode;
917
+ disabled?: boolean;
918
+ }
919
+ interface TabsProps<TKey extends string> {
920
+ tabs: ReadonlyArray<TabItem<TKey>>;
921
+ /** Controlled active key. */
922
+ value?: TKey;
923
+ /** Uncontrolled initial key; defaults to the first enabled tab. */
924
+ defaultValue?: TKey;
925
+ onChange?: (key: TKey) => void;
926
+ "aria-label": string;
927
+ /**
928
+ * Panel content per tab. When omitted, Tabs renders only the tablist —
929
+ * for URL-driven tabs where the app owns what's below.
930
+ */
931
+ renderPanel?: (key: TKey) => ReactNode;
932
+ className?: string;
933
+ }
934
+ /**
935
+ * WAI-ARIA tabs: roving tabindex, Left/Right/Home/End keyboard activation,
936
+ * underline styling. Controlled (URL-driven) or uncontrolled.
937
+ */
938
+ declare function Tabs<TKey extends string>({ tabs, value, defaultValue, onChange, renderPanel, className, ...rest }: TabsProps<TKey>): react.JSX.Element;
939
+
940
+ interface BreadcrumbItem {
941
+ label: ReactNode;
942
+ /** Link target; the last item (current page) typically omits it. */
943
+ href?: string;
944
+ }
945
+ interface BreadcrumbsProps {
946
+ items: ReadonlyArray<BreadcrumbItem>;
947
+ /**
948
+ * Link component (e.g. your router's Link). Defaults to <a> — the
949
+ * framework never owns routing.
950
+ */
951
+ linkComponent?: ElementType;
952
+ separator?: ReactNode;
953
+ className?: string;
954
+ }
955
+ /** Breadcrumb trail with nav landmark + aria-current on the last item. */
956
+ declare function Breadcrumbs({ items, linkComponent: LinkComponent, separator, className, }: BreadcrumbsProps): react.JSX.Element;
957
+
958
+ interface PaginationProps {
959
+ /** Current 1-based page. */
960
+ page: number;
961
+ pageCount: number;
962
+ onPageChange: (page: number) => void;
963
+ /** Neighbor pages shown around the current page. @default 1 */
964
+ siblingCount?: number;
965
+ className?: string;
966
+ }
967
+ /**
968
+ * Page navigation with ellipsis collapsing (via util-library's pageRange),
969
+ * prev/next controls, and aria-current on the active page.
970
+ */
971
+ declare function Pagination({ page, pageCount, onPageChange, siblingCount, className }: PaginationProps): react.JSX.Element | null;
972
+
973
+ declare const DropdownMenu: react.FC<DropdownMenuPrimitive.DropdownMenuProps>;
974
+ declare const DropdownMenuTrigger: react.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & react.RefAttributes<HTMLButtonElement>>;
975
+ declare const DropdownMenuGroup: react.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & react.RefAttributes<HTMLDivElement>>;
976
+ declare const DropdownMenuPortal: react.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
977
+ declare const DropdownMenuSub: react.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
978
+ declare const DropdownMenuRadioGroup: react.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & react.RefAttributes<HTMLDivElement>>;
979
+ declare const DropdownMenuSubTrigger: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
980
+ inset?: boolean;
981
+ } & react.RefAttributes<HTMLDivElement>>;
982
+ declare const DropdownMenuSubContent: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
983
+ declare const DropdownMenuContent: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
984
+ declare const DropdownMenuItem: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
985
+ inset?: boolean;
986
+ } & react.RefAttributes<HTMLDivElement>>;
987
+ declare const DropdownMenuCheckboxItem: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
988
+ declare const DropdownMenuRadioItem: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
989
+ declare const DropdownMenuLabel: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
990
+ inset?: boolean;
991
+ } & react.RefAttributes<HTMLDivElement>>;
992
+ declare const DropdownMenuSeparator: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
993
+ declare const DropdownMenuShortcut: {
994
+ ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): react.JSX.Element;
995
+ displayName: string;
996
+ };
997
+
998
+ declare const Command: react.ForwardRefExoticComponent<Omit<{
999
+ children?: react.ReactNode;
1000
+ } & Pick<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof react.HTMLAttributes<HTMLDivElement>> & {
1001
+ ref?: react.Ref<HTMLDivElement>;
1002
+ } & {
1003
+ asChild?: boolean;
1004
+ }, "key" | keyof react.HTMLAttributes<HTMLDivElement> | "asChild"> & {
1005
+ label?: string;
1006
+ shouldFilter?: boolean;
1007
+ filter?: (value: string, search: string, keywords?: string[]) => number;
1008
+ defaultValue?: string;
1009
+ value?: string;
1010
+ onValueChange?: (value: string) => void;
1011
+ loop?: boolean;
1012
+ disablePointerSelection?: boolean;
1013
+ vimBindings?: boolean;
1014
+ } & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
1015
+ type CommandDialogProps = react.ComponentPropsWithoutRef<typeof Dialog>;
1016
+ declare const CommandDialog: ({ children, ...props }: CommandDialogProps) => react.JSX.Element;
1017
+ declare const CommandInput: react.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof react.InputHTMLAttributes<HTMLInputElement>> & {
1018
+ ref?: react.Ref<HTMLInputElement>;
1019
+ } & {
1020
+ asChild?: boolean;
1021
+ }, "key" | "asChild" | keyof react.InputHTMLAttributes<HTMLInputElement>>, "value" | "onChange" | "type"> & {
1022
+ value?: string;
1023
+ onValueChange?: (search: string) => void;
1024
+ } & react.RefAttributes<HTMLInputElement>, "ref"> & react.RefAttributes<HTMLInputElement>>;
1025
+ declare const CommandList: react.ForwardRefExoticComponent<Omit<{
1026
+ children?: react.ReactNode;
1027
+ } & Pick<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof react.HTMLAttributes<HTMLDivElement>> & {
1028
+ ref?: react.Ref<HTMLDivElement>;
1029
+ } & {
1030
+ asChild?: boolean;
1031
+ }, "key" | keyof react.HTMLAttributes<HTMLDivElement> | "asChild"> & {
1032
+ label?: string;
1033
+ } & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
1034
+ declare const CommandEmpty: react.ForwardRefExoticComponent<Omit<{
1035
+ children?: react.ReactNode;
1036
+ } & Pick<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof react.HTMLAttributes<HTMLDivElement>> & {
1037
+ ref?: react.Ref<HTMLDivElement>;
1038
+ } & {
1039
+ asChild?: boolean;
1040
+ }, "key" | keyof react.HTMLAttributes<HTMLDivElement> | "asChild"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
1041
+ declare const CommandGroup: react.ForwardRefExoticComponent<Omit<{
1042
+ children?: react.ReactNode;
1043
+ } & Omit<Pick<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof react.HTMLAttributes<HTMLDivElement>> & {
1044
+ ref?: react.Ref<HTMLDivElement>;
1045
+ } & {
1046
+ asChild?: boolean;
1047
+ }, "key" | keyof react.HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "heading"> & {
1048
+ heading?: react.ReactNode;
1049
+ value?: string;
1050
+ forceMount?: boolean;
1051
+ } & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
1052
+ declare const CommandSeparator: react.ForwardRefExoticComponent<Omit<Pick<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof react.HTMLAttributes<HTMLDivElement>> & {
1053
+ ref?: react.Ref<HTMLDivElement>;
1054
+ } & {
1055
+ asChild?: boolean;
1056
+ }, "key" | keyof react.HTMLAttributes<HTMLDivElement> | "asChild"> & {
1057
+ alwaysRender?: boolean;
1058
+ } & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
1059
+ declare const CommandItem: react.ForwardRefExoticComponent<Omit<{
1060
+ children?: react.ReactNode;
1061
+ } & Omit<Pick<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof react.HTMLAttributes<HTMLDivElement>> & {
1062
+ ref?: react.Ref<HTMLDivElement>;
1063
+ } & {
1064
+ asChild?: boolean;
1065
+ }, "key" | keyof react.HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "disabled" | "onSelect"> & {
1066
+ disabled?: boolean;
1067
+ onSelect?: (value: string) => void;
1068
+ value?: string;
1069
+ keywords?: string[];
1070
+ forceMount?: boolean;
1071
+ } & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
1072
+ declare const CommandShortcut: {
1073
+ ({ className, ...props }: react.HTMLAttributes<HTMLSpanElement>): react.JSX.Element;
1074
+ displayName: string;
1075
+ };
1076
+
1077
+ declare const Accordion: react.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & react.RefAttributes<HTMLDivElement>>;
1078
+ declare const AccordionItem: react.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
1079
+ declare const AccordionTrigger: react.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
1080
+ declare const AccordionContent: react.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
1081
+
1082
+ declare const Avatar: react.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & react.RefAttributes<HTMLSpanElement>, "ref"> & react.RefAttributes<HTMLSpanElement>>;
1083
+ declare const AvatarImage: react.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & react.RefAttributes<HTMLImageElement>, "ref"> & react.RefAttributes<HTMLImageElement>>;
1084
+ declare const AvatarFallback: react.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & react.RefAttributes<HTMLSpanElement>, "ref"> & react.RefAttributes<HTMLSpanElement>>;
1085
+
1086
+ type BadgeVariant = "default" | "secondary" | "success" | "warning" | "danger" | "info" | "outline" | "primary-subtle" | "success-subtle" | "warning-subtle" | "danger-subtle" | "info-subtle";
1087
+ interface BadgeProps extends HTMLAttributes<HTMLDivElement> {
1088
+ variant?: BadgeVariant;
1089
+ /** Renders a small circular dot indicator before the badge text. */
1090
+ dot?: boolean;
1091
+ }
1092
+ declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttributes<HTMLDivElement>>;
1093
+
1094
+ declare const Card: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
1095
+ declare const CardHeader: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
1096
+ declare const CardTitle: react.ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & react.RefAttributes<HTMLHeadingElement>>;
1097
+ declare const CardDescription: react.ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & react.RefAttributes<HTMLParagraphElement>>;
1098
+ declare const CardContent: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
1099
+ declare const CardFooter: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
1100
+
1101
+ interface DataTableProps<TData, TValue> {
1102
+ columns: ColumnDef<TData, TValue>[];
1103
+ data: TData[];
1104
+ className?: string;
1105
+ }
1106
+ declare function DataTable<TData, TValue>({ columns, data, className, }: DataTableProps<TData, TValue>): react.JSX.Element;
1107
+
1108
+ interface TimelineProps extends react.HTMLAttributes<HTMLOListElement> {
1109
+ children: react.ReactNode;
1110
+ }
1111
+ declare const Timeline: react.ForwardRefExoticComponent<TimelineProps & react.RefAttributes<HTMLOListElement>>;
1112
+ interface TimelineItemProps extends react.HTMLAttributes<HTMLLIElement> {
1113
+ children: react.ReactNode;
1114
+ }
1115
+ declare const TimelineItem: react.ForwardRefExoticComponent<TimelineItemProps & react.RefAttributes<HTMLLIElement>>;
1116
+ interface TimelineDotProps extends react.HTMLAttributes<HTMLDivElement> {
1117
+ intent?: "default" | "primary" | "success" | "warning" | "danger" | "info";
1118
+ }
1119
+ declare const TimelineDot: react.ForwardRefExoticComponent<TimelineDotProps & react.RefAttributes<HTMLDivElement>>;
1120
+ type TimelineContentProps = react.HTMLAttributes<HTMLDivElement>;
1121
+ declare const TimelineContent: react.ForwardRefExoticComponent<TimelineContentProps & react.RefAttributes<HTMLDivElement>>;
1122
+ type TimelineTimeProps = react.TimeHTMLAttributes<HTMLTimeElement>;
1123
+ declare const TimelineTime: react.ForwardRefExoticComponent<TimelineTimeProps & react.RefAttributes<HTMLTimeElement>>;
1124
+ type TimelineTitleProps = react.HTMLAttributes<HTMLHeadingElement>;
1125
+ declare const TimelineTitle: react.ForwardRefExoticComponent<TimelineTitleProps & react.RefAttributes<HTMLHeadingElement>>;
1126
+ type TimelineDescriptionProps = react.HTMLAttributes<HTMLParagraphElement>;
1127
+ declare const TimelineDescription: react.ForwardRefExoticComponent<TimelineDescriptionProps & react.RefAttributes<HTMLParagraphElement>>;
1128
+
1129
+ interface StepItem {
1130
+ label: react.ReactNode;
1131
+ description?: react.ReactNode;
1132
+ }
1133
+ interface StepsProps extends react.HTMLAttributes<HTMLDivElement> {
1134
+ steps: StepItem[];
1135
+ activeStep?: number;
1136
+ }
1137
+ declare const Steps: react.ForwardRefExoticComponent<StepsProps & react.RefAttributes<HTMLDivElement>>;
1138
+
1139
+ interface StatCardProps extends Omit<react.HTMLAttributes<HTMLDivElement>, "title"> {
1140
+ title: react.ReactNode;
1141
+ value: react.ReactNode;
1142
+ trend?: {
1143
+ value: string;
1144
+ isPositive?: boolean;
1145
+ label?: string;
1146
+ };
1147
+ icon?: react.ReactNode;
1148
+ }
1149
+ /**
1150
+ * A dashboard KPI tile: label, prominent value, optional icon, and an
1151
+ * optional trend indicator (arrow direction and color follow
1152
+ * `trend.isPositive`; omit it for a neutral trend).
1153
+ *
1154
+ * @example
1155
+ * <StatCard
1156
+ * title="Active patients"
1157
+ * value="128"
1158
+ * trend={{ value: "+12%", isPositive: true, label: "vs last month" }}
1159
+ * />
1160
+ */
1161
+ declare const StatCard: react.ForwardRefExoticComponent<StatCardProps & react.RefAttributes<HTMLDivElement>>;
1162
+
1163
+ /** A single row of chart data: one index value plus one number per series. */
1164
+ type ChartDatum = Record<string, unknown>;
1165
+ /** Full configuration for one plotted series. */
1166
+ interface ChartSeries<TDatum extends ChartDatum = ChartDatum> {
1167
+ /** Key in each datum holding this series' numeric value. */
1168
+ dataKey: Extract<keyof TDatum, string>;
1169
+ /** Human-readable name shown in the legend and tooltip. Defaults to `dataKey`. */
1170
+ label?: string;
1171
+ /**
1172
+ * CSS color for the series. Defaults to the categorical chart palette
1173
+ * (`--ml-chart-1` … `--ml-chart-8`, assigned in order).
1174
+ */
1175
+ color?: string;
1176
+ }
1177
+ /** A series may be given as a bare data key or a full {@link ChartSeries}. */
1178
+ type ChartSeriesInput<TDatum extends ChartDatum = ChartDatum> = Extract<keyof TDatum, string> | ChartSeries<TDatum>;
1179
+ /** Props shared by every cartesian chart (line, bar, area). */
1180
+ interface CartesianChartProps<TDatum extends ChartDatum = ChartDatum> extends Omit<react.HTMLAttributes<HTMLDivElement>, "children"> {
1181
+ /** Rows to plot. Each row holds the index value plus one number per series. */
1182
+ data: readonly TDatum[];
1183
+ /** Key in each datum used for the category (x) axis. */
1184
+ index: Extract<keyof TDatum, string>;
1185
+ /** Series to plot, in palette-assignment order. */
1186
+ series: ReadonlyArray<ChartSeriesInput<TDatum>>;
1187
+ /** Chart height (the width always fills the container). @default 300 */
1188
+ height?: number | string;
1189
+ /** Formats numeric values in the y-axis ticks and tooltip. */
1190
+ valueFormatter?: (value: number) => string;
1191
+ /** Formats category values in the x-axis ticks and tooltip header. */
1192
+ indexFormatter?: (value: string | number) => string;
1193
+ /** Render horizontal grid lines. @default true */
1194
+ showGrid?: boolean;
1195
+ /** Render the hover tooltip. @default true */
1196
+ showTooltip?: boolean;
1197
+ /** Render the legend. Defaults to `true` when more than one series is plotted. */
1198
+ showLegend?: boolean;
1199
+ /** Render the x axis. @default true */
1200
+ showXAxis?: boolean;
1201
+ /** Render the y axis. @default true */
1202
+ showYAxis?: boolean;
1203
+ }
1204
+
1205
+ /** Number of colors in the categorical chart palette (`--ml-chart-1..8`). */
1206
+ declare const CHART_PALETTE_SIZE = 8;
1207
+ /**
1208
+ * The categorical palette color for a zero-based series position.
1209
+ * Cycles when there are more series than palette entries.
1210
+ */
1211
+ declare function chartColor(position: number): string;
1212
+ /**
1213
+ * Normalizes the `series` prop (bare keys or full configs) into fully
1214
+ * resolved series: label defaults to the data key, color to the palette.
1215
+ */
1216
+ declare function resolveSeries<TDatum extends ChartDatum>(series: ReadonlyArray<ChartSeriesInput<TDatum>>): Array<Required<ChartSeries<TDatum>>>;
1217
+
1218
+ /**
1219
+ * The payload entries recharts injects into a custom tooltip's `content`
1220
+ * element. Typed structurally so the framework's public API does not leak
1221
+ * recharts internals.
1222
+ */
1223
+ interface ChartTooltipPayloadEntry {
1224
+ name?: string | number;
1225
+ value?: number | string | ReadonlyArray<number | string>;
1226
+ color?: string;
1227
+ dataKey?: string | number;
1228
+ }
1229
+ interface ChartTooltipContentProps {
1230
+ /** Injected by recharts: whether the tooltip is active. */
1231
+ active?: boolean;
1232
+ /** Injected by recharts: the hovered category value. */
1233
+ label?: string | number;
1234
+ /** Injected by recharts: one entry per series at the hovered index. */
1235
+ payload?: ReadonlyArray<ChartTooltipPayloadEntry>;
1236
+ /** Formats numeric series values. */
1237
+ valueFormatter?: (value: number) => string;
1238
+ /** Formats the category header. */
1239
+ indexFormatter?: (value: string | number) => string;
1240
+ className?: string;
1241
+ }
1242
+ /**
1243
+ * Token-styled tooltip body shared by every chart. Renders the hovered
1244
+ * category as a header and one swatch + label + value row per series.
1245
+ */
1246
+ declare function ChartTooltipContent({ active, label, payload, valueFormatter, indexFormatter, className, }: ChartTooltipContentProps): react.JSX.Element | null;
1247
+
1248
+ /** Structurally-typed legend entries injected by recharts. */
1249
+ interface ChartLegendPayloadEntry {
1250
+ value?: string | number;
1251
+ color?: string;
1252
+ dataKey?: string | number;
1253
+ }
1254
+ interface ChartLegendContentProps {
1255
+ /** Injected by recharts: one entry per series. */
1256
+ payload?: ReadonlyArray<ChartLegendPayloadEntry>;
1257
+ className?: string;
1258
+ }
1259
+ /** Token-styled horizontal legend shared by every chart. */
1260
+ declare function ChartLegendContent({ payload, className }: ChartLegendContentProps): react.JSX.Element | null;
1261
+
1262
+ interface LineChartProps<TDatum extends ChartDatum = ChartDatum> extends CartesianChartProps<TDatum> {
1263
+ /** Line interpolation. @default "monotone" */
1264
+ curve?: "monotone" | "linear" | "step";
1265
+ /** Render a dot at every data point (hover dots always render). @default false */
1266
+ showDots?: boolean;
1267
+ }
1268
+ /**
1269
+ * Multi-series line chart for trends over an ordered axis (time, sessions,
1270
+ * visits). Colors come from the categorical chart tokens, so lines restyle
1271
+ * with the theme automatically.
1272
+ *
1273
+ * @example
1274
+ * <LineChart
1275
+ * data={sessions}
1276
+ * index="week"
1277
+ * series={["completed", "cancelled"]}
1278
+ * valueFormatter={(v) => `${v} sessions`}
1279
+ * aria-label="Completed and cancelled sessions per week"
1280
+ * />
1281
+ */
1282
+ declare function LineChart<TDatum extends ChartDatum>({ data, index, series, height, valueFormatter, indexFormatter, showGrid, showTooltip, showLegend, showXAxis, showYAxis, curve, showDots, ...rootProps }: LineChartProps<TDatum>): react.JSX.Element;
1283
+
1284
+ interface BarChartProps<TDatum extends ChartDatum = ChartDatum> extends CartesianChartProps<TDatum> {
1285
+ /** Stack the series instead of grouping them side by side. @default false */
1286
+ stacked?: boolean;
1287
+ }
1288
+ /**
1289
+ * Multi-series bar chart for categorical comparisons (visits per provider,
1290
+ * claims per payer). Colors come from the categorical chart tokens, so bars
1291
+ * restyle with the theme automatically.
1292
+ *
1293
+ * @example
1294
+ * <BarChart
1295
+ * data={claims}
1296
+ * index="month"
1297
+ * series={[
1298
+ * { dataKey: "submitted", label: "Submitted" },
1299
+ * { dataKey: "denied", label: "Denied", color: "var(--ml-danger)" },
1300
+ * ]}
1301
+ * stacked
1302
+ * aria-label="Submitted and denied claims per month"
1303
+ * />
1304
+ */
1305
+ declare function BarChart<TDatum extends ChartDatum>({ data, index, series, height, valueFormatter, indexFormatter, showGrid, showTooltip, showLegend, showXAxis, showYAxis, stacked, ...rootProps }: BarChartProps<TDatum>): react.JSX.Element;
1306
+
1307
+ interface AreaChartProps<TDatum extends ChartDatum = ChartDatum> extends CartesianChartProps<TDatum> {
1308
+ /** Line interpolation. @default "monotone" */
1309
+ curve?: "monotone" | "linear" | "step";
1310
+ /** Stack the series to show part-to-whole composition. @default false */
1311
+ stacked?: boolean;
1312
+ }
1313
+ /**
1314
+ * Multi-series area chart for cumulative trends and part-to-whole
1315
+ * composition over time (caseload by program, utilization by location).
1316
+ * Colors come from the categorical chart tokens, so fills restyle with the
1317
+ * theme automatically.
1318
+ *
1319
+ * @example
1320
+ * <AreaChart
1321
+ * data={caseload}
1322
+ * index="month"
1323
+ * series={["aba", "speech", "ot"]}
1324
+ * stacked
1325
+ * aria-label="Monthly caseload by service line"
1326
+ * />
1327
+ */
1328
+ declare function AreaChart<TDatum extends ChartDatum>({ data, index, series, height, valueFormatter, indexFormatter, showGrid, showTooltip, showLegend, showXAxis, showYAxis, curve, stacked, ...rootProps }: AreaChartProps<TDatum>): react.JSX.Element;
1329
+
1330
+ /**
1331
+ * @cocliny/ui-library
1332
+ *
1333
+ * Presentation-only React components over a token-driven design system.
1334
+ *
1335
+ * Rules for everything added here:
1336
+ * - Components receive data via props, render it, and emit callbacks.
1337
+ * - No data fetching, no business logic, no application state.
1338
+ * - Every component exposes className / style / slot overrides / render hooks.
1339
+ * - All styling consumes design tokens (CSS variables) — never hardcoded values.
1340
+ * - WCAG AA: keyboard navigation, focus management, ARIA, reduced motion.
1341
+ */
1342
+
1343
+ /** Framework version marker. Replaced by the release pipeline. */
1344
+ declare const UI_LIBRARY_VERSION: "0.0.0";
1345
+
1346
+ export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertIntent, type AlertProps, AreaChart, type AreaChartProps, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, type BadgeVariant, BarChart, type BarChartProps, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonIntent, type ButtonProps, type ButtonSize, type ButtonVariant, CHART_PALETTE_SIZE, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CartesianChartProps, type ChartDatum, ChartLegendContent, type ChartLegendContentProps, type ChartLegendPayloadEntry, type ChartSeries, type ChartSeriesInput, ChartTooltipContent, type ChartTooltipContentProps, type ChartTooltipPayloadEntry, Checkbox, type CheckboxProps, Code, CodeInput, type CodeInputProps, type CodeProps, type ColorScheme, Combobox, type ComboboxOption, type ComboboxProps, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, type CommonProps, Container, type ContainerOwnProps, type ContainerProps, DataTable, type DataTableProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, type Density, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Divider, type DividerProps, Drawer, DrawerClose, DrawerContent, type DrawerContentProps, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, ErrorState, Field, type FieldContextValue, type FieldProps, FileUpload, type FileUploadProps, Flex, type FlexOwnProps, type FlexProps, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Grid, type GridOwnProps, type GridProps, Heading, type HeadingLevel, type HeadingOwnProps, type HeadingProps, type HeadingSize, IconButton, type IconButtonProps, type Intent, Label, type LabelProps, LineChart, type LineChartProps, Link, type LinkOwnProps, type LinkProps, LoadingOverlay, type LoadingOverlayProps, MultiSelect, type MultiSelectOption, type MultiSelectProps, PageHeader, type PageHeaderProps, Pagination, type PaginationProps, Panel, type PanelOwnProps, type PanelProps, PasswordInput, type PasswordInputProps, type PolymorphicProps, type PolymorphicPropsWithRef, type PolymorphicRef, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, type ProgressProps, RadioGroup, type RadioGroupProps, type RadioOption, type Radius, type RenderHook, type ResolvedColorScheme, SearchInput, type SearchInputProps, Select, type SelectOption, type SelectProps, SignatureInput, type SignatureInputProps, type Size, Skeleton, type SkeletonProps, Slider, type SliderProps, type SlotClassNames, type SlotStyles, type SlottableProps, Spinner, type SpinnerProps, Stack, type StackAlign, type StackGap, type StackOwnProps, type StackProps, StatCard, type StatCardProps, StatusIndicator, type StatusIndicatorProps, type StepItem, Steps, type StepsProps, SuccessState, Switch, type SwitchProps, TOKEN_CSS_VARS, type TabItem, Tabs, type TabsProps, Text, type TextAlign, TextInput, type TextInputProps, type TextOwnProps, type TextProps, type TextSize, type TextTone, type TextWeight, Textarea, type TextareaProps, type ThemeContextValue, type ThemeOverrides, ThemeProvider, type ThemeProviderProps, type ThemeToken, Timeline, TimelineContent, type TimelineContentProps, TimelineDescription, type TimelineDescriptionProps, TimelineDot, type TimelineDotProps, TimelineItem, type TimelineItemProps, type TimelineProps, TimelineTime, type TimelineTimeProps, TimelineTitle, type TimelineTitleProps, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, ToggleGroup, ToggleGroupItem, type TokenValues, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UI_LIBRARY_VERSION, type VariantFn, type VariantProps, type VariantsConfig, chartColor, cn, defineVariants, getThemeInitScript, inputClassName, resolveSeries, themeOverridesToCss, useFieldContext, useFieldInputProps, useFormField, useTheme };