@choice-ui/react 1.9.0 → 1.9.1

package/dist/components/form/src/adapters/range-adapter.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Range } from "../../../range/dist/index.js";
+import { Range as Range2 } from "../../../range/dist/index.js";
 import { filterFormProps, BaseAdapter } from "./base-adapter.js";
 function RangeAdapter({
   className,
@@ -23,7 +23,7 @@ function RangeAdapter({
       legendMode: true,
       children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx(
-          Range,
+          Range2,
           {
             value,
             onChange: (inputValue) => onChange(inputValue),

package/dist/components/icon-button/dist/index.d.ts

@@ -14,7 +14,7 @@ interface IconButtonProps extends Omit<HTMLProps<HTMLElement>, "size" | "as"> {
     readOnly?: boolean;
     size?: "default" | "large" | "reset";
     tooltip?: TooltipProps;
-    variant?: "default" | "secondary" | "solid" | "highlight" | "ghost" | "dark" | "reset";
+    variant?: "default" | "secondary" | "solid" | "highlight" | "ghost" | "dark" | "submit" | "reset";
 }
 declare const IconButton: react.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & react.RefAttributes<HTMLElement>>;
 

package/dist/components/icon-button/dist/index.js

@@ -28,6 +28,12 @@ var iconButtonTv = tcv({
       highlight: {},
       ghost: {},
       dark: { button: "text-white" },
+      submit: {
+        button: [
+          "bg-[var(--theme-submit-btn-bg)] text-[var(--theme-submit-btn-text)]",
+          "focus-visible:border-transparent"
+        ]
+      },
       reset: {}
     },
     active: {
@@ -141,6 +147,39 @@ var iconButtonTv = tcv({
       variant: "dark",
       disabled: true,
       class: { button: "text-gray-500" }
+    },
+    {
+      variant: "submit",
+      active: false,
+      disabled: false,
+      class: {
+        button: ["focus-visible:shadow-focus", "hover:opacity-70", "active:opacity-70"]
+      }
+    },
+    {
+      variant: "submit",
+      active: true,
+      disabled: false,
+      class: {
+        button: "opacity-70"
+      }
+    },
+    {
+      variant: "submit",
+      focused: true,
+      class: {
+        button: ["shadow-focus", "border-transparent"]
+      }
+    },
+    {
+      variant: "submit",
+      loading: true,
+      class: { button: "opacity-70" }
+    },
+    {
+      variant: "submit",
+      disabled: true,
+      class: { button: "opacity-50" }
     }
   ],
   defaultVariants: {

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

@@ -458,6 +458,11 @@ declare const MenuContext: react.Context<MenuContextType | null>;
 interface MenuContextItemProps extends MenuItemProps {
     customActive?: boolean;
     exclusiveIndex?: number;
+    /**
+     * Whether this item is a link item. When true, a link icon will be displayed on the right.
+     * The actual link navigation should be handled by the onClick handler.
+     */
+    asLink?: boolean;
     onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     onKeyDown?: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
     onMouseUp?: (e: React.MouseEvent<HTMLButtonElement>) => void;

package/dist/components/menus/dist/index.js

@@ -1,7 +1,7 @@
 import { Button } from "../../button/dist/index.js";
 import React__default, { memo, forwardRef, useMemo, useContext, createContext, startTransition, useCallback, useRef, useState, useEffect, Children, isValidElement, Fragment as Fragment$1 } from "react";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { ChevronDownSmall, Check, ChevronRightSmall, ChevronUpSmall } from "@choiceform/icons-react";
+import { ChevronDownSmall, Check, Launch, ChevronRightSmall, ChevronUpSmall } from "@choiceform/icons-react";
 import { Kbd } from "../../kbd/dist/index.js";
 import { flushSync } from "react-dom";
 import { SearchInput } from "../../search-input/dist/index.js";
@@ -418,9 +418,13 @@ var MenuLabel = memo(function MenuLabel2({
 });
 MenuLabel.displayName = "MenuLabel";
 var SCROLL_ARROW_PADDING = 16;
+var MIN_HEIGHT_FOR_ARROWS = 48;
 var shouldShowArrow = (scrollRef, dir) => {
   if (scrollRef.current) {
     const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
+    if (clientHeight < MIN_HEIGHT_FOR_ARROWS) {
+      return false;
+    }
     if (dir === "up") {
       return scrollTop >= SCROLL_ARROW_PADDING;
     }
@@ -839,18 +843,25 @@ function useMenuTree(config) {
       handleOpenChange(false);
     }
   });
+  const handleParentNavigate = useEventCallback((event) => {
+    if (event.nodeId === parentId && event.index !== item.index && isControlledOpen) {
+      handleOpenChange(false);
+    }
+  });
   const cleanupTreeEvents = useEventCallback(() => {
     if (tree) {
       tree.events.off("click", handleTreeClick);
       tree.events.off("menuopen", handleSubMenuOpen);
+      tree.events.off("navigate", handleParentNavigate);
     }
   });
   useEffect(() => {
     if (!tree) return;
     tree.events.on("click", handleTreeClick);
     tree.events.on("menuopen", handleSubMenuOpen);
+    tree.events.on("navigate", handleParentNavigate);
     return cleanupTreeEvents;
-  }, [tree, nodeId, parentId, handleTreeClick, handleSubMenuOpen, cleanupTreeEvents]);
+  }, [tree, nodeId, parentId, handleTreeClick, handleSubMenuOpen, handleParentNavigate, cleanupTreeEvents]);
   useEffect(() => {
     if (isControlledOpen && tree) {
       tree.events.emit("menuopen", { parentId, nodeId });
@@ -904,7 +915,9 @@ var MenuContextItem = memo(
         size: size2,
         shortcut,
         prefixElement,
+        suffixElement,
         variant,
+        asLink,
         onClick,
         onMouseUp,
         onTouchStart,
@@ -969,6 +982,16 @@ var MenuContextItem = memo(
         }),
         [shortcut == null ? void 0 : shortcut.modifier, shortcut == null ? void 0 : shortcut.keys]
       );
+      const suffixConfig = useMemo(() => {
+        if (suffixElement !== void 0) return suffixElement;
+        if (prefixElement !== void 0 && menu.selection && !customActive && selected) {
+          return /* @__PURE__ */ jsx(Check, {});
+        }
+        if (asLink) {
+          return /* @__PURE__ */ jsx(Launch, { className: "h-3 w-3 text-current" });
+        }
+        return void 0;
+      }, [suffixElement, prefixElement, menu.selection, selected, customActive, asLink]);
       const combinedRef = useCallback(
         (node) => {
           item.ref(node);
@@ -991,6 +1014,7 @@ var MenuContextItem = memo(
           disabled,
           selected,
           prefixElement: prefixConfig,
+          suffixElement: suffixConfig,
           shortcut: shortcutConfig,
           variant,
           size: size2,
@@ -1058,7 +1082,12 @@ var MenuContextSubTrigger = memo(
       throw new Error("MenuContextSubTrigger must be used within a MenuContext component");
     }
     const isActive = useMemo(
-      () => item.index === menu.activeIndex || !!active,
+      () => {
+        if (menu.activeIndex !== null && menu.activeIndex !== void 0) {
+          return item.index === menu.activeIndex;
+        }
+        return !!active;
+      },
       [item.index, menu.activeIndex, active]
     );
     const handleFocus = useEventCallback((event) => {

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

@@ -1,6 +1,13 @@
 import { HTMLProps, ReactNode } from 'react';
 import * as react from 'react';
 
+interface RadioIconProps extends Omit<HTMLProps<HTMLDivElement>, "children"> {
+    children?: ReactNode | ((props: {
+        value?: boolean;
+    }) => ReactNode);
+}
+declare const RadioIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<RadioIconProps, "ref"> & react.RefAttributes<HTMLDivElement>>>;
+
 interface RadioLabelProps extends Omit<HTMLProps<HTMLLabelElement>, "htmlFor" | "id" | "disabled"> {
     children: ReactNode;
 }
@@ -19,6 +26,7 @@ interface RadioType {
     (props: RadioProps & {
         ref?: React.Ref<HTMLInputElement>;
     }): JSX.Element;
+    Icon: typeof RadioIcon;
     Label: typeof RadioLabel;
     displayName?: string;
 }
@@ -50,4 +58,4 @@ interface RadioGroupType {
 }
 declare const RadioGroup: RadioGroupType;
 
-export { Radio, RadioGroup, type RadioGroupProps, type RadioProps };
+export { Radio, RadioGroup, type RadioGroupProps, type RadioIconProps, type RadioLabelProps, type RadioProps };

package/dist/components/radio/dist/index.js

@@ -1,5 +1,5 @@
 import { Dot } from "@choiceform/icons-react";
-import { memo, forwardRef, useId, useMemo, createContext, useContext } from "react";
+import { memo, forwardRef, useId, useMemo, createContext, useContext, Children, isValidElement } from "react";
 import { useEventCallback } from "usehooks-ts";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { tcx, tcv } from "../../../shared/utils/tcx/tcx.js";
@@ -145,6 +145,38 @@ var radioTv = tcv({
     focused: false
   }
 });
+var RadioIcon = memo(
+  forwardRef(function RadioIcon2(props, ref) {
+    const { className, children, ...rest } = props;
+    const { value, disabled, variant } = useRadioContext();
+    const tv = radioTv({
+      type: "radio",
+      variant,
+      disabled,
+      checked: value
+    });
+    const renderIcon = () => {
+      if (typeof children === "function") {
+        return children({ value });
+      }
+      if (children !== void 0) {
+        return children;
+      }
+      return value ? /* @__PURE__ */ jsx(Dot, {}) : null;
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: tcx(tv.box(), className),
+        "data-active": value,
+        ...rest,
+        children: renderIcon()
+      }
+    );
+  })
+);
+RadioIcon.displayName = "Radio.Icon";
 var RadioLabel = memo(
   forwardRef(function RadioLabel2(props, ref) {
     const { children, className, ...rest } = props;
@@ -201,13 +233,24 @@ var RadioBase = forwardRef(function Radio(props, ref) {
     }
     onKeyDown == null ? void 0 : onKeyDown(e);
   });
+  const isIconElement = (child) => {
+    var _a;
+    return isValidElement(child) && (child.type === RadioIcon || ((_a = child.type) == null ? void 0 : _a.displayName) === "Radio.Icon");
+  };
+  const childArray = Children.toArray(children);
+  const iconChild = childArray.find(isIconElement);
+  const otherChildren = childArray.filter((child) => !isIconElement(child));
   const renderChildren = () => {
-    if (typeof children === "string" || typeof children === "number") {
-      return /* @__PURE__ */ jsx(RadioLabel, { children });
+    if (otherChildren.length === 1) {
+      const child = otherChildren[0];
+      if (typeof child === "string" || typeof child === "number") {
+        return /* @__PURE__ */ jsx(RadioLabel, { children: child });
+      }
     }
-    return children;
+    return otherChildren;
   };
-  return /* @__PURE__ */ jsx(RadioContext.Provider, { value: { id, descriptionId, disabled }, children: /* @__PURE__ */ jsxs("div", { className: tcx(tv.root(), className), children: [
+  const renderDefaultIcon = () => /* @__PURE__ */ jsx("div", { className: tv.box(), children: value && /* @__PURE__ */ jsx(Dot, {}) });
+  return /* @__PURE__ */ jsx(RadioContext.Provider, { value: { id, descriptionId, disabled, value, variant }, children: /* @__PURE__ */ jsxs("div", { className: tcx(tv.root(), className), children: [
     /* @__PURE__ */ jsxs("div", { className: "pointer-events-none relative", children: [
       /* @__PURE__ */ jsx(
         "input",
@@ -229,13 +272,14 @@ var RadioBase = forwardRef(function Radio(props, ref) {
           ...rest
         }
       ),
-      /* @__PURE__ */ jsx("div", { className: tv.box(), children: value && /* @__PURE__ */ jsx(Dot, {}) })
+      iconChild ?? renderDefaultIcon()
     ] }),
     renderChildren()
   ] }) });
 });
 var MemoizedRadio = memo(RadioBase);
 var Radio2 = MemoizedRadio;
+Radio2.Icon = RadioIcon;
 Radio2.Label = RadioLabel;
 Radio2.displayName = "Radio";
 var RadioGroupItem = memo(

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

@@ -1,10 +1,60 @@
-import { default as React } from 'react';
+import { default as React__default } from 'react';
+import * as React$1 from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as tailwind_variants from 'tailwind-variants';
+
+interface RangeConnectsProps {
+    className?: string;
+}
+declare const RangeConnects: React$1.ForwardRefExoticComponent<RangeConnectsProps & React$1.RefAttributes<HTMLDivElement>>;
+interface RangeContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+    className?: string;
+    height?: number;
+}
+declare function RangeContainer(props: RangeContainerProps): react_jsx_runtime.JSX.Element;
+declare namespace RangeContainer {
+    var displayName: string;
+}
+interface RangeTupleConnectsProps extends React.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+}
+declare const RangeTupleConnects: React$1.ForwardRefExoticComponent<RangeTupleConnectsProps & React$1.RefAttributes<HTMLDivElement>>;
+interface RangeTupleContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+    className?: string;
+    height?: number;
+}
+declare function RangeTupleContainer(props: RangeTupleContainerProps): react_jsx_runtime.JSX.Element;
+declare namespace RangeTupleContainer {
+    var displayName: string;
+}
+
+interface RangeThumbProps {
+    className?: string;
+    size?: number;
+}
+declare const RangeThumb: React__default.ForwardRefExoticComponent<RangeThumbProps & React__default.RefAttributes<HTMLDivElement>>;
+type ThumbIndex$1 = 0 | 1;
+interface RangeTupleThumbProps {
+    className?: string;
+    size?: number;
+    index: ThumbIndex$1;
+}
+declare const RangeTupleThumb: React__default.ForwardRefExoticComponent<RangeTupleThumbProps & React__default.RefAttributes<HTMLDivElement>>;
+
+interface RangeDotProps extends React.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+}
+interface RangeTupleDotProps extends React.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+}
+declare const RangeDot: React$1.ForwardRefExoticComponent<RangeDotProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const RangeTupleDot: React$1.ForwardRefExoticComponent<RangeTupleDotProps & React$1.RefAttributes<HTMLDivElement>>;
+
 interface RangeProps {
+    children?: React__default.ReactNode;
     className?: string;
-    connectsClassName?: {
-        negative?: string;
-        positive?: string;
-    };
     defaultValue?: number;
     disabled?: boolean;
     max?: number;
@@ -15,20 +65,24 @@ interface RangeProps {
     readOnly?: boolean;
     step?: number;
     thumbSize?: number;
-    trackSize?: {
-        height?: number;
-        width?: number | "auto";
-    };
     value?: number;
+    /**
+     * Width of the range track in pixels.
+     * If not provided (undefined), the width will be auto-calculated from the container.
+     */
+    width?: number | boolean;
+}
+interface RangeComponent extends React__default.ForwardRefExoticComponent<RangeProps & React__default.RefAttributes<HTMLDivElement>> {
+    Container: typeof RangeContainer;
+    Connects: typeof RangeConnects;
+    Thumb: typeof RangeThumb;
+    Dot: typeof RangeDot;
 }
-declare const Range: React.ForwardRefExoticComponent<RangeProps & React.RefAttributes<HTMLDivElement>>;
+declare const Range: RangeComponent;
 
 interface RangeTupleProps {
+    children?: React__default.ReactNode;
     className?: string;
-    connectsClassName?: {
-        negative?: string;
-        positive?: string;
-    };
     defaultValue?: [number, number];
     disabled?: boolean;
     max?: number;
@@ -39,12 +93,214 @@ interface RangeTupleProps {
     readOnly?: boolean;
     step?: number;
     thumbSize?: number;
-    trackSize?: {
-        height?: number;
-        width?: number | "auto";
-    };
     value?: [number, number];
+    /**
+     * Width of the range track in pixels.
+     * If not provided (undefined) or set to false, the width will be auto-calculated from the container.
+     */
+    width?: number | boolean;
+}
+interface RangeTupleComponent extends React__default.ForwardRefExoticComponent<RangeTupleProps & React__default.RefAttributes<HTMLDivElement>> {
+    Container: typeof RangeTupleContainer;
+    Connects: typeof RangeTupleConnects;
+    Thumb: typeof RangeTupleThumb;
+    Dot: typeof RangeTupleDot;
+}
+declare const RangeTuple: RangeTupleComponent;
+
+declare const rangeTv: tailwind_variants.TVReturnType<{
+    overStepValue: {
+        true: {
+            dot: string;
+        };
+        false: {
+            dot: string;
+        };
+    };
+    defaultStepValue: {
+        true: {
+            dot: string;
+        };
+    };
+    hasStepOrDefault: {
+        true: {};
+        false: {};
+    };
+    currentDefaultValue: {
+        true: {};
+        false: {};
+    };
+    disabled: {
+        true: {
+            connect: string;
+            thumb: string;
+        };
+        false: {
+            connect: string;
+        };
+    };
+}, {
+    container: string[];
+    connect: string[];
+    thumbWrapper: string[];
+    thumb: string[];
+    dotContainer: string;
+    dot: string[];
+    input: string;
+}, undefined, {
+    overStepValue: {
+        true: {
+            dot: string;
+        };
+        false: {
+            dot: string;
+        };
+    };
+    defaultStepValue: {
+        true: {
+            dot: string;
+        };
+    };
+    hasStepOrDefault: {
+        true: {};
+        false: {};
+    };
+    currentDefaultValue: {
+        true: {};
+        false: {};
+    };
+    disabled: {
+        true: {
+            connect: string;
+            thumb: string;
+        };
+        false: {
+            connect: string;
+        };
+    };
+}, {
+    container: string[];
+    connect: string[];
+    thumbWrapper: string[];
+    thumb: string[];
+    dotContainer: string;
+    dot: string[];
+    input: string;
+}, tailwind_variants.TVReturnType<{
+    overStepValue: {
+        true: {
+            dot: string;
+        };
+        false: {
+            dot: string;
+        };
+    };
+    defaultStepValue: {
+        true: {
+            dot: string;
+        };
+    };
+    hasStepOrDefault: {
+        true: {};
+        false: {};
+    };
+    currentDefaultValue: {
+        true: {};
+        false: {};
+    };
+    disabled: {
+        true: {
+            connect: string;
+            thumb: string;
+        };
+        false: {
+            connect: string;
+        };
+    };
+}, {
+    container: string[];
+    connect: string[];
+    thumbWrapper: string[];
+    thumb: string[];
+    dotContainer: string;
+    dot: string[];
+    input: string;
+}, undefined, unknown, unknown, undefined>>;
+
+interface RangeContextValue {
+    currentValue: number;
+    disabled: boolean;
+    readOnly: boolean;
+    min: number;
+    max: number;
+    step: number;
+    thumbSize: number;
+    trackHeight: number;
+    transforms: {
+        minTransform: number;
+        maxTransform: number;
+        transformX: number;
+    };
+    defaultStepValue: number | null;
+    currentStepValue: number;
+    dotsData: Array<{
+        value: number;
+        position: number;
+    }> | null;
+    defaultDotPosition: number | null;
+    thumbRef: React.MutableRefObject<HTMLDivElement | null>;
+    inputRef: React.MutableRefObject<HTMLInputElement | null>;
+    isDragging: React.MutableRefObject<boolean>;
+    handlePointerDown: (e: React.PointerEvent) => void;
+    handleKeyDown: (e: React.KeyboardEvent) => void;
+    tv: ReturnType<typeof rangeTv>;
+    defaultValue?: number;
+    hasCustomDot: boolean;
+    hasCustomConnects: boolean;
+    isDefaultValue?: boolean;
+}
+declare const RangeContext: React$1.Context<RangeContextValue | null>;
+declare function useRangeContext(): RangeContextValue;
+
+type ThumbIndex = 0 | 1;
+interface RangeTupleContextValue {
+    currentValue: [number, number];
+    disabled: boolean;
+    readOnly: boolean;
+    min: number;
+    max: number;
+    step: number;
+    thumbSize: number;
+    trackHeight: number;
+    transforms: {
+        minTransform: number;
+        maxTransform: number;
+        transformX0: number;
+        transformX1: number;
+    };
+    defaultStepValue: [number, number] | null;
+    currentStepValue: [number, number];
+    dotsData: Array<{
+        value: number;
+        position: number;
+    }> | null;
+    defaultDotPositions: [number, number] | null;
+    normalizedDefaultValue: [number, number] | undefined;
+    thumb0Ref: React.RefObject<HTMLDivElement | null>;
+    thumb1Ref: React.RefObject<HTMLDivElement | null>;
+    input0Ref: React.RefObject<HTMLInputElement | null>;
+    input1Ref: React.RefObject<HTMLInputElement | null>;
+    isDragging: React.MutableRefObject<ThumbIndex | null>;
+    handlePointerDown: (e: React.PointerEvent, thumbIndex: ThumbIndex) => void;
+    handleKeyDown: (e: React.KeyboardEvent, thumbIndex: ThumbIndex) => void;
+    tv: ReturnType<typeof rangeTv>;
+    thumbTv0: ReturnType<typeof rangeTv>;
+    thumbTv1: ReturnType<typeof rangeTv>;
+    hasCustomDot: boolean;
+    hasCustomConnects: boolean;
+    isDefaultValue?: boolean;
 }
-declare const RangeTuple: React.ForwardRefExoticComponent<RangeTupleProps & React.RefAttributes<HTMLDivElement>>;
+declare const RangeTupleContext: React$1.Context<RangeTupleContextValue | null>;
+declare function useRangeTupleContext(): RangeTupleContextValue;
 
-export { Range, type RangeProps, RangeTuple, type RangeTupleProps };
+export { Range, type RangeConnectsProps, type RangeContainerProps, RangeContext, type RangeContextValue, type RangeDotProps, type RangeProps, type RangeThumbProps, RangeTuple, type RangeTupleConnectsProps, type RangeTupleContainerProps, RangeTupleContext, type RangeTupleContextValue, type RangeTupleDotProps, type RangeTupleProps, type RangeTupleThumbProps, useRangeContext, useRangeTupleContext };