@koobiq/react-components 0.0.1-beta.24 → 0.0.1-beta.25

package/dist/components/Collections/Cell.d.ts

@@ -0,0 +1,28 @@
+import type { CSSProperties } from 'react';
+import type { CellProps as AriaCellProps } from '@koobiq/react-primitives';
+export declare const cellPropAlign: readonly ["left", "right", "center"];
+export declare const cellPropVerticalAlign: readonly ["baseline", "top", "middle", "bottom", "sub", "text-top"];
+export type CellPropAlign = (typeof cellPropAlign)[number];
+export type CellPropVerticalAlign = (typeof cellPropVerticalAlign)[number];
+export type CellProps = AriaCellProps & {
+    /** Additional CSS-classes. */
+    className?: string;
+    /** Inline styles. */
+    style?: CSSProperties;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
+    /**
+     * Horizontal alignment of the cell content.
+     * @default left
+     * */
+    align?: CellPropAlign;
+    /**
+     * Vertical alignment of the cell content.
+     * @default middle
+     * */
+    valign?: CellPropVerticalAlign;
+};
+export declare function Cell(_props: CellProps): null;
+export declare namespace Cell {
+    var getCollectionNode: unknown;
+}

package/dist/components/Collections/Cell.js

@@ -0,0 +1,10 @@
+"use client";
+import { Cell as Cell$1 } from "@koobiq/react-primitives";
+const CellInner = Cell$1;
+function Cell(_props) {
+  return null;
+}
+Cell.getCollectionNode = CellInner.getCollectionNode;
+export {
+  Cell
+};

package/dist/components/Collections/Column.d.ts

@@ -0,0 +1,28 @@
+import type { CSSProperties } from 'react';
+import type { ColumnProps as AriaColumnProps } from '@koobiq/react-primitives';
+export declare const columnPropAlign: readonly ["left", "right", "center"];
+export declare const columnPropVerticalAlign: readonly ["baseline", "top", "middle", "bottom", "sub", "text-top"];
+export type ColumnPropAlign = (typeof columnPropAlign)[number];
+export type ColumnPropVerticalAlign = (typeof columnPropVerticalAlign)[number];
+export type ColumnProps<T> = Omit<AriaColumnProps<T>, 'allowsResizing' | 'allowsSorting' | 'width' | 'defaultWidth' | 'minWidth' | 'maxWidth'> & {
+    /** Additional CSS-classes. */
+    className?: string;
+    /** Inline styles. */
+    style?: CSSProperties;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
+    /**
+     * Horizontal alignment of the cell content.
+     * @default left
+     * */
+    align?: ColumnPropAlign;
+    /**
+     * Vertical alignment of the cell content.
+     * @default middle
+     * */
+    valign?: ColumnPropVerticalAlign;
+};
+export declare function Column<T>(_props: ColumnProps<T>): null;
+export declare namespace Column {
+    var getCollectionNode: unknown;
+}

package/dist/components/Collections/Column.js

@@ -0,0 +1,10 @@
+"use client";
+import { Column as Column$1 } from "@koobiq/react-primitives";
+const ColumnInner = Column$1;
+function Column(_props) {
+  return null;
+}
+Column.getCollectionNode = ColumnInner.getCollectionNode;
+export {
+  Column
+};

package/dist/components/Collections/Row.d.ts

@@ -0,0 +1,14 @@
+import type { CSSProperties } from 'react';
+import type { RowProps as AriaRowProps } from '@koobiq/react-primitives';
+export type RowProps<T> = AriaRowProps<T> & {
+    /** Additional CSS-classes. */
+    className?: string;
+    /** Inline styles. */
+    style?: CSSProperties;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
+};
+export declare function Row<T>(_props: RowProps<T>): null;
+export declare namespace Row {
+    var getCollectionNode: unknown;
+}

package/dist/components/Collections/Row.js

@@ -0,0 +1,10 @@
+"use client";
+import { Row as Row$1 } from "@koobiq/react-primitives";
+const RowInner = Row$1;
+function Row(_props) {
+  return null;
+}
+Row.getCollectionNode = RowInner.getCollectionNode;
+export {
+  Row
+};

package/dist/components/Collections/TableBody.d.ts

@@ -0,0 +1,6 @@
+import type { TableBodyProps as AriaTableBodyProps } from '@koobiq/react-primitives';
+export type TableBodyProps<T> = AriaTableBodyProps<T>;
+export declare function TableBody<T>(_props: TableBodyProps<T>): null;
+export declare namespace TableBody {
+    var getCollectionNode: unknown;
+}

package/dist/components/Collections/TableBody.js

@@ -0,0 +1,10 @@
+"use client";
+import { TableBody as TableBody$1 } from "@koobiq/react-primitives";
+const TableBodyInner = TableBody$1;
+function TableBody(_props) {
+  return null;
+}
+TableBody.getCollectionNode = TableBodyInner.getCollectionNode;
+export {
+  TableBody
+};

package/dist/components/Collections/TableHeader.d.ts

@@ -0,0 +1,6 @@
+import type { TableHeaderProps as AriaTableHeaderProps } from '@koobiq/react-primitives';
+export type TableHeaderProps<T> = AriaTableHeaderProps<T>;
+export declare function TableHeader<T>(_props: TableHeaderProps<T>): null;
+export declare namespace TableHeader {
+    var getCollectionNode: unknown;
+}

package/dist/components/Collections/TableHeader.js

@@ -0,0 +1,10 @@
+"use client";
+import { TableHeader as TableHeader$1 } from "@koobiq/react-primitives";
+const TableHeaderInner = TableHeader$1;
+function TableHeader(_props) {
+  return null;
+}
+TableHeader.getCollectionNode = TableHeaderInner.getCollectionNode;
+export {
+  TableHeader
+};

package/dist/components/Collections/index.d.ts

@@ -2,3 +2,8 @@ export * from './Section';
 export * from './Item';
 export * from './Divider';
 export * from './Header';
+export * from './Cell';
+export * from './Row';
+export * from './Column';
+export * from './TableBody';
+export * from './TableHeader';

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

@@ -0,0 +1,12 @@
+import { Cell, Row, Column, TableBody, TableHeader } from '../Collections';
+import type { TableComponentProp } from './types';
+declare const TableComponent: TableComponentProp;
+type CompoundedComponent = typeof TableComponent & {
+    Header: typeof TableHeader;
+    Body: typeof TableBody;
+    Column: typeof Column;
+    Row: typeof Row;
+    Cell: typeof Cell;
+};
+export declare const Table: CompoundedComponent;
+export {};

package/dist/components/Table/Table.js

@@ -0,0 +1,104 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef } from "react";
+import { useDOMRef, mergeProps, useElementSize, clsx } from "@koobiq/react-core";
+import { useTableState, useTable } from "@koobiq/react-primitives";
+import { utilClasses } from "../../styles/utility.js";
+import s from "./Table.module.css.js";
+import { normalizeBlockSize } from "./utils.js";
+import { TableRowGroup } from "./components/TableRowGroup/TableRowGroup.js";
+import { TableHeaderRow } from "./components/TableHeaderRow/TableHeaderRow.js";
+import { TableSelectAllCell } from "./components/TableSelectAllCell/TableSelectAllCell.js";
+import { TableColumnHeader } from "./components/TableColumnHeader/TableColumnHeader.js";
+import { TableRow } from "./components/TableRow/TableRow.js";
+import { TableCheckboxCell } from "./components/TableCheckboxCell/TableCheckboxCell.js";
+import { TableCell } from "./components/TableCell/TableCell.js";
+import { TableHeader } from "../Collections/TableHeader.js";
+import { TableBody } from "../Collections/TableBody.js";
+import { Column } from "../Collections/Column.js";
+import { Row } from "../Collections/Row.js";
+import { Cell } from "../Collections/Cell.js";
+const textNormal = utilClasses.typography["text-normal"];
+function TableRender(props, ref) {
+  const {
+    stickyHeader = false,
+    fullWidth = false,
+    divider = "none",
+    slotProps,
+    selectionMode,
+    selectionBehavior,
+    className,
+    blockSize,
+    maxBlockSize,
+    minBlockSize,
+    style: styleProp
+  } = props;
+  const state = useTableState({
+    ...props,
+    showSelectionCheckboxes: selectionMode === "multiple" && selectionBehavior !== "replace"
+  });
+  const domRef = useDOMRef(ref);
+  const tableRef = useRef(null);
+  const { collection } = state;
+  const { gridProps } = useTable(props, state, tableRef);
+  const tableProps = mergeProps(
+    { ref: tableRef, className: s.table },
+    gridProps,
+    slotProps?.table
+  );
+  const { ref: theadRef, height } = useElementSize();
+  const containerProps = mergeProps(
+    {
+      className: clsx(
+        s.base,
+        fullWidth && s.fullWidth,
+        textNormal,
+        className
+      ),
+      "data-divider": divider,
+      "data-fullwidth": fullWidth,
+      "data-sticky-header": stickyHeader,
+      style: {
+        ...styleProp,
+        "--table-container-block-size": normalizeBlockSize(blockSize),
+        "--table-container-min-block-size": normalizeBlockSize(minBlockSize),
+        "--table-container-max-block-size": normalizeBlockSize(maxBlockSize),
+        "--table-container-scroll-padding-top": `${height}px`
+      },
+      ref: domRef
+    },
+    slotProps?.container
+  );
+  return /* @__PURE__ */ jsx("div", { ...containerProps, children: /* @__PURE__ */ jsxs("table", { ...tableProps, children: [
+    /* @__PURE__ */ jsx(TableRowGroup, { type: "thead", ref: theadRef, children: collection.headerRows.map((headerRow) => /* @__PURE__ */ jsx(TableHeaderRow, { item: headerRow, state, children: [...headerRow.childNodes].map(
+      (column) => column.props.isSelectionCell ? /* @__PURE__ */ jsx(
+        TableSelectAllCell,
+        {
+          column,
+          state
+        },
+        column.key
+      ) : /* @__PURE__ */ jsx(
+        TableColumnHeader,
+        {
+          column,
+          state
+        },
+        column.key
+      )
+    ) }, headerRow.key)) }),
+    /* @__PURE__ */ jsx(TableRowGroup, { type: "tbody", children: [...collection.body.childNodes].map((row) => /* @__PURE__ */ jsx(TableRow, { item: row, state, children: [...row.childNodes].map(
+      (cell) => cell.props.isSelectionCell ? /* @__PURE__ */ jsx(TableCheckboxCell, { cell, state }, cell.key) : /* @__PURE__ */ jsx(TableCell, { cell, state }, cell.key)
+    ) }, row.key)) })
+  ] }) });
+}
+const TableComponent = forwardRef(TableRender);
+const Table = TableComponent;
+Table.Header = TableHeader;
+Table.Body = TableBody;
+Table.Column = Column;
+Table.Row = Row;
+Table.Cell = Cell;
+export {
+  Table
+};

package/dist/components/Table/Table.module.css.js

@@ -0,0 +1,55 @@
+const base = "kbq-table-55e555";
+const fullWidth = "kbq-table-fullWidth-419d42";
+const table = "kbq-table-table-836ffc";
+const cell = "kbq-table-cell-728c41";
+const row = "kbq-table-row-a9022f";
+const thead = "kbq-table-thead-6c557a";
+const hovered = "kbq-table-hovered-be04d3";
+const pressed = "kbq-table-pressed-fea60d";
+const selected = "kbq-table-selected-95ebb7";
+const disabled = "kbq-table-disabled-16f6ce";
+const focusVisible = "kbq-table-focusVisible-0bcc1d";
+const top = "kbq-table-top-53f823";
+const baseline = "kbq-table-baseline-bb5fa5";
+const middle = "kbq-table-middle-5cae59";
+const bottom = "kbq-table-bottom-e6ddd9";
+const sub = "kbq-table-sub-4497f9";
+const s = {
+  base,
+  fullWidth,
+  table,
+  cell,
+  row,
+  thead,
+  hovered,
+  pressed,
+  selected,
+  disabled,
+  "header-cell": "kbq-table-header-cell-34e3fa",
+  focusVisible,
+  top,
+  baseline,
+  middle,
+  bottom,
+  sub,
+  "text-top": "kbq-table-text-top-5c06c5"
+};
+export {
+  base,
+  baseline,
+  bottom,
+  cell,
+  s as default,
+  disabled,
+  focusVisible,
+  fullWidth,
+  hovered,
+  middle,
+  pressed,
+  row,
+  selected,
+  sub,
+  table,
+  thead,
+  top
+};

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

@@ -0,0 +1,7 @@
+import type { TableState, AriaTableCellProps } from '@koobiq/react-primitives';
+type TableCellProps<T> = {
+    cell: AriaTableCellProps['node'];
+    state: TableState<T>;
+};
+export declare function TableCell<T>({ cell, state }: TableCellProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Table/components/TableCell/TableCell.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useFocusRing, clsx, mergeProps } from "@koobiq/react-core";
+import { useTableCell } from "@koobiq/react-primitives";
+import { utilClasses } from "../../../../styles/utility.js";
+import s from "../../Table.module.css.js";
+const textNormal = utilClasses.typography["text-normal"];
+function TableCell({ cell, state }) {
+  const ref = useRef(null);
+  const { gridCellProps } = useTableCell({ node: cell }, state, ref);
+  const { isFocusVisible, focusProps } = useFocusRing();
+  const {
+    style,
+    className,
+    align = "left",
+    valign = "middle"
+  } = cell.props;
+  return /* @__PURE__ */ jsx(
+    "td",
+    {
+      align,
+      ...mergeProps(gridCellProps, focusProps),
+      className: clsx(
+        s.cell,
+        textNormal,
+        valign && s[valign],
+        isFocusVisible && s.focusVisible,
+        className
+      ),
+      style,
+      ref,
+      children: cell.rendered
+    }
+  );
+}
+export {
+  TableCell
+};

package/dist/components/Table/components/TableCell/index.d.ts

@@ -0,0 +1 @@
+export * from './TableCell';

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

@@ -0,0 +1,7 @@
+import { type AriaTableCellProps, type TableState } from '@koobiq/react-primitives';
+type TableCheckboxCellProps<T> = {
+    cell: AriaTableCellProps['node'];
+    state: TableState<T>;
+};
+export declare function TableCheckboxCell<T>({ cell, state, }: TableCheckboxCellProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Table/components/TableCheckboxCell/TableCheckboxCell.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useTableCell, useTableSelectionCheckbox } from "@koobiq/react-primitives";
+import s from "../../Table.module.css.js";
+import { Checkbox } from "../../../Checkbox/Checkbox.js";
+function TableCheckboxCell({
+  cell,
+  state
+}) {
+  const ref = useRef(null);
+  const { gridCellProps } = useTableCell({ node: cell }, state, ref);
+  const { checkboxProps } = useTableSelectionCheckbox(
+    { key: cell.parentKey },
+    state
+  );
+  return /* @__PURE__ */ jsx("td", { className: s.cell, ...gridCellProps, ref, children: /* @__PURE__ */ jsx(Checkbox, { ...checkboxProps }) });
+}
+export {
+  TableCheckboxCell
+};

package/dist/components/Table/components/TableCheckboxCell/index.d.ts

@@ -0,0 +1 @@
+export * from './TableCheckboxCell';

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

@@ -0,0 +1,7 @@
+import type { TableState, AriaTableColumnHeaderProps } from '@koobiq/react-primitives';
+type TableColumnHeaderProps<T> = {
+    column: AriaTableColumnHeaderProps<T>['node'];
+    state: TableState<T>;
+};
+export declare function TableColumnHeader<T>({ column, state, }: TableColumnHeaderProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Table/components/TableColumnHeader/TableColumnHeader.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useFocusRing, mergeProps, clsx } from "@koobiq/react-core";
+import { useTableColumnHeader } from "@koobiq/react-primitives";
+import { utilClasses } from "../../../../styles/utility.js";
+import s from "../../Table.module.css.js";
+const textNormal = utilClasses.typography["text-normal"];
+function TableColumnHeader({
+  column,
+  state
+}) {
+  const ref = useRef(null);
+  const { columnHeaderProps } = useTableColumnHeader(
+    { node: column },
+    state,
+    ref
+  );
+  const {
+    style,
+    className,
+    align = "left",
+    valign = "middle"
+  } = column.props;
+  const { isFocusVisible, focusProps } = useFocusRing();
+  return /* @__PURE__ */ jsx(
+    "th",
+    {
+      align,
+      className: clsx(
+        s["header-cell"],
+        isFocusVisible && s.focusVisible,
+        valign && s[valign],
+        textNormal,
+        className
+      ),
+      style,
+      ...mergeProps(columnHeaderProps, focusProps),
+      ref,
+      children: column.rendered
+    }
+  );
+}
+export {
+  TableColumnHeader
+};

package/dist/components/Table/components/TableColumnHeader/index.d.ts

@@ -0,0 +1 @@
+export * from './TableColumnHeader';

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

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+import type { TableState, GridRowProps } from '@koobiq/react-primitives';
+type TableHeaderRowProps<T> = {
+    item: GridRowProps<T>['node'];
+    state: TableState<T>;
+    children: ReactNode;
+};
+export declare function TableHeaderRow<T>({ item, state, children, }: TableHeaderRowProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Table/components/TableHeaderRow/TableHeaderRow.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useTableHeaderRow } from "@koobiq/react-primitives";
+function TableHeaderRow({
+  item,
+  state,
+  children
+}) {
+  const ref = useRef(null);
+  const { rowProps } = useTableHeaderRow({ node: item }, state, ref);
+  return /* @__PURE__ */ jsx("tr", { ...rowProps, ref, children });
+}
+export {
+  TableHeaderRow
+};

package/dist/components/Table/components/TableHeaderRow/index.d.ts

@@ -0,0 +1 @@
+export * from './TableHeaderRow';

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

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+import type { TableState, GridRowProps } from '@koobiq/react-primitives';
+type TableRowProps<T> = {
+    item: GridRowProps<T>['node'];
+    children: ReactNode;
+    state: TableState<T>;
+};
+export declare function TableRow<T>({ item, children, state }: TableRowProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Table/components/TableRow/TableRow.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useFocusRing, useHover, mergeProps, clsx } from "@koobiq/react-core";
+import { useTableRow } from "@koobiq/react-primitives";
+import s from "../../Table.module.css.js";
+function TableRow({ item, children, state }) {
+  const ref = useRef(null);
+  const isSelected = state.selectionManager.isSelected(item.key);
+  const { rowProps, isPressed, isDisabled } = useTableRow(
+    {
+      node: item
+    },
+    state,
+    ref
+  );
+  const { style, className } = item.props;
+  const { isFocusVisible, focusProps } = useFocusRing();
+  const { isHovered, hoverProps } = useHover({ isDisabled });
+  return /* @__PURE__ */ jsx(
+    "tr",
+    {
+      className: clsx(
+        s.row,
+        isHovered && s.hovered,
+        isPressed && s.pressed,
+        isSelected && s.selected,
+        isDisabled && s.disabled,
+        isFocusVisible && s.focusVisible,
+        className
+      ),
+      "data-hovered": isHovered,
+      "data-disabled": isDisabled,
+      "data-selected": isSelected,
+      "data-pressed": isPressed,
+      "data-focus-visible": isFocusVisible,
+      ...mergeProps(rowProps, hoverProps, focusProps),
+      style,
+      ref,
+      children
+    }
+  );
+}
+export {
+  TableRow
+};

package/dist/components/Table/components/TableRow/index.d.ts

@@ -0,0 +1 @@
+export * from './TableRow';

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

@@ -0,0 +1,6 @@
+import { type ReactNode } from 'react';
+export type TableRowGroupProps = {
+    children: ReactNode;
+    type: 'thead' | 'tbody';
+};
+export declare const TableRowGroup: import("react").ForwardRefExoticComponent<TableRowGroupProps & import("react").RefAttributes<any>>;

package/dist/components/Table/components/TableRowGroup/TableRowGroup.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { clsx } from "@koobiq/react-core";
+import { useTableRowGroup } from "@koobiq/react-primitives";
+import s from "../../Table.module.css.js";
+const TableRowGroup = forwardRef(
+  ({ type = "thead", children }, ref) => {
+    const Element = type;
+    const { rowGroupProps } = useTableRowGroup();
+    return /* @__PURE__ */ jsx(Element, { ...rowGroupProps, ref, className: clsx(s[type]), children });
+  }
+);
+TableRowGroup.displayName = "TableRowGroup";
+export {
+  TableRowGroup
+};

package/dist/components/Table/components/TableRowGroup/index.d.ts

@@ -0,0 +1 @@
+export * from './TableRowGroup';

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

@@ -0,0 +1,7 @@
+import { type AriaTableColumnHeaderProps, type TableState } from '@koobiq/react-primitives';
+type TableSelectAllCellProps<T> = {
+    column: AriaTableColumnHeaderProps<T>['node'];
+    state: TableState<T>;
+};
+export declare function TableSelectAllCell<T>({ column, state, }: TableSelectAllCellProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Table/components/TableSelectAllCell/TableSelectAllCell.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useTableColumnHeader, useTableSelectAllCheckbox, VisuallyHidden } from "@koobiq/react-primitives";
+import s from "../../Table.module.css.js";
+import { Checkbox } from "../../../Checkbox/Checkbox.js";
+function TableSelectAllCell({
+  column,
+  state
+}) {
+  const ref = useRef(null);
+  const { columnHeaderProps } = useTableColumnHeader(
+    { node: column },
+    state,
+    ref
+  );
+  const { checkboxProps } = useTableSelectAllCheckbox(state);
+  return /* @__PURE__ */ jsx("th", { className: s["header-cell"], ...columnHeaderProps, ref, children: state.selectionManager.selectionMode === "single" ? /* @__PURE__ */ jsx(VisuallyHidden, { children: checkboxProps["aria-label"] }) : /* @__PURE__ */ jsx(Checkbox, { ...checkboxProps }) });
+}
+export {
+  TableSelectAllCell
+};

package/dist/components/Table/components/TableSelectAllCell/index.d.ts

@@ -0,0 +1 @@
+export * from './TableSelectAllCell';

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

@@ -0,0 +1,7 @@
+export * from './TableRowGroup';
+export * from './TableHeaderRow';
+export * from './TableColumnHeader';
+export * from './TableRow';
+export * from './TableCell';
+export * from './TableSelectAllCell';
+export * from './TableCheckboxCell';

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

@@ -0,0 +1 @@
+export * from './Table';

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

@@ -0,0 +1,76 @@
+import type { ComponentPropsWithRef, ComponentRef, CSSProperties, ReactElement, Ref } from 'react';
+import type { ExtendableComponentPropsWithRef } from '@koobiq/react-core';
+import type { TableStateProps } from '@koobiq/react-primitives';
+import type { Key } from '@react-types/shared';
+export declare const tablePropDivider: readonly ["none", "row"];
+export type TablePropDivider = (typeof tablePropDivider)[number];
+export type TablePropChildren<T> = TableStateProps<T>['children'];
+export type TablePropSelectionMode<T> = TableStateProps<T>['selectionMode'];
+export type TablePropSelectionBehavior<T> = TableStateProps<T>['selectionBehavior'];
+export type TablePropOnSelectionChange<T> = TableStateProps<T>['onSelectionChange'];
+export type TablePropSelectedKeys<T> = TableStateProps<T>['selectedKeys'];
+export type TablePropDefaultSelectedKeys<T> = TableStateProps<T>['defaultSelectedKeys'];
+export type TablePropDisabledBehavior<T> = TableStateProps<T>['disabledBehavior'];
+export type TablePropDisabledKeys<T> = TableStateProps<T>['disabledKeys'];
+export type TablePropBlockSize = CSSProperties['blockSize'];
+export type TablePropMinBlockSize = CSSProperties['minBlockSize'];
+export type TablePropMaxBlockSize = CSSProperties['maxInlineSize'];
+export type TableProps<T> = ExtendableComponentPropsWithRef<{
+    /** How multiple selection should behave in the collection. */
+    selectionBehavior?: TablePropSelectionBehavior<T>;
+    /** The type of selection that is allowed in the collection. */
+    selectionMode?: TablePropSelectionMode<T>;
+    /** The currently selected keys in the collection (controlled). */
+    selectedKeys?: TablePropSelectedKeys<T>;
+    /** The initial selected keys in the collection (uncontrolled). */
+    defaultSelectedKeys?: TablePropDefaultSelectedKeys<T>;
+    /** Handler that is called when the selection changes. */
+    onSelectionChange?: TablePropOnSelectionChange<T>;
+    /** A list of row keys to disable. */
+    disabledKeys?: TablePropDisabledKeys<T>;
+    /** Whether `disabledKeys` applies to all interactions, or only selection. */
+    disabledBehavior?: TablePropDisabledBehavior<T>;
+    /** Handler that is called when a user performs an action on the row. */
+    onRowAction?: (key: Key) => void;
+    /** Handler that is called when a user performs an action on the cell. */
+    onCellAction?: (key: Key) => void;
+    /** Inline styles. */
+    style?: CSSProperties;
+    /** Additional CSS-classes. */
+    className?: string;
+    /**
+     * Type of separators in the table.
+     * @default none
+     */
+    divider?: TablePropDivider;
+    /**
+     * If `true`, the table will take up the full width of its container.
+     * @default false
+     * */
+    fullWidth?: boolean;
+    /**
+     * Flag indicating a fixed table header.
+     * @default false
+     * */
+    stickyHeader?: boolean;
+    /**
+     * The elements that make up the table.
+     * Includes the Table.Header, Table.Body, Table.Column, and Table.Row.
+     * */
+    children?: TablePropChildren<T>;
+    /** Ref to the control. */
+    ref?: Ref<HTMLDivElement>;
+    /** Height of the table container. */
+    blockSize?: TablePropBlockSize;
+    /** Minimum height of the table container. */
+    minBlockSize?: TablePropMinBlockSize;
+    /** Maximum height of the table container. */
+    maxBlockSize?: TablePropMaxBlockSize;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        container?: ComponentPropsWithRef<'div'>;
+        table?: ComponentPropsWithRef<'table'>;
+    };
+}, 'div'>;
+export type TableComponentProp = <T extends object>(props: TableProps<T>) => ReactElement | null;
+export type TableRef = ComponentRef<'table'>;

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

@@ -0,0 +1,2 @@
+import type { TablePropBlockSize } from './types';
+export declare const normalizeBlockSize: (value: TablePropBlockSize | undefined) => string | undefined;

package/dist/components/Table/utils.js

@@ -0,0 +1,8 @@
+import { isNumber } from "@koobiq/react-core";
+const normalizeBlockSize = (value) => {
+  if (isNumber(value)) return `${value}px`;
+  return value;
+};
+export {
+  normalizeBlockSize
+};

package/dist/components/TagGroup/TagGroup.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { useDOMRef, mergeProps, clsx } from "@koobiq/react-core";

package/dist/components/index.d.ts

@@ -29,5 +29,6 @@ export * from './Divider';
 export * from './Menu';
 export * from './ButtonToggleGroup';
 export * from './TagGroup';
+export * from './Table';
 export * from './layout';
 export { useListData } from '@koobiq/react-primitives';

package/dist/index.js

@@ -71,6 +71,7 @@ import { ButtonToggle } from "./components/ButtonToggleGroup/components/ButtonTo
 import { TagGroup } from "./components/TagGroup/TagGroup.js";
 import { Tag } from "./components/TagGroup/Tag.js";
 import { tagGroupPropVariant } from "./components/TagGroup/types.js";
+import { Table } from "./components/Table/Table.js";
 import { flex, flexPropAlignItems, flexPropDirection, flexPropFlex, flexPropGap, flexPropJustifyContent, flexPropOrder, flexPropWrap } from "./components/layout/flex/flex.js";
 import { spacing, spacingGap } from "./components/layout/spacing/spacing.js";
 export {
@@ -123,6 +124,7 @@ export {
   SidePanelHeader,
   SkeletonBlock,
   SkeletonTypography,
+  Table,
   Tag,
   TagGroup,
   Textarea,

package/dist/style.css

@@ -3453,6 +3453,183 @@
   --tag-outline-color: none;
   cursor: not-allowed;
 }
+.kbq-table-55e555 {
+  --table-container-block-size: unset;
+  --table-container-min-block-size: unset;
+  --table-container-max-block-size: unset;
+  --table-container-scroll-padding-top: 0;
+  --table-cell-padding: 10px var(--kbq-size-s);
+  --table-cell-color: var(--kbq-foreground-contrast);
+  --table-header-cell-padding: 10px var(--kbq-size-s);
+  --table-header-cell-color: var(--kbq-foreground-contrast-secondary);
+  --table-border: 1px solid var(--kbq-line-contrast-less);
+  block-size: var(--table-container-block-size);
+  min-block-size: var(--table-container-min-block-size);
+  max-block-size: var(--table-container-max-block-size);
+  scroll-padding-block-start: var(--table-container-scroll-padding-top);
+  overflow: auto;
+}
+
+.kbq-table-fullWidth-419d42 .kbq-table-table-836ffc {
+  inline-size: 100%;
+}
+
+.kbq-table-55e555[data-divider="none"] .kbq-table-cell-728c41:first-child {
+  border-start-start-radius: var(--kbq-size-s);
+  border-end-start-radius: var(--kbq-size-s);
+}
+
+.kbq-table-55e555[data-divider="none"] .kbq-table-cell-728c41:last-child {
+  border-start-end-radius: var(--kbq-size-s);
+  border-end-end-radius: var(--kbq-size-s);
+}
+
+.kbq-table-55e555[data-divider="none"] .kbq-table-row-a9022f {
+  border-radius: var(--kbq-size-s);
+}
+
+.kbq-table-55e555[data-divider="none"] .kbq-table-row-a9022f:first-child {
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+}
+
+.kbq-table-55e555[data-divider="none"] .kbq-table-row-a9022f:first-child .kbq-table-cell-728c41:first-child {
+  border-start-start-radius: 0;
+  border-end-start-radius: var(--kbq-size-s);
+}
+
+.kbq-table-55e555[data-divider="none"] .kbq-table-row-a9022f:first-child .kbq-table-cell-728c41:last-child {
+  border-start-end-radius: 0;
+  border-end-end-radius: var(--kbq-size-s);
+}
+
+.kbq-table-55e555[data-divider="row"] .kbq-table-cell-728c41 {
+  border-block-end: var(--table-border);
+}
+
+.kbq-table-55e555[data-sticky-header="true"] .kbq-table-thead-6c557a {
+  background-color: var(--kbq-background-bg);
+  z-index: 1;
+  position: sticky;
+  inset-block-start: 0;
+}
+
+.kbq-table-table-836ffc {
+  border-spacing: 0;
+}
+
+.kbq-table-table-836ffc[aria-multiselectable="true"] .kbq-table-row-a9022f:is([data-selected="true"], [data-focus-visible="true"]):has( + :is([data-selected="true"], [data-focus-visible="true"])) {
+  border-end-end-radius: 0;
+  border-end-start-radius: 0;
+}
+
+.kbq-table-table-836ffc[aria-multiselectable="true"] .kbq-table-row-a9022f:is([data-selected="true"], [data-focus-visible="true"]):has( + :is([data-selected="true"], [data-focus-visible="true"])) .kbq-table-cell-728c41:first-child {
+  border-end-start-radius: 0;
+}
+
+.kbq-table-table-836ffc[aria-multiselectable="true"] .kbq-table-row-a9022f:is([data-selected="true"], [data-focus-visible="true"]):has( + :is([data-selected="true"], [data-focus-visible="true"])) .kbq-table-cell-728c41:last-child {
+  border-end-end-radius: 0;
+}
+
+.kbq-table-table-836ffc[aria-multiselectable="true"] .kbq-table-row-a9022f:is([data-selected="true"], [data-focus-visible="true"]) + :is([data-selected="true"], [data-focus-visible="true"]) {
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+}
+
+.kbq-table-table-836ffc[aria-multiselectable="true"] .kbq-table-row-a9022f:is([data-selected="true"], [data-focus-visible="true"]) + :is([data-selected="true"], [data-focus-visible="true"]) .kbq-table-cell-728c41:first-child {
+  border-start-start-radius: 0;
+}
+
+.kbq-table-table-836ffc[aria-multiselectable="true"] .kbq-table-row-a9022f:is([data-selected="true"], [data-focus-visible="true"]) + :is([data-selected="true"], [data-focus-visible="true"]) .kbq-table-cell-728c41:last-child {
+  border-start-end-radius: 0;
+}
+
+.kbq-table-cell-728c41 {
+  box-sizing: border-box;
+  color: var(--table-cell-color);
+  padding: var(--table-cell-padding);
+  transition: border-radius var(--kbq-transition-default);
+  outline: none;
+}
+
+.kbq-table-row-a9022f {
+  box-sizing: border-box;
+  cursor: default;
+  transition: background-color var(--kbq-transition-default), border-radius var(--kbq-transition-default);
+  outline: none;
+}
+
+.kbq-table-row-a9022f.kbq-table-hovered-be04d3 {
+  background-color: var(--kbq-states-background-transparent-hover);
+}
+
+.kbq-table-row-a9022f.kbq-table-pressed-fea60d {
+  background-color: var(--kbq-states-background-transparent-active);
+}
+
+.kbq-table-row-a9022f.kbq-table-selected-95ebb7 {
+  background-color: var(--kbq-background-theme-less);
+}
+
+.kbq-table-row-a9022f.kbq-table-selected-95ebb7:where(.kbq-table-hovered-be04d3) {
+  background-color: var(--kbq-states-background-theme-less-hover);
+}
+
+.kbq-table-row-a9022f.kbq-table-selected-95ebb7:where(.kbq-table-pressed-fea60d) {
+  background-color: var(--kbq-states-background-theme-less-active);
+}
+
+.kbq-table-row-a9022f.kbq-table-disabled-16f6ce {
+  cursor: not-allowed;
+  opacity: .3;
+  background-color: #0000;
+}
+
+.kbq-table-row-a9022f.kbq-table-disabled-16f6ce:where(.kbq-table-selected-95ebb7) {
+  background-color: var(--kbq-background-theme-less);
+}
+
+.kbq-table-row-a9022f:last-child .kbq-table-cell-728c41 {
+  border-block-end: none;
+}
+
+.kbq-table-header-cell-34e3fa {
+  box-sizing: border-box;
+  cursor: default;
+  padding: var(--table-header-cell-padding);
+  color: var(--table-header-cell-color);
+  border-block-end: var(--table-border);
+  outline: none;
+}
+
+.kbq-table-focusVisible-0bcc1d {
+  outline-offset: -2px;
+  outline: 2px solid var(--kbq-states-line-focus-theme);
+}
+
+.kbq-table-top-53f823 {
+  vertical-align: top;
+}
+
+.kbq-table-baseline-bb5fa5 {
+  vertical-align: baseline;
+}
+
+.kbq-table-middle-5cae59 {
+  vertical-align: middle;
+}
+
+.kbq-table-bottom-e6ddd9 {
+  vertical-align: bottom;
+}
+
+.kbq-table-sub-4497f9 {
+  vertical-align: sub;
+}
+
+.kbq-table-text-top-5c06c5 {
+  vertical-align: text-top;
+}
 .kbq-spacing-mbs_0-be7021 {
   margin-block-start: 0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koobiq/react-components",
-  "version": "0.0.1-beta.24",
+  "version": "0.0.1-beta.25",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -27,10 +27,10 @@
     "@koobiq/design-tokens": "^3.12.1",
     "@types/react-transition-group": "^4.4.12",
     "react-transition-group": "^4.4.5",
-    "@koobiq/logger": "0.0.1-beta.24",
-    "@koobiq/react-icons": "0.0.1-beta.24",
-    "@koobiq/react-primitives": "0.0.1-beta.24",
-    "@koobiq/react-core": "0.0.1-beta.24"
+    "@koobiq/logger": "0.0.1-beta.25",
+    "@koobiq/react-core": "0.0.1-beta.25",
+    "@koobiq/react-icons": "0.0.1-beta.25",
+    "@koobiq/react-primitives": "0.0.1-beta.25"
   },
   "peerDependencies": {
     "@koobiq/design-tokens": "^3.11.2",