@sikka/hawa
Version:
Modern UI Kit made with Tailwind
391 lines (387 loc) • 14.1 kB
JavaScript
"use client";
;
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/dialog/index.ts
var dialog_exports = {};
__export(dialog_exports, {
Dialog: () => Dialog,
DialogBody: () => DialogBody,
DialogCarousel: () => DialogCarousel,
DialogCarouselContent: () => DialogCarouselContent,
DialogContent: () => DialogContent,
DialogDescription: () => DialogDescription,
DialogFooter: () => DialogFooter,
DialogHeader: () => DialogHeader,
DialogPortal: () => DialogPortal,
DialogStep: () => DialogStep,
DialogSteps: () => DialogSteps,
DialogTitle: () => DialogTitle,
DialogTrigger: () => DialogTrigger
});
module.exports = __toCommonJS(dialog_exports);
// elements/dialog/Dialog.tsx
var React = __toESM(require("react"));
var DialogPrimitive = __toESM(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/dialog/Dialog.tsx
var Dialog = DialogPrimitive.Root;
var DialogTrigger = DialogPrimitive.Trigger;
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;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
Dialog,
DialogBody,
DialogCarousel,
DialogCarouselContent,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogPortal,
DialogStep,
DialogSteps,
DialogTitle,
DialogTrigger
});
//# sourceMappingURL=index.js.map