@misoto22/kioku-ui 0.0.0 → 0.2.0

package/dist/Token/Token.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+/** Props for one discrete value shown as a chip. */
+export interface TokenProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'className'> {
+    readonly children: ReactNode;
+    readonly leading?: ReactNode;
+    readonly onRemove?: () => void;
+    readonly removeLabel?: string;
+}
+/**
+ * Shows one discrete value the reader has entered or chosen. When it can be
+ * removed the control carries its own name, so a keyboard reader knows which
+ * token a given button clears.
+ */
+export declare function Token({ children, leading, onRemove, removeLabel, ...props }: TokenProps): import("react").JSX.Element;

package/dist/Token/Token.doc.d.ts

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

package/dist/Token/Token.doc.js

@@ -0,0 +1,21 @@
+import "../styles/stylex.css";
+export const tokenDoc = {
+  name: 'Token',
+  description: 'Shows one discrete value as a removable chip.',
+  props: [{
+    name: 'children',
+    description: 'Supplies the value label.'
+  }, {
+    name: 'leading',
+    description: 'Places content before the label.'
+  }, {
+    name: 'onRemove',
+    description: 'Adds a remove control and receives its click.'
+  }, {
+    name: 'removeLabel',
+    description: 'Names the remove control.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLSpanElement> except children and className'],
+  example: '<Token onRemove={clear} removeLabel="Remove Ada">Ada</Token>',
+  storyId: 'core-token--default'
+};

package/dist/Token/Token.js

@@ -0,0 +1,57 @@
+import * as stylex from '@stylexjs/stylex';
+import { semanticTokens } from '../authoring.stylex.js';
+import { useInternationalization } from '../i18n/index.js';
+import { Icon } from '../Icon/index.js';
+import "../styles/stylex.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Props for one discrete value shown as a chip. */
+
+/**
+ * Shows one discrete value the reader has entered or chosen. When it can be
+ * removed the control carries its own name, so a keyboard reader knows which
+ * token a given button clears.
+ */
+export function Token({
+  children,
+  leading,
+  onRemove,
+  removeLabel,
+  ...props
+}) {
+  const {
+    messages
+  } = useInternationalization();
+  return /*#__PURE__*/_jsxs("span", {
+    ...props,
+    ...{
+      0: {
+        className: "x6s0dn4 x1ixvsy6 x1wxkff4 x8kq9my x1jnjmdy xpxnlqs x9f619 x1y4yzzg x3nfvp2 xj0sio9 xltg2ad x1iwn5ga xq5azjn x1ezks3f x193iq5w x10y07nz x1qtbwip"
+      },
+      1: {
+        className: "x6s0dn4 x1ixvsy6 x1wxkff4 x8kq9my x1jnjmdy xpxnlqs x9f619 x1y4yzzg x3nfvp2 xj0sio9 xltg2ad x1iwn5ga xq5azjn x1ezks3f x193iq5w x10y07nz x1qtbwip x642jeu"
+      }
+    }[!!(onRemove !== undefined) << 0],
+    children: [leading, /*#__PURE__*/_jsx("span", {
+      ...{
+        className: "xb3r6kr xlyipyv xuxw1ft"
+      },
+      children: children
+    }), onRemove === undefined ? null : /*#__PURE__*/_jsx("button", {
+      "aria-label": removeLabel ?? messages.remove,
+      onClick: onRemove,
+      ...{
+        className: "x6s0dn4 xjbqb8w x1l6hjkl xng3xce xc342km x17y7oyd x1ypdohk x3nfvp2 x2lah0s x1717udv x1n2onr6 x1elc2ff xt3l3uh xxjumz x1cpjm7i x17f96yv x1knuo7r xfbisj7 x1hmns74 xbnewub x1o8qpxl x15meki4 xz32tfx x1p22nma x17lds6u x1kz4h7b"
+      },
+      type: "button",
+      children: /*#__PURE__*/_jsx(Icon, {
+        size: "sm",
+        children: /*#__PURE__*/_jsx("path", {
+          d: "m6 6 12 12M18 6 6 18",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2"
+        })
+      })
+    })]
+  });
+}

package/dist/Token/index.d.ts

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

package/dist/Token/index.js

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

package/dist/Tokenizer/Tokenizer.d.ts

@@ -0,0 +1,16 @@
+import { type HTMLAttributes } from 'react';
+/** Props for free-text entry that turns into discrete tokens. */
+export interface TokenizerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'className' | 'defaultValue' | 'onChange'> {
+    readonly label: string;
+    readonly onValueChange: (values: readonly string[]) => void;
+    readonly required?: boolean;
+    readonly placeholder?: string;
+    readonly removeLabel?: (value: string) => string;
+    readonly value: readonly string[];
+}
+/**
+ * Turns typed text into discrete tokens on Enter or comma. Backspace on an
+ * empty field removes the last token, which is what a reader expects from
+ * every other tag field they have used.
+ */
+export declare function Tokenizer({ 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, id, label, onValueChange, placeholder, removeLabel, required, value, ...props }: TokenizerProps): import("react").JSX.Element;

package/dist/Tokenizer/Tokenizer.doc.d.ts

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

package/dist/Tokenizer/Tokenizer.doc.js

@@ -0,0 +1,24 @@
+import "../styles/stylex.css";
+export const tokenizerDoc = {
+  name: 'Tokenizer',
+  description: 'Turns typed text into discrete removable tokens.',
+  props: [{
+    name: 'label',
+    description: 'Names the entry field.'
+  }, {
+    name: 'onValueChange',
+    description: 'Receives the next set of tokens.'
+  }, {
+    name: 'placeholder',
+    description: 'Hints at what to type.'
+  }, {
+    name: 'removeLabel',
+    description: 'Builds the name of each remove control.'
+  }, {
+    name: 'value',
+    description: 'Controls the current tokens.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLDivElement> except children, className, defaultValue, and onChange'],
+  example: '<Tokenizer label="Tags" onValueChange={setTags} value={tags} />',
+  storyId: 'core-tokenizer--default'
+};

package/dist/Tokenizer/Tokenizer.js

@@ -0,0 +1,92 @@
+import * as stylex from '@stylexjs/stylex';
+import { useState } from 'react';
+import { semanticTokens } from '../authoring.stylex.js';
+import { useFieldControl } from '../Field/index.js';
+import { Token } from '../Token/index.js';
+
+// Wide enough that a half-typed tag is still readable once tokens wrap.
+import "../styles/stylex.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const draftWidth = `calc(${semanticTokens.spacing2xl} + ${semanticTokens.spacing2xl} + ${semanticTokens.spacing2xl})`;
+/** Props for free-text entry that turns into discrete tokens. */
+
+/**
+ * Turns typed text into discrete tokens on Enter or comma. Backspace on an
+ * empty field removes the last token, which is what a reader expects from
+ * every other tag field they have used.
+ */
+export function Tokenizer({
+  'aria-describedby': ariaDescribedBy,
+  'aria-invalid': ariaInvalid,
+  id,
+  label,
+  onValueChange,
+  placeholder,
+  removeLabel = value => `Remove ${value}`,
+  required,
+  value,
+  ...props
+}) {
+  const field = useFieldControl();
+  const [draft, setDraft] = useState('');
+  // The same reading of the field contract every other well makes. This one
+  // took only the id and the description from it, so a `Field` marked required
+  // or invalid reached the message but never the control.
+  const describedBy = [field?.describedBy, ariaDescribedBy].filter(Boolean).join(' ') || undefined;
+  const resolvedInvalid = ariaInvalid ?? field?.invalid;
+  const invalid = resolvedInvalid !== undefined && resolvedInvalid !== false && resolvedInvalid !== 'false';
+  function commit() {
+    const entry = draft.trim();
+    if (entry === '' || value.includes(entry)) {
+      setDraft('');
+      return;
+    }
+    onValueChange([...value, entry]);
+    setDraft('');
+  }
+  function handleKeyDown(event) {
+    if (event.key === 'Enter' || event.key === ',') {
+      event.preventDefault();
+      commit();
+      return;
+    }
+    if (event.key === 'Backspace' && draft === '' && value.length > 0) {
+      onValueChange(value.slice(0, -1));
+    }
+  }
+  return /*#__PURE__*/_jsxs("div", {
+    ...props,
+    ...{
+      0: {
+        className: "x6s0dn4 xavu78a x1wxkff4 x8kq9my x1jnjmdy xpxnlqs x78zum5 x1a02dak xj0sio9 x1iwn5ga xmm8wyw x1tkv3ku x1elc2ff xshfolx xxjumz xc8z1lp x16xryy4 xfswlut xnip9g3 x1lm2vjv x12uk28n"
+      },
+      1: {
+        className: "x6s0dn4 xavu78a x8kq9my x1jnjmdy xpxnlqs x78zum5 x1a02dak xj0sio9 x1iwn5ga xmm8wyw x1tkv3ku x1elc2ff xshfolx xxjumz x16xryy4 xfswlut xnip9g3 x1lm2vjv xcf5wgx x9a976t xtku8dq"
+      }
+    }[!!invalid << 0],
+    children: [value.map(entry => /*#__PURE__*/_jsx(Token, {
+      onRemove: () => {
+        onValueChange(value.filter(candidate => candidate !== entry));
+      },
+      removeLabel: removeLabel(entry),
+      children: entry
+    }, entry)), /*#__PURE__*/_jsx("input", {
+      "aria-describedby": describedBy,
+      "aria-invalid": resolvedInvalid,
+      "aria-label": label,
+      id: field?.controlId ?? id,
+      onBlur: commit,
+      onChange: event => {
+        setDraft(event.currentTarget.value);
+      },
+      onKeyDown: handleKeyDown,
+      placeholder: placeholder,
+      required: required ?? field?.required,
+      value: draft,
+      ...{
+        className: "xjbqb8w xng3xce xc342km x1y4yzzg x1iyjqo2 xj0sio9 x1ti3rys xgz4m7n x1ezks3f xtlf5k9 xt970qd xov5yc9 x1e4qbc8 xi5y0ii"
+      },
+      type: "text"
+    })]
+  });
+}

package/dist/Tokenizer/index.d.ts

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

package/dist/Tokenizer/index.js

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

package/dist/Toolbar/Toolbar.d.ts

@@ -0,0 +1,13 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import type { ListOrientation } from '../hooks/useListFocus.js';
+/** Props for a grouped set of controls that shares one tab stop. */
+export interface ToolbarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'className' | 'role'> {
+    readonly children: ReactNode;
+    readonly label: string;
+    readonly orientation?: ListOrientation;
+}
+/**
+ * Groups related controls into one tab stop. Arrow keys move between the
+ * controls, so a toolbar of ten buttons does not cost ten Tab presses.
+ */
+export declare function Toolbar({ children, label, orientation, ...props }: ToolbarProps): import("react").JSX.Element;

package/dist/Toolbar/Toolbar.doc.d.ts

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

package/dist/Toolbar/Toolbar.doc.js

@@ -0,0 +1,18 @@
+import "../styles/stylex.css";
+export const toolbarDoc = {
+  name: 'Toolbar',
+  description: 'Groups related controls into a single tab stop.',
+  props: [{
+    name: 'children',
+    description: 'Supplies the grouped controls.'
+  }, {
+    name: 'label',
+    description: 'Names the toolbar for assistive technology.'
+  }, {
+    name: 'orientation',
+    description: 'Selects the axis arrow keys travel along.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLDivElement> except children, className, and role'],
+  example: '<Toolbar label="Text style"><IconButton aria-label="Bold" /></Toolbar>',
+  storyId: 'core-toolbar--default'
+};

package/dist/Toolbar/Toolbar.js

@@ -0,0 +1,65 @@
+import * as stylex from '@stylexjs/stylex';
+import { useRef } from 'react';
+import { semanticTokens } from '../authoring.stylex.js';
+import { useListFocus } from '../hooks/useListFocus.js';
+// Tools sit against each other, parted by the width of a rule rather than by
+// a gutter. Spread on the spacing scale they read as three separate buttons
+// that happen to be near each other; closed up they read as one instrument.
+import "../styles/stylex.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const toolGap = `calc(2 * ${semanticTokens.borderWidth})`;
+const styles = {
+  toolbar: {
+    kGNEyG: "x6s0dn4",
+    kMwMTN: "x1y4yzzg",
+    k1xSpc: "x78zum5",
+    kMv6JI: "xj0sio9",
+    kGuDYH: "x1ti3rys",
+    kb6lSQ: "xq5azjn",
+    k7Eaqz: "xeuugli",
+    $$css: true
+  },
+  horizontal: {
+    k1C7PZ: "x1000x63",
+    kXwgrk: "x1q0g3np",
+    kwnvtZ: "x1a02dak",
+    khm7nJ: "xzkt8rb",
+    $$css: true
+  },
+  vertical: {
+    kGNEyG: "x1qjc9v5",
+    kXwgrk: "xdt5ytf",
+    khm7nJ: "xzkt8rb",
+    $$css: true
+  }
+};
+
+/** Props for a grouped set of controls that shares one tab stop. */
+
+/**
+ * Groups related controls into one tab stop. Arrow keys move between the
+ * controls, so a toolbar of ten buttons does not cost ten Tab presses.
+ */
+export function Toolbar({
+  children,
+  label,
+  orientation = 'horizontal',
+  ...props
+}) {
+  const toolbarRef = useRef(null);
+  const {
+    onKeyDown
+  } = useListFocus(toolbarRef, {
+    orientation
+  });
+  return /*#__PURE__*/_jsx("div", {
+    ...props,
+    "aria-label": label,
+    "aria-orientation": orientation,
+    onKeyDown: onKeyDown,
+    ref: toolbarRef,
+    role: "toolbar",
+    ...stylex.props(styles.toolbar, styles[orientation]),
+    children: children
+  });
+}

package/dist/Toolbar/index.d.ts

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

package/dist/Toolbar/index.js

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

package/dist/Tooltip/Tooltip.d.ts

@@ -0,0 +1,25 @@
+import { type FocusEvent, type MouseEvent, type ReactElement, type ReactNode } from 'react';
+import { type Alignment, type Placement } from '../hooks/useAnchoredPosition.js';
+interface TriggerProps {
+    readonly 'aria-describedby'?: string;
+    readonly onBlur?: (event: FocusEvent<HTMLElement>) => void;
+    readonly onFocus?: (event: FocusEvent<HTMLElement>) => void;
+    readonly onMouseEnter?: (event: MouseEvent<HTMLElement>) => void;
+    readonly onMouseLeave?: (event: MouseEvent<HTMLElement>) => void;
+    readonly ref?: unknown;
+}
+/** Props for a hover- and focus-triggered description. */
+export interface TooltipProps {
+    readonly alignment?: Alignment;
+    readonly children: ReactElement<TriggerProps>;
+    readonly content: ReactNode;
+    readonly delay?: number;
+    readonly placement?: Placement;
+}
+/**
+ * Describes its trigger on hover and on focus. The description is wired with
+ * `aria-describedby`, so it supplements the trigger's name rather than
+ * replacing it — never put essential information here alone.
+ */
+export declare function Tooltip({ alignment, children, content, delay, placement, }: TooltipProps): import("react").JSX.Element;
+export {};

package/dist/Tooltip/Tooltip.doc.d.ts

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

package/dist/Tooltip/Tooltip.doc.js

@@ -0,0 +1,24 @@
+import "../styles/stylex.css";
+export const tooltipDoc = {
+  name: 'Tooltip',
+  description: 'Describes its trigger on hover and on focus.',
+  props: [{
+    name: 'alignment',
+    description: 'Lines the surface up along the cross axis.'
+  }, {
+    name: 'children',
+    description: 'Supplies the single trigger element.'
+  }, {
+    name: 'content',
+    description: 'Supplies the supplementary description.'
+  }, {
+    name: 'delay',
+    description: 'Sets the hover delay in milliseconds.'
+  }, {
+    name: 'placement',
+    description: 'Selects the preferred side of the trigger.'
+  }],
+  inheritedProps: ['None; Tooltip renders only its trigger and description'],
+  example: '<Tooltip content="Saves a draft"><Button>Save</Button></Tooltip>',
+  storyId: 'core-tooltip--default'
+};

package/dist/Tooltip/Tooltip.js

@@ -0,0 +1,110 @@
+import * as stylex from '@stylexjs/stylex';
+import { Children, cloneElement, useEffect, useId, useRef, useState } from 'react';
+import { semanticTokens } from '../authoring.stylex.js';
+import { useAnchoredPosition } from '../hooks/useAnchoredPosition.js';
+import { Layer } from '../Layer/index.js';
+
+// A tooltip stays narrow enough to read in one or two lines; the scale stops
+// at 38px, so the cap is a named multiple of it rather than a rem literal.
+import "../styles/stylex.css";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const surfaceMaxWidth = `calc(${semanticTokens.spacing2xl} * 8)`;
+/** Props for a hover- and focus-triggered description. */
+
+/**
+ * Describes its trigger on hover and on focus. The description is wired with
+ * `aria-describedby`, so it supplements the trigger's name rather than
+ * replacing it — never put essential information here alone.
+ */
+export function Tooltip({
+  alignment,
+  children,
+  content,
+  delay = 300,
+  placement = 'top'
+}) {
+  const anchorRef = useRef(null);
+  const timer = useRef(undefined);
+  const [open, setOpen] = useState(false);
+  const describedBy = useId();
+  const {
+    position,
+    surfaceRef
+  } = useAnchoredPosition(anchorRef, open, {
+    ...(alignment ? {
+      alignment
+    } : {}),
+    placement
+  });
+  useEffect(() => () => {
+    clearTimeout(timer.current);
+  }, []);
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    function handleKeyDown(event) {
+      if (event.key === 'Escape') {
+        setOpen(false);
+      }
+    }
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [open]);
+  function show() {
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => {
+      setOpen(true);
+    }, delay);
+  }
+  function hide() {
+    clearTimeout(timer.current);
+    setOpen(false);
+  }
+  const trigger = Children.only(children);
+  const anchor = cloneElement(trigger, {
+    'aria-describedby': open ? describedBy : trigger.props['aria-describedby'],
+    onBlur: event => {
+      trigger.props.onBlur?.(event);
+      hide();
+    },
+    onFocus: event => {
+      trigger.props.onFocus?.(event);
+      show();
+    },
+    onMouseEnter: event => {
+      trigger.props.onMouseEnter?.(event);
+      show();
+    },
+    onMouseLeave: event => {
+      trigger.props.onMouseLeave?.(event);
+      hide();
+    },
+    ref: anchorRef
+  });
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [anchor, open ? /*#__PURE__*/_jsx(Layer, {
+      children: /*#__PURE__*/_jsx("div", {
+        "data-placement": position?.placement,
+        id: describedBy,
+        ref: surfaceRef,
+        role: "tooltip",
+        ...{
+          0: {
+            className: "x40o0ze x7xrhi9 x165nt33 x1y4yzzg xj0sio9 xltg2ad xq5azjn x1ezks3f xr55bvm x10y07nz x1qtbwip x47corl xixxii4"
+          },
+          1: {
+            className: "x40o0ze x7xrhi9 x165nt33 x1y4yzzg xj0sio9 xltg2ad xq5azjn x1ezks3f xr55bvm x10y07nz x1qtbwip x47corl xixxii4 xlshs6z"
+          }
+        }[!!(position === undefined) << 0],
+        style: {
+          left: position?.left,
+          top: position?.top
+        },
+        children: content
+      })
+    }) : null]
+  });
+}

package/dist/Tooltip/index.d.ts

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

package/dist/Tooltip/index.js

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

package/dist/TopNav/TopNav.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+/** Props for the banner across the top of an application. */
+export interface TopNavProps extends Omit<HTMLAttributes<HTMLElement>, 'children' | 'className' | 'role'> {
+    readonly actions?: ReactNode;
+    readonly brand?: ReactNode;
+    readonly children?: ReactNode;
+}
+/**
+ * Places identity, primary navigation, and account actions in one banner.
+ * It emits `header`, so it is the page banner landmark.
+ */
+export declare function TopNav({ actions, brand, children, ...props }: TopNavProps): import("react").JSX.Element;

package/dist/TopNav/TopNav.doc.d.ts

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

package/dist/TopNav/TopNav.doc.js

@@ -0,0 +1,18 @@
+import "../styles/stylex.css";
+export const topNavDoc = {
+  name: 'TopNav',
+  description: 'Places identity, navigation, and actions in the page banner.',
+  props: [{
+    name: 'actions',
+    description: 'Places account or global actions at the end.'
+  }, {
+    name: 'brand',
+    description: 'Places identity at the start of the banner.'
+  }, {
+    name: 'children',
+    description: 'Supplies the primary navigation.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLElement> except children, className, and role'],
+  example: '<TopNav brand="Kioku"><NavMenu label="Primary">…</NavMenu></TopNav>',
+  storyId: 'core-top-nav--default'
+};

package/dist/TopNav/TopNav.js

@@ -0,0 +1,39 @@
+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 the banner across the top of an application. */
+
+/**
+ * Places identity, primary navigation, and account actions in one banner.
+ * It emits `header`, so it is the page banner landmark.
+ */
+export function TopNav({
+  actions,
+  brand,
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/_jsxs("header", {
+    ...props,
+    ...{
+      className: "x6s0dn4 x1r2uulk x1k3hjl9 x1w5tod1 xeq6m5c x1nm4htl x78zum5 xj0sio9 xq5j1ye xoeao9w x1q83fih"
+    },
+    children: [brand === undefined ? null : /*#__PURE__*/_jsx("div", {
+      ...{
+        className: "x6s0dn4 x1y4yzzg x2w1tkd x78zum5 x2lah0s x13fdfvb x1fkw5ar x1it3fuk x1m30uz7 xq5azjn x1vslzj6"
+      },
+      children: brand
+    }), children === undefined ? null : /*#__PURE__*/_jsx("div", {
+      ...{
+        className: "x1iyjqo2 xeuugli"
+      },
+      children: children
+    }), actions === undefined ? null : /*#__PURE__*/_jsx("div", {
+      ...{
+        className: "x6s0dn4 x2w1tkd x78zum5 x2lah0s"
+      },
+      children: actions
+    })]
+  });
+}

package/dist/TopNav/index.d.ts

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

package/dist/TopNav/index.js

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