xertica-ui 2.5.2 → 2.6.0

package/components/ui/progress/progress.mdx

@@ -1,25 +1,25 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
-import * as ProgressStories from './progress.stories';
-
-<Meta of={ProgressStories} />
-
-<Title />
-<Subtitle>Displays an indicator showing the completion progress of a task.</Subtitle>
-
-<Description />
-
-<Primary />
-
----
-
-## Variations
-
-<Stories />
-
----
-
-## AI Best Practices
-
-> [!IMPORTANT]
-> - **Visual Feedback** — The progress bar animates its transition when the `value` prop changes.
-> - **Meaningful Values** — Ensure the progress bar reflects actual system state to avoid misleading users.
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
+import * as ProgressStories from './progress.stories';
+
+<Meta of={ProgressStories} />
+
+<Title />
+<Subtitle>Displays an indicator showing the completion progress of a task.</Subtitle>
+
+<Description />
+
+<Primary />
+
+---
+
+## Variations
+
+<Stories />
+
+---
+
+## AI Best Practices
+
+> [!IMPORTANT]
+> - **Visual Feedback** — The progress bar animates its transition when the `value` prop changes.
+> - **Meaningful Values** — Ensure the progress bar reflects actual system state to avoid misleading users.

package/components/ui/radio-group/radio-group.mdx

@@ -1,26 +1,26 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
-import * as RadioGroupStories from './radio-group.stories';
-
-<Meta of={RadioGroupStories} />
-
-<Title />
-<Subtitle>A set of mutually exclusive options where only one can be selected.</Subtitle>
-
-<Description />
-
-<Primary />
-
----
-
-## Variations
-
-<Stories />
-
----
-
-## AI Best Practices
-
-> [!IMPORTANT]
-> - **Exclusivity** — Only one radio button in a group can be selected at a time.
-> - **Matching Labels** — Always link `RadioGroupItem` to a `Label` using matching `id` and `htmlFor`.
-> - **Option Limit** — Use `RadioGroup` for 2–6 options. For larger lists, use `Select`.
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
+import * as RadioGroupStories from './radio-group.stories';
+
+<Meta of={RadioGroupStories} />
+
+<Title />
+<Subtitle>A set of mutually exclusive options where only one can be selected.</Subtitle>
+
+<Description />
+
+<Primary />
+
+---
+
+## Variations
+
+<Stories />
+
+---
+
+## AI Best Practices
+
+> [!IMPORTANT]
+> - **Exclusivity** — Only one radio button in a group can be selected at a time.
+> - **Matching Labels** — Always link `RadioGroupItem` to a `Label` using matching `id` and `htmlFor`.
+> - **Option Limit** — Use `RadioGroup` for 2–6 options. For larger lists, use `Select`.

package/components/ui/rating/rating.mdx

@@ -1,26 +1,26 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
-import * as RatingStories from './rating.stories';
-
-<Meta of={RatingStories} />
-
-<Title />
-<Subtitle>A star-based input for collecting feedback or displaying quality scores.</Subtitle>
-
-<Description />
-
-<Primary />
-
----
-
-## Variations
-
-<Stories />
-
----
-
-## AI Best Practices
-
-> [!IMPORTANT]
-> - **Input Pattern** — Always use the `value` and `onChange` pattern instead of spreading field props in forms.
-> - **Display Mode** — Use the `readOnly` prop for non-interactive score displays to preserve proper styling and accessibility.
-> - **Size Consistency** — Use `sm` for table rows and `md` or `lg` for feedback forms.
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
+import * as RatingStories from './rating.stories';
+
+<Meta of={RatingStories} />
+
+<Title />
+<Subtitle>A star-based input for collecting feedback or displaying quality scores.</Subtitle>
+
+<Description />
+
+<Primary />
+
+---
+
+## Variations
+
+<Stories />
+
+---
+
+## AI Best Practices
+
+> [!IMPORTANT]
+> - **Input Pattern** — Always use the `value` and `onChange` pattern instead of spreading field props in forms.
+> - **Display Mode** — Use the `readOnly` prop for non-interactive score displays to preserve proper styling and accessibility.
+> - **Size Consistency** — Use `sm` for table rows and `md` or `lg` for feedback forms.

package/components/ui/resizable/resizable.mdx

@@ -1,26 +1,26 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
-import * as ResizableStories from './resizable.stories';
-
-<Meta of={ResizableStories} />
-
-<Title />
-<Subtitle>A flexible layout system for resizable sidebars and panels.</Subtitle>
-
-<Description />
-
-<Primary />
-
----
-
-## Variations
-
-<Stories />
-
----
-
-## AI Best Practices
-
-> [!IMPORTANT]
-> - **Mandatory Direction** — You must specify either `horizontal` or `vertical` for the `ResizablePanelGroup`.
-> - **Size Summation** — The `defaultSize` values for all sibling panels in a group must sum exactly to 100.
-> - **Height Constraints** — Vertical resizable groups require an explicit height (e.g., `h-full` or `min-h-[400px]`) on the container to avoid collapsing.
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
+import * as ResizableStories from './resizable.stories';
+
+<Meta of={ResizableStories} />
+
+<Title />
+<Subtitle>A flexible layout system for resizable sidebars and panels.</Subtitle>
+
+<Description />
+
+<Primary />
+
+---
+
+## Variations
+
+<Stories />
+
+---
+
+## AI Best Practices
+
+> [!IMPORTANT]
+> - **Mandatory Direction** — You must specify either `horizontal` or `vertical` for the `ResizablePanelGroup`.
+> - **Size Summation** — The `defaultSize` values for all sibling panels in a group must sum exactly to 100.
+> - **Height Constraints** — Vertical resizable groups require an explicit height (e.g., `h-full` or `min-h-[400px]`) on the container to avoid collapsing.

package/components/ui/resizable/resizable.tsx

@@ -50,13 +50,18 @@ const ResizableContext = React.createContext<ResizableContextType | null>(null);
  * 2. Configure `defaultSize` as a percentage (not pixels): e.g., `defaultSize={50}` for a 50/50 split.
  * 3. Use `minSize` and `maxSize` (also percentages) to constrain draggable bounds.
  */
+interface PanelGroupStorage {
+  getItem: (name: string) => string | null;
+  setItem: (name: string, value: string) => void;
+}
+
 const ResizablePanelGroup = ({
   children,
   className,
   direction = 'horizontal',
-  id,
-  autoSaveId,
-  storage,
+  id: _id,
+  autoSaveId: _autoSaveId,
+  storage: _storage,
   onLayout,
   ...props
 }: {
@@ -65,7 +70,7 @@ const ResizablePanelGroup = ({
   direction?: 'horizontal' | 'vertical';
   id?: string;
   autoSaveId?: string;
-  storage?: any;
+  storage?: PanelGroupStorage;
   onLayout?: (sizes: number[]) => void;
 } & React.HTMLAttributes<HTMLDivElement>) => {
   const [panels, setPanels] = React.useState<Map<string, PanelData>>(new Map());
@@ -312,12 +317,12 @@ const ResizablePanel = ({
   minSize = 0,
   maxSize = 100,
   collapsible,
-  collapsedSize,
+  collapsedSize: _collapsedSize,
   onCollapse,
   onExpand,
   onResize,
-  order,
-  tagName,
+  order: _order,
+  tagName: _tagName,
   id: propId,
   children,
   ...props
@@ -394,7 +399,7 @@ const ResizableHandle = ({
   withHandle,
   className,
   id: propId,
-  tagName,
+  tagName: _tagName,
   ...props
 }: {
   withHandle?: boolean;

package/components/ui/rich-text-editor/rich-text-editor.mdx

@@ -1,47 +1,47 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
-import * as RichTextEditorStories from './rich-text-editor.stories';
-
-<Meta of={RichTextEditorStories} />
-
-<Title />
-<Subtitle>A lightweight, native WYSIWYG editor for structured document creation and AI-assisted workflows.</Subtitle>
-
-<Description />
-
-<Primary />
-
----
-
-## Usage Patterns
-
-### Standard Editor
-Features a comprehensive toolbar with Undo/Redo, heading selection, text formatting, and alignment controls.
-
-<Canvas of={RichTextEditorStories.Default} />
-
-### In Side Panel (Assistant Workspace)
-When used within a restricted space, the editor can be styled without external borders and shadows to sit flush within its container.
-
-<Canvas of={RichTextEditorStories.InSidePanel} />
-
----
-
-## Features
-
-- **Format Control:** Paragraph, H1, H2, H3 via Radix Dropdown.
-- **Rich Text:** Bold, Italic, Underline.
-- **Lists:** Unordered (bullet) and Ordered (numbered) support.
-- **Alignment:** Left, Center, and Right justification.
-- **History:** Native Undo and Redo operations.
-- **Extensive Configuration:** Toggle virtually every feature on/off via props (\`allowUndoRedo\`, \`allowHeadings\`, \`allowFormatting\`, \`allowAlignment\`, \`allowLists\`, \`allowSearch\`, \`allowLinks\`).
-- **Live Metrics:** Word and character count natively supported and toggleable (\`showWordCount\`, \`showCharacterCount\`).
-- **Toolbar Extensibility:** Inject custom buttons (e.g. "Save") via the `actionButton` prop.
-
----
-
-## AI Best Practices
-
-> [!IMPORTANT]
-> - **Initial Value Only** — The `value` prop is used to mount the initial content. To avoid cursor jumps, do not force-update the `value` prop continuously from an external state while the user is typing; instead, capture changes via the `onChange` callback.
-> - **Toolbar Actions** — Use the `actionButton` prop to inject primary actions directly into the editor's toolbar for better visibility and a "Premium" feel.
-
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
+import * as RichTextEditorStories from './rich-text-editor.stories';
+
+<Meta of={RichTextEditorStories} />
+
+<Title />
+<Subtitle>A lightweight, native WYSIWYG editor for structured document creation and AI-assisted workflows.</Subtitle>
+
+<Description />
+
+<Primary />
+
+---
+
+## Usage Patterns
+
+### Standard Editor
+Features a comprehensive toolbar with Undo/Redo, heading selection, text formatting, and alignment controls.
+
+<Canvas of={RichTextEditorStories.Default} />
+
+### In Side Panel (Assistant Workspace)
+When used within a restricted space, the editor can be styled without external borders and shadows to sit flush within its container.
+
+<Canvas of={RichTextEditorStories.InSidePanel} />
+
+---
+
+## Features
+
+- **Format Control:** Paragraph, H1, H2, H3 via Radix Dropdown.
+- **Rich Text:** Bold, Italic, Underline.
+- **Lists:** Unordered (bullet) and Ordered (numbered) support.
+- **Alignment:** Left, Center, and Right justification.
+- **History:** Native Undo and Redo operations.
+- **Extensive Configuration:** Toggle virtually every feature on/off via props (\`allowUndoRedo\`, \`allowHeadings\`, \`allowFormatting\`, \`allowAlignment\`, \`allowLists\`, \`allowSearch\`, \`allowLinks\`).
+- **Live Metrics:** Word and character count natively supported and toggleable (\`showWordCount\`, \`showCharacterCount\`).
+- **Toolbar Extensibility:** Inject custom buttons (e.g. "Save") via the `actionButton` prop.
+
+---
+
+## AI Best Practices
+
+> [!IMPORTANT]
+> - **Initial Value Only** — The `value` prop is used to mount the initial content. To avoid cursor jumps, do not force-update the `value` prop continuously from an external state while the user is typing; instead, capture changes via the `onChange` callback.
+> - **Toolbar Actions** — Use the `actionButton` prop to inject primary actions directly into the editor's toolbar for better visibility and a "Premium" feel.
+

package/components/ui/route-map/route-map.mdx

@@ -1,26 +1,26 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
-import * as RouteMapStories from './route-map.stories';
-
-<Meta of={RouteMapStories} />
-
-<Title />
-<Subtitle>A specialized map for calculating and displaying routes between locations.</Subtitle>
-
-<Description />
-
-<Primary />
-
----
-
-## Variations
-
-<Stories />
-
----
-
-## AI Best Practices
-
-> [!IMPORTANT]
-> - **Directions API Required** — The configured `apiKey` must have the Directions API enabled in the Google Cloud Console for routes to calculate.
-> - **Pre-formatted Feedback** — The `onRouteCalculated` callback returns human-readable strings (e.g., `"12.4 km"`, `"23 min"`) for direct display in the UI.
-> - **Coordinate Precision** — Use standard `{ lat, lng }` literals for all points; ensure the path is bounded by an explicit `height` prop.
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
+import * as RouteMapStories from './route-map.stories';
+
+<Meta of={RouteMapStories} />
+
+<Title />
+<Subtitle>A specialized map for calculating and displaying routes between locations.</Subtitle>
+
+<Description />
+
+<Primary />
+
+---
+
+## Variations
+
+<Stories />
+
+---
+
+## AI Best Practices
+
+> [!IMPORTANT]
+> - **Directions API Required** — The configured `apiKey` must have the Directions API enabled in the Google Cloud Console for routes to calculate.
+> - **Pre-formatted Feedback** — The `onRouteCalculated` callback returns human-readable strings (e.g., `"12.4 km"`, `"23 min"`) for direct display in the UI.
+> - **Coordinate Precision** — Use standard `{ lat, lng }` literals for all points; ensure the path is bounded by an explicit `height` prop.

package/components/ui/scroll-area/scroll-area.mdx

@@ -1,25 +1,25 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
-import * as ScrollAreaStories from './scroll-area.stories';
-
-<Meta of={ScrollAreaStories} />
-
-<Title />
-<Subtitle>Custom scrollbar styling for consistent cross-browser scrolling.</Subtitle>
-
-<Description />
-
-<Primary />
-
----
-
-## Variations
-
-<Stories />
-
----
-
-## AI Best Practices
-
-> [!IMPORTANT]
-> - **Height Constraints** — `ScrollArea` requires an explicit height (e.g., `h-72` or `h-full`) on the component via `className` to function correctly.
-> - **Design Consistency** — Prefer `ScrollArea` over native `overflow-y-auto` for UI-critical scrollbars to ensure they match the application theme.
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
+import * as ScrollAreaStories from './scroll-area.stories';
+
+<Meta of={ScrollAreaStories} />
+
+<Title />
+<Subtitle>Custom scrollbar styling for consistent cross-browser scrolling.</Subtitle>
+
+<Description />
+
+<Primary />
+
+---
+
+## Variations
+
+<Stories />
+
+---
+
+## AI Best Practices
+
+> [!IMPORTANT]
+> - **Height Constraints** — `ScrollArea` requires an explicit height (e.g., `h-72` or `h-full`) on the component via `className` to function correctly.
+> - **Design Consistency** — Prefer `ScrollArea` over native `overflow-y-auto` for UI-critical scrollbars to ensure they match the application theme.

package/components/ui/search/search.mdx

@@ -1,27 +1,27 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
-import * as SearchStories from './search.stories';
-
-<Meta of={SearchStories} />
-
-<Title />
-<Subtitle>A pre-configured search input with built-in icons and clear functionality.</Subtitle>
-
-<Description />
-
-<Primary />
-
----
-
-## Variations
-
-<Stories />
-
----
-
-## AI Best Practices
-
-> [!IMPORTANT]
-> - **Convenience Wrapper** — Always prefer the `Search` component over a manual `Input + Icon` composition for standard search fields.
-> - **Clearing State** — Provide an `onClear` handler to improve UX for users searching for multiple terms.
-> - **Standardized Sizing** — Use the `size` prop to ensure search fields align with other form inputs in the same view.
-
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
+import * as SearchStories from './search.stories';
+
+<Meta of={SearchStories} />
+
+<Title />
+<Subtitle>A pre-configured search input with built-in icons and clear functionality.</Subtitle>
+
+<Description />
+
+<Primary />
+
+---
+
+## Variations
+
+<Stories />
+
+---
+
+## AI Best Practices
+
+> [!IMPORTANT]
+> - **Convenience Wrapper** — Always prefer the `Search` component over a manual `Input + Icon` composition for standard search fields.
+> - **Clearing State** — Provide an `onClear` handler to improve UX for users searching for multiple terms.
+> - **Standardized Sizing** — Use the `size` prop to ensure search fields align with other form inputs in the same view.
+

package/components/ui/select/select.mdx

@@ -1,26 +1,26 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
-import * as SelectStories from './select.stories';
-
-<Meta of={SelectStories} />
-
-<Title />
-<Subtitle>A styled dropdown for selecting a single option from a list.</Subtitle>
-
-<Description />
-
-<Primary />
-
----
-
-## Variations
-
-<Stories />
-
----
-
-## AI Best Practices
-
-> [!IMPORTANT]
-> - **Only One Choice** — Use `Select` for single choosing from 5+ options.
-> - **Anatomy** — Always include `SelectValue` inside the `SelectTrigger`.
-> - **Values** — `SelectItem` values must be unique and non-empty strings.
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
+import * as SelectStories from './select.stories';
+
+<Meta of={SelectStories} />
+
+<Title />
+<Subtitle>A styled dropdown for selecting a single option from a list.</Subtitle>
+
+<Description />
+
+<Primary />
+
+---
+
+## Variations
+
+<Stories />
+
+---
+
+## AI Best Practices
+
+> [!IMPORTANT]
+> - **Only One Choice** — Use `Select` for single choosing from 5+ options.
+> - **Anatomy** — Always include `SelectValue` inside the `SelectTrigger`.
+> - **Values** — `SelectItem` values must be unique and non-empty strings.

package/components/ui/separator/separator.mdx

@@ -1,25 +1,25 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
-import * as SeparatorStories from './separator.stories';
-
-<Meta of={SeparatorStories} />
-
-<Title />
-<Subtitle>Visually or semantically separates content.</Subtitle>
-
-<Description />
-
-<Primary />
-
----
-
-## Variations
-
-<Stories />
-
----
-
-## AI Best Practices
-
-> [!IMPORTANT]
-> - **Orientation** — Use `orientation="vertical"` for inline separators.
-> - **Spacing** — Add margins via `className` to control the gap around the separator.
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
+import * as SeparatorStories from './separator.stories';
+
+<Meta of={SeparatorStories} />
+
+<Title />
+<Subtitle>Visually or semantically separates content.</Subtitle>
+
+<Description />
+
+<Primary />
+
+---
+
+## Variations
+
+<Stories />
+
+---
+
+## AI Best Practices
+
+> [!IMPORTANT]
+> - **Orientation** — Use `orientation="vertical"` for inline separators.
+> - **Spacing** — Add margins via `className` to control the gap around the separator.