@sikka/hawa
Version:
Modern UI Kit made with Tailwind
371 lines (366 loc) • 13 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);
// layout/sidebar/index.ts
var sidebar_exports = {};
__export(sidebar_exports, {
SidebarGroup: () => SidebarGroup,
SidebarItem: () => SidebarItem
});
module.exports = __toCommonJS(sidebar_exports);
// layout/sidebar/Sidebar.tsx
var React2 = __toESM(require("react"));
var AccordionPrimitive = __toESM(require("@radix-ui/react-accordion"));
// 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/chip/Chip.tsx
var import_react = __toESM(require("react"));
var Chip = import_react.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_react.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_react.default.createElement(
"span",
{
className: cn(dotStyles[size], dotStatusStyles[dotStatus])
}
),
icon && icon,
label
);
} else {
return /* @__PURE__ */ import_react.default.createElement(
"span",
{
...rest,
ref,
className: cn(
"hawa-h-2 hawa-w-2 hawa-rounded-full",
color ? colorStyles[color] : "hawa-border hawa-bg-none"
)
}
);
}
}
);
// layout/sidebar/Sidebar.tsx
var Accordion = AccordionPrimitive.Root;
var triggerStyles = "hawa-flex hawa-flex-1 hawa-items-center hawa-duration-75 hawa-select-none hawa-cursor-pointer hawa-rounded hawa-justify-between hawa-p-2 hawa-px-3 hawa-font-medium hawa-transition-all [&[data-state=open]>svg]:hawa--rotate-90";
var AccordionItem = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React2.createElement(AccordionPrimitive.Item, { ref, className: cn(className), ...props }));
AccordionItem.displayName = "AccordionItem";
var AccordionTrigger = React2.forwardRef(({ className, showArrow, children, ...props }, ref) => /* @__PURE__ */ React2.createElement(AccordionPrimitive.Header, { className: "flex" }, /* @__PURE__ */ React2.createElement(
AccordionPrimitive.Trigger,
{
ref,
className: cn(triggerStyles, className),
...props
},
children,
showArrow && /* @__PURE__ */ React2.createElement(
"svg",
{
"aria-label": "Chevron Right Icon",
stroke: "currentColor",
fill: "currentColor",
viewBox: "0 0 16 16",
height: "1em",
width: "1em",
className: "hawa-icon hawa-shrink-0 hawa-rotate-90 hawa-transition-transform hawa-duration-200"
},
/* @__PURE__ */ React2.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" })
)
)));
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
var AccordionContent = React2.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React2.createElement(
AccordionPrimitive.Content,
{
ref,
className: cn(
"hawa-overflow-hidden hawa-text-sm hawa-transition-all data-[state=closed]:hawa-animate-accordion-up data-[state=open]:hawa-animate-accordion-down",
className
),
...props
},
/* @__PURE__ */ React2.createElement("div", null, children)
));
AccordionContent.displayName = AccordionPrimitive.Content.displayName;
var SidebarGroup = ({
title,
items,
selectedItem,
openedItem,
setOpenedItem,
onItemClick,
onSubItemClick,
direction,
isOpen,
...props
}) => {
const LinkComponent = props.LinkComponent || "a";
return /* @__PURE__ */ React2.createElement("div", { className: "hawa-m-2" }, title && /* @__PURE__ */ React2.createElement("h3", { className: "hawa-mb-1 hawa-font-bold" }, title), /* @__PURE__ */ React2.createElement("ul", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, /* @__PURE__ */ React2.createElement(
Accordion,
{
value: openedItem,
type: "single",
onValueChange: (e) => {
setOpenedItem(e);
},
collapsible: true,
className: "hawa-flex hawa-flex-col hawa-gap-1"
},
items.map((item, idx) => /* @__PURE__ */ React2.createElement(
SidebarItem,
{
isOpen,
selectedItem,
key: idx,
direction,
item,
onItemClick,
onSubItemClick,
LinkComponent
}
))
)));
};
var SidebarItem = ({
item,
onItemClick,
onSubItemClick,
direction,
isOpen = true,
LinkComponent,
...props
}) => {
const getSelectedStyle = (value) => {
return props.selectedItem === value ? "hawa-bg-primary/90 hawa-text-primary-foreground hawa-cursor-default" : "hover:hawa-bg-primary/10";
};
if (item.subitems) {
return /* @__PURE__ */ React2.createElement(
AccordionItem,
{
value: item.value,
className: "hawa-overflow-x-clip",
dir: direction
},
/* @__PURE__ */ React2.createElement(
AccordionTrigger,
{
className: cn(
"hawa-w-full hawa-overflow-x-clip",
props.selectedItem === item.value ? "hawa-cursor-default hawa-bg-primary hawa-text-primary-foreground" : "hawa-h-10 hover:hawa-bg-primary/10",
item.subitems && item.subitems.some(
(subitem) => props.selectedItem === subitem.value
) ? "hawa-bg-primary/80 hawa-text-primary-foreground hover:hawa-bg-primary/80" : ""
),
showArrow: isOpen
},
/* @__PURE__ */ React2.createElement(
"div",
{
className: cn(
"hawa-flex hawa-h-fit hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2"
)
},
item.icon && item.icon,
/* @__PURE__ */ React2.createElement(
"span",
{
className: cn(
"hawa-transition-all hawa-flex hawa-flex-row hawa-items-center hawa-gap-2 hawa-whitespace-nowrap",
isOpen ? "hawa-opacity-100" : "hawa-opacity-0"
)
},
item.label,
item.badge && /* @__PURE__ */ React2.createElement(
Chip,
{
label: item.badge.label,
color: item.badge.color,
size: "small"
}
)
)
)
),
item.subitems && /* @__PURE__ */ React2.createElement(AccordionContent, { className: "hawa-mt-1 hawa-h-full hawa-rounded" }, /* @__PURE__ */ React2.createElement(
"div",
{
className: cn(
"hawa-flex hawa-h-full hawa-flex-col hawa-gap-2 hawa-bg-foreground/5 hawa-p-1"
)
},
item.subitems.map((subitem, idx) => /* @__PURE__ */ React2.createElement(
LinkComponent,
{
href: subitem.slug,
key: idx,
onMouseDown: (e) => {
if (subitem.onMouseDown) {
subitem.onMouseDown(e);
}
},
onClick: (e) => {
e.stopPropagation();
if (subitem.onClick) {
subitem.onClick(e);
}
if (onSubItemClick) {
onSubItemClick([item.value, subitem.value]);
}
},
className: cn(
"hawa-flex hawa-h-full hawa-cursor-pointer hawa-flex-row hawa-items-center hawa-gap-2 hawa-overflow-x-clip hawa-whitespace-nowrap hawa-rounded hawa-p-2 hawa-transition-all",
// bg-foreground/10
getSelectedStyle(subitem.value)
)
},
subitem.icon && subitem.icon,
subitem.label,
subitem.badge && /* @__PURE__ */ React2.createElement(
Chip,
{
label: subitem.badge.label,
color: subitem.badge.color,
size: "small"
}
)
))
))
);
} else {
return /* @__PURE__ */ React2.createElement(
LinkComponent,
{
href: item.slug,
dir: direction,
onMouseDown: (e) => {
if (item.onMouseDown) {
item.onMouseDown(e);
}
},
onClick: (e) => {
if (item.onClick) {
item.onClick(e);
}
if (onItemClick) {
onItemClick([item.value]);
}
},
className: cn(
triggerStyles,
getSelectedStyle(item.value),
"hawa-overflow-x-clip"
)
},
/* @__PURE__ */ React2.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2" }, item.icon && item.icon, /* @__PURE__ */ React2.createElement(
"span",
{
className: cn(
"hawa-flex hawa-flex-row hawa-items-center hawa-gap-2 hawa-whitespace-nowrap hawa-transition-all",
isOpen ? "hawa-opacity-100" : "hawa-opacity-0"
)
},
item.label,
" ",
item.badge && /* @__PURE__ */ React2.createElement(
Chip,
{
label: item.badge.label,
color: item.badge.color,
size: "small"
}
)
))
);
}
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
SidebarGroup,
SidebarItem
});
//# sourceMappingURL=index.js.map