@sikka/hawa
Version:
Modern UI Kit made with Tailwind
1,285 lines (1,264 loc) • 73.2 kB
JavaScript
"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);
// blocks/feedback/index.ts
var feedback_exports = {};
__export(feedback_exports, {
FeedbackEmoji: () => FeedbackEmoji,
FeedbackForm: () => FeedbackForm,
FeedbackRating: () => FeedbackRating,
UserReferralSource: () => UserReferralSource
});
module.exports = __toCommonJS(feedback_exports);
// blocks/feedback/UserReferralSource.tsx
var import_react6 = __toESM(require("react"));
var import_react_hook_form = require("react-hook-form");
var import_zod = require("@hookform/resolvers/zod");
// 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));
}
// blocks/feedback/UserReferralSource.tsx
var z = __toESM(require("zod"));
// elements/button/Button.tsx
var React5 = __toESM(require("react"));
var import_class_variance_authority = require("class-variance-authority");
// 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/loading/Loading.tsx
var import_react3 = __toESM(require("react"));
var Loading = ({
design = "spinner",
size = "normal",
themeMode = "light",
classNames,
color,
...props
}) => {
let sizeStyles = {
button: "hawa-h-4 hawa-w-4",
xs: "hawa-h-1 hawa-w-1",
sm: "hawa-h-6 hawa-w-6",
normal: "hawa-h-8 hawa-w-8",
lg: "hawa-h-14 hawa-w-14",
xl: "hawa-h-24 hawa-w-24"
};
let progressSizes = {
button: "hawa-h-1",
xs: "hawa-h-1 hawa-w-1",
sm: "hawa-h-6 hawa-w-6",
normal: "",
lg: "hawa-h-6",
xl: "hawa-h-10 hawa-w-64"
};
let animationStyles = {
pulse: "hawa-animate-in hawa-fade-in hawa-duration-1000",
bounce: "hawa-animate-bounce"
};
switch (design.split("-")[0]) {
case "dots":
return /* @__PURE__ */ import_react3.default.createElement(
"div",
{
className: cn(
"hawa-flex hawa-flex-row hawa-gap-2",
classNames == null ? void 0 : classNames.container
)
},
/* @__PURE__ */ import_react3.default.createElement(
"div",
{
className: cn(
"hawa-animate-bounce hawa-rounded-full hawa-delay-100 hawa-repeat-infinite",
size === "button" ? "hawa-h-2 hawa-w-2" : sizeStyles[size],
animationStyles[design.split("-")[1]],
color ? color : "hawa-bg-primary"
)
}
),
/* @__PURE__ */ import_react3.default.createElement(
"div",
{
className: cn(
"hawa-animate-bounce hawa-rounded-full hawa-delay-200 hawa-repeat-infinite",
size === "button" ? "hawa-h-2 hawa-w-2" : sizeStyles[size],
animationStyles[design.split("-")[1]],
color ? color : "hawa-bg-primary"
)
}
),
/* @__PURE__ */ import_react3.default.createElement(
"div",
{
className: cn(
"hawa-animate-bounce hawa-rounded-full hawa-delay-300 hawa-repeat-infinite",
size === "button" ? "hawa-h-2 hawa-w-2" : sizeStyles[size],
animationStyles[design.split("-")[1]],
color ? color : "hawa-bg-primary"
)
}
)
);
case "square":
return /* @__PURE__ */ import_react3.default.createElement(
"svg",
{
className: cn(
"squircle-container",
sizeStyles[size],
classNames == null ? void 0 : classNames.container
),
viewBox: "0 0 35 35",
height: "35",
width: "35"
},
/* @__PURE__ */ import_react3.default.createElement(
"rect",
{
className: "squircle-track",
x: "2.5",
y: "2.5",
fill: "none",
strokeWidth: "5px",
width: "32.5",
height: "32.5"
}
),
/* @__PURE__ */ import_react3.default.createElement(
"rect",
{
className: "square-car",
x: "2.5",
y: "2.5",
fill: "none",
strokeWidth: "5px",
width: "32.5",
height: "32.5",
pathLength: "100"
}
)
);
case "squircle":
return /* @__PURE__ */ import_react3.default.createElement(
"svg",
{
x: "0px",
y: "0px",
viewBox: "0 0 37 37",
height: "37",
width: "37",
preserveAspectRatio: "xMidYMid meet",
className: cn(
"squircle-container",
sizeStyles[size],
classNames == null ? void 0 : classNames.container
)
},
/* @__PURE__ */ import_react3.default.createElement(
"path",
{
className: cn("squircle-track", classNames == null ? void 0 : classNames.track),
fill: "none",
strokeWidth: "5",
pathLength: "100",
d: "M0.37 18.5 C0.37 5.772 5.772 0.37 18.5 0.37 S36.63 5.772 36.63 18.5 S31.228 36.63 18.5 36.63 S0.37 31.228 0.37 18.5"
}
),
/* @__PURE__ */ import_react3.default.createElement(
"path",
{
className: cn("squircle-car", classNames == null ? void 0 : classNames.car),
fill: "none",
strokeWidth: "5",
pathLength: "100",
d: "M0.37 18.5 C0.37 5.772 5.772 0.37 18.5 0.37 S36.63 5.772 36.63 18.5 S31.228 36.63 18.5 36.63 S0.37 31.228 0.37 18.5"
}
)
);
case "progress":
return /* @__PURE__ */ import_react3.default.createElement(
"div",
{
className: cn(
"progress-loading after:hawa-rounded hawa-rounded",
progressSizes[size],
classNames == null ? void 0 : classNames.container
)
}
);
case "orbit":
return /* @__PURE__ */ import_react3.default.createElement("div", { className: cn("orbit-container", classNames == null ? void 0 : classNames.container) });
default:
return /* @__PURE__ */ import_react3.default.createElement(
"svg",
{
viewBox: "0 0 40 40",
height: "40",
width: "40",
className: cn(
"circle-container",
sizeStyles[size],
classNames == null ? void 0 : classNames.container
)
},
/* @__PURE__ */ import_react3.default.createElement(
"circle",
{
className: cn(
"circle-track",
{
"hawa-stroke-primary-foreground": themeMode === "dark",
"hawa-stroke-primary": themeMode === "light"
},
classNames == null ? void 0 : classNames.track
),
cx: "20",
cy: "20",
r: "17.5",
fill: "none",
strokeWidth: "5px",
pathLength: "100"
}
),
/* @__PURE__ */ import_react3.default.createElement(
"circle",
{
className: cn(
"circle-car",
{
"hawa-stroke-primary-foreground": themeMode === "dark",
"hawa-stroke-primary": themeMode === "light"
},
classNames == null ? void 0 : classNames.car
),
cx: "20",
cy: "20",
r: "17.5",
fill: "none",
pathLength: "100",
strokeWidth: "5px"
}
)
);
}
};
// elements/button/Button.tsx
var buttonVariants = (0, import_class_variance_authority.cva)(
"hawa-inline-flex hawa-items-center hawa-select-none hawa-rounded-md hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-colors focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50",
{
variants: {
variant: {
default: "hawa-bg-primary hawa-text-primary-foreground hover:hawa-bg-primary/90",
light: "hawa-bg-primary/20 hawa-text-primary hover:hawa-bg-primary/40",
destructive: "hawa-bg-destructive hawa-text-destructive-foreground hover:hawa-bg-destructive/90",
outline: "hawa-border hawa-border-input hawa-bg-transparent hover:hawa-bg-accent hover:hawa-text-accent-foreground",
secondary: "hawa-bg-secondary hawa-text-secondary-foreground hover:hawa-bg-secondary/80",
ghost: "hover:hawa-bg-accent hover:hawa-text-accent-foreground",
link: "hawa-text-primary hawa-underline-offset-4 hover:hawa-underline",
combobox: "hawa-bg-background hawa-border",
neoBrutalism: "neo-brutalism"
// "hawa-cursor-pointer hawa-transition-all hawa-uppercase hawa-font-mono dark:hawa-bg-black hawa-font-bold hawa-py-2 hawa-px-4 hawa-rounded hawa-border-2 hawa-border-primary hawa-shadow-color-primary hawa-transition-[hawa-transform_50ms, hawa-box-shadow_50ms] active:hawa-translate-x-0.5 active:hawa-translate-y-0.5 active:hawa-shadow-color-primary-active shadow-color-primary active:shadow-color-primary-active",
},
size: {
default: "hawa-h-10 hawa-px-4 hawa-py-2",
heightless: "hawa-px-4 hawa-py-4",
xs: "hawa-h-fit hawa-min-h-[25px] hawa-py-1 hawa-text-[10px] hawa-px-2 ",
sm: "hawa-h-9 hawa-text-[11px] hawa-rounded-md hawa-px-3",
lg: "hawa-h-11 hawa-rounded-md hawa-px-8",
xl: "hawa-h-14 hawa-rounded-md hawa-px-10",
icon: "hawa-h-10 hawa-w-10",
smallIcon: "hawa-h-7 hawa-w-7"
}
},
defaultVariants: { variant: "default", size: "default" }
}
);
var Button = React5.forwardRef(
({
className,
label,
variant,
size,
asChild = false,
centered = true,
isLoading,
children,
labelProps,
showHelperText = false,
asInput = false,
...props
}, ref) => {
const Comp = "button";
const loadingColor = variant === "outline" || variant === "ghost" || variant === "neoBrutalism" ? "hawa-bg-primary" : "hawa-bg-primary-foreground";
if (asInput) {
return /* @__PURE__ */ React5.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, label && /* @__PURE__ */ React5.createElement(Label, { ...labelProps }, label), /* @__PURE__ */ React5.createElement(
Comp,
{
className: cn(
buttonVariants({ variant, size, className }),
centered && "hawa-justify-center"
),
ref,
...props
},
isLoading ? /* @__PURE__ */ React5.createElement(
Loading,
{
design: size === "icon" || size === "smallIcon" ? "spinner" : "dots-pulse",
themeMode: variant === "outline" ? "light" : "dark",
color: loadingColor,
size: size === "sm" || size === "xs" ? "xs" : "button"
}
) : children
), showHelperText && /* @__PURE__ */ React5.createElement(HelperText, { helperText: props.helperText }));
} else {
return /* @__PURE__ */ React5.createElement(
Comp,
{
className: cn(
buttonVariants({ variant, size, className }),
centered && "hawa-justify-center"
),
ref,
...props
},
isLoading ? /* @__PURE__ */ React5.createElement(
Loading,
{
design: size === "icon" || size === "smallIcon" ? "spinner" : "dots-pulse",
themeMode: variant === "outline" ? "light" : "dark",
color: loadingColor,
size: size === "sm" || size === "xs" ? "xs" : "button"
}
) : children
);
}
}
);
Button.displayName = "Button";
// elements/card/Card.tsx
var React6 = __toESM(require("react"));
var Card = React6.forwardRef(
({
className,
variant = "default",
clickable = false,
asContainer = false,
...props
}, ref) => {
let variantStyles = {
default: cn(
"hawa-rounded-lg hawa-border hawa-bg-card hawa-text-card-foreground hawa-shadow-sm",
clickable && "hawa-cursor-pointer hawa-transition-all hover:hawa-drop-shadow-md dark:hover:dark-shadow"
),
neoBrutalism: cn(
"neo-brutalism",
// "hawa-transition-all hawa-uppercase hawa-font-mono dark:hawa-bg-black hawa-font-bold hawa-py-2 hawa-px-4 hawa-rounded hawa-border-2 hawa-border-primary hawa-shadow-color-primary hawa-transition-[hawa-transform_50ms, hawa-box-shadow_50ms] transition-all uppercase font-mono dark:bg-black font-bold py-2 px-4 rounded border-2 border-primary shadow-color-primary transition-[transform_50ms, box-shadow_50ms]",
clickable && "hawa-cursor-pointer active:hawa-translate-x-0.5 active:hawa-translate-y-0.5 active:hawa-shadow-color-primary-active active:translate-x-0.5 active:translate-y-0.5 active:shadow-color-primary-active"
)
};
return /* @__PURE__ */ React6.createElement(
"div",
{
ref,
className: cn(className, !asContainer && variantStyles[variant]),
...props
}
);
}
);
var CardHeader = React6.forwardRef(
({ className, ...props }, ref) => /* @__PURE__ */ React6.createElement("div", { className: "hawa-flex hawa-flex-row hawa-justify-between" }, /* @__PURE__ */ React6.createElement(
"div",
{
ref,
className: cn(
"hawa-flex hawa-flex-col hawa-space-y-1.5 hawa-p-6",
className
),
...props
}
), props.actions && /* @__PURE__ */ React6.createElement("div", { className: "hawa-p-6" }, props.actions))
);
var CardTitle = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React6.createElement(
"h3",
{
ref,
className: cn("hawa-text-2xl hawa-font-semibold", className),
...props
}
));
var CardDescription = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React6.createElement(
"p",
{
ref,
className: cn("hawa-text-sm hawa-text-muted-foreground", className),
...props
}
));
var CardContent = React6.forwardRef(
({ headless, noPadding, className, ...props }, ref) => /* @__PURE__ */ React6.createElement(
"div",
{
ref,
className: cn(
noPadding ? "hawa-p-0" : "hawa-p-6",
headless ? "hawa-pt-6" : "hawa-pt-0",
className
),
...props
}
)
);
var CardFooter = React6.forwardRef(({ className, noPadding, ...props }, ref) => /* @__PURE__ */ React6.createElement(
"div",
{
ref,
className: cn(
noPadding ? "hawa-p-0" : "hawa-p-6",
"hawa-flex hawa-items-center hawa-pt-0",
className
),
...props
}
));
CardDescription.displayName = "CardDescription";
CardContent.displayName = "CardContent";
CardHeader.displayName = "CardHeader";
CardFooter.displayName = "CardFooter";
CardTitle.displayName = "CardTitle";
Card.displayName = "Card";
// elements/radio/Radio.tsx
var import_react4 = __toESM(require("react"));
// elements/popover/Popover.tsx
var React7 = __toESM(require("react"));
var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"));
var PopoverContent = React7.forwardRef(
({ className, align = "center", sideOffset = 4, container, ...props }, ref) => /* @__PURE__ */ React7.createElement(PopoverPrimitive.Portal, { container }, /* @__PURE__ */ React7.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__ */ React7.createElement(PopoverPrimitive.Root, { open, ...props }, /* @__PURE__ */ React7.createElement(
PopoverPrimitive.Trigger,
{
className: "hawa-w-full",
disabled: disableTrigger,
...triggerProps
},
trigger
), /* @__PURE__ */ React7.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
var Radio = (0, import_react4.forwardRef)(
({
design = "default",
width = "default",
size = "default",
orientation = "horizontal",
name,
labelProps,
tabsContainerClassName,
forceHideHelperText = false,
onChange,
containerClassNames,
...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] = import_react4.default.useState(
null
);
const [selectedOption, setSelectedOption] = (0, import_react4.useState)(
props.defaultValue || props.value
);
const [openTooltip, setOpenTooltip] = (0, import_react4.useState)(null);
const parentRef = (0, import_react4.useRef)(null);
(0, import_react4.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__ */ import_react4.default.createElement(
"div",
{
className: cn(
"hawa-gap-2 hawa-flex hawa-flex-col",
containerClassNames == null ? void 0 : containerClassNames.tabs
)
},
props.label && /* @__PURE__ */ import_react4.default.createElement(Label, { ...labelProps }, props.label),
/* @__PURE__ */ import_react4.default.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__ */ import_react4.default.createElement(
PopoverRoot,
{
key: o,
open: o === openTooltip,
onOpenChange: (bool) => setOpenTooltip(bool ? o : null)
},
/* @__PURE__ */ import_react4.default.createElement(
PopoverTrigger,
{
onMouseEnter: () => setOpenTooltip(o),
onMouseLeave: () => setOpenTooltip(null),
asChild: true
},
/* @__PURE__ */ import_react4.default.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__ */ import_react4.default.createElement(PopoverContent, { ...opt.tooltipContentProps }, opt.tooltip)
) : /* @__PURE__ */ import_react4.default.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__ */ import_react4.default.createElement(HelperText, { helperText: props.helperText })
);
case "bordered":
return /* @__PURE__ */ import_react4.default.createElement(
"div",
{
className: cn(
orientationStyle[orientation],
"hawa-gap-4",
containerClassNames == null ? void 0 : containerClassNames.bordered
)
},
props.options && props.options.map((opt, i) => /* @__PURE__ */ import_react4.default.createElement("div", { key: i, className: "hawa-w-full hawa-rounded hawa-border" }, /* @__PURE__ */ import_react4.default.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__ */ import_react4.default.createElement(
"input",
{
disabled: opt.disabled,
id: opt.value.toString(),
type: "radio",
value: opt.value,
name,
onChange: () => handleChange(opt)
}
),
/* @__PURE__ */ import_react4.default.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__ */ import_react4.default.createElement(
"ul",
{
className: cn(
orientationStyle[orientation],
"hawa-gap-4",
containerClassNames == null ? void 0 : containerClassNames.cards
)
},
(_c = props.options) == null ? void 0 : _c.map((opt, o) => /* @__PURE__ */ import_react4.default.createElement("li", { key: o, onClick: () => handleChange(opt) }, /* @__PURE__ */ import_react4.default.createElement(
"input",
{
type: "radio",
id: opt.value.toString(),
name,
value: opt.value.toString(),
className: "hawa-peer hawa-hidden",
required: true,
disabled: opt.disabled
}
), /* @__PURE__ */ import_react4.default.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__ */ import_react4.default.createElement("div", { className: "hawa-block hawa-h-full hawa-w-full" }, /* @__PURE__ */ import_react4.default.createElement("div", { className: "hawa-w-full hawa-text-lg hawa-font-semibold" }, opt.label), /* @__PURE__ */ import_react4.default.createElement("div", { className: "hawa-w-full" }, opt.sublabel))
)))
);
default:
return /* @__PURE__ */ import_react4.default.createElement(
"div",
{
className: cn(
"hawa-flex hawa-flex-col hawa-gap-2",
containerClassNames == null ? void 0 : containerClassNames.default
)
},
props.label && /* @__PURE__ */ import_react4.default.createElement(Label, { ...labelProps }, props.label),
/* @__PURE__ */ import_react4.default.createElement("div", { className: cn(orientationStyle[orientation], "hawa-gap-2") }, props.options && props.options.map((opt, i) => /* @__PURE__ */ import_react4.default.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__ */ import_react4.default.createElement(
"input",
{
disabled: opt.disabled,
id: opt.value.toString(),
type: "radio",
value: opt.value,
name,
onChange: () => handleChange(opt)
}
),
/* @__PURE__ */ import_react4.default.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__ */ import_react4.default.createElement(HelperText, { helperText: props.helperText })
);
}
}
);
// elements/textarea/Textarea.tsx
var React10 = __toESM(require("react"));
// elements/skeleton/Skeleton.tsx
var import_react5 = __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_react5.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/textarea/Textarea.tsx
var Textarea = React10.forwardRef(
({
className,
classNames,
labelProps,
showCount,
forceHideHelperText,
textareaProps,
countPosition = "bottom",
isLoading,
...props
}, ref) => {
return /* @__PURE__ */ React10.createElement(
"div",
{
className: cn(
"textarea-main hawa-relative hawa-flex hawa-h-full hawa-w-full hawa-flex-col",
!forceHideHelperText && "hawa-gap-2",
className
)
},
/* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-flex-row hawa-justify-between" }, props.label && /* @__PURE__ */ React10.createElement(Label, { ...labelProps }, props.label), showCount && countPosition === "top" && /* @__PURE__ */ React10.createElement(
"div",
{
className: "hawa-text-start hawa-text-xs hawa-transition-all hawa-leading-none"
},
(textareaProps == null ? void 0 : textareaProps.value) ? String(textareaProps == null ? void 0 : textareaProps.value).length : 0,
"/",
textareaProps == null ? void 0 : textareaProps.maxLength
)),
isLoading ? /* @__PURE__ */ React10.createElement(Skeleton, { style: { height: 40 } }) : /* @__PURE__ */ React10.createElement(
"textarea",
{
...textareaProps,
className: cn(
"hawa-flex hawa-min-h-[40px] hawa-h-[40px] hawa-w-full hawa-rounded-md hawa-border hawa-border-input hawa-bg-background hawa-px-3 hawa-py-2 hawa-text-sm hawa-ring-offset-background placeholder:hawa-text-gray-400 placeholder:hawa-text-muted-foreground focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-0 disabled:hawa-cursor-not-allowed disabled:hawa-opacity-50",
classNames == null ? void 0 : classNames.textarea
),
ref
}
),
/* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-flex-row hawa-justify-between" }, !forceHideHelperText && /* @__PURE__ */ React10.createElement(HelperText, { helperText: props.helperText }), showCount && countPosition === "bottom" && /* @__PURE__ */ React10.createElement("div", { className: "hawa-text-start hawa-text-xs hawa-transition-all" }, (textareaProps == null ? void 0 : textareaProps.value) ? String(textareaProps == null ? void 0 : textareaProps.value).length : 0, "/", textareaProps == null ? void 0 : textareaProps.maxLength))
);
}
);
Textarea.displayName = "Textarea";
// blocks/feedback/UserReferralSource.tsx
var UserReferralSource = ({
position = "bottom-right",
options = [],
...props
}) => {
var _a, _b;
const [closed, setClosed] = (0, import_react6.useState)(false);
const popUpRef = (0, import_react6.useRef)(null);
const formSchema = z.object({
source: z.string({ required_error: (_a = props.texts) == null ? void 0 : _a.pleaseSelectOption }),
feedback: z.string().optional()
});
const { handleSubmit, control, formState, watch } = (0, import_react_hook_form.useForm)({
resolver: (0, import_zod.zodResolver)(formSchema)
});
const selectedSource = watch("source");
const boxPosition = {
"bottom-right": "hawa-right-4",
"bottom-left": "hawa-left-4"
};
const optionsWithOther = [
...options,
{
value: "other",
label: "Other"
}
];
return /* @__PURE__ */ import_react6.default.createElement(
"div",
{
className: cn(
"hawa-transition-all",
closed ? "hawa-opacity-0" : "hawa-opacity-100"
),
ref: popUpRef
},
/* @__PURE__ */ import_react6.default.createElement(
Card,
{
className: cn(
"hawa-fixed hawa-bottom-4 hawa-p-0 ",
boxPosition[position]
),
dir: props.direction
},
/* @__PURE__ */ import_react6.default.createElement(
"button",
{
type: "button",
className: cn(
props.direction === "rtl" ? "hawa-left-2" : "hawa-right-2",
"hawa-absolute hawa-top-2 hawa-inline-flex hawa-h-8 hawa-w-8 hawa-rounded hawa-p-1.5 hawa-text-gray-400 hawa-transition-all hover:hawa-bg-gray-100 hover:hawa-text-gray-900 focus:hawa-ring-2 focus:hawa-ring-gray-300 dark:hawa-bg-gray-800 dark:hawa-text-gray-500 dark:hover:hawa-bg-gray-700 dark:hover:hawa-text-white"
),
"data-dismiss-target": "#toast-default",
"aria-label": "Close",
onClick: () => {
setClosed(true);
setTimeout(() => {
if (popUpRef == null ? void 0 : popUpRef.current) {
popUpRef == null ? void 0 : popUpRef.current.removeChild(popUpRef == null ? void 0 : popUpRef.current.children[0]);
}
}, 200);
}
},
/* @__PURE__ */ import_react6.default.createElement(
"svg",
{
"aria-hidden": "true",
className: "hawa-h-5 hawa-w-5",
fill: "currentColor",
viewBox: "0 0 20 20"
},
/* @__PURE__ */ import_react6.default.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__ */ import_react6.default.createElement(CardContent, { headless: true }, /* @__PURE__ */ import_react6.default.createElement(
"form",
{
noValidate: true,
onSubmit: handleSubmit((e) => {
if (props.onSubmitForm) {
props.onSubmitForm(e);
} else {
console.log("onSubmitForm was not provided");
}
})
},
/* @__PURE__ */ import_react6.default.createElement(
"div",
{
className: cn(
"hawa-flex hawa-flex-col hawa-gap-4 hawa-transition-all",
closed ? "hawa-opacity-0" : "hawa-opacity-100"
)
},
/* @__PURE__ */ import_react6.default.createElement("div", { className: "hawa-mt-4 hawa-font-bold" }, props.question),
/* @__PURE__ */ import_react6.default.createElement("div", { className: "hawa-flex hawa-w-full hawa-flex-row hawa-gap-1 hawa-rounded " }, /* @__PURE__ */ import_react6.default.createElement(
import_react_hook_form.Controller,
{
control,
name: "source",
render: ({ field }) => {
var _a2, _b2;
return /* @__PURE__ */ import_react6.default.createElement(
Radio,
{
name: "source",
direction: props.direction,
orientation: "vertical",
options: optionsWithOther,
defaultValue: field.value,
onChange: (e) => field.onChange(e),
helperText: (_b2 = (_a2 = formState.errors.source) == null ? void 0 : _a2.message) == null ? void 0 : _b2.toString()
}
);
}
}
)),
/* @__PURE__ */ import_react6.default.createElement("div", null, /* @__PURE__ */ import_react6.default.createElement(
import_react_hook_form.Controller,
{
control,
name: "feedback",
render: ({ field }) => {
var _a2, _b2;
return /* @__PURE__ */ import_react6.default.createElement(
Textarea,
{
...field,
textareaProps: {
onChange: (e) => field.onChange(e.target.value),
disabled: selectedSource !== "other"
},
helperText: (_b2 = (_a2 = formState.errors.feedback) == null ? void 0 : _a2.message) == null ? void 0 : _b2.toString()
}
);
}
}
))
),
/* @__PURE__ */ import_react6.default.createElement(Button, { type: "submit", className: "hawa-mt-4 hawa-w-full" }, ((_b = props.texts) == null ? void 0 : _b.submit) || "Submit")
))
)
);
};
// blocks/feedback/FeedbackRating.tsx
var import_react7 = __toESM(require("react"));
var FeedbackRating = ({
position = "bottom-right",
...props
}) => {
const [closed, setClosed] = (0, import_react7.useState)(false);
const [answered, setAnswered] = (0, import_react7.useState)(false);
const [clickedOption, setClickedOption] = (0, import_react7.useState)(null);
const [closingTimer, setClosingTimer] = (0, import_react7.useState)(5);
const popUpRef = (0, import_react7.useRef)(null);
const boxPosition = {
"bottom-right": "hawa-right-4",
"bottom-left": "hawa-left-4"
};
(0, import_react7.useEffect)(() => {
const timeoutHide = setTimeout(() => {
if (closingTimer >= 0) {
setClosingTimer(closingTimer - 1);
}
}, 1e3);
return () => {
clearTimeout(timeoutHide);
};
}, [closingTimer]);
const slowClose = () => {
setClosed(true);
setTimeout(() => {
if (popUpRef.current) {
popUpRef.current.removeChild(popUpRef.current.children[0]);
}
}, 200);
};
return /* @__PURE__ */ import_react7.default.createElement(
"div",
{
ref: popUpRef,
className: cn(
props.banner ? "hawa-fixed hawa-bottom-0 hawa-left-0 hawa-w-full hawa-px-0 md:hawa-px-4" : "hawa-fixed hawa-bottom-4",
boxPosition[position]
)
},
/* @__PURE__ */ import_react7.default.createElement(
"div",
{
className: cn(
"hawa-relative hawa-flex hawa-w-full hawa-flex-col hawa-gap-2 hawa-rounded hawa-border hawa-bg-background hawa-p-4 hawa-shadow-md hawa-transition-all",
closed ? "hawa-opacity-0" : "hawa-opacity-100",
props.banner && "hawa-rounded-none hawa-px-4 md:hawa-rounded-t md:hawa-px-64"
)
},
/* @__PURE__ */ import_react7.default.createElement("div", { className: "hawa-absolute hawa-left-2 hawa-top-2 hawa-p-1.5 hawa-text-sm" }, props.title),
/* @__PURE__ */ import_react7.default.createElement(
"button",
{
type: "button",
className: "hawa-absolute hawa-right-2 hawa-top-2 hawa-inline-flex hawa-h-8 hawa-w-8 hawa-rounded hawa-p-1.5 hawa-text-gray-400 hover:hawa-bg-gray-100 hover:hawa-text-gray-900 focus:hawa-ring-2 focus:hawa-ring-gray-300 dark:hawa-bg-gray-800 dark:hawa-text-gray-500 dark:hover:hawa-bg-gray-700 dark:hover:hawa-text-white",
"data-dismiss-target": "#toast-default",
"aria-label": "Close",
onClick: () => slowClose()
},
/* @__PURE__ */ import_react7.default.createElement(
"svg",
{
"aria-hidden": "true",
className: "hawa-h-5 hawa-w-5",
fill: "currentColor",
viewBox: "0 0 20 20"
},
/* @__PURE__ */ import_react7.default.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__ */ import_react7.default.createElement("div", { className: "hawa-mt-8" }, props.question),
/* @__PURE__ */ import_react7.default.createElement("div", { className: "hawa-flex hawa-w-full hawa-flex-row hawa-gap-1 hawa-rounded" }, props.options && props.options.map((op, i) => /* @__PURE__ */ import_react7.default.createElement(
"span",
{
key: i,
onClick: () => {
if (props.onOptionClicked) {
props.onOptionClicked(op);
}
setClickedOption(op);
setAnswered(true);
const timeoutDestroy = setTimeout(() => {
setClosed(true);
}, 4800);
setTimeout(() => {
var _a, _b;
(_b = popUpRef.current) == null ? void 0 : _b.removeChild(
(_a = popUpRef.current) == null ? void 0 : _a.children[0]
);
clearTimeout(timeoutDestroy);
}, 5300);
},
className: cn(
"hawa-w-full hawa-cursor-pointer hawa-rounded hawa-border hawa-p-4 hawa-text-center hawa-transition-all",
clickedOption === op ? "hawa-bg-gray-500 hawa-text-white" : "hawa-border hawa-bg-background hover:hawa-bg-gray-300 dark:hover:hawa-bg-gray-700"
)
},
op
))),
props.texts && /* @__PURE__ */ import_react7.default.createElement("div", { className: "hawa-flex hawa-flex-row hawa-justify-between hawa-text-xs" }, /* @__PURE__ */ import_react7.default.createElement("span", null, props.texts.least), /* @__PURE__ */ import_react7.default.createElement("span", null, props.texts.most)),
answered && /* @__PURE__ */ import_react7.default.createElement("div", { className: "hawa-absolute hawa-left-0 hawa-top-0 hawa-flex hawa-h-full hawa-w-full hawa-flex-col hawa-items-center hawa-justify-center hawa-gap-2 hawa-rounded hawa-bg-black hawa-bg-opacity-80 hawa-p-4 hawa-text-center hawa-transition-all" }, /* @__PURE__ */ import_react7.default.createElement("span", { className: "hawa-font-bold hawa-text-white" }, "Thank you for your answer. This box will disappear in", " " + closingTimer, " seconds"), /* @__PURE__ */ import_react7.default.createElement("div", { className: "hawa-flex hawa-flex-row hawa-gap-2" }, /* @__PURE__ */ import_react7.default.createElement(Button, { variant: "secondary", onClick: () => slowClose() }, "Close")))
)
);
};
// blocks/feedback/FeedbackEmoji.tsx
var import_react11 = __toESM(requi