@vention/machine-ui 5.15.1 → 5.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vention/machine-ui",
-  "version": "5.15.1",
+  "version": "5.16.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/VentionCo/machine-cloud.git"

package/src/lib/components/vention-button/button-utils.d.ts

@@ -1,6 +1,13 @@
 import { ButtonProps, Theme } from "@mui/material";
 import { Sizes, StrictExtract } from "../../theme/machine-ui-theme";
 import { ReactNode } from "react";
+import { DuotoneIconType, IconType } from "../vention-icon/vention-icon";
+/**
+ * A button icon can either be an arbitrary React node (e.g. a custom SVG component) or a
+ * `VentionIcon` type name. When a type name is provided, the button renders a `VentionIcon`
+ * sized to match the button's size.
+ */
+export type VentionButtonIcon = ReactNode | IconType | DuotoneIconType;
 interface StylingProperties {
     backgroundColor: string;
     backgroundColorOnHover: string;
@@ -17,8 +24,8 @@ export interface VentionButtonProps extends Omit<ButtonProps, "size" | "variant"
     children?: ReactNode;
     variant?: "filled-brand" | "filled" | "outline" | "text-only" | "shaded" | "destructive";
     disabled?: boolean;
-    iconLeft?: ReactNode;
-    iconRight?: ReactNode;
+    iconLeft?: VentionButtonIcon;
+    iconRight?: VentionButtonIcon;
     className?: string;
     type?: "button" | "submit";
     fullWidth?: boolean;
@@ -26,4 +33,5 @@ export interface VentionButtonProps extends Omit<ButtonProps, "size" | "variant"
 }
 export declare function getButtonStylingPropertiesGivenProps(variant: VentionButtonProps["variant"] | "simple", size: VentionButtonProps["size"], theme: Theme): StylingProperties;
 export declare function getButtonHeight(size: VentionButtonProps["size"], theme: Theme): string;
+export declare function getButtonIconSize(size: VentionButtonProps["size"]): number;
 export {};

package/src/lib/components/vention-combobox/vention-combobox.d.ts

@@ -1,3 +1,5 @@
+import { Sizes, StrictExtract } from "../../theme/machine-ui-theme";
+export type VentionComboboxSize = StrictExtract<Sizes, "small" | "medium" | "large">;
 export interface VentionComboboxProps {
     options: {
         value: string;
@@ -9,6 +11,8 @@ export interface VentionComboboxProps {
         value: string;
         label: string;
     }[] | undefined;
+    size: VentionComboboxSize;
+    labelText?: string | undefined;
     placeholder?: string | undefined;
     searchPlaceholder?: string | undefined;
     value: string | null;
@@ -20,6 +24,7 @@ export interface VentionComboboxProps {
     buttonDataTestId?: string | undefined;
     inputDataTestId?: string | undefined;
     clearButtonDataTestId?: string | undefined;
+    labelDataTestId?: string | undefined;
 }
 /**
  * A custom combobox component with optional grouping, search, and clearable selection.
@@ -28,6 +33,8 @@ export interface VentionComboboxProps {
  * @param {VentionComboboxProps} props - Props used to configure the component.
  * @param {Array<{ value: string, label: string, group?: string, dataTestId?: string }>} props.options - List of selectable items. Items can optionally belong to a group.
  * @param {Array<{ value: string, label: string }>} [props.groups] - Group data used for rendering labels above grouped options.
+ * @param {"small" | "medium" | "large"} props.size - Size of the trigger, search input, option typography, and icons.
+ * @param {string} [props.labelText] - Label rendered above the trigger. Its typography follows `size`.
  * @param {string} [props.value] - Currently selected item value.
  * @param {(value: string | null) => void} [props.onChange] - Callback fired when a user selects or clears an option.
  * @param {boolean} [props.isClearable=false] - Whether the selected item can be cleared.
@@ -38,6 +45,7 @@ export interface VentionComboboxProps {
  * @param {string} [props.buttonDataTestId] - Test ID applied to the button.
  * @param {string} [props.inputDataTestId] - Test ID applied to the input field.
  * @param {string} [props.clearButtonDataTestId] - Test ID applied to the clear icon inside the button.
+ * @param {string} [props.labelDataTestId] - Test ID applied to the label element.
  * @param {boolean} [props.autoFocus=true] - Whether the search input should be focused when the menu opens.
  *
  * @returns {JSX.Element} The VentionCombobox component.

package/src/lib/components/vention-icon/vention-icon.d.ts

@@ -5,6 +5,7 @@ export declare const IconSizes: {
     readonly medium: 20;
     readonly large: 24;
 };
+export declare function isVentionIconType(value: unknown): value is IconType | DuotoneIconType;
 interface VentionIconProps {
     type: IconType | DuotoneIconType;
     size?: number;