@dungle-scrubs/admin-ui-soft 0.0.0-stage → 0.1.0

package/dist/compositions/app-shell/theme-toggle.js

@@ -0,0 +1,65 @@
+import { useTheme } from "../../components/theme-provider.js";
+import { Button } from "../../components/ui/button.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger } from "../../components/ui/dropdown-menu.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "cn";
+import { MonitorIcon, MoonIcon, SunIcon } from "lucide-react";
+//#region src/compositions/app-shell/theme-toggle.tsx
+const THEME_CHOICES = [
+	{
+		value: "light",
+		label: "Light",
+		icon: /* @__PURE__ */ jsx(SunIcon, {})
+	},
+	{
+		value: "dark",
+		label: "Dark",
+		icon: /* @__PURE__ */ jsx(MoonIcon, {})
+	},
+	{
+		value: "system",
+		label: "System",
+		icon: /* @__PURE__ */ jsx(MonitorIcon, {})
+	}
+];
+function isThemeChoice(value) {
+	return THEME_CHOICES.some((choice) => choice.value === value);
+}
+/**
+* Light, dark and system theme menu. Reads and sets the preference through
+* the package ThemeProvider, so it must render inside one.
+*/
+function ThemeToggle({ className }) {
+	const { theme, setTheme } = useTheme();
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
+		render: /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: "icon",
+			className: cn("relative", className)
+		}),
+		children: [
+			/* @__PURE__ */ jsx(SunIcon, { className: "scale-100 rotate-0 transition-transform dark:scale-0 dark:-rotate-90" }),
+			/* @__PURE__ */ jsx(MoonIcon, { className: "absolute scale-0 rotate-90 transition-transform dark:scale-100 dark:rotate-0" }),
+			/* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: "Toggle theme"
+			})
+		]
+	}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+		align: "end",
+		className: "w-36",
+		children: /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [/* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Theme" }), /* @__PURE__ */ jsx(DropdownMenuRadioGroup, {
+			value: theme,
+			onValueChange: (value) => {
+				if (isThemeChoice(value)) setTheme(value);
+			},
+			children: THEME_CHOICES.map((choice) => /* @__PURE__ */ jsxs(DropdownMenuRadioItem, {
+				value: choice.value,
+				closeOnClick: true,
+				children: [choice.icon, choice.label]
+			}, choice.value))
+		})] })
+	})] });
+}
+//#endregion
+export { ThemeToggle };

package/dist/compositions/confirm-action/confirm-action.d.ts

@@ -0,0 +1,48 @@
+import { AlertDialogContent } from "../../components/ui/alert-dialog.js";
+import * as React from "react";
+//#region src/compositions/confirm-action/confirm-action.d.ts
+export type ConfirmActionTone = "default" | "destructive";
+export interface ConfirmActionProps {
+  /** Whether the dialog is open. ConfirmAction never closes itself: the app owns this state. */
+  open: boolean;
+  /**
+   * Called when the dialog asks to open (trigger pressed) or close (Cancel,
+   * Escape). Close requests are dropped while `isPending`.
+   */
+  onOpenChange: (open: boolean) => void;
+  /** The question, for example "Purge 12 sign-in emails?". */
+  title: string;
+  /** Plain text naming what happens if the owner confirms. */
+  consequence: string;
+  /** Label of the confirm button, for example "Purge now". */
+  confirmLabel: string;
+  /** Label of the cancel button. */
+  cancelLabel?: string;
+  /**
+   * Runs the confirmed action (CONFIRMING to PENDING). The dialog stays open:
+   * close it from the app once the mutation settles, or keep it open to show
+   * `error`.
+   */
+  onConfirm: () => void;
+  /** While true, both buttons are disabled and the dialog cannot be dismissed. */
+  isPending?: boolean;
+  /** Plain-text error from the last attempt, shown in the dialog (FAILED). */
+  error?: string;
+  /** `destructive` styles the confirm button as a destructive action. */
+  tone?: ConfirmActionTone;
+  /** Optional element that opens the dialog, rendered through the alert-dialog trigger. */
+  trigger?: React.ReactElement;
+  /**
+   * Where focus goes once the dialog closes. Defaults to the trigger or the
+   * element focused before the dialog opened.
+   */
+  finalFocus?: React.ComponentProps<typeof AlertDialogContent>["finalFocus"];
+}
+/**
+ * A confirmation step for an action whose consequence the owner must see
+ * first: approve-all, purge-now, send, revoke. It realizes the CONFIRMING
+ * state of the mutation lifecycle; the app drives PENDING and FAILED through
+ * `isPending` and `error`.
+ */
+export declare function ConfirmAction({ open, onOpenChange, title, consequence, confirmLabel, cancelLabel, onConfirm, isPending, error, tone, trigger, finalFocus }: ConfirmActionProps): React.JSX.Element;
+//#endregion

package/dist/compositions/confirm-action/confirm-action.js

@@ -0,0 +1,48 @@
+import { Spinner } from "../../components/ui/spinner.js";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "../../components/ui/alert-dialog.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/compositions/confirm-action/confirm-action.tsx
+/**
+* A confirmation step for an action whose consequence the owner must see
+* first: approve-all, purge-now, send, revoke. It realizes the CONFIRMING
+* state of the mutation lifecycle; the app drives PENDING and FAILED through
+* `isPending` and `error`.
+*/
+function ConfirmAction({ open, onOpenChange, title, consequence, confirmLabel, cancelLabel = "Cancel", onConfirm, isPending = false, error, tone = "default", trigger, finalFocus }) {
+	const handleOpenChange = (nextOpen) => {
+		if (!nextOpen && isPending) return;
+		onOpenChange(nextOpen);
+	};
+	return /* @__PURE__ */ jsxs(AlertDialog, {
+		open,
+		onOpenChange: handleOpenChange,
+		children: [trigger ? /* @__PURE__ */ jsx(AlertDialogTrigger, { render: trigger }) : null, /* @__PURE__ */ jsxs(AlertDialogContent, {
+			"data-slot": "confirm-action",
+			"aria-busy": isPending || void 0,
+			finalFocus,
+			children: [
+				/* @__PURE__ */ jsxs(AlertDialogHeader, { children: [/* @__PURE__ */ jsx(AlertDialogTitle, { children: title }), /* @__PURE__ */ jsx(AlertDialogDescription, { children: consequence })] }),
+				error ? /* @__PURE__ */ jsx("p", {
+					role: "alert",
+					"data-slot": "confirm-action-error",
+					className: "rounded-md bg-destructive/10 px-2 py-1.5 text-center text-xs/relaxed text-destructive sm:text-left dark:bg-destructive/20",
+					children: error
+				}) : null,
+				/* @__PURE__ */ jsxs(AlertDialogFooter, { children: [/* @__PURE__ */ jsx(AlertDialogCancel, {
+					disabled: isPending,
+					children: cancelLabel
+				}), /* @__PURE__ */ jsxs(AlertDialogAction, {
+					variant: tone === "destructive" ? "destructive" : "default",
+					disabled: isPending,
+					onClick: onConfirm,
+					children: [isPending ? /* @__PURE__ */ jsx(Spinner, {
+						"data-icon": "inline-start",
+						"aria-hidden": "true"
+					}) : null, confirmLabel]
+				})] })
+			]
+		})]
+	});
+}
+//#endregion
+export { ConfirmAction };

package/dist/compositions/data-table/data-table-state.d.ts

@@ -0,0 +1,23 @@
+import { ColumnFiltersState, PaginationState, SortingState, Updater } from "@tanstack/react-table";
+//#region src/compositions/data-table/data-table-state.d.ts
+/**
+ * Everything a DataTable hands to the app in server mode: the sort, the
+ * column filters, the global search text, and the page. In client mode the
+ * same shape drives the table's own row models.
+ */
+export type DataTableState = {
+  sorting: SortingState;
+  columnFilters: ColumnFiltersState;
+  globalFilter: string;
+  pagination: PaginationState;
+};
+export declare const DATA_TABLE_DEFAULT_PAGE_SIZE = 25;
+/** The starting state: unsorted, unfiltered, first page of 25 rows. */
+export declare function createDataTableState(overrides?: Partial<DataTableState>): DataTableState;
+/**
+ * Applies one slice update. A change to the sort, a filter, the search text or
+ * the page size returns to the first page, so the app never asks the server
+ * for a page that the new query may not have.
+ */
+export declare function updateDataTableState<TKey extends keyof DataTableState>(state: DataTableState, key: TKey, updater: Updater<DataTableState[TKey]>): DataTableState;
+//#endregion

package/dist/compositions/data-table/data-table-state.js

@@ -0,0 +1,46 @@
+import { functionalUpdate } from "@tanstack/react-table";
+//#region src/compositions/data-table/data-table-state.ts
+const DATA_TABLE_DEFAULT_PAGE_SIZE = 25;
+/** The starting state: unsorted, unfiltered, first page of 25 rows. */
+function createDataTableState(overrides = {}) {
+	return {
+		sorting: [],
+		columnFilters: [],
+		globalFilter: "",
+		pagination: {
+			pageIndex: 0,
+			pageSize: 25
+		},
+		...overrides
+	};
+}
+/**
+* Applies one slice update. A change to the sort, a filter, the search text or
+* the page size returns to the first page, so the app never asks the server
+* for a page that the new query may not have.
+*/
+function updateDataTableState(state, key, updater) {
+	const value = functionalUpdate(updater, state[key]);
+	if (Object.is(value, state[key])) return state;
+	if (key === "pagination") {
+		const next = value;
+		const pageSizeChanged = next.pageSize !== state.pagination.pageSize;
+		return {
+			...state,
+			pagination: pageSizeChanged ? {
+				pageIndex: 0,
+				pageSize: next.pageSize
+			} : next
+		};
+	}
+	return {
+		...state,
+		[key]: value,
+		pagination: {
+			...state.pagination,
+			pageIndex: 0
+		}
+	};
+}
+//#endregion
+export { DATA_TABLE_DEFAULT_PAGE_SIZE, createDataTableState, updateDataTableState };

package/dist/compositions/data-table/data-table.d.ts

@@ -0,0 +1,185 @@
+import { DataTableState, createDataTableState } from "./data-table-state.js";
+import * as React from "react";
+import { ColumnDef, RowData } from "@tanstack/react-table";
+//#region src/compositions/data-table/data-table.d.ts
+/** One choice in a column's filter menu. */
+export type DataTableFilterOption = {
+  label: string;
+  value: string;
+};
+/**
+ * Per-column presentation, set through a column definition's `meta`.
+ *
+ * - `label`: the column's name where a string is needed (filter menus,
+ *   accessible names). Defaults to a string `header`, then the column id.
+ * - `align`: `"end"` right-aligns numbers and dates.
+ * - `width`: a CSS width for the column. The table uses a fixed layout so
+ *   columns do not shift while virtualized rows scroll in and out; columns
+ *   without a width share the remaining space, at least 10rem each; when
+ *   the scroll area is narrower, it scrolls sideways.
+ * - `filter`: adds a single-choice filter menu for this column to the
+ *   toolbar. A filtered value matches the cell value as a whole
+ *   (case-insensitive), unless the column sets its own `filterFn`.
+ * - `hideBelow`: hides the column while the table itself is narrower than
+ *   this breakpoint (`sm` 640px, `md` 768px, `lg` 1024px), so a phone shows
+ *   the columns that matter. Its filter, search and sorting still apply.
+ */
+export type DataTableColumnMeta = {
+  label?: string;
+  align?: "start" | "end";
+  width?: string;
+  filter?: {
+    options: readonly DataTableFilterOption[];
+  };
+  hideBelow?: DataTableBreakpoint;
+};
+/** A table width, named as Tailwind's breakpoints. */
+export type DataTableBreakpoint = "sm" | "md" | "lg";
+/**
+ * The TanStack Table v9 features every DataTable registers: column filters,
+ * global search, sorting, pagination and row selection, with the client row
+ * models for each. Build column definitions against this feature set, for
+ * example with `createDataTableColumnHelper`.
+ */
+export declare const dataTableFeatures: {
+  columnFilteringFeature: import("@tanstack/react-table").TableFeature;
+  globalFilteringFeature: import("@tanstack/react-table").TableFeature;
+  rowSortingFeature: import("@tanstack/react-table").TableFeature;
+  rowPaginationFeature: import("@tanstack/react-table").TableFeature;
+  rowSelectionFeature: import("@tanstack/react-table").TableFeature;
+  filteredRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+  sortedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+  paginatedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+  filterFns: {
+    includesString: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+    equalsString: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+  };
+  sortFns: {
+    alphanumeric: import("@tanstack/react-table").CreatedSortFn<any, any>;
+    basic: import("@tanstack/react-table").CreatedSortFn<any, any>;
+    datetime: import("@tanstack/react-table").CreatedSortFn<any, any>;
+    text: import("@tanstack/react-table").CreatedSortFn<any, any>;
+  };
+  columnMeta: DataTableColumnMeta;
+};
+export type DataTableFeatures = typeof dataTableFeatures;
+/**
+ * A DataTable column definition. Accessor value types vary per column, so the
+ * value parameter is `any`, as in TanStack's own `columnHelper.columns()`.
+ */
+export type DataTableColumnDef<TData extends RowData> = ColumnDef<DataTableFeatures, TData, any>;
+/** A typed TanStack column helper bound to the DataTable feature set. */
+export declare function createDataTableColumnHelper<TData extends RowData>(): import("@tanstack/react-table").ColumnHelper<{
+  columnFilteringFeature: import("@tanstack/react-table").TableFeature;
+  globalFilteringFeature: import("@tanstack/react-table").TableFeature;
+  rowSortingFeature: import("@tanstack/react-table").TableFeature;
+  rowPaginationFeature: import("@tanstack/react-table").TableFeature;
+  rowSelectionFeature: import("@tanstack/react-table").TableFeature;
+  filteredRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+  sortedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+  paginatedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+  filterFns: {
+    includesString: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+    equalsString: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+  };
+  sortFns: {
+    alphanumeric: import("@tanstack/react-table").CreatedSortFn<any, any>;
+    basic: import("@tanstack/react-table").CreatedSortFn<any, any>;
+    datetime: import("@tanstack/react-table").CreatedSortFn<any, any>;
+    text: import("@tanstack/react-table").CreatedSortFn<any, any>;
+  };
+  columnMeta: DataTableColumnMeta;
+}, TData>;
+/** One entry in a row's action menu. */
+export type DataTableRowAction = {
+  label: string;
+  onSelect: () => void;
+  /** Styles the entry as destructive. Confirm the action in `onSelect`. */
+  destructive?: boolean;
+  disabled?: boolean;
+};
+type DataTableBaseProps<TData extends RowData> = {
+  /** The table's accessible name, also used for the search field. */
+  label: string;
+  /** Column definitions. Keep the array reference stable between renders. */
+  columns: readonly DataTableColumnDef<TData>[];
+  /**
+   * The rows to show. In client mode, every row; in server mode, the current
+   * page as the server returned it. Keep the reference stable between renders.
+   */
+  rows: readonly TData[];
+  /** A stable, unique id per row. Selection is keyed by it. */
+  getRowId: (row: TData) => string;
+  /** A short name for a row in accessible labels. Defaults to the row id. */
+  getRowLabel?: (row: TData) => string;
+  /** Selected row ids (controlled). Omit to let the table hold selection. */
+  selection?: readonly string[];
+  /** Turns on row selection; called with every selected row id. */
+  onSelectionChange?: (ids: string[]) => void;
+  /** Builds the action menu for a row. Omit for no action column. */
+  rowActions?: (row: TData) => readonly DataTableRowAction[];
+  /**
+   * The data is being fetched. With no rows this shows skeleton rows; with
+   * rows it keeps them on screen, shows a spinner by the row count, and marks
+   * the table busy.
+   */
+  isLoading?: boolean;
+  /**
+   * A load error message. With no rows it replaces the body; with rows it
+   * shows above the table and the last good rows stay on screen.
+   */
+  error?: string | null;
+  /** Shows a retry button with the error. */
+  onRetry?: () => void;
+  /** The empty state's title when there are no rows at all. */
+  emptyLabel?: string;
+  /** The empty state's description when there are no rows at all. */
+  emptyDescription?: string;
+  /** Shows the global search field. Defaults to true. */
+  searchable?: boolean;
+  searchPlaceholder?: string;
+  /** Page sizes offered in the footer. */
+  pageSizeOptions?: readonly number[];
+  /** The scroll area's maximum height (any CSS length). Rows virtualize inside it. */
+  maxHeight?: string;
+  className?: string;
+};
+/** Client mode: the table sorts, filters, searches and pages `rows` itself. */
+export type DataTableClientProps<TData extends RowData> = DataTableBaseProps<TData> & {
+  mode?: "client";
+  /** Controlled state. Omit to let the table hold its own state. */
+  state?: DataTableState;
+  /** The starting state when `state` is not controlled. */
+  defaultState?: Partial<DataTableState>;
+  onStateChange?: (state: DataTableState) => void;
+  /**
+   * Splits rows into pages. Defaults to true. With false, every matching row
+   * renders in one virtualized scroll area and the page controls are hidden.
+   */
+  paginate?: boolean;
+  total?: never;
+};
+/**
+ * Server mode: the app owns the query. The table hands every sort, filter,
+ * search and page change to `onStateChange`, shows `rows` as the current page
+ * in the order given, and pages against `total`.
+ */
+export type DataTableServerProps<TData extends RowData> = DataTableBaseProps<TData> & {
+  mode: "server";
+  state: DataTableState;
+  onStateChange: (state: DataTableState) => void;
+  /** The number of rows matching the current query on the server. */
+  total: number;
+  defaultState?: never;
+  paginate?: never;
+};
+export type DataTableProps<TData extends RowData> = DataTableClientProps<TData> | DataTableServerProps<TData>;
+/**
+ * A table for large, interactive lists: sorting, column filters, global
+ * search, paging, row selection and row actions, in client or server mode,
+ * with virtualized rows. Built on the shadcn table, TanStack Table v9 and
+ * TanStack Virtual.
+ */
+export declare function DataTable<TData extends RowData>(props: DataTableProps<TData>): React.JSX.Element;
+//#endregion
+export { type DataTableState, createDataTableState };