@object-ui/components 3.0.3 → 3.1.0

package/dist/src/custom/config-field-renderer.d.ts

@@ -0,0 +1,21 @@
+import { ConfigField } from '../types/config-panel';
+export interface ConfigFieldRendererProps {
+    /** Field schema */
+    field: ConfigField;
+    /** Current value */
+    value: any;
+    /** Change handler */
+    onChange: (value: any) => void;
+    /** Full draft for visibility evaluation and custom render */
+    draft: Record<string, any>;
+    /** Object definition for field-picker controls */
+    objectDef?: Record<string, any>;
+}
+/**
+ * Renders a single config field based on its ControlType.
+ *
+ * Supports: input, switch, select, checkbox, slider, color, icon-group, custom.
+ * filter/sort/field-picker are rendered as placeholders that consumers can
+ * override with type='custom' when full sub-editor integration is needed.
+ */
+export declare function ConfigFieldRenderer({ field, value, onChange, draft, objectDef: _objectDef, }: ConfigFieldRendererProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/src/custom/config-panel-renderer.d.ts

@@ -0,0 +1,81 @@
+import { ConfigPanelSchema } from '../types/config-panel';
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import * as React from 'react';
+export interface ConfigPanelRendererProps {
+    /** Whether the panel is visible */
+    open: boolean;
+    /** Close callback */
+    onClose: () => void;
+    /** Schema describing the panel structure */
+    schema: ConfigPanelSchema;
+    /** Current draft values */
+    draft: Record<string, any>;
+    /** Whether the draft has uncommitted changes */
+    isDirty: boolean;
+    /** Called when any field changes */
+    onFieldChange: (key: string, value: any) => void;
+    /** Persist current draft */
+    onSave: () => void;
+    /** Revert draft to source */
+    onDiscard: () => void;
+    /** Extra content rendered in the header row */
+    headerExtra?: React.ReactNode;
+    /** Object definition for field pickers */
+    objectDef?: Record<string, any>;
+    /** Additional CSS class name */
+    className?: string;
+    /** Label for save button (default: "Save") */
+    saveLabel?: string;
+    /** Label for discard button (default: "Discard") */
+    discardLabel?: string;
+    /** Ref for the panel root element */
+    panelRef?: React.Ref<HTMLDivElement>;
+    /** ARIA role for the panel (e.g. "complementary") */
+    role?: string;
+    /** ARIA label for the panel */
+    ariaLabel?: string;
+    /** tabIndex for the panel root element */
+    tabIndex?: number;
+    /** Override data-testid for the panel root (default: "config-panel") */
+    testId?: string;
+    /** Title for the close button */
+    closeTitle?: string;
+    /** Override data-testid for the footer (default: "config-panel-footer") */
+    footerTestId?: string;
+    /** Override data-testid for the save button (default: "config-panel-save") */
+    saveTestId?: string;
+    /** Override data-testid for the discard button (default: "config-panel-discard") */
+    discardTestId?: string;
+    /** Externally-controlled set of section keys that should be expanded (overrides local collapse state) */
+    expandedSections?: string[];
+    /** Undo callback */
+    onUndo?: () => void;
+    /** Redo callback */
+    onRedo?: () => void;
+    /** Whether undo is available */
+    canUndo?: boolean;
+    /** Whether redo is available */
+    canRedo?: boolean;
+    /** Label for undo button */
+    undoLabel?: string;
+    /** Label for redo button */
+    redoLabel?: string;
+}
+/**
+ * Schema-driven configuration panel renderer.
+ *
+ * Takes a `ConfigPanelSchema` and automatically renders the full panel:
+ * - Header with breadcrumb & close button
+ * - Scrollable body with collapsible sections
+ * - Sticky footer with Save / Discard when dirty
+ *
+ * Each concrete panel (Dashboard, Form, Page…) only needs to provide
+ * a schema and wire up `useConfigDraft`.
+ */
+export declare function ConfigPanelRenderer({ open, onClose, schema, draft, isDirty, onFieldChange, onSave, onDiscard, headerExtra, objectDef, className, saveLabel, discardLabel, panelRef, role, ariaLabel, tabIndex, testId, closeTitle, footerTestId, saveTestId, discardTestId, expandedSections, onUndo, onRedo, canUndo, canRedo, undoLabel, redoLabel, }: ConfigPanelRendererProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/src/custom/config-row.d.ts

@@ -0,0 +1,27 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export interface ConfigRowProps {
+    /** Left-side label text */
+    label: string;
+    /** Right-side display value (used when children are not provided) */
+    value?: string;
+    /** Makes row clickable with hover effect */
+    onClick?: () => void;
+    /** Custom content replacing value */
+    children?: React.ReactNode;
+    /** Additional CSS class name */
+    className?: string;
+}
+/**
+ * A single labeled row in a configuration panel.
+ *
+ * Renders as a `<button>` when `onClick` is provided, otherwise as a `<div>`.
+ * Shows label on the left and either custom children or a text value on the right.
+ */
+declare function ConfigRow({ label, value, onClick, children, className }: ConfigRowProps): import("react/jsx-runtime").JSX.Element;
+export { ConfigRow };

package/dist/src/custom/index.d.ts

@@ -1,5 +1,8 @@
 export * from './button-group';
 export * from './combobox';
+export * from './config-row';
+export * from './config-field-renderer';
+export * from './config-panel-renderer';
 export * from './date-picker';
 export * from './empty';
 export * from './field';
@@ -9,8 +12,10 @@ export * from './item';
 export * from './kbd';
 export * from './native-select';
 export * from './navigation-overlay';
+export * from './section-header';
 export * from './spinner';
 export * from './sort-builder';
 export * from './action-param-dialog';
 export * from './view-skeleton';
 export * from './view-states';
+export * from './mobile-dialog-content';

package/dist/src/custom/mobile-dialog-content.d.ts

@@ -0,0 +1,20 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * MobileDialogContent
+ *
+ * A mobile-optimized wrapper around the upstream Shadcn DialogContent.
+ * On mobile (< sm breakpoint), the dialog is full-screen with a larger
+ * close-button touch target (≥ 44×44px per WCAG 2.5.5).
+ * On tablet+ (≥ sm), it falls back to the standard centered dialog.
+ *
+ * This lives in `custom/` to avoid modifying the Shadcn-synced `ui/dialog.tsx`.
+ */
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+export declare const MobileDialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/src/custom/navigation-overlay.d.ts

@@ -16,6 +16,8 @@ export interface NavigationOverlayProps {
     width?: string | number;
     /** Whether navigation is an overlay mode */
     isOverlay: boolean;
+    /** Target view/form name from NavigationConfig */
+    view?: string;
     /** Title for the overlay header */
     title?: string;
     /** Description for the overlay header */
@@ -27,6 +29,12 @@ export interface NavigationOverlayProps {
      * Receives the selected record.
      */
     children: (record: Record<string, unknown>) => React.ReactNode;
+    /**
+     * Optional render function for a specific view/form based on `view` prop.
+     * When provided, this takes priority over `children` for rendering overlay content.
+     * Receives the selected record and the view name.
+     */
+    renderView?: (record: Record<string, unknown>, viewName: string) => React.ReactNode;
     /**
      * The main content to wrap (for split mode only).
      * In split mode, the main content is rendered in the left panel.

package/dist/src/custom/section-header.d.ts

@@ -0,0 +1,31 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export interface SectionHeaderProps {
+    /** Section heading text */
+    title: string;
+    /** Icon rendered before the title */
+    icon?: React.ReactNode;
+    /** Enable collapse/expand toggle */
+    collapsible?: boolean;
+    /** Current collapsed state */
+    collapsed?: boolean;
+    /** Callback when toggling collapse/expand */
+    onToggle?: () => void;
+    /** Data-testid attribute */
+    testId?: string;
+    /** Additional CSS class name */
+    className?: string;
+}
+/**
+ * Section heading with optional collapse/expand support.
+ *
+ * Renders as a `<button>` when collapsible, with a chevron icon
+ * indicating the expand/collapse state. Uses `aria-expanded` for accessibility.
+ */
+declare function SectionHeader({ title, icon, collapsible, collapsed, onToggle, testId, className }: SectionHeaderProps): import("react/jsx-runtime").JSX.Element;
+export { SectionHeader };

package/dist/src/debug/DebugPanel.d.ts

@@ -0,0 +1,39 @@
+import { default as React } from 'react';
+import { DebugFlags } from '../../../core/src';
+export interface DebugPanelTab {
+    id: string;
+    label: string;
+    icon?: React.ReactNode;
+    render: () => React.ReactNode;
+}
+export interface DebugPanelProps {
+    /** Whether the panel is open */
+    open: boolean;
+    /** Toggle callback */
+    onClose: () => void;
+    /** Debug flags from the URL / hook */
+    flags?: DebugFlags;
+    /** Current schema being rendered (for the Schema tab) */
+    schema?: unknown;
+    /** Current data context (for the Data tab) */
+    dataContext?: unknown;
+    /** Extra tabs provided by plugins */
+    extraTabs?: DebugPanelTab[];
+    /** CSS class override */
+    className?: string;
+}
+/**
+ * A floating developer debug panel activated via URL parameters or manual toggle.
+ *
+ * Built-in tabs:
+ * - **Schema** — current rendered JSON schema
+ * - **Data** — active data context
+ * - **Perf** — component render timing (highlights slow renders >16ms)
+ * - **Expr** — expression evaluation trace
+ * - **Events** — action/event timeline
+ * - **Registry** — all registered component types
+ * - **Flags** — current debug flags
+ *
+ * Plugins can inject additional tabs via the `extraTabs` prop.
+ */
+export declare function DebugPanel({ open, onClose, flags, schema, dataContext, extraTabs, className, }: DebugPanelProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/src/debug/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export { DebugPanel } from './DebugPanel';
+export type { DebugPanelProps, DebugPanelTab } from './DebugPanel';

package/dist/src/hooks/use-config-draft.d.ts

@@ -0,0 +1,46 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export interface UseConfigDraftOptions {
+    /** Panel mode: 'create' starts dirty; 'edit' starts clean */
+    mode?: 'create' | 'edit';
+    /** Optional callback invoked on every field change */
+    onUpdate?: (field: string, value: any) => void;
+    /** Maximum undo history size (default: 50) */
+    maxHistory?: number;
+}
+export interface UseConfigDraftReturn<T extends Record<string, any>> {
+    /** The mutable draft copy */
+    draft: T;
+    /** Whether the draft differs from the source */
+    isDirty: boolean;
+    /** Update a single field in the draft */
+    updateField: (field: string, value: any) => void;
+    /** Revert draft back to source */
+    discard: () => void;
+    /** Low-level setter (use updateField for individual changes) */
+    setDraft: React.Dispatch<React.SetStateAction<T>>;
+    /** Undo the last change */
+    undo: () => void;
+    /** Redo a previously undone change */
+    redo: () => void;
+    /** Whether undo is available */
+    canUndo: boolean;
+    /** Whether redo is available */
+    canRedo: boolean;
+}
+/**
+ * Generic draft-state management for configuration panels.
+ *
+ * Mirrors the proven draft → save / discard pattern from ViewConfigPanel
+ * while being reusable across Dashboard, Form, Page, Report, and any
+ * future config panel. Includes undo/redo history support.
+ *
+ * @param source - The "committed" configuration object.
+ * @param options - Optional mode and change callback.
+ */
+export declare function useConfigDraft<T extends Record<string, any>>(source: T, options?: UseConfigDraftOptions): UseConfigDraftReturn<T>;

package/dist/src/index.d.ts

@@ -4,4 +4,8 @@ export { cva } from 'class-variance-authority';
 export { registerPlaceholders } from './renderers/placeholders';
 export * from './ui';
 export * from './custom';
+export { useConfigDraft } from './hooks/use-config-draft';
+export type { UseConfigDraftOptions, UseConfigDraftReturn } from './hooks/use-config-draft';
+export type { ControlType, ConfigField, ConfigSection, ConfigPanelSchema, } from './types/config-panel';
 export declare function initializeComponents(): boolean;
+export * from './debug';

package/dist/src/renderers/action/action-bar.d.ts

@@ -0,0 +1,23 @@
+import { ActionSchema, ActionLocation } from '../../../../types/src';
+export interface ActionBarSchema {
+    type: 'action:bar';
+    /** Actions to render */
+    actions?: ActionSchema[];
+    /** Filter actions by this location */
+    location?: ActionLocation;
+    /** Maximum visible inline actions before overflow into "More" menu (default: 3) */
+    maxVisible?: number;
+    /** Visibility condition expression */
+    visible?: string;
+    /** Layout direction */
+    direction?: 'horizontal' | 'vertical';
+    /** Gap between items (Tailwind gap class, default: 'gap-2') */
+    gap?: string;
+    /** Button variant for all actions (can be overridden per-action) */
+    variant?: string;
+    /** Button size for all actions (can be overridden per-action) */
+    size?: string;
+    /** Custom CSS class */
+    className?: string;
+    [key: string]: any;
+}

package/dist/src/types/config-panel.d.ts

@@ -0,0 +1,92 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Schema-driven config panel type definitions.
+ *
+ * Each concrete panel (View, Dashboard, Page…) provides a ConfigPanelSchema,
+ * and ConfigPanelRenderer auto-generates the UI.
+ */
+/** Supported control types for config fields */
+export type ControlType = 'input' | 'switch' | 'select' | 'checkbox' | 'slider' | 'color' | 'field-picker' | 'filter' | 'sort' | 'icon-group' | 'summary' | 'custom';
+/** A single field within a config section */
+export interface ConfigField {
+    /** Field key in the draft object */
+    key: string;
+    /** Display label (may be an i18n key) */
+    label: string;
+    /** Control type determining which widget to render */
+    type: ControlType;
+    /** Default value for the field */
+    defaultValue?: any;
+    /** Select/icon-group options */
+    options?: Array<{
+        value: string;
+        label: string;
+        icon?: React.ReactNode;
+    }>;
+    /** Visibility predicate evaluated against the current draft */
+    visibleWhen?: (draft: Record<string, any>) => boolean;
+    /** Disabled predicate evaluated against the current draft */
+    disabledWhen?: (draft: Record<string, any>) => boolean;
+    /** Custom render function for type='custom' */
+    render?: (value: any, onChange: (v: any) => void, draft: Record<string, any>) => React.ReactNode;
+    /** Placeholder text for input/select controls */
+    placeholder?: string;
+    /** Help text displayed below the control */
+    helpText?: string;
+    /** Minimum value for slider */
+    min?: number;
+    /** Maximum value for slider */
+    max?: number;
+    /** Step value for slider */
+    step?: number;
+    /** Whether the field is disabled */
+    disabled?: boolean;
+    /** Field definitions for filter/sort sub-editors */
+    fields?: Array<{
+        value: string;
+        label: string;
+        type?: string;
+        options?: Array<{
+            value: string;
+            label: string;
+        }>;
+    }>;
+    /** Summary display text for type='summary' */
+    summaryText?: string;
+    /** Click handler for the summary gear/action button (type='summary') */
+    onSummaryClick?: () => void;
+}
+/** A group of related config fields */
+export interface ConfigSection {
+    /** Unique section key (used for collapse state tracking) */
+    key: string;
+    /** Section title (may be an i18n key) */
+    title: string;
+    /** Hint text displayed below the title */
+    hint?: string;
+    /** Icon displayed before the section title (e.g. a Lucide icon element) */
+    icon?: React.ReactNode;
+    /** Whether this section supports collapse/expand */
+    collapsible?: boolean;
+    /** Default collapsed state */
+    defaultCollapsed?: boolean;
+    /** Fields belonging to this section */
+    fields: ConfigField[];
+    /** Nested sub-sections for complex grouping */
+    subsections?: ConfigSection[];
+    /** Visibility predicate evaluated against the current draft */
+    visibleWhen?: (draft: Record<string, any>) => boolean;
+}
+/** Top-level schema describing an entire config panel */
+export interface ConfigPanelSchema {
+    /** Breadcrumb segments displayed in the panel header */
+    breadcrumb: string[];
+    /** Ordered list of sections */
+    sections: ConfigSection[];
+}

package/dist/src/ui/sheet.d.ts

@@ -17,6 +17,8 @@ declare const sheetVariants: (props?: ({
     side?: "left" | "right" | "top" | "bottom" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, VariantProps<typeof sheetVariants> {
+    /** When true, the backdrop overlay is not rendered (useful for non-modal drawers) */
+    hideOverlay?: boolean;
 }
 declare const SheetContent: React.ForwardRefExoticComponent<SheetContentProps & React.RefAttributes<HTMLDivElement>>;
 declare const SheetHeader: {

package/dist/src/ui/sidebar.d.ts

@@ -16,6 +16,10 @@ type SidebarContextProps = {
     setOpenMobile: (open: boolean) => void;
     isMobile: boolean;
     toggleSidebar: () => void;
+    /** Current sidebar width in pixels (only used when resizable) */
+    sidebarWidth: number | null;
+    /** Update sidebar width (only used when resizable) */
+    setSidebarWidth: (width: number | null) => void;
 };
 declare function useSidebar(): SidebarContextProps;
 declare const SidebarProvider: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/components",
-  "version": "3.0.3",
+  "version": "3.1.0",
   "type": "module",
   "license": "MIT",
   "description": "Standard UI component library for Object UI, built with Shadcn UI + Tailwind CSS",
@@ -59,41 +59,41 @@
     "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.6.0",
     "input-otp": "^1.4.2",
-    "lucide-react": "^0.563.0",
+    "lucide-react": "^0.576.0",
     "next-themes": "^0.4.6",
-    "react-day-picker": "^9.13.2",
-    "react-hook-form": "^7.71.1",
-    "react-resizable-panels": "^4.6.3",
+    "react-day-picker": "^9.14.0",
+    "react-hook-form": "^7.71.2",
+    "react-resizable-panels": "^4.7.0",
     "recharts": "2.15.4",
     "sonner": "^2.0.7",
-    "tailwind-merge": "^3.4.0",
+    "tailwind-merge": "^3.5.0",
     "tailwindcss-animate": "^1.0.7",
     "vaul": "^1.1.2",
-    "@object-ui/core": "3.0.3",
-    "@object-ui/react": "3.0.3",
-    "@object-ui/types": "3.0.3"
+    "@object-ui/core": "3.1.0",
+    "@object-ui/react": "3.1.0",
+    "@object-ui/types": "3.1.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "tailwindcss": "^4.1.18"
+    "tailwindcss": "^4.2.1"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^8.6.14",
     "@storybook/addon-interactions": "^8.6.14",
-    "@storybook/addon-links": "^8.6.15",
+    "@storybook/addon-links": "^8.6.17",
     "@storybook/blocks": "^8.6.14",
     "@storybook/react": "^8.6.15",
     "@storybook/react-vite": "^8.6.15",
-    "@tailwindcss/postcss": "^4.1.18",
-    "@types/react": "19.2.13",
+    "@tailwindcss/postcss": "^4.2.1",
+    "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
     "@vitejs/plugin-react": "^5.1.4",
-    "autoprefixer": "^10.4.24",
+    "autoprefixer": "^10.4.27",
     "postcss": "^8.5.6",
-    "shadcn": "^3.8.4",
-    "storybook": "^8.6.15",
-    "tailwindcss": "^4.1.18",
+    "shadcn": "^3.8.5",
+    "storybook": "^8.6.17",
+    "tailwindcss": "^4.2.1",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4"

package/src/__tests__/__snapshots__/snapshot-critical.test.tsx.snap

@@ -460,7 +460,7 @@ exports[`Dialog snapshots > renders open dialog structure 1`] = `
   <div
     aria-describedby="radix-_r_2_"
     aria-labelledby="radix-_r_1_"
-    class="fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg"
+    class="fixed inset-0 z-50 grid w-full bg-background p-4 shadow-lg duration-200 h-[100dvh] sm:inset-auto sm:left-[50%] sm:top-[50%] sm:translate-x-[-50%] sm:translate-y-[-50%] sm:max-w-lg sm:h-auto sm:max-h-[90vh] sm:rounded-lg sm:border sm:p-6 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]"
     data-state="open"
     id="radix-_r_0_"
     role="dialog"
@@ -496,12 +496,12 @@ exports[`Dialog snapshots > renders open dialog structure 1`] = `
       </button>
     </div>
     <button
-      class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
+      class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground min-h-[44px] min-w-[44px] sm:min-h-0 sm:min-w-0 flex items-center justify-center"
       type="button"
     >
       <svg
         aria-hidden="true"
-        class="lucide lucide-x h-4 w-4"
+        class="lucide lucide-x h-5 w-5 sm:h-4 sm:w-4"
         fill="none"
         height="24"
         stroke="currentColor"