@marigold/system 0.9.0 → 1.0.1

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { Simplify, 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 * as react from 'react';
@@ -10,28 +10,6 @@ declare type StyleObject = ThemeUIStyleObject;
 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'> {
-}
-interface BoxOwnProps extends StyleProps {
-    css?: CSSObject;
-    variant?: string | string[];
-    /**
-     * Use to set base styles for the component
-     * @internal Used to set default styles for Marigold components
-     */
-    __baseCSS?: CSSObject;
-}
-interface BoxProps extends PolymorphicPropsWithRef<BoxOwnProps, 'div'> {
-}
-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;
-
 /**
  * Props that every component should accepts to change the styling
  */
@@ -219,6 +197,27 @@ 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 {
+    css?: CSSObject;
+    /**
+     * Use to set base styles for the component
+     * @internal
+     */
+    __baseCSS?: CSSObject;
+}
+interface BoxProps extends PolymorphicPropsWithRef<BoxOwnProps, 'div'> {
+}
+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;
+
 interface ComponentStylesProps {
     variant?: string;
     size?: string;
@@ -242,8 +241,8 @@ declare function useComponentStyles<Part extends string, Parts extends ReadonlyA
  */
 declare const useResponsiveValue: <T>(values: T[], defaultIndex?: number) => T;
 
-declare type ComponentState = 'hover' | 'focus' | 'active' | 'visited' | 'disabled' | 'readOnly' | 'checked' | 'indeterminate' | 'error';
-declare type StateAttrKeyProps = `data-${Lowercase<ComponentState>}`;
+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]?: '';
 };
@@ -421,34 +420,4 @@ declare const getNormalizedStyles: (val?: ElementType<any> | undefined) => {
     readonly minWidth: 0;
 };
 
-/**
- * Ensures that the `val` is an array. Will return an empty array if `val` is falsy.
- */
-declare const ensureArray: <T>(val?: T | T[] | undefined) => T[];
-/**
- * Removes trailing dot from variant, if necessary. This is necessary to support
- * `__default` styles. See https://github.com/system-ui/theme-ui/pull/951
- */
-declare const ensureVariantDefault: (val: string) => string;
-/**
- * Ensures that the `variant` is an array and supports the `__default` key.
- */
-declare const ensureArrayVariant: <T extends string>(variant?: T | T[] | undefined) => string[];
-interface State {
-    checked?: boolean;
-    focus?: boolean;
-    hover?: boolean;
-    disabled?: boolean;
-    error?: boolean;
-}
-/**
- * Appends given `state` to a `variant`.
- */
-declare const appendVariantState: (variant: string, state: keyof State) => string;
-/**
- * Create a variant array from a `variant` and `state` containing
- * passed states, if they are truthy.
- */
-declare const conditional: (variant: string, { disabled, ...states }: State) => string[];
-
-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 };
+export { Box, BoxOwnProps, BoxProps, CSSObject, CSSProperties, ComponentState, ComponentStyleParts, ComponentStylesProps, Global, NormalizedElement, ResponsiveStyleValue, SVG, SVGProps, Scale, ScaleValue, SizeScale, StateAttrKeyProps, StateAttrProps, StyleObject, StyleProps, Theme, ThemeComponentProps, ThemeExtension, ThemeExtensionsWithParts, ThemeProvider, ThemeProviderProps, UseStateProps, ZeroScale, ZeroSizeScale, __defaultTheme, getNormalizedStyles, normalize, useComponentStyles, useResponsiveValue, useStateProps, useTheme };

package/dist/index.js

@@ -56,11 +56,6 @@ __export(src_exports, {
   SVG: () => SVG,
   ThemeProvider: () => ThemeProvider,
   __defaultTheme: () => __defaultTheme,
-  appendVariantState: () => appendVariantState,
-  conditional: () => conditional,
-  ensureArray: () => ensureArray,
-  ensureArrayVariant: () => ensureArrayVariant,
-  ensureVariantDefault: () => ensureVariantDefault,
   getNormalizedStyles: () => getNormalizedStyles,
   normalize: () => normalize,
   useComponentStyles: () => useComponentStyles,
@@ -145,31 +140,45 @@ var normalize = {
 };
 var getNormalizedStyles = (val) => typeof val === "string" && val in normalize ? normalize[val] : normalize.base;
 
-// src/variant.ts
-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}`;
+// src/components/Box/utils.ts
+var createteSelector = (selectors, states, suffix = "") => {
+  return selectors.map((selector2) => states.map((state2) => `${selector2}${state2}${suffix ? ` ${suffix}` : ""}`)).flat().join(", ");
 };
-var conditional = (variant, _a) => {
-  var _b = _a, { disabled = false } = _b, states = __objRest(_b, ["disabled"]);
-  const entries = [...Object.entries(states), ["disabled", disabled]];
-  const stateVariants = entries.filter(([, val]) => Boolean(val)).map(([key]) => appendVariantState(variant, key));
-  return [variant, ...stateVariants];
+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]"]
 };
-
-// src/components/Box/utils.ts
 var pseudos = {
-  "&:hover": "&:hover, &[data-hover]",
-  "&:focus": "&:focus, &[data-focus]",
-  "&:active": "&:active, &[data-active]",
-  "&:disabled": "&[disabled], &[aria-disabled=true], &[data-disabled]",
-  "&:read-only": "&[readonly], &[aria-readonly=true], &[data-readonly]",
-  "&:checked": "&[aria-checked=true], &[data-checked]",
-  "&:indeterminate": "&:indeterminate, &[aria-checked=mixed], &[data-indeterminate]",
-  "&:error": "&:invalid, &[aria-invalid=true], &[data-error]"
+  "&: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 = {};
@@ -188,11 +197,10 @@ var transformPseudos = (styles) => {
 };
 
 // src/components/Box/Box.tsx
-var createThemedStyle = ({ as, __baseCSS, variant, styles, css }) => (theme) => {
+var createThemedStyle = ({ as, __baseCSS, styles, css }) => (theme) => {
   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)
   ]);
@@ -203,8 +211,7 @@ var Box = (0, import_react.forwardRef)((_a, ref) => {
     as = "div",
     children,
     __baseCSS,
-    variant,
-    css = {},
+    css,
     display,
     height,
     width,
@@ -247,7 +254,6 @@ var Box = (0, import_react.forwardRef)((_a, ref) => {
     "as",
     "children",
     "__baseCSS",
-    "variant",
     "css",
     "display",
     "height",
@@ -292,7 +298,6 @@ var Box = (0, import_react.forwardRef)((_a, ref) => {
     css: createThemedStyle({
       as,
       __baseCSS,
-      variant,
       css,
       styles: {
         display,
@@ -433,12 +438,14 @@ var useResponsiveValue = (values, defaultIndex = 0) => {
 // 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 state in states) {
-    if (states[state]) {
-      const key = `data-${state.toLocaleLowerCase()}`;
+  for (let state2 in states) {
+    if (states[state2]) {
+      const key = `data-${toKebap(state2)}`;
       stateProps[key] = "";
     }
   }
@@ -510,11 +517,6 @@ var SVG = (_a) => {
   SVG,
   ThemeProvider,
   __defaultTheme,
-  appendVariantState,
-  conditional,
-  ensureArray,
-  ensureArrayVariant,
-  ensureVariantDefault,
   getNormalizedStyles,
   normalize,
   useComponentStyles,

package/dist/index.mjs

@@ -105,31 +105,45 @@ var normalize = {
 };
 var getNormalizedStyles = (val) => typeof val === "string" && val in normalize ? normalize[val] : normalize.base;
 
-// src/variant.ts
-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}`;
+// src/components/Box/utils.ts
+var createteSelector = (selectors, states, suffix = "") => {
+  return selectors.map((selector2) => states.map((state2) => `${selector2}${state2}${suffix ? ` ${suffix}` : ""}`)).flat().join(", ");
 };
-var conditional = (variant, _a) => {
-  var _b = _a, { disabled = false } = _b, states = __objRest(_b, ["disabled"]);
-  const entries = [...Object.entries(states), ["disabled", disabled]];
-  const stateVariants = entries.filter(([, val]) => Boolean(val)).map(([key]) => appendVariantState(variant, key));
-  return [variant, ...stateVariants];
+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]"]
 };
-
-// src/components/Box/utils.ts
 var pseudos = {
-  "&:hover": "&:hover, &[data-hover]",
-  "&:focus": "&:focus, &[data-focus]",
-  "&:active": "&:active, &[data-active]",
-  "&:disabled": "&[disabled], &[aria-disabled=true], &[data-disabled]",
-  "&:read-only": "&[readonly], &[aria-readonly=true], &[data-readonly]",
-  "&:checked": "&[aria-checked=true], &[data-checked]",
-  "&:indeterminate": "&:indeterminate, &[aria-checked=mixed], &[data-indeterminate]",
-  "&:error": "&:invalid, &[aria-invalid=true], &[data-error]"
+  "&: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 = {};
@@ -148,11 +162,10 @@ var transformPseudos = (styles) => {
 };
 
 // src/components/Box/Box.tsx
-var createThemedStyle = ({ as, __baseCSS, variant, styles, css }) => (theme) => {
+var createThemedStyle = ({ as, __baseCSS, styles, css }) => (theme) => {
   const themedStyles = merge.all([
     getNormalizedStyles(as),
     transformStyleObject(__baseCSS)(theme),
-    ...ensureArrayVariant(variant).map((v) => transformStyleObject({ variant: v })(theme)),
     transformStyleObject(styles)(theme),
     transformStyleObject(css)(theme)
   ]);
@@ -163,8 +176,7 @@ var Box = forwardRef((_a, ref) => {
     as = "div",
     children,
     __baseCSS,
-    variant,
-    css = {},
+    css,
     display,
     height,
     width,
@@ -207,7 +219,6 @@ var Box = forwardRef((_a, ref) => {
     "as",
     "children",
     "__baseCSS",
-    "variant",
     "css",
     "display",
     "height",
@@ -252,7 +263,6 @@ var Box = forwardRef((_a, ref) => {
     css: createThemedStyle({
       as,
       __baseCSS,
-      variant,
       css,
       styles: {
         display,
@@ -400,12 +410,14 @@ var useResponsiveValue = (values, defaultIndex = 0) => {
 // 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 state in states) {
-    if (states[state]) {
-      const key = `data-${state.toLocaleLowerCase()}`;
+  for (let state2 in states) {
+    if (states[state2]) {
+      const key = `data-${toKebap(state2)}`;
       stateProps[key] = "";
     }
   }
@@ -476,11 +488,6 @@ export {
   SVG,
   ThemeProvider,
   __defaultTheme,
-  appendVariantState,
-  conditional,
-  ensureArray,
-  ensureArrayVariant,
-  ensureVariantDefault,
   getNormalizedStyles,
   normalize,
   useComponentStyles,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/system",
-  "version": "0.9.0",
+  "version": "1.0.1",
   "description": "Marigold System Library",
   "license": "MIT",
   "keywords": [
@@ -26,9 +26,9 @@
     "directory": "packages/system"
   },
   "dependencies": {
-    "@emotion/react": "11.8.2",
-    "@marigold/types": "0.4.1",
-    "@theme-ui/css": "0.14.2",
+    "@emotion/react": "11.9.0",
+    "@marigold/types": "0.5.1",
+    "@theme-ui/css": "0.14.5",
     "csstype": "3.0.11",
     "deepmerge": "^4.2.2",
     "react-fast-compare": "^3.2.0"
@@ -38,13 +38,14 @@
     "react-dom": "^16.x || ^17.0.0"
   },
   "devDependencies": {
+    "@babel/core": "7.17.12",
     "@marigold/tsconfig": "0.3.0",
-    "tsup": "5.12.5"
+    "react": "17.0.2",
+    "tsup": "5.12.8"
   },
   "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"
+  }
 }