@ttoss/components 2.14.20 → 2.14.22

package/dist/Table/index.d.mts

@@ -0,0 +1,17 @@
+
+import { BoxProps } from "@ttoss/ui";
+import { createCell, createColumnHelper, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
+
+//#region src/components/Table/Table.d.ts
+declare const Table: {
+  (props: BoxProps): import("react/jsx-runtime").JSX.Element;
+  Head: (props: BoxProps) => import("react/jsx-runtime").JSX.Element;
+  Body: (props: BoxProps) => import("react/jsx-runtime").JSX.Element;
+  Row: (props: BoxProps) => import("react/jsx-runtime").JSX.Element;
+  Cell: (props: BoxProps) => import("react/jsx-runtime").JSX.Element;
+  Header: (props: BoxProps) => import("react/jsx-runtime").JSX.Element;
+  Caption: (props: BoxProps) => import("react/jsx-runtime").JSX.Element;
+  Footer: (props: BoxProps) => import("react/jsx-runtime").JSX.Element;
+};
+//#endregion
+export { Table, createCell, createColumnHelper, flexRender, getCoreRowModel, useReactTable };

package/dist/Table/index.mjs

@@ -0,0 +1,64 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { Box } from "@ttoss/ui";
+import { jsx } from "react/jsx-runtime";
+import { createCell, createColumnHelper, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
+
+//#region src/components/Table/Table.tsx
+const Table = props => {
+  return /* @__PURE__ */jsx(Box, {
+    as: "table",
+    ...props
+  });
+};
+const TableHead = props => {
+  return /* @__PURE__ */jsx(Box, {
+    as: "thead",
+    ...props
+  });
+};
+const TableBody = props => {
+  return /* @__PURE__ */jsx(Box, {
+    as: "tbody",
+    ...props
+  });
+};
+const TableRow = props => {
+  return /* @__PURE__ */jsx(Box, {
+    as: "tr",
+    ...props
+  });
+};
+const TableCell = props => {
+  return /* @__PURE__ */jsx(Box, {
+    as: "td",
+    ...props
+  });
+};
+const TableHeader = props => {
+  return /* @__PURE__ */jsx(Box, {
+    as: "th",
+    ...props
+  });
+};
+const TableCaption = props => {
+  return /* @__PURE__ */jsx(Box, {
+    as: "caption",
+    ...props
+  });
+};
+const TableFooter = props => {
+  return /* @__PURE__ */jsx(Box, {
+    as: "tfoot",
+    ...props
+  });
+};
+Table.Head = TableHead;
+Table.Body = TableBody;
+Table.Row = TableRow;
+Table.Cell = TableCell;
+Table.Header = TableHeader;
+Table.Caption = TableCaption;
+Table.Footer = TableFooter;
+
+//#endregion
+export { Table, createCell, createColumnHelper, flexRender, getCoreRowModel, useReactTable };

package/dist/Tabs/index.d.mts

@@ -0,0 +1,17 @@
+
+import { BoxProps } from "@ttoss/ui";
+import { TabListProps, TabPanelProps, TabProps, TabsProps } from "react-tabs";
+
+//#region src/components/Tabs/Tabs.d.ts
+declare const Tabs: {
+  (props: BoxProps & TabsProps): import("react/jsx-runtime").JSX.Element;
+  TabList: import("react").FunctionComponent<TabListProps>;
+  /**
+   * Tab default props
+   * https://github.com/reactjs/react-tabs/blob/main/src/components/Tab.js
+   */
+  Tab: import("react").FunctionComponent<TabProps>;
+  TabPanel: import("react").FunctionComponent<TabPanelProps>;
+};
+//#endregion
+export { type TabListProps, type TabPanelProps, type TabProps, Tabs, type TabsProps };

package/dist/{esm/Tabs/index.js → Tabs/index.mjs}

@@ -1,20 +1,22 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import * as React from 'react';
-import { __name } from "../chunk-V4MHYKRI.js";
-
-// src/components/Tabs/Tabs.tsx
 import { Box } from "@ttoss/ui";
-import { Tab, TabList, TabPanel, Tabs as ReactTabs } from "react-tabs";
-var Tabs = /* @__PURE__ */__name(props => {
+import { Tab, TabList, TabPanel, Tabs as Tabs$1 } from "react-tabs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Tabs/Tabs.tsx
+const Tabs = props => {
   const {
     sx: customSx,
     ...restProps
   } = props;
-  return /* @__PURE__ */React.createElement(Box, {
-    sx: /* @__PURE__ */__name(({
+  return /* @__PURE__ */jsx(Box, {
+    sx: ({
       colors
     }) => {
       const themeColors = colors;
+      /**
+      * https://github.com/reactjs/react-tabs/blob/main/style/react-tabs.css
+      */
       return {
         /**
         * Tabs
@@ -65,11 +67,21 @@ var Tabs = /* @__PURE__ */__name(props => {
         },
         ...customSx
       };
-    }, "sx"),
-    ...restProps
-  }, /* @__PURE__ */React.createElement(ReactTabs, restProps, props.children));
-}, "Tabs");
+    },
+    ...restProps,
+    children: /* @__PURE__ */jsx(Tabs$1, {
+      ...restProps,
+      children: props.children
+    })
+  });
+};
 Tabs.TabList = TabList;
+/**
+* Tab default props
+* https://github.com/reactjs/react-tabs/blob/main/src/components/Tab.js
+*/
 Tabs.Tab = Tab;
 Tabs.TabPanel = TabPanel;
+
+//#endregion
 export { Tabs };

package/dist/Toast/index.d.mts

@@ -0,0 +1,8 @@
+
+import { ToastContainerProps, ToastOptions, toast as toast$1 } from "react-toastify";
+
+//#region src/components/Toast/Toast.d.ts
+declare const ToastContainer: (props: ToastContainerProps) => import("react/jsx-runtime").JSX.Element;
+declare const toast: typeof toast$1;
+//#endregion
+export { ToastContainer, type ToastContainerProps, type ToastOptions, toast };

package/dist/Toast/index.mjs

@@ -0,0 +1,43 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { Box, useTheme } from "@ttoss/ui";
+import { jsx } from "react/jsx-runtime";
+import { css } from "@emotion/css";
+import { css as css$1 } from "@theme-ui/css";
+import * as React from "react";
+import { ToastContainer as ToastContainer$1, toast as toast$1 } from "react-toastify";
+
+//#region src/components/Toast/Toast.tsx
+const ToastContainer = props => {
+  const {
+    theme
+  } = useTheme();
+  const className = React.useMemo(() => {
+    return css(css$1({
+      ".Toastify__toast-container": {}
+    })(theme));
+  }, [theme]);
+  return /* @__PURE__ */jsx(Box, {
+    className,
+    sx: ({
+      colors,
+      fonts
+    }) => {
+      const themeColors = colors;
+      /**
+      * https://fkhadra.github.io/react-toastify/how-to-style#override-css-variables
+      */
+      return {
+        "--toastify-font-family": fonts?.body,
+        "--toastify-color-light": themeColors?.feedback?.background?.primary?.default
+      };
+    },
+    children: /* @__PURE__ */jsx(ToastContainer$1, {
+      className,
+      ...props
+    })
+  });
+};
+const toast = toast$1;
+
+//#endregion
+export { ToastContainer, toast };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/components",
-  "version": "2.14.20",
+  "version": "2.14.22",
   "description": "React components for ttoss ecosystem.",
   "keywords": [
     "React",
@@ -131,23 +131,23 @@
     "@types/jest": "^30.0.0",
     "@types/react": "^19.2.14",
     "jest": "^30.3.0",
-    "react": "^19.2.4",
-    "tsup": "^8.5.1",
+    "react": "^19.2.6",
+    "tsdown": "^0.22.0",
     "tsx": "^4.21.0",
-    "@ttoss/config": "^1.37.12",
-    "@ttoss/i18n-cli": "^0.8.12",
-    "@ttoss/react-hooks": "^2.3.12",
-    "@ttoss/react-i18n": "^2.2.13",
-    "@ttoss/react-icons": "^0.7.13",
-    "@ttoss/test-utils": "^4.2.12",
-    "@ttoss/ui": "^6.9.19"
+    "@ttoss/config": "^1.37.13",
+    "@ttoss/react-icons": "^0.7.15",
+    "@ttoss/react-hooks": "^2.3.14",
+    "@ttoss/test-utils": "^4.2.13",
+    "@ttoss/ui": "^6.9.21",
+    "@ttoss/react-i18n": "^2.2.15",
+    "@ttoss/i18n-cli": "^0.8.13"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
-    "@ttoss/react-hooks": "^2.3.12",
-    "@ttoss/react-icons": "^0.7.13",
-    "@ttoss/ui": "^6.9.19",
-    "@ttoss/react-i18n": "^2.2.13"
+    "@ttoss/react-hooks": "^2.3.14",
+    "@ttoss/ui": "^6.9.21",
+    "@ttoss/react-icons": "^0.7.15",
+    "@ttoss/react-i18n": "^2.2.15"
   },
   "publishConfig": {
     "access": "public",
@@ -155,7 +155,7 @@
   },
   "gitHead": "e2b509ee8717f07f7365191b651dcbb5f080e05a",
   "scripts": {
-    "build": "tsup",
+    "build": "tsdown",
     "postbuild": "pnpm run update-package-json-exports",
     "dev": "pnpm -r --filter=@docs/storybook run dev",
     "i18n": "ttoss-i18n",

package/dist/Accordion/index.d.ts

@@ -1,148 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { BoxProps } from '@ttoss/ui';
-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 & {
-    /**
-     * 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.
-     */
-    renderItem?: (props: AccordionRenderItemProps) => React.ReactNode;
-};
-/**
- * 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 AccordionItem, type AccordionProps, type AccordionRenderItemProps };

package/dist/DatePicker/index.d.ts

@@ -1,20 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-
-interface DateRange {
-    from: Date | undefined;
-    to: Date | undefined;
-}
-interface DateRangePreset {
-    label: string;
-    getValue: () => DateRange;
-}
-interface DatePickerProps {
-    label?: string;
-    value?: DateRange;
-    presets?: DateRangePreset[];
-    onChange?: (range: DateRange | undefined) => void;
-    disabled?: boolean;
-}
-declare const DatePicker: ({ label, value, presets, onChange, disabled, }: DatePickerProps) => react_jsx_runtime.JSX.Element;
-
-export { DatePicker, type DateRange };

package/dist/Drawer/index.d.ts

@@ -1,12 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { BoxProps } from '@ttoss/ui';
-import * as React from 'react';
-import DrawerUi from 'react-modern-drawer';
-
-type DrawerUiProps = React.ComponentProps<typeof DrawerUi>;
-type DrawerProps = DrawerUiProps & {
-    sx?: BoxProps['sx'];
-};
-declare const Drawer: ({ children, sx, ...props }: DrawerProps) => react_jsx_runtime.JSX.Element;
-
-export { Drawer, type DrawerProps };

package/dist/LockedOverlay/index.d.ts

@@ -1,151 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ButtonProps, ThemeUIStyleObject, Theme } from '@ttoss/ui';
-import * as React from 'react';
-
-type LockedOverlayAction = {
-    /**
-     * Label text for the button
-     */
-    label: string;
-    /**
-     * Icon identifier from @ttoss/react-icons
-     */
-    icon?: string;
-    /**
-     * Button variant
-     */
-    variant: 'primary' | 'accent' | 'secondary';
-    /**
-     * Click handler for the button
-     */
-    onClick: () => void;
-};
-type LockedOverlayProps = {
-    /**
-     * Controls the overlay visibility
-     */
-    isOpen: boolean;
-    /**
-     * Optional close handler. If not provided, overlay cannot be closed by user interaction
-     */
-    onRequestClose?: () => void;
-    /**
-     * Header configuration for the SpotlightCard
-     */
-    header: {
-        /**
-         * Icon identifier from @ttoss/react-icons
-         */
-        icon: string;
-        /**
-         * Title text for the header
-         */
-        title: string;
-        /**
-         * Description text for the header
-         */
-        description: string;
-        /**
-         * Visual variant for the SpotlightCard
-         * @default 'primary'
-         */
-        variant?: 'primary' | 'accent';
-    };
-    /**
-     * Optional first button to display in the SpotlightCard header
-     */
-    firstButton?: ButtonProps | React.ReactNode;
-    /**
-     * Optional second button to display in the SpotlightCard header
-     */
-    secondButton?: ButtonProps | React.ReactNode;
-    /**
-     * Content to be rendered in the overlay body
-     */
-    children: React.ReactNode;
-    /**
-     * Optional list of actions to render as buttons in the footer
-     */
-    actions?: LockedOverlayAction[];
-    /**
-     * Optional style overrides for the overlay and content container
-     */
-    sx?: ThemeUIStyleObject<Theme<object>>;
-    /**
-     * Optional z-index value to control overlay stacking order.
-     * The overlay will appear above the parent container content.
-     * @default 1
-     *
-     * zIndex hierarchy reference:
-     * - modal: 1400
-     * - overlay: 1300 (sidebar layouts use this value)
-     * - dropdown: 1000
-     * - sticky: 1100
-     * - banner: 1200
-     */
-    zIndex?: string | number;
-};
-/**
- * LockedOverlay is a component for blocking and displaying locked features or restricted content
- * within a specific container.
- *
- * This component renders as an absolutely positioned overlay that blocks the parent container's content.
- * The parent container must have `position: relative` for proper positioning.
- *
- * Unlike a modal, this component blocks only its parent container, not the entire viewport,
- * making it ideal for blocking specific sections like Layout.Main, Layout.Main.Body, etc.
- *
- * @example
- * ```tsx
- * // Parent container must have position: relative
- * <Layout.Main sx={{ position: 'relative' }}>
- *   <LockedOverlay
- *     isOpen={isOpen}
- *     onRequestClose={() => setIsOpen(false)}
- *     header={{
- *       icon: "fluent:lock-closed-24-filled",
- *       title: "Premium Feature",
- *       description: "Available in Pro plan only",
- *       variant: "primary"
- *     }}
- *     actions={[
- *       {
- *         label: "Upgrade Now",
- *         icon: "fluent-emoji-high-contrast:sparkles",
- *         variant: "primary",
- *         onClick: handleUpgrade
- *       },
- *       {
- *         label: "Learn More",
- *         icon: "fluent:arrow-right-16-regular",
- *         variant: "accent",
- *         onClick: handleLearnMore
- *       }
- *     ]}
- *   >
- *     <Text>This feature is only available for Pro users.</Text>
- *   </LockedOverlay>
- * </Layout.Main>
- * ```
- *
- * @example
- * ```tsx
- * // Blocking a specific section with custom zIndex
- * <Box sx={{ position: 'relative' }}>
- *   <LockedOverlay
- *     isOpen={isOpen}
- *     zIndex={10}
- *     header={{
- *       icon: "fluent:lock-closed-24-filled",
- *       title: "Feature Locked",
- *       description: "Unlock this feature"
- *     }}
- *   >
- *     <Text>Content here</Text>
- *   </LockedOverlay>
- * </Box>
- * ```
- */
-declare const LockedOverlay: ({ isOpen, onRequestClose, header, firstButton, secondButton, children, actions, sx, zIndex, }: LockedOverlayProps) => react_jsx_runtime.JSX.Element | null;
-
-export { LockedOverlay };

package/dist/Markdown/index.d.ts

@@ -1,11 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { FlexProps } from '@ttoss/ui';
-import { Options } from 'react-markdown';
-
-type MarkdownProps = Options & {
-    children: string;
-    sx?: FlexProps['sx'];
-};
-declare const Markdown: ({ children, sx, ...props }: MarkdownProps) => react_jsx_runtime.JSX.Element;
-
-export { Markdown, type MarkdownProps };

package/dist/Menu/index.d.ts

@@ -1,11 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React from 'react';
-
-type MenuProps = {
-    children: React.ReactNode;
-    sx?: Record<string, unknown>;
-    menuIcon?: string;
-};
-declare const Menu: ({ children, sx, menuIcon }: MenuProps) => react_jsx_runtime.JSX.Element;
-
-export { Menu, type MenuProps };