@ttoss/components 2.10.0 → 2.10.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/components",
-  "version": "2.10.0",
+  "version": "2.10.2",
   "description": "React components for ttoss ecosystem.",
   "license": "MIT",
   "author": "ttoss",
@@ -18,6 +18,10 @@
       "types": "./dist/Accordion/index.d.ts",
       "default": "./dist/esm/Accordion/index.js"
     },
+    "./DatePicker": {
+      "types": "./dist/DatePicker/index.d.ts",
+      "default": "./dist/esm/DatePicker/index.js"
+    },
     "./Drawer": {
       "types": "./dist/Drawer/index.d.ts",
       "default": "./dist/esm/Drawer/index.js"
@@ -98,6 +102,8 @@
     "@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",
     "react-modal": "^3.16.3",
@@ -109,24 +115,25 @@
   },
   "peerDependencies": {
     "react": ">=16.8.0",
-    "@ttoss/react-hooks": "^2.1.10",
-    "@ttoss/react-i18n": "^2.0.24",
-    "@ttoss/ui": "^6.0.4"
+    "@ttoss/react-hooks": "^2.1.11",
+    "@ttoss/react-i18n": "^2.0.25",
+    "@ttoss/ui": "^6.1.0"
   },
   "devDependencies": {
     "@types/jest": "^30.0.0",
-    "@types/react": "^19.2.6",
+    "@types/react": "^19.2.7",
+    "@types/react-grid-layout": "^1.3.6",
     "jest": "^30.2.0",
-    "react": "^19.2.0",
+    "react": "^19.2.1",
     "tsup": "^8.5.1",
     "tsx": "^4.19.2",
-    "@ttoss/react-i18n": "^2.0.24",
     "@ttoss/config": "^1.35.12",
     "@ttoss/i18n-cli": "^0.7.38",
-    "@ttoss/react-hooks": "^2.1.10",
-    "@ttoss/test-utils": "^4.0.1",
-    "@ttoss/react-icons": "^0.5.5",
-    "@ttoss/ui": "^6.0.4"
+    "@ttoss/react-hooks": "^2.1.11",
+    "@ttoss/react-i18n": "^2.0.25",
+    "@ttoss/react-icons": "^0.5.6",
+    "@ttoss/test-utils": "^4.0.2",
+    "@ttoss/ui": "^6.1.0"
   },
   "keywords": [
     "React",

package/dist/Accordion/index.d.ts

@@ -1,16 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { BoxProps } from '@ttoss/ui';
-export { AccordionItem, AccordionItemButton, AccordionItemHeading, AccordionItemPanel } from 'react-accessible-accordion';
-
-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.
-     */
-    onChange?: (args: string[]) => void;
-};
-declare const Accordion: ({ children, allowMultipleExpanded, allowZeroExpanded, preExpanded, onChange, ...boxProps }: AccordionProps) => react_jsx_runtime.JSX.Element;
-
-export { Accordion, type AccordionProps };

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/FileUploader/index.d.ts

@@ -1,55 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React from 'react';
-
-type UploadResult = {
-    url: string;
-    id: string | number;
-};
-type FileUploadState = {
-    file: File;
-    status: 'pending' | 'uploading' | 'completed' | 'error';
-    progress?: number;
-    result?: UploadResult;
-    error?: Error;
-};
-type OnUpload = (file: File, onProgress?: (progress: number) => void) => Promise<UploadResult>;
-type OnUploadStart = (file: File) => void;
-type OnUploadProgress = (file: File, progress: number) => void;
-type OnUploadComplete = (file: File, result: UploadResult) => void;
-type OnUploadError = (file: File, error: Error) => void;
-type OnFilesChange = (files: FileUploadState[]) => void;
-type OnRemove = (file: UploadedFile, index: number) => void;
-type UploadedFile = {
-    id: string | number;
-    name: string;
-    imageUrl?: string;
-    url: string;
-};
-type FileUploaderProps = {
-    onUpload: OnUpload;
-    onUploadStart?: OnUploadStart;
-    onUploadProgress?: OnUploadProgress;
-    onUploadComplete?: OnUploadComplete;
-    onUploadError?: OnUploadError;
-    onFilesChange?: OnFilesChange;
-    onRemove?: OnRemove;
-    accept?: string;
-    multiple?: boolean;
-    maxSize?: number;
-    maxFiles?: number;
-    disabled?: boolean;
-    autoUpload?: boolean;
-    retryAttempts?: number;
-    placeholder?: string;
-    error?: string;
-    children?: React.ReactNode;
-    showFileList?: boolean;
-    FileListComponent?: (props: {
-        files: UploadedFile[];
-        onRemove: (index: number) => void;
-    }) => React.ReactNode;
-    files?: UploadedFile[];
-};
-declare const FileUploader: ({ onUpload, onUploadStart, onUploadProgress, onUploadComplete, onUploadError, onFilesChange, onRemove, accept, multiple, maxSize, maxFiles, disabled, autoUpload, retryAttempts, placeholder, error, children, showFileList, FileListComponent, files: uploadedFiles, }: FileUploaderProps) => react_jsx_runtime.JSX.Element;
-
-export { type FileUploadState, FileUploader, type FileUploaderProps, type OnFilesChange, type OnRemove, type OnUpload, type OnUploadComplete, type OnUploadError, type OnUploadProgress, type OnUploadStart, type UploadResult, type UploadedFile };

package/dist/InstallPwa/index.d.ts

@@ -1,10 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React from 'react';
-
-type InstallPwaUiProps = {
-    onInstall: React.MouseEventHandler<HTMLButtonElement>;
-};
-declare const InstallPwaUi: ({ onInstall }: InstallPwaUiProps) => react_jsx_runtime.JSX.Element;
-declare const InstallPwa: () => react_jsx_runtime.JSX.Element | null;
-
-export { InstallPwa, InstallPwaUi, type InstallPwaUiProps };

package/dist/JsonEditor/index.d.ts

@@ -1,2 +0,0 @@
-export { JsonEditor } from 'json-edit-react';
-import 'react-json-view-lite';

package/dist/JsonView/index.d.ts

@@ -1 +0,0 @@
-export { JsonView } from 'react-json-view-lite';

package/dist/List/index.d.ts

@@ -1,13 +0,0 @@
-import * as React from 'react';
-
-interface ListProps extends React.HTMLProps<HTMLUListElement> {
-    children: React.ReactNode;
-}
-declare const List: React.ForwardRefExoticComponent<Omit<ListProps, "ref"> & React.RefAttributes<HTMLUListElement>>;
-
-interface ListItemProps extends React.HTMLProps<HTMLLIElement> {
-    children: React.ReactNode;
-}
-declare const ListItem: React.ForwardRefExoticComponent<Omit<ListItemProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
-
-export { List, ListItem, type ListItemProps, type ListProps };

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 };

package/dist/Modal/index.d.ts

@@ -1,10 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import ReactModal from 'react-modal';
-
-type ModalProps = ReactModal.Props;
-declare const Modal: {
-    (props: ModalProps): react_jsx_runtime.JSX.Element;
-    setAppElement: typeof ReactModal.setAppElement;
-};
-
-export { Modal, type ModalProps };

package/dist/NavList/index.d.ts

@@ -1,55 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React from 'react';
-
-type NavListItem = {
-    id?: string;
-    label: string;
-    href: string;
-    icon?: string;
-    disabled?: boolean;
-    active?: boolean;
-    onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
-    group?: string;
-    divider?: boolean;
-};
-type NavListGroup = {
-    id?: string;
-    label?: string;
-    items: NavListItem[];
-    divider?: boolean;
-};
-type LinkComponentProps = {
-    href: string;
-    onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
-    children: React.ReactNode;
-    [key: string]: unknown;
-};
-type NavListProps = {
-    items?: NavListItem[];
-    groups?: NavListGroup[];
-    variant?: 'sidebar' | 'menu' | 'dropdown';
-    onItemClick?: (item: NavListItem) => void;
-    sx?: Record<string, unknown>;
-    iconSize?: number;
-    /**
-     * Custom Link component to use for rendering links.
-     * Useful for integrating with Next.js Link, React Router Link, etc.
-     *
-     * @example
-     * // Next.js
-     * import NextLink from 'next/link';
-     * <NavList LinkComponent={NextLink} ... />
-     *
-     * @example
-     * // React Router
-     * import { Link as RouterLink } from 'react-router-dom';
-     * <NavList LinkComponent={RouterLink} ... />
-     */
-    LinkComponent?: React.ComponentType<LinkComponentProps>;
-};
-declare const NavList: {
-    ({ items, groups, variant, onItemClick, sx, iconSize, LinkComponent, }: NavListProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-export { type LinkComponentProps, NavList, type NavListGroup, type NavListItem, type NavListProps };

package/dist/NotificationCard/index.d.ts

@@ -1,21 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React from 'react';
-
-type NotificationType = 'success' | 'error' | 'warning' | 'info' | 'neutral';
-type NotificationAction = {
-    action?: 'open_url';
-    url?: string;
-    label?: string;
-};
-type NotificationCardProps = {
-    type: NotificationType;
-    title?: string | React.ReactNode;
-    message: string | React.ReactNode;
-    actions?: NotificationAction[];
-    caption?: string | React.ReactNode;
-    tags?: string[] | React.ReactNode;
-    onClose?: () => void;
-};
-declare const NotificationCard: (props: NotificationCardProps) => react_jsx_runtime.JSX.Element;
-
-export { type NotificationAction, NotificationCard, type NotificationCardProps };

package/dist/NotificationsMenu/index.d.ts

@@ -1,36 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React from 'react';
-
-type NotificationType = 'success' | 'error' | 'warning' | 'info' | 'neutral';
-type NotificationAction = {
-    action?: 'open_url';
-    url?: string;
-    label?: string;
-};
-type NotificationCardProps = {
-    type: NotificationType;
-    title?: string | React.ReactNode;
-    message: string | React.ReactNode;
-    actions?: NotificationAction[];
-    caption?: string | React.ReactNode;
-    tags?: string[] | React.ReactNode;
-    onClose?: () => void;
-};
-
-type Notification = NotificationCardProps & {
-    id: string;
-    group?: string;
-};
-type Props = {
-    notifications: Notification[];
-    defaultOpen?: boolean;
-    hasMore?: boolean;
-    count: number;
-    onLoadMore?: () => void;
-    onOpenChange?: (isOpen: boolean) => void;
-    onClose?: () => void;
-    onClearAll?: () => void;
-};
-declare const NotificationsMenu: ({ notifications, defaultOpen, hasMore, onLoadMore, onOpenChange, count, onClose, onClearAll, }: Props) => react_jsx_runtime.JSX.Element;
-
-export { type Notification, NotificationsMenu };

package/dist/Search/index.d.ts

@@ -1,11 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { InputProps } from '@ttoss/ui';
-
-type SearchProps = Omit<InputProps, 'onChange'> & {
-    loading?: boolean;
-    debounce?: number;
-    onChange: (value?: InputProps['value']) => void;
-};
-declare const Search: ({ value, defaultValue, loading, onChange, ...props }: SearchProps) => react_jsx_runtime.JSX.Element;
-
-export { Search, type SearchProps };

package/dist/SpotlightCard/index.d.ts

@@ -1,27 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { IconType } from '@ttoss/react-icons';
-import { ButtonProps } from '@ttoss/ui';
-import * as React from 'react';
-
-type ButtonPropType = ButtonProps | React.ReactNode;
-type SpotlightCardProps = {
-    icon: IconType;
-    /**
-     * Title of the card. Pass a ReactNode for styling.
-     */
-    title: string | React.ReactNode;
-    /**
-     * Badge text. Renders as a badge/tag next to the title.
-     */
-    badge?: string | React.ReactNode;
-    description: string;
-    firstButton?: ButtonPropType;
-    secondButton?: ButtonPropType;
-    variant?: 'accent' | 'primary';
-};
-declare const SpotlightCard: {
-    ({ icon, title, badge, description, firstButton, secondButton, variant, }: SpotlightCardProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-export { SpotlightCard, type SpotlightCardProps };

package/dist/Table/index.d.ts

@@ -1,16 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { BoxProps } from '@ttoss/ui';
-export { createCell, createColumnHelper, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
-
-declare const Table: {
-    (props: BoxProps): react_jsx_runtime.JSX.Element;
-    Head: (props: BoxProps) => react_jsx_runtime.JSX.Element;
-    Body: (props: BoxProps) => react_jsx_runtime.JSX.Element;
-    Row: (props: BoxProps) => react_jsx_runtime.JSX.Element;
-    Cell: (props: BoxProps) => react_jsx_runtime.JSX.Element;
-    Header: (props: BoxProps) => react_jsx_runtime.JSX.Element;
-    Caption: (props: BoxProps) => react_jsx_runtime.JSX.Element;
-    Footer: (props: BoxProps) => react_jsx_runtime.JSX.Element;
-};
-
-export { Table };

package/dist/Tabs/index.d.ts

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

package/dist/Toast/index.d.ts

@@ -1,8 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ToastContainerProps, toast as toast$1 } from 'react-toastify';
-export { ToastContainerProps, ToastOptions } from 'react-toastify';
-
-declare const ToastContainer: (props: ToastContainerProps) => react_jsx_runtime.JSX.Element;
-declare const toast: typeof toast$1;
-
-export { ToastContainer, toast };

package/dist/esm/Accordion/index.js

@@ -1,49 +0,0 @@
-/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { __name } from "../chunk-V4MHYKRI.js";
-
-// src/components/Accordion/Accordion.tsx
-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,
-  ...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
-      }
-    })(theme);
-    return createClassName(styles);
-  }, [theme]);
-  return /* @__PURE__ */React.createElement(Box, {
-    variant: "accordion",
-    className,
-    ...boxProps
-  }, /* @__PURE__ */React.createElement(ReactAccessibleAccordion, {
-    allowMultipleExpanded,
-    allowZeroExpanded,
-    preExpanded,
-    onChange
-  }, children));
-}, "Accordion");
-export { Accordion, AccordionItem, AccordionItemButton, AccordionItemHeading, AccordionItemPanel };

package/dist/esm/Drawer/index.js

@@ -1,59 +0,0 @@
-/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { __name } from "../chunk-V4MHYKRI.js";
-
-// src/components/Drawer/Drawer.tsx
-import { Box } from "@ttoss/ui";
-import * as React from "react";
-import DrawerUi from "react-modern-drawer";
-var Drawer = /* @__PURE__ */__name(({
-  children,
-  sx,
-  ...props
-}) => {
-  return /* @__PURE__ */React.createElement(Box, {
-    "data-testid": "drawer-container",
-    sx: {
-      /**
-      * https://github.com/Farzin-Firoozi/react-modern-drawer/blob/master/src/styles.css
-      */
-      zIndex: "overlay",
-      width: "100%",
-      height: "100%",
-      ".EZDrawer__checkbox": {
-        display: "none"
-      },
-      ".EZDrawer__checkbox:checked ~ .EZDrawer__overlay": {
-        display: "block",
-        opacity: 1
-      },
-      ".EZDrawer__checkbox:checked ~ .EZDrawer__container": {
-        visibility: "visible",
-        transform: "translate3d(0, 0, 0) !important"
-      },
-      ".EZDrawer__overlay ": {
-        display: "none",
-        height: "100vh",
-        left: "0",
-        position: "fixed",
-        top: "0",
-        width: "100%"
-      },
-      ".EZDrawer__container": {
-        position: "fixed",
-        visibility: "hidden",
-        backgroundColor: "navigation.background.muted.default",
-        transition: "all",
-        boxShadow: "0 0 10px 5px rgba(0, 0, 0, 0.1)",
-        paddingX: "6",
-        overflowY: "auto"
-      },
-      ...sx
-    }
-  }, /* @__PURE__ */React.createElement(DrawerUi, props, /* @__PURE__ */React.createElement(Box, {
-    sx: {
-      width: "100%",
-      height: "100%"
-    }
-  }, children)));
-}, "Drawer");
-export { Drawer };