@sikka/hawa/dist/select/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/select/index.ts
var select_exports = {};
__export(select_exports, {
  Select: () => Select
});
module.exports = __toCommonJS(select_exports);

// elements/select/Select.tsx
var import_react4 = __toESM(require("react"));
var import_react_select = __toESM(require("react-select"));
var import_creatable = __toESM(require("react-select/creatable"));

// 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/select/Select.tsx
var import_clsx2 = __toESM(require("clsx"));

// elements/helperText/HelperText.tsx
var import_react = __toESM(require("react"));
var HelperText = ({ helperText }) => /* @__PURE__ */ import_react.default.createElement(
  "p",
  {
    className: cn(
      "hawa-my-0 hawa-text-start hawa-text-xs hawa-text-helper-color hawa-transition-all",
      helperText ? "hawa-h-4 hawa-opacity-100" : "hawa-h-0 hawa-opacity-0"
    )
  },
  helperText
);

// elements/label/Label.tsx
var React3 = __toESM(require("react"));

// elements/tooltip/Tooltip.tsx
var import_react2 = __toESM(require("react"));
var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"));
var TooltipContent = import_react2.default.forwardRef(({ className, sideOffset = 4, size = "default", ...props }, ref) => /* @__PURE__ */ import_react2.default.createElement(
  TooltipPrimitive.Content,
  {
    ref,
    sideOffset,
    className: cn(
      "hawa-z-50 hawa-overflow-hidden hawa-rounded-md hawa-border hawa-bg-popover hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-text-popover-foreground hawa-shadow-md hawa-animate-in hawa-fade-in-0 hawa-zoom-in-95 data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=closed]:hawa-zoom-out-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2",
      {
        "hawa-text-xs": size === "small",
        "hawa-text-xl": size === "large"
      },
      className
    ),
    ...props
  }
));
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
var TooltipArrow = import_react2.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ import_react2.default.createElement(TooltipPrimitive.Arrow, { ref, className: cn(className), ...props }));
TooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;
var Tooltip = ({
  side,
  size,
  open,
  content,
  children,
  disabled,
  defaultOpen,
  onOpenChange,
  triggerProps,
  contentProps,
  providerProps,
  delayDuration = 300,
  ...props
}) => {
  return /* @__PURE__ */ import_react2.default.createElement(
    TooltipPrimitive.TooltipProvider,
    {
      delayDuration,
      ...providerProps
    },
    /* @__PURE__ */ import_react2.default.createElement(
      TooltipPrimitive.Root,
      {
        open: !disabled && open,
        defaultOpen,
        onOpenChange,
        ...props
      },
      /* @__PURE__ */ import_react2.default.createElement(TooltipPrimitive.Trigger, { ...triggerProps }, children),
      /* @__PURE__ */ import_react2.default.createElement(
        TooltipContent,
        {
          size,
          side,
          align: "center",
          ...contentProps,
          style: {
            ...contentProps == null ? void 0 : contentProps.style,
            maxWidth: "var(--radix-tooltip-content-available-width)",
            maxHeight: "var(--radix-tooltip-content-available-height)"
          }
        },
        content
      )
    )
  );
};

// elements/label/Label.tsx
var Label = React3.forwardRef(({ className, hint, hintSide, required, children, ...props }, ref) => /* @__PURE__ */ React3.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-1 hawa-transition-all" }, /* @__PURE__ */ React3.createElement(
  "label",
  {
    ref,
    className: cn(
      "hawa-text-sm hawa-font-medium hawa-leading-none peer-disabled:hawa-cursor-not-allowed peer-disabled:hawa-opacity-70",
      className
    ),
    ...props
  },
  children,
  required && /* @__PURE__ */ React3.createElement("span", { className: "hawa-mx-0.5 hawa-text-red-500" }, "*")
), hint && /* @__PURE__ */ React3.createElement(
  Tooltip,
  {
    content: hint,
    side: hintSide,
    triggerProps: {
      tabIndex: -1,
      onClick: (event) => event.preventDefault()
    }
  },
  /* @__PURE__ */ React3.createElement("div", null, /* @__PURE__ */ React3.createElement(
    "svg",
    {
      xmlns: "http://www.w3.org/2000/svg",
      className: "hawa-h-[14px] hawa-w-[14px] hawa-cursor-help",
      viewBox: "0 0 24 24",
      fill: "none",
      stroke: "currentColor",
      strokeWidth: "2",
      strokeLinecap: "round",
      strokeLinejoin: "round"
    },
    /* @__PURE__ */ React3.createElement("circle", { cx: "12", cy: "12", r: "10" }),
    /* @__PURE__ */ React3.createElement("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
    /* @__PURE__ */ React3.createElement("path", { d: "M12 17h.01" })
  ))
)));
Label.displayName = "Label";

// elements/skeleton/Skeleton.tsx
var import_react3 = __toESM(require("react"));
function Skeleton({
  className,
  content,
  animation = "pulse",
  fade,
  ...props
}) {
  const animationStyles = {
    none: "hawa-rounded hawa-bg-muted",
    pulse: "hawa-animate-pulse hawa-rounded hawa-bg-muted",
    shimmer: "hawa-space-y-5 hawa-rounded hawa-bg-muted  hawa-p-4 hawa-relative  before:hawa-absolute before:hawa-inset-0 before:hawa--translate-x-full before:hawa-animate-[shimmer_2s_infinite] before:hawa-bg-gradient-to-r before:hawa-from-transparent before:hawa-via-gray-300/40 dark:before:hawa-via-white/10 before:hawa-to-transparent hawa-isolate hawa-overflow-hidden  before:hawa-border-t before:hawa-border-rose-100/10"
  };
  const fadeStyle = {
    bottom: "hawa-mask-fade-bottom",
    top: "hawa-mask-fade-top",
    right: "hawa-mask-fade-right",
    left: "hawa-mask-fade-left "
  };
  return /* @__PURE__ */ import_react3.default.createElement(
    "div",
    {
      className: cn(
        animationStyles[animation],
        content && "hawa-flex hawa-flex-col hawa-items-center hawa-justify-center",
        fade && fadeStyle[fade],
        className
      ),
      ...props
    },
    content && content
  );
}

// elements/select/Select.tsx
var Select = ({
  labelProps,
  labelKey = "label",
  ...props
}) => {
  const NoOption = () => {
    var _a, _b;
    return /* @__PURE__ */ import_react4.default.createElement("div", null, (_b = (_a = props.texts) == null ? void 0 : _a.noOptions) != null ? _b : "No Items Found");
  };
  const Control = ({ children, innerProps, innerRef }) => {
    return /* @__PURE__ */ import_react4.default.createElement(
      "div",
      {
        ref: innerRef,
        className: (0, import_clsx2.default)(
          "hawa-flex hawa-w-full hawa-rounded hawa-border hawa-bg-background hawa-p-2 hawa-text-sm hawa-text-gray-900 focus:hawa-border-blue-500 focus:hawa-ring-blue-500 dark:focus:hawa-ring-blue-500"
        ),
        ...innerProps
      },
      children
    );
  };
  const Option = ({ children, innerProps, innerRef }) => {
    return /* @__PURE__ */ import_react4.default.createElement(
      "div",
      {
        ref: innerRef,
        className: cn(
          "hawa-flex hawa-cursor-pointer hawa-select-none hawa-flex-row hawa-items-center hawa-justify-between hawa-rounded-inner hawa-p-1 hawa-px-2 hawa-transition-all hover:hawa-bg-primary hover:hawa-text-primary-foreground"
        ),
        ...innerProps
      },
      children
    );
  };
  const Menu = ({
    cx,
    children,
    getStyles,
    innerProps,
    innerRef,
    ...menuProps
  }) => {
    const menuOpen = menuProps.selectProps.menuIsOpen;
    return /* @__PURE__ */ import_react4.default.createElement(
      "div",
      {
        className: cn(
          "dark:dark-shadow hawa-absolute hawa-z-10 -hawa-mx-1 hawa-mt-1 hawa-flex hawa-flex-col hawa-justify-start hawa-rounded hawa-border hawa-bg-background hawa-shadow-md",
          props.phoneCode ? "hawa-p-1.5" : "hawa-w-full hawa-p-1.5",
          menuOpen && "hawa-animate-in hawa-fade-in-0 hawa-zoom-in-95"
        ),
        ref: innerRef,
        ...innerProps
      },
      children
    );
  };
  let phoneCodeStyles = "hawa-min-w-[65px] hawa-text-right hawa-w-[100px]  hawa-p-0 hawa-rounded-r-none hawa-h-[40px]";
  let selectContainerStyles = "hawa-rounded hawa-block hawa-w-full hawa-border hawa-transition-all hawa-bg-background  hawa-p-0 hawa-px-1 hawa-text-sm";
  let selectPlaceholderStyles = "hawa-text-muted-foreground hawa-cursor-pointer hawa-px-1";
  let selectIndicatorContainerStyles = "hawa-cursor-pointer hawa-text-muted-foreground hawa-absolute hawa-end-0 hawa-top-[50%] hawa-bottom-[50%] ";
  return /* @__PURE__ */ import_react4.default.createElement(
    "div",
    {
      className: cn(
        "hawa-flex hawa-flex-col hawa-gap-2",
        props.width === "fit" ? "hawa-w-fit" : "hawa-w-full"
      )
    },
    props.label && /* @__PURE__ */ import_react4.default.createElement(Label, { ...labelProps }, props.label),
    props.isLoading ? /* @__PURE__ */ import_react4.default.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" }) : !props.isCreatable ? (
      //   TODO: enable keyboard to go to the next item in the list
      /* @__PURE__ */ import_react4.default.createElement(
        import_react_select.default,
        {
          noOptionsMessage: NoOption,
          classNames: {
            control: () => cn(
              props.phoneCode && "hawa-rounded-r-none",
              props.controlClassNames
            ),
            container: () => cn(
              selectContainerStyles,
              props.phoneCode && phoneCodeStyles,
              props.disabled ? "hawa-cursor-not-allowed" : "hawa-cursor-pointer",
              props.isMulti && "hawa-ps-0 "
            ),
            placeholder: () => selectPlaceholderStyles,
            valueContainer: () => "hawa-text-foreground hawa-px-1 ",
            singleValue: () => "hawa-text-foreground",
            indicatorsContainer: () => cn(
              selectIndicatorContainerStyles,
              props.hideIndicator ? "hawa-invisible" : "hawa-px-1"
            )
          },
          unstyled: true,
          autoFocus: false,
          components: props.hideIndicator ? { Option, Menu, IndicatorsContainer: () => null } : {
            Option,
            Menu,
            // Control: (e) => (
            //   <div
            //     className={cn(e.className, "hawa-flex hawa-flex-row")}
            //     {...e}
            //   />
            // ),
            ValueContainer: (e) => /* @__PURE__ */ import_react4.default.createElement(
              "div",
              {
                className: cn(
                  e.className,
                  "hawa-gap-1 hawa-flex hawa-flex-row hawa-flex-wrap hawa-p-1"
                ),
                ...e
              }
            ),
            MultiValueContainer: (e) => /* @__PURE__ */ import_react4.default.createElement(
              "div",
              {
                className: "hawa-rounded hawa-border hawa-p-1 hawa-px-2 hawa-flex hawa-flex-row",
                ...e
              }
            )
          },
          onChange: (newValue, action) => props.onChange(newValue, action),
          options: props.options,
          getOptionLabel: props.getOptionLabel,
          defaultValue: props.defaultValue,
          placeholder: props.placeholder,
          isDisabled: props.disabled,
          isClearable: props.isClearable,
          isMulti: props.isMulti,
          isSearchable: props.isSearchable
        }
      )
    ) : /* @__PURE__ */ import_react4.default.createElement(
      import_creatable.default,
      {
        formatCreateLabel: (inputValue) => {
          var _a, _b;
          return `${(_b = (_a = props.texts) == null ? void 0 : _a.createLabel) != null ? _b : "Create"} "${inputValue}"`;
        },
        classNames: {
          container: () => cn(
            "hawa-rounded",
            props.disabled ? "hawa-cursor-not-allowed" : "hawa-cursor-pointer"
          ),
          placeholder: () => "hawa-px-2 hawa-text-muted-foreground",
          input: () => "hawa-text-primary hawa-px-2",
          valueContainer: () => "hawa-text-white dark:hawa-text-muted-foreground",
          singleValue: () => "hawa-text-black dark:hawa-text-white hawa-px-2",
          indicatorsContainer: () => " hawa-px-2 hawa-cursor-pointer hawa-text-muted-foreground"
        },
        unstyled: true,
        options: props.options,
        isClearable: props.isClearable,
        isMulti: props.isMulti,
        isSearchable: props.isSearchable,
        placeholder: props.placeholder,
        onCreateOption: props.handleCreateOption,
        onChange: (newValue, action) => props.onChange(newValue, action),
        components: { Control, Option, Menu },
        onInputChange: (newValue, action) => props.onInputChange(newValue, action)
      }
    ),
    !props.hideHelperText && /* @__PURE__ */ import_react4.default.createElement(HelperText, { helperText: props.helperText })
  );
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Select
});
//# sourceMappingURL=index.js.map