@sikka/hawa
Version:
Modern UI Kit made with Tailwind
525 lines (497 loc) • 19.9 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/tabs/index.ts
var tabs_exports = {};
__export(tabs_exports, {
Tabs: () => Tabs,
TabsContent: () => TabsContent,
TabsList: () => TabsList,
TabsTrigger: () => TabsTrigger
});
module.exports = __toCommonJS(tabs_exports);
// elements/tabs/Tabs.tsx
var React11 = __toESM(require("react"));
// hooks/useIsomorphicEffect.ts
var import_react = require("react");
// hooks/useDiscloser.ts
var import_react2 = require("react");
// hooks/useHover.ts
var import_react3 = require("react");
// hooks/useToast.ts
var React3 = __toESM(require("react"));
// hooks/useCarousel.ts
var import_react4 = require("react");
// hooks/useDialogCarousel.ts
var import_react5 = require("react");
var import_embla_carousel_auto_height = __toESM(require("embla-carousel-auto-height"));
var import_embla_carousel_react = __toESM(require("embla-carousel-react"));
// hooks/useDialogSteps.ts
var import_react6 = require("react");
// hooks/useClipboard.ts
var import_react7 = require("react");
// hooks/useBreakpoint.ts
var import_react8 = require("react");
// hooks/useWindowSize.ts
var import_react9 = require("react");
// hooks/useFocusWithin.ts
var import_react10 = require("react");
// hooks/useMediaQuery.ts
var import_react11 = require("react");
// hooks/useScrollPosition.ts
var import_react12 = require("react");
// hooks/useTable.ts
var import_react13 = require("react");
// hooks/useTabs.ts
var import_react14 = require("react");
// hooks/useMeasureDirty.ts
var import_react15 = require("react");
// hooks/useClickOutside.ts
var import_react16 = require("react");
// hooks/useShortcuts.ts
var import_react17 = require("react");
// hooks/useWindowEvent.ts
var import_react18 = require("react");
function useWindowEvent(type, listener, options) {
(0, import_react18.useEffect)(() => {
window.addEventListener(type, listener, options);
return () => window.removeEventListener(type, listener, options);
}, [type, listener]);
}
// hooks/useViewportSize.ts
var import_react19 = require("react");
var eventListerOptions = {
passive: true
};
function useViewportSize() {
const [windowSize, setWindowSize] = (0, import_react19.useState)({
width: 0,
height: 0
});
const setSize = (0, import_react19.useCallback)(() => {
setWindowSize({
width: window.innerWidth || 0,
height: window.innerHeight || 0
});
}, []);
useWindowEvent("resize", setSize, eventListerOptions);
useWindowEvent("orientationchange", setSize, eventListerOptions);
(0, import_react19.useEffect)(setSize, []);
return windowSize;
}
// elements/tabs/Tabs.tsx
var Popover = __toESM(require("@radix-ui/react-popover"));
var TabsPrimitive = __toESM(require("@radix-ui/react-tabs"));
// 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/tabs/Tabs.tsx
var import_tailwind_variants = require("tailwind-variants");
// elements/chip/Chip.tsx
var import_react20 = __toESM(require("react"));
var Chip = import_react20.default.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__ */ import_react20.default.createElement(
"span",
{
...rest,
ref,
className: cn(
defaultStyles,
sizeStyles[size],
radiusStyles[radius],
color ? colorStyles[color] : "hawa-border hawa-bg-none",
rest.className
)
},
dot && /* @__PURE__ */ import_react20.default.createElement(
"span",
{
className: cn(dotStyles[size], dotStatusStyles[dotStatus])
}
),
icon && icon,
label
);
} else {
return /* @__PURE__ */ import_react20.default.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
var React10 = __toESM(require("react"));
var ScrollAreaPrimitive = __toESM(require("@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 = (0, import_tailwind_variants.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 = (0, import_tailwind_variants.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;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
Tabs,
TabsContent,
TabsList,
TabsTrigger
});
//# sourceMappingURL=index.js.map