@momoi-labs/kiso-react 0.4.1 → 0.5.0

package/README.md

@@ -46,6 +46,11 @@ Controls and forms
 - Input, Textarea, Search, Label, Checkbox, Switch, and FormField.
 - Select, SelectTrigger, SelectValue, SelectContent, SelectItem, SelectGroup,
   SelectLabel, and SelectSeparator.
+- ChipInput, ChipInputBox, ChipInputField, ChipInputList, ChipInputOption,
+  ChipInputEmpty, and the chip parts Chip, ChipScope, ChipName, ChipValue,
+  ChipOption, ChipOptionAdd, ChipRemove, for several structured values in one
+  field. Each chip reads as a call: scope, name, value, then one segment per
+  option as name=value or name=[a, b].
 - ValidationMessage, for a field error referenced by `aria-describedby`.
 
 Data and structure
@@ -176,7 +181,7 @@ import { BrandMark, TerminalIcon } from '@momoi-labs/kiso-react';
 ## Development
 
 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
+gallery opens at <http://127.0.0.1:5173/#components> and covers all 44 Kiso
 catalog entries, each rendering the component this package exports. Its sample
 data is simulated in memory.
 

package/dist/chip-input.d.ts

@@ -0,0 +1,43 @@
+import * as React from "react";
+declare function ChipInput({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function ChipInputBox({ className, disabled, onMouseDown, ...props }: React.ComponentProps<"div"> & {
+    disabled?: boolean;
+}): React.JSX.Element;
+declare function ChipInputField({ className, onKeyDown, onRemoveLast, ...props }: React.ComponentProps<"input"> & {
+    onRemoveLast?: () => void;
+}): React.JSX.Element;
+declare function ChipInputList({ className, "aria-label": ariaLabel, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function ChipInputOption({ className, disabled, onSelect, onClick, ...props }: React.ComponentProps<"div"> & {
+    disabled?: boolean;
+    onSelect?: () => void;
+}): React.JSX.Element;
+declare function ChipInputEmpty({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
+declare function Chip({ className, invalid, ...props }: React.ComponentProps<"span"> & {
+    invalid?: boolean;
+}): React.JSX.Element;
+declare function ChipScope({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function ChipName({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function EditableSegment({ slot, className, value, placeholder, display, onCommit, editable, editLabel, confirmLabel, maxWidth, ...props }: Omit<React.ComponentProps<"button">, "value"> & {
+    slot: string;
+    value: string;
+    placeholder?: string;
+    display?: React.ReactNode;
+    onCommit?: (value: string) => void;
+    editable?: boolean;
+    editLabel?: string;
+    confirmLabel?: string;
+    maxWidth?: number;
+}): React.JSX.Element;
+declare function ChipValue({ className, value, editLabel, confirmLabel, ...props }: Omit<React.ComponentProps<typeof EditableSegment>, "slot"> & {
+    value: string;
+}): React.JSX.Element;
+declare function ChipOption({ className, name, value, label, editLabel, confirmLabel, ...props }: Omit<React.ComponentProps<typeof EditableSegment>, "slot" | "value" | "display"> & {
+    name: string;
+    value: string | string[];
+    label?: string;
+}): React.JSX.Element;
+declare function ChipOptionAdd({ className, label, placeholder, editLabel, confirmLabel, ...props }: Omit<React.ComponentProps<typeof EditableSegment>, "slot" | "value" | "display"> & {
+    label: string;
+}): React.JSX.Element;
+declare function ChipRemove({ className, ...props }: React.ComponentProps<"button">): React.JSX.Element;
+export { Chip, ChipInput, ChipInputBox, ChipInputEmpty, ChipInputField, ChipInputList, ChipInputOption, ChipName, ChipOption, ChipOptionAdd, ChipRemove, ChipScope, ChipValue, };

package/dist/chip-input.js

@@ -0,0 +1,174 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { clsx as cn } from "clsx";
+// One field holding several structured values. The component owns the box, the
+// chips, and the combobox keys; the product owns what a chip means, which
+// suggestions match, and which options a chip accepts.
+const ChipInputContext = React.createContext(null);
+function useChipInput() {
+    const context = React.useContext(ChipInputContext);
+    if (!context) {
+        throw new Error("ChipInput parts must be used inside <ChipInput>");
+    }
+    return context;
+}
+function options(list) {
+    return Array.from(list?.querySelectorAll('[data-slot="chip-input-option"]:not([aria-disabled="true"])') ?? []);
+}
+function ChipInput({ className, ...props }) {
+    const [activeId, setActiveId] = React.useState("");
+    const [open, setOpen] = React.useState(false);
+    const listId = React.useId();
+    const listRef = React.useRef(null);
+    const fieldRef = React.useRef(null);
+    const value = React.useMemo(() => ({ activeId, setActiveId, listId, listRef, fieldRef, open, setOpen }), [activeId, listId, open]);
+    return (_jsx(ChipInputContext.Provider, { value: value, children: _jsx("div", { "data-slot": "chip-input", className: cn("chip-input", className), ...props }) }));
+}
+// The box is the field: clicking its empty space puts the caret back where
+// typing continues, the way a single-line input behaves.
+function ChipInputBox({ className, disabled = false, onMouseDown, ...props }) {
+    const { fieldRef } = useChipInput();
+    return (_jsx("div", { "data-slot": "chip-input-box", "data-disabled": disabled || undefined, className: cn("chip-input-box", className), onMouseDown: (event) => {
+            if (event.target === event.currentTarget && !disabled) {
+                event.preventDefault();
+                fieldRef.current?.focus();
+            }
+            onMouseDown?.(event);
+        }, ...props }));
+}
+function ChipInputField({ className, onKeyDown, onRemoveLast, ...props }) {
+    const { activeId, setActiveId, listId, listRef, fieldRef, open } = useChipInput();
+    // Typing changes the list under the highlight, so re-anchor it every render
+    // instead of tracking an index the filter invalidates.
+    React.useEffect(() => {
+        const visible = options(listRef.current);
+        if (!visible.some((option) => option.id === activeId)) {
+            setActiveId(visible[0]?.id ?? "");
+        }
+    });
+    function keys(event) {
+        const visible = options(listRef.current);
+        const index = visible.findIndex((option) => option.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.key === "Tab") && index >= 0) {
+            // Tab only commits a highlighted suggestion; with none it still leaves
+            // the field, so the box never traps the keyboard. Enter with no
+            // highlight falls through to the product, which may take the query.
+            event.preventDefault();
+            visible[index]?.click();
+        }
+        else if (event.key === "Backspace" &&
+            event.currentTarget.value === "" &&
+            onRemoveLast) {
+            event.preventDefault();
+            onRemoveLast();
+        }
+        onKeyDown?.(event);
+    }
+    return (_jsx("input", { ref: fieldRef, "data-slot": "chip-input-field", role: "combobox", "aria-expanded": open, "aria-controls": listId, "aria-activedescendant": activeId || undefined, "aria-autocomplete": "list", autoComplete: "off", onKeyDown: keys, className: cn("chip-input-field", className), ...props }));
+}
+function ChipInputList({ className, "aria-label": ariaLabel = "Suggestions", ...props }) {
+    const { listId, listRef, setOpen } = useChipInput();
+    React.useEffect(() => {
+        setOpen(true);
+        return () => setOpen(false);
+    }, [setOpen]);
+    return (_jsx("div", { id: listId, ref: listRef, role: "listbox", "aria-label": ariaLabel, "data-slot": "chip-input-list", className: cn("menu chip-input-list", className), ...props }));
+}
+function ChipInputOption({ className, disabled = false, onSelect, onClick, ...props }) {
+    const id = React.useId();
+    const { activeId, setActiveId } = useChipInput();
+    return (_jsx("div", { id: id, role: "option", "data-slot": "chip-input-option", "aria-selected": activeId === id, "aria-disabled": disabled || undefined, className: cn("menu-item", className), onPointerMove: () => !disabled && setActiveId(id), onMouseDown: (event) => event.preventDefault(), onClick: (event) => {
+            if (disabled)
+                return;
+            onSelect?.();
+            onClick?.(event);
+        }, ...props }));
+}
+function ChipInputEmpty({ className, ...props }) {
+    return (_jsx("p", { "data-slot": "chip-input-empty", className: cn("menu-item muted", className), ...props }));
+}
+function Chip({ className, invalid = false, ...props }) {
+    return (_jsx("span", { "data-slot": "chip", "data-state": invalid ? "invalid" : undefined, className: cn("chip", className), ...props }));
+}
+// The leading segment: what kind of value this is, when that is a separate
+// fact from its name. Reads as the caller in `npm(t3, latest)`.
+function ChipScope({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "chip-scope", className: cn("chip-scope", className), ...props }));
+}
+function ChipName({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "chip-name", className: cn("chip-name truncate", className), ...props }));
+}
+// Every editable segment behaves the same: press it, it becomes an input
+// sized to its text, Enter or the check confirms, Escape restores.
+function EditableSegment({ slot, className, value, placeholder, display, onCommit, editable = true, editLabel, confirmLabel, maxWidth = 48, ...props }) {
+    const [draft, setDraft] = React.useState(null);
+    if (!editable || !onCommit) {
+        return (_jsx("span", { "data-slot": slot, className: cn(className), children: value ? (display ?? value) : placeholder }));
+    }
+    function commit(next) {
+        if (next !== null)
+            onCommit?.(next.trim());
+        setDraft(null);
+    }
+    if (draft !== null) {
+        return (_jsxs(_Fragment, { children: [_jsx("input", { "data-slot": `${slot}-input`, className: cn(className, "is-editing"), "aria-label": editLabel, value: draft, autoFocus: true, size: 1, style: {
+                        width: `${Math.min(Math.max(draft.length + 1, 6), maxWidth)}ch`,
+                    }, onChange: (event) => setDraft(event.target.value), onBlur: () => commit(draft), onKeyDown: (event) => {
+                        if (event.key === "Enter") {
+                            event.preventDefault();
+                            commit(draft);
+                        }
+                        else if (event.key === "Escape") {
+                            event.preventDefault();
+                            setDraft(null);
+                        }
+                        event.stopPropagation();
+                    } }), _jsx("button", { type: "button", className: "chip-action", "aria-label": confirmLabel, 
+                    // Commit before the input's blur can unmount this button.
+                    onMouseDown: (event) => {
+                        event.preventDefault();
+                        commit(draft);
+                    }, children: _jsx(CheckIcon, {}) })] }));
+    }
+    return (_jsx("button", { type: "button", "data-slot": slot, "data-empty": value ? undefined : "true", className: cn(className), "aria-label": editLabel, onClick: () => setDraft(value), ...props, children: value ? (display ?? value) : placeholder }));
+}
+// The version is the part people revise most, so it edits in place instead of
+// forcing a remove and a retype.
+function ChipValue({ className, value, editLabel, confirmLabel = "Confirm value", ...props }) {
+    return (_jsx(EditableSegment, { slot: "chip-value", className: cn("chip-value", className), value: value, editLabel: editLabel ?? `Edit value, currently ${value}`, confirmLabel: confirmLabel, maxWidth: 16, ...props }));
+}
+// One segment per option, divided like the rest, written the way the config
+// file writes it. A list keeps its brackets so `os=linux` and
+// `allow_builds=[node-pty, esbuild]` read as the same kind of fact.
+function ChipOption({ className, name, value, label, editLabel, confirmLabel, ...props }) {
+    const list = Array.isArray(value);
+    const shown = list ? `[${value.join(", ")}]` : value;
+    const text = `${name}=${shown}`;
+    const where = label ? ` on ${label}` : "";
+    return (_jsx(EditableSegment, { slot: "chip-option", className: cn("chip-option", className), value: text, display: _jsxs(_Fragment, { children: [_jsx("span", { className: "chip-option-name", children: name }), _jsx("span", { className: "chip-option-mark", children: "=" }), list ? _jsx("span", { className: "chip-option-mark", children: "[" }) : null, _jsx("span", { className: "chip-option-value", children: list ? value.join(", ") : value }), list ? _jsx("span", { className: "chip-option-mark", children: "]" }) : null] }), editLabel: editLabel ?? `Edit ${name}${where}, currently ${shown}`, confirmLabel: confirmLabel ?? `Confirm ${name}${where}`, ...props }));
+}
+// The segment that takes a new option. It stays at the end of the chip so the
+// place to add one is where the last one ended.
+function ChipOptionAdd({ className, label, placeholder = "+", editLabel, confirmLabel, ...props }) {
+    return (_jsx(EditableSegment, { slot: "chip-option-add", className: cn("chip-option", className), value: "", placeholder: placeholder, editLabel: editLabel ?? `Add an option to ${label}`, confirmLabel: confirmLabel ?? `Confirm the new option on ${label}`, ...props }));
+}
+function ChipRemove({ className, ...props }) {
+    return (_jsx("button", { type: "button", "data-slot": "chip-remove", className: cn("chip-action", className), ...props, children: _jsx(CloseIcon, {}) }));
+}
+function CheckIcon() {
+    return (_jsx("svg", { className: "icon", viewBox: "0 0 16 16", "aria-hidden": "true", children: _jsx("path", { d: "m3.5 8.5 3 3 6-7" }) }));
+}
+function CloseIcon() {
+    return (_jsx("svg", { className: "icon", viewBox: "0 0 16 16", "aria-hidden": "true", children: _jsx("path", { d: "m4 4 8 8M12 4l-8 8" }) }));
+}
+export { Chip, ChipInput, ChipInputBox, ChipInputEmpty, ChipInputField, ChipInputList, ChipInputOption, ChipName, ChipOption, ChipOptionAdd, ChipRemove, ChipScope, ChipValue, };

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export * from "./breadcrumb.js";
 export * from "./button.js";
 export * from "./card.js";
 export * from "./checkbox.js";
+export * from "./chip-input.js";
 export * from "./command-palette.js";
 export * from "./dialog.js";
 export * from "./dot.js";
@@ -29,6 +30,7 @@ export * from "./select.js";
 export * from "./separator.js";
 export * from "./sidebar.js";
 export * from "./skeleton.js";
+export * from "./sparkline.js";
 export * from "./spinner.js";
 export * from "./split.js";
 export * from "./stat.js";

package/dist/index.js

@@ -8,6 +8,7 @@ export * from "./breadcrumb.js";
 export * from "./button.js";
 export * from "./card.js";
 export * from "./checkbox.js";
+export * from "./chip-input.js";
 export * from "./command-palette.js";
 export * from "./dialog.js";
 export * from "./dot.js";
@@ -30,6 +31,7 @@ export * from "./select.js";
 export * from "./separator.js";
 export * from "./sidebar.js";
 export * from "./skeleton.js";
+export * from "./sparkline.js";
 export * from "./spinner.js";
 export * from "./split.js";
 export * from "./stat.js";

package/dist/sparkline.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+export type SparklineProps = Omit<React.ComponentProps<"div">, "ref"> & {
+    values: number[];
+    height?: number;
+    tone?: "neutral" | "primary";
+    fill?: boolean;
+    min?: number;
+    max?: number;
+    label?: string;
+    ref?: React.Ref<HTMLDivElement>;
+};
+declare function Sparkline({ values, height, tone, fill, min, max, label, className, style, ref, ...props }: SparklineProps): React.JSX.Element | null;
+export { Sparkline };

package/dist/sparkline.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Area, AreaChart, ResponsiveContainer, YAxis } from "recharts";
+import { clsx as cn } from "clsx";
+function Sparkline({ values, height = 24, tone = "neutral", fill = false, min, max, label, className, style, ref, ...props }) {
+    // Below two samples there is no shape to show, and a flat rule across a
+    // cell reads as a border rather than as a measurement.
+    if (values.length < 2)
+        return null;
+    // Default domain is the data's own extent; pass min and max to make
+    // sibling sparklines share one scale, so rows compare honestly.
+    let lo = min ?? Math.min(...values);
+    let hi = max ?? Math.max(...values);
+    const pad = lo === hi ? Math.max(1, Math.abs(lo) * 0.1) : 0;
+    lo -= pad;
+    hi += pad;
+    return (_jsx("div", { ref: ref, "data-slot": "sparkline", "data-tone": tone, role: label ? "img" : undefined, "aria-label": label, "aria-hidden": label ? undefined : true, className: cn("sparkline", tone === "primary" && "primary", className), style: { height, ...style }, ...props, children: _jsx(ResponsiveContainer, { width: "100%", height: "100%", children: _jsxs(AreaChart, { data: values.map((value) => ({ value })), margin: { top: 2, right: 0, bottom: 2, left: 0 }, children: [_jsx(YAxis, { hide: true, domain: [lo, hi] }), _jsx(Area, { type: "monotone", dataKey: "value", stroke: "currentColor", strokeWidth: 1.5, fill: fill ? "currentColor" : "none", fillOpacity: fill ? 0.12 : 0, isAnimationActive: false, dot: false, activeDot: false })] }) }) }));
+}
+export { Sparkline };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momoi-labs/kiso-react",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "Kiso React components built with shadcn/ui and Radix",
   "type": "module",
   "license": "MIT",
@@ -32,10 +32,12 @@
     "prepack": "npm run build"
   },
   "dependencies": {
-    "@momoi-labs/kiso": "^0.7.1",
+    "@momoi-labs/kiso": "^0.8.0",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
-    "radix-ui": "1.6.7"
+    "radix-ui": "1.6.7",
+    "react-is": "^19.3.0",
+    "recharts": "^3.10.1"
   },
   "peerDependencies": {
     "react": "^19.0.0",