@juv/codego-react-ui 3.1.8 → 3.2.2

package/dist/index.cjs

@@ -1914,6 +1914,153 @@ function BulletinDeleteConfirm({
     document.body
   );
 }
+function BulletinEditModal({
+  item,
+  baseUrl,
+  idKey,
+  method,
+  fields,
+  onClose,
+  onSuccess
+}) {
+  const [loading, setLoading] = React8.useState(false);
+  const [error, setError] = React8.useState(null);
+  const [formData, setFormData] = React8.useState(() => {
+    const initial = {};
+    fields.forEach((f) => {
+      initial[f.key] = item[f.key] ?? "";
+    });
+    return initial;
+  });
+  const id = item[idKey ?? "id"];
+  const handleChange = (key, value) => {
+    setFormData((prev) => ({ ...prev, [key]: value }));
+  };
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await (0, import_axios2.default)({
+        method: method ?? "PUT",
+        url: `${baseUrl}/${id}`,
+        data: formData
+      });
+      onSuccess?.(response.data);
+      onClose();
+    } catch (err) {
+      setError(err?.response?.data?.message ?? err.message ?? "Update failed");
+    } finally {
+      setLoading(false);
+    }
+  };
+  return (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "div",
+      {
+        className: "fixed inset-0 z-50 flex items-center justify-center p-4",
+        style: { background: "rgba(0,0,0,0.55)" },
+        onMouseDown: (e) => {
+          if (e.target === e.currentTarget) onClose();
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "w-full max-w-md rounded-2xl border border-border bg-card shadow-2xl p-6 space-y-4 max-h-[90vh] overflow-y-auto", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h2", { className: "text-base font-semibold", children: "Edit Post" }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: onClose,
+                className: "flex h-7 w-7 items-center justify-center rounded-lg text-muted-foreground hover:bg-accent hover:text-foreground transition-colors",
+                children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.X, { className: "h-4 w-4" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
+            fields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-1.5", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-muted-foreground", children: field.label }),
+              field.type === "textarea" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                "textarea",
+                {
+                  value: formData[field.key] ?? "",
+                  onChange: (e) => handleChange(field.key, e.target.value),
+                  placeholder: field.placeholder,
+                  className: "w-full px-3 py-2 text-sm rounded-lg border border-border bg-background outline-none focus:ring-1 focus:ring-ring resize-none",
+                  rows: 4
+                }
+              ) : field.type === "select" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                "select",
+                {
+                  value: formData[field.key] ?? "",
+                  onChange: (e) => handleChange(field.key, e.target.value),
+                  className: "w-full px-3 py-2 text-sm rounded-lg border border-border bg-background outline-none focus:ring-1 focus:ring-ring",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "", children: "Select..." }),
+                    field.options?.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: opt, children: opt }, opt))
+                  ]
+                }
+              ) : field.type === "checkbox" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  "input",
+                  {
+                    type: "checkbox",
+                    checked: formData[field.key] ?? false,
+                    onChange: (e) => handleChange(field.key, e.target.checked),
+                    className: "h-4 w-4 rounded border-border"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-sm text-muted-foreground", children: field.placeholder })
+              ] }) : field.type === "date" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                "input",
+                {
+                  type: "date",
+                  value: formData[field.key] ?? "",
+                  onChange: (e) => handleChange(field.key, e.target.value),
+                  className: "w-full px-3 py-2 text-sm rounded-lg border border-border bg-background outline-none focus:ring-1 focus:ring-ring"
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                "input",
+                {
+                  type: "text",
+                  value: formData[field.key] ?? "",
+                  onChange: (e) => handleChange(field.key, e.target.value),
+                  placeholder: field.placeholder,
+                  className: "w-full px-3 py-2 text-sm rounded-lg border border-border bg-background outline-none focus:ring-1 focus:ring-ring"
+                }
+              )
+            ] }, field.key)),
+            error && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-xs text-danger", children: error }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex justify-end gap-2 pt-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: onClose,
+                  disabled: loading,
+                  className: "px-4 py-1.5 text-sm rounded-xl border border-border hover:bg-accent transition-colors",
+                  children: "Cancel"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                "button",
+                {
+                  type: "submit",
+                  disabled: loading,
+                  className: "px-4 py-1.5 text-sm rounded-xl bg-primary text-primary-foreground hover:bg-primary/90 transition-colors flex items-center gap-1.5",
+                  children: [
+                    loading && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Loader2, { className: "h-3.5 w-3.5 animate-spin" }),
+                    loading ? "Saving\u2026" : "Save"
+                  ]
+                }
+              )
+            ] })
+          ] })
+        ] })
+      }
+    ),
+    document.body
+  );
+}
 function ActionMenu({ item, actions }) {
   const [open, setOpen] = React8.useState(false);
   const ref = React8.useRef(null);
@@ -2063,12 +2210,17 @@ function BulletinBoard({
   onEdit,
   onDelete,
   preview = false,
+  editBaseUrl,
+  editMethod,
+  editIdKey,
+  editFields,
   deleteBaseUrl,
   deleteIdKey = "id",
   serverPagination,
   className
 }) {
   const [previewItem, setPreviewItem] = React8.useState(null);
+  const [editItem, setEditItem] = React8.useState(null);
   const [deleteItem, setDeleteItem] = React8.useState(null);
   const [search, setSearch] = React8.useState("");
   const [category, setCategory] = React8.useState(null);
@@ -2214,7 +2366,10 @@ function BulletinBoard({
         onView: onView ? (item) => {
           onView(item);
         } : void 0,
-        onEdit: onEdit ? (item) => {
+        onEdit: editBaseUrl && editFields ? (item) => {
+          setPreviewItem(null);
+          setEditItem(item);
+        } : onEdit ? (item) => {
           onEdit(item);
         } : void 0,
         onDelete: deleteBaseUrl ? (item) => {
@@ -2225,6 +2380,20 @@ function BulletinBoard({
         } : void 0
       }
     ),
+    editItem && editBaseUrl && editFields && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      BulletinEditModal,
+      {
+        item: editItem,
+        baseUrl: editBaseUrl,
+        idKey: editIdKey,
+        method: editMethod,
+        fields: editFields,
+        onClose: () => setEditItem(null),
+        onSuccess: (updated) => {
+          onEdit?.(updated);
+        }
+      }
+    ),
     deleteItem && deleteBaseUrl && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       BulletinDeleteConfirm,
       {
@@ -6414,7 +6583,6 @@ function DGEditModal({
   onSuccess,
   notif
 }) {
-  const { toast } = useToast();
   const [form, setForm] = React28.useState(() => {
     const init = {};
     fields.forEach((f) => {
@@ -6431,15 +6599,14 @@ function DGEditModal({
     setError(null);
     try {
       await import_axios3.default.put(`${baseUrl}/${itemId}/update`, form);
-      if (notif) {
-        if ((notif.type ?? "toast") === "toast") {
-          toast({ variant: notif.editVariant ?? "success", title: notif.editTitle ?? "Record updated", description: notif.editBody, position: notif.toastPosition });
-        } else {
-          setBanner(true);
-        }
+      const updated = { ...item, ...form };
+      if (notif && (notif.type ?? "toast") === "notification") {
+        setBanner(true);
+        onSuccess?.(updated);
+      } else {
+        onSuccess?.(updated);
+        onClose();
       }
-      onSuccess?.({ ...item, ...form });
-      onClose();
     } catch (err) {
       setError(err?.response?.data?.message ?? err.message ?? "Update failed");
     } finally {
@@ -6491,7 +6658,6 @@ function DGDeleteModal({
   onSuccess,
   notif
 }) {
-  const { toast } = useToast();
   const [loading, setLoading] = React28.useState(false);
   const [error, setError] = React28.useState(null);
   const handleDelete = async () => {
@@ -6499,11 +6665,6 @@ function DGDeleteModal({
     setError(null);
     try {
       await import_axios3.default.delete(`${baseUrl}/${itemId}/delete`);
-      if (notif) {
-        if ((notif.type ?? "toast") === "toast") {
-          toast({ variant: notif.deleteVariant ?? "success", title: notif.deleteTitle ?? "Record deleted", description: notif.deleteBody, position: notif.toastPosition });
-        }
-      }
       onSuccess?.(item);
       onClose();
     } catch (err) {
@@ -6548,6 +6709,7 @@ function DataGrid({
   defaultActions,
   serverPagination
 }) {
+  const { toast } = useToast();
   const [sortKey, setSortKey] = React28.useState(null);
   const [sortDir, setSortDir] = React28.useState(null);
   const [filters, setFilters] = React28.useState({});
@@ -6871,6 +7033,10 @@ function DataGrid({
         onSuccess: (updated) => {
           setTableData((prev) => prev.map((r) => String(r[actionIdKey]) === String(updated[actionIdKey]) ? updated : r));
           defaultActions.onSuccess?.("edit", updated);
+          const notif = defaultActions.onSuccessNotif;
+          if (notif && (notif.type ?? "toast") === "toast") {
+            toast({ variant: notif.editVariant ?? "success", title: notif.editTitle ?? "Record updated", description: notif.editBody, position: notif.toastPosition });
+          }
         }
       }
     ),
@@ -6885,6 +7051,10 @@ function DataGrid({
         onSuccess: (deleted) => {
           setTableData((prev) => prev.filter((r) => String(r[actionIdKey]) !== String(deleted[actionIdKey])));
           defaultActions.onSuccess?.("delete", deleted);
+          const notif = defaultActions.onSuccessNotif;
+          if (notif && (notif.type ?? "toast") === "toast") {
+            toast({ variant: notif.deleteVariant ?? "success", title: notif.deleteTitle ?? "Record deleted", description: notif.deleteBody, position: notif.toastPosition });
+          }
         }
       }
     )
@@ -10818,7 +10988,6 @@ function EditModal({
   onSuccess,
   notif
 }) {
-  const { toast } = useToast();
   const [form, setForm] = React46.useState(() => {
     const init = {};
     fields.forEach((f) => {
@@ -10835,20 +11004,14 @@ function EditModal({
     setError(null);
     try {
       await import_axios4.default.put(`${baseUrl}/${itemId}/update`, form);
-      if (notif) {
-        if ((notif.type ?? "toast") === "toast") {
-          toast({
-            variant: notif.editVariant ?? "success",
-            title: notif.editTitle ?? "Record updated",
-            description: notif.editBody,
-            position: notif.toastPosition
-          });
-        } else {
-          setBanner(true);
-        }
+      const updated = { ...item, ...form };
+      if (notif && (notif.type ?? "toast") === "notification") {
+        setBanner(true);
+        onSuccess?.(updated);
+      } else {
+        onSuccess?.(updated);
+        onClose();
       }
-      onSuccess?.({ ...item, ...form });
-      onClose();
     } catch (err) {
       setError(err?.response?.data?.message ?? err.message ?? "Update failed");
     } finally {
@@ -10907,7 +11070,6 @@ function DeleteModal({
   onSuccess,
   notif
 }) {
-  const { toast } = useToast();
   const [loading, setLoading] = React46.useState(false);
   const [error, setError] = React46.useState(null);
   const handleDelete = async () => {
@@ -10915,16 +11077,6 @@ function DeleteModal({
     setError(null);
     try {
       await import_axios4.default.delete(`${baseUrl}/${itemId}/delete`);
-      if (notif) {
-        if ((notif.type ?? "toast") === "toast") {
-          toast({
-            variant: notif.deleteVariant ?? "success",
-            title: notif.deleteTitle ?? "Record deleted",
-            description: notif.deleteBody,
-            position: notif.toastPosition
-          });
-        }
-      }
       onSuccess?.(item);
       onClose();
     } catch (err) {
@@ -11010,6 +11162,7 @@ function Table({
   serverPagination,
   className
 }) {
+  const { toast } = useToast();
   const [search, setSearch] = React46.useState("");
   const [currentPage, setCurrentPage] = React46.useState(1);
   const [selectedIds, setSelectedIds] = React46.useState([]);
@@ -11431,6 +11584,15 @@ function Table({
             (prev) => prev.map((r) => String(r[actionIdKey]) === String(updated[actionIdKey]) ? updated : r)
           );
           defaultActions.onSuccess?.("edit", updated);
+          const notif = defaultActions.onSuccessNotif;
+          if (notif && (notif.type ?? "toast") === "toast") {
+            toast({
+              variant: notif.editVariant ?? "success",
+              title: notif.editTitle ?? "Record updated",
+              description: notif.editBody,
+              position: notif.toastPosition
+            });
+          }
         }
       }
     ),
@@ -11447,6 +11609,15 @@ function Table({
             (prev) => prev.filter((r) => String(r[actionIdKey]) !== String(deleted[actionIdKey]))
           );
           defaultActions.onSuccess?.("delete", deleted);
+          const notif = defaultActions.onSuccessNotif;
+          if (notif && (notif.type ?? "toast") === "toast") {
+            toast({
+              variant: notif.deleteVariant ?? "success",
+              title: notif.deleteTitle ?? "Record deleted",
+              description: notif.deleteBody,
+              position: notif.toastPosition
+            });
+          }
         }
       }
     )

package/dist/index.d.cts

@@ -468,6 +468,13 @@ interface BulletinPreviewProps {
     customActions?: BulletinAction[];
 }
 declare function BulletinPreview({ item, onClose, onEdit, onDelete, onView, customActions }: BulletinPreviewProps): React.ReactPortal;
+interface BulletinEditField {
+    key: keyof BulletinItem | string;
+    label: string;
+    type: "text" | "textarea" | "select" | "checkbox" | "date";
+    options?: string[];
+    placeholder?: string;
+}
 interface BulletinBoardProps {
     /** Array of bulletin post items. */
     items: BulletinItem[];
@@ -509,6 +516,8 @@ interface BulletinBoardProps {
     editMethod?: "PUT" | "PATCH" | "POST";
     /** Item key used as the id segment in the edit URL. */
     editIdKey?: string;
+    /** Edit form fields configuration. */
+    editFields?: BulletinEditField[];
     /** Base URL for built-in DELETE {baseUrl}/{id}/delete request. */
     deleteBaseUrl?: string;
     /** Item key used as the id segment in the delete URL. */
@@ -520,7 +529,7 @@ interface BulletinBoardProps {
     /** Additional CSS classes on the outer wrapper. */
     className?: string;
 }
-declare function BulletinBoard({ items, layout, columns, variant, searchable, filterable, categories: categoriesProp, title, headerAction, showHeader, emptyMessage, loading, loadingCount, onItemClick, onView, onEdit, onDelete, preview, deleteBaseUrl, deleteIdKey, serverPagination, className, }: BulletinBoardProps): react_jsx_runtime.JSX.Element;
+declare function BulletinBoard({ items, layout, columns, variant, searchable, filterable, categories: categoriesProp, title, headerAction, showHeader, emptyMessage, loading, loadingCount, onItemClick, onView, onEdit, onDelete, preview, editBaseUrl, editMethod, editIdKey, editFields, deleteBaseUrl, deleteIdKey, serverPagination, className, }: BulletinBoardProps): react_jsx_runtime.JSX.Element;
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: "primary" | "secondary" | "outline" | "ghost" | "link" | "danger" | "success" | "destructive";
@@ -2018,4 +2027,4 @@ interface WizardProps {
 }
 declare function Wizard({ steps, step: controlledStep, defaultStep, onStepChange, onFinish, onClose, layout, variant, size, isOpen, showClose, unchange, title, description, hideHeader, footer, renderActions, backLabel, nextLabel, finishLabel, cancelLabel, showCancel, showBackOnFirst, loading, clickableSteps, className, contentClassName, }: WizardProps): react_jsx_runtime.JSX.Element;
 
-export { Accordion, type AccordionItem, type AccordionProps, type AccordionVariant, type ActionField, type ActionFieldType, type AuthField, type AuthVariant, type AuthView, Authentication, type AuthenticationProps, AvatarStack, type AvatarStackProps, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, type BulletinAction, BulletinBoard, type BulletinBoardProps, type BulletinColumns, type BulletinItem, type BulletinLayout, BulletinPreview, type BulletinPreviewProps, type BulletinPriority, type BulletinServerPaginationProp, type BulletinVariant, Button, type ButtonProps, COLOR_PALETTE, Calendar, CalendarDateRangePicker, type CalendarDateRangePickerProps, type CalendarDateRangeVariant, type CalendarEvent, type CalendarProps, type CalendarView, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type ChartDataPoint, ChartWidget, type ChartWidgetProps, Checkbox, type CheckboxProps, CircularProgress, type CircularProgressProps, type ClusterVariant, ColorPicker, type ColorPickerProps, type Column, Combobox, type ComboboxOption, type ComboboxProps, type CommandItem, CommandPalette, type CommandPaletteProps, ComposableWidget, type ComposableWidgetProps, type ConfirmVariant, ContextMenu, type ContextMenuItem, type ContextMenuProps, DataGrid, type DataGridColumn, type DataGridProps, DatePickerPopup, type DateRange, DateRangePicker, type DateRangePickerProps, type DefaultActionsConfig, DocsLayout, Drawer, type DrawerProps, type DrawerSide, Dropdown, DropdownItem, DropdownLabel, type DropdownProps, DropdownSeparator, EVENT_COLORS, type FileTypeValidation, FileUpload, type FileUploadProps, type FlexAlign, type FlexDirection, type FlexGap, FlexItem, type FlexItemProps, type FlexJustify, FlexLayout, type FlexLayoutProps, type FlexWrap, type FlyToOptions, type FormField, type FormFieldType, type GridAlign, type GridCols, type GridGap, GridItem, type GridItemProps, GridLayout, type GridLayoutProps, GroupNavigation, type GroupNavigationProps, type ImageEditorMode, type ImageEditorOptions, Input, type InputProps, KanbanBoard, type KanbanBoardProps, type KanbanCard, type KanbanColumn, Label, LeafletMap, type LeafletMapProps, LeftSidebar, type LeftSidebarProps, type MapLibreClusterVariant, MapLibreMap, type MapLibreMarker, type MapLibreProps, type MapLibreRoute, type MapLibreRouteType, type MapLibreStyle, type MapMarker, type MapRoute, type MarkerColor, type MetricItem, MetricRow, type MetricRowProps, Modal, ModalConfirmation, type ModalConfirmationProps, type ModalProps, ModalUnchange, type ModalUnchangeProps, ModalWithForms, type ModalWithFormsProps, type NavGroup, type NavItem, Navigation, type NavigationProps, NotificationBanner, type NotificationBannerProps, type NotificationItem, NotificationPanel, type NotificationPanelProps, type NotificationVariant, OtpInput, type OtpInputProps, Pagination, type PaginationProps, Panel, type PanelProps, PanelSettings, type PanelSettingsProps, type PanelSettingsTab, PanelSidebarGroup, PanelSidebarItem, Popover, type PopoverPlacement, type PopoverProps, Progress, type ProgressProps, type ProgressSize, type ProgressVariant, type PropRow, PropsTable, RadioGroup, type RadioGroupProps, type RadioOption, type RadioSize, type RadioVariant, RangeSlider, type RangeSliderProps, Repeater, type RepeaterProps, ResizablePanels, type ResizablePanelsProps, RichTextEditor, type RichTextEditorProps, RightSidebar, type RightSidebarProps, type RouteType, ScrollArea, type ScrollAreaProps, Section, SectionBlock, type SectionProps, type SectionVariant, Select, type SelectOption, type SelectProps, type SemanticColor, type ServerDataGridProp, type ServerPagination, type ServerPaginationLink, type ServerPaginationProp, type ServerTableResponse, Skeleton, Slider, type SliderProps, type SortDir, StatCard, type StatCardProps, type StatTrend, StatsWidget, type StatsWidgetProps, type Step, type StepStatus, Stepper, type StepperProps, type TabItem, type TabSize, type TabVariant, Table, TableOfContents, type TableProps, TableWidget, type TableWidgetProps, Tabs, type TabsProps, TagInput, type TagInputProps, Textarea, type TextareaProps, type ThemeColors, ThemeProvider, type ThemeSettings, Timeline, type TimelineItem, type TimelineProps, type TimelineVariant, type ToastItem, type ToastPosition, ToastProvider, type ToastProviderProps, type ToastVariant, type TocItem, TocProvider, ToggleSwitch, type ToggleSwitchProps, Tooltip, type TooltipProps, Topbar, type TopbarProps, type TreeNode, TreeView, type TreeViewProps, type TrendDir, type UseServerBulletinOptions, type UseServerBulletinReturn, type UseServerDataGridOptions, type UseServerDataGridReturn, type UseServerTableOptions, type UseServerTableReturn, Widget, type WidgetProps, Wizard, type WizardActionProps, type WizardLayout, type WizardProps, type WizardSize, type WizardStep, type WizardVariant, useServerBulletin, useServerDataGrid, useServerTable, useTheme, useToast, useToc };
+export { Accordion, type AccordionItem, type AccordionProps, type AccordionVariant, type ActionField, type ActionFieldType, type AuthField, type AuthVariant, type AuthView, Authentication, type AuthenticationProps, AvatarStack, type AvatarStackProps, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, type BulletinAction, BulletinBoard, type BulletinBoardProps, type BulletinColumns, type BulletinEditField, type BulletinItem, type BulletinLayout, BulletinPreview, type BulletinPreviewProps, type BulletinPriority, type BulletinServerPaginationProp, type BulletinVariant, Button, type ButtonProps, COLOR_PALETTE, Calendar, CalendarDateRangePicker, type CalendarDateRangePickerProps, type CalendarDateRangeVariant, type CalendarEvent, type CalendarProps, type CalendarView, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type ChartDataPoint, ChartWidget, type ChartWidgetProps, Checkbox, type CheckboxProps, CircularProgress, type CircularProgressProps, type ClusterVariant, ColorPicker, type ColorPickerProps, type Column, Combobox, type ComboboxOption, type ComboboxProps, type CommandItem, CommandPalette, type CommandPaletteProps, ComposableWidget, type ComposableWidgetProps, type ConfirmVariant, ContextMenu, type ContextMenuItem, type ContextMenuProps, DataGrid, type DataGridColumn, type DataGridProps, DatePickerPopup, type DateRange, DateRangePicker, type DateRangePickerProps, type DefaultActionsConfig, DocsLayout, Drawer, type DrawerProps, type DrawerSide, Dropdown, DropdownItem, DropdownLabel, type DropdownProps, DropdownSeparator, EVENT_COLORS, type FileTypeValidation, FileUpload, type FileUploadProps, type FlexAlign, type FlexDirection, type FlexGap, FlexItem, type FlexItemProps, type FlexJustify, FlexLayout, type FlexLayoutProps, type FlexWrap, type FlyToOptions, type FormField, type FormFieldType, type GridAlign, type GridCols, type GridGap, GridItem, type GridItemProps, GridLayout, type GridLayoutProps, GroupNavigation, type GroupNavigationProps, type ImageEditorMode, type ImageEditorOptions, Input, type InputProps, KanbanBoard, type KanbanBoardProps, type KanbanCard, type KanbanColumn, Label, LeafletMap, type LeafletMapProps, LeftSidebar, type LeftSidebarProps, type MapLibreClusterVariant, MapLibreMap, type MapLibreMarker, type MapLibreProps, type MapLibreRoute, type MapLibreRouteType, type MapLibreStyle, type MapMarker, type MapRoute, type MarkerColor, type MetricItem, MetricRow, type MetricRowProps, Modal, ModalConfirmation, type ModalConfirmationProps, type ModalProps, ModalUnchange, type ModalUnchangeProps, ModalWithForms, type ModalWithFormsProps, type NavGroup, type NavItem, Navigation, type NavigationProps, NotificationBanner, type NotificationBannerProps, type NotificationItem, NotificationPanel, type NotificationPanelProps, type NotificationVariant, OtpInput, type OtpInputProps, Pagination, type PaginationProps, Panel, type PanelProps, PanelSettings, type PanelSettingsProps, type PanelSettingsTab, PanelSidebarGroup, PanelSidebarItem, Popover, type PopoverPlacement, type PopoverProps, Progress, type ProgressProps, type ProgressSize, type ProgressVariant, type PropRow, PropsTable, RadioGroup, type RadioGroupProps, type RadioOption, type RadioSize, type RadioVariant, RangeSlider, type RangeSliderProps, Repeater, type RepeaterProps, ResizablePanels, type ResizablePanelsProps, RichTextEditor, type RichTextEditorProps, RightSidebar, type RightSidebarProps, type RouteType, ScrollArea, type ScrollAreaProps, Section, SectionBlock, type SectionProps, type SectionVariant, Select, type SelectOption, type SelectProps, type SemanticColor, type ServerDataGridProp, type ServerPagination, type ServerPaginationLink, type ServerPaginationProp, type ServerTableResponse, Skeleton, Slider, type SliderProps, type SortDir, StatCard, type StatCardProps, type StatTrend, StatsWidget, type StatsWidgetProps, type Step, type StepStatus, Stepper, type StepperProps, type TabItem, type TabSize, type TabVariant, Table, TableOfContents, type TableProps, TableWidget, type TableWidgetProps, Tabs, type TabsProps, TagInput, type TagInputProps, Textarea, type TextareaProps, type ThemeColors, ThemeProvider, type ThemeSettings, Timeline, type TimelineItem, type TimelineProps, type TimelineVariant, type ToastItem, type ToastPosition, ToastProvider, type ToastProviderProps, type ToastVariant, type TocItem, TocProvider, ToggleSwitch, type ToggleSwitchProps, Tooltip, type TooltipProps, Topbar, type TopbarProps, type TreeNode, TreeView, type TreeViewProps, type TrendDir, type UseServerBulletinOptions, type UseServerBulletinReturn, type UseServerDataGridOptions, type UseServerDataGridReturn, type UseServerTableOptions, type UseServerTableReturn, Widget, type WidgetProps, Wizard, type WizardActionProps, type WizardLayout, type WizardProps, type WizardSize, type WizardStep, type WizardVariant, useServerBulletin, useServerDataGrid, useServerTable, useTheme, useToast, useToc };

package/dist/index.d.ts

@@ -468,6 +468,13 @@ interface BulletinPreviewProps {
     customActions?: BulletinAction[];
 }
 declare function BulletinPreview({ item, onClose, onEdit, onDelete, onView, customActions }: BulletinPreviewProps): React.ReactPortal;
+interface BulletinEditField {
+    key: keyof BulletinItem | string;
+    label: string;
+    type: "text" | "textarea" | "select" | "checkbox" | "date";
+    options?: string[];
+    placeholder?: string;
+}
 interface BulletinBoardProps {
     /** Array of bulletin post items. */
     items: BulletinItem[];
@@ -509,6 +516,8 @@ interface BulletinBoardProps {
     editMethod?: "PUT" | "PATCH" | "POST";
     /** Item key used as the id segment in the edit URL. */
     editIdKey?: string;
+    /** Edit form fields configuration. */
+    editFields?: BulletinEditField[];
     /** Base URL for built-in DELETE {baseUrl}/{id}/delete request. */
     deleteBaseUrl?: string;
     /** Item key used as the id segment in the delete URL. */
@@ -520,7 +529,7 @@ interface BulletinBoardProps {
     /** Additional CSS classes on the outer wrapper. */
     className?: string;
 }
-declare function BulletinBoard({ items, layout, columns, variant, searchable, filterable, categories: categoriesProp, title, headerAction, showHeader, emptyMessage, loading, loadingCount, onItemClick, onView, onEdit, onDelete, preview, deleteBaseUrl, deleteIdKey, serverPagination, className, }: BulletinBoardProps): react_jsx_runtime.JSX.Element;
+declare function BulletinBoard({ items, layout, columns, variant, searchable, filterable, categories: categoriesProp, title, headerAction, showHeader, emptyMessage, loading, loadingCount, onItemClick, onView, onEdit, onDelete, preview, editBaseUrl, editMethod, editIdKey, editFields, deleteBaseUrl, deleteIdKey, serverPagination, className, }: BulletinBoardProps): react_jsx_runtime.JSX.Element;
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: "primary" | "secondary" | "outline" | "ghost" | "link" | "danger" | "success" | "destructive";
@@ -2018,4 +2027,4 @@ interface WizardProps {
 }
 declare function Wizard({ steps, step: controlledStep, defaultStep, onStepChange, onFinish, onClose, layout, variant, size, isOpen, showClose, unchange, title, description, hideHeader, footer, renderActions, backLabel, nextLabel, finishLabel, cancelLabel, showCancel, showBackOnFirst, loading, clickableSteps, className, contentClassName, }: WizardProps): react_jsx_runtime.JSX.Element;
 
-export { Accordion, type AccordionItem, type AccordionProps, type AccordionVariant, type ActionField, type ActionFieldType, type AuthField, type AuthVariant, type AuthView, Authentication, type AuthenticationProps, AvatarStack, type AvatarStackProps, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, type BulletinAction, BulletinBoard, type BulletinBoardProps, type BulletinColumns, type BulletinItem, type BulletinLayout, BulletinPreview, type BulletinPreviewProps, type BulletinPriority, type BulletinServerPaginationProp, type BulletinVariant, Button, type ButtonProps, COLOR_PALETTE, Calendar, CalendarDateRangePicker, type CalendarDateRangePickerProps, type CalendarDateRangeVariant, type CalendarEvent, type CalendarProps, type CalendarView, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type ChartDataPoint, ChartWidget, type ChartWidgetProps, Checkbox, type CheckboxProps, CircularProgress, type CircularProgressProps, type ClusterVariant, ColorPicker, type ColorPickerProps, type Column, Combobox, type ComboboxOption, type ComboboxProps, type CommandItem, CommandPalette, type CommandPaletteProps, ComposableWidget, type ComposableWidgetProps, type ConfirmVariant, ContextMenu, type ContextMenuItem, type ContextMenuProps, DataGrid, type DataGridColumn, type DataGridProps, DatePickerPopup, type DateRange, DateRangePicker, type DateRangePickerProps, type DefaultActionsConfig, DocsLayout, Drawer, type DrawerProps, type DrawerSide, Dropdown, DropdownItem, DropdownLabel, type DropdownProps, DropdownSeparator, EVENT_COLORS, type FileTypeValidation, FileUpload, type FileUploadProps, type FlexAlign, type FlexDirection, type FlexGap, FlexItem, type FlexItemProps, type FlexJustify, FlexLayout, type FlexLayoutProps, type FlexWrap, type FlyToOptions, type FormField, type FormFieldType, type GridAlign, type GridCols, type GridGap, GridItem, type GridItemProps, GridLayout, type GridLayoutProps, GroupNavigation, type GroupNavigationProps, type ImageEditorMode, type ImageEditorOptions, Input, type InputProps, KanbanBoard, type KanbanBoardProps, type KanbanCard, type KanbanColumn, Label, LeafletMap, type LeafletMapProps, LeftSidebar, type LeftSidebarProps, type MapLibreClusterVariant, MapLibreMap, type MapLibreMarker, type MapLibreProps, type MapLibreRoute, type MapLibreRouteType, type MapLibreStyle, type MapMarker, type MapRoute, type MarkerColor, type MetricItem, MetricRow, type MetricRowProps, Modal, ModalConfirmation, type ModalConfirmationProps, type ModalProps, ModalUnchange, type ModalUnchangeProps, ModalWithForms, type ModalWithFormsProps, type NavGroup, type NavItem, Navigation, type NavigationProps, NotificationBanner, type NotificationBannerProps, type NotificationItem, NotificationPanel, type NotificationPanelProps, type NotificationVariant, OtpInput, type OtpInputProps, Pagination, type PaginationProps, Panel, type PanelProps, PanelSettings, type PanelSettingsProps, type PanelSettingsTab, PanelSidebarGroup, PanelSidebarItem, Popover, type PopoverPlacement, type PopoverProps, Progress, type ProgressProps, type ProgressSize, type ProgressVariant, type PropRow, PropsTable, RadioGroup, type RadioGroupProps, type RadioOption, type RadioSize, type RadioVariant, RangeSlider, type RangeSliderProps, Repeater, type RepeaterProps, ResizablePanels, type ResizablePanelsProps, RichTextEditor, type RichTextEditorProps, RightSidebar, type RightSidebarProps, type RouteType, ScrollArea, type ScrollAreaProps, Section, SectionBlock, type SectionProps, type SectionVariant, Select, type SelectOption, type SelectProps, type SemanticColor, type ServerDataGridProp, type ServerPagination, type ServerPaginationLink, type ServerPaginationProp, type ServerTableResponse, Skeleton, Slider, type SliderProps, type SortDir, StatCard, type StatCardProps, type StatTrend, StatsWidget, type StatsWidgetProps, type Step, type StepStatus, Stepper, type StepperProps, type TabItem, type TabSize, type TabVariant, Table, TableOfContents, type TableProps, TableWidget, type TableWidgetProps, Tabs, type TabsProps, TagInput, type TagInputProps, Textarea, type TextareaProps, type ThemeColors, ThemeProvider, type ThemeSettings, Timeline, type TimelineItem, type TimelineProps, type TimelineVariant, type ToastItem, type ToastPosition, ToastProvider, type ToastProviderProps, type ToastVariant, type TocItem, TocProvider, ToggleSwitch, type ToggleSwitchProps, Tooltip, type TooltipProps, Topbar, type TopbarProps, type TreeNode, TreeView, type TreeViewProps, type TrendDir, type UseServerBulletinOptions, type UseServerBulletinReturn, type UseServerDataGridOptions, type UseServerDataGridReturn, type UseServerTableOptions, type UseServerTableReturn, Widget, type WidgetProps, Wizard, type WizardActionProps, type WizardLayout, type WizardProps, type WizardSize, type WizardStep, type WizardVariant, useServerBulletin, useServerDataGrid, useServerTable, useTheme, useToast, useToc };
+export { Accordion, type AccordionItem, type AccordionProps, type AccordionVariant, type ActionField, type ActionFieldType, type AuthField, type AuthVariant, type AuthView, Authentication, type AuthenticationProps, AvatarStack, type AvatarStackProps, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, type BulletinAction, BulletinBoard, type BulletinBoardProps, type BulletinColumns, type BulletinEditField, type BulletinItem, type BulletinLayout, BulletinPreview, type BulletinPreviewProps, type BulletinPriority, type BulletinServerPaginationProp, type BulletinVariant, Button, type ButtonProps, COLOR_PALETTE, Calendar, CalendarDateRangePicker, type CalendarDateRangePickerProps, type CalendarDateRangeVariant, type CalendarEvent, type CalendarProps, type CalendarView, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type ChartDataPoint, ChartWidget, type ChartWidgetProps, Checkbox, type CheckboxProps, CircularProgress, type CircularProgressProps, type ClusterVariant, ColorPicker, type ColorPickerProps, type Column, Combobox, type ComboboxOption, type ComboboxProps, type CommandItem, CommandPalette, type CommandPaletteProps, ComposableWidget, type ComposableWidgetProps, type ConfirmVariant, ContextMenu, type ContextMenuItem, type ContextMenuProps, DataGrid, type DataGridColumn, type DataGridProps, DatePickerPopup, type DateRange, DateRangePicker, type DateRangePickerProps, type DefaultActionsConfig, DocsLayout, Drawer, type DrawerProps, type DrawerSide, Dropdown, DropdownItem, DropdownLabel, type DropdownProps, DropdownSeparator, EVENT_COLORS, type FileTypeValidation, FileUpload, type FileUploadProps, type FlexAlign, type FlexDirection, type FlexGap, FlexItem, type FlexItemProps, type FlexJustify, FlexLayout, type FlexLayoutProps, type FlexWrap, type FlyToOptions, type FormField, type FormFieldType, type GridAlign, type GridCols, type GridGap, GridItem, type GridItemProps, GridLayout, type GridLayoutProps, GroupNavigation, type GroupNavigationProps, type ImageEditorMode, type ImageEditorOptions, Input, type InputProps, KanbanBoard, type KanbanBoardProps, type KanbanCard, type KanbanColumn, Label, LeafletMap, type LeafletMapProps, LeftSidebar, type LeftSidebarProps, type MapLibreClusterVariant, MapLibreMap, type MapLibreMarker, type MapLibreProps, type MapLibreRoute, type MapLibreRouteType, type MapLibreStyle, type MapMarker, type MapRoute, type MarkerColor, type MetricItem, MetricRow, type MetricRowProps, Modal, ModalConfirmation, type ModalConfirmationProps, type ModalProps, ModalUnchange, type ModalUnchangeProps, ModalWithForms, type ModalWithFormsProps, type NavGroup, type NavItem, Navigation, type NavigationProps, NotificationBanner, type NotificationBannerProps, type NotificationItem, NotificationPanel, type NotificationPanelProps, type NotificationVariant, OtpInput, type OtpInputProps, Pagination, type PaginationProps, Panel, type PanelProps, PanelSettings, type PanelSettingsProps, type PanelSettingsTab, PanelSidebarGroup, PanelSidebarItem, Popover, type PopoverPlacement, type PopoverProps, Progress, type ProgressProps, type ProgressSize, type ProgressVariant, type PropRow, PropsTable, RadioGroup, type RadioGroupProps, type RadioOption, type RadioSize, type RadioVariant, RangeSlider, type RangeSliderProps, Repeater, type RepeaterProps, ResizablePanels, type ResizablePanelsProps, RichTextEditor, type RichTextEditorProps, RightSidebar, type RightSidebarProps, type RouteType, ScrollArea, type ScrollAreaProps, Section, SectionBlock, type SectionProps, type SectionVariant, Select, type SelectOption, type SelectProps, type SemanticColor, type ServerDataGridProp, type ServerPagination, type ServerPaginationLink, type ServerPaginationProp, type ServerTableResponse, Skeleton, Slider, type SliderProps, type SortDir, StatCard, type StatCardProps, type StatTrend, StatsWidget, type StatsWidgetProps, type Step, type StepStatus, Stepper, type StepperProps, type TabItem, type TabSize, type TabVariant, Table, TableOfContents, type TableProps, TableWidget, type TableWidgetProps, Tabs, type TabsProps, TagInput, type TagInputProps, Textarea, type TextareaProps, type ThemeColors, ThemeProvider, type ThemeSettings, Timeline, type TimelineItem, type TimelineProps, type TimelineVariant, type ToastItem, type ToastPosition, ToastProvider, type ToastProviderProps, type ToastVariant, type TocItem, TocProvider, ToggleSwitch, type ToggleSwitchProps, Tooltip, type TooltipProps, Topbar, type TopbarProps, type TreeNode, TreeView, type TreeViewProps, type TrendDir, type UseServerBulletinOptions, type UseServerBulletinReturn, type UseServerDataGridOptions, type UseServerDataGridReturn, type UseServerTableOptions, type UseServerTableReturn, Widget, type WidgetProps, Wizard, type WizardActionProps, type WizardLayout, type WizardProps, type WizardSize, type WizardStep, type WizardVariant, useServerBulletin, useServerDataGrid, useServerTable, useTheme, useToast, useToc };

package/dist/index.global.js

@@ -65076,6 +65076,153 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
       document.body
     );
   }
+  function BulletinEditModal({
+    item,
+    baseUrl,
+    idKey,
+    method,
+    fields,
+    onClose,
+    onSuccess
+  }) {
+    const [loading, setLoading] = React8.useState(false);
+    const [error, setError] = React8.useState(null);
+    const [formData, setFormData] = React8.useState(() => {
+      const initial = {};
+      fields.forEach((f) => {
+        initial[f.key] = item[f.key] ?? "";
+      });
+      return initial;
+    });
+    const id = item[idKey ?? "id"];
+    const handleChange = (key, value) => {
+      setFormData((prev) => ({ ...prev, [key]: value }));
+    };
+    const handleSubmit = async (e) => {
+      e.preventDefault();
+      setLoading(true);
+      setError(null);
+      try {
+        const response = await axios_default({
+          method: method ?? "PUT",
+          url: `${baseUrl}/${id}`,
+          data: formData
+        });
+        onSuccess?.(response.data);
+        onClose();
+      } catch (err) {
+        setError(err?.response?.data?.message ?? err.message ?? "Update failed");
+      } finally {
+        setLoading(false);
+      }
+    };
+    return (0, import_react_dom.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        "div",
+        {
+          className: "fixed inset-0 z-50 flex items-center justify-center p-4",
+          style: { background: "rgba(0,0,0,0.55)" },
+          onMouseDown: (e) => {
+            if (e.target === e.currentTarget) onClose();
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "w-full max-w-md rounded-2xl border border-border bg-card shadow-2xl p-6 space-y-4 max-h-[90vh] overflow-y-auto", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h2", { className: "text-base font-semibold", children: "Edit Post" }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: onClose,
+                  className: "flex h-7 w-7 items-center justify-center rounded-lg text-muted-foreground hover:bg-accent hover:text-foreground transition-colors",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(X, { className: "h-4 w-4" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
+              fields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-1.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-muted-foreground", children: field.label }),
+                field.type === "textarea" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  "textarea",
+                  {
+                    value: formData[field.key] ?? "",
+                    onChange: (e) => handleChange(field.key, e.target.value),
+                    placeholder: field.placeholder,
+                    className: "w-full px-3 py-2 text-sm rounded-lg border border-border bg-background outline-none focus:ring-1 focus:ring-ring resize-none",
+                    rows: 4
+                  }
+                ) : field.type === "select" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                  "select",
+                  {
+                    value: formData[field.key] ?? "",
+                    onChange: (e) => handleChange(field.key, e.target.value),
+                    className: "w-full px-3 py-2 text-sm rounded-lg border border-border bg-background outline-none focus:ring-1 focus:ring-ring",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "", children: "Select..." }),
+                      field.options?.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: opt, children: opt }, opt))
+                    ]
+                  }
+                ) : field.type === "checkbox" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                    "input",
+                    {
+                      type: "checkbox",
+                      checked: formData[field.key] ?? false,
+                      onChange: (e) => handleChange(field.key, e.target.checked),
+                      className: "h-4 w-4 rounded border-border"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-sm text-muted-foreground", children: field.placeholder })
+                ] }) : field.type === "date" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  "input",
+                  {
+                    type: "date",
+                    value: formData[field.key] ?? "",
+                    onChange: (e) => handleChange(field.key, e.target.value),
+                    className: "w-full px-3 py-2 text-sm rounded-lg border border-border bg-background outline-none focus:ring-1 focus:ring-ring"
+                  }
+                ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  "input",
+                  {
+                    type: "text",
+                    value: formData[field.key] ?? "",
+                    onChange: (e) => handleChange(field.key, e.target.value),
+                    placeholder: field.placeholder,
+                    className: "w-full px-3 py-2 text-sm rounded-lg border border-border bg-background outline-none focus:ring-1 focus:ring-ring"
+                  }
+                )
+              ] }, field.key)),
+              error && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-xs text-danger", children: error }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex justify-end gap-2 pt-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: onClose,
+                    disabled: loading,
+                    className: "px-4 py-1.5 text-sm rounded-xl border border-border hover:bg-accent transition-colors",
+                    children: "Cancel"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                  "button",
+                  {
+                    type: "submit",
+                    disabled: loading,
+                    className: "px-4 py-1.5 text-sm rounded-xl bg-primary text-primary-foreground hover:bg-primary/90 transition-colors flex items-center gap-1.5",
+                    children: [
+                      loading && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(LoaderCircle, { className: "h-3.5 w-3.5 animate-spin" }),
+                      loading ? "Saving\u2026" : "Save"
+                    ]
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        }
+      ),
+      document.body
+    );
+  }
   function ActionMenu({ item, actions }) {
     const [open, setOpen] = React8.useState(false);
     const ref = React8.useRef(null);
@@ -65225,12 +65372,17 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     onEdit,
     onDelete,
     preview = false,
+    editBaseUrl,
+    editMethod,
+    editIdKey,
+    editFields,
     deleteBaseUrl,
     deleteIdKey = "id",
     serverPagination,
     className
   }) {
     const [previewItem, setPreviewItem] = React8.useState(null);
+    const [editItem, setEditItem] = React8.useState(null);
     const [deleteItem, setDeleteItem] = React8.useState(null);
     const [search, setSearch] = React8.useState("");
     const [category, setCategory] = React8.useState(null);
@@ -65376,7 +65528,10 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
           onView: onView ? (item) => {
             onView(item);
           } : void 0,
-          onEdit: onEdit ? (item) => {
+          onEdit: editBaseUrl && editFields ? (item) => {
+            setPreviewItem(null);
+            setEditItem(item);
+          } : onEdit ? (item) => {
             onEdit(item);
           } : void 0,
           onDelete: deleteBaseUrl ? (item) => {
@@ -65387,6 +65542,20 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
           } : void 0
         }
       ),
+      editItem && editBaseUrl && editFields && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        BulletinEditModal,
+        {
+          item: editItem,
+          baseUrl: editBaseUrl,
+          idKey: editIdKey,
+          method: editMethod,
+          fields: editFields,
+          onClose: () => setEditItem(null),
+          onSuccess: (updated) => {
+            onEdit?.(updated);
+          }
+        }
+      ),
       deleteItem && deleteBaseUrl && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         BulletinDeleteConfirm,
         {
@@ -69562,7 +69731,6 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     onSuccess,
     notif
   }) {
-    const { toast } = useToast();
     const [form, setForm] = React28.useState(() => {
       const init = {};
       fields.forEach((f) => {
@@ -69579,15 +69747,14 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
       setError(null);
       try {
         await axios_default.put(`${baseUrl}/${itemId}/update`, form);
-        if (notif) {
-          if ((notif.type ?? "toast") === "toast") {
-            toast({ variant: notif.editVariant ?? "success", title: notif.editTitle ?? "Record updated", description: notif.editBody, position: notif.toastPosition });
-          } else {
-            setBanner(true);
-          }
+        const updated = { ...item, ...form };
+        if (notif && (notif.type ?? "toast") === "notification") {
+          setBanner(true);
+          onSuccess?.(updated);
+        } else {
+          onSuccess?.(updated);
+          onClose();
         }
-        onSuccess?.({ ...item, ...form });
-        onClose();
       } catch (err) {
         setError(err?.response?.data?.message ?? err.message ?? "Update failed");
       } finally {
@@ -69639,7 +69806,6 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     onSuccess,
     notif
   }) {
-    const { toast } = useToast();
     const [loading, setLoading] = React28.useState(false);
     const [error, setError] = React28.useState(null);
     const handleDelete = async () => {
@@ -69647,11 +69813,6 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
       setError(null);
       try {
         await axios_default.delete(`${baseUrl}/${itemId}/delete`);
-        if (notif) {
-          if ((notif.type ?? "toast") === "toast") {
-            toast({ variant: notif.deleteVariant ?? "success", title: notif.deleteTitle ?? "Record deleted", description: notif.deleteBody, position: notif.toastPosition });
-          }
-        }
         onSuccess?.(item);
         onClose();
       } catch (err) {
@@ -69696,6 +69857,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     defaultActions,
     serverPagination
   }) {
+    const { toast } = useToast();
     const [sortKey, setSortKey] = React28.useState(null);
     const [sortDir, setSortDir] = React28.useState(null);
     const [filters, setFilters] = React28.useState({});
@@ -70019,6 +70181,10 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
           onSuccess: (updated) => {
             setTableData((prev) => prev.map((r2) => String(r2[actionIdKey]) === String(updated[actionIdKey]) ? updated : r2));
             defaultActions.onSuccess?.("edit", updated);
+            const notif = defaultActions.onSuccessNotif;
+            if (notif && (notif.type ?? "toast") === "toast") {
+              toast({ variant: notif.editVariant ?? "success", title: notif.editTitle ?? "Record updated", description: notif.editBody, position: notif.toastPosition });
+            }
           }
         }
       ),
@@ -70033,6 +70199,10 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
           onSuccess: (deleted) => {
             setTableData((prev) => prev.filter((r2) => String(r2[actionIdKey]) !== String(deleted[actionIdKey])));
             defaultActions.onSuccess?.("delete", deleted);
+            const notif = defaultActions.onSuccessNotif;
+            if (notif && (notif.type ?? "toast") === "toast") {
+              toast({ variant: notif.deleteVariant ?? "success", title: notif.deleteTitle ?? "Record deleted", description: notif.deleteBody, position: notif.toastPosition });
+            }
           }
         }
       )
@@ -74378,7 +74548,6 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     onSuccess,
     notif
   }) {
-    const { toast } = useToast();
     const [form, setForm] = React48.useState(() => {
       const init = {};
       fields.forEach((f) => {
@@ -74395,20 +74564,14 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
       setError(null);
       try {
         await axios_default.put(`${baseUrl}/${itemId}/update`, form);
-        if (notif) {
-          if ((notif.type ?? "toast") === "toast") {
-            toast({
-              variant: notif.editVariant ?? "success",
-              title: notif.editTitle ?? "Record updated",
-              description: notif.editBody,
-              position: notif.toastPosition
-            });
-          } else {
-            setBanner(true);
-          }
+        const updated = { ...item, ...form };
+        if (notif && (notif.type ?? "toast") === "notification") {
+          setBanner(true);
+          onSuccess?.(updated);
+        } else {
+          onSuccess?.(updated);
+          onClose();
         }
-        onSuccess?.({ ...item, ...form });
-        onClose();
       } catch (err) {
         setError(err?.response?.data?.message ?? err.message ?? "Update failed");
       } finally {
@@ -74467,7 +74630,6 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     onSuccess,
     notif
   }) {
-    const { toast } = useToast();
     const [loading, setLoading] = React48.useState(false);
     const [error, setError] = React48.useState(null);
     const handleDelete = async () => {
@@ -74475,16 +74637,6 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
       setError(null);
       try {
         await axios_default.delete(`${baseUrl}/${itemId}/delete`);
-        if (notif) {
-          if ((notif.type ?? "toast") === "toast") {
-            toast({
-              variant: notif.deleteVariant ?? "success",
-              title: notif.deleteTitle ?? "Record deleted",
-              description: notif.deleteBody,
-              position: notif.toastPosition
-            });
-          }
-        }
         onSuccess?.(item);
         onClose();
       } catch (err) {
@@ -74570,6 +74722,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     serverPagination,
     className
   }) {
+    const { toast } = useToast();
     const [search, setSearch] = React48.useState("");
     const [currentPage, setCurrentPage] = React48.useState(1);
     const [selectedIds, setSelectedIds] = React48.useState([]);
@@ -74991,6 +75144,15 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
               (prev) => prev.map((r2) => String(r2[actionIdKey]) === String(updated[actionIdKey]) ? updated : r2)
             );
             defaultActions.onSuccess?.("edit", updated);
+            const notif = defaultActions.onSuccessNotif;
+            if (notif && (notif.type ?? "toast") === "toast") {
+              toast({
+                variant: notif.editVariant ?? "success",
+                title: notif.editTitle ?? "Record updated",
+                description: notif.editBody,
+                position: notif.toastPosition
+              });
+            }
           }
         }
       ),
@@ -75007,6 +75169,15 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
               (prev) => prev.filter((r2) => String(r2[actionIdKey]) !== String(deleted[actionIdKey]))
             );
             defaultActions.onSuccess?.("delete", deleted);
+            const notif = defaultActions.onSuccessNotif;
+            if (notif && (notif.type ?? "toast") === "toast") {
+              toast({
+                variant: notif.deleteVariant ?? "success",
+                title: notif.deleteTitle ?? "Record deleted",
+                description: notif.deleteBody,
+                position: notif.toastPosition
+              });
+            }
           }
         }
       )

package/dist/index.js

@@ -1796,6 +1796,153 @@ function BulletinDeleteConfirm({
     document.body
   );
 }
+function BulletinEditModal({
+  item,
+  baseUrl,
+  idKey,
+  method,
+  fields,
+  onClose,
+  onSuccess
+}) {
+  const [loading, setLoading] = React8.useState(false);
+  const [error, setError] = React8.useState(null);
+  const [formData, setFormData] = React8.useState(() => {
+    const initial = {};
+    fields.forEach((f) => {
+      initial[f.key] = item[f.key] ?? "";
+    });
+    return initial;
+  });
+  const id = item[idKey ?? "id"];
+  const handleChange = (key, value) => {
+    setFormData((prev) => ({ ...prev, [key]: value }));
+  };
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await axios2({
+        method: method ?? "PUT",
+        url: `${baseUrl}/${id}`,
+        data: formData
+      });
+      onSuccess?.(response.data);
+      onClose();
+    } catch (err) {
+      setError(err?.response?.data?.message ?? err.message ?? "Update failed");
+    } finally {
+      setLoading(false);
+    }
+  };
+  return createPortal2(
+    /* @__PURE__ */ jsx10(
+      "div",
+      {
+        className: "fixed inset-0 z-50 flex items-center justify-center p-4",
+        style: { background: "rgba(0,0,0,0.55)" },
+        onMouseDown: (e) => {
+          if (e.target === e.currentTarget) onClose();
+        },
+        children: /* @__PURE__ */ jsxs9("div", { className: "w-full max-w-md rounded-2xl border border-border bg-card shadow-2xl p-6 space-y-4 max-h-[90vh] overflow-y-auto", children: [
+          /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx10("h2", { className: "text-base font-semibold", children: "Edit Post" }),
+            /* @__PURE__ */ jsx10(
+              "button",
+              {
+                type: "button",
+                onClick: onClose,
+                className: "flex h-7 w-7 items-center justify-center rounded-lg text-muted-foreground hover:bg-accent hover:text-foreground transition-colors",
+                children: /* @__PURE__ */ jsx10(X, { className: "h-4 w-4" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs9("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
+            fields.map((field) => /* @__PURE__ */ jsxs9("div", { className: "space-y-1.5", children: [
+              /* @__PURE__ */ jsx10("label", { className: "text-xs font-medium text-muted-foreground", children: field.label }),
+              field.type === "textarea" ? /* @__PURE__ */ jsx10(
+                "textarea",
+                {
+                  value: formData[field.key] ?? "",
+                  onChange: (e) => handleChange(field.key, e.target.value),
+                  placeholder: field.placeholder,
+                  className: "w-full px-3 py-2 text-sm rounded-lg border border-border bg-background outline-none focus:ring-1 focus:ring-ring resize-none",
+                  rows: 4
+                }
+              ) : field.type === "select" ? /* @__PURE__ */ jsxs9(
+                "select",
+                {
+                  value: formData[field.key] ?? "",
+                  onChange: (e) => handleChange(field.key, e.target.value),
+                  className: "w-full px-3 py-2 text-sm rounded-lg border border-border bg-background outline-none focus:ring-1 focus:ring-ring",
+                  children: [
+                    /* @__PURE__ */ jsx10("option", { value: "", children: "Select..." }),
+                    field.options?.map((opt) => /* @__PURE__ */ jsx10("option", { value: opt, children: opt }, opt))
+                  ]
+                }
+              ) : field.type === "checkbox" ? /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx10(
+                  "input",
+                  {
+                    type: "checkbox",
+                    checked: formData[field.key] ?? false,
+                    onChange: (e) => handleChange(field.key, e.target.checked),
+                    className: "h-4 w-4 rounded border-border"
+                  }
+                ),
+                /* @__PURE__ */ jsx10("span", { className: "text-sm text-muted-foreground", children: field.placeholder })
+              ] }) : field.type === "date" ? /* @__PURE__ */ jsx10(
+                "input",
+                {
+                  type: "date",
+                  value: formData[field.key] ?? "",
+                  onChange: (e) => handleChange(field.key, e.target.value),
+                  className: "w-full px-3 py-2 text-sm rounded-lg border border-border bg-background outline-none focus:ring-1 focus:ring-ring"
+                }
+              ) : /* @__PURE__ */ jsx10(
+                "input",
+                {
+                  type: "text",
+                  value: formData[field.key] ?? "",
+                  onChange: (e) => handleChange(field.key, e.target.value),
+                  placeholder: field.placeholder,
+                  className: "w-full px-3 py-2 text-sm rounded-lg border border-border bg-background outline-none focus:ring-1 focus:ring-ring"
+                }
+              )
+            ] }, field.key)),
+            error && /* @__PURE__ */ jsx10("p", { className: "text-xs text-danger", children: error }),
+            /* @__PURE__ */ jsxs9("div", { className: "flex justify-end gap-2 pt-2", children: [
+              /* @__PURE__ */ jsx10(
+                "button",
+                {
+                  type: "button",
+                  onClick: onClose,
+                  disabled: loading,
+                  className: "px-4 py-1.5 text-sm rounded-xl border border-border hover:bg-accent transition-colors",
+                  children: "Cancel"
+                }
+              ),
+              /* @__PURE__ */ jsxs9(
+                "button",
+                {
+                  type: "submit",
+                  disabled: loading,
+                  className: "px-4 py-1.5 text-sm rounded-xl bg-primary text-primary-foreground hover:bg-primary/90 transition-colors flex items-center gap-1.5",
+                  children: [
+                    loading && /* @__PURE__ */ jsx10(Loader2, { className: "h-3.5 w-3.5 animate-spin" }),
+                    loading ? "Saving\u2026" : "Save"
+                  ]
+                }
+              )
+            ] })
+          ] })
+        ] })
+      }
+    ),
+    document.body
+  );
+}
 function ActionMenu({ item, actions }) {
   const [open, setOpen] = React8.useState(false);
   const ref = React8.useRef(null);
@@ -1945,12 +2092,17 @@ function BulletinBoard({
   onEdit,
   onDelete,
   preview = false,
+  editBaseUrl,
+  editMethod,
+  editIdKey,
+  editFields,
   deleteBaseUrl,
   deleteIdKey = "id",
   serverPagination,
   className
 }) {
   const [previewItem, setPreviewItem] = React8.useState(null);
+  const [editItem, setEditItem] = React8.useState(null);
   const [deleteItem, setDeleteItem] = React8.useState(null);
   const [search, setSearch] = React8.useState("");
   const [category, setCategory] = React8.useState(null);
@@ -2096,7 +2248,10 @@ function BulletinBoard({
         onView: onView ? (item) => {
           onView(item);
         } : void 0,
-        onEdit: onEdit ? (item) => {
+        onEdit: editBaseUrl && editFields ? (item) => {
+          setPreviewItem(null);
+          setEditItem(item);
+        } : onEdit ? (item) => {
           onEdit(item);
         } : void 0,
         onDelete: deleteBaseUrl ? (item) => {
@@ -2107,6 +2262,20 @@ function BulletinBoard({
         } : void 0
       }
     ),
+    editItem && editBaseUrl && editFields && /* @__PURE__ */ jsx10(
+      BulletinEditModal,
+      {
+        item: editItem,
+        baseUrl: editBaseUrl,
+        idKey: editIdKey,
+        method: editMethod,
+        fields: editFields,
+        onClose: () => setEditItem(null),
+        onSuccess: (updated) => {
+          onEdit?.(updated);
+        }
+      }
+    ),
     deleteItem && deleteBaseUrl && /* @__PURE__ */ jsx10(
       BulletinDeleteConfirm,
       {
@@ -6296,7 +6465,6 @@ function DGEditModal({
   onSuccess,
   notif
 }) {
-  const { toast } = useToast();
   const [form, setForm] = React28.useState(() => {
     const init = {};
     fields.forEach((f) => {
@@ -6313,15 +6481,14 @@ function DGEditModal({
     setError(null);
     try {
       await axios3.put(`${baseUrl}/${itemId}/update`, form);
-      if (notif) {
-        if ((notif.type ?? "toast") === "toast") {
-          toast({ variant: notif.editVariant ?? "success", title: notif.editTitle ?? "Record updated", description: notif.editBody, position: notif.toastPosition });
-        } else {
-          setBanner(true);
-        }
+      const updated = { ...item, ...form };
+      if (notif && (notif.type ?? "toast") === "notification") {
+        setBanner(true);
+        onSuccess?.(updated);
+      } else {
+        onSuccess?.(updated);
+        onClose();
       }
-      onSuccess?.({ ...item, ...form });
-      onClose();
     } catch (err) {
       setError(err?.response?.data?.message ?? err.message ?? "Update failed");
     } finally {
@@ -6373,7 +6540,6 @@ function DGDeleteModal({
   onSuccess,
   notif
 }) {
-  const { toast } = useToast();
   const [loading, setLoading] = React28.useState(false);
   const [error, setError] = React28.useState(null);
   const handleDelete = async () => {
@@ -6381,11 +6547,6 @@ function DGDeleteModal({
     setError(null);
     try {
       await axios3.delete(`${baseUrl}/${itemId}/delete`);
-      if (notif) {
-        if ((notif.type ?? "toast") === "toast") {
-          toast({ variant: notif.deleteVariant ?? "success", title: notif.deleteTitle ?? "Record deleted", description: notif.deleteBody, position: notif.toastPosition });
-        }
-      }
       onSuccess?.(item);
       onClose();
     } catch (err) {
@@ -6430,6 +6591,7 @@ function DataGrid({
   defaultActions,
   serverPagination
 }) {
+  const { toast } = useToast();
   const [sortKey, setSortKey] = React28.useState(null);
   const [sortDir, setSortDir] = React28.useState(null);
   const [filters, setFilters] = React28.useState({});
@@ -6753,6 +6915,10 @@ function DataGrid({
         onSuccess: (updated) => {
           setTableData((prev) => prev.map((r) => String(r[actionIdKey]) === String(updated[actionIdKey]) ? updated : r));
           defaultActions.onSuccess?.("edit", updated);
+          const notif = defaultActions.onSuccessNotif;
+          if (notif && (notif.type ?? "toast") === "toast") {
+            toast({ variant: notif.editVariant ?? "success", title: notif.editTitle ?? "Record updated", description: notif.editBody, position: notif.toastPosition });
+          }
         }
       }
     ),
@@ -6767,6 +6933,10 @@ function DataGrid({
         onSuccess: (deleted) => {
           setTableData((prev) => prev.filter((r) => String(r[actionIdKey]) !== String(deleted[actionIdKey])));
           defaultActions.onSuccess?.("delete", deleted);
+          const notif = defaultActions.onSuccessNotif;
+          if (notif && (notif.type ?? "toast") === "toast") {
+            toast({ variant: notif.deleteVariant ?? "success", title: notif.deleteTitle ?? "Record deleted", description: notif.deleteBody, position: notif.toastPosition });
+          }
         }
       }
     )
@@ -10700,7 +10870,6 @@ function EditModal({
   onSuccess,
   notif
 }) {
-  const { toast } = useToast();
   const [form, setForm] = React46.useState(() => {
     const init = {};
     fields.forEach((f) => {
@@ -10717,20 +10886,14 @@ function EditModal({
     setError(null);
     try {
       await axios4.put(`${baseUrl}/${itemId}/update`, form);
-      if (notif) {
-        if ((notif.type ?? "toast") === "toast") {
-          toast({
-            variant: notif.editVariant ?? "success",
-            title: notif.editTitle ?? "Record updated",
-            description: notif.editBody,
-            position: notif.toastPosition
-          });
-        } else {
-          setBanner(true);
-        }
+      const updated = { ...item, ...form };
+      if (notif && (notif.type ?? "toast") === "notification") {
+        setBanner(true);
+        onSuccess?.(updated);
+      } else {
+        onSuccess?.(updated);
+        onClose();
       }
-      onSuccess?.({ ...item, ...form });
-      onClose();
     } catch (err) {
       setError(err?.response?.data?.message ?? err.message ?? "Update failed");
     } finally {
@@ -10789,7 +10952,6 @@ function DeleteModal({
   onSuccess,
   notif
 }) {
-  const { toast } = useToast();
   const [loading, setLoading] = React46.useState(false);
   const [error, setError] = React46.useState(null);
   const handleDelete = async () => {
@@ -10797,16 +10959,6 @@ function DeleteModal({
     setError(null);
     try {
       await axios4.delete(`${baseUrl}/${itemId}/delete`);
-      if (notif) {
-        if ((notif.type ?? "toast") === "toast") {
-          toast({
-            variant: notif.deleteVariant ?? "success",
-            title: notif.deleteTitle ?? "Record deleted",
-            description: notif.deleteBody,
-            position: notif.toastPosition
-          });
-        }
-      }
       onSuccess?.(item);
       onClose();
     } catch (err) {
@@ -10892,6 +11044,7 @@ function Table({
   serverPagination,
   className
 }) {
+  const { toast } = useToast();
   const [search, setSearch] = React46.useState("");
   const [currentPage, setCurrentPage] = React46.useState(1);
   const [selectedIds, setSelectedIds] = React46.useState([]);
@@ -11313,6 +11466,15 @@ function Table({
             (prev) => prev.map((r) => String(r[actionIdKey]) === String(updated[actionIdKey]) ? updated : r)
           );
           defaultActions.onSuccess?.("edit", updated);
+          const notif = defaultActions.onSuccessNotif;
+          if (notif && (notif.type ?? "toast") === "toast") {
+            toast({
+              variant: notif.editVariant ?? "success",
+              title: notif.editTitle ?? "Record updated",
+              description: notif.editBody,
+              position: notif.toastPosition
+            });
+          }
         }
       }
     ),
@@ -11329,6 +11491,15 @@ function Table({
             (prev) => prev.filter((r) => String(r[actionIdKey]) !== String(deleted[actionIdKey]))
           );
           defaultActions.onSuccess?.("delete", deleted);
+          const notif = defaultActions.onSuccessNotif;
+          if (notif && (notif.type ?? "toast") === "toast") {
+            toast({
+              variant: notif.deleteVariant ?? "success",
+              title: notif.deleteTitle ?? "Record deleted",
+              description: notif.deleteBody,
+              position: notif.toastPosition
+            });
+          }
         }
       }
     )

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "3.1.8",
+  "version": "3.2.2",
   "description": "Reusable React UI components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -27,6 +27,7 @@
     "react-dom": ">=18"
   },
   "dependencies": {
+    "@juv/codego-react-ui": "^3.2.0",
     "@tailwindcss/vite": "^4.1.14",
     "@types/leaflet": "^1.9.21",
     "@types/leaflet.markercluster": "^1.5.6",