@misoto22/kioku-ui 0.0.0 → 0.2.0

package/dist/Alert/Alert.js

@@ -11,6 +11,7 @@ const styles = {
     k1xSpc: "x78zum5",
     kMv6JI: "xj0sio9",
     kGuDYH: "x1ti3rys",
+    kb6lSQ: "xgz4m7n",
     kOIVth: "xtl099x",
     kLWn49: "x1ezks3f",
     kmVPX3: "x14rluyd",

package/dist/AlertDialog/AlertDialog.d.ts

@@ -0,0 +1,8 @@
+import { type DialogProps } from '../Dialog/index.js';
+/** Props for a decision the reader must resolve before continuing. */
+export type AlertDialogProps = Omit<DialogProps, 'dismissOnOutsideClick'>;
+/**
+ * Asks for a decision that cannot be deferred. Unlike Dialog, a click on the
+ * scrim does not dismiss it — the reader must choose one of the actions.
+ */
+export declare function AlertDialog(props: AlertDialogProps): import("react").JSX.Element;

package/dist/AlertDialog/AlertDialog.doc.d.ts

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

package/dist/AlertDialog/AlertDialog.doc.js

@@ -0,0 +1,30 @@
+import "../styles/stylex.css";
+export const alertDialogDoc = {
+  name: 'AlertDialog',
+  description: 'Asks for a decision that cannot be dismissed by the scrim.',
+  props: [{
+    name: 'children',
+    description: 'Supplies the dialog body.'
+  }, {
+    name: 'description',
+    description: 'Adds a described-by summary line.'
+  }, {
+    name: 'footer',
+    description: 'Places the decision actions.'
+  }, {
+    name: 'onDismiss',
+    description: 'Runs on Escape.'
+  }, {
+    name: 'open',
+    description: 'Controls whether the dialog renders.'
+  }, {
+    name: 'size',
+    description: 'Selects the maximum surface width.'
+  }, {
+    name: 'title',
+    description: 'Names the decision for assistive technology.'
+  }],
+  inheritedProps: ['DialogProps except dismissOnOutsideClick'],
+  example: '<AlertDialog onDismiss={cancel} open={open} title="Discard draft?">...</AlertDialog>',
+  storyId: 'core-alert-dialog--default'
+};

package/dist/AlertDialog/AlertDialog.js

@@ -0,0 +1,16 @@
+import { DialogSurface } from '../Dialog/index.js';
+
+/** Props for a decision the reader must resolve before continuing. */
+import "../styles/stylex.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Asks for a decision that cannot be deferred. Unlike Dialog, a click on the
+ * scrim does not dismiss it — the reader must choose one of the actions.
+ */
+export function AlertDialog(props) {
+  return /*#__PURE__*/_jsx(DialogSurface, {
+    ...props,
+    dismissOnOutsideClick: false,
+    role: "alertdialog"
+  });
+}

package/dist/AlertDialog/index.d.ts

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

package/dist/AlertDialog/index.js

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

package/dist/AppShell/AppShell.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from 'react';
+/** Props for the application frame. */
+export interface AppShellProps {
+    readonly aside?: ReactNode;
+    readonly children: ReactNode;
+    readonly contentPadding?: boolean;
+    readonly footer?: ReactNode;
+    readonly header?: ReactNode;
+    readonly pageHead?: ReactNode;
+    readonly pageIndex?: ReactNode;
+    readonly sidebar?: ReactNode;
+    readonly skipLinkLabel?: string;
+}
+/**
+ * Wraps `Layout` with the one thing every application needs and most forget:
+ * a skip link that jumps a keyboard reader past the banner and rails straight
+ * into the main region.
+ */
+export declare function AppShell({ aside, children, contentPadding, footer, header, pageHead, pageIndex, sidebar, skipLinkLabel, }: AppShellProps): import("react").JSX.Element;

package/dist/AppShell/AppShell.doc.d.ts

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

package/dist/AppShell/AppShell.doc.js

@@ -0,0 +1,36 @@
+import "../styles/stylex.css";
+export const appShellDoc = {
+  name: 'AppShell',
+  description: 'Wraps Layout with a skip link into the main region.',
+  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: '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.'
+  }, {
+    name: 'skipLinkLabel',
+    description: 'Names the skip link.'
+  }],
+  inheritedProps: ['None; AppShell composes Layout and owns its skip link'],
+  example: '<AppShell header={<TopNav />}>{page}</AppShell>',
+  storyId: 'core-app-shell--default'
+};

package/dist/AppShell/AppShell.js

@@ -0,0 +1,61 @@
+import * as stylex from '@stylexjs/stylex';
+import { useId } from 'react';
+import { semanticTokens } from '../authoring.stylex.js';
+import { useInternationalization } from '../i18n/index.js';
+import { Layout } from '../Layout/index.js';
+import "../styles/stylex.css";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/** Props for the application frame. */
+
+/**
+ * Wraps `Layout` with the one thing every application needs and most forget:
+ * a skip link that jumps a keyboard reader past the banner and rails straight
+ * into the main region.
+ */
+export function AppShell({
+  aside,
+  children,
+  contentPadding = true,
+  footer,
+  header,
+  pageHead,
+  pageIndex,
+  sidebar,
+  skipLinkLabel
+}) {
+  const {
+    messages
+  } = useInternationalization();
+  const mainId = useId();
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("a", {
+      href: `#${mainId}`,
+      ...{
+        className: "x40o0ze x8kq9my xng3xce x165nt33 x1y4yzzg xj0sio9 xltg2ad x1m30uz7 xggiaam xq65ppb xq5azjn x10y07nz x1qtbwip xixxii4 xkrqix3 x1bee3ir xv6reb9 x11xpdln x5zt00s x1vjfegm x15meki4 xz32tfx x1p22nma x17lds6u x1ikmuen"
+      },
+      children: skipLinkLabel ?? messages.skipToContent
+    }), /*#__PURE__*/_jsx(Layout, {
+      ...(aside === undefined ? {} : {
+        aside
+      }),
+      contentPadding: contentPadding,
+      ...(footer === undefined ? {} : {
+        footer
+      }),
+      ...(header === undefined ? {} : {
+        header
+      }),
+      mainId: mainId,
+      ...(pageHead === undefined ? {} : {
+        pageHead
+      }),
+      ...(pageIndex === undefined ? {} : {
+        pageIndex
+      }),
+      ...(sidebar === undefined ? {} : {
+        sidebar
+      }),
+      children: children
+    })]
+  });
+}

package/dist/AppShell/index.d.ts

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

package/dist/AppShell/index.js

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

package/dist/AspectRatio/AspectRatio.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+/** Props for a box that holds a fixed width-to-height ratio. */
+export interface AspectRatioProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'className' | 'style'> {
+    readonly children: ReactNode;
+    readonly ratio?: number;
+}
+/**
+ * Reserves space at a fixed ratio before its content loads, so a page does
+ * not jump once an image or embed arrives.
+ */
+export declare function AspectRatio({ children, ratio, ...props }: AspectRatioProps): import("react").JSX.Element;

package/dist/AspectRatio/AspectRatio.doc.d.ts

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

package/dist/AspectRatio/AspectRatio.doc.js

@@ -0,0 +1,15 @@
+import "../styles/stylex.css";
+export const aspectRatioDoc = {
+  name: 'AspectRatio',
+  description: 'Reserves space at a fixed width-to-height ratio.',
+  props: [{
+    name: 'children',
+    description: 'Supplies the content to frame.'
+  }, {
+    name: 'ratio',
+    description: 'Sets the width divided by the height.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLDivElement> except children, className, and style'],
+  example: '<AspectRatio ratio={4 / 3}><img alt="" src={src} /></AspectRatio>',
+  storyId: 'core-aspect-ratio--default'
+};

package/dist/AspectRatio/AspectRatio.js

@@ -0,0 +1,30 @@
+import * as stylex from '@stylexjs/stylex';
+import "../styles/stylex.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Props for a box that holds a fixed width-to-height ratio. */
+
+/**
+ * Reserves space at a fixed ratio before its content loads, so a page does
+ * not jump once an image or embed arrives.
+ */
+export function AspectRatio({
+  children,
+  ratio = 16 / 9,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx("div", {
+    ...props,
+    ...{
+      className: "x1lliihq xb3r6kr x1n2onr6 xh8yej3"
+    },
+    style: {
+      aspectRatio: String(ratio)
+    },
+    children: /*#__PURE__*/_jsx("div", {
+      ...{
+        className: "x5yr21d x13vifvy x1o0tod xh8yej3 x10l6tqk"
+      },
+      children: children
+    })
+  });
+}

package/dist/AspectRatio/index.d.ts

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

package/dist/AspectRatio/index.js

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

package/dist/AsyncState/AsyncState.js

@@ -1,4 +1,6 @@
+import * as stylex from '@stylexjs/stylex';
 import { Alert } from '../Alert/index.js';
+import { semanticTokens } from '../authoring.stylex.js';
 import { EmptyStateContent } from '../EmptyState/index.js';
 import { SpinnerVisual } from '../Spinner/index.js';
 import "../styles/stylex.css";
@@ -11,7 +13,18 @@ export function AsyncState({
     throw new Error('AsyncState requires a renderer for ready data');
   }
   const loadingLabel = state.kind === 'loading' ? state.label ?? 'Loading' : undefined;
-  const statusContent = state.kind === 'loading' ? /*#__PURE__*/_jsx(SpinnerVisual, {}) : state.kind === 'empty' ? /*#__PURE__*/_jsx(EmptyStateContent, {
+  const statusContent = state.kind === 'loading' ? /*#__PURE__*/_jsxs("div", {
+    ...{
+      className: "x6s0dn4 x1ixvsy6 x7xrhi9 x165nt33 x1y4yzzg x78zum5 xdt5ytf xj0sio9 x1ap6kct x1inwjb7 x1imav47 x1o5p95n x2b8uid"
+    },
+    children: [/*#__PURE__*/_jsx(SpinnerVisual, {}), state.label === undefined ? null : /*#__PURE__*/_jsx("span", {
+      "aria-hidden": "true",
+      ...{
+        className: "x17y7oyd xj0sio9 xltg2ad xgz4m7n x1ezks3f"
+      },
+      children: state.label
+    })]
+  }) : state.kind === 'empty' ? /*#__PURE__*/_jsx(EmptyStateContent, {
     action: state.action,
     detail: state.detail,
     title: state.title

package/dist/Avatar/Avatar.d.ts

@@ -0,0 +1,14 @@
+import { type HTMLAttributes } from 'react';
+/** Sizes an avatar can occupy, aligned to the control scale. */
+export type AvatarSize = 'sm' | 'md' | 'lg';
+/** Props for a person or entity's likeness. */
+export interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'className'> {
+    readonly name: string;
+    readonly size?: AvatarSize;
+    readonly src?: string;
+}
+/**
+ * Shows one person or entity. The name is the accessible label whether an
+ * image loads or not, so a broken image never leaves an unnamed circle.
+ */
+export declare function Avatar({ name, size, src, ...props }: AvatarProps): import("react").JSX.Element;

package/dist/{components/Button.doc.d.ts → Avatar/Avatar.doc.d.ts}

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

package/dist/Avatar/Avatar.doc.js

@@ -0,0 +1,18 @@
+import "../styles/stylex.css";
+export const avatarDoc = {
+  name: 'Avatar',
+  description: 'Shows one person or entity, falling back to initials.',
+  props: [{
+    name: 'name',
+    description: 'Names the person and supplies the initials.'
+  }, {
+    name: 'size',
+    description: 'Selects the square size.'
+  }, {
+    name: 'src',
+    description: 'Points at the likeness to show.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLSpanElement> except children and className'],
+  example: '<Avatar name="Ada Lovelace" src="/ada.jpg" />',
+  storyId: 'core-avatar--default'
+};

package/dist/Avatar/Avatar.js

@@ -0,0 +1,98 @@
+import * as stylex from '@stylexjs/stylex';
+import { useState } from 'react';
+import { semanticTokens } from '../authoring.stylex.js';
+import "../styles/stylex.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const styles = {
+  avatar: {
+    kGNEyG: "x6s0dn4",
+    kWkggS: "xavu78a",
+    kaIpWk: "xnpwncj",
+    kMwMTN: "x17y7oyd",
+    k1xSpc: "x3nfvp2",
+    kmuXW: "x2lah0s",
+    kMv6JI: "xj0sio9",
+    k63SB2: "x1m30uz7",
+    kjj79g: "xl56j7k",
+    kLWn49: "xo5v014",
+    kVQacm: "xb3r6kr",
+    kfSwDN: "x87ps6o",
+    $$css: true
+  },
+  sm: {
+    kGuDYH: "xnlz8j1",
+    kZKoxP: "x1vbl8lt",
+    kb6lSQ: "x1di4hct",
+    kzqmXN: "x9mi25i",
+    $$css: true
+  },
+  md: {
+    kGuDYH: "xltg2ad",
+    kZKoxP: "xr8hsnb",
+    kb6lSQ: "xq5azjn",
+    kzqmXN: "x4ml2zf",
+    $$css: true
+  },
+  lg: {
+    kGuDYH: "x1ti3rys",
+    kZKoxP: "xscltuj",
+    kb6lSQ: "xgz4m7n",
+    kzqmXN: "x1089um4",
+    $$css: true
+  },
+  image: {
+    k1xSpc: "x1lliihq",
+    kZKoxP: "x5yr21d",
+    kVIFPx: "xl1xv1r",
+    kzqmXN: "xh8yej3",
+    $$css: true
+  }
+};
+
+/** Sizes an avatar can occupy, aligned to the control scale. */
+
+/** Props for a person or entity's likeness. */
+
+// Initials fall back to the first letters of the first and last word.
+function initials(name) {
+  const words = name.trim().split(/\s+/u).filter(Boolean);
+  if (words.length === 0) {
+    return '';
+  }
+  const first = words[0]?.[0] ?? '';
+  const last = words.length > 1 ? words[words.length - 1]?.[0] ?? '' : '';
+  return (first + last).toUpperCase();
+}
+
+/**
+ * Shows one person or entity. The name is the accessible label whether an
+ * image loads or not, so a broken image never leaves an unnamed circle.
+ */
+export function Avatar({
+  name,
+  size = 'md',
+  src,
+  ...props
+}) {
+  const [failed, setFailed] = useState(false);
+  const showImage = src !== undefined && !failed;
+  return /*#__PURE__*/_jsx("span", {
+    ...props,
+    "aria-label": name,
+    role: "img",
+    ...stylex.props(styles.avatar, styles[size]),
+    children: showImage ? /*#__PURE__*/_jsx("img", {
+      alt: "",
+      onError: () => {
+        setFailed(true);
+      },
+      src: src,
+      ...{
+        className: "x1lliihq x5yr21d xl1xv1r xh8yej3"
+      }
+    }) : /*#__PURE__*/_jsx("span", {
+      "aria-hidden": "true",
+      children: initials(name)
+    })
+  });
+}

package/dist/Avatar/index.d.ts

@@ -0,0 +1 @@
+export { Avatar, type AvatarProps, type AvatarSize } from './Avatar.js';

package/dist/Avatar/index.js

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

package/dist/AvatarGroup/AvatarGroup.d.ts

@@ -0,0 +1,20 @@
+import type { HTMLAttributes } from 'react';
+import { type AvatarSize } from '../Avatar/index.js';
+/** One member of an avatar group. */
+export interface AvatarGroupMember {
+    readonly name: string;
+    readonly src?: string;
+}
+/** Props for a capped, overlapping row of avatars. */
+export interface AvatarGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'className'> {
+    readonly label: string;
+    readonly max?: number;
+    readonly members: readonly AvatarGroupMember[];
+    readonly size?: AvatarSize;
+}
+/**
+ * Shows several people as one overlapping row. Everyone past `max` is counted
+ * rather than drawn, and the group carries a single label so a screen reader
+ * hears "4 reviewers" instead of four separate images.
+ */
+export declare function AvatarGroup({ label, max, members, size, ...props }: AvatarGroupProps): import("react").JSX.Element;

package/dist/AvatarGroup/AvatarGroup.doc.d.ts

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

package/dist/AvatarGroup/AvatarGroup.doc.js

@@ -0,0 +1,21 @@
+import "../styles/stylex.css";
+export const avatarGroupDoc = {
+  name: 'AvatarGroup',
+  description: 'Shows several people as one capped, overlapping row.',
+  props: [{
+    name: 'label',
+    description: 'Names what the group of people represents.'
+  }, {
+    name: 'max',
+    description: 'Caps how many avatars are drawn.'
+  }, {
+    name: 'members',
+    description: 'Supplies the people in reading order.'
+  }, {
+    name: 'size',
+    description: 'Selects the size of every avatar.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLDivElement> except children and className'],
+  example: '<AvatarGroup label="Reviewers" members={reviewers} />',
+  storyId: 'core-avatar-group--default'
+};

package/dist/AvatarGroup/AvatarGroup.js

@@ -0,0 +1,99 @@
+import * as stylex from '@stylexjs/stylex';
+import { semanticTokens } from '../authoring.stylex.js';
+import { Avatar } from '../Avatar/index.js';
+import "../styles/stylex.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const styles = {
+  overflow: {
+    kGNEyG: "x6s0dn4",
+    kWkggS: "xavu78a",
+    kaIpWk: "xnpwncj",
+    kMwMTN: "x17y7oyd",
+    k1xSpc: "x3nfvp2",
+    kmuXW: "x2lah0s",
+    kMv6JI: "x7ohnf4",
+    kcqcaj: "xss6m8b",
+    k63SB2: "x1m30uz7",
+    kjj79g: "xl56j7k",
+    kb6lSQ: "x1kbjp2h",
+    kLWn49: "xo5v014",
+    $$css: true
+  },
+  overflowSm: {
+    kGuDYH: "xnlz8j1",
+    kZKoxP: "x1vbl8lt",
+    kzqmXN: "x9mi25i",
+    $$css: true
+  },
+  overflowMd: {
+    kGuDYH: "xltg2ad",
+    kZKoxP: "xr8hsnb",
+    kzqmXN: "x4ml2zf",
+    $$css: true
+  },
+  overflowLg: {
+    kGuDYH: "x1ti3rys",
+    kZKoxP: "xscltuj",
+    kzqmXN: "x1089um4",
+    $$css: true
+  }
+};
+const overflowSizes = {
+  sm: styles.overflowSm,
+  md: styles.overflowMd,
+  lg: styles.overflowLg
+};
+
+/** One member of an avatar group. */
+
+/** Props for a capped, overlapping row of avatars. */
+
+/**
+ * Shows several people as one overlapping row. Everyone past `max` is counted
+ * rather than drawn, and the group carries a single label so a screen reader
+ * hears "4 reviewers" instead of four separate images.
+ */
+export function AvatarGroup({
+  label,
+  max = 4,
+  members,
+  size = 'md',
+  ...props
+}) {
+  const shown = members.slice(0, max);
+  const hidden = members.length - shown.length;
+  return /*#__PURE__*/_jsxs("div", {
+    ...props,
+    "aria-label": `${label}: ${members.length}`,
+    role: "group",
+    ...{
+      className: "x6s0dn4 x3nfvp2 xj0sio9"
+    },
+    children: [shown.map((member, index) => /*#__PURE__*/_jsx("span", {
+      ...{
+        0: {
+          className: "xuvkn9 xnpwncj x1jnjmdy xxvk4v5 x3nfvp2 xdq70t9"
+        },
+        1: {
+          className: "xuvkn9 xnpwncj x1jnjmdy xxvk4v5 x3nfvp2 x1lziwak"
+        }
+      }[!!(index === 0) << 0],
+      children: /*#__PURE__*/_jsx(Avatar, {
+        name: member.name,
+        size: size,
+        ...(member.src === undefined ? {} : {
+          src: member.src
+        })
+      })
+    }, member.name)), hidden > 0 ? /*#__PURE__*/_jsx("span", {
+      ...{
+        className: "xuvkn9 xnpwncj x1jnjmdy xxvk4v5 x3nfvp2 xdq70t9"
+      },
+      children: /*#__PURE__*/_jsxs("span", {
+        "aria-hidden": "true",
+        ...stylex.props(styles.overflow, overflowSizes[size]),
+        children: ["+", hidden]
+      })
+    }) : null]
+  });
+}

package/dist/AvatarGroup/index.d.ts

@@ -0,0 +1 @@
+export { AvatarGroup, type AvatarGroupMember, type AvatarGroupProps, } from './AvatarGroup.js';

package/dist/AvatarGroup/index.js

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

package/dist/Badge/Badge.js

@@ -11,6 +11,7 @@ const styles = {
     k1xSpc: "x3nfvp2",
     kMv6JI: "xj0sio9",
     kGuDYH: "xnlz8j1",
+    kb6lSQ: "x1di4hct",
     k63SB2: "x1m30uz7",
     k8WAf4: "x10y07nz",
     kg3NbH: "x1qtbwip",