@mohasinac/appkit 3.5.5 → 3.5.7

package/dist/tokens/themes/cobalt-night.d.ts

@@ -0,0 +1,17 @@
+import type { ThemeRecord } from "./types";
+/**
+ * Theme template — Cobalt Night. Keeps the cobalt primary but pairs it with
+ * a deep-blue dark surface instead of hot pink. Mirrors the
+ * `[data-theme="cobalt-night"]` block in `appkit/src/tokens/tokens.css`.
+ *
+ * Not a built-in (`builtIn: false`) — seeded into `siteSettings.theme.themes`
+ * as a selectable starting point admins can assign as the default dark theme
+ * or clone from `ThemeManagerView`. Only overrides the tokens the CSS block
+ * itself overrides; every other token (spacing, fonts, unredefined gradients)
+ * falls back to `DEFAULT_DARK_THEME`'s values, same pattern the CSS block uses
+ * against `:root`.
+ *
+ * Drift between this file and `tokens.css` is detected by
+ * `scripts/audit-theme-drift.mjs`.
+ */
+export declare const COBALT_NIGHT_THEME: ThemeRecord;

package/dist/tokens/themes/cobalt-night.js

@@ -0,0 +1,50 @@
+import { DEFAULT_DARK_THEME } from "./default-dark";
+/**
+ * Theme template — Cobalt Night. Keeps the cobalt primary but pairs it with
+ * a deep-blue dark surface instead of hot pink. Mirrors the
+ * `[data-theme="cobalt-night"]` block in `appkit/src/tokens/tokens.css`.
+ *
+ * Not a built-in (`builtIn: false`) — seeded into `siteSettings.theme.themes`
+ * as a selectable starting point admins can assign as the default dark theme
+ * or clone from `ThemeManagerView`. Only overrides the tokens the CSS block
+ * itself overrides; every other token (spacing, fonts, unredefined gradients)
+ * falls back to `DEFAULT_DARK_THEME`'s values, same pattern the CSS block uses
+ * against `:root`.
+ *
+ * Drift between this file and `tokens.css` is detected by
+ * `scripts/audit-theme-drift.mjs`.
+ */
+export const COBALT_NIGHT_THEME = {
+    id: "cobalt-night",
+    name: "Cobalt Night",
+    mode: "dark",
+    builtIn: false,
+    tokens: {
+        "appkit-color-primary": "#5992ff",
+        "appkit-color-primary-500": "#5992ff",
+        "appkit-color-primary-600": "#3570fc",
+        "appkit-color-secondary": "#84e122",
+        "appkit-color-secondary-500": "#84e122",
+        "appkit-color-bg": "#111e58",
+        "appkit-color-surface": "#1536b4",
+        "appkit-color-surface-elevated": "rgba(21, 54, 180, 0.9)",
+        "appkit-color-surface-input": "rgba(24, 49, 142, 0.6)",
+        "appkit-color-border": "#1343de",
+        "appkit-color-border-subtle": "rgba(24, 49, 142, 0.6)",
+        "appkit-color-text": "#eef5ff",
+        "appkit-color-text-muted": "#bcd4ff",
+        "appkit-color-text-faint": "#8eb9ff",
+        "appkit-color-success": "#4ade80",
+        "appkit-color-success-surface": "rgba(20, 83, 45, 0.3)",
+        "appkit-color-warning": "#fbbf24",
+        "appkit-color-warning-surface": "rgba(120, 53, 15, 0.3)",
+        "appkit-color-error": "#f87171",
+        "appkit-color-error-surface": "rgba(127, 29, 29, 0.3)",
+        "appkit-color-info": "#38bdf8",
+        "appkit-color-info-surface": "rgba(12, 74, 110, 0.3)",
+        "appkit-color-focus-ring": "#8eb9ff",
+        "appkit-shadow-glow": "0 0 0 1px rgba(89,146,255,0.18), 0 4px 16px -4px rgba(89,146,255,0.30)",
+        "appkit-shadow-glow-pink": "0 0 0 1px rgba(89,146,255,0.18), 0 4px 20px -4px rgba(89,146,255,0.30)",
+    },
+    gradients: { ...DEFAULT_DARK_THEME.gradients },
+};

package/dist/tokens/themes/index.d.ts

@@ -1,12 +1,20 @@
 import { DEFAULT_DARK_THEME } from "./default-dark";
 import { DEFAULT_LIGHT_THEME } from "./default-light";
+import { COBALT_NIGHT_THEME } from "./cobalt-night";
+import { SUNSET_THEME } from "./sunset";
 import type { ThemeMode, ThemeRecord } from "./types";
-export { DEFAULT_LIGHT_THEME, DEFAULT_DARK_THEME };
+export { DEFAULT_LIGHT_THEME, DEFAULT_DARK_THEME, COBALT_NIGHT_THEME, SUNSET_THEME };
 export { REQUIRED_GRADIENT_KEYS, REQUIRED_THEME_TOKENS } from "./required";
 export type { RequiredThemeToken } from "./required";
 export type { GradientKey, ThemeMode, ThemeRecord } from "./types";
 /** Built-in themes that ship with appkit; admin cannot delete these. */
 export declare const BUILT_IN_THEMES: readonly ThemeRecord[];
+/**
+ * Selectable theme templates — not built-in (admin can delete/edit them),
+ * but shipped pre-defined so they're available immediately in
+ * `ThemeManagerView` without an admin hand-building a palette from scratch.
+ */
+export declare const THEME_TEMPLATES: readonly ThemeRecord[];
 /**
  * Find the default built-in theme for a given mode.
  * Used as a fallback when `siteSettings.theme.default{Light,Dark}ThemeId`

package/dist/tokens/themes/index.js

@@ -1,12 +1,23 @@
 import { DEFAULT_DARK_THEME } from "./default-dark";
 import { DEFAULT_LIGHT_THEME } from "./default-light";
-export { DEFAULT_LIGHT_THEME, DEFAULT_DARK_THEME };
+import { COBALT_NIGHT_THEME } from "./cobalt-night";
+import { SUNSET_THEME } from "./sunset";
+export { DEFAULT_LIGHT_THEME, DEFAULT_DARK_THEME, COBALT_NIGHT_THEME, SUNSET_THEME };
 export { REQUIRED_GRADIENT_KEYS, REQUIRED_THEME_TOKENS } from "./required";
 /** Built-in themes that ship with appkit; admin cannot delete these. */
 export const BUILT_IN_THEMES = [
     DEFAULT_LIGHT_THEME,
     DEFAULT_DARK_THEME,
 ];
+/**
+ * Selectable theme templates — not built-in (admin can delete/edit them),
+ * but shipped pre-defined so they're available immediately in
+ * `ThemeManagerView` without an admin hand-building a palette from scratch.
+ */
+export const THEME_TEMPLATES = [
+    COBALT_NIGHT_THEME,
+    SUNSET_THEME,
+];
 /**
  * Find the default built-in theme for a given mode.
  * Used as a fallback when `siteSettings.theme.default{Light,Dark}ThemeId`

package/dist/tokens/themes/sunset.d.ts

@@ -0,0 +1,18 @@
+import type { ThemeRecord } from "./types";
+/**
+ * Theme template — Sunset. Warm amber primary + rose secondary on a
+ * deep-rose-tinted light body — a daytime warm palette alternative to the
+ * default cobalt+lime. Mirrors the `[data-theme="sunset"]` block in
+ * `appkit/src/tokens/tokens.css`.
+ *
+ * Not a built-in (`builtIn: false`) — seeded into `siteSettings.theme.themes`
+ * as a selectable starting point admins can assign as the default light
+ * theme or clone from `ThemeManagerView`. Only overrides the tokens the CSS
+ * block itself overrides; every other token (spacing, fonts, unredefined
+ * gradients) falls back to `DEFAULT_LIGHT_THEME`'s values, same pattern the
+ * CSS block uses against `:root`.
+ *
+ * Drift between this file and `tokens.css` is detected by
+ * `scripts/audit-theme-drift.mjs`.
+ */
+export declare const SUNSET_THEME: ThemeRecord;

package/dist/tokens/themes/sunset.js

@@ -0,0 +1,51 @@
+import { DEFAULT_LIGHT_THEME } from "./default-light";
+/**
+ * Theme template — Sunset. Warm amber primary + rose secondary on a
+ * deep-rose-tinted light body — a daytime warm palette alternative to the
+ * default cobalt+lime. Mirrors the `[data-theme="sunset"]` block in
+ * `appkit/src/tokens/tokens.css`.
+ *
+ * Not a built-in (`builtIn: false`) — seeded into `siteSettings.theme.themes`
+ * as a selectable starting point admins can assign as the default light
+ * theme or clone from `ThemeManagerView`. Only overrides the tokens the CSS
+ * block itself overrides; every other token (spacing, fonts, unredefined
+ * gradients) falls back to `DEFAULT_LIGHT_THEME`'s values, same pattern the
+ * CSS block uses against `:root`.
+ *
+ * Drift between this file and `tokens.css` is detected by
+ * `scripts/audit-theme-drift.mjs`.
+ */
+export const SUNSET_THEME = {
+    id: "sunset",
+    name: "Sunset",
+    mode: "light",
+    builtIn: false,
+    tokens: {
+        "appkit-color-primary": "#f59e0b",
+        "appkit-color-primary-500": "#f59e0b",
+        "appkit-color-primary-600": "#d97706",
+        "appkit-color-secondary": "#f43f5e",
+        "appkit-color-secondary-500": "#f43f5e",
+        "appkit-color-bg": "#fff7ed",
+        "appkit-color-surface": "#ffffff",
+        "appkit-color-surface-elevated": "#ffffff",
+        "appkit-color-surface-input": "#fffbeb",
+        "appkit-color-border": "#fed7aa",
+        "appkit-color-border-subtle": "#ffedd5",
+        "appkit-color-text": "#431407",
+        "appkit-color-text-muted": "#9a3412",
+        "appkit-color-text-faint": "#c2410c",
+        "appkit-color-success": "#16a34a",
+        "appkit-color-success-surface": "#f0fdf4",
+        "appkit-color-warning": "#d97706",
+        "appkit-color-warning-surface": "#fef3c7",
+        "appkit-color-error": "#dc2626",
+        "appkit-color-error-surface": "#fef2f2",
+        "appkit-color-info": "#0284c7",
+        "appkit-color-info-surface": "#f0f9ff",
+        "appkit-color-focus-ring": "#f59e0b",
+        "appkit-shadow-glow": "0 0 0 1px rgba(245,158,11,0.18), 0 4px 16px -4px rgba(245,158,11,0.30)",
+        "appkit-shadow-glow-pink": "0 0 0 1px rgba(244,63,94,0.18), 0 4px 20px -4px rgba(244,63,94,0.30)",
+    },
+    gradients: { ...DEFAULT_LIGHT_THEME.gradients },
+};

package/dist/tokens/tokens.css

@@ -311,9 +311,16 @@
   --appkit-logo-stop-to:              var(--appkit-color-secondary-400);
 }
 
-/* --- Theme — Dark ([data-theme="dark"]) ----------------------------------- */
-/* Dark mode: both primary & secondary become Hot Pink (Beyblade 2 dominant colour) */
-[data-theme="dark"] {
+/* --- Theme — Dark ([data-theme="default-dark"]) ---------------------------- */
+/* Dark mode: both primary & secondary become Hot Pink (Beyblade 2 dominant colour).
+   Selector MUST match ThemeRecord.id ("default-dark"), not the ThemeMode ("dark") —
+   ThemeProvider.applyTheme() sets data-theme to the record id, never "dark" literally.
+   A prior mismatch here left this whole block unreachable (dead CSS), which also
+   caused a "swamp green" FOUC flash: the anti-FOUC script sets .dark + the correct
+   data-theme id before hydration, but with no matching CSS selector the page kept
+   painting :root's light-mode secondary (lime green) until React's inline styles
+   landed a moment later. */
+[data-theme="default-dark"] {
   --appkit-color-primary:          #e91e8c;
   --appkit-color-primary-50:       #fdf0f8;
   --appkit-color-primary-100:      #fce2f2;

package/dist/ui/components/BaseListingCard.d.ts

@@ -19,6 +19,7 @@ export interface BaseListingCardRootProps {
     onMouseLeave?: () => void;
     onTouchStart?: () => void;
     onTouchEnd?: () => void;
+    onTouchCancel?: () => void;
 }
 export interface BaseListingCardHeroProps {
     /** Aspect ratio for the hero image — only these two produce a real CSS rule (Tailwind's static scanner can't see a dynamically-interpolated `aspect-[${var}]`). Defaults to `"4/3"`. */
@@ -41,7 +42,7 @@ export interface BaseListingCardCheckboxProps {
     position?: string;
     className?: string;
 }
-declare function BaseListingCardRoot({ className, isSelected, isDisabled, variant, onClick, onMouseDown, onMouseUp, onMouseLeave, onTouchStart, onTouchEnd, children, }: BaseListingCardRootProps): import("react").JSX.Element;
+declare function BaseListingCardRoot({ className, isSelected, isDisabled, variant, onClick, onMouseDown, onMouseUp, onMouseLeave, onTouchStart, onTouchEnd, onTouchCancel, children, }: BaseListingCardRootProps): import("react").JSX.Element;
 declare function BaseListingCardHero({ aspect, variant, className, children, onMouseEnter, onMouseLeave, }: BaseListingCardHeroProps): import("react").JSX.Element;
 declare function BaseListingCardInfo({ variant, className, children, }: BaseListingCardInfoProps): import("react").JSX.Element;
 declare function BaseListingCardCheckbox({ selected, onSelect, label, position, className, }: BaseListingCardCheckboxProps): import("react").JSX.Element;

package/dist/ui/components/BaseListingCard.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { MediaImage } from "../../features/media/MediaImage";
 import { Span } from "./Typography";
-function BaseListingCardRoot({ className = "", isSelected, isDisabled, variant = "grid", onClick, onMouseDown, onMouseUp, onMouseLeave, onTouchStart, onTouchEnd, children, }) {
-    return (_jsx("div", { onClick: onClick, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onMouseLeave: onMouseLeave, onTouchStart: onTouchStart, onTouchEnd: onTouchEnd, className: [
+function BaseListingCardRoot({ className = "", isSelected, isDisabled, variant = "grid", onClick, onMouseDown, onMouseUp, onMouseLeave, onTouchStart, onTouchEnd, onTouchCancel, children, }) {
+    return (_jsx("div", { onClick: onClick, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onMouseLeave: onMouseLeave, onTouchStart: onTouchStart, onTouchEnd: onTouchEnd, onTouchCancel: onTouchCancel, className: [
             "group relative w-full min-w-0 overflow-hidden rounded-xl border bg-[var(--appkit-color-surface)] transition-shadow",
             variant === "list" ? "flex flex-row items-stretch" : "flex flex-col",
             isSelected
@@ -56,7 +56,7 @@ function BaseListingCardCheckbox({ selected, onSelect, label, position = "top-2
             "focus-visible:ring-2 focus-visible:ring-primary/50",
             selected
                 ? "bg-primary border-primary shadow-sm"
-                : "bg-white/80 border-zinc-300/80 hover:border-primary/60 hover:bg-[var(--appkit-color-surface)]/80 border-[var(--appkit-color-border)]",
+                : "bg-white/80 hover:border-primary/60 hover:bg-[var(--appkit-color-surface)]/80 border-[var(--appkit-color-border)]",
             position,
             className,
         ]
@@ -71,7 +71,7 @@ function BaseListingCardIconOverlay({ groupIcon, sublistingIcon, position = "top
         if (isMediaUrl) {
             return (_jsx("div", { className: "relative w-5 h-5 overflow-hidden rounded-full border border-white/80 shadow-sm bg-[var(--appkit-color-surface)]", children: _jsx(MediaImage, { src: icon, alt: "", size: "thumbnail" }) }, key));
         }
-        return (_jsx(Span, { size: "sm", className: "inline-flex items-center justify-center w-5 h-5 rounded-full border border-white/80 bg-white/95 bg-[var(--appkit-color-surface)]/95 shadow-sm leading-none", children: icon }, key));
+        return (_jsx(Span, { size: "sm", className: "inline-flex items-center justify-center w-5 h-5 rounded-full border border-white/80 bg-[var(--appkit-color-surface)]/95 shadow-sm leading-none", children: icon }, key));
     };
     return (_jsxs("div", { className: `absolute z-10 flex items-center gap-1 ${position}`, "aria-hidden": "true", children: [groupIcon && renderOne(groupIcon, "group"), sublistingIcon && renderOne(sublistingIcon, "sublisting")] }));
 }

package/dist/ui/components/Card.d.ts

@@ -16,7 +16,7 @@ export interface CardProps extends SurfaceProps {
     style?: React.CSSProperties;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
 }
-export declare function Card({ children, variant, padding, spacing, hover, animate, surface, rounded, border, shadow, className, style, onClick, }: CardProps): React.JSX.Element;
+export declare function Card({ children, variant, padding, spacing, hover, animate, surface, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow, className, style, onClick, }: CardProps): React.JSX.Element;
 export interface CardSectionProps {
     children: React.ReactNode;
     className?: string;

package/dist/ui/components/Card.js

@@ -42,7 +42,7 @@ const CARD_SPACING_MAP = {
     lg: "space-y-6",
     xl: "space-y-8",
 };
-export function Card({ children, variant = "flat", padding = "md", spacing, hover = false, animate, surface, rounded, border, shadow, className = "", style, onClick, }) {
+export function Card({ children, variant = "flat", padding = "md", spacing, hover = false, animate, surface, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow, className = "", style, onClick, }) {
     const reduced = useReducedMotion();
     const cls = [
         UI_CARD.base,
@@ -51,7 +51,7 @@ export function Card({ children, variant = "flat", padding = "md", spacing, hove
         spacing ? CARD_SPACING_MAP[spacing] : "",
         hover ? "appkit-card--hoverable" : "",
         onClick ? "appkit-card--clickable" : "",
-        buildSurfaceClasses({ surface, rounded, border, shadow }),
+        buildSurfaceClasses({ surface, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow }),
         className,
     ]
         .filter(Boolean)

package/dist/ui/components/Div.js

@@ -83,8 +83,8 @@ const DIV_LG_ALIGN_MAP = {
     baseline: "lg:items-baseline",
     stretch: "lg:items-stretch",
 };
-export const Div = React.forwardRef(({ className = "", surface, padding, paddingX, paddingY, rounded, border, shadow, color, textSize, textWeight, layout, gap, align, lgAlign, justify, overflow, children, ...props }, ref) => (_jsx("div", { ref: ref, className: [
-        buildSurfaceClasses({ surface, padding, paddingX, paddingY, rounded, border, shadow }),
+export const Div = React.forwardRef(({ className = "", surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, color, textSize, textWeight, layout, gap, align, lgAlign, justify, overflow, children, ...props }, ref) => (_jsx("div", { ref: ref, className: [
+        buildSurfaceClasses({ surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow }),
         color ? DIV_COLOR_MAP[color] : "",
         textSize ? DIV_TEXT_SIZE_MAP[textSize] : "",
         textWeight ? DIV_TEXT_WEIGHT_MAP[textWeight] : "",

package/dist/ui/components/Form.d.ts

@@ -25,7 +25,7 @@ export interface FormProps extends Omit<React.FormHTMLAttributes<HTMLFormElement
     gap?: GapToken;
 }
 export type GapToken = "none" | "xs" | "sm" | "md" | "lg" | "xl";
-export declare function Form({ children, spacing, schema, align, gap, surface, padding, paddingX, paddingY, rounded, border, shadow, overflow, className, ...props }: FormProps): React.JSX.Element;
+export declare function Form({ children, spacing, schema, align, gap, surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow, className, ...props }: FormProps): React.JSX.Element;
 export interface FormGroupProps {
     children: React.ReactNode;
     columns?: 1 | 2 | 3 | 4;

package/dist/ui/components/Form.js

@@ -43,7 +43,7 @@ const FORM_ALIGN_MAP = {
     end: "items-end",
     stretch: "items-stretch",
 };
-export function Form({ children, spacing, schema, align, gap, surface, padding, paddingX, paddingY, rounded, border, shadow, overflow, className = "", ...props }) {
+export function Form({ children, spacing, schema, align, gap, surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow, className = "", ...props }) {
     const helpers = useFormShellState(schema);
     const content = typeof children === "function"
         ? children(helpers)
@@ -53,7 +53,7 @@ export function Form({ children, spacing, schema, align, gap, surface, padding,
                 spacing ? FORM_SPACING_MAP[spacing] : "",
                 align ? FORM_ALIGN_MAP[align] : "",
                 gap ? GAP_MAP[gap] : "",
-                buildSurfaceClasses({ surface, padding, paddingX, paddingY, rounded, border, shadow, overflow }),
+                buildSurfaceClasses({ surface, padding, paddingX, paddingY, rounded, roundedTop, roundedBottom, border, shadow, overflow }),
                 className,
             ].filter(Boolean).join(" "), ...props, children: content }) }));
 }

package/dist/ui/components/Input.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { Div } from "./Div";

package/dist/ui/components/ListingToolbar.js

@@ -33,7 +33,7 @@ export function ListingToolbar({ filterCount = 0, onFiltersClick, searchValue =
         }
     };
     const allSelected = bulkTotalCount > 0 && bulkSelectedCount === bulkTotalCount;
-    return (_jsx("div", { "data-testid": "listing-toolbar", className: `sticky top-[var(--header-height,0px)] z-20 border-b border-[var(--appkit-color-border)] bg-white/95 bg-[var(--appkit-color-surface)]/95 backdrop-blur-sm py-2 px-3 sm:py-2.5 sm:px-4 ${className}`, children: _jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-2.5", children: [bulkMode ? (_jsxs("div", { className: "flex flex-1 items-center gap-2", children: [_jsxs("button", { type: "button", onClick: onBulkSelectAll, className: "flex items-center gap-1.5 rounded-lg border border-[var(--appkit-color-border)] px-3 py-1.5 text-sm font-medium text-[var(--appkit-color-text-muted)] hover:bg-zinc-50 hover:bg-[var(--appkit-color-surface-elevated)] transition-colors", children: [allSelected
+    return (_jsx("div", { "data-testid": "listing-toolbar", className: `sticky top-[var(--header-height,0px)] z-20 border-b border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]/95 backdrop-blur-sm py-2 px-3 sm:py-2.5 sm:px-4 ${className}`, children: _jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-2.5", children: [bulkMode ? (_jsxs("div", { className: "flex flex-1 items-center gap-2", children: [_jsxs("button", { type: "button", onClick: onBulkSelectAll, className: "flex items-center gap-1.5 rounded-lg border border-[var(--appkit-color-border)] px-3 py-1.5 text-sm font-medium text-[var(--appkit-color-text-muted)] hover:bg-zinc-50 hover:bg-[var(--appkit-color-surface-elevated)] transition-colors", children: [allSelected
                                     ? _jsx(CheckSquare, { className: "h-4 w-4 text-[var(--appkit-color-primary)]" })
                                     : _jsx(Square, { className: "h-4 w-4" }), allSelected ? l.deselectAll : l.selectAll(bulkTotalCount)] }), _jsx(Span, { size: "sm", color: "muted", children: l.selected(bulkSelectedCount) }), _jsx("button", { type: "button", onClick: onBulkClear, className: CLS_CLEAR_LINK, children: l.clearSelection })] })) : onSearchChange ? (_jsxs("div", { className: "flex flex-1 items-center overflow-hidden rounded-lg border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] min-w-0", children: [_jsx("input", { type: "text", value: searchValue, onChange: (e) => onSearchChange(e.target.value), onKeyDown: handleKeyDown, placeholder: searchPlaceholder, className: "min-w-0 flex-1 bg-transparent px-3 py-2 text-sm text-[var(--appkit-color-text)] placeholder-zinc-400 outline-none" }), _jsx("button", { type: "button", onClick: onSearchCommit, className: "flex shrink-0 items-center justify-center px-2.5 py-2 text-zinc-400 hover:text-[var(--appkit-color-primary)] transition-colors", "aria-label": l.search, children: _jsx(Search, { className: "h-4 w-4" }) })] })) : null, _jsxs("div", { className: "flex items-center gap-1.5 sm:gap-2 shrink-0", children: [onFiltersClick && (_jsxs("button", { type: "button", onClick: onFiltersClick, className: "relative flex shrink-0 items-center gap-1.5 rounded-lg border border-[var(--appkit-color-border)] px-2.5 py-1.5 sm:px-3.5 sm:py-2 text-sm font-medium text-[var(--appkit-color-text-muted)] hover:bg-zinc-50 hover:bg-[var(--appkit-color-surface-elevated)] transition-colors", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: l.filters }), filterCount > 0 && (_jsx(Span, { weight: "bold", className: "absolute -top-1.5 -right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-[var(--appkit-color-primary)] text-[10px] text-white", children: filterCount }))] })), sortOptions && sortValue !== undefined && onSortChange && (_jsxs(Div, { className: "flex items-center gap-1.5 text-[var(--appkit-color-text-muted)]", children: [_jsx(Span, { size: "xs", className: "hidden md:inline whitespace-nowrap", children: l.sort }), _jsx(SortDropdown, { value: sortValue, onChange: onSortChange, options: sortOptions })] })), !hideViewToggle && onViewChange && (_jsxs("div", { className: "flex items-center rounded-lg border border-[var(--appkit-color-border)] overflow-hidden", children: [_jsx("button", { type: "button", onClick: () => onViewChange("grid"), "aria-label": l.gridView, className: `${VIEW_BTN_BASE} ${view === "grid" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(LayoutGrid, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", onClick: () => onViewChange("list"), "aria-label": l.listView, className: `${VIEW_BTN_BASE} ${view === "list" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(List, { className: "h-4 w-4" }) }), showTableView && (_jsx("button", { type: "button", onClick: () => onViewChange("table"), "aria-label": l.tableView, className: `${VIEW_BTN_BASE} ${view === "table" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(Table2, { className: "h-4 w-4" }) }))] })), onResetAll && hasActiveState && (_jsx("button", { type: "button", onClick: onResetAll, "aria-label": l.resetAll, title: l.resetAll, className: CLS_CLEAR_ICON_BTN, children: _jsx(RotateCcw, { className: "h-4 w-4" }) })), toggles && toggles.length > 0 && (_jsx("div", { className: "flex items-center gap-1", children: toggles.map((t) => (_jsx("button", { type: "button", role: "switch", "aria-checked": t.active, onClick: () => t.onChange(!t.active), className: `rounded-full border px-2.5 py-1 text-xs font-medium transition-colors whitespace-nowrap ${t.active
                                     ? "border-transparent bg-[var(--appkit-color-primary)] text-white"

package/dist/ui/components/QuickCreateModal.style.css

@@ -79,6 +79,6 @@
   }
 }
 
-[data-theme="dark"] .appkit-quick-create-modal__panel {
+[data-theme="default-dark"] .appkit-quick-create-modal__panel {
   background: var(--appkit-color-surface-dark, #1e293b);
 }

package/dist/ui/components/Slider.js

@@ -30,7 +30,11 @@ export function Slider({ value: controlledValue, defaultValue = 0, min = 0, max
                         ].join(" "), "data-section": "slider-div-610", children: _jsx("div", { className: [
                                 "h-full rounded-full bg-lime-600 dark:bg-pink-500",
                                 SIZE_CLASSES[size],
-                            ].join(" "), style: { width: `${Math.max(0, Math.min(100, percentage))}%` } }) }), _jsx("input", { id: inputId, type: "range", min: min, max: max, step: step, value: value, disabled: disabled, onChange: handleChange, onMouseUp: handleChangeEnd, onTouchEnd: handleChangeEnd, className: [
+                            ].join(" "), style: { width: `${Math.max(0, Math.min(100, percentage))}%` } }) }), _jsx("input", { id: inputId, type: "range", min: min, max: max, step: step, value: value, disabled: disabled, onChange: handleChange, onMouseUp: handleChangeEnd, 
+                        // audit-touch-handler-ok: native <input type="range"> owns its own
+                        // drag/cancel state; no persisted React state here to leak on a
+                        // cancelled touch, onChangeEnd simply not firing is acceptable.
+                        onTouchEnd: handleChangeEnd, className: [
                             "appkit-slider relative z-10 bg-transparent",
                             disabled ? "appkit-slider--disabled" : "cursor-pointer",
                             SIZE_CLASSES[size],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mohasinac/appkit",
-  "version": "3.5.5",
+  "version": "3.5.7",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -165,13 +165,14 @@
     "audit:paginated-select": "node scripts/audit-paginated-select.mjs",
     "audit:sieve-views": "node scripts/audit-sieve-constants-views.mjs",
     "check:types": "tsc -p tsconfig.build.json --noEmit",
-    "check:audits": "node scripts/audit-violations.mjs && node scripts/verify-entries.mjs && node scripts/verify-css-build.mjs && node scripts/audit-use-client.mjs && node scripts/audit-double-navigation.mjs && node scripts/audit-repository-fields.mjs && node scripts/audit-query-provider.mjs && node scripts/audit-export-paths.mjs && node scripts/audit-listing-indices.mjs && node scripts/audit-listing-type-reads.mjs && node scripts/audit-create-with-id.mjs && node scripts/audit-css-imports.mjs && node scripts/audit-appkit-reexports.mjs && node scripts/audit-action-confirmation.mjs && node scripts/audit-route-strings.mjs && node scripts/audit-paginated-select.mjs && node scripts/audit-sieve-constants-views.mjs && node scripts/audit-schema-registry-completeness.mjs && node scripts/audit-firestore-schema-coverage.mjs && node scripts/audit-catch-normalize.mjs && node scripts/audit-route-schema-registry.mjs && node scripts/audit-z-any-z-unknown.mjs",
+    "check:audits": "node scripts/audit-violations.mjs && node scripts/verify-entries.mjs && node scripts/verify-css-build.mjs && node scripts/audit-use-client.mjs && node scripts/audit-double-navigation.mjs && node scripts/audit-repository-fields.mjs && node scripts/audit-query-provider.mjs && node scripts/audit-export-paths.mjs && node scripts/audit-listing-indices.mjs && node scripts/audit-listing-type-reads.mjs && node scripts/audit-create-with-id.mjs && node scripts/audit-css-imports.mjs && node scripts/audit-appkit-reexports.mjs && node scripts/audit-action-confirmation.mjs && node scripts/audit-route-strings.mjs && node scripts/audit-paginated-select.mjs && node scripts/audit-sieve-constants-views.mjs && node scripts/audit-schema-registry-completeness.mjs && node scripts/audit-firestore-schema-coverage.mjs && node scripts/audit-catch-normalize.mjs && node scripts/audit-route-schema-registry.mjs && node scripts/audit-z-any-z-unknown.mjs && node scripts/audit-dynamic-tailwind-arbitrary.mjs && node scripts/audit-surface-props-completeness.mjs && node scripts/audit-touch-handler-completeness.mjs && node scripts/audit-field-primitive-contract.mjs && node scripts/audit-innerhtml-sanitization.mjs",
     "test": "vitest run --passWithNoTests",
     "test:watch": "vitest",
     "check": "npm run check:types && npm run check:audits"
   },
   "dependencies": {
     "@mohasinac/sievejs": "^1.0.0",
+    "driver.js": "^1.8.0",
     "jsbarcode": "^3.12.3",
     "motion": "^12.40.0",
     "react-advanced-cropper": "^0.20.1",