@atmos.build/ui 0.1.2 → 0.1.3

package/dist/components/inline-alert.d.ts

@@ -1,11 +1,11 @@
+import * as React from 'react';
 import type { ReactNode } from 'react';
 export type InlineAlertTone = 'error' | 'warning' | 'info';
-export interface InlineAlertProps {
+export interface InlineAlertProps extends Omit<React.ComponentProps<'div'>, 'children'> {
     tone?: InlineAlertTone;
     children: ReactNode;
     onDismiss?: () => void;
     dismissLabel?: string;
-    className?: string;
 }
-export declare function InlineAlert({ tone, children, onDismiss, dismissLabel, className, }: InlineAlertProps): import("react").JSX.Element;
-export declare function InlineNotice({ tone, children, className, }: Pick<InlineAlertProps, 'tone' | 'children' | 'className'>): import("react").JSX.Element;
+export declare function InlineAlert({ tone, children, onDismiss, dismissLabel, className, ...props }: InlineAlertProps): React.JSX.Element;
+export declare function InlineNotice({ tone, children, className, }: Pick<InlineAlertProps, 'tone' | 'children' | 'className'>): React.JSX.Element;

package/dist/components/inline-alert.js

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
 import { AlertTriangle, Info, X } from 'lucide-react';
 import { cn } from '../lib/cn.js';
 import { Button } from './button.js';
@@ -8,9 +9,9 @@ const toneClass = {
     warning: 'border-warning/30 bg-warning/15 text-warning',
     info: 'border-info/30 bg-info/15 text-info',
 };
-export function InlineAlert({ tone = 'error', children, onDismiss, dismissLabel, className, }) {
+export function InlineAlert({ tone = 'error', children, onDismiss, dismissLabel, className, ...props }) {
     const Icon = tone === 'info' ? Info : AlertTriangle;
-    return (_jsxs("div", { role: "alert", "data-slot": "inline-alert", "data-tone": tone, className: cn('flex items-start gap-2 rounded-md border px-3 py-2 text-xs', toneClass[tone], className), children: [_jsx(Icon, { className: "mt-0.5 size-3.5 shrink-0", strokeWidth: 1.5, "aria-hidden": true }), _jsx("span", { className: "flex-1 leading-relaxed", children: children }), onDismiss ? (_jsx(Button, { type: "button", variant: "ghost", size: "icon-xs", onClick: onDismiss, "aria-label": dismissLabel, className: "-mr-1 size-4 rounded text-current opacity-80 hover:bg-transparent hover:opacity-100", children: _jsx(X, { className: "size-3", strokeWidth: 1.5 }) })) : null] }));
+    return (_jsxs("div", { role: "alert", "data-slot": "inline-alert", "data-tone": tone, className: cn('flex items-start gap-2 rounded-md border px-3 py-2 text-xs', toneClass[tone], className), ...props, children: [_jsx(Icon, { className: "mt-0.5 size-3.5 shrink-0", strokeWidth: 1.5, "aria-hidden": true }), _jsx("span", { className: "flex-1 leading-relaxed", children: children }), onDismiss ? (_jsx(Button, { type: "button", variant: "ghost", size: "icon-xs", onClick: onDismiss, "aria-label": dismissLabel, className: "-mr-1 size-4 rounded text-current opacity-80 hover:bg-transparent hover:opacity-100", children: _jsx(X, { className: "size-3", strokeWidth: 1.5 }) })) : null] }));
 }
 export function InlineNotice({ tone = 'info', children, className, }) {
     return (_jsx(InlineAlert, { tone: tone, className: className, children: children }));

package/dist/components/metric-grid.d.ts

@@ -21,8 +21,10 @@ export interface MetricTileProps extends Omit<React.ComponentProps<'div'>, 'titl
     suffix?: React.ReactNode;
     hint?: React.ReactNode;
     tone?: MetricTone;
+    /** What the value is changing from, rendered as "before → after". See SpecStripItem.from. */
+    from?: React.ReactNode;
 }
-export declare function MetricTile({ label, value, suffix, hint, tone, className, ...props }: MetricTileProps): React.JSX.Element;
+export declare function MetricTile({ label, value, suffix, hint, from, tone, className, ...props }: MetricTileProps): React.JSX.Element;
 export interface MetricBreakdownItem {
     key: string;
     label: React.ReactNode;

package/dist/components/metric-grid.js

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
+import { ArrowRight } from 'lucide-react';
 import { cn } from '../lib/cn.js';
 const TONE_TEXT = {
     neutral: 'text-foreground',
@@ -18,8 +19,8 @@ const PANEL_PADDING = { none: '', sm: 'p-3', md: 'p-4' };
 export function MetricPanel({ title, action, padding = 'md', className, children, ...props }) {
     return (_jsxs("div", { "data-slot": "metric-panel", className: cn('bg-muted min-w-0', PANEL_PADDING[padding], className), ...props, children: [title || action ? (_jsxs("div", { className: cn('mb-3 flex items-center justify-between gap-2', padding === 'none' && 'px-3 pt-3'), children: [title ? _jsx("p", { className: "text-xs font-medium", children: title }) : _jsx("span", {}), action] })) : null, children] }));
 }
-export function MetricTile({ label, value, suffix, hint, tone = 'neutral', className, ...props }) {
-    return (_jsxs("div", { "data-slot": "metric-tile", "data-tone": tone, className: cn('bg-muted min-w-0 p-3', className), ...props, children: [label ? _jsx("p", { className: "text-muted-foreground truncate text-xs", children: label }) : null, _jsxs("p", { className: cn('text-2xl font-semibold tracking-tight tabular-nums', label ? 'mt-2' : '', TONE_TEXT[tone]), children: [value, suffix ? (_jsx("span", { className: "text-muted-foreground ml-1 text-xs font-normal", children: suffix })) : null] }), hint ? _jsx("p", { className: "text-muted-foreground mt-1 text-[11px] leading-snug", children: hint }) : null] }));
+export function MetricTile({ label, value, suffix, hint, from, tone = 'neutral', className, ...props }) {
+    return (_jsxs("div", { "data-slot": "metric-tile", "data-tone": tone, className: cn('bg-muted min-w-0 p-3', className), ...props, children: [label ? _jsx("p", { className: "text-muted-foreground truncate text-xs", children: label }) : null, _jsxs("p", { className: cn('text-2xl font-semibold tracking-tight tabular-nums', label ? 'mt-2' : '', TONE_TEXT[tone]), children: [from !== undefined ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-muted-foreground font-normal", children: from }), _jsx(ArrowRight, { className: "text-muted-foreground mx-1.5 inline size-4 align-[-0.05em]", strokeWidth: 1.5, "aria-hidden": true })] })) : null, value, suffix ? (_jsx("span", { className: "text-muted-foreground ml-1 text-xs font-normal", children: suffix })) : null] }), hint ? _jsx("p", { className: "text-muted-foreground mt-1 text-[11px] leading-snug", children: hint }) : null] }));
 }
 const TONE_BAR = {
     neutral: 'bg-foreground/35',

package/dist/components/spec-strip.d.ts

@@ -4,6 +4,11 @@ export interface SpecStripItem {
     label: string;
     value: React.ReactNode;
     suffix?: React.ReactNode;
+    /**
+     * What the value is changing from. Present, the item reads "before → after", which is what a
+     * shape being upgraded is: the new number alone says what you get without saying what moved.
+     */
+    from?: React.ReactNode;
 }
 export interface SpecStripProps extends Omit<React.ComponentProps<'div'>, 'children'> {
     items: SpecStripItem[];

package/dist/components/spec-strip.js

@@ -1,6 +1,7 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
+import { ArrowRight } from 'lucide-react';
 import { cn } from '../lib/cn.js';
 import { Separator } from './separator.js';
 /**
@@ -11,5 +12,5 @@ import { Separator } from './separator.js';
  * stops meaning anything.
  */
 export function SpecStrip({ items, className, ...props }) {
-    return (_jsx("div", { "data-slot": "spec-strip", className: cn('flex items-stretch gap-3', className), ...props, children: items.map((item, index) => (_jsxs(React.Fragment, { children: [index > 0 ? _jsx(Separator, { orientation: "vertical", className: "bg-border/60" }) : null, _jsxs("div", { className: "flex min-w-0 flex-1 flex-col items-center gap-1.5 py-1", children: [_jsx("span", { className: "text-muted-foreground [&_svg]:size-5", "aria-hidden": true, children: item.icon }), _jsxs("span", { className: "truncate text-[17px] font-medium tabular-nums", children: [item.value, item.suffix ? (_jsx("span", { className: "text-muted-foreground ml-1 text-[12px] font-normal", children: item.suffix })) : null] }), _jsx("span", { className: "text-muted-foreground truncate text-[11.5px]", children: item.label })] })] }, item.label))) }));
+    return (_jsx("div", { "data-slot": "spec-strip", className: cn('flex items-stretch gap-3', className), ...props, children: items.map((item, index) => (_jsxs(React.Fragment, { children: [index > 0 ? _jsx(Separator, { orientation: "vertical", className: "bg-border/60" }) : null, _jsxs("div", { className: "flex min-w-0 flex-1 flex-col items-center gap-1.5 py-1", children: [_jsx("span", { className: "text-muted-foreground [&_svg]:size-5", "aria-hidden": true, children: item.icon }), _jsxs("span", { className: "truncate text-[17px] font-medium tabular-nums", children: [item.from !== undefined ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-muted-foreground font-normal", children: item.from }), _jsx(ArrowRight, { className: "text-muted-foreground mx-1 inline size-3.5 align-[-0.1em]", strokeWidth: 1.5, "aria-hidden": true })] })) : null, item.value, item.suffix ? (_jsx("span", { className: "text-muted-foreground ml-1 text-[12px] font-normal", children: item.suffix })) : null] }), _jsx("span", { className: "text-muted-foreground truncate text-[11.5px]", children: item.label })] })] }, item.label))) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atmos.build/ui",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "The complete atmOS React component system and MCP App authoring helpers.",
   "type": "module",
   "license": "UNLICENSED",