rsuite 6.0.0-canary-20250622 → 6.0.0-canary-20250702

package/esm/internals/styled-system/css-alias.js

@@ -0,0 +1,387 @@
+'use client';
+import { getSizeValue, getColorValue } from "../utils/index.js";
+const transformRadiusValue = value => getSizeValue('radius', value);
+const transformShadowValue = value => getSizeValue('shadow', value);
+
+/**
+ * CSS Property Alias
+ * This type maps all the CSS properties defined in cssSystemPropAlias to their corresponding React CSS types
+ */
+export const cssSystemPropAlias = {
+  // — Spacing ————————————————————
+  p: {
+    type: 'any',
+    property: 'padding'
+  },
+  pt: {
+    type: 'any',
+    property: 'padding-top'
+  },
+  pr: {
+    type: 'any',
+    property: 'padding-right'
+  },
+  pb: {
+    type: 'any',
+    property: 'padding-bottom'
+  },
+  pl: {
+    type: 'any',
+    property: 'padding-left'
+  },
+  px: {
+    type: 'any',
+    property: 'padding-inline'
+  },
+  py: {
+    type: 'any',
+    property: 'padding-block'
+  },
+  ps: {
+    type: 'any',
+    property: 'padding-inline-start'
+  },
+  pe: {
+    type: 'any',
+    property: 'padding-inline-end'
+  },
+  m: {
+    type: 'any',
+    property: 'margin'
+  },
+  mt: {
+    type: 'any',
+    property: 'margin-top'
+  },
+  mr: {
+    type: 'any',
+    property: 'margin-right'
+  },
+  mb: {
+    type: 'any',
+    property: 'margin-bottom'
+  },
+  ml: {
+    type: 'any',
+    property: 'margin-left'
+  },
+  mx: {
+    type: 'any',
+    property: 'margin-inline'
+  },
+  my: {
+    type: 'any',
+    property: 'margin-block'
+  },
+  ms: {
+    type: 'any',
+    property: 'margin-inline-start'
+  },
+  me: {
+    type: 'any',
+    property: 'margin-inline-end'
+  },
+  // — Sizing ————————————————————
+  w: {
+    type: 'any',
+    property: 'width'
+  },
+  h: {
+    type: 'any',
+    property: 'height'
+  },
+  minw: {
+    type: 'any',
+    property: 'min-width'
+  },
+  maxw: {
+    type: 'any',
+    property: 'max-width'
+  },
+  minh: {
+    type: 'any',
+    property: 'min-height'
+  },
+  maxh: {
+    type: 'any',
+    property: 'max-height'
+  },
+  // — Layout & Position ————————————————————
+  display: {
+    type: 'any',
+    property: 'display'
+  },
+  pos: {
+    type: 'any',
+    property: 'position'
+  },
+  left: {
+    type: 'any',
+    property: 'left'
+  },
+  top: {
+    type: 'any',
+    property: 'top'
+  },
+  right: {
+    type: 'any',
+    property: 'right'
+  },
+  bottom: {
+    type: 'any',
+    property: 'bottom'
+  },
+  inset: {
+    type: 'any',
+    property: 'inset'
+  },
+  insetx: {
+    type: 'any',
+    property: 'inset-inline'
+  },
+  insety: {
+    type: 'any',
+    property: 'inset-block'
+  },
+  bsz: {
+    type: 'string',
+    property: 'box-sizing'
+  },
+  z: {
+    type: 'number',
+    property: 'z-index'
+  },
+  // — Background ————————————————————
+  bg: {
+    type: 'string',
+    property: 'background',
+    transformer: getColorValue
+  },
+  bgc: {
+    type: 'string',
+    property: 'background-color',
+    transformer: getColorValue
+  },
+  bgi: {
+    type: 'string',
+    property: 'background-image'
+  },
+  bga: {
+    type: 'string',
+    property: 'background-attachment'
+  },
+  bgp: {
+    type: 'string',
+    property: 'background-position'
+  },
+  bgsz: {
+    type: 'string',
+    property: 'background-size'
+  },
+  bgr: {
+    type: 'string',
+    property: 'background-repeat'
+  },
+  // — Typography ————————————————————
+  c: {
+    type: 'string',
+    property: 'color',
+    transformer: getColorValue
+  },
+  ff: {
+    type: 'string',
+    property: 'font-family'
+  },
+  fs: {
+    type: 'string',
+    property: 'font-size'
+  },
+  fw: {
+    type: 'string',
+    property: 'font-weight'
+  },
+  ta: {
+    type: 'string',
+    property: 'text-align'
+  },
+  tt: {
+    type: 'string',
+    property: 'text-transform'
+  },
+  td: {
+    type: 'string',
+    property: 'text-decoration'
+  },
+  tds: {
+    type: 'string',
+    property: 'text-decoration-style'
+  },
+  tdc: {
+    type: 'string',
+    property: 'text-decoration-color',
+    transformer: getColorValue
+  },
+  lts: {
+    type: 'string',
+    property: 'letter-spacing'
+  },
+  lh: {
+    type: 'any',
+    property: 'line-height'
+  },
+  // — Border ————————————————————
+  bd: {
+    type: 'string',
+    property: 'border'
+  },
+  bs: {
+    type: 'string',
+    property: 'border-style'
+  },
+  bc: {
+    type: 'string',
+    property: 'border-color',
+    transformer: getColorValue
+  },
+  bw: {
+    type: 'any',
+    property: 'border-width'
+  },
+  bdt: {
+    type: 'string',
+    property: 'border-top'
+  },
+  bdb: {
+    type: 'string',
+    property: 'border-bottom'
+  },
+  bdl: {
+    type: 'string',
+    property: 'border-left'
+  },
+  bdr: {
+    type: 'string',
+    property: 'border-right'
+  },
+  bdts: {
+    type: 'string',
+    property: 'border-top-style'
+  },
+  bdbs: {
+    type: 'string',
+    property: 'border-bottom-style'
+  },
+  bdls: {
+    type: 'string',
+    property: 'border-left-style'
+  },
+  bdrs: {
+    type: 'string',
+    property: 'border-right-style'
+  },
+  bdtc: {
+    type: 'string',
+    property: 'border-top-color',
+    transformer: getColorValue
+  },
+  bdbc: {
+    type: 'string',
+    property: 'border-bottom-color',
+    transformer: getColorValue
+  },
+  bdlc: {
+    type: 'string',
+    property: 'border-left-color',
+    transformer: getColorValue
+  },
+  bdrc: {
+    type: 'string',
+    property: 'border-right-color',
+    transformer: getColorValue
+  },
+  bdtw: {
+    type: 'any',
+    property: 'border-top-width'
+  },
+  bdbw: {
+    type: 'any',
+    property: 'border-bottom-width'
+  },
+  bdlw: {
+    type: 'any',
+    property: 'border-left-width'
+  },
+  bdrw: {
+    type: 'any',
+    property: 'border-right-width'
+  },
+  rounded: {
+    type: 'any',
+    property: 'border-radius',
+    transformer: transformRadiusValue
+  },
+  // — Shadow & Effects ————————————————————
+  shadow: {
+    type: 'any',
+    property: 'box-shadow',
+    transformer: transformShadowValue
+  },
+  opacity: {
+    type: 'any',
+    property: 'opacity'
+  },
+  // — Flex ————————————————————
+  gap: {
+    type: 'any',
+    property: 'gap'
+  },
+  spacing: {
+    type: 'any',
+    property: 'gap'
+  },
+  // alias for gap
+  rowgap: {
+    type: 'any',
+    property: 'row-gap'
+  },
+  colgap: {
+    type: 'any',
+    property: 'column-gap'
+  },
+  align: {
+    type: 'string',
+    property: 'align-items'
+  },
+  justify: {
+    type: 'string',
+    property: 'justify-content'
+  },
+  self: {
+    type: 'string',
+    property: 'align-self'
+  },
+  basis: {
+    type: 'any',
+    property: 'flex-basis'
+  },
+  flex: {
+    type: 'string',
+    property: 'flex'
+  },
+  grow: {
+    type: 'number',
+    property: 'flex-grow'
+  },
+  order: {
+    type: 'number',
+    property: 'order'
+  },
+  shrink: {
+    type: 'number',
+    property: 'flex-shrink'
+  },
+  direction: {
+    type: 'string',
+    property: 'flex-direction'
+  }
+};

package/esm/internals/styled-system/css-properties.d.ts

@@ -0,0 +1,6 @@
+/**
+ * List of commonly used CSS properties in React components
+ * Focused on layout, spacing, typography, and common UI patterns
+ */
+export declare const supportedCSSProperties: readonly ["display", "position", "top", "right", "bottom", "left", "zIndex", "boxSizing", "width", "height", "minWidth", "maxWidth", "minHeight", "maxHeight", "overflow", "overflowX", "overflowY", "aspectRatio", "padding", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "margin", "marginTop", "marginRight", "marginBottom", "marginLeft", "flex", "flexGrow", "flexShrink", "flexBasis", "flexDirection", "flexWrap", "justifyContent", "alignItems", "alignSelf", "alignContent", "gap", "rowGap", "columnGap", "order", "grid", "gridTemplate", "gridTemplateAreas", "gridTemplateColumns", "gridTemplateRows", "gridArea", "gridColumn", "gridRow", "gridAutoFlow", "gridAutoColumns", "gridAutoRows", "color", "fontFamily", "fontSize", "fontWeight", "fontStyle", "lineHeight", "textAlign", "textDecoration", "textTransform", "whiteSpace", "wordBreak", "wordWrap", "textOverflow", "letterSpacing", "background", "backgroundColor", "backgroundImage", "backgroundPosition", "backgroundSize", "backgroundRepeat", "border", "borderColor", "borderStyle", "borderWidth", "borderRadius", "borderTop", "borderRight", "borderBottom", "borderLeft", "boxShadow", "opacity", "transform", "transformOrigin", "transition", "transitionProperty", "transitionDuration", "transitionTimingFunction", "transitionDelay", "cursor", "pointerEvents", "userSelect", "visibility", "scrollBehavior", "scrollbarWidth", "scrollbarColor", "overscrollBehavior", "clipPath", "filter", "objectFit", "objectPosition", "resize"];
+export type SupportedCSSProperty = (typeof supportedCSSProperties)[number];

package/esm/internals/styled-system/css-properties.js

@@ -0,0 +1,26 @@
+'use client';
+/**
+ * List of commonly used CSS properties in React components
+ * Focused on layout, spacing, typography, and common UI patterns
+ */
+export const supportedCSSProperties = [
+// Layout & Box Model
+'display', 'position', 'top', 'right', 'bottom', 'left', 'zIndex', 'boxSizing', 'width', 'height', 'minWidth', 'maxWidth', 'minHeight', 'maxHeight', 'overflow', 'overflowX', 'overflowY', 'aspectRatio',
+// Spacing
+'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft',
+// Flexbox
+'flex', 'flexGrow', 'flexShrink', 'flexBasis', 'flexDirection', 'flexWrap', 'justifyContent', 'alignItems', 'alignSelf', 'alignContent', 'gap', 'rowGap', 'columnGap', 'order',
+// Grid
+'grid', 'gridTemplate', 'gridTemplateAreas', 'gridTemplateColumns', 'gridTemplateRows', 'gridArea', 'gridColumn', 'gridRow', 'gridAutoFlow', 'gridAutoColumns', 'gridAutoRows',
+// Typography
+'color', 'fontFamily', 'fontSize', 'fontWeight', 'fontStyle', 'lineHeight', 'textAlign', 'textDecoration', 'textTransform', 'whiteSpace', 'wordBreak', 'wordWrap', 'textOverflow', 'letterSpacing',
+// Background & Borders
+'background', 'backgroundColor', 'backgroundImage', 'backgroundPosition', 'backgroundSize', 'backgroundRepeat', 'border', 'borderColor', 'borderStyle', 'borderWidth', 'borderRadius', 'borderTop', 'borderRight', 'borderBottom', 'borderLeft', 'boxShadow', 'opacity',
+// Transforms & Transitions
+'transform', 'transformOrigin', 'transition', 'transitionProperty', 'transitionDuration', 'transitionTimingFunction', 'transitionDelay',
+// Interactivity
+'cursor', 'pointerEvents', 'userSelect', 'visibility',
+// Scroll
+'scrollBehavior', 'scrollbarWidth', 'scrollbarColor', 'overscrollBehavior',
+// Other
+'clipPath', 'filter', 'objectFit', 'objectPosition', 'resize'];

package/esm/internals/styled-system/index.d.ts

@@ -0,0 +1,5 @@
+export * from './responsive';
+export * from './useStyled';
+export * from './style-manager';
+export * from './css-alias';
+export * from './types';

package/esm/internals/styled-system/index.js

@@ -0,0 +1,6 @@
+'use client';
+export * from "./responsive.js";
+export * from "./useStyled.js";
+export * from "./style-manager.js";
+export * from "./css-alias.js";
+export * from "./types.js";

package/esm/internals/styled-system/responsive.d.ts

@@ -0,0 +1,26 @@
+import type { Breakpoints, ResponsiveValue, WithResponsive } from '../types';
+/**
+ * Breakpoint values in pixels - matching SCSS variables
+ * These values are used for responsive design across the application.
+ * They follow a mobile-first approach where 'xs' is the base breakpoint.
+ */
+export declare const breakpointValues: Record<Breakpoints, number>;
+/**
+ * Checks if a value is a responsive value object
+ * @param value - Value to check
+ * @returns True if the value is a responsive value object
+ */
+export declare function isResponsiveValue(value: any): value is ResponsiveValue<any>;
+/**
+ * Process a value that might be a responsive value
+ * @param value - Value to process
+ * @param processor - Function to process non-responsive values
+ * @returns Processed value or responsive object with processed values
+ */
+export declare function processResponsiveValue<T, R extends string | number | undefined>(value: T | ResponsiveValue<T> | undefined, processor: (val: T) => R): R | ResponsiveValue<R> | undefined;
+type CSSVarValue = WithResponsive<string | number | undefined>;
+/**
+ * Converts layout properties to CSS variables with abbreviated names
+ */
+export declare const getCSSVariables: (props: Record<string, any>, prefix?: string) => Record<string, CSSVarValue>;
+export {};

package/esm/internals/styled-system/responsive.js

@@ -0,0 +1,110 @@
+'use client';
+import camelCase from 'lodash/camelCase';
+import kebabCase from 'lodash/kebabCase';
+import { getCssValue, isCSSProperty } from "../utils/index.js";
+import { BREAKPOINTS } from "../constants/index.js";
+import { cssSystemPropAlias } from "./css-alias.js";
+/**
+ * Breakpoint values in pixels - matching SCSS variables
+ * These values are used for responsive design across the application.
+ * They follow a mobile-first approach where 'xs' is the base breakpoint.
+ */
+export const breakpointValues = {
+  xs: 0,
+  // Base mobile first
+  sm: 576,
+  // $screen-sm
+  md: 768,
+  // $screen-md
+  lg: 992,
+  // $screen-lg
+  xl: 1200,
+  // $screen-xl
+  xxl: 1400,
+  // $screen-xxl
+  '2xl': 1400 // Alias for xxl for compatibility
+};
+
+/**
+ * Checks if a value is a responsive value object
+ * @param value - Value to check
+ * @returns True if the value is a responsive value object
+ */
+export function isResponsiveValue(value) {
+  return value !== null && typeof value === 'object' && !Array.isArray(value) && Object.keys(value).some(key => BREAKPOINTS.includes(key));
+}
+
+/**
+ * Process a value that might be a responsive value
+ * @param value - Value to process
+ * @param processor - Function to process non-responsive values
+ * @returns Processed value or responsive object with processed values
+ */
+export function processResponsiveValue(value, processor) {
+  if (value === undefined) {
+    return undefined;
+  }
+  if (isResponsiveValue(value)) {
+    const result = {};
+    Object.entries(value).forEach(([breakpoint, val]) => {
+      if (val !== undefined) {
+        const processed = processor(val);
+        if (processed !== undefined) {
+          result[breakpoint] = processed;
+        }
+      }
+    });
+    return Object.keys(result).length > 0 ? result : undefined;
+  }
+  return processor(value);
+}
+
+// Type for CSS variable values that can be string, number, or responsive values
+
+const transformCSSValue = (value, type) => {
+  if (type === 'number') {
+    return value;
+  }
+  return getCssValue(value);
+};
+
+/**
+ * Converts layout properties to CSS variables with abbreviated names
+ */
+export const getCSSVariables = (props, prefix = `--rs-`) => {
+  const cssVars = {};
+  const cssVar = name => `${prefix}${kebabCase(name)}`;
+  const getCSSProperty = name => {
+    let cssName = name;
+    let cssProp = cssSystemPropAlias[name];
+    if (!cssProp) {
+      Object.entries(cssSystemPropAlias).forEach(([key, prop]) => {
+        if (camelCase(prop.property) === name) {
+          cssProp = prop;
+          cssName = key;
+        }
+      });
+    }
+    return [cssName, cssProp];
+  };
+  Object.entries(props).forEach(([name, value]) => {
+    if (typeof value === 'undefined') {
+      return;
+    }
+    const [cssName, cssProp] = getCSSProperty(name);
+    const varName = cssVar(cssName);
+    if (cssProp) {
+      const {
+        transformer,
+        type
+      } = cssProp;
+      cssVars[varName] = processResponsiveValue(value, val => {
+        return transformer ? transformer(val) : transformCSSValue(val, type);
+      });
+    } else if (isCSSProperty(cssName)) {
+      // For non-predefined CSS properties, directly process with getCssValue
+      cssVars[varName] = processResponsiveValue(value, val => getCssValue(val));
+    }
+  });
+  return cssVars;
+};