@momoi-labs/kiso-react 0.2.0 → 0.4.0

package/README.md

@@ -11,7 +11,7 @@ Import the stylesheet once, before application overrides:
 
 ```tsx
 import '@momoi-labs/kiso-react/styles.css';
-import { Button, FormField } from '@momoi-labs/kiso-react';
+import { Button, FormField, Textarea } from '@momoi-labs/kiso-react';
 
 export function ApplicationForm() {
   return (
@@ -23,6 +23,15 @@ export function ApplicationForm() {
 }
 ```
 
+FormField renders an Input by default. Pass one control as its child when the
+field uses another input, and add `error` for wired validation feedback:
+
+```tsx
+<FormField label="Compose file" hint="Docker Compose YAML." error={error}>
+  <Textarea rows={12} />
+</FormField>
+```
+
 `@momoi-labs/kiso` is a regular dependency. The stylesheet imports its tokens
 and component layer; consumers do not need to import those again. React and
 React DOM are peer dependencies supplied by the application. No Tailwind setup
@@ -30,21 +39,116 @@ is required. The Kiso base stylesheet includes global styles and Google Fonts.
 
 ## Available components
 
+Controls and forms
+
 - Button and `buttonVariants`; Badge and `badgeVariants`.
-- BrandMark and TerminalIcon, the momoi-labs terminal prompt glyph.
-- Input, Label, Checkbox, and FormField.
+- Input, Textarea, Search, Label, Checkbox, Switch, and FormField.
+- Select, SelectTrigger, SelectValue, SelectContent, SelectItem, SelectGroup,
+  SelectLabel, and SelectSeparator.
+- ValidationMessage, for a field error referenced by `aria-describedby`.
+
+Data and structure
+
 - Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter.
 - Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption.
-- AlertDialog, Trigger, Portal, Overlay, Content, Header, Footer, Title,
-  Description, Action, and Cancel (each prefixed with `AlertDialog`).
+- EmptyState, EmptyStateIcon, EmptyStateTitle, EmptyStateDescription, EmptyStateActions.
+- Header, PageHeader, PageHeaderTitle, PageHeaderDescription.
+- Sidebar, SidebarHeader, SidebarBody, SidebarFooter.
+- AppShell and AppShellMain, the low-level columns of a console.
+- ApplicationShell, the standard brand, navigation, header, footer, and page
+  arrangement.
+- Split, Pane, and Splitter, a list-detail layout with a resizable divider.
+- LogView, LogViewLine, LogViewTime, and LogViewLevel.
+- Stat, StatHeader, StatLabel, StatValue, StatFoot, and StatDelta.
+- KV, KVKey, and KVValue, a description list of fixed facts.
+- Separator, horizontal or vertical, and Dot and `dotVariants`.
+- BrandMark and TerminalIcon, the momoi-labs terminal prompt glyph.
+
+Navigation
+
+- Navigation, NavigationGroup, NavigationList, NavigationItem, NavigationLink.
+- Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage,
+  BreadcrumbSeparator.
+- Link and `linkVariants`; Pagination, PaginationPrevious, PaginationNext,
+  PaginationPage, PaginationEllipsis.
+- Tabs, TabsList, TabsTrigger, TabsContent.
 - ThemeSelector, a controlled selector. The application owns theme persistence
   and applies `data-theme="light"` or `data-theme="dark"` to the document root.
   Remove the attribute for system mode.
 
+Feedback
+
+- Alert, AlertContent, AlertTitle, AlertDescription, and `alertVariants`.
+- Spinner, Skeleton, and their variants.
+- Toasts and `useToast`, for notifications raised from descendant event
+  handlers.
+- ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription,
+  ToastContent, ToastAction, ToastClose, for controlled composition.
+
+Overlays
+
+- Dialog, DialogTrigger, DialogContent, DialogHeader, DialogBody, DialogFooter,
+  DialogTitle, DialogDescription, DialogClose.
+- AlertDialog, Trigger, Portal, Overlay, Content, Header, Footer, Title,
+  Description, Action, and Cancel (each prefixed with `AlertDialog`).
+- Drawer, with `placement="bottom"` or `"side"`, and the matching `Drawer*` parts.
+- Popover, DropdownMenu, and Tooltip, with their trigger and content parts.
+- CommandPalette, CommandPaletteInput, CommandPaletteList, CommandPaletteGroup,
+  CommandPaletteItem, CommandPaletteEmpty.
+
 Button variants are `default`, `primary`, `destructive`, and `ghost`; sizes are
 `xs`, `sm`, `md`, and `lg`. Badge variants are `neutral`, `info`, `success`,
-`warning`, and `danger`. Native props and refs pass through to the underlying
-control. FormField adds `label` and optional `hint` to Input's props.
+`warning`, and `danger`. Alert and Toast variants follow their contracts:
+`info` / `success` / `warning` / `error`, and `neutral` / `success` / `warning`
+/ `error`. Native props and refs pass through to the underlying control.
+FormField adds `label`, optional `hint`, and optional `error` to Input's props.
+With one child, it wires those parts to that control instead of rendering an
+Input. Use `fieldClassName` to style the wrapper.
+
+Wrap an application in Toasts and call `useToast()` below it. The returned
+function takes a variant, title, and optional body:
+
+```tsx
+const notify = useToast();
+notify('error', `Could not stop ${app.name}`, details);
+```
+
+ApplicationShell takes navigation groups as data. Destinations keep routing in
+the product through `{ href, active, onClick? }`; the package owns the repeated
+Sidebar, Navigation, Header, and main arrangement.
+
+Navigation, Sidebar, and Link know nothing about routing. Mark the current
+destination with `active`, and pass `asChild` to render a router's own link
+component. CommandPalette is controlled: it owns the overlay, focus, and its
+Arrow / Enter / Escape keys, while the product owns the shortcut that opens it
+and the filtering that decides which items to render.
+
+Dot variants match Badge's: `neutral`, `info`, `success`, `warning`, and
+`danger`, plus `size` and `pulse`. A `neutral` Dot inherits `currentColor`, so
+it takes the colour of the row it sits in. StatDelta takes the same variants.
+
+Splitter owns the pane size, so dropping one between two Panes is the whole
+setup. It writes a percentage to the pane before it, starts at `defaultSize`
+and stays between `min` and `max`, and reports changes through `onSizeChange`.
+It is a real `separator`: focus it and the arrow keys move it by `step`, Home
+and End take it to the bounds.
+
+LogView owns its scroller and follows the tail. New lines pin the view to the
+end until the reader scrolls away, and returning to the end resumes. Drive that
+from a control of your own with `follow` and `onFollowChange`, or scroll to the
+end imperatively through the ref:
+
+```tsx
+const log = useRef<LogViewHandle>(null);
+
+<LogView ref={log} follow={follow} onFollowChange={setFollow}>
+  <LogViewLine>
+    <LogViewTime>09:41:03.901</LogViewTime>
+    <LogViewLevel level="warn">WARN </LogViewLevel> redis unavailable
+  </LogViewLine>
+</LogView>
+<Button onClick={() => log.current?.scrollToBottom()}>Jump to end</Button>
+```
 
 Compose confirmations with AlertDialogTitle and AlertDialogDescription inside
 AlertDialogContent, plus AlertDialogCancel and AlertDialogAction. For asynchronous
@@ -68,15 +172,12 @@ import { BrandMark, TerminalIcon } from '@momoi-labs/kiso-react';
 </div>
 ```
 
-The gallery covers all 36 Kiso catalog entries. Entries labelled Composition
-preview are examples, not additional exports from this package. CommandPalette
-is a layout preview without complete command keyboard behavior.
-
 ## Development
 
-From the repository root, run `npm ci`, then `npm run prototype`.
-The console opens at <http://127.0.0.1:5173/#overview> and the component gallery at
-<http://127.0.0.1:5173/#components>. All console data is simulated in memory.
+From the repository root, run `npm ci`, then `npm run prototype`. The component
+gallery opens at <http://127.0.0.1:5173/#components> and covers all 43 Kiso
+catalog entries, each rendering the component this package exports. Its sample
+data is simulated in memory.
 
 `npm run check:react` builds the demo and tests packed npm artifacts in an
 isolated consumer, including TypeScript, CSS bundling, and rendered semantics.

package/dist/alert.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const alertVariants: (props?: ({
+    variant?: "error" | "info" | "success" | "warning" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Alert({ className, variant, role, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>): React.JSX.Element;
+declare function AlertContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertTitle({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
+declare function AlertDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
+export { Alert, AlertContent, AlertTitle, AlertDescription, alertVariants };

package/dist/alert.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { clsx as cn } from "clsx";
+const alertVariants = cva("alert", {
+    variants: {
+        variant: {
+            info: "alert-info",
+            success: "alert-success",
+            warning: "alert-warning",
+            error: "alert-danger",
+        },
+    },
+    defaultVariants: { variant: "info" },
+});
+function Alert({ className, variant = "info", role, ...props }) {
+    return (_jsx("div", { "data-slot": "alert", "data-variant": variant, role: role ?? (variant === "error" ? "alert" : "status"), className: cn(alertVariants({ variant }), className), ...props }));
+}
+function AlertContent({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-content", className: cn("stack-xs grow", className), ...props }));
+}
+function AlertTitle({ className, ...props }) {
+    return (_jsx("p", { "data-slot": "alert-title", className: cn("alert-title", className), ...props }));
+}
+function AlertDescription({ className, ...props }) {
+    return (_jsx("p", { "data-slot": "alert-description", className: cn("alert-body", className), ...props }));
+}
+export { Alert, AlertContent, AlertTitle, AlertDescription, alertVariants };

package/dist/app-shell.d.ts

@@ -0,0 +1,28 @@
+import * as React from "react";
+declare function AppShell({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AppShellMain({ className, ...props }: React.ComponentProps<"main">): React.JSX.Element;
+type ApplicationShellDestination = {
+    href: string;
+    active?: boolean;
+    onClick?: () => void;
+    label: React.ReactNode;
+    leading?: React.ReactNode;
+    trailing?: React.ReactNode;
+};
+type ApplicationShellGroup = {
+    label?: string;
+    destinations: readonly ApplicationShellDestination[];
+    empty?: React.ReactNode;
+};
+type ApplicationShellProps = Omit<React.ComponentProps<typeof AppShell>, "children"> & {
+    brand: React.ReactNode;
+    primaryAction?: React.ReactNode;
+    navigation: readonly ApplicationShellGroup[];
+    navigationLabel?: string;
+    footer?: React.ReactNode;
+    header?: React.ReactNode;
+    children: React.ReactNode;
+};
+declare function ApplicationShell({ brand, primaryAction, navigation, navigationLabel, footer, header, children, ...props }: ApplicationShellProps): React.JSX.Element;
+export { AppShell, AppShellMain, ApplicationShell };
+export type { ApplicationShellDestination, ApplicationShellGroup, ApplicationShellProps, };

package/dist/app-shell.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { clsx as cn } from "clsx";
+import { Header } from "./header.js";
+import { Navigation, NavigationGroup, NavigationItem, NavigationLink, NavigationList, } from "./navigation.js";
+import { Sidebar, SidebarBody, SidebarFooter, SidebarHeader } from "./sidebar.js";
+function AppShell({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "app-shell", className: cn("app-shell", className), ...props }));
+}
+/* `grow` carries the `min-width: 0` the main column needs so a wide table or
+   log line cannot push the sidebar off the screen. */
+function AppShellMain({ className, ...props }) {
+    return (_jsx("main", { "data-slot": "app-shell-main", className: cn("grow", className), ...props }));
+}
+function ApplicationShell({ brand, primaryAction, navigation, navigationLabel = "Primary", footer, header, children, ...props }) {
+    return (_jsxs(AppShell, { ...props, children: [_jsxs(Sidebar, { children: [_jsxs(SidebarHeader, { children: [brand, primaryAction] }), _jsx(SidebarBody, { children: _jsx(Navigation, { "aria-label": navigationLabel, children: navigation.map((group, groupIndex) => (_jsx(NavigationGroup, { label: group.label, children: group.destinations.length > 0 ? (_jsx(NavigationList, { children: group.destinations.map((destination, destinationIndex) => (_jsx(NavigationItem, { children: _jsxs(NavigationLink, { href: destination.href, active: destination.active, onClick: (event) => {
+                                                if (!destination.onClick)
+                                                    return;
+                                                event.preventDefault();
+                                                destination.onClick();
+                                            }, children: [destination.leading, _jsx("span", { className: "grow truncate", children: destination.label }), destination.trailing] }) }, `${destination.href}-${destinationIndex}`))) })) : group.empty }, group.label ?? groupIndex))) }) }), footer && _jsx(SidebarFooter, { children: footer })] }), _jsxs(AppShellMain, { children: [header && _jsx(Header, { children: header }), children] })] }));
+}
+export { AppShell, AppShellMain, ApplicationShell };

package/dist/breadcrumb.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+declare function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">): React.JSX.Element;
+declare function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">): React.JSX.Element;
+declare function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
+declare function BreadcrumbLink({ className, asChild, ...props }: React.ComponentProps<"a"> & {
+    asChild?: boolean;
+}): React.JSX.Element;
+declare function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function BreadcrumbSeparator({ className, children, ...props }: React.ComponentProps<"li">): React.JSX.Element;
+export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, };

package/dist/breadcrumb.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { clsx as cn } from "clsx";
+import { Slot } from "radix-ui";
+function Breadcrumb({ className, ...props }) {
+    return (_jsx("nav", { "data-slot": "breadcrumb", "aria-label": "Breadcrumb", className: cn("", className), ...props }));
+}
+function BreadcrumbList({ className, ...props }) {
+    return (_jsx("ol", { "data-slot": "breadcrumb-list", className: cn("breadcrumb", className), ...props }));
+}
+function BreadcrumbItem({ className, ...props }) {
+    return (_jsx("li", { "data-slot": "breadcrumb-item", className: cn("", className), ...props }));
+}
+function BreadcrumbLink({ className, asChild = false, ...props }) {
+    const Comp = asChild ? Slot.Root : "a";
+    return (_jsx(Comp, { "data-slot": "breadcrumb-link", className: cn("", className), ...props }));
+}
+function BreadcrumbPage({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "breadcrumb-page", "aria-current": "page", className: cn("", className), ...props }));
+}
+function BreadcrumbSeparator({ className, children, ...props }) {
+    return (_jsx("li", { "data-slot": "breadcrumb-separator", "aria-hidden": "true", className: cn("sep", className), ...props, children: children ?? "/" }));
+}
+export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, };

package/dist/command-palette.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { Dialog as DialogPrimitive } from "radix-ui";
+declare function CommandPalette({ className, label, children, ...props }: React.ComponentProps<typeof DialogPrimitive.Root> & {
+    className?: string;
+    label?: string;
+}): React.JSX.Element;
+declare function CommandPaletteInput({ className, onKeyDown, ...props }: React.ComponentProps<"input">): React.JSX.Element;
+declare function CommandPaletteList({ className, "aria-label": ariaLabel, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CommandPaletteGroup({ className, heading, children, ...props }: React.ComponentProps<"div"> & {
+    heading: string;
+}): React.JSX.Element;
+declare function CommandPaletteItem({ className, disabled, onSelect, onClick, ...props }: React.ComponentProps<"div"> & {
+    disabled?: boolean;
+    onSelect?: () => void;
+}): React.JSX.Element;
+declare function CommandPaletteEmpty({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
+export { CommandPalette, CommandPaletteInput, CommandPaletteList, CommandPaletteGroup, CommandPaletteItem, CommandPaletteEmpty, };

package/dist/command-palette.js

@@ -0,0 +1,78 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { clsx as cn } from "clsx";
+import { Dialog as DialogPrimitive, VisuallyHidden } from "radix-ui";
+import { DialogOverlay, DialogPortal } from "./dialog.js";
+// The palette owns its overlay, focus, and in-palette keys. Matching is the
+// product's: render the items that match the query. The shortcut that opens it
+// is product chrome too, so the palette stays controlled.
+const CommandPaletteContext = React.createContext(null);
+function useCommandPalette() {
+    const context = React.useContext(CommandPaletteContext);
+    if (!context) {
+        throw new Error("CommandPalette parts must be used inside <CommandPalette>");
+    }
+    return context;
+}
+function items(list) {
+    return Array.from(list?.querySelectorAll('[data-slot="command-palette-item"]:not([aria-disabled="true"])') ?? []);
+}
+function CommandPalette({ className, label = "Command palette", children, ...props }) {
+    const [activeId, setActiveId] = React.useState("");
+    const listId = React.useId();
+    const listRef = React.useRef(null);
+    return (_jsx(DialogPrimitive.Root, { "data-slot": "command-palette", ...props, children: _jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { "aria-modal": "true", "data-slot": "command-palette-content", className: cn("palette kiso-react-palette", className), children: [_jsx(VisuallyHidden.Root, { asChild: true, children: _jsx(DialogPrimitive.Title, { children: label }) }), _jsx(CommandPaletteContext.Provider, { value: { activeId, setActiveId, listId, listRef }, children: children })] })] }) }));
+}
+function CommandPaletteInput({ className, onKeyDown, ...props }) {
+    const { activeId, setActiveId, listId, listRef } = useCommandPalette();
+    // The query changes the list under the highlight, so re-anchor it every
+    // render rather than tracking an index that the filter invalidates.
+    React.useEffect(() => {
+        const visible = items(listRef.current);
+        if (!visible.some((item) => item.id === activeId)) {
+            setActiveId(visible[0]?.id ?? "");
+        }
+    });
+    function move(event) {
+        const visible = items(listRef.current);
+        const index = visible.findIndex((item) => item.id === activeId);
+        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+            event.preventDefault();
+            if (!visible.length)
+                return;
+            const step = event.key === "ArrowDown" ? 1 : -1;
+            const next = visible[(index + step + visible.length) % visible.length];
+            setActiveId(next.id);
+            next.scrollIntoView({ block: "nearest" });
+        }
+        else if (event.key === "Enter") {
+            event.preventDefault();
+            visible[index]?.click();
+        }
+        onKeyDown?.(event);
+    }
+    return (_jsxs("div", { className: "palette-input", "data-slot": "command-palette-input", children: [_jsxs("svg", { className: "icon muted", 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", { role: "combobox", "aria-expanded": "true", "aria-controls": listId, "aria-activedescendant": activeId || undefined, "aria-autocomplete": "list", autoComplete: "off", autoFocus: true, onKeyDown: move, className: className, ...props })] }));
+}
+function CommandPaletteList({ className, "aria-label": ariaLabel = "Commands", ...props }) {
+    const { listId, listRef } = useCommandPalette();
+    return (_jsx("div", { id: listId, ref: listRef, role: "listbox", "aria-label": ariaLabel, "data-slot": "command-palette-list", className: cn("palette-list", className), ...props }));
+}
+function CommandPaletteGroup({ className, heading, children, ...props }) {
+    const headingId = React.useId();
+    return (_jsxs("div", { role: "group", "aria-labelledby": headingId, "data-slot": "command-palette-group", className: cn("", className), ...props, children: [_jsx("p", { id: headingId, className: "t-caps menu-label", children: heading }), children] }));
+}
+function CommandPaletteItem({ className, disabled = false, onSelect, onClick, ...props }) {
+    const id = React.useId();
+    const { activeId, setActiveId } = useCommandPalette();
+    return (_jsx("div", { id: id, role: "option", "data-slot": "command-palette-item", "aria-selected": activeId === id, "aria-disabled": disabled || undefined, className: cn("menu-item", className), onPointerMove: () => !disabled && setActiveId(id), onClick: (event) => {
+            if (disabled)
+                return;
+            onSelect?.();
+            onClick?.(event);
+        }, ...props }));
+}
+function CommandPaletteEmpty({ className, ...props }) {
+    return (_jsx("p", { "data-slot": "command-palette-empty", className: cn("menu-item muted", className), ...props }));
+}
+export { CommandPalette, CommandPaletteInput, CommandPaletteList, CommandPaletteGroup, CommandPaletteItem, CommandPaletteEmpty, };

package/dist/dialog.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { Dialog as DialogPrimitive } from "radix-ui";
+declare function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): React.JSX.Element;
+declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): React.JSX.Element;
+declare function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): React.JSX.Element;
+declare function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): React.JSX.Element;
+declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): React.JSX.Element;
+declare function DialogContent({ className, children, ...props }: React.ComponentProps<typeof DialogPrimitive.Content>): React.JSX.Element;
+declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function DialogBody({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function DialogFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): React.JSX.Element;
+declare function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): React.JSX.Element;
+export { Dialog, DialogTrigger, DialogPortal, DialogClose, DialogOverlay, DialogContent, DialogHeader, DialogBody, DialogFooter, DialogTitle, DialogDescription, };

package/dist/dialog.js

@@ -0,0 +1,39 @@
+// 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 { Dialog as DialogPrimitive } from "radix-ui";
+function Dialog({ ...props }) {
+    return _jsx(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+}
+function DialogTrigger({ ...props }) {
+    return _jsx(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
+}
+function DialogPortal({ ...props }) {
+    return _jsx(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogClose({ ...props }) {
+    return _jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
+}
+function DialogOverlay({ className, ...props }) {
+    return (_jsx(DialogPrimitive.Overlay, { "data-slot": "dialog-overlay", className: cn("kiso-react-overlay", className), ...props }));
+}
+function DialogContent({ className, children, ...props }) {
+    return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsx(DialogPrimitive.Content, { "aria-modal": "true", "data-slot": "dialog-content", className: cn("kiso-react-dialog marked", className), ...props, children: children })] }));
+}
+function DialogHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "dialog-header", className: cn("dialog-header", className), ...props }));
+}
+function DialogBody({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "dialog-body", className: cn("dialog-body", className), ...props }));
+}
+function DialogFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "dialog-footer", className: cn("dialog-footer", className), ...props }));
+}
+function DialogTitle({ className, ...props }) {
+    return (_jsx(DialogPrimitive.Title, { "data-slot": "dialog-title", className: cn("t-h3", className), ...props }));
+}
+function DialogDescription({ className, ...props }) {
+    return (_jsx(DialogPrimitive.Description, { "data-slot": "dialog-description", className: cn("muted", className), ...props }));
+}
+export { Dialog, DialogTrigger, DialogPortal, DialogClose, DialogOverlay, DialogContent, DialogHeader, DialogBody, DialogFooter, DialogTitle, DialogDescription, };

package/dist/dot.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const dotVariants: (props?: ({
+    variant?: "danger" | "info" | "neutral" | "success" | "warning" | null | undefined;
+    size?: "lg" | "md" | null | undefined;
+    pulse?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Dot({ className, variant, size, pulse, ...props }: React.ComponentProps<"span"> & VariantProps<typeof dotVariants>): React.JSX.Element;
+export { Dot, dotVariants };

package/dist/dot.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { clsx as cn } from "clsx";
+/* `.dot` paints itself with `currentColor`, so the utility classes that carry
+   status colour double as the variant. Spelled as a `variant` prop because
+   that is how Badge already says the same thing. */
+const dotVariants = cva("dot", {
+    variants: {
+        variant: {
+            neutral: "", info: "info", success: "success",
+            warning: "warning", danger: "danger",
+        },
+        size: { md: "", lg: "dot-lg" },
+        pulse: { true: "dot-pulse", false: "" },
+    },
+    defaultVariants: { variant: "neutral", size: "md", pulse: false },
+});
+function Dot({ className, variant = "neutral", size = "md", pulse = false, ...props }) {
+    return (_jsx("span", { "data-slot": "dot", "data-variant": variant, className: cn(dotVariants({ variant, size, pulse }), className), "aria-hidden": "true", ...props }));
+}
+export { Dot, dotVariants };

package/dist/drawer.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { Dialog as DialogPrimitive } from "radix-ui";
+import { DialogBody, DialogClose, DialogFooter, DialogHeader, DialogTitle, DialogDescription } from "./dialog.js";
+declare function Drawer({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): React.JSX.Element;
+declare function DrawerTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): React.JSX.Element;
+declare function DrawerContent({ className, placement, children, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
+    placement?: "bottom" | "side";
+}): React.JSX.Element;
+export { Drawer, DrawerTrigger, DrawerContent, DialogClose as DrawerClose, DialogHeader as DrawerHeader, DialogBody as DrawerBody, DialogFooter as DrawerFooter, DialogTitle as DrawerTitle, DialogDescription as DrawerDescription, };

package/dist/drawer.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { clsx as cn } from "clsx";
+import { Dialog as DialogPrimitive } from "radix-ui";
+import { DialogBody, DialogClose, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogDescription, } from "./dialog.js";
+// A Drawer is a Dialog anchored to an edge: same task semantics, same
+// accessible name, different placement.
+function Drawer({ ...props }) {
+    return _jsx(DialogPrimitive.Root, { "data-slot": "drawer", ...props });
+}
+function DrawerTrigger({ ...props }) {
+    return _jsx(DialogPrimitive.Trigger, { "data-slot": "drawer-trigger", ...props });
+}
+function DrawerContent({ className, placement = "bottom", children, ...props }) {
+    return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsx(DialogPrimitive.Content, { "aria-modal": "true", "data-slot": "drawer-content", "data-placement": placement, className: cn("kiso-react-drawer marked", className), ...props, children: children })] }));
+}
+export { Drawer, DrawerTrigger, DrawerContent, DialogClose as DrawerClose, DialogHeader as DrawerHeader, DialogBody as DrawerBody, DialogFooter as DrawerFooter, DialogTitle as DrawerTitle, DialogDescription as DrawerDescription, };

package/dist/dropdown-menu.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+declare function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>): React.JSX.Element;
+declare function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): React.JSX.Element;
+declare function DropdownMenuContent({ className, sideOffset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>): React.JSX.Element;
+declare function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>): React.JSX.Element;
+declare function DropdownMenuItem({ className, variant, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+    variant?: "action" | "link" | "destructive";
+}): React.JSX.Element;
+declare function DropdownMenuLabel({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Label>): React.JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>): React.JSX.Element;
+declare function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, };

package/dist/dropdown-menu.js

@@ -0,0 +1,32 @@
+// 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 { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+function DropdownMenu({ ...props }) {
+    return _jsx(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuTrigger({ ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props }));
+}
+function DropdownMenuContent({ className, sideOffset = 4, ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.Content, { "data-slot": "dropdown-menu-content", sideOffset: sideOffset, className: cn("menu kiso-react-floating", className), ...props }) }));
+}
+function DropdownMenuGroup({ ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props }));
+}
+// `link` renders a real anchor through asChild, so open-in-new-tab keeps
+// working; `destructive` is the only colour an item may carry.
+function DropdownMenuItem({ className, variant = "action", ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Item, { "data-slot": "dropdown-menu-item", "data-variant": variant, className: cn("menu-item", variant === "destructive" && "is-danger", className), ...props }));
+}
+function DropdownMenuLabel({ className, ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Label, { "data-slot": "dropdown-menu-label", className: cn("menu-label t-caps", className), ...props }));
+}
+function DropdownMenuSeparator({ className, ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Separator, { "data-slot": "dropdown-menu-separator", className: cn("menu-separator", className), ...props }));
+}
+function DropdownMenuShortcut({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "dropdown-menu-shortcut", className: cn("kbd", className), ...props }));
+}
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, };

package/dist/empty-state.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const emptyStateVariants: (props?: ({
+    variant?: "first-run" | "informational" | "no-results" | null | undefined;
+    size?: "md" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function EmptyState({ className, variant, size, ...props }: React.ComponentProps<"div"> & VariantProps<typeof emptyStateVariants>): React.JSX.Element;
+declare function EmptyStateIcon({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function EmptyStateTitle({ className, asChild, ...props }: React.ComponentProps<"h3"> & {
+    asChild?: boolean;
+}): React.JSX.Element;
+declare function EmptyStateDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
+declare function EmptyStateActions({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { EmptyState, EmptyStateIcon, EmptyStateTitle, EmptyStateDescription, EmptyStateActions, emptyStateVariants, };

package/dist/empty-state.js

@@ -0,0 +1,30 @@
+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";
+// Emptiness is not an error: the variants change which action belongs here, not
+// the colour of the surface.
+const emptyStateVariants = cva("empty", {
+    variants: {
+        variant: { "first-run": "", "no-results": "", informational: "" },
+        size: { md: "", sm: "empty-sm" },
+    },
+    defaultVariants: { variant: "first-run", size: "md" },
+});
+function EmptyState({ className, variant = "first-run", size = "md", ...props }) {
+    return (_jsx("div", { "data-slot": "empty-state", "data-variant": variant, "data-size": size, className: cn(emptyStateVariants({ variant, size }), className), ...props }));
+}
+function EmptyStateIcon({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "empty-state-icon", "aria-hidden": "true", className: cn("empty-icon", className), ...props }));
+}
+function EmptyStateTitle({ className, asChild = false, ...props }) {
+    const Comp = asChild ? Slot.Root : "h3";
+    return (_jsx(Comp, { "data-slot": "empty-state-title", className: cn("t-h3", className), ...props }));
+}
+function EmptyStateDescription({ className, ...props }) {
+    return (_jsx("p", { "data-slot": "empty-state-description", className: cn("", className), ...props }));
+}
+function EmptyStateActions({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "empty-state-actions", className: cn("row-wrap", className), ...props }));
+}
+export { EmptyState, EmptyStateIcon, EmptyStateTitle, EmptyStateDescription, EmptyStateActions, emptyStateVariants, };