@reopt-ai/opt-ui 1.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +40 -0
- package/COMPONENT_CATALOG.md +3000 -0
- package/LICENSE +21 -0
- package/README.md +244 -0
- package/dist/chunk-3GWWZKX7.js +38 -0
- package/dist/chunk-AFF2HPE5.cjs +5008 -0
- package/dist/chunk-ELWICXYY.js +4745 -0
- package/dist/chunk-N4NDU5ET.cjs +4745 -0
- package/dist/chunk-ONE3C5RV.cjs +38 -0
- package/dist/chunk-QWBHD54V.js +3218 -0
- package/dist/chunk-RBM2RNC2.js +5008 -0
- package/dist/chunk-X5WCXJAF.cjs +3218 -0
- package/dist/core/index.cjs +324 -0
- package/dist/core/index.d.cts +5 -0
- package/dist/core/index.d.ts +5 -0
- package/dist/core/index.js +324 -0
- package/dist/docs/01-getting-started.md +129 -0
- package/dist/docs/02-components/01-core.md +1841 -0
- package/dist/docs/02-components/02-visuals.md +11 -0
- package/dist/docs/02-components/03-shells.md +1361 -0
- package/dist/docs/02-components/04-surfaces.md +11 -0
- package/dist/docs/02-components/index.md +106 -0
- package/dist/docs/03-recipes/01-forms.md +471 -0
- package/dist/docs/03-recipes/02-dashboards.md +397 -0
- package/dist/docs/03-recipes/03-layouts.md +424 -0
- package/dist/docs/04-theming.md +232 -0
- package/dist/docs/05-migration/01-breaking-changes.md +117 -0
- package/dist/docs/05-migration/02-formstore.md +336 -0
- package/dist/docs/06-troubleshooting.md +119 -0
- package/dist/docs/index.md +71 -0
- package/dist/id-registry.cjs +1875 -0
- package/dist/id-registry.d.cts +27 -0
- package/dist/id-registry.d.ts +27 -0
- package/dist/id-registry.js +1875 -0
- package/dist/id-registry.json +3799 -0
- package/dist/index-BZ_lBlO1.d.ts +474 -0
- package/dist/index-BuvxoWHf.d.cts +474 -0
- package/dist/index-DlAcuvQp.d.cts +1686 -0
- package/dist/index-Slu5hOj1.d.ts +1686 -0
- package/dist/index.cjs +9959 -0
- package/dist/index.d.cts +2351 -0
- package/dist/index.d.ts +2351 -0
- package/dist/index.js +9959 -0
- package/dist/meta.cjs +6898 -0
- package/dist/meta.d.cts +36 -0
- package/dist/meta.d.ts +36 -0
- package/dist/meta.js +6869 -0
- package/dist/shells/index.cjs +65 -0
- package/dist/shells/index.d.cts +5 -0
- package/dist/shells/index.d.ts +5 -0
- package/dist/shells/index.js +65 -0
- package/dist/tailwind.css +401 -0
- package/dist/theme/presets/default.css +355 -0
- package/dist/theme/presets/minimal.css +354 -0
- package/dist/theme/presets/mono-dark.css +354 -0
- package/dist/theme/presets/natural.css +181 -0
- package/dist/theme/presets/pro.css +354 -0
- package/dist/types-D4-0lwaE.d.cts +298 -0
- package/dist/types-D4-0lwaE.d.ts +298 -0
- package/dist/visuals/index.cjs +4 -0
- package/dist/visuals/index.d.cts +1 -0
- package/dist/visuals/index.d.ts +1 -0
- package/dist/visuals/index.js +4 -0
- package/package.json +165 -0
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,2351 @@
|
|
|
1
|
+
import { D as DateRange, I as IconDef } from './index-Slu5hOj1.js';
|
|
2
|
+
export { A as AccordionContent, a as AccordionItem, b as AccordionRoot, c as AccordionTrigger, d as Alert, e as AlertDialogPanel, f as AlertDialogPanelProps, g as AlertProps, h as Avatar, i as AvatarGroup, j as AvatarGroupProps, k as AvatarProps, B as Badge, l as BadgeProps, m as BlockBaseProps, n as BlockLayout, o as BlockLayoutProps, p as Breadcrumb, q as BreadcrumbItem, r as BreadcrumbProps, s as Button, t as ButtonProps, C as Card, u as CardContent, v as CardContentProps, w as CardDescription, x as CardDescriptionProps, y as CardFooter, z as CardFooterProps, E as CardHeader, F as CardHeaderProps, G as CardProps, H as CardTitle, J as CardTitleProps, K as Checkbox, L as CheckboxGroup, M as CheckboxGroupProps, N as CheckboxProps, O as CircularProgress, P as CircularProgressProps, Q as ColorPicker, R as ColorPickerProps, S as ComboboxEmpty, T as ComboboxGroup, U as ComboboxGroupLabel, V as ComboboxInput, W as ComboboxItem, X as ComboboxPopover, Y as ComboboxRoot, Z as ComparisonMode, _ as CompositeZone, $ as ConditionBuilder, a0 as ConditionBuilderProps, a1 as ConditionDef, a2 as ConditionGroup, a3 as ConditionOperator, a4 as ConditionTypeRenderer, a5 as Container, a6 as ContainerProps, a7 as DEFAULT_PRESETS, a8 as DateGranularity, a9 as DateRangePicker, aa as DateRangePickerProps, ab as DateRangePreset, ac as DialogBody, ad as DialogBodyProps, ae as DialogDescription, af as DialogDisclosure, ag as DialogDismiss, ah as DialogFooter, ai as DialogFooterProps, aj as DialogHeader, ak as DialogHeaderProps, al as DialogHeading, am as DialogPanel, an as DialogRoot, ao as DialogSize, ap as DisclosureContent, aq as DisclosureRoot, ar as DisclosureTrigger, as as DrawerClose, at as DrawerPanel, au as DrawerPanelProps, av as DrawerRoot, aw as DrawerSide, ax as DrawerSize, ay as DropdownContent, az as DropdownItem, aA as DropdownMenu, aB as DropdownSeparator, aC as DropdownTrigger, aD as EmptyState, aE as EmptyStateAction, aF as EmptyStateProps, aG as FormCheckbox, aH as FormColorPicker, aI as FormColorPickerProps, aJ as FormControl, aK as FormDateRangePicker, aL as FormDateRangePickerProps, aM as FormDescription, aN as FormError, aO as FormField, aP as FormGroup, aQ as FormGroupLabel, aR as FormIconPicker, aS as FormIconPickerProps, aT as FormInput, aU as FormLabel, aV as FormNumberInput, aW as FormNumberInputProps, aX as FormProvider, aY as FormPush, aZ as FormRadio, a_ as FormRadioGroup, a$ as FormRemove, b0 as FormReset, b1 as FormRoot, b2 as FormSelect, b3 as FormSelectItem, b4 as FormSelectPopover, b5 as FormSelectProps, b6 as FormSlider, b7 as FormSliderProps, b8 as FormStarRating, b9 as FormStarRatingProps, ba as FormSubmit, bb as FormSwitch, bc as FormSwitchProps, bd as FormTagInput, be as FormTagInputProps, bf as FormTextarea, bg as FormTextareaProps, bh as Heading, bi as HeadingLevel, bj as HeadingProps, bk as HeadingRole, bl as IconPicker, bm as IconPickerProps, bn as Input, bo as InputProps, bp as Kbd, bq as KbdProps, br as Logo, bs as LogoProps, bt as MenuButtonArrow, bu as MenuItem, bv as MenuItemCheckbox, bw as MenuItemRadio, bx as MenuPopover, by as MenuRoot, bz as MenuSeparator, bA as MenuTrigger, bB as MenubarContainer, bC as MenubarRoot, bD as Meter, bE as MeterProps, bF as NumberInput, bG as NumberInputProps, bH as OtpField, bI as OtpFieldProps, bJ as PageHeader, bK as PageHeaderProps, bL as Pagination, bM as PaginationProps, bN as PopoverClose, bO as PopoverContent, bP as PopoverContentProps, bQ as PopoverRoot, bR as PopoverTrigger, bS as Progress, bT as ProgressProps, bU as Radio, bV as RadioGroup, bW as RadioGroupProps, bX as RadioProps, bY as ResizableHandle, bZ as ResizableHandleProps, b_ as ResizablePanel, b$ as ResizablePanelGroup, c0 as ResizablePanelGroupProps, c1 as ResizablePanelProps, c2 as SHADER_OVERLAY_PARAM_KEYS, c3 as SHADER_PARAM_FALLBACK, c4 as SHADER_PARAM_KEYS, c5 as SHADER_PRESETS, c6 as SHADER_PRESET_IDS, c7 as ScrollArea, c8 as ScrollAreaProps, c9 as Section, ca as SectionProps, cb as SelectItem, cc as SelectLabel, cd as SelectPopover, ce as SelectRoot, cf as SelectTrigger, cg as Separator, ch as SeparatorProps, ci as ShaderParamKey, cj as ShaderParamSpec, ck as ShaderPreset, cl as ShaderPresetCategory, cm as ShaderPresetId, cn as ShaderSurface, co as ShaderSurfaceHandle, cp as ShaderSurfaceProps, cq as Skeleton, cr as SkeletonAvatar, cs as SkeletonCard, ct as SkeletonProps, cu as SkeletonTable, cv as SkeletonText, cw as Slider, cx as SliderProps, cy as Spinner, cz as SpinnerProps, cA as StarRating, cB as StarRatingProps, cC as StatCard, cD as StatCardProps, cE as StepBuilder, cF as StepBuilderProps, cG as StepDef, m as SurfaceBaseProps, n as SurfaceLayout, o as SurfaceLayoutProps, cH as Switch, cI as SwitchProps, cJ as Tab, cK as TabList, cL as TabPanel, cM as TabsRoot, cN as TagInput, cO as TagInputProps, cP as Text, cQ as TextElement, cR as TextProps, cS as TextRole, cT as TextTone, cU as Textarea, cV as TextareaProps, cW as Toggle, cX as ToggleGroup, cY as ToggleGroupProps, cZ as ToggleProps, c_ as ToolbarButton, c$ as ToolbarContainer, d0 as ToolbarRoot, d1 as ToolbarSeparator, d2 as Tooltip, d3 as TooltipAnchor, d4 as TooltipProvider, d5 as VirtualList, d6 as VirtualListProps, d7 as createBlock, d7 as createSurface, d8 as getShaderFragment, d9 as getShaderPreset } from './index-Slu5hOj1.js';
|
|
3
|
+
import { FormErrors, CommandRootProps, CommandEmptyProps, CommandGroupProps, CommandInputProps as CommandInputProps$1, CommandItemProps, CommandListProps, CommandSeparatorProps } from '@reopt-ai/opt-ui-primitives';
|
|
4
|
+
export { AccordionContentProps, AccordionItemProps, AccordionRootProps, AccordionTriggerProps, Composite, CompositeItem, CompositeProvider, CompositeRow, FormErrors, FormStoreInstance, FormStoreOptions, ValidateOn, useFieldValue, useFormContext, useFormStore } from '@reopt-ai/opt-ui-primitives';
|
|
5
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
6
|
+
import * as react from 'react';
|
|
7
|
+
import { Component, ReactNode, ErrorInfo, ComponentPropsWithoutRef } from 'react';
|
|
8
|
+
export * from '@reopt-ai/opt-charts';
|
|
9
|
+
export { EventSparkline, EventSparklineLabels, EventSparklineProps, MetricsCard, MetricsCardProps, ReportWidget, ReportWidgetConfig, ReportWidgetLabels, ReportWidgetProps, ReportWidgetType, TrendChart, TrendChartProps } from '@reopt-ai/opt-charts';
|
|
10
|
+
export { A as AppMenubar, a as AppMenubarProps, B as BranchSelect, b as BranchSelectProps, C as ColumnDef, c as CommandPalette, d as CommandPaletteProps, e as CommandPaletteTrigger, f as CommandPaletteTriggerProps, g as ContentTabs, h as ContentTabsProps, D as DashboardGrid, i as DashboardGridProps, j as DataTable, k as DataTableProps, l as DeploymentTimeline, m as DeploymentTimelineProps, n as DomainTable, o as DomainTableProps, E as EditorToolbar, p as EditorToolbarProps, q as EnvPanel, r as EnvPanelProps, F as FailureList, s as FailureListLabels, t as FailureListProps, u as FaqAccordion, v as FaqAccordionProps, K as KeyValueEditor, w as KeyValueEditorLabels, x as KeyValueEditorProps, y as KeyValueEntry, N as NotificationToast, P as ProjectSwitcher, z as ProjectSwitcherProps, S as SearchCombobox, G as SearchComboboxProps, H as SettingsForm, I as SettingsFormProps, J as SidebarNav, L as SidebarNavProps, M as StatusSelect, O as StatusSelectProps, T as ToastAction, Q as ToastContextValue, R as ToastMessage, U as ToastProvider, V as ToastProviderProps, W as ToastVariant, X as WorkflowCanvas, Y as WorkflowCanvasConnection, Z as WorkflowCanvasProps, _ as WorkflowCanvasStep, $ as toast, a0 as useToast } from './index-BZ_lBlO1.js';
|
|
11
|
+
import { T as TaskDef, A as ActivityDef, F as FilterGroupDef, Q as QuickActionDef, a as TeamMemberDef, b as FormFieldDef, E as ExportColumn, c as ExportFormat, S as StatCard, d as TabDef, C as ChatConversationDef, e as ChatModelDef, f as ChatStylePresetDef, g as ChatMessageDef } from './types-D4-0lwaE.js';
|
|
12
|
+
export { B as BranchDef, h as ChartConfig, i as ChartDataPoint, j as ChartMargin, k as ChartSeriesDef, l as CommandDef, D as DeploymentStep, m as DomainDef, n as EnvGroupDef, o as EnvVarDef, p as FailureItem, q as FaqItem, r as FilterOption, M as MenuDef, s as MenuItemDef, N as NavItem, t as NavItemDef, P as ProjectDef, u as SelectOption, v as TableColumn, w as TimePreset, x as ToastOptions, y as ToolbarButtonDef } from './types-D4-0lwaE.js';
|
|
13
|
+
import { PaletteConfig, OptTokenName } from '@reopt-ai/opt-palette';
|
|
14
|
+
import { ClassValue } from 'clsx';
|
|
15
|
+
|
|
16
|
+
/**
|
|
17
|
+
* Adapter for schema-based validation (Zod, Valibot, or any library with safeParse).
|
|
18
|
+
* No direct dependency on any schema library.
|
|
19
|
+
*
|
|
20
|
+
* @example
|
|
21
|
+
* ```ts
|
|
22
|
+
* import { schemaValidator } from "@reopt-ai/opt-ui";
|
|
23
|
+
* import { z } from "zod";
|
|
24
|
+
*
|
|
25
|
+
* const form = useFormStore({
|
|
26
|
+
* defaultValues: { email: "", age: 0 },
|
|
27
|
+
* validate: schemaValidator(z.object({
|
|
28
|
+
* email: z.string().email("유효한 이메일을 입력하세요"),
|
|
29
|
+
* age: z.number().min(1, "나이를 입력하세요"),
|
|
30
|
+
* })),
|
|
31
|
+
* });
|
|
32
|
+
* ```
|
|
33
|
+
*/
|
|
34
|
+
interface ParseSuccess {
|
|
35
|
+
success: true;
|
|
36
|
+
}
|
|
37
|
+
interface ParseFailure {
|
|
38
|
+
success: false;
|
|
39
|
+
error: {
|
|
40
|
+
issues: {
|
|
41
|
+
path: (string | number)[];
|
|
42
|
+
message: string;
|
|
43
|
+
}[];
|
|
44
|
+
};
|
|
45
|
+
}
|
|
46
|
+
type ParseResult = ParseSuccess | ParseFailure;
|
|
47
|
+
/**
|
|
48
|
+
* Minimal interface satisfied by Zod schemas, Valibot schemas, and similar
|
|
49
|
+
* libraries that implement `safeParse`. No runtime dependency required.
|
|
50
|
+
*/
|
|
51
|
+
interface SchemaLike {
|
|
52
|
+
safeParse(data: unknown): ParseResult;
|
|
53
|
+
}
|
|
54
|
+
/** Handles schema validator. */
|
|
55
|
+
declare function schemaValidator<V extends Record<string, unknown>>(schema: SchemaLike): (values: V) => FormErrors;
|
|
56
|
+
|
|
57
|
+
/** Props for the error boundary component. */
|
|
58
|
+
interface ErrorBoundaryProps {
|
|
59
|
+
children: ReactNode;
|
|
60
|
+
fallback?: ReactNode | ((error: Error) => ReactNode);
|
|
61
|
+
onError?: (error: Error, info: ErrorInfo) => void;
|
|
62
|
+
}
|
|
63
|
+
interface ErrorBoundaryState {
|
|
64
|
+
error: Error | null;
|
|
65
|
+
}
|
|
66
|
+
declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
|
|
67
|
+
static displayName: string;
|
|
68
|
+
constructor(props: ErrorBoundaryProps);
|
|
69
|
+
static getDerivedStateFromError(error: Error): ErrorBoundaryState;
|
|
70
|
+
componentDidCatch(error: Error, info: ErrorInfo): void;
|
|
71
|
+
render(): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
/** Renders the `Command` component. */
|
|
75
|
+
declare function Command({ className, ...props }: CommandRootProps): react_jsx_runtime.JSX.Element;
|
|
76
|
+
/** Props for the `CommandDialog` component. */
|
|
77
|
+
interface CommandDialogProps {
|
|
78
|
+
/** Open state. */
|
|
79
|
+
open: boolean;
|
|
80
|
+
/** Open state setter. */
|
|
81
|
+
onOpenChange: (open: boolean) => void;
|
|
82
|
+
/** Accessible title (visually hidden by default). */
|
|
83
|
+
title?: string;
|
|
84
|
+
/** Accessible description (visually hidden by default). */
|
|
85
|
+
description?: string;
|
|
86
|
+
/** Optional className for the dialog panel. */
|
|
87
|
+
className?: string;
|
|
88
|
+
/** Optional className for the inner Command root. */
|
|
89
|
+
commandClassName?: string;
|
|
90
|
+
/** Filter behaviour passed through to the inner Command root. */
|
|
91
|
+
shouldFilter?: CommandRootProps["shouldFilter"];
|
|
92
|
+
filter?: CommandRootProps["filter"];
|
|
93
|
+
children: ReactNode;
|
|
94
|
+
}
|
|
95
|
+
/** Renders a Command in a dialog overlay, à la Cmd+K palette. */
|
|
96
|
+
declare function CommandDialog({ open, onOpenChange, title, description, className, commandClassName, shouldFilter, filter, children, }: CommandDialogProps): react_jsx_runtime.JSX.Element;
|
|
97
|
+
/** Props for the `CommandInput` component. */
|
|
98
|
+
interface CommandInputProps extends CommandInputProps$1 {
|
|
99
|
+
/** Trailing content rendered on the right side (e.g. ESC kbd). */
|
|
100
|
+
trailing?: ReactNode;
|
|
101
|
+
/** Optional className for the input wrapper. */
|
|
102
|
+
wrapperClassName?: string;
|
|
103
|
+
}
|
|
104
|
+
/** Renders the `CommandInput` component with a leading search icon. */
|
|
105
|
+
declare function CommandInput({ className, trailing, wrapperClassName, placeholder, "aria-label": ariaLabel, ...props }: CommandInputProps): react_jsx_runtime.JSX.Element;
|
|
106
|
+
/** Renders the `CommandList` component. */
|
|
107
|
+
declare function CommandList({ className, "aria-label": ariaLabel, ...props }: CommandListProps): react_jsx_runtime.JSX.Element;
|
|
108
|
+
/** Renders the `CommandEmpty` component. */
|
|
109
|
+
declare function CommandEmpty({ className, ...props }: CommandEmptyProps): react_jsx_runtime.JSX.Element;
|
|
110
|
+
/** Renders the `CommandGroup` component with an optional heading. */
|
|
111
|
+
declare function CommandGroup({ className, heading, ...props }: CommandGroupProps): react_jsx_runtime.JSX.Element;
|
|
112
|
+
/** Renders the `CommandSeparator` component. */
|
|
113
|
+
declare function CommandSeparator({ className, ...props }: CommandSeparatorProps): react_jsx_runtime.JSX.Element;
|
|
114
|
+
/** Renders the `CommandItem` component. */
|
|
115
|
+
declare function CommandItem({ className, ...props }: CommandItemProps): react_jsx_runtime.JSX.Element;
|
|
116
|
+
/** Renders the `CommandShortcut` component (right-aligned hint). */
|
|
117
|
+
declare function CommandShortcut({ className, ...props }: ComponentPropsWithoutRef<"span">): react_jsx_runtime.JSX.Element;
|
|
118
|
+
|
|
119
|
+
/** Props for {@link PageAside}. */
|
|
120
|
+
interface PageAsideProps {
|
|
121
|
+
/** Content rendered in the sticky top slot (e.g. package switcher). */
|
|
122
|
+
header?: ReactNode;
|
|
123
|
+
/** Main scrollable nav area. */
|
|
124
|
+
children: ReactNode;
|
|
125
|
+
/** Content rendered in the bottom slot (e.g. version label). */
|
|
126
|
+
footer?: ReactNode;
|
|
127
|
+
/**
|
|
128
|
+
* Width utility class. Defaults to `w-60`. Pass `"w-56"`, `"w-64"`, etc.
|
|
129
|
+
*/
|
|
130
|
+
widthClassName?: string;
|
|
131
|
+
/** `aria-label` for the underlying `<aside>`. */
|
|
132
|
+
label?: string;
|
|
133
|
+
/** Hide aside below `md` breakpoint. Defaults to true. */
|
|
134
|
+
hideOnMobile?: boolean;
|
|
135
|
+
className?: string;
|
|
136
|
+
/** Override the header slot's chrome (default: `px-3 py-3`). */
|
|
137
|
+
headerClassName?: string;
|
|
138
|
+
/** Override the body slot's chrome (default: `px-3 py-3`). */
|
|
139
|
+
bodyClassName?: string;
|
|
140
|
+
/** Override the footer slot's chrome (default: `px-4 py-3`). */
|
|
141
|
+
footerClassName?: string;
|
|
142
|
+
}
|
|
143
|
+
/**
|
|
144
|
+
* Sticky page-level sidebar chrome. Owns position/border/surface and a
|
|
145
|
+
* three-slot layout (header / scroll body / footer). Doesn't prescribe the
|
|
146
|
+
* nav surface — drop `SidebarNav`, custom tree, tag list, etc. into `children`.
|
|
147
|
+
*/
|
|
148
|
+
declare function PageAside({ header, children, footer, widthClassName, label, hideOnMobile, className, headerClassName, bodyClassName, footerClassName, }: PageAsideProps): react_jsx_runtime.JSX.Element;
|
|
149
|
+
declare namespace PageAside {
|
|
150
|
+
var displayName: string;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
/** Localized labels for the task list component. */
|
|
154
|
+
interface TaskListLabels {
|
|
155
|
+
title?: string;
|
|
156
|
+
emptyMessage?: string;
|
|
157
|
+
completedOf?: string;
|
|
158
|
+
priority?: {
|
|
159
|
+
low?: string;
|
|
160
|
+
medium?: string;
|
|
161
|
+
high?: string;
|
|
162
|
+
urgent?: string;
|
|
163
|
+
};
|
|
164
|
+
status?: {
|
|
165
|
+
todo?: string;
|
|
166
|
+
"in-progress"?: string;
|
|
167
|
+
review?: string;
|
|
168
|
+
done?: string;
|
|
169
|
+
};
|
|
170
|
+
moreItems?: string;
|
|
171
|
+
}
|
|
172
|
+
/** Props for the task list component. */
|
|
173
|
+
interface TaskListProps {
|
|
174
|
+
tasks: TaskDef[];
|
|
175
|
+
title?: string;
|
|
176
|
+
onTaskClick?: (task: TaskDef) => void;
|
|
177
|
+
onTaskStatusChange?: (task: TaskDef, completed: boolean) => void;
|
|
178
|
+
emptyMessage?: string;
|
|
179
|
+
showSubtasks?: boolean;
|
|
180
|
+
/** Maximum number of tasks to display */
|
|
181
|
+
maxItems?: number;
|
|
182
|
+
/** Custom labels for i18n support */
|
|
183
|
+
labels?: TaskListLabels;
|
|
184
|
+
className?: string;
|
|
185
|
+
}
|
|
186
|
+
/** Renders the task list component. */
|
|
187
|
+
declare function TaskList({ tasks, title, onTaskClick, onTaskStatusChange, emptyMessage, showSubtasks, maxItems, labels: customLabels, className, }: TaskListProps): react_jsx_runtime.JSX.Element;
|
|
188
|
+
|
|
189
|
+
interface TimeAgoLabels {
|
|
190
|
+
justNow: string;
|
|
191
|
+
minutesAgo: string;
|
|
192
|
+
hoursAgo: string;
|
|
193
|
+
daysAgo: string;
|
|
194
|
+
}
|
|
195
|
+
interface ActivityVerbLabels {
|
|
196
|
+
created: string;
|
|
197
|
+
updated: string;
|
|
198
|
+
completed: string;
|
|
199
|
+
commented: string;
|
|
200
|
+
assigned: string;
|
|
201
|
+
deployed: string;
|
|
202
|
+
merged: string;
|
|
203
|
+
}
|
|
204
|
+
/** Localized labels for the activity feed component. */
|
|
205
|
+
interface ActivityFeedLabels {
|
|
206
|
+
title?: string;
|
|
207
|
+
emptyMessage?: string;
|
|
208
|
+
moreItems?: string;
|
|
209
|
+
timeAgo?: Partial<TimeAgoLabels>;
|
|
210
|
+
activityVerbs?: Partial<ActivityVerbLabels>;
|
|
211
|
+
}
|
|
212
|
+
/** Props for the activity feed component. */
|
|
213
|
+
interface ActivityFeedProps {
|
|
214
|
+
activities: ActivityDef[];
|
|
215
|
+
title?: string;
|
|
216
|
+
maxItems?: number;
|
|
217
|
+
onActivityClick?: (activity: ActivityDef) => void;
|
|
218
|
+
/** Called when "show more" button is clicked */
|
|
219
|
+
onShowMore?: () => void;
|
|
220
|
+
emptyMessage?: string;
|
|
221
|
+
/** Custom labels for i18n support */
|
|
222
|
+
labels?: ActivityFeedLabels;
|
|
223
|
+
/** Locale for date formatting (default: 'ko-KR') */
|
|
224
|
+
locale?: string;
|
|
225
|
+
/** Show loading state */
|
|
226
|
+
loading?: boolean;
|
|
227
|
+
/** Layout style: list (default) shows time below, compact shows time inline */
|
|
228
|
+
layout?: "list" | "compact";
|
|
229
|
+
/** Render action buttons for each activity item */
|
|
230
|
+
renderActions?: (activity: ActivityDef) => ReactNode;
|
|
231
|
+
className?: string;
|
|
232
|
+
}
|
|
233
|
+
/** Renders the activity feed component. */
|
|
234
|
+
declare function ActivityFeed({ activities, title, maxItems, onActivityClick, onShowMore, emptyMessage, labels: customLabels, locale, loading, layout, renderActions, className, }: ActivityFeedProps): react_jsx_runtime.JSX.Element;
|
|
235
|
+
declare namespace ActivityFeed {
|
|
236
|
+
var displayName: string;
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
/** Localized labels for the filter bar component. */
|
|
240
|
+
interface FilterBarLabels {
|
|
241
|
+
clearAll?: string;
|
|
242
|
+
searchPlaceholder?: string;
|
|
243
|
+
}
|
|
244
|
+
/**
|
|
245
|
+
* Composable filter bar supporting 5 filter types:
|
|
246
|
+
* - `search`: Free-text input with debounce
|
|
247
|
+
* - `select`: Single-value dropdown
|
|
248
|
+
* - `multiselect`: Multi-value checkbox dropdown with popover
|
|
249
|
+
* - `toggle`: Boolean switch
|
|
250
|
+
* - `dateRange`: Date range picker
|
|
251
|
+
*
|
|
252
|
+
* Each filter is defined via `FilterGroupDef` (see lib/types.ts).
|
|
253
|
+
* The parent component manages filter state and passes it back via `onFilterChange`.
|
|
254
|
+
*/
|
|
255
|
+
interface FilterBarProps {
|
|
256
|
+
filters: FilterGroupDef[];
|
|
257
|
+
onFilterChange?: (filterId: string, value: string | string[] | boolean) => void;
|
|
258
|
+
onDateRangeChange?: (filterId: string, range: DateRange) => void;
|
|
259
|
+
onClearAll?: () => void;
|
|
260
|
+
labels?: FilterBarLabels;
|
|
261
|
+
/** Slot next to Clear All button (e.g. SavedFilters) */
|
|
262
|
+
presetActions?: ReactNode;
|
|
263
|
+
className?: string;
|
|
264
|
+
}
|
|
265
|
+
/** Renders the filter bar component. */
|
|
266
|
+
declare function FilterBar({ filters, onFilterChange, onDateRangeChange, onClearAll, labels: customLabels, presetActions, className, }: FilterBarProps): react_jsx_runtime.JSX.Element;
|
|
267
|
+
|
|
268
|
+
/** Localized labels for the quick actions component. */
|
|
269
|
+
interface QuickActionsLabels {
|
|
270
|
+
title?: string;
|
|
271
|
+
}
|
|
272
|
+
/** Props for the quick actions component. */
|
|
273
|
+
interface QuickActionsProps {
|
|
274
|
+
actions: QuickActionDef[];
|
|
275
|
+
title?: string;
|
|
276
|
+
layout?: "grid" | "list";
|
|
277
|
+
columns?: 2 | 3 | 4;
|
|
278
|
+
/** Show descriptions in grid layout via tooltip */
|
|
279
|
+
showDescriptionInGrid?: boolean;
|
|
280
|
+
/** Enable keyboard shortcut bindings for actions with shortcuts defined */
|
|
281
|
+
bindShortcuts?: boolean;
|
|
282
|
+
/** Custom labels for i18n support */
|
|
283
|
+
labels?: QuickActionsLabels;
|
|
284
|
+
className?: string;
|
|
285
|
+
}
|
|
286
|
+
/** Renders the quick actions component. */
|
|
287
|
+
declare function QuickActions({ actions, title, layout, columns, showDescriptionInGrid, bindShortcuts, labels: customLabels, className, }: QuickActionsProps): react_jsx_runtime.JSX.Element;
|
|
288
|
+
declare namespace QuickActions {
|
|
289
|
+
var displayName: string;
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
/** Localized labels for the team member list component. */
|
|
293
|
+
interface TeamMemberListLabels {
|
|
294
|
+
title?: string;
|
|
295
|
+
emptyMessage?: string;
|
|
296
|
+
onlineCount?: string;
|
|
297
|
+
moreMembers?: string;
|
|
298
|
+
moreCompact?: string;
|
|
299
|
+
status?: {
|
|
300
|
+
online?: string;
|
|
301
|
+
away?: string;
|
|
302
|
+
busy?: string;
|
|
303
|
+
offline?: string;
|
|
304
|
+
};
|
|
305
|
+
}
|
|
306
|
+
/** Props for the team member list component. */
|
|
307
|
+
interface TeamMemberListProps {
|
|
308
|
+
members: TeamMemberDef[];
|
|
309
|
+
title?: string;
|
|
310
|
+
layout?: "list" | "compact" | "avatars-only";
|
|
311
|
+
maxDisplay?: number;
|
|
312
|
+
onMemberClick?: (member: TeamMemberDef) => void;
|
|
313
|
+
/** Called when "more" button is clicked */
|
|
314
|
+
onShowMore?: () => void;
|
|
315
|
+
emptyMessage?: string;
|
|
316
|
+
/** Custom labels for i18n support */
|
|
317
|
+
labels?: TeamMemberListLabels;
|
|
318
|
+
className?: string;
|
|
319
|
+
}
|
|
320
|
+
/** Renders the team member list component. */
|
|
321
|
+
declare function TeamMemberList({ members, title, layout, maxDisplay, onMemberClick, onShowMore, emptyMessage, labels: customLabels, className, }: TeamMemberListProps): react_jsx_runtime.JSX.Element;
|
|
322
|
+
|
|
323
|
+
/** Localized labels for the auth form component. */
|
|
324
|
+
interface AuthFormLabels {
|
|
325
|
+
loginTitle?: string;
|
|
326
|
+
signupTitle?: string;
|
|
327
|
+
emailLabel?: string;
|
|
328
|
+
passwordLabel?: string;
|
|
329
|
+
confirmPasswordLabel?: string;
|
|
330
|
+
rememberMeLabel?: string;
|
|
331
|
+
loginButton?: string;
|
|
332
|
+
signupButton?: string;
|
|
333
|
+
emailRequired?: string;
|
|
334
|
+
emailInvalid?: string;
|
|
335
|
+
passwordRequired?: string;
|
|
336
|
+
passwordMinLength?: string;
|
|
337
|
+
passwordMismatch?: string;
|
|
338
|
+
}
|
|
339
|
+
/** Props for the auth form component. */
|
|
340
|
+
interface AuthFormProps {
|
|
341
|
+
defaultMode?: "login" | "signup";
|
|
342
|
+
mode?: "login" | "signup";
|
|
343
|
+
onModeChange?: (mode: "login" | "signup") => void;
|
|
344
|
+
showRememberMe?: boolean;
|
|
345
|
+
minPasswordLength?: number;
|
|
346
|
+
onSubmit?: (values: {
|
|
347
|
+
email: string;
|
|
348
|
+
password: string;
|
|
349
|
+
confirmPassword?: string;
|
|
350
|
+
rememberMe?: boolean;
|
|
351
|
+
mode: "login" | "signup";
|
|
352
|
+
}) => void;
|
|
353
|
+
/** Custom fields rendered between email and password (e.g., name fields for signup) */
|
|
354
|
+
renderExtraFields?: (mode: "login" | "signup") => ReactNode;
|
|
355
|
+
labels?: AuthFormLabels;
|
|
356
|
+
ariaLabel?: string;
|
|
357
|
+
}
|
|
358
|
+
/** Renders the auth form component. */
|
|
359
|
+
declare function AuthForm({ defaultMode, mode: controlledMode, onModeChange, showRememberMe, minPasswordLength, onSubmit, renderExtraFields, labels, ariaLabel, }: AuthFormProps): react_jsx_runtime.JSX.Element;
|
|
360
|
+
|
|
361
|
+
/** Localized labels for the dynamic field form component. */
|
|
362
|
+
interface DynamicFieldFormLabels {
|
|
363
|
+
addButton?: string;
|
|
364
|
+
submitButton?: string;
|
|
365
|
+
removeAriaLabel?: string;
|
|
366
|
+
itemLabel?: string;
|
|
367
|
+
itemPlaceholder?: string;
|
|
368
|
+
itemRequired?: string;
|
|
369
|
+
}
|
|
370
|
+
/** Props for the dynamic field form component. */
|
|
371
|
+
interface DynamicFieldFormProps {
|
|
372
|
+
initialCount?: number;
|
|
373
|
+
minFields?: number;
|
|
374
|
+
maxFields?: number;
|
|
375
|
+
fieldType?: "text" | "email" | "url" | "number";
|
|
376
|
+
validateField?: (value: string, index: number) => string | undefined;
|
|
377
|
+
onSubmit?: (values: string[]) => void;
|
|
378
|
+
onFieldsChange?: (count: number) => void;
|
|
379
|
+
labels?: DynamicFieldFormLabels;
|
|
380
|
+
ariaLabel?: string;
|
|
381
|
+
}
|
|
382
|
+
/** Renders the dynamic field form component. */
|
|
383
|
+
declare function DynamicFieldForm({ initialCount, minFields, maxFields, fieldType, validateField, onSubmit, onFieldsChange, labels, ariaLabel, }: DynamicFieldFormProps): react_jsx_runtime.JSX.Element;
|
|
384
|
+
|
|
385
|
+
/** Localized labels for the file upload form component. */
|
|
386
|
+
interface FileUploadFormLabels {
|
|
387
|
+
titleLabel?: string;
|
|
388
|
+
titlePlaceholder?: string;
|
|
389
|
+
titleRequired?: string;
|
|
390
|
+
descriptionLabel?: string;
|
|
391
|
+
descriptionPlaceholder?: string;
|
|
392
|
+
fileLabel?: string;
|
|
393
|
+
submitButton?: string;
|
|
394
|
+
successMessage?: string;
|
|
395
|
+
columnMappingLabel?: string;
|
|
396
|
+
}
|
|
397
|
+
/** Props for the file upload form component. */
|
|
398
|
+
interface FileUploadFormProps {
|
|
399
|
+
accept?: string;
|
|
400
|
+
showPreview?: boolean;
|
|
401
|
+
showFileInfo?: boolean;
|
|
402
|
+
showDescription?: boolean;
|
|
403
|
+
descriptionRows?: number;
|
|
404
|
+
titleRequired?: boolean;
|
|
405
|
+
maxFileSize?: number;
|
|
406
|
+
onSubmit?: (values: {
|
|
407
|
+
title: string;
|
|
408
|
+
description: string;
|
|
409
|
+
file: File | null;
|
|
410
|
+
}) => void;
|
|
411
|
+
onFileChange?: (file: File | null) => void;
|
|
412
|
+
/** Called after file is selected to allow parsing/preview. Return ReactNode to show column mapping UI. */
|
|
413
|
+
onPreview?: (file: File) => void;
|
|
414
|
+
/** Custom column mapping UI rendered after file selection */
|
|
415
|
+
columnMapping?: ReactNode;
|
|
416
|
+
labels?: FileUploadFormLabels;
|
|
417
|
+
ariaLabel?: string;
|
|
418
|
+
}
|
|
419
|
+
/** Renders the file upload form component. */
|
|
420
|
+
declare function FileUploadForm({ accept, showPreview, showFileInfo, showDescription, descriptionRows, titleRequired, maxFileSize, onSubmit, onFileChange, onPreview, columnMapping, labels, ariaLabel, }: FileUploadFormProps): react_jsx_runtime.JSX.Element;
|
|
421
|
+
|
|
422
|
+
/** Defines the wizard step shape. */
|
|
423
|
+
interface WizardStepDef {
|
|
424
|
+
id: string;
|
|
425
|
+
label: string;
|
|
426
|
+
fields: string[];
|
|
427
|
+
}
|
|
428
|
+
/** Localized labels for the wizard form component. */
|
|
429
|
+
interface WizardFormLabels {
|
|
430
|
+
stepsLabel?: string;
|
|
431
|
+
backButton?: string;
|
|
432
|
+
nextButton?: string;
|
|
433
|
+
submitButton?: string;
|
|
434
|
+
successMessage?: string;
|
|
435
|
+
resetLink?: string;
|
|
436
|
+
reviewTitle?: string;
|
|
437
|
+
emptyValue?: string;
|
|
438
|
+
}
|
|
439
|
+
/** Props for the wizard form component. */
|
|
440
|
+
interface WizardFormProps {
|
|
441
|
+
fields: FormFieldDef[];
|
|
442
|
+
steps: WizardStepDef[];
|
|
443
|
+
showReview?: boolean;
|
|
444
|
+
onSubmit?: (values: Record<string, unknown>) => void;
|
|
445
|
+
onStepChange?: (stepIndex: number) => void;
|
|
446
|
+
resetOnSuccess?: boolean;
|
|
447
|
+
labels?: WizardFormLabels;
|
|
448
|
+
ariaLabel?: string;
|
|
449
|
+
}
|
|
450
|
+
/** Renders the wizard form component. */
|
|
451
|
+
declare function WizardForm({ fields, steps, showReview, onSubmit, onStepChange, resetOnSuccess, labels, ariaLabel, }: WizardFormProps): react_jsx_runtime.JSX.Element;
|
|
452
|
+
|
|
453
|
+
/** Popular icon names for picker UIs */
|
|
454
|
+
declare const POPULAR_ICONS: readonly ["click", "eye", "search", "user", "shopping-cart", "credit-card", "heart", "star", "bell", "download", "upload", "share", "mail", "settings", "globe", "zap", "trending-up", "bar-chart", "check-circle", "x-circle"];
|
|
455
|
+
/** Color presets for event icon backgrounds */
|
|
456
|
+
declare const COLOR_PRESETS: readonly ["#3b82f6", "#8b5cf6", "#ec4899", "#ef4444", "#f59e0b", "#10b981", "#06b6d4", "#6366f1", "#f97316", "#14b8a6"];
|
|
457
|
+
/** Props for the event icon component. */
|
|
458
|
+
interface EventIconProps {
|
|
459
|
+
/** Semantic icon key, legacy icon key, or ReactNode */
|
|
460
|
+
icon: string | react.ReactNode;
|
|
461
|
+
/** Custom icon color; when omitted, theme accent tokens are used */
|
|
462
|
+
color?: string;
|
|
463
|
+
/** Icon size */
|
|
464
|
+
size?: "sm" | "md" | "lg";
|
|
465
|
+
className?: string;
|
|
466
|
+
labels?: EventIconLabels;
|
|
467
|
+
}
|
|
468
|
+
/** Localized labels for the event icon component. */
|
|
469
|
+
interface EventIconLabels {
|
|
470
|
+
eventLabelPrefix?: string;
|
|
471
|
+
defaultAriaLabel?: string;
|
|
472
|
+
}
|
|
473
|
+
/** Renders the event icon component. */
|
|
474
|
+
declare function EventIcon({ icon, color, size, className, labels: customLabels, }: EventIconProps): react_jsx_runtime.JSX.Element;
|
|
475
|
+
declare namespace EventIcon {
|
|
476
|
+
var displayName: string;
|
|
477
|
+
}
|
|
478
|
+
|
|
479
|
+
/** Type definition for connection status. */
|
|
480
|
+
type ConnectionStatus = "connected" | "disconnected" | "connecting" | "error";
|
|
481
|
+
/** Props for the connection indicator component. */
|
|
482
|
+
interface ConnectionIndicatorProps {
|
|
483
|
+
status: ConnectionStatus;
|
|
484
|
+
label?: string;
|
|
485
|
+
showLabel?: boolean;
|
|
486
|
+
className?: string;
|
|
487
|
+
}
|
|
488
|
+
/** Renders the connection indicator component. */
|
|
489
|
+
declare function ConnectionIndicator({ status, label, showLabel, className, }: ConnectionIndicatorProps): react_jsx_runtime.JSX.Element;
|
|
490
|
+
declare namespace ConnectionIndicator {
|
|
491
|
+
var displayName: string;
|
|
492
|
+
}
|
|
493
|
+
|
|
494
|
+
/** Defines the floating action shape. */
|
|
495
|
+
interface FloatingAction {
|
|
496
|
+
id: string;
|
|
497
|
+
label: string;
|
|
498
|
+
icon?: react.ReactNode;
|
|
499
|
+
variant?: "default" | "primary" | "danger";
|
|
500
|
+
disabled?: boolean;
|
|
501
|
+
}
|
|
502
|
+
/** Props for the floating action bar component. */
|
|
503
|
+
interface FloatingActionBarProps {
|
|
504
|
+
actions: FloatingAction[];
|
|
505
|
+
selectedCount?: number;
|
|
506
|
+
onAction: (actionId: string) => void;
|
|
507
|
+
onDismiss?: () => void;
|
|
508
|
+
className?: string;
|
|
509
|
+
labels?: FloatingActionBarLabels;
|
|
510
|
+
}
|
|
511
|
+
/** Localized labels for the floating action bar component. */
|
|
512
|
+
interface FloatingActionBarLabels {
|
|
513
|
+
toolbarAriaLabel?: string;
|
|
514
|
+
selectedLabel?: (count: number) => string;
|
|
515
|
+
dismissAriaLabel?: string;
|
|
516
|
+
}
|
|
517
|
+
/** Renders the floating action bar component. */
|
|
518
|
+
declare function FloatingActionBar({ actions, selectedCount, onAction, onDismiss, className, labels: customLabels, }: FloatingActionBarProps): react_jsx_runtime.JSX.Element | null;
|
|
519
|
+
declare namespace FloatingActionBar {
|
|
520
|
+
var displayName: string;
|
|
521
|
+
}
|
|
522
|
+
|
|
523
|
+
/** Defines the template shape. */
|
|
524
|
+
interface TemplateDef {
|
|
525
|
+
id: string;
|
|
526
|
+
name: string;
|
|
527
|
+
description?: string;
|
|
528
|
+
icon?: react.ReactNode;
|
|
529
|
+
category?: string;
|
|
530
|
+
featured?: boolean;
|
|
531
|
+
tags?: string[];
|
|
532
|
+
}
|
|
533
|
+
/** Localized labels for the template picker component. */
|
|
534
|
+
interface TemplatePickerLabels {
|
|
535
|
+
ariaLabel?: string;
|
|
536
|
+
defaultCategory?: string;
|
|
537
|
+
searchPlaceholder?: string;
|
|
538
|
+
featuredBadge?: string;
|
|
539
|
+
}
|
|
540
|
+
/** Props for the template picker component. */
|
|
541
|
+
interface TemplatePickerProps {
|
|
542
|
+
templates: TemplateDef[];
|
|
543
|
+
selected?: string;
|
|
544
|
+
onSelect: (templateId: string) => void;
|
|
545
|
+
labels?: TemplatePickerLabels;
|
|
546
|
+
showSearch?: boolean;
|
|
547
|
+
className?: string;
|
|
548
|
+
}
|
|
549
|
+
/** Renders the template picker component. */
|
|
550
|
+
declare function TemplatePicker({ templates, selected, onSelect, labels: customLabels, showSearch, className, }: TemplatePickerProps): react_jsx_runtime.JSX.Element;
|
|
551
|
+
declare namespace TemplatePicker {
|
|
552
|
+
var displayName: string;
|
|
553
|
+
}
|
|
554
|
+
|
|
555
|
+
/** Localized labels for the code snippet viewer component. */
|
|
556
|
+
interface CodeSnippetViewerLabels {
|
|
557
|
+
copy?: string;
|
|
558
|
+
copied?: string;
|
|
559
|
+
codeRegion?: string;
|
|
560
|
+
}
|
|
561
|
+
/** Visual tone options for code snippet syntax surfaces. */
|
|
562
|
+
type CodeSnippetSyntaxTheme = "default" | "muted" | "dark" | "terminal";
|
|
563
|
+
/** Props for the code snippet viewer component. */
|
|
564
|
+
interface CodeSnippetViewerProps {
|
|
565
|
+
code: string;
|
|
566
|
+
language?: string;
|
|
567
|
+
title?: string;
|
|
568
|
+
showLineNumbers?: boolean;
|
|
569
|
+
showCopyButton?: boolean;
|
|
570
|
+
maxHeight?: number;
|
|
571
|
+
syntaxTheme?: CodeSnippetSyntaxTheme;
|
|
572
|
+
className?: string;
|
|
573
|
+
labels?: CodeSnippetViewerLabels;
|
|
574
|
+
}
|
|
575
|
+
/** Renders the code snippet viewer component. */
|
|
576
|
+
declare function CodeSnippetViewer({ code, language, title, showLineNumbers, showCopyButton, maxHeight, syntaxTheme, className, labels: customLabels, }: CodeSnippetViewerProps): react_jsx_runtime.JSX.Element;
|
|
577
|
+
declare namespace CodeSnippetViewer {
|
|
578
|
+
var displayName: string;
|
|
579
|
+
}
|
|
580
|
+
|
|
581
|
+
/** Defines the property shape. */
|
|
582
|
+
interface PropertyDef {
|
|
583
|
+
name: string;
|
|
584
|
+
type: string;
|
|
585
|
+
description?: string;
|
|
586
|
+
exampleValue?: string;
|
|
587
|
+
eventCount?: number;
|
|
588
|
+
}
|
|
589
|
+
/** Defines the property group shape. */
|
|
590
|
+
interface PropertyGroup {
|
|
591
|
+
name: string;
|
|
592
|
+
properties: PropertyDef[];
|
|
593
|
+
}
|
|
594
|
+
/** Localized labels for the property explorer component. */
|
|
595
|
+
interface PropertyExplorerLabels {
|
|
596
|
+
searchPlaceholder?: string;
|
|
597
|
+
noPropertiesFound?: string;
|
|
598
|
+
}
|
|
599
|
+
/** Props for the property explorer component. */
|
|
600
|
+
interface PropertyExplorerProps {
|
|
601
|
+
groups: PropertyGroup[];
|
|
602
|
+
onSelect?: (property: PropertyDef) => void;
|
|
603
|
+
className?: string;
|
|
604
|
+
labels?: PropertyExplorerLabels;
|
|
605
|
+
}
|
|
606
|
+
/** Renders the property explorer component. */
|
|
607
|
+
declare function PropertyExplorer({ groups, onSelect, className, labels: customLabels, }: PropertyExplorerProps): react_jsx_runtime.JSX.Element;
|
|
608
|
+
declare namespace PropertyExplorer {
|
|
609
|
+
var displayName: string;
|
|
610
|
+
}
|
|
611
|
+
|
|
612
|
+
/** Localized labels for the query results table component. */
|
|
613
|
+
interface QueryResultsTableLabels {
|
|
614
|
+
emptyMessage?: string;
|
|
615
|
+
loadingMessage?: string;
|
|
616
|
+
rowsSuffix?: string;
|
|
617
|
+
}
|
|
618
|
+
/** Props for the query results table component. */
|
|
619
|
+
interface QueryResultsTableProps {
|
|
620
|
+
columns: string[];
|
|
621
|
+
rows: Array<Record<string, unknown>>;
|
|
622
|
+
maxHeight?: number;
|
|
623
|
+
emptyMessage?: string;
|
|
624
|
+
loading?: boolean;
|
|
625
|
+
error?: string;
|
|
626
|
+
labels?: QueryResultsTableLabels;
|
|
627
|
+
className?: string;
|
|
628
|
+
}
|
|
629
|
+
/** Renders the query results table component. */
|
|
630
|
+
declare function QueryResultsTable({ columns, rows, maxHeight, emptyMessage, loading, error, labels: customLabels, className, }: QueryResultsTableProps): react_jsx_runtime.JSX.Element;
|
|
631
|
+
declare namespace QueryResultsTable {
|
|
632
|
+
var displayName: string;
|
|
633
|
+
}
|
|
634
|
+
|
|
635
|
+
/** Defines the alert condition shape. */
|
|
636
|
+
interface AlertCondition {
|
|
637
|
+
metric: string;
|
|
638
|
+
operator: "gt" | "lt" | "eq" | "gte" | "lte";
|
|
639
|
+
threshold: number;
|
|
640
|
+
}
|
|
641
|
+
/** Configuration for alert. */
|
|
642
|
+
interface AlertConfig {
|
|
643
|
+
name: string;
|
|
644
|
+
conditions: AlertCondition[];
|
|
645
|
+
channels: string[];
|
|
646
|
+
frequency: "realtime" | "hourly" | "daily";
|
|
647
|
+
enabled: boolean;
|
|
648
|
+
}
|
|
649
|
+
/** Localized labels for the alert builder component. */
|
|
650
|
+
interface AlertBuilderLabels {
|
|
651
|
+
alertNameLabel?: string;
|
|
652
|
+
conditionsLabel?: string;
|
|
653
|
+
metricLabel?: string;
|
|
654
|
+
operatorLabel?: string;
|
|
655
|
+
thresholdLabel?: string;
|
|
656
|
+
removeConditionLabel?: string;
|
|
657
|
+
addConditionButton?: string;
|
|
658
|
+
checkFrequencyLabel?: string;
|
|
659
|
+
notificationChannelsLabel?: string;
|
|
660
|
+
emptyMessage?: string;
|
|
661
|
+
}
|
|
662
|
+
/** Props for the alert builder component. */
|
|
663
|
+
interface AlertBuilderProps {
|
|
664
|
+
value: AlertConfig;
|
|
665
|
+
onChange: (config: AlertConfig) => void;
|
|
666
|
+
metrics?: string[];
|
|
667
|
+
/** Dynamic event options for the metric selector. When provided, overrides `metrics`. */
|
|
668
|
+
eventOptions?: {
|
|
669
|
+
id: string;
|
|
670
|
+
name: string;
|
|
671
|
+
}[];
|
|
672
|
+
channels?: {
|
|
673
|
+
id: string;
|
|
674
|
+
label: string;
|
|
675
|
+
}[];
|
|
676
|
+
labels?: AlertBuilderLabels;
|
|
677
|
+
className?: string;
|
|
678
|
+
}
|
|
679
|
+
/** Renders the alert builder component. */
|
|
680
|
+
declare function AlertBuilder({ value, onChange, metrics, eventOptions, channels, labels: customLabels, className, }: AlertBuilderProps): react_jsx_runtime.JSX.Element;
|
|
681
|
+
declare namespace AlertBuilder {
|
|
682
|
+
var displayName: string;
|
|
683
|
+
}
|
|
684
|
+
|
|
685
|
+
/** Localized labels for the sql editor component. */
|
|
686
|
+
interface SqlEditorLabels {
|
|
687
|
+
placeholder?: string;
|
|
688
|
+
runHint?: string;
|
|
689
|
+
runButton?: string;
|
|
690
|
+
}
|
|
691
|
+
/** Props for the sql editor component. */
|
|
692
|
+
interface SqlEditorProps {
|
|
693
|
+
value: string;
|
|
694
|
+
onChange: (sql: string) => void;
|
|
695
|
+
onRun?: (sql: string) => void;
|
|
696
|
+
placeholder?: string;
|
|
697
|
+
readOnly?: boolean;
|
|
698
|
+
height?: number;
|
|
699
|
+
labels?: SqlEditorLabels;
|
|
700
|
+
className?: string;
|
|
701
|
+
}
|
|
702
|
+
/** Renders the sql editor component. */
|
|
703
|
+
declare function SqlEditor({ value, onChange, onRun, placeholder, readOnly, height, labels: customLabels, className, }: SqlEditorProps): react_jsx_runtime.JSX.Element;
|
|
704
|
+
declare namespace SqlEditor {
|
|
705
|
+
var displayName: string;
|
|
706
|
+
}
|
|
707
|
+
|
|
708
|
+
/** Defines the event meta shape. */
|
|
709
|
+
interface EventMeta {
|
|
710
|
+
name: string;
|
|
711
|
+
displayName: string;
|
|
712
|
+
icon: string;
|
|
713
|
+
color: string;
|
|
714
|
+
tags: string[];
|
|
715
|
+
description: string;
|
|
716
|
+
}
|
|
717
|
+
/** Props for the event meta editor component. */
|
|
718
|
+
interface EventMetaEditorProps {
|
|
719
|
+
value: EventMeta;
|
|
720
|
+
onChange: (meta: EventMeta) => void;
|
|
721
|
+
icons?: IconDef[];
|
|
722
|
+
className?: string;
|
|
723
|
+
labels?: EventMetaEditorLabels;
|
|
724
|
+
}
|
|
725
|
+
/** Localized labels for the event meta editor component. */
|
|
726
|
+
interface EventMetaEditorLabels {
|
|
727
|
+
icon?: string;
|
|
728
|
+
color?: string;
|
|
729
|
+
name?: string;
|
|
730
|
+
displayName?: string;
|
|
731
|
+
description?: string;
|
|
732
|
+
tags?: string;
|
|
733
|
+
namePlaceholder?: string;
|
|
734
|
+
displayNamePlaceholder?: string;
|
|
735
|
+
descriptionPlaceholder?: string;
|
|
736
|
+
tagsPlaceholder?: string;
|
|
737
|
+
emptyTagsMessage?: string;
|
|
738
|
+
}
|
|
739
|
+
/** Renders the event meta editor component. */
|
|
740
|
+
declare function EventMetaEditor({ value, onChange, icons, className, labels: customLabels, }: EventMetaEditorProps): react_jsx_runtime.JSX.Element;
|
|
741
|
+
declare namespace EventMetaEditor {
|
|
742
|
+
var displayName: string;
|
|
743
|
+
}
|
|
744
|
+
|
|
745
|
+
/** Defines the widget shape. */
|
|
746
|
+
interface WidgetDef {
|
|
747
|
+
id: string;
|
|
748
|
+
x: number;
|
|
749
|
+
y: number;
|
|
750
|
+
w: number;
|
|
751
|
+
h: number;
|
|
752
|
+
minW?: number;
|
|
753
|
+
minH?: number;
|
|
754
|
+
content: react.ReactNode;
|
|
755
|
+
}
|
|
756
|
+
/** Props for the widget grid component. */
|
|
757
|
+
interface WidgetGridProps {
|
|
758
|
+
widgets: WidgetDef[];
|
|
759
|
+
cols?: number;
|
|
760
|
+
rowHeight?: number;
|
|
761
|
+
gap?: number;
|
|
762
|
+
onLayoutChange?: (layout: Array<{
|
|
763
|
+
id: string;
|
|
764
|
+
x: number;
|
|
765
|
+
y: number;
|
|
766
|
+
w: number;
|
|
767
|
+
h: number;
|
|
768
|
+
}>) => void;
|
|
769
|
+
/** Enable drag-to-reorder */
|
|
770
|
+
editable?: boolean;
|
|
771
|
+
/** Called when a widget is dragged to a new position */
|
|
772
|
+
onReorder?: (widgetId: string, fromIndex: number, toIndex: number) => void;
|
|
773
|
+
labels?: WidgetGridLabels;
|
|
774
|
+
className?: string;
|
|
775
|
+
}
|
|
776
|
+
/** Localized labels for the widget grid component. */
|
|
777
|
+
interface WidgetGridLabels {
|
|
778
|
+
emptyMessage?: string;
|
|
779
|
+
}
|
|
780
|
+
/** Renders the widget grid component. */
|
|
781
|
+
declare function WidgetGrid({ widgets, cols, rowHeight, gap, editable, onReorder, labels: customLabels, className, }: WidgetGridProps): react_jsx_runtime.JSX.Element;
|
|
782
|
+
declare namespace WidgetGrid {
|
|
783
|
+
var displayName: string;
|
|
784
|
+
}
|
|
785
|
+
|
|
786
|
+
/** Type definition for report builder chart type. */
|
|
787
|
+
type ReportBuilderChartType = "line" | "bar" | "pie" | "gauge" | "scatter" | "number" | "table" | "funnel" | "retention";
|
|
788
|
+
/** Defines the chart type shape. */
|
|
789
|
+
interface ChartTypeDef {
|
|
790
|
+
type: ReportBuilderChartType;
|
|
791
|
+
label: string;
|
|
792
|
+
icon: string;
|
|
793
|
+
}
|
|
794
|
+
/** Type definition for report builder step. */
|
|
795
|
+
type ReportBuilderStep = "type" | "config" | "style" | "preview";
|
|
796
|
+
/** Defines the data source shape. */
|
|
797
|
+
interface DataSourceDef {
|
|
798
|
+
id: string;
|
|
799
|
+
label: string;
|
|
800
|
+
description?: string;
|
|
801
|
+
}
|
|
802
|
+
/** Localized labels for the report builder component. */
|
|
803
|
+
interface ReportBuilderLabels {
|
|
804
|
+
/** Stepper label */
|
|
805
|
+
stepsLabel?: string;
|
|
806
|
+
/** Step labels */
|
|
807
|
+
stepType?: string;
|
|
808
|
+
stepConfig?: string;
|
|
809
|
+
stepStyle?: string;
|
|
810
|
+
stepPreview?: string;
|
|
811
|
+
/** Button labels */
|
|
812
|
+
nextButton?: string;
|
|
813
|
+
backButton?: string;
|
|
814
|
+
saveButton?: string;
|
|
815
|
+
cancelButton?: string;
|
|
816
|
+
/** Field labels */
|
|
817
|
+
reportNameLabel?: string;
|
|
818
|
+
reportNamePlaceholder?: string;
|
|
819
|
+
reportDescriptionLabel?: string;
|
|
820
|
+
reportDescriptionPlaceholder?: string;
|
|
821
|
+
dataSourceLabel?: string;
|
|
822
|
+
dataSourcePlaceholder?: string;
|
|
823
|
+
chartTypeHeading?: string;
|
|
824
|
+
/** Empty state */
|
|
825
|
+
noPreview?: string;
|
|
826
|
+
noConfigForm?: string;
|
|
827
|
+
noStyleForm?: string;
|
|
828
|
+
}
|
|
829
|
+
/**
|
|
830
|
+
* 4-step wizard for building custom reports:
|
|
831
|
+
* 1. **Type** — Select chart type from a grid of options
|
|
832
|
+
* 2. **Config** — Configure data source and chart-specific fields (slot: `configForm`)
|
|
833
|
+
* 3. **Style** — Adjust visual styling (slot: `styleForm`)
|
|
834
|
+
* 4. **Preview** — Live preview of the report (slot: `preview`)
|
|
835
|
+
*
|
|
836
|
+
* Steps 2-4 accept ReactNode slots so the parent can inject domain-specific forms.
|
|
837
|
+
*/
|
|
838
|
+
interface ReportBuilderProps {
|
|
839
|
+
/** Available chart types. Defaults to the built-in 9 types. */
|
|
840
|
+
chartTypes?: ChartTypeDef[];
|
|
841
|
+
/** Available data sources. */
|
|
842
|
+
dataSources?: DataSourceDef[];
|
|
843
|
+
/** Called when the user saves the report. */
|
|
844
|
+
onSave?: (report: {
|
|
845
|
+
name: string;
|
|
846
|
+
description: string;
|
|
847
|
+
chartType: ReportBuilderChartType;
|
|
848
|
+
dataSourceId: string;
|
|
849
|
+
}) => void;
|
|
850
|
+
/** Called when the user cancels. */
|
|
851
|
+
onCancel?: () => void;
|
|
852
|
+
/** ReactNode slot for chart-specific data configuration (step 2). */
|
|
853
|
+
configForm?: react.ReactNode;
|
|
854
|
+
/** ReactNode slot for chart-specific style configuration (step 3). */
|
|
855
|
+
styleForm?: react.ReactNode;
|
|
856
|
+
/** ReactNode slot for the live chart preview (step 4). */
|
|
857
|
+
preview?: react.ReactNode;
|
|
858
|
+
/** Called when the selected chart type changes. */
|
|
859
|
+
onChartTypeChange?: (type: ReportBuilderChartType) => void;
|
|
860
|
+
/** Called when the selected data source changes. */
|
|
861
|
+
onDataSourceChange?: (dataSourceId: string) => void;
|
|
862
|
+
/** Called when the current step changes. */
|
|
863
|
+
onStepChange?: (step: ReportBuilderStep) => void;
|
|
864
|
+
/** Externally controlled chart type selection. */
|
|
865
|
+
selectedChartType?: ReportBuilderChartType;
|
|
866
|
+
/** Externally controlled data source. */
|
|
867
|
+
selectedDataSource?: string;
|
|
868
|
+
/** Label overrides. */
|
|
869
|
+
labels?: ReportBuilderLabels;
|
|
870
|
+
/** Additional CSS classes. */
|
|
871
|
+
className?: string;
|
|
872
|
+
}
|
|
873
|
+
/** Renders the report builder component. */
|
|
874
|
+
declare function ReportBuilder({ chartTypes, dataSources, onSave, onCancel, configForm, styleForm, preview, onChartTypeChange, onDataSourceChange, onStepChange, selectedChartType: controlledChartType, selectedDataSource: controlledDataSource, labels: customLabels, className, }: ReportBuilderProps): react_jsx_runtime.JSX.Element;
|
|
875
|
+
declare namespace ReportBuilder {
|
|
876
|
+
var displayName: string;
|
|
877
|
+
}
|
|
878
|
+
|
|
879
|
+
/** Defines the audit change shape. */
|
|
880
|
+
interface AuditChange {
|
|
881
|
+
field: string;
|
|
882
|
+
before: string;
|
|
883
|
+
after: string;
|
|
884
|
+
}
|
|
885
|
+
/** Defines the audit entry shape. */
|
|
886
|
+
interface AuditEntry$1 {
|
|
887
|
+
id: string;
|
|
888
|
+
timestamp: string;
|
|
889
|
+
actor: string;
|
|
890
|
+
action: "created" | "updated" | "deleted";
|
|
891
|
+
summary: string;
|
|
892
|
+
changes?: AuditChange[];
|
|
893
|
+
}
|
|
894
|
+
/** Localized labels for the audit timeline component. */
|
|
895
|
+
interface AuditTimelineLabels {
|
|
896
|
+
title?: string;
|
|
897
|
+
empty?: string;
|
|
898
|
+
expand?: string;
|
|
899
|
+
collapse?: string;
|
|
900
|
+
created?: string;
|
|
901
|
+
updated?: string;
|
|
902
|
+
deleted?: string;
|
|
903
|
+
fieldHeader?: string;
|
|
904
|
+
beforeHeader?: string;
|
|
905
|
+
afterHeader?: string;
|
|
906
|
+
diffArrow?: string;
|
|
907
|
+
}
|
|
908
|
+
/** Props for the audit timeline component. */
|
|
909
|
+
interface AuditTimelineProps {
|
|
910
|
+
entries: AuditEntry$1[];
|
|
911
|
+
labels?: AuditTimelineLabels;
|
|
912
|
+
className?: string;
|
|
913
|
+
onEntryClick?: (entry: AuditEntry$1) => void;
|
|
914
|
+
}
|
|
915
|
+
/** Renders the audit timeline component. */
|
|
916
|
+
declare function AuditTimeline({ entries, labels: customLabels, className, onEntryClick, }: AuditTimelineProps): react_jsx_runtime.JSX.Element;
|
|
917
|
+
declare namespace AuditTimeline {
|
|
918
|
+
var displayName: string;
|
|
919
|
+
}
|
|
920
|
+
|
|
921
|
+
/** Type definition for segment condition type. */
|
|
922
|
+
type SegmentConditionType = "event" | "property" | "cohort" | "custom";
|
|
923
|
+
/** Defines the segment condition shape. */
|
|
924
|
+
interface SegmentCondition {
|
|
925
|
+
id: string;
|
|
926
|
+
type: SegmentConditionType;
|
|
927
|
+
field: string;
|
|
928
|
+
operator: string;
|
|
929
|
+
value: string;
|
|
930
|
+
}
|
|
931
|
+
/** Defines the segment group shape. */
|
|
932
|
+
interface SegmentGroup {
|
|
933
|
+
id: string;
|
|
934
|
+
combinator: "and" | "or";
|
|
935
|
+
conditions: SegmentCondition[];
|
|
936
|
+
}
|
|
937
|
+
/** Props for the segment builder component. */
|
|
938
|
+
interface SegmentBuilderProps {
|
|
939
|
+
groups: SegmentGroup[];
|
|
940
|
+
onChange: (groups: SegmentGroup[]) => void;
|
|
941
|
+
eventOptions?: string[];
|
|
942
|
+
propertyOptions?: string[];
|
|
943
|
+
cohortOptions?: string[];
|
|
944
|
+
className?: string;
|
|
945
|
+
labels?: SegmentBuilderLabels;
|
|
946
|
+
}
|
|
947
|
+
/** Localized labels for the segment builder component. */
|
|
948
|
+
interface SegmentBuilderLabels {
|
|
949
|
+
match?: string;
|
|
950
|
+
ofTheFollowing?: string;
|
|
951
|
+
groupLabel?: string;
|
|
952
|
+
conditionLabel?: string;
|
|
953
|
+
useOrCombinatorAriaLabel?: string;
|
|
954
|
+
conditionTypeLabel?: string;
|
|
955
|
+
fieldLabel?: string;
|
|
956
|
+
customFieldLabel?: string;
|
|
957
|
+
operatorLabel?: string;
|
|
958
|
+
valueLabel?: string;
|
|
959
|
+
removeGroupAriaLabel?: string;
|
|
960
|
+
removeConditionAriaLabel?: string;
|
|
961
|
+
addCondition?: string;
|
|
962
|
+
addGroup?: string;
|
|
963
|
+
}
|
|
964
|
+
/** Renders the segment builder component. */
|
|
965
|
+
declare function SegmentBuilder({ groups, onChange, eventOptions, propertyOptions, cohortOptions, className, labels: customLabels, }: SegmentBuilderProps): react_jsx_runtime.JSX.Element;
|
|
966
|
+
declare namespace SegmentBuilder {
|
|
967
|
+
var displayName: string;
|
|
968
|
+
}
|
|
969
|
+
|
|
970
|
+
/** Type definition for insight severity. */
|
|
971
|
+
type InsightSeverity = "critical" | "warning" | "info";
|
|
972
|
+
/** Defines the insight item shape. */
|
|
973
|
+
interface InsightItem {
|
|
974
|
+
id: string;
|
|
975
|
+
type: string;
|
|
976
|
+
title: string;
|
|
977
|
+
description: string;
|
|
978
|
+
severity: InsightSeverity;
|
|
979
|
+
eventName?: string;
|
|
980
|
+
metrics?: Record<string, string | number>;
|
|
981
|
+
dismissed?: boolean;
|
|
982
|
+
}
|
|
983
|
+
/** Defines the insights stat shape. */
|
|
984
|
+
interface InsightsStat {
|
|
985
|
+
id: string;
|
|
986
|
+
label: string;
|
|
987
|
+
count: number;
|
|
988
|
+
severity?: InsightSeverity | "total";
|
|
989
|
+
}
|
|
990
|
+
/** Defines the detection type shape. */
|
|
991
|
+
interface DetectionTypeDef {
|
|
992
|
+
id: string;
|
|
993
|
+
label: string;
|
|
994
|
+
enabled: boolean;
|
|
995
|
+
}
|
|
996
|
+
/** Configuration for detection. */
|
|
997
|
+
interface DetectionConfig {
|
|
998
|
+
days?: number;
|
|
999
|
+
zScoreThreshold?: number;
|
|
1000
|
+
}
|
|
1001
|
+
/** Localized labels for the insights panel component. */
|
|
1002
|
+
interface InsightsPanelLabels {
|
|
1003
|
+
title?: string;
|
|
1004
|
+
dismiss?: string;
|
|
1005
|
+
showDismissed?: string;
|
|
1006
|
+
hideDismissed?: string;
|
|
1007
|
+
emptyTitle?: string;
|
|
1008
|
+
emptyDescription?: string;
|
|
1009
|
+
detectionTitle?: string;
|
|
1010
|
+
daysLabel?: string;
|
|
1011
|
+
zScoreLabel?: string;
|
|
1012
|
+
}
|
|
1013
|
+
/** Props for the insights panel component. */
|
|
1014
|
+
interface InsightsPanelProps {
|
|
1015
|
+
insights: InsightItem[];
|
|
1016
|
+
stats?: InsightsStat[];
|
|
1017
|
+
/** Detection type toggles (e.g., volume_anomaly, new_event, etc.) */
|
|
1018
|
+
detectionTypes?: DetectionTypeDef[];
|
|
1019
|
+
onDetectionTypeToggle?: (typeId: string, enabled: boolean) => void;
|
|
1020
|
+
/** Detection parameters (lookback days, z-score threshold) */
|
|
1021
|
+
detectionConfig?: DetectionConfig;
|
|
1022
|
+
onDetectionConfigChange?: (config: DetectionConfig) => void;
|
|
1023
|
+
onDismiss?: (id: string) => void;
|
|
1024
|
+
onInsightClick?: (insight: InsightItem) => void;
|
|
1025
|
+
onStatClick?: (statId: string) => void;
|
|
1026
|
+
header?: react.ReactNode;
|
|
1027
|
+
actions?: react.ReactNode;
|
|
1028
|
+
labels?: InsightsPanelLabels;
|
|
1029
|
+
className?: string;
|
|
1030
|
+
}
|
|
1031
|
+
/** Renders the insights panel component. */
|
|
1032
|
+
declare function InsightsPanel({ insights, stats, detectionTypes, onDetectionTypeToggle, detectionConfig, onDetectionConfigChange, onDismiss, onInsightClick, onStatClick, header, actions, labels: customLabels, className, }: InsightsPanelProps): react_jsx_runtime.JSX.Element;
|
|
1033
|
+
declare namespace InsightsPanel {
|
|
1034
|
+
var displayName: string;
|
|
1035
|
+
}
|
|
1036
|
+
|
|
1037
|
+
/** Defines the time preset shape. */
|
|
1038
|
+
interface TimePresetDef {
|
|
1039
|
+
label: string;
|
|
1040
|
+
days: number;
|
|
1041
|
+
}
|
|
1042
|
+
/** Localized labels for the time range selector component. */
|
|
1043
|
+
interface TimeRangeSelectorLabels {
|
|
1044
|
+
title?: string;
|
|
1045
|
+
placeholder?: string;
|
|
1046
|
+
}
|
|
1047
|
+
/** Props for the time range selector component. */
|
|
1048
|
+
interface TimeRangeSelectorProps {
|
|
1049
|
+
value?: DateRange;
|
|
1050
|
+
onChange?: (range: DateRange) => void;
|
|
1051
|
+
presets?: TimePresetDef[];
|
|
1052
|
+
labels?: TimeRangeSelectorLabels;
|
|
1053
|
+
className?: string;
|
|
1054
|
+
}
|
|
1055
|
+
/** Renders the time range selector component. */
|
|
1056
|
+
declare function TimeRangeSelector({ value, onChange, presets, labels, className, }: TimeRangeSelectorProps): react_jsx_runtime.JSX.Element;
|
|
1057
|
+
declare namespace TimeRangeSelector {
|
|
1058
|
+
var displayName: string;
|
|
1059
|
+
}
|
|
1060
|
+
|
|
1061
|
+
/** Localized labels for the export button component. */
|
|
1062
|
+
interface ExportButtonLabels {
|
|
1063
|
+
export?: string;
|
|
1064
|
+
csv?: string;
|
|
1065
|
+
json?: string;
|
|
1066
|
+
pdf?: string;
|
|
1067
|
+
guidedTitle?: string;
|
|
1068
|
+
guidedDescription?: (rows: number, format: string) => string;
|
|
1069
|
+
format?: string;
|
|
1070
|
+
cancel?: string;
|
|
1071
|
+
}
|
|
1072
|
+
/** Props for the export button component. */
|
|
1073
|
+
interface ExportButtonProps {
|
|
1074
|
+
data: Record<string, unknown>[];
|
|
1075
|
+
columns?: ExportColumn[];
|
|
1076
|
+
fileName?: string;
|
|
1077
|
+
formats?: ExportFormat[];
|
|
1078
|
+
onExport?: (format: ExportFormat) => void;
|
|
1079
|
+
labels?: ExportButtonLabels;
|
|
1080
|
+
/** Show a step-by-step dialog instead of a dropdown */
|
|
1081
|
+
guided?: boolean;
|
|
1082
|
+
className?: string;
|
|
1083
|
+
}
|
|
1084
|
+
/** Renders the export button component. */
|
|
1085
|
+
declare function ExportButton({ data, columns, fileName, formats, onExport, labels: customLabels, guided, className, }: ExportButtonProps): react_jsx_runtime.JSX.Element;
|
|
1086
|
+
declare namespace ExportButton {
|
|
1087
|
+
var displayName: string;
|
|
1088
|
+
}
|
|
1089
|
+
|
|
1090
|
+
/** Props for the loading overlay component. */
|
|
1091
|
+
interface LoadingOverlayProps extends react.HTMLAttributes<HTMLDivElement> {
|
|
1092
|
+
loading: boolean;
|
|
1093
|
+
children: react.ReactNode;
|
|
1094
|
+
label?: string;
|
|
1095
|
+
}
|
|
1096
|
+
/** Renders the loading overlay component. */
|
|
1097
|
+
declare function LoadingOverlay({ loading, children, label, className, ...props }: LoadingOverlayProps): react_jsx_runtime.JSX.Element;
|
|
1098
|
+
declare namespace LoadingOverlay {
|
|
1099
|
+
var displayName: string;
|
|
1100
|
+
}
|
|
1101
|
+
|
|
1102
|
+
/** Localized labels for the summary row component. */
|
|
1103
|
+
interface SummaryRowLabels {
|
|
1104
|
+
emptyTitle?: string;
|
|
1105
|
+
emptyDescription?: string;
|
|
1106
|
+
}
|
|
1107
|
+
/** Props for the summary row component. */
|
|
1108
|
+
interface SummaryRowProps {
|
|
1109
|
+
stats: StatCard[];
|
|
1110
|
+
columns?: 2 | 3 | 4;
|
|
1111
|
+
onStatClick?: (stat: StatCard) => void;
|
|
1112
|
+
formatValue?: (stat: StatCard) => string;
|
|
1113
|
+
durationFractionDigits?: number;
|
|
1114
|
+
percentageFractionDigits?: number;
|
|
1115
|
+
loading?: boolean;
|
|
1116
|
+
labels?: SummaryRowLabels;
|
|
1117
|
+
className?: string;
|
|
1118
|
+
}
|
|
1119
|
+
/** Renders the summary row component. */
|
|
1120
|
+
declare function SummaryRow({ stats, columns, onStatClick, formatValue, durationFractionDigits, percentageFractionDigits, loading, labels: customLabels, className, }: SummaryRowProps): react_jsx_runtime.JSX.Element;
|
|
1121
|
+
declare namespace SummaryRow {
|
|
1122
|
+
var displayName: string;
|
|
1123
|
+
}
|
|
1124
|
+
|
|
1125
|
+
/** Defines the comparison option shape. */
|
|
1126
|
+
interface ComparisonOption {
|
|
1127
|
+
value: string;
|
|
1128
|
+
label: string;
|
|
1129
|
+
}
|
|
1130
|
+
/** Localized labels for the comparison selector component. */
|
|
1131
|
+
interface ComparisonSelectorLabels {
|
|
1132
|
+
groupLabel?: string;
|
|
1133
|
+
selectorA?: string;
|
|
1134
|
+
selectorB?: string;
|
|
1135
|
+
swap?: string;
|
|
1136
|
+
maxReached?: string;
|
|
1137
|
+
}
|
|
1138
|
+
/** Props for the comparison selector component. */
|
|
1139
|
+
interface ComparisonSelectorProps {
|
|
1140
|
+
segments: ComparisonOption[];
|
|
1141
|
+
valueA?: string;
|
|
1142
|
+
valueB?: string;
|
|
1143
|
+
onChangeA?: (value: string) => void;
|
|
1144
|
+
onChangeB?: (value: string) => void;
|
|
1145
|
+
/** Multi-select mode: selected values (overrides A/B selectors) */
|
|
1146
|
+
values?: string[];
|
|
1147
|
+
/** Called when multi-select values change */
|
|
1148
|
+
onValuesChange?: (values: string[]) => void;
|
|
1149
|
+
/** Maximum selectable items in multi-select mode (default: 5) */
|
|
1150
|
+
maxItems?: number;
|
|
1151
|
+
labels?: ComparisonSelectorLabels;
|
|
1152
|
+
className?: string;
|
|
1153
|
+
}
|
|
1154
|
+
/** Renders the comparison selector component. */
|
|
1155
|
+
declare function ComparisonSelector({ segments, valueA, valueB, onChangeA, onChangeB, values, onValuesChange, maxItems, labels: customLabels, className, }: ComparisonSelectorProps): react_jsx_runtime.JSX.Element;
|
|
1156
|
+
declare namespace ComparisonSelector {
|
|
1157
|
+
var displayName: string;
|
|
1158
|
+
}
|
|
1159
|
+
|
|
1160
|
+
/**
|
|
1161
|
+
* presets/index.ts
|
|
1162
|
+
*
|
|
1163
|
+
* Single registry of theme preset metadata. Each entry pairs a stable id
|
|
1164
|
+
* (used in `<html data-theme>` and localStorage) with display metadata and an
|
|
1165
|
+
* optional `PaletteConfig` that approximates the preset's seed for the
|
|
1166
|
+
* ThemeSwitcher swatch row and "clone to custom" workflow.
|
|
1167
|
+
*
|
|
1168
|
+
* Token values themselves currently live in the sibling `*.css` files. A
|
|
1169
|
+
* follow-up sub-phase will migrate the full token tables into this file and
|
|
1170
|
+
* have a codegen step emit the CSS, but the metadata layer is enough to
|
|
1171
|
+
* unblock dynamic ThemeSwitcher rendering and type-safe preset id unions.
|
|
1172
|
+
*/
|
|
1173
|
+
|
|
1174
|
+
interface ThemeDescriptor {
|
|
1175
|
+
/** Stable id used in `<html data-theme="...">` and localStorage. */
|
|
1176
|
+
readonly id: string;
|
|
1177
|
+
/** Human-readable label shown in ThemeSwitcher. */
|
|
1178
|
+
readonly label: string;
|
|
1179
|
+
/** Short description shown under the label. */
|
|
1180
|
+
readonly description: string;
|
|
1181
|
+
/**
|
|
1182
|
+
* Optional engine input that approximates this preset. Used by
|
|
1183
|
+
* ThemeSwitcher to derive swatches when `switcherSwatches` is omitted, and
|
|
1184
|
+
* as the starting point when a user clones a preset into a custom palette.
|
|
1185
|
+
* Codegen does NOT consume this in the current phase — the static `*.css`
|
|
1186
|
+
* file remains the source of token values.
|
|
1187
|
+
*/
|
|
1188
|
+
readonly palette?: PaletteConfig;
|
|
1189
|
+
/**
|
|
1190
|
+
* Three CSS color strings for the ThemeSwitcher swatch row. Falls back to
|
|
1191
|
+
* the live `--opt-accent` / `--opt-surface` / `--opt-text` tokens when
|
|
1192
|
+
* omitted.
|
|
1193
|
+
*/
|
|
1194
|
+
readonly switcherSwatches?: readonly [string, string, string];
|
|
1195
|
+
/** Disable dark variant generation entirely. */
|
|
1196
|
+
readonly forceLightOnly?: boolean;
|
|
1197
|
+
}
|
|
1198
|
+
declare const THEME_REGISTRY: {
|
|
1199
|
+
readonly default: ThemeDescriptor;
|
|
1200
|
+
readonly minimal: ThemeDescriptor;
|
|
1201
|
+
readonly natural: ThemeDescriptor;
|
|
1202
|
+
readonly pro: ThemeDescriptor;
|
|
1203
|
+
readonly "mono-dark": ThemeDescriptor;
|
|
1204
|
+
};
|
|
1205
|
+
/** Compile-time-derived union of registered preset ids. */
|
|
1206
|
+
type ThemePresetId = keyof typeof THEME_REGISTRY;
|
|
1207
|
+
/** All registered preset ids in declaration order. */
|
|
1208
|
+
declare const THEME_PRESET_IDS: ThemePresetId[];
|
|
1209
|
+
/** Look up a descriptor by id. Returns `undefined` for unknown ids. */
|
|
1210
|
+
declare function getThemeDescriptor(id: string): ThemeDescriptor | undefined;
|
|
1211
|
+
/** Type guard for a known preset id. */
|
|
1212
|
+
declare function isThemePresetId(id: string): id is ThemePresetId;
|
|
1213
|
+
/** Preset ids that suppress dark mode generation. */
|
|
1214
|
+
declare const FORCE_LIGHT_PRESET_IDS: ReadonlySet<ThemePresetId>;
|
|
1215
|
+
|
|
1216
|
+
/** Theme preset id — alias of `ThemePresetId` from the registry. */
|
|
1217
|
+
type ThemePreset = ThemePresetId;
|
|
1218
|
+
declare const THEME_MODE_VALUES: readonly ["light", "dark", "system"];
|
|
1219
|
+
/** Type definition for theme mode. */
|
|
1220
|
+
type ThemeMode = (typeof THEME_MODE_VALUES)[number];
|
|
1221
|
+
/** Runtime constraints for apps that expose only a subset of opt-ui theming. */
|
|
1222
|
+
interface ThemeRuntimeOptions {
|
|
1223
|
+
/**
|
|
1224
|
+
* Force the root theme to one preset regardless of stored preset/generated
|
|
1225
|
+
* theme state. Mode is still resolved normally unless constrained.
|
|
1226
|
+
*/
|
|
1227
|
+
lockedPreset?: ThemePreset;
|
|
1228
|
+
/**
|
|
1229
|
+
* Restrict mode reads/writes to a smaller set, e.g. `["light", "dark"]`.
|
|
1230
|
+
* The first value becomes the fallback when the stored/default mode is not
|
|
1231
|
+
* allowed.
|
|
1232
|
+
*/
|
|
1233
|
+
allowedModes?: readonly ThemeMode[];
|
|
1234
|
+
}
|
|
1235
|
+
/**
|
|
1236
|
+
* Compound theme value applied to `<html data-theme>`. Derived from the
|
|
1237
|
+
* registered preset ids: `<id>` (light) or `<id>-dark` (dark). Force-light
|
|
1238
|
+
* presets only emit the bare id form.
|
|
1239
|
+
*/
|
|
1240
|
+
type CompoundTheme = `${ThemePreset}` | `${ThemePreset}-dark`;
|
|
1241
|
+
/**
|
|
1242
|
+
* Presets that force light mode regardless of system dark/light preference.
|
|
1243
|
+
* Mirrors `FORCE_LIGHT_PRESET_IDS` from `./presets` — kept as alias for
|
|
1244
|
+
* existing imports.
|
|
1245
|
+
*/
|
|
1246
|
+
declare const FORCE_LIGHT_PRESETS: ReadonlySet<ThemePreset>;
|
|
1247
|
+
/** All valid compound theme names. Useful for static enumeration. */
|
|
1248
|
+
declare const ALL_COMPOUND_THEMES: CompoundTheme[];
|
|
1249
|
+
interface ThemeStorageReader {
|
|
1250
|
+
getItem(key: string): string | null;
|
|
1251
|
+
}
|
|
1252
|
+
/** Compute compound theme name from preset + resolved mode. */
|
|
1253
|
+
declare function getCompoundTheme(preset: ThemePreset, resolvedMode: "light" | "dark"): CompoundTheme;
|
|
1254
|
+
/** Handles resolve theme mode. */
|
|
1255
|
+
declare function resolveThemeMode(preset: ThemePreset, mode: ThemeMode, systemDark: boolean): "light" | "dark";
|
|
1256
|
+
/** Handles read stored theme. */
|
|
1257
|
+
declare function readStoredTheme(storage: ThemeStorageReader, defaultPreset: ThemePreset, defaultMode: ThemeMode, options?: {
|
|
1258
|
+
migrateLegacy?: boolean;
|
|
1259
|
+
}): {
|
|
1260
|
+
preset: ThemePreset;
|
|
1261
|
+
mode: ThemeMode;
|
|
1262
|
+
};
|
|
1263
|
+
/** Normalize a mode against an optional allowed-mode list. */
|
|
1264
|
+
declare function coerceThemeMode(mode: ThemeMode, allowedModes: readonly ThemeMode[] | undefined, fallback?: ThemeMode): ThemeMode;
|
|
1265
|
+
/**
|
|
1266
|
+
* Build the inline `<head>` boot script that paints the correct theme before
|
|
1267
|
+
* React mounts. Two paths:
|
|
1268
|
+
*
|
|
1269
|
+
* 1. **Generated** — when both `opt-theme-spec` (kind: "generated") and
|
|
1270
|
+
* `opt-theme-tokens` are present and well-formed, a `<style id="…">` tag
|
|
1271
|
+
* is inserted with the cached tokens and `<html data-theme>` is set to the
|
|
1272
|
+
* generated id (with optional `-dark` suffix). This bypasses opt-palette
|
|
1273
|
+
* at startup so first paint is instant.
|
|
1274
|
+
* 2. **Preset (legacy)** — falls through to the existing preset selector,
|
|
1275
|
+
* including legacy `opt-theme` → `opt-preset` migration.
|
|
1276
|
+
*
|
|
1277
|
+
* Returned as a single minified line; intended for `dangerouslySetInnerHTML`.
|
|
1278
|
+
*/
|
|
1279
|
+
declare function createThemeBootScript(defaultPreset?: ThemePreset, defaultMode?: ThemeMode, options?: ThemeRuntimeOptions): string;
|
|
1280
|
+
|
|
1281
|
+
/**
|
|
1282
|
+
* theme-types.ts
|
|
1283
|
+
*
|
|
1284
|
+
* Discriminated union covering every way a consumer can describe a theme:
|
|
1285
|
+
* a registered preset id, an inline `PaletteConfig` to feed the engine, or
|
|
1286
|
+
* a fully formed `ThemeDescriptor`. Shared by `OptThemeProvider` and
|
|
1287
|
+
* `ShellProvider` so generated themes built in the harness layer can be
|
|
1288
|
+
* promoted into the global tree without translation.
|
|
1289
|
+
*/
|
|
1290
|
+
|
|
1291
|
+
/**
|
|
1292
|
+
* Sparse token overrides applied on top of the resolved theme. `light` and
|
|
1293
|
+
* `dark` apply only to that mode; `shared` applies to both (handy for
|
|
1294
|
+
* typography or radius tokens that should not invert).
|
|
1295
|
+
*/
|
|
1296
|
+
interface ThemeOverrides {
|
|
1297
|
+
light?: Record<string, string>;
|
|
1298
|
+
dark?: Record<string, string>;
|
|
1299
|
+
shared?: Record<string, string>;
|
|
1300
|
+
}
|
|
1301
|
+
/** Canonical, typo-safe token map for authored product theme overrides. */
|
|
1302
|
+
type CanonicalThemeTokenMap = Partial<Record<OptTokenName, string>>;
|
|
1303
|
+
/** Mode-aware overrides restricted to the canonical token catalog. */
|
|
1304
|
+
interface CanonicalThemeOverrides {
|
|
1305
|
+
light?: CanonicalThemeTokenMap;
|
|
1306
|
+
dark?: CanonicalThemeTokenMap;
|
|
1307
|
+
shared?: CanonicalThemeTokenMap;
|
|
1308
|
+
}
|
|
1309
|
+
/**
|
|
1310
|
+
* Author canonical theme overrides with token-name autocomplete.
|
|
1311
|
+
* ThemeOverrides remains broad for backward compatibility with older custom
|
|
1312
|
+
* variables; new themes should use this helper as the governed entry point.
|
|
1313
|
+
*/
|
|
1314
|
+
declare function defineThemeOverrides(overrides: CanonicalThemeOverrides): CanonicalThemeOverrides;
|
|
1315
|
+
/** Reference an entry of `THEME_REGISTRY` by id. */
|
|
1316
|
+
interface PresetThemeSpec {
|
|
1317
|
+
kind: "preset";
|
|
1318
|
+
preset: ThemePresetId;
|
|
1319
|
+
overrides?: ThemeOverrides;
|
|
1320
|
+
}
|
|
1321
|
+
/**
|
|
1322
|
+
* Inline `PaletteConfig` consumed by the opt-palette engine to produce a
|
|
1323
|
+
* canonical token palette at runtime.
|
|
1324
|
+
*/
|
|
1325
|
+
interface GeneratedThemeSpec {
|
|
1326
|
+
kind: "generated";
|
|
1327
|
+
/** Stable id used in `<html data-theme>` and the `<style>` selector. */
|
|
1328
|
+
id?: string;
|
|
1329
|
+
label?: string;
|
|
1330
|
+
palette: PaletteConfig;
|
|
1331
|
+
overrides?: ThemeOverrides;
|
|
1332
|
+
forceLightOnly?: boolean;
|
|
1333
|
+
}
|
|
1334
|
+
/** Pass an already-built `ThemeDescriptor`. */
|
|
1335
|
+
interface DescriptorThemeSpec {
|
|
1336
|
+
kind: "descriptor";
|
|
1337
|
+
descriptor: ThemeDescriptor;
|
|
1338
|
+
overrides?: ThemeOverrides;
|
|
1339
|
+
}
|
|
1340
|
+
/** Discriminated union covering every supported way to describe a theme. */
|
|
1341
|
+
type ThemeSpec = PresetThemeSpec | GeneratedThemeSpec | DescriptorThemeSpec;
|
|
1342
|
+
/** Construct a `PresetThemeSpec` — convenience for the common case. */
|
|
1343
|
+
declare function presetTheme(preset: ThemePresetId, overrides?: ThemeOverrides): PresetThemeSpec;
|
|
1344
|
+
/** Construct a `GeneratedThemeSpec` from an inline `PaletteConfig`. */
|
|
1345
|
+
declare function generatedTheme(palette: PaletteConfig, options?: Omit<GeneratedThemeSpec, "kind" | "palette">): GeneratedThemeSpec;
|
|
1346
|
+
/** True when `spec` references a registered preset id. */
|
|
1347
|
+
declare function isPresetSpec(spec: ThemeSpec): spec is PresetThemeSpec;
|
|
1348
|
+
/** True when `spec` carries an inline `PaletteConfig`. */
|
|
1349
|
+
declare function isGeneratedSpec(spec: ThemeSpec): spec is GeneratedThemeSpec;
|
|
1350
|
+
/** True when `spec` wraps a fully-formed `ThemeDescriptor`. */
|
|
1351
|
+
declare function isDescriptorSpec(spec: ThemeSpec): spec is DescriptorThemeSpec;
|
|
1352
|
+
/**
|
|
1353
|
+
* Resolve a `ThemeSpec` down to a single descriptor + overrides pair. The
|
|
1354
|
+
* returned descriptor is always sourced from the registry or the spec itself —
|
|
1355
|
+
* the caller is responsible for engine-driven token generation when the
|
|
1356
|
+
* descriptor only carries a `palette`.
|
|
1357
|
+
*/
|
|
1358
|
+
interface ResolvedThemeSpec {
|
|
1359
|
+
descriptor: ThemeDescriptor;
|
|
1360
|
+
overrides?: ThemeOverrides;
|
|
1361
|
+
}
|
|
1362
|
+
|
|
1363
|
+
interface ThemeContextValue {
|
|
1364
|
+
/** Active theme spec — preset or generated. */
|
|
1365
|
+
theme: ThemeSpec;
|
|
1366
|
+
/** Replace the active theme spec. No-op when controlled. */
|
|
1367
|
+
setTheme: (spec: ThemeSpec) => void;
|
|
1368
|
+
/**
|
|
1369
|
+
* Last known preset id. Mirrors `theme.preset` when active spec is preset;
|
|
1370
|
+
* otherwise reflects the most recent preset (useful for "back to preset").
|
|
1371
|
+
*/
|
|
1372
|
+
preset: ThemePresetId;
|
|
1373
|
+
/** Convenience: equivalent to `setTheme({ kind: "preset", preset })`. */
|
|
1374
|
+
setPreset: (preset: ThemePresetId) => void;
|
|
1375
|
+
mode: ThemeMode;
|
|
1376
|
+
setMode: (mode: ThemeMode) => void;
|
|
1377
|
+
resolvedMode: "light" | "dark";
|
|
1378
|
+
/** True when `controlledTheme` prop is provided. setTheme is a no-op. */
|
|
1379
|
+
isControlled: boolean;
|
|
1380
|
+
/** True when the active spec (effective, including stack) is generated. */
|
|
1381
|
+
isGenerated: boolean;
|
|
1382
|
+
/**
|
|
1383
|
+
* True when the effective theme comes from the promotion stack instead of
|
|
1384
|
+
* persistence. Useful for surfaces that want to show "Preview" affordances.
|
|
1385
|
+
*/
|
|
1386
|
+
isPromoted: boolean;
|
|
1387
|
+
}
|
|
1388
|
+
/** Props for `OptThemeProvider`. */
|
|
1389
|
+
interface OptThemeProviderProps {
|
|
1390
|
+
children: React.ReactNode;
|
|
1391
|
+
/**
|
|
1392
|
+
* Initial theme spec used when nothing is persisted. Takes precedence over
|
|
1393
|
+
* `defaultPreset`. Defaults to `{ kind: "preset", preset: defaultPreset }`.
|
|
1394
|
+
*/
|
|
1395
|
+
defaultTheme?: ThemeSpec;
|
|
1396
|
+
/**
|
|
1397
|
+
* Fully controlled mode. When provided the provider mirrors this spec into
|
|
1398
|
+
* the DOM but ignores localStorage and `setTheme` mutations. Useful for
|
|
1399
|
+
* preview surfaces (e.g. the harness builder's "Apply globally").
|
|
1400
|
+
*/
|
|
1401
|
+
controlledTheme?: ThemeSpec;
|
|
1402
|
+
/**
|
|
1403
|
+
* Legacy alias for `defaultTheme = { kind: "preset", preset: defaultPreset }`.
|
|
1404
|
+
* Kept for backward compatibility with existing call sites.
|
|
1405
|
+
*/
|
|
1406
|
+
defaultPreset?: ThemePreset;
|
|
1407
|
+
defaultMode?: ThemeMode;
|
|
1408
|
+
/**
|
|
1409
|
+
* Force the root theme to a single preset while still allowing mode changes.
|
|
1410
|
+
* Stored preset/generated themes are ignored while this is set.
|
|
1411
|
+
*/
|
|
1412
|
+
lockedPreset?: ThemeRuntimeOptions["lockedPreset"];
|
|
1413
|
+
/** Restrict the provider to a subset of modes, e.g. light/black only. */
|
|
1414
|
+
allowedModes?: ThemeRuntimeOptions["allowedModes"];
|
|
1415
|
+
/**
|
|
1416
|
+
* Whether descendants may push transient themes onto the global stack.
|
|
1417
|
+
* Defaults to true for backward compatibility.
|
|
1418
|
+
*/
|
|
1419
|
+
allowThemePromotion?: boolean;
|
|
1420
|
+
}
|
|
1421
|
+
/** Renders the opt theme provider component. */
|
|
1422
|
+
declare function OptThemeProvider({ children, defaultTheme, controlledTheme, defaultPreset, defaultMode, lockedPreset, allowedModes, allowThemePromotion, }: OptThemeProviderProps): react_jsx_runtime.JSX.Element;
|
|
1423
|
+
/** Provides opt theme. */
|
|
1424
|
+
declare function useOptTheme(): ThemeContextValue;
|
|
1425
|
+
/** Reads opt theme context when present without requiring a provider. */
|
|
1426
|
+
declare function useOptionalOptTheme(): ThemeContextValue | undefined;
|
|
1427
|
+
|
|
1428
|
+
/**
|
|
1429
|
+
* theme-serialize.ts
|
|
1430
|
+
*
|
|
1431
|
+
* Pure helpers that turn a `ThemeSpec` into the artifacts the runtime needs:
|
|
1432
|
+
* resolved descriptor + mode, computed token maps for generated palettes, and
|
|
1433
|
+
* `<style>` CSS strings ready to be injected into `<head>`.
|
|
1434
|
+
*
|
|
1435
|
+
* Kept side-effect free so the boot script and the provider can share the
|
|
1436
|
+
* same logic without dragging React into the client bundle's critical path.
|
|
1437
|
+
*/
|
|
1438
|
+
|
|
1439
|
+
/** Element id used for the global generated theme style tag. */
|
|
1440
|
+
declare const GLOBAL_THEME_STYLE_ID = "opt-global-theme";
|
|
1441
|
+
/** localStorage key for the persisted ThemeSpec (generated mode). */
|
|
1442
|
+
declare const THEME_SPEC_STORAGE_KEY = "opt-theme-spec";
|
|
1443
|
+
/**
|
|
1444
|
+
* localStorage key for the cached, pre-serialized token maps that match the
|
|
1445
|
+
* spec under `THEME_SPEC_STORAGE_KEY`. The boot script reads this directly so
|
|
1446
|
+
* it can inline tokens without invoking opt-palette at startup.
|
|
1447
|
+
*/
|
|
1448
|
+
declare const THEME_TOKENS_STORAGE_KEY = "opt-theme-tokens";
|
|
1449
|
+
/** Stable id used for unnamed generated themes. */
|
|
1450
|
+
declare const GENERATED_THEME_ID_DEFAULT = "generated";
|
|
1451
|
+
/**
|
|
1452
|
+
* Stable id used in `<html data-theme>` and the `<style>` selector.
|
|
1453
|
+
* - preset → the preset id (force-light) or `${id}` / `${id}-dark`
|
|
1454
|
+
* - generated → `spec.id ?? "generated"` with `-dark` suffix when applicable
|
|
1455
|
+
* - descriptor → `descriptor.id` with same suffix logic
|
|
1456
|
+
*/
|
|
1457
|
+
declare function getCompoundIdForSpec(spec: ThemeSpec, resolvedMode: "light" | "dark", forceLightOnly: boolean): string;
|
|
1458
|
+
/** Whether the given spec emits dark variants at all. */
|
|
1459
|
+
declare function isForceLightSpec(spec: ThemeSpec): boolean;
|
|
1460
|
+
/** Computed token bundle for a generated theme. `dark` is `null` when force-light. */
|
|
1461
|
+
interface GeneratedTokens {
|
|
1462
|
+
id: string;
|
|
1463
|
+
light: Record<string, string>;
|
|
1464
|
+
dark: Record<string, string> | null;
|
|
1465
|
+
}
|
|
1466
|
+
/**
|
|
1467
|
+
* Compute the inline tokens for a `GeneratedThemeSpec` or
|
|
1468
|
+
* `DescriptorThemeSpec` whose descriptor carries a `palette`. Returns `null`
|
|
1469
|
+
* for preset specs (their tokens live in the static CSS files).
|
|
1470
|
+
*/
|
|
1471
|
+
declare function computeGeneratedTokens(spec: ThemeSpec): GeneratedTokens | null;
|
|
1472
|
+
/**
|
|
1473
|
+
* Serialize a token record into a CSS rule body — `--name:value;...` — without
|
|
1474
|
+
* surrounding selector or braces. Values are not escaped; callers are
|
|
1475
|
+
* responsible for trusted input. Boot script and provider both rely on this
|
|
1476
|
+
* shape.
|
|
1477
|
+
*/
|
|
1478
|
+
declare function serializeTokenBody(tokens: Record<string, string>): string;
|
|
1479
|
+
/**
|
|
1480
|
+
* Build a CSS rule scoped to `[data-theme="<id>"]`.
|
|
1481
|
+
*/
|
|
1482
|
+
declare function serializeThemeRule(themeId: string, tokens: Record<string, string>): string;
|
|
1483
|
+
/**
|
|
1484
|
+
* Build the full CSS for a generated theme style tag — covers light + dark
|
|
1485
|
+
* selectors based on the computed tokens. Caller chooses the id used in
|
|
1486
|
+
* the selector (typically the spec base id).
|
|
1487
|
+
*/
|
|
1488
|
+
declare function serializeGeneratedTheme(tokens: GeneratedTokens): string;
|
|
1489
|
+
/**
|
|
1490
|
+
* Resolve a spec into its descriptor counterpart. Preset specs map to
|
|
1491
|
+
* `THEME_REGISTRY[preset]`. Generated specs are wrapped into a synthetic
|
|
1492
|
+
* descriptor so callers can treat them uniformly.
|
|
1493
|
+
*/
|
|
1494
|
+
declare function resolveDescriptor(spec: ThemeSpec): ThemeDescriptor;
|
|
1495
|
+
/**
|
|
1496
|
+
* Validate a `ThemeSpec` parsed from localStorage. Returns the spec on
|
|
1497
|
+
* success or `null` if any required field is missing or the preset id is
|
|
1498
|
+
* unknown. Defensive parsing — never throws.
|
|
1499
|
+
*/
|
|
1500
|
+
declare function safeParseStoredSpec(json: string | null): ThemeSpec | null;
|
|
1501
|
+
/** Cached token payload as written to `opt-theme-tokens`. */
|
|
1502
|
+
interface StoredTokenCache {
|
|
1503
|
+
id: string;
|
|
1504
|
+
light: Record<string, string>;
|
|
1505
|
+
dark?: Record<string, string>;
|
|
1506
|
+
}
|
|
1507
|
+
/**
|
|
1508
|
+
* Parse the cached token payload from localStorage. Returns `null` on any
|
|
1509
|
+
* shape mismatch — caller will recompute from the spec.
|
|
1510
|
+
*/
|
|
1511
|
+
declare function safeParseStoredTokens(json: string | null): StoredTokenCache | null;
|
|
1512
|
+
/** Build the storage payload that pairs with `opt-theme-spec`. */
|
|
1513
|
+
declare function buildTokenCache(tokens: GeneratedTokens): StoredTokenCache;
|
|
1514
|
+
|
|
1515
|
+
/** A single entry on the theme promotion stack. */
|
|
1516
|
+
interface ThemeStackEntry {
|
|
1517
|
+
/** Stable owner id (e.g. harness id) — used to dedupe and pop. */
|
|
1518
|
+
id: string;
|
|
1519
|
+
/** Spec the owner wants applied while it is mounted. */
|
|
1520
|
+
spec: ThemeSpec;
|
|
1521
|
+
}
|
|
1522
|
+
/**
|
|
1523
|
+
* Imperative API exposed by `OptThemeProvider` to descendants that want to
|
|
1524
|
+
* temporarily override the global theme without owning persistence (e.g. the
|
|
1525
|
+
* harness builder previewing a generated palette).
|
|
1526
|
+
*
|
|
1527
|
+
* Contract:
|
|
1528
|
+
* - `pushTheme(id, spec)` re-pushes (replacing) any existing entry with the
|
|
1529
|
+
* same id, preserving stack order otherwise.
|
|
1530
|
+
* - `popTheme(id)` removes the entry with the given id, no-op if absent.
|
|
1531
|
+
* - The top of the stack wins. When the stack is empty the provider falls
|
|
1532
|
+
* back to its `controlledTheme` prop, then to its persisted state.
|
|
1533
|
+
*/
|
|
1534
|
+
interface OptThemeController {
|
|
1535
|
+
pushTheme: (id: string, spec: ThemeSpec) => void;
|
|
1536
|
+
popTheme: (id: string) => void;
|
|
1537
|
+
}
|
|
1538
|
+
declare const OptThemeControllerContext: react.Context<OptThemeController | null>;
|
|
1539
|
+
/**
|
|
1540
|
+
* Reads the controller exposed by the nearest `OptThemeProvider`. Returns
|
|
1541
|
+
* `null` when used outside a provider — callers should treat that as "no
|
|
1542
|
+
* promotion available" and behave as if scope === "override".
|
|
1543
|
+
*/
|
|
1544
|
+
declare function useOptThemeController(): OptThemeController | null;
|
|
1545
|
+
|
|
1546
|
+
/** Localized labels for the theme switcher component. */
|
|
1547
|
+
interface ThemeSwitcherLabels {
|
|
1548
|
+
/** Section heading shown above the preset grid. */
|
|
1549
|
+
heading?: string;
|
|
1550
|
+
/** Localized labels for the mode toggle (light/dark/system). */
|
|
1551
|
+
modeLabels?: Partial<Record<ThemeMode, string>>;
|
|
1552
|
+
/** Suffix added to the active preset's swatch button (a11y only). */
|
|
1553
|
+
activeSuffix?: string;
|
|
1554
|
+
}
|
|
1555
|
+
/** Props for the theme switcher component. */
|
|
1556
|
+
interface ThemeSwitcherProps {
|
|
1557
|
+
className?: string;
|
|
1558
|
+
labels?: ThemeSwitcherLabels;
|
|
1559
|
+
variant?: "default" | "compact";
|
|
1560
|
+
/** Slot for custom CSS variable editor (e.g. ColorPicker panel) */
|
|
1561
|
+
customPresetEditor?: React.ReactNode;
|
|
1562
|
+
/**
|
|
1563
|
+
* Controlled preset for local preview surfaces. When provided, preset
|
|
1564
|
+
* changes call `onPresetChange` instead of mutating the global provider.
|
|
1565
|
+
*/
|
|
1566
|
+
preset?: ThemePresetId;
|
|
1567
|
+
onPresetChange?: (preset: ThemePresetId) => void;
|
|
1568
|
+
/** Controlled mode for local preview surfaces. */
|
|
1569
|
+
mode?: ThemeMode;
|
|
1570
|
+
onModeChange?: (mode: ThemeMode) => void;
|
|
1571
|
+
}
|
|
1572
|
+
/** Renders the theme switcher component. */
|
|
1573
|
+
declare function ThemeSwitcher({ className, labels: userLabels, variant, customPresetEditor, preset: controlledPreset, onPresetChange, mode: controlledMode, onModeChange, }: ThemeSwitcherProps): react_jsx_runtime.JSX.Element | null;
|
|
1574
|
+
declare namespace ThemeSwitcher {
|
|
1575
|
+
var displayName: string;
|
|
1576
|
+
}
|
|
1577
|
+
|
|
1578
|
+
/** Defines the prompt variable shape. */
|
|
1579
|
+
interface PromptVariable {
|
|
1580
|
+
name: string;
|
|
1581
|
+
label: string;
|
|
1582
|
+
placeholder?: string;
|
|
1583
|
+
defaultValue?: string;
|
|
1584
|
+
}
|
|
1585
|
+
/** Localized labels for the prompt template component. */
|
|
1586
|
+
interface PromptTemplateLabels {
|
|
1587
|
+
copy?: string;
|
|
1588
|
+
copied?: string;
|
|
1589
|
+
copyFailed?: string;
|
|
1590
|
+
}
|
|
1591
|
+
/** Props for the prompt template component. */
|
|
1592
|
+
interface PromptTemplateProps {
|
|
1593
|
+
title: string;
|
|
1594
|
+
description?: string;
|
|
1595
|
+
template: string;
|
|
1596
|
+
variables?: PromptVariable[];
|
|
1597
|
+
className?: string;
|
|
1598
|
+
labels?: PromptTemplateLabels;
|
|
1599
|
+
}
|
|
1600
|
+
/** Renders the prompt template component. */
|
|
1601
|
+
declare function PromptTemplate({ title, description, template, variables, className, labels: customLabels, }: PromptTemplateProps): react_jsx_runtime.JSX.Element;
|
|
1602
|
+
declare namespace PromptTemplate {
|
|
1603
|
+
var displayName: string;
|
|
1604
|
+
}
|
|
1605
|
+
|
|
1606
|
+
interface SidebarContextValue {
|
|
1607
|
+
collapsed: boolean;
|
|
1608
|
+
collapsible: boolean;
|
|
1609
|
+
setCollapsed: (value: boolean) => void;
|
|
1610
|
+
toggle: () => void;
|
|
1611
|
+
width: number;
|
|
1612
|
+
collapsedWidth: number;
|
|
1613
|
+
}
|
|
1614
|
+
/** Provides sidebar. */
|
|
1615
|
+
declare function useSidebar(): SidebarContextValue;
|
|
1616
|
+
/** Props for the sidebar component. */
|
|
1617
|
+
interface SidebarProps {
|
|
1618
|
+
children: react.ReactNode;
|
|
1619
|
+
collapsible?: boolean;
|
|
1620
|
+
defaultCollapsed?: boolean;
|
|
1621
|
+
collapsed?: boolean;
|
|
1622
|
+
onCollapsedChange?: (collapsed: boolean) => void;
|
|
1623
|
+
width?: number;
|
|
1624
|
+
collapsedWidth?: number;
|
|
1625
|
+
className?: string;
|
|
1626
|
+
side?: "left" | "right";
|
|
1627
|
+
/** aside에 적용할 aria-label */
|
|
1628
|
+
label?: string;
|
|
1629
|
+
}
|
|
1630
|
+
declare function SidebarHeader({ children, className, }: {
|
|
1631
|
+
children: react.ReactNode;
|
|
1632
|
+
className?: string;
|
|
1633
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1634
|
+
declare namespace SidebarHeader {
|
|
1635
|
+
var displayName: string;
|
|
1636
|
+
}
|
|
1637
|
+
declare function SidebarContent({ children, className, }: {
|
|
1638
|
+
children: react.ReactNode;
|
|
1639
|
+
className?: string;
|
|
1640
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1641
|
+
declare namespace SidebarContent {
|
|
1642
|
+
var displayName: string;
|
|
1643
|
+
}
|
|
1644
|
+
declare function SidebarFooter({ children, className, }: {
|
|
1645
|
+
children: react.ReactNode;
|
|
1646
|
+
className?: string;
|
|
1647
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1648
|
+
declare namespace SidebarFooter {
|
|
1649
|
+
var displayName: string;
|
|
1650
|
+
}
|
|
1651
|
+
declare function SidebarTrigger({ className, children, }: {
|
|
1652
|
+
className?: string;
|
|
1653
|
+
children?: react.ReactNode;
|
|
1654
|
+
}): react_jsx_runtime.JSX.Element | null;
|
|
1655
|
+
declare namespace SidebarTrigger {
|
|
1656
|
+
var displayName: string;
|
|
1657
|
+
}
|
|
1658
|
+
interface SidebarGroupProps {
|
|
1659
|
+
children: react.ReactNode;
|
|
1660
|
+
/** 그룹 레이블. 접힌 상태에서 숨겨짐 */
|
|
1661
|
+
label?: string;
|
|
1662
|
+
className?: string;
|
|
1663
|
+
}
|
|
1664
|
+
declare function SidebarGroup({ children, label, className }: SidebarGroupProps): react_jsx_runtime.JSX.Element;
|
|
1665
|
+
declare namespace SidebarGroup {
|
|
1666
|
+
var displayName: string;
|
|
1667
|
+
}
|
|
1668
|
+
interface SidebarItemProps {
|
|
1669
|
+
children: react.ReactNode;
|
|
1670
|
+
/** 아이콘 (접힌 상태에서도 표시) */
|
|
1671
|
+
icon?: react.ReactNode;
|
|
1672
|
+
/** 활성 상태 */
|
|
1673
|
+
active?: boolean;
|
|
1674
|
+
/** 클릭 핸들러 */
|
|
1675
|
+
onClick?: () => void;
|
|
1676
|
+
/** 링크 URL — 설정 시 <a> 태그로 렌더링 */
|
|
1677
|
+
href?: string;
|
|
1678
|
+
/** 접힌 상태에서 표시할 툴팁 텍스트 */
|
|
1679
|
+
tooltip?: string;
|
|
1680
|
+
/** 우측 배지 (숫자 또는 ReactNode). 접힌 상태에서 아이콘 위 dot으로 축소 */
|
|
1681
|
+
badge?: react.ReactNode;
|
|
1682
|
+
className?: string;
|
|
1683
|
+
}
|
|
1684
|
+
declare function SidebarItem({ children, icon, active, onClick, href, tooltip, badge, className, }: SidebarItemProps): react_jsx_runtime.JSX.Element;
|
|
1685
|
+
declare namespace SidebarItem {
|
|
1686
|
+
var displayName: string;
|
|
1687
|
+
}
|
|
1688
|
+
declare function SidebarSeparator({ className }: {
|
|
1689
|
+
className?: string;
|
|
1690
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1691
|
+
declare namespace SidebarSeparator {
|
|
1692
|
+
var displayName: string;
|
|
1693
|
+
}
|
|
1694
|
+
declare function SidebarRoot({ children, collapsible, defaultCollapsed, collapsed: controlledCollapsed, onCollapsedChange, width, collapsedWidth, className, side, label, }: SidebarProps): react_jsx_runtime.JSX.Element;
|
|
1695
|
+
declare namespace SidebarRoot {
|
|
1696
|
+
var displayName: string;
|
|
1697
|
+
}
|
|
1698
|
+
declare const Sidebar: typeof SidebarRoot & {
|
|
1699
|
+
Header: typeof SidebarHeader;
|
|
1700
|
+
Content: typeof SidebarContent;
|
|
1701
|
+
Footer: typeof SidebarFooter;
|
|
1702
|
+
Trigger: typeof SidebarTrigger;
|
|
1703
|
+
Group: typeof SidebarGroup;
|
|
1704
|
+
Item: typeof SidebarItem;
|
|
1705
|
+
Separator: typeof SidebarSeparator;
|
|
1706
|
+
};
|
|
1707
|
+
|
|
1708
|
+
declare function AppShellHeader({ children, className, }: {
|
|
1709
|
+
children: react.ReactNode;
|
|
1710
|
+
className?: string;
|
|
1711
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1712
|
+
declare namespace AppShellHeader {
|
|
1713
|
+
var displayName: string;
|
|
1714
|
+
}
|
|
1715
|
+
declare function AppShellSidebar({ children, className, }: {
|
|
1716
|
+
children: react.ReactNode;
|
|
1717
|
+
className?: string;
|
|
1718
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1719
|
+
declare namespace AppShellSidebar {
|
|
1720
|
+
var displayName: string;
|
|
1721
|
+
}
|
|
1722
|
+
declare function AppShellContent({ children, className, }: {
|
|
1723
|
+
children: react.ReactNode;
|
|
1724
|
+
className?: string;
|
|
1725
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1726
|
+
declare namespace AppShellContent {
|
|
1727
|
+
var displayName: string;
|
|
1728
|
+
}
|
|
1729
|
+
declare function AppShellFooter({ children, className, }: {
|
|
1730
|
+
children: react.ReactNode;
|
|
1731
|
+
className?: string;
|
|
1732
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1733
|
+
declare namespace AppShellFooter {
|
|
1734
|
+
var displayName: string;
|
|
1735
|
+
}
|
|
1736
|
+
/** Props for the app shell component. */
|
|
1737
|
+
interface AppShellProps {
|
|
1738
|
+
children: react.ReactNode;
|
|
1739
|
+
className?: string;
|
|
1740
|
+
labels?: AppShellLabels;
|
|
1741
|
+
}
|
|
1742
|
+
/** Localized labels for the app shell component. */
|
|
1743
|
+
type AppShellLabels = Record<never, never>;
|
|
1744
|
+
declare function AppShellRoot({ children, className }: AppShellProps): react_jsx_runtime.JSX.Element | null;
|
|
1745
|
+
declare namespace AppShellRoot {
|
|
1746
|
+
var displayName: string;
|
|
1747
|
+
}
|
|
1748
|
+
declare const AppShell: typeof AppShellRoot & {
|
|
1749
|
+
Header: typeof AppShellHeader;
|
|
1750
|
+
Sidebar: typeof AppShellSidebar;
|
|
1751
|
+
Content: typeof AppShellContent;
|
|
1752
|
+
Footer: typeof AppShellFooter;
|
|
1753
|
+
};
|
|
1754
|
+
|
|
1755
|
+
/** Props for the confirm dialog component. */
|
|
1756
|
+
interface ConfirmDialogProps {
|
|
1757
|
+
open: boolean;
|
|
1758
|
+
onConfirm: () => void;
|
|
1759
|
+
onCancel: () => void;
|
|
1760
|
+
title: string;
|
|
1761
|
+
description?: string;
|
|
1762
|
+
confirmLabel?: string;
|
|
1763
|
+
cancelLabel?: string;
|
|
1764
|
+
variant?: "default" | "danger";
|
|
1765
|
+
children?: ReactNode;
|
|
1766
|
+
}
|
|
1767
|
+
/** Renders the confirm dialog component. */
|
|
1768
|
+
declare function ConfirmDialog({ open, onConfirm, onCancel, title, description, confirmLabel, cancelLabel, variant, children, }: ConfirmDialogProps): react_jsx_runtime.JSX.Element;
|
|
1769
|
+
declare namespace ConfirmDialog {
|
|
1770
|
+
var displayName: string;
|
|
1771
|
+
}
|
|
1772
|
+
|
|
1773
|
+
/** Localized labels for the async combobox component. */
|
|
1774
|
+
interface AsyncComboboxLabels {
|
|
1775
|
+
input?: string;
|
|
1776
|
+
loading?: string;
|
|
1777
|
+
noResults?: string;
|
|
1778
|
+
placeholder?: string;
|
|
1779
|
+
}
|
|
1780
|
+
/** Props for the async combobox component. */
|
|
1781
|
+
interface AsyncComboboxProps {
|
|
1782
|
+
onSearch: (query: string) => Promise<string[]>;
|
|
1783
|
+
debounceMs?: number;
|
|
1784
|
+
/** @deprecated Use labels.loading instead */
|
|
1785
|
+
loadingText?: string;
|
|
1786
|
+
minChars?: number;
|
|
1787
|
+
/** @deprecated Use labels.placeholder instead */
|
|
1788
|
+
placeholder?: string;
|
|
1789
|
+
onSelect?: (value: string) => void;
|
|
1790
|
+
labels?: AsyncComboboxLabels;
|
|
1791
|
+
className?: string;
|
|
1792
|
+
}
|
|
1793
|
+
/** Renders the async combobox component. */
|
|
1794
|
+
declare function AsyncCombobox({ onSearch, debounceMs, loadingText, minChars, placeholder, onSelect, labels: customLabels, className, }: AsyncComboboxProps): react_jsx_runtime.JSX.Element;
|
|
1795
|
+
|
|
1796
|
+
/** Props for the vertical tabs component. */
|
|
1797
|
+
interface VerticalTabsProps {
|
|
1798
|
+
tabs: TabDef[];
|
|
1799
|
+
defaultTabId?: string;
|
|
1800
|
+
labels?: VerticalTabsLabels;
|
|
1801
|
+
className?: string;
|
|
1802
|
+
}
|
|
1803
|
+
/** Localized labels for the vertical tabs component. */
|
|
1804
|
+
interface VerticalTabsLabels {
|
|
1805
|
+
ariaLabel?: string;
|
|
1806
|
+
emptyMessage?: string;
|
|
1807
|
+
}
|
|
1808
|
+
/** Renders the vertical tabs component. */
|
|
1809
|
+
declare function VerticalTabs({ tabs, defaultTabId, labels: customLabels, className, }: VerticalTabsProps): react_jsx_runtime.JSX.Element;
|
|
1810
|
+
|
|
1811
|
+
/** Defines the column toggler column shape. */
|
|
1812
|
+
interface ColumnTogglerColumn {
|
|
1813
|
+
id: string;
|
|
1814
|
+
header: string;
|
|
1815
|
+
}
|
|
1816
|
+
/** Props for the column toggler component. */
|
|
1817
|
+
interface ColumnTogglerProps {
|
|
1818
|
+
columns: ColumnTogglerColumn[];
|
|
1819
|
+
visibleColumns: string[];
|
|
1820
|
+
onChange: (visibleColumns: string[]) => void;
|
|
1821
|
+
className?: string;
|
|
1822
|
+
labels?: ColumnTogglerLabels;
|
|
1823
|
+
}
|
|
1824
|
+
/** Localized labels for the column toggler component. */
|
|
1825
|
+
interface ColumnTogglerLabels {
|
|
1826
|
+
triggerLabel?: (count: number) => string;
|
|
1827
|
+
emptyMessage?: string;
|
|
1828
|
+
}
|
|
1829
|
+
/** Renders the column toggler component. */
|
|
1830
|
+
declare function ColumnToggler({ columns, visibleColumns, onChange, className, labels: customLabels, }: ColumnTogglerProps): react_jsx_runtime.JSX.Element;
|
|
1831
|
+
declare namespace ColumnToggler {
|
|
1832
|
+
var displayName: string;
|
|
1833
|
+
}
|
|
1834
|
+
|
|
1835
|
+
/** Defines the bulk action shape. */
|
|
1836
|
+
interface BulkActionDef {
|
|
1837
|
+
id: string;
|
|
1838
|
+
label: string;
|
|
1839
|
+
variant?: "default" | "danger";
|
|
1840
|
+
}
|
|
1841
|
+
/** Localized labels for the bulk actions component. */
|
|
1842
|
+
interface BulkActionsLabels {
|
|
1843
|
+
selected?: string;
|
|
1844
|
+
actions?: string;
|
|
1845
|
+
clear?: string;
|
|
1846
|
+
noActions?: string;
|
|
1847
|
+
}
|
|
1848
|
+
/** Props for the bulk actions component. */
|
|
1849
|
+
interface BulkActionsProps {
|
|
1850
|
+
selectedCount: number;
|
|
1851
|
+
actions: BulkActionDef[];
|
|
1852
|
+
onAction: (actionId: string) => void;
|
|
1853
|
+
onClear: () => void;
|
|
1854
|
+
labels?: BulkActionsLabels;
|
|
1855
|
+
className?: string;
|
|
1856
|
+
}
|
|
1857
|
+
/** Renders the bulk actions component. */
|
|
1858
|
+
declare function BulkActions({ selectedCount, actions, onAction, onClear, labels: customLabels, className, }: BulkActionsProps): react_jsx_runtime.JSX.Element | null;
|
|
1859
|
+
|
|
1860
|
+
/** Defines the filter preset shape. */
|
|
1861
|
+
interface FilterPreset {
|
|
1862
|
+
id: string;
|
|
1863
|
+
name: string;
|
|
1864
|
+
filters: Record<string, unknown>;
|
|
1865
|
+
}
|
|
1866
|
+
/** Props for the saved filters component. */
|
|
1867
|
+
interface SavedFiltersProps {
|
|
1868
|
+
currentFilters: Record<string, unknown>;
|
|
1869
|
+
presets: FilterPreset[];
|
|
1870
|
+
onSavePreset: (name: string, filters: Record<string, unknown>) => void;
|
|
1871
|
+
onLoadPreset: (preset: FilterPreset) => void;
|
|
1872
|
+
onDeletePreset: (presetId: string) => void;
|
|
1873
|
+
className?: string;
|
|
1874
|
+
labels?: SavedFiltersLabels;
|
|
1875
|
+
}
|
|
1876
|
+
/** Localized labels for the saved filters component. */
|
|
1877
|
+
interface SavedFiltersLabels {
|
|
1878
|
+
triggerLabel?: (count: number) => string;
|
|
1879
|
+
emptyMessage?: string;
|
|
1880
|
+
deleteLabel?: (name: string) => string;
|
|
1881
|
+
namePlaceholder?: string;
|
|
1882
|
+
saveLabel?: string;
|
|
1883
|
+
}
|
|
1884
|
+
/** Renders the saved filters component. */
|
|
1885
|
+
declare function SavedFilters({ currentFilters, presets, onSavePreset, onLoadPreset, onDeletePreset, className, labels: customLabels, }: SavedFiltersProps): react_jsx_runtime.JSX.Element;
|
|
1886
|
+
|
|
1887
|
+
/** Defines the notification item shape. */
|
|
1888
|
+
interface NotificationItem {
|
|
1889
|
+
id: string;
|
|
1890
|
+
title: string;
|
|
1891
|
+
message: string;
|
|
1892
|
+
time: string;
|
|
1893
|
+
read: boolean;
|
|
1894
|
+
group?: string;
|
|
1895
|
+
actionLabel?: string;
|
|
1896
|
+
}
|
|
1897
|
+
/** Props for the notification center component. */
|
|
1898
|
+
interface NotificationCenterProps {
|
|
1899
|
+
notifications: NotificationItem[];
|
|
1900
|
+
onMarkRead: (id: string) => void;
|
|
1901
|
+
onMarkAllRead: () => void;
|
|
1902
|
+
onAction?: (id: string) => void;
|
|
1903
|
+
className?: string;
|
|
1904
|
+
labels?: NotificationCenterLabels;
|
|
1905
|
+
}
|
|
1906
|
+
/** Localized labels for the notification center component. */
|
|
1907
|
+
interface NotificationCenterLabels {
|
|
1908
|
+
triggerLabel?: string;
|
|
1909
|
+
unreadSuffix?: (count: number) => string;
|
|
1910
|
+
title?: string;
|
|
1911
|
+
markAllRead?: string;
|
|
1912
|
+
emptyMessage?: string;
|
|
1913
|
+
}
|
|
1914
|
+
/** Renders the notification center component. */
|
|
1915
|
+
declare function NotificationCenter({ notifications, onMarkRead, onMarkAllRead, onAction, className, labels: customLabels, }: NotificationCenterProps): react_jsx_runtime.JSX.Element;
|
|
1916
|
+
declare namespace NotificationCenter {
|
|
1917
|
+
var displayName: string;
|
|
1918
|
+
}
|
|
1919
|
+
|
|
1920
|
+
/** Defines the audit entry shape. */
|
|
1921
|
+
interface AuditEntry {
|
|
1922
|
+
id: string;
|
|
1923
|
+
user: {
|
|
1924
|
+
name: string;
|
|
1925
|
+
avatar?: string;
|
|
1926
|
+
};
|
|
1927
|
+
action: string;
|
|
1928
|
+
target: string;
|
|
1929
|
+
timestamp: string;
|
|
1930
|
+
metadata?: Record<string, string>;
|
|
1931
|
+
}
|
|
1932
|
+
/** Localized labels for the audit log component. */
|
|
1933
|
+
interface AuditLogLabels {
|
|
1934
|
+
title?: string;
|
|
1935
|
+
loading?: string;
|
|
1936
|
+
loadMore?: string;
|
|
1937
|
+
empty?: string;
|
|
1938
|
+
}
|
|
1939
|
+
/** Props for the audit log component. */
|
|
1940
|
+
interface AuditLogProps {
|
|
1941
|
+
entries: AuditEntry[];
|
|
1942
|
+
onLoadMore?: () => void;
|
|
1943
|
+
loading?: boolean;
|
|
1944
|
+
labels?: AuditLogLabels;
|
|
1945
|
+
className?: string;
|
|
1946
|
+
}
|
|
1947
|
+
/** Renders the audit log component. */
|
|
1948
|
+
declare function AuditLog({ entries, onLoadMore, loading, labels: customLabels, className, }: AuditLogProps): react_jsx_runtime.JSX.Element;
|
|
1949
|
+
declare namespace AuditLog {
|
|
1950
|
+
var displayName: string;
|
|
1951
|
+
}
|
|
1952
|
+
|
|
1953
|
+
/** Defines the tree column shape. */
|
|
1954
|
+
interface TreeColumnDef<T> {
|
|
1955
|
+
id: string;
|
|
1956
|
+
header: string;
|
|
1957
|
+
accessor: keyof T | ((row: T) => react.ReactNode);
|
|
1958
|
+
width?: string;
|
|
1959
|
+
}
|
|
1960
|
+
/** Defines the tree node shape. */
|
|
1961
|
+
interface TreeNode<T> {
|
|
1962
|
+
data: T;
|
|
1963
|
+
id: string;
|
|
1964
|
+
children?: TreeNode<T>[];
|
|
1965
|
+
}
|
|
1966
|
+
/** Props for the tree table component. */
|
|
1967
|
+
interface TreeTableProps<T> {
|
|
1968
|
+
data: TreeNode<T>[];
|
|
1969
|
+
columns: TreeColumnDef<T>[];
|
|
1970
|
+
defaultExpanded?: string[];
|
|
1971
|
+
indentSize?: number;
|
|
1972
|
+
className?: string;
|
|
1973
|
+
}
|
|
1974
|
+
/** Renders the tree table component. */
|
|
1975
|
+
declare function TreeTable<T>({ data, columns, defaultExpanded, indentSize, className, }: TreeTableProps<T>): react_jsx_runtime.JSX.Element;
|
|
1976
|
+
|
|
1977
|
+
/** Defines the inline edit column shape. */
|
|
1978
|
+
interface InlineEditColumnDef<T> {
|
|
1979
|
+
id: string;
|
|
1980
|
+
header: string;
|
|
1981
|
+
accessor: keyof T | ((row: T) => react.ReactNode);
|
|
1982
|
+
editable?: boolean;
|
|
1983
|
+
width?: string;
|
|
1984
|
+
}
|
|
1985
|
+
/** Props for the inline edit table component. */
|
|
1986
|
+
interface InlineEditTableProps<T> {
|
|
1987
|
+
data: T[];
|
|
1988
|
+
columns: InlineEditColumnDef<T>[];
|
|
1989
|
+
keyExtractor: (row: T) => string;
|
|
1990
|
+
onCellEdit?: (rowId: string, columnId: string, value: string) => void;
|
|
1991
|
+
labels?: InlineEditTableLabels;
|
|
1992
|
+
className?: string;
|
|
1993
|
+
}
|
|
1994
|
+
/** Localized labels for the inline edit table component. */
|
|
1995
|
+
interface InlineEditTableLabels {
|
|
1996
|
+
emptyMessage?: string;
|
|
1997
|
+
}
|
|
1998
|
+
/** Renders the inline edit table component. */
|
|
1999
|
+
declare function InlineEditTable<T>({ data, columns, keyExtractor, onCellEdit, labels: customLabels, className, }: InlineEditTableProps<T>): react_jsx_runtime.JSX.Element;
|
|
2000
|
+
|
|
2001
|
+
/** Defines the kanban column shape. */
|
|
2002
|
+
interface KanbanColumn<T> {
|
|
2003
|
+
id: string;
|
|
2004
|
+
title: string;
|
|
2005
|
+
items: T[];
|
|
2006
|
+
}
|
|
2007
|
+
/** Props for the kanban board component. */
|
|
2008
|
+
interface KanbanBoardProps<T> {
|
|
2009
|
+
columns: KanbanColumn<T>[];
|
|
2010
|
+
onDragEnd: (itemId: string, fromColumnId: string, toColumnId: string, toIndex: number) => void;
|
|
2011
|
+
renderCard: (item: T) => react.ReactNode;
|
|
2012
|
+
keyExtractor: (item: T) => string;
|
|
2013
|
+
emptyMessage?: string;
|
|
2014
|
+
className?: string;
|
|
2015
|
+
}
|
|
2016
|
+
/** Renders the kanban board component. */
|
|
2017
|
+
declare function KanbanBoard<T>({ columns, onDragEnd, renderCard, keyExtractor, emptyMessage, className, }: KanbanBoardProps<T>): react_jsx_runtime.JSX.Element;
|
|
2018
|
+
|
|
2019
|
+
type ToolbarAction = "bold" | "italic" | "link" | "code" | "heading" | "list" | "quote";
|
|
2020
|
+
/** Props for the rich text editor component. */
|
|
2021
|
+
interface RichTextEditorProps {
|
|
2022
|
+
value: string;
|
|
2023
|
+
onChange: (value: string) => void;
|
|
2024
|
+
placeholder?: string;
|
|
2025
|
+
toolbar?: ToolbarAction[];
|
|
2026
|
+
className?: string;
|
|
2027
|
+
}
|
|
2028
|
+
/** Renders the rich text editor component. */
|
|
2029
|
+
declare function RichTextEditor({ value, onChange, placeholder, toolbar, className, }: RichTextEditorProps): react_jsx_runtime.JSX.Element;
|
|
2030
|
+
|
|
2031
|
+
/** Props for the code diff viewer component. */
|
|
2032
|
+
interface CodeDiffViewerProps {
|
|
2033
|
+
original: string;
|
|
2034
|
+
modified: string;
|
|
2035
|
+
mode?: "split" | "unified";
|
|
2036
|
+
showLineNumbers?: boolean;
|
|
2037
|
+
scrollLabel?: string;
|
|
2038
|
+
className?: string;
|
|
2039
|
+
}
|
|
2040
|
+
/** Renders the code diff viewer component. */
|
|
2041
|
+
declare function CodeDiffViewer({ original, modified, mode, showLineNumbers, scrollLabel, className, }: CodeDiffViewerProps): react_jsx_runtime.JSX.Element;
|
|
2042
|
+
|
|
2043
|
+
/** Defines the webhook shape. */
|
|
2044
|
+
interface WebhookDef {
|
|
2045
|
+
url: string;
|
|
2046
|
+
events: string[];
|
|
2047
|
+
retries: number;
|
|
2048
|
+
active: boolean;
|
|
2049
|
+
}
|
|
2050
|
+
/** Props for the webhook component. */
|
|
2051
|
+
interface WebhookConfigProps {
|
|
2052
|
+
webhook: WebhookDef;
|
|
2053
|
+
onChange: (webhook: WebhookDef) => void;
|
|
2054
|
+
availableEvents: string[];
|
|
2055
|
+
onTest?: () => void;
|
|
2056
|
+
className?: string;
|
|
2057
|
+
labels?: WebhookConfigLabels;
|
|
2058
|
+
}
|
|
2059
|
+
/** Localized labels for the webhook component. */
|
|
2060
|
+
interface WebhookConfigLabels {
|
|
2061
|
+
webhookUrl?: string;
|
|
2062
|
+
events?: string;
|
|
2063
|
+
retries?: string;
|
|
2064
|
+
testWebhook?: string;
|
|
2065
|
+
emptyEventsMessage?: string;
|
|
2066
|
+
}
|
|
2067
|
+
/** Renders the webhook config component. */
|
|
2068
|
+
declare function WebhookConfig({ webhook, onChange, availableEvents, onTest, className, labels: customLabels, }: WebhookConfigProps): react_jsx_runtime.JSX.Element;
|
|
2069
|
+
|
|
2070
|
+
/** Defines the feature flag shape. */
|
|
2071
|
+
interface FeatureFlag {
|
|
2072
|
+
id: string;
|
|
2073
|
+
name: string;
|
|
2074
|
+
description?: string;
|
|
2075
|
+
enabled: boolean;
|
|
2076
|
+
environments: string[];
|
|
2077
|
+
rolloutPercentage?: number;
|
|
2078
|
+
}
|
|
2079
|
+
/** Props for the feature flag panel component. */
|
|
2080
|
+
interface FeatureFlagPanelProps {
|
|
2081
|
+
flags: FeatureFlag[];
|
|
2082
|
+
onToggle: (flagId: string, enabled: boolean) => void;
|
|
2083
|
+
onRolloutChange?: (flagId: string, percentage: number) => void;
|
|
2084
|
+
environments: string[];
|
|
2085
|
+
className?: string;
|
|
2086
|
+
labels?: FeatureFlagPanelLabels;
|
|
2087
|
+
}
|
|
2088
|
+
/** Localized labels for the feature flag panel component. */
|
|
2089
|
+
interface FeatureFlagPanelLabels {
|
|
2090
|
+
enabled?: string;
|
|
2091
|
+
disabled?: string;
|
|
2092
|
+
rolloutLabel?: string;
|
|
2093
|
+
emptyMessage?: string;
|
|
2094
|
+
}
|
|
2095
|
+
/** Renders the feature flag panel component. */
|
|
2096
|
+
declare function FeatureFlagPanel({ flags, onToggle, onRolloutChange, environments, className, labels: customLabels, }: FeatureFlagPanelProps): react_jsx_runtime.JSX.Element;
|
|
2097
|
+
|
|
2098
|
+
/** Defines the import field shape. */
|
|
2099
|
+
interface ImportFieldDef {
|
|
2100
|
+
id: string;
|
|
2101
|
+
label: string;
|
|
2102
|
+
required?: boolean;
|
|
2103
|
+
}
|
|
2104
|
+
/** Localized labels for the data import wizard component. */
|
|
2105
|
+
interface DataImportWizardLabels {
|
|
2106
|
+
stepsLabel?: string;
|
|
2107
|
+
upload?: string;
|
|
2108
|
+
mapColumns?: string;
|
|
2109
|
+
preview?: string;
|
|
2110
|
+
confirm?: string;
|
|
2111
|
+
dropPrompt?: string;
|
|
2112
|
+
selectColumn?: string;
|
|
2113
|
+
back?: string;
|
|
2114
|
+
next?: string;
|
|
2115
|
+
import?: string;
|
|
2116
|
+
uploadFileAriaLabel?: string;
|
|
2117
|
+
previewSummary?: (shown: number, total: number) => string;
|
|
2118
|
+
confirmSummary?: (rows: number, mappedFields: number) => string;
|
|
2119
|
+
}
|
|
2120
|
+
/** Props for the data import wizard component. */
|
|
2121
|
+
interface DataImportWizardProps {
|
|
2122
|
+
fields: ImportFieldDef[];
|
|
2123
|
+
onImport: (mapping: Record<string, string>, data: string[][]) => void;
|
|
2124
|
+
acceptedFormats?: string;
|
|
2125
|
+
labels?: DataImportWizardLabels;
|
|
2126
|
+
className?: string;
|
|
2127
|
+
}
|
|
2128
|
+
/** Renders the data import wizard component. */
|
|
2129
|
+
declare function DataImportWizard({ fields, onImport, acceptedFormats, labels: customLabels, className, }: DataImportWizardProps): react_jsx_runtime.JSX.Element;
|
|
2130
|
+
|
|
2131
|
+
/** Defines the mega menu item shape. */
|
|
2132
|
+
interface MegaMenuItem {
|
|
2133
|
+
label: string;
|
|
2134
|
+
href?: string;
|
|
2135
|
+
description?: string;
|
|
2136
|
+
icon?: react.ReactNode;
|
|
2137
|
+
}
|
|
2138
|
+
/** Defines the mega menu section shape. */
|
|
2139
|
+
interface MegaMenuSection {
|
|
2140
|
+
title: string;
|
|
2141
|
+
items: MegaMenuItem[];
|
|
2142
|
+
}
|
|
2143
|
+
/** Props for the mega menu component. */
|
|
2144
|
+
interface MegaMenuProps {
|
|
2145
|
+
menus: MegaMenuSection[];
|
|
2146
|
+
columns?: number;
|
|
2147
|
+
footer?: react.ReactNode;
|
|
2148
|
+
triggerLabel?: string;
|
|
2149
|
+
labels?: MegaMenuLabels;
|
|
2150
|
+
className?: string;
|
|
2151
|
+
}
|
|
2152
|
+
/** Localized labels for the mega menu component. */
|
|
2153
|
+
interface MegaMenuLabels {
|
|
2154
|
+
trigger?: string;
|
|
2155
|
+
}
|
|
2156
|
+
/** Renders the mega menu component. */
|
|
2157
|
+
declare function MegaMenu({ menus, columns, footer, triggerLabel, labels: customLabels, className, }: MegaMenuProps): react_jsx_runtime.JSX.Element | null;
|
|
2158
|
+
declare namespace MegaMenu {
|
|
2159
|
+
var displayName: string;
|
|
2160
|
+
}
|
|
2161
|
+
|
|
2162
|
+
/** Localized labels for the chat sidebar component. */
|
|
2163
|
+
interface ChatSidebarLabels {
|
|
2164
|
+
newChat?: string;
|
|
2165
|
+
searchPlaceholder?: string;
|
|
2166
|
+
emptyTitle?: string;
|
|
2167
|
+
emptyDescription?: string;
|
|
2168
|
+
}
|
|
2169
|
+
/** Props for the chat sidebar component. */
|
|
2170
|
+
interface ChatSidebarProps {
|
|
2171
|
+
conversations: ChatConversationDef[];
|
|
2172
|
+
activeConversationId?: string;
|
|
2173
|
+
onConversationSelect?: (conversation: ChatConversationDef) => void;
|
|
2174
|
+
onNewChat?: () => void;
|
|
2175
|
+
onSearch?: (query: string) => void;
|
|
2176
|
+
labels?: ChatSidebarLabels;
|
|
2177
|
+
className?: string;
|
|
2178
|
+
}
|
|
2179
|
+
/** Renders the chat sidebar component. */
|
|
2180
|
+
declare function ChatSidebar({ conversations, activeConversationId, onConversationSelect, onNewChat, onSearch, labels: customLabels, className, }: ChatSidebarProps): react_jsx_runtime.JSX.Element;
|
|
2181
|
+
declare namespace ChatSidebar {
|
|
2182
|
+
var displayName: string;
|
|
2183
|
+
}
|
|
2184
|
+
|
|
2185
|
+
/** Localized labels for the chat input component. */
|
|
2186
|
+
interface ChatInputLabels {
|
|
2187
|
+
placeholder?: string;
|
|
2188
|
+
send?: string;
|
|
2189
|
+
attach?: string;
|
|
2190
|
+
hint?: string;
|
|
2191
|
+
modelLabel?: string;
|
|
2192
|
+
styleLabel?: string;
|
|
2193
|
+
shiftKey?: string;
|
|
2194
|
+
enterKey?: string;
|
|
2195
|
+
}
|
|
2196
|
+
/** Props for the chat input component. */
|
|
2197
|
+
interface ChatInputProps {
|
|
2198
|
+
value?: string;
|
|
2199
|
+
defaultValue?: string;
|
|
2200
|
+
onChange?: (value: string) => void;
|
|
2201
|
+
onSend?: (message: string) => void;
|
|
2202
|
+
onFileAttach?: () => void;
|
|
2203
|
+
models?: ChatModelDef[];
|
|
2204
|
+
selectedModel?: string;
|
|
2205
|
+
onModelChange?: (modelId: string) => void;
|
|
2206
|
+
stylePresets?: ChatStylePresetDef[];
|
|
2207
|
+
selectedStyle?: string;
|
|
2208
|
+
onStyleChange?: (styleId: string) => void;
|
|
2209
|
+
disabled?: boolean;
|
|
2210
|
+
maxRows?: number;
|
|
2211
|
+
showHint?: boolean;
|
|
2212
|
+
labels?: ChatInputLabels;
|
|
2213
|
+
className?: string;
|
|
2214
|
+
}
|
|
2215
|
+
/** Renders the chat input component. */
|
|
2216
|
+
declare function ChatInput({ value: controlledValue, defaultValue, onChange, onSend, onFileAttach, models, selectedModel, onModelChange, stylePresets, selectedStyle, onStyleChange, disabled, maxRows, showHint, labels: customLabels, className, }: ChatInputProps): react_jsx_runtime.JSX.Element;
|
|
2217
|
+
declare namespace ChatInput {
|
|
2218
|
+
var displayName: string;
|
|
2219
|
+
}
|
|
2220
|
+
|
|
2221
|
+
/** Localized labels for the chat message list component. */
|
|
2222
|
+
interface ChatMessageListLabels {
|
|
2223
|
+
emptyTitle?: string;
|
|
2224
|
+
emptyDescription?: string;
|
|
2225
|
+
userLabel?: string;
|
|
2226
|
+
assistantLabel?: string;
|
|
2227
|
+
typingLabel?: string;
|
|
2228
|
+
}
|
|
2229
|
+
/** Props for the chat message list component. */
|
|
2230
|
+
interface ChatMessageListProps {
|
|
2231
|
+
messages: ChatMessageDef[];
|
|
2232
|
+
loading?: boolean;
|
|
2233
|
+
renderContent?: (message: ChatMessageDef) => ReactNode;
|
|
2234
|
+
assistantAvatar?: string;
|
|
2235
|
+
userName?: string;
|
|
2236
|
+
showTimestamps?: boolean;
|
|
2237
|
+
autoScroll?: boolean;
|
|
2238
|
+
labels?: ChatMessageListLabels;
|
|
2239
|
+
className?: string;
|
|
2240
|
+
}
|
|
2241
|
+
/** Renders the chat message list component. */
|
|
2242
|
+
declare function ChatMessageList({ messages, loading, renderContent, assistantAvatar, userName, showTimestamps, autoScroll, labels: customLabels, className, }: ChatMessageListProps): react_jsx_runtime.JSX.Element;
|
|
2243
|
+
declare namespace ChatMessageList {
|
|
2244
|
+
var displayName: string;
|
|
2245
|
+
}
|
|
2246
|
+
|
|
2247
|
+
/**
|
|
2248
|
+
* 페이지 전환 시 새 콘텐츠의 h1으로 포커스를 이동한다.
|
|
2249
|
+
* 포커스가 body로 빠지는 것을 방지하고,
|
|
2250
|
+
* 스크린 리더가 새 페이지 제목을 즉시 읽어줄 수 있게 한다.
|
|
2251
|
+
*/
|
|
2252
|
+
declare function RouteFocusManager(): null;
|
|
2253
|
+
|
|
2254
|
+
/** Props for the design guide panel component. */
|
|
2255
|
+
interface DesignGuidePanelProps {
|
|
2256
|
+
className?: string;
|
|
2257
|
+
}
|
|
2258
|
+
/** Renders the design guide panel component. */
|
|
2259
|
+
declare function DesignGuidePanel({ className }: DesignGuidePanelProps): react_jsx_runtime.JSX.Element;
|
|
2260
|
+
|
|
2261
|
+
/** Handles cn. */
|
|
2262
|
+
declare function cn(...inputs: ClassValue[]): string;
|
|
2263
|
+
|
|
2264
|
+
declare const OPT_TEXT_PRIMARY = "text-text-primary";
|
|
2265
|
+
declare const OPT_TEXT_SECONDARY = "text-text-secondary";
|
|
2266
|
+
|
|
2267
|
+
/**
|
|
2268
|
+
* Generates a stable component ID from label text.
|
|
2269
|
+
* Eliminates the duplicated `id ?? label?.replace(...)` pattern across input components.
|
|
2270
|
+
*/
|
|
2271
|
+
declare function useInputId(id: string | undefined, label: string | undefined, prefix: string): string | undefined;
|
|
2272
|
+
|
|
2273
|
+
/**
|
|
2274
|
+
* Manages controlled/uncontrolled state for input components.
|
|
2275
|
+
* When `controlledValue` is provided, acts as controlled; otherwise uses internal state.
|
|
2276
|
+
*/
|
|
2277
|
+
declare function useControlledState<T>(defaultValue: T, controlledValue: T | undefined, onChange: ((value: T) => void) | undefined): [T, (value: T) => void];
|
|
2278
|
+
|
|
2279
|
+
type OptDateInput = string | number | Date;
|
|
2280
|
+
/** Formats a date as Korean short date text in the opt-ui default timezone. */
|
|
2281
|
+
declare function formatOptShortDate(input: OptDateInput): string;
|
|
2282
|
+
/** Formats a date as Korean clock time in the opt-ui default timezone. */
|
|
2283
|
+
declare function formatOptTime(input: OptDateInput): string;
|
|
2284
|
+
/** Formats a date as Korean date-time text in the opt-ui default timezone. */
|
|
2285
|
+
declare function formatOptDateTime(input: OptDateInput): string;
|
|
2286
|
+
/** Formats numbers without depending on the runtime default locale. */
|
|
2287
|
+
declare function formatOptNumber(value: number): string;
|
|
2288
|
+
|
|
2289
|
+
/** Type definition for direction. */
|
|
2290
|
+
type Direction = "up" | "down" | "left" | "right";
|
|
2291
|
+
/** Handles should skip arrow. */
|
|
2292
|
+
declare function shouldSkipArrow(el: HTMLElement, dir: Direction): boolean;
|
|
2293
|
+
/** Returns trapped context role. */
|
|
2294
|
+
declare function getTrappedContextRole(el: HTMLElement): string | null;
|
|
2295
|
+
/** Defines the spatial target shape. */
|
|
2296
|
+
interface SpatialTarget {
|
|
2297
|
+
direction: Direction;
|
|
2298
|
+
element: HTMLElement;
|
|
2299
|
+
score: number;
|
|
2300
|
+
}
|
|
2301
|
+
/** Handles compute spatial targets. */
|
|
2302
|
+
declare function computeSpatialTargets(current: HTMLElement): SpatialTarget[];
|
|
2303
|
+
/** Defines the spatial nav decision detail shape. */
|
|
2304
|
+
interface SpatialNavDecisionDetail {
|
|
2305
|
+
direction: Direction;
|
|
2306
|
+
result: "moved" | "skipped";
|
|
2307
|
+
reason?: "defaultPrevented" | "input-protection" | "trapped-context" | "no-candidate";
|
|
2308
|
+
context?: string;
|
|
2309
|
+
target?: HTMLElement;
|
|
2310
|
+
}
|
|
2311
|
+
/** Renders the spatial nav provider component. */
|
|
2312
|
+
declare function SpatialNavProvider(): null;
|
|
2313
|
+
|
|
2314
|
+
/**
|
|
2315
|
+
* opt-ui Korean default labels.
|
|
2316
|
+
*
|
|
2317
|
+
* Components consume these as defaults so consumers don't have to pass labels
|
|
2318
|
+
* for the most common case. Korean is the package default — other locales
|
|
2319
|
+
* should be imported explicitly (e.g. `enLabels`) and passed via component
|
|
2320
|
+
* props or wrapped with a labels provider.
|
|
2321
|
+
*/
|
|
2322
|
+
declare const koComboboxLabels: {
|
|
2323
|
+
readonly empty: "결과가 없습니다.";
|
|
2324
|
+
};
|
|
2325
|
+
declare const koStarRatingLabels: {
|
|
2326
|
+
/** {value}/{max}점 — readonly fallback aria-label */
|
|
2327
|
+
readonly readonlyAriaLabel: "{value}/{max}점";
|
|
2328
|
+
/** rating group aria-label */
|
|
2329
|
+
readonly groupAriaLabel: "별점";
|
|
2330
|
+
/** {star}점 — individual star aria-label */
|
|
2331
|
+
readonly starAriaLabel: "{star}점";
|
|
2332
|
+
};
|
|
2333
|
+
declare const koBreadcrumbLabels: {
|
|
2334
|
+
/** {label}(으)로 이동 */
|
|
2335
|
+
readonly navAriaLabel: "{label}(으)로 이동";
|
|
2336
|
+
};
|
|
2337
|
+
|
|
2338
|
+
/** opt-ui English label catalog (opt-in alternative to `koLabels`). */
|
|
2339
|
+
declare const enComboboxLabels: {
|
|
2340
|
+
readonly empty: "No results.";
|
|
2341
|
+
};
|
|
2342
|
+
declare const enStarRatingLabels: {
|
|
2343
|
+
readonly readonlyAriaLabel: "{value} out of {max} stars";
|
|
2344
|
+
readonly groupAriaLabel: "Rating";
|
|
2345
|
+
readonly starAriaLabel: "{star} stars";
|
|
2346
|
+
};
|
|
2347
|
+
declare const enBreadcrumbLabels: {
|
|
2348
|
+
readonly navAriaLabel: "Go to {label}";
|
|
2349
|
+
};
|
|
2350
|
+
|
|
2351
|
+
export { ALL_COMPOUND_THEMES, ActivityDef, ActivityFeed, type ActivityFeedLabels, type ActivityFeedProps, AlertBuilder, type AlertBuilderProps, type AlertCondition, type AlertConfig, AppShell, type AppShellProps, AsyncCombobox, type AsyncComboboxLabels, type AsyncComboboxProps, type AuditChange, type AuditEntry, AuditLog, type AuditLogLabels, type AuditLogProps, AuditTimeline, type AuditEntry$1 as AuditTimelineEntry, type AuditTimelineLabels, type AuditTimelineProps, AuthForm, type AuthFormLabels, type AuthFormProps, type BulkActionDef, BulkActions, type BulkActionsLabels, type BulkActionsProps, COLOR_PRESETS, type CanonicalThemeOverrides, type CanonicalThemeTokenMap, type ChartTypeDef, ChatConversationDef, ChatInput, type ChatInputLabels, type ChatInputProps, ChatMessageDef, ChatMessageList, type ChatMessageListLabels, type ChatMessageListProps, ChatModelDef, ChatSidebar, type ChatSidebarLabels, type ChatSidebarProps, ChatStylePresetDef, CodeDiffViewer, type CodeDiffViewerProps, type CodeSnippetSyntaxTheme, CodeSnippetViewer, type CodeSnippetViewerProps, ColumnToggler, type ColumnTogglerColumn, type ColumnTogglerProps, Command, CommandDialog, type CommandDialogProps, CommandEmpty, CommandGroup, CommandInput, type CommandInputProps, CommandItem, CommandList, CommandSeparator, CommandShortcut, type ComparisonOption, ComparisonSelector, type ComparisonSelectorLabels, type ComparisonSelectorProps, type CompoundTheme, ConfirmDialog, type ConfirmDialogProps, ConnectionIndicator, type ConnectionIndicatorProps, type ConnectionStatus, DataImportWizard, type DataImportWizardLabels, type DataImportWizardProps, type DataSourceDef, DateRange, type DescriptorThemeSpec, DesignGuidePanel, type DesignGuidePanelProps, type DetectionConfig, type DetectionTypeDef, type Direction, DynamicFieldForm, type DynamicFieldFormLabels, type DynamicFieldFormProps, ErrorBoundary, type ErrorBoundaryProps, EventIcon, type EventIconProps, type EventMeta, EventMetaEditor, type EventMetaEditorProps, ExportButton, type ExportButtonLabels, type ExportButtonProps, ExportColumn, ExportFormat, FORCE_LIGHT_PRESETS, FORCE_LIGHT_PRESET_IDS, type FeatureFlag, FeatureFlagPanel, type FeatureFlagPanelProps, FileUploadForm, type FileUploadFormLabels, type FileUploadFormProps, FilterBar, type FilterBarLabels, type FilterBarProps, FilterGroupDef, type FilterPreset, type FloatingAction, FloatingActionBar, type FloatingActionBarProps, FormFieldDef, GENERATED_THEME_ID_DEFAULT, GLOBAL_THEME_STYLE_ID, type GeneratedThemeSpec, type GeneratedTokens, IconDef, type ImportFieldDef, type InlineEditColumnDef, InlineEditTable, type InlineEditTableProps, type InsightItem, type InsightSeverity, InsightsPanel, type InsightsPanelLabels, type InsightsPanelProps, type InsightsStat, KanbanBoard, type KanbanBoardProps, type KanbanColumn, LoadingOverlay, type LoadingOverlayProps, MegaMenu, type MegaMenuItem, type MegaMenuProps, type MegaMenuSection, NotificationCenter, type NotificationCenterProps, type NotificationItem, OPT_TEXT_PRIMARY, OPT_TEXT_SECONDARY, type OptThemeController, OptThemeControllerContext, OptThemeProvider, type OptThemeProviderProps, POPULAR_ICONS, PageAside, type PageAsideProps, type PresetThemeSpec, PromptTemplate, type PromptTemplateLabels, type PromptTemplateProps, type PromptVariable, type PropertyDef, PropertyExplorer, type PropertyExplorerProps, type PropertyGroup, QueryResultsTable, type QueryResultsTableProps, QuickActionDef, QuickActions, type QuickActionsLabels, type QuickActionsProps, ReportBuilder, type ReportBuilderChartType, type ReportBuilderLabels, type ReportBuilderProps, type ReportBuilderStep, type ResolvedThemeSpec, RichTextEditor, type RichTextEditorProps, RouteFocusManager, SavedFilters, type SavedFiltersProps, type SchemaLike, SegmentBuilder, type SegmentBuilderProps, type SegmentCondition, type SegmentConditionType, type SegmentGroup, Sidebar, type SidebarProps, type SpatialNavDecisionDetail, SpatialNavProvider, type SpatialTarget, SqlEditor, type SqlEditorProps, StatCard as StatCardType, type StoredTokenCache, SummaryRow, type SummaryRowProps, THEME_PRESET_IDS, THEME_REGISTRY, THEME_SPEC_STORAGE_KEY, THEME_TOKENS_STORAGE_KEY, TabDef, TaskDef, TaskList, type TaskListLabels, type TaskListProps, TeamMemberDef, TeamMemberList, type TeamMemberListLabels, type TeamMemberListProps, type TemplateDef, TemplatePicker, type TemplatePickerProps, type ThemeDescriptor, type ThemeMode, type ThemeOverrides, type ThemePreset, type ThemePresetId, type ThemeRuntimeOptions, type ThemeSpec, type ThemeStackEntry, ThemeSwitcher, type ThemeSwitcherLabels, type ThemeSwitcherProps, type TimePresetDef, TimeRangeSelector, type TimeRangeSelectorLabels, type TimeRangeSelectorProps, type TreeColumnDef, type TreeNode, TreeTable, type TreeTableProps, VerticalTabs, type VerticalTabsProps, WebhookConfig, type WebhookConfigProps, type WebhookDef, type WidgetDef, WidgetGrid, type WidgetGridProps, WizardForm, type WizardFormLabels, type WizardFormProps, type WizardStepDef, buildTokenCache, cn, coerceThemeMode, computeGeneratedTokens, computeSpatialTargets, createThemeBootScript, defineThemeOverrides, enBreadcrumbLabels, enComboboxLabels, enStarRatingLabels, formatOptDateTime, formatOptNumber, formatOptShortDate, formatOptTime, generatedTheme, getCompoundIdForSpec, getCompoundTheme, getThemeDescriptor, getTrappedContextRole, isDescriptorSpec, isForceLightSpec, isGeneratedSpec, isPresetSpec, isThemePresetId, koBreadcrumbLabels, koComboboxLabels, koStarRatingLabels, presetTheme, readStoredTheme, resolveDescriptor, resolveThemeMode, safeParseStoredSpec, safeParseStoredTokens, schemaValidator, serializeGeneratedTheme, serializeThemeRule, serializeTokenBody, shouldSkipArrow, useControlledState, useInputId, useOptTheme, useOptThemeController, useOptionalOptTheme, useSidebar };
|