@exponential-at/ui-solid 0.0.0-stage → 0.1.0

package/dist/types/natives/media.d.ts

@@ -0,0 +1,14 @@
+import { type Component, type JSX } from "solid-js";
+import { type NativeProps } from "../node-view.js";
+/** Image (contract §3): `loading` lazy|eager, `focalX/focalY` (0..1 →
+ *  `object-position`), and the `fallback` icon (default
+ *  `builtinIcons["Image.fallback"]`) on error or without a src;
+ *  `data-state` = loading | loaded | error | empty. */
+export declare function ImageNative(props: NativeProps): JSX.Element;
+export declare function VideoNative(props: NativeProps): JSX.Element;
+export declare function AudioPlayerNative(props: NativeProps): JSX.Element;
+/** A stable hue for a seed (two avatars of one person always match). */
+export declare function seedHue(seed: string): number;
+export declare function AvatarNative(props: NativeProps): JSX.Element;
+export declare function CarouselNative(props: NativeProps): JSX.Element;
+export declare const NATIVES_MEDIA: Record<string, Component<NativeProps>>;

package/dist/types/natives/nav.d.ts

@@ -0,0 +1,14 @@
+import { type Component, type JSX } from "solid-js";
+import type { NativeProps } from "../node-view.js";
+export declare function TabsNative(props: NativeProps): JSX.Element;
+/** Segmented (round 3): ONE row of segments.
+ *  `segmented` (default, the pill track) / `toggles` (bare) / `outline`
+ *  (joined) = Radix's ToggleGroup DOM (radiogroup single, toolbar of
+ *  toggle buttons multiple; roving tab stop, arrows wrap, Home/End). `bar`
+ *  = the full-width bottom destinations: role navigation, each item a
+ *  column button (icon above a caption label), the selected one
+ *  `aria-current="page"`, the same roving keys. Parts: root, item, icon,
+ *  label (the selected state rides every part of the selected item). */
+export declare function SegmentedNative(props: NativeProps): JSX.Element;
+export declare function AccordionNative(props: NativeProps): JSX.Element;
+export declare const NATIVES_NAV: Record<string, Component<NativeProps>>;

package/dist/types/natives/overlays.d.ts

@@ -0,0 +1,19 @@
+import { type Component, type JSX } from "solid-js";
+import type { NativeProps } from "../node-view.js";
+export declare function DialogNative(props: NativeProps): JSX.Element;
+export declare function DrawerNative(props: NativeProps): JSX.Element;
+export declare function PopoverNative(props: NativeProps): JSX.Element;
+/** Tooltip: shows on hover AND keyboard focus (a11y.json), Escape hides. */
+export declare function TooltipNative(props: NativeProps): JSX.Element;
+/** Menu: `openOn: press` (default) = a dropdown menu, its ONE child the
+ *  trigger (no child = the default outline Button from label/icon, no
+ *  chevron), anchored bottom-start; `openOn: contextmenu` = a context menu
+ *  over the child (right-click / long-press / Shift+F10 / the Menu key),
+ *  opened at the pointer (the child's corner from the keyboard). */
+export declare function MenuNative(props: NativeProps): JSX.Element;
+/** Toast (contract §3): in the TOAST layer, newest nearest the edge, at most
+ *  3 visible (base CSS). The renderer runs `duration` (0 = sticky), PAUSED
+ *  while hovered or focused, then writes `open: false` and fires `dismiss`
+ *  + `change`. `error` is assertive, the rest polite; never takes focus. */
+export declare function ToastNative(props: NativeProps): JSX.Element;
+export declare const NATIVES_OVERLAYS: Record<string, Component<NativeProps>>;

package/dist/types/natives/owners.d.ts

@@ -0,0 +1,2 @@
+export declare const NATIVE_ORDER: readonly string[];
+export declare const OWNERS: Readonly<Record<string, readonly string[]>>;

package/dist/types/natives/pending.d.ts

@@ -0,0 +1,3 @@
+import type { JSX } from "solid-js";
+import type { NativeProps } from "../node-view.js";
+export declare function Pending(props: NativeProps): JSX.Element;

package/dist/types/natives/resizable.d.ts

@@ -0,0 +1,4 @@
+import { type Component, type JSX } from "solid-js";
+import type { NativeProps } from "../node-view.js";
+export declare function ResizableNative(props: NativeProps): JSX.Element;
+export declare const NATIVES_RESIZABLE: Record<string, Component<NativeProps>>;

package/dist/types/natives/search.d.ts

@@ -0,0 +1,45 @@
+import { type Component, type JSX } from "solid-js";
+import type { NativeProps } from "../node-view.js";
+import { type Attrs, type PartFn } from "./shared.js";
+export interface SearchItem {
+    label: string;
+    value: string;
+    icon?: string;
+    identifier?: string;
+    disabled?: boolean;
+}
+/** React's `SearchBodyProps` (live getters on Solid: never destructure). */
+export interface SearchBodyProps {
+    part: PartFn;
+    /** Whose body this is (a SearchList, or a Menu's searchable submenu). */
+    owner: `SearchList` | `Menu`;
+    /** `""` for a SearchList, `.<i>` for submenu `i` (the core's suffix). */
+    suffix: string;
+    /** The rows ALREADY filtered, each with its index in the full list. */
+    rows: {
+        index: number;
+        item: SearchItem;
+    }[];
+    query: string;
+    onQuery: (query: string) => void;
+    placeholder: string;
+    emptyText: string;
+    maxRows: number;
+    showCount: boolean;
+    picked?: string;
+    onPick: (item: SearchItem) => void;
+    autoFocus?: boolean;
+    /** ← with the caret at the start leaves the field's key to the menu (a
+     *  searchable submenu closes back to its row). */
+    leaveBubbles?: boolean;
+    /** The rows' recipe part (`item`) and the row id prefix. */
+    rowPart?: (item: SearchItem, index: number, active: boolean) => Attrs;
+    renderRow?: (item: SearchItem, index: number) => JSX.Element;
+}
+export declare function SearchBody(props: SearchBodyProps): JSX.Element;
+/** SearchList: the field filters the rows locally (label or identifier)
+ *  unless the host searches itself (`on.search`, its rows arrive through
+ *  the bound `items`); `search {query}` fires 150 ms after the last
+ *  keystroke; a pick writes the bound `value` and fires `select {value}`. */
+export declare function SearchListNative(props: NativeProps): JSX.Element;
+export declare const NATIVES_SEARCH: Record<string, Component<NativeProps>>;

package/dist/types/natives/select.d.ts

@@ -0,0 +1,10 @@
+import { type JSX } from "solid-js";
+import type { NativeProps } from "../node-view.js";
+export interface SelectOption {
+    label: string;
+    value: string;
+    icon?: string;
+    disabled?: boolean;
+}
+export declare function SelectNative(props: NativeProps): JSX.Element;
+export declare const NATIVES_SELECT: Record<string, (props: NativeProps) => JSX.Element>;

package/dist/types/natives/shared.d.ts

@@ -0,0 +1,50 @@
+import { type JSX } from "solid-js";
+import { arr, bool, builtinIconName, failingCheck, failingChecks, formatFileSize, num, objects, phrase, str } from "@exponential-at/ui/web";
+import type { UiNode } from "@exponential-at/ui";
+export type Attrs = Record<string, unknown>;
+export { str, num, bool, arr, objects, phrase, formatFileSize, failingChecks, failingCheck, builtinIconName };
+export { css, px } from "../style.js";
+export type { StyleInput, SolidStyle } from "../style.js";
+type State = string | false | undefined | null;
+export type PartFn = ((name: string, ...states: State[]) => Attrs) & {
+    /** The same with part-level recipe props (`{kind: "keyword"}`). */
+    with: (name: string, extra: Record<string, unknown>, ...states: State[]) => Attrs;
+    /** A PER-ITEM placed part: `data-xui-id="<id>.<part>.<item>"`. */
+    at: (name: string, item: string | number, ...states: State[]) => Attrs;
+    /** `at` with part-level recipe props. */
+    atWith: (name: string, item: string | number, extra: Record<string, unknown>, ...states: State[]) => Attrs;
+    /** The painted id of the node (`<id><instance suffix>`), live. */
+    readonly domId: string;
+};
+/** React's `useParts(node, props)` on Solid: `parts(props)` takes the
+ *  painter's props object (`{node, props}` live getters) and returns
+ *  `part(name, …states)` → the attribute bag of one part element, keys in
+ *  React's order: `class` (`<scope> xui-<Component>-<part>`),
+ *  `data-xui-part` (`<Component>/<part>`), `data-xui-id` (placed parts
+ *  only), the native recipe props (`data-r-*`), the part's own extras,
+ *  `data-xs`. Call `part(…)` INSIDE JSX (or a memo) so it follows the
+ *  node, its props, the theme scope and the forced states. */
+export declare function parts(source: {
+    readonly node: UiNode;
+    readonly props: Record<string, unknown>;
+}): PartFn;
+/** React's name, for a literal port. */
+export declare const useParts: (node: UiNode, props: Record<string, unknown>) => PartFn;
+/** A text part (React's `TextPart`): nothing when the text displays empty. */
+export declare function TextPart(props: {
+    part: Attrs;
+    text: unknown;
+    as?: `span` | `label` | `div` | `p`;
+    id?: string;
+    htmlFor?: string;
+}): JSX.Element;
+export declare function Hidden(props: {
+    children: JSX.Element;
+}): JSX.Element;
+/** The glyph of an owned part (`CodeBlock.copy`, `Table.sortIcon.asc`),
+ *  through the host's registry first, then the renderer's fallbacks. */
+export declare function BuiltinIcon(props: {
+    slot: string;
+    class?: string;
+    size?: number;
+}): JSX.Element;

package/dist/types/natives/table.d.ts

@@ -0,0 +1,7 @@
+import { type Component, type JSX } from "solid-js";
+import { sortRows, type TableColumn } from "@exponential-at/ui/web";
+import { type NativeProps } from "../node-view.js";
+export { sortRows };
+export type { TableColumn };
+export declare function TableNative(props: NativeProps): JSX.Element;
+export declare const NATIVES_TABLE: Record<string, Component<NativeProps>>;

package/dist/types/natives/text.d.ts

@@ -0,0 +1,5 @@
+import type { JSX } from "solid-js";
+import { type NativeProps } from "../node-view.js";
+export declare function TextNative(props: NativeProps): JSX.Element;
+export declare function MarkdownNative(props: NativeProps): JSX.Element;
+export declare function IconNative(props: NativeProps): JSX.Element;

package/dist/types/node-view.d.ts

@@ -0,0 +1,83 @@
+import { type Accessor, type JSX } from "solid-js";
+import type { UiNode } from "@exponential-at/ui";
+import { type SurfaceContextValue } from "./context.js";
+import type { ExtensionComponentProps } from "./host.js";
+import { type SolidStyle, type StyleInput } from "./style.js";
+/** What a painter receives: React's `NativeProps` as a Solid props object.
+ *  EVERY field is a live getter: never destructure it (`props.props.label`
+ *  inside JSX or a memo follows the data), read `children` and each slot
+ *  ONCE. */
+export interface NativeProps extends ExtensionComponentProps {
+    /** The data scope (template item) this node renders under. */
+    readonly scope: string;
+    /** The node's id as painted (`data-xui-id`): its id + the template
+     *  instance suffix. DOM ids derive from it (`<id>.error`). */
+    readonly domId: string;
+}
+/** The id a node's style rules are keyed by. */
+export declare function styleIdOf(node: UiNode): string;
+/** The attributes every painted root carries (React's `useRootProps`):
+ *  `class` (`xui-el xui-n-<id> <scope> xui-<Component>-root [macro part]`),
+ *  `data-xui-id`, `data-xui-c`, `data-xui-part`, the recipe props
+ *  (`data-m-*` macro / `data-r-*` native), `data-xs`, the resolved
+ *  accessibility, `style` (Solid form), `dir`. A live accessor. */
+export declare function createRootProps(node: Accessor<UiNode>, props: Accessor<Record<string, unknown>>, domId?: Accessor<string>, recipeProps?: Accessor<Record<string, unknown> | undefined>, style?: Accessor<SolidStyle | undefined>): Accessor<Record<string, unknown>>;
+/** `class` on top of the renderer's own. */
+export declare function withClass(rootProps: Record<string, unknown>, ...extra: (string | false | undefined | null)[]): Record<string, unknown>;
+/** A painter's own inline style (React form: camelCase, numbers = px)
+ *  merged over the root's (the dynamic style variables live there and must
+ *  survive), in Solid's form. */
+export declare function mergeStyle(rootProps: Record<string, unknown>, style: StyleInput | undefined): SolidStyle | undefined;
+/** Forced states on a part element (`data-xs`). */
+export declare function forced(states: readonly string[], ...extra: (string | false | undefined)[]): string | undefined;
+/** Run one of a node's actions (round-1 contract §1 `runAction`), exactly
+ *  React's `runNodeAction`. */
+export declare function runNodeAction(ctx: SurfaceContextValue, node: UiNode, domId: string, scope: string, event: string, payload?: Record<string, unknown>, own?: Record<string, unknown>): Promise<void> | void;
+/** React's `useEmitter`: the node's emitter (reads the node, scope and id
+ *  at call time). */
+export declare function createEmitter(node: Accessor<UiNode>, scope: Accessor<string>, domId?: Accessor<string>): (event: string, payload?: Record<string, unknown>, own?: Record<string, unknown>) => Promise<void> | void;
+/** A node's own style `direction` (round 2 §2), matching `@media` blocks
+ *  included. */
+export declare function ownDirection(node: UiNode, ctx?: Pick<SurfaceContextValue, `theme` | `xq`>): `ltr` | `rtl` | undefined;
+/** A node, or nothing when its `visible` resolves falsy. `props.node` is
+ *  followed live (a re-reduce re-binds in place). */
+export declare function NodeView(props: {
+    node: UiNode;
+}): JSX.Element;
+/** Nodes painted in order, KEYED BY ID: a re-reduce hands new node objects
+ *  for the same ids and each keeps its painted subtree. */
+export declare function NodeList(props: {
+    nodes: readonly UiNode[];
+}): JSX.Element;
+/** The latest non-empty value of `fn` (what a `<Show>` child reads instead
+ *  of Show's accessor: a child disposed after its condition went falsy
+ *  never reads a stale accessor). */
+export declare function latest<T>(fn: () => T | null | undefined | false): Accessor<T>;
+export interface TemplateItem {
+    /** The item's instance key: the `template.key` value; the index when the
+     *  template has no key; `#<index>` when missing / empty / a duplicate. */
+    key: string;
+    /** The item's data pointer (its scope). */
+    path: string;
+    index: number;
+}
+/** The items of a node's data template (React's `templateItems`). Reads
+ *  the surface's getters: call it inside a memo. */
+export declare function templateItems(ctx: SurfaceContextValue, node: UiNode, scope: string): {
+    items: TemplateItem[];
+    tpl: UiNode;
+} | null;
+/** A template item's instance suffix: the enclosing one + `.<key>`, the
+ *  key escaped (`instanceSegment`). */
+export declare const itemInstance: (instance: string, key: string) => string;
+/** One template item: its scope + instance suffix around the node (both
+ *  followed live: a moved item keeps its subtree and re-scopes). */
+export declare function TemplateItemView(props: {
+    tpl: UiNode;
+    item: TemplateItem;
+}): JSX.Element;
+/** The template items of a list, keyed by `template.key`. */
+export declare function TemplateItems(props: {
+    items: readonly TemplateItem[];
+    tpl: UiNode;
+}): JSX.Element;

package/dist/types/platform.d.ts

@@ -0,0 +1,12 @@
+import { type Accessor } from "solid-js";
+/** `matchMedia(query).matches`, live; `fallback` without `matchMedia`
+ *  (SSR, jsdom). */
+export declare function createMediaQuery(query: string, fallback?: boolean): Accessor<boolean>;
+export interface BoxSize {
+    width: number;
+    height: number;
+    /** False until the first measurement. */
+    measured: boolean;
+}
+/** An element's border box, live (ResizeObserver, disconnected on cleanup). */
+export declare function createElementSize(el: Accessor<HTMLElement | null | undefined>, initialWidth?: number): Accessor<BoxSize>;

package/dist/types/primitives/alert-dialog.d.ts

@@ -0,0 +1,24 @@
+import { type ComponentProps, type JSX } from "solid-js";
+import { type AsProps, type DialogContentPartProps, type DialogRootProps } from "../behaviors/dialog.js";
+declare function AlertDialog(props: Omit<DialogRootProps, `modal`>): JSX.Element;
+declare function AlertDialogTrigger(props: AsProps): JSX.Element;
+declare function AlertDialogPortal(props: {
+    container?: HTMLElement | null;
+    children?: JSX.Element;
+}): JSX.Element;
+declare function AlertDialogOverlay(props: ComponentProps<`div`> & Record<string, unknown>): JSX.Element;
+declare function AlertDialogContent(props: DialogContentPartProps & {
+    class?: string;
+    container?: HTMLElement | null;
+}): JSX.Element;
+declare function AlertDialogHeader(props: ComponentProps<`div`>): JSX.Element;
+declare function AlertDialogFooter(props: ComponentProps<`div`>): JSX.Element;
+declare function AlertDialogTitle(props: ComponentProps<`h2`>): JSX.Element;
+declare function AlertDialogDescription(props: ComponentProps<`p`>): JSX.Element;
+declare function AlertDialogAction(props: AsProps & {
+    class?: string;
+}): JSX.Element;
+declare function AlertDialogCancel(props: AsProps & {
+    class?: string;
+}): JSX.Element;
+export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel };

package/dist/types/primitives/alert.d.ts

@@ -0,0 +1,6 @@
+import { type ComponentProps } from "solid-js";
+import { alertVariants, type AlertVariantProps } from "@exponential-at/ui/web/primitives";
+declare function Alert(props: ComponentProps<`div`> & AlertVariantProps): import("solid-js").JSX.Element;
+declare function AlertTitle(props: ComponentProps<`div`>): import("solid-js").JSX.Element;
+declare function AlertDescription(props: ComponentProps<`div`>): import("solid-js").JSX.Element;
+export { Alert, AlertTitle, AlertDescription, alertVariants };

package/dist/types/primitives/avatar-color.d.ts

@@ -0,0 +1 @@
+export { AVATAR_HUE_COUNT, avatarHueIndex } from "@exponential-at/ui/web/primitives";

package/dist/types/primitives/avatar.d.ts

@@ -0,0 +1,12 @@
+import { type ComponentProps, type JSX } from "solid-js";
+import { type LoadingStatus } from "../behaviors/index.js";
+declare function Avatar(props: ComponentProps<`span`>): JSX.Element;
+declare function AvatarImage(props: ComponentProps<`img`> & {
+    onLoadingStatusChange?: (status: LoadingStatus) => void;
+}): JSX.Element;
+declare function AvatarFallback(props: Omit<ComponentProps<`span`>, `style`> & {
+    userId?: string | null;
+    delayMs?: number;
+    style?: JSX.CSSProperties;
+}): JSX.Element;
+export { Avatar, AvatarImage, AvatarFallback };

package/dist/types/primitives/badge.d.ts

@@ -0,0 +1,8 @@
+import { type ComponentProps } from "solid-js";
+import { type BadgeTone } from "@exponential-at/ui/web/primitives";
+export declare function Badge(props: Omit<ComponentProps<`span`>, `children`> & {
+    count: number;
+    /** Past this the badge reads `${max}+`. */
+    max?: number;
+    tone?: BadgeTone;
+}): import("solid-js").JSX.Element;

package/dist/types/primitives/breadcrumb.d.ts

@@ -0,0 +1,12 @@
+import { type ComponentProps, type ValidComponent } from "solid-js";
+declare function Breadcrumb(props: ComponentProps<`nav`>): import("solid-js").JSX.Element;
+declare function BreadcrumbList(props: ComponentProps<`ol`>): import("solid-js").JSX.Element;
+declare function BreadcrumbItem(props: ComponentProps<`li`>): import("solid-js").JSX.Element;
+/** React's `asChild` is `as` (a tag or a component). */
+declare function BreadcrumbLink(props: ComponentProps<`a`> & {
+    as?: ValidComponent;
+}): import("solid-js").JSX.Element;
+declare function BreadcrumbPage(props: ComponentProps<`span`>): import("solid-js").JSX.Element;
+declare function BreadcrumbSeparator(props: ComponentProps<`li`>): import("solid-js").JSX.Element;
+declare function BreadcrumbEllipsis(props: ComponentProps<`span`>): import("solid-js").JSX.Element;
+export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis };

package/dist/types/primitives/button.d.ts

@@ -0,0 +1,12 @@
+import { type ComponentProps, type ValidComponent } from "solid-js";
+import { buttonVariants, type ButtonVariantProps } from "@exponential-at/ui/web/primitives";
+export type ButtonProps = ComponentProps<`button`> & ButtonVariantProps & {
+    /** React's `asChild`: the element (a tag or a component) the button
+     *  paints as, wearing exactly what Radix's Slot merges onto the child. */
+    as?: ValidComponent;
+    href?: string;
+    target?: string;
+    rel?: string;
+};
+declare function Button(props: ButtonProps): import("solid-js").JSX.Element;
+export { Button, buttonVariants };

package/dist/types/primitives/calendar.d.ts

@@ -0,0 +1,188 @@
+import { type Component, type JSX } from "solid-js";
+import { type ButtonVariantProps } from "@exponential-at/ui/web/primitives";
+type WeekDay = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+/** A date-fns `Locale` (structurally): its `code` and week options. */
+export interface CalendarLocale {
+    code?: string;
+    options?: {
+        weekStartsOn?: WeekDay;
+        firstWeekContainsDate?: number;
+    };
+    /** DayPicker's per-locale labels (react-day-picker's locales carry them). */
+    labels?: Partial<Record<keyof CalendarLabels, string | ((...args: never[]) => string)>>;
+}
+/** DayPicker's `CalendarDay`: a date shown in a display month. */
+export declare class CalendarDay {
+    readonly date: Date;
+    readonly displayMonth: Date;
+    readonly outside: boolean;
+    readonly isoDate: string;
+    readonly displayMonthId: string;
+    readonly dateMonthId: string;
+    constructor(date: Date, displayMonth: Date);
+    isEqualTo(day: CalendarDay): boolean;
+}
+export interface CalendarWeek {
+    weekNumber: number;
+    days: CalendarDay[];
+}
+export interface CalendarMonth {
+    date: Date;
+    weeks: CalendarWeek[];
+}
+export interface DateRange {
+    from: Date | undefined;
+    to?: Date | undefined;
+}
+export interface DateBefore {
+    before: Date;
+}
+export interface DateAfter {
+    after: Date;
+}
+export interface DateInterval {
+    before: Date;
+    after: Date;
+}
+export interface DayOfWeek {
+    dayOfWeek: number | number[];
+}
+/** DayPicker's `Matcher`. */
+export type Matcher = boolean | ((date: Date) => boolean) | Date | Date[] | DateRange | DateBefore | DateAfter | DateInterval | DayOfWeek;
+/** A day's modifiers, in DayPicker's key order. */
+export type Modifiers = Record<string, boolean | undefined>;
+/** DayPicker's `dateMatchModifiers`. */
+export declare function dateMatchModifiers(date: Date, matchers: Matcher | Matcher[]): boolean;
+export interface CalendarFormatters {
+    formatCaption: (month: Date) => string;
+    formatDay: (date: Date) => string;
+    formatMonthDropdown: (month: Date) => string;
+    formatYearDropdown: (year: Date) => string;
+    formatWeekdayName: (weekday: Date) => string;
+    formatWeekNumber: (weekNumber: number) => string;
+    formatWeekNumberHeader: () => string;
+}
+export interface CalendarLabels {
+    labelDayButton: (date: Date, modifiers: Modifiers) => string;
+    labelGridcell: (date: Date, modifiers?: Modifiers) => string;
+    labelGrid: (month: Date) => string;
+    labelNav: () => string;
+    labelNext: (month: Date | undefined) => string;
+    labelPrevious: (month: Date | undefined) => string;
+    labelWeekday: (weekday: Date) => string;
+    labelWeekNumber: (weekNumber: number) => string;
+    labelWeekNumberHeader: () => string;
+    labelMonthDropdown: () => string;
+    labelYearDropdown: () => string;
+}
+export interface CalendarDayButtonProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
+    day: CalendarDay;
+    modifiers: Modifiers;
+    [data: `data-${string}`]: string | undefined;
+}
+export interface CalendarChevronProps {
+    class?: string;
+    orientation?: `up` | `down` | `left` | `right`;
+    disabled?: boolean;
+    size?: number;
+}
+type SelectHandler<T> = (selected: T, triggerDate: Date, modifiers: Modifiers, e: MouseEvent) => void;
+interface ModeNone {
+    mode?: undefined;
+    selected?: undefined;
+    onSelect?: undefined;
+    required?: undefined;
+}
+interface ModeSingle {
+    mode: `single`;
+    selected?: Date | undefined;
+    onSelect?: SelectHandler<Date | undefined>;
+    required?: boolean;
+}
+interface ModeMultiple {
+    mode: `multiple`;
+    selected?: Date[] | undefined;
+    onSelect?: SelectHandler<Date[] | undefined>;
+    required?: boolean;
+    min?: number;
+    max?: number;
+}
+interface ModeRange {
+    mode: `range`;
+    selected?: DateRange | undefined;
+    onSelect?: SelectHandler<DateRange | undefined>;
+    required?: boolean;
+    min?: number;
+    max?: number;
+    resetOnSelect?: boolean;
+}
+export type CalendarProps = (ModeNone | ModeSingle | ModeMultiple | ModeRange) & {
+    class?: string;
+    /** DayPicker's part map (its keys: `root`, `day`, `day_button`, `today`…), merged over shadcn's. */
+    classNames?: Partial<Record<string, string>>;
+    style?: JSX.CSSProperties | string;
+    showOutsideDays?: boolean;
+    captionLayout?: `label` | `dropdown` | `dropdown-months` | `dropdown-years`;
+    buttonVariant?: ButtonVariantProps[`variant`];
+    formatters?: Partial<CalendarFormatters>;
+    labels?: Partial<CalendarLabels>;
+    components?: {
+        DayButton?: Component<CalendarDayButtonProps>;
+        Chevron?: Component<CalendarChevronProps>;
+    };
+    defaultMonth?: Date;
+    month?: Date;
+    onMonthChange?: (month: Date) => void;
+    onPrevClick?: (month: Date) => void;
+    onNextClick?: (month: Date) => void;
+    numberOfMonths?: number;
+    pagedNavigation?: boolean;
+    reverseMonths?: boolean;
+    fromYear?: number;
+    toYear?: number;
+    fromMonth?: Date;
+    toMonth?: Date;
+    startMonth?: Date;
+    endMonth?: Date;
+    disabled?: Matcher | Matcher[];
+    hidden?: Matcher | Matcher[];
+    modifiers?: Record<string, Matcher | Matcher[] | undefined>;
+    modifiersClassNames?: Record<string, string>;
+    today?: Date;
+    showWeekNumber?: boolean;
+    ISOWeek?: boolean;
+    fixedWeeks?: boolean;
+    weekStartsOn?: WeekDay;
+    firstWeekContainsDate?: 1 | 4;
+    locale?: CalendarLocale;
+    dir?: `ltr` | `rtl` | `auto`;
+    lang?: string;
+    id?: string;
+    title?: string;
+    role?: JSX.HTMLAttributes<HTMLDivElement>[`role`];
+    nonce?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    autoFocus?: boolean;
+    hideNavigation?: boolean;
+    disableNavigation?: boolean;
+    hideWeekdays?: boolean;
+    reverseYears?: boolean;
+    footer?: JSX.Element;
+    onDayClick?: (date: Date, modifiers: Modifiers, e: MouseEvent) => void;
+    onDayFocus?: (date: Date, modifiers: Modifiers, e: FocusEvent) => void;
+    onDayBlur?: (date: Date, modifiers: Modifiers, e: FocusEvent) => void;
+    onDayKeyDown?: (date: Date, modifiers: Modifiers, e: KeyboardEvent) => void;
+    onDayMouseEnter?: (date: Date, modifiers: Modifiers, e: MouseEvent) => void;
+    onDayMouseLeave?: (date: Date, modifiers: Modifiers, e: MouseEvent) => void;
+    [data: `data-${string}`]: string | undefined;
+};
+/** react-day-picker's `getDefaultClassNames()`: `rdp-<key>`. */
+export declare const getDefaultClassNames: () => Record<string, string>;
+declare function Calendar(input: CalendarProps): JSX.Element;
+/** shadcn's Chevron: the Lucide chevrons at `size-4` (lucide-react's attributes; `disabled` and `size` land on the <svg> as React spreads them). */
+declare function CalendarChevron(props: CalendarChevronProps): JSX.Element;
+/** shadcn's CalendarDayButton: the ghost icon Button with the day's data
+ *  attributes; focuses itself when its day takes the focus. */
+declare function CalendarDayButton(props: CalendarDayButtonProps): JSX.Element;
+export { Calendar, CalendarDayButton, CalendarChevron };

package/dist/types/primitives/card.d.ts

@@ -0,0 +1,9 @@
+import { type ComponentProps } from "solid-js";
+declare const Card: (props: ComponentProps<`div`>) => import("solid-js").JSX.Element;
+declare const CardHeader: (props: ComponentProps<`div`>) => import("solid-js").JSX.Element;
+declare const CardTitle: (props: ComponentProps<`div`>) => import("solid-js").JSX.Element;
+declare const CardDescription: (props: ComponentProps<`div`>) => import("solid-js").JSX.Element;
+declare const CardAction: (props: ComponentProps<`div`>) => import("solid-js").JSX.Element;
+declare const CardContent: (props: ComponentProps<`div`>) => import("solid-js").JSX.Element;
+declare const CardFooter: (props: ComponentProps<`div`>) => import("solid-js").JSX.Element;
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };

package/dist/types/primitives/checkbox.d.ts

@@ -0,0 +1,14 @@
+import { type ComponentProps, type JSX } from "solid-js";
+export type CheckedState = boolean | `indeterminate`;
+export type CheckboxProps = Omit<ComponentProps<`button`>, `value` | `onChange`> & {
+    checked?: CheckedState;
+    defaultChecked?: CheckedState;
+    onCheckedChange?: (checked: CheckedState) => void;
+    required?: boolean;
+    name?: string;
+    value?: string;
+    form?: string;
+    disabled?: boolean;
+};
+declare function Checkbox(props: CheckboxProps): JSX.Element;
+export { Checkbox };

package/dist/types/primitives/choice-tiles.d.ts

@@ -0,0 +1,59 @@
+import { type JSX } from "solid-js";
+import { type ChoiceTileOption, type TileState } from "@exponential-at/ui/web/primitives";
+export { choiceColumns, choiceToggle, choiceValues } from "@exponential-at/ui/web/primitives";
+export type { ChoiceTileOption, TileState } from "@exponential-at/ui/web/primitives";
+type Attrs = Record<string, unknown>;
+export interface ChoiceTilesFrameProps {
+    options: readonly ChoiceTileOption[];
+    /** The picked values. */
+    picked: readonly string[];
+    multiple: boolean;
+    columns: number;
+    disabled?: boolean;
+    invalid?: boolean;
+    dir?: `ltr` | `rtl`;
+    /** A pick (already toggled for `multiple`): the next picked values. */
+    onPick: (next: string[], value: string) => void;
+    /** The root's attributes; `style` is a React-form object (camelCase). */
+    rootProps?: Attrs;
+    tileProps: (state: TileState) => Attrs;
+    pictureProps: (state: TileState) => Attrs;
+    labelProps: (state: TileState) => Attrs;
+    descriptionProps: (state: TileState) => Attrs;
+    /** The picture's content (the frame keeps the box; a missing picture gets
+     *  the placeholder). */
+    renderPicture: (src: string | null, state: TileState) => JSX.Element;
+    /** Under the tiles (the field's errors), spanning every column. */
+    after?: JSX.Element;
+    rootRef?: (el: HTMLDivElement) => void;
+}
+/** The headless tiles: a `radiogroup` of `radio` buttons (single) or a
+ *  `group` of `checkbox` buttons (multiple). The picked tile (else the
+ *  first enabled one) is the tab stop; arrows move focus with wrap (a single
+ *  pick follows focus); Space/Enter toggle (the button's own click). Every
+ *  tile has a picture box once ANY option has an image, so a row keeps one
+ *  height. */
+export declare function ChoiceTilesFrame(props: ChoiceTilesFrameProps): JSX.Element;
+export interface ChoiceTilesProps {
+    options: readonly ChoiceTileOption[];
+    /** The pick: a string (single) or the picked values (multiple). */
+    value: string | readonly string[] | null | undefined;
+    multiple?: boolean;
+    /** Tiles per row, 1–4 (default 2). */
+    columns?: number;
+    disabled?: boolean;
+    /** Paints the destructive border (a required answer missing). */
+    invalid?: boolean;
+    /** The next value: a string for a single pick, the values for `multiple`. */
+    onChange?: (value: string | string[]) => void;
+    /** The picture element; default a plain lazy <img>. */
+    renderImage?: (src: string, alt: string) => JSX.Element;
+    class?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "data-testid"?: string;
+    dir?: `ltr` | `rtl`;
+}
+/** THE picture choice (EXP-1280) at the eUI `ChoiceTiles` look. */
+declare function ChoiceTiles(props: ChoiceTilesProps): JSX.Element;
+export { ChoiceTiles };