@misoto22/kioku-ui 0.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Misoto22
+
+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,21 @@
+# `@misoto22/kioku-ui`
+
+Product-neutral React 19 components, semantic theme contracts, and compiled
+styles for Kioku UI.
+
+Compiled consumers import the runtime and both core stylesheets:
+
+```tsx
+import {Button} from '@misoto22/kioku-ui';
+import '@misoto22/kioku-ui/reset.css';
+import '@misoto22/kioku-ui/styles.css';
+```
+
+Source consumers use `@misoto22/kioku-ui/source` with the build integration
+from `@misoto22/kioku-ui-build`. StyleX recipes that only need the public
+semantic variables can import `@misoto22/kioku-ui/authoring.stylex`; the
+compiled `@misoto22/kioku-ui/authoring` entry is available when no source
+transform is configured.
+
+The host application supplies themes, routing adapters, and persistence. This
+package contains no Kioku routes, APIs, domain records, or theme defaults.

package/dist/Alert/Alert.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { StatusTone } from '../Badge/index.js';
+export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'role'> {
+    readonly icon?: ReactNode;
+    readonly tone?: StatusTone;
+}
+export declare function Alert({ children, icon, tone, ...props }: AlertProps): import("react").JSX.Element;

package/dist/Alert/Alert.doc.d.ts

@@ -0,0 +1,11 @@
+export declare const alertDoc: {
+    name: string;
+    description: string;
+    props: {
+        name: string;
+        description: string;
+    }[];
+    inheritedProps: string[];
+    example: string;
+    storyId: string;
+};

package/dist/Alert/Alert.doc.js

@@ -0,0 +1,15 @@
+import "../styles/stylex.css";
+export const alertDoc = {
+  name: 'Alert',
+  description: 'Announces feedback with a quiet status boundary and polite or assertive live semantics.',
+  props: [{
+    name: 'icon',
+    description: 'Overrides the tone-specific decorative status icon without adding an announcement.'
+  }, {
+    name: 'tone',
+    description: 'Selects the semantic status tone and live behavior.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLDivElement> except className and role'],
+  example: '<Alert tone="danger">Unable to save.</Alert>',
+  storyId: 'core-alert--default'
+};

package/dist/Alert/Alert.js

@@ -0,0 +1,149 @@
+import * as stylex from '@stylexjs/stylex';
+import { semanticTokens } from '../authoring.stylex.js';
+import "../styles/stylex.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const styles = {
+  base: {
+    kGNEyG: "x1cy8zhl",
+    kaIpWk: "x8kq9my",
+    ksu8eU: "x1jnjmdy",
+    kMzoRj: "xpxnlqs",
+    k1xSpc: "x78zum5",
+    kMv6JI: "xj0sio9",
+    kGuDYH: "x1ti3rys",
+    kOIVth: "xtl099x",
+    kLWn49: "x1ezks3f",
+    kmVPX3: "x14rluyd",
+    $$css: true
+  },
+  info: {
+    kWkggS: "x1760qql",
+    kVAM5u: "x124ze02",
+    kMwMTN: "x1ursi0k",
+    $$css: true
+  },
+  success: {
+    kWkggS: "xjdu3ya",
+    kVAM5u: "x86rt86",
+    kMwMTN: "xw2tli",
+    $$css: true
+  },
+  warning: {
+    kWkggS: "xqpqlc7",
+    kVAM5u: "xkfpxyo",
+    kMwMTN: "x6rqny5",
+    $$css: true
+  },
+  danger: {
+    kWkggS: "x12uiudv",
+    kVAM5u: "xcf5wgx",
+    kMwMTN: "x8bm3zx",
+    $$css: true
+  },
+  icon: {
+    kGNEyG: "x6s0dn4",
+    k1xSpc: "x78zum5",
+    kmuXW: "x2lah0s",
+    kZKoxP: "x7s8d8b",
+    kjj79g: "xl56j7k",
+    kzqmXN: "x1psh5v9",
+    $$css: true
+  },
+  content: {
+    kUk6DE: "x98rzlu",
+    k7Eaqz: "xeuugli",
+    $$css: true
+  }
+};
+function DefaultAlertIcon({
+  tone
+}) {
+  const sharedProps = {
+    fill: 'none',
+    height: '100%',
+    stroke: 'currentColor',
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    strokeWidth: 2,
+    viewBox: '0 0 20 20',
+    width: '100%'
+  };
+  if (tone === 'success') {
+    return /*#__PURE__*/_jsxs("svg", {
+      ...sharedProps,
+      children: [/*#__PURE__*/_jsx("circle", {
+        cx: "10",
+        cy: "10",
+        r: "8"
+      }), /*#__PURE__*/_jsx("path", {
+        d: "m6.5 10 2.2 2.2 4.8-5"
+      })]
+    });
+  }
+  if (tone === 'warning') {
+    return /*#__PURE__*/_jsxs("svg", {
+      ...sharedProps,
+      children: [/*#__PURE__*/_jsx("path", {
+        d: "M10 2.5 18 17H2L10 2.5Z"
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M10 7v4"
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M10 14h.01"
+      })]
+    });
+  }
+  if (tone === 'danger') {
+    return /*#__PURE__*/_jsxs("svg", {
+      ...sharedProps,
+      children: [/*#__PURE__*/_jsx("circle", {
+        cx: "10",
+        cy: "10",
+        r: "8"
+      }), /*#__PURE__*/_jsx("path", {
+        d: "m7 7 6 6M13 7l-6 6"
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsxs("svg", {
+    ...sharedProps,
+    children: [/*#__PURE__*/_jsx("circle", {
+      cx: "10",
+      cy: "10",
+      r: "8"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M10 9v5"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M10 6h.01"
+    })]
+  });
+}
+export function Alert({
+  children,
+  icon,
+  tone = 'info',
+  ...props
+}) {
+  const isDanger = tone === 'danger';
+  const hasCustomIcon = icon !== undefined && icon !== null && icon !== false;
+  return /*#__PURE__*/_jsxs("div", {
+    ...props,
+    "aria-live": isDanger ? 'assertive' : 'polite',
+    role: isDanger ? 'alert' : 'status',
+    ...stylex.props(styles.base, styles[tone]),
+    children: [/*#__PURE__*/_jsx("span", {
+      "aria-hidden": "true",
+      "data-alert-icon": hasCustomIcon ? 'custom' : tone,
+      ...{
+        className: "x6s0dn4 x78zum5 x2lah0s x7s8d8b xl56j7k x1psh5v9"
+      },
+      children: hasCustomIcon ? icon : /*#__PURE__*/_jsx(DefaultAlertIcon, {
+        tone: tone
+      })
+    }), /*#__PURE__*/_jsx("div", {
+      ...{
+        className: "x98rzlu xeuugli"
+      },
+      children: children
+    })]
+  });
+}

package/dist/Alert/index.d.ts

@@ -0,0 +1 @@
+export { Alert, type AlertProps } from './Alert.js';

package/dist/Alert/index.js

@@ -0,0 +1,2 @@
+import "../styles/stylex.css";
+export { Alert } from './Alert.js';

package/dist/AsyncState/AsyncState.d.ts

@@ -0,0 +1,30 @@
+import type { ReactNode } from 'react';
+export type AsyncStateValue<T> = {
+    readonly kind: 'loading';
+    readonly label?: string;
+} | {
+    readonly kind: 'empty';
+    readonly title: ReactNode;
+    readonly detail?: ReactNode;
+    readonly action?: ReactNode;
+} | {
+    readonly kind: 'error';
+    readonly title: ReactNode;
+    readonly detail?: ReactNode;
+    readonly retry?: ReactNode;
+} | {
+    readonly kind: 'ready';
+    readonly data: T;
+};
+type PendingAsyncStateValue<T> = Exclude<AsyncStateValue<T>, {
+    kind: 'ready';
+}>;
+export type AsyncStateProps<T> = {
+    readonly children: (data: T) => ReactNode;
+    readonly state: AsyncStateValue<T>;
+} | {
+    readonly children?: never;
+    readonly state: PendingAsyncStateValue<T>;
+};
+export declare function AsyncState<T>({ children, state }: AsyncStateProps<T>): import("react").JSX.Element;
+export {};

package/dist/AsyncState/AsyncState.doc.d.ts

@@ -0,0 +1,16 @@
+export declare const asyncStateDoc: {
+    name: string;
+    description: string;
+    props: ({
+        name: string;
+        description: string;
+        required?: undefined;
+    } | {
+        name: string;
+        description: string;
+        required: true;
+    })[];
+    inheritedProps: string[];
+    example: string;
+    storyId: string;
+};

package/dist/AsyncState/AsyncState.doc.js

@@ -0,0 +1,16 @@
+import "../styles/stylex.css";
+export const asyncStateDoc = {
+  name: 'AsyncState',
+  description: 'Renders distinct loading, empty, error, and ready states.',
+  props: [{
+    name: 'children',
+    description: 'Renders ready data and is required for the ready state.'
+  }, {
+    name: 'state',
+    description: 'Provides the current discriminated async state.',
+    required: true
+  }],
+  inheritedProps: ['No inherited DOM attributes'],
+  example: '<AsyncState state={{kind: "ready", data}}>{renderData}</AsyncState>',
+  storyId: 'core-async-state--default'
+};

package/dist/AsyncState/AsyncState.js

@@ -0,0 +1,36 @@
+import { Alert } from '../Alert/index.js';
+import { EmptyStateContent } from '../EmptyState/index.js';
+import { SpinnerVisual } from '../Spinner/index.js';
+import "../styles/stylex.css";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export function AsyncState({
+  children,
+  state
+}) {
+  if (state.kind === 'ready' && !children) {
+    throw new Error('AsyncState requires a renderer for ready data');
+  }
+  const loadingLabel = state.kind === 'loading' ? state.label ?? 'Loading' : undefined;
+  const statusContent = state.kind === 'loading' ? /*#__PURE__*/_jsx(SpinnerVisual, {}) : state.kind === 'empty' ? /*#__PURE__*/_jsx(EmptyStateContent, {
+    action: state.action,
+    detail: state.detail,
+    title: state.title
+  }) : state.kind === 'ready' ? children(state.data) : null;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("div", {
+      "aria-atomic": "true",
+      "aria-busy": state.kind === 'loading',
+      "aria-label": loadingLabel,
+      "aria-live": "polite",
+      role: "status",
+      children: statusContent
+    }), state.kind === 'error' ? /*#__PURE__*/_jsxs(Alert, {
+      tone: "danger",
+      children: [/*#__PURE__*/_jsx("div", {
+        children: state.title
+      }), state.detail ? /*#__PURE__*/_jsx("div", {
+        children: state.detail
+      }) : null, state.retry]
+    }) : null]
+  });
+}

package/dist/AsyncState/index.d.ts

@@ -0,0 +1 @@
+export { AsyncState, type AsyncStateProps, type AsyncStateValue, } from './AsyncState.js';

package/dist/AsyncState/index.js

@@ -0,0 +1,2 @@
+import "../styles/stylex.css";
+export { AsyncState } from './AsyncState.js';

package/dist/Badge/Badge.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from 'react';
+/** Semantic feedback tones shared by status components. */
+export type StatusTone = 'info' | 'success' | 'warning' | 'danger';
+/** Compact badge tones, including a non-status neutral treatment. */
+export type BadgeTone = 'neutral' | StatusTone;
+/** Props for compact status or category text. */
+export interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'className'> {
+    readonly tone?: BadgeTone;
+}
+export declare function Badge({ children, tone, ...props }: BadgeProps): import("react").JSX.Element;

package/dist/Badge/Badge.doc.d.ts

@@ -0,0 +1,11 @@
+export declare const badgeDoc: {
+    name: string;
+    description: string;
+    props: {
+        name: string;
+        description: string;
+    }[];
+    inheritedProps: string[];
+    example: string;
+    storyId: string;
+};

package/dist/Badge/Badge.doc.js

@@ -0,0 +1,12 @@
+import "../styles/stylex.css";
+export const badgeDoc = {
+  name: 'Badge',
+  description: 'Displays compact, non-live status or category text.',
+  props: [{
+    name: 'tone',
+    description: 'Selects the neutral default or a semantic status tone.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLSpanElement> except className'],
+  example: '<Badge tone="success">Available</Badge>',
+  storyId: 'core-badge--default'
+};

package/dist/Badge/Badge.js

@@ -0,0 +1,58 @@
+import * as stylex from '@stylexjs/stylex';
+import { semanticTokens } from '../authoring.stylex.js';
+
+/** Semantic feedback tones shared by status components. */
+import "../styles/stylex.css";
+/** Compact badge tones, including a non-status neutral treatment. */
+import { jsx as _jsx } from "react/jsx-runtime";
+const styles = {
+  base: {
+    kaIpWk: "x8kq9my",
+    k1xSpc: "x3nfvp2",
+    kMv6JI: "xj0sio9",
+    kGuDYH: "xnlz8j1",
+    k63SB2: "x1m30uz7",
+    k8WAf4: "x10y07nz",
+    kg3NbH: "x1qtbwip",
+    $$css: true
+  },
+  neutral: {
+    kWkggS: "xavu78a",
+    kMwMTN: "x17y7oyd",
+    $$css: true
+  },
+  info: {
+    kWkggS: "x1760qql",
+    kMwMTN: "x1ursi0k",
+    $$css: true
+  },
+  success: {
+    kWkggS: "xjdu3ya",
+    kMwMTN: "xw2tli",
+    $$css: true
+  },
+  warning: {
+    kWkggS: "xqpqlc7",
+    kMwMTN: "x6rqny5",
+    $$css: true
+  },
+  danger: {
+    kWkggS: "x12uiudv",
+    kMwMTN: "x8bm3zx",
+    $$css: true
+  }
+};
+
+/** Props for compact status or category text. */
+
+export function Badge({
+  children,
+  tone = 'neutral',
+  ...props
+}) {
+  return /*#__PURE__*/_jsx("span", {
+    ...props,
+    ...stylex.props(styles.base, styles[tone]),
+    children: children
+  });
+}

package/dist/Badge/index.d.ts

@@ -0,0 +1 @@
+export { Badge, type BadgeProps, type BadgeTone, type StatusTone, } from './Badge.js';

package/dist/Badge/index.js

@@ -0,0 +1,2 @@
+import "../styles/stylex.css";
+export { Badge } from './Badge.js';

package/dist/Button/Button.d.ts

@@ -0,0 +1,18 @@
+import type { ButtonHTMLAttributes } from 'react';
+/** Visual sizes shared by native action controls. */
+export type ControlSize = 'sm' | 'md' | 'lg';
+/** Semantic emphasis variants shared by native action controls. */
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'destructive';
+/** Props for a text-labelled native action button. */
+export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className'> {
+    readonly loading?: boolean;
+    readonly size?: ControlSize;
+    readonly variant?: ButtonVariant;
+}
+interface ActionControlProps extends ButtonProps {
+    readonly iconOnly?: boolean;
+}
+/** @internal Shared native implementation for Button and IconButton. */
+export declare function ActionControl({ 'aria-busy': ariaBusy, children, disabled, iconOnly, loading, size, type, variant, ...props }: ActionControlProps): import("react").JSX.Element;
+export declare function Button(props: ButtonProps): import("react").JSX.Element;
+export {};

package/dist/Button/Button.doc.d.ts

@@ -0,0 +1,11 @@
+export declare const buttonDoc: {
+    name: string;
+    description: string;
+    props: {
+        name: string;
+        description: string;
+    }[];
+    inheritedProps: string[];
+    example: string;
+    storyId: string;
+};

package/dist/Button/Button.doc.js

@@ -0,0 +1,18 @@
+import "../styles/stylex.css";
+export const buttonDoc = {
+  name: 'Button',
+  description: 'Triggers an action through native button semantics.',
+  props: [{
+    name: 'loading',
+    description: 'Shows progress and disables native activation.'
+  }, {
+    name: 'size',
+    description: 'Selects the fixed control height.'
+  }, {
+    name: 'variant',
+    description: 'Selects a semantic visual emphasis.'
+  }],
+  inheritedProps: ['ButtonHTMLAttributes<HTMLButtonElement> except className'],
+  example: '<Button onClick={save}>Save</Button>',
+  storyId: 'core-button--default'
+};

package/dist/Button/Button.js

@@ -0,0 +1,151 @@
+import * as stylex from '@stylexjs/stylex';
+import { semanticTokens } from '../authoring.stylex.js';
+import { SpinnerVisual } from '../Spinner/index.js';
+import "../styles/stylex.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const styles = {
+  base: {
+    kGNEyG: "x6s0dn4",
+    kB7OPa: "x9f619",
+    kaIpWk: "x8kq9my",
+    ksu8eU: "x1jnjmdy",
+    kMzoRj: "xpxnlqs",
+    k1xSpc: "x3nfvp2",
+    kMv6JI: "xj0sio9",
+    k63SB2: "x1m30uz7",
+    kOIVth: "x1ap6kct",
+    kjj79g: "xl56j7k",
+    kLWn49: "x1ezks3f",
+    kVAEAm: "x1n2onr6",
+    kD2jPA: "x48zea8",
+    kdODIN: "x1oulntk",
+    kWC4TW: "x609gy3",
+    kZs9gx: "x15meki4",
+    kiEn40: "xz32tfx",
+    k7shQP: "x1p22nma",
+    kPJHz1: "x17lds6u",
+    $$css: true
+  },
+  sm: {
+    kGuDYH: "xltg2ad",
+    kZKoxP: "x1vbl8lt",
+    kg3NbH: "x1qtbwip",
+    $$css: true
+  },
+  md: {
+    kGuDYH: "x1ti3rys",
+    kZKoxP: "xr8hsnb",
+    kg3NbH: "x1wkw8jr",
+    $$css: true
+  },
+  lg: {
+    kGuDYH: "x1ti3rys",
+    kZKoxP: "xscltuj",
+    kg3NbH: "x1q83fih",
+    $$css: true
+  },
+  primary: {
+    kWkggS: "x1j40q36",
+    kVAM5u: "x10ghty7",
+    kMwMTN: "x8ect3v",
+    ktLb98: "xahjstz",
+    ksVfMn: "xx21tl2",
+    kDKVdO: "xzpaccd",
+    kRIasW: "x6v1che",
+    $$css: true
+  },
+  secondary: {
+    kWkggS: "x1ixvsy6",
+    kVAM5u: "x1wxkff4",
+    kMwMTN: "x1y4yzzg",
+    ktLb98: "x1975ut4",
+    ksVfMn: "x1be0cy8",
+    kDKVdO: "xbo0ryh",
+    kRIasW: "x1u44if6",
+    $$css: true
+  },
+  ghost: {
+    kWkggS: "xjbqb8w",
+    kVAM5u: "x9r1u3d",
+    kMwMTN: "x1y4yzzg",
+    ktLb98: "x1975ut4",
+    kDKVdO: "xbo0ryh",
+    $$css: true
+  },
+  destructive: {
+    kWkggS: "x12uiudv",
+    kVAM5u: "xcf5wgx",
+    kMwMTN: "x8bm3zx",
+    k90Bq6: "xuc1b5w",
+    kFepIV: "x1pg383a",
+    $$css: true
+  },
+  loading: {
+    kkrTdU: "x19v85br",
+    $$css: true
+  },
+  iconOnly: {
+    kg3NbH: "xnjsko4",
+    $$css: true
+  },
+  iconSm: {
+    kzqmXN: "x9mi25i",
+    $$css: true
+  },
+  iconMd: {
+    kzqmXN: "x4ml2zf",
+    $$css: true
+  },
+  iconLg: {
+    kzqmXN: "x1089um4",
+    $$css: true
+  },
+  iconHitTarget: {
+    kgeoSG: "x1cpjm7i",
+    kgzTxl: "x17f96yv",
+    k96MEf: "x1knuo7r",
+    kSJ0CW: "xfbisj7",
+    kEoFBp: "x1hmns74",
+    kcTAPf: "xbnewub",
+    kOlAkY: "x1o8qpxl",
+    $$css: true
+  }
+};
+const iconSizes = {
+  sm: styles.iconSm,
+  md: styles.iconMd,
+  lg: styles.iconLg
+};
+
+/** Visual sizes shared by native action controls. */
+
+/** Semantic emphasis variants shared by native action controls. */
+
+/** Props for a text-labelled native action button. */
+
+/** @internal Shared native implementation for Button and IconButton. */
+export function ActionControl({
+  'aria-busy': ariaBusy,
+  children,
+  disabled,
+  iconOnly = false,
+  loading = false,
+  size = 'md',
+  type = 'button',
+  variant = 'primary',
+  ...props
+}) {
+  return /*#__PURE__*/_jsxs("button", {
+    ...props,
+    "aria-busy": loading ? 'true' : ariaBusy,
+    disabled: disabled || loading,
+    ...stylex.props(styles.base, styles[size], styles[variant], loading && styles.loading, iconOnly && styles.iconOnly, iconOnly && iconSizes[size], iconOnly && styles.iconHitTarget),
+    type: type,
+    children: [loading ? /*#__PURE__*/_jsx(SpinnerVisual, {}) : null, iconOnly && loading ? null : children]
+  });
+}
+export function Button(props) {
+  return /*#__PURE__*/_jsx(ActionControl, {
+    ...props
+  });
+}

package/dist/Button/index.d.ts

@@ -0,0 +1 @@
+export { ActionControl, Button, type ButtonProps, type ButtonVariant, type ControlSize, } from './Button.js';

package/dist/Button/index.js

@@ -0,0 +1,2 @@
+import "../styles/stylex.css";
+export { ActionControl, Button } from './Button.js';

package/dist/Card/Card.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'react';
+export type CardElevation = 'none' | 'low' | 'medium';
+export interface CardProps extends Omit<HTMLAttributes<HTMLElement>, 'className'> {
+    readonly elevation?: CardElevation;
+}
+export declare function Card({ children, elevation, ...props }: CardProps): import("react").JSX.Element;