@sikka/hawa
Version:
Modern UI Kit made with Tailwind
486 lines (459 loc) • 18.4 kB
JavaScript
"use client";
// elements/tabs/Tabs.tsx
import * as React11 from "react";
// hooks/useIsomorphicEffect.ts
import { useEffect, useLayoutEffect } from "react";
// hooks/useDiscloser.ts
import { useState } from "react";
// hooks/useHover.ts
import { useEffect as useEffect2, useRef, useState as useState2 } from "react";
// hooks/useToast.ts
import * as React3 from "react";
// hooks/useCarousel.ts
import { useState as useState4, useRef as useRef2 } from "react";
// hooks/useDialogCarousel.ts
import { useEffect as useEffect4, useState as useState5 } from "react";
import AutoHeight from "embla-carousel-auto-height";
import useEmblaCarousel from "embla-carousel-react";
// hooks/useDialogSteps.ts
import { useState as useState6, useEffect as useEffect5, useRef as useRef3 } from "react";
// hooks/useClipboard.ts
import { useState as useState7 } from "react";
// hooks/useBreakpoint.ts
import { useState as useState8, useEffect as useEffect6 } from "react";
// hooks/useWindowSize.ts
import { useEffect as useEffect7, useState as useState9 } from "react";
// hooks/useFocusWithin.ts
import { useRef as useRef4, useState as useState10, useEffect as useEffect8 } from "react";
// hooks/useMediaQuery.ts
import { useState as useState11, useEffect as useEffect9, useRef as useRef5 } from "react";
// hooks/useScrollPosition.ts
import { useState as useState12, useEffect as useEffect10 } from "react";
// hooks/useTable.ts
import { useState as useState13, useEffect as useEffect11 } from "react";
// hooks/useTabs.ts
import { useEffect as useEffect12, useState as useState14 } from "react";
// hooks/useMeasureDirty.ts
import { useEffect as useEffect13, useRef as useRef7, useState as useState15 } from "react";
// hooks/useClickOutside.ts
import { useEffect as useEffect14, useRef as useRef8 } from "react";
// hooks/useShortcuts.ts
import { useEffect as useEffect15 } from "react";
// hooks/useWindowEvent.ts
import { useEffect as useEffect16 } from "react";
function useWindowEvent(type, listener, options) {
useEffect16(() => {
window.addEventListener(type, listener, options);
return () => window.removeEventListener(type, listener, options);
}, [type, listener]);
}
// hooks/useViewportSize.ts
import { useCallback, useEffect as useEffect17, useState as useState16 } from "react";
var eventListerOptions = {
passive: true
};
function useViewportSize() {
const [windowSize, setWindowSize] = useState16({
width: 0,
height: 0
});
const setSize = useCallback(() => {
setWindowSize({
width: window.innerWidth || 0,
height: window.innerHeight || 0
});
}, []);
useWindowEvent("resize", setSize, eventListerOptions);
useWindowEvent("orientationchange", setSize, eventListerOptions);
useEffect17(setSize, []);
return windowSize;
}
// elements/tabs/Tabs.tsx
import * as Popover from "@radix-ui/react-popover";
import * as TabsPrimitive from "@radix-ui/react-tabs";
// util/index.ts
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";
function cn(...inputs) {
return twMerge(clsx(inputs));
}
// elements/tabs/Tabs.tsx
import { tv } from "tailwind-variants";
// elements/chip/Chip.tsx
import React9 from "react";
var Chip = React9.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__ */ React9.createElement(
"span",
{
...rest,
ref,
className: cn(
defaultStyles,
sizeStyles[size],
radiusStyles[radius],
color ? colorStyles[color] : "hawa-border hawa-bg-none",
rest.className
)
},
dot && /* @__PURE__ */ React9.createElement(
"span",
{
className: cn(dotStyles[size], dotStatusStyles[dotStatus])
}
),
icon && icon,
label
);
} else {
return /* @__PURE__ */ React9.createElement(
"span",
{
...rest,
ref,
className: cn(
"hawa-h-2 hawa-w-2 hawa-rounded-full",
color ? colorStyles[color] : "hawa-border hawa-bg-none"
)
}
);
}
}
);
// elements/scrollArea/ScrollArea.tsx
import * as React10 from "react";
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
var ScrollArea = React10.forwardRef(({ className, children, orientation = "vertical", ...props }, ref) => {
const scrollAreaRef = React10.useRef(null);
const isDragging = React10.useRef(false);
const startPos = React10.useRef({ x: 0, y: 0 });
const scrollPos = React10.useRef({ top: 0, left: 0 });
const [showLeftFade, setShowLeftFade] = React10.useState(false);
const [showRightFade, setShowRightFade] = React10.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);
};
React10.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__ */ React10.createElement(
ScrollAreaPrimitive.Root,
{
ref,
className: cn("hawa-relative hawa-overflow-hidden", className),
...props
},
/* @__PURE__ */ React10.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__ */ React10.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__ */ React10.createElement(
ScrollAreaPrimitive.Viewport,
{
ref: scrollAreaRef,
className: "hawa-h-full hawa-w-full hawa-rounded-[inherit]",
onMouseDown
},
children
),
/* @__PURE__ */ React10.createElement(ScrollBar, { orientation }),
/* @__PURE__ */ React10.createElement(ScrollAreaPrimitive.Corner, null)
);
});
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
var ScrollBar = React10.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ React10.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__ */ React10.createElement(
ScrollAreaPrimitive.ScrollAreaThumb,
{
className: cn(
"hawa-relative hawa-rounded-full hawa-bg-border",
orientation === "vertical" && "hawa-flex-1"
)
}
)
));
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
// elements/tabs/Tabs.tsx
var tabsListVariant = tv({
base: "",
variants: {
variant: {
default: "hawa-flex hawa-w-fit hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded hawa-border hawa-bg-muted hawa-p-1 hawa-text-muted-foreground dark:hawa-border-primary/10",
underlined: "hawa-flex hawa-w-fit hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded hawa-p-1 hawa-text-muted-foreground dark:hawa-border-primary/10",
underlined_tabs: "hawa-flex hawa-w-fit hawa-items-center hawa-justify-start hawa-gap-1 hawa-text-muted-foreground"
},
orientation: { horizontal: "", vertical: "" }
},
compoundVariants: [
{
variant: "underlined_tabs",
orientation: "vertical",
class: "hawa-border-e-2 hawa-border-e-primary"
},
{
variant: "underlined_tabs",
orientation: "horizontal",
class: "hawa-border-b-2 hawa-border-b-primary"
}
],
defaultVariants: { variant: "default", orientation: "horizontal" }
});
var tabsTriggerVariant = tv({
base: "",
variants: {
variant: {
default: "hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-border hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all 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 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground data-[state=active]:hawa-shadow-sm dark:hawa-border-primary/10",
underlined: "hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-rounded-none hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all 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",
underlined_tabs: "hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all 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 hawa-bg-primary/10 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground dark:hawa-border-primary/10"
},
orientation: { horizontal: "", vertical: "" }
},
compoundVariants: [
{
variant: "underlined",
orientation: "horizontal",
class: "data-[state=active]:hawa-border-b-primary hawa-border-b hawa-border-b-2"
},
{
variant: "underlined",
orientation: "vertical",
class: "data-[state=active]:hawa-border-e-primary hawa-border-e hawa-border-e-2"
},
{
variant: "underlined_tabs",
orientation: "horizontal",
class: "hawa-rounded-b-none"
},
{
variant: "underlined_tabs",
orientation: "vertical",
class: "hawa-rounded-e-none"
}
],
defaultVariants: { variant: "default", orientation: "horizontal" }
});
var TabsContext = React11.createContext({ orientation: "horizontal", variant: "default", scrollable: false });
var Tabs = React11.forwardRef(
({ className, orientation, scrollable, variant = "default", ...props }, ref) => /* @__PURE__ */ React11.createElement(
TabsPrimitive.Root,
{
ref,
className: cn(
"hawa-flex hawa-gap-2",
orientation === "vertical" ? "hawa-flex-row" : "hawa-flex-col",
className
),
...props
},
/* @__PURE__ */ React11.createElement(TabsContext.Provider, { value: { orientation, variant, scrollable } }, props.children)
)
);
var TabsList = React11.forwardRef(({ className, classNames, ...props }, ref) => {
const { orientation, variant, scrollable } = React11.useContext(TabsContext);
const { width } = useViewportSize();
if (scrollable && width < 768 && orientation === "horizontal") {
return /* @__PURE__ */ React11.createElement(ScrollArea, { orientation: "horizontal", className: classNames == null ? void 0 : classNames.scrollArea }, /* @__PURE__ */ React11.createElement(
TabsPrimitive.List,
{
ref,
className: cn(
tabsListVariant({ variant, orientation }),
"hawa-flex-row hawa-flex-nowrap",
className
),
...props
}
));
} else {
return /* @__PURE__ */ React11.createElement(
TabsPrimitive.List,
{
ref,
className: cn(
tabsListVariant({ variant, orientation }),
orientation === "vertical" ? "hawa-flex-col" : "hawa-flex-row",
"hawa-flex-wrap",
className
),
...props
}
);
}
});
var TabsTrigger = React11.forwardRef(
({ className, chipProps, withPopover = false, onPopoverClick, ...props }, ref) => {
const { orientation, variant } = React11.useContext(TabsContext);
if (withPopover) {
return /* @__PURE__ */ React11.createElement(Popover.Root, { open: props.showPopover }, /* @__PURE__ */ React11.createElement(Popover.Anchor, { asChild: true }, /* @__PURE__ */ React11.createElement(
TabsPrimitive.Trigger,
{
className: cn(
tabsTriggerVariant({ variant, orientation }),
"hawa-relative",
className
),
...props
},
props.children,
chipProps && /* @__PURE__ */ React11.createElement(Chip, { ...chipProps })
)), /* @__PURE__ */ React11.createElement(
Popover.Content,
{
onClick: onPopoverClick,
asChild: true,
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",
"hawa-arrow-default-top hawa-mt-2"
)
},
/* @__PURE__ */ React11.createElement("div", { className: "hawa-p-2" }, " ", props.popoverContent)
));
} else {
return /* @__PURE__ */ React11.createElement(
TabsPrimitive.Trigger,
{
className: cn(
tabsTriggerVariant({ variant, orientation }),
"hawa-relative",
className
),
...props
},
props.children,
chipProps && /* @__PURE__ */ React11.createElement(Chip, { ...chipProps })
);
}
}
);
var TabsContent = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React11.createElement(
TabsPrimitive.Content,
{
ref,
className: cn(
"hawa-ring-offset-hawa-background hawa-w-full focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2",
className
),
...props
}
));
Tabs.displayName = TabsPrimitive.Root.displayName;
TabsList.displayName = TabsPrimitive.List.displayName;
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
TabsContent.displayName = TabsPrimitive.Content.displayName;
export {
Tabs,
TabsContent,
TabsList,
TabsTrigger
};
//# sourceMappingURL=index.mjs.map