@orangecheck/app-design 1.5.0 → 1.6.1

package/dist/components.d.mts

@@ -406,9 +406,15 @@ interface StatCardProps {
     hint?: ReactNode;
     raw?: number | null;
     size?: 'md' | 'sm';
+    delta?: {
+        value: number;
+        suffix?: string;
+        good?: 'up' | 'down';
+        label?: string;
+    };
     className?: string;
 }
-declare function StatCard({ label, value, hint, size, className }: StatCardProps): react.JSX.Element;
+declare function StatCard({ label, value, hint, size, delta, className }: StatCardProps): react.JSX.Element;
 declare function EmptyLine({ children, className }: {
     children: ReactNode;
     className?: string;
@@ -423,7 +429,10 @@ interface KeyValueItem {
     label: ReactNode;
     value: ReactNode;
     mono?: boolean;
+    note?: ReactNode;
+    tone?: ValueTone;
 }
+type ValueTone = 'good' | 'caution' | 'bad' | 'brand' | 'muted';
 declare function KeyValueList({ items, dense, className, }: {
     items: KeyValueItem[];
     dense?: boolean;
@@ -638,6 +647,55 @@ declare function LockedPreview({ title, description, action, children, className
     className?: string;
 }): react.JSX.Element;
 
+type ChartTone = 1 | 2 | 3 | 4 | 'neutral' | 'up' | 'down';
+declare function chartColor(series: number | ChartTone): string;
+interface LegendItem {
+    label: ReactNode;
+    color: ChartTone | string;
+    dashed?: boolean;
+}
+declare function ChartFrame({ legend, caption, children, className, }: {
+    legend?: LegendItem[];
+    caption?: ReactNode;
+    children: ReactNode;
+    className?: string;
+}): react.JSX.Element;
+declare function Sparkline({ values, label, tone, area, width, height, className, }: {
+    values: readonly number[];
+    label: string;
+    tone?: 'ink' | 'muted' | 'trend' | ChartTone;
+    area?: boolean;
+    width?: number;
+    height?: number;
+    className?: string;
+}): react.JSX.Element;
+interface SourceNoteProps {
+    source: ReactNode;
+    href?: string;
+    detail?: ReactNode;
+    updated?: ReactNode;
+    variant?: 'popover' | 'line';
+    className?: string;
+}
+declare function SourceNote({ source, href, detail, updated, variant, className }: SourceNoteProps): react.JSX.Element;
+declare function Panel({ title, description, actions, source, expandable, children, className, }: {
+    title: ReactNode;
+    description?: ReactNode;
+    actions?: ReactNode;
+    source?: ReactNode;
+    expandable?: boolean;
+    children: ReactNode | ((expanded: boolean) => ReactNode);
+    className?: string;
+}): react.JSX.Element;
+declare function HudCard({ eyebrow, live, title, children, footer, className, }: {
+    eyebrow?: ReactNode;
+    live?: boolean;
+    title?: ReactNode;
+    children?: ReactNode;
+    footer?: ReactNode;
+    className?: string;
+}): react.JSX.Element;
+
 declare function SectionHeading({ eyebrow, title, lead, id, onInk, level, as, align, reveal, className, }: {
     eyebrow?: ReactNode;
     title: ReactNode;
@@ -824,4 +882,4 @@ interface SearchDialogProps {
 declare function SearchDialog({ onQuery, open: openProp, onOpenChange, onSelect, button, hotkey, label, placeholder, idle, defaultQuery, debounceMs, browse, className, }: SearchDialogProps): react.JSX.Element;
 declare function CommandDialog({ label, placeholder, ...props }: Omit<SearchDialogProps, 'browse' | 'button'>): react.JSX.Element;
 
-export { Accent, type ActivityItem, ActivityList, BrowserFrame, type CheckState, Closing, type Column, CommandDialog, Container, CopyButton, type CopyButtonProps, CountdownRing, DataTable, Display, type DisplayProps, EmptyLine, EmptyState, type Endpoint, EndpointList, ErrorBoundary, ErrorPage, Eyebrow, FactBlock, type FactRow, FactRows, Faq, FloatChip, Footnote, HashChip, type KeyValueItem, KeyValueList, Lead, type LegalBlock, LegalDocument, type LegalSource, LoadingBlock, LockedPreview, Monogram, Notice, PackageCard, type PackageItem, PageHeader, PhoneFrame, PlanCard, type ProgressStep, ProgressSteps, ProofStrip, Prose, Reveal, Sats, SatsFigure, type SatsProps, type SatsTextOptions, ScrollStory, SearchButton, SearchDialog, type SearchDialogProps, type SearchGroup, type SearchQuery, type SearchResult, Section, SectionHeading, SectionIntro, type SectionProps, SignMessage, SplitBar, type SplitSegment, StatCard, type StatCardProps, StatGrid, type StatGridProps, StepGrid, type StepGridProps, type StepItem, type StepState, TextLink, Ticker, type TruthRow, type TruthStatus, TruthTable, UsdApprox, type VerifyCheck, VerifyReport, monogramGround, monogramLetter, satsText, sectionVariants, useCopy, useInView };
+export { Accent, type ActivityItem, ActivityList, BrowserFrame, ChartFrame, type ChartTone, type CheckState, Closing, type Column, CommandDialog, Container, CopyButton, type CopyButtonProps, CountdownRing, DataTable, Display, type DisplayProps, EmptyLine, EmptyState, type Endpoint, EndpointList, ErrorBoundary, ErrorPage, Eyebrow, FactBlock, type FactRow, FactRows, Faq, FloatChip, Footnote, HashChip, HudCard, type KeyValueItem, KeyValueList, Lead, type LegalBlock, LegalDocument, type LegalSource, type LegendItem, LoadingBlock, LockedPreview, Monogram, Notice, PackageCard, type PackageItem, PageHeader, Panel, PhoneFrame, PlanCard, type ProgressStep, ProgressSteps, ProofStrip, Prose, Reveal, Sats, SatsFigure, type SatsProps, type SatsTextOptions, ScrollStory, SearchButton, SearchDialog, type SearchDialogProps, type SearchGroup, type SearchQuery, type SearchResult, Section, SectionHeading, SectionIntro, type SectionProps, SignMessage, SourceNote, type SourceNoteProps, Sparkline, SplitBar, type SplitSegment, StatCard, type StatCardProps, StatGrid, type StatGridProps, StepGrid, type StepGridProps, type StepItem, type StepState, TextLink, Ticker, type TruthRow, type TruthStatus, TruthTable, UsdApprox, type ValueTone, type VerifyCheck, VerifyReport, chartColor, monogramGround, monogramLetter, satsText, sectionVariants, useCopy, useInView };

package/dist/components.d.ts

@@ -406,9 +406,15 @@ interface StatCardProps {
     hint?: ReactNode;
     raw?: number | null;
     size?: 'md' | 'sm';
+    delta?: {
+        value: number;
+        suffix?: string;
+        good?: 'up' | 'down';
+        label?: string;
+    };
     className?: string;
 }
-declare function StatCard({ label, value, hint, size, className }: StatCardProps): react.JSX.Element;
+declare function StatCard({ label, value, hint, size, delta, className }: StatCardProps): react.JSX.Element;
 declare function EmptyLine({ children, className }: {
     children: ReactNode;
     className?: string;
@@ -423,7 +429,10 @@ interface KeyValueItem {
     label: ReactNode;
     value: ReactNode;
     mono?: boolean;
+    note?: ReactNode;
+    tone?: ValueTone;
 }
+type ValueTone = 'good' | 'caution' | 'bad' | 'brand' | 'muted';
 declare function KeyValueList({ items, dense, className, }: {
     items: KeyValueItem[];
     dense?: boolean;
@@ -638,6 +647,55 @@ declare function LockedPreview({ title, description, action, children, className
     className?: string;
 }): react.JSX.Element;
 
+type ChartTone = 1 | 2 | 3 | 4 | 'neutral' | 'up' | 'down';
+declare function chartColor(series: number | ChartTone): string;
+interface LegendItem {
+    label: ReactNode;
+    color: ChartTone | string;
+    dashed?: boolean;
+}
+declare function ChartFrame({ legend, caption, children, className, }: {
+    legend?: LegendItem[];
+    caption?: ReactNode;
+    children: ReactNode;
+    className?: string;
+}): react.JSX.Element;
+declare function Sparkline({ values, label, tone, area, width, height, className, }: {
+    values: readonly number[];
+    label: string;
+    tone?: 'ink' | 'muted' | 'trend' | ChartTone;
+    area?: boolean;
+    width?: number;
+    height?: number;
+    className?: string;
+}): react.JSX.Element;
+interface SourceNoteProps {
+    source: ReactNode;
+    href?: string;
+    detail?: ReactNode;
+    updated?: ReactNode;
+    variant?: 'popover' | 'line';
+    className?: string;
+}
+declare function SourceNote({ source, href, detail, updated, variant, className }: SourceNoteProps): react.JSX.Element;
+declare function Panel({ title, description, actions, source, expandable, children, className, }: {
+    title: ReactNode;
+    description?: ReactNode;
+    actions?: ReactNode;
+    source?: ReactNode;
+    expandable?: boolean;
+    children: ReactNode | ((expanded: boolean) => ReactNode);
+    className?: string;
+}): react.JSX.Element;
+declare function HudCard({ eyebrow, live, title, children, footer, className, }: {
+    eyebrow?: ReactNode;
+    live?: boolean;
+    title?: ReactNode;
+    children?: ReactNode;
+    footer?: ReactNode;
+    className?: string;
+}): react.JSX.Element;
+
 declare function SectionHeading({ eyebrow, title, lead, id, onInk, level, as, align, reveal, className, }: {
     eyebrow?: ReactNode;
     title: ReactNode;
@@ -824,4 +882,4 @@ interface SearchDialogProps {
 declare function SearchDialog({ onQuery, open: openProp, onOpenChange, onSelect, button, hotkey, label, placeholder, idle, defaultQuery, debounceMs, browse, className, }: SearchDialogProps): react.JSX.Element;
 declare function CommandDialog({ label, placeholder, ...props }: Omit<SearchDialogProps, 'browse' | 'button'>): react.JSX.Element;
 
-export { Accent, type ActivityItem, ActivityList, BrowserFrame, type CheckState, Closing, type Column, CommandDialog, Container, CopyButton, type CopyButtonProps, CountdownRing, DataTable, Display, type DisplayProps, EmptyLine, EmptyState, type Endpoint, EndpointList, ErrorBoundary, ErrorPage, Eyebrow, FactBlock, type FactRow, FactRows, Faq, FloatChip, Footnote, HashChip, type KeyValueItem, KeyValueList, Lead, type LegalBlock, LegalDocument, type LegalSource, LoadingBlock, LockedPreview, Monogram, Notice, PackageCard, type PackageItem, PageHeader, PhoneFrame, PlanCard, type ProgressStep, ProgressSteps, ProofStrip, Prose, Reveal, Sats, SatsFigure, type SatsProps, type SatsTextOptions, ScrollStory, SearchButton, SearchDialog, type SearchDialogProps, type SearchGroup, type SearchQuery, type SearchResult, Section, SectionHeading, SectionIntro, type SectionProps, SignMessage, SplitBar, type SplitSegment, StatCard, type StatCardProps, StatGrid, type StatGridProps, StepGrid, type StepGridProps, type StepItem, type StepState, TextLink, Ticker, type TruthRow, type TruthStatus, TruthTable, UsdApprox, type VerifyCheck, VerifyReport, monogramGround, monogramLetter, satsText, sectionVariants, useCopy, useInView };
+export { Accent, type ActivityItem, ActivityList, BrowserFrame, ChartFrame, type ChartTone, type CheckState, Closing, type Column, CommandDialog, Container, CopyButton, type CopyButtonProps, CountdownRing, DataTable, Display, type DisplayProps, EmptyLine, EmptyState, type Endpoint, EndpointList, ErrorBoundary, ErrorPage, Eyebrow, FactBlock, type FactRow, FactRows, Faq, FloatChip, Footnote, HashChip, HudCard, type KeyValueItem, KeyValueList, Lead, type LegalBlock, LegalDocument, type LegalSource, type LegendItem, LoadingBlock, LockedPreview, Monogram, Notice, PackageCard, type PackageItem, PageHeader, Panel, PhoneFrame, PlanCard, type ProgressStep, ProgressSteps, ProofStrip, Prose, Reveal, Sats, SatsFigure, type SatsProps, type SatsTextOptions, ScrollStory, SearchButton, SearchDialog, type SearchDialogProps, type SearchGroup, type SearchQuery, type SearchResult, Section, SectionHeading, SectionIntro, type SectionProps, SignMessage, SourceNote, type SourceNoteProps, Sparkline, SplitBar, type SplitSegment, StatCard, type StatCardProps, StatGrid, type StatGridProps, StepGrid, type StepGridProps, type StepItem, type StepState, TextLink, Ticker, type TruthRow, type TruthStatus, TruthTable, UsdApprox, type ValueTone, type VerifyCheck, VerifyReport, chartColor, monogramGround, monogramLetter, satsText, sectionVariants, useCopy, useInView };