@techsio/ui-kit 0.45.0 → 0.47.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/organisms/data-table.js

@@ -21,20 +21,20 @@ import { Table } from "./table.js";
 const dataTableVariants = tv({
     slots: {
         wrapper: [
-            "flex w-full flex-col overflow-hidden rounded-table",
-            "border-(length:--border-table-width) border-table-border"
+            "flex w-full flex-col overflow-hidden rounded-data-table",
+            "border-(length:--border-width-data-table) border-data-table-border"
         ],
         toolbar: [
-            "flex items-center justify-between gap-200",
-            "bg-table-header-bg text-table-header-fg",
-            "px-300 py-200",
-            "border-b-(length:--border-table-width) border-table-border"
+            "flex items-center justify-between gap-data-table-toolbar",
+            "bg-data-table-toolbar-bg text-data-table-toolbar-fg",
+            "p-data-table-toolbar",
+            "border-b-(length:--border-width-data-table) border-data-table-border"
         ],
         toolbarSearch: [
             "min-w-0 flex-1"
         ],
         toolbarActions: [
-            "flex shrink-0 items-center gap-200"
+            "flex shrink-0 items-center gap-data-table-toolbar"
         ],
         scroll: [
             "relative w-full overflow-auto"
@@ -48,68 +48,68 @@ const dataTableVariants = tv({
             "data-[disabled=true]:cursor-default"
         ],
         sortIcon: [
-            "text-fg-secondary",
-            "data-[active=true]:text-fg-accent-primary"
+            "text-data-table-sort-icon-fg",
+            "data-[active=true]:text-data-table-sort-icon-fg-active"
         ],
         dragHandle: [
-            "inline-flex cursor-grab items-center rounded-table text-fg-secondary",
+            "inline-flex cursor-grab items-center rounded-data-table text-data-table-drag-handle-fg",
             "opacity-0 transition-opacity duration-200 motion-reduce:transition-none",
-            "hover:bg-table-row-bg-hover hover:opacity-100 focus-visible:opacity-100",
+            "hover:bg-data-table-row-bg-hover hover:opacity-100 focus-visible:opacity-100",
             "group-hover/header:opacity-100 group-hover/row:opacity-100",
             "group-focus-within/header:opacity-100 group-focus-within/row:opacity-100",
             "group-data-dragging/header:opacity-100 group-data-dragging/row:opacity-100",
             "active:cursor-grabbing"
         ],
         resizeHandle: [
-            "absolute end-0 top-0 h-full w-100 cursor-col-resize touch-none select-none",
+            "w-(length:--size-data-table-resize-handle) absolute end-0 top-0 h-full cursor-col-resize touch-none select-none",
             "opacity-0 transition-opacity duration-200 motion-reduce:transition-none",
-            "bg-table-border hover:opacity-100 focus-visible:opacity-100",
+            "bg-data-table-resize-handle-bg hover:opacity-100 focus-visible:opacity-100",
             "group-hover/header:opacity-100"
         ],
         filterRow: [
-            "bg-table-header-bg"
+            "bg-data-table-filter-row-bg"
         ],
         filterCell: [
-            "px-200 py-100",
+            "p-data-table-filter-cell",
             "min-w-fit",
-            "border-b-(length:--border-table-width) border-table-border"
+            "border-b-(length:--border-width-data-table) border-data-table-border"
         ],
         filterControl: [
-            "flex flex-wrap items-center gap-100"
+            "flex flex-wrap items-center gap-data-table-filter-control"
         ],
         editorControl: [
-            "flex flex-col gap-50"
+            "flex flex-col gap-data-table-editor"
         ],
         editorError: [
-            "text-danger-fg text-table-sm"
+            "text-data-table-editor-error-fg text-data-table-sm"
         ],
         actionsCell: [
             "flex items-center justify-end gap-100"
         ],
         empty: [
             "flex flex-col items-center justify-center gap-200",
-            "p-700 text-center text-fg-secondary"
+            "p-data-table-empty text-center text-data-table-empty-fg"
         ],
         paginationBar: [
-            "flex flex-wrap items-center justify-between gap-300",
-            "bg-table-header-bg text-table-header-fg",
-            "px-300 py-200",
-            "border-t-(length:--border-table-width) border-table-border"
+            "flex flex-wrap items-center justify-between gap-data-table-pagination",
+            "bg-data-table-pagination-bg text-data-table-pagination-fg",
+            "p-data-table-pagination",
+            "border-t-(length:--border-width-data-table) border-data-table-border"
         ],
         detailBox: [
-            "w-full p-300"
+            "w-full p-data-table-detail"
         ],
         paginationInfo: [
-            "whitespace-nowrap text-table-sm"
+            "whitespace-nowrap text-data-table-sm"
         ],
         paginationControls: [
-            "flex items-center gap-300"
+            "flex items-center gap-data-table-pagination"
         ]
     },
     variants: {
         outlined: {
             true: {
-                wrapper: "shadow-table-outline"
+                wrapper: "shadow-data-table-outline"
             }
         }
     }
@@ -245,9 +245,9 @@ const BUILTIN_COLUMN_IDS = new Set([
 function pinClass(column, kind) {
     if (!column.getIsPinned()) return;
     return [
-        "header" === kind ? "bg-table-header-bg" : "data-table-frozen-cell",
-        isLastStartPinned(column) ? "border-e-(length:--border-table-width) border-table-border" : "",
-        isFirstEndPinned(column) ? "border-s-(length:--border-table-width) border-table-border" : ""
+        "header" === kind ? "bg-data-table-header-bg" : "data-table-frozen-cell",
+        isLastStartPinned(column) ? "border-e-(length:--border-width-data-table) border-data-table-border" : "",
+        isFirstEndPinned(column) ? "border-s-(length:--border-width-data-table) border-data-table-border" : ""
     ].join(" ");
 }
 function HeaderDragHandle({ styles, setActivatorNodeRef, listeners, attributes, label }) {
@@ -392,21 +392,26 @@ function rowDragClass(dnd, opts) {
     return [
         "group/row",
         "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width) focus-visible:outline-primary",
-        "data-[selected=true]:[--dt-row-tint:var(--color-table-row-bg-selected)]",
-        "group-hover/row:[--dt-row-tint:var(--color-table-row-bg-hover)]",
-        "hover:[--dt-row-tint:var(--color-table-row-bg-hover)]",
-        striped ? `${(rowIndex ?? 0) % 2 === 0 ? "bg-table-row-striped-primary [--dt-row-tint:var(--color-table-row-striped-primary)]" : "bg-table-row-striped-secondary [--dt-row-tint:var(--color-table-row-striped-secondary)]"} border-b-0` : "",
+        "data-[selected=true]:[--dt-row-tint:var(--color-data-table-row-bg-selected)]",
+        "group-hover/row:[--dt-row-tint:var(--color-data-table-row-bg-hover)]",
+        "hover:[--dt-row-tint:var(--color-data-table-row-bg-hover)]",
+        striped ? `${(rowIndex ?? 0) % 2 === 0 ? "bg-data-table-row-bg-striped-primary [--dt-row-tint:var(--color-data-table-row-bg-striped-primary)]" : "bg-data-table-row-bg-striped-secondary [--dt-row-tint:var(--color-data-table-row-bg-striped-secondary)]"} border-b-0` : "",
         tintNestedRows ? "data-[depth]:data-table-row-nested-tint" : "",
-        dnd?.isDragging ? "shadow-table-outline" : "",
+        dnd?.isDragging ? "shadow-data-table-outline" : "",
         dnd?.dropSide === "top" ? "border-primary border-t-2" : "",
         dnd?.dropSide === "bottom" ? "border-primary border-b-2" : "",
         className ?? ""
     ].filter(Boolean).join(" ");
 }
-const OPAQUE_HEADER_BG = {
-    backgroundColor: "var(--color-table-bg)",
-    backgroundImage: "linear-gradient(var(--color-table-header-bg), var(--color-table-header-bg))"
-};
+function opaqueSurface(tint) {
+    return {
+        backgroundColor: "var(--color-data-table-bg)",
+        backgroundImage: `linear-gradient(var(${tint}), var(${tint}))`
+    };
+}
+const OPAQUE_HEADER_BG = opaqueSurface("--color-data-table-header-bg");
+const OPAQUE_FILTER_ROW_BG = opaqueSurface("--color-data-table-filter-row-bg");
+const OPAQUE_PAGINATION_BG = opaqueSurface("--color-data-table-pagination-bg");
 function sortState(column, enableSorting) {
     if (!(enableSorting && column.getCanSort())) return;
     const sorted = column.getIsSorted();
@@ -1094,7 +1099,7 @@ function DataTable(props) {
                             className: `${styles.filterCell()} ${pinClass(column, "header") ?? ""}`,
                             "data-pinned": column.getIsPinned() || void 0,
                             style: {
-                                ...OPAQUE_HEADER_BG,
+                                ...OPAQUE_FILTER_ROW_BG,
                                 ...getPinningStyles(column, "header"),
                                 ...stickyHeader ? {
                                     position: "sticky",
@@ -1111,9 +1116,9 @@ function DataTable(props) {
                             })
                         }, column.id)),
                     hasActionsColumn && /*#__PURE__*/ jsx("td", {
-                        className: stickyActions ? `${styles.filterCell()} sticky end-0 bg-table-header-bg` : styles.filterCell(),
+                        className: stickyActions ? `${styles.filterCell()} sticky end-0 bg-data-table-filter-row-bg` : styles.filterCell(),
                         style: {
-                            ...OPAQUE_HEADER_BG,
+                            ...OPAQUE_FILTER_ROW_BG,
                             ...stickyHeader ? {
                                 position: "sticky",
                                 top: headerHeight
@@ -1368,7 +1373,7 @@ function DataTable(props) {
                         children: translations.emptyTitle
                     }),
                     /*#__PURE__*/ jsx("p", {
-                        className: "text-table-sm",
+                        className: "text-data-table-sm",
                         children: translations.emptyDescription
                     })
                 ]
@@ -1424,7 +1429,7 @@ function DataTable(props) {
                             children: header.isPlaceholder ? null : flexRender(header.column.columnDef.footer, header.getContext())
                         }, header.id)),
                     hasActionsColumn && /*#__PURE__*/ jsx(Table.Cell, {
-                        className: stickyActions ? "sticky end-0 bg-table-footer-bg" : void 0,
+                        className: stickyActions ? "sticky end-0 bg-data-table-footer-bg" : void 0,
                         numeric: true,
                         style: stickyActions ? {
                             zIndex: DATA_TABLE_Z.stickyActionsCell
@@ -1686,7 +1691,7 @@ DataTable.Pagination = function() {
         }));
     return /*#__PURE__*/ jsxs("div", {
         className: styles.paginationBar(),
-        style: OPAQUE_HEADER_BG,
+        style: OPAQUE_PAGINATION_BG,
         children: [
             /*#__PURE__*/ jsx("span", {
                 className: styles.paginationInfo(),

package/dist/src/atoms/hotkeys.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Hotkeys — @techsio/ui-kit atom.
+ *
+ * @component Hotkeys
+ * @componentVersion v1.0.1
+ * @skill hotkeys-usage
+ * @changelog libs/ui/stories/changelog/changelog.stories.tsx
+ */
+import type { ComponentPropsWithoutRef, Ref } from "react";
+import { type HotkeyFormatOptions } from "../hotkeys.js";
+export type HotkeysProps = ComponentPropsWithoutRef<"span"> & {
+    hotkey?: string;
+    formatOptions?: HotkeyFormatOptions;
+    ref?: Ref<HTMLSpanElement>;
+};
+export declare function Hotkeys({ hotkey, formatOptions, children, className, ref, ...props }: HotkeysProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Hotkeys {
+    var Key: ({ className, ref, ...props }: HotkeysKeyProps) => import("react/jsx-runtime").JSX.Element;
+    var Separator: ({ children, className, ref, ...props }: HotkeysSeparatorProps) => import("react/jsx-runtime").JSX.Element;
+    var Root: typeof Hotkeys;
+    var displayName: string;
+}
+export type HotkeysKeyProps = ComponentPropsWithoutRef<"kbd"> & {
+    ref?: Ref<HTMLElement>;
+};
+export type HotkeysSeparatorProps = ComponentPropsWithoutRef<"span"> & {
+    ref?: Ref<HTMLSpanElement>;
+};
+//# sourceMappingURL=hotkeys.d.ts.map

package/dist/src/atoms/hotkeys.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hotkeys.d.ts","sourceRoot":"","sources":["../../../src/atoms/hotkeys.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAC1D,OAAO,EAAE,KAAK,mBAAmB,EAAmB,MAAM,YAAY,CAAA;AAWtE,MAAM,MAAM,YAAY,GAAG,wBAAwB,CAAC,MAAM,CAAC,GAAG;IAC5D,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,aAAa,CAAC,EAAE,mBAAmB,CAAA;IACnC,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAA;CAC3B,CAAA;AAED,wBAAgB,OAAO,CAAC,EACtB,MAAM,EACN,aAAa,EACb,QAAQ,EACR,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACT,EAAE,YAAY,2CAgBd;yBAvBe,OAAO;4CAiCpB,eAAe;4DAqBf,qBAAqB;;;;AA7BxB,MAAM,MAAM,eAAe,GAAG,wBAAwB,CAAC,KAAK,CAAC,GAAG;IAC9D,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAA;CACvB,CAAA;AAkBD,MAAM,MAAM,qBAAqB,GAAG,wBAAwB,CAAC,MAAM,CAAC,GAAG;IACrE,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAA;CAC3B,CAAA"}

package/dist/src/hotkeys.d.ts

@@ -0,0 +1,19 @@
+import { type CommandDefinition, type HotkeyCommand, type HotkeyFormatOptions, type HotkeyStore } from "@zag-js/hotkeys";
+export { createHotkeyStore } from "@zag-js/hotkeys";
+export type { CommandDefinition, HotkeyAction, HotkeyCommand, HotkeyFormatOptions, HotkeyOptions, HotkeyStore, HotkeyStoreOptions, } from "@zag-js/hotkeys";
+export type UseHotkeyProps = Omit<CommandDefinition, "id"> & {
+    store: HotkeyStore;
+    id?: string;
+};
+export declare function useHotkey({ store, id, ...command }: UseHotkeyProps): void;
+export type UseHotkeysProps = {
+    store: HotkeyStore;
+    commands: CommandDefinition[];
+};
+export declare function useHotkeys({ store, commands }: UseHotkeysProps): void;
+export type UseHotkeyRegistrationsProps = {
+    store: HotkeyStore;
+};
+export declare function useHotkeyRegistrations({ store }: UseHotkeyRegistrationsProps): HotkeyCommand[];
+export declare function useFormatHotkey(): (hotkey: string, options?: HotkeyFormatOptions) => string;
+//# sourceMappingURL=hotkeys.d.ts.map

package/dist/src/hotkeys.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hotkeys.d.ts","sourceRoot":"","sources":["../../src/hotkeys.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,iBAAiB,EAEtB,KAAK,aAAa,EAClB,KAAK,mBAAmB,EAExB,KAAK,WAAW,EACjB,MAAM,iBAAiB,CAAA;AAWxB,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AACnD,YAAY,EACV,iBAAiB,EACjB,YAAY,EACZ,aAAa,EACb,mBAAmB,EACnB,aAAa,EACb,WAAW,EACX,kBAAkB,GACnB,MAAM,iBAAiB,CAAA;AAExB,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAAC,GAAG;IAC3D,KAAK,EAAE,WAAW,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,CAAA;AAED,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,GAAG,OAAO,EAAE,EAAE,cAAc,QAGlE;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,WAAW,CAAA;IAClB,QAAQ,EAAE,iBAAiB,EAAE,CAAA;CAC9B,CAAA;AA4ED,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,eAAe,QAmC9D;AAED,MAAM,MAAM,2BAA2B,GAAG;IAAE,KAAK,EAAE,WAAW,CAAA;CAAE,CAAA;AAKhE,wBAAgB,sBAAsB,CAAC,EAAE,KAAK,EAAE,EAAE,2BAA2B,mBAiC5E;AAQD,wBAAgB,eAAe,KAOrB,QAAQ,MAAM,EAAE,UAAU,mBAAmB,YAQtD"}

package/dist/src/internal/molecules/command.context.d.ts

@@ -0,0 +1,6 @@
+import type { CommandApi, CommandItem } from "../../molecules/command.js";
+export declare const CommandContext: import("react").Context<CommandApi | null>;
+export declare const CommandItemContext: import("react").Context<CommandItem | null>;
+export declare function useCommandContext(): CommandApi;
+export declare function useCommandItemContext(): CommandItem;
+//# sourceMappingURL=command.context.d.ts.map

package/dist/src/internal/molecules/command.context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"command.context.d.ts","sourceRoot":"","sources":["../../../../src/internal/molecules/command.context.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAEtE,eAAO,MAAM,cAAc,4CAAyC,CAAA;AACpE,eAAO,MAAM,kBAAkB,6CAA0C,CAAA;AAEzE,wBAAgB,iBAAiB,eAMhC;AAED,wBAAgB,qBAAqB,gBAMpC"}