@taiv/ui 1.14.1 → 2.0.0

package/dist/constants/font.js

@@ -68,14 +68,14 @@ const titleStyle = {
         ...fontBase,
         ...fontSize['3xl'],
         fontWeight: fontWeight['bold'],
-        color: 'black',
+        color: neutral[500],
     },
     sectionHeader: {
         // h2
         ...fontBase,
         ...fontSize['xl'],
         fontWeight: fontWeight['semibold'],
-        color: 'black',
+        color: neutral[500],
     },
     subheader: {
         // h3

package/dist/hooks/index.d.ts

@@ -1,6 +1,14 @@
 export { useCopy } from './useCopy';
-export { useMediaQuery, useScreenSize, useMobile, useTablet, useLaptop, useDesktop, useWide } from './useMediaQuery';
+export { useDisclosure } from './useDisclosure';
+export { useHeadroom } from './useHeadroom';
+export { useScrollLock } from './useScrollLock';
+export { useElementSize, useListState, useResizeObserver, useTimeout, useDebouncedValue } from '@mantine/hooks';
+export { useForm } from '@mantine/form';
+export type { UseFormReturnType } from '@mantine/form';
+export { useMediaQuery, useScreenSize, useMobile, useTablet, useLaptop, useDesktop, useWide, useTouchDevice } from './useMediaQuery';
 export { useNotifications } from './useNotifications';
 export { useConfirmationModal } from './useConfirmationModal';
 export { useInfoModal } from './useInfoModal';
+export { usePagination } from './usePagination';
+export type { PaginationParams } from './usePagination';
 //# sourceMappingURL=index.d.ts.map

package/dist/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AACrH,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,iBAAiB,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAChH,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACrI,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/hooks/index.js

@@ -1,5 +1,11 @@
 export { useCopy } from './useCopy';
-export { useMediaQuery, useScreenSize, useMobile, useTablet, useLaptop, useDesktop, useWide } from './useMediaQuery';
+export { useDisclosure } from './useDisclosure';
+export { useHeadroom } from './useHeadroom';
+export { useScrollLock } from './useScrollLock';
+export { useElementSize, useListState, useResizeObserver, useTimeout, useDebouncedValue } from '@mantine/hooks';
+export { useForm } from '@mantine/form';
+export { useMediaQuery, useScreenSize, useMobile, useTablet, useLaptop, useDesktop, useWide, useTouchDevice } from './useMediaQuery';
 export { useNotifications } from './useNotifications';
 export { useConfirmationModal } from './useConfirmationModal';
 export { useInfoModal } from './useInfoModal';
+export { usePagination } from './usePagination';

package/dist/hooks/useConfirmationModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useConfirmationModal.d.ts","sourceRoot":"","sources":["../../src/hooks/useConfirmationModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AAInE,eAAO,MAAM,oBAAoB;oBACR;QACrB,OAAO,CAAC,EAAE,OAAO,CAAC,MAAM,OAAO,aAAa,EAAE,OAAO,CAAC,CAAC;QACvD,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;QAC1B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;QACvB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;QACtB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;KACxB;qBAwFuB,MAAM;;CAa/B,CAAC"}
+{"version":3,"file":"useConfirmationModal.d.ts","sourceRoot":"","sources":["../../src/hooks/useConfirmationModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAOzC,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AAInE,eAAO,MAAM,oBAAoB;oBACR;QACrB,OAAO,CAAC,EAAE,OAAO,CAAC,MAAM,OAAO,aAAa,EAAE,OAAO,CAAC,CAAC;QACvD,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;QAC1B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;QACvB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;QACtB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;KACxB;qBA2GuB,MAAM;;CAa/B,CAAC"}

package/dist/hooks/useConfirmationModal.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
+import React, { useEffect } from 'react';
 import { modals } from '@mantine/modals';
 import { neutral } from '../constants/colors';
 import { spacing } from '../constants/spacing';
@@ -33,11 +33,30 @@ export const useConfirmationModal = () => {
         const coloredIcon = icon && React.cloneElement(icon, { color: icon.props.color || selectedVariant.iconColor });
         const modalIcon = coloredIcon || _jsx("i", { className: selectedVariant.icon, style: { color: selectedVariant.iconColor, fontSize: '20px' } });
         const ConfirmModalContent = () => {
+            // Enter confirms, Escape cancels. We own Escape (closeOnEscape is
+            // disabled at the modal level below) so the user's onCancel fires
+            // on Escape instead of the modal silently closing.
+            useEffect(() => {
+                const onKeyDown = (e) => {
+                    if (e.key === 'Enter') {
+                        e.preventDefault();
+                        handleConfirm();
+                    }
+                    else if (e.key === 'Escape') {
+                        e.preventDefault();
+                        handleCancel();
+                    }
+                };
+                window.addEventListener('keydown', onKeyDown);
+                return () => window.removeEventListener('keydown', onKeyDown);
+            }, []);
             return (_jsx(Center, { h: "100%", w: "100%", children: _jsxs(Stack, { gap: "20px", h: "100%", w: "100%", align: "center", children: [_jsxs(Stack, { gap: spacing.lg, align: "center", children: [_jsx(Center, { style: iconContainer, children: modalIcon }), _jsxs(Stack, { gap: spacing.xxs, align: "center", children: [_jsx(Title, { variant: "cardHeader", align: "center", children: title || selectedVariant.title }), _jsx(Title, { variant: "cardSubheader", align: "center", children: message || selectedVariant.message })] })] }), _jsx(Center, { h: "100%", w: "100%", children: _jsxs(Group, { gap: "10px", align: "center", children: [_jsx(Button, { onClick: handleCancel, variant: "secondary", children: cancelLabel || selectedVariant.cancelLabel }), _jsx(Button, { onClick: handleConfirm, variant: selectedVariant.buttonVariant, children: confirmLabel || selectedVariant.confirmLabel })] }) })] }) }));
         };
         modals.open({
             children: _jsx(ConfirmModalContent, {}),
             size,
+            // Escape is handled inside ConfirmModalContent so it can fire onCancel.
+            closeOnEscape: false,
             styles: {
                 content: {
                     borderRadius: '8px',

package/dist/hooks/useDisclosure.d.ts

@@ -0,0 +1,11 @@
+import { useDisclosure as useMantineDisclosure } from '@mantine/hooks';
+/**
+ * Re-export of Mantine v6's `useDisclosure` hook for managing boolean open/closed state.
+ *
+ * Returns a tuple: `[opened, { open, close, toggle }]`.
+ *
+ * @example
+ * const [opened, { open, close, toggle }] = useDisclosure(false);
+ */
+export declare const useDisclosure: typeof useMantineDisclosure;
+//# sourceMappingURL=useDisclosure.d.ts.map

package/dist/hooks/useDisclosure.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDisclosure.d.ts","sourceRoot":"","sources":["../../src/hooks/useDisclosure.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,IAAI,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAEvE;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,6BAAuB,CAAC"}

package/dist/hooks/useDisclosure.js

@@ -0,0 +1,10 @@
+import { useDisclosure as useMantineDisclosure } from '@mantine/hooks';
+/**
+ * Re-export of Mantine v6's `useDisclosure` hook for managing boolean open/closed state.
+ *
+ * Returns a tuple: `[opened, { open, close, toggle }]`.
+ *
+ * @example
+ * const [opened, { open, close, toggle }] = useDisclosure(false);
+ */
+export const useDisclosure = useMantineDisclosure;

package/dist/hooks/useHeadroom.d.ts

@@ -0,0 +1,18 @@
+import { useHeadroom as useMantineHeadroom } from '@mantine/hooks';
+/**
+ * Re-export of Mantine v6's `useHeadroom` hook for show-on-scroll-up / hide-on-scroll-down
+ * headers.
+ *
+ * Returns a boolean — `true` when the element should be pinned (visible), `false` when it
+ * should be released (hidden). Use it to conditionally translate a fixed header offscreen.
+ *
+ * @example
+ * const pinned = useHeadroom({ fixedAt: 120 });
+ * return (
+ *   <header style={{ transform: pinned ? 'translateY(0)' : 'translateY(-100%)' }}>
+ *     ...
+ *   </header>
+ * );
+ */
+export declare const useHeadroom: typeof useMantineHeadroom;
+//# sourceMappingURL=useHeadroom.d.ts.map

package/dist/hooks/useHeadroom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHeadroom.d.ts","sourceRoot":"","sources":["../../src/hooks/useHeadroom.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,IAAI,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAEnE;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,WAAW,2BAAqB,CAAC"}

package/dist/hooks/useHeadroom.js

@@ -0,0 +1,17 @@
+import { useHeadroom as useMantineHeadroom } from '@mantine/hooks';
+/**
+ * Re-export of Mantine v6's `useHeadroom` hook for show-on-scroll-up / hide-on-scroll-down
+ * headers.
+ *
+ * Returns a boolean — `true` when the element should be pinned (visible), `false` when it
+ * should be released (hidden). Use it to conditionally translate a fixed header offscreen.
+ *
+ * @example
+ * const pinned = useHeadroom({ fixedAt: 120 });
+ * return (
+ *   <header style={{ transform: pinned ? 'translateY(0)' : 'translateY(-100%)' }}>
+ *     ...
+ *   </header>
+ * );
+ */
+export const useHeadroom = useMantineHeadroom;

package/dist/hooks/useInfoModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useInfoModal.d.ts","sourceRoot":"","sources":["../../src/hooks/useInfoModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AAGnE,eAAO,MAAM,YAAY;oBACA;QAAE,OAAO,CAAC,EAAE,MAAM,OAAO,aAAa,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE;qBA8EpJ,MAAM;;CAa/B,CAAC"}
+{"version":3,"file":"useInfoModal.d.ts","sourceRoot":"","sources":["../../src/hooks/useInfoModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAOzC,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AAGnE,eAAO,MAAM,YAAY;oBACA;QAAE,OAAO,CAAC,EAAE,MAAM,OAAO,aAAa,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE;qBA2FpJ,MAAM;;CAa/B,CAAC"}

package/dist/hooks/useInfoModal.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
+import React, { useEffect } from 'react';
 import { modals } from '@mantine/modals';
 import { neutral } from '../constants/colors';
 import { spacing } from '../constants/spacing';
@@ -27,6 +27,18 @@ export const useInfoModal = () => {
         const coloredIcon = icon && React.cloneElement(icon, { color: icon.props.color || selectedVariant.iconColor });
         const modalIcon = coloredIcon || _jsx("i", { className: selectedVariant.icon, style: { color: selectedVariant.iconColor, fontSize: '20px' } });
         const InfoModalContent = () => {
+            // Enter triggers the primary action; Escape is handled by Mantine's
+            // built-in closeOnEscape (no cancel callback for info modals).
+            useEffect(() => {
+                const onKeyDown = (e) => {
+                    if (e.key === 'Enter') {
+                        e.preventDefault();
+                        handleConfirm();
+                    }
+                };
+                window.addEventListener('keydown', onKeyDown);
+                return () => window.removeEventListener('keydown', onKeyDown);
+            }, []);
             return (_jsx(Center, { h: "100%", w: "100%", children: _jsxs(Stack, { gap: "20px", h: "100%", w: "100%", align: "center", children: [_jsxs(Stack, { gap: spacing.lg, align: "center", children: [_jsx(Center, { style: iconContainer, children: modalIcon }), _jsxs(Stack, { gap: spacing.xxs, align: "center", children: [_jsx(Title, { variant: "cardHeader", align: "center", children: title || selectedVariant.title }), _jsx(Title, { variant: "cardSubheader", align: "center", children: message || selectedVariant.message })] })] }), _jsx(Center, { h: "100%", w: "100%", children: _jsx(Button, { onClick: handleConfirm, variant: selectedVariant.buttonVariant, children: "OK" }) })] }) }));
         };
         modals.open({

package/dist/hooks/useMediaQuery.d.ts

@@ -7,4 +7,5 @@ export declare const useTablet: () => boolean;
 export declare const useLaptop: () => boolean;
 export declare const useDesktop: () => boolean;
 export declare const useWide: () => boolean;
+export declare const useTouchDevice: () => boolean;
 //# sourceMappingURL=useMediaQuery.d.ts.map

package/dist/hooks/useMediaQuery.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMediaQuery.d.ts","sourceRoot":"","sources":["../../src/hooks/useMediaQuery.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,IAAI,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AACvE,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEvD,eAAO,MAAM,aAAa,6BAAuB,CAAC;AAElD,eAAO,MAAM,aAAa,QAAO,MAAM,OAAO,WAW7C,CAAC;AAEF,eAAO,MAAM,SAAS,eAA8D,CAAC;AACrF,eAAO,MAAM,SAAS,eAA8D,CAAC;AACrF,eAAO,MAAM,SAAS,eAA8D,CAAC;AACrF,eAAO,MAAM,UAAU,eAA+D,CAAC;AACvF,eAAO,MAAM,OAAO,eAA4D,CAAC"}
+{"version":3,"file":"useMediaQuery.d.ts","sourceRoot":"","sources":["../../src/hooks/useMediaQuery.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,IAAI,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AACvE,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEvD,eAAO,MAAM,aAAa,6BAAuB,CAAC;AAElD,eAAO,MAAM,aAAa,QAAO,MAAM,OAAO,WAW7C,CAAC;AAEF,eAAO,MAAM,SAAS,eAA8D,CAAC;AACrF,eAAO,MAAM,SAAS,eAA8D,CAAC;AACrF,eAAO,MAAM,SAAS,eAA8D,CAAC;AACrF,eAAO,MAAM,UAAU,eAA+D,CAAC;AACvF,eAAO,MAAM,OAAO,eAA4D,CAAC;AACjF,eAAO,MAAM,cAAc,eAA2C,CAAC"}

package/dist/hooks/useMediaQuery.js

@@ -21,3 +21,4 @@ export const useTablet = () => useMediaQuery(`(max-width: ${breakpoints.TABLET}p
 export const useLaptop = () => useMediaQuery(`(max-width: ${breakpoints.LAPTOP}px)`);
 export const useDesktop = () => useMediaQuery(`(max-width: ${breakpoints.DESKTOP}px)`);
 export const useWide = () => useMediaQuery(`(max-width: ${breakpoints.WIDE}px)`);
+export const useTouchDevice = () => useMediaQuery('(pointer: coarse)');

package/dist/hooks/useNotifications.d.ts

@@ -1,16 +1,48 @@
 import { componentVariants } from '../components/Info/Notifications/variants';
+type Variant = keyof typeof componentVariants;
+type BaseOptions = {
+    variant?: Variant;
+    message: string;
+    title?: string;
+    id?: string;
+    autoClose?: number | false;
+};
+type ActionOptions = BaseOptions & {
+    label: string;
+    onClick: () => void;
+    /** Dismiss the notification when the action is clicked. Defaults to `true`. */
+    dismissOnClick?: boolean;
+};
+type ConfirmationOptions = BaseOptions & {
+    confirmLabel: string;
+    cancelLabel: string;
+    onConfirm: () => void;
+    /** Optional — defaults to no-op (the notification still dismisses). */
+    onCancel?: () => void;
+    /** Dismiss the notification when either button is clicked. Defaults to `true`. */
+    dismissOnClick?: boolean;
+};
 export declare const useNotifications: () => {
-    show: (options: {
-        variant?: keyof typeof componentVariants;
-        message: string;
-        title?: string;
-        id?: string;
-    }) => void;
+    hide: (id: string) => Promise<void>;
+    show: (options: BaseOptions) => void;
     showError: () => void;
     showLoading: (options: {
         message: string;
         title?: string;
     }) => string;
-    hide: (id: string) => Promise<void>;
+    showWithAction: (options: ActionOptions) => void;
+    showWithConfirmation: (options: ConfirmationOptions) => void;
+    showWithProgress: (options: {
+        message: string;
+        title?: string;
+        id?: string;
+        initialValue?: number;
+    }) => {
+        id: string;
+        update: (value: number, message?: string) => void;
+        done: (message?: string, terminalTitle?: string) => void;
+        fail: (message?: string, terminalTitle?: string) => void;
+    };
 };
+export {};
 //# sourceMappingURL=useNotifications.d.ts.map

package/dist/hooks/useNotifications.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useNotifications.d.ts","sourceRoot":"","sources":["../../src/hooks/useNotifications.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,2CAA2C,CAAC;AAE9E,eAAO,MAAM,gBAAgB;oBAMJ;QACrB,OAAO,CAAC,EAAE,MAAM,OAAO,iBAAiB,CAAC;QACzC,OAAO,EAAE,MAAM,CAAC;QAChB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,EAAE,CAAC,EAAE,MAAM,CAAC;KACb;;2BAmB6B;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE;eA7BzC,MAAM;CAiD/B,CAAC"}
+{"version":3,"file":"useNotifications.d.ts","sourceRoot":"","sources":["../../src/hooks/useNotifications.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,iBAAiB,EAAE,MAAM,2CAA2C,CAAC;AAI9E,KAAK,OAAO,GAAG,MAAM,OAAO,iBAAiB,CAAC;AAE9C,KAAK,WAAW,GAAG;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;CAC5B,CAAC;AAEF,KAAK,aAAa,GAAG,WAAW,GAAG;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,+EAA+E;IAC/E,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,KAAK,mBAAmB,GAAG,WAAW,GAAG;IACvC,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,kFAAkF;IAClF,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,gBAAgB;eACH,MAAM;oBAyCP,WAAW;;2BAsJJ;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE;8BA/IhC,aAAa;oCA8BP,mBAAmB;gCAuCvB;QACjC,OAAO,EAAE,MAAM,CAAC;QAChB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,YAAY,CAAC,EAAE,MAAM,CAAC;KACvB;;wBA8CmB,MAAM,YAAY,MAAM;yBAKvB,MAAM,kBAAkB,MAAM;yBAK9B,MAAM,kBAAkB,MAAM;;CAyCpD,CAAC"}

package/dist/hooks/useNotifications.js

@@ -1,18 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { notifications as mantineNotifications } from '@mantine/notifications';
+import { Button } from '../components/Inputs/Buttons/Button/Button';
+import { Progress } from '../components/Data/Progress/Progress';
+import { Group } from '../components/Layout/Group/Group';
+import { Stack } from '../components/Layout/Stack/Stack';
+import { Text } from '../components/Typography/Text/Text';
 import { componentVariants } from '../components/Info/Notifications/variants';
+const ACTIONABLE_AUTO_CLOSE = 8000;
 export const useNotifications = () => {
     const hide = async (id) => {
         mantineNotifications.hide(id);
         await new Promise((resolve) => setTimeout(resolve, 200));
     };
-    const show = (options) => {
-        const { variant = 'info', message, title, id } = options;
+    const _show = (base, footer) => {
+        const { variant = 'info', message, title, id, autoClose } = base;
         const selectedVariant = componentVariants[variant];
+        const resolvedAutoClose = autoClose !== undefined
+            ? autoClose
+            : footer
+                ? ACTIONABLE_AUTO_CLOSE
+                : selectedVariant.autoClose;
+        const renderedMessage = footer ? (_jsxs(Stack, { spacing: 'sm', children: [_jsx(Text, { children: message }), _jsx(Group, { position: 'right', spacing: 'xs', mr: 'lg', children: footer })] })) : (message);
         mantineNotifications.show({
             title: title || selectedVariant.defaultTitle,
-            message,
+            message: renderedMessage,
             icon: selectedVariant.icon,
-            autoClose: selectedVariant.autoClose,
+            autoClose: resolvedAutoClose,
             id,
             styles: {
                 root: {
@@ -21,6 +34,88 @@ export const useNotifications = () => {
             },
         });
     };
+    const show = (options) => {
+        _show(options);
+    };
+    /** Notification with a single offered next-step button. Use for follow-ups
+     *  where dismissing is fine ("Removed. [Undo]", "5 uploaded. [View]"). For
+     *  yes/no questions use `showWithConfirmation` instead. */
+    const showWithAction = (options) => {
+        const { label, onClick, dismissOnClick = true, id: providedId, ...rest } = options;
+        const id = providedId !== null && providedId !== void 0 ? providedId : `actionable-${Math.random()}-${Math.random()}`;
+        _show({ ...rest, id }, _jsx(Button, { size: 'sm', variant: 'tertiary', onClick: () => {
+                if (dismissOnClick)
+                    mantineNotifications.hide(id);
+                onClick();
+            }, children: label }));
+    };
+    /** Non-blocking yes/no question. Both buttons are real answers. For
+     *  high-stakes / destructive prompts that must block the user use
+     *  `useConfirmationModal` instead. Inherits the actionable-toast
+     *  auto-close (8s) by default — pass `autoClose: false` to pin the
+     *  question until the user answers. */
+    const showWithConfirmation = (options) => {
+        const { confirmLabel, cancelLabel, onConfirm, onCancel, dismissOnClick = true, id: providedId, autoClose, ...rest } = options;
+        const id = providedId !== null && providedId !== void 0 ? providedId : `confirmation-${Math.random()}-${Math.random()}`;
+        const handleConfirm = () => {
+            if (dismissOnClick)
+                mantineNotifications.hide(id);
+            onConfirm();
+        };
+        const handleCancel = () => {
+            if (dismissOnClick)
+                mantineNotifications.hide(id);
+            onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+        };
+        _show({ ...rest, id, autoClose }, _jsxs(_Fragment, { children: [_jsx(Button, { size: 'sm', variant: 'cancel', onClick: handleCancel, children: cancelLabel }), _jsx(Button, { size: 'sm', variant: 'primary', onClick: handleConfirm, children: confirmLabel })] }));
+    };
+    /** Long-running task notification with a live progress bar. Pin until
+     *  caller signals completion via `done` / `fail`. Use for uploads,
+     *  exports, bulk operations — anything where the user benefits from
+     *  seeing percentage advance in place. */
+    const showWithProgress = (options) => {
+        const { message: initialMessage, title, id: providedId, initialValue = 0, } = options;
+        const id = providedId !== null && providedId !== void 0 ? providedId : `progress-${Math.random()}-${Math.random()}`;
+        const loadingVariant = componentVariants.loading;
+        const renderLoading = (value, message) => ({
+            id,
+            title: title !== null && title !== void 0 ? title : loadingVariant.defaultTitle,
+            message: (_jsxs(Stack, { spacing: 'xs', children: [_jsx(Text, { children: message }), _jsx(Progress, { value: value, scale: 'sm' })] })),
+            icon: loadingVariant.icon,
+            autoClose: false,
+            withCloseButton: false,
+            styles: {
+                root: { borderLeft: `4px solid ${loadingVariant.color}` },
+            },
+        });
+        const renderTerminal = (variant, message, terminalTitle) => {
+            const v = componentVariants[variant];
+            return {
+                id,
+                title: terminalTitle !== null && terminalTitle !== void 0 ? terminalTitle : v.defaultTitle,
+                message,
+                icon: v.icon,
+                autoClose: v.autoClose,
+                withCloseButton: true,
+                styles: {
+                    root: { borderLeft: `4px solid ${v.color}` },
+                },
+            };
+        };
+        mantineNotifications.show(renderLoading(initialValue, initialMessage));
+        return {
+            id,
+            update: (value, message) => {
+                mantineNotifications.update(renderLoading(value, message !== null && message !== void 0 ? message : initialMessage));
+            },
+            done: (message, terminalTitle) => {
+                mantineNotifications.update(renderTerminal('success', message !== null && message !== void 0 ? message : initialMessage, terminalTitle));
+            },
+            fail: (message, terminalTitle) => {
+                mantineNotifications.update(renderTerminal('error', message !== null && message !== void 0 ? message : 'An error has occurred. Please try again. If the issue persists, please contact us at support@taiv.tv', terminalTitle));
+            },
+        };
+    };
     const showLoading = (options) => {
         const notificationId = `${Math.random()}-${Math.random()}`;
         show({
@@ -37,5 +132,13 @@ export const useNotifications = () => {
             message: 'An error has occurred. Please try again. If the issue persists, please contact us at support@taiv.tv',
         });
     };
-    return { show, showError, showLoading, hide };
+    return {
+        hide,
+        show,
+        showError,
+        showLoading,
+        showWithAction,
+        showWithConfirmation,
+        showWithProgress,
+    };
 };

package/dist/hooks/usePagination.d.ts

@@ -0,0 +1,11 @@
+export { usePagination } from '@mantine/hooks';
+export declare const DOTS: "dots";
+export interface PaginationParams {
+    initialPage?: number;
+    page?: number;
+    total: number;
+    siblings?: number;
+    boundaries?: number;
+    onChange?: (page: number) => void;
+}
+//# sourceMappingURL=usePagination.d.ts.map

package/dist/hooks/usePagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePagination.d.ts","sourceRoot":"","sources":["../../src/hooks/usePagination.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE/C,eAAO,MAAM,IAAI,EAAG,MAAe,CAAC;AAEpC,MAAM,WAAW,gBAAgB;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC"}

package/dist/hooks/usePagination.js

@@ -0,0 +1,2 @@
+export { usePagination } from '@mantine/hooks';
+export const DOTS = 'dots';

package/dist/hooks/useScrollLock.d.ts

@@ -0,0 +1,21 @@
+import { useScrollLock as useMantineScrollLock } from '@mantine/hooks';
+/**
+ * Re-export of Mantine v6's `useScrollLock` hook for locking body scroll while
+ * a custom overlay/modal is open. Prevents the page behind a `position: fixed`
+ * overlay from scrolling ("scroll bleed") — the same mechanism the toolkit's
+ * `Modal` / `Drawer` use internally. Reach for this when building a bespoke
+ * overlay that isn't a Mantine `Modal`/`Drawer`.
+ *
+ * Pass `true` to lock and `false` to release. Compensates for scrollbar width
+ * (no layout shift) and restores the scroll position when released.
+ *
+ * @example
+ * // Mount-gated overlay (parent renders it only while open):
+ * useScrollLock(true);
+ *
+ * @example
+ * // Always-mounted overlay toggled by state:
+ * useScrollLock(opened);
+ */
+export declare const useScrollLock: typeof useMantineScrollLock;
+//# sourceMappingURL=useScrollLock.d.ts.map

package/dist/hooks/useScrollLock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollLock.d.ts","sourceRoot":"","sources":["../../src/hooks/useScrollLock.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,IAAI,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAEvE;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,aAAa,6BAAuB,CAAC"}

package/dist/hooks/useScrollLock.js

@@ -0,0 +1,20 @@
+import { useScrollLock as useMantineScrollLock } from '@mantine/hooks';
+/**
+ * Re-export of Mantine v6's `useScrollLock` hook for locking body scroll while
+ * a custom overlay/modal is open. Prevents the page behind a `position: fixed`
+ * overlay from scrolling ("scroll bleed") — the same mechanism the toolkit's
+ * `Modal` / `Drawer` use internally. Reach for this when building a bespoke
+ * overlay that isn't a Mantine `Modal`/`Drawer`.
+ *
+ * Pass `true` to lock and `false` to release. Compensates for scrollbar width
+ * (no layout shift) and restores the scroll position when released.
+ *
+ * @example
+ * // Mount-gated overlay (parent renders it only while open):
+ * useScrollLock(true);
+ *
+ * @example
+ * // Always-mounted overlay toggled by state:
+ * useScrollLock(opened);
+ */
+export const useScrollLock = useMantineScrollLock;

package/dist/index.d.ts

@@ -1,6 +1,6 @@
-export * from './components/index';
-export * from './constants/index';
-export * from './hooks/index';
-export * from './utils/index';
-export * from './types/index';
+export * from "./components/index";
+export * from "./constants/index";
+export * from "./hooks/index";
+export * from "./types/index";
+export * from "./utils/index";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1,5 +1,5 @@
-export * from './components/index';
-export * from './constants/index';
-export * from './hooks/index';
-export * from './utils/index';
-export * from './types/index';
+export * from "./components/index";
+export * from "./constants/index";
+export * from "./hooks/index";
+export * from "./types/index";
+export * from "./utils/index";

package/dist/styles/iosInputZoomFix.d.ts

@@ -0,0 +1,31 @@
+/**
+ * iOS Safari auto-zooms when a focused form input has font-size < 16px AND
+ * the page's viewport allows zoom (`maximum-scale > 1`). Both conditions
+ * must hold; iOS evaluates them at focus time. We sidestep the zoom by
+ * temporarily setting `maximum-scale=1` on the viewport meta while the
+ * user is interacting with a text input, then restoring whatever was
+ * there before. The page's normal pinch-to-zoom remains available
+ * everywhere else.
+ *
+ * Why the viewport-swap approach over a CSS bump to 16px on mobile inputs:
+ * this preserves the toolkit's input typography exactly. No visual change
+ * at any breakpoint.
+ *
+ * **Why `pointerdown` and not `focusin`:** iOS commits the auto-zoom
+ * decision when focus is committed to the element, which happens BEFORE
+ * the DOM `focusin` event fires in our listener. Setting the viewport
+ * inside `focusin` is too late — iOS has already evaluated and queued
+ * the zoom animation. Listening on `pointerdown` (capture phase) lets
+ * us write the new viewport meta before the browser commits focus.
+ * `pointerdown` covers both touch and mouse uniformly.
+ *
+ * Composability with other viewport tweaks (e.g. `useEditorViewport` on
+ * the slide editor route): we capture the viewport content at lock time,
+ * not at module load. So whatever state the page is in when the user
+ * taps an input — default, slide-editor-locked, future overrides — is
+ * what we restore on blur. Setup-time capture would have stale state and
+ * clobber other modules that lock the viewport for their own reasons.
+ */
+declare const VIEWPORT_FOCUSED = "width=device-width, initial-scale=1, maximum-scale=1";
+declare const setupIosInputZoomFix: () => void;
+//# sourceMappingURL=iosInputZoomFix.d.ts.map

package/dist/styles/iosInputZoomFix.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"iosInputZoomFix.d.ts","sourceRoot":"","sources":["../../src/styles/iosInputZoomFix.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,QAAA,MAAM,gBAAgB,yDACkC,CAAC;AAEzD,QAAA,MAAM,oBAAoB,QAAO,IA4GhC,CAAC"}