rsuite 5.76.2 → 6.0.0-canary-20250103

package/esm/internals/types/index.d.ts

@@ -1,22 +1,29 @@
-import React from 'react';
+import { ReactNode, CSSProperties, ElementType, InputHTMLAttributes, SyntheticEvent, FocusEventHandler } from 'react';
 import { ReplaceProps } from './utils';
+import { Placement } from './placement';
+import { Colours } from './colours';
+export * from './placement';
+export * from './colours';
 export interface StandardProps {
     /** The prefix of the component CSS class */
     classPrefix?: string;
     /** Additional classes */
     className?: string;
     /** Primary content */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /** Additional style */
-    style?: React.CSSProperties;
+    style?: CSSProperties;
 }
-export interface WithAsProps<As extends React.ElementType | string = React.ElementType> extends StandardProps {
+export interface WithAsProps<As extends ElementType | string = ElementType> extends StandardProps {
     /** You can use a custom element for this component */
     as?: As;
 }
-export interface RsRefForwardingComponent<T extends React.ElementType, P = unknown> {
-    <As extends React.ElementType = T>(props: React.PropsWithChildren<ReplaceProps<As, WithAsProps<As> & P>>, context?: any): React.ReactElement | null;
-    propTypes?: any;
+export interface WithAsPropsWithoutChildren<As extends ElementType | string = ElementType> extends Omit<StandardProps, 'children'> {
+    /** You can use a custom element for this component */
+    as?: As;
+}
+export interface RsRefForwardingComponent<T extends ElementType, P = unknown, ExcludeChildren extends boolean = false> {
+    <As extends ElementType = T>(props: ReplaceProps<As, ExcludeChildren extends true ? WithAsPropsWithoutChildren<As> & P : WithAsProps<As> & P>, context?: any): any;
     contextTypes?: any;
     displayName?: string;
 }
@@ -50,19 +57,19 @@ export interface PickerBaseProps<L = any> extends WithAsProps, AnimationEventPro
     /** A picker can show it is currently unable to be interacted with */
     disabled?: boolean;
     /** You can use a custom element for this component */
-    toggleAs?: React.ElementType;
+    toggleAs?: ElementType;
     /** A CSS class to apply to the Menu DOM node. */
     menuClassName?: string;
     /** A style to apply to the Menu DOM node. */
-    menuStyle?: React.CSSProperties;
+    menuStyle?: CSSProperties;
     /** Picker menu auto width */
     menuAutoWidth?: boolean;
     /** Picker menu max Height */
     menuMaxHeight?: number;
     /** Placeholder text */
-    placeholder?: React.ReactNode;
+    placeholder?: ReactNode;
     /** The placement of picker */
-    placement?: TypeAttributes.Placement;
+    placement?: Placement;
     /** Prevent floating element overflow */
     preventOverflow?: boolean;
     /** Open the menu and control it */
@@ -80,13 +87,13 @@ export interface PickerBaseProps<L = any> extends WithAsProps, AnimationEventPro
     /**
      * Called when the component is focused.
      */
-    onFocus?: React.FocusEventHandler<any>;
+    onFocus?: FocusEventHandler<any>;
     /**
      * Called when the component is blurred.
      */
-    onBlur?: React.FocusEventHandler<any>;
+    onBlur?: FocusEventHandler<any>;
     /** Custom render extra footer */
-    renderExtraFooter?: () => React.ReactNode;
+    renderExtraFooter?: () => ReactNode;
 }
 export interface DeprecatedPickerProps {
     /**
@@ -98,7 +105,7 @@ export interface DeprecatedPickerProps {
      * Custom menu style
      * @deprecated Use `popupStyle` instead
      */
-    menuStyle?: React.CSSProperties;
+    menuStyle?: CSSProperties;
     /**
      * Picker menu auto width
      *
@@ -109,9 +116,9 @@ export interface DeprecatedPickerProps {
      * Custom render tree
      * @deprecated Use `renderTree` instead
      */
-    renderMenu?: (menu: React.ReactNode) => React.ReactNode;
+    renderMenu?: (menu: ReactNode) => ReactNode;
 }
-export interface FormControlBaseProps<ValueType = React.InputHTMLAttributes<HTMLInputElement>['value']> {
+export interface FormControlBaseProps<ValueType = InputHTMLAttributes<HTMLInputElement>['value']> {
     /** Name of the form field */
     name?: string;
     /** Initial value */
@@ -120,10 +127,10 @@ export interface FormControlBaseProps<ValueType = React.InputHTMLAttributes<HTML
     value?: ValueType;
     /**
      * Called after the value has been changed
-     * todo Override event as React.ChangeEvent in components where onChange is delegated
+     * todo Override event as ChangeEvent in components where onChange is delegated
      *      to an underlying <input> element
      */
-    onChange?: (value: ValueType, event: React.SyntheticEvent) => void;
+    onChange?: (value: ValueType, event: SyntheticEvent) => void;
     /** Set the component to be disabled and cannot be entered */
     disabled?: boolean;
     /** Render the control as plain text */
@@ -165,12 +172,8 @@ export interface FormControlPickerProps<T = any, L = any, D = Record<string, any
 export declare namespace TypeAttributes {
     type Size = 'lg' | 'md' | 'sm' | 'xs';
     type Status = 'success' | 'warning' | 'error' | 'info';
-    type Color = 'red' | 'orange' | 'yellow' | 'green' | 'cyan' | 'blue' | 'violet';
+    type Color = `${Colours}`;
     type Appearance = 'default' | 'primary' | 'link' | 'subtle' | 'ghost';
-    type Placement4 = 'top' | 'bottom' | 'right' | 'left';
-    type Placement8 = 'bottomStart' | 'bottomEnd' | 'topStart' | 'topEnd' | 'leftStart' | 'rightStart' | 'leftEnd' | 'rightEnd';
-    type PlacementAuto = 'auto' | 'autoVertical' | 'autoVerticalStart' | 'autoVerticalEnd' | 'autoHorizontal' | 'autoHorizontalStart' | 'autoHorizontalEnd';
-    type Placement = Placement4 | Placement8 | PlacementAuto;
     type CheckTrigger = 'change' | 'blur' | 'none' | null;
     type DisplayState = 'show' | 'hide' | 'hiding';
 }
@@ -179,7 +182,7 @@ export interface SVGIcon {
     id: string;
 }
 export interface ItemDataType<T = number | string> extends Record<string, any> {
-    label?: string | React.ReactNode;
+    label?: string | ReactNode;
     value?: T;
     groupBy?: string;
     parent?: ItemDataType<T>;
@@ -193,7 +196,7 @@ export interface Offset {
     width: number;
     height: number;
 }
-export type OnChangeCallback<T, E = React.SyntheticEvent> = (value: T, event: E) => void;
+export type OnChangeCallback<T, E = SyntheticEvent> = (value: T, event: E) => void;
 export type CursorPosition = {
     top: number;
     left: number;

package/esm/internals/types/index.js

@@ -1,2 +1,8 @@
 'use client';
+export * from "./placement.js";
+export * from "./colours.js";
+
+/**
+ * Represents the data properties for a component.
+ */
 export {};

package/esm/internals/types/placement.d.ts

@@ -0,0 +1,5 @@
+export type PlacementCardinal = 'top' | 'bottom' | 'right' | 'left';
+export type PlacementCornersPolyfill = 'leftStart' | 'rightStart' | 'leftEnd' | 'rightEnd';
+export type PlacementCorners = 'topStart' | 'topEnd' | 'bottomStart' | 'bottomEnd' | PlacementCornersPolyfill;
+export type PlacementAuto = 'auto' | 'autoVertical' | 'autoVerticalStart' | 'autoVerticalEnd' | 'autoHorizontal' | 'autoHorizontalStart' | 'autoHorizontalEnd';
+export type Placement = PlacementCardinal | PlacementCorners | PlacementAuto;

package/esm/internals/types/placement.js

@@ -0,0 +1,2 @@
+'use client';
+export {};

package/esm/internals/utils/BrowserDetection.d.ts

@@ -1,12 +1,2 @@
 export declare const isIE: () => boolean;
-export declare const isIE10: () => boolean;
-export declare const isIE11: () => boolean;
-export declare const isEdge: () => boolean;
 export declare const isAndroid: () => boolean;
-export declare const getChromeVersion: () => number | false;
-export declare const getSafariVersion: () => number | false;
-/**
- * flexbox-gap compatibility
- * @see https://caniuse.com/flexbox-gap
- */
-export declare const isSupportFlexGap: () => boolean;

package/esm/internals/utils/BrowserDetection.js

@@ -4,63 +4,5 @@
 import canUseDOM from 'dom-lib/canUseDOM';
 
 // Internet Explorer 6-11
-export var isIE = function isIE() {
-  return canUseDOM && /MSIE |Trident\/|Edge\//.test(window.navigator.userAgent);
-};
-export var isIE10 = function isIE10() {
-  return canUseDOM && !!window.navigator.userAgent.match(/MSIE 10.0/);
-};
-export var isIE11 = function isIE11() {
-  return canUseDOM && window.navigator.userAgent.indexOf('Trident') > -1 && window.navigator.userAgent.indexOf('rv:11.0') > -1;
-};
-
-// Edge 20+
-export var isEdge = function isEdge() {
-  return canUseDOM && !isIE() && 'styleMedia' in window;
-};
-export var isAndroid = function isAndroid() {
-  return canUseDOM && /Android/i.test(navigator.userAgent);
-};
-export var getChromeVersion = function getChromeVersion() {
-  if (canUseDOM) {
-    var match = window.navigator.userAgent.match(/Chrom(e|ium)\/([\d\.]+)\./);
-    return match ? parseFloat(match[2]) : false;
-  }
-  return false;
-};
-export var getSafariVersion = function getSafariVersion() {
-  if (canUseDOM) {
-    var match = window.navigator.userAgent.match(/Version\/([\d\.]+).*Safari/);
-    return match ? parseFloat(match[1]) : false;
-  }
-  return false;
-};
-
-/**
- * flexbox-gap compatibility
- * @see https://caniuse.com/flexbox-gap
- */
-export var isSupportFlexGap = function isSupportFlexGap() {
-  // Check if the browser supports the `gap` property
-  if (typeof CSS !== 'undefined' && typeof CSS.supports !== 'undefined') {
-    return CSS.supports('(gap: 1px)');
-  }
-
-  // IE does not support flex-gap
-  if (isIE()) {
-    return false;
-  }
-  var chromeVersion = getChromeVersion();
-  var safariVersion = getSafariVersion();
-
-  // edge consider as chrome
-  if (chromeVersion) {
-    // flex-gap is support in Chrome 84+
-    return chromeVersion >= 84;
-  }
-  if (safariVersion) {
-    // flex-gap is support in Safari 14.1+
-    return safariVersion >= 14.1;
-  }
-  return true;
-};
+export const isIE = () => canUseDOM && /MSIE |Trident\/|Edge\//.test(window.navigator.userAgent);
+export const isAndroid = () => canUseDOM && /Android/i.test(navigator.userAgent);

package/esm/internals/utils/ReactChildren.js

@@ -1,5 +1,4 @@
 'use client';
-import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 
 /**
@@ -28,7 +27,7 @@ export function isFragment(children) {
  * @returns The flattened array of children.
  */
 function flatChildren(children) {
-  return React.Children.toArray(React.Children.map(children, function (child) {
+  return React.Children.toArray(React.Children.map(children, child => {
     if (isFragment(child)) {
       var _child$props;
       return React.Children.toArray(((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.children) || []);
@@ -45,9 +44,9 @@ function flatChildren(children) {
  * @returns The first child that satisfies the condition, or undefined if no child is found.
  */
 export function find(children, func, context) {
-  var index = 0;
-  var result;
-  React.Children.forEach(flatChildren(children), function (child) {
+  let index = 0;
+  let result;
+  React.Children.forEach(flatChildren(children), child => {
     if (result) {
       return;
     }
@@ -67,12 +66,12 @@ export function find(children, func, context) {
  * @returns An array of the results of applying the function to each child.
  */
 export function map(children, func, context) {
-  var index = 0;
-  return React.Children.map(flatChildren(children), function (child) {
+  let index = 0;
+  return React.Children.map(flatChildren(children), child => {
     if (! /*#__PURE__*/React.isValidElement(child)) {
       return child;
     }
-    var handle = func.call(context, child, index);
+    const handle = func.call(context, child, index);
     index += 1;
     return handle;
   });
@@ -86,11 +85,10 @@ export function map(children, func, context) {
  * @returns An array of the cloned and modified child elements.
  */
 export function mapCloneElement(children, func, context) {
-  return map(children, function (child, index) {
-    return /*#__PURE__*/React.cloneElement(child, _extends({
-      key: index
-    }, func(child, index)));
-  }, context);
+  return map(children, (child, index) => /*#__PURE__*/React.cloneElement(child, {
+    key: index,
+    ...func(child, index)
+  }), context);
 }
 
 /**
@@ -100,8 +98,8 @@ export function mapCloneElement(children, func, context) {
  * @param context
  */
 export function forEach(children, func, context) {
-  var index = 0;
-  React.Children.forEach(flatChildren(children), function (child) {
+  let index = 0;
+  React.Children.forEach(flatChildren(children), child => {
     if (! /*#__PURE__*/React.isValidElement(child)) {
       return;
     }
@@ -127,17 +125,15 @@ export function count(children) {
  * @returns True if any child satisfies the condition, false otherwise.
  */
 function some(children, func, context) {
-  var index = 0;
-  var result = false;
-  React.Children.forEach(flatChildren(children), function (child) {
+  let index = 0;
+  let result = false;
+  React.Children.forEach(flatChildren(children), child => {
     if (result) {
       return;
     }
     if (! /*#__PURE__*/React.isValidElement(child)) {
       return;
     }
-
-    /* eslint-disable */
     if (func.call(context, child, index += 1)) {
       result = true;
     }
@@ -148,30 +144,30 @@ function some(children, func, context) {
 /**
  * Utility functions for working with React children.
  */
-export var ReactChildren = {
+export const ReactChildren = {
   /**
    * Maps over the children and clones each child element with the provided props.
    */
-  mapCloneElement: mapCloneElement,
+  mapCloneElement,
   /**
    * Returns the number of children.
    */
-  count: count,
+  count,
   /**
    * Checks if any child satisfies the given condition.
    */
-  some: some,
+  some,
   /**
    * Maps over the children and applies the given function to each child.
    */
-  map: map,
+  map,
   /**
    * Iterates over children that are in flat array form.
    */
-  forEach: forEach,
+  forEach,
   /**
    * Finds the first child that satisfies the given condition.
    */
-  find: find
+  find
 };
 export default ReactChildren;

package/esm/internals/utils/colours.d.ts

@@ -0,0 +1,21 @@
+import { Color } from '../types/colours';
+export declare const isPresetColor: (color?: Color | React.CSSProperties['color']) => boolean;
+/**
+ * Convert short hex color to full hex color
+ * e.g. #fff -> #ffffff
+ */
+export declare const expandHexColor: (color: string) => string;
+/**
+ * Calculate relative luminance of a color
+ * Using the formula from WCAG 2.0
+ */
+export declare const getLuminance: (color: string) => number;
+/**
+ * Get contrasting text color (black or white) based on background color
+ */
+export declare const getContrastText: (bgColor: string) => string;
+/**
+ * Create CSS color variables for custom colors
+ * Returns background and optional text color variables
+ */
+export declare const createColorVariables: (color?: Color | React.CSSProperties['color'], bgFieldName?: string, textFieldName?: string) => React.CSSProperties | undefined;

package/esm/internals/utils/colours.js

@@ -0,0 +1,77 @@
+'use client';
+import { Colours } from "../types/colours.js";
+export const isPresetColor = color => {
+  if (!color) {
+    return false;
+  }
+  if (color === 'default') {
+    return true;
+  }
+  return Object.values(Colours).includes(color);
+};
+
+/**
+ * Convert short hex color to full hex color
+ * e.g. #fff -> #ffffff
+ */
+export const expandHexColor = color => {
+  const hex = color.toLowerCase().replace('#', '');
+  if (hex.length === 3) {
+    return `#${hex[0]}${hex[0]}${hex[1]}${hex[1]}${hex[2]}${hex[2]}`;
+  }
+  return `#${hex}`;
+};
+
+/**
+ * Calculate relative luminance of a color
+ * Using the formula from WCAG 2.0
+ */
+export const getLuminance = color => {
+  // Convert hex to rgb
+  const fullHex = expandHexColor(color);
+  const hex = fullHex.replace('#', '');
+  const r = parseInt(hex.substring(0, 2), 16) / 255;
+  const g = parseInt(hex.substring(2, 4), 16) / 255;
+  const b = parseInt(hex.substring(4, 6), 16) / 255;
+
+  // Convert rgb to relative luminance
+  const rs = r <= 0.03928 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4);
+  const gs = g <= 0.03928 ? g / 12.92 : Math.pow((g + 0.055) / 1.055, 2.4);
+  const bs = b <= 0.03928 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4);
+  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+};
+
+/**
+ * Get contrasting text color (black or white) based on background color
+ */
+export const getContrastText = bgColor => {
+  // For non-hex colors, return default dark text
+  if (!bgColor.startsWith('#')) {
+    return 'var(--rs-text-primary)';
+  }
+  const luminance = getLuminance(bgColor);
+  return luminance > 0.5 ? '#000000' : '#ffffff';
+};
+
+/**
+ * Create CSS color variables for custom colors
+ * Returns background and optional text color variables
+ */
+export const createColorVariables = function (color, bgFieldName, textFieldName) {
+  if (bgFieldName === void 0) {
+    bgFieldName = '--rs-color-bg';
+  }
+  if (color && !isPresetColor(color)) {
+    const colorStr = color.toString();
+    // Only convert to hex if it's a hex color
+    const bgColor = colorStr.startsWith('#') ? expandHexColor(colorStr) : colorStr;
+    const styles = {
+      [bgFieldName]: bgColor
+    };
+    if (textFieldName) {
+      styles[textFieldName] = getContrastText(bgColor);
+    }
+    return styles;
+  }
+  return undefined;
+};

package/esm/internals/utils/composeFunctions.js

@@ -17,10 +17,6 @@ export function composeFunctions() {
   for (var _len = arguments.length, fns = new Array(_len), _key = 0; _key < _len; _key++) {
     fns[_key] = arguments[_key];
   }
-  return function (first) {
-    return fns.reduce(function (previousValue, fn) {
-      return fn(previousValue);
-    }, first);
-  };
+  return first => fns.reduce((previousValue, fn) => fn(previousValue), first);
 }
 export default composeFunctions;

package/esm/internals/utils/createChainedFunction.js

@@ -17,9 +17,7 @@ export function createChainedFunction() {
   for (var _len = arguments.length, funcs = new Array(_len), _key = 0; _key < _len; _key++) {
     funcs[_key] = arguments[_key];
   }
-  return funcs.filter(function (f) {
-    return f !== null && typeof f !== 'undefined';
-  }).reduce(function (acc, f) {
+  return funcs.filter(f => f !== null && typeof f !== 'undefined').reduce((acc, f) => {
     if (typeof f !== 'function') {
       throw new Error('Invalid Argument Type, must only provide functions, undefined, or null.');
     }

package/esm/internals/utils/createComponent.d.ts

@@ -9,5 +9,5 @@ interface Props<TElement extends React.ElementType> extends React.HTMLAttributes
 /**
  * Create a component with `classPrefix` and `as` attributes.
  */
-export declare function createComponent<TElement extends React.ElementType = 'div'>({ name, componentAs, componentClassPrefix, ...defaultProps }: Props<TElement>): RsRefForwardingComponent<TElement, ComponentProps>;
+export declare function createComponent<TElement extends React.ElementType = 'div'>({ name, componentAs, componentClassPrefix, ...defaultProps }: Props<TElement>): RsRefForwardingComponent<TElement, ComponentProps, false>;
 export default createComponent;

package/esm/internals/utils/createComponent.js

@@ -1,35 +1,35 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["name", "componentAs", "componentClassPrefix"],
-  _excluded2 = ["as", "classPrefix", "className", "role"];
 import React from 'react';
 import kebabCase from 'lodash/kebabCase';
-import PropTypes from 'prop-types';
 import { useClassNames } from "../hooks/index.js";
 import { useCustom } from "../../CustomProvider/index.js";
 /**
  * Create a component with `classPrefix` and `as` attributes.
  */
 export function createComponent(_ref) {
-  var name = _ref.name,
-    componentAs = _ref.componentAs,
-    componentClassPrefix = _ref.componentClassPrefix,
-    defaultProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var Component = /*#__PURE__*/React.forwardRef(function (props, ref) {
-    var _useCustom = useCustom(name, props),
-      propsWithDefaults = _useCustom.propsWithDefaults;
-    var _propsWithDefaults$as = propsWithDefaults.as,
-      Component = _propsWithDefaults$as === void 0 ? componentAs || 'div' : _propsWithDefaults$as,
-      _propsWithDefaults$cl = propsWithDefaults.classPrefix,
-      classPrefix = _propsWithDefaults$cl === void 0 ? componentClassPrefix || kebabCase(name) : _propsWithDefaults$cl,
-      className = propsWithDefaults.className,
-      role = propsWithDefaults.role,
-      rest = _objectWithoutPropertiesLoose(propsWithDefaults, _excluded2);
-    var _useClassNames = useClassNames(classPrefix),
-      withClassPrefix = _useClassNames.withClassPrefix,
-      merge = _useClassNames.merge;
-    var classes = merge(className, withClassPrefix());
+  let {
+    name,
+    componentAs,
+    componentClassPrefix,
+    ...defaultProps
+  } = _ref;
+  const Component = /*#__PURE__*/React.forwardRef((props, ref) => {
+    const {
+      propsWithDefaults
+    } = useCustom(name, props);
+    const {
+      as: Component = componentAs || 'div',
+      classPrefix = componentClassPrefix || kebabCase(name),
+      className,
+      role,
+      ...rest
+    } = propsWithDefaults;
+    const {
+      withClassPrefix,
+      merge
+    } = useClassNames(classPrefix);
+    const classes = merge(className, withClassPrefix());
     return /*#__PURE__*/React.createElement(Component, _extends({}, defaultProps, rest, {
       role: role,
       ref: ref,
@@ -37,12 +37,6 @@ export function createComponent(_ref) {
     }));
   });
   Component.displayName = name;
-  Component.propTypes = {
-    as: PropTypes.elementType,
-    className: PropTypes.string,
-    classPrefix: PropTypes.string,
-    children: PropTypes.node
-  };
   return Component;
 }
 export default createComponent;

package/esm/internals/utils/css.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+/**
+ * Processes and returns a value suitable for CSS (with a unit).
+ */
+export declare function getCssValue(value?: number | string | null, unit?: string): string;
+type CSSVariables = Partial<Record<`--${string}`, string>>;
+type StyleProperties = React.CSSProperties & CSSVariables;
+/**
+ * Merge multiple style objects, filtering out undefined values
+ */
+export declare function mergeStyles(...styles: (React.CSSProperties | undefined | null)[]): StyleProperties;
+/**
+ * Create CSS variables for offset positioning
+ */
+export declare function createOffsetStyles(offset?: [number | string, number | string], prefix?: string): React.CSSProperties | undefined;
+export {};

package/esm/internals/utils/css.js

@@ -0,0 +1,55 @@
+'use client';
+/**
+ * Processes and returns a value suitable for CSS (with a unit).
+ */
+export function getCssValue(value, unit) {
+  if (unit === void 0) {
+    unit = 'px';
+  }
+  if (value === undefined || value === null || value === '') {
+    return '';
+  }
+
+  // If the value is 0, return it as a string without unit
+  if (value === 0) {
+    return '0';
+  }
+
+  // If the value is a number, append the default unit (defaults to 'px')
+  if (typeof value === 'number') {
+    return `${value}${unit}`;
+  }
+
+  // Return string values as is
+  return value.toString();
+}
+/**
+ * Merge multiple style objects, filtering out undefined values
+ */
+export function mergeStyles() {
+  for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
+    styles[_key] = arguments[_key];
+  }
+  return styles.filter(Boolean).reduce((acc, style) => {
+    if (!style) return acc;
+    return {
+      ...acc,
+      ...style
+    };
+  }, {});
+}
+
+/**
+ * Create CSS variables for offset positioning
+ */
+export function createOffsetStyles(offset, prefix) {
+  if (prefix === void 0) {
+    prefix = '--rs-offset';
+  }
+  if (!offset) return undefined;
+  const [x, y] = offset;
+  return {
+    [`${prefix}-x`]: getCssValue(x),
+    [`${prefix}-y`]: getCssValue(y)
+  };
+}