@ttoss/components 2.14.20 → 2.14.22

package/dist/MetricCard/index.d.ts

@@ -1,148 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { IconType } from '@ttoss/react-icons';
-
-/**
- * Base metric properties shared by all metric types.
- */
-interface BaseMetric {
-    /**
-     * Label displayed above the metric value.
-     */
-    label: string;
-    /**
-     * Optional tooltip text or action handler for additional context.
-     * When a string is provided, it displays a simple tooltip.
-     * When a function is provided, it's called when the tooltip icon is clicked.
-     */
-    tooltip?: string | (() => void);
-    /**
-     * Icon to display alongside the metric.
-     */
-    icon?: IconType;
-    /**
-     * Optional click handler to make the metric card interactive.
-     */
-    onClick?: () => void;
-    /**
-     * Optional help article action handler.
-     */
-    helpArticleAction?: () => void;
-}
-/**
- * Date-based metric for displaying dates like expiration or renewal.
- */
-interface DateMetric extends BaseMetric {
-    type: 'date';
-    /**
-     * The date value to display.
-     */
-    date: string;
-    /**
-     * Optional message showing remaining days.
-     */
-    remainingDaysMessage?: string;
-    /**
-     * Whether to show a warning indicator.
-     */
-    isWarning?: boolean;
-}
-/**
- * Percentage-based metric with progress bar.
- */
-interface PercentageMetric extends BaseMetric {
-    type: 'percentage';
-    /**
-     * Current value.
-     */
-    current: number;
-    /**
-     * Maximum value. Use null for unlimited.
-     */
-    max: number | null;
-    /**
-     * Custom formatter for displaying values.
-     */
-    formatValue?: (value: number) => string;
-    /**
-     * Percentage threshold at which to show an alert.
-     */
-    showAlertThreshold?: number;
-}
-/**
- * Number-based metric for displaying counts.
- */
-interface NumberMetric extends BaseMetric {
-    type: 'number';
-    /**
-     * Current value.
-     */
-    current: number;
-    /**
-     * Maximum value. Use null for unlimited.
-     */
-    max: number | null;
-    /**
-     * Custom formatter for displaying values.
-     */
-    formatValue?: (value: number) => string;
-    /**
-     * Optional footer text below the metric.
-     */
-    footerText?: string;
-}
-/**
- * Union type for all supported metric types.
- */
-type Metric = DateMetric | PercentageMetric | NumberMetric;
-/**
- * Props for the MetricCard component.
- */
-interface MetricCardProps {
-    /**
-     * The metric configuration to display.
-     */
-    metric: Metric;
-    /**
-     * Whether the card is in loading state.
-     */
-    isLoading?: boolean;
-}
-
-/**
- * MetricCard component displays a metric in a consistent card layout.
- *
- * It supports three metric types:
- * - **date**: displays a date and optional remaining-days message
- * - **percentage**: displays current/max values and a progress bar
- * - **number**: displays current/max values and an optional footer text
- *
- * @example
- * ```tsx
- * <MetricCard
- *   metric={{
- *     type: 'date',
- *     label: 'Renewal date',
- *     date: '31/12/2025',
- *     icon: 'fluent:calendar-24-regular',
- *     remainingDaysMessage: '10 days remaining',
- *   }}
- * />
- * ```
- *
- * @example
- * ```tsx
- * <MetricCard
- *   metric={{
- *     type: 'percentage',
- *     label: 'Plan usage',
- *     current: 350,
- *     max: 1000,
- *     icon: 'fluent:gauge-24-regular',
- *     showAlertThreshold: 80,
- *   }}
- * />
- * ```
- */
-declare const MetricCard: ({ metric, isLoading }: MetricCardProps) => react_jsx_runtime.JSX.Element | null;
-
-export { type BaseMetric, type DateMetric, type Metric, MetricCard, type MetricCardProps, type NumberMetric, type PercentageMetric };

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/esm/Accordion/index.js

@@ -1,119 +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 { Box, Button } from "@ttoss/ui";
-import * as React from "react";
-var Accordion = /* @__PURE__ */__name(({
-  items,
-  multiple = false,
-  defaultExpanded,
-  onAccordionChange,
-  renderItem,
-  sx,
-  ...boxProps
-}) => {
-  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];
-      }
-      onAccordionChange?.(newExpanded);
-      return newExpanded;
-    });
-  }, [multiple, onAccordionChange]);
-  return /* @__PURE__ */React.createElement(Box, {
-    sx: {
-      display: "flex",
-      flexDirection: "column",
-      gap: 2,
-      ...sx
-    },
-    ...boxProps
-  }, 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 };