@cfx-dev/ui-components 2.0.10 → 2.1.0

package/dist/components/ui.js

@@ -1,29 +1,64 @@
-var l;
-((e) => {
-  function n(r = 1) {
+var z = /* @__PURE__ */ ((t) => (t.none = "none", t.hairthin = "hairthin", t.thin = "thin", t.xxsmall = "xxsmall", t.xsmall = "xsmall", t.small = "small", t.normal = "normal", t.medium = "medium", t.large = "large", t.xlarge = "xlarge", t.safezone = "safezone", t))(z || {}), A = /* @__PURE__ */ ((t) => (t.initial = "initial", t.xxsmall = "xxsmall", t.xsmall = "xsmall", t.small = "small", t.medium = "medium", t.large = "large", t.xlarge = "xlarge", t))(A || {}), d;
+((t) => {
+  function i(r = 1) {
     return `calc(var(--quant) * ${r})`;
   }
-  e.q = n;
-  function o(r) {
+  t.q = i;
+  function s(r) {
     return `var(--offset-${r})`;
   }
-  e.offset = o;
-  function f(r = "normal") {
+  t.offset = s;
+  function u(r = "normal") {
     return `var(--font-size-${r})`;
   }
-  e.fontSize = f;
-  function a(r = "normal") {
+  t.fontSize = u;
+  function S(r = "normal") {
     return `var(--border-radius-${r})`;
   }
-  e.borderRadius = a;
-  function $(r, u, i = 1) {
-    let t = u;
-    return t === "pure" && (t = ""), typeof t == "number" && (t = `${t}`), `rgba(var(--color-${r}${t ? `-${t}` : ""}), ${i})`;
+  t.borderRadius = S;
+  function b(r, l, n = 1) {
+    let e = l;
+    return e === "pure" && (e = ""), typeof e == "number" && (e = `${e}`), `rgba(var(--color-${r}${e ? `-${e}` : ""}), ${n})`;
   }
-  e.color = $, ((r) => {
+  t.color = b, ((r) => {
     r.fullWidth = "util-full-width", r.fullHeight = "util-full-height", r.flexGrow = "util-flex-grow", r.flexNoShrink = "util-flex-no-shrink", r.userSelectableText = "util-text-selectable", r.zIndex9000 = "util-z-index-9000";
-  })(e.cls || (e.cls = {})), e.pc = (r) => `${r}%`, e.px = (r) => `${r}px`, e.ch = (r) => `${r}ch`, e.em = (r) => `${r}em`, e.rem = (r) => `${r}rem`, e.vh = (r) => `${r}vh`, e.vw = (r) => `${r}vw`, e.url = (r) => `url(${r})`;
-})(l || (l = {}));
+  })(t.cls || (t.cls = {})), t.pc = (r) => `${r}%`, t.px = (r) => `${r}px`, t.ch = (r) => `${r}ch`, t.em = (r) => `${r}em`, t.rem = (r) => `${r}rem`, t.vh = (r) => `${r}vh`, t.vw = (r) => `${r}vw`, t.url = (r) => `url(${r})`, t.getOffsetAttrs = (r, l) => typeof l == "string" || typeof l == "number" ? {
+    [`data-${r}-initial`]: l.toString()
+  } : Object.entries(l).reduce((n, [e, o]) => (n[`data-${r}-${e}`] = o.toString(), n), {}), t.getOffsetStyles = (r, l) => typeof l == "string" ? {
+    [`--${r}-initial`]: s(l)
+  } : typeof l == "number" ? {
+    [`--${r}-initial`]: i(l)
+  } : Object.entries(l).reduce((n, [e, o]) => (n[`--${r}-${e}`] = typeof o == "number" ? i(o) : s(o), n), {});
+  function x(r, l) {
+    const {
+      m: n,
+      mt: e,
+      mr: o,
+      mb: f,
+      ml: $,
+      p: m,
+      pt: p,
+      pr: g,
+      pb: a,
+      pl: h
+    } = r;
+    return {
+      ...n ? l("m", n) : null,
+      ...e ? l("mt", e) : null,
+      ...o ? l("mr", o) : null,
+      ...f ? l("mb", f) : null,
+      ...$ ? l("ml", $) : null,
+      ...m ? l("p", m) : null,
+      ...p ? l("pt", p) : null,
+      ...g ? l("pr", g) : null,
+      ...a ? l("pb", a) : null,
+      ...h ? l("pl", h) : null
+    };
+  }
+  t.callAllMPProps = x, t.getAllMPStyles = (r) => x(r, t.getOffsetStyles), t.getAllMPAttrs = (r) => x(r, t.getOffsetAttrs);
+})(d || (d = {}));
 export {
-  l as ui
+  A as MediaQueryEnum,
+  z as OffsetEnum,
+  d as ui
 };

package/dist/styles-scss/global.scss

@@ -23,6 +23,7 @@ body {
   @include button-tokens;
   @include badge-tokens;
   @include accordion-tokens;
+  @include mp-tokens;
 
   // initiat fonts
   @include font-HelveticaNow;

package/dist/styles-scss/tokens.scss

@@ -2,6 +2,31 @@
 @use "ui";
 @import "ui";
 
+$mpMap: (
+  m: margin,
+  mt: margin-top,
+  mr: margin-right,
+  mb: margin-bottom,
+  ml: margin-left,
+  p: padding,
+  pt: padding-top,
+  pr: padding-right,
+  pb: padding-bottom,
+  pl: padding-left,
+);
+
+@mixin mp-tokens() {
+  @each $name, $value in $mediaMap {
+    @include media-min($name) {
+      @each $mpName, $mpProp in $mpMap {
+        [data-#{$mpName}-#{$name}] {
+          #{$mpProp}: var(--#{$mpName}-#{$name});
+        }
+      }
+    }
+  }
+}
+
 @mixin border-radius-tokens() {
   @include ui.def('border-radius-none', 0);
   @include ui.def('border-radius-xxsmall', ui.q(.25));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cfx-dev/ui-components",
   "private": false,
-  "version": "2.0.10",
+  "version": "2.1.0",
   "type": "module",
   "license": "MIT",
   "main": "dist/main.js",