@eyesee/ui-components 0.8.0 → 0.9.0

package/dist/components/Modal/Modal.d.ts

@@ -0,0 +1,239 @@
+/**
+ * @callback ModalCloseHandler
+ * @returns {void}
+ */
+/**
+ * Responsive width tokens for the dialog.
+ *
+ * @typedef {object} ModalWidth
+ * @property {string} [default='880px']
+ *   Width below 1536px. Default `'880px'`.
+ * @property {string} [largeScreen='960px']
+ *   Width at 1536px and above. Default `'960px'`.
+ */
+/**
+ * Responsive height tokens for `bodyLayout='fixed'`.
+ *
+ * @typedef {object} ModalHeight
+ * @property {string} [default='480px']
+ *   Height below 1536px. Default `'480px'`.
+ * @property {string} [largeScreen='600px']
+ *   Height at 1536px and above. Default `'600px'`.
+ */
+/**
+ * @typedef {object} ModalProps
+ *
+ * @property {React.ReactNode} [children=null]
+ *   Scrollable body content. Default `null`.
+ * @property {ModalCloseHandler} [onClose]
+ *   Dismiss handler (Escape, backdrop, X). Omit to hide the close button.
+ * @property {boolean}         [visible=false]
+ *   When `false`, renders nothing. Default `false`.
+ * @property {string}          [title='']
+ *   Header heading. Default `''`.
+ * @property {React.ReactNode} [icon=null]
+ *   Icon left of the title. Default `null`.
+ * @property {React.ReactNode} [description=null]
+ *   Subtitle below the title. Default `null`.
+ * @property {React.ReactNode} [footer=null]
+ *   Sticky footer content (e.g. action buttons). Default `null`.
+ * @property {ModalWidth}      [modalWidth]
+ *   Dialog width tokens. Default `{ default: '880px', largeScreen: '960px' }`.
+ * @property {'scroll'|'fixed'} [bodyLayout='scroll']
+ *   `scroll` — whole body scrolls; `fixed` — fixed height with independent footer.
+ *   Default `'scroll'`.
+ * @property {ModalHeight}     [modalHeight]
+ *   Height tokens for `bodyLayout='fixed'`.
+ *   Default `{ default: '480px', largeScreen: '600px' }`.
+ * @property {React.ReactNode} [loadingFallback]
+ *   `<Suspense>` fallback. Default `<LoadingIcon iconSize="xl" />`.
+ * @property {Element}         [portalContainer]
+ *   Portal host. Default `#modal` element or `document.body`.
+ *
+ * @see {@link Button}
+ */
+/**
+ * Dialog overlay in a portal. Closes on Escape, backdrop click, or X button.
+ *
+ * ## Props
+ *
+ * **children** `ReactNode` — default `null`
+ * Scrollable body content.
+ *
+ * **onClose** `() => void` — no default
+ * Dismiss handler. Omit to hide the close button.
+ *
+ * **visible** `boolean` — default `false`
+ * When `false`, renders nothing.
+ *
+ * **title** `string` — default `''`
+ * Header heading.
+ *
+ * **icon** `ReactNode` — default `null`
+ * Icon left of the title.
+ *
+ * **description** `ReactNode` — default `null`
+ * Subtitle below the title.
+ *
+ * **footer** `ReactNode` — default `null`
+ * Sticky footer content (e.g. action buttons).
+ *
+ * **modalWidth** `ModalWidth` — default `{ default: '880px', largeScreen: '960px' }`
+ * Dialog width tokens.
+ * - `default` `string` — default `'880px'`
+ * - `largeScreen` `string` — default `'960px'`
+ *
+ * **bodyLayout** `'scroll' | 'fixed'` — default `'scroll'`
+ * `scroll` — whole body scrolls; `fixed` — fixed height with independent footer.
+ *
+ * **modalHeight** `ModalHeight` — default `{ default: '480px', largeScreen: '600px' }`
+ * Height tokens for `bodyLayout='fixed'`.
+ * - `default` `string` — default `'480px'`
+ * - `largeScreen` `string` — default `'600px'`
+ *
+ * **loadingFallback** `ReactNode` — default `<LoadingIcon iconSize="xl" />`
+ * `<Suspense>` fallback.
+ *
+ * **portalContainer** `Element` — default `#modal` or `document.body`
+ * Portal host.
+ *
+ * @param {ModalProps} props
+ * @returns {import('react').ReactElement|null}
+ *
+ * @example <caption>Default</caption>
+ * import { useState } from 'react';
+ * import { Button, Modal } from '@eyesee/ui-components';
+ *
+ * const [visible, setVisible] = useState(false);
+ *
+ * <>
+ *   <Button text="Open modal" onClick={() => setVisible(true)} />
+ *   <Modal
+ *     visible={visible}
+ *     onClose={() => setVisible(false)}
+ *     title="Modal title"
+ *     description="Optional supporting description."
+ *     footer={
+ *       <>
+ *         <Button text="Cancel" variant="neutral" type="outline" onClick={() => setVisible(false)} />
+ *         <Button text="Confirm" onClick={() => setVisible(false)} />
+ *       </>
+ *     }
+ *   >
+ *     <p>Modal content renders in a portal and inherits the selected application profile.</p>
+ *   </Modal>
+ * </>
+ *
+ * @example <caption>Custom width</caption>
+ * import { useState } from 'react';
+ * import { Button, Modal } from '@eyesee/ui-components';
+ *
+ * const [visible, setVisible] = useState(false);
+ *
+ * <Modal
+ *   visible={visible}
+ *   onClose={() => setVisible(false)}
+ *   title="Modal title"
+ *   modalWidth={{ default: '560px', largeScreen: '640px' }}
+ * />
+ *
+ * @example <caption>Fixed body layout</caption>
+ * import { useState } from 'react';
+ * import { Button, Modal } from '@eyesee/ui-components';
+ *
+ * const [visible, setVisible] = useState(false);
+ *
+ * <Modal
+ *   visible={visible}
+ *   onClose={() => setVisible(false)}
+ *   title="Create shelf"
+ *   description="Fixed body with static input, two-column block, and scrollable list."
+ *   bodyLayout="fixed"
+ *   modalWidth={{ default: '640px', largeScreen: '720px' }}
+ *   modalHeight={{ default: '400px', largeScreen: '520px' }}
+ *   footer={<Button text="Confirm" onClick={() => setVisible(false)} />}
+ * >
+ *   <p>Body content with fixed layout sections.</p>
+ * </Modal>
+ */
+export function Modal({ children, onClose, visible, title, icon, description, footer, modalWidth, bodyLayout, modalHeight, loadingFallback, portalContainer, }: ModalProps): import("react").ReactElement | null;
+export type ModalCloseHandler = () => void;
+/**
+ * Responsive width tokens for the dialog.
+ */
+export type ModalWidth = {
+    /**
+     * Width below 1536px. Default `'880px'`.
+     */
+    default?: string;
+    /**
+     * Width at 1536px and above. Default `'960px'`.
+     */
+    largeScreen?: string;
+};
+/**
+ * Responsive height tokens for `bodyLayout='fixed'`.
+ */
+export type ModalHeight = {
+    /**
+     * Height below 1536px. Default `'480px'`.
+     */
+    default?: string;
+    /**
+     * Height at 1536px and above. Default `'600px'`.
+     */
+    largeScreen?: string;
+};
+export type ModalProps = {
+    /**
+     * Scrollable body content. Default `null`.
+     */
+    children?: React.ReactNode;
+    /**
+     * Dismiss handler (Escape, backdrop, X). Omit to hide the close button.
+     */
+    onClose?: ModalCloseHandler;
+    /**
+     * When `false`, renders nothing. Default `false`.
+     */
+    visible?: boolean;
+    /**
+     * Header heading. Default `''`.
+     */
+    title?: string;
+    /**
+     * Icon left of the title. Default `null`.
+     */
+    icon?: React.ReactNode;
+    /**
+     * Subtitle below the title. Default `null`.
+     */
+    description?: React.ReactNode;
+    /**
+     * Sticky footer content (e.g. action buttons). Default `null`.
+     */
+    footer?: React.ReactNode;
+    /**
+     * Dialog width tokens. Default `{ default: '880px', largeScreen: '960px' }`.
+     */
+    modalWidth?: ModalWidth;
+    /**
+     * `scroll` — whole body scrolls; `fixed` — fixed height with independent footer.
+     * Default `'scroll'`.
+     */
+    bodyLayout?: "scroll" | "fixed";
+    /**
+     * Height tokens for `bodyLayout='fixed'`.
+     * Default `{ default: '480px', largeScreen: '600px' }`.
+     */
+    modalHeight?: ModalHeight;
+    /**
+     * `<Suspense>` fallback. Default `<LoadingIcon iconSize="xl" />`.
+     */
+    loadingFallback?: React.ReactNode;
+    /**
+     * Portal host. Default `#modal` element or `document.body`.
+     */
+    portalContainer?: Element;
+};
+import React from 'react';

package/dist/components/Modal/Modal.js

@@ -16,7 +16,8 @@ const o = {
 }, $ = {
   scroll: e.content,
   fixed: `${e.content} ${e.contentFixed}`
-}, z = ({
+};
+function z({
   children: s = null,
   onClose: t,
   visible: m = !1,
@@ -30,7 +31,7 @@ const o = {
   modalHeight: p = d,
   loadingFallback: x = /* @__PURE__ */ l(H, { iconSize: "xl" }),
   portalContainer: g
-}) => {
+}) {
   const { default: S, largeScreen: D } = {
     ...o,
     ...h
@@ -77,7 +78,7 @@ const o = {
     ] }),
     g ?? document.getElementById("modal") ?? document.body
   ) : null;
-};
+}
 export {
   z as Modal
 };

package/dist/components/Notifications/Notifications.d.ts

@@ -0,0 +1,261 @@
+/**
+ * @callback NotificationsCloseHandler
+ * @returns {void}
+ */
+/**
+ * @callback NotificationsDismissHandler
+ * @returns {void}
+ */
+/**
+ * @callback NotificationsConfirmHandler
+ * @returns {void}
+ */
+/**
+ * All props are optional.
+ *
+ * @typedef {object} NotificationsProps
+ *
+ * @property {string} [title='Notification title']
+ *   Heading. Default `'Notification title'`.
+ * @property {string} [text='Notification text goes here and it should be kept short and simple whenever possible.']
+ *   Body copy.
+ * @property {'neutral'|'error'|'success'|'primary'|'warning'} [status='neutral']
+ *   Stripe and icon colour tokens. Default `'neutral'`.
+ * @property {boolean} [showStripe=false]
+ *   Left status stripe. Default `false`.
+ * @property {boolean} [showIcon=true]
+ *   Leading icon (or `icon` when set). Default `true`.
+ * @property {React.ReactNode} [icon]
+ *   Custom leading icon. Falls back to `HelpIcon`.
+ * @property {NotificationsCloseHandler|null} [onClose=null]
+ *   Close button handler. Omit to hide when `closeButton` is `false`. Default `null`.
+ * @property {string} [closeAriaLabel='Close notification']
+ *   Close button `aria-label`. Default `'Close notification'`.
+ * @property {boolean} [closeButton=true]
+ *   Show close control when `onClose` is set. Default `true`.
+ * @property {NotificationsDismissHandler|null} [onDismiss=null]
+ *   Left action. Renders a {@link Button} when set. Default `null`.
+ * @property {string} [dismissLabel='Cancel']
+ *   Dismiss button label. Default `'Cancel'`.
+ * @property {React.ReactNode} [dismissIcon]
+ *   Dismiss button icon. Default `XIcon`.
+ * @property {NotificationsConfirmHandler|null} [onConfirm=null]
+ *   Right action. Renders a {@link Button} when set. Default `null`.
+ * @property {string} [confirmLabel='Save']
+ *   Confirm button label. Default `'Save'`.
+ * @property {React.ReactNode} [confirmIcon]
+ *   Confirm button icon. Default `SaveIcon`.
+ * @property {number|null} [progress=null]
+ *   Progress value. Non-`null` shows {@link ProgressBar}. Default `null`.
+ * @property {number|null} [maxProgress=null]
+ *   Progress max. Shown in the label when both are numbers. Default `null`.
+ * @property {string} [progressLabel='In progress...']
+ *   Progress row label. Default `'In progress...'`.
+ * @property {string} [className]
+ *   Extra class on the root.
+ *
+ * @see {@link Button}
+ * @see {@link ProgressBar}
+ * @see {@link useNotifications}
+ */
+/**
+ * Notification card with optional stripe, actions, and progress.
+ *
+ * ## Props
+ *
+ * All optional.
+ *
+ * **title** `string` — default `'Notification title'`
+ * Heading.
+ *
+ * **text** `string` — default `'Notification text goes here and it should be kept short and simple whenever possible.'`
+ * Body copy.
+ *
+ * **status** `'neutral' | 'error' | 'success' | 'primary' | 'warning'` — default `'neutral'`
+ * Stripe and icon colour tokens.
+ *
+ * **showStripe** `boolean` — default `false`
+ * Left status stripe.
+ *
+ * **showIcon** `boolean` — default `true`
+ * Leading icon (or `icon` when set).
+ *
+ * **icon** `ReactNode` — no default
+ * Custom leading icon. Falls back to `HelpIcon`.
+ *
+ * **onClose** `() => void | null` — default `null`
+ * Close button handler.
+ *
+ * **closeAriaLabel** `string` — default `'Close notification'`
+ * Close button `aria-label`.
+ *
+ * **closeButton** `boolean` — default `true`
+ * Show close control when `onClose` is set.
+ *
+ * **onDismiss** `() => void | null` — default `null`
+ * Left action. Renders a {@link Button} when set.
+ *
+ * **dismissLabel** `string` — default `'Cancel'`
+ * Dismiss button label.
+ *
+ * **dismissIcon** `ReactNode` — default `XIcon`
+ * Dismiss button icon.
+ *
+ * **onConfirm** `() => void | null` — default `null`
+ * Right action. Renders a {@link Button} when set.
+ *
+ * **confirmLabel** `string` — default `'Save'`
+ * Confirm button label.
+ *
+ * **confirmIcon** `ReactNode` — default `SaveIcon`
+ * Confirm button icon.
+ *
+ * **progress** `number | null` — default `null`
+ * Progress value. Non-`null` shows {@link ProgressBar}.
+ *
+ * **maxProgress** `number | null` — default `null`
+ * Progress max. Shown in the label when both are numbers.
+ *
+ * **progressLabel** `string` — default `'In progress...'`
+ * Progress row label.
+ *
+ * **className** `string` — no default
+ * Extra class on the root.
+ *
+ * @param {NotificationsProps} props
+ * @returns {import('react').ReactElement}
+ *
+ * @example <caption>Default</caption>
+ * import { Notifications } from '@eyesee/ui-components';
+ *
+ * <Notifications
+ *   title="Notification title"
+ *   text="Notification text goes here and it should be kept short and simple whenever possible."
+ *   status="neutral"
+ *   showIcon
+ *   onClose={() => {}}
+ * />
+ *
+ * @example <caption>All Figma variants</caption>
+ * import { Notifications } from '@eyesee/ui-components';
+ *
+ * <Notifications
+ *   title="Notification title"
+ *   text="Notification text goes here and it should be kept short and simple whenever possible."
+ *   status="neutral"
+ *   showIcon
+ *   onClose={() => {}}
+ * />
+ * <Notifications
+ *   title="Notification title"
+ *   text="Notification text goes here and it should be kept short and simple whenever possible."
+ *   status="error"
+ *   showStripe
+ *   showIcon
+ *   onClose={() => {}}
+ * />
+ * <Notifications
+ *   title="Notification title"
+ *   text="Notification text goes here and it should be kept short and simple whenever possible."
+ *   status="neutral"
+ *   showIcon
+ *   onClose={() => {}}
+ *   onDismiss={() => {}}
+ *   dismissLabel="Cancel"
+ *   onConfirm={() => {}}
+ *   confirmLabel="Save"
+ * />
+ * <Notifications
+ *   title="Notification title"
+ *   text="Notification text goes here and it should be kept short and simple whenever possible."
+ *   status="neutral"
+ *   showIcon
+ *   onClose={() => {}}
+ *   progress={25}
+ * />
+ */
+export function Notifications({ title, text, status, showStripe, showIcon, icon, onClose, closeAriaLabel, onDismiss, dismissLabel, dismissIcon, onConfirm, confirmLabel, confirmIcon, progress, maxProgress, progressLabel, closeButton, className, }: NotificationsProps): import("react").ReactElement;
+export type NotificationsCloseHandler = () => void;
+export type NotificationsDismissHandler = () => void;
+export type NotificationsConfirmHandler = () => void;
+/**
+ * All props are optional.
+ */
+export type NotificationsProps = {
+    /**
+     * Heading. Default `'Notification title'`.
+     */
+    title?: string;
+    /**
+     * Body copy.
+     */
+    text?: string;
+    /**
+     * Stripe and icon colour tokens. Default `'neutral'`.
+     */
+    status?: "neutral" | "error" | "success" | "primary" | "warning";
+    /**
+     * Left status stripe. Default `false`.
+     */
+    showStripe?: boolean;
+    /**
+     * Leading icon (or `icon` when set). Default `true`.
+     */
+    showIcon?: boolean;
+    /**
+     * Custom leading icon. Falls back to `HelpIcon`.
+     */
+    icon?: React.ReactNode;
+    /**
+     * Close button handler. Omit to hide when `closeButton` is `false`. Default `null`.
+     */
+    onClose?: NotificationsCloseHandler | null;
+    /**
+     * Close button `aria-label`. Default `'Close notification'`.
+     */
+    closeAriaLabel?: string;
+    /**
+     * Show close control when `onClose` is set. Default `true`.
+     */
+    closeButton?: boolean;
+    /**
+     * Left action. Renders a {@link Button} when set. Default `null`.
+     */
+    onDismiss?: NotificationsDismissHandler | null;
+    /**
+     * Dismiss button label. Default `'Cancel'`.
+     */
+    dismissLabel?: string;
+    /**
+     * Dismiss button icon. Default `XIcon`.
+     */
+    dismissIcon?: React.ReactNode;
+    /**
+     * Right action. Renders a {@link Button} when set. Default `null`.
+     */
+    onConfirm?: NotificationsConfirmHandler | null;
+    /**
+     * Confirm button label. Default `'Save'`.
+     */
+    confirmLabel?: string;
+    /**
+     * Confirm button icon. Default `SaveIcon`.
+     */
+    confirmIcon?: React.ReactNode;
+    /**
+     * Progress value. Non-`null` shows {@link ProgressBar}. Default `null`.
+     */
+    progress?: number | null;
+    /**
+     * Progress max. Shown in the label when both are numbers. Default `null`.
+     */
+    maxProgress?: number | null;
+    /**
+     * Progress row label. Default `'In progress...'`.
+     */
+    progressLabel?: string;
+    /**
+     * Extra class on the root.
+     */
+    className?: string;
+};

package/dist/components/Notifications/Notifications.js

@@ -27,7 +27,8 @@ const K = ["neutral", "error", "success", "primary", "warning"], y = {
     stripeColor: "var(--color--border--warning--default)",
     iconColor: "var(--color--border--warning--default)"
   }
-}, b = (l) => K.includes(l) ? l : "neutral", R = (l) => y[b(l)] || y.neutral, Q = ({
+}, b = (l) => K.includes(l) ? l : "neutral", R = (l) => y[b(l)] || y.neutral;
+function Q({
   title: l = "Notification title",
   text: h = "Notification text goes here and it should be kept short and simple whenever possible.",
   status: N = "neutral",
@@ -47,7 +48,7 @@ const K = ["neutral", "error", "success", "primary", "warning"], y = {
   progressLabel: s = "In progress...",
   closeButton: B = !0,
   className: O
-}) => {
+}) {
   const $ = b(N), { stripeColor: u, iconColor: j } = R($), f = typeof c == "function", p = typeof a == "function", z = f || p, d = t !== null, m = k && (I || /* @__PURE__ */ o(H, { strokeColor: "currentColor", fill: "none" })), E = typeof t == "number" && typeof e == "number" ? `${s} ${t}/${e ?? ""}` : s;
   return /* @__PURE__ */ n(
     "div",
@@ -113,7 +114,7 @@ const K = ["neutral", "error", "success", "primary", "warning"], y = {
       ]
     }
   );
-};
+}
 export {
   Q as Notifications
 };

package/dist/components/Notifications/useNotifications.d.ts

@@ -0,0 +1,59 @@
+/**
+ * Shows {@link Notifications} as react-toastify toasts. Mount `ToastContainer` in the app root.
+ *
+ * `notify(key, payload)` updates an existing toast with the same key. `dismiss` accepts the
+ * key or the returned toast id.
+ *
+ * @returns {UseNotificationsReturn}
+ *
+ * @example <caption>Keyed progress toast</caption>
+ * import { ToastContainer } from 'react-toastify';
+ * import { useNotifications } from '@eyesee/ui-components';
+ *
+ * const { notify, dismiss } = useNotifications();
+ *
+ * notify('upload', {
+ *   title: 'Uploading report',
+ *   text: 'Preparing and uploading your file.',
+ *   status: 'neutral',
+ *   showStripe: true,
+ *   progress: 0,
+ *   progressLabel: 'Uploading... 0%',
+ * });
+ *
+ * <ToastContainer position="bottom-right" closeButton={false} />
+ *
+ * @example <caption>One-off toast</caption>
+ * import { ToastContainer } from 'react-toastify';
+ * import { useNotifications } from '@eyesee/ui-components';
+ *
+ * const { notify } = useNotifications();
+ *
+ * notify({
+ *   title: 'Saved',
+ *   text: 'Your changes were saved.',
+ *   status: 'success',
+ *   showStripe: true,
+ * }, { autoClose: 3000 });
+ */
+export function useNotifications(): UseNotificationsReturn;
+export type NotificationPayload = Omit<import("./Notifications").NotificationsProps, "onClose"> & {
+    key?: string;
+};
+/**
+ * react-toastify options merged with library defaults.
+ */
+export type NotificationToastOptions = import("react-toastify").ToastOptions;
+export type UseNotificationsReturn = {
+    /**
+     * Show or update a toast.
+     */
+    notify: UseNotificationsNotify;
+    /**
+     * Dismiss by key or toast id.
+     */
+    dismiss: UseNotificationsDismiss;
+};
+export type UseNotificationsDismiss = (keyOrToastId: string | number) => void;
+export type UseNotificationsNotify = (key: string, payload?: NotificationPayload, options?: NotificationToastOptions) => import("react-toastify").Id;
+export type UseNotificationsNotifyPayload = (payload?: NotificationPayload, options?: NotificationToastOptions) => import("react-toastify").Id;

package/dist/components/Notifications/useNotifications.js

@@ -66,7 +66,8 @@ const g = {
   onClose: (...o) => {
     typeof t.onClose == "function" && t.onClose(...o), typeof i == "function" && i(...o);
   }
-}), S = () => {
+});
+function S() {
   const s = L(/* @__PURE__ */ new Map()), t = b((o) => {
     if (!o)
       return;
@@ -97,7 +98,7 @@ const g = {
     },
     [t]
   ), dismiss: t };
-};
+}
 export {
   S as useNotifications
 };