@danxbot/ui 6.0.3 → 6.0.5

package/dist/types/components/PaginationBar.d.ts

@@ -0,0 +1,31 @@
+export type PaginationBarMode = "numbered" | "simple";
+export interface PaginationBarProps {
+    /** 1-based current page. */
+    page: number;
+    /** Rows per page. Should be one of `pageSizeOptions`. */
+    pageSize: number;
+    /** The sizes offered in the per-page popover, in the order shown. */
+    pageSizeOptions: readonly number[];
+    /** Total matching items across every page — drives the range text and page count. */
+    total: number;
+    onPageChange: (page: number) => void;
+    onPageSizeChange: (size: number) => void;
+    /**
+     * `"simple"`: ‹ Page N of M › — fixed width regardless of how many pages
+     * exist, and the shape guaranteed to fit a narrow bar unaided.
+     * `"numbered"`: the numbered-window `Pagination` control, for a list long
+     * enough that jumping past adjacent pages is worth the room it costs.
+     * @default "simple"
+     */
+    mode?: PaginationBarMode;
+    /** Names the bar for assistive tech, e.g. "Cards" or "Dispatches". */
+    label: string;
+    className?: string;
+}
+/**
+ * Range text + a popover-based per-page picker + page navigation, always on
+ * one row. See the file banner above for the reasoning behind the popover
+ * and the `mode` split — this replaces both of gpt-manager's pre-existing,
+ * differently-shaped hand-rolled footers.
+ */
+export declare function PaginationBar({ page, pageSize, pageSizeOptions, total, onPageChange, onPageSizeChange, mode, label, className, }: PaginationBarProps): import("react").JSX.Element;

package/dist/types/components/Progress.d.ts

@@ -28,6 +28,18 @@ declare const bar: import("tailwind-variants").TVReturnType<{
         danger: {
             indicator: string;
         };
+        /**
+         * Neutral/gray — for a segment or bar that is neither good nor bad, just
+         * not-yet-decided (a "pending" quality gate, a step nobody has started).
+         * `--color-tertiary` is already the closest token to the old Vue app's
+         * pending-gate gray (`#64748b`): in the light theme it resolves to
+         * `--slate-500`, which IS `#64748b` (see tokens.css / contrast.css) —
+         * so this reuses an existing semantic slot instead of minting a new
+         * `--color-neutral` custom property for one tone.
+         */
+        neutral: {
+            indicator: string;
+        };
     };
 }, {
     root: string;
@@ -64,6 +76,18 @@ declare const bar: import("tailwind-variants").TVReturnType<{
         danger: {
             indicator: string;
         };
+        /**
+         * Neutral/gray — for a segment or bar that is neither good nor bad, just
+         * not-yet-decided (a "pending" quality gate, a step nobody has started).
+         * `--color-tertiary` is already the closest token to the old Vue app's
+         * pending-gate gray (`#64748b`): in the light theme it resolves to
+         * `--slate-500`, which IS `#64748b` (see tokens.css / contrast.css) —
+         * so this reuses an existing semantic slot instead of minting a new
+         * `--color-neutral` custom property for one tone.
+         */
+        neutral: {
+            indicator: string;
+        };
     };
 }, {
     root: string;
@@ -100,6 +124,18 @@ declare const bar: import("tailwind-variants").TVReturnType<{
         danger: {
             indicator: string;
         };
+        /**
+         * Neutral/gray — for a segment or bar that is neither good nor bad, just
+         * not-yet-decided (a "pending" quality gate, a step nobody has started).
+         * `--color-tertiary` is already the closest token to the old Vue app's
+         * pending-gate gray (`#64748b`): in the light theme it resolves to
+         * `--slate-500`, which IS `#64748b` (see tokens.css / contrast.css) —
+         * so this reuses an existing semantic slot instead of minting a new
+         * `--color-neutral` custom property for one tone.
+         */
+        neutral: {
+            indicator: string;
+        };
     };
 }, {
     root: string;
@@ -134,6 +170,15 @@ export interface MeterProps extends VariantProps<typeof bar> {
 export declare function Meter({ value, min, max, label, format, showValue, size, tone, className, ref, }: MeterProps): import("react").JSX.Element;
 declare const ring: import("tailwind-variants").TVReturnType<{
     size: {
+        /**
+         * Icon-sized — a single arc beside a chevron or a percentage in a card
+         * row (24px), where even `sm` (40px) is taller than the row itself.
+         * Matches the private `ContextDial` this size replaces in
+         * `chat/ContextMeter.tsx` (`size-3.5`) pixel-for-pixel. Always pair with
+         * `showValue={false}`: two digits do not fit a 14px circle, and nothing
+         * clips or shrinks them automatically if you leave the number on.
+         */
+        xs: "size-3.5";
         sm: "size-10";
         md: "size-16";
         lg: "size-24";
@@ -148,6 +193,15 @@ declare const ring: import("tailwind-variants").TVReturnType<{
     };
 }, undefined, "relative grid shrink-0 place-items-center", {
     size: {
+        /**
+         * Icon-sized — a single arc beside a chevron or a percentage in a card
+         * row (24px), where even `sm` (40px) is taller than the row itself.
+         * Matches the private `ContextDial` this size replaces in
+         * `chat/ContextMeter.tsx` (`size-3.5`) pixel-for-pixel. Always pair with
+         * `showValue={false}`: two digits do not fit a 14px circle, and nothing
+         * clips or shrinks them automatically if you leave the number on.
+         */
+        xs: "size-3.5";
         sm: "size-10";
         md: "size-16";
         lg: "size-24";
@@ -162,6 +216,15 @@ declare const ring: import("tailwind-variants").TVReturnType<{
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     size: {
+        /**
+         * Icon-sized — a single arc beside a chevron or a percentage in a card
+         * row (24px), where even `sm` (40px) is taller than the row itself.
+         * Matches the private `ContextDial` this size replaces in
+         * `chat/ContextMeter.tsx` (`size-3.5`) pixel-for-pixel. Always pair with
+         * `showValue={false}`: two digits do not fit a 14px circle, and nothing
+         * clips or shrinks them automatically if you leave the number on.
+         */
+        xs: "size-3.5";
         sm: "size-10";
         md: "size-16";
         lg: "size-24";

package/dist/types/components/Table.d.ts

@@ -39,6 +39,22 @@ export interface DataTableProps<TData> {
      * never connected to anything. This is that connection.
      */
     pageSize?: number;
+    /**
+     * The sizes offered by the footer's per-page picker. Defaults to
+     * `[10, 25, 50, 100]` (with `pageSize` folded in if it names a value not
+     * already on that list), so a caller that only ever set `pageSize` still
+     * gets a real picker rather than none at all — DX-2947 added this menu to
+     * every paginated table, not as an opt-in.
+     */
+    pageSizeOptions?: readonly number[];
+    /**
+     * Told when the footer's per-page picker changes the size, in addition to
+     * the table re-paginating itself immediately. Pagination stays entirely
+     * internal either way — this is for a caller that wants to remember the
+     * choice (e.g. persist it), not something that has to be wired for paging
+     * to work.
+     */
+    onPageSizeChange?: (size: number) => void;
     emptyState?: ReactNode;
     /**
      * An extra class for the rows a consumer needs to mark — "this figure could
@@ -79,7 +95,7 @@ export interface DataTableProps<TData> {
     className?: string;
     getRowId?: (row: TData, index: number) => string;
 }
-export declare function DataTable<TData>({ data, columns, density, selectable, maxHeight, zebra, loading, refreshing, loadingRows, pageSize, emptyState, getRowClassName, onRowClick, toolbar, className, getRowId, }: DataTableProps<TData>): import("react").JSX.Element;
+export declare function DataTable<TData>({ data, columns, density, selectable, maxHeight, zebra, loading, refreshing, loadingRows, pageSize, pageSizeOptions, onPageSizeChange, emptyState, getRowClassName, onRowClick, toolbar, className, getRowId, }: DataTableProps<TData>): import("react").JSX.Element;
 export declare function TableEmptyState({ icon, title, description, action, }: {
     icon?: ReactNode;
     title?: string;

package/dist/types/index.d.ts

@@ -47,6 +47,7 @@ export { RecordCard, RecordCardHandle, RecordCardEyebrow, RecordCardTitle, Recor
 export { Tabs, TabList, Tab, TabPanel, type TabsProps, type TabListProps, type TabProps, type TabPanelProps, } from "./components/Tabs";
 export { Accordion, AccordionItem, type AccordionProps, type AccordionItemProps, } from "./components/Accordion";
 export { Breadcrumb, Pagination, type BreadcrumbProps, type PaginationProps, type Crumb, } from "./components/Navigation";
+export { PaginationBar, type PaginationBarProps, type PaginationBarMode, } from "./components/PaginationBar";
 export { Stepper, stepStatus, stepperProgress, advanceBlockReason, assertSteps, type StepperProps, type Step, type StepStatus, type StepperProgress, } from "./components/stepper";
 export { StatusChecklist, tallyChecklist, type StatusChecklistProps, type ChecklistItem, type ChecklistState, type ChecklistTally, } from "./components/checklist";
 export { Toggle, ToggleGroup, Toolbar, ToolbarButton, ToolbarGroup, ToolbarInput, ToolbarSeparator, type ToggleProps, type ToggleGroupProps, type ToolbarProps, type ToolbarButtonProps, type ToolbarGroupProps, type ToolbarInputProps, } from "./components/Toggle";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danxbot/ui",
-  "version": "6.0.3",
+  "version": "6.0.5",
   "type": "module",
   "description": "Danxbot — a domain-agnostic React design system with motion as a first-class primitive.",
   "license": "MIT",