@misoto22/kioku-ui 0.0.0 → 0.2.0

package/dist/Kbd/Kbd.doc.js

@@ -0,0 +1,12 @@
+import "../styles/stylex.css";
+export const kbdDoc = {
+  name: 'Kbd',
+  description: 'Renders a keyboard key inside running text.',
+  props: [{
+    name: 'children',
+    description: 'Supplies the key label.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLElement> except className'],
+  example: '<Kbd>Esc</Kbd>',
+  storyId: 'core-kbd--default'
+};

package/dist/Kbd/Kbd.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 a rendered keyboard key. */
+
+/** Renders one keyboard key so shortcuts read as input, not as prose. */
+export function Kbd({
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx("kbd", {
+    ...props,
+    ...{
+      className: "xavu78a x1l6hjkl xng3xce x1gnnqk1 x1y4yzzg x1rg5ohu x7ohnf4 xnlz8j1 xss6m8b x1m30uz7 x1kbjp2h x1ezks3f xov5yc9 xuxw1ft"
+    },
+    children: children
+  });
+}

package/dist/Kbd/index.d.ts

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

package/dist/Kbd/index.js

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

package/dist/Layer/Layer.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from 'react';
+/** Props for the portal boundary shared by every floating surface. */
+export interface LayerProps {
+    readonly children: ReactNode;
+    readonly container?: Element | null;
+}
+/**
+ * Renders its children outside the current DOM position so a floating surface
+ * escapes ancestor overflow and stacking contexts. Nothing is portalled during
+ * the server render, so hydration matches the markup React sent.
+ *
+ * The default target is the theme root, not `document.body`. A theme writes its
+ * custom properties onto its own element, so a surface portalled past it
+ * resolves every `var()` to nothing and renders with no background, no radius
+ * and no shadow — which is what every floating surface in this library was
+ * doing. Falling back to the body keeps a Layer working with no provider above
+ * it, which is how the primitive is used on its own.
+ */
+export declare function Layer({ children, container }: LayerProps): import("react").ReactPortal | null;

package/dist/{components/Alert.doc.d.ts → Layer/Layer.doc.d.ts}

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

package/dist/Layer/Layer.doc.js

@@ -0,0 +1,15 @@
+import "../styles/stylex.css";
+export const layerDoc = {
+  name: 'Layer',
+  description: 'Portals a floating surface out of the current stacking context.',
+  props: [{
+    name: 'children',
+    description: 'Supplies the portalled content.'
+  }, {
+    name: 'container',
+    description: 'Selects the portal target; defaults to the document body.'
+  }],
+  inheritedProps: ['None; Layer renders no element of its own'],
+  example: '<Layer><div role="dialog">...</div></Layer>',
+  storyId: 'core-layer--default'
+};

package/dist/Layer/Layer.js

@@ -0,0 +1,32 @@
+import { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useOptionalTheme } from '../theme/Theme.js';
+
+/** Props for the portal boundary shared by every floating surface. */
+import "../styles/stylex.css";
+/**
+ * Renders its children outside the current DOM position so a floating surface
+ * escapes ancestor overflow and stacking contexts. Nothing is portalled during
+ * the server render, so hydration matches the markup React sent.
+ *
+ * The default target is the theme root, not `document.body`. A theme writes its
+ * custom properties onto its own element, so a surface portalled past it
+ * resolves every `var()` to nothing and renders with no background, no radius
+ * and no shadow — which is what every floating surface in this library was
+ * doing. Falling back to the body keeps a Layer working with no provider above
+ * it, which is how the primitive is used on its own.
+ */
+export function Layer({
+  children,
+  container
+}) {
+  const [mounted, setMounted] = useState(false);
+  const theme = useOptionalTheme();
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  if (!mounted) {
+    return null;
+  }
+  return createPortal(children, container ?? theme?.root ?? document.body);
+}

package/dist/Layer/index.d.ts

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

package/dist/Layer/index.js

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

package/dist/Layout/Layout.d.ts

@@ -0,0 +1,26 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+/** Props for the page frame that positions banner, rails, and content. */
+export interface LayoutProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'className'> {
+    readonly aside?: ReactNode;
+    readonly children: ReactNode;
+    readonly contentPadding?: boolean;
+    readonly footer?: ReactNode;
+    readonly header?: ReactNode;
+    readonly mainId?: string;
+    readonly pageHead?: ReactNode;
+    readonly pageIndex?: ReactNode;
+    readonly sidebar?: ReactNode;
+}
+/**
+ * Positions the page regions. `children` is emitted as `main`, so a skip link
+ * has a landmark to reach and every page has exactly one main region.
+ *
+ * Set `contentPadding={false}` when the page supplies its own container; two
+ * layers of padding otherwise fight over the gutter. `mainId` lands on the
+ * `main` element itself, which is what a skip link must target — put it on
+ * the frame and the reader is dropped before the banner again.
+ *
+ * `pageHead` opens the main region with a chapter head rather than a flat
+ * stacked title, and `pageIndex` hangs a numeral in the margin beside it.
+ */
+export declare function Layout({ aside, children, contentPadding, footer, header, mainId, pageHead, pageIndex, sidebar, ...props }: LayoutProps): import("react").JSX.Element;

package/dist/Layout/Layout.doc.d.ts

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

package/dist/Layout/Layout.doc.js

@@ -0,0 +1,36 @@
+import "../styles/stylex.css";
+export const layoutDoc = {
+  name: 'Layout',
+  description: 'Positions banner, rails, main content, and footer.',
+  props: [{
+    name: 'aside',
+    description: 'Places a secondary rail after the content.'
+  }, {
+    name: 'children',
+    description: 'Supplies the main region content.'
+  }, {
+    name: 'contentPadding',
+    description: 'Drops the main region gutter when the page supplies its own.'
+  }, {
+    name: 'footer',
+    description: 'Places content below the body.'
+  }, {
+    name: 'header',
+    description: 'Places the banner above the body.'
+  }, {
+    name: 'mainId',
+    description: 'Sets the id of the main element itself.'
+  }, {
+    name: 'pageHead',
+    description: 'Opens the main region with a chapter head.'
+  }, {
+    name: 'pageIndex',
+    description: 'Hangs a numeral in the margin beside the page head.'
+  }, {
+    name: 'sidebar',
+    description: 'Places a primary rail before the content.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLDivElement> except children and className'],
+  example: '<Layout header={<TopNav />} sidebar={<SideNav>…</SideNav>}>…</Layout>',
+  storyId: 'core-layout--default'
+};

package/dist/Layout/Layout.js

@@ -0,0 +1,108 @@
+import * as stylex from '@stylexjs/stylex';
+import { semanticTokens } from '../authoring.stylex.js';
+
+// The margin the page head hangs its numeral into. The scale has no name for
+// it, so it is built from the scale: one full step plus the row step, which
+// lands on the console's 2.4rem gutter at either density.
+import "../styles/stylex.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const marginColumn = `calc(${semanticTokens.spacing2xl} + ${semanticTokens.spacingMd})`;
+
+// Hanging means the numeral goes into the margin and the title keeps the text
+// edge. The pull is exactly the page's own side margin — the same token
+// `content` spends on `paddingInline` — so the numeral comes to rest on the
+// paper's edge and never overhangs it. Change the margin and the hang follows.
+const hangColumn = `calc(${semanticTokens.spacing2xl} - ${semanticTokens.spacingSm})`;
+/** Props for the page frame that positions banner, rails, and content. */
+
+/**
+ * Positions the page regions. `children` is emitted as `main`, so a skip link
+ * has a landmark to reach and every page has exactly one main region.
+ *
+ * Set `contentPadding={false}` when the page supplies its own container; two
+ * layers of padding otherwise fight over the gutter. `mainId` lands on the
+ * `main` element itself, which is what a skip link must target — put it on
+ * the frame and the reader is dropped before the banner again.
+ *
+ * `pageHead` opens the main region with a chapter head rather than a flat
+ * stacked title, and `pageIndex` hangs a numeral in the margin beside it.
+ */
+export function Layout({
+  aside,
+  children,
+  contentPadding = true,
+  footer,
+  header,
+  mainId,
+  pageHead,
+  pageIndex,
+  sidebar,
+  ...props
+}) {
+  return /*#__PURE__*/_jsxs("div", {
+    ...props,
+    ...{
+      className: "x1r2uulk x1y4yzzg x78zum5 xdt5ytf xj0sio9 x1us19tq"
+    },
+    children: [header, /*#__PURE__*/_jsxs("div", {
+      ...{
+        className: "x78zum5 x1iyjqo2 x2lwn1j"
+      },
+      children: [sidebar === undefined ? null : /*#__PURE__*/_jsx("div", {
+        ...{
+          className: "x2lah0s"
+        },
+        children: sidebar
+      }), /*#__PURE__*/_jsxs("main", {
+        ...(mainId === undefined ? {} : {
+          id: mainId
+        }),
+        ...{
+          0: {
+            className: "x78zum5 xdt5ytf x1iyjqo2 xeuugli x18wayz0 x1o5p95n x7p5yew"
+          },
+          1: {
+            className: "x78zum5 xdt5ytf x1iyjqo2 xeuugli xt970qd xnjsko4 xxs79tx"
+          }
+        }[!!!contentPadding << 0],
+        children: [pageHead === undefined ? null : /*#__PURE__*/_jsxs("header", {
+          ...{
+            0: {
+              className: "x1pha0wt x2w1tkd xrvj5dj x1mkdm3x"
+            },
+            2: {
+              className: "x1pha0wt x2w1tkd xrvj5dj x12n9jny x9k6v4u"
+            },
+            1: {
+              className: "x1pha0wt x2w1tkd xrvj5dj x19s3puw x1lziwak"
+            },
+            3: {
+              className: "x1pha0wt x2w1tkd xrvj5dj x19s3puw x1lziwak"
+            }
+          }[!!(pageIndex !== undefined) << 1 | !!(pageIndex !== undefined && !contentPadding) << 0],
+          children: [pageIndex === undefined ? null : /*#__PURE__*/_jsx("p", {
+            ...{
+              className: "x1mgtvnk x13fdfvb x1fkw5ar xss6m8b xmkh2y5 x1vslzj6 x10im51j xrxpjvj xp4054r"
+            },
+            children: pageIndex
+          }), /*#__PURE__*/_jsx("div", {
+            ...{
+              className: "x1rzuj2w x1w5tod1 xeq6m5c x78zum5 xdt5ytf xeuugli xdf4gn3 xfhy3zi"
+            },
+            children: pageHead
+          })]
+        }), children]
+      }), aside === undefined ? null : /*#__PURE__*/_jsx("div", {
+        ...{
+          className: "xm8cy6x xb2q83l x1rclw80 x2lah0s x17uk85o x1wkw8jr"
+        },
+        children: aside
+      })]
+    }), footer === undefined ? null : /*#__PURE__*/_jsx("footer", {
+      ...{
+        className: "x1uie7tv x4tqos1 xlyo07a x1lr58ck x1q83fih"
+      },
+      children: footer
+    })]
+  });
+}

package/dist/Layout/index.d.ts

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

package/dist/Layout/index.js

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

package/dist/Lightbox/Lightbox.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode } from 'react';
+/** Props for a full-viewport media viewer. */
+export interface LightboxProps {
+    readonly children: ReactNode;
+    readonly closeLabel?: string;
+    readonly onDismiss: () => void;
+    readonly open: boolean;
+    readonly title: ReactNode;
+}
+/**
+ * Shows one piece of media at viewport scale. It is modal, so the page behind
+ * stops scrolling and focus stays on the media until it is dismissed.
+ */
+export declare function Lightbox({ children, closeLabel, onDismiss, open, title, }: LightboxProps): import("react").JSX.Element;

package/dist/Lightbox/Lightbox.doc.d.ts

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

package/dist/Lightbox/Lightbox.doc.js

@@ -0,0 +1,24 @@
+import "../styles/stylex.css";
+export const lightboxDoc = {
+  name: 'Lightbox',
+  description: 'Shows one piece of media at viewport scale.',
+  props: [{
+    name: 'children',
+    description: 'Supplies the media to show.'
+  }, {
+    name: 'closeLabel',
+    description: 'Names the dismiss control.'
+  }, {
+    name: 'onDismiss',
+    description: 'Runs on Escape, the scrim, or the control.'
+  }, {
+    name: 'open',
+    description: 'Controls whether the viewer renders.'
+  }, {
+    name: 'title',
+    description: 'Names the media for assistive technology.'
+  }],
+  inheritedProps: ['None; Lightbox owns its modal surface'],
+  example: '<Lightbox onDismiss={close} open={open} title="Cover">{image}</Lightbox>',
+  storyId: 'core-lightbox--default'
+};

package/dist/Lightbox/Lightbox.js

@@ -0,0 +1,80 @@
+import * as stylex from '@stylexjs/stylex';
+import { useId } 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 { Overlay } from '../Overlay/index.js';
+import "../styles/stylex.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const styles = {
+  media: {
+    kGNEyG: "x6s0dn4",
+    kWkggS: "xavu78a",
+    k1xSpc: "x78zum5",
+    kjj79g: "xl56j7k",
+    kAzted: "x2lwn1j",
+    kVQacm: "xysyzu8",
+    kmVPX3: "x1cfciu7",
+    $$css: true
+  }
+};
+
+/** Props for a full-viewport media viewer. */
+
+/**
+ * Shows one piece of media at viewport scale. It is modal, so the page behind
+ * stops scrolling and focus stays on the media until it is dismissed.
+ */
+export function Lightbox({
+  children,
+  closeLabel,
+  onDismiss,
+  open,
+  title
+}) {
+  const {
+    messages
+  } = useInternationalization();
+  const titleId = useId();
+  return /*#__PURE__*/_jsx(Overlay, {
+    onDismiss: onDismiss,
+    open: open,
+    children: /*#__PURE__*/_jsxs("div", {
+      "aria-labelledby": titleId,
+      "aria-modal": "true",
+      role: "dialog",
+      ...{
+        className: "x40o0ze x7xrhi9 x1ia5mbg x1y4yzzg x78zum5 xdt5ytf xj0sio9 xmz0i5r xb3r6kr"
+      },
+      children: [/*#__PURE__*/_jsxs("div", {
+        ...{
+          className: "x6s0dn4 x1k3hjl9 x1w5tod1 xeq6m5c x78zum5 xtl099x x1qughib xoeao9w x1q83fih"
+        },
+        children: [/*#__PURE__*/_jsx("p", {
+          id: titleId,
+          ...{
+            className: "x17y7oyd x69it5h xnlz8j1 x1di4hct x1vslzj6 x1ghz6dp xtvhhri"
+          },
+          children: title
+        }), /*#__PURE__*/_jsx(IconButton, {
+          "aria-label": closeLabel ?? messages.close,
+          onClick: onDismiss,
+          variant: "ghost",
+          children: /*#__PURE__*/_jsx(Icon, {
+            children: /*#__PURE__*/_jsx("path", {
+              d: "m6 6 12 12M18 6 6 18",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2"
+            })
+          })
+        })]
+      }), /*#__PURE__*/_jsx("div", {
+        ...stylex.props(styles.media, scrolling.region),
+        children: children
+      })]
+    })
+  });
+}

package/dist/Lightbox/index.d.ts

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

package/dist/Lightbox/index.js

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

package/dist/List/List.d.ts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes, LiHTMLAttributes, OlHTMLAttributes } from 'react';
+import type { Space } from '../Stack/index.js';
+/** Marker treatments a list can apply to its items. */
+export type ListVariant = 'unordered' | 'ordered' | 'plain';
+/** Props for a vertical collection of related items. */
+export interface ListProps extends Omit<OlHTMLAttributes<HTMLOListElement> & HTMLAttributes<HTMLUListElement>, 'className' | 'type'> {
+    readonly gap?: Space;
+    readonly variant?: ListVariant;
+}
+/**
+ * Renders a semantic list. `ordered` emits `ol` so reading order carries
+ * meaning; the other variants emit `ul`.
+ */
+export declare function List({ children, gap, variant, ...props }: ListProps): import("react").JSX.Element;
+/** Props for a single entry inside a `List`. */
+export type ListItemProps = Omit<LiHTMLAttributes<HTMLLIElement>, 'className'>;
+/** Renders one list entry without overriding the parent marker treatment. */
+export declare function ListItem({ children, ...props }: ListItemProps): import("react").JSX.Element;

package/dist/List/List.doc.d.ts

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

package/dist/List/List.doc.js

@@ -0,0 +1,26 @@
+import "../styles/stylex.css";
+export const listDoc = {
+  name: 'List',
+  description: 'Groups related items with semantic list markup.',
+  props: [{
+    name: 'gap',
+    description: 'Selects the space between items.'
+  }, {
+    name: 'variant',
+    description: 'Selects the marker treatment and the underlying element.'
+  }],
+  inheritedProps: ['OlHTMLAttributes<HTMLOListElement> and HTMLAttributes<HTMLUListElement> except className and type'],
+  example: '<List><ListItem>Draft</ListItem></List>',
+  storyId: 'core-list--default'
+};
+export const listItemDoc = {
+  name: 'ListItem',
+  description: 'Renders one entry inside a List.',
+  props: [{
+    name: 'children',
+    description: 'Supplies the entry content.'
+  }],
+  inheritedProps: ['LiHTMLAttributes<HTMLLIElement> except className'],
+  example: '<ListItem>Ready to review</ListItem>',
+  storyId: 'core-list--default'
+};

package/dist/List/List.js

@@ -0,0 +1,113 @@
+import * as stylex from '@stylexjs/stylex';
+import { semanticTokens } from '../authoring.stylex.js';
+import "../styles/stylex.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const styles = {
+  base: {
+    kMwMTN: "x1y4yzzg",
+    k1xSpc: "x78zum5",
+    kXwgrk: "xdt5ytf",
+    kMv6JI: "xj0sio9",
+    kGuDYH: "x1ti3rys",
+    kb6lSQ: "xgz4m7n",
+    kLWn49: "x1ezks3f",
+    kqGvvJ: "x10im51j",
+    $$css: true
+  },
+  marked: {
+    kZCmMZ: "x1cywkco",
+    $$css: true
+  },
+  plain: {
+    kH6xsr: "x3ct3a4",
+    kZCmMZ: "x1c1uobl",
+    $$css: true
+  },
+  unordered: {
+    kH6xsr: "xtaz4m5",
+    $$css: true
+  },
+  ordered: {
+    kH6xsr: "x3yw8vx",
+    $$css: true
+  },
+  gapXs: {
+    kOIVth: "x1iwn5ga",
+    $$css: true
+  },
+  gapSm: {
+    kOIVth: "x1ap6kct",
+    $$css: true
+  },
+  gapMd: {
+    kOIVth: "xtl099x",
+    $$css: true
+  },
+  gapLg: {
+    kOIVth: "x4nws80",
+    $$css: true
+  },
+  gapXl: {
+    kOIVth: "x1ws3dqe",
+    $$css: true
+  },
+  gap2xl: {
+    kOIVth: "xl3vxp",
+    $$css: true
+  },
+  item: {
+    kqGvvJ: "x10im51j",
+    $$css: true
+  }
+};
+const gaps = {
+  xs: styles.gapXs,
+  sm: styles.gapSm,
+  md: styles.gapMd,
+  lg: styles.gapLg,
+  xl: styles.gapXl,
+  '2xl': styles.gap2xl
+};
+
+/** Marker treatments a list can apply to its items. */
+
+/** Props for a vertical collection of related items. */
+
+/**
+ * Renders a semantic list. `ordered` emits `ol` so reading order carries
+ * meaning; the other variants emit `ul`.
+ */
+export function List({
+  children,
+  gap = 'sm',
+  variant = 'unordered',
+  ...props
+}) {
+  const listProps = {
+    ...props,
+    ...stylex.props(styles.base, gaps[gap], variant === 'plain' ? styles.plain : styles.marked, variant !== 'plain' && styles[variant])
+  };
+  return variant === 'ordered' ? /*#__PURE__*/_jsx("ol", {
+    ...listProps,
+    children: children
+  }) : /*#__PURE__*/_jsx("ul", {
+    ...listProps,
+    children: children
+  });
+}
+
+/** Props for a single entry inside a `List`. */
+
+/** Renders one list entry without overriding the parent marker treatment. */
+export function ListItem({
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx("li", {
+    ...props,
+    ...{
+      className: "x10im51j"
+    },
+    children: children
+  });
+}

package/dist/List/index.d.ts

@@ -0,0 +1 @@
+export { List, ListItem, type ListItemProps, type ListProps, type ListVariant, } from './List.js';

package/dist/List/index.js

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

package/dist/Markdown/Markdown.d.ts

@@ -0,0 +1,11 @@
+import { type HTMLAttributes } from 'react';
+/** Props for rendering a restricted Markdown subset. */
+export interface MarkdownProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'className' | 'dangerouslySetInnerHTML'> {
+    readonly source: string;
+}
+/**
+ * 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 declare function Markdown({ source, ...props }: MarkdownProps): import("react").JSX.Element;