@sikka/hawa
Version:
Modern UI Kit made with Tailwind
216 lines (212 loc) • 7.41 kB
JavaScript
"use client";
import {
cn
} from "./chunk-5MN7WB7B.mjs";
// elements/scrollArea/ScrollArea.tsx
import * as React from "react";
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
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;
// elements/chip/Chip.tsx
import React2 from "react";
var Chip = React2.forwardRef(
({
label,
size = "normal",
icon,
color,
radius = "inherit",
dot,
dotStatus = "none",
...rest
}, ref) => {
let defaultStyles = "hawa-flex hawa-flex-row hawa-w-fit hawa-gap-1 hawa-items-center hawa-px-2.5 hawa-py-1 hawa-font-bold ";
let radiusStyles = {
inherit: " hawa-rounded",
full: "hawa-rounded-full",
none: "hawa-rounded-none"
};
let sizeStyles = {
small: "hawa-h-[15px] hawa-leading-4 hawa-px-0 hawa-py-0 hawa-text-[9px] hawa-gap-0.5 ",
normal: "hawa-h-fit hawa-text-xs",
large: "hawa-text-base"
};
let dotStyles = {
small: "hawa-flex hawa-h-1 hawa-w-1 hawa-rounded-full",
normal: "hawa-flex hawa-h-2 hawa-w-2 hawa-rounded-full",
large: "hawa-flex hawa-h-3 hawa-w-3 hawa-rounded-full"
};
let dotStatusStyles = {
none: "hawa-bg-gray-500 dark:hawa-bg-gray-800",
available: "hawa-bg-green-500",
unavailable: "hawa-bg-red-500"
};
let colorStyles = {
green: "hawa-bg-green-200 hawa-text-green-700 dark:hawa-bg-green-700 dark:hawa-text-green-200",
blue: "hawa-bg-blue-200 hawa-text-blue-700 dark:hawa-bg-blue-700 dark:hawa-text-blue-100",
red: "hawa-bg-red-200 hawa-text-red-700 dark:hawa-bg-red-700 dark:hawa-text-red-100",
yellow: "hawa-bg-yellow-200 hawa-text-yellow-700 dark:hawa-bg-yellow-600 dark:hawa-text-black",
orange: "hawa-bg-orange-200 hawa-text-orange-700 dark:hawa-bg-orange-700 dark:hawa-text-orange-100",
purple: "hawa-bg-purple-200 hawa-text-purple-700 dark:hawa-bg-purple-700 dark:hawa-text-purple-100",
cyan: "hawa-bg-cyan-200 hawa-text-cyan-700 dark:hawa-bg-cyan-700 dark:hawa-text-cyan-100",
hyper: "hawa-text-white dark:hawa-text-black hawa-bg-gradient-to-tl hawa-from-pink-500 hawa-via-red-500 hawa-to-yellow-500 ",
oceanic: "hawa-text-white dark:hawa-text-black hawa-bg-gradient-to-bl hawa-from-green-300 hawa-via-blue-500 hawa-to-purple-600"
};
if (label) {
return /* @__PURE__ */ React2.createElement(
"span",
{
...rest,
ref,
className: cn(
defaultStyles,
sizeStyles[size],
radiusStyles[radius],
color ? colorStyles[color] : "hawa-border hawa-bg-none",
rest.className
)
},
dot && /* @__PURE__ */ React2.createElement(
"span",
{
className: cn(dotStyles[size], dotStatusStyles[dotStatus])
}
),
icon && icon,
label
);
} else {
return /* @__PURE__ */ React2.createElement(
"span",
{
...rest,
ref,
className: cn(
"hawa-h-2 hawa-w-2 hawa-rounded-full",
color ? colorStyles[color] : "hawa-border hawa-bg-none"
)
}
);
}
}
);
export {
ScrollArea,
Chip
};