@photon-ai/pho-ui 4.2.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

@@ -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;
@@ -75,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>[];
 }
@@ -89,7 +112,7 @@ 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>[];
     /**

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

@@ -878,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;
     /**
@@ -923,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.2.0",
+  "version": "4.3.0",
   "description": "Pho Design System — Photon's React component library, built on Base UI",
   "license": "UNLICENSED",
   "repository": {