@bookers/ui 0.1.0 → 0.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Bookers International
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -38,6 +38,27 @@ npm run test:ui    # Vitest UI + coverage
 npm run build      # tsc + Vite library build
 ```
 
+### MCP server
+
+While `npm run dev` is running, the local MCP server is available at `http://localhost:6006/mcp`. Add it to your project's `.mcp.json` to give Claude Code context about unreleased components:
+
+```json
+{
+  "mcpServers": {
+    "bookers-ui": {
+      "type": "http",
+      "url": "http://localhost:6006/mcp"
+    }
+  }
+}
+```
+
+For released components, the remote server at `https://bookers-ui.vercel.app/mcp` is always available without any local setup.
+
+## Changelog
+
+See [`CHANGELOG.md`](./CHANGELOG.md) for breaking changes and notable updates (including **`DataTable`** API migration).
+
 ## Stack
 
 - React 18/19 (peer dep)

package/dist/index.d.ts

@@ -2,24 +2,40 @@ import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
 import { ClassProp } from 'class-variance-authority/types';
 import { ClassValue } from 'clsx';
+import { Column } from '@tanstack/react-table';
+import { ColumnDef } from '@tanstack/react-table';
+import { ColumnFiltersState } from '@tanstack/react-table';
+import { ColumnOrderState } from '@tanstack/react-table';
+import { ColumnPinningState } from '@tanstack/react-table';
+import { ColumnSizingState } from '@tanstack/react-table';
 import { CommandGroup } from 'cmdk';
 import { CommandItem } from 'cmdk';
 import { CommandSeparator } from 'cmdk';
 import { DayPickerProps } from 'react-day-picker';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { ExpandedState } from '@tanstack/react-table';
+import { FilterFn } from '@tanstack/react-table';
+import { GroupingState } from '@tanstack/react-table';
 import { JSX } from 'react/jsx-runtime';
+import { OnChangeFn } from '@tanstack/react-table';
+import { PaginationState } from '@tanstack/react-table';
 import { PopoverContentProps } from '@radix-ui/react-popover';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { PopoverProps as PopoverProps_2 } from '@radix-ui/react-popover';
 import * as React_2 from 'react';
+import { Row } from '@tanstack/react-table';
+import { RowData } from '@tanstack/react-table';
+import { RowSelectionState } from '@tanstack/react-table';
 import * as SelectPrimitive from '@radix-ui/react-select';
+import { SortingState } from '@tanstack/react-table';
 import { Table as Table_2 } from '@tanstack/react-table';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import { toast } from 'sonner';
 import { ToasterProps } from 'sonner';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { VariantProps } from 'class-variance-authority';
+import { VisibilityState } from '@tanstack/react-table';
 
 export declare const Accordion: React_2.ForwardRefExoticComponent<AccordionProps & React_2.RefAttributes<HTMLDivElement>>;
 
@@ -32,7 +48,7 @@ export declare const accordionContentVariants: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
 } & ClassProp) | undefined) => string;
 
-export declare const AccordionItem: React_2.ForwardRefExoticComponent<AccordionItemProps & React_2.RefAttributes<HTMLDivElement>>;
+export declare const AccordionItem: React_2.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
 
 export declare interface AccordionItemDef {
     value: string;
@@ -41,8 +57,7 @@ export declare interface AccordionItemDef {
     disabled?: boolean;
 }
 
-export declare interface AccordionItemProps extends React_2.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item> {
-}
+export declare type AccordionItemProps = React_2.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>;
 
 export declare interface AccordionProps {
     items: AccordionItemDef[];
@@ -115,6 +130,8 @@ export declare const badgeVariants: (props?: ({
     variant?: "default" | "success" | "warning" | "destructive" | "secondary" | "outline" | null | undefined;
 } & ClassProp) | undefined) => string;
 
+export declare const bookersStringFilter: FilterFn<RowData>;
+
 export declare const Button: React_2.ForwardRefExoticComponent<ButtonProps & React_2.RefAttributes<HTMLButtonElement>>;
 
 export declare interface ButtonProps extends React_2.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
@@ -152,6 +169,16 @@ export declare const checkboxVariants: (props?: ({
  */
 export declare function cn(...inputs: ClassValue[]): string;
 
+export { ColumnDef }
+
+export { ColumnFiltersState }
+
+export { ColumnOrderState }
+
+export { ColumnPinningState }
+
+export { ColumnSizingState }
+
 export declare const ComboBox: React_2.ForwardRefExoticComponent<ComboBoxProps & React_2.RefAttributes<HTMLButtonElement>>;
 
 export declare const ComboBoxContent: React_2.ForwardRefExoticComponent<ComboBoxContentProps & React_2.RefAttributes<HTMLDivElement>>;
@@ -206,10 +233,15 @@ export declare interface ComboBoxProps {
 
 export declare const ComboBoxRoot: React_2.FC<PopoverProps_2>;
 
-export declare const ComboBoxSeparator: React_2.ForwardRefExoticComponent<ComboBoxSeparatorProps & React_2.RefAttributes<HTMLDivElement>>;
+export declare const ComboBoxSeparator: React_2.ForwardRefExoticComponent<Omit<Pick<Pick<React_2.DetailedHTMLProps<React_2.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React_2.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React_2.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof React_2.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+    alwaysRender?: boolean;
+} & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
 
-export declare interface ComboBoxSeparatorProps extends React_2.ComponentPropsWithoutRef<typeof CommandSeparator> {
-}
+export declare type ComboBoxSeparatorProps = React_2.ComponentPropsWithoutRef<typeof CommandSeparator>;
 
 export declare const ComboBoxTrigger: React_2.ForwardRefExoticComponent<ComboBoxTriggerProps & React_2.RefAttributes<HTMLButtonElement>>;
 
@@ -223,15 +255,150 @@ export declare const ComboBoxTriggerVariants: (props?: ({
     isError?: boolean | null | undefined;
 } & ClassProp) | undefined) => string;
 
+/** Stable id for the optional built-in expand column (`showExpandColumn`). */
+export declare const DATA_TABLE_EXPAND_COLUMN_ID: "bookers-expand";
+
 export declare const DataTable: <TData>(props: DataTableProps<TData> & {
     ref?: React_2.ForwardedRef<HTMLDivElement>;
 }) => React_2.ReactElement;
 
-export declare interface DataTableProps<TData> extends React_2.HTMLAttributes<HTMLDivElement> {
-    table: Table_2<TData>;
+export declare const DataTableColumnHeader: <TData extends RowData, TValue = unknown>(props: DataTableColumnHeaderProps<TData, TValue> & {
+    ref?: React_2.ForwardedRef<HTMLDivElement>;
+}) => React_2.ReactElement;
+
+/** Pass on `ColumnDef.meta` when using `DataTableColumnHeader` so `DataTable` does not add a second sort affordance (chevrons). */
+export declare const dataTableColumnHeaderMeta: {
+    readonly bookersColumnHeaderActions: true;
+};
+
+export declare interface DataTableColumnHeaderProps<TData extends RowData, TValue = unknown> extends Omit<React_2.HTMLAttributes<HTMLDivElement>, "title"> {
+    column: Column<TData, TValue>;
+    title?: React_2.ReactNode;
+    children?: React_2.ReactNode;
+}
+
+export declare interface DataTableProps<TData extends RowData> extends Omit<React_2.HTMLAttributes<HTMLDivElement>, "children"> {
+    data: TData[];
+    columns: ColumnDef<TData>[];
+    getRowId?: (row: TData, index: number) => string;
+    enableSorting?: boolean;
+    defaultSorting?: SortingState;
+    sorting?: SortingState;
+    onSortingChange?: OnChangeFn<SortingState>;
+    enableRowSelection?: boolean;
+    defaultRowSelection?: RowSelectionState;
+    rowSelection?: RowSelectionState;
+    onRowSelectionChange?: OnChangeFn<RowSelectionState>;
+    enableColumnResizing?: boolean;
+    columnResizeMode?: "onChange" | "onEnd";
+    defaultColumnSizing?: ColumnSizingState;
+    columnSizing?: ColumnSizingState;
+    onColumnSizingChange?: OnChangeFn<ColumnSizingState>;
+    enableColumnReorder?: boolean;
+    defaultColumnOrder?: ColumnOrderState;
+    columnOrder?: ColumnOrderState;
+    onColumnOrderChange?: OnChangeFn<ColumnOrderState>;
+    enableColumnPinning?: boolean;
+    defaultColumnPinning?: ColumnPinningState;
+    columnPinning?: ColumnPinningState;
+    onColumnPinningChange?: OnChangeFn<ColumnPinningState>;
+    enableGlobalFilter?: boolean;
+    /** When true (default), renders the search field above the table when `enableGlobalFilter` is on. */
+    showGlobalFilter?: boolean;
+    globalFilterPlaceholder?: string;
+    defaultGlobalFilter?: string;
+    globalFilter?: string;
+    onGlobalFilterChange?: OnChangeFn<string>;
+    enableColumnFilters?: boolean;
+    /** When true (default), renders a filter input row under the header when `enableColumnFilters` is on. */
+    showFilterRow?: boolean;
+    defaultColumnFilters?: ColumnFiltersState;
+    columnFilters?: ColumnFiltersState;
+    onColumnFiltersChange?: OnChangeFn<ColumnFiltersState>;
+    /**
+     * When `enableColumnFilters` is on: if true (default), each column filter uses an integrated control (filter icon
+     * in the field) plus a value. If false, uses a single text field with `includesString` (legacy).
+     */
+    enableAdvancedColumnFilters?: boolean;
+    /**
+     * When `enableColumnFilters` is on: if true (default), shows a clear control on each active column filter.
+     */
+    showColumnFilterClear?: boolean;
+    enableExpanding?: boolean;
+    defaultExpanded?: ExpandedState;
+    expanded?: ExpandedState;
+    onExpandedChange?: OnChangeFn<ExpandedState>;
+    getRowCanExpand?: (row: Row<TData>) => boolean;
+    renderExpandedRow?: (row: Row<TData>) => React_2.ReactNode;
+    /**
+     * When `enableExpanding` and `renderExpandedRow` are set (and grouping is off), prepends a narrow column with a chevron that toggles the detail row. Omit a manual expand column from `columns`.
+     */
+    showExpandColumn?: boolean;
+    /** Merged onto the full-width detail `<td>` (below the expanded row). */
+    expandedRowClassName?: string;
+    enableGrouping?: boolean;
+    defaultGrouping?: GroupingState;
+    grouping?: GroupingState;
+    onGroupingChange?: OnChangeFn<GroupingState>;
+    showGroupingDropZone?: boolean;
+    groupingDropZoneLabel?: string;
+    groupingDropZoneHint?: string;
     isLoading?: boolean;
     loadingRows?: number;
     emptyState?: React_2.ReactNode;
+    enableColumnVisibility?: boolean;
+    defaultColumnVisibility?: VisibilityState;
+    columnVisibility?: VisibilityState;
+    onColumnVisibilityChange?: OnChangeFn<VisibilityState>;
+    /**
+     * Virtualize body rows for large lists. Ignored when `enableGrouping` is on, when master–detail
+     * (`renderExpandedRow`) is used, when there are no rows, or while `isLoading`.
+     */
+    enableVirtualization?: boolean;
+    /**
+     * Max height of the table scroll region (`overflow: auto`). Keeps the header sticky while the body scrolls.
+     * Also used when `enableVirtualization` is on. String is a CSS length (e.g. `"min(35rem, 70vh)"`); number is pixels.
+     */
+    virtualScrollContainerHeight?: string | number;
+    /** Estimated main data row height in px (used until measured). */
+    virtualRowEstimateSize?: number;
+    /** Extra rows to render above/below the viewport. */
+    virtualOverscan?: number;
+    /**
+     * When true, renders `<tfoot>` from TanStack `columnDef.footer` (totals, counts, etc.).
+     * At least one column must define `footer`; otherwise nothing is rendered.
+     */
+    enableFooter?: boolean;
+    /**
+     * When true, a horizontal drag handle appears below the scroll region (pointer or Arrow Up/Down) to change height.
+     * Uses `virtualScrollContainerHeight` as the initial `height` and clamps between `scrollContainerResizeMinHeight` and `scrollContainerResizeMaxHeight`.
+     */
+    enableScrollContainerResize?: boolean;
+    /** Upper bound when `enableScrollContainerResize` is on (CSS length or px number). Default `min(90vh, 80rem)`. */
+    scrollContainerResizeMaxHeight?: string | number;
+    /** Lower bound when `enableScrollContainerResize` is on (CSS length or px number). Default `8rem`. */
+    scrollContainerResizeMinHeight?: string | number;
+    /**
+     * Client-side pagination (TanStack `getPaginationRowModel`). Ignored when `enableGrouping` is on
+     * (grouping and pagination are not combined).
+     */
+    enablePagination?: boolean;
+    /**
+     * Server-side pagination: pass one page of `data` and set `rowCount` (or `pageCount`). Does not use
+     * `getPaginationRowModel()` to slice rows.
+     */
+    manualPagination?: boolean;
+    /** Total rows on the server when `manualPagination` is true (for page count and “Showing … of …”). */
+    rowCount?: number;
+    /** Total pages when `manualPagination` is true; optional if `rowCount` / `pageSize` can derive it. */
+    pageCount?: number;
+    defaultPagination?: Partial<PaginationState>;
+    pagination?: PaginationState;
+    onPaginationChange?: OnChangeFn<PaginationState>;
+    /** Page size options for the footer control. Current `pageSize` is included if missing from the list. */
+    pageSizeOptions?: number[];
+    /** Passed to the `Pagination` range (siblings around current page). */
+    paginationSiblingCount?: number;
 }
 
 export declare const DatePicker: React_2.ForwardRefExoticComponent<DatePickerProps & React_2.RefAttributes<HTMLButtonElement>>;
@@ -371,6 +538,8 @@ export declare const DropdownMenuSubTrigger: React_2.ForwardRefExoticComponent<O
 
 export declare const DropdownMenuTrigger: React_2.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React_2.RefAttributes<HTMLButtonElement>>;
 
+export { ExpandedState }
+
 export declare const Field: React_2.ForwardRefExoticComponent<FieldProps & React_2.RefAttributes<HTMLDivElement>>;
 
 export declare const FieldMessage: React_2.ForwardRefExoticComponent<FieldMessageProps & React_2.RefAttributes<HTMLParagraphElement>>;
@@ -379,15 +548,15 @@ export declare interface FieldMessageProps extends React_2.HTMLAttributes<HTMLPa
     isError?: boolean;
 }
 
-export declare interface FieldProps extends React_2.HTMLAttributes<HTMLDivElement> {
-}
+export declare type FieldProps = React_2.HTMLAttributes<HTMLDivElement>;
+
+export { GroupingState }
 
 export declare const Input: React_2.ForwardRefExoticComponent<InputProps & React_2.RefAttributes<HTMLInputElement>>;
 
 export declare const InputAddon: React_2.ForwardRefExoticComponent<InputAddonProps & React_2.RefAttributes<HTMLDivElement>>;
 
-export declare interface InputAddonProps extends React_2.HTMLAttributes<HTMLDivElement> {
-}
+export declare type InputAddonProps = React_2.HTMLAttributes<HTMLDivElement>;
 
 export declare const InputGroup: React_2.ForwardRefExoticComponent<InputGroupProps & React_2.RefAttributes<HTMLDivElement>>;
 
@@ -450,6 +619,8 @@ export declare interface PaginationProps extends React_2.ComponentPropsWithoutRe
 
 export declare const PaginationRoot: React_2.ForwardRefExoticComponent<Omit<React_2.DetailedHTMLProps<React_2.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React_2.RefAttributes<HTMLElement>>;
 
+export { PaginationState }
+
 export declare const Popover: {
     ({ content, children, side, align, sideOffset, contentClassName, ...props }: PopoverProps): JSX.Element;
     displayName: string;
@@ -507,6 +678,8 @@ export declare const radioVariants: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
 } & ClassProp) | undefined) => string;
 
+export { RowSelectionState }
+
 export declare const Select: React_2.ForwardRefExoticComponent<SelectProps & React_2.RefAttributes<HTMLButtonElement>>;
 
 export declare const SelectContent: React_2.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
@@ -556,7 +729,20 @@ export declare interface SeparatorProps extends React_2.HTMLAttributes<HTMLDivEl
 
 export declare const Skeleton: React_2.ForwardRefExoticComponent<SkeletonProps & React_2.RefAttributes<HTMLDivElement>>;
 
-export declare interface SkeletonProps extends React_2.HTMLAttributes<HTMLDivElement> {
+export declare type SkeletonProps = React_2.HTMLAttributes<HTMLDivElement>;
+
+export { SortingState }
+
+export declare const STRING_COLUMN_FILTER_OPTIONS: {
+    value: StringColumnFilterOperator;
+    label: string;
+}[];
+
+export declare type StringColumnFilterOperator = "contains" | "equals" | "startsWith" | "endsWith" | "notContains" | "empty" | "notEmpty";
+
+export declare interface StringColumnFilterState {
+    op: StringColumnFilterOperator;
+    value: string;
 }
 
 export declare const Switch: React_2.ForwardRefExoticComponent<SwitchProps & React_2.RefAttributes<HTMLInputElement>>;
@@ -651,4 +837,8 @@ export declare const TooltipRoot: React_2.FC<TooltipPrimitive.TooltipProps>;
 
 export declare const TooltipTrigger: React_2.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React_2.RefAttributes<HTMLButtonElement>>;
 
+export declare function useDataTableTable<TData extends RowData>(): Table_2<TData> | null;
+
+export { VisibilityState }
+
 export { }