@choice-ui/react 1.8.6 → 1.8.8

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;
     }
@@ -904,7 +908,9 @@ var MenuContextItem = memo(
         size: size2,
         shortcut,
         prefixElement,
+        suffixElement,
         variant,
+        asLink,
         onClick,
         onMouseUp,
         onTouchStart,
@@ -969,6 +975,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 +1007,7 @@ var MenuContextItem = memo(
           disabled,
           selected,
           prefixElement: prefixConfig,
+          suffixElement: suffixConfig,
           shortcut: shortcutConfig,
           variant,
           size: size2,

package/dist/components/menus/src/components/menu-scroll-arrow.js

@@ -6,9 +6,13 @@ import { MenuScrollArrowTv } from "../tv.js";
 import { useIsomorphicLayoutEffect } from "../../../../shared/hooks/use-isomorphic-layout-effect/use-isomorphic-layout-effect.js";
 import { tcx } from "../../../../shared/utils/tcx/tcx.js";
 const SCROLL_ARROW_PADDING = 16;
+const MIN_HEIGHT_FOR_ARROWS = 48;
 const 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;
     }

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 };