warqadui 0.0.103 → 0.0.104

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/index.d.mts +8 -4
  2. package/dist/index.d.ts +8 -4
  3. package/dist/index.js +68 -13
  4. package/dist/index.mjs +68 -13
  5. package/dist/styles.js +3 -0
  6. package/dist/styles.mjs +3 -0
  7. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -546,6 +546,7 @@ interface DataTableProps<TData, TValue> {
546
546
  searchPlaceholder?: string;
547
547
  className?: string;
548
548
  verticalLines?: boolean;
549
+ verclines?: boolean;
549
550
  rowPadding?: string;
550
551
  index?: boolean;
551
552
  renderSubComponent?: (props: {
@@ -570,7 +571,7 @@ interface DataTableProps<TData, TValue> {
570
571
  filterables?: boolean;
571
572
  emptyState?: React__default.ReactNode;
572
573
  }
573
- declare function DataTable<TData, TValue>({ columns: userColumns, data, isLoading, pageRows, searchPlaceholder, className, verticalLines, rowPadding, index, renderSubComponent, hasSubComponent, // default to true
574
+ declare function DataTable<TData, TValue>({ columns: userColumns, data, isLoading, pageRows, searchPlaceholder, className, verticalLines: userVerticalLines, verclines, rowPadding, index, renderSubComponent, hasSubComponent, // default to true
574
575
  defaultExpanded, onChange, selectable, filterables, emptyState, }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
575
576
 
576
577
  declare module "@tanstack/react-table" {
@@ -604,6 +605,7 @@ interface PostTableProps<TData> {
604
605
  isLoading?: boolean;
605
606
  className?: string;
606
607
  verticalLines?: boolean;
608
+ verclines?: boolean;
607
609
  rowPadding?: string;
608
610
  index?: boolean;
609
611
  renderAddButton?: (entryData: Partial<TData>, handleSaveField: () => void, isSaving: boolean) => React__default.ReactNode;
@@ -618,7 +620,7 @@ interface PostTableProps<TData> {
618
620
  onEdit?: (row: TData) => void;
619
621
  onDelete?: (row: TData) => void;
620
622
  }
621
- declare function PostTable<TData extends Record<string, any>>({ columns: userColumns, data: controlledData, onChange, isLoading, className, verticalLines, rowPadding, index, renderAddButton, renderSubComponent, hasSubComponent, // default to true if renderSubComponent is provided
623
+ declare function PostTable<TData extends Record<string, any>>({ columns: userColumns, data: controlledData, onChange, isLoading, className, verticalLines: userVerticalLines, verclines, rowPadding, index, renderAddButton, renderSubComponent, hasSubComponent, // default to true if renderSubComponent is provided
622
624
  defaultExpanded, submitLoading, onCancel, onEdit, onDelete, }: PostTableProps<TData>): react_jsx_runtime.JSX.Element;
623
625
 
624
626
  type SimpleTableColumn<TData> = ColumnDef<TData, any> & {
@@ -639,6 +641,7 @@ interface SimpleTableProps<TData> {
639
641
  renderFooter?: () => React__default.ReactNode;
640
642
  rowPadding?: string;
641
643
  verticalLines?: boolean;
644
+ verclines?: boolean;
642
645
  index?: boolean;
643
646
  startIndex?: number;
644
647
  isLoading?: boolean;
@@ -648,7 +651,7 @@ interface SimpleTableProps<TData> {
648
651
  skeletonCount?: number;
649
652
  fixed?: boolean;
650
653
  }
651
- declare function SimpleTable<TData>({ columns: userColumns, data, className, renderFooter: componentFooter, rowPadding, verticalLines, index, startIndex, isLoading, title, enableSearch, emptyState, skeletonCount, fixed, }: SimpleTableProps<TData>): react_jsx_runtime.JSX.Element;
654
+ declare function SimpleTable<TData>({ columns: userColumns, data, className, renderFooter: componentFooter, rowPadding, verticalLines: userVerticalLines, verclines, index, startIndex, isLoading, title, enableSearch, emptyState, skeletonCount, fixed, }: SimpleTableProps<TData>): react_jsx_runtime.JSX.Element;
652
655
 
653
656
  interface SummaryColumn<T> {
654
657
  title: React__default.ReactNode;
@@ -662,8 +665,9 @@ interface SummaryTableProps<T> {
662
665
  data: T[];
663
666
  className?: string;
664
667
  isLoading?: boolean;
668
+ verclines?: boolean;
665
669
  }
666
- declare function SummaryTable<T>({ title, columns, data, className, isLoading, }: SummaryTableProps<T>): react_jsx_runtime.JSX.Element;
670
+ declare function SummaryTable<T>({ title, columns, data, className, isLoading, verclines, }: SummaryTableProps<T>): react_jsx_runtime.JSX.Element;
667
671
 
668
672
  interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
669
673
  variant?: "primary" | "danger" | "warning" | "success";
package/dist/index.d.ts CHANGED
@@ -546,6 +546,7 @@ interface DataTableProps<TData, TValue> {
546
546
  searchPlaceholder?: string;
547
547
  className?: string;
548
548
  verticalLines?: boolean;
549
+ verclines?: boolean;
549
550
  rowPadding?: string;
550
551
  index?: boolean;
551
552
  renderSubComponent?: (props: {
@@ -570,7 +571,7 @@ interface DataTableProps<TData, TValue> {
570
571
  filterables?: boolean;
571
572
  emptyState?: React__default.ReactNode;
572
573
  }
573
- declare function DataTable<TData, TValue>({ columns: userColumns, data, isLoading, pageRows, searchPlaceholder, className, verticalLines, rowPadding, index, renderSubComponent, hasSubComponent, // default to true
574
+ declare function DataTable<TData, TValue>({ columns: userColumns, data, isLoading, pageRows, searchPlaceholder, className, verticalLines: userVerticalLines, verclines, rowPadding, index, renderSubComponent, hasSubComponent, // default to true
574
575
  defaultExpanded, onChange, selectable, filterables, emptyState, }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
575
576
 
576
577
  declare module "@tanstack/react-table" {
@@ -604,6 +605,7 @@ interface PostTableProps<TData> {
604
605
  isLoading?: boolean;
605
606
  className?: string;
606
607
  verticalLines?: boolean;
608
+ verclines?: boolean;
607
609
  rowPadding?: string;
608
610
  index?: boolean;
609
611
  renderAddButton?: (entryData: Partial<TData>, handleSaveField: () => void, isSaving: boolean) => React__default.ReactNode;
@@ -618,7 +620,7 @@ interface PostTableProps<TData> {
618
620
  onEdit?: (row: TData) => void;
619
621
  onDelete?: (row: TData) => void;
620
622
  }
621
- declare function PostTable<TData extends Record<string, any>>({ columns: userColumns, data: controlledData, onChange, isLoading, className, verticalLines, rowPadding, index, renderAddButton, renderSubComponent, hasSubComponent, // default to true if renderSubComponent is provided
623
+ declare function PostTable<TData extends Record<string, any>>({ columns: userColumns, data: controlledData, onChange, isLoading, className, verticalLines: userVerticalLines, verclines, rowPadding, index, renderAddButton, renderSubComponent, hasSubComponent, // default to true if renderSubComponent is provided
622
624
  defaultExpanded, submitLoading, onCancel, onEdit, onDelete, }: PostTableProps<TData>): react_jsx_runtime.JSX.Element;
623
625
 
624
626
  type SimpleTableColumn<TData> = ColumnDef<TData, any> & {
@@ -639,6 +641,7 @@ interface SimpleTableProps<TData> {
639
641
  renderFooter?: () => React__default.ReactNode;
640
642
  rowPadding?: string;
641
643
  verticalLines?: boolean;
644
+ verclines?: boolean;
642
645
  index?: boolean;
643
646
  startIndex?: number;
644
647
  isLoading?: boolean;
@@ -648,7 +651,7 @@ interface SimpleTableProps<TData> {
648
651
  skeletonCount?: number;
649
652
  fixed?: boolean;
650
653
  }
651
- declare function SimpleTable<TData>({ columns: userColumns, data, className, renderFooter: componentFooter, rowPadding, verticalLines, index, startIndex, isLoading, title, enableSearch, emptyState, skeletonCount, fixed, }: SimpleTableProps<TData>): react_jsx_runtime.JSX.Element;
654
+ declare function SimpleTable<TData>({ columns: userColumns, data, className, renderFooter: componentFooter, rowPadding, verticalLines: userVerticalLines, verclines, index, startIndex, isLoading, title, enableSearch, emptyState, skeletonCount, fixed, }: SimpleTableProps<TData>): react_jsx_runtime.JSX.Element;
652
655
 
653
656
  interface SummaryColumn<T> {
654
657
  title: React__default.ReactNode;
@@ -662,8 +665,9 @@ interface SummaryTableProps<T> {
662
665
  data: T[];
663
666
  className?: string;
664
667
  isLoading?: boolean;
668
+ verclines?: boolean;
665
669
  }
666
- declare function SummaryTable<T>({ title, columns, data, className, isLoading, }: SummaryTableProps<T>): react_jsx_runtime.JSX.Element;
670
+ declare function SummaryTable<T>({ title, columns, data, className, isLoading, verclines, }: SummaryTableProps<T>): react_jsx_runtime.JSX.Element;
667
671
 
668
672
  interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
669
673
  variant?: "primary" | "danger" | "warning" | "success";
package/dist/index.js CHANGED
@@ -3371,7 +3371,8 @@ function DataTable({
3371
3371
  pageRows,
3372
3372
  searchPlaceholder = "Search all columns...",
3373
3373
  className = "",
3374
- verticalLines = false,
3374
+ verticalLines: userVerticalLines = false,
3375
+ verclines = false,
3375
3376
  rowPadding = "px-4 py-3",
3376
3377
  index = false,
3377
3378
  renderSubComponent,
@@ -3383,6 +3384,7 @@ function DataTable({
3383
3384
  filterables = true,
3384
3385
  emptyState
3385
3386
  }) {
3387
+ const verticalLines = userVerticalLines || verclines;
3386
3388
  const { theme } = useWarqadConfig();
3387
3389
  const primaryColor = theme?.primaryColor;
3388
3390
  const [sorting, setSorting] = (0, import_react18.useState)([]);
@@ -3608,7 +3610,10 @@ function DataTable({
3608
3610
  className: "w-full text-left border-collapse",
3609
3611
  style: { accentColor: primaryColor },
3610
3612
  children: [
3611
- /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("thead", { className: "bg-gray-50/50 dark:bg-zinc-900/50 border-b border-gray-200 dark:border-zinc-800", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("tr", { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
3613
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("thead", { className: cn(
3614
+ "bg-gray-50/50 dark:bg-zinc-900/50 border-b",
3615
+ verticalLines ? "border-gray-300 dark:border-zinc-700" : "border-gray-200 dark:border-zinc-800"
3616
+ ), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("tr", { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
3612
3617
  "th",
3613
3618
  {
3614
3619
  className: `${rowPadding} text-sm font-semibold text-gray-900 dark:text-zinc-100 text-left ${verticalLines ? "border-x border-gray-200 dark:border-zinc-800" : ""} ${header.id === "_index" || header.id === "select" || header.id === "_select" ? "w-px whitespace-nowrap" : ""}`,
@@ -3622,7 +3627,10 @@ function DataTable({
3622
3627
  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("tbody", { className: "", children: isLoading ? Array.from({ length: pageRows || 5 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
3623
3628
  "tr",
3624
3629
  {
3625
- className: "border-b border-gray-100 dark:border-zinc-800/50",
3630
+ className: cn(
3631
+ "border-b",
3632
+ verticalLines ? "border-gray-200 dark:border-zinc-800" : "border-gray-100 dark:border-zinc-800/50"
3633
+ ),
3626
3634
  children: columns.map((_2, j) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
3627
3635
  "td",
3628
3636
  {
@@ -3637,7 +3645,12 @@ function DataTable({
3637
3645
  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
3638
3646
  "tr",
3639
3647
  {
3640
- className: `border-b border-gray-200 dark:border-zinc-800 hover:bg-gray-50/50 dark:hover:bg-zinc-900/50 transition-colors last:border-b-0 ${renderSubComponent && hasSubComponent(row.original) ? "cursor-pointer" : ""}`,
3648
+ className: cn(
3649
+ "border-b transition-colors last:border-b-0",
3650
+ verticalLines ? "border-gray-300 dark:border-zinc-700" : "border-gray-200 dark:border-zinc-800",
3651
+ renderSubComponent && hasSubComponent(row.original) ? "cursor-pointer" : "",
3652
+ "hover:bg-gray-50/50 dark:hover:bg-zinc-900/50"
3653
+ ),
3641
3654
  "data-state": row.getIsSelected() && "selected",
3642
3655
  onClick: (e) => {
3643
3656
  if (renderSubComponent && hasSubComponent(row.original)) {
@@ -3782,7 +3795,12 @@ var TableRow = import_react19.default.memo(
3782
3795
  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
3783
3796
  "tr",
3784
3797
  {
3785
- className: `border-b border-gray-200 dark:border-zinc-800 hover:bg-gray-50/50 dark:hover:bg-zinc-900/50 transition-colors last:border-b-0 ${renderSubComponent && hasSubComponent(row.original) ? "cursor-pointer" : ""}`,
3798
+ className: cn(
3799
+ "border-b transition-colors last:border-b-0",
3800
+ verticalLines ? "border-gray-300 dark:border-zinc-700" : "border-gray-200 dark:border-zinc-800",
3801
+ renderSubComponent && hasSubComponent(row.original) ? "cursor-pointer" : "",
3802
+ "hover:bg-gray-50/50 dark:hover:bg-zinc-900/50"
3803
+ ),
3786
3804
  "data-state": row.getIsSelected() && "selected",
3787
3805
  onClick: (e) => {
3788
3806
  if (renderSubComponent && hasSubComponent(row.original)) {
@@ -3819,7 +3837,8 @@ function PostTable({
3819
3837
  onChange,
3820
3838
  isLoading = false,
3821
3839
  className = "",
3822
- verticalLines = false,
3840
+ verticalLines: userVerticalLines = false,
3841
+ verclines = false,
3823
3842
  rowPadding = "px-4 py-3",
3824
3843
  index = false,
3825
3844
  renderAddButton,
@@ -3832,6 +3851,7 @@ function PostTable({
3832
3851
  onEdit,
3833
3852
  onDelete
3834
3853
  }) {
3854
+ const verticalLines = userVerticalLines || verclines;
3835
3855
  const { theme } = useWarqadConfig();
3836
3856
  const primaryColor = theme?.primaryColor;
3837
3857
  const [sorting, setSorting] = (0, import_react19.useState)([]);
@@ -4147,7 +4167,10 @@ function PostTable({
4147
4167
  className: `space-y-4 w-full ${className}`,
4148
4168
  style: { "--theme-primary": primaryColor || "#3b82f6" },
4149
4169
  children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "rounded-lg border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 relative", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("table", { className: "w-full text-left border-collapse", children: [
4150
- /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("thead", { className: "bg-gray-50/50 dark:bg-zinc-900/50 border-b border-gray-200 dark:border-zinc-800", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("tr", { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
4170
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("thead", { className: cn(
4171
+ "bg-gray-50/50 dark:bg-zinc-900/50 border-b",
4172
+ verticalLines ? "border-gray-300 dark:border-zinc-700" : "border-gray-200 dark:border-zinc-800"
4173
+ ), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("tr", { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
4151
4174
  "th",
4152
4175
  {
4153
4176
  className: cn(
@@ -4173,7 +4196,10 @@ function PostTable({
4173
4196
  isLoading ? Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
4174
4197
  "tr",
4175
4198
  {
4176
- className: "border-b border-gray-100 dark:border-zinc-800/50",
4199
+ className: cn(
4200
+ "border-b",
4201
+ verticalLines ? "border-gray-200 dark:border-zinc-800" : "border-gray-100 dark:border-zinc-800/50"
4202
+ ),
4177
4203
  children: columns.map((col, j) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
4178
4204
  "td",
4179
4205
  {
@@ -4432,7 +4458,8 @@ function SimpleTable({
4432
4458
  className = "",
4433
4459
  renderFooter: componentFooter,
4434
4460
  rowPadding = "py-3",
4435
- verticalLines = false,
4461
+ verticalLines: userVerticalLines = false,
4462
+ verclines = false,
4436
4463
  index = false,
4437
4464
  startIndex = 0,
4438
4465
  isLoading = false,
@@ -4442,6 +4469,7 @@ function SimpleTable({
4442
4469
  skeletonCount = 5,
4443
4470
  fixed = true
4444
4471
  }) {
4472
+ const verticalLines = userVerticalLines || verclines;
4445
4473
  const columns = (0, import_react20.useMemo)(() => {
4446
4474
  const cols = userColumns.filter((col) => !col.hide).map((col) => ({
4447
4475
  ...col,
@@ -4577,7 +4605,8 @@ function SummaryTable({
4577
4605
  columns,
4578
4606
  data,
4579
4607
  className,
4580
- isLoading
4608
+ isLoading,
4609
+ verclines = false
4581
4610
  }) {
4582
4611
  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
4583
4612
  "div",
@@ -4618,14 +4647,36 @@ function SummaryTable({
4618
4647
  "th",
4619
4648
  {
4620
4649
  className: cn(
4621
- "px-6 py-3.5 text-xs font-bold tracking-wider text-gray-500 dark:text-gray-400 uppercase border-b border-gray-200 dark:border-zinc-800",
4650
+ "px-6 py-3.5 text-xs font-bold tracking-wider text-gray-500 dark:text-gray-400 uppercase",
4651
+ "border-b border-gray-200 dark:border-zinc-800",
4652
+ verclines && "border-r border-gray-300 dark:border-zinc-700 last:border-r-0",
4622
4653
  col.className
4623
4654
  ),
4624
4655
  children: col.title
4625
4656
  },
4626
4657
  col.key || idx
4627
4658
  )) }) }),
4628
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("tbody", { className: "text-gray-800 dark:text-gray-200 bg-white dark:bg-zinc-900", children: isLoading ? [...Array(3)].map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("tr", { className: "border-b border-gray-50 dark:border-zinc-800/60", children: columns.map((col, j) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("td", { className: "px-6 py-4", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "h-4 bg-gray-100 dark:bg-zinc-800 rounded animate-pulse w-full" }) }, j)) }, i)) : data.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("td", { colSpan: columns.length, className: "px-6 py-12 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col items-center justify-center space-y-3", children: [
4659
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("tbody", { className: "text-gray-800 dark:text-gray-200 bg-white dark:bg-zinc-900", children: isLoading ? [...Array(3)].map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
4660
+ "tr",
4661
+ {
4662
+ className: cn(
4663
+ "border-b",
4664
+ verclines ? "border-gray-300 dark:border-zinc-700" : "border-gray-50 dark:border-zinc-800/60"
4665
+ ),
4666
+ children: columns.map((col, j) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
4667
+ "td",
4668
+ {
4669
+ className: cn(
4670
+ "px-6 py-4",
4671
+ verclines && "border-r border-gray-300 dark:border-zinc-700 last:border-r-0"
4672
+ ),
4673
+ children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "h-4 bg-gray-100 dark:bg-zinc-800 rounded animate-pulse w-full" })
4674
+ },
4675
+ j
4676
+ ))
4677
+ },
4678
+ i
4679
+ )) : data.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("td", { colSpan: columns.length, className: "px-6 py-12 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col items-center justify-center space-y-3", children: [
4629
4680
  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "h-12 w-12 rounded-full bg-gray-50 dark:bg-zinc-800 flex items-center justify-center text-gray-400 border border-gray-100 dark:border-zinc-700", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
4630
4681
  "svg",
4631
4682
  {
@@ -4648,7 +4699,10 @@ function SummaryTable({
4648
4699
  ] }) }) }) : data.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
4649
4700
  "tr",
4650
4701
  {
4651
- className: "group relative transition-all duration-200 border-b border-gray-50 dark:border-zinc-800/60 last:border-0 hover:bg-blue-50/60 dark:hover:bg-blue-900/10 cursor-pointer",
4702
+ className: cn(
4703
+ "group relative transition-all duration-200 last:border-0 hover:bg-blue-50/60 dark:hover:bg-blue-900/10 cursor-pointer border-b",
4704
+ verclines ? "border-gray-300 dark:border-zinc-700" : "border-gray-50 dark:border-zinc-800/60"
4705
+ ),
4652
4706
  children: columns.map((col, colIndex) => {
4653
4707
  const value = col.render ? col.render(row, rowIndex) : col.key ? row[col.key] : null;
4654
4708
  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
@@ -4657,6 +4711,7 @@ function SummaryTable({
4657
4711
  className: cn(
4658
4712
  "px-6 py-4 whitespace-nowrap text-sm font-medium",
4659
4713
  "transition-colors",
4714
+ verclines && "border-r border-gray-200 dark:border-zinc-700 last:border-r-0",
4660
4715
  col.className
4661
4716
  ),
4662
4717
  children: value
package/dist/index.mjs CHANGED
@@ -3251,7 +3251,8 @@ function DataTable({
3251
3251
  pageRows,
3252
3252
  searchPlaceholder = "Search all columns...",
3253
3253
  className = "",
3254
- verticalLines = false,
3254
+ verticalLines: userVerticalLines = false,
3255
+ verclines = false,
3255
3256
  rowPadding = "px-4 py-3",
3256
3257
  index = false,
3257
3258
  renderSubComponent,
@@ -3263,6 +3264,7 @@ function DataTable({
3263
3264
  filterables = true,
3264
3265
  emptyState
3265
3266
  }) {
3267
+ const verticalLines = userVerticalLines || verclines;
3266
3268
  const { theme } = useWarqadConfig();
3267
3269
  const primaryColor = theme?.primaryColor;
3268
3270
  const [sorting, setSorting] = useState17([]);
@@ -3488,7 +3490,10 @@ function DataTable({
3488
3490
  className: "w-full text-left border-collapse",
3489
3491
  style: { accentColor: primaryColor },
3490
3492
  children: [
3491
- /* @__PURE__ */ jsx25("thead", { className: "bg-gray-50/50 dark:bg-zinc-900/50 border-b border-gray-200 dark:border-zinc-800", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx25("tr", { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx25(
3493
+ /* @__PURE__ */ jsx25("thead", { className: cn(
3494
+ "bg-gray-50/50 dark:bg-zinc-900/50 border-b",
3495
+ verticalLines ? "border-gray-300 dark:border-zinc-700" : "border-gray-200 dark:border-zinc-800"
3496
+ ), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx25("tr", { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx25(
3492
3497
  "th",
3493
3498
  {
3494
3499
  className: `${rowPadding} text-sm font-semibold text-gray-900 dark:text-zinc-100 text-left ${verticalLines ? "border-x border-gray-200 dark:border-zinc-800" : ""} ${header.id === "_index" || header.id === "select" || header.id === "_select" ? "w-px whitespace-nowrap" : ""}`,
@@ -3502,7 +3507,10 @@ function DataTable({
3502
3507
  /* @__PURE__ */ jsx25("tbody", { className: "", children: isLoading ? Array.from({ length: pageRows || 5 }).map((_, i) => /* @__PURE__ */ jsx25(
3503
3508
  "tr",
3504
3509
  {
3505
- className: "border-b border-gray-100 dark:border-zinc-800/50",
3510
+ className: cn(
3511
+ "border-b",
3512
+ verticalLines ? "border-gray-200 dark:border-zinc-800" : "border-gray-100 dark:border-zinc-800/50"
3513
+ ),
3506
3514
  children: columns.map((_2, j) => /* @__PURE__ */ jsx25(
3507
3515
  "td",
3508
3516
  {
@@ -3517,7 +3525,12 @@ function DataTable({
3517
3525
  /* @__PURE__ */ jsx25(
3518
3526
  "tr",
3519
3527
  {
3520
- className: `border-b border-gray-200 dark:border-zinc-800 hover:bg-gray-50/50 dark:hover:bg-zinc-900/50 transition-colors last:border-b-0 ${renderSubComponent && hasSubComponent(row.original) ? "cursor-pointer" : ""}`,
3528
+ className: cn(
3529
+ "border-b transition-colors last:border-b-0",
3530
+ verticalLines ? "border-gray-300 dark:border-zinc-700" : "border-gray-200 dark:border-zinc-800",
3531
+ renderSubComponent && hasSubComponent(row.original) ? "cursor-pointer" : "",
3532
+ "hover:bg-gray-50/50 dark:hover:bg-zinc-900/50"
3533
+ ),
3521
3534
  "data-state": row.getIsSelected() && "selected",
3522
3535
  onClick: (e) => {
3523
3536
  if (renderSubComponent && hasSubComponent(row.original)) {
@@ -3683,7 +3696,12 @@ var TableRow = React11.memo(
3683
3696
  /* @__PURE__ */ jsx26(
3684
3697
  "tr",
3685
3698
  {
3686
- className: `border-b border-gray-200 dark:border-zinc-800 hover:bg-gray-50/50 dark:hover:bg-zinc-900/50 transition-colors last:border-b-0 ${renderSubComponent && hasSubComponent(row.original) ? "cursor-pointer" : ""}`,
3699
+ className: cn(
3700
+ "border-b transition-colors last:border-b-0",
3701
+ verticalLines ? "border-gray-300 dark:border-zinc-700" : "border-gray-200 dark:border-zinc-800",
3702
+ renderSubComponent && hasSubComponent(row.original) ? "cursor-pointer" : "",
3703
+ "hover:bg-gray-50/50 dark:hover:bg-zinc-900/50"
3704
+ ),
3687
3705
  "data-state": row.getIsSelected() && "selected",
3688
3706
  onClick: (e) => {
3689
3707
  if (renderSubComponent && hasSubComponent(row.original)) {
@@ -3720,7 +3738,8 @@ function PostTable({
3720
3738
  onChange,
3721
3739
  isLoading = false,
3722
3740
  className = "",
3723
- verticalLines = false,
3741
+ verticalLines: userVerticalLines = false,
3742
+ verclines = false,
3724
3743
  rowPadding = "px-4 py-3",
3725
3744
  index = false,
3726
3745
  renderAddButton,
@@ -3733,6 +3752,7 @@ function PostTable({
3733
3752
  onEdit,
3734
3753
  onDelete
3735
3754
  }) {
3755
+ const verticalLines = userVerticalLines || verclines;
3736
3756
  const { theme } = useWarqadConfig();
3737
3757
  const primaryColor = theme?.primaryColor;
3738
3758
  const [sorting, setSorting] = useState18([]);
@@ -4048,7 +4068,10 @@ function PostTable({
4048
4068
  className: `space-y-4 w-full ${className}`,
4049
4069
  style: { "--theme-primary": primaryColor || "#3b82f6" },
4050
4070
  children: /* @__PURE__ */ jsx26("div", { className: "rounded-lg border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 relative", children: /* @__PURE__ */ jsx26("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs21("table", { className: "w-full text-left border-collapse", children: [
4051
- /* @__PURE__ */ jsx26("thead", { className: "bg-gray-50/50 dark:bg-zinc-900/50 border-b border-gray-200 dark:border-zinc-800", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx26("tr", { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx26(
4071
+ /* @__PURE__ */ jsx26("thead", { className: cn(
4072
+ "bg-gray-50/50 dark:bg-zinc-900/50 border-b",
4073
+ verticalLines ? "border-gray-300 dark:border-zinc-700" : "border-gray-200 dark:border-zinc-800"
4074
+ ), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx26("tr", { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx26(
4052
4075
  "th",
4053
4076
  {
4054
4077
  className: cn(
@@ -4074,7 +4097,10 @@ function PostTable({
4074
4097
  isLoading ? Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsx26(
4075
4098
  "tr",
4076
4099
  {
4077
- className: "border-b border-gray-100 dark:border-zinc-800/50",
4100
+ className: cn(
4101
+ "border-b",
4102
+ verticalLines ? "border-gray-200 dark:border-zinc-800" : "border-gray-100 dark:border-zinc-800/50"
4103
+ ),
4078
4104
  children: columns.map((col, j) => /* @__PURE__ */ jsx26(
4079
4105
  "td",
4080
4106
  {
@@ -4337,7 +4363,8 @@ function SimpleTable({
4337
4363
  className = "",
4338
4364
  renderFooter: componentFooter,
4339
4365
  rowPadding = "py-3",
4340
- verticalLines = false,
4366
+ verticalLines: userVerticalLines = false,
4367
+ verclines = false,
4341
4368
  index = false,
4342
4369
  startIndex = 0,
4343
4370
  isLoading = false,
@@ -4347,6 +4374,7 @@ function SimpleTable({
4347
4374
  skeletonCount = 5,
4348
4375
  fixed = true
4349
4376
  }) {
4377
+ const verticalLines = userVerticalLines || verclines;
4350
4378
  const columns = useMemo7(() => {
4351
4379
  const cols = userColumns.filter((col) => !col.hide).map((col) => ({
4352
4380
  ...col,
@@ -4482,7 +4510,8 @@ function SummaryTable({
4482
4510
  columns,
4483
4511
  data,
4484
4512
  className,
4485
- isLoading
4513
+ isLoading,
4514
+ verclines = false
4486
4515
  }) {
4487
4516
  return /* @__PURE__ */ jsxs23(
4488
4517
  "div",
@@ -4523,14 +4552,36 @@ function SummaryTable({
4523
4552
  "th",
4524
4553
  {
4525
4554
  className: cn(
4526
- "px-6 py-3.5 text-xs font-bold tracking-wider text-gray-500 dark:text-gray-400 uppercase border-b border-gray-200 dark:border-zinc-800",
4555
+ "px-6 py-3.5 text-xs font-bold tracking-wider text-gray-500 dark:text-gray-400 uppercase",
4556
+ "border-b border-gray-200 dark:border-zinc-800",
4557
+ verclines && "border-r border-gray-300 dark:border-zinc-700 last:border-r-0",
4527
4558
  col.className
4528
4559
  ),
4529
4560
  children: col.title
4530
4561
  },
4531
4562
  col.key || idx
4532
4563
  )) }) }),
4533
- /* @__PURE__ */ jsx28("tbody", { className: "text-gray-800 dark:text-gray-200 bg-white dark:bg-zinc-900", children: isLoading ? [...Array(3)].map((_, i) => /* @__PURE__ */ jsx28("tr", { className: "border-b border-gray-50 dark:border-zinc-800/60", children: columns.map((col, j) => /* @__PURE__ */ jsx28("td", { className: "px-6 py-4", children: /* @__PURE__ */ jsx28("div", { className: "h-4 bg-gray-100 dark:bg-zinc-800 rounded animate-pulse w-full" }) }, j)) }, i)) : data.length === 0 ? /* @__PURE__ */ jsx28("tr", { children: /* @__PURE__ */ jsx28("td", { colSpan: columns.length, className: "px-6 py-12 text-center", children: /* @__PURE__ */ jsxs23("div", { className: "flex flex-col items-center justify-center space-y-3", children: [
4564
+ /* @__PURE__ */ jsx28("tbody", { className: "text-gray-800 dark:text-gray-200 bg-white dark:bg-zinc-900", children: isLoading ? [...Array(3)].map((_, i) => /* @__PURE__ */ jsx28(
4565
+ "tr",
4566
+ {
4567
+ className: cn(
4568
+ "border-b",
4569
+ verclines ? "border-gray-300 dark:border-zinc-700" : "border-gray-50 dark:border-zinc-800/60"
4570
+ ),
4571
+ children: columns.map((col, j) => /* @__PURE__ */ jsx28(
4572
+ "td",
4573
+ {
4574
+ className: cn(
4575
+ "px-6 py-4",
4576
+ verclines && "border-r border-gray-300 dark:border-zinc-700 last:border-r-0"
4577
+ ),
4578
+ children: /* @__PURE__ */ jsx28("div", { className: "h-4 bg-gray-100 dark:bg-zinc-800 rounded animate-pulse w-full" })
4579
+ },
4580
+ j
4581
+ ))
4582
+ },
4583
+ i
4584
+ )) : data.length === 0 ? /* @__PURE__ */ jsx28("tr", { children: /* @__PURE__ */ jsx28("td", { colSpan: columns.length, className: "px-6 py-12 text-center", children: /* @__PURE__ */ jsxs23("div", { className: "flex flex-col items-center justify-center space-y-3", children: [
4534
4585
  /* @__PURE__ */ jsx28("div", { className: "h-12 w-12 rounded-full bg-gray-50 dark:bg-zinc-800 flex items-center justify-center text-gray-400 border border-gray-100 dark:border-zinc-700", children: /* @__PURE__ */ jsxs23(
4535
4586
  "svg",
4536
4587
  {
@@ -4553,7 +4604,10 @@ function SummaryTable({
4553
4604
  ] }) }) }) : data.map((row, rowIndex) => /* @__PURE__ */ jsx28(
4554
4605
  "tr",
4555
4606
  {
4556
- className: "group relative transition-all duration-200 border-b border-gray-50 dark:border-zinc-800/60 last:border-0 hover:bg-blue-50/60 dark:hover:bg-blue-900/10 cursor-pointer",
4607
+ className: cn(
4608
+ "group relative transition-all duration-200 last:border-0 hover:bg-blue-50/60 dark:hover:bg-blue-900/10 cursor-pointer border-b",
4609
+ verclines ? "border-gray-300 dark:border-zinc-700" : "border-gray-50 dark:border-zinc-800/60"
4610
+ ),
4557
4611
  children: columns.map((col, colIndex) => {
4558
4612
  const value = col.render ? col.render(row, rowIndex) : col.key ? row[col.key] : null;
4559
4613
  return /* @__PURE__ */ jsx28(
@@ -4562,6 +4616,7 @@ function SummaryTable({
4562
4616
  className: cn(
4563
4617
  "px-6 py-4 whitespace-nowrap text-sm font-medium",
4564
4618
  "transition-colors",
4619
+ verclines && "border-r border-gray-200 dark:border-zinc-700 last:border-r-0",
4565
4620
  col.className
4566
4621
  ),
4567
4622
  children: value
package/dist/styles.js CHANGED
@@ -2544,6 +2544,9 @@ select:-webkit-autofill:focus {
2544
2544
  .last\\:border-b-0:last-child {
2545
2545
  border-bottom-width: 0px;
2546
2546
  }
2547
+ .last\\:border-r-0:last-child {
2548
+ border-right-width: 0px;
2549
+ }
2547
2550
  .focus-within\\:bg-white:focus-within {
2548
2551
  --tw-bg-opacity: 1;
2549
2552
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
package/dist/styles.mjs CHANGED
@@ -2542,6 +2542,9 @@ select:-webkit-autofill:focus {
2542
2542
  .last\\:border-b-0:last-child {
2543
2543
  border-bottom-width: 0px;
2544
2544
  }
2545
+ .last\\:border-r-0:last-child {
2546
+ border-right-width: 0px;
2547
+ }
2545
2548
  .focus-within\\:bg-white:focus-within {
2546
2549
  --tw-bg-opacity: 1;
2547
2550
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "warqadui",
3
- "version": "0.0.103",
3
+ "version": "0.0.104",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.mjs",
6
6
  "types": "./dist/index.d.ts",