@mohasinac/appkit 2.3.0 → 2.3.1

package/dist/ui/components/Dropdown.style.css

@@ -0,0 +1,112 @@
+/* Dropdown — trigger + floating menu with items */
+
+.appkit-dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.appkit-dropdown__menu {
+  position: absolute;
+  z-index: 50;
+  margin-top: 0.5rem;
+  min-width: 180px;
+  border-radius: 0.5rem;
+  border: 1px solid #e4e4e7;
+  background: #fff;
+  padding: 0.25rem;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+}
+.appkit-dropdown__menu--left { left: 0; }
+.appkit-dropdown__menu--right { right: 0; }
+
+.appkit-dropdown__item {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  border-radius: 0.375rem;
+  padding: 0.5rem 0.75rem;
+  text-align: left;
+  font-size: 0.875rem;
+  color: #3f3f46;
+  transition: background-color 0.15s;
+}
+.appkit-dropdown__item--active {
+  background: #f4f4f5;
+}
+.appkit-dropdown__item--destructive {
+  color: #dc2626;
+}
+.appkit-dropdown__item:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* Composable sub-components (DropdownMenu, DropdownItem) */
+.appkit-dropdown__composed-menu {
+  position: absolute;
+  right: 0;
+  z-index: 50;
+  margin-top: 0.25rem;
+  min-width: 160px;
+  border-radius: 0.5rem;
+  border: 1px solid #e4e4e7;
+  background: #fff;
+  padding: 0.25rem 0;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+}
+
+.appkit-dropdown__composed-item {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  border-radius: 0.375rem;
+  padding: 0.5rem 0.75rem;
+  text-align: left;
+  font-size: 0.875rem;
+  color: #3f3f46;
+}
+.appkit-dropdown__composed-item:hover {
+  background: #f4f4f5;
+}
+.appkit-dropdown__composed-item:disabled {
+  opacity: 0.5;
+}
+
+.appkit-dropdown__separator {
+  margin: 0.25rem 0;
+  border-top: 1px solid #e4e4e7;
+}
+
+.appkit-dropdown__trigger {
+  cursor: pointer;
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+  .appkit-dropdown__menu {
+    border-color: #334155;
+    background: #0f172a;
+  }
+  .appkit-dropdown__item {
+    color: #e2e8f0;
+  }
+  .appkit-dropdown__item--active {
+    background: #1e293b;
+  }
+  .appkit-dropdown__item--destructive {
+    color: #f87171;
+  }
+  .appkit-dropdown__composed-menu {
+    border-color: #334155;
+    background: #0f172a;
+  }
+  .appkit-dropdown__composed-item {
+    color: #e2e8f0;
+  }
+  .appkit-dropdown__composed-item:hover {
+    background: #1e293b;
+  }
+  .appkit-dropdown__separator {
+    border-color: #334155;
+  }
+}

package/dist/ui/components/DynamicSelect.d.ts

@@ -0,0 +1,23 @@
+export interface DynamicSelectOption<V = string> {
+    value: V;
+    label: string;
+    meta?: Record<string, unknown>;
+}
+export interface AsyncPage<T> {
+    items: T[];
+    hasMore: boolean;
+    nextPage?: number;
+}
+export interface DynamicSelectProps<V = string> {
+    value?: V | null;
+    onChange?: (value: V | null, option: DynamicSelectOption<V> | null) => void;
+    options?: DynamicSelectOption<V>[];
+    loadOptions?: (query: string, page: number) => Promise<AsyncPage<DynamicSelectOption<V>>>;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    noResultsText?: string;
+    disabled?: boolean;
+    className?: string;
+    ariaLabel?: string;
+}
+export declare function DynamicSelect<V = string>({ value, onChange, options, loadOptions, placeholder, searchPlaceholder, noResultsText, disabled, className, ariaLabel, }: DynamicSelectProps<V>): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/DynamicSelect.js

@@ -0,0 +1,77 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Input } from "./Input";
+const UI_DYNAMIC_SELECT = {
+    root: "appkit-dynamic-select",
+    trigger: "appkit-dynamic-select__trigger",
+    triggerDisabled: "appkit-dynamic-select__trigger--disabled",
+    placeholder: "appkit-dynamic-select__placeholder",
+    dropdown: "appkit-dynamic-select__dropdown",
+    search: "appkit-dynamic-select__search",
+    list: "appkit-dynamic-select__list",
+    option: "appkit-dynamic-select__option",
+    optionSelected: "appkit-dynamic-select__option--selected",
+    empty: "appkit-dynamic-select__empty",
+    loading: "appkit-dynamic-select__loading",
+    loadMore: "appkit-dynamic-select__load-more",
+};
+export function DynamicSelect({ value, onChange, options, loadOptions, placeholder = "Select...", searchPlaceholder = "Search...", noResultsText = "No results", disabled, className = "", ariaLabel, }) {
+    const [query, setQuery] = useState("");
+    const [open, setOpen] = useState(false);
+    const [asyncOptions, setAsyncOptions] = useState([]);
+    const [page, setPage] = useState(1);
+    const [hasMore, setHasMore] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const containerRef = useRef(null);
+    const resolvedOptions = options ?? asyncOptions;
+    const load = useCallback(async (search, nextPage, reset = false) => {
+        if (!loadOptions)
+            return;
+        setLoading(true);
+        try {
+            const response = await loadOptions(search, nextPage);
+            setAsyncOptions((prev) => reset ? response.items : [...prev, ...response.items]);
+            setPage(nextPage);
+            setHasMore(response.hasMore);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [loadOptions]);
+    useEffect(() => {
+        if (!open || !loadOptions)
+            return;
+        void load(query, 1, true);
+    }, [open, query, load, loadOptions]);
+    useEffect(() => {
+        const onClickOutside = (event) => {
+            if (!containerRef.current?.contains(event.target)) {
+                setOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", onClickOutside);
+        return () => document.removeEventListener("mousedown", onClickOutside);
+    }, []);
+    const filtered = options
+        ? options.filter((option) => option.label.toLowerCase().includes(query.toLowerCase()))
+        : resolvedOptions;
+    const selectedLabel = resolvedOptions.find((option) => option.value === value)?.label ??
+        (value == null ? "" : String(value));
+    return (_jsxs("div", { ref: containerRef, className: [UI_DYNAMIC_SELECT.root, className].filter(Boolean).join(" "), "aria-label": ariaLabel, "data-section": "dynamicselect-div-490", children: [_jsxs("button", { type: "button", disabled: disabled, onClick: () => setOpen((prev) => !prev), className: [
+                    UI_DYNAMIC_SELECT.trigger,
+                    disabled ? UI_DYNAMIC_SELECT.triggerDisabled : "",
+                ]
+                    .filter(Boolean)
+                    .join(" "), children: [_jsx("span", { className: value == null ? UI_DYNAMIC_SELECT.placeholder : "", children: selectedLabel || placeholder }), _jsx("span", { "aria-hidden": "true", children: "\u25BE" })] }), open ? (_jsxs("div", { className: UI_DYNAMIC_SELECT.dropdown, "data-section": "dynamicselect-div-491", children: [_jsx(Input, { autoFocus: true, value: query, onChange: (event) => setQuery(event.target.value), placeholder: searchPlaceholder, className: UI_DYNAMIC_SELECT.search }), _jsxs("ul", { className: UI_DYNAMIC_SELECT.list, children: [filtered.map((option, index) => (_jsx("li", { children: _jsx("button", { type: "button", onClick: () => {
+                                        onChange?.(option.value, option);
+                                        setOpen(false);
+                                    }, className: [
+                                        UI_DYNAMIC_SELECT.option,
+                                        option.value === value
+                                            ? UI_DYNAMIC_SELECT.optionSelected
+                                            : "",
+                                    ]
+                                        .filter(Boolean)
+                                        .join(" "), children: option.label }) }, `${String(option.value)}-${index}`))), filtered.length === 0 && !loading ? (_jsx("li", { className: UI_DYNAMIC_SELECT.empty, children: noResultsText })) : null, loading ? (_jsx("li", { className: UI_DYNAMIC_SELECT.loading, children: "Loading..." })) : null, hasMore && !loading ? (_jsx("li", { children: _jsx("button", { type: "button", className: UI_DYNAMIC_SELECT.loadMore, onClick: () => void load(query, page + 1), children: "Load more" }) })) : null] })] })) : null] }));
+}

package/dist/ui/components/DynamicSelect.style.css

@@ -0,0 +1,101 @@
+/* DynamicSelect — searchable dropdown with async pagination */
+
+.appkit-dynamic-select {
+  position: relative;
+}
+
+.appkit-dynamic-select__trigger {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 0.5rem;
+  border: 1px solid #d4d4d8;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  background: white;
+  color: #27272a;
+}
+
+:is(.dark) .appkit-dynamic-select__trigger {
+  border-color: #334155;
+  background: #0f172a;
+  color: #e2e8f0;
+}
+
+.appkit-dynamic-select__trigger--disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.appkit-dynamic-select__placeholder {
+  color: #a1a1aa;
+}
+
+.appkit-dynamic-select__dropdown {
+  position: absolute;
+  z-index: 50;
+  margin-top: 0.25rem;
+  width: 100%;
+  overflow: hidden;
+  border-radius: 0.5rem;
+  border: 1px solid #e4e4e7;
+  background: white;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+}
+
+:is(.dark) .appkit-dynamic-select__dropdown {
+  border-color: #334155;
+  background: #0f172a;
+}
+
+.appkit-dynamic-select__search {
+  border-radius: 0;
+  border-left: 0;
+  border-right: 0;
+  border-top: 0;
+}
+
+.appkit-dynamic-select__list {
+  max-height: 12rem;
+  overflow-y: auto;
+  padding: 0.25rem 0;
+}
+
+.appkit-dynamic-select__option {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  text-align: left;
+  font-size: 0.875rem;
+}
+
+.appkit-dynamic-select__option:hover {
+  background-color: #f4f4f5;
+}
+
+:is(.dark) .appkit-dynamic-select__option:hover {
+  background-color: #1e293b;
+}
+
+.appkit-dynamic-select__option--selected {
+  font-weight: 500;
+}
+
+.appkit-dynamic-select__empty,
+.appkit-dynamic-select__loading {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.75rem;
+  color: #a1a1aa;
+}
+
+.appkit-dynamic-select__load-more {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  text-align: left;
+  font-size: 0.75rem;
+  color: var(--color-primary);
+}
+
+.appkit-dynamic-select__load-more:hover {
+  text-decoration: underline;
+}

package/dist/ui/components/EmptyState.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export interface EmptyStateProps {
+    icon?: React.ReactNode;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    action?: React.ReactNode;
+    actionLabel?: string;
+    onAction?: () => void;
+    actionHref?: string;
+    className?: string;
+}
+export declare function EmptyState({ icon, title, description, action, actionLabel, onAction, actionHref, className, }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/EmptyState.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Heading, Text } from "./Typography";
+import { Card } from "./Card";
+import { Button } from "./Button";
+import { TextLink } from "./TextLink";
+const UI_EMPTY = {
+    base: "appkit-empty-state",
+    icon: "appkit-empty-state__icon",
+    description: "appkit-empty-state__description",
+    action: "appkit-empty-state__action",
+};
+export function EmptyState({ icon, title, description, action, actionLabel, onAction, actionHref, className = "", }) {
+    const resolvedAction = action ??
+        (actionLabel && actionHref ? (_jsx(TextLink, { href: actionHref, children: actionLabel })) : actionLabel && onAction ? (_jsx(Button, { type: "button", variant: "primary", onClick: onAction, children: actionLabel })) : null);
+    return (_jsxs(Card, { variant: "outlined", className: [UI_EMPTY.base, className].filter(Boolean).join(" "), children: [icon ? _jsx("div", { className: UI_EMPTY.icon, "data-section": "emptystate-div-492", children: icon }) : null, _jsx(Heading, { level: 3, children: title }), description ? (_jsx(Text, { variant: "secondary", className: UI_EMPTY.description, children: description })) : null, resolvedAction ? (_jsx("div", { className: UI_EMPTY.action, "data-section": "emptystate-div-493", children: resolvedAction })) : null] }));
+}

package/dist/ui/components/EmptyState.style.css

@@ -0,0 +1,30 @@
+/* EmptyState — centered feedback panel with icon, title, description, action */
+
+.appkit-empty-state {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  min-height: 220px;
+}
+
+.appkit-empty-state__icon {
+  color: #a1a1aa;
+}
+
+.appkit-empty-state__description {
+  max-width: 48ch;
+}
+
+.appkit-empty-state__action {
+  padding-top: 0.25rem;
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+  .appkit-empty-state__icon {
+    color: #64748b;
+  }
+}

package/dist/ui/components/FilterDrawer.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+export interface FilterDrawerProps {
+    children: React.ReactNode;
+    title?: string;
+    open?: boolean;
+    onOpen?: () => void;
+    onClose?: () => void;
+    onApply?: () => void;
+    onReset?: () => void;
+    activeCount?: number;
+    pendingCount?: number;
+    triggerLabel?: string;
+    triggerClassName?: string;
+    hideTrigger?: boolean;
+    /** Which side the drawer slides in from. Default: "bottom" (slides up, mobile-first). */
+    side?: "left" | "right" | "bottom";
+}
+export declare function FilterDrawer({ children, title, open, onOpen, onClose, onApply, onReset, activeCount, pendingCount, triggerLabel, triggerClassName, hideTrigger, side, }: FilterDrawerProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/FilterDrawer.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+import { Button } from "./Button";
+import { Drawer } from "./Drawer";
+import { Span } from "./Typography";
+export function FilterDrawer({ children, title = "Filters", open, onOpen, onClose, onApply, onReset, activeCount = 0, pendingCount, triggerLabel = "Filters", triggerClassName = "", hideTrigger = false, side = "bottom", }) {
+    const [internalOpen, setInternalOpen] = React.useState(false);
+    const isControlled = open !== undefined;
+    const isOpen = isControlled ? open : internalOpen;
+    const handleOpen = () => {
+        if (isControlled) {
+            onOpen?.();
+            return;
+        }
+        setInternalOpen(true);
+    };
+    const handleClose = () => {
+        if (isControlled) {
+            onClose?.();
+            return;
+        }
+        setInternalOpen(false);
+    };
+    const handleApply = () => {
+        onApply?.();
+        if (!isControlled) {
+            setInternalOpen(false);
+        }
+    };
+    return (_jsxs(_Fragment, { children: [!hideTrigger ? (_jsxs(Button, { type: "button", variant: "outline", onClick: () => {
+                    if (!isOpen)
+                        handleOpen();
+                }, className: ["appkit-filter-drawer__trigger", triggerClassName]
+                    .filter(Boolean)
+                    .join(" "), "aria-label": triggerLabel, children: [_jsx(Span, { children: triggerLabel }), activeCount > 0 ? (_jsx(Span, { className: "appkit-filter-drawer__badge", children: activeCount })) : null] })) : null, _jsx(Drawer, { isOpen: isOpen, onClose: handleClose, title: title, side: side, footer: _jsxs("div", { className: "appkit-filter-drawer__footer", "data-section": "filterdrawer-div-494", children: [_jsx(Button, { type: "button", variant: "ghost", onClick: onReset, children: "Reset all" }), _jsx(Button, { type: "button", variant: "primary", onClick: handleApply, children: pendingCount != null && pendingCount > 0
+                                ? `Apply (${pendingCount})`
+                                : "Apply" })] }), children: _jsx("div", { className: "appkit-filter-drawer__body", "data-section": "filterdrawer-div-495", children: children }) })] }));
+}

package/dist/ui/components/FilterDrawer.style.css

@@ -0,0 +1,61 @@
+/* FilterDrawer — slide-out filter panel with trigger badge, footer actions */
+
+.appkit-filter-drawer__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  border-radius: 0.5rem;
+  border-color: #d4d4d8;
+  color: #3f3f46;
+}
+
+:is(.dark) .appkit-filter-drawer__trigger {
+  border-color: #334155;
+  color: #e2e8f0;
+}
+
+.appkit-filter-drawer__trigger:hover {
+  background: #f4f4f5;
+}
+
+:is(.dark) .appkit-filter-drawer__trigger:hover {
+  background: #1e293b;
+}
+
+.appkit-filter-drawer__badge {
+  display: inline-flex;
+  height: 1.25rem;
+  min-width: 20px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  background: var(--color-primary);
+  padding-inline: 0.25rem;
+  font-size: 0.75rem;
+  color: white;
+}
+
+.appkit-filter-drawer__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  border-top: 1px solid #e4e4e7;
+  padding: 0.75rem 1rem;
+}
+
+:is(.dark) .appkit-filter-drawer__footer {
+  border-top-color: #334155;
+}
+
+.appkit-filter-drawer__body {
+  & > * + * {
+    border-top: 1px solid #e4e4e7;
+  }
+}
+
+:is(.dark) .appkit-filter-drawer__body {
+  & > * + * {
+    border-top-color: #334155;
+  }
+}

package/dist/ui/components/FlowDiagram.d.ts

@@ -0,0 +1,33 @@
+import type { ReactNode } from "react";
+export interface FlowStep {
+    emoji: string;
+    /** Full Tailwind class string for the circle background + border. */
+    circleClass: string;
+    /** Step name rendered as medium Text (title+badge style). */
+    title?: string;
+    /** Short status badge label. */
+    badge?: string;
+    /** Full Tailwind class string for the badge background + text colors. */
+    badgeClass?: string;
+    /** Description rendered below the badge (badge+desc style). */
+    desc?: string;
+}
+export interface FlowDiagramProps {
+    /** Header title including any emoji prefix. */
+    title: string;
+    /** Tailwind color classes for the header title text. Defaults to text-primary. */
+    titleClass?: string;
+    /** Tailwind bg class for the horizontal connectors between steps. */
+    connectorClass: string;
+    steps: FlowStep[];
+    /** Width class applied to every step column. Defaults to "w-[86px]". */
+    stepWidth?: string;
+    /** Centers the step chain instead of making it horizontally scrollable. */
+    centered?: boolean;
+    /** Optional note strip rendered at the very bottom of the diagram body. */
+    note?: string;
+    className?: string;
+    /** Slot rendered inside the body, between the step chain and the note strip. */
+    children?: ReactNode;
+}
+export declare function FlowDiagram({ title, titleClass, connectorClass, steps, stepWidth, centered, note, className, children, }: FlowDiagramProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/FlowDiagram.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text, Span } from "./Typography";
+import { THEME_CONSTANTS } from "../../tokens";
+const { themed, flex } = THEME_CONSTANTS;
+export function FlowDiagram({ title, titleClass = "text-primary", connectorClass, steps, stepWidth = "w-[86px]", centered = false, note, className = "", children, }) {
+    return (_jsxs("div", { className: `appkit-flow-diagram ${themed.border} ${className}`, "data-section": "flowdiagram-div-496", children: [_jsx("div", { className: `appkit-flow-diagram__header ${themed.bgSecondary} ${themed.border}`, "data-section": "flowdiagram-div-497", children: _jsx(Text, { weight: "semibold", size: "sm", className: titleClass, children: title }) }), _jsxs("div", { className: `appkit-flow-diagram__body ${themed.bgPrimary}`, "data-section": "flowdiagram-div-498", children: [_jsx("div", { className: `appkit-flow-diagram__chain ${centered ? "appkit-flow-diagram__chain--centered" : "appkit-flow-diagram__chain--scroll"}`, "data-section": "flowdiagram-div-499", children: steps.flatMap((step, i) => {
+                            const nodes = [
+                                _jsxs("div", { className: `appkit-flow-diagram__step ${stepWidth}`, "data-section": "flowdiagram-div-500", children: [_jsx("div", { className: `appkit-flow-diagram__circle ${step.circleClass}`, "data-section": "flowdiagram-div-501", children: step.emoji }), step.title && (_jsx(Text, { size: "xs", weight: "medium", className: "leading-tight", children: step.title })), step.badge && step.badgeClass && (_jsx(Span, { className: `appkit-flow-diagram__badge ${step.badgeClass}`, children: step.badge })), step.desc && (_jsx(Text, { size: "xs", variant: "secondary", className: "leading-tight", children: step.desc }))] }, `s-${i}`),
+                            ];
+                            if (i < steps.length - 1) {
+                                nodes.push(_jsx("div", { className: `appkit-flow-diagram__connector ${connectorClass}` }, `c-${i}`));
+                            }
+                            return nodes;
+                        }) }), children, note && (_jsx("div", { className: "appkit-flow-diagram__note", "data-section": "flowdiagram-div-502", children: _jsx(Text, { size: "xs", variant: "secondary", children: note }) }))] })] }));
+}

package/dist/ui/components/FlowDiagram.style.css

@@ -0,0 +1,77 @@
+/* FlowDiagram — step chain with connectors, badges, and optional note strip */
+
+.appkit-flow-diagram {
+  border-radius: 1rem;
+  border: 1px solid;
+  overflow: hidden;
+}
+
+.appkit-flow-diagram__header {
+  padding: 0.75rem 1.25rem;
+  border-bottom: 1px solid;
+}
+
+.appkit-flow-diagram__body {
+  padding: 1.25rem;
+}
+
+.appkit-flow-diagram__chain {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.375rem;
+  margin-bottom: 1rem;
+}
+
+.appkit-flow-diagram__chain--scroll {
+  overflow-x: auto;
+  padding-bottom: 0.75rem;
+  scroll-behavior: smooth;
+}
+
+.appkit-flow-diagram__chain--centered {
+  justify-content: center;
+}
+
+.appkit-flow-diagram__step {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 0.25rem;
+}
+
+.appkit-flow-diagram__circle {
+  width: 3rem;
+  height: 3rem;
+  border-radius: 9999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.25rem;
+}
+
+.appkit-flow-diagram__connector {
+  flex-shrink: 0;
+  align-self: flex-start;
+  height: 0.125rem;
+  width: 1.25rem;
+  margin-top: 1.5rem;
+}
+
+.appkit-flow-diagram__badge {
+  font-size: 10px;
+  font-weight: 700;
+  padding: 0.125rem 0.375rem;
+  border-radius: 9999px;
+}
+
+.appkit-flow-diagram__note {
+  margin-top: 0.75rem;
+  padding-top: 0.75rem;
+  border-top: 1px dashed #e2e8f0;
+}
+
+:is(.dark) .appkit-flow-diagram__note {
+  border-top-color: #334155;
+}

package/dist/ui/components/Form.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+export interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
+    children: React.ReactNode;
+}
+export type GapToken = "none" | "xs" | "sm" | "md" | "lg" | "xl";
+/**
+ * Semantic `<form>` wrapper. Passes all standard form attributes through.
+ */
+export declare function Form({ children, className, ...props }: FormProps): import("react/jsx-runtime").JSX.Element;
+export interface FormGroupProps {
+    children: React.ReactNode;
+    columns?: 1 | 2 | 3 | 4;
+    gap?: GapToken;
+    className?: string;
+}
+export declare function FormGroup({ children, columns, gap, className, }: FormGroupProps): import("react/jsx-runtime").JSX.Element;
+export interface FormFieldSpanProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function FormFieldSpan({ children, className, }: FormFieldSpanProps): import("react/jsx-runtime").JSX.Element;
+export interface FormActionsProps {
+    children: React.ReactNode;
+    align?: "left" | "center" | "right" | "between";
+    className?: string;
+}
+export declare function FormActions({ children, align, className, }: FormActionsProps): import("react/jsx-runtime").JSX.Element;