uikit-react-public 0.11.13

package/LICENSE

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright 2025 UCL
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# UIKit - React - Public
+
+React component library.

package/dist/components/Accordion/Accordion.Heading.d.ts

@@ -0,0 +1,8 @@
+import { default as React, HTMLAttributes, JSX } from 'react';
+export declare const NAME = "ucl-accordion__heading";
+interface AccordionHeadingProps extends HTMLAttributes<HTMLElement> {
+    as?: keyof JSX.IntrinsicElements;
+    testId?: string;
+}
+declare const AccordionHeading: React.FC<AccordionHeadingProps>;
+export default AccordionHeading;

package/dist/components/Accordion/Accordion.Panel.d.ts

@@ -0,0 +1,7 @@
+import { default as React, HTMLAttributes } from 'react';
+export declare const NAME = "ucl-accordion__panel";
+interface AccordionPanelProps extends HTMLAttributes<HTMLDivElement> {
+    testId?: string;
+}
+declare const AccordionPanel: React.FC<AccordionPanelProps>;
+export default AccordionPanel;

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,22 @@
+import { default as React, HTMLAttributes } from 'react';
+import { default as AccordionHeading } from './Accordion.Heading';
+import { default as AccordionPanel } from './Accordion.Panel';
+export declare const NAME = "ucl-accordion";
+interface AccordionContextProps {
+    isOpen: boolean;
+    toggleAccordion: () => void;
+    disabled: boolean;
+    size: 'small' | 'medium';
+}
+export declare const useAccordionContext: () => AccordionContextProps;
+export interface AccordionProps extends HTMLAttributes<HTMLDivElement> {
+    testId?: string;
+    size?: 'small' | 'medium';
+    disabled?: boolean;
+    isOpen?: boolean;
+}
+declare const Accordion: React.FC<AccordionProps> & {
+    Heading: typeof AccordionHeading;
+    Panel: typeof AccordionPanel;
+};
+export default Accordion;

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

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

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

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

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

@@ -0,0 +1,27 @@
+import { HTMLAttributes } from 'react';
+import { default as AlertMessage } from './AlertMessage';
+import { default as AlertTitle } from './AlertTitle';
+import { MarginProps } from '../common/marginsStyle';
+export declare const NAME = "ucl-uikit-alert";
+export type AlertType = 'info' | 'success' | 'warning' | 'error';
+export interface AlertContextProps {
+    type: AlertType;
+}
+export declare const AlertContext: import('react').Context<AlertContextProps | null>;
+export declare function useAlertContext(): AlertContextProps;
+export interface AlertBaseProps extends HTMLAttributes<HTMLDivElement> {
+    type: AlertType;
+    testId?: string;
+}
+export type AlertProps = AlertBaseProps & MarginProps;
+declare const Alert: {
+    ({ type, children, testId, className, ...props }: AlertProps): import("react/jsx-runtime").JSX.Element;
+    Title: ({ children, testId, }: import('./AlertTitle').AlertTitleProps) => import("react/jsx-runtime").JSX.Element;
+    Message: ({ testId, className, children, }: import('./AlertMessage').AlertMessageProps) => import("react/jsx-runtime").JSX.Element;
+};
+export interface IAlertSubComponents {
+    Title: typeof AlertTitle;
+    Message: typeof AlertMessage;
+}
+declare const AlertWithSubComponents: typeof Alert & IAlertSubComponents;
+export default AlertWithSubComponents;

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

@@ -0,0 +1,146 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: {
+        ({ type, children, testId, className, ...props }: import('./Alert').AlertProps): import("react/jsx-runtime").JSX.Element;
+        Title: ({ children, testId, }: import('./AlertTitle').AlertTitleProps) => import("react/jsx-runtime").JSX.Element;
+        Message: ({ testId, className, children, }: import('./AlertMessage').AlertMessageProps) => import("react/jsx-runtime").JSX.Element;
+    } & import('./Alert').IAlertSubComponents;
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        type: {
+            options: string[];
+            control: {
+                type: "select";
+            };
+            type: "string";
+        };
+        className: {
+            control: {
+                type: "text";
+            };
+        };
+        testId: {
+            control: {
+                type: "text";
+            };
+        };
+        children: {
+            control: false;
+        };
+        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: {
+        type: "info";
+        testId: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Info: Story;
+export declare const Success: Story;
+export declare const Warning: Story;
+export declare const Error: Story;
+export declare const CommonMargins: Story;

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

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from 'react';
+export declare const NAME = "ucl-uikit-alert__message";
+export interface AlertMessageProps extends HTMLAttributes<HTMLParagraphElement> {
+    testId?: string;
+}
+declare const AlertMessage: ({ testId, className, children, }: AlertMessageProps) => import("react/jsx-runtime").JSX.Element;
+export default AlertMessage;

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

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from 'react';
+export declare const NAME = "ucl-uikit-alert__title";
+export interface AlertTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+    testId?: string;
+}
+declare const AlertTitle: ({ children, testId, }: AlertTitleProps) => import("react/jsx-runtime").JSX.Element;
+export default AlertTitle;

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

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

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

@@ -0,0 +1,6 @@
+export { default } from './Alert';
+export { default as AlertTitle } from './AlertTitle';
+export { default as AlertMessage } from './AlertMessage';
+export type { AlertProps } from './Alert';
+export type { AlertTitleProps } from './AlertTitle';
+export type { AlertMessageProps } from './AlertMessage';

package/dist/components/AppHeader/AppHeader.d.ts

@@ -0,0 +1,20 @@
+import { HTMLAttributes } from 'react';
+import { default as AppHeaderTop } from './AppHeaderTop';
+import { default as AppHeaderBottom } from './AppHeaderBottom';
+import { default as AppHeaderNav } from './AppHeaderNav';
+export declare const NAME = "ucl-timetable-app-header";
+export declare const Z_INDEX = 3;
+export declare const HEIGHT: number;
+export interface AppHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    fixed?: boolean;
+    sticky?: boolean;
+    testId?: string;
+}
+declare const MemoAppHeader: import('react').MemoExoticComponent<({ fixed, sticky, testId, className, children, ...props }: AppHeaderProps) => import("react/jsx-runtime").JSX.Element>;
+export interface IHeaderSubComponents {
+    Top: typeof AppHeaderTop;
+    Bottom: typeof AppHeaderBottom;
+    Nav: typeof AppHeaderNav;
+}
+declare const AppHeaderWithSubComponents: typeof MemoAppHeader & IHeaderSubComponents;
+export default AppHeaderWithSubComponents;

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

@@ -0,0 +1,16 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import('react').NamedExoticComponent<import('./AppHeader').AppHeaderProps> & {
+        readonly type: ({ fixed, sticky, testId, className, children, ...props }: import('./AppHeader').AppHeaderProps) => import("react/jsx-runtime").JSX.Element;
+    } & import('./AppHeader').IHeaderSubComponents;
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const WithBreadcrumbs: Story;
+export declare const WithoutBreadcrumbs: Story;
+export declare const WithMultipleBreadcrumbs: Story;
+export declare const WithAppMenu: Story;

package/dist/components/AppHeader/AppHeaderBottom.d.ts

@@ -0,0 +1,8 @@
+import { HTMLAttributes } from 'react';
+export declare const NAME = "ucl-timetable-app-header__bottom";
+export declare const HEIGHT = 48;
+export interface AppHeaderBottomProps extends HTMLAttributes<HTMLDivElement> {
+    testId?: string;
+}
+declare const _default: import('react').MemoExoticComponent<({ testId, className, children, ...props }: AppHeaderBottomProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/dist/components/AppHeader/AppHeaderNav.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from 'react';
+export declare const NAME = "ucl-timetable-app-header__nav";
+export interface AppHeaderNavProps extends HTMLAttributes<HTMLDivElement> {
+    testId?: string;
+}
+declare const _default: import('react').MemoExoticComponent<({ testId, className, children, ...props }: AppHeaderNavProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/dist/components/AppHeader/AppHeaderTop.d.ts

@@ -0,0 +1,10 @@
+import { HTMLAttributes } from 'react';
+export declare const NAME = "ucl-timetable-app-header__top";
+export declare const HEIGHT = 56;
+export interface AppHeaderTopProps extends HTMLAttributes<HTMLDivElement> {
+    uclLogo?: boolean;
+    logoClassName?: string;
+    testId?: string;
+}
+declare const _default: import('react').MemoExoticComponent<({ uclLogo, logoClassName, testId, className, children, ...props }: AppHeaderTopProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

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

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

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

@@ -0,0 +1,3 @@
+export { default } from './AppHeader';
+export { HEIGHT as APP_HEADER_HEIGHT } from './AppHeader';
+export type { AppHeaderProps } from './AppHeader';

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

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+interface IContext {
+    isOpen: boolean;
+    toggleMenu: () => void;
+    triggerRef: React.RefObject<HTMLButtonElement | null>;
+    contentRef: React.RefObject<HTMLUListElement | null>;
+}
+export declare const AppMenuContext: React.Context<IContext>;
+export declare const useAppMenu: () => IContext;
+declare const AppMenuProvider: ({ defaultOpen, children, }: {
+    defaultOpen?: boolean;
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export default AppMenuProvider;

package/dist/components/AppMenu/AppMenu.d.ts

@@ -0,0 +1,19 @@
+import { HTMLAttributes } from 'react';
+import { default as AppMenuContent } from './AppMenuContent';
+import { default as AppMenuItem } from './AppMenuItem';
+import { default as AppMenuDivider } from './AppMenuDivider';
+import { default as AppMenuTrigger } from './AppMenuTrigger';
+export declare const NAME = "ucl-app-menu";
+export interface AppMenuProps extends HTMLAttributes<HTMLDivElement> {
+    testId?: string;
+    defaultOpen?: boolean;
+}
+declare const AppMenu: ({ testId, defaultOpen, children, className, ...props }: AppMenuProps) => import("react/jsx-runtime").JSX.Element;
+export interface IAppMenuSubComponents {
+    Trigger: typeof AppMenuTrigger;
+    Content: typeof AppMenuContent;
+    MenuItem: typeof AppMenuItem;
+    Divider: typeof AppMenuDivider;
+}
+declare const AppMenuWithSubComponents: typeof AppMenu & IAppMenuSubComponents;
+export default AppMenuWithSubComponents;

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

@@ -0,0 +1,13 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: (({ testId, defaultOpen, children, className, ...props }: import('./AppMenu').AppMenuProps) => import("react/jsx-runtime").JSX.Element) & import('./AppMenu').IAppMenuSubComponents;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Simple: Story;
+export declare const WithDividers: Story;
+export declare const WithIcons: Story;
+export declare const WithTrigger: Story;
+export declare const Complex: Story;
+export declare const ComplexWithTrigger: Story;

package/dist/components/AppMenu/AppMenuContent.d.ts

@@ -0,0 +1,7 @@
+import { default as React, LiHTMLAttributes } from 'react';
+export declare const NAME = "ucl-app-menu__content";
+export interface AppMenuContentProps extends LiHTMLAttributes<HTMLUListElement> {
+    testId?: string;
+}
+declare const AppMenuContent: React.FC<AppMenuContentProps>;
+export default AppMenuContent;

package/dist/components/AppMenu/AppMenuDivider.d.ts

@@ -0,0 +1,7 @@
+import { default as React, HtmlHTMLAttributes } from 'react';
+export declare const NAME = "ucl-app-menu__divider";
+export interface AppMenuDividerProps extends Omit<HtmlHTMLAttributes<HTMLHRElement>, 'children'> {
+    testId?: string;
+}
+declare const AppMenuDivider: React.FC<AppMenuDividerProps>;
+export default AppMenuDivider;

package/dist/components/AppMenu/AppMenuItem.d.ts

@@ -0,0 +1,12 @@
+import { default as React, LiHTMLAttributes, ElementType } from 'react';
+export declare const NAME = "ucl-app-menu__item";
+export interface AppMenuItemProps extends LiHTMLAttributes<HTMLLIElement> {
+    testId?: string;
+    icon?: React.ReactNode;
+    internalLink?: string;
+    externalLink?: string;
+    linkComponent?: ElementType;
+    isActive?: boolean;
+}
+declare const AppMenuItem: React.FC<AppMenuItemProps>;
+export default AppMenuItem;

package/dist/components/AppMenu/AppMenuTrigger.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+import { IconButtonProps } from '../IconButton';
+export declare const NAME = "ucl-app-menu__trigger";
+export interface AppMenuTriggerProps extends IconButtonProps {
+}
+declare const AppMenuTrigger: React.FC<AppMenuTriggerProps>;
+export default AppMenuTrigger;

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

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

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

@@ -0,0 +1,13 @@
+import { ButtonHTMLAttributes } from 'react';
+export declare const NAME = "ucl-uikit-avatar";
+export interface AvatarProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: 'image' | 'initials' | 'icon';
+    imageUrl?: string;
+    name?: string;
+    size?: 48 | 56 | 72 | 80;
+    disabled?: boolean;
+    testId?: string;
+}
+export type Ref = HTMLButtonElement;
+declare const _default: import('react').NamedExoticComponent<AvatarProps & import('react').RefAttributes<HTMLButtonElement>>;
+export default _default;

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

@@ -0,0 +1,11 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import('react').NamedExoticComponent<import('./Avatar').AvatarProps & import('react').RefAttributes<HTMLButtonElement>>;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Image: Story;
+export declare const Initials: Story;
+export declare const Icon: Story;

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

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

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

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

package/dist/components/Avatar/utils/extractInitials.d.ts

@@ -0,0 +1,2 @@
+declare const extractInitials: (name: string) => string;
+export default extractInitials;

package/dist/components/Avatar/utils/extractInitials.test.d.ts

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

package/dist/components/Blanket/Blanket.d.ts

@@ -0,0 +1,8 @@
+import { HTMLAttributes } from 'react';
+export declare const NAME = "ucl-blanket";
+export interface BlanketProps extends HTMLAttributes<HTMLDivElement> {
+    testId?: string;
+}
+export type Ref = HTMLDivElement;
+declare const _default: import('react').NamedExoticComponent<BlanketProps & import('react').RefAttributes<HTMLDivElement>>;
+export default _default;

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

@@ -0,0 +1,14 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import('react').NamedExoticComponent<import('./Blanket').BlanketProps & import('react').RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const AlertOnClick: Story;
+export declare const InFrontOfElement: Story;
+export declare const WithColour: Story;

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

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

package/dist/components/Breadcrumbs/Breadcrumb.d.ts

@@ -0,0 +1,8 @@
+import { LinkProps } from '../';
+export interface BreadcrumbProps extends LinkProps {
+    testId?: string;
+    uri: string;
+    isActive?: boolean;
+}
+declare const _default: import('react').MemoExoticComponent<({ testId, uri, className, children, isActive, ...props }: BreadcrumbProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/dist/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,9 @@
+import { default as React, HTMLAttributes } from 'react';
+export interface BreadcrumbsProps extends HTMLAttributes<HTMLElement> {
+    testId?: string;
+}
+declare const Breadcrumbs: {
+    ({ testId, className, children, ...props }: BreadcrumbsProps): import("react/jsx-runtime").JSX.Element;
+    Breadcrumb: React.MemoExoticComponent<({ testId, uri, className, children, isActive, ...props }: import('./Breadcrumb').BreadcrumbProps) => import("react/jsx-runtime").JSX.Element>;
+};
+export default Breadcrumbs;

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

@@ -0,0 +1,15 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: {
+        ({ testId, className, children, ...props }: import('./Breadcrumbs').BreadcrumbsProps): import("react/jsx-runtime").JSX.Element;
+        Breadcrumb: import('react').MemoExoticComponent<({ testId, uri, className, children, isActive, ...props }: import('./Breadcrumb').BreadcrumbProps) => import("react/jsx-runtime").JSX.Element>;
+    };
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Single: Story;
+export declare const Multiple: Story;

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

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

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

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

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

@@ -0,0 +1,4 @@
+import { ButtonProps } from './Button.types';
+export declare const NAME = "ucl-uikit-button";
+declare const _default: import('react').MemoExoticComponent<({ as, variant, destructive, size, disabled, icon, iconPosition, tooltip, loading, fullWidth, testId, ref, children, className, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;