@movable/ui 3.17.1 → 3.18.0

package/lib/components/InkComponentTile/InkComponentTile.d.ts

@@ -0,0 +1,39 @@
+import { ComponentType } from 'react';
+import { StackProps } from '@mui/material';
+import { InkTileIconProps } from './TileIconWrapper';
+export type InkComponentTileProps = StackProps & {
+    /**
+     * The label/title of the tile
+     */
+    label: string;
+    /**
+     * Optional icon component to display
+     */
+    icon?: ComponentType<InkTileIconProps>;
+    /**
+     * Optional description text below the label
+     */
+    description?: string;
+    /**
+     * Whether the tile is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether this is a dynamic component
+     */
+    isDynamic?: boolean;
+    /**
+     * Whether the tile is currently being dragged
+     */
+    isDragging?: boolean;
+    /**
+     * Whether the tile should stretch to fill its container width
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Optional data-cy attribute for testing
+     */
+    'data-cy'?: string;
+};
+export declare const InkComponentTile: import("react").ForwardRefExoticComponent<Omit<InkComponentTileProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/lib/components/InkComponentTile/TileIconWrapper.d.ts

@@ -0,0 +1,11 @@
+import { ComponentType } from 'react';
+export interface InkTileIconProps {
+    size?: 'small' | 'normal';
+}
+interface TileIconWrapperProps {
+    iconComponent?: ComponentType<InkTileIconProps>;
+    isDragging?: boolean;
+    'data-cy'?: string;
+}
+declare const TileIconWrapper: ({ iconComponent: IconComponent, isDragging, "data-cy": dataCy, }: TileIconWrapperProps) => import("react/jsx-runtime").JSX.Element | null;
+export default TileIconWrapper;

package/lib/components/InkComponentTile/index.d.ts

@@ -0,0 +1 @@
+export { InkComponentTile, type InkComponentTileProps, } from './InkComponentTile';

package/lib/components/index.d.ts

@@ -15,6 +15,7 @@ export { InkEmptyState } from './InkEmptyState';
 export { InkAttributeList } from './InkAttributeList';
 export { InkImage } from './InkImage';
 export { InkDrawer } from './InkDrawer';
+export { InkComponentTile, type InkComponentTileProps, } from './InkComponentTile';
 export * from './InkSnackbar';
 export * from './InkCheckboxGroup';
 export * from './InkRadioGroup';

package/lib/index.d.ts

@@ -12,6 +12,7 @@ import type { ChartOptions } from 'chart.js';
 import { CheckboxProps } from '@mui/material';
 import { CheckboxProps as CheckboxProps_2 } from '@mui/material/Checkbox';
 import { ChipProps } from '@mui/material';
+import { ComponentType } from 'react';
 import { CustomContentProps } from 'notistack';
 import { DataGridPremiumProps } from '@mui/x-data-grid-premium';
 import type { DialogProps } from '@mui/material/Dialog';
@@ -49,7 +50,8 @@ import { Ref } from 'react';
 import { RefAttributes } from 'react';
 import { SelectProps } from '@mui/material';
 import { SnackbarProviderProps } from 'notistack';
-import { StackProps } from '@mui/material/Stack';
+import { StackProps } from '@mui/material';
+import { StackProps as StackProps_2 } from '@mui/material/Stack';
 import { StandardTextFieldProps } from '@mui/material';
 import { SvgIconTypeMap } from '@mui/material';
 import { SwitchProps } from '@mui/material/Switch';
@@ -421,7 +423,7 @@ export declare type InkCheckboxGroupProps = {
     formGroupProps?: FormGroupProps;
     formLabel: string;
     formLabelProps?: FormLabelProps;
-    stackProps?: StackProps;
+    stackProps?: StackProps_2;
     currentValue: string[];
     onChange: (values: string[]) => void;
     required?: boolean;
@@ -449,6 +451,44 @@ declare type InkChipPropType = {
     isLoading?: boolean;
 };
 
+export declare const InkComponentTile: ForwardRefExoticComponent<Omit<InkComponentTileProps, "ref"> & RefAttributes<HTMLDivElement>>;
+
+export declare type InkComponentTileProps = StackProps & {
+    /**
+     * The label/title of the tile
+     */
+    label: string;
+    /**
+     * Optional icon component to display
+     */
+    icon?: ComponentType<InkTileIconProps>;
+    /**
+     * Optional description text below the label
+     */
+    description?: string;
+    /**
+     * Whether the tile is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether this is a dynamic component
+     */
+    isDynamic?: boolean;
+    /**
+     * Whether the tile is currently being dragged
+     */
+    isDragging?: boolean;
+    /**
+     * Whether the tile should stretch to fill its container width
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Optional data-cy attribute for testing
+     */
+    'data-cy'?: string;
+};
+
 /**
  * InkDataGrid is a customized DataGridPremium component with Movable Ink styling and behavior.
  * It provides automatic height adjustment, hidden column separators, and transparent row hover effects.
@@ -708,7 +748,7 @@ export declare type InkRadioGroupProps = {
     onChange: (value: string) => void;
     radioGroupProps?: RadioGroupProps;
     formLabelProps?: FormLabelProps;
-    stackProps?: StackProps;
+    stackProps?: StackProps_2;
     required?: boolean;
     error?: boolean;
     helperText?: string;
@@ -863,6 +903,10 @@ export declare type InkTextFieldProps = TextFieldProps & {
     name: string;
 };
 
+declare interface InkTileIconProps {
+    size?: 'small' | 'normal';
+}
+
 export declare function InkToggleIcon({ value, size, ariaLabel, icon, ...rest }: InkToggleIconProps): JSX_2.Element;
 
 export declare function InkToggleIconGroup({ id, toggleButtons, ariaLabel, size, single, value, enforceValueSet, onChange, sx, ...rest }: InkToggleIconGroupProps): JSX_2.Element;