@byline/ui 0.9.3 → 0.10.1

package/dist/components/notifications/@types/alert.d.ts

@@ -0,0 +1,21 @@
+import type { Intent as t } from '../../@types/shared.js';
+/**
+ * This file contains the types and prop-types for the Alert component.
+ */
+/**
+ * Semantic color intent of the alert.
+ *
+ * Controls the alert's background color, left border accent, icon, and text.
+ *
+ * - `primary`   — informational blue-tinted alert (default)
+ * - `secondary` — alternate neutral style
+ * - `noeffect`  — gray, no color emphasis
+ * - `success`   — positive confirmation (green)
+ * - `info`      — informational, non-critical (cyan/blue)
+ * - `warning`   — caution, needs attention (yellow/amber)
+ * - `danger`    — error or destructive state (red)
+ *
+ * @default 'primary'
+ */
+export type Intent = 'primary' | t;
+//# sourceMappingURL=alert.d.ts.map

package/dist/components/notifications/@types/alert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../../src/components/notifications/@types/alert.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,IAAI,CAAC,EAAE,MAAM,wBAAwB,CAAA;AAEzD;;GAEG;AAIH;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,MAAM,GAAG,SAAS,GAAG,CAAC,CAAA"}

package/dist/components/notifications/@types/alert.js

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

package/dist/components/notifications/@types/toast.d.ts

@@ -0,0 +1,46 @@
+import type { Icons as i, Position as p, Intent as t } from '../../@types/shared.js';
+/**
+ * This file contains the types and prop-types for the Toast component.
+ */
+/**
+ * Semantic color intent of the toast notification.
+ *
+ * Controls the toast's background color, icon, and text style.
+ *
+ * - `primary`   — standard informational toast (default)
+ * - `secondary` — alternate neutral style
+ * - `noeffect`  — gray, no color emphasis
+ * - `success`   — positive confirmation (green)
+ * - `info`      — informational, non-critical (cyan/blue)
+ * - `warning`   — caution, needs attention (yellow/amber)
+ * - `danger`    — error or destructive state (red)
+ *
+ * @default 'primary'
+ */
+export type Intent = 'primary' | t;
+/**
+ * Screen corner position for the toast viewport.
+ *
+ * - `top-left`     — top-left corner of the viewport
+ * - `top-right`    — top-right corner of the viewport (default)
+ * - `bottom-left`  — bottom-left corner of the viewport
+ * - `bottom-right` — bottom-right corner of the viewport
+ *
+ * @default 'bottom-right'
+ */
+export type Position = 'top-right' | p;
+/**
+ * Icon variant displayed inside the toast.
+ * Maps to the corresponding status icon component.
+ */
+export type IconType = 'success' | i;
+/**
+ * Custom data passed to each toast via the toast manager's `add()` method.
+ */
+export interface ToastData {
+    intent?: Intent;
+    iconType?: IconType;
+    icon?: boolean;
+    close?: boolean;
+}
+//# sourceMappingURL=toast.d.ts.map

package/dist/components/notifications/@types/toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../../src/components/notifications/@types/toast.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,IAAI,CAAC,EAAE,QAAQ,IAAI,CAAC,EAAE,MAAM,IAAI,CAAC,EAAE,MAAM,wBAAwB,CAAA;AAEpF;;GAEG;AAIH;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,MAAM,GAAG,SAAS,GAAG,CAAC,CAAA;AAElC;;;;;;;;;GASG;AACH,MAAM,MAAM,QAAQ,GAAG,WAAW,GAAG,CAAC,CAAA;AAEtC;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,CAAC,CAAA;AAEpC;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB"}

package/dist/components/notifications/@types/toast.js

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

package/dist/components/notifications/alert.d.ts

@@ -0,0 +1,14 @@
+import type React from 'react';
+import type { Intent } from './@types/alert.js';
+export interface AlertProps {
+    intent?: Intent;
+    icon?: boolean;
+    close?: boolean;
+    className?: string;
+    title?: string;
+    children: React.ReactNode;
+}
+export declare const Alert: ({ ref, intent, icon, close, title, className, children, ...rest }: AlertProps & {
+    ref?: React.RefObject<HTMLDivElement>;
+}) => React.JSX.Element | null;
+//# sourceMappingURL=alert.d.ts.map

package/dist/components/notifications/alert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/components/notifications/alert.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAY9B,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAE/C,MAAM,WAAW,UAAU;IACzB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAWD,eAAO,MAAM,KAAK,GAAkB,mEASjC,UAAU,GAAG;IACd,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;CACtC,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IA8EvB,CAAA"}

package/dist/components/notifications/alert.js

@@ -0,0 +1,99 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import classnames from "classnames";
+import { CloseIcon } from "../../icons/close-icon.js";
+import { DangerIcon } from "../../icons/danger-icon.js";
+import { InfoIcon } from "../../icons/info-icon.js";
+import { SuccessIcon } from "../../icons/success-icon.js";
+import { WarningIcon } from "../../icons/warning-icon.js";
+import { Button } from "../button/button.js";
+import alert_module from "./alert.module.js";
+const alertIcons = {
+    primary: WarningIcon,
+    secondary: InfoIcon,
+    success: SuccessIcon,
+    info: InfoIcon,
+    warning: WarningIcon,
+    danger: DangerIcon
+};
+const alert_Alert = function({ ref, intent = 'success', icon = true, close = true, title, className, children, ...rest }) {
+    const [show, setShow] = useState(true);
+    const [fade, setFade] = useState(false);
+    const Icon = alertIcons[intent];
+    const handleOnClose = ()=>{
+        setFade(true);
+        setTimeout(()=>setShow(false), 400);
+    };
+    useEffect(()=>{}, [
+        show
+    ]);
+    if (false === show) return null;
+    return /*#__PURE__*/ jsx("div", {
+        ref: ref,
+        className: classnames('infonomic-alert', `infonomic-alert-${intent}`, alert_module.alert, alert_module[intent], className, {
+            [alert_module.fade]: fade
+        }),
+        ...rest,
+        children: null != title ? /*#__PURE__*/ jsxs("div", {
+            className: classnames('infonomic-alert-with-title', alert_module["alert-with-title"]),
+            children: [
+                /*#__PURE__*/ jsxs("div", {
+                    className: classnames('infonomic-alert-header', alert_module.header),
+                    children: [
+                        icon && /*#__PURE__*/ jsx(Icon, {
+                            className: classnames('infonomic-alert-icon', alert_module.icon)
+                        }),
+                        /*#__PURE__*/ jsx("div", {
+                            className: classnames('infonomic-alert-title', alert_module.title),
+                            children: /*#__PURE__*/ jsx("span", {
+                                children: title
+                            })
+                        }),
+                        true === close && /*#__PURE__*/ jsx(Button, {
+                            intent: intent,
+                            variant: "filled",
+                            "aria-label": "Close",
+                            className: classnames('infonomic-alert-close', alert_module.close),
+                            type: "button",
+                            onClick: handleOnClose,
+                            ...rest,
+                            children: /*#__PURE__*/ jsx(CloseIcon, {
+                                height: "12px",
+                                width: "12px"
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    className: classnames('infonomic-alert-content', alert_module.content),
+                    children: children
+                })
+            ]
+        }) : /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                icon && /*#__PURE__*/ jsx(Icon, {
+                    className: classnames('infonomic-alert-icon', alert_module.icon)
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    className: classnames('infonomic-alert-content', alert_module.content),
+                    children: children
+                }),
+                true === close && /*#__PURE__*/ jsx(Button, {
+                    intent: intent,
+                    variant: "filled",
+                    "aria-label": "Close",
+                    className: classnames('infonomic-alert-close', alert_module.close),
+                    type: "button",
+                    onClick: handleOnClose,
+                    ...rest,
+                    children: /*#__PURE__*/ jsx(CloseIcon, {
+                        height: "12px",
+                        width: "12px"
+                    })
+                })
+            ]
+        })
+    });
+};
+export { alert_Alert as Alert };

package/dist/components/notifications/alert.module.js

@@ -0,0 +1,20 @@
+import "./alert_module.css";
+const alert_module = {
+    alert: "alert-dXimWG",
+    "alert-with-title": "alert-with-title-SylcSu",
+    alertWithTitle: "alert-with-title-SylcSu",
+    icon: "icon-RcHAGq",
+    close: "close-BUVZO7",
+    fade: "fade-VGuhOJ",
+    header: "header-y_AKgG",
+    title: "title-M6aCqW",
+    content: "content-oyoXMS",
+    primary: "primary-Y1uhvt",
+    secondary: "secondary-A_6wDq",
+    noeffect: "noeffect-4mzRDQ",
+    success: "success-FCgDMo",
+    info: "info-KZnWBW",
+    warning: "warning-UtouDH",
+    danger: "danger-QFtDqI"
+};
+export default alert_module;

package/dist/components/notifications/alert_module.css

@@ -0,0 +1,119 @@
+@layer byline-base, byline-functional, byline-utilities, byline-theme, byline-typography;
+
+@layer byline-components {
+  :is(.alert-dXimWG, .infonomic-alert) {
+    align-items: start;
+    gap: var(--gap-2);
+    border-radius: var(--border-radius-md);
+    border: 1px solid var(--alert-border);
+    background-color: var(--alert-background);
+    width: 100%;
+    color: var(--foreground);
+    margin-bottom: 1rem;
+    padding: 16px;
+    font-family: inherit;
+    font-weight: normal;
+    transition: all .3s ease-in-out;
+    display: flex;
+  }
+
+  :is(.alert-with-title-SylcSu, .infonomic-alert-with-title) {
+    flex-direction: column;
+    width: 100%;
+    display: flex;
+  }
+
+  :is(.icon-RcHAGq, .infonomic-alert-icon) {
+    justify-content: center;
+    align-items: center;
+    width: 24px;
+    min-width: 24px;
+    height: 24px;
+    min-height: 24px;
+    display: flex;
+  }
+
+  :is(.close-BUVZO7, .infonomic-alert-close) {
+    border-radius: 100%;
+    justify-content: center;
+    align-items: center;
+    width: 24px;
+    min-width: 24px;
+    height: 24px;
+    min-height: 24px;
+    margin-top: -2px;
+    margin-left: auto;
+    padding: 0;
+    display: flex;
+  }
+
+  :is(.fade-VGuhOJ, .infonomic-alert-fade) {
+    opacity: 0;
+    transition: opacity .4s ease-in-out;
+  }
+
+  :is(.header-y_AKgG, .infonomic-alert-header) {
+    width: 100%;
+    margin-bottom: var(--spacing-8);
+    align-items: start;
+    gap: var(--gap-2);
+    display: flex;
+  }
+
+  :is(.title-M6aCqW, .infonomic-alert-title) {
+    padding-top: 1px;
+    font-size: 1.2rem;
+    font-weight: bold;
+    line-height: 1;
+    display: flex;
+  }
+
+  :is(.content-oyoXMS, .infonomic-alert-content) {
+    font-size: var(--font-size-sm);
+    padding-top: 1px;
+  }
+
+  .content-oyoXMS:first-child {
+    margin-top: 0;
+  }
+
+  .infonomic-alert-content:first-child {
+    margin-top: 0;
+  }
+
+  :is(.primary-Y1uhvt, .infonomic-alert-primary) {
+    --alert-border: var(--stroke-primary);
+    --alert-background: var(--fill-primary-weak);
+  }
+
+  :is(.secondary-A_6wDq, .infonomic-alert-secondary) {
+    --alert-border: var(--stroke-secondary);
+    --alert-background: var(--fill-secondary-weak);
+  }
+
+  :is(.noeffect-4mzRDQ, .infonomic-alert-noeffect) {
+    --alert-border: var(--stroke-noeffect);
+    --alert-background: var(--fill-noeffect-weak);
+  }
+
+  :is(.success-FCgDMo, .infonomic-alert-success) {
+    --alert-border: var(--stroke-success);
+    --alert-background: var(--fill-success-weak);
+  }
+
+  :is(.info-KZnWBW, .infonomic-alert-info) {
+    --alert-border: var(--stroke-info);
+    --alert-background: var(--fill-info-weak);
+  }
+
+  :is(.warning-UtouDH, .infonomic-alert-warning) {
+    --alert-border: var(--stroke-warning);
+    --alert-background: var(--fill-warning-weak);
+  }
+
+  :is(.danger-QFtDqI, .infonomic-alert-danger) {
+    --alert-border: var(--stroke-danger);
+    --alert-background: var(--fill-danger-weak);
+  }
+}
+

package/dist/components/notifications/index.js

@@ -0,0 +1,2 @@
+export * from "./alert.js";
+export * from "./toast.js";

package/dist/components/notifications/toast.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { Position, ToastData } from './@types/toast.js';
+export declare const useToastManager: () => import("@base-ui/react").UseToastManagerReturnValue<ToastData>;
+export declare const createToastManager: () => import("@base-ui/react").ToastManager<ToastData>;
+export interface ToastProviderProps {
+    children: React.ReactNode;
+    timeout?: number;
+    limit?: number;
+    toastManager?: ReturnType<typeof createToastManager>;
+}
+export declare function ToastProvider({ children, timeout, limit, toastManager, }: ToastProviderProps): React.JSX.Element;
+export interface ToastViewportProps {
+    position?: Position;
+    className?: string;
+}
+export declare function ToastViewport({ position, className }: ToastViewportProps): React.JSX.Element;
+//# sourceMappingURL=toast.d.ts.map

package/dist/components/notifications/toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../src/components/notifications/toast.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAYzB,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAU5D,eAAO,MAAM,eAAe,sEAA4C,CAAA;AACxE,eAAO,MAAM,kBAAkB,wDAA+C,CAAA;AAE9E,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAA;CACrD;AAED,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,OAAc,EACd,KAAS,EACT,YAAY,GACb,EAAE,kBAAkB,qBAMpB;AAED,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,aAAa,CAAC,EAAE,QAAyB,EAAE,SAAS,EAAE,EAAE,kBAAkB,qBAazF"}

package/dist/components/notifications/toast.js

@@ -0,0 +1,98 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import react from "react";
+import { Toast } from "@base-ui/react/toast";
+import classnames from "classnames";
+import { CloseIcon } from "../../icons/close-icon.js";
+import { DangerIcon } from "../../icons/danger-icon.js";
+import { InfoIcon } from "../../icons/info-icon.js";
+import { SuccessIcon } from "../../icons/success-icon.js";
+import { WarningIcon } from "../../icons/warning-icon.js";
+import { Button } from "../button/button.js";
+import toast_module from "./toast.module.js";
+const toastIcons = {
+    success: SuccessIcon,
+    info: InfoIcon,
+    warning: WarningIcon,
+    danger: DangerIcon
+};
+const useToastManager = Toast.useToastManager;
+const createToastManager = Toast.createToastManager;
+function ToastProvider({ children, timeout = 5000, limit = 3, toastManager }) {
+    return /*#__PURE__*/ jsx(Toast.Provider, {
+        timeout: timeout,
+        limit: limit,
+        toastManager: toastManager,
+        children: children
+    });
+}
+function ToastViewport({ position = 'bottom-right', className }) {
+    const { toasts } = Toast.useToastManager();
+    return /*#__PURE__*/ jsx(Toast.Portal, {
+        children: /*#__PURE__*/ jsx(Toast.Viewport, {
+            className: classnames('infonomic-toast-viewport', toast_module.viewport, toast_module[position], className),
+            children: toasts.map((toast)=>/*#__PURE__*/ jsx(ToastItem, {
+                    toast: toast
+                }, toast.id))
+        })
+    });
+}
+function ToastItem({ toast }) {
+    const { intent = 'success', iconType = 'success', icon = true, close = true } = toast.data ?? {};
+    const eventDateRef = react.useRef(new Date());
+    const Icon = toastIcons[iconType];
+    const swipeDirection = react.useMemo(()=>[
+            'down',
+            'right'
+        ], []);
+    return /*#__PURE__*/ jsx(Toast.Root, {
+        toast: toast,
+        swipeDirection: swipeDirection,
+        className: classnames('infonomic-toast', toast_module.root),
+        children: /*#__PURE__*/ jsxs(Toast.Content, {
+            className: classnames('infonomic-toast-content', toast_module.content),
+            children: [
+                /*#__PURE__*/ jsxs("div", {
+                    className: classnames('infonomic-toast-header', toast_module.header),
+                    children: [
+                        /*#__PURE__*/ jsx("time", {
+                            dateTime: eventDateRef.current.toISOString(),
+                            className: "text-sm",
+                            children: new Intl.DateTimeFormat('default', {
+                                hour12: true,
+                                hour: 'numeric',
+                                minute: 'numeric'
+                            }).format(eventDateRef.current)
+                        }),
+                        close && /*#__PURE__*/ jsx(Toast.Close, {
+                            render: /*#__PURE__*/ jsx(Button, {
+                                intent: intent,
+                                tabIndex: 0,
+                                variant: "filled",
+                                "aria-label": "Close",
+                                className: classnames('infonomic-toast-close', toast_module.close),
+                                type: "button"
+                            }),
+                            children: /*#__PURE__*/ jsx(CloseIcon, {
+                                height: "12px",
+                                width: "12px"
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxs(Toast.Title, {
+                    className: classnames('infonomic-toast-title', toast_module.title),
+                    children: [
+                        icon && Icon && /*#__PURE__*/ jsx(Icon, {}),
+                        toast.title
+                    ]
+                }),
+                /*#__PURE__*/ jsx(Toast.Description, {
+                    className: classnames("infonomic-toast-description", toast_module.description),
+                    children: toast.description
+                })
+            ]
+        })
+    });
+}
+export { ToastProvider, ToastViewport, createToastManager, useToastManager };

package/dist/components/notifications/toast.module.js

@@ -0,0 +1,20 @@
+import "./toast_module.css";
+const toast_module = {
+    viewport: "viewport-x4CvHl",
+    "top-left": "top-left-dy_IMc",
+    topLeft: "top-left-dy_IMc",
+    "top-right": "top-right-OsKbVb",
+    topRight: "top-right-OsKbVb",
+    "bottom-left": "bottom-left-_RdEZn",
+    bottomLeft: "bottom-left-_RdEZn",
+    "bottom-right": "bottom-right-Nzuhur",
+    bottomRight: "bottom-right-Nzuhur",
+    root: "root-dWN7jD",
+    content: "content-o83ZAp",
+    header: "header-ItoxDs",
+    close: "close-HwTMjn",
+    title: "title-qfQE8M",
+    description: "description-nQWtgX",
+    action: "action-PunqB2"
+};
+export default toast_module;