@momoi-labs/kiso-react 0.3.0 → 0.4.1

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,10 +23,20 @@ export function ApplicationForm() {
 }
 ```
 
-`@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
-is required. The Kiso base stylesheet includes global styles and Google Fonts.
+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 Google Fonts
+first, then Kiso tokens and the component layer; consumers do not need to import
+those again. React and React DOM are peer dependencies supplied by the
+application. No Tailwind setup is required. The stylesheet includes global
+styles and Google Fonts.
 
 ## Available components
 
@@ -45,7 +55,9 @@ Data and structure
 - EmptyState, EmptyStateIcon, EmptyStateTitle, EmptyStateDescription, EmptyStateActions.
 - Header, PageHeader, PageHeaderTitle, PageHeaderDescription.
 - Sidebar, SidebarHeader, SidebarBody, SidebarFooter.
-- AppShell and AppShellMain, the sidebar and main columns of a console.
+- 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.
@@ -69,8 +81,10 @@ 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.
+  ToastContent, ToastAction, ToastClose, for controlled composition.
 
 Overlays
 
@@ -88,7 +102,21 @@ Button variants are `default`, `primary`, `destructive`, and `ghost`; sizes are
 `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` and optional `hint` to Input's props.
+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

package/dist/app-shell.d.ts

@@ -1,4 +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;
-export { AppShell, AppShellMain };
+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

@@ -1,5 +1,8 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+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 }));
 }
@@ -8,4 +11,12 @@ function AppShell({ className, ...props }) {
 function AppShellMain({ className, ...props }) {
     return (_jsx("main", { "data-slot": "app-shell-main", className: cn("grow", className), ...props }));
 }
-export { AppShell, AppShellMain };
+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/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/styles.css

@@ -1,3 +1,4 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");
 @import "@momoi-labs/kiso/tokens.css";
 @import "@momoi-labs/kiso/ui.css";
 

package/dist/toast.d.ts

@@ -1,6 +1,8 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 import { Toast as ToastPrimitive } from "radix-ui";
+type ToastVariant = "neutral" | "success" | "warning" | "error";
+type ToastNotify = (variant: ToastVariant, title: React.ReactNode, body?: React.ReactNode) => void;
 declare const toastVariants: (props?: ({
     variant?: "error" | "neutral" | "success" | "warning" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
@@ -12,4 +14,10 @@ declare function ToastDescription({ className, ...props }: React.ComponentProps<
 declare function ToastContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function ToastAction({ ...props }: React.ComponentProps<typeof ToastPrimitive.Action>): React.JSX.Element;
 declare function ToastClose({ ...props }: React.ComponentProps<typeof ToastPrimitive.Close>): React.JSX.Element;
-export { ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastContent, ToastAction, ToastClose, toastVariants, };
+declare function useToast(): ToastNotify;
+declare function Toasts({ children, duration, }: {
+    children: React.ReactNode;
+    duration?: number;
+}): React.JSX.Element;
+export { ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastContent, ToastAction, ToastClose, Toasts, useToast, toastVariants, };
+export type { ToastNotify, ToastVariant };

package/dist/toast.js

@@ -1,9 +1,12 @@
 // Adapted from shadcn/ui new-york-v4. See ../SHADCN-LICENSE.
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
 import { cva } from "class-variance-authority";
 import { clsx as cn } from "clsx";
 import { Toast as ToastPrimitive } from "radix-ui";
+import { Button } from "./button.js";
+const ToastContext = React.createContext(null);
 const toastVariants = cva("toast", {
     variants: {
         variant: {
@@ -40,4 +43,27 @@ function ToastAction({ ...props }) {
 function ToastClose({ ...props }) {
     return _jsx(ToastPrimitive.Close, { "data-slot": "toast-close", ...props });
 }
-export { ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastContent, ToastAction, ToastClose, toastVariants, };
+function useToast() {
+    const notify = React.useContext(ToastContext);
+    if (!notify)
+        throw new Error("useToast must be used within Toasts");
+    return notify;
+}
+function Toasts({ children, duration = 6000, }) {
+    const [notices, setNotices] = React.useState([]);
+    const nextId = React.useRef(0);
+    const notify = React.useCallback((variant, title, body) => {
+        const id = nextId.current++;
+        setNotices((current) => [...current, { id, variant, title, body }]);
+    }, []);
+    const dismiss = React.useCallback((id) => {
+        setNotices((current) => current.filter((notice) => notice.id !== id));
+    }, []);
+    return (_jsx(ToastContext.Provider, { value: notify, children: _jsxs(ToastProvider, { duration: duration, children: [children, notices.map((notice) => (_jsxs(Toast, { variant: notice.variant, onOpenChange: (open) => {
+                        if (!open)
+                            dismiss(notice.id);
+                    }, children: [_jsxs(ToastContent, { children: [_jsx(ToastTitle, { children: notice.title }), typeof notice.body === "string" || typeof notice.body === "number"
+                                    ? _jsx(ToastDescription, { children: notice.body })
+                                    : notice.body] }), _jsx(ToastClose, { asChild: true, children: _jsx(Button, { size: "xs", variant: "ghost", children: "Dismiss" }) })] }, notice.id))), _jsx(ToastViewport, {})] }) }));
+}
+export { ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastContent, ToastAction, ToastClose, Toasts, useToast, toastVariants, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momoi-labs/kiso-react",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "Kiso React components built with shadcn/ui and Radix",
   "type": "module",
   "license": "MIT",
@@ -32,7 +32,7 @@
     "prepack": "npm run build"
   },
   "dependencies": {
-    "@momoi-labs/kiso": "^0.6.0",
+    "@momoi-labs/kiso": "^0.7.1",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "radix-ui": "1.6.7"