@payfit/unity-components 2.60.17 → 2.60.18

package/dist/esm/components/action-bar/ActionBar.variants.d.ts

@@ -18,7 +18,7 @@ export declare const actionBar: import('tailwind-variants').TVReturnType<{
     base: string[];
     prefixArea: string[];
     actionArea: string[];
-}, import('tailwind-variants').TVReturnType<{
+}, import('tailwind-variants').TVReturnTypeLike<{
     hasPrefixContent: {
         true: {
             base: string;
@@ -28,4 +28,4 @@ export declare const actionBar: import('tailwind-variants').TVReturnType<{
     base: string[];
     prefixArea: string[];
     actionArea: string[];
-}, undefined, unknown, unknown, undefined>>;
+}>>;

package/dist/esm/components/action-bar/parts/ActionBarButton.d.ts

@@ -38,7 +38,7 @@ export type ActionBarActionProps = ActionBarButtonProps;
  * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/action-bar GitHub}
  * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library Figma}
  */
-declare const ActionBarButton: import('react').ForwardRefExoticComponent<Omit<ButtonProps, "size" | "color" | "type" | "variant"> & {
+declare const ActionBarButton: import('react').ForwardRefExoticComponent<Omit<ButtonProps, "color" | "size" | "type" | "variant"> & {
     /**
      * The visual variant of the button.
      * @default 'secondary'
@@ -48,7 +48,7 @@ declare const ActionBarButton: import('react').ForwardRefExoticComponent<Omit<Bu
 /**
  * @deprecated Use ActionBarButton instead
  */
-declare const ActionBarAction: import('react').ForwardRefExoticComponent<Omit<ButtonProps, "size" | "color" | "type" | "variant"> & {
+declare const ActionBarAction: import('react').ForwardRefExoticComponent<Omit<ButtonProps, "color" | "size" | "type" | "variant"> & {
     /**
      * The visual variant of the button.
      * @default 'secondary'

package/dist/esm/components/action-bar/parts/ActionBarRoot.d.ts

@@ -17,7 +17,7 @@ export declare const actionBarRoot: import('tailwind-variants').TVReturnType<{
         absolute: string[];
         fixed: string[];
     };
-}, undefined, import('tailwind-variants').TVReturnType<{
+}, undefined, import('tailwind-variants').TVReturnTypeLike<{
     isVisible: {
         true: string[];
         false: string[];
@@ -26,7 +26,7 @@ export declare const actionBarRoot: import('tailwind-variants').TVReturnType<{
         absolute: string[];
         fixed: string[];
     };
-}, undefined, string[], unknown, unknown, undefined>>;
+}, undefined>>;
 export interface ActionBarRootProps extends PropsWithChildren {
     /** Offset from the bottom of the table. It uses Unity's standard spacing tokens. */
     offsetBottom?: '$25' | '$50' | '$75' | '$100' | '$125' | '$200' | '$300' | '$400' | '$500' | '$600' | '$800' | '$1000' | number;

package/dist/esm/components/alert/parts/AlertActions.d.ts

@@ -2,20 +2,20 @@ import { VariantProps } from '@payfit/unity-themes';
 import { PropsWithChildren } from 'react';
 declare const alertActions: import('tailwind-variants').TVReturnType<{
     direction: {
-        row: string;
-        column: string;
+        row: "uy:flex-row";
+        column: "uy:flex-col";
     };
 }, undefined, "uy:flex uy:gap-100", {
     direction: {
-        row: string;
-        column: string;
+        row: "uy:flex-row";
+        column: "uy:flex-col";
     };
-}, undefined, import('tailwind-variants').TVReturnType<{
+}, undefined, import('tailwind-variants').TVReturnTypeLike<{
     direction: {
-        row: string;
-        column: string;
+        row: "uy:flex-row";
+        column: "uy:flex-col";
     };
-}, undefined, "uy:flex uy:gap-100", unknown, unknown, undefined>>;
+}, undefined>>;
 export type AlertActionsProps = PropsWithChildren<{
     /**
      * The direction in which to lay out the child actions.

package/dist/esm/components/autocomplete/Autocomplete.d.ts

@@ -40,7 +40,7 @@ declare const autocomplete: import('tailwind-variants').TVReturnType<{
     icon: string[];
     invalidIcon: string[];
     wrapperState: string[];
-}, import('tailwind-variants').TVReturnType<{
+}, import('tailwind-variants').TVReturnTypeLike<{
     isReadOnly: {
         true: {
             base: string;
@@ -59,7 +59,7 @@ declare const autocomplete: import('tailwind-variants').TVReturnType<{
     icon: string[];
     invalidIcon: string[];
     wrapperState: string[];
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export interface AutocompleteProps<T extends object> extends Omit<ComboBoxProps<T>, 'className' | 'style' | 'children' | 'onSelectionChange'>, VariantProps<typeof autocomplete> {
     /** Custom placeholder text for the search input */
     placeholder?: string;

package/dist/esm/components/autocomplete/parts/AutocompleteItem.d.ts

@@ -2,20 +2,20 @@ import { VariantProps } from '@payfit/unity-themes';
 import { ListBoxItemProps } from 'react-aria-components/ListBox';
 export declare const autocompleteItem: import('tailwind-variants').TVReturnType<{
     isDisabled: {
-        false: string;
-        true: string;
+        false: "uy:data-[hovered=\"true\"]:bg-surface-neutral-hover";
+        true: "uy:cursor-not-allowed";
     };
 }, undefined, string[], {
     isDisabled: {
-        false: string;
-        true: string;
+        false: "uy:data-[hovered=\"true\"]:bg-surface-neutral-hover";
+        true: "uy:cursor-not-allowed";
     };
-}, undefined, import('tailwind-variants').TVReturnType<{
+}, undefined, import('tailwind-variants').TVReturnTypeLike<{
     isDisabled: {
-        false: string;
-        true: string;
+        false: "uy:data-[hovered=\"true\"]:bg-surface-neutral-hover";
+        true: "uy:cursor-not-allowed";
     };
-}, undefined, string[], unknown, unknown, undefined>>;
+}, undefined>>;
 export interface AutocompleteItemProps extends VariantProps<typeof autocompleteItem>, Omit<ListBoxItemProps, 'className' | 'style' | 'routerOptions' | 'referrerPolicy' | 'ping' | 'target' | 'hrefLang' | 'download' | 'ref' | 'rel' | 'aria-label'> {
 }
 /**

package/dist/esm/components/autocomplete/parts/AutocompleteItemGroup.d.ts

@@ -3,18 +3,18 @@ import { ForwardedRef } from 'react';
 import { ListBoxSectionProps } from 'react-aria-components/ListBox';
 export declare const autocompleteItemGroup: import('tailwind-variants').TVReturnType<{
     [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
-            header?: import('tailwind-merge').ClassNameValue;
-            separator?: import('tailwind-merge').ClassNameValue;
+        [key: string]: import('tailwind-variants').ClassValue | {
+            base?: import('tailwind-variants').ClassValue;
+            header?: import('tailwind-variants').ClassValue;
+            separator?: import('tailwind-variants').ClassValue;
         };
     };
 } | {
     [x: string]: {
-        [x: string]: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
-            header?: import('tailwind-merge').ClassNameValue;
-            separator?: import('tailwind-merge').ClassNameValue;
+        [x: string]: import('tailwind-variants').ClassValue | {
+            base?: import('tailwind-variants').ClassValue;
+            header?: import('tailwind-variants').ClassValue;
+            separator?: import('tailwind-variants').ClassValue;
         };
     };
 } | {}, {
@@ -23,21 +23,21 @@ export declare const autocompleteItemGroup: import('tailwind-variants').TVReturn
     separator: string;
 }, undefined, {
     [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
-            header?: import('tailwind-merge').ClassNameValue;
-            separator?: import('tailwind-merge').ClassNameValue;
+        [key: string]: import('tailwind-variants').ClassValue | {
+            base?: import('tailwind-variants').ClassValue;
+            header?: import('tailwind-variants').ClassValue;
+            separator?: import('tailwind-variants').ClassValue;
         };
     };
 } | {}, {
     base: string;
     header: string;
     separator: string;
-}, import('tailwind-variants').TVReturnType<unknown, {
+}, import('tailwind-variants').TVReturnTypeLike<unknown, {
     base: string;
     header: string;
     separator: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export interface AutocompleteItemGroupProps<T> extends VariantProps<typeof autocompleteItemGroup>, ListBoxSectionProps<T> {
     /**
      * The label text displayed at the top of the group

package/dist/esm/components/autocomplete/parts/AutocompletePanel.d.ts

@@ -4,16 +4,16 @@ import { PopoverProps } from 'react-aria-components/Popover';
 import { AutocompleteProps } from '../Autocomplete.js';
 export declare const autocompletePanel: import('tailwind-variants').TVReturnType<{
     [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
-            list?: import('tailwind-merge').ClassNameValue;
+        [key: string]: import('tailwind-variants').ClassValue | {
+            base?: import('tailwind-variants').ClassValue;
+            list?: import('tailwind-variants').ClassValue;
         };
     };
 } | {
     [x: string]: {
-        [x: string]: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
-            list?: import('tailwind-merge').ClassNameValue;
+        [x: string]: import('tailwind-variants').ClassValue | {
+            base?: import('tailwind-variants').ClassValue;
+            list?: import('tailwind-variants').ClassValue;
         };
     };
 } | {}, {
@@ -21,18 +21,18 @@ export declare const autocompletePanel: import('tailwind-variants').TVReturnType
     list: string;
 }, undefined, {
     [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
-            list?: import('tailwind-merge').ClassNameValue;
+        [key: string]: import('tailwind-variants').ClassValue | {
+            base?: import('tailwind-variants').ClassValue;
+            list?: import('tailwind-variants').ClassValue;
         };
     };
 } | {}, {
     base: string;
     list: string;
-}, import('tailwind-variants').TVReturnType<unknown, {
+}, import('tailwind-variants').TVReturnTypeLike<unknown, {
     base: string;
     list: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export interface AutocompletePanelProps<T extends object> extends VariantProps<typeof autocompletePanel>, Omit<PopoverProps, 'children'> {
     /** Width of the panel, used to match the width of the search input */
     panelWidth: string | null;

package/dist/esm/components/avatar/Avatar.d.ts

@@ -3,166 +3,166 @@ import { PropsWithChildren } from 'react';
 import * as React from 'react';
 declare const avatarRoot: import('tailwind-variants').TVReturnType<{} | {
     size: {
-        xs: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
+        xs: import('tailwind-variants').ClassValue | {
+            base?: import('tailwind-variants').ClassValue;
         };
-        sm: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
+        sm: import('tailwind-variants').ClassValue | {
+            base?: import('tailwind-variants').ClassValue;
         };
-        md: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
+        md: import('tailwind-variants').ClassValue | {
+            base?: import('tailwind-variants').ClassValue;
         };
-        lg: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
+        lg: import('tailwind-variants').ClassValue | {
+            base?: import('tailwind-variants').ClassValue;
         };
-        xl: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
+        xl: import('tailwind-variants').ClassValue | {
+            base?: import('tailwind-variants').ClassValue;
         };
     };
     variant: {
-        circle: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
+        circle: import('tailwind-variants').ClassValue | {
+            base?: import('tailwind-variants').ClassValue;
         };
-        square: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
+        square: import('tailwind-variants').ClassValue | {
+            base?: import('tailwind-variants').ClassValue;
         };
     };
     color: {
-        teal: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
+        teal: import('tailwind-variants').ClassValue | {
+            base?: import('tailwind-variants').ClassValue;
         };
-        plum: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
+        plum: import('tailwind-variants').ClassValue | {
+            base?: import('tailwind-variants').ClassValue;
         };
-        purple: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
+        purple: import('tailwind-variants').ClassValue | {
+            base?: import('tailwind-variants').ClassValue;
         };
-        orange: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
+        orange: import('tailwind-variants').ClassValue | {
+            base?: import('tailwind-variants').ClassValue;
         };
-        neutral: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
+        neutral: import('tailwind-variants').ClassValue | {
+            base?: import('tailwind-variants').ClassValue;
         };
-        warning: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
+        warning: import('tailwind-variants').ClassValue | {
+            base?: import('tailwind-variants').ClassValue;
         };
-        success: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
+        success: import('tailwind-variants').ClassValue | {
+            base?: import('tailwind-variants').ClassValue;
         };
-        info: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
+        info: import('tailwind-variants').ClassValue | {
+            base?: import('tailwind-variants').ClassValue;
         };
-        danger: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
+        danger: import('tailwind-variants').ClassValue | {
+            base?: import('tailwind-variants').ClassValue;
         };
-        promo: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
+        promo: import('tailwind-variants').ClassValue | {
+            base?: import('tailwind-variants').ClassValue;
         };
-        primary: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
+        primary: import('tailwind-variants').ClassValue | {
+            base?: import('tailwind-variants').ClassValue;
         };
     };
 }, undefined, "uy:inline-block uy:relative uy:shrink-0", {
     size: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
+        xs: "uy:size-200";
+        sm: "uy:size-300";
+        md: "uy:size-400";
+        lg: "uy:size-500";
+        xl: "uy:size-[56px]";
     };
     variant: {
-        circle: string;
-        square: string;
+        circle: "uy:rounded-circle";
+        square: "uy:aspect-square";
     };
     color: {
-        teal: string;
-        plum: string;
-        purple: string;
-        orange: string;
-        neutral: string;
-        warning: string;
-        success: string;
-        info: string;
-        danger: string;
-        promo: string;
-        primary: string;
+        teal: "uy:bg-surface-decorative-teal-lowest uy:text-content-decorative-teal-high";
+        plum: "uy:bg-surface-decorative-plum-lowest uy:text-content-decorative-plum";
+        purple: "uy:bg-surface-decorative-purple-lowest uy:text-content-decorative-purple";
+        orange: "uy:bg-surface-decorative-orange-lowest uy:text-content-decorative-orange";
+        neutral: "uy:bg-surface-neutral-lowest uy:text-content-neutral";
+        warning: "uy:bg-surface-warning-low uy:text-content-warning-high";
+        success: "uy:bg-surface-success-low uy:text-content-success-high";
+        info: "uy:bg-surface-info-low uy:text-content-info-high";
+        danger: "uy:bg-surface-danger-low uy:text-content-danger-high";
+        promo: "uy:bg-surface-promo-low uy:text-content-promo-high";
+        primary: "uy:bg-surface-primary-lowest uy:text-content-primary-high";
     };
 }, undefined, import('tailwind-variants').TVReturnType<{
     size: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
+        xs: "uy:size-200";
+        sm: "uy:size-300";
+        md: "uy:size-400";
+        lg: "uy:size-500";
+        xl: "uy:size-[56px]";
     };
     variant: {
-        circle: string;
-        square: string;
+        circle: "uy:rounded-circle";
+        square: "uy:aspect-square";
     };
     color: {
-        teal: string;
-        plum: string;
-        purple: string;
-        orange: string;
-        neutral: string;
-        warning: string;
-        success: string;
-        info: string;
-        danger: string;
-        promo: string;
-        primary: string;
+        teal: "uy:bg-surface-decorative-teal-lowest uy:text-content-decorative-teal-high";
+        plum: "uy:bg-surface-decorative-plum-lowest uy:text-content-decorative-plum";
+        purple: "uy:bg-surface-decorative-purple-lowest uy:text-content-decorative-purple";
+        orange: "uy:bg-surface-decorative-orange-lowest uy:text-content-decorative-orange";
+        neutral: "uy:bg-surface-neutral-lowest uy:text-content-neutral";
+        warning: "uy:bg-surface-warning-low uy:text-content-warning-high";
+        success: "uy:bg-surface-success-low uy:text-content-success-high";
+        info: "uy:bg-surface-info-low uy:text-content-info-high";
+        danger: "uy:bg-surface-danger-low uy:text-content-danger-high";
+        promo: "uy:bg-surface-promo-low uy:text-content-promo-high";
+        primary: "uy:bg-surface-primary-lowest uy:text-content-primary-high";
     };
 }, undefined, undefined, {
     size: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
+        xs: "uy:size-200";
+        sm: "uy:size-300";
+        md: "uy:size-400";
+        lg: "uy:size-500";
+        xl: "uy:size-[56px]";
     };
     variant: {
-        circle: string;
-        square: string;
+        circle: "uy:rounded-circle";
+        square: "uy:aspect-square";
     };
     color: {
-        teal: string;
-        plum: string;
-        purple: string;
-        orange: string;
-        neutral: string;
-        warning: string;
-        success: string;
-        info: string;
-        danger: string;
-        promo: string;
-        primary: string;
+        teal: "uy:bg-surface-decorative-teal-lowest uy:text-content-decorative-teal-high";
+        plum: "uy:bg-surface-decorative-plum-lowest uy:text-content-decorative-plum";
+        purple: "uy:bg-surface-decorative-purple-lowest uy:text-content-decorative-purple";
+        orange: "uy:bg-surface-decorative-orange-lowest uy:text-content-decorative-orange";
+        neutral: "uy:bg-surface-neutral-lowest uy:text-content-neutral";
+        warning: "uy:bg-surface-warning-low uy:text-content-warning-high";
+        success: "uy:bg-surface-success-low uy:text-content-success-high";
+        info: "uy:bg-surface-info-low uy:text-content-info-high";
+        danger: "uy:bg-surface-danger-low uy:text-content-danger-high";
+        promo: "uy:bg-surface-promo-low uy:text-content-promo-high";
+        primary: "uy:bg-surface-primary-lowest uy:text-content-primary-high";
     };
-}, undefined, import('tailwind-variants').TVReturnType<{
+}, undefined, import('tailwind-variants').TVReturnTypeLike<{
     size: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
+        xs: "uy:size-200";
+        sm: "uy:size-300";
+        md: "uy:size-400";
+        lg: "uy:size-500";
+        xl: "uy:size-[56px]";
     };
     variant: {
-        circle: string;
-        square: string;
+        circle: "uy:rounded-circle";
+        square: "uy:aspect-square";
     };
     color: {
-        teal: string;
-        plum: string;
-        purple: string;
-        orange: string;
-        neutral: string;
-        warning: string;
-        success: string;
-        info: string;
-        danger: string;
-        promo: string;
-        primary: string;
+        teal: "uy:bg-surface-decorative-teal-lowest uy:text-content-decorative-teal-high";
+        plum: "uy:bg-surface-decorative-plum-lowest uy:text-content-decorative-plum";
+        purple: "uy:bg-surface-decorative-purple-lowest uy:text-content-decorative-purple";
+        orange: "uy:bg-surface-decorative-orange-lowest uy:text-content-decorative-orange";
+        neutral: "uy:bg-surface-neutral-lowest uy:text-content-neutral";
+        warning: "uy:bg-surface-warning-low uy:text-content-warning-high";
+        success: "uy:bg-surface-success-low uy:text-content-success-high";
+        info: "uy:bg-surface-info-low uy:text-content-info-high";
+        danger: "uy:bg-surface-danger-low uy:text-content-danger-high";
+        promo: "uy:bg-surface-promo-low uy:text-content-promo-high";
+        primary: "uy:bg-surface-primary-lowest uy:text-content-primary-high";
     };
-}, undefined, undefined, unknown, unknown, undefined>>>;
+}, undefined>>>;
 type AvatarAccessibleName = {
     'aria-label': string;
     'aria-labelledby'?: string;