@misoto22/kioku-ui 0.0.0 → 0.2.0

package/dist/{components/Table.doc.d.ts → Chat/Chat.doc.d.ts}

@@ -1,90 +1,75 @@
-export declare const tableDoc: {
+export declare const chatLayoutDoc: {
     name: string;
     description: string;
-    props: ({
-        name: string;
-        description: string;
-        required: true;
-    } | {
+    props: {
         name: string;
         description: string;
-        required?: undefined;
-    })[];
+    }[];
     inheritedProps: string[];
     example: string;
     storyId: string;
 };
-export declare const tableCaptionDoc: {
+export declare const chatMessageListDoc: {
     name: string;
     description: string;
     props: {
         name: string;
         description: string;
-        required: true;
     }[];
     inheritedProps: string[];
     example: string;
     storyId: string;
 };
-export declare const tableHeadDoc: {
+export declare const chatMessageDoc: {
     name: string;
     description: string;
     props: {
         name: string;
         description: string;
-        required: true;
     }[];
     inheritedProps: string[];
     example: string;
     storyId: string;
 };
-export declare const tableBodyDoc: {
+export declare const chatToolCallsDoc: {
     name: string;
     description: string;
     props: {
         name: string;
         description: string;
-        required: true;
     }[];
     inheritedProps: string[];
     example: string;
     storyId: string;
 };
-export declare const tableRowDoc: {
+export declare const chatComposerDoc: {
     name: string;
     description: string;
     props: {
         name: string;
         description: string;
-        required: true;
     }[];
     inheritedProps: string[];
     example: string;
     storyId: string;
 };
-export declare const tableHeaderCellDoc: {
+export declare const chatMessageMetadataDoc: {
     name: string;
     description: string;
-    props: ({
-        name: string;
-        description: string;
-        required: true;
-    } | {
+    props: {
         name: string;
         description: string;
-        required?: undefined;
-    })[];
+    }[];
     inheritedProps: string[];
     example: string;
     storyId: string;
 };
-export declare const tableCellDoc: {
+export declare const chatSystemMessageDoc: {
     name: string;
     description: string;
     props: {
         name: string;
         description: string;
-        required: true;
     }[];
     inheritedProps: string[];
     example: string;

package/dist/Chat/Chat.doc.js

@@ -0,0 +1,99 @@
+import "../styles/stylex.css";
+export const chatLayoutDoc = {
+  name: 'ChatLayout',
+  description: 'Frames a scrolling transcript above a fixed composer.',
+  props: [{
+    name: 'composer',
+    description: 'Supplies the composer to pin below.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLDivElement> except className'],
+  example: '<ChatLayout composer={<ChatComposer … />}>{transcript}</ChatLayout>',
+  storyId: 'core-chat-layout--default'
+};
+export const chatMessageListDoc = {
+  name: 'ChatMessageList',
+  description: 'Holds the transcript and announces new messages.',
+  props: [{
+    name: 'label',
+    description: 'Names the transcript.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLUListElement> except className and the aria-atomic, aria-label, aria-live and aria-relevant attributes it owns'],
+  example: '<ChatMessageList label="Conversation">{messages}</ChatMessageList>',
+  storyId: 'core-chat-message-list--default'
+};
+export const chatMessageDoc = {
+  name: 'ChatMessage',
+  description: 'Shows one message and names its author.',
+  props: [{
+    name: 'author',
+    description: 'States who produced the message.'
+  }, {
+    name: 'authorName',
+    description: 'Names the author in visible text.'
+  }, {
+    name: 'pending',
+    description: 'Shows progress while a reply is awaited.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLLIElement> except className'],
+  example: '<ChatMessage author="assistant" authorName="Kioku">…</ChatMessage>',
+  storyId: 'core-chat-message--default'
+};
+export const chatToolCallsDoc = {
+  name: 'ChatToolCalls',
+  description: 'Lists the tool calls behind a reply.',
+  props: [{
+    name: 'calls',
+    description: 'Supplies the tool invocations to list.'
+  }, {
+    name: 'label',
+    description: 'Names the list for assistive technology.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLUListElement> except aria-label, children, and className'],
+  example: '<ChatToolCalls calls={calls} />',
+  storyId: 'core-chat-tool-calls--default'
+};
+export const chatComposerDoc = {
+  name: 'ChatComposer',
+  description: 'Composes a message; Enter sends, Shift+Enter adds a line.',
+  props: [{
+    name: 'disabled',
+    description: 'Blocks sending while a reply is in flight.'
+  }, {
+    name: 'label',
+    description: 'Names the entry field.'
+  }, {
+    name: 'onSend',
+    description: 'Receives the trimmed message.'
+  }, {
+    name: 'placeholder',
+    description: 'Hints at what to write.'
+  }, {
+    name: 'sendLabel',
+    description: 'Names the send control.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLFormElement> except children, className, and onSubmit'],
+  example: '<ChatComposer label="Message" onSend={send} />',
+  storyId: 'core-chat-composer--default'
+};
+export const chatMessageMetadataDoc = {
+  name: 'ChatMessageMetadata',
+  description: 'States how a reply was produced.',
+  props: [{
+    name: 'entries',
+    description: 'Supplies the labelled facts to list.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLUListElement> except children and className'],
+  example: '<ChatMessageMetadata entries={[{label: "Latency", value: "1.2s"}]} />',
+  storyId: 'core-chat-message--composition'
+};
+export const chatSystemMessageDoc = {
+  name: 'ChatSystemMessage',
+  description: 'A note in the transcript attributed to no participant.',
+  props: [{
+    name: 'children',
+    description: 'Supplies the note.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLLIElement> except className'],
+  example: '<ChatSystemMessage>Conversation started</ChatSystemMessage>',
+  storyId: 'core-chat-message--states'
+};

package/dist/Chat/Chat.js

@@ -0,0 +1,361 @@
+import * as stylex from '@stylexjs/stylex';
+import { Children, useState } from 'react';
+import { semanticTokens } from '../authoring.stylex.js';
+import { scrolling } from '../scrolling/index.js';
+import { useInternationalization } from '../i18n/index.js';
+import { Button } from '../Button/index.js';
+import { Eyebrow } from '../Eyebrow/index.js';
+import { Numeral } from '../Numeral/index.js';
+import { Spinner } from '../Spinner/index.js';
+import { TextArea } from '../TextArea/index.js';
+
+// A line of chat stops being readable long before it reaches the width of the
+// transcript, and where it stops is a fact about the TYPE rather than about
+// the spacing scale. Built from `spacing2xl` this measure grew 36% at the
+// standard density while the type inside it stayed at 13.5px — a longer line
+// for the reader who asked for more air, which is backwards.
+import "../styles/stylex.css";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+const bubbleMaxWidth = `calc(34 * ${semanticTokens.fontSizeMd})`;
+
+// A dot, so it is two of the smallest spacing step across rather than a size
+// of its own.
+const progressDotSize = `calc(2 * ${semanticTokens.spacingXs})`;
+const styles = {
+  list: {
+    k1xSpc: "x78zum5",
+    kXwgrk: "xdt5ytf",
+    kOIVth: "x4nws80",
+    kH6xsr: "x3ct3a4",
+    kqGvvJ: "x10im51j",
+    kAzted: "x2lwn1j",
+    kORKVm: "x1odjw0f",
+    kZCmMZ: "x1c1uobl",
+    $$css: true
+  },
+  bubble: {
+    kaIpWk: "x7xrhi9",
+    ksu8eU: "xng3xce",
+    kMv6JI: "xj0sio9",
+    kGuDYH: "x1ti3rys",
+    kb6lSQ: "xgz4m7n",
+    kLWn49: "x1ezks3f",
+    ks0D6T: "x1hz45lh",
+    $$css: true
+  },
+  bubbleReader: {
+    kWkggS: "xavu78a",
+    kGVxlE: "x1elh21b",
+    kMwMTN: "x1y4yzzg",
+    k8WAf4: "xoeao9w",
+    kg3NbH: "x1wkw8jr",
+    $$css: true
+  },
+  bubbleAssistant: {
+    kWkggS: "xjbqb8w",
+    kGVxlE: "x1gnnqk1",
+    kMwMTN: "x1y4yzzg",
+    k8WAf4: "xt970qd",
+    kg3NbH: "xnjsko4",
+    $$css: true
+  },
+  bubbleSystem: {
+    kWkggS: "xjbqb8w",
+    kGVxlE: "x1gnnqk1",
+    kMwMTN: "x17y7oyd",
+    kGuDYH: "xltg2ad",
+    kb6lSQ: "xgz4m7n",
+    ks0D6T: "x1x1rfll",
+    k8WAf4: "xt970qd",
+    kg3NbH: "xnjsko4",
+    k9WMMc: "x2b8uid",
+    $$css: true
+  }
+};
+
+/** Who produced a chat message. */
+
+const bubbleAuthors = {
+  assistant: styles.bubbleAssistant,
+  reader: styles.bubbleReader,
+  system: styles.bubbleSystem
+};
+
+/** Props for the message-and-composer frame. */
+
+/** Frames a scrolling transcript above a fixed composer. */
+export function ChatLayout({
+  children,
+  composer,
+  ...props
+}) {
+  return /*#__PURE__*/_jsxs("div", {
+    ...props,
+    ...{
+      className: "x5yr21d xrvj5dj xj0sio9 xtl099x x1h51kgi x2lwn1j"
+    },
+    children: [children, composer]
+  });
+}
+
+/** Props for the scrolling transcript. */
+
+/**
+ * Holds the transcript. A message is announced politely as it lands: the
+ * region is not atomic, so a reply arriving does not replay the conversation,
+ * and only additions are relevant, so a reply that streams in is announced
+ * once rather than re-read on every token.
+ */
+export function ChatMessageList({
+  children,
+  label,
+  ...props
+}) {
+  const {
+    messages
+  } = useInternationalization();
+  return /*#__PURE__*/_jsx("ul", {
+    ...props,
+    "aria-atomic": "false",
+    "aria-label": label,
+    "aria-live": "polite",
+    "aria-relevant": "additions",
+    ...stylex.props(styles.list, scrolling.region),
+    children: Children.count(children) === 0 ? /*#__PURE__*/_jsx("li", {
+      ...{
+        className: "x1mgtvnk xltg2ad xgz4m7n x1ezks3f x1lr58ck x2b8uid"
+      },
+      children: messages.chatTranscriptEmpty
+    }) : children
+  });
+}
+
+/** Props for one message in the transcript. */
+
+/**
+ * Shows one message. The author is named in text rather than implied by which
+ * side the bubble sits on, because alignment is invisible to a screen reader.
+ */
+export function ChatMessage({
+  author,
+  authorName,
+  children,
+  pending = false,
+  ...props
+}) {
+  const {
+    messages
+  } = useInternationalization();
+  return /*#__PURE__*/_jsxs("li", {
+    ...props,
+    ...{
+      0: {
+        className: "x78zum5 xdt5ytf x1iwn5ga"
+      },
+      1: {
+        className: "x78zum5 xdt5ytf x1iwn5ga xuk3077"
+      }
+    }[!!(author === 'reader') << 0],
+    children: [authorName === undefined ? null : /*#__PURE__*/_jsx("span", {
+      ...{
+        0: {
+          className: "x17y7oyd x69it5h xnlz8j1 x1di4hct x1vslzj6"
+        },
+        1: {
+          className: "x17y7oyd x69it5h xnlz8j1 x1di4hct x1vslzj6 x1wkw8jr"
+        }
+      }[!!(author === 'reader') << 0],
+      children: authorName
+    }), /*#__PURE__*/_jsx("div", {
+      ...stylex.props(styles.bubble, bubbleAuthors[author]),
+      children: pending ? /*#__PURE__*/_jsx(Spinner, {
+        label: messages.chatWaitingForReply
+      }) : children
+    })]
+  });
+}
+
+/** One tool invocation attached to a message. */
+
+/** Props for the tool calls behind a reply. */
+
+/** Lists the tool calls behind a reply so the work stays inspectable. */
+export function ChatToolCalls({
+  calls,
+  label = 'Tool calls',
+  ...props
+}) {
+  const {
+    messages
+  } = useInternationalization();
+  // `status` is an enum, not a sentence. Printed straight it put the English
+  // words "running" and "failed" into a transcript in any language, and only
+  // one of the three ever reached the page at all.
+  const outcomes = {
+    done: messages.chatToolCallDone,
+    failed: messages.chatToolCallFailed,
+    running: messages.chatToolCallRunning
+  };
+  return /*#__PURE__*/_jsx("ul", {
+    ...props,
+    "aria-label": label,
+    ...{
+      className: "x1cy8zhl x78zum5 xdt5ytf x1iwn5ga x3ct3a4 x10im51j x1c1uobl"
+    },
+    children: calls.map(call => /*#__PURE__*/_jsxs("li", {
+      ...{
+        className: "x6s0dn4 xavu78a x8kq9my x17y7oyd x3nfvp2 x7ohnf4 xnlz8j1 xss6m8b x1ap6kct x1kbjp2h x1ezks3f x10y07nz x1qtbwip"
+      },
+      children: [/*#__PURE__*/_jsx("span", {
+        "aria-hidden": "true",
+        ...{
+          0: {
+            className: "x9r1u3d xnpwncj x1jnjmdy xpxnlqs x9f619 x2lah0s x1rr45o1 xz8jsrm"
+          },
+          2: {
+            className: "xnpwncj x1jnjmdy xpxnlqs x9f619 x2lah0s x1rr45o1 xz8jsrm x169nxdn"
+          },
+          1: {
+            className: "xnpwncj x1jnjmdy xpxnlqs x9f619 x2lah0s x1rr45o1 xz8jsrm xpqgouk xcf5wgx"
+          },
+          3: {
+            className: "xnpwncj x1jnjmdy xpxnlqs x9f619 x2lah0s x1rr45o1 xz8jsrm xpqgouk xcf5wgx"
+          }
+        }[!!(call.status === 'running') << 1 | !!(call.status === 'failed') << 0]
+      }), /*#__PURE__*/_jsx("span", {
+        children: call.name
+      }), /*#__PURE__*/_jsx("span", {
+        ...{
+          0: {
+            className: "x1mgtvnk x7ohnf4"
+          },
+          1: {
+            className: "x7ohnf4 x8bm3zx"
+          }
+        }[!!(call.status === 'failed') << 0],
+        children: call.detail ?? (call.status ? outcomes[call.status] : '')
+      })]
+    }, call.id))
+  });
+}
+
+/** Props for the message composer. */
+
+/**
+ * Composes a message. Enter sends and Shift+Enter starts a new line, which is
+ * what a reader expects from every other chat field.
+ */
+export function ChatComposer({
+  disabled = false,
+  label,
+  onSend,
+  placeholder,
+  sendLabel = 'Send',
+  ...props
+}) {
+  const [draft, setDraft] = useState('');
+  function send() {
+    const message = draft.trim();
+    if (message === '' || disabled) {
+      return;
+    }
+    onSend(message);
+    setDraft('');
+  }
+  function handleSubmit(event) {
+    event.preventDefault();
+    send();
+  }
+  function handleKeyDown(event) {
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault();
+      send();
+    }
+  }
+  return /*#__PURE__*/_jsxs("form", {
+    ...props,
+    onSubmit: handleSubmit,
+    ...{
+      className: "xuk3077 x78zum5 xtl099x"
+    },
+    children: [/*#__PURE__*/_jsx(TextArea, {
+      "aria-label": label,
+      disabled: disabled,
+      onKeyDown: handleKeyDown,
+      onValueChange: setDraft,
+      placeholder: placeholder,
+      rows: 2,
+      value: draft,
+      ...{
+        className: "x1iyjqo2"
+      }
+    }), /*#__PURE__*/_jsx(Button, {
+      disabled: disabled || draft.trim() === '',
+      type: "submit",
+      children: sendLabel
+    })]
+  });
+}
+
+/** One labelled fact about how a message was produced. */
+
+/** Props for the provenance line under a message. */
+
+/**
+ * States how a reply was produced — model, latency, token count. Each fact
+ * carries its label in the accessible name, because "1.2s" on its own tells a
+ * screen-reader user nothing about what took that long.
+ */
+export function ChatMessageMetadata({
+  entries,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx("dl", {
+    ...props,
+    ...{
+      className: "x78zum5 x1a02dak x1ap6kct x1ezks3f x3ct3a4 x10im51j x1c1uobl"
+    },
+    children: entries.map(entry => /*#__PURE__*/_jsxs("div", {
+      ...{
+        className: "x1pha0wt x78zum5 x1iwn5ga"
+      },
+      children: [/*#__PURE__*/_jsx("dt", {
+        ...{
+          className: "x10im51j xrxpjvj"
+        },
+        children: /*#__PURE__*/_jsx(Eyebrow, {
+          children: entry.label
+        })
+      }), /*#__PURE__*/_jsx("dd", {
+        ...{
+          className: "x10im51j xrxpjvj"
+        },
+        children: /*#__PURE__*/_jsx(Numeral, {
+          children: entry.value
+        })
+      })]
+    }, entry.label))
+  });
+}
+
+/** Props for a message from the system rather than a participant. */
+
+/**
+ * A note from the system — a conversation start, a model change, a
+ * disconnection. It sits in the transcript but is attributed to no one, so it
+ * is centred and quiet rather than dressed as either side of the exchange.
+ */
+export function ChatSystemMessage({
+  children,
+  ...props
+}) {
+  // The same note `ChatMessage author="system"` draws. Two renderings of one
+  // thing is two places to change it, and they had already drifted: this one
+  // had no bubble box, so a system note sat on a different rhythm from every
+  // other row in the transcript.
+  return /*#__PURE__*/_jsx(ChatMessage, {
+    author: "system",
+    ...props,
+    children: children
+  });
+}

package/dist/Chat/index.d.ts

@@ -0,0 +1 @@
+export { ChatComposer, ChatLayout, ChatMessage, ChatMessageList, ChatMessageMetadata, ChatSystemMessage, ChatToolCalls, type ChatAuthor, type ChatComposerProps, type ChatLayoutProps, type ChatMessageListProps, type ChatMessageMetadataProps, type ChatMessageProps, type ChatMetadataEntry, type ChatSystemMessageProps, type ChatToolCall, type ChatToolCallsProps, } from './Chat.js';

package/dist/Chat/index.js

@@ -0,0 +1,2 @@
+import "../styles/stylex.css";
+export { ChatComposer, ChatLayout, ChatMessage, ChatMessageList, ChatMessageMetadata, ChatSystemMessage, ChatToolCalls } from './Chat.js';

package/dist/CheckboxInput/CheckboxInput.d.ts

@@ -0,0 +1,24 @@
+import { type InputHTMLAttributes, type ReactNode } from 'react';
+type SharedCheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'checked' | 'children' | 'className' | 'defaultChecked' | 'onChange' | 'type'> & {
+    readonly description?: ReactNode;
+    readonly indeterminate?: boolean;
+    readonly label: ReactNode;
+    readonly onCheckedChange?: (checked: boolean) => void;
+};
+type ControlledCheckboxProps = SharedCheckboxProps & {
+    readonly checked: boolean;
+    readonly defaultChecked?: never;
+    readonly onCheckedChange: (checked: boolean) => void;
+};
+type UncontrolledCheckboxProps = SharedCheckboxProps & {
+    readonly checked?: never;
+    readonly defaultChecked?: boolean;
+};
+/** Props for a single independent choice. */
+export type CheckboxInputProps = ControlledCheckboxProps | UncontrolledCheckboxProps;
+/**
+ * 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 declare function CheckboxInput({ 'aria-describedby': ariaDescribedBy, checked, defaultChecked, description, disabled, id, indeterminate, label, onCheckedChange, required, ...props }: CheckboxInputProps): import("react").JSX.Element;
+export {};

package/dist/CheckboxInput/CheckboxInput.doc.d.ts

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

package/dist/CheckboxInput/CheckboxInput.doc.js

@@ -0,0 +1,27 @@
+import "../styles/stylex.css";
+export const checkboxInputDoc = {
+  name: 'CheckboxInput',
+  description: 'Records one independent choice.',
+  props: [{
+    name: 'checked',
+    description: 'Controls the checked state.'
+  }, {
+    name: 'defaultChecked',
+    description: 'Sets the initial uncontrolled state.'
+  }, {
+    name: 'description',
+    description: 'Adds detail under the label.'
+  }, {
+    name: 'indeterminate',
+    description: 'Shows a mixed state until the reader decides.'
+  }, {
+    name: 'label',
+    description: 'Names the choice.'
+  }, {
+    name: 'onCheckedChange',
+    description: 'Receives the next checked state.'
+  }],
+  inheritedProps: ['InputHTMLAttributes<HTMLInputElement> except checked, children, className, defaultChecked, onChange, and type'],
+  example: '<CheckboxInput label="Notify subscribers" onCheckedChange={setNotify} checked={notify} />',
+  storyId: 'core-checkbox-input--default'
+};