@caratlogic/design-system 0.1.36 → 0.1.37

package/dist/index.esm.js

@@ -15931,7 +15931,7 @@ function PickListFilter({ options, value, onChange, ariaLabel, layout = 'list',
     });
     const radioName = useId$2();
     const scrollClassName = getOptionsScrollClassName(fill);
-    // Rows with a right-hand hint read best in one column.
+    // Two-line rows (label + hint) read best in one column.
     const multiColumn = fill && !options.some((option) => option.hint);
     const wrapperClassName = fill ? FILL_WRAPPER_CLASS_NAME : undefined;
     const toggle = (option) => onChange(pickValue(value, option.value, single));
@@ -15944,7 +15944,9 @@ function PickListFilter({ options, value, onChange, ariaLabel, layout = 'list',
                         ? getGridColumnsStyle(undefined, LIST_COLUMN_MIN_WIDTH)
                         : undefined, wrapperClassName: wrapperClassName, children: visibleOptions.map((option) => (jsxs("label", { className: LIST_ROW_CLASS_NAME, children: [single ? (jsx("input", { type: "radio", name: radioName, checked: value.includes(option.value), 
                                 // A click on the picked row clears it (radios can't be unticked natively).
-                                onClick: () => toggle(option), onChange: () => undefined, className: LIST_RADIO_CLASS_NAME })) : (jsx(Checkbox, { className: LIST_CHECKBOX_CLASS_NAME, checked: value.includes(option.value), onCheckedChange: () => toggle(option) })), option.content ? (jsx("span", { className: "min-w-0 flex-1", children: option.content })) : (jsx(TruncatedLabel, { text: option.label, className: "flex-1" })), option.hint && (jsx("span", { className: "shrink-0 text-muted-foreground", children: option.hint })), jsx(OptionSwatch, { color: option.swatch }), option.count !== undefined && (jsx("span", { className: COUNT_BADGE_CLASS_NAME, children: formatOptionCount(option.count) }))] }, option.value))) })] }));
+                                onClick: () => toggle(option), onChange: () => undefined, className: LIST_RADIO_CLASS_NAME })) : (jsx(Checkbox, { className: LIST_CHECKBOX_CLASS_NAME, checked: value.includes(option.value), onCheckedChange: () => toggle(option) })), option.content ? (jsx("span", { className: "min-w-0 flex-1", children: option.content })) : option.hint ? (
+                            // The hint sits under the label so a long name keeps the row's full width.
+                            jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [jsx(TruncatedLabel, { text: option.label }), jsx(TruncatedLabel, { text: option.hint, className: "text-xs text-muted-foreground" })] })) : (jsx(TruncatedLabel, { text: option.label, className: "flex-1" })), jsx(OptionSwatch, { color: option.swatch }), option.count !== undefined && (jsx("span", { className: COUNT_BADGE_CLASS_NAME, children: formatOptionCount(option.count) }))] }, option.value))) })] }));
     }
     if (layout === 'tiles') {
         return (jsx(ScrollFade, { role: "group", "aria-label": ariaLabel, wrapperClassName: wrapperClassName, className: cn('grid content-start gap-1.5', scrollClassName), style: getGridColumnsStyle(columns), children: visibleOptions.map((option) => (jsxs("button", { type: "button", "aria-pressed": value.includes(option.value), onClick: () => toggle(option), className: getTileClassName(value.includes(option.value), option.count !== undefined), children: [jsx(TruncatedLabel, { text: option.label }), option.count !== undefined && (jsx("span", { className: getCountBadgeClassName(value.includes(option.value) ? 'tinted' : 'neutral'), children: formatOptionCount(option.count) }))] }, option.value))) }));