uikit-react-public 0.49.6 → 0.50.1

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

@@ -2,16 +2,20 @@ 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';
 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';
     tooltip?: string;
     loading?: boolean;
@@ -23,6 +27,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, 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, 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"];
             control: {
                 type: "select";
             };
@@ -52,6 +52,13 @@ declare const meta: {
             };
             type: "boolean";
         };
+        onLight: {
+            control: {
+                type: "boolean";
+            };
+            type: "boolean";
+            description: string;
+        };
         disabled: {
             control: {
                 type: "boolean";
@@ -237,6 +244,8 @@ 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 OnDark: Story;
 export declare const PrimarySubtle: Story;
 export declare const Small: Story;
 export declare const Large: 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/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;

package/dist/components/Filters/Filter.d.ts

@@ -0,0 +1,20 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export declare const NAME = "ucl-uikit-filter";
+export interface FilterProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    label: string;
+    appliedCount?: number;
+    disabled?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
+    quickFilters?: ReactNode;
+    clearLabel?: string;
+    applyLabel?: string;
+    applyDisabled?: boolean;
+    onClear?: React.MouseEventHandler<HTMLButtonElement>;
+    onApply?: React.MouseEventHandler<HTMLButtonElement>;
+    panelClassName?: string;
+    onOpenChange?: (open: boolean) => void;
+    testId?: string;
+}
+declare const _default: import('react').MemoExoticComponent<({ label, appliedCount, disabled, open, defaultOpen, quickFilters, clearLabel, applyLabel, applyDisabled, onClear, onApply, panelClassName, onOpenChange, testId, className, children, ...props }: FilterProps) => import("react").JSX.Element>;
+export default _default;

package/dist/components/Filters/FilterPanel.d.ts

@@ -0,0 +1,16 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export declare const NAME = "ucl-uikit-filter-panel";
+interface FilterPanelProps extends HTMLAttributes<HTMLDivElement> {
+    label: string;
+    isDesktop: boolean;
+    closeFilter: () => void;
+    quickFilters?: ReactNode;
+    clearLabel?: string;
+    applyLabel?: string;
+    applyDisabled?: boolean;
+    onClear?: React.MouseEventHandler<HTMLButtonElement>;
+    onApply?: React.MouseEventHandler<HTMLButtonElement>;
+    testId?: string;
+}
+declare const _default: import('react').MemoExoticComponent<({ label, isDesktop, closeFilter, quickFilters, clearLabel, applyLabel, applyDisabled, onClear, onApply, testId, className, children, onClick, ...props }: FilterPanelProps) => import("react").JSX.Element>;
+export default _default;

package/dist/components/Filters/Filters.context.d.ts

@@ -0,0 +1,8 @@
+export interface FiltersContextValue {
+    isDesktop: boolean;
+    closeFilters: () => void;
+    activeFilterId: string | null;
+    setActiveFilterId: (id: string | null) => void;
+}
+export declare const FiltersContext: import('react').Context<FiltersContextValue | null>;
+export declare const useFiltersContext: () => FiltersContextValue | null;

package/dist/components/Filters/Filters.d.ts

@@ -0,0 +1,30 @@
+import { HTMLAttributes } from 'react';
+import { default as Filter } from './Filter';
+import { default as QuickFilter } from './QuickFilter';
+export declare const NAME = "ucl-uikit-filters";
+export interface FiltersProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'onReset'> {
+    label?: string;
+    /** Accessible label for the icon-only mobile and tablet trigger. */
+    triggerLabel?: string;
+    appliedCount?: number;
+    open?: boolean;
+    defaultOpen?: boolean;
+    applyDisabled?: boolean;
+    applyLabel?: string;
+    resetLabel?: string;
+    onOpenChange?: (open: boolean) => void;
+    onApply?: React.MouseEventHandler<HTMLButtonElement>;
+    onReset?: React.MouseEventHandler<HTMLButtonElement>;
+    testId?: string;
+}
+export interface FiltersSubComponents {
+    Filter: typeof Filter;
+    QuickFilter: typeof QuickFilter;
+}
+declare const FiltersWithSubComponents: import('react').NamedExoticComponent<FiltersProps> & {
+    readonly type: ({ label, triggerLabel, appliedCount, open, defaultOpen, applyDisabled, applyLabel, resetLabel, onOpenChange, onApply, onReset, testId, className, children, ...props }: FiltersProps) => import("react").JSX.Element;
+} & {
+    Filter: import('react').MemoExoticComponent<({ label, appliedCount, disabled, open, defaultOpen, quickFilters, clearLabel, applyLabel, applyDisabled, onClear, onApply, panelClassName, onOpenChange, testId, className, children, ...props }: import('./Filter').FilterProps) => import("react").JSX.Element>;
+    QuickFilter: import('react').MemoExoticComponent<({ selected, disabled, testId, className, children, type, ...props }: import('./QuickFilter').QuickFilterProps) => import("react").JSX.Element>;
+};
+export default FiltersWithSubComponents;

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

@@ -0,0 +1,17 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: import('react').NamedExoticComponent<import('./Filters').FiltersProps> & {
+        readonly type: ({ label, triggerLabel, appliedCount, open, defaultOpen, applyDisabled, applyLabel, resetLabel, onOpenChange, onApply, onReset, testId, className, children, ...props }: import('./Filters').FiltersProps) => import("react").JSX.Element;
+    } & {
+        Filter: import('react').MemoExoticComponent<({ label, appliedCount, disabled, open, defaultOpen, quickFilters, clearLabel, applyLabel, applyDisabled, onClear, onApply, panelClassName, onOpenChange, testId, className, children, ...props }: import('./Filter').FilterProps) => import("react").JSX.Element>;
+        QuickFilter: import('react').MemoExoticComponent<({ selected, disabled, testId, className, children, type, ...props }: import('./QuickFilter').QuickFilterProps) => import("react").JSX.Element>;
+    };
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/components/Filters/QuickFilter.d.ts

@@ -0,0 +1,8 @@
+import { ButtonHTMLAttributes } from 'react';
+export declare const NAME = "ucl-uikit-quick-filter";
+export interface QuickFilterProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    selected?: boolean;
+    testId?: string;
+}
+declare const _default: import('react').MemoExoticComponent<({ selected, disabled, testId, className, children, type, ...props }: QuickFilterProps) => import("react").JSX.Element>;
+export default _default;

package/dist/components/Filters/__tests__/Filters.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Filters/index.d.ts

@@ -0,0 +1,6 @@
+export { default } from './Filters';
+export { default as Filter } from './Filter';
+export { default as QuickFilter } from './QuickFilter';
+export type { FiltersProps, FiltersSubComponents } from './Filters';
+export type { FilterProps } from './Filter';
+export type { QuickFilterProps } from './QuickFilter';

package/dist/components/Overlay/Overlay.d.ts

@@ -12,6 +12,7 @@ export type OverlaySize = {
 };
 export interface OverlayProps extends HTMLAttributes<HTMLDivElement> {
     reference: RefObject<HTMLElement | null>;
+    positioning?: 'reference' | 'viewport';
     placement?: Placement;
     strategy?: Strategy;
     blanket?: boolean;

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

@@ -41,6 +41,7 @@ declare const meta: {
     };
     decorators: ((Story: import('storybook/internal/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
         reference: import('react').RefObject<HTMLElement | null>;
+        positioning?: "reference" | "viewport" | undefined;
         placement?: import('@floating-ui/utils').Placement | undefined;
         strategy?: import('@floating-ui/utils').Strategy | undefined;
         blanket?: boolean | undefined;

package/dist/components/index.d.ts

@@ -24,6 +24,8 @@ export { default as Blanket } from './Blanket';
 export type { BlanketProps } from './Blanket';
 export { default as Overlay } from './Overlay';
 export type { OverlayProps } from './Overlay';
+export { default as Filters, Filter, QuickFilter } from './Filters';
+export type { FiltersProps, FiltersSubComponents, FilterProps, QuickFilterProps, } from './Filters';
 export { default as Snackbar } from './Snackbar';
 export { Snackbars } from './Snackbar';
 export type { SnackbarProps, SnackbarsItem, SnackbarsPlacement, SnackbarsProps, } from './Snackbar';