@sikka/hawa
Version:
Modern UI Kit made with Tailwind
174 lines (170 loc) • 6.39 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/scrollArea/index.ts
var scrollArea_exports = {};
__export(scrollArea_exports, {
ScrollArea: () => ScrollArea,
ScrollBar: () => ScrollBar
});
module.exports = __toCommonJS(scrollArea_exports);
// elements/scrollArea/ScrollArea.tsx
var React = __toESM(require("react"));
var ScrollAreaPrimitive = __toESM(require("@radix-ui/react-scroll-area"));
// 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/scrollArea/ScrollArea.tsx
var ScrollArea = React.forwardRef(({ className, children, orientation = "vertical", ...props }, ref) => {
const scrollAreaRef = React.useRef(null);
const isDragging = React.useRef(false);
const startPos = React.useRef({ x: 0, y: 0 });
const scrollPos = React.useRef({ top: 0, left: 0 });
const [showLeftFade, setShowLeftFade] = React.useState(false);
const [showRightFade, setShowRightFade] = React.useState(false);
const checkOverflow = () => {
if (scrollAreaRef.current) {
const { scrollLeft, scrollWidth, clientWidth } = scrollAreaRef.current;
setShowLeftFade(scrollLeft > 0);
setShowRightFade(scrollLeft + clientWidth < scrollWidth);
}
};
const onMouseDown = (e) => {
isDragging.current = true;
startPos.current = { x: e.clientX, y: e.clientY };
if (scrollAreaRef.current) {
scrollPos.current = {
top: scrollAreaRef.current.scrollTop,
left: scrollAreaRef.current.scrollLeft
};
}
document.addEventListener("mousemove", onMouseMove);
document.addEventListener("mouseup", onMouseUp);
};
const onMouseMove = (e) => {
if (!isDragging.current || !scrollAreaRef.current) return;
const dx = e.clientX - startPos.current.x;
const dy = e.clientY - startPos.current.y;
if (orientation === "vertical") {
scrollAreaRef.current.scrollTop = scrollPos.current.top - dy;
} else {
scrollAreaRef.current.scrollLeft = scrollPos.current.left - dx;
checkOverflow();
}
};
const onMouseUp = () => {
isDragging.current = false;
document.removeEventListener("mousemove", onMouseMove);
document.removeEventListener("mouseup", onMouseUp);
};
React.useEffect(() => {
checkOverflow();
if (scrollAreaRef.current) {
scrollAreaRef.current.addEventListener("scroll", checkOverflow);
window.addEventListener("resize", checkOverflow);
}
return () => {
if (scrollAreaRef.current) {
scrollAreaRef.current.removeEventListener("scroll", checkOverflow);
}
window.removeEventListener("resize", checkOverflow);
};
}, []);
return /* @__PURE__ */ React.createElement(
ScrollAreaPrimitive.Root,
{
ref,
className: cn("hawa-relative hawa-overflow-hidden", className),
...props
},
/* @__PURE__ */ React.createElement(
"div",
{
className: cn(
"hawa-pointer-events-none hawa-absolute hawa-bg-background hawa-h-full hawa-w-[50px] hawa-z-10 hawa-start-0 hawa-mask-fade-right",
showLeftFade ? "hawa-block" : "hawa-hidden"
)
}
),
/* @__PURE__ */ React.createElement(
"div",
{
className: cn(
"hawa-pointer-events-none hawa-absolute hawa-bg-background hawa-mask-fade-left hawa-end-0 hawa-h-full hawa-w-[50px] hawa-z-10",
showRightFade ? "hawa-block" : "hawa-hidden"
)
}
),
/* @__PURE__ */ React.createElement(
ScrollAreaPrimitive.Viewport,
{
ref: scrollAreaRef,
className: "hawa-h-full hawa-w-full hawa-rounded-[inherit]",
onMouseDown
},
children
),
/* @__PURE__ */ React.createElement(ScrollBar, { orientation }),
/* @__PURE__ */ React.createElement(ScrollAreaPrimitive.Corner, null)
);
});
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
var ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ React.createElement(
ScrollAreaPrimitive.ScrollAreaScrollbar,
{
ref,
orientation,
className: cn(
"hawa-flex hawa-touch-none hawa-select-none hawa-transition-colors",
orientation === "vertical" && "hawa-h-full hawa-w-2.5 hawa-border-l hawa-border-l-transparent hawa-p-[1px]",
orientation === "horizontal" && "hawa-h-2.5 hawa-border-t hawa-border-t-transparent hawa-p-[1px]",
className
),
...props
},
/* @__PURE__ */ React.createElement(
ScrollAreaPrimitive.ScrollAreaThumb,
{
className: cn(
"hawa-relative hawa-rounded-full hawa-bg-border",
orientation === "vertical" && "hawa-flex-1"
)
}
)
));
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
ScrollArea,
ScrollBar
});
//# sourceMappingURL=index.js.map