@epicbagel/saas-kit 0.0.0-stage → 1.1.0

package/dist/chunk-HQRWRRZJ.js

@@ -0,0 +1,179 @@
+"use client";
+import {
+  cn
+} from "./chunk-G6SRSWXB.js";
+
+// src/primitives/button.tsx
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        "outline-muted": "border border-input bg-background text-muted-foreground hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        quiet: "text-muted-foreground hover:bg-accent hover:text-accent-foreground",
+        "ghost-destructive": "text-destructive hover:bg-destructive/10 hover:text-destructive",
+        link: "text-primary underline-offset-4 hover:underline",
+        "link-muted": "text-muted-foreground underline-offset-4 hover:text-foreground hover:underline",
+        inverted: "bg-background text-foreground hover:bg-background/90",
+        "status-error": "bg-red-100 text-red-800 hover:bg-red-200 dark:bg-red-900/20 dark:text-red-300",
+        "status-warning": "bg-amber-100 text-amber-800 hover:bg-amber-200 dark:bg-amber-900/20 dark:text-amber-300",
+        "status-muted": "bg-muted text-muted-foreground hover:bg-muted/80"
+      },
+      size: {
+        // Standard text buttons are intentionally roomy: small is the 44px
+        // minimum control, while default and larger actions step up from it.
+        // Dense utility controls keep their explicit compact/filter variants.
+        default: "min-h-12 px-6 py-3",
+        sm: "min-h-11 rounded-md px-5 py-2.5",
+        lg: "min-h-14 rounded-md px-8 py-4",
+        hero: "min-h-14 rounded-md px-8 py-4",
+        toolbar: "min-h-12 px-5 py-3",
+        // Normal icon controls share a 44px minimum target. The icon stays
+        // visually small; the button supplies the comfortable click/tap area.
+        icon: "h-11 w-11",
+        "icon-lg": "h-12 w-12",
+        "icon-sm": "h-11 w-11",
+        "icon-md": "h-11 w-11",
+        "icon-xs": "h-6 w-6",
+        "icon-compact": "h-7 w-7",
+        "icon-micro": "h-5 w-5",
+        compact: "h-7 px-2 text-xs",
+        filter: "h-8 px-3 text-xs",
+        micro: "h-6 px-2 text-[11px]",
+        bare: "h-auto justify-start p-0",
+        status: "h-auto rounded-full px-3 py-1 text-xs",
+        "voice-sm": "h-16 w-16 rounded-full border-2",
+        voice: "h-20 w-20 rounded-full border-2",
+        suggestion: "h-auto rounded-full border-dashed px-2.5 py-1 text-[11px]",
+        tone: "h-auto w-full justify-start gap-1.5 px-2 py-1"
+      },
+      width: {
+        auto: "",
+        full: "w-full",
+        responsive: "w-full sm:w-auto"
+      },
+      align: {
+        center: "justify-center",
+        start: "justify-start"
+      },
+      shrink: {
+        true: "shrink-0",
+        false: ""
+      },
+      shape: {
+        default: "",
+        circle: "rounded-full"
+      },
+      ring: {
+        none: "",
+        surface: "ring-2 ring-background"
+      },
+      grow: {
+        true: "flex-1",
+        false: ""
+      },
+      minWidth: {
+        auto: "",
+        zero: "min-w-0"
+      },
+      textAlign: {
+        center: "text-center",
+        start: "text-left"
+      },
+      marginTop: {
+        none: "",
+        xs: "mt-1",
+        sm: "mt-2"
+      },
+      marginStart: {
+        none: "",
+        sm: "ml-1",
+        "negative-sm": "-ml-2",
+        auto: "ml-auto"
+      },
+      reveal: {
+        always: "",
+        "parent-hover": "opacity-0 transition-opacity group-hover:opacity-100 focus:opacity-100",
+        "parent-hover-responsive": "opacity-60 transition-opacity sm:opacity-0 sm:group-hover:opacity-100 focus:opacity-100"
+      },
+      interaction: {
+        none: "",
+        group: "group"
+      },
+      position: {
+        static: "",
+        relative: "relative",
+        "viewport-top-end": "fixed right-4 top-4 z-10"
+      },
+      transform: {
+        none: "",
+        capitalize: "capitalize"
+      },
+      marginEnd: {
+        none: "",
+        "negative-xs": "-mr-1"
+      },
+      gap: {
+        default: "",
+        xs: "gap-1"
+      },
+      numeric: {
+        normal: "",
+        tabular: "tabular-nums"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      width: "auto",
+      align: "center",
+      shrink: false,
+      shape: "default",
+      ring: "none",
+      grow: false,
+      minWidth: "auto",
+      textAlign: "center",
+      marginTop: "none",
+      marginStart: "none",
+      reveal: "always",
+      interaction: "none",
+      position: "static",
+      transform: "none",
+      marginEnd: "none",
+      gap: "default",
+      numeric: "normal"
+    }
+  }
+);
+var Button = forwardRef(
+  ({ className, variant, size, width, align, shrink, shape, ring, grow, minWidth, textAlign, marginTop, marginStart, reveal, interaction, position, transform, marginEnd, gap, numeric, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        "data-slot": "button",
+        "data-variant": variant ?? "default",
+        "data-size": size ?? "default",
+        "data-shape": shape ?? "default",
+        className: cn(buttonVariants({ variant, size, width, align, shrink, shape, ring, grow, minWidth, textAlign, marginTop, marginStart, reveal, interaction, position, transform, marginEnd, gap, numeric, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+export {
+  buttonVariants,
+  Button
+};

package/dist/chunk-HRLP4BHJ.js

@@ -0,0 +1,510 @@
+"use client";
+import {
+  QuickFilters
+} from "./chunk-LI5EOSQG.js";
+import {
+  LoadMoreButton
+} from "./chunk-J3GQXM37.js";
+import {
+  FilterBar
+} from "./chunk-MLHNYRFX.js";
+import {
+  Heading
+} from "./chunk-H2O6NMLZ.js";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from "./chunk-ZRLUUZHK.js";
+import {
+  BoardColumnComponent,
+  MobileBoardView
+} from "./chunk-62UTAG2C.js";
+import {
+  ScrollArea
+} from "./chunk-LELFPLTE.js";
+import {
+  Input
+} from "./chunk-QMA3WVB7.js";
+import {
+  Button
+} from "./chunk-HQRWRRZJ.js";
+import {
+  useIsMobile
+} from "./chunk-PIU5SSUV.js";
+import {
+  cn
+} from "./chunk-G6SRSWXB.js";
+
+// src/primitives/resource-list.tsx
+import { ChevronLeft, ChevronRight, Grid3X3, Kanban, List, Search, X } from "lucide-react";
+import { useMemo, useState, useEffect, useRef } from "react";
+import humanNumber from "human-number";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function ResourceList({
+  // Data fetching
+  data,
+  loading,
+  error,
+  refetch: _refetch,
+  // Filtering
+  filterSchema,
+  filters,
+  onFiltersChange,
+  quickFilters,
+  quickFiltersAppearance = "surface",
+  // Search
+  searchTerm: externalSearchTerm,
+  onSearchChange,
+  enableServerSearch = false,
+  searchFields,
+  searchPredicate,
+  filterPredicate,
+  // Rendering
+  renderItem,
+  renderTable,
+  renderEmpty,
+  renderLoading,
+  renderError,
+  // UI
+  title,
+  showTitle = true,
+  totalCount,
+  searchPlaceholder = "Search...",
+  showSearch = true,
+  showFilters = true,
+  showViewToggle = false,
+  toolbarSize = "roomy",
+  hideControlsWhenEmpty = false,
+  quickFiltersShowLabel = true,
+  viewMode = "card",
+  onViewModeChange,
+  // Board
+  boardConfig,
+  // Actions
+  actions,
+  filterActions,
+  // Order/Sort
+  sortOptions,
+  sortValue,
+  onSortChange,
+  // Styling
+  className = "",
+  containerClassName = "",
+  cardGridClassName,
+  // Pagination
+  showPagination = false,
+  currentPage = 1,
+  onPreviousPage,
+  onNextPage,
+  // Search UX behavior
+  useCompactSearch = false,
+  // Layout shape
+  variant = "panel",
+  // Load-more pagination
+  loadMore
+}) {
+  const isMobile = useIsMobile();
+  const [localSearchTerm, setLocalSearchTerm] = useState("");
+  const [searchExpanded, setSearchExpanded] = useState(false);
+  const searchTimeoutRef = useRef(null);
+  const [activeColumnId, setActiveColumnId] = useState(boardConfig?.columns[0]?.id ?? "");
+  const [dragItemId, setDragItemId] = useState(null);
+  const searchTerm = enableServerSearch ? externalSearchTerm || "" : localSearchTerm;
+  useEffect(() => {
+    if (useCompactSearch && searchExpanded && !searchTerm) {
+      if (searchTimeoutRef.current) {
+        clearTimeout(searchTimeoutRef.current);
+      }
+      searchTimeoutRef.current = setTimeout(() => {
+        setSearchExpanded(false);
+      }, 2e3);
+    }
+    return () => {
+      if (searchTimeoutRef.current) {
+        clearTimeout(searchTimeoutRef.current);
+      }
+    };
+  }, [useCompactSearch, searchExpanded, searchTerm]);
+  const filteredData = useMemo(() => {
+    if (!data) return [];
+    if (enableServerSearch) return data;
+    let filtered = data;
+    if (searchTerm) {
+      const lower = searchTerm.toLowerCase();
+      if (searchPredicate) {
+        filtered = filtered.filter((item) => searchPredicate(item, lower));
+      } else {
+        const fields = searchFields ?? [
+          "name",
+          "title",
+          "id",
+          "email",
+          "customer",
+          "reference",
+          "externalId",
+          "trackingNumber",
+          "orderId",
+          "externalOrderId"
+        ];
+        filtered = filtered.filter(
+          (item) => fields.some((field) => {
+            const value = item[field];
+            if (value == null) return false;
+            return String(value).toLowerCase().includes(lower);
+          })
+        );
+      }
+    }
+    if (filterPredicate) {
+      const hasActive = Object.values(filters).some(
+        (v) => v !== void 0 && v !== null && v !== ""
+      );
+      if (hasActive) {
+        filtered = filtered.filter((item) => filterPredicate(item, filters));
+      }
+    } else {
+      Object.entries(filters).forEach(([filterKey, filterValue]) => {
+        if (filterValue === void 0 || filterValue === null || filterValue === "") return;
+        filtered = filtered.filter((item) => {
+          if (Array.isArray(filterValue)) {
+            if (filterValue.length === 0) return true;
+            return filterValue.includes(item[filterKey]);
+          }
+          return item[filterKey] === filterValue;
+        });
+      });
+    }
+    return filtered;
+  }, [data, searchTerm, filters, enableServerSearch, searchFields, searchPredicate, filterPredicate]);
+  const grouped = useMemo(() => {
+    if (!boardConfig) return {};
+    const map = {};
+    for (const col of boardConfig.columns) map[col.id] = [];
+    for (const item of filteredData) {
+      const colId = boardConfig.getColumnId(item);
+      if (map[colId]) map[colId].push(item);
+    }
+    return map;
+  }, [filteredData, boardConfig]);
+  const defaultRenderEmpty = () => /* @__PURE__ */ jsxs("div", { className: "p-8 text-center text-muted-foreground", children: [
+    "No ",
+    title.toLowerCase(),
+    " found."
+  ] });
+  const defaultRenderLoading = () => /* @__PURE__ */ jsxs("div", { className: "p-8 text-center text-muted-foreground", children: [
+    "Loading ",
+    title.toLowerCase(),
+    "..."
+  ] });
+  const defaultRenderError = (error2) => /* @__PURE__ */ jsxs("div", { className: "p-8 text-center text-destructive", children: [
+    "Error loading ",
+    title.toLowerCase(),
+    ": ",
+    error2?.message || error2
+  ] });
+  const boardActive = viewMode === "board" && !!boardConfig;
+  const renderContent = () => {
+    if (boardActive && boardConfig) {
+      if (isMobile) {
+        return /* @__PURE__ */ jsx(
+          MobileBoardView,
+          {
+            columns: boardConfig.columns,
+            grouped,
+            activeColumnId,
+            onActiveColumnChange: setActiveColumnId,
+            loading,
+            getItemId: boardConfig.getItemId,
+            renderCard: boardConfig.renderCard,
+            renderEmpty: boardConfig.renderColumnEmpty,
+            onMove: boardConfig.onMove
+          }
+        );
+      }
+      return /* @__PURE__ */ jsx("div", { className: cn("overflow-x-auto", boardConfig.viewport === "bounded" && "overscroll-x-contain"), children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "grid grid-flow-col gap-3",
+            boardConfig.viewport === "bounded" && "h-[calc(100dvh-270px)] min-h-[360px]"
+          ),
+          style: {
+            gridAutoColumns: boardConfig.columnWidth ?? "280px",
+            minHeight: boardConfig.viewport === "bounded" ? void 0 : boardConfig.columnMinHeight ?? "400px"
+          },
+          children: boardConfig.columns.map((col) => /* @__PURE__ */ jsx(
+            BoardColumnComponent,
+            {
+              column: col,
+              items: grouped[col.id] || [],
+              loading,
+              getItemId: boardConfig.getItemId,
+              renderCard: boardConfig.renderCard,
+              renderColumnHeader: boardConfig.renderColumnHeader,
+              renderEmpty: boardConfig.renderColumnEmpty,
+              dragItemId,
+              onDragStart: setDragItemId,
+              onDragEnd: () => setDragItemId(null),
+              onMove: boardConfig.onMove,
+              columnMinHeight: boardConfig.columnMinHeight ?? "400px"
+            },
+            col.id
+          ))
+        }
+      ) });
+    }
+    if (viewMode === "table" && renderTable) {
+      return renderTable(filteredData);
+    }
+    return /* @__PURE__ */ jsx("div", { className: cardGridClassName || "grid grid-cols-1 gap-4", children: filteredData.map((item, index) => /* @__PURE__ */ jsx("div", { children: renderItem(item, index) }, item.id || index)) });
+  };
+  const isFlush = variant === "flush";
+  const useOuterScroll = !isFlush && !boardActive;
+  const filterBarVisible = showFilters && (!useCompactSearch || !searchExpanded);
+  const toolbarHasOtherControls = showSearch || !!(showViewToggle && onViewModeChange) || !!(showPagination && onPreviousPage && onNextPage);
+  const hasQuickFilters = !!quickFilters && quickFilters.length > 0;
+  const controlsVisible = !(hideControlsWhenEmpty && !loading && !error && data?.length === 0);
+  const filterOnQuickRow = filterBarVisible && !toolbarHasOtherControls && hasQuickFilters;
+  const filterBarNode = filterBarVisible ? /* @__PURE__ */ jsx(
+    FilterBar,
+    {
+      filters: filterSchema,
+      onFiltersChange,
+      activeFilters: filters,
+      includeLabel: false,
+      actions: filterActions,
+      sortOptions,
+      sortValue,
+      onSortChange,
+      triggerSize: toolbarSize === "roomy" ? "lg" : "default"
+    }
+  ) : null;
+  const showToolbarRow = toolbarHasOtherControls || filterBarVisible && !filterOnQuickRow;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: isFlush ? className : `flex flex-1 h-full ${className}`,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: isFlush ? `space-y-4 ${containerClassName}` : `flex-1 ${containerClassName}`,
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: isFlush ? void 0 : "p-4 border-b", children: [
+              (showTitle && title || actions) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
+                showTitle && title && /* @__PURE__ */ jsx(Heading, { level: 1, children: title }),
+                /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: actions })
+              ] }),
+              controlsVisible && showToolbarRow && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+                showSearch && /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: `relative ${useCompactSearch ? `transition-all duration-300 ease-in-out ${searchExpanded ? "flex-1" : "flex-1"}` : "flex-1"}`,
+                    children: [
+                      /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" }),
+                      /* @__PURE__ */ jsx(
+                        Input,
+                        {
+                          placeholder: searchPlaceholder,
+                          value: searchTerm,
+                          onFocus: () => {
+                            if (useCompactSearch) {
+                              setSearchExpanded(true);
+                            }
+                          },
+                          onBlur: () => {
+                            if (useCompactSearch && !searchTerm) {
+                              setTimeout(() => setSearchExpanded(false), 200);
+                            }
+                          },
+                          onChange: (e) => {
+                            const value = e.target.value;
+                            if (enableServerSearch && onSearchChange) {
+                              onSearchChange(value);
+                            } else {
+                              setLocalSearchTerm(value);
+                            }
+                          },
+                          onKeyDown: (e) => {
+                            if (useCompactSearch && e.key === "Enter") {
+                              e.currentTarget.blur();
+                              setSearchExpanded(false);
+                            }
+                          },
+                          className: "pl-9 pr-8",
+                          controlSize: toolbarSize === "roomy" ? "lg" : "default"
+                        }
+                      ),
+                      searchTerm && /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          variant: "ghost",
+                          size: "icon",
+                          className: "absolute right-1 top-1/2 -translate-y-1/2 h-6 w-6",
+                          onMouseDown: (e) => {
+                            if (useCompactSearch) {
+                              e.preventDefault();
+                            }
+                          },
+                          onClick: () => {
+                            if (enableServerSearch && onSearchChange) {
+                              onSearchChange("");
+                            } else {
+                              setLocalSearchTerm("");
+                            }
+                            if (useCompactSearch) {
+                              setSearchExpanded(false);
+                            }
+                          },
+                          children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
+                        }
+                      )
+                    ]
+                  }
+                ),
+                !filterOnQuickRow && filterBarNode,
+                showViewToggle && onViewModeChange && (!useCompactSearch || !searchExpanded) && /* @__PURE__ */ jsx(
+                  ViewModeToggle,
+                  {
+                    viewMode,
+                    onViewModeChange,
+                    hasTable: !!renderTable,
+                    hasBoard: !!boardConfig,
+                    roomy: toolbarSize === "roomy"
+                  }
+                ),
+                showPagination && onPreviousPage && onNextPage && (!useCompactSearch || !searchExpanded) && /* @__PURE__ */ jsxs("div", { className: "flex items-center border rounded-lg", children: [
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "outline",
+                      size: "sm",
+                      onClick: onPreviousPage,
+                      className: "rounded-r-none border-0",
+                      children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { className: "px-3 whitespace-nowrap font-mono flex flex-col items-center leading-tight py-1", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "text-xs font-semibold text-foreground", children: [
+                      "Page ",
+                      currentPage
+                    ] }),
+                    totalCount !== void 0 && /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+                      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: "text-[10px] text-muted-foreground/60 cursor-help", children: [
+                        humanNumber(totalCount, (n) => n.toFixed(1)).replace(/\.0([KMB]?)$/, "$1"),
+                        " ",
+                        totalCount === 1 ? "item" : "items"
+                      ] }) }),
+                      /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsxs("p", { children: [
+                        totalCount.toLocaleString(),
+                        " items"
+                      ] }) })
+                    ] }) })
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "outline",
+                      size: "sm",
+                      onClick: onNextPage,
+                      className: "rounded-l-none border-0",
+                      children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+                    }
+                  )
+                ] })
+              ] }),
+              controlsVisible && (hasQuickFilters || filterOnQuickRow) && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "mt-3 flex items-center gap-2",
+                    filterOnQuickRow && "justify-between"
+                  ),
+                  children: [
+                    hasQuickFilters && /* @__PURE__ */ jsx(
+                      QuickFilters,
+                      {
+                        quickFilters,
+                        activeFilters: filters,
+                        onFilterClick: onFiltersChange,
+                        showLabel: quickFiltersShowLabel,
+                        appearance: quickFiltersAppearance,
+                        className: cn(!filterOnQuickRow && "flex-1")
+                      }
+                    ),
+                    filterOnQuickRow && filterBarNode
+                  ]
+                }
+              )
+            ] }),
+            loading && !boardActive ? renderLoading?.() || defaultRenderLoading() : error ? renderError?.(error) || defaultRenderError(error) : filteredData.length === 0 && !boardActive ? renderEmpty?.() || defaultRenderEmpty() : useOuterScroll ? /* @__PURE__ */ jsx(ScrollArea, { className: "h-[calc(100vh-200px)]", children: /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
+              renderContent(),
+              loadMore && /* @__PURE__ */ jsx(
+                LoadMoreButton,
+                {
+                  onClick: loadMore.onClick,
+                  hasMore: loadMore.hasMore,
+                  loading: loadMore.loading,
+                  label: loadMore.label,
+                  loadingLabel: loadMore.loadingLabel,
+                  doneLabel: loadMore.doneLabel,
+                  totalLoaded: filteredData.length,
+                  totalCount
+                }
+              )
+            ] }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              renderContent(),
+              !boardActive && loadMore && /* @__PURE__ */ jsx(
+                LoadMoreButton,
+                {
+                  onClick: loadMore.onClick,
+                  hasMore: loadMore.hasMore,
+                  loading: loadMore.loading,
+                  label: loadMore.label,
+                  loadingLabel: loadMore.loadingLabel,
+                  doneLabel: loadMore.doneLabel,
+                  totalLoaded: filteredData.length,
+                  totalCount
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+function ViewModeToggle({
+  viewMode,
+  onViewModeChange,
+  hasTable,
+  hasBoard,
+  roomy
+}) {
+  const modes = [
+    { id: "card", icon: Grid3X3, show: true },
+    { id: "table", icon: List, show: hasTable },
+    { id: "board", icon: Kanban, show: hasBoard }
+  ].filter((m) => m.show);
+  if (modes.length <= 1) return null;
+  return /* @__PURE__ */ jsx("div", { className: "flex border rounded-lg", children: modes.map((mode, i) => /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: viewMode === mode.id ? "default" : "ghost",
+      size: roomy ? "icon-lg" : "sm",
+      onClick: () => onViewModeChange(mode.id),
+      className: [
+        i === 0 ? "rounded-r-none" : "",
+        i === modes.length - 1 ? "rounded-l-none" : "",
+        i > 0 && i < modes.length - 1 ? "rounded-none" : ""
+      ].filter(Boolean).join(" "),
+      children: /* @__PURE__ */ jsx(mode.icon, { className: "h-4 w-4" })
+    },
+    mode.id
+  )) });
+}
+
+export {
+  ResourceList
+};