@misoto22/kioku-ui 0.0.0 → 0.2.0

package/dist/SelectableCard/SelectableCard.js

@@ -0,0 +1,178 @@
+import * as stylex from '@stylexjs/stylex';
+import { useState } from 'react';
+import { semanticTokens } from '../authoring.stylex.js';
+
+// Selection is a 2px accent bar pressed against the leading edge, never a
+// fill or a tinted card. `focusWidth` is this system's 2px, so the bar and
+// the focus ring stay the same weight when a theme changes it.
+import "../styles/stylex.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const selectionMark = `inset ${semanticTokens.focusWidth} 0 0 0 ${semanticTokens.colorAccent}`;
+const styles = {
+  label: {
+    kWkggS: "x1ixvsy6",
+    kVAM5u: "xilcjya",
+    kaIpWk: "x7xrhi9",
+    ksu8eU: "x1jnjmdy",
+    kMzoRj: "xpxnlqs",
+    kMwMTN: "x1y4yzzg",
+    kkrTdU: "x1ypdohk",
+    k1xSpc: "x78zum5",
+    kMv6JI: "xj0sio9",
+    kOIVth: "x1ap6kct",
+    kmVPX3: "x1cfciu7",
+    kIyJzY: "x1elc2ff",
+    k1ekBW: "xqedijg",
+    kAMwcw: "xxjumz",
+    $$css: true
+  },
+  unselected: {
+    kGVxlE: "x1gnnqk1",
+    kL3fbU: "xszm2ej",
+    kLmhY5: "x18v3itu",
+    $$css: true
+  },
+  selected: {
+    kGVxlE: "x4hvm6t",
+    $$css: true
+  },
+  disabled: {
+    kWkggS: "x19blmh3",
+    kVAM5u: "x1lnk2a9",
+    kGVxlE: "x1gnnqk1",
+    kMwMTN: "x1yx38ia",
+    kkrTdU: "xt0e3qv",
+    $$css: true
+  },
+  control: {
+    kysU6D: "xjyslct",
+    kWkggS: "xavu78a",
+    kZKoxP: "x7s8d8b",
+    kVAM5u: "x1wxkff4",
+    kaIpWk: "x8kq9my",
+    ksu8eU: "x1jnjmdy",
+    kMzoRj: "xpxnlqs",
+    kB7OPa: "x9f619",
+    k1xSpc: "x1rg5ohu",
+    kmuXW: "x2lah0s",
+    kzqmXN: "x1psh5v9",
+    keoZOQ: "xr7amlr",
+    kVAEAm: "x1n2onr6",
+    kZs9gx: "x15meki4",
+    kiEn40: "xz32tfx",
+    k7shQP: "x1p22nma",
+    kPJHz1: "x17lds6u",
+    $$css: true
+  },
+  controlSingle: {
+    kaIpWk: "xnpwncj",
+    $$css: true
+  },
+  controlCheckedSingle: {
+    kLkRvE: "x5e5nlz",
+    kgzTxl: "xdahmmw",
+    kPB484: "xaamv6x",
+    kgeoSG: "x1cpjm7i",
+    kOlAkY: "x1t94pr5",
+    k96MEf: "x1knuo7r",
+    kSJ0CW: "xfbisj7",
+    kEoFBp: "x1hmns74",
+    kcTAPf: "xbnewub",
+    $$css: true
+  },
+  controlCheckedMultiple: {
+    kgzTxl: "x1kp2kj",
+    k1cwP5: "x1y86j21",
+    kjBTDo: "x1mm7815",
+    kTJRYx: "xjfbfnl",
+    kLZeVa: "x19eq4m7",
+    kVNi9J: "x4gwt6r",
+    kH0AeE: "xek76vg",
+    kgeoSG: "x1cpjm7i",
+    kOlAkY: "xt6trzn",
+    k96MEf: "x1knuo7r",
+    kSJ0CW: "xfbisj7",
+    kEoFBp: "x1hmns74",
+    kcTAPf: "x1lpeqyt",
+    $$css: true
+  },
+  controlDisabled: {
+    kWkggS: "x19blmh3",
+    kVAM5u: "x1lnk2a9",
+    kLkRvE: "xh3cs80",
+    k1cwP5: "x1539tp4",
+    kLZeVa: "x32s4f4",
+    $$css: true
+  }
+};
+
+/** Props for a card that carries its own selection control. */
+
+/**
+ * A card that records a choice. The whole surface is the label, so a click
+ * anywhere on it selects, and `multiple` decides whether choices exclude each
+ * other. Selection is tracked in state rather than through a `:has()`
+ * selector, which the build's StyleX policy does not allow.
+ */
+export function SelectableCard({
+  checked,
+  defaultChecked = false,
+  description,
+  disabled = false,
+  label,
+  multiple = false,
+  onChange,
+  ...props
+}) {
+  const [internalChecked, setInternalChecked] = useState(defaultChecked);
+  const isChecked = checked ?? internalChecked;
+  const isSelected = isChecked && !disabled;
+  function handleChange(event) {
+    if (checked === undefined) {
+      setInternalChecked(event.currentTarget.checked);
+    }
+    onChange?.(event);
+  }
+  return /*#__PURE__*/_jsxs("label", {
+    ...stylex.props(styles.label, disabled ? styles.disabled : isSelected ? styles.selected : styles.unselected),
+    children: [/*#__PURE__*/_jsx("input", {
+      ...props,
+      checked: isChecked,
+      disabled: disabled,
+      onChange: handleChange,
+      ...stylex.props(styles.control, !multiple && styles.controlSingle, isChecked && (multiple ? styles.controlCheckedMultiple : styles.controlCheckedSingle), disabled && styles.controlDisabled),
+      type: multiple ? 'checkbox' : 'radio'
+    }), /*#__PURE__*/_jsxs("span", {
+      ...{
+        className: "x78zum5 xdt5ytf x1iwn5ga"
+      },
+      children: [/*#__PURE__*/_jsx("span", {
+        ...{
+          0: {
+            className: "x1y4yzzg xj0sio9 x1ti3rys x1jcbhmk xgz4m7n x1ezks3f"
+          },
+          2: {
+            className: "x1y4yzzg xj0sio9 x1ti3rys xgz4m7n x1ezks3f x1m30uz7"
+          },
+          1: {
+            className: "xj0sio9 x1ti3rys x1jcbhmk xgz4m7n x1ezks3f x1yx38ia"
+          },
+          3: {
+            className: "xj0sio9 x1ti3rys xgz4m7n x1ezks3f x1m30uz7 x1yx38ia"
+          }
+        }[!!isSelected << 1 | !!disabled << 0],
+        children: label
+      }), description === undefined ? null : /*#__PURE__*/_jsx("span", {
+        ...{
+          0: {
+            className: "x17y7oyd xj0sio9 xltg2ad xgz4m7n x1ezks3f"
+          },
+          1: {
+            className: "xj0sio9 xltg2ad xgz4m7n x1ezks3f x1yx38ia"
+          }
+        }[!!disabled << 0],
+        children: description
+      })]
+    })]
+  });
+}

package/dist/SelectableCard/index.d.ts

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

package/dist/SelectableCard/index.js

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

package/dist/Selector/Selector.d.ts

@@ -0,0 +1,29 @@
+import type { ReactNode, SelectHTMLAttributes } from 'react';
+/** One option in a `Selector`. */
+export interface SelectorOption {
+    readonly disabled?: boolean;
+    readonly label: ReactNode;
+    readonly value: string;
+}
+type SharedSelectorProps = Omit<SelectHTMLAttributes<HTMLSelectElement>, 'children' | 'className' | 'defaultValue' | 'onChange' | 'value'> & {
+    readonly onValueChange?: (value: string) => void;
+    readonly options: readonly SelectorOption[];
+    readonly placeholder?: string;
+};
+type ControlledSelectorProps = SharedSelectorProps & {
+    readonly defaultValue?: never;
+    readonly onValueChange: (value: string) => void;
+    readonly value: string;
+};
+type UncontrolledSelectorProps = SharedSelectorProps & {
+    readonly defaultValue?: string;
+    readonly value?: never;
+};
+/** Props for choosing one option from a closed list. */
+export type SelectorProps = ControlledSelectorProps | UncontrolledSelectorProps;
+/**
+ * Chooses one option from a closed list using the native control, so the
+ * platform supplies its own keyboard, touch, and screen-reader behaviour.
+ */
+export declare function Selector({ 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, disabled, id, onValueChange, options, placeholder, required, ...props }: SelectorProps): import("react").JSX.Element;
+export {};

package/dist/Selector/Selector.doc.d.ts

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

package/dist/Selector/Selector.doc.js

@@ -0,0 +1,24 @@
+import "../styles/stylex.css";
+export const selectorDoc = {
+  name: 'Selector',
+  description: 'Chooses one option from a closed list.',
+  props: [{
+    name: 'defaultValue',
+    description: 'Sets the initial uncontrolled value.'
+  }, {
+    name: 'onValueChange',
+    description: 'Receives the newly chosen value.'
+  }, {
+    name: 'options',
+    description: 'Supplies the options in reading order.'
+  }, {
+    name: 'placeholder',
+    description: 'Adds a disabled prompt as the first entry.'
+  }, {
+    name: 'value',
+    description: 'Controls the current value.'
+  }],
+  inheritedProps: ['SelectHTMLAttributes<HTMLSelectElement> except children, className, defaultValue, onChange, and value'],
+  example: '<Selector onValueChange={setOwner} options={owners} value={owner} />',
+  storyId: 'core-selector--default'
+};

package/dist/Selector/Selector.js

@@ -0,0 +1,83 @@
+import * as stylex from '@stylexjs/stylex';
+import { semanticTokens } from '../authoring.stylex.js';
+import { useFieldControl } from '../Field/index.js';
+import "../styles/stylex.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** One option in a `Selector`. */
+
+/** Props for choosing one option from a closed list. */
+
+/**
+ * Chooses one option from a closed list using the native control, so the
+ * platform supplies its own keyboard, touch, and screen-reader behaviour.
+ */
+export function Selector({
+  'aria-describedby': ariaDescribedBy,
+  'aria-invalid': ariaInvalid,
+  disabled,
+  id,
+  onValueChange,
+  options,
+  placeholder,
+  required,
+  ...props
+}) {
+  const field = useFieldControl();
+  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) {
+    onValueChange?.(event.currentTarget.value);
+  }
+  return /*#__PURE__*/_jsxs("span", {
+    ...{
+      0: {
+        className: "x1qjc9v5 xavu78a x1wxkff4 x8kq9my x1jnjmdy xpxnlqs x9f619 x78zum5 xr8hsnb xb3r6kr x1n2onr6 x1elc2ff xts7igz xxjumz xh8yej3 xc8z1lp x16xryy4 xfswlut xnip9g3 x1lm2vjv x12uk28n"
+      },
+      2: {
+        className: "x1qjc9v5 xavu78a x8kq9my x1jnjmdy xpxnlqs x9f619 x78zum5 xr8hsnb xb3r6kr x1n2onr6 x1elc2ff xts7igz xxjumz xh8yej3 x16xryy4 xfswlut xnip9g3 x1lm2vjv xcf5wgx x9a976t xtku8dq"
+      },
+      1: {
+        className: "x1qjc9v5 x8kq9my x1jnjmdy xpxnlqs x9f619 x78zum5 xr8hsnb xb3r6kr x1n2onr6 x1elc2ff xts7igz xxjumz xh8yej3 xc8z1lp x16xryy4 xfswlut xnip9g3 x1lm2vjv x19blmh3 x1lnk2a9 x1ieeoof"
+      },
+      3: {
+        className: "x1qjc9v5 x8kq9my x1jnjmdy xpxnlqs x9f619 x78zum5 xr8hsnb xb3r6kr x1n2onr6 x1elc2ff xts7igz xxjumz xh8yej3 x16xryy4 xfswlut xnip9g3 x1lm2vjv x9a976t x19blmh3 x1lnk2a9 x1ieeoof"
+      }
+    }[!!(invalid && !disabled) << 1 | !!disabled << 0],
+    children: [/*#__PURE__*/_jsxs("select", {
+      ...props,
+      "aria-describedby": describedBy,
+      "aria-invalid": resolvedInvalid,
+      disabled: disabled,
+      id: field?.controlId ?? id,
+      onChange: handleChange,
+      required: required ?? field?.required,
+      ...{
+        className: "xjyslct xjbqb8w xng3xce xc342km x9f619 x1y4yzzg x1ypdohk xj0sio9 x1ti3rys xgz4m7n x1ezks3f x10y07nz xbdx0pd xiw2ij1 xh8yej3 x609gy3 xtgyt42 xi5y0ii"
+      },
+      children: [placeholder === undefined ? null : /*#__PURE__*/_jsx("option", {
+        disabled: true,
+        value: "",
+        children: placeholder
+      }), options.map(({
+        disabled: optionDisabled,
+        label,
+        value: optionValue
+      }) => /*#__PURE__*/_jsx("option", {
+        disabled: optionDisabled ?? false,
+        value: optionValue,
+        children: label
+      }, optionValue))]
+    }), /*#__PURE__*/_jsx("span", {
+      "aria-hidden": "true",
+      ...{
+        0: {
+          className: "x1oklvbn x1w5tod1 xeq6m5c xuybi62 xs916ma x1plwgly x1ieyhmn x1rcf1qu xwa60dl x10rhgnt x47corl x10l6tqk x11asuhd"
+        },
+        1: {
+          className: "x1w5tod1 xeq6m5c xs916ma x1plwgly x1ieyhmn x1rcf1qu xwa60dl x10rhgnt x47corl x10l6tqk x11asuhd xwpt2ep xq3uh35"
+        }
+      }[!!disabled << 0]
+    })]
+  });
+}

package/dist/Selector/index.d.ts

@@ -0,0 +1 @@
+export { Selector, type SelectorOption, type SelectorProps } from './Selector.js';

package/dist/Selector/index.js

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

package/dist/SideNav/SideNav.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+/** Props for the vertical navigation rail. */
+export interface SideNavProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'className'> {
+    readonly children: ReactNode;
+    readonly footer?: ReactNode;
+}
+/** Holds persistent navigation beside the main content. */
+export declare function SideNav({ children, footer, ...props }: SideNavProps): import("react").JSX.Element;
+/** Props for one titled group inside a `SideNav`. */
+export interface SideNavSectionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'className' | 'title'> {
+    readonly children: ReactNode;
+    readonly title?: ReactNode;
+}
+/** Groups related destinations under an optional heading. */
+export declare function SideNavSection({ children, title, ...props }: SideNavSectionProps): import("react").JSX.Element;

package/dist/SideNav/SideNav.doc.d.ts

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

package/dist/SideNav/SideNav.doc.js

@@ -0,0 +1,29 @@
+import "../styles/stylex.css";
+export const sideNavDoc = {
+  name: 'SideNav',
+  description: 'Holds persistent navigation beside the main content.',
+  props: [{
+    name: 'children',
+    description: 'Supplies the navigation sections.'
+  }, {
+    name: 'footer',
+    description: 'Pins content to the end of the rail.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLDivElement> except children and className'],
+  example: '<SideNav><SideNavSection title="Work">…</SideNavSection></SideNav>',
+  storyId: 'core-side-nav--default'
+};
+export const sideNavSectionDoc = {
+  name: 'SideNavSection',
+  description: 'Groups related destinations under an optional heading.',
+  props: [{
+    name: 'children',
+    description: 'Supplies the destinations.'
+  }, {
+    name: 'title',
+    description: 'Names the group.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLDivElement> except children, className, and title'],
+  example: '<SideNavSection title="Work">…</SideNavSection>',
+  storyId: 'core-side-nav--default'
+};

package/dist/SideNav/SideNav.js

@@ -0,0 +1,51 @@
+import * as stylex from '@stylexjs/stylex';
+import { semanticTokens } from '../authoring.stylex.js';
+
+// A rail wide enough for two words and a glyph. The scale cannot name it, so
+// it is built from the scale rather than written as a length.
+import "../styles/stylex.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const railWidth = `calc(9 * ${semanticTokens.spacing2xl})`;
+/** Props for the vertical navigation rail. */
+
+/** Holds persistent navigation beside the main content. */
+export function SideNav({
+  children,
+  footer,
+  ...props
+}) {
+  return /*#__PURE__*/_jsxs("div", {
+    ...props,
+    ...{
+      className: "x1r2uulk x3l7yry xs916ma x1plwgly x78zum5 xdt5ytf xj0sio9 x13unpfo xdf4gn3 xgzug8x x1wkw8jr x1ernw5c"
+    },
+    children: [children, footer === undefined ? null : /*#__PURE__*/_jsx("div", {
+      ...{
+        className: "x1pe616k x4tqos1 xlyo07a xr1yuqi xgzug8x"
+      },
+      children: footer
+    })]
+  });
+}
+
+/** Props for one titled group inside a `SideNav`. */
+
+/** Groups related destinations under an optional heading. */
+export function SideNavSection({
+  children,
+  title,
+  ...props
+}) {
+  return /*#__PURE__*/_jsxs("div", {
+    ...props,
+    ...{
+      className: "x78zum5 xdt5ytf x15i1k40"
+    },
+    children: [title === undefined ? null : /*#__PURE__*/_jsx("p", {
+      ...{
+        className: "x17y7oyd x13fdfvb xnlz8j1 x1it3fuk x1m30uz7 x1di4hct x1vslzj6 x1ghz6dp x13jfld5 xyri2b x32qhjx"
+      },
+      children: title
+    }), children]
+  });
+}

package/dist/SideNav/index.d.ts

@@ -0,0 +1 @@
+export { SideNav, SideNavSection, type SideNavProps, type SideNavSectionProps, } from './SideNav.js';

package/dist/SideNav/index.js

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

package/dist/Skeleton/Skeleton.doc.js

@@ -1,7 +1,7 @@
 import "../styles/stylex.css";
 export const skeletonDoc = {
   name: 'Skeleton',
-  description: 'Displays a decorative or explicitly labelled loading placeholder with a static reduced-motion fallback.',
+  description: 'Displays a decorative or explicitly labelled loading placeholder as a still bar that never pulses.',
   props: [{
     name: 'label',
     description: 'Optionally announces what is loading.'

package/dist/Skeleton/Skeleton.js

@@ -2,7 +2,6 @@ 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 pulse = "x1vfr86i-B";
 export function Skeleton({
   label,
   ...props
@@ -14,7 +13,7 @@ export function Skeleton({
     "aria-label": label,
     role: label ? 'status' : undefined,
     ...{
-      className: "xpz12be xslpo9u xa4qsjk x125lowv x1aquc0h xsus3lq xavu78a x8kq9my xmm8wyw xh8yej3"
+      className: "xavu78a x8kq9my xsf4va3 xh8yej3"
     }
   });
 }

package/dist/Slider/Slider.d.ts

@@ -0,0 +1,27 @@
+import { type InputHTMLAttributes } from 'react';
+type SharedSliderProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'children' | 'className' | 'defaultValue' | 'onChange' | 'type' | 'value'> & {
+    readonly formatValue?: (value: number) => string;
+    readonly max?: number;
+    readonly min?: number;
+    readonly onValueChange?: (value: number) => void;
+    readonly step?: number;
+};
+type ControlledSliderProps = SharedSliderProps & {
+    readonly defaultValue?: never;
+    readonly onValueChange: (value: number) => void;
+    readonly value: number;
+};
+type UncontrolledSliderProps = SharedSliderProps & {
+    readonly defaultValue?: number;
+    readonly value?: never;
+};
+/** Props for choosing a number along a visible range. */
+export type SliderProps = ControlledSliderProps | UncontrolledSliderProps;
+/**
+ * Chooses a number along a visible range, and states where it is stopped in
+ * tabular figures beside the track. `formatValue` supplies both that figure and
+ * the spoken text, so "40 percent" can be read and announced where the raw
+ * number would not help.
+ */
+export declare function Slider({ 'aria-describedby': ariaDescribedBy, defaultValue, disabled, formatValue, id, max, min, onValueChange, step, style, value, ...props }: SliderProps): import("react").JSX.Element;
+export {};

package/dist/Slider/Slider.doc.d.ts

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

package/dist/Slider/Slider.doc.js

@@ -0,0 +1,30 @@
+import "../styles/stylex.css";
+export const sliderDoc = {
+  name: 'Slider',
+  description: 'Chooses a number along a visible range.',
+  props: [{
+    name: 'defaultValue',
+    description: 'Sets the initial uncontrolled value.'
+  }, {
+    name: 'formatValue',
+    description: 'Supplies the text shown and announced for a value.'
+  }, {
+    name: 'max',
+    description: 'Sets the upper bound of the range.'
+  }, {
+    name: 'min',
+    description: 'Sets the lower bound of the range.'
+  }, {
+    name: 'onValueChange',
+    description: 'Receives the newly chosen number.'
+  }, {
+    name: 'step',
+    description: 'Sets the increment between allowed values.'
+  }, {
+    name: 'value',
+    description: 'Controls the current number.'
+  }],
+  inheritedProps: ['InputHTMLAttributes<HTMLInputElement> except children, className, defaultValue, onChange, type, and value'],
+  example: '<Slider formatValue={(v) => `${v} percent`} onValueChange={setLevel} value={level} />',
+  storyId: 'core-slider--default'
+};