@orangecheck/design 0.19.0 → 0.20.0

package/dist/composites.d.mts

@@ -101,4 +101,145 @@ interface DataRowProps {
 }
 declare function DataRow({ children, meta, action, as, className }: DataRowProps): react_jsx_runtime.JSX.Element;
 
-export { Callout, type CalloutProps, type CalloutTone, DataRow, type DataRowProps, type DefinitionItem, DefinitionList, type DefinitionListProps, EmptyState, type EmptyStateCta, type EmptyStateProps, HelpHint, type HelpHintProps, SectionHeader, type SectionHeaderProps, StatCard, type StatCardProps, StatGrid, type StatGridProps, type StatItem, StatTile };
+interface TwoToneHeadingProps {
+    lead: ReactNode;
+    muted?: ReactNode;
+    as?: ElementType;
+    tone?: 'default' | 'onBrand';
+    className?: string;
+}
+declare function TwoToneHeading({ lead, muted, as, tone, className, }: TwoToneHeadingProps): react_jsx_runtime.JSX.Element;
+interface MarketingHeadingProps {
+    eyebrow?: string;
+    lead: ReactNode;
+    muted?: ReactNode;
+    body?: ReactNode;
+    align?: 'start' | 'center';
+    tone?: 'default' | 'onBrand';
+    as?: ElementType;
+    className?: string;
+}
+declare function MarketingHeading({ eyebrow, lead, muted, body, align, tone, as, className, }: MarketingHeadingProps): react_jsx_runtime.JSX.Element;
+
+interface FeatureCardProps {
+    icon?: ReactNode;
+    iconTone?: 'peach' | 'dark' | 'brand' | 'onBrand' | 'muted' | 'surface';
+    title: ReactNode;
+    children?: ReactNode;
+    orientation?: 'vertical' | 'horizontal';
+    align?: 'start' | 'center';
+    tone?: 'default' | 'muted' | 'onBrand';
+    elevation?: 'none' | 'sm' | 'md' | 'lg';
+    className?: string;
+}
+declare function FeatureCard({ icon, iconTone, title, children, orientation, align, tone, elevation, className, }: FeatureCardProps): react_jsx_runtime.JSX.Element;
+
+interface SectionProps {
+    tone?: 'default' | 'muted' | 'brand' | 'dark';
+    width?: 'default' | 'wide' | 'full';
+    diagonal?: boolean;
+    id?: string;
+    className?: string;
+    innerClassName?: string;
+    children: ReactNode;
+}
+declare function Section({ tone, width, diagonal, id, className, innerClassName, children, }: SectionProps): react_jsx_runtime.JSX.Element;
+declare function BrandBand(props: SectionProps): react_jsx_runtime.JSX.Element;
+
+interface ComparisonRow {
+    label: ReactNode;
+    theirs: ReactNode;
+    ours: ReactNode;
+}
+interface ComparisonTableProps {
+    rows: ComparisonRow[];
+    columns?: {
+        feature?: string;
+        theirs: string;
+        ours: string;
+    };
+    className?: string;
+}
+declare function ComparisonTable({ rows, columns, className }: ComparisonTableProps): react_jsx_runtime.JSX.Element;
+
+interface Step {
+    title: ReactNode;
+    children?: ReactNode;
+}
+interface NumberedStepProps {
+    n: number;
+    title: ReactNode;
+    children?: ReactNode;
+    tone?: 'default' | 'onBrand';
+    card?: boolean;
+    className?: string;
+}
+declare function NumberedStep({ n, title, children, tone, card, className, }: NumberedStepProps): react_jsx_runtime.JSX.Element;
+interface StepListProps {
+    steps: Step[];
+    variant?: 'bare' | 'card';
+    tone?: 'default' | 'onBrand';
+    columns?: 2 | 3 | 4;
+    className?: string;
+}
+declare function StepList({ steps, variant, tone, columns, className, }: StepListProps): react_jsx_runtime.JSX.Element;
+
+interface FaqItem {
+    q: ReactNode;
+    a: ReactNode;
+}
+interface FaqProps {
+    items: FaqItem[];
+    defaultOpen?: number;
+    className?: string;
+}
+declare function Faq({ items, defaultOpen, className }: FaqProps): react_jsx_runtime.JSX.Element;
+
+interface EmailCaptureProps {
+    action?: string;
+    method?: string;
+    onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
+    name?: string;
+    placeholder?: string;
+    cta?: ReactNode;
+    note?: ReactNode;
+    tone?: 'default' | 'onBrand';
+    className?: string;
+}
+declare function EmailCapture({ action, method, onSubmit, name, placeholder, cta, note, tone, className, }: EmailCaptureProps): react_jsx_runtime.JSX.Element;
+
+interface CheckListProps {
+    items: ReactNode[];
+    orientation?: 'horizontal' | 'vertical';
+    tone?: 'default' | 'onBrand';
+    className?: string;
+}
+declare function CheckList({ items, orientation, tone, className, }: CheckListProps): react_jsx_runtime.JSX.Element;
+
+interface AccentNoteProps {
+    lead?: ReactNode;
+    children: ReactNode;
+    tone?: 'default' | 'onBrand';
+    className?: string;
+}
+declare function AccentNote({ lead, children, tone, className }: AccentNoteProps): react_jsx_runtime.JSX.Element;
+interface AccentListItem {
+    title: ReactNode;
+    children?: ReactNode;
+    active?: boolean;
+}
+interface AccentListProps {
+    items: AccentListItem[];
+    className?: string;
+}
+declare function AccentList({ items, className }: AccentListProps): react_jsx_runtime.JSX.Element;
+
+interface VerifiedChipProps {
+    icon?: ReactNode;
+    iconTone?: 'peach' | 'dark' | 'brand' | 'onBrand' | 'muted';
+    label: ReactNode;
+    className?: string;
+}
+declare function VerifiedChip({ icon, iconTone, label, className }: VerifiedChipProps): react_jsx_runtime.JSX.Element;
+
+export { AccentList, type AccentListItem, type AccentListProps, AccentNote, type AccentNoteProps, BrandBand, Callout, type CalloutProps, type CalloutTone, CheckList, type CheckListProps, type ComparisonRow, ComparisonTable, type ComparisonTableProps, DataRow, type DataRowProps, type DefinitionItem, DefinitionList, type DefinitionListProps, EmailCapture, type EmailCaptureProps, EmptyState, type EmptyStateCta, type EmptyStateProps, Faq, type FaqItem, type FaqProps, FeatureCard, type FeatureCardProps, HelpHint, type HelpHintProps, MarketingHeading, type MarketingHeadingProps, NumberedStep, type NumberedStepProps, Section, SectionHeader, type SectionHeaderProps, type SectionProps, StatCard, type StatCardProps, StatGrid, type StatGridProps, type StatItem, StatTile, type Step, StepList, type StepListProps, TwoToneHeading, type TwoToneHeadingProps, VerifiedChip, type VerifiedChipProps };

package/dist/composites.d.ts

@@ -101,4 +101,145 @@ interface DataRowProps {
 }
 declare function DataRow({ children, meta, action, as, className }: DataRowProps): react_jsx_runtime.JSX.Element;
 
-export { Callout, type CalloutProps, type CalloutTone, DataRow, type DataRowProps, type DefinitionItem, DefinitionList, type DefinitionListProps, EmptyState, type EmptyStateCta, type EmptyStateProps, HelpHint, type HelpHintProps, SectionHeader, type SectionHeaderProps, StatCard, type StatCardProps, StatGrid, type StatGridProps, type StatItem, StatTile };
+interface TwoToneHeadingProps {
+    lead: ReactNode;
+    muted?: ReactNode;
+    as?: ElementType;
+    tone?: 'default' | 'onBrand';
+    className?: string;
+}
+declare function TwoToneHeading({ lead, muted, as, tone, className, }: TwoToneHeadingProps): react_jsx_runtime.JSX.Element;
+interface MarketingHeadingProps {
+    eyebrow?: string;
+    lead: ReactNode;
+    muted?: ReactNode;
+    body?: ReactNode;
+    align?: 'start' | 'center';
+    tone?: 'default' | 'onBrand';
+    as?: ElementType;
+    className?: string;
+}
+declare function MarketingHeading({ eyebrow, lead, muted, body, align, tone, as, className, }: MarketingHeadingProps): react_jsx_runtime.JSX.Element;
+
+interface FeatureCardProps {
+    icon?: ReactNode;
+    iconTone?: 'peach' | 'dark' | 'brand' | 'onBrand' | 'muted' | 'surface';
+    title: ReactNode;
+    children?: ReactNode;
+    orientation?: 'vertical' | 'horizontal';
+    align?: 'start' | 'center';
+    tone?: 'default' | 'muted' | 'onBrand';
+    elevation?: 'none' | 'sm' | 'md' | 'lg';
+    className?: string;
+}
+declare function FeatureCard({ icon, iconTone, title, children, orientation, align, tone, elevation, className, }: FeatureCardProps): react_jsx_runtime.JSX.Element;
+
+interface SectionProps {
+    tone?: 'default' | 'muted' | 'brand' | 'dark';
+    width?: 'default' | 'wide' | 'full';
+    diagonal?: boolean;
+    id?: string;
+    className?: string;
+    innerClassName?: string;
+    children: ReactNode;
+}
+declare function Section({ tone, width, diagonal, id, className, innerClassName, children, }: SectionProps): react_jsx_runtime.JSX.Element;
+declare function BrandBand(props: SectionProps): react_jsx_runtime.JSX.Element;
+
+interface ComparisonRow {
+    label: ReactNode;
+    theirs: ReactNode;
+    ours: ReactNode;
+}
+interface ComparisonTableProps {
+    rows: ComparisonRow[];
+    columns?: {
+        feature?: string;
+        theirs: string;
+        ours: string;
+    };
+    className?: string;
+}
+declare function ComparisonTable({ rows, columns, className }: ComparisonTableProps): react_jsx_runtime.JSX.Element;
+
+interface Step {
+    title: ReactNode;
+    children?: ReactNode;
+}
+interface NumberedStepProps {
+    n: number;
+    title: ReactNode;
+    children?: ReactNode;
+    tone?: 'default' | 'onBrand';
+    card?: boolean;
+    className?: string;
+}
+declare function NumberedStep({ n, title, children, tone, card, className, }: NumberedStepProps): react_jsx_runtime.JSX.Element;
+interface StepListProps {
+    steps: Step[];
+    variant?: 'bare' | 'card';
+    tone?: 'default' | 'onBrand';
+    columns?: 2 | 3 | 4;
+    className?: string;
+}
+declare function StepList({ steps, variant, tone, columns, className, }: StepListProps): react_jsx_runtime.JSX.Element;
+
+interface FaqItem {
+    q: ReactNode;
+    a: ReactNode;
+}
+interface FaqProps {
+    items: FaqItem[];
+    defaultOpen?: number;
+    className?: string;
+}
+declare function Faq({ items, defaultOpen, className }: FaqProps): react_jsx_runtime.JSX.Element;
+
+interface EmailCaptureProps {
+    action?: string;
+    method?: string;
+    onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
+    name?: string;
+    placeholder?: string;
+    cta?: ReactNode;
+    note?: ReactNode;
+    tone?: 'default' | 'onBrand';
+    className?: string;
+}
+declare function EmailCapture({ action, method, onSubmit, name, placeholder, cta, note, tone, className, }: EmailCaptureProps): react_jsx_runtime.JSX.Element;
+
+interface CheckListProps {
+    items: ReactNode[];
+    orientation?: 'horizontal' | 'vertical';
+    tone?: 'default' | 'onBrand';
+    className?: string;
+}
+declare function CheckList({ items, orientation, tone, className, }: CheckListProps): react_jsx_runtime.JSX.Element;
+
+interface AccentNoteProps {
+    lead?: ReactNode;
+    children: ReactNode;
+    tone?: 'default' | 'onBrand';
+    className?: string;
+}
+declare function AccentNote({ lead, children, tone, className }: AccentNoteProps): react_jsx_runtime.JSX.Element;
+interface AccentListItem {
+    title: ReactNode;
+    children?: ReactNode;
+    active?: boolean;
+}
+interface AccentListProps {
+    items: AccentListItem[];
+    className?: string;
+}
+declare function AccentList({ items, className }: AccentListProps): react_jsx_runtime.JSX.Element;
+
+interface VerifiedChipProps {
+    icon?: ReactNode;
+    iconTone?: 'peach' | 'dark' | 'brand' | 'onBrand' | 'muted';
+    label: ReactNode;
+    className?: string;
+}
+declare function VerifiedChip({ icon, iconTone, label, className }: VerifiedChipProps): react_jsx_runtime.JSX.Element;
+
+export { AccentList, type AccentListItem, type AccentListProps, AccentNote, type AccentNoteProps, BrandBand, Callout, type CalloutProps, type CalloutTone, CheckList, type CheckListProps, type ComparisonRow, ComparisonTable, type ComparisonTableProps, DataRow, type DataRowProps, type DefinitionItem, DefinitionList, type DefinitionListProps, EmailCapture, type EmailCaptureProps, EmptyState, type EmptyStateCta, type EmptyStateProps, Faq, type FaqItem, type FaqProps, FeatureCard, type FeatureCardProps, HelpHint, type HelpHintProps, MarketingHeading, type MarketingHeadingProps, NumberedStep, type NumberedStepProps, Section, SectionHeader, type SectionHeaderProps, type SectionProps, StatCard, type StatCardProps, StatGrid, type StatGridProps, type StatItem, StatTile, type Step, StepList, type StepListProps, TwoToneHeading, type TwoToneHeadingProps, VerifiedChip, type VerifiedChipProps };