@zvoove/unity-ui 2.24.0 → 2.26.0

package/dist/unity-ui.d.ts

@@ -1,4 +1,5 @@
 import { ChangeEventHandler } from 'react';
+import { CSSProperties } from 'react';
 import { default as default_2 } from 'react';
 import { Dispatch } from 'react';
 import { ElementType } from 'react';
@@ -180,7 +181,7 @@ declare type AvatarSize = (typeof AVATAR_SIZES)[keyof typeof AVATAR_SIZES];
 
 declare type AxisVariant = 'X' | 'Y';
 
-export declare type BackgroundColors = 'background' | 'outline' | 'outline-variant' | 'outline-low' | 'primary' | 'primary-hover' | 'primary-active' | 'secondary' | 'tertiary' | 'primary-container' | 'secondary-container' | 'tertiary-container' | 'tertiary-container-hover' | 'tertiary-container-active' | 'primary-fixed' | 'primary-fixed-dim' | 'secondary-fixed' | 'secondary-fixed-dim' | 'tertiary-fixed' | 'tertiary-fixed-dim' | 'surface' | 'surface-bright' | 'surface-dim' | 'surface-variant' | 'surface-container-lowest' | 'surface-container-low' | 'surface-container' | 'surface-container-high' | 'surface-container-highest' | 'error' | 'error-container' | 'inverse-surface' | 'inverse-on-surface' | 'inverse-primary' | 'scrim' | 'yellow' | 'dark-yellow' | 'yellow-container' | 'green' | 'dark-green' | 'green-container' | 'pink' | 'dark-pink' | 'pink-container' | 'steel-blue' | 'dark-steel-blue' | 'steel-blue-container' | 'container-neutral' | 'container-neutral-hover';
+export declare type BackgroundColors = 'background' | 'outline' | 'outline-variant' | 'outline-low' | 'primary' | 'primary-hover' | 'primary-active' | 'secondary' | 'tertiary' | 'primary-container' | 'secondary-container' | 'tertiary-container' | 'tertiary-container-hover' | 'tertiary-container-active' | 'primary-fixed' | 'primary-fixed-dim' | 'secondary-fixed' | 'secondary-fixed-dim' | 'tertiary-fixed' | 'tertiary-fixed-dim' | 'surface' | 'surface-bright' | 'surface-dim' | 'surface-variant' | 'surface-container-lowest' | 'surface-container-low' | 'surface-container' | 'surface-container-high' | 'surface-container-highest' | 'error' | 'error-container' | 'inverse-surface' | 'inverse-on-surface' | 'inverse-primary' | 'scrim' | 'yellow' | 'dark-yellow' | 'yellow-container' | 'green' | 'dark-green' | 'green-container' | 'pink' | 'dark-pink' | 'pink-container' | 'steel-blue' | 'dark-steel-blue' | 'steel-blue-container' | 'container-neutral' | 'container-neutral-hover' | 'code-surface' | 'code-surface-variant';
 
 export declare const Badge: ({ children, variant, content, dot, }: BadgeProps) => JSX.Element;
 
@@ -588,7 +589,7 @@ declare type ChipPropsTypeIcon = {
 };
 
 export declare const CodeBlock: {
-    ({ code, filename, ...props }: CodeBlockProps): JSX.Element;
+    ({ code, filename, language, variant, ...props }: CodeBlockProps): JSX.Element;
     displayName: string;
 };
 
@@ -598,9 +599,23 @@ export declare interface CodeBlockProps extends React.HTMLAttributes<HTMLPreElem
      */
     code: string;
     /**
-     * Optional filename shown in the header bar.
+     * Optional filename shown in the header bar (block variant only).
      */
     filename?: string;
+    /**
+     * Programming language for syntax highlighting (e.g. `"typescript"`,
+     * `"python"`, `"bash"`). When provided the code is tokenized and
+     * coloured via react-syntax-highlighter / Prism.
+     * @default 'text'
+     */
+    language?: string;
+    /**
+     * Display variant. In `auto` mode the component renders inline for
+     * single-line code without a filename, and as a full block otherwise.
+     * Use `inline` or `block` to force a specific rendering.
+     * @default 'auto'
+     */
+    variant?: 'auto' | 'block' | 'inline';
 }
 
 export declare type ColumnAlign = (typeof align)[keyof typeof align];
@@ -789,6 +804,7 @@ export declare const commonIconsMap: {
     readonly robot: Icon_2;
     readonly save: Icon_2;
     readonly search: Icon_2;
+    readonly 'search-plus': Icon_2;
     readonly 'send-message': Icon_2;
     readonly settings: Icon_2;
     readonly 'setup-time': Icon_2;
@@ -1395,7 +1411,7 @@ export declare interface FloatSearchTranslations {
     close?: string;
 }
 
-export declare type ForegroundColors = 'primary' | 'secondary' | 'tertiary' | 'yellow' | 'green' | 'pink' | 'steel-blue' | 'dark-yellow' | 'dark-green' | 'dark-pink' | 'dark-steel-blue' | 'inverse-on-surface' | 'on-primary' | 'on-secondary' | 'on-tertiary' | 'on-primary-container' | 'on-secondary-container' | 'on-tertiary-container' | 'on-primary-fixed' | 'on-primary-fixed-variant' | 'on-secondary-fixed' | 'on-secondary-fixed-variant' | 'on-tertiary-fixed' | 'on-tertiary-fixed-variant' | 'on-surface' | 'on-surface-variant' | 'on-surface-variant-lowest' | 'on-error' | 'on-error-container' | 'on-yellow' | 'on-dark-yellow' | 'on-yellow-container' | 'on-green' | 'on-dark-green' | 'on-green-container' | 'on-pink' | 'on-dark-pink' | 'on-pink-container' | 'on-steel-blue' | 'on-dark-steel-blue' | 'on-steel-blue-container' | 'error' | 'on-scrim' | 'on-container-neutral';
+export declare type ForegroundColors = 'primary' | 'secondary' | 'tertiary' | 'yellow' | 'green' | 'pink' | 'steel-blue' | 'dark-yellow' | 'dark-green' | 'dark-pink' | 'dark-steel-blue' | 'inverse-on-surface' | 'on-primary' | 'on-secondary' | 'on-tertiary' | 'on-primary-container' | 'on-secondary-container' | 'on-tertiary-container' | 'on-primary-fixed' | 'on-primary-fixed-variant' | 'on-secondary-fixed' | 'on-secondary-fixed-variant' | 'on-tertiary-fixed' | 'on-tertiary-fixed-variant' | 'on-surface' | 'on-surface-variant' | 'on-surface-variant-lowest' | 'on-error' | 'on-error-container' | 'on-yellow' | 'on-dark-yellow' | 'on-yellow-container' | 'on-green' | 'on-dark-green' | 'on-green-container' | 'on-pink' | 'on-dark-pink' | 'on-pink-container' | 'on-steel-blue' | 'on-dark-steel-blue' | 'on-steel-blue-container' | 'error' | 'on-scrim' | 'on-container-neutral' | 'code-on-surface';
 
 export declare const FormLabel: ({ value, required, htmlFor, ...props }: FormLabelProps) => JSX.Element;
 
@@ -1527,6 +1543,10 @@ export declare interface GridProps extends React.HTMLAttributes<HTMLDivElement>
     margin?: ResponsiveType<Margin>;
 }
 
+export declare type HighlightStyle = {
+    [key: string]: CSSProperties;
+};
+
 export declare const Icon: ({ name, size, weight, color, type, featured, ...props }: IconProps) => JSX.Element;
 
 declare const iconMap: {
@@ -1710,6 +1730,7 @@ declare const iconMap: {
     readonly robot: Icon_2;
     readonly save: Icon_2;
     readonly search: Icon_2;
+    readonly 'search-plus': Icon_2;
     readonly 'send-message': Icon_2;
     readonly settings: Icon_2;
     readonly 'setup-time': Icon_2;
@@ -1856,6 +1877,57 @@ declare const iconTypes: {
     readonly gray: "gray";
 };
 
+export declare const ImageVisualizer: {
+    ({ src, alt, width, height, maxWidth, maxHeight, minWidth, minHeight, borderRadius, objectFit, }: ImageVisualizerProps): JSX.Element;
+    displayName: string;
+};
+
+export declare interface ImageVisualizerProps {
+    /**
+     * The source URL of the image.
+     */
+    src: string;
+    /**
+     * The alt text of the image.
+     * @default ''
+     */
+    alt?: string;
+    /**
+     * The width of the image container.
+     */
+    width?: ResponsiveType<number | string>;
+    /**
+     * The height of the image container.
+     */
+    height?: ResponsiveType<number | string>;
+    /**
+     * The minimum width of the image container.
+     */
+    minWidth?: ResponsiveType<number | string>;
+    /**
+     * The minimum height of the image container.
+     */
+    minHeight?: ResponsiveType<number | string>;
+    /**
+     * The maximum width of the image container.
+     */
+    maxWidth?: ResponsiveType<number | string>;
+    /**
+     * The maximum height of the image container.
+     */
+    maxHeight?: ResponsiveType<number | string>;
+    /**
+     * The border radius of the image container.
+     * @default 'sm'
+     */
+    borderRadius?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * The CSS object-fit of the image inside the container.
+     * @default 'cover'
+     */
+    objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+}
+
 export declare const InfoBox: {
     ({ message, variant, icon, elevated, }: InfoBoxProps): JSX.Element;
     displayName: string;