@exponential_app/eui-react 0.3.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exponential_app/eui-react",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Exponential UI for React: the reference renderer of the core A2UI catalog on Radix with real CSS, runtime themes, extensions, and the shadcn primitive set the Exponential app shares.",
   "license": "Apache-2.0",
   "homepage": "https://exponential.at/ui/",
@@ -42,7 +42,7 @@
     "*.css"
   ],
   "dependencies": {
-    "@exponential_app/eui": "^0.3.0",
+    "@exponential_app/eui": "^0.4.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.544.0",

package/dist/chunks/index-5yzzfez5.js

@@ -1,126 +0,0 @@
-// packages/exponential-ui-react/src/primitives/choice-tiles.tsx
-import * as React from "react";
-import { ImageIcon } from "lucide-react";
-import { CHOICE_TILES_CLASSES, choiceColumns, choiceToggle, choiceValues } from "@exponential_app/eui/web/primitives";
-
-// packages/exponential-ui-react/src/primitives/cn.ts
-import { cn as cn2, getInitials as getInitials2 } from "@exponential_app/eui/web/primitives";
-
-// packages/exponential-ui-react/src/primitives/choice-tiles.tsx
-import { choiceColumns as choiceColumns2, choiceToggle as choiceToggle2, choiceValues as choiceValues2 } from "@exponential_app/eui/web/primitives";
-import { jsx, jsxs } from "react/jsx-runtime";
-function ChoiceTilesFrame2({ options, picked, multiple, columns, disabled = false, invalid = false, dir = `ltr`, onPick, rootProps, tileProps, pictureProps, labelProps, descriptionProps, renderPicture, after, rootRef }) {
-  const buttons = React.useRef([]);
-  const order = React.useMemo(() => options.map((o) => o.value), [options]);
-  const pictures = options.some((o) => Boolean(o.image));
-  const enabled = (i) => !disabled && !options[i]?.disabled;
-  const firstPicked = options.findIndex((o, i) => picked.includes(o.value) && enabled(i));
-  const tabStop = firstPicked >= 0 ? firstPicked : options.findIndex((_, i) => enabled(i));
-  const pick = (i) => {
-    const value = options[i].value;
-    onPick(choiceToggle(picked, value, multiple, order), value);
-  };
-  const move = (from, delta) => {
-    const n = options.length;
-    for (let step = 1;step <= n; step++) {
-      const i = ((from + delta * step) % n + n) % n;
-      if (enabled(i))
-        return i;
-    }
-    return -1;
-  };
-  const onKeyDown = (i) => (e) => {
-    const forward = dir === `rtl` ? `ArrowLeft` : `ArrowRight`;
-    const back = dir === `rtl` ? `ArrowRight` : `ArrowLeft`;
-    const delta = e.key === forward || e.key === `ArrowDown` ? 1 : e.key === back || e.key === `ArrowUp` ? -1 : 0;
-    if (delta === 0)
-      return;
-    e.preventDefault();
-    const next = move(i, delta);
-    if (next < 0)
-      return;
-    buttons.current[next]?.focus();
-    if (!multiple && !picked.includes(options[next].value))
-      pick(next);
-  };
-  return /* @__PURE__ */ jsxs("div", {
-    ref: rootRef,
-    role: multiple ? `group` : `radiogroup`,
-    "aria-invalid": invalid || undefined,
-    "aria-disabled": disabled || undefined,
-    dir,
-    ...rootProps,
-    style: { display: `grid`, gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`, ...rootProps?.style ?? {} },
-    children: [
-      options.map((o, i) => {
-        const state = { index: i, selected: picked.includes(o.value), disabled: !enabled(i) };
-        const description = o.description ? String(o.description) : ``;
-        return /* @__PURE__ */ jsxs("button", {
-          ref: (el) => {
-            buttons.current[i] = el;
-          },
-          type: "button",
-          role: multiple ? `checkbox` : `radio`,
-          "aria-checked": state.selected,
-          "aria-label": o.label,
-          disabled: state.disabled,
-          tabIndex: i === tabStop ? 0 : -1,
-          "data-state": state.selected ? `checked` : `unchecked`,
-          "data-value": o.value,
-          onClick: () => pick(i),
-          onKeyDown: onKeyDown(i),
-          ...tileProps(state),
-          children: [
-            pictures ? /* @__PURE__ */ jsx("span", {
-              "aria-hidden": "true",
-              ...pictureProps(state),
-              children: renderPicture(o.image ? String(o.image) : null, state)
-            }) : null,
-            /* @__PURE__ */ jsx("span", {
-              ...labelProps(state),
-              children: o.label
-            }),
-            description ? /* @__PURE__ */ jsx("span", {
-              ...descriptionProps(state),
-              children: description
-            }) : null
-          ]
-        }, `${o.value}-${i}`);
-      }),
-      after
-    ]
-  });
-}
-function ChoiceTiles2({ options, value, multiple = false, columns, disabled = false, invalid = false, onChange, renderImage, className, dir, ...rest }) {
-  const picked = choiceValues(value, multiple);
-  const image = (src, label) => src ? renderImage ? renderImage(src, label) : /* @__PURE__ */ jsx("img", {
-    src,
-    alt: label,
-    loading: "lazy",
-    decoding: "async",
-    className: CHOICE_TILES_CLASSES.image
-  }) : /* @__PURE__ */ jsx(ImageIcon, {
-    className: CHOICE_TILES_CLASSES.placeholder
-  });
-  return /* @__PURE__ */ jsx(ChoiceTilesFrame2, {
-    options,
-    picked,
-    multiple,
-    columns: choiceColumns(columns),
-    disabled,
-    invalid,
-    dir,
-    onPick: (next) => onChange?.(multiple ? next : next[0] ?? ``),
-    rootProps: { "data-slot": `choice-tiles`, className: cn2(CHOICE_TILES_CLASSES.root, className), "aria-label": rest[`aria-label`], "aria-labelledby": rest[`aria-labelledby`], "data-testid": rest[`data-testid`] },
-    tileProps: (s) => ({ "data-slot": `choice-tile`, className: cn2(CHOICE_TILES_CLASSES.tile, s.selected && CHOICE_TILES_CLASSES.tileSelected, invalid && !s.selected && CHOICE_TILES_CLASSES.tileInvalid) }),
-    pictureProps: () => ({ "data-slot": `choice-tile-picture`, className: CHOICE_TILES_CLASSES.picture }),
-    labelProps: () => ({ className: CHOICE_TILES_CLASSES.label }),
-    descriptionProps: () => ({ className: CHOICE_TILES_CLASSES.description }),
-    renderPicture: (src, s) => image(src, options[s.index]?.label ?? ``)
-  });
-}
-
-export { cn2, getInitials2, ChoiceTilesFrame2, ChoiceTiles2, choiceColumns2, choiceToggle2, choiceValues2 };
-
-//# debugId=7F864C2C5241E95964756E2164756E21
-//# sourceMappingURL=index-5yzzfez5.js.map

package/dist/chunks/index-5yzzfez5.js.map

@@ -1,11 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/primitives/choice-tiles.tsx", "../src/primitives/cn.ts"],
-  "sourcesContent": [
-    "import * as React from \"react\"\nimport { ImageIcon } from \"lucide-react\"\nimport { CHOICE_TILES_CLASSES, choiceColumns, choiceToggle, choiceValues, type ChoiceTileOption, type TileState } from \"@exponential_app/eui/web/primitives\"\n\nimport { cn } from \"./cn\"\n\nexport { choiceColumns, choiceToggle, choiceValues } from \"@exponential_app/eui/web/primitives\"\nexport type { ChoiceTileOption, TileState } from \"@exponential_app/eui/web/primitives\"\n\n// EXP-1280: picture choice tiles, ONE implementation for two skins.\n//\n// `ChoiceTilesFrame` is the headless half: the grid, one button per option\n// (radio tiles for a single pick, checkbox tiles for several), the roving tab\n// stop and the keys of catalog/a11y.json `ChoiceTiles`. The eUI native\n// (`natives/choice-tiles.tsx`) dresses it with the theme's recipe classes;\n// `ChoiceTiles` below dresses it with the app's Tailwind tokens at the SAME\n// geometry, so the plan card and an agent's surface draw the same tile.\n\ntype Attrs = Record<string, unknown>\n\nexport interface ChoiceTilesFrameProps {\n  options: readonly ChoiceTileOption[]\n  /** The picked values. */\n  picked: readonly string[]\n  multiple: boolean\n  columns: number\n  disabled?: boolean\n  invalid?: boolean\n  dir?: `ltr` | `rtl`\n  /** A pick (already toggled for `multiple`): the next picked values. */\n  onPick: (next: string[], value: string) => void\n  rootProps?: Attrs\n  tileProps: (state: TileState) => Attrs\n  pictureProps: (state: TileState) => Attrs\n  labelProps: (state: TileState) => Attrs\n  descriptionProps: (state: TileState) => Attrs\n  /** The picture's content (the frame keeps the box; a missing picture gets\n   *  the placeholder). */\n  renderPicture: (src: string | null, state: TileState) => React.ReactNode\n  /** Under the tiles (the field's errors), spanning every column. */\n  after?: React.ReactNode\n  rootRef?: React.Ref<HTMLDivElement>\n}\n\n/** The headless tiles: a `radiogroup` of `radio` buttons (single) or a\n *  `group` of `checkbox` buttons (multiple). The picked tile (else the\n *  first enabled one) is the tab stop; arrows move focus with wrap (a single\n *  pick follows focus); Space/Enter toggle (the button's own click). Every\n *  tile has a picture box once ANY option has an image, so a row keeps one\n *  height. */\nexport function ChoiceTilesFrame({ options, picked, multiple, columns, disabled = false, invalid = false, dir = `ltr`, onPick, rootProps, tileProps, pictureProps, labelProps, descriptionProps, renderPicture, after, rootRef }: ChoiceTilesFrameProps) {\n  const buttons = React.useRef<(HTMLButtonElement | null)[]>([])\n  const order = React.useMemo(() => options.map((o) => o.value), [options])\n  const pictures = options.some((o) => Boolean(o.image))\n  const enabled = (i: number) => !disabled && !options[i]?.disabled\n  const firstPicked = options.findIndex((o, i) => picked.includes(o.value) && enabled(i))\n  const tabStop = firstPicked >= 0 ? firstPicked : options.findIndex((_, i) => enabled(i))\n  const pick = (i: number) => {\n    const value = options[i]!.value\n    onPick(choiceToggle(picked, value, multiple, order), value)\n  }\n  const move = (from: number, delta: number) => {\n    const n = options.length\n    for (let step = 1; step <= n; step++) {\n      const i = (((from + delta * step) % n) + n) % n\n      if (enabled(i)) return i\n    }\n    return -1\n  }\n  const onKeyDown = (i: number) => (e: React.KeyboardEvent<HTMLButtonElement>) => {\n    const forward = dir === `rtl` ? `ArrowLeft` : `ArrowRight`\n    const back = dir === `rtl` ? `ArrowRight` : `ArrowLeft`\n    const delta = e.key === forward || e.key === `ArrowDown` ? 1 : e.key === back || e.key === `ArrowUp` ? -1 : 0\n    if (delta === 0) return\n    e.preventDefault()\n    const next = move(i, delta)\n    if (next < 0) return\n    buttons.current[next]?.focus()\n    if (!multiple && !picked.includes(options[next]!.value)) pick(next)\n  }\n  return (\n    <div\n      ref={rootRef}\n      role={multiple ? `group` : `radiogroup`}\n      aria-invalid={invalid || undefined}\n      aria-disabled={disabled || undefined}\n      dir={dir}\n      {...rootProps}\n      style={{ display: `grid`, gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`, ...((rootProps?.style as React.CSSProperties | undefined) ?? {}) }}\n    >\n      {options.map((o, i) => {\n        const state: TileState = { index: i, selected: picked.includes(o.value), disabled: !enabled(i) }\n        const description = o.description ? String(o.description) : ``\n        return (\n          <button\n            key={`${o.value}-${i}`}\n            ref={(el) => {\n              buttons.current[i] = el\n            }}\n            type=\"button\"\n            role={multiple ? `checkbox` : `radio`}\n            aria-checked={state.selected}\n            aria-label={o.label}\n            disabled={state.disabled}\n            tabIndex={i === tabStop ? 0 : -1}\n            data-state={state.selected ? `checked` : `unchecked`}\n            data-value={o.value}\n            onClick={() => pick(i)}\n            onKeyDown={onKeyDown(i)}\n            {...tileProps(state)}\n          >\n            {pictures ? (\n              <span aria-hidden=\"true\" {...pictureProps(state)}>\n                {renderPicture(o.image ? String(o.image) : null, state)}\n              </span>\n            ) : null}\n            <span {...labelProps(state)}>{o.label}</span>\n            {description ? <span {...descriptionProps(state)}>{description}</span> : null}\n          </button>\n        )\n      })}\n      {after}\n    </div>\n  )\n}\n\nexport interface ChoiceTilesProps {\n  options: readonly ChoiceTileOption[]\n  /** The pick: a string (single) or the picked values (multiple). */\n  value: string | readonly string[] | null | undefined\n  multiple?: boolean\n  /** Tiles per row, 1–4 (default 2). */\n  columns?: number\n  disabled?: boolean\n  /** Paints the destructive border (a required answer missing). */\n  invalid?: boolean\n  /** The next value: a string for a single pick, the values for `multiple`. */\n  onChange?: (value: string | string[]) => void\n  /** The picture element (the app passes an authorised <img> for\n   *  `/api/attachments/{id}`); default a plain lazy <img>. */\n  renderImage?: (src: string, alt: string) => React.ReactNode\n  className?: string\n  \"aria-label\"?: string\n  \"aria-labelledby\"?: string\n  \"data-testid\"?: string\n  dir?: `ltr` | `rtl`\n}\n\n/** THE picture choice (EXP-1280): the plan card's question blocks and the\n *  standalone ask, at the eUI `ChoiceTiles` look. */\nfunction ChoiceTiles({ options, value, multiple = false, columns, disabled = false, invalid = false, onChange, renderImage, className, dir, ...rest }: ChoiceTilesProps) {\n  const picked = choiceValues(value, multiple)\n  const image = (src: string | null, label: string) =>\n    src ? (renderImage ? renderImage(src, label) : <img src={src} alt={label} loading=\"lazy\" decoding=\"async\" className={CHOICE_TILES_CLASSES.image} />) : <ImageIcon className={CHOICE_TILES_CLASSES.placeholder} />\n  return (\n    <ChoiceTilesFrame\n      options={options}\n      picked={picked}\n      multiple={multiple}\n      columns={choiceColumns(columns)}\n      disabled={disabled}\n      invalid={invalid}\n      dir={dir}\n      onPick={(next) => onChange?.(multiple ? next : (next[0] ?? ``))}\n      rootProps={{ \"data-slot\": `choice-tiles`, className: cn(CHOICE_TILES_CLASSES.root, className), \"aria-label\": rest[`aria-label`], \"aria-labelledby\": rest[`aria-labelledby`], \"data-testid\": rest[`data-testid`] }}\n      tileProps={(s) => ({ \"data-slot\": `choice-tile`, className: cn(CHOICE_TILES_CLASSES.tile, s.selected && CHOICE_TILES_CLASSES.tileSelected, invalid && !s.selected && CHOICE_TILES_CLASSES.tileInvalid) })}\n      pictureProps={() => ({ \"data-slot\": `choice-tile-picture`, className: CHOICE_TILES_CLASSES.picture })}\n      labelProps={() => ({ className: CHOICE_TILES_CLASSES.label })}\n      descriptionProps={() => ({ className: CHOICE_TILES_CLASSES.description })}\n      renderPicture={(src, s) => image(src, options[s.index]?.label ?? ``)}\n    />\n  )\n}\n\nexport { ChoiceTiles }\n",
-    "export { cn, getInitials } from \"@exponential_app/eui/web/primitives\"\n"
-  ],
-  "mappings": "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",
-  "debugId": "7F864C2C5241E95964756E2164756E21",
-  "names": []
-}