@vantageos/mosaic 0.4.0 → 0.5.0

package/dist/preact/forms.d.ts

@@ -373,6 +373,8 @@ declare const MultiSelectPropsSchema: z.ZodObject<{
     disabled: z.ZodOptional<z.ZodBoolean>;
     searchable: z.ZodOptional<z.ZodBoolean>;
     maxItems: z.ZodOptional<z.ZodNumber>;
+    /** `chips`: every option is a visible toggle button (aria-pressed), no dropdown. */
+    appearance: z.ZodDefault<z.ZodEnum<["default", "chips"]>>;
 }, "strip", z.ZodTypeAny, {
     options: {
         value: string;
@@ -380,6 +382,7 @@ declare const MultiSelectPropsSchema: z.ZodObject<{
     }[];
     name: string;
     label: string;
+    appearance: "default" | "chips";
     disabled?: boolean | undefined;
     placeholder?: string | undefined;
     searchable?: boolean | undefined;
@@ -395,6 +398,7 @@ declare const MultiSelectPropsSchema: z.ZodObject<{
     placeholder?: string | undefined;
     searchable?: boolean | undefined;
     maxItems?: number | undefined;
+    appearance?: "default" | "chips" | undefined;
 }>;
 type MultiSelectOption = z.infer<typeof MultiSelectOptionSchema>;
 
@@ -406,6 +410,8 @@ interface MultiSelectProps {
     disabled?: boolean;
     searchable?: boolean;
     maxItems?: number;
+    /** `chips`: every option is a visible toggle button (aria-pressed), no dropdown. */
+    appearance?: "default" | "chips";
     className?: string;
 }
 /**
@@ -428,6 +434,8 @@ interface RadioGroupProps {
     }>;
     orientation?: "vertical" | "horizontal";
     disabled?: boolean;
+    /** `segmented` / `chips`: always-visible options; same radiogroup semantics. */
+    appearance?: "default" | "segmented" | "chips";
     className?: string;
 }
 /**
@@ -733,13 +741,13 @@ declare const RadioGroupOptionSchema: z.ZodObject<{
     description: z.ZodOptional<z.ZodString>;
     disabled: z.ZodDefault<z.ZodOptional<z.ZodBoolean>>;
 }, "strip", z.ZodTypeAny, {
+    label: string;
     value: string;
     disabled: boolean;
-    label: string;
     description?: string | undefined;
 }, {
-    value: string;
     label: string;
+    value: string;
     description?: string | undefined;
     disabled?: boolean | undefined;
 }>;
@@ -753,43 +761,51 @@ declare const RadioGroupPropsSchema: z.ZodObject<{
         description: z.ZodOptional<z.ZodString>;
         disabled: z.ZodDefault<z.ZodOptional<z.ZodBoolean>>;
     }, "strip", z.ZodTypeAny, {
+        label: string;
         value: string;
         disabled: boolean;
-        label: string;
         description?: string | undefined;
     }, {
-        value: string;
         label: string;
+        value: string;
         description?: string | undefined;
         disabled?: boolean | undefined;
     }>, "many">;
     orientation: z.ZodDefault<z.ZodEnum<["vertical", "horizontal"]>>;
+    /**
+     * `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: z.ZodDefault<z.ZodEnum<["default", "segmented", "chips"]>>;
     disabled: z.ZodDefault<z.ZodOptional<z.ZodBoolean>>;
     locale: z.ZodDefault<z.ZodEnum<["en", "fr"]>>;
 }, "strip", z.ZodTypeAny, {
+    label: string;
     options: {
+        label: string;
         value: string;
         disabled: boolean;
-        label: string;
         description?: string | undefined;
     }[];
-    disabled: boolean;
-    name: string;
-    label: string;
-    orientation: "vertical" | "horizontal";
     locale: "en" | "fr";
+    appearance: "default" | "segmented" | "chips";
+    name: string;
+    disabled: boolean;
+    orientation: "horizontal" | "vertical";
 }, {
+    label: string;
     options: {
-        value: string;
         label: string;
+        value: string;
         description?: string | undefined;
         disabled?: boolean | undefined;
     }[];
     name: string;
-    label: string;
-    disabled?: boolean | undefined;
-    orientation?: "vertical" | "horizontal" | undefined;
     locale?: "en" | "fr" | undefined;
+    appearance?: "default" | "segmented" | "chips" | undefined;
+    disabled?: boolean | undefined;
+    orientation?: "horizontal" | "vertical" | undefined;
 }>;
 type RadioGroupPropsValidated = z.infer<typeof RadioGroupPropsSchema>;
 declare function validateRadioGroupProps(raw: unknown): RadioGroupPropsValidated;
@@ -864,9 +880,10 @@ declare function getOptionLabelId(instanceId: string, name: string, optionValue:
 /** Stable DOM id for an option description span (linked by radio aria-describedby). */
 declare function getOptionDescriptionId(instanceId: string, name: string, optionValue: string): string;
 /** Tailwind classes for the root radiogroup container. */
-declare function getGroupClasses(orientation: RadioOrientation): string;
+type RadioAppearance = "default" | "segmented" | "chips";
+declare function getGroupClasses(orientation: RadioOrientation, appearance?: RadioAppearance): string;
 /** Tailwind classes for a single radio row (label + control + description). */
-declare function getOptionRowClasses(isDisabled: boolean, orientation: RadioOrientation): string;
+declare function getOptionRowClasses(isDisabled: boolean, orientation: RadioOrientation, appearance?: RadioAppearance): string;
 /** Tailwind classes for the visible radio control (the round dot). */
 declare function getRadioControlClasses(isSelected: boolean, isDisabled: boolean): string;
 /** Whether a keyboard event should activate the focused radio (Space / Enter). */

package/dist/preact/forms.js

@@ -512,7 +512,9 @@ var MultiSelectPropsSchema = z.object({
   placeholder: z.string().optional(),
   disabled: z.boolean().optional(),
   searchable: z.boolean().optional(),
-  maxItems: z.number().int().positive().optional()
+  maxItems: z.number().int().positive().optional(),
+  /** `chips`: every option is a visible toggle button (aria-pressed), no dropdown. */
+  appearance: z.enum(["default", "chips"]).default("default")
 });
 function MultiSelect(props) {
   const parsed = MultiSelectPropsSchema.parse({
@@ -522,15 +524,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 = useId();
   const triggerId = `${reactId}-trigger`;
   const listboxId = `${reactId}-listbox`;
   const labelId = `${reactId}-label`;
   return /* @__PURE__ */ jsx(FormField, { name, children: ({ field }) => {
     const value = Array.isArray(field.value) ? field.value : [];
+    if (appearance === "chips") {
+      return /* @__PURE__ */ jsx(
+        ChipToggles,
+        {
+          labelId,
+          label,
+          options,
+          value,
+          disabled,
+          maxItems,
+          onChange: (next) => field.onChange(next),
+          onBlur: () => field.onBlur(),
+          className: props.className
+        }
+      );
+    }
     return /* @__PURE__ */ jsx(
       Inner,
       {
@@ -551,6 +570,39 @@ function MultiSelect(props) {
     );
   } });
 }
+function ChipToggles(p) {
+  const atMax = isAtMaxItems(p.value, p.maxItems);
+  return /* @__PURE__ */ 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__ */ jsx("span", { id: p.labelId, className: "mosaic-multiselect-label", children: p.label }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-row flex-wrap gap-2", children: p.options.map((opt) => {
+          const on = p.value.includes(opt.value);
+          return /* @__PURE__ */ 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] = useState(false);
   const [query, setQuery] = useState("");
@@ -761,10 +813,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";
@@ -778,6 +841,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 = z.object({
   value: z.string().min(1),
   label: z.string().min(1),
@@ -789,6 +859,12 @@ var RadioGroupPropsSchema = z.object({
   label: z.string().min(1),
   options: z.array(RadioGroupOptionSchema).min(1),
   orientation: 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: z.enum(["default", "segmented", "chips"]).default("default"),
   disabled: z.boolean().optional().default(false),
   locale: z.enum(["en", "fr"]).default("en")
 });
@@ -801,9 +877,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 = useId();
   const groupLabelId = getGroupLabelId(instanceId, name);
   const { prev: prevKey, next: nextKey } = getNavKeys(orientation);
@@ -858,51 +935,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__ */ jsxs("div", { className: getOptionRowClasses(isDisabled, orientation), children: [
-              /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
-                /* @__PURE__ */ jsx("span", { id: optLabelId, className: "mosaic-forms-radiogroup-option-label", children: option.label }),
-                option.description ? /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    id: optDescId,
-                    className: "mosaic-forms-radiogroup-option-description text-sm text-slate-500",
-                    children: option.description
-                  }
-                ) : null
-              ] })
-            ] }, option.value);
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: getOptionRowClasses(isDisabled, orientation, appearance),
+                children: [
+                  /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        id: optLabelId,
+                        "data-selected": isSelected ? "true" : void 0,
+                        className: getOptionLabelClasses(appearance, isSelected),
+                        children: option.label
+                      }
+                    ),
+                    option.description ? /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        id: optDescId,
+                        className: "mosaic-forms-radiogroup-option-description text-sm text-slate-500",
+                        children: option.description
+                      }
+                    ) : null
+                  ] })
+                ]
+              },
+              option.value
+            );
           })
         }
       ),