@photon-ai/pho-ui 4.0.0 → 4.3.0

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

@@ -6,7 +6,10 @@ import { ComponentProps, Ref } from 'react';
  *   (menus, dialogs); see the same rule on Input and Select.
  * - Radius sits at the `lg` stop (16px) like Dialog — a standalone content
  *   panel reads bigger than a control, so it takes the panel radius rather
- *   than the control default (`base`).
+ *   than the control default (`base`). `overflow-hidden` clips with it:
+ *   a flush `Stat.Group` (opaque tiles, `pt-0`) would otherwise paint
+ *   square over the curve. The same clip is what makes an edge-to-edge
+ *   image or table follow the panel, the way `BasicPage.Card` already does.
  * - Vertical rhythm: `pt-5` / `pb-4`, `gap-4` between parts. Parts carry
  *   `px-5`, so a child without padding (an image, a table, a `Separator`)
  *   runs edge-to-edge on its own. A `Stat` / `Stat.Group` already pads
@@ -18,12 +21,16 @@ import { ComponentProps, Ref } from 'react';
  *   tone. Sizing belongs to the layout that places the card.
  */
 /** Surface chrome — exported for hosts that need the look on another element. */
-export declare const CARD_SURFACE = "border-pho-secondary bg-pho-primary rounded-lg border";
+export declare const CARD_SURFACE = "border-pho-secondary bg-pho-primary overflow-hidden rounded-lg border";
 /** The panel: bordered surface, vertical rhythm between parts. */
 declare function Root({ className, ...props }: ComponentProps<"div"> & {
     ref?: Ref<HTMLDivElement>;
 }): import("react").JSX.Element;
-/** Title + optional description pair, kept tight (`gap-0.5`). */
+/**
+ * Title row + optional description. The title and a trailing `Value`
+ * share the first line; the description sits on the next with no row
+ * gap — title and subtitle read as one block.
+ */
 declare function Header({ className, ...props }: ComponentProps<"div"> & {
     ref?: Ref<HTMLDivElement>;
 }): import("react").JSX.Element;
@@ -34,7 +41,14 @@ declare function Header({ className, ...props }: ComponentProps<"div"> & {
 declare function Title({ className, children, ...props }: ComponentProps<"h3"> & {
     ref?: Ref<HTMLHeadingElement>;
 }): import("react").JSX.Element;
-/** Supporting copy under the title — same step, secondary tone. */
+/**
+ * A count or figure at the end of the title row. One display step above
+ * the title, primary ink — the number is the loud thing on the line.
+ */
+declare function Value({ className, ...props }: ComponentProps<"div"> & {
+    ref?: Ref<HTMLDivElement>;
+}): import("react").JSX.Element;
+/** Supporting copy under the title — Dialog's description: same step, description ink. */
 declare function Description({ className, ...props }: ComponentProps<"p"> & {
     ref?: Ref<HTMLParagraphElement>;
 }): import("react").JSX.Element;
@@ -59,6 +73,7 @@ declare function Footer({ className, ...props }: ComponentProps<"div"> & {
  * <Card.Root>
  *   <Card.Header>
  *     <Card.Title>Usage</Card.Title>
+ *     <Card.Value>1.2k</Card.Value>
  *     <Card.Description>Since Aug 1.</Card.Description>
  *   </Card.Header>
  *   <Card.Content>…</Card.Content>
@@ -72,6 +87,7 @@ export declare const Card: {
     Root: typeof Root;
     Header: typeof Header;
     Title: typeof Title;
+    Value: typeof Value;
     Description: typeof Description;
     Content: typeof Content;
     Footer: typeof Footer;

package/dist/src/components/date-picker/date-picker.d.ts

@@ -16,7 +16,7 @@ export type DatePickerTime = "hour" | "minute" | "second";
  */
 export declare function dateFieldMask(locales?: Intl.LocalesArgument, time?: DatePickerTime): string;
 /**
- * The figures in the field — `09/12/2026`, or `09/10/2026 – 09/13/2026` for a
+ * The figures in the field — `09/12/2026`, or `09/10/2026–09/13/2026` for a
  * span, in the viewer's locale. An empty or half-finished range prints just
  * the day that is settled; nothing selected prints nothing. Pass `time` to
  * print the clock too, at the precision that was asked for.
@@ -34,6 +34,10 @@ export interface DatePickerPreset<T> {
     label: string;
     value: T | (() => T);
 }
+/** Extra about a change — present when the value came from a named window. */
+export interface DatePickerChangeDetails<T> {
+    preset: DatePickerPreset<T>;
+}
 interface DatePickerBaseProps {
     /** Field label (associated for accessibility). */
     label?: ReactNode;
@@ -51,6 +55,13 @@ interface DatePickerBaseProps {
     required?: boolean;
     /** Size variant. @default "md" */
     size?: DatePickerSize;
+    /**
+     * `fill` takes the column it is in, like every other field. `hug` shrinks
+     * to the words it is showing, for a field that sits in a toolbar or beside
+     * a title rather than in a form.
+     * @default "fill"
+     */
+    width?: "fill" | "hug";
     /**
      * Ask for a time as well as a day, this fine. `hour` sets the hour and
      * zeroes the rest, `minute` the hour and minute, `second` all three. Omit
@@ -68,13 +79,32 @@ interface DatePickerBaseProps {
     id?: string;
     /** Class applied to the trigger. */
     className?: string;
+    /**
+     * Accessible name when there is no visible label — a toolbar control
+     * beside a page title, which already says what the field is for.
+     */
+    "aria-label"?: string;
+    /**
+     * The named window the field should read. A page that already knows the
+     * name (`Last 24 hours` in the URL) passes it so a remount, and a rolling
+     * window recomputed each render, still write the name rather than the
+     * figures. The name drops the moment the value is no longer that window
+     * — a day picked by hand, or the page clearing this.
+     */
+    selectedPreset?: string;
+    /**
+     * How the popover lines up with the field. A hug field on the right of a
+     * header wants `end`, so the calendar grows left instead of off-screen.
+     * @default "start"
+     */
+    align?: "start" | "center" | "end";
 }
 export interface DatePickerSingleProps extends DatePickerBaseProps {
     /** @default "single" */
     mode?: "single";
     value?: Date;
     defaultValue?: Date;
-    onValueChange?: (value: Date | undefined) => void;
+    onValueChange?: (value: Date | undefined, details?: DatePickerChangeDetails<Date>) => void;
     /** Named days offered beside the calendar. */
     presets?: DatePickerPreset<Date>[];
 }
@@ -82,9 +112,16 @@ export interface DatePickerRangeProps extends DatePickerBaseProps {
     mode: "range";
     value?: DateRange;
     defaultValue?: DateRange;
-    onValueChange?: (value: DateRange | undefined) => void;
+    onValueChange?: (value: DateRange | undefined, details?: DatePickerChangeDetails<DateRange>) => void;
     /** Named windows offered beside the calendar — `Last 7 days`, and so on. */
     presets?: DatePickerPreset<DateRange>[];
+    /**
+     * Shortest and longest span the viewer may pick, counted in days. A pick
+     * that would break either restarts the span from the day just clicked, so
+     * the bound is felt rather than explained.
+     */
+    minDays?: number;
+    maxDays?: number;
 }
 export type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps;
 /**

package/dist/src/components/date-picker/index.d.ts

@@ -1,2 +1,2 @@
-export { DatePicker, formatDateLabel, type DatePickerProps, type DatePickerSingleProps, type DatePickerRangeProps, type DatePickerSize, } from './date-picker';
+export { DatePicker, formatDateLabel, type DatePickerProps, type DatePickerSingleProps, type DatePickerRangeProps, type DatePickerSize, type DatePickerPreset, type DatePickerChangeDetails, } from './date-picker';
 export type { DateRange } from 'react-day-picker';

package/dist/src/index.d.ts

@@ -9,7 +9,7 @@ export * from './utils';
 export * from './motion';
 export * from './components/button';
 export * from './components/calendar';
-export { DatePicker, formatDateLabel, type DatePickerProps, type DatePickerSingleProps, type DatePickerRangeProps, type DatePickerSize, } from './components/date-picker';
+export { DatePicker, formatDateLabel, type DatePickerProps, type DatePickerSingleProps, type DatePickerRangeProps, type DatePickerSize, type DatePickerPreset, type DatePickerChangeDetails, } from './components/date-picker';
 export * from './components/input';
 export * from './components/input-group';
 export * from './components/card';

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

@@ -95,6 +95,11 @@ export interface BasicPageRootProps extends ComponentProps<"div"> {
      * starting values would blink it out. The React page taking over from
      * it stays put too — it finds the marker in the document at its first
      * render, while the twin is still there.
+     *
+     * Not needed for markup React hydrates in place (a server-rendered
+     * page): the parts know a hydration pass from a mount and stay at rest
+     * on their own. This is for the twin that mounts fresh, beside or over
+     * markup it does not hydrate.
      */
     prerendered?: boolean;
 }
@@ -222,7 +227,8 @@ export interface BasicPageStackProps extends Omit<ComponentProps<"div">, RevealM
      * second the page was painted before React and is already there. A
      * loading part in some other page (one still on screen while this one
      * mounts) does not count. `true` always enters, except inside a
-     * `Root prerendered`; `false` never does.
+     * `Root prerendered` or while hydrating server markup (the page is on
+     * screen either way); `false` never does.
      */
     enter?: boolean;
     ref?: Ref<HTMLDivElement>;
@@ -253,6 +259,11 @@ export interface BasicPageStackProps extends Omit<ComponentProps<"div">, RevealM
  *   nothing inside that root does either, and the React page taking over
  *   finds the marker in the document and stays put on its own;
  *   `enter={false}` says so outright for markup that must never move.
+ * - **A page the server rendered and React hydrates** stays put with no
+ *   flag at all: the hydration pass renders what the server did, at rest,
+ *   and the entrance waits for a page React mounts itself (a navigation).
+ *   An `enter` on a hydrating stack does not override this either: the
+ *   page is on screen, and starting values would blink it out.
  * - **A region the skeleton couldn't predict** (a list of unknown length)
  *   — `Reveal` rises that region in once its shape is known.
  *
@@ -867,9 +878,9 @@ export interface BasicPageAsideProps {
     onClose?: () => void;
     /**
      * How wide the panel is on a pane that can host it. `default` (unsaid)
-     * is two fifths of the pane, 20–28rem. `wide` is half the pane, 25–40rem
-     * — a request body or a waterfall. Below `md` the subpage is the page
-     * and this does not apply.
+     * is two fifths of the pane, 20–28rem. `wide` is two thirds of the pane,
+     * 28–48rem — a request body or a waterfall. Below `md` the subpage is
+     * the page and this does not apply.
      */
     width?: BasicPageAsideWidth;
     /**
@@ -912,8 +923,8 @@ export interface BasicPageAsideProps {
  * 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. `width="wide"` opens the panel itself (half the pane, up to
- * 40rem); the page's column cap does not follow.
+ * margin. `width="wide"` opens the panel itself (two thirds of the pane,
+ * up to 48rem); the page's column cap does not follow.
  *
  * Panel or page is presentation, not routing: the URL is the subpage's
  * either way. Left to itself the aside reads how it was reached — a

package/package.json

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