@choice-ui/react 1.8.7 → 1.8.9

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/checkbox/src/checkbox-icon.d.ts

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

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

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

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

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

package/dist/components/checkbox/src/checkbox.js

@@ -1,7 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Indeterminate, Check } from "@choiceform/icons-react";
-import { memo, forwardRef, useId } from "react";
+import { memo, forwardRef, useId, Children, isValidElement } from "react";
 import { useEventCallback } from "usehooks-ts";
+import { CheckboxIcon } from "./checkbox-icon.js";
 import { CheckboxLabel } from "./checkbox-label.js";
 import { CheckboxContext } from "./context.js";
 import { checkboxTv } from "./tv.js";
@@ -45,12 +46,23 @@ const CheckboxBase = forwardRef(function Checkbox2(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,
     {
@@ -84,7 +96,7 @@ const CheckboxBase = forwardRef(function Checkbox2(props, ref) {
               ...rest
             }
           ),
-          /* @__PURE__ */ jsx("div", { className: tv.box(), children: mixed ? /* @__PURE__ */ jsx(Indeterminate, {}) : value ? /* @__PURE__ */ jsx(Check, {}) : null })
+          iconChild ?? renderDefaultIcon()
         ] }),
         renderChildren()
       ] })
@@ -93,6 +105,7 @@ const CheckboxBase = forwardRef(function Checkbox2(props, ref) {
 });
 const MemoizedCheckbox = memo(CheckboxBase);
 const Checkbox = MemoizedCheckbox;
+Checkbox.Icon = CheckboxIcon;
 Checkbox.Label = CheckboxLabel;
 Checkbox.displayName = "Checkbox";
 export {

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

@@ -1,2 +1,4 @@
 export { Checkbox } from './checkbox';
 export type { CheckboxProps } from './checkbox';
+export type { CheckboxIconProps } from './checkbox-icon';
+export type { CheckboxLabelProps } from './checkbox-label';

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,12 +209,12 @@ 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,
                 defaultValue: 0,
-                trackSize: { width: 128 },
+                width: 128,
                 value: filters[filterName],
                 onChange: (value) => setFilters({
                   ...filters,

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",
@@ -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,

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