@marigold/system 0.3.0 → 0.4.0

package/dist/index.mjs

@@ -0,0 +1,361 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a2, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a2, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a2, prop, b[prop]);
+    }
+  return a2;
+};
+var __spreadProps = (a2, b) => __defProps(a2, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/Box.tsx
+import { jsx } from "@emotion/react";
+import { css as transformStyleObject } from "@theme-ui/css";
+import { forwardRef } from "react";
+
+// src/normalize.ts
+var base = {
+  boxSizing: "border-box",
+  margin: 0,
+  minWidth: 0
+};
+var a = __spreadProps(__spreadValues({}, base), {
+  textDecoration: "none"
+});
+var text = __spreadProps(__spreadValues({}, base), {
+  overflowWrap: "break-word"
+});
+var media = __spreadProps(__spreadValues({}, base), {
+  display: "block",
+  maxWidth: "100%"
+});
+var button = __spreadProps(__spreadValues({}, base), {
+  display: "block",
+  appearance: "none",
+  font: "inherit",
+  background: "transparent",
+  textAlign: "center"
+});
+var input = __spreadProps(__spreadValues({}, base), {
+  display: "block",
+  appearance: "none",
+  font: "inherit",
+  "&::-ms-clear": {
+    display: "none"
+  },
+  "&::-webkit-search-cancel-button": {
+    WebkitAppearance: "none"
+  }
+});
+var select = __spreadProps(__spreadValues({}, base), {
+  display: "block",
+  appearance: "none",
+  font: "inherit",
+  "&::-ms-expand": {
+    display: "none"
+  }
+});
+var textarea = __spreadProps(__spreadValues({}, base), {
+  display: "block",
+  appearance: "none",
+  font: "inherit"
+});
+var normalize = {
+  base,
+  a,
+  p: text,
+  h1: text,
+  h2: text,
+  h3: text,
+  h4: text,
+  h5: text,
+  h6: text,
+  img: media,
+  picture: media,
+  video: media,
+  canvas: media,
+  svg: media,
+  select,
+  button,
+  textarea,
+  input
+};
+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}`;
+};
+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];
+};
+
+// src/Box.tsx
+var isNotEmpty = (val) => !(val && Object.keys(val).length === 0 && val.constructor === Object);
+var createThemedStyle = ({ as, __baseCSS, variant, styles, css: css2 }) => (theme) => {
+  return [
+    getNormalizedStyles(as),
+    transformStyleObject(__baseCSS)(theme),
+    ...ensureArrayVariant(variant).map((v) => transformStyleObject({ variant: v })(theme)),
+    transformStyleObject(styles)(theme),
+    transformStyleObject(css2)(theme)
+  ].filter(isNotEmpty);
+};
+var Box = forwardRef((_a, ref) => {
+  var _b = _a, {
+    as = "div",
+    children,
+    __baseCSS,
+    variant,
+    css: css2 = {},
+    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
+  } = _b, props = __objRest(_b, [
+    "as",
+    "children",
+    "__baseCSS",
+    "variant",
+    "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"
+  ]);
+  return jsx(as, __spreadProps(__spreadValues({}, props), {
+    css: createThemedStyle({
+      as,
+      __baseCSS,
+      variant,
+      css: css2,
+      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
+      }
+    }),
+    ref
+  }), children);
+});
+
+// src/Global.tsx
+import React2 from "react";
+import { Global as EmotionGlobal } from "@emotion/react";
+
+// src/useTheme.tsx
+import React, {
+  createContext,
+  useCallback,
+  useContext
+} from "react";
+import { css as transformStyleObject2 } from "@theme-ui/css";
+import { ThemeProvider as EmotionProvider } from "@emotion/react";
+var __defaultTheme = {};
+var InternalContext = createContext(__defaultTheme);
+var useTheme = () => {
+  const theme = useContext(InternalContext);
+  const css2 = useCallback((style) => transformStyleObject2(style)(theme), [theme]);
+  return { theme, css: css2 };
+};
+function ThemeProvider({
+  theme,
+  children
+}) {
+  return /* @__PURE__ */ React.createElement(EmotionProvider, {
+    theme
+  }, /* @__PURE__ */ React.createElement(InternalContext.Provider, {
+    value: theme
+  }, children));
+}
+
+// src/Global.tsx
+var reduceMotionStyles = {
+  "@media screen and (prefers-reduced-motion: reduce), (update: slow)": {
+    "*": {
+      animationDuration: "0.001ms !important",
+      animationIterationCount: "1 !important",
+      transitionDuration: "0.001ms !important"
+    }
+  }
+};
+var Global = () => {
+  const { css: css2 } = useTheme();
+  const styles = css2({
+    html: {
+      height: "100%",
+      variant: "root.html"
+    },
+    body: {
+      height: "100%",
+      lineHeight: 1.5,
+      WebkitFontSmoothing: "antialiased",
+      variant: "root.body"
+    }
+  });
+  return /* @__PURE__ */ React2.createElement(EmotionGlobal, {
+    styles: __spreadValues({ reduceMotionStyles }, styles)
+  });
+};
+
+// src/SVG.tsx
+import { jsx as jsx2 } from "@emotion/react";
+var css = getNormalizedStyles("svg");
+var SVG = (_a) => {
+  var _b = _a, { size = 24, children } = _b, props = __objRest(_b, ["size", "children"]);
+  return jsx2("svg", __spreadProps(__spreadValues({
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "currentcolor"
+  }, props), {
+    css
+  }), children);
+};
+export {
+  Box,
+  Global,
+  SVG,
+  ThemeProvider,
+  __defaultTheme,
+  appendVariantState,
+  conditional,
+  ensureArray,
+  ensureArrayVariant,
+  ensureVariantDefault,
+  getNormalizedStyles,
+  normalize,
+  useTheme
+};

package/package.json

@@ -1,13 +1,33 @@
 {
   "name": "@marigold/system",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Marigold System Library",
-  "main": "dist/index.js",
-  "module": "dist/system.esm.js",
-  "typings": "dist/index.d.ts",
   "license": "MIT",
+  "keywords": [
+    "marigold",
+    "system",
+    "library",
+    "react",
+    "theme-ui",
+    "styling",
+    "css",
+    "emotion"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "github:marigold-ui/marigold",
+    "directory": "packages/system"
+  },
   "dependencies": {
     "@emotion/react": "11.7.1",
+    "@marigold/types": "0.4.0",
     "@theme-ui/css": "0.13.1",
     "csstype": "3.0.10"
   },
@@ -15,8 +35,13 @@
     "react": "^16.x || ^17.0.0",
     "react-dom": "^16.x || ^17.0.0"
   },
+  "devDependencies": {
+    "@marigold/tsconfig": "0.3.0",
+    "tsup": "5.11.13"
+  },
   "scripts": {
-    "build": "tsdx build --tsconfig tsconfig.build.json --transpileOnly",
-    "watch": "tsdx watch --tsconfig tsconfig.build.json --transpileOnly"
+    "build": "tsup src/index.ts",
+    "watch": "tsup src/index.ts --watch",
+    "clean": "rm -rf node_modules && rm -rf dist"
   }
-}
+}

package/dist/Box.d.ts

@@ -1,14 +0,0 @@
-import { PolymorphicPropsWithRef, PolymorphicComponentWithRef } from '@marigold/types';
-import { CSSObject } from './types';
-export declare type StyleProps = 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'>;
-export declare type BoxOwnProps = {
-    css?: CSSObject;
-    variant?: string | string[];
-    /**
-     * Use to set base styles for the component
-     * @internal Used to set default styles for Marigold components
-     */
-    __baseCSS?: CSSObject;
-} & StyleProps;
-export declare type BoxProps = PolymorphicPropsWithRef<BoxOwnProps, 'div'>;
-export declare const Box: PolymorphicComponentWithRef<BoxOwnProps, 'div'>;

package/dist/Global.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare const Global: () => JSX.Element;

package/dist/SVG.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-import { ComponentProps } from '@marigold/types';
-export declare type SVGProps = {
-    size?: number;
-} & ComponentProps<'svg'>;
-export declare const SVG: React.FC<SVGProps>;

package/dist/normalize.d.ts

@@ -1,144 +0,0 @@
-/// <reference types="react" />
-export 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;
-    };
-};
-export declare type NormalizedElement = keyof typeof normalize;
-/**
- * Type-safe helper to get normalization. If no normalization is found,
- * returns the *base* normalization.
- */
-export declare const getNormalizedStyles: (val?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | undefined) => {
-    readonly boxSizing: "border-box";
-    readonly margin: 0;
-    readonly minWidth: 0;
-};