@tuuject/koi-react 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Koi contributors
+
+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

@@ -1,3 +1,74 @@
-# Temporary Holding Version
+# @tuuject/koi-react
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Koi components for React web: [Base UI](https://base-ui.com) for behavior, [Panda CSS](https://panda-css.com) v2 for styling. Buttons, inputs, select, dialog, table, toast and the rest of the Koi set, with one token source for themes and palettes.
+
+Koi is a design system, so the package ships no prebuilt CSS. Your app's Panda build generates it from the published design system: tokens, recipes, every recipe variant and the page-level global styles.
+
+## Install
+
+```sh
+pnpm add @tuuject/koi-react @tuuject/koi-tokens react react-dom
+pnpm add -D @pandacss/dev
+```
+
+`@tuuject/koi-react` needs Panda CSS v2. The published artifacts are built with Panda `2.1.x`, and the package declares that peer range.
+
+## Configure Panda CSS
+
+```ts
+// panda.config.ts
+import { defineConfig } from '@pandacss/dev';
+
+export default defineConfig({
+  preflight: true,
+  // Loads @tuuject/koi-react's published preset + build info: tokens, recipes, all variants, global styles.
+  designSystem: '@tuuject/koi-react',
+  include: ['./src/**/*.{ts,tsx}'],
+});
+```
+
+Add the layer order to your app's CSS entry, then let Panda's PostCSS plugin generate the CSS:
+
+```css
+/* src/index.css */
+@layer reset, base, tokens, recipes, utilities;
+```
+
+```js
+// postcss.config.cjs
+module.exports = { plugins: { '@pandacss/dev/postcss': {} } };
+```
+
+Do not also add `@tuuject/koi-tokens/panda` to `presets` or scan `node_modules/@tuuject/koi-react` in `include`: `designSystem` already provides the preset, and the generated build info covers every class the components can produce.
+
+## Theme and palette
+
+Import the theme bootstrap before your CSS in the app entry (or inline the same file in `<head>` from a tiny build step) so the first paint already has the right theme. It sets `<html data-theme="light|dark">` and follows the OS; `<html data-palette="rose">` picks another built-in palette.
+
+```ts
+// src/main.tsx, before the CSS import
+import '@tuuject/koi-tokens/theme-init.js';
+```
+
+## Use
+
+```tsx
+import { Button, Card, Input } from '@tuuject/koi-react';
+import { css } from '../styled-system/css';
+
+export function Form() {
+  return (
+    <Card>
+      <Input placeholder="昵称" />
+      <Button>保存</Button>
+    </Card>
+  );
+}
+```
+
+Components use their own generated runtime; write app styles with your app's `styled-system` (it re-exports Koi's runtime and tokens).
+
+## Links
+
+- Repository, design spec and Storybook instructions: <https://github.com/tuuject/design>
+- Tokens on their own, without the components: [`@tuuject/koi-tokens`](https://www.npmjs.com/package/@tuuject/koi-tokens)

package/dist/alert/Alert.d.ts

@@ -0,0 +1,13 @@
+import { type AlertOwnProps } from '@tuuject/koi-core';
+import { type AlertSlot } from '@tuuject/koi-react/styled-system/recipes';
+import type { HTMLAttributes } from 'react';
+import type { SlotClassNames } from '../types.js';
+export type { AlertTone } from '@tuuject/koi-core';
+export interface AlertProps extends AlertOwnProps, Omit<HTMLAttributes<HTMLDivElement>, keyof AlertOwnProps> {
+    classNames?: SlotClassNames<AlertSlot>;
+}
+/**
+ * An inline message that belongs to the page or a section. Warning and error are role="alert", info is role="status".
+ * For brief confirmations that disappear on their own, use Toast.
+ */
+export declare function Alert({ tone, title, icon, action, onClose, className, classNames, children, ...rest }: AlertProps): import("react").JSX.Element;

package/dist/alert/Alert.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { strings } from '@tuuject/koi-core';
+import { cx } from '@tuuject/koi-react/styled-system/css';
+import { alert } from '@tuuject/koi-react/styled-system/recipes';
+import { CloseIcon, ErrorIcon, InfoIcon, WarningIcon } from '../icons.js';
+const toneIcon = { info: InfoIcon, warning: WarningIcon, error: ErrorIcon };
+/**
+ * An inline message that belongs to the page or a section. Warning and error are role="alert", info is role="status".
+ * For brief confirmations that disappear on their own, use Toast.
+ */
+export function Alert({ tone = 'info', title, icon, action, onClose, className, classNames, children, ...rest }) {
+    const s = alert({ tone, closable: !!onClose });
+    const Icon = toneIcon[tone] ?? InfoIcon;
+    const shownIcon = icon !== undefined ? icon : _jsx(Icon, {});
+    return (_jsxs("div", { role: tone === 'info' ? 'status' : 'alert', ...rest, className: cx(s.root, className), children: [shownIcon ? _jsx("span", { className: cx(s.icon, classNames?.icon), children: shownIcon }) : null, _jsxs("div", { className: cx(s.content, classNames?.content), children: [title ? _jsx("p", { className: cx(s.title, classNames?.title), children: title }) : null, children ? _jsx("div", { className: cx(s.body, classNames?.body), children: children }) : null, action ? _jsx("div", { className: cx(s.action, classNames?.action), children: action }) : null] }), onClose ? (_jsx("button", { type: "button", className: cx(s.close, classNames?.close), "aria-label": strings.close, title: strings.close, onClick: onClose, children: _jsx(CloseIcon, {}) })) : null] }));
+}

package/dist/avatar/Avatar.d.ts

@@ -0,0 +1,7 @@
+import { type AvatarOwnProps } from '@tuuject/koi-core';
+import type { ComponentPropsWithRef } from 'react';
+export type { AvatarShape, AvatarSize } from '@tuuject/koi-core';
+export interface AvatarProps extends AvatarOwnProps, Omit<ComponentPropsWithRef<'span'>, keyof AvatarOwnProps | 'children'> {
+}
+/** A round (or rounded-square) picture of a person or site. Base UI swaps in the image once it has loaded. */
+export declare function Avatar({ src, name, size, shape, className, ...rest }: AvatarProps): import("react").JSX.Element;

package/dist/avatar/Avatar.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar as BaseAvatar } from '@base-ui/react/avatar';
+import { initials, strings } from '@tuuject/koi-core';
+import { cx } from '@tuuject/koi-react/styled-system/css';
+import { avatar } from '@tuuject/koi-react/styled-system/recipes';
+/** A round (or rounded-square) picture of a person or site. Base UI swaps in the image once it has loaded. */
+export function Avatar({ src, name, size = 'md', shape = 'circle', className, ...rest }) {
+    const s = avatar({ size, shape });
+    return (_jsxs(BaseAvatar.Root, { role: "img", "aria-label": name || strings.avatar, ...rest, className: cx(s.root, className), children: [src ? _jsx(BaseAvatar.Image, { src: src, alt: "", className: s.image }) : null, _jsx(BaseAvatar.Fallback, { "aria-hidden": "true", className: s.fallback, children: initials(name) })] }));
+}

package/dist/badge/Badge.d.ts

@@ -0,0 +1,7 @@
+import type { BadgeOwnProps } from '@tuuject/koi-core';
+import type { HTMLAttributes } from 'react';
+export type { BadgeTone } from '@tuuject/koi-core';
+export interface BadgeProps extends BadgeOwnProps, Omit<HTMLAttributes<HTMLSpanElement>, keyof BadgeOwnProps> {
+}
+/** A small, non-interactive pill label for status or counts. For filters or removable chips, use Tag. */
+export declare function Badge({ tone, dot, className, children, ...rest }: BadgeProps): import("react").JSX.Element;

package/dist/badge/Badge.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '@tuuject/koi-react/styled-system/css';
+import { badge } from '@tuuject/koi-react/styled-system/recipes';
+/** A small, non-interactive pill label for status or counts. For filters or removable chips, use Tag. */
+export function Badge({ tone = 'neutral', dot, className, children, ...rest }) {
+    const s = badge({ tone });
+    return (_jsxs("span", { ...rest, className: cx(s.root, className), children: [dot ? _jsx("span", { className: s.dot, "aria-hidden": "true" }) : null, children] }));
+}

package/dist/button/Button.d.ts

@@ -0,0 +1,22 @@
+import { type ButtonOwnProps, type IconButtonOwnProps } from '@tuuject/koi-core';
+import type { ComponentPropsWithRef } from 'react';
+export type { ButtonColor, ButtonVariant } from '@tuuject/koi-core';
+type NativeButtonProps = Omit<ComponentPropsWithRef<'button'>, 'color'>;
+type NativeAnchorProps = Omit<ComponentPropsWithRef<'a'>, 'color' | 'type'>;
+/**
+ * Without `href`: a <button>, with every native button attribute.
+ * With `href`: an <a> (a link that looks like a button), with every native anchor attribute.
+ * A disabled or loading link renders a disabled <button> instead, as in legacy: an <a> can't be disabled.
+ */
+type AsButtonOrLink<Own> = (Own & Omit<NativeButtonProps, keyof Own> & {
+    href?: undefined;
+}) | (Own & Omit<NativeAnchorProps, keyof Own> & {
+    href: string;
+    disabled?: boolean;
+    type?: never;
+});
+export type ButtonProps = AsButtonOrLink<ButtonOwnProps>;
+export declare function Button({ color, variant, size, shape, iconStart, iconEnd, fullWidth, loading, disabled, className, children, ...rest }: ButtonProps): import("react").JSX.Element;
+export type IconButtonProps = AsButtonOrLink<IconButtonOwnProps>;
+/** Square icon-only button. Defaults to secondary ghost, like the legacy IconButton. `href` makes it a link, as on Button. */
+export declare function IconButton({ label, icon, color, variant, size, shape, className, ...rest }: IconButtonProps): import("react").JSX.Element;

package/dist/button/Button.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { strings } from '@tuuject/koi-core';
+import { cx } from '@tuuject/koi-react/styled-system/css';
+import { button } from '@tuuject/koi-react/styled-system/recipes';
+import { useButtonShape } from '../shape.js';
+import { Spinner } from '../spinner/Spinner.js';
+/** Renders <a> or <button> for Button and IconButton. */
+function Pressable({ href, disabled, type = 'button', ...rest }) {
+    if (href !== undefined && !disabled) {
+        return _jsx("a", { href: href, ...rest });
+    }
+    // Drop the anchor-only attributes when a link falls back to a disabled <button>.
+    const { target, rel, download, hrefLang, ping, referrerPolicy, ...buttonRest } = rest;
+    return _jsx("button", { type: type, disabled: disabled, ...buttonRest });
+}
+export function Button({ color, variant, size, shape, iconStart, iconEnd, fullWidth, loading, disabled, className, children, ...rest }) {
+    const resolvedShape = useButtonShape(shape);
+    return (_jsxs(Pressable, { ...rest, disabled: disabled || loading, "aria-busy": loading || undefined, className: cx(button({ color, variant, size, shape: resolvedShape, fullWidth }), className), children: [loading ? _jsx(Spinner, { size: size === 'lg' ? 'md' : 'sm', label: strings.processing }) : iconStart, _jsx("span", { children: children }), iconEnd] }));
+}
+/** Square icon-only button. Defaults to secondary ghost, like the legacy IconButton. `href` makes it a link, as on Button. */
+export function IconButton({ label, icon, color = 'secondary', variant = 'ghost', size, shape, className, ...rest }) {
+    const resolvedShape = useButtonShape(shape);
+    return (_jsx(Pressable
+    // Before the spread so a passed title wins; Tooltip passes title={undefined} so the native one doesn't stack on it.
+    , { 
+        // Before the spread so a passed title wins; Tooltip passes title={undefined} so the native one doesn't stack on it.
+        title: label, ...rest, "aria-label": label, className: cx(button({ color, variant, size, shape: resolvedShape, iconOnly: true }), className), children: icon }));
+}

package/dist/card/Card.d.ts

@@ -0,0 +1,9 @@
+import type { CardOwnProps } from '@tuuject/koi-core';
+import { type CardSlot } from '@tuuject/koi-react/styled-system/recipes';
+import type { HTMLAttributes } from 'react';
+import type { SlotClassNames } from '../types.js';
+export interface CardProps extends CardOwnProps, Omit<HTMLAttributes<HTMLDivElement>, keyof CardOwnProps> {
+    classNames?: SlotClassNames<CardSlot>;
+}
+/** A rounded container that groups related content. Don't nest cards. */
+export declare function Card({ variant, padding, title, description, media, footer, className, classNames, children, ...rest }: CardProps): import("react").JSX.Element;

package/dist/card/Card.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '@tuuject/koi-react/styled-system/css';
+import { card } from '@tuuject/koi-react/styled-system/recipes';
+/** A rounded container that groups related content. Don't nest cards. */
+export function Card({ variant = 'outlined', padding = 'default', title, description, media, footer, className, classNames, children, ...rest }) {
+    const s = card({ variant, padding });
+    return (_jsxs("div", { ...rest, className: cx(s.root, className), children: [media ? _jsx("div", { className: cx(s.media, classNames?.media), children: media }) : null, title || description ? (_jsxs("div", { className: cx(s.head, classNames?.head), children: [title ? _jsx("h3", { className: cx(s.title, classNames?.title), children: title }) : null, description ? _jsx("p", { className: cx(s.description, classNames?.description), children: description }) : null] })) : null, children != null ? _jsx("div", { className: cx(s.body, classNames?.body), children: children }) : null, footer ? _jsx("div", { className: cx(s.footer, classNames?.footer), children: footer }) : null] }));
+}

package/dist/chat-bubble/ChatBubble.d.ts

@@ -0,0 +1,7 @@
+import type { ChatBubbleOwnProps } from '@tuuject/koi-core';
+import type { ComponentPropsWithRef } from 'react';
+export type { ChatBubbleSide } from '@tuuject/koi-core';
+export interface ChatBubbleProps extends ChatBubbleOwnProps, Omit<ComponentPropsWithRef<'div'>, keyof ChatBubbleOwnProps | 'children'> {
+}
+/** A chat or comment message: `received` is a muted panel, `sent` the filled action color. */
+export declare function ChatBubble({ side, className, ...rest }: ChatBubbleProps): import("react").JSX.Element;

package/dist/chat-bubble/ChatBubble.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from '@tuuject/koi-react/styled-system/css';
+import { chatBubble } from '@tuuject/koi-react/styled-system/recipes';
+/** A chat or comment message: `received` is a muted panel, `sent` the filled action color. */
+export function ChatBubble({ side = 'received', className, ...rest }) {
+    return _jsx("div", { ...rest, className: cx(chatBubble({ side }), className) });
+}

package/dist/checkbox/Checkbox.d.ts

@@ -0,0 +1,18 @@
+import type { CheckboxOwnProps } from '@tuuject/koi-core';
+import { type ChangeEventHandler, type ComponentPropsWithRef } from 'react';
+export interface CheckboxProps extends CheckboxOwnProps<Event>, Omit<ComponentPropsWithRef<'input'>, keyof CheckboxOwnProps | 'type' | 'value' | 'onChange' | 'children'> {
+    /** Submitted with the form while ticked (the native "on" when omitted). */
+    value?: string;
+    /**
+     * The legacy native handler: React's change event from the hidden input, caught as it bubbles to the row,
+     * so `event.target.checked` is the new state (`currentTarget` is the row). Runs after `onCheckedChange`.
+     */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+}
+/**
+ * A 16px checkbox with a label and an optional description; the whole row is the click target.
+ * Renders Base UI's `<span role="checkbox">` plus a hidden `<input type="checkbox">` that carries
+ * `id`, `name`, `value`, `required` and `form`; `ref` reaches that input. Inside a Field it picks up
+ * the error (red edge, aria-describedby), `required`, `disabled` and `id`.
+ */
+export declare function Checkbox({ label, description, className, style, id, required, ref, onChange, onCheckedChange, 'aria-labelledby': labelledBy, 'aria-describedby': describedBy, ...rest }: CheckboxProps): import("react").JSX.Element;

package/dist/checkbox/Checkbox.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';
+import { cx } from '@tuuject/koi-react/styled-system/css';
+import { checkbox } from '@tuuject/koi-react/styled-system/recipes';
+import { useContext, useId } from 'react';
+import { KoiFieldContext } from '../field/context.js';
+import { CheckIcon } from '../icons.js';
+/**
+ * A 16px checkbox with a label and an optional description; the whole row is the click target.
+ * Renders Base UI's `<span role="checkbox">` plus a hidden `<input type="checkbox">` that carries
+ * `id`, `name`, `value`, `required` and `form`; `ref` reaches that input. Inside a Field it picks up
+ * the error (red edge, aria-describedby), `required`, `disabled` and `id`.
+ */
+export function Checkbox({ label, description, className, style, id, required, ref, onChange, onCheckedChange, 'aria-labelledby': labelledBy, 'aria-describedby': describedBy, ...rest }) {
+    const f = useContext(KoiFieldContext);
+    const s = checkbox();
+    const uid = useId();
+    const hasLabel = label != null;
+    const labelId = hasLabel ? `${uid}-label` : undefined;
+    const descId = hasLabel && description ? `${uid}-desc` : undefined;
+    // Without a label there's no row to click; a <span> also keeps Base UI from naming the box after an
+    // empty <label>, which would override an aria-label.
+    const Root = hasLabel ? 'label' : 'span';
+    return (_jsxs(Root, { className: cx(s.root, className), style: style, onChange: onChange, children: [_jsx(BaseCheckbox.Root, { ...rest, inputRef: ref, id: id ?? f?.id, required: required ?? f?.required, "aria-labelledby": labelledBy ?? labelId, "aria-describedby": cx(describedBy, descId) || undefined, onCheckedChange: onCheckedChange, className: s.control, children: _jsx(BaseCheckbox.Indicator, { keepMounted: true, className: s.indicator, children: _jsx(CheckIcon, {}) }) }), hasLabel ? (_jsxs("span", { className: s.text, children: [_jsx("span", { id: labelId, className: s.label, children: label }), descId ? (_jsx("span", { id: descId, className: s.description, children: description })) : null] })) : null] }));
+}

package/dist/dialog/Dialog.d.ts

@@ -0,0 +1,13 @@
+import { type DialogOwnProps } from '@tuuject/koi-core';
+import { type DialogSlot } from '@tuuject/koi-react/styled-system/recipes';
+import type { SlotClassNames } from '../types.js';
+export interface DialogProps extends DialogOwnProps {
+    className?: string;
+    classNames?: SlotClassNames<Exclude<DialogSlot, 'popup'>>;
+}
+/**
+ * Modal dialog. Base UI handles the portal, focus trap, Esc, outside click, scroll lock and focus return.
+ * AlertDialog differs from Dialog only in its Root (role, forced modal, no pointer dismissal); every other
+ * part is the same component, so both variants share the parts and the recipe below.
+ */
+export declare function Dialog({ open, onOpenChange, title, description, children, footer, size, role, dismissible, hideClose, className, classNames, }: DialogProps): import("react").JSX.Element;

package/dist/dialog/Dialog.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertDialog } from '@base-ui/react/alert-dialog';
+import { Dialog as BaseDialog } from '@base-ui/react/dialog';
+import { strings } from '@tuuject/koi-core';
+import { cx } from '@tuuject/koi-react/styled-system/css';
+import { dialog } from '@tuuject/koi-react/styled-system/recipes';
+import { sizes } from '@tuuject/koi-tokens/dimensions';
+import { useRef } from 'react';
+import { IconButton } from '../button/Button.js';
+import { CloseIcon } from '../icons.js';
+import { ShapeProvider } from '../shape.js';
+/**
+ * Modal dialog. Base UI handles the portal, focus trap, Esc, outside click, scroll lock and focus return.
+ * AlertDialog differs from Dialog only in its Root (role, forced modal, no pointer dismissal); every other
+ * part is the same component, so both variants share the parts and the recipe below.
+ */
+export function Dialog({ open, onOpenChange, title, description, children, footer, size, role = 'dialog', dismissible = true, hideClose, className, classNames, }) {
+    const s = dialog({ size });
+    const footerRef = useRef(null);
+    const alert = role === 'alertdialog';
+    // WAI-ARIA alertdialog: focus the least destructive action. The footer's first button is cancel by convention;
+    // without an enabled one, fall back to Base UI's default (first tabbable element).
+    const initialFocus = alert
+        ? () => footerRef.current?.querySelector('button:not(:disabled), a[href]') ?? true
+        : undefined;
+    const handleOpenChange = (next) => onOpenChange(next);
+    // When a click outside doesn't close the dialog, a mousedown on the empty area around the popup would still
+    // blur the focused control and drop focus on <body> (Base UI only pulls it back on the next Tab). Keep it put.
+    const keepFocus = alert || !dismissible
+        ? (event) => {
+            if (event.target === event.currentTarget) {
+                event.preventDefault();
+            }
+        }
+        : undefined;
+    const portal = (_jsxs(BaseDialog.Portal, { children: [_jsx(BaseDialog.Backdrop, { className: cx(s.backdrop, classNames?.backdrop) }), _jsx(BaseDialog.Viewport, { className: cx(s.viewport, classNames?.viewport), onMouseDown: keepFocus, children: _jsxs(BaseDialog.Popup, { className: cx(s.popup, className), initialFocus: initialFocus, children: [title != null && _jsx(BaseDialog.Title, { className: cx(s.title, classNames?.title), children: title }), description != null && (_jsx(BaseDialog.Description, { className: cx(s.description, classNames?.description), children: description })), children != null && _jsx("div", { className: cx(s.body, classNames?.body), children: children }), footer != null && (_jsx(ShapeProvider, { shape: "rounded", children: _jsx("div", { ref: footerRef, className: cx(s.footer, classNames?.footer), children: footer }) })), !hideClose && (_jsx(BaseDialog.Close, { className: cx(s.close, classNames?.close), render: _jsx(IconButton, { label: strings.close, icon: _jsx(CloseIcon, { size: sizes['icon-lg'] }), size: "sm", shape: "rounded" }) }))] }) })] }));
+    return alert ? (_jsx(AlertDialog.Root, { open: open, onOpenChange: handleOpenChange, children: portal })) : (_jsx(BaseDialog.Root, { open: open, onOpenChange: handleOpenChange, disablePointerDismissal: !dismissible, children: portal }));
+}

package/dist/divider/Divider.d.ts

@@ -0,0 +1,6 @@
+import type { DividerOwnProps } from '@tuuject/koi-core';
+export interface DividerProps extends DividerOwnProps {
+    className?: string;
+}
+/** A 1px hairline separator. Prefer spacing; add a divider only when space alone doesn't separate the groups. */
+export declare function Divider({ orientation, label, className }: DividerProps): import("react").JSX.Element;

package/dist/divider/Divider.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Separator } from '@base-ui/react/separator';
+import { cx } from '@tuuject/koi-react/styled-system/css';
+import { separator } from '@tuuject/koi-react/styled-system/recipes';
+import { useId } from 'react';
+/** A 1px hairline separator. Prefer spacing; add a divider only when space alone doesn't separate the groups. */
+export function Divider({ orientation = 'horizontal', label, className }) {
+    const labelId = useId();
+    if (orientation === 'vertical') {
+        return (_jsx(Separator, { orientation: "vertical", render: _jsx("span", {}), className: cx(separator({ kind: 'vertical' }), className) }));
+    }
+    if (label != null && label !== false) {
+        // A separator's children are presentational, so the label names it instead of being lost.
+        return (_jsx(Separator, { "aria-labelledby": labelId, className: cx(separator({ kind: 'label' }), className), children: _jsx("span", { id: labelId, children: label }) }));
+    }
+    return _jsx(Separator, { className: cx(separator(), className) });
+}

package/dist/field/Field.d.ts

@@ -0,0 +1,14 @@
+import { type FieldOwnProps } from '@tuuject/koi-core';
+import { type FieldSlot } from '@tuuject/koi-react/styled-system/recipes';
+import { type HTMLAttributes } from 'react';
+import type { SlotClassNames } from '../types.js';
+export interface FieldProps extends FieldOwnProps, Omit<HTMLAttributes<HTMLDivElement>, keyof FieldOwnProps | 'id'> {
+    /** The control's id (the label points at it). Generated when omitted. */
+    id?: string;
+    classNames?: SlotClassNames<FieldSlot>;
+}
+/**
+ * A form row: label, one control, error and help text, wired together by Base UI's Field.
+ * Stack Fields with space-4 between them.
+ */
+export declare function Field({ label, help, error, required, optional, id, className, classNames, children, ...rest }: FieldProps): import("react").JSX.Element;

package/dist/field/Field.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Field as BaseField } from '@base-ui/react/field';
+import { strings } from '@tuuject/koi-core';
+import { cx } from '@tuuject/koi-react/styled-system/css';
+import { field } from '@tuuject/koi-react/styled-system/recipes';
+import { sizes } from '@tuuject/koi-tokens/dimensions';
+import { useMemo } from 'react';
+import { ErrorIcon } from '../icons.js';
+import { KoiFieldContext } from './context.js';
+/**
+ * A form row: label, one control, error and help text, wired together by Base UI's Field.
+ * Stack Fields with space-4 between them.
+ */
+export function Field({ label, help, error, required, optional, id, className, classNames, children, ...rest }) {
+    const s = field();
+    const hasError = error != null && error !== false && error !== '';
+    const ctx = useMemo(() => ({ id, required }), [id, required]);
+    return (_jsx(KoiFieldContext.Provider, { value: ctx, children: _jsxs(BaseField.Root, { ...rest, invalid: hasError, className: cx(s.root, className), children: [label != null ? (_jsxs(BaseField.Label, { className: cx(s.label, classNames?.label), children: [label, required ? (_jsxs("span", { className: cx(s.required, classNames?.required), "aria-hidden": "true", children: [' ', "*"] })) : null, optional ? _jsx("span", { className: cx(s.optional, classNames?.optional), children: strings.optional }) : null] })) : null, children, hasError ? (_jsxs(BaseField.Error, { match: true, className: cx(s.error, classNames?.error), render: _jsx("p", {}), children: [_jsx(ErrorIcon, { size: sizes['icon-xs'] }), _jsx("span", { children: error })] })) : null, help ? _jsx(BaseField.Description, { className: cx(s.help, classNames?.help), children: help }) : null] }) }));
+}

package/dist/field/context.d.ts

@@ -0,0 +1,5 @@
+export interface KoiFieldContextValue {
+    id?: string;
+    required?: boolean;
+}
+export declare const KoiFieldContext: import("react").Context<KoiFieldContextValue | null>;

package/dist/field/context.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export const KoiFieldContext = createContext(null);

package/dist/icons.d.ts

@@ -0,0 +1,26 @@
+import type { IconOwnProps } from '@tuuject/koi-core';
+import type { ComponentPropsWithRef } from 'react';
+export type { IconData, IconOwnProps } from '@tuuject/koi-core';
+export interface IconProps extends IconOwnProps, Omit<ComponentPropsWithRef<'svg'>, keyof IconOwnProps | 'children' | 'dangerouslySetInnerHTML'> {
+}
+/**
+ * Draws Iconify-format icon data (`@iconify-icons/<set>/<name>`, or a hand-written `{ body, width, height }`) as
+ * an inline SVG in currentColor. Decorative: the control around it carries the accessible name.
+ */
+export declare function Icon({ icon, size, ...rest }: IconProps): import("react").JSX.Element;
+export type BuiltinIconProps = Omit<IconProps, 'icon'>;
+export declare const CloseIcon: (props: BuiltinIconProps) => import("react").JSX.Element;
+export declare const CheckIcon: (props: BuiltinIconProps) => import("react").JSX.Element;
+export declare const ExternalIcon: (props: BuiltinIconProps) => import("react").JSX.Element;
+export declare const InfoIcon: (props: BuiltinIconProps) => import("react").JSX.Element;
+export declare const WarningIcon: (props: BuiltinIconProps) => import("react").JSX.Element;
+export declare const SuccessIcon: (props: BuiltinIconProps) => import("react").JSX.Element;
+export declare const ErrorIcon: (props: BuiltinIconProps) => import("react").JSX.Element;
+export declare const SearchIcon: (props: BuiltinIconProps) => import("react").JSX.Element;
+export declare const ChevronDownIcon: (props: BuiltinIconProps) => import("react").JSX.Element;
+export declare const ChevronUpIcon: (props: BuiltinIconProps) => import("react").JSX.Element;
+export declare const ChevronLeftIcon: (props: BuiltinIconProps) => import("react").JSX.Element;
+export declare const ChevronRightIcon: (props: BuiltinIconProps) => import("react").JSX.Element;
+export declare const SortIcon: (props: BuiltinIconProps) => import("react").JSX.Element;
+export declare const SortUpIcon: (props: BuiltinIconProps) => import("react").JSX.Element;
+export declare const SortDownIcon: (props: BuiltinIconProps) => import("react").JSX.Element;

package/dist/icons.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import arrowUpRightFromSquare from '@iconify-icons/fa7-solid/arrow-up-right-from-square';
+import check from '@iconify-icons/fa7-solid/check';
+import chevronDown from '@iconify-icons/fa7-solid/chevron-down';
+import chevronLeft from '@iconify-icons/fa7-solid/chevron-left';
+import chevronRight from '@iconify-icons/fa7-solid/chevron-right';
+import chevronUp from '@iconify-icons/fa7-solid/chevron-up';
+import circleCheck from '@iconify-icons/fa7-solid/circle-check';
+import circleInfo from '@iconify-icons/fa7-solid/circle-info';
+import circleXmark from '@iconify-icons/fa7-solid/circle-xmark';
+import magnifyingGlass from '@iconify-icons/fa7-solid/magnifying-glass';
+import sort from '@iconify-icons/fa7-solid/sort';
+import sortDown from '@iconify-icons/fa7-solid/sort-down';
+import sortUp from '@iconify-icons/fa7-solid/sort-up';
+import triangleExclamation from '@iconify-icons/fa7-solid/triangle-exclamation';
+import xmark from '@iconify-icons/fa7-solid/xmark';
+import { sizes } from '@tuuject/koi-tokens/dimensions';
+/**
+ * Draws Iconify-format icon data (`@iconify-icons/<set>/<name>`, or a hand-written `{ body, width, height }`) as
+ * an inline SVG in currentColor. Decorative: the control around it carries the accessible name.
+ */
+export function Icon({ icon, size = sizes.icon, ...rest }) {
+    const { body, width = 16, height = 16, left = 0, top = 0 } = icon;
+    return (_jsx("svg", { width: size, height: size, viewBox: `${left} ${top} ${width} ${height}`, "aria-hidden": "true", ...rest, 
+        // biome-ignore lint/security/noDangerouslySetInnerHtml: icon bodies are static SVG markup from icon packages or our own source, never user input.
+        dangerouslySetInnerHTML: { __html: body } }));
+}
+function builtin(icon) {
+    return (props) => _jsx(Icon, { icon: icon, ...props });
+}
+// The icons Koi's components draw, all Font Awesome Free Solid (CC BY 4.0).
+export const CloseIcon = builtin(xmark);
+export const CheckIcon = builtin(check);
+export const ExternalIcon = builtin(arrowUpRightFromSquare);
+export const InfoIcon = builtin(circleInfo);
+export const WarningIcon = builtin(triangleExclamation);
+export const SuccessIcon = builtin(circleCheck);
+export const ErrorIcon = builtin(circleXmark);
+export const SearchIcon = builtin(magnifyingGlass);
+export const ChevronDownIcon = builtin(chevronDown);
+export const ChevronUpIcon = builtin(chevronUp);
+export const ChevronLeftIcon = builtin(chevronLeft);
+export const ChevronRightIcon = builtin(chevronRight);
+export const SortIcon = builtin(sort);
+export const SortUpIcon = builtin(sortUp);
+export const SortDownIcon = builtin(sortDown);

package/dist/index.d.ts

@@ -0,0 +1,31 @@
+export { Alert, type AlertProps, type AlertTone } from './alert/Alert.js';
+export { Avatar, type AvatarProps, type AvatarShape, type AvatarSize } from './avatar/Avatar.js';
+export { Badge, type BadgeProps, type BadgeTone } from './badge/Badge.js';
+export { Button, type ButtonColor, type ButtonProps, type ButtonVariant, IconButton, type IconButtonProps, } from './button/Button.js';
+export { Card, type CardProps } from './card/Card.js';
+export { ChatBubble, type ChatBubbleProps } from './chat-bubble/ChatBubble.js';
+export { Checkbox, type CheckboxProps } from './checkbox/Checkbox.js';
+export { Dialog, type DialogProps } from './dialog/Dialog.js';
+export { Divider, type DividerProps } from './divider/Divider.js';
+export { Field, type FieldProps } from './field/Field.js';
+export * from './icons.js';
+export { Input, type InputProps } from './input/Input.js';
+export { Link, type LinkProps, type LinkVariant } from './link/Link.js';
+export { Pagination, type PaginationProps, type PaginationVariant } from './pagination/Pagination.js';
+export { Progress, type ProgressProps, type ProgressSize } from './progress/Progress.js';
+export { Prose, type ProseProps, type ProseSize } from './prose/Prose.js';
+export { RadioGroup, type RadioGroupProps, type RadioOption } from './radio-group/RadioGroup.js';
+export { Select, type SelectOption, type SelectProps } from './select/Select.js';
+export { SelectGroup, type SelectGroupProps, SelectItem, type SelectItemProps, type SelectOptionGroup, SelectPanel, type SelectPanelProps, SelectSeparator, } from './select/SelectPanel.js';
+export { type ButtonShape, ShapeProvider, useButtonShape } from './shape.js';
+export { Skeleton, type SkeletonProps } from './skeleton/Skeleton.js';
+export { Spinner, type SpinnerProps, type SpinnerSize } from './spinner/Spinner.js';
+export { Switch, type SwitchProps } from './switch/Switch.js';
+export { DataTable, type DataTableColumn, type DataTableProps } from './table/DataTable.js';
+export { Table, type TableAlign, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, TableCell, type TableCellProps, TableEmpty, type TableEmptyProps, TableFooter, type TableFooterProps, TableHeader, TableHeaderCell, type TableHeaderCellProps, type TableHeaderProps, type TableLayout, type TableProps, TableRow, type TableRowProps, type TableSortDirection, } from './table/Table.js';
+export { type TabItem, Tabs, type TabsProps } from './tabs/Tabs.js';
+export { Tag, type TagProps } from './tag/Tag.js';
+export { Textarea, type TextareaProps } from './textarea/Textarea.js';
+export { Toast, type ToastOptions, type ToastProps, ToastProvider, type ToastProviderProps, type ToastTone, useToast, } from './toast/Toast.js';
+export { Tooltip, type TooltipProps, type TooltipSide } from './tooltip/Tooltip.js';
+export type { ChangeDetails } from './types.js';

package/dist/index.js

@@ -0,0 +1,30 @@
+export { Alert } from './alert/Alert.js';
+export { Avatar } from './avatar/Avatar.js';
+export { Badge } from './badge/Badge.js';
+export { Button, IconButton, } from './button/Button.js';
+export { Card } from './card/Card.js';
+export { ChatBubble } from './chat-bubble/ChatBubble.js';
+export { Checkbox } from './checkbox/Checkbox.js';
+export { Dialog } from './dialog/Dialog.js';
+export { Divider } from './divider/Divider.js';
+export { Field } from './field/Field.js';
+export * from './icons.js';
+export { Input } from './input/Input.js';
+export { Link } from './link/Link.js';
+export { Pagination } from './pagination/Pagination.js';
+export { Progress } from './progress/Progress.js';
+export { Prose } from './prose/Prose.js';
+export { RadioGroup } from './radio-group/RadioGroup.js';
+export { Select } from './select/Select.js';
+export { SelectGroup, SelectItem, SelectPanel, SelectSeparator, } from './select/SelectPanel.js';
+export { ShapeProvider, useButtonShape } from './shape.js';
+export { Skeleton } from './skeleton/Skeleton.js';
+export { Spinner } from './spinner/Spinner.js';
+export { Switch } from './switch/Switch.js';
+export { DataTable } from './table/DataTable.js';
+export { Table, TableBody, TableCaption, TableCell, TableEmpty, TableFooter, TableHeader, TableHeaderCell, TableRow, } from './table/Table.js';
+export { Tabs } from './tabs/Tabs.js';
+export { Tag } from './tag/Tag.js';
+export { Textarea } from './textarea/Textarea.js';
+export { Toast, ToastProvider, useToast, } from './toast/Toast.js';
+export { Tooltip } from './tooltip/Tooltip.js';

package/dist/input/Input.d.ts

@@ -0,0 +1,9 @@
+import type { InputOwnProps } from '@tuuject/koi-core';
+import { type ComponentPropsWithRef } from 'react';
+export interface InputProps extends InputOwnProps, Omit<ComponentPropsWithRef<'input'>, keyof InputOwnProps> {
+}
+/**
+ * A single-line text field. Inside a Field it picks up the label, help, error and required state;
+ * on its own, give it an aria-label.
+ */
+export declare function Input({ size, invalid, iconStart, iconEnd, className, id, required, disabled, ...rest }: InputProps): import("react").JSX.Element;

package/dist/input/Input.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Input as BaseInput } from '@base-ui/react/input';
+import { cx } from '@tuuject/koi-react/styled-system/css';
+import { input } from '@tuuject/koi-react/styled-system/recipes';
+import { useContext } from 'react';
+import { KoiFieldContext } from '../field/context.js';
+/**
+ * A single-line text field. Inside a Field it picks up the label, help, error and required state;
+ * on its own, give it an aria-label.
+ */
+export function Input({ size = 'md', invalid, iconStart, iconEnd, className, id, required, disabled, ...rest }) {
+    const f = useContext(KoiFieldContext);
+    const s = input({ size });
+    return (_jsxs("span", { className: cx(s.root, className), children: [iconStart ? _jsx("span", { className: s.icon, children: iconStart }) : null, _jsx(BaseInput, { ...rest, id: id ?? f?.id, required: required ?? f?.required, disabled: disabled, "aria-invalid": invalid && !disabled ? true : rest['aria-invalid'], className: s.el }), iconEnd ? _jsx("span", { className: s.icon, children: iconEnd }) : null] }));
+}