@choice-ui/react 1.4.7 → 1.4.9

package/dist/components/tooltip/dist/index.js

@@ -1,7 +1,7 @@
 import { Kbd } from "../../kbd/dist/index.js";
 import { useMergeRefs, useDelayGroup, useTransitionStyles, FloatingPortal, offset, flip, shift, arrow, useFloating, autoUpdate, useHover, useFocus, useDismiss, useRole, useInteractions } from "@floating-ui/react";
 import { FloatingDelayGroup } from "@floating-ui/react";
-import { forwardRef, createContext, useMemo, useState, useRef, useContext } from "react";
+import React, { forwardRef, createContext, useMemo, useState, useRef, useContext } from "react";
 import { jsxs, jsx } from "react/jsx-runtime";
 import { Slot } from "../../slot/dist/index.js";
 import { tcv, tcx } from "../../../shared/utils/tcx/tcx.js";
@@ -183,7 +183,7 @@ var TooltipContent = forwardRef(
 var TooltipTrigger = forwardRef(
   function TooltipTrigger2({ children, ...props }, propRef) {
     const state = useTooltipState();
-    const childrenRef = children == null ? void 0 : children.ref;
+    const childrenRef = React.isValidElement(children) ? children.props.ref : void 0;
     const ref = useMergeRefs([state.refs.setReference, propRef, childrenRef]);
     return /* @__PURE__ */ jsx(
       Slot,

package/dist/components/tooltip/src/components/tooltip-trigger.d.ts

@@ -1,2 +1,2 @@
-import { HTMLProps } from 'react';
-export declare const TooltipTrigger: import('react').ForwardRefExoticComponent<Omit<HTMLProps<HTMLElement>, "ref"> & import('react').RefAttributes<HTMLElement>>;
+import { default as React } from 'react';
+export declare const TooltipTrigger: React.ForwardRefExoticComponent<Omit<React.HTMLProps<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;

package/dist/components/tooltip/src/components/tooltip-trigger.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import { Slot } from "../../../slot/dist/index.js";
 import { useMergeRefs } from "@floating-ui/react";
-import { forwardRef } from "react";
+import React, { forwardRef } from "react";
 import { useTooltipState } from "../context/tooltip-context.js";
 const TooltipTrigger = forwardRef(
   function TooltipTrigger2({ children, ...props }, propRef) {
     const state = useTooltipState();
-    const childrenRef = children == null ? void 0 : children.ref;
+    const childrenRef = React.isValidElement(children) ? children.props.ref : void 0;
     const ref = useMergeRefs([state.refs.setReference, propRef, childrenRef]);
     return /* @__PURE__ */ jsx(
       Slot,

package/dist/context/choice-ui-provider.d.ts

@@ -1,11 +1,11 @@
 import { ReactNode } from 'react';
-import { AlertDialogProps } from '../components/alert-dialog';
+import { AlertDialogProviderProps } from '../components/alert-dialog/src/context';
 export interface ChoiceUiProviderProps {
     children: ReactNode;
     /**
      * AlertDialog configuration
      */
-    alertDialog?: Omit<AlertDialogProps, "children">;
+    alertDialog?: Omit<AlertDialogProviderProps, "children">;
     /**
      * Tooltip delay configuration
      * @default { open: 400, close: 200 }

package/dist/context/choice-ui-provider.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { FloatingDelayGroup } from "@floating-ui/react";
-import { AlertDialogProvider } from "../components/alert-dialog/dist/index.js";
+import { AlertDialogProvider } from "../components/alert-dialog/src/context/alert-dialog-provider.js";
 const DEFAULT_TOOLTIP_DELAY = {
   open: 400,
   close: 200

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@choice-ui/react",
-  "version": "1.4.7",
+  "version": "1.4.9",
   "description": "A desktop-first React UI component library built for professional desktop applications with comprehensive documentation",
   "sideEffects": false,
   "type": "module",

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

@@ -1,497 +0,0 @@
-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
-};