@misoto22/kioku-ui 0.0.0

package/dist/components/AsyncState.js

@@ -0,0 +1,36 @@
+import { Alert } from './Alert.js';
+import { EmptyStateContent } from './EmptyState.js';
+import { SpinnerVisual } from './Spinner.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/components/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/components/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/components/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/components/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: "xnpwncj",
+    k1xSpc: "x3nfvp2",
+    kMv6JI: "xj0sio9",
+    kGuDYH: "xltg2ad",
+    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/components/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/components/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/components/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/components/Button.js

@@ -0,0 +1,151 @@
+import * as stylex from '@stylexjs/stylex';
+import { semanticTokens } from '../authoring.stylex.js';
+import { SpinnerVisual } from './Spinner.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/components/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;

package/dist/components/Card.doc.d.ts

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

package/dist/components/Card.doc.js

@@ -0,0 +1,15 @@
+import "../styles/stylex.css";
+export const cardDoc = {
+  name: 'Card',
+  description: 'Groups self-contained content in a token-backed article surface.',
+  props: [{
+    name: 'children',
+    description: 'The self-contained article content.'
+  }, {
+    name: 'elevation',
+    description: 'Optional boundary treatment: "none" uses a border; "low" and "medium" use only the matching elevation.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLElement> except className and children'],
+  example: '<Card aria-label="Summary" elevation="none"><Text>Content</Text></Card>',
+  storyId: 'core-card--default'
+};

package/dist/components/Card.js

@@ -0,0 +1,41 @@
+import * as stylex from '@stylexjs/stylex';
+import { semanticTokens } from '../authoring.stylex.js';
+import "../styles/stylex.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const styles = {
+  base: {
+    kWkggS: "x1ixvsy6",
+    kaIpWk: "x7xrhi9",
+    kMwMTN: "x1y4yzzg",
+    kmVPX3: "x167l562",
+    $$css: true
+  },
+  none: {
+    kVAM5u: "xilcjya",
+    ksu8eU: "x1jnjmdy",
+    kMzoRj: "xpxnlqs",
+    kGVxlE: "x1gnnqk1",
+    $$css: true
+  },
+  low: {
+    ksu8eU: "xng3xce",
+    kGVxlE: "x1elh21b",
+    $$css: true
+  },
+  medium: {
+    ksu8eU: "xng3xce",
+    kGVxlE: "x165nt33",
+    $$css: true
+  }
+};
+export function Card({
+  children,
+  elevation = 'none',
+  ...props
+}) {
+  return /*#__PURE__*/_jsx("article", {
+    ...props,
+    ...stylex.props(styles.base, styles[elevation]),
+    children: children
+  });
+}

package/dist/components/CardFooter.d.ts

@@ -0,0 +1,3 @@
+import type { HTMLAttributes } from 'react';
+export type CardFooterProps = Omit<HTMLAttributes<HTMLElement>, 'className'>;
+export declare function CardFooter({ children, ...props }: CardFooterProps): import("react").JSX.Element;

package/dist/components/CardFooter.doc.d.ts

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

package/dist/components/CardFooter.doc.js

@@ -0,0 +1,12 @@
+import "../styles/stylex.css";
+export const cardFooterDoc = {
+  name: 'CardFooter',
+  description: 'Provides a padded native footer with an inward divider when composed directly inside a Card.',
+  props: [{
+    name: 'children',
+    description: 'The footer content.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLElement> except className and children'],
+  example: '<Card><Text>Content</Text><CardFooter><Text>Updated now</Text></CardFooter></Card>',
+  storyId: 'core-card--card-footer'
+};

package/dist/components/CardFooter.js

@@ -0,0 +1,16 @@
+import * as stylex from '@stylexjs/stylex';
+import { semanticTokens } from '../authoring.stylex.js';
+import "../styles/stylex.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function CardFooter({
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx("footer", {
+    ...props,
+    ...{
+      className: "x1pe616k x4tqos1 xlyo07a x1yc2x4e x19a07bp x1suer1w x17uk85o x92ksv2"
+    },
+    children: children
+  });
+}

package/dist/components/CardHeader.d.ts

@@ -0,0 +1,3 @@
+import type { HTMLAttributes } from 'react';
+export type CardHeaderProps = Omit<HTMLAttributes<HTMLElement>, 'className'>;
+export declare function CardHeader({ children, ...props }: CardHeaderProps): import("react").JSX.Element;

package/dist/components/CardHeader.doc.d.ts

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

package/dist/components/CardHeader.doc.js

@@ -0,0 +1,12 @@
+import "../styles/stylex.css";
+export const cardHeaderDoc = {
+  name: 'CardHeader',
+  description: 'Provides a padded native header with an inward divider when composed directly inside a Card.',
+  props: [{
+    name: 'children',
+    description: 'The header content.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLElement> except className and children'],
+  example: '<Card><CardHeader><Heading level={2}>Card title</Heading></CardHeader><Text>Content</Text></Card>',
+  storyId: 'core-card--card-header'
+};

package/dist/components/CardHeader.js

@@ -0,0 +1,16 @@
+import * as stylex from '@stylexjs/stylex';
+import { semanticTokens } from '../authoring.stylex.js';
+import "../styles/stylex.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function CardHeader({
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx("header", {
+    ...props,
+    ...{
+      className: "x1k3hjl9 x1w5tod1 xeq6m5c x5845i8 x1sx9ztw x1suer1w x17uk85o x92ksv2"
+    },
+    children: children
+  });
+}

package/dist/components/Center.d.ts

@@ -0,0 +1,3 @@
+import type { HTMLAttributes } from 'react';
+export type CenterProps = Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
+export declare function Center({ children, ...props }: CenterProps): import("react").JSX.Element;

package/dist/components/Center.doc.d.ts

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

package/dist/components/Center.doc.js

@@ -0,0 +1,12 @@
+import "../styles/stylex.css";
+export const centerDoc = {
+  name: 'Center',
+  description: 'Centers child content on both layout axes.',
+  props: [{
+    name: 'children',
+    description: 'The content to center.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLDivElement> except className and children'],
+  example: '<Center><Text>Centered content</Text></Center>',
+  storyId: 'core-center--default'
+};

package/dist/components/Center.js

@@ -0,0 +1,15 @@
+import * as stylex from '@stylexjs/stylex';
+import "../styles/stylex.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Center({
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx("div", {
+    ...props,
+    ...{
+      className: "x6s0dn4 x78zum5 xl56j7k"
+    },
+    children: children
+  });
+}

package/dist/components/Divider.d.ts

@@ -0,0 +1,3 @@
+import type { HTMLAttributes } from 'react';
+export type DividerProps = Omit<HTMLAttributes<HTMLHRElement>, 'className'>;
+export declare function Divider(props: DividerProps): import("react").JSX.Element;

package/dist/components/Divider.doc.d.ts

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

package/dist/components/Divider.doc.js

@@ -0,0 +1,12 @@
+import "../styles/stylex.css";
+export const dividerDoc = {
+  name: 'Divider',
+  description: 'Renders a token-backed native horizontal separator.',
+  props: [{
+    name: 'aria-label',
+    description: 'Optional accessible separator label.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLHRElement> except className'],
+  example: '<Divider aria-label="Separates summary from details" />',
+  storyId: 'core-divider--default'
+};

package/dist/components/Divider.js

@@ -0,0 +1,12 @@
+import * as stylex from '@stylexjs/stylex';
+import { semanticTokens } from '../authoring.stylex.js';
+import "../styles/stylex.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Divider(props) {
+  return /*#__PURE__*/_jsx("hr", {
+    ...props,
+    ...{
+      className: "x1pe616k x4tqos1 xlyo07a x1ghz6dp"
+    }
+  });
+}

package/dist/components/EmptyState.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export type EmptyStateSize = 'compact' | 'default';
+export interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'title'> {
+    readonly action?: ReactNode;
+    readonly detail?: ReactNode;
+    readonly size?: EmptyStateSize;
+    readonly title: ReactNode;
+    readonly visual?: ReactNode;
+}
+export declare function EmptyState({ action, detail, size, title, visual, ...props }: EmptyStateProps): import("react").JSX.Element;
+export declare function EmptyStateContent({ action, detail, size, title, visual, }: EmptyStateProps): import("react").JSX.Element;

package/dist/components/EmptyState.doc.d.ts

@@ -0,0 +1,16 @@
+export declare const emptyStateDoc: {
+    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/components/EmptyState.doc.js

@@ -0,0 +1,25 @@
+import "../styles/stylex.css";
+export const emptyStateDoc = {
+  name: 'EmptyState',
+  description: 'Presents an announced empty result with optional detail and action.',
+  props: [{
+    name: 'action',
+    description: 'Provides an optional consumer-owned recovery action.'
+  }, {
+    name: 'detail',
+    description: 'Provides optional supporting empty-state content.'
+  }, {
+    name: 'size',
+    description: 'Adjusts container padding and grouping rhythm.'
+  }, {
+    name: 'title',
+    description: 'Names the empty state.',
+    required: true
+  }, {
+    name: 'visual',
+    description: 'Provides optional consumer-owned visual content before the copy; consumers own its accessible semantics.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLDivElement> except className and title'],
+  example: '<EmptyState title="No results" detail="Try another query." size="compact" />',
+  storyId: 'core-empty-state--default'
+};