@choice-ui/react 2.0.1 → 2.0.2

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

@@ -244,6 +244,13 @@ var buttonTv = tcv({
       loading: false,
       variant: "dark",
       class: { button: "active:bg-gray-600" }
+    },
+    {
+      disabled: false,
+      loading: false,
+      variant: "secondary",
+      active: false,
+      class: { button: "hover:bg-secondary-background" }
     }
   ],
   defaultVariants: {

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

@@ -1,6 +1,14 @@
 import { HTMLProps, ReactNode } from 'react';
 import * as react from 'react';
 
+interface CheckboxIconProps extends Omit<HTMLProps<HTMLDivElement>, "children"> {
+    children?: ReactNode | ((props: {
+        value?: boolean;
+        mixed?: boolean;
+    }) => ReactNode);
+}
+declare const CheckboxIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<CheckboxIconProps, "ref"> & react.RefAttributes<HTMLDivElement>>>;
+
 interface CheckboxLabelProps extends Omit<HTMLProps<HTMLLabelElement>, "htmlFor" | "id" | "disabled"> {
     children: ReactNode;
 }
@@ -20,9 +28,10 @@ interface CheckboxType {
     (props: CheckboxProps & {
         ref?: React.Ref<HTMLInputElement>;
     }): JSX.Element;
+    Icon: typeof CheckboxIcon;
     Label: typeof CheckboxLabel;
     displayName?: string;
 }
 declare const Checkbox: CheckboxType;
 
-export { Checkbox, type CheckboxProps };
+export { Checkbox, type CheckboxIconProps, type CheckboxLabelProps, type CheckboxProps };

package/dist/components/checkbox/dist/index.js

@@ -1,5 +1,5 @@
 import { Indeterminate, Check } from "@choiceform/icons-react";
-import { memo, forwardRef, useId, createContext, useContext } from "react";
+import { memo, forwardRef, useId, Children, isValidElement, createContext, useContext } from "react";
 import { useEventCallback } from "usehooks-ts";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { tcv, tcx } from "../../../shared/utils/tcx/tcx.js";
@@ -137,6 +137,38 @@ var checkboxTv = tcv({
     focused: false
   }
 });
+var CheckboxIcon = memo(
+  forwardRef(function CheckboxIcon2(props, ref) {
+    const { className, children, ...rest } = props;
+    const { value, mixed, disabled, variant } = useCheckboxContext();
+    const tv = checkboxTv({
+      type: "checkbox",
+      variant,
+      disabled,
+      checked: value || mixed
+    });
+    const renderIcon = () => {
+      if (typeof children === "function") {
+        return children({ value, mixed });
+      }
+      if (children !== void 0) {
+        return children;
+      }
+      return mixed ? /* @__PURE__ */ jsx(Indeterminate, {}) : value ? /* @__PURE__ */ jsx(Check, {}) : null;
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: tcx(tv.box(), className),
+        "data-active": value,
+        ...rest,
+        children: renderIcon()
+      }
+    );
+  })
+);
+CheckboxIcon.displayName = "Checkbox.Icon";
 var CheckboxLabel = memo(
   forwardRef(function CheckboxLabel2(props, ref) {
     const { children, className, ...rest } = props;
@@ -195,12 +227,23 @@ var CheckboxBase = forwardRef(function Checkbox(props, ref) {
     }
     onKeyDown == null ? void 0 : onKeyDown(e);
   });
+  const isIconElement = (child) => {
+    var _a;
+    return isValidElement(child) && (child.type === CheckboxIcon || ((_a = child.type) == null ? void 0 : _a.displayName) === "Checkbox.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(CheckboxLabel, { children });
+    if (otherChildren.length === 1) {
+      const child = otherChildren[0];
+      if (typeof child === "string" || typeof child === "number") {
+        return /* @__PURE__ */ jsx(CheckboxLabel, { children: child });
+      }
     }
-    return children;
+    return otherChildren;
   };
+  const renderDefaultIcon = () => /* @__PURE__ */ jsx("div", { className: tv.box(), children: mixed ? /* @__PURE__ */ jsx(Indeterminate, {}) : value ? /* @__PURE__ */ jsx(Check, {}) : null });
   return /* @__PURE__ */ jsx(
     CheckboxContext.Provider,
     {
@@ -234,7 +277,7 @@ var CheckboxBase = forwardRef(function Checkbox(props, ref) {
               ...rest
             }
           ),
-          /* @__PURE__ */ jsx("div", { className: tv.box(), children: mixed ? /* @__PURE__ */ jsx(Indeterminate, {}) : value ? /* @__PURE__ */ jsx(Check, {}) : null })
+          iconChild ?? renderDefaultIcon()
         ] }),
         renderChildren()
       ] })
@@ -243,6 +286,7 @@ var CheckboxBase = forwardRef(function Checkbox(props, ref) {
 });
 var MemoizedCheckbox = memo(CheckboxBase);
 var Checkbox2 = MemoizedCheckbox;
+Checkbox2.Icon = CheckboxIcon;
 Checkbox2.Label = CheckboxLabel;
 Checkbox2.displayName = "Checkbox";
 export {

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

@@ -452,8 +452,37 @@ interface ColorAreaProps {
 }
 declare const ColorArea: react.MemoExoticComponent<react.ForwardRefExoticComponent<ColorAreaProps & react.RefAttributes<HTMLDivElement>>>;
 
+interface ColorSliderThumbProps {
+    className?: string;
+    size?: number;
+}
+declare function ColorSliderThumb(props: ColorSliderThumbProps): react_jsx_runtime.JSX.Element;
+declare namespace ColorSliderThumb {
+    var displayName: string;
+}
+
+interface ColorSliderTrackProps {
+    className?: string;
+    children?: React.ReactNode;
+    /**
+     * Height of the track in pixels.
+     * This prop is extracted by the parent ColorSlider and passed via context.
+     */
+    height?: number;
+}
+/**
+ * ColorSliderTrack - The track background of the color slider.
+ * Renders the gradient background based on slider type (hue, alpha, etc.)
+ * Can contain custom children for additional visual elements.
+ */
+declare function ColorSliderTrack(props: ColorSliderTrackProps): react_jsx_runtime.JSX.Element;
+declare namespace ColorSliderTrack {
+    var displayName: string;
+}
+
 interface ColorSliderProps {
     backgroundStyle?: CSSProperties;
+    children?: React.ReactNode;
     className?: string;
     disabled?: boolean;
     hue?: number;
@@ -461,14 +490,18 @@ interface ColorSliderProps {
     onChangeEnd?: () => void;
     onChangeStart?: () => void;
     position: number;
-    thumbSize?: number;
-    trackSize?: {
-        height?: number;
-        width?: number;
-    };
     type: PickerSliderType;
+    /**
+     * Width of the slider track in pixels.
+     * If not provided (undefined or false), the width will be auto-calculated from the container.
+     */
+    width?: number | boolean;
+}
+interface ColorSliderComponent extends React.MemoExoticComponent<React.ForwardRefExoticComponent<ColorSliderProps & React.RefAttributes<HTMLDivElement>>> {
+    Thumb: typeof ColorSliderThumb;
+    Track: typeof ColorSliderTrack;
 }
-declare const ColorSlider: react.MemoExoticComponent<react.ForwardRefExoticComponent<ColorSliderProps & react.RefAttributes<HTMLDivElement>>>;
+declare const ColorSlider: ColorSliderComponent;
 
 interface ColorSwatchProps extends Omit<HTMLProps<HTMLDivElement>, "color"> {
     alpha?: number;

package/dist/components/colors/src/color-image-paint/color-image-paint.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { Button } from "../../../button/dist/index.js";
-import { Range } from "../../../range/dist/index.js";
+import { Range as Range2 } from "../../../range/dist/index.js";
 import React__default, { memo, useState, useRef, useMemo, useEffect, useCallback } from "react";
 import { useEventCallback } from "usehooks-ts";
 import { ColorImageToolbar } from "./color-image-toolbar.js";
@@ -209,7 +209,7 @@ const ColorImagePaint = memo(function ColorImagePaint2(props) {
           return /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
             /* @__PURE__ */ jsx("span", { className: styles.adjustLabel(), children: (_a2 = features == null ? void 0 : features.labels) == null ? void 0 : _a2[filterName] }),
             /* @__PURE__ */ jsx(
-              Range,
+              Range2,
               {
                 min: -100,
                 max: 100,

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

@@ -43,6 +43,10 @@ interface CommandItemProps extends Omit<HTMLProps<HTMLDivElement>, "onSelect"> {
     keywords?: string[];
     onSelect?: (value: string) => void;
     prefixElement?: ReactNode;
+    /**
+     * When true, this item will be set as the selected item and scrolled into view.
+     */
+    selected?: boolean;
     shortcut?: {
         keys?: ReactNode;
         modifier?: KbdKey | KbdKey[] | undefined;
@@ -54,6 +58,9 @@ interface CommandItemProps extends Omit<HTMLProps<HTMLDivElement>, "onSelect"> {
 interface CommandListProps extends ScrollAreaProps {
     children: React.ReactNode;
     className?: string;
+    classNames?: {
+        content?: string;
+    };
     label?: string;
 }
 
@@ -106,6 +113,11 @@ interface CommandProps extends Omit<react__default.HTMLAttributes<HTMLDivElement
      * Event handler called when the selected item of the menu changes.
      */
     onChange?: (value: string) => void;
+    /**
+     * Optionally set to `true` to enable selection mode.
+     * When enabled, items with `selected` prop will be scrolled into view on mount.
+     */
+    selection?: boolean;
     /**
      * Optionally set to `false` to turn off the automatic filtering and sorting.
      * If `false`, you must conditionally render valid items based on the search query yourself.
@@ -140,6 +152,7 @@ type Context = {
     labelId: string;
     listId: string;
     listInnerRef: react__default.MutableRefObject<HTMLDivElement | null>;
+    selection?: boolean;
     size?: "default" | "large";
     store: Store;
     value: (id: string, value?: string, keywords?: string[]) => void;

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

@@ -7,6 +7,12 @@ interface DropdownProps {
      * @default true
      */
     autoSelectFirstItem?: boolean;
+    /**
+     * Whether to avoid collisions by flipping or shifting the dropdown position.
+     * When false, the dropdown will strictly follow the placement direction.
+     * @default true
+     */
+    avoidCollisions?: boolean;
     children?: React.ReactNode;
     disabledNested?: boolean;
     focusManagerProps?: Partial<FloatingFocusManagerProps>;

package/dist/components/dropdown/dist/index.js

@@ -13,6 +13,7 @@ var DropdownComponent = memo(function DropdownComponent2(props) {
   const {
     children,
     autoSelectFirstItem = true,
+    avoidCollisions = true,
     disabledNested = false,
     offset: offsetDistance = DEFAULT_OFFSET,
     placement = "bottom-start",
@@ -53,7 +54,7 @@ var DropdownComponent = memo(function DropdownComponent2(props) {
     }
     onOpenChange == null ? void 0 : onOpenChange(newOpen);
   });
-  const { nodeId, item, isNested } = useMenuTree({
+  const { nodeId, item, isNested, tree } = useMenuTree({
     disabledNested,
     handleOpenChange,
     isControlledOpen
@@ -77,11 +78,14 @@ var DropdownComponent = memo(function DropdownComponent2(props) {
     });
   });
   const lastPositionRef = useRef(null);
-  const middleware = useMemo(
-    () => [
-      offset({ mainAxis: isNested ? 10 : offsetDistance, alignmentAxis: isNested ? -4 : 0 }),
-      flip(),
-      shift(),
+  const middleware = useMemo(() => {
+    const baseMiddleware = [
+      offset({ mainAxis: isNested ? 10 : offsetDistance, alignmentAxis: isNested ? -4 : 0 })
+    ];
+    if (avoidCollisions) {
+      baseMiddleware.push(flip(), shift());
+    }
+    baseMiddleware.push(
       size({
         padding: 4,
         apply({ elements, availableHeight, rects }) {
@@ -104,9 +108,9 @@ var DropdownComponent = memo(function DropdownComponent2(props) {
           }
         }
       })
-    ],
-    [isNested, offsetDistance, matchTriggerWidth, scrollRef]
-  );
+    );
+    return baseMiddleware;
+  }, [isNested, offsetDistance, matchTriggerWidth, scrollRef, avoidCollisions]);
   const { refs, floatingStyles, context, isPositioned } = useFloating({
     nodeId,
     open: isControlledOpen,
@@ -165,11 +169,17 @@ var DropdownComponent = memo(function DropdownComponent2(props) {
     bubbles: true,
     escapeKey: true
   });
+  const handleNavigate = useEventCallback((index) => {
+    setActiveIndex(index);
+    if (tree && index !== null) {
+      tree.events.emit("navigate", { nodeId, index });
+    }
+  });
   const listNavigation = useListNavigation(context, {
     listRef: elementsRef,
     activeIndex,
     nested: isNested,
-    onNavigate: setActiveIndex,
+    onNavigate: handleNavigate,
     loop: true
   });
   const typeahead = useTypeahead(context, {

package/dist/components/emoji-picker/dist/index.d.ts

@@ -15,12 +15,24 @@ type VirtualItem = {
     emojis: EmojiData[];
     type: "emojis";
 };
+interface CategoryNames {
+    activities: string;
+    animalsNature: string;
+    flags: string;
+    foodDrink: string;
+    frequentlyUsed: string;
+    objects: string;
+    smileysPeople: string;
+    symbols: string;
+    travelPlaces: string;
+}
 interface UseEmojiDataProps {
+    categoryNames?: CategoryNames;
     columns: number;
     searchQuery: string;
     showFrequentlyUsed: boolean;
 }
-declare function useEmojiData({ searchQuery, columns, showFrequentlyUsed }: UseEmojiDataProps): {
+declare function useEmojiData({ searchQuery, columns, showFrequentlyUsed, categoryNames, }: UseEmojiDataProps): {
     categorizedData: VirtualItem[];
     categoryIndexMap: Map<EmojiCategory, number>;
     searchResults: {
@@ -52,6 +64,22 @@ interface EmojiPickerProps {
     showFooter?: boolean;
     value?: EmojiData | null;
     variant?: "default" | "dark" | "light";
+    i18n?: {
+        noEmojisFoundTitle?: string;
+        noEmojisFoundDescription?: string;
+        footerPickAnEmoji?: string;
+        categories?: {
+            frequentlyUsed: string;
+            smileysPeople: string;
+            animalsNature: string;
+            foodDrink: string;
+            travelPlaces: string;
+            activities: string;
+            objects: string;
+            symbols: string;
+            flags: string;
+        };
+    };
 }
 declare const EmojiPicker: React.NamedExoticComponent<EmojiPickerProps>;