@umodeapporg/ui 0.1.0

package/dist/components/UI/ControlledTooltip.js

@@ -0,0 +1,140 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useEffect, isValidElement, cloneElement } from "react";
+import { AnimatePresence, motion } from "motion/react";
+import { createPortal } from "react-dom";
+import { twMerge } from "tailwind-merge";
+import { composeRefs } from "../../helpers/composeRefs.js";
+import { useAnchoredFloating } from "../../hooks/useAnchoredFloating.js";
+import { tooltipVariants } from "../../motion/motionPresets.js";
+import "../../motion/motionTokens.js";
+const ORPHAN_TOOLTIP_CHECK_INTERVAL_MS = 250;
+const isTouchFirstDevice = () => window.matchMedia("(hover: none), (pointer: coarse)").matches;
+const ControlledTooltip = ({
+  content,
+  children,
+  className,
+  placement = "top",
+  offset = 6,
+  interactive,
+  open,
+  handler
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const triggerRef = useRef(null);
+  const triggerPointerTypeRef = useRef(null);
+  const pointerPositionRef = useRef(null);
+  const isControlledByHost = open !== void 0;
+  const opensOnHover = !interactive;
+  const resolvedOpen = isControlledByHost ? Boolean(open) : isOpen;
+  const { setReference, setFloating } = useAnchoredFloating({
+    open: resolvedOpen,
+    placement,
+    offsetPx: offset,
+    constrainToViewport: false
+  });
+  const closeTooltip = useCallback(() => {
+    setIsOpen(false);
+    handler?.(false);
+  }, [handler]);
+  const openTooltip = useCallback(() => {
+    const pointerType = triggerPointerTypeRef.current;
+    const openedByTouch = pointerType === null ? isTouchFirstDevice() : pointerType !== "mouse";
+    if (opensOnHover && openedByTouch) return;
+    setIsOpen(true);
+    handler?.(true);
+  }, [handler, opensOnHover]);
+  useEffect(() => {
+    if (isControlledByHost || !resolvedOpen || !opensOnHover) return void 0;
+    const belongsToTooltip = (element) => {
+      const trigger2 = triggerRef.current;
+      if (!element || !trigger2) return false;
+      if (trigger2.contains(element)) return true;
+      return element instanceof Element && element.closest('[role="tooltip"]') !== null;
+    };
+    const closeWhenPointerLeftTrigger = (event) => {
+      pointerPositionRef.current = { x: event.clientX, y: event.clientY };
+      if (!triggerRef.current) return;
+      if (belongsToTooltip(event.target instanceof Node ? event.target : null)) return;
+      closeTooltip();
+    };
+    const closeWhenPageIsHidden = () => {
+      if (document.hidden) closeTooltip();
+    };
+    const orphanTooltipCheck = window.setInterval(() => {
+      const trigger2 = triggerRef.current;
+      if (!trigger2) return;
+      if (!trigger2.isConnected) {
+        closeTooltip();
+        return;
+      }
+      const pointerPosition = pointerPositionRef.current;
+      if (!pointerPosition) return;
+      if (!belongsToTooltip(document.elementFromPoint(pointerPosition.x, pointerPosition.y))) closeTooltip();
+    }, ORPHAN_TOOLTIP_CHECK_INTERVAL_MS);
+    document.addEventListener("pointermove", closeWhenPointerLeftTrigger, { capture: true, passive: true });
+    document.addEventListener("pointerdown", closeTooltip, { capture: true, passive: true });
+    document.addEventListener("visibilitychange", closeWhenPageIsHidden);
+    window.addEventListener("blur", closeTooltip);
+    return () => {
+      window.clearInterval(orphanTooltipCheck);
+      document.removeEventListener("pointermove", closeWhenPointerLeftTrigger, { capture: true });
+      document.removeEventListener("pointerdown", closeTooltip, { capture: true });
+      document.removeEventListener("visibilitychange", closeWhenPageIsHidden);
+      window.removeEventListener("blur", closeTooltip);
+    };
+  }, [closeTooltip, isControlledByHost, resolvedOpen, opensOnHover]);
+  if (!isValidElement(children)) return /* @__PURE__ */ jsx(Fragment, { children });
+  const trigger = children;
+  const triggerWithTracking = cloneElement(trigger, {
+    ref: composeRefs(
+      (node) => {
+        triggerRef.current = node;
+      },
+      setReference,
+      trigger.ref
+    ),
+    onPointerEnter: (event) => {
+      triggerPointerTypeRef.current = event.pointerType || null;
+      triggerRef.current = event.currentTarget;
+      pointerPositionRef.current = { x: event.clientX, y: event.clientY };
+      trigger.props.onPointerEnter?.(event);
+      if (!isControlledByHost) openTooltip();
+    },
+    onMouseEnter: (event) => {
+      triggerRef.current = event.currentTarget;
+      pointerPositionRef.current = { x: event.clientX, y: event.clientY };
+      trigger.props.onMouseEnter?.(event);
+    },
+    onFocus: (event) => {
+      triggerRef.current = event.currentTarget;
+      trigger.props.onFocus?.(event);
+    }
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    triggerWithTracking,
+    createPortal(
+      /* @__PURE__ */ jsx(AnimatePresence, { children: resolvedOpen && /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          ref: setFloating,
+          variants: tooltipVariants,
+          initial: "hidden",
+          animate: "visible",
+          exit: "exit",
+          role: "tooltip",
+          className: twMerge(
+            "fixed left-0 top-0 z-[999] max-w-xs rounded-lg bg-ink px-3 py-2 text-xs font-normal text-ink-fg shadow-lg",
+            className
+          ),
+          children: content
+        },
+        "tooltip-bubble"
+      ) }),
+      document.body
+    )
+  ] });
+};
+export {
+  ControlledTooltip as default
+};
+//# sourceMappingURL=ControlledTooltip.js.map

package/dist/components/UI/ControlledTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlledTooltip.js","sources":["../../../src/components/UI/ControlledTooltip.tsx"],"sourcesContent":["import { cloneElement, isValidElement, useCallback, useEffect, useRef, useState } from 'react';\nimport { AnimatePresence, motion } from 'motion/react';\nimport type { FocusEvent, MouseEvent, PointerEvent, ReactElement, ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\nimport { twMerge } from 'tailwind-merge';\n\nimport { composeRefs } from '@/helpers/composeRefs';\nimport { TFloatingPlacement, useAnchoredFloating } from '@/hooks/useAnchoredFloating';\nimport { tooltipVariants } from '@/motion';\n\nexport interface IControlledTooltipProps {\n  content: ReactNode;\n  children: ReactNode;\n  className?: string;\n  placement?: TFloatingPlacement;\n  offset?: number;\n  /** Lifts the touch block: a click-to-open tooltip is a deliberate mobile pattern. */\n  interactive?: boolean;\n  open?: boolean;\n  handler?: (open: boolean) => void;\n}\n\ntype TTooltipTriggerProps = {\n  onPointerEnter?: (event: PointerEvent<HTMLElement>) => void;\n  onMouseEnter?: (event: MouseEvent<HTMLElement>) => void;\n  onFocus?: (event: FocusEvent<HTMLElement>) => void;\n  ref?: React.Ref<HTMLElement>;\n};\n\nconst ORPHAN_TOOLTIP_CHECK_INTERVAL_MS = 250;\n\nconst isTouchFirstDevice = (): boolean => window.matchMedia('(hover: none), (pointer: coarse)').matches;\n\n/**\n * Owns the open state instead of delegating to the positioning library, because a raw\n * hover interaction opens on touch (the browser's compatibility `mouseenter`) and never\n * closes when the trigger stops receiving `mouseleave`: detached from the DOM, covered by\n * a dialog, or re-rendered. Both leave a bubble parked on the screen.\n */\nconst ControlledTooltip: React.FC<IControlledTooltipProps> = ({\n  content,\n  children,\n  className,\n  placement = 'top',\n  offset = 6,\n  interactive,\n  open,\n  handler,\n}) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const triggerRef = useRef<HTMLElement | null>(null);\n  const triggerPointerTypeRef = useRef<string | null>(null);\n  const pointerPositionRef = useRef<{ x: number; y: number } | null>(null);\n\n  const isControlledByHost = open !== undefined;\n  const opensOnHover = !interactive;\n  const resolvedOpen = isControlledByHost ? Boolean(open) : isOpen;\n\n  const { setReference, setFloating } = useAnchoredFloating({\n    open: resolvedOpen,\n    placement,\n    offsetPx: offset,\n    constrainToViewport: false,\n  });\n\n  const closeTooltip = useCallback(() => {\n    setIsOpen(false);\n    handler?.(false);\n  }, [handler]);\n\n  const openTooltip = useCallback(() => {\n    const pointerType = triggerPointerTypeRef.current;\n    const openedByTouch = pointerType === null ? isTouchFirstDevice() : pointerType !== 'mouse';\n    if (opensOnHover && openedByTouch) return;\n\n    setIsOpen(true);\n    handler?.(true);\n  }, [handler, opensOnHover]);\n\n  useEffect(() => {\n    if (isControlledByHost || !resolvedOpen || !opensOnHover) return undefined;\n\n    const belongsToTooltip = (element: Node | null): boolean => {\n      const trigger = triggerRef.current;\n      if (!element || !trigger) return false;\n      if (trigger.contains(element)) return true;\n      return element instanceof Element && element.closest('[role=\"tooltip\"]') !== null;\n    };\n\n    const closeWhenPointerLeftTrigger = (event: globalThis.PointerEvent) => {\n      pointerPositionRef.current = { x: event.clientX, y: event.clientY };\n      if (!triggerRef.current) return;\n      if (belongsToTooltip(event.target instanceof Node ? event.target : null)) return;\n      closeTooltip();\n    };\n\n    const closeWhenPageIsHidden = () => {\n      if (document.hidden) closeTooltip();\n    };\n\n    const orphanTooltipCheck = window.setInterval(() => {\n      const trigger = triggerRef.current;\n      if (!trigger) return;\n      if (!trigger.isConnected) {\n        closeTooltip();\n        return;\n      }\n\n      const pointerPosition = pointerPositionRef.current;\n      if (!pointerPosition) return;\n      if (!belongsToTooltip(document.elementFromPoint(pointerPosition.x, pointerPosition.y))) closeTooltip();\n    }, ORPHAN_TOOLTIP_CHECK_INTERVAL_MS);\n\n    document.addEventListener('pointermove', closeWhenPointerLeftTrigger, { capture: true, passive: true });\n    document.addEventListener('pointerdown', closeTooltip, { capture: true, passive: true });\n    document.addEventListener('visibilitychange', closeWhenPageIsHidden);\n    window.addEventListener('blur', closeTooltip);\n\n    return () => {\n      window.clearInterval(orphanTooltipCheck);\n      document.removeEventListener('pointermove', closeWhenPointerLeftTrigger, { capture: true });\n      document.removeEventListener('pointerdown', closeTooltip, { capture: true });\n      document.removeEventListener('visibilitychange', closeWhenPageIsHidden);\n      window.removeEventListener('blur', closeTooltip);\n    };\n  }, [closeTooltip, isControlledByHost, resolvedOpen, opensOnHover]);\n\n  if (!isValidElement(children)) return <>{children}</>;\n\n  const trigger = children as ReactElement<TTooltipTriggerProps>;\n\n  const triggerWithTracking = cloneElement(trigger, {\n    ref: composeRefs<HTMLElement>(\n      (node) => {\n        triggerRef.current = node;\n      },\n      setReference,\n      (trigger as { ref?: React.Ref<HTMLElement> }).ref,\n    ),\n    onPointerEnter: (event: PointerEvent<HTMLElement>) => {\n      triggerPointerTypeRef.current = event.pointerType || null;\n      triggerRef.current = event.currentTarget;\n      pointerPositionRef.current = { x: event.clientX, y: event.clientY };\n      trigger.props.onPointerEnter?.(event);\n      if (!isControlledByHost) openTooltip();\n    },\n    onMouseEnter: (event: MouseEvent<HTMLElement>) => {\n      triggerRef.current = event.currentTarget;\n      pointerPositionRef.current = { x: event.clientX, y: event.clientY };\n      trigger.props.onMouseEnter?.(event);\n    },\n    onFocus: (event: FocusEvent<HTMLElement>) => {\n      triggerRef.current = event.currentTarget;\n      trigger.props.onFocus?.(event);\n    },\n  } as TTooltipTriggerProps);\n\n  return (\n    <>\n      {triggerWithTracking}\n\n      {createPortal(\n        <AnimatePresence>\n          {resolvedOpen && (\n            <motion.div\n              key=\"tooltip-bubble\"\n              ref={setFloating}\n              variants={tooltipVariants}\n              initial=\"hidden\"\n              animate=\"visible\"\n              exit=\"exit\"\n              role=\"tooltip\"\n              className={twMerge(\n                'fixed left-0 top-0 z-[999] max-w-xs rounded-lg bg-ink px-3 py-2 text-xs font-normal text-ink-fg shadow-lg',\n                className,\n              )}\n            >\n              {content}\n            </motion.div>\n          )}\n        </AnimatePresence>,\n        document.body,\n      )}\n    </>\n  );\n};\n\nexport default ControlledTooltip;\n"],"names":["trigger"],"mappings":"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"}

package/dist/components/UI/CustomBadge.d.ts

@@ -0,0 +1,15 @@
+export type TCustomBadgeTone = 'brand' | 'danger' | 'success' | 'warning' | 'info';
+interface ICustomBadgeProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'content'> {
+    content?: string | number;
+    children?: React.ReactNode;
+    tone?: TCustomBadgeTone;
+    invisible?: boolean;
+    className?: string;
+    containerClassName?: string;
+}
+/**
+ * Forwards its ref and spreads the DOM props onto the wrapper, so it can sit directly under a
+ * `ControlledTooltip` (which clones its child and injects a ref plus pointer handlers).
+ */
+declare const CustomBadge: import('react').ForwardRefExoticComponent<ICustomBadgeProps & import('react').RefAttributes<HTMLDivElement>>;
+export default CustomBadge;

package/dist/components/UI/CustomBadge.js

@@ -0,0 +1,34 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { mergeClasses } from "../../helpers/mergeClasses.js";
+const TONE_CLASS = {
+  brand: "bg-brand text-brand-fg",
+  danger: "bg-danger text-danger-fg",
+  success: "bg-success text-success-fg",
+  warning: "bg-warning text-warning-fg",
+  info: "bg-info text-info-fg"
+};
+const CustomBadge = forwardRef(
+  ({ content, children, tone = "brand", invisible, className, containerClassName, ...rest }, ref) => {
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: mergeClasses("relative inline-flex", containerClassName), children: [
+      children,
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: mergeClasses(
+            "pointer-events-none absolute -right-1 -top-1 flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-xxs font-bold leading-none",
+            TONE_CLASS[tone],
+            invisible && "hidden",
+            className
+          ),
+          children: content
+        }
+      )
+    ] });
+  }
+);
+CustomBadge.displayName = "CustomBadge";
+export {
+  CustomBadge as default
+};
+//# sourceMappingURL=CustomBadge.js.map

package/dist/components/UI/CustomBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomBadge.js","sources":["../../../src/components/UI/CustomBadge.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport { mergeClasses } from '@/helpers/mergeClasses';\n\nexport type TCustomBadgeTone = 'brand' | 'danger' | 'success' | 'warning' | 'info';\n\nconst TONE_CLASS: Record<TCustomBadgeTone, string> = {\n  brand: 'bg-brand text-brand-fg',\n  danger: 'bg-danger text-danger-fg',\n  success: 'bg-success text-success-fg',\n  warning: 'bg-warning text-warning-fg',\n  info: 'bg-info text-info-fg',\n};\n\ninterface ICustomBadgeProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'content'> {\n  content?: string | number;\n  children?: React.ReactNode;\n  tone?: TCustomBadgeTone;\n  invisible?: boolean;\n  className?: string;\n  containerClassName?: string;\n}\n\n/**\n * Forwards its ref and spreads the DOM props onto the wrapper, so it can sit directly under a\n * `ControlledTooltip` (which clones its child and injects a ref plus pointer handlers).\n */\nconst CustomBadge = forwardRef<HTMLDivElement, ICustomBadgeProps>(\n  ({ content, children, tone = 'brand', invisible, className, containerClassName, ...rest }, ref) => {\n    return (\n      <div {...rest} ref={ref} className={mergeClasses('relative inline-flex', containerClassName)}>\n        {children}\n        <span\n          className={mergeClasses(\n            'pointer-events-none absolute -right-1 -top-1 flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-xxs font-bold leading-none',\n            TONE_CLASS[tone],\n            invisible && 'hidden',\n            className,\n          )}\n        >\n          {content}\n        </span>\n      </div>\n    );\n  },\n);\n\nCustomBadge.displayName = 'CustomBadge';\n\nexport default CustomBadge;\n"],"names":[],"mappings":";;;AAMA,MAAM,aAA+C;AAAA,EACnD,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAAS;AAAA,EACT,MAAM;AACR;AAeA,MAAM,cAAc;AAAA,EAClB,CAAC,EAAE,SAAS,UAAU,OAAO,SAAS,WAAW,WAAW,oBAAoB,GAAG,KAAA,GAAQ,QAAQ;AACjG,WACE,qBAAC,SAAK,GAAG,MAAM,KAAU,WAAW,aAAa,wBAAwB,kBAAkB,GACxF,UAAA;AAAA,MAAA;AAAA,MACD;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA,WAAW,IAAI;AAAA,YACf,aAAa;AAAA,YACb;AAAA,UAAA;AAAA,UAGD,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GACF;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;"}

package/dist/components/UI/CustomCard.d.ts

@@ -0,0 +1,13 @@
+interface ICustomCardProps {
+    className?: string;
+    onClickHook?: () => void;
+    customRef?: React.Ref<HTMLDivElement>;
+    itsClickable?: boolean;
+    role?: React.AriaRole;
+    tabIndex?: number;
+    ariaHasPopup?: React.AriaAttributes['aria-haspopup'];
+    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+    children: React.ReactNode;
+}
+declare const CustomCard: React.FC<ICustomCardProps>;
+export default CustomCard;

package/dist/components/UI/CustomCard.js

@@ -0,0 +1,36 @@
+import { jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+const CustomCard = ({
+  children,
+  className,
+  onClickHook,
+  itsClickable = false,
+  customRef,
+  role,
+  tabIndex,
+  ariaHasPopup,
+  onKeyDown
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: customRef,
+      role,
+      tabIndex,
+      "aria-haspopup": ariaHasPopup,
+      className: classNames("rounded-lg border border-border", className, {
+        /* The interaction contract for a card: it lifts, its edge picks up the brand and
+           it presses in on click. Previously this transitioned `transform` while never
+           transforming anything, so the hover was instant and the 280ms was dead weight. */
+        ["interactive cursor-pointer shadow-elevation1 hover:-translate-y-px hover:border-brand-border hover:shadow-elevation2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-ring-offset"]: itsClickable
+      }),
+      onClick: onClickHook,
+      onKeyDown,
+      children
+    }
+  );
+};
+export {
+  CustomCard as default
+};
+//# sourceMappingURL=CustomCard.js.map

package/dist/components/UI/CustomCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomCard.js","sources":["../../../src/components/UI/CustomCard.tsx"],"sourcesContent":["import classNames from 'classnames';\n\ninterface ICustomCardProps {\n  className?: string;\n  onClickHook?: () => void;\n  customRef?: React.Ref<HTMLDivElement>;\n  itsClickable?: boolean;\n  role?: React.AriaRole;\n  tabIndex?: number;\n  ariaHasPopup?: React.AriaAttributes['aria-haspopup'];\n  onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;\n  children: React.ReactNode;\n}\n\nconst CustomCard: React.FC<ICustomCardProps> = ({\n  children,\n  className,\n  onClickHook,\n  itsClickable = false,\n  customRef,\n  role,\n  tabIndex,\n  ariaHasPopup,\n  onKeyDown,\n}) => {\n  return (\n    <div\n      ref={customRef}\n      role={role}\n      tabIndex={tabIndex}\n      aria-haspopup={ariaHasPopup}\n      className={classNames('rounded-lg border border-border', className, {\n        /* The interaction contract for a card: it lifts, its edge picks up the brand and\n           it presses in on click. Previously this transitioned `transform` while never\n           transforming anything, so the hover was instant and the 280ms was dead weight. */\n        ['interactive cursor-pointer shadow-elevation1 hover:-translate-y-px hover:border-brand-border hover:shadow-elevation2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-ring-offset']:\n          itsClickable,\n      })}\n      onClick={onClickHook}\n      onKeyDown={onKeyDown}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport default CustomCard;\n"],"names":[],"mappings":";;AAcA,MAAM,aAAyC,CAAC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,iBAAe;AAAA,MACf,WAAW,WAAW,mCAAmC,WAAW;AAAA;AAAA;AAAA;AAAA,QAIlE,CAAC,gQAAgQ,GAC/P;AAAA,MAAA,CACH;AAAA,MACD,SAAS;AAAA,MACT;AAAA,MAEC;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/components/UI/CustomChart.d.ts

@@ -0,0 +1,21 @@
+import { ApexOptions } from 'apexcharts';
+import * as React from 'react';
+interface ICustomChartProps {
+    id?: string;
+    className?: string;
+    stacked?: boolean;
+    stackType?: ApexChart['stackType'];
+    chartHeight: number;
+    type: ApexChart['type'];
+    series: ApexAxisChartSeries | ApexNonAxisChartSeries | undefined;
+    loadingChart?: boolean;
+    chartOptions?: ApexOptions;
+}
+/**
+ * Legacy fixed palette. Kept only for callers that pass their own `chartOptions.colors`
+ * and still import this; new charts inherit the themed series palette automatically.
+ * @deprecated read the series palette from `useThemeChartTokens()` instead.
+ */
+export declare const defaultChartColors: string[];
+declare const CustomChart: React.FC<ICustomChartProps>;
+export default CustomChart;

package/dist/components/UI/CustomChart.js

@@ -0,0 +1,108 @@
+import { jsx } from "react/jsx-runtime";
+import Chart from "react-apexcharts";
+import { useThemeChartTokens } from "../../helpers/themeTokens.js";
+import SkeletonLoading from "./SkeletonLoading.js";
+const languageOptions = {
+  chart: {
+    locales: [
+      {
+        name: "pt-BR",
+        options: {
+          months: [
+            "Janeiro",
+            "Fevereiro",
+            "Março",
+            "Abril",
+            "Maio",
+            "Junho",
+            "Julho",
+            "Agosto",
+            "Setembro",
+            "Outubro",
+            "Novembro",
+            "Dezembro"
+          ],
+          shortMonths: ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"],
+          days: ["Domingo", "Segunda-feira", "Terça-feira", "Quarta-feira", "Quinta-feira", "Sexta-feira", "Sábado"],
+          shortDays: ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb"],
+          toolbar: {
+            exportToSVG: "Baixar SVG",
+            exportToPNG: "Baixar PNG",
+            menu: "Menu",
+            selection: "Seleção",
+            selectionZoom: "Zoom de Seleção",
+            zoomIn: "Aproximar",
+            zoomOut: "Afastar",
+            pan: "Navegação",
+            reset: "Redefinir Zoom"
+          }
+        }
+      }
+    ]
+  }
+};
+const defaultChartColors = [
+  "#6A29A5",
+  "#E66300",
+  "#FAC710",
+  "#8B4513",
+  "#FF69B4",
+  "#8A2BE2",
+  "#4682B4",
+  "#32CD32",
+  "#FF4500",
+  "#FFD700"
+];
+const CustomChart = ({
+  id,
+  className,
+  stacked = false,
+  stackType = "normal",
+  type,
+  chartHeight,
+  series,
+  loadingChart,
+  chartOptions
+}) => {
+  const tokens = useThemeChartTokens();
+  const options = {
+    ...chartOptions,
+    chart: {
+      locales: [languageOptions.chart.locales[0]],
+      defaultLocale: "pt-BR",
+      type,
+      height: chartHeight,
+      stacked,
+      stackType,
+      background: "transparent",
+      foreColor: tokens.foregroundMuted,
+      zoom: {
+        enabled: false
+      },
+      toolbar: {
+        show: false
+      },
+      ...chartOptions?.chart
+    },
+    theme: { mode: tokens.mode, ...chartOptions?.theme },
+    grid: {
+      borderColor: tokens.grid,
+      ...chartOptions?.grid
+    },
+    tooltip: {
+      theme: tokens.mode,
+      ...chartOptions?.tooltip
+    },
+    legend: {
+      labels: { colors: tokens.foregroundMuted },
+      ...chartOptions?.legend
+    },
+    colors: chartOptions?.colors ?? tokens.series
+  };
+  return loadingChart ? /* @__PURE__ */ jsx(SkeletonLoading, { style: { height: chartHeight }, className: "!rounded-lg", icon: "insert_chart" }) : /* @__PURE__ */ jsx(Chart, { className, id, options, series, type, height: chartHeight });
+};
+export {
+  CustomChart as default,
+  defaultChartColors
+};
+//# sourceMappingURL=CustomChart.js.map

package/dist/components/UI/CustomChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomChart.js","sources":["../../../src/components/UI/CustomChart.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ApexOptions } from 'apexcharts';\nimport Chart from 'react-apexcharts';\n\nimport { useThemeChartTokens } from '@/helpers/themeTokens';\n\nimport SkeletonLoading from './SkeletonLoading';\n\ninterface ICustomChartProps {\n  id?: string;\n  className?: string;\n  stacked?: boolean;\n  stackType?: ApexChart['stackType'];\n  chartHeight: number;\n  type: ApexChart['type'];\n  series: ApexAxisChartSeries | ApexNonAxisChartSeries | undefined;\n  loadingChart?: boolean;\n  chartOptions?: ApexOptions;\n}\n\n/* eslint-disable i18n-check/no-portuguese-strings */\n// ApexCharts locale configuration: values are required string constants for the chart library.\nconst languageOptions = {\n  chart: {\n    locales: [\n      {\n        name: 'pt-BR',\n        options: {\n          months: [\n            'Janeiro',\n            'Fevereiro',\n            'Março',\n            'Abril',\n            'Maio',\n            'Junho',\n            'Julho',\n            'Agosto',\n            'Setembro',\n            'Outubro',\n            'Novembro',\n            'Dezembro',\n          ],\n          shortMonths: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],\n          days: ['Domingo', 'Segunda-feira', 'Terça-feira', 'Quarta-feira', 'Quinta-feira', 'Sexta-feira', 'Sábado'],\n          shortDays: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'],\n          toolbar: {\n            exportToSVG: 'Baixar SVG',\n            exportToPNG: 'Baixar PNG',\n            menu: 'Menu',\n            selection: 'Seleção',\n            selectionZoom: 'Zoom de Seleção',\n            zoomIn: 'Aproximar',\n            zoomOut: 'Afastar',\n            pan: 'Navegação',\n            reset: 'Redefinir Zoom',\n          },\n        },\n      },\n    ],\n    defaultLocale: 'pt-BR',\n  },\n};\n/* eslint-enable i18n-check/no-portuguese-strings */\n\n/**\n * Legacy fixed palette. Kept only for callers that pass their own `chartOptions.colors`\n * and still import this; new charts inherit the themed series palette automatically.\n * @deprecated read the series palette from `useThemeChartTokens()` instead.\n */\nexport const defaultChartColors = [\n  '#6A29A5',\n  '#E66300',\n  '#FAC710',\n  '#8B4513',\n  '#FF69B4',\n  '#8A2BE2',\n  '#4682B4',\n  '#32CD32',\n  '#FF4500',\n  '#FFD700',\n];\n\nconst CustomChart: React.FC<ICustomChartProps> = ({\n  id,\n  className,\n  stacked = false,\n  stackType = 'normal',\n  type,\n  chartHeight,\n  series,\n  loadingChart,\n  chartOptions,\n}) => {\n  const tokens = useThemeChartTokens();\n\n  const options: ApexOptions = {\n    ...chartOptions,\n    chart: {\n      locales: [languageOptions.chart.locales[0]],\n      defaultLocale: 'pt-BR',\n      type: type,\n      height: chartHeight,\n      stacked,\n      stackType,\n      background: 'transparent',\n      foreColor: tokens.foregroundMuted,\n      zoom: {\n        enabled: false,\n      },\n      toolbar: {\n        show: false,\n      },\n      ...chartOptions?.chart,\n    },\n    theme: { mode: tokens.mode, ...chartOptions?.theme },\n    grid: {\n      borderColor: tokens.grid,\n      ...chartOptions?.grid,\n    },\n    tooltip: {\n      theme: tokens.mode,\n      ...chartOptions?.tooltip,\n    },\n    legend: {\n      labels: { colors: tokens.foregroundMuted },\n      ...chartOptions?.legend,\n    },\n    colors: chartOptions?.colors ?? tokens.series,\n  };\n\n  return loadingChart ? (\n    <SkeletonLoading style={{ height: chartHeight }} className=\"!rounded-lg\" icon=\"insert_chart\" />\n  ) : (\n    <Chart className={className} id={id} options={options} series={series} type={type} height={chartHeight} />\n  );\n};\n\nexport default CustomChart;\n"],"names":[],"mappings":";;;;AAsBA,MAAM,kBAAkB;AAAA,EACtB,OAAO;AAAA,IACL,SAAS;AAAA,MACP;AAAA,QACE,MAAM;AAAA,QACN,SAAS;AAAA,UACP,QAAQ;AAAA,YACN;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,UAEF,aAAa,CAAC,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,KAAK;AAAA,UAChG,MAAM,CAAC,WAAW,iBAAiB,eAAe,gBAAgB,gBAAgB,eAAe,QAAQ;AAAA,UACzG,WAAW,CAAC,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,KAAK;AAAA,UAC3D,SAAS;AAAA,YACP,aAAa;AAAA,YACb,aAAa;AAAA,YACb,MAAM;AAAA,YACN,WAAW;AAAA,YACX,eAAe;AAAA,YACf,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,KAAK;AAAA,YACL,OAAO;AAAA,UAAA;AAAA,QACT;AAAA,MACF;AAAA,IACF;AAAA,EAGJ;AACF;AAQO,MAAM,qBAAqB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,cAA2C,CAAC;AAAA,EAChD;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,SAAS,oBAAA;AAEf,QAAM,UAAuB;AAAA,IAC3B,GAAG;AAAA,IACH,OAAO;AAAA,MACL,SAAS,CAAC,gBAAgB,MAAM,QAAQ,CAAC,CAAC;AAAA,MAC1C,eAAe;AAAA,MACf;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,WAAW,OAAO;AAAA,MAClB,MAAM;AAAA,QACJ,SAAS;AAAA,MAAA;AAAA,MAEX,SAAS;AAAA,QACP,MAAM;AAAA,MAAA;AAAA,MAER,GAAG,cAAc;AAAA,IAAA;AAAA,IAEnB,OAAO,EAAE,MAAM,OAAO,MAAM,GAAG,cAAc,MAAA;AAAA,IAC7C,MAAM;AAAA,MACJ,aAAa,OAAO;AAAA,MACpB,GAAG,cAAc;AAAA,IAAA;AAAA,IAEnB,SAAS;AAAA,MACP,OAAO,OAAO;AAAA,MACd,GAAG,cAAc;AAAA,IAAA;AAAA,IAEnB,QAAQ;AAAA,MACN,QAAQ,EAAE,QAAQ,OAAO,gBAAA;AAAA,MACzB,GAAG,cAAc;AAAA,IAAA;AAAA,IAEnB,QAAQ,cAAc,UAAU,OAAO;AAAA,EAAA;AAGzC,SAAO,mCACJ,iBAAA,EAAgB,OAAO,EAAE,QAAQ,YAAA,GAAe,WAAU,eAAc,MAAK,eAAA,CAAe,wBAE5F,OAAA,EAAM,WAAsB,IAAQ,SAAkB,QAAgB,MAAY,QAAQ,YAAA,CAAa;AAE5G;"}

package/dist/components/UI/DataTable/DataTable.d.ts

@@ -0,0 +1,100 @@
+import { JSX, ReactNode } from 'react';
+import { IDataTableConfig, IDataTableRow, IDataTableSortState, TDataTableFilterValues, TDataTableViewMode } from './types';
+import { IDataTableClientPaginationState, IDataTablePagination } from './useDataTableInstance';
+interface IDataTableProps<T extends IDataTableRow, C extends IDataTableRow = IDataTableRow> {
+    config: IDataTableConfig<T, C>;
+    rows: Array<T>;
+    loading?: boolean;
+    error?: boolean;
+    /** Cause behind `error`, so the empty state can name a denial instead of a system failure. */
+    errorCause?: unknown;
+    onRetry?: () => void;
+    emptyMessage?: string;
+    searchLabel?: string;
+    onSearch?: (value: string) => void;
+    initialSearch?: string;
+    onSearchTermChange?: (value: string) => void;
+    searchDisabled?: boolean;
+    searchDebounceTime?: number;
+    searchMinLength?: number;
+    /** Renders the search input in the toolbar's start (left) group instead of the end. */
+    searchAtStart?: boolean;
+    sort?: IDataTableSortState | null;
+    onSortChange?: (sort: IDataTableSortState | null) => void;
+    pagination?: IDataTablePagination;
+    /** Client mode: seeds page/pageSize (1-based page), e.g. from the URL. */
+    initialClientPagination?: IDataTableClientPaginationState;
+    /** Client mode: reports page/pageSize changes and keeps the page across in-place row updates. */
+    onClientPaginationChange?: (pagination: IDataTableClientPaginationState) => void;
+    toolbarSlot?: JSX.Element;
+    /**
+     * Applied filter values. Passing them (together with `config.filters`) makes
+     * the table render the always-visible active-filter chips above the toolbar,
+     * so the user never has to hover the button to see what is filtering.
+     */
+    filterValues?: TDataTableFilterValues;
+    onFilterValuesChange?: (values: TDataTableFilterValues) => void;
+    /** Rendered at the start (left) of the toolbar, before tabs and view toggle. */
+    toolbarStartSlot?: JSX.Element;
+    /**
+     * Full-width band rendered as the first row of the list body, spanning every
+     * column (below the header, above the data rows). Opt-in: omit for a normal
+     * table. When set, the empty state is skipped so the band stays visible even
+     * with zero data rows (e.g. an inline "create the first record" editor).
+     */
+    bodyTopRow?: ReactNode;
+    /** Client mode: reports the filtered (post-search) row count on every change. */
+    onFilteredCountChange?: (count: number) => void;
+    /**
+     * Controlled view mode. When provided, the host owns the state (e.g. to persist
+     * it) and must update it via `onViewModeChange`; omit for internal state.
+     */
+    viewMode?: TDataTableViewMode;
+    /**
+     * Fired on every view-toggle click, including re-selecting the active mode
+     * (hosts use it e.g. to reopen the grouping dialog).
+     */
+    onViewModeChange?: (mode: TDataTableViewMode) => void;
+    /**
+     * Where the "Columns" toggle renders: `header` (default, inside the table
+     * header), `toolbar` (next to the view toggle) or `footer` (bottom-left,
+     * on the same row as the pagination).
+     */
+    columnTogglePlacement?: 'header' | 'toolbar' | 'footer';
+    /**
+     * Enables infinite scroll in the Cards view: the table observes a bottom
+     * sentinel and calls `loadMore` while `hasMore`. Pass `source.cardsInfinite`
+     * from `useDataTableSource`. The Lista view keeps its pagination bar.
+     */
+    cardsInfiniteScroll?: {
+        hasMore: boolean;
+        loadingMore: boolean;
+        loadMore: () => void;
+    };
+    /**
+     * Hides the built-in segmented view toggle. Use when the host renders its own
+     * Cards/Lista switcher (e.g. a page-level `ControlledTabs`) and drives `viewMode`
+     * itself. Other consumers keep the default toggle.
+     */
+    hideViewToggle?: boolean;
+    /**
+     * Layout mode. `page` (default): the table owns a bounded, vertically-scrolling
+     * region (`flex-1 min-h-0`) for full-page lists. `fit`: the table sizes to its
+     * content and scrolls only horizontally — for embedding inside a dialog / card /
+     * editor grid where the host container owns vertical scroll. In `fit` mode the
+     * empty state is compact (no full illustration) so surrounding controls such as
+     * the add-row button stay visible.
+     */
+    layout?: 'page' | 'fit';
+    /** Reduces cell vertical padding for more visible rows per viewport. */
+    dense?: boolean;
+    /** Roomier cell padding and type scale, for tables that need to read bigger. */
+    spacious?: boolean;
+    /**
+     * Per-cell persistence state (`statuses` from `useDataTableCommitQueue`), painted
+     * on the cells so the user sees what is saving and what failed.
+     */
+    commitStatuses?: ReadonlyMap<string, string>;
+}
+declare const DataTable: <T extends IDataTableRow, C extends IDataTableRow = IDataTableRow>({ config: configProp, rows, loading, error, errorCause, onRetry, emptyMessage, searchLabel, onSearch, initialSearch, onSearchTermChange, searchDisabled, searchDebounceTime, searchMinLength, searchAtStart, sort, onSortChange, pagination, initialClientPagination, onClientPaginationChange, toolbarSlot, filterValues, onFilterValuesChange, toolbarStartSlot, bodyTopRow, onFilteredCountChange, viewMode: controlledViewMode, onViewModeChange, columnTogglePlacement, cardsInfiniteScroll, hideViewToggle, layout, dense: denseProp, spacious, commitStatuses, }: IDataTableProps<T, C>) => JSX.Element;
+export default DataTable;