@photon-ai/pho-ui 2.6.0 → 2.7.0

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.0",
   "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"}