@momoi-labs/kiso-react 0.2.0 → 0.4.0

package/dist/form-field.d.ts

@@ -1,6 +1,16 @@
-import { type ComponentProps } from "react";
+import { type ComponentProps, type ReactElement, type ReactNode } from "react";
 import { Input } from "./input.js";
-export declare function FormField({ label, hint, id: providedId, "aria-describedby": describedBy, ...props }: ComponentProps<typeof Input> & {
-    label: string;
-    hint?: string;
-}): import("react").JSX.Element;
+type FormControlProps = {
+    id?: string;
+    "aria-describedby"?: string;
+    "aria-invalid"?: ComponentProps<"input">["aria-invalid"];
+};
+type FormFieldProps = Omit<ComponentProps<typeof Input>, "children"> & {
+    label: ReactNode;
+    hint?: ReactNode;
+    error?: ReactNode;
+    children?: ReactElement<FormControlProps>;
+    fieldClassName?: string;
+};
+export declare function FormField({ label, hint, error, children, fieldClassName, id: providedId, "aria-describedby": describedBy, "aria-invalid": invalid, ...props }: FormFieldProps): import("react").JSX.Element;
+export type { FormFieldProps };

package/dist/form-field.js

@@ -1,12 +1,25 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId } from "react";
+import { cloneElement, useId, } from "react";
 import { Input } from "./input.js";
 import { Label } from "./label.js";
-export function FormField({ label, hint, id: providedId, "aria-describedby": describedBy, ...props }) {
+import { ValidationMessage } from "./validation-message.js";
+function mergeDescriptions(...descriptions) {
+    const ids = descriptions.flatMap((description) => description?.split(/\s+/).filter(Boolean) ?? []);
+    return ids.length > 0 ? [...new Set(ids)].join(" ") : undefined;
+}
+export function FormField({ label, hint, error, children, fieldClassName, id: providedId, "aria-describedby": describedBy, "aria-invalid": invalid, ...props }) {
     const generatedId = useId();
-    const id = providedId ?? generatedId;
-    const description = [describedBy, hint ? `${id}-help` : undefined]
-        .filter(Boolean).join(" ") || undefined;
-    return (_jsxs("div", { className: "field", children: [_jsx(Label, { htmlFor: id, children: label }), _jsx(Input, { ...props, id: id, "aria-describedby": description }), hint && (_jsx("small", { className: "field-hint", id: `${id}-help`, children: hint }))] }));
+    const id = providedId ?? children?.props.id ?? generatedId;
+    const hintId = hint ? `${id}-help` : undefined;
+    const errorId = error ? `${id}-error` : undefined;
+    const description = mergeDescriptions(describedBy, children?.props["aria-describedby"], hintId, errorId);
+    const controlProps = {
+        id,
+        "aria-describedby": description,
+        "aria-invalid": error ? true : children?.props["aria-invalid"] ?? invalid,
+    };
+    return (_jsxs("div", { className: fieldClassName ? `field ${fieldClassName}` : "field", children: [_jsx(Label, { htmlFor: id, children: label }), children
+                ? cloneElement(children, controlProps)
+                : _jsx(Input, { ...props, ...controlProps }), hint && (_jsx("small", { className: "field-hint", id: hintId, children: hint })), error && _jsx(ValidationMessage, { id: errorId, children: error })] }));
 }

package/dist/header.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare function Header({ className, ...props }: React.ComponentProps<"header">): React.JSX.Element;
+export { Header };

package/dist/header.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { clsx as cn } from "clsx";
+// Shared product chrome: brand, Navigation, and global status or actions.
+// Location within the product is Breadcrumb, not Header.
+function Header({ className, ...props }) {
+    return (_jsx("header", { "data-slot": "header", className: cn("topbar", className), ...props }));
+}
+export { Header };

package/dist/index.d.ts

@@ -1,12 +1,43 @@
+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/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 };