@momoi-labs/kiso-react 0.2.0 → 0.3.0

package/dist/index.js

@@ -1,13 +1,44 @@
 "use client";
+export * from "./alert.js";
 export * from "./alert-dialog.js";
+export * from "./app-shell.js";
 export * from "./badge.js";
 export * from "./brand-mark.js";
+export * from "./breadcrumb.js";
 export * from "./button.js";
 export * from "./card.js";
 export * from "./checkbox.js";
+export * from "./command-palette.js";
+export * from "./dialog.js";
+export * from "./dot.js";
+export * from "./drawer.js";
+export * from "./dropdown-menu.js";
+export * from "./empty-state.js";
 export * from "./form-field.js";
+export * from "./header.js";
 export * from "./input.js";
+export * from "./kv.js";
 export * from "./label.js";
+export * from "./link.js";
+export * from "./log-view.js";
+export * from "./navigation.js";
+export * from "./page-header.js";
+export * from "./pagination.js";
+export * from "./popover.js";
+export * from "./search.js";
+export * from "./select.js";
+export * from "./separator.js";
+export * from "./sidebar.js";
+export * from "./skeleton.js";
+export * from "./spinner.js";
+export * from "./split.js";
+export * from "./stat.js";
+export * from "./switch.js";
 export * from "./table.js";
+export * from "./tabs.js";
 export * from "./terminal-icon.js";
+export * from "./textarea.js";
 export * from "./theme-selector.js";
+export * from "./toast.js";
+export * from "./tooltip.js";
+export * from "./validation-message.js";

package/dist/kv.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+declare function KV({ className, ...props }: React.ComponentProps<"dl">): React.JSX.Element;
+declare function KVKey({ className, ...props }: React.ComponentProps<"dt">): React.JSX.Element;
+declare function KVValue({ className, ...props }: React.ComponentProps<"dd">): React.JSX.Element;
+export { KV, KVKey, KVValue };

package/dist/kv.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { clsx as cn } from "clsx";
+function KV({ className, ...props }) {
+    return (_jsx("dl", { "data-slot": "kv", className: cn("kv", className), ...props }));
+}
+function KVKey({ className, ...props }) {
+    return (_jsx("dt", { "data-slot": "kv-key", className: cn("", className), ...props }));
+}
+function KVValue({ className, ...props }) {
+    return (_jsx("dd", { "data-slot": "kv-value", className: cn("", className), ...props }));
+}
+export { KV, KVKey, KVValue };

package/dist/link.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const linkVariants: (props?: ({
+    variant?: "inline" | "standalone" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Link({ className, variant, active, asChild, ...props }: React.ComponentProps<"a"> & VariantProps<typeof linkVariants> & {
+    active?: boolean;
+    asChild?: boolean;
+}): React.JSX.Element;
+export { Link, linkVariants };

package/dist/link.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { clsx as cn } from "clsx";
+import { Slot } from "radix-ui";
+const linkVariants = cva("", {
+    variants: { variant: { inline: "link", standalone: "nav-item" } },
+    defaultVariants: { variant: "inline" },
+});
+// A destination that must carry Button weight is <Button asChild><a /></Button>,
+// not a third variant here.
+function Link({ className, variant = "inline", active = false, asChild = false, ...props }) {
+    const Comp = asChild ? Slot.Root : "a";
+    return (_jsx(Comp, { "data-slot": "link", "data-variant": variant, "aria-current": active ? "page" : undefined, className: cn(linkVariants({ variant }), className), ...props }));
+}
+export { Link, linkVariants };

package/dist/log-view.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+type LogViewHandle = {
+    scrollToBottom: (behavior?: ScrollBehavior) => void;
+};
+declare function LogView({ className, children, follow, onFollowChange, ref, ...props }: Omit<React.ComponentProps<"div">, "ref"> & {
+    follow?: boolean;
+    onFollowChange?: (follow: boolean) => void;
+    ref?: React.Ref<LogViewHandle>;
+}): React.JSX.Element;
+declare function LogViewLine({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function LogViewTime({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare const logViewLevelVariants: (props?: ({
+    level?: "error" | "info" | "warn" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function LogViewLevel({ className, level, ...props }: React.ComponentProps<"span"> & VariantProps<typeof logViewLevelVariants>): React.JSX.Element;
+export { LogView, LogViewLine, LogViewTime, LogViewLevel, logViewLevelVariants, type LogViewHandle, };

package/dist/log-view.js

@@ -0,0 +1,56 @@
+// Adapted from shadcn/ui new-york-v4. See ../SHADCN-LICENSE.
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { clsx as cn } from "clsx";
+import { useIsomorphicLayoutEffect } from "./use-isomorphic-layout-effect.js";
+/* Within this much of the end counts as "at the bottom". A log that is being
+   written to rarely lands on an exact scroll position. */
+const BOTTOM_THRESHOLD = 8;
+/* The frame is `.logview` and the scroller is `.log-scroll` inside it, so the
+   component owns the scroller and with it follow-tail: new lines pin the view
+   to the end until the reader scrolls away, and returning to the end resumes.
+   Pass `follow` to drive that from a control of your own — the console has a
+   "Follow" switch — and read `onFollowChange` to keep it in step. */
+function LogView({ className, children, follow, onFollowChange, ref, ...props }) {
+    const scroller = React.useRef(null);
+    const [atBottom, setAtBottom] = React.useState(true);
+    const following = follow ?? atBottom;
+    React.useImperativeHandle(ref, () => ({
+        scrollToBottom(behavior) {
+            const el = scroller.current;
+            if (el)
+                el.scrollTo({ top: el.scrollHeight, behavior });
+        },
+    }), []);
+    /* Before paint, so a new line never shows up above the fold first. */
+    useIsomorphicLayoutEffect(() => {
+        const el = scroller.current;
+        if (el && following)
+            el.scrollTop = el.scrollHeight;
+    }, [children, following]);
+    return (_jsx("div", { "data-slot": "log-view", "data-follow": following, className: cn("logview", className), ...props, children: _jsx("div", { ref: scroller, "data-slot": "log-view-scroll", className: "log-scroll", onScroll: (event) => {
+                const el = event.currentTarget;
+                const bottom = el.scrollHeight - el.scrollTop - el.clientHeight <= BOTTOM_THRESHOLD;
+                setAtBottom(bottom);
+                if (bottom !== following)
+                    onFollowChange?.(bottom);
+            }, children: children }) }));
+}
+function LogViewLine({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "log-view-line", className: cn("", className), ...props }));
+}
+function LogViewTime({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "log-view-time", className: cn("log-time", className), ...props }));
+}
+const logViewLevelVariants = cva("", {
+    variants: {
+        level: { info: "log-info", warn: "log-warn", error: "log-error" },
+    },
+    defaultVariants: { level: "info" },
+});
+function LogViewLevel({ className, level = "info", ...props }) {
+    return (_jsx("span", { "data-slot": "log-view-level", "data-level": level, className: cn(logViewLevelVariants({ level }), className), ...props }));
+}
+export { LogView, LogViewLine, LogViewTime, LogViewLevel, logViewLevelVariants, };

package/dist/navigation.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+declare function Navigation({ className, ...props }: React.ComponentProps<"nav">): React.JSX.Element;
+declare function NavigationGroup({ className, label, children, ...props }: React.ComponentProps<"div"> & {
+    label?: string;
+}): React.JSX.Element;
+declare function NavigationList({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
+declare function NavigationItem({ className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
+declare function NavigationLink({ className, active, asChild, ...props }: React.ComponentProps<"a"> & {
+    active?: boolean;
+    asChild?: boolean;
+}): React.JSX.Element;
+export { Navigation, NavigationGroup, NavigationList, NavigationItem, NavigationLink, };

package/dist/navigation.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { clsx as cn } from "clsx";
+import { Slot } from "radix-ui";
+// Navigation carries landmark and grouping semantics only. Which destination is
+// current is the product's answer: pass `active`, and pass `asChild` to keep a
+// router's own link component.
+function Navigation({ className, ...props }) {
+    return _jsx("nav", { "data-slot": "navigation", className: cn("", className), ...props });
+}
+function NavigationGroup({ className, label, children, ...props }) {
+    return (_jsxs("div", { "data-slot": "navigation-group", className: cn("nav-group", className), ...props, children: [label && _jsx("p", { className: "t-caps", children: label }), children] }));
+}
+function NavigationList({ className, ...props }) {
+    return (_jsx("ul", { "data-slot": "navigation-list", className: cn("", className), ...props }));
+}
+function NavigationItem({ className, ...props }) {
+    return (_jsx("li", { "data-slot": "navigation-item", className: cn("", className), ...props }));
+}
+function NavigationLink({ className, active = false, asChild = false, ...props }) {
+    const Comp = asChild ? Slot.Root : "a";
+    return (_jsx(Comp, { "data-slot": "navigation-link", "aria-current": active ? "page" : undefined, className: cn("nav-item", className), ...props }));
+}
+export { Navigation, NavigationGroup, NavigationList, NavigationItem, NavigationLink, };

package/dist/page-header.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+declare function PageHeader({ className, actions, children, ...props }: React.ComponentProps<"div"> & {
+    actions?: React.ReactNode;
+}): React.JSX.Element;
+declare function PageHeaderTitle({ className, asChild, ...props }: React.ComponentProps<"h1"> & {
+    asChild?: boolean;
+}): React.JSX.Element;
+declare function PageHeaderDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
+export { PageHeader, PageHeaderTitle, PageHeaderDescription };

package/dist/page-header.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { clsx as cn } from "clsx";
+import { Slot } from "radix-ui";
+// Actions sit beside the title, so they are a prop rather than a child: the
+// title block keeps its own grid either way.
+function PageHeader({ className, actions, children, ...props }) {
+    const heading = (_jsx("div", { "data-slot": "page-header", className: cn("page-header", className), ...props, children: children }));
+    if (!actions)
+        return heading;
+    return (_jsxs("div", { "data-slot": "page-header-row", className: "between", children: [heading, _jsx("div", { "data-slot": "page-header-actions", className: "row-wrap", children: actions })] }));
+}
+function PageHeaderTitle({ className, asChild = false, ...props }) {
+    const Comp = asChild ? Slot.Root : "h1";
+    return (_jsx(Comp, { "data-slot": "page-header-title", className: cn("t-h1", className), ...props }));
+}
+function PageHeaderDescription({ className, ...props }) {
+    return (_jsx("p", { "data-slot": "page-header-description", className: cn("muted t-label", className), ...props }));
+}
+export { PageHeader, PageHeaderTitle, PageHeaderDescription };

package/dist/pagination.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { Button } from "./button.js";
+declare function Pagination({ className, ...props }: React.ComponentProps<"nav">): React.JSX.Element;
+declare function PaginationPrevious({ children, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
+declare function PaginationNext({ children, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
+declare function PaginationPage({ active, ...props }: React.ComponentProps<typeof Button> & {
+    active?: boolean;
+}): React.JSX.Element;
+declare function PaginationEllipsis({ className, children, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+export { Pagination, PaginationPrevious, PaginationNext, PaginationPage, PaginationEllipsis, };

package/dist/pagination.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { clsx as cn } from "clsx";
+import { Button } from "./button.js";
+// Controls are Buttons by default. For URL-addressable pages, pass asChild and
+// render the product's link: <PaginationPage asChild><a href="?page=2" /></…>.
+function Pagination({ className, ...props }) {
+    return (_jsx("nav", { "data-slot": "pagination", "aria-label": "Pagination", className: cn("pagination", className), ...props }));
+}
+function PaginationPrevious({ children, ...props }) {
+    return (_jsx(Button, { "data-slot": "pagination-previous", size: "sm", ...props, children: children ?? "Previous" }));
+}
+function PaginationNext({ children, ...props }) {
+    return (_jsx(Button, { "data-slot": "pagination-next", size: "sm", ...props, children: children ?? "Next" }));
+}
+function PaginationPage({ active = false, ...props }) {
+    return (_jsx(Button, { "data-slot": "pagination-page", size: "sm", "aria-current": active ? "page" : undefined, ...props }));
+}
+function PaginationEllipsis({ className, children, ...props }) {
+    return (_jsx("span", { "data-slot": "pagination-ellipsis", "aria-hidden": "true", className: cn("muted", className), ...props, children: children ?? "..." }));
+}
+export { Pagination, PaginationPrevious, PaginationNext, PaginationPage, PaginationEllipsis, };

package/dist/popover.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { Popover as PopoverPrimitive } from "radix-ui";
+declare function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>): React.JSX.Element;
+declare function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>): React.JSX.Element;
+declare function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>): React.JSX.Element;
+declare function PopoverClose({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Close>): React.JSX.Element;
+declare function PopoverContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>): React.JSX.Element;
+export { Popover, PopoverTrigger, PopoverAnchor, PopoverClose, PopoverContent, };

package/dist/popover.js

@@ -0,0 +1,21 @@
+// Adapted from shadcn/ui new-york-v4. See ../SHADCN-LICENSE.
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { clsx as cn } from "clsx";
+import { Popover as PopoverPrimitive } from "radix-ui";
+function Popover({ ...props }) {
+    return _jsx(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
+}
+function PopoverTrigger({ ...props }) {
+    return _jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+function PopoverAnchor({ ...props }) {
+    return _jsx(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });
+}
+function PopoverClose({ ...props }) {
+    return _jsx(PopoverPrimitive.Close, { "data-slot": "popover-close", ...props });
+}
+function PopoverContent({ className, align = "start", sideOffset = 4, ...props }) {
+    return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { "data-slot": "popover-content", align: align, sideOffset: sideOffset, className: cn("kiso-react-popover kiso-react-floating", className), ...props }) }));
+}
+export { Popover, PopoverTrigger, PopoverAnchor, PopoverClose, PopoverContent, };

package/dist/search.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+declare function Search({ className, containerClassName, ...props }: React.ComponentProps<"input"> & {
+    containerClassName?: string;
+}): React.JSX.Element;
+export { Search };

package/dist/search.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { clsx as cn } from "clsx";
+import { Input } from "./input.js";
+// Filters a collection that is already on screen. Global commands are
+// CommandPalette; a single field is Input.
+function Search({ className, containerClassName, ...props }) {
+    return (_jsxs("div", { "data-slot": "search", className: cn("input-group", containerClassName), children: [_jsxs("svg", { className: "icon", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "aria-hidden": "true", children: [_jsx("circle", { cx: "7", cy: "7", r: "4.5" }), _jsx("path", { d: "m10.5 10.5 3 3" })] }), _jsx(Input, { type: "search", className: className, ...props })] }));
+}
+export { Search };

package/dist/select.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { Select as SelectPrimitive } from "radix-ui";
+declare function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>): React.JSX.Element;
+declare function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>): React.JSX.Element;
+declare function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>): React.JSX.Element;
+declare function SelectTrigger({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Trigger>): React.JSX.Element;
+declare function SelectContent({ className, children, position, sideOffset, ...props }: React.ComponentProps<typeof SelectPrimitive.Content>): React.JSX.Element;
+declare function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>): React.JSX.Element;
+declare function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>): React.JSX.Element;
+declare function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>): React.JSX.Element;
+export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, };

package/dist/select.js

@@ -0,0 +1,30 @@
+// Adapted from shadcn/ui new-york-v4. See ../SHADCN-LICENSE.
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { clsx as cn } from "clsx";
+import { Select as SelectPrimitive } from "radix-ui";
+function Select({ ...props }) {
+    return _jsx(SelectPrimitive.Root, { "data-slot": "select", ...props });
+}
+function SelectGroup({ ...props }) {
+    return _jsx(SelectPrimitive.Group, { "data-slot": "select-group", ...props });
+}
+function SelectValue({ ...props }) {
+    return _jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
+}
+function SelectTrigger({ className, ...props }) {
+    return (_jsx(SelectPrimitive.Trigger, { "data-slot": "select-trigger", className: cn("select", className), ...props }));
+}
+function SelectContent({ className, children, position = "popper", sideOffset = 4, ...props }) {
+    return (_jsx(SelectPrimitive.Portal, { children: _jsx(SelectPrimitive.Content, { "data-slot": "select-content", position: position, sideOffset: sideOffset, className: cn("menu kiso-react-floating", className), ...props, children: _jsx(SelectPrimitive.Viewport, { "data-slot": "select-viewport", children: children }) }) }));
+}
+function SelectLabel({ className, ...props }) {
+    return (_jsx(SelectPrimitive.Label, { "data-slot": "select-label", className: cn("menu-label t-caps", className), ...props }));
+}
+function SelectItem({ className, children, ...props }) {
+    return (_jsxs(SelectPrimitive.Item, { "data-slot": "select-item", className: cn("menu-item", className), ...props, children: [_jsx(SelectPrimitive.ItemText, { children: children }), _jsx(SelectPrimitive.ItemIndicator, { "data-slot": "select-item-indicator", "aria-hidden": "true", children: _jsx("svg", { className: "icon icon-sm", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", children: _jsx("path", { d: "m3 8 3.5 3.5L13 5" }) }) })] }));
+}
+function SelectSeparator({ className, ...props }) {
+    return (_jsx(SelectPrimitive.Separator, { "data-slot": "select-separator", className: cn("menu-separator", className), ...props }));
+}
+export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, };

package/dist/separator.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { Separator as SeparatorPrimitive } from "radix-ui";
+declare function Separator({ className, orientation, decorative, ...props }: React.ComponentProps<typeof SeparatorPrimitive.Root>): React.JSX.Element;
+export { Separator };

package/dist/separator.js

@@ -0,0 +1,9 @@
+// Adapted from shadcn/ui new-york-v4. See ../SHADCN-LICENSE.
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { clsx as cn } from "clsx";
+import { Separator as SeparatorPrimitive } from "radix-ui";
+function Separator({ className, orientation = "horizontal", decorative = true, ...props }) {
+    return (_jsx(SeparatorPrimitive.Root, { "data-slot": "separator", decorative: decorative, orientation: orientation, className: cn(orientation === "vertical" ? "separator-v" : "separator", className), ...props }));
+}
+export { Separator };

package/dist/sidebar.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+declare function Sidebar({ className, ...props }: React.ComponentProps<"aside">): React.JSX.Element;
+declare function SidebarHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function SidebarBody({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function SidebarFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { Sidebar, SidebarHeader, SidebarBody, SidebarFooter };

package/dist/sidebar.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { clsx as cn } from "clsx";
+// Sidebar is layout. Its destinations are Navigation children, so it holds no
+// route, no active item, and no disclosure state of its own.
+function Sidebar({ className, ...props }) {
+    return (_jsx("aside", { "data-slot": "sidebar", className: cn("sidebar", className), ...props }));
+}
+function SidebarHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "sidebar-header", className: cn("sidebar-header", className), ...props }));
+}
+function SidebarBody({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "sidebar-body", className: cn("sidebar-body", className), ...props }));
+}
+function SidebarFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "sidebar-footer", className: cn("sidebar-footer", className), ...props }));
+}
+export { Sidebar, SidebarHeader, SidebarBody, SidebarFooter };

package/dist/skeleton.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const skeletonVariants: (props?: ({
+    variant?: "block" | "circle" | "text" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Skeleton({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof skeletonVariants>): React.JSX.Element;
+export { Skeleton, skeletonVariants };

package/dist/skeleton.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { clsx as cn } from "clsx";
+const skeletonVariants = cva("skeleton", {
+    variants: {
+        variant: { text: "skeleton-text", block: "", circle: "skeleton-circle" },
+    },
+    defaultVariants: { variant: "text" },
+});
+// The loading region owns aria-busy and the accessible label; each placeholder
+// is decorative.
+function Skeleton({ className, variant = "text", ...props }) {
+    return (_jsx("div", { "data-slot": "skeleton", "data-variant": variant, "aria-hidden": "true", className: cn(skeletonVariants({ variant }), className), ...props }));
+}
+export { Skeleton, skeletonVariants };

package/dist/spinner.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const spinnerVariants: (props?: ({
+    size?: "lg" | "md" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Spinner({ className, size, label, ...props }: React.ComponentProps<"span"> & VariantProps<typeof spinnerVariants> & {
+    label?: string;
+}): React.JSX.Element;
+export { Spinner, spinnerVariants };

package/dist/spinner.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { clsx as cn } from "clsx";
+const spinnerVariants = cva("spinner", {
+    variants: { size: { sm: "spinner-sm", md: "", lg: "spinner-lg" } },
+    defaultVariants: { size: "md" },
+});
+// Without a label the Spinner is decorative: its wait is announced by the
+// Button, region, or status text around it.
+function Spinner({ className, size = "md", label, ...props }) {
+    return (_jsx("span", { "data-slot": "spinner", "data-size": size, className: cn(spinnerVariants({ size }), className), ...(label
+            ? { role: "status", "aria-label": label }
+            : { "aria-hidden": true }), ...props }));
+}
+export { Spinner, spinnerVariants };

package/dist/split.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+declare function Split({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function Pane({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function Splitter({ className, defaultSize, min, max, step, onSizeChange, onPointerDown, onPointerMove, onLostPointerCapture, onKeyDown, "aria-label": ariaLabel, ...props }: React.ComponentProps<"div"> & {
+    defaultSize?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    onSizeChange?: (size: number) => void;
+}): React.JSX.Element;
+export { Split, Pane, Splitter };

package/dist/split.js

@@ -0,0 +1,64 @@
+// Adapted from shadcn/ui new-york-v4. See ../SHADCN-LICENSE.
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { clsx as cn } from "clsx";
+import { useIsomorphicLayoutEffect } from "./use-isomorphic-layout-effect.js";
+function Split({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "split", className: cn("split", className), ...props }));
+}
+function Pane({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "pane", className: cn("pane", className), ...props }));
+}
+/* The divider owns the size so that dropping one between two panes is the
+   whole setup — no state to lift for a drag. Where it puts that size is what
+   `.split > .pane` already expects: `flex-basis` on the pane before it.
+   `onSizeChange` reports the percentage for anyone who wants to persist it. */
+function Splitter({ className, defaultSize = 50, min = 25, max = 75, step = 2, onSizeChange, onPointerDown, onPointerMove, onLostPointerCapture, onKeyDown, "aria-label": ariaLabel = "Resize panes", ...props }) {
+    const ref = React.useRef(null);
+    const [size, setSize] = React.useState(defaultSize);
+    const [dragging, setDragging] = React.useState(false);
+    useIsomorphicLayoutEffect(() => {
+        const pane = ref.current?.previousElementSibling;
+        if (pane instanceof HTMLElement)
+            pane.style.flexBasis = `${size}%`;
+    }, [size]);
+    function resize(next) {
+        const value = Math.min(max, Math.max(min, next));
+        if (value === size)
+            return;
+        setSize(value);
+        onSizeChange?.(value);
+    }
+    return (_jsx("div", { ref: ref, role: "separator", tabIndex: 0, "aria-orientation": "vertical", "aria-label": ariaLabel, "aria-valuenow": Math.round(size), "aria-valuemin": min, "aria-valuemax": max, "data-slot": "splitter", className: cn("splitter", dragging && "dragging", className), ...props, onPointerDown: (event) => {
+            onPointerDown?.(event);
+            event.currentTarget.setPointerCapture(event.pointerId);
+            setDragging(true);
+        }, onPointerMove: (event) => {
+            onPointerMove?.(event);
+            if (!dragging)
+                return;
+            const box = event.currentTarget.parentElement?.getBoundingClientRect();
+            if (box)
+                resize(((event.clientX - box.left) / box.width) * 100);
+        }, 
+        /* Covers the pointer being released and the drag being cancelled. */
+        onLostPointerCapture: (event) => {
+            onLostPointerCapture?.(event);
+            setDragging(false);
+        }, onKeyDown: (event) => {
+            onKeyDown?.(event);
+            if (event.key === "ArrowLeft")
+                resize(size - step);
+            else if (event.key === "ArrowRight")
+                resize(size + step);
+            else if (event.key === "Home")
+                resize(min);
+            else if (event.key === "End")
+                resize(max);
+            else
+                return;
+            event.preventDefault();
+        } }));
+}
+export { Split, Pane, Splitter };

package/dist/stat.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare function Stat({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function StatHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function StatLabel({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function StatValue({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function StatFoot({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare const statDeltaVariants: (props?: ({
+    variant?: "danger" | "info" | "neutral" | "success" | "warning" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function StatDelta({ className, variant, ...props }: React.ComponentProps<"span"> & VariantProps<typeof statDeltaVariants>): React.JSX.Element;
+export { Stat, StatHeader, StatLabel, StatValue, StatFoot, StatDelta, statDeltaVariants, };

package/dist/stat.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { clsx as cn } from "clsx";
+function Stat({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "stat", className: cn("stat", className), ...props }));
+}
+/* The tile puts its label and its delta on one line. */
+function StatHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "stat-header", className: cn("between", className), ...props }));
+}
+function StatLabel({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "stat-label", className: cn("stat-label", className), ...props }));
+}
+function StatValue({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "stat-value", className: cn("stat-value", className), ...props }));
+}
+function StatFoot({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "stat-foot", className: cn("stat-foot", className), ...props }));
+}
+const statDeltaVariants = cva("badge badge-outline stat-delta", {
+    variants: { variant: {
+            neutral: "", info: "info", success: "success",
+            warning: "warning", danger: "danger",
+        } },
+    defaultVariants: { variant: "neutral" },
+});
+/* A slot rather than a prop: the direction arrow, the number and its unit are
+   content, and only their colour is the component's business. */
+function StatDelta({ className, variant = "neutral", ...props }) {
+    return (_jsx("span", { "data-slot": "stat-delta", "data-variant": variant, className: cn(statDeltaVariants({ variant }), className), ...props }));
+}
+export { Stat, StatHeader, StatLabel, StatValue, StatFoot, StatDelta, statDeltaVariants, };