@marigold/system 0.3.2 → 0.5.0

package/dist/index.js

@@ -1,8 +1,429 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+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;
+};
+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 });
+  }
+  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);
+};
+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);
 
-'use strict'
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Box: () => Box,
+  Global: () => Global,
+  SVG: () => SVG,
+  ThemeProvider: () => ThemeProvider,
+  __defaultTheme: () => __defaultTheme,
+  appendVariantState: () => appendVariantState,
+  conditional: () => conditional,
+  ensureArray: () => ensureArray,
+  ensureArrayVariant: () => ensureArrayVariant,
+  ensureVariantDefault: () => ensureVariantDefault,
+  getNormalizedStyles: () => getNormalizedStyles,
+  normalize: () => normalize,
+  useResponsiveValue: () => useResponsiveValue,
+  useTheme: () => useTheme
+});
 
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./system.cjs.production.min.js')
-} else {
-  module.exports = require('./system.cjs.development.js')
+// src/Box.tsx
+var import_react = require("@emotion/react");
+var import_css = require("@theme-ui/css");
+var import_react2 = require("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),
+    (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)(css2)(theme)
+  ].filter(isNotEmpty);
+};
+var Box = (0, import_react2.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 (0, import_react.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
+var import_react5 = __toESM(require("react"));
+var import_react6 = require("@emotion/react");
+
+// src/useTheme.tsx
+var import_react3 = __toESM(require("react"));
+var import_css2 = require("@theme-ui/css");
+var import_react4 = require("@emotion/react");
+var __defaultTheme = {};
+var InternalContext = (0, import_react3.createContext)(__defaultTheme);
+var useTheme = () => {
+  const theme = (0, import_react3.useContext)(InternalContext);
+  const css2 = (0, import_react3.useCallback)((style) => (0, import_css2.css)(style)(theme), [theme]);
+  return { theme, css: css2 };
+};
+function ThemeProvider({
+  theme,
+  children
+}) {
+  return /* @__PURE__ */ import_react3.default.createElement(import_react4.ThemeProvider, {
+    theme
+  }, /* @__PURE__ */ import_react3.default.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__ */ import_react5.default.createElement(import_react6.Global, {
+    styles: __spreadValues({ reduceMotionStyles }, styles)
+  });
+};
+
+// src/SVG.tsx
+var import_react7 = require("@emotion/react");
+var css = getNormalizedStyles("svg");
+var SVG = (_a) => {
+  var _b = _a, { size = 24, children } = _b, props = __objRest(_b, ["size", "children"]);
+  return (0, import_react7.jsx)("svg", __spreadProps(__spreadValues({
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "currentcolor"
+  }, props), {
+    css
+  }), 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,
+  Global,
+  SVG,
+  ThemeProvider,
+  __defaultTheme,
+  appendVariantState,
+  conditional,
+  ensureArray,
+  ensureArrayVariant,
+  ensureVariantDefault,
+  getNormalizedStyles,
+  normalize,
+  useResponsiveValue,
+  useTheme
+});