@keboola/design 3.1.1 → 3.2.0

package/dist/index.d.cts

@@ -103,7 +103,7 @@ declare const Button: ({ ref, children, disabled, className, type, isLoading, as
 }) => react_jsx_runtime.JSX.Element;
 
 declare const buttonInlineVariants: (props?: ({
-    color?: "muted" | "link" | "danger" | "dark" | "custom" | null | undefined;
+    color?: "dark" | "muted" | "link" | "danger" | "custom" | null | undefined;
     variant?: "link" | "custom" | "link-reverse" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type Props$1O = ComponentProps<'button'> & VariantProps<typeof buttonInlineVariants> & {
@@ -10338,6 +10338,17 @@ type Props$2 = {
 };
 declare const SqlEditor: ({ value, onChange, onSelectionChange, onCreateEditor, onDestroyEditor, onBlurEditor, onFocusEditor, placeholder, searchQuery, searchMatchIndex, readOnly, extraKeys, queryParser, autoFocus, lineNumbers, className, schema, variables, defaultDatabase, defaultSchema, highlightLines, dialect, }: Props$2) => react_jsx_runtime.JSX.Element;
 
+type ColorScheme = 'light' | 'dark' | 'system';
+type ResolvedMode = 'light' | 'dark';
+type ThemeContextValue = {
+    brand: Brand;
+    setBrand?: (brand: Brand) => void;
+    /** The configured color scheme (may be `'system'`). */
+    colorScheme: ColorScheme;
+    /** The effective light/dark mode after resolving `'system'`. */
+    resolvedMode: ResolvedMode;
+};
+
 type Props$1 = {
     /**
      * Brand whose tokens drive the chrome (`@keboola/design`'s semantic CSS
@@ -10351,29 +10362,36 @@ type Props$1 = {
      * brands at runtime (Storybook toolbar, a customer-impersonation switch).
      */
     setBrand?: (brand: Brand) => void;
+    /**
+     * Light/dark mode. `'system'` follows `prefers-color-scheme` and updates
+     * reactively. Defaults to `'light'` so existing mounts don't drift. Only
+     * the ROOT provider applies this (sets `data-theme`, owns the media
+     * listener); a nested provider inherits the root's resolved mode.
+     */
+    colorScheme?: ColorScheme;
     children: ReactNode;
 };
 /**
  * Responsibilities:
  * - Render hidden SVG gradient definitions (`aigradient-600`, `aigradient-700`).
  * - Set `data-brand="<brand.id>"` on `<html>` and inject the matching `--color-*` /
- *   `--radius-*` CSS variables so chrome re-skins for the supplied brand.
- * - Expose `{ brand, setBrand? }` via `useTheme()` (throws outside the provider).
+ *   `--radius-*` CSS variables (for the resolved light/dark mode) so chrome
+ *   re-skins for the supplied brand.
+ * - ROOT only: set `data-theme` (`light` | `dark`) on `<html>` and own the
+ *   `prefers-color-scheme` media listener when `colorScheme === 'system'`.
+ *   A nested provider inherits the resolved mode from the parent context and
+ *   touches neither `data-theme` nor a media listener.
+ * - Expose `{ brand, setBrand?, colorScheme, resolvedMode }` via `useTheme()`.
  *
- * The slots a brand can override today are a subset of the canonical
- * `:root` block in `styles.css`. Slots the brand doesn't define fall back
- * to the `:root` defaults — we deliberately do not write empty strings.
+ * Brand × mode: the active mode's palette is injected inline on `<html>`. When
+ * the resolved mode is `dark` and the brand has no `colorsDark`, the colour
+ * vars are NOT emitted — the stylesheet `[data-theme='dark']` block supplies
+ * them, so no `!important` override is ever needed.
  *
- * `data-brand` (brand id) is intentionally separate from `data-theme`
- * (light/dark mode, defined by the `[data-theme='dark']` block in
- * `styles.css`) so the two axes compose without clobbering each other.
+ * `data-brand` (brand id) and `data-theme` (light/dark) are separate axes so
+ * they compose without clobbering each other.
  */
-declare const ThemeProvider: ({ brand, setBrand, children }: Props$1) => react_jsx_runtime.JSX.Element;
-
-type ThemeContextValue = {
-    brand: Brand;
-    setBrand?: (brand: Brand) => void;
-};
+declare const ThemeProvider: ({ brand, setBrand, colorScheme, children, }: Props$1) => react_jsx_runtime.JSX.Element;
 
 /**
  * Read the active brand (and optional setter) from the nearest `<ThemeProvider>`.
@@ -10384,10 +10402,22 @@ type ThemeContextValue = {
  */
 declare const useTheme: () => ThemeContextValue;
 
+/**
+ * Read the configured color scheme and the effective light/dark mode from the
+ * nearest `<ThemeProvider>`. Read-only — there is no setter (yet).
+ *
+ * Throws if no provider is mounted (mirrors `useTheme()`).
+ */
+declare const useColorScheme: () => {
+    colorScheme: ColorScheme;
+    resolvedMode: ResolvedMode;
+};
+
 declare const useIsLegacyBrand: () => boolean;
 
 type Props = {
     brand: Brand;
+    colorScheme?: ColorScheme;
     children: ReactNode;
 };
 /**
@@ -10397,8 +10427,14 @@ type Props = {
  * `resolveStorybookBrand` + `themeToolbarBrands` from `./storybookBrands` to
  * build the toolbar. This is the empirical brand-swap harness UT-4047
  * promised for the layer-0 contract.
+ *
+ * `colorScheme` (driven by the **Mode** toolbar) is forwarded to the provider
+ * so flipping it sets `data-theme` and emits the active mode's palette — the
+ * empirical light/dark switch. The story is rendered on a `bg-background`
+ * surface so the mode is actually visible (otherwise dark-mode text sits on
+ * the unrelated canvas backdrop).
  */
-declare const ThemeDecorator: ({ brand, children }: Props) => react_jsx_runtime.JSX.Element;
+declare const ThemeDecorator: ({ brand, colorScheme, children }: Props) => react_jsx_runtime.JSX.Element;
 
 /**
  * Default toolbar items shipped with `ThemeDecorator` — the same brand IDs
@@ -10449,4 +10485,4 @@ declare const themeToolbarBrands: {
  */
 declare const resolveStorybookBrand: (id: unknown) => Brand;
 
-export { Alert, AnswerSummary, type AnswerItem as AnswerSummaryItem, type Props$I as AnswerSummaryProps, type Variant$5 as AnswerSummaryVariant, AppShell, AutoSaveTextarea, Avatar, Badge, Breadcrumb, Button, ButtonGroup, ButtonInline, Calendar, type CalendarProps, Card, type ChangeClassification, Checkbox, Clipboard, ClipboardButton, ClipboardInline, CodeEditor, Collapse, Collapsible, CollapsiblePanel, CollapsibleStepHeader, ColorInput, Combobox, Command, CommandGroup, CommandInput, CommandItem, CommandList, ConflictStatusIndicator, DateInput, DatePicker, type DateRange, DateRangeInput, DateRangePicker, type DateRangePreset, type DiffChunk, type DiffInformation, type DiffRow, DiffType, DiffView, DotsLoader, DropdownMenu, EmptyConfigurationActionCard, EmptySearchContent, EmptyState, type RootProps$3 as EmptyStateProps, type Variant$1 as EmptyStateVariant, ErrorState, type RootProps$2 as ErrorStateProps, type Variant as ErrorStateVariant, FileUpload, FormGroup, FullScreenModal, FullScreenModalBody, FullScreenModalHeader, HelpBlock, HoverCard, InlineStepDetail, type Props$G as InlineStepDetailProps, InlineStepLabel, type Props$F as InlineStepLabelProps, type Variant$3 as InlineStepLabelVariant, InputGroup, InputOtp, type RootProps$4 as InputOtpProps, Kbd, Label, type LineInformation, Link, MarkedText, type MergeConflict, MergeEditor, MessageBubble, Modal, MultiActionButtonGroup, MultiCombobox, Navbar, NumberInput, PageHeader, PageLayout, PageToolbar, Pagination, PaneHeader, PanelWithDetails, PasswordInput, PlanApproval, type PlanApprovalProps, type PlanApprovalStatus, PlanRewritingIndicator, type PlanRewritingIndicatorProps, Popconfirm, Popover, Progress, type PromptCommand, PromptInput, type Props$1k as Props, Question, type QuestionAnswers, QuestionBlock, type Props$z as QuestionBlockProps, type QuestionOption, type Props$A as QuestionProps, type QuestionStep, RadioGroup, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Search, SearchForm, SearchInput, SearchInputWithNavigation, Select, type SelectItem, type SelectItemGroup, Separator, type ServerFieldError, Sheet, type SideInformation, Sidebar, type SidebarMode, SidebarProvider, type SidebarSide, Skeleton, SkeletonList, Slider, SplitButton, SqlEditor, type StepStatus, Stepper, type StepperOrientation, SuggestedPrompt, Switch, Table, Tabs, TabsContent, Tagger, TextInput, Textarea, type ThemeContextValue, ThemeDecorator, ThemeProvider, ThinkingIndicator, type ThumbTooltipFn, TimeInput, TimePicker, Timeline, type ToastOptions, Toaster, Toggle, ToggleGroup, Tooltip, type Props$1I as TooltipProps, TooltipProvider, type Trigger, Truncated, type UseAutosizeInputOptions, type UseAutosizeInputReturn, type ValidityState, type WordInformation, ZoomableSvg, argoVariants, cn, computeDiffRows, computeLineInformation, copyToClipboard, isMac, kbdVariants, keys, mergeRefs, resolveStorybookBrand, setServerFieldErrors, themeToolbarBrands, toast, useAppForm, useAutosizeInput, useInputOtpContext, useIsLegacyBrand, useMergeDiff, useNotification, useScrollbarPosition, useSidebar, useTheme, withForm };
+export { Alert, AnswerSummary, type AnswerItem as AnswerSummaryItem, type Props$I as AnswerSummaryProps, type Variant$5 as AnswerSummaryVariant, AppShell, AutoSaveTextarea, Avatar, Badge, Breadcrumb, Button, ButtonGroup, ButtonInline, Calendar, type CalendarProps, Card, type ChangeClassification, Checkbox, Clipboard, ClipboardButton, ClipboardInline, CodeEditor, Collapse, Collapsible, CollapsiblePanel, CollapsibleStepHeader, ColorInput, type ColorScheme, Combobox, Command, CommandGroup, CommandInput, CommandItem, CommandList, ConflictStatusIndicator, DateInput, DatePicker, type DateRange, DateRangeInput, DateRangePicker, type DateRangePreset, type DiffChunk, type DiffInformation, type DiffRow, DiffType, DiffView, DotsLoader, DropdownMenu, EmptyConfigurationActionCard, EmptySearchContent, EmptyState, type RootProps$3 as EmptyStateProps, type Variant$1 as EmptyStateVariant, ErrorState, type RootProps$2 as ErrorStateProps, type Variant as ErrorStateVariant, FileUpload, FormGroup, FullScreenModal, FullScreenModalBody, FullScreenModalHeader, HelpBlock, HoverCard, InlineStepDetail, type Props$G as InlineStepDetailProps, InlineStepLabel, type Props$F as InlineStepLabelProps, type Variant$3 as InlineStepLabelVariant, InputGroup, InputOtp, type RootProps$4 as InputOtpProps, Kbd, Label, type LineInformation, Link, MarkedText, type MergeConflict, MergeEditor, MessageBubble, Modal, MultiActionButtonGroup, MultiCombobox, Navbar, NumberInput, PageHeader, PageLayout, PageToolbar, Pagination, PaneHeader, PanelWithDetails, PasswordInput, PlanApproval, type PlanApprovalProps, type PlanApprovalStatus, PlanRewritingIndicator, type PlanRewritingIndicatorProps, Popconfirm, Popover, Progress, type PromptCommand, PromptInput, type Props$1k as Props, Question, type QuestionAnswers, QuestionBlock, type Props$z as QuestionBlockProps, type QuestionOption, type Props$A as QuestionProps, type QuestionStep, RadioGroup, ResizableHandle, ResizablePanel, ResizablePanelGroup, type ResolvedMode, ScrollArea, ScrollBar, Search, SearchForm, SearchInput, SearchInputWithNavigation, Select, type SelectItem, type SelectItemGroup, Separator, type ServerFieldError, Sheet, type SideInformation, Sidebar, type SidebarMode, SidebarProvider, type SidebarSide, Skeleton, SkeletonList, Slider, SplitButton, SqlEditor, type StepStatus, Stepper, type StepperOrientation, SuggestedPrompt, Switch, Table, Tabs, TabsContent, Tagger, TextInput, Textarea, type ThemeContextValue, ThemeDecorator, ThemeProvider, ThinkingIndicator, type ThumbTooltipFn, TimeInput, TimePicker, Timeline, type ToastOptions, Toaster, Toggle, ToggleGroup, Tooltip, type Props$1I as TooltipProps, TooltipProvider, type Trigger, Truncated, type UseAutosizeInputOptions, type UseAutosizeInputReturn, type ValidityState, type WordInformation, ZoomableSvg, argoVariants, cn, computeDiffRows, computeLineInformation, copyToClipboard, isMac, kbdVariants, keys, mergeRefs, resolveStorybookBrand, setServerFieldErrors, themeToolbarBrands, toast, useAppForm, useAutosizeInput, useColorScheme, useInputOtpContext, useIsLegacyBrand, useMergeDiff, useNotification, useScrollbarPosition, useSidebar, useTheme, withForm };

package/dist/index.d.ts

@@ -103,7 +103,7 @@ declare const Button: ({ ref, children, disabled, className, type, isLoading, as
 }) => react_jsx_runtime.JSX.Element;
 
 declare const buttonInlineVariants: (props?: ({
-    color?: "muted" | "link" | "danger" | "dark" | "custom" | null | undefined;
+    color?: "dark" | "muted" | "link" | "danger" | "custom" | null | undefined;
     variant?: "link" | "custom" | "link-reverse" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type Props$1O = ComponentProps<'button'> & VariantProps<typeof buttonInlineVariants> & {
@@ -10338,6 +10338,17 @@ type Props$2 = {
 };
 declare const SqlEditor: ({ value, onChange, onSelectionChange, onCreateEditor, onDestroyEditor, onBlurEditor, onFocusEditor, placeholder, searchQuery, searchMatchIndex, readOnly, extraKeys, queryParser, autoFocus, lineNumbers, className, schema, variables, defaultDatabase, defaultSchema, highlightLines, dialect, }: Props$2) => react_jsx_runtime.JSX.Element;
 
+type ColorScheme = 'light' | 'dark' | 'system';
+type ResolvedMode = 'light' | 'dark';
+type ThemeContextValue = {
+    brand: Brand;
+    setBrand?: (brand: Brand) => void;
+    /** The configured color scheme (may be `'system'`). */
+    colorScheme: ColorScheme;
+    /** The effective light/dark mode after resolving `'system'`. */
+    resolvedMode: ResolvedMode;
+};
+
 type Props$1 = {
     /**
      * Brand whose tokens drive the chrome (`@keboola/design`'s semantic CSS
@@ -10351,29 +10362,36 @@ type Props$1 = {
      * brands at runtime (Storybook toolbar, a customer-impersonation switch).
      */
     setBrand?: (brand: Brand) => void;
+    /**
+     * Light/dark mode. `'system'` follows `prefers-color-scheme` and updates
+     * reactively. Defaults to `'light'` so existing mounts don't drift. Only
+     * the ROOT provider applies this (sets `data-theme`, owns the media
+     * listener); a nested provider inherits the root's resolved mode.
+     */
+    colorScheme?: ColorScheme;
     children: ReactNode;
 };
 /**
  * Responsibilities:
  * - Render hidden SVG gradient definitions (`aigradient-600`, `aigradient-700`).
  * - Set `data-brand="<brand.id>"` on `<html>` and inject the matching `--color-*` /
- *   `--radius-*` CSS variables so chrome re-skins for the supplied brand.
- * - Expose `{ brand, setBrand? }` via `useTheme()` (throws outside the provider).
+ *   `--radius-*` CSS variables (for the resolved light/dark mode) so chrome
+ *   re-skins for the supplied brand.
+ * - ROOT only: set `data-theme` (`light` | `dark`) on `<html>` and own the
+ *   `prefers-color-scheme` media listener when `colorScheme === 'system'`.
+ *   A nested provider inherits the resolved mode from the parent context and
+ *   touches neither `data-theme` nor a media listener.
+ * - Expose `{ brand, setBrand?, colorScheme, resolvedMode }` via `useTheme()`.
  *
- * The slots a brand can override today are a subset of the canonical
- * `:root` block in `styles.css`. Slots the brand doesn't define fall back
- * to the `:root` defaults — we deliberately do not write empty strings.
+ * Brand × mode: the active mode's palette is injected inline on `<html>`. When
+ * the resolved mode is `dark` and the brand has no `colorsDark`, the colour
+ * vars are NOT emitted — the stylesheet `[data-theme='dark']` block supplies
+ * them, so no `!important` override is ever needed.
  *
- * `data-brand` (brand id) is intentionally separate from `data-theme`
- * (light/dark mode, defined by the `[data-theme='dark']` block in
- * `styles.css`) so the two axes compose without clobbering each other.
+ * `data-brand` (brand id) and `data-theme` (light/dark) are separate axes so
+ * they compose without clobbering each other.
  */
-declare const ThemeProvider: ({ brand, setBrand, children }: Props$1) => react_jsx_runtime.JSX.Element;
-
-type ThemeContextValue = {
-    brand: Brand;
-    setBrand?: (brand: Brand) => void;
-};
+declare const ThemeProvider: ({ brand, setBrand, colorScheme, children, }: Props$1) => react_jsx_runtime.JSX.Element;
 
 /**
  * Read the active brand (and optional setter) from the nearest `<ThemeProvider>`.
@@ -10384,10 +10402,22 @@ type ThemeContextValue = {
  */
 declare const useTheme: () => ThemeContextValue;
 
+/**
+ * Read the configured color scheme and the effective light/dark mode from the
+ * nearest `<ThemeProvider>`. Read-only — there is no setter (yet).
+ *
+ * Throws if no provider is mounted (mirrors `useTheme()`).
+ */
+declare const useColorScheme: () => {
+    colorScheme: ColorScheme;
+    resolvedMode: ResolvedMode;
+};
+
 declare const useIsLegacyBrand: () => boolean;
 
 type Props = {
     brand: Brand;
+    colorScheme?: ColorScheme;
     children: ReactNode;
 };
 /**
@@ -10397,8 +10427,14 @@ type Props = {
  * `resolveStorybookBrand` + `themeToolbarBrands` from `./storybookBrands` to
  * build the toolbar. This is the empirical brand-swap harness UT-4047
  * promised for the layer-0 contract.
+ *
+ * `colorScheme` (driven by the **Mode** toolbar) is forwarded to the provider
+ * so flipping it sets `data-theme` and emits the active mode's palette — the
+ * empirical light/dark switch. The story is rendered on a `bg-background`
+ * surface so the mode is actually visible (otherwise dark-mode text sits on
+ * the unrelated canvas backdrop).
  */
-declare const ThemeDecorator: ({ brand, children }: Props) => react_jsx_runtime.JSX.Element;
+declare const ThemeDecorator: ({ brand, colorScheme, children }: Props) => react_jsx_runtime.JSX.Element;
 
 /**
  * Default toolbar items shipped with `ThemeDecorator` — the same brand IDs
@@ -10449,4 +10485,4 @@ declare const themeToolbarBrands: {
  */
 declare const resolveStorybookBrand: (id: unknown) => Brand;
 
-export { Alert, AnswerSummary, type AnswerItem as AnswerSummaryItem, type Props$I as AnswerSummaryProps, type Variant$5 as AnswerSummaryVariant, AppShell, AutoSaveTextarea, Avatar, Badge, Breadcrumb, Button, ButtonGroup, ButtonInline, Calendar, type CalendarProps, Card, type ChangeClassification, Checkbox, Clipboard, ClipboardButton, ClipboardInline, CodeEditor, Collapse, Collapsible, CollapsiblePanel, CollapsibleStepHeader, ColorInput, Combobox, Command, CommandGroup, CommandInput, CommandItem, CommandList, ConflictStatusIndicator, DateInput, DatePicker, type DateRange, DateRangeInput, DateRangePicker, type DateRangePreset, type DiffChunk, type DiffInformation, type DiffRow, DiffType, DiffView, DotsLoader, DropdownMenu, EmptyConfigurationActionCard, EmptySearchContent, EmptyState, type RootProps$3 as EmptyStateProps, type Variant$1 as EmptyStateVariant, ErrorState, type RootProps$2 as ErrorStateProps, type Variant as ErrorStateVariant, FileUpload, FormGroup, FullScreenModal, FullScreenModalBody, FullScreenModalHeader, HelpBlock, HoverCard, InlineStepDetail, type Props$G as InlineStepDetailProps, InlineStepLabel, type Props$F as InlineStepLabelProps, type Variant$3 as InlineStepLabelVariant, InputGroup, InputOtp, type RootProps$4 as InputOtpProps, Kbd, Label, type LineInformation, Link, MarkedText, type MergeConflict, MergeEditor, MessageBubble, Modal, MultiActionButtonGroup, MultiCombobox, Navbar, NumberInput, PageHeader, PageLayout, PageToolbar, Pagination, PaneHeader, PanelWithDetails, PasswordInput, PlanApproval, type PlanApprovalProps, type PlanApprovalStatus, PlanRewritingIndicator, type PlanRewritingIndicatorProps, Popconfirm, Popover, Progress, type PromptCommand, PromptInput, type Props$1k as Props, Question, type QuestionAnswers, QuestionBlock, type Props$z as QuestionBlockProps, type QuestionOption, type Props$A as QuestionProps, type QuestionStep, RadioGroup, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Search, SearchForm, SearchInput, SearchInputWithNavigation, Select, type SelectItem, type SelectItemGroup, Separator, type ServerFieldError, Sheet, type SideInformation, Sidebar, type SidebarMode, SidebarProvider, type SidebarSide, Skeleton, SkeletonList, Slider, SplitButton, SqlEditor, type StepStatus, Stepper, type StepperOrientation, SuggestedPrompt, Switch, Table, Tabs, TabsContent, Tagger, TextInput, Textarea, type ThemeContextValue, ThemeDecorator, ThemeProvider, ThinkingIndicator, type ThumbTooltipFn, TimeInput, TimePicker, Timeline, type ToastOptions, Toaster, Toggle, ToggleGroup, Tooltip, type Props$1I as TooltipProps, TooltipProvider, type Trigger, Truncated, type UseAutosizeInputOptions, type UseAutosizeInputReturn, type ValidityState, type WordInformation, ZoomableSvg, argoVariants, cn, computeDiffRows, computeLineInformation, copyToClipboard, isMac, kbdVariants, keys, mergeRefs, resolveStorybookBrand, setServerFieldErrors, themeToolbarBrands, toast, useAppForm, useAutosizeInput, useInputOtpContext, useIsLegacyBrand, useMergeDiff, useNotification, useScrollbarPosition, useSidebar, useTheme, withForm };
+export { Alert, AnswerSummary, type AnswerItem as AnswerSummaryItem, type Props$I as AnswerSummaryProps, type Variant$5 as AnswerSummaryVariant, AppShell, AutoSaveTextarea, Avatar, Badge, Breadcrumb, Button, ButtonGroup, ButtonInline, Calendar, type CalendarProps, Card, type ChangeClassification, Checkbox, Clipboard, ClipboardButton, ClipboardInline, CodeEditor, Collapse, Collapsible, CollapsiblePanel, CollapsibleStepHeader, ColorInput, type ColorScheme, Combobox, Command, CommandGroup, CommandInput, CommandItem, CommandList, ConflictStatusIndicator, DateInput, DatePicker, type DateRange, DateRangeInput, DateRangePicker, type DateRangePreset, type DiffChunk, type DiffInformation, type DiffRow, DiffType, DiffView, DotsLoader, DropdownMenu, EmptyConfigurationActionCard, EmptySearchContent, EmptyState, type RootProps$3 as EmptyStateProps, type Variant$1 as EmptyStateVariant, ErrorState, type RootProps$2 as ErrorStateProps, type Variant as ErrorStateVariant, FileUpload, FormGroup, FullScreenModal, FullScreenModalBody, FullScreenModalHeader, HelpBlock, HoverCard, InlineStepDetail, type Props$G as InlineStepDetailProps, InlineStepLabel, type Props$F as InlineStepLabelProps, type Variant$3 as InlineStepLabelVariant, InputGroup, InputOtp, type RootProps$4 as InputOtpProps, Kbd, Label, type LineInformation, Link, MarkedText, type MergeConflict, MergeEditor, MessageBubble, Modal, MultiActionButtonGroup, MultiCombobox, Navbar, NumberInput, PageHeader, PageLayout, PageToolbar, Pagination, PaneHeader, PanelWithDetails, PasswordInput, PlanApproval, type PlanApprovalProps, type PlanApprovalStatus, PlanRewritingIndicator, type PlanRewritingIndicatorProps, Popconfirm, Popover, Progress, type PromptCommand, PromptInput, type Props$1k as Props, Question, type QuestionAnswers, QuestionBlock, type Props$z as QuestionBlockProps, type QuestionOption, type Props$A as QuestionProps, type QuestionStep, RadioGroup, ResizableHandle, ResizablePanel, ResizablePanelGroup, type ResolvedMode, ScrollArea, ScrollBar, Search, SearchForm, SearchInput, SearchInputWithNavigation, Select, type SelectItem, type SelectItemGroup, Separator, type ServerFieldError, Sheet, type SideInformation, Sidebar, type SidebarMode, SidebarProvider, type SidebarSide, Skeleton, SkeletonList, Slider, SplitButton, SqlEditor, type StepStatus, Stepper, type StepperOrientation, SuggestedPrompt, Switch, Table, Tabs, TabsContent, Tagger, TextInput, Textarea, type ThemeContextValue, ThemeDecorator, ThemeProvider, ThinkingIndicator, type ThumbTooltipFn, TimeInput, TimePicker, Timeline, type ToastOptions, Toaster, Toggle, ToggleGroup, Tooltip, type Props$1I as TooltipProps, TooltipProvider, type Trigger, Truncated, type UseAutosizeInputOptions, type UseAutosizeInputReturn, type ValidityState, type WordInformation, ZoomableSvg, argoVariants, cn, computeDiffRows, computeLineInformation, copyToClipboard, isMac, kbdVariants, keys, mergeRefs, resolveStorybookBrand, setServerFieldErrors, themeToolbarBrands, toast, useAppForm, useAutosizeInput, useColorScheme, useInputOtpContext, useIsLegacyBrand, useMergeDiff, useNotification, useScrollbarPosition, useSidebar, useTheme, withForm };

package/dist/index.js

@@ -5941,7 +5941,16 @@ var BadgeRoot = ({
   className,
   children,
   ...rest
-}) => /* @__PURE__ */ jsx("div", { ...rest, ref, className: cn(badgeRootVariants({ variant, color, className })), children });
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ...rest,
+    ref,
+    "data-slot": "badge",
+    className: cn(badgeRootVariants({ variant, color, className })),
+    children
+  }
+);
 var BadgeInner = ({
   ref,
   // root props
@@ -10277,18 +10286,20 @@ var AIGradientsSvg = () => /* @__PURE__ */ jsx("svg", { width: "0", height: "0",
 ] }) });
 
 // src/components/ThemeProvider/brandToCssVars.ts
-var brandToCssVars = (brand) => {
-  const vars = {
-    "--color-background": brand.colors.background,
-    "--color-foreground": brand.colors.foreground,
-    "--color-muted": brand.colors.muted,
-    "--color-muted-foreground": brand.colors.mutedForeground,
-    "--color-border": brand.colors.border,
-    "--color-primary": brand.colors.primary,
-    "--color-primary-foreground": brand.colors.primaryForeground,
-    "--color-destructive": brand.colors.destructive,
-    "--color-destructive-foreground": brand.colors.destructiveForeground
-  };
+var brandToCssVars = (brand, resolvedMode) => {
+  const vars = {};
+  const colors8 = resolvedMode === "dark" ? brand.colorsDark : brand.colors;
+  if (colors8) {
+    vars["--color-background"] = colors8.background;
+    vars["--color-foreground"] = colors8.foreground;
+    vars["--color-muted"] = colors8.muted;
+    vars["--color-muted-foreground"] = colors8.mutedForeground;
+    vars["--color-border"] = colors8.border;
+    vars["--color-primary"] = colors8.primary;
+    vars["--color-primary-foreground"] = colors8.primaryForeground;
+    vars["--color-destructive"] = colors8.destructive;
+    vars["--color-destructive-foreground"] = colors8.destructiveForeground;
+  }
   if (brand.radii) {
     vars["--radius-sm"] = brand.radii.sm;
     vars["--radius-md"] = brand.radii.md;
@@ -10296,12 +10307,50 @@ var brandToCssVars = (brand) => {
   }
   return vars;
 };
-var ThemeProvider = ({ brand = keboola, setBrand, children }) => {
+var DARK_QUERY = "(prefers-color-scheme: dark)";
+var systemMode = () => {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return "light";
+  return window.matchMedia(DARK_QUERY).matches ? "dark" : "light";
+};
+var ThemeProvider = ({
+  brand = keboola,
+  setBrand,
+  colorScheme = "light",
+  children
+}) => {
+  const parent = use(ThemeContext);
+  const isRoot = parent === null;
+  const [systemResolved, setSystemResolved] = useState(systemMode);
+  useEffect(() => {
+    if (!isRoot || colorScheme !== "system") return;
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const mql = window.matchMedia(DARK_QUERY);
+    const onChange = (event) => setSystemResolved(event.matches ? "dark" : "light");
+    setSystemResolved(mql.matches ? "dark" : "light");
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, [isRoot, colorScheme]);
+  const ownMode = colorScheme === "system" ? systemResolved : colorScheme;
+  const resolvedMode = isRoot ? ownMode : parent.resolvedMode;
+  useEffect(() => {
+    if (!isRoot || typeof document === "undefined") return;
+    const root = document.documentElement;
+    const previous = root.getAttribute("data-theme");
+    root.setAttribute("data-theme", resolvedMode);
+    return () => {
+      if (root.getAttribute("data-theme") !== resolvedMode) return;
+      if (previous === null) {
+        root.removeAttribute("data-theme");
+      } else {
+        root.setAttribute("data-theme", previous);
+      }
+    };
+  }, [isRoot, resolvedMode]);
   useEffect(() => {
     if (typeof document === "undefined") return;
     const root = document.documentElement;
     const previousBrand = root.getAttribute("data-brand");
-    const vars = brandToCssVars(brand);
+    const vars = brandToCssVars(brand, resolvedMode);
     const previousValues = {};
     for (const name of Object.keys(vars)) {
       previousValues[name] = root.style.getPropertyValue(name);
@@ -10327,8 +10376,8 @@ var ThemeProvider = ({ brand = keboola, setBrand, children }) => {
         }
       }
     };
-  }, [brand]);
-  return /* @__PURE__ */ jsxs(ThemeContext, { value: { brand, setBrand }, children: [
+  }, [brand, resolvedMode]);
+  return /* @__PURE__ */ jsxs(ThemeContext, { value: { brand, setBrand, colorScheme, resolvedMode }, children: [
     /* @__PURE__ */ jsx(AIGradientsSvg, {}),
     children
   ] });
@@ -10342,7 +10391,16 @@ var useTheme = () => {
   }
   return context;
 };
-var ThemeDecorator = ({ brand, children }) => /* @__PURE__ */ jsx(ThemeProvider, { brand, children });
+var useColorScheme = () => {
+  const context = use(ThemeContext);
+  if (context === null) {
+    throw new Error(
+      "useColorScheme must be used within a <ThemeProvider>. Wrap your app root with <ThemeProvider colorScheme={...}> from @keboola/design."
+    );
+  }
+  return { colorScheme: context.colorScheme, resolvedMode: context.resolvedMode };
+};
+var ThemeDecorator = ({ brand, colorScheme = "light", children }) => /* @__PURE__ */ jsx(ThemeProvider, { brand, colorScheme, children: /* @__PURE__ */ jsx("div", { className: "tw-bg-background tw-text-foreground", children }) });
 var themeToolbarBrands = [keboola, keboolaLegacy, exampleCustomer];
 var resolveStorybookBrand = (id) => {
   if (typeof id !== "string") return keboola;
@@ -10598,7 +10656,7 @@ var PageLayout = Object.assign(Root25, {
 // src/blocks/PageHeader/styles.ts
 var titleRowClass = "tw-flex tw-flex-wrap tw-items-center tw-gap-x-3 tw-gap-y-2";
 var titleClass = "tw-m-0 tw-text-3xl tw-font-semibold tw-leading-9 tw-text-foreground tw-break-words";
-var badgesClass = "tw-flex tw-flex-wrap tw-items-center tw-gap-2";
+var badgesClass = "tw-flex tw-flex-wrap tw-items-center tw-gap-2 [&_[data-slot=badge]]:tw-rounded-full [&_[data-slot=badge]]:tw-normal-case [&_[data-slot=badge]]:tw-tracking-normal [&_[data-slot=badge]]:tw-py-0";
 var descriptionClass = "tw-m-0 tw-max-w-[800px] tw-break-words tw-text-sm tw-leading-5 tw-text-muted-foreground";
 var PageHeaderDetail = ({
   ref,
@@ -16069,6 +16127,6 @@ var SqlEditor = ({
   );
 };
 
-export { Alert, AnswerSummary, AppShell, AutoSaveTextarea, Avatar, Badge, Breadcrumb, Button, ButtonGroup, ButtonInline, Calendar, Card, Checkbox, Clipboard, ClipboardButton, ClipboardInline, CodeEditor, Collapse, Collapsible, CollapsiblePanel, CollapsibleStepHeader, ColorInput, Combobox, Command, CommandGroup, CommandInput, CommandItem, CommandList, ConflictStatusIndicator, DateInput, DatePicker, DateRangeInput, DateRangePicker, DiffType, DiffView, DotsLoader, DropdownMenu, EmptyConfigurationActionCard, EmptySearchContent, EmptyState, ErrorState, FileUpload, FormGroup, FullScreenModal, FullScreenModalBody, FullScreenModalHeader, HelpBlock, HoverCard, InlineStepDetail, InlineStepLabel, InputGroup, InputOtp, Kbd, Label2 as Label, Link, MarkedText, MergeEditor, MessageBubble, Modal, MultiActionButtonGroup, MultiCombobox, Navbar, NumberInput, PageHeader, PageLayout, PageToolbar, Pagination, PaneHeader, PanelWithDetails, PasswordInput, PlanApproval, PlanRewritingIndicator, Popconfirm, Popover, Progress, PromptInput, Question, QuestionBlock, RadioGroup2 as RadioGroup, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Search, SearchForm, SearchInput, SearchInputWithNavigation, Select, Separator2 as Separator, Sheet, Sidebar, SidebarProvider, Skeleton, SkeletonList, Slider, SplitButton, SqlEditor, Stepper, SuggestedPrompt, Switch, Table, Tabs2 as Tabs, TabsContent, Tagger, TextInput, Textarea, ThemeDecorator, ThemeProvider, ThinkingIndicator, TimeInput, TimePicker, Timeline, Toaster, Toggle, ToggleGroup, Tooltip, TooltipProvider, Truncated, ZoomableSvg, argoVariants, cn, computeDiffRows, computeLineInformation, copyToClipboard, isMac, kbdVariants, keys, mergeRefs, resolveStorybookBrand, setServerFieldErrors, themeToolbarBrands, toast, useAppForm, useAutosizeInput, useInputOtpContext, useIsLegacyBrand, useMergeDiff, useNotification, useScrollbarPosition, useSidebar, useTheme, withForm };
+export { Alert, AnswerSummary, AppShell, AutoSaveTextarea, Avatar, Badge, Breadcrumb, Button, ButtonGroup, ButtonInline, Calendar, Card, Checkbox, Clipboard, ClipboardButton, ClipboardInline, CodeEditor, Collapse, Collapsible, CollapsiblePanel, CollapsibleStepHeader, ColorInput, Combobox, Command, CommandGroup, CommandInput, CommandItem, CommandList, ConflictStatusIndicator, DateInput, DatePicker, DateRangeInput, DateRangePicker, DiffType, DiffView, DotsLoader, DropdownMenu, EmptyConfigurationActionCard, EmptySearchContent, EmptyState, ErrorState, FileUpload, FormGroup, FullScreenModal, FullScreenModalBody, FullScreenModalHeader, HelpBlock, HoverCard, InlineStepDetail, InlineStepLabel, InputGroup, InputOtp, Kbd, Label2 as Label, Link, MarkedText, MergeEditor, MessageBubble, Modal, MultiActionButtonGroup, MultiCombobox, Navbar, NumberInput, PageHeader, PageLayout, PageToolbar, Pagination, PaneHeader, PanelWithDetails, PasswordInput, PlanApproval, PlanRewritingIndicator, Popconfirm, Popover, Progress, PromptInput, Question, QuestionBlock, RadioGroup2 as RadioGroup, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Search, SearchForm, SearchInput, SearchInputWithNavigation, Select, Separator2 as Separator, Sheet, Sidebar, SidebarProvider, Skeleton, SkeletonList, Slider, SplitButton, SqlEditor, Stepper, SuggestedPrompt, Switch, Table, Tabs2 as Tabs, TabsContent, Tagger, TextInput, Textarea, ThemeDecorator, ThemeProvider, ThinkingIndicator, TimeInput, TimePicker, Timeline, Toaster, Toggle, ToggleGroup, Tooltip, TooltipProvider, Truncated, ZoomableSvg, argoVariants, cn, computeDiffRows, computeLineInformation, copyToClipboard, isMac, kbdVariants, keys, mergeRefs, resolveStorybookBrand, setServerFieldErrors, themeToolbarBrands, toast, useAppForm, useAutosizeInput, useColorScheme, useInputOtpContext, useIsLegacyBrand, useMergeDiff, useNotification, useScrollbarPosition, useSidebar, useTheme, withForm };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map