@flikk/ui 1.0.0-beta.25 → 1.0.0-beta.26

package/dist/components/forms/RichTextEditor/RichTextEditor.theme.d.ts

@@ -1,8 +1,60 @@
 import { RichTextEditorTheme, ColorOption } from "./RichTextEditor.types";
 /**
- * Color options for text color picker
+ * Legacy 10-entry color list — kept for backwards compat with consumers that
+ * import `colorOptions` directly. The RichTextEditor's color picker now uses
+ * the full Tailwind spectrum below.
  */
 export declare const colorOptions: ColorOption[];
+/**
+ * Tailwind shade scale (same for every family). Used by both the picker
+ * UI and the `getTailwindShadeTokens` utility below.
+ */
+export declare const TAILWIND_SHADE_LABELS: readonly ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900", "950"];
+/**
+ * The 22 Tailwind color families, in spectrum order.
+ * Tailwind v4 exposes each shade as `--color-{family}-{shade}` automatically,
+ * so we render swatches via `var(--color-...)` instead of hardcoding hex.
+ */
+export declare const TAILWIND_COLOR_FAMILIES: readonly ["slate", "gray", "zinc", "neutral", "stone", "red", "orange", "amber", "yellow", "lime", "green", "emerald", "teal", "cyan", "sky", "blue", "indigo", "violet", "purple", "fuchsia", "pink", "rose"];
+/**
+ * Returns shade tokens for a given Tailwind family.
+ *
+ * @example
+ * getTailwindShadeTokens("slate")
+ * // → ["slate-50", "slate-100", "slate-200", ..., "slate-950"]
+ */
+export declare const getTailwindShadeTokens: (family: string) => string[];
+/**
+ * Resolves a Tailwind shade token to a CSS color value usable in inline
+ * styles for swatch backgrounds. Reads `--color-{token}` directly; modern
+ * browsers accept the resulting `oklch(...)` (or fallback `rgb()`) in
+ * `background-color` without normalization.
+ *
+ * SSR-safe: returns `var(--color-{token})` literal when document is absent.
+ */
+export declare const resolveTailwindColor: (token: string) => string;
+/**
+ * Tailwind v4 only emits `--color-{family}-{shade}` CSS vars for shades that
+ * appear as utility classes in source. Since the picker resolves them at
+ * runtime via `var(...)`, we need every shade present. This sentinel string
+ * lists `bg-{family}-{shade}` for the full 22×11 palette so Tailwind's
+ * content scanner emits all CSS variables. Not used at runtime.
+ */
+export declare const _TAILWIND_PALETTE_KEEPALIVE: string;
+/**
+ * The two non-family base colors users always reach for, shown in their own row
+ * above the spectrum.
+ *
+ * `value` is the resolved background color (used to paint the swatch);
+ * `token` is the Tailwind shade fragment used to build the `text-{token}`
+ * class applied to the editor content.
+ */
+export declare const MONO_COLORS: {
+    name: string;
+    value: string;
+    token: string;
+}[];
+export declare const _RTE_CLASSES_KEEPALIVE: string;
 /**
  * Rich Text Editor theme - extends common forms base theme for consistency
  */

package/dist/components/forms/RichTextEditor/RichTextEditor.theme.js

@@ -1,19 +1,87 @@
 import { formsBaseTheme } from '../forms.theme.js';
 
 /**
- * Color options for text color picker
+ * Tailwind shade scale (same for every family). Used by both the picker
+ * UI and the `getTailwindShadeTokens` utility below.
  */
-const colorOptions = [
-    { label: "Black", value: "#000000", className: "text-black" },
-    { label: "Gray", value: "#6B7280", className: "text-gray-500" },
-    { label: "Red", value: "#EF4444", className: "text-red-500" },
-    { label: "Orange", value: "#F97316", className: "text-orange-500" },
-    { label: "Yellow", value: "#EAB308", className: "text-yellow-500" },
-    { label: "Green", value: "#22C55E", className: "text-green-500" },
-    { label: "Blue", value: "#3B82F6", className: "text-blue-500" },
-    { label: "Indigo", value: "#6366F1", className: "text-indigo-500" },
-    { label: "Purple", value: "#A855F7", className: "text-purple-500" },
-    { label: "Pink", value: "#EC4899", className: "text-pink-500" },
+const TAILWIND_SHADE_LABELS = [
+    "50",
+    "100",
+    "200",
+    "300",
+    "400",
+    "500",
+    "600",
+    "700",
+    "800",
+    "900",
+    "950",
+];
+/**
+ * The 22 Tailwind color families, in spectrum order.
+ * Tailwind v4 exposes each shade as `--color-{family}-{shade}` automatically,
+ * so we render swatches via `var(--color-...)` instead of hardcoding hex.
+ */
+const TAILWIND_COLOR_FAMILIES = [
+    "slate",
+    "gray",
+    "zinc",
+    "neutral",
+    "stone",
+    "red",
+    "orange",
+    "amber",
+    "yellow",
+    "lime",
+    "green",
+    "emerald",
+    "teal",
+    "cyan",
+    "sky",
+    "blue",
+    "indigo",
+    "violet",
+    "purple",
+    "fuchsia",
+    "pink",
+    "rose",
+];
+/**
+ * Returns shade tokens for a given Tailwind family.
+ *
+ * @example
+ * getTailwindShadeTokens("slate")
+ * // → ["slate-50", "slate-100", "slate-200", ..., "slate-950"]
+ */
+const getTailwindShadeTokens = (family) => TAILWIND_SHADE_LABELS.map((shade) => `${family}-${shade}`);
+/**
+ * Resolves a Tailwind shade token to a CSS color value usable in inline
+ * styles for swatch backgrounds. Reads `--color-{token}` directly; modern
+ * browsers accept the resulting `oklch(...)` (or fallback `rgb()`) in
+ * `background-color` without normalization.
+ *
+ * SSR-safe: returns `var(--color-{token})` literal when document is absent.
+ */
+const resolveTailwindColor = (token) => {
+    const cssVar = `--color-${token}`;
+    if (typeof window === "undefined")
+        return `var(${cssVar})`;
+    const resolved = getComputedStyle(document.documentElement)
+        .getPropertyValue(cssVar)
+        .trim();
+    return resolved || `var(${cssVar})`;
+};
+/**
+ * The two non-family base colors users always reach for, shown in their own row
+ * above the spectrum.
+ *
+ * `value` is the resolved background color (used to paint the swatch);
+ * `token` is the Tailwind shade fragment used to build the `text-{token}`
+ * class applied to the editor content.
+ */
+const MONO_COLORS = [
+    { name: "white", value: "#ffffff", token: "white" },
+    { name: "black", value: "#000000", token: "black" },
 ];
 /**
  * Rich Text Editor theme - extends common forms base theme for consistency
@@ -25,20 +93,26 @@ const richTextEditorTheme = {
     containerStyle: `${formsBaseTheme.inputGroupBaseStyle} flex-col min-h-[120px] overflow-hidden`,
     // Editor content area - extends common control base style
     editorStyle: `${formsBaseTheme.controlBaseStyle} min-h-[100px] px-3 py-2 resize-none overflow-y-auto [&_p]:my-1 [&_p:first-child]:mt-0 [&_p:last-child]:mb-0 [&_strong]:font-semibold [&_em]:italic [&_u]:underline data-[state=disabled]:cursor-not-allowed empty:before:content-[attr(data-placeholder)] empty:before:text-[var(--color-text-placeholder)] empty:before:pointer-events-none`,
-    // Toolbar styling (RTE-specific)
-    toolbarStyle: "flex items-center gap-1 p-2 border-b border-[var(--color-border)] bg-white dark:bg-[var(--color-background-secondary)]",
-    // Toolbar button styling
-    toolbarButtonStyle: "inline-flex items-center justify-center size-8 rounded-[calc(var(--radius-base)*0.75)] text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-white active:bg-[var(--color-background-tertiary)] transition-colors duration-300 disabled:opacity-50 disabled:cursor-not-allowed data-[state=active]:bg-[var(--color-background-tertiary)] data-[state=active]:text-[var(--color-text-primary)] data-[state=active]:hover:bg-[var(--color-primary-50)] border border-transparent data-[pressed=true]:bg-[var(--color-primary-50)] data-[pressed=true]:text-[var(--color-primary-900)] data-[pressed=true]:shadow-inner data-[pressed=true]:border-[var(--color-primary-200)]",
-    // Dropdown styling (font size, color picker)
-    dropdownStyle: "fixed z-[1000] min-w-[120px] py-1 bg-white/90 backdrop-blur-md rounded-[var(--form-radius)] shadow-xl ring-1 ring-[var(--color-border)] focus:outline-none",
-    // Dropdown item styling
-    dropdownItemStyle: "block w-full px-3 py-2 text-left text-sm text-[var(--color-text-primary)] hover:bg-[var(--color-background-tertiary)] transition-colors duration-150 disabled:opacity-50 disabled:cursor-not-allowed",
+    // Toolbar styling (docked variant)
+    // `rounded-t-[var(--form-radius)]` matches the container's radius so the
+    // toolbar's own bg/backdrop-blur respects the top corners — prevents the
+    // 1px bleed past the parent's `overflow-hidden` clip in Safari/Chromium.
+    toolbarStyle: "flex items-center gap-1 p-1 rounded-t-[var(--form-radius)] border-b border-[var(--color-border)] dark:bg-[var(--color-background-secondary)]",
+    // Toolbar styling (floating variant — selection-anchored)
+    floatingToolbarStyle: "flex items-center gap-1 p-1 rounded-xl border border-[var(--color-border)] bg-white/90 backdrop-blur-sm shadow-real-xl overflow-hidden dark:bg-[var(--color-background-secondary)]/80",
+    // Toolbar button — single source of truth via data-[state=active]
+    // (aria-pressed remains as proper ARIA on toggle buttons, but styling is decoupled)
+    toolbarButtonStyle: "inline-flex items-center justify-center size-8 rounded-[calc(var(--radius-base)*0.85)] border border-transparent bg-transparent text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-background-secondary)] transition-colors duration-300 disabled:opacity-50 disabled:cursor-not-allowed data-[state=active]:bg-[var(--color-background-secondary)] data-[state=active]:text-[var(--color-text-primary)] data-[state=active]:border-[var(--color-border)] data-[state=active]:shadow-inner",
+    // Dropdown surface (visual only — positioning handled at use site via portal)
+    dropdownStyle: "min-w-[120px] max-h-[18rem] overflow-y-auto py-1 bg-white/90 backdrop-blur-md rounded-[var(--form-radius)] shadow-xl ring-1 ring-[var(--color-border)] focus:outline-none",
+    // Dropdown item — uses data-[active=true] for selected state
+    dropdownItemStyle: "block w-full px-3 py-2 text-left text-sm text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)] transition-colors duration-150 disabled:opacity-50 disabled:cursor-not-allowed data-[active=true]:bg-[var(--color-primary-50)] data-[active=true]:text-[var(--color-primary-900)]",
     // Separator between toolbar sections
     separatorStyle: "w-px h-6 bg-[var(--color-border)] mx-1",
-    // Color picker grid layout
-    colorPickerStyle: "flex flex-wrap gap-1 w-[152px]",
-    // Color swatch button
-    colorSwatchStyle: "size-6 rounded-[calc(var(--radius-base)*0.75)] cursor-pointer hover:scale-105 transition-transform focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] focus:ring-offset-1",
+    // Color picker layout — column of family rows, plus optional Recent + Mono rows
+    colorPickerStyle: "flex flex-col gap-1 p-2 w-fit",
+    // Color swatch button (original size + rounding)
+    colorSwatchStyle: "size-6 rounded-[calc(var(--radius-base)*0.75)] cursor-pointer hover:scale-105 transition-transform focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] focus:ring-offset-1 data-[active=true]:ring-2 data-[active=true]:ring-[var(--color-primary)] data-[active=true]:ring-offset-1 border border-[var(--color-border)]",
     // Size variants - use common form sizes for consistency
     sizes: {
         sm: `${formsBaseTheme.sizes.sm.text} min-h-[80px]`,
@@ -51,4 +125,4 @@ const richTextEditorTheme = {
     helperText: formsBaseTheme.helperText,
 };
 
-export { colorOptions, richTextEditorTheme };
+export { MONO_COLORS, TAILWIND_COLOR_FAMILIES, TAILWIND_SHADE_LABELS, getTailwindShadeTokens, resolveTailwindColor, richTextEditorTheme };

package/dist/components/forms/RichTextEditor/RichTextEditor.types.d.ts

@@ -48,6 +48,19 @@ export interface RichTextEditorProps extends Omit<React.HTMLAttributes<HTMLDivEl
     toolbar?: ToolbarConfig;
     /** Component-level theme overrides */
     theme?: RichTextEditorThemeOverrides;
+    /**
+     * Custom list of font families shown by the `fontFamily` toolbar tool.
+     * If omitted, ships with a curated default set (system Default + 8 Google Fonts).
+     * Provide your own list when you self-host fonts or want a custom curation.
+     */
+    fontFamilies?: FontFamilyOption[];
+    /**
+     * Whether the editor should lazy-load Google Fonts when picked.
+     * Defaults to `true`. Set to `false` if you load fonts yourself
+     * (e.g. via `next/font` or a `<link>` in your app head) — the picker still
+     * applies the font, but no network request is fired.
+     */
+    loadFontsOnDemand?: boolean;
     /**
      * Optional HTML sanitizer function applied before setting innerHTML.
      * Receives raw HTML string, must return sanitized HTML string.
@@ -78,8 +91,27 @@ export interface ToolbarConfig {
 /**
  * Available toolbar tools
  */
-export type ToolbarTool = 'bold' | 'italic' | 'underline' | 'fontSize' | 'textColor' | 'alignLeft' | 'alignCenter' | 'alignRight' | 'undo' | 'redo' | 'separator';
-export type RichTextFontSizeKey = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+export type ToolbarTool = 'bold' | 'italic' | 'underline' | 'fontWeight' | 'fontFamily' | 'fontSize' | 'lineHeight' | 'letterSpacing' | 'textColor' | 'alignLeft' | 'alignCenter' | 'alignRight' | 'undo' | 'redo' | 'separator';
+/**
+ * Font family option used by the RichTextEditor font picker.
+ * - `key` is the stable identifier matched against the current selection.
+ * - `family` is the canonical Google Fonts family name (used to build the load URL).
+ *   Omit for system fonts (e.g. "Default" or "Sans") — they will not be lazy-loaded.
+ * - `stack` is the CSS font-family value applied to the selection. Always include
+ *   safe fallbacks so text remains readable while the font is loading.
+ * - `weights` is the optional list of weights to request (defaults to all 9).
+ */
+export interface FontFamilyOption {
+    key: string;
+    label: string;
+    stack: string;
+    family?: string;
+    weights?: number[];
+}
+export type RichTextFontSizeKey = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl';
+export type RichTextFontWeightKey = 'thin' | 'extralight' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black';
+export type RichTextLineHeightKey = 'tight' | 'snug' | 'normal' | 'relaxed' | 'loose';
+export type RichTextLetterSpacingKey = 'tighter' | 'tight' | 'normal' | 'wide' | 'wider' | 'widest';
 /**
  * Text formatting state
  */
@@ -89,6 +121,10 @@ export interface FormattingState {
     underline: boolean;
     textAlign: 'left' | 'center' | 'right' | 'justify';
     fontSize: RichTextFontSizeKey;
+    fontWeight: RichTextFontWeightKey;
+    fontFamily: string;
+    lineHeight: RichTextLineHeightKey;
+    letterSpacing: RichTextLetterSpacingKey;
     textColor: string;
 }
 /**
@@ -109,8 +145,10 @@ export interface RichTextEditorThemeOverrides {
     containerStyle?: string;
     /** ContentEditable element style */
     editorStyle?: string;
-    /** Toolbar container style */
+    /** Toolbar container style (docked variant) */
     toolbarStyle?: string;
+    /** Floating toolbar container style (selection-anchored variant) */
+    floatingToolbarStyle?: string;
     /** Toolbar button style */
     toolbarButtonStyle?: string;
     /** Size variants */
@@ -132,6 +170,7 @@ export interface RichTextEditorTheme {
     containerStyle: string;
     editorStyle: string;
     toolbarStyle: string;
+    floatingToolbarStyle: string;
     toolbarButtonStyle: string;
     dropdownStyle: string;
     dropdownItemStyle: string;

package/dist/components/forms/RichTextEditor/index.d.ts

@@ -1,3 +1,3 @@
-export { RichTextEditor } from './RichTextEditor';
-export type { RichTextEditorProps, RichTextEditorSize, RichTextEditorState, ToolbarConfig, ToolbarTool, FormattingState, ColorOption, RichTextEditorTheme, RichTextEditorThemeOverrides, } from './RichTextEditor.types';
+export { RichTextEditor, DEFAULT_FONT_FAMILY_OPTIONS, loadGoogleFont, } from './RichTextEditor';
+export type { RichTextEditorProps, RichTextEditorSize, RichTextEditorState, ToolbarConfig, ToolbarTool, FormattingState, FontFamilyOption, ColorOption, RichTextEditorTheme, RichTextEditorThemeOverrides, } from './RichTextEditor.types';
 export { richTextEditorTheme, colorOptions } from './RichTextEditor.theme';

package/dist/components/forms/Select/Select.js

@@ -96,7 +96,7 @@ const SelectButton = ({ id, disabled, isOpen, state = "default", size = "md", ic
     // Use either the themed focus state or directly apply the focus classes if the theme is not working
     const activeFocusState = isOpen
         ? focusStateStyle ||
-            "outline-2 outline-[var(--color-primary)] -outline-offset-1 ring-4 ring-[var(--color-primary)]/10"
+            "shadow-[inset_0_0_0_2px_var(--color-primary)] ring-4 ring-[var(--color-primary)]/10"
         : "";
     return (jsxs("div", { className: cn(buttonWrapperStyle, "flex items-stretch"), children: [contentStart && (jsx("div", { "data-slot": "content-start", className: cn(contentSlotStyle, "pr-0 border-r border-[var(--color-border)]"), children: contentStart })), jsxs("button", { ref: buttonRef, id: id, type: "button", className: cn(baseStyle, sizeStyle, stateStyle, hoverStateStyle, activeFocusState, iconStartPadding, iconEndPadding, buttonStyle, "flex-1 min-w-0", className), onClick: onClick, onFocus: onFocus, onBlur: onBlur, disabled: disabled, "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-controls": isOpen && id ? `${id}-listbox` : undefined, "aria-labelledby": ariaLabelledby, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, children: [iconStart && jsx("span", { className: iconStartStyle, children: iconStart }), children, iconEnd && jsx("span", { className: iconEndStyle, children: iconEnd })] }), contentEnd && (jsx("div", { "data-slot": "content-end", className: cn(contentSlotStyle, "pl-0 border-l border-[var(--color-border)]"), children: contentEnd }))] }));
 };

package/dist/components/forms/Slider/Slider.theme.js

@@ -10,7 +10,7 @@ const sliderTheme = {
     // Root container with layout
     rootStyle: "relative flex items-center w-full touch-none select-none data-[orientation=vertical]:flex-col data-[orientation=vertical]:h-full",
     // Track (background)
-    trackStyle: "relative w-full h-2 grow rounded-full bg-[var(--color-background-tertiary)] overflow-hidden data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[orientation=vertical]:w-2 data-[orientation=vertical]:h-full shadow-inner",
+    trackStyle: "relative w-full h-2 grow rounded-full bg-[var(--color-surface-sunken)] overflow-hidden data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[orientation=vertical]:w-2 data-[orientation=vertical]:h-full shadow-inner",
     // Range (filled portion) - rounded to match track clipping
     rangeStyle: "absolute h-full bg-gradient-to-r from-[var(--color-primary-500)] to-[var(--color-primary-700)] transition-all rounded-full data-[disabled]:bg-[var(--color-background-disabled)] data-[invalid]:bg-[var(--color-danger)]",
     // Thumb (draggable handle)

package/dist/components/forms/Switch/Switch.theme.js

@@ -3,7 +3,7 @@
  */
 const switchTheme = {
     container: "flex w-full justify-between items-center gap-4",
-    track: "rounded-full cursor-pointer shadow-inner bg-[var(--color-background-tertiary)] data-[state=checked]:bg-[var(--color-primary)] data-[state=disabled]:bg-[var(--color-background-disabled)] data-[state=disabled]:cursor-not-allowed data-[state=invalid]:border-2 data-[state=invalid]:border-[var(--color-danger)] outline outline-[var(--color-border)] transition-colors duration-300",
+    track: "rounded-full cursor-pointer shadow-inner bg-[var(--color-surface-sunken)] data-[state=checked]:bg-[var(--color-primary)] data-[state=disabled]:bg-[var(--color-background-disabled)] data-[state=disabled]:cursor-not-allowed data-[state=invalid]:border-2 data-[state=invalid]:border-[var(--color-danger)] outline outline-[var(--color-border)] transition-colors duration-300",
     thumb: "rounded-full bg-transparent overflow-hidden border border-[var(--color-border)]/40 shadow-lg",
     description: "text-sm text-[var(--color-text-muted)] -mt-1.5",
     trackSizes: {

package/dist/components/forms/TimePicker/TimePicker.theme.js

@@ -78,8 +78,8 @@ const timePickerTheme = {
         "dark:text-[var(--color-neutral-200)] dark:placeholder:text-[var(--color-neutral-500)]",
     // AM/PM period toggle button
     periodToggleStyle: "px-1.5 py-0.5 text-xs font-semibold rounded " +
-        "bg-[var(--color-background-tertiary)] text-[var(--color-text-primary)] " +
-        "hover:bg-[var(--color-background-quaternary)] transition-colors cursor-pointer select-none " +
+        "bg-[var(--color-surface-sunken)] text-[var(--color-text-primary)] " +
+        "hover:bg-[var(--color-surface-hover)] transition-colors cursor-pointer select-none " +
         "dark:bg-[var(--color-neutral-700)] dark:text-[var(--color-neutral-200)] " +
         "dark:hover:bg-[var(--color-neutral-600)]",
 };

package/dist/components/forms/TimePicker/TimePickerContent.js

@@ -92,6 +92,7 @@ import '../../core/ContextMenu/ContextMenu.js';
 import '../../core/ContextMenu/ContextMenu.theme.js';
 import '../../core/Pill/Pill.js';
 import '../../core/Icon/Icon.js';
+import '../../core/ImagePlaceholder/ImagePlaceholder.js';
 import { useIsClient } from '../../../hooks/useIsClient.js';
 import { useDarkMode } from '../../../hooks/useDarkMode.js';
 

package/dist/components/forms/TimePicker/TimePickerTrigger.js

@@ -25,7 +25,7 @@ const TimePickerTrigger = ({ id, disabled, isOpen, state = 'default', size = 'md
     const periodToggleStyle = theme.periodToggleStyle || "";
     // Apply focused styles when open — same pattern as SelectButton and DatePickerTrigger
     const activeFocusState = isOpen
-        ? ((_d = theme.triggerFocusStates) === null || _d === void 0 ? void 0 : _d[state]) || "outline-2 outline-[var(--color-primary-600)] -outline-offset-1 ring-4 ring-[var(--color-primary)]/10 dark:outline-[var(--color-primary-500)] dark:ring-[var(--color-primary-500)]/20"
+        ? ((_d = theme.triggerFocusStates) === null || _d === void 0 ? void 0 : _d[state]) || "shadow-[inset_0_0_0_2px_var(--color-primary-600)] ring-4 ring-[var(--color-primary)]/10 dark:shadow-[inset_0_0_0_2px_var(--color-primary-500)] dark:ring-[var(--color-primary-500)]/20"
         : "";
     // Determine whether start icon is present (for input padding)
     const hasStartIcon = iconStart !== undefined ? Boolean(iconStart) : true;

package/dist/components/forms/forms.theme.js

@@ -8,12 +8,12 @@ const formsBaseTheme = {
     // Common wrapper style
     wrapperStyle: "relative w-full",
     // Common input group style with focus, hover, and state variations
-    inputGroupBaseStyle: "relative flex rounded-[var(--form-radius)] outline outline-1 outline-[var(--color-border)] " +
-        "focus-within:outline-2 focus-within:outline-[var(--color-primary-600)] focus-within:-outline-offset-1 " +
+    inputGroupBaseStyle: "relative flex rounded-[var(--form-radius)] outline-none shadow-[inset_0_0_0_1px_var(--color-border)] " +
+        "focus-within:shadow-[inset_0_0_0_2px_var(--color-primary-600)] " +
         "focus-within:ring-4 focus-within:ring-[var(--color-primary)]/10 bg-white transition-all " +
         // Dark mode
-        "dark:bg-[var(--color-neutral-900)] dark:outline-[var(--color-neutral-700)] " +
-        "dark:focus-within:outline-[var(--color-primary-500)] dark:focus-within:ring-[var(--color-primary-500)]/20",
+        "dark:bg-[var(--color-neutral-900)] dark:shadow-[inset_0_0_0_1px_var(--color-neutral-700)] " +
+        "dark:focus-within:shadow-[inset_0_0_0_2px_var(--color-primary-500)] dark:focus-within:ring-[var(--color-primary-500)]/20",
     // Common base input/control style
     controlBaseStyle: "w-full bg-transparent text-sm text-[var(--color-text-primary)] " +
         "placeholder:text-[var(--color-text-placeholder)] focus:outline-none " +
@@ -44,7 +44,7 @@ const formsBaseTheme = {
     // Common state variants
     states: {
         default: "",
-        disabled: "cursor-not-allowed bg-[var(--color-background-disabled)] outline-[var(--color-border)] " +
+        disabled: "cursor-not-allowed bg-[var(--color-background-disabled)] shadow-[inset_0_0_0_1px_var(--color-border)] " +
             "[&_input]:text-[var(--color-text-disabled)] [&_textarea]:text-[var(--color-text-disabled)] " +
             "[&_select]:text-[var(--color-text-disabled)] [&_input]:cursor-not-allowed " +
             "[&_textarea]:cursor-not-allowed [&_select]:cursor-not-allowed " +
@@ -52,17 +52,17 @@ const formsBaseTheme = {
             "[&_textarea]:placeholder:text-[var(--color-text-placeholder)] " +
             "[&_select]:placeholder:text-[var(--color-text-placeholder)] [&_button]:cursor-not-allowed " +
             // Dark mode
-            "dark:bg-[var(--color-neutral-800)] dark:outline-[var(--color-neutral-700)]",
-        invalid: "outline-[var(--color-danger)] bg-[var(--color-danger-50)] focus-within:outline-[var(--color-danger)] " +
+            "dark:bg-[var(--color-neutral-800)] dark:shadow-[inset_0_0_0_1px_var(--color-neutral-700)]",
+        invalid: "shadow-[inset_0_0_0_1px_var(--color-danger)] bg-[var(--color-danger-50)] focus-within:shadow-[inset_0_0_0_2px_var(--color-danger)] " +
             // Dark mode
-            "dark:bg-[var(--color-danger-950)]/30 dark:outline-[var(--color-danger-500)]",
+            "dark:bg-[var(--color-danger-950)]/30 dark:shadow-[inset_0_0_0_1px_var(--color-danger-500)]",
     },
     // Common focus state variants
     focusStates: {
-        default: "outline-2 outline-[var(--color-primary-600)] -outline-offset-1 ring-4 ring-[var(--color-primary)]/10 " +
-            "dark:outline-[var(--color-primary-500)] dark:ring-[var(--color-primary-500)]/20",
-        disabled: "outline-none",
-        invalid: "outline-2 outline-[var(--color-danger-500)] -outline-offset-1 ring-4 ring-[var(--color-danger-500)]/10 " +
+        default: "shadow-[inset_0_0_0_2px_var(--color-primary-600)] ring-4 ring-[var(--color-primary)]/10 " +
+            "dark:shadow-[inset_0_0_0_2px_var(--color-primary-500)] dark:ring-[var(--color-primary-500)]/20",
+        disabled: "shadow-none",
+        invalid: "shadow-[inset_0_0_0_2px_var(--color-danger-500)] ring-4 ring-[var(--color-danger-500)]/10 " +
             "dark:ring-[var(--color-danger-500)]/20",
     },
     // Common hover state variants

package/dist/components/forms/index.js

@@ -114,6 +114,7 @@ import '../core/ContextMenu/ContextMenu.js';
 import '../core/ContextMenu/ContextMenu.theme.js';
 import '../core/Pill/Pill.js';
 import '../core/Icon/Icon.js';
+import '../core/ImagePlaceholder/ImagePlaceholder.js';
 import './TimePicker/WheelColumn.js';
 export { timePickerTheme } from './TimePicker/TimePicker.theme.js';
 export { Slider } from './Slider/Slider.js';

package/dist/components/layout/FormLayout/FormLayout.js

@@ -77,7 +77,6 @@ import '../../core/Sidebar/SidebarContent.js';
 import '../../core/Sidebar/SidebarFooter.js';
 import '../../core/Sidebar/SidebarNav.js';
 import '../../core/Sidebar/SidebarNavGroup.js';
-import 'motion/react';
 import '../../core/Sidebar/SidebarToggle.js';
 import '../../core/Sidebar/SidebarMobileTrigger.js';
 import '../../core/Sidebar/SidebarUserProfile.js';
@@ -88,6 +87,7 @@ import '../../core/ContextMenu/ContextMenu.js';
 import '../../core/ContextMenu/ContextMenu.theme.js';
 import '../../core/Pill/Pill.js';
 import '../../core/Icon/Icon.js';
+import '../../core/ImagePlaceholder/ImagePlaceholder.js';
 import { formLayoutTheme } from './FormLayout.theme.js';
 import { FormLayoutSection } from './FormLayoutSection.js';
 import { FormLayoutFooter } from './FormLayoutFooter.js';
@@ -95,13 +95,15 @@ import { FormLayoutFooter } from './FormLayoutFooter.js';
 const isFooter = (child) => React__default.isValidElement(child) && child.type === FormLayoutFooter;
 const FormLayoutRoot = React__default.forwardRef(({ className, theme: customTheme, children, ...props }, ref) => {
     const theme = { ...formLayoutTheme, ...customTheme };
-    // Inject <Separator /> between any adjacent children, unless one of them is Footer
-    // (Footer already has border-t, so no separator needed before it)
+    // Inject <Separator /> between any adjacent children, unless one of them is Footer.
     const childArray = React__default.Children.toArray(children).filter(Boolean);
     const rendered = childArray.map((child, index) => {
         const prev = childArray[index - 1];
         const needsSeparator = index > 0 && !isFooter(child) && !isFooter(prev);
-        return (jsxs(React__default.Fragment, { children: [needsSeparator && jsx(Separator, {}), child] }, index));
+        const childKey = React__default.isValidElement(child) && child.key != null
+            ? child.key
+            : `form-layout-child-${index}`;
+        return (jsxs(React__default.Fragment, { children: [needsSeparator && jsx(Separator, {}), child] }, childKey));
     });
     return (jsx("div", { ref: ref, className: cn(theme.root, className), ...props, children: rendered }));
 });

package/dist/components/layout/FormLayout/FormLayout.types.d.ts

@@ -25,11 +25,11 @@ export interface FormLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Theme overrides for the root container. */
     theme?: FormLayoutThemeOverrides;
 }
-export interface FormLayoutSectionProps extends React.HTMLAttributes<HTMLElement> {
+export interface FormLayoutSectionProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
     /** Optional section title. If omitted along with subtitle and action, the sidebar column is hidden. */
-    title?: string;
+    title?: React.ReactNode;
     /** Optional subtitle displayed below the title. */
-    subtitle?: string;
+    subtitle?: React.ReactNode;
     /** Optional action element rendered below the subtitle. */
     action?: React.ReactNode;
     /** Additional className applied to the content area. */

package/dist/components/layout/FormLayout/FormLayoutSection.js

@@ -4,9 +4,14 @@ import { cn } from '../../../utils/cn.js';
 import { formLayoutTheme } from './FormLayout.theme.js';
 
 const FormLayoutSection = React__default.forwardRef(({ title, subtitle, action, className, contentClassName, theme: customTheme, children, ...props }, ref) => {
+    var _a;
     const theme = { ...formLayoutTheme, ...customTheme };
     const hasSidebar = !!(title || subtitle || action);
-    return (jsxs("section", { ref: ref, className: cn(theme.section, className), ...props, children: [hasSidebar && (jsxs("div", { className: theme.sectionSidebar, children: [title && jsx("div", { className: theme.sectionTitle, children: title }), subtitle && (jsx("div", { className: theme.sectionSubtitle, children: subtitle })), action && jsx("div", { className: theme.sectionAction, children: action })] })), jsx("div", { className: cn(hasSidebar ? theme.sectionContent : theme.sectionContentFull, contentClassName), children: children })] }));
+    const generatedTitleId = React__default.useId();
+    const titleId = title
+        ? (_a = props["aria-labelledby"]) !== null && _a !== void 0 ? _a : generatedTitleId
+        : props["aria-labelledby"];
+    return (jsxs("section", { ref: ref, className: cn(theme.section, className), "aria-labelledby": titleId, ...props, children: [hasSidebar && (jsxs("div", { className: theme.sectionSidebar, children: [title && (jsx("h2", { id: titleId, className: theme.sectionTitle, children: title })), subtitle && (jsx("div", { className: theme.sectionSubtitle, children: subtitle })), action && jsx("div", { className: theme.sectionAction, children: action })] })), jsx("div", { className: cn(hasSidebar ? theme.sectionContent : theme.sectionContentFull, contentClassName), children: children })] }));
 });
 FormLayoutSection.displayName = "FormLayout.Section";
 

package/dist/components/layout/PageLayout/PageLayout.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
-import type { PageLayoutProps } from "./PageLayout.types";
+import type { PageLayoutContentProps, PageLayoutProps } from "./PageLayout.types";
 export declare const PageLayout: React.ForwardRefExoticComponent<PageLayoutProps & React.RefAttributes<HTMLDivElement>> & {
     Sidebar: React.ForwardRefExoticComponent<import("./PageLayout.types").PageLayoutSidebarProps & React.RefAttributes<HTMLElement>>;
     Header: React.ForwardRefExoticComponent<import("./PageLayout.types").PageLayoutHeaderProps & React.RefAttributes<HTMLElement>>;
-    Content: React.ForwardRefExoticComponent<import("./PageLayout.types").PageLayoutContentProps & React.RefAttributes<HTMLElement>>;
+    Content: React.ForwardRefExoticComponent<PageLayoutContentProps & React.RefAttributes<HTMLElement>>;
 };

package/dist/components/layout/PageLayout/PageLayout.js

@@ -1,13 +1,13 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
-import { pageLayoutTheme } from './PageLayout.theme.js';
+import { getPageLayoutTheme } from './PageLayout.theme.js';
 import { PageLayoutSidebar } from './PageLayoutSidebar.js';
 import { PageLayoutHeader } from './PageLayoutHeader.js';
 import { PageLayoutContent } from './PageLayoutContent.js';
 
-const PageLayoutRoot = React__default.forwardRef(({ className, theme: customTheme, children, ...props }, ref) => {
-    const theme = { ...pageLayoutTheme, ...customTheme };
+const PageLayoutRoot = React__default.forwardRef(({ className, theme: customTheme, variant = "auto", contentWidth = "full", contentPadding = "md", children, ...props }, ref) => {
+    const theme = getPageLayoutTheme(customTheme);
     // Separate Sidebar children from the rest (Header, Content)
     // so we can wrap non-sidebar children in a vertical main column.
     const childArray = React__default.Children.toArray(children);
@@ -21,7 +21,25 @@ const PageLayoutRoot = React__default.forwardRef(({ className, theme: customThem
             main.push(child);
         }
     });
-    return (jsxs("div", { ref: ref, className: cn(theme.root, className), ...props, children: [sidebar, jsx("div", { className: cn(theme.main), children: main })] }));
+    const resolvedVariant = variant === "auto"
+        ? sidebar.length > 0
+            ? "sidebar"
+            : "topbar"
+        : variant;
+    const mainChildren = main.map((child) => {
+        var _a, _b;
+        if (React__default.isValidElement(child) &&
+            child.type === PageLayoutContent) {
+            return React__default.cloneElement(child, {
+                contentWidth: (_a = child.props.contentWidth) !== null && _a !== void 0 ? _a : contentWidth,
+                contentPadding: (_b = child.props.contentPadding) !== null && _b !== void 0 ? _b : contentPadding,
+            });
+        }
+        return child;
+    });
+    return (jsx("div", { ref: ref, className: cn(theme.root, className), ...props, children: jsxs("div", { className: cn(theme.shell, resolvedVariant === "sidebar"
+                ? theme.sidebarLayout
+                : theme.topbarLayout), children: [resolvedVariant === "sidebar" && sidebar, jsx("div", { className: cn(theme.main), children: mainChildren })] }) }));
 });
 PageLayoutRoot.displayName = "PageLayout";
 const PageLayout = Object.assign(PageLayoutRoot, {

package/dist/components/layout/PageLayout/PageLayout.theme.d.ts

@@ -1,2 +1,3 @@
-import type { PageLayoutTheme } from "./PageLayout.types";
+import type { PageLayoutTheme, PageLayoutThemeOverrides } from "./PageLayout.types";
 export declare const pageLayoutTheme: PageLayoutTheme;
+export declare const getPageLayoutTheme: (customTheme?: PageLayoutThemeOverrides) => PageLayoutTheme;

package/dist/components/layout/PageLayout/PageLayout.theme.js

@@ -1,10 +1,39 @@
 const pageLayoutTheme = {
-    root: "flex h-screen overflow-hidden bg-[var(--color-background)]",
-    sidebar: "flex flex-col shrink-0 border-r border-[var(--color-border)] bg-[var(--color-background-secondary)] overflow-y-auto",
+    root: "min-h-screen overflow-hidden bg-white text-[var(--color-text-primary)]",
+    shell: "h-full min-h-[inherit] min-w-0",
+    sidebarLayout: "flex",
+    topbarLayout: "flex flex-col",
+    sidebar: "flex flex-col shrink-0 overflow-hidden border-r border-[var(--color-border)] bg-[var(--color-background)]/95 backdrop-blur supports-[backdrop-filter]:bg-[var(--color-background)]/85",
+    sidebarScroll: "min-h-0 flex-1",
     sidebarCollapsed: "hidden lg:flex",
-    main: "flex flex-col flex-1 min-w-0 overflow-hidden",
-    header: "shrink-0 border-b border-[var(--color-border)] bg-[var(--color-background)]",
-    content: "flex-1 overflow-y-auto",
+    main: "flex flex-col flex-1 min-h-0 min-w-0 overflow-hidden",
+    header: "shrink-0 border-b border-[var(--color-border)] bg-[var(--color-background)]/90 backdrop-blur supports-[backdrop-filter]:bg-[var(--color-background)]/75",
+    content: "flex flex-1 min-h-0 min-w-0",
+    contentScroll: "min-h-0 flex-1",
+    contentInner: "mx-auto w-full",
+    contentPadding: {
+        none: "p-0",
+        sm: "p-3 sm:p-4",
+        md: "p-4 sm:p-6 lg:p-8",
+        lg: "p-5 sm:p-8 lg:p-10",
+    },
+    contentWidth: {
+        full: "max-w-none",
+        wide: "max-w-7xl",
+        contained: "max-w-5xl",
+    },
 };
+const getPageLayoutTheme = (customTheme) => ({
+    ...pageLayoutTheme,
+    ...customTheme,
+    contentPadding: {
+        ...pageLayoutTheme.contentPadding,
+        ...customTheme === null || customTheme === void 0 ? void 0 : customTheme.contentPadding,
+    },
+    contentWidth: {
+        ...pageLayoutTheme.contentWidth,
+        ...customTheme === null || customTheme === void 0 ? void 0 : customTheme.contentWidth,
+    },
+});
 
-export { pageLayoutTheme };
+export { getPageLayoutTheme, pageLayoutTheme };