@ceebee/ui 1.5.0 → 1.5.2

package/dist/client.css

@@ -0,0 +1,13 @@
+/* src/overlay/modal.css */
+.cb-modal {
+  z-index: var(--cb-z-modal) !important;
+}
+.cb-modal__backdrop {
+  z-index: var(--cb-z-modal-backdrop) !important;
+}
+.cb-modal__description {
+  margin-block-end: var(--cb-space-4);
+  color: var(--cb-fg-muted);
+  font-size: var(--cb-text-sm);
+  line-height: var(--cb-leading-normal);
+}

package/dist/client.d.ts

@@ -1,5 +1,8 @@
-import { ThemeConfig } from 'antd';
+import { ModalProps as ModalProps$1, ThemeConfig } from 'antd';
 export * from 'antd';
+import * as antd_es_modal_PurePanel_js from 'antd/es/modal/PurePanel.js';
+import * as antd_es_modal_useModal_index_js from 'antd/es/modal/useModal/index.js';
+import * as antd_es_modal_confirm_js from 'antd/es/modal/confirm.js';
 import * as react from 'react';
 import { ReactNode } from 'react';
 import { createCache } from '@ant-design/cssinjs';
@@ -9,6 +12,22 @@ export { default as idIDLocale } from 'antd/locale/id_ID.js';
 export { default as zhCNLocale } from 'antd/locale/zh_CN.js';
 import * as _base_ui_react from '@base-ui/react';
 
+interface ModalProps extends ModalProps$1 {
+    /** Separate explanatory copy announced after the dialog title. */
+    description?: ReactNode;
+}
+declare function ModalRoot({ description, children, classNames, open, afterOpenChange, focusTriggerAfterClose, focusable, panelRef, ...props }: ModalProps): react.JSX.Element;
+/**
+ * Ant Design's interaction contract with CeeBee-owned description, semantic
+ * layer hooks, and focus restoration for conditionally mounted consumers.
+ */
+declare const Modal: typeof ModalRoot & react.FC<ModalProps$1> & antd_es_modal_confirm_js.ModalStaticFunctions & {
+    useModal: typeof antd_es_modal_useModal_index_js.default;
+    destroyAll: () => void;
+    config: typeof antd_es_modal_confirm_js.modalGlobalConfig;
+    _InternalPanelDoNotUseOrYouWillBeFired: (props: antd_es_modal_PurePanel_js.PurePanelProps) => React.JSX.Element;
+};
+
 type CeebeeSkin = 'ceebee' | 'astra' | 'clarity' | 'moodboard';
 type ThemeMode = 'light' | 'dark';
 type ThemeContrast = 'normal' | 'more';
@@ -355,4 +374,4 @@ declare const PanZoomCanvas: typeof PanZoomCanvasRoot & {
     Skeleton: typeof PanZoomCanvasSkeleton;
 };
 
-export { type CeebeeAntStyleCache, CeebeeAntStyleProvider, type CeebeeAntStyleProviderProps, Checklist, type ChecklistProps, type ChecklistTask, type Command, CommandPalette, type CommandPaletteProps, DEFAULT_LABELS, type DurationToken, type Labels, LabelsProvider, type LabelsProviderProps, type MotionHelpers, MotionProvider, type MotionProviderProps, type MotionSettings, type NavItem, type NavSection, type PaletteCommand, PanZoomCanvas, type PanZoomCanvasProps, type PanZoomCanvasSkeletonProps, type RankedCommand, Reveal, type RevealProps, Sidebar, type SidebarProps, type SpringPreset, Stagger, type StaggerProps, StickerGroup, type StickerGroupProps, type StickerGroupSkeletonProps, type StickerItem, ThemeBridge, type ThemeBridgeProps, type ThemeChoice, ThemeProvider, type ThemeProviderProps, type ToastOptions, type ToastPosition, ToastProvider, type ToastProviderProps, TopBar, type TopBarProps, createCeebeeAntStyleCache, extractCeebeeAntStyles, filterCommands, groupCommands, rankCommand, useLabels, useMotionSettings, useTheme, useToast };
+export { type CeebeeAntStyleCache, CeebeeAntStyleProvider, type CeebeeAntStyleProviderProps, Checklist, type ChecklistProps, type ChecklistTask, type Command, CommandPalette, type CommandPaletteProps, DEFAULT_LABELS, type DurationToken, type Labels, LabelsProvider, type LabelsProviderProps, Modal, type ModalProps, type MotionHelpers, MotionProvider, type MotionProviderProps, type MotionSettings, type NavItem, type NavSection, type PaletteCommand, PanZoomCanvas, type PanZoomCanvasProps, type PanZoomCanvasSkeletonProps, type RankedCommand, Reveal, type RevealProps, Sidebar, type SidebarProps, type SpringPreset, Stagger, type StaggerProps, StickerGroup, type StickerGroupProps, type StickerGroupSkeletonProps, type StickerItem, ThemeBridge, type ThemeBridgeProps, type ThemeChoice, ThemeProvider, type ThemeProviderProps, type ToastOptions, type ToastPosition, ToastProvider, type ToastProviderProps, TopBar, type TopBarProps, createCeebeeAntStyleCache, extractCeebeeAntStyles, filterCommands, groupCommands, rankCommand, useLabels, useMotionSettings, useTheme, useToast };

package/dist/client.js

@@ -1,8 +1,8 @@
 "use client";
-import { Button, theme, ConfigProvider, Progress } from 'antd';
+import { Modal as Modal$1, Button, theme, ConfigProvider, Progress } from 'antd';
 export * from 'antd';
-import { createContext, useState, useRef, useContext, useMemo, useCallback, useEffect, Children } from 'react';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { createContext, useId, useRef, useCallback, useInsertionEffect, useLayoutEffect, useState, useContext, useMemo, useEffect, Children } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { StyleProvider, createCache, extractStyle } from '@ant-design/cssinjs';
 export { default as enUSLocale } from 'antd/locale/en_US.js';
 export { default as enUSDatePickerLocale } from 'antd/lib/date-picker/locale/en_US.js';
@@ -14,6 +14,109 @@ import { Toast } from '@base-ui/react/toast';
 import { Popover } from '@base-ui/react/popover';
 import { AnimatePresence, motion } from 'motion/react';
 
+// src/lib/cn.ts
+function cn(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function ModalRoot({
+  description,
+  children,
+  classNames,
+  open,
+  afterOpenChange,
+  focusTriggerAfterClose,
+  focusable,
+  panelRef,
+  ...props
+}) {
+  const descriptionId = useId();
+  const returnFocus = useRef(null);
+  const restoreTask = useRef(void 0);
+  const panel = useRef(null);
+  const wasOpen = useRef(false);
+  const openRef = useRef(!!open);
+  openRef.current = !!open;
+  const shouldRestoreFocus = focusable?.focusTriggerAfterClose ?? focusTriggerAfterClose ?? true;
+  const restoreFocus = useCallback(() => {
+    const target = returnFocus.current;
+    if (!shouldRestoreFocus || !target?.isConnected) {
+      returnFocus.current = null;
+      return;
+    }
+    if (restoreTask.current) return;
+    restoreTask.current = setTimeout(() => {
+      restoreTask.current = void 0;
+      if (openRef.current && panel.current?.isConnected) return;
+      if (target.isConnected) target.focus({ preventScroll: true });
+      if (returnFocus.current === target) returnFocus.current = null;
+    });
+  }, [shouldRestoreFocus]);
+  useInsertionEffect(() => {
+    if (open && restoreTask.current) {
+      clearTimeout(restoreTask.current);
+      restoreTask.current = void 0;
+    }
+    if (open && !wasOpen.current && document.activeElement instanceof HTMLElement) {
+      returnFocus.current = document.activeElement;
+    }
+  }, [open]);
+  useLayoutEffect(() => {
+    if (!open && wasOpen.current) {
+      restoreFocus();
+    }
+    wasOpen.current = !!open;
+  }, [open, restoreFocus]);
+  useLayoutEffect(() => () => {
+    if (wasOpen.current) restoreFocus();
+  }, [restoreFocus]);
+  const modalClassNames = typeof classNames === "function" ? (info) => {
+    const resolved = classNames(info) ?? {};
+    return {
+      ...resolved,
+      wrapper: cn("cb-modal", resolved.wrapper),
+      mask: cn("cb-modal__backdrop", resolved.mask)
+    };
+  } : {
+    ...classNames,
+    wrapper: cn("cb-modal", classNames?.wrapper),
+    mask: cn("cb-modal__backdrop", classNames?.mask)
+  };
+  const describedBy = [
+    props["aria-describedby"],
+    description ? descriptionId : null
+  ].filter(Boolean).join(" ") || void 0;
+  const setPanelRef = useCallback((node) => {
+    panel.current = node;
+    if (node && describedBy) node.setAttribute("aria-describedby", describedBy);
+    else node?.removeAttribute("aria-describedby");
+    if (typeof panelRef === "function") panelRef(node);
+    else if (panelRef) panelRef.current = node;
+  }, [describedBy, panelRef]);
+  useLayoutEffect(() => {
+    if (panel.current && describedBy) panel.current.setAttribute("aria-describedby", describedBy);
+    else panel.current?.removeAttribute("aria-describedby");
+  }, [describedBy]);
+  return /* @__PURE__ */ jsxs(
+    Modal$1,
+    {
+      ...props,
+      open,
+      classNames: modalClassNames,
+      focusable: { ...focusable, focusTriggerAfterClose: false },
+      panelRef: setPanelRef,
+      afterOpenChange: (nextOpen) => {
+        afterOpenChange?.(nextOpen);
+        if (!nextOpen) restoreFocus();
+      },
+      children: [
+        description ? /* @__PURE__ */ jsx("div", { id: descriptionId, className: "cb-modal__description", children: description }) : null,
+        children
+      ]
+    }
+  );
+}
+var Modal = Object.assign(ModalRoot, Modal$1);
+
 // src/theme/ant-theme-seeds.generated.ts
 var generatedCeebeeAntSeeds = {
   "ceebee": {
@@ -958,11 +1061,6 @@ function useTheme() {
   return value;
 }
 
-// src/lib/cn.ts
-function cn(...parts) {
-  return parts.filter(Boolean).join(" ");
-}
-
 // src/overlay/command.util.ts
 function rankCommand(command, query) {
   const needle = query.trim().toLowerCase();
@@ -1526,4 +1624,4 @@ function PanZoomCanvasRoot({
 }
 var PanZoomCanvas = Object.assign(PanZoomCanvasRoot, { Skeleton: PanZoomCanvasSkeleton });
 
-export { CeebeeAntStyleProvider, Checklist, CommandPalette, DEFAULT_LABELS, LabelsProvider, MotionProvider, PanZoomCanvas, Reveal, Sidebar, Stagger, StickerGroup, ThemeBridge, ThemeProvider, ToastProvider, TopBar, createCeebeeAntStyleCache, extractCeebeeAntStyles, filterCommands, groupCommands, rankCommand, useLabels, useMotionSettings, useTheme, useToast };
+export { CeebeeAntStyleProvider, Checklist, CommandPalette, DEFAULT_LABELS, LabelsProvider, Modal, MotionProvider, PanZoomCanvas, Reveal, Sidebar, Stagger, StickerGroup, ThemeBridge, ThemeProvider, ToastProvider, TopBar, createCeebeeAntStyleCache, extractCeebeeAntStyles, filterCommands, groupCommands, rankCommand, useLabels, useMotionSettings, useTheme, useToast };

package/dist/styles.css

@@ -813,6 +813,22 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
 .cb-palette__shortcut { margin: 0; padding: 0; border: none; background: none; font-family: var(--cb-font-mono); font-size: var(--cb-text-xs); color: var(--cb-fg-subtle); }
 .cb-palette__empty { margin: 0; padding: var(--cb-space-5); text-align: center; font-size: var(--cb-text-sm); color: var(--cb-fg-subtle); }
 
+/* overlay/modal.css */
+.cb-modal {
+  z-index: var(--cb-z-modal) !important;
+}
+
+.cb-modal__backdrop {
+  z-index: var(--cb-z-modal-backdrop) !important;
+}
+
+.cb-modal__description {
+  margin-block-end: var(--cb-space-4);
+  color: var(--cb-fg-muted);
+  font-size: var(--cb-text-sm);
+  line-height: var(--cb-leading-normal);
+}
+
 /* data/donut.css */
 .cb-donut { position: relative; display: inline-grid; place-items: center; }
 .cb-donut svg { position: absolute; inset: 0; }
@@ -2099,6 +2115,15 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
   display: flex;
 }
 
+/* The native radio remains in the server markup. Without Ant's runtime rule it paints as a normal
+   form control beside every option, even though the visible label already owns the interaction. */
+:where(.ant-segmented-item-input) {
+  position: absolute;
+  inset: var(--cb-space-0);
+  opacity: 0;
+  pointer-events: none;
+}
+
 :where(.ant-segmented-item) {
   color: var(--cb-fg-muted);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ceebee/ui",
-  "version": "1.5.0",
+  "version": "1.5.2",
   "description": "Ceebee's design system: tokens, themed primitives, motion, and onboarding.",
   "license": "MIT",
   "repository": {