uikit-react-public 0.50.0 → 0.50.2

package/dist/components/Alert/Alert.d.ts

@@ -1,5 +1,6 @@
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, ReactElement } from 'react';
 import { IconProps } from '../Icon';
+import { ButtonProps } from '../Button/Button';
 import { default as AlertMessage } from './AlertMessage';
 import { default as AlertTitle } from './AlertTitle';
 import { MarginProps } from '../common/marginsStyle';
@@ -14,11 +15,12 @@ export interface AlertBaseProps extends HTMLAttributes<HTMLDivElement> {
     type: AlertType;
     iconProps?: Omit<IconProps, 'svg'>;
     contentProps?: HTMLAttributes<HTMLDivElement>;
+    actionButton?: ReactElement<ButtonProps>;
     testId?: string;
 }
 export type AlertProps = AlertBaseProps & MarginProps;
 declare const Alert: {
-    ({ type, iconProps, contentProps, children, testId, className, ...props }: AlertProps): import("react").JSX.Element;
+    ({ type, iconProps, contentProps, actionButton, children, testId, className, ...props }: AlertProps): import("react").JSX.Element;
     Title: ({ children, testId, className, ...props }: import('./AlertTitle').AlertTitleProps) => import("react").JSX.Element;
     Message: ({ testId, className, children, ...props }: import('./AlertMessage').AlertMessageProps) => import("react").JSX.Element;
 };

package/dist/components/Alert/Alert.stories.d.ts

@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
     component: {
-        ({ type, iconProps, contentProps, children, testId, className, ...props }: import('./Alert').AlertProps): import("react").JSX.Element;
+        ({ type, iconProps, contentProps, actionButton, children, testId, className, ...props }: import('./Alert').AlertProps): import("react").JSX.Element;
         Title: ({ children, testId, className, ...props }: import('./AlertTitle').AlertTitleProps) => import("react").JSX.Element;
         Message: ({ testId, className, children, ...props }: import('./AlertMessage').AlertMessageProps) => import("react").JSX.Element;
     } & import('./Alert').IAlertSubComponents;
@@ -30,6 +30,14 @@ declare const meta: {
         children: {
             control: false;
         };
+        actionButton: {
+            control: false;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
         m: {
             table: {
                 type: {
@@ -143,4 +151,5 @@ export declare const Info: Story;
 export declare const Success: Story;
 export declare const Warning: Story;
 export declare const Error: Story;
+export declare const WithActionButton: Story;
 export declare const CommonMargins: Story;

package/dist/components/Button/Button.d.ts

@@ -2,17 +2,27 @@ import { ReactElement, ElementType, ComponentPropsWithRef } from 'react';
 import { MarginProps } from '../common/marginsStyle';
 export declare const NAME = "ucl-uikit-button";
 type PolymorphicRef<C extends ElementType> = ComponentPropsWithRef<C>['ref'];
-export type ButtonVariant = 'accent' | 'primary' | 'secondary' | 'tertiary' | 'primary-subtle' | 'secondary-subtle' | 'tertiary-no-padding' | 'primary-destructive' | 'secondary-destructive' | 'tertiary-destructive' | 'primary-warning';
+export type ButtonVariant = 'accent' | 'primary' | 'secondary' | 'tertiary' | 'primary-subtle' | 'secondary-subtle' | 'tertiary-no-padding' | 'primary-destructive' | 'secondary-destructive' | 'tertiary-destructive' | 'tertiary-destructive-no-padding' | 'primary-warning' | 'primary-success';
 type LegacySize = 'default';
 export interface ButtonBaseProps {
     variant?: ButtonVariant;
-    /** @deprecated Use variant="primary-destructive" / "secondary-destructive" instead */
+    /** @deprecated Use a destructive variant directly */
     destructive?: boolean;
     size?: 'xsmall' | 'small' | 'medium' | 'large' | LegacySize;
+    /** Whether the button is rendered on a light background */
+    onLight?: boolean;
     selected?: boolean;
     disabled?: boolean;
-    icon?: ReactElement;
+    icon?: ReactElement<{
+        className?: string;
+    }>;
     iconPosition?: 'left' | 'right';
+    leftIcon?: ReactElement<{
+        className?: string;
+    }>;
+    rightIcon?: ReactElement<{
+        className?: string;
+    }>;
     tooltip?: string;
     loading?: boolean;
     fullWidth?: boolean;
@@ -23,6 +33,6 @@ export type ButtonProps<C extends ElementType = 'button'> = {
     ref?: PolymorphicRef<C>;
     className?: string;
 } & ButtonBaseProps & MarginProps & Omit<ComponentPropsWithRef<C>, keyof ButtonBaseProps | 'as'>;
-declare const Button: <C extends ElementType = "button">({ as, variant, destructive, size, selected, disabled, icon, iconPosition, tooltip, loading, fullWidth, testId, ref, children, className, ...props }: ButtonProps<C>) => import("react").JSX.Element;
+declare const Button: <C extends ElementType = "button">({ as, variant, destructive, size, onLight, selected, disabled, icon, iconPosition, leftIcon, rightIcon, tooltip, loading, fullWidth, testId, ref, children, className, ...props }: ButtonProps<C>) => import("react").JSX.Element;
 declare const MemoizedButton: typeof Button;
 export default MemoizedButton;

package/dist/components/Button/Button.stories.d.ts

@@ -1,13 +1,13 @@
 import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
-    component: <C extends import('react').ElementType = "button">({ as, variant, destructive, size, selected, disabled, icon, iconPosition, tooltip, loading, fullWidth, testId, ref, children, className, ...props }: import('./Button').ButtonProps<C>) => import("react").JSX.Element;
+    component: <C extends import('react').ElementType = "button">({ as, variant, destructive, size, onLight, selected, disabled, icon, iconPosition, leftIcon, rightIcon, tooltip, loading, fullWidth, testId, ref, children, className, ...props }: import('./Button').ButtonProps<C>) => import("react").JSX.Element;
     parameters: {
         layout: string;
     };
     argTypes: {
         variant: {
-            options: readonly ["accent", "primary", "secondary", "tertiary", "primary-subtle", "secondary-subtle", "tertiary-no-padding", "primary-destructive", "secondary-destructive", "tertiary-destructive", "primary-warning"];
+            options: readonly ["accent", "primary", "secondary", "tertiary", "primary-subtle", "secondary-subtle", "tertiary-no-padding", "primary-destructive", "secondary-destructive", "tertiary-destructive", "tertiary-destructive-no-padding", "primary-warning", "primary-success"];
             control: {
                 type: "select";
             };
@@ -52,6 +52,13 @@ declare const meta: {
             };
             type: "boolean";
         };
+        onLight: {
+            control: {
+                type: "boolean";
+            };
+            type: "boolean";
+            description: string;
+        };
         disabled: {
             control: {
                 type: "boolean";
@@ -71,6 +78,22 @@ declare const meta: {
                 };
             };
         };
+        leftIcon: {
+            control: false;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        rightIcon: {
+            control: false;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
         children: {
             control: {
                 type: "text";
@@ -237,6 +260,9 @@ export declare const Secondary: Story;
 export declare const Tertiary: Story;
 export declare const Accent: Story;
 export declare const Destructive: Story;
+export declare const DestructiveTertiaryNoPadding: Story;
+export declare const Success: Story;
+export declare const OnDark: Story;
 export declare const PrimarySubtle: Story;
 export declare const Small: Story;
 export declare const Large: Story;
@@ -261,6 +287,7 @@ export declare const IconOnly: Story & {
         };
     };
 };
+export declare const WithTwoIcons: Story;
 export declare const Loading: Story;
 export declare const Link: Story;
 export declare const FullWidth: Story;

package/dist/components/Button/style/buttonPrimarySubtleStyle.d.ts

@@ -1,4 +1,4 @@
 import { ThemeType } from '../../../theme';
 import { ButtonBaseProps } from '../Button';
-declare const buttonPrimarySubtleStyle: (theme: ThemeType, selected: ButtonBaseProps["selected"], disabled: ButtonBaseProps["disabled"], loading: ButtonBaseProps["loading"], paddingPx: number) => string;
+declare const buttonPrimarySubtleStyle: (theme: ThemeType, selected: ButtonBaseProps["selected"], disabled: ButtonBaseProps["disabled"], loading: ButtonBaseProps["loading"]) => string;
 export default buttonPrimarySubtleStyle;

package/dist/components/Button/style/buttonPrimarySuccessStyle.d.ts

@@ -0,0 +1,4 @@
+import { ThemeType } from '../../../theme';
+import { ButtonBaseProps } from '../Button';
+declare const buttonPrimarySuccessStyle: (theme: ThemeType, selected: ButtonBaseProps["selected"], disabled: ButtonBaseProps["disabled"], loading: ButtonBaseProps["loading"]) => string;
+export default buttonPrimarySuccessStyle;

package/dist/components/Button/style/buttonSecondaryStyle.d.ts

@@ -1,4 +1,4 @@
 import { ThemeType } from '../../../theme';
 import { ButtonBaseProps } from '../Button';
-declare const buttonSecondaryStyle: (theme: ThemeType, selected: ButtonBaseProps["selected"], disabled: ButtonBaseProps["disabled"], loading: ButtonBaseProps["loading"]) => string;
+declare const buttonSecondaryStyle: (theme: ThemeType, selected: ButtonBaseProps["selected"], disabled: ButtonBaseProps["disabled"], loading: ButtonBaseProps["loading"], onLight: ButtonBaseProps["onLight"]) => string;
 export default buttonSecondaryStyle;

package/dist/components/Button/style/buttonSecondarySubtleStyle.d.ts

@@ -1,4 +1,4 @@
 import { ThemeType } from '../../../theme';
 import { ButtonBaseProps } from '../Button';
-declare const buttonSecondarySubtleStyle: (theme: ThemeType, selected: ButtonBaseProps["selected"], disabled: ButtonBaseProps["disabled"], loading: ButtonBaseProps["loading"], paddingPx: number) => string;
+declare const buttonSecondarySubtleStyle: (theme: ThemeType, selected: ButtonBaseProps["selected"], disabled: ButtonBaseProps["disabled"], loading: ButtonBaseProps["loading"]) => string;
 export default buttonSecondarySubtleStyle;

package/dist/components/Button/style/buttonTertiaryDestructiveNoPaddingStyle.d.ts

@@ -0,0 +1,4 @@
+import { ThemeType } from '../../../theme';
+import { ButtonBaseProps } from '../Button';
+declare const buttonTertiaryDestructiveNoPaddingStyle: (theme: ThemeType, disabled: ButtonBaseProps["disabled"], loading: ButtonBaseProps["loading"]) => string;
+export default buttonTertiaryDestructiveNoPaddingStyle;

package/dist/components/Button/style/buttonTertiaryDestructiveStyle.d.ts

@@ -1,4 +1,4 @@
 import { ThemeType } from '../../../theme';
 import { ButtonBaseProps } from '../Button';
-declare const buttonTertiaryDestructiveStyle: (theme: ThemeType, selected: ButtonBaseProps["selected"], disabled: ButtonBaseProps["disabled"], loading: ButtonBaseProps["loading"], paddingPx: number) => string;
+declare const buttonTertiaryDestructiveStyle: (theme: ThemeType, selected: ButtonBaseProps["selected"], disabled: ButtonBaseProps["disabled"], loading: ButtonBaseProps["loading"]) => string;
 export default buttonTertiaryDestructiveStyle;

package/dist/components/Button/style/buttonTertiaryNoPaddingStyle.d.ts

@@ -1,4 +1,4 @@
 import { ThemeType } from '../../../theme';
 import { ButtonBaseProps } from '../Button';
-declare const buttonTertiaryNoPaddingStyle: (theme: ThemeType, disabled: ButtonBaseProps["disabled"], loading: ButtonBaseProps["loading"], paddingPx: number) => string;
+declare const buttonTertiaryNoPaddingStyle: (theme: ThemeType, disabled: ButtonBaseProps["disabled"], loading: ButtonBaseProps["loading"], onLight: ButtonBaseProps["onLight"]) => string;
 export default buttonTertiaryNoPaddingStyle;

package/dist/components/Button/style/buttonTertiaryStyle.d.ts

@@ -1,4 +1,4 @@
 import { ThemeType } from '../../../theme';
 import { ButtonBaseProps } from '../Button';
-declare const buttonTertiaryStyle: (theme: ThemeType, selected: ButtonBaseProps["selected"], disabled: ButtonBaseProps["disabled"], loading: ButtonBaseProps["loading"], paddingPx: number) => string;
+declare const buttonTertiaryStyle: (theme: ThemeType, selected: ButtonBaseProps["selected"], disabled: ButtonBaseProps["disabled"], loading: ButtonBaseProps["loading"]) => string;
 export default buttonTertiaryStyle;