@actabldesign/bellhop-react 0.0.3

package/components/table/index.d.ts

@@ -0,0 +1,168 @@
+/**
+ * BellhopOS Table Primitives
+ *
+ * Composable table components for building static and dynamic tables.
+ * These primitives can be used standalone or combined with TanStack Table
+ * for advanced features like sorting, filtering, and pagination.
+ * Uses existing Bellhop components for consistency.
+ */
+import React from 'react';
+export type TableSize = 'compact' | 'default' | 'relaxed';
+export type TableVariant = 'default' | 'bordered' | 'striped';
+export type CellAlign = 'left' | 'center' | 'right';
+export interface TableWrapperProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Maximum height for vertical scrolling */
+    maxHeight?: string | number;
+    /** Maximum width for horizontal scrolling */
+    maxWidth?: string | number;
+    /** Enable horizontal scrolling */
+    scrollX?: boolean;
+    /** Enable vertical scrolling */
+    scrollY?: boolean;
+}
+export declare const TableWrapper: React.ForwardRefExoticComponent<TableWrapperProps & React.RefAttributes<HTMLDivElement>>;
+export interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
+    /** Table size variant */
+    size?: TableSize;
+    /** Table style variant */
+    variant?: TableVariant;
+    /** Show rounded corners */
+    rounded?: boolean;
+    /** Enable row hover effect */
+    hoverable?: boolean;
+    /** Enable responsive stacking on mobile */
+    responsive?: boolean;
+    /** Loading state */
+    loading?: boolean;
+}
+export declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLTableElement>>;
+export interface TableCaptionProps extends React.HTMLAttributes<HTMLTableCaptionElement> {
+    /** Position of caption */
+    position?: 'top' | 'bottom';
+    /** Screen reader only */
+    srOnly?: boolean;
+}
+export declare const TableCaption: React.ForwardRefExoticComponent<TableCaptionProps & React.RefAttributes<HTMLTableCaptionElement>>;
+export interface TableHeadProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+    /** Make header sticky */
+    sticky?: boolean;
+    /** Use subtle styling */
+    subtle?: boolean;
+}
+export declare const TableHead: React.ForwardRefExoticComponent<TableHeadProps & React.RefAttributes<HTMLTableSectionElement>>;
+export interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+}
+export declare const TableBody: React.ForwardRefExoticComponent<TableBodyProps & React.RefAttributes<HTMLTableSectionElement>>;
+export interface TableFooterProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+}
+export declare const TableFooter: React.ForwardRefExoticComponent<TableFooterProps & React.RefAttributes<HTMLTableSectionElement>>;
+export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+    /** Row is selected */
+    selected?: boolean;
+    /** Row is clickable */
+    clickable?: boolean;
+    /** Row is expandable */
+    expandable?: boolean;
+    /** Row is expanded */
+    expanded?: boolean;
+    /** Row is a filter row */
+    filter?: boolean;
+    /** Row is an expansion content row */
+    expansion?: boolean;
+}
+export declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLTableRowElement>>;
+export interface TableHeaderCellProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
+    /** Text alignment */
+    align?: CellAlign;
+    /** Column is sortable */
+    sortable?: boolean;
+    /** Current sort direction */
+    sortDirection?: 'asc' | 'desc' | null;
+    /** Shrink column to content width */
+    shrink?: boolean;
+    /** Expand column to fill space */
+    expand?: boolean;
+    /** Checkbox column */
+    checkbox?: boolean;
+    /** Actions column */
+    actions?: boolean;
+    /** Pin column to left */
+    pinnedLeft?: boolean;
+    /** Pin column to right */
+    pinnedRight?: boolean;
+}
+export declare const TableHeaderCell: React.ForwardRefExoticComponent<TableHeaderCellProps & React.RefAttributes<HTMLTableCellElement>>;
+export interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+    /** Text alignment */
+    align?: CellAlign;
+    /** Cell contains numeric data */
+    numeric?: boolean;
+    /** Truncate long text */
+    truncate?: boolean;
+    /** Allow text to wrap */
+    wrap?: boolean;
+    /** Shrink cell to content width */
+    shrink?: boolean;
+    /** Expand cell to fill space */
+    expand?: boolean;
+    /** Checkbox cell */
+    checkbox?: boolean;
+    /** Actions cell */
+    actions?: boolean;
+    /** Expand trigger cell */
+    expandTrigger?: boolean;
+    /** Filter cell */
+    filter?: boolean;
+    /** Expansion content cell */
+    expansion?: boolean;
+    /** Pin cell to left */
+    pinnedLeft?: boolean;
+    /** Pin cell to right */
+    pinnedRight?: boolean;
+    /** Data label for responsive mode */
+    dataLabel?: string;
+}
+export declare const TableCell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLTableCellElement>>;
+export interface TableEmptyProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Icon to display */
+    icon?: React.ReactNode;
+    /** Title text */
+    title?: string;
+    /** Description text */
+    description?: string;
+    /** Number of columns to span */
+    colSpan?: number;
+}
+export declare const TableEmpty: React.ForwardRefExoticComponent<TableEmptyProps & React.RefAttributes<HTMLTableRowElement>>;
+export interface TableActionBarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Selection count to display */
+    selectionCount?: number;
+    /** Left side content */
+    left?: React.ReactNode;
+    /** Right side content */
+    right?: React.ReactNode;
+}
+export declare const TableActionBar: React.ForwardRefExoticComponent<TableActionBarProps & React.RefAttributes<HTMLDivElement>>;
+export interface TablePaginationProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Current page (1-indexed) */
+    page: number;
+    /** Total number of pages */
+    totalPages: number;
+    /** Total number of items */
+    totalItems?: number;
+    /** Items per page */
+    pageSize: number;
+    /** Available page sizes */
+    pageSizeOptions?: number[];
+    /** Callback when page changes */
+    onPageChange: (page: number) => void;
+    /** Callback when page size changes */
+    onPageSizeChange?: (pageSize: number) => void;
+}
+export declare const TablePagination: React.ForwardRefExoticComponent<TablePaginationProps & React.RefAttributes<HTMLDivElement>>;
+export interface ExpandIconProps extends React.HTMLAttributes<HTMLSpanElement> {
+    expanded?: boolean;
+}
+export declare const ExpandIcon: React.ForwardRefExoticComponent<ExpandIconProps & React.RefAttributes<HTMLSpanElement>>;
+export { Table as BhTable, TableWrapper as BhTableWrapper, TableCaption as BhTableCaption, TableHead as BhThead, TableBody as BhTbody, TableFooter as BhTfoot, TableRow as BhTr, TableHeaderCell as BhTh, TableCell as BhTd, TableEmpty as BhTableEmpty, TableActionBar as BhTableActionBar, TablePagination as BhTablePagination, ExpandIcon as BhExpandIcon, };
+//# sourceMappingURL=index.d.ts.map

package/components/table/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/table/index.tsx"],"names":[],"mappings":"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"}

package/components/table/index.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * BellhopOS Table Primitives
+ *
+ * Composable table components for building static and dynamic tables.
+ * These primitives can be used standalone or combined with TanStack Table
+ * for advanced features like sorting, filtering, and pagination.
+ * Uses existing Bellhop components for consistency.
+ */
+import { forwardRef, createContext, useContext } from 'react';
+import { BhButtonIcon } from '../stencil-generated';
+// =============================================================================
+// Context
+// =============================================================================
+const TableContext = createContext({
+    size: 'default',
+    variant: 'default',
+    hoverable: true,
+});
+const useTableContext = () => useContext(TableContext);
+// =============================================================================
+// Utility Functions
+// =============================================================================
+function clsx(...classes) {
+    return classes.filter(Boolean).join(' ');
+}
+export const TableWrapper = forwardRef(({ className, children, maxHeight, maxWidth, scrollX, scrollY, style, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, className: clsx('bh-table-wrapper', scrollX && 'bh-table-wrapper--scroll-x', scrollY && 'bh-table-wrapper--scroll-y', className), style: {
+            maxHeight: maxHeight,
+            maxWidth: maxWidth,
+            ...style,
+        }, tabIndex: 0, ...props, children: children }));
+});
+TableWrapper.displayName = 'TableWrapper';
+export const Table = forwardRef(({ className, children, size = 'default', variant = 'default', rounded = false, hoverable = true, responsive = false, loading = false, ...props }, ref) => {
+    return (_jsx(TableContext.Provider, { value: { size, variant, hoverable }, children: _jsx("table", { ref: ref, className: clsx('bh-table', `bh-table--${size}`, variant === 'bordered' && 'bh-table--bordered', variant === 'striped' && 'bh-table--striped', rounded && 'bh-table--rounded', responsive && 'bh-table--responsive', loading && 'bh-table--loading', className), ...props, children: children }) }));
+});
+Table.displayName = 'Table';
+export const TableCaption = forwardRef(({ className, children, position = 'top', srOnly = false, ...props }, ref) => {
+    return (_jsx("caption", { ref: ref, className: clsx('bh-caption', position === 'bottom' && 'bh-caption--bottom', srOnly && 'bh-caption--sr-only', className), ...props, children: children }));
+});
+TableCaption.displayName = 'TableCaption';
+export const TableHead = forwardRef(({ className, children, sticky = false, subtle = false, ...props }, ref) => {
+    return (_jsx("thead", { ref: ref, className: clsx('bh-thead', sticky && 'bh-thead--sticky', subtle && 'bh-thead--subtle', className), ...props, children: children }));
+});
+TableHead.displayName = 'TableHead';
+export const TableBody = forwardRef(({ className, children, ...props }, ref) => {
+    return (_jsx("tbody", { ref: ref, className: clsx('bh-tbody', className), ...props, children: children }));
+});
+TableBody.displayName = 'TableBody';
+export const TableFooter = forwardRef(({ className, children, ...props }, ref) => {
+    return (_jsx("tfoot", { ref: ref, className: clsx('bh-tfoot', className), ...props, children: children }));
+});
+TableFooter.displayName = 'TableFooter';
+export const TableRow = forwardRef(({ className, children, selected = false, clickable = false, expandable = false, expanded = false, filter = false, expansion = false, ...props }, ref) => {
+    const { hoverable } = useTableContext();
+    return (_jsx("tr", { ref: ref, className: clsx('bh-tr', hoverable && 'bh-tr--hoverable', selected && 'bh-tr--selected', clickable && 'bh-tr--clickable', expandable && 'bh-tr--expandable', expanded && 'bh-tr--expanded', filter && 'bh-tr--filter', expansion && 'bh-tr--expansion', className), ...props, children: children }));
+});
+TableRow.displayName = 'TableRow';
+export const TableHeaderCell = forwardRef(({ className, children, align = 'left', sortable = false, sortDirection = null, shrink = false, expand = false, checkbox = false, actions = false, pinnedLeft = false, pinnedRight = false, onClick, ...props }, ref) => {
+    const isSorted = sortDirection !== null;
+    return (_jsx("th", { ref: ref, className: clsx('bh-th', `bh-th--${align}`, sortable && 'bh-th--sortable', isSorted && 'bh-th--sorted', shrink && 'bh-th--shrink', expand && 'bh-th--expand', checkbox && 'bh-th--checkbox', actions && 'bh-th--actions', pinnedLeft && 'bh-th--pinned-left', pinnedRight && 'bh-th--pinned-right', className), onClick: sortable ? onClick : undefined, "aria-sort": sortDirection === 'asc'
+            ? 'ascending'
+            : sortDirection === 'desc'
+                ? 'descending'
+                : undefined, ...props, children: _jsxs("span", { className: "bh-th__content", children: [children, sortable && isSorted && (_jsx("span", { className: "bh-th__sort-icon material-symbols-outlined", children: sortDirection === 'asc' ? 'arrow_upward' : 'arrow_downward' }))] }) }));
+});
+TableHeaderCell.displayName = 'TableHeaderCell';
+export const TableCell = forwardRef(({ className, children, align = 'left', numeric = false, truncate = false, wrap = false, shrink = false, expand = false, checkbox = false, actions = false, expandTrigger = false, filter = false, expansion = false, pinnedLeft = false, pinnedRight = false, dataLabel, ...props }, ref) => {
+    return (_jsx("td", { ref: ref, className: clsx('bh-td', `bh-td--${align}`, numeric && 'bh-td--numeric', truncate && 'bh-td--truncate', wrap && 'bh-td--wrap', shrink && 'bh-td--shrink', expand && 'bh-td--expand', checkbox && 'bh-td--checkbox', actions && 'bh-td--actions', expandTrigger && 'bh-td--expand-trigger', filter && 'bh-td--filter', expansion && 'bh-td--expansion', pinnedLeft && 'bh-td--pinned-left', pinnedRight && 'bh-td--pinned-right', className), "data-label": dataLabel, ...props, children: children }));
+});
+TableCell.displayName = 'TableCell';
+export const TableEmpty = forwardRef(({ className, children, icon, title, description, colSpan = 1, ...props }, ref) => {
+    return (_jsx("tr", { ref: ref, children: _jsx("td", { colSpan: colSpan, children: _jsxs("div", { className: clsx('bh-table-empty', className), ...props, children: [icon && _jsx("div", { className: "bh-table-empty__icon", children: icon }), title && _jsx("div", { className: "bh-table-empty__title", children: title }), description && (_jsx("div", { className: "bh-table-empty__description", children: description })), children] }) }) }));
+});
+TableEmpty.displayName = 'TableEmpty';
+export const TableActionBar = forwardRef(({ className, children, selectionCount, left, right, ...props }, ref) => {
+    const hasSelection = selectionCount !== undefined && selectionCount > 0;
+    return (_jsxs("div", { ref: ref, className: clsx('bh-table-action-bar', hasSelection && 'bh-table-action-bar--selected', className), ...props, children: [_jsxs("div", { className: "bh-table-action-bar__left", children: [hasSelection && (_jsxs("span", { className: "bh-table-action-bar__selection-count", children: [selectionCount, " selected"] })), left] }), _jsx("div", { className: "bh-table-action-bar__right", children: right }), children] }));
+});
+TableActionBar.displayName = 'TableActionBar';
+export const TablePagination = forwardRef(({ className, page, totalPages, totalItems, pageSize, pageSizeOptions = [10, 25, 50, 100], onPageChange, onPageSizeChange, ...props }, ref) => {
+    const startItem = (page - 1) * pageSize + 1;
+    const endItem = Math.min(page * pageSize, totalItems || page * pageSize);
+    return (_jsxs("div", { ref: ref, className: clsx('bh-table-pagination', className), ...props, children: [_jsx("div", { className: "bh-table-pagination__info", children: totalItems !== undefined ? (_jsxs(_Fragment, { children: ["Showing ", startItem, " to ", endItem, " of ", totalItems, " results"] })) : (_jsxs(_Fragment, { children: ["Page ", page, " of ", totalPages] })) }), _jsxs("div", { className: "bh-table-pagination__controls", children: [onPageSizeChange && (_jsxs("div", { className: "bh-table-pagination__page-size", children: [_jsx("span", { children: "Rows per page:" }), _jsx("select", { value: pageSize, onChange: (e) => onPageSizeChange(Number(e.target.value)), className: "bh-table-pagination__select", children: pageSizeOptions.map((size) => (_jsx("option", { value: size, children: size }, size))) })] })), _jsx(BhButtonIcon, { iconName: "first_page", size: "sm", hierarchy: "quaternary", disabled: page <= 1, onBhClick: () => onPageChange(1), "aria-label": "First page" }), _jsx(BhButtonIcon, { iconName: "chevron_left", size: "sm", hierarchy: "quaternary", disabled: page <= 1, onBhClick: () => onPageChange(page - 1), "aria-label": "Previous page" }), _jsx(BhButtonIcon, { iconName: "chevron_right", size: "sm", hierarchy: "quaternary", disabled: page >= totalPages, onBhClick: () => onPageChange(page + 1), "aria-label": "Next page" }), _jsx(BhButtonIcon, { iconName: "last_page", size: "sm", hierarchy: "quaternary", disabled: page >= totalPages, onBhClick: () => onPageChange(totalPages), "aria-label": "Last page" })] })] }));
+});
+TablePagination.displayName = 'TablePagination';
+export const ExpandIcon = forwardRef(({ className, expanded = false, ...props }, ref) => {
+    return (_jsx("span", { ref: ref, className: clsx('bh-expand-icon', className), ...props, children: _jsx("span", { className: "material-symbols-outlined", children: "chevron_right" }) }));
+});
+ExpandIcon.displayName = 'ExpandIcon';
+// =============================================================================
+// Exports
+// =============================================================================
+export { Table as BhTable, TableWrapper as BhTableWrapper, TableCaption as BhTableCaption, TableHead as BhThead, TableBody as BhTbody, TableFooter as BhTfoot, TableRow as BhTr, TableHeaderCell as BhTh, TableCell as BhTd, TableEmpty as BhTableEmpty, TableActionBar as BhTableActionBar, TablePagination as BhTablePagination, ExpandIcon as BhExpandIcon, };

package/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * BellhopOS React Components
+ *
+ * This package provides:
+ * 1. React wrapper components for BellhopOS Stencil web components (auto-generated)
+ * 2. Native React table primitives with TanStack Table integration
+ */
+export * from './components/stencil-generated';
+export type { ButtonHierarchy, ButtonIconPosition, ButtonSize, } from '@actabldesign/bellhop-core';
+export { Table, TableWrapper, TableCaption, TableHead, TableBody, TableFooter, TableRow, TableHeaderCell, TableCell, TableEmpty, TableActionBar, TablePagination, ExpandIcon, BhTable, BhTableWrapper, BhTableCaption, BhThead, BhTbody, BhTfoot, BhTr, BhTh, BhTd, BhTableEmpty, BhTableActionBar, BhTablePagination, BhExpandIcon, } from './components/table';
+export type { TableProps, TableWrapperProps, TableCaptionProps, TableHeadProps, TableBodyProps, TableFooterProps, TableRowProps, TableHeaderCellProps, TableCellProps, TableEmptyProps, TableActionBarProps, TablePaginationProps, ExpandIconProps, TableSize, TableVariant, CellAlign, } from './components/table';
+export { DataTable, BhDataTable, useDataTable, createSelectColumn, createExpandColumn, createEditActionsColumn, } from './components/table/DataTable';
+export type { DataTableProps, UseDataTableOptions, ColumnDef, SortingState, ColumnFiltersState, RowSelectionState, EditMode, EditState, EditingValues, RowChanges, DataTableColumnMeta, } from './components/table/DataTable';
+//# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,cAAc,gCAAgC,CAAC;AAG/C,YAAY,EACV,eAAe,EACf,kBAAkB,EAClB,UAAU,GACX,MAAM,4BAA4B,CAAC;AAMpC,OAAO,EAEL,KAAK,EACL,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,SAAS,EACT,WAAW,EACX,QAAQ,EACR,eAAe,EACf,SAAS,EACT,UAAU,EACV,cAAc,EACd,eAAe,EACf,UAAU,EAEV,OAAO,EACP,cAAc,EACd,cAAc,EACd,OAAO,EACP,OAAO,EACP,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,GACb,MAAM,oBAAoB,CAAC;AAE5B,YAAY,EACV,UAAU,EACV,iBAAiB,EACjB,iBAAiB,EACjB,cAAc,EACd,cAAc,EACd,gBAAgB,EAChB,aAAa,EACb,oBAAoB,EACpB,cAAc,EACd,eAAe,EACf,mBAAmB,EACnB,oBAAoB,EACpB,eAAe,EACf,SAAS,EACT,YAAY,EACZ,SAAS,GACV,MAAM,oBAAoB,CAAC;AAM5B,OAAO,EACL,SAAS,EACT,WAAW,EACX,YAAY,EACZ,kBAAkB,EAClB,kBAAkB,EAClB,uBAAuB,GACxB,MAAM,8BAA8B,CAAC;AAEtC,YAAY,EACV,cAAc,EACd,mBAAmB,EACnB,SAAS,EACT,YAAY,EACZ,kBAAkB,EAClB,iBAAiB,EACjB,QAAQ,EACR,SAAS,EACT,aAAa,EACb,UAAU,EACV,mBAAmB,GACpB,MAAM,8BAA8B,CAAC"}

package/index.js

@@ -0,0 +1,21 @@
+/**
+ * BellhopOS React Components
+ *
+ * This package provides:
+ * 1. React wrapper components for BellhopOS Stencil web components (auto-generated)
+ * 2. Native React table primitives with TanStack Table integration
+ */
+// Re-export all generated Stencil React components
+export * from './components/stencil-generated';
+// =============================================================================
+// Table Primitives
+// =============================================================================
+export { 
+// Table primitives
+Table, TableWrapper, TableCaption, TableHead, TableBody, TableFooter, TableRow, TableHeaderCell, TableCell, TableEmpty, TableActionBar, TablePagination, ExpandIcon, 
+// Aliased exports (Bh prefix)
+BhTable, BhTableWrapper, BhTableCaption, BhThead, BhTbody, BhTfoot, BhTr, BhTh, BhTd, BhTableEmpty, BhTableActionBar, BhTablePagination, BhExpandIcon, } from './components/table';
+// =============================================================================
+// DataTable (TanStack Table integration)
+// =============================================================================
+export { DataTable, BhDataTable, useDataTable, createSelectColumn, createExpandColumn, createEditActionsColumn, } from './components/table/DataTable';

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@actabldesign/bellhop-react",
+  "version": "0.0.3+9324769",
+  "description": "BellhopOS React wrappers for Stencil components",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
+    }
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0",
+    "@actabldesign/bellhop-core": "^0.0.3+9324769"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/actabldesign/bellhop-dist.git",
+    "directory": "react"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}