@choice-ui/react 1.4.2 → 1.4.5

package/dist/components/alert-dialog/dist/index.d.ts

@@ -76,52 +76,43 @@ type AlertDialogAction = {
 };
 interface UseAlertDialogReturn {
     /**
-     * 显示提示对话框
-     * @param config 字符串或配置对象
-     * @returns Promise<void> 用户确认后resolve
+     * Show alert dialog
+     * @param config String or config object
+     * @returns Promise<void> Resolves when user confirms
      */
     alert: (config: string | AlertDialogAlertConfig) => Promise<void>;
     /**
-     * 关闭所有对话框
+     * Close all dialogs
      */
     closeAll: () => void;
     /**
-     * 显示确认对话框
-     * @param config 字符串或配置对象
-     * @returns Promise<boolean> 返回用户选择结果
+     * Show confirm dialog
+     * @param config String or config object
+     * @returns Promise<boolean> Returns user selection result
      */
     confirm: (config: string | AlertDialogConfirmConfig) => Promise<boolean>;
     /**
-     * 显示自定义对话框
-     * @param config 自定义配置对象
-     * @returns Promise<string> 返回用户选择的按钮value
+     * Show custom dialog
+     * @param config Custom config object
+     * @returns Promise<string> Returns selected button value
      */
     show: (config: AlertDialogCustomConfig) => Promise<string>;
     /**
-     * 当前对话框状态
+     * Current dialog state
      */
     state: AlertDialogState;
 }
-interface AlertDialogContextType extends UseAlertDialogReturn {
-    _handleAction: (action: AlertDialogAction) => void;
+
+interface AlertDialogProviderProps {
+    children: ReactNode;
+    className?: string;
+    outsidePress?: boolean;
+    overlay?: boolean;
+    portalId?: string;
 }
-type ConfirmFunction = (config: string | AlertDialogConfirmConfig) => Promise<boolean>;
-type AlertFunction = (config: string | AlertDialogAlertConfig) => Promise<void>;
-type ShowFunction = (config: AlertDialogCustomConfig) => Promise<string>;
+declare const AlertDialogProvider: react.NamedExoticComponent<AlertDialogProviderProps>;
 
-declare const DEFAULT_CONFIRM_TEXT = "Confirm";
-declare const DEFAULT_CANCEL_TEXT = "Cancel";
-declare const DEFAULT_ALERT_TEXT = "OK";
-declare const DEFAULT_CONFIRM_VARIANT: AlertDialogButtonVariant;
-declare const DEFAULT_CANCEL_VARIANT: AlertDialogButtonVariant;
-declare const initialState: AlertDialogState;
 declare const alertDialogReducer: (state: AlertDialogState, action: AlertDialogAction) => AlertDialogState;
-declare const normalizeConfirmConfig: (config: string | AlertDialogConfirmConfig) => AlertDialogConfirmConfig;
-declare const normalizeAlertConfig: (config: string | AlertDialogAlertConfig) => AlertDialogAlertConfig;
-declare const getButtonsForDialog: (type: AlertDialogType, config: AlertDialogConfirmConfig | AlertDialogAlertConfig) => AlertDialogButton[];
-declare const processButtonResult: (type: AlertDialogType, buttonValue: string) => AlertDialogResult;
-declare const getDialogTitle: (type: AlertDialogType, config: AlertDialogConfirmConfig | AlertDialogAlertConfig) => string;
-declare const shouldShowCloseButton: (type: AlertDialogType, config: AlertDialogConfirmConfig | AlertDialogAlertConfig) => boolean;
 
 declare const useAlertDialog: () => UseAlertDialogReturn;
 declare const useAlertDialogProvider: () => {
@@ -133,16 +124,4 @@ declare const useAlertDialogProvider: () => {
     _handleAction: (action: Parameters<typeof alertDialogReducer>[1]) => void;
 };
 
-declare const AlertDialogContext: react.Context<AlertDialogContextType | null>;
-declare const useAlertDialogContext: () => AlertDialogContextType;
-
-interface AlertDialogProviderProps {
-    children: ReactNode;
-    className?: string;
-    outsidePress?: boolean;
-    overlay?: boolean;
-    portalId?: string;
-}
-declare const AlertDialogProvider: react.NamedExoticComponent<AlertDialogProviderProps>;
-
-export { AlertDialog, type AlertDialogAction, type AlertDialogAlertConfig, type AlertDialogBaseConfig, type AlertDialogButton, type AlertDialogButtonVariant, type AlertDialogConfig, type AlertDialogConfirmConfig, AlertDialogContext, type AlertDialogContextType, type AlertDialogCustomConfig, type AlertDialogProps, AlertDialogProvider, type AlertDialogProviderProps, type AlertDialogResult, type AlertDialogState, type AlertDialogType, type AlertDialogVariant, type AlertFunction, type ConfirmFunction, DEFAULT_ALERT_TEXT, DEFAULT_CANCEL_TEXT, DEFAULT_CANCEL_VARIANT, DEFAULT_CONFIRM_TEXT, DEFAULT_CONFIRM_VARIANT, type ShowFunction, type UseAlertDialogReturn, alertDialogReducer, getButtonsForDialog, getDialogTitle, initialState, normalizeAlertConfig, normalizeConfirmConfig, processButtonResult, shouldShowCloseButton, useAlertDialog, useAlertDialogContext, useAlertDialogProvider };
+export { AlertDialog, type AlertDialogProps, AlertDialogProvider, useAlertDialog, useAlertDialogProvider };

package/dist/components/alert-dialog/dist/index.js

@@ -0,0 +1,497 @@
+import { Button } from "../../button/dist/index.js";
+import { Modal } from "../../modal/dist/index.js";
+import { useFloating, FloatingFocusManager, FloatingPortal, FloatingOverlay } from "@floating-ui/react";
+import { memo, createContext, useReducer, useCallback, useEffect, useMemo, useContext } from "react";
+import { useEventCallback } from "usehooks-ts";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { tcv, tcx } from "../../../shared/utils/tcx/tcx.js";
+var AlertDialogContext = createContext(null);
+var useAlertDialogContext = () => {
+  const context = useContext(AlertDialogContext);
+  if (!context) {
+    throw new Error("useAlertDialogContext must be used within an AlertDialogProvider");
+  }
+  return context;
+};
+var alertDialogTv = tcv({
+  slots: {
+    overlay: ["fixed inset-0 grid place-items-center z-alert"],
+    container: "max-w-none",
+    content: "flex flex-col gap-4 px-4 py-2",
+    header: "border-b-transparent",
+    footer: "flex items-center justify-end gap-2 border-t-transparent"
+  },
+  variants: {
+    variant: {
+      default: {},
+      danger: {
+        container: "border-danger-boundary"
+      },
+      success: {
+        container: "border-success-boundary"
+      },
+      warning: {
+        container: "border-warning-boundary"
+      }
+    },
+    size: {
+      small: {
+        container: "w-60"
+      },
+      default: {
+        container: "w-80"
+      },
+      large: {
+        container: "w-120"
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+var DEFAULT_CONFIRM_TEXT = "Confirm";
+var DEFAULT_CANCEL_TEXT = "Cancel";
+var DEFAULT_ALERT_TEXT = "OK";
+var DEFAULT_CONFIRM_VARIANT = "primary";
+var DEFAULT_CANCEL_VARIANT = "secondary";
+var initialState = {
+  isOpen: false,
+  type: null,
+  config: null,
+  resolve: null,
+  queue: []
+};
+var alertDialogReducer = (state, action) => {
+  switch (action.type) {
+    case "SHOW": {
+      const { dialogType, config, resolve } = action.payload;
+      if (state.isOpen) {
+        return {
+          ...state,
+          queue: [...state.queue, { type: dialogType, config, resolve }]
+        };
+      }
+      return {
+        ...state,
+        isOpen: true,
+        type: dialogType,
+        config,
+        resolve
+      };
+    }
+    case "HIDE": {
+      const { value } = action.payload;
+      if (state.resolve) {
+        state.resolve(value);
+      }
+      if (state.queue.length > 0) {
+        const next = state.queue[0];
+        return {
+          ...state,
+          type: next.type,
+          config: next.config,
+          resolve: next.resolve,
+          queue: state.queue.slice(1)
+        };
+      }
+      return {
+        ...state,
+        isOpen: false,
+        type: null,
+        config: null,
+        resolve: null
+      };
+    }
+    case "NEXT": {
+      if (state.queue.length > 0) {
+        const next = state.queue[0];
+        return {
+          ...state,
+          type: next.type,
+          config: next.config,
+          resolve: next.resolve,
+          queue: state.queue.slice(1)
+        };
+      }
+      return {
+        ...state,
+        isOpen: false,
+        type: null,
+        config: null,
+        resolve: null
+      };
+    }
+    case "CLEAR_QUEUE": {
+      return {
+        ...state,
+        isOpen: false,
+        type: null,
+        config: null,
+        resolve: null,
+        queue: []
+      };
+    }
+    default:
+      return state;
+  }
+};
+var normalizeConfirmConfig = (config) => {
+  if (typeof config === "string") {
+    return {
+      description: config,
+      confirmText: DEFAULT_CONFIRM_TEXT,
+      cancelText: DEFAULT_CANCEL_TEXT,
+      confirmVariant: DEFAULT_CONFIRM_VARIANT,
+      cancelVariant: DEFAULT_CANCEL_VARIANT
+    };
+  }
+  return {
+    confirmText: DEFAULT_CONFIRM_TEXT,
+    cancelText: DEFAULT_CANCEL_TEXT,
+    confirmVariant: DEFAULT_CONFIRM_VARIANT,
+    cancelVariant: DEFAULT_CANCEL_VARIANT,
+    ...config
+  };
+};
+var normalizeAlertConfig = (config) => {
+  if (typeof config === "string") {
+    return {
+      description: config,
+      confirmText: DEFAULT_ALERT_TEXT,
+      confirmVariant: DEFAULT_CONFIRM_VARIANT
+    };
+  }
+  return {
+    confirmText: DEFAULT_ALERT_TEXT,
+    confirmVariant: DEFAULT_CONFIRM_VARIANT,
+    ...config
+  };
+};
+var getButtonsForDialog = (type, config) => {
+  if (type === "confirm") {
+    const confirmConfig = config;
+    return [
+      {
+        text: confirmConfig.cancelText || DEFAULT_CANCEL_TEXT,
+        value: "cancel",
+        variant: confirmConfig.cancelVariant || DEFAULT_CANCEL_VARIANT
+      },
+      {
+        text: confirmConfig.confirmText || DEFAULT_CONFIRM_TEXT,
+        value: "confirm",
+        variant: confirmConfig.confirmVariant || DEFAULT_CONFIRM_VARIANT,
+        autoFocus: true
+      }
+    ];
+  }
+  if (type === "alert") {
+    const alertConfig = config;
+    return [
+      {
+        text: alertConfig.confirmText || DEFAULT_ALERT_TEXT,
+        value: "confirm",
+        variant: alertConfig.confirmVariant || DEFAULT_CONFIRM_VARIANT,
+        autoFocus: true
+      }
+    ];
+  }
+  return [];
+};
+var processButtonResult = (type, buttonValue) => {
+  if (type === "confirm") {
+    return buttonValue === "confirm";
+  }
+  if (type === "alert") {
+    return void 0;
+  }
+  return buttonValue;
+};
+var getDialogTitle = (type, config) => {
+  if (config.title) {
+    return config.title;
+  }
+  switch (type) {
+    case "confirm":
+      return "Confirm";
+    case "alert":
+      return "Alert";
+    default:
+      return "";
+  }
+};
+var shouldShowCloseButton = (type, config) => {
+  if (config.showCloseButton !== void 0) {
+    return config.showCloseButton;
+  }
+  return type === "confirm";
+};
+var PORTAL_ROOT_ID = "floating-alert-root";
+var AlertDialog = memo(function AlertDialog2(props) {
+  const { className, outsidePress, overlay = false, portalId = PORTAL_ROOT_ID, root } = props;
+  const { state, _handleAction } = useAlertDialogContext();
+  const { isOpen, type, config } = state;
+  const { refs, context } = useFloating({
+    open: isOpen,
+    onOpenChange: (open) => {
+      if (!open) {
+        _handleAction({ type: "HIDE", payload: { value: false } });
+      }
+    }
+  });
+  useEffect(() => {
+    if (!isOpen || !config) {
+      return;
+    }
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        const shouldClose = config.closeOnEscape !== false;
+        if (shouldClose) {
+          event.stopImmediatePropagation();
+          event.preventDefault();
+          _handleAction({ type: "HIDE", payload: { value: false } });
+        }
+      }
+      if (event.key === "Enter") {
+        if (type === "alert") {
+          event.preventDefault();
+          _handleAction({ type: "HIDE", payload: { value: void 0 } });
+        } else if (type === "confirm") {
+          event.preventDefault();
+          _handleAction({ type: "HIDE", payload: { value: true } });
+        }
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown, { capture: true });
+    return () => window.removeEventListener("keydown", handleKeyDown, { capture: true });
+  }, [isOpen, config, type, _handleAction]);
+  const handleOverlayClick = useEventCallback((event) => {
+    if (!config) return;
+    let shouldClose = false;
+    if (outsidePress !== void 0) {
+      shouldClose = outsidePress;
+    } else {
+      shouldClose = config.closeOnOverlayClick !== false;
+    }
+    if (shouldClose) {
+      if (event.target === event.currentTarget) {
+        _handleAction({ type: "HIDE", payload: { value: false } });
+      }
+    }
+  });
+  const handleButtonClick = useEventCallback((buttonValue) => {
+    if (!type) return;
+    const result = processButtonResult(type, buttonValue);
+    _handleAction({ type: "HIDE", payload: { value: result } });
+  });
+  const handleCloseClick = useEventCallback(() => {
+    _handleAction({ type: "HIDE", payload: { value: false } });
+  });
+  const buttons = useMemo(() => {
+    if (!type || !config) return [];
+    if (type === "custom") {
+      return config.buttons;
+    }
+    return getButtonsForDialog(type, config);
+  }, [type, config]);
+  const title = useMemo(() => {
+    if (!type || !config) return "";
+    return getDialogTitle(type, config);
+  }, [type, config]);
+  const showCloseButton = useMemo(() => {
+    if (!type || !config) return false;
+    return shouldShowCloseButton(type, config);
+  }, [type, config]);
+  const tv = useMemo(() => {
+    const variant = (config == null ? void 0 : config.variant) || "default";
+    const size = (config == null ? void 0 : config.size) || "default";
+    return alertDialogTv({ variant, size });
+  }, [config == null ? void 0 : config.variant, config == null ? void 0 : config.size]);
+  const shouldRenderContent = isOpen && config;
+  const handleBackdropClose = useEventCallback(() => {
+    if (!config) return;
+    let shouldClose = false;
+    if (outsidePress !== void 0) {
+      shouldClose = outsidePress;
+    } else {
+      shouldClose = config.closeOnOverlayClick !== false;
+    }
+    if (shouldClose) {
+      _handleAction({ type: "HIDE", payload: { value: false } });
+    }
+  });
+  const dialogContent = shouldRenderContent && /* @__PURE__ */ jsx(
+    FloatingFocusManager,
+    {
+      context,
+      modal: true,
+      children: /* @__PURE__ */ jsxs(
+        Modal,
+        {
+          ref: refs.setFloating,
+          className: tcx(tv.container(), className),
+          role: "alertdialog",
+          "aria-modal": "true",
+          "aria-labelledby": title ? "alert-dialog-title" : void 0,
+          "aria-describedby": "alert-dialog-description",
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            (title || showCloseButton) && /* @__PURE__ */ jsx(
+              Modal.Header,
+              {
+                className: tv.header(),
+                title,
+                onClose: showCloseButton ? handleCloseClick : void 0,
+                id: "alert-dialog-title"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Modal.Content,
+              {
+                id: "alert-dialog-description",
+                className: tv.content(),
+                children: config.content || config.description
+              }
+            ),
+            buttons.length > 0 && /* @__PURE__ */ jsx(Modal.Footer, { className: tv.footer(), children: buttons.map((button) => /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: button.variant || "primary",
+                disabled: button.disabled,
+                onClick: () => handleButtonClick(button.value),
+                autoFocus: button.autoFocus,
+                children: button.text
+              },
+              button.value
+            )) })
+          ]
+        }
+      )
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    FloatingPortal,
+    {
+      id: portalId,
+      root,
+      children: overlay ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          Modal.Backdrop,
+          {
+            isOpen,
+            onClose: handleBackdropClose,
+            duration: 200
+          }
+        ),
+        dialogContent && /* @__PURE__ */ jsx(
+          FloatingOverlay,
+          {
+            className: tcx(tv.overlay()),
+            lockScroll: true,
+            onClick: handleOverlayClick,
+            children: dialogContent
+          }
+        )
+      ] }) : dialogContent && /* @__PURE__ */ jsx(
+        FloatingOverlay,
+        {
+          className: tcx(tv.overlay()),
+          onClick: handleOverlayClick,
+          children: dialogContent
+        }
+      )
+    }
+  );
+});
+AlertDialog.displayName = "AlertDialog";
+var useAlertDialogProvider = () => {
+  const [state, dispatch] = useReducer(alertDialogReducer, initialState);
+  const handleAction = useCallback((action) => {
+    dispatch(action);
+  }, []);
+  const confirm = useCallback(
+    (config) => {
+      return new Promise((resolve) => {
+        const normalizedConfig = normalizeConfirmConfig(config);
+        handleAction({
+          type: "SHOW",
+          payload: {
+            dialogType: "confirm",
+            config: normalizedConfig,
+            resolve
+          }
+        });
+      });
+    },
+    [handleAction]
+  );
+  const alert = useCallback(
+    (config) => {
+      return new Promise((resolve) => {
+        const normalizedConfig = normalizeAlertConfig(config);
+        handleAction({
+          type: "SHOW",
+          payload: {
+            dialogType: "alert",
+            config: normalizedConfig,
+            resolve
+          }
+        });
+      });
+    },
+    [handleAction]
+  );
+  const show = useCallback(
+    (config) => {
+      return new Promise((resolve) => {
+        handleAction({
+          type: "SHOW",
+          payload: {
+            dialogType: "custom",
+            config,
+            resolve
+          }
+        });
+      });
+    },
+    [handleAction]
+  );
+  const closeAll = useCallback(() => {
+    handleAction({ type: "CLEAR_QUEUE" });
+  }, [handleAction]);
+  return {
+    state,
+    confirm,
+    alert,
+    show,
+    closeAll,
+    _handleAction: handleAction
+  };
+};
+var AlertDialogProvider = memo(function AlertDialogProvider2({
+  children,
+  className,
+  overlay = false,
+  outsidePress,
+  portalId
+}) {
+  const alertDialogContext = useAlertDialogProvider();
+  return /* @__PURE__ */ jsxs(AlertDialogContext.Provider, { value: alertDialogContext, children: [
+    children,
+    /* @__PURE__ */ jsx(
+      AlertDialog,
+      {
+        className,
+        overlay,
+        outsidePress,
+        portalId
+      }
+    )
+  ] });
+});
+AlertDialogProvider.displayName = "AlertDialogProvider";
+export {
+  AlertDialog,
+  AlertDialogProvider,
+  useAlertDialogProvider
+};

package/dist/components/alert-dialog/src/alert-dialog.js

@@ -175,7 +175,7 @@ const AlertDialog = memo(function AlertDialog2(props) {
           }
         )
       ] }) : dialogContent && /* @__PURE__ */ jsx(
-        "div",
+        FloatingOverlay,
         {
           className: tcx(tv.overlay()),
           onClick: handleOverlayClick,

package/dist/components/alert-dialog/src/hooks/use-alert-dialog.d.ts

@@ -2,7 +2,7 @@ import { AlertDialogAlertConfig, AlertDialogConfirmConfig, AlertDialogCustomConf
 import { alertDialogReducer } from '../utils';
 export declare const useAlertDialog: () => UseAlertDialogReturn;
 export declare const useAlertDialogProvider: () => {
-    state: import('../../..').AlertDialogState;
+    state: import('../types').AlertDialogState;
     confirm: (config: string | AlertDialogConfirmConfig) => Promise<boolean>;
     alert: (config: string | AlertDialogAlertConfig) => Promise<void>;
     show: (config: AlertDialogCustomConfig) => Promise<string>;

package/dist/components/alert-dialog/src/index.d.ts

@@ -1,5 +1,4 @@
-export * from './alert-dialog';
-export * from './hooks';
-export * from './context';
-export * from './types';
-export * from './utils';
+export { AlertDialog } from './alert-dialog';
+export type { AlertDialogProps } from './alert-dialog';
+export { AlertDialogProvider } from './context';
+export { useAlertDialog, useAlertDialogProvider } from './hooks';

package/dist/components/alert-dialog/src/types.d.ts

@@ -65,29 +65,29 @@ export type AlertDialogAction = {
 };
 export interface UseAlertDialogReturn {
     /**
-     * 显示提示对话框
-     * @param config 字符串或配置对象
-     * @returns Promise<void> 用户确认后resolve
+     * Show alert dialog
+     * @param config String or config object
+     * @returns Promise<void> Resolves when user confirms
      */
     alert: (config: string | AlertDialogAlertConfig) => Promise<void>;
     /**
-     * 关闭所有对话框
+     * Close all dialogs
      */
     closeAll: () => void;
     /**
-     * 显示确认对话框
-     * @param config 字符串或配置对象
-     * @returns Promise<boolean> 返回用户选择结果
+     * Show confirm dialog
+     * @param config String or config object
+     * @returns Promise<boolean> Returns user selection result
      */
     confirm: (config: string | AlertDialogConfirmConfig) => Promise<boolean>;
     /**
-     * 显示自定义对话框
-     * @param config 自定义配置对象
-     * @returns Promise<string> 返回用户选择的按钮value
+     * Show custom dialog
+     * @param config Custom config object
+     * @returns Promise<string> Returns selected button value
      */
     show: (config: AlertDialogCustomConfig) => Promise<string>;
     /**
-     * 当前对话框状态
+     * Current dialog state
      */
     state: AlertDialogState;
 }

package/dist/components/avatar/dist/index.js

@@ -115,7 +115,7 @@ var Avatar = memo(
     const [imageLoadedError, setImageLoadedError] = useState(false);
     const isNumericSize = typeof size === "number";
     const tvSize = isNumericSize ? "medium" : size ?? "medium";
-    const styles = avatarTv({
+    const tv = avatarTv({
       size: tvSize,
       states,
       isLoading
@@ -127,7 +127,7 @@ var Avatar = memo(
           "data-slot": "image",
           src: photo,
           alt: name,
-          className: styles.image(),
+          className: tv.image(),
           onLoad: () => {
             setIsLoading(false);
             setImageLoadedError(false);
@@ -144,7 +144,7 @@ var Avatar = memo(
           size
         }
       ) : /* @__PURE__ */ jsx(Use, { className: "text-black/40" });
-    }, [photo, imageLoadedError, name, size, styles]);
+    }, [photo, imageLoadedError, name, size, tv]);
     const textColor = useMemo(() => {
       return tinycolor(color).isDark() ? "white" : "black";
     }, [color]);
@@ -158,7 +158,7 @@ var Avatar = memo(
       {
         ref,
         tabIndex: -1,
-        className: tcx(styles.root(), className),
+        className: tcx(tv.root(), className),
         style: { backgroundColor: color, color: textColor, ...sizeStyle },
         ...rest,
         children: children ?? fallback