@mijn-ui/react-command/dist/index.js

A command palette for quick access to actions and navigation, often used for keyboard shortcuts.

"use client";

// src/command.tsx
import { createTVUnstyledSlots } from "@mijn-ui/react-core";
import { Dialog, DialogContent } from "@mijn-ui/react-dialog";
import { useTVUnstyled } from "@mijn-ui/react-hooks";
import {
  cn,
  commandStyles
} from "@mijn-ui/react-theme";
import { createContext } from "@mijn-ui/react-utilities";
import { Command as CommandPrimitive } from "cmdk";
import { jsx } from "react/jsx-runtime";
var [CommandProvider, useCommandContext] = createContext({
  name: "CommandContext",
  strict: true,
  errorMessage: "useCommandContext: `context` is undefined. Seems you forgot to wrap component within <Command />"
});
var useCommandStyles = (unstyledOverride) => {
  const context = useCommandContext();
  const unstyledSlots = useTVUnstyled(context, unstyledOverride);
  return { ...unstyledSlots, classNames: context.classNames };
};
var Command = ({
  className,
  classNames,
  unstyled = false,
  ...props
}) => {
  const styles = commandStyles();
  const { base } = createTVUnstyledSlots({ base: styles.base }, unstyled);
  return /* @__PURE__ */ jsx(CommandProvider, { value: { unstyled, styles, classNames }, children: /* @__PURE__ */ jsx(
    CommandPrimitive,
    {
      className: base({ className: cn(classNames?.base, className) }),
      ...props
    }
  ) });
};
var CommandDialog = ({
  children,
  className,
  classNames,
  unstyled,
  ...props
}) => {
  const styles = commandStyles();
  const { dialogWrapper, dialog } = createTVUnstyledSlots(
    {
      dialogWrapper: styles.dialogWrapper,
      dialog: styles.dialog
    },
    unstyled
  );
  return /* @__PURE__ */ jsx(CommandProvider, { value: { unstyled, styles, classNames }, children: /* @__PURE__ */ jsx(Dialog, { ...props, children: /* @__PURE__ */ jsx(
    DialogContent,
    {
      className: dialogWrapper({
        className: cn(classNames?.dialogWrapper)
      }),
      children: /* @__PURE__ */ jsx(
        Command,
        {
          className: dialog({
            className: cn(classNames?.dialog, className)
          }),
          children
        }
      )
    }
  ) }) });
};
var CommandInput = ({ className, unstyled, ...props }) => {
  const { input, classNames } = useCommandStyles(unstyled);
  return /* @__PURE__ */ jsx(
    CommandPrimitive.Input,
    {
      className: input({
        className: cn(classNames?.input, className)
      }),
      ...props
    }
  );
};
var CommandList = ({ className, unstyled, ...props }) => {
  const { list, classNames } = useCommandStyles(unstyled);
  return /* @__PURE__ */ jsx(
    CommandPrimitive.List,
    {
      className: list({
        className: cn(classNames?.list, className)
      }),
      ...props
    }
  );
};
var CommandEmpty = ({ unstyled, className, ...props }) => {
  const { empty, classNames } = useCommandStyles(unstyled);
  return /* @__PURE__ */ jsx(
    CommandPrimitive.Empty,
    {
      className: empty({
        className: cn(classNames?.empty, className)
      }),
      ...props
    }
  );
};
var CommandGroup = ({ className, unstyled, ...props }) => {
  const { group, classNames } = useCommandStyles(unstyled);
  return /* @__PURE__ */ jsx(
    CommandPrimitive.Group,
    {
      className: group({
        className: cn(classNames?.group, className)
      }),
      ...props
    }
  );
};
var CommandSeparator = ({
  className,
  unstyled,
  ...props
}) => {
  const { separator, classNames } = useCommandStyles(unstyled);
  return /* @__PURE__ */ jsx(
    CommandPrimitive.Separator,
    {
      className: separator({
        className: cn(classNames?.separator, className)
      }),
      ...props
    }
  );
};
var CommandItem = ({ className, unstyled, ...props }) => {
  const { item, classNames } = useCommandStyles(unstyled);
  return /* @__PURE__ */ jsx(
    CommandPrimitive.Item,
    {
      className: item({
        className: cn(classNames?.item, className)
      }),
      ...props
    }
  );
};
var CommandShortcut = ({
  className,
  unstyled,
  ...props
}) => {
  const { shortcut, classNames } = useCommandStyles(unstyled);
  return /* @__PURE__ */ jsx(
    "span",
    {
      className: shortcut({
        className: cn(classNames?.shortcut, className)
      }),
      ...props
    }
  );
};
export {
  Command,
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
  useCommandStyles
};