@choice-ui/react 2.0.0 → 2.0.2

package/dist/components/toast/dist/index.d.ts

@@ -0,0 +1,274 @@
+import { ReactNode } from 'react';
+import * as react from 'react';
+
+type ToastType = "info" | "success" | "warning" | "error" | "loading" | "default";
+type ToastVariant = "default" | "accent" | "success" | "warning" | "error" | "assistive" | "reset";
+type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+
+interface ToastAction {
+    label: ReactNode;
+    onClick: () => void;
+}
+interface ToastCancel {
+    label: ReactNode;
+    onClick?: () => void;
+}
+/**
+ * Props for Toaster.Item slot component
+ */
+interface ToasterItemSlotProps {
+    className?: string;
+    style?: React.CSSProperties;
+    children?: ReactNode;
+}
+/**
+ * Slot component for customizing toast item container
+ */
+declare const ToasterItemSlot: react.ForwardRefExoticComponent<ToasterItemSlotProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * Props for Toaster.Icon slot component
+ */
+interface ToasterIconSlotProps {
+    className?: string;
+    style?: React.CSSProperties;
+    /** Custom render function - receives type and default icon */
+    children?: (type: ToastType, defaultIcon: ReactNode) => ReactNode;
+}
+/**
+ * Slot component for customizing toast icon
+ */
+declare const ToasterIconSlot: react.ForwardRefExoticComponent<ToasterIconSlotProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * Props for Toaster.Title slot component
+ */
+interface ToasterTitleSlotProps {
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * Slot component for customizing toast title
+ */
+declare const ToasterTitleSlot: react.ForwardRefExoticComponent<ToasterTitleSlotProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * Props for Toaster.Description slot component
+ */
+interface ToasterDescriptionSlotProps {
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * Slot component for customizing toast description
+ */
+declare const ToasterDescriptionSlot: react.ForwardRefExoticComponent<ToasterDescriptionSlotProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * Props for Toaster.Actions slot component
+ */
+interface ToasterActionsSlotProps {
+    className?: string;
+    style?: React.CSSProperties;
+    /** Custom render function for actions */
+    children?: (action: ToastAction | undefined, cancel: ToastCancel | undefined, close: () => void) => ReactNode;
+}
+/**
+ * Slot component for customizing toast actions
+ */
+declare const ToasterActionsSlot: react.ForwardRefExoticComponent<ToasterActionsSlotProps & react.RefAttributes<HTMLDivElement>>;
+
+interface ToastData {
+    id: string;
+    type: ToastType;
+    variant?: ToastVariant;
+    /**
+     * Title content. Supports:
+     * - Plain string: rendered as text
+     * - HTML string (containing tags like `<b>`, `<strong>`, etc.): rendered as HTML
+     * - ReactNode: rendered as React component
+     */
+    title?: React.ReactNode;
+    /**
+     * Description content. Supports:
+     * - Plain string: rendered as text
+     * - HTML string (containing tags like `<b>`, `<strong>`, etc.): rendered as HTML
+     * - ReactNode: rendered as React component
+     */
+    description?: React.ReactNode;
+    duration?: number;
+    icon?: React.ReactNode;
+    action?: {
+        label: React.ReactNode;
+        onClick: () => void;
+    };
+    cancel?: {
+        label: React.ReactNode;
+        onClick?: () => void;
+    };
+    onClose?: () => void;
+    onAutoClose?: () => void;
+    dismissible?: boolean;
+    /**
+     * Show progress bar for this toast. Overrides Toaster's showProgress setting.
+     * - `true`: Always show progress bar
+     * - `false`: Never show progress bar
+     * - `undefined`: Use Toaster's showProgress setting
+     */
+    progress?: boolean;
+    createdAt: number;
+    height?: number;
+    removing?: boolean;
+    swipeDirection?: "left" | "right" | "up" | "down";
+}
+interface ToastOptions {
+    id?: string;
+    variant?: ToastVariant;
+    /**
+     * Description content. Supports:
+     * - Plain string: rendered as text
+     * - HTML string (containing tags like `<b>`, `<strong>`, etc.): rendered as HTML
+     * - ReactNode: rendered as React component
+     */
+    description?: React.ReactNode;
+    duration?: number;
+    icon?: React.ReactNode;
+    action?: {
+        label: React.ReactNode;
+        onClick: () => void;
+    };
+    cancel?: {
+        label: React.ReactNode;
+        onClick?: () => void;
+    };
+    onClose?: () => void;
+    onAutoClose?: () => void;
+    dismissible?: boolean;
+    /**
+     * Show progress bar for this toast. Overrides Toaster's showProgress setting.
+     * - `true`: Always show progress bar
+     * - `false`: Never show progress bar
+     * - `undefined`: Use Toaster's showProgress setting
+     */
+    progress?: boolean;
+}
+interface PromiseOptions<T> {
+    loading: string | (ToastOptions & {
+        title: string;
+    });
+    success: string | (ToastOptions & {
+        title: string;
+    }) | ((data: T) => string | (ToastOptions & {
+        title: string;
+    }));
+    error: string | (ToastOptions & {
+        title: string;
+    }) | ((err: unknown) => string | (ToastOptions & {
+        title: string;
+    }));
+}
+type ToastFunction = {
+    (title: string, options?: ToastOptions): string;
+    success: (title: string, options?: ToastOptions) => string;
+    error: (title: string, options?: ToastOptions) => string;
+    warning: (title: string, options?: ToastOptions) => string;
+    info: (title: string, options?: ToastOptions) => string;
+    loading: (title: string, options?: ToastOptions) => string;
+    promise: <T>(promise: Promise<T>, options: PromiseOptions<T>) => Promise<T>;
+    dismiss: (id: string) => void;
+    dismissAll: () => void;
+    use: (toasterId: string) => {
+        (title: string, options?: ToastOptions): string;
+        success: (title: string, options?: ToastOptions) => string;
+        error: (title: string, options?: ToastOptions) => string;
+        warning: (title: string, options?: ToastOptions) => string;
+        info: (title: string, options?: ToastOptions) => string;
+        loading: (title: string, options?: ToastOptions) => string;
+        promise: <T>(promise: Promise<T>, options: PromiseOptions<T>) => Promise<T>;
+        dismiss: (id: string) => void;
+        dismissAll: () => void;
+    };
+};
+declare const toast: ToastFunction;
+
+interface ToasterProps {
+    /**
+     * Unique ID for this Toaster instance
+     * Use this to have multiple Toaster instances in the same app
+     * @default "default"
+     */
+    id?: string;
+    /**
+     * Position of the toaster
+     * @default "bottom-right"
+     */
+    position?: ToastPosition;
+    /**
+     * Render toasts into a custom container
+     */
+    container?: HTMLElement | null;
+    /**
+     * Label for accessibility
+     * @default "Notifications"
+     */
+    label?: string;
+    /**
+     * Whether to use a portal for rendering
+     * @default true
+     */
+    portal?: boolean;
+    /**
+     * Offset from viewport edges in pixels
+     * @default 16
+     */
+    offset?: number;
+    /**
+     * Default duration for toasts in ms
+     * @default 5000
+     */
+    duration?: number;
+    /**
+     * Maximum number of visible toasts
+     * @default 3
+     */
+    visibleToasts?: number;
+    /**
+     * Additional class name
+     */
+    className?: string;
+    /**
+     * Children - use Toaster.Item to customize toast rendering
+     */
+    children?: ReactNode;
+    /**
+     * Show countdown progress bar at the bottom of each toast
+     * @default false
+     */
+    showProgress?: boolean;
+    /**
+     * Layout mode for toasts
+     * @default "default"
+     */
+    layout?: "default" | "compact";
+}
+interface ToasterComponent extends React.MemoExoticComponent<React.ForwardRefExoticComponent<ToasterProps & React.RefAttributes<HTMLDivElement>>> {
+    Item: typeof ToasterItemSlot;
+    Icon: typeof ToasterIconSlot;
+    Title: typeof ToasterTitleSlot;
+    Description: typeof ToasterDescriptionSlot;
+    Actions: typeof ToasterActionsSlot;
+}
+/**
+ * Toaster component with compound pattern
+ *
+ * @example
+ * ```tsx
+ * <Toaster id="my-toaster">
+ *   <Toaster.Item className="custom-class">
+ *     <Toaster.Icon>{(type, defaultIcon) => <CustomIcon type={type} />}</Toaster.Icon>
+ *     <Toaster.Title className="font-bold uppercase" />
+ *     <Toaster.Description className="text-sm" />
+ *     <Toaster.Actions>{(action, cancel, close) => <CustomActions />}</Toaster.Actions>
+ *   </Toaster.Item>
+ * </Toaster>
+ * ```
+ */
+declare const Toaster: ToasterComponent;
+
+export { type ToastData, type ToastOptions, type ToastPosition, type ToastType, type ToastVariant, Toaster, type ToasterProps, toast };

package/dist/components/tooltip/dist/index.d.ts

@@ -10,6 +10,7 @@ interface TooltipProps {
     className?: string;
     content?: React.ReactNode;
     disabled?: boolean;
+    interactive?: boolean;
     offset?: number;
     onOpenChange?: (open: boolean) => void;
     open?: boolean;
@@ -23,6 +24,7 @@ interface TooltipProps {
     withArrow?: boolean;
 }
 interface TooltipContentProps extends React.HTMLProps<HTMLDivElement> {
+    interactive?: boolean;
     portalId?: string;
     variant?: "default" | "light";
     withArrow?: boolean;

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

@@ -128,7 +128,15 @@ var TooltipArrow = forwardRef(function TooltipArrow2({ className, variant = "def
 });
 var TooltipContent = forwardRef(
   function TooltipContent2(props, propRef) {
-    const { className, withArrow = true, variant = "default", children, portalId, ...rest } = props;
+    const {
+      className,
+      withArrow = true,
+      variant = "default",
+      children,
+      portalId,
+      interactive = true,
+      ...rest
+    } = props;
     const state = useTooltipState();
     const ref = useMergeRefs([state.refs.setFloating, propRef]);
     const { isInstantPhase, currentId } = useDelayGroup(state.context, {
@@ -157,19 +165,27 @@ var TooltipContent = forwardRef(
     });
     const tv = useMemo(() => tooltipContentVariants({ variant }), [variant]);
     if (state.disabled || !isMounted) return null;
+    const floatingProps = state.getFloatingProps(rest);
     return /* @__PURE__ */ jsx(FloatingPortal, { id: portalId, children: /* @__PURE__ */ jsx(
       "div",
       {
         ref,
-        style: state.floatingStyles,
-        ...state.getFloatingProps(rest),
+        style: {
+          ...state.floatingStyles,
+          pointerEvents: interactive ? void 0 : "none"
+        },
+        ...floatingProps,
         className: "z-tooltip",
         children: /* @__PURE__ */ jsxs(
           "div",
           {
             className: tcx(tv.root({ className })),
             "data-state": state.open ? "open" : "closed",
-            style: styles,
+            style: {
+              ...styles,
+              pointerEvents: interactive ? void 0 : "none",
+              cursor: interactive ? void 0 : "default"
+            },
             children: [
               children,
               withArrow && /* @__PURE__ */ jsx(TooltipArrow, { variant })
@@ -272,7 +288,8 @@ function TooltipRoot(props) {
     withArrow = true,
     variant = "default",
     offset: offset2 = 8,
-    portalId = PORTAL_ROOT_ID
+    portalId = PORTAL_ROOT_ID,
+    interactive = true
   } = props;
   const tooltip = useTooltip({
     placement,
@@ -291,6 +308,7 @@ function TooltipRoot(props) {
           variant,
           portalId,
           className,
+          interactive,
           children: [
             content,
             shortcut && /* @__PURE__ */ jsx(

package/dist/components/virtual-select/dist/index.d.ts

@@ -0,0 +1,48 @@
+import { MenuContextContent, MenuDivider, MenuEmpty, MenuContextItem, MenuSearch, MenuTrigger, MenuValue } from '../../menus/src';
+import { FloatingFocusManagerProps } from '@floating-ui/react';
+import { default as React } from 'react';
+interface VirtualSelectOption<T = unknown> {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    data?: T;
+}
+interface VirtualSelectProps<T = unknown> {
+    className?: string;
+    closeOnEscape?: boolean;
+    disabled?: boolean;
+    emptyText?: string;
+    focusManagerProps?: Partial<FloatingFocusManagerProps>;
+    matchTriggerWidth?: boolean;
+    maxHeight?: number;
+    onChange?: (value: string) => void;
+    onOpenChange?: (open: boolean) => void;
+    open?: boolean;
+    options: VirtualSelectOption<T>[];
+    overscan?: number;
+    placeholder?: string;
+    placement?: "bottom-start" | "bottom-end";
+    portalId?: string;
+    readOnly?: boolean;
+    renderOption?: (option: VirtualSelectOption<T>, isSelected: boolean) => React.ReactNode;
+    renderValue?: (option: VirtualSelectOption<T> | null) => React.ReactNode;
+    root?: HTMLElement | null;
+    searchPlaceholder?: string;
+    size?: "default" | "large";
+    value?: string | null;
+    variant?: "default" | "light" | "reset";
+}
+interface VirtualSelectComponentType {
+    <T = unknown>(props: VirtualSelectProps<T>): React.ReactElement | null;
+    displayName?: string;
+    Content: typeof MenuContextContent;
+    Divider: typeof MenuDivider;
+    Empty: typeof MenuEmpty;
+    Item: typeof MenuContextItem;
+    Search: typeof MenuSearch;
+    Trigger: typeof MenuTrigger;
+    Value: typeof MenuValue;
+}
+declare const VirtualSelect: VirtualSelectComponentType;
+
+export { VirtualSelect, type VirtualSelectOption, type VirtualSelectProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@choice-ui/react",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "A desktop-first React UI component library built for professional desktop applications with comprehensive documentation",
   "sideEffects": false,
   "type": "module",
@@ -54,11 +54,11 @@
     "use-stick-to-bottom": "^1.0.43",
     "usehooks-ts": "^3.1.0",
     "zod": "^4.0.5",
-    "react-markdown": "^9.0.3",
+    "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",
     "remark-breaks": "^4.0.0",
     "remark-math": "^6.0.0",
-    "harden-react-markdown": "^1.0.4",
+    "harden-react-markdown": "^1.1.8",
     "shiki": "^3.9.2",
     "@choice-ui/design-tokens": "0.2.16"
   },