@dappworks/kit 0.4.83 → 0.4.85

package/dist/metrics.mjs

@@ -1,4 +1,4 @@
-import { JSONTable } from './chunk-OLIJS6AT.mjs';
+import { JSONTable } from './chunk-A62VM3EE.mjs';
 import './chunk-ONVPCAMQ.mjs';
 import { SkeletonBox } from './chunk-ESZELIL2.mjs';
 import './chunk-MGU3KYGC.mjs';
@@ -58,7 +58,8 @@ var LineChartCard = (props) => {
     showTooltip = true,
     showAnimation = true,
     autoMinValue = true,
-    valueFormatter = (number) => `${number}`
+    valueFormatter = (number) => `${number}`,
+    customTooltip
   } = props;
   return /* @__PURE__ */ React8.createElement(ChartBox, __spreadValues({}, props), /* @__PURE__ */ React8.createElement(
     LineChart,
@@ -77,7 +78,8 @@ var LineChartCard = (props) => {
       startEndOnly,
       showTooltip,
       showAnimation,
-      autoMinValue
+      autoMinValue,
+      customTooltip
     }
   ));
 };

package/dist/metrics.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../components/JSONMetricsView/index.tsx","../components/JSONMetricsView/BarChartCard/index.tsx","../components/JSONMetricsView/ChartBox/index.tsx","../components/JSONMetricsView/LineChartCard/index.tsx","../components/JSONMetricsView/AreaChartCard/index.tsx","../components/JSONMetricsView/DonutChartCard/index.tsx","../components/JSONMetricsView/CountCard/index.tsx","../components/JSONMetricsView/TableCard/index.tsx","../components/JSONMetricsView/KPICard/index.tsx"],"names":["React","AreaChart","LineChart"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Col, Grid } from '@tremor/react';\nimport { BarChartCard } from './BarChartCard';\nimport { LineChartCard } from './LineChartCard';\nimport { AreaChartCard } from './AreaChartCard';\nimport { DonutChartCard } from './DonutChartCard';\nimport { CountCard } from './CountCard';\nimport { TableCard } from './TableCard';\nimport { KPICard } from './KPICard';\n\nexport type JSONMetricsViewType = AreaChartCard | LineChartCard | BarChartCard | DonutChartCard | CountCard | TableCard | KPICard;\n\nconst components = {\n  AreaChartCard,\n  LineChartCard,\n  BarChartCard,\n  DonutChartCard,\n  CountCard,\n  TableCard,\n  KPICard,\n};\n\nconst JSONMetricsView = ({ data }: { data: JSONMetricsViewType[] }) => {\n  return (\n    <Grid numItems={1} numItemsSm={1} numItemsLg={2} numItemsMd={2} className=\"gap-2\">\n      {data.map((item, index) => {\n        const Component = components[item.type];\n        return (\n          <Col key={index} numColSpanSm={1} numColSpanMd={item.numColSpanMd ?? 1}>\n            {/* @ts-ignore */}\n            <Component {...item} />\n          </Col>\n        );\n      })}\n    </Grid>\n  );\n};\n\nexport const MetricsView = ({ data }: { data: JSONMetricsViewType }) => {\n  const Comp = components[data.type];\n  // @ts-ignore\n  return <Comp {...data} />;\n};\n\nexport { JSONMetricsView };\n","import React from 'react';\nimport { BarChart, ValueFormatter } from '@tremor/react';\nimport { ChartBox } from '../ChartBox';\nimport { cn } from '../../../lib/utils';\n\nexport type BarChartCard = ChartBox & {\n  type?: 'BarChartCard';\n  categories?: string[];\n  index?: string;\n  valueFormatter?: ValueFormatter;\n  showLegend?: boolean;\n  showGridLines?: boolean;\n  stack?: boolean;\n  showAnimation?: boolean;\n};\n\nexport const BarChartCard = (props: BarChartCard) => {\n  const {\n    data = [],\n    categories = ['value'],\n    index = 'date',\n    valueFormatter = (number) => `${number}`,\n    showLegend = false,\n    showGridLines = false,\n    stack = false,\n    chartClassName,\n    showAnimation = true,\n  } = props;\n\n  return (\n    <ChartBox {...props}>\n      <BarChart\n        className={cn('h-72 mt-4', chartClassName)}\n        data={data}\n        index={index}\n        categories={categories}\n        colors={['indigo', 'cyan', 'teal', 'green', 'yellow', 'orange', 'red', 'slate', 'violet', 'rose', 'pink', 'purple', 'blue']}\n        valueFormatter={valueFormatter}\n        yAxisWidth={48}\n        showLegend={showLegend}\n        showGridLines={showGridLines}\n        stack={stack}\n        showAnimation={showAnimation}\n      />\n    </ChartBox>\n  );\n};\n","import React from 'react';\nimport { cn } from '../../../lib/utils';\nimport { Card } from '@nextui-org/react';\n\nexport interface ChartBox {\n  title?: React.ReactNode;\n  description?: string;\n  error?: string;\n  data?: {\n    [key: string]: any;\n  }[];\n  children?: React.ReactNode;\n  gridH?: number; // grid units, not pixels\n  numColSpanMd?: number;\n  className?: string;\n  headerClassName?: string;\n  contentClassName?: string;\n  chartClassName?: string;\n}\n\nexport const ChartBox = ({ title, description, error, children, className, headerClassName, contentClassName }: ChartBox) => {\n  return (\n    <Card className={cn('shadow-sm border dark:border-[#3e3e3e]', className)}>\n      {(title || description) && (\n        <div className={cn('p-4 h-[60px]', headerClassName)}>\n          {title && <div>{title}</div>}\n          {description && <div className=\"text-xs\">{description}</div>}\n        </div>\n      )}\n      <div className={cn('px-2 pb-5', contentClassName)}>{error ? <div className=\"text-red-600\">{error}</div> : children}</div>\n    </Card>\n  );\n};\n","import React from 'react';\nimport { LineChart, ValueFormatter } from '@tremor/react';\nimport { ChartBox } from '../ChartBox';\nimport { cn } from '../../../lib/utils';\n\nexport type LineChartCard = ChartBox & {\n  type?: 'LineChartCard';\n  categories?: string[];\n  index?: string;\n  curveType?: 'linear' | 'step' | 'monotone';\n  colors?: (\n    | 'slate'\n    | 'gray'\n    | 'zinc'\n    | 'neutral'\n    | 'stone'\n    | 'red'\n    | 'orange'\n    | 'amber'\n    | 'yellow'\n    | 'lime'\n    | 'green'\n    | 'emerald'\n    | 'teal'\n    | 'cyan'\n    | 'sky'\n    | 'blue'\n    | 'indigo'\n    | 'violet'\n    | 'purple'\n    | 'fuchsia'\n    | 'pink'\n    | 'rose'\n  )[];\n  showLegend?: boolean;\n  showGridLines?: boolean;\n  showXAxis?: boolean;\n  showYAxis?: boolean;\n  startEndOnly?: boolean;\n  showTooltip?: boolean;\n  showAnimation?: boolean;\n  autoMinValue?: boolean;\n  valueFormatter?: ValueFormatter;\n};\n\nexport const LineChartCard = (props: LineChartCard) => {\n  const {\n    data = [],\n    categories = ['value'],\n    index = 'date',\n    curveType = 'linear',\n    colors = ['indigo', 'cyan', 'teal', 'green', 'yellow', 'orange', 'red', 'slate', 'violet', 'rose', 'pink', 'purple', 'blue'],\n    showLegend = false,\n    showGridLines = false,\n    chartClassName,\n    showXAxis = true,\n    showYAxis = true,\n    startEndOnly = false,\n    showTooltip = true,\n    showAnimation = true,\n    autoMinValue = true,\n    valueFormatter = (number) => `${number}`,\n  } = props;\n\n  return (\n    <ChartBox {...props}>\n      <LineChart\n        className={cn('h-72 mt-4', chartClassName)}\n        data={data}\n        index={index}\n        categories={categories}\n        colors={colors}\n        valueFormatter={valueFormatter}\n        showLegend={showLegend}\n        showGridLines={showGridLines}\n        curveType={curveType}\n        showXAxis={showXAxis}\n        showYAxis={showYAxis}\n        startEndOnly={startEndOnly}\n        showTooltip={showTooltip}\n        showAnimation={showAnimation}\n        autoMinValue={autoMinValue}\n      />\n    </ChartBox>\n  );\n};\n","import React from 'react';\nimport { AreaChart, CustomTooltipProps, ValueFormatter } from '@tremor/react';\nimport { ChartBox } from '../ChartBox';\nimport { cn } from '../../../lib/utils';\n\nexport type AreaChartCard = ChartBox & {\n  type?: 'AreaChartCard';\n  categories?: string[];\n  index?: string;\n  curveType?: 'linear' | 'step' | 'monotone';\n  colors?: (\n    | 'slate'\n    | 'gray'\n    | 'zinc'\n    | 'neutral'\n    | 'stone'\n    | 'red'\n    | 'orange'\n    | 'amber'\n    | 'yellow'\n    | 'lime'\n    | 'green'\n    | 'emerald'\n    | 'teal'\n    | 'cyan'\n    | 'sky'\n    | 'blue'\n    | 'indigo'\n    | 'violet'\n    | 'purple'\n    | 'fuchsia'\n    | 'pink'\n    | 'rose'\n  )[];\n  showLegend?: boolean;\n  showGridLines?: boolean;\n  stack?: boolean;\n  showXAxis?: boolean;\n  showYAxis?: boolean;\n  startEndOnly?: boolean;\n  showTooltip?: boolean;\n  showAnimation?: boolean;\n  autoMinValue?: boolean;\n  valueFormatter?: ValueFormatter;\n  customTooltip?: React.ComponentType<CustomTooltipProps>\n};\n\n\nexport const AreaChartCard = (props: AreaChartCard) => {\n  const {\n    data = [],\n    categories = ['value'],\n    index = 'date',\n    curveType = 'linear',\n    colors = ['indigo', 'cyan', 'teal', 'green', 'yellow', 'orange', 'red', 'slate', 'violet', 'rose', 'pink', 'purple', 'blue'],\n    showLegend = false,\n    showGridLines = false,\n    stack = false,\n    chartClassName,\n    showXAxis = true,\n    showYAxis = true,\n    startEndOnly = false,\n    showTooltip = true,\n    showAnimation = true,\n    autoMinValue = true,\n    valueFormatter = (number) => `${number}`,\n    customTooltip,\n  } = props;\n\n  return (\n    <ChartBox {...props}>\n      <AreaChart\n        className={cn('h-72 mt-4', chartClassName)}\n        data={data}\n        index={index}\n        categories={categories}\n        colors={colors}\n        valueFormatter={valueFormatter}\n        showLegend={showLegend}\n        showGridLines={showGridLines}\n        stack={stack}\n        curveType={curveType}\n        showXAxis={showXAxis}\n        showYAxis={showYAxis}\n        startEndOnly={startEndOnly}\n        showTooltip={showTooltip}\n        showAnimation={showAnimation}\n        autoMinValue={autoMinValue}\n        customTooltip={customTooltip}\n      />\n    </ChartBox>\n  );\n};\n\n","import React from 'react';\nimport { DonutChart, ValueFormatter } from '@tremor/react';\nimport { ChartBox } from '../ChartBox';\nimport { cn } from '../../../lib/utils';\n\nexport type DonutChartCard = ChartBox & {\n  type?: 'DonutChartCard';\n  categories?: string[];\n  index?: string;\n  valueFormatter?: ValueFormatter;\n  showLabel?: boolean;\n  variant?: 'donut' | 'pie';\n  showAnimation?: boolean;\n};\n\nexport const DonutChartCard = (props: DonutChartCard) => {\n  const { data = [], categories = ['value'], index = 'name', valueFormatter = (number) => `${number}`, showLabel = true, variant = 'donut', chartClassName, showAnimation = true } = props;\n  const category = categories[0];\n  return (\n    <ChartBox {...props}>\n      <DonutChart\n        className={cn('h-72 mt-4', chartClassName)}\n        data={data}\n        index={index}\n        category={category}\n        colors={['indigo', 'cyan', 'teal', 'green', 'yellow', 'orange', 'red', 'slate', 'violet', 'rose', 'pink', 'purple', 'blue']}\n        valueFormatter={valueFormatter}\n        showLabel={showLabel}\n        variant={variant}\n        showAnimation={showAnimation}\n      />\n    </ChartBox>\n  );\n};\n","import React from 'react';\nimport { ChartBox } from '../ChartBox';\nimport { cn } from '../../../lib/utils';\n\nexport type CountCard = ChartBox & {\n  type?: 'CountCard';\n  summedColumnIndex?: string;\n};\n\nexport const CountCard = (props: CountCard) => {\n  if (!props.data?.length) {\n    return (\n      <ChartBox {...props}>\n        <div className={cn(\"mt-2 ml-2 text-2xl overflow-auto\", props.chartClassName)}>\n          <span className=\"text-gray-400\">No data</span>\n        </div>\n      </ChartBox>\n    );\n  }\n\n  if (!props.summedColumnIndex) {\n    return (\n      <ChartBox {...props}>\n        <div className={cn(\"mt-2 ml-2 text-2xl overflow-auto\", props.chartClassName)}>\n          <span className=\"text-gray-400 text-sm\">\n            set <span className=\"font-bold\">summedColumnIndex</span> to sum up values\n          </span>\n        </div>\n      </ChartBox>\n    );\n  }\n\n  const sum = props.data.reduce((acc, cur) => {\n    const v = cur[props.summedColumnIndex];\n    if (typeof v == 'number') {\n      return acc + v;\n    } else {\n      return acc;\n    }\n  }, 0);\n\n  return (\n    <ChartBox {...props}>\n      <div className={cn(\"mt-2 ml-2 font-bold text-2xl overflow-auto\", props.chartClassName)}>{sum}</div>\n    </ChartBox>\n  );\n};","import React from 'react';\nimport { ChartBox } from '../ChartBox';\nimport { JSONTable } from '../../JSONTable';\nimport { cn } from '../../../lib/utils';\n\nexport type TableCard = ChartBox & {\n  type?: 'TableCard';\n  columnOptions?: {\n    [key: string]: {\n      label: string;\n      hidden: boolean;\n    }\n  }\n}\n\nexport const TableCard = (props: TableCard) => {\n  const { data = [], columnOptions = {}, chartClassName } = props;\n  return (\n    <ChartBox {...props}>\n      {data?.length > 0\n        ? <JSONTable dataSource={data} columnOptions={columnOptions} className={cn(\"h-[256px]\", chartClassName)} />\n        : <div className={cn(\"h-[256px] flex justify-center items-center text-gray-400\", chartClassName)}>No data</div>\n      }\n    </ChartBox>\n  );\n};\n","import React from 'react';\nimport { AreaChart, LineChart, Text, ValueFormatter } from '@tremor/react';\nimport { ChartBox } from '../ChartBox';\nimport { SkeletonBox } from '../../Common/SkeletonBox';\nimport { cn } from '../../../lib/utils';\n\nexport type KPICard = ChartBox & {\n  type?: 'KPICard';\n  categories?: string[];\n  index?: string;\n  chartType?: 'area' | 'line';\n  curveType?: 'linear' | 'step' | 'monotone';\n  metricTitle?: string;\n  metric?: string | number;\n  valueFormatter?: ValueFormatter;\n  loading?: boolean;\n};\n\nexport const KPICard = (props: KPICard) => {\n  const { metricTitle, metric, chartType = 'area', data = [], categories = ['value'], index = 'date', valueFormatter = (number) => `${number}`, curveType = 'linear', loading, chartClassName } = props;\n\n  if (loading) {\n    return (\n      <ChartBox {...props}>\n        <div className=\"mt-4 space-x-6 px-2 flex items-center\">\n          <div className=\"w-auto\">\n            <Text className=\"whitespace-nowrap\">Loading...</Text>\n            <div className=\"font-bold text-3xl\">-</div>\n          </div>\n          <SkeletonBox className=\"flex-col w-full\" skClassName=\"h-[100px] overflow-hidden\" line={1} />\n        </div>\n      </ChartBox>\n    );\n  }\n\n  const ChartComp = chartType === 'area' ? AreaChart : LineChart;\n\n  return (\n    <ChartBox {...props}>\n      <div className=\"mt-4 space-x-6 px-2 flex items-center\">\n        <div className=\"w-auto\">\n          <Text className=\"whitespace-nowrap\">{metricTitle}</Text>\n          <div className=\"font-bold text-3xl\">{metric ?? '-'}</div>\n        </div>\n        <ChartComp\n          className={cn('h-[100px] overflow-hidden', chartClassName)}\n          data={data}\n          index={index}\n          categories={categories}\n          colors={['indigo', 'cyan', 'teal', 'green', 'yellow', 'orange', 'red', 'slate', 'violet', 'rose', 'pink', 'purple', 'blue']}\n          valueFormatter={valueFormatter}\n          curveType={curveType}\n          showXAxis={false}\n          showGridLines={false}\n          startEndOnly={true}\n          showYAxis={false}\n          showLegend={false}\n          autoMinValue={true}\n          showAnimation={true}\n        />\n      </div>\n    </ChartBox>\n  );\n};\n"]}
+{"version":3,"sources":["../components/JSONMetricsView/index.tsx","../components/JSONMetricsView/BarChartCard/index.tsx","../components/JSONMetricsView/ChartBox/index.tsx","../components/JSONMetricsView/LineChartCard/index.tsx","../components/JSONMetricsView/AreaChartCard/index.tsx","../components/JSONMetricsView/DonutChartCard/index.tsx","../components/JSONMetricsView/CountCard/index.tsx","../components/JSONMetricsView/TableCard/index.tsx","../components/JSONMetricsView/KPICard/index.tsx"],"names":["React","AreaChart","LineChart"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Col, Grid } from '@tremor/react';\nimport { BarChartCard } from './BarChartCard';\nimport { LineChartCard } from './LineChartCard';\nimport { AreaChartCard } from './AreaChartCard';\nimport { DonutChartCard } from './DonutChartCard';\nimport { CountCard } from './CountCard';\nimport { TableCard } from './TableCard';\nimport { KPICard } from './KPICard';\n\nexport type JSONMetricsViewType = AreaChartCard | LineChartCard | BarChartCard | DonutChartCard | CountCard | TableCard | KPICard;\n\nconst components = {\n  AreaChartCard,\n  LineChartCard,\n  BarChartCard,\n  DonutChartCard,\n  CountCard,\n  TableCard,\n  KPICard,\n};\n\nconst JSONMetricsView = ({ data }: { data: JSONMetricsViewType[] }) => {\n  return (\n    <Grid numItems={1} numItemsSm={1} numItemsLg={2} numItemsMd={2} className=\"gap-2\">\n      {data.map((item, index) => {\n        const Component = components[item.type];\n        return (\n          <Col key={index} numColSpanSm={1} numColSpanMd={item.numColSpanMd ?? 1}>\n            {/* @ts-ignore */}\n            <Component {...item} />\n          </Col>\n        );\n      })}\n    </Grid>\n  );\n};\n\nexport const MetricsView = ({ data }: { data: JSONMetricsViewType }) => {\n  const Comp = components[data.type];\n  // @ts-ignore\n  return <Comp {...data} />;\n};\n\nexport { JSONMetricsView };\n","import React from 'react';\nimport { BarChart, ValueFormatter } from '@tremor/react';\nimport { ChartBox } from '../ChartBox';\nimport { cn } from '../../../lib/utils';\n\nexport type BarChartCard = ChartBox & {\n  type?: 'BarChartCard';\n  categories?: string[];\n  index?: string;\n  valueFormatter?: ValueFormatter;\n  showLegend?: boolean;\n  showGridLines?: boolean;\n  stack?: boolean;\n  showAnimation?: boolean;\n};\n\nexport const BarChartCard = (props: BarChartCard) => {\n  const {\n    data = [],\n    categories = ['value'],\n    index = 'date',\n    valueFormatter = (number) => `${number}`,\n    showLegend = false,\n    showGridLines = false,\n    stack = false,\n    chartClassName,\n    showAnimation = true,\n  } = props;\n\n  return (\n    <ChartBox {...props}>\n      <BarChart\n        className={cn('h-72 mt-4', chartClassName)}\n        data={data}\n        index={index}\n        categories={categories}\n        colors={['indigo', 'cyan', 'teal', 'green', 'yellow', 'orange', 'red', 'slate', 'violet', 'rose', 'pink', 'purple', 'blue']}\n        valueFormatter={valueFormatter}\n        yAxisWidth={48}\n        showLegend={showLegend}\n        showGridLines={showGridLines}\n        stack={stack}\n        showAnimation={showAnimation}\n      />\n    </ChartBox>\n  );\n};\n","import React from 'react';\nimport { cn } from '../../../lib/utils';\nimport { Card } from '@nextui-org/react';\n\nexport interface ChartBox {\n  title?: React.ReactNode;\n  description?: string;\n  error?: string;\n  data?: {\n    [key: string]: any;\n  }[];\n  children?: React.ReactNode;\n  gridH?: number; // grid units, not pixels\n  numColSpanMd?: number;\n  className?: string;\n  headerClassName?: string;\n  contentClassName?: string;\n  chartClassName?: string;\n}\n\nexport const ChartBox = ({ title, description, error, children, className, headerClassName, contentClassName }: ChartBox) => {\n  return (\n    <Card className={cn('shadow-sm border dark:border-[#3e3e3e]', className)}>\n      {(title || description) && (\n        <div className={cn('p-4 h-[60px]', headerClassName)}>\n          {title && <div>{title}</div>}\n          {description && <div className=\"text-xs\">{description}</div>}\n        </div>\n      )}\n      <div className={cn('px-2 pb-5', contentClassName)}>{error ? <div className=\"text-red-600\">{error}</div> : children}</div>\n    </Card>\n  );\n};\n","import React from 'react';\nimport { Color, CurveType, CustomTooltipProps, LineChart, ValueFormatter } from '@tremor/react';\nimport { ChartBox } from '../ChartBox';\nimport { cn } from '../../../lib/utils';\n\nexport type LineChartCard = ChartBox & {\n  type?: 'LineChartCard';\n  categories?: string[];\n  index?: string;\n  curveType?: CurveType;\n  colors?: (Color | string)[];\n  showLegend?: boolean;\n  showGridLines?: boolean;\n  showXAxis?: boolean;\n  showYAxis?: boolean;\n  startEndOnly?: boolean;\n  showTooltip?: boolean;\n  showAnimation?: boolean;\n  autoMinValue?: boolean;\n  valueFormatter?: ValueFormatter;\n  customTooltip?: React.ComponentType<CustomTooltipProps>;\n};\n\nexport const LineChartCard = (props: LineChartCard) => {\n  const {\n    data = [],\n    categories = ['value'],\n    index = 'date',\n    curveType = 'linear',\n    colors = ['indigo', 'cyan', 'teal', 'green', 'yellow', 'orange', 'red', 'slate', 'violet', 'rose', 'pink', 'purple', 'blue'],\n    showLegend = false,\n    showGridLines = false,\n    chartClassName,\n    showXAxis = true,\n    showYAxis = true,\n    startEndOnly = false,\n    showTooltip = true,\n    showAnimation = true,\n    autoMinValue = true,\n    valueFormatter = (number) => `${number}`,\n    customTooltip\n  } = props;\n\n  return (\n    <ChartBox {...props}>\n      <LineChart\n        className={cn('h-72 mt-4', chartClassName)}\n        data={data}\n        index={index}\n        categories={categories}\n        colors={colors}\n        valueFormatter={valueFormatter}\n        showLegend={showLegend}\n        showGridLines={showGridLines}\n        curveType={curveType}\n        showXAxis={showXAxis}\n        showYAxis={showYAxis}\n        startEndOnly={startEndOnly}\n        showTooltip={showTooltip}\n        showAnimation={showAnimation}\n        autoMinValue={autoMinValue}\n        customTooltip={customTooltip}\n      />\n    </ChartBox>\n  );\n};\n","import React from 'react';\nimport { AreaChart, Color, CurveType, CustomTooltipProps, ValueFormatter } from '@tremor/react';\nimport { ChartBox } from '../ChartBox';\nimport { cn } from '../../../lib/utils';\n\nexport type AreaChartCard = ChartBox & {\n  type?: 'AreaChartCard';\n  categories?: string[];\n  index?: string;\n  curveType?: CurveType;\n  colors?: (Color | string)[];\n  showLegend?: boolean;\n  showGridLines?: boolean;\n  stack?: boolean;\n  showXAxis?: boolean;\n  showYAxis?: boolean;\n  startEndOnly?: boolean;\n  showTooltip?: boolean;\n  showAnimation?: boolean;\n  autoMinValue?: boolean;\n  valueFormatter?: ValueFormatter;\n  customTooltip?: React.ComponentType<CustomTooltipProps>\n};\n\n\nexport const AreaChartCard = (props: AreaChartCard) => {\n  const {\n    data = [],\n    categories = ['value'],\n    index = 'date',\n    curveType = 'linear',\n    colors = ['indigo', 'cyan', 'teal', 'green', 'yellow', 'orange', 'red', 'slate', 'violet', 'rose', 'pink', 'purple', 'blue'],\n    showLegend = false,\n    showGridLines = false,\n    stack = false,\n    chartClassName,\n    showXAxis = true,\n    showYAxis = true,\n    startEndOnly = false,\n    showTooltip = true,\n    showAnimation = true,\n    autoMinValue = true,\n    valueFormatter = (number) => `${number}`,\n    customTooltip,\n  } = props;\n\n  return (\n    <ChartBox {...props}>\n      <AreaChart\n        className={cn('h-72 mt-4', chartClassName)}\n        data={data}\n        index={index}\n        categories={categories}\n        colors={colors}\n        valueFormatter={valueFormatter}\n        showLegend={showLegend}\n        showGridLines={showGridLines}\n        stack={stack}\n        curveType={curveType}\n        showXAxis={showXAxis}\n        showYAxis={showYAxis}\n        startEndOnly={startEndOnly}\n        showTooltip={showTooltip}\n        showAnimation={showAnimation}\n        autoMinValue={autoMinValue}\n        customTooltip={customTooltip}\n      />\n    </ChartBox>\n  );\n};\n\n","import React from 'react';\nimport { DonutChart, ValueFormatter } from '@tremor/react';\nimport { ChartBox } from '../ChartBox';\nimport { cn } from '../../../lib/utils';\n\nexport type DonutChartCard = ChartBox & {\n  type?: 'DonutChartCard';\n  categories?: string[];\n  index?: string;\n  valueFormatter?: ValueFormatter;\n  showLabel?: boolean;\n  variant?: 'donut' | 'pie';\n  showAnimation?: boolean;\n};\n\nexport const DonutChartCard = (props: DonutChartCard) => {\n  const { data = [], categories = ['value'], index = 'name', valueFormatter = (number) => `${number}`, showLabel = true, variant = 'donut', chartClassName, showAnimation = true } = props;\n  const category = categories[0];\n  return (\n    <ChartBox {...props}>\n      <DonutChart\n        className={cn('h-72 mt-4', chartClassName)}\n        data={data}\n        index={index}\n        category={category}\n        colors={['indigo', 'cyan', 'teal', 'green', 'yellow', 'orange', 'red', 'slate', 'violet', 'rose', 'pink', 'purple', 'blue']}\n        valueFormatter={valueFormatter}\n        showLabel={showLabel}\n        variant={variant}\n        showAnimation={showAnimation}\n      />\n    </ChartBox>\n  );\n};\n","import React from 'react';\nimport { ChartBox } from '../ChartBox';\nimport { cn } from '../../../lib/utils';\n\nexport type CountCard = ChartBox & {\n  type?: 'CountCard';\n  summedColumnIndex?: string;\n};\n\nexport const CountCard = (props: CountCard) => {\n  if (!props.data?.length) {\n    return (\n      <ChartBox {...props}>\n        <div className={cn(\"mt-2 ml-2 text-2xl overflow-auto\", props.chartClassName)}>\n          <span className=\"text-gray-400\">No data</span>\n        </div>\n      </ChartBox>\n    );\n  }\n\n  if (!props.summedColumnIndex) {\n    return (\n      <ChartBox {...props}>\n        <div className={cn(\"mt-2 ml-2 text-2xl overflow-auto\", props.chartClassName)}>\n          <span className=\"text-gray-400 text-sm\">\n            set <span className=\"font-bold\">summedColumnIndex</span> to sum up values\n          </span>\n        </div>\n      </ChartBox>\n    );\n  }\n\n  const sum = props.data.reduce((acc, cur) => {\n    const v = cur[props.summedColumnIndex];\n    if (typeof v == 'number') {\n      return acc + v;\n    } else {\n      return acc;\n    }\n  }, 0);\n\n  return (\n    <ChartBox {...props}>\n      <div className={cn(\"mt-2 ml-2 font-bold text-2xl overflow-auto\", props.chartClassName)}>{sum}</div>\n    </ChartBox>\n  );\n};","import React from 'react';\nimport { ChartBox } from '../ChartBox';\nimport { JSONTable } from '../../JSONTable';\nimport { cn } from '../../../lib/utils';\n\nexport type TableCard = ChartBox & {\n  type?: 'TableCard';\n  columnOptions?: {\n    [key: string]: {\n      label: string;\n      hidden: boolean;\n    }\n  }\n}\n\nexport const TableCard = (props: TableCard) => {\n  const { data = [], columnOptions = {}, chartClassName } = props;\n  return (\n    <ChartBox {...props}>\n      {data?.length > 0\n        ? <JSONTable dataSource={data} columnOptions={columnOptions} className={cn(\"h-[256px]\", chartClassName)} />\n        : <div className={cn(\"h-[256px] flex justify-center items-center text-gray-400\", chartClassName)}>No data</div>\n      }\n    </ChartBox>\n  );\n};\n","import React from 'react';\nimport { AreaChart, LineChart, Text, ValueFormatter } from '@tremor/react';\nimport { ChartBox } from '../ChartBox';\nimport { SkeletonBox } from '../../Common/SkeletonBox';\nimport { cn } from '../../../lib/utils';\n\nexport type KPICard = ChartBox & {\n  type?: 'KPICard';\n  categories?: string[];\n  index?: string;\n  chartType?: 'area' | 'line';\n  curveType?: 'linear' | 'step' | 'monotone';\n  metricTitle?: string;\n  metric?: string | number;\n  valueFormatter?: ValueFormatter;\n  loading?: boolean;\n};\n\nexport const KPICard = (props: KPICard) => {\n  const { metricTitle, metric, chartType = 'area', data = [], categories = ['value'], index = 'date', valueFormatter = (number) => `${number}`, curveType = 'linear', loading, chartClassName } = props;\n\n  if (loading) {\n    return (\n      <ChartBox {...props}>\n        <div className=\"mt-4 space-x-6 px-2 flex items-center\">\n          <div className=\"w-auto\">\n            <Text className=\"whitespace-nowrap\">Loading...</Text>\n            <div className=\"font-bold text-3xl\">-</div>\n          </div>\n          <SkeletonBox className=\"flex-col w-full\" skClassName=\"h-[100px] overflow-hidden\" line={1} />\n        </div>\n      </ChartBox>\n    );\n  }\n\n  const ChartComp = chartType === 'area' ? AreaChart : LineChart;\n\n  return (\n    <ChartBox {...props}>\n      <div className=\"mt-4 space-x-6 px-2 flex items-center\">\n        <div className=\"w-auto\">\n          <Text className=\"whitespace-nowrap\">{metricTitle}</Text>\n          <div className=\"font-bold text-3xl\">{metric ?? '-'}</div>\n        </div>\n        <ChartComp\n          className={cn('h-[100px] overflow-hidden', chartClassName)}\n          data={data}\n          index={index}\n          categories={categories}\n          colors={['indigo', 'cyan', 'teal', 'green', 'yellow', 'orange', 'red', 'slate', 'violet', 'rose', 'pink', 'purple', 'blue']}\n          valueFormatter={valueFormatter}\n          curveType={curveType}\n          showXAxis={false}\n          showGridLines={false}\n          startEndOnly={true}\n          showYAxis={false}\n          showLegend={false}\n          autoMinValue={true}\n          showAnimation={true}\n        />\n      </div>\n    </ChartBox>\n  );\n};\n"]}

package/dist/ui.mjs

@@ -23,7 +23,8 @@ var Copy = ({ className = "", value, iconSize = 20, iconClassName = "" }) => {
     "button",
     {
       className: cn("rounded-sm p-1 hover:bg-gray-300 dark:hover:bg-gray-600", className),
-      onClick: () => {
+      onClick: (e) => {
+        e.preventDefault();
         copyToClipboard(value);
         setCopied(true);
       }

package/dist/ui.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../components/Common/PanelCard/index.tsx","../components/Common/Copy/index.tsx","../components/Common/JSONHighlight/index.tsx"],"names":["React"],"mappings":";;;;;;;;;AACA,SAAS,YAAY;AACrB,OAAO,WAAW;AAOX,IAAM,YAAY,CAAC,EAAE,OAAO,SAAS,UAAU,MAA0C;AAC9F,SACE,oCAAC,QAAK,WAAW,GAAG,2DAA2D,SAAS,KACtF,oCAAC,OAAE,WAAU,gDAA8C,KAAM,GACjE,oCAAC,SAAI,WAAW,GAAG,2EAA2E,KAAI,OAAQ,CAC5G;AAEJ;;;ACdA,OAAOA,UAAS,WAAW,gBAAgB;AAC3C,OAAO,qBAAqB;AAC5B,SAAS,QAAQ,UAAU,iBAAiB;AAGrC,IAAM,OAAO,CAAC,EAAE,YAAY,IAAI,OAAO,WAAW,IAAI,gBAAgB,GAAG,MAAwF;AACtK,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,YAAU,MAAM;AACd,QAAI,QAAQ;AACV,YAAM,QAAQ,WAAW,MAAM;AAC7B,kBAAU,KAAK;AAAA,MACjB,GAAG,GAAI;AACP,aAAO,MAAM,aAAa,KAAK;AAAA,IACjC;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AACX,SACE,gBAAAA,OAAA;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,2DAA2D,SAAS;AAAA,MAClF,SAAS,MAAM;AACb,wBAAgB,KAAK;AACrB,kBAAU,IAAI;AAAA,MAChB;AAAA;AAAA,IACC,SAAS,gBAAAA,OAAA,cAAC,aAAU,MAAM,UAAU,WAAW,eAAe,IAAK,gBAAAA,OAAA,cAAC,YAAS,MAAM,UAAU,WAAW,eAAe;AAAA,EAC1H;AAEJ;;;AC3BA,OAAOA,YAAW;AAGX,SAAS,cAAc,EAAE,SAAS,UAAU,GAA4C;AAC7F,MAAI,CAAC;AAAS,WAAO;AACrB,YAAU,QAAQ,QAAQ,MAAM,OAAO,EAAE,QAAQ,MAAM,MAAM,EAAE,QAAQ,MAAM,MAAM;AACnF,QAAM,MAAM,QAAQ,QAAQ,0GAA0G,SAAU,OAAO;AAErJ,QAAI,MAAM;AACV,QAAI,KAAK,KAAK,KAAK,GAAG;AACpB,UAAI,KAAK,KAAK,KAAK,GAAG;AAEpB,cAAM;AAAA,MACR,OAAO;AAEL,cAAM;AAAA,MACR;AAAA,IACF,WAAW,aAAa,KAAK,KAAK,GAAG;AAEnC,YAAM;AAAA,IACR,WAAW,OAAO,KAAK,KAAK,GAAG;AAE7B,YAAM;AAAA,IACR;AACA,WAAO,gBAAgB,GAAG,KAAK,KAAK;AAAA,EACtC,CAAC;AAED,SACE,gBAAAA,OAAA,cAAC,SAAI,WAAW,GAAG,0CAA0C,SAAS,GAAG,yBAAyB,EAAE,QAAQ,IAAI,GAAG;AAEvH","sourcesContent":["import { cn } from '../../../lib/utils';\nimport { Card } from '@nextui-org/react';\nimport React from 'react';\n\nexport interface PanelCard {\n  title: string | JSX.Element;\n  content?: string | JSX.Element;\n}\n\nexport const PanelCard = ({ title, content, className }: PanelCard & { className?: string }) => {\n  return (\n    <Card className={cn('flex flex-col justify-between border-none p-4 shadow-sm', className)}>\n      <p className=\"text-[#6B7280] dark:text-[#cecdcd] text-sm\">{title}</p>\n      <div className={cn('mt-2 break-all text-[#374151] dark:text-[#cecdcd] text-base font-semibold')}>{content}</div>\n    </Card>\n  );\n};\n","\"use client\";\n\nimport React, { useEffect, useState } from \"react\";\nimport copyToClipboard from \"copy-to-clipboard\";\nimport { Copy as CopyIcon, CopyCheck } from \"lucide-react\";\nimport { cn } from \"../../../lib/utils\";\n\nexport const Copy = ({ className = '', value, iconSize = 20, iconClassName = '' }: { className?: string; value: string; iconSize?: number, iconClassName?: string }) => {\n  const [copied, setCopied] = useState(false);\n  useEffect(() => {\n    if (copied) {\n      const timer = setTimeout(() => {\n        setCopied(false);\n      }, 2000);\n      return () => clearTimeout(timer);\n    }\n  }, [copied]);\n  return (\n    <button\n      className={cn(\"rounded-sm p-1 hover:bg-gray-300 dark:hover:bg-gray-600\", className)}\n      onClick={() => {\n        copyToClipboard(value);\n        setCopied(true);\n      }}>\n      {copied ? <CopyCheck size={iconSize} className={iconClassName} /> : <CopyIcon size={iconSize} className={iconClassName} />}\n    </button>\n  );\n}\n","import React from \"react\";\nimport { cn } from \"../../../lib/utils\";\n\nexport function JSONHighlight({ jsonStr, className }: { jsonStr: string, className?: string }) {\n  if (!jsonStr) return null;\n  jsonStr = jsonStr.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');\n  const str = jsonStr.replace(/(\"(\\\\u[a-zA-Z0-9]{4}|\\\\[^u]|[^\\\\\"])*\"(\\s*:)?|\\b(true|false|null)\\b|-?\\d+(?:\\.\\d*)?(?:[eE][+\\-]?\\d+)?)/g, function (match) {\n    // number\n    let cls = 'text-blue-500';\n    if (/^\"/.test(match)) {\n      if (/:$/.test(match)) {\n        // key\n        cls = 'text-gray-700 dark:text-gray-400';\n      } else {\n        // string\n        cls = 'text-green-600';\n      }\n    } else if (/true|false/.test(match)) {\n      // boolean\n      cls = 'text-purple-500';\n    } else if (/null/.test(match)) {\n      // null\n      cls = 'text-red-400';\n    }\n    return `<span class=\"${cls}\">${match}</span>`;\n  });\n\n  return (\n    <pre className={cn('w-full overflow-auto text-xs font-bold', className)} dangerouslySetInnerHTML={{ __html: str }} />\n  )\n}\n"]}
+{"version":3,"sources":["../components/Common/PanelCard/index.tsx","../components/Common/Copy/index.tsx","../components/Common/JSONHighlight/index.tsx"],"names":["React"],"mappings":";;;;;;;;;AACA,SAAS,YAAY;AACrB,OAAO,WAAW;AAOX,IAAM,YAAY,CAAC,EAAE,OAAO,SAAS,UAAU,MAA0C;AAC9F,SACE,oCAAC,QAAK,WAAW,GAAG,2DAA2D,SAAS,KACtF,oCAAC,OAAE,WAAU,gDAA8C,KAAM,GACjE,oCAAC,SAAI,WAAW,GAAG,2EAA2E,KAAI,OAAQ,CAC5G;AAEJ;;;ACdA,OAAOA,UAAS,WAAW,gBAAgB;AAC3C,OAAO,qBAAqB;AAC5B,SAAS,QAAQ,UAAU,iBAAiB;AAGrC,IAAM,OAAO,CAAC,EAAE,YAAY,IAAI,OAAO,WAAW,IAAI,gBAAgB,GAAG,MAAwF;AACtK,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,YAAU,MAAM;AACd,QAAI,QAAQ;AACV,YAAM,QAAQ,WAAW,MAAM;AAC7B,kBAAU,KAAK;AAAA,MACjB,GAAG,GAAI;AACP,aAAO,MAAM,aAAa,KAAK;AAAA,IACjC;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AACX,SACE,gBAAAA,OAAA;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,2DAA2D,SAAS;AAAA,MAClF,SAAS,CAAC,MAAM;AACd,UAAE,eAAe;AACjB,wBAAgB,KAAK;AACrB,kBAAU,IAAI;AAAA,MAChB;AAAA;AAAA,IACC,SAAS,gBAAAA,OAAA,cAAC,aAAU,MAAM,UAAU,WAAW,eAAe,IAAK,gBAAAA,OAAA,cAAC,YAAS,MAAM,UAAU,WAAW,eAAe;AAAA,EAC1H;AAEJ;;;AC5BA,OAAOA,YAAW;AAGX,SAAS,cAAc,EAAE,SAAS,UAAU,GAA4C;AAC7F,MAAI,CAAC;AAAS,WAAO;AACrB,YAAU,QAAQ,QAAQ,MAAM,OAAO,EAAE,QAAQ,MAAM,MAAM,EAAE,QAAQ,MAAM,MAAM;AACnF,QAAM,MAAM,QAAQ,QAAQ,0GAA0G,SAAU,OAAO;AAErJ,QAAI,MAAM;AACV,QAAI,KAAK,KAAK,KAAK,GAAG;AACpB,UAAI,KAAK,KAAK,KAAK,GAAG;AAEpB,cAAM;AAAA,MACR,OAAO;AAEL,cAAM;AAAA,MACR;AAAA,IACF,WAAW,aAAa,KAAK,KAAK,GAAG;AAEnC,YAAM;AAAA,IACR,WAAW,OAAO,KAAK,KAAK,GAAG;AAE7B,YAAM;AAAA,IACR;AACA,WAAO,gBAAgB,GAAG,KAAK,KAAK;AAAA,EACtC,CAAC;AAED,SACE,gBAAAA,OAAA,cAAC,SAAI,WAAW,GAAG,0CAA0C,SAAS,GAAG,yBAAyB,EAAE,QAAQ,IAAI,GAAG;AAEvH","sourcesContent":["import { cn } from '../../../lib/utils';\nimport { Card } from '@nextui-org/react';\nimport React from 'react';\n\nexport interface PanelCard {\n  title: string | JSX.Element;\n  content?: string | JSX.Element;\n}\n\nexport const PanelCard = ({ title, content, className }: PanelCard & { className?: string }) => {\n  return (\n    <Card className={cn('flex flex-col justify-between border-none p-4 shadow-sm', className)}>\n      <p className=\"text-[#6B7280] dark:text-[#cecdcd] text-sm\">{title}</p>\n      <div className={cn('mt-2 break-all text-[#374151] dark:text-[#cecdcd] text-base font-semibold')}>{content}</div>\n    </Card>\n  );\n};\n","\"use client\";\n\nimport React, { useEffect, useState } from \"react\";\nimport copyToClipboard from \"copy-to-clipboard\";\nimport { Copy as CopyIcon, CopyCheck } from \"lucide-react\";\nimport { cn } from \"../../../lib/utils\";\n\nexport const Copy = ({ className = '', value, iconSize = 20, iconClassName = '' }: { className?: string; value: string; iconSize?: number, iconClassName?: string }) => {\n  const [copied, setCopied] = useState(false);\n  useEffect(() => {\n    if (copied) {\n      const timer = setTimeout(() => {\n        setCopied(false);\n      }, 2000);\n      return () => clearTimeout(timer);\n    }\n  }, [copied]);\n  return (\n    <button\n      className={cn(\"rounded-sm p-1 hover:bg-gray-300 dark:hover:bg-gray-600\", className)}\n      onClick={(e) => {\n        e.preventDefault();\n        copyToClipboard(value);\n        setCopied(true);\n      }}>\n      {copied ? <CopyCheck size={iconSize} className={iconClassName} /> : <CopyIcon size={iconSize} className={iconClassName} />}\n    </button>\n  );\n}\n","import React from \"react\";\nimport { cn } from \"../../../lib/utils\";\n\nexport function JSONHighlight({ jsonStr, className }: { jsonStr: string, className?: string }) {\n  if (!jsonStr) return null;\n  jsonStr = jsonStr.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');\n  const str = jsonStr.replace(/(\"(\\\\u[a-zA-Z0-9]{4}|\\\\[^u]|[^\\\\\"])*\"(\\s*:)?|\\b(true|false|null)\\b|-?\\d+(?:\\.\\d*)?(?:[eE][+\\-]?\\d+)?)/g, function (match) {\n    // number\n    let cls = 'text-blue-500';\n    if (/^\"/.test(match)) {\n      if (/:$/.test(match)) {\n        // key\n        cls = 'text-gray-700 dark:text-gray-400';\n      } else {\n        // string\n        cls = 'text-green-600';\n      }\n    } else if (/true|false/.test(match)) {\n      // boolean\n      cls = 'text-purple-500';\n    } else if (/null/.test(match)) {\n      // null\n      cls = 'text-red-400';\n    }\n    return `<span class=\"${cls}\">${match}</span>`;\n  });\n\n  return (\n    <pre className={cn('w-full overflow-auto text-xs font-bold', className)} dangerouslySetInnerHTML={{ __html: str }} />\n  )\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dappworks/kit",
-  "version": "0.4.83",
+  "version": "0.4.85",
   "description": "",
   "main": "./dist/index.mjs",
   "types": "./dist/index.d.mts",
@@ -91,6 +91,7 @@
     "@monaco-editor/react": ">=4.0.0",
     "@nextui-org/react": "^2.3.6",
     "@radix-ui/react-dialog": ">=1.0.0",
+    "@radix-ui/react-dropdown-menu": "^2.0.5",
     "@rjsf/core": ">=5.0.0",
     "@rjsf/utils": ">=5.0.0",
     "@rjsf/validator-ajv8": ">=5.0.0",

package/dist/chunk-OLIJS6AT.mjs

@@ -1,380 +0,0 @@
-import { PaginationState } from './chunk-ONVPCAMQ.mjs';
-import { SkeletonBox } from './chunk-ESZELIL2.mjs';
-import { _ } from './chunk-MGU3KYGC.mjs';
-import { cn } from './chunk-TMFAGW4V.mjs';
-import { __spreadValues } from './chunk-6F7H4PAA.mjs';
-import React, { useRef, useMemo, useState, useEffect } from 'react';
-import { Table, TableHeader, TableColumn, Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, TableBody, TableRow, TableCell, Pagination, Card, Divider, Spinner } from '@nextui-org/react';
-import { ChevronDown, ChevronUp, ChevronsUpDown } from 'lucide-react';
-import { observer } from 'mobx-react-lite';
-
-var JSONTable = observer((props) => {
-  const {
-    className,
-    classNames = {},
-    dataSource,
-    columnOptions,
-    headerKeys,
-    isServerPaging,
-    pagination = new PaginationState({
-      page: 1,
-      limit: 8
-    }),
-    nextuiPaginationProps = {},
-    rowKey = "id",
-    onRowClick,
-    rowCss,
-    asCard = false,
-    cardOptions = {
-      boxClassName: "",
-      cardClassName: "",
-      itemClassName: "",
-      showDivider: true,
-      dividerClassName: ""
-    },
-    autoScrollToTop = false,
-    emptyContent = "No Data",
-    isLoading = false,
-    loadingOptions,
-    loadingContent,
-    isHeaderSticky = false,
-    sortingUIOptions,
-    extendedTableOptions = []
-  } = props;
-  const tableBoxRef = useRef(null);
-  const { columns, sortableColumnsDefaultValue } = useMemo(() => {
-    const firstData = dataSource[0];
-    const allKeys = firstData ? Object.keys(firstData) : [];
-    const keys = headerKeys ? headerKeys : columnOptions ? allKeys.filter((key) => {
-      var _a;
-      return !((_a = columnOptions[key]) == null ? void 0 : _a.hidden);
-    }) : allKeys;
-    if (!keys.includes("$actions") && columnOptions && columnOptions["$actions"]) {
-      keys.push("$actions");
-    }
-    const sortableColumnsDefaultValue2 = {};
-    const columns2 = keys.map((key) => {
-      var _a, _b, _c;
-      const sortable = (_a = columnOptions == null ? void 0 : columnOptions[key]) == null ? void 0 : _a.sortable;
-      if (sortable) {
-        sortableColumnsDefaultValue2[key] = "none";
-      }
-      return {
-        key,
-        label: ((_b = columnOptions == null ? void 0 : columnOptions[key]) == null ? void 0 : _b.label) || (key === "$actions" ? "" : key),
-        render: (_c = columnOptions == null ? void 0 : columnOptions[key]) == null ? void 0 : _c.render
-      };
-    });
-    if (!headerKeys && columnOptions) {
-      columns2.sort((a, b) => {
-        var _a, _b;
-        const aOrder = ((_a = columnOptions[a.key]) == null ? void 0 : _a.order) || 0;
-        const bOrder = ((_b = columnOptions[b.key]) == null ? void 0 : _b.order) || 0;
-        return bOrder - aOrder;
-      });
-    }
-    const extendedTables = firstData ? extendedTableOptions.filter((item) => {
-      return Array.isArray(firstData[item.key]);
-    }).map((item) => {
-      const index = columns2.findIndex((c) => c.key === item.key);
-      if (index > -1) {
-        columns2.splice(index, 1);
-      }
-      const keys2 = Object.keys(item.columnOptions);
-      return {
-        key: item.key,
-        columns: keys2.map((k) => {
-          const option = item.columnOptions[k];
-          return {
-            key: k,
-            label: (option == null ? void 0 : option.label) || k,
-            render: option == null ? void 0 : option.render
-          };
-        })
-      };
-    }) : [];
-    return {
-      columns: columns2,
-      extendedTables,
-      sortableColumnsDefaultValue: sortableColumnsDefaultValue2
-    };
-  }, [dataSource, columnOptions]);
-  const [sortableColumnsMap, setSortableColumnsMap] = useState({});
-  const [sortedData, setSortedData] = useState(dataSource);
-  useEffect(() => {
-    setSortableColumnsMap(sortableColumnsDefaultValue);
-  }, [sortableColumnsDefaultValue]);
-  useEffect(() => {
-    setSortedData(dataSource);
-    if (!isServerPaging) {
-      pagination.setData({
-        total: dataSource.length
-      });
-    }
-  }, [dataSource]);
-  const data = isServerPaging ? sortedData : sortedData.slice(pagination.offset, pagination.offset + pagination.limit);
-  if (asCard) {
-    return /* @__PURE__ */ React.createElement(
-      CardUI,
-      {
-        className,
-        rowKey,
-        data,
-        columns,
-        columnOptions,
-        cardOptions,
-        pagination,
-        nextuiPaginationProps,
-        onRowClick,
-        autoScrollToTop,
-        emptyContent,
-        isLoading,
-        loadingOptions,
-        loadingContent
-      }
-    );
-  }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    Table,
-    {
-      removeWrapper: true,
-      isHeaderSticky,
-      className: cn("relative w-full overflow-auto h-[400px]", className),
-      classNames,
-      ref: tableBoxRef
-    },
-    /* @__PURE__ */ React.createElement(TableHeader, { columns }, columns.map((item) => {
-      var _a, _b, _c;
-      return /* @__PURE__ */ React.createElement(TableColumn, { key: item.key }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ React.createElement("span", null, item.label), !!sortableColumnsMap[item.key] && /* @__PURE__ */ React.createElement(
-        Dropdown,
-        {
-          showArrow: true,
-          backdrop: "opaque",
-          placement: "bottom",
-          classNames: __spreadValues({
-            content: "min-w-[80px] rounded-lg shadow-md border dark:border-[#3e3e3e]"
-          }, sortingUIOptions == null ? void 0 : sortingUIOptions.dropdownClassNames)
-        },
-        /* @__PURE__ */ React.createElement(DropdownTrigger, null, /* @__PURE__ */ React.createElement("button", { className: "outline-none p-0" }, sortableColumnsMap[item.key] === "desc" && /* @__PURE__ */ React.createElement(ChevronDown, { size: 14 }), sortableColumnsMap[item.key] === "asc" && /* @__PURE__ */ React.createElement(ChevronUp, { size: 14 }), sortableColumnsMap[item.key] === "none" && /* @__PURE__ */ React.createElement(ChevronsUpDown, { size: 14 }))),
-        /* @__PURE__ */ React.createElement(DropdownMenu, { variant: "flat", selectionMode: "single", selectedKeys: [sortableColumnsMap[item.key]] }, /* @__PURE__ */ React.createElement(
-          DropdownItem,
-          {
-            key: "asc",
-            onClick: () => {
-              var _a2;
-              const { sortableColumns, sortedData: sortedData2 } = sortData({
-                type: "asc",
-                key: item.key,
-                sortKey: (_a2 = columnOptions == null ? void 0 : columnOptions[item.key]) == null ? void 0 : _a2.sortKey,
-                sortableColumnsMap,
-                dataSource
-              });
-              setSortableColumnsMap(sortableColumns);
-              setSortedData(sortedData2);
-            }
-          },
-          /* @__PURE__ */ React.createElement("span", { className: cn("text-xs font-bold", sortingUIOptions == null ? void 0 : sortingUIOptions.titleClassName) }, ((_a = sortingUIOptions == null ? void 0 : sortingUIOptions.titles) == null ? void 0 : _a.asc) || "ASC")
-        ), /* @__PURE__ */ React.createElement(
-          DropdownItem,
-          {
-            key: "desc",
-            onClick: () => {
-              var _a2;
-              const { sortableColumns, sortedData: sortedData2 } = sortData({
-                type: "desc",
-                key: item.key,
-                sortKey: (_a2 = columnOptions == null ? void 0 : columnOptions[item.key]) == null ? void 0 : _a2.sortKey,
-                sortableColumnsMap,
-                dataSource
-              });
-              setSortableColumnsMap(sortableColumns);
-              setSortedData(sortedData2);
-            }
-          },
-          /* @__PURE__ */ React.createElement("span", { className: cn("text-xs font-bold", sortingUIOptions == null ? void 0 : sortingUIOptions.titleClassName) }, ((_b = sortingUIOptions == null ? void 0 : sortingUIOptions.titles) == null ? void 0 : _b.desc) || "DESC")
-        ), /* @__PURE__ */ React.createElement(
-          DropdownItem,
-          {
-            key: "none",
-            onClick: () => {
-              var _a2;
-              const { sortableColumns, sortedData: sortedData2 } = sortData({
-                type: "none",
-                key: item.key,
-                sortKey: (_a2 = columnOptions == null ? void 0 : columnOptions[item.key]) == null ? void 0 : _a2.sortKey,
-                sortableColumnsMap,
-                dataSource
-              });
-              setSortableColumnsMap(sortableColumns);
-              setSortedData(sortedData2);
-            }
-          },
-          /* @__PURE__ */ React.createElement("span", { className: cn("text-xs font-bold", sortingUIOptions == null ? void 0 : sortingUIOptions.titleClassName) }, ((_c = sortingUIOptions == null ? void 0 : sortingUIOptions.titles) == null ? void 0 : _c.none) || "NONE")
-        ))
-      )));
-    })),
-    isLoading ? /* @__PURE__ */ React.createElement(TableBody, { emptyContent: loadingContent || DefaultLoading({ loadingOptions }) }, []) : data.length > 0 ? /* @__PURE__ */ React.createElement(TableBody, null, data.map((item, index) => {
-      return /* @__PURE__ */ React.createElement(
-        TableRow,
-        {
-          key: item[rowKey] || index,
-          className: cn("", typeof rowCss === "function" ? rowCss(item) : rowCss),
-          onClick: () => {
-            onRowClick == null ? void 0 : onRowClick(item);
-          }
-        },
-        columns.map((column) => {
-          return /* @__PURE__ */ React.createElement(TableCell, { key: column.key }, column.render ? column.render(item) : renderFieldValue(item[column.key]));
-        })
-      );
-    })) : /* @__PURE__ */ React.createElement(TableBody, { emptyContent }, [])
-  ), pagination.total > pagination.limit && /* @__PURE__ */ React.createElement("div", { className: "flex justify-center" }, /* @__PURE__ */ React.createElement(
-    Pagination,
-    __spreadValues({
-      className: "mt-2",
-      showControls: true,
-      showShadow: true,
-      size: "sm",
-      radius: "sm",
-      color: "primary",
-      initialPage: 1,
-      total: Math.ceil(pagination.total / pagination.limit),
-      page: pagination.page,
-      onChange: (currentPage) => {
-        pagination.setData({
-          page: currentPage
-        });
-        if (autoScrollToTop && tableBoxRef.current) {
-          scrollIntoTop(tableBoxRef.current);
-        }
-      }
-    }, nextuiPaginationProps)
-  )));
-});
-function renderFieldValue(v) {
-  if (typeof v == "string" || typeof v == "number") {
-    return v;
-  }
-  if (v == null) {
-    return null;
-  }
-  return JSON.stringify(v);
-}
-function sortData({
-  sortKey,
-  key,
-  type,
-  sortableColumnsMap,
-  dataSource
-}) {
-  const sortableColumns = {};
-  Object.keys(sortableColumnsMap).map((k) => {
-    sortableColumns[k] = k === key ? type : "none";
-  });
-  let sortedData = dataSource;
-  if (type !== "none") {
-    const result = _.orderBy(
-      dataSource,
-      (o) => {
-        const v = _.get(o, sortKey || key);
-        if (v == null) {
-          return type === "desc" ? "" : v;
-        }
-        if (typeof v === "string") {
-          const _v = Number(v);
-          if (isNaN(_v)) {
-            return v.toLowerCase();
-          } else {
-            return _v;
-          }
-        }
-        return v;
-      },
-      type
-    );
-    sortedData = result;
-  }
-  return {
-    sortableColumns,
-    sortedData
-  };
-}
-function CardUI({
-  className,
-  data,
-  columns,
-  columnOptions,
-  rowKey,
-  cardOptions,
-  pagination,
-  nextuiPaginationProps,
-  onRowClick,
-  autoScrollToTop,
-  emptyContent,
-  isLoading,
-  loadingOptions,
-  loadingContent
-}) {
-  const cardBoxRef = useRef(null);
-  return /* @__PURE__ */ React.createElement("div", { className, ref: cardBoxRef }, /* @__PURE__ */ React.createElement("div", { className: cn("space-y-2", cardOptions == null ? void 0 : cardOptions.boxClassName) }, isLoading ? loadingContent ? /* @__PURE__ */ React.createElement(Card, { className: cn("w-full h-40 flex flex-col justify-center items-center p-4 shadow-sm text-foreground-400", cardOptions == null ? void 0 : cardOptions.cardClassName) }, loadingContent) : /* @__PURE__ */ React.createElement(DefaultLoading, { loadingOptions }) : data.length > 0 ? data.map((item, index) => {
-    return /* @__PURE__ */ React.createElement(
-      Card,
-      {
-        key: item[rowKey] || index,
-        className: cn("w-full shadow-sm p-4", cardOptions == null ? void 0 : cardOptions.cardClassName),
-        isPressable: !!onRowClick,
-        onPress: () => {
-          onRowClick == null ? void 0 : onRowClick(item);
-        }
-      },
-      columns.map((column, i) => {
-        const option = columnOptions == null ? void 0 : columnOptions[column.key];
-        return /* @__PURE__ */ React.createElement("div", { className: "w-full", key: column.key }, /* @__PURE__ */ React.createElement("div", { className: cn("w-full", cardOptions == null ? void 0 : cardOptions.itemClassName) }, /* @__PURE__ */ React.createElement("div", { className: cn("font-meidum text-xs text-foreground-400", option == null ? void 0 : option.labelClassName) }, column.label), /* @__PURE__ */ React.createElement("div", { className: cn("text-xs", option == null ? void 0 : option.valueClassName) }, column.render ? column.render(item) : renderFieldValue(item[column.key]))), (cardOptions == null ? void 0 : cardOptions.showDivider) && i !== columns.length - 1 && /* @__PURE__ */ React.createElement(Divider, { className: cn("my-2", cardOptions == null ? void 0 : cardOptions.dividerClassName) }));
-      })
-    );
-  }) : /* @__PURE__ */ React.createElement(Card, { className: cn("w-full h-40 flex flex-col justify-center items-center p-4 shadow-sm text-foreground-400", cardOptions == null ? void 0 : cardOptions.cardClassName) }, emptyContent)), pagination.total > pagination.limit && /* @__PURE__ */ React.createElement("div", { className: "flex justify-center" }, /* @__PURE__ */ React.createElement(
-    Pagination,
-    __spreadValues({
-      className: "mt-2",
-      showControls: true,
-      showShadow: true,
-      size: "sm",
-      radius: "sm",
-      color: "primary",
-      initialPage: 1,
-      total: Math.ceil(pagination.total / pagination.limit),
-      page: pagination.page,
-      onChange: (currentPage) => {
-        pagination.setData({
-          page: currentPage
-        });
-        if (autoScrollToTop && cardBoxRef.current) {
-          scrollIntoTop(cardBoxRef.current);
-        }
-      }
-    }, nextuiPaginationProps)
-  )));
-}
-function DefaultLoading({ loadingOptions }) {
-  const type = (loadingOptions == null ? void 0 : loadingOptions.type) || "skeleton";
-  const skeletonOptions = loadingOptions == null ? void 0 : loadingOptions.skeleton;
-  const spinnerOptions = loadingOptions == null ? void 0 : loadingOptions.spinner;
-  const spinnerProps = (spinnerOptions == null ? void 0 : spinnerOptions.spinnerProps) || {};
-  if (type === "skeleton") {
-    return /* @__PURE__ */ React.createElement(SkeletonBox, { className: cn("mt-2 flex-col", skeletonOptions == null ? void 0 : skeletonOptions.boxClassName), skClassName: cn("h-[30px] rounded", skeletonOptions == null ? void 0 : skeletonOptions.skeletonClassName), line: (skeletonOptions == null ? void 0 : skeletonOptions.line) || 5 });
-  }
-  return /* @__PURE__ */ React.createElement("div", { className: cn("w-full h-[100px] flex justify-center items-center", spinnerOptions == null ? void 0 : spinnerOptions.boxClassName) }, /* @__PURE__ */ React.createElement(Spinner, __spreadValues({ size: "sm", color: "primary" }, spinnerProps)), /* @__PURE__ */ React.createElement("div", { className: cn("ml-2 text-[#64748B] text-sm", spinnerOptions == null ? void 0 : spinnerOptions.textClassName) }, (spinnerOptions == null ? void 0 : spinnerOptions.text) || "Loading..."));
-}
-function scrollIntoTop(target) {
-  if (target) {
-    const { top } = target.getBoundingClientRect();
-    window.scrollTo({
-      top: top + window.scrollY - 100,
-      behavior: "smooth"
-    });
-  }
-}
-
-export { JSONTable };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-OLIJS6AT.mjs.map

package/dist/chunk-OLIJS6AT.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../components/JSONTable/index.tsx"],"names":["sortableColumnsDefaultValue","columns","keys","_a","sortedData"],"mappings":"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","sourcesContent":["\"use client\";\n\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\nimport {\n  Card,\n  Divider,\n  Dropdown,\n  DropdownItem,\n  DropdownMenu,\n  DropdownTrigger,\n  Pagination as NextuiPagination,\n  PaginationProps,\n  PopoverSlots,\n  SlotsToClasses,\n  Spinner,\n  SpinnerProps,\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n  TableSlots,\n} from '@nextui-org/react';\nimport { ChevronDown, ChevronUp, ChevronsUpDown } from \"lucide-react\";\nimport { observer } from \"mobx-react-lite\";\nimport { PaginationState } from \"../../store/standard/PaginationState\";\nimport { SkeletonBox } from \"../Common/SkeletonBox\";\nimport { _ } from \"../../lib/lodash\";\nimport { cn } from \"../../lib/utils\";\n\nexport type HeaderKeys<T extends Record<string, any>> = Array<keyof T | '$actions'>;\n\nexport type ColumnOptions<T> = {\n  [key in keyof T]?: {\n    label?: React.ReactNode;\n    hidden?: boolean;\n    sortable?: boolean;\n    sortKey?: string;\n    order?: number;\n    render?: (item: T) => any;\n    labelClassName?: string;\n    valueClassName?: string;\n  };\n} & {\n  $actions?: {\n    label?: React.ReactNode;\n    hidden?: boolean;\n    sortable?: boolean;\n    sortKey?: string;\n    order?: number;\n    render?: (item: T) => any;\n    labelClassName?: string;\n    valueClassName?: string;\n  };\n};\n\nexport type Column<T> = {\n  key: string;\n  label: React.ReactNode;\n  render?: (item: T) => any;\n};\n\nexport type ExtendedTable<U> = {\n  key: string;\n  columns: Column<U>[];\n};\n\nexport type CardOptions = {\n  boxClassName?: string;\n  cardClassName?: string;\n  itemClassName?: string;\n  showDivider?: boolean;\n  dividerClassName?: string;\n};\n\ntype LoadingOptions = {\n  type?: 'skeleton' | 'spinner';\n  skeleton?: {\n    boxClassName?: string;\n    skeletonClassName?: string;\n    line?: number;\n  };\n  spinner?: {\n    boxClassName?: string;\n    spinnerProps?: SpinnerProps;\n    text?: string;\n    textClassName?: string;\n  };\n};\n\nexport interface JSONTableProps<T extends Record<string, any>> {\n  className?: string;\n  classNames?: SlotsToClasses<TableSlots>;\n  rowKey?: keyof T;\n  dataSource: T[];\n  headerKeys?: HeaderKeys<T>;\n  columnOptions?: ColumnOptions<T>;\n  isServerPaging?: boolean;\n  pagination?: PaginationState;\n  nextuiPaginationProps?: PaginationProps | {};\n  onRowClick?: (item: T) => void;\n  rowCss?: string | ((item: T) => string | undefined);\n  asCard?: boolean;\n  cardOptions?: CardOptions;\n  autoScrollToTop?: boolean;\n  emptyContent?: React.ReactNode;\n  isLoading?: boolean;\n  loadingOptions?: LoadingOptions;\n  loadingContent?: React.ReactNode;\n  isHeaderSticky?: boolean;\n  sortingUIOptions?: {\n    dropdownClassNames?: SlotsToClasses<PopoverSlots>;\n    titleClassName?: string;\n    titles?: {\n      asc?: string;\n      desc?: string;\n      none?: string;\n    };\n  };\n  extendedTableOptions?: {\n    key: keyof T;\n    columnOptions: ColumnOptions<any>;\n  }[];\n}\n\nexport const JSONTable = observer(<T extends Record<string, any>>(props: JSONTableProps<T>) => {\n  const {\n    className,\n    classNames = {},\n    dataSource,\n    columnOptions,\n    headerKeys,\n    isServerPaging,\n    pagination = new PaginationState({\n      page: 1,\n      limit: 8,\n    }),\n    nextuiPaginationProps = {},\n    rowKey = 'id',\n    onRowClick,\n    rowCss,\n    asCard = false,\n    cardOptions = {\n      boxClassName: '',\n      cardClassName: '',\n      itemClassName: '',\n      showDivider: true,\n      dividerClassName: '',\n    },\n    autoScrollToTop = false,\n    emptyContent = 'No Data',\n    isLoading = false,\n    loadingOptions,\n    loadingContent,\n    isHeaderSticky = false,\n    sortingUIOptions,\n    extendedTableOptions = [],\n  } = props;\n\n  const tableBoxRef = useRef<HTMLElement>(null);\n\n  const { columns, sortableColumnsDefaultValue } = useMemo(() => {\n    const firstData = dataSource[0];\n\n    const allKeys = firstData ? Object.keys(firstData) : [];\n    const keys = headerKeys ? headerKeys : columnOptions ? allKeys.filter((key) => !columnOptions[key]?.hidden) : allKeys;\n    if (!keys.includes('$actions') && columnOptions && columnOptions['$actions']) {\n      keys.push('$actions');\n    }\n\n    const sortableColumnsDefaultValue: { [k: string]: 'asc' | 'desc' | 'none' } = {};\n\n    // @ts-ignore\n    const columns: Column<T>[] = keys.map((key: string) => {\n      const sortable = columnOptions?.[key]?.sortable;\n      if (sortable) {\n        sortableColumnsDefaultValue[key] = 'none';\n      }\n      return {\n        key,\n        label: columnOptions?.[key]?.label || (key === '$actions' ? '' : key),\n        render: columnOptions?.[key]?.render,\n      };\n    });\n\n    if (!headerKeys && columnOptions) {\n      columns.sort((a, b) => {\n        const aOrder = columnOptions[a.key]?.order || 0;\n        const bOrder = columnOptions[b.key]?.order || 0;\n        return bOrder - aOrder;\n      });\n    }\n\n    const extendedTables = firstData\n      ? extendedTableOptions\n        .filter((item) => {\n          return Array.isArray(firstData[item.key]);\n        })\n        .map((item) => {\n          const index = columns.findIndex((c) => c.key === item.key);\n          if (index > -1) {\n            columns.splice(index, 1);\n          }\n          const keys = Object.keys(item.columnOptions);\n          return {\n            key: item.key as string,\n            columns: keys.map((k) => {\n              const option = item.columnOptions[k];\n              return {\n                key: k,\n                label: option?.label || k,\n                render: option?.render,\n              };\n            }),\n          };\n        })\n      : [];\n\n    return {\n      columns,\n      extendedTables,\n      sortableColumnsDefaultValue,\n    };\n  }, [dataSource, columnOptions]);\n\n  const [sortableColumnsMap, setSortableColumnsMap] = useState<{ [k: string]: 'asc' | 'desc' | 'none' }>({});\n  const [sortedData, setSortedData] = useState<T[]>(dataSource);\n\n  useEffect(() => {\n    setSortableColumnsMap(sortableColumnsDefaultValue);\n  }, [sortableColumnsDefaultValue]);\n\n  useEffect(() => {\n    setSortedData(dataSource);\n    if (!isServerPaging) {\n      pagination.setData({\n        total: dataSource.length,\n      });\n    }\n  }, [dataSource]);\n\n  const data = isServerPaging ? sortedData : sortedData.slice(pagination.offset, pagination.offset + pagination.limit);\n\n  if (asCard) {\n    return (\n      <CardUI\n        className={className}\n        rowKey={rowKey}\n        data={data}\n        columns={columns}\n        columnOptions={columnOptions}\n        cardOptions={cardOptions}\n        pagination={pagination}\n        nextuiPaginationProps={nextuiPaginationProps}\n        onRowClick={onRowClick}\n        autoScrollToTop={autoScrollToTop}\n        emptyContent={emptyContent}\n        isLoading={isLoading}\n        loadingOptions={loadingOptions}\n        loadingContent={loadingContent}\n      />\n    );\n  }\n\n  return (\n    <>\n      <Table\n        removeWrapper\n        isHeaderSticky={isHeaderSticky}\n        className={cn('relative w-full overflow-auto h-[400px]', className)}\n        classNames={classNames}\n        ref={tableBoxRef}\n      >\n        <TableHeader columns={columns}>\n          {columns.map((item) => (\n            <TableColumn key={item.key}>\n              <div className=\"flex items-center\">\n                <span>{item.label}</span>\n                {!!sortableColumnsMap[item.key] && (\n                  <Dropdown\n                    showArrow\n                    backdrop=\"opaque\"\n                    placement=\"bottom\"\n                    classNames={{\n                      content: 'min-w-[80px] rounded-lg shadow-md border dark:border-[#3e3e3e]',\n                      ...sortingUIOptions?.dropdownClassNames\n                    }}\n                  >\n                    <DropdownTrigger>\n                      <button className=\"outline-none p-0\">\n                        {sortableColumnsMap[item.key] === 'desc' && <ChevronDown size={14} />}\n                        {sortableColumnsMap[item.key] === 'asc' && <ChevronUp size={14} />}\n                        {sortableColumnsMap[item.key] === 'none' && <ChevronsUpDown size={14} />}\n                      </button>\n                    </DropdownTrigger>\n                    <DropdownMenu variant=\"flat\" selectionMode=\"single\" selectedKeys={[sortableColumnsMap[item.key]]}>\n                      <DropdownItem\n                        key=\"asc\"\n                        onClick={() => {\n                          const { sortableColumns, sortedData } = sortData({\n                            type: 'asc',\n                            key: item.key,\n                            sortKey: columnOptions?.[item.key]?.sortKey,\n                            sortableColumnsMap,\n                            dataSource,\n                          });\n                          setSortableColumnsMap(sortableColumns);\n                          setSortedData(sortedData);\n                        }}\n                      >\n                        <span className={cn('text-xs font-bold', sortingUIOptions?.titleClassName)}>{sortingUIOptions?.titles?.asc || 'ASC'}</span>\n                      </DropdownItem>\n                      <DropdownItem\n                        key=\"desc\"\n                        onClick={() => {\n                          const { sortableColumns, sortedData } = sortData({\n                            type: 'desc',\n                            key: item.key,\n                            sortKey: columnOptions?.[item.key]?.sortKey,\n                            sortableColumnsMap,\n                            dataSource,\n                          });\n                          setSortableColumnsMap(sortableColumns);\n                          setSortedData(sortedData);\n                        }}\n                      >\n                        <span className={cn('text-xs font-bold', sortingUIOptions?.titleClassName)}>{sortingUIOptions?.titles?.desc || 'DESC'}</span>\n                      </DropdownItem>\n                      <DropdownItem\n                        key=\"none\"\n                        onClick={() => {\n                          const { sortableColumns, sortedData } = sortData({\n                            type: 'none',\n                            key: item.key,\n                            sortKey: columnOptions?.[item.key]?.sortKey,\n                            sortableColumnsMap,\n                            dataSource,\n                          });\n                          setSortableColumnsMap(sortableColumns);\n                          setSortedData(sortedData);\n                        }}\n                      >\n                        <span className={cn('text-xs font-bold', sortingUIOptions?.titleClassName)}>{sortingUIOptions?.titles?.none || 'NONE'}</span>\n                      </DropdownItem>\n                    </DropdownMenu>\n                  </Dropdown>\n                )}\n              </div>\n            </TableColumn>\n          ))}\n        </TableHeader>\n        {isLoading ? (\n          <TableBody emptyContent={loadingContent || DefaultLoading({ loadingOptions })}>{[]}</TableBody>\n        ) : data.length > 0 ? (\n          <TableBody>\n            {data.map((item, index) => {\n              return (\n                <TableRow\n                  key={item[rowKey] || index}\n                  className={cn('', typeof rowCss === 'function' ? rowCss(item) : rowCss)}\n                  onClick={() => {\n                    onRowClick?.(item);\n                  }}\n                >\n                  {columns.map((column) => {\n                    return <TableCell key={column.key}>{column.render ? column.render(item) : renderFieldValue(item[column.key])}</TableCell>;\n                  })}\n                </TableRow>\n              );\n            })}\n          </TableBody>\n        ) : (\n          <TableBody emptyContent={emptyContent}>{[]}</TableBody>\n        )}\n      </Table>\n      {pagination.total > pagination.limit && (\n        <div className=\"flex justify-center\">\n          <NextuiPagination\n            className=\"mt-2\"\n            showControls\n            showShadow\n            size=\"sm\"\n            radius=\"sm\"\n            color=\"primary\"\n            initialPage={1}\n            total={Math.ceil(pagination.total / pagination.limit)}\n            page={pagination.page}\n            onChange={(currentPage) => {\n              pagination.setData({\n                page: currentPage,\n              });\n              if (autoScrollToTop && tableBoxRef.current) {\n                scrollIntoTop(tableBoxRef.current);\n              }\n            }}\n            {...nextuiPaginationProps}\n          />\n        </div>\n      )}\n    </>\n  );\n});\n\nfunction renderFieldValue(v: any) {\n  if (typeof v == 'string' || typeof v == 'number') {\n    return v;\n  }\n  if (v == null) {\n    return null;\n  }\n  return JSON.stringify(v);\n}\n\nfunction sortData<T>({\n  sortKey,\n  key,\n  type,\n  sortableColumnsMap,\n  dataSource,\n}: {\n  sortKey: string | undefined;\n  key: string;\n  type: 'asc' | 'desc' | 'none';\n  sortableColumnsMap: {\n    [k: string]: 'asc' | 'desc' | 'none';\n  };\n  dataSource: T[];\n}) {\n  const sortableColumns: { [k: string]: 'asc' | 'desc' | 'none' } = {};\n  Object.keys(sortableColumnsMap).map((k) => {\n    sortableColumns[k] = k === key ? type : 'none';\n  });\n  let sortedData = dataSource;\n  if (type !== 'none') {\n    const result = _.orderBy(\n      dataSource,\n      (o) => {\n        const v = _.get(o, sortKey || key);\n        if (v == null) {\n          return type === 'desc' ? '' : v;\n        }\n        if (typeof v === 'string') {\n          const _v = Number(v);\n          if (isNaN(_v)) {\n            return v.toLowerCase();\n          } else {\n            return _v;\n          }\n        }\n        return v;\n      },\n      type,\n    );\n    sortedData = result;\n  }\n  return {\n    sortableColumns,\n    sortedData,\n  };\n}\n\nfunction CardUI<T>({\n  className,\n  data,\n  columns,\n  columnOptions,\n  rowKey,\n  cardOptions,\n  pagination,\n  nextuiPaginationProps,\n  onRowClick,\n  autoScrollToTop,\n  emptyContent,\n  isLoading,\n  loadingOptions,\n  loadingContent,\n}: {\n  className?: string;\n  data: T[];\n  columns: Column<T>[];\n  columnOptions?: ColumnOptions<T>;\n  rowKey: string | number | symbol;\n  cardOptions?: CardOptions;\n  pagination: PaginationState;\n  nextuiPaginationProps: PaginationProps | {};\n  onRowClick?: (item: T) => void;\n  autoScrollToTop?: boolean;\n  emptyContent?: React.ReactNode;\n  isLoading?: boolean;\n  loadingOptions?: LoadingOptions;\n  loadingContent?: React.ReactNode;\n}) {\n  const cardBoxRef = useRef<HTMLDivElement>(null);\n  return (\n    <div className={className} ref={cardBoxRef}>\n      <div className={cn('space-y-2', cardOptions?.boxClassName)}>\n        {isLoading ? (\n          loadingContent ? (\n            <Card className={cn('w-full h-40 flex flex-col justify-center items-center p-4 shadow-sm text-foreground-400', cardOptions?.cardClassName)}>{loadingContent}</Card>\n          ) : (\n            <DefaultLoading loadingOptions={loadingOptions} />\n          )\n        ) : data.length > 0 ? (\n          data.map((item, index) => {\n            return (\n              <Card\n                key={item[rowKey] || index}\n                className={cn('w-full shadow-sm p-4', cardOptions?.cardClassName)}\n                isPressable={!!onRowClick}\n                onPress={() => {\n                  onRowClick?.(item);\n                }}\n              >\n                {columns.map((column, i) => {\n                  const option = columnOptions?.[column.key];\n                  return (\n                    <div className=\"w-full\" key={column.key}>\n                      <div className={cn('w-full', cardOptions?.itemClassName)}>\n                        <div className={cn('font-meidum text-xs text-foreground-400', option?.labelClassName)}>{column.label}</div>\n                        <div className={cn('text-xs', option?.valueClassName)}>{column.render ? column.render(item) : renderFieldValue(item[column.key])}</div>\n                      </div>\n                      {cardOptions?.showDivider && i !== columns.length - 1 && <Divider className={cn('my-2', cardOptions?.dividerClassName)} />}\n                    </div>\n                  );\n                })}\n              </Card>\n            );\n          })\n        ) : (\n          <Card className={cn('w-full h-40 flex flex-col justify-center items-center p-4 shadow-sm text-foreground-400', cardOptions?.cardClassName)}>{emptyContent}</Card>\n        )}\n      </div>\n      {pagination.total > pagination.limit && (\n        <div className=\"flex justify-center\">\n          <NextuiPagination\n            className='mt-2'\n            showControls\n            showShadow\n            size=\"sm\"\n            radius=\"sm\"\n            color=\"primary\"\n            initialPage={1}\n            total={Math.ceil(pagination.total / pagination.limit)}\n            page={pagination.page}\n            onChange={(currentPage) => {\n              pagination.setData({\n                page: currentPage,\n              });\n              if (autoScrollToTop && cardBoxRef.current) {\n                scrollIntoTop(cardBoxRef.current);\n              }\n            }}\n            {...nextuiPaginationProps}\n          />\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction DefaultLoading({ loadingOptions }: { loadingOptions?: LoadingOptions }) {\n  const type = loadingOptions?.type || 'skeleton';\n  const skeletonOptions = loadingOptions?.skeleton;\n  const spinnerOptions = loadingOptions?.spinner;\n  const spinnerProps = spinnerOptions?.spinnerProps || {};\n\n  if (type === 'skeleton') {\n    return <SkeletonBox className={cn('mt-2 flex-col', skeletonOptions?.boxClassName)} skClassName={cn('h-[30px] rounded', skeletonOptions?.skeletonClassName)} line={skeletonOptions?.line || 5} />;\n  }\n\n  return (\n    <div className={cn('w-full h-[100px] flex justify-center items-center', spinnerOptions?.boxClassName)}>\n      <Spinner size=\"sm\" color=\"primary\" {...spinnerProps} />\n      <div className={cn('ml-2 text-[#64748B] text-sm', spinnerOptions?.textClassName)}>{spinnerOptions?.text || 'Loading...'}</div>\n    </div>\n  );\n}\n\nfunction scrollIntoTop(target: HTMLElement) {\n  if (target) {\n    const { top } = target.getBoundingClientRect();\n    window.scrollTo({\n      top: top + window.scrollY - 100,\n      behavior: 'smooth',\n    });\n  }\n}\n\nfunction CollapseBody<T>({\n  data,\n  rowKey,\n  columns,\n  extendedTables,\n  rowCss,\n}: {\n  data: T[];\n  rowKey: string | number | symbol;\n  columns: Column<T>[];\n  extendedTables: ExtendedTable<any>[];\n  rowCss?: string | ((item: T) => string | undefined);\n}) {\n  return (\n    <TableBody>\n      {data.map((item, index) => {\n        return <CollapseBodyRow key={item[rowKey] || index} item={item} columns={columns} extendedTables={extendedTables} rowCss={rowCss} />;\n      })}\n    </TableBody>\n  );\n}\n\nfunction CollapseBodyRow<T>({ item, columns, extendedTables, rowCss }: { item: T; columns: Column<T>[]; extendedTables: ExtendedTable<any>[]; rowCss?: string | ((item: T) => string | undefined) }) {\n  const [isOpen, setIsOpen] = useState(false);\n  return (\n    <>\n      <TableRow\n        className={cn('text-xs cursor-pointer hover:bg-[#f6f6f9] dark:hover:bg-[#19191c]', typeof rowCss === 'function' ? rowCss(item) : rowCss)}\n        onClick={(e: any) => {\n          const { nodeName } = e.target;\n          if (nodeName === 'TD' || nodeName === 'svg') {\n            setIsOpen((v) => !v);\n          }\n        }}\n      >\n        {columns.map((column) => {\n          return (\n            <TableCell key={column.key} className=\"max-w-[200px] overflow-auto\">\n              {column.render ? column.render(item) : renderFieldValue(item[column.key])}\n            </TableCell>\n          );\n        })}\n      </TableRow>\n      <TableRow className={cn(isOpen ? 'table-row' : 'hidden')}>\n        <TableCell colSpan={columns.length}>\n          {extendedTables.map((ex) => {\n            const exColumns = ex.columns;\n            const exRow = item[ex.key];\n            return (\n              <Table className=\"mt-[10px]\" key={ex.key}>\n                <TableHeader>\n                  {exColumns.map((exC) => {\n                    return (\n                      <TableColumn key={exC.key} className=\"text-xs text-[#64748B] dark:text-gray-300\">\n                        {exC.label}\n                      </TableColumn>\n                    );\n                  })}\n                </TableHeader>\n                <TableBody>\n                  {exRow.map((exItem) => (\n                    <TableRow className=\"text-xs hover:bg-[#f6f6f9] dark:hover:bg-[#19191c]\" key={exItem.key}>\n                      {exColumns.map((exC) => {\n                        return (\n                          <TableCell key={exC.key} className=\"max-w-[200px] overflow-auto\">\n                            {exC.render\n                              ? exC.render({\n                                ...exItem,\n                                $parent: item,\n                              })\n                              : renderFieldValue(exItem[exC.key])}\n                          </TableCell>\n                        );\n                      })}\n                    </TableRow>\n                  ))}\n                </TableBody>\n              </Table>\n            );\n          })}\n        </TableCell>\n      </TableRow>\n    </>\n  )\n}\n"]}