@marigold/system 4.2.1 → 5.0.0

package/dist/index.d.ts

@@ -1,26 +1,26 @@
-import { Simplify, PolymorphicPropsWithRef, PolymorphicComponentWithRef, ComponentProps, KebabCase } from '@marigold/types';
+import { Simplify, PropsOf, PolymorphicComponent, HtmlProps, KebabCase } from '@marigold/types';
 import * as _theme_ui_css from '@theme-ui/css';
 import { ResponsiveStyleValue as ResponsiveStyleValue$1, ThemeUIStyleObject, ThemeUICSSObject, ThemeUICSSProperties, NestedScaleDict } from '@theme-ui/css';
 import * as react from 'react';
 import { ReactNode } from 'react';
 import * as CSS from 'csstype';
 
-declare type ResponsiveStyleValue<T> = ResponsiveStyleValue$1<T>;
-declare type StyleObject = ThemeUIStyleObject;
-declare type CSSObject = Simplify<ThemeUICSSObject>;
-declare type CSSProperties = Simplify<ThemeUICSSProperties>;
+type ResponsiveStyleValue<T> = ResponsiveStyleValue$1<T>;
+type StyleObject = ThemeUIStyleObject;
+type CSSObject = Simplify<ThemeUICSSObject>;
+type CSSProperties = Simplify<ThemeUICSSProperties>;
 
 /**
  * Props that every component should accepts to change the styling
  */
-declare type ThemeComponentProps = {
+type ThemeComponentProps = {
     variant?: string;
     size?: string;
 };
 /**
  * Structure for component styles in a theme.
  */
-declare type ThemeExtension<ComponentName extends string> = {
+type ThemeExtension<ComponentName extends string> = {
     [P in ComponentName]?: {
         base?: CSSObject;
         variant?: {
@@ -34,7 +34,7 @@ declare type ThemeExtension<ComponentName extends string> = {
 /**
  * Structure for component styles in a theme that consists of multiple parts.
  */
-declare type ThemeExtensionsWithParts<ComponentName extends string, Parts extends string[]> = {
+type ThemeExtensionsWithParts<ComponentName extends string, Parts extends string[]> = {
     [P in ComponentName]?: {
         base?: {
             [Part in Parts[number]]?: CSSObject;
@@ -67,7 +67,7 @@ declare type ThemeExtensionsWithParts<ComponentName extends string, Parts extend
  * ```
  * `css{{ color: 'primary' }}` resolves to `color: #00f`.
  */
-declare type ScaleValue<T> = T | T[] | NestedScaleDict<T> | undefined;
+type ScaleValue<T> = T | T[] | NestedScaleDict<T> | undefined;
 /**
  * Scales are a set of named, pre-defined CSS values which are used
  * to create consitency in sizing across visual elements. They give
@@ -205,9 +205,7 @@ interface Theme {
     transitions?: Scale<CSS.Property.Transition>;
 }
 
-interface StyleProps extends Pick<CSSObject, 'display' | 'height' | 'width' | 'minWidth' | 'maxWidth' | 'position' | 'top' | 'bottom' | 'right' | 'left' | 'zIndex' | 'p' | 'px' | 'py' | 'pt' | 'pb' | 'pl' | 'pr' | 'm' | 'mx' | 'my' | 'mt' | 'mb' | 'ml' | 'mr' | 'flexDirection' | 'flexWrap' | 'flexShrink' | 'flexGrow' | 'alignItems' | 'justifyContent' | 'bg' | 'border' | 'borderRadius' | 'boxShadow' | 'opacity' | 'overflow' | 'transition'> {
-}
-interface BoxOwnProps extends StyleProps {
+interface BoxOwnProps {
     css?: CSSObject | CSSObject[];
     /**
      * Use to set base styles for the component
@@ -215,11 +213,11 @@ interface BoxOwnProps extends StyleProps {
      */
     __baseCSS?: CSSObject;
 }
-interface BoxProps extends PolymorphicPropsWithRef<BoxOwnProps, 'div'> {
+interface BoxProps extends PropsOf<typeof Box> {
 }
-declare const Box: PolymorphicComponentWithRef<BoxOwnProps, 'div'>;
+declare const Box: PolymorphicComponent<"div", BoxOwnProps>;
 
-declare type GlobalProps = {
+type GlobalProps = {
     /**
      * CSS Selector to change the element that the styles will be applied to.
      */
@@ -231,7 +229,7 @@ declare type GlobalProps = {
 };
 declare const Global: ({ normalizeDocument, selector }: GlobalProps) => JSX.Element;
 
-interface SVGProps extends ComponentProps<'svg'> {
+interface SVGProps extends HtmlProps<'svg'> {
     size?: number | string | number[] | string[];
     css?: CSSObject;
 }
@@ -241,7 +239,7 @@ interface ComponentStylesProps {
     variant?: string;
     size?: string;
 }
-declare type ComponentStyleParts<Parts extends string[]> = {
+type ComponentStyleParts<Parts extends string[]> = {
     [P in Parts[number]]: CSSObject;
 };
 declare function useComponentStyles(componentName: string, props?: ComponentStylesProps, options?: {
@@ -260,12 +258,12 @@ declare function useComponentStyles<Part extends string, Parts extends ReadonlyA
  */
 declare const useResponsiveValue: <T>(values: T[], defaultIndex?: number) => T;
 
-declare type ComponentState = 'hover' | 'focus' | 'focusVisible' | 'active' | 'visited' | 'disabled' | 'readOnly' | 'checked' | 'selected' | 'indeterminate' | 'expanded' | 'error';
-declare type StateAttrKeyProps = `data-${KebabCase<ComponentState>}`;
-declare type StateAttrProps = {
+type ComponentState = 'hover' | 'focus' | 'focusVisible' | 'active' | 'visited' | 'disabled' | 'readOnly' | 'checked' | 'selected' | 'indeterminate' | 'expanded' | 'error';
+type StateAttrKeyProps = `data-${KebabCase<ComponentState>}`;
+type StateAttrProps = {
     [key in StateAttrKeyProps]?: '';
 };
-declare type UseStateProps = {
+type UseStateProps = {
     [key in ComponentState]?: boolean;
 };
 /**
@@ -290,4 +288,4 @@ interface ThemeProviderProps<T extends Theme> {
 }
 declare function ThemeProvider<T extends Theme>({ theme, children, }: ThemeProviderProps<T>): JSX.Element;
 
-export { Box, BoxOwnProps, BoxProps, CSSObject, CSSProperties, ComponentState, ComponentStyleParts, ComponentStylesProps, Global, GlobalProps, ResponsiveStyleValue, SVG, SVGProps, Scale, ScaleValue, SizeScale, StateAttrKeyProps, StateAttrProps, StyleObject, StyleProps, Theme, ThemeComponentProps, ThemeExtension, ThemeExtensionsWithParts, ThemeProvider, ThemeProviderProps, UseStateProps, ZeroScale, ZeroSizeScale, __defaultTheme, useComponentStyles, useResponsiveValue, useStateProps, useTheme };
+export { Box, BoxOwnProps, BoxProps, CSSObject, CSSProperties, ComponentState, ComponentStyleParts, ComponentStylesProps, Global, GlobalProps, ResponsiveStyleValue, SVG, SVGProps, Scale, ScaleValue, SizeScale, StateAttrKeyProps, StateAttrProps, StyleObject, Theme, ThemeComponentProps, ThemeExtension, ThemeExtensionsWithParts, ThemeProvider, ThemeProviderProps, UseStateProps, ZeroScale, ZeroSizeScale, __defaultTheme, useComponentStyles, useResponsiveValue, useStateProps, useTheme };

package/dist/index.js

@@ -121,106 +121,21 @@ var transformPseudos = (styles) => {
 };
 
 // src/components/Box/Box.tsx
-var createThemedStyle = ({ __baseCSS, styles, css }) => (theme) => {
+var createThemedStyle = ({ __baseCSS, css }) => (theme) => {
   const themedStyles = import_deepmerge.default.all([
     (0, import_css.css)(__baseCSS)(theme),
-    (0, import_css.css)(styles)(theme),
     ...Array.isArray(css) ? css.map((c) => (0, import_css.css)(c)(theme)) : [(0, import_css.css)(css)(theme)]
   ]);
   return transformPseudos(themedStyles);
 };
 var Box = (0, import_react.forwardRef)(
-  ({
-    as = "div",
-    children,
-    __baseCSS,
-    css,
-    display,
-    height,
-    width,
-    minWidth,
-    maxWidth,
-    position,
-    top,
-    bottom,
-    right,
-    left,
-    zIndex,
-    p,
-    px,
-    py,
-    pt,
-    pb,
-    pl,
-    pr,
-    m,
-    mx,
-    my,
-    mt,
-    mb,
-    ml,
-    mr,
-    flexDirection,
-    flexWrap,
-    flexShrink,
-    flexGrow,
-    alignItems,
-    justifyContent,
-    bg,
-    border,
-    borderRadius,
-    boxShadow,
-    opacity,
-    overflow,
-    transition,
-    ...props
-  }, ref) => (0, import_react2.jsx)(
+  ({ as = "div", children, __baseCSS, css, ...props }, ref) => (0, import_react2.jsx)(
     as,
     {
       ...props,
       css: createThemedStyle({
         __baseCSS,
-        css,
-        styles: {
-          display,
-          height,
-          width,
-          minWidth,
-          maxWidth,
-          position,
-          top,
-          bottom,
-          right,
-          left,
-          zIndex,
-          p,
-          px,
-          py,
-          pt,
-          pb,
-          pl,
-          pr,
-          m,
-          mx,
-          my,
-          mt,
-          mb,
-          ml,
-          mr,
-          flexDirection,
-          flexWrap,
-          flexShrink,
-          flexGrow,
-          alignItems,
-          justifyContent,
-          bg,
-          border,
-          borderRadius,
-          boxShadow,
-          opacity,
-          overflow,
-          transition
-        }
+        css
       }),
       ref
     },

package/dist/index.mjs

@@ -81,106 +81,21 @@ var transformPseudos = (styles) => {
 };
 
 // src/components/Box/Box.tsx
-var createThemedStyle = ({ __baseCSS, styles, css }) => (theme) => {
+var createThemedStyle = ({ __baseCSS, css }) => (theme) => {
   const themedStyles = merge.all([
     transformStyleObject(__baseCSS)(theme),
-    transformStyleObject(styles)(theme),
     ...Array.isArray(css) ? css.map((c) => transformStyleObject(c)(theme)) : [transformStyleObject(css)(theme)]
   ]);
   return transformPseudos(themedStyles);
 };
 var Box = forwardRef(
-  ({
-    as = "div",
-    children,
-    __baseCSS,
-    css,
-    display,
-    height,
-    width,
-    minWidth,
-    maxWidth,
-    position,
-    top,
-    bottom,
-    right,
-    left,
-    zIndex,
-    p,
-    px,
-    py,
-    pt,
-    pb,
-    pl,
-    pr,
-    m,
-    mx,
-    my,
-    mt,
-    mb,
-    ml,
-    mr,
-    flexDirection,
-    flexWrap,
-    flexShrink,
-    flexGrow,
-    alignItems,
-    justifyContent,
-    bg,
-    border,
-    borderRadius,
-    boxShadow,
-    opacity,
-    overflow,
-    transition,
-    ...props
-  }, ref) => jsx(
+  ({ as = "div", children, __baseCSS, css, ...props }, ref) => jsx(
     as,
     {
       ...props,
       css: createThemedStyle({
         __baseCSS,
-        css,
-        styles: {
-          display,
-          height,
-          width,
-          minWidth,
-          maxWidth,
-          position,
-          top,
-          bottom,
-          right,
-          left,
-          zIndex,
-          p,
-          px,
-          py,
-          pt,
-          pb,
-          pl,
-          pr,
-          m,
-          mx,
-          my,
-          mt,
-          mb,
-          ml,
-          mr,
-          flexDirection,
-          flexWrap,
-          flexShrink,
-          flexGrow,
-          alignItems,
-          justifyContent,
-          bg,
-          border,
-          borderRadius,
-          boxShadow,
-          opacity,
-          overflow,
-          transition
-        }
+        css
       }),
       ref
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/system",
-  "version": "4.2.1",
+  "version": "5.0.0",
   "description": "Marigold System Library",
   "license": "MIT",
   "keywords": [
@@ -27,21 +27,21 @@
   },
   "dependencies": {
     "@emotion/react": "11.10.5",
-    "@marigold/types": "0.5.7",
     "@theme-ui/css": "0.15.4",
     "csstype": "3.1.1",
     "deepmerge": "^4.2.2",
-    "react-fast-compare": "^3.2.0"
+    "react-fast-compare": "^3.2.0",
+    "@marigold/types": "1.0.0"
   },
   "peerDependencies": {
     "react": "16.x || 17.x || 18.x",
     "react-dom": "16.x || 17.x || 18.x"
   },
   "devDependencies": {
-    "@babel/core": "7.20.5",
-    "@marigold/tsconfig": "0.3.1",
+    "@babel/core": "7.20.12",
     "react": "18.2.0",
-    "tsup": "6.4.0"
+    "tsup": "6.5.0",
+    "@marigold/tsconfig": "0.4.0"
   },
   "scripts": {
     "build": "tsup src/index.ts",