@ai-matrx/design-system 0.61.2 → 0.61.4

package/dist/controls.css

@@ -37,6 +37,7 @@
     --matrx-control-touch: 2.75rem; /* 44px hit area on coarse pointers */
     --matrx-control-row: 2.25rem; /* 36px hairline row */
     --matrx-control-radius-surface: 0.5rem; /* 8px card skin */
+    --matrx-control-field-radius: 9999px; /* fields are capsules (owner pick over 8px) */
   }
 
   /* THE CONTROL SCOPE. Until the tap tokens themselves move to 28/34 (the
@@ -118,7 +119,9 @@
 
   /* ── Button ──────────────────────────────────────────────────────────── */
   .matrx-control-button {
-    justify-content: center !important;
+    /* Content alignment is placement (ui-drift's one table): a full-width
+       action row may say \`justify-start\`. */
+    justify-content: center;
     padding-block: 0 !important;
     padding-inline: var(--matrx-control-inset-text) !important;
     border: 1px solid transparent !important;
@@ -174,11 +177,30 @@
   [data-matrx-row-actions] .matrx-control-button[data-variant="quiet"]:not([data-delete]) {
     color: hsl(var(--muted-foreground)) !important;
   }
-  .matrx-control-list-row:hover [data-matrx-row-actions] .matrx-control-button[data-variant="quiet"]:not([data-delete]),
-  .matrx-control-list-row:focus-within [data-matrx-row-actions] .matrx-control-button[data-variant="quiet"]:not([data-delete]) {
+  :is(.matrx-control-list-row, .matrx-control-setting-row):hover [data-matrx-row-actions] .matrx-control-button[data-variant="quiet"]:not([data-delete]),
+  :is(.matrx-control-list-row, .matrx-control-setting-row):focus-within [data-matrx-row-actions] .matrx-control-button[data-variant="quiet"]:not([data-delete]) {
     color: hsl(var(--foreground)) !important;
   }
 
+  /* Split button: the pair carries the half-gap; inside it they join. */
+  .matrx-control-split {
+    display: inline-flex !important;
+    flex-shrink: 0;
+    margin-inline: var(--matrx-control-half-gap) !important;
+  }
+  .matrx-control-split > .matrx-control {
+    margin-inline: 0 !important;
+  }
+  .matrx-control-split > .matrx-control:not(:last-child) {
+    border-start-end-radius: 0 !important;
+    border-end-end-radius: 0 !important;
+  }
+  .matrx-control-split > .matrx-control:not(:first-child) {
+    border-start-start-radius: 0 !important;
+    border-end-start-radius: 0 !important;
+    border-inline-start: 1px solid hsl(var(--background) / 0.3) !important;
+  }
+
   /* ── Field (input capsule) and Select trigger ───────────────────────── */
   .matrx-control-field,
   .matrx-control-select {
@@ -190,6 +212,7 @@
     font-weight: 400 !important;
     min-width: 0;
     box-shadow: none !important;
+    border-radius: var(--matrx-control-field-radius) !important;
   }
   .matrx-control-field[data-glyph="start"] {
     padding-inline-start: var(--matrx-control-inset-glyph) !important;
@@ -209,6 +232,17 @@
     color: inherit;
     cursor: text;
   }
+  .matrx-control-field > button {
+    all: unset;
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    color: hsl(var(--muted-foreground));
+    cursor: pointer;
+  }
+  .matrx-control-field > button:hover {
+    color: hsl(var(--foreground));
+  }
   .matrx-control-field > input::placeholder {
     color: hsl(var(--muted-foreground));
   }
@@ -314,6 +348,9 @@
     scrollbar-width: none;
     border-bottom: 1px solid hsl(var(--border)) !important;
   }
+  .matrx-control-tabs[data-rule="none"] {
+    border-bottom: 0 !important;
+  }
   .matrx-control-tab {
     box-sizing: border-box !important;
     position: relative;

package/dist/controls.d.cts

@@ -55,9 +55,13 @@ type ButtonProps = LabelledButton | IconOnlyButton;
  * icon + text, or icon-only (a 28px circle). `asChild` puts the skin on a link.
  */
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+/** A split button: two Buttons joined — the act, and its menu of variants. */
+declare const SplitButton: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 interface FieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
     /** Leading 16px glyph. */
     icon?: React.ReactNode;
+    /** Trailing content inside the capsule — a clear button, a unit. */
+    end?: React.ReactNode;
 }
 /** The input capsule. `className`/`style` place the capsule (width, flex). */
 declare const Field: React.ForwardRefExoticComponent<FieldProps & React.RefAttributes<HTMLInputElement>>;
@@ -89,6 +93,8 @@ interface SegmentOption<T extends string = string> {
     /** An 11px count after the label. */
     count?: number | null;
     ariaLabel?: string;
+    /** Hover text (an icon-only segment's name). */
+    title?: string;
     disabled?: boolean;
 }
 interface SegmentedControlProps<T extends string = string> {
@@ -105,9 +111,12 @@ declare function SegmentedControl<T extends string = string>({ value, onValueCha
 interface TabsProps<T extends string = string> extends SegmentedControlProps<T> {
     /** `underline` for page sections (default); `capsule` for filters. */
     variant?: "underline" | "capsule";
+    /** Underline tabs draw their own hairline (default). Pass `false` when the row the tabs
+     *  sit in already draws it — the selected underline then lands on that row's rule. */
+    rule?: boolean;
 }
 /** Tabs: underline for page sections, capsule for filters. */
-declare function Tabs<T extends string = string>({ variant, value, onValueChange, data, className, style, "aria-label": ariaLabel, }: TabsProps<T>): React.JSX.Element;
+declare function Tabs<T extends string = string>({ variant, rule, value, onValueChange, data, className, style, "aria-label": ariaLabel, }: TabsProps<T>): React.JSX.Element;
 type BadgeTone = "neutral" | "primary" | "success" | "warning" | "destructive" | "info";
 interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
     /** A status tint from the role tokens. Default `neutral` (plain outline). */
@@ -229,4 +238,4 @@ interface PromoBannerProps {
  */
 declare function PromoBanner({ icon, eyebrow, title, line, chips, action, tone, className, "aria-label": ariaLabel, }: PromoBannerProps): React.JSX.Element;
 
-export { Badge, type BadgeProps, type BadgeTone, Button, type ButtonProps, ConfirmDelete, type ConfirmDeleteProps, ControlRow, type ControlRowProps, ControlScope, type ControlVariant, DangerZone, DeleteButton, type DeleteButtonProps, EmptyState, type EmptyStateProps, Field, type FieldProps, PromoBanner, type PromoBannerProps, type PromoTone, RegionSkeleton, type RegionSkeletonProps, RowGroup, type RowGroupProps, SearchField, type SegmentOption, SegmentedControl, type SegmentedControlProps, Select, type SelectOption, type SelectProps, SettingRow, type SettingRowProps, Switch, type SwitchProps, Tabs, type TabsProps, Textarea };
+export { Badge, type BadgeProps, type BadgeTone, Button, type ButtonProps, ConfirmDelete, type ConfirmDeleteProps, ControlRow, type ControlRowProps, ControlScope, type ControlVariant, DangerZone, DeleteButton, type DeleteButtonProps, EmptyState, type EmptyStateProps, Field, type FieldProps, PromoBanner, type PromoBannerProps, type PromoTone, RegionSkeleton, type RegionSkeletonProps, RowGroup, type RowGroupProps, SearchField, type SegmentOption, SegmentedControl, type SegmentedControlProps, Select, type SelectOption, type SelectProps, SettingRow, type SettingRowProps, SplitButton, Switch, type SwitchProps, Tabs, type TabsProps, Textarea };

package/dist/controls.d.ts

@@ -55,9 +55,13 @@ type ButtonProps = LabelledButton | IconOnlyButton;
  * icon + text, or icon-only (a 28px circle). `asChild` puts the skin on a link.
  */
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+/** A split button: two Buttons joined — the act, and its menu of variants. */
+declare const SplitButton: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 interface FieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
     /** Leading 16px glyph. */
     icon?: React.ReactNode;
+    /** Trailing content inside the capsule — a clear button, a unit. */
+    end?: React.ReactNode;
 }
 /** The input capsule. `className`/`style` place the capsule (width, flex). */
 declare const Field: React.ForwardRefExoticComponent<FieldProps & React.RefAttributes<HTMLInputElement>>;
@@ -89,6 +93,8 @@ interface SegmentOption<T extends string = string> {
     /** An 11px count after the label. */
     count?: number | null;
     ariaLabel?: string;
+    /** Hover text (an icon-only segment's name). */
+    title?: string;
     disabled?: boolean;
 }
 interface SegmentedControlProps<T extends string = string> {
@@ -105,9 +111,12 @@ declare function SegmentedControl<T extends string = string>({ value, onValueCha
 interface TabsProps<T extends string = string> extends SegmentedControlProps<T> {
     /** `underline` for page sections (default); `capsule` for filters. */
     variant?: "underline" | "capsule";
+    /** Underline tabs draw their own hairline (default). Pass `false` when the row the tabs
+     *  sit in already draws it — the selected underline then lands on that row's rule. */
+    rule?: boolean;
 }
 /** Tabs: underline for page sections, capsule for filters. */
-declare function Tabs<T extends string = string>({ variant, value, onValueChange, data, className, style, "aria-label": ariaLabel, }: TabsProps<T>): React.JSX.Element;
+declare function Tabs<T extends string = string>({ variant, rule, value, onValueChange, data, className, style, "aria-label": ariaLabel, }: TabsProps<T>): React.JSX.Element;
 type BadgeTone = "neutral" | "primary" | "success" | "warning" | "destructive" | "info";
 interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
     /** A status tint from the role tokens. Default `neutral` (plain outline). */
@@ -229,4 +238,4 @@ interface PromoBannerProps {
  */
 declare function PromoBanner({ icon, eyebrow, title, line, chips, action, tone, className, "aria-label": ariaLabel, }: PromoBannerProps): React.JSX.Element;
 
-export { Badge, type BadgeProps, type BadgeTone, Button, type ButtonProps, ConfirmDelete, type ConfirmDeleteProps, ControlRow, type ControlRowProps, ControlScope, type ControlVariant, DangerZone, DeleteButton, type DeleteButtonProps, EmptyState, type EmptyStateProps, Field, type FieldProps, PromoBanner, type PromoBannerProps, type PromoTone, RegionSkeleton, type RegionSkeletonProps, RowGroup, type RowGroupProps, SearchField, type SegmentOption, SegmentedControl, type SegmentedControlProps, Select, type SelectOption, type SelectProps, SettingRow, type SettingRowProps, Switch, type SwitchProps, Tabs, type TabsProps, Textarea };
+export { Badge, type BadgeProps, type BadgeTone, Button, type ButtonProps, ConfirmDelete, type ConfirmDeleteProps, ControlRow, type ControlRowProps, ControlScope, type ControlVariant, DangerZone, DeleteButton, type DeleteButtonProps, EmptyState, type EmptyStateProps, Field, type FieldProps, PromoBanner, type PromoBannerProps, type PromoTone, RegionSkeleton, type RegionSkeletonProps, RowGroup, type RowGroupProps, SearchField, type SegmentOption, SegmentedControl, type SegmentedControlProps, Select, type SelectOption, type SelectProps, SettingRow, type SettingRowProps, SplitButton, Switch, type SwitchProps, Tabs, type TabsProps, Textarea };

package/dist/controls.js

@@ -756,8 +756,12 @@ var Button2 = React7.forwardRef(
   }
 );
 Button2.displayName = "Button";
+var SplitButton = React7.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx7("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__ */ jsxs5(
+  ({ className, style, icon, end, ...props }, ref) => /* @__PURE__ */ jsxs5(
     "label",
     {
       "data-matrx-control": "field",
@@ -766,7 +770,8 @@ var Field = React7.forwardRef(
       style,
       children: [
         icon,
-        /* @__PURE__ */ jsx7("input", { ref, ...props })
+        /* @__PURE__ */ jsx7("input", { ref, ...props }),
+        end
       ]
     }
   )
@@ -839,6 +844,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",
@@ -874,6 +880,7 @@ function SegmentedControl({
 }
 function Tabs({
   variant = "underline",
+  rule = true,
   value,
   onValueChange,
   data,
@@ -900,6 +907,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__ */ jsxs5(
@@ -1420,6 +1428,7 @@ export {
   SegmentedControl,
   Select,
   SettingRow,
+  SplitButton,
   Switch,
   Tabs,
   Textarea