@misoto22/kioku-ui 0.0.0 → 0.2.0

package/dist/Calendar/Calendar.js

@@ -0,0 +1,307 @@
+import * as stylex from '@stylexjs/stylex';
+import { useEffect, useId, useRef, useState } from 'react';
+import { semanticTokens } from '../authoring.stylex.js';
+import { useInternationalization } from '../i18n/index.js';
+import { Icon } from '../Icon/index.js';
+import { IconButton } from '../IconButton/index.js';
+
+// Today is a dot: the one round shape the system still allows, small enough
+// to sit under a figure without moving it. It is not a fill, because the one
+// filled day in the grid has to stay the day that was actually chosen.
+import "../styles/stylex.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const todayDotSize = semanticTokens.spacingXs;
+const todayDotInset = `calc(${semanticTokens.spacingXs} - ${semanticTokens.borderWidth})`;
+const styles = {
+  day: {
+    kGNEyG: "x6s0dn4",
+    kWkggS: "xjbqb8w",
+    kaIpWk: "x1l6hjkl",
+    ksu8eU: "xng3xce",
+    kMzoRj: "xc342km",
+    kB7OPa: "x9f619",
+    kkrTdU: "x1ypdohk",
+    k1xSpc: "x78zum5",
+    kMv6JI: "x7ohnf4",
+    kGuDYH: "xltg2ad",
+    kcqcaj: "xss6m8b",
+    kZKoxP: "xr8hsnb",
+    kjj79g: "xl56j7k",
+    kb6lSQ: "x1kbjp2h",
+    kmVPX3: "x1717udv",
+    kVAEAm: "x1n2onr6",
+    kIyJzY: "x1elc2ff",
+    k1ekBW: "xs2xxs2",
+    kAMwcw: "xxjumz",
+    kzqmXN: "x4ml2zf",
+    kWC4TW: "x609gy3",
+    kYPGJ8: "xtgyt42",
+    kZs9gx: "x15meki4",
+    kiEn40: "xz32tfx",
+    k7shQP: "x1p22nma",
+    kPJHz1: "x17lds6u",
+    $$css: true
+  },
+  open: {
+    kMwMTN: "x17y7oyd",
+    kIa11j: "x1ipqx2d",
+    kf7JFr: "x1kz4h7b",
+    $$css: true
+  },
+  outside: {
+    kMwMTN: "x1mgtvnk",
+    kIa11j: "x1ipqx2d",
+    kf7JFr: "xlebirc",
+    $$css: true
+  },
+  today: {
+    kMwMTN: "x1y4yzzg",
+    k63SB2: "x1m30uz7",
+    ks3ayO: "x3g84ta",
+    kUfP38: "x1cqlr7",
+    k5JduY: "x1s928wv",
+    k4zj60: "xfhqrle",
+    k8Iv0R: "xf4hqhm",
+    kc1e00: "x1fztlqz",
+    kwXMNM: "x1j6awrg",
+    kLigFv: "xldp6pj",
+    kkgrvl: "x1ydu38w",
+    $$css: true
+  },
+  chosen: {
+    kWkggS: "x1i8m2t6",
+    kMwMTN: "xvaruz2",
+    k63SB2: "x1m30uz7",
+    $$css: true
+  }
+};
+const weekdays = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
+function toIso(date) {
+  return date.toISOString().slice(0, 10);
+}
+function parseIso(value) {
+  const parsed = new Date(`${value}T00:00:00Z`);
+  return Number.isNaN(parsed.getTime()) ? undefined : parsed;
+}
+function addDays(date, days) {
+  const next = new Date(date);
+  next.setUTCDate(next.getUTCDate() + days);
+  return next;
+}
+function addMonths(date, months) {
+  const next = new Date(date);
+  next.setUTCDate(1);
+  next.setUTCMonth(next.getUTCMonth() + months);
+  return next;
+}
+
+// getUTCDay is Sunday-first; shift so the week starts on Monday.
+function weekdayIndex(date) {
+  return (date.getUTCDay() + 6) % 7;
+}
+
+// Six rows always, so the grid does not resize as the reader moves between months.
+function monthGrid(anchor) {
+  const firstOfMonth = new Date(Date.UTC(anchor.getUTCFullYear(), anchor.getUTCMonth(), 1));
+  const start = addDays(firstOfMonth, -weekdayIndex(firstOfMonth));
+  return Array.from({
+    length: 6
+  }, (_, week) => Array.from({
+    length: 7
+  }, (_, day) => addDays(start, week * 7 + day)));
+}
+
+/** Props for a month grid of selectable dates. */
+
+// Dates are held in UTC so a grid cell means the same day in every timezone.
+const defaultFormatDay = date => date.toLocaleDateString(undefined, {
+  dateStyle: 'long',
+  timeZone: 'UTC'
+});
+const defaultFormatMonth = date => date.toLocaleDateString(undefined, {
+  month: 'long',
+  timeZone: 'UTC',
+  year: 'numeric'
+});
+
+/**
+ * Selects a date from a month grid. Arrow keys move by day and week, Home and
+ * End reach the ends of the week, Page Up and Page Down move by month, so the
+ * whole grid is one tab stop.
+ */
+export function Calendar({
+  defaultValue = '',
+  formatDay = defaultFormatDay,
+  formatMonth = defaultFormatMonth,
+  label,
+  max,
+  min,
+  onValueChange,
+  value,
+  ...props
+}) {
+  const {
+    messages
+  } = useInternationalization();
+  const monthId = useId();
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const selected = value ?? internalValue;
+  const selectedDate = parseIso(selected);
+  const [focusedIso, setFocusedIso] = useState(() => selected || toIso(new Date(Date.UTC(2000, 0, 1))));
+  const focused = parseIso(focusedIso) ?? new Date(Date.UTC(2000, 0, 1));
+  const weeks = monthGrid(focused);
+  const todayIso = toIso(new Date());
+  const dayRefs = useRef(new Map());
+  // Only keyboard movement drags focus along; a click or a month step must not.
+  const followFocus = useRef(false);
+  useEffect(() => {
+    if (!followFocus.current) {
+      return;
+    }
+    followFocus.current = false;
+    dayRefs.current.get(focusedIso)?.focus();
+  }, [focusedIso]);
+  function outOfRange(date) {
+    const iso = toIso(date);
+    return min !== undefined && iso < min || max !== undefined && iso > max;
+  }
+  function select(date) {
+    const iso = toIso(date);
+    if (value === undefined) {
+      setInternalValue(iso);
+    }
+    setFocusedIso(iso);
+    onValueChange?.(iso);
+  }
+  function moveFocus(date) {
+    followFocus.current = true;
+    setFocusedIso(toIso(date));
+  }
+  function handleKeyDown(event) {
+    const steps = {
+      ArrowLeft: -1,
+      ArrowRight: 1,
+      ArrowUp: -7,
+      ArrowDown: 7
+    };
+    if (event.key in steps) {
+      event.preventDefault();
+      moveFocus(addDays(focused, steps[event.key] ?? 0));
+      return;
+    }
+    if (event.key === 'Home' || event.key === 'End') {
+      event.preventDefault();
+      const offset = weekdayIndex(focused);
+      moveFocus(addDays(focused, event.key === 'Home' ? -offset : 6 - offset));
+      return;
+    }
+    if (event.key === 'PageUp' || event.key === 'PageDown') {
+      event.preventDefault();
+      moveFocus(addMonths(focused, event.key === 'PageUp' ? -1 : 1));
+    }
+  }
+  return /*#__PURE__*/_jsxs("div", {
+    ...props,
+    ...{
+      className: "x1ixvsy6 x7xrhi9 x165nt33 x3nfvp2 xdt5ytf xj0sio9 x1ap6kct x1lr58ck x1q83fih"
+    },
+    children: [/*#__PURE__*/_jsxs("div", {
+      ...{
+        className: "x6s0dn4 x78zum5 x1ap6kct x1qughib"
+      },
+      children: [/*#__PURE__*/_jsx(IconButton, {
+        "aria-label": messages.calendarPreviousMonth,
+        onClick: () => {
+          setFocusedIso(toIso(addMonths(focused, -1)));
+        },
+        size: "sm",
+        variant: "ghost",
+        children: /*#__PURE__*/_jsx(Icon, {
+          children: /*#__PURE__*/_jsx("path", {
+            d: "m15 6-6 6 6 6",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2"
+          })
+        })
+      }), /*#__PURE__*/_jsx("p", {
+        "aria-live": "polite",
+        id: monthId,
+        role: "status",
+        ...{
+          className: "x1y4yzzg x13fdfvb x1ti3rys xss6m8b x1m30uz7 xq5azjn x1vslzj6 x1ghz6dp"
+        },
+        children: formatMonth(focused)
+      }), /*#__PURE__*/_jsx(IconButton, {
+        "aria-label": messages.calendarNextMonth,
+        onClick: () => {
+          setFocusedIso(toIso(addMonths(focused, 1)));
+        },
+        size: "sm",
+        variant: "ghost",
+        children: /*#__PURE__*/_jsx(Icon, {
+          children: /*#__PURE__*/_jsx("path", {
+            d: "m9 6 6 6-6 6",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2"
+          })
+        })
+      })]
+    }), /*#__PURE__*/_jsxs("table", {
+      "aria-describedby": monthId,
+      "aria-label": label,
+      onKeyDown: handleKeyDown,
+      role: "grid",
+      ...{
+        className: "x1mwwwfo"
+      },
+      children: [/*#__PURE__*/_jsx("thead", {
+        children: /*#__PURE__*/_jsx("tr", {
+          children: weekdays.map(weekday => /*#__PURE__*/_jsx("th", {
+            scope: "col",
+            ...{
+              className: "x1mgtvnk x13fdfvb xnlz8j1 x1m30uz7 x1di4hct x1vslzj6 x10y07nz x4ml2zf"
+            },
+            children: weekday
+          }, weekday))
+        })
+      }), /*#__PURE__*/_jsx("tbody", {
+        children: weeks.map(week => /*#__PURE__*/_jsx("tr", {
+          children: week.map(date => {
+            const iso = toIso(date);
+            const isSelected = selectedDate !== undefined && iso === selected;
+            const outsideMonth = date.getUTCMonth() !== focused.getUTCMonth();
+            return /*#__PURE__*/_jsx("td", {
+              ...{
+                className: "x1717udv"
+              },
+              children: /*#__PURE__*/_jsx("button", {
+                "aria-current": isSelected ? 'date' : undefined
+                // The visible text is just the day number, which repeats
+                // across the leading and trailing weeks of the grid.
+                ,
+                "aria-label": formatDay(date),
+                disabled: outOfRange(date),
+                onClick: () => {
+                  select(date);
+                },
+                ref: element => {
+                  if (element) {
+                    dayRefs.current.set(iso, element);
+                  } else {
+                    dayRefs.current.delete(iso);
+                  }
+                },
+                tabIndex: iso === focusedIso ? 0 : -1,
+                ...stylex.props(styles.day, isSelected ? styles.chosen : outsideMonth ? styles.outside : styles.open, !isSelected && iso === todayIso && styles.today),
+                type: "button",
+                children: date.getUTCDate()
+              })
+            }, iso);
+          })
+        }, toIso(week[0])))
+      })]
+    })]
+  });
+}

package/dist/Calendar/index.d.ts

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

package/dist/Calendar/index.js

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

package/dist/Card/Card.js

@@ -7,7 +7,7 @@ const styles = {
     kWkggS: "x1ixvsy6",
     kaIpWk: "x7xrhi9",
     kMwMTN: "x1y4yzzg",
-    kmVPX3: "x167l562",
+    kmVPX3: "x1cfciu7",
     $$css: true
   },
   none: {

package/dist/CardFooter/CardFooter.js

@@ -9,7 +9,7 @@ export function CardFooter({
   return /*#__PURE__*/_jsx("footer", {
     ...props,
     ...{
-      className: "x1pe616k x4tqos1 xlyo07a x1yc2x4e x19a07bp x1suer1w x17uk85o x92ksv2"
+      className: "x1pe616k x4tqos1 xlyo07a x9foigv xo7e5gj xvj2qsy x1lr58ck x1q83fih"
     },
     children: children
   });

package/dist/CardHeader/CardHeader.js

@@ -9,7 +9,7 @@ export function CardHeader({
   return /*#__PURE__*/_jsx("header", {
     ...props,
     ...{
-      className: "x1k3hjl9 x1w5tod1 xeq6m5c x5845i8 x1sx9ztw x1suer1w x17uk85o x92ksv2"
+      className: "x1k3hjl9 x1w5tod1 xeq6m5c x1gmqdwl x110lmm4 xvj2qsy x1lr58ck x1q83fih"
     },
     children: children
   });

package/dist/Carousel/Carousel.d.ts

@@ -0,0 +1,14 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+/** Props for a horizontally scrolling row of slides. */
+export interface CarouselProps extends Omit<HTMLAttributes<HTMLDivElement>, 'aria-label' | 'aria-roledescription' | 'className' | 'role'> {
+    readonly children: ReactNode;
+    readonly label: string;
+    readonly nextLabel?: string;
+    readonly previousLabel?: string;
+}
+/**
+ * Scrolls a row of slides. The viewport itself is focusable and scrollable,
+ * so the content stays reachable by keyboard and by touch even if the arrow
+ * controls are never used.
+ */
+export declare function Carousel({ children, label, nextLabel, previousLabel, ...props }: CarouselProps): import("react").JSX.Element;

package/dist/Carousel/Carousel.doc.d.ts

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

package/dist/Carousel/Carousel.doc.js

@@ -0,0 +1,21 @@
+import "../styles/stylex.css";
+export const carouselDoc = {
+  name: 'Carousel',
+  description: 'Scrolls a row of slides horizontally.',
+  props: [{
+    name: 'children',
+    description: 'Supplies the slides.'
+  }, {
+    name: 'label',
+    description: 'Names the carousel for assistive technology.'
+  }, {
+    name: 'nextLabel',
+    description: 'Names the forward control.'
+  }, {
+    name: 'previousLabel',
+    description: 'Names the backward control.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLDivElement> except aria-label, aria-roledescription, className, and role'],
+  example: '<Carousel label="Screenshots">{slides}</Carousel>',
+  storyId: 'core-carousel--default'
+};

package/dist/Carousel/Carousel.js

@@ -0,0 +1,117 @@
+import * as stylex from '@stylexjs/stylex';
+import { Children, useRef } from 'react';
+import { semanticTokens } from '../authoring.stylex.js';
+import { scrolling } from '../scrolling/index.js';
+import { useInternationalization } from '../i18n/index.js';
+import { Icon } from '../Icon/index.js';
+import { IconButton } from '../IconButton/index.js';
+import "../styles/stylex.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const styles = {
+  viewport: {
+    k1xSpc: "x78zum5",
+    kOIVth: "xtl099x",
+    kXHlph: "xw2csxc",
+    kGO01o: "x13jfld5",
+    kc424l: "xhfbhpw",
+    kZs9gx: "x15meki4",
+    kiEn40: "xz32tfx",
+    k7shQP: "x1p22nma",
+    kPJHz1: "x17lds6u",
+    $$css: true
+  }
+};
+
+/**
+ * Honours the same reduced-motion contract the stylesheet does: a reader who
+ * asked for less motion gets the jump rather than the glide.
+ *
+ * @internal
+ */
+function scrollBehavior() {
+  return globalThis.matchMedia?.('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth';
+}
+
+/** Props for a horizontally scrolling row of slides. */
+
+/**
+ * Scrolls a row of slides. The viewport itself is focusable and scrollable,
+ * so the content stays reachable by keyboard and by touch even if the arrow
+ * controls are never used.
+ */
+export function Carousel({
+  children,
+  label,
+  nextLabel,
+  previousLabel,
+  ...props
+}) {
+  const {
+    messages
+  } = useInternationalization();
+  const viewportRef = useRef(null);
+  function scrollBy(direction) {
+    const viewport = viewportRef.current;
+    if (viewport) {
+      viewport.scrollBy({
+        behavior: scrollBehavior(),
+        left: direction * viewport.clientWidth
+      });
+    }
+  }
+  return /*#__PURE__*/_jsxs("div", {
+    ...props,
+    "aria-label": label,
+    "aria-roledescription": "carousel",
+    role: "group",
+    ...{
+      className: "xrvj5dj xj0sio9 x1ap6kct"
+    },
+    children: [/*#__PURE__*/_jsx("div", {
+      ref: viewportRef,
+      tabIndex: 0,
+      ...stylex.props(styles.viewport, scrolling.region),
+      children: Children.map(children, (child, index) => /*#__PURE__*/_jsx("div", {
+        ...{
+          className: "x2lah0s x1bhewko"
+        },
+        children: child
+      }, index))
+    }), /*#__PURE__*/_jsxs("div", {
+      ...{
+        className: "x78zum5 x1iwn5ga x13a6bvl"
+      },
+      children: [/*#__PURE__*/_jsx(IconButton, {
+        "aria-label": previousLabel ?? messages.carouselPrevious,
+        onClick: () => {
+          scrollBy(-1);
+        },
+        size: "sm",
+        variant: "secondary",
+        children: /*#__PURE__*/_jsx(Icon, {
+          children: /*#__PURE__*/_jsx("path", {
+            d: "m15 6-6 6 6 6",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2"
+          })
+        })
+      }), /*#__PURE__*/_jsx(IconButton, {
+        "aria-label": nextLabel ?? messages.carouselNext,
+        onClick: () => {
+          scrollBy(1);
+        },
+        size: "sm",
+        variant: "secondary",
+        children: /*#__PURE__*/_jsx(Icon, {
+          children: /*#__PURE__*/_jsx("path", {
+            d: "m9 6 6 6-6 6",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2"
+          })
+        })
+      })]
+    })]
+  });
+}

package/dist/Carousel/index.d.ts

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

package/dist/Carousel/index.js

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

package/dist/Chat/Chat.d.ts

@@ -0,0 +1,83 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+/** Who produced a chat message. */
+export type ChatAuthor = 'assistant' | 'reader' | 'system';
+/** Props for the message-and-composer frame. */
+export interface ChatLayoutProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
+    readonly composer: ReactNode;
+}
+/** Frames a scrolling transcript above a fixed composer. */
+export declare function ChatLayout({ children, composer, ...props }: ChatLayoutProps): import("react").JSX.Element;
+/** Props for the scrolling transcript. */
+export interface ChatMessageListProps extends Omit<HTMLAttributes<HTMLUListElement>, 'aria-atomic' | 'aria-label' | 'aria-live' | 'aria-relevant' | 'className'> {
+    readonly label: string;
+}
+/**
+ * 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 declare function ChatMessageList({ children, label, ...props }: ChatMessageListProps): import("react").JSX.Element;
+/** Props for one message in the transcript. */
+export interface ChatMessageProps extends Omit<HTMLAttributes<HTMLLIElement>, 'className'> {
+    readonly author: ChatAuthor;
+    readonly authorName?: ReactNode;
+    readonly pending?: boolean;
+}
+/**
+ * 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 declare function ChatMessage({ author, authorName, children, pending, ...props }: ChatMessageProps): import("react").JSX.Element;
+/** One tool invocation attached to a message. */
+export interface ChatToolCall {
+    readonly detail?: ReactNode;
+    readonly id: string;
+    readonly name: string;
+    readonly status?: 'done' | 'failed' | 'running';
+}
+/** Props for the tool calls behind a reply. */
+export interface ChatToolCallsProps extends Omit<HTMLAttributes<HTMLUListElement>, 'aria-label' | 'children' | 'className'> {
+    readonly calls: readonly ChatToolCall[];
+    readonly label?: string;
+}
+/** Lists the tool calls behind a reply so the work stays inspectable. */
+export declare function ChatToolCalls({ calls, label, ...props }: ChatToolCallsProps): import("react").JSX.Element;
+/** Props for the message composer. */
+export interface ChatComposerProps extends Omit<HTMLAttributes<HTMLFormElement>, 'children' | 'className' | 'onSubmit'> {
+    readonly disabled?: boolean;
+    readonly label: string;
+    readonly onSend: (message: string) => void;
+    readonly placeholder?: string;
+    readonly sendLabel?: ReactNode;
+}
+/**
+ * Composes a message. Enter sends and Shift+Enter starts a new line, which is
+ * what a reader expects from every other chat field.
+ */
+export declare function ChatComposer({ disabled, label, onSend, placeholder, sendLabel, ...props }: ChatComposerProps): import("react").JSX.Element;
+/** One labelled fact about how a message was produced. */
+export interface ChatMetadataEntry {
+    readonly label: string;
+    readonly value: ReactNode;
+}
+/** Props for the provenance line under a message. */
+export interface ChatMessageMetadataProps extends Omit<HTMLAttributes<HTMLDListElement>, 'children' | 'className'> {
+    readonly entries: readonly ChatMetadataEntry[];
+}
+/**
+ * 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 declare function ChatMessageMetadata({ entries, ...props }: ChatMessageMetadataProps): import("react").JSX.Element;
+/** Props for a message from the system rather than a participant. */
+export interface ChatSystemMessageProps extends Omit<HTMLAttributes<HTMLLIElement>, 'className'> {
+    readonly children: ReactNode;
+}
+/**
+ * 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 declare function ChatSystemMessage({ children, ...props }: ChatSystemMessageProps): import("react").JSX.Element;