@cfx-dev/ui-components 4.0.1 → 4.0.2

package/dist/components/ui.d.ts

@@ -1,5 +1,12 @@
 import { TextProps } from './Text/Text.types';
 
+export declare enum ZIndexEnum {
+    zero = "zero",
+    first = "first",
+    second = "second",
+    max = "max"
+}
+export type ZIndexType = keyof typeof ZIndexEnum;
 export declare enum OffsetEnum {
     none = "none",
     hairthin = "hairthin",
@@ -46,6 +53,7 @@ export declare namespace ui {
     export function q(multiplier?: number): string;
     export function offset(size: OffesetType): string;
     export function fontSize(size?: TextProps['size']): string;
+    export function zindex(name?: ZIndexType): string;
     export function borderRadius(size?: 'xsmall' | 'small' | 'normal'): string;
     export function color(name: string, variantRaw?: string | number, alpha?: number): string;
     export namespace cls {

package/dist/components/ui.js

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

package/dist/styles-scss/global.scss

@@ -25,6 +25,7 @@ body {
   @include accordion-tokens;
   @include mp-tokens;
   @include anchor-tokens;
+  @include zindex-tokens;
 
   // initiat fonts
   @include font-HelveticaNow;

package/dist/styles-scss/tokens.scss

@@ -2,6 +2,12 @@
 @use "ui";
 @import "ui";
 
+@mixin zindex-tokens() {
+  @each $name, $value in ui.$zindexMap {
+    @include ui.def('zindex-#{$name}', $value);
+  }
+}
+
 @mixin mp-tokens() {
   @each $name, $value in ui.$mediaMap {
     @include media-min($name) {

package/package.json

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