@misoto22/kioku-ui 0.0.0 → 0.2.0

package/dist/Markdown/Markdown.doc.d.ts

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

package/dist/Markdown/Markdown.doc.js

@@ -0,0 +1,12 @@
+import "../styles/stylex.css";
+export const markdownDoc = {
+  name: 'Markdown',
+  description: 'Renders a restricted Markdown subset into system components.',
+  props: [{
+    name: 'source',
+    description: 'Supplies the Markdown text to render.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLDivElement> except children, className, and dangerouslySetInnerHTML'],
+  example: '<Markdown source="## Release 12\\n\\nReady to **publish**." />',
+  storyId: 'core-markdown--default'
+};

package/dist/Markdown/Markdown.js

@@ -0,0 +1,90 @@
+import * as stylex from '@stylexjs/stylex';
+import { Fragment } from 'react';
+import { semanticTokens } from '../authoring.stylex.js';
+import { Blockquote } from '../Blockquote/index.js';
+import { Code } from '../Code/index.js';
+import { Heading } from '../Heading/index.js';
+import { List, ListItem } from '../List/index.js';
+import { Link } from '../navigation/index.js';
+import { Text } from '../Text/index.js';
+import { parseMarkdown } from './parse.js';
+import "../styles/stylex.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+function renderInline(spans) {
+  return spans.map((span, index) => {
+    switch (span.kind) {
+      case 'code':
+        return /*#__PURE__*/_jsx(Code, {
+          children: span.text
+        }, index);
+      case 'emphasis':
+        return /*#__PURE__*/_jsx("em", {
+          ...{
+            className: "xj0sio9 x1k4tb9n"
+          },
+          children: span.text
+        }, index);
+      case 'link':
+        return /*#__PURE__*/_jsx(Link, {
+          href: span.href,
+          children: span.text
+        }, index);
+      case 'strong':
+        return /*#__PURE__*/_jsx("strong", {
+          ...{
+            className: "xj0sio9 x1j61x8r x1sa4947"
+          },
+          children: span.text
+        }, index);
+      default:
+        return /*#__PURE__*/_jsx(Fragment, {
+          children: span.text
+        }, index);
+    }
+  });
+}
+
+/** Props for rendering a restricted Markdown subset. */
+
+/**
+ * Renders a deliberately small Markdown subset into system components. Raw
+ * HTML is never interpreted and only http(s) or root-relative links survive,
+ * so text from an untrusted source cannot inject markup or a script URL.
+ */
+export function Markdown({
+  source,
+  ...props
+}) {
+  const blocks = parseMarkdown(source);
+  return /*#__PURE__*/_jsx("div", {
+    ...props,
+    ...{
+      className: "x78zum5 xdt5ytf xj0sio9 xtl099x"
+    },
+    children: blocks.map((block, index) => {
+      switch (block.kind) {
+        case 'heading':
+          return /*#__PURE__*/_jsx(Heading, {
+            level: block.level,
+            size: block.level === 2 ? 'section' : 'subsection',
+            children: renderInline(block.spans)
+          }, index);
+        case 'list':
+          return /*#__PURE__*/_jsx(List, {
+            variant: block.ordered ? 'ordered' : 'unordered',
+            children: block.items.map((item, itemIndex) => /*#__PURE__*/_jsx(ListItem, {
+              children: renderInline(item)
+            }, itemIndex))
+          }, index);
+        case 'quote':
+          return /*#__PURE__*/_jsx(Blockquote, {
+            children: renderInline(block.spans)
+          }, index);
+        default:
+          return /*#__PURE__*/_jsx(Text, {
+            children: renderInline(block.spans)
+          }, index);
+      }
+    })
+  });
+}

package/dist/Markdown/index.d.ts

@@ -0,0 +1,2 @@
+export { Markdown, type MarkdownProps } from './Markdown.js';
+export { parseInline, parseMarkdown, type BlockNode, type InlineNode, } from './parse.js';

package/dist/Markdown/index.js

@@ -0,0 +1,3 @@
+import "../styles/stylex.css";
+export { Markdown } from './Markdown.js';
+export { parseInline, parseMarkdown } from './parse.js';

package/dist/Markdown/parse.d.ts

@@ -0,0 +1,42 @@
+/** One inline run produced by the restricted Markdown parser. */
+export type InlineNode = {
+    readonly kind: 'code';
+    readonly text: string;
+} | {
+    readonly kind: 'emphasis';
+    readonly text: string;
+} | {
+    readonly kind: 'link';
+    readonly href: string;
+    readonly text: string;
+} | {
+    readonly kind: 'strong';
+    readonly text: string;
+} | {
+    readonly kind: 'text';
+    readonly text: string;
+};
+/** One block produced by the restricted Markdown parser. */
+export type BlockNode = {
+    readonly kind: 'heading';
+    readonly level: 2 | 3;
+    readonly spans: readonly InlineNode[];
+} | {
+    readonly kind: 'list';
+    readonly items: readonly (readonly InlineNode[])[];
+    readonly ordered: boolean;
+} | {
+    readonly kind: 'paragraph';
+    readonly spans: readonly InlineNode[];
+} | {
+    readonly kind: 'quote';
+    readonly spans: readonly InlineNode[];
+};
+/** Splits one line into inline runs. */
+export declare function parseInline(line: string): readonly InlineNode[];
+/**
+ * Parses a deliberately small Markdown subset: paragraphs, `##`/`###`
+ * headings, `-`/`1.` lists, `>` quotes, and inline code, emphasis, strong,
+ * and links. Raw HTML is never interpreted, so untrusted text stays inert.
+ */
+export declare function parseMarkdown(source: string): readonly BlockNode[];

package/dist/Markdown/parse.js

@@ -0,0 +1,128 @@
+import "../styles/stylex.css";
+/** One inline run produced by the restricted Markdown parser. */
+/** One block produced by the restricted Markdown parser. */
+// Ordered so the first match wins; `strong` must precede `emphasis`.
+const inlinePattern = /(`[^`]+`)|(\[[^\]]+\]\([^)\s]+\))|(\*\*[^*]+\*\*)|(\*[^*]+\*)/u;
+
+// Only http(s) and root-relative targets survive; everything else is inert
+// text, which is what stops `javascript:` from reaching an anchor.
+function safeHref(href) {
+  return /^(https?:\/\/|\/)/u.test(href) ? href : undefined;
+}
+
+/** Splits one line into inline runs. */
+export function parseInline(line) {
+  const spans = [];
+  let rest = line;
+  while (rest !== '') {
+    const match = inlinePattern.exec(rest);
+    if (!match || match.index === undefined) {
+      spans.push({
+        kind: 'text',
+        text: rest
+      });
+      break;
+    }
+    if (match.index > 0) {
+      spans.push({
+        kind: 'text',
+        text: rest.slice(0, match.index)
+      });
+    }
+    const token = match[0];
+    if (token.startsWith('`')) {
+      spans.push({
+        kind: 'code',
+        text: token.slice(1, -1)
+      });
+    } else if (token.startsWith('[')) {
+      const divider = token.indexOf('](');
+      const text = token.slice(1, divider);
+      const href = safeHref(token.slice(divider + 2, -1));
+      spans.push(href === undefined ? {
+        kind: 'text',
+        text
+      } : {
+        href,
+        kind: 'link',
+        text
+      });
+    } else if (token.startsWith('**')) {
+      spans.push({
+        kind: 'strong',
+        text: token.slice(2, -2)
+      });
+    } else {
+      spans.push({
+        kind: 'emphasis',
+        text: token.slice(1, -1)
+      });
+    }
+    rest = rest.slice(match.index + token.length);
+  }
+  return spans;
+}
+
+/**
+ * Parses a deliberately small Markdown subset: paragraphs, `##`/`###`
+ * headings, `-`/`1.` lists, `>` quotes, and inline code, emphasis, strong,
+ * and links. Raw HTML is never interpreted, so untrusted text stays inert.
+ */
+export function parseMarkdown(source) {
+  const blocks = [];
+  const lines = source.replace(/\r\n/gu, '\n').split('\n');
+  let index = 0;
+  while (index < lines.length) {
+    const line = lines[index] ?? '';
+    if (line.trim() === '') {
+      index += 1;
+      continue;
+    }
+    const heading = /^(#{2,3})\s+(.*)$/u.exec(line);
+    if (heading) {
+      blocks.push({
+        kind: 'heading',
+        level: heading[1]?.length === 2 ? 2 : 3,
+        spans: parseInline(heading[2] ?? '')
+      });
+      index += 1;
+      continue;
+    }
+    if (line.startsWith('> ')) {
+      blocks.push({
+        kind: 'quote',
+        spans: parseInline(line.slice(2))
+      });
+      index += 1;
+      continue;
+    }
+    const bullet = /^[-*]\s+(.*)$/u.exec(line);
+    const numbered = /^\d+\.\s+(.*)$/u.exec(line);
+    if (bullet || numbered) {
+      const ordered = numbered !== null;
+      const items = [];
+      while (index < lines.length) {
+        const entry = ordered ? /^\d+\.\s+(.*)$/u.exec(lines[index] ?? '') : /^[-*]\s+(.*)$/u.exec(lines[index] ?? '');
+        if (!entry) break;
+        items.push(parseInline(entry[1] ?? ''));
+        index += 1;
+      }
+      blocks.push({
+        items,
+        kind: 'list',
+        ordered
+      });
+      continue;
+    }
+    const paragraph = [];
+    while (index < lines.length && (lines[index] ?? '').trim() !== '') {
+      paragraph.push(lines[index] ?? '');
+      index += 1;
+    }
+    blocks.push({
+      kind: 'paragraph',
+      spans: parseInline(paragraph.join(' '))
+    });
+  }
+  return blocks;
+}

package/dist/MetadataList/MetadataList.d.ts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+/** One labelled fact about the subject. */
+export interface MetadataEntry {
+    readonly detail: ReactNode;
+    readonly term: ReactNode;
+}
+/** Layouts a metadata list can take. */
+export type MetadataListLayout = 'inline' | 'stacked';
+/** Props for a list of labelled facts. */
+export interface MetadataListProps extends Omit<HTMLAttributes<HTMLDListElement>, 'children' | 'className'> {
+    readonly entries: readonly MetadataEntry[];
+    readonly layout?: MetadataListLayout;
+}
+/**
+ * Lists labelled facts about one subject. It emits a description list, so the
+ * pairing between a term and its detail survives without visual layout.
+ */
+export declare function MetadataList({ entries, layout, ...props }: MetadataListProps): import("react").JSX.Element;

package/dist/MetadataList/MetadataList.doc.d.ts

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

package/dist/MetadataList/MetadataList.doc.js

@@ -0,0 +1,15 @@
+import "../styles/stylex.css";
+export const metadataListDoc = {
+  name: 'MetadataList',
+  description: 'Lists labelled facts about one subject.',
+  props: [{
+    name: 'entries',
+    description: 'Supplies the term and detail pairs.'
+  }, {
+    name: 'layout',
+    description: 'Selects stacked or side-by-side pairing.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLDListElement> except children and className'],
+  example: '<MetadataList entries={[{term: "Owner", detail: "Ada"}]} />',
+  storyId: 'core-metadata-list--default'
+};

package/dist/MetadataList/MetadataList.js

@@ -0,0 +1,93 @@
+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 = {
+  list: {
+    k1xSpc: "xrvj5dj",
+    kMv6JI: "xj0sio9",
+    kOIVth: "x1ap6kct",
+    kogj98: "x1ghz6dp",
+    $$css: true
+  },
+  stacked: {
+    kumcoG: "x1y6fwsi",
+    $$css: true
+  },
+  inline: {
+    kGNEyG: "x1pha0wt",
+    k1C7PZ: "x1nm4htl",
+    kumcoG: "x1pmbctz",
+    $$css: true
+  },
+  pairInline: {
+    k1xSpc: "xjp7ctv",
+    $$css: true
+  },
+  pairStacked: {
+    k1xSpc: "xrvj5dj",
+    khm7nJ: "xfhy3zi",
+    $$css: true
+  },
+  term: {
+    kMwMTN: "x17y7oyd",
+    kMv6JI: "x69it5h",
+    kGuDYH: "xnlz8j1",
+    k63SB2: "x1jcbhmk",
+    kb6lSQ: "x1di4hct",
+    kLWn49: "x1ezks3f",
+    kogj98: "x1ghz6dp",
+    $$css: true
+  },
+  detail: {
+    kMwMTN: "x1y4yzzg",
+    kMv6JI: "xj0sio9",
+    kGuDYH: "x1ti3rys",
+    kb6lSQ: "xgz4m7n",
+    kLWn49: "x1ezks3f",
+    kogj98: "x1ghz6dp",
+    $$css: true
+  }
+};
+const pairs = {
+  inline: styles.pairInline,
+  stacked: styles.pairStacked
+};
+
+/** One labelled fact about the subject. */
+
+/** Layouts a metadata list can take. */
+
+/** Props for a list of labelled facts. */
+
+/**
+ * Lists labelled facts about one subject. It emits a description list, so the
+ * pairing between a term and its detail survives without visual layout.
+ */
+export function MetadataList({
+  entries,
+  layout = 'stacked',
+  ...props
+}) {
+  return /*#__PURE__*/_jsx("dl", {
+    ...props,
+    ...stylex.props(styles.list, styles[layout]),
+    children: entries.map(({
+      detail,
+      term
+    }, index) => /*#__PURE__*/_jsxs("div", {
+      ...stylex.props(pairs[layout]),
+      children: [/*#__PURE__*/_jsx("dt", {
+        ...{
+          className: "x17y7oyd x69it5h xnlz8j1 x1jcbhmk x1di4hct x1ezks3f x1ghz6dp"
+        },
+        children: term
+      }), /*#__PURE__*/_jsx("dd", {
+        ...{
+          className: "x1y4yzzg xj0sio9 x1ti3rys xgz4m7n x1ezks3f x1ghz6dp"
+        },
+        children: detail
+      })]
+    }, index))
+  });
+}

package/dist/MetadataList/index.d.ts

@@ -0,0 +1 @@
+export { MetadataList, type MetadataEntry, type MetadataListLayout, type MetadataListProps, } from './MetadataList.js';

package/dist/MetadataList/index.js

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

package/dist/MetricGrid/MetricGrid.js

@@ -10,25 +10,25 @@ export function MetricGrid({
   return /*#__PURE__*/_jsx("dl", {
     ...props,
     ...{
-      className: "xrvj5dj x4nws80 x1tyajke x1ghz6dp"
+      className: "x3bfdtj xilcjya x7xrhi9 x1jnjmdy xpxnlqs xrvj5dj x18cwcfb x1tyajke x1ghz6dp xb3r6kr"
     },
     children: items.map((item, index) => /*#__PURE__*/_jsxs("div", {
       ...{
-        className: "x1ixvsy6 xilcjya x7xrhi9 x1jnjmdy xpxnlqs xrvj5dj x1iwn5ga x1cfciu7"
+        className: "x1ixvsy6 xrvj5dj x1iwn5ga x1cfciu7"
       },
       children: [/*#__PURE__*/_jsx("dt", {
         ...{
-          className: "x17y7oyd xj0sio9 xltg2ad"
+          className: "x17y7oyd x69it5h xnlz8j1 x1di4hct x1vslzj6"
         },
         children: item.label
       }), /*#__PURE__*/_jsx("dd", {
         ...{
-          className: "x1y4yzzg x69it5h xfuxfq0 x1sa4947 x1ghz6dp"
+          className: "x1y4yzzg x13fdfvb xfuxfq0 xss6m8b xc3mek0 x1uo3zyz x1ghz6dp"
         },
         children: item.value
       }), item.detail ? /*#__PURE__*/_jsx("dd", {
         ...{
-          className: "x1mgtvnk xj0sio9 xltg2ad x1ghz6dp"
+          className: "x1mgtvnk xj0sio9 xltg2ad xq5azjn x1ghz6dp"
         },
         children: item.detail
       }) : null]

package/dist/MobileNav/MobileNav.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from 'react';
+/** Props for the navigation drawer used on narrow viewports. */
+export interface MobileNavProps {
+    readonly children: ReactNode;
+    readonly closeLabel?: string;
+    readonly label: string;
+    readonly title?: ReactNode;
+}
+/**
+ * Holds navigation behind a trigger on narrow viewports. It owns its open
+ * state and traps focus inside the drawer while it is open.
+ */
+export declare function MobileNav({ children, closeLabel, label, title, }: MobileNavProps): import("react").JSX.Element;

package/dist/MobileNav/MobileNav.doc.d.ts

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

package/dist/MobileNav/MobileNav.doc.js

@@ -0,0 +1,21 @@
+import "../styles/stylex.css";
+export const mobileNavDoc = {
+  name: 'MobileNav',
+  description: 'Holds navigation behind a trigger on narrow viewports.',
+  props: [{
+    name: 'children',
+    description: 'Supplies the navigation content.'
+  }, {
+    name: 'closeLabel',
+    description: 'Names the dismiss control.'
+  }, {
+    name: 'label',
+    description: 'Names the trigger and the drawer.'
+  }, {
+    name: 'title',
+    description: 'Replaces the drawer heading text.'
+  }],
+  inheritedProps: ['None; MobileNav owns its trigger and drawer'],
+  example: '<MobileNav label="Open navigation">{menu}</MobileNav>',
+  storyId: 'core-mobile-nav--default'
+};

package/dist/MobileNav/MobileNav.js

@@ -0,0 +1,126 @@
+import * as stylex from '@stylexjs/stylex';
+import { useId, useState } from 'react';
+import { semanticTokens } from '../authoring.stylex.js';
+import { scrolling } from '../scrolling/index.js';
+import { useFocusTrap } from '../hooks/useFocusTrap.js';
+import { useScrollLock } from '../hooks/useScrollLock.js';
+import { Icon } from '../Icon/index.js';
+import { IconButton } from '../IconButton/index.js';
+import { Layer } from '../Layer/index.js';
+
+// Wide enough for a two-word destination and its glyph, narrow enough that the
+// page behind it stays visible. Built from the scale, not written as a length.
+import "../styles/stylex.css";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const drawerMaxWidth = `calc(11 * ${semanticTokens.spacing2xl})`;
+const styles = {
+  drawer: {
+    kWkggS: "x1ixvsy6",
+    kT0f0o: "x1gzn8ix",
+    kfmiAY: "xbx091o",
+    ksu8eU: "xng3xce",
+    kGVxlE: "x1ia5mbg",
+    kMwMTN: "x1y4yzzg",
+    k1xSpc: "x78zum5",
+    kXwgrk: "xdt5ytf",
+    kMv6JI: "xj0sio9",
+    ks0D6T: "x1jw1975",
+    k3XXqK: "x1t137rt",
+    kORKVm: "x1odjw0f",
+    kmVPX3: "x1cfciu7",
+    khm7nJ: "x13unpfo",
+    kzqmXN: "x1f9tj09",
+    kZs9gx: "x15meki4",
+    kiEn40: "xz32tfx",
+    k7shQP: "x1p22nma",
+    kPJHz1: "x17lds6u",
+    $$css: true
+  }
+};
+
+/** Props for the navigation drawer used on narrow viewports. */
+
+/**
+ * Holds navigation behind a trigger on narrow viewports. It owns its open
+ * state and traps focus inside the drawer while it is open.
+ */
+export function MobileNav({
+  children,
+  closeLabel = 'Close navigation',
+  label,
+  title
+}) {
+  const [open, setOpen] = useState(false);
+  const [drawer, setDrawer] = useState(null);
+  const titleId = useId();
+  useFocusTrap(drawer, open);
+  useScrollLock(open);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(IconButton, {
+      "aria-expanded": open,
+      "aria-label": label,
+      onClick: () => {
+        setOpen(true);
+      },
+      variant: "ghost",
+      children: /*#__PURE__*/_jsx(Icon, {
+        children: /*#__PURE__*/_jsx("path", {
+          d: "M4 7h16M4 12h16M4 17h16",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2"
+        })
+      })
+    }), open ? /*#__PURE__*/_jsx(Layer, {
+      children: /*#__PURE__*/_jsx("div", {
+        onMouseDown: event => {
+          if (event.target === event.currentTarget) {
+            setOpen(false);
+          }
+        },
+        ...{
+          className: "x158cxwz x78zum5 x10a8y8t xixxii4"
+        },
+        children: /*#__PURE__*/_jsxs("div", {
+          "aria-labelledby": titleId,
+          "aria-modal": "true",
+          onKeyDown: event => {
+            if (event.key === 'Escape') {
+              setOpen(false);
+            }
+          },
+          ref: setDrawer,
+          role: "dialog",
+          ...stylex.props(styles.drawer, scrolling.region),
+          tabIndex: -1,
+          children: [/*#__PURE__*/_jsxs("div", {
+            ...{
+              className: "x6s0dn4 x1rzuj2w x1w5tod1 xeq6m5c x2w1tkd x78zum5 x1qughib xj1ngls"
+            },
+            children: [/*#__PURE__*/_jsx("p", {
+              id: titleId,
+              ...{
+                className: "x1y4yzzg x69it5h x1fkw5ar x1m30uz7 xmkh2y5 x1vslzj6 x1ghz6dp"
+              },
+              children: title ?? label
+            }), /*#__PURE__*/_jsx(IconButton, {
+              "aria-label": closeLabel,
+              onClick: () => {
+                setOpen(false);
+              },
+              variant: "ghost",
+              children: /*#__PURE__*/_jsx(Icon, {
+                children: /*#__PURE__*/_jsx("path", {
+                  d: "m6 6 12 12M18 6 6 18",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2"
+                })
+              })
+            })]
+          }), children]
+        })
+      })
+    }) : null]
+  });
+}

package/dist/MobileNav/index.d.ts

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

package/dist/MobileNav/index.js

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

package/dist/MoreMenu/MoreMenu.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode } from 'react';
+import type { Alignment, Placement } from '../hooks/useAnchoredPosition.js';
+/** Props for the self-managed overflow menu. */
+export interface MoreMenuProps {
+    readonly alignment?: Alignment;
+    readonly children: ReactNode;
+    readonly label: string;
+    readonly placement?: Placement;
+}
+/**
+ * Collects secondary actions behind one trigger and owns its own open state,
+ * so a caller that has no other reason to hold state does not grow one.
+ */
+export declare function MoreMenu({ alignment, children, label, placement, }: MoreMenuProps): import("react").JSX.Element;