@photon-ai/pho-ui 2.7.0 → 2.8.0

package/dist/src/components/accordion/accordion.d.ts

@@ -4,19 +4,56 @@ import { Accordion as BaseAccordion } from '@base-ui/react/accordion';
 type StyledProps<T extends ElementType> = Omit<ComponentProps<T>, "className"> & {
     className?: string;
 };
-declare function Root({ className, ...props }: StyledProps<typeof BaseAccordion.Root>): import("react").JSX.Element;
+export type AccordionSize = "sm" | "md" | "lg";
+export interface AccordionRootProps extends StyledProps<typeof BaseAccordion.Root> {
+    /** @default "md" */
+    size?: AccordionSize;
+}
+/**
+ * The list — bare, so the page decides the surface: on photon.codes the
+ * FAQ card is the section's, 32px around the list; in a settings page it
+ * is a `Card`. Items divide with a hairline and the list has no outer
+ * lines. Items are independent, as on the site, so `multiple` is on
+ * unless said otherwise.
+ */
+declare function Root({ className, multiple, size, ...props }: AccordionRootProps): import("react").JSX.Element;
+/**
+ * One question, padded above and below, whatever is open inside. The
+ * hairline under it overlaps the next item by its own pixel, the way
+ * Framer draws a border inside the box, so an item advances by exactly
+ * its padding and its rows: 68px at `lg`, the site's figure. The last
+ * item draws none.
+ */
+declare function Item({ className, ...props }: StyledProps<typeof BaseAccordion.Item>): import("react").JSX.Element;
 declare function Header({ className, ...props }: StyledProps<typeof BaseAccordion.Header>): import("react").JSX.Element;
-declare function Trigger({ className, ...props }: StyledProps<typeof BaseAccordion.Trigger>): import("react").JSX.Element;
-declare function Panel({ className, ...props }: StyledProps<typeof BaseAccordion.Panel>): import("react").JSX.Element;
 /**
- * Stacked, individually-collapsible sections built on Base UI `Accordion`.
- * Single-open by default; set `openMultiple` to allow several at once. Each
- * `Accordion.Item` needs a `value`; control the open set with `value` /
- * `onValueChange` or `defaultValue`.
+ * The question row: the question in medium with the chevron at the row's
+ * end. The chevron is the site's small one (a 6.5×3.5 stroke in a 24px
+ * box, weight 1.5) and the trigger wears it itself — pass only the
+ * question. Open, the question settles to the description tone and the
+ * chevron makes a half turn, both on the section spring; the chevron keeps
+ * the primary ink. The whole item is the target, as on the site: the hit
+ * area reaches through the item's padding above and below the row.
+ */
+declare function Trigger({ className, children, ...props }: StyledProps<typeof BaseAccordion.Trigger>): import("react").JSX.Element;
+/**
+ * The answer: medium in the primary ink, one type step under the
+ * question, a short gap below it. Opening, the panel's height rides the
+ * section spring while the answer arrives 100ms later on the appear
+ * spring, fading in as it rises 20px. Closing, the answer is gone at once
+ * and the height settles on the section spring — the site's way round.
+ */
+declare function Panel({ className, children, ...props }: StyledProps<typeof BaseAccordion.Panel>): import("react").JSX.Element;
+/**
+ * Questions that each reveal an answer — photon.codes's FAQ, as a
+ * component, built on Base UI `Accordion`. Each `Accordion.Item` needs a
+ * `value`; control the open set with `value` / `onValueChange` or
+ * `defaultValue`. Items are independent by default; `multiple={false}`
+ * opens one at a time. Three sizes; `lg` is the site's.
  */
 export declare const Accordion: {
     Root: typeof Root;
-    Item: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').AccordionItemProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    Item: typeof Item;
     Header: typeof Header;
     Trigger: typeof Trigger;
     Panel: typeof Panel;

package/dist/src/components/checkbox/checkbox-card.d.ts

@@ -11,7 +11,8 @@ export interface CheckboxCardProps extends Omit<ComponentProps<typeof BaseCheckb
 }
 /**
  * A `Checkbox` styled as a bordered, selectable tile — title, optional
- * description, and either a stacked icon or the checkbox box. The tile is a
+ * description, and either a stacked icon above them or the checkbox box at
+ * the end of the title row. The tile is a
  * `<label>` around the control so clicks (including on the icon/title) are a
  * trusted activation of the hidden input Base UI renders beside the root.
  */

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

@@ -110,9 +110,10 @@ export interface DataTableProps<TData extends RowData> extends Omit<ComponentPro
     /**
      * 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.
+     * next to the table. Return nothing for a row with no page yet (one
+     * still in flight) and that row stays plain.
      */
-    rowHref?: (row: TData) => string;
+    rowHref?: (row: TData) => string | null | undefined;
     /** The row whose page is open (its id) — it keeps the wash. */
     current?: string | null;
     /**

package/dist/src/components/radio-group/radio-card.d.ts

@@ -11,8 +11,9 @@ export interface RadioCardProps extends Omit<ComponentProps<typeof BaseRadio.Roo
 }
 /**
  * A `Radio` styled as a bordered, selectable tile — title, optional
- * description, and either a stacked icon or the radio dot. The tile *is*
- * the radio (see `usePressPulse`); an inner glyph is decorative.
+ * description, and either a stacked icon above them or the radio dot at
+ * the end of the title row. The tile *is* the radio (see `usePressPulse`);
+ * an inner glyph is decorative.
  */
 export declare function RadioCard({ className, title, description, icon, disabled, ...props }: RadioCardProps): import("react").JSX.Element;
 export declare namespace RadioCard {

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

@@ -211,6 +211,16 @@ export interface BasicPageHeaderProps extends Omit<ComponentProps<"div">, Reveal
     ref?: Ref<HTMLDivElement>;
 }
 declare function Header({ enter, className, ...props }: BasicPageHeaderProps): import("react").JSX.Element;
+/**
+ * An action at the header row's end — a small button (or two) seated in
+ * the `Header` grid the way `Search` is: top-right of the block, its top
+ * edge on the title row, flush with the card edge below. Put it inside
+ * `Header` after the text; with a `Search` present it stands to the
+ * search's right.
+ */
+declare function HeaderAction({ className, ...props }: ComponentProps<"div"> & {
+    ref?: Ref<HTMLDivElement>;
+}): import("react").JSX.Element;
 /**
  * Section heading — same padding as the page title, smaller type. Hashable via
  * slug `id` (not a link).
@@ -679,8 +689,25 @@ export interface BasicPageAsideProps {
      */
     open?: boolean;
     /**
-     * The empty panel's face — a quiet line that says what opens here.
-     * Optional; without it the reserved panel stands empty.
+     * How the panel meets the page on a wide pane. `overlay`, the default,
+     * floats over the page's right edge: it takes no ground, surfaces when
+     * a subpage opens and leaves with it, and the page beneath stays live.
+     * `inline` docks it: the panel's ground is reserved from the first
+     * paint, the page beside it never reflows as subpages open and close,
+     * and `placeholder` wears the empty panel.
+     */
+    variant?: "overlay" | "inline";
+    /**
+     * For an overlay: dim the page behind and keep interaction in the panel.
+     * Focus stays inside, the backdrop is a way out, Escape still closes.
+     * Off by default, so the page stays live under the panel and opening
+     * another row swaps the panel's page.
+     */
+    modal?: boolean;
+    /**
+     * The empty inline panel's face — a quiet line that says what opens
+     * here. Optional; without it the reserved panel stands empty. An
+     * overlay has no empty face: closed, it is not there.
      */
     placeholder?: ReactNode;
     /**
@@ -692,17 +719,21 @@ export interface BasicPageAsideProps {
 }
 /**
  * A subpage beside the page. On a pane wide enough for two columns (48rem,
- * Tailwind's `md`) it is a panel at the right edge, and the panel holds
- * its ground from the first paint: the page beside it never reflows as
+ * Tailwind's `md`) it is a panel at the right edge. By default the panel
+ * floats: it takes no ground, surfaces over the page's edge when a
+ * subpage opens and leaves with it, and the page beneath stays live
+ * unless `modal` dims it. `variant="inline"` docks it: the panel holds
+ * its ground from the first paint, the page beside it never reflows as
  * subpages open and close — only the panel's face changes, `placeholder`
- * while empty, the subpage while one is open. The subpage scrolls on its
- * own, its `Back` is the close in the corner, Escape closes too. On a
- * narrower pane the same subpage is the page — the list steps aside, the
- * subpage takes the pane with its own `Back` — so one subpage component
- * serves both. Works under either `Root` width: the page keeps its own
- * column cap beside the panel, and leftover space is margin.
+ * while empty, the subpage while one is open. Either way the subpage
+ * scrolls on its own, its `Back` is the close in the corner, Escape
+ * closes too. On a narrower pane the same subpage is the page — the list
+ * steps aside, the subpage takes the pane with its own `Back` — so one
+ * subpage component serves both. Works under either `Root` width: the
+ * page keeps its own column cap beside the panel, and leftover space is
+ * margin.
  */
-declare function Aside({ open, placeholder, onClose, children }: BasicPageAsideProps): import('react').ReactPortal | null;
+declare function Aside({ open, variant, modal, placeholder, onClose, children, }: BasicPageAsideProps): import("react").JSX.Element | 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
@@ -736,6 +767,7 @@ export declare const BasicPage: {
     Title: typeof Title;
     Stack: typeof Stack;
     Header: typeof Header;
+    HeaderAction: typeof HeaderAction;
     SectionTitle: typeof SectionTitle;
     Description: typeof Description;
     TableCount: typeof TableCount;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@photon-ai/pho-ui",
-  "version": "2.7.0",
+  "version": "2.8.0",
   "description": "Pho Design System — Photon's React component library, built on Base UI",
   "license": "UNLICENSED",
   "repository": {

package/src/styles/theme.css

@@ -89,6 +89,60 @@
     1
   );
 
+  /* photon.codes's section spring (Framer spring-physics 436 42 1; critically
+     damped, settled by 500ms): an accordion item's height, its chevron's
+     half turn, and the question's tone all ride it. Sampled over 500ms. */
+  --ease-pho-spring-reveal: linear(
+    0,
+    0.097 5%,
+    0.2805 10%,
+    0.4642 15%,
+    0.6175 20%,
+    0.7348 25%,
+    0.82 30%,
+    0.8798 35%,
+    0.9208 40%,
+    0.9484 45%,
+    0.9667 50%,
+    0.9787 55%,
+    0.9865 60%,
+    0.9915 65%,
+    0.9948 70%,
+    0.9968 75%,
+    0.9981 80%,
+    0.999 85%,
+    0.9995 90%,
+    0.9998 95%,
+    1
+  );
+
+  /* photon.codes's appear effect (Framer spring-physics 417 68 1; overdamped,
+     a long soft tail): content fading in and rising into place. Sampled
+     over 700ms; pair it with the site's 100ms delay. */
+  --ease-pho-spring-appear: linear(
+    0,
+    0.1294 5%,
+    0.3063 10%,
+    0.4544 15%,
+    0.5721 20%,
+    0.6649 25%,
+    0.7381 30%,
+    0.7957 35%,
+    0.8411 40%,
+    0.8769 45%,
+    0.905 50%,
+    0.9272 55%,
+    0.9447 60%,
+    0.9585 65%,
+    0.9693 70%,
+    0.9779 75%,
+    0.9846 80%,
+    0.9899 85%,
+    0.9941 90%,
+    0.9974 95%,
+    1
+  );
+
   --text-*: initial;
   --text-xs: 0.8125rem;
   --text-xs--line-height: 1.125rem;