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

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 m-0.5 gap-0.5 p-0.5 rounded-[var(--form-radius)] dark:bg-[var(--color-surface)]/0",
+    // Toolbar styling (floating variant — selection-anchored)
+    floatingToolbarStyle: "flex items-center gap-1 p-1 rounded-xl border border-[var(--color-border)] bg-[var(--color-surface-overlay)]/70 backdrop-blur-sm shadow-real-xl overflow-hidden",
+    // 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 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-[var(--color-surface-overlay)]/70 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)] data-[active=true]:dark:bg-[var(--color-primary-400)]/10 data-[active=true]:dark:text-[var(--color-primary-400)]",
     // 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_1px_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 }))] }));
 };
@@ -287,7 +287,7 @@ const SelectOptions = ({ isOpen, maxHeight = "15rem", className = "", onClose, c
                         } }) })), children] })) }));
     // Use portal if enabled and client-side - wrap with dark class for dark mode support
     if (portal && isClient) {
-        return createPortal(jsx("div", { className: isDarkMode ? "dark" : undefined, children: optionsContent }), document.body);
+        return createPortal(jsx("div", { "data-flikkui-portal": "", className: isDarkMode ? "dark" : undefined, children: optionsContent }), document.body);
     }
     return optionsContent;
 };

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

@@ -11,12 +11,12 @@ const selectTheme = {
     baseStyle: formsBaseTheme.inputGroupBaseStyle + " items-center justify-between",
     // Button wrapper style
     buttonWrapperStyle: "relative w-full",
-    // Button style - bg-white for light mode only; dark mode bg comes from baseStyle (inputGroupBaseStyle)
-    buttonStyle: "w-full cursor-pointer bg-white dark:bg-[var(--color-neutral-900)]",
+    // Button style - surface flips automatically between light/dark
+    buttonStyle: "w-full cursor-pointer bg-[var(--color-surface)]",
     // Placeholder text style - matches Input placeholder styling
     placeholderTextStyle: formsBaseTheme.placeholderStyle,
     // Selected value text style
-    valueTextStyle: "text-[var(--color-text-primary)] dark:text-[var(--color-neutral-200)]",
+    valueTextStyle: "text-[var(--color-text-primary)]",
     // Size variants - composed from atomic tokens
     sizes: {
         sm: `${formsBaseTheme.sizes.sm.text} ${formsBaseTheme.sizes.sm.padding} ${formsBaseTheme.sizes.sm.height}`,

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

@@ -35,6 +35,7 @@ import '../../core/Dropdown/DropdownItem.js';
 import '../../core/Dropdown/DropdownSection.js';
 import '../../core/Dropdown/DropdownSeparator.js';
 import '../../core/Dropdown/Dropdown.theme.js';
+import '../../core/DotSeparator/DotSeparator.js';
 import '../../core/Kbd/Kbd.js';
 import '../../core/MenuItem/MenuItem.js';
 import '../../core/Link/Link.js';
@@ -86,12 +87,15 @@ import '../../core/Sidebar/SidebarToggle.js';
 import '../../core/Sidebar/SidebarMobileTrigger.js';
 import '../../core/Sidebar/SidebarUserProfile.js';
 import '../../core/Sidebar/SidebarLogo.js';
+import '../../core/Sidebar/SidebarSearch.js';
+import '../../core/Sidebar/SidebarCard.js';
 import '../../core/Sidebar/SidebarContext.js';
 import '../../core/OfflineIndicator/OfflineIndicator.js';
 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_1px_var(--color-primary-600)] ring-4 ring-[var(--color-primary)]/10 dark:shadow-[inset_0_0_0_1px_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,14 @@ 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 " +
-        "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",
+    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_1px_var(--color-primary-600)] " +
+        "focus-within:ring-4 focus-within:ring-[var(--color-primary)]/10 bg-[var(--color-surface)] transition-all " +
+        // Hover edge: strengthen the border to --color-border-secondary on hover. Scoped with
+        // not-focus-within so focus (primary border) always wins; the token flips for dark mode.
+        "not-focus-within:hover:shadow-[inset_0_0_0_1px_var(--color-border-secondary)] " +
+        // Dark focus mirror (fill comes from --color-surface, which flips automatically)
+        "dark:focus-within:shadow-[inset_0_0_0_1px_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,25 +46,29 @@ 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)] " +
+            // Suppress the hover-edge change while disabled (keep the resting border)
+            "not-focus-within:hover: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 " +
             "[&_input]:placeholder:text-[var(--color-text-placeholder)] " +
             "[&_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)] " +
+            "[&_select]:placeholder:text-[var(--color-text-placeholder)] [&_button]:cursor-not-allowed",
+        // (--color-background-disabled already flips for dark mode)
+        invalid: "shadow-[inset_0_0_0_1px_var(--color-danger)] bg-[var(--color-danger-50)] focus-within:shadow-[inset_0_0_0_1px_var(--color-danger)] " +
+            // Keep the danger border on hover (don't let the hover edge override it)
+            "not-focus-within:hover:shadow-[inset_0_0_0_1px_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)] " +
+            "dark:not-focus-within:hover: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_1px_var(--color-primary-600)] ring-4 ring-[var(--color-primary)]/10 " +
+            "dark:shadow-[inset_0_0_0_1px_var(--color-primary-500)] dark:ring-[var(--color-primary-500)]/20",
+        disabled: "shadow-none",
+        invalid: "shadow-[inset_0_0_0_1px_var(--color-danger-500)] ring-4 ring-[var(--color-danger-500)]/10 " +
             "dark:ring-[var(--color-danger-500)]/20",
     },
     // Common hover state variants
@@ -89,9 +95,8 @@ const formsBaseTheme = {
     dropdownStyles: {
         // Container for dropdown panel
         container: "fixed z-[1000] max-h-[var(--select-content-available-height,20rem)] overflow-auto overscroll-contain " +
-            "rounded-[var(--form-radius)] bg-white/90 backdrop-blur-md text-sm border border-[var(--color-border)] " +
-            "shadow-real-lg ring-1 ring-[var(--color-border)] focus:outline-none " +
-            "dark:bg-[var(--color-neutral-900)]/90 dark:ring-[var(--color-neutral-700)]",
+            "rounded-[var(--form-radius)] bg-[var(--color-surface-overlay)]/90 backdrop-blur-md text-sm border border-[var(--color-border)] " +
+            "shadow-real-lg ring-1 ring-[var(--color-border)] focus:outline-none",
         // Base option style
         option: "relative cursor-pointer select-none py-2 px-3 text-[var(--color-text-primary)] " +
             "hover:text-[var(--color-primary)] hover:bg-[var(--color-primary-50)]/50 " +

package/dist/components/forms/index.js

@@ -58,6 +58,7 @@ import '../core/Dropdown/DropdownItem.js';
 import '../core/Dropdown/DropdownSection.js';
 import '../core/Dropdown/DropdownSeparator.js';
 import '../core/Dropdown/Dropdown.theme.js';
+import '../core/DotSeparator/DotSeparator.js';
 import '../core/Kbd/Kbd.js';
 import '../core/MenuItem/MenuItem.js';
 import '../core/Link/Link.js';
@@ -108,12 +109,15 @@ import '../core/Sidebar/SidebarToggle.js';
 import '../core/Sidebar/SidebarMobileTrigger.js';
 import '../core/Sidebar/SidebarUserProfile.js';
 import '../core/Sidebar/SidebarLogo.js';
+import '../core/Sidebar/SidebarSearch.js';
+import '../core/Sidebar/SidebarCard.js';
 import '../core/Sidebar/SidebarContext.js';
 import '../core/OfflineIndicator/OfflineIndicator.js';
 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/AppShell/AppShell.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { AppShellProps } from "./AppShell.types";
+export declare const AppShell: React.ForwardRefExoticComponent<AppShellProps & React.RefAttributes<HTMLDivElement>> & {
+    Topbar: React.ForwardRefExoticComponent<import("./AppShell.types").AppShellTopbarProps & React.RefAttributes<HTMLElement>>;
+    Sidebar: React.ForwardRefExoticComponent<import("./AppShell.types").AppShellSidebarProps & React.RefAttributes<HTMLElement>>;
+    Header: React.ForwardRefExoticComponent<import("./AppShell.types").AppShellHeaderProps & React.RefAttributes<HTMLElement>>;
+    Main: React.ForwardRefExoticComponent<import("./AppShell.types").AppShellMainProps & React.RefAttributes<HTMLElement>>;
+    RightPanel: React.ForwardRefExoticComponent<import("./AppShell.types").AppShellRightPanelProps & React.RefAttributes<HTMLElement>>;
+    Footer: React.ForwardRefExoticComponent<import("./AppShell.types").AppShellFooterProps & React.RefAttributes<HTMLElement>>;
+};

package/dist/components/layout/AppShell/AppShell.js

@@ -0,0 +1,84 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { getAppShellTheme } from './AppShell.theme.js';
+import { AppShellProvider } from './AppShellContext.js';
+import { AppShellTopbar } from './AppShellTopbar.js';
+import { AppShellSidebar } from './AppShellSidebar.js';
+import { AppShellHeader } from './AppShellHeader.js';
+import { AppShellMain } from './AppShellMain.js';
+import { AppShellRightPanel } from './AppShellRightPanel.js';
+import { AppShellFooter } from './AppShellFooter.js';
+
+const AppShellRoot = React__default.forwardRef(({ className, theme: customTheme, scroll = "viewport", topbarSpan = "full", footerSpan = "full", contentWidth = "full", contentPadding = "md", children, ...props }, ref) => {
+    const theme = getAppShellTheme(customTheme);
+    const contextValue = React__default.useMemo(() => ({ scroll, contentWidth, contentPadding }), [scroll, contentWidth, contentPadding]);
+    // Bucket children by slot type. Header is intentionally NOT bucketed —
+    // it is user-composed inside AppShell.Main.
+    let topbar = null;
+    let sidebar = null;
+    let main = null;
+    let rightPanel = null;
+    let footer = null;
+    React__default.Children.forEach(children, (child) => {
+        if (!React__default.isValidElement(child))
+            return;
+        const type = child.type;
+        if (type === AppShellTopbar) {
+            if (topbar === null)
+                topbar = child;
+            else if (process.env.NODE_ENV !== "production") {
+                console.warn("[AppShell]: multiple AppShell.Topbar children; keeping the first.");
+            }
+        }
+        else if (type === AppShellSidebar) {
+            if (sidebar === null)
+                sidebar = child;
+            else if (process.env.NODE_ENV !== "production") {
+                console.warn("[AppShell]: multiple AppShell.Sidebar children; keeping the first.");
+            }
+        }
+        else if (type === AppShellMain) {
+            if (main === null)
+                main = child;
+            else if (process.env.NODE_ENV !== "production") {
+                console.warn("[AppShell]: multiple AppShell.Main children; keeping the first.");
+            }
+        }
+        else if (type === AppShellRightPanel) {
+            if (rightPanel === null)
+                rightPanel = child;
+            else if (process.env.NODE_ENV !== "production") {
+                console.warn("[AppShell]: multiple AppShell.RightPanel children; keeping the first.");
+            }
+        }
+        else if (type === AppShellFooter) {
+            if (footer === null)
+                footer = child;
+            else if (process.env.NODE_ENV !== "production") {
+                console.warn("[AppShell]: multiple AppShell.Footer children; keeping the first.");
+            }
+        }
+        else if (process.env.NODE_ENV !== "production") {
+            console.warn("[AppShell]: unknown child rendered; expected one of " +
+                "AppShell.Topbar / Sidebar / Main / RightPanel / Footer. " +
+                "AppShell.Header is composed inside AppShell.Main.");
+        }
+    });
+    const topbarInChrome = topbar !== null && topbarSpan === "full";
+    const topbarInMain = topbar !== null && topbarSpan === "main";
+    const footerInChrome = footer !== null && footerSpan === "full";
+    const footerInMain = footer !== null && footerSpan === "main";
+    return (jsx(AppShellProvider, { value: contextValue, children: jsxs("div", { ref: ref, className: cn(theme.root, scroll === "viewport" && theme.rootViewport, className), ...props, children: [topbarInChrome && topbar, jsxs("div", { className: theme.shell, children: [sidebar, jsxs("div", { className: theme.mainColumn, children: [topbarInMain && topbar, main, footerInMain && footer] }), rightPanel] }), footerInChrome && footer] }) }));
+});
+AppShellRoot.displayName = "AppShell";
+const AppShell = Object.assign(AppShellRoot, {
+    Topbar: AppShellTopbar,
+    Sidebar: AppShellSidebar,
+    Header: AppShellHeader,
+    Main: AppShellMain,
+    RightPanel: AppShellRightPanel,
+    Footer: AppShellFooter,
+});
+
+export { AppShell };

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

@@ -0,0 +1,3 @@
+import type { AppShellTheme, AppShellThemeOverrides } from "./AppShell.types";
+export declare const appShellTheme: AppShellTheme;
+export declare const getAppShellTheme: (customTheme?: AppShellThemeOverrides) => AppShellTheme;