@choice-ui/react 1.4.3 → 1.4.6

package/dist/components/text-field/src/components/field-addon.d.ts

@@ -1,8 +1,7 @@
 import { HTMLProps, ReactNode } from 'react';
-interface FieldAddonProps extends HTMLProps<HTMLDivElement> {
+export interface FieldAddonProps extends HTMLProps<HTMLDivElement> {
     children?: ReactNode;
     className?: string;
     placement?: "prefix" | "suffix";
 }
 export declare const FieldAddon: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<Omit<FieldAddonProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>>;
-export {};

package/dist/components/text-field/src/index.d.ts

@@ -1 +1,3 @@
-export * from './text-field';
+export { TextField } from './text-field';
+export type { TextFieldProps } from './text-field';
+export type { FieldAddonProps } from './components';

package/dist/components/text-field/src/text-field.js

@@ -11,23 +11,23 @@ const TextFieldContent = ({
   prefixNode,
   suffixNode,
   inputProps,
-  styles,
+  tv,
   inputRef
-}) => /* @__PURE__ */ jsxs("div", { className: tcx(styles.root(), className), children: [
+}) => /* @__PURE__ */ jsxs("div", { className: tcx(tv.root(), className), children: [
   prefixNode && cloneElement(prefixNode, {
-    className: tcx(styles.prefix(), prefixNode.props.className)
+    className: tcx(tv.prefix(), prefixNode.props.className)
   }),
   /* @__PURE__ */ jsx(
     Input,
     {
       ref: inputRef,
       variant: "reset",
-      className: styles.input(),
+      className: tv.input(),
       ...inputProps
     }
   ),
   suffixNode && cloneElement(suffixNode, {
-    className: tcx(styles.suffix(), suffixNode.props.className)
+    className: tcx(tv.suffix(), suffixNode.props.className)
   })
 ] });
 const TextFieldBase = forwardRef((props, ref) => {
@@ -49,7 +49,7 @@ const TextFieldBase = forwardRef((props, ref) => {
   const suffixNode = suffixElements[0] || null;
   const labelNode = labelElements[0] || null;
   const descriptionNode = descriptionElements[0] || null;
-  const styles = TextFieldTv({
+  const tv = TextFieldTv({
     variant,
     size,
     hasPrefix: !!prefixNode,
@@ -59,7 +59,7 @@ const TextFieldBase = forwardRef((props, ref) => {
   });
   const generatedId = useId();
   const uuid = props.id ?? generatedId;
-  return labelNode || descriptionNode ? /* @__PURE__ */ jsxs("div", { className: tcx(styles.container(), className), children: [
+  return labelNode || descriptionNode ? /* @__PURE__ */ jsxs("div", { className: tcx(tv.container(), className), children: [
     labelNode && cloneElement(labelNode, {
       variant,
       disabled,
@@ -71,13 +71,13 @@ const TextFieldBase = forwardRef((props, ref) => {
         className,
         prefixNode,
         suffixNode,
-        styles,
+        tv,
         inputRef: ref,
         inputProps: { ...rest, id: uuid, size, disabled }
       }
     ),
     descriptionNode && cloneElement(descriptionNode, {
-      className: tcx(styles.description(), descriptionNode.props.className)
+      className: tcx(tv.description(), descriptionNode.props.className)
     })
   ] }) : /* @__PURE__ */ jsx(
     TextFieldContent,
@@ -85,7 +85,7 @@ const TextFieldBase = forwardRef((props, ref) => {
       className,
       prefixNode,
       suffixNode,
-      styles,
+      tv,
       inputRef: ref,
       inputProps: { ...rest, id: uuid, size, disabled }
     }

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

@@ -2,32 +2,60 @@ import { HTMLProps, ReactNode, TextareaHTMLAttributes, HTMLAttributes } from 're
 import * as react from 'react';
 
 interface TextareaProps extends Omit<HTMLProps<HTMLTextAreaElement>, "value" | "onChange" | "size"> {
-    /** Whether to allow newline characters when pressing Enter. Default is true */
+    /** Whether to allow newline characters when pressing Enter.
+     * @default true
+     */
     allowNewline?: boolean;
     children?: ReactNode;
     className?: string;
     contentRef?: React.RefObject<HTMLDivElement>;
+    /** Focus selection mode.
+     * @default "all"
+     */
     focusSelection?: "all" | "end" | "none";
-    /** Line height in pixels for calculating textarea height. Default is 16 */
+    /** Line height in pixels for calculating textarea height.
+     * @default 16
+     */
     lineHeight?: number;
+    /** Maximum number of rows.
+     * @default undefined (no maximum)
+     */
     maxRows?: number;
+    /** Minimum number of rows.
+     * @default 3
+     */
     minRows?: number;
     onChange?: (value: string) => void;
     onIsEditingChange?: (isEditing: boolean) => void;
-    /** Padding in pixels (top/bottom) for calculating textarea height. Default is 4 (py-1) */
+    /** Padding in pixels (top/bottom) for calculating textarea height.
+     * @default 4 (py-1)
+     */
     padding?: number;
+    /** Resize behavior mode.
+     * @default "auto"
+     */
     resize?: "auto" | "handle" | false;
     scrollRef?: React.RefObject<HTMLDivElement>;
     selected?: boolean;
     value?: string;
+    /** Visual style variant of the textarea.
+     * @default "default"
+     */
     variant?: "default" | "light" | "dark" | "reset";
 }
 interface TextareaContentProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange" | "style"> {
-    cacheMeasurements?: boolean;
     className?: string;
-    /** 防抖延迟（毫秒），默认为 0（无防抖） */
+    /** Debounce delay (ms).
+     * @default 0 (no debounce)
+     */
     debounceMs?: number;
+    /** Maximum number of rows.
+     * @default undefined (no maximum)
+     */
     maxRows?: number;
+    /** Minimum number of rows.
+     * @default 3
+     */
     minRows?: number;
     onChange?: (value: string) => void;
     onHeightChange?: (height: number, meta: {

package/dist/components/textarea/dist/index.js

@@ -286,6 +286,24 @@ var useFontsLoadedListener = (listener) => {
     safeListener
   );
 };
+function parsePx(value) {
+  if (typeof value === "number" && Number.isFinite(value)) return value;
+  if (typeof value !== "string") return void 0;
+  const trimmed = value.trim();
+  if (!trimmed.endsWith("px")) return void 0;
+  const num = Number(trimmed.slice(0, -2));
+  return Number.isFinite(num) ? num : void 0;
+}
+function estimateMinHeightPx(style, minRows) {
+  const row = parsePx(style == null ? void 0 : style.lineHeight) ?? 20;
+  const padding = parsePx(style == null ? void 0 : style.padding);
+  if (padding !== void 0) {
+    return Math.max(0, Math.ceil(row * minRows + padding * 2));
+  }
+  const pt = parsePx(style == null ? void 0 : style.paddingTop) ?? 0;
+  const pb = parsePx(style == null ? void 0 : style.paddingBottom) ?? 0;
+  return Math.max(0, Math.ceil(row * minRows + pt + pb));
+}
 function useDebounce(func, delay) {
   const timeoutRef = useRef();
   const funcRef = useRef(func);
@@ -425,15 +443,22 @@ var TextareaAutosize = forwardRef(
       resizeTextarea();
     }, [style == null ? void 0 : style.lineHeight, style == null ? void 0 : style.padding, resizeTextarea]);
     const mergedStyle = useMemo(() => {
-      if (!isBrowser) {
-        const estimatedRowHeight = 20;
-        const estimatedHeight = estimatedRowHeight * normalizedMinRows;
+      const minHeightPx = estimateMinHeightPx(style, normalizedMinRows);
+      const nextStyle = {
+        ...style ?? {},
+        minHeight: `${minHeightPx}px`
+      };
+      if (nextStyle.padding !== void 0) {
+        const { padding, ...rest } = nextStyle;
         return {
-          ...style,
-          minHeight: `${estimatedHeight}px`
+          ...rest,
+          paddingTop: padding,
+          paddingRight: padding,
+          paddingBottom: padding,
+          paddingLeft: padding
         };
       }
-      return style;
+      return nextStyle;
     }, [style, normalizedMinRows]);
     return /* @__PURE__ */ jsx(
       "textarea",
@@ -718,7 +743,7 @@ var TextareaBase = forwardRef(
         ...baseTextareaProps,
         minRows,
         maxRows: void 0,
-        // 在 ScrollArea 中不限制 maxRows
+        // Do not constrain maxRows inside ScrollArea
         style: {
           lineHeight: `${lineHeight}px`,
           padding: `${padding}px`

package/dist/components/textarea/src/components/autosize/index.d.ts

@@ -2,13 +2,18 @@ import { default as React } from 'react';
 type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
 type Style = Omit<NonNullable<TextareaProps["style"]>, "maxHeight" | "minHeight"> & {
     height?: number;
+    /**
+     * To keep SSR/CSR consistent and stabilize the first paint, allow minHeight to be estimated internally.
+     * Note: the final height is still controlled by the autosize logic via `height`.
+     */
+    minHeight?: string | number;
 };
 export type TextareaHeightChangeMeta = {
     rowHeight: number;
 };
 export interface TextareaAutosizeProps extends Omit<TextareaProps, "style"> {
     cacheMeasurements?: boolean;
-    /** 防抖延迟（毫秒），默认为 0（无防抖） */
+    /** Debounce delay (ms). Defaults to 0 (no debounce). */
     debounceMs?: number;
     maxRows?: number;
     minRows?: number;

package/dist/components/textarea/src/components/autosize/index.js

@@ -5,6 +5,24 @@ import calculateNodeHeight from "./calculate-node-height.js";
 import getSizingData from "./get-sizing-data.js";
 import { useComposedRef, useFormResetListener, useWindowResizeListener, useFontsLoadedListener } from "./hooks.js";
 import { useIsomorphicLayoutEffect } from "usehooks-ts";
+function parsePx(value) {
+  if (typeof value === "number" && Number.isFinite(value)) return value;
+  if (typeof value !== "string") return void 0;
+  const trimmed = value.trim();
+  if (!trimmed.endsWith("px")) return void 0;
+  const num = Number(trimmed.slice(0, -2));
+  return Number.isFinite(num) ? num : void 0;
+}
+function estimateMinHeightPx(style, minRows) {
+  const row = parsePx(style == null ? void 0 : style.lineHeight) ?? 20;
+  const padding = parsePx(style == null ? void 0 : style.padding);
+  if (padding !== void 0) {
+    return Math.max(0, Math.ceil(row * minRows + padding * 2));
+  }
+  const pt = parsePx(style == null ? void 0 : style.paddingTop) ?? 0;
+  const pb = parsePx(style == null ? void 0 : style.paddingBottom) ?? 0;
+  return Math.max(0, Math.ceil(row * minRows + pt + pb));
+}
 function useDebounce(func, delay) {
   const timeoutRef = useRef();
   const funcRef = useRef(func);
@@ -144,15 +162,22 @@ const TextareaAutosize = forwardRef(
       resizeTextarea();
     }, [style == null ? void 0 : style.lineHeight, style == null ? void 0 : style.padding, resizeTextarea]);
     const mergedStyle = useMemo(() => {
-      if (!isBrowser) {
-        const estimatedRowHeight = 20;
-        const estimatedHeight = estimatedRowHeight * normalizedMinRows;
+      const minHeightPx = estimateMinHeightPx(style, normalizedMinRows);
+      const nextStyle = {
+        ...style ?? {},
+        minHeight: `${minHeightPx}px`
+      };
+      if (nextStyle.padding !== void 0) {
+        const { padding, ...rest } = nextStyle;
         return {
-          ...style,
-          minHeight: `${estimatedHeight}px`
+          ...rest,
+          paddingTop: padding,
+          paddingRight: padding,
+          paddingBottom: padding,
+          paddingLeft: padding
         };
       }
-      return style;
+      return nextStyle;
     }, [style, normalizedMinRows]);
     return /* @__PURE__ */ jsx(
       "textarea",

package/dist/components/textarea/src/textarea.js

@@ -131,7 +131,7 @@ const TextareaBase = forwardRef(
         ...baseTextareaProps,
         minRows,
         maxRows: void 0,
-        // 在 ScrollArea 中不限制 maxRows
+        // Do not constrain maxRows inside ScrollArea
         style: {
           lineHeight: `${lineHeight}px`,
           padding: `${padding}px`

package/dist/components/textarea/src/types.d.ts

@@ -1,31 +1,59 @@
 import { HTMLProps, ReactNode, TextareaHTMLAttributes } from 'react';
 export interface TextareaProps extends Omit<HTMLProps<HTMLTextAreaElement>, "value" | "onChange" | "size"> {
-    /** Whether to allow newline characters when pressing Enter. Default is true */
+    /** Whether to allow newline characters when pressing Enter.
+     * @default true
+     */
     allowNewline?: boolean;
     children?: ReactNode;
     className?: string;
     contentRef?: React.RefObject<HTMLDivElement>;
+    /** Focus selection mode.
+     * @default "all"
+     */
     focusSelection?: "all" | "end" | "none";
-    /** Line height in pixels for calculating textarea height. Default is 16 */
+    /** Line height in pixels for calculating textarea height.
+     * @default 16
+     */
     lineHeight?: number;
+    /** Maximum number of rows.
+     * @default undefined (no maximum)
+     */
     maxRows?: number;
+    /** Minimum number of rows.
+     * @default 3
+     */
     minRows?: number;
     onChange?: (value: string) => void;
     onIsEditingChange?: (isEditing: boolean) => void;
-    /** Padding in pixels (top/bottom) for calculating textarea height. Default is 4 (py-1) */
+    /** Padding in pixels (top/bottom) for calculating textarea height.
+     * @default 4 (py-1)
+     */
     padding?: number;
+    /** Resize behavior mode.
+     * @default "auto"
+     */
     resize?: "auto" | "handle" | false;
     scrollRef?: React.RefObject<HTMLDivElement>;
     selected?: boolean;
     value?: string;
+    /** Visual style variant of the textarea.
+     * @default "default"
+     */
     variant?: "default" | "light" | "dark" | "reset";
 }
 export interface TextareaContentProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange" | "style"> {
-    cacheMeasurements?: boolean;
     className?: string;
-    /** 防抖延迟（毫秒），默认为 0（无防抖） */
+    /** Debounce delay (ms).
+     * @default 0 (no debounce)
+     */
     debounceMs?: number;
+    /** Maximum number of rows.
+     * @default undefined (no maximum)
+     */
     maxRows?: number;
+    /** Minimum number of rows.
+     * @default 3
+     */
     minRows?: number;
     onChange?: (value: string) => void;
     onHeightChange?: (height: number, meta: {

package/dist/components/toggle-button/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { HTMLProps } from 'react';
+import { HTMLProps, ReactNode } from 'react';
 import { TooltipProps } from '../../tooltip/src';
 import * as react from 'react';
 
@@ -18,4 +18,28 @@ interface ToggleButtonProps extends Omit<HTMLProps<HTMLInputElement>, "value" |
 }
 declare const ToggleButton: react.ForwardRefExoticComponent<Omit<ToggleButtonProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
 
-export { ToggleButton, type ToggleButtonProps };
+interface ToggleGroupProps extends Omit<HTMLProps<HTMLDivElement>, "value" | "onChange" | "defaultValue"> {
+    children?: ReactNode;
+    defaultValue?: string[];
+    disabled?: boolean;
+    loopFocus?: boolean;
+    multiple?: boolean;
+    onChange?: (value: string[]) => void;
+    orientation?: "horizontal" | "vertical";
+    readOnly?: boolean;
+    value?: string[];
+}
+type ToggleGroupItemProps = Omit<ToggleButtonProps, "value" | "onChange"> & {
+    value: string;
+};
+declare const ToggleGroupItem: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<ToggleGroupItemProps, "ref"> & react.RefAttributes<HTMLInputElement>>>;
+interface ToggleGroupType {
+    (props: ToggleGroupProps & {
+        ref?: React.Ref<HTMLDivElement>;
+    }): JSX.Element;
+    Item: typeof ToggleGroupItem;
+    displayName?: string;
+}
+declare const ToggleGroup: ToggleGroupType;
+
+export { ToggleButton, type ToggleButtonProps, ToggleGroup, type ToggleGroupProps };

package/dist/components/toggle-button/src/context.d.ts

@@ -0,0 +1,11 @@
+export interface ToggleGroupContextType {
+    disabled?: boolean;
+    multiple?: boolean;
+    orientation?: "horizontal" | "vertical";
+    loopFocus?: boolean;
+    value: string[];
+    onChange: (value: string[]) => void;
+    readOnly?: boolean;
+}
+export declare const ToggleGroupContext: import('react').Context<ToggleGroupContextType | null>;
+export declare function useToggleGroupContext(): ToggleGroupContextType;

package/dist/components/toggle-button/src/context.js

@@ -0,0 +1,13 @@
+import { createContext, useContext } from "react";
+const ToggleGroupContext = createContext(null);
+function useToggleGroupContext() {
+  const context = useContext(ToggleGroupContext);
+  if (!context) {
+    throw new Error("ToggleButton must be used within a ToggleGroup");
+  }
+  return context;
+}
+export {
+  ToggleGroupContext,
+  useToggleGroupContext
+};

package/dist/components/toggle-button/src/index.d.ts

@@ -1,2 +1,4 @@
 export { ToggleButton } from './toggle-button';
 export type { ToggleButtonProps } from './toggle-button';
+export { ToggleGroup } from './toggle-group';
+export type { ToggleGroupProps } from './toggle-group';

package/dist/components/toggle-button/src/toggle-button.js

@@ -26,7 +26,7 @@ const ToggleButton = forwardRef(
     } = props;
     const id = useId();
     const descriptionId = useId();
-    const styles = toggleButtonTv({
+    const tv = toggleButtonTv({
       checked: value,
       disabled,
       variant,
@@ -38,7 +38,7 @@ const ToggleButton = forwardRef(
     const button = /* @__PURE__ */ jsxs(
       "div",
       {
-        className: tcx(styles.root(), className),
+        className: tcx(tv.root(), className),
         role: "presentation",
         onContextMenu,
         children: [
@@ -48,7 +48,7 @@ const ToggleButton = forwardRef(
             {
               ref,
               id,
-              className: styles.input(),
+              className: tv.input(),
               tabIndex: 0,
               type: "checkbox",
               checked: value,
@@ -70,7 +70,7 @@ const ToggleButton = forwardRef(
             {
               htmlFor: id,
               id: descriptionId,
-              className: styles.label(),
+              className: tv.label(),
               onMouseDown: (e) => {
                 if (readOnly) return;
                 if (event === "mousedown") {

package/dist/components/toggle-button/src/toggle-group.d.ts

@@ -0,0 +1,26 @@
+import { HTMLProps, ReactNode } from 'react';
+import { ToggleButtonProps } from './toggle-button';
+export interface ToggleGroupProps extends Omit<HTMLProps<HTMLDivElement>, "value" | "onChange" | "defaultValue"> {
+    children?: ReactNode;
+    defaultValue?: string[];
+    disabled?: boolean;
+    loopFocus?: boolean;
+    multiple?: boolean;
+    onChange?: (value: string[]) => void;
+    orientation?: "horizontal" | "vertical";
+    readOnly?: boolean;
+    value?: string[];
+}
+type ToggleGroupItemProps = Omit<ToggleButtonProps, "value" | "onChange"> & {
+    value: string;
+};
+declare const ToggleGroupItem: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<Omit<ToggleGroupItemProps, "ref"> & import('react').RefAttributes<HTMLInputElement>>>;
+interface ToggleGroupType {
+    (props: ToggleGroupProps & {
+        ref?: React.Ref<HTMLDivElement>;
+    }): JSX.Element;
+    Item: typeof ToggleGroupItem;
+    displayName?: string;
+}
+export declare const ToggleGroup: ToggleGroupType;
+export {};

package/dist/components/toggle-button/src/toggle-group.js

@@ -0,0 +1,156 @@
+import { jsx } from "react/jsx-runtime";
+import { memo, forwardRef, useState, useMemo, useRef, useCallback } from "react";
+import { useEventCallback } from "usehooks-ts";
+import { ToggleGroupContext, useToggleGroupContext } from "./context.js";
+import { ToggleButton } from "./toggle-button.js";
+import { toggleGroupTv } from "./tv.js";
+import { tcx } from "../../../shared/utils/tcx/tcx.js";
+const ToggleGroupItem = memo(
+  forwardRef(function ToggleGroupItem2(props, ref) {
+    const { value: itemValue, className, disabled, children, ...rest } = props;
+    const {
+      value: groupValue,
+      onChange,
+      disabled: groupDisabled,
+      readOnly: groupReadOnly,
+      multiple
+    } = useToggleGroupContext();
+    const isPressed = multiple ? groupValue.includes(itemValue) : groupValue[0] === itemValue;
+    const handleChange = useEventCallback((checked) => {
+      if (groupReadOnly) return;
+      if (multiple) {
+        const newValue = checked ? [...groupValue, itemValue] : groupValue.filter((v) => v !== itemValue);
+        onChange(newValue);
+      } else {
+        onChange(checked ? [itemValue] : []);
+      }
+    });
+    return /* @__PURE__ */ jsx(
+      ToggleButton,
+      {
+        value: isPressed,
+        active: isPressed,
+        disabled: disabled || groupDisabled,
+        readOnly: groupReadOnly,
+        onChange: handleChange,
+        className,
+        ...rest,
+        ref,
+        children
+      }
+    );
+  })
+);
+ToggleGroupItem.displayName = "ToggleGroup.Item";
+const ToggleGroupBase = forwardRef(
+  function ToggleGroup2(props, ref) {
+    const {
+      className,
+      children,
+      defaultValue,
+      value: controlledValue,
+      onChange,
+      disabled = false,
+      readOnly = false,
+      multiple = false,
+      orientation = "horizontal",
+      loopFocus = true,
+      ...rest
+    } = props;
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue || []);
+    const isControlled = controlledValue !== void 0;
+    const value = isControlled ? controlledValue : uncontrolledValue;
+    const handleChange = useEventCallback((newValue) => {
+      if (readOnly) return;
+      if (!isControlled) {
+        setUncontrolledValue(newValue);
+      }
+      onChange == null ? void 0 : onChange(newValue);
+    });
+    const contextValue = useMemo(
+      () => ({
+        value,
+        onChange: handleChange,
+        disabled,
+        readOnly,
+        multiple,
+        orientation,
+        loopFocus
+      }),
+      [value, handleChange, disabled, readOnly, multiple, orientation, loopFocus]
+    );
+    const containerRef = useRef(null);
+    const getItems = useCallback(() => {
+      if (!containerRef.current) return [];
+      return Array.from(
+        containerRef.current.querySelectorAll('input[type="checkbox"]')
+      );
+    }, []);
+    const handleKeyDown = useEventCallback((e) => {
+      var _a;
+      if (readOnly || disabled) return;
+      const items = getItems();
+      if (items.length === 0) return;
+      const currentIndex = items.findIndex((item) => item === document.activeElement);
+      if (currentIndex === -1) return;
+      let nextIndex = currentIndex;
+      if (orientation === "horizontal") {
+        if (e.key === "ArrowLeft") {
+          nextIndex = currentIndex > 0 ? currentIndex - 1 : loopFocus ? items.length - 1 : currentIndex;
+          e.preventDefault();
+        } else if (e.key === "ArrowRight") {
+          nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : loopFocus ? 0 : currentIndex;
+          e.preventDefault();
+        }
+      } else {
+        if (e.key === "ArrowUp") {
+          nextIndex = currentIndex > 0 ? currentIndex - 1 : loopFocus ? items.length - 1 : currentIndex;
+          e.preventDefault();
+        } else if (e.key === "ArrowDown") {
+          nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : loopFocus ? 0 : currentIndex;
+          e.preventDefault();
+        }
+      }
+      if (nextIndex !== currentIndex) {
+        (_a = items[nextIndex]) == null ? void 0 : _a.focus();
+      }
+    });
+    const tv = toggleGroupTv({
+      orientation,
+      disabled,
+      multiple
+    });
+    const setRefs = useCallback(
+      (node) => {
+        containerRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref && "current" in ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
+    return /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: setRefs,
+        className: tcx(tv.root(), className),
+        role: "group",
+        "data-orientation": orientation,
+        "data-disabled": disabled ? "" : void 0,
+        "data-multiple": multiple ? "" : void 0,
+        onKeyDown: handleKeyDown,
+        ...rest,
+        children
+      }
+    ) });
+  }
+);
+const MemoizedToggleGroup = memo(ToggleGroupBase);
+const ToggleGroup = MemoizedToggleGroup;
+ToggleGroup.Item = ToggleGroupItem;
+ToggleGroup.displayName = "ToggleGroup";
+export {
+  ToggleGroup
+};