keystone-design-bootstrap 1.0.48 → 1.0.50

package/dist/{blog-post-CvRhU9ss.d.ts → blog-post-D7HFCDp1.d.ts}

@@ -1,4 +1,4 @@
-import { a as PhotoAttachment } from './form-CWXC-IHT.js';
+import { P as PhotoAttachment } from './photos-8jMeetqV.js';
 
 interface BlogPost {
     id: number;
@@ -47,4 +47,4 @@ interface BlogPostTag {
     updated_at: string;
 }
 
-export type { BlogPost as B, BlogPostAuthor as a, BlogPostTag as b, BlogPostParams as c, BlogPostResponse as d };
+export type { BlogPost as B, BlogPostParams as a, BlogPostResponse as b, BlogPostAuthor as c, BlogPostTag as d };

package/dist/design_system/elements/index.d.ts

@@ -310,6 +310,30 @@ interface VideoPlayButtonProps {
 }
 declare function VideoPlayButton({ onClick, className }: VideoPlayButtonProps): React.JSX.Element;
 
+interface ModalProps {
+    /** Whether the modal is open */
+    isOpen: boolean;
+    /** Called when the user requests close (button, Escape, or overlay click) */
+    onClose: () => void;
+    /** Optional title for the dialog (used for aria-labelledby) */
+    title?: string;
+    /** Optional id for the title element (must be set if title is set for a11y) */
+    titleId?: string;
+    /** Dialog content */
+    children: React__default.ReactNode;
+    /** Optional className for the overlay (backdrop) */
+    overlayClassName?: string;
+    /** Optional className for the dialog panel */
+    panelClassName?: string;
+    /** Optional max width class for the panel (default: max-w-md). Use max-w-lg, max-w-2xl, etc. */
+    maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
+}
+/**
+ * Shared modal (dialog) component. Accessible: focus trap, Escape to close, aria-modal, overlay click to close.
+ * Use for detail views, confirmations, and other overlay content. Renders in place (use a portal from the consumer if needed).
+ */
+declare function Modal({ isOpen, onClose, title, titleId, children, overlayClassName, panelClassName, maxWidth, }: ModalProps): React__default.JSX.Element | null;
+
 declare const Button: (props: Record<string, unknown>) => React__default.ReactElement<Record<string, unknown>, string | React__default.JSXElementConstructor<any>>;
 declare const RoundButton: (props: Record<string, unknown>) => React__default.ReactElement<Record<string, unknown>, string | React__default.JSXElementConstructor<any>>;
 declare const ButtonGroup: (props: Record<string, unknown>) => React__default.ReactElement<Record<string, unknown>, string | React__default.JSXElementConstructor<any>>;
@@ -345,4 +369,4 @@ declare const PaginationPageMinimalCenter: (props: Record<string, unknown>) => R
 declare const GoogleMap: (props: Record<string, unknown>) => React__default.ReactElement<Record<string, unknown>, string | React__default.JSXElementConstructor<any>>;
 declare const MarkdownRenderer: (props: Record<string, unknown>) => React__default.ReactElement<Record<string, unknown>, string | React__default.JSXElementConstructor<any>>;
 
-export { Avatar, AvatarLabelGroup, Badge, BadgeGroup, BadgeWithDot, Breadcrumb, Button, ButtonGroup, Carousel, CarouselContext, CarouselSectionWrapper, ComboBox, FeaturedIcon, Form, FormContainer, GoogleMap, HintText, Input, InputBase, InputGroup, Label, MarkdownRenderer, NativeSelect, Pagination, PaginationPageDefault, PaginationPageMinimalCenter, PhotoWithFallback, PrivacyCheckbox, RatingBadge, RatingStars, RoundButton, Select, SelectItem, SocialIcon, StarIcon, Textarea, Tooltip, VerifiedTick, VideoModal, VideoPlayButton, Wreath, getSocialIcon, getStarProgress, useCarousel };
+export { Avatar, AvatarLabelGroup, Badge, BadgeGroup, BadgeWithDot, Breadcrumb, Button, ButtonGroup, Carousel, CarouselContext, CarouselSectionWrapper, ComboBox, FeaturedIcon, Form, FormContainer, GoogleMap, HintText, Input, InputBase, InputGroup, Label, MarkdownRenderer, Modal, type ModalProps, NativeSelect, Pagination, PaginationPageDefault, PaginationPageMinimalCenter, PhotoWithFallback, PrivacyCheckbox, RatingBadge, RatingStars, RoundButton, Select, SelectItem, SocialIcon, StarIcon, Textarea, Tooltip, VerifiedTick, VideoModal, VideoPlayButton, Wreath, getSocialIcon, getStarProgress, useCarousel };

package/dist/design_system/elements/index.js

@@ -32,7 +32,7 @@ var __objRest = (source, exclude) => {
 };
 
 // src/design_system/elements/index.tsx
-import React13 from "react";
+import React14 from "react";
 
 // src/lib/component-registry.ts
 var registry = /* @__PURE__ */ new Map();
@@ -3683,15 +3683,114 @@ function VideoPlayButton({ onClick, className = "" }) {
   );
 }
 
+// src/design_system/elements/modal/modal.tsx
+import React13, { useEffect as useEffect6, useRef as useRef4 } from "react";
+var MAX_WIDTH_CLASSES = {
+  sm: "max-w-sm",
+  md: "max-w-md",
+  lg: "max-w-lg",
+  xl: "max-w-xl",
+  "2xl": "max-w-2xl",
+  "3xl": "max-w-3xl",
+  "4xl": "max-w-4xl",
+  "5xl": "max-w-5xl"
+};
+function Modal({
+  isOpen,
+  onClose,
+  title,
+  titleId = "modal-title",
+  children,
+  overlayClassName,
+  panelClassName,
+  maxWidth = "md"
+}) {
+  const overlayRef = useRef4(null);
+  const closeButtonRef = useRef4(null);
+  useEffect6(() => {
+    var _a;
+    if (!isOpen) return;
+    const previouslyFocused = document.activeElement;
+    (_a = closeButtonRef.current) == null ? void 0 : _a.focus();
+    const handleEscape = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handleEscape);
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+      document.body.style.overflow = "";
+      previouslyFocused == null ? void 0 : previouslyFocused.focus();
+    };
+  }, [isOpen, onClose]);
+  if (!isOpen) return null;
+  const maxWidthClass = MAX_WIDTH_CLASSES[maxWidth];
+  return /* @__PURE__ */ React13.createElement(
+    "div",
+    {
+      ref: overlayRef,
+      className: overlayClassName != null ? overlayClassName : "fixed inset-0 z-[200] flex items-center justify-center p-4 bg-black/50",
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": title ? titleId : void 0,
+      onClick: (e) => e.target === overlayRef.current && onClose()
+    },
+    /* @__PURE__ */ React13.createElement(
+      "div",
+      {
+        className: panelClassName != null ? panelClassName : `bg-primary border border-secondary rounded-lg shadow-xl w-full overflow-hidden ${maxWidthClass} max-h-[90vh] flex flex-col`,
+        onClick: (e) => e.stopPropagation()
+      },
+      /* @__PURE__ */ React13.createElement("div", { className: "flex items-start justify-between gap-4 p-4 md:p-6 border-b border-secondary flex-shrink-0" }, title ? /* @__PURE__ */ React13.createElement(
+        "h2",
+        {
+          id: titleId,
+          className: "font-display text-lg font-normal text-fg-primary md:text-xl flex-1 min-w-0"
+        },
+        title
+      ) : /* @__PURE__ */ React13.createElement("span", { className: "flex-1", "aria-hidden": true }), /* @__PURE__ */ React13.createElement(
+        "button",
+        {
+          ref: closeButtonRef,
+          type: "button",
+          onClick: onClose,
+          className: "shrink-0 p-1 text-fg-primary hover:text-brand-accent rounded focus:outline-none focus:ring-2 focus:ring-brand-accent",
+          "aria-label": "Close"
+        },
+        /* @__PURE__ */ React13.createElement(
+          "svg",
+          {
+            className: "w-5 h-5",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            "aria-hidden": true
+          },
+          /* @__PURE__ */ React13.createElement(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: 2,
+              d: "M6 18L18 6M6 6l12 12"
+            }
+          )
+        )
+      )),
+      /* @__PURE__ */ React13.createElement("div", { className: "overflow-y-auto flex-1 p-4 md:p-6" }, children)
+    )
+  );
+}
+
 // src/design_system/elements/index.tsx
 function createThemedExport(componentName, BaseComponent) {
   return function ThemedComponent(props) {
     const { theme } = useTheme();
     try {
       const Component = getThemedComponent(componentName, theme);
-      return React13.createElement(Component, props);
+      return React14.createElement(Component, props);
     } catch (e) {
-      return React13.createElement(BaseComponent, props);
+      return React14.createElement(BaseComponent, props);
     }
   };
 }
@@ -3749,6 +3848,7 @@ export {
   InputGroup2 as InputGroup,
   Label2 as Label,
   MarkdownRenderer2 as MarkdownRenderer,
+  Modal,
   NativeSelect2 as NativeSelect,
   Pagination,
   PaginationPageDefault2 as PaginationPageDefault,