@sikka/hawa 0.34.8-next → 0.35.0-next

package/dist/chunk-HHC34DXN.mjs

@@ -0,0 +1,320 @@
+"use client";
+import {
+  Label,
+  cn
+} from "./chunk-DABX3SU6.mjs";
+
+// elements/popover/Popover.tsx
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+var PopoverContent = React.forwardRef(
+  ({ className, align = "center", sideOffset = 4, container, ...props }, ref) => /* @__PURE__ */ React.createElement(PopoverPrimitive.Portal, { container }, /* @__PURE__ */ React.createElement(
+    PopoverPrimitive.Content,
+    {
+      ref,
+      align,
+      sideOffset,
+      className: cn(
+        "dark:dark-shadow hawa-z-50 hawa-rounded hawa-border hawa-bg-popover hawa-text-popover-foreground hawa-shadow-md hawa-outline-none 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-[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",
+        className
+      ),
+      ...props
+    }
+  ))
+);
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+var Popover = ({
+  trigger,
+  children,
+  className,
+  align = "center",
+  side,
+  sideOffset = 4,
+  open,
+  width = "default",
+  disableTrigger,
+  contentProps,
+  triggerProps,
+  ...props
+}) => {
+  let widthStyles = {
+    trigger: "var(--radix-popover-trigger-width)",
+    default: "auto"
+  };
+  return /* @__PURE__ */ React.createElement(PopoverPrimitive.Root, { open, ...props }, /* @__PURE__ */ React.createElement(
+    PopoverPrimitive.Trigger,
+    {
+      className: "hawa-w-full",
+      disabled: disableTrigger,
+      ...triggerProps
+    },
+    trigger
+  ), /* @__PURE__ */ React.createElement(
+    PopoverContent,
+    {
+      side,
+      className,
+      align,
+      sideOffset,
+      style: {
+        width: widthStyles[width],
+        maxWidth: "var(--radix-popover-content-available-width)",
+        maxHeight: "var(--radix-popover-content-available-height)"
+      },
+      ...contentProps
+    },
+    children
+  ));
+};
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverRoot = PopoverPrimitive.Root;
+
+// elements/radio/Radio.tsx
+import React2, { useState, useRef, useEffect, forwardRef as forwardRef2 } from "react";
+var Radio = forwardRef2(
+  ({
+    design = "default",
+    width = "default",
+    size = "default",
+    orientation = "horizontal",
+    name,
+    labelProps,
+    tabsContainerClassName,
+    forceHideHelperText = false,
+    onChange,
+    ...props
+  }, ref) => {
+    var _a, _b, _c;
+    let activeTabStyle = "hawa-inline-block hawa-w-full hawa-text-primary-foreground hawa-bg-primary  hawa-active dark:hawa-bg-primary";
+    let inactiveTabStyle = `hawa-inline-block hawa-w-full hawa-transition-all  hawa-bg-primary-foreground dark:hover:hawa-text-white
+    ${props.disabled ? "" : "hover:hawa-bg-muted"}`;
+    let orientationStyle = {
+      horizontal: "hawa-flex hawa-flex-row",
+      vertical: "hawa-flex hawa-flex-col"
+    };
+    let tabSizeStyle = {
+      default: "hawa-py-2 hawa-px-4 hawa-text-sm",
+      lg: "hawa-py-2 hawa-px-4",
+      sm: "hawa-p-1.5 hawa-text-xs",
+      xs: "hawa-p-1 hawa-text-[10px]"
+    };
+    let widthStyle = {
+      none: "",
+      default: "hawa-max-w-fit",
+      full: "hawa-w-full"
+    };
+    const [parentDirection, setParentDirection] = React2.useState(
+      null
+    );
+    const [selectedOption, setSelectedOption] = useState(
+      props.defaultValue || props.value
+    );
+    const [openTooltip, setOpenTooltip] = useState(null);
+    const parentRef = useRef(null);
+    useEffect(() => {
+      var _a2;
+      const parentNode = (_a2 = parentRef.current) == null ? void 0 : _a2.parentNode;
+      if (parentNode) {
+        const dir = window.getComputedStyle(parentNode).direction;
+        setParentDirection(dir);
+      }
+    });
+    const handleChange = (opt) => {
+      setSelectedOption(opt.value);
+      if (onChange) {
+        onChange(opt.value);
+      } else {
+        console.log("onChange was not provided");
+      }
+    };
+    const radio_option_tabs_styling = [
+      "hawa-w-full hawa-last hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-gap-2 ",
+      !props.disabled && "hawa-cursor-pointer",
+      orientation === "horizontal" && parentDirection === "ltr" && "hawa-rounded-none first:hawa-rounded-l last:hawa-rounded-r",
+      orientation === "horizontal" && parentDirection === "rtl" && "hawa-rounded-none first:hawa-rounded-r last:hawa-rounded-l",
+      orientation === "vertical" && "hawa-rounded-none first:hawa-rounded-t last:hawa-rounded-b",
+      tabSizeStyle[size]
+    ];
+    switch (design) {
+      case "tabs":
+        return /* @__PURE__ */ React2.createElement("div", { className: "hawa-gap-2 hawa-flex hawa-flex-col" }, props.label && /* @__PURE__ */ React2.createElement(Label, { ...labelProps }, props.label), /* @__PURE__ */ React2.createElement(
+          "ul",
+          {
+            ref: parentRef,
+            className: cn(
+              props.options && ((_a = props.options) == null ? void 0 : _a.length) > 2 ? "hawa-flex-wrap xs:hawa-max-w-full xs:hawa-flex-nowrap" : "",
+              "hawa-select-none hawa-whitespace-nowrap hawa-rounded hawa-border hawa-text-center hawa-font-medium hawa-h-[40px]",
+              orientationStyle[orientation],
+              widthStyle[width],
+              tabsContainerClassName
+            )
+          },
+          (_b = props.options) == null ? void 0 : _b.map((opt, o) => {
+            return opt.tooltip ? /* @__PURE__ */ React2.createElement(
+              PopoverRoot,
+              {
+                key: o,
+                open: o === openTooltip,
+                onOpenChange: (bool) => setOpenTooltip(bool ? o : null)
+              },
+              /* @__PURE__ */ React2.createElement(
+                PopoverTrigger,
+                {
+                  onMouseEnter: () => setOpenTooltip(o),
+                  onMouseLeave: () => setOpenTooltip(null),
+                  asChild: true
+                },
+                /* @__PURE__ */ React2.createElement(
+                  "li",
+                  {
+                    "aria-current": "page",
+                    onClick: () => {
+                      if (props.disabled || opt.disabled)
+                        return;
+                      handleChange(opt);
+                    },
+                    className: cn(
+                      ...radio_option_tabs_styling,
+                      selectedOption === opt.value ? activeTabStyle : inactiveTabStyle
+                    )
+                  },
+                  opt.icon && opt.icon,
+                  opt.label
+                )
+              ),
+              /* @__PURE__ */ React2.createElement(PopoverContent, { ...opt.tooltipContentProps }, opt.tooltip)
+            ) : /* @__PURE__ */ React2.createElement(
+              "li",
+              {
+                key: o,
+                "aria-current": "page",
+                onClick: () => {
+                  if (props.disabled || opt.disabled)
+                    return;
+                  handleChange(opt);
+                },
+                className: cn(
+                  ...radio_option_tabs_styling,
+                  selectedOption === opt.value ? activeTabStyle : inactiveTabStyle
+                )
+              },
+              opt.icon && opt.icon,
+              opt.label
+            );
+          })
+        ), !forceHideHelperText && /* @__PURE__ */ React2.createElement(
+          "p",
+          {
+            className: cn(
+              "hawa-my-0 hawa-text-start hawa-text-xs hawa-text-helper-color hawa-transition-all",
+              props.helperText ? "hawa-h-4 hawa-opacity-100" : "hawa-h-0 hawa-opacity-0"
+            )
+          },
+          props.helperText
+        ));
+      case "bordered":
+        return /* @__PURE__ */ React2.createElement("div", { className: cn(orientationStyle[orientation], "hawa-gap-4") }, props.options && props.options.map((opt, i) => /* @__PURE__ */ React2.createElement("div", { key: i, className: "hawa-w-full hawa-rounded hawa-border" }, /* @__PURE__ */ React2.createElement(
+          "div",
+          {
+            className: cn(
+              "radio-item radio-item-bordered hawa-flex hawa-items-center hawa-transition-all",
+              props.direction === "rtl" ? "margin-left right-19px" : "margin-right left-23px"
+            ),
+            key: i + 1
+          },
+          /* @__PURE__ */ React2.createElement(
+            "input",
+            {
+              disabled: opt.disabled,
+              id: opt.value.toString(),
+              type: "radio",
+              value: opt.value,
+              name,
+              onChange: () => handleChange(opt)
+            }
+          ),
+          /* @__PURE__ */ React2.createElement(
+            "label",
+            {
+              htmlFor: opt.value.toString(),
+              className: cn(
+                "hawa-ml-2 hawa-w-full hawa-select-none hawa-p-4 hawa-pl-3 hawa-text-sm hawa-font-medium hawa-text-black dark:hawa-text-white",
+                opt.disabled ? "hawa-opacity-50" : "hawa-cursor-pointer hawa-text-gray-900"
+              )
+            },
+            opt.label
+          )
+        ))));
+      case "cards":
+        return /* @__PURE__ */ React2.createElement("ul", { className: cn(orientationStyle[orientation], "hawa-gap-4") }, (_c = props.options) == null ? void 0 : _c.map((opt, o) => /* @__PURE__ */ React2.createElement("li", { key: o, onClick: () => handleChange(opt) }, /* @__PURE__ */ React2.createElement(
+          "input",
+          {
+            type: "radio",
+            id: opt.value.toString(),
+            name,
+            value: opt.value.toString(),
+            className: "hawa-peer hawa-hidden",
+            required: true,
+            disabled: opt.disabled
+          }
+        ), /* @__PURE__ */ React2.createElement(
+          "label",
+          {
+            htmlFor: opt.value.toString(),
+            className: cn(
+              "hawa-inline-flex hawa-h-full hawa-w-full hawa-transition-all  hawa-items-center hawa-justify-between hawa-rounded-lg hawa-border hawa-border-foreground/10 hawa-bg-background hawa-p-5 hawa-text-gray-500  peer-checked:hawa-border-primary peer-checked:hawa-text-primary dark:hawa-border-foreground/10 dark:hawa-bg-foreground/5 dark:hawa-text-gray-400  dark:peer-checked:hawa-text-primary",
+              opt.disabled ? "hawa-opacity-50" : "hawa-cursor-pointer hover:hawa-bg-foreground/10 hover:hawa-text-gray-600 dark:hover:hawa-bg-foreground/20 dark:hover:hawa-text-gray-300"
+            )
+          },
+          /* @__PURE__ */ React2.createElement("div", { className: "hawa-block  hawa-h-full hawa-w-full" }, /* @__PURE__ */ React2.createElement("div", { className: "hawa-w-full hawa-text-lg hawa-font-semibold" }, opt.label), /* @__PURE__ */ React2.createElement("div", { className: "hawa-w-full" }, opt.sublabel))
+        ))));
+      default:
+        return /* @__PURE__ */ React2.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ React2.createElement(Label, { ...labelProps }, props.label), /* @__PURE__ */ React2.createElement("div", { className: cn(orientationStyle[orientation], "hawa-gap-2") }, props.options && props.options.map((opt, i) => /* @__PURE__ */ React2.createElement(
+          "div",
+          {
+            className: cn(
+              "radio-item radio-item-default hawa-flex hawa-items-center hawa-transition-all",
+              props.direction === "rtl" ? "margin-left right-3px" : "margin-right left-3px"
+            ),
+            key: i + 1
+          },
+          /* @__PURE__ */ React2.createElement(
+            "input",
+            {
+              disabled: opt.disabled,
+              id: opt.value.toString(),
+              type: "radio",
+              value: opt.value,
+              name,
+              onChange: () => handleChange(opt)
+            }
+          ),
+          /* @__PURE__ */ React2.createElement(
+            "label",
+            {
+              htmlFor: opt.value.toString(),
+              className: cn(
+                "hawa-text-sm hawa-font-medium  dark:hawa-text-white",
+                opt.disabled ? "hawa-text-gray-400" : "hawa-cursor-pointer hawa-text-gray-900"
+              )
+            },
+            opt.label
+          )
+        ))), /* @__PURE__ */ React2.createElement(
+          "p",
+          {
+            className: cn(
+              "hawa-my-0 hawa-text-start hawa-text-xs hawa-text-helper-color hawa-transition-all",
+              props.helperText ? "hawa-h-4 hawa-opacity-100" : "hawa-h-0 hawa-opacity-0"
+            )
+          },
+          props.helperText
+        ));
+    }
+  }
+);
+
+export {
+  Popover,
+  Radio
+};