@koobiq/react-components 0.0.1-beta.2 → 0.0.1-beta.20

package/dist/components/Alert/Alert.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { polymorphicForwardRef, mergeProps, clsx, isNotNil } from "@koobiq/react-core";
+import { polymorphicForwardRef, mergeProps, isNotNil, clsx } from "@koobiq/react-core";
 import { IconXmark16 } from "@koobiq/react-icons";
 import { useLocalizedStringFormatter } from "@koobiq/react-primitives";
 import s from "./Alert.module.css.js";
@@ -42,7 +42,7 @@ const Alert = polymorphicForwardRef(
       {
         "aria-label": stringFormatter.format("close"),
         variant: "fade-contrast",
-        onClick: onClose,
+        onPress: onClose,
         className: s.closeIcon
       },
       slotProps?.closeIcon

package/dist/components/Alert/components/AlertIcon/utils.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { IconInfoCircle16, IconCheck16, IconExclamationTriangle16, IconCheckCircle16 } from "@koobiq/react-icons";
+import { IconExclamationTriangle16, IconCheckCircle16, IconInfoCircle16, IconCheck16 } from "@koobiq/react-icons";
 const iconProps = {
   focusable: false,
   "aria-hidden": true

package/dist/components/Alert/intl.json.js

@@ -1,10 +1,6 @@
 const intlMessages = {
-  "ru-RU": {
-    close: "Закрыть"
-  },
-  "en-US": {
-    close: "Close"
-  }
+  "ru-RU": { "close": "Закрыть" },
+  "en-US": { "close": "Close" }
 };
 export {
   intlMessages as default

package/dist/components/Alert/types.d.ts

@@ -34,7 +34,7 @@ export type AlertBaseProps = {
     /** Override default icon. */
     icon?: ReactNode;
     /** A callback function called when the user clicks the alert's close button. */
-    onClose?: IconButtonProps['onClick'];
+    onClose?: IconButtonProps['onPress'];
     slotProps?: {
         content?: ComponentPropsWithRef<'div'>;
         statusIcon?: ComponentPropsWithRef<'div'>;

package/dist/components/AnimatedIcon/AnimatedIcon.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentPropsWithRef, ElementType } from 'react';
+import type { AnimatedIconBaseProps } from './index';
+export declare const AnimatedIcon: import("@koobiq/react-core").PolyForwardComponent<"span", AnimatedIconBaseProps, ElementType>;
+export type AnimatedIconProps<As extends ElementType = 'span'> = ComponentPropsWithRef<typeof AnimatedIcon<As>>;

package/dist/components/AnimatedIcon/AnimatedIcon.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { polymorphicForwardRef, useRefs, clsx } from "@koobiq/react-core";
+import { Transition } from "react-transition-group";
+import s from "./AnimatedIcon.module.css.js";
+const AnimatedIcon = polymorphicForwardRef((props, ref) => {
+  const {
+    transition = 300,
+    as: Tag = "span",
+    activeIndex = 0,
+    directions,
+    className,
+    icons = [],
+    style: styleProp,
+    ...other
+  } = props;
+  const refs = useRefs(icons.length);
+  const singleIcon = icons?.[0];
+  const innerRender = icons.length === 1 ? singleIcon : icons.map((icon, index) => /* @__PURE__ */ jsx(
+    Transition,
+    {
+      in: activeIndex === index,
+      timeout: transition,
+      nodeRef: refs[index],
+      unmountOnExit: true,
+      children: (transition2) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: s.icon,
+          "data-index": index,
+          ref: refs[index],
+          "data-transition": transition2,
+          children: icon
+        }
+      )
+    },
+    index
+  ));
+  const style = {
+    ...styleProp,
+    "--animated-icon-transition": `${transition}ms`,
+    ...typeof directions?.[activeIndex] === "number" && {
+      "--animated-icon-direction": `rotate(${directions[activeIndex]}deg)`
+    }
+  };
+  return /* @__PURE__ */ jsx(Tag, { ...other, className: clsx(s.base, className), style, ref, children: innerRender });
+});
+export {
+  AnimatedIcon
+};

package/dist/components/AnimatedIcon/AnimatedIcon.module.css.js

@@ -0,0 +1,11 @@
+const base = "kbq-animatedicon-61fd86";
+const icon = "kbq-animatedicon-icon-2feff8";
+const s = {
+  base,
+  icon
+};
+export {
+  base,
+  s as default,
+  icon
+};

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

@@ -0,0 +1,2 @@
+export * from './AnimatedIcon';
+export * from './types';

package/dist/components/AnimatedIcon/types.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentRef, CSSProperties, ReactNode } from 'react';
+export type AnimatedIconBaseProps = {
+    /** A list of icons. */
+    icons?: ReactNode[];
+    /** A list of directions for the icons. */
+    directions?: number[];
+    /**
+     * Animation duration in milliseconds.
+     * @default 300
+     * */
+    transition?: number;
+    /** Index of the active icon. */
+    activeIndex?: number;
+    /** Additional CSS-classes. */
+    className?: string;
+    /** Inline styles. */
+    style?: CSSProperties;
+};
+export type AnimatedIconRef = ComponentRef<'span'>;

package/dist/components/Button/Button.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { polymorphicForwardRef, clsx } from "@koobiq/react-core";
 import { Button as Button$1 } from "@koobiq/react-primitives";
 import s from "./Button.module.css.js";

package/dist/components/Button/Button.module.css.js

@@ -1,8 +1,8 @@
 const base = "kbq-button-d95067";
 const hovered = "kbq-button-hovered-037da3";
+const progress = "kbq-button-progress-f454f0";
 const pressed = "kbq-button-pressed-508d5d";
 const focusVisible = "kbq-button-focusVisible-e63c2b";
-const progress = "kbq-button-progress-f454f0";
 const disabled = "kbq-button-disabled-1df5f6";
 const fullWidth = "kbq-button-fullWidth-c149b8";
 const onlyIcon = "kbq-button-onlyIcon-e1268c";
@@ -12,9 +12,9 @@ const label = "kbq-button-label-9f6f6b";
 const s = {
   base,
   hovered,
+  progress,
   pressed,
   focusVisible,
-  progress,
   disabled,
   fullWidth,
   onlyIcon,

package/dist/components/Button/types.d.ts

@@ -1,9 +1,9 @@
 import type { ReactNode } from 'react';
-import type { ButtonOptions, HoverEvent } from '@koobiq/react-primitives';
+import type { ExtendableProps } from '@koobiq/react-core';
+import type { HoverEvent, UseButtonProps } from '@koobiq/react-primitives';
 export declare const buttonPropVariant: readonly ["contrast-filled", "contrast-transparent", "fade-contrast-filled", "fade-contrast-outline", "fade-theme-outline", "theme-transparent"];
 export type ButtonPropVariant = (typeof buttonPropVariant)[number];
-export type ButtonPropOnClick = ButtonOptions['onPress'];
-export type ButtonBaseProps = {
+export type ButtonBaseProps = ExtendableProps<{
     /** The content of the component. */
     children?: ReactNode;
     /**
@@ -43,5 +43,4 @@ export type ButtonBaseProps = {
     onHoverStart?: (e: HoverEvent) => void;
     /** Handler that is called when a hover interaction ends. */
     onHoverEnd?: (e: HoverEvent) => void;
-    onClick?: ButtonPropOnClick;
-};
+}, UseButtonProps>;

package/dist/components/ButtonToggleGroup/ButtonToggleGroup.d.ts

@@ -0,0 +1,2 @@
+import type { ButtonToggleGroupProps } from './types';
+export declare const ButtonToggleGroup: import("react").ForwardRefExoticComponent<Omit<ButtonToggleGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/ButtonToggleGroup/ButtonToggleGroup.js

@@ -0,0 +1,130 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef, useReducer, useEffect } from "react";
+import { once } from "@koobiq/logger";
+import { useDOMRef, mergeProps, clsx } from "@koobiq/react-core";
+import { useToggleGroupState, useToggleButtonGroup } from "@koobiq/react-primitives";
+import { Transition } from "react-transition-group";
+import s from "./ButtonToggleGroup.module.css.js";
+import { ButtonToggleGroupContext } from "./ButtonToggleGroupContext.js";
+import { animationReducer, initialAnimationState } from "./reducer.js";
+import { getSelectedToggleButton, getToggleButtonStyle } from "./utils.js";
+const MAX_ITEMS = 5;
+const ButtonToggleGroup = forwardRef((props, ref) => {
+  const {
+    isBlock = false,
+    isDisabled = false,
+    hasEqualItemSize = false,
+    style,
+    className,
+    slotProps,
+    defaultSelectedKey,
+    children,
+    selectedKey: selectedKeyProp,
+    onSelectionChange: onSelectionChangeProp,
+    ...other
+  } = props;
+  if (process.env.NODE_ENV !== "production" && children?.length && children?.length > MAX_ITEMS) {
+    once.warn(
+      `Use a ButtonToggleGroup to allow selection of up to ${MAX_ITEMS} options.`
+    );
+  }
+  const domRef = useDOMRef(ref);
+  const thumbRef = useRef(null);
+  const state = useToggleGroupState({
+    ...other,
+    isDisabled,
+    disallowEmptySelection: true,
+    onSelectionChange: (keys) => {
+      onSelectionChangeProp?.(Array.from(keys)[0]);
+    },
+    defaultSelectedKeys: defaultSelectedKey ? [defaultSelectedKey] : [],
+    ...!defaultSelectedKey && {
+      selectedKeys: selectedKeyProp ? [selectedKeyProp] : []
+    }
+  });
+  const { groupProps: groupPropsAria } = useToggleButtonGroup(
+    {},
+    state,
+    domRef
+  );
+  const previous = useRef(null);
+  const selectedKey = Array.from(state.selectedKeys)[0];
+  const [animatedState, dispatch] = useReducer(
+    animationReducer,
+    initialAnimationState
+  );
+  const { isAnimated, start, end, savedKey } = animatedState;
+  useEffect(() => {
+    const active = getSelectedToggleButton(domRef.current);
+    if (active && previous.current) {
+      dispatch({
+        type: "SET_ANIMATED",
+        payload: {
+          start: [previous.current.offsetLeft, previous.current.offsetWidth],
+          end: [active.offsetLeft, active.offsetWidth]
+        }
+      });
+    } else {
+      dispatch({ type: "SET_SAVED", payload: { savedKey: selectedKey } });
+    }
+    previous.current = active;
+  }, [selectedKey]);
+  useEffect(() => {
+    if (!selectedKey) dispatch({ type: "RESET" });
+  }, [selectedKey]);
+  const groupProps = mergeProps(
+    {
+      className: clsx(
+        s.base,
+        isBlock && s.block,
+        hasEqualItemSize && s.hasEqualItemSize,
+        className
+      ),
+      "data-block": isBlock,
+      "data-animated": isAnimated,
+      "data-equal-item-size": hasEqualItemSize,
+      ref: domRef,
+      style
+    },
+    other,
+    groupPropsAria
+  );
+  const thumbProps = mergeProps(
+    {
+      ref: thumbRef,
+      className: clsx(s.thumb),
+      style: getToggleButtonStyle(start, end)
+    },
+    slotProps?.thumb
+  );
+  const containerProps = mergeProps(
+    {
+      className: clsx(s.container)
+    },
+    slotProps?.container
+  );
+  return /* @__PURE__ */ jsx(ButtonToggleGroupContext.Provider, { value: { state, savedKey }, children: /* @__PURE__ */ jsxs("div", { ...groupProps, children: [
+    /* @__PURE__ */ jsx(
+      Transition,
+      {
+        in: isAnimated,
+        timeout: 200,
+        nodeRef: thumbRef,
+        exit: false,
+        onEntered: () => {
+          dispatch({ type: "SET_SAVED", payload: { savedKey: selectedKey } });
+        },
+        mountOnEnter: true,
+        unmountOnExit: true,
+        enter: true,
+        children: (transitionState) => /* @__PURE__ */ jsx("div", { ...thumbProps, "data-transition": transitionState })
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { ...containerProps, children })
+  ] }) });
+});
+ButtonToggleGroup.displayName = "ButtonToggleGroup";
+export {
+  ButtonToggleGroup
+};

package/dist/components/ButtonToggleGroup/ButtonToggleGroup.module.css.js

@@ -0,0 +1,17 @@
+const base = "kbq-buttontogglegroup-79a88d";
+const block = "kbq-buttontogglegroup-block-f9494f";
+const thumb = "kbq-buttontogglegroup-thumb-7ff4ae";
+const container = "kbq-buttontogglegroup-container-e48aaf";
+const s = {
+  base,
+  block,
+  thumb,
+  container
+};
+export {
+  base,
+  block,
+  container,
+  s as default,
+  thumb
+};

package/dist/components/ButtonToggleGroup/ButtonToggleGroupContext.d.ts

@@ -0,0 +1,7 @@
+import type { ToggleGroupState } from '@koobiq/react-primitives';
+export type ButtonToggleGroupContextProps = {
+    state: ToggleGroupState | null;
+    savedKey?: string | number;
+};
+export declare const ButtonToggleGroupContext: import("react").Context<ButtonToggleGroupContextProps>;
+export declare function useButtonToggleGroupContext(): ButtonToggleGroupContextProps;

package/dist/components/ButtonToggleGroup/ButtonToggleGroupContext.js

@@ -0,0 +1,12 @@
+"use client";
+import { createContext, useContext } from "react";
+const ButtonToggleGroupContext = createContext({
+  state: null
+});
+function useButtonToggleGroupContext() {
+  return useContext(ButtonToggleGroupContext);
+}
+export {
+  ButtonToggleGroupContext,
+  useButtonToggleGroupContext
+};

package/dist/components/ButtonToggleGroup/components/ButtonToggle/ButtonToggle.d.ts

@@ -0,0 +1,2 @@
+import type { ButtonToggleProps } from './types';
+export declare const ButtonToggle: import("react").ForwardRefExoticComponent<Omit<ButtonToggleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/ButtonToggleGroup/components/ButtonToggle/ButtonToggle.js

@@ -0,0 +1,90 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef } from "react";
+import { useDOMRef, useElementSize, useHover, useFocusRing, mergeProps, useMultiRef, clsx, isNotNil } from "@koobiq/react-core";
+import { useToggleButtonGroupItem } from "@koobiq/react-primitives";
+import { utilClasses } from "../../../../styles/utility.js";
+import { useButtonToggleGroupContext } from "../../ButtonToggleGroupContext.js";
+import s from "./ButtonToggle.module.css.js";
+import { Tooltip } from "../../../Tooltip/Tooltip.js";
+const textNormalMedium = utilClasses.typography["text-normal-medium"];
+const ButtonToggle = forwardRef(
+  (props, ref) => {
+    const {
+      isDisabled: isDisabledProp = false,
+      children,
+      id,
+      icon,
+      className,
+      slotProps,
+      ...other
+    } = props;
+    const domRef = useDOMRef(ref);
+    const contentRef = useRef(null);
+    const { state, savedKey } = useButtonToggleGroupContext();
+    const { ref: containerRef } = useElementSize();
+    const showTooltip = (contentRef.current?.scrollWidth || 0) > (contentRef.current?.clientWidth || 0);
+    const { buttonProps, isPressed, isSelected, isDisabled } = useToggleButtonGroupItem(
+      { id, isDisabled: isDisabledProp },
+      state,
+      domRef
+    );
+    const { hoverProps, isHovered } = useHover({ ...props, isDisabled });
+    const { focusProps, isFocusVisible } = useFocusRing({});
+    const iconProps = mergeProps({ className: s.icon }, slotProps?.icon);
+    return /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        delay: 300,
+        anchorRef: domRef,
+        disabled: !showTooltip,
+        ...slotProps?.tooltip,
+        control: ({ ref: controlRef, ...controlProps }) => {
+          const rootRef = useMultiRef([domRef, controlRef]);
+          const rootProps = mergeProps(
+            {
+              className: clsx(
+                s.base,
+                textNormalMedium,
+                isHovered && s.hovered,
+                isPressed && s.pressed,
+                savedKey === id && s.selected,
+                isDisabled && s.disabled,
+                isFocusVisible && s.focusVisible,
+                className
+              ),
+              "data-hovered": isHovered,
+              "data-pressed": isPressed,
+              "data-selected": isSelected,
+              "data-disabled": isDisabled,
+              "data-focus-visible": isFocusVisible,
+              ref: rootRef
+            },
+            controlProps,
+            focusProps,
+            hoverProps,
+            buttonProps,
+            other
+          );
+          const containerProps = mergeProps(
+            { className: s.container, ref: containerRef },
+            slotProps?.container
+          );
+          const contentProps = mergeProps(
+            { className: s.content, ref: contentRef },
+            slotProps?.content
+          );
+          return /* @__PURE__ */ jsx("button", { ...rootProps, children: /* @__PURE__ */ jsxs("span", { ...containerProps, children: [
+            isNotNil(icon) && /* @__PURE__ */ jsx("span", { ...iconProps, children: icon }),
+            isNotNil(children) && /* @__PURE__ */ jsx("span", { ...contentProps, children })
+          ] }) });
+        },
+        children
+      }
+    );
+  }
+);
+ButtonToggle.displayName = "ButtonToggle";
+export {
+  ButtonToggle
+};

package/dist/components/ButtonToggleGroup/components/ButtonToggle/ButtonToggle.module.css.js

@@ -0,0 +1,32 @@
+const base = "kbq-buttontoggle-caa007";
+const hovered = "kbq-buttontoggle-hovered-4706db";
+const pressed = "kbq-buttontoggle-pressed-6d5049";
+const selected = "kbq-buttontoggle-selected-3e6996";
+const disabled = "kbq-buttontoggle-disabled-c0d011";
+const focusVisible = "kbq-buttontoggle-focusVisible-37d5be";
+const container = "kbq-buttontoggle-container-f496bf";
+const icon = "kbq-buttontoggle-icon-668db0";
+const content = "kbq-buttontoggle-content-822c7d";
+const s = {
+  base,
+  hovered,
+  pressed,
+  selected,
+  disabled,
+  focusVisible,
+  container,
+  icon,
+  content
+};
+export {
+  base,
+  container,
+  content,
+  s as default,
+  disabled,
+  focusVisible,
+  hovered,
+  icon,
+  pressed,
+  selected
+};

package/dist/components/ButtonToggleGroup/components/ButtonToggle/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ButtonToggle';
+export * from './types';

package/dist/components/ButtonToggleGroup/components/ButtonToggle/types.d.ts

@@ -0,0 +1,27 @@
+import type { ComponentPropsWithRef, ComponentRef, ReactNode } from 'react';
+import type { DataAttributeProps, ExtendableComponentPropsWithRef } from '@koobiq/react-core';
+import type { TooltipProps } from '../../../Tooltip';
+export type ButtonToggleKey = string | number;
+export type ButtonToggleProps = ExtendableComponentPropsWithRef<{
+    /** An identifier for the item in the selectedKey of a ButtonToggleGroup. */
+    id: ButtonToggleKey;
+    /** Icon placed before the children. */
+    icon?: ReactNode;
+    /**
+     * If `true`, the component is disabled.
+     * @default false
+     * */
+    isDisabled?: boolean;
+    /** Additional CSS-classes. */
+    className?: string;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        tooltip?: TooltipProps;
+        icon?: ComponentPropsWithRef<'span'> & DataAttributeProps;
+        content?: ComponentPropsWithRef<'span'> & DataAttributeProps;
+        container?: ComponentPropsWithRef<'span'> & DataAttributeProps;
+    };
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
+}, 'div'>;
+export type ButtonToggleRef = ComponentRef<'button'>;

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

@@ -0,0 +1 @@
+export * from './ButtonToggle';

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

@@ -0,0 +1,3 @@
+export * from './ButtonToggleGroup';
+export * from './components';
+export * from './types';

package/dist/components/ButtonToggleGroup/reducer.d.ts

@@ -0,0 +1,23 @@
+export type AnimationStateType = {
+    isAnimated?: boolean;
+    start?: [number, number];
+    end?: [number, number];
+    savedKey?: string | number;
+};
+type AnimationAction = {
+    type: 'SET_ANIMATED';
+    payload: {
+        start: [number, number];
+        end: [number, number];
+    };
+} | {
+    type: 'SET_SAVED';
+    payload: {
+        savedKey?: string | number;
+    };
+} | {
+    type: 'RESET';
+};
+export declare const initialAnimationState: AnimationStateType;
+export declare function animationReducer(state: AnimationStateType, action: AnimationAction): AnimationStateType;
+export {};

package/dist/components/ButtonToggleGroup/reducer.js

@@ -0,0 +1,25 @@
+"use client";
+const initialAnimationState = {};
+function animationReducer(state, action) {
+  switch (action.type) {
+    case "SET_ANIMATED":
+      return {
+        isAnimated: true,
+        start: action.payload.start,
+        end: action.payload.end
+      };
+    case "SET_SAVED":
+      return {
+        isAnimated: false,
+        savedKey: action.payload.savedKey
+      };
+    case "RESET":
+      return {};
+    default:
+      return state;
+  }
+}
+export {
+  animationReducer,
+  initialAnimationState
+};

package/dist/components/ButtonToggleGroup/types.d.ts

@@ -0,0 +1,38 @@
+import type { ComponentPropsWithRef, ComponentRef, ReactElement } from 'react';
+import type { DataAttributeProps, ExtendableComponentPropsWithRef } from '@koobiq/react-core';
+import type { ButtonToggleProps } from './components';
+export type ButtonToggleGroupKey = string | number;
+export type ButtonToggleGroupBaseProps = {
+    /**
+     * Whether all items are disabled.
+     * @default false
+     * */
+    isDisabled?: boolean;
+    /**
+     * If `true`, the button will take up the full width of its container.
+     * @default false
+     * */
+    isBlock?: boolean;
+    /** The contents of the collection. */
+    children?: Array<ReactElement<ButtonToggleProps>>;
+    /**
+     * If `true`, each item's width will be equal.
+     * @default false
+     * */
+    hasEqualItemSize?: boolean;
+    /** The currently selected key in the collection (controlled). */
+    selectedKey?: ButtonToggleGroupKey;
+    /** The initial selected key in the collection (uncontrolled). */
+    defaultSelectedKey?: ButtonToggleGroupKey;
+    /** Handler that is called when the selection changes. */
+    onSelectionChange?: (keys: ButtonToggleGroupKey) => void;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        thumb?: ComponentPropsWithRef<'div'> & DataAttributeProps;
+        container?: ComponentPropsWithRef<'div'> & DataAttributeProps;
+    };
+};
+export type ButtonToggleGroupProps = ExtendableComponentPropsWithRef<ButtonToggleGroupBaseProps, 'div'>;
+export type ButtonToggleGroupRef = ComponentRef<'div'>;

package/dist/components/ButtonToggleGroup/utils.d.ts

@@ -0,0 +1,3 @@
+import type { CSSProperties } from 'react';
+export declare function getToggleButtonStyle(start?: [number, number], end?: [number, number]): CSSProperties;
+export declare function getSelectedToggleButton(root: HTMLElement | null): HTMLElement | null;

package/dist/components/ButtonToggleGroup/utils.js

@@ -0,0 +1,19 @@
+function getToggleButtonStyle(start = [0, 0], end = [0, 0]) {
+  const [startX, startSize] = start;
+  const [endX, endSize] = end;
+  return {
+    "--thumb-inline-size-start": `${startSize}px`,
+    "--thumb-inline-size-end": `${endSize}px`,
+    "--thumb-transform-start": `translateX(${startX}px)`,
+    "--thumb-transform-end": `translateX(${endX}px)`
+  };
+}
+function getSelectedToggleButton(root) {
+  return root ? root.querySelector(
+    '[role="radio"][data-selected="true"] > span'
+  ) : null;
+}
+export {
+  getSelectedToggleButton,
+  getToggleButtonStyle
+};