@umodeapporg/ui 0.1.0

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

@@ -0,0 +1,28 @@
+import { JSX } from 'react';
+import { IDataTableRow, IDataTableTab, TDataTableViewMode } from './types';
+interface IDataTableToolbarProps<T extends IDataTableRow> {
+    tabs?: Array<IDataTableTab<T>>;
+    activeTab: string;
+    onTabChange: (value: string) => void;
+    showViewToggle?: boolean;
+    showGroupedView?: boolean;
+    showKanbanView?: boolean;
+    viewMode?: TDataTableViewMode;
+    onViewModeChange?: (mode: TDataTableViewMode) => void;
+    showSearch: boolean;
+    searchLabel?: string;
+    initialSearch?: string;
+    searchDisabled: boolean;
+    searchDebounceTime: number;
+    searchMinLength: number;
+    searchAtStart?: boolean;
+    onSearchInput: (value: string) => void;
+    toolbarSlot?: JSX.Element;
+    toolbarStartSlot?: JSX.Element;
+    /** Toggle de colunas quando o host opta por exibi-lo no toolbar em vez do cabeçalho. */
+    columnToggleSlot?: JSX.Element;
+    /** First load only: renders placeholders with the same footprint as the real controls. */
+    showSkeleton?: boolean;
+}
+declare const DataTableToolbar: <T extends IDataTableRow>({ tabs, activeTab, onTabChange, showViewToggle, showGroupedView, showKanbanView, viewMode, onViewModeChange, showSearch, searchLabel, initialSearch, searchDisabled, searchDebounceTime, searchMinLength, searchAtStart, onSearchInput, toolbarSlot, toolbarStartSlot, columnToggleSlot, showSkeleton, }: IDataTableToolbarProps<T>) => JSX.Element;
+export default DataTableToolbar;

package/dist/components/UI/DataTable/DataTableToolbar.js

@@ -0,0 +1,109 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import ControlledViewToggle from "../../Form/ControlledViewToggle.js";
+import "classnames";
+import "../../Form/ControlledButton.js";
+import "react";
+import "tailwind-merge";
+import "../ControlledMenu.js";
+import "motion/react";
+import "react-dom";
+import "@floating-ui/dom";
+import "../../../motion/motionPresets.js";
+import "../../../motion/motionTokens.js";
+import "../MaterialSymbol/index.js";
+import "date-fns";
+import "date-fns/locale";
+import "react-day-picker";
+import "../ControlledPopover.js";
+import "react-day-picker/style.css";
+import "../../DateTime/DateRangePicker.js";
+import "react-infinite-scroll-component";
+import "react-window";
+import "../NoDataFound/index.js";
+/* empty css                                    */
+import SkeletonLoading from "../SkeletonLoading.js";
+import "../../Search/filters/FiltersButton.js";
+import "../../../helpers/utilityHelpers.js";
+import "../../Form/ControlledDialog.js";
+import "react-router-dom";
+import UnifiedSearchBar from "../../Search/UnifiedSearchBar.js";
+import DataTableSegmentedTabs from "./DataTableSegmentedTabs.js";
+const DataTableToolbar = ({
+  tabs,
+  activeTab,
+  onTabChange,
+  showViewToggle = false,
+  showGroupedView = false,
+  showKanbanView = false,
+  viewMode = "list",
+  onViewModeChange,
+  showSearch,
+  searchLabel,
+  initialSearch,
+  searchDisabled,
+  searchDebounceTime,
+  searchMinLength,
+  searchAtStart = false,
+  onSearchInput,
+  toolbarSlot,
+  toolbarStartSlot,
+  columnToggleSlot,
+  showSkeleton = false
+}) => {
+  const { t } = useTranslation("ui");
+  const viewOptions = [
+    { value: "cards", icon: "grid_view", label: t("dataTable.viewCards") },
+    { value: "list", icon: "format_list_bulleted", label: t("dataTable.viewList") },
+    ...showGroupedView ? [{ value: "grouped", icon: "workspaces", label: t("dataTable.viewGrouped") }] : [],
+    ...showKanbanView ? [{ value: "kanban", icon: "view_kanban", label: t("dataTable.viewKanban") }] : []
+  ];
+  const searchBar = showSearch ? /* @__PURE__ */ jsx(
+    UnifiedSearchBar,
+    {
+      mode: "callback",
+      containerClassName: "flex w-full items-center gap-x-2 tablet:w-72 tablet:shrink-0",
+      className: "!h-10 !min-h-10 !w-full tablet:!w-72",
+      label: searchLabel ?? t("actions.search"),
+      initialValue: initialSearch,
+      disabled: searchDisabled,
+      debounceTime: searchDebounceTime,
+      minSearchLength: searchMinLength,
+      showClearButton: true,
+      filterCallback: onSearchInput
+    }
+  ) : null;
+  const searchSkeleton = showSearch ? /* @__PURE__ */ jsx(SkeletonLoading, { className: "!h-10 !w-full !rounded-lg tablet:!w-72" }) : null;
+  if (showSkeleton) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex w-full min-w-0 flex-wrap items-center gap-3 tablet:w-auto", children: [
+        toolbarStartSlot && /* @__PURE__ */ jsx(SkeletonLoading, { className: "!h-10 !w-32 !rounded-lg" }),
+        tabs && tabs.length > 0 && /* @__PURE__ */ jsx(SkeletonLoading, { className: "!h-10 !w-64 !rounded-xl" }),
+        searchAtStart && searchSkeleton
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-wrap items-center gap-3 tablet:w-auto tablet:flex-nowrap", children: [
+        !searchAtStart && searchSkeleton,
+        columnToggleSlot && /* @__PURE__ */ jsx(SkeletonLoading, { className: "!h-10 !w-28 !rounded-lg" }),
+        showViewToggle && onViewModeChange && /* @__PURE__ */ jsx(SkeletonLoading, { className: "!h-10 !w-24 !rounded-lg" }),
+        toolbarSlot && /* @__PURE__ */ jsx(SkeletonLoading, { className: "!h-10 !w-28 !rounded-lg" })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex w-full min-w-0 flex-wrap items-center gap-3 tablet:w-auto", children: [
+      toolbarStartSlot,
+      tabs && tabs.length > 0 && /* @__PURE__ */ jsx(DataTableSegmentedTabs, { tabs, activeTab, onChange: onTabChange }),
+      searchAtStart && searchBar
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-wrap items-center gap-3 tablet:w-auto tablet:flex-nowrap", children: [
+      !searchAtStart && searchBar,
+      columnToggleSlot,
+      showViewToggle && onViewModeChange && /* @__PURE__ */ jsx(ControlledViewToggle, { options: viewOptions, value: viewMode, onChange: onViewModeChange }),
+      toolbarSlot
+    ] })
+  ] });
+};
+export {
+  DataTableToolbar as default
+};
+//# sourceMappingURL=DataTableToolbar.js.map

package/dist/components/UI/DataTable/DataTableToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableToolbar.js","sources":["../../../../src/components/UI/DataTable/DataTableToolbar.tsx"],"sourcesContent":["import { JSX } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledViewToggle, { type IControlledViewToggleOption } from '@/components/Form/ControlledViewToggle';\nimport { UnifiedSearchBar } from '@/components/Search';\nimport SkeletonLoading from '@/components/UI/SkeletonLoading';\n\nimport DataTableSegmentedTabs from './DataTableSegmentedTabs';\nimport type { IDataTableRow, IDataTableTab, TDataTableViewMode } from './types';\n\ninterface IDataTableToolbarProps<T extends IDataTableRow> {\n  tabs?: Array<IDataTableTab<T>>;\n  activeTab: string;\n  onTabChange: (value: string) => void;\n  showViewToggle?: boolean;\n  showGroupedView?: boolean;\n  showKanbanView?: boolean;\n  viewMode?: TDataTableViewMode;\n  onViewModeChange?: (mode: TDataTableViewMode) => void;\n  showSearch: boolean;\n  searchLabel?: string;\n  initialSearch?: string;\n  searchDisabled: boolean;\n  searchDebounceTime: number;\n  searchMinLength: number;\n  searchAtStart?: boolean;\n  onSearchInput: (value: string) => void;\n  toolbarSlot?: JSX.Element;\n  toolbarStartSlot?: JSX.Element;\n  /** Toggle de colunas quando o host opta por exibi-lo no toolbar em vez do cabeçalho. */\n  columnToggleSlot?: JSX.Element;\n  /** First load only: renders placeholders with the same footprint as the real controls. */\n  showSkeleton?: boolean;\n}\n\nconst DataTableToolbar = <T extends IDataTableRow>({\n  tabs,\n  activeTab,\n  onTabChange,\n  showViewToggle = false,\n  showGroupedView = false,\n  showKanbanView = false,\n  viewMode = 'list',\n  onViewModeChange,\n  showSearch,\n  searchLabel,\n  initialSearch,\n  searchDisabled,\n  searchDebounceTime,\n  searchMinLength,\n  searchAtStart = false,\n  onSearchInput,\n  toolbarSlot,\n  toolbarStartSlot,\n  columnToggleSlot,\n  showSkeleton = false,\n}: IDataTableToolbarProps<T>) => {\n  const { t } = useTranslation('ui');\n\n  const viewOptions: Array<IControlledViewToggleOption<TDataTableViewMode>> = [\n    { value: 'cards', icon: 'grid_view', label: t('dataTable.viewCards') },\n    { value: 'list', icon: 'format_list_bulleted', label: t('dataTable.viewList') },\n    ...(showGroupedView\n      ? [{ value: 'grouped' as const, icon: 'workspaces' as const, label: t('dataTable.viewGrouped') }]\n      : []),\n    ...(showKanbanView\n      ? [{ value: 'kanban' as const, icon: 'view_kanban' as const, label: t('dataTable.viewKanban') }]\n      : []),\n  ];\n\n  const searchBar = showSearch ? (\n    <UnifiedSearchBar\n      mode=\"callback\"\n      containerClassName=\"flex w-full items-center gap-x-2 tablet:w-72 tablet:shrink-0\"\n      className=\"!h-10 !min-h-10 !w-full tablet:!w-72\"\n      label={searchLabel ?? t('actions.search')}\n      initialValue={initialSearch}\n      disabled={searchDisabled}\n      debounceTime={searchDebounceTime}\n      minSearchLength={searchMinLength}\n      showClearButton\n      filterCallback={onSearchInput}\n    />\n  ) : null;\n\n  const searchSkeleton = showSearch ? <SkeletonLoading className=\"!h-10 !w-full !rounded-lg tablet:!w-72\" /> : null;\n\n  if (showSkeleton) {\n    return (\n      <div className=\"flex flex-wrap items-center justify-between gap-3\">\n        <div className=\"flex w-full min-w-0 flex-wrap items-center gap-3 tablet:w-auto\">\n          {toolbarStartSlot && <SkeletonLoading className=\"!h-10 !w-32 !rounded-lg\" />}\n          {tabs && tabs.length > 0 && <SkeletonLoading className=\"!h-10 !w-64 !rounded-xl\" />}\n          {searchAtStart && searchSkeleton}\n        </div>\n\n        <div className=\"flex w-full flex-wrap items-center gap-3 tablet:w-auto tablet:flex-nowrap\">\n          {!searchAtStart && searchSkeleton}\n          {columnToggleSlot && <SkeletonLoading className=\"!h-10 !w-28 !rounded-lg\" />}\n          {showViewToggle && onViewModeChange && <SkeletonLoading className=\"!h-10 !w-24 !rounded-lg\" />}\n          {toolbarSlot && <SkeletonLoading className=\"!h-10 !w-28 !rounded-lg\" />}\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex flex-wrap items-center justify-between gap-3\">\n      <div className=\"flex w-full min-w-0 flex-wrap items-center gap-3 tablet:w-auto\">\n        {toolbarStartSlot}\n        {tabs && tabs.length > 0 && <DataTableSegmentedTabs tabs={tabs} activeTab={activeTab} onChange={onTabChange} />}\n        {searchAtStart && searchBar}\n      </div>\n\n      <div className=\"flex w-full flex-wrap items-center gap-3 tablet:w-auto tablet:flex-nowrap\">\n        {!searchAtStart && searchBar}\n        {columnToggleSlot}\n        {showViewToggle && onViewModeChange && (\n          <ControlledViewToggle options={viewOptions} value={viewMode} onChange={onViewModeChange} />\n        )}\n        {toolbarSlot}\n      </div>\n    </div>\n  );\n};\n\nexport default DataTableToolbar;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,MAAM,mBAAmB,CAA0B;AAAA,EACjD;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AACjB,MAAiC;AAC/B,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AAEjC,QAAM,cAAsE;AAAA,IAC1E,EAAE,OAAO,SAAS,MAAM,aAAa,OAAO,EAAE,qBAAqB,EAAA;AAAA,IACnE,EAAE,OAAO,QAAQ,MAAM,wBAAwB,OAAO,EAAE,oBAAoB,EAAA;AAAA,IAC5E,GAAI,kBACA,CAAC,EAAE,OAAO,WAAoB,MAAM,cAAuB,OAAO,EAAE,uBAAuB,EAAA,CAAG,IAC9F,CAAA;AAAA,IACJ,GAAI,iBACA,CAAC,EAAE,OAAO,UAAmB,MAAM,eAAwB,OAAO,EAAE,sBAAsB,EAAA,CAAG,IAC7F,CAAA;AAAA,EAAC;AAGP,QAAM,YAAY,aAChB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,oBAAmB;AAAA,MACnB,WAAU;AAAA,MACV,OAAO,eAAe,EAAE,gBAAgB;AAAA,MACxC,cAAc;AAAA,MACd,UAAU;AAAA,MACV,cAAc;AAAA,MACd,iBAAiB;AAAA,MACjB,iBAAe;AAAA,MACf,gBAAgB;AAAA,IAAA;AAAA,EAAA,IAEhB;AAEJ,QAAM,iBAAiB,aAAa,oBAAC,iBAAA,EAAgB,WAAU,0CAAyC,IAAK;AAE7G,MAAI,cAAc;AAChB,WACE,qBAAC,OAAA,EAAI,WAAU,qDACb,UAAA;AAAA,MAAA,qBAAC,OAAA,EAAI,WAAU,kEACZ,UAAA;AAAA,QAAA,oBAAoB,oBAAC,iBAAA,EAAgB,WAAU,0BAAA,CAA0B;AAAA,QACzE,QAAQ,KAAK,SAAS,KAAK,oBAAC,iBAAA,EAAgB,WAAU,2BAA0B;AAAA,QAChF,iBAAiB;AAAA,MAAA,GACpB;AAAA,MAEA,qBAAC,OAAA,EAAI,WAAU,6EACZ,UAAA;AAAA,QAAA,CAAC,iBAAiB;AAAA,QAClB,oBAAoB,oBAAC,iBAAA,EAAgB,WAAU,0BAAA,CAA0B;AAAA,QACzE,kBAAkB,oBAAoB,oBAAC,iBAAA,EAAgB,WAAU,2BAA0B;AAAA,QAC3F,eAAe,oBAAC,iBAAA,EAAgB,WAAU,0BAAA,CAA0B;AAAA,MAAA,EAAA,CACvE;AAAA,IAAA,GACF;AAAA,EAEJ;AAEA,SACE,qBAAC,OAAA,EAAI,WAAU,qDACb,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAU,kEACZ,UAAA;AAAA,MAAA;AAAA,MACA,QAAQ,KAAK,SAAS,yBAAM,wBAAA,EAAuB,MAAY,WAAsB,UAAU,YAAA,CAAa;AAAA,MAC5G,iBAAiB;AAAA,IAAA,GACpB;AAAA,IAEA,qBAAC,OAAA,EAAI,WAAU,6EACZ,UAAA;AAAA,MAAA,CAAC,iBAAiB;AAAA,MAClB;AAAA,MACA,kBAAkB,oBACjB,oBAAC,sBAAA,EAAqB,SAAS,aAAa,OAAO,UAAU,UAAU,iBAAA,CAAkB;AAAA,MAE1F;AAAA,IAAA,EAAA,CACH;AAAA,EAAA,GACF;AAEJ;"}

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

@@ -0,0 +1,16 @@
+import { IDataTableFiltersConfig, IDataTableRow, TDataTableFilterValues } from './types';
+/**
+ * CLIENT-mode filtering driven by the table's filter config. Only active fields
+ * that declare a `predicate` narrow the rows. Server-only fields (no
+ * `predicate`) are ignored here. `combinator` decides whether a row must pass
+ * every active field or at least one.
+ */
+export declare const applyDataTableFilters: <T extends IDataTableRow>(rows: Array<T>, filters: IDataTableFiltersConfig<T> | undefined, values: TDataTableFilterValues) => Array<T>;
+/**
+ * SERVER-mode counterpart: collects the backend query params from every active
+ * field that declares `toServerParams`. The host merges these into its fetch
+ * instead of filtering in memory.
+ */
+export declare const buildDataTableFilterParams: <T extends IDataTableRow>(filters: IDataTableFiltersConfig<T> | undefined, values: TDataTableFilterValues) => Record<string, unknown>;
+/** Number of active filter fields. Drives the filter button badge count. */
+export declare const countActiveDataTableFilters: <T extends IDataTableRow>(filters: IDataTableFiltersConfig<T> | undefined, values: TDataTableFilterValues) => number;

package/dist/components/UI/DataTable/applyDataTableFilters.js

@@ -0,0 +1,53 @@
+import "react/jsx-runtime";
+import "classnames";
+import "react-i18next";
+import "../../Form/ControlledButton.js";
+import "react";
+import "tailwind-merge";
+import "../ControlledMenu.js";
+import "motion/react";
+import "react-dom";
+import "@floating-ui/dom";
+import "../../../motion/motionPresets.js";
+import "../../../motion/motionTokens.js";
+import "../MaterialSymbol/index.js";
+import { countActiveFilters, isFilterValueEmpty } from "../../Search/filters/filterValues.js";
+import "date-fns";
+import "date-fns/locale";
+import "react-day-picker";
+import "../ControlledPopover.js";
+import "react-day-picker/style.css";
+import "../../DateTime/DateRangePicker.js";
+import "react-infinite-scroll-component";
+import "react-window";
+import "../NoDataFound/index.js";
+/* empty css                                    */
+import "../../Search/filters/FiltersButton.js";
+import "../../../helpers/utilityHelpers.js";
+import "../../Form/ControlledDialog.js";
+import "react-router-dom";
+const isFieldActive = (field, values) => !isFilterValueEmpty(field, values?.[field.key]);
+const applyDataTableFilters = (rows, filters, values) => {
+  if (!filters) return rows;
+  const activeFields = (filters.fields ?? []).filter((field) => isFieldActive(field, values) && field.predicate);
+  if (activeFields.length === 0) return rows;
+  const matches = (row, field) => field.predicate ? field.predicate(row, values?.[field.key]) : true;
+  if (filters.combinator === "OR") {
+    return (rows ?? []).filter((row) => activeFields.some((field) => matches(row, field)));
+  }
+  return (rows ?? []).filter((row) => activeFields.every((field) => matches(row, field)));
+};
+const buildDataTableFilterParams = (filters, values) => {
+  if (!filters) return {};
+  return (filters.fields ?? []).reduce((params, field) => {
+    if (!isFieldActive(field, values) || !field.toServerParams) return params;
+    return { ...params, ...field.toServerParams(values?.[field.key]) };
+  }, {});
+};
+const countActiveDataTableFilters = (filters, values) => filters ? countActiveFilters(filters.fields ?? [], values ?? {}) : 0;
+export {
+  applyDataTableFilters,
+  buildDataTableFilterParams,
+  countActiveDataTableFilters
+};
+//# sourceMappingURL=applyDataTableFilters.js.map

package/dist/components/UI/DataTable/applyDataTableFilters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"applyDataTableFilters.js","sources":["../../../../src/components/UI/DataTable/applyDataTableFilters.ts"],"sourcesContent":["import { countActiveFilters, isFilterValueEmpty } from '@/components/Search/filters';\n\nimport type { IDataTableFiltersConfig, IDataTableRow, TDataTableFilterField, TDataTableFilterValues } from './types';\n\nconst isFieldActive = <T extends IDataTableRow>(\n  field: TDataTableFilterField<T>,\n  values: TDataTableFilterValues,\n): boolean => !isFilterValueEmpty(field, values?.[field.key]);\n\n/**\n * CLIENT-mode filtering driven by the table's filter config. Only active fields\n * that declare a `predicate` narrow the rows. Server-only fields (no\n * `predicate`) are ignored here. `combinator` decides whether a row must pass\n * every active field or at least one.\n */\nexport const applyDataTableFilters = <T extends IDataTableRow>(\n  rows: Array<T>,\n  filters: IDataTableFiltersConfig<T> | undefined,\n  values: TDataTableFilterValues,\n): Array<T> => {\n  if (!filters) return rows;\n\n  const activeFields = (filters.fields ?? []).filter((field) => isFieldActive(field, values) && field.predicate);\n  if (activeFields.length === 0) return rows;\n\n  const matches = (row: T, field: TDataTableFilterField<T>) =>\n    field.predicate ? field.predicate(row, values?.[field.key]) : true;\n\n  if (filters.combinator === 'OR') {\n    return (rows ?? []).filter((row) => activeFields.some((field) => matches(row, field)));\n  }\n\n  return (rows ?? []).filter((row) => activeFields.every((field) => matches(row, field)));\n};\n\n/**\n * SERVER-mode counterpart: collects the backend query params from every active\n * field that declares `toServerParams`. The host merges these into its fetch\n * instead of filtering in memory.\n */\nexport const buildDataTableFilterParams = <T extends IDataTableRow>(\n  filters: IDataTableFiltersConfig<T> | undefined,\n  values: TDataTableFilterValues,\n): Record<string, unknown> => {\n  if (!filters) return {};\n\n  return (filters.fields ?? []).reduce<Record<string, unknown>>((params, field) => {\n    if (!isFieldActive(field, values) || !field.toServerParams) return params;\n\n    return { ...params, ...field.toServerParams(values?.[field.key]) };\n  }, {});\n};\n\n/** Number of active filter fields. Drives the filter button badge count. */\nexport const countActiveDataTableFilters = <T extends IDataTableRow>(\n  filters: IDataTableFiltersConfig<T> | undefined,\n  values: TDataTableFilterValues,\n): number => (filters ? countActiveFilters(filters.fields ?? [], values ?? {}) : 0);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,MAAM,gBAAgB,CACpB,OACA,WACY,CAAC,mBAAmB,OAAO,SAAS,MAAM,GAAG,CAAC;AAQrD,MAAM,wBAAwB,CACnC,MACA,SACA,WACa;AACb,MAAI,CAAC,QAAS,QAAO;AAErB,QAAM,gBAAgB,QAAQ,UAAU,CAAA,GAAI,OAAO,CAAC,UAAU,cAAc,OAAO,MAAM,KAAK,MAAM,SAAS;AAC7G,MAAI,aAAa,WAAW,EAAG,QAAO;AAEtC,QAAM,UAAU,CAAC,KAAQ,UACvB,MAAM,YAAY,MAAM,UAAU,KAAK,SAAS,MAAM,GAAG,CAAC,IAAI;AAEhE,MAAI,QAAQ,eAAe,MAAM;AAC/B,YAAQ,QAAQ,CAAA,GAAI,OAAO,CAAC,QAAQ,aAAa,KAAK,CAAC,UAAU,QAAQ,KAAK,KAAK,CAAC,CAAC;AAAA,EACvF;AAEA,UAAQ,QAAQ,CAAA,GAAI,OAAO,CAAC,QAAQ,aAAa,MAAM,CAAC,UAAU,QAAQ,KAAK,KAAK,CAAC,CAAC;AACxF;AAOO,MAAM,6BAA6B,CACxC,SACA,WAC4B;AAC5B,MAAI,CAAC,QAAS,QAAO,CAAA;AAErB,UAAQ,QAAQ,UAAU,CAAA,GAAI,OAAgC,CAAC,QAAQ,UAAU;AAC/E,QAAI,CAAC,cAAc,OAAO,MAAM,KAAK,CAAC,MAAM,eAAgB,QAAO;AAEnE,WAAO,EAAE,GAAG,QAAQ,GAAG,MAAM,eAAe,SAAS,MAAM,GAAG,CAAC,EAAA;AAAA,EACjE,GAAG,CAAA,CAAE;AACP;AAGO,MAAM,8BAA8B,CACzC,SACA,WACY,UAAU,mBAAmB,QAAQ,UAAU,CAAA,GAAI,UAAU,CAAA,CAAE,IAAI;"}

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

@@ -0,0 +1,7 @@
+import { IDataTableActionItem, IDataTableRow } from '../types';
+interface IDataTableActionsCellProps<T extends IDataTableRow> {
+    row: T;
+    actions: Array<IDataTableActionItem<T>>;
+}
+declare const DataTableActionsCell: <T extends IDataTableRow>({ row, actions }: IDataTableActionsCellProps<T>) => import("react").JSX.Element | null;
+export default DataTableActionsCell;

package/dist/components/UI/DataTable/cells/DataTableActionsCell.js

@@ -0,0 +1,55 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import ControlledButton from "../../../Form/ControlledButton.js";
+import ControlledSwitch from "../../../Form/ControlledSwitch.js";
+import { useUiAccess } from "../../access/UiAccessContext.js";
+import ControlledTooltip from "../../ControlledTooltip.js";
+import { MaterialSymbol } from "../../MaterialSymbol/index.js";
+import { formatNumber } from "../../../../helpers/formatHelpers.js";
+const DataTableActionsCell = ({ row, actions }) => {
+  const { t } = useTranslation("ui");
+  const { check } = useUiAccess();
+  const visibleActions = actions.filter((action) => !action.hidden?.(row));
+  if (visibleActions.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end gap-1", onClick: (event) => event.stopPropagation(), children: visibleActions.map((action) => {
+    const label = typeof action.label === "function" ? action.label(row) : action.label;
+    const icon = typeof action.icon === "function" ? action.icon(row) : action.icon;
+    const count = action.count?.(row);
+    const isDeniedByPermission = Boolean(action.capability) && !check(action.capability ?? [], "any");
+    const isDisabled = isDeniedByPermission || action.disabled?.(row);
+    if (action.toggle) {
+      return /* @__PURE__ */ jsx(ControlledTooltip, { content: isDeniedByPermission ? t("permissions.deniedAction") : label, children: /* @__PURE__ */ jsx("span", { className: "inline-flex px-1", children: /* @__PURE__ */ jsx(
+        ControlledSwitch,
+        {
+          size: "sm",
+          checked: action.toggle(row),
+          disabled: isDisabled,
+          ariaLabel: label,
+          onChange: () => action.onClick(row)
+        }
+      ) }) }, action.key);
+    }
+    return /* @__PURE__ */ jsx(ControlledTooltip, { content: isDeniedByPermission ? t("permissions.deniedAction") : label, children: /* @__PURE__ */ jsx("span", { className: "inline-flex", children: /* @__PURE__ */ jsxs(
+      ControlledButton,
+      {
+        defaultHtmlButton: true,
+        "aria-label": label,
+        disabled: isDisabled,
+        onClick: () => action.onClick(row),
+        className: classNames(
+          "inline-flex cursor-pointer items-center justify-center gap-1 rounded-md p-1.5 transition-colors disabled:cursor-not-allowed",
+          action.danger ? "text-danger-emphasis hover:bg-danger-soft disabled:text-danger-soft" : "text-foreground-subtle hover:bg-muted-hover hover:text-foreground-muted disabled:text-foreground-faint"
+        ),
+        children: [
+          icon && /* @__PURE__ */ jsx(MaterialSymbol, { icon, size: 18 }),
+          typeof count === "number" && /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold", children: formatNumber(count) })
+        ]
+      }
+    ) }) }, action.key);
+  }) });
+};
+export {
+  DataTableActionsCell as default
+};
+//# sourceMappingURL=DataTableActionsCell.js.map

package/dist/components/UI/DataTable/cells/DataTableActionsCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableActionsCell.js","sources":["../../../../../src/components/UI/DataTable/cells/DataTableActionsCell.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport ControlledSwitch from '@/components/Form/ControlledSwitch';\nimport { useUiAccess } from '@/components/UI/access/UiAccessContext';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { MaterialSymbol } from '@/components/UI/MaterialSymbol';\nimport { formatNumber } from '@/helpers/formatHelpers';\n\nimport type { IDataTableActionItem, IDataTableRow } from '../types';\n\ninterface IDataTableActionsCellProps<T extends IDataTableRow> {\n  row: T;\n  actions: Array<IDataTableActionItem<T>>;\n}\n\nconst DataTableActionsCell = <T extends IDataTableRow>({ row, actions }: IDataTableActionsCellProps<T>) => {\n  const { t } = useTranslation('ui');\n  const { check } = useUiAccess();\n\n  const visibleActions = actions.filter((action) => !action.hidden?.(row));\n\n  if (visibleActions.length === 0) return null;\n\n  return (\n    <div className=\"flex items-center justify-end gap-1\" onClick={(event) => event.stopPropagation()}>\n      {visibleActions.map((action) => {\n        const label = typeof action.label === 'function' ? action.label(row) : action.label;\n        const icon = typeof action.icon === 'function' ? action.icon(row) : action.icon;\n        const count = action.count?.(row);\n        const isDeniedByPermission = Boolean(action.capability) && !check(action.capability ?? [], 'any');\n        const isDisabled = isDeniedByPermission || action.disabled?.(row);\n\n        if (action.toggle) {\n          return (\n            <ControlledTooltip key={action.key} content={isDeniedByPermission ? t('permissions.deniedAction') : label}>\n              <span className=\"inline-flex px-1\">\n                <ControlledSwitch\n                  size=\"sm\"\n                  checked={action.toggle(row)}\n                  disabled={isDisabled}\n                  ariaLabel={label}\n                  onChange={() => action.onClick(row)}\n                />\n              </span>\n            </ControlledTooltip>\n          );\n        }\n\n        return (\n          <ControlledTooltip key={action.key} content={isDeniedByPermission ? t('permissions.deniedAction') : label}>\n            <span className=\"inline-flex\">\n              <ControlledButton\n                defaultHtmlButton\n                aria-label={label}\n                disabled={isDisabled}\n                onClick={() => action.onClick(row)}\n                className={classNames(\n                  'inline-flex cursor-pointer items-center justify-center gap-1 rounded-md p-1.5 transition-colors disabled:cursor-not-allowed',\n                  action.danger\n                    ? 'text-danger-emphasis hover:bg-danger-soft disabled:text-danger-soft'\n                    : 'text-foreground-subtle hover:bg-muted-hover hover:text-foreground-muted disabled:text-foreground-faint',\n                )}\n              >\n                {icon && <MaterialSymbol icon={icon} size={18} />}\n                {typeof count === 'number' && <span className=\"text-xs font-semibold\">{formatNumber(count)}</span>}\n              </ControlledButton>\n            </span>\n          </ControlledTooltip>\n        );\n      })}\n    </div>\n  );\n};\n\nexport default DataTableActionsCell;\n"],"names":[],"mappings":";;;;;;;;;AAiBA,MAAM,uBAAuB,CAA0B,EAAE,KAAK,cAA6C;AACzG,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AACjC,QAAM,EAAE,MAAA,IAAU,YAAA;AAElB,QAAM,iBAAiB,QAAQ,OAAO,CAAC,WAAW,CAAC,OAAO,SAAS,GAAG,CAAC;AAEvE,MAAI,eAAe,WAAW,EAAG,QAAO;AAExC,SACE,oBAAC,OAAA,EAAI,WAAU,uCAAsC,SAAS,CAAC,UAAU,MAAM,gBAAA,GAC5E,UAAA,eAAe,IAAI,CAAC,WAAW;AAC9B,UAAM,QAAQ,OAAO,OAAO,UAAU,aAAa,OAAO,MAAM,GAAG,IAAI,OAAO;AAC9E,UAAM,OAAO,OAAO,OAAO,SAAS,aAAa,OAAO,KAAK,GAAG,IAAI,OAAO;AAC3E,UAAM,QAAQ,OAAO,QAAQ,GAAG;AAChC,UAAM,uBAAuB,QAAQ,OAAO,UAAU,KAAK,CAAC,MAAM,OAAO,cAAc,CAAA,GAAI,KAAK;AAChG,UAAM,aAAa,wBAAwB,OAAO,WAAW,GAAG;AAEhE,QAAI,OAAO,QAAQ;AACjB,aACE,oBAAC,mBAAA,EAAmC,SAAS,uBAAuB,EAAE,0BAA0B,IAAI,OAClG,UAAA,oBAAC,QAAA,EAAK,WAAU,oBACd,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS,OAAO,OAAO,GAAG;AAAA,UAC1B,UAAU;AAAA,UACV,WAAW;AAAA,UACX,UAAU,MAAM,OAAO,QAAQ,GAAG;AAAA,QAAA;AAAA,MAAA,GAEtC,EAAA,GATsB,OAAO,GAU/B;AAAA,IAEJ;AAEA,WACE,oBAAC,mBAAA,EAAmC,SAAS,uBAAuB,EAAE,0BAA0B,IAAI,OAClG,UAAA,oBAAC,QAAA,EAAK,WAAU,eACd,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,mBAAiB;AAAA,QACjB,cAAY;AAAA,QACZ,UAAU;AAAA,QACV,SAAS,MAAM,OAAO,QAAQ,GAAG;AAAA,QACjC,WAAW;AAAA,UACT;AAAA,UACA,OAAO,SACH,wEACA;AAAA,QAAA;AAAA,QAGL,UAAA;AAAA,UAAA,QAAQ,oBAAC,gBAAA,EAAe,MAAY,MAAM,IAAI;AAAA,UAC9C,OAAO,UAAU,YAAY,oBAAC,UAAK,WAAU,yBAAyB,UAAA,aAAa,KAAK,EAAA,CAAE;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAE/F,EAAA,GAjBsB,OAAO,GAkB/B;AAAA,EAEJ,CAAC,EAAA,CACH;AAEJ;"}

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

@@ -0,0 +1,15 @@
+import { IDataTableColumnConfig, IDataTableRow } from '../types';
+interface IDataTableCellProps<T extends IDataTableRow> {
+    column: IDataTableColumnConfig<T>;
+    row: T;
+    /** TanStack row id, the grid coordinate of this cell in the spreadsheet layer. */
+    gridRowId?: string;
+    /** When present and the column is `editable`, the cell renders a controlled editor. */
+    onCellChange?: (row: T, columnId: string, value: unknown) => void;
+    /** Forwarded to the editable cell: Enter moves focus to the next editable input. */
+    keyboardNav?: boolean;
+    /** Forwarded to the editable cell: the value shows as text until the cell is clicked. */
+    clickToEdit?: boolean;
+}
+declare const DataTableCell: <T extends IDataTableRow>({ column, row, gridRowId, onCellChange, keyboardNav, clickToEdit, }: IDataTableCellProps<T>) => import("react").JSX.Element;
+export default DataTableCell;

package/dist/components/UI/DataTable/cells/DataTableCell.js

@@ -0,0 +1,63 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import DataTableCodeCell from "./DataTableCodeCell.js";
+import DataTableColorCell from "./DataTableColorCell.js";
+import DataTableCountCell from "./DataTableCountCell.js";
+import DataTableDateCell from "./DataTableDateCell.js";
+import DataTableEditableCell from "./DataTableEditableCell.js";
+import DataTableEmpenhoCell from "./DataTableEmpenhoCell.js";
+import DataTableOriginCell from "./DataTableOriginCell.js";
+import DataTableStatusCell from "./DataTableStatusCell.js";
+import DataTableTagCell from "./DataTableTagCell.js";
+import DataTableTextCell from "./DataTableTextCell.js";
+import DataTableThumbnailCell from "./DataTableThumbnailCell.js";
+const DataTableCell = ({
+  column,
+  row,
+  gridRowId,
+  onCellChange,
+  keyboardNav,
+  clickToEdit
+}) => {
+  if (column.editable && onCellChange) {
+    return /* @__PURE__ */ jsx(
+      DataTableEditableCell,
+      {
+        column,
+        row,
+        gridRowId,
+        onCellChange,
+        keyboardNav,
+        clickToEdit
+      }
+    );
+  }
+  if (column.render) return /* @__PURE__ */ jsx(Fragment, { children: column.render(row) });
+  const value = column.accessor?.(row);
+  switch (column.type) {
+    case "code":
+      return /* @__PURE__ */ jsx(DataTableCodeCell, { value });
+    case "color":
+      return /* @__PURE__ */ jsx(DataTableColorCell, { value });
+    case "thumbnail":
+      return /* @__PURE__ */ jsx(DataTableThumbnailCell, { value });
+    case "badgeStatus":
+      return /* @__PURE__ */ jsx(DataTableStatusCell, { value });
+    case "origin":
+      return /* @__PURE__ */ jsx(DataTableOriginCell, { value });
+    case "tag":
+      return /* @__PURE__ */ jsx(DataTableTagCell, { value });
+    case "count":
+      return /* @__PURE__ */ jsx(DataTableCountCell, { value });
+    case "commitment":
+      return /* @__PURE__ */ jsx(DataTableEmpenhoCell, { value });
+    case "date":
+      return /* @__PURE__ */ jsx(DataTableDateCell, { value });
+    case "text":
+    default:
+      return /* @__PURE__ */ jsx(DataTableTextCell, { value });
+  }
+};
+export {
+  DataTableCell as default
+};
+//# sourceMappingURL=DataTableCell.js.map

package/dist/components/UI/DataTable/cells/DataTableCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableCell.js","sources":["../../../../../src/components/UI/DataTable/cells/DataTableCell.tsx"],"sourcesContent":["import type {\n  IDataTableColorValue,\n  IDataTableColumnConfig,\n  IDataTableOriginValue,\n  IDataTableRow,\n  IDataTableStatusValue,\n  IDataTableTagValue,\n  IDataTableThumbnailValue,\n} from '../types';\n\nimport DataTableCodeCell from './DataTableCodeCell';\nimport DataTableColorCell from './DataTableColorCell';\nimport DataTableCountCell from './DataTableCountCell';\nimport DataTableDateCell from './DataTableDateCell';\nimport DataTableEditableCell from './DataTableEditableCell';\nimport DataTableEmpenhoCell from './DataTableEmpenhoCell';\nimport DataTableOriginCell from './DataTableOriginCell';\nimport DataTableStatusCell from './DataTableStatusCell';\nimport DataTableTagCell from './DataTableTagCell';\nimport DataTableTextCell from './DataTableTextCell';\nimport DataTableThumbnailCell from './DataTableThumbnailCell';\n\ninterface IDataTableCellProps<T extends IDataTableRow> {\n  column: IDataTableColumnConfig<T>;\n  row: T;\n  /** TanStack row id, the grid coordinate of this cell in the spreadsheet layer. */\n  gridRowId?: string;\n  /** When present and the column is `editable`, the cell renders a controlled editor. */\n  onCellChange?: (row: T, columnId: string, value: unknown) => void;\n  /** Forwarded to the editable cell: Enter moves focus to the next editable input. */\n  keyboardNav?: boolean;\n  /** Forwarded to the editable cell: the value shows as text until the cell is clicked. */\n  clickToEdit?: boolean;\n}\n\nconst DataTableCell = <T extends IDataTableRow>({\n  column,\n  row,\n  gridRowId,\n  onCellChange,\n  keyboardNav,\n  clickToEdit,\n}: IDataTableCellProps<T>) => {\n  if (column.editable && onCellChange) {\n    return (\n      <DataTableEditableCell\n        column={column}\n        row={row}\n        gridRowId={gridRowId}\n        onCellChange={onCellChange}\n        keyboardNav={keyboardNav}\n        clickToEdit={clickToEdit}\n      />\n    );\n  }\n\n  if (column.render) return <>{column.render(row)}</>;\n\n  const value = column.accessor?.(row);\n\n  switch (column.type) {\n    case 'code':\n      return <DataTableCodeCell value={value as string} />;\n    case 'color':\n      return <DataTableColorCell value={value as IDataTableColorValue} />;\n    case 'thumbnail':\n      return <DataTableThumbnailCell value={value as IDataTableThumbnailValue} />;\n    case 'badgeStatus':\n      return <DataTableStatusCell value={value as IDataTableStatusValue} />;\n    case 'origin':\n      return <DataTableOriginCell value={value as IDataTableOriginValue} />;\n    case 'tag':\n      return <DataTableTagCell value={value as IDataTableTagValue} />;\n    case 'count':\n      return <DataTableCountCell value={value as number} />;\n    case 'commitment':\n      return <DataTableEmpenhoCell value={value as number} />;\n    case 'date':\n      return <DataTableDateCell value={value as string} />;\n    case 'text':\n    default:\n      return <DataTableTextCell value={value as string} />;\n  }\n};\n\nexport default DataTableCell;\n"],"names":[],"mappings":";;;;;;;;;;;;AAmCA,MAAM,gBAAgB,CAA0B;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA8B;AAC5B,MAAI,OAAO,YAAY,cAAc;AACnC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AAEA,MAAI,OAAO,OAAQ,wCAAU,UAAA,OAAO,OAAO,GAAG,GAAE;AAEhD,QAAM,QAAQ,OAAO,WAAW,GAAG;AAEnC,UAAQ,OAAO,MAAA;AAAA,IACb,KAAK;AACH,aAAO,oBAAC,qBAAkB,OAAwB;AAAA,IACpD,KAAK;AACH,aAAO,oBAAC,sBAAmB,OAAsC;AAAA,IACnE,KAAK;AACH,aAAO,oBAAC,0BAAuB,OAA0C;AAAA,IAC3E,KAAK;AACH,aAAO,oBAAC,uBAAoB,OAAuC;AAAA,IACrE,KAAK;AACH,aAAO,oBAAC,uBAAoB,OAAuC;AAAA,IACrE,KAAK;AACH,aAAO,oBAAC,oBAAiB,OAAoC;AAAA,IAC/D,KAAK;AACH,aAAO,oBAAC,sBAAmB,OAAwB;AAAA,IACrD,KAAK;AACH,aAAO,oBAAC,wBAAqB,OAAwB;AAAA,IACvD,KAAK;AACH,aAAO,oBAAC,qBAAkB,OAAwB;AAAA,IACpD,KAAK;AAAA,IACL;AACE,aAAO,oBAAC,qBAAkB,OAAwB;AAAA,EAAA;AAExD;"}

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

@@ -0,0 +1,6 @@
+interface IDataTableCodeCellProps {
+    value: string | null | undefined;
+    className?: string;
+}
+declare const DataTableCodeCell: React.FC<IDataTableCodeCellProps>;
+export default DataTableCodeCell;

package/dist/components/UI/DataTable/cells/DataTableCodeCell.js

@@ -0,0 +1,7 @@
+import { jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+const DataTableCodeCell = ({ value, className }) => /* @__PURE__ */ jsx("span", { className: classNames("block truncate font-mono text-xs text-foreground-subtle", className), children: value?.length ? value : "-" });
+export {
+  DataTableCodeCell as default
+};
+//# sourceMappingURL=DataTableCodeCell.js.map

package/dist/components/UI/DataTable/cells/DataTableCodeCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableCodeCell.js","sources":["../../../../../src/components/UI/DataTable/cells/DataTableCodeCell.tsx"],"sourcesContent":["import classNames from 'classnames';\n\ninterface IDataTableCodeCellProps {\n  value: string | null | undefined;\n  className?: string;\n}\n\nconst DataTableCodeCell: React.FC<IDataTableCodeCellProps> = ({ value, className }) => (\n  <span className={classNames('block truncate font-mono text-xs text-foreground-subtle', className)}>\n    {value?.length ? value : '-'}\n  </span>\n);\n\nexport default DataTableCodeCell;\n"],"names":[],"mappings":";;AAOA,MAAM,oBAAuD,CAAC,EAAE,OAAO,UAAA,MACrE,oBAAC,QAAA,EAAK,WAAW,WAAW,2DAA2D,SAAS,GAC7F,UAAA,OAAO,SAAS,QAAQ,IAAA,CAC3B;"}

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

@@ -0,0 +1,7 @@
+import { IDataTableColorValue } from '../types';
+interface IDataTableColorCellProps {
+    value: IDataTableColorValue | null | undefined;
+}
+/** Sem cor atribuída é um traço; cor atribuída sem código vira o cinza padrão, nunca um vazio. */
+declare const DataTableColorCell: React.FC<IDataTableColorCellProps>;
+export default DataTableColorCell;

package/dist/components/UI/DataTable/cells/DataTableColorCell.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import Colors from "../../Colors.js";
+const DataTableColorCell = ({ value }) => {
+  if (!value?.hex && !value?.label) return /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground-faint", children: "-" });
+  return /* @__PURE__ */ jsx(Colors, { colors: value.hex ? [value.hex] : [], isSquare: true, label: value.label, className: "size-6 min-h-6 min-w-6" });
+};
+export {
+  DataTableColorCell as default
+};
+//# sourceMappingURL=DataTableColorCell.js.map

package/dist/components/UI/DataTable/cells/DataTableColorCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableColorCell.js","sources":["../../../../../src/components/UI/DataTable/cells/DataTableColorCell.tsx"],"sourcesContent":["import Colors from '@/components/UI/Colors';\n\nimport type { IDataTableColorValue } from '../types';\n\ninterface IDataTableColorCellProps {\n  value: IDataTableColorValue | null | undefined;\n}\n\n/** Sem cor atribuída é um traço; cor atribuída sem código vira o cinza padrão, nunca um vazio. */\nconst DataTableColorCell: React.FC<IDataTableColorCellProps> = ({ value }) => {\n  if (!value?.hex && !value?.label) return <span className=\"text-sm text-foreground-faint\">-</span>;\n\n  return (\n    <Colors colors={value.hex ? [value.hex] : []} isSquare label={value.label} className=\"size-6 min-h-6 min-w-6\" />\n  );\n};\n\nexport default DataTableColorCell;\n"],"names":[],"mappings":";;AASA,MAAM,qBAAyD,CAAC,EAAE,YAAY;AAC5E,MAAI,CAAC,OAAO,OAAO,CAAC,OAAO,MAAO,QAAO,oBAAC,QAAA,EAAK,WAAU,iCAAgC,UAAA,IAAA,CAAC;AAE1F,6BACG,QAAA,EAAO,QAAQ,MAAM,MAAM,CAAC,MAAM,GAAG,IAAI,CAAA,GAAI,UAAQ,MAAC,OAAO,MAAM,OAAO,WAAU,0BAAyB;AAElH;"}

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

@@ -0,0 +1,5 @@
+interface IDataTableCountCellProps {
+    value: number | null | undefined;
+}
+declare const DataTableCountCell: React.FC<IDataTableCountCellProps>;
+export default DataTableCountCell;

package/dist/components/UI/DataTable/cells/DataTableCountCell.js

@@ -0,0 +1,7 @@
+import { jsx } from "react/jsx-runtime";
+import { formatNumber } from "../../../../helpers/formatHelpers.js";
+const DataTableCountCell = ({ value }) => /* @__PURE__ */ jsx("span", { className: "text-sm tabular-nums text-foreground", children: formatNumber(value ?? 0) });
+export {
+  DataTableCountCell as default
+};
+//# sourceMappingURL=DataTableCountCell.js.map

package/dist/components/UI/DataTable/cells/DataTableCountCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableCountCell.js","sources":["../../../../../src/components/UI/DataTable/cells/DataTableCountCell.tsx"],"sourcesContent":["import { formatNumber } from '@/helpers/formatHelpers';\n\ninterface IDataTableCountCellProps {\n  value: number | null | undefined;\n}\n\nconst DataTableCountCell: React.FC<IDataTableCountCellProps> = ({ value }) => (\n  <span className=\"text-sm tabular-nums text-foreground\">{formatNumber(value ?? 0)}</span>\n);\n\nexport default DataTableCountCell;\n"],"names":[],"mappings":";;AAMA,MAAM,qBAAyD,CAAC,EAAE,YAChE,oBAAC,QAAA,EAAK,WAAU,wCAAwC,UAAA,aAAa,SAAS,CAAC,EAAA,CAAE;"}

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

@@ -0,0 +1,5 @@
+interface IDataTableDateCellProps {
+    value: string | Date | null | undefined;
+}
+declare const DataTableDateCell: React.FC<IDataTableDateCellProps>;
+export default DataTableDateCell;

package/dist/components/UI/DataTable/cells/DataTableDateCell.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { formatDate } from "../../../../helpers/dateHelpers.js";
+const DataTableDateCell = ({ value }) => {
+  if (!value) return /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground-faint", children: "-" });
+  const parsed = value instanceof Date ? value : new Date(value);
+  if (Number.isNaN(parsed.getTime())) return /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground-faint", children: "-" });
+  return /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground", children: formatDate(parsed) });
+};
+export {
+  DataTableDateCell as default
+};
+//# sourceMappingURL=DataTableDateCell.js.map

package/dist/components/UI/DataTable/cells/DataTableDateCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableDateCell.js","sources":["../../../../../src/components/UI/DataTable/cells/DataTableDateCell.tsx"],"sourcesContent":["import { formatDate } from '@/helpers/dateHelpers';\n\ninterface IDataTableDateCellProps {\n  value: string | Date | null | undefined;\n}\n\nconst DataTableDateCell: React.FC<IDataTableDateCellProps> = ({ value }) => {\n  if (!value) return <span className=\"text-sm text-foreground-faint\">-</span>;\n\n  const parsed = value instanceof Date ? value : new Date(value);\n\n  if (Number.isNaN(parsed.getTime())) return <span className=\"text-sm text-foreground-faint\">-</span>;\n\n  return <span className=\"text-sm text-foreground\">{formatDate(parsed)}</span>;\n};\n\nexport default DataTableDateCell;\n"],"names":[],"mappings":";;AAMA,MAAM,oBAAuD,CAAC,EAAE,YAAY;AAC1E,MAAI,CAAC,MAAO,4BAAQ,QAAA,EAAK,WAAU,iCAAgC,UAAA,KAAC;AAEpE,QAAM,SAAS,iBAAiB,OAAO,QAAQ,IAAI,KAAK,KAAK;AAE7D,MAAI,OAAO,MAAM,OAAO,QAAA,CAAS,EAAG,QAAO,oBAAC,QAAA,EAAK,WAAU,iCAAgC,UAAA,IAAA,CAAC;AAE5F,6BAAQ,QAAA,EAAK,WAAU,2BAA2B,UAAA,WAAW,MAAM,GAAE;AACvE;"}

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

@@ -0,0 +1,23 @@
+import { IDataTableColumnConfig, IDataTableRow } from '../types';
+interface IDataTableEditableCellProps<T extends IDataTableRow> {
+    column: IDataTableColumnConfig<T>;
+    row: T;
+    /** TanStack row id: present only inside a spreadsheet-enabled table. */
+    gridRowId?: string;
+    onCellChange: (row: T, columnId: string, value: unknown) => void;
+    /** When true, pressing Enter moves focus to the next editable input (DOM order). */
+    keyboardNav?: boolean;
+    /** When true, the cell shows the value as text until it is clicked. */
+    clickToEdit?: boolean;
+}
+/**
+ * Controlled inline editor for a single cell. Reads the current value from the
+ * host-owned row via `column.editable.getValue` and reports every edit through
+ * `onCellChange`; the host re-renders with the updated row. Validation is derived
+ * from the current value on each render, so no local state is kept.
+ *
+ * With `clickToEdit`, the cell renders the value as text and only swaps in the editor
+ * once clicked, no editor is mounted before that.
+ */
+declare const DataTableEditableCell: <T extends IDataTableRow>({ column, row, gridRowId, onCellChange, keyboardNav, clickToEdit, }: IDataTableEditableCellProps<T>) => string | number | boolean | Iterable<import('react').ReactNode> | import("react").JSX.Element | null | undefined;
+export default DataTableEditableCell;