@seed-design/react 0.0.0-alpha-20260324091316

package/lib/utils/createWithStateProps.d.ts

@@ -0,0 +1,14 @@
+import { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react';
+type AtLeastOne<T> = [T, ...T[]];
+type ContextHook = (prop?: {
+    strict?: boolean;
+}) => {
+    stateProps: React.HTMLAttributes<HTMLElement>;
+} | null;
+type ContextConfig = ContextHook | {
+    useContext: ContextHook;
+    strict?: boolean;
+};
+export declare function createWithStateProps(useContexts: AtLeastOne<ContextConfig>): <P, R>(Component: React.ComponentType<P & React.RefAttributes<R>>) => ForwardRefExoticComponent< PropsWithoutRef<P> & RefAttributes<R>>;
+export {};
+//# sourceMappingURL=createWithStateProps.d.ts.map

package/lib/utils/createWithStateProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createWithStateProps.d.ts","sourceRoot":"","sources":["../../src/utils/createWithStateProps.tsx"],"names":[],"mappings":";AAEA,KAAK,UAAU,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;AAEjC,KAAK,WAAW,GAAG,CAAC,IAAI,CAAC,EAAE;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,KAAK;IAAE,UAAU,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAA;CAAE,GAAG,IAAI,CAAC;AAE/D,KAAK,aAAa,GAAG,WAAW,GAAG;IAAE,UAAU,EAAE,WAAW,CAAC;IAAC,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAEjF,wBAAgB,oBAAoB,CAAC,WAAW,EAAE,UAAU,CAAC,aAAa,CAAC,IAC1C,CAAC,EAAE,CAAC,EAAE,WAAW,KAAK,CAAC,aAAa,CAAC,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,sHAqBhG"}

package/lib/utils/createWithStateProps.js

@@ -0,0 +1,24 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+
+function createWithStateProps(useContexts) {
+  return function withStateProps(Component) {
+    const Node = forwardRef((props, ref) => {
+      const stateProps = {};
+      for (const contextConfig of useContexts) {
+        if (typeof contextConfig === "function") {
+          Object.assign(stateProps, contextConfig({ strict: true })?.stateProps);
+        } else {
+          const { useContext, strict = false } = contextConfig;
+          Object.assign(stateProps, useContext({ strict })?.stateProps);
+        }
+      }
+      return /* @__PURE__ */ jsx(Component, { ref, ...stateProps, ...props });
+    });
+    Node.displayName = Component.displayName || Component.name;
+    return Node;
+  };
+}
+
+export { createWithStateProps };

package/lib/utils/splitMultipleVariantsProps.cjs

@@ -0,0 +1,32 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+function splitMultipleVariantsProps(props, recipesMap) {
+  const multipleVariantsProps = {};
+  const extractedKeys = new Set();
+
+  for (const recipeKey in recipesMap) {
+    const recipe = recipesMap[recipeKey];
+
+    const [variantProps] = recipe.splitVariantProps(props);
+    multipleVariantsProps[recipeKey] = variantProps;
+
+    for (const variantPropKey in variantProps) {
+      extractedKeys.add(variantPropKey);
+    }
+  }
+
+  const remainingProps = {};
+
+  for (const propKey in props) {
+    if (extractedKeys.has(propKey)) continue;
+
+    remainingProps[propKey] = props[propKey];
+  }
+
+  return [multipleVariantsProps, remainingProps];
+}
+
+exports.splitMultipleVariantsProps = splitMultipleVariantsProps;

package/lib/utils/splitMultipleVariantsProps.d.ts

@@ -0,0 +1,21 @@
+type ExtractVariantProps<T> = T extends {
+  splitVariantProps: (...args: never[]) => [infer V, unknown];
+}
+  ? V
+  : never;
+
+type ExtractAllVariantKeys<R> = {
+  [K in keyof R]: ExtractVariantProps<R[K]> extends infer V
+    ? V extends Record<string, unknown>
+      ? keyof V
+      : never
+    : never;
+}[keyof R];
+
+export declare function splitMultipleVariantsProps<
+  R extends Record<string, { splitVariantProps: (...args: never[]) => unknown[] }>,
+  P,
+>(
+  props: P,
+  recipesMap: R,
+): [{ [K in keyof R]: ExtractVariantProps<R[K]> }, Omit<P, ExtractAllVariantKeys<R>>];

package/lib/utils/splitMultipleVariantsProps.js

@@ -0,0 +1,28 @@
+'use client';
+function splitMultipleVariantsProps(props, recipesMap) {
+  const multipleVariantsProps = {};
+  const extractedKeys = new Set();
+
+  for (const recipeKey in recipesMap) {
+    const recipe = recipesMap[recipeKey];
+
+    const [variantProps] = recipe.splitVariantProps(props);
+    multipleVariantsProps[recipeKey] = variantProps;
+
+    for (const variantPropKey in variantProps) {
+      extractedKeys.add(variantPropKey);
+    }
+  }
+
+  const remainingProps = {};
+
+  for (const propKey in props) {
+    if (extractedKeys.has(propKey)) continue;
+
+    remainingProps[propKey] = props[propKey];
+  }
+
+  return [multipleVariantsProps, remainingProps];
+}
+
+export { splitMultipleVariantsProps };

package/lib/utils/styled.cjs

@@ -0,0 +1,353 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const vars = require('@seed-design/css/vars');
+const React = require('react');
+const responsive = require('../types/responsive.cjs');
+
+function resolveResponsive(varName, value, transform) {
+  if (!responsive.isResponsiveObject(value)) {
+    const transformed = transform(value);
+    if (transformed === void 0) return {};
+    return { [`${varName}-base`]: transformed };
+  }
+  const result = {};
+  for (const [breakpoint, breakpointValue] of Object.entries(value)) {
+    if (breakpointValue === void 0) continue;
+    const transformed = transform(breakpointValue);
+    if (transformed === void 0) continue;
+    result[`${varName}-${breakpoint}`] = transformed;
+  }
+  return result;
+}
+function handleColor(color) {
+  if (!color) {
+    return void 0;
+  }
+  const [type, value] = color.split(".");
+  return vars.vars.$color[type]?.[value] ?? color;
+}
+function handleDimension(dimension) {
+  if (dimension == null) {
+    return void 0;
+  }
+  if (typeof dimension === "number") {
+    return `${dimension}px`;
+  }
+  if (dimension === "full") {
+    return "100%";
+  }
+  const [type, value] = dimension.split(".");
+  return vars.vars.$dimension[dimension] ?? vars.vars.$dimension[type]?.[value] ?? dimension;
+}
+function handleBleed(dimension, direction) {
+  if (dimension === "asPadding") {
+    return `var(--seed-box-padding-${direction})`;
+  }
+  return handleDimension(dimension);
+}
+function handleShadow(shadow) {
+  if (!shadow) {
+    return void 0;
+  }
+  return vars.vars.$shadow[shadow] ?? shadow;
+}
+function handlePaddingWithSafeArea(padding, direction) {
+  if (padding === "safeArea") {
+    return `var(--seed-safe-area-${direction})`;
+  }
+  const paddingValue = handleDimension(padding);
+  return paddingValue;
+}
+function handleRadius(radius) {
+  if (radius == null) {
+    return void 0;
+  }
+  return vars.vars.$radius[radius] ?? radius;
+}
+function handleGradient(gradientToken, direction) {
+  if (!gradientToken || !direction) {
+    return void 0;
+  }
+  const colorStops = vars.vars.$gradient[gradientToken];
+  if (!colorStops) {
+    return void 0;
+  }
+  return `linear-gradient(${direction}, ${colorStops})`;
+}
+function handleDisplay(display) {
+  if (!display) {
+    return void 0;
+  }
+  if (process.env.NODE_ENV !== "production") {
+    if (display === "inlineFlex" || display === "inlineBlock") {
+      console.warn(
+        `[SEED Design System] display='${display}' is deprecated and will be removed in @seed-design/react@1.3.0. Use display='${display === "inlineFlex" ? "inline-flex" : "inline-block"}' instead.`
+      );
+    }
+  }
+  return {
+    flex: "flex",
+    grid: "grid",
+    inlineFlex: "inline-flex",
+    // @deprecated Use `inline-flex` instead.
+    inlineBlock: "inline-block",
+    // @deprecated Use `inline-block` instead.
+    none: "none"
+  }[display] ?? display;
+}
+function handleFlexDirection(flexDirection) {
+  if (!flexDirection) {
+    return void 0;
+  }
+  if (process.env.NODE_ENV !== "production") {
+    if (flexDirection === "rowReverse" || flexDirection === "columnReverse") {
+      console.warn(
+        `[SEED Design System] flexDirection='${flexDirection}' is deprecated and will be removed in @seed-design/react@1.3.0. Use flexDirection='${flexDirection === "rowReverse" ? "row-reverse" : "column-reverse"}' instead.`
+      );
+    }
+  }
+  return {
+    row: "row",
+    column: "column",
+    rowReverse: "row-reverse",
+    // @deprecated Use `row-reverse` instead.
+    columnReverse: "column-reverse"
+    // @deprecated Use `column-reverse` instead.
+  }[flexDirection] ?? flexDirection;
+}
+function handleJustifyContent(justifyContent) {
+  if (!justifyContent) {
+    return void 0;
+  }
+  if (process.env.NODE_ENV !== "production") {
+    if (justifyContent === "flexStart" || justifyContent === "flexEnd") {
+      console.warn(
+        `[SEED Design System] justifyContent='${justifyContent}' is deprecated and will be removed in @seed-design/react@1.3.0. Use justifyContent='${justifyContent === "flexStart" ? "flex-start" : "flex-end"}' instead.`
+      );
+    }
+    if (justifyContent === "spaceBetween" || justifyContent === "spaceAround") {
+      console.warn(
+        `[SEED Design System] justifyContent='${justifyContent}' is deprecated and will be removed in @seed-design/react@1.3.0. Use justifyContent='${justifyContent === "spaceBetween" ? "space-between" : "space-around"}' instead.`
+      );
+    }
+  }
+  return {
+    flexStart: "flex-start",
+    // @deprecated Use `flex-start` instead.
+    flexEnd: "flex-end",
+    // @deprecated Use `flex-end` instead.
+    center: "center",
+    spaceBetween: "space-between",
+    // @deprecated Use `space-between` instead.
+    spaceAround: "space-around"
+    // @deprecated Use `space-around` instead.
+  }[justifyContent] ?? justifyContent;
+}
+function handleAlignItems(alignItems) {
+  if (!alignItems) {
+    return void 0;
+  }
+  if (process.env.NODE_ENV !== "production") {
+    if (alignItems === "flexStart" || alignItems === "flexEnd") {
+      console.warn(
+        `[SEED Design System] alignItems='${alignItems}' is deprecated and will be removed in @seed-design/react@1.3.0. Use alignItems='${alignItems === "flexStart" ? "flex-start" : "flex-end"}' instead.`
+      );
+    }
+  }
+  return {
+    flexStart: "flex-start",
+    // @deprecated Use `flex-start` instead.
+    flexEnd: "flex-end",
+    // @deprecated Use `flex-end` instead.
+    center: "center",
+    stretch: "stretch"
+  }[alignItems] ?? alignItems;
+}
+function useStyleProps(props) {
+  const {
+    background,
+    bg,
+    bgGradient,
+    backgroundGradient,
+    bgGradientDirection,
+    backgroundGradientDirection,
+    color,
+    borderColor,
+    borderWidth,
+    borderTopWidth,
+    borderRightWidth,
+    borderBottomWidth,
+    borderLeftWidth,
+    borderRadius,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomRightRadius,
+    borderBottomLeftRadius,
+    boxShadow,
+    width,
+    minWidth,
+    maxWidth,
+    height,
+    minHeight,
+    maxHeight,
+    padding,
+    paddingX,
+    paddingY,
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft,
+    p,
+    px,
+    py,
+    pt,
+    pr,
+    pb,
+    pl,
+    bleedX,
+    bleedY,
+    bleedTop,
+    bleedRight,
+    bleedBottom,
+    bleedLeft,
+    bottom,
+    left,
+    right,
+    top,
+    display,
+    position,
+    overflowX,
+    overflowY,
+    zIndex,
+    flexGrow,
+    flexShrink,
+    flexDirection,
+    flexWrap,
+    justifyContent,
+    justifySelf,
+    alignItems,
+    alignContent,
+    alignSelf,
+    gap,
+    gridColumn,
+    gridRow,
+    unstable_transform,
+    _active,
+    style,
+    ...restProps
+  } = props;
+  const gradientValue = handleGradient(
+    bgGradient ?? backgroundGradient,
+    bgGradientDirection ?? backgroundGradientDirection
+  );
+  return {
+    style: {
+      // Non-responsive props
+      "--seed-box-background": handleColor(background ?? bg) ?? gradientValue,
+      "--seed-box-color": handleColor(color),
+      "--seed-box-border-color": handleColor(borderColor),
+      "--seed-box-border-width": borderWidth !== void 0 ? `${borderWidth}px` : void 0,
+      "--seed-box-border-top-width": borderTopWidth !== void 0 ? `${borderTopWidth}px` : void 0,
+      "--seed-box-border-right-width": borderRightWidth !== void 0 ? `${borderRightWidth}px` : void 0,
+      "--seed-box-border-bottom-width": borderBottomWidth !== void 0 ? `${borderBottomWidth}px` : void 0,
+      "--seed-box-border-left-width": borderLeftWidth !== void 0 ? `${borderLeftWidth}px` : void 0,
+      "--seed-box-border-radius": handleRadius(borderRadius),
+      "--seed-box-border-top-left-radius": handleRadius(borderTopLeftRadius),
+      "--seed-box-border-top-right-radius": handleRadius(borderTopRightRadius),
+      "--seed-box-border-bottom-right-radius": handleRadius(borderBottomRightRadius),
+      "--seed-box-border-bottom-left-radius": handleRadius(borderBottomLeftRadius),
+      "--seed-box-box-shadow": handleShadow(boxShadow),
+      "--seed-box-top": top,
+      "--seed-box-left": left,
+      "--seed-box-right": right,
+      "--seed-box-bottom": bottom,
+      "--seed-box-position": position,
+      "--seed-box-overflow-x": overflowX,
+      "--seed-box-overflow-y": overflowY,
+      "--seed-box-z-index": zIndex,
+      "--seed-box-flex-grow": flexGrow === true ? 1 : flexGrow,
+      "--seed-box-flex-shrink": flexShrink === true ? 1 : flexShrink,
+      "--seed-box-flex-wrap": flexWrap === true ? "wrap" : flexWrap,
+      "--seed-box-justify-content": handleJustifyContent(justifyContent),
+      "--seed-box-justify-self": justifySelf,
+      "--seed-box-align-items": handleAlignItems(alignItems),
+      "--seed-box-align-content": handleAlignItems(alignContent),
+      "--seed-box-align-self": handleAlignItems(alignSelf),
+      "--seed-box-grid-column": gridColumn,
+      "--seed-box-grid-row": gridRow,
+      "--seed-box-unstable-transform": unstable_transform,
+      // Active
+      "--seed-box-background--active": handleColor(_active?.bg ?? _active?.background),
+      // Responsive props (breakpoint-suffixed)
+      ...width !== void 0 && resolveResponsive("--seed-box-width", width, handleDimension),
+      ...minWidth !== void 0 && resolveResponsive("--seed-box-min-width", minWidth, handleDimension),
+      ...maxWidth !== void 0 && resolveResponsive("--seed-box-max-width", maxWidth, handleDimension),
+      ...height !== void 0 && resolveResponsive("--seed-box-height", height, handleDimension),
+      ...minHeight !== void 0 && resolveResponsive("--seed-box-min-height", minHeight, handleDimension),
+      ...maxHeight !== void 0 && resolveResponsive("--seed-box-max-height", maxHeight, handleDimension),
+      ...(padding ?? p) !== void 0 && resolveResponsive("--seed-box-padding", padding ?? p, handleDimension),
+      ...(paddingX ?? px) !== void 0 && resolveResponsive("--seed-box-padding-x", paddingX ?? px, handleDimension),
+      ...(paddingY ?? py) !== void 0 && resolveResponsive("--seed-box-padding-y", paddingY ?? py, handleDimension),
+      ...(paddingTop ?? pt) !== void 0 && resolveResponsive(
+        "--seed-box-padding-top",
+        paddingTop ?? pt,
+        (v) => handlePaddingWithSafeArea(v, "top")
+      ),
+      ...(paddingRight ?? pr) !== void 0 && resolveResponsive("--seed-box-padding-right", paddingRight ?? pr, handleDimension),
+      ...(paddingBottom ?? pb) !== void 0 && resolveResponsive(
+        "--seed-box-padding-bottom",
+        paddingBottom ?? pb,
+        (v) => handlePaddingWithSafeArea(v, "bottom")
+      ),
+      ...(paddingLeft ?? pl) !== void 0 && resolveResponsive("--seed-box-padding-left", paddingLeft ?? pl, handleDimension),
+      ...(bleedTop ?? bleedY) !== void 0 && resolveResponsive(
+        "--seed-box-bleed-top",
+        bleedTop ?? bleedY,
+        (v) => handleBleed(v, "top")
+      ),
+      ...(bleedRight ?? bleedX) !== void 0 && resolveResponsive(
+        "--seed-box-bleed-right",
+        bleedRight ?? bleedX,
+        (v) => handleBleed(v, "right")
+      ),
+      ...(bleedBottom ?? bleedY) !== void 0 && resolveResponsive(
+        "--seed-box-bleed-bottom",
+        bleedBottom ?? bleedY,
+        (v) => handleBleed(v, "bottom")
+      ),
+      ...(bleedLeft ?? bleedX) !== void 0 && resolveResponsive(
+        "--seed-box-bleed-left",
+        bleedLeft ?? bleedX,
+        (v) => handleBleed(v, "left")
+      ),
+      ...gap !== void 0 && resolveResponsive("--seed-box-gap", gap, handleDimension),
+      ...display !== void 0 && resolveResponsive("--seed-box-display", display, handleDisplay),
+      ...flexDirection !== void 0 && resolveResponsive("--seed-box-flex-direction", flexDirection, handleFlexDirection),
+      ...style
+    },
+    restProps: {
+      ...restProps,
+      // see global.ts to understand why we need this
+      ...(_active?.bg != null || _active?.background != null) && { "data-has-active-bg": "" }
+    }
+  };
+}
+function withStyleProps(Component) {
+  const Node = React.forwardRef((props, ref) => {
+    const { style, restProps } = useStyleProps(props);
+    return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, style, ...restProps });
+  });
+  Node.displayName = Component.displayName || Component.name;
+  return Node;
+}
+
+exports.handleColor = handleColor;
+exports.handleDimension = handleDimension;
+exports.handleRadius = handleRadius;
+exports.resolveResponsive = resolveResponsive;
+exports.useStyleProps = useStyleProps;
+exports.withStyleProps = withStyleProps;

package/lib/utils/styled.d.ts

@@ -0,0 +1,160 @@
+import { ScopedColorBg, ScopedColorFg, ScopedColorPalette, ScopedColorStroke, Dimension, Radius, SpacingX, SpacingY, Gradient, Shadow, ScopedColorBanner } from '@seed-design/css/vars';
+import { ResponsiveValue } from '../types/responsive';
+import { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react';
+export declare function resolveResponsive<T>(varName: string, value: ResponsiveValue<T>, transform: (v: T) => string | number | undefined): Record<string, string | number>;
+export declare function handleColor(color: string | undefined): any;
+export declare function handleDimension(dimension: string | 0 | undefined): string | undefined;
+export declare function handleRadius(radius: string | 0 | undefined): any;
+export interface StyleProps {
+    /**
+     * Shorthand for `background`.
+     */
+    bg?: ScopedColorBg | ScopedColorPalette | ScopedColorBanner | (string & {});
+    background?: ScopedColorBg | ScopedColorPalette | ScopedColorBanner | (string & {});
+    /**
+     * Shorthand for `backgroundGradient`.
+     */
+    bgGradient?: Gradient;
+    backgroundGradient?: Gradient;
+    /**
+     * Shorthand for `backgroundGradientDirection`.
+     * e.g. `43deg`
+     */
+    bgGradientDirection?: "to right" | "to left" | "to top" | "to bottom" | "to top right" | "to top left" | "to bottom right" | "to bottom left" | (string & {});
+    /**
+     * e.g. `43deg`
+     */
+    backgroundGradientDirection?: "to right" | "to left" | "to top" | "to bottom" | "to top right" | "to top left" | "to bottom right" | "to bottom left" | (string & {});
+    color?: ScopedColorFg | ScopedColorPalette | (string & {});
+    borderColor?: ScopedColorStroke | ScopedColorPalette | (string & {});
+    borderWidth?: 0 | 1 | (string & {});
+    borderTopWidth?: 0 | 1 | (string & {});
+    borderRightWidth?: 0 | 1 | (string & {});
+    borderBottomWidth?: 0 | 1 | (string & {});
+    borderLeftWidth?: 0 | 1 | (string & {});
+    borderRadius?: Radius | 0 | (string & {});
+    borderTopLeftRadius?: Radius | 0 | (string & {});
+    borderTopRightRadius?: Radius | 0 | (string & {});
+    borderBottomRightRadius?: Radius | 0 | (string & {});
+    borderBottomLeftRadius?: Radius | 0 | (string & {});
+    boxShadow?: Shadow | (string & {});
+    width?: ResponsiveValue<Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | "full" | (string & {})>;
+    minWidth?: ResponsiveValue<Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | "full" | (string & {})>;
+    maxWidth?: ResponsiveValue<Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | "full" | (string & {})>;
+    height?: ResponsiveValue<Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | "full" | (string & {})>;
+    minHeight?: ResponsiveValue<Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | "full" | (string & {})>;
+    maxHeight?: ResponsiveValue<Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | "full" | (string & {})>;
+    top?: 0 | (string & {});
+    left?: 0 | (string & {});
+    right?: 0 | (string & {});
+    bottom?: 0 | (string & {});
+    padding?: ResponsiveValue<Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {})>;
+    /**
+     * Shorthand for `padding`.
+     */
+    p?: ResponsiveValue<Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {})>;
+    paddingX?: ResponsiveValue<Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {})>;
+    /**
+     * Shorthand for `paddingX`.
+     */
+    px?: ResponsiveValue<Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {})>;
+    paddingY?: ResponsiveValue<Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {})>;
+    /**
+     * Shorthand for `paddingY`.
+     */
+    py?: ResponsiveValue<Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {})>;
+    paddingTop?: ResponsiveValue<Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | "safeArea" | (string & {})>;
+    /**
+     * Shorthand for `paddingTop`.
+     */
+    pt?: ResponsiveValue<Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | "safeArea" | (string & {})>;
+    paddingRight?: ResponsiveValue<Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {})>;
+    /**
+     * Shorthand for `paddingRight`.
+     */
+    pr?: ResponsiveValue<Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {})>;
+    paddingBottom?: ResponsiveValue<Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | "safeArea" | (string & {})>;
+    /**
+     * Shorthand for `paddingBottom`.
+     */
+    pb?: ResponsiveValue<Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | "safeArea" | (string & {})>;
+    paddingLeft?: ResponsiveValue<Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {})>;
+    /**
+     * Shorthand for `paddingLeft`.
+     */
+    pl?: ResponsiveValue<Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {})>;
+    /**
+     * Negative x-axis margin to extend the element outside its parent.
+     * If set to "asPadding", it will use the padding value in the same direction.
+     */
+    bleedX?: ResponsiveValue<"asPadding" | Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {})>;
+    /**
+     * Negative y-axis margin to extend the element outside its parent.
+     * If set to "asPadding", it will use the padding value in the same direction.
+     */
+    bleedY?: ResponsiveValue<"asPadding" | Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {})>;
+    /**
+     * Negative top margin to extend the element outside its parent.
+     * If set to "asPadding", it will use the padding value in the same direction.
+     */
+    bleedTop?: ResponsiveValue<"asPadding" | Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {})>;
+    /**
+     * Negative right margin to extend the element outside its parent.
+     * If set to "asPadding", it will use the padding value in the same direction.
+     */
+    bleedRight?: ResponsiveValue<"asPadding" | Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {})>;
+    /**
+     * Negative bottom margin to extend the element outside its parent.
+     * If set to "asPadding", it will use the padding value in the same direction.
+     */
+    bleedBottom?: ResponsiveValue<"asPadding" | Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {})>;
+    /**
+     * Negative left margin to extend the element outside its parent.
+     * If set to "asPadding", it will use the padding value in the same direction.
+     */
+    bleedLeft?: ResponsiveValue<"asPadding" | Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {})>;
+    display?: ResponsiveValue<"block" | "flex" | "grid" | "inline-flex" | "inline" | "inline-block" | "none" | "inlineFlex" | "inlineBlock">;
+    position?: "relative" | "absolute" | "fixed" | "sticky";
+    overflowX?: "visible" | "hidden" | "scroll" | "auto";
+    overflowY?: "visible" | "hidden" | "scroll" | "auto";
+    zIndex?: number | (string & {});
+    /**
+     * If true, flex-grow will be set to `1`.
+     */
+    flexGrow?: 0 | 1 | (number & {}) | true;
+    /**
+     * If true, flex-shrink will be set to `1`.
+     */
+    flexShrink?: 0 | (number & {}) | true;
+    flexDirection?: ResponsiveValue<"row" | "column" | "row-reverse" | "column-reverse" | "rowReverse" | "columnReverse">;
+    /**
+     * If true, flex-wrap will be set to `wrap`.
+     */
+    flexWrap?: "wrap" | "wrap-reverse" | "nowrap" | true;
+    justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "flexStart" | "flexEnd" | "spaceBetween" | "spaceAround";
+    /**
+     * In flexbox layout, this property is ignored.
+     */
+    justifySelf?: "center" | "start" | "end" | "stretch";
+    alignItems?: "flex-start" | "flex-end" | "center" | "stretch" | "flexStart" | "flexEnd";
+    alignContent?: "flex-start" | "flex-end" | "center" | "stretch" | "flexStart" | "flexEnd";
+    alignSelf?: "flex-start" | "flex-end" | "center" | "stretch" | "flexStart" | "flexEnd";
+    gap?: ResponsiveValue<Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {})>;
+    gridColumn?: string;
+    gridRow?: string;
+    unstable_transform?: string;
+    _active?: {
+        bg?: ScopedColorBg | ScopedColorPalette | (string & {});
+        background?: ScopedColorBg | ScopedColorPalette | (string & {});
+    };
+}
+interface UseStyleProps extends StyleProps {
+    style?: React.CSSProperties;
+}
+export declare function useStyleProps<T extends UseStyleProps>(props: T): {
+    style: React.CSSProperties;
+    restProps: Omit<T, keyof UseStyleProps>;
+};
+export declare function withStyleProps<P extends {}, R>(Component: React.ComponentType<P & React.RefAttributes<R>>): ForwardRefExoticComponent< PropsWithoutRef<P> & RefAttributes<R>>;
+export {};
+//# sourceMappingURL=styled.d.ts.map

package/lib/utils/styled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../src/utils/styled.tsx"],"names":[],"mappings":"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"}