@uisatin/ui 0.0.0-stage → 0.1.0

package/components/announcement-bar.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+/**
+ * AnnouncementBar: one line of news across the top (or bottom) edge of the page, with a button
+ * to read more and an optional close.
+ *
+ * `tone` sets the fill: primary (action/primary/bg, the default), inverse (action/inverse/bg) or
+ * default (bg/card between two border/subtle rules). The bar is 44 high, the message centred in Body/lg with
+ * the action after it, 12px apart: a secondary xs Button with a 14px arrow. The close button,
+ * when `onDismiss` is passed, sits 12px from the right edge: a 28px square, the 16px cross at
+ * 70% that turns full on hover over action/primary/bg-hover.
+ *
+ * `background="mesh"` adds the Banner's glow over the primary; `shimmer` sends a soft band of
+ * light across now and then.
+ *
+ * `sticky` keeps it on the top or bottom edge of its scroll container as the page scrolls.
+ * Long messages wrap; the close keeps its corner.
+ */
+export interface AnnouncementBarProps extends React.ComponentProps<'div'> {
+    /** The button after the message; with `href` it renders as a link. */
+    action?: {
+        label: React.ReactNode;
+        href?: string;
+        onClick?: () => void;
+    };
+    onDismiss?: () => void;
+    dismissLabel?: string;
+    /** Sticks to the top or bottom edge of its scroll container. */
+    sticky?: 'top' | 'bottom';
+    /**
+     * `primary`: action/primary/bg (the default). `inverse`: action/inverse/bg, near-black in light
+     * and near-white in dark. `default`: bg/card with border/subtle rules above and below, like a Banner.
+     */
+    tone?: 'primary' | 'inverse' | 'default';
+    /** `mesh` lays the Banner's glow over the bar: lighter on primary and inverse, coloured on default. */
+    background?: 'plain' | 'mesh';
+    /** Now and then a soft band of light crosses the bar (off under reduced motion). */
+    shimmer?: boolean;
+}
+export declare function AnnouncementBar({ action, onDismiss, dismissLabel, sticky, tone, background, shimmer, children, className, ...props }: AnnouncementBarProps): React.JSX.Element;

package/components/announcement-bar.js

@@ -0,0 +1,6 @@
+'use client';export { AnnouncementBar } from '../chunk-2YEWSJD7.js';
+import '../chunk-TOMSU4S4.js';
+import '../chunk-HNQUX43Z.js';
+import '../chunk-H63FYCMY.js';
+//# sourceMappingURL=announcement-bar.js.map
+//# sourceMappingURL=announcement-bar.js.map

package/components/announcement-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"announcement-bar.js"}

package/components/attachment.d.ts

@@ -0,0 +1,73 @@
+import * as React from 'react';
+/**
+ * Attachment, 1:1 with the uiKit `Attachment` set (3141:20409), plus `AttachmentGroup`
+ * (3144:21146) and `AttachmentPreview` (3142:20419).
+ *
+ * - size `sm`: a 28px chip — 16px file icon, medium 13 name (max 200, truncated), remove button.
+ *   Radius-md, or full when `shape="rounded"`.
+ * - size `lg`: a 32px icon tile (bg/muted) + name + 12px text/muted meta line. Radius-xl with 6px
+ *   vertical padding (52 high), or full with 4px (48 high).
+ * - States: default bg/popover, border/default, 0 1 1 shadow-xs. Hover border/strong (sm also
+ *   turns bg/canvas). Pressed bg/muted, border/strong, and the lg tile turns bg/card. Focus keeps
+ *   border/default and adds the 2px focus ring. All answer to `data-force` as well.
+ * - The remove button is the DS Button (tertiary, xs, icon only, rounded), as in Figma.
+ * - The whole chip opens the file (`onOpen`); `preview` shows an AttachmentPreview above it on hover.
+ */
+export interface AttachmentProps extends Omit<React.ComponentProps<'div'>, 'children'> {
+    name: string;
+    /** Type and size, e.g. "PDF · 2.4 MB". Shown on `lg` only. */
+    meta?: string;
+    /** File type icon. Defaults to the PDF icon. */
+    icon?: React.ReactNode;
+    size?: 'sm' | 'lg';
+    /** Rounded inside the composer and chat, Default inside cards and tables. */
+    shape?: 'default' | 'rounded';
+    /** Shows the remove button. Leave it out once the message is sent. */
+    onRemove?: () => void;
+    onOpen?: () => void;
+    /** Content for the hover preview, usually an `<AttachmentPreview>`. */
+    preview?: React.ReactNode;
+    'data-force'?: 'hover' | 'pressed' | 'focus';
+}
+export declare function Attachment({ className, name, meta, icon, size, shape, onRemove, onOpen, preview, ...props }: AttachmentProps): React.JSX.Element;
+export interface AttachmentGroupProps extends React.ComponentProps<'div'> {
+}
+/** AttachmentGroup (3144:21146): files wrap onto new rows at 576px, 4px apart. */
+export declare function AttachmentGroup({ className, ...props }: AttachmentGroupProps): React.JSX.Element;
+export interface AttachmentPreviewProps extends Omit<React.ComponentProps<'div'>, 'children'> {
+    name: string;
+    icon?: React.ReactNode;
+    /** The first page or the first rows. Scrolls inside a fixed 176px viewport. */
+    children?: React.ReactNode;
+    /** Left side of the footer: an `AttachmentPreviewPager` or `AttachmentPreviewSheets`. */
+    navigation?: React.ReactNode;
+    onOpen?: () => void;
+    openLabel?: string;
+}
+/**
+ * AttachmentPreview (3142:20419): 296 wide, bg/popover, border/default, radius-xl, shadcn md
+ * shadow. A header with the file, a 176px scrolling viewport with a fade at the bottom, a
+ * border/subtle divider and a footer that moves between pages or sheets and opens the file.
+ */
+export declare function AttachmentPreview({ className, name, icon, children, navigation, onOpen, openLabel, ...props }: AttachmentPreviewProps): React.JSX.Element;
+/** Document footer: previous / next section and "Page 1 of 3". */
+export declare function AttachmentPreviewPager({ page, total, onPrevious, onNext, }: {
+    page: number;
+    total: number;
+    onPrevious?: () => void;
+    onNext?: () => void;
+}): React.JSX.Element;
+/** Spreadsheet footer: one tab per sheet; the current one is filled bg/muted. */
+export declare function AttachmentPreviewSheets({ sheets, value, onValueChange, }: {
+    sheets: string[];
+    value: string;
+    onValueChange?: (sheet: string) => void;
+}): React.JSX.Element;
+/**
+ * File type icons from uiKit `icon` (filePdf 3138:39947, fileXlsx 3138:39967). They keep their
+ * own colours (library primitives), so they don't follow currentColor.
+ */
+export declare function FileIcon({ type, className }: {
+    type: 'pdf' | 'xlsx';
+    className?: string;
+}): React.JSX.Element;

package/components/attachment.js

@@ -0,0 +1,5 @@
+'use client';export { Attachment, AttachmentGroup, AttachmentPreview, AttachmentPreviewPager, AttachmentPreviewSheets, FileIcon } from '../chunk-H4NU7NPO.js';
+import '../chunk-HNQUX43Z.js';
+import '../chunk-H63FYCMY.js';
+//# sourceMappingURL=attachment.js.map
+//# sourceMappingURL=attachment.js.map

package/components/attachment.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"attachment.js"}

package/components/avatar.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+export type AvatarTone = 'neutral' | 'brand' | 'sky' | 'green' | 'amber' | 'red' | 'fuchsia' | 'plum';
+export type AvatarSize = 16 | 20 | 24 | 32 | 40 | 48;
+/**
+ * Avatar, 1:1 with the uiKit `Avatar` set (992:20199): initials on a tone fill, the same eight
+ * hue pairs as Badge (`tone/bg` fill, `tone/fg` text, no border), six px sizes and a Circle or
+ * Rounded shape. Rounded steps the radius with the size: 4 / 4 / 6 / 8 / 10 / 12.
+ *
+ * Type per size, from Figma: 16 → SemiBold 7/8, 20 → SemiBold 9/10 (no kit token for either),
+ * 24 → text/2xs SemiBold, 32 → Label/sm 13/16, 40 → Label/lg 14/14, 48 → text/lg Medium.
+ * Groups (docs example 3889:7365) overlap with -8px and stack the first on top.
+ *
+ * With `name` the avatar says who it is: it becomes an image named after the person, takes
+ * keyboard focus, and shows the name in a Tooltip. On hover the tooltip waits 400 ms — the middle
+ * of the 0.3–0.5 s NN/g recommends, so a pointer passing over a row of faces doesn't flash names —
+ * and stays 150 ms after the pointer leaves. Keyboard focus shows it at once.
+ */
+declare const avatarVariants: (props?: ({
+    size?: 16 | 20 | 24 | 32 | 40 | 48 | null | undefined;
+    shape?: "circle" | "rounded" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface AvatarProps extends Omit<React.ComponentProps<'span'>, 'children'>, Omit<VariantProps<typeof avatarVariants>, 'size'> {
+    /** One or two letters, or a count like "+3" at the end of a group. */
+    initials: string;
+    tone?: AvatarTone;
+    size?: AvatarSize;
+    /** The person's name: shown in a tooltip on hover and focus, and read by screen readers. */
+    name?: string;
+}
+/** NN/g: wait 0.3–0.5 s before showing hidden content on hover; we take the middle. */
+export declare const AVATAR_TOOLTIP_DELAY = 400;
+export declare function Avatar({ className, initials, tone, size, shape, name, ...props }: AvatarProps): React.JSX.Element;
+export { avatarVariants };

package/components/avatar.js

@@ -0,0 +1,6 @@
+'use client';export { AVATAR_TOOLTIP_DELAY, Avatar, avatarVariants } from '../chunk-TVLGZGYN.js';
+import '../chunk-B6V4VSGH.js';
+import '../chunk-BKZBWPUH.js';
+import '../chunk-H63FYCMY.js';
+//# sourceMappingURL=avatar.js.map
+//# sourceMappingURL=avatar.js.map

package/components/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"avatar.js"}

package/components/badge.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+export type BadgeTone = 'neutral' | 'brand' | 'sky' | 'green' | 'amber' | 'red' | 'fuchsia' | 'plum';
+/**
+ * Badge, 1:1 with the uiKit `Badge` set (988:20203): eight tones, Large (8 × 4 padding, 24
+ * high) or Small (6 × 2, 20 high), Soft (tone fill), Plain (no fill) or Outline (bg/card with a border/default edge), radius-sm or full.
+ * Label medium 13/16, icon 14px in the tone colour, 4px apart. No border, no shadow.
+ * The tone comes from `data-tone`, which repoints the `tone/*` tokens.
+ */
+declare const badgeVariants: (props?: ({
+    size?: "lg" | "sm" | null | undefined;
+    variant?: "outline" | "plain" | "soft" | null | undefined;
+    shape?: "default" | "rounded" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface BadgeProps extends React.ComponentProps<'span'>, VariantProps<typeof badgeVariants> {
+    tone?: BadgeTone;
+}
+export declare function Badge({ className, tone, size, variant, shape, ...props }: BadgeProps): React.JSX.Element;
+export { badgeVariants };

package/components/badge.js

@@ -0,0 +1,4 @@
+'use client';export { Badge, badgeVariants } from '../chunk-O7F3CIDV.js';
+import '../chunk-H63FYCMY.js';
+//# sourceMappingURL=badge.js.map
+//# sourceMappingURL=badge.js.map

package/components/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"badge.js"}

package/components/banner.d.ts

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+/**
+ * Banner, 1:1 with the uiKit `Banner` set (3822:3475): a title, an optional description (one
+ * or two lines) and one action, on bg/card with a 1px border/default and the shadcn md shadow.
+ *
+ * - layout="horizontal": 450 wide, one row, 12 × 8 padding, 10 gap; the action and the close
+ *   button sit on the right, 4px apart.
+ * - layout="sidebar": 222 wide (the navigation column's inner width), 12 padding, 12 gap; copy on
+ *   top, the action stretched across the bottom, close pinned 3px from the top-right corner.
+ * - shape="rounded" is radius-xl (12). shape="pill" is fully round on a one-line horizontal
+ *   banner and radius-3xl (20) wherever the banner is taller.
+ * - background="mesh" lays two pre-rendered glows over the card: a light one in Multiply (shows
+ *   on white, gone on dark) and a dark one in Screen (glows on dark, gone on white), so it follows
+ *   the theme without variables. Figma renders one pair per layout and line count; the PNGs live
+ *   in satin-lab/public/figma and can be swapped with `mesh`.
+ *
+ * tone="primary" turns the card action/primary/bg (border action/primary/border) with
+ * action/primary/fg copy (description at 80%); its mesh is the dark glow alone, in Screen, so it
+ * lightens the primary. `shimmer` sends a soft band of light across now and then.
+ *
+ * Title is 14/18 medium, description Body/md in text/muted, 2px apart. The close
+ * button only renders when `onDismiss` is passed.
+ */
+declare const bannerVariants: (props?: ({
+    layout?: "horizontal" | "sidebar" | null | undefined;
+    shape?: "pill" | "rounded" | null | undefined;
+    lines?: "one" | "two" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type Mesh = {
+    light: string;
+    dark: string;
+};
+/** Figma's pre-rendered mesh pairs, per layout and line count (served from satin-lab/public). */
+export declare const bannerMesh: Record<'horizontal' | 'sidebar', Record<'one' | 'two', Mesh>>;
+export interface BannerProps extends Omit<React.ComponentProps<'div'>, 'title'>, Omit<VariantProps<typeof bannerVariants>, 'lines'> {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /** One action, usually `<Button variant="secondary">`. Stretches across a sidebar banner. */
+    action?: React.ReactNode;
+    background?: 'mesh' | 'plain';
+    /** `primary`: action/primary/bg with action/primary/fg text; its mesh glows lighter on top. */
+    tone?: 'default' | 'primary';
+    /** Now and then a soft band of light crosses the banner (off under reduced motion). */
+    shimmer?: boolean;
+    /** Shows the close button. */
+    onDismiss?: () => void;
+    /** Accessible name of the close button. */
+    dismissLabel?: string;
+    /** Replace the mesh images. */
+    mesh?: Mesh;
+}
+export declare function Banner({ className, title, description, action, layout, background, tone, shimmer, shape, onDismiss, dismissLabel, mesh, ...props }: BannerProps): React.JSX.Element;
+export { bannerVariants };

package/components/banner.js

@@ -0,0 +1,5 @@
+'use client';export { Banner, bannerMesh, bannerVariants } from '../chunk-TOMSU4S4.js';
+import '../chunk-HNQUX43Z.js';
+import '../chunk-H63FYCMY.js';
+//# sourceMappingURL=banner.js.map
+//# sourceMappingURL=banner.js.map

package/components/banner.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"banner.js"}

package/components/bar-chart.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { type ChartCardBaseProps } from './chart';
+/**
+ * Bar chart, 1:1 with the uiKit `chart/barCard` (3607:18253) and its `chart/barColumn`
+ * (3602:17543), in the shared card frame (chart.tsx).
+ *
+ * BarCard: a 206px plot, 32px axis gutter, 4 dashed border-subtle gridlines at nice ticks,
+ * axis labels regular 12/18 text-muted, columns 8px apart with a 180px track, bars radius-md
+ * in chart/3 and day labels medium 13 text-muted 6px below. Hover (or `highlight`) keeps the
+ * hovered bar, outlines it 2px out in chart/3, shows its value above and bolds its day; the
+ * other bars dim to a 30% tint of chart/3 on bg/card, so they follow the bar, not the brand.
+ * The KPI above defaults to the sum, in full (formatValue is for the axis); an optional legend row can sit under the plot.
+ *
+ * When the data changes (a new period, say) the bars regrow from the baseline in 250 ms on
+ * ease-out, revealed by clip-path so their rounded tops stay whole, and the day labels and the
+ * axis fade in on the new scale. Not on the first paint; under reduced motion, or with
+ * `reducedMotion`, the bars swap at once.
+ */
+export declare function niceMax(max: number): number;
+export interface BarCardProps extends ChartCardBaseProps {
+    /** The legend row under the plot. */
+    legend?: {
+        label: string;
+        value?: string;
+        note?: string;
+    };
+    /** Unit after the value in the tooltip ("covers"). */
+    unit?: string;
+    /** Swap the bars without motion when the data changes, as under prefers-reduced-motion. */
+    reducedMotion?: boolean;
+}
+export declare function BarCard({ data, formatValue, highlight, legend, unit, reducedMotion, total, ...props }: BarCardProps): React.JSX.Element;

package/components/bar-chart.js

@@ -0,0 +1,11 @@
+'use client';export { BarCard, niceMax } from '../chunk-DO3TBNSC.js';
+import '../chunk-YPJYW624.js';
+import '../chunk-Y5AYU7PK.js';
+import '../chunk-72OCFAPT.js';
+import '../chunk-UBNHSZSE.js';
+import '../chunk-3DINAQLL.js';
+import '../chunk-BKZBWPUH.js';
+import '../chunk-O7F3CIDV.js';
+import '../chunk-H63FYCMY.js';
+//# sourceMappingURL=bar-chart.js.map
+//# sourceMappingURL=bar-chart.js.map

package/components/bar-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"bar-chart.js"}

package/components/breadcrumb.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+/**
+ * Breadcrumb, 1:1 with the uiKit `Breadcrumb` set (4025:3711): the path to the current page,
+ * items 4px apart with a 14px chevron (text/subtle) between them. An item is 13px text/muted
+ * in 2px × 4px of padding, radius 6; it turns text/default on hover. The last item is the
+ * current page: text/default, medium, not a link.
+ *
+ * An item can lead with a 14px `icon`, 8px before its label and centred on it; usually the first one (Home, the
+ * workspace). With `hideLabel` only the icon shows, and the label names it for screen readers.
+ *
+ * With more items than `maxItems`, the middle ones fold into a "…" button (24px) that lists
+ * them in a Dropdown; the first item and the last `maxItems - 1` stay.
+ *
+ * A `nav` named "Breadcrumb" around an ordered list; the current page has aria-current="page".
+ */
+export interface BreadcrumbItem {
+    label: string;
+    /** A 14px icon before the label, usually on the first item. */
+    icon?: React.ReactNode;
+    /** Show only the icon; the label still names the item for screen readers. */
+    hideLabel?: boolean;
+    /** Where it goes. Left out (or on the current page) it is plain text, or a button with `onSelect`. */
+    href?: string;
+    onSelect?: () => void;
+}
+export interface BreadcrumbProps extends Omit<React.ComponentProps<'nav'>, 'children'> {
+    /** From the top level down; the last one is the current page. */
+    items: BreadcrumbItem[];
+    /** Fold the middle into "…" when there are more items than this. */
+    maxItems?: number;
+}
+export declare function Breadcrumb({ items, maxItems, className, 'aria-label': ariaLabel, ...props }: BreadcrumbProps): React.JSX.Element;

package/components/breadcrumb.js

@@ -0,0 +1,6 @@
+'use client';export { Breadcrumb } from '../chunk-HL42K2NH.js';
+import '../chunk-3DINAQLL.js';
+import '../chunk-BKZBWPUH.js';
+import '../chunk-H63FYCMY.js';
+//# sourceMappingURL=breadcrumb.js.map
+//# sourceMappingURL=breadcrumb.js.map

package/components/breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"breadcrumb.js"}

package/components/button.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+/**
+ * Button, 1:1 with the uiKit `button` component set (10:1838): five styles, four sizes
+ * xs / md / lg / xl (24 / 28 / 32 / 36), Default or Rounded shape, and an icon-only form.
+ *
+ * Solid styles (primary, destructive, inverse) are a 1px border in the style's `border`
+ * token, a 1px outer ring in the current background and a 0 3 6 drop shadow (gone when
+ * pressed); no inner glow. Focus adds a 2px `action/focus-ring` spread; disabled
+ * is the default look at 50% opacity. Icons take the label colour on solid styles and
+ * text/muted on secondary and tertiary.
+ *
+ * Shadows are written as plain box-shadow, not Tailwind's shadow utilities: those compose
+ * five custom properties, and a browser that drops one of them drops the whole shadow.
+ *
+ * States use the satin-hover / satin-focus / satin-pressed variants (styles/index.css):
+ * the real pseudo-classes, or `data-force="hover" | "focus" | "pressed"` for state sheets.
+ * An open menu's trigger looks pressed, which hides the ring; with keyboard focus on it the
+ * `[aria-haspopup][aria-expanded=true]:focus-visible` rules bring the ring back.
+ */
+declare const buttonVariants: (props?: ({
+    variant?: "destructive" | "inverse" | "primary" | "secondary" | "tertiary" | null | undefined;
+    size?: "lg" | "md" | "xl" | "xs" | null | undefined;
+    shape?: "default" | "rounded" | null | undefined;
+    iconOnly?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface ButtonProps extends React.ComponentProps<'button'>, VariantProps<typeof buttonVariants> {
+    /** Render the child element (a link, say) with the button's styles instead of a `<button>`. */
+    asChild?: boolean;
+}
+export declare function Button({ className, variant, size, shape, iconOnly, asChild, type, ...props }: ButtonProps): React.JSX.Element;
+export { buttonVariants };

package/components/button.js

@@ -0,0 +1,4 @@
+'use client';export { Button, buttonVariants } from '../chunk-HNQUX43Z.js';
+import '../chunk-H63FYCMY.js';
+//# sourceMappingURL=button.js.map
+//# sourceMappingURL=button.js.map

package/components/button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"button.js"}

package/components/card.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+/**
+ * Card, 1:1 with the uiKit `Card` set (1122:20156): bg/card, 1px border/default, radius-2xl (16),
+ * no shadow, 405 wide by default. Three stacked sections with no gap between them:
+ *
+ * - header: title in Label/lg (14/14 medium), description in text/sm muted, 2px apart.
+ *   Padding 16 / 16 / 0 on md, 12 / 12 / 0 on sm (no bottom padding: the body's top padding
+ *   is the space under it).
+ * - body (children): 16 padding on md, 12 on sm, children 8 apart.
+ * - footer: same padding as the body; its items sit in a row, 8 apart.
+ *
+ * `onClose` adds a tertiary 28px icon button 7px from the top-right corner.
+ */
+declare const cardVariants: (props?: ({
+    size?: "md" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface CardProps extends Omit<React.ComponentProps<'div'>, 'title'>, VariantProps<typeof cardVariants> {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    footer?: React.ReactNode;
+    /** Shows the close button. */
+    onClose?: () => void;
+    /** Accessible name of the close button. */
+    closeLabel?: string;
+}
+export declare function Card({ className, size, title, description, footer, onClose, closeLabel, children, ...props }: CardProps): React.JSX.Element;
+export { cardVariants };

package/components/card.js

@@ -0,0 +1,5 @@
+'use client';export { Card, cardVariants } from '../chunk-XILQ7GXE.js';
+import '../chunk-HNQUX43Z.js';
+import '../chunk-H63FYCMY.js';
+//# sourceMappingURL=card.js.map
+//# sourceMappingURL=card.js.map

package/components/card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"card.js"}

package/components/channel-chart.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { type ChartCardBaseProps } from './chart';
+/**
+ * Channel chart, 1:1 with the uiKit `chart/channelCard` (3608:18797), in the shared card
+ * frame (chart.tsx).
+ *
+ * ChannelCard: the KPI (the sum unless given) with its change badge, a 14px stacked bar of fr
+ * segments 2px apart in chart/1–5 (4px outer corners, 1.5px inner), and a legend row per
+ * channel (8px swatch, label, value, 32 high, 2px apart), in two columns from 560px. Hover (or `highlight`) fades the
+ * other segments to 15% and the other rows to 45%, and fills the row bg/muted.
+ */
+export interface ChannelCardProps extends ChartCardBaseProps {
+}
+export declare function ChannelCard({ data, formatValue, highlight, total, ...props }: ChannelCardProps): React.JSX.Element;

package/components/channel-chart.js

@@ -0,0 +1,11 @@
+'use client';export { ChannelCard } from '../chunk-LZMKSFCF.js';
+import '../chunk-YPJYW624.js';
+import '../chunk-Y5AYU7PK.js';
+import '../chunk-72OCFAPT.js';
+import '../chunk-UBNHSZSE.js';
+import '../chunk-3DINAQLL.js';
+import '../chunk-BKZBWPUH.js';
+import '../chunk-O7F3CIDV.js';
+import '../chunk-H63FYCMY.js';
+//# sourceMappingURL=channel-chart.js.map
+//# sourceMappingURL=channel-chart.js.map

package/components/channel-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"channel-chart.js"}

package/components/chart.d.ts

@@ -0,0 +1,88 @@
+import * as React from 'react';
+/**
+ * The parts every chart card shares, 1:1 with the uiKit `chart/barCard` (3607:18253) and `chart/channelCard`
+ * (3608:18797) frames and the parts `chart/legendRow`
+ * (3602:17559) and `chart/tooltip` (3602:17522). Plain React and CSS, no chart library.
+ *
+ * Every card sits in ChartCard: the title and a period Select on one row, the KPI with its
+ * change and the range under it, then the chart.
+ *
+ * The tooltip is a text/default pill with bg/canvas text, medium label + value at 72%, 10×6
+ * padding, radius-md, a 12×6 pointer and a two-step sm shadow.
+ */
+export type ChartDatum = {
+    label: string;
+    value: number;
+    /** Tooltip title; defaults to the label. */
+    tooltipLabel?: string;
+};
+export type Periods = string[] | string[][];
+export interface ChartCardBaseProps extends Omit<React.ComponentProps<'div'>, 'title'> {
+    title: string;
+    /** The dates the card covers, under the KPI, e.g. "Oct 26 – Nov 1, 2026 · vs previous 7 days". */
+    range: string;
+    data: ChartDatum[];
+    /** The KPI under the title, e.g. "€48,260". Cards that have one default it to the formatted sum. */
+    total?: string;
+    /** The change badge after the KPI, e.g. "+5.2%". A leading minus turns it red. */
+    change?: string;
+    /** Periods for the Select in the header. Nested arrays become titled-less groups split by a rule. */
+    periods?: Periods;
+    /** The selected period. */
+    value?: string;
+    onPeriodChange?: (period: string) => void;
+    /** Formats values in the tooltip, the legend and the axis. */
+    formatValue?: (value: number) => string;
+    /** Index of the datum shown as hovered (state sheets, docs). */
+    highlight?: number;
+}
+export declare const defaultFormat: (n: number) => string;
+/**
+ * The card every chart sits in (uiKit "chart explorations" A, 4084:3591): bg/card, 1px
+ * border-default, radius-2xl, 16px in and 16 between rows. Row one: the title (16/24 medium,
+ * text/default) and, when there are `periods`, a small Select for the period at the right. Row
+ * two: the KPI (text/xl semibold) with its change badge, and the range under it in text/muted, 2px
+ * apart; without a KPI the range sits 4px under the title. Then the chart. The card is a size
+ * container, so a chart can lay itself out wider from 560px (`@min-[560px]:`).
+ */
+export declare function ChartCard({ title, range, total, change, periods, value, onPeriodChange, className, children, ...props }: Omit<ChartCardBaseProps, 'data' | 'formatValue' | 'highlight'>): React.JSX.Element;
+/**
+ * chart/legendPill (4061:4182).
+ * - `outline`: an outline pill with no fill — 8px swatch, label, value 6 apart, 6 / 10 in. Active
+ *   turns the ring border-strong.
+ * - `plain` (the Donut legend): no ring and no value, 6 / 8 in; active fills bg/hover, as plain
+ *   controls do on hover.
+ * Dimmed fades the content to 45%, never the ground.
+ */
+export declare function ChartLegendPill({ color, label, value, variant, active, dimmed, className, ...props }: {
+    color: string;
+    label: React.ReactNode;
+    value?: React.ReactNode;
+    variant?: 'outline' | 'plain';
+    active?: boolean;
+    dimmed?: boolean;
+} & React.ComponentProps<'div'>): React.JSX.Element;
+/**
+ * The chart tooltip pill with its pointer. Exported for custom charts.
+ * With `anchor` it floats over the page (see Floating): it never gets cut off by the card,
+ * flips below when there's no room above, slides in from the screen edge, and its pointer
+ * keeps pointing at the anchor. Without it, it renders in place.
+ */
+export declare function ChartTooltip({ label, value, anchor, sideOffset, className, ...props }: {
+    label: React.ReactNode;
+    value: React.ReactNode;
+    /** The element it points at. */
+    anchor?: Element | null;
+    /** Gap between the anchor and the pointer's tip. */
+    sideOffset?: number;
+} & React.ComponentProps<'div'>): React.JSX.Element;
+/** One legend row: 8px swatch, label, value and an optional note. */
+export declare function ChartLegendRow({ color, label, value, note, active, dimmed, className, ...props }: {
+    color: string;
+    label: React.ReactNode;
+    value: React.ReactNode;
+    note?: React.ReactNode;
+    active?: boolean;
+    dimmed?: boolean;
+} & React.ComponentProps<'div'>): React.JSX.Element;
+/** Rounds the top of the axis up to a nice number that splits into four steps. */

package/components/chart.js

@@ -0,0 +1,10 @@
+'use client';export { ChartCard, ChartLegendPill, ChartLegendRow, ChartTooltip, defaultFormat } from '../chunk-YPJYW624.js';
+import '../chunk-Y5AYU7PK.js';
+import '../chunk-72OCFAPT.js';
+import '../chunk-UBNHSZSE.js';
+import '../chunk-3DINAQLL.js';
+import '../chunk-BKZBWPUH.js';
+import '../chunk-O7F3CIDV.js';
+import '../chunk-H63FYCMY.js';
+//# sourceMappingURL=chart.js.map
+//# sourceMappingURL=chart.js.map

package/components/chart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"chart.js"}

package/components/checkbox.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { Checkbox as CheckboxPrimitive } from 'radix-ui';
+/**
+ * Checkbox, 1:1 with the uiKit `checkboxBase` (849:57531) and `checkbox` (849:57577) sets:
+ * a 16px box, radius-sm, with checked and indeterminate states and an optional label and
+ * description on either side, both 14px whatever the theme's body size (label medium,
+ * description regular). With a label or description the whole field is a `<label>`, so a
+ * click anywhere on it (box, label, description) toggles the box, and hovering it hovers the
+ * box; the label names the box, the description is wired up with `aria-describedby`. The look of every state lives in styles/components.css.
+ */
+export interface CheckboxProps extends React.ComponentProps<typeof CheckboxPrimitive.Root> {
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    /** Which side of the text the box sits on. */
+    placement?: 'left' | 'right';
+}
+export declare function Checkbox({ className, label, description, placement, id, ...props }: CheckboxProps): React.JSX.Element;

package/components/checkbox.js

@@ -0,0 +1,4 @@
+'use client';export { Checkbox } from '../chunk-FDKIX4DC.js';
+import '../chunk-H63FYCMY.js';
+//# sourceMappingURL=checkbox.js.map
+//# sourceMappingURL=checkbox.js.map

package/components/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"checkbox.js"}