@ai-matrx/design-system 0.61.2 → 0.61.3

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 0.61.3 — the controls cover the sample pages
+
+- `SplitButton` (controls): two Buttons joined — the act and its menu — carrying one half-gap.
+- `Field`/`SearchField` take `end` (trailing content inside the capsule: a clear button).
+- `Tabs` take `rule={false}` when the row they sit in already draws the hairline.
+- `SegmentOption.title` (an icon-only segment's hover name).
+- A control Button's `justify-content` is no longer locked: content alignment is placement
+  (ui-drift's one table), so a full-width action row may say `justify-start`.
+- `--matrx-control-field-radius` (9999px) — fields stay capsules through one token.
+- Quiet row actions come up to full ink on a hovered `SettingRow`, not only a list row.
+
+No consumer action.
+
 ## 0.61.2 — the glyph trim actually applies
 
 - 0.60.10's OPTICAL GLYPH TRIM was a normal declaration in `matrx-tap-lock`, the FIRST cascade

package/dist/controls.cjs

@@ -47,6 +47,7 @@ __export(controls_exports, {
   SegmentedControl: () => SegmentedControl,
   Select: () => Select,
   SettingRow: () => SettingRow,
+  SplitButton: () => SplitButton,
   Switch: () => Switch,
   Tabs: () => Tabs,
   Textarea: () => Textarea
@@ -809,8 +810,12 @@ var Button2 = React7.forwardRef(
   }
 );
 Button2.displayName = "Button";
+var SplitButton = React7.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ref, role: "group", "data-matrx-control": "split", className: cn("matrx-control-split", className), ...props })
+);
+SplitButton.displayName = "SplitButton";
 var Field = React7.forwardRef(
-  ({ className, style, icon, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  ({ className, style, icon, end, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "label",
     {
       "data-matrx-control": "field",
@@ -819,7 +824,8 @@ var Field = React7.forwardRef(
       style,
       children: [
         icon,
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", { ref, ...props })
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", { ref, ...props }),
+        end
       ]
     }
   )
@@ -892,6 +898,7 @@ function SegmentItems({
         "aria-selected": role ? on : void 0,
         "aria-pressed": role ? void 0 : on,
         "aria-label": o.ariaLabel,
+        title: o.title,
         disabled: o.disabled,
         "data-state": on ? "on" : "off",
         className: "matrx-control-segment",
@@ -927,6 +934,7 @@ function SegmentedControl({
 }
 function Tabs({
   variant = "underline",
+  rule = true,
   value,
   onValueChange,
   data,
@@ -953,6 +961,7 @@ function Tabs({
       role: "tablist",
       "aria-label": ariaLabel,
       "data-matrx-control": "tabs",
+      "data-rule": rule ? void 0 : "none",
       className: cn("matrx-control-tabs", className),
       style,
       children: data.map((o) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(