@vantageos/mosaic 0.3.1 → 0.5.0

package/dist/forms.cjs

@@ -517,7 +517,9 @@ var MultiSelectPropsSchema = zod.z.object({
   placeholder: zod.z.string().optional(),
   disabled: zod.z.boolean().optional(),
   searchable: zod.z.boolean().optional(),
-  maxItems: zod.z.number().int().positive().optional()
+  maxItems: zod.z.number().int().positive().optional(),
+  /** `chips`: every option is a visible toggle button (aria-pressed), no dropdown. */
+  appearance: zod.z.enum(["default", "chips"]).default("default")
 });
 function MultiSelect(props) {
   const parsed = MultiSelectPropsSchema.parse({
@@ -527,15 +529,32 @@ function MultiSelect(props) {
     placeholder: props.placeholder,
     disabled: props.disabled,
     searchable: props.searchable,
-    maxItems: props.maxItems
+    maxItems: props.maxItems,
+    appearance: props.appearance
   });
-  const { name, label, options, placeholder, disabled, searchable, maxItems } = parsed;
+  const { name, label, options, placeholder, disabled, searchable, maxItems, appearance } = parsed;
   const reactId = react.useId();
   const triggerId = `${reactId}-trigger`;
   const listboxId = `${reactId}-listbox`;
   const labelId = `${reactId}-label`;
   return /* @__PURE__ */ jsxRuntime.jsx(FormField, { name, children: ({ field }) => {
     const value = Array.isArray(field.value) ? field.value : [];
+    if (appearance === "chips") {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        ChipToggles,
+        {
+          labelId,
+          label,
+          options,
+          value,
+          disabled,
+          maxItems,
+          onChange: (next) => field.onChange(next),
+          onBlur: () => field.onBlur(),
+          className: props.className
+        }
+      );
+    }
     return /* @__PURE__ */ jsxRuntime.jsx(
       Inner,
       {
@@ -556,6 +575,39 @@ function MultiSelect(props) {
     );
   } });
 }
+function ChipToggles(p) {
+  const atMax = isAtMaxItems(p.value, p.maxItems);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "fieldset",
+    {
+      "aria-labelledby": p.labelId,
+      "data-appearance": "chips",
+      className: `m-0 min-w-0 border-0 p-0 ${p.className ?? "mosaic-multiselect mosaic-multiselect--chips"}`,
+      onBlur: p.onBlur,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { id: p.labelId, className: "mosaic-multiselect-label", children: p.label }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row flex-wrap gap-2", children: p.options.map((opt) => {
+          const on = p.value.includes(opt.value);
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              "aria-pressed": on,
+              disabled: p.disabled || !on && atMax,
+              "data-chip-value": opt.value,
+              className: `mosaic-multiselect-chip inline-flex items-center rounded-full border px-3 py-1 text-sm ${on ? "border-slate-900 bg-slate-900 text-white" : "border-slate-300 bg-white text-slate-700 hover:bg-slate-50"} disabled:cursor-not-allowed disabled:opacity-50`,
+              onClick: () => p.onChange(
+                on ? removeValue(p.value, opt.value) : addValue(p.value, opt.value, p.maxItems)
+              ),
+              children: opt.label
+            },
+            opt.value
+          );
+        }) })
+      ]
+    }
+  );
+}
 function Inner(p) {
   const [open, setOpen] = react.useState(false);
   const [query, setQuery] = react.useState("");
@@ -766,10 +818,21 @@ function getOptionLabelId(instanceId, name, optionValue) {
 function getOptionDescriptionId(instanceId, name, optionValue) {
   return `${instanceId}-${name}-${optionValue}-desc`;
 }
-function getGroupClasses(orientation) {
+function getGroupClasses(orientation, appearance = "default") {
+  if (appearance === "segmented") {
+    return "inline-flex flex-row overflow-hidden rounded-md border border-slate-300";
+  }
+  if (appearance === "chips") return "flex flex-row flex-wrap gap-2";
   return orientation === "vertical" ? "flex flex-col gap-2" : "flex flex-row flex-wrap gap-4";
 }
-function getOptionRowClasses(isDisabled, orientation) {
+function getOptionRowClasses(isDisabled, orientation, appearance = "default") {
+  const state0 = isDisabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer";
+  if (appearance !== "default") {
+    return [
+      "relative inline-flex items-center focus-within:outline focus-within:outline-2 focus-within:outline-blue-600",
+      state0
+    ].join(" ");
+  }
   const base = "flex items-start gap-2";
   const orient = orientation === "vertical" ? "flex-row" : "flex-row";
   const state = isDisabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer";
@@ -783,6 +846,13 @@ function getRadioControlClasses(isSelected, isDisabled) {
 function isActivationKey(key) {
   return key === " " || key === "Space" || key === "Enter";
 }
+function getOptionLabelClasses(appearance, isSelected) {
+  if (appearance === "default") return "mosaic-forms-radiogroup-option-label";
+  const base = "mosaic-forms-radiogroup-option-label inline-flex items-center px-3 py-1 text-sm";
+  const shape = appearance === "chips" ? "rounded-full border" : "";
+  const tone = isSelected ? "bg-slate-900 text-white border-slate-900" : "bg-white text-slate-700 border-slate-300 hover:bg-slate-50";
+  return [base, shape, tone].filter(Boolean).join(" ");
+}
 var RadioGroupOptionSchema = zod.z.object({
   value: zod.z.string().min(1),
   label: zod.z.string().min(1),
@@ -794,6 +864,12 @@ var RadioGroupPropsSchema = zod.z.object({
   label: zod.z.string().min(1),
   options: zod.z.array(RadioGroupOptionSchema).min(1),
   orientation: zod.z.enum(["vertical", "horizontal"]).default("vertical"),
+  /**
+   * `segmented` / `chips` render the options as always-visible controls (Claude design
+   * guidelines prefer visible options over menus, which clip inside the iframe). The ARIA
+   * radiogroup semantics are identical in every appearance.
+   */
+  appearance: zod.z.enum(["default", "segmented", "chips"]).default("default"),
   disabled: zod.z.boolean().optional().default(false),
   locale: zod.z.enum(["en", "fr"]).default("en")
 });
@@ -806,9 +882,10 @@ function RadioGroup(props) {
     label: props.label,
     options: props.options,
     orientation: props.orientation,
-    disabled: props.disabled
+    disabled: props.disabled,
+    appearance: props.appearance
   });
-  const { name, label, options, orientation, disabled } = validated;
+  const { name, label, options, orientation, disabled, appearance } = validated;
   const instanceId = react.useId();
   const groupLabelId = getGroupLabelId(instanceId, name);
   const { prev: prevKey, next: nextKey } = getNavKeys(orientation);
@@ -863,51 +940,67 @@ function RadioGroup(props) {
           "aria-labelledby": groupLabelId,
           "aria-orientation": orientation,
           "aria-disabled": disabled || void 0,
-          className: getGroupClasses(orientation),
+          "data-appearance": appearance === "default" ? void 0 : appearance,
+          className: getGroupClasses(orientation, appearance),
           children: options.map((option, index) => {
             const isSelected = selectedValue === option.value;
             const isDisabled = !!(disabled || option.disabled);
             const optLabelId = getOptionLabelId(instanceId, name, option.value);
             const optDescId = option.description ? getOptionDescriptionId(instanceId, name, option.value) : void 0;
             const tabIdx = index === rovingIdx ? 0 : -1;
-            return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: getOptionRowClasses(isDisabled, orientation), children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "input",
-                {
-                  ref: (el) => {
-                    radioRefs.current[index] = el;
-                  },
-                  type: "radio",
-                  id: `${instanceId}-${name}-${option.value}`,
-                  name: field.name,
-                  value: option.value,
-                  checked: isSelected,
-                  disabled: isDisabled,
-                  "aria-labelledby": optLabelId,
-                  "aria-describedby": optDescId,
-                  tabIndex: isDisabled ? -1 : tabIdx,
-                  className: "mosaic-forms-radiogroup-input sr-only",
-                  onChange: () => {
-                    field.onChange(option.value);
-                  },
-                  onKeyDown: (e) => {
-                    if (!isDisabled) handleKeyDown(e, index);
-                  },
-                  onBlur: field.onBlur
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { id: optLabelId, className: "mosaic-forms-radiogroup-option-label", children: option.label }),
-                option.description ? /* @__PURE__ */ jsxRuntime.jsx(
-                  "span",
-                  {
-                    id: optDescId,
-                    className: "mosaic-forms-radiogroup-option-description text-sm text-slate-500",
-                    children: option.description
-                  }
-                ) : null
-              ] })
-            ] }, option.value);
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: getOptionRowClasses(isDisabled, orientation, appearance),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "input",
+                    {
+                      ref: (el) => {
+                        radioRefs.current[index] = el;
+                      },
+                      type: "radio",
+                      id: `${instanceId}-${name}-${option.value}`,
+                      name: field.name,
+                      value: option.value,
+                      checked: isSelected,
+                      disabled: isDisabled,
+                      "aria-labelledby": optLabelId,
+                      "aria-describedby": optDescId,
+                      tabIndex: isDisabled ? -1 : tabIdx,
+                      className: "mosaic-forms-radiogroup-input sr-only",
+                      onChange: () => {
+                        field.onChange(option.value);
+                      },
+                      onKeyDown: (e) => {
+                        if (!isDisabled) handleKeyDown(e, index);
+                      },
+                      onBlur: field.onBlur
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        id: optLabelId,
+                        "data-selected": isSelected ? "true" : void 0,
+                        className: getOptionLabelClasses(appearance, isSelected),
+                        children: option.label
+                      }
+                    ),
+                    option.description ? /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        id: optDescId,
+                        className: "mosaic-forms-radiogroup-option-description text-sm text-slate-500",
+                        children: option.description
+                      }
+                    ) : null
+                  ] })
+                ]
+              },
+              option.value
+            );
           })
         }
       ),