panelui-web 0.2.0 → 0.3.0

package/dist/components/kpi/index.js

@@ -25,7 +25,10 @@ const kpiVariants = tv({
     },
     variants: {
         surface: {
-            true: { root: 'rounded-3xl border bg-card p-5 text-card-foreground' },
+            true: {
+                root: 'rounded-3xl border bg-card p-5 text-card-foreground',
+                group: 'rounded-3xl border bg-card p-5 text-card-foreground',
+            },
         },
         color: {
             primary: { chart: '[--pu-color:var(--primary)]', progress: '[--pu-color:var(--primary)]' },
@@ -221,8 +224,8 @@ function KpiSeparator({ className, ...props }) {
 }
 KpiSeparator.displayName = 'Kpi.Separator';
 /** Several metrics as one panel, with a rule between each and the next. */
-function KpiGroup({ orientation = 'horizontal', className, ...props }) {
-    return _jsx("div", { className: kpiVariants({ orientation }).group({ className }), ...props });
+function KpiGroup({ orientation = 'horizontal', surface = false, className, ...props }) {
+    return _jsx("div", { className: kpiVariants({ orientation, surface }).group({ className }), ...props });
 }
 KpiGroup.displayName = 'Kpi.Group';
 export const Kpi = Object.assign(KpiRoot, {

package/dist/components/lane-board/index.d.ts

@@ -114,6 +114,13 @@ declare function LaneBoardMeta({ className, ...props }: LaneBoardMetaProps): imp
 declare namespace LaneBoardMeta {
     var displayName: string;
 }
+export interface LaneBoardAvatarProps extends ComponentProps<'span'> {
+}
+/** Who a card belongs to, as initials in a small circle. */
+declare function LaneBoardAvatar({ className, ...props }: LaneBoardAvatarProps): import("react").JSX.Element;
+declare namespace LaneBoardAvatar {
+    var displayName: string;
+}
 export declare const LaneBoard: typeof LaneBoardRoot & {
     Title: typeof LaneBoardTitle;
     Code: typeof LaneBoardCode;
@@ -121,5 +128,6 @@ export declare const LaneBoard: typeof LaneBoardRoot & {
     Steps: typeof LaneBoardSteps;
     Tag: typeof LaneBoardTag;
     Meta: typeof LaneBoardMeta;
+    Avatar: typeof LaneBoardAvatar;
 };
-export { LaneBoardTitle, LaneBoardCode, LaneBoardRow, LaneBoardSteps, LaneBoardTag, LaneBoardMeta };
+export { LaneBoardTitle, LaneBoardCode, LaneBoardRow, LaneBoardSteps, LaneBoardTag, LaneBoardMeta, LaneBoardAvatar, };

package/dist/components/lane-board/index.js

@@ -89,6 +89,7 @@ const laneBoardVariants = tv({
         step: 'h-1 w-4 rounded-full',
         tag: 'inline-flex items-center rounded-full border border-[color-mix(in_oklab,var(--pu-color)_35%,var(--card))] bg-[color-mix(in_oklab,var(--pu-color)_14%,transparent)] px-2 py-0.5 text-xs font-medium text-[var(--pu-color)]',
         meta: 'font-mono text-sm tabular-nums text-foreground',
+        avatar: 'flex size-6 shrink-0 items-center justify-center rounded-full bg-muted text-[0.625rem] font-semibold text-muted-foreground',
     },
     variants: {
         color: {
@@ -678,6 +679,11 @@ function LaneBoardMeta({ className, ...props }) {
     return _jsx("span", { className: laneBoardVariants().meta({ className }), ...props });
 }
 LaneBoardMeta.displayName = 'LaneBoard.Meta';
+/** Who a card belongs to, as initials in a small circle. */
+function LaneBoardAvatar({ className, ...props }) {
+    return _jsx("span", { "data-slot": "lane-board-avatar", className: laneBoardVariants().avatar({ className }), ...props });
+}
+LaneBoardAvatar.displayName = 'LaneBoard.Avatar';
 export const LaneBoard = Object.assign(LaneBoardRoot, {
     Title: LaneBoardTitle,
     Code: LaneBoardCode,
@@ -685,7 +691,8 @@ export const LaneBoard = Object.assign(LaneBoardRoot, {
     Steps: LaneBoardSteps,
     Tag: LaneBoardTag,
     Meta: LaneBoardMeta,
+    Avatar: LaneBoardAvatar,
 });
 /* By name as well, for a Server Component, which cannot dot into a client
    module. */
-export { LaneBoardTitle, LaneBoardCode, LaneBoardRow, LaneBoardSteps, LaneBoardTag, LaneBoardMeta };
+export { LaneBoardTitle, LaneBoardCode, LaneBoardRow, LaneBoardSteps, LaneBoardTag, LaneBoardMeta, LaneBoardAvatar, };

package/dist/components/planet/index.d.ts

@@ -124,9 +124,32 @@ declare function PlanetControls({ step, className, children, ...props }: PlanetC
 declare namespace PlanetControls {
     var displayName: string;
 }
+export interface PlanetListProps extends ComponentProps<'ul'> {
+}
+/**
+ * The places on the globe as a list, in two columns, for picking one by name.
+ * Put it beside or under the globe and turn the globe to whatever is picked.
+ */
+declare function PlanetList({ className, ...props }: PlanetListProps): import("react").JSX.Element;
+declare namespace PlanetList {
+    var displayName: string;
+}
+export interface PlanetListItemProps extends Omit<ComponentProps<'button'>, 'color'> {
+    /** The colour of the dot before the name. Match it to the place's marker. */
+    color?: PlanetMarkerColor;
+    /** Draws the row as the one that has been picked. */
+    selected?: boolean;
+}
+/** One place in `Planet.List`: a dot in its marker's colour, and its name. A button. */
+declare function PlanetListItem({ color, selected, className, children, ...props }: PlanetListItemProps): import("react").JSX.Element;
+declare namespace PlanetListItem {
+    var displayName: string;
+}
 export declare const Planet: import("react").ForwardRefExoticComponent<Omit<PlanetProps, "ref"> & import("react").RefAttributes<PlanetHandle>> & {
     Globe: typeof PlanetGlobe;
     Marker: typeof PlanetMarker;
     Controls: typeof PlanetControls;
+    List: typeof PlanetList;
+    ListItem: typeof PlanetListItem;
 };
-export { PlanetGlobe, PlanetMarker, PlanetControls };
+export { PlanetGlobe, PlanetMarker, PlanetControls, PlanetList, PlanetListItem };

package/dist/components/planet/index.js

@@ -80,6 +80,11 @@ const planetVariants = tv({
         controls: 'inline-flex items-stretch divide-x divide-border overflow-hidden rounded-xl border bg-card text-card-foreground shadow-sm',
         control: 'inline-flex size-9 cursor-pointer items-center justify-center text-muted-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground active:bg-muted',
         caption: 'flex items-center px-3 text-sm font-medium',
+        // The places on the globe again, as a list beside it, ruled off from what is above.
+        list: 'grid grid-cols-2 gap-1 border-t pt-3',
+        listItem: 'flex w-full cursor-pointer items-center gap-2 rounded-lg px-2 py-1.5 text-start text-sm text-muted-foreground outline-none transition-colors hover:bg-accent hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring aria-pressed:bg-muted aria-pressed:text-foreground',
+        listDot: 'size-2 shrink-0 rounded-full bg-[var(--pu-color)]',
+        listName: 'truncate',
     },
     variants: {
         /** The colour of the light at the globe's edge. */
@@ -99,11 +104,11 @@ const planetVariants = tv({
             },
         },
         color: {
-            primary: { marker: '[--pu-color:var(--primary)]' },
-            info: { marker: '[--pu-color:var(--info)]' },
-            success: { marker: '[--pu-color:var(--success)]' },
-            warning: { marker: '[--pu-color:var(--warning)]' },
-            destructive: { marker: '[--pu-color:var(--destructive)]' },
+            primary: { marker: '[--pu-color:var(--primary)]', listDot: '[--pu-color:var(--primary)]' },
+            info: { marker: '[--pu-color:var(--info)]', listDot: '[--pu-color:var(--info)]' },
+            success: { marker: '[--pu-color:var(--success)]', listDot: '[--pu-color:var(--success)]' },
+            warning: { marker: '[--pu-color:var(--warning)]', listDot: '[--pu-color:var(--warning)]' },
+            destructive: { marker: '[--pu-color:var(--destructive)]', listDot: '[--pu-color:var(--destructive)]' },
         },
     },
     defaultVariants: { color: 'primary', glow: 'primary' },
@@ -638,10 +643,26 @@ function PlanetControls({ step = 60, className, children, ...props }) {
     return (_jsxs("div", { role: "group", "aria-label": "Turn the globe", className: slots.controls({ className }), ...props, children: [_jsx("button", { type: "button", "aria-label": "Turn west", className: slots.control(), onClick: () => planet.rotateBy(-step), children: _jsx(Arrow, { flipped: true }) }), children !== undefined && children !== null ? (_jsx("span", { className: slots.caption(), children: children })) : null, _jsx("button", { type: "button", "aria-label": "Turn east", className: slots.control(), onClick: () => planet.rotateBy(step), children: _jsx(Arrow, {}) })] }));
 }
 PlanetControls.displayName = 'Planet.Controls';
+/**
+ * The places on the globe as a list, in two columns, for picking one by name.
+ * Put it beside or under the globe and turn the globe to whatever is picked.
+ */
+function PlanetList({ className, ...props }) {
+    return _jsx("ul", { "data-slot": "planet-list", className: planetVariants().list({ className }), ...props });
+}
+PlanetList.displayName = 'Planet.List';
+/** One place in `Planet.List`: a dot in its marker's colour, and its name. A button. */
+function PlanetListItem({ color = 'primary', selected = false, className, children, ...props }) {
+    const slots = planetVariants({ color });
+    return (_jsx("li", { "data-slot": "planet-list-item", children: _jsxs("button", { type: "button", "aria-pressed": selected, className: slots.listItem({ className }), ...props, children: [_jsx("span", { "aria-hidden": "true", className: slots.listDot() }), _jsx("span", { className: slots.listName(), children: children })] }) }));
+}
+PlanetListItem.displayName = 'Planet.ListItem';
 export const Planet = Object.assign(PlanetRoot, {
     Globe: PlanetGlobe,
     Marker: PlanetMarker,
     Controls: PlanetControls,
+    List: PlanetList,
+    ListItem: PlanetListItem,
 });
 /*
  * The parts again, by name. `Planet.Globe` is a property of a component, and a
@@ -650,4 +671,4 @@ export const Planet = Object.assign(PlanetRoot, {
  * Server Component writes `<PlanetGlobe>`; anywhere else the dotted form is
  * the same thing.
  */
-export { PlanetGlobe, PlanetMarker, PlanetControls };
+export { PlanetGlobe, PlanetMarker, PlanetControls, PlanetList, PlanetListItem };

package/dist/components/range-meter/index.d.ts

@@ -3,7 +3,9 @@
  * ruler of ticks that rises under the value.
  *
  * ```tsx
+ * <RangeMeter.Label>Response time</RangeMeter.Label>
  * <RangeMeter min={80} max={600} value={time} onValueChange={setTime} marker={300} />
+ * <RangeMeter.Scale start="80 ms" end="600 ms" />
  * ```
  *
  * ## The ruler swells where the reading is
@@ -64,7 +66,33 @@ export interface RangeMeterProps extends Omit<ComponentProps<'div'>, 'onChange'
     /** Drawn in the tag before the number: an icon. */
     children?: ReactNode;
 }
-export declare function RangeMeter({ min, max, value, onValueChange, step, marker, ticks, color, formatValue, label, valueText, className, children, ...props }: RangeMeterProps): import("react").JSX.Element;
-export declare namespace RangeMeter {
+declare function RangeMeterRoot({ min, max, value, onValueChange, step, marker, ticks, color, formatValue, label, valueText, className, children, ...props }: RangeMeterProps): import("react").JSX.Element;
+declare namespace RangeMeterRoot {
     var displayName: string;
 }
+export interface RangeMeterLabelProps extends ComponentProps<'p'> {
+}
+/**
+ * The meter's name, written over it. The meter's own `label` is what a screen
+ * reader says; this is what everyone else reads.
+ */
+declare function RangeMeterLabel({ className, ...props }: RangeMeterLabelProps): import("react").JSX.Element;
+declare namespace RangeMeterLabel {
+    var displayName: string;
+}
+export interface RangeMeterScaleProps extends Omit<ComponentProps<'div'>, 'children'> {
+    /** The word or figure at the low end. */
+    start: ReactNode;
+    /** The word or figure at the high end. */
+    end: ReactNode;
+}
+/** What the two ends of the ruler stand for, written under it at either side. */
+declare function RangeMeterScale({ start, end, className, ...props }: RangeMeterScaleProps): import("react").JSX.Element;
+declare namespace RangeMeterScale {
+    var displayName: string;
+}
+export declare const RangeMeter: typeof RangeMeterRoot & {
+    Label: typeof RangeMeterLabel;
+    Scale: typeof RangeMeterScale;
+};
+export { RangeMeterLabel, RangeMeterScale };

package/dist/components/range-meter/index.js

@@ -5,7 +5,9 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
  * ruler of ticks that rises under the value.
  *
  * ```tsx
+ * <RangeMeter.Label>Response time</RangeMeter.Label>
  * <RangeMeter min={80} max={600} value={time} onValueChange={setTime} marker={300} />
+ * <RangeMeter.Scale start="80 ms" end="600 ms" />
  * ```
  *
  * ## The ruler swells where the reading is
@@ -44,6 +46,9 @@ const rangeMeterVariants = tv({
         ruler: 'relative flex h-10 items-end justify-between',
         tick: 'w-[3px] rounded-full transition-[height,background-color,opacity,box-shadow] duration-200 ease-out motion-reduce:transition-none',
         marker: 'pointer-events-none absolute -bottom-2.5 size-1.5 -translate-x-1/2 rotate-45 rounded-[1px] bg-foreground rtl:translate-x-1/2',
+        // Siblings of the meter, written beside it rather than inside it.
+        label: 'text-sm font-medium',
+        scale: 'flex justify-between text-xs text-muted-foreground',
         tag: 'pointer-events-none absolute top-0 flex h-7 items-center gap-1 whitespace-nowrap rounded-full bg-[var(--pu-color)] px-2.5 text-xs font-semibold tabular-nums text-[var(--pu-on-color)] shadow-[0_6px_18px_-4px_color-mix(in_oklab,var(--pu-color)_70%,transparent)] transition-[background-color,box-shadow,scale] duration-200 motion-reduce:transition-none [&_svg]:size-3.5 [&_svg]:shrink-0',
     },
     variants: {
@@ -85,7 +90,7 @@ const clamp = (value, low, high) => Math.min(high, Math.max(low, value));
 const SPREAD = 2.6;
 /** A resting tick's height, as a share of the ruler's. */
 const REST = 0.34;
-export function RangeMeter({ min = 0, max = 100, value, onValueChange, step = 1, marker, ticks = 41, color = 'primary', formatValue, label = 'Reading', valueText, className, children, ...props }) {
+function RangeMeterRoot({ min = 0, max = 100, value, onValueChange, step = 1, marker, ticks = 41, color = 'primary', formatValue, label = 'Reading', valueText, className, children, ...props }) {
     const interactive = onValueChange !== undefined;
     const slots = rangeMeterVariants({ color, interactive, marked: marker !== undefined });
     const ruler = useRef(null);
@@ -167,4 +172,24 @@ export function RangeMeter({ min = 0, max = 100, value, onValueChange, step = 1,
                             } }, index));
                     }), marker !== undefined ? (_jsx("span", { className: slots.marker(), style: { insetInlineStart: `${(clamp((marker - min) / span, 0, 1) * 100).toFixed(2)}%` } })) : null] })] }));
 }
-RangeMeter.displayName = 'RangeMeter';
+RangeMeterRoot.displayName = 'RangeMeter';
+/**
+ * The meter's name, written over it. The meter's own `label` is what a screen
+ * reader says; this is what everyone else reads.
+ */
+function RangeMeterLabel({ className, ...props }) {
+    return _jsx("p", { "data-slot": "range-meter-label", className: rangeMeterVariants().label({ className }), ...props });
+}
+RangeMeterLabel.displayName = 'RangeMeter.Label';
+/** What the two ends of the ruler stand for, written under it at either side. */
+function RangeMeterScale({ start, end, className, ...props }) {
+    return (_jsxs("div", { "data-slot": "range-meter-scale", className: rangeMeterVariants().scale({ className }), ...props, children: [_jsx("span", { children: start }), _jsx("span", { children: end })] }));
+}
+RangeMeterScale.displayName = 'RangeMeter.Scale';
+export const RangeMeter = Object.assign(RangeMeterRoot, {
+    Label: RangeMeterLabel,
+    Scale: RangeMeterScale,
+});
+/* By name as well, for a Server Component, which cannot dot into a client
+   module. */
+export { RangeMeterLabel, RangeMeterScale };

package/dist/components/stat/index.d.ts

@@ -0,0 +1,106 @@
+/**
+ * Stat — one figure written large, with what it is and what it means.
+ *
+ * ```tsx
+ * <Stat>
+ *   <Stat.Content>
+ *     <Stat.Label>Response time</Stat.Label>
+ *     <Stat.Value>
+ *       240<Stat.Unit>ms</Stat.Unit>
+ *     </Stat.Value>
+ *   </Stat.Content>
+ *   <Stat.Badge>60 ms inside budget</Stat.Badge>
+ * </Stat>
+ * ```
+ *
+ * ## The figure over the chart
+ *
+ * It is the reading at the top of a panel whose body is a meter, a bar chart
+ * or a grid of days: the label says what is measured, the value is the
+ * reading, and the badge on the trailing side says how that reading stands.
+ * Change the value as the chart beside it changes and the two read as one.
+ *
+ * ## The row sets the baseline
+ *
+ * Inside `Stat`, the value is set solid, with no leading, so its foot sits on
+ * the same line as the badge's at the bottom of the row. Outside it, as a
+ * label and a value stacked on their own, the value keeps its line height and
+ * sits in running text like any other line.
+ *
+ * ## The unit follows the value's size
+ *
+ * `Stat.Unit` is written inside `Stat.Value` and takes its size and its gap
+ * from it, so a unit never has to be sized by hand to match its number.
+ *
+ * ## It renders on the server
+ *
+ * No state and no handlers. Everything that depends on where a part sits is
+ * done in CSS from data attributes, so a Server Component can render it.
+ */
+import type { ComponentProps } from 'react';
+export interface StatProps extends ComponentProps<'div'> {
+}
+/** A row: the label and value on the leading side, a badge on the trailing one. */
+declare function StatRoot({ className, ...props }: StatProps): import("react").JSX.Element;
+declare namespace StatRoot {
+    var displayName: string;
+}
+export interface StatContentProps extends ComponentProps<'div'> {
+}
+/** The label and the value, stacked. Used on its own when there is no badge. */
+declare function StatContent({ className, ...props }: StatContentProps): import("react").JSX.Element;
+declare namespace StatContent {
+    var displayName: string;
+}
+export interface StatLabelProps extends ComponentProps<'p'> {
+    /**
+     * `medium` sets the label in a heavier weight, for a figure that stands on
+     * its own rather than at the top of a panel that is already titled.
+     * Default `normal`.
+     */
+    weight?: 'normal' | 'medium';
+}
+/** What is measured, in a quiet line over the value. */
+declare function StatLabel({ weight, className, ...props }: StatLabelProps): import("react").JSX.Element;
+declare namespace StatLabel {
+    var displayName: string;
+}
+export interface StatDescriptionProps extends ComponentProps<'p'> {
+}
+/** What the reading means, in words: "Answering slowly". Written under the label. */
+declare function StatDescription({ className, ...props }: StatDescriptionProps): import("react").JSX.Element;
+declare namespace StatDescription {
+    var displayName: string;
+}
+export interface StatValueProps extends ComponentProps<'p'> {
+    /** `sm` is 2xl, `md` 3xl and `lg` 4xl. Default `lg`. */
+    size?: 'sm' | 'md' | 'lg';
+}
+/** The figure. Put a `Stat.Unit` inside it, after the number. */
+declare function StatValue({ size, className, ...props }: StatValueProps): import("react").JSX.Element;
+declare namespace StatValue {
+    var displayName: string;
+}
+export interface StatUnitProps extends ComponentProps<'span'> {
+}
+/** The unit after the number, smaller and quieter, sized from the value it is in. */
+declare function StatUnit({ className, ...props }: StatUnitProps): import("react").JSX.Element;
+declare namespace StatUnit {
+    var displayName: string;
+}
+export interface StatBadgeProps extends ComponentProps<'span'> {
+}
+/** How the reading stands, in a pill on the row's trailing side. */
+declare function StatBadge({ className, ...props }: StatBadgeProps): import("react").JSX.Element;
+declare namespace StatBadge {
+    var displayName: string;
+}
+export declare const Stat: typeof StatRoot & {
+    Content: typeof StatContent;
+    Label: typeof StatLabel;
+    Description: typeof StatDescription;
+    Value: typeof StatValue;
+    Unit: typeof StatUnit;
+    Badge: typeof StatBadge;
+};
+export { StatContent, StatLabel, StatDescription, StatValue, StatUnit, StatBadge };

package/dist/components/stat/index.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { tv } from 'tailwind-variants';
+const statVariants = tv({
+    slots: {
+        root: 'flex items-end justify-between gap-4',
+        content: 'flex flex-col gap-1',
+        label: 'text-sm text-muted-foreground',
+        description: 'text-sm font-medium',
+        // Solid inside a row, so its foot lines up with the badge's.
+        value: 'group/stat-value font-bold tracking-tight in-data-[slot=stat]:leading-none',
+        unit: [
+            'ms-1 text-sm font-medium text-muted-foreground',
+            'group-data-[size=lg]/stat-value:ms-1.5 group-data-[size=lg]/stat-value:text-base',
+        ],
+        badge: 'rounded-full bg-muted px-2.5 py-1 text-xs font-medium text-muted-foreground',
+    },
+    variants: {
+        size: {
+            sm: { value: 'text-2xl' },
+            md: { value: 'text-3xl' },
+            lg: { value: 'text-4xl' },
+        },
+        weight: {
+            normal: {},
+            medium: { label: 'font-medium' },
+        },
+    },
+});
+/** A row: the label and value on the leading side, a badge on the trailing one. */
+function StatRoot({ className, ...props }) {
+    return _jsx("div", { "data-slot": "stat", className: statVariants().root({ className }), ...props });
+}
+StatRoot.displayName = 'Stat';
+/** The label and the value, stacked. Used on its own when there is no badge. */
+function StatContent({ className, ...props }) {
+    return _jsx("div", { "data-slot": "stat-content", className: statVariants().content({ className }), ...props });
+}
+StatContent.displayName = 'Stat.Content';
+/** What is measured, in a quiet line over the value. */
+function StatLabel({ weight = 'normal', className, ...props }) {
+    return _jsx("p", { "data-slot": "stat-label", className: statVariants({ weight }).label({ className }), ...props });
+}
+StatLabel.displayName = 'Stat.Label';
+/** What the reading means, in words: "Answering slowly". Written under the label. */
+function StatDescription({ className, ...props }) {
+    return (_jsx("p", { "data-slot": "stat-description", className: statVariants().description({ className }), ...props }));
+}
+StatDescription.displayName = 'Stat.Description';
+/** The figure. Put a `Stat.Unit` inside it, after the number. */
+function StatValue({ size = 'lg', className, ...props }) {
+    return (_jsx("p", { "data-slot": "stat-value", "data-size": size, className: statVariants({ size }).value({ className }), ...props }));
+}
+StatValue.displayName = 'Stat.Value';
+/** The unit after the number, smaller and quieter, sized from the value it is in. */
+function StatUnit({ className, ...props }) {
+    return _jsx("span", { "data-slot": "stat-unit", className: statVariants().unit({ className }), ...props });
+}
+StatUnit.displayName = 'Stat.Unit';
+/** How the reading stands, in a pill on the row's trailing side. */
+function StatBadge({ className, ...props }) {
+    return _jsx("span", { "data-slot": "stat-badge", className: statVariants().badge({ className }), ...props });
+}
+StatBadge.displayName = 'Stat.Badge';
+export const Stat = Object.assign(StatRoot, {
+    Content: StatContent,
+    Label: StatLabel,
+    Description: StatDescription,
+    Value: StatValue,
+    Unit: StatUnit,
+    Badge: StatBadge,
+});
+export { StatContent, StatLabel, StatDescription, StatValue, StatUnit, StatBadge };

package/dist/components/tilt-card/index.d.ts

@@ -5,7 +5,10 @@
  * ```tsx
  * <TiltCard>
  *   <TiltCard.Layer depth={24}>…a figure…</TiltCard.Layer>
- *   <TiltCard.Layer depth={8}>…its caption…</TiltCard.Layer>
+ *   <TiltCard.Layer depth={8}>
+ *     <TiltCard.Title>Versions</TiltCard.Title>
+ *     <TiltCard.Description>Every save is kept.</TiltCard.Description>
+ *   </TiltCard.Layer>
  * </TiltCard>
  * ```
  *
@@ -54,7 +57,25 @@ declare function TiltCardLayer({ depth, className, style, ...props }: TiltCardLa
 declare namespace TiltCardLayer {
     var displayName: string;
 }
+export interface TiltCardTitleProps extends ComponentProps<'h3'> {
+    /** The heading level, to fit the page around the card. Default `h3`. */
+    as?: 'h2' | 'h3' | 'h4' | 'p';
+}
+/** What the card is about. */
+declare function TiltCardTitle({ as: Tag, className, ...props }: TiltCardTitleProps): import("react").JSX.Element;
+declare namespace TiltCardTitle {
+    var displayName: string;
+}
+export interface TiltCardDescriptionProps extends ComponentProps<'p'> {
+}
+/** A line or two of body text, under the title. */
+declare function TiltCardDescription({ className, ...props }: TiltCardDescriptionProps): import("react").JSX.Element;
+declare namespace TiltCardDescription {
+    var displayName: string;
+}
 export declare const TiltCard: typeof TiltCardRoot & {
     Layer: typeof TiltCardLayer;
+    Title: typeof TiltCardTitle;
+    Description: typeof TiltCardDescription;
 };
-export { TiltCardLayer };
+export { TiltCardLayer, TiltCardTitle, TiltCardDescription };

package/dist/components/tilt-card/index.js

@@ -7,7 +7,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * ```tsx
  * <TiltCard>
  *   <TiltCard.Layer depth={24}>…a figure…</TiltCard.Layer>
- *   <TiltCard.Layer depth={8}>…its caption…</TiltCard.Layer>
+ *   <TiltCard.Layer depth={8}>
+ *     <TiltCard.Title>Versions</TiltCard.Title>
+ *     <TiltCard.Description>Every save is kept.</TiltCard.Description>
+ *   </TiltCard.Layer>
  * </TiltCard>
  * ```
  *
@@ -44,6 +47,8 @@ const tiltCardVariants = tv({
         card: 'relative overflow-hidden rounded-3xl border bg-card text-card-foreground shadow-sm transition-[transform,box-shadow,border-color] duration-500 ease-out [transform-style:preserve-3d] [transform:rotateX(var(--pu-rx,0deg))_rotateY(var(--pu-ry,0deg))] group-data-[tilting]/tilt:shadow-xl group-data-[tilting]/tilt:duration-100 motion-reduce:transition-none motion-reduce:[transform:none]',
         // The light is the card's colour, soft and wide, centred on the pointer.
         glare: 'pointer-events-none absolute inset-0 rounded-[inherit] bg-[radial-gradient(18rem_circle_at_var(--pu-gx,50%)_var(--pu-gy,50%),color-mix(in_oklab,var(--pu-color)_16%,transparent),transparent_70%)] opacity-0 transition-opacity duration-300 group-data-[tilting]/tilt:opacity-100',
+        title: 'text-base font-semibold',
+        description: 'text-sm text-muted-foreground',
         layer: 'transition-transform duration-500 ease-out [transform:translate3d(calc(var(--pu-px,0)*var(--pu-depth)*1px),calc(var(--pu-py,0)*var(--pu-depth)*1px),calc(var(--pu-depth)*1px))] group-data-[tilting]/tilt:duration-100 motion-reduce:[transform:none]',
     },
     variants: {
@@ -106,9 +111,21 @@ function TiltCardLayer({ depth = 16, className, style, ...props }) {
     return (_jsx("div", { className: tiltCardVariants().layer({ className }), style: { ['--pu-depth']: depth, ...style }, ...props }));
 }
 TiltCardLayer.displayName = 'TiltCard.Layer';
+/** What the card is about. */
+function TiltCardTitle({ as: Tag = 'h3', className, ...props }) {
+    return _jsx(Tag, { "data-slot": "tilt-card-title", className: tiltCardVariants().title({ className }), ...props });
+}
+TiltCardTitle.displayName = 'TiltCard.Title';
+/** A line or two of body text, under the title. */
+function TiltCardDescription({ className, ...props }) {
+    return (_jsx("p", { "data-slot": "tilt-card-description", className: tiltCardVariants().description({ className }), ...props }));
+}
+TiltCardDescription.displayName = 'TiltCard.Description';
 export const TiltCard = Object.assign(TiltCardRoot, {
     Layer: TiltCardLayer,
+    Title: TiltCardTitle,
+    Description: TiltCardDescription,
 });
 /* By name as well, for a Server Component, which cannot dot into a client
    module. */
-export { TiltCardLayer };
+export { TiltCardLayer, TiltCardTitle, TiltCardDescription };

package/dist/index.d.ts

@@ -1,15 +1,16 @@
 export { cn } from './lib/cn.js';
 export { RollingNumber, type RollingNumberProps } from './components/rolling-number/index.js';
-export { Planet, PlanetGlobe, PlanetMarker, PlanetControls, type PlanetProps, type PlanetHandle, type PlanetRotation, type PlanetGlobeProps, type PlanetMarkerProps, type PlanetMarkerColor, type PlanetControlsProps, } from './components/planet/index.js';
-export { Feedback, FeedbackTrigger, FeedbackContent, FeedbackPanel, FeedbackTitle, FeedbackClose, FeedbackField, FeedbackFooter, FeedbackCancel, FeedbackSubmit, type FeedbackProps, type FeedbackTriggerProps, type FeedbackContentProps, type FeedbackPanelProps, type FeedbackTitleProps, type FeedbackCloseProps, type FeedbackFieldProps, type FeedbackFooterProps, type FeedbackActionProps, type FeedbackSubmitProps, } from './components/feedback/index.js';
+export { Planet, PlanetGlobe, PlanetMarker, PlanetControls, PlanetList, PlanetListItem, type PlanetProps, type PlanetHandle, type PlanetRotation, type PlanetGlobeProps, type PlanetMarkerProps, type PlanetMarkerColor, type PlanetControlsProps, type PlanetListProps, type PlanetListItemProps, } from './components/planet/index.js';
+export { Feedback, FeedbackTrigger, FeedbackContent, FeedbackPanel, FeedbackTitle, FeedbackClose, FeedbackField, FeedbackDescription, FeedbackMessage, FeedbackRating, FeedbackFooter, FeedbackCancel, FeedbackSubmit, type FeedbackProps, type FeedbackTriggerProps, type FeedbackContentProps, type FeedbackPanelProps, type FeedbackTitleProps, type FeedbackCloseProps, type FeedbackFieldProps, type FeedbackDescriptionProps, type FeedbackMessageProps, type FeedbackRatingProps, type FeedbackFooterProps, type FeedbackActionProps, type FeedbackSubmitProps, } from './components/feedback/index.js';
 export { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter, type CardProps, type CardHeaderProps, type CardTitleProps, type CardDescriptionProps, type CardActionProps, type CardContentProps, type CardFooterProps, } from './components/card/index.js';
 export { Frame, FrameHeader, FrameTitle, FrameDescription, FrameAction, FramePanel, FrameRow, FrameMedia, FrameContent, FrameActions, FrameSection, FrameFooter, type FrameProps, type FrameVariant, type FrameHeaderProps, type FrameTitleProps, type FrameDescriptionProps, type FrameActionProps, type FramePanelProps, type FrameRowProps, type FrameMediaProps, type FrameContentProps, type FrameActionsProps, type FrameSectionProps, type FrameFooterProps, } from './components/frame/index.js';
 export { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetBody, SheetFooter, SheetClose, SheetStage, type SheetProps, type SheetSide, type SheetTriggerProps, type SheetContentProps, type SheetHeaderProps, type SheetTitleProps, type SheetDescriptionProps, type SheetBodyProps, type SheetFooterProps, type SheetCloseProps, type SheetStageProps, } from './components/sheet/index.js';
-export { DayGrid, DayGridLegend, type DayGridProps, type DayGridLegendProps, type DayGridColor, type DayCell, type DayLevel, } from './components/day-grid/index.js';
-export { RangeMeter, type RangeMeterProps, type RangeMeterColor, } from './components/range-meter/index.js';
+export { DayGrid, DayGridLegend, DayGridWeekdays, DayGridCaption, DayGridTitle, DayGridDescription, type DayGridProps, type DayGridLegendProps, type DayGridWeekdaysProps, type DayGridCaptionProps, type DayGridTitleProps, type DayGridDescriptionProps, type DayGridColor, type DayCell, type DayLevel, } from './components/day-grid/index.js';
+export { RangeMeter, RangeMeterLabel, RangeMeterScale, type RangeMeterProps, type RangeMeterLabelProps, type RangeMeterScaleProps, type RangeMeterColor, } from './components/range-meter/index.js';
 export { BarPicker, type BarPickerProps, type BarPickerBar, type BarPickerColor, } from './components/bar-picker/index.js';
 export { Kpi, KpiHeader, KpiIcon, KpiTitle, KpiActions, KpiContent, KpiStat, KpiValue, KpiTrend, KpiChart, KpiProgress, KpiFooter, KpiSeparator, KpiGroup, type KpiProps, type KpiHeaderProps, type KpiIconProps, type KpiTitleProps, type KpiActionsProps, type KpiContentProps, type KpiStatProps, type KpiValueProps, type KpiTrendProps, type KpiChartProps, type KpiProgressProps, type KpiFooterProps, type KpiSeparatorProps, type KpiGroupProps, type KpiColor, type KpiGoodDirection, type KpiTone, } from './components/kpi/index.js';
-export { LaneBoard, LaneBoardTitle, LaneBoardCode, LaneBoardRow, LaneBoardSteps, LaneBoardTag, LaneBoardMeta, type LaneBoardProps, type LaneBoardTitleProps, type LaneBoardCodeProps, type LaneBoardRowProps, type LaneBoardStepsProps, type LaneBoardTagProps, type LaneBoardMetaProps, type LaneBoardCard, type LaneBoardLane, type LaneBoardMove, type LaneBoardColor, } from './components/lane-board/index.js';
-export { Flow, FlowBackground, FlowNode, FlowHandle, FlowEdge, FlowGroup, FlowControls, FlowMiniMap, type FlowProps, type FlowBackgroundProps, type FlowNodeProps, type FlowHandleProps, type FlowEdgeProps, type FlowGroupProps, type FlowControlsProps, type FlowMiniMapProps, type FlowViewport, type FlowNodePosition, type FlowEndpoint, type FlowEndpointReference, type FlowConnection, type FlowEdgeVariant, type FlowColor, type FlowSide, } from './components/flow/index.js';
-export { TiltCard, TiltCardLayer, type TiltCardProps, type TiltCardLayerProps, type TiltCardColor, } from './components/tilt-card/index.js';
-export { CommandDock, CommandDockTrigger, CommandDockPanel, CommandDockInput, CommandDockResults, CommandDockRow, CommandDockStatus, type CommandDockProps, type CommandDockTriggerProps, type CommandDockPanelProps, type CommandDockInputProps, type CommandDockResultsProps, type CommandDockRowProps, type CommandDockStatusProps, } from './components/command-dock/index.js';
+export { LaneBoard, LaneBoardTitle, LaneBoardCode, LaneBoardRow, LaneBoardSteps, LaneBoardTag, LaneBoardMeta, LaneBoardAvatar, type LaneBoardProps, type LaneBoardTitleProps, type LaneBoardCodeProps, type LaneBoardRowProps, type LaneBoardStepsProps, type LaneBoardTagProps, type LaneBoardMetaProps, type LaneBoardAvatarProps, type LaneBoardCard, type LaneBoardLane, type LaneBoardMove, type LaneBoardColor, } from './components/lane-board/index.js';
+export { Flow, FlowBackground, FlowNode, FlowHandle, FlowEdge, FlowGroup, FlowGroupItem, FlowNodeHeader, FlowNodeContent, FlowNodeTitle, FlowNodeDescription, FlowNodeBadge, FlowControls, FlowMiniMap, type FlowProps, type FlowBackgroundProps, type FlowNodeProps, type FlowHandleProps, type FlowEdgeProps, type FlowGroupProps, type FlowGroupItemProps, type FlowNodeHeaderProps, type FlowNodeContentProps, type FlowNodeTitleProps, type FlowNodeDescriptionProps, type FlowNodeBadgeProps, type FlowControlsProps, type FlowMiniMapProps, type FlowViewport, type FlowNodePosition, type FlowEndpoint, type FlowEndpointReference, type FlowConnection, type FlowEdgeVariant, type FlowColor, type FlowSide, } from './components/flow/index.js';
+export { TiltCard, TiltCardLayer, TiltCardTitle, TiltCardDescription, type TiltCardProps, type TiltCardLayerProps, type TiltCardTitleProps, type TiltCardDescriptionProps, type TiltCardColor, } from './components/tilt-card/index.js';
+export { Stat, StatContent, StatLabel, StatDescription, StatValue, StatUnit, StatBadge, type StatProps, type StatContentProps, type StatLabelProps, type StatDescriptionProps, type StatValueProps, type StatUnitProps, type StatBadgeProps, } from './components/stat/index.js';
+export { CommandDock, CommandDockTrigger, CommandDockPanel, CommandDockInput, CommandDockResults, CommandDockRow, CommandDockRowTitle, CommandDockRowMeta, CommandDockStatus, type CommandDockProps, type CommandDockTriggerProps, type CommandDockPanelProps, type CommandDockInputProps, type CommandDockResultsProps, type CommandDockRowProps, type CommandDockRowTitleProps, type CommandDockRowMetaProps, type CommandDockStatusProps, } from './components/command-dock/index.js';

package/dist/index.js

@@ -1,15 +1,16 @@
 export { cn } from './lib/cn.js';
 export { RollingNumber } from './components/rolling-number/index.js';
-export { Planet, PlanetGlobe, PlanetMarker, PlanetControls, } from './components/planet/index.js';
-export { Feedback, FeedbackTrigger, FeedbackContent, FeedbackPanel, FeedbackTitle, FeedbackClose, FeedbackField, FeedbackFooter, FeedbackCancel, FeedbackSubmit, } from './components/feedback/index.js';
+export { Planet, PlanetGlobe, PlanetMarker, PlanetControls, PlanetList, PlanetListItem, } from './components/planet/index.js';
+export { Feedback, FeedbackTrigger, FeedbackContent, FeedbackPanel, FeedbackTitle, FeedbackClose, FeedbackField, FeedbackDescription, FeedbackMessage, FeedbackRating, FeedbackFooter, FeedbackCancel, FeedbackSubmit, } from './components/feedback/index.js';
 export { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter, } from './components/card/index.js';
 export { Frame, FrameHeader, FrameTitle, FrameDescription, FrameAction, FramePanel, FrameRow, FrameMedia, FrameContent, FrameActions, FrameSection, FrameFooter, } from './components/frame/index.js';
 export { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetBody, SheetFooter, SheetClose, SheetStage, } from './components/sheet/index.js';
-export { DayGrid, DayGridLegend, } from './components/day-grid/index.js';
-export { RangeMeter, } from './components/range-meter/index.js';
+export { DayGrid, DayGridLegend, DayGridWeekdays, DayGridCaption, DayGridTitle, DayGridDescription, } from './components/day-grid/index.js';
+export { RangeMeter, RangeMeterLabel, RangeMeterScale, } from './components/range-meter/index.js';
 export { BarPicker, } from './components/bar-picker/index.js';
 export { Kpi, KpiHeader, KpiIcon, KpiTitle, KpiActions, KpiContent, KpiStat, KpiValue, KpiTrend, KpiChart, KpiProgress, KpiFooter, KpiSeparator, KpiGroup, } from './components/kpi/index.js';
-export { LaneBoard, LaneBoardTitle, LaneBoardCode, LaneBoardRow, LaneBoardSteps, LaneBoardTag, LaneBoardMeta, } from './components/lane-board/index.js';
-export { Flow, FlowBackground, FlowNode, FlowHandle, FlowEdge, FlowGroup, FlowControls, FlowMiniMap, } from './components/flow/index.js';
-export { TiltCard, TiltCardLayer, } from './components/tilt-card/index.js';
-export { CommandDock, CommandDockTrigger, CommandDockPanel, CommandDockInput, CommandDockResults, CommandDockRow, CommandDockStatus, } from './components/command-dock/index.js';
+export { LaneBoard, LaneBoardTitle, LaneBoardCode, LaneBoardRow, LaneBoardSteps, LaneBoardTag, LaneBoardMeta, LaneBoardAvatar, } from './components/lane-board/index.js';
+export { Flow, FlowBackground, FlowNode, FlowHandle, FlowEdge, FlowGroup, FlowGroupItem, FlowNodeHeader, FlowNodeContent, FlowNodeTitle, FlowNodeDescription, FlowNodeBadge, FlowControls, FlowMiniMap, } from './components/flow/index.js';
+export { TiltCard, TiltCardLayer, TiltCardTitle, TiltCardDescription, } from './components/tilt-card/index.js';
+export { Stat, StatContent, StatLabel, StatDescription, StatValue, StatUnit, StatBadge, } from './components/stat/index.js';
+export { CommandDock, CommandDockTrigger, CommandDockPanel, CommandDockInput, CommandDockResults, CommandDockRow, CommandDockRowTitle, CommandDockRowMeta, CommandDockStatus, } from './components/command-dock/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "panelui-web",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "PanelUI for the web: animated, data-rich React components styled with Tailwind CSS on shadcn tokens.",
   "type": "module",
   "sideEffects": false,