@m5kdev/web-ui 0.8.2 → 0.8.4

package/dist/src/components/Calendar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.mjs","names":["BigCalendar"],"sources":["../../../src/components/Calendar.tsx"],"sourcesContent":["import dayjs from \"dayjs\";\r\nimport type React from \"react\";\r\nimport { Calendar as BigCalendar, type CalendarProps, dayjsLocalizer } from \"react-big-calendar\";\r\nimport withDragAndDrop from \"react-big-calendar/lib/addons/dragAndDrop\";\r\nimport \"react-big-calendar/lib/addons/dragAndDrop/styles.css\";\r\nimport \"./Calendar.css\";\r\n\r\nconst DnDCalendar = withDragAndDrop(BigCalendar);\r\nconst localizer = dayjsLocalizer(dayjs);\r\n\r\ntype CalendarComponents = NonNullable<CalendarProps[\"components\"]>;\r\nexport type CalendarEventRenderer = CalendarComponents extends { event?: infer T }\r\n  ? Exclude<T, undefined>\r\n  : never;\r\n\r\ninterface DragAndDropCalendarProps extends Omit<CalendarProps, \"localizer\"> {\r\n  onEventDrop?: (args: { event: unknown; start: Date; end: Date }) => void;\r\n  onEventResize?: (args: { event: unknown; start: Date; end: Date }) => void;\r\n  onDragStart?: (args: { event: unknown; action: \"move\" | \"resize\"; direction?: unknown }) => void;\r\n  dragFromOutsideItem?: () => unknown;\r\n  onDropFromOutside?: (args: { start: Date; end: Date; allDay?: boolean }) => void;\r\n  onDragOverFromOutside?: (event: React.DragEvent) => void;\r\n  resizable?: boolean;\r\n}\r\n\r\nconst TypedDnDCalendar = DnDCalendar as React.ComponentType<\r\n  DragAndDropCalendarProps & { localizer: typeof localizer }\r\n>;\r\n\r\nexport const Calendar = (props: DragAndDropCalendarProps) => (\r\n  <TypedDnDCalendar {...props} localizer={localizer} />\r\n);\r\n"],"mappings":";;;;;;;AAOA,MAAM,cAAc,gBAAgBA,WAAY;AAChD,MAAM,YAAY,eAAe,MAAM;AAiBvC,MAAM,mBAAmB;AAIzB,MAAa,YAAY,UACvB,oBAAC,kBAAD;CAAkB,GAAI;CAAkB;CAAa,CAAA"}

package/dist/src/components/CardsSelect.d.mts

@@ -0,0 +1,27 @@
+import * as React$1 from "react";
+
+//#region src/components/CardsSelect.d.ts
+interface CardSelectItem {
+  id: string;
+  title: string;
+  description?: string;
+  content?: React$1.ReactNode;
+  disabled?: boolean;
+  icon?: React$1.ReactNode;
+  onEdit?: (id: string) => void;
+}
+interface CardsSelectProps {
+  items: CardSelectItem[];
+  selectedIds: string[];
+  onSelectionChange: (selectedIds: string[]) => void;
+  maxSelections?: number;
+  className?: string;
+  cardClassName?: string;
+  showCheckbox?: boolean;
+  disabled?: boolean;
+  reversed?: boolean;
+}
+declare const CardsSelect: React$1.ForwardRefExoticComponent<CardsSelectProps & React$1.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { CardSelectItem, CardsSelect, CardsSelectProps };
+//# sourceMappingURL=CardsSelect.d.mts.map

package/dist/src/components/CardsSelect.mjs

@@ -0,0 +1,79 @@
+import { cn } from "../lib/utils.mjs";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./ui/card.mjs";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, Edit } from "lucide-react";
+//#region src/components/CardsSelect.tsx
+const CardsSelect = React$1.forwardRef(({ items, selectedIds, onSelectionChange, maxSelections, className, cardClassName, showCheckbox = true, disabled = false, reversed = false, ...props }, ref) => {
+	const handleCardClick = (itemId) => {
+		if (disabled) return;
+		if (items.find((item) => item.id === itemId)?.disabled) return;
+		if (selectedIds.includes(itemId)) onSelectionChange(selectedIds.filter((id) => id !== itemId));
+		else if (maxSelections && selectedIds.length >= maxSelections) onSelectionChange([...selectedIds.slice(1), itemId]);
+		else onSelectionChange([...selectedIds, itemId]);
+	};
+	const getGridClasses = () => {
+		return "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4 justify-items-center";
+	};
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn(getGridClasses(), className),
+		...props,
+		children: items.map((item) => {
+			const isSelected = reversed ? !selectedIds.includes(item.id) : selectedIds.includes(item.id);
+			const isDisabled = disabled || item.disabled;
+			return /* @__PURE__ */ jsxs(Card, {
+				className: cn("relative cursor-pointer transition-all duration-200 hover:shadow-md w-full", isSelected && "ring-2 ring-primary bg-primary/5 border-primary", isDisabled && "opacity-50 cursor-not-allowed", !isDisabled && "hover:bg-accent/50", cardClassName),
+				onClick: () => handleCardClick(item.id),
+				children: [
+					item.onEdit && /* @__PURE__ */ jsx("div", {
+						className: "absolute top-3 left-3 z-10",
+						children: /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: cn("flex h-6 w-6 items-center justify-center rounded-md transition-colors hover:bg-accent", "text-muted-foreground hover:text-foreground"),
+							onClick: (e) => {
+								e.stopPropagation();
+								item.onEdit?.(item.id);
+							},
+							"aria-label": "Edit",
+							children: /* @__PURE__ */ jsx(Edit, { className: "h-3.5 w-3.5" })
+						})
+					}),
+					showCheckbox && /* @__PURE__ */ jsx("div", {
+						className: "absolute top-3 right-3 z-10",
+						children: /* @__PURE__ */ jsx("div", {
+							className: cn("flex h-5 w-5 items-center justify-center rounded-full border-2 transition-colors", isSelected ? "bg-primary border-primary text-primary-foreground" : "border-muted-foreground/30 bg-background"),
+							children: isSelected && /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" })
+						})
+					}),
+					item.icon && /* @__PURE__ */ jsx("div", {
+						className: "flex items-center justify-center pt-6 pb-4",
+						children: /* @__PURE__ */ jsx("div", {
+							className: "text-5xl text-primary",
+							children: /* @__PURE__ */ jsx("i", { className: `ti ${item.icon}` })
+						})
+					}),
+					/* @__PURE__ */ jsxs(CardHeader, {
+						className: cn("pb-3 text-center", item.icon && "pt-2"),
+						children: [/* @__PURE__ */ jsx(CardTitle, {
+							className: "text-lg leading-tight",
+							children: item.title
+						}), item.description && /* @__PURE__ */ jsx(CardDescription, {
+							className: "text-sm",
+							children: item.description
+						})]
+					}),
+					item.content && /* @__PURE__ */ jsx(CardContent, {
+						className: "pt-0 text-center",
+						children: item.content
+					})
+				]
+			}, item.id);
+		})
+	});
+});
+CardsSelect.displayName = "CardsSelect";
+//#endregion
+export { CardsSelect };
+
+//# sourceMappingURL=CardsSelect.mjs.map

package/dist/src/components/CardsSelect.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardsSelect.mjs","names":["React"],"sources":["../../../src/components/CardsSelect.tsx"],"sourcesContent":["import { Check, Edit } from \"lucide-react\";\r\nimport * as React from \"react\";\r\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from \"./ui/card\";\r\nimport { cn } from \"../lib/utils\";\r\n\r\nexport interface CardSelectItem {\r\n  id: string;\r\n  title: string;\r\n  description?: string;\r\n  content?: React.ReactNode;\r\n  disabled?: boolean;\r\n  icon?: React.ReactNode;\r\n  onEdit?: (id: string) => void;\r\n}\r\n\r\nexport interface CardsSelectProps {\r\n  items: CardSelectItem[];\r\n  selectedIds: string[];\r\n  onSelectionChange: (selectedIds: string[]) => void;\r\n  maxSelections?: number;\r\n  className?: string;\r\n  cardClassName?: string;\r\n  showCheckbox?: boolean;\r\n  disabled?: boolean;\r\n  reversed?: boolean;\r\n}\r\n\r\nconst CardsSelect = React.forwardRef<HTMLDivElement, CardsSelectProps>(\r\n  (\r\n    {\r\n      items,\r\n      selectedIds,\r\n      onSelectionChange,\r\n      maxSelections,\r\n      className,\r\n      cardClassName,\r\n      showCheckbox = true,\r\n      disabled = false,\r\n      reversed = false,\r\n      ...props\r\n    },\r\n    ref\r\n  ) => {\r\n    const handleCardClick = (itemId: string) => {\r\n      if (disabled) return;\r\n\r\n      const item = items.find((item) => item.id === itemId);\r\n      if (item?.disabled) return;\r\n\r\n      const isSelected = selectedIds.includes(itemId);\r\n\r\n      if (isSelected) {\r\n        // Remove from selection\r\n        onSelectionChange(selectedIds.filter((id) => id !== itemId));\r\n      } else {\r\n        // Add to selection\r\n        if (maxSelections && selectedIds.length >= maxSelections) {\r\n          // If max selections reached, replace the first selection\r\n          onSelectionChange([...selectedIds.slice(1), itemId]);\r\n        } else {\r\n          onSelectionChange([...selectedIds, itemId]);\r\n        }\r\n      }\r\n    };\r\n\r\n    const getGridClasses = () => {\r\n      return \"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4 justify-items-center\";\r\n    };\r\n\r\n    return (\r\n      <div ref={ref} className={cn(getGridClasses(), className)} {...props}>\r\n        {items.map((item) => {\r\n          const isSelected = reversed\r\n            ? !selectedIds.includes(item.id)\r\n            : selectedIds.includes(item.id);\r\n          const isDisabled = disabled || item.disabled;\r\n\r\n          return (\r\n            <Card\r\n              key={item.id}\r\n              className={cn(\r\n                \"relative cursor-pointer transition-all duration-200 hover:shadow-md w-full\",\r\n                isSelected && \"ring-2 ring-primary bg-primary/5 border-primary\",\r\n                isDisabled && \"opacity-50 cursor-not-allowed\",\r\n                !isDisabled && \"hover:bg-accent/50\",\r\n                cardClassName\r\n              )}\r\n              onClick={() => handleCardClick(item.id)}\r\n            >\r\n              {/* Edit button */}\r\n              {item.onEdit && (\r\n                <div className=\"absolute top-3 left-3 z-10\">\r\n                  <button\r\n                    type=\"button\"\r\n                    className={cn(\r\n                      \"flex h-6 w-6 items-center justify-center rounded-md transition-colors hover:bg-accent\",\r\n                      \"text-muted-foreground hover:text-foreground\"\r\n                    )}\r\n                    onClick={(e) => {\r\n                      e.stopPropagation();\r\n                      item.onEdit?.(item.id);\r\n                    }}\r\n                    aria-label=\"Edit\"\r\n                  >\r\n                    <Edit className=\"h-3.5 w-3.5\" />\r\n                  </button>\r\n                </div>\r\n              )}\r\n\r\n              {/* Selection indicator */}\r\n              {showCheckbox && (\r\n                <div className=\"absolute top-3 right-3 z-10\">\r\n                  <div\r\n                    className={cn(\r\n                      \"flex h-5 w-5 items-center justify-center rounded-full border-2 transition-colors\",\r\n                      isSelected\r\n                        ? \"bg-primary border-primary text-primary-foreground\"\r\n                        : \"border-muted-foreground/30 bg-background\"\r\n                    )}\r\n                  >\r\n                    {isSelected && <Check className=\"h-3 w-3\" />}\r\n                  </div>\r\n                </div>\r\n              )}\r\n\r\n              {/* Card icon */}\r\n              {item.icon && (\r\n                <div className=\"flex items-center justify-center pt-6 pb-4\">\r\n                  <div className=\"text-5xl text-primary\">\r\n                    <i className={`ti ${item.icon}`} />\r\n                  </div>\r\n                </div>\r\n              )}\r\n\r\n              <CardHeader className={cn(\"pb-3 text-center\", item.icon && \"pt-2\")}>\r\n                <CardTitle className=\"text-lg leading-tight\">{item.title}</CardTitle>\r\n                {item.description && (\r\n                  <CardDescription className=\"text-sm\">{item.description}</CardDescription>\r\n                )}\r\n              </CardHeader>\r\n\r\n              {item.content && (\r\n                <CardContent className=\"pt-0 text-center\">{item.content}</CardContent>\r\n              )}\r\n            </Card>\r\n          );\r\n        })}\r\n      </div>\r\n    );\r\n  }\r\n);\r\n\r\nCardsSelect.displayName = \"CardsSelect\";\r\n\r\nexport { CardsSelect };\r\n"],"mappings":";;;;;;AA2BA,MAAM,cAAcA,QAAM,YAEtB,EACE,OACA,aACA,mBACA,eACA,WACA,eACA,eAAe,MACf,WAAW,OACX,WAAW,OACX,GAAG,SAEL,QACG;CACH,MAAM,mBAAmB,WAAmB;AAC1C,MAAI,SAAU;AAGd,MADa,MAAM,MAAM,SAAS,KAAK,OAAO,OAAO,EAC3C,SAAU;AAIpB,MAFmB,YAAY,SAAS,OAAO,CAI7C,mBAAkB,YAAY,QAAQ,OAAO,OAAO,OAAO,CAAC;WAGxD,iBAAiB,YAAY,UAAU,cAEzC,mBAAkB,CAAC,GAAG,YAAY,MAAM,EAAE,EAAE,OAAO,CAAC;MAEpD,mBAAkB,CAAC,GAAG,aAAa,OAAO,CAAC;;CAKjD,MAAM,uBAAuB;AAC3B,SAAO;;AAGT,QACE,oBAAC,OAAD;EAAU;EAAK,WAAW,GAAG,gBAAgB,EAAE,UAAU;EAAE,GAAI;YAC5D,MAAM,KAAK,SAAS;GACnB,MAAM,aAAa,WACf,CAAC,YAAY,SAAS,KAAK,GAAG,GAC9B,YAAY,SAAS,KAAK,GAAG;GACjC,MAAM,aAAa,YAAY,KAAK;AAEpC,UACE,qBAAC,MAAD;IAEE,WAAW,GACT,8EACA,cAAc,mDACd,cAAc,iCACd,CAAC,cAAc,sBACf,cACD;IACD,eAAe,gBAAgB,KAAK,GAAG;cATzC;KAYG,KAAK,UACJ,oBAAC,OAAD;MAAK,WAAU;gBACb,oBAAC,UAAD;OACE,MAAK;OACL,WAAW,GACT,yFACA,8CACD;OACD,UAAU,MAAM;AACd,UAAE,iBAAiB;AACnB,aAAK,SAAS,KAAK,GAAG;;OAExB,cAAW;iBAEX,oBAAC,MAAD,EAAM,WAAU,eAAgB,CAAA;OACzB,CAAA;MACL,CAAA;KAIP,gBACC,oBAAC,OAAD;MAAK,WAAU;gBACb,oBAAC,OAAD;OACE,WAAW,GACT,oFACA,aACI,sDACA,2CACL;iBAEA,cAAc,oBAAC,OAAD,EAAO,WAAU,WAAY,CAAA;OACxC,CAAA;MACF,CAAA;KAIP,KAAK,QACJ,oBAAC,OAAD;MAAK,WAAU;gBACb,oBAAC,OAAD;OAAK,WAAU;iBACb,oBAAC,KAAD,EAAG,WAAW,MAAM,KAAK,QAAU,CAAA;OAC/B,CAAA;MACF,CAAA;KAGR,qBAAC,YAAD;MAAY,WAAW,GAAG,oBAAoB,KAAK,QAAQ,OAAO;gBAAlE,CACE,oBAAC,WAAD;OAAW,WAAU;iBAAyB,KAAK;OAAkB,CAAA,EACpE,KAAK,eACJ,oBAAC,iBAAD;OAAiB,WAAU;iBAAW,KAAK;OAA8B,CAAA,CAEhE;;KAEZ,KAAK,WACJ,oBAAC,aAAD;MAAa,WAAU;gBAAoB,KAAK;MAAsB,CAAA;KAEnE;MAjEA,KAAK,GAiEL;IAET;EACE,CAAA;EAGX;AAED,YAAY,cAAc"}

package/dist/src/components/CollapsibleSidebarMenuItem.d.mts

@@ -0,0 +1,22 @@
+import { ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { CollapsibleProps } from "@radix-ui/react-collapsible";
+
+//#region src/components/CollapsibleSidebarMenuItem.d.ts
+declare function CollapsibleSidebarMenuItem({
+  children,
+  label,
+  icon,
+  link,
+  badge,
+  ...props
+}: {
+  children: ReactNode;
+  label: string;
+  icon: ReactNode;
+  link: string;
+  badge?: ReactNode;
+} & CollapsibleProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { CollapsibleSidebarMenuItem };
+//# sourceMappingURL=CollapsibleSidebarMenuItem.d.mts.map

package/dist/src/components/CollapsibleSidebarMenuItem.mjs

@@ -0,0 +1,34 @@
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./ui/collapsible.mjs";
+import { SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, useSidebar } from "./ui/sidebar.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRight } from "lucide-react";
+import { Link } from "react-router";
+//#region src/components/CollapsibleSidebarMenuItem.tsx
+function CollapsibleSidebarMenuItem({ children, label, icon, link, badge, ...props }) {
+	const { open } = useSidebar();
+	if (!open) return /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(SidebarMenuButton, {
+		asChild: true,
+		tooltip: label,
+		children: /* @__PURE__ */ jsxs(Link, {
+			to: link,
+			children: [icon, /* @__PURE__ */ jsx("span", { children: label })]
+		})
+	}) });
+	return /* @__PURE__ */ jsx(Collapsible, {
+		asChild: true,
+		className: "group/collapsible",
+		...props,
+		children: /* @__PURE__ */ jsxs(SidebarMenuItem, { children: [/* @__PURE__ */ jsx(CollapsibleTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs(SidebarMenuButton, { children: [
+				icon,
+				badge ? badge : /* @__PURE__ */ jsx("span", { children: label }),
+				/* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" })
+			] })
+		}), /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx(SidebarMenuSub, { children }) })] })
+	});
+}
+//#endregion
+export { CollapsibleSidebarMenuItem };
+
+//# sourceMappingURL=CollapsibleSidebarMenuItem.mjs.map

package/dist/src/components/CollapsibleSidebarMenuItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsibleSidebarMenuItem.mjs","names":[],"sources":["../../../src/components/CollapsibleSidebarMenuItem.tsx"],"sourcesContent":["import type { CollapsibleProps } from \"@radix-ui/react-collapsible\";\r\nimport { ChevronRight } from \"lucide-react\";\r\nimport type { ReactNode } from \"react\";\r\nimport { Link } from \"react-router\";\r\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from \"./ui/collapsible\";\r\nimport {\r\n  SidebarMenuButton,\r\n  SidebarMenuItem,\r\n  SidebarMenuSub,\r\n  useSidebar,\r\n} from \"./ui/sidebar\";\r\n\r\nexport function CollapsibleSidebarMenuItem({\r\n  children,\r\n  label,\r\n  icon,\r\n  link,\r\n  badge,\r\n  ...props\r\n}: {\r\n  children: ReactNode;\r\n  label: string;\r\n  icon: ReactNode;\r\n  link: string;\r\n  badge?: ReactNode;\r\n} & CollapsibleProps) {\r\n  const { open } = useSidebar();\r\n\r\n  if (!open)\r\n    return (\r\n      <SidebarMenuItem>\r\n        <SidebarMenuButton asChild tooltip={label}>\r\n          <Link to={link}>\r\n            {icon}\r\n            <span>{label}</span>\r\n          </Link>\r\n        </SidebarMenuButton>\r\n      </SidebarMenuItem>\r\n    );\r\n\r\n  return (\r\n    <Collapsible asChild className=\"group/collapsible\" {...props}>\r\n      <SidebarMenuItem>\r\n        <CollapsibleTrigger asChild>\r\n          <SidebarMenuButton>\r\n            {icon}\r\n            {badge ? badge : <span>{label}</span>}\r\n            <ChevronRight className=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\r\n          </SidebarMenuButton>\r\n        </CollapsibleTrigger>\r\n        <CollapsibleContent>\r\n          <SidebarMenuSub>{children}</SidebarMenuSub>\r\n        </CollapsibleContent>\r\n      </SidebarMenuItem>\r\n    </Collapsible>\r\n  );\r\n}\r\n"],"mappings":";;;;;;AAYA,SAAgB,2BAA2B,EACzC,UACA,OACA,MACA,MACA,OACA,GAAG,SAOiB;CACpB,MAAM,EAAE,SAAS,YAAY;AAE7B,KAAI,CAAC,KACH,QACE,oBAAC,iBAAD,EAAA,UACE,oBAAC,mBAAD;EAAmB,SAAA;EAAQ,SAAS;YAClC,qBAAC,MAAD;GAAM,IAAI;aAAV,CACG,MACD,oBAAC,QAAD,EAAA,UAAO,OAAa,CAAA,CACf;;EACW,CAAA,EACJ,CAAA;AAGtB,QACE,oBAAC,aAAD;EAAa,SAAA;EAAQ,WAAU;EAAoB,GAAI;YACrD,qBAAC,iBAAD,EAAA,UAAA,CACE,oBAAC,oBAAD;GAAoB,SAAA;aAClB,qBAAC,mBAAD,EAAA,UAAA;IACG;IACA,QAAQ,QAAQ,oBAAC,QAAD,EAAA,UAAO,OAAa,CAAA;IACrC,oBAAC,cAAD,EAAc,WAAU,2FAA4F,CAAA;IAClG,EAAA,CAAA;GACD,CAAA,EACrB,oBAAC,oBAAD,EAAA,UACE,oBAAC,gBAAD,EAAiB,UAA0B,CAAA,EACxB,CAAA,CACL,EAAA,CAAA;EACN,CAAA"}

package/dist/src/components/ColorPicker.d.mts

@@ -0,0 +1,15 @@
+import { InputProps } from "@heroui/react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/ColorPicker.d.ts
+declare function ColorPicker({
+  disableAlpha,
+  value,
+  onValueChange,
+  ...props
+}: InputProps & {
+  disableAlpha?: boolean;
+}): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ColorPicker };
+//# sourceMappingURL=ColorPicker.d.mts.map

package/dist/src/components/ColorPicker.mjs

@@ -0,0 +1,51 @@
+import { useState } from "react";
+import { Button, Input, Popover, PopoverContent, PopoverTrigger } from "@heroui/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PipetteIcon } from "lucide-react";
+import { hexToHsva } from "@uiw/color-convert";
+import Colorful from "@uiw/react-color-colorful";
+//#region src/components/ColorPicker.tsx
+function safeHexToHsva(hex) {
+	try {
+		return hexToHsva(hex);
+	} catch (err) {
+		return {
+			h: 0,
+			s: 0,
+			v: 0,
+			a: 1
+		};
+	}
+}
+function ColorPicker({ disableAlpha = true, value, onValueChange, ...props }) {
+	const [hsva, setHsva] = useState(safeHexToHsva(value || ""));
+	return /* @__PURE__ */ jsx(Input, {
+		onValueChange,
+		value,
+		endContent: /* @__PURE__ */ jsxs(Popover, {
+			placement: "bottom",
+			children: [/* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */ jsx(Button, {
+				isIconOnly: true,
+				"aria-label": "Pick color",
+				size: "sm",
+				variant: "light",
+				children: /* @__PURE__ */ jsx(PipetteIcon, { className: "h-4 w-4 text-foreground" })
+			}) }), /* @__PURE__ */ jsx(PopoverContent, {
+				"aria-label": "Color picker",
+				children: /* @__PURE__ */ jsx(Colorful, {
+					color: hsva,
+					disableAlpha,
+					onChange: (color) => {
+						setHsva(color.hsva);
+						onValueChange?.(color.hex);
+					}
+				})
+			})]
+		}),
+		...props
+	});
+}
+//#endregion
+export { ColorPicker };
+
+//# sourceMappingURL=ColorPicker.mjs.map

package/dist/src/components/ColorPicker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.mjs","names":[],"sources":["../../../src/components/ColorPicker.tsx"],"sourcesContent":["import {\r\n  Button,\r\n  Input,\r\n  type InputProps,\r\n  Popover,\r\n  PopoverContent,\r\n  PopoverTrigger,\r\n} from \"@heroui/react\";\r\nimport { hexToHsva } from \"@uiw/color-convert\";\r\nimport Colorful from \"@uiw/react-color-colorful\";\r\nimport { PipetteIcon } from \"lucide-react\";\r\nimport { useState } from \"react\";\r\n\r\nfunction safeHexToHsva(hex: string) {\r\n  try {\r\n    return hexToHsva(hex);\r\n  } catch (err) {\r\n    return { h: 0, s: 0, v: 0, a: 1 };\r\n  }\r\n}\r\n\r\nexport function ColorPicker({\r\n  disableAlpha = true,\r\n  value,\r\n\r\n  onValueChange,\r\n  ...props\r\n}: InputProps & { disableAlpha?: boolean }) {\r\n  const [hsva, setHsva] = useState(safeHexToHsva(value || \"\"));\r\n  return (\r\n    <Input\r\n      onValueChange={onValueChange}\r\n      value={value}\r\n      endContent={\r\n        <Popover placement=\"bottom\">\r\n          <PopoverTrigger>\r\n            <Button isIconOnly aria-label=\"Pick color\" size=\"sm\" variant=\"light\">\r\n              <PipetteIcon className=\"h-4 w-4 text-foreground\" />\r\n            </Button>\r\n          </PopoverTrigger>\r\n          <PopoverContent aria-label=\"Color picker\">\r\n            <Colorful\r\n              color={hsva}\r\n              disableAlpha={disableAlpha}\r\n              onChange={(color) => {\r\n                setHsva(color.hsva);\r\n                onValueChange?.(color.hex);\r\n              }}\r\n            />\r\n          </PopoverContent>\r\n        </Popover>\r\n      }\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n"],"mappings":";;;;;;;AAaA,SAAS,cAAc,KAAa;AAClC,KAAI;AACF,SAAO,UAAU,IAAI;UACd,KAAK;AACZ,SAAO;GAAE,GAAG;GAAG,GAAG;GAAG,GAAG;GAAG,GAAG;GAAG;;;AAIrC,SAAgB,YAAY,EAC1B,eAAe,MACf,OAEA,eACA,GAAG,SACuC;CAC1C,MAAM,CAAC,MAAM,WAAW,SAAS,cAAc,SAAS,GAAG,CAAC;AAC5D,QACE,oBAAC,OAAD;EACiB;EACR;EACP,YACE,qBAAC,SAAD;GAAS,WAAU;aAAnB,CACE,oBAAC,gBAAD,EAAA,UACE,oBAAC,QAAD;IAAQ,YAAA;IAAW,cAAW;IAAa,MAAK;IAAK,SAAQ;cAC3D,oBAAC,aAAD,EAAa,WAAU,2BAA4B,CAAA;IAC5C,CAAA,EACM,CAAA,EACjB,oBAAC,gBAAD;IAAgB,cAAW;cACzB,oBAAC,UAAD;KACE,OAAO;KACO;KACd,WAAW,UAAU;AACnB,cAAQ,MAAM,KAAK;AACnB,sBAAgB,MAAM,IAAI;;KAE5B,CAAA;IACa,CAAA,CACT;;EAEZ,GAAI;EACJ,CAAA"}

package/dist/src/components/CopyButton.d.mts

@@ -0,0 +1,18 @@
+import { ButtonProps } from "@heroui/react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/CopyButton.d.ts
+declare function CopyButton({
+  text,
+  notificationTimeout,
+  isIconOnly,
+  onCopy,
+  ...props
+}: ButtonProps & {
+  text: string;
+  notificationTimeout?: number;
+  onCopy?: () => void;
+}): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { CopyButton };
+//# sourceMappingURL=CopyButton.d.mts.map

package/dist/src/components/CopyButton.mjs

@@ -0,0 +1,33 @@
+import { useState } from "react";
+import { Button } from "@heroui/react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { CheckCircle, Copy } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+//#region src/components/CopyButton.tsx
+function CopyButton({ text, notificationTimeout = 1e3, isIconOnly, onCopy, ...props }) {
+	const { t } = useTranslation();
+	const [isCopied, setIsCopied] = useState(false);
+	const handleCopy = async (text) => {
+		try {
+			await window.navigator.clipboard.writeText(text);
+			setIsCopied(true);
+			onCopy?.();
+			toast.success(t("web-ui:common.copySuccess"));
+			setTimeout(() => setIsCopied(false), notificationTimeout);
+		} catch (error) {
+			toast.error(t("web-ui:common.copyError"));
+			console.error(error);
+		}
+	};
+	return /* @__PURE__ */ jsx(Button, {
+		isIconOnly,
+		onPress: () => handleCopy(text),
+		...props,
+		children: isCopied ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(CheckCircle, { className: "h-4 w-4" }), !isIconOnly && t("web-ui:common.copied")] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Copy, { className: "h-4 w-4" }), !isIconOnly && t("web-ui:common.copy")] })
+	});
+}
+//#endregion
+export { CopyButton };
+
+//# sourceMappingURL=CopyButton.mjs.map

package/dist/src/components/CopyButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyButton.mjs","names":[],"sources":["../../../src/components/CopyButton.tsx"],"sourcesContent":["import { Button, type ButtonProps } from \"@heroui/react\";\r\nimport { CheckCircle, Copy } from \"lucide-react\";\r\nimport { useState } from \"react\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { toast } from \"sonner\";\r\n\r\nexport function CopyButton({\r\n  text,\r\n  notificationTimeout = 1000,\r\n  isIconOnly,\r\n  onCopy,\r\n  ...props\r\n}: ButtonProps & { text: string; notificationTimeout?: number; onCopy?: () => void }) {\r\n  const { t } = useTranslation();\r\n  const [isCopied, setIsCopied] = useState(false);\r\n\r\n  const handleCopy = async (text: string) => {\r\n    try {\r\n      await window.navigator.clipboard.writeText(text);\r\n      setIsCopied(true);\r\n      onCopy?.();\r\n      toast.success(t(\"web-ui:common.copySuccess\"));\r\n      setTimeout(() => setIsCopied(false), notificationTimeout);\r\n    } catch (error) {\r\n      toast.error(t(\"web-ui:common.copyError\"));\r\n      console.error(error);\r\n    }\r\n  };\r\n\r\n  return (\r\n    <Button isIconOnly={isIconOnly} onPress={() => handleCopy(text)} {...props}>\r\n      {isCopied ? (\r\n        <>\r\n          <CheckCircle className=\"h-4 w-4\" />\r\n          {!isIconOnly && t(\"web-ui:common.copied\")}\r\n        </>\r\n      ) : (\r\n        <>\r\n          <Copy className=\"h-4 w-4\" />\r\n          {!isIconOnly && t(\"web-ui:common.copy\")}\r\n        </>\r\n      )}\r\n    </Button>\r\n  );\r\n}\r\n"],"mappings":";;;;;;;AAMA,SAAgB,WAAW,EACzB,MACA,sBAAsB,KACtB,YACA,QACA,GAAG,SACiF;CACpF,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;CAE/C,MAAM,aAAa,OAAO,SAAiB;AACzC,MAAI;AACF,SAAM,OAAO,UAAU,UAAU,UAAU,KAAK;AAChD,eAAY,KAAK;AACjB,aAAU;AACV,SAAM,QAAQ,EAAE,4BAA4B,CAAC;AAC7C,oBAAiB,YAAY,MAAM,EAAE,oBAAoB;WAClD,OAAO;AACd,SAAM,MAAM,EAAE,0BAA0B,CAAC;AACzC,WAAQ,MAAM,MAAM;;;AAIxB,QACE,oBAAC,QAAD;EAAoB;EAAY,eAAe,WAAW,KAAK;EAAE,GAAI;YAClE,WACC,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,aAAD,EAAa,WAAU,WAAY,CAAA,EAClC,CAAC,cAAc,EAAE,uBAAuB,CACxC,EAAA,CAAA,GAEH,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,MAAD,EAAM,WAAU,WAAY,CAAA,EAC3B,CAAC,cAAc,EAAE,qBAAqB,CACtC,EAAA,CAAA;EAEE,CAAA"}

package/dist/src/components/CropDialog.d.mts

@@ -0,0 +1,22 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/CropDialog.d.ts
+interface CropDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  imageUrl: string;
+  onCropComplete: (croppedBlob: Blob) => void;
+  onCancel: () => void;
+  isLoading?: boolean;
+}
+declare function CropDialog({
+  open,
+  onOpenChange,
+  imageUrl,
+  onCropComplete,
+  onCancel,
+  isLoading
+}: CropDialogProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { CropDialog };
+//# sourceMappingURL=CropDialog.d.mts.map

package/dist/src/components/CropDialog.mjs

@@ -0,0 +1,113 @@
+import { Button } from "./ui/button.mjs";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "./ui/dialog.mjs";
+import { Slider } from "./ui/slider.mjs";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ZoomIn, ZoomOut } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import Cropper from "react-easy-crop";
+//#region src/components/CropDialog.tsx
+async function getCroppedImg(imageSrc, pixelCrop, t) {
+	const image = new Image();
+	image.src = imageSrc;
+	const canvas = document.createElement("canvas");
+	const ctx = canvas.getContext("2d");
+	if (!ctx) throw new Error(t("web-ui:image.crop.failedContext"));
+	canvas.width = pixelCrop.width;
+	canvas.height = pixelCrop.height;
+	ctx.drawImage(image, pixelCrop.x, pixelCrop.y, pixelCrop.width, pixelCrop.height, 0, 0, pixelCrop.width, pixelCrop.height);
+	return new Promise((resolve, reject) => {
+		canvas.toBlob((blob) => {
+			if (!blob) reject(new Error(t("web-ui:image.crop.failedCrop")));
+			else resolve(blob);
+		}, "image/jpeg");
+	});
+}
+function CropDialog({ open, onOpenChange, imageUrl, onCropComplete, onCancel, isLoading = false }) {
+	const { t } = useTranslation();
+	const [crop, setCrop] = useState({
+		x: 0,
+		y: 0
+	});
+	const [zoom, setZoom] = useState(1);
+	const [croppedAreaPixels, setCroppedAreaPixels] = useState(null);
+	const handleCropComplete = (_croppedArea, croppedAreaPixels) => {
+		setCroppedAreaPixels(croppedAreaPixels);
+	};
+	const handleSave = async () => {
+		if (!croppedAreaPixels) return;
+		try {
+			onCropComplete(await getCroppedImg(imageUrl, croppedAreaPixels, t));
+		} catch (error) {
+			console.error(t("web-ui:image.crop.error"), error);
+		}
+	};
+	return /* @__PURE__ */ jsx(Dialog, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			className: "sm:max-w-[600px]",
+			children: [
+				/* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: t("web-ui:image.crop.title") }) }),
+				/* @__PURE__ */ jsx("div", {
+					className: "relative h-[400px] w-full",
+					children: /* @__PURE__ */ jsx(Cropper, {
+						image: imageUrl,
+						crop,
+						zoom,
+						aspect: 1,
+						onCropChange: setCrop,
+						onZoomChange: setZoom,
+						onCropComplete: handleCropComplete,
+						objectFit: "contain",
+						showGrid: true,
+						style: {
+							containerStyle: {
+								position: "relative",
+								width: "100%",
+								height: "100%",
+								backgroundColor: "#262626"
+							},
+							cropAreaStyle: {
+								border: "2px solid #fff",
+								color: "rgba(255, 255, 255, 0.9)"
+							},
+							mediaStyle: { backgroundColor: "#262626" }
+						}
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-4 px-1",
+					children: [
+						/* @__PURE__ */ jsx(ZoomOut, { className: "h-4 w-4" }),
+						/* @__PURE__ */ jsx(Slider, {
+							value: [zoom],
+							onValueChange: (values) => setZoom(values[0]),
+							min: 1,
+							max: 3,
+							step: .1,
+							className: "flex-1"
+						}),
+						/* @__PURE__ */ jsx(ZoomIn, { className: "h-4 w-4" })
+					]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "mt-4 flex justify-end space-x-2",
+					children: [/* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						onClick: onCancel,
+						children: t("web-ui:common.cancel")
+					}), /* @__PURE__ */ jsx(Button, {
+						onClick: handleSave,
+						disabled: isLoading,
+						children: isLoading ? t("web-ui:common.saving") : t("web-ui:common.save")
+					})]
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { CropDialog };
+
+//# sourceMappingURL=CropDialog.mjs.map

package/dist/src/components/CropDialog.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CropDialog.mjs","names":[],"sources":["../../../src/components/CropDialog.tsx"],"sourcesContent":["import { ZoomIn, ZoomOut } from \"lucide-react\";\r\nimport { useState } from \"react\";\r\nimport Cropper, { type Area } from \"react-easy-crop\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { Button } from \"./ui/button\";\r\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from \"./ui/dialog\";\r\nimport { Slider } from \"./ui/slider\";\r\n\r\ninterface CropArea {\r\n  x: number;\r\n  y: number;\r\n  width: number;\r\n  height: number;\r\n}\r\n\r\ninterface CropDialogProps {\r\n  open: boolean;\r\n  onOpenChange: (open: boolean) => void;\r\n  imageUrl: string;\r\n  onCropComplete: (croppedBlob: Blob) => void;\r\n  onCancel: () => void;\r\n  isLoading?: boolean;\r\n}\r\n\r\nasync function getCroppedImg(\r\n  imageSrc: string,\r\n  pixelCrop: CropArea,\r\n  t: (key: string) => string\r\n): Promise<Blob> {\r\n  const image = new Image();\r\n  image.src = imageSrc;\r\n\r\n  // Create canvas\r\n  const canvas = document.createElement(\"canvas\");\r\n  const ctx = canvas.getContext(\"2d\");\r\n\r\n  if (!ctx) {\r\n    throw new Error(t(\"web-ui:image.crop.failedContext\"));\r\n  }\r\n\r\n  // Set canvas size to the crop size\r\n  canvas.width = pixelCrop.width;\r\n  canvas.height = pixelCrop.height;\r\n\r\n  // Draw the cropped image\r\n  ctx.drawImage(\r\n    image,\r\n    pixelCrop.x,\r\n    pixelCrop.y,\r\n    pixelCrop.width,\r\n    pixelCrop.height,\r\n    0,\r\n    0,\r\n    pixelCrop.width,\r\n    pixelCrop.height\r\n  );\r\n\r\n  // Get the cropped image as blob\r\n  return new Promise((resolve, reject) => {\r\n    canvas.toBlob((blob) => {\r\n      if (!blob) reject(new Error(t(\"web-ui:image.crop.failedCrop\")));\r\n      else resolve(blob);\r\n    }, \"image/jpeg\");\r\n  });\r\n}\r\n\r\nexport function CropDialog({\r\n  open,\r\n  onOpenChange,\r\n  imageUrl,\r\n  onCropComplete,\r\n  onCancel,\r\n  isLoading = false,\r\n}: CropDialogProps) {\r\n  const { t } = useTranslation();\r\n  const [crop, setCrop] = useState({ x: 0, y: 0 });\r\n  const [zoom, setZoom] = useState(1);\r\n  const [croppedAreaPixels, setCroppedAreaPixels] = useState<CropArea | null>(null);\r\n\r\n  const handleCropComplete = (_croppedArea: Area, croppedAreaPixels: CropArea) => {\r\n    setCroppedAreaPixels(croppedAreaPixels);\r\n  };\r\n\r\n  const handleSave = async () => {\r\n    if (!croppedAreaPixels) return;\r\n\r\n    try {\r\n      const croppedImageBlob = await getCroppedImg(imageUrl, croppedAreaPixels, t);\r\n      onCropComplete(croppedImageBlob);\r\n    } catch (error) {\r\n      console.error(t(\"web-ui:image.crop.error\"), error);\r\n    }\r\n  };\r\n\r\n  return (\r\n    <Dialog open={open} onOpenChange={onOpenChange}>\r\n      <DialogContent className=\"sm:max-w-[600px]\">\r\n        <DialogHeader>\r\n          <DialogTitle>{t(\"web-ui:image.crop.title\")}</DialogTitle>\r\n        </DialogHeader>\r\n        <div className=\"relative h-[400px] w-full\">\r\n          <Cropper\r\n            image={imageUrl}\r\n            crop={crop}\r\n            zoom={zoom}\r\n            aspect={1}\r\n            onCropChange={setCrop}\r\n            onZoomChange={setZoom}\r\n            onCropComplete={handleCropComplete}\r\n            objectFit=\"contain\"\r\n            showGrid={true}\r\n            style={{\r\n              containerStyle: {\r\n                position: \"relative\",\r\n                width: \"100%\",\r\n                height: \"100%\",\r\n                backgroundColor: \"#262626\",\r\n              },\r\n              cropAreaStyle: {\r\n                border: \"2px solid #fff\",\r\n                color: \"rgba(255, 255, 255, 0.9)\",\r\n              },\r\n              mediaStyle: {\r\n                backgroundColor: \"#262626\",\r\n              },\r\n            }}\r\n          />\r\n        </div>\r\n\r\n        <div className=\"flex items-center gap-4 px-1\">\r\n          <ZoomOut className=\"h-4 w-4\" />\r\n          <Slider\r\n            value={[zoom]}\r\n            onValueChange={(values: number[]) => setZoom(values[0])}\r\n            min={1}\r\n            max={3}\r\n            step={0.1}\r\n            className=\"flex-1\"\r\n          />\r\n          <ZoomIn className=\"h-4 w-4\" />\r\n        </div>\r\n\r\n        <div className=\"mt-4 flex justify-end space-x-2\">\r\n          <Button variant=\"outline\" onClick={onCancel}>\r\n            {t(\"web-ui:common.cancel\")}\r\n          </Button>\r\n          <Button onClick={handleSave} disabled={isLoading}>\r\n            {isLoading ? t(\"web-ui:common.saving\") : t(\"web-ui:common.save\")}\r\n          </Button>\r\n        </div>\r\n      </DialogContent>\r\n    </Dialog>\r\n  );\r\n}\r\n"],"mappings":";;;;;;;;;AAwBA,eAAe,cACb,UACA,WACA,GACe;CACf,MAAM,QAAQ,IAAI,OAAO;AACzB,OAAM,MAAM;CAGZ,MAAM,SAAS,SAAS,cAAc,SAAS;CAC/C,MAAM,MAAM,OAAO,WAAW,KAAK;AAEnC,KAAI,CAAC,IACH,OAAM,IAAI,MAAM,EAAE,kCAAkC,CAAC;AAIvD,QAAO,QAAQ,UAAU;AACzB,QAAO,SAAS,UAAU;AAG1B,KAAI,UACF,OACA,UAAU,GACV,UAAU,GACV,UAAU,OACV,UAAU,QACV,GACA,GACA,UAAU,OACV,UAAU,OACX;AAGD,QAAO,IAAI,SAAS,SAAS,WAAW;AACtC,SAAO,QAAQ,SAAS;AACtB,OAAI,CAAC,KAAM,QAAO,IAAI,MAAM,EAAE,+BAA+B,CAAC,CAAC;OAC1D,SAAQ,KAAK;KACjB,aAAa;GAChB;;AAGJ,SAAgB,WAAW,EACzB,MACA,cACA,UACA,gBACA,UACA,YAAY,SACM;CAClB,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,CAAC,MAAM,WAAW,SAAS;EAAE,GAAG;EAAG,GAAG;EAAG,CAAC;CAChD,MAAM,CAAC,MAAM,WAAW,SAAS,EAAE;CACnC,MAAM,CAAC,mBAAmB,wBAAwB,SAA0B,KAAK;CAEjF,MAAM,sBAAsB,cAAoB,sBAAgC;AAC9E,uBAAqB,kBAAkB;;CAGzC,MAAM,aAAa,YAAY;AAC7B,MAAI,CAAC,kBAAmB;AAExB,MAAI;AAEF,kBADyB,MAAM,cAAc,UAAU,mBAAmB,EAAE,CAC5C;WACzB,OAAO;AACd,WAAQ,MAAM,EAAE,0BAA0B,EAAE,MAAM;;;AAItD,QACE,oBAAC,QAAD;EAAc;EAAoB;YAChC,qBAAC,eAAD;GAAe,WAAU;aAAzB;IACE,oBAAC,cAAD,EAAA,UACE,oBAAC,aAAD,EAAA,UAAc,EAAE,0BAA0B,EAAe,CAAA,EAC5C,CAAA;IACf,oBAAC,OAAD;KAAK,WAAU;eACb,oBAAC,SAAD;MACE,OAAO;MACD;MACA;MACN,QAAQ;MACR,cAAc;MACd,cAAc;MACd,gBAAgB;MAChB,WAAU;MACV,UAAU;MACV,OAAO;OACL,gBAAgB;QACd,UAAU;QACV,OAAO;QACP,QAAQ;QACR,iBAAiB;QAClB;OACD,eAAe;QACb,QAAQ;QACR,OAAO;QACR;OACD,YAAY,EACV,iBAAiB,WAClB;OACF;MACD,CAAA;KACE,CAAA;IAEN,qBAAC,OAAD;KAAK,WAAU;eAAf;MACE,oBAAC,SAAD,EAAS,WAAU,WAAY,CAAA;MAC/B,oBAAC,QAAD;OACE,OAAO,CAAC,KAAK;OACb,gBAAgB,WAAqB,QAAQ,OAAO,GAAG;OACvD,KAAK;OACL,KAAK;OACL,MAAM;OACN,WAAU;OACV,CAAA;MACF,oBAAC,QAAD,EAAQ,WAAU,WAAY,CAAA;MAC1B;;IAEN,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,QAAD;MAAQ,SAAQ;MAAU,SAAS;gBAChC,EAAE,uBAAuB;MACnB,CAAA,EACT,oBAAC,QAAD;MAAQ,SAAS;MAAY,UAAU;gBACpC,YAAY,EAAE,uBAAuB,GAAG,EAAE,qBAAqB;MACzD,CAAA,CACL;;IACQ;;EACT,CAAA"}

package/dist/src/components/DialogProvider.d.mts

@@ -0,0 +1,23 @@
+import { ButtonProps } from "@heroui/react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/DialogProvider.d.ts
+type DialogProps = {
+  title: React.ReactNode;
+  description: React.ReactNode;
+  color?: ButtonProps["color"];
+  cancelable?: boolean;
+  onCancel?: () => void;
+  onConfirm?: () => void;
+  cancelLabel?: string;
+  confirmLabel?: string;
+};
+declare function useDialog(): (dialog: DialogProps) => void;
+declare function DialogProvider({
+  children
+}: {
+  children: React.ReactNode;
+}): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DialogProps, DialogProvider, useDialog };
+//# sourceMappingURL=DialogProvider.d.mts.map

package/dist/src/components/DialogProvider.mjs

@@ -0,0 +1,72 @@
+import { createContext, useContext, useRef, useState } from "react";
+import { Button, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader } from "@heroui/react";
+import { semanticColors } from "@heroui/theme";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/DialogProvider.tsx
+const DialogContext = createContext(() => {
+	console.warn("DialogProvider is not initialized");
+});
+function useDialog() {
+	const context = useContext(DialogContext);
+	if (!context) throw new Error("useDialog must be used within a DialogProvider");
+	return context;
+}
+function DialogProvider({ children }) {
+	const [isOpen, setIsOpen] = useState(false);
+	const [dialog, setDialog] = useState(null);
+	const timeoutRef = useRef(null);
+	const handleSetDialog = (dialog) => {
+		if (timeoutRef.current) {
+			clearTimeout(timeoutRef.current);
+			timeoutRef.current = null;
+		}
+		setDialog(dialog);
+		setIsOpen(true);
+	};
+	const handleUnsetDialog = () => {
+		setIsOpen(false);
+		if (timeoutRef.current) {
+			clearTimeout(timeoutRef.current);
+			timeoutRef.current = null;
+		}
+		timeoutRef.current = setTimeout(() => {
+			setDialog(null);
+		}, 500);
+	};
+	const handleCancel = () => {
+		dialog?.onCancel?.();
+		handleUnsetDialog();
+	};
+	const handleConfirm = () => {
+		dialog?.onConfirm?.();
+		handleUnsetDialog();
+	};
+	return /* @__PURE__ */ jsx(DialogContext.Provider, {
+		value: handleSetDialog,
+		children: /* @__PURE__ */ jsxs(Fragment$1, { children: [children, dialog && /* @__PURE__ */ jsx(Modal, {
+			isOpen,
+			onOpenChange: handleUnsetDialog,
+			style: { borderColor: semanticColors.light[dialog.color || "danger"][600] },
+			classNames: { base: "border-1" },
+			children: /* @__PURE__ */ jsxs(ModalContent, { children: [
+				/* @__PURE__ */ jsx(ModalHeader, { children: dialog.title }),
+				/* @__PURE__ */ jsx(ModalBody, { children: dialog.description }),
+				/* @__PURE__ */ jsx(ModalFooter, { children: /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-row gap-2",
+					children: [(dialog.cancelable || dialog.onCancel) && /* @__PURE__ */ jsx(Button, {
+						onPress: handleCancel,
+						children: dialog.cancelLabel ?? "Cancel"
+					}), /* @__PURE__ */ jsx(Button, {
+						color: dialog.color,
+						onPress: handleConfirm,
+						children: dialog.confirmLabel ?? "Confirm"
+					})]
+				}) })
+			] })
+		})] })
+	});
+}
+//#endregion
+export { DialogProvider, useDialog };
+
+//# sourceMappingURL=DialogProvider.mjs.map

package/dist/src/components/DialogProvider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogProvider.mjs","names":[],"sources":["../../../src/components/DialogProvider.tsx"],"sourcesContent":["import {\r\n  Button,\r\n  type ButtonProps,\r\n  Modal,\r\n  ModalBody,\r\n  ModalContent,\r\n  ModalFooter,\r\n  ModalHeader,\r\n} from \"@heroui/react\";\r\nimport { semanticColors } from \"@heroui/theme\";\r\nimport { createContext, useContext, useRef, useState } from \"react\";\r\n\r\nexport type DialogProps = {\r\n  title: React.ReactNode;\r\n  description: React.ReactNode;\r\n  color?: ButtonProps[\"color\"];\r\n  cancelable?: boolean;\r\n  onCancel?: () => void;\r\n  onConfirm?: () => void;\r\n  cancelLabel?: string;\r\n  confirmLabel?: string;\r\n};\r\n\r\nconst DialogContext = createContext<(dialog: DialogProps) => void>(() => {\r\n  console.warn(\"DialogProvider is not initialized\");\r\n});\r\n\r\nexport function useDialog() {\r\n  const context = useContext(DialogContext);\r\n  if (!context) {\r\n    throw new Error(\"useDialog must be used within a DialogProvider\");\r\n  }\r\n  return context;\r\n}\r\n\r\nexport function DialogProvider({ children }: { children: React.ReactNode }) {\r\n  const [isOpen, setIsOpen] = useState(false);\r\n  const [dialog, setDialog] = useState<DialogProps | null>(null);\r\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\r\n\r\n  const handleSetDialog = (dialog: DialogProps) => {\r\n    if (timeoutRef.current) {\r\n      clearTimeout(timeoutRef.current);\r\n      timeoutRef.current = null;\r\n    }\r\n    setDialog(dialog);\r\n    setIsOpen(true);\r\n  };\r\n\r\n  const handleUnsetDialog = () => {\r\n    setIsOpen(false);\r\n    if (timeoutRef.current) {\r\n      clearTimeout(timeoutRef.current);\r\n      timeoutRef.current = null;\r\n    }\r\n    timeoutRef.current = setTimeout(() => {\r\n      setDialog(null);\r\n    }, 500);\r\n  };\r\n\r\n  const handleCancel = () => {\r\n    dialog?.onCancel?.();\r\n    handleUnsetDialog();\r\n  };\r\n\r\n  const handleConfirm = () => {\r\n    dialog?.onConfirm?.();\r\n    handleUnsetDialog();\r\n  };\r\n\r\n  return (\r\n    <DialogContext.Provider value={handleSetDialog}>\r\n      <>\r\n        {children}\r\n        {dialog && (\r\n          <Modal\r\n            isOpen={isOpen}\r\n            onOpenChange={handleUnsetDialog}\r\n            style={{\r\n              borderColor: semanticColors.light[dialog.color || \"danger\"][600],\r\n            }}\r\n            classNames={{\r\n              base: \"border-1\",\r\n            }}\r\n          >\r\n            <ModalContent>\r\n              <ModalHeader>{dialog.title}</ModalHeader>\r\n              <ModalBody>{dialog.description}</ModalBody>\r\n              <ModalFooter>\r\n                <div className=\"flex flex-row gap-2\">\r\n                  {(dialog.cancelable || dialog.onCancel) && (\r\n                    <Button onPress={handleCancel}>{dialog.cancelLabel ?? \"Cancel\"}</Button>\r\n                  )}\r\n                  <Button color={dialog.color} onPress={handleConfirm}>\r\n                    {dialog.confirmLabel ?? \"Confirm\"}\r\n                  </Button>\r\n                </div>\r\n              </ModalFooter>\r\n            </ModalContent>\r\n          </Modal>\r\n        )}\r\n      </>\r\n    </DialogContext.Provider>\r\n  );\r\n}\r\n"],"mappings":";;;;;AAuBA,MAAM,gBAAgB,oBAAmD;AACvE,SAAQ,KAAK,oCAAoC;EACjD;AAEF,SAAgB,YAAY;CAC1B,MAAM,UAAU,WAAW,cAAc;AACzC,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,iDAAiD;AAEnE,QAAO;;AAGT,SAAgB,eAAe,EAAE,YAA2C;CAC1E,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;CAC3C,MAAM,CAAC,QAAQ,aAAa,SAA6B,KAAK;CAC9D,MAAM,aAAa,OAA6C,KAAK;CAErE,MAAM,mBAAmB,WAAwB;AAC/C,MAAI,WAAW,SAAS;AACtB,gBAAa,WAAW,QAAQ;AAChC,cAAW,UAAU;;AAEvB,YAAU,OAAO;AACjB,YAAU,KAAK;;CAGjB,MAAM,0BAA0B;AAC9B,YAAU,MAAM;AAChB,MAAI,WAAW,SAAS;AACtB,gBAAa,WAAW,QAAQ;AAChC,cAAW,UAAU;;AAEvB,aAAW,UAAU,iBAAiB;AACpC,aAAU,KAAK;KACd,IAAI;;CAGT,MAAM,qBAAqB;AACzB,UAAQ,YAAY;AACpB,qBAAmB;;CAGrB,MAAM,sBAAsB;AAC1B,UAAQ,aAAa;AACrB,qBAAmB;;AAGrB,QACE,oBAAC,cAAc,UAAf;EAAwB,OAAO;YAC7B,qBAAA,YAAA,EAAA,UAAA,CACG,UACA,UACC,oBAAC,OAAD;GACU;GACR,cAAc;GACd,OAAO,EACL,aAAa,eAAe,MAAM,OAAO,SAAS,UAAU,MAC7D;GACD,YAAY,EACV,MAAM,YACP;aAED,qBAAC,cAAD,EAAA,UAAA;IACE,oBAAC,aAAD,EAAA,UAAc,OAAO,OAAoB,CAAA;IACzC,oBAAC,WAAD,EAAA,UAAY,OAAO,aAAwB,CAAA;IAC3C,oBAAC,aAAD,EAAA,UACE,qBAAC,OAAD;KAAK,WAAU;eAAf,EACI,OAAO,cAAc,OAAO,aAC5B,oBAAC,QAAD;MAAQ,SAAS;gBAAe,OAAO,eAAe;MAAkB,CAAA,EAE1E,oBAAC,QAAD;MAAQ,OAAO,OAAO;MAAO,SAAS;gBACnC,OAAO,gBAAgB;MACjB,CAAA,CACL;QACM,CAAA;IACD,EAAA,CAAA;GACT,CAAA,CAET,EAAA,CAAA;EACoB,CAAA"}

package/dist/src/components/ErrorFallback.d.mts

@@ -0,0 +1,13 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/ErrorFallback.d.ts
+declare function ErrorFallback({
+  error,
+  componentStack
+}: {
+  error: unknown;
+  componentStack: string;
+}): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ErrorFallback };
+//# sourceMappingURL=ErrorFallback.d.mts.map

package/dist/src/components/ErrorFallback.mjs

@@ -0,0 +1,30 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ErrorFallback.tsx
+function ErrorFallback({ error, componentStack }) {
+	const errorMessage = error instanceof Error ? error.message : "Unknown error";
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-grow-1 flex-col items-center justify-center h-[100vh]",
+		children: [
+			/* @__PURE__ */ jsx("h1", {
+				className: "text-3xl font-bold",
+				children: "Something went wrong."
+			}),
+			/* @__PURE__ */ jsx("h1", {
+				className: "text-2xl text-gray-700 font-bold mb-5",
+				children: "Please try again later."
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "text-lg text-gray-700 mb-5",
+				children: errorMessage
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "text-sm text-gray-500 px-10",
+				children: componentStack
+			})
+		]
+	});
+}
+//#endregion
+export { ErrorFallback };
+
+//# sourceMappingURL=ErrorFallback.mjs.map

package/dist/src/components/ErrorFallback.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorFallback.mjs","names":[],"sources":["../../../src/components/ErrorFallback.tsx"],"sourcesContent":["export function ErrorFallback({\r\n  error,\r\n  componentStack,\r\n}: {\r\n  error: unknown;\r\n  componentStack: string;\r\n}) {\r\n  const errorMessage = error instanceof Error ? error.message : \"Unknown error\";\r\n  return (\r\n    <div className=\"flex flex-grow-1 flex-col items-center justify-center h-[100vh]\">\r\n      <h1 className=\"text-3xl font-bold\">Something went wrong.</h1>\r\n      <h1 className=\"text-2xl text-gray-700 font-bold mb-5\">Please try again later.</h1>\r\n      <div className=\"text-lg text-gray-700 mb-5\">{errorMessage}</div>\r\n      <div className=\"text-sm text-gray-500 px-10\">{componentStack}</div>\r\n    </div>\r\n  );\r\n}\r\n"],"mappings":";;AAAA,SAAgB,cAAc,EAC5B,OACA,kBAIC;CACD,MAAM,eAAe,iBAAiB,QAAQ,MAAM,UAAU;AAC9D,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,oBAAC,MAAD;IAAI,WAAU;cAAqB;IAA0B,CAAA;GAC7D,oBAAC,MAAD;IAAI,WAAU;cAAwC;IAA4B,CAAA;GAClF,oBAAC,OAAD;IAAK,WAAU;cAA8B;IAAmB,CAAA;GAChE,oBAAC,OAAD;IAAK,WAAU;cAA+B;IAAqB,CAAA;GAC/D"}