@ttoss/components 2.14.24 → 2.14.26

package/dist/Markdown/index.mjs

@@ -1,26 +0,0 @@
-/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { jsx } from "react/jsx-runtime";
-import { BaseStyles } from "@ttoss/ui";
-import ReactMarkdown from "react-markdown";
-import rehypeRaw from "rehype-raw";
-import remarkGfm from "remark-gfm";
-
-//#region src/components/Markdown/Markdown.tsx
-var Markdown = ({
-  children,
-  sx,
-  ...props
-}) => {
-  return /* @__PURE__ */jsx(BaseStyles, {
-    sx,
-    children: /* @__PURE__ */jsx(ReactMarkdown, {
-      rehypePlugins: [rehypeRaw],
-      remarkPlugins: [remarkGfm],
-      ...props,
-      children
-    })
-  });
-};
-
-//#endregion
-export { Markdown };

package/dist/Menu/index.d.mts

@@ -1,16 +0,0 @@
-
-import * as React from "react";
-
-//#region src/components/Menu/Menu.d.ts
-type MenuProps = {
-  children: React.ReactNode;
-  sx?: Record<string, unknown>;
-  menuIcon?: string;
-};
-declare const Menu: ({
-  children,
-  sx,
-  menuIcon
-}: MenuProps) => import("react/jsx-runtime").JSX.Element;
-//#endregion
-export { Menu, MenuProps };

package/dist/Menu/index.mjs

@@ -1,136 +0,0 @@
-/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Icon } from "@ttoss/react-icons";
-import { Box, Flex } from "@ttoss/ui";
-
-//#region src/components/Menu/Menu.tsx
-var Menu = ({
-  children,
-  sx,
-  menuIcon = "menu-open"
-}) => {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [stylePos, setStylePos] = React.useState({});
-  const triggerRef = React.useRef(null);
-  const panelRef = React.useRef(null);
-  const toggle = () => {
-    return setIsOpen(v => {
-      return !v;
-    });
-  };
-  React.useEffect(() => {
-    if (!isOpen) return;
-    const onDocClick = e => {
-      const t = e.target;
-      if (panelRef.current && !panelRef.current.contains(t) && triggerRef.current && !triggerRef.current.contains(t)) setIsOpen(false);
-    };
-    document.addEventListener("mousedown", onDocClick);
-    return () => {
-      return document.removeEventListener("mousedown", onDocClick);
-    };
-  }, [isOpen]);
-  React.useLayoutEffect(() => {
-    if (!isOpen) return;
-    let rafId = 0;
-    const getWidth = () => {
-      const w = sx?.width ?? sx?.maxWidth ?? sx?.minWidth;
-      return Array.isArray(w) ? w[w.length - 1] : w;
-    };
-    const compute = () => {
-      const trigger = triggerRef.current;
-      const panel = panelRef.current;
-      if (!trigger || !panel) return;
-      const width = getWidth();
-      if (width) panel.style.width = typeof width === "number" ? `${width}px` : String(width);
-      const tr = trigger.getBoundingClientRect();
-      const pr = panel.getBoundingClientRect();
-      const vw = window.innerWidth,
-        vh = window.innerHeight,
-        m = 8;
-      if (pr.width === 0) {
-        rafId = requestAnimationFrame(compute);
-        return;
-      }
-      const left = Math.max(m, Math.min(tr.left + tr.width / 2 - pr.width / 2, vw - pr.width - m));
-      const top = vh - tr.bottom < pr.height + m ? Math.max(m, tr.top - pr.height - m) : tr.bottom + m;
-      setStylePos({
-        position: "fixed",
-        left: `${left}px`,
-        top: `${top}px`,
-        zIndex: 9999,
-        ...(width && {
-          width: typeof width === "number" ? `${width}px` : String(width)
-        })
-      });
-    };
-    rafId = requestAnimationFrame(compute);
-    const onResizeScroll = () => {
-      return rafId = requestAnimationFrame(compute);
-    };
-    window.addEventListener("resize", onResizeScroll);
-    window.addEventListener("scroll", onResizeScroll, true);
-    return () => {
-      cancelAnimationFrame(rafId);
-      window.removeEventListener("resize", onResizeScroll);
-      window.removeEventListener("scroll", onResizeScroll, true);
-    };
-  }, [isOpen, sx]);
-  const panel = isOpen ? /* @__PURE__ */jsx(Flex, {
-    ref: panelRef,
-    sx: {
-      width: ["280px", "320px"],
-      maxHeight: "400px",
-      flexDirection: "column",
-      gap: "3",
-      padding: "3",
-      backgroundColor: "input.background.muted.default",
-      borderRadius: "xl",
-      boxShadow: "xl",
-      overflowY: "auto",
-      border: "md",
-      borderColor: "display.border.muted.default",
-      ...sx
-    },
-    style: {
-      pointerEvents: "auto",
-      ...stylePos
-    },
-    children: /* @__PURE__ */jsx(Box, {
-      as: "nav",
-      children
-    })
-  }) : null;
-  return /* @__PURE__ */jsx(Flex, {
-    sx: {
-      position: "relative",
-      display: "inline-block"
-    },
-    children: /* @__PURE__ */jsxs(Box, {
-      sx: {
-        position: "relative"
-      },
-      children: [/* @__PURE__ */jsx("button", {
-        ref: triggerRef,
-        onClick: toggle,
-        "aria-haspopup": "true",
-        "aria-expanded": isOpen,
-        style: {
-          background: "transparent",
-          border: 0,
-          padding: 4,
-          cursor: "pointer",
-          display: "inline-flex",
-          alignItems: "center",
-          justifyContent: "center"
-        },
-        children: /* @__PURE__ */jsx(Icon, {
-          icon: menuIcon
-        })
-      }), isOpen && panel]
-    })
-  });
-};
-
-//#endregion
-export { Menu };

package/dist/MetricCard/index.d.mts

@@ -1,153 +0,0 @@
-
-import { IconType } from "@ttoss/react-icons";
-
-//#region src/components/MetricCard/MetricCard.types.d.ts
-/**
- * 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;
-}
-//#endregion
-//#region src/components/MetricCard/MetricCard.d.ts
-/**
- * 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) => import("react/jsx-runtime").JSX.Element | null;
-//#endregion
-export { BaseMetric, DateMetric, Metric, MetricCard, MetricCardProps, NumberMetric, PercentageMetric };