@astryxdesign/core 0.0.0-bootstrap.0 → 0.1.0-canary.08d4cf4

package/dist/Table/plugins/sortable/useTableSortable.js

@@ -0,0 +1,266 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file useTableSortable.tsx
+ * @input React, types, Icon, theme tokens
+ * @output Exports useTableSortable hook and sort-related types
+ * @position Sortable plugin; consumed by Table via plugins prop
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/Table/Table.doc.mjs (sort documentation)
+ * - /packages/core/src/Table/index.ts (exports)
+ */
+import { useRef, useMemo } from 'react';
+import * as stylex from '@stylexjs/stylex';
+import "../../../theme/tokens.stylex.js";
+import { colorVars, spacingVars, radiusVars } from "../../../theme/tokens.stylex.js";
+import { Icon } from "../../../Icon/index.js";
+
+// =============================================================================
+// Sort Types
+// =============================================================================
+
+/**
+ * Sort direction for a single column.
+ */
+
+/**
+ * A single sort entry in the sort state array.
+ */
+
+/**
+ * Complete sort state — an ordered array of sort entries.
+ * The first entry is the primary sort; subsequent entries are tiebreakers.
+ * Empty array = no sort applied.
+ *
+ * @example
+ * ```
+ * const sort: TableSortState = [
+ *   { sortKey: 'name', direction: 'ascending' },
+ *   { sortKey: 'age', direction: 'descending' },
+ * ];
+ * ```
+ */
+
+// =============================================================================
+// Hook Config
+// =============================================================================
+
+/**
+ * Configuration for useTableSortable.
+ *
+ * Follows Astryx headless plugin conventions: the consumer owns all state
+ * and provides callbacks. The plugin never holds internal sort state.
+ *
+ * @template TSortKey - Union of valid sort key strings
+ *
+ * @example
+ * ```
+ * const [sort, setSort] = useState<TableSortState>([
+ *   { sortKey: 'name', direction: 'ascending' },
+ * ]);
+ * const sortPlugin = useTableSortable({ sort, onSortChange: setSort });
+ * <Table plugins={{ sort: sortPlugin }} columns={columns} data={data} />
+ * ```
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; // =============================================================================
+// Styles
+// =============================================================================
+// =============================================================================
+// Helpers
+// =============================================================================
+
+function resolveSortKey(column) {
+  const {
+    sortable
+  } = column;
+  if (!sortable) {
+    return null;
+  }
+  if (sortable === true) {
+    return column.key;
+  }
+  return sortable.sortKey ?? column.key;
+}
+function getHeaderLabel(column) {
+  const {
+    header
+  } = column;
+  if (typeof header === 'string') {
+    return header;
+  }
+  return column.key;
+}
+function buildAriaLabel(column, direction, rank, total) {
+  const label = getHeaderLabel(column);
+  if (direction == null) {
+    return `Sort by ${label}`;
+  }
+  let ariaLabel = `Sort by ${label}, sorted ${direction}`;
+  if (rank != null && total > 1) {
+    ariaLabel += `, priority ${rank} of ${total}`;
+  }
+  return ariaLabel;
+}
+function getNextDirection(current, allowUnsortedState) {
+  if (current == null) {
+    return 'ascending';
+  }
+  if (current === 'ascending') {
+    return 'descending';
+  }
+  // current === 'descending'
+  return allowUnsortedState ? null : 'ascending';
+}
+
+// =============================================================================
+// Sort Header Button Component
+// =============================================================================
+
+function SortHeaderButton({
+  column,
+  children,
+  configRef
+}) {
+  const config = configRef.current;
+  const sortKey = resolveSortKey(column) ?? '';
+  const entryIndex = config.sort.findIndex(e => e.sortKey === sortKey);
+  const entry = entryIndex >= 0 ? config.sort[entryIndex] : null;
+  const direction = entry?.direction ?? null;
+  const isMultiSort = config.isMultiSortEnabled === true && config.sort.length > 1;
+  const rank = isMultiSort && entryIndex >= 0 ? entryIndex + 1 : null;
+  const iconName = direction === 'ascending' ? 'arrowUp' : direction === 'descending' ? 'arrowDown' : 'arrowsUpDown';
+  const ariaLabel = buildAriaLabel(column, direction, rank, config.sort.length);
+  const handleClick = e => {
+    const cfg = configRef.current;
+    const isShift = e.shiftKey && cfg.isMultiSortEnabled;
+    const allowUnsorted = cfg.allowUnsortedState ?? true;
+    if (isShift) {
+      // Multi-sort: toggle in place or append
+      const idx = cfg.sort.findIndex(s => s.sortKey === sortKey);
+      if (idx >= 0) {
+        const nextDir = getNextDirection(cfg.sort[idx].direction, allowUnsorted);
+        if (nextDir == null) {
+          // Remove from array
+          const newSort = [...cfg.sort];
+          newSort.splice(idx, 1);
+          cfg.onSortChange(newSort);
+        } else {
+          const newSort = [...cfg.sort];
+          newSort[idx] = {
+            ...newSort[idx],
+            direction: nextDir
+          };
+          cfg.onSortChange(newSort);
+        }
+      } else {
+        // Append new entry
+        cfg.onSortChange([...cfg.sort, {
+          sortKey,
+          direction: 'ascending'
+        }]);
+      }
+    } else {
+      // Single-sort: replace entire array
+      const currentEntry = cfg.sort.find(s => s.sortKey === sortKey);
+      const nextDir = getNextDirection(currentEntry?.direction ?? null, allowUnsorted);
+      if (nextDir == null) {
+        cfg.onSortChange([]);
+      } else {
+        cfg.onSortChange([{
+          sortKey,
+          direction: nextDir
+        }]);
+      }
+    }
+  };
+  return /*#__PURE__*/_jsxs("button", {
+    type: "button",
+    ...{
+      className: "x78zum5 x6s0dn4 xzye2dw x1717udv x1ghz6dp x1ypdohk xln7xf2 x1heor9g xh8yej3 x5yr21d x16tdsg8 x1a2a7pz x17nn4n9 x1hl8ikr xx3sua9"
+    },
+    "aria-label": ariaLabel,
+    onClick: handleClick,
+    children: [/*#__PURE__*/_jsx("span", {
+      children: children
+    }), /*#__PURE__*/_jsx("span", {
+      ...{
+        0: {
+          className: "x3nfvp2 x3onkmb xof6bs x25t5g8"
+        },
+        1: {
+          className: "x3nfvp2"
+        }
+      }[!!(direction != null) << 0],
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: iconName,
+        size: "xsm",
+        color: direction != null ? 'accent' : 'secondary'
+      })
+    }), rank != null && /*#__PURE__*/_jsx("span", {
+      ...{
+        className: "x1k6wstc xo5v014 xqwr325"
+      },
+      "aria-hidden": "true",
+      children: rank
+    })]
+  });
+}
+
+// =============================================================================
+// Hook
+// =============================================================================
+
+/**
+ * useTableSortable — table plugin for column sorting.
+ *
+ * Returns a stable TablePlugin<T> that transforms header cells to add
+ * clickable sort indicators. Follows the headless pattern: consumer owns
+ * sort state, plugin provides UI and interaction.
+ *
+ * @example
+ * ```
+ * const [sort, setSort] = useState<TableSortState>([]);
+ * const sortPlugin = useTableSortable({ sort, onSortChange: setSort });
+ * <Table
+ *   data={users}
+ *   columns={[
+ *     { key: 'name', header: 'Name', sortable: true },
+ *     { key: 'age', header: 'Age', sortable: true },
+ *   ]}
+ *   plugins={{ sort: sortPlugin }}
+ * />
+ * ```
+ */
+export function useTableSortable(config) {
+  const configRef = useRef(config);
+  configRef.current = config;
+  return useMemo(() => ({
+    transformHeaderCell(props, column) {
+      const sortKey = resolveSortKey(column);
+      if (sortKey == null) {
+        return props;
+      }
+
+      // Find sort entry for this column
+      const cfg = configRef.current;
+      const entry = cfg.sort.find(e => e.sortKey === sortKey);
+      return {
+        ...props,
+        htmlProps: {
+          ...props.htmlProps,
+          ...(entry != null ? {
+            'aria-sort': entry.direction
+          } : {})
+        },
+        content: /*#__PURE__*/_jsx(SortHeaderButton, {
+          column: column,
+          configRef: configRef,
+          children: props.content
+        })
+      };
+    }
+  }), []);
+}

package/dist/Table/plugins/sortable/useTableSortableState.d.ts

@@ -0,0 +1,109 @@
+import type { TableSortState, UseTableSortableConfig } from './useTableSortable';
+/**
+ * Custom comparator for a single sort key.
+ * Receives two row values and returns a standard comparison number.
+ * Direction (ascending/descending) is applied automatically by the hook —
+ * comparators should always sort in ascending order.
+ */
+export type TableSortComparator<T> = (a: T, b: T) => number;
+/**
+ * Configuration for useTableSortableState.
+ *
+ * @template T - The row data type
+ * @template TSortKey - Union of valid sort key strings
+ *
+ * @example
+ * ```
+ * const { sortedData, sortConfig } = useTableSortableState({
+ *   data: users,
+ *   defaultSort: [{ sortKey: 'name', direction: 'ascending' }],
+ * });
+ * const sortPlugin = useTableSortable(sortConfig);
+ * <Table data={sortedData} plugins={{ sort: sortPlugin }} />
+ * ```
+ */
+export interface UseTableSortableStateConfig<T extends Record<string, unknown>, TSortKey extends string = string> {
+    /**
+     * The data array to sort.
+     * The hook returns a new sorted copy — the original is never mutated.
+     */
+    data: T[];
+    /**
+     * Initial sort state for uncontrolled mode.
+     * Ignored when `sort` is provided.
+     * @default []
+     */
+    defaultSort?: TableSortState<TSortKey>;
+    /**
+     * Controlled sort state. When provided, the hook uses this instead of
+     * internal state. Must be paired with `onSortChange`.
+     */
+    sort?: TableSortState<TSortKey>;
+    /**
+     * Called when the sort state changes. Required when `sort` is provided.
+     */
+    onSortChange?: (sort: TableSortState<TSortKey>) => void;
+    /**
+     * Custom comparators per sort key.
+     * Keys are sort key strings; values are comparator functions that receive
+     * two row items. Comparators should sort ascending — the hook flips the
+     * sign for descending.
+     *
+     * For keys not in this map, the hook falls back to `localeCompare` with
+     * `{ numeric: true }` on the stringified values.
+     *
+     * @example
+     * ```
+     * comparators: {
+     *   age: (a, b) => a.age - b.age,
+     *   name: (a, b) => a.name.localeCompare(b.name),
+     * }
+     * ```
+     */
+    comparators?: Partial<Record<TSortKey, TableSortComparator<T>>>;
+    /**
+     * Allow returning to unsorted state.
+     * Passed through to the sortable plugin config.
+     * @default true
+     */
+    allowUnsortedState?: boolean;
+    /**
+     * Enable multi-sort via modifier key.
+     * Passed through to the sortable plugin config.
+     * @default false
+     */
+    isMultiSortEnabled?: boolean;
+}
+export interface UseTableSortableStateResult<T extends Record<string, unknown>, TSortKey extends string = string> {
+    /** Sorted copy of the input data. Memoized — stable when sort state and data don't change. */
+    sortedData: T[];
+    /** Current sort state. */
+    sort: TableSortState<TSortKey>;
+    /** Ready-to-use config for useTableSortable. */
+    sortConfig: UseTableSortableConfig<TSortKey>;
+    /**
+     * Apply the current sort state to arbitrary data.
+     * Useful when you have multiple data sources or need to sort a subset.
+     */
+    applySort: (data: T[]) => T[];
+}
+/**
+ * useTableSortableState — manages sort state and applies local sort to data.
+ *
+ * Convenience layer over useTableSortable. Owns sort state internally
+ * (or accepts controlled state), sorts the data, and produces a ready-to-use
+ * config for the headless sortable plugin.
+ *
+ * @example
+ * ```
+ * const { sortedData, sortConfig } = useTableSortableState({
+ *   data: employees,
+ *   defaultSort: [{ sortKey: 'name', direction: 'ascending' }],
+ *   comparators: { age: (a, b) => a.age - b.age },
+ * });
+ * const sortPlugin = useTableSortable(sortConfig);
+ * <Table data={sortedData} columns={columns} plugins={{ sort: sortPlugin }} />
+ * ```
+ */
+export declare function useTableSortableState<T extends Record<string, unknown>, TSortKey extends string = string>(config: UseTableSortableStateConfig<T, TSortKey>): UseTableSortableStateResult<T, TSortKey>;
+//# sourceMappingURL=useTableSortableState.d.ts.map

package/dist/Table/plugins/sortable/useTableSortableState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableSortableState.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/sortable/useTableSortableState.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EACV,cAAc,EACd,sBAAsB,EACvB,MAAM,oBAAoB,CAAC;AAM5B;;;;;GAKG;AACH,MAAM,MAAM,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,MAAM,CAAC;AAqB5D;;;;;;;;;;;;;;;GAeG;AACH,MAAM,WAAW,2BAA2B,CAC1C,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACjC,QAAQ,SAAS,MAAM,GAAG,MAAM;IAEhC;;;OAGG;IACH,IAAI,EAAE,CAAC,EAAE,CAAC;IAEV;;;;OAIG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAEvC;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAEhC;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC;IAExD;;;;;;;;;;;;;;;;OAgBG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,QAAQ,EAAE,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAEhE;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAMD,MAAM,WAAW,2BAA2B,CAC1C,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACjC,QAAQ,SAAS,MAAM,GAAG,MAAM;IAEhC,8FAA8F;IAC9F,UAAU,EAAE,CAAC,EAAE,CAAC;IAEhB,0BAA0B;IAC1B,IAAI,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAE/B,gDAAgD;IAChD,UAAU,EAAE,sBAAsB,CAAC,QAAQ,CAAC,CAAC;IAE7C;;;OAGG;IACH,SAAS,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;CAC/B;AA0ED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,qBAAqB,CACnC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACjC,QAAQ,SAAS,MAAM,GAAG,MAAM,EAEhC,MAAM,EAAE,2BAA2B,CAAC,CAAC,EAAE,QAAQ,CAAC,GAC/C,2BAA2B,CAAC,CAAC,EAAE,QAAQ,CAAC,CAsD1C"}

package/dist/Table/plugins/sortable/useTableSortableState.js

@@ -0,0 +1,189 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file useTableSortableState.tsx
+ * @input React, TableSortState types
+ * @output Exports useTableSortableState hook and config types
+ * @position Sort state helper; manages sort state + applies local sort to data.
+ *   Pairs with useTableSortable (the headless sort plugin).
+ *
+ * Modeled after useTableSelectionState — a convenience layer that owns state
+ * and produces a ready-to-use config for the headless plugin.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/Table/plugins/sortable/index.ts (exports)
+ * - /packages/core/src/Table/Table.doc.mjs (sort documentation)
+ */
+import { useState, useMemo, useCallback, useRef } from 'react';
+
+// =============================================================================
+// Comparator Types
+// =============================================================================
+
+/**
+ * Custom comparator for a single sort key.
+ * Receives two row values and returns a standard comparison number.
+ * Direction (ascending/descending) is applied automatically by the hook —
+ * comparators should always sort in ascending order.
+ */
+
+function toSortableString(value) {
+  if (value instanceof Date) {
+    return value.toISOString();
+  }
+  if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean' || typeof value === 'bigint') {
+    return String(value);
+  }
+  return '';
+}
+
+// =============================================================================
+// Hook Config
+// =============================================================================
+
+/**
+ * Configuration for useTableSortableState.
+ *
+ * @template T - The row data type
+ * @template TSortKey - Union of valid sort key strings
+ *
+ * @example
+ * ```
+ * const { sortedData, sortConfig } = useTableSortableState({
+ *   data: users,
+ *   defaultSort: [{ sortKey: 'name', direction: 'ascending' }],
+ * });
+ * const sortPlugin = useTableSortable(sortConfig);
+ * <Table data={sortedData} plugins={{ sort: sortPlugin }} />
+ * ```
+ */
+
+// =============================================================================
+// Hook Result
+// =============================================================================
+
+// =============================================================================
+// Default Comparator
+// =============================================================================
+
+function defaultCompare(a, b, sortKey) {
+  const aVal = a[sortKey];
+  const bVal = b[sortKey];
+
+  // null/undefined sort to the end
+  if (aVal == null && bVal == null) {
+    return 0;
+  }
+  if (aVal == null) {
+    return 1;
+  }
+  if (bVal == null) {
+    return -1;
+  }
+
+  // number fast path
+  if (typeof aVal === 'number' && typeof bVal === 'number') {
+    return aVal - bVal;
+  }
+
+  // string comparison with numeric collation
+  return toSortableString(aVal).localeCompare(toSortableString(bVal), undefined, {
+    numeric: true
+  });
+}
+
+// =============================================================================
+// Sort Logic
+// =============================================================================
+
+function sortData(data, sortState, comparators) {
+  if (sortState.length === 0) {
+    return data;
+  }
+  return [...data].sort((a, b) => {
+    for (const entry of sortState) {
+      const {
+        sortKey,
+        direction
+      } = entry;
+      const customCmp = comparators?.[sortKey];
+      const cmp = customCmp ? customCmp(a, b) : defaultCompare(a, b, sortKey);
+      if (cmp !== 0) {
+        return direction === 'ascending' ? cmp : -cmp;
+      }
+    }
+    return 0;
+  });
+}
+
+// =============================================================================
+// Hook
+// =============================================================================
+
+/**
+ * useTableSortableState — manages sort state and applies local sort to data.
+ *
+ * Convenience layer over useTableSortable. Owns sort state internally
+ * (or accepts controlled state), sorts the data, and produces a ready-to-use
+ * config for the headless sortable plugin.
+ *
+ * @example
+ * ```
+ * const { sortedData, sortConfig } = useTableSortableState({
+ *   data: employees,
+ *   defaultSort: [{ sortKey: 'name', direction: 'ascending' }],
+ *   comparators: { age: (a, b) => a.age - b.age },
+ * });
+ * const sortPlugin = useTableSortable(sortConfig);
+ * <Table data={sortedData} columns={columns} plugins={{ sort: sortPlugin }} />
+ * ```
+ */
+export function useTableSortableState(config) {
+  const {
+    data,
+    defaultSort = [],
+    sort: controlledSort,
+    onSortChange: controlledOnSortChange,
+    comparators,
+    allowUnsortedState,
+    isMultiSortEnabled
+  } = config;
+
+  // Internal state (used in uncontrolled mode)
+  const [internalSort, setInternalSort] = useState(defaultSort);
+
+  // Resolve controlled vs uncontrolled
+  const isControlled = controlledSort !== undefined;
+  const sort = isControlled ? controlledSort : internalSort;
+  const onSortChange = isControlled ? controlledOnSortChange ?? (() => {}) : setInternalSort;
+
+  // Stable ref for comparators to avoid re-sorting on inline object identity changes
+  const comparatorsRef = useRef(comparators);
+  comparatorsRef.current = comparators;
+
+  // Stable ref for onSortChange to avoid recreating sortConfig on inline callback identity changes
+  const onSortChangeRef = useRef(onSortChange);
+  onSortChangeRef.current = onSortChange;
+
+  // Sorted data — memoized on sort state + data identity
+  const sortedData = useMemo(() => sortData(data, sort, comparatorsRef.current), [data, sort]);
+
+  // applySort — lets consumers sort arbitrary data with the current state
+  const applySort = useCallback(inputData => sortData(inputData, sort, comparatorsRef.current), [sort]);
+
+  // Config ready for useTableSortable
+  const sortConfig = useMemo(() => ({
+    sort,
+    onSortChange: onSortChangeRef.current,
+    allowUnsortedState,
+    isMultiSortEnabled
+  }), [sort, allowUnsortedState, isMultiSortEnabled]);
+  return {
+    sortedData,
+    sort,
+    sortConfig,
+    applySort
+  };
+}

package/dist/Table/table.stylex.d.ts

@@ -0,0 +1,78 @@
+/**
+ * @file table.stylex.ts
+ * @input StyleX, theme tokens
+ * @output Shared table styles used by TableCell, TableHeaderCell, TableRow
+ * @position Utility styles; consumed by cell and row components
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/Table/TableCell.tsx
+ * - /packages/core/src/Table/TableHeaderCell.tsx
+ * - /packages/core/src/Table/TableRow.tsx
+ */
+import * as stylex from '@stylexjs/stylex';
+/**
+ * Scoped marker for table row ancestor selectors.
+ *
+ * Applied to each `<tr>` via TableRow so that cell-level
+ * `stylex.when.ancestor(':last-child', tableRowMarker)` only matches
+ * the parent row — not other ancestors like `<tbody>` or `<table>`.
+ */
+export declare const tableRowMarker: ReturnType<typeof stylex.defineMarker>;
+/**
+ * Overflow truncation for table cells.
+ *
+ * Applied at the <td>/<th> level when textOverflow is 'truncate'.
+ * For data-driven tables in truncate mode, the default renderer wraps
+ * content in <Text maxLines={1}> for smart tooltips that only appear
+ * when text is actually overflowing.
+ */
+export declare const overflowStyles: Readonly<{
+    readonly cell: Readonly<{
+        readonly overflow: stylex.StyleXClassNameFor<"overflow", "hidden">;
+        readonly textOverflow: stylex.StyleXClassNameFor<"textOverflow", "ellipsis">;
+        readonly whiteSpace: stylex.StyleXClassNameFor<"whiteSpace", "nowrap">;
+        readonly maxWidth: stylex.StyleXClassNameFor<"maxWidth", "0">;
+    }>;
+}>;
+/**
+ * Wrap styles for table cells.
+ *
+ * Applied at the <td>/<th> level when textOverflow is 'wrap'.
+ * Text wraps naturally and the row grows taller to fit. No content is hidden.
+ */
+export declare const wrapStyles: Readonly<{
+    readonly cell: Readonly<{
+        readonly overflow: stylex.StyleXClassNameFor<"overflow", "hidden">;
+        readonly overflowWrap: stylex.StyleXClassNameFor<"overflowWrap", "break-word">;
+        readonly wordBreak: stylex.StyleXClassNameFor<"wordBreak", "break-word">;
+        readonly maxWidth: stylex.StyleXClassNameFor<"maxWidth", "0">;
+    }>;
+}>;
+/**
+ * Container edge compensation for table cells.
+ *
+ * When a table is inside a Card, Section, or Layout area, the table
+ * element applies negative inline margins to bleed edge-to-edge
+ * (see Table.tsx containerBleed style). These styles ensure the
+ * first and last columns' outer padding aligns with the container's
+ * content inset, with a minimum of --spacing-2 (8px).
+ *
+ * Each density variant uses its own paddingInline as the fallback,
+ * so standalone tables (where --container-padding-inline-start/end are unset)
+ * keep their normal density-based cell padding unchanged.
+ */
+export declare const containerEdgeStyles: Readonly<{
+    readonly compact: Readonly<{
+        readonly paddingInlineStart: stylex.StyleXClassNameFor<"paddingInlineStart", `max(var(--container-padding-inline-start, ${stylex.StyleXVar<"8px">}), ${stylex.StyleXVar<"8px">})` | null>;
+        readonly paddingInlineEnd: stylex.StyleXClassNameFor<"paddingInlineEnd", `max(var(--container-padding-inline-end, ${stylex.StyleXVar<"8px">}), ${stylex.StyleXVar<"8px">})` | null>;
+    }>;
+    readonly balanced: Readonly<{
+        readonly paddingInlineStart: stylex.StyleXClassNameFor<"paddingInlineStart", `max(var(--container-padding-inline-start, ${stylex.StyleXVar<"12px">}), ${stylex.StyleXVar<"8px">})` | null>;
+        readonly paddingInlineEnd: stylex.StyleXClassNameFor<"paddingInlineEnd", `max(var(--container-padding-inline-end, ${stylex.StyleXVar<"12px">}), ${stylex.StyleXVar<"8px">})` | null>;
+    }>;
+    readonly spacious: Readonly<{
+        readonly paddingInlineStart: stylex.StyleXClassNameFor<"paddingInlineStart", `max(var(--container-padding-inline-start, ${stylex.StyleXVar<"16px">}), ${stylex.StyleXVar<"8px">})` | null>;
+        readonly paddingInlineEnd: stylex.StyleXClassNameFor<"paddingInlineEnd", `max(var(--container-padding-inline-end, ${stylex.StyleXVar<"16px">}), ${stylex.StyleXVar<"8px">})` | null>;
+    }>;
+}>;
+//# sourceMappingURL=table.stylex.d.ts.map

package/dist/Table/table.stylex.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.stylex.d.ts","sourceRoot":"","sources":["../../src/Table/table.stylex.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAG3C;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,EAAE,UAAU,CAAC,OAAO,MAAM,CAAC,YAAY,CAC3C,CAAC;AAExB;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc;;;;;;;EAOzB,CAAC;AAEH;;;;;GAKG;AACH,eAAO,MAAM,UAAU;;;;;;;EAOrB,CAAC;AAEH;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;EA+B9B,CAAC"}