@sikka/hawa
Version:
Modern UI Kit made with Tailwind
544 lines (539 loc) • 21.6 kB
JavaScript
"use client";
"use strict";
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/appTopbar/index.ts
var appTopbar_exports = {};
__export(appTopbar_exports, {
AppTopbar: () => AppTopbar
});
module.exports = __toCommonJS(appTopbar_exports);
// layout/appTopbar/AppTopbar.tsx
var import_react2 = __toESM(require("react"));
// 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/dropdownMenu/DropdownMenu.tsx
var React = __toESM(require("react"));
var import_react = require("@headlessui/react");
var DropdownMenuPrimitive = __toESM(require("@radix-ui/react-dropdown-menu"));
var DropdownMenuRoot = DropdownMenuPrimitive.Root;
var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
var DropdownMenuSub = DropdownMenuPrimitive.Sub;
var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
var DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ React.createElement(
DropdownMenuPrimitive.SubTrigger,
{
ref,
className: cn(
"hawa-flex hawa-cursor-default hawa-select-none hawa-items-center hawa-justify-between hawa-rounded-sm hawa-text-sm hawa-outline-none focus:hawa-bg-accent data-[state=open]:hawa-bg-accent",
inset && "hawa-pl-8",
className
),
...props
},
/* @__PURE__ */ React.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2" }, children),
" ",
/* @__PURE__ */ React.createElement(
"svg",
{
"aria-label": "Chevron Right Icon",
stroke: "currentColor",
fill: "currentColor",
strokeWidth: "0",
viewBox: "0 0 16 16",
height: "1em",
width: "1em",
className: cn(props.dir === "rtl" ? "hawa-rotate-180" : "")
},
/* @__PURE__ */ React.createElement(
"path",
{
fillRule: "evenodd",
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"
}
)
)
));
DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
var DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
DropdownMenuPrimitive.SubContent,
{
ref,
className: cn(
"hawa-z-50 hawa-min-w-[8rem] hawa-gap-1 hawa-overflow-hidden hawa-rounded-md hawa-border hawa-bg-popover hawa-p-1 hawa-text-popover-foreground hawa-shadow-lg 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",
className
),
...props
}
));
DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
var DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React.createElement(import_react.Portal, null, /* @__PURE__ */ React.createElement(
DropdownMenuPrimitive.Content,
{
ref,
sideOffset,
className: cn(
"hawa-z-50 hawa-overflow-hidden hawa-rounded-md hawa-border hawa-bg-popover hawa-p-1 hawa-text-popover-foreground hawa-shadow-md 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",
className
),
...props
}
)));
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
var DropdownMenuItem = React.forwardRef(({ className, inset, badged, slug, LinkComponent = "a", ...props }, ref) => {
return /* @__PURE__ */ React.createElement(LinkComponent, { href: slug }, /* @__PURE__ */ React.createElement(
DropdownMenuPrimitive.Item,
{
disabled: props.disabled,
ref,
className: cn(
"hawa-relative hawa-flex hawa-cursor-pointer hawa-select-none hawa-items-center hawa-justify-between hawa-rounded-sm hawa-text-sm hawa-outline-none hawa-transition-colors focus:hawa-text-accent-foreground data-[disabled]:hawa-pointer-events-none data-[disabled]:hawa-opacity-50",
inset && "hawa-pl-8",
props.end && Array.isArray(props.children) && props.children[1] && "hawa-gap-6",
className
),
...props
},
/* @__PURE__ */ React.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2" }, props.children),
props.end && props.end,
!props.end && props.shortcut && /* @__PURE__ */ React.createElement(DropdownMenuShortcut, null, props.shortcut),
!props.end && badged && /* @__PURE__ */ React.createElement("div", { className: "hawa-h-3 hawa-w-3 hawa-rounded-full hawa-bg-red-500" })
));
});
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
var DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ React.createElement(
DropdownMenuPrimitive.CheckboxItem,
{
ref,
className: cn(
"hawa-relative hawa-flex hawa-cursor-default hawa-select-none hawa-items-center hawa-rounded-sm hawa-py-1.5 hawa-pl-8 hawa-pr-2 hawa-text-sm hawa-outline-none hawa-transition-colors focus:hawa-bg-accent focus:hawa-text-accent-foreground data-[disabled]:hawa-pointer-events-none data-[disabled]:hawa-opacity-50",
className
),
checked,
...props
},
/* @__PURE__ */ React.createElement("span", { className: "hawa-absolute hawa-left-2 hawa-flex hawa-h-3.5 hawa-w-3.5 hawa-items-center hawa-justify-center" }, /* @__PURE__ */ React.createElement(DropdownMenuPrimitive.ItemIndicator, null, /* @__PURE__ */ React.createElement(
"svg",
{
"aria-label": "Check Mark",
stroke: "currentColor",
fill: "currentColor",
strokeWidth: "0",
viewBox: "0 0 512 512",
height: "0.60em",
width: "0.60em"
},
/* @__PURE__ */ React.createElement("path", { d: "M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z" })
), " ")),
children
));
DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
var DropdownMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React.createElement(
DropdownMenuPrimitive.RadioItem,
{
ref,
className: cn(
"hawa-relative hawa-flex hawa-cursor-pointer hawa-select-none hawa-items-center hawa-rounded-sm hawa-py-1.5 hawa-pl-8 hawa-pr-2 hawa-text-sm hawa-outline-none hawa-transition-colors focus:hawa-bg-accent focus:hawa-text-accent-foreground data-[disabled]:hawa-pointer-events-none data-[disabled]:hawa-opacity-50",
className
),
...props
},
/* @__PURE__ */ React.createElement("span", { className: "hawa-absolute hawa-left-2 hawa-flex hawa-h-3.5 hawa-w-3.5 hawa-items-center hawa-justify-center" }, /* @__PURE__ */ React.createElement(DropdownMenuPrimitive.ItemIndicator, null, /* @__PURE__ */ React.createElement(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: "24",
"aria-label": "Circle",
height: "24",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round",
className: "hawa-h-2 hawa-w-2 hawa-fill-current"
},
/* @__PURE__ */ React.createElement("circle", { cx: "12", cy: "12", r: "10" })
))),
children
));
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
var DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ React.createElement(
DropdownMenuPrimitive.Label,
{
ref,
className: cn(
"hawa-px-2 hawa-py-1.5 hawa-text-sm hawa-font-semibold",
inset && "hawa-pl-8",
className
),
...props
}
));
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
var DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
DropdownMenuPrimitive.Separator,
{
ref,
className: cn("hawa--mx-1 hawa-my-1 hawa-h-px hawa-bg-muted", className),
...props
}
));
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
var DropdownMenuShortcut = ({
className,
...props
}) => {
return /* @__PURE__ */ React.createElement(
"span",
{
className: cn(
"hawa-text-xs hawa-tracking-widest hawa-opacity-60",
className
),
...props
}
);
};
DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
var DropdownMenu = ({
trigger,
items,
direction,
sideOffset,
side,
className,
classNames,
contentProps,
triggerClassname,
triggerProps,
align,
alignOffset,
onItemSelect,
size = "default",
width = "default",
header,
onOpenChange,
open,
LinkComponent
}) => {
const widthStyles = {
default: "hawa-min-w-[8rem]",
sm: "hawa-w-fit",
lg: "hawa-w-[200px]",
parent: "ddm-w-parent"
};
const sizeStyles = {
default: "hawa-px-2 hawa-py-3 ",
sm: "hawa-text-xs hawa-px-1.5 hawa-py-1.5 "
};
let [values, setValues] = React.useState(
items.map((item) => item.currentOption)
);
return /* @__PURE__ */ React.createElement(
DropdownMenuRoot,
{
onOpenChange,
open,
modal: false,
dir: direction
},
/* @__PURE__ */ React.createElement(
DropdownMenuTrigger,
{
asChild: true,
className: cn(classNames == null ? void 0 : classNames.trigger, triggerClassname),
...triggerProps
},
trigger
),
/* @__PURE__ */ React.createElement(import_react.Portal, null, /* @__PURE__ */ React.createElement(
DropdownMenuContent,
{
side,
sideOffset,
align,
alignOffset,
className: cn(
className,
classNames == null ? void 0 : classNames.content,
widthStyles[width],
"hawa-flex hawa-flex-col hawa-gap-1 hawa-overflow-y-auto"
),
style: {
maxHeight: "var(--radix-dropdown-menu-content-available-height)"
},
...contentProps
},
header && header,
items && items.map((item, index) => {
var _a;
const ItemLinkComponent = item.slug ? LinkComponent : "a";
if (item.itemType === "separator") {
return /* @__PURE__ */ React.createElement(
DropdownMenuSeparator,
{
key: index,
className: classNames == null ? void 0 : classNames.separator
}
);
} else if (item.itemType === "label") {
return /* @__PURE__ */ React.createElement(DropdownMenuLabel, { key: index }, item.label);
} else if (item.itemType === "radio") {
let dd = item.currentOption;
return /* @__PURE__ */ React.createElement(DropdownMenuSub, { key: index }, /* @__PURE__ */ React.createElement(
DropdownMenuSubTrigger,
{
dir: direction,
className: cn(sizeStyles[size])
},
item.icon && item.icon,
item.label && item.label
), /* @__PURE__ */ React.createElement(DropdownMenuSubContent, null, /* @__PURE__ */ React.createElement(
DropdownMenuRadioGroup,
{
value: values[index],
onValueChange: (e) => {
let newValues = [...values];
newValues[index] = e;
setValues(newValues);
console.log("changing to ", e);
if (item.onOptionChange) {
item.onOptionChange(e);
}
}
},
(_a = item.options) == null ? void 0 : _a.map((opt, i) => /* @__PURE__ */ React.createElement(DropdownMenuRadioItem, { key: i, value: opt.value }, opt.label))
)));
} else if (item.itemType === "custom") {
return /* @__PURE__ */ React.createElement("div", { key: index }, item.content);
} else {
return item.subitems ? /* @__PURE__ */ React.createElement(DropdownMenuSub, { key: index }, /* @__PURE__ */ React.createElement(
DropdownMenuSubTrigger,
{
dir: direction,
className: cn(sizeStyles[size])
},
item.icon && item.icon,
item.label && item.label
), /* @__PURE__ */ React.createElement(import_react.Portal, null, /* @__PURE__ */ React.createElement(DropdownMenuSubContent, null, item.subitems.map((subitem, subIndex) => {
const SubitemLinkComponent = subitem.slug ? LinkComponent : "a";
return /* @__PURE__ */ React.createElement(
DropdownMenuItem,
{
key: subIndex,
LinkComponent: SubitemLinkComponent,
slug: subitem.slug,
disabled: subitem.disabled,
className: cn(
sizeStyles[size],
!item.icon && !item.label ? "hawa-px-0 hawa-py-0 focus:hawa-bg-transparent" : "focus:hawa-bg-accent"
),
onMouseDown: (event) => {
if (event.button === 1 || event.button === 0 && event.ctrlKey) {
event.preventDefault();
if (subitem.onMiddleClick) {
subitem.onMiddleClick(item.value);
}
}
},
onSelect: () => {
subitem.action && subitem.action();
if (onItemSelect) {
onItemSelect(subitem.value);
}
}
},
subitem.icon && subitem.icon,
subitem.label && subitem.label
);
})))) : /* @__PURE__ */ React.createElement(
DropdownMenuItem,
{
LinkComponent: ItemLinkComponent,
slug: item.slug,
key: index,
disabled: item.disabled,
onMouseDown: (event) => {
if (event.button === 1 || event.button === 0 && event.ctrlKey) {
event.preventDefault();
if (item.onMiddleClick) {
item.onMiddleClick(item.value);
}
}
},
onClick: (event) => {
if (item.onClick) {
item.onClick(item.value);
}
},
onSelect: (e) => {
if (item.presist) {
e.preventDefault();
}
if (item.action) {
item.action();
if (onItemSelect) {
onItemSelect(item.value);
}
} else {
if (onItemSelect) {
onItemSelect(item.value);
}
}
},
end: item.end,
shortcut: item.shortcut,
badged: item.badged,
className: cn(
sizeStyles[size],
!item.icon && !item.label ? "hawa-px-0 hawa-py-0 focus:hawa-bg-transparent" : "focus:hawa-bg-accent",
item.presist && "focus:hawa-bg-transparent",
classNames == null ? void 0 : classNames.item
)
},
item.icon && item.icon,
item.label && item.label
);
}
})
))
);
};
// layout/appTopbar/AppTopbar.tsx
var AppTopbar = ({ ...props }) => {
const isRTL = props.direction === "ltr";
const size = 1200;
return /* @__PURE__ */ import_react2.default.createElement(
"div",
{
className: cn(
"hawa-fixed hawa-left-0 hawa-right-0 hawa-top-0 hawa-z-30 hawa-flex hawa-h-14 hawa-w-full hawa-items-center hawa-justify-between hawa-border-b hawa-bg-primary-foreground hawa-p-2",
isRTL ? "hawa-flex-row-reverse" : "hawa-flex-row"
)
},
size > 600 ? /* @__PURE__ */ import_react2.default.createElement(
"div",
null,
"page title"
) : (
// Mobile Drawer Menu Button
/* @__PURE__ */ import_react2.default.createElement(
"div",
{
dir: props.direction,
className: "hawa-flex hawa-items-center hawa-justify-center hawa-gap-0.5"
},
/* @__PURE__ */ import_react2.default.createElement(
"div",
{
className: "hawa-z-40 hawa-mx-1 hawa-cursor-pointer hawa-rounded hawa-p-2 hawa-transition-all hover:hawa-bg-gray-100"
},
/* @__PURE__ */ import_react2.default.createElement(
"svg",
{
stroke: "currentColor",
fill: "currentColor",
strokeWidth: 0,
viewBox: "0 0 20 20",
"aria-hidden": "true",
height: "1.6em",
width: "1.6em"
},
/* @__PURE__ */ import_react2.default.createElement(
"path",
{
fillRule: "evenodd",
clipRule: "evenodd",
d: "M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
}
)
)
),
"Mobile title"
)
),
/* @__PURE__ */ import_react2.default.createElement(
"div",
{
className: cn(
"hawa-flex hawa-gap-2 dark:hawa-text-white",
isRTL ? "hawa-flex-row-reverse" : "hawa-flex-row"
)
},
size > 600 ? /* @__PURE__ */ import_react2.default.createElement(
"div",
{
className: isRTL ? "hawa-text-left hawa-text-xs" : "hawa-text-right hawa-text-xs"
},
/* @__PURE__ */ import_react2.default.createElement("div", { className: "hawa-font-bold" }, props.username),
" ",
/* @__PURE__ */ import_react2.default.createElement("div", null, props.email)
) : null,
/* @__PURE__ */ import_react2.default.createElement(
DropdownMenu,
{
triggerClassname: "hawa-mx-2",
align: "end",
alignOffset: 8,
side: "bottom",
sideOffset: 5,
direction: isRTL ? "rtl" : "ltr",
items: props.profileMenuItems || [],
onItemSelect: (e) => console.log("selecting item ", e),
trigger: /* @__PURE__ */ import_react2.default.createElement("div", { className: "hawa-relative hawa-h-8 hawa-w-8 hawa-cursor-pointer hawa-overflow-clip hawa-rounded hawa-ring-1 hawa-ring-primary/30 dark:hawa-bg-gray-600" }, props.avatarImage ? /* @__PURE__ */ import_react2.default.createElement("img", { src: props.avatarImage, alt: "User Avatar" }) : /* @__PURE__ */ import_react2.default.createElement(
"svg",
{
"aria-label": "Avatar Icon",
className: "hawa-absolute hawa--left-1 hawa-h-10 hawa-w-10 hawa-text-gray-400",
fill: "currentColor",
viewBox: "0 0 20 20"
},
/* @__PURE__ */ import_react2.default.createElement(
"path",
{
fillRule: "evenodd",
d: "M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z",
clipRule: "evenodd"
}
)
))
}
)
)
);
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
AppTopbar
});
//# sourceMappingURL=index.js.map