@ceebee/ui 0.5.0 → 0.6.0

package/dist/index.d.ts

@@ -34,10 +34,10 @@ interface SurfaceProps {
  */
 declare function Surface({ variant, glassStyle, tone, hue, elevation, radius, padding, bordered, className, children, asSection, }: SurfaceProps): react.JSX.Element;
 
-type SpaceStep = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+type SpaceStep$1 = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
 interface StackProps {
     direction?: 'row' | 'column';
-    gap?: SpaceStep;
+    gap?: SpaceStep$1;
     align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
     justify?: 'start' | 'center' | 'end' | 'between';
     wrap?: boolean;
@@ -49,7 +49,7 @@ declare function Flex({ direction, gap, align, justify, wrap, className, childre
 interface GridProps {
     /** Column count at the widest breakpoint; the grid collapses on its own below it. */
     columns?: 1 | 2 | 3 | 4 | 6 | 12;
-    gap?: SpaceStep;
+    gap?: SpaceStep$1;
     minItemWidth?: string;
     className?: string;
     children?: ReactNode;
@@ -81,6 +81,103 @@ interface HeadingProps {
 /** Level and size are separate on purpose: document structure is not a font size. */
 declare function Heading({ level, size, className, children }: HeadingProps): react.JSX.Element;
 
+interface SpaceSkeletonProps {
+    items?: number;
+    direction?: SpaceDirection;
+    size?: SpaceSize;
+    wrap?: boolean;
+    className?: string;
+}
+declare function SpaceSkeleton({ items, direction, size, wrap, className }: SpaceSkeletonProps): react.JSX.Element;
+
+type SpaceStep = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+type SpaceSize = SpaceStep | 'small' | 'middle' | 'large';
+type SpaceDirection = 'horizontal' | 'vertical';
+type SpaceAlign = 'start' | 'center' | 'end' | 'baseline' | 'stretch';
+interface SpaceProps {
+    direction?: SpaceDirection;
+    size?: SpaceSize;
+    align?: SpaceAlign;
+    wrap?: boolean;
+    split?: ReactNode;
+    className?: string;
+    children?: ReactNode;
+}
+declare function SpaceRoot({ direction, size, align, wrap, split, className, children, }: SpaceProps): react.JSX.Element;
+interface SpaceCompactProps {
+    direction?: SpaceDirection;
+    className?: string;
+    children?: ReactNode;
+}
+declare function SpaceCompact({ direction, className, children }: SpaceCompactProps): react.JSX.Element;
+declare const Space: typeof SpaceRoot & {
+    Compact: typeof SpaceCompact;
+    Skeleton: typeof SpaceSkeleton;
+};
+
+interface MasonrySkeletonProps {
+    items?: number;
+    columns?: MasonryColumns;
+    gap?: MasonryStep;
+    className?: string;
+}
+declare function MasonrySkeleton({ items, columns, gap, className }: MasonrySkeletonProps): react.JSX.Element;
+
+type MasonryColumns = 1 | 2 | 3 | 4;
+type MasonryStep = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+interface MasonryProps {
+    /** Column count at the widest breakpoint; the layout collapses below it. */
+    columns?: MasonryColumns;
+    /** Gap Token shared by both the column and item axes. */
+    gap?: MasonryStep;
+    className?: string;
+    children?: ReactNode;
+}
+declare function MasonryRoot({ columns, gap, className, children }: MasonryProps): react.JSX.Element;
+declare const Masonry: typeof MasonryRoot & {
+    Skeleton: typeof MasonrySkeleton;
+};
+
+type AffixEdge = 'top' | 'bottom';
+type AffixOffset = 'sm' | 'md' | 'lg';
+interface AffixProps {
+    /** Edge of the nearest scroll container where the content should stick. */
+    edge?: AffixEdge;
+    /** Spacing Token used as the sticky inset from the selected edge. */
+    offset?: AffixOffset;
+    children?: ReactNode;
+}
+/**
+ * Server-safe sticky layout atom. The nearest scroll container owns the scroll
+ * context; Affix only supplies sticky positioning and a semantic stacking rung.
+ */
+declare function Affix({ edge, offset, children }: AffixProps): react.JSX.Element;
+
+interface PageContainerSkeletonProps {
+    breadcrumb?: boolean;
+    subtitle?: boolean;
+    extra?: boolean;
+    tabs?: boolean;
+    lines?: number;
+    containerSize?: ContainerProps['size'];
+}
+declare function PageContainerSkeleton({ breadcrumb, subtitle, extra, tabs, lines, containerSize }: PageContainerSkeletonProps): react.JSX.Element;
+
+interface PageContainerProps {
+    breadcrumb?: ReactNode;
+    title?: ReactNode;
+    subtitle?: ReactNode;
+    extra?: ReactNode;
+    tabs?: ReactNode;
+    children?: ReactNode;
+    containerSize?: ContainerProps['size'];
+}
+/** Server-safe page frame. Routing, data, title level, action behaviour, and tab state remain external. */
+declare function PageContainerRoot({ breadcrumb, title, subtitle, extra, tabs, children, containerSize }: PageContainerProps): react.JSX.Element;
+declare const PageContainer: typeof PageContainerRoot & {
+    Skeleton: typeof PageContainerSkeleton;
+};
+
 interface LinkButtonProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'color'> {
     variant?: 'solid' | 'soft' | 'outline' | 'ghost';
     tone?: Tone;
@@ -113,6 +210,43 @@ interface LinkButtonProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>,
  */
 declare function LinkButton({ variant, tone, size, iconStart, iconEnd, className, children, render, ...rest }: LinkButtonProps): react.JSX.Element;
 
+interface AnchorSkeletonProps {
+    items?: number;
+    orientation?: 'vertical' | 'horizontal';
+    size?: 'sm' | 'md' | 'lg';
+    tone?: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'info';
+    'aria-label'?: string;
+}
+/** Matching link geometry for an Anchor whose section labels have not loaded yet. */
+declare function AnchorSkeleton({ items, orientation, size, tone, 'aria-label': ariaLabel, }: AnchorSkeletonProps): react.JSX.Element;
+
+type AnchorTone = 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'info';
+type AnchorOrientation = 'vertical' | 'horizontal';
+type AnchorSize = 'sm' | 'md' | 'lg';
+interface AnchorItem {
+    id: string;
+    label: ReactNode;
+    href: `#${string}`;
+    children?: AnchorItem[];
+}
+interface AnchorProps {
+    items: AnchorItem[];
+    activeId?: string;
+    orientation?: AnchorOrientation;
+    size?: AnchorSize;
+    tone?: AnchorTone;
+    motion?: boolean;
+    'aria-label'?: string;
+}
+/**
+ * Server-safe in-page navigation. The consuming app owns active-section observation and routing;
+ * Anchor only renders native hash links and exposes the supplied active state.
+ */
+declare function AnchorRoot({ items, activeId, orientation, size, tone, motion, 'aria-label': ariaLabel, }: AnchorProps): react.JSX.Element;
+declare const Anchor: typeof AnchorRoot & {
+    Skeleton: typeof AnchorSkeleton;
+};
+
 interface DividerProps {
     /** A word or two sitting in the rule, for a section break that names itself. */
     children?: ReactNode;
@@ -152,6 +286,66 @@ interface EmptyStateProps {
 }
 declare function Empty({ title, description, icon, actions, variant, className }: EmptyStateProps): react.JSX.Element;
 
+/** Matching Result anatomy while the end-state content is loading (ADR 0009). */
+declare function ResultSkeleton(): react.JSX.Element;
+
+type ResultStatus = 'success' | 'info' | 'warning' | 'error' | '404' | '403' | '500';
+interface ResultProps {
+    title: ReactNode;
+    description?: ReactNode;
+    status?: ResultStatus;
+    icon?: ReactNode;
+    extra?: ReactNode;
+    children?: ReactNode;
+}
+/** A presentational end state for a completed flow. Actions keep their own interaction contract. */
+declare function ResultRoot({ title, description, status, icon, extra, children }: ResultProps): react.JSX.Element;
+declare const Result: typeof ResultRoot & {
+    Skeleton: typeof ResultSkeleton;
+};
+
+interface NotificationSkeletonProps {
+    lines?: number;
+    withActions?: boolean;
+}
+declare function NotificationSkeleton({ lines, withActions }: NotificationSkeletonProps): react.JSX.Element;
+
+type NotificationTone = Extract<Tone, 'neutral' | 'info' | 'success' | 'warning' | 'danger'>;
+interface NotificationProps {
+    title: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+    actions?: ReactNode;
+    tone?: NotificationTone;
+    /** Accessible status announcement. Danger is assertive; every other tone is polite. */
+    announce?: boolean;
+}
+/**
+ * Persistent rich feedback in normal document flow. The app owns its lifetime, placement, and
+ * actions; transient timed feedback remains Toast.
+ */
+declare function NotificationRoot({ title, description, icon, actions, tone, announce, }: NotificationProps): react.JSX.Element;
+declare const Notification: typeof NotificationRoot & {
+    Skeleton: typeof NotificationSkeleton;
+};
+
+type QRCodeErrorCorrection = 'L' | 'M' | 'Q' | 'H';
+interface QRCodeProps {
+    /** Text or URL encoded into the matrix. Must not be empty. */
+    value: string;
+    /** Accessible description of what scanning the code does. */
+    label: string;
+    size?: Size;
+    errorCorrection?: QRCodeErrorCorrection;
+    /** Raises error correction when the same QR version has spare capacity. */
+    boostErrorCorrection?: boolean;
+}
+/**
+ * Server-safe SVG QR image. uqr owns standards-compliant matrix encoding; Ceebee owns only the
+ * accessible SVG and Token-based presentation.
+ */
+declare function QRCode({ value, label, size, errorCorrection, boostErrorCorrection, }: QRCodeProps): react.JSX.Element;
+
 interface SpinnerProps {
     size?: 'sm' | 'md' | 'lg';
     tone?: Tone;
@@ -465,4 +659,131 @@ interface StatCardSkeletonProps {
 /** Built from Statistic's own spacing, so the tile does not resize when data arrives (ADR 0009). */
 declare function StatCardSkeleton({ withVisual, className }: StatCardSkeletonProps): react.JSX.Element;
 
-export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, BarMini, type BarMiniProps, Breadcrumb, type BreadcrumbsProps, Container, type ContainerProps, type Crumb, type DecorHue, Divider, type DividerProps, Donut, type DonutArc, type DonutProps, type DonutSlice, Empty, type EmptyStateProps, Flex, type GlassStyle, Grid, type GridProps, Heading, type HeadingProps, Leaderboard, type LeaderboardEntry, type LeaderboardProps, type LeaderboardSkeletonProps, LinkButton, type LinkButtonProps, ProgressBar, type ProgressBarProps, ProgressRing, type ProgressRingProps, type RingGeometry, type Size, Skeleton, type SkeletonProps, type SkeletonTextProps, Sparkline, type SparklineGeometry, type SparklineProps, Spin, type SpinnerProps, type StackProps, type StatCardProps, type StatCardSkeletonProps, Statistic, type Step, type StepperProps, Steps, Surface, type SurfaceProps, type SurfaceVariant, Text, type TextProps, Timeline, type TimelineEntry, type TimelineProps, type TimelineSkeletonProps, type Tone, cn, donutArcs, hueForName, initialsOf, ringGeometry, sparklineGeometry };
+interface CardSkeletonProps {
+    size?: 'sm' | 'md' | 'lg';
+    variant?: SurfaceVariant;
+    glassStyle?: GlassStyle;
+    tone?: Tone;
+    hue?: DecorHue;
+    elevation?: 'none' | 'sm' | 'md' | 'lg';
+    radius?: 'sm' | 'md' | 'lg' | 'xl';
+    bordered?: boolean;
+    withCover?: boolean;
+    withActions?: boolean;
+    meta?: boolean;
+    lines?: number;
+    className?: string;
+}
+/** Matching Card geometry for a whole Card that has not loaded yet (ADR 0009). */
+declare function CardSkeleton({ size, variant, glassStyle, tone, hue, elevation, radius, bordered, withCover, withActions, meta, lines, className, }: CardSkeletonProps): react.JSX.Element;
+
+interface CardProps {
+    title?: ReactNode;
+    extra?: ReactNode;
+    cover?: ReactNode;
+    /** A composed Tabs instance. Tabs owns selection state and keyboard behaviour. */
+    tabs?: ReactNode;
+    /** Controls placed in the footer region. Card does not own their behaviour. */
+    actions?: ReactNode;
+    children?: ReactNode;
+    size?: 'sm' | 'md' | 'lg';
+    variant?: SurfaceVariant;
+    glassStyle?: GlassStyle;
+    tone?: Tone;
+    hue?: DecorHue;
+    elevation?: 'none' | 'sm' | 'md' | 'lg';
+    radius?: 'sm' | 'md' | 'lg' | 'xl';
+    bordered?: boolean;
+    hoverable?: boolean;
+    /** Tighter geometry for a Card nested inside another Card. */
+    nested?: boolean;
+    loading?: boolean;
+    asSection?: boolean;
+    className?: string;
+}
+declare function CardRoot({ title, extra, cover, tabs, actions, children, size, variant, glassStyle, tone, hue, elevation, radius, bordered, hoverable, nested, loading, asSection, className, }: CardProps): react.JSX.Element;
+interface CardMetaProps {
+    avatar?: ReactNode;
+    title?: ReactNode;
+    description?: ReactNode;
+    className?: string;
+}
+declare function CardMeta({ avatar, title, description, className }: CardMetaProps): react.JSX.Element;
+interface CardGridProps extends Omit<GridProps, 'children'> {
+    children?: ReactNode;
+}
+declare function CardGrid({ columns, gap, minItemWidth, className, children }: CardGridProps): react.JSX.Element;
+/** A non-interactive Surface composition for content about one subject. */
+declare const Card: typeof CardRoot & {
+    Meta: typeof CardMeta;
+    Grid: typeof CardGrid;
+    Skeleton: typeof CardSkeleton;
+};
+
+interface DescriptionsSkeletonProps {
+    columns?: 1 | 2 | 3 | 4;
+    layout?: 'horizontal' | 'vertical';
+    size?: DescriptionsSize;
+    bordered?: boolean;
+    items?: number;
+    className?: string;
+}
+/** Matching label/value geometry for a Descriptions record that has not loaded yet. */
+declare function DescriptionsSkeleton({ columns, layout, size, bordered, items, className, }: DescriptionsSkeletonProps): react.JSX.Element;
+
+type DescriptionsSize = 'sm' | 'md' | 'lg';
+interface DescriptionsProps {
+    title?: ReactNode;
+    extra?: ReactNode;
+    children?: ReactNode;
+    columns?: 1 | 2 | 3 | 4;
+    layout?: 'horizontal' | 'vertical';
+    size?: DescriptionsSize;
+    bordered?: boolean;
+    colon?: boolean;
+    className?: string;
+}
+interface DescriptionsItemProps {
+    label: ReactNode;
+    children?: ReactNode;
+    span?: 1 | 2 | 3 | 4;
+    className?: string;
+}
+declare function DescriptionsItem({ label, children, span, className }: DescriptionsItemProps): react.JSX.Element;
+declare function DescriptionsRoot({ title, extra, children, columns, layout, size, bordered, colon, className, }: DescriptionsProps): react.JSX.Element;
+declare const Descriptions: typeof DescriptionsRoot & {
+    Item: typeof DescriptionsItem;
+    Skeleton: typeof DescriptionsSkeleton;
+};
+
+interface ListySkeletonProps {
+    items?: number;
+    grouped?: boolean;
+}
+declare function ListySkeleton({ items, grouped }: ListySkeletonProps): react.JSX.Element;
+
+interface ListyGroup {
+    /** Stable identity; grouped input must keep every group contiguous. */
+    key: string;
+    label: ReactNode;
+}
+interface ListyProps<Item> {
+    items: Item[];
+    /** Stable item identity. Duplicate keys are rejected before rendering. */
+    getKey: (item: Item) => string;
+    renderItem: (item: Item, index: number) => ReactNode;
+    /** Optional presentational grouping. Groups must be contiguous in the supplied item order. */
+    getGroup?: (item: Item) => ListyGroup;
+    /** Keeps the current group title visible while its native list section scrolls. */
+    stickyGroupHeadings?: boolean;
+    /** Lets supporting browsers skip off-screen painting; no virtual-scroll or row-height state is owned. */
+    optimizeRendering?: boolean;
+    'aria-label'?: string;
+}
+/** Server-safe, presentational list. Rendering optimization is browser-native paint containment only. */
+declare function ListyRoot<Item>({ items, getKey, renderItem, getGroup, stickyGroupHeadings, optimizeRendering, 'aria-label': ariaLabel, }: ListyProps<Item>): react.JSX.Element;
+declare const Listy: typeof ListyRoot & {
+    Skeleton: typeof ListySkeleton;
+};
+
+export { Affix, type AffixEdge, type AffixOffset, type AffixProps, Anchor, type AnchorItem, type AnchorOrientation, type AnchorProps, type AnchorSize, AnchorSkeleton, type AnchorSkeletonProps, type AnchorTone, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, BarMini, type BarMiniProps, Breadcrumb, type BreadcrumbsProps, Card, type CardGridProps, type CardMetaProps, type CardProps, type CardSkeletonProps, Container, type ContainerProps, type Crumb, type DecorHue, Descriptions, type DescriptionsItemProps, type DescriptionsProps, type DescriptionsSize, type DescriptionsSkeletonProps, Divider, type DividerProps, Donut, type DonutArc, type DonutProps, type DonutSlice, Empty, type EmptyStateProps, Flex, type GlassStyle, Grid, type GridProps, Heading, type HeadingProps, Leaderboard, type LeaderboardEntry, type LeaderboardProps, type LeaderboardSkeletonProps, LinkButton, type LinkButtonProps, Listy, type ListyGroup, type ListyProps, ListySkeleton, type ListySkeletonProps, Masonry, type MasonryColumns, type MasonryProps, MasonrySkeleton, type MasonrySkeletonProps, type MasonryStep, Notification, type NotificationProps, NotificationSkeleton, type NotificationSkeletonProps, type NotificationTone, PageContainer, type PageContainerProps, PageContainerSkeleton, type PageContainerSkeletonProps, ProgressBar, type ProgressBarProps, ProgressRing, type ProgressRingProps, QRCode, type QRCodeErrorCorrection, type QRCodeProps, Result, type ResultProps, ResultSkeleton, type ResultStatus, type RingGeometry, type Size, Skeleton, type SkeletonProps, type SkeletonTextProps, Space, type SpaceAlign, type SpaceCompactProps, type SpaceDirection, type SpaceProps, type SpaceSize, SpaceSkeleton, type SpaceSkeletonProps, type SpaceStep, Sparkline, type SparklineGeometry, type SparklineProps, Spin, type SpinnerProps, type StackProps, type StatCardProps, type StatCardSkeletonProps, Statistic, type Step, type StepperProps, Steps, Surface, type SurfaceProps, type SurfaceVariant, Text, type TextProps, Timeline, type TimelineEntry, type TimelineProps, type TimelineSkeletonProps, type Tone, cn, donutArcs, hueForName, initialsOf, ringGeometry, sparklineGeometry };