@momoi-labs/kiso-react 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Momoi Labs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,85 @@
+# Kiso React
+
+React components that use Kiso's tokens and CSS, adapted from shadcn/ui with
+Radix handling interactive behavior. Requires React 19 and React DOM 19.
+
+```sh
+npm install @momoi-labs/kiso-react
+```
+
+Import the stylesheet once, before application overrides:
+
+```tsx
+import '@momoi-labs/kiso-react/styles.css';
+import { Button, FormField } from '@momoi-labs/kiso-react';
+
+export function ApplicationForm() {
+  return (
+    <form>
+      <FormField name="name" label="Name" hint="Choose a unique name." required />
+      <Button type="submit" variant="primary">Save</Button>
+    </form>
+  );
+}
+```
+
+`@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.
+
+## Available components
+
+- Button and `buttonVariants`; Badge and `badgeVariants`.
+- BrandMark and TerminalIcon, the momoi-labs terminal prompt glyph.
+- Input, Label, Checkbox, and FormField.
+- 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`).
+- 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.
+
+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.
+
+Compose confirmations with AlertDialogTitle and AlertDialogDescription inside
+AlertDialogContent, plus AlertDialogCancel and AlertDialogAction. For asynchronous
+actions, control `open` and prevent the Action's default click behavior until the
+operation succeeds. Application code owns pending, error, and retry states.
+
+BrandMark takes a letter or a single SVG icon as `children`. It hides itself
+from assistive technology; keep the product name beside it. SVG children get
+the existing `icon icon-sm` classes. Custom icons must forward `className`.
+
+```tsx
+import { BrandMark, TerminalIcon } from '@momoi-labs/kiso-react';
+
+<div className="brand">
+  <BrandMark>S</BrandMark>
+  <span>self-host</span>
+</div>
+<div className="brand">
+  <BrandMark><TerminalIcon /></BrandMark>
+  <span>self-host</span>
+</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.
+
+`npm run check:react` builds the demo and tests packed npm artifacts in an
+isolated consumer, including TypeScript, CSS bundling, and rendered semantics.
+
+See [Publishing Kiso](../../docs/publishing.md) for releases. Adapted shadcn/ui
+code retains its upstream MIT notice in `SHADCN-LICENSE`.

package/SHADCN-LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 shadcn
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/alert-dialog.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
+import { Button } from "./button.js";
+declare function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>): React.JSX.Element;
+declare function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>): React.JSX.Element;
+declare function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>): React.JSX.Element;
+declare function AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>): React.JSX.Element;
+declare function AlertDialogContent({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content>): React.JSX.Element;
+declare function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>): React.JSX.Element;
+declare function AlertDialogDescription({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Description>): React.JSX.Element;
+declare function AlertDialogAction({ className, variant, size, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Action> & Pick<React.ComponentProps<typeof Button>, "variant" | "size">): React.JSX.Element;
+declare function AlertDialogCancel({ className, variant, size, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> & Pick<React.ComponentProps<typeof Button>, "variant" | "size">): React.JSX.Element;
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, };

package/dist/alert-dialog.js

@@ -0,0 +1,40 @@
+// 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 { AlertDialog as AlertDialogPrimitive } from "radix-ui";
+import { Button } from "./button.js";
+function AlertDialog({ ...props }) {
+    return _jsx(AlertDialogPrimitive.Root, { "data-slot": "alert-dialog", ...props });
+}
+function AlertDialogTrigger({ ...props }) {
+    return (_jsx(AlertDialogPrimitive.Trigger, { "data-slot": "alert-dialog-trigger", ...props }));
+}
+function AlertDialogPortal({ ...props }) {
+    return (_jsx(AlertDialogPrimitive.Portal, { "data-slot": "alert-dialog-portal", ...props }));
+}
+function AlertDialogOverlay({ className, ...props }) {
+    return (_jsx(AlertDialogPrimitive.Overlay, { "data-slot": "alert-dialog-overlay", className: cn("kiso-react-overlay", className), ...props }));
+}
+function AlertDialogContent({ className, ...props }) {
+    return (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}), _jsx(AlertDialogPrimitive.Content, { "aria-modal": "true", "data-slot": "alert-dialog-content", className: cn("kiso-react-dialog marked", className), ...props })] }));
+}
+function AlertDialogHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-dialog-header", className: cn("dialog-header", className), ...props }));
+}
+function AlertDialogFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-dialog-footer", className: cn("dialog-footer", className), ...props }));
+}
+function AlertDialogTitle({ className, ...props }) {
+    return (_jsx(AlertDialogPrimitive.Title, { "data-slot": "alert-dialog-title", className: cn("t-h3", className), ...props }));
+}
+function AlertDialogDescription({ className, ...props }) {
+    return (_jsx(AlertDialogPrimitive.Description, { "data-slot": "alert-dialog-description", className: cn("muted", className), ...props }));
+}
+function AlertDialogAction({ className, variant = "default", size = "md", ...props }) {
+    return (_jsx(Button, { variant: variant, size: size, asChild: true, children: _jsx(AlertDialogPrimitive.Action, { "data-slot": "alert-dialog-action", className: cn(className), ...props }) }));
+}
+function AlertDialogCancel({ className, variant = "default", size = "md", ...props }) {
+    return (_jsx(Button, { variant: variant, size: size, asChild: true, children: _jsx(AlertDialogPrimitive.Cancel, { "data-slot": "alert-dialog-cancel", className: cn(className), ...props }) }));
+}
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, };

package/dist/badge.d.ts

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

package/dist/badge.js

@@ -0,0 +1,16 @@
+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 badgeVariants = cva("badge", {
+    variants: { variant: {
+            neutral: "", info: "badge-info", success: "badge-success",
+            warning: "badge-warning", danger: "badge-danger",
+        } },
+    defaultVariants: { variant: "neutral" },
+});
+function Badge({ className, variant = "neutral", asChild = false, ...props }) {
+    const Comp = asChild ? Slot.Root : "span";
+    return (_jsx(Comp, { "data-slot": "badge", "data-variant": variant, className: cn(badgeVariants({ variant }), className), ...props }));
+}
+export { Badge, badgeVariants };

package/dist/brand-mark.d.ts

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

package/dist/brand-mark.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { clsx as cn } from "clsx";
+import { Slot } from "radix-ui";
+function BrandMark({ className, children, ...props }) {
+    return (_jsx("span", { "data-slot": "brand-mark", className: cn("brand-mark", className), ...props, "aria-hidden": "true", children: React.isValidElement(children) ? (_jsx(Slot.Root, { className: "icon icon-sm", children: children })) : children }));
+}
+export { BrandMark };

package/dist/button.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "destructive" | "ghost" | "primary" | null | undefined;
+    size?: "lg" | "md" | "sm" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+}): React.JSX.Element;
+export { Button, buttonVariants };

package/dist/button.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";
+import { Slot } from "radix-ui";
+const buttonVariants = cva("btn", {
+    variants: {
+        variant: {
+            default: "btn-outline",
+            primary: "btn-primary",
+            destructive: "btn-danger",
+            ghost: "btn-ghost",
+        },
+        size: { xs: "btn-xs", sm: "btn-sm", md: "", lg: "btn-lg" },
+    },
+    defaultVariants: { variant: "default", size: "md" },
+});
+function Button({ className, variant = "default", size = "md", asChild = false, ...props }) {
+    const Comp = asChild ? Slot.Root : "button";
+    return (_jsx(Comp, { ...(!asChild ? { type: "button" } : {}), "data-slot": "button", "data-variant": variant, "data-size": size, className: cn(buttonVariants({ variant, size, className })), ...props }));
+}
+export { Button, buttonVariants };

package/dist/card.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+declare function Card({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardDescription({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardAction({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };

package/dist/card.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { clsx as cn } from "clsx";
+function Card({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card", className: cn("card", className), ...props }));
+}
+function CardHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-header", className: cn("card-header", className), ...props }));
+}
+function CardTitle({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-title", className: cn("t-h3", className), ...props }));
+}
+function CardDescription({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-description", className: cn("muted t-label", className), ...props }));
+}
+function CardAction({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-action", className: cn("", className), ...props }));
+}
+function CardContent({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-content", className: cn("card-body", className), ...props }));
+}
+function CardFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-footer", className: cn("card-footer", className), ...props }));
+}
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };

package/dist/checkbox.d.ts

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

package/dist/checkbox.js

@@ -0,0 +1,9 @@
+// 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 { Checkbox as CheckboxPrimitive } from "radix-ui";
+function Checkbox({ className, ...props }) {
+    return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn("kiso-checkbox", className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "checkbox-indicator", children: _jsxs("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", children: [_jsx("path", { className: "checkbox-check", d: "m3 8 3 3 7-7", fill: "none", stroke: "currentColor", strokeWidth: "2" }), _jsx("path", { className: "checkbox-mixed", d: "M3 8h10", fill: "none", stroke: "currentColor", strokeWidth: "2" })] }) }) }));
+}
+export { Checkbox };

package/dist/form-field.d.ts

@@ -0,0 +1,6 @@
+import { type ComponentProps } 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;

package/dist/form-field.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { Input } from "./input.js";
+import { Label } from "./label.js";
+export function FormField({ label, hint, id: providedId, "aria-describedby": describedBy, ...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 }))] }));
+}

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+export * from "./alert-dialog.js";
+export * from "./badge.js";
+export * from "./brand-mark.js";
+export * from "./button.js";
+export * from "./card.js";
+export * from "./checkbox.js";
+export * from "./form-field.js";
+export * from "./input.js";
+export * from "./label.js";
+export * from "./table.js";
+export * from "./terminal-icon.js";
+export * from "./theme-selector.js";

package/dist/index.js

@@ -0,0 +1,13 @@
+"use client";
+export * from "./alert-dialog.js";
+export * from "./badge.js";
+export * from "./brand-mark.js";
+export * from "./button.js";
+export * from "./card.js";
+export * from "./checkbox.js";
+export * from "./form-field.js";
+export * from "./input.js";
+export * from "./label.js";
+export * from "./table.js";
+export * from "./terminal-icon.js";
+export * from "./theme-selector.js";

package/dist/input.d.ts

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

package/dist/input.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { clsx as cn } from "clsx";
+function Input({ className, type, ...props }) {
+    return (_jsx("input", { type: type, "data-slot": "input", className: cn("input", className), ...props }));
+}
+export { Input };

package/dist/label.d.ts

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

package/dist/label.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 { Label as LabelPrimitive } from "radix-ui";
+function Label({ className, ...props }) {
+    return (_jsx(LabelPrimitive.Root, { "data-slot": "label", className: cn("t-label", className), ...props }));
+}
+export { Label };

package/dist/styles.css

@@ -0,0 +1,111 @@
+@import "@momoi-labs/kiso/tokens.css";
+@import "@momoi-labs/kiso/ui.css";
+
+.theme-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-sm);
+}
+.theme-buttons {
+  display: flex;
+  padding: var(--spacing-2xs);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: var(--color-muted);
+}
+.theme-buttons .btn[aria-pressed="true"] {
+  background: var(--color-card);
+  color: var(--color-foreground);
+  box-shadow: var(--shadow-xs);
+}
+
+.kiso-checkbox {
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  flex: none;
+  width: var(--size-icon-md);
+  height: var(--size-icon-md);
+  padding: 0;
+  border: 1px solid var(--color-input);
+  border-radius: var(--radius-sm);
+  background: var(--color-card);
+  color: var(--color-primary-foreground);
+  cursor: pointer;
+  box-shadow: var(--shadow-xs);
+}
+.kiso-checkbox[data-state="checked"],
+.kiso-checkbox[data-state="indeterminate"] {
+  background: var(--color-primary);
+  border-color: var(--color-primary);
+}
+.checkbox-indicator,
+.checkbox-indicator svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.kiso-checkbox:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.kiso-react-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  background: var(--color-overlay);
+}
+.kiso-react-dialog {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: 51;
+  transform: translate(-50%, -50%);
+  width: min(32rem, calc(100vw - 2 * var(--spacing-lg)));
+  background: var(--color-elevated-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-surface);
+  box-shadow: var(--shadow-md);
+}
+.dialog-scroll {
+  max-height: calc(100dvh - 2 * var(--spacing-xl));
+  overflow-y: auto;
+}
+.kiso-react-dialog .dialog-header {
+  display: grid;
+  gap: var(--spacing-sm);
+}
+.kiso-react-dialog .dialog-body {
+  display: grid;
+  gap: var(--spacing-md);
+}
+.kiso-react-dialog .dialog-footer {
+  flex-wrap: wrap;
+}
+.kiso-react-dialog .alert:focus {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+}
+.btn[aria-busy="true"] {
+  opacity: 1;
+}
+.btn[aria-busy="true"] .spinner {
+  border-color: currentColor;
+  border-right-color: transparent;
+}
+
+@media (pointer: coarse) {
+  .kiso-checkbox::before {
+    content: "";
+    position: absolute;
+    width: var(--size-touch-min);
+    height: var(--size-touch-min);
+  }
+}
+
+.kiso-checkbox .checkbox-mixed,
+.kiso-checkbox[data-state="indeterminate"] .checkbox-check { display: none; }
+.kiso-checkbox[data-state="indeterminate"] .checkbox-mixed { display: block; }
+.kiso-react-dialog { max-height: calc(100dvh - 2 * var(--spacing-lg)); overflow-y: auto; }

package/dist/styles.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/styles.js

@@ -0,0 +1 @@
+export {};

package/dist/table.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+declare function Table({ className, ...props }: React.ComponentProps<"table">): React.JSX.Element;
+declare function TableHeader({ className, ...props }: React.ComponentProps<"thead">): React.JSX.Element;
+declare function TableBody({ className, ...props }: React.ComponentProps<"tbody">): React.JSX.Element;
+declare function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">): React.JSX.Element;
+declare function TableRow({ className, ...props }: React.ComponentProps<"tr">): React.JSX.Element;
+declare function TableHead({ className, ...props }: React.ComponentProps<"th">): React.JSX.Element;
+declare function TableCell({ className, ...props }: React.ComponentProps<"td">): React.JSX.Element;
+declare function TableCaption({ className, ...props }: React.ComponentProps<"caption">): React.JSX.Element;
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, };

package/dist/table.js

@@ -0,0 +1,29 @@
+// 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";
+function Table({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "table-container", className: "table-scroll", children: _jsx("table", { "data-slot": "table", className: cn("table", className), ...props }) }));
+}
+function TableHeader({ className, ...props }) {
+    return (_jsx("thead", { "data-slot": "table-header", className: cn("", className), ...props }));
+}
+function TableBody({ className, ...props }) {
+    return (_jsx("tbody", { "data-slot": "table-body", className: cn("", className), ...props }));
+}
+function TableFooter({ className, ...props }) {
+    return (_jsx("tfoot", { "data-slot": "table-footer", className: cn("", className), ...props }));
+}
+function TableRow({ className, ...props }) {
+    return (_jsx("tr", { "data-slot": "table-row", className: cn("", className), ...props }));
+}
+function TableHead({ className, ...props }) {
+    return (_jsx("th", { scope: "col", "data-slot": "table-head", className: cn("", className), ...props }));
+}
+function TableCell({ className, ...props }) {
+    return (_jsx("td", { "data-slot": "table-cell", className: cn("", className), ...props }));
+}
+function TableCaption({ className, ...props }) {
+    return (_jsx("caption", { "data-slot": "table-caption", className: cn("muted", className), ...props }));
+}
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, };

package/dist/terminal-icon.d.ts

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

package/dist/terminal-icon.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { clsx as cn } from "clsx";
+function TerminalIcon({ className, ...props }) {
+    return (_jsxs("svg", { "data-slot": "terminal-icon", className: cn("icon", className), viewBox: "0 0 16 16", "aria-hidden": "true", focusable: "false", ...props, children: [_jsx("path", { d: "M4 4.5L8 8l-4 3.5" }), _jsx("path", { d: "M9.5 11.5H13" })] }));
+}
+export { TerminalIcon };

package/dist/theme-selector.d.ts

@@ -0,0 +1,4 @@
+export declare function ThemeSelector({ theme, onChange, }: {
+    theme: string;
+    onChange: (theme: string) => void;
+}): import("react").JSX.Element;

package/dist/theme-selector.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "./button.js";
+export function ThemeSelector({ theme, onChange, }) {
+    const options = [
+        {
+            value: "system",
+            label: "Follow system",
+            path: "M2 2h12v9H2zM8 11v3M5 14h6",
+        },
+        {
+            value: "light",
+            label: "Light theme",
+            path: "M11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM8 0v2m0 12v2M0 8h2m12 0h2M2 2l2 2m8 8 2 2M2 14l2-2M12 4l2-2",
+        },
+        {
+            value: "dark",
+            label: "Dark theme",
+            path: "M13.5 10A6 6 0 0 1 6 2.5a6 6 0 1 0 7.5 7.5Z",
+        },
+    ];
+    return (_jsxs("div", { className: "theme-row", children: [_jsx("span", { className: "t-label", children: "Theme" }), _jsx("div", { className: "theme-buttons", role: "group", "aria-label": "Theme", children: options.map((option) => (_jsx(Button, { variant: "ghost", size: "sm", className: "btn-icon", "aria-label": option.label, title: option.label, "aria-pressed": theme === option.value, onClick: () => onChange(option.value), children: _jsx("svg", { className: "icon icon-sm", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.4", "aria-hidden": "true", children: _jsx("path", { d: option.path }) }) }, option.value))) })] }));
+}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@momoi-labs/kiso-react",
+  "version": "0.2.0",
+  "description": "Kiso React components built with shadcn/ui and Radix",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/momoi-labs/blueprint.git",
+    "directory": "packages/kiso-react"
+  },
+  "files": [
+    "dist/",
+    "SHADCN-LICENSE"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": {
+      "types": "./dist/styles.d.ts",
+      "default": "./dist/styles.css"
+    }
+  },
+  "types": "./dist/index.d.ts",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json && node -e \"require('node:fs').copyFileSync('src/styles.css', 'dist/styles.css')\"",
+    "prepack": "npm run build"
+  },
+  "dependencies": {
+    "@momoi-labs/kiso": "^0.5.0",
+    "class-variance-authority": "0.7.1",
+    "clsx": "2.1.1",
+    "radix-ui": "1.6.7"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "19.2.18",
+    "@types/react-dom": "19.2.7",
+    "typescript": "7.0.2"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  }
+}