@misoto22/kioku-ui 0.0.0 → 0.2.0

package/dist/Table/Table.js

@@ -9,19 +9,31 @@ const defaultTableStyle = {
   section: undefined
 };
 const TableStyleContext = createContext(defaultTableStyle);
+
+// Two hairlines wide, so the mark reads at the same weight as the underline a
+// selected tab carries. Written as a calc over the border token rather than as
+// 2px, so a theme that draws heavier lines gets a heavier mark with them.
+const selectionRule = `inset calc(2 * ${semanticTokens.borderWidth}) 0 0 ${semanticTokens.colorAccent}`;
 const styles = {
   table: {
     kLvRdT: "x1mwwwfo",
     kMwMTN: "x1y4yzzg",
     kMv6JI: "xj0sio9",
     kGuDYH: "x1ti3rys",
+    kb6lSQ: "xgz4m7n",
+    kLWn49: "x1ezks3f",
     kzqmXN: "xh8yej3",
     $$css: true
   },
   caption: {
+    kMwMTN: "x1y4yzzg",
     kMv6JI: "x69it5h",
-    k63SB2: "x1sa4947",
+    kGuDYH: "x1fkw5ar",
+    k63SB2: "x1m30uz7",
+    kb6lSQ: "xmkh2y5",
+    kLWn49: "x1vslzj6",
     k8WAf4: "xoeao9w",
+    kg3NbH: "x1q83fih",
     k9WMMc: "x1yc453h",
     $$css: true
   },
@@ -35,15 +47,32 @@ const styles = {
     $$css: true
   },
   headerCell: {
-    kWkggS: "xavu78a",
     kMwMTN: "x17y7oyd",
-    k63SB2: "x1sa4947",
-    kg3NbH: "x1wkw8jr",
+    kMv6JI: "x69it5h",
+    kGuDYH: "xnlz8j1",
+    k63SB2: "x1jcbhmk",
+    kb6lSQ: "x1di4hct",
+    kg3NbH: "x1q83fih",
     k9WMMc: "x1yc453h",
     $$css: true
   },
   cell: {
-    kg3NbH: "x1wkw8jr",
+    kg3NbH: "x1q83fih",
+    $$css: true
+  },
+  selectedRow: {
+    kGVxlE: "x1a4tguu",
+    $$css: true
+  },
+  numericCell: {
+    kMv6JI: "x7ohnf4",
+    kcqcaj: "xss6m8b",
+    kb6lSQ: "x1kbjp2h",
+    k9WMMc: "xp4054r",
+    $$css: true
+  },
+  numericHeaderCell: {
+    k9WMMc: "xp4054r",
     $$css: true
   },
   compact: {
@@ -58,6 +87,18 @@ const styles = {
     k8WAf4: "x17uk85o",
     $$css: true
   },
+  headCompact: {
+    k8WAf4: "x10y07nz",
+    $$css: true
+  },
+  headDefault: {
+    k8WAf4: "xoeao9w",
+    $$css: true
+  },
+  headSpacious: {
+    k8WAf4: "x1lr58ck",
+    $$css: true
+  },
   rowDivider: {
     kV9P4g: "xrrqrn",
     kYdPot: "xub24xa",
@@ -65,7 +106,7 @@ const styles = {
     $$css: true
   },
   headerRowDivider: {
-    kL6WhQ: "x1k3hjl9",
+    kL6WhQ: "x1rzuj2w",
     kfdmCh: "x1w5tod1",
     kt9PQ7: "xeq6m5c",
     $$css: true
@@ -77,6 +118,11 @@ const styles = {
     $$css: true
   }
 };
+const headerDensities = {
+  compact: styles.headCompact,
+  default: styles.headDefault,
+  spacious: styles.headSpacious
+};
 function usesRowDividers(dividers) {
   return dividers === 'rows' || dividers === 'grid';
 }
@@ -98,7 +144,7 @@ export function Table({
     children: /*#__PURE__*/_jsx("table", {
       ...props,
       ...{
-        className: "x1mwwwfo x1y4yzzg xj0sio9 x1ti3rys xh8yej3"
+        className: "x1mwwwfo x1y4yzzg xj0sio9 x1ti3rys xgz4m7n x1ezks3f xh8yej3"
       },
       children: children
     })
@@ -111,7 +157,7 @@ export function TableCaption({
   return /*#__PURE__*/_jsx("caption", {
     ...props,
     ...{
-      className: "x69it5h x1sa4947 xoeao9w x1yc453h"
+      className: "x1y4yzzg x69it5h x1fkw5ar x1m30uz7 xmkh2y5 x1vslzj6 xoeao9w x1q83fih x1yc453h"
     },
     children: children
   });
@@ -150,6 +196,7 @@ export function TableBody({
 }
 export function TableRow({
   children,
+  selected,
   ...props
 }) {
   const {
@@ -158,23 +205,39 @@ export function TableRow({
   } = useContext(TableStyleContext);
   return /*#__PURE__*/_jsx("tr", {
     ...props,
+    ...(selected === undefined ? {} : {
+      'aria-selected': selected
+    }),
     ...{
       0: {},
-      2: {
+      4: {
         className: "x1elc2ff x15406qy xxjumz xx3trin x12y31ib x15nsxps"
       },
-      1: {
+      2: {
         className: "xrrqrn xub24xa xbg14n3"
       },
-      3: {
+      6: {
         className: "x1elc2ff x15406qy xxjumz xx3trin x12y31ib x15nsxps xrrqrn xub24xa xbg14n3"
+      },
+      1: {
+        className: "x1a4tguu"
+      },
+      5: {
+        className: "x1elc2ff x15406qy xxjumz xx3trin x12y31ib x15nsxps x1a4tguu"
+      },
+      3: {
+        className: "xrrqrn xub24xa xbg14n3 x1a4tguu"
+      },
+      7: {
+        className: "x1elc2ff x15406qy xxjumz xx3trin x12y31ib x15nsxps xrrqrn xub24xa xbg14n3 x1a4tguu"
       }
-    }[!!(section === 'body') << 1 | !!(section === 'body' && usesRowDividers(dividers)) << 0],
+    }[!!(section === 'body') << 2 | !!(section === 'body' && usesRowDividers(dividers)) << 1 | !!(section === 'body' && selected === true) << 0],
     children: children
   });
 }
 export function TableHeaderCell({
   children,
+  numeric = false,
   scope = 'col',
   ...props
 }) {
@@ -185,12 +248,13 @@ export function TableHeaderCell({
   return /*#__PURE__*/_jsx("th", {
     ...props,
     scope: scope,
-    ...stylex.props(styles.headerCell, styles[density], usesRowDividers(dividers) && styles.headerRowDivider, usesColumnDividers(dividers) && styles.columnDivider),
+    ...stylex.props(styles.headerCell, headerDensities[density], numeric && styles.numericHeaderCell, styles.headerRowDivider, usesColumnDividers(dividers) && styles.columnDivider),
     children: children
   });
 }
 export function TableCell({
   children,
+  numeric = false,
   ...props
 }) {
   const {
@@ -199,7 +263,7 @@ export function TableCell({
   } = useContext(TableStyleContext);
   return /*#__PURE__*/_jsx("td", {
     ...props,
-    ...stylex.props(styles.cell, styles[density], usesColumnDividers(dividers) && styles.columnDivider),
+    ...stylex.props(styles.cell, styles[density], numeric && styles.numericCell, usesColumnDividers(dividers) && styles.columnDivider),
     children: children
   });
 }

package/dist/Text/Text.js

@@ -7,6 +7,7 @@ const styles = {
     kMwMTN: "x1y4yzzg",
     kMv6JI: "xj0sio9",
     k63SB2: "x1jcbhmk",
+    kb6lSQ: "xgz4m7n",
     kLWn49: "x1ezks3f",
     kogj98: "x1ghz6dp",
     $$css: true

package/dist/TextArea/TextArea.js

@@ -1,8 +1,13 @@
 import * as stylex from '@stylexjs/stylex';
 import { semanticTokens } from '../authoring.stylex.js';
 import { useFieldControl } from '../Field/index.js';
+
+// Four lines of body copy plus the control's own block padding. Written as the
+// relationship rather than as a length, so the field still opens on four lines
+// when density or type size moves under it.
 import "../styles/stylex.css";
 import { jsx as _jsx } from "react/jsx-runtime";
+const minimumHeight = `calc(4 * ${semanticTokens.fontSizeMd} * ${semanticTokens.lineHeightBody} + 2 * ${semanticTokens.spacingXs})`;
 export function TextArea({
   'aria-describedby': ariaDescribedBy,
   'aria-invalid': ariaInvalid,
@@ -31,16 +36,16 @@ export function TextArea({
     required: required ?? field?.required,
     ...{
       0: {
-        className: "x1ixvsy6 x9f619 xilcjya x8kq9my x1jnjmdy xpxnlqs x1y4yzzg xj0sio9 x1ti3rys x1ezks3f x1edz59j x10y07nz x1qtbwip x1e4qbc8 x48zea8 x1oulntk x609gy3 xn50xp2 x15meki4 xz32tfx x1p22nma x17lds6u xnhf8v xyo1xaz"
+        className: "xavu78a x9f619 x1wxkff4 x8kq9my x1jnjmdy xpxnlqs x1y4yzzg xj0sio9 x1ti3rys xgz4m7n x1ezks3f xolsukp x288g5 x10y07nz x1qtbwip x1elc2ff x1eaenvl xxjumz x1e4qbc8 x48zea8 x1oulntk x609gy3 xn50xp2 x15meki4 xz32tfx x1p22nma x17lds6u xnhf8v xyo1xaz"
       },
       2: {
-        className: "x9f619 xilcjya x8kq9my x1jnjmdy xpxnlqs xj0sio9 x1ti3rys x1ezks3f x1edz59j x10y07nz x1qtbwip x1e4qbc8 x48zea8 x1oulntk x609gy3 xn50xp2 x15meki4 xz32tfx x1p22nma x17lds6u xnhf8v xyo1xaz xavu78a x1y4yzzg"
+        className: "x9f619 x8kq9my x1jnjmdy xpxnlqs xj0sio9 x1ti3rys xgz4m7n x1ezks3f xolsukp x288g5 x10y07nz x1qtbwip x1elc2ff x1eaenvl xxjumz x1e4qbc8 x48zea8 x1oulntk x609gy3 xn50xp2 x15meki4 xz32tfx x1p22nma x17lds6u xnhf8v xyo1xaz x1ixvsy6 xilcjya x1y4yzzg"
       },
       1: {
-        className: "x1ixvsy6 x9f619 x8kq9my x1jnjmdy xpxnlqs x1y4yzzg xj0sio9 x1ti3rys x1ezks3f x1edz59j x10y07nz x1qtbwip x1e4qbc8 x48zea8 x1oulntk x609gy3 x15meki4 xz32tfx x1p22nma x17lds6u xcf5wgx x1v4z90s xgozkua x1r1toob"
+        className: "xavu78a x9f619 x8kq9my x1jnjmdy xpxnlqs x1y4yzzg xj0sio9 x1ti3rys xgz4m7n x1ezks3f xolsukp x288g5 x10y07nz x1qtbwip x1elc2ff x1eaenvl xxjumz x1e4qbc8 x48zea8 x1oulntk x609gy3 x15meki4 xz32tfx x1p22nma x17lds6u xcf5wgx x1v4z90s xgozkua x1r1toob"
       },
       3: {
-        className: "x9f619 x8kq9my x1jnjmdy xpxnlqs xj0sio9 x1ti3rys x1ezks3f x1edz59j x10y07nz x1qtbwip x1e4qbc8 x48zea8 x1oulntk x609gy3 x15meki4 xz32tfx x1p22nma x17lds6u xavu78a x1y4yzzg xcf5wgx x1v4z90s xgozkua x1r1toob"
+        className: "x9f619 x8kq9my x1jnjmdy xpxnlqs xj0sio9 x1ti3rys xgz4m7n x1ezks3f xolsukp x288g5 x10y07nz x1qtbwip x1elc2ff x1eaenvl xxjumz x1e4qbc8 x48zea8 x1oulntk x609gy3 x15meki4 xz32tfx x1p22nma x17lds6u x1ixvsy6 x1y4yzzg xcf5wgx x1v4z90s xgozkua x1r1toob"
       }
     }[!!(readOnly && !disabled) << 1 | !!(isInvalid && !disabled) << 0]
   });

package/dist/TextInput/TextInput.js

@@ -32,16 +32,16 @@ export function TextInput({
     required: required ?? field?.required,
     ...{
       0: {
-        className: "x1ixvsy6 x9f619 xilcjya x8kq9my x1jnjmdy xpxnlqs x1y4yzzg xj0sio9 x1ti3rys xr8hsnb x1ezks3f x10y07nz x1qtbwip x1e4qbc8 x48zea8 x1oulntk x609gy3 xn50xp2 x15meki4 xz32tfx x1p22nma x17lds6u xnhf8v xyo1xaz"
+        className: "xavu78a x9f619 x1wxkff4 x8kq9my x1jnjmdy xpxnlqs x1y4yzzg xj0sio9 x1ti3rys xgz4m7n xr8hsnb x1ezks3f x10y07nz x1qtbwip x1elc2ff x1eaenvl xxjumz x1e4qbc8 x48zea8 x1oulntk x609gy3 xn50xp2 x15meki4 xz32tfx x1p22nma x17lds6u xnhf8v xyo1xaz"
       },
       2: {
-        className: "x9f619 xilcjya x8kq9my x1jnjmdy xpxnlqs xj0sio9 x1ti3rys xr8hsnb x1ezks3f x10y07nz x1qtbwip x1e4qbc8 x48zea8 x1oulntk x609gy3 xn50xp2 x15meki4 xz32tfx x1p22nma x17lds6u xnhf8v xyo1xaz xavu78a x1y4yzzg"
+        className: "x9f619 x8kq9my x1jnjmdy xpxnlqs xj0sio9 x1ti3rys xgz4m7n xr8hsnb x1ezks3f x10y07nz x1qtbwip x1elc2ff x1eaenvl xxjumz x1e4qbc8 x48zea8 x1oulntk x609gy3 xn50xp2 x15meki4 xz32tfx x1p22nma x17lds6u xnhf8v xyo1xaz x1ixvsy6 xilcjya x1y4yzzg"
       },
       1: {
-        className: "x1ixvsy6 x9f619 x8kq9my x1jnjmdy xpxnlqs x1y4yzzg xj0sio9 x1ti3rys xr8hsnb x1ezks3f x10y07nz x1qtbwip x1e4qbc8 x48zea8 x1oulntk x609gy3 x15meki4 xz32tfx x1p22nma x17lds6u xcf5wgx x1v4z90s xgozkua x1r1toob"
+        className: "xavu78a x9f619 x8kq9my x1jnjmdy xpxnlqs x1y4yzzg xj0sio9 x1ti3rys xgz4m7n xr8hsnb x1ezks3f x10y07nz x1qtbwip x1elc2ff x1eaenvl xxjumz x1e4qbc8 x48zea8 x1oulntk x609gy3 x15meki4 xz32tfx x1p22nma x17lds6u xcf5wgx x1v4z90s xgozkua x1r1toob"
       },
       3: {
-        className: "x9f619 x8kq9my x1jnjmdy xpxnlqs xj0sio9 x1ti3rys xr8hsnb x1ezks3f x10y07nz x1qtbwip x1e4qbc8 x48zea8 x1oulntk x609gy3 x15meki4 xz32tfx x1p22nma x17lds6u xavu78a x1y4yzzg xcf5wgx x1v4z90s xgozkua x1r1toob"
+        className: "x9f619 x8kq9my x1jnjmdy xpxnlqs xj0sio9 x1ti3rys xgz4m7n xr8hsnb x1ezks3f x10y07nz x1qtbwip x1elc2ff x1eaenvl xxjumz x1e4qbc8 x48zea8 x1oulntk x609gy3 x15meki4 xz32tfx x1p22nma x17lds6u x1ixvsy6 x1y4yzzg xcf5wgx x1v4z90s xgozkua x1r1toob"
       }
     }[!!(readOnly && !disabled) << 1 | !!(isInvalid && !disabled) << 0],
     type: type

package/dist/Thumbnail/Thumbnail.d.ts

@@ -0,0 +1,15 @@
+import { type ImgHTMLAttributes } from 'react';
+/** Sizes a thumbnail can occupy. */
+export type ThumbnailSize = 'sm' | 'md' | 'lg';
+/** Props for a small bounded preview image. */
+export interface ThumbnailProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'children' | 'className' | 'height' | 'width'> {
+    readonly alt: string;
+    readonly fallback?: string;
+    readonly size?: ThumbnailSize;
+    readonly src: string;
+}
+/**
+ * Shows a small bounded preview. A failed image degrades to text rather than
+ * a broken-image glyph, because the alternative text is the content.
+ */
+export declare function Thumbnail({ alt, fallback, size, src, ...props }: ThumbnailProps): import("react").JSX.Element;

package/dist/Thumbnail/Thumbnail.doc.d.ts

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

package/dist/Thumbnail/Thumbnail.doc.js

@@ -0,0 +1,21 @@
+import "../styles/stylex.css";
+export const thumbnailDoc = {
+  name: 'Thumbnail',
+  description: 'Shows a small bounded preview that degrades to text.',
+  props: [{
+    name: 'alt',
+    description: 'Describes the image for assistive technology.'
+  }, {
+    name: 'fallback',
+    description: 'Replaces the alt text when loading fails.'
+  }, {
+    name: 'size',
+    description: 'Selects the square size.'
+  }, {
+    name: 'src',
+    description: 'Points at the image to show.'
+  }],
+  inheritedProps: ['ImgHTMLAttributes<HTMLImageElement> except children, className, height, and width'],
+  example: '<Thumbnail alt="Release cover" src="/cover.png" />',
+  storyId: 'core-thumbnail--default'
+};

package/dist/Thumbnail/Thumbnail.js

@@ -0,0 +1,95 @@
+import * as stylex from '@stylexjs/stylex';
+import { useState } from 'react';
+import { semanticTokens } from '../authoring.stylex.js';
+
+// A preview is measured in control heights so the ladder stays a ladder:
+// one control tall, two, three. The spacing scale bends with density; a
+// picture box must not.
+import "../styles/stylex.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const previewMedium = `calc(2 * ${semanticTokens.sizeControlLg})`;
+const previewLarge = `calc(3 * ${semanticTokens.sizeControlLg})`;
+const styles = {
+  frame: {
+    kGNEyG: "x6s0dn4",
+    kWkggS: "xavu78a",
+    kVAM5u: "xilcjya",
+    kaIpWk: "x8kq9my",
+    ksu8eU: "x1jnjmdy",
+    kMzoRj: "xpxnlqs",
+    k1xSpc: "x3nfvp2",
+    kmuXW: "x2lah0s",
+    kjj79g: "xl56j7k",
+    kVQacm: "xb3r6kr",
+    $$css: true
+  },
+  sm: {
+    kZKoxP: "xscltuj",
+    kzqmXN: "x1089um4",
+    $$css: true
+  },
+  md: {
+    kZKoxP: "x2w321o",
+    kzqmXN: "xfiz8u9",
+    $$css: true
+  },
+  lg: {
+    kZKoxP: "x8z4fk5",
+    kzqmXN: "x1lxtv3p",
+    $$css: true
+  },
+  image: {
+    k1xSpc: "x1lliihq",
+    kZKoxP: "x5yr21d",
+    kVIFPx: "xl1xv1r",
+    kzqmXN: "xh8yej3",
+    $$css: true
+  },
+  fallback: {
+    kMwMTN: "x17y7oyd",
+    kMv6JI: "x69it5h",
+    kGuDYH: "xnlz8j1",
+    kb6lSQ: "x1di4hct",
+    kLWn49: "x1ezks3f",
+    kmVPX3: "x1tkv3ku",
+    k9WMMc: "x2b8uid",
+    $$css: true
+  }
+};
+
+/** Sizes a thumbnail can occupy. */
+
+/** Props for a small bounded preview image. */
+
+/**
+ * Shows a small bounded preview. A failed image degrades to text rather than
+ * a broken-image glyph, because the alternative text is the content.
+ */
+export function Thumbnail({
+  alt,
+  fallback,
+  size = 'md',
+  src,
+  ...props
+}) {
+  const [failed, setFailed] = useState(false);
+  return /*#__PURE__*/_jsx("span", {
+    ...stylex.props(styles.frame, styles[size]),
+    children: failed ? /*#__PURE__*/_jsx("span", {
+      ...{
+        className: "x17y7oyd x69it5h xnlz8j1 x1di4hct x1ezks3f x1tkv3ku x2b8uid"
+      },
+      children: fallback ?? alt
+    }) : /*#__PURE__*/_jsx("img", {
+      ...props,
+      alt: alt,
+      onError: () => {
+        setFailed(true);
+      },
+      src: src,
+      ...{
+        className: "x1lliihq x5yr21d xl1xv1r xh8yej3"
+      }
+    })
+  });
+}

package/dist/Thumbnail/index.d.ts

@@ -0,0 +1 @@
+export { Thumbnail, type ThumbnailProps, type ThumbnailSize, } from './Thumbnail.js';

package/dist/Thumbnail/index.js

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

package/dist/TimeInput/TimeInput.d.ts

@@ -0,0 +1,5 @@
+import { type TemporalInputProps } from '../DateInput/index.js';
+/** Props for a time field. */
+export type TimeInputProps = TemporalInputProps;
+/** Accepts one time of day, exchanged as an ISO `HH:MM` string. */
+export declare function TimeInput(props: TimeInputProps): import("react").JSX.Element;

package/dist/TimeInput/TimeInput.doc.d.ts

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

package/dist/TimeInput/TimeInput.doc.js

@@ -0,0 +1,18 @@
+import "../styles/stylex.css";
+export const timeInputDoc = {
+  name: 'TimeInput',
+  description: 'Accepts one time of day as an ISO string.',
+  props: [{
+    name: 'defaultValue',
+    description: 'Sets the initial uncontrolled value.'
+  }, {
+    name: 'onValueChange',
+    description: 'Receives the ISO string.'
+  }, {
+    name: 'value',
+    description: 'Controls the current ISO string.'
+  }],
+  inheritedProps: ['InputHTMLAttributes<HTMLInputElement> except children, className, defaultValue, onChange, type, and value'],
+  example: '<TimeInput onValueChange={setValue} value={value} />',
+  storyId: 'core-time-input--default'
+};

package/dist/TimeInput/TimeInput.js

@@ -0,0 +1,12 @@
+import { TemporalInput } from '../DateInput/index.js';
+
+/** Props for a time field. */
+import "../styles/stylex.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Accepts one time of day, exchanged as an ISO `HH:MM` string. */
+export function TimeInput(props) {
+  return /*#__PURE__*/_jsx(TemporalInput, {
+    ...props,
+    type: "time"
+  });
+}

package/dist/TimeInput/index.d.ts

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

package/dist/TimeInput/index.js

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

package/dist/Timestamp/Timestamp.d.ts

@@ -0,0 +1,11 @@
+import type { TimeHTMLAttributes } from 'react';
+/** Props for a machine-readable point in time. */
+export interface TimestampProps extends Omit<TimeHTMLAttributes<HTMLTimeElement>, 'children' | 'className' | 'dateTime'> {
+    readonly format?: (value: Date) => string;
+    readonly value: Date | string;
+}
+/**
+ * Shows a point in time with its machine-readable value attached, so the date
+ * a reader sees and the one a parser reads cannot drift apart.
+ */
+export declare function Timestamp({ format, value, ...props }: TimestampProps): import("react").JSX.Element;

package/dist/Timestamp/Timestamp.doc.d.ts

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

package/dist/Timestamp/Timestamp.doc.js

@@ -0,0 +1,15 @@
+import "../styles/stylex.css";
+export const timestampDoc = {
+  name: 'Timestamp',
+  description: 'Shows a point in time with its machine-readable value.',
+  props: [{
+    name: 'format',
+    description: 'Builds the text a reader sees.'
+  }, {
+    name: 'value',
+    description: 'Supplies the date to show.'
+  }],
+  inheritedProps: ['TimeHTMLAttributes<HTMLTimeElement> except children, className, and dateTime'],
+  example: '<Timestamp value="2026-08-18T09:30:00Z" />',
+  storyId: 'core-timestamp--default'
+};

package/dist/Timestamp/Timestamp.js

@@ -0,0 +1,33 @@
+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 machine-readable point in time. */
+
+const defaultFormat = value => value.toLocaleString(undefined, {
+  dateStyle: 'medium',
+  timeStyle: 'short'
+});
+
+/**
+ * Shows a point in time with its machine-readable value attached, so the date
+ * a reader sees and the one a parser reads cannot drift apart.
+ */
+export function Timestamp({
+  format = defaultFormat,
+  value,
+  ...props
+}) {
+  const date = typeof value === 'string' ? new Date(value) : value;
+  const valid = !Number.isNaN(date.getTime());
+  return /*#__PURE__*/_jsx("time", {
+    ...props,
+    ...(valid ? {
+      dateTime: date.toISOString()
+    } : {}),
+    ...{
+      className: "x17y7oyd x7ohnf4 xltg2ad xss6m8b x1kbjp2h x1ezks3f"
+    },
+    children: valid ? format(date) : String(value)
+  });
+}

package/dist/Timestamp/index.d.ts

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

package/dist/Timestamp/index.js

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

package/dist/Toast/Toast.d.ts

@@ -0,0 +1,36 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import type { StatusTone } from '../Badge/index.js';
+/** Props for one notification surface. */
+export interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'className' | 'role' | 'title'> {
+    readonly action?: ReactNode;
+    readonly description?: ReactNode;
+    readonly title: ReactNode;
+    readonly tone?: StatusTone;
+}
+/** Renders one notification. Use `useToast` rather than placing these by hand. */
+export declare function Toast({ action, description, title, tone, ...props }: ToastProps): import("react").JSX.Element;
+/** A notification request handed to `useToast().show`. */
+export interface ToastOptions {
+    readonly action?: ReactNode;
+    readonly description?: ReactNode;
+    readonly duration?: number;
+    readonly title: ReactNode;
+    readonly tone?: StatusTone;
+}
+/** The notification queue exposed to descendants. */
+export interface ToastContextValue {
+    readonly dismiss: (id: string) => void;
+    readonly show: (toast: ToastOptions) => string;
+}
+/** Props for the notification queue host. */
+export interface ToastProviderProps {
+    readonly children: ReactNode;
+    readonly label?: string;
+}
+/**
+ * Hosts the notification queue and its live region. Place one near the root of
+ * a host application; notifications are requested through `useToast`.
+ */
+export declare function ToastProvider({ children, label, }: ToastProviderProps): import("react").JSX.Element;
+/** Reads the notification queue. Throws when no `ToastProvider` is above it. */
+export declare function useToast(): ToastContextValue;

package/dist/Toast/Toast.doc.d.ts

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

package/dist/Toast/Toast.doc.js

@@ -0,0 +1,35 @@
+import "../styles/stylex.css";
+export const toastDoc = {
+  name: 'Toast',
+  description: 'Renders one transient notification.',
+  props: [{
+    name: 'action',
+    description: 'Places a follow-up action in the notification.'
+  }, {
+    name: 'description',
+    description: 'Adds detail under the title.'
+  }, {
+    name: 'title',
+    description: 'States what happened.'
+  }, {
+    name: 'tone',
+    description: 'Selects a semantic status colour.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLDivElement> except children, className, role, and title'],
+  example: '<Toast title="Draft saved" tone="success" />',
+  storyId: 'core-toast--default'
+};
+export const toastProviderDoc = {
+  name: 'ToastProvider',
+  description: 'Hosts the notification queue and its live region.',
+  props: [{
+    name: 'children',
+    description: 'Supplies the tree that can raise toasts.'
+  }, {
+    name: 'label',
+    description: 'Names the live region for assistive technology.'
+  }],
+  inheritedProps: ['None; ToastProvider owns its live region'],
+  example: '<ToastProvider>{app}</ToastProvider>',
+  storyId: 'core-toast-provider--default'
+};