@choice-ui/react 2.0.0 → 2.0.2

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