@marktiderman/genesis-ui 1.0.0

package/dist/use-resource-page-BzvUM8de.d.ts

@@ -0,0 +1,159 @@
+import { ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { V as ViewMode } from './ViewToggle-DDe_Luj2.js';
+import { I as Identifier, F as FilterParam, S as SortParam } from './types-HIZY7zxO.js';
+
+interface DataTableColumn<T> {
+    key: string;
+    header: string;
+    width?: string;
+    hideBelow?: "sm" | "md" | "lg" | "xl";
+    sortable?: boolean;
+    render?: (item: T, value: unknown) => ReactNode;
+    accessor?: (item: T) => unknown;
+    editable?: {
+        type: "text" | "select";
+        options?: string[];
+        onSave: (item: T, newValue: string) => void;
+    };
+    /** Whether column is visible by default (default true) */
+    defaultVisible?: boolean;
+    /** Minimum width in px for resizing */
+    minWidth?: number;
+}
+interface DataTableProps<T> {
+    items: T[];
+    columns: DataTableColumn<T>[];
+    getKey: (item: T) => string;
+    onRowClick?: (item: T) => void;
+    selectable?: boolean;
+    selected?: Set<string>;
+    onToggleSelect?: (id: string) => void;
+    onToggleAll?: () => void;
+    renderActions?: (item: T) => ReactNode;
+    emptyMessage?: string;
+    /** Enable column visibility toggle dropdown */
+    columnVisibility?: boolean;
+    /** localStorage key for persisting column visibility */
+    columnVisibilityKey?: string;
+    /** Enable column resizing via drag */
+    resizableColumns?: boolean;
+    /** Enable pagination */
+    pagination?: boolean;
+    /** Initial page size (default 25) */
+    pageSize?: number;
+    /** Page size options (default [10, 25, 50, 100]) */
+    pageSizeOptions?: number[];
+    /** Sticky header on scroll */
+    stickyHeader?: boolean;
+    /** localStorage key for persisting column resize widths */
+    resizeKey?: string;
+    /** Make the first column sticky when scrolling horizontally */
+    stickyFirstColumn?: boolean;
+}
+declare function DataTable<T>({ items, columns, getKey, onRowClick, selectable, selected, onToggleSelect, onToggleAll, renderActions, emptyMessage, columnVisibility, columnVisibilityKey, resizableColumns, pagination, pageSize: initialPageSize, pageSizeOptions, stickyHeader, resizeKey, stickyFirstColumn, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+declare function ThumbnailCell({ src, alt, }: {
+    src?: string | null;
+    alt: string;
+}): react_jsx_runtime.JSX.Element;
+declare function LinkCell({ href, label, }: {
+    href?: string | null;
+    label?: string;
+}): react_jsx_runtime.JSX.Element;
+
+/** Actions available inside column render functions. */
+interface ResourceActions<T> {
+    update: (id: Identifier, data: Partial<T>) => Promise<T>;
+    remove: (id: Identifier) => Promise<void>;
+    refetch: () => void;
+}
+/** Column definition — full config form. */
+interface ResourceColumnDef<T> {
+    key: string;
+    header?: string;
+    sortable?: boolean;
+    hideBelow?: "sm" | "md" | "lg" | "xl";
+    render?: (item: T, value: unknown, actions: ResourceActions<T>) => ReactNode;
+}
+interface UseResourcePageProps<T> {
+    /** Resource name — used for view-preference storage key. */
+    resource?: string;
+    /** The data to display (pre-fetched or from useResource). */
+    data: T[];
+    /** Total count of records (before client-side filtering). */
+    total: number;
+    /** Column definitions. Strings are expanded to `{ key, header, sortable }`. Omit to auto-generate from data keys. */
+    columns?: Array<string | ResourceColumnDef<T>>;
+    /** Status filter config. String = field name (options auto-derived). Object = explicit field + options. */
+    statusFilter?: string | {
+        field: string;
+        options?: string[];
+    };
+    /** Fields to search across. Defaults to all string-valued fields in data. */
+    searchFields?: string[];
+    /** Initial filter params applied on mount. */
+    initialFilters?: FilterParam[];
+    /** Callback when filters change. */
+    onFiltersChange?: (filters: FilterParam[]) => void;
+    /** Default view mode. */
+    defaultView?: ViewMode;
+    /** Detail interaction mode. */
+    detail?: "panel" | "modal" | "route" | "none";
+    /** Field used for the detail title. Defaults to first column key. */
+    titleField?: string;
+    /** Field used for the detail subtitle. Defaults to second column key. */
+    subtitleField?: string;
+}
+interface UseResourcePageReturn<T> {
+    /** Filtered and sorted data for display. */
+    data: T[];
+    /** Total count (of the filtered set). */
+    total: number;
+    /** Resolved column definitions. */
+    columns: ResourceColumnDef<T>[];
+    /** Columns mapped to DataTable format. */
+    tableColumns: DataTableColumn<T>[];
+    /** Ready-to-spread filter config for DataFilters. */
+    filterConfig: {
+        search: string;
+        onSearchChange: (value: string) => void;
+        sort: string;
+        onSortChange: (sort: string) => void;
+        sortOptions: Array<{
+            value: string;
+            label: string;
+        }>;
+        statusChips?: {
+            options: string[];
+            selected: string[];
+            onChange: (values: string[]) => void;
+        };
+    };
+    viewMode: ViewMode;
+    setViewMode: (mode: ViewMode) => void;
+    search: string;
+    setSearch: (value: string) => void;
+    sort: SortParam | null;
+    setSort: (sort: SortParam | null) => void;
+    statusValue: string[];
+    setStatusValue: (values: string[]) => void;
+    selectedItem: T | null;
+    setSelectedItem: (item: T | null) => void;
+    detailOpen: boolean;
+    setDetailOpen: (open: boolean) => void;
+    handleRowClick: (item: T) => void;
+    titleField: string;
+    subtitleField: string;
+    statusOptions: string[];
+    hasActiveFilters: boolean;
+    clearFilters: () => void;
+}
+/**
+ * Convert a key string to title case.
+ *   "created_at" → "Created At"
+ *   "firstName"  → "First Name"
+ */
+declare function titleCase(str: string): string;
+declare function useResourcePage<T = Record<string, unknown>>(props: UseResourcePageProps<T>): UseResourcePageReturn<T>;
+
+export { DataTable as D, LinkCell as L, type ResourceActions as R, ThumbnailCell as T, type UseResourcePageProps as U, type ResourceColumnDef as a, type UseResourcePageReturn as b, type DataTableColumn as c, type DataTableProps as d, titleCase as t, useResourcePage as u };

package/dist/utils.d.ts

@@ -0,0 +1,7 @@
+import { ClassValue } from 'clsx';
+
+declare function cn(...inputs: ClassValue[]): string;
+declare function formatDate(date: string | Date): string;
+declare function formatRelativeTime(date: string | Date): string;
+
+export { cn, formatDate, formatRelativeTime };

package/dist/utils.js

@@ -0,0 +1,3 @@
+export { cn, formatDate, formatRelativeTime } from './chunk-NZ5WBA4R.js';
+//# sourceMappingURL=utils.js.map
+//# sourceMappingURL=utils.js.map

package/dist/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"utils.js"}

package/package.json

@@ -0,0 +1,350 @@
+{
+  "name": "@marktiderman/genesis-ui",
+  "version": "1.0.0",
+  "private": false,
+  "type": "module",
+  "sideEffects": false,
+  "description": "Genesis Shadcn-based web components. Part of the Genesis framework.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/marktiderman/genesis.git",
+    "directory": "packages/ui"
+  },
+  "license": "UNLICENSED",
+  "publishConfig": {
+    "access": "public",
+    "provenance": false
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "!dist/metafile-*.json",
+    "README.md"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./data": {
+      "types": "./dist/components/data/index.d.ts",
+      "import": "./dist/components/data/index.js"
+    },
+    "./hooks": {
+      "types": "./dist/hooks/index.d.ts",
+      "import": "./dist/hooks/index.js"
+    },
+    "./hooks/*": {
+      "types": "./dist/hooks/*.d.ts",
+      "import": "./dist/hooks/*.js"
+    },
+    "./utils": {
+      "types": "./dist/utils.d.ts",
+      "import": "./dist/utils.js"
+    },
+    "./status-colors": {
+      "types": "./dist/status-colors.d.ts",
+      "import": "./dist/status-colors.js"
+    },
+    "./provider": {
+      "types": "./dist/provider/index.d.ts",
+      "import": "./dist/provider/index.js"
+    },
+    "./accordion": {
+      "types": "./dist/components/ui/accordion.d.ts",
+      "import": "./dist/components/ui/accordion.js"
+    },
+    "./alert": {
+      "types": "./dist/components/ui/alert.d.ts",
+      "import": "./dist/components/ui/alert.js"
+    },
+    "./alert-dialog": {
+      "types": "./dist/components/ui/alert-dialog.d.ts",
+      "import": "./dist/components/ui/alert-dialog.js"
+    },
+    "./aspect-ratio": {
+      "types": "./dist/components/ui/aspect-ratio.d.ts",
+      "import": "./dist/components/ui/aspect-ratio.js"
+    },
+    "./avatar": {
+      "types": "./dist/components/ui/avatar.d.ts",
+      "import": "./dist/components/ui/avatar.js"
+    },
+    "./badge": {
+      "types": "./dist/components/ui/badge.d.ts",
+      "import": "./dist/components/ui/badge.js"
+    },
+    "./breadcrumb": {
+      "types": "./dist/components/ui/breadcrumb.d.ts",
+      "import": "./dist/components/ui/breadcrumb.js"
+    },
+    "./button": {
+      "types": "./dist/components/ui/button.d.ts",
+      "import": "./dist/components/ui/button.js"
+    },
+    "./button-group": {
+      "types": "./dist/components/ui/button-group.d.ts",
+      "import": "./dist/components/ui/button-group.js"
+    },
+    "./calendar": {
+      "types": "./dist/components/ui/calendar.d.ts",
+      "import": "./dist/components/ui/calendar.js"
+    },
+    "./card": {
+      "types": "./dist/components/ui/card.d.ts",
+      "import": "./dist/components/ui/card.js"
+    },
+    "./carousel": {
+      "types": "./dist/components/ui/carousel.d.ts",
+      "import": "./dist/components/ui/carousel.js"
+    },
+    "./chart": {
+      "types": "./dist/components/ui/chart.d.ts",
+      "import": "./dist/components/ui/chart.js"
+    },
+    "./checkbox": {
+      "types": "./dist/components/ui/checkbox.d.ts",
+      "import": "./dist/components/ui/checkbox.js"
+    },
+    "./collapsible": {
+      "types": "./dist/components/ui/collapsible.d.ts",
+      "import": "./dist/components/ui/collapsible.js"
+    },
+    "./command": {
+      "types": "./dist/components/ui/command.d.ts",
+      "import": "./dist/components/ui/command.js"
+    },
+    "./context-menu": {
+      "types": "./dist/components/ui/context-menu.d.ts",
+      "import": "./dist/components/ui/context-menu.js"
+    },
+    "./date-picker": {
+      "types": "./dist/components/ui/date-picker.d.ts",
+      "import": "./dist/components/ui/date-picker.js"
+    },
+    "./dialog": {
+      "types": "./dist/components/ui/dialog.d.ts",
+      "import": "./dist/components/ui/dialog.js"
+    },
+    "./drawer": {
+      "types": "./dist/components/ui/drawer.d.ts",
+      "import": "./dist/components/ui/drawer.js"
+    },
+    "./dropdown-menu": {
+      "types": "./dist/components/ui/dropdown-menu.d.ts",
+      "import": "./dist/components/ui/dropdown-menu.js"
+    },
+    "./empty-state": {
+      "types": "./dist/components/ui/empty-state.d.ts",
+      "import": "./dist/components/ui/empty-state.js"
+    },
+    "./form-field": {
+      "types": "./dist/components/ui/form-field.d.ts",
+      "import": "./dist/components/ui/form-field.js"
+    },
+    "./hover-card": {
+      "types": "./dist/components/ui/hover-card.d.ts",
+      "import": "./dist/components/ui/hover-card.js"
+    },
+    "./input": {
+      "types": "./dist/components/ui/input.d.ts",
+      "import": "./dist/components/ui/input.js"
+    },
+    "./input-group": {
+      "types": "./dist/components/ui/input-group.d.ts",
+      "import": "./dist/components/ui/input-group.js"
+    },
+    "./input-otp": {
+      "types": "./dist/components/ui/input-otp.d.ts",
+      "import": "./dist/components/ui/input-otp.js"
+    },
+    "./kbd": {
+      "types": "./dist/components/ui/kbd.d.ts",
+      "import": "./dist/components/ui/kbd.js"
+    },
+    "./label": {
+      "types": "./dist/components/ui/label.d.ts",
+      "import": "./dist/components/ui/label.js"
+    },
+    "./menubar": {
+      "types": "./dist/components/ui/menubar.d.ts",
+      "import": "./dist/components/ui/menubar.js"
+    },
+    "./navigation-menu": {
+      "types": "./dist/components/ui/navigation-menu.d.ts",
+      "import": "./dist/components/ui/navigation-menu.js"
+    },
+    "./pagination": {
+      "types": "./dist/components/ui/pagination.d.ts",
+      "import": "./dist/components/ui/pagination.js"
+    },
+    "./popover": {
+      "types": "./dist/components/ui/popover.d.ts",
+      "import": "./dist/components/ui/popover.js"
+    },
+    "./progress": {
+      "types": "./dist/components/ui/progress.d.ts",
+      "import": "./dist/components/ui/progress.js"
+    },
+    "./radio-group": {
+      "types": "./dist/components/ui/radio-group.d.ts",
+      "import": "./dist/components/ui/radio-group.js"
+    },
+    "./resizable": {
+      "types": "./dist/components/ui/resizable.d.ts",
+      "import": "./dist/components/ui/resizable.js"
+    },
+    "./scroll-area": {
+      "types": "./dist/components/ui/scroll-area.d.ts",
+      "import": "./dist/components/ui/scroll-area.js"
+    },
+    "./select": {
+      "types": "./dist/components/ui/select.d.ts",
+      "import": "./dist/components/ui/select.js"
+    },
+    "./separator": {
+      "types": "./dist/components/ui/separator.d.ts",
+      "import": "./dist/components/ui/separator.js"
+    },
+    "./sheet": {
+      "types": "./dist/components/ui/sheet.d.ts",
+      "import": "./dist/components/ui/sheet.js"
+    },
+    "./skeleton": {
+      "types": "./dist/components/ui/skeleton.d.ts",
+      "import": "./dist/components/ui/skeleton.js"
+    },
+    "./slider": {
+      "types": "./dist/components/ui/slider.d.ts",
+      "import": "./dist/components/ui/slider.js"
+    },
+    "./sonner": {
+      "types": "./dist/components/ui/sonner.d.ts",
+      "import": "./dist/components/ui/sonner.js"
+    },
+    "./spinner": {
+      "types": "./dist/components/ui/spinner.d.ts",
+      "import": "./dist/components/ui/spinner.js"
+    },
+    "./switch": {
+      "types": "./dist/components/ui/switch.d.ts",
+      "import": "./dist/components/ui/switch.js"
+    },
+    "./table": {
+      "types": "./dist/components/ui/table.d.ts",
+      "import": "./dist/components/ui/table.js"
+    },
+    "./tabs": {
+      "types": "./dist/components/ui/tabs.d.ts",
+      "import": "./dist/components/ui/tabs.js"
+    },
+    "./textarea": {
+      "types": "./dist/components/ui/textarea.d.ts",
+      "import": "./dist/components/ui/textarea.js"
+    },
+    "./toggle": {
+      "types": "./dist/components/ui/toggle.d.ts",
+      "import": "./dist/components/ui/toggle.js"
+    },
+    "./toggle-group": {
+      "types": "./dist/components/ui/toggle-group.d.ts",
+      "import": "./dist/components/ui/toggle-group.js"
+    },
+    "./tooltip": {
+      "types": "./dist/components/ui/tooltip.d.ts",
+      "import": "./dist/components/ui/tooltip.js"
+    },
+    "./typography": {
+      "types": "./dist/components/ui/typography.d.ts",
+      "import": "./dist/components/ui/typography.js"
+    }
+  },
+  "peerDependencies": {
+    "@hookform/resolvers": "^3.0.0 || ^4.0.0 || ^5.0.0",
+    "@radix-ui/react-accordion": "^1.2.0",
+    "@radix-ui/react-alert-dialog": "^1.1.0",
+    "@radix-ui/react-aspect-ratio": "^1.1.0",
+    "@radix-ui/react-avatar": "^1.1.0",
+    "@radix-ui/react-checkbox": "^1.3.0",
+    "@radix-ui/react-collapsible": "^1.1.0",
+    "@radix-ui/react-context-menu": "^2.2.0",
+    "@radix-ui/react-dialog": "^1.1.0",
+    "@radix-ui/react-dropdown-menu": "^2.1.0",
+    "@radix-ui/react-hover-card": "^1.1.0",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-menubar": "^1.1.0",
+    "@radix-ui/react-navigation-menu": "^1.2.0",
+    "@radix-ui/react-popover": "^1.1.0",
+    "@radix-ui/react-radio-group": "^1.2.0",
+    "@radix-ui/react-select": "^2.1.0",
+    "@radix-ui/react-slider": "^1.2.0",
+    "@radix-ui/react-switch": "^1.1.0",
+    "@radix-ui/react-toggle": "^1.1.0",
+    "@radix-ui/react-toggle-group": "^1.1.0",
+    "@tanstack/react-query": "^5.0.0",
+    "@tanstack/react-table": "^8.0.0",
+    "cmdk": "^1.0.0",
+    "date-fns": "^4.0.0",
+    "embla-carousel-react": "^8.0.0",
+    "input-otp": "^1.4.0",
+    "lucide-react": "^1.0.0",
+    "react": "^19.0.0",
+    "react-day-picker": "^9.0.0",
+    "react-dom": "^19.0.0",
+    "react-dropzone": "^14.0.0 || ^15.0.0",
+    "react-hook-form": "^7.0.0",
+    "react-resizable-panels": "^2.0.0",
+    "recharts": "^2.12.0 || ^3.0.0",
+    "sonner": "^1.0.0 || ^2.0.0",
+    "vaul": "^1.0.0",
+    "zod": "^3.0.0 || ^4.0.0"
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.5.0",
+    "@marktiderman/genesis-core": "^1.0.0"
+  },
+  "devDependencies": {
+    "@hookform/resolvers": "^5.2.2",
+    "@radix-ui/react-accordion": "^1.2.0",
+    "@radix-ui/react-aspect-ratio": "^1.1.0",
+    "@radix-ui/react-avatar": "^1.1.0",
+    "@radix-ui/react-context-menu": "^2.2.0",
+    "@radix-ui/react-hover-card": "^1.1.0",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-menubar": "^1.1.0",
+    "@radix-ui/react-navigation-menu": "^1.2.0",
+    "@radix-ui/react-radio-group": "^1.2.0",
+    "@radix-ui/react-slider": "^1.2.0",
+    "@radix-ui/react-switch": "^1.1.0",
+    "@radix-ui/react-toggle": "^1.1.0",
+    "@radix-ui/react-toggle-group": "^1.1.0",
+    "@tanstack/react-query": "^5.75.0",
+    "@tanstack/react-table": "^8.21.3",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "date-fns": "^4.1.0",
+    "embla-carousel-react": "^8.0.0",
+    "input-otp": "^1.4.0",
+    "lucide-react": "^1.0.0",
+    "react": "^19.0.0",
+    "react-day-picker": "^9.14.0",
+    "react-dom": "^19.0.0",
+    "react-dropzone": "^15.0.0",
+    "react-hook-form": "^7.72.1",
+    "react-resizable-panels": "^2.0.0",
+    "recharts": "^2.15.0",
+    "sonner": "^1.0.0",
+    "tsup": "^8.3.0",
+    "typescript": "^5.9.3",
+    "vaul": "^1.0.0",
+    "zod": "^4.3.6"
+  },
+  "scripts": {
+    "build": "tsup && node scripts/stamp-use-client.mjs",
+    "clean": "rm -rf dist"
+  }
+}