@misoto22/kioku-ui 0.0.0 → 0.2.0

package/dist/CheckboxInput/CheckboxInput.js

@@ -0,0 +1,173 @@
+import * as stylex from '@stylexjs/stylex';
+import { useEffect, useRef, useState } from 'react';
+import { semanticTokens } from '../authoring.stylex.js';
+import { useFieldControl } from '../Field/index.js';
+
+// The box is one micro-control tall — the same block a switch track occupies,
+// so a row of checkboxes and a row of switches sit on the same rhythm. Its
+// offset is the relationship that matters: it centres on the *first line* of
+// the label rather than on the label's whole box, so a label that wraps to two
+// lines does not drag the box down with it. Both survive a density change
+// because neither is a measurement.
+import "../styles/stylex.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const boxSize = semanticTokens.spacingLg;
+const boxFirstLineOffset = `calc((${semanticTokens.fontSizeMd} * ${semanticTokens.lineHeightBody} - ${boxSize}) / 2)`;
+
+// The mark inside the box. It is stroked at twice the hairline — one hairline
+// disappears inside a 14px square — and sized as a fraction of the box rather
+// than as a length, so it follows a density change the way the box does.
+const markStroke = `calc(2 * ${semanticTokens.borderWidth})`;
+const styles = {
+  label: {
+    kMv6JI: "xj0sio9",
+    kGuDYH: "x1ti3rys",
+    kb6lSQ: "xq5azjn",
+    kLWn49: "x1ezks3f",
+    kIyJzY: "x1elc2ff",
+    k1ekBW: "xt3l3uh",
+    kAMwcw: "xxjumz",
+    $$css: true
+  },
+  labelChecked: {
+    kMwMTN: "x1y4yzzg",
+    k63SB2: "x1m30uz7",
+    $$css: true
+  },
+  labelClear: {
+    kMwMTN: "x17y7oyd",
+    k63SB2: "x1jcbhmk",
+    $$css: true
+  },
+  labelDisabled: {
+    kMwMTN: "x1yx38ia",
+    k63SB2: "x1jcbhmk",
+    $$css: true
+  }
+};
+
+/** Props for a single independent choice. */
+
+/**
+ * Records one independent choice. `indeterminate` is a display state only —
+ * it never survives a click, because the DOM has no third value to submit.
+ */
+export function CheckboxInput({
+  'aria-describedby': ariaDescribedBy,
+  checked,
+  defaultChecked = false,
+  description,
+  disabled,
+  id,
+  indeterminate = false,
+  label,
+  onCheckedChange,
+  required,
+  ...props
+}) {
+  const field = useFieldControl();
+  const boxRef = useRef(null);
+  const [internalChecked, setInternalChecked] = useState(defaultChecked);
+  const isChecked = checked ?? internalChecked;
+  const describedBy = [field?.describedBy, ariaDescribedBy].filter(Boolean).join(' ') || undefined;
+
+  // `indeterminate` is a DOM property rather than an attribute, so it is set
+  // imperatively; the mark it draws is the same fact read back out.
+  const showsDash = indeterminate && !isChecked;
+  useEffect(() => {
+    if (boxRef.current) {
+      boxRef.current.indeterminate = showsDash;
+    }
+  }, [showsDash]);
+  function handleChange(event) {
+    const next = event.currentTarget.checked;
+    if (checked === undefined) {
+      setInternalChecked(next);
+    }
+    onCheckedChange?.(next);
+  }
+  return /*#__PURE__*/_jsxs("label", {
+    ...{
+      className: "x1cy8zhl x78zum5 xj0sio9 x1ap6kct"
+    },
+    children: [/*#__PURE__*/_jsx("input", {
+      ...props,
+      "aria-describedby": describedBy,
+      checked: isChecked,
+      disabled: disabled,
+      id: field?.controlId ?? id,
+      onChange: handleChange,
+      ref: boxRef,
+      required: required ?? field?.required,
+      ...{
+        0: {
+          className: "xjyslct xavu78a x7s8d8b x1wxkff4 x8kq9my x1jnjmdy xpxnlqs x9f619 x1ypdohk x1rg5ohu x2lah0s x1psh5v9 xat24cr x1ktc51x xrxpjvj x1n2onr6 x1elc2ff xts7igz xxjumz x48zea8 x1oulntk xtgyt42 x15meki4 xz32tfx x1p22nma x17lds6u x18v3itu"
+        },
+        8: {
+          className: "xjyslct xavu78a x7s8d8b x1wxkff4 x8kq9my x1jnjmdy xpxnlqs x9f619 x1ypdohk x1rg5ohu x2lah0s x1psh5v9 xat24cr x1ktc51x xrxpjvj x1n2onr6 x1elc2ff xts7igz xxjumz x48zea8 x1oulntk xtgyt42 x15meki4 xz32tfx x1p22nma x17lds6u x18v3itu x1kp2kj x1y86j21 x1mm7815 xjfbfnl x19eq4m7 x4gwt6r xek76vg x1cpjm7i xt6trzn x1knuo7r xfbisj7 x1hmns74 x1lpeqyt"
+        },
+        4: {
+          className: "xjyslct xavu78a x7s8d8b x1wxkff4 x8kq9my x1jnjmdy xpxnlqs x9f619 x1ypdohk x1rg5ohu x2lah0s x1psh5v9 xat24cr x1ktc51x xrxpjvj x1n2onr6 x1elc2ff xts7igz xxjumz x48zea8 x1oulntk xtgyt42 x15meki4 xz32tfx x1p22nma x17lds6u x18v3itu x1539tp4 x32s4f4"
+        },
+        12: {
+          className: "xjyslct xavu78a x7s8d8b x1wxkff4 x8kq9my x1jnjmdy xpxnlqs x9f619 x1ypdohk x1rg5ohu x2lah0s x1psh5v9 xat24cr x1ktc51x xrxpjvj x1n2onr6 x1elc2ff xts7igz xxjumz x48zea8 x1oulntk xtgyt42 x15meki4 xz32tfx x1p22nma x17lds6u x18v3itu x1kp2kj x1mm7815 xjfbfnl x4gwt6r xek76vg x1cpjm7i xt6trzn x1knuo7r xfbisj7 x1hmns74 x1lpeqyt x1539tp4 x32s4f4"
+        },
+        2: {
+          className: "xjyslct xavu78a x7s8d8b x1wxkff4 x8kq9my x1jnjmdy xpxnlqs x9f619 x1ypdohk x1rg5ohu x2lah0s x1psh5v9 xat24cr x1ktc51x xrxpjvj x1n2onr6 x1elc2ff xts7igz xxjumz x48zea8 x1oulntk xtgyt42 x15meki4 xz32tfx x1p22nma x17lds6u x18v3itu x5e5nlz xlk0aih x1cpjm7i x1t94pr5 x1knuo7r xfbisj7 x1hmns74 xbnewub"
+        },
+        10: {
+          className: "xjyslct xavu78a x7s8d8b x1wxkff4 x8kq9my x1jnjmdy xpxnlqs x9f619 x1ypdohk x1rg5ohu x2lah0s x1psh5v9 xat24cr x1ktc51x xrxpjvj x1n2onr6 x1elc2ff xts7igz xxjumz x48zea8 x1oulntk xtgyt42 x15meki4 xz32tfx x1p22nma x17lds6u x18v3itu x1y86j21 x1mm7815 xjfbfnl x19eq4m7 x4gwt6r xek76vg x5e5nlz xlk0aih x1cpjm7i x1t94pr5 x1knuo7r xfbisj7 x1hmns74 xbnewub"
+        },
+        6: {
+          className: "xjyslct xavu78a x7s8d8b x1wxkff4 x8kq9my x1jnjmdy xpxnlqs x9f619 x1ypdohk x1rg5ohu x2lah0s x1psh5v9 xat24cr x1ktc51x xrxpjvj x1n2onr6 x1elc2ff xts7igz xxjumz x48zea8 x1oulntk xtgyt42 x15meki4 xz32tfx x1p22nma x17lds6u x18v3itu x1539tp4 x32s4f4 x5e5nlz xlk0aih x1cpjm7i x1t94pr5 x1knuo7r xfbisj7 x1hmns74 xbnewub"
+        },
+        14: {
+          className: "xjyslct xavu78a x7s8d8b x1wxkff4 x8kq9my x1jnjmdy xpxnlqs x9f619 x1ypdohk x1rg5ohu x2lah0s x1psh5v9 xat24cr x1ktc51x xrxpjvj x1n2onr6 x1elc2ff xts7igz xxjumz x48zea8 x1oulntk xtgyt42 x15meki4 xz32tfx x1p22nma x17lds6u x18v3itu x1mm7815 xjfbfnl x4gwt6r xek76vg x1539tp4 x32s4f4 x5e5nlz xlk0aih x1cpjm7i x1t94pr5 x1knuo7r xfbisj7 x1hmns74 xbnewub"
+        },
+        1: {
+          className: "xjyslct xavu78a x7s8d8b x1wxkff4 x8kq9my x1jnjmdy xpxnlqs x9f619 x1ypdohk x1rg5ohu x2lah0s x1psh5v9 xat24cr x1ktc51x xrxpjvj x1n2onr6 x1elc2ff xts7igz xxjumz x48zea8 x1oulntk xtgyt42 x15meki4 xz32tfx x1p22nma x17lds6u x18v3itu xh3cs80"
+        },
+        9: {
+          className: "xjyslct xavu78a x7s8d8b x1wxkff4 x8kq9my x1jnjmdy xpxnlqs x9f619 x1ypdohk x1rg5ohu x2lah0s x1psh5v9 xat24cr x1ktc51x xrxpjvj x1n2onr6 x1elc2ff xts7igz xxjumz x48zea8 x1oulntk xtgyt42 x15meki4 xz32tfx x1p22nma x17lds6u x18v3itu x1kp2kj x1y86j21 x1mm7815 xjfbfnl x19eq4m7 x4gwt6r xek76vg x1cpjm7i xt6trzn x1knuo7r xfbisj7 x1hmns74 x1lpeqyt xh3cs80"
+        },
+        5: {
+          className: "xjyslct xavu78a x7s8d8b x1wxkff4 x8kq9my x1jnjmdy xpxnlqs x9f619 x1ypdohk x1rg5ohu x2lah0s x1psh5v9 xat24cr x1ktc51x xrxpjvj x1n2onr6 x1elc2ff xts7igz xxjumz x48zea8 x1oulntk xtgyt42 x15meki4 xz32tfx x1p22nma x17lds6u x18v3itu x1539tp4 x32s4f4 xh3cs80"
+        },
+        13: {
+          className: "xjyslct xavu78a x7s8d8b x1wxkff4 x8kq9my x1jnjmdy xpxnlqs x9f619 x1ypdohk x1rg5ohu x2lah0s x1psh5v9 xat24cr x1ktc51x xrxpjvj x1n2onr6 x1elc2ff xts7igz xxjumz x48zea8 x1oulntk xtgyt42 x15meki4 xz32tfx x1p22nma x17lds6u x18v3itu x1kp2kj x1mm7815 xjfbfnl x4gwt6r xek76vg x1cpjm7i xt6trzn x1knuo7r xfbisj7 x1hmns74 x1lpeqyt x1539tp4 x32s4f4 xh3cs80"
+        },
+        3: {
+          className: "xjyslct xavu78a x7s8d8b x1wxkff4 x8kq9my x1jnjmdy xpxnlqs x9f619 x1ypdohk x1rg5ohu x2lah0s x1psh5v9 xat24cr x1ktc51x xrxpjvj x1n2onr6 x1elc2ff xts7igz xxjumz x48zea8 x1oulntk xtgyt42 x15meki4 xz32tfx x1p22nma x17lds6u x18v3itu xlk0aih x1cpjm7i x1t94pr5 x1knuo7r xfbisj7 x1hmns74 xbnewub xh3cs80"
+        },
+        11: {
+          className: "xjyslct xavu78a x7s8d8b x1wxkff4 x8kq9my x1jnjmdy xpxnlqs x9f619 x1ypdohk x1rg5ohu x2lah0s x1psh5v9 xat24cr x1ktc51x xrxpjvj x1n2onr6 x1elc2ff xts7igz xxjumz x48zea8 x1oulntk xtgyt42 x15meki4 xz32tfx x1p22nma x17lds6u x18v3itu x1y86j21 x1mm7815 xjfbfnl x19eq4m7 x4gwt6r xek76vg xlk0aih x1cpjm7i x1t94pr5 x1knuo7r xfbisj7 x1hmns74 xbnewub xh3cs80"
+        },
+        7: {
+          className: "xjyslct xavu78a x7s8d8b x1wxkff4 x8kq9my x1jnjmdy xpxnlqs x9f619 x1ypdohk x1rg5ohu x2lah0s x1psh5v9 xat24cr x1ktc51x xrxpjvj x1n2onr6 x1elc2ff xts7igz xxjumz x48zea8 x1oulntk xtgyt42 x15meki4 xz32tfx x1p22nma x17lds6u x18v3itu x1539tp4 x32s4f4 xlk0aih x1cpjm7i x1t94pr5 x1knuo7r xfbisj7 x1hmns74 xbnewub xh3cs80"
+        },
+        15: {
+          className: "xjyslct xavu78a x7s8d8b x1wxkff4 x8kq9my x1jnjmdy xpxnlqs x9f619 x1ypdohk x1rg5ohu x2lah0s x1psh5v9 xat24cr x1ktc51x xrxpjvj x1n2onr6 x1elc2ff xts7igz xxjumz x48zea8 x1oulntk xtgyt42 x15meki4 xz32tfx x1p22nma x17lds6u x18v3itu x1mm7815 xjfbfnl x4gwt6r xek76vg x1539tp4 x32s4f4 xlk0aih x1cpjm7i x1t94pr5 x1knuo7r xfbisj7 x1hmns74 xbnewub xh3cs80"
+        }
+      }[!!isChecked << 3 | !!(isChecked && disabled) << 2 | !!showsDash << 1 | !!(showsDash && disabled) << 0],
+      type: "checkbox"
+    }), /*#__PURE__*/_jsxs("span", {
+      ...{
+        className: "x78zum5 xdt5ytf x1iwn5ga"
+      },
+      children: [/*#__PURE__*/_jsx("span", {
+        ...stylex.props(styles.label, disabled ? styles.labelDisabled : isChecked ? styles.labelChecked : styles.labelClear),
+        children: label
+      }), description === undefined ? null : /*#__PURE__*/_jsx("span", {
+        ...{
+          0: {
+            className: "x1mgtvnk xj0sio9 xltg2ad xgz4m7n x1ezks3f"
+          },
+          1: {
+            className: "xj0sio9 xltg2ad xgz4m7n x1ezks3f x1yx38ia"
+          }
+        }[!!disabled << 0],
+        children: description
+      })]
+    })]
+  });
+}

package/dist/CheckboxInput/index.d.ts

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

package/dist/CheckboxInput/index.js

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

package/dist/CheckboxList/CheckboxList.d.ts

@@ -0,0 +1,30 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+/** One independently selectable option. */
+export interface CheckboxOption {
+    readonly description?: ReactNode;
+    readonly disabled?: boolean;
+    readonly label: ReactNode;
+    readonly value: string;
+}
+type SharedCheckboxListProps = Omit<HTMLAttributes<HTMLFieldSetElement>, 'children' | 'className' | 'defaultValue' | 'onChange'> & {
+    readonly legend: ReactNode;
+    readonly onValueChange?: (values: readonly string[]) => void;
+    readonly options: readonly CheckboxOption[];
+};
+type ControlledCheckboxListProps = SharedCheckboxListProps & {
+    readonly defaultValue?: never;
+    readonly onValueChange: (values: readonly string[]) => void;
+    readonly value: readonly string[];
+};
+type UncontrolledCheckboxListProps = SharedCheckboxListProps & {
+    readonly defaultValue?: readonly string[];
+    readonly value?: never;
+};
+/** Props for a set of independent choices under one question. */
+export type CheckboxListProps = ControlledCheckboxListProps | UncontrolledCheckboxListProps;
+/**
+ * Collects independent choices under one question. Unlike `RadioList` any
+ * number of options can hold at once.
+ */
+export declare function CheckboxList({ defaultValue, legend, onValueChange, options, value, ...props }: CheckboxListProps): import("react").JSX.Element;
+export {};

package/dist/CheckboxList/CheckboxList.doc.d.ts

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

package/dist/CheckboxList/CheckboxList.doc.js

@@ -0,0 +1,24 @@
+import "../styles/stylex.css";
+export const checkboxListDoc = {
+  name: 'CheckboxList',
+  description: 'Collects independent choices under one question.',
+  props: [{
+    name: 'defaultValue',
+    description: 'Sets the initial uncontrolled choices.'
+  }, {
+    name: 'legend',
+    description: 'States the question the options answer.'
+  }, {
+    name: 'onValueChange',
+    description: 'Receives the next set of values.'
+  }, {
+    name: 'options',
+    description: 'Supplies the choices in reading order.'
+  }, {
+    name: 'value',
+    description: 'Controls the current set of values.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLFieldSetElement> except children, className, defaultValue, and onChange'],
+  example: '<CheckboxList legend="Notify" onValueChange={setChannels} options={channels} value={channels} />',
+  storyId: 'core-checkbox-list--default'
+};

package/dist/CheckboxList/CheckboxList.js

@@ -0,0 +1,60 @@
+import * as stylex from '@stylexjs/stylex';
+import { useState, createElement as _createElement } from 'react';
+import { semanticTokens } from '../authoring.stylex.js';
+import { CheckboxInput } from '../CheckboxInput/index.js';
+import "../styles/stylex.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** One independently selectable option. */
+
+/** Props for a set of independent choices under one question. */
+
+/**
+ * Collects independent choices under one question. Unlike `RadioList` any
+ * number of options can hold at once.
+ */
+export function CheckboxList({
+  defaultValue,
+  legend,
+  onValueChange,
+  options,
+  value,
+  ...props
+}) {
+  const [internalValue, setInternalValue] = useState(defaultValue ?? []);
+  const selected = value ?? internalValue;
+  function toggle(optionValue, checked) {
+    const next = checked ? [...selected, optionValue] : selected.filter(entry => entry !== optionValue);
+    if (value === undefined) {
+      setInternalValue(next);
+    }
+    onValueChange?.(next);
+  }
+  return /*#__PURE__*/_jsxs("fieldset", {
+    ...props,
+    ...{
+      className: "xng3xce xc342km x78zum5 xdt5ytf xj0sio9 x1ap6kct x1ghz6dp x1717udv"
+    },
+    children: [/*#__PURE__*/_jsx("legend", {
+      ...{
+        className: "x17y7oyd x69it5h xnlz8j1 x1m30uz7 x1di4hct x1vslzj6 x11dva6t x1717udv"
+      },
+      children: legend
+    }), options.map(({
+      description,
+      disabled,
+      label,
+      value: optionValue
+    }) => /*#__PURE__*/_createElement(CheckboxInput, {
+      checked: selected.includes(optionValue),
+      ...(description === undefined ? {} : {
+        description
+      }),
+      disabled: disabled ?? false,
+      key: optionValue,
+      label: label,
+      onCheckedChange: checked => {
+        toggle(optionValue, checked);
+      }
+    }))]
+  });
+}

package/dist/CheckboxList/index.d.ts

@@ -0,0 +1 @@
+export { CheckboxList, type CheckboxListProps, type CheckboxOption, } from './CheckboxList.js';

package/dist/CheckboxList/index.js

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

package/dist/Citation/Citation.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+/** Props for a reference to a source. */
+export interface CitationProps extends Omit<HTMLAttributes<HTMLElement>, 'children' | 'className'> {
+    readonly children: ReactNode;
+    readonly href?: string;
+    readonly marker?: ReactNode;
+}
+/**
+ * Names the source of a claim. When a marker is supplied it is superscripted
+ * and the source name stays in the accessible name, so a reader hears what
+ * "1" refers to rather than the digit alone.
+ */
+export declare function Citation({ children, href, marker, ...props }: CitationProps): import("react").JSX.Element;

package/dist/Citation/Citation.doc.d.ts

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

package/dist/Citation/Citation.doc.js

@@ -0,0 +1,18 @@
+import "../styles/stylex.css";
+export const citationDoc = {
+  name: 'Citation',
+  description: 'Names the source of a claim.',
+  props: [{
+    name: 'children',
+    description: 'Supplies the source name.'
+  }, {
+    name: 'href',
+    description: 'Links the source name to the source itself.'
+  }, {
+    name: 'marker',
+    description: 'Adds a decorative superscript marker.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLElement> except children and className'],
+  example: '<Citation href="/rfc" marker="1">RFC 9457</Citation>',
+  storyId: 'core-citation--default'
+};

package/dist/Citation/Citation.js

@@ -0,0 +1,36 @@
+import * as stylex from '@stylexjs/stylex';
+import { semanticTokens } from '../authoring.stylex.js';
+import { Link } from '../navigation/index.js';
+import "../styles/stylex.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Props for a reference to a source. */
+
+/**
+ * Names the source of a claim. When a marker is supplied it is superscripted
+ * and the source name stays in the accessible name, so a reader hears what
+ * "1" refers to rather than the digit alone.
+ */
+export function Citation({
+  children,
+  href,
+  marker,
+  ...props
+}) {
+  const body = href === undefined ? children : /*#__PURE__*/_jsx(Link, {
+    href: href,
+    children: children
+  });
+  return /*#__PURE__*/_jsxs("cite", {
+    ...props,
+    ...{
+      className: "x1mgtvnk xj0sio9 xltg2ad x1j61x8r xq5azjn x1ezks3f"
+    },
+    children: [marker === undefined ? null : /*#__PURE__*/_jsx("span", {
+      "aria-hidden": "true",
+      ...{
+        className: "x7ohnf4 xnlz8j1 xss6m8b x1kbjp2h x1v0h343"
+      },
+      children: marker
+    }), body]
+  });
+}

package/dist/Citation/index.d.ts

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

package/dist/Citation/index.js

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

package/dist/ClickableCard/ClickableCard.d.ts

@@ -0,0 +1,10 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+/** Props for a card that acts as a single control. */
+export interface ClickableCardProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className'> {
+    readonly children: ReactNode;
+}
+/**
+ * A card that is itself the control. It emits one button, so the whole surface
+ * is a single tab stop — never nest another control inside it.
+ */
+export declare function ClickableCard({ children, type, ...props }: ClickableCardProps): import("react").JSX.Element;

package/dist/ClickableCard/ClickableCard.doc.d.ts

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

package/dist/ClickableCard/ClickableCard.doc.js

@@ -0,0 +1,12 @@
+import "../styles/stylex.css";
+export const clickableCardDoc = {
+  name: 'ClickableCard',
+  description: 'A card surface that is itself one control.',
+  props: [{
+    name: 'children',
+    description: 'Supplies the card content.'
+  }],
+  inheritedProps: ['ButtonHTMLAttributes<HTMLButtonElement> except className'],
+  example: '<ClickableCard onClick={open}>Release 12</ClickableCard>',
+  storyId: 'core-clickable-card--default'
+};

package/dist/ClickableCard/ClickableCard.js

@@ -0,0 +1,24 @@
+import * as stylex from '@stylexjs/stylex';
+import { semanticTokens } from '../authoring.stylex.js';
+import "../styles/stylex.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Props for a card that acts as a single control. */
+
+/**
+ * A card that is itself the control. It emits one button, so the whole surface
+ * is a single tab stop — never nest another control inside it.
+ */
+export function ClickableCard({
+  children,
+  type = 'button',
+  ...props
+}) {
+  return /*#__PURE__*/_jsx("button", {
+    ...props,
+    ...{
+      className: "x1ixvsy6 xilcjya x7xrhi9 x1jnjmdy xpxnlqs x1gnnqk1 x9f619 x1y4yzzg x1ypdohk x1lliihq xj0sio9 x1ti3rys x1jcbhmk xh8yej3 xgz4m7n x1ezks3f x1cfciu7 x1yc453h x1elc2ff x1dhv84w xxjumz x48zea8 x1oulntk x609gy3 xtgyt42 x15meki4 xz32tfx x1p22nma x17lds6u xszm2ej x18v3itu"
+    },
+    type: type,
+    children: children
+  });
+}

package/dist/ClickableCard/index.d.ts

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

package/dist/ClickableCard/index.js

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

package/dist/Code/Code.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'react';
+/** Props for an inline code fragment. */
+export type CodeProps = Omit<HTMLAttributes<HTMLElement>, 'className'>;
+/** Marks a fragment as code without claiming it is a standalone block. */
+export declare function Code({ children, ...props }: CodeProps): import("react").JSX.Element;

package/dist/{components/Text.doc.d.ts → Code/Code.doc.d.ts}

@@ -1,4 +1,4 @@
-export declare const textDoc: {
+export declare const codeDoc: {
     name: string;
     description: string;
     props: {

package/dist/Code/Code.doc.js

@@ -0,0 +1,12 @@
+import "../styles/stylex.css";
+export const codeDoc = {
+  name: 'Code',
+  description: 'Marks an inline fragment as code.',
+  props: [{
+    name: 'children',
+    description: 'Supplies the code fragment.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLElement> except className'],
+  example: '<Code>pnpm add @misoto22/kioku-ui</Code>',
+  storyId: 'core-code--default'
+};

package/dist/Code/Code.js

@@ -0,0 +1,19 @@
+import * as stylex from '@stylexjs/stylex';
+import { semanticTokens } from '../authoring.stylex.js';
+import "../styles/stylex.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Props for an inline code fragment. */
+
+/** Marks a fragment as code without claiming it is a standalone block. */
+export function Code({
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx("code", {
+    ...props,
+    ...{
+      className: "xavu78a x1l6hjkl x1y4yzzg x7ohnf4 xuu6dyu xss6m8b x1kbjp2h xov5yc9 x13faqbe"
+    },
+    children: children
+  });
+}

package/dist/Code/index.d.ts

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

package/dist/Code/index.js

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

package/dist/CodeBlock/CodeBlock.d.ts

@@ -0,0 +1,19 @@
+import type { HTMLAttributes } from 'react';
+/** Props for a block of preformatted source. */
+export interface CodeBlockProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'className'> {
+    readonly code: string;
+    readonly copiedLabel?: string;
+    readonly copyLabel?: string;
+    readonly language?: string;
+    /**
+     * Wraps long lines instead of scrolling them. Worth setting whenever a line
+     * can outrun the column — an install command or a `<link>` tag always does,
+     * and source that leaves the viewport is source a reader copies wrongly.
+     */
+    readonly wrap?: boolean;
+}
+/**
+ * Shows a block of source. The copy control reports its own result, so a
+ * reader knows the copy happened without watching the clipboard.
+ */
+export declare function CodeBlock({ code, copiedLabel, copyLabel, language, wrap, ...props }: CodeBlockProps): import("react").JSX.Element;

package/dist/CodeBlock/CodeBlock.doc.d.ts

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

package/dist/CodeBlock/CodeBlock.doc.js

@@ -0,0 +1,24 @@
+import "../styles/stylex.css";
+export const codeBlockDoc = {
+  name: 'CodeBlock',
+  description: 'Shows a block of source with a copy control.',
+  props: [{
+    name: 'wrap',
+    description: 'Wraps long lines instead of scrolling them out of view.'
+  }, {
+    name: 'code',
+    description: 'Supplies the source to show and copy.'
+  }, {
+    name: 'copiedLabel',
+    description: 'Names the control after a copy.'
+  }, {
+    name: 'copyLabel',
+    description: 'Names the copy control.'
+  }, {
+    name: 'language',
+    description: 'Records which language the source is in.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLDivElement> except children and className'],
+  example: '<CodeBlock code="pnpm add @misoto22/kioku-ui" language="bash" />',
+  storyId: 'core-code-block--default'
+};