@cognitiv/components-web 1.0.4 → 1.1.0

package/dist/components/toast/toast.js

@@ -0,0 +1,365 @@
+"use client";
+import React__default, { useContext, useRef, useEffect, useMemo, useCallback, createContext } from 'react';
+import { UNSTABLE_ToastStateContext, UNSTABLE_Toast, Text, UNSTABLE_ToastRegion, UNSTABLE_ToastContent } from 'react-aria-components';
+import { dataAttr } from '../../utils/assertion.js';
+import { composeTwRenderProps, composeSlotClassName } from '../../utils/compose.js';
+import { Button } from '../button/index.js';
+import { CloseButton } from '../close-button/index.js';
+import { InfoIcon, DangerIcon, WarningIcon, SuccessIcon } from '../icons.js';
+import { Spinner } from '../spinner/index.js';
+import { DEFAULT_SCALE_FACTOR, DEFAULT_GAP, DEFAULT_MAX_VISIBLE_TOAST, DEFAULT_TOAST_WIDTH } from './constants.js';
+import { toastVariants } from './styles.js';
+import { toast } from './toast-queue.js';
+export { ToastQueue } from './toast-queue.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useMeasuredHeight } from '../../hooks/use-measured-height.js';
+import { useMediaQuery } from '../../hooks/use-media-query.js';
+
+const ToastContext = /*#__PURE__*/createContext({});
+
+/* ------------------------------------------------------------------------------------------------
+ * Toast
+ * --------------------------------------------------------------------------------------------- */
+
+const Toast = ({
+  children,
+  className,
+  placement,
+  scaleFactor = DEFAULT_SCALE_FACTOR,
+  toast,
+  variant,
+  ...rest
+}) => {
+  const {
+    gap = DEFAULT_GAP,
+    heightsByKey,
+    maxVisibleToasts = DEFAULT_MAX_VISIBLE_TOAST,
+    onToastHeightChange,
+    placement: contextPlacement,
+    scaleFactor: contextScaleFactor,
+    slots
+  } = useContext(ToastContext);
+  const finalPlacement = placement ?? contextPlacement;
+  const finalScaleFactor = scaleFactor ?? contextScaleFactor;
+  const state = useContext(UNSTABLE_ToastStateContext);
+  const visibleToasts = state.visibleToasts;
+  const index = visibleToasts.indexOf(toast);
+  const isFrontmost = index <= 0;
+  const isBottom = finalPlacement?.startsWith("bottom");
+  const isHidden = index >= maxVisibleToasts;
+  const toastKey = toast?.key;
+  const toastRef = useRef(null);
+  const {
+    height: toastHeight
+  } = useMeasuredHeight(toastRef);
+  useEffect(() => {
+    if (toastKey && typeof toastHeight === "number") {
+      onToastHeightChange?.(toastKey, toastHeight);
+    }
+  }, [toastKey, toastHeight, onToastHeightChange]);
+  const style = useMemo(() => {
+    const frontToastKey = visibleToasts[0]?.key;
+    const frontHeight = (frontToastKey ? heightsByKey?.[frontToastKey] : undefined) ?? toastHeight ?? 0;
+    const offset = index * gap;
+    const translateY = (isBottom ? -1 : 1) * offset;
+    const scale = 1 - index * finalScaleFactor;
+    return {
+      scale: `${scale}`,
+      tabindex: isFrontmost ? 0 : -1,
+      translate: `0 ${translateY}px 0`,
+      viewTransitionName: `toast-${String(toast.key).replace(/[^a-zA-Z0-9]/g, "-")}`,
+      zIndex: visibleToasts.length - index,
+      ...(frontHeight ? {
+        "--front-height": `${frontHeight}px`
+      } : null),
+      opacity: isHidden ? 0 : 1,
+      pointerEvents: isHidden ? "none" : "auto",
+      ...rest.style
+    };
+  }, [finalScaleFactor, gap, heightsByKey, index, isBottom, isFrontmost, isHidden, rest.style, toast?.key, toastHeight, visibleToasts]);
+  return /*#__PURE__*/jsx(UNSTABLE_Toast, {
+    ref: toastRef,
+    "aria-hidden": isHidden,
+    className: composeTwRenderProps(className, slots?.toast({
+      variant
+    })),
+    "data-frontmost": dataAttr(isFrontmost),
+    "data-hidden": dataAttr(isHidden),
+    "data-index": index,
+    "data-slot": "toast",
+    style: style,
+    toast: toast,
+    ...rest,
+    children: children
+  });
+};
+Toast.displayName = "Cognitiv.Toast";
+
+/* ------------------------------------------------------------------------------------------------
+ * Toast Content
+ * --------------------------------------------------------------------------------------------- */
+
+const ToastContent = ({
+  children,
+  className,
+  ...rest
+}) => {
+  const {
+    slots
+  } = useContext(ToastContext);
+  return /*#__PURE__*/jsx(UNSTABLE_ToastContent, {
+    className: composeSlotClassName(slots?.content, className),
+    "data-slot": "toast-content",
+    ...rest,
+    children: children
+  });
+};
+
+/* ------------------------------------------------------------------------------------------------
+ * Toast Indicator
+ * --------------------------------------------------------------------------------------------- */
+
+const ToastIndicator = ({
+  children,
+  className,
+  variant,
+  ...rest
+}) => {
+  const {
+    slots
+  } = useContext(ToastContext);
+  const getDefaultIcon = useCallback(() => {
+    switch (variant) {
+      case "accent":
+        return /*#__PURE__*/jsx(InfoIcon, {
+          "data-slot": "toast-default-icon"
+        });
+      case "success":
+        return /*#__PURE__*/jsx(SuccessIcon, {
+          "data-slot": "toast-default-icon"
+        });
+      case "warning":
+        return /*#__PURE__*/jsx(WarningIcon, {
+          "data-slot": "toast-default-icon"
+        });
+      case "danger":
+        return /*#__PURE__*/jsx(DangerIcon, {
+          "data-slot": "toast-default-icon"
+        });
+      default:
+        return /*#__PURE__*/jsx(InfoIcon, {
+          "data-slot": "toast-default-icon"
+        });
+    }
+  }, [variant]);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.indicator, className),
+    "data-slot": "toast-indicator",
+    ...rest,
+    children: children ?? getDefaultIcon()
+  });
+};
+ToastIndicator.displayName = "Cognitiv.ToastIndicator";
+
+/* ------------------------------------------------------------------------------------------------
+ * Toast Title
+ * --------------------------------------------------------------------------------------------- */
+
+const ToastTitle = ({
+  children,
+  className,
+  ...rest
+}) => {
+  const {
+    slots
+  } = useContext(ToastContext);
+  return /*#__PURE__*/jsx(Text, {
+    className: composeSlotClassName(slots?.title, className),
+    "data-slot": "toast-title",
+    slot: "title",
+    ...rest,
+    children: children
+  });
+};
+ToastTitle.displayName = "Cognitiv.ToastTitle";
+
+/* ------------------------------------------------------------------------------------------------
+ * Toast Description
+ * --------------------------------------------------------------------------------------------- */
+
+const ToastDescription = ({
+  children,
+  className,
+  ...rest
+}) => {
+  const {
+    slots
+  } = useContext(ToastContext);
+  return /*#__PURE__*/jsx(Text, {
+    className: composeSlotClassName(slots?.description, className),
+    "data-slot": "toast-description",
+    slot: "description",
+    ...rest,
+    children: children
+  });
+};
+ToastDescription.displayName = "Cognitiv.ToastDescription";
+
+/* ------------------------------------------------------------------------------------------------
+ * Toast Close Button
+ * --------------------------------------------------------------------------------------------- */
+
+const ToastCloseButton = ({
+  className,
+  ...rest
+}) => {
+  const {
+    slots
+  } = useContext(ToastContext);
+  return /*#__PURE__*/jsx(CloseButton, {
+    className: composeTwRenderProps(className, slots?.close()),
+    "data-slot": "toast-close",
+    slot: "close",
+    ...rest
+  });
+};
+ToastCloseButton.displayName = "Cognitiv.ToastCloseButton";
+
+/* ------------------------------------------------------------------------------------------------
+ * Toast Action Button
+ * --------------------------------------------------------------------------------------------- */
+
+const ToastActionButton = ({
+  children,
+  className,
+  ...rest
+}) => {
+  const {
+    slots
+  } = useContext(ToastContext);
+  return /*#__PURE__*/jsx(Button, {
+    className: composeTwRenderProps(className, slots?.action?.()),
+    "data-slot": "toast-action-button",
+    ...rest,
+    children: children
+  });
+};
+ToastActionButton.displayName = "Cognitiv.ToastActionButton";
+
+/* ------------------------------------------------------------------------------------------------
+ * Toast Region
+ * --------------------------------------------------------------------------------------------- */
+
+const ToastProvider = ({
+  children,
+  className,
+  gap = DEFAULT_GAP,
+  maxVisibleToasts,
+  placement = "bottom",
+  queue: queueProp,
+  scaleFactor = DEFAULT_SCALE_FACTOR,
+  width = DEFAULT_TOAST_WIDTH,
+  ...rest
+}) => {
+  const slots = useMemo(() => toastVariants({
+    placement
+  }), [placement]);
+  const isMobile = useMediaQuery("(max-width: 768px)");
+  const [toastHeights, setToastHeights] = React__default.useState({});
+  const toastQueue = useMemo(() => {
+    if (queueProp) {
+      // Custom toast prop provided - use it (it already has its own maxVisibleToasts limit)
+      return "getQueue" in queueProp ? queueProp.getQueue() : queueProp;
+    }
+    return toast.getQueue();
+  }, [queueProp]);
+  const resolvedMaxVisibleToasts = useMemo(() => {
+    const queueLimit = queueProp && "maxVisibleToasts" in queueProp ? queueProp.maxVisibleToasts : undefined;
+    return maxVisibleToasts ?? queueLimit ?? DEFAULT_MAX_VISIBLE_TOAST;
+  }, [maxVisibleToasts, queueProp]);
+  const handleToastHeightChange = useCallback((key, height) => {
+    setToastHeights(prev => {
+      if (prev[key] === height) {
+        return prev;
+      }
+      return {
+        ...prev,
+        [key]: height
+      };
+    });
+  }, []);
+  const getDefaultChildren = useCallback(renderProps => {
+    const {
+      actionProps,
+      description,
+      indicator,
+      isLoading,
+      title,
+      variant
+    } = renderProps.toast.content ?? {};
+    return /*#__PURE__*/jsxs(Toast, {
+      placement: placement,
+      scaleFactor: scaleFactor,
+      toast: renderProps.toast,
+      variant: variant,
+      children: [indicator === null ? null : isLoading ? /*#__PURE__*/jsx(ToastIndicator, {
+        variant: variant,
+        children: /*#__PURE__*/jsx(Spinner, {
+          color: "current",
+          size: "sm"
+        })
+      }) : /*#__PURE__*/jsx(ToastIndicator, {
+        variant: variant,
+        children: indicator
+      }), /*#__PURE__*/jsxs(ToastContent, {
+        children: [!!title && /*#__PURE__*/jsx(ToastTitle, {
+          children: title
+        }), !!description && /*#__PURE__*/jsx(ToastDescription, {
+          children: description
+        }), isMobile && actionProps?.children ? /*#__PURE__*/jsx(ToastActionButton, {
+          ...actionProps,
+          children: actionProps.children
+        }) : null]
+      }), !isMobile && actionProps?.children ? /*#__PURE__*/jsx(ToastActionButton, {
+        ...actionProps,
+        children: actionProps.children
+      }) : null, /*#__PURE__*/jsx(ToastCloseButton, {})]
+    });
+  }, [isMobile, placement, scaleFactor]);
+  return /*#__PURE__*/jsx(UNSTABLE_ToastRegion, {
+    className: composeTwRenderProps(className, slots?.region()),
+    "data-slot": "toast-region",
+    queue: toastQueue,
+    style: {
+      // @ts-expect-error - CSS variables
+      "--gap": `${gap}px`,
+      "--placement": placement,
+      "--scale-factor": scaleFactor,
+      "--toast-width": typeof width === "number" ? `${width}px` : width
+    },
+    ...rest,
+    children: renderProps => {
+      const content = renderProps.toast.content;
+      const renderPropsWithIsLoading = {
+        ...renderProps,
+        isLoading: content?.isLoading ?? false
+      };
+      return /*#__PURE__*/jsx(ToastContext, {
+        value: {
+          gap,
+          heightsByKey: toastHeights,
+          maxVisibleToasts: resolvedMaxVisibleToasts,
+          onToastHeightChange: handleToastHeightChange,
+          placement,
+          scaleFactor,
+          slots,
+          width
+        },
+        children: typeof children === "undefined" ? getDefaultChildren(renderProps) : typeof children === "function" ? children(renderPropsWithIsLoading) : children
+      });
+    }
+  });
+};
+ToastProvider.displayName = "Cognitiv.ToastProvider";
+
+export { Toast, ToastActionButton, ToastCloseButton, ToastContent, ToastDescription, ToastIndicator, ToastProvider, ToastTitle };

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

@@ -0,0 +1,13 @@
+import type { ComponentProps } from "react";
+import { ToggleButtonRoot } from "./toggle-button";
+export declare const ToggleButton: (({ children, className, isIconOnly, size, style, variant, ...rest }: import("./toggle-button").ToggleButtonRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, isIconOnly, size, style, variant, ...rest }: import("./toggle-button").ToggleButtonRootProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type ToggleButton = {
+    Props: ComponentProps<typeof ToggleButtonRoot>;
+    RootProps: ComponentProps<typeof ToggleButtonRoot>;
+};
+export { ToggleButtonRoot };
+export type { ToggleButtonRootProps, ToggleButtonRootProps as ToggleButtonProps, } from "./toggle-button";
+export { toggleButtonVariants } from "./styles";
+export type { ToggleButtonVariants } from "./styles";

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

@@ -0,0 +1,12 @@
+"use strict";
+import { ToggleButtonRoot } from './toggle-button.js';
+export { toggleButtonVariants } from './styles.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const ToggleButton = Object.assign(ToggleButtonRoot, {
+  Root: ToggleButtonRoot
+});
+
+export { ToggleButton, ToggleButtonRoot };

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

@@ -0,0 +1,42 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const toggleButtonVariants: import("tailwind-variants").TVReturnType<{
+    isIconOnly: {
+        true: string;
+    };
+    size: {
+        lg: string;
+        md: string;
+        sm: string;
+    };
+    variant: {
+        default: string;
+        ghost: string;
+    };
+}, undefined, "toggle-button", {
+    isIconOnly: {
+        true: string;
+    };
+    size: {
+        lg: string;
+        md: string;
+        sm: string;
+    };
+    variant: {
+        default: string;
+        ghost: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    isIconOnly: {
+        true: string;
+    };
+    size: {
+        lg: string;
+        md: string;
+        sm: string;
+    };
+    variant: {
+        default: string;
+        ghost: string;
+    };
+}, undefined, "toggle-button", unknown, unknown, undefined>>;
+export type ToggleButtonVariants = VariantProps<typeof toggleButtonVariants>;

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

@@ -0,0 +1,27 @@
+"use strict";
+import { tv } from 'tailwind-variants';
+
+const toggleButtonVariants = tv({
+  base: "toggle-button",
+  defaultVariants: {
+    isIconOnly: false,
+    size: "md",
+    variant: "default"
+  },
+  variants: {
+    isIconOnly: {
+      true: "toggle-button--icon-only"
+    },
+    size: {
+      lg: "toggle-button--lg",
+      md: "toggle-button--md",
+      sm: "toggle-button--sm"
+    },
+    variant: {
+      default: "toggle-button--default",
+      ghost: "toggle-button--ghost"
+    }
+  }
+});
+
+export { toggleButtonVariants };

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

@@ -0,0 +1,8 @@
+import type { ToggleButtonVariants } from "./styles";
+import type { ComponentPropsWithRef } from "react";
+import { ToggleButton as ToggleButtonPrimitive } from "react-aria-components";
+interface ToggleButtonRootProps extends ComponentPropsWithRef<typeof ToggleButtonPrimitive>, ToggleButtonVariants {
+}
+declare const ToggleButtonRoot: ({ children, className, isIconOnly, size, style, variant, ...rest }: ToggleButtonRootProps) => import("react/jsx-runtime").JSX.Element;
+export { ToggleButtonRoot };
+export type { ToggleButtonRootProps };

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

@@ -0,0 +1,36 @@
+"use client";
+import { useContext } from 'react';
+import { ToggleButton } from 'react-aria-components';
+import { toggleButtonVariants } from './styles.js';
+import { jsx } from 'react/jsx-runtime';
+import { ToggleButtonGroupContext } from '../toggle-button-group/toggle-button-group.js';
+import { composeTwRenderProps } from '../../utils/compose.js';
+
+const ToggleButtonRoot = ({
+  children,
+  className,
+  isIconOnly,
+  size,
+  style,
+  variant,
+  ...rest
+}) => {
+  const groupContext = useContext(ToggleButtonGroupContext);
+
+  // Merge props with precedence: direct props > context props
+  const finalSize = size ?? groupContext?.size;
+  const styles = toggleButtonVariants({
+    isIconOnly,
+    size: finalSize,
+    variant
+  });
+  return /*#__PURE__*/jsx(ToggleButton, {
+    className: composeTwRenderProps(className, styles),
+    "data-slot": "toggle-button",
+    style: style,
+    ...rest,
+    children: renderProps => typeof children === "function" ? children(renderProps) : children
+  });
+};
+
+export { ToggleButtonRoot };

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

@@ -0,0 +1,16 @@
+import type { ComponentProps } from "react";
+import { ToggleButtonGroupRoot, ToggleButtonGroupSeparator } from "./toggle-button-group";
+export declare const ToggleButtonGroup: (({ children, className, fullWidth, isDetached, isDisabled, orientation: orientationProp, size, ...rest }: import("./toggle-button-group").ToggleButtonGroupRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, fullWidth, isDetached, isDisabled, orientation: orientationProp, size, ...rest }: import("./toggle-button-group").ToggleButtonGroupRootProps) => import("react/jsx-runtime").JSX.Element;
+    Separator: ({ className, ...props }: import("./toggle-button-group").ToggleButtonGroupSeparatorProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type ToggleButtonGroup = {
+    Props: ComponentProps<typeof ToggleButtonGroupRoot>;
+    RootProps: ComponentProps<typeof ToggleButtonGroupRoot>;
+    SeparatorProps: ComponentProps<typeof ToggleButtonGroupSeparator>;
+};
+export { ToggleButtonGroupRoot, ToggleButtonGroupSeparator };
+export type { ToggleButtonGroupRootProps, ToggleButtonGroupRootProps as ToggleButtonGroupProps, ToggleButtonGroupSeparatorProps, } from "./toggle-button-group";
+export { ToggleButtonGroupContext, TOGGLE_BUTTON_GROUP_CHILD } from "./toggle-button-group";
+export { toggleButtonGroupVariants } from "./styles";
+export type { ToggleButtonGroupVariants } from "./styles";

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

@@ -0,0 +1,14 @@
+"use strict";
+import { ToggleButtonGroupRoot, ToggleButtonGroupSeparator } from './toggle-button-group.js';
+export { TOGGLE_BUTTON_GROUP_CHILD, ToggleButtonGroupContext } from './toggle-button-group.js';
+export { toggleButtonGroupVariants } from './styles.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const ToggleButtonGroup = Object.assign(ToggleButtonGroupRoot, {
+  Root: ToggleButtonGroupRoot,
+  Separator: ToggleButtonGroupSeparator
+});
+
+export { ToggleButtonGroup, ToggleButtonGroupRoot, ToggleButtonGroupSeparator };

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

@@ -0,0 +1,75 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const toggleButtonGroupVariants: import("tailwind-variants").TVReturnType<{
+    fullWidth: {
+        false: {};
+        true: {
+            base: string;
+        };
+    };
+    isDetached: {
+        false: {};
+        true: {
+            base: string;
+        };
+    };
+    orientation: {
+        horizontal: {
+            base: string;
+        };
+        vertical: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    separator: string;
+}, undefined, {
+    fullWidth: {
+        false: {};
+        true: {
+            base: string;
+        };
+    };
+    isDetached: {
+        false: {};
+        true: {
+            base: string;
+        };
+    };
+    orientation: {
+        horizontal: {
+            base: string;
+        };
+        vertical: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    separator: string;
+}, import("tailwind-variants").TVReturnType<{
+    fullWidth: {
+        false: {};
+        true: {
+            base: string;
+        };
+    };
+    isDetached: {
+        false: {};
+        true: {
+            base: string;
+        };
+    };
+    orientation: {
+        horizontal: {
+            base: string;
+        };
+        vertical: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    separator: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ToggleButtonGroupVariants = VariantProps<typeof toggleButtonGroupVariants>;

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

@@ -0,0 +1,38 @@
+"use strict";
+import { tv } from 'tailwind-variants';
+
+const toggleButtonGroupVariants = tv({
+  defaultVariants: {
+    fullWidth: false,
+    isDetached: false,
+    orientation: "horizontal"
+  },
+  slots: {
+    base: "toggle-button-group",
+    separator: "toggle-button-group__separator"
+  },
+  variants: {
+    fullWidth: {
+      false: {},
+      true: {
+        base: "toggle-button-group--full-width"
+      }
+    },
+    isDetached: {
+      false: {},
+      true: {
+        base: "toggle-button-group--detached"
+      }
+    },
+    orientation: {
+      horizontal: {
+        base: "toggle-button-group--horizontal"
+      },
+      vertical: {
+        base: "toggle-button-group--vertical"
+      }
+    }
+  }
+});
+
+export { toggleButtonGroupVariants };

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

@@ -0,0 +1,26 @@
+import type { ToggleButtonGroupVariants } from "./styles";
+import type { ToggleButtonVariants } from "../toggle-button/styles";
+import type { ComponentPropsWithRef } from "react";
+import React from "react";
+import { ToggleButtonGroup as ToggleButtonGroupPrimitive } from "react-aria-components";
+import { toggleButtonGroupVariants } from "./styles";
+type ToggleButtonGroupContext = {
+    slots?: ReturnType<typeof toggleButtonGroupVariants>;
+    size?: ToggleButtonVariants["size"];
+    isDisabled?: boolean;
+};
+declare const ToggleButtonGroupContext: React.Context<ToggleButtonGroupContext>;
+export declare const TOGGLE_BUTTON_GROUP_CHILD = "__toggle_button_group_child";
+interface ToggleButtonGroupRootProps extends ComponentPropsWithRef<typeof ToggleButtonGroupPrimitive>, ToggleButtonGroupVariants {
+    /** Size to propagate to all child ToggleButtons */
+    size?: ToggleButtonVariants["size"];
+    /** Whether the group buttons are visually separated (detached) instead of connected */
+    isDetached?: boolean;
+}
+declare const ToggleButtonGroupRoot: ({ children, className, fullWidth, isDetached, isDisabled, orientation: orientationProp, size, ...rest }: ToggleButtonGroupRootProps) => import("react/jsx-runtime").JSX.Element;
+interface ToggleButtonGroupSeparatorProps extends ComponentPropsWithRef<"span"> {
+    className?: string;
+}
+declare const ToggleButtonGroupSeparator: ({ className, ...props }: ToggleButtonGroupSeparatorProps) => import("react/jsx-runtime").JSX.Element;
+export { ToggleButtonGroupRoot, ToggleButtonGroupSeparator, ToggleButtonGroupContext };
+export type { ToggleButtonGroupRootProps, ToggleButtonGroupSeparatorProps };