@arkyn/components 3.0.1-beta.154 → 3.0.1-beta.156

package/dist/hooks/useScrollLock.js

@@ -1,46 +0,0 @@
-import { useEffect } from "react";
-function getScrollbarWidth() {
-    if (typeof window === "undefined")
-        return 0;
-    return window.innerWidth - document.documentElement.clientWidth;
-}
-/**
- * useScrollLock — locks `document.body` scroll while an overlay is open.
- *
- * Compensates for the scrollbar width by adding equivalent `paddingRight`,
- * preventing layout shift when the scrollbar disappears.
- * Restores the original `overflow` and `paddingRight` when `isLocked` becomes `false`.
- *
- * Used internally by `Modal` and `Drawer` — you usually don't need this directly
- * unless building a custom overlay.
- *
- * @param isLocked - When `true`, body scroll is disabled.
- *
- * @example
- * ```tsx
- * function CustomOverlay({ isOpen }) {
- *   useScrollLock(isOpen);
- *   return isOpen ? <div className="overlay">...</div> : null;
- * }
- * ```
- */
-function useScrollLock(isLocked) {
-    useEffect(() => {
-        if (isLocked) {
-            const originalOverflow = document.body.style.overflow;
-            const originalPaddingRight = document.body.style.paddingRight;
-            const scrollbarWidth = getScrollbarWidth();
-            if (scrollbarWidth > 0) {
-                const computedStyle = window.getComputedStyle(document.body);
-                const existingPaddingRight = parseInt(computedStyle.paddingRight) || 0;
-                document.body.style.paddingRight = `${existingPaddingRight + scrollbarWidth}px`;
-            }
-            document.body.style.overflow = "hidden";
-            return () => {
-                document.body.style.overflow = originalOverflow;
-                document.body.style.paddingRight = originalPaddingRight;
-            };
-        }
-    }, [isLocked]);
-}
-export { useScrollLock };

package/dist/hooks/useSearchAutomation.js

@@ -1,64 +0,0 @@
-import { useEffect } from "react";
-import { useModal } from "./useModal";
-import { useToast } from "./useToast";
-import { badResponses } from "../templates/badResponses";
-import { successResponses } from "../templates/successResponses";
-import { useScopedParams } from "./useScopedParams";
-/**
- * useSearchAutomation — URL-driven version of `useAutomation`. Reads automation params from a
- * URL search string and executes the same side-effects (close modals, toast) on every change.
- *
- * Reads the following params (optionally prefixed by `scope:`):
- * - `closeModal=true` — closes all open modals.
- * - `message` — text for the toast notification.
- * - `type` — `"success"` or `"danger"` toast style.
- * - `name` — response identifier matched against `successResponses`/`badResponses` lists.
- *
- * @param searchString - Raw URL search string (e.g. `location.search`).
- * @param scope - Optional prefix for all params. Default: `""` (no prefix).
- *
- * @example
- * ```tsx
- * // Remix / Next.js Server Action that redirects with search params
- * // redirect("?closeModal=true&message=Saved!&type=success")
- * const [searchParams] = useSearchParams();
- * useSearchAutomation(searchParams.toString());
- * ```
- *
- * @example
- * ```tsx
- * // Scoped params — avoids collisions when multiple features share the URL
- * // redirect("?filters:closeModal=true&filters:message=Applied!&filters:type=success")
- * useSearchAutomation(location.search, "filters");
- * ```
- */
-function useSearchAutomation(searchString, scope = "") {
-    const { closeAll } = useModal();
-    const { showToast } = useToast();
-    const { getParam } = useScopedParams(searchString, scope);
-    const closeModal = getParam("closeModal") === "true";
-    const message = getParam("message");
-    const name = getParam("name");
-    const type = getParam("type");
-    useEffect(() => {
-        if (closeModal)
-            closeAll();
-        if (message) {
-            if (type === "success")
-                showToast({ message, type: "success" });
-            if (type === "danger")
-                showToast({ message, type: "danger" });
-            if (name &&
-                badResponses.includes(name) &&
-                !badResponses.includes(message)) {
-                showToast({ message, type: "danger" });
-            }
-            if (name &&
-                successResponses.includes(name) &&
-                !successResponses.includes(message)) {
-                showToast({ message, type: "success" });
-            }
-        }
-    }, [closeModal, message, name, type]);
-}
-export { useSearchAutomation };

package/dist/hooks/useSlider.js

@@ -1,35 +0,0 @@
-import { useState } from "react";
-/**
- * useSlider — state manager for the `Slider` component. Clamps values to `[0, 100]`.
- *
- * @param defaultValue - Initial percentage value (0–100). Default: 0
- *
- * @returns `[value, setValue]` — current percentage and a setter that clamps at the boundaries.
- *
- * @example
- * ```tsx
- * const [volume, setVolume] = useSlider(50);
- * return <Slider value={volume} onChange={setVolume} />;
- * ```
- */
-function useSlider(defaultValue) {
-    function getDefaultValue() {
-        if (!defaultValue)
-            return 0;
-        if (defaultValue <= 0)
-            return 0;
-        if (defaultValue >= 100)
-            return 100;
-        return defaultValue;
-    }
-    const [sliderValue, setSliderValue] = useState(getDefaultValue());
-    function changeSliderValue(value) {
-        if (value <= 0)
-            return setSliderValue(0);
-        if (value >= 100)
-            return setSliderValue(100);
-        return setSliderValue(value);
-    }
-    return [sliderValue, changeSliderValue];
-}
-export { useSlider };

package/dist/hooks/useToast.js

@@ -1,28 +0,0 @@
-import { toastContext } from "../providers/toastProvider";
-import { useContext } from "react";
-/**
- * useToast — reads `ToastProvider` context to display toast notifications.
- *
- * @returns Context containing `showToast(options)`.
- *
- * @throws If called outside a `ToastProvider`.
- *
- * @example
- * ```tsx
- * const { showToast } = useToast();
- *
- * // After a successful save
- * showToast({ message: "Changes saved!", type: "success" });
- *
- * // After a failed request
- * showToast({ message: "Failed to save changes.", type: "danger" });
- * ```
- */
-function useToast() {
-    const contextData = useContext(toastContext);
-    if (Object.entries(contextData).length === 0) {
-        throw new Error("useToast must be used within a Provider");
-    }
-    return contextData;
-}
-export { useToast };

package/dist/providers/drawerProvider.js

@@ -1,54 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useState } from "react";
-const drawerContext = createContext({});
-/**
- * DrawerProvider — context provider that manages open/close state and data for named drawers.
- *
- * Wrap your app (or a subtree) with this once. Any component in the tree can then call
- * `useDrawer(key)` to open, close, or read data for a specific drawer.
- *
- * @param props.children - Components that will have access to drawer context.
- *
- * @returns DrawerProvider JSX element.
- *
- * @example
- * ```tsx
- * // In your root layout
- * <DrawerProvider>
- *   <App />
- * </DrawerProvider>
- *
- * // Opening a drawer from anywhere in the tree
- * const { openDrawer } = useDrawer();
- * openDrawer('filters', { category: 'electronics' });
- *
- * // Consuming in the drawer component
- * const { drawerIsOpen, drawerData, closeDrawer } = useDrawer<{ category: string }>('filters');
- * ```
- */
-function DrawerProvider(args) {
-    const { children = false } = args;
-    const [openedDrawers, setOpenedDrawers] = useState([]);
-    function drawerIsOpen(key) {
-        return !!openedDrawers.some((drawer) => drawer.key === key);
-    }
-    function drawerData(key) {
-        return openedDrawers.find((drawer) => drawer.key === key)?.data;
-    }
-    function openDrawer(key, data) {
-        const alreadyExist = drawerIsOpen(key);
-        if (alreadyExist) {
-            setOpenedDrawers((old) => {
-                const filtered = old.filter((drawer) => drawer.key !== key);
-                return [...filtered, { key, data }];
-            });
-        }
-        else
-            setOpenedDrawers([...openedDrawers, { key, data }]);
-    }
-    function closeDrawer(key) {
-        setOpenedDrawers(openedDrawers.filter((drawer) => drawer.key !== key));
-    }
-    return (_jsx(drawerContext.Provider, { value: { drawerIsOpen, drawerData, openDrawer, closeDrawer }, children: children }));
-}
-export { drawerContext, DrawerProvider };

package/dist/providers/formProvider.js

@@ -1,34 +0,0 @@
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, cloneElement } from "react";
-const formContext = createContext({});
-/**
- * FormProvider — distributes field-level validation errors to all form input components in its subtree.
- *
- * All inputs (`Input`, `Select`, `Checkbox`, etc.) read `fieldErrors[name]` automatically,
- * so you don't need to pass errors manually to each field. Use the `form` prop to also wrap
- * children in a `<form>` element (e.g. for Remix `<Form />`).
- *
- * @param props.children - Form fields and other components.
- * @param props.fieldErrors - Map of field name → error message (e.g. from Zod / server validation).
- * @param props.form - Optional `<form>` element to wrap children in (cloned with `children`).
- *
- * @returns FormProvider JSX element.
- *
- * @example
- * ```tsx
- * // With Remix action errors
- * const actionData = useActionData<typeof action>();
- *
- * <FormProvider fieldErrors={actionData?.fieldErrors}>
- *   <Input name="email" label="Email" />
- *   <Input name="password" label="Password" type="password" />
- *   <Button type="submit">Login</Button>
- * </FormProvider>
- * ```
- */
-function FormProvider(props) {
-    const { children, fieldErrors, form } = props;
-    return (_jsxs(formContext.Provider, { value: { fieldErrors }, children: [!form && children, form &&
-                cloneElement(form, form.props, children)] }));
-}
-export { formContext, FormProvider };

package/dist/providers/modalProvider.js

@@ -1,58 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useState } from "react";
-const modalContext = createContext({});
-/**
- * ModalProvider — context provider that manages open/close state and data for named modals.
- *
- * Wrap your app (or a subtree) with this once. Any component in the tree can then call
- * `useModal(key)` to open, close, or read data for a specific modal. `closeAll()` is also
- * available (used by `useAutomation` to close all modals after a successful form action).
- *
- * @param props.children - Components that will have access to modal context.
- *
- * @returns ModalProvider JSX element.
- *
- * @example
- * ```tsx
- * // In your root layout
- * <ModalProvider>
- *   <App />
- * </ModalProvider>
- *
- * // Opening a modal from anywhere in the tree
- * const { openModal } = useModal();
- * openModal('confirm-delete', { id: user.id });
- *
- * // Consuming in the modal component
- * const { modalIsOpen, modalData, closeModal } = useModal<{ id: number }>('confirm-delete');
- * ```
- */
-function ModalProvider(args) {
-    const { children = false } = args;
-    const [openedModals, setOpenedModals] = useState([]);
-    function modalIsOpen(key) {
-        return !!openedModals.some((modal) => modal.key === key);
-    }
-    function modalData(key) {
-        return openedModals.find((modal) => modal.key === key)?.data;
-    }
-    function openModal(key, data) {
-        const alreadyExist = modalIsOpen(key);
-        if (alreadyExist) {
-            setOpenedModals((old) => {
-                const filtered = old.filter((modal) => modal.key !== key);
-                return [...filtered, { key, data }];
-            });
-        }
-        else
-            setOpenedModals([...openedModals, { key, data }]);
-    }
-    function closeModal(key) {
-        setOpenedModals(openedModals.filter((modal) => modal.key !== key));
-    }
-    function closeAll() {
-        setOpenedModals([]);
-    }
-    return (_jsx(modalContext.Provider, { value: { modalIsOpen, modalData, openModal, closeModal, closeAll }, children: children }));
-}
-export { modalContext, ModalProvider };

package/dist/providers/placesProvider.js

@@ -1,40 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { useLoadScript } from "@react-google-maps/api";
-const libraries = [
-    "places",
-    "marker",
-    "maps",
-];
-/**
- * PlacesProvider — loads the Google Maps JS API with `places`, `marker`, and `maps` libraries.
- *
- * Uses a render-prop pattern: `children` receives `isLoaded` so you can defer rendering
- * `SearchPlaces` or `MapView` until the script is ready.
- *
- * @param props.apiKey - Google Maps API key. Required.
- * @param props.children - Render function: `(isLoaded: boolean) => ReactNode`.
- * @param props.preventFontsLoading - Prevents Google Fonts from being injected by the Maps SDK. @default true
- *
- * @returns The result of calling `children(isLoaded)`.
- *
- * @example
- * ```tsx
- * <PlacesProvider apiKey={env.GOOGLE_MAPS_KEY}>
- *   {(isLoaded) => (
- *     isLoaded
- *       ? <SearchPlaces apiKey={env.GOOGLE_MAPS_KEY} onSelect={setAddress} />
- *       : <Skeleton />
- *   )}
- * </PlacesProvider>
- * ```
- */
-function PlacesProvider(props) {
-    const { apiKey, children, preventFontsLoading = true } = props;
-    const { isLoaded } = useLoadScript({
-        googleMapsApiKey: apiKey,
-        libraries,
-        preventGoogleFontsLoading: preventFontsLoading,
-    });
-    return _jsx(_Fragment, { children: children(isLoaded) });
-}
-export { PlacesProvider };

package/dist/providers/toastProvider.js

@@ -1,62 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext } from "react";
-import toast, { Toaster } from "react-hot-toast";
-const toastContext = createContext({});
-/**
- * ToastProvider — mounts a `react-hot-toast` `<Toaster>` and exposes `showToast` via context.
- *
- * Wrap your app once. Then call `useToast()` anywhere in the tree to show notifications.
- * Supports two types: `"success"` (green) and `"danger"` (red).
- *
- * @param props.children - App subtree that will have access to `useToast`.
- *
- * @returns ToastProvider JSX element.
- *
- * @example
- * ```tsx
- * // In your root layout
- * <ToastProvider>
- *   <App />
- * </ToastProvider>
- *
- * // Anywhere in the tree
- * const { showToast } = useToast();
- * showToast({ message: "Order placed!", type: "success" });
- * ```
- */
-function ToastProvider({ children }) {
-    function showToast(props) {
-        switch (props.type) {
-            case "success":
-                return toast.success(props.message, {
-                    style: {
-                        background: "#10B981",
-                        color: "#ffffff",
-                        padding: "12px 16px",
-                        fontSize: "14px",
-                        fontWeight: 600,
-                    },
-                    iconTheme: {
-                        primary: "#059669",
-                        secondary: "#ffffff",
-                    },
-                });
-            case "danger":
-                return toast.error(props.message, {
-                    style: {
-                        background: "#E11D48",
-                        color: "#ffffff",
-                        padding: "12px 16px",
-                        fontSize: "14px",
-                        fontWeight: 600,
-                    },
-                    iconTheme: {
-                        primary: "#BE123C",
-                        secondary: "#ffffff",
-                    },
-                });
-        }
-    }
-    return (_jsxs(toastContext.Provider, { value: { showToast }, children: [_jsx(Toaster, { position: "top-right", containerStyle: { zIndex: 999999999999999 } }), children] }));
-}
-export { toastContext, ToastProvider };

package/dist/services/extractTextFromNode.js

@@ -1,5 +0,0 @@
-import { Node } from "slate";
-function extractTextFromNode(nodes) {
-    return nodes.map((n) => Node.string(n)).join("");
-}
-export { extractTextFromNode };

package/dist/services/fieldTemplate.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { FieldError } from "../components/fieldError";
-import { FieldLabel } from "../components/fieldLabel";
-import { FieldWrapper } from "../components/fieldWrapper";
-function FieldTemplate(props) {
-    const { name, label, showAsterisk, className, unShowFieldTemplate, errorMessage, children, orientation, } = props;
-    if (unShowFieldTemplate)
-        return children;
-    return (_jsxs(FieldWrapper, { id: name, className: className, orientation: orientation, children: [label && _jsx(FieldLabel, { showAsterisk: showAsterisk, children: label }), children, errorMessage && _jsx(FieldError, { children: errorMessage })] }));
-}
-export { FieldTemplate };

package/dist/services/iconRenderer.js

@@ -1,13 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-function IconRenderer(props) {
-    const { iconSize, icon: Icon, className, show = true } = props;
-    if (!show)
-        return _jsx(_Fragment, {});
-    if (!Icon)
-        return _jsx(_Fragment, {});
-    if (typeof Icon === "string") {
-        return _jsx("p", { className: className, children: Icon });
-    }
-    return _jsx(Icon, { size: iconSize, strokeWidth: 2.5, className: className });
-}
-export { IconRenderer };

package/dist/services/isBlockActive.js

@@ -1,14 +0,0 @@
-import { Editor, Element as SlateElement } from "slate";
-function isBlockActive(editor, format, blockType = "type") {
-    const { selection } = editor;
-    if (!selection)
-        return false;
-    const [match] = Array.from(Editor.nodes(editor, {
-        at: Editor.unhangRange(editor, selection),
-        match: (n) => !Editor.isEditor(n) &&
-            SlateElement.isElement(n) &&
-            n[blockType] === format,
-    }));
-    return !!match;
-}
-export { isBlockActive };

package/dist/services/isMarkActive.js

@@ -1,6 +0,0 @@
-import { Editor } from "slate";
-function isMarkActive(editor, format) {
-    const marks = Editor.marks(editor);
-    return marks ? marks[format] === true : false;
-}
-export { isMarkActive };

package/dist/services/maskCurrencyValues.js

@@ -1,23 +0,0 @@
-import { formatToCurrency, removeNonNumeric } from "@arkyn/shared";
-function normalizeValue(number) {
-    let safeNumber = number;
-    if (typeof number === "string") {
-        safeNumber = +removeNonNumeric(number);
-        if (safeNumber % 1 !== 0)
-            safeNumber = safeNumber.toFixed(2);
-    }
-    else {
-        safeNumber = Number.isInteger(number)
-            ? Number(number) * 10 ** 2
-            : number.toFixed(2);
-    }
-    return +removeNonNumeric(String(safeNumber)) / 10 ** 2;
-}
-function maskCurrencyValues(inputFieldValue, locale) {
-    if (!inputFieldValue)
-        return [0, formatToCurrency(0, locale)];
-    const value = normalizeValue(inputFieldValue);
-    const maskedValue = formatToCurrency(value, locale);
-    return [value, maskedValue];
-}
-export { maskCurrencyValues, normalizeValue };

package/dist/services/toHtml.js

@@ -1,22 +0,0 @@
-import { serialize } from "../utils/richTextUtilities";
-/**
- * toHtml — converts a `RichTextValue` (Slate.js Descendant array) to an HTML string.
- *
- * Use this to persist or display the editor's content as plain HTML.
- *
- * @param richTextValue - The value from a `RichText` component's `onChange` callback.
- * @returns HTML string representation of the rich text content.
- *
- * @example
- * ```tsx
- * const [content, setContent] = useState<RichTextValue>([]);
- *
- * // On form submit, convert to HTML for storage
- * const html = toHtml(content);
- * // e.g. "<p><strong>Hello world</strong></p>"
- * ```
- */
-function toHtml(richTextValue) {
-    return richTextValue.map((node) => serialize(node)).join("");
-}
-export { toHtml };

package/dist/services/toRichTextValue.js

@@ -1,34 +0,0 @@
-import parse from "html-react-parser";
-import { deserialize } from "../utils/richTextUtilities";
-/**
- * toRichTextValue — converts an HTML string to a `RichTextValue` (Slate.js Descendant array).
- *
- * Use this to populate a `RichText` editor with content previously stored as HTML
- * (e.g. loaded from a database).
- *
- * @param html - HTML string to convert.
- * @returns Slate.js Descendant array ready to pass to `RichText`'s `defaultValue` prop.
- *
- * @example
- * ```tsx
- * // Load stored HTML into the editor
- * const defaultValue = toRichTextValue(product.description);
- * // e.g. [{ type: 'paragraph', children: [{ text: 'Hello', bold: true }] }]
- *
- * <RichText name="description" defaultValue={defaultValue} />
- * ```
- */
-function toRichTextValue(html) {
-    const parsed = parse(html);
-    if (Array.isArray(parsed)) {
-        return parsed.map((node) => {
-            if (typeof node === "string")
-                return { text: node };
-            return deserialize(node);
-        });
-    }
-    if (typeof parsed === "string")
-        return [{ text: parsed }];
-    return [deserialize(parsed)];
-}
-export { toRichTextValue };

package/dist/services/toggleBlock.js

@@ -1,32 +0,0 @@
-import { Editor, Element as SlateElement, Transforms } from "slate";
-import { listTypes, textAlignTypes } from "../templates/richTextTemplates";
-import { isBlockActive } from "./isBlockActive";
-function toggleBlock(editor, format) {
-    const blockType = textAlignTypes.includes(format) ? "align" : "type";
-    const isActive = isBlockActive(editor, format, blockType);
-    const isList = listTypes.includes(format);
-    Transforms.unwrapNodes(editor, {
-        match: (n) => !Editor.isEditor(n) &&
-            SlateElement.isElement(n) &&
-            listTypes.includes(n.type) &&
-            !textAlignTypes.includes(format),
-        split: true,
-    });
-    let newProperties;
-    if (textAlignTypes.includes(format)) {
-        const formatType = format;
-        newProperties = { align: isActive ? undefined : formatType };
-    }
-    else {
-        const formatType = format;
-        newProperties = {
-            type: isActive ? "paragraph" : isList ? "listItem" : formatType,
-        };
-    }
-    Transforms.setNodes(editor, newProperties);
-    if (!isActive && isList) {
-        const block = { type: format, children: [] };
-        Transforms.wrapNodes(editor, block);
-    }
-}
-export { toggleBlock };

package/dist/services/toggleMark.js

@@ -1,10 +0,0 @@
-import { Editor } from "slate";
-import { isMarkActive } from "./isMarkActive";
-function toggleMark(editor, format) {
-    const isActive = isMarkActive(editor, format);
-    if (isActive)
-        Editor.removeMark(editor, format);
-    else
-        Editor.addMark(editor, format, true);
-}
-export { toggleMark };

package/dist/templates/badResponses.js

@@ -1,12 +0,0 @@
-const badResponses = [
-    "BadGateway",
-    "BadRequest",
-    "Conflict",
-    "Forbidden",
-    "NotFound",
-    "NotImplemented",
-    "ServerError",
-    "Unauthorized",
-    "UnprocessableEntity",
-];
-export { badResponses };

package/dist/templates/richTextTemplates.js

@@ -1,12 +0,0 @@
-const hotKeys = {
-    "mod+b": "bold",
-    "mod+i": "italic",
-    "mod+u": "underline",
-    "mod+`": "code",
-};
-const initialValue = [
-    { type: "paragraph", children: [{ text: "" }] },
-];
-const listTypes = ["listItem", "numberedList"];
-const textAlignTypes = ["left", "center", "right", "justify"];
-export { hotKeys, initialValue, listTypes, textAlignTypes };

package/dist/templates/successResponses.js

@@ -1,2 +0,0 @@
-const successResponses = ["Created", "Found", "Success", "Updated"];
-export { successResponses };

package/dist/types/richTextTypes.js

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