@zvoove/unity-ui 2.29.1 → 2.30.0

package/dist/unity-ui.d.ts

@@ -128,9 +128,9 @@ export declare type AnnouncementType = 'added' | 'removed' | 'cleared' | 'compon
 export declare const Avatar: ({ size, type: typeProp, name, image, initialsAmount, variant, }: AvatarProps) => JSX.Element;
 
 declare const AVATAR_SIZES: {
-    readonly SMALL: "small";
-    readonly MEDIUM: "medium";
-    readonly LARGE: "large";
+    readonly SM: "sm";
+    readonly MD: "md";
+    readonly LG: "lg";
 };
 
 export declare const AvatarGroup: ({ children, maxLength, total }: AvatarGroupProps) => JSX.Element;
@@ -152,10 +152,18 @@ export declare interface AvatarGroupProps {
 
 export declare interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
-     * The size of the avatar
-     * @default 'large'
+     * The size of the avatar.
+     *
+     * Accepts a single value or a responsive object keyed by viewport.
+     *
+     * @default 'md'
+     *
+     * @remarks
+     * The values `'small' | 'medium' | 'large'` are **deprecated** and kept for
+     * backwards compatibility. They are mapped to `'sm' | 'md' | 'lg'` and will
+     * be removed in v3.0.0.
      */
-    size?: ResponsiveType<AvatarSize>;
+    size?: ResponsiveType<AvatarSize | AvatarSizeLegacy>;
     /**
      * The type of the avatar
      */
@@ -178,7 +186,9 @@ export declare interface AvatarProps extends React.HTMLAttributes<HTMLDivElement
     variant?: 'round' | 'square';
 }
 
-declare type AvatarSize = (typeof AVATAR_SIZES)[keyof typeof AVATAR_SIZES];
+export declare type AvatarSize = (typeof AVATAR_SIZES)[keyof typeof AVATAR_SIZES];
+
+/* Excluded from this release type: AvatarSizeLegacy */
 
 declare type AxisVariant = 'X' | 'Y';
 
@@ -236,6 +246,8 @@ declare const BREAKPOINTS: {
     readonly tablet: 1024;
     readonly laptop: 1280;
     readonly desktop: 1536;
+    readonly wide: 1920;
+    readonly ultrawide: 2560;
 };
 
 export declare const Button: {
@@ -294,7 +306,7 @@ export declare type ButtonsTranslations = {
 };
 
 export declare const Card: {
-    <T extends React.ElementType = "div">({ children, header, headerBgColor, footer, footerBgColor, hideHeaderBorder, borderRadius, elevation, variant, padding, margin, className, overflow, bgColor, height, width, minHeight, maxHeight, minWidth, maxWidth, interactive, as, linkComponent, ...restProps }: CardProps<T> & {
+    <T extends React.ElementType = "div">({ children, header, headerBgColor, footer, footerBgColor, hideHeaderBorder, borderRadius, elevation, variant, padding, margin, className, overflow, bgColor, height, width, minHeight, maxHeight, minWidth, maxWidth, borderStyle, interactive, as, linkComponent, ...restProps }: CardProps<T> & {
         ref?: ForwardedRef<ComponentRef<T>>;
     }): JSX.Element;
     displayName: string;
@@ -310,6 +322,12 @@ export declare type CardProps<T extends React.ElementType = 'div'> = UnionAs_2 &
      * When provided, a border-bottom separator is added automatically.
      */
     header?: ReactNode;
+    /**
+     * The style of the border of the card. <br />
+     * Only used when variant is 'outlined'.
+     * @default 'solid'
+     */
+    borderStyle?: 'solid' | 'dashed' | 'dotted';
     /**
      * Background color applied to the header area.
      * Only used when `header` is provided.
@@ -910,7 +928,51 @@ export declare type CustomCommonIconNames = keyof typeof customCommonIconsMap;
  * their default duotone brand colors and a single inherited color.
  */
 export declare const customCommonIconsMap: {
-    readonly zvoove: ({ size, color }: ZvoooveLogoProps) => JSX.Element;
+    readonly zvoove: ({ size, color }: ZvooveLogoProps) => JSX.Element;
+    readonly 'zvoove-one': ({ size, color }: {
+        size?: number;
+        color?: string;
+    }) => JSX.Element;
+    readonly 'zvoove-recruit': ({ size, color, }: {
+        size?: number;
+        color?: string;
+    }) => JSX.Element;
+    readonly 'zvoove-invoice-monitor': ({ size, color, }: {
+        size?: number;
+        color?: string;
+    }) => JSX.Element;
+    readonly 'zvoove-go': ({ size, color }: {
+        size?: number;
+        color?: string;
+    }) => JSX.Element;
+    readonly 'zvoove-intelligence': ({ size, color, }: {
+        size?: number;
+        color?: string;
+    }) => JSX.Element;
+    readonly 'zvoove-free': ({ size, color, }: {
+        size?: number;
+        color?: string;
+    }) => JSX.Element;
+    readonly 'zvoove-work-expert': ({ size, color, }: {
+        size?: number;
+        color?: string;
+    }) => JSX.Element;
+    readonly 'zvoove-elevate': ({ size, color, }: {
+        size?: number;
+        color?: string;
+    }) => JSX.Element;
+    readonly 'zvoove-cashlink': ({ size, color, }: {
+        size?: number;
+        color?: string;
+    }) => JSX.Element;
+    readonly 'zvoove-docs-ai': ({ size, color, }: {
+        size?: number;
+        color?: string;
+    }) => JSX.Element;
+    readonly 'cockpit-x': ({ size, color }: {
+        size?: number;
+        color?: string;
+    }) => JSX.Element;
 };
 
 declare interface CustomIconProps {
@@ -1464,6 +1526,19 @@ export declare interface FormLabelProps {
     required?: boolean;
 }
 
+export declare type Gap = SpacingKeys | {
+    row?: SpacingKeys;
+    column?: SpacingKeys;
+};
+
+declare type GapAxisVariant = 'Row' | 'Column';
+
+export declare type GapResponsiveStyles<Attr extends string> = {
+    [K in GenerateGapResponsiveStyleKeys<Attr>]: Record<SpacingKeys, string>;
+};
+
+declare type GenerateGapResponsiveStyleKeys<Attr extends string> = Attr | `${Attr}${ResponsiveBreakpoint}` | `${Attr}${GapAxisVariant}` | `${Attr}${GapAxisVariant}${ResponsiveBreakpoint}`;
+
 export declare type GenerateResponsiveGenericStyleKeys<Attr extends string> = Attr | `${Attr}${ResponsiveBreakpoint}`;
 
 declare type GenerateResponsiveStyleKeys<Attr extends string> = Attr | `${Attr}${ResponsiveBreakpoint}` | `${Attr}${AxisVariant}` | `${Attr}${SideVariant}` | `${Attr}${AxisVariant}${ResponsiveBreakpoint}` | `${Attr}${SideVariant}${ResponsiveBreakpoint}`;
@@ -1483,6 +1558,10 @@ export declare type GenericResponsiveKeys<T extends string> = {
  */
 export declare const getBreakpoint: (width: number) => Viewport;
 
+export declare type GetGapPropsReturnType<Attr extends string> = {
+    [K in GenerateGapResponsiveStyleKeys<Attr>]: SpacingKeys | undefined;
+};
+
 export declare type GetGenericPropsReturnType<Attr extends string, T extends string> = {
     [K in GenerateSimpleResponsiveStyleKeys<Attr>]: T | undefined;
 };
@@ -1569,10 +1648,21 @@ export declare interface GridProps extends React.HTMLAttributes<HTMLDivElement>
      */
     rows?: ResponsiveType<number | string>;
     /**
-     * The gap between the columns.
+     * The gap between grid items.
+     *
+     * Accepts either a single spacing key applied to both axes, or an object
+     * with `row` / `column` keys to target each axis independently.
+     * Fully responsive: any per-breakpoint value can itself be a spacing key
+     * or a `{ row, column }` object.
+     *
+     * @example
+     * gap="md"
+     * gap={{ row: 'md', column: 'sm' }}
+     * gap={{ minimum: 'sm', mobile: { row: 'md', column: 'lg' } }}
+     *
      * @default 'none'
      */
-    gap?: ResponsiveType<SpacingKeys>;
+    gap?: ResponsiveType<Gap>;
     /**
      * Define padding to the grid wrapper.
      * @default 'none'
@@ -1592,7 +1682,51 @@ export declare type HighlightStyle = {
 export declare const Icon: ({ name, size, weight, color, type, featured, ...props }: IconProps) => JSX.Element;
 
 declare const iconMap: {
-    readonly zvoove: ({ size, color }: ZvoooveLogoProps) => JSX.Element;
+    readonly zvoove: ({ size, color }: ZvooveLogoProps) => JSX.Element;
+    readonly 'zvoove-one': ({ size, color }: {
+        size?: number;
+        color?: string;
+    }) => JSX.Element;
+    readonly 'zvoove-recruit': ({ size, color, }: {
+        size?: number;
+        color?: string;
+    }) => JSX.Element;
+    readonly 'zvoove-invoice-monitor': ({ size, color, }: {
+        size?: number;
+        color?: string;
+    }) => JSX.Element;
+    readonly 'zvoove-go': ({ size, color }: {
+        size?: number;
+        color?: string;
+    }) => JSX.Element;
+    readonly 'zvoove-intelligence': ({ size, color, }: {
+        size?: number;
+        color?: string;
+    }) => JSX.Element;
+    readonly 'zvoove-free': ({ size, color, }: {
+        size?: number;
+        color?: string;
+    }) => JSX.Element;
+    readonly 'zvoove-work-expert': ({ size, color, }: {
+        size?: number;
+        color?: string;
+    }) => JSX.Element;
+    readonly 'zvoove-elevate': ({ size, color, }: {
+        size?: number;
+        color?: string;
+    }) => JSX.Element;
+    readonly 'zvoove-cashlink': ({ size, color, }: {
+        size?: number;
+        color?: string;
+    }) => JSX.Element;
+    readonly 'zvoove-docs-ai': ({ size, color, }: {
+        size?: number;
+        color?: string;
+    }) => JSX.Element;
+    readonly 'cockpit-x': ({ size, color }: {
+        size?: number;
+        color?: string;
+    }) => JSX.Element;
     readonly add: Icon_2;
     readonly 'add-circle': Icon_2;
     readonly 'add-file': Icon_2;
@@ -2726,7 +2860,7 @@ export declare interface RejectedFile {
     errorMessage: string;
 }
 
-declare type ResponsiveBreakpoint = 'SM' | 'MD' | 'LG' | 'XL' | '2XL';
+declare type ResponsiveBreakpoint = 'SM' | 'MD' | 'LG' | 'XL' | '2XL' | '3XL' | '4XL';
 
 export declare type ResponsiveGenericStyles<Attr extends string, T extends string = string> = {
     [K in GenerateResponsiveGenericStyleKeys<Attr>]: Record<T, string>;
@@ -3330,9 +3464,19 @@ export declare interface StackProps extends React.HTMLAttributes<HTMLDivElement>
      */
     children: ReactNode;
     /**
-     * Define gap between elements
+     * Define gap between elements.
+     *
+     * Accepts either a single spacing key applied to both axes, or an object
+     * with `row` / `column` keys to target each axis independently.
+     * Fully responsive: any per-breakpoint value can itself be a spacing key
+     * or a `{ row, column }` object.
+     *
+     * @example
+     * gap="md"
+     * gap={{ row: 'sm', column: 'md' }}
+     * gap={{ minimum: 'sm', mobile: { row: 'md', column: 'lg' } }}
      */
-    gap?: ResponsiveType<SpacingKeys>;
+    gap?: ResponsiveType<Gap>;
     /**
      * Define the direction of the stack
      */
@@ -3642,15 +3786,28 @@ export declare interface TagProps extends React.HTMLAttributes<HTMLSpanElement>
      */
     tone?: 'dark' | 'light';
     /**
-     * The size of the tag
+     * The size of the tag.
+     *
+     * Accepts a single value or a responsive object keyed by viewport.
+     *
+     * @default 'md'
+     *
+     * @remarks
+     * The values `'small' | 'medium' | 'large'` are **deprecated** and kept for
+     * backwards compatibility. They are mapped to `'sm' | 'md' | 'lg'` and will
+     * be removed in v3.0.0.
      */
-    size?: 'large' | 'medium' | 'small';
+    size?: ResponsiveType<TagSize | TagSizeLegacy>;
     /**
      * The icon of the tag
      */
     icon?: CommonIconNames;
 }
 
+export declare type TagSize = 'sm' | 'md' | 'lg';
+
+/* Excluded from this release type: TagSizeLegacy */
+
 export declare const Textarea: ForwardRefExoticComponent<TextareaProps & RefAttributes<HTMLTextAreaElement>>;
 
 export declare interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'className' | 'style'> {
@@ -3824,8 +3981,17 @@ export declare type TypographyProps<T extends TypographyElements = 'p'> = Omit<R
     variant?: 'display' | 'body' | 'title' | 'headline' | 'label';
     /**
      * The size of the typography.
+     *
+     * Accepts a single value or a responsive object keyed by viewport.
+     *
+     * @default 'md'
+     *
+     * @remarks
+     * The values `'small' | 'medium' | 'large'` are **deprecated** and kept for
+     * backwards compatibility. They are mapped to `'sm' | 'md' | 'lg'` and will
+     * be removed in v3.0.0.
      */
-    size?: 'small' | 'medium' | 'large';
+    size?: ResponsiveType<TypographySize | TypographySizeLegacy>;
     /**
      * The html element of the typography. The TS type of the chosen element will be extended so you the component will accept all the props of the chosen element.
      */
@@ -3858,6 +4024,10 @@ export declare type TypographyProps<T extends TypographyElements = 'p'> = Omit<R
     wrap?: boolean;
 };
 
+export declare type TypographySize = 'sm' | 'md' | 'lg';
+
+/* Excluded from this release type: TypographySizeLegacy */
+
 declare type Union = {
     /**
      * Whether the select is multiple.
@@ -4687,37 +4857,95 @@ export declare interface ValidationEvent {
 
 export declare type Viewport = keyof typeof BREAKPOINTS;
 
-declare interface ZvoooveLogoProps {
-    size?: number;
-    color?: string;
-}
-
 export declare const ZvooveBrand: {
-    ({ hideIcon, hideName, iconSize, nameHeight, }: ZvooveBrandProps): JSX.Element;
+    ({ product, iconStyle, size, hideIcon, hideName, hideTagline, tagline: taglineProp, iconSize: iconSizeProp, nameHeight: nameHeightProp, taglineSize: taglineSizeProp, }: ZvooveBrandProps): JSX.Element;
     displayName: string;
 };
 
+/**
+ * Visual style of the logomark.
+ * - `duotone`: brand colors in light mode, switches to the themed flat
+ *   variant in dark mode so the logomark always follows the surface tone.
+ * - `flat`: a single-color version using the surface foreground token,
+ *   themed in both light and dark mode.
+ */
+export declare type ZvooveBrandIconStyle = 'duotone' | 'flat';
+
 export declare interface ZvooveBrandProps {
     /**
-     * Hide the icon (logomark).
+     * The zvoove product to display. Drives both the logomark and the tagline.
+     * @default 'default'
+     */
+    product?: ZvooveProduct;
+    /**
+     * Visual style of the logomark.
+     * @default 'duotone'
+     */
+    iconStyle?: ZvooveBrandIconStyle;
+    /**
+     * Overall size of the brand lock-up. Sets sensible defaults for the
+     * logomark, wordmark and tagline while keeping the Figma design ratios.
+     * Individual `iconSize`, `nameHeight` and `taglineSize` props can
+     * override the values picked from the size.
+     * @default 'md'
+     */
+    size?: ZvooveBrandSize;
+    /**
+     * Hide the logomark.
      * @default false
      */
     hideIcon?: boolean;
     /**
-     * Hide the name (wordmark).
+     * Hide the "zvoove" wordmark.
      * @default false
      */
     hideName?: boolean;
     /**
-     * Size of the icon in pixels.
-     * @default 22
+     * Hide the product tagline (e.g. "One", "Recruit").
+     * Has no effect when `product="default"` since the default brand has no tagline.
+     * @default false
+     */
+    hideTagline?: boolean;
+    /**
+     * Override the product tagline with a custom string. Falls back to the
+     * tagline derived from `product` when omitted. Useful for sub-products,
+     * environment labels (e.g. "Beta", "Staging") or fully custom branding.
+     * Has no effect when `hideTagline` is `true`.
+     */
+    tagline?: string;
+    /**
+     * Override the logomark size in pixels. Falls back to the value derived
+     * from `size`.
      */
     iconSize?: number;
     /**
-     * Height of the name in pixels.
-     * @default 12
+     * Override the "zvoove" wordmark height in pixels. Falls back to the
+     * value derived from `size`.
      */
     nameHeight?: number;
+    /**
+     * Override the product tagline font size in pixels. Falls back to the
+     * value derived from `size`.
+     */
+    taglineSize?: number;
+}
+
+/**
+ * Overall size of the brand lock-up. Each tier scales the logomark,
+ * wordmark and tagline together while keeping the design ratios.
+ * `md` matches the Figma baseline (icon 32px, wordmark 13px, tagline 24px).
+ */
+export declare type ZvooveBrandSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+declare interface ZvooveLogoProps {
+    size?: number;
+    color?: string;
 }
 
+/**
+ * The zvoove product whose brand identity to display.
+ * Determines the logomark and the tagline text (e.g. "One", "Recruit").
+ */
+export declare type ZvooveProduct = 'default' | 'one' | 'recruit' | 'invoice-monitor' | 'go' | 'insights' | 'work-expert' | 'elevate' | 'cashlink' | 'docs-ai';
+
 export { }