@wallarm-org/design-system 0.73.0 → 0.74.0

package/dist/components/SimpleCharts/Metric/Metric.figma.js

@@ -0,0 +1,49 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { Chart } from "../Chart/Chart.js";
+import { ChartHeader } from "../Chart/ChartHeader.js";
+import { ChartTitle } from "../Chart/ChartTitle.js";
+import { Metric } from "./Metric.js";
+import { MetricCaption } from "./MetricCaption.js";
+import { MetricDelta } from "./MetricDelta.js";
+import { MetricHeader } from "./MetricHeader.js";
+import { MetricTotal } from "./MetricTotal.js";
+import { MetricValue } from "./MetricValue.js";
+const figmaNodeUrl = 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=11437-11939';
+code_connect.connect(Metric, figmaNodeUrl, {
+    props: {
+        title: code_connect.string('Title')
+    },
+    example: ({ title })=>/*#__PURE__*/ jsxs(Chart, {
+            children: [
+                /*#__PURE__*/ jsx(ChartHeader, {
+                    children: /*#__PURE__*/ jsx(ChartTitle, {
+                        children: title
+                    })
+                }),
+                /*#__PURE__*/ jsxs(Metric, {
+                    children: [
+                        /*#__PURE__*/ jsxs(MetricHeader, {
+                            children: [
+                                /*#__PURE__*/ jsx(MetricValue, {
+                                    children: "91"
+                                }),
+                                /*#__PURE__*/ jsx(MetricTotal, {
+                                    connector: "of",
+                                    children: "120"
+                                }),
+                                /*#__PURE__*/ jsx(MetricDelta, {
+                                    value: 10,
+                                    trend: "up",
+                                    sentiment: "negative"
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx(MetricCaption, {
+                            children: "blocked today"
+                        })
+                    ]
+                })
+            ]
+        })
+});

package/dist/components/SimpleCharts/Metric/Metric.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../../utils/cn.js";
+import { TestIdProvider } from "../../../utils/testId.js";
+import { metricRootClasses } from "./classes.js";
+const Metric = ({ className, children, ref, 'data-testid': testId, ...props })=>/*#__PURE__*/ jsx(TestIdProvider, {
+        value: testId,
+        children: /*#__PURE__*/ jsx("div", {
+            ...props,
+            ref: ref,
+            "data-slot": "metric",
+            "data-testid": testId,
+            className: cn(metricRootClasses, className),
+            children: children
+        })
+    });
+Metric.displayName = 'Metric';
+export { Metric };

package/dist/components/SimpleCharts/Metric/MetricCaption.d.ts

@@ -0,0 +1,6 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+export interface MetricCaptionProps extends HTMLAttributes<HTMLSpanElement> {
+    ref?: Ref<HTMLSpanElement>;
+}
+/** The muted secondary subline rendered under the header. */
+export declare const MetricCaption: FC<MetricCaptionProps>;

package/dist/components/SimpleCharts/Metric/MetricCaption.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../../utils/cn.js";
+import { useTestId } from "../../../utils/testId.js";
+import { metricCaptionClasses } from "./classes.js";
+const MetricCaption = ({ className, ref, ...props })=>{
+    const testId = useTestId('caption');
+    return /*#__PURE__*/ jsx("span", {
+        ...props,
+        ref: ref,
+        "data-slot": "metric-caption",
+        "data-testid": testId,
+        className: cn(metricCaptionClasses, className)
+    });
+};
+MetricCaption.displayName = 'MetricCaption';
+export { MetricCaption };

package/dist/components/SimpleCharts/Metric/MetricDelta.d.ts

@@ -0,0 +1,10 @@
+import type { FC } from 'react';
+import { type ChartDeltaProps } from '../internal/ChartDelta';
+export type MetricDeltaProps = Pick<ChartDeltaProps, 'value' | 'trend' | 'sentiment'>;
+/**
+ * The trend chip brick — a thin wrapper over the shared `ChartDelta` so it earns a
+ * `--delta` slot id while `ChartDelta` stays the single source of colour/arrow logic.
+ * `sentiment` sets the colour (positive → green, negative → red, neutral → slate),
+ * `trend` sets the arrow — independent axes.
+ */
+export declare const MetricDelta: FC<MetricDeltaProps>;

package/dist/components/SimpleCharts/Metric/MetricDelta.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { useTestId } from "../../../utils/testId.js";
+import { ChartDelta } from "../internal/ChartDelta.js";
+const MetricDelta = (props)=>{
+    const testId = useTestId('delta');
+    return /*#__PURE__*/ jsx(ChartDelta, {
+        ...props,
+        "data-testid": testId
+    });
+};
+MetricDelta.displayName = 'MetricDelta';
+export { MetricDelta };

package/dist/components/SimpleCharts/Metric/MetricHeader.d.ts

@@ -0,0 +1,9 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+export interface MetricHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * The baseline row holding `MetricValue` + optional `MetricTotal` + optional `MetricDelta`.
+ * Exported as its own brick so `HorizontalBarStack` can reuse the exact same header.
+ */
+export declare const MetricHeader: FC<MetricHeaderProps>;

package/dist/components/SimpleCharts/Metric/MetricHeader.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../../utils/cn.js";
+import { useTestId } from "../../../utils/testId.js";
+import { metricHeaderClasses } from "./classes.js";
+const MetricHeader = ({ className, ref, ...props })=>{
+    const testId = useTestId('header');
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        ref: ref,
+        "data-slot": "metric-header",
+        "data-testid": testId,
+        className: cn(metricHeaderClasses, className)
+    });
+};
+MetricHeader.displayName = 'MetricHeader';
+export { MetricHeader };

package/dist/components/SimpleCharts/Metric/MetricSkeleton.d.ts

@@ -0,0 +1,12 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+import type { TestableProps } from '../../../utils/testId';
+export interface MetricSkeletonProps extends HTMLAttributes<HTMLDivElement>, TestableProps {
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * Loading placeholder for `Metric`, matching `BarListSkeleton` / `PieChartSkeleton`.
+ * A value-sized block plus a thin caption line, sized to the loaded layout so the
+ * card doesn't jump when data arrives. Compose inside the `Chart` card in place
+ * of `Metric`.
+ */
+export declare const MetricSkeleton: FC<MetricSkeletonProps>;

package/dist/components/SimpleCharts/Metric/MetricSkeleton.js

@@ -0,0 +1,31 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../../utils/cn.js";
+import { Skeleton } from "../../Skeleton/index.js";
+import { metricRootClasses, metricSkeletonLineClasses } from "./classes.js";
+const MetricSkeleton = ({ className, ref, 'data-testid': testId, ...props })=>/*#__PURE__*/ jsxs("div", {
+        ...props,
+        ref: ref,
+        "data-slot": "metric-skeleton",
+        "data-testid": testId,
+        "aria-busy": "true",
+        "aria-live": "polite",
+        className: cn(metricRootClasses, className),
+        children: [
+            /*#__PURE__*/ jsx(Skeleton, {
+                width: "72px",
+                height: "36px",
+                rounded: 6
+            }),
+            /*#__PURE__*/ jsx("div", {
+                "data-slot": "metric-skeleton-line",
+                className: metricSkeletonLineClasses,
+                children: /*#__PURE__*/ jsx(Skeleton, {
+                    width: "100%",
+                    height: "8px",
+                    rounded: 6
+                })
+            })
+        ]
+    });
+MetricSkeleton.displayName = 'MetricSkeleton';
+export { MetricSkeleton };

package/dist/components/SimpleCharts/Metric/MetricTotal.d.ts

@@ -0,0 +1,12 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+export type MetricTotalConnector = 'slash' | 'of' | 'total';
+export interface MetricTotalProps extends HTMLAttributes<HTMLSpanElement> {
+    ref?: Ref<HTMLSpanElement>;
+    /** How the denominator reads: `/120` (`slash`) · `of 120` (`of`) · `120 total` (`total`). */
+    connector?: MetricTotalConnector;
+}
+/**
+ * The denominator after the value. A numeric child is formatted with
+ * `toLocaleString('en-US')`. The number is primary text; the connector word is muted.
+ */
+export declare const MetricTotal: FC<MetricTotalProps>;

package/dist/components/SimpleCharts/Metric/MetricTotal.js

@@ -0,0 +1,36 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../../utils/cn.js";
+import { useTestId } from "../../../utils/testId.js";
+import { metricTotalClasses, metricTotalValueClasses, metricTotalWordClasses } from "./classes.js";
+const MetricTotal = ({ connector = 'slash', className, children, ref, ...props })=>{
+    const testId = useTestId('total');
+    const num = 'number' == typeof children ? children.toLocaleString('en-US') : children;
+    return /*#__PURE__*/ jsxs("span", {
+        ...props,
+        ref: ref,
+        "data-slot": "metric-total",
+        "data-testid": testId,
+        className: cn(metricTotalClasses, className),
+        children: [
+            'of' === connector && /*#__PURE__*/ jsx("span", {
+                className: metricTotalWordClasses,
+                children: "of"
+            }),
+            /*#__PURE__*/ jsx("span", {
+                className: metricTotalValueClasses,
+                children: 'slash' === connector ? /*#__PURE__*/ jsxs(Fragment, {
+                    children: [
+                        "/",
+                        num
+                    ]
+                }) : num
+            }),
+            'total' === connector && /*#__PURE__*/ jsx("span", {
+                className: metricTotalWordClasses,
+                children: "total"
+            })
+        ]
+    });
+};
+MetricTotal.displayName = 'MetricTotal';
+export { MetricTotal };

package/dist/components/SimpleCharts/Metric/MetricValue.d.ts

@@ -0,0 +1,9 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+export interface MetricValueProps extends HTMLAttributes<HTMLSpanElement> {
+    ref?: Ref<HTMLSpanElement>;
+}
+/**
+ * The headline number. A numeric child is formatted with `toLocaleString('en-US')`;
+ * any other node renders as-is.
+ */
+export declare const MetricValue: FC<MetricValueProps>;

package/dist/components/SimpleCharts/Metric/MetricValue.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../../utils/cn.js";
+import { useTestId } from "../../../utils/testId.js";
+import { metricValueClasses } from "./classes.js";
+const MetricValue = ({ className, children, ref, ...props })=>{
+    const testId = useTestId('value');
+    const content = 'number' == typeof children ? children.toLocaleString('en-US') : children;
+    return /*#__PURE__*/ jsx("span", {
+        ...props,
+        ref: ref,
+        "data-slot": "metric-value",
+        "data-testid": testId,
+        className: cn(metricValueClasses, className),
+        children: content
+    });
+};
+MetricValue.displayName = 'MetricValue';
+export { MetricValue };

package/dist/components/SimpleCharts/Metric/classes.d.ts

@@ -0,0 +1,8 @@
+export declare const metricRootClasses = "flex flex-col items-start px-16 py-8 w-full";
+export declare const metricHeaderClasses = "flex items-baseline gap-8";
+export declare const metricValueClasses = "font-sans-display text-3xl font-medium leading-3xl text-text-primary";
+export declare const metricTotalClasses = "-ml-2 flex items-baseline gap-6";
+export declare const metricTotalValueClasses = "font-sans-display text-lg font-medium text-text-primary";
+export declare const metricTotalWordClasses = "text-xs font-normal text-text-secondary";
+export declare const metricCaptionClasses = "text-xs text-text-secondary";
+export declare const metricSkeletonLineClasses = "w-full py-4";

package/dist/components/SimpleCharts/Metric/classes.js

@@ -0,0 +1,9 @@
+const metricRootClasses = 'flex flex-col items-start px-16 py-8 w-full';
+const metricHeaderClasses = 'flex items-baseline gap-8';
+const metricValueClasses = 'font-sans-display text-3xl font-medium leading-3xl text-text-primary';
+const metricTotalClasses = '-ml-2 flex items-baseline gap-6';
+const metricTotalValueClasses = 'font-sans-display text-lg font-medium text-text-primary';
+const metricTotalWordClasses = 'text-xs font-normal text-text-secondary';
+const metricCaptionClasses = 'text-xs text-text-secondary';
+const metricSkeletonLineClasses = 'w-full py-4';
+export { metricCaptionClasses, metricHeaderClasses, metricRootClasses, metricSkeletonLineClasses, metricTotalClasses, metricTotalValueClasses, metricTotalWordClasses, metricValueClasses };

package/dist/components/SimpleCharts/Metric/index.d.ts

@@ -0,0 +1,7 @@
+export { Metric, type MetricProps } from './Metric';
+export { MetricCaption, type MetricCaptionProps } from './MetricCaption';
+export { MetricDelta, type MetricDeltaProps } from './MetricDelta';
+export { MetricHeader, type MetricHeaderProps } from './MetricHeader';
+export { MetricSkeleton, type MetricSkeletonProps } from './MetricSkeleton';
+export { MetricTotal, type MetricTotalConnector, type MetricTotalProps } from './MetricTotal';
+export { MetricValue, type MetricValueProps } from './MetricValue';

package/dist/components/SimpleCharts/Metric/index.js

@@ -0,0 +1,7 @@
+export { Metric } from "./Metric.js";
+export { MetricCaption } from "./MetricCaption.js";
+export { MetricDelta } from "./MetricDelta.js";
+export { MetricHeader } from "./MetricHeader.js";
+export { MetricSkeleton } from "./MetricSkeleton.js";
+export { MetricTotal } from "./MetricTotal.js";
+export { MetricValue } from "./MetricValue.js";

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

@@ -1,8 +1,9 @@
 export { BarList, BarListBar, type BarListBarProps, BarListItem, type BarListItemProps, BarListLabel, type BarListLabelProps, BarListPercent, type BarListPercentProps, type BarListProps, BarListSkeleton, type BarListSkeletonProps, BarListValue, type BarListValueProps, } from './BarList';
 export { Chart, ChartActions, type ChartActionsProps, ChartEmpty, type ChartEmptyProps, ChartHeader, type ChartHeaderProps, type ChartProps, ChartTitle, type ChartTitleProps, } from './Chart';
-export { HorizontalBar, type HorizontalBarDatum, type HorizontalBarProps, } from './HorizontalBar';
+export { HorizontalBarStack, type HorizontalBarStackDatum, type HorizontalBarStackProps, HorizontalBarStackSkeleton, type HorizontalBarStackSkeletonProps, } from './HorizontalBarStack';
 export { type ChartTimeFormatters, useChartTimeFormatters } from './hooks';
 export { LineChart, LineChartBody, type LineChartBodyProps, type LineChartDatum, LineChartEmpty, type LineChartEmptyProps, LineChartGrid, type LineChartGridProps, LineChartHoverPopover, LineChartHoverPopoverDot, type LineChartHoverPopoverDotProps, type LineChartHoverPopoverProps, LineChartHoverPopoverRow, type LineChartHoverPopoverRowProps, LineChartHoverPopoverTimestamp, type LineChartHoverPopoverTimestampProps, LineChartLegend, LineChartLegendItem, type LineChartLegendItemProps, type LineChartLegendOrientation, type LineChartLegendProps, LineChartLine, type LineChartLineProps, type LineChartProps, type LineChartSeries, LineChartTooltip, type LineChartTooltipProps, type LineChartTooltipRenderArgs, LineChartXAxis, type LineChartXAxisProps, LineChartYAxis, type LineChartYAxisProps, LineChartZoomBrush, type LineChartZoomBrushProps, LineChartZoomPopover, LineChartZoomPopoverConfirm, type LineChartZoomPopoverConfirmProps, type LineChartZoomPopoverProps, LineChartZoomPopoverRange, type LineChartZoomPopoverRangeProps, type LineChartZoomRange, } from './LineChart';
 export { type ChartHourCycle, type ChartTimeFormatterOptions, type ChartTimeOrder, formatChartDate, formatChartDateTime, formatChartHour, formatChartTimezone, withTimezoneChip, } from './lib';
+export { Metric, MetricCaption, type MetricCaptionProps, MetricDelta, type MetricDeltaProps, MetricHeader, type MetricHeaderProps, type MetricProps, MetricSkeleton, type MetricSkeletonProps, MetricTotal, type MetricTotalConnector, type MetricTotalProps, MetricValue, type MetricValueProps, } from './Metric';
 export { LegendDot, type LegendDotProps, PieChart, PieChartCenter, PieChartCenterLabel, type PieChartCenterLabelPluralRules, type PieChartCenterLabelProps, type PieChartCenterProps, PieChartCenterValue, type PieChartCenterValueProps, type PieChartDatum, PieChartDonut, type PieChartDonutProps, PieChartLegend, PieChartLegendItem, type PieChartLegendItemProps, PieChartLegendPercent, type PieChartLegendPercentProps, type PieChartLegendPercentVariant, type PieChartLegendProps, PieChartLegendValue, type PieChartLegendValueProps, type PieChartProps, PieChartSkeleton, type PieChartSkeletonProps, } from './PieChart';
 export type { ChartColor } from './types';

package/dist/components/SimpleCharts/index.js

@@ -1,7 +1,8 @@
 export { BarList, BarListBar, BarListItem, BarListLabel, BarListPercent, BarListSkeleton, BarListValue } from "./BarList/index.js";
 export { Chart, ChartActions, ChartEmpty, ChartHeader, ChartTitle } from "./Chart/index.js";
-export { HorizontalBar } from "./HorizontalBar/index.js";
+export { HorizontalBarStack, HorizontalBarStackSkeleton } from "./HorizontalBarStack/index.js";
 export { useChartTimeFormatters } from "./hooks/index.js";
 export { LineChart, LineChartBody, LineChartEmpty, LineChartGrid, LineChartHoverPopover, LineChartHoverPopoverDot, LineChartHoverPopoverRow, LineChartHoverPopoverTimestamp, LineChartLegend, LineChartLegendItem, LineChartLine, LineChartTooltip, LineChartXAxis, LineChartYAxis, LineChartZoomBrush, LineChartZoomPopover, LineChartZoomPopoverConfirm, LineChartZoomPopoverRange } from "./LineChart/index.js";
 export { formatChartDate, formatChartDateTime, formatChartHour, formatChartTimezone, withTimezoneChip } from "./lib/index.js";
+export { Metric, MetricCaption, MetricDelta, MetricHeader, MetricSkeleton, MetricTotal, MetricValue } from "./Metric/index.js";
 export { LegendDot, PieChart, PieChartCenter, PieChartCenterLabel, PieChartCenterValue, PieChartDonut, PieChartLegend, PieChartLegendItem, PieChartLegendPercent, PieChartLegendValue, PieChartSkeleton } from "./PieChart/index.js";

package/dist/components/SimpleCharts/internal/ChartDelta.d.ts

@@ -0,0 +1,22 @@
+import type { FC } from 'react';
+export type ChartDeltaSentiment = 'positive' | 'negative' | 'neutral';
+export type ChartDeltaTrend = 'up' | 'down';
+export interface ChartDeltaProps {
+    /** Magnitude shown in the chip; rendered as `Math.abs(value).toLocaleString('en-US')`. */
+    value: number;
+    /** Arrow direction. Defaults to the sign of `value` (`>= 0` → up). */
+    trend?: ChartDeltaTrend;
+    /**
+     * Colour = meaning, and it is independent of the arrow: `positive` → green,
+     * `negative` → red, `neutral` → slate. Defaults to `neutral`. An increase
+     * can therefore read as negative (red ↑) and a decrease as positive (green ↓).
+     */
+    sentiment?: ChartDeltaSentiment;
+    'data-testid'?: string;
+}
+/**
+ * The shared trend chip used by `Metric` and `HorizontalBarStack`. A 2-axis
+ * matrix mirroring the Figma `delta` component: `sentiment` drives the colour,
+ * `trend` drives the arrow — the two are independent.
+ */
+export declare const ChartDelta: FC<ChartDeltaProps>;

package/dist/components/SimpleCharts/internal/ChartDelta.js

@@ -0,0 +1,31 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowDown, ArrowUp } from "../../../icons/index.js";
+import { Badge } from "../../Badge/index.js";
+const SENTIMENT_COLOR = {
+    positive: 'green',
+    negative: 'red',
+    neutral: 'slate'
+};
+const formatNumber = (n)=>n.toLocaleString('en-US');
+const ChartDelta = ({ value, trend, sentiment = 'neutral', 'data-testid': testId })=>{
+    const direction = trend ?? (value >= 0 ? 'up' : 'down');
+    const abs = Math.abs(value);
+    return /*#__PURE__*/ jsxs(Badge, {
+        type: "secondary",
+        color: SENTIMENT_COLOR[sentiment],
+        size: "medium",
+        "data-testid": testId,
+        role: "img",
+        "aria-label": `${direction} ${formatNumber(abs)}`,
+        children: [
+            'up' === direction ? /*#__PURE__*/ jsx(ArrowUp, {
+                "aria-hidden": true
+            }) : /*#__PURE__*/ jsx(ArrowDown, {
+                "aria-hidden": true
+            }),
+            formatNumber(abs)
+        ]
+    });
+};
+ChartDelta.displayName = 'ChartDelta';
+export { ChartDelta };

package/dist/components/SimpleCharts/internal/ChartHoverCard.d.ts

@@ -0,0 +1,26 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+import type { ChartColor } from '../types';
+export interface ChartHoverCardProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const ChartHoverCard: FC<ChartHoverCardProps>;
+export interface ChartHoverCardDotProps extends HTMLAttributes<HTMLSpanElement> {
+    ref?: Ref<HTMLSpanElement>;
+    /** Palette token or CSS colour. Omitted → no inline fill (lets a `className` bg win). */
+    color?: ChartColor | (string & {});
+}
+export declare const ChartHoverCardDot: FC<ChartHoverCardDotProps>;
+export interface ChartHoverCardRowProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    /** Dot colour — palette token or CSS colour. */
+    color?: ChartColor | (string & {});
+    /** Extra dot class (e.g. a `bg-*` escape hatch that wins over `color`). */
+    dotClassName?: string;
+    /** Series label. Ignored when `children` is provided. */
+    label?: ReactNode;
+    /** Value at the hovered point. A number is locale-formatted; `null`/`undefined` → em dash. */
+    value?: number | string | null;
+    /** Override the default (locale) value formatting. */
+    formatValue?: (value: number | string | null | undefined) => ReactNode;
+}
+export declare const ChartHoverCardRow: FC<ChartHoverCardRowProps>;

package/dist/components/SimpleCharts/internal/ChartHoverCard.js

@@ -0,0 +1,57 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../../utils/cn.js";
+import { resolveChartColor } from "../lib/chartPalette.js";
+const chartHoverCardClasses = "bg-bg-surface-2 border border-border-primary-light rounded-12 shadow-md px-12 py-8 min-w-160 flex flex-col gap-4 pointer-events-none";
+const chartHoverCardRowClasses = "relative h-16 w-full pl-12 flex items-center gap-8 text-xs font-mono text-text-primary";
+const chartHoverCardRowDotClasses = 'absolute left-0 top-4';
+const chartHoverCardRowLabelClasses = 'truncate min-w-0 font-normal';
+const chartHoverCardRowValueClasses = 'ml-auto shrink-0 font-medium';
+const chartHoverCardDotClasses = 'inline-block size-8 rounded-2';
+const ChartHoverCard = ({ className, children, ref, ...props })=>/*#__PURE__*/ jsx("div", {
+        ...props,
+        ref: ref,
+        "data-slot": "chart-hover-card",
+        className: cn(chartHoverCardClasses, className),
+        children: children
+    });
+ChartHoverCard.displayName = 'ChartHoverCard';
+const ChartHoverCardDot = ({ color, className, style, ref, ...props })=>/*#__PURE__*/ jsx("span", {
+        ...props,
+        ref: ref,
+        "data-slot": "chart-hover-card-dot",
+        "aria-hidden": "true",
+        className: cn(chartHoverCardDotClasses, className),
+        style: {
+            ...style,
+            backgroundColor: style?.backgroundColor ?? (null != color ? resolveChartColor(color) : void 0)
+        }
+    });
+ChartHoverCardDot.displayName = 'ChartHoverCardDot';
+const defaultFormatValue = (value)=>{
+    if (null == value) return '—';
+    return 'number' == typeof value ? value.toLocaleString('en-US') : value;
+};
+const ChartHoverCardRow = ({ color, dotClassName, label, value, formatValue = defaultFormatValue, className, children, ref, ...props })=>/*#__PURE__*/ jsx("div", {
+        ...props,
+        ref: ref,
+        "data-slot": "chart-hover-card-row",
+        className: cn(chartHoverCardRowClasses, className),
+        children: children ?? /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx(ChartHoverCardDot, {
+                    color: color,
+                    className: cn(chartHoverCardRowDotClasses, dotClassName)
+                }),
+                /*#__PURE__*/ jsx("span", {
+                    className: chartHoverCardRowLabelClasses,
+                    children: label
+                }),
+                /*#__PURE__*/ jsx("span", {
+                    className: chartHoverCardRowValueClasses,
+                    children: formatValue(value)
+                })
+            ]
+        })
+    });
+ChartHoverCardRow.displayName = 'ChartHoverCardRow';
+export { ChartHoverCard, ChartHoverCardDot, ChartHoverCardRow };

package/dist/components/SimpleCharts/internal/index.d.ts

@@ -0,0 +1,2 @@
+export { ChartDelta, type ChartDeltaProps, type ChartDeltaSentiment, type ChartDeltaTrend, } from './ChartDelta';
+export { ChartHoverCard, ChartHoverCardDot, type ChartHoverCardDotProps, type ChartHoverCardProps, ChartHoverCardRow, type ChartHoverCardRowProps, } from './ChartHoverCard';

package/dist/components/SimpleCharts/internal/index.js

@@ -0,0 +1,2 @@
+export { ChartDelta } from "./ChartDelta.js";
+export { ChartHoverCard, ChartHoverCardDot, ChartHoverCardRow } from "./ChartHoverCard.js";

package/dist/components/Slider/Slider.d.ts

@@ -28,7 +28,7 @@ export interface SliderProps extends SliderRootConfig, TestableProps {
  *
  * It reads `Field` context like `Input`/`Textarea`, so wrapping it in `<Field>` wires
  * label / invalid / disabled. When an exact figure matters, pair with `NumberInput`;
- * for 2–7 fixed options use `SegmentedControl`. See `docs/slider-design-spec.md`.
+ * for 2–7 fixed options use `SegmentedControl`.
  */
 export declare const Slider: FC<SliderProps>;
 export {};

package/dist/components/Slider/classes.d.ts

@@ -1,11 +1,10 @@
 /**
  * Root layout for the Slider control.
  *
- * Single fixed size for v1 — no `sm`/`md` axis (see
- * `docs/slider-handoff-requirements.md` §4). State styling
+ * Single fixed size for v1 — no `sm`/`md` axis. State styling
  * (hover / focus / dragging / invalid) is driven by Ark `data-*` attributes on
  * the individual parts and lands in Phase 2; only the root-level disabled
- * treatment (the whole control at 50% opacity, per requirements §5) lives here.
+ * treatment (the whole control at 50% opacity) lives here.
  */
 export declare const sliderVariants: (props?: ({} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**

package/dist/components/TemporalCore/props.d.ts

@@ -3,7 +3,7 @@ import type { TestableProps } from '../../utils/testId';
 /**
  * Visual size of a temporal input. Mirrors InputGroup sizes.
  */
-export type TemporalInputSize = 'default' | 'medium' | 'small';
+export type TemporalInputSize = 'default' | 'medium' | 'small' | 'inline-edit';
 /**
  * Props shared by every temporal input root wrapper — DateInput, TimeInput,
  * DateRangeInput. Extends `HTMLAttributes<HTMLDivElement>` so consumers can

package/dist/components/Textarea/classes.d.ts

@@ -1,6 +1,6 @@
 export declare const textareaPaddingVariants: (props?: ({
-    size?: "small" | "medium" | "default" | null | undefined;
+    size?: "small" | "medium" | "default" | "inline-edit" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const textareaHeightVariants: (props?: ({
-    size?: "small" | "medium" | "default" | null | undefined;
+    size?: "small" | "medium" | "default" | "inline-edit" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/Textarea/classes.js

@@ -4,7 +4,8 @@ const textareaPaddingVariants = cva('', {
         size: {
             small: 'py-0',
             medium: 'py-6',
-            default: 'py-8'
+            default: 'py-8',
+            'inline-edit': 'py-4'
         }
     }
 });
@@ -13,7 +14,8 @@ const textareaHeightVariants = cva('min-h-[64px]', {
         size: {
             small: 'min-h-[64px]',
             medium: 'min-h-[72px]',
-            default: 'min-h-[76px]'
+            default: 'min-h-[76px]',
+            'inline-edit': 'min-h-[64px]'
         }
     }
 });

package/dist/components/Textarea/useAutoResize.d.ts

@@ -1,3 +1,4 @@
+export declare function adjustTextareaHeight(textarea: HTMLTextAreaElement, minRows: number, maxRows: number): void;
 export declare function useAutoResize(enabled: boolean, minRows: number, maxRows: number, value?: string | number | readonly string[]): {
     ref: import("react").RefObject<HTMLTextAreaElement | null>;
     adjustHeight: () => void;

package/dist/components/Textarea/useAutoResize.js

@@ -3,10 +3,11 @@ function adjustTextareaHeight(textarea, minRows, maxRows) {
     const style = window.getComputedStyle(textarea);
     const lineHeight = Number.parseInt(style.lineHeight, 10) || 20;
     const paddingY = (Number.parseInt(style.paddingTop, 10) || 0) + (Number.parseInt(style.paddingBottom, 10) || 0);
-    const minHeight = lineHeight * minRows + paddingY;
-    const maxHeight = lineHeight * maxRows + paddingY;
+    const borderY = (Number.parseInt(style.borderTopWidth, 10) || 0) + (Number.parseInt(style.borderBottomWidth, 10) || 0);
+    const minHeight = lineHeight * minRows + paddingY + borderY;
+    const maxHeight = lineHeight * maxRows + paddingY + borderY;
     textarea.style.height = '0';
-    const scrollHeight = textarea.scrollHeight;
+    const scrollHeight = textarea.scrollHeight + borderY;
     textarea.style.height = `${Math.min(Math.max(scrollHeight, minHeight), maxHeight)}px`;
     textarea.style.overflowY = scrollHeight > maxHeight ? 'auto' : 'hidden';
 }
@@ -31,4 +32,4 @@ function useAutoResize(enabled, minRows, maxRows, value) {
         adjustHeight
     };
 }
-export { useAutoResize };
+export { adjustTextareaHeight, useAutoResize };