@ttoss/components 2.12.4 → 2.12.6

package/README.md

@@ -8,38 +8,59 @@ React components for the ttoss ecosystem. **ESM only** package.
 pnpm add @ttoss/components @ttoss/ui @emotion/react @ttoss/react-hooks
 ```
 
-**📖 [View all components in Storybook](https://storybook.ttoss.dev/?path=/docs/components-accordion--docs)**
+[View all components in Storybook](https://storybook.ttoss.dev/?path=/docs/components-accordion--docs)
 
-## Components Overview
+## Components
 
 All components are theme-aware and integrate seamlessly with `@ttoss/ui`.
 
 ### Accordion
 
-Collapsible content sections. [📖 Docs](https://storybook.ttoss.dev/?path=/docs/components-accordion--docs)
+Accessible accordion component with collapsible content sections. [Docs](https://storybook.ttoss.dev/?path=/docs/components-accordion--docs)
 
 ```tsx
-import {
-  Accordion,
-  AccordionItem,
-  AccordionItemButton,
-  AccordionItemHeading,
-  AccordionItemPanel,
-} from '@ttoss/components/Accordion';
-
-<Accordion allowMultipleExpanded>
-  <AccordionItem>
-    <AccordionItemHeading>
-      <AccordionItemButton>Section Title</AccordionItemButton>
-    </AccordionItemHeading>
-    <AccordionItemPanel>Section content</AccordionItemPanel>
-  </AccordionItem>
-</Accordion>;
+import { Accordion } from '@ttoss/components/Accordion';
+
+<Accordion
+  items={[
+    {
+      title: 'Section 1',
+      content: 'Content for section 1',
+    },
+    {
+      title: 'Section 2',
+      content: 'Content for section 2',
+    },
+  ]}
+/>;
+```
+
+### DatePicker
+
+Date range picker with presets and mobile support. [Docs](https://storybook.ttoss.dev/?path=/docs/components-datepicker--docs)
+
+```tsx
+import { DatePicker } from '@ttoss/components/DatePicker';
+
+<DatePicker
+  label="Select period"
+  value={dateRange}
+  onChange={setDateRange}
+  presets={[
+    {
+      label: 'Last 7 days',
+      getValue: () => ({
+        from: subDays(new Date(), 7),
+        to: new Date(),
+      }),
+    },
+  ]}
+/>;
 ```
 
 ### Drawer
 
-Slide-out panels from screen edges. [📖 Docs](https://storybook.ttoss.dev/?path=/docs/components-drawer--docs)
+Slide-out panels from screen edges. [Docs](https://storybook.ttoss.dev/?path=/docs/components-drawer--docs)
 
 ```tsx
 import { Drawer } from '@ttoss/components/Drawer';
@@ -49,65 +70,56 @@ import { Drawer } from '@ttoss/components/Drawer';
 </Drawer>;
 ```
 
+### EnhancedTitle
+
+Structured title section with icon, badges, and metadata. [Docs](https://storybook.ttoss.dev/?path=/docs/components-enhancedtitle--docs)
+
+```tsx
+import { EnhancedTitle } from '@ttoss/components/EnhancedTitle';
+
+<EnhancedTitle
+  icon="fluent:shield-24-filled"
+  title="Starter Plan"
+  frontTitle="$49.90/mo"
+  description="Perfect for small teams"
+  variant="primary"
+  topBadges={[
+    {
+      label: 'Active',
+      variant: 'positive',
+      icon: 'fluent:checkmark-circle-24-filled',
+    },
+  ]}
+  bottomBadges={[
+    { label: 'OneClick Tracking', icon: 'fluent:checkmark-24-filled' },
+  ]}
+/>;
+```
+
 ### FileUploader
 
-Controlled file uploader with drag-and-drop support. Displays uploaded files with previews, clickable links, and remove functionality. [📖 Docs](https://storybook.ttoss.dev/?path=/docs/components-fileuploader--docs)
+Controlled file uploader with drag-and-drop, previews, and validation. [Docs](https://storybook.ttoss.dev/?path=/docs/components-fileuploader--docs)
 
 ```tsx
 import { FileUploader } from '@ttoss/components/FileUploader';
-import { useState } from 'react';
-
-const [files, setFiles] = useState([
-  {
-    id: 'file-1',
-    name: 'document.pdf',
-    url: 'https://example.com/files/document.pdf',
-  },
-  {
-    id: 'file-2',
-    name: 'image.jpg',
-    imageUrl: 'https://example.com/images/thumb.jpg', // Optional preview
-    url: 'https://example.com/files/image.jpg',
-  },
-]);
 
 <FileUploader
-  // Required: Upload handler
   onUpload={async (file, onProgress) => {
-    // Your upload logic here
-    onProgress?.(50); // Report progress
     const result = await uploadToServer(file);
     return { url: result.url, id: result.id, name: result.name };
   }}
-  // Controlled files list
   files={files}
-  // Callbacks
-  onUploadComplete={(file, result) => {
-    setFiles([...files, { id: result.id, name: file.name, url: result.url }]);
-  }}
-  onRemove={(file, index) => {
-    setFiles(files.filter((_, i) => i !== index));
-  }}
-  // Optional: Validation
+  onUploadComplete={(file, result) => setFiles([...files, result])}
+  onRemove={(file, index) => setFiles(files.filter((_, i) => i !== index))}
   accept="image/*,.pdf"
-  maxSize={10 * 1024 * 1024} // 10MB
+  maxSize={10 * 1024 * 1024}
   maxFiles={5}
 />;
 ```
 
-**Key Features:**
-
-- **Controlled component**: Pass `files` prop to display uploaded files
-- **Clickable file names**: Names are links that open the file URL
-- **Image previews**: Show thumbnails when `imageUrl` is provided
-- **Remove functionality**: Each file has a remove button
-- **Upload callbacks**: `onUploadStart`, `onUploadProgress`, `onUploadComplete`, `onUploadError`
-- **Validation**: File type, size, and quantity limits
-- **Drag-and-drop**: Native drag-and-drop support
-
 ### InstallPwa
 
-PWA installation prompt component. [📖 Docs](https://storybook.ttoss.dev/?path=/docs/components-installpwa--docs)
+PWA installation prompt component.
 
 ```tsx
 import { InstallPwa } from '@ttoss/components/InstallPwa';
@@ -117,7 +129,7 @@ import { InstallPwa } from '@ttoss/components/InstallPwa';
 
 ### JsonEditor
 
-JSON editor component. Re-exports from [json-edit-react](https://carlosdevpereira.github.io/json-edit-react/). [📖 Docs](https://storybook.ttoss.dev/?path=/docs/components-jsoneditor--docs)
+JSON editor component. Re-exports from [json-edit-react](https://carlosdevpereira.github.io/json-edit-react/). [Docs](https://storybook.ttoss.dev/?path=/docs/components-jsoneditor--docs)
 
 ```tsx
 import { JsonEditor } from '@ttoss/components/JsonEditor';
@@ -127,7 +139,7 @@ import { JsonEditor } from '@ttoss/components/JsonEditor';
 
 ### JsonView
 
-JSON viewer component. Re-exports from [react-json-view-lite](https://github.com/AnyRoad/react-json-view-lite). [📖 Docs](https://storybook.ttoss.dev/?path=/docs/components-jsonview--docs)
+JSON viewer component. Re-exports from [react-json-view-lite](https://github.com/AnyRoad/react-json-view-lite).
 
 ```tsx
 import { JsonView } from '@ttoss/components/JsonView';
@@ -137,7 +149,7 @@ import { JsonView } from '@ttoss/components/JsonView';
 
 ### List
 
-Unordered lists with customizable items. [📖 Docs](https://storybook.ttoss.dev/?path=/docs/components-list--docs)
+Unordered lists with customizable items. [Docs](https://storybook.ttoss.dev/?path=/docs/components-list--docs)
 
 ```tsx
 import { List, ListItem } from '@ttoss/components/List';
@@ -150,12 +162,11 @@ import { List, ListItem } from '@ttoss/components/List';
 
 ### LockedOverlay
 
-Block and display locked features or restricted content within a container. Unlike modals, overlays block only their parent container. [📖 Docs](https://storybook.ttoss.dev/?path=/docs/components-lockedoverlay--docs)
+Block and display locked features or restricted content within a container. Unlike modals, overlays block only their parent container. [Docs](https://storybook.ttoss.dev/?path=/docs/components-lockedoverlay--docs)
 
 ```tsx
 import { LockedOverlay } from '@ttoss/components/LockedOverlay';
 
-// Parent must have position: relative
 <Box sx={{ position: 'relative' }}>
   <LockedOverlay
     isOpen={isOpen}
@@ -182,7 +193,7 @@ import { LockedOverlay } from '@ttoss/components/LockedOverlay';
 
 ### Markdown
 
-Render markdown content with theme integration. [📖 Docs](https://storybook.ttoss.dev/?path=/docs/components-markdown--docs)
+Render markdown content with theme integration. [Docs](https://storybook.ttoss.dev/?path=/docs/components-markdown--docs)
 
 ```tsx
 import { Markdown } from '@ttoss/components/Markdown';
@@ -198,7 +209,7 @@ import { Markdown } from '@ttoss/components/Markdown';
 
 ### Menu
 
-Dropdown menus with customizable triggers. [📖 Docs](https://storybook.ttoss.dev/?path=/docs/components-menu--docs)
+Dropdown menus with customizable triggers. [Docs](https://storybook.ttoss.dev/?path=/docs/components-menu--docs)
 
 ```tsx
 import { Menu } from '@ttoss/components/Menu';
@@ -209,95 +220,44 @@ import { Menu } from '@ttoss/components/Menu';
 </Menu>;
 ```
 
+### MetricCard
+
+Display metrics with progress visualization, status indicators, and contextual information. [Docs](https://storybook.ttoss.dev/?path=/docs/components-metriccard--docs)
+
+```tsx
+import { MetricCard } from '@ttoss/components/MetricCard';
+
+<MetricCard
+  metric={{
+    type: 'number',
+    value: 8,
+    max: 10,
+    label: 'Active Users',
+    icon: 'mdi:account-group',
+  }}
+/>;
+```
+
 ### NavList
 
-Navigation lists for sidebars, menus, and dropdowns with icons, grouping, and routing integration. [📖 Docs](https://storybook.ttoss.dev/?path=/docs/components-navlist--docs)
+Navigation lists for sidebars, menus, and dropdowns with icons, grouping, and routing integration. [Docs](https://storybook.ttoss.dev/?path=/docs/components-navlist--docs)
 
 ```tsx
 import { NavList } from '@ttoss/components/NavList';
 
-// Simple navigation
 <NavList
   items={[
     { id: '1', label: 'Home', href: '/', icon: 'mdi:home' },
     { id: '2', label: 'Profile', href: '/profile', icon: 'mdi:account' },
-    { id: '3', label: 'Settings', href: '/settings', icon: 'mdi:cog' },
   ]}
   variant="sidebar"
-/>
-
-// With groups
-<NavList
-  groups={[
-    {
-      id: 'main',
-      label: 'Main Menu',
-      items: [
-        { id: '1', label: 'Dashboard', href: '/dashboard', icon: 'mdi:view-dashboard' },
-        { id: '2', label: 'Analytics', href: '/analytics', icon: 'mdi:chart-line' },
-      ],
-    },
-    {
-      id: 'settings',
-      label: 'Settings',
-      items: [
-        { id: '3', label: 'Account', href: '/account', icon: 'mdi:account-cog' },
-      ],
-      divider: true, // Divider after group
-    },
-  ]}
-/>
-
-// With Next.js routing
-import NextLink from 'next/link';
-
-<NavList
-  items={items}
   LinkComponent={NextLink}
-  onItemClick={(item) => console.log('Clicked:', item)}
-/>
-
-// Custom Link Component
-// IMPORTANT: Always spread {...props} to preserve styling
-// React Router example (uses 'to' instead of 'href')
-import { Link as RouterLink } from 'react-router-dom';
-
-const ReactRouterLink = ({
-  href,
-  children,
-  ...props
-}: React.PropsWithChildren<LinkComponentProps>) => {
-  return (
-    <RouterLink
-      to={href}
-      {...props} // Required to preserve NavList styles
-    >
-      {children}
-    </RouterLink>
-  );
-};
-
-<NavList items={items} LinkComponent={ReactRouterLink} />
+/>;
 ```
 
-**Variants:**
-
-- `sidebar` - Sidebar navigation with larger icons (20px) and generous spacing
-- `menu` - Card-based menu with hover animations (18px icons)
-- `dropdown` - Compact dropdown with subtle borders (16px icons)
-
-**Features:**
-
-- **Auto-grouping** - Items automatically group by `group` property
-- **Active states** - Highlight active items with `active` prop
-- **Disabled items** - Prevent interaction with `disabled` prop
-- **Dividers** - Visual separators with `divider` prop on items or groups
-- **Icon support** - 200k+ icons via `@ttoss/react-icons`
-- **Custom routing** - Compatible with Next.js, React Router via `LinkComponent`
-
 ### Modal
 
-Theme-aware modals with accessibility features. [📖 Docs](https://storybook.ttoss.dev/?path=/docs/components-modal--docs)
+Theme-aware modals with accessibility features. [Docs](https://storybook.ttoss.dev/?path=/docs/components-modal--docs)
 
 ```tsx
 import { Modal } from '@ttoss/components/Modal';
@@ -313,7 +273,7 @@ import { Modal } from '@ttoss/components/Modal';
 
 ### NotificationCard
 
-Display notification messages with actions. [📖 Docs](https://storybook.ttoss.dev/?path=/docs/components-notificationcard--docs)
+Display notification messages with actions. [Docs](https://storybook.ttoss.dev/?path=/docs/components-notificationcard--docs)
 
 ```tsx
 import { NotificationCard } from '@ttoss/components/NotificationCard';
@@ -327,7 +287,7 @@ import { NotificationCard } from '@ttoss/components/NotificationCard';
 
 ### NotificationsMenu
 
-Menu component for displaying notifications. [📖 Docs](https://storybook.ttoss.dev/?path=/docs/components-notificationsmenu--docs)
+Menu component for displaying notifications. [Docs](https://storybook.ttoss.dev/?path=/docs/components-notificationsmenu--docs)
 
 ```tsx
 import { NotificationsMenu } from '@ttoss/components/NotificationsMenu';
@@ -340,7 +300,7 @@ import { NotificationsMenu } from '@ttoss/components/NotificationsMenu';
 
 ### Search
 
-Debounced search input with loading states. [📖 Docs](https://storybook.ttoss.dev/?path=/docs/components-search--docs)
+Debounced search input with loading states. [Docs](https://storybook.ttoss.dev/?path=/docs/components-search--docs)
 
 ```tsx
 import { Search } from '@ttoss/components/Search';
@@ -353,9 +313,25 @@ import { Search } from '@ttoss/components/Search';
 />;
 ```
 
+### SpotlightCard
+
+Interactive card with spotlight effect, icon, and action buttons. [Docs](https://storybook.ttoss.dev/?path=/docs/components-spotlightcard--docs)
+
+```tsx
+import { SpotlightCard } from '@ttoss/components/SpotlightCard';
+
+<SpotlightCard
+  icon="mdi:rocket-launch"
+  title="Launch Product"
+  description="Deploy your product to production"
+  primaryButton={{ label: 'Deploy', onClick: handleDeploy }}
+  secondaryButton={{ label: 'Preview', onClick: handlePreview }}
+/>;
+```
+
 ### Table
 
-Flexible tables with sorting and pagination. Uses [TanStack Table](https://tanstack.com/table/latest). [📖 Docs](https://storybook.ttoss.dev/?path=/docs/components-table--docs)
+Flexible tables with sorting and pagination. Uses [TanStack Table](https://tanstack.com/table/latest). [Docs](https://storybook.ttoss.dev/?path=/docs/components-table--docs)
 
 ```tsx
 import {
@@ -364,14 +340,12 @@ import {
   createColumnHelper,
 } from '@ttoss/components/Table';
 
-const columns = [
-  columnHelper.accessor('name', { header: 'Name' }),
-  columnHelper.accessor('email', { header: 'Email' }),
-];
-
 const table = useReactTable({
   data,
-  columns,
+  columns: [
+    columnHelper.accessor('name', { header: 'Name' }),
+    columnHelper.accessor('email', { header: 'Email' }),
+  ],
   getCoreRowModel: getCoreRowModel(),
 });
 
@@ -403,7 +377,7 @@ const table = useReactTable({
 
 ### Tabs
 
-Tab navigation with content panels. [📖 Docs](https://storybook.ttoss.dev/?path=/docs/components-tabs--docs)
+Tab navigation with content panels. [Docs](https://storybook.ttoss.dev/?path=/docs/components-tabs--docs)
 
 ```tsx
 import { Tabs } from '@ttoss/components/Tabs';
@@ -422,7 +396,7 @@ import { Tabs } from '@ttoss/components/Tabs';
 
 ### Toast
 
-Toast notification system. [📖 Docs](https://storybook.ttoss.dev/?path=/docs/components-toast--docs)
+Toast notification system. [Docs](https://storybook.ttoss.dev/?path=/docs/components-toast--docs)
 
 ```tsx
 import { Toast } from '@ttoss/components/Toast';
@@ -434,7 +408,3 @@ import { Toast } from '@ttoss/components/Toast';
   onClose={() => setIsOpen(false)}
 />;
 ```
-
-```
-
-```

package/dist/Accordion/index.d.ts

@@ -1,16 +1,148 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { BoxProps } from '@ttoss/ui';
-export { AccordionItem, AccordionItemButton, AccordionItemHeading, AccordionItemPanel } from 'react-accessible-accordion';
+import * as React from 'react';
 
+/**
+ * Individual item for the Accordion component.
+ */
+type AccordionItem = {
+    /**
+     * Unique identifier for the accordion item.
+     * If not provided, will use the index as the key.
+     */
+    id?: string;
+    /**
+     * Title displayed in the accordion header.
+     */
+    title: React.ReactNode;
+    /**
+     * Content displayed when the accordion item is expanded.
+     */
+    content: React.ReactNode;
+    /**
+     * Whether the item is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+};
+/**
+ * Render props for custom accordion item rendering.
+ */
+type AccordionRenderItemProps = {
+    /**
+     * The accordion item data.
+     */
+    item: AccordionItem;
+    /**
+     * Index of the item in the items array.
+     */
+    index: number;
+    /**
+     * Whether the item is currently expanded.
+     */
+    isExpanded: boolean;
+    /**
+     * Function to toggle the item's expanded state.
+     */
+    toggle: () => void;
+    /**
+     * Generated IDs for accessibility.
+     */
+    ids: {
+        itemId: string;
+        headingId: string;
+        panelId: string;
+    };
+};
+/**
+ * Props for the Accordion component.
+ */
 type AccordionProps = BoxProps & {
-    allowMultipleExpanded?: boolean;
-    allowZeroExpanded?: boolean;
-    preExpanded?: string[];
     /**
-     * Callback which is invoked when items are expanded or collapsed. Gets passed uuids of the currently expanded AccordionItems.
+     * Array of accordion items to render.
+     */
+    items: AccordionItem[];
+    /**
+     * Whether multiple items can be expanded at once.
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * Index or array of indices for initially expanded items.
+     */
+    defaultExpanded?: number | number[];
+    /**
+     * Callback invoked when items are expanded or collapsed.
+     * Receives array of currently expanded indices.
+     */
+    onAccordionChange?: (expandedIndices: number[]) => void;
+    /**
+     * Custom render function for accordion items.
+     * Provides full control over item rendering while maintaining accessibility.
      */
-    onChange?: (args: string[]) => void;
+    renderItem?: (props: AccordionRenderItemProps) => React.ReactNode;
 };
-declare const Accordion: ({ children, allowMultipleExpanded, allowZeroExpanded, preExpanded, onChange, ...boxProps }: AccordionProps) => react_jsx_runtime.JSX.Element;
+/**
+ * Accessible accordion component with collapsible content sections.
+ *
+ * This component provides a simplified API for creating expandable/collapsible
+ * content sections. It uses design tokens from @ttoss/theme for consistent styling
+ * and follows WAI-ARIA accordion pattern for accessibility.
+ *
+ * @example
+ * ```tsx
+ * <Accordion
+ *   items={[
+ *     {
+ *       title: 'Section 1',
+ *       content: 'Content for section 1',
+ *     },
+ *     {
+ *       title: 'Section 2',
+ *       content: 'Content for section 2',
+ *     },
+ *   ]}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Accordion
+ *   multiple
+ *   defaultExpanded={[0, 1]}
+ *   items={[
+ *     {
+ *       id: 'item-1',
+ *       title: 'Pre-expanded Section 1',
+ *       content: <div>Rich content</div>,
+ *     },
+ *     {
+ *       id: 'item-2',
+ *       title: 'Pre-expanded Section 2',
+ *       content: <p>More content</p>,
+ *     },
+ *   ]}
+ *   onAccordionChange={(expanded) => console.log('Expanded items:', expanded)}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Custom rendering with renderItem
+ * <Accordion
+ *   items={items}
+ *   renderItem={({ item, isExpanded, toggle, ids }) => (
+ *     <CustomAccordionItem
+ *       item={item}
+ *       isExpanded={isExpanded}
+ *       onToggle={toggle}
+ *       headingId={ids.headingId}
+ *       panelId={ids.panelId}
+ *     />
+ *   )}
+ * />
+ * ```
+ */
+declare const Accordion: ({ items, multiple, defaultExpanded, onAccordionChange, renderItem, sx, ...boxProps }: AccordionProps) => react_jsx_runtime.JSX.Element;
 
-export { Accordion, type AccordionProps };
+export { Accordion, type AccordionItem, type AccordionProps, type AccordionRenderItemProps };

package/dist/esm/Accordion/index.js

@@ -2,48 +2,118 @@
 import { __name } from "../chunk-V4MHYKRI.js";
 
 // src/components/Accordion/Accordion.tsx
+import { Box, Button } from "@ttoss/ui";
 import * as React from "react";
-import { AccordionItem, AccordionItemButton, AccordionItemHeading, AccordionItemPanel, Accordion as ReactAccessibleAccordion } from "react-accessible-accordion";
-import { Box, useTheme } from "@ttoss/ui";
-import { css as createClassName } from "@emotion/css";
-import { css as transformStyleObject } from "@theme-ui/css";
 var Accordion = /* @__PURE__ */__name(({
-  children,
-  allowMultipleExpanded,
-  allowZeroExpanded,
-  preExpanded,
-  onChange,
+  items,
+  multiple = false,
+  defaultExpanded,
+  onAccordionChange,
+  renderItem,
+  sx,
   ...boxProps
 }) => {
-  const {
-    theme
-  } = useTheme();
-  const className = React.useMemo(() => {
-    const styles = transformStyleObject({
-      ".accordion__item": {
-        marginBottom: 3
-      },
-      ".accordion__heading": {
-        padding: "md",
-        border: "1px solid",
-        borderColor: "black"
-      },
-      ".accordion__button": {},
-      ".accordion__panel": {
-        padding: 2
+  const [expandedIndices, setExpandedIndices] = React.useState(() => {
+    if (defaultExpanded === void 0) {
+      return [];
+    }
+    return Array.isArray(defaultExpanded) ? defaultExpanded : [defaultExpanded];
+  });
+  const toggleItem = React.useCallback(index => {
+    setExpandedIndices(prev => {
+      const isExpanded = prev.includes(index);
+      let newExpanded;
+      if (isExpanded) {
+        newExpanded = prev.filter(i => {
+          return i !== index;
+        });
+      } else {
+        newExpanded = multiple ? [...prev, index] : [index];
       }
-    })(theme);
-    return createClassName(styles);
-  }, [theme]);
+      onAccordionChange?.(newExpanded);
+      return newExpanded;
+    });
+  }, [multiple, onAccordionChange]);
   return /* @__PURE__ */React.createElement(Box, {
-    variant: "accordion",
-    className,
+    sx: {
+      display: "flex",
+      flexDirection: "column",
+      gap: 2,
+      ...sx
+    },
     ...boxProps
-  }, /* @__PURE__ */React.createElement(ReactAccessibleAccordion, {
-    allowMultipleExpanded,
-    allowZeroExpanded,
-    preExpanded,
-    onChange
-  }, children));
+  }, items.map((item, index) => {
+    const isExpanded = expandedIndices.includes(index);
+    const itemId = item.id || `accordion-item-${index}`;
+    const headingId = `${itemId}-heading`;
+    const panelId = `${itemId}-panel`;
+    if (renderItem) {
+      return /* @__PURE__ */React.createElement(React.Fragment, {
+        key: itemId
+      }, renderItem({
+        item,
+        index,
+        isExpanded,
+        toggle: /* @__PURE__ */__name(() => {
+          return toggleItem(index);
+        }, "toggle"),
+        ids: {
+          itemId,
+          headingId,
+          panelId
+        }
+      }));
+    }
+    return /* @__PURE__ */React.createElement(Box, {
+      key: itemId,
+      sx: {
+        border: "sm",
+        borderColor: "display.border.muted.default",
+        borderRadius: "md",
+        overflow: "hidden"
+      }
+    }, /* @__PURE__ */React.createElement(Button, {
+      id: headingId,
+      type: "button",
+      disabled: item.disabled,
+      onClick: /* @__PURE__ */__name(() => {
+        toggleItem(index);
+      }, "onClick"),
+      "aria-expanded": isExpanded,
+      "aria-controls": panelId,
+      rightIcon: isExpanded ? "chevron-up" : "chevron-down",
+      sx: {
+        width: "100%",
+        justifyContent: "space-between",
+        backgroundColor: isExpanded ? "display.background.muted.default" : "display.background.primary.default",
+        color: item.disabled ? "display.text.muted.default" : "display.text.primary.default",
+        fontWeight: 500,
+        border: "none",
+        borderRadius: 0,
+        transition: "background-color 0.2s ease",
+        "&:hover:not(:disabled)": {
+          backgroundColor: "display.background.muted.default"
+        },
+        "&:focus": {
+          outline: "none",
+          boxShadow: /* @__PURE__ */__name(theme => {
+            return `inset 0 0 0 1px ${
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            theme.colors?.input?.border?.accent?.default || "currentColor"}`;
+          }, "boxShadow")
+        }
+      }
+    }, item.title), isExpanded && /* @__PURE__ */React.createElement(Box, {
+      id: panelId,
+      role: "region",
+      "aria-labelledby": headingId,
+      sx: {
+        padding: 4,
+        borderTop: "sm",
+        borderColor: "display.border.muted.default",
+        backgroundColor: "display.background.primary.default"
+      }
+    }, item.content));
+  }));
 }, "Accordion");
-export { Accordion, AccordionItem, AccordionItemButton, AccordionItemHeading, AccordionItemPanel };
+export { Accordion };

package/dist/esm/DatePicker/index.js

@@ -2,7 +2,6 @@
 import { __name } from "../chunk-V4MHYKRI.js";
 
 // src/components/DatePicker/DatePicker.tsx
-import "react-day-picker/style.css";
 import { Icon } from "@ttoss/react-icons";
 import { Box, Button, Flex, Label, Text } from "@ttoss/ui";
 import * as React from "react";
@@ -243,16 +242,20 @@ var DatePicker = /* @__PURE__ */__name(({
         border: "none",
         fontSize: ["12px", "14px"],
         width: ["32px", "36px"],
-        height: ["32px", "36px"]
+        height: ["32px", "36px"],
+        cursor: "pointer"
       },
       "& .rdp-range_start .rdp-day_button": {
-        backgroundColor: "action.background.primary.default"
+        backgroundColor: "action.background.accent.default",
+        color: "black"
       },
       "& .rdp-range_end .rdp-day_button": {
-        backgroundColor: "action.background.primary.default"
+        backgroundColor: "action.background.accent.default",
+        color: "black"
       },
       "& .rdp-day_button:hover": {
-        backgroundColor: "action.background.accent.default"
+        backgroundColor: "action.background.primary.default",
+        color: "action.text.primary.default"
       },
       "& .rdp-day_selected": {
         backgroundColor: "action.background.accent.default",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/components",
-  "version": "2.12.4",
+  "version": "2.12.6",
   "description": "React components for ttoss ecosystem.",
   "license": "MIT",
   "author": "ttoss",
@@ -109,44 +109,41 @@
   "sideEffects": false,
   "dependencies": {
     "@emotion/css": "^11.13.5",
-    "@tanstack/react-table": "^8.20.6",
-    "@theme-ui/css": "^0.17.1",
+    "@tanstack/react-table": "^8.21.3",
+    "@theme-ui/css": "^0.17.4",
     "@types/react-modal": "^3.16.3",
-    "json-edit-react": "^1.19.2",
-    "react-accessible-accordion": "^5.0.0",
-    "react-day-picker": "^9.11.3",
-    "react-grid-layout": "^1.5.2",
-    "react-json-view-lite": "^2.3.0",
-    "react-markdown": "^9.0.3",
+    "json-edit-react": "^1.29.0",
+    "react-day-picker": "^9.13.0",
+    "react-json-view-lite": "^2.5.0",
+    "react-markdown": "^10.1.0",
     "react-modal": "^3.16.3",
     "react-modern-drawer": "^1.4.0",
     "react-tabs": "^6.1.0",
-    "react-toastify": "^11.0.2",
+    "react-toastify": "^11.0.5",
     "rehype-raw": "^7.0.0",
-    "remark-gfm": "^4.0.0"
+    "remark-gfm": "^4.0.1"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
-    "@ttoss/react-hooks": "^2.1.11",
-    "@ttoss/react-icons": "^0.5.6",
-    "@ttoss/ui": "^6.5.0",
-    "@ttoss/react-i18n": "^2.0.25"
+    "@ttoss/react-hooks": "^2.1.12",
+    "@ttoss/react-i18n": "^2.0.26",
+    "@ttoss/react-icons": "^0.5.7",
+    "@ttoss/ui": "^6.5.1"
   },
   "devDependencies": {
     "@types/jest": "^30.0.0",
-    "@types/react": "^19.2.7",
-    "@types/react-grid-layout": "^1.3.6",
+    "@types/react": "^19.2.8",
     "jest": "^30.2.0",
-    "react": "^19.2.1",
+    "react": "^19.2.3",
     "tsup": "^8.5.1",
-    "tsx": "^4.19.2",
-    "@ttoss/react-i18n": "^2.0.25",
+    "tsx": "^4.21.0",
     "@ttoss/config": "^1.35.12",
-    "@ttoss/react-hooks": "^2.1.11",
-    "@ttoss/react-icons": "^0.5.6",
-    "@ttoss/test-utils": "^4.0.2",
-    "@ttoss/ui": "^6.5.0",
-    "@ttoss/i18n-cli": "^0.7.38"
+    "@ttoss/i18n-cli": "^0.7.38",
+    "@ttoss/react-hooks": "^2.1.12",
+    "@ttoss/react-i18n": "^2.0.26",
+    "@ttoss/react-icons": "^0.5.7",
+    "@ttoss/ui": "^6.5.1",
+    "@ttoss/test-utils": "^4.0.3"
   },
   "keywords": [
     "React",