@taiv/ui 1.15.0 → 2.0.0

package/dist/components/Info/Notifications/Notifications.stories.js

@@ -105,3 +105,34 @@ const AsyncDemo = () => {
 export const AsyncNotifications = {
     render: () => _jsx(AsyncDemo, {}),
 };
+const ProgressDemo = () => {
+    const { showWithProgress } = useNotifications();
+    const [isRunning, setIsRunning] = useState(false);
+    const startUpload = (outcome) => {
+        setIsRunning(true);
+        const handle = showWithProgress({
+            message: 'Uploading my-content.mp4 (0%)',
+        });
+        let value = 0;
+        const interval = setInterval(() => {
+            value += 10;
+            if (value < 100) {
+                handle.update(value, `Uploading my-content.mp4 (${value}%)`);
+            }
+            else {
+                clearInterval(interval);
+                if (outcome === 'success') {
+                    handle.done('my-content.mp4 uploaded');
+                }
+                else {
+                    handle.fail('Upload failed. Please try again.');
+                }
+                setIsRunning(false);
+            }
+        }, 400);
+    };
+    return (_jsxs(Group, { gap: spacing.xs, children: [_jsx(Button, { variant: 'success', onClick: () => startUpload('success'), disabled: isRunning, children: "Upload (success)" }), _jsx(Button, { variant: 'cancel', onClick: () => startUpload('failure'), disabled: isRunning, children: "Upload (failure)" })] }));
+};
+export const ProgressNotifications = {
+    render: () => _jsx(ProgressDemo, {}),
+};

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

@@ -1,39 +1,45 @@
 export declare const componentVariants: {
-    readonly success: {
-        readonly defaultTitle: "Success!";
-        readonly color: "#00A63E";
-        readonly icon: import("react/jsx-runtime").JSX.Element;
+    readonly copy: {
         readonly autoClose: 4000;
+        readonly color: "#6F3FEE";
+        readonly defaultTitle: "Copied to clipboard!";
+        readonly icon: import("react/jsx-runtime").JSX.Element;
     };
     readonly error: {
-        readonly defaultTitle: "Oops!";
-        readonly color: "#FB2C36";
-        readonly icon: import("react/jsx-runtime").JSX.Element;
         readonly autoClose: false;
-    };
-    readonly warning: {
-        readonly defaultTitle: "Warning";
-        readonly color: "#FE9A00";
+        readonly color: "#FF3B30";
+        readonly defaultTitle: "Oops!";
         readonly icon: import("react/jsx-runtime").JSX.Element;
-        readonly autoClose: 4000;
     };
     readonly info: {
+        readonly autoClose: 4000;
+        readonly color: "#6F3FEE";
         readonly defaultTitle: "Note";
-        readonly color: "#00A6F4";
         readonly icon: import("react/jsx-runtime").JSX.Element;
-        readonly autoClose: 4000;
     };
     readonly loading: {
+        readonly autoClose: false;
+        readonly color: "#6F3FEE";
         readonly defaultTitle: "Loading...";
-        readonly color: "#00A6F4";
         readonly icon: import("react/jsx-runtime").JSX.Element;
-        readonly autoClose: false;
     };
-    readonly copy: {
-        readonly defaultTitle: "Copied to clipboard!";
-        readonly color: "#0081CE";
+    readonly success: {
+        readonly autoClose: 4000;
+        readonly color: "#00A84F";
+        readonly defaultTitle: "Success!";
         readonly icon: import("react/jsx-runtime").JSX.Element;
+    };
+    readonly remove: {
         readonly autoClose: 4000;
+        readonly color: "#FF3B30";
+        readonly defaultTitle: "Removed";
+        readonly icon: import("react/jsx-runtime").JSX.Element;
+    };
+    readonly warning: {
+        readonly autoClose: 4000;
+        readonly color: "#FE9A00";
+        readonly defaultTitle: "Warning";
+        readonly icon: import("react/jsx-runtime").JSX.Element;
     };
 };
 //# sourceMappingURL=variants.d.ts.map

package/dist/components/Info/Notifications/variants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Notifications/variants.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqCpB,CAAC"}
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Notifications/variants.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDpB,CAAC"}

package/dist/components/Info/Notifications/variants.js

@@ -1,41 +1,47 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { primary, error, success, warning } from '../../../constants/colors';
+import { error, primary, success, warning } from '../../../constants/colors';
 import { Loader } from '../../Layout/Loader/Loader';
 export const componentVariants = {
-    success: {
-        defaultTitle: 'Success!',
-        color: success[200],
-        icon: _jsx("i", { className: "fas fa-check-circle", style: { color: success[200] } }),
+    copy: {
         autoClose: 4000,
+        color: primary[200],
+        defaultTitle: 'Copied to clipboard!',
+        icon: _jsx("i", { className: 'fas fa-copy', style: { color: primary[200] } }),
     },
     error: {
-        defaultTitle: 'Oops!',
-        color: error[100],
-        icon: _jsx("i", { className: "fas fa-exclamation-circle", style: { color: error[100] } }),
         autoClose: false,
-    },
-    warning: {
-        defaultTitle: 'Warning',
-        color: warning[100],
-        icon: _jsx("i", { className: "fas fa-exclamation-triangle", style: { color: warning[100] } }),
-        autoClose: 4000,
+        color: error[100],
+        defaultTitle: 'Oops!',
+        icon: (_jsx("i", { className: 'fas fa-exclamation-circle', style: { color: error[100] } })),
     },
     info: {
-        defaultTitle: 'Note',
-        color: primary[200],
-        icon: _jsx("i", { className: "fas fa-info-circle", style: { color: primary[200] } }),
         autoClose: 4000,
+        color: primary[200],
+        defaultTitle: 'Note',
+        icon: _jsx("i", { className: 'fas fa-info-circle', style: { color: primary[200] } }),
     },
     loading: {
-        defaultTitle: 'Loading...',
-        color: primary[200],
-        icon: _jsx(Loader, { size: "md", color: primary[200] }),
         autoClose: false,
+        color: primary[200],
+        defaultTitle: 'Loading...',
+        icon: _jsx(Loader, { color: primary[200], size: 'md' }),
     },
-    copy: {
-        defaultTitle: 'Copied to clipboard!',
-        color: primary[300],
-        icon: _jsx("i", { className: "fas fa-copy", style: { color: primary[300] } }),
+    success: {
         autoClose: 4000,
+        color: success[300],
+        defaultTitle: 'Success!',
+        icon: _jsx("i", { className: 'fas fa-check-circle', style: { color: success[300] } }),
+    },
+    remove: {
+        autoClose: 4000,
+        color: error[100],
+        defaultTitle: 'Removed',
+        icon: _jsx("i", { className: 'fas fa-circle-minus', style: { color: error[100] } }),
+    },
+    warning: {
+        autoClose: 4000,
+        color: warning[100],
+        defaultTitle: 'Warning',
+        icon: (_jsx("i", { className: 'fas fa-exclamation-triangle', style: { color: warning[100] } })),
     },
 };

package/dist/components/Info/ResponsiveDrawer/ResponsiveDrawer.d.ts

@@ -0,0 +1,37 @@
+import type React from 'react';
+export interface ResponsiveDrawerAnchor {
+    /** Anchor used below the `breakpoint` width. */
+    base: 'bottom' | 'right' | 'left' | 'top';
+    /** Anchor used at/above the `breakpoint` width. */
+    md: 'bottom' | 'right' | 'left' | 'top';
+}
+export interface ResponsiveDrawerProps {
+    opened: boolean;
+    onClose: () => void;
+    children: React.ReactNode;
+    title?: React.ReactNode;
+    subtitle?: React.ReactNode;
+    footer?: React.ReactNode;
+    header?: React.ReactNode;
+    /** Width at which we switch from `base` to `md`. Default `768`. */
+    breakpoint?: number;
+    /** Anchor resolution across breakpoints. Default `{ base: 'bottom', md: 'right' }`. */
+    anchor?: ResponsiveDrawerAnchor;
+    /** Size prop forwarded to the active drawer variant. */
+    size?: string | number;
+    /** Max sheet height (viewport %) when rendering as `MobileDrawer`. */
+    maxHeightVh?: number;
+    /** Show the grab handle when rendering as `MobileDrawer`. Default `true`. */
+    showGrabHandle?: boolean;
+    /** Show the header close button when rendering as `Drawer`. Default `true`. */
+    showClose?: boolean;
+    /** Pixel offset from the viewport bottom when rendering as `MobileDrawer`. */
+    bottomOffset?: number;
+}
+/**
+ * Branches between `Drawer` and `MobileDrawer` at a breakpoint so consumers
+ * can author a single markup tree for both. Content shape (title / subtitle /
+ * footer / header) stays identical across both variants.
+ */
+export declare const ResponsiveDrawer: ({ opened, onClose, children, title, subtitle, footer, header, breakpoint, anchor, size, maxHeightVh, showGrabHandle, showClose, bottomOffset, }: ResponsiveDrawerProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ResponsiveDrawer.d.ts.map

package/dist/components/Info/ResponsiveDrawer/ResponsiveDrawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveDrawer.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/ResponsiveDrawer/ResponsiveDrawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,sBAAsB;IACrC,gDAAgD;IAChD,IAAI,EAAE,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,CAAC;IAC1C,mDAAmD;IACnD,EAAE,EAAE,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,CAAC;CACzC;AAED,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,mEAAmE;IACnE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uFAAuF;IACvF,MAAM,CAAC,EAAE,sBAAsB,CAAC;IAChC,wDAAwD;IACxD,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,sEAAsE;IACtE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6EAA6E;IAC7E,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,+EAA+E;IAC/E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8EAA8E;IAC9E,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,GAAI,iJAe9B,qBAAqB,4CAqCvB,CAAC"}

package/dist/components/Info/ResponsiveDrawer/ResponsiveDrawer.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMediaQuery } from '../../../hooks/useMediaQuery';
+import { Drawer } from '../Drawer/Drawer';
+import { MobileDrawer } from '../MobileDrawer/MobileDrawer';
+/**
+ * Branches between `Drawer` and `MobileDrawer` at a breakpoint so consumers
+ * can author a single markup tree for both. Content shape (title / subtitle /
+ * footer / header) stays identical across both variants.
+ */
+export const ResponsiveDrawer = ({ opened, onClose, children, title, subtitle, footer, header, breakpoint = 768, anchor = { base: 'bottom', md: 'right' }, size, maxHeightVh, showGrabHandle, showClose, bottomOffset, }) => {
+    const isNarrow = useMediaQuery(`(max-width: ${breakpoint - 1}px)`);
+    const activeAnchor = isNarrow ? anchor.base : anchor.md;
+    if (activeAnchor === 'bottom') {
+        return (_jsx(MobileDrawer, { bottomOffset: bottomOffset, footer: footer, header: header, maxHeightVh: maxHeightVh, onClose: onClose, opened: opened, showGrabHandle: showGrabHandle, subtitle: subtitle, title: title, children: children }));
+    }
+    return (_jsx(Drawer, { footer: footer, header: header, onClose: onClose, opened: opened, position: activeAnchor, showClose: showClose, size: size, subtitle: subtitle, title: title, children: children }));
+};

package/dist/components/Info/ResponsiveDrawer/ResponsiveDrawer.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ResponsiveDrawer } from './ResponsiveDrawer';
+declare const meta: Meta<typeof ResponsiveDrawer>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+//# sourceMappingURL=ResponsiveDrawer.stories.d.ts.map

package/dist/components/Info/ResponsiveDrawer/ResponsiveDrawer.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveDrawer.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/ResponsiveDrawer/ResponsiveDrawer.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAM5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAYvC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KA8BrB,CAAC"}

package/dist/components/Info/ResponsiveDrawer/ResponsiveDrawer.stories.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useDisclosure } from '../../../hooks/useDisclosure';
+import { Button } from '../../Inputs/Buttons/Button/Button';
+import { Group } from '../../Layout/Group/Group';
+import { Stack } from '../../Layout/Stack/Stack';
+import { Text } from '../../Typography/Text/Text';
+import { ResponsiveDrawer } from './ResponsiveDrawer';
+const meta = {
+    component: ResponsiveDrawer,
+    parameters: {
+        docs: {
+            description: {
+                component: 'Branches between `Drawer` (right-anchored) and `MobileDrawer` (bottom-anchored) at a breakpoint. Author one markup tree — it renders correctly on both touch and pointer viewports. Resize the viewport to see the switch.',
+            },
+        },
+        layout: 'fullscreen',
+    },
+    title: 'Components/Info/ResponsiveDrawer',
+};
+export default meta;
+export const Default = {
+    render: () => {
+        const [opened, { open, close }] = useDisclosure(false);
+        return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: open, children: "Open responsive drawer" }), _jsx(ResponsiveDrawer, { footer: _jsxs(Group, { position: 'right', children: [_jsx(Button, { onClick: close, variant: 'cancel', children: "Cancel" }), _jsx(Button, { onClick: close, children: "Save" })] }), onClose: close, opened: opened, title: 'Slide details', children: _jsxs(Stack, { children: [_jsx(Text, { children: "Renders as a bottom sheet under 768px and as a right-side drawer above it." }), _jsx(Text, { variant: 'subtle', children: "Resize the viewport to observe." })] }) })] }));
+    },
+};

package/dist/components/Info/Tooltips/InfoTooltip/InfoTooltip.d.ts

@@ -21,7 +21,7 @@ declare const componentVariants: {
         icon: string;
     };
     error: {
-        color: "#FB2C36";
+        color: "#FF3B30";
         icon: string;
     };
 };

package/dist/components/Info/Tooltips/InfoTooltip/InfoTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InfoTooltip.d.ts","sourceRoot":"","sources":["../../../../../src/components/Info/Tooltips/InfoTooltip/InfoTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C,UAAU,gBAAgB;IACxB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,WAAW,GAAG,cAAc,CAAC;IACnE,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,OAAO,iBAAiB,CAAC;CAC1C;AAED,QAAA,MAAM,iBAAiB;;;;;;;;;;;;;CAatB,CAAC;AAEF,QAAA,MAAM,cAAc;;;;;CAKV,CAAC;AAEX,QAAA,MAAM,WAAW,GAAI,iFAA+G,gBAAgB,4CAcnJ,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"InfoTooltip.d.ts","sourceRoot":"","sources":["../../../../../src/components/Info/Tooltips/InfoTooltip/InfoTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAM5C,UAAU,gBAAgB;IACxB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,WAAW,GAAG,cAAc,CAAC;IACnE,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,OAAO,iBAAiB,CAAC;CAC1C;AAED,QAAA,MAAM,iBAAiB;;;;;;;;;;;;;CAatB,CAAC;AAEF,QAAA,MAAM,cAAc;;;;;CAKV,CAAC;AAEX,QAAA,MAAM,WAAW,GAAI,iFAA+G,gBAAgB,4CAwBnJ,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/Info/Tooltips/InfoTooltip/InfoTooltip.js

@@ -1,6 +1,8 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { error, neutral, warning } from '../../../../constants/colors';
 import { Tooltip } from '../Tooltip/Tooltip';
+import { useTouchDevice } from '../../../../hooks/useMediaQuery';
+import { Popover } from '../Popover/Popover';
 const componentVariants = {
     info: {
         color: neutral[100],
@@ -8,7 +10,7 @@ const componentVariants = {
     },
     warning: {
         color: warning[100],
-        icon: 'fas fa-exclamation-circle',
+        icon: 'fas fa-triangle-exclamation',
     },
     error: {
         color: error[100],
@@ -29,6 +31,10 @@ const InfoTooltip = ({ text, content, position = 'top-start', size = 'md', offse
         },
         ...styles,
     };
-    return (_jsx(Tooltip, { text: text || content, position: position, offset: offset, className: className, maxWidth: maxWidth, children: _jsx("i", { className: componentVariants[variant].icon, style: style.icon }) }));
+    const isTouchDevice = useTouchDevice();
+    return (_jsx(_Fragment, { children: isTouchDevice ?
+            _jsx(Popover, { text: text || content, position: position, offset: offset, className: className, maxWidth: maxWidth, children: _jsx("i", { className: componentVariants[variant].icon, style: style.icon }) })
+            :
+                _jsx(Tooltip, { text: text || content, position: position, offset: offset, className: className, maxWidth: maxWidth, children: _jsx("i", { className: componentVariants[variant].icon, style: style.icon }) }) }));
 };
 export { InfoTooltip };

package/dist/components/Info/Tooltips/Popover/Popover.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { CSSObject } from '@mantine/styles';
+interface PopoverProps {
+    children: React.ReactNode;
+    text?: React.ReactNode;
+    position?: 'top-end' | 'bottom-end' | 'top-start' | 'bottom-start';
+    offset?: number;
+    className?: string;
+    styles?: Record<string, CSSObject>;
+    maxWidth?: string;
+    disabled?: boolean;
+    fullWidth?: boolean;
+}
+declare const Popover: ({ children, text, position, offset, className, styles, maxWidth, disabled, fullWidth }: PopoverProps) => import("react/jsx-runtime").JSX.Element;
+export { Popover };
+//# sourceMappingURL=Popover.d.ts.map

package/dist/components/Info/Tooltips/Popover/Popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../../../src/components/Info/Tooltips/Popover/Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAK5C,UAAU,YAAY;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,WAAW,GAAG,cAAc,CAAC;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,QAAA,MAAM,OAAO,GAAI,wFAAsG,YAAY,4CA2ClI,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/components/Info/Tooltips/Popover/Popover.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Popover as MantinePopover, Box } from '@mantine/core';
+import { neutral } from '../../../../constants/colors';
+import { fontBase, fontSize, fontWeight } from '../../../../constants/font';
+import { spacing } from '../../../../constants/spacing';
+const Popover = ({ children, text, position = 'top-start', offset, className, styles, maxWidth, disabled, fullWidth }) => {
+    const wrapperStyle = fullWidth
+        ? { display: 'block', width: '100%', minWidth: 0 }
+        : {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: 'fit-content',
+        };
+    const popoverStyle = {
+        dropdown: {
+            ...fontBase,
+            color: neutral[200],
+            fontWeight: fontWeight['medium'],
+            boxShadow: '0px 0px 19px 0px #00000040',
+            borderRadius: '8px',
+            textWrap: 'wrap',
+            maxWidth: maxWidth || '375px',
+            padding: `${spacing.sm} 11.25px`,
+            ...fontSize['sm'],
+            height: 'fit-content',
+        },
+        ...styles,
+    };
+    return (_jsxs(MantinePopover, { withArrow: true, arrowRadius: 0, arrowSize: 10, position: position, styles: popoverStyle, offset: offset, withinPortal: true, disabled: disabled, children: [_jsx(MantinePopover.Target, { children: _jsx(Box, { sx: wrapperStyle, className: className, children: children }) }), _jsx(MantinePopover.Dropdown, { children: text })] }));
+};
+export { Popover };

package/dist/components/Info/Tooltips/Tooltip/Tooltip.d.ts

@@ -8,7 +8,11 @@ interface TooltipProps {
     className?: string;
     styles?: Record<string, CSSObject>;
     maxWidth?: string;
+    /** When true, the tooltip will not render. */
+    disabled?: boolean;
+    /** When true, the wrapper fills its parent width instead of shrinking to content. */
+    fullWidth?: boolean;
 }
-declare const Tooltip: ({ children, text, position, offset, className, styles, maxWidth }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+declare const Tooltip: ({ children, text, position, offset, className, styles, maxWidth, disabled, fullWidth }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
 export { Tooltip };
 //# sourceMappingURL=Tooltip.d.ts.map

package/dist/components/Info/Tooltips/Tooltip/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../../src/components/Info/Tooltips/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAK5C,UAAU,YAAY;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,WAAW,GAAG,cAAc,CAAC;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,QAAA,MAAM,OAAO,GAAI,mEAAiF,YAAY,4CAgD7G,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../../src/components/Info/Tooltips/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAK5C,UAAU,YAAY;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,WAAW,GAAG,cAAc,CAAC;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qFAAqF;IACrF,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,QAAA,MAAM,OAAO,GAAI,wFAAsG,YAAY,4CAmDlI,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/components/Info/Tooltips/Tooltip/Tooltip.js

@@ -3,19 +3,21 @@ import { Tooltip as MantineTooltip, Box } from '@mantine/core';
 import { neutral } from '../../../../constants/colors';
 import { fontBase, fontSize, fontWeight } from '../../../../constants/font';
 import { spacing } from '../../../../constants/spacing';
-const Tooltip = ({ children, text, position = 'top-start', offset, className, styles, maxWidth }) => {
+const Tooltip = ({ children, text, position = 'top-start', offset, className, styles, maxWidth, disabled, fullWidth }) => {
     const positionToTransition = {
         'top-end': 'slide-up',
         'bottom-end': 'slide-down',
         'top-start': 'slide-up',
         'bottom-start': 'slide-down',
     };
-    const wrapperStyle = {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        width: 'fit-content',
-    };
+    const wrapperStyle = fullWidth
+        ? { display: 'block', width: '100%', minWidth: 0 }
+        : {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: 'fit-content',
+        };
     const tooltipStyle = {
         tooltip: {
             ...fontBase,
@@ -31,6 +33,6 @@ const Tooltip = ({ children, text, position = 'top-start', offset, className, st
         },
         ...styles,
     };
-    return (_jsx(MantineTooltip, { withArrow: true, arrowRadius: 0, arrowSize: 8, label: text, position: position, transitionProps: { transition: positionToTransition[position], duration: 200 }, color: "white", styles: tooltipStyle, offset: offset, className: className, withinPortal: true, children: _jsx(Box, { sx: wrapperStyle, children: children }) }));
+    return (_jsx(MantineTooltip, { withArrow: true, arrowRadius: 0, arrowSize: 8, label: text, position: position, transitionProps: { transition: positionToTransition[position], duration: 200 }, color: "white", styles: tooltipStyle, offset: offset, className: className, withinPortal: true, disabled: disabled, children: _jsx(Box, { sx: wrapperStyle, children: children }) }));
 };
 export { Tooltip };

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ButtonProps as MantineButtonProps } from '@mantine/core';
 import { componentSizes } from './sizes';
 import { componentVariants } from '../shared/variants';
@@ -8,6 +9,7 @@ export interface ButtonProps extends MantineButtonProps {
     fullWidth?: boolean;
     toggled?: boolean;
     shadow?: boolean;
+    subtle?: boolean;
 }
-export declare const Button: ({ onClick, size, variant, fullWidth, toggled, shadow, styles, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=Button.d.ts.map

package/dist/components/Inputs/Buttons/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,EAA2B,WAAW,IAAI,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAE3F,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IACrD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,OAAO,iBAAiB,CAAC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,MAAM,GAAI,0EAAqH,WAAW,4CAkCtJ,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAA2B,WAAW,IAAI,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAE3F,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAe,iBAAiB,EAAkB,MAAM,oBAAoB,CAAC;AAGpF,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IACrD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,OAAO,iBAAiB,CAAC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,MAAM,uFAiEjB,CAAC"}

package/dist/components/Inputs/Buttons/Button/Button.js

@@ -1,20 +1,51 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import { Button as MantineButton } from '@mantine/core';
 import { fontBase, fontWeight } from '../../../../constants/font';
 import { componentSizes } from './sizes';
-import { componentVariants } from '../shared/variants';
-export const Button = ({ onClick, size = 'md', variant = 'primary', fullWidth = false, toggled = false, shadow = false, styles, ...props }) => {
+import { HOVER_MEDIA, componentVariants, subtleVariants } from '../shared/variants';
+import { neutral } from '../../../../constants/colors';
+export const Button = forwardRef(({ onClick, size = 'md', variant = 'primary', fullWidth = false, toggled = false, shadow = false, subtle = false, styles, ...props }, ref) => {
     const selectedVariant = componentVariants[variant];
     const selectedSize = componentSizes[size];
     const getVariantStyles = () => {
         if (toggled) {
+            // Toggled hover override is gated behind HOVER_MEDIA so it doesn't
+            // contribute to sticky-hover on touch devices. `:hover` never fires
+            // on touch anyway, so no behavior change there — this just keeps the
+            // CSS cohesive.
             return {
                 ...selectedVariant,
                 ...selectedVariant['&:toggled'],
+                [HOVER_MEDIA]: {
+                    '&:hover': selectedVariant['&:toggled'],
+                },
             };
         }
         return selectedVariant;
     };
+    const getSubtleStyles = () => {
+        if (subtle) {
+            return {
+                ...subtleVariants[variant],
+                border: `1px solid ${neutral[50]}`,
+                background: 'white',
+                [HOVER_MEDIA]: {
+                    '&:hover': {
+                        background: neutral[50],
+                        border: `1px solid ${neutral[50]}`,
+                    },
+                },
+                '&:active': {
+                    background: 'white',
+                },
+                '&:toggled': {
+                    background: neutral[50],
+                    border: `1px solid ${neutral[100]}`,
+                },
+            };
+        }
+    };
     const style = {
         root: {
             borderRadius: '8px',
@@ -26,12 +57,14 @@ export const Button = ({ onClick, size = 'md', variant = 'primary', fullWidth =
             boxShadow: shadow ? '0px 4px 6px rgba(0, 0, 0, 0.1)' : 'none',
             transition: 'background 0.1s ease-in-out',
             ...getVariantStyles(),
+            ...getSubtleStyles(),
         },
         label: {
             ...fontBase,
-            fontWeight: fontWeight['semibold'],
+            fontWeight: variant.startsWith('nav') ? fontWeight['regular'] : fontWeight['semibold'],
         },
         ...styles,
     };
-    return _jsx(MantineButton, { styles: style, size: size, onClick: onClick, ...props });
-};
+    return _jsx(MantineButton, { ref: ref, styles: style, size: size, onClick: onClick, ...props });
+});
+Button.displayName = 'Button';

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

@@ -5,6 +5,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const Variants: Story;
+export declare const OnDarkSurface: Story;
 export declare const Sizes: Story;
 export declare const States: Story;
 export declare const TogglingButtons: Story;

package/dist/components/Inputs/Buttons/Button/Button.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/Button/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAMlC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAyH7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAerB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAWtB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAQpB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAY7B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAgC1B,CAAC"}
+{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/Button/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAU5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAwI7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAerB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAYtB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KA6B3B,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAQpB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAY7B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAgC1B,CAAC"}