@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 {
  cn,
  createContext,
  createTVUnstyledSlots,
  useTVUnstyled
} from "@mijn-ui/react-core";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle
} from "@mijn-ui/react-dialog";
import { Command as CommandPrimitive } from "cmdk";
import { tv } from "tailwind-variants";
import { jsx, jsxs } from "react/jsx-runtime";
var commandStyles = tv({
  slots: {
    base: "border-outline-default bg-bg-default-alt text-fg-default flex size-full flex-col overflow-hidden rounded-md border",
    dialogWrapper: "overflow-hidden p-0 shadow-lg",
    dialog: "[&_[cmdk-group-heading]]:text-fg-tertiary [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:size-5",
    list: "max-h-[300px] overflow-y-auto overflow-x-hidden",
    group: "text-fg-default [&_[cmdk-group-heading]]:text-fg-tertiary overflow-hidden [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
    separator: "bg-outline-default h-px -mx-1",
    item: "data-[selected='true']:bg-bg-secondary relative flex cursor-default select-none items-center px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-auto data-[disabled=true]:opacity-50",
    input: "",
    empty: "py-6 text-center text-sm",
    shortcut: "text-fg-tertiary ml-auto text-xs tracking-widest"
  }
});
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,
    {
      "data-slot": "command",
      className: base({ className: cn(classNames?.base, className) }),
      ...props
    }
  ) });
};
var CommandDialog = ({
  title = "Command Palette",
  description = "Search for a command to run...",
  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__ */ jsxs(Dialog, { ...props, children: [
    /* @__PURE__ */ jsxs(DialogHeader, { className: "sr-only", children: [
      /* @__PURE__ */ jsx(DialogTitle, { children: title }),
      /* @__PURE__ */ jsx(DialogDescription, { children: description })
    ] }),
    /* @__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,
    {
      "data-slot": "command-input",
      className: input({
        className: cn(classNames?.input, className)
      }),
      ...props
    }
  );
};
var CommandList = ({ className, unstyled, ...props }) => {
  const { list, classNames } = useCommandStyles(unstyled);
  return /* @__PURE__ */ jsx(
    CommandPrimitive.List,
    {
      "data-slot": "command-list",
      className: list({
        className: cn(classNames?.list, className)
      }),
      ...props
    }
  );
};
var CommandEmpty = ({ unstyled, className, ...props }) => {
  const { empty, classNames } = useCommandStyles(unstyled);
  return /* @__PURE__ */ jsx(
    CommandPrimitive.Empty,
    {
      "data-slot": "command-empty",
      className: empty({
        className: cn(classNames?.empty, className)
      }),
      ...props
    }
  );
};
var CommandGroup = ({ className, unstyled, ...props }) => {
  const { group, classNames } = useCommandStyles(unstyled);
  return /* @__PURE__ */ jsx(
    CommandPrimitive.Group,
    {
      "data-slot": "command-group",
      className: group({
        className: cn(classNames?.group, className)
      }),
      ...props
    }
  );
};
var CommandSeparator = ({
  className,
  unstyled,
  ...props
}) => {
  const { separator, classNames } = useCommandStyles(unstyled);
  return /* @__PURE__ */ jsx(
    CommandPrimitive.Separator,
    {
      "data-slot": "command-separator",
      className: separator({
        className: cn(classNames?.separator, className)
      }),
      ...props
    }
  );
};
var CommandItem = ({ className, unstyled, ...props }) => {
  const { item, classNames } = useCommandStyles(unstyled);
  return /* @__PURE__ */ jsx(
    CommandPrimitive.Item,
    {
      "data-slot": "command-item",
      className: item({
        className: cn(classNames?.item, className)
      }),
      ...props
    }
  );
};
var CommandShortcut = ({
  className,
  unstyled,
  ...props
}) => {
  const { shortcut, classNames } = useCommandStyles(unstyled);
  return /* @__PURE__ */ jsx(
    "span",
    {
      "data-slot": "command-shortcut",
      className: shortcut({
        className: cn(classNames?.shortcut, className)
      }),
      ...props
    }
  );
};
export {
  Command,
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
  commandStyles,
  useCommandStyles
};