@mohasinac/appkit 2.2.0 → 2.3.0

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

@@ -1,112 +0,0 @@
-/* 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

@@ -1,24 +0,0 @@
-import "client-only";
-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

@@ -1,78 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "client-only";
-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, 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, 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

@@ -1,101 +0,0 @@
-/* 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

@@ -1,12 +0,0 @@
-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

@@ -1,17 +0,0 @@
-"use client";
-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, 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, children: resolvedAction })) : null] }));
-}

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

@@ -1,30 +0,0 @@
-/* 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

@@ -1,16 +0,0 @@
-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;
-}
-export declare function FilterDrawer({ children, title, open, onOpen, onClose, onApply, onReset, activeCount, pendingCount, triggerLabel, triggerClassName, hideTrigger, }: FilterDrawerProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/FilterDrawer.js

@@ -1,39 +0,0 @@
-"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, }) {
-    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: "left", footer: _jsxs("div", { className: "appkit-filter-drawer__footer", 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", children: children }) })] }));
-}

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

@@ -1,61 +0,0 @@
-/* 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

@@ -1,33 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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}`, children: [_jsx("div", { className: `appkit-flow-diagram__header ${themed.bgSecondary} ${themed.border}`, children: _jsx(Text, { weight: "semibold", size: "sm", className: titleClass, children: title }) }), _jsxs("div", { className: `appkit-flow-diagram__body ${themed.bgPrimary}`, children: [_jsx("div", { className: `appkit-flow-diagram__chain ${centered ? "appkit-flow-diagram__chain--centered" : "appkit-flow-diagram__chain--scroll"}`, children: steps.flatMap((step, i) => {
-                            const nodes = [
-                                _jsxs("div", { className: `appkit-flow-diagram__step ${stepWidth}`, children: [_jsx("div", { className: `appkit-flow-diagram__circle ${step.circleClass}`, 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", children: _jsx(Text, { size: "xs", variant: "secondary", children: note }) }))] })] }));
-}

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

@@ -1,77 +0,0 @@
-/* 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

@@ -1,27 +0,0 @@
-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;