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

Modern UI Kit made with Tailwind

"use client";

// elements/command/Command.tsx
import * as React2 from "react";
import { Dialog } from "@radix-ui/react-dialog";

// util/index.ts
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";
function cn(...inputs) {
  return twMerge(clsx(inputs));
}

// elements/command/Command.tsx
import { Command as CommandPrimitive } from "cmdk";

// elements/dialog/Dialog.tsx
import * as React from "react";
import * as DialogPrimitive from "@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(
  CommandPrimitive,
  {
    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(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(
    CommandPrimitive.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(
  CommandPrimitive.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(
  CommandPrimitive.Empty,
  {
    ref,
    className: "hawa-py-6 hawa-text-center hawa-text-sm",
    ...props
  }
));
var CommandGroup = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React2.createElement(
  CommandPrimitive.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(
  CommandPrimitive.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(
  CommandPrimitive.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(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 = CommandPrimitive.Item.displayName;
CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
CommandGroup.displayName = CommandPrimitive.Group.displayName;
CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
CommandList.displayName = CommandPrimitive.List.displayName;
Command.displayName = CommandPrimitive.displayName;
CommandInput.displayName = CommandPrimitive.Input.displayName;
export {
  AppCommand,
  Command,
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
  FullCommand
};
//# sourceMappingURL=index.mjs.map