@photon-ai/pho-ui 2.6.0 → 2.7.1

package/dist/src/components/data-table/data-table.d.ts

@@ -0,0 +1,227 @@
+import { ComponentProps, ReactNode, Ref } from 'react';
+import { ColumnDef, RowData, SortingState } from '@tanstack/react-table';
+/**
+ * DataTable — a table of records with column semantics: sortable headers,
+ * aligned cells, rows that are links into a subpage. TanStack Table (v9)
+ * does the thinking — column defs, sorting, row identity — and renders
+ * nothing; every pixel here is Pho's.
+ *
+ * Design notes:
+ * - The surface is `BasicPage.Card`'s: hairline border, `base` radius, the
+ *   page's primary fill, hairline rules between rows. A table is a card of
+ *   rows that happen to line up in columns, so it sits in a page's `Stack`
+ *   as any card does.
+ * - Header cells are description ink at body size — never small caps, never
+ *   bold. Hierarchy comes from ink alone; the header is a label row, not a
+ *   banner.
+ * - A sortable header is a button inside the cell: the label and its
+ *   indicator (`IconSelector` at rest, a chevron once sorted). `aria-sort`
+ *   sits on the `th`.
+ * - Rows that navigate stretch one link across the row (the first cell's
+ *   link, extended with a pseudo-element), so the whole row is one target
+ *   for pointer and one stop for keyboard. Hover washes the row; the row
+ *   whose page is open beside the table (`current`) keeps the wash — the
+ *   same cue `BasicPage.RowLink` gives under `aria-current`.
+ * - Numbers align to the end with tabular figures (`meta.align: "end"`).
+ * - `search` is one box over every column — plain contains matching, and
+ *   the body says when nothing matches. In a page, `BasicPage.Search` in
+ *   the section header adopts the box; alone, the table keeps one in a
+ *   toolbar row inside its frame. Server-side search keeps its own box
+ *   outside.
+ * - A wide table scrolls sideways inside its own frame; the page never does.
+ *   `contain: inline-size` keeps the table's intrinsic width out of the
+ *   page's — a host that sizes to content (a scroll area's fit-content
+ *   pane, a grid's auto column) would otherwise grow to the widest row.
+ *
+ * Reach for it when a list needs column semantics — sorting, aligned
+ * figures, several fields side by side. A list where each row is one
+ * label and a chevron stays `BasicPage.RowLink`.
+ */
+/** Column metadata a `DataTable` understands. */
+export interface DataTableColumnMeta {
+    /** Cell alignment — `end` for figures (right-aligned, tabular). */
+    align?: "start" | "end";
+}
+/**
+ * The feature set every `DataTable` runs on — sorting with the stock sort
+ * functions, the column meta above. Fixed, so column definitions written
+ * once fit every table.
+ */
+declare const features: {
+    rowSortingFeature: import('@tanstack/react-table').TableFeature;
+    rowSelectionFeature: import('@tanstack/react-table').TableFeature;
+    columnFilteringFeature: import('@tanstack/react-table').TableFeature;
+    globalFilteringFeature: import('@tanstack/react-table').TableFeature;
+    sortedRowModel: (table: import('@tanstack/react-table').Table<any, any>) => () => import('@tanstack/react-table').RowModel<any, any>;
+    filteredRowModel: (table: import('@tanstack/react-table').Table<any, any>) => () => import('@tanstack/react-table').RowModel<any, any>;
+    filterFns: {
+        includesString: import('@tanstack/react-table').CreatedFilterFn<any, any>;
+    };
+    sortFns: {
+        alphanumeric: import('@tanstack/react-table').CreatedSortFn<any, any>;
+        basic: import('@tanstack/react-table').CreatedSortFn<any, any>;
+        datetime: import('@tanstack/react-table').CreatedSortFn<any, any>;
+        text: import('@tanstack/react-table').CreatedSortFn<any, any>;
+    };
+    columnMeta: DataTableColumnMeta;
+};
+export type DataTableFeatures = typeof features;
+/** A column definition for a `DataTable` of `TData` rows. */
+export type DataTableColumn<TData extends RowData, TValue = unknown> = ColumnDef<DataTableFeatures, TData, TValue>;
+/**
+ * The column helper, bound to the table's feature set — `accessor`,
+ * `display`, `group`, and `columns` to collect them with their types
+ * intact.
+ *
+ * @example
+ * const col = createColumns<Request>();
+ * const columns = col.columns([
+ *   col.accessor("actor", { header: "Actor" }),
+ *   col.accessor("amount", { header: "Amount", meta: { align: "end" } }),
+ * ]);
+ */
+export declare function createColumns<TData extends RowData>(): import('@tanstack/react-table').ColumnHelper<{
+    rowSortingFeature: import('@tanstack/react-table').TableFeature;
+    rowSelectionFeature: import('@tanstack/react-table').TableFeature;
+    columnFilteringFeature: import('@tanstack/react-table').TableFeature;
+    globalFilteringFeature: import('@tanstack/react-table').TableFeature;
+    sortedRowModel: (table: import('@tanstack/react-table').Table<any, any>) => () => import('@tanstack/react-table').RowModel<any, any>;
+    filteredRowModel: (table: import('@tanstack/react-table').Table<any, any>) => () => import('@tanstack/react-table').RowModel<any, any>;
+    filterFns: {
+        includesString: import('@tanstack/react-table').CreatedFilterFn<any, any>;
+    };
+    sortFns: {
+        alphanumeric: import('@tanstack/react-table').CreatedSortFn<any, any>;
+        basic: import('@tanstack/react-table').CreatedSortFn<any, any>;
+        datetime: import('@tanstack/react-table').CreatedSortFn<any, any>;
+        text: import('@tanstack/react-table').CreatedSortFn<any, any>;
+    };
+    columnMeta: DataTableColumnMeta;
+}, TData>;
+export interface DataTableProps<TData extends RowData> extends Omit<ComponentProps<"div">, "children"> {
+    columns: ReadonlyArray<DataTableColumn<TData, any>>;
+    data: ReadonlyArray<TData>;
+    /**
+     * A row's identity — what `current` is matched against, and what keeps a
+     * row itself across sorts. Defaults to the row's `id` field, else its
+     * index.
+     */
+    getRowId?: (row: TData) => string;
+    /**
+     * Rows that navigate: each row is one link into a subpage, through the
+     * host's `LinkProvider`. Beside a `BasicPage.Aside`, the subpage opens
+     * next to the table.
+     */
+    rowHref?: (row: TData) => string;
+    /** The row whose page is open (its id) — it keeps the wash. */
+    current?: string | null;
+    /**
+     * Sorting is on for every accessor column (`enableSorting: false` on a
+     * column turns it off there). Uncontrolled by default; `defaultSort`
+     * seeds it. Pass `sort` with `onSortChange` to own it — the way to sort
+     * on the server.
+     */
+    defaultSort?: SortingState;
+    sort?: SortingState;
+    onSortChange?: (sort: SortingState) => void;
+    /**
+     * A search box on the table — `true`, or the placeholder it should
+     * show. One box searches every column (a column opts out with
+     * `enableGlobalFilter: false`); matching is a plain case-insensitive
+     * contains, on the client. With no matches the body says so. When the
+     * list doesn't all come down, keep the box outside and ask the server.
+     */
+    search?: boolean | string;
+    /**
+     * Controls in the frame's top band — a `BasicPage.Search` first, then a
+     * filter or two. The band is part of the table (one surface, a hairline
+     * above the header row), so nothing floats over the page and the
+     * spacing above and below is the frame's own. A `Search` here adopts
+     * the table's box the way a header one does.
+     */
+    toolbar?: ReactNode;
+    /**
+     * Row selection: hand either of these and rows grow a leading checkbox
+     * column. The header checkbox works the visible set — everything the
+     * search still shows — so select-all after a search means what it says;
+     * rows selected earlier and then hidden stay selected. `selected` is
+     * the selected ids (ids come from `getRowId`; pair with
+     * `onSelectedChange` to own the state); `onSelectedChange` alone
+     * listens while the table keeps it. The page renders its own bulk
+     * actions from the ids — the table only keeps the score.
+     */
+    selected?: readonly string[];
+    onSelectedChange?: (ids: string[]) => void;
+    /**
+     * File rows into labeled groups: return a label and the row renders
+     * under it, `null` and it stays in the main body. Groups follow the
+     * main body, in the order their labels first appear in `data`, each
+     * under a quiet label row — and only while they have rows, so a group
+     * a search empties simply leaves. Sorting orders rows within their
+     * group.
+     */
+    group?: (row: TData) => string | null;
+    /**
+     * Glide the frame's height when the rows change — a search narrowing,
+     * a filter, bones becoming rows. The height follows the content on the
+     * page spring instead of jumping; reserve it for tables whose rows
+     * change while mounted (same contract as `BasicPage.Card`'s).
+     */
+    animateHeight?: boolean;
+    /** Bones while the rows are on their way — `true` for five, or a count. */
+    loading?: boolean | number;
+    /** What the body says when there are no rows. */
+    empty?: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * A host that sizes itself around tables provides this; each table
+ * announces itself while mounted. `BasicPage.Root` runs wide when the
+ * page carries one and `width` was left unsaid.
+ */
+export declare const TableHostContext: import('react').Context<((present: boolean) => void) | null>;
+/** A searchable table's search, published for a header to adopt. */
+export interface TableSearchApi {
+    placeholder: string;
+    query: string;
+    setQuery: (query: string) => void;
+    /** Rows still showing after the current query. */
+    matched: number;
+    /** Rows in the list, before search. */
+    total: number;
+}
+interface TableSearchState {
+    api: TableSearchApi | null;
+    adopted: boolean;
+}
+/**
+ * The channel between a searchable table and a `BasicPage.Search` placed
+ * in a section header: the table publishes its search (placeholder,
+ * query, the setter); a mounted `Search` adopts it, and the table's own
+ * box yields. Provided by `BasicPage.Root`; a table outside any page
+ * keeps its built-in box. One searchable table per page — a later
+ * publisher takes the slot.
+ */
+export interface TableSearchStore {
+    get: () => TableSearchState;
+    subscribe: (listener: () => void) => () => void;
+    publish: (api: TableSearchApi | null) => void;
+    adopt: (adopted: boolean) => void;
+}
+export declare function createTableSearchStore(): TableSearchStore;
+export declare const TableSearchContext: import('react').Context<TableSearchStore | null>;
+export interface GhostSearchProps extends Omit<ComponentProps<"input">, "value" | "onChange" | "type" | "children"> {
+    value: string;
+    onChange: (value: string) => void;
+}
+/**
+ * The search's ghost face — a magnifier and a bare field, quiet ink on a
+ * text line, no box around it. What a table wears in its own toolbar
+ * band; `BasicPage.Search variant="ghost"` is the same face wherever a
+ * page wants it. Presentational: hand it the value and the setter.
+ */
+export declare function GhostSearch({ value, onChange, className, ...props }: GhostSearchProps): import("react").JSX.Element;
+/** Same chrome as `BasicPage.Card`, minus its dividers — rows draw their own. */
+declare const DATA_TABLE_SURFACE = "rounded-base border border-pho-secondary bg-pho-primary";
+declare function DataTable<TData extends RowData>({ columns, data, getRowId, rowHref, current, selected, onSelectedChange, defaultSort, sort, onSortChange, search, toolbar, group, animateHeight, loading, empty, className, ...props }: DataTableProps<TData>): import("react").JSX.Element;
+export { DataTable, DATA_TABLE_SURFACE };

package/dist/src/components/data-table/index.d.ts

@@ -0,0 +1,2 @@
+export { DataTable, DATA_TABLE_SURFACE, GhostSearch, type GhostSearchProps, TableHostContext, TableSearchContext, createTableSearchStore, type TableSearchApi, type TableSearchStore, createColumns, type DataTableProps, type DataTableColumn, type DataTableColumnMeta, type DataTableFeatures, } from './data-table';
+export type { SortingState } from '@tanstack/react-table';

package/dist/src/index.d.ts

@@ -6,6 +6,7 @@
  * This root barrel re-exports everything for convenience.
  */
 export * from './utils';
+export * from './motion';
 export * from './components/button';
 export * from './components/input';
 export * from './components/input-group';

package/dist/src/motion/index.d.ts

@@ -0,0 +1,149 @@
+/**
+ * The motion vocabulary — every animation in Pho speaks it. Five springs,
+ * three timings, two CSS eases, and a handful of distances cover the
+ * system; components import from here and add nothing of their own.
+ *
+ * The grammar:
+ * - **Arrive** on `SPRING_ENTRANCE` with `FADE_ENTRANCE` — content
+ *   surfaces, it doesn't slide in.
+ * - **Swap** on `FADE_SWAP`, displacement on `TRAVEL_LINEAR` — crossfades
+ *   ease out, travel is linear.
+ * - **Press** on the press springs — deeper mass for bigger surfaces.
+ * - **Follow** on `SPRING_SETTLE` — heights and reflows chase content.
+ */
+/**
+ * Pages arrive on this — the `Stack` entrance, `Reveal`, `Title` / `Header`
+ * enter, the Title ↔ Back morph, `Alert` / `Footer` height reveals.
+ * Measured off a 60fps iOS push: ~330ms, a long gentle glide, everything
+ * co-landing; essentially critically damped (overshoot would flash
+ * clipped content).
+ */
+export declare const SPRING_ENTRANCE: {
+    readonly type: "spring";
+    readonly stiffness: 400;
+    readonly damping: 40;
+};
+/**
+ * Layout follows content on this — `AnimatedHeight`, a command palette's
+ * rows gliding into new places. Stiffer than the entrance: reflow should
+ * settle before it reads as motion.
+ */
+export declare const SPRING_SETTLE: {
+    readonly type: "spring";
+    readonly stiffness: 640;
+    readonly damping: 50;
+};
+/**
+ * The press pulse for full-size surfaces — `Button`, a sidebar row.
+ * Framer source: `spring-physics 200 30 0.1`.
+ */
+export declare const SPRING_PRESS: {
+    readonly type: "spring";
+    readonly stiffness: 200;
+    readonly damping: 30;
+    readonly mass: 0.1;
+};
+/** The press pulse for small controls — toggles, checks; quick and light. */
+export declare const SPRING_PRESS_QUICK: {
+    readonly type: "spring";
+    readonly stiffness: 700;
+    readonly damping: 32;
+    readonly mass: 0.06;
+};
+/** The press pulse for inline triggers — a `Select` sitting in text. */
+export declare const SPRING_PRESS_INLINE: {
+    readonly type: "spring";
+    readonly stiffness: 1100;
+    readonly damping: 40;
+    readonly mass: 0.04;
+};
+/** The fade that rides `SPRING_ENTRANCE` — spans most of the glide. */
+export declare const FADE_ENTRANCE: {
+    readonly duration: 0.25;
+    readonly ease: "easeOut";
+};
+/**
+ * The swap — crossfading faces, a condensed bar arriving, a saved word,
+ * an aside changing pages. Fades ease out.
+ */
+export declare const FADE_SWAP: {
+    readonly duration: 0.2;
+    readonly ease: "easeOut";
+};
+/**
+ * Displacement — a bar's rise, a drawer's scope swap, a search box's
+ * width. Travel is linear: the eye reads speed changes as personality,
+ * and furniture has none.
+ */
+export declare const TRAVEL_LINEAR: {
+    readonly duration: 0.2;
+    readonly ease: "linear";
+};
+/** CSS pop-in for floating layers (menus, select popups) — slight overshoot. */
+export declare const EASE_POP = "cubic-bezier(0.34, 1.3, 0.64, 1)";
+/** CSS stack glide — toasts trading places (Kumo's curve). */
+export declare const EASE_STACK = "cubic-bezier(0.22, 1, 0.36, 1)";
+/** Rise distance for entrances — content surfaces from just below. */
+export declare const RISE_PX = 12;
+/** Rise distance for the condensed bar — it comes from nearer still. */
+export declare const BAR_RISE_PX = -8;
+/** Press depth for small controls. */
+export declare const PRESS_SCALE = 0.96;
+/** Press depth for rows and full-size surfaces — shallower. */
+export declare const PRESS_SCALE_ROW = 0.97;
+/** The blur budget — one breath of blur, everywhere it is used. */
+export declare const BLUR_PX = 1;
+/**
+ * The crossfade recipe — fade with a breath of blur, both ways. Spread
+ * onto a motion element inside `AnimatePresence`:
+ *
+ *     <motion.div {...fadeThroughBlur(reduceMotion)} />
+ *
+ * Under reduced motion the swap is instant and never blurs.
+ */
+export declare function fadeThroughBlur(reduceMotion?: boolean | null): {
+    readonly initial: {
+        readonly opacity: 0;
+        readonly filter: "blur(0px)" | "blur(1px)";
+    };
+    readonly animate: {
+        readonly opacity: 1;
+        readonly filter: "blur(0px)";
+    };
+    readonly exit: {
+        readonly opacity: 0;
+        readonly filter: "blur(0px)" | "blur(1px)";
+    };
+    readonly transition: {
+        readonly duration: 0.2;
+        readonly ease: "easeOut";
+    } | {
+        readonly duration: 0;
+    };
+};
+/**
+ * The entrance recipe — rise `RISE_PX` on `SPRING_ENTRANCE` while
+ * `FADE_ENTRANCE` brings the ink. What `Stack` and `Reveal` do; spread it
+ * onto a motion element for content that should arrive the same way.
+ */
+export declare function riseIn(reduceMotion?: boolean | null): {
+    readonly initial: false | {
+        readonly opacity: 0;
+        readonly y: 12;
+    };
+    readonly animate: {
+        readonly opacity: 1;
+        readonly y: 0;
+    };
+    readonly transition: {
+        readonly y: {
+            readonly type: "spring";
+            readonly stiffness: 400;
+            readonly damping: 40;
+        };
+        readonly opacity: {
+            readonly duration: 0.25;
+            readonly ease: "easeOut";
+        };
+    };
+};

package/dist/src/sections/basic-page/basic-page.d.ts

@@ -1,6 +1,7 @@
 import { AnchorHTMLAttributes, ComponentProps, ReactNode, Ref } from 'react';
 import { ButtonLinkProps, ButtonProps } from '../../components/button';
 import { Form as FormElement } from '../../components/form';
+import { DataTable } from '../../components/data-table';
 /** Bordered card that stacks rows with hairline dividers. */
 export declare const BASIC_PAGE_CARD = "rounded-base border border-pho-secondary bg-pho-primary divide-y divide-pho-secondary [&>:has(+[data-basic-page-alert])]:border-b-0";
 /**
@@ -71,12 +72,14 @@ export interface BasicPageRootProps extends ComponentProps<"div"> {
      */
     condense?: boolean;
     /**
-     * The content column's cap. `base` (default) is the 42rem reading
-     * column every settings page uses; `wide` opens it to 80rem for a page
-     * that is a list first — rows with several columns. Forms stay on
-     * `base`: across a wide row a label and its control drift out of one
-     * glance. Either width can host an `Aside` — the column keeps its cap
-     * beside the panel, and leftover space is margin, not content width.
+     * The content column's cap. `base` is the 42rem reading column every
+     * settings page uses; `wide` opens it to 80rem for a page that is a
+     * list first — rows with several columns. Left unsaid, the page sizes
+     * itself: `base`, until it carries a `Table` — records in columns run
+     * wide on their own. Forms stay on `base`: across a wide row a label
+     * and its control drift out of one glance. Either width can host an
+     * `Aside` — the column keeps its cap beside the panel, and leftover
+     * space is margin, not content width.
      */
     width?: "base" | "wide";
 }
@@ -192,7 +195,7 @@ export interface BasicPageStackProps extends Omit<ComponentProps<"div">, RevealM
  *
  * Static under reduced motion.
  */
-declare function Stack({ className, children, ...props }: BasicPageStackProps): import("react").JSX.Element;
+declare function Stack({ className, children, ref: forwardedRef, ...props }: BasicPageStackProps): import("react").JSX.Element;
 /**
  * Title + optional description pair. No gap between them — the block's
  * `gap-3` only applies between this header and the card.
@@ -222,6 +225,19 @@ declare function SectionTitle({ id, className, children, ...props }: ComponentPr
 declare function Description({ className, ...props }: ComponentProps<"p"> & {
     ref?: Ref<HTMLParagraphElement>;
 }): import("react").JSX.Element;
+/**
+ * How many rows the searchable table is showing — a `Description` that
+ * reads the table's search. Idle: "12 people." A query: "3 of 12."
+ * Renders nothing until a table with `search` is on the page. Put it in
+ * the `Header` under the section title.
+ */
+declare function TableCount({ one, other, ...props }: ComponentProps<"p"> & {
+    /** Singular noun — "1 person." */
+    one: string;
+    /** Plural noun — "12 people." */
+    other: string;
+    ref?: Ref<HTMLParagraphElement>;
+}): import("react").JSX.Element | null;
 /**
  * Optional caption below a section's `Card` (outside the card). One step
  * smaller than `Description` (`text-xs`). Not the card-internal dirty-state
@@ -687,9 +703,32 @@ export interface BasicPageAsideProps {
  * column cap beside the panel, and leftover space is margin.
  */
 declare function Aside({ open, placeholder, onClose, children }: BasicPageAsideProps): import('react').ReactPortal | null;
+/**
+ * The table's search, standing at the end of a section header — put it in
+ * the `Header` beside the title and it adopts the searchable table's box
+ * (the table then renders none of its own). On a header at least 36rem
+ * wide the box simply stands open: the header is a container, CSS
+ * decides, nothing is measured. On a narrower one a round button holds
+ * the place; clicking it opens the box — the width glides linearly, the
+ * page's travel — with focus landing inside. Emptied and blurred it
+ * glides shut and the button returns; Escape clears, blurs, and shuts.
+ * Renders nothing until a table with `search` is on the page.
+ */
+declare function Search({ variant, className, ...props }: ComponentProps<"div"> & {
+    /**
+     * The face. `box` (default) is the bordered field beside a section
+     * title — open on a wide header, a round button that glides it open on
+     * a narrow one. `ghost` is the table-chrome face: a magnifier and a
+     * bare field on the text line, no box — for a toolbar band or anywhere
+     * a boxed control would be noise; it flexes instead of folding.
+     */
+    variant?: "box" | "ghost";
+}): import("react").JSX.Element;
 export declare const BasicPage: {
     Root: typeof Root;
     Aside: typeof Aside;
+    Search: typeof Search;
+    Table: typeof DataTable;
     CondenseScope: typeof CondenseScope;
     Breadcrumbs: typeof Breadcrumbs;
     Crumb: typeof Crumb;
@@ -699,6 +738,7 @@ export declare const BasicPage: {
     Header: typeof Header;
     SectionTitle: typeof SectionTitle;
     Description: typeof Description;
+    TableCount: typeof TableCount;
     SectionFooter: typeof SectionFooter;
     Card: typeof Card;
     Item: typeof Item;

package/dist/src/sections/basic-page/index.d.ts

@@ -1 +1,2 @@
 export { BasicPage, formToasts, AUTO_SAVE_DELAY_MS, useCondense, useAutoSave, type BasicPageCondense, BASIC_PAGE_CARD, CONDENSE_BAR_ENTER, CONDENSE_BAR_TRAVEL, CONDENSE_BAR_RISE_PX, BASIC_PAGE_CALLOUT, BASIC_PAGE_ROW, BASIC_PAGE_ITEM, BASIC_PAGE_ITEM_PANEL, BASIC_PAGE_ITEM_PANEL_DIVIDED, type BasicPageRootProps, type BasicPageAsideProps, type BasicPageRowProps, type BasicPageRowLinkProps, type BasicPageBackProps, type BasicPageBreadcrumbsProps, type BasicPageCrumbProps, type BasicPageFooterProps, type BasicPageFormProps, type BasicPageFormErrors, type BasicPageItemPanelProps, } from './basic-page';
+export { createColumns, type DataTableColumn, type DataTableColumnMeta, type DataTableProps, type SortingState, } from '../../components/data-table';

package/dist/utils.js

@@ -1,15 +1,16 @@
 "use client";
-import { t as s } from "./chunks/cn-ChIgwEl3.js";
-import { n as t, r as e, t as a } from "./chunks/link-provider-9TFNyDqO.js";
-import { t as i } from "./chunks/resolve-variant-CcD8iG5l.js";
-import { n as p, r as P, t as R } from "./chunks/use-press-pulse-8iorQPsh.js";
+import { t as r } from "./chunks/cn-ChIgwEl3.js";
+import { t } from "./chunks/is-react-component-DSnjtBmo.js";
+import { t as m } from "./chunks/resolve-variant-CcD8iG5l.js";
+import { n as i, t as n } from "./chunks/link-provider-DXzDQ08N.js";
+import { n as P, r as R, t as S } from "./chunks/use-press-pulse-IbNstUT0.js";
 export {
-  R as CONTROL_PRESS_SCALE,
-  p as CONTROL_PRESS_SPRING,
-  a as LinkProvider,
-  s as cn,
-  e as isReactComponent,
-  i as resolveVariant,
-  t as useLinkComponent,
-  P as usePressPulse
+  S as CONTROL_PRESS_SCALE,
+  P as CONTROL_PRESS_SPRING,
+  n as LinkProvider,
+  r as cn,
+  t as isReactComponent,
+  m as resolveVariant,
+  i as useLinkComponent,
+  R as usePressPulse
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@photon-ai/pho-ui",
-  "version": "2.6.0",
+  "version": "2.7.1",
   "description": "Pho Design System — Photon's React component library, built on Base UI",
   "license": "UNLICENSED",
   "repository": {
@@ -33,6 +33,10 @@
       "types": "./dist/src/components/button/index.d.ts",
       "import": "./dist/components/button.js"
     },
+    "./components/data-table": {
+      "types": "./dist/src/components/data-table/index.d.ts",
+      "import": "./dist/components/data-table.js"
+    },
     "./components/input": {
       "types": "./dist/src/components/input/index.d.ts",
       "import": "./dist/components/input.js"
@@ -233,6 +237,10 @@
       "types": "./dist/src/utils/index.d.ts",
       "import": "./dist/utils.js"
     },
+    "./motion": {
+      "types": "./dist/src/motion/index.d.ts",
+      "import": "./dist/motion.js"
+    },
     "./primitives": {
       "types": "./dist/src/primitives/index.d.ts",
       "import": "./dist/primitives.js"
@@ -430,6 +438,7 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.7.0",
+    "@tanstack/react-table": "^9.2.3",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "country-flag-icons": "^1.6.20",

package/dist/chunks/animated-height-C2eQstGy.js

@@ -1,51 +0,0 @@
-"use client";
-import { useEffect as v, useRef as a } from "react";
-import { jsx as m } from "react/jsx-runtime";
-import { animate as g, motion as R, useMotionValue as x, useReducedMotion as H } from "motion/react";
-var M = {
-  type: "spring",
-  stiffness: 640,
-  damping: 50
-};
-function y({ className: d, transition: r, children: p }) {
-  const s = a(null), i = a(null), t = x("auto"), c = H();
-  return v(() => {
-    const h = s.current, n = i.current;
-    if (!h || !n) return;
-    let e = null;
-    const u = new ResizeObserver((b) => {
-      const f = b[0]?.borderBoxSize?.[0], o = f ? f.blockSize : n.offsetHeight, l = t.get();
-      if (l === "auto" || c) {
-        e?.stop(), e = null, t.set(o);
-        return;
-      }
-      !e && Math.abs(l - o) < 0.5 || (e?.stop(), e = g(t, o, {
-        ...r ?? M,
-        onComplete: () => {
-          e = null;
-        }
-      }));
-    });
-    return u.observe(n), () => {
-      u.disconnect(), e?.stop();
-    };
-  }, [
-    t,
-    c,
-    r
-  ]), /* @__PURE__ */ m(R.div, {
-    ref: s,
-    className: "min-h-0 overflow-hidden",
-    style: { height: t },
-    children: /* @__PURE__ */ m("div", {
-      ref: i,
-      className: d,
-      children: p
-    })
-  });
-}
-export {
-  y as t
-};
-
-//# sourceMappingURL=animated-height-C2eQstGy.js.map

package/dist/chunks/animated-height-C2eQstGy.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"animated-height-C2eQstGy.js","names":[],"sources":["../../src/utils/animated-height.tsx"],"sourcesContent":["import { useEffect, useRef, type ReactNode } from \"react\";\nimport {\n  animate,\n  motion,\n  useMotionValue,\n  useReducedMotion,\n  type ValueAnimationTransition,\n} from \"motion/react\";\n\n/**\n * Height spring for container-size transitions — same feel as the onboarding /\n * invite card and BasicPage footer reveal: quick, critically damped (no\n * overshoot that would flash clipped content).\n */\nconst HEIGHT_SPRING = { type: \"spring\", stiffness: 640, damping: 50 } as const;\n\n/**\n * Animates its own height to follow the measured height of `children`, so\n * content swaps (search filtering, skeleton → data) glide instead of jumping.\n * Honors `prefers-reduced-motion` by snapping height with no spring.\n */\nexport function AnimatedHeight({\n  className,\n  transition,\n  children,\n}: {\n  className?: string;\n  /** Spring override for the height follow. @default the Command spring */\n  transition?: ValueAnimationTransition<number | \"auto\">;\n  children: ReactNode;\n}) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const height = useMotionValue<number | \"auto\">(\"auto\");\n  const reduceMotion = useReducedMotion();\n\n  useEffect(() => {\n    const container = containerRef.current;\n    const content = contentRef.current;\n    if (!container || !content) return;\n\n    let animation: ReturnType<typeof animate> | null = null;\n\n    const observer = new ResizeObserver((entries) => {\n      const box = entries[0]?.borderBoxSize?.[0];\n      const next = box ? box.blockSize : content.offsetHeight;\n      const current = height.get();\n      if (current === \"auto\" || reduceMotion) {\n        animation?.stop();\n        animation = null;\n        height.set(next);\n        return;\n      }\n      if (!animation && Math.abs(current - next) < 0.5) return;\n      animation?.stop();\n      animation = animate(height, next, {\n        ...(transition ?? HEIGHT_SPRING),\n        onComplete: () => {\n          animation = null;\n        },\n      });\n    });\n    observer.observe(content);\n\n    return () => {\n      observer.disconnect();\n      animation?.stop();\n    };\n  }, [height, reduceMotion, transition]);\n\n  return (\n    <motion.div\n      ref={containerRef}\n      // Stack (and other flex parents) set `min-height: auto` on children,\n      // which sizes to content and swallows the height spring. Clip and\n      // allow shrinking so the measured height can actually animate.\n      className=\"min-h-0 overflow-hidden\"\n      style={{ height }}\n    >\n      <div ref={contentRef} className={className}>\n        {children}\n      </div>\n    </motion.div>\n  );\n}\n"],"mappings":";;;;AAcA,IAAM,IAAgB;AAAA,EAAE,MAAM;AAAA,EAAU,WAAW;AAAA,EAAK,SAAS;AAAG;AAOpE,SAAgB,EAAe,EAC7B,WAAA,GACA,YAAA,GACA,UAAA,EAAA,GAMC;AACD,QAAM,IAAe,EAAuB,IAAI,GAC1C,IAAa,EAAuB,IAAI,GACxC,IAAS,EAAgC,MAAM,GAC/C,IAAe,EAAiB;AAEtC,SAAA,EAAA,MAAgB;AACd,UAAM,IAAY,EAAa,SACzB,IAAU,EAAW;AAC3B,QAAI,CAAC,KAAa,CAAC,EAAS;AAE5B,QAAI,IAA+C;AAEnD,UAAM,IAAW,IAAI,eAAA,CAAgB,MAAY;AAC/C,YAAM,IAAM,EAAQ,CAAA,GAAI,gBAAgB,CAAA,GAClC,IAAO,IAAM,EAAI,YAAY,EAAQ,cACrC,IAAU,EAAO,IAAI;AAC3B,UAAI,MAAY,UAAU,GAAc;AACtC,QAAA,GAAW,KAAK,GAChB,IAAY,MACZ,EAAO,IAAI,CAAI;AACf;AAAA,MACF;AACA,MAAI,CAAC,KAAa,KAAK,IAAI,IAAU,CAAI,IAAI,QAC7C,GAAW,KAAK,GAChB,IAAY,EAAQ,GAAQ,GAAM;AAAA,QAChC,GAAI,KAAc;AAAA,QAClB,YAAA,MAAkB;AAChB,UAAA,IAAY;AAAA,QACd;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AACD,WAAA,EAAS,QAAQ,CAAO,GAExB,MAAa;AACX,MAAA,EAAS,WAAW,GACpB,GAAW,KAAK;AAAA,IAClB;AAAA,EACF,GAAG;AAAA,IAAC;AAAA,IAAQ;AAAA,IAAc;AAAA,EAAU,CAAC,GAGnC,gBAAA,EAAC,EAAO,KAAR;AAAA,IACE,KAAK;AAAA,IAIL,WAAU;AAAA,IACV,OAAO,EAAE,QAAA,EAAO;AAAA,IAEhB,UAAA,gBAAA,EAAC,OAAD;AAAA,MAAK,KAAK;AAAA,MAAuB,WAAA;AAAA,MAC9B,UAAA;AAAA,IACE,CAAA;AAAA,EACK,CAAA;AAEhB"}