@koobiq/react-components 0.0.1-beta.17 → 0.0.1-beta.19

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

package/dist/components/index.d.ts

@@ -27,4 +27,5 @@ export * from './AnimatedIcon';
 export * from './Select';
 export * from './Divider';
 export * from './Menu';
+export * from './ButtonToggleGroup';
 export * from './layout';

package/dist/index.js

@@ -65,6 +65,8 @@ import { Divider } from "./components/Divider/Divider.js";
 import { dividerPropDisplay, dividerPropOrientation } from "./components/Divider/types.js";
 import { Menu } from "./components/Menu/Menu.js";
 import { menuPropSelectionMode } from "./components/Menu/types.js";
+import { ButtonToggleGroup } from "./components/ButtonToggleGroup/ButtonToggleGroup.js";
+import { ButtonToggle } from "./components/ButtonToggleGroup/components/ButtonToggle/ButtonToggle.js";
 import { flex, flexPropAlignItems, flexPropDirection, flexPropFlex, flexPropGap, flexPropJustifyContent, flexPropOrder, flexPropWrap } from "./components/layout/flex/flex.js";
 import { spacing, spacingGap } from "./components/layout/spacing/spacing.js";
 export {
@@ -74,6 +76,8 @@ export {
   BreakpointsContext,
   BreakpointsProvider,
   Button,
+  ButtonToggle,
+  ButtonToggleGroup,
   Checkbox,
   Container,
   Divider,

package/dist/style.css

@@ -1450,16 +1450,13 @@
   background-color: var(--checkbox-bg-color);
   outline-offset: calc(-1 * var(--checkbox-outline-width) / 2);
   outline: var(--checkbox-outline-width) solid var(--checkbox-outline-color);
+  flex-shrink: 0;
   justify-content: center;
   align-items: center;
   display: flex;
   position: relative;
 }
 
-.kbq-checkbox-checkbox-dbb3d9 > * {
-  flex-shrink: 0;
-}
-
 .kbq-checkbox-normal-646719 {
   --checkbox-size: var(--kbq-size-l);
   --checkbox-margin-block: var(--kbq-size-3xs);
@@ -2204,6 +2201,7 @@
   transition: background-color var(--kbq-transition-default), border var(--kbq-transition-default), outline-color var(--kbq-transition-default);
   outline-offset: calc(-1 * var(--radio-outline-width) / 2);
   outline: var(--radio-outline-width) solid var(--radio-outline-color);
+  flex-shrink: 0;
   justify-content: center;
   align-items: center;
   display: flex;
@@ -2346,6 +2344,7 @@
   border-radius: var(--toggle-track-border-radius);
   outline: 2px solid var(--toggle-track-outline-color);
   transition: background-color var(--kbq-transition-default), outline-color var(--kbq-transition-default);
+  flex-shrink: 0;
   position: relative;
 }
 
@@ -2691,6 +2690,7 @@
   min-block-size: 48px;
   display: flex;
   position: relative;
+  overflow: hidden;
 }
 
 .kbq-dialog-container-a08202 {
@@ -3193,6 +3193,146 @@
   box-sizing: border-box;
   padding: var(--kbq-size-s) var(--kbq-size-m);
 }
+.kbq-buttontogglegroup-79a88d {
+  --thumb-inline-size-start: ;
+  --thumb-transform-start: ;
+  --thumb-inline-size-end: ;
+  --thumb-transform-end: ;
+  border-radius: var(--kbq-size-s);
+  background-color: var(--kbq-background-contrast-fade);
+  flex-wrap: nowrap;
+  display: inline-flex;
+  position: relative;
+  overflow: hidden;
+}
+
+.kbq-buttontogglegroup-block-f9494f {
+  inline-size: 100%;
+}
+
+.kbq-buttontogglegroup-thumb-7ff4ae {
+  box-sizing: border-box;
+  inset-block: var(--kbq-size-xxs);
+  border-radius: var(--kbq-size-xxs);
+  background-color: var(--kbq-background-card);
+  inline-size: var(--thumb-inline-size-start);
+  transform: var(--thumb-transform-start);
+  transition: inline-size .2s ease-in, transform .2s ease-in;
+  position: absolute;
+}
+
+.kbq-buttontogglegroup-thumb-7ff4ae[data-transition="entering"], .kbq-buttontogglegroup-thumb-7ff4ae[data-transition="entered"] {
+  inline-size: var(--thumb-inline-size-end);
+  transform: var(--thumb-transform-end);
+}
+
+.kbq-buttontogglegroup-container-e48aaf {
+  inline-size: 100%;
+  display: flex;
+}
+[data-animated="true"] .kbq-buttontoggle-caa007 {
+  --button-toggle-bg-color: transparent;
+}
+
+[data-equal-item-size="true"] .kbq-buttontoggle-caa007 {
+  flex: 1;
+}
+
+.kbq-buttontoggle-caa007 {
+  --button-toggle-block-size: var(--kbq-size-xxl);
+  --button-toggle-outline-width: var(--kbq-size-3xs);
+  --button-toggle-padding-block: var(--kbq-size-xxs);
+  --button-toggle-padding-inline-start: var(--kbq-size-3xs);
+  --button-toggle-padding-inline-end: var(--kbq-size-3xs);
+  --button-toggle-color: var(--kbq-foreground-contrast);
+  --button-toggle-icon-color: var(--kbq-icon-contrast-fade);
+  --button-toggle-bg-color: var(--kbq-background-contrast-fade);
+  --button-toggle-outline-color: transparent;
+  cursor: pointer;
+  min-inline-size: 0;
+  padding-block: var(--button-toggle-padding-block);
+  padding-inline: var(--button-toggle-padding-inline-start) var(--button-toggle-padding-inline-end);
+  block-size: calc(var(--button-toggle-block-size)  + 2 * var(--button-toggle-padding-block));
+  background: none;
+  border: none;
+  outline: none;
+  flex: auto;
+  align-items: center;
+  display: inline-flex;
+}
+
+.kbq-buttontoggle-caa007:first-child {
+  --button-toggle-padding-inline-start: var(--kbq-size-xxs);
+}
+
+.kbq-buttontoggle-caa007:last-child {
+  --button-toggle-padding-inline-end: var(--kbq-size-xxs);
+}
+
+.kbq-buttontoggle-hovered-4706db {
+  --button-toggle-bg-color: var(--kbq-states-background-contrast-fade-hover);
+}
+
+.kbq-buttontoggle-pressed-6d5049 {
+  --button-toggle-bg-color: var(--kbq-states-background-contrast-fade-active);
+}
+
+.kbq-buttontoggle-selected-3e6996 {
+  --button-toggle-bg-color: var(--kbq-background-card);
+}
+
+.kbq-buttontoggle-selected-3e6996:where(.kbq-buttontoggle-pressed-6d5049) {
+  --button-toggle-bg-color: var(--kbq-states-background-transparent-active);
+}
+
+.kbq-buttontoggle-disabled-c0d011 {
+  --button-toggle-color: var(--kbq-states-foreground-disabled);
+  --button-toggle-icon-color: inherit;
+  cursor: not-allowed;
+}
+
+.kbq-buttontoggle-disabled-c0d011:where(.kbq-buttontoggle-selected-3e6996) {
+  --button-toggle-bg-color: var(--kbq-states-background-disabled);
+}
+
+.kbq-buttontoggle-focusVisible-37d5be {
+  --button-toggle-outline-color: var(--kbq-states-line-focus-theme);
+}
+
+.kbq-buttontoggle-container-f496bf {
+  box-sizing: border-box;
+  outline-offset: -1px;
+  justify-content: center;
+  align-items: center;
+  gap: var(--kbq-size-xxs);
+  inline-size: 100%;
+  padding: 0 var(--kbq-size-xs);
+  color: var(--button-toggle-color);
+  border-radius: var(--kbq-size-xxs);
+  min-inline-size: var(--kbq-size-3xl);
+  block-size: var(--button-toggle-block-size);
+  background-color: var(--button-toggle-bg-color);
+  outline: var(--button-toggle-outline-width) solid;
+  outline-color: var(--button-toggle-outline-color);
+  transition: outline var(--kbq-transition-default);
+  display: inline-flex;
+  position: relative;
+}
+
+.kbq-buttontoggle-icon-668db0 {
+  color: var(--button-toggle-icon-color);
+  flex-direction: column;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.kbq-buttontoggle-content-822c7d {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
 .kbq-spacing-mbs_0-be7021 {
   margin-block-start: 0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koobiq/react-components",
-  "version": "0.0.1-beta.17",
+  "version": "0.0.1-beta.19",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -27,10 +27,10 @@
     "@koobiq/design-tokens": "^3.12.1",
     "@types/react-transition-group": "^4.4.12",
     "react-transition-group": "^4.4.5",
-    "@koobiq/logger": "0.0.1-beta.17",
-    "@koobiq/react-core": "0.0.1-beta.17",
-    "@koobiq/react-primitives": "0.0.1-beta.17",
-    "@koobiq/react-icons": "0.0.1-beta.17"
+    "@koobiq/logger": "0.0.1-beta.19",
+    "@koobiq/react-core": "0.0.1-beta.19",
+    "@koobiq/react-primitives": "0.0.1-beta.19",
+    "@koobiq/react-icons": "0.0.1-beta.19"
   },
   "peerDependencies": {
     "@koobiq/design-tokens": "^3.11.2",