@techsio/ui-kit 0.44.1 → 0.46.0

package/dist/atoms/hotkeys.js

@@ -0,0 +1,52 @@
+import { jsx } from "react/jsx-runtime";
+import { useFormatHotkey } from "../hotkeys.js";
+import { tv } from "../utils.js";
+const hotkeysStyles = tv({
+    slots: {
+        root: "inline-flex items-center gap-hotkeys whitespace-nowrap font-hotkeys text-hotkeys-sm",
+        key: "hotkeys-key-border-width inline-flex items-center justify-center rounded-hotkeys-key border-hotkeys-key-border bg-hotkeys-key-bg px-hotkeys-key-x py-hotkeys-key-y text-hotkeys-key-fg",
+        separator: "text-hotkeys-separator-fg"
+    }
+});
+function Hotkeys({ hotkey, formatOptions, children, className, ref, ...props }) {
+    const format = useFormatHotkey();
+    return /*#__PURE__*/ jsx("span", {
+        ...props,
+        className: hotkeysStyles().root({
+            className
+        }),
+        "data-part": "root",
+        "data-scope": "hotkeys",
+        ref: ref,
+        children: children ?? (void 0 !== hotkey ? /*#__PURE__*/ jsx(Hotkeys.Key, {
+            children: format(hotkey, formatOptions)
+        }) : null)
+    });
+}
+Hotkeys.Key = function({ className, ref, ...props }) {
+    return /*#__PURE__*/ jsx("kbd", {
+        ...props,
+        className: hotkeysStyles().key({
+            className
+        }),
+        "data-part": "key",
+        "data-scope": "hotkeys",
+        ref: ref
+    });
+};
+Hotkeys.Separator = function({ children = "+", className, ref, ...props }) {
+    return /*#__PURE__*/ jsx("span", {
+        ...props,
+        "aria-hidden": "true",
+        className: hotkeysStyles().separator({
+            className
+        }),
+        "data-part": "separator",
+        "data-scope": "hotkeys",
+        ref: ref,
+        children: children
+    });
+};
+Hotkeys.Root = Hotkeys;
+Hotkeys.displayName = "Hotkeys";
+export { Hotkeys };

package/dist/hotkeys.js

@@ -0,0 +1,108 @@
+import { createHotkeyStore, formatHotkey } from "@zag-js/hotkeys";
+import { useEffect, useId, useLayoutEffect, useMemo, useRef, useSyncExternalStore } from "react";
+function useHotkey({ store, id, ...command }) {
+    const generatedId = useId();
+    useHotkeys({
+        store,
+        commands: [
+            {
+                ...command,
+                id: id ?? generatedId
+            }
+        ]
+    });
+}
+function sameValues(left, right) {
+    if (Object.is(left, right)) return true;
+    return Array.isArray(left) && Array.isArray(right) && left.length === right.length && left.every((value, index)=>Object.is(value, right[index]));
+}
+function sameOptions(left, right) {
+    return left?.capture === right?.capture && left?.eventType === right?.eventType && left?.preventDefault === right?.preventDefault && left?.stopPropagation === right?.stopPropagation && left?.requireReset === right?.requireReset && left?.enableOnContentEditable === right?.enableOnContentEditable && sameValues(left?.enableOnFormTags, right?.enableOnFormTags) && left?.target === right?.target;
+}
+function sameRegistration(left, right) {
+    return left.hotkey === right.hotkey && left.label === right.label && left.description === right.description && left.category === right.category && sameValues(left.scopes, right.scopes) && sameValues(left.keywords, right.keywords) && sameOptions(left.options, right.options);
+}
+function readEnabled(command) {
+    const value = command?.enabled;
+    return "function" == typeof value ? value() : value ?? false;
+}
+function syncCommand(store, command, previous, getCurrent) {
+    const enabled = "function" == typeof command.enabled ? ()=>readEnabled(getCurrent()) : command.enabled ?? true;
+    const enabledUnchanged = previous?.enabled === command.enabled || "function" == typeof previous?.enabled && "function" == typeof command.enabled;
+    if (previous && sameRegistration(previous, command)) {
+        if (!enabledUnchanged) store.setEnabled(command.id, enabled);
+        return;
+    }
+    if (previous) store.unregister(command.id);
+    store.register({
+        ...command,
+        action: (event)=>getCurrent()?.action(event),
+        enabled
+    });
+}
+function useHotkeys({ store, commands }) {
+    const current = useRef(commands);
+    const registered = useRef(new Map());
+    useLayoutEffect(()=>{
+        current.current = commands;
+    });
+    useEffect(()=>{
+        const owned = registered.current;
+        return ()=>{
+            for (const id of owned.keys())store.unregister(id);
+            owned.clear();
+        };
+    }, [
+        store
+    ]);
+    useEffect(()=>{
+        const owned = registered.current;
+        for (const id of owned.keys())if (!commands.some((command)=>command.id === id)) {
+            owned.delete(id);
+            store.unregister(id);
+        }
+        for (const command of commands){
+            const previous = owned.get(command.id);
+            owned.set(command.id, command);
+            syncCommand(store, command, previous, ()=>current.current.find((item)=>item.id === command.id));
+        }
+    });
+}
+const emptyRegistrations = [];
+const getServerRegistrations = ()=>emptyRegistrations;
+function useHotkeyRegistrations({ store }) {
+    const subscription = useMemo(()=>{
+        let snapshot = [];
+        const getSnapshot = ()=>{
+            const commands = [
+                ...store.getState().commands.values()
+            ];
+            if (commands.length !== snapshot.length || commands.some((command, index)=>{
+                const previous = snapshot[index];
+                return !previous || command._registrationOrder !== previous._registrationOrder || command.enabled !== previous.enabled || command.options !== previous.options || command._parsed !== previous._parsed;
+            })) snapshot = commands.map((command)=>({
+                    ...command
+                }));
+            return snapshot;
+        };
+        return {
+            getSnapshot,
+            subscribe: (notify)=>store.subscribe(getSnapshot, notify)
+        };
+    }, [
+        store
+    ]);
+    return useSyncExternalStore(subscription.subscribe, subscription.getSnapshot, getServerRegistrations);
+}
+const subscribeToHydration = ()=>()=>{};
+const getClientHydration = ()=>true;
+const getServerHydration = ()=>false;
+function useFormatHotkey() {
+    const hydrated = useSyncExternalStore(subscribeToHydration, getClientHydration, getServerHydration);
+    const defaultPlatform = hydrated ? "auto" : "windows";
+    return (hotkey, options)=>formatHotkey(hotkey, {
+            ...options,
+            platform: options?.platform && "auto" !== options.platform ? options.platform : defaultPlatform
+        });
+}
+export { createHotkeyStore, useFormatHotkey, useHotkey, useHotkeyRegistrations, useHotkeys };

package/dist/internal/molecules/command.context.js

@@ -0,0 +1,14 @@
+import { createContext, useContext } from "react";
+const CommandContext = createContext(null);
+const CommandItemContext = createContext(null);
+function useCommandContext() {
+    const api = useContext(CommandContext);
+    if (!api) throw new Error("Command components must be used within Command.Root");
+    return api;
+}
+function useCommandItemContext() {
+    const item = useContext(CommandItemContext);
+    if (!item) throw new Error("Command.ItemText must be used within Command.Item");
+    return item;
+}
+export { CommandContext, CommandItemContext, useCommandContext, useCommandItemContext };

package/dist/molecules/command.js

@@ -0,0 +1,177 @@
+import { jsx } from "react/jsx-runtime";
+import { createFilter } from "@zag-js/i18n-utils";
+import { mergeProps, normalizeProps, useMachine } from "@zag-js/react";
+import { useEffect, useId, useMemo, useState } from "react";
+import { Input } from "../atoms/input.js";
+import { Label } from "../atoms/label.js";
+import { CommandContext, CommandItemContext, useCommandContext, useCommandItemContext } from "../internal/molecules/command.context.js";
+import { tv } from "../utils.js";
+import * as __rspack_external__zag_js_combobox_6371d768 from "@zag-js/combobox";
+const commandVariants = tv({
+    slots: {
+        root: "command-border-width flex w-full flex-col gap-command-gap rounded-command border-command-border bg-command-bg p-command text-command-fg text-command-md",
+        control: "relative flex items-center",
+        list: "max-h-command-list-max overflow-y-auto overscroll-contain p-command-list",
+        item: "flex w-full cursor-pointer select-none items-center gap-command-item-gap rounded-command-item px-command-item-x py-command-item-y data-disabled:cursor-not-allowed data-highlighted:bg-command-item-bg-highlighted data-disabled:text-command-item-fg-disabled",
+        itemText: "min-w-0 flex-1",
+        itemGroup: "",
+        itemGroupLabel: "px-command-item-x py-command-item-y font-command-group-label text-command-group-label-fg",
+        empty: "text-center text-command-empty-fg data-empty:p-command-empty"
+    }
+});
+function Command({ items, children, id, className, ref, disabled, loopFocus = true, onSelect, locale, inputValue, defaultInputValue = "", onInputValueChange, onEscape }) {
+    const generatedId = useId();
+    const [uncontrolledQuery, setUncontrolledQuery] = useState(defaultInputValue);
+    const query = inputValue ?? uncontrolledQuery;
+    const collection = useMemo(()=>{
+        const filter = createFilter({
+            sensitivity: "base",
+            locale
+        });
+        return __rspack_external__zag_js_combobox_6371d768.collection({
+            items: items.filter((item)=>filter.contains(item.label, query) || item.keywords?.some((keyword)=>filter.contains(keyword, query))),
+            itemToValue: (item)=>item.value,
+            itemToString: (item)=>item.label,
+            isItemDisabled: (item)=>!!item.disabled
+        });
+    }, [
+        items,
+        query,
+        locale
+    ]);
+    const service = useMachine(__rspack_external__zag_js_combobox_6371d768.machine, {
+        id: id ?? generatedId,
+        collection,
+        disabled,
+        loopFocus,
+        onSelect,
+        inputValue: query,
+        onInputValueChange (details) {
+            if (void 0 === inputValue) setUncontrolledQuery(details.inputValue);
+            onInputValueChange?.(details);
+        },
+        onOpenChange (details) {
+            if (!details.open && "escape-key" === details.reason) onEscape?.();
+        },
+        open: true,
+        disableLayer: true,
+        inputBehavior: "autohighlight",
+        selectionBehavior: "preserve",
+        closeOnSelect: false
+    });
+    const api = __rspack_external__zag_js_combobox_6371d768.connect(service, normalizeProps);
+    useEffect(()=>{
+        if (api.collection.find(api.highlightedValue)?.disabled) api.clearHighlightValue();
+    }, [
+        api
+    ]);
+    return /*#__PURE__*/ jsx(CommandContext.Provider, {
+        value: api,
+        children: /*#__PURE__*/ jsx("div", {
+            ...api.getRootProps(),
+            className: commandVariants().root({
+                className
+            }),
+            ref: ref,
+            children: children
+        })
+    });
+}
+Command.Root = Command;
+Command.Label = function({ children, ...props }) {
+    const api = useCommandContext();
+    return /*#__PURE__*/ jsx(Label, {
+        ...mergeProps(props, api.getLabelProps()),
+        children: children
+    });
+};
+Command.Control = function({ className, ...props }) {
+    const api = useCommandContext();
+    return /*#__PURE__*/ jsx("div", {
+        ...mergeProps(props, api.getControlProps()),
+        className: commandVariants().control({
+            className
+        })
+    });
+};
+Command.Input = function({ size, ...props }) {
+    const api = useCommandContext();
+    return /*#__PURE__*/ jsx(Input, {
+        ...mergeProps(props, api.getInputProps()),
+        size: size
+    });
+};
+Command.List = function({ className, ...props }) {
+    const api = useCommandContext();
+    return /*#__PURE__*/ jsx("div", {
+        ...mergeProps(props, api.getContentProps()),
+        className: commandVariants().list({
+            className
+        })
+    });
+};
+Command.ItemGroup = function({ id, className, ...props }) {
+    const api = useCommandContext();
+    return /*#__PURE__*/ jsx("div", {
+        ...mergeProps(props, api.getItemGroupProps({
+            id
+        })),
+        className: commandVariants().itemGroup({
+            className
+        })
+    });
+};
+Command.ItemGroupLabel = function({ htmlFor, className, ...props }) {
+    const api = useCommandContext();
+    return /*#__PURE__*/ jsx("div", {
+        ...mergeProps(props, api.getItemGroupLabelProps({
+            htmlFor
+        })),
+        className: commandVariants().itemGroupLabel({
+            className
+        })
+    });
+};
+Command.Item = function({ item, className, ...props }) {
+    const api = useCommandContext();
+    return /*#__PURE__*/ jsx(CommandItemContext.Provider, {
+        value: item,
+        children: /*#__PURE__*/ jsx("div", {
+            ...mergeProps(props, api.getItemProps({
+                item
+            })),
+            className: commandVariants().item({
+                className
+            })
+        })
+    });
+};
+Command.ItemText = function({ className, children, ...props }) {
+    const api = useCommandContext();
+    const item = useCommandItemContext();
+    return /*#__PURE__*/ jsx("span", {
+        ...mergeProps(props, api.getItemTextProps({
+            item
+        })),
+        className: commandVariants().itemText({
+            className
+        }),
+        children: children ?? item.label
+    });
+};
+Command.Context = function({ children }) {
+    return children(useCommandContext());
+};
+Command.Empty = function({ children, className, ...props }) {
+    const api = useCommandContext();
+    const empty = 0 === api.collection.size;
+    return /*#__PURE__*/ jsx("output", {
+        ...props,
+        className: commandVariants().empty({
+            className
+        }),
+        "data-empty": empty || void 0,
+        children: empty ? children : null
+    });
+};
+export { Command };

package/dist/molecules/tour.js

@@ -0,0 +1,318 @@
+import { jsx } from "react/jsx-runtime";
+import { Portal, mergeProps, normalizeProps, useMachine } from "@zag-js/react";
+import { connect, machine } from "@zag-js/tour";
+import { createContext, useContext, useEffect, useId, useLayoutEffect, useRef } from "react";
+import { ActionIcon } from "../atoms/action-icon.js";
+import { Button } from "../atoms/button.js";
+import { tv } from "../utils.js";
+const tourStyles = tv({
+    slots: {
+        backdrop: "tour-layer bg-tour-backdrop-bg",
+        spotlight: "tour-layer tour-spotlight-border",
+        positioner: "tour-layer tour-positioner",
+        content: "tour-layer tour-content tour-border relative flex flex-col gap-tour-content rounded-tour bg-tour-bg p-tour text-tour-fg shadow-tour outline-none",
+        arrow: "tour-arrow",
+        arrowTip: "bg-tour-arrow-bg",
+        title: "pe-tour-title font-tour-title text-tour-title-size",
+        description: "text-tour-body-size text-tour-description-fg",
+        progressText: "text-tour-progress-fg text-tour-progress-size",
+        actions: "flex flex-wrap items-center justify-end gap-tour-actions pt-tour-actions",
+        closeTrigger: "absolute end-tour-close top-tour-close"
+    }
+});
+const TourContext = /*#__PURE__*/ createContext(null);
+const useIsomorphicLayoutEffect = "u" < typeof window ? useEffect : useLayoutEffect;
+function useTourContext() {
+    const api = useContext(TourContext);
+    if (!api) throw new Error("Tour components must be used within Tour.Root");
+    return api;
+}
+function Tour({ children, getRootNode, id, onStatusChange, steps, ...props }) {
+    const generatedId = useId();
+    const previousFocus = useRef(null);
+    const effectCleanup = useRef(void 0);
+    const service = useMachine(machine, {
+        ...props,
+        preventInteraction: false,
+        getRootNode,
+        id: id ?? generatedId,
+        steps: steps.map(prepareStep),
+        onStatusChange (details) {
+            if ("not-found" === details.status) effectCleanup.current?.();
+            if ("started" === details.status) {
+                const rootNode = getRootNode?.() ?? document;
+                const activeElement = "activeElement" in rootNode ? rootNode.activeElement : rootNode.ownerDocument?.activeElement;
+                previousFocus.current = activeElement instanceof HTMLElement ? activeElement : null;
+            } else if ("idle" !== details.status) {
+                const target = previousFocus.current;
+                previousFocus.current = null;
+                requestAnimationFrame(()=>{
+                    if (target?.isConnected) target.focus({
+                        preventScroll: true
+                    });
+                });
+            }
+            onStatusChange?.(details);
+        }
+    });
+    function prepareStep(step) {
+        return {
+            ...step,
+            effect: step.effect && prepareEffect(step.effect)
+        };
+    }
+    function prepareEffect(effect) {
+        return (args)=>{
+            const cleanup = effect(args);
+            let cleaned = false;
+            const cleanupOnce = ()=>{
+                if (cleaned) return;
+                cleaned = true;
+                if (effectCleanup.current === cleanupOnce) effectCleanup.current = void 0;
+                cleanup?.();
+            };
+            effectCleanup.current = cleanupOnce;
+            return cleanupOnce;
+        };
+    }
+    const zag = connect(service, normalizeProps);
+    const handleKeyDown = (event)=>{
+        if (event.defaultPrevented || false === props.keyboardNavigation) return;
+        if (event.target instanceof Element && event.target.closest("input, textarea, select, [contenteditable='true']")) return;
+        const [nextKey, prevKey] = "rtl" === props.dir ? [
+            "ArrowLeft",
+            "ArrowRight"
+        ] : [
+            "ArrowRight",
+            "ArrowLeft"
+        ];
+        if (event.key === nextKey && zag.hasNextStep) {
+            event.preventDefault();
+            zag.next();
+            return;
+        }
+        if (event.key === prevKey && zag.hasPrevStep) {
+            event.preventDefault();
+            zag.prev();
+        }
+    };
+    const api = {
+        ...zag,
+        addStep: (step)=>zag.addStep(prepareStep(step)),
+        updateStep: (stepId, step)=>zag.updateStep(stepId, "effect" in step ? {
+                ...step,
+                effect: step.effect && prepareEffect(step.effect)
+            } : step),
+        setSteps: (nextSteps)=>zag.setSteps(nextSteps.map(prepareStep)),
+        getContentProps () {
+            return {
+                ...zag.getContentProps(),
+                onKeyDown: handleKeyDown
+            };
+        }
+    };
+    const activeTarget = api.step?.target?.();
+    useIsomorphicLayoutEffect(()=>{
+        if (!(api.open && props.preventInteraction && activeTarget) || activeTarget.inert) return;
+        activeTarget.inert = true;
+        let changedExternally = false;
+        const observer = new MutationObserver(()=>{
+            changedExternally = true;
+        });
+        observer.observe(activeTarget, {
+            attributes: true,
+            attributeFilter: [
+                "inert"
+            ]
+        });
+        return ()=>{
+            const hasExternalWrite = changedExternally || observer.takeRecords().length > 0;
+            observer.disconnect();
+            if (!hasExternalWrite) activeTarget.inert = false;
+        };
+    }, [
+        api.open,
+        props.preventInteraction,
+        activeTarget
+    ]);
+    useEffect(()=>()=>{
+            const target = previousFocus.current;
+            previousFocus.current = null;
+            queueMicrotask(()=>{
+                if (target?.isConnected) target.focus({
+                    preventScroll: true
+                });
+            });
+        }, []);
+    return /*#__PURE__*/ jsx(TourContext.Provider, {
+        value: {
+            ...api,
+            isRunning: !service.state.matches("tourInactive")
+        },
+        children: children
+    });
+}
+Tour.Context = function({ children }) {
+    return children(useTourContext());
+};
+Tour.Trigger = function({ disabled, onClick, stepId, type = "button", ...props }) {
+    const api = useTourContext();
+    return /*#__PURE__*/ jsx(Button, {
+        ...props,
+        disabled: disabled || api.isRunning || 0 === api.totalSteps,
+        onClick: (event)=>{
+            onClick?.(event);
+            if (!event.defaultPrevented) api.start(stepId);
+        },
+        type: type
+    });
+};
+Tour.Portal = Portal;
+Tour.Backdrop = function({ className, ref, ...props }) {
+    const api = useTourContext();
+    if (!(api.open && api.step?.backdrop)) return null;
+    return /*#__PURE__*/ jsx("div", {
+        ...mergeProps(props, api.getBackdropProps()),
+        className: tourStyles().backdrop({
+            className
+        }),
+        ref: ref
+    });
+};
+Tour.Spotlight = function({ className, ref, ...props }) {
+    const api = useTourContext();
+    if (!api.open || api.step?.type !== "tooltip") return null;
+    return /*#__PURE__*/ jsx("div", {
+        ...mergeProps(props, api.getSpotlightProps()),
+        className: tourStyles().spotlight({
+            className
+        }),
+        ref: ref
+    });
+};
+Tour.Positioner = function({ className, ref, ...props }) {
+    const api = useTourContext();
+    if (!api.open) return null;
+    return /*#__PURE__*/ jsx("div", {
+        ...mergeProps(props, api.getPositionerProps()),
+        className: tourStyles().positioner({
+            className
+        }),
+        ref: ref
+    });
+};
+Tour.Content = function({ className, ref, ...props }) {
+    const api = useTourContext();
+    return /*#__PURE__*/ jsx("div", {
+        ...mergeProps(props, api.getContentProps()),
+        className: tourStyles().content({
+            className
+        }),
+        ref: ref
+    });
+};
+Tour.Arrow = function({ children, className, ref, ...props }) {
+    const api = useTourContext();
+    if (!api.step?.arrow || "tooltip" !== api.step.type) return null;
+    return /*#__PURE__*/ jsx("div", {
+        ...mergeProps(props, api.getArrowProps()),
+        className: tourStyles().arrow({
+            className
+        }),
+        ref: ref,
+        children: children ?? /*#__PURE__*/ jsx(Tour.ArrowTip, {})
+    });
+};
+Tour.ArrowTip = function({ className, ref, ...props }) {
+    const api = useTourContext();
+    return /*#__PURE__*/ jsx("div", {
+        ...mergeProps(props, api.getArrowTipProps()),
+        className: tourStyles().arrowTip({
+            className
+        }),
+        ref: ref
+    });
+};
+Tour.Title = function({ children, className, ref, ...props }) {
+    const api = useTourContext();
+    return /*#__PURE__*/ jsx("div", {
+        ...mergeProps(props, api.getTitleProps()),
+        className: tourStyles().title({
+            className
+        }),
+        ref: ref,
+        children: children ?? api.step?.title
+    });
+};
+Tour.Description = function({ children, className, ref, ...props }) {
+    const api = useTourContext();
+    return /*#__PURE__*/ jsx("div", {
+        ...mergeProps(props, api.getDescriptionProps()),
+        className: tourStyles().description({
+            className
+        }),
+        ref: ref,
+        children: children ?? api.step?.description
+    });
+};
+Tour.ProgressText = function({ children, className, ref, ...props }) {
+    const api = useTourContext();
+    return /*#__PURE__*/ jsx("span", {
+        ...mergeProps(props, api.getProgressTextProps()),
+        className: tourStyles().progressText({
+            className
+        }),
+        ref: ref,
+        children: children ?? api.getProgressText()
+    });
+};
+Tour.Actions = function({ className, ref, ...props }) {
+    useTourContext();
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        className: tourStyles().actions({
+            className
+        }),
+        ref: ref
+    });
+};
+Tour.ActionTrigger = function({ action, children, disabled, onClick, type = "button", ...props }) {
+    const api = useTourContext();
+    const { onClick: onMachineClick, disabled: machineDisabled, "aria-label": machineLabel, ...machineProps } = api.getActionTriggerProps({
+        action: {
+            action,
+            label: ""
+        }
+    });
+    return /*#__PURE__*/ jsx(Button, {
+        ...mergeProps(props, machineProps),
+        "aria-label": props["aria-label"] ?? (null != children ? void 0 : machineLabel),
+        disabled: disabled || machineDisabled,
+        onClick: (event)=>{
+            onClick?.(event);
+            if (!event.defaultPrevented) onMachineClick?.(event);
+        },
+        type: type,
+        children: children
+    });
+};
+Tour.CloseTrigger = function({ className, icon = "token-icon-close", onClick, ref, ...props }) {
+    const api = useTourContext();
+    const { onClick: onMachineClick, "aria-label": machineLabel, ...machineProps } = api.getCloseTriggerProps();
+    return /*#__PURE__*/ jsx(ActionIcon, {
+        ...mergeProps(props, machineProps),
+        "aria-label": props["aria-label"] ?? machineLabel,
+        className: tourStyles().closeTrigger({
+            className
+        }),
+        icon: icon,
+        onClick: (event)=>{
+            onClick?.(event);
+            if (!event.defaultPrevented) onMachineClick?.(event);
+        },
+        ref: ref
+    });
+};
+Tour.Root = Tour;
+Tour.displayName = "Tour";
+export { Tour };