@misoto22/kioku-ui 0.0.0

package/dist/TextInput/TextInput.js

@@ -0,0 +1,49 @@
+import * as stylex from '@stylexjs/stylex';
+import { semanticTokens } from '../authoring.stylex.js';
+import { useFieldControl } from '../Field/index.js';
+import "../styles/stylex.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function TextInput({
+  'aria-describedby': ariaDescribedBy,
+  'aria-invalid': ariaInvalid,
+  disabled,
+  id,
+  onValueChange,
+  readOnly,
+  required,
+  type = 'text',
+  ...props
+}) {
+  const field = useFieldControl();
+  const describedBy = [field?.describedBy, ariaDescribedBy].filter(Boolean).join(' ') || undefined;
+  const resolvedInvalid = ariaInvalid ?? field?.invalid;
+  const isInvalid = resolvedInvalid !== undefined && resolvedInvalid !== false && resolvedInvalid !== 'false';
+  function handleChange(event) {
+    onValueChange?.(event.currentTarget.value);
+  }
+  return /*#__PURE__*/_jsx("input", {
+    ...props,
+    "aria-describedby": describedBy,
+    "aria-invalid": resolvedInvalid,
+    disabled: disabled,
+    id: field?.controlId ?? id,
+    onChange: handleChange,
+    readOnly: readOnly,
+    required: required ?? field?.required,
+    ...{
+      0: {
+        className: "x1ixvsy6 x9f619 xilcjya x8kq9my x1jnjmdy xpxnlqs x1y4yzzg xj0sio9 x1ti3rys xr8hsnb x1ezks3f x10y07nz x1qtbwip x1e4qbc8 x48zea8 x1oulntk x609gy3 xn50xp2 x15meki4 xz32tfx x1p22nma x17lds6u xnhf8v xyo1xaz"
+      },
+      2: {
+        className: "x9f619 xilcjya x8kq9my x1jnjmdy xpxnlqs xj0sio9 x1ti3rys xr8hsnb x1ezks3f x10y07nz x1qtbwip x1e4qbc8 x48zea8 x1oulntk x609gy3 xn50xp2 x15meki4 xz32tfx x1p22nma x17lds6u xnhf8v xyo1xaz xavu78a x1y4yzzg"
+      },
+      1: {
+        className: "x1ixvsy6 x9f619 x8kq9my x1jnjmdy xpxnlqs x1y4yzzg xj0sio9 x1ti3rys xr8hsnb x1ezks3f x10y07nz x1qtbwip x1e4qbc8 x48zea8 x1oulntk x609gy3 x15meki4 xz32tfx x1p22nma x17lds6u xcf5wgx x1v4z90s xgozkua x1r1toob"
+      },
+      3: {
+        className: "x9f619 x8kq9my x1jnjmdy xpxnlqs xj0sio9 x1ti3rys xr8hsnb x1ezks3f x10y07nz x1qtbwip x1e4qbc8 x48zea8 x1oulntk x609gy3 x15meki4 xz32tfx x1p22nma x17lds6u xavu78a x1y4yzzg xcf5wgx x1v4z90s xgozkua x1r1toob"
+      }
+    }[!!(readOnly && !disabled) << 1 | !!(isInvalid && !disabled) << 0],
+    type: type
+  });
+}

package/dist/TextInput/index.d.ts

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

package/dist/TextInput/index.js

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

package/dist/Toggle/Toggle.d.ts

@@ -0,0 +1,16 @@
+import { type ButtonHTMLAttributes } from 'react';
+type SharedToggleProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'aria-checked' | 'aria-pressed' | 'className' | 'onChange' | 'role'> & {
+    readonly onPressedChange?: (pressed: boolean) => void;
+};
+type ControlledToggleProps = SharedToggleProps & {
+    readonly defaultPressed?: never;
+    readonly onPressedChange: (pressed: boolean) => void;
+    readonly pressed: boolean;
+};
+type UncontrolledToggleProps = SharedToggleProps & {
+    readonly defaultPressed?: boolean;
+    readonly pressed?: never;
+};
+export type ToggleProps = ControlledToggleProps | UncontrolledToggleProps;
+export declare function Toggle({ children, defaultPressed, disabled, onClick, onPressedChange, pressed, type, ...props }: ToggleProps): import("react").JSX.Element;
+export {};

package/dist/Toggle/Toggle.doc.d.ts

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

package/dist/Toggle/Toggle.doc.js

@@ -0,0 +1,21 @@
+import "../styles/stylex.css";
+export const toggleDoc = {
+  name: 'Toggle',
+  description: 'Switches a controlled or uncontrolled boolean setting.',
+  props: [{
+    name: 'defaultPressed',
+    description: 'Sets the initial state for an uncontrolled switch.'
+  }, {
+    name: 'disabled',
+    description: 'Disables native switch activation and focus behavior.'
+  }, {
+    name: 'onPressedChange',
+    description: 'Receives the next boolean state after activation.'
+  }, {
+    name: 'pressed',
+    description: 'Controls the current switch state without internal updates.'
+  }],
+  inheritedProps: ['ButtonHTMLAttributes<HTMLButtonElement> except aria-checked, aria-pressed, className, onChange, and role'],
+  example: '<Toggle aria-label="Enable option" defaultPressed />',
+  storyId: 'core-toggle--default'
+};

package/dist/Toggle/Toggle.js

@@ -0,0 +1,64 @@
+import * as stylex from '@stylexjs/stylex';
+import { useState } from 'react';
+import { semanticTokens } from '../authoring.stylex.js';
+import "../styles/stylex.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function Toggle({
+  children,
+  defaultPressed = false,
+  disabled,
+  onClick,
+  onPressedChange,
+  pressed,
+  type = 'button',
+  ...props
+}) {
+  const [internalPressed, setInternalPressed] = useState(defaultPressed);
+  const isPressed = pressed ?? internalPressed;
+  return /*#__PURE__*/_jsxs("button", {
+    ...props,
+    "aria-checked": isPressed,
+    disabled: disabled,
+    onClick: event => {
+      const nextPressed = !isPressed;
+      if (pressed === undefined) {
+        setInternalPressed(nextPressed);
+      }
+      onPressedChange?.(nextPressed);
+      onClick?.(event);
+    },
+    role: "switch",
+    ...{
+      className: "x6s0dn4 xjbqb8w x9r1u3d xnpwncj x1jnjmdy xpxnlqs x3nfvp2 x1y4yzzg xj0sio9 x1ti3rys x1ap6kct xl56j7k xq5j1ye x16d7gm3 x10y07nz xov5yc9 x1pg383a x609gy3 x15meki4 xz32tfx x1p22nma x17lds6u xszm2ej"
+    },
+    type: type,
+    children: [/*#__PURE__*/_jsx("span", {
+      "aria-hidden": "true",
+      ...{
+        0: {
+          className: "x6s0dn4 xavu78a xilcjya xnpwncj x1jnjmdy xpxnlqs x3nfvp2 x2lah0s x7s8d8b x1nhvcw1 x1089um4"
+        },
+        2: {
+          className: "x6s0dn4 xnpwncj x1jnjmdy xpxnlqs x3nfvp2 x2lah0s x7s8d8b x1089um4 x1j40q36 x10ghty7 x13a6bvl"
+        },
+        1: {
+          className: "x6s0dn4 xnpwncj x1jnjmdy xpxnlqs x3nfvp2 x2lah0s x7s8d8b x1nhvcw1 x1089um4 x19blmh3 x1lnk2a9"
+        },
+        3: {
+          className: "x6s0dn4 xnpwncj x1jnjmdy xpxnlqs x3nfvp2 x2lah0s x7s8d8b x1089um4 x13a6bvl x19blmh3 x1lnk2a9"
+        }
+      }[!!isPressed << 1 | !!disabled << 0],
+      children: /*#__PURE__*/_jsx("span", {
+        "aria-hidden": "true",
+        ...{
+          0: {
+            className: "x40o0ze xnpwncj x1elh21b x1t7hrd4 x1af11ui"
+          },
+          1: {
+            className: "xnpwncj x1elh21b x1t7hrd4 x1af11ui xsq02lv"
+          }
+        }[!!disabled << 0]
+      })
+    }), children]
+  });
+}

package/dist/Toggle/index.d.ts

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

package/dist/Toggle/index.js

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

package/dist/VisuallyHidden/VisuallyHidden.d.ts

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

package/dist/VisuallyHidden/VisuallyHidden.doc.d.ts

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

package/dist/VisuallyHidden/VisuallyHidden.doc.js

@@ -0,0 +1,12 @@
+import "../styles/stylex.css";
+export const visuallyHiddenDoc = {
+  name: 'VisuallyHidden',
+  description: 'Keeps text available to assistive technology while hiding it visually.',
+  props: [{
+    name: 'children',
+    description: 'Accessible text to hide visually.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLSpanElement> except className and children'],
+  example: '<button><VisuallyHidden>Open navigation</VisuallyHidden></button>',
+  storyId: 'core-visually-hidden--default'
+};

package/dist/VisuallyHidden/VisuallyHidden.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 VisuallyHidden({
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx("span", {
+    ...props,
+    ...{
+      className: "xeh89do x1hyvwdk xjm9jq1 xkdpibf xb3r6kr x10l6tqk xuxw1ft x1i1rx1s"
+    },
+    children: children
+  });
+}

package/dist/VisuallyHidden/index.d.ts

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

package/dist/VisuallyHidden/index.js

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

package/dist/authoring.stylex.d.ts

@@ -0,0 +1,75 @@
+import * as stylex from '@stylexjs/stylex';
+export declare const semanticTokens: stylex.VarGroup<Readonly<{
+    colorCanvas: string;
+    colorSurface: string;
+    colorSurfaceRaised: string;
+    colorSurfaceMuted: string;
+    colorText: string;
+    colorTextSecondary: string;
+    colorTextMuted: string;
+    colorTextOnAccent: string;
+    colorAccent: string;
+    colorAccentHover: string;
+    colorAccentActive: string;
+    colorOverlayHover: string;
+    colorOverlayActive: string;
+    colorDisabledSurface: string;
+    colorDisabledText: string;
+    colorFocus: string;
+    borderDefault: string;
+    borderStrong: string;
+    borderInteractive: string;
+    borderDisabled: string;
+    borderWidth: string;
+    borderStyle: string;
+    statusInfoSurface: string;
+    statusInfoText: string;
+    statusSuccessSurface: string;
+    statusSuccessText: string;
+    statusWarningSurface: string;
+    statusWarningText: string;
+    statusDangerSurface: string;
+    statusDangerText: string;
+    focusWidth: string;
+    focusOffset: string;
+    fontFamilyBody: string;
+    fontFamilyHeading: string;
+    fontFamilyDisplay: string;
+    fontFamilyMono: string;
+    fontFeatureSettings: string;
+    fontSizeXs: string;
+    fontSizeSm: string;
+    fontSizeMd: string;
+    fontSizeLg: string;
+    fontSizeXl: string;
+    fontSize2xl: string;
+    fontWeightRegular: string;
+    fontWeightMedium: string;
+    fontWeightStrong: string;
+    lineHeightBody: string;
+    lineHeightHeading: string;
+    spacingXs: string;
+    spacingSm: string;
+    spacingMd: string;
+    spacingLg: string;
+    spacingXl: string;
+    spacing2xl: string;
+    radiusInner: string;
+    radiusElement: string;
+    radiusContainer: string;
+    radiusPage: string;
+    radiusFull: string;
+    sizeControlSm: string;
+    sizeControlMd: string;
+    sizeControlLg: string;
+    sizeHitTarget: string;
+    elevationLow: string;
+    elevationMedium: string;
+    elevationHigh: string;
+    textureGrain: string;
+    durationFast: string;
+    durationModerate: string;
+    durationSlow: string;
+    easingStandard: string;
+    easingEmphasized: string;
+}>, symbol>;

package/dist/authoring.stylex.js

@@ -0,0 +1,77 @@
+import * as stylex from '@stylexjs/stylex';
+import "./styles/stylex.css";
+export const semanticTokens = {
+  colorCanvas: "var(--x1cq72ri)",
+  colorSurface: "var(--xu8qooe)",
+  colorSurfaceRaised: "var(--x14rudx0)",
+  colorSurfaceMuted: "var(--x194ig0k)",
+  colorText: "var(--xfrcqq4)",
+  colorTextSecondary: "var(--x1de802z)",
+  colorTextMuted: "var(--x1f22vz5)",
+  colorTextOnAccent: "var(--x1vmxqsc)",
+  colorAccent: "var(--x1bh700q)",
+  colorAccentHover: "var(--xa1h56u)",
+  colorAccentActive: "var(--x3l7v5j)",
+  colorOverlayHover: "var(--x1cxqvb6)",
+  colorOverlayActive: "var(--x3mkrpc)",
+  colorDisabledSurface: "var(--xfp4pro)",
+  colorDisabledText: "var(--x1cuz3ib)",
+  colorFocus: "var(--x1doqpnu)",
+  borderDefault: "var(--xwf0as5)",
+  borderStrong: "var(--x53p1qr)",
+  borderInteractive: "var(--x113cbwm)",
+  borderDisabled: "var(--xfiqpwe)",
+  borderWidth: "var(--xft28wq)",
+  borderStyle: "var(--xeq3ive)",
+  statusInfoSurface: "var(--x1qb8v80)",
+  statusInfoText: "var(--xm1gjpn)",
+  statusSuccessSurface: "var(--xfs9e5l)",
+  statusSuccessText: "var(--xaqiz8e)",
+  statusWarningSurface: "var(--x10bscj6)",
+  statusWarningText: "var(--x18s4tcb)",
+  statusDangerSurface: "var(--x9bkl3k)",
+  statusDangerText: "var(--xjxbi6p)",
+  focusWidth: "var(--xpsq03c)",
+  focusOffset: "var(--x1jr7oj0)",
+  fontFamilyBody: "var(--x1sq5zos)",
+  fontFamilyHeading: "var(--x1rfpocb)",
+  fontFamilyDisplay: "var(--xbiefh2)",
+  fontFamilyMono: "var(--xxh3pa3)",
+  fontFeatureSettings: "var(--x170l7ej)",
+  fontSizeXs: "var(--x1wkgbgz)",
+  fontSizeSm: "var(--x1pipkt8)",
+  fontSizeMd: "var(--xdc39sg)",
+  fontSizeLg: "var(--xkv0k7x)",
+  fontSizeXl: "var(--x1wok735)",
+  fontSize2xl: "var(--x1kkm6dc)",
+  fontWeightRegular: "var(--xtz9r7k)",
+  fontWeightMedium: "var(--xuivm6y)",
+  fontWeightStrong: "var(--x49sa2c)",
+  lineHeightBody: "var(--x13wxxvu)",
+  lineHeightHeading: "var(--x11tbmtr)",
+  spacingXs: "var(--xdjikt8)",
+  spacingSm: "var(--x5vtqbe)",
+  spacingMd: "var(--xpochg2)",
+  spacingLg: "var(--xkgi81h)",
+  spacingXl: "var(--x3fz2am)",
+  spacing2xl: "var(--x1xp2mai)",
+  radiusInner: "var(--x1l7xjh)",
+  radiusElement: "var(--x1g2gpfl)",
+  radiusContainer: "var(--xucgv7m)",
+  radiusPage: "var(--xhhn8oy)",
+  radiusFull: "var(--xhr22cf)",
+  sizeControlSm: "var(--x8vzgg0)",
+  sizeControlMd: "var(--x2kaybk)",
+  sizeControlLg: "var(--xtcwerp)",
+  sizeHitTarget: "var(--x690rjz)",
+  elevationLow: "var(--xw7f8gl)",
+  elevationMedium: "var(--x1036efz)",
+  elevationHigh: "var(--x1loblyq)",
+  textureGrain: "var(--xp593nr)",
+  durationFast: "var(--x1hxkyqf)",
+  durationModerate: "var(--x10so70s)",
+  durationSlow: "var(--x1db3u3v)",
+  easingStandard: "var(--x1sojct7)",
+  easingEmphasized: "var(--x149jslo)",
+  __varGroupHash__: "xrmadwz"
+};

package/dist/components/Alert.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { StatusTone } from './Badge.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/components/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/components/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/components/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/components/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/components/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/components/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'
+};