@sikka/hawa
Version:
Modern UI Kit made with Tailwind
1,318 lines (1,304 loc) • 144 kB
JavaScript
"use client";
import {
Alert,
Checkbox,
Input,
PhoneInput,
PinInput,
PinInputGroup,
PinInputRoot,
PinInputSeperator,
PinInputSlot,
Popover,
PopoverContent,
PopoverPortal,
PopoverRoot,
PopoverTrigger,
Progress,
Radio,
ScrollArea,
ScrollBar,
Select,
Separator,
StopPropagationWrapper,
Tabs,
TabsContent,
TabsList,
TabsTrigger,
Textarea
} from "../chunk-RE6OFIBP.mjs";
import {
useClipboard
} from "../chunk-WL7C2A5D.mjs";
import {
Sheet,
SheetClose,
SheetContent,
SheetDescription,
SheetFooter,
SheetHeader,
SheetOverlay,
SheetPortal,
SheetTitle,
SheetTrigger
} from "../chunk-YHVUX2MP.mjs";
import {
Button,
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
CheckMark,
Chip,
DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuRadio,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuRoot,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuTrigger,
EyeIcon,
HelperText,
HiddenEyeIcon,
Label,
Loading,
Logos,
Portal,
Skeleton,
Tooltip,
UncheckMark,
buttonVariants,
calculateLuminance,
cn
} from "../chunk-GGWTBYZF.mjs";
import {
__require
} from "../chunk-2LUXOXAL.mjs";
// elements/accordion/Accordion.tsx
import * as React3 from "react";
import * as AccordionPrimitive3 from "@radix-ui/react-accordion";
// elements/accordion/AccordionContent.tsx
import * as React from "react";
import * as AccordionPrimitive from "@radix-ui/react-accordion";
var AccordionContent = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React.createElement(
AccordionPrimitive.Content,
{
ref,
className: !props.unstyled ? 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
) : className,
...props
},
/* @__PURE__ */ React.createElement("div", { className: "hawa-bg-background hawa-p-4" }, children)
));
AccordionContent.displayName = AccordionPrimitive.Content.displayName;
// elements/accordion/AccordionTrigger.tsx
import * as React2 from "react";
import * as AccordionPrimitive2 from "@radix-ui/react-accordion";
var AccordionTrigger = React2.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React2.createElement(AccordionPrimitive2.Header, { className: "hawa-flex" }, /* @__PURE__ */ React2.createElement(
AccordionPrimitive2.Trigger,
{
ref,
className: !props.unstyled ? cn(
"hawa-flex hawa-flex-1 hawa-items-center hawa-justify-between hawa-bg-muted/50 hawa-p-4 hawa-font-medium hawa-transition-all [&[data-state=open]>svg]:hawa-rotate-180",
props.disabled ? "hawa-bg-muted/30 hawa-text-muted-foreground/50" : "hover:hawa-bg-muted",
className
) : className,
...props
},
children,
!props.hideArrow && /* @__PURE__ */ React2.createElement(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: "24",
height: "24",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round",
className: "hawa-icon hawa-shrink-0 hawa-transition-transform hawa-duration-200"
},
/* @__PURE__ */ React2.createElement("path", { d: "m6 9 6 6 6-6" })
)
)));
AccordionTrigger.displayName = AccordionPrimitive2.Trigger.displayName;
// elements/accordion/Accordion.tsx
var Accordion = React3.forwardRef(
({
items,
design = "default",
itemClassNames,
triggerclassNames,
contentclassNames,
className,
...props
}, ref) => /* @__PURE__ */ React3.createElement(AccordionPrimitive3.Root, { type: props.type, collapsible: true }, /* @__PURE__ */ React3.createElement(
"div",
{
className: cn("hawa-flex hawa-flex-col", {
"hawa-gap-4": design === "separated",
"hawa-gap-0": design === "default"
})
},
items.map((item, index) => /* @__PURE__ */ React3.createElement(
AccordionPrimitive3.Item,
{
disabled: item.disabled || false,
className: cn(itemClassNames, "hawa-rounded"),
key: index,
value: `item-${index}`
},
/* @__PURE__ */ React3.createElement(
AccordionTrigger,
{
disabled: item.disabled || false,
className: cn(
"hawa-transition-all hawa-text-start",
design === "separated" ? "hawa-rounded data-[state=open]:hawa-rounded-b-none" : {
"hawa-rounded-t": index === 0,
"data-[state=closed]:hawa-rounded-b": index === items.length - 1
},
triggerclassNames
)
},
/* @__PURE__ */ React3.createElement(
"span",
{
className: cn(
"hawa-flex hawa-flex-row",
item.chip && "hawa-gap-2"
)
},
item.trigger,
" ",
item.chip && /* @__PURE__ */ React3.createElement(Chip, { ...item.chip })
)
),
/* @__PURE__ */ React3.createElement(
AccordionContent,
{
"aria-disabled": item.disabled || false,
className: cn(
"hawa-border hawa-transition-all",
design === "separated" ? "hawa-rounded data-[state=open]:hawa-rounded-t-none" : {
"data-[state=open]:hawa-rounded-b": index === items.length - 1
},
contentclassNames
)
},
item.content
)
))
))
);
Accordion.displayName = "Accordion";
// elements/accordion/AccordionItem.tsx
import * as React4 from "react";
import * as AccordionPrimitive4 from "@radix-ui/react-accordion";
var AccordionItem = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React4.createElement(AccordionPrimitive4.Item, { ref, className: cn(className), ...props }));
AccordionItem.displayName = "AccordionItem";
// elements/accordion/AccordionRoot.tsx
import * as AccordionPrimitive5 from "@radix-ui/react-accordion";
var AccordionRoot = AccordionPrimitive5.Root;
// elements/navigationMenu/NavigationMenu.tsx
import * as React5 from "react";
import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
import { cva } from "class-variance-authority";
var navigationMenuTriggerStyle = cva(
"hawa-group hawa-inline-flex hawa-h-10 hawa-w-max hawa-items-center hawa-gap-1 hawa-justify-center hawa-rounded-md hawa-bg-background hawa-px-4 hawa-py-2 hawa-text-sm hawa-font-medium hawa-transition-colors hover:hawa-bg-accent hover:hawa-text-accent-foreground focus:hawa-bg-accent focus:hawa-text-accent-foreground focus:hawa-outline-none disabled:hawa-pointer-events-none disabled:hawa-opacity-50 data-[active]:hawa-bg-accent/50 "
);
var NavigationMenuRoot = React5.forwardRef(({ className, children, viewportClassNames, ...props }, ref) => /* @__PURE__ */ React5.createElement(
NavigationMenuPrimitive.Root,
{
ref,
className: cn(
"hawa-relative hawa-z-10 hawa-flex hawa-flex-1 hawa-items-center hawa-justify-center",
// "hawa-max-w-max",
className
),
...props
},
children,
/* @__PURE__ */ React5.createElement(NavigationMenuViewport, { className: viewportClassNames })
));
var NavigationMenuList = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React5.createElement(
NavigationMenuPrimitive.List,
{
ref,
className: cn(
"hawa-group hawa-flex hawa-flex-1 hawa-list-none hawa-items-center hawa-justify-center hawa-gap-1",
className
),
...props
}
));
var NavigationMenuTrigger = React5.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React5.createElement(
NavigationMenuPrimitive.Trigger,
{
ref,
className: cn(navigationMenuTriggerStyle(), "hawa-group", className),
...props
},
children,
/* @__PURE__ */ React5.createElement(
"svg",
{
"aria-label": "Chevron Icon",
xmlns: "http://www.w3.org/2000/svg",
width: "24",
height: "24",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round",
"aria-hidden": "true",
className: "hawa-icon hawa-relative hawa-top-[1px] hawa-transition hawa-duration-200 group-data-[state=open]:hawa-rotate-180"
},
/* @__PURE__ */ React5.createElement("path", { d: "m6 9 6 6 6-6" })
)
));
var NavigationMenuContent = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React5.createElement(
NavigationMenuPrimitive.Content,
{
ref,
className: cn(
"hawa-absolute hawa-left-0 hawa-top-0 hawa-w-full hawa-rounded",
// "md:hawa-absolute md:hawa-w-auto hawa-left-0 hawa-top-0 ",
// animation
"data-[motion^=from-]:hawa-animate-in data-[motion^=to-]:hawa-animate-out data-[motion^=from-]:hawa-fade-in data-[motion^=to-]:hawa-fade-out data-[motion=from-end]:hawa-slide-in-from-right-52 data-[motion=from-start]:hawa-slide-in-from-left-52 data-[motion=to-end]:hawa-slide-out-to-right-52 data-[motion=to-start]:hawa-slide-out-to-left-52",
className
),
...props
}
));
var StandardNavigationMenuItem = ({ icon, title, subtitle, ...linkProps }) => /* @__PURE__ */ React5.createElement(NavigationMenuLink, { ...linkProps }, /* @__PURE__ */ React5.createElement("div", { className: "hawa-flex hawa-max-w-md hawa-cursor-pointer hawa-flex-row hawa-items-center hawa-gap-4 hawa-rounded-inner hawa-p-4 hawa-py-2 hawa-transition-all hover:hawa-bg-muted" }, icon && icon, /* @__PURE__ */ React5.createElement("div", { className: "hawa-flex hawa-flex-col" }, /* @__PURE__ */ React5.createElement("h1", { className: "hawa-text-xl hawa-font-bold" }, title), /* @__PURE__ */ React5.createElement("p", { className: "hawa-text-sm" }, subtitle))));
var NavigationMenuViewport = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React5.createElement(
"div",
{
className: cn(
"hawa-absolute hawa-top-full hawa-flex hawa-w-full hawa-justify-center"
)
},
/* @__PURE__ */ React5.createElement(
NavigationMenuPrimitive.Viewport,
{
className: cn(
"hawa-origin-top-center hawa-relative hawa-mt-1.5 hawa-w-full hawa-overflow-hidden hawa-rounded-md hawa-border hawa-bg-popover hawa-text-popover-foreground hawa-shadow-lg data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-zoom-out-95 data-[state=open]:hawa-zoom-in-90",
// hawa-h-[var(--radix-navigation-menu-viewport-height)]
// "md:hawa-w-[var(--radix-navigation-menu-viewport-width)]",
className
),
style: {
height: "calc(var(--radix-navigation-menu-viewport-height) + 1px)"
},
ref,
...props
}
)
));
var NavigationMenuIndicator = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React5.createElement(
NavigationMenuPrimitive.Indicator,
{
ref,
className: cn(
"hawa-top-full hawa-z-[1] hawa-flex hawa-h-1.5 hawa-items-end hawa-justify-center hawa-overflow-hidden data-[state=visible]:hawa-animate-in data-[state=hidden]:hawa-animate-out data-[state=hidden]:hawa-fade-out data-[state=visible]:hawa-fade-in",
className
),
...props
},
/* @__PURE__ */ React5.createElement("div", { className: "hawa-relative hawa-top-[60%] hawa-h-2 hawa-w-2 hawa-rotate-45 hawa-rounded-tl-sm hawa-bg-border hawa-shadow-md" })
));
var NavigationMenu = ({
viewportClassNames,
rootClassNames,
triggerClassNames,
actionFirst,
...props
}) => {
return /* @__PURE__ */ React5.createElement(
NavigationMenuRoot,
{
dir: props.direction,
delayDuration: 0,
className: rootClassNames,
viewportClassNames
},
/* @__PURE__ */ React5.createElement(NavigationMenuList, null, props.items.map((item, i) => /* @__PURE__ */ React5.createElement(NavigationMenuItem, { key: i }, item.content ? /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(NavigationMenuTrigger, { className: cn(triggerClassNames) }, item.trigger), /* @__PURE__ */ React5.createElement(NavigationMenuContent, null, item.content)) : /* @__PURE__ */ React5.createElement(
NavigationMenuLink,
{
href: actionFirst ? void 0 : item.path,
onClick: () => {
if (item.action) {
item.action();
}
},
className: cn(
navigationMenuTriggerStyle(),
"hawa-cursor-pointer hawa-select-none",
triggerClassNames
)
},
item.trigger
))))
);
};
var NavigationMenuItem = NavigationMenuPrimitive.Item;
var NavigationMenuLink = NavigationMenuPrimitive.Link;
NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
NavigationMenuRoot.displayName = NavigationMenuPrimitive.Root.displayName;
NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;
NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName;
// elements/dialog/Dialog.tsx
import * as React6 from "react";
import * as DialogPrimitive from "@radix-ui/react-dialog";
var Dialog = DialogPrimitive.Root;
var DialogTrigger = DialogPrimitive.Trigger;
var DialogPortal = ({ ...props }) => /* @__PURE__ */ React6.createElement(DialogPrimitive.Portal, { ...props });
var DialogOverlay = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React6.createElement(
DialogPrimitive.Overlay,
{
ref,
className: cn(
"hawa-fixed hawa-inset-0 hawa-z-50 hawa-bg-background/80 hawa-backdrop-blur-sm 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",
className
),
...props
}
));
var DialogContent = React6.forwardRef(
({
ids,
className,
classNames,
children,
persist,
hideCloseButton,
overlayProps,
...props
}, ref) => /* @__PURE__ */ React6.createElement(DialogPortal, { container: props.container }, /* @__PURE__ */ React6.createElement(
DialogOverlay,
{
className: classNames == null ? void 0 : classNames.overlay,
id: ids == null ? void 0 : ids.overlay,
...overlayProps
}
), /* @__PURE__ */ React6.createElement(
DialogPrimitive.Content,
{
onPointerDownOutside: (e) => {
if (persist) {
e.preventDefault();
}
},
ref,
className: cn(
"hawa-fixed hawa-left-[50%] hawa-top-[50%] hawa-z-50 hawa-grid hawa-w-[90%] hawa-max-w-lg hawa-translate-x-[-50%] hawa-translate-y-[-50%] hawa-gap-4 hawa-border hawa-bg-background hawa-p-6 hawa-shadow-lg hawa-transition-all hawa-duration-200 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-[state=closed]:hawa-slide-out-to-left-1/2 data-[state=closed]:hawa-slide-out-to-top-[48%] data-[state=open]:hawa-slide-in-from-left-1/2 data-[state=open]:hawa-slide-in-from-top-[48%] hawa-rounded md:hawa-w-full",
className
),
...props
},
children,
!hideCloseButton && /* @__PURE__ */ React6.createElement(
DialogPrimitive.Close,
{
className: cn(
"hawa-absolute hawa-top-4 hawa-rounded hawa-opacity-70 hawa-ring-offset-background hawa-transition-opacity hover:hawa-opacity-100 focus:hawa-outline-none focus:hawa-ring-2 focus:hawa-ring-ring focus:hawa-ring-offset-2 disabled:hawa-pointer-events-none data-[state=open]:hawa-bg-accent data-[state=open]:hawa-text-muted-foreground",
props.dir === "rtl" ? "hawa-left-4" : "hawa-right-4",
classNames == null ? void 0 : classNames.closeButton
),
id: ids == null ? void 0 : ids.closeButton
},
/* @__PURE__ */ React6.createElement(
"svg",
{
id: ids == null ? void 0 : ids.closeIcon,
"aria-label": "Close Icon",
"aria-hidden": "true",
className: "hawa-h-5 hawa-w-5",
fill: "currentColor",
viewBox: "0 0 20 20"
},
/* @__PURE__ */ React6.createElement(
"path",
{
fillRule: "evenodd",
d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
clipRule: "evenodd"
}
)
),
/* @__PURE__ */ React6.createElement("span", { className: "hawa-sr-only" }, "Close")
)
))
);
var DialogCarouselContent = React6.forwardRef(
({
className,
children,
onPrev,
persist,
hideCloseButton,
hidePrevButton,
...props
}, ref) => /* @__PURE__ */ React6.createElement(DialogPortal, null, /* @__PURE__ */ React6.createElement(DialogOverlay, null), /* @__PURE__ */ React6.createElement(
DialogPrimitive.Content,
{
onPointerDownOutside: (e) => {
if (persist) {
e.preventDefault();
}
},
ref,
className: cn(
"hawa-fixed hawa-left-[50%] hawa-top-[50%] hawa-z-50 hawa-grid hawa-w-full hawa-max-w-lg hawa-translate-x-[-50%] hawa-translate-y-[-50%] hawa-gap-4 hawa-border hawa-bg-background hawa-p-6 hawa-pt-14 hawa-shadow-lg hawa-transition-all hawa-duration-200 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-[state=closed]:hawa-slide-out-to-left-1/2 data-[state=closed]:hawa-slide-out-to-top-[48%] data-[state=open]:hawa-slide-in-from-left-1/2 data-[state=open]:hawa-slide-in-from-top-[48%] sm:hawa-rounded md:hawa-w-full",
className
),
...props
},
children,
/* @__PURE__ */ React6.createElement(
"div",
{
className: cn(
"hawa-absolute hawa-top-0 hawa-flex hawa-w-full hawa-flex-row hawa-p-4",
onPrev ? "hawa-justify-between" : "hawa-justify-end"
)
},
hidePrevButton ? /* @__PURE__ */ React6.createElement("div", null) : /* @__PURE__ */ React6.createElement(
"div",
{
onClick: onPrev,
className: cn(
"hawa-end-0 hawa-cursor-pointer hawa-rounded hawa-opacity-70 hawa-ring-offset-background hawa-transition-opacity hover:hawa-opacity-100 focus:hawa-outline-none focus:hawa-ring-2 focus:hawa-ring-ring focus:hawa-ring-offset-2 disabled:hawa-pointer-events-none data-[state=open]:hawa-bg-accent data-[state=open]:hawa-text-muted-foreground",
props.dir === "rtl" && "hawa-rotate-180"
)
},
/* @__PURE__ */ React6.createElement(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: "24",
height: "24",
viewBox: "0 0 24 24",
fill: "none",
className: "hawa-h-6 hawa-w-6",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round"
},
/* @__PURE__ */ React6.createElement("path", { d: "m15 18-6-6 6-6" })
)
),
!hideCloseButton && /* @__PURE__ */ React6.createElement(
DialogPrimitive.Close,
{
className: cn(
"hawa-end-0 hawa-rounded hawa-opacity-70 hawa-ring-offset-background hawa-transition-opacity hover:hawa-opacity-100 focus:hawa-outline-none focus:hawa-ring-2 focus:hawa-ring-ring focus:hawa-ring-offset-2 disabled:hawa-pointer-events-none data-[state=open]:hawa-bg-accent data-[state=open]:hawa-text-muted-foreground",
props.dir === "rtl" ? "hawa-left-4" : "hawa-right-4"
)
},
/* @__PURE__ */ React6.createElement(
"svg",
{
"aria-label": "Close Icon",
"aria-hidden": "true",
className: "hawa-h-6 hawa-w-6",
fill: "currentColor",
viewBox: "0 0 20 20"
},
/* @__PURE__ */ React6.createElement(
"path",
{
fillRule: "evenodd",
d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
clipRule: "evenodd"
}
)
),
/* @__PURE__ */ React6.createElement("span", { className: "hawa-sr-only" }, "Close")
)
)
))
);
var DialogHeader = ({
className,
...props
}) => /* @__PURE__ */ React6.createElement(
"div",
{
className: cn(
"hawa-flex hawa-flex-col hawa-space-y-1.5 hawa-text-center sm:hawa-text-left",
className
),
...props
}
);
var DialogTitle = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React6.createElement(
DialogPrimitive.Title,
{
ref,
className: cn(
"hawa-text-start hawa-text-lg hawa-font-semibold hawa-leading-none hawa-tracking-tight",
className
),
...props
}
));
var DialogDescription = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React6.createElement(
DialogPrimitive.Description,
{
ref,
className: cn(
"hawa-text-start hawa-text-sm hawa-text-muted-foreground",
className
),
...props
}
));
var DialogFooter = ({
className,
...props
}) => /* @__PURE__ */ React6.createElement(
"div",
{
className: cn(
"hawa-flex hawa-flex-col xs:hawa-flex-row sm:hawa-justify-end hawa-gap-2",
className
),
...props
}
);
var DialogCarousel = ({
stepsApi,
stepsRef,
children,
direction
}) => {
React6.useEffect(() => {
if (stepsApi) {
stepsApi.reInit();
}
}, [stepsApi, children]);
return /* @__PURE__ */ React6.createElement("div", { className: "hawa-overflow-hidden" }, /* @__PURE__ */ React6.createElement("div", { ref: stepsRef, dir: direction }, /* @__PURE__ */ React6.createElement(
"div",
{
className: "hawa-flex",
style: {
transition: "height 0.2s"
}
},
React6.Children.map(children, (child, index) => /* @__PURE__ */ React6.createElement(
"div",
{
className: cn(
"hawa-flex hawa-h-fit hawa-flex-[0_0_100%] hawa-items-center hawa-justify-center"
),
key: index
},
child
))
)));
};
var DialogSteps = ({
currentStep,
visibleStepRef,
children
}) => {
const [dialogHeight, setDialogHeight] = React6.useState(null);
React6.useEffect(() => {
if (visibleStepRef.current) {
setDialogHeight(visibleStepRef.current.offsetHeight);
console.log("height is ", visibleStepRef.current.offsetHeight);
}
}, [currentStep, visibleStepRef]);
return /* @__PURE__ */ React6.createElement(
"div",
{
className: "hawa-relative hawa-overflow-clip",
style: {
height: dialogHeight || "fit-content",
transition: "height 0.2s"
}
},
React6.Children.map(children, (child, index) => /* @__PURE__ */ React6.createElement(
"div",
{
ref: currentStep === `step-${index + 1}` ? visibleStepRef : null,
className: cn(
currentStep === `step-${index + 1}` ? "hawa-visible hawa-block" : "hawa-invisible hawa-hidden"
)
},
child
))
);
};
var DialogStep = ({
id,
children,
className,
stepRef
}) => {
return /* @__PURE__ */ React6.createElement(
"div",
{
id,
ref: stepRef,
className: cn("hawa-w-full hawa-px-1", className)
},
children
);
};
var DialogBody = ({ children, className }) => {
return /* @__PURE__ */ React6.createElement("div", { className: cn("hawa-py-6", className) }, children);
};
DialogBody.displayName = "DialogBody";
DialogStep.displayName = "DialogStep";
DialogSteps.displayName = "DialogSteps";
DialogCarousel.displayName = "DialogCarousel";
DialogCarouselContent.displayName = "DialogCarouselContent";
DialogHeader.displayName = "DialogHeader";
DialogFooter.displayName = "DialogFooter";
DialogTitle.displayName = DialogPrimitive.Title.displayName;
DialogPortal.displayName = DialogPrimitive.Portal.displayName;
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
DialogContent.displayName = DialogPrimitive.Content.displayName;
DialogDescription.displayName = DialogPrimitive.Description.displayName;
// elements/avatar/Avatar.tsx
import React8 from "react";
// elements/fileUploader/FileUploader.tsx
import React7, { useRef } from "react";
var FileUploader = ({ handleFile, className }) => {
const hiddenFileInput = useRef(null);
const handleClick = () => {
var _a;
(_a = hiddenFileInput.current) == null ? void 0 : _a.click();
};
const handleChange = (event) => {
const fileUploaded = event.target.files[0];
handleFile(fileUploaded);
};
return /* @__PURE__ */ React7.createElement("div", { className }, /* @__PURE__ */ React7.createElement("div", { className: "hawa-h-full hawa-w-full", onClick: handleClick }), /* @__PURE__ */ React7.createElement(
"input",
{
type: "file",
onChange: handleChange,
ref: hiddenFileInput,
style: { display: "none" }
}
));
};
// elements/avatar/Avatar.tsx
var Avatar = ({
isUploadable,
hideIcon,
src,
alt,
size = "default",
radius = "inherit",
icon,
className,
...props
}) => {
let sizeStyles2 = {
"2xs": "hawa-h-4 hawa-w-4",
xs: "hawa-h-6 hawa-w-6",
sm: "hawa-h-8 hawa-w-8",
default: "hawa-h-10 hawa-w-10",
lg: "hawa-h-12 hawa-w-12",
xl: "hawa-h-14 hawa-w-14",
"2xl": "hawa-h-16 hawa-w-16",
"3xl": "hawa-h-[72px] hawa-w-[72px]",
"4xl": "hawa-h-20 hawa-w-20",
"5xl": "hawa-h-[88px] hawa-w-[88px]",
"6xl": "hawa-h-24 hawa-w-24"
};
let radiusStyles = {
full: "hawa-rounded-full",
inherit: "hawa-rounded",
none: "hawa-rounded-none"
};
return /* @__PURE__ */ React8.createElement(
"div",
{
className: cn(
"hawa-relative hawa-bg-card hawa-p-0",
sizeStyles2[size],
radiusStyles[radius],
className
)
},
/* @__PURE__ */ React8.createElement(
FileUploader,
{
className: cn(
"hawa-absolute hawa-left-0 hawa-top-0 hawa-w-full hawa-cursor-pointer hawa-bg-red-400 hawa-opacity-0",
sizeStyles2[size],
radiusStyles[radius],
(!isUploadable || !!src) && "hawa-hidden"
)
}
),
/* @__PURE__ */ React8.createElement(
"img",
{
className: cn(
"hawa-blue-400 hawa-object-cover",
sizeStyles2[size],
radiusStyles[radius],
!src && "hawa-hidden"
),
src,
alt
}
),
!src && !hideIcon && /* @__PURE__ */ React8.createElement(
"div",
{
className: cn(
sizeStyles2[size],
"hawa-flex hawa-flex-col hawa-items-center hawa-justify-center"
)
},
icon ? icon : /* @__PURE__ */ React8.createElement(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
style: { width: "50%", opacity: 0.35 },
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round"
},
/* @__PURE__ */ React8.createElement("circle", { cx: "12", cy: "8", r: "5" }),
/* @__PURE__ */ React8.createElement("path", { d: "M20 21a8 8 0 1 0-16 0" })
)
)
);
};
// elements/dataTable/DataTable.tsx
import * as React10 from "react";
import {
flexRender,
getCoreRowModel,
getFilteredRowModel,
getPaginationRowModel,
getExpandedRowModel,
getSortedRowModel,
useReactTable
} from "@tanstack/react-table";
// elements/table/Table.tsx
import * as React9 from "react";
var Table = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React9.createElement("div", { className: "hawa-relative hawa-w-full hawa-overflow-auto hawa-rounded hawa-border" }, /* @__PURE__ */ React9.createElement(
"table",
{
ref,
className: cn("hawa-w-full hawa-caption-bottom hawa-text-sm", className),
...props
}
)));
var TableHeader = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React9.createElement(
"thead",
{
ref,
className: cn("[&_tr]:hawa-border-b", "hawa-bg-muted/50", className),
...props
}
));
var TableHead = React9.forwardRef(
({ className, condensed, clickable, dir, ...props }, ref) => /* @__PURE__ */ React9.createElement(
"th",
{
ref,
className: cn(
"hawa-bg-muted/60 hawa-text-nowrap hawa-text-start hawa-align-middle hawa-font-medium hawa-text-muted-foreground dark:hawa-bg-muted/40 [&:has([role=checkbox])]:hawa-pr-0 [&:not(:last-child)&:not(:first-child)]:hawa-border-x",
dir === "rtl" ? "[&:not(:last-child)]:hawa-border-l" : "[&:not(:last-child)]:hawa-border-r",
condensed ? "hawa-h-8" : "hawa-h-12",
clickable ? "hawa-px-1" : "hawa-px-4",
//First and last columns
clickable ? "[&:not(:last-child)&:not(:first-child)]:hawa-p-1" : "hawa-px-4",
//Columns in between
className
),
...props
}
)
);
var TableBody = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React9.createElement("tbody", { ref, className: cn("hawa-border-none", className), ...props }));
var TableFooter = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React9.createElement(
"tfoot",
{
ref,
className: cn(
"hawa-bg-primary hawa-font-medium hawa-text-primary-foreground",
className
),
...props
}
));
var TableRow = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React9.createElement(
"tr",
{
ref,
className: cn(
"hawa-bg-background hawa-transition-colors data-[state=selected]:hawa-bg-muted",
"[&:not(:last-child)&:not(:first-child)]:hawa-border-y",
"[&:not(:last-child)]:hawa-border-b",
className
),
...props
}
));
var TableCell = React9.forwardRef(
({ className, enablePadding = true, padding = "default", ...props }, ref) => {
let paddingStyles = {
condensed: "hawa-p-0 hawa-px-4",
default: "hawa-p-4",
noPadding: "hawa-p-0"
};
return /* @__PURE__ */ React9.createElement(
"td",
{
ref,
className: cn(
paddingStyles[padding],
// "border-x",
// enablePadding ? "hawa-p-4" : "hawa-p-0",
// props.disablePadding ? "hawa-p-0" : "hawa-p-4",
// props.condensed ? "hawa-p-0 hawa-px-4" : "hawa-p-4",
"hawa-align-middle [&:has([role=checkbox])]:hawa-pr-0",
"[&:not(:last-child)&:not(:first-child)]:hawa-border-x",
// "[&:not(:last-child)]:hawa-border-r",
props.dir === "rtl" ? "[&:not(:last-child)]:hawa-border-l" : "[&:not(:last-child)]:hawa-border-r",
className
),
...props
}
);
}
);
var TableCaption = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React9.createElement(
"caption",
{
ref,
className: cn(
"hawa-mt-4 hawa-text-sm hawa-text-muted-foreground",
className
),
...props
}
));
Table.displayName = "Table";
TableRow.displayName = "TableRow";
TableBody.displayName = "TableBody";
TableHead.displayName = "TableHead";
TableCell.displayName = "TableCell";
TableFooter.displayName = "TableFooter";
TableHeader.displayName = "TableHeader";
TableCaption.displayName = "TableCaption";
// elements/dataTable/DataTable.tsx
var LOCAL_STORAGE_KEY = "@sikka/hawa/data-table-columns";
var DataTable = ({
columns,
data,
paginationPosition = "bottom",
translateFn,
resetSelection,
enableHideColumns,
enableSelection,
enableFiltering,
enableSearch,
enableGoTo,
...props
}) => {
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
const [sorting, setSorting] = React10.useState(
props.defaultSort ? [{ id: props.defaultSort, desc: false }] : []
);
const [columnFilters, setColumnFilters] = React10.useState(
[]
);
const [globalFilter, setGlobalFilter] = React10.useState("");
const [expanded, setExpanded] = React10.useState({});
const [columnVisibility, setColumnVisibility] = React10.useState(() => {
const savedVisibility = localStorage.getItem(LOCAL_STORAGE_KEY);
return savedVisibility ? JSON.parse(savedVisibility) : {};
});
const [rowSelection, setRowSelection] = React10.useState({});
const [selectedFilters, setSelectedFilters] = React10.useState([]);
let mainColumns = enableSelection ? [
{
id: "select",
maxSize: 16,
minSize: 16,
size: 16,
header: ({ table: table2 }) => /* @__PURE__ */ React10.createElement(
Checkbox,
{
dir: props.direction,
id: "select_all",
"aria-label": "Select all",
className: props.direction === "rtl" ? "hawa-ms-4" : "hawa-me-0",
checked: table2.getIsAllPageRowsSelected() || table2.getIsSomePageRowsSelected() && "indeterminate",
onCheckedChange: (value) => table2.toggleAllPageRowsSelected(!!value)
}
),
cell: ({ row }) => /* @__PURE__ */ React10.createElement(
Checkbox,
{
dir: props.direction,
id: "select_row",
className: props.direction === "rtl" ? "hawa-ms-4" : "hawa-me-4",
checked: row.getIsSelected(),
onCheckedChange: (value) => row.toggleSelected(!!value),
"aria-label": "Select row"
}
),
enableSorting: false,
enableHiding: false
},
...columns
] : columns;
const table = useReactTable({
data,
columns: mainColumns,
onExpandedChange: setExpanded,
getExpandedRowModel: getExpandedRowModel(),
onGlobalFilterChange: setGlobalFilter,
onSortingChange: setSorting,
onColumnFiltersChange: setColumnFilters,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
getSortedRowModel: getSortedRowModel(),
getFilteredRowModel: getFilteredRowModel(),
onColumnVisibilityChange: setColumnVisibility,
onRowSelectionChange: setRowSelection,
state: {
sorting,
columnFilters,
columnVisibility,
globalFilter,
rowSelection,
expanded
}
});
const pageText = ((_a = props.texts) == null ? void 0 : _a.page) || "page";
const itemsPerPageOptions = (_b = props.itemsPerPage) == null ? void 0 : _b.map((item) => ({
label: `${item} / ${pageText}`,
value: item
}));
React10.useEffect(() => {
localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(columnVisibility));
}, [columnVisibility]);
React10.useEffect(() => {
setRowSelection({});
}, [resetSelection]);
React10.useEffect(() => {
setColumnVisibility((prev) => {
let newColumnVisibility = {};
columns.forEach((column) => {
var _a2;
const savedVisibility = prev[column.accessorKey];
if (savedVisibility !== void 0) {
newColumnVisibility[column.accessorKey] = savedVisibility;
} else {
newColumnVisibility[column.accessorKey] = !((_a2 = column.meta) == null ? void 0 : _a2.hidden);
}
});
return newColumnVisibility;
});
}, [columns]);
React10.useEffect(() => {
var _a2;
(_a2 = props.filters) == null ? void 0 : _a2.forEach((filter) => {
var _a3;
const activeFilter = selectedFilters.find(
(selectedFilter) => {
var _a4, _b2;
return filter.accessorKey === ((_b2 = (_a4 = props.filters) == null ? void 0 : _a4.find((f) => f.value === selectedFilter)) == null ? void 0 : _b2.accessorKey);
}
);
(_a3 = table.getColumn(filter.accessorKey)) == null ? void 0 : _a3.setFilterValue(activeFilter || "");
});
}, [selectedFilters, props.filters]);
return /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-w-full hawa-flex-col hawa-gap-4" }, (enableSearch || enableHideColumns) && /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-4" }, enableSearch && /* @__PURE__ */ React10.createElement(
Input,
{
inputProps: { title: "" },
forceHideHelperText: true,
placeholder: (_c = props.texts) == null ? void 0 : _c.searchPlaceholder,
value: globalFilter != null ? globalFilter : "",
onChange: (event) => setGlobalFilter(event.target.value),
margin: "none",
className: "hawa-w-full md:hawa-max-w-sm",
endIconProps: { className: "!hawa-end-2" },
endIcon: globalFilter ? /* @__PURE__ */ React10.createElement(
Button,
{
onClick: () => setGlobalFilter(""),
variant: "ghost",
size: "smallIcon",
"aria-label": "Clear Search"
},
/* @__PURE__ */ React10.createElement(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: "16",
height: "16",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round",
className: "hawa-icon hawa-text-muted-foreground"
},
/* @__PURE__ */ React10.createElement("path", { d: "M18 6 6 18" }),
/* @__PURE__ */ React10.createElement("path", { d: "m6 6 12 12" })
)
) : null
}
), enableHideColumns && /* @__PURE__ */ React10.createElement(DropdownMenuRoot, null, /* @__PURE__ */ React10.createElement(DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React10.createElement(
Button,
{
variant: "outline",
className: "hawa-flex hawa-flex-row hawa-gap-2"
},
((_d = props.texts) == null ? void 0 : _d.columns) || "Columns",
/* @__PURE__ */ React10.createElement(
"svg",
{
width: "15",
height: "15",
viewBox: "0 0 15 15",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
},
/* @__PURE__ */ React10.createElement(
"path",
{
d: "M5.5 3C4.67157 3 4 3.67157 4 4.5C4 5.32843 4.67157 6 5.5 6C6.32843 6 7 5.32843 7 4.5C7 3.67157 6.32843 3 5.5 3ZM3 5C3.01671 5 3.03323 4.99918 3.04952 4.99758C3.28022 6.1399 4.28967 7 5.5 7C6.71033 7 7.71978 6.1399 7.95048 4.99758C7.96677 4.99918 7.98329 5 8 5H13.5C13.7761 5 14 4.77614 14 4.5C14 4.22386 13.7761 4 13.5 4H8C7.98329 4 7.96677 4.00082 7.95048 4.00242C7.71978 2.86009 6.71033 2 5.5 2C4.28967 2 3.28022 2.86009 3.04952 4.00242C3.03323 4.00082 3.01671 4 3 4H1.5C1.22386 4 1 4.22386 1 4.5C1 4.77614 1.22386 5 1.5 5H3ZM11.9505 10.9976C11.7198 12.1399 10.7103 13 9.5 13C8.28967 13 7.28022 12.1399 7.04952 10.9976C7.03323 10.9992 7.01671 11 7 11H1.5C1.22386 11 1 10.7761 1 10.5C1 10.2239 1.22386 10 1.5 10H7C7.01671 10 7.03323 10.0008 7.04952 10.0024C7.28022 8.8601 8.28967 8 9.5 8C10.7103 8 11.7198 8.8601 11.9505 10.0024C11.9668 10.0008 11.9833 10 12 10H13.5C13.7761 10 14 10.2239 14 10.5C14 10.7761 13.7761 11 13.5 11H12C11.9833 11 11.9668 10.9992 11.9505 10.9976ZM8 10.5C8 9.67157 8.67157 9 9.5 9C10.3284 9 11 9.67157 11 10.5C11 11.3284 10.3284 12 9.5 12C8.67157 12 8 11.3284 8 10.5Z",
fill: "currentColor",
"fill-rule": "evenodd",
"clip-rule": "evenodd"
}
)
)
)), /* @__PURE__ */ React10.createElement(
DropdownMenuContent,
{
align: props.direction === "rtl" ? "start" : "end"
},
table.getAllColumns().filter((column) => column.getCanHide()).map((column) => {
var _a2, _b2;
return /* @__PURE__ */ React10.createElement(
DropdownMenuCheckboxItem,
{
key: column.id,
checked: column.getIsVisible(),
onCheckedChange: (value) => column.toggleVisibility(!!value)
},
translateFn ? translateFn(
((_a2 = column.columnDef.meta) == null ? void 0 : _a2.i18nKey) ? (_b2 = column.columnDef.meta) == null ? void 0 : _b2.i18nKey : column.id
) : column.id
);
})
))), enableFiltering && ((_e = props.filters) == null ? void 0 : _e.length) && /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex-row hawa-gap-2 hawa-flex" }, (_f = props.filters) == null ? void 0 : _f.map((filter) => {
return /* @__PURE__ */ React10.createElement(
Button,
{
variant: "outline",
className: selectedFilters.includes(filter.value) ? "!hawa-bg-primary !hawa-text-primary-foreground" : "",
size: "xs",
onClick: () => {
var _a2, _b2;
let newSelectedFilters = selectedFilters.filter(
(item) => {
var _a3, _b3;
return ((_b3 = (_a3 = props.filters) == null ? void 0 : _a3.find((f) => f.value === item)) == null ? void 0 : _b3.accessorKey) !== filter.accessorKey;
}
);
if (!selectedFilters.includes(filter.value)) {
newSelectedFilters.push(filter.value);
(_a2 = table.getColumn(filter.accessorKey)) == null ? void 0 : _a2.setFilterValue(filter.value);
} else {
(_b2 = table.getColumn(filter.accessorKey)) == null ? void 0 : _b2.setFilterValue("");
}
setSelectedFilters(newSelectedFilters);
}
},
filter.label
);
})), props.isLoading ? /* @__PURE__ */ React10.createElement(Skeleton, { className: "hawa-h-[130px] hawa-w-full" }) : /* @__PURE__ */ React10.createElement(
"div",
{
className: cn(
"hawa-flex hawa-w-full hawa-gap-4",
paginationPosition === "top" ? "hawa-flex-col-reverse" : "hawa-flex-col"
)
},
/* @__PURE__ */ React10.createElement("div", { className: "hawa-rounded-md" }, /* @__PURE__ */ React10.createElement(Table, null, !props.hideHeader && table.getAllColumns().length > 0 && /* @__PURE__ */ React10.createElement(TableHeader, null, table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ React10.createElement(TableRow, { key: headerGroup.id }, headerGroup.headers.map((header) => {
var _a2;
let isSortable = (_a2 = header.column.columnDef.meta) == null ? void 0 : _a2.sortable;
return /* @__PURE__ */ React10.createElement(
TableHead,
{
key: header.id,
dir: props.direction,
condensed: props.condensed,
clickable: Boolean(isSortable),
style: {
maxWidth: `${header.column.columnDef.maxSize}px !important`,
minWidth: `${header.column.columnDef.minSize}px !important`,
width: `${header.column.columnDef.size}px !important`
}
},
header.isPlaceholder ? null : flexRender(
header.column.columnDef.header,
header.getContext()
)
);
})))), /* @__PURE__ */ React10.createElement(TableBody, null, ((_g = table.getRowModel().rows) == null ? void 0 : _g.length) ? table.getRowModel().rows.map((row) => /* @__PURE__ */ React10.createElement(
TableRow,
{
key: row.id,
"data-state": row.getIsSelected() && "selected"
},
row.getVisibleCells().map((cell) => {
var _a2;
return /* @__PURE__ */ React10.createElement(
TableCell,
{
key: cell.id,
dir: props.direction,
style: {
maxWidth: `${cell.column.columnDef.maxSize}px !important`,
minWidth: `${cell.column.columnDef.minSize}px !important`,
width: `${cell.column.columnDef.size}px !important`
},
padding: props.condensed ? "condensed" : (_a2 = cell.column.columnDef.meta) == null ? void 0 : _a2.padding
},
flexRender(
cell.column.columnDef.cell,
cell.getContext()
)
);
})
)) : /* @__PURE__ */ React10.createElement(TableRow, null, /* @__PURE__ */ React10.createElement(
TableCell,
{
colSpan: columns.length,
className: "hawa-h-24 hawa-text-center"
},
(_h = props.texts) == null ? void 0 : _h.noData
))))),
/* @__PURE__ */ React10.createElement(
"div",
{
className: cn(
"hawa-flex hawa-justify-between hawa-gap-4 tablet:hawa-gap-0",
props.showSelectionCount ? "hawa-flex-col tablet:hawa-flex-row" : "hawa-flex-col mobile:hawa-flex-row"
)
},
!props.showCount && /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-sm hawa-text-muted-foreground" }),
props.showCount || table.getFilteredSelectedRowModel().rows.length > 0 && props.showSelectionCount ? /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-flex-row hawa-h-auto hawa-gap-4" }, /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-flex-row hawa-h-auto hawa-items-center hawa-justify-between" }, props.showCount && /* @__PURE__ */ React10.createElement(
"div",
{
className: "hawa-text-muted-foreground hawa-text-sm",
dir: props.direction
},
/* @__PURE__ */ React10.createElement("span", null, (_i = props.texts) == null ? void 0 : _i.total),
" ",
/* @__PURE__ */ React10.createElement("span", null, table.getFilteredRowModel().rows.length.toLocaleString())
), props.showCount && table.getFilteredSelectedRowModel().rows.length > 0 && props.showSelectionCount && /* @__PURE__ */ React10.createElement("div", { className: "hawa-w-[0.5px] hawa-mx-2 hawa-bg-red-500 hawa-h-full" }), table.getFilteredSelectedRowModel().rows.length > 0 && props.showSelectionCount && /* @__PURE__ */ React10.createElement(
"div",
{
className: "hawa-text-muted-foreground hawa-text-sm",
dir: props.direction
},
table.getFilteredSelectedRowModel().rows.length,
" ",
(_j = props.texts) == null ? void 0 : _j.of,
" ",
table.getFilteredRowModel().rows.length,
" ",
(_k = props.texts) == null ? void 0 : _k.selectedRows
)), table.getFilteredSelectedRowModel().rows.length > 0 && /* @__PURE__ */ React10.createElement("div", { className: "" }, /* @__PURE__ */ React10.createElement(
DropdownMenu,
{
size: "sm",
width: "sm",
direction: props.direction,
items: (props.bulkActions || []).map((action) => ({
...action,
action: () => action.action(
table.getFilteredSelectedRowModel().rows
)
})),
trigger: /* @__PURE__ */ React10.createElement(Button, { size: "xs" }, ((_l = props.texts) == null ? void 0 : _l.bulkAction) || "Bulk Action")
}
))) : null,
/* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-w-full hawa-flex-row hawa-items-center hawa-gap-2 hawa-bg--500 tablet:hawa-w-fit hawa-justify-between" }, enableGoTo && /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-gap-2" }, /* @__PURE__ */ React10.createElement("span", { className: "hawa-text-sm" }, (_m = props.texts) == null ? void 0 : _m.goTo), /* @__PURE__ */ React10.createElement(
"input",
{
max: table.getPageCount(),
min: 0,
type: "number",
defaultValue: table.getState().pagination.pageIndex + 1,
onChange: (e) => {
let page = Number(e.target.value) - 1;
const max = table.getPageCount();
if (!isNaN(page) && Number(page) > max) {
page = max - 1;
}
table.setPageIndex(page);
},
className: "hawa-w-16 hawa-rounded hawa-border hawa-p-1 hawa-px-2 hawa-text-sm placeholder:hawa-text-muted-foreground"
}
)), /* @__PURE__ */ React10.createElement(
DropdownMenu,
{
size: "sm",
width: "sm",
direction: props.direction,
items: itemsPerPageOptions || [
{ label: `10 / ${pageText}`, value: 10 },
{ label: `20 / ${pageText}`, value: 20 },
{ label: `30 / ${pageText}`, value: 30 },
{ label: `40 / ${pageText}`, value: 40 },
{ label: `50 / ${pageText}`, value: 50 }
],
trigger: /* @__PURE__ */ React10.createElement(
Button,
{
variant: "outline",
size: "icon",
className: "hawa-h-fit hawa-w-fit hawa-p-0 hawa-px-2 hawa-py-1 hawa-whitespace-nowrap"
},
`${table.getState().pagination.pageSize} / ${(_n = props.texts) == null ? void 0 : _n.page}`
),
onItemSelect: (e) => table.setPageSize(Number(e))
}
), table.getPageCount() > 1 && /* @__PURE__ */ React10.createElement("div", { className: "hawa-bg--500 hawa-flex hawa-flex-row hawa-gap-2" }, /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-bg--500 hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-sm" }, /* @__PURE__ */ React10.createElement("span", { className: "hawa-flex hawa-items-center hawa-gap-1" }, /* @__PURE__ */ React10.createElement("div", null, (_o = props.texts) =