@sikka/hawa/dist/command/index.js

Modern UI Kit made with Tailwind

"use client";
"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// elements/command/index.ts
var command_exports = {};
__export(command_exports, {
  AppCommand: () => AppCommand,
  Command: () => Command,
  CommandDialog: () => CommandDialog,
  CommandEmpty: () => CommandEmpty,
  CommandGroup: () => CommandGroup,
  CommandInput: () => CommandInput,
  CommandItem: () => CommandItem,
  CommandList: () => CommandList,
  CommandSeparator: () => CommandSeparator,
  CommandShortcut: () => CommandShortcut,
  FullCommand: () => FullCommand
});
module.exports = __toCommonJS(command_exports);

// elements/command/Command.tsx
var React2 = __toESM(require("react"));
var import_react_dialog = require("@radix-ui/react-dialog");

// util/index.ts
var import_clsx = require("clsx");
var import_tailwind_merge = require("tailwind-merge");
function cn(...inputs) {
  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
}

// elements/command/Command.tsx
var import_cmdk = require("cmdk");

// elements/dialog/Dialog.tsx
var React = __toESM(require("react"));
var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"));
var DialogPortal = ({ ...props }) => /* @__PURE__ */ React.createElement(DialogPrimitive.Portal, { ...props });
var DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
  DialogPrimitive.Overlay,
  {
    ref,
    className: cn(
      "hawa-fixed hawa-inset-0 hawa-z-50 hawa-bg-background/80 hawa-backdrop-blur-sm data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=open]:hawa-fade-in-0",
      className
    ),
    ...props
  }
));
var DialogContent = React.forwardRef(
  ({
    ids,
    className,
    classNames,
    children,
    persist,
    hideCloseButton,
    overlayProps,
    ...props
  }, ref) => /* @__PURE__ */ React.createElement(DialogPortal, { container: props.container }, /* @__PURE__ */ React.createElement(
    DialogOverlay,
    {
      className: classNames == null ? void 0 : classNames.overlay,
      id: ids == null ? void 0 : ids.overlay,
      ...overlayProps
    }
  ), /* @__PURE__ */ React.createElement(
    DialogPrimitive.Content,
    {
      onPointerDownOutside: (e) => {
        if (persist) {
          e.preventDefault();
        }
      },
      ref,
      className: cn(
        "hawa-fixed hawa-left-[50%] hawa-top-[50%] hawa-z-50 hawa-grid hawa-w-[90%] hawa-max-w-lg hawa-translate-x-[-50%] hawa-translate-y-[-50%] hawa-gap-4 hawa-border hawa-bg-background hawa-p-6 hawa-shadow-lg hawa-transition-all hawa-duration-200 data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=open]:hawa-fade-in-0 data-[state=closed]:hawa-zoom-out-95 data-[state=open]:hawa-zoom-in-95 data-[state=closed]:hawa-slide-out-to-left-1/2 data-[state=closed]:hawa-slide-out-to-top-[48%] data-[state=open]:hawa-slide-in-from-left-1/2 data-[state=open]:hawa-slide-in-from-top-[48%] hawa-rounded md:hawa-w-full",
        className
      ),
      ...props
    },
    children,
    !hideCloseButton && /* @__PURE__ */ React.createElement(
      DialogPrimitive.Close,
      {
        className: cn(
          "hawa-absolute hawa-top-4 hawa-rounded hawa-opacity-70 hawa-ring-offset-background hawa-transition-opacity hover:hawa-opacity-100 focus:hawa-outline-none focus:hawa-ring-2 focus:hawa-ring-ring focus:hawa-ring-offset-2 disabled:hawa-pointer-events-none data-[state=open]:hawa-bg-accent data-[state=open]:hawa-text-muted-foreground",
          props.dir === "rtl" ? "hawa-left-4" : "hawa-right-4",
          classNames == null ? void 0 : classNames.closeButton
        ),
        id: ids == null ? void 0 : ids.closeButton
      },
      /* @__PURE__ */ React.createElement(
        "svg",
        {
          id: ids == null ? void 0 : ids.closeIcon,
          "aria-label": "Close Icon",
          "aria-hidden": "true",
          className: "hawa-h-5 hawa-w-5",
          fill: "currentColor",
          viewBox: "0 0 20 20"
        },
        /* @__PURE__ */ React.createElement(
          "path",
          {
            fillRule: "evenodd",
            d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
            clipRule: "evenodd"
          }
        )
      ),
      /* @__PURE__ */ React.createElement("span", { className: "hawa-sr-only" }, "Close")
    )
  ))
);
var DialogCarouselContent = React.forwardRef(
  ({
    className,
    children,
    onPrev,
    persist,
    hideCloseButton,
    hidePrevButton,
    ...props
  }, ref) => /* @__PURE__ */ React.createElement(DialogPortal, null, /* @__PURE__ */ React.createElement(DialogOverlay, null), /* @__PURE__ */ React.createElement(
    DialogPrimitive.Content,
    {
      onPointerDownOutside: (e) => {
        if (persist) {
          e.preventDefault();
        }
      },
      ref,
      className: cn(
        "hawa-fixed hawa-left-[50%] hawa-top-[50%] hawa-z-50 hawa-grid hawa-w-full hawa-max-w-lg hawa-translate-x-[-50%] hawa-translate-y-[-50%] hawa-gap-4 hawa-border hawa-bg-background hawa-p-6 hawa-pt-14 hawa-shadow-lg hawa-transition-all hawa-duration-200 data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=open]:hawa-fade-in-0 data-[state=closed]:hawa-zoom-out-95 data-[state=open]:hawa-zoom-in-95 data-[state=closed]:hawa-slide-out-to-left-1/2 data-[state=closed]:hawa-slide-out-to-top-[48%] data-[state=open]:hawa-slide-in-from-left-1/2 data-[state=open]:hawa-slide-in-from-top-[48%] sm:hawa-rounded md:hawa-w-full",
        className
      ),
      ...props
    },
    children,
    /* @__PURE__ */ React.createElement(
      "div",
      {
        className: cn(
          "hawa-absolute hawa-top-0 hawa-flex hawa-w-full hawa-flex-row hawa-p-4",
          onPrev ? "hawa-justify-between" : "hawa-justify-end"
        )
      },
      hidePrevButton ? /* @__PURE__ */ React.createElement("div", null) : /* @__PURE__ */ React.createElement(
        "div",
        {
          onClick: onPrev,
          className: cn(
            "hawa-end-0 hawa-cursor-pointer hawa-rounded hawa-opacity-70 hawa-ring-offset-background hawa-transition-opacity hover:hawa-opacity-100 focus:hawa-outline-none focus:hawa-ring-2 focus:hawa-ring-ring focus:hawa-ring-offset-2 disabled:hawa-pointer-events-none data-[state=open]:hawa-bg-accent data-[state=open]:hawa-text-muted-foreground",
            props.dir === "rtl" && "hawa-rotate-180"
          )
        },
        /* @__PURE__ */ React.createElement(
          "svg",
          {
            xmlns: "http://www.w3.org/2000/svg",
            width: "24",
            height: "24",
            viewBox: "0 0 24 24",
            fill: "none",
            className: "hawa-h-6 hawa-w-6",
            stroke: "currentColor",
            strokeWidth: "2",
            strokeLinecap: "round",
            strokeLinejoin: "round"
          },
          /* @__PURE__ */ React.createElement("path", { d: "m15 18-6-6 6-6" })
        )
      ),
      !hideCloseButton && /* @__PURE__ */ React.createElement(
        DialogPrimitive.Close,
        {
          className: cn(
            "hawa-end-0 hawa-rounded hawa-opacity-70 hawa-ring-offset-background hawa-transition-opacity hover:hawa-opacity-100 focus:hawa-outline-none focus:hawa-ring-2 focus:hawa-ring-ring focus:hawa-ring-offset-2 disabled:hawa-pointer-events-none data-[state=open]:hawa-bg-accent data-[state=open]:hawa-text-muted-foreground",
            props.dir === "rtl" ? "hawa-left-4" : "hawa-right-4"
          )
        },
        /* @__PURE__ */ React.createElement(
          "svg",
          {
            "aria-label": "Close Icon",
            "aria-hidden": "true",
            className: "hawa-h-6 hawa-w-6",
            fill: "currentColor",
            viewBox: "0 0 20 20"
          },
          /* @__PURE__ */ React.createElement(
            "path",
            {
              fillRule: "evenodd",
              d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
              clipRule: "evenodd"
            }
          )
        ),
        /* @__PURE__ */ React.createElement("span", { className: "hawa-sr-only" }, "Close")
      )
    )
  ))
);
var DialogHeader = ({
  className,
  ...props
}) => /* @__PURE__ */ React.createElement(
  "div",
  {
    className: cn(
      "hawa-flex hawa-flex-col hawa-space-y-1.5 hawa-text-center sm:hawa-text-left",
      className
    ),
    ...props
  }
);
var DialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
  DialogPrimitive.Title,
  {
    ref,
    className: cn(
      "hawa-text-start hawa-text-lg hawa-font-semibold hawa-leading-none hawa-tracking-tight",
      className
    ),
    ...props
  }
));
var DialogDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
  DialogPrimitive.Description,
  {
    ref,
    className: cn(
      "hawa-text-start hawa-text-sm hawa-text-muted-foreground",
      className
    ),
    ...props
  }
));
var DialogFooter = ({
  className,
  ...props
}) => /* @__PURE__ */ React.createElement(
  "div",
  {
    className: cn(
      "hawa-flex hawa-flex-col xs:hawa-flex-row sm:hawa-justify-end hawa-gap-2",
      className
    ),
    ...props
  }
);
var DialogCarousel = ({
  stepsApi,
  stepsRef,
  children,
  direction
}) => {
  React.useEffect(() => {
    if (stepsApi) {
      stepsApi.reInit();
    }
  }, [stepsApi, children]);
  return /* @__PURE__ */ React.createElement("div", { className: "hawa-overflow-hidden" }, /* @__PURE__ */ React.createElement("div", { ref: stepsRef, dir: direction }, /* @__PURE__ */ React.createElement(
    "div",
    {
      className: "hawa-flex",
      style: {
        transition: "height 0.2s"
      }
    },
    React.Children.map(children, (child, index) => /* @__PURE__ */ React.createElement(
      "div",
      {
        className: cn(
          "hawa-flex hawa-h-fit hawa-flex-[0_0_100%] hawa-items-center hawa-justify-center"
        ),
        key: index
      },
      child
    ))
  )));
};
var DialogSteps = ({
  currentStep,
  visibleStepRef,
  children
}) => {
  const [dialogHeight, setDialogHeight] = React.useState(null);
  React.useEffect(() => {
    if (visibleStepRef.current) {
      setDialogHeight(visibleStepRef.current.offsetHeight);
      console.log("height is ", visibleStepRef.current.offsetHeight);
    }
  }, [currentStep, visibleStepRef]);
  return /* @__PURE__ */ React.createElement(
    "div",
    {
      className: "hawa-relative hawa-overflow-clip",
      style: {
        height: dialogHeight || "fit-content",
        transition: "height 0.2s"
      }
    },
    React.Children.map(children, (child, index) => /* @__PURE__ */ React.createElement(
      "div",
      {
        ref: currentStep === `step-${index + 1}` ? visibleStepRef : null,
        className: cn(
          currentStep === `step-${index + 1}` ? "hawa-visible hawa-block" : "hawa-invisible hawa-hidden"
        )
      },
      child
    ))
  );
};
var DialogStep = ({
  id,
  children,
  className,
  stepRef
}) => {
  return /* @__PURE__ */ React.createElement(
    "div",
    {
      id,
      ref: stepRef,
      className: cn("hawa-w-full hawa-px-1", className)
    },
    children
  );
};
var DialogBody = ({ children, className }) => {
  return /* @__PURE__ */ React.createElement("div", { className: cn("hawa-py-6", className) }, children);
};
DialogBody.displayName = "DialogBody";
DialogStep.displayName = "DialogStep";
DialogSteps.displayName = "DialogSteps";
DialogCarousel.displayName = "DialogCarousel";
DialogCarouselContent.displayName = "DialogCarouselContent";
DialogHeader.displayName = "DialogHeader";
DialogFooter.displayName = "DialogFooter";
DialogTitle.displayName = DialogPrimitive.Title.displayName;
DialogPortal.displayName = DialogPrimitive.Portal.displayName;
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
DialogContent.displayName = DialogPrimitive.Content.displayName;
DialogDescription.displayName = DialogPrimitive.Description.displayName;

// elements/command/Command.tsx
var Command = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React2.createElement(
  import_cmdk.Command,
  {
    ref,
    className: cn(
      "hawa-flex hawa-h-full hawa-w-full hawa-flex-col hawa-overflow-hidden hawa-rounded-md hawa-bg-popover hawa-text-popover-foreground",
      className
    ),
    ...props
  }
));
var CommandDialog = ({ children, ...props }) => {
  return /* @__PURE__ */ React2.createElement(import_react_dialog.Dialog, { ...props }, /* @__PURE__ */ React2.createElement(DialogContent, { className: "hawa-overflow-hidden hawa-p-0 hawa-shadow-lg" }, /* @__PURE__ */ React2.createElement(Command, { className: "[&_[cmdk-group-heading]]:hawa-px-2 [&_[cmdk-group-heading]]:hawa-font-medium [&_[cmdk-group-heading]]:hawa-text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:hawa-pt-0 [&_[cmdk-group]]:hawa-px-2 [&_[cmdk-input-wrapper]_svg]:hawa-h-5 [&_[cmdk-input-wrapper]_svg]:hawa-w-5 [&_[cmdk-input]]:hawa-h-12 [&_[cmdk-item]]:hawa-px-2 [&_[cmdk-item]]:hawa-py-3 [&_[cmdk-item]_svg]:hawa-h-5 [&_[cmdk-item]_svg]:hawa-w-5" }, children)));
};
var CommandInput = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React2.createElement(
  "div",
  {
    className: "hawa-flex hawa-items-center hawa-border-b hawa-px-3",
    "cmdk-input-wrapper": ""
  },
  /* @__PURE__ */ React2.createElement(
    "svg",
    {
      "aria-label": "Search Icon",
      xmlns: "http://www.w3.org/2000/svg",
      width: "24",
      height: "24",
      viewBox: "0 0 24 24",
      fill: "none",
      stroke: "currentColor",
      strokeWidth: "2",
      strokeLinecap: "round",
      strokeLinejoin: "round",
      className: "hawa-icon hawa-me-2 hawa-shrink-0 hawa-opacity-50"
    },
    /* @__PURE__ */ React2.createElement("circle", { cx: "11", cy: "11", r: "8" }),
    /* @__PURE__ */ React2.createElement("path", { d: "m21 21-4.3-4.3" })
  ),
  /* @__PURE__ */ React2.createElement(
    import_cmdk.Command.Input,
    {
      ref,
      className: cn(
        "hawa-flex hawa-h-11 hawa-w-full hawa-rounded-md hawa-bg-transparent hawa-py-3 hawa-text-sm hawa-outline-none placeholder:hawa-text-muted-foreground disabled:hawa-cursor-not-allowed disabled:hawa-opacity-50",
        className
      ),
      ...props
    }
  )
));
var CommandList = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React2.createElement(
  import_cmdk.Command.List,
  {
    ref,
    className: cn(
      "hawa-max-h-[300px] hawa-overflow-y-auto hawa-overflow-x-hidden",
      className
    ),
    ...props
  }
));
var CommandEmpty = React2.forwardRef((props, ref) => /* @__PURE__ */ React2.createElement(
  import_cmdk.Command.Empty,
  {
    ref,
    className: "hawa-py-6 hawa-text-center hawa-text-sm",
    ...props
  }
));
var CommandGroup = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React2.createElement(
  import_cmdk.Command.Group,
  {
    ref,
    className: cn(
      "hawa-overflow-hidden hawa-p-1 hawa-text-foreground [&_[cmdk-group-heading]]:hawa-px-2 [&_[cmdk-group-heading]]:hawa-py-1.5 [&_[cmdk-group-heading]]:hawa-text-xs [&_[cmdk-group-heading]]:hawa-font-medium [&_[cmdk-group-heading]]:hawa-text-muted-foreground",
      className
    ),
    ...props
  }
));
var CommandSeparator = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React2.createElement(
  import_cmdk.Command.Separator,
  {
    ref,
    className: cn("hawa--mx-1 hawa-h-px hawa-bg-border", className),
    ...props
  }
));
var CommandItem = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React2.createElement(
  import_cmdk.Command.Item,
  {
    ref,
    className: cn(
      "hawa-relative hawa-flex hawa-cursor-default hawa-select-none hawa-items-center hawa-rounded-sm hawa-px-2 hawa-py-1.5 hawa-text-sm hawa-outline-none aria-selected:hawa-bg-accent aria-selected:hawa-text-accent-foreground data-[disabled='true']:hawa-pointer-events-none data-[disabled='true']:hawa-opacity-50",
      className
    ),
    ...props
  }
));
var CommandShortcut = ({
  className,
  ...props
}) => {
  return /* @__PURE__ */ React2.createElement(
    "span",
    {
      className: cn(
        "hawa-ms-auto hawa-text-xs hawa-tracking-widest hawa-text-muted-foreground",
        className
      ),
      ...props
    }
  );
};
var FullCommand = ({
  items,
  direction = "ltr",
  texts,
  onActionClick
}) => {
  return /* @__PURE__ */ React2.createElement(
    Command,
    {
      dir: direction,
      className: "hawa-rounded-lg hawa-border hawa-shadow-md !hawa-h-full"
    },
    /* @__PURE__ */ React2.createElement(
      CommandInput,
      {
        placeholder: (texts == null ? void 0 : texts.searchPlaceholder) || "Type a command or search..."
      }
    ),
    /* @__PURE__ */ React2.createElement(CommandList, null, /* @__PURE__ */ React2.createElement(CommandEmpty, null, (texts == null ? void 0 : texts.emptyText) || "No results found."), items.map((item, index) => {
      var _a;
      if (item.type === "group") {
        return /* @__PURE__ */ React2.createElement(CommandGroup, { heading: item.heading, key: index }, (_a = item.items) == null ? void 0 : _a.map((subItem, subIndex) => /* @__PURE__ */ React2.createElement(
          CommandItem,
          {
            key: subIndex,
            onSelect: () => {
              if (onActionClick) onActionClick();
              subItem.action();
            }
          },
          /* @__PURE__ */ React2.createElement(subItem.icon, { className: "hawa-icon hawa-me-2" }),
          /* @__PURE__ */ React2.createElement("span", null, subItem.label),
          subItem.shortcut && /* @__PURE__ */ React2.createElement(CommandShortcut, null, subItem.shortcut)
        )));
      } else if (item.type === "separator") {
        return /* @__PURE__ */ React2.createElement(CommandSeparator, { key: index });
      }
      return null;
    }))
  );
};
var AppCommand = ({
  commandProps,
  dialogProps,
  onActionClick
}) => {
  return /* @__PURE__ */ React2.createElement(import_react_dialog.Dialog, { ...dialogProps }, /* @__PURE__ */ React2.createElement(
    DialogContent,
    {
      hideCloseButton: true,
      className: "hawa-overflow-hidden !hawa-p-0 hawa-shadow-l"
    },
    /* @__PURE__ */ React2.createElement(FullCommand, { ...commandProps, onActionClick })
  ));
};
CommandShortcut.displayName = "CommandShortcut";
CommandItem.displayName = import_cmdk.Command.Item.displayName;
CommandSeparator.displayName = import_cmdk.Command.Separator.displayName;
CommandGroup.displayName = import_cmdk.Command.Group.displayName;
CommandEmpty.displayName = import_cmdk.Command.Empty.displayName;
CommandList.displayName = import_cmdk.Command.List.displayName;
Command.displayName = import_cmdk.Command.displayName;
CommandInput.displayName = import_cmdk.Command.Input.displayName;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  AppCommand,
  Command,
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
  FullCommand
});
//# sourceMappingURL=index.js.map