@misoto22/kioku-ui 0.0.0 → 0.2.0

package/dist/RadioList/RadioList.doc.js

@@ -0,0 +1,24 @@
+import "../styles/stylex.css";
+export const radioListDoc = {
+  name: 'RadioList',
+  description: 'Offers a set of mutually exclusive choices.',
+  props: [{
+    name: 'defaultValue',
+    description: 'Sets the initial uncontrolled choice.'
+  }, {
+    name: 'legend',
+    description: 'States the question the options answer.'
+  }, {
+    name: 'onValueChange',
+    description: 'Receives the newly chosen value.'
+  }, {
+    name: 'options',
+    description: 'Supplies the choices in reading order.'
+  }, {
+    name: 'value',
+    description: 'Controls the current choice.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLFieldSetElement> except children, className, defaultValue, and onChange'],
+  example: '<RadioList legend="Visibility" onValueChange={setScope} options={scopes} value={scope} />',
+  storyId: 'core-radio-list--default'
+};

package/dist/RadioList/RadioList.js

@@ -0,0 +1,130 @@
+import * as stylex from '@stylexjs/stylex';
+import { useId, useState } from 'react';
+import { semanticTokens } from '../authoring.stylex.js';
+
+// The same block and the same centring `CheckboxInput` uses: one micro-control
+// tall, sitting on the first line of its label rather than on the label's whole
+// box, so a radio and a checkbox in the same form line up and a wrapped label
+// does not drag the dot downwards. Written as a relationship so a density
+// change carries both.
+import "../styles/stylex.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const dotSize = semanticTokens.spacingLg;
+const dotFirstLineOffset = `calc((${semanticTokens.fontSizeMd} * ${semanticTokens.lineHeightBody} - ${dotSize}) / 2)`;
+const styles = {
+  label: {
+    kMv6JI: "xj0sio9",
+    kGuDYH: "x1ti3rys",
+    kb6lSQ: "xq5azjn",
+    kLWn49: "x1ezks3f",
+    kIyJzY: "x1elc2ff",
+    k1ekBW: "xt3l3uh",
+    kAMwcw: "xxjumz",
+    $$css: true
+  },
+  labelChosen: {
+    kMwMTN: "x1y4yzzg",
+    k63SB2: "x1m30uz7",
+    $$css: true
+  },
+  labelClear: {
+    kMwMTN: "x17y7oyd",
+    k63SB2: "x1jcbhmk",
+    $$css: true
+  },
+  labelDisabled: {
+    kMwMTN: "x1yx38ia",
+    k63SB2: "x1jcbhmk",
+    $$css: true
+  }
+};
+
+/** One mutually exclusive choice. */
+
+/** Props for a set of mutually exclusive choices. */
+
+/**
+ * Offers mutually exclusive choices. It emits a `fieldset` with a `legend`, so
+ * assistive technology announces the question before the answers.
+ */
+export function RadioList({
+  defaultValue,
+  legend,
+  onValueChange,
+  options,
+  value,
+  ...props
+}) {
+  const name = useId();
+  const [internalValue, setInternalValue] = useState(defaultValue ?? '');
+  const selected = value ?? internalValue;
+  return /*#__PURE__*/_jsxs("fieldset", {
+    ...props,
+    ...{
+      className: "xng3xce xc342km x78zum5 xdt5ytf xj0sio9 x1ap6kct x1ghz6dp x1717udv"
+    },
+    children: [/*#__PURE__*/_jsx("legend", {
+      ...{
+        className: "x17y7oyd x69it5h xnlz8j1 x1m30uz7 x1di4hct x1vslzj6 x11dva6t x1717udv"
+      },
+      children: legend
+    }), options.map(({
+      description,
+      disabled,
+      label,
+      value: optionValue
+    }) => {
+      const isChosen = selected === optionValue;
+      return /*#__PURE__*/_jsxs("label", {
+        ...{
+          className: "x1cy8zhl x78zum5 x1ap6kct"
+        },
+        children: [/*#__PURE__*/_jsx("input", {
+          checked: isChosen,
+          disabled: disabled ?? false,
+          name: name,
+          onChange: () => {
+            if (value === undefined) {
+              setInternalValue(optionValue);
+            }
+            onValueChange?.(optionValue);
+          },
+          value: optionValue,
+          ...{
+            0: {
+              className: "xjyslct xavu78a x7s8d8b x1wxkff4 xnpwncj x1jnjmdy xpxnlqs x9f619 x1ypdohk x1rg5ohu x2lah0s x1psh5v9 xat24cr x1ktc51x xrxpjvj x1n2onr6 x1elc2ff xts7igz xxjumz x48zea8 x1oulntk xtgyt42 x18v3itu x15meki4 xz32tfx x1p22nma x17lds6u"
+            },
+            2: {
+              className: "xjyslct xavu78a x7s8d8b x1wxkff4 xnpwncj x1jnjmdy xpxnlqs x9f619 x1ypdohk x1rg5ohu x2lah0s x1psh5v9 xat24cr x1ktc51x xrxpjvj x1n2onr6 x1elc2ff xts7igz xxjumz x48zea8 x1oulntk xtgyt42 x18v3itu x15meki4 xz32tfx x1p22nma x17lds6u x5e5nlz xdahmmw xaamv6x x1cpjm7i x1t94pr5 x1knuo7r xfbisj7 x1hmns74 xbnewub"
+            },
+            1: {
+              className: "xjyslct xavu78a x7s8d8b x1wxkff4 xnpwncj x1jnjmdy xpxnlqs x9f619 x1ypdohk x1rg5ohu x2lah0s x1psh5v9 xat24cr x1ktc51x xrxpjvj x1n2onr6 x1elc2ff xts7igz xxjumz x48zea8 x1oulntk xtgyt42 x18v3itu x15meki4 xz32tfx x1p22nma x17lds6u xh3cs80"
+            },
+            3: {
+              className: "xjyslct xavu78a x7s8d8b x1wxkff4 xnpwncj x1jnjmdy xpxnlqs x9f619 x1ypdohk x1rg5ohu x2lah0s x1psh5v9 xat24cr x1ktc51x xrxpjvj x1n2onr6 x1elc2ff xts7igz xxjumz x48zea8 x1oulntk xtgyt42 x18v3itu x15meki4 xz32tfx x1p22nma x17lds6u xdahmmw xaamv6x x1cpjm7i x1t94pr5 x1knuo7r xfbisj7 x1hmns74 xbnewub xh3cs80"
+            }
+          }[!!isChosen << 1 | !!(isChosen && disabled) << 0],
+          type: "radio"
+        }), /*#__PURE__*/_jsxs("span", {
+          ...{
+            className: "x78zum5 xdt5ytf x1iwn5ga"
+          },
+          children: [/*#__PURE__*/_jsx("span", {
+            ...stylex.props(styles.label, disabled ? styles.labelDisabled : isChosen ? styles.labelChosen : styles.labelClear),
+            children: label
+          }), description === undefined ? null : /*#__PURE__*/_jsx("span", {
+            ...{
+              0: {
+                className: "x1mgtvnk xj0sio9 xltg2ad xgz4m7n x1ezks3f"
+              },
+              1: {
+                className: "xj0sio9 xltg2ad xgz4m7n x1ezks3f x1yx38ia"
+              }
+            }[!!disabled << 0],
+            children: description
+          })]
+        })]
+      }, optionValue);
+    })]
+  });
+}

package/dist/RadioList/index.d.ts

@@ -0,0 +1 @@
+export { RadioList, type RadioListProps, type RadioOption } from './RadioList.js';

package/dist/RadioList/index.js

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

package/dist/Resizable/Resizable.d.ts

@@ -0,0 +1,18 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+/** Props for a two-panel split whose divider can be moved. */
+export interface ResizableProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'className'> {
+    readonly children: ReactNode;
+    readonly handleLabel?: string;
+    readonly max?: number;
+    readonly min?: number;
+    readonly onSizeChange?: (size: number) => void;
+    readonly panel: ReactNode;
+    readonly size?: number;
+    readonly step?: number;
+}
+/**
+ * Splits a region into a sized panel and the rest. The divider is a real
+ * `separator` control, so arrow keys move it — a drag handle that only
+ * responds to a pointer is unusable by keyboard.
+ */
+export declare function Resizable({ children, handleLabel, max, min, onSizeChange, panel, size, step, ...props }: ResizableProps): import("react").JSX.Element;

package/dist/Resizable/Resizable.doc.d.ts

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

package/dist/Resizable/Resizable.doc.js

@@ -0,0 +1,33 @@
+import "../styles/stylex.css";
+export const resizableDoc = {
+  name: 'Resizable',
+  description: 'Splits a region into a sized panel and the rest.',
+  props: [{
+    name: 'children',
+    description: 'Supplies the content beside the panel.'
+  }, {
+    name: 'handleLabel',
+    description: 'Names the divider control.'
+  }, {
+    name: 'max',
+    description: 'Caps how wide the panel can grow.'
+  }, {
+    name: 'min',
+    description: 'Sets how narrow the panel can shrink.'
+  }, {
+    name: 'onSizeChange',
+    description: 'Receives the next panel width.'
+  }, {
+    name: 'panel',
+    description: 'Supplies the sized panel content.'
+  }, {
+    name: 'size',
+    description: 'Controls the panel width in pixels.'
+  }, {
+    name: 'step',
+    description: 'Sets how far each arrow key moves the divider.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLDivElement> except children and className'],
+  example: '<Resizable panel={<SideNav>…</SideNav>}>{page}</Resizable>',
+  storyId: 'core-resizable--default'
+};

package/dist/Resizable/Resizable.js

@@ -0,0 +1,100 @@
+import * as stylex from '@stylexjs/stylex';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { semanticTokens } from '../authoring.stylex.js';
+import { scrolling } from '../scrolling/index.js';
+import { ResizeHandle } from '../ResizeHandle/index.js';
+import "../styles/stylex.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const styles = {
+  panel: {
+    kmuXW: "x2lah0s",
+    k7Eaqz: "xeuugli",
+    kVQacm: "xysyzu8",
+    $$css: true
+  },
+  rest: {
+    kzQI83: "x1iyjqo2",
+    k7Eaqz: "xeuugli",
+    kVQacm: "xysyzu8",
+    $$css: true
+  }
+};
+
+/** Props for a two-panel split whose divider can be moved. */
+
+/**
+ * Splits a region into a sized panel and the rest. The divider is a real
+ * `separator` control, so arrow keys move it — a drag handle that only
+ * responds to a pointer is unusable by keyboard.
+ */
+export function Resizable({
+  children,
+  handleLabel,
+  max = 480,
+  min = 160,
+  onSizeChange,
+  panel,
+  size,
+  step = 16,
+  ...props
+}) {
+  const frameRef = useRef(null);
+  const [internalSize, setInternalSize] = useState(size ?? 240);
+  const current = size ?? internalSize;
+  const [dragging, setDragging] = useState(false);
+  const apply = useCallback(next => {
+    const clamped = Math.min(Math.max(next, min), max);
+    if (size === undefined) {
+      setInternalSize(clamped);
+    }
+    onSizeChange?.(clamped);
+  }, [max, min, onSizeChange, size]);
+  useEffect(() => {
+    if (!dragging) {
+      return;
+    }
+    function handleMove(event) {
+      const frame = frameRef.current;
+      if (frame) {
+        apply(event.clientX - frame.getBoundingClientRect().left);
+      }
+    }
+    function stop() {
+      setDragging(false);
+    }
+    document.addEventListener('mousemove', handleMove);
+    document.addEventListener('mouseup', stop);
+    return () => {
+      document.removeEventListener('mousemove', handleMove);
+      document.removeEventListener('mouseup', stop);
+    };
+  }, [apply, dragging]);
+  return /*#__PURE__*/_jsxs("div", {
+    ...props,
+    ref: frameRef,
+    ...{
+      className: "x78zum5 xj0sio9 xeuugli"
+    },
+    children: [/*#__PURE__*/_jsx("div", {
+      ...stylex.props(styles.panel, scrolling.region),
+      style: {
+        width: `${current}px`
+      },
+      children: panel
+    }), /*#__PURE__*/_jsx(ResizeHandle, {
+      dragging: dragging,
+      label: handleLabel,
+      max: max,
+      min: min,
+      onMouseDown: () => {
+        setDragging(true);
+      },
+      onValueChange: apply,
+      step: step,
+      value: current
+    }), /*#__PURE__*/_jsx("div", {
+      ...stylex.props(styles.rest, scrolling.region),
+      children: children
+    })]
+  });
+}

package/dist/Resizable/index.d.ts

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

package/dist/Resizable/index.js

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

package/dist/ResizeHandle/ResizeHandle.d.ts

@@ -0,0 +1,23 @@
+import type { HTMLAttributes } from 'react';
+/** Axis the divider itself runs along, as `aria-orientation` reports it. */
+export type ResizeHandleOrientation = 'horizontal' | 'vertical';
+/** Props for the movable divider a caller places between two panes. */
+export interface ResizeHandleProps extends Omit<HTMLAttributes<HTMLDivElement>, 'aria-label' | 'aria-orientation' | 'aria-valuemax' | 'aria-valuemin' | 'aria-valuenow' | 'children' | 'className' | 'onKeyDown' | 'role' | 'tabIndex'> {
+    readonly label?: string;
+    readonly max?: number;
+    readonly min?: number;
+    readonly onValueChange?: (value: number) => void;
+    /** Held while the caller is dragging, so the mark survives the pointer. */
+    readonly dragging?: boolean;
+    readonly orientation?: ResizeHandleOrientation;
+    readonly step?: number;
+    readonly value?: number;
+}
+/**
+ * The divider between two panes the caller lays out itself. It is a real
+ * `separator` control, so arrow keys move it — a drag handle that only
+ * responds to a pointer is unusable by keyboard. The value attributes appear
+ * only when the caller supplies the numbers behind them, because a separator
+ * that reports a range it does not have is worse than one that reports none.
+ */
+export declare function ResizeHandle({ dragging, label, max, min, onValueChange, orientation, step, value, ...props }: ResizeHandleProps): import("react").JSX.Element;

package/dist/ResizeHandle/ResizeHandle.doc.d.ts

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

package/dist/ResizeHandle/ResizeHandle.doc.js

@@ -0,0 +1,30 @@
+import "../styles/stylex.css";
+export const resizeHandleDoc = {
+  name: 'ResizeHandle',
+  description: 'Divides two panes with a control arrow keys can move.',
+  props: [{
+    name: 'label',
+    description: 'Names the divider control.'
+  }, {
+    name: 'max',
+    description: 'Reports and caps the largest value.'
+  }, {
+    name: 'min',
+    description: 'Reports and caps the smallest value.'
+  }, {
+    name: 'onValueChange',
+    description: 'Receives the next clamped value.'
+  }, {
+    name: 'orientation',
+    description: 'Sets the axis the divider runs along.'
+  }, {
+    name: 'step',
+    description: 'Sets how far each arrow key moves it.'
+  }, {
+    name: 'value',
+    description: 'Reports where the divider currently sits.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLDivElement> except aria-label, aria-orientation, aria-valuemax, aria-valuemin, aria-valuenow, children, className, onKeyDown, role, and tabIndex'],
+  example: '<ResizeHandle max={480} min={160} onValueChange={setWidth} value={width} />',
+  storyId: 'core-resize-handle--default'
+};

package/dist/ResizeHandle/ResizeHandle.js

@@ -0,0 +1,118 @@
+import * as stylex from '@stylexjs/stylex';
+import { semanticTokens } from '../authoring.stylex.js';
+import { useInternationalization } from '../i18n/index.js';
+import { clamp } from '../utils/index.js';
+import "../styles/stylex.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const styles = {
+  handle: {
+    kWkggS: "x3bfdtj",
+    ksu8eU: "xng3xce",
+    kMzoRj: "xc342km",
+    kmuXW: "x2lah0s",
+    kmVPX3: "x1717udv",
+    kVAEAm: "x1n2onr6",
+    kIyJzY: "x1elc2ff",
+    k1ekBW: "x15406qy",
+    kAMwcw: "xxjumz",
+    kZs9gx: "x15meki4",
+    kiEn40: "xz32tfx",
+    k7shQP: "x1p22nma",
+    kPJHz1: "x17lds6u",
+    kIa11j: "xr4amx6",
+    $$css: true
+  },
+  dragging: {
+    kWkggS: "x14kofiu",
+    $$css: true
+  },
+  vertical: {
+    kkrTdU: "xicojor",
+    kzqmXN: "xivnta4",
+    kgzTxl: "xszcg87",
+    kgeoSG: "x1cpjm7i",
+    kOlAkY: "x1o8qpxl",
+    k96MEf: "x1y3wzot",
+    kSJ0CW: "xfbisj7",
+    kEoFBp: "x1hmns74",
+    kcTAPf: "xnyzbwf",
+    $$css: true
+  },
+  horizontal: {
+    kZKoxP: "xendyek",
+    kkrTdU: "xyozgr7",
+    kgzTxl: "x17f96yv",
+    kgeoSG: "x1cpjm7i",
+    kOlAkY: "x1rmj1tg",
+    k96MEf: "x1knuo7r",
+    kSJ0CW: "x1682cnc",
+    kEoFBp: "x1hmns74",
+    kcTAPf: "xkjykve",
+    $$css: true
+  }
+};
+
+/** Axis the divider itself runs along, as `aria-orientation` reports it. */
+
+/** Props for the movable divider a caller places between two panes. */
+
+/**
+ * The divider between two panes the caller lays out itself. It is a real
+ * `separator` control, so arrow keys move it — a drag handle that only
+ * responds to a pointer is unusable by keyboard. The value attributes appear
+ * only when the caller supplies the numbers behind them, because a separator
+ * that reports a range it does not have is worse than one that reports none.
+ */
+export function ResizeHandle({
+  dragging = false,
+  label,
+  max,
+  min,
+  onValueChange,
+  orientation = 'vertical',
+  step = 16,
+  value,
+  ...props
+}) {
+  const {
+    messages
+  } = useInternationalization();
+  // An unset bound is no bound: a caller that leaves `min` or `max` out has a
+  // range this handle cannot know, so it stops holding the value inside one.
+  const lowerBound = min ?? Number.NEGATIVE_INFINITY;
+  const upperBound = max ?? Number.POSITIVE_INFINITY;
+  const decreaseKey = orientation === 'vertical' ? 'ArrowLeft' : 'ArrowUp';
+  const increaseKey = orientation === 'vertical' ? 'ArrowRight' : 'ArrowDown';
+  function requestedValue(key) {
+    if (key === decreaseKey) {
+      return value === undefined ? undefined : value - step;
+    }
+    if (key === increaseKey) {
+      return value === undefined ? undefined : value + step;
+    }
+    if (key === 'Home') {
+      return min;
+    }
+    return key === 'End' ? max : undefined;
+  }
+  function handleKeyDown(event) {
+    const next = requestedValue(event.key);
+    if (next === undefined) {
+      return;
+    }
+    event.preventDefault();
+    onValueChange?.(clamp(next, lowerBound, upperBound));
+  }
+  return /*#__PURE__*/_jsx("div", {
+    ...props,
+    "aria-label": label ?? messages.resizeHandle,
+    "aria-orientation": orientation,
+    "aria-valuemax": max,
+    "aria-valuemin": min,
+    "aria-valuenow": value,
+    onKeyDown: handleKeyDown,
+    role: "separator",
+    ...stylex.props(styles.handle, styles[orientation], dragging && styles.dragging),
+    tabIndex: 0
+  });
+}

package/dist/ResizeHandle/index.d.ts

@@ -0,0 +1 @@
+export { ResizeHandle, type ResizeHandleOrientation, type ResizeHandleProps, } from './ResizeHandle.js';

package/dist/ResizeHandle/index.js

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

package/dist/SegmentedControl/SegmentedControl.js

@@ -69,10 +69,10 @@ export function SegmentedControl({
     role: "radiogroup",
     ...{
       0: {
-        className: "xavu78a x8kq9my x3nfvp2 x1iwn5ga x1tkv3ku"
+        className: "xavu78a x1wxkff4 x8kq9my x1jnjmdy xpxnlqs x9f619 x3nfvp2 xxhr3t x1tkv3ku"
       },
       1: {
-        className: "xavu78a x8kq9my x3nfvp2 x1iwn5ga x1tkv3ku xdt5ytf"
+        className: "xavu78a x1wxkff4 x8kq9my x1jnjmdy xpxnlqs x9f619 x3nfvp2 xxhr3t x1tkv3ku xdt5ytf"
       }
     }[!!(orientation === 'vertical') << 0],
     children: options.map(option => {
@@ -94,10 +94,10 @@ export function SegmentedControl({
         tabIndex: isSelected && !isDisabled ? 0 : -1,
         ...{
           0: {
-            className: "xjbqb8w x1l6hjkl xng3xce x9f619 x1y4yzzg xj0sio9 x1ti3rys xmm8wyw x10y07nz x1qtbwip x609gy3 x15meki4 xz32tfx x1p22nma x17lds6u xbo0ryh x1ipqx2d"
+            className: "xjbqb8w x1l6hjkl xng3xce x9f619 x1ypdohk xj0sio9 xltg2ad xq5azjn x7xn2sm x10y07nz x1wkw8jr x1elc2ff x1koyr57 xxjumz x609gy3 xtgyt42 x15meki4 xz32tfx x1p22nma x17lds6u x17y7oyd xbo0ryh x1kx1cc1 x1975ut4 x1jwpw4l"
           },
           1: {
-            className: "x1l6hjkl xng3xce x9f619 xj0sio9 x1ti3rys xmm8wyw x10y07nz x1qtbwip x609gy3 x15meki4 xz32tfx x1p22nma x17lds6u x40o0ze x1elh21b x1y4yzzg"
+            className: "x1l6hjkl xng3xce x9f619 x1ypdohk xj0sio9 xltg2ad xq5azjn x7xn2sm x10y07nz x1wkw8jr x1elc2ff x1koyr57 xxjumz x609gy3 xtgyt42 x15meki4 xz32tfx x1p22nma x17lds6u x40o0ze x1elh21b x1y4yzzg"
           }
         }[!!isSelected << 0],
         type: "button",

package/dist/SelectableCard/SelectableCard.d.ts

@@ -0,0 +1,25 @@
+import { type ChangeEvent, type InputHTMLAttributes, type ReactNode } from 'react';
+type SharedSelectableCardProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'checked' | 'children' | 'className' | 'defaultChecked' | 'type'> & {
+    readonly description?: ReactNode;
+    readonly label: ReactNode;
+    readonly multiple?: boolean;
+};
+type ControlledSelectableCardProps = SharedSelectableCardProps & {
+    readonly checked: boolean;
+    readonly defaultChecked?: never;
+    readonly onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+};
+type UncontrolledSelectableCardProps = SharedSelectableCardProps & {
+    readonly checked?: never;
+    readonly defaultChecked?: boolean;
+};
+/** Props for a card that carries its own selection control. */
+export type SelectableCardProps = ControlledSelectableCardProps | UncontrolledSelectableCardProps;
+/**
+ * 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 declare function SelectableCard({ checked, defaultChecked, description, disabled, label, multiple, onChange, ...props }: SelectableCardProps): import("react").JSX.Element;
+export {};

package/dist/SelectableCard/SelectableCard.doc.d.ts

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

package/dist/SelectableCard/SelectableCard.doc.js

@@ -0,0 +1,18 @@
+import "../styles/stylex.css";
+export const selectableCardDoc = {
+  name: 'SelectableCard',
+  description: 'A card surface that records a choice.',
+  props: [{
+    name: 'description',
+    description: 'Adds detail under the label.'
+  }, {
+    name: 'label',
+    description: 'Names the choice.'
+  }, {
+    name: 'multiple',
+    description: 'Allows several cards to hold at once.'
+  }],
+  inheritedProps: ['InputHTMLAttributes<HTMLInputElement> except checked, children, className, defaultChecked, and type'],
+  example: '<SelectableCard label="Standard" name="plan" value="standard" />',
+  storyId: 'core-selectable-card--default'
+};