@misoto22/kioku-ui 0.0.0 → 0.2.0

package/dist/Banner/Banner.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { StatusTone } from '../Badge/index.js';
+/** Props for a page-width announcement. */
+export interface BannerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'className' | 'role'> {
+    readonly actions?: ReactNode;
+    readonly children: ReactNode;
+    readonly tone?: StatusTone;
+}
+/**
+ * Announces something about the whole page or account, spanning its full
+ * width. Use `Alert` for a message about one region and `Toast` for one that
+ * passes on its own.
+ */
+export declare function Banner({ actions, children, tone, ...props }: BannerProps): import("react").JSX.Element;

package/dist/Banner/Banner.doc.d.ts

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

package/dist/Banner/Banner.doc.js

@@ -0,0 +1,18 @@
+import "../styles/stylex.css";
+export const bannerDoc = {
+  name: 'Banner',
+  description: 'Announces something about the whole page or account.',
+  props: [{
+    name: 'actions',
+    description: 'Places a follow-up action at the end.'
+  }, {
+    name: 'children',
+    description: 'Supplies the announcement.'
+  }, {
+    name: 'tone',
+    description: 'Selects the semantic status colour.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLDivElement> except children, className, and role'],
+  example: '<Banner tone="warning">Billing details expire in three days.</Banner>',
+  storyId: 'core-banner--default'
+};

package/dist/Banner/Banner.js

@@ -0,0 +1,85 @@
+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 = {
+  banner: {
+    kGNEyG: "x6s0dn4",
+    kaIpWk: "x7xrhi9",
+    ksu8eU: "xng3xce",
+    k1xSpc: "x78zum5",
+    kMv6JI: "xj0sio9",
+    kGuDYH: "xltg2ad",
+    kOIVth: "xtl099x",
+    kb6lSQ: "xgz4m7n",
+    kLWn49: "x1ezks3f",
+    k8WAf4: "x1lr58ck",
+    kg3NbH: "x1q83fih",
+    $$css: true
+  },
+  info: {
+    kWkggS: "x1760qql",
+    kMwMTN: "x1ursi0k",
+    $$css: true
+  },
+  success: {
+    kWkggS: "xjdu3ya",
+    kMwMTN: "xw2tli",
+    $$css: true
+  },
+  warning: {
+    kWkggS: "xqpqlc7",
+    kMwMTN: "x6rqny5",
+    $$css: true
+  },
+  danger: {
+    kWkggS: "x12uiudv",
+    kMwMTN: "x8bm3zx",
+    $$css: true
+  },
+  message: {
+    kzQI83: "x1iyjqo2",
+    k7Eaqz: "xeuugli",
+    $$css: true
+  },
+  actions: {
+    kGNEyG: "x6s0dn4",
+    k1xSpc: "x78zum5",
+    kmuXW: "x2lah0s",
+    kOIVth: "x1ap6kct",
+    $$css: true
+  }
+};
+
+/** Props for a page-width announcement. */
+
+/**
+ * Announces something about the whole page or account, spanning its full
+ * width. Use `Alert` for a message about one region and `Toast` for one that
+ * passes on its own.
+ */
+export function Banner({
+  actions,
+  children,
+  tone = 'info',
+  ...props
+}) {
+  const isDanger = tone === 'danger';
+  return /*#__PURE__*/_jsxs("div", {
+    ...props,
+    "aria-live": isDanger ? 'assertive' : 'polite',
+    role: isDanger ? 'alert' : 'status',
+    ...stylex.props(styles.banner, styles[tone]),
+    children: [/*#__PURE__*/_jsx("div", {
+      ...{
+        className: "x1iyjqo2 xeuugli"
+      },
+      children: children
+    }), actions === undefined ? null : /*#__PURE__*/_jsx("div", {
+      ...{
+        className: "x6s0dn4 x78zum5 x2lah0s x1ap6kct"
+      },
+      children: actions
+    })]
+  });
+}

package/dist/Banner/index.d.ts

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

package/dist/Banner/index.js

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

package/dist/Blockquote/Blockquote.d.ts

@@ -0,0 +1,11 @@
+import type { BlockquoteHTMLAttributes, ReactNode } from 'react';
+/** Props for quoted text and its source. */
+export interface BlockquoteProps extends Omit<BlockquoteHTMLAttributes<HTMLQuoteElement>, 'children' | 'className'> {
+    readonly attribution?: ReactNode;
+    readonly children: ReactNode;
+}
+/**
+ * Sets off quoted text. The attribution is emitted inside the quote as a
+ * `footer`, which is where the HTML spec puts the source of a quotation.
+ */
+export declare function Blockquote({ attribution, children, ...props }: BlockquoteProps): import("react").JSX.Element;

package/dist/Blockquote/Blockquote.doc.d.ts

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

package/dist/Blockquote/Blockquote.doc.js

@@ -0,0 +1,15 @@
+import "../styles/stylex.css";
+export const blockquoteDoc = {
+  name: 'Blockquote',
+  description: 'Sets off quoted text and names its source.',
+  props: [{
+    name: 'attribution',
+    description: 'Names where the quotation came from.'
+  }, {
+    name: 'children',
+    description: 'Supplies the quoted text.'
+  }],
+  inheritedProps: ['BlockquoteHTMLAttributes<HTMLQuoteElement> except children and className'],
+  example: '<Blockquote attribution="Ada Lovelace">…</Blockquote>',
+  storyId: 'core-blockquote--default'
+};

package/dist/Blockquote/Blockquote.js

@@ -0,0 +1,28 @@
+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";
+/** Props for quoted text and its source. */
+
+/**
+ * Sets off quoted text. The attribution is emitted inside the quote as a
+ * `footer`, which is where the HTML spec puts the source of a quotation.
+ */
+export function Blockquote({
+  attribution,
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/_jsxs("blockquote", {
+    ...props,
+    ...{
+      className: "xm8cy6x xb2q83l xjwnu81 x1y4yzzg x78zum5 xdt5ytf xj0sio9 x1ti3rys x1ap6kct xgz4m7n x1ezks3f x1ghz6dp x32qhjx"
+    },
+    children: [children, attribution === undefined ? null : /*#__PURE__*/_jsx("footer", {
+      ...{
+        className: "x1mgtvnk xj0sio9 xltg2ad xq5azjn x1ezks3f"
+      },
+      children: attribution
+    })]
+  });
+}

package/dist/Blockquote/index.d.ts

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

package/dist/Blockquote/index.js

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

package/dist/BottomSheet/BottomSheet.d.ts

@@ -0,0 +1,13 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+/** Props for a modal panel that enters from the bottom edge. */
+export interface BottomSheetProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'className' | 'role' | 'title'> {
+    readonly children?: ReactNode;
+    readonly onDismiss?: () => void;
+    readonly open: boolean;
+    readonly title: ReactNode;
+}
+/**
+ * Presents a modal panel anchored to the bottom edge, where a thumb can reach
+ * it. It carries the same focus trap and scroll lock as Dialog.
+ */
+export declare function BottomSheet({ children, onDismiss, open, title, ...props }: BottomSheetProps): import("react").JSX.Element;

package/dist/BottomSheet/BottomSheet.doc.d.ts

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

package/dist/BottomSheet/BottomSheet.doc.js

@@ -0,0 +1,21 @@
+import "../styles/stylex.css";
+export const bottomSheetDoc = {
+  name: 'BottomSheet',
+  description: 'Presents a modal panel anchored to the bottom edge.',
+  props: [{
+    name: 'children',
+    description: 'Supplies the panel body.'
+  }, {
+    name: 'onDismiss',
+    description: 'Runs on Escape or a scrim click.'
+  }, {
+    name: 'open',
+    description: 'Controls whether the panel renders.'
+  }, {
+    name: 'title',
+    description: 'Names the panel for assistive technology.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLDivElement> except children, className, role, and title'],
+  example: '<BottomSheet onDismiss={close} open={open} title="Filters">...</BottomSheet>',
+  storyId: 'core-bottom-sheet--default'
+};

package/dist/BottomSheet/BottomSheet.js

@@ -0,0 +1,68 @@
+import * as stylex from '@stylexjs/stylex';
+import { useId } from 'react';
+import { semanticTokens } from '../authoring.stylex.js';
+import { scrolling } from '../scrolling/index.js';
+import { Overlay } from '../Overlay/index.js';
+import "../styles/stylex.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const sheetEnter = "xzk1luc-B";
+const styles = {
+  content: {
+    kAzted: "x2lwn1j",
+    kORKVm: "x1odjw0f",
+    kGO01o: "xdf4gn3",
+    kg3NbH: "x1q83fih",
+    $$css: true
+  }
+};
+
+/** Props for a modal panel that enters from the bottom edge. */
+
+/**
+ * Presents a modal panel anchored to the bottom edge, where a thumb can reach
+ * it. It carries the same focus trap and scroll lock as Dialog.
+ */
+export function BottomSheet({
+  children,
+  onDismiss,
+  open,
+  title,
+  ...props
+}) {
+  const titleId = useId();
+  return /*#__PURE__*/_jsx(Overlay, {
+    ...(onDismiss ? {
+      onDismiss
+    } : {}),
+    open: open,
+    children: /*#__PURE__*/_jsxs("div", {
+      ...props,
+      "aria-labelledby": titleId,
+      "aria-modal": "true",
+      role: "dialog",
+      ...{
+        className: "xrnvkan xdd610l x1aquc0h xwm07dd x40o0ze x1viujtu x1e65yn2 x1ia5mbg x1y4yzzg x78zum5 xdt5ytf xj0sio9 x1ey2m1c x1jspoyy xhd83ik xb3r6kr xixxii4"
+      },
+      children: [/*#__PURE__*/_jsx("div", {
+        "aria-hidden": "true",
+        ...{
+          className: "x78zum5 xl56j7k x13jfld5 x1rsshx6"
+        },
+        children: /*#__PURE__*/_jsx("span", {
+          ...{
+            className: "xmjv2u5 x1l6hjkl x1myr7a0 x1y0kk5z"
+          }
+        })
+      }), /*#__PURE__*/_jsx("h2", {
+        id: titleId,
+        ...{
+          className: "x1y4yzzg x13fdfvb x1fkw5ar x1m30uz7 xmkh2y5 x1vslzj6 x1ghz6dp x8b4cuq xh2zwx4 x1q83fih"
+        },
+        children: title
+      }), /*#__PURE__*/_jsx("div", {
+        ...stylex.props(styles.content, scrolling.region),
+        children: children
+      })]
+    })
+  });
+}

package/dist/BottomSheet/index.d.ts

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

package/dist/BottomSheet/index.js

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

package/dist/BottomSheetSwitcher/BottomSheetSwitcher.d.ts

@@ -0,0 +1,35 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+/** One named view a switcher can show inside a single sheet. */
+export interface BottomSheetSwitcherView {
+    readonly content: ReactNode;
+    readonly id: string;
+    readonly parentId?: string;
+    readonly title: ReactNode;
+}
+type SharedBottomSheetSwitcherProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'className' | 'role' | 'title'> & {
+    readonly backLabel?: string;
+    readonly onDismiss?: () => void;
+    readonly onViewChange?: (viewId: string) => void;
+    readonly open: boolean;
+    readonly views: readonly BottomSheetSwitcherView[];
+};
+type ControlledBottomSheetSwitcherProps = SharedBottomSheetSwitcherProps & {
+    readonly defaultViewId?: never;
+    readonly onViewChange: (viewId: string) => void;
+    readonly viewId: string;
+};
+type UncontrolledBottomSheetSwitcherProps = SharedBottomSheetSwitcherProps & {
+    readonly defaultViewId?: string;
+    readonly viewId?: never;
+};
+/** Props for one sheet whose content swaps between several named views. */
+export type BottomSheetSwitcherProps = ControlledBottomSheetSwitcherProps | UncontrolledBottomSheetSwitcherProps;
+/**
+ * Shows one bottom sheet whose content swaps between named views, so a reader
+ * can drill from a summary into a detail without the sheet ever closing. A
+ * view that names a parent gets a back control, and every switch moves focus
+ * to the heading of the view that arrived — otherwise the reader is left on a
+ * button that has just changed meaning underneath them.
+ */
+export declare function BottomSheetSwitcher({ backLabel, defaultViewId, onDismiss, onViewChange, open, viewId, views, ...props }: BottomSheetSwitcherProps): import("react").JSX.Element;
+export {};

package/dist/BottomSheetSwitcher/BottomSheetSwitcher.doc.d.ts

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

package/dist/BottomSheetSwitcher/BottomSheetSwitcher.doc.js

@@ -0,0 +1,30 @@
+import "../styles/stylex.css";
+export const bottomSheetSwitcherDoc = {
+  name: 'BottomSheetSwitcher',
+  description: 'Swaps one sheet between several named views.',
+  props: [{
+    name: 'backLabel',
+    description: 'Names the control back to the parent.'
+  }, {
+    name: 'defaultViewId',
+    description: 'Sets the initial uncontrolled view.'
+  }, {
+    name: 'onDismiss',
+    description: 'Runs on Escape or a scrim click.'
+  }, {
+    name: 'onViewChange',
+    description: 'Receives the next view id.'
+  }, {
+    name: 'open',
+    description: 'Controls whether the sheet renders.'
+  }, {
+    name: 'viewId',
+    description: 'Controls which view is shown.'
+  }, {
+    name: 'views',
+    description: 'Supplies each view and its parent.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLDivElement> except children, className, role, and title'],
+  example: '<BottomSheetSwitcher onDismiss={close} open={open} views={views} />',
+  storyId: 'core-bottom-sheet-switcher--default'
+};

package/dist/BottomSheetSwitcher/BottomSheetSwitcher.js

@@ -0,0 +1,104 @@
+import * as stylex from '@stylexjs/stylex';
+import { useEffect, useRef, useState } from 'react';
+import { semanticTokens } from '../authoring.stylex.js';
+import { BottomSheet } from '../BottomSheet/index.js';
+import { Button } from '../Button/index.js';
+import { Icon } from '../Icon/index.js';
+import { useInternationalization } from '../i18n/index.js';
+
+// The back control is a small button, and a small button carries its own
+// inline padding. Negating that padding exactly puts its first letter on the
+// same edge as the sheet's title rather than a step inside it.
+import "../styles/stylex.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const backBleed = `calc(-1 * ${semanticTokens.spacingSm})`;
+/** One named view a switcher can show inside a single sheet. */
+
+/** Props for one sheet whose content swaps between several named views. */
+
+/**
+ * Shows one bottom sheet whose content swaps between named views, so a reader
+ * can drill from a summary into a detail without the sheet ever closing. A
+ * view that names a parent gets a back control, and every switch moves focus
+ * to the heading of the view that arrived — otherwise the reader is left on a
+ * button that has just changed meaning underneath them.
+ */
+export function BottomSheetSwitcher({
+  backLabel,
+  defaultViewId,
+  onDismiss,
+  onViewChange,
+  open,
+  viewId,
+  views,
+  ...props
+}) {
+  if (views.length === 0) {
+    throw new Error('BottomSheetSwitcher requires at least one view');
+  }
+  const {
+    messages
+  } = useInternationalization();
+  const headingRef = useRef(null);
+  const shownViewId = useRef(undefined);
+  const [internalViewId, setInternalViewId] = useState(defaultViewId);
+  const requestedViewId = viewId ?? internalViewId;
+  const current = views.find(view => view.id === requestedViewId) ?? views[0];
+  const currentId = current.id;
+  useEffect(() => {
+    if (!open) {
+      shownViewId.current = undefined;
+      return;
+    }
+    const shown = shownViewId.current;
+    if (shown !== undefined && shown !== currentId) {
+      headingRef.current?.focus();
+    }
+    shownViewId.current = currentId;
+  }, [currentId, open]);
+  const parent = views.find(view => view.id === current.parentId);
+  function show(nextViewId) {
+    if (viewId === undefined) {
+      setInternalViewId(nextViewId);
+    }
+    onViewChange?.(nextViewId);
+  }
+  return /*#__PURE__*/_jsx(BottomSheet, {
+    ...props,
+    onDismiss: onDismiss,
+    open: open,
+    title: /*#__PURE__*/_jsx("span", {
+      ref: headingRef,
+      ...{
+        className: "x13fdfvb x1t137rt x15meki4 xz32tfx x1p22nma x17lds6u"
+      },
+      tabIndex: -1,
+      children: current.title
+    }),
+    children: /*#__PURE__*/_jsxs("div", {
+      ...{
+        className: "x78zum5 xdt5ytf xtl099x"
+      },
+      children: [parent === undefined ? null : /*#__PURE__*/_jsx("div", {
+        ...{
+          className: "x78zum5 xdq70t9"
+        },
+        children: /*#__PURE__*/_jsxs(Button, {
+          onClick: () => {
+            show(parent.id);
+          },
+          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"
+            })
+          }), backLabel ?? messages.back]
+        })
+      }), current.content]
+    })
+  });
+}

package/dist/BottomSheetSwitcher/index.d.ts

@@ -0,0 +1 @@
+export { BottomSheetSwitcher, type BottomSheetSwitcherProps, type BottomSheetSwitcherView, } from './BottomSheetSwitcher.js';

package/dist/BottomSheetSwitcher/index.js

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

package/dist/Box/Box.d.ts

@@ -0,0 +1,53 @@
+import * as stylex from '@stylexjs/stylex';
+import type { HTMLAttributes } from 'react';
+import type { Space } from '../Stack/index.js';
+declare const surfaces: {
+    readonly canvas: Readonly<{
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+    }>;
+    readonly muted: Readonly<{
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+    }>;
+    readonly raised: Readonly<{
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+    }>;
+    readonly surface: Readonly<{
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+    }>;
+};
+declare const radii: {
+    readonly inner: Readonly<{
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+    }>;
+    readonly element: Readonly<{
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+    }>;
+    readonly container: Readonly<{
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+    }>;
+    readonly page: Readonly<{
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+    }>;
+    readonly full: Readonly<{
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+    }>;
+};
+/** Background roles a box can take from the token contract. */
+export type BoxSurface = keyof typeof surfaces;
+/** Corner treatments a box can take from the token contract. */
+export type BoxRadius = keyof typeof radii;
+/** Props for the plain token-aware box. */
+export interface BoxProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
+    readonly bordered?: boolean;
+    readonly padding?: Space;
+    readonly radius?: BoxRadius;
+    readonly surface?: BoxSurface;
+}
+/**
+ * A box with no meaning of its own, spending only token values. Reach for it
+ * when a layout needs a surface or some padding and none of the named
+ * containers — `Card`, `Section` — would be telling the truth about what the
+ * thing is.
+ */
+export declare function Box({ bordered, children, padding, radius, surface, ...props }: BoxProps): import("react").JSX.Element;
+export {};

package/dist/{components/Card.doc.d.ts → Box/Box.doc.d.ts}

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

package/dist/Box/Box.doc.js

@@ -0,0 +1,21 @@
+import "../styles/stylex.css";
+export const boxDoc = {
+  name: 'Box',
+  description: 'A plain box that spends only token values.',
+  props: [{
+    name: 'bordered',
+    description: 'Draws the default border.'
+  }, {
+    name: 'padding',
+    description: 'Selects the inset from the spacing scale.'
+  }, {
+    name: 'radius',
+    description: 'Selects the corner treatment.'
+  }, {
+    name: 'surface',
+    description: 'Selects the background colour role.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLDivElement> except className'],
+  example: '<Box padding="lg" radius="container" surface="muted">…</Box>',
+  storyId: 'core-box--default'
+};