@sikka/hawa
Version:
Modern UI Kit made with Tailwind
194 lines (190 loc) • 7.54 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/carousel/index.ts
var carousel_exports = {};
__export(carousel_exports, {
Carousel: () => Carousel
});
module.exports = __toCommonJS(carousel_exports);
// elements/carousel/Carousel.tsx
var import_react = __toESM(require("react"));
// 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/carousel/Carousel.tsx
var import_embla_carousel_react = __toESM(require("embla-carousel-react"));
var Carousel = ({
items,
showArrows,
options,
autoplay,
direction = "ltr",
autoplayInterval = 3e3,
...props
}) => {
const [emblaRef, emblaApi] = (0, import_embla_carousel_react.default)({
...options,
direction,
loop: autoplay ? true : (options == null ? void 0 : options.loop) || false
});
const [selectedIndex, setSelectedIndex] = (0, import_react.useState)(0);
(0, import_react.useEffect)(() => {
function selectHandler() {
const index = emblaApi == null ? void 0 : emblaApi.selectedScrollSnap();
setSelectedIndex(index || 0);
}
emblaApi == null ? void 0 : emblaApi.on("select", selectHandler);
return () => {
emblaApi == null ? void 0 : emblaApi.off("select", selectHandler);
};
}, [emblaApi]);
(0, import_react.useEffect)(() => {
let autoplayTimer;
if (autoplay && emblaApi) {
autoplayTimer = setInterval(() => {
emblaApi.scrollNext();
}, autoplayInterval);
}
return () => {
if (autoplayTimer) clearInterval(autoplayTimer);
};
}, [emblaApi, autoplay, autoplayInterval]);
const length = import_react.default.Children.count(items);
const canScrollNext = !!(emblaApi == null ? void 0 : emblaApi.canScrollNext());
const canScrollPrev = !!(emblaApi == null ? void 0 : emblaApi.canScrollPrev());
return /* @__PURE__ */ import_react.default.createElement("div", { className: "hawa-relative hawa-h-full" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "hawa-h-full hawa-overflow-hidden" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "hawa-h-full", ref: emblaRef }, /* @__PURE__ */ import_react.default.createElement("div", { className: "hawa-flex hawa-h-full" }, items == null ? void 0 : items.map((item, i) => /* @__PURE__ */ import_react.default.createElement(
"div",
{
key: i,
className: "hawa-flex hawa-h-full hawa-min-w-0 hawa-flex-[0_0_100%] hawa-items-center hawa-justify-center"
},
item
))))), /* @__PURE__ */ import_react.default.createElement(
Dots,
{
direction,
itemsLength: length,
selectedIndex,
onDotClick: (index) => emblaApi == null ? void 0 : emblaApi.scrollTo(index)
}
), showArrows && /* @__PURE__ */ import_react.default.createElement(
CarouselControls,
{
canScrollNext,
canScrollPrev,
onNext: () => emblaApi == null ? void 0 : emblaApi.scrollNext(),
onPrev: () => emblaApi == null ? void 0 : emblaApi.scrollPrev()
}
));
};
var Dots = ({
onDotClick,
itemsLength,
selectedIndex,
direction
}) => {
const arr = new Array(itemsLength).fill(0);
return /* @__PURE__ */ import_react.default.createElement(
"div",
{
dir: direction,
className: "hawa-z-50 hawa-my-2 hawa-flex hawa-justify-center hawa-gap-1"
},
arr.map((_, index) => {
const selected = index === selectedIndex;
return /* @__PURE__ */ import_react.default.createElement(
"div",
{
key: index,
onClick: () => onDotClick(index),
className: cn(
"hawa-h-2 hawa-rounded-full hawa-bg-primary hawa-transition-all hawa-duration-300 hover:hawa-cursor-pointer",
!selected ? "hawa-w-2 hawa-opacity-50" : "hawa-w-6 hawa-opacity-100"
)
}
);
})
);
};
var CarouselControls = (props) => {
return /* @__PURE__ */ import_react.default.createElement("div", { className: "hawa-flex hawa-justify-end hawa-gap-2" }, /* @__PURE__ */ import_react.default.createElement(
"button",
{
onClick: () => props.canScrollPrev && props.onPrev(),
disabled: !props.canScrollPrev,
className: cn(
"hawa-absolute hawa-start-0 hawa-top-1/2 -hawa-translate-y-2 hawa-rounded-full hawa-p-2 hawa-text-white",
!props.canScrollPrev && "hawa-bg-primary/50",
props.canScrollPrev && "hawa-bg-primary"
)
},
/* @__PURE__ */ import_react.default.createElement(
"svg",
{
"aria-label": "Chevron Right Icon",
stroke: "currentColor",
fill: "currentColor",
viewBox: "0 0 16 16",
className: "hawa-h-2 hawa-w-2 hawa-shrink-0 hawa-rotate-180 hawa-transition-transform hawa-duration-200"
},
/* @__PURE__ */ import_react.default.createElement("path", { d: "M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" })
)
), /* @__PURE__ */ import_react.default.createElement(
"button",
{
onClick: () => props.canScrollNext && props.onNext(),
disabled: !props.canScrollNext,
className: cn(
"hawa-absolute hawa-end-0 hawa-top-1/2 -hawa-translate-y-2 hawa-rounded-full hawa-p-2 hawa-text-white",
!props.canScrollNext && "hawa-bg-primary/50",
props.canScrollNext && "hawa-bg-primary"
)
},
/* @__PURE__ */ import_react.default.createElement(
"svg",
{
"aria-label": "Chevron Right Icon",
stroke: "currentColor",
fill: "currentColor",
viewBox: "0 0 16 16",
className: "hawa-h-2 hawa-w-2 hawa-shrink-0 hawa-transition-transform hawa-duration-200"
},
/* @__PURE__ */ import_react.default.createElement("path", { d: "M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" })
)
));
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
Carousel
});
//# sourceMappingURL=index.js.map