uikit-react-public 0.11.13

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

@@ -0,0 +1,257 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import('react').MemoExoticComponent<({ as, variant, destructive, size, disabled, icon, iconPosition, tooltip, loading, fullWidth, testId, ref, children, className, ...props }: import('./Button.types').ButtonProps) => import("react/jsx-runtime").JSX.Element>;
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        variant: {
+            options: string[];
+            control: {
+                type: "select";
+            };
+            type: "string";
+        };
+        size: {
+            options: string[];
+            control: {
+                type: "select";
+            };
+            type: "string";
+        };
+        as: {
+            options: string[];
+            control: {
+                type: "select";
+            };
+            type: "string";
+            table: {
+                type: {
+                    summary: string;
+                    detail: string;
+                };
+            };
+        };
+        destructive: {
+            control: {
+                type: "boolean";
+            };
+            type: "boolean";
+        };
+        disabled: {
+            control: {
+                type: "boolean";
+            };
+            type: "boolean";
+        };
+        iconPosition: {
+            control: {
+                type: "select";
+            };
+            options: string[];
+            type: "string";
+            table: {
+                type: {
+                    summary: string;
+                    detail: string;
+                };
+            };
+        };
+        children: {
+            control: {
+                type: "text";
+            };
+            type: "string";
+        };
+        tooltip: {
+            control: {
+                type: "text";
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        loading: {
+            control: {
+                type: "boolean";
+            };
+            type: "boolean";
+        };
+        fullWidth: {
+            control: {
+                type: "boolean";
+            };
+            type: "boolean";
+        };
+        href: {
+            control: {
+                type: "text";
+            };
+            type: "string";
+        };
+        target: {
+            control: {
+                type: "text";
+            };
+            type: "string";
+        };
+        testId: {
+            control: {
+                type: "text";
+            };
+            type: "string";
+        };
+        className: {
+            control: {
+                type: "text";
+            };
+            type: "string";
+        };
+        m: {
+            table: {
+                type: {
+                    summary: string;
+                    detail: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+                disable: boolean;
+            };
+        };
+        mv: {
+            table: {
+                type: {
+                    summary: string;
+                    detail: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+                disable: boolean;
+            };
+        };
+        mh: {
+            table: {
+                type: {
+                    summary: string;
+                    detail: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+                disable: boolean;
+            };
+        };
+        mt: {
+            table: {
+                type: {
+                    summary: string;
+                    detail: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+                disable: boolean;
+            };
+        };
+        mb: {
+            table: {
+                type: {
+                    summary: string;
+                    detail: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+                disable: boolean;
+            };
+        };
+        ml: {
+            table: {
+                type: {
+                    summary: string;
+                    detail: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+                disable: boolean;
+            };
+        };
+        mr: {
+            table: {
+                type: {
+                    summary: string;
+                    detail: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+                disable: boolean;
+            };
+        };
+        noMargins: {
+            control: {
+                type: "boolean";
+            };
+            type: "boolean";
+            default: boolean;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+                disable: true;
+            };
+        };
+    };
+    args: {
+        children: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Tertiary: Story;
+export declare const Destructive: Story;
+export declare const DestructiveSecondary: Story;
+export declare const Small: Story;
+export declare const Large: Story;
+export declare const SmallSecondary: Story;
+export declare const LargeSecondary: Story;
+export declare const Disabled: Story;
+export declare const DisabledSecondary: Story;
+export declare const DisabledTertiary: Story;
+export declare const WithIcon: Story & {
+    argTypes: {
+        iconName: {
+            control: {
+                type: 'select';
+            };
+            options: string[];
+        };
+    };
+};
+export declare const IconOnly: Story & {
+    argTypes: {
+        iconName: {
+            control: {
+                type: 'select';
+            };
+            options: string[];
+        };
+    };
+};
+export declare const Loading: Story;
+export declare const Link: Story;
+export declare const FullWidth: Story;
+export declare const CommonMargins: Story;

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

@@ -0,0 +1,26 @@
+import { ReactElement, ButtonHTMLAttributes, AnchorHTMLAttributes, ComponentPropsWithRef, ElementType, RefObject } from 'react';
+import { MarginProps } from '../common/marginsStyle';
+export interface ButtonBaseProps {
+    variant?: 'primary' | 'secondary' | 'tertiary';
+    destructive?: boolean;
+    size?: 'large' | 'default' | 'small';
+    disabled?: boolean;
+    icon?: ReactElement;
+    iconPosition?: 'left' | 'right';
+    tooltip?: string;
+    loading?: boolean;
+    fullWidth?: boolean;
+    testId?: string;
+    ref?: RefObject<HTMLElement | null>;
+}
+export type ButtonAsButtonProps = ButtonBaseProps & ButtonHTMLAttributes<HTMLButtonElement> & {
+    as?: 'button';
+};
+export type ButtonAsAnchorProps = ButtonBaseProps & AnchorHTMLAttributes<HTMLAnchorElement> & {
+    as: 'a';
+};
+export type ButtonAsCustomProps<C extends ElementType> = ButtonBaseProps & {
+    as: C;
+} & Omit<ComponentPropsWithRef<C>, keyof ButtonBaseProps | 'as'>;
+export type ButtonProps = (ButtonAsButtonProps | ButtonAsAnchorProps | ButtonAsCustomProps<ElementType>) & MarginProps;
+export type Ref = Element;

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,2 @@
+export { default } from './Button';
+export type { ButtonProps } from './Button.types';

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,11 @@
+import { InputHTMLAttributes } from 'react';
+import { MarginProps } from '../common/marginsStyle';
+export declare const NAME = "ucl-uikit-checkbox";
+export interface CheckboxBaseProps extends InputHTMLAttributes<HTMLInputElement> {
+    indeterminate?: boolean;
+    testId?: string;
+}
+export type CheckboxProps = CheckboxBaseProps & MarginProps;
+export type Ref = HTMLInputElement;
+declare const _default: import('react').NamedExoticComponent<CheckboxBaseProps & MarginProps & import('react').RefAttributes<HTMLInputElement>>;
+export default _default;

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

@@ -0,0 +1,25 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import('react').NamedExoticComponent<import('./Checkbox').CheckboxBaseProps & import('../common/marginsStyle').MarginProps & import('react').RefAttributes<HTMLInputElement>>;
+    argTypes: {
+        checked: {
+            control: {
+                type: "boolean";
+            };
+        };
+        indeterminate: {
+            control: {
+                type: "boolean";
+            };
+        };
+        disabled: {
+            control: {
+                type: "boolean";
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/components/Checkbox/LabelledCheckbox.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { CheckboxProps } from './Checkbox';
+import { LabelProps } from '../Label';
+import { MarginProps } from '../common/marginsStyle';
+export declare const NAME = "ucl-uikit-labelled-checkbox";
+export interface LabelledCheckboxBaseProps extends CheckboxProps {
+    labelProps?: LabelProps;
+    children: ReactNode;
+    testId?: string;
+}
+export type LabelledCheckboxProps = LabelledCheckboxBaseProps & MarginProps;
+export type Ref = HTMLInputElement;
+declare const _default: import('react').NamedExoticComponent<LabelledCheckboxBaseProps & MarginProps & import('react').RefAttributes<HTMLInputElement>>;
+export default _default;

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

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

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

@@ -0,0 +1,4 @@
+export { default } from './Checkbox';
+export type { CheckboxProps } from './Checkbox';
+export { default as LabelledCheckbox } from './LabelledCheckbox';
+export type { LabelledCheckboxProps } from './LabelledCheckbox';

package/dist/components/Datepicker/Datepicker.d.ts

@@ -0,0 +1,12 @@
+import { InputHTMLAttributes } from 'react';
+export declare const NAME = "ucl-datepicker";
+export interface DatepickerProps extends InputHTMLAttributes<HTMLInputElement> {
+    date: Date | null | undefined;
+    minDate?: Date | null | undefined;
+    maxDate?: Date | null | undefined;
+    onDateChange: (date: Date | null | undefined) => void;
+    native?: boolean;
+    testId?: string;
+}
+declare const _default: import('react').MemoExoticComponent<({ date, minDate, maxDate, onDateChange, native, testId, className, ...props }: DatepickerProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

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

@@ -0,0 +1,35 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import('react').MemoExoticComponent<({ date, minDate, maxDate, onDateChange, native, testId, className, ...props }: import('./Datepicker').DatepickerProps) => import("react/jsx-runtime").JSX.Element>;
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        date: {
+            control: {
+                type: "date";
+            };
+        };
+        minDate: {
+            control: {
+                type: "date";
+            };
+        };
+        maxDate: {
+            control: {
+                type: "date";
+            };
+        };
+        native: {
+            control: {
+                type: "boolean";
+            };
+        };
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const AsNative: Story;

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

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

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

@@ -0,0 +1,2 @@
+export { default } from './Datepicker';
+export type { DatepickerProps } from './Datepicker';

package/dist/components/Datepicker/subcomponents/CalendarGrid/CalendarGrid.d.ts

@@ -0,0 +1,6 @@
+interface CalendarGridProps {
+    date: Date | null | undefined;
+    onDatePick: (date: Date) => void;
+}
+declare const CalendarGrid: ({ date, onDatePick, }: CalendarGridProps) => import("react/jsx-runtime").JSX.Element;
+export default CalendarGrid;

package/dist/components/Datepicker/subcomponents/CalendarGrid/index.d.ts

@@ -0,0 +1 @@
+export { default } from './CalendarGrid';

package/dist/components/Datepicker/subcomponents/CalendarMenu/CalendarMenu.d.ts

@@ -0,0 +1,8 @@
+interface CalendarMenuProps {
+    date: Date | null | undefined;
+    setDate: (date: Date) => void;
+    onDatePick: () => void;
+    testId?: string;
+}
+declare const CalendarMenu: ({ date, setDate, onDatePick, testId, }: CalendarMenuProps) => import("react/jsx-runtime").JSX.Element;
+export default CalendarMenu;

package/dist/components/Datepicker/subcomponents/CalendarMenu/index.d.ts

@@ -0,0 +1 @@
+export { default } from './CalendarMenu';

package/dist/components/Datepicker/subcomponents/ColumnHeadings/ColumnHeadings.d.ts

@@ -0,0 +1,2 @@
+declare const ColumnHeadings: () => import("react/jsx-runtime").JSX.Element;
+export default ColumnHeadings;

package/dist/components/Datepicker/subcomponents/ColumnHeadings/index.d.ts

@@ -0,0 +1 @@
+export { default } from './ColumnHeadings';

package/dist/components/Datepicker/subcomponents/DateField/DateField.d.ts

@@ -0,0 +1,7 @@
+interface DateFieldProps {
+    date: Date | null | undefined;
+    onChange: (date: Date | null | undefined) => void;
+    testId?: string;
+}
+declare const DateField: ({ date, onChange, testId, }: DateFieldProps) => import("react/jsx-runtime").JSX.Element;
+export default DateField;

package/dist/components/Datepicker/subcomponents/DateField/__tests__/DateField.test.d.ts

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

package/dist/components/Datepicker/subcomponents/DateField/index.d.ts

@@ -0,0 +1 @@
+export { default } from './DateField';

package/dist/components/Datepicker/subcomponents/Day/Day.d.ts

@@ -0,0 +1,10 @@
+export interface DayProps {
+    date: Date | null | undefined;
+    isSelected?: boolean;
+    isToday?: boolean;
+    isInCurrentMonth?: boolean;
+    isDisabled?: boolean;
+    onPick?: (date: Date) => void;
+}
+declare const Day: ({ date, isSelected, isToday, isInCurrentMonth, isDisabled, onPick, }: DayProps) => import("react/jsx-runtime").JSX.Element;
+export default Day;

package/dist/components/Datepicker/subcomponents/Day/Day.stories.d.ts

@@ -0,0 +1,13 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ date, isSelected, isToday, isInCurrentMonth, isDisabled, onPick, }: import('./Day').DayProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Selected: Story;
+export declare const Today: Story;
+export declare const Disabled: Story;
+export declare const NotInCurrentMonth: Story;
+export declare const AlertOnPick: Story;

package/dist/components/Datepicker/subcomponents/Day/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Day';

package/dist/components/Datepicker/subcomponents/MonthSelector/MonthSelector.d.ts

@@ -0,0 +1,6 @@
+interface MonthSelectorProps {
+    date: Date | null | undefined;
+    changeMonth: (change: number) => void;
+}
+declare const MonthSelector: ({ date, changeMonth, }: MonthSelectorProps) => import("react/jsx-runtime").JSX.Element;
+export default MonthSelector;

package/dist/components/Datepicker/subcomponents/MonthSelector/index.d.ts

@@ -0,0 +1 @@
+export { default } from './MonthSelector';

package/dist/components/Datepicker/subcomponents/Native/Native.d.ts

@@ -0,0 +1,9 @@
+interface NativeProps {
+    date?: Date | null | undefined;
+    minDate?: Date | null | undefined;
+    maxDate?: Date | null | undefined;
+    onDateChange?: (date: Date | null | undefined) => void;
+    testId?: string;
+}
+declare const Native: ({ date, minDate, maxDate, onDateChange, testId, ...props }: NativeProps) => import("react/jsx-runtime").JSX.Element;
+export default Native;

package/dist/components/Datepicker/subcomponents/Native/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Native';

package/dist/components/Datepicker/subcomponents/index.d.ts

@@ -0,0 +1,7 @@
+export { default as CalendarGrid } from './CalendarGrid';
+export { default as CalendarMenu } from './CalendarMenu';
+export { default as ColumnHeadings } from './ColumnHeadings';
+export { default as DateField } from './DateField';
+export { default as Day } from './Day';
+export { default as Native } from './Native';
+export { default as MonthSelector } from './MonthSelector';

package/dist/components/Datepicker/utils/getDatesForCalendarGrid/getDatesForCalendarGrid.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Generates an array of dates for a calendar grid, including the current month's dates
+ * and the "grey days" from the previous and next months to complete the grid.
+ * The calendar grid starts on Monday and ends on Sunday.
+ *
+ * @param date - A Date object representing any date in the month for which to generate the calendar grid
+ * @returns An array of Date objects representing all days that should appear in the calendar grid
+ * @throws Will throw an error if no date is provided or if the input is not a Date object
+ *
+ * @example
+ * ```typescript
+ * const date = new Date(2023, 0, 15); // January 15, 2023
+ * const calendarDates = getDatesForCalendarGrid(date);
+ * // Returns array of dates starting from last days of December 2022
+ * // through all of January 2023 and first days of February 2023
+ * // to complete the grid
+ * ```
+ */
+declare const getDatesForCalendarGrid: (date: Date) => Date[];
+export default getDatesForCalendarGrid;

package/dist/components/Datepicker/utils/getDatesForCalendarGrid/getDatesForCalendarGrid.test.d.ts

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

package/dist/components/Datepicker/utils/index.d.ts

@@ -0,0 +1,2 @@
+export { default as getDatesForCalendarGrid } from './getDatesForCalendarGrid/getDatesForCalendarGrid';
+export { default as parseDate } from './parseDateForDateField/parseDateForDateField';

package/dist/components/Datepicker/utils/parseDateForDateField/parseDateForDateField.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Parses a date string and returns a `Date` object.
+ *
+ * Can handle date strings entered by the user as "day/month/year", "day month year", or "day-month-year".
+ * If the date is not in the expected format or contains invalid numbers, it returns `null`.
+ *
+ * Used solely by `<DateField>` component.
+ *
+ * - A one-digit or two-digit year is assumed to be in the 21st century (e.g., '21' becomes '2021').
+ *
+ * @param {string} dateString - The date string to be parsed.
+ *
+ * @future Any additional validation logic for dates entered by the user should be added here.
+ * For example, supporting formats like "day / month / year" (separated with a space and a slash)
+ * or "daymonthyear" (without spaces or separators).
+ *
+ * @returns {void}
+ */
+declare const parseDate: (dateString: string) => Date | null;
+export default parseDate;

package/dist/components/Datepicker/utils/parseDateForDateField/parseDateForDateField.test.d.ts

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

package/dist/components/Dialog/BaseDialog.d.ts

@@ -0,0 +1,16 @@
+import { default as React, HTMLAttributes } from 'react';
+export declare const NAME = "ucl-uikit-base-dialog";
+export declare const SMALL_WIDTH = 495;
+export declare const MEDIUM_WIDTH = 495;
+export declare const LARGE_WIDTH = 740;
+export interface BaseDialogProps extends HTMLAttributes<HTMLDialogElement> {
+    open?: boolean;
+    size?: 'small' | 'medium' | 'large';
+    modal?: boolean;
+    closeOnClickOutside?: boolean;
+    closeOnClickOutsideStopPropagation?: boolean;
+    onClose?: (ev: React.MouseEvent) => void;
+    testId?: string;
+}
+declare const _default: React.MemoExoticComponent<({ open, size, modal, closeOnClickOutside, closeOnClickOutsideStopPropagation, onClose, testId, className, children, ...props }: BaseDialogProps) => import("react/jsx-runtime").JSX.Element | null>;
+export default _default;

package/dist/components/Dialog/Dialog.d.ts

@@ -0,0 +1,23 @@
+import { BaseDialogProps } from './BaseDialog';
+import { default as DialogHeader } from './DialogHeader';
+import { default as DialogBody } from './DialogBody';
+import { default as DialogFooter } from './DialogFooter';
+export declare const NAME = "ucl-uikit-dialog";
+interface DialogContextValue {
+    onClose?: (ev: React.MouseEvent) => void;
+    onSecondaryAction?: () => void;
+    onAction?: () => void;
+}
+export declare const DialogContext: import('react').Context<DialogContextValue>;
+export interface DialogProps extends BaseDialogProps {
+    onAction?: () => void;
+    onSecondaryAction?: () => void;
+}
+declare const Dialog: ({ onClose, onAction, onSecondaryAction, testId, className, children, ...props }: DialogProps) => import("react/jsx-runtime").JSX.Element;
+export interface DialogSubComponents {
+    Header: typeof DialogHeader;
+    Body: typeof DialogBody;
+    Footer: typeof DialogFooter;
+}
+declare const DialogWithSubcomponents: typeof Dialog & DialogSubComponents;
+export default DialogWithSubcomponents;

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

@@ -0,0 +1,16 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: (({ onClose, onAction, onSecondaryAction, testId, className, children, ...props }: import('./Dialog').DialogProps) => import("react/jsx-runtime").JSX.Element) & import('./Dialog').DialogSubComponents;
+    parameters: {
+        docs: {
+            story: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const DefaultDialog: Story;
+export declare const BothButtonsDialog: Story;
+export declare const SecondaryButtonDialog: Story;
+export declare const AlternativeButtonsDialog: Story;