@choice-ui/react 1.8.8 → 1.9.0

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

@@ -28,12 +28,6 @@ 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: {
@@ -147,39 +141,6 @@ 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,11 +458,6 @@ 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, Launch, ChevronRightSmall, ChevronUpSmall } from "@choiceform/icons-react";
+import { ChevronDownSmall, Check, 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,13 +418,9 @@ 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;
     }
@@ -908,9 +904,7 @@ var MenuContextItem = memo(
         size: size2,
         shortcut,
         prefixElement,
-        suffixElement,
         variant,
-        asLink,
         onClick,
         onMouseUp,
         onTouchStart,
@@ -975,16 +969,6 @@ 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);
@@ -1007,7 +991,6 @@ var MenuContextItem = memo(
           disabled,
           selected,
           prefixElement: prefixConfig,
-          suffixElement: suffixConfig,
           shortcut: shortcutConfig,
           variant,
           size: size2,

package/dist/components/menus/src/context/menu-context-sub-trigger.js

@@ -26,7 +26,12 @@ const 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/menus/src/hooks/use-menu-tree.js

@@ -16,18 +16,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 });

package/dist/components/radio/src/context.d.ts

@@ -2,6 +2,8 @@ export interface RadioContextType {
     descriptionId: string;
     disabled?: boolean;
     id: string;
+    value?: boolean;
+    variant?: "default" | "accent" | "outline";
 }
 export declare const RadioContext: import('react').Context<RadioContextType | null>;
 export declare function useRadioContext(): RadioContextType;

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

@@ -2,3 +2,5 @@ export { Radio } from './radio';
 export { RadioGroup } from './radio-group';
 export type { RadioProps } from './radio';
 export type { RadioGroupProps } from './radio-group';
+export type { RadioIconProps } from './radio-icon';
+export type { RadioLabelProps } from './radio-label';

package/dist/components/radio/src/radio-icon.d.ts

@@ -0,0 +1,7 @@
+import { HTMLProps, ReactNode } from 'react';
+export interface RadioIconProps extends Omit<HTMLProps<HTMLDivElement>, "children"> {
+    children?: ReactNode | ((props: {
+        value?: boolean;
+    }) => ReactNode);
+}
+export declare const RadioIcon: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<Omit<RadioIconProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>>;

package/dist/components/radio/src/radio-icon.js

@@ -0,0 +1,41 @@
+import { jsx } from "react/jsx-runtime";
+import { Dot } from "@choiceform/icons-react";
+import { memo, forwardRef } from "react";
+import { useRadioContext } from "./context.js";
+import { radioTv } from "./tv.js";
+import { tcx } from "../../../shared/utils/tcx/tcx.js";
+const 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";
+export {
+  RadioIcon
+};

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

@@ -1,4 +1,5 @@
 import { HTMLProps, ReactNode } from 'react';
+import { RadioIcon } from './radio-icon';
 import { RadioLabel } from './radio-label';
 export interface RadioProps extends Omit<HTMLProps<HTMLInputElement>, "value" | "onChange"> {
     children?: ReactNode;
@@ -13,6 +14,7 @@ interface RadioType {
     (props: RadioProps & {
         ref?: React.Ref<HTMLInputElement>;
     }): JSX.Element;
+    Icon: typeof RadioIcon;
     Label: typeof RadioLabel;
     displayName?: string;
 }

package/dist/components/radio/src/radio.js

@@ -1,8 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Dot } from "@choiceform/icons-react";
-import { memo, forwardRef, useId } from "react";
+import { memo, forwardRef, useId, Children, isValidElement } from "react";
 import { useEventCallback } from "usehooks-ts";
 import { RadioContext } from "./context.js";
+import { RadioIcon } from "./radio-icon.js";
 import { RadioLabel } from "./radio-label.js";
 import { radioTv } from "./tv.js";
 import { tcx } from "../../../shared/utils/tcx/tcx.js";
@@ -43,13 +44,24 @@ const RadioBase = forwardRef(function Radio2(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",
@@ -71,13 +83,14 @@ const RadioBase = forwardRef(function Radio2(props, ref) {
           ...rest
         }
       ),
-      /* @__PURE__ */ jsx("div", { className: tv.box(), children: value && /* @__PURE__ */ jsx(Dot, {}) })
+      iconChild ?? renderDefaultIcon()
     ] }),
     renderChildren()
   ] }) });
 });
 const MemoizedRadio = memo(RadioBase);
 const Radio = MemoizedRadio;
+Radio.Icon = RadioIcon;
 Radio.Label = RadioLabel;
 Radio.displayName = "Radio";
 export {

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

@@ -1,60 +1,10 @@
-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>>;
-
+import { default as React } from 'react';
 interface RangeProps {
-    children?: React__default.ReactNode;
     className?: string;
+    connectsClassName?: {
+        negative?: string;
+        positive?: string;
+    };
     defaultValue?: number;
     disabled?: boolean;
     max?: number;
@@ -65,24 +15,20 @@ 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: RangeComponent;
+declare const Range: React.ForwardRefExoticComponent<RangeProps & React.RefAttributes<HTMLDivElement>>;
 
 interface RangeTupleProps {
-    children?: React__default.ReactNode;
     className?: string;
+    connectsClassName?: {
+        negative?: string;
+        positive?: string;
+    };
     defaultValue?: [number, number];
     disabled?: boolean;
     max?: number;
@@ -93,214 +39,12 @@ interface RangeTupleProps {
     readOnly?: boolean;
     step?: number;
     thumbSize?: number;
-    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;
-        };
+    trackSize?: {
+        height?: number;
+        width?: number | "auto";
     };
-}, {
-    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;
+    value?: [number, number];
 }
-declare const RangeTupleContext: React$1.Context<RangeTupleContextValue | null>;
-declare function useRangeTupleContext(): RangeTupleContextValue;
+declare const RangeTuple: React.ForwardRefExoticComponent<RangeTupleProps & React.RefAttributes<HTMLDivElement>>;
 
-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 };
+export { Range, type RangeProps, RangeTuple, type RangeTupleProps };