@sragatiping/cuboid 0.1.0

package/dist/components/Graph/GraphRow.d.ts

@@ -0,0 +1,14 @@
+import { default as React, CSSProperties } from 'react';
+export interface GraphRowProps {
+    children?: React.ReactNode;
+    style?: CSSProperties;
+    className?: string;
+}
+/**
+ * A row inside a GraphCard.
+ *
+ * position: relative so a GraphHandle placed inside this row can use
+ * position: absolute to anchor itself to the row's left or right edge,
+ * vertically centred at the row's midpoint.
+ */
+export declare function GraphRow({ children, style, className }: GraphRowProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Graph/context.d.ts

@@ -0,0 +1,36 @@
+import { RefObject } from 'react';
+/** A position in canvas space (same coordinate system as card x/y props). */
+export interface HandlePos {
+    x: number;
+    y: number;
+}
+/**
+ * All registered handle positions keyed by "nodeId:handleId".
+ * Read by GraphEdge to know where to draw bezier endpoints.
+ */
+export type HandleRegistry = Record<string, HandlePos>;
+export interface CanvasContextValue {
+    /** Ref to the outermost viewport div — used for coordinate conversion. */
+    viewportRef: RefObject<HTMLDivElement | null>;
+    /** Ref to the SVG element — GraphEdge portals paths into this. */
+    svgRef: RefObject<SVGSVGElement | null>;
+    /** Current pan offset in pixels. */
+    panX: number;
+    panY: number;
+    /** Current zoom level (1 = 100%). */
+    zoom: number;
+    /** All currently registered handle positions (canvas space). */
+    handles: HandleRegistry;
+    /** Called by GraphHandle on mount to publish its canvas-space position. */
+    registerHandle: (key: string, pos: HandlePos) => void;
+    /** Called by GraphHandle on unmount. */
+    unregisterHandle: (key: string) => void;
+}
+export declare const CanvasContext: import('react').Context<CanvasContextValue | null>;
+export declare function useCanvasContext(): CanvasContextValue;
+export interface CardContextValue {
+    /** The id passed to <GraphCard id="…"> */
+    cardId: string;
+}
+export declare const CardContext: import('react').Context<CardContextValue | null>;
+export declare function useCardContext(): CardContextValue;

package/dist/components/Graph/index.d.ts

@@ -0,0 +1,10 @@
+export { GraphCanvas } from './GraphCanvas';
+export { GraphCard } from './GraphCard';
+export { GraphRow } from './GraphRow';
+export { GraphHandle } from './GraphHandle';
+export { GraphEdge } from './GraphEdge';
+export type { GraphCanvasProps } from './GraphCanvas';
+export type { GraphCardProps } from './GraphCard';
+export type { GraphRowProps } from './GraphRow';
+export type { GraphHandleProps, HandleSide } from './GraphHandle';
+export type { GraphEdgeProps, EdgeEndpoint } from './GraphEdge';

package/dist/components/JsonGraph/DeviceProfileReport.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react';
+/**
+ * Real-world graph built from the fictional NexusGuard device-profile report.
+ *
+ * Card positions are computed by `treeLayout` — no manual coordinate maths here.
+ * Each `rowCount` is: 1 title + number of field rows + number of object rows.
+ */
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const DeviceProfileReport: Story;

package/dist/components/JsonGraph/JsonCardTitle.d.ts

@@ -0,0 +1,12 @@
+import { default as React, CSSProperties } from 'react';
+export interface JsonCardTitleProps {
+    children: React.ReactNode;
+    style?: CSSProperties;
+}
+/**
+ * Semi-bold card heading. Theme defaults, fully overrideable via `style`.
+ *
+ * Sets `position: relative` so a `JsonInputHandle` placed inside it can
+ * anchor itself to the title row's left edge rather than the card's midpoint.
+ */
+export declare function JsonCardTitle({ children, style }: JsonCardTitleProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/JsonGraph/JsonFieldRow.d.ts

@@ -0,0 +1,15 @@
+import { CSSProperties } from 'react';
+export interface JsonFieldRowProps {
+    /** The field key — rendered in `foreground.default`. */
+    label: string;
+    /** The field value — rendered in `foreground.muted`. */
+    value: string;
+    style?: CSSProperties;
+}
+/**
+ * A key + value pair row.
+ *
+ * Key is in `foreground.default`, value in `foreground.muted`.
+ * 8px gap separates key from value.
+ */
+export declare function JsonFieldRow({ label, value, style }: JsonFieldRowProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/JsonGraph/JsonGraph.stories.d.ts

@@ -0,0 +1,19 @@
+import { Meta, StoryObj } from '@storybook/react';
+/**
+ * JsonGraph — JSON-specific content layer on top of the generic Graph primitives.
+ *
+ * `GraphCard` provides the canvas positioning, themed shell (border, shadow,
+ * padding, gap). The Json* components define *what goes inside*:
+ *
+ * - `JsonCardTitle`  — card heading
+ * - `JsonFieldRow`   — primitive key + value pair
+ * - `JsonObjectRow`  — nested-object link row with inset background and a handle slot
+ *
+ * Consumers compose these freely inside any `GraphCard`. Themes are inherited
+ * from the nearest `ThemeProvider`.
+ */
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const TwoCards: Story;
+export declare const ThreeCards: Story;

package/dist/components/JsonGraph/JsonInputHandle.d.ts

@@ -0,0 +1,30 @@
+export interface JsonInputHandleProps {
+    /** Handle id — must be unique within the card. Edge references: "cardId:handleId". */
+    id: string;
+    /** Inner dot fill colour. Defaults to the theme's blue accent. */
+    color?: string;
+}
+/**
+ * An input handle pre-positioned for use inside `<JsonCardTitle>`.
+ *
+ * Place it as the **first child** of `<JsonCardTitle>` and it will sit on
+ * the card's left outer edge, vertically centred with the title text:
+ *
+ * ```tsx
+ * <GraphCard id="email" x={x} y={y}>
+ *   <JsonCardTitle>
+ *     <JsonInputHandle id="in" />
+ *     Email Details
+ *   </JsonCardTitle>
+ *   <JsonFieldRow label="email" value="user@example.com" />
+ * </GraphCard>
+ * ```
+ *
+ * ### Why the negative left offset?
+ * `JsonCardTitle` is inside `GraphCard` which has `padding: space[3]` (12px).
+ * An absolutely-positioned element at `left: 0` inside `JsonCardTitle` would
+ * sit 12px in from the card's outer edge. The `calc(-1 * space[3])` offset
+ * cancels the card padding so the handle protrudes from the card's true left
+ * border — consistent with handles on `GraphRow` object rows.
+ */
+export declare function JsonInputHandle({ id, color }: JsonInputHandleProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/JsonGraph/JsonObjectRow.d.ts

@@ -0,0 +1,22 @@
+import { default as React, CSSProperties } from 'react';
+export interface JsonObjectRowProps {
+    /**
+     * The field key that links to a nested object or array card.
+     * Rendered as plain text — the row's inset background signals it's a link.
+     */
+    label: string;
+    /**
+     * Slot for a `<GraphHandle side="right" />`.
+     * The row reserves right-padding automatically so the dot doesn't overlap text.
+     */
+    children?: React.ReactNode;
+    style?: CSSProperties;
+}
+/**
+ * A row that represents a link to a nested object or array card.
+ *
+ * Uses `base.gray[0]` (canvas/inset) background to visually distinguish
+ * nested-object rows from plain key-value rows. Place a `<GraphHandle>`
+ * as children to attach an edge to the target card.
+ */
+export declare function JsonObjectRow({ label, children, style }: JsonObjectRowProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/JsonGraph/index.d.ts

@@ -0,0 +1,8 @@
+export { JsonCardTitle } from './JsonCardTitle';
+export { JsonFieldRow } from './JsonFieldRow';
+export { JsonObjectRow } from './JsonObjectRow';
+export { JsonInputHandle } from './JsonInputHandle';
+export type { JsonCardTitleProps } from './JsonCardTitle';
+export type { JsonFieldRowProps } from './JsonFieldRow';
+export type { JsonObjectRowProps } from './JsonObjectRow';
+export type { JsonInputHandleProps } from './JsonInputHandle';

package/dist/components/JsonGraph/treeLayout.d.ts

@@ -0,0 +1,114 @@
+/**
+ * Pure tree-layout utilities — no React, no DOM.
+ *
+ * Two layout strategies, both placing cards left-to-right without overlaps:
+ *
+ *  `treeLayout`           — centres each parent over its children group.
+ *                           Good for balanced/symmetric trees.
+ *
+ *  `topAnchoredLayout`    — anchors each child's y to the top edge of the
+ *                           object-row handle that connects to it in the parent.
+ *                           Edges always flow left → down-right (never upward).
+ *                           Good for JSON objects where reading order matters.
+ *
+ * Card height formula (shared):
+ *   height = cardPadding + rowCount × rowHeight + (rowCount − 1) × rowGap
+ */
+export interface LayoutOptions {
+    /** Horizontal distance between column left-edges. Default: 420 */
+    columnWidth?: number;
+    /** Vertical gap between sibling cards in the same column. Default: 24 */
+    siblingGap?: number;
+    /** Card top + bottom padding combined (= GraphCard `padding × 2`). Default: 24 */
+    cardPadding?: number;
+    /** Approximate height of one row in pixels. Default: 29 */
+    rowHeight?: number;
+    /** Gap between rows inside a card (= GraphCard `gap`). Default: 4 */
+    rowGap?: number;
+}
+export interface CardPosition {
+    x: number;
+    y: number;
+}
+export interface LayoutNode {
+    id: string;
+    /**
+     * Total rows in this card — title + field rows + object rows.
+     * All row types are treated as the same height for layout purposes.
+     */
+    rowCount: number;
+    /** IDs of child cards, top-to-bottom order. */
+    children?: string[];
+}
+export interface AnchoredChild {
+    id: string;
+    /**
+     * 0-based index of the object-row in the parent card that connects to this
+     * child. Count from the top: title = 0, first row = 1, etc.
+     *
+     * The child card is placed so its top-left corner aligns with (or is below)
+     * the top edge of this row, creating a left→down-right edge flow.
+     */
+    handleRowIndex: number;
+}
+export interface AnchoredLayoutNode {
+    id: string;
+    /** Total rows in this card — title + field rows + object rows. */
+    rowCount: number;
+    children?: AnchoredChild[];
+}
+/**
+ * Computes non-overlapping canvas positions for a tree of cards.
+ *
+ * @param nodes   All nodes in the tree (any order).
+ * @param rootId  ID of the root node to start layout from.
+ * @param options Visual tuning — defaults match GraphCard / JsonFieldRow tokens.
+ * @returns       `Map<id, { x, y }>` — canvas-space positions ready to pass
+ *                as `x` / `y` props to `<GraphCard>`.
+ *
+ * @example
+ * ```ts
+ * const pos = treeLayout([
+ *   { id: "root", rowCount: 8, children: ["data", "key"] },
+ *   { id: "data", rowCount: 13, children: ["battery", "ng"] },
+ *   { id: "key",  rowCount: 9 },
+ *   { id: "battery", rowCount: 3 },
+ *   { id: "ng",      rowCount: 8 },
+ * ], "root");
+ *
+ * const at = (id: string) => pos.get(id)!;
+ * // <GraphCard id="root" x={at("root").x} y={at("root").y}>
+ * ```
+ */
+export declare function treeLayout(nodes: LayoutNode[], rootId: string, options?: LayoutOptions): Map<string, CardPosition>;
+/**
+ * Computes canvas positions for a tree where each child is anchored to the
+ * top edge of the parent object-row that connects to it.
+ *
+ * This means edges always flow left → down-right: the bezier leaves the
+ * parent handle at row N and arrives at the child card which starts at or
+ * below that same y. Reading order (top-to-bottom) is preserved.
+ *
+ * A per-column `nextY` cursor prevents cards in the same column from
+ * overlapping when a previous subtree pushes them further down.
+ *
+ * @param nodes   All nodes in the tree.
+ * @param rootId  ID of the root node.
+ * @param options Visual tuning — same defaults as `treeLayout`.
+ *
+ * @example
+ * ```ts
+ * const pos = topAnchoredLayout([
+ *   { id: "root", rowCount: 8, children: [
+ *       { id: "data", handleRowIndex: 6 },   // 6th row in root card
+ *       { id: "key",  handleRowIndex: 7 },
+ *   ]},
+ *   { id: "data", rowCount: 13, children: [
+ *       { id: "battery", handleRowIndex: 10 },
+ *   ]},
+ *   { id: "key",     rowCount: 9 },
+ *   { id: "battery", rowCount: 3 },
+ * ], "root");
+ * ```
+ */
+export declare function topAnchoredLayout(nodes: AnchoredLayoutNode[], rootId: string, options?: LayoutOptions): Map<string, CardPosition>;

package/dist/components/JsonViewer/JsonViewer.d.ts

@@ -0,0 +1,15 @@
+import { CubeTheme } from '../../theme/types';
+export type JsonViewerMode = "table" | "code";
+export interface JsonViewerProps {
+    /** The JSON data to display */
+    data: unknown;
+    /** Which view to start in (defaults to "code") */
+    defaultMode?: JsonViewerMode;
+    /** Override any theme tokens for this instance */
+    theme?: CubeTheme;
+}
+/**
+ * Top-level component that toggles between CodeSnippet and DataGrid views.
+ * Toggle UI and wiring TBD — requirements coming soon.
+ */
+export declare function JsonViewer({ data, defaultMode }: JsonViewerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/JsonViewer/index.d.ts

@@ -0,0 +1,2 @@
+export { JsonViewer } from './JsonViewer';
+export type { JsonViewerProps, JsonViewerMode } from './JsonViewer';

package/dist/components/core/ActionMenu/ActionMenu.d.ts

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+import { PopoverElevation, PopoverPlacement } from '../Popover';
+import { CubeTheme } from '../../../theme/types';
+export interface ActionMenuProps {
+    /** Anchor control — `Button`, `IconButton`, etc. */
+    trigger: React.ReactElement;
+    /** Menu rows and optional `ActionMenuList.*` regions. */
+    children: React.ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    placement?: PopoverPlacement;
+    elevation?: PopoverElevation;
+    /** Close after a menu item is activated. @default true */
+    closeOnSelect?: boolean;
+    /** Accessible name when the menu has no visible title. */
+    "aria-label"?: string;
+    /** id of an element that labels the menu. */
+    "aria-labelledby"?: string;
+    theme?: CubeTheme;
+    className?: string;
+    listClassName?: string;
+}
+/**
+ * Composed dropdown menu — Figma `ActionMenu`.
+ *
+ * Wires trigger + `Popover` + `ActionMenuList` with menu keyboard support.
+ */
+export declare function ActionMenu({ trigger, children, open: openProp, onOpenChange, placement, elevation, closeOnSelect, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, theme, className, listClassName, }: ActionMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/core/ActionMenu/ActionMenu.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ActionMenu } from './ActionMenu';
+declare const meta: Meta<typeof ActionMenu>;
+export default meta;
+type Story = StoryObj<typeof ActionMenu>;
+export declare const Default: Story;
+export declare const Controlled: Story;
+export declare const WithSections: Story;
+export declare const WithHeaderAndFooter: Story;
+export declare const ListOnly: Story;

package/dist/components/core/ActionMenu/ActionMenuItem.d.ts

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+import { CubeTheme } from '../../../theme/types';
+export interface ActionMenuItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+    children: React.ReactNode;
+    subtext?: React.ReactNode;
+    subtextIcon?: React.ReactNode;
+    /** Marks the current selection — shows trailing checkmark by default. */
+    selected?: boolean;
+    /** @default true when `selected` */
+    showSelectionCheck?: boolean;
+    leadingIcon?: React.ReactNode;
+    /** Icon-only row — hides the label; use `aria-label` or string `children` for the accessible name. */
+    iconOnly?: boolean;
+    /** Renders a trailing chevron for submenu affordance. */
+    hasSubmenu?: boolean;
+    trailingIcon?: React.ReactNode;
+    /** Keep the menu open after this item is activated (filter / multi-step menus). */
+    keepOpenOnSelect?: boolean;
+    theme?: CubeTheme;
+}
+/** Single row in an `ActionMenuList` — maps to Figma `ActionMenuItem`. */
+export declare function ActionMenuItem({ children, subtext, subtextIcon, selected, showSelectionCheck, leadingIcon, iconOnly, hasSubmenu, trailingIcon, keepOpenOnSelect, theme, className, disabled, type, "aria-label": ariaLabel, ...rest }: ActionMenuItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/core/ActionMenu/ActionMenuList.d.ts

@@ -0,0 +1,32 @@
+import { default as React } from 'react';
+import { CubeTheme } from '../../../theme/types';
+export interface ActionMenuListProps {
+    children: React.ReactNode;
+    /** Accessible name when the menu has no visible title. */
+    "aria-label"?: string;
+    /** id of an element that labels the menu. */
+    "aria-labelledby"?: string;
+    theme?: CubeTheme;
+    className?: string;
+    style?: React.CSSProperties;
+    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+}
+export interface ActionMenuListRegionProps {
+    children?: React.ReactNode;
+    theme?: CubeTheme;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface ActionMenuListSectionProps extends ActionMenuListRegionProps {
+    label: React.ReactNode;
+}
+declare function ActionMenuListHeader({ children, theme, className, style, }: ActionMenuListRegionProps): import("react/jsx-runtime").JSX.Element;
+declare function ActionMenuListFooter({ children, theme, className, style, }: ActionMenuListRegionProps): import("react/jsx-runtime").JSX.Element;
+declare function ActionMenuListSection({ label, children, theme, className, style, }: ActionMenuListSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare const ActionMenuList: React.ForwardRefExoticComponent<ActionMenuListProps & React.RefAttributes<HTMLDivElement>> & {
+    Header: typeof ActionMenuListHeader;
+    Footer: typeof ActionMenuListFooter;
+    Section: typeof ActionMenuListSection;
+};
+export {};

package/dist/components/core/ActionMenu/actionMenuCssVars.d.ts

@@ -0,0 +1,2 @@
+import { ThemeTokens } from '../../../theme/types';
+export declare function actionMenuCssVars(tokens: ThemeTokens): Record<string, string>;

package/dist/components/core/ActionMenu/actionMenuKeyboard.d.ts

@@ -0,0 +1,4 @@
+import { KeyboardEvent } from 'react';
+export declare function getEnabledMenuItems(container: HTMLElement | null): HTMLButtonElement[];
+export declare function focusInitialMenuItem(container: HTMLElement | null): void;
+export declare function handleMenuListKeyDown(event: KeyboardEvent<HTMLElement>, container: HTMLElement | null): void;

package/dist/components/core/ActionMenu/index.d.ts

@@ -0,0 +1,6 @@
+export { ActionMenu } from './ActionMenu';
+export type { ActionMenuProps } from './ActionMenu';
+export { ActionMenuItem } from './ActionMenuItem';
+export type { ActionMenuItemProps } from './ActionMenuItem';
+export { ActionMenuList } from './ActionMenuList';
+export type { ActionMenuListProps, ActionMenuListRegionProps, ActionMenuListSectionProps, } from './ActionMenuList';

package/dist/components/core/Breadcrumb/BreadcrumbLink.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { CubeTheme } from '../../../theme/types';
+export type BreadcrumbLinkState = "rest" | "hover" | "active";
+export interface BreadcrumbLinkProps {
+    href?: string;
+    /** Current page — renders as non-interactive text (maps to Figma `active`). */
+    current?: boolean;
+    theme?: CubeTheme;
+    className?: string;
+    children: React.ReactNode;
+}
+export declare function BreadcrumbLink({ href, current, theme, className, children, ...rest }: BreadcrumbLinkProps & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "children">): import("react/jsx-runtime").JSX.Element;

package/dist/components/core/Breadcrumb/Breadcrumbs.d.ts

@@ -0,0 +1,13 @@
+import { CubeTheme } from '../../../theme/types';
+export interface BreadcrumbItem {
+    label: string;
+    href?: string;
+}
+export interface BreadcrumbsProps {
+    items: BreadcrumbItem[];
+    /** Accessible label for the navigation landmark. */
+    "aria-label"?: string;
+    theme?: CubeTheme;
+    className?: string;
+}
+export declare function Breadcrumbs({ items, "aria-label": ariaLabel, theme, className, }: BreadcrumbsProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/core/Breadcrumb/Breadcrumbs.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Breadcrumbs } from './Breadcrumbs';
+declare const meta: Meta<typeof Breadcrumbs>;
+export default meta;
+type Story = StoryObj<typeof Breadcrumbs>;
+export declare const Playground: Story;

package/dist/components/core/Breadcrumb/index.d.ts

@@ -0,0 +1,4 @@
+export { BreadcrumbLink } from './BreadcrumbLink';
+export type { BreadcrumbLinkProps, BreadcrumbLinkState } from './BreadcrumbLink';
+export { Breadcrumbs } from './Breadcrumbs';
+export type { BreadcrumbsProps, BreadcrumbItem } from './Breadcrumbs';

package/dist/components/core/Button/Button.d.ts

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+import { CubeTheme } from '../../../theme/types';
+export type ButtonSize = "xs" | "sm" | "md" | "lg";
+export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "rounded";
+/** `rounded` = pill radius; use with any `variant`, or use `variant="rounded"` for Figma neutral pill. */
+export type ButtonShape = "default" | "rounded";
+export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+    size?: ButtonSize;
+    variant?: ButtonVariant;
+    /** Pill / stadium shape (Figma control `style: rounded`) */
+    shape?: ButtonShape;
+    /** If true, the button fills the container width */
+    block?: boolean;
+    /** Icon placed before the label */
+    leadingIcon?: React.ReactNode;
+    /** Icon placed after the label */
+    trailingIcon?: React.ReactNode;
+    /** Override any theme tokens */
+    theme?: CubeTheme;
+    children?: React.ReactNode;
+}
+export declare function Button({ size, variant, shape, block, leadingIcon, trailingIcon, theme, children, disabled, style, ...rest }: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/core/Button/Button.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Button } from './Button';
+declare const meta: Meta<typeof Button>;
+export default meta;
+type Story = StoryObj<typeof Button>;
+export declare const Playground: Story;

package/dist/components/core/Button/index.d.ts

@@ -0,0 +1,2 @@
+export { Button } from './Button';
+export type { ButtonProps, ButtonShape, ButtonSize, ButtonVariant } from './Button';

package/dist/components/core/Icon/Icon.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { CubeTheme } from '../../../theme/types';
+export type IconSize = "xs" | "sm" | "md" | "lg";
+export interface IconProps {
+    /** SVG element — use `fill="currentColor"` (or stroke) so color inherits from context. */
+    children: React.ReactElement;
+    size?: IconSize;
+    /** When set, exposes `role="img"` + `aria-label`; otherwise the icon is decorative. */
+    label?: string;
+    theme?: CubeTheme;
+    className?: string;
+}
+export declare function Icon({ children, size, label, theme, className }: IconProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/core/Icon/Icon.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Icon } from './Icon';
+declare const meta: Meta<typeof Icon>;
+export default meta;
+type Story = StoryObj<typeof Icon>;
+export declare const Playground: Story;

package/dist/components/core/Icon/index.d.ts

@@ -0,0 +1,2 @@
+export { Icon } from './Icon';
+export type { IconProps, IconSize } from './Icon';

package/dist/components/core/IconButton/IconButton.d.ts

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+import { CubeTheme } from '../../../theme/types';
+import { default as themeOutput } from '../../../theme/output/theme.json';
+import { TooltipPlacement } from '../Tooltip';
+/** Keys of `color.iconButton` in tokens / `theme.json` — add a variant in JSON + matching CSS module class `IconButton--<name>`. */
+export type IconButtonVariant = keyof typeof themeOutput.iconButton;
+export type IconButtonSize = "xs" | "sm" | "md" | "lg";
+export interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+    /** Icon only — pass a single SVG or element using `currentColor` for fills. */
+    children: React.ReactNode;
+    /** Maps to `sizes.iconButton` (hit area, radius, icon glyph — no label padding). */
+    size?: IconButtonSize;
+    variant?: IconButtonVariant;
+    /** Selected / toggled visual state (sets `aria-pressed` when not `undefined`) */
+    selected?: boolean;
+    /**
+     * Optional tooltip label (hover + focus). The control still needs a concise **accessible name**
+     * via `aria-label` (or `aria-labelledby`); the tooltip is wired with `aria-describedby` when open.
+     * When both `disabled` and `tooltip` are set, the button stays focusable/hoverable and uses
+     * `aria-disabled` instead of the native `disabled` attribute so the tooltip can show.
+     */
+    tooltip?: React.ReactNode;
+    tooltipPlacement?: TooltipPlacement;
+    tooltipCompact?: boolean;
+    tooltipShowDelay?: number;
+    theme?: CubeTheme;
+}
+export declare function IconButton({ size, variant, selected, theme, children, disabled, style, type, className: userClassName, tooltip, tooltipPlacement, tooltipCompact, tooltipShowDelay, "aria-pressed": ariaPressedProp, onClick, onKeyDown, ...rest }: IconButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/core/IconButton/IconButton.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { IconButton } from './IconButton';
+declare const meta: Meta<typeof IconButton>;
+export default meta;
+type Story = StoryObj<typeof IconButton>;
+export declare const Playground: Story;

package/dist/components/core/IconButton/index.d.ts

@@ -0,0 +1,3 @@
+export { IconButton } from './IconButton';
+export type { IconButtonProps, IconButtonSize, IconButtonVariant } from './IconButton';
+export type { TooltipPlacement } from '../Tooltip';

package/dist/components/core/Link/Link.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+import { CubeTheme, LinkFunctionalColors } from '../../../theme/types';
+export type LinkVariant = keyof LinkFunctionalColors;
+export interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "children"> {
+    href: string;
+    /**
+     * `inline` — inside body copy; inherits font from parent.
+     * `standalone` — nav, footer, contact rows.
+     */
+    variant?: LinkVariant;
+    /** Opens in a new tab with `rel="noopener noreferrer"`. */
+    external?: boolean;
+    /** Show ↗ icon when `external` (default true). */
+    showExternalIcon?: boolean;
+    theme?: CubeTheme;
+    children: React.ReactNode;
+}
+export declare function Link({ href, variant, external, showExternalIcon, theme, children, className, target, rel, ...rest }: LinkProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/core/Link/Link.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Link } from './Link';
+declare const meta: Meta<typeof Link>;
+export default meta;
+type Story = StoryObj<typeof Link>;
+export declare const Playground: Story;

package/dist/components/core/Link/index.d.ts

@@ -0,0 +1,2 @@
+export { Link } from './Link';
+export type { LinkProps, LinkVariant } from './Link';