@saas-ui/command-bar/dist/index.mjs

Chakra UI CommandBar Component

'use client'
import {
  commandBarTheme
} from "./chunk-PAAYRCJD.mjs";

// src/command-bar.tsx
import {
  chakra,
  forwardRef,
  useMultiStyleConfig,
  Modal,
  ModalContent,
  ModalOverlay,
  useTheme
} from "@chakra-ui/react";

// src/command-bar-context.ts
import {
  useDisclosure
} from "@chakra-ui/react";
import { callAllHandlers, createContext } from "@chakra-ui/utils";
import { useCallback } from "react";
var [CommandBarStylesProvider, useCommandBarStyles] = createContext({
  name: "CommandBarStylesProvider"
});
var [CommandBarProvider, useCommandBarContext] = createContext({
  name: "CommandBarProvider"
});
var useCommandBar = (props) => {
  const {
    shouldFilter = true,
    onFilter,
    value,
    onChange,
    onSelect,
    isOpen: isOpenProp,
    onClose: onCloseProp,
    closeOnSelect,
    size
  } = props;
  const { isOpen, onClose } = useDisclosure({
    isOpen: isOpenProp,
    onClose: onCloseProp
  });
  const getCommandProps = useCallback(
    (props2) => {
      return {
        shouldFilter,
        filter: onFilter,
        value,
        onValueChange: onChange,
        ...props2
      };
    },
    [shouldFilter, onFilter, value, onChange]
  );
  const getItemProps = useCallback(
    (props2) => {
      const { isDisabled, onSelect: onSelectProp, ...rest } = props2;
      return {
        ...rest,
        disabled: isDisabled,
        onSelect: callAllHandlers(onSelectProp, onSelect, () => {
          if (closeOnSelect) {
            onClose();
          }
        })
      };
    },
    [onSelect, closeOnSelect, onClose]
  );
  const getDialogProps = useCallback(
    (props2) => {
      return {
        isOpen,
        onClose: callAllHandlers(props2 == null ? void 0 : props2.onClose, onClose),
        size,
        ...props2
      };
    },
    [isOpen, onClose]
  );
  return {
    getCommandProps,
    getItemProps,
    getDialogProps
  };
};

// src/command-bar.tsx
import { cx } from "@chakra-ui/utils";
import {
  CommandRoot,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandLoading,
  CommandSeparator
} from "cmdk";
import { jsx, jsxs } from "react/jsx-runtime";
function cmdkFactory(Component, key) {
  const StyledComponent = chakra(Component);
  return forwardRef((props, ref) => {
    const styles = useCommandBarStyles();
    const componentStyles = {
      ...styles[key]
    };
    return /* @__PURE__ */ jsx(
      StyledComponent,
      {
        ref,
        ...props,
        __css: componentStyles,
        className: cx(`sui-command-bar__${key}`, props.className)
      }
    );
  });
}
var StyledCommand = chakra(CommandRoot);
var StyledInput = chakra(CommandInput);
var StyledItem = chakra(CommandItem);
var CommandBarList = cmdkFactory(CommandList, "list");
var CommandBarLoading = cmdkFactory(CommandLoading, "loading");
var CommandBarEmpty = cmdkFactory(CommandEmpty, "empty");
var CommandBarSeparator = cmdkFactory(CommandSeparator, "separator");
var CommandBarGroup = cmdkFactory(CommandGroup, "group");
var CommandBar = (props) => {
  var _a;
  const theme = useTheme();
  const styleConfig = (_a = theme.components["SuiCommandBar"]) != null ? _a : commandBarTheme;
  const styles = useMultiStyleConfig("SuiCommandBar", {
    styleConfig,
    ...props
  });
  const context = useCommandBar(props);
  return /* @__PURE__ */ jsx(CommandBarProvider, { value: context, children: /* @__PURE__ */ jsx(CommandBarStylesProvider, { value: styles, children: props.children }) });
};
CommandBar.displayName = "CommandBar";
var CommandBarContent = forwardRef(
  (props, ref) => {
    const styles = useCommandBarStyles();
    const containerStyles = {
      ...styles.container
    };
    const { getCommandProps } = useCommandBarContext();
    return /* @__PURE__ */ jsx(
      StyledCommand,
      {
        ref,
        ...props,
        ...getCommandProps(props),
        __css: containerStyles,
        className: cx("sui-command-bar", props.className)
      }
    );
  }
);
CommandBarContent.displayName = "CommandBarContent";
var CommandBarInput = forwardRef(
  (props, ref) => {
    const { onChange, value, ...rest } = props;
    const styles = useCommandBarStyles();
    const inputStyles = {
      ...styles.input
    };
    return /* @__PURE__ */ jsx(
      StyledInput,
      {
        ref,
        value,
        onValueChange: onChange,
        ...rest,
        __css: inputStyles,
        className: cx("sui-command-bar__input", props.className)
      }
    );
  }
);
CommandBarInput.displayName = "CommandBarInput";
var CommandBarItem = forwardRef(
  (props, ref) => {
    const styles = useCommandBarStyles();
    const itemStyles = {
      ...styles.item
    };
    const { getItemProps } = useCommandBarContext();
    return /* @__PURE__ */ jsx(
      StyledItem,
      {
        ref,
        ...getItemProps(props),
        __css: itemStyles,
        className: cx("sui-command-bar__item", props.className)
      }
    );
  }
);
CommandBarItem.displayName = "CommandBarItem";
var CommandBarDialog = forwardRef(
  (props, ref) => {
    const { children, contentProps, overlay, ...rest } = props;
    const { getDialogProps } = useCommandBarContext();
    return /* @__PURE__ */ jsxs(Modal, { scrollBehavior: "inside", ...getDialogProps(rest), children: [
      overlay && /* @__PURE__ */ jsx(CommandBarOverlay, {}),
      /* @__PURE__ */ jsx(ModalContent, { ref, bg: "transparent", ...contentProps, children })
    ] });
  }
);
CommandBarDialog.displayName = "CommandBarDialog";
var CommandBarOverlay = ModalOverlay;

// src/index.ts
import { useCommandState } from "cmdk";
export {
  CommandBar,
  CommandBarContent,
  CommandBarDialog,
  CommandBarEmpty,
  CommandBarGroup,
  CommandBarInput,
  CommandBarItem,
  CommandBarList,
  CommandBarLoading,
  CommandBarSeparator,
  useCommandBar,
  useCommandBarContext,
  useCommandBarStyles,
  useCommandState
};
//# sourceMappingURL=index.mjs.map