@marigold/system 0.7.0 → 1.0.0-beta.0

package/dist/index.d.ts

@@ -1,17 +1,14 @@
-import { PolymorphicPropsWithRef, PolymorphicComponentWithRef, ComponentProps } from '@marigold/types';
+import { Simplify, PolymorphicPropsWithRef, PolymorphicComponentWithRef, ComponentProps, 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 React, { ElementType, ReactNode } from 'react';
+import * as react from 'react';
+import { ReactNode, ElementType } from 'react';
 import * as CSS from 'csstype';
 
-/**
- * Create type aliases for `theme-ui` so that it doesn't leak too much into our code.
- */
-
 declare type ResponsiveStyleValue<T> = ResponsiveStyleValue$1<T>;
 declare type StyleObject = ThemeUIStyleObject;
-declare type CSSObject = ThemeUICSSObject;
-declare type CSSProperties = ThemeUICSSProperties;
+declare type CSSObject = Simplify<ThemeUICSSObject>;
+declare type CSSProperties = Simplify<ThemeUICSSProperties>;
 
 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'> {
 }
@@ -30,160 +27,52 @@ declare const Box: PolymorphicComponentWithRef<BoxOwnProps, 'div'>;
 
 declare const Global: () => JSX.Element;
 
+interface SVGProps extends ComponentProps<'svg'> {
+    size?: number | string | number[] | string[];
+}
+declare const SVG: ({ size, fill, children, ...props }: SVGProps) => react.ReactSVGElement;
+
 /**
- * Normalize styling of certain elements between browsers.
- * Based on https://www.joshwcomeau.com/css/custom-css-reset/
+ * Props that every component should accepts to change the styling
  */
-
-declare const normalize: {
-    readonly base: {
-        readonly boxSizing: "border-box";
-        readonly margin: 0;
-        readonly minWidth: 0;
-    };
-    readonly a: {
-        readonly textDecoration: "none";
-        readonly boxSizing: "border-box";
-        readonly margin: 0;
-        readonly minWidth: 0;
-    };
-    readonly p: {
-        readonly overflowWrap: "break-word";
-        readonly boxSizing: "border-box";
-        readonly margin: 0;
-        readonly minWidth: 0;
-    };
-    readonly h1: {
-        readonly overflowWrap: "break-word";
-        readonly boxSizing: "border-box";
-        readonly margin: 0;
-        readonly minWidth: 0;
-    };
-    readonly h2: {
-        readonly overflowWrap: "break-word";
-        readonly boxSizing: "border-box";
-        readonly margin: 0;
-        readonly minWidth: 0;
-    };
-    readonly h3: {
-        readonly overflowWrap: "break-word";
-        readonly boxSizing: "border-box";
-        readonly margin: 0;
-        readonly minWidth: 0;
-    };
-    readonly h4: {
-        readonly overflowWrap: "break-word";
-        readonly boxSizing: "border-box";
-        readonly margin: 0;
-        readonly minWidth: 0;
-    };
-    readonly h5: {
-        readonly overflowWrap: "break-word";
-        readonly boxSizing: "border-box";
-        readonly margin: 0;
-        readonly minWidth: 0;
-    };
-    readonly h6: {
-        readonly overflowWrap: "break-word";
-        readonly boxSizing: "border-box";
-        readonly margin: 0;
-        readonly minWidth: 0;
-    };
-    readonly img: {
-        readonly display: "block";
-        readonly maxWidth: "100%";
-        readonly boxSizing: "border-box";
-        readonly margin: 0;
-        readonly minWidth: 0;
-    };
-    readonly picture: {
-        readonly display: "block";
-        readonly maxWidth: "100%";
-        readonly boxSizing: "border-box";
-        readonly margin: 0;
-        readonly minWidth: 0;
-    };
-    readonly video: {
-        readonly display: "block";
-        readonly maxWidth: "100%";
-        readonly boxSizing: "border-box";
-        readonly margin: 0;
-        readonly minWidth: 0;
-    };
-    readonly canvas: {
-        readonly display: "block";
-        readonly maxWidth: "100%";
-        readonly boxSizing: "border-box";
-        readonly margin: 0;
-        readonly minWidth: 0;
-    };
-    readonly svg: {
-        readonly display: "block";
-        readonly maxWidth: "100%";
-        readonly boxSizing: "border-box";
-        readonly margin: 0;
-        readonly minWidth: 0;
-    };
-    readonly select: {
-        readonly display: "block";
-        readonly appearance: "none";
-        readonly font: "inherit";
-        readonly '&::-ms-expand': {
-            readonly display: "none";
-        };
-        readonly boxSizing: "border-box";
-        readonly margin: 0;
-        readonly minWidth: 0;
-    };
-    readonly button: {
-        readonly display: "block";
-        readonly appearance: "none";
-        readonly font: "inherit";
-        readonly background: "transparent";
-        readonly textAlign: "center";
-        readonly boxSizing: "border-box";
-        readonly margin: 0;
-        readonly minWidth: 0;
-    };
-    readonly textarea: {
-        readonly display: "block";
-        readonly appearance: "none";
-        readonly font: "inherit";
-        readonly boxSizing: "border-box";
-        readonly margin: 0;
-        readonly minWidth: 0;
-    };
-    readonly input: {
-        readonly display: "block";
-        readonly appearance: "none";
-        readonly font: "inherit";
-        readonly '&::-ms-clear': {
-            readonly display: "none";
+declare type ThemeComponentProps = {
+    variant?: string;
+    size?: string;
+};
+/**
+ * Structure for component styles in a theme.
+ */
+declare type ThemeExtension<ComponentName extends string> = {
+    [P in ComponentName]?: {
+        base?: CSSObject;
+        variant?: {
+            [key: string]: CSSObject;
         };
-        readonly '&::-webkit-search-cancel-button': {
-            readonly WebkitAppearance: "none";
+        size?: {
+            [key: string]: CSSObject;
         };
-        readonly boxSizing: "border-box";
-        readonly margin: 0;
-        readonly minWidth: 0;
     };
 };
-declare type NormalizedElement = keyof typeof normalize;
 /**
- * Type-safe helper to get normalization. If no normalization is found,
- * returns the *base* normalization.
+ * Structure for component styles in a theme that consists of multiple parts.
  */
-declare const getNormalizedStyles: (val?: ElementType<any> | undefined) => {
-    readonly boxSizing: "border-box";
-    readonly margin: 0;
-    readonly minWidth: 0;
+declare type ThemeExtensionsWithParts<ComponentName extends string, Parts extends string[]> = {
+    [P in ComponentName]?: {
+        base?: {
+            [Part in Parts[number]]?: CSSObject;
+        };
+        variant?: {
+            [key: string]: {
+                [Part in Parts[number]]?: CSSObject;
+            };
+        };
+        size?: {
+            [key: string]: {
+                [Part in Parts[number]]?: CSSObject;
+            };
+        };
+    };
 };
-
-interface SVGProps extends ComponentProps<'svg'> {
-    size?: number;
-}
-declare const SVG: React.FC<SVGProps>;
-
 /**
  * Value used to define a scale.
  *
@@ -330,6 +219,22 @@ interface Theme {
     transitions?: Scale<CSS.Property.Transition>;
 }
 
+interface ComponentStylesProps {
+    variant?: string;
+    size?: string;
+}
+declare type ComponentStyleParts<Parts extends string[]> = {
+    [P in Parts[number]]: CSSObject;
+};
+declare function useComponentStyles(componentName: string, props?: ComponentStylesProps, options?: {
+    parts: never;
+}): CSSObject;
+declare function useComponentStyles<Part extends string, Parts extends ReadonlyArray<Part>>(componentName: string, props?: ComponentStylesProps, options?: {
+    parts: Parts;
+}): {
+    [P in Parts[number]]: CSSObject;
+};
+
 /**
  * Hook that can be used to return values based on the current screen size,
  * using breakpoints from the theme (`theme.breakpoints`). Note that this
@@ -337,6 +242,21 @@ interface Theme {
  */
 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 = {
+    [key in StateAttrKeyProps]?: '';
+};
+declare type UseStateProps = {
+    [key in ComponentState]?: boolean;
+};
+/**
+ * Given a map of states (e.g. `{ hover: true, focus: false }`) returns an
+ * object that can be used to set state props on a component
+ * (e.g. `[data-hover]` and `[data-focus]`).
+ */
+declare const useStateProps: (states: UseStateProps) => StateAttrProps;
+
 /**
  * @internal
  */
@@ -344,6 +264,7 @@ declare const __defaultTheme: Theme;
 declare const useTheme: () => {
     theme: Theme;
     css: (style: StyleObject) => _theme_ui_css.CSSObject;
+    get: (path: string) => any;
 };
 interface ThemeProviderProps<T extends Theme> {
     theme: T;
@@ -351,6 +272,155 @@ interface ThemeProviderProps<T extends Theme> {
 }
 declare function ThemeProvider<T extends Theme>({ theme, children, }: ThemeProviderProps<T>): JSX.Element;
 
+/**
+ * Normalize styling of certain elements between browsers.
+ * Based on https://www.joshwcomeau.com/css/custom-css-reset/
+ */
+
+declare const normalize: {
+    readonly base: {
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
+    };
+    readonly a: {
+        readonly textDecoration: "none";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
+    };
+    readonly p: {
+        readonly overflowWrap: "break-word";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
+    };
+    readonly h1: {
+        readonly overflowWrap: "break-word";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
+    };
+    readonly h2: {
+        readonly overflowWrap: "break-word";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
+    };
+    readonly h3: {
+        readonly overflowWrap: "break-word";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
+    };
+    readonly h4: {
+        readonly overflowWrap: "break-word";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
+    };
+    readonly h5: {
+        readonly overflowWrap: "break-word";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
+    };
+    readonly h6: {
+        readonly overflowWrap: "break-word";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
+    };
+    readonly img: {
+        readonly display: "block";
+        readonly maxWidth: "100%";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
+    };
+    readonly picture: {
+        readonly display: "block";
+        readonly maxWidth: "100%";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
+    };
+    readonly video: {
+        readonly display: "block";
+        readonly maxWidth: "100%";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
+    };
+    readonly canvas: {
+        readonly display: "block";
+        readonly maxWidth: "100%";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
+    };
+    readonly svg: {
+        readonly display: "block";
+        readonly maxWidth: "100%";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
+    };
+    readonly select: {
+        readonly display: "block";
+        readonly appearance: "none";
+        readonly font: "inherit";
+        readonly '&::-ms-expand': {
+            readonly display: "none";
+        };
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
+    };
+    readonly button: {
+        readonly display: "block";
+        readonly appearance: "none";
+        readonly font: "inherit";
+        readonly background: "transparent";
+        readonly textAlign: "center";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
+    };
+    readonly textarea: {
+        readonly display: "block";
+        readonly appearance: "none";
+        readonly font: "inherit";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
+    };
+    readonly input: {
+        readonly display: "block";
+        readonly appearance: "none";
+        readonly font: "inherit";
+        readonly '&::-ms-clear': {
+            readonly display: "none";
+        };
+        readonly '&::-webkit-search-cancel-button': {
+            readonly WebkitAppearance: "none";
+        };
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
+    };
+};
+declare type NormalizedElement = keyof typeof normalize;
+/**
+ * Type-safe helper to get normalization. If no normalization is found,
+ * returns the *base* normalization.
+ */
+declare const getNormalizedStyles: (val?: ElementType<any> | undefined) => {
+    readonly boxSizing: "border-box";
+    readonly margin: 0;
+    readonly minWidth: 0;
+};
+
 /**
  * Ensures that the `val` is an array. Will return an empty array if `val` is falsy.
  */
@@ -381,4 +451,4 @@ declare const appendVariantState: (variant: string, state: keyof State) => strin
  */
 declare const conditional: (variant: string, { disabled, ...states }: State) => string[];
 
-export { Box, BoxOwnProps, BoxProps, CSSObject, CSSProperties, Global, NormalizedElement, ResponsiveStyleValue, SVG, SVGProps, Scale, ScaleValue, SizeScale, State, StyleObject, StyleProps, Theme, ThemeProvider, ThemeProviderProps, ZeroScale, ZeroSizeScale, __defaultTheme, appendVariantState, conditional, ensureArray, ensureArrayVariant, ensureVariantDefault, getNormalizedStyles, normalize, useResponsiveValue, useTheme };
+export { Box, BoxOwnProps, BoxProps, CSSObject, CSSProperties, ComponentState, ComponentStyleParts, ComponentStylesProps, Global, NormalizedElement, ResponsiveStyleValue, SVG, SVGProps, Scale, ScaleValue, SizeScale, State, StateAttrKeyProps, StateAttrProps, StyleObject, StyleProps, Theme, ThemeComponentProps, ThemeExtension, ThemeExtensionsWithParts, ThemeProvider, ThemeProviderProps, UseStateProps, ZeroScale, ZeroSizeScale, __defaultTheme, appendVariantState, conditional, ensureArray, ensureArrayVariant, ensureVariantDefault, getNormalizedStyles, normalize, useComponentStyles, useResponsiveValue, useStateProps, useTheme };

package/dist/index.js

@@ -21,7 +21,6 @@ var __spreadValues = (a2, b) => {
   return a2;
 };
 var __spreadProps = (a2, b) => __defProps(a2, __getOwnPropDescs(b));
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -38,22 +37,16 @@ var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+  return to;
 };
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
 var src_exports = {};
@@ -70,14 +63,18 @@ __export(src_exports, {
   ensureVariantDefault: () => ensureVariantDefault,
   getNormalizedStyles: () => getNormalizedStyles,
   normalize: () => normalize,
+  useComponentStyles: () => useComponentStyles,
   useResponsiveValue: () => useResponsiveValue,
+  useStateProps: () => useStateProps,
   useTheme: () => useTheme
 });
+module.exports = __toCommonJS(src_exports);
 
-// src/Box.tsx
-var import_react = require("@emotion/react");
+// src/components/Box/Box.tsx
+var import_react = require("react");
+var import_react2 = require("@emotion/react");
 var import_css = require("@theme-ui/css");
-var import_react2 = require("react");
+var import_deepmerge = __toESM(require("deepmerge"));
 
 // src/normalize.ts
 var base = {
@@ -153,8 +150,8 @@ var isNil = (value) => value === null || value === void 0;
 var ensureArray = (val) => isNil(val) ? [] : Array.isArray(val) ? val : [val];
 var ensureVariantDefault = (val) => val.replace(/\.$/, "");
 var ensureArrayVariant = (variant) => ensureArray(variant).map(ensureVariantDefault);
-var appendVariantState = (variant, state) => {
-  return `${ensureVariantDefault(variant)}.:${state}`;
+var appendVariantState = (variant, state2) => {
+  return `${ensureVariantDefault(variant)}.:${state2}`;
 };
 var conditional = (variant, _a) => {
   var _b = _a, { disabled = false } = _b, states = __objRest(_b, ["disabled"]);
@@ -163,18 +160,74 @@ var conditional = (variant, _a) => {
   return [variant, ...stateVariants];
 };
 
-// src/Box.tsx
-var isNotEmpty = (val) => !(val && Object.keys(val).length === 0 && val.constructor === Object);
+// src/components/Box/utils.ts
+var createteSelector = (selectors, states, suffix = "") => {
+  return selectors.map((selector2) => states.map((state2) => `${selector2}${state2}${suffix ? ` ${suffix}` : ""}`)).flat().join(", ");
+};
+var selector = {
+  self: "&",
+  grouped: ["[role=group]", "[data-group]"]
+};
+var state = {
+  none: [""],
+  hover: [":hover", "[data-hover]"],
+  focus: [":focus", "[data-focus]"],
+  focusVisible: [":focus-visible", "[data-focus-visible]"],
+  active: [":active", "[data-active]"],
+  disabled: ["[disabled]", "[aria-disabled=true]", "[data-disabled]"],
+  readOnly: ["[readonly]", "[aria-readonly=true]", "[data-read-only]"],
+  checked: ["[aria-checked=true]", "[data-checked]"],
+  indeterminate: ["[aria-checked=mixed]", "[data-indeterminate]"],
+  selected: ["[aria-selected=true]", "[data-selected]"],
+  error: [":invalid", "[aria-invalid=true]", "[data-error]"],
+  expanded: ["[aria-expanded=true]", "[data-expanded]"]
+};
+var pseudos = {
+  "&:hover": createteSelector([selector.self], state.hover),
+  "&:focus": createteSelector([selector.self], state.focus),
+  "&:focus-visible": createteSelector([selector.self], state.focusVisible),
+  "&:active": createteSelector([selector.self], state.active),
+  "&:disabled": createteSelector([selector.self], state.disabled),
+  "&:read-only": createteSelector([selector.self], state.readOnly),
+  "&:checked": createteSelector([selector.self], state.checked),
+  "&:selected": createteSelector([selector.self], state.selected),
+  "&:indeterminate": createteSelector([selector.self], state.indeterminate),
+  "&:error": createteSelector([selector.self], state.error),
+  "&:expanded": createteSelector([selector.self], state.expanded),
+  "&:in-group": createteSelector(selector.grouped, state.none, selector.self),
+  "&:hover-group": createteSelector(selector.grouped, state.hover, selector.self),
+  "&:focus-group": createteSelector(selector.grouped, state.focus, selector.self),
+  "&:active-group": createteSelector(selector.grouped, state.active, selector.self),
+  "&:error-group": createteSelector(selector.grouped, state.error, selector.self)
+};
+var transformPseudos = (styles) => {
+  let result = {};
+  for (let key in styles) {
+    const value = styles[key];
+    if (key in pseudos) {
+      key = pseudos[key];
+    }
+    if (typeof value === "object") {
+      result[key] = transformPseudos(value);
+      continue;
+    }
+    result[key] = value;
+  }
+  return result;
+};
+
+// src/components/Box/Box.tsx
 var createThemedStyle = ({ as, __baseCSS, variant, styles, css }) => (theme) => {
-  return [
+  const themedStyles = import_deepmerge.default.all([
     getNormalizedStyles(as),
     (0, import_css.css)(__baseCSS)(theme),
     ...ensureArrayVariant(variant).map((v) => (0, import_css.css)({ variant: v })(theme)),
     (0, import_css.css)(styles)(theme),
     (0, import_css.css)(css)(theme)
-  ].filter(isNotEmpty);
+  ]);
+  return transformPseudos(themedStyles);
 };
-var Box = (0, import_react2.forwardRef)((_a, ref) => {
+var Box = (0, import_react.forwardRef)((_a, ref) => {
   var _b = _a, {
     as = "div",
     children,
@@ -264,7 +317,7 @@ var Box = (0, import_react2.forwardRef)((_a, ref) => {
     "overflow",
     "transition"
   ]);
-  return (0, import_react.jsx)(as, __spreadProps(__spreadValues({}, props), {
+  return (0, import_react2.jsx)(as, __spreadProps(__spreadValues({}, props), {
     css: createThemedStyle({
       as,
       __baseCSS,
@@ -315,11 +368,16 @@ var Box = (0, import_react2.forwardRef)((_a, ref) => {
   }), children);
 });
 
-// src/Global.tsx
-var import_react5 = __toESM(require("react"));
-var import_react6 = require("@emotion/react");
+// src/components/Global/Global.tsx
+var import_react8 = __toESM(require("react"));
+var import_react9 = require("@emotion/react");
+
+// src/hooks/useComponentStyles.ts
+var import_deepmerge2 = __toESM(require("deepmerge"));
+var import_react5 = require("react");
+var import_react_fast_compare = __toESM(require("react-fast-compare"));
 
-// src/useTheme.tsx
+// src/hooks/useTheme.tsx
 var import_react3 = __toESM(require("react"));
 var import_css2 = require("@theme-ui/css");
 var import_react4 = require("@emotion/react");
@@ -328,7 +386,8 @@ var InternalContext = (0, import_react3.createContext)(__defaultTheme);
 var useTheme = () => {
   const theme = (0, import_react3.useContext)(InternalContext);
   const css = (0, import_react3.useCallback)((style) => (0, import_css2.css)(style)(theme), [theme]);
-  return { theme, css };
+  const get2 = (0, import_react3.useCallback)((path) => (0, import_css2.get)(theme, path), [theme]);
+  return { theme, css, get: get2 };
 };
 function ThemeProvider({
   theme,
@@ -341,7 +400,86 @@ function ThemeProvider({
   }, children));
 }
 
-// src/Global.tsx
+// src/hooks/useComponentStyles.ts
+var get = (obj, path, fallback) => {
+  const key = path.split(".");
+  let result = obj;
+  for (let i = 0, length = key.length; i < length; i++) {
+    if (!result)
+      break;
+    result = result[key[i]];
+  }
+  return result === void 0 ? fallback : result;
+};
+function useComponentStyles(componentName, props = {}, options = {}) {
+  var _a, _b;
+  const { theme } = useTheme();
+  const componentStyles = get(theme, `components.${componentName}`);
+  const stylesRef = (0, import_react5.useRef)({});
+  if (componentStyles) {
+    const base2 = componentStyles.base || {};
+    const size = ((_a = componentStyles.size) == null ? void 0 : _a[props.size]) || {};
+    const variant = ((_b = componentStyles.variant) == null ? void 0 : _b[props.variant]) || {};
+    let styles = import_deepmerge2.default.all([base2, size, variant]);
+    if (options.parts) {
+      styles = options.parts.reduce((result, part) => {
+        result[part] = styles[part] || {};
+        return result;
+      }, {});
+    }
+    if (!(0, import_react_fast_compare.default)(stylesRef.current, styles)) {
+      stylesRef.current = styles;
+    }
+  }
+  return stylesRef.current;
+}
+
+// src/hooks/useResponsiveValue.ts
+var import_react6 = require("react");
+var emptyBreakpoints = ["40em", "52em", "64em"];
+var useResponsiveValue = (values, defaultIndex = 0) => {
+  const { theme } = useTheme();
+  const breakpoints = theme.breakpoints || emptyBreakpoints;
+  if (defaultIndex < 0 || defaultIndex >= breakpoints.length) {
+    throw new RangeError(`Default breakpoint index is out of bounds. Theme has ${breakpoints.length} breakpoints, default is ${defaultIndex}.`);
+  }
+  const [index, setIndex] = (0, import_react6.useState)(defaultIndex);
+  (0, import_react6.useEffect)(() => {
+    const getIndex = () => breakpoints.filter((breakpoint) => window.matchMedia(`screen and (min-width: ${breakpoint})`).matches).length;
+    const handleResize = () => {
+      const newIndex = getIndex();
+      if (index !== newIndex) {
+        setIndex(newIndex);
+      }
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [breakpoints, index]);
+  return values[index >= values.length ? values.length - 1 : index];
+};
+
+// src/hooks/useStateProps.ts
+var import_react7 = require("react");
+var import_react_fast_compare2 = __toESM(require("react-fast-compare"));
+var KEBAB_REGEX = /[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g;
+var toKebap = (val) => val.replace(KEBAB_REGEX, (match) => `-${match.toLocaleLowerCase()}`);
+var useStateProps = (states) => {
+  const statePropsRef = (0, import_react7.useRef)({});
+  let stateProps = {};
+  for (let state2 in states) {
+    if (states[state2]) {
+      const key = `data-${toKebap(state2)}`;
+      stateProps[key] = "";
+    }
+  }
+  if (!(0, import_react_fast_compare2.default)(statePropsRef.current, stateProps)) {
+    statePropsRef.current = stateProps;
+  }
+  return statePropsRef.current;
+};
+
+// src/components/Global/Global.tsx
 var reduceMotionStyles = {
   "@media screen and (prefers-reduced-motion: reduce), (update: slow)": {
     "*": {
@@ -366,14 +504,16 @@ var Global = () => {
       variant: "root.body"
     }
   });
-  return /* @__PURE__ */ import_react5.default.createElement(import_react6.Global, {
+  return /* @__PURE__ */ import_react8.default.createElement(import_react9.Global, {
     styles: __spreadValues({ reduceMotionStyles }, styles)
   });
 };
 
-// src/SVG.tsx
-var import_react7 = require("@emotion/react");
+// src/components/SVG/SVG.tsx
+var import_react10 = require("@emotion/react");
 var normalizedStyles = getNormalizedStyles("svg");
+var toDimension = (value) => Array.isArray(value) ? value.map(ensureNumberOrToken) : ensureNumberOrToken(value);
+var ensureNumberOrToken = (value) => typeof value === "string" && /[0-9]+/.test(value) ? Number(value) : value;
 var SVG = (_a) => {
   var _b = _a, {
     size = 24,
@@ -385,39 +525,15 @@ var SVG = (_a) => {
     "children"
   ]);
   const { css } = useTheme();
-  return (0, import_react7.jsx)("svg", __spreadValues({
-    width: size,
-    height: size,
+  return (0, import_react10.jsx)("svg", __spreadValues({
     viewBox: "0 0 24 24",
-    css: css(__spreadValues({ fill }, normalizedStyles))
+    css: css(__spreadProps(__spreadValues({}, normalizedStyles), {
+      fill,
+      width: toDimension(props.width || size),
+      height: toDimension(props.height || size)
+    }))
   }, props), children);
 };
-
-// src/useResponsiveValue.ts
-var import_react8 = require("react");
-var emptyBreakpoints = ["40em", "52em", "64em"];
-var useResponsiveValue = (values, defaultIndex = 0) => {
-  const { theme } = useTheme();
-  const breakpoints = theme.breakpoints || emptyBreakpoints;
-  if (defaultIndex < 0 || defaultIndex >= breakpoints.length) {
-    throw new RangeError(`Default breakpoint index is out of bounds. Theme has ${breakpoints.length} breakpoints, default is ${defaultIndex}.`);
-  }
-  const [index, setIndex] = (0, import_react8.useState)(defaultIndex);
-  (0, import_react8.useEffect)(() => {
-    const getIndex = () => breakpoints.filter((breakpoint) => window.matchMedia(`screen and (min-width: ${breakpoint})`).matches).length;
-    const handleResize = () => {
-      const newIndex = getIndex();
-      if (index !== newIndex) {
-        setIndex(newIndex);
-      }
-    };
-    handleResize();
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, [breakpoints, index]);
-  return values[index >= values.length ? values.length - 1 : index];
-};
-module.exports = __toCommonJS(src_exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Box,
@@ -432,6 +548,8 @@ module.exports = __toCommonJS(src_exports);
   ensureVariantDefault,
   getNormalizedStyles,
   normalize,
+  useComponentStyles,
   useResponsiveValue,
+  useStateProps,
   useTheme
 });

package/dist/index.mjs

@@ -30,10 +30,11 @@ var __objRest = (source, exclude) => {
   return target;
 };
 
-// src/Box.tsx
+// src/components/Box/Box.tsx
+import { forwardRef } from "react";
 import { jsx } from "@emotion/react";
 import { css as transformStyleObject } from "@theme-ui/css";
-import { forwardRef } from "react";
+import merge from "deepmerge";
 
 // src/normalize.ts
 var base = {
@@ -109,8 +110,8 @@ var isNil = (value) => value === null || value === void 0;
 var ensureArray = (val) => isNil(val) ? [] : Array.isArray(val) ? val : [val];
 var ensureVariantDefault = (val) => val.replace(/\.$/, "");
 var ensureArrayVariant = (variant) => ensureArray(variant).map(ensureVariantDefault);
-var appendVariantState = (variant, state) => {
-  return `${ensureVariantDefault(variant)}.:${state}`;
+var appendVariantState = (variant, state2) => {
+  return `${ensureVariantDefault(variant)}.:${state2}`;
 };
 var conditional = (variant, _a) => {
   var _b = _a, { disabled = false } = _b, states = __objRest(_b, ["disabled"]);
@@ -119,16 +120,72 @@ var conditional = (variant, _a) => {
   return [variant, ...stateVariants];
 };
 
-// src/Box.tsx
-var isNotEmpty = (val) => !(val && Object.keys(val).length === 0 && val.constructor === Object);
+// src/components/Box/utils.ts
+var createteSelector = (selectors, states, suffix = "") => {
+  return selectors.map((selector2) => states.map((state2) => `${selector2}${state2}${suffix ? ` ${suffix}` : ""}`)).flat().join(", ");
+};
+var selector = {
+  self: "&",
+  grouped: ["[role=group]", "[data-group]"]
+};
+var state = {
+  none: [""],
+  hover: [":hover", "[data-hover]"],
+  focus: [":focus", "[data-focus]"],
+  focusVisible: [":focus-visible", "[data-focus-visible]"],
+  active: [":active", "[data-active]"],
+  disabled: ["[disabled]", "[aria-disabled=true]", "[data-disabled]"],
+  readOnly: ["[readonly]", "[aria-readonly=true]", "[data-read-only]"],
+  checked: ["[aria-checked=true]", "[data-checked]"],
+  indeterminate: ["[aria-checked=mixed]", "[data-indeterminate]"],
+  selected: ["[aria-selected=true]", "[data-selected]"],
+  error: [":invalid", "[aria-invalid=true]", "[data-error]"],
+  expanded: ["[aria-expanded=true]", "[data-expanded]"]
+};
+var pseudos = {
+  "&:hover": createteSelector([selector.self], state.hover),
+  "&:focus": createteSelector([selector.self], state.focus),
+  "&:focus-visible": createteSelector([selector.self], state.focusVisible),
+  "&:active": createteSelector([selector.self], state.active),
+  "&:disabled": createteSelector([selector.self], state.disabled),
+  "&:read-only": createteSelector([selector.self], state.readOnly),
+  "&:checked": createteSelector([selector.self], state.checked),
+  "&:selected": createteSelector([selector.self], state.selected),
+  "&:indeterminate": createteSelector([selector.self], state.indeterminate),
+  "&:error": createteSelector([selector.self], state.error),
+  "&:expanded": createteSelector([selector.self], state.expanded),
+  "&:in-group": createteSelector(selector.grouped, state.none, selector.self),
+  "&:hover-group": createteSelector(selector.grouped, state.hover, selector.self),
+  "&:focus-group": createteSelector(selector.grouped, state.focus, selector.self),
+  "&:active-group": createteSelector(selector.grouped, state.active, selector.self),
+  "&:error-group": createteSelector(selector.grouped, state.error, selector.self)
+};
+var transformPseudos = (styles) => {
+  let result = {};
+  for (let key in styles) {
+    const value = styles[key];
+    if (key in pseudos) {
+      key = pseudos[key];
+    }
+    if (typeof value === "object") {
+      result[key] = transformPseudos(value);
+      continue;
+    }
+    result[key] = value;
+  }
+  return result;
+};
+
+// src/components/Box/Box.tsx
 var createThemedStyle = ({ as, __baseCSS, variant, styles, css }) => (theme) => {
-  return [
+  const themedStyles = merge.all([
     getNormalizedStyles(as),
     transformStyleObject(__baseCSS)(theme),
     ...ensureArrayVariant(variant).map((v) => transformStyleObject({ variant: v })(theme)),
     transformStyleObject(styles)(theme),
     transformStyleObject(css)(theme)
-  ].filter(isNotEmpty);
+  ]);
+  return transformPseudos(themedStyles);
 };
 var Box = forwardRef((_a, ref) => {
   var _b = _a, {
@@ -271,24 +328,33 @@ var Box = forwardRef((_a, ref) => {
   }), children);
 });
 
-// src/Global.tsx
+// src/components/Global/Global.tsx
 import React2 from "react";
 import { Global as EmotionGlobal } from "@emotion/react";
 
-// src/useTheme.tsx
+// src/hooks/useComponentStyles.ts
+import merge2 from "deepmerge";
+import { useRef } from "react";
+import isEqual from "react-fast-compare";
+
+// src/hooks/useTheme.tsx
 import React, {
   createContext,
   useCallback,
   useContext
 } from "react";
-import { css as transformStyleObject2 } from "@theme-ui/css";
+import {
+  css as transformStyleObject2,
+  get as getfromTheme
+} from "@theme-ui/css";
 import { ThemeProvider as EmotionProvider } from "@emotion/react";
 var __defaultTheme = {};
 var InternalContext = createContext(__defaultTheme);
 var useTheme = () => {
   const theme = useContext(InternalContext);
   const css = useCallback((style) => transformStyleObject2(style)(theme), [theme]);
-  return { theme, css };
+  const get2 = useCallback((path) => getfromTheme(theme, path), [theme]);
+  return { theme, css, get: get2 };
 };
 function ThemeProvider({
   theme,
@@ -301,7 +367,86 @@ function ThemeProvider({
   }, children));
 }
 
-// src/Global.tsx
+// src/hooks/useComponentStyles.ts
+var get = (obj, path, fallback) => {
+  const key = path.split(".");
+  let result = obj;
+  for (let i = 0, length = key.length; i < length; i++) {
+    if (!result)
+      break;
+    result = result[key[i]];
+  }
+  return result === void 0 ? fallback : result;
+};
+function useComponentStyles(componentName, props = {}, options = {}) {
+  var _a, _b;
+  const { theme } = useTheme();
+  const componentStyles = get(theme, `components.${componentName}`);
+  const stylesRef = useRef({});
+  if (componentStyles) {
+    const base2 = componentStyles.base || {};
+    const size = ((_a = componentStyles.size) == null ? void 0 : _a[props.size]) || {};
+    const variant = ((_b = componentStyles.variant) == null ? void 0 : _b[props.variant]) || {};
+    let styles = merge2.all([base2, size, variant]);
+    if (options.parts) {
+      styles = options.parts.reduce((result, part) => {
+        result[part] = styles[part] || {};
+        return result;
+      }, {});
+    }
+    if (!isEqual(stylesRef.current, styles)) {
+      stylesRef.current = styles;
+    }
+  }
+  return stylesRef.current;
+}
+
+// src/hooks/useResponsiveValue.ts
+import { useEffect, useState } from "react";
+var emptyBreakpoints = ["40em", "52em", "64em"];
+var useResponsiveValue = (values, defaultIndex = 0) => {
+  const { theme } = useTheme();
+  const breakpoints = theme.breakpoints || emptyBreakpoints;
+  if (defaultIndex < 0 || defaultIndex >= breakpoints.length) {
+    throw new RangeError(`Default breakpoint index is out of bounds. Theme has ${breakpoints.length} breakpoints, default is ${defaultIndex}.`);
+  }
+  const [index, setIndex] = useState(defaultIndex);
+  useEffect(() => {
+    const getIndex = () => breakpoints.filter((breakpoint) => window.matchMedia(`screen and (min-width: ${breakpoint})`).matches).length;
+    const handleResize = () => {
+      const newIndex = getIndex();
+      if (index !== newIndex) {
+        setIndex(newIndex);
+      }
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [breakpoints, index]);
+  return values[index >= values.length ? values.length - 1 : index];
+};
+
+// src/hooks/useStateProps.ts
+import { useRef as useRef2 } from "react";
+import isEqual2 from "react-fast-compare";
+var KEBAB_REGEX = /[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g;
+var toKebap = (val) => val.replace(KEBAB_REGEX, (match) => `-${match.toLocaleLowerCase()}`);
+var useStateProps = (states) => {
+  const statePropsRef = useRef2({});
+  let stateProps = {};
+  for (let state2 in states) {
+    if (states[state2]) {
+      const key = `data-${toKebap(state2)}`;
+      stateProps[key] = "";
+    }
+  }
+  if (!isEqual2(statePropsRef.current, stateProps)) {
+    statePropsRef.current = stateProps;
+  }
+  return statePropsRef.current;
+};
+
+// src/components/Global/Global.tsx
 var reduceMotionStyles = {
   "@media screen and (prefers-reduced-motion: reduce), (update: slow)": {
     "*": {
@@ -331,9 +476,11 @@ var Global = () => {
   });
 };
 
-// src/SVG.tsx
+// src/components/SVG/SVG.tsx
 import { jsx as jsx2 } from "@emotion/react";
 var normalizedStyles = getNormalizedStyles("svg");
+var toDimension = (value) => Array.isArray(value) ? value.map(ensureNumberOrToken) : ensureNumberOrToken(value);
+var ensureNumberOrToken = (value) => typeof value === "string" && /[0-9]+/.test(value) ? Number(value) : value;
 var SVG = (_a) => {
   var _b = _a, {
     size = 24,
@@ -346,37 +493,14 @@ var SVG = (_a) => {
   ]);
   const { css } = useTheme();
   return jsx2("svg", __spreadValues({
-    width: size,
-    height: size,
     viewBox: "0 0 24 24",
-    css: css(__spreadValues({ fill }, normalizedStyles))
+    css: css(__spreadProps(__spreadValues({}, normalizedStyles), {
+      fill,
+      width: toDimension(props.width || size),
+      height: toDimension(props.height || size)
+    }))
   }, props), children);
 };
-
-// src/useResponsiveValue.ts
-import { useEffect, useState } from "react";
-var emptyBreakpoints = ["40em", "52em", "64em"];
-var useResponsiveValue = (values, defaultIndex = 0) => {
-  const { theme } = useTheme();
-  const breakpoints = theme.breakpoints || emptyBreakpoints;
-  if (defaultIndex < 0 || defaultIndex >= breakpoints.length) {
-    throw new RangeError(`Default breakpoint index is out of bounds. Theme has ${breakpoints.length} breakpoints, default is ${defaultIndex}.`);
-  }
-  const [index, setIndex] = useState(defaultIndex);
-  useEffect(() => {
-    const getIndex = () => breakpoints.filter((breakpoint) => window.matchMedia(`screen and (min-width: ${breakpoint})`).matches).length;
-    const handleResize = () => {
-      const newIndex = getIndex();
-      if (index !== newIndex) {
-        setIndex(newIndex);
-      }
-    };
-    handleResize();
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, [breakpoints, index]);
-  return values[index >= values.length ? values.length - 1 : index];
-};
 export {
   Box,
   Global,
@@ -390,6 +514,8 @@ export {
   ensureVariantDefault,
   getNormalizedStyles,
   normalize,
+  useComponentStyles,
   useResponsiveValue,
+  useStateProps,
   useTheme
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/system",
-  "version": "0.7.0",
+  "version": "1.0.0-beta.0",
   "description": "Marigold System Library",
   "license": "MIT",
   "keywords": [
@@ -26,23 +26,26 @@
     "directory": "packages/system"
   },
   "dependencies": {
-    "@emotion/react": "11.7.1",
-    "@marigold/types": "0.4.0",
-    "@theme-ui/css": "0.13.1",
-    "csstype": "3.0.11"
+    "@emotion/react": "11.9.0",
+    "@marigold/types": "0.5.0-beta.0",
+    "@theme-ui/css": "0.14.5",
+    "csstype": "3.0.11",
+    "deepmerge": "^4.2.2",
+    "react-fast-compare": "^3.2.0"
   },
   "peerDependencies": {
     "react": "^16.x || ^17.0.0",
     "react-dom": "^16.x || ^17.0.0"
   },
   "devDependencies": {
+    "@babel/core": "7.17.10",
     "@marigold/tsconfig": "0.3.0",
-    "tsup": "5.11.13"
+    "react": "17.x",
+    "tsup": "5.12.7"
   },
   "scripts": {
     "build": "tsup src/index.ts",
     "watch": "tsup src/index.ts --watch",
     "clean": "rm -rf node_modules && rm -rf dist"
-  },
-  "readme": "# `@marigold/system`\n\n> Marigold system\n"
+  }
 }