@misoto22/kioku-ui 0.0.0 → 0.2.0

package/dist/Eyebrow/Eyebrow.doc.js

@@ -0,0 +1,15 @@
+import "../styles/stylex.css";
+export const eyebrowDoc = {
+  name: 'Eyebrow',
+  description: 'Names a thing without competing with it.',
+  props: [{
+    name: 'children',
+    description: 'Supplies the label.'
+  }, {
+    name: 'tone',
+    description: 'Optional ink rank: "secondary", "muted", or "danger".'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLSpanElement> except className'],
+  example: '<Eyebrow>Recent activity</Eyebrow>',
+  storyId: 'core-eyebrow--default'
+};

package/dist/Eyebrow/Eyebrow.js

@@ -0,0 +1,47 @@
+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: {
+    kMv6JI: "x69it5h",
+    kGuDYH: "xnlz8j1",
+    k63SB2: "x1jcbhmk",
+    kb6lSQ: "x1di4hct",
+    kLWn49: "x1vslzj6",
+    $$css: true
+  },
+  secondary: {
+    kMwMTN: "x17y7oyd",
+    $$css: true
+  },
+  muted: {
+    kMwMTN: "x1mgtvnk",
+    $$css: true
+  },
+  danger: {
+    kMwMTN: "x8bm3zx",
+    $$css: true
+  }
+};
+
+/** Ink ranks an eyebrow can take, secondary being rule 50's own. */
+
+/** Props for a small label that names something without competing with it. */
+
+/**
+ * Names a thing without competing with it: a card kicker, a rail heading, a
+ * metric label. It is a `span` rather than `Text`'s paragraph because an
+ * eyebrow is always placed inside somebody else's block.
+ */
+export function Eyebrow({
+  children,
+  tone = 'secondary',
+  ...props
+}) {
+  return /*#__PURE__*/_jsx("span", {
+    ...props,
+    ...stylex.props(styles.base, styles[tone]),
+    children: children
+  });
+}

package/dist/Eyebrow/index.d.ts

@@ -0,0 +1 @@
+export { Eyebrow, type EyebrowProps, type EyebrowTone } from './Eyebrow.js';

package/dist/Eyebrow/index.js

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

package/dist/Field/Field.js

@@ -12,23 +12,31 @@ const styles = {
   },
   label: {
     kGNEyG: "x1pha0wt",
-    kMwMTN: "x1y4yzzg",
+    kMwMTN: "x17y7oyd",
     k1xSpc: "x78zum5",
-    kMv6JI: "xj0sio9",
-    kGuDYH: "xltg2ad",
+    kMv6JI: "x69it5h",
+    kGuDYH: "xnlz8j1",
     k63SB2: "x1m30uz7",
     kOIVth: "x1ap6kct",
     kjj79g: "x1qughib",
+    kb6lSQ: "x1di4hct",
+    kLWn49: "x1vslzj6",
     $$css: true
   },
   annotation: {
     kMwMTN: "x1mgtvnk",
+    kMv6JI: "x69it5h",
+    kGuDYH: "xnlz8j1",
     k63SB2: "x1jcbhmk",
+    kb6lSQ: "x1di4hct",
+    kLWn49: "x1vslzj6",
     $$css: true
   },
   message: {
     kMv6JI: "xj0sio9",
     kGuDYH: "xltg2ad",
+    kb6lSQ: "xgz4m7n",
+    kLWn49: "x1ezks3f",
     kogj98: "x1ghz6dp",
     $$css: true
   },
@@ -37,7 +45,7 @@ const styles = {
     $$css: true
   },
   info: {
-    kMwMTN: "x1ursi0k",
+    kMwMTN: "x17y7oyd",
     $$css: true
   },
   success: {
@@ -86,20 +94,20 @@ export function Field({
       children: [/*#__PURE__*/_jsxs("label", {
         htmlFor: resolvedControlId,
         ...{
-          className: "x1pha0wt x1y4yzzg x78zum5 xj0sio9 xltg2ad x1m30uz7 x1ap6kct x1qughib"
+          className: "x1pha0wt x17y7oyd x78zum5 x69it5h xnlz8j1 x1m30uz7 x1ap6kct x1qughib x1di4hct x1vslzj6"
         },
         children: [/*#__PURE__*/_jsx("span", {
           children: label
         }), necessity ? /*#__PURE__*/_jsx("span", {
           ...{
-            className: "x1mgtvnk x1jcbhmk"
+            className: "x1mgtvnk x69it5h xnlz8j1 x1jcbhmk x1di4hct x1vslzj6"
           },
           children: ` (${necessity})`
         }) : null]
       }), children, description ? /*#__PURE__*/_jsx("p", {
         id: descriptionId,
         ...{
-          className: "xj0sio9 xltg2ad x1ghz6dp x17y7oyd"
+          className: "xj0sio9 xltg2ad xgz4m7n x1ezks3f x1ghz6dp x17y7oyd"
         },
         children: description
       }) : null, status ? /*#__PURE__*/_jsx("p", {

package/dist/FieldStatus/FieldStatus.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { StatusTone } from '../Badge/index.js';
+/** Props for a validation message attached to one control. */
+export interface FieldStatusProps extends Omit<HTMLAttributes<HTMLParagraphElement>, 'aria-live' | 'children' | 'className' | 'role'> {
+    readonly children: ReactNode;
+    readonly tone?: StatusTone;
+}
+/**
+ * States the outcome of validating one control. A `danger` message announces
+ * itself, because a reader who just submitted needs to hear what went wrong;
+ * every other tone is posted politely.
+ */
+export declare function FieldStatus({ children, tone, ...props }: FieldStatusProps): import("react").JSX.Element;

package/dist/FieldStatus/FieldStatus.doc.d.ts

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

package/dist/FieldStatus/FieldStatus.doc.js

@@ -0,0 +1,15 @@
+import "../styles/stylex.css";
+export const fieldStatusDoc = {
+  name: 'FieldStatus',
+  description: 'States the validation outcome for one control.',
+  props: [{
+    name: 'children',
+    description: 'Supplies the message text.'
+  }, {
+    name: 'tone',
+    description: 'Selects the semantic status colour.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLParagraphElement> except aria-live, children, className, and role'],
+  example: '<FieldStatus tone="danger">Enter a release number.</FieldStatus>',
+  storyId: 'core-field-status--default'
+};

package/dist/FieldStatus/FieldStatus.js

@@ -0,0 +1,68 @@
+import * as stylex from '@stylexjs/stylex';
+import { semanticTokens } from '../authoring.stylex.js';
+/*
+ * The tones are ink only — a colour, never a matched `status*Surface` fill.
+ * That is deliberate and should not be "corrected" to surface pairs. `Field`
+ * renders the identical message for the identical job, as `status*Text` on
+ * whatever surface the field already sits on, and the two have to agree
+ * wherever a form uses both. `Alert` pairs surface with text because it is a
+ * block that owns its own area; a field status is one line under a control,
+ * and filling it would put a coloured strip under every input on the page.
+ *
+ * `info` takes `colorTextSecondary` rather than `statusInfoText`: a note is
+ * not an outcome. So no unmatched status surface is introduced here, and
+ * nothing reaches for `colorAccent`.
+ */
+import "../styles/stylex.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const styles = {
+  message: {
+    kGNEyG: "x1pha0wt",
+    k1xSpc: "x78zum5",
+    kMv6JI: "xj0sio9",
+    kGuDYH: "xltg2ad",
+    kOIVth: "x1iwn5ga",
+    kb6lSQ: "xgz4m7n",
+    kLWn49: "x1ezks3f",
+    kogj98: "x1ghz6dp",
+    $$css: true
+  },
+  info: {
+    kMwMTN: "x17y7oyd",
+    $$css: true
+  },
+  success: {
+    kMwMTN: "xw2tli",
+    $$css: true
+  },
+  warning: {
+    kMwMTN: "x6rqny5",
+    $$css: true
+  },
+  danger: {
+    kMwMTN: "x8bm3zx",
+    $$css: true
+  }
+};
+
+/** Props for a validation message attached to one control. */
+
+/**
+ * States the outcome of validating one control. A `danger` message announces
+ * itself, because a reader who just submitted needs to hear what went wrong;
+ * every other tone is posted politely.
+ */
+export function FieldStatus({
+  children,
+  tone = 'info',
+  ...props
+}) {
+  const failed = tone === 'danger';
+  return /*#__PURE__*/_jsx("p", {
+    ...props,
+    "aria-live": failed ? 'assertive' : 'polite',
+    role: failed ? 'alert' : 'status',
+    ...stylex.props(styles.message, styles[tone]),
+    children: children
+  });
+}

package/dist/FieldStatus/index.d.ts

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

package/dist/FieldStatus/index.js

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

package/dist/FileInput/FileInput.d.ts

@@ -0,0 +1,10 @@
+import { type InputHTMLAttributes } from 'react';
+/** Props for choosing one or more files. */
+export interface FileInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'children' | 'className' | 'onChange' | 'type' | 'value'> {
+    readonly onFilesChange?: (files: readonly File[]) => void;
+}
+/**
+ * Chooses files through the native picker and names the current selection in
+ * text, because the file list itself is not announced by the control alone.
+ */
+export declare function FileInput({ 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, disabled, id, multiple, onFilesChange, required, ...props }: FileInputProps): import("react").JSX.Element;

package/dist/FileInput/FileInput.doc.d.ts

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

package/dist/FileInput/FileInput.doc.js

@@ -0,0 +1,12 @@
+import "../styles/stylex.css";
+export const fileInputDoc = {
+  name: 'FileInput',
+  description: 'Chooses files and names the current selection in text.',
+  props: [{
+    name: 'onFilesChange',
+    description: 'Receives the chosen files.'
+  }],
+  inheritedProps: ['InputHTMLAttributes<HTMLInputElement> except children, className, onChange, type, and value'],
+  example: '<FileInput multiple onFilesChange={setFiles} />',
+  storyId: 'core-file-input--default'
+};

package/dist/FileInput/FileInput.js

@@ -0,0 +1,74 @@
+import * as stylex from '@stylexjs/stylex';
+import { useState } from 'react';
+import { semanticTokens } from '../authoring.stylex.js';
+import { useInternationalization } from '../i18n/index.js';
+import { useFieldControl } from '../Field/index.js';
+import "../styles/stylex.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Props for choosing one or more files. */
+
+/**
+ * Chooses files through the native picker and names the current selection in
+ * text, because the file list itself is not announced by the control alone.
+ */
+export function FileInput({
+  'aria-describedby': ariaDescribedBy,
+  'aria-invalid': ariaInvalid,
+  disabled,
+  id,
+  multiple,
+  onFilesChange,
+  required,
+  ...props
+}) {
+  const field = useFieldControl();
+  const {
+    messages
+  } = useInternationalization();
+  const [names, setNames] = useState([]);
+  const describedBy = [field?.describedBy, ariaDescribedBy].filter(Boolean).join(' ') || undefined;
+  const resolvedInvalid = ariaInvalid ?? field?.invalid;
+  const invalid = resolvedInvalid !== undefined && resolvedInvalid !== false && resolvedInvalid !== 'false';
+  function handleChange(event) {
+    const files = [...(event.currentTarget.files ?? [])];
+    setNames(files.map(file => file.name));
+    onFilesChange?.(files);
+  }
+  return /*#__PURE__*/_jsxs("div", {
+    ...{
+      className: "xrvj5dj x1iwn5ga"
+    },
+    children: [/*#__PURE__*/_jsx("input", {
+      ...props,
+      "aria-describedby": describedBy,
+      "aria-invalid": resolvedInvalid,
+      disabled: disabled,
+      id: field?.controlId ?? id,
+      multiple: multiple,
+      onChange: handleChange,
+      required: required ?? field?.required,
+      ...{
+        0: {
+          className: "xavu78a x1wxkff4 x8kq9my x1jnjmdy xpxnlqs x9f619 x1y4yzzg x1ypdohk x1lliihq xj0sio9 xltg2ad xq5azjn x1ezks3f xmm8wyw x10y07nz x1qtbwip x1elc2ff x1eaenvl xxjumz xh8yej3 x48zea8 x1oulntk x609gy3 xtgyt42 xn50xp2 x15meki4 xz32tfx x1p22nma x17lds6u xnhf8v xyo1xaz x1chqbtf x1vbe3vb x3udg76 x1fggq8j x2g51b5 xebme45 x1tk4npd xjmbuqf x1b3un5j xq6i10w x1yvg9st x14j6aub x2qnady x1iz7i29 xls9q5 x1vh937k xemukag x1i1mmoj x1xawqg1 x16kuapk"
+        },
+        2: {
+          className: "xavu78a x1wxkff4 x8kq9my x1jnjmdy xpxnlqs x9f619 x1y4yzzg x1ypdohk x1lliihq xj0sio9 xltg2ad xq5azjn x1ezks3f xmm8wyw x10y07nz x1qtbwip x1elc2ff x1eaenvl xxjumz xh8yej3 x48zea8 x1oulntk x609gy3 xtgyt42 xn50xp2 x15meki4 xz32tfx x1p22nma x17lds6u xnhf8v xyo1xaz x1vbe3vb x1fggq8j x2g51b5 xebme45 x1b3un5j xq6i10w x1yvg9st x14j6aub x2qnady x1iz7i29 xls9q5 x1vh937k xemukag x1i1mmoj x1xawqg1 x16kuapk x2jf4ls xrrj95f x14uuelm xoom6zs"
+        },
+        1: {
+          className: "xavu78a x8kq9my x1jnjmdy xpxnlqs x9f619 x1y4yzzg x1ypdohk x1lliihq xj0sio9 xltg2ad xq5azjn x1ezks3f xmm8wyw x10y07nz x1qtbwip x1elc2ff x1eaenvl xxjumz xh8yej3 x48zea8 x1oulntk x609gy3 xtgyt42 x15meki4 xz32tfx x1p22nma x17lds6u x1chqbtf x1vbe3vb x3udg76 x1fggq8j x2g51b5 xebme45 x1tk4npd xjmbuqf x1b3un5j xq6i10w x1yvg9st x14j6aub x2qnady x1iz7i29 xls9q5 x1vh937k xemukag x1i1mmoj x1xawqg1 x16kuapk xcf5wgx x1v4z90s xgozkua x1r1toob"
+        },
+        3: {
+          className: "xavu78a x8kq9my x1jnjmdy xpxnlqs x9f619 x1y4yzzg x1ypdohk x1lliihq xj0sio9 xltg2ad xq5azjn x1ezks3f xmm8wyw x10y07nz x1qtbwip x1elc2ff x1eaenvl xxjumz xh8yej3 x48zea8 x1oulntk x609gy3 xtgyt42 x15meki4 xz32tfx x1p22nma x17lds6u x1vbe3vb x1fggq8j x2g51b5 xebme45 x1b3un5j xq6i10w x1yvg9st x14j6aub x2qnady x1iz7i29 xls9q5 x1vh937k xemukag x1i1mmoj x1xawqg1 x16kuapk x2jf4ls xrrj95f x14uuelm xoom6zs xcf5wgx x1v4z90s xgozkua x1r1toob"
+        }
+      }[!!disabled << 1 | !!(invalid && !disabled) << 0],
+      type: "file"
+    }), /*#__PURE__*/_jsx("p", {
+      "aria-live": "polite",
+      role: "status",
+      ...{
+        className: "x17y7oyd xj0sio9 xltg2ad xq5azjn x1ezks3f x1ghz6dp"
+      },
+      children: names.length === 0 ? messages.fileInputEmpty : names.join(', ')
+    })]
+  });
+}

package/dist/FileInput/index.d.ts

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

package/dist/FileInput/index.js

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

package/dist/FormLayout/FormLayout.d.ts

@@ -0,0 +1,14 @@
+import type { FormHTMLAttributes, ReactNode } from 'react';
+/** Column counts a form can lay its fields out in. */
+export type FormColumns = 1 | 2;
+/** Props for the grid that arranges fields and their actions. */
+export interface FormLayoutProps extends Omit<FormHTMLAttributes<HTMLFormElement>, 'children' | 'className'> {
+    readonly actions?: ReactNode;
+    readonly children: ReactNode;
+    readonly columns?: FormColumns;
+}
+/**
+ * Arranges fields and their submit actions. Two columns collapse to one when
+ * the container is narrow, so a form never forces sideways scrolling.
+ */
+export declare function FormLayout({ actions, children, columns, ...props }: FormLayoutProps): import("react").JSX.Element;

package/dist/FormLayout/FormLayout.doc.d.ts

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

package/dist/FormLayout/FormLayout.doc.js

@@ -0,0 +1,18 @@
+import "../styles/stylex.css";
+export const formLayoutDoc = {
+  name: 'FormLayout',
+  description: 'Arranges fields and their submit actions.',
+  props: [{
+    name: 'actions',
+    description: 'Places submit actions across the full width.'
+  }, {
+    name: 'children',
+    description: 'Supplies the fields.'
+  }, {
+    name: 'columns',
+    description: 'Selects one or two responsive columns.'
+  }],
+  inheritedProps: ['FormHTMLAttributes<HTMLFormElement> except children and className'],
+  example: '<FormLayout actions={<Button>Save</Button>} columns={2}>…</FormLayout>',
+  storyId: 'core-form-layout--default'
+};

package/dist/FormLayout/FormLayout.js

@@ -0,0 +1,40 @@
+import * as stylex from '@stylexjs/stylex';
+import { semanticTokens } from '../authoring.stylex.js';
+
+// The narrowest a labelled field stays readable at before two columns should
+// collapse into one. The spacing scale has no single step that measures it.
+import "../styles/stylex.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const columnMinimumWidth = `calc(${semanticTokens.spacing2xl} * 8)`;
+/** Column counts a form can lay its fields out in. */
+
+/** Props for the grid that arranges fields and their actions. */
+
+/**
+ * Arranges fields and their submit actions. Two columns collapse to one when
+ * the container is narrow, so a form never forces sideways scrolling.
+ */
+export function FormLayout({
+  actions,
+  children,
+  columns = 1,
+  ...props
+}) {
+  return /*#__PURE__*/_jsxs("form", {
+    ...props,
+    ...{
+      0: {
+        className: "x1nm4htl xrvj5dj xj0sio9 xbcxry5 x1ftrn1f"
+      },
+      1: {
+        className: "x1nm4htl xrvj5dj xj0sio9 xbcxry5 x1y6fwsi"
+      }
+    }[!!(columns === 1) << 0],
+    children: [children, actions === undefined ? null : /*#__PURE__*/_jsx("div", {
+      ...{
+        className: "x78zum5 x1a02dak x1ap6kct x1osaytk x13a6bvl"
+      },
+      children: actions
+    })]
+  });
+}

package/dist/FormLayout/index.d.ts

@@ -0,0 +1 @@
+export { FormLayout, type FormColumns, type FormLayoutProps, } from './FormLayout.js';

package/dist/FormLayout/index.js

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

package/dist/HStack/HStack.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes } from 'react';
+import type { Space } from '../Stack/index.js';
+/** Cross-axis placement a horizontal stack can apply. */
+export type HStackAlign = 'baseline' | 'center' | 'end' | 'start' | 'stretch';
+/** Main-axis distribution a horizontal stack can apply. */
+export type HStackJustify = 'between' | 'center' | 'end' | 'start';
+/** Props for a row of evenly spaced children. */
+export interface HStackProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
+    readonly align?: HStackAlign;
+    readonly gap?: Space;
+    readonly justify?: HStackJustify;
+    readonly wrap?: boolean;
+}
+/** Arranges children in a row. Use `Stack` for the vertical equivalent. */
+export declare function HStack({ align, children, gap, justify, wrap, ...props }: HStackProps): import("react").JSX.Element;

package/dist/HStack/HStack.doc.d.ts

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

package/dist/HStack/HStack.doc.js

@@ -0,0 +1,21 @@
+import "../styles/stylex.css";
+export const hStackDoc = {
+  name: 'HStack',
+  description: 'Arranges children in an evenly spaced row.',
+  props: [{
+    name: 'align',
+    description: 'Places children along the cross axis.'
+  }, {
+    name: 'gap',
+    description: 'Selects the space between children.'
+  }, {
+    name: 'justify',
+    description: 'Distributes children along the row.'
+  }, {
+    name: 'wrap',
+    description: 'Allows children to flow onto more rows.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLDivElement> except className'],
+  example: '<HStack gap="sm" justify="between">…</HStack>',
+  storyId: 'core-h-stack--default'
+};

package/dist/{components/Stack.js → HStack/HStack.js}

@@ -5,7 +5,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const styles = {
   base: {
     k1xSpc: "x78zum5",
-    kXwgrk: "xdt5ytf",
+    kXwgrk: "x1q0g3np",
+    $$css: true
+  },
+  wrap: {
+    kwnvtZ: "x1a02dak",
     $$css: true
   },
   gapXs: {
@@ -47,6 +51,26 @@ const styles = {
   alignEnd: {
     kGNEyG: "xuk3077",
     $$css: true
+  },
+  alignBaseline: {
+    kGNEyG: "x1pha0wt",
+    $$css: true
+  },
+  justifyStart: {
+    kjj79g: "x1nhvcw1",
+    $$css: true
+  },
+  justifyCenter: {
+    kjj79g: "xl56j7k",
+    $$css: true
+  },
+  justifyEnd: {
+    kjj79g: "x13a6bvl",
+    $$css: true
+  },
+  justifyBetween: {
+    kjj79g: "x1qughib",
+    $$css: true
   }
 };
 const gaps = {
@@ -61,17 +85,34 @@ const aligns = {
   stretch: styles.alignStretch,
   start: styles.alignStart,
   center: styles.alignCenter,
-  end: styles.alignEnd
+  end: styles.alignEnd,
+  baseline: styles.alignBaseline
 };
-export function Stack({
-  gap = 'md',
-  align = 'stretch',
+const justifies = {
+  start: styles.justifyStart,
+  center: styles.justifyCenter,
+  end: styles.justifyEnd,
+  between: styles.justifyBetween
+};
+
+/** Cross-axis placement a horizontal stack can apply. */
+
+/** Main-axis distribution a horizontal stack can apply. */
+
+/** Props for a row of evenly spaced children. */
+
+/** Arranges children in a row. Use `Stack` for the vertical equivalent. */
+export function HStack({
+  align = 'center',
   children,
+  gap = 'md',
+  justify = 'start',
+  wrap = false,
   ...props
 }) {
   return /*#__PURE__*/_jsx("div", {
     ...props,
-    ...stylex.props(styles.base, gaps[gap], aligns[align]),
+    ...stylex.props(styles.base, gaps[gap], aligns[align], justifies[justify], wrap && styles.wrap),
     children: children
   });
 }

package/dist/HStack/index.d.ts

@@ -0,0 +1 @@
+export { HStack, type HStackAlign, type HStackJustify, type HStackProps, } from './HStack.js';

package/dist/HStack/index.js

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

package/dist/Heading/Heading.js

@@ -6,21 +6,24 @@ const styles = {
   base: {
     kMwMTN: "x1y4yzzg",
     kMv6JI: "x69it5h",
-    k63SB2: "x1sa4947",
+    k63SB2: "x1m30uz7",
     kLWn49: "x1vslzj6",
     kogj98: "x1ghz6dp",
     $$css: true
   },
   page: {
     kGuDYH: "x18wzw5v",
+    kb6lSQ: "xc3mek0",
     $$css: true
   },
   section: {
     kGuDYH: "xfuxfq0",
+    kb6lSQ: "xc3mek0",
     $$css: true
   },
   subsection: {
     kGuDYH: "x1fkw5ar",
+    kb6lSQ: "xmkh2y5",
     $$css: true
   },
   interface: {