@cfx-dev/ui-components 2.0.9 → 2.1.0

package/dist/components/Table/Table.js

@@ -1,86 +1,145 @@
-import { jsx as o, jsxs as i } from "react/jsx-runtime";
-import f, { useState as m } from "react";
-import O from "../Checkbox/Checkbox.js";
-import j from "../IconButton/IconButton.js";
-import '../../assets/Table.css';const x = "_pointer_19b0f_18", A = "_selectedRow_19b0f_22", E = "_headerContent_19b0f_40", z = "_sortButton_19b0f_47", l = {
-  "table-responsive": "_table-responsive_19b0f_1",
-  pointer: x,
-  selectedRow: A,
-  headerContent: E,
-  sortButton: z
+import { jsx as t, jsxs as j } from "react/jsx-runtime";
+import l, { useState as C } from "react";
+import N from "../Checkbox/Checkbox.js";
+import B from "../IconButton/IconButton.js";
+import { Text as v } from "../Text/Text.js";
+import { clsx as z } from "../../utils/clsx.js";
+import '../../assets/Table.css';const $ = "_root_jdj5z_1", T = "_radio_jdj5z_15", A = "_pointer_jdj5z_21", E = "_selectedRow_jdj5z_24", O = "_headerContent_jdj5z_34", S = "_sortable_jdj5z_40", F = "_empty_jdj5z_40", H = "_sortButton_jdj5z_43", r = {
+  root: $,
+  radio: T,
+  pointer: A,
+  selectedRow: E,
+  headerContent: O,
+  sortable: S,
+  empty: F,
+  sortButton: H
 };
-function F({
-  headers: u = [],
-  data: B = [],
-  includeRadio: r = !1,
-  onSelectChange: c,
+function V(h) {
+  const {
+    item: e,
+    onSortClick: o
+  } = h, s = l.useCallback(() => {
+    o && o(e.sortKey || e.text);
+  }, [e.sortKey, e.text, o]), b = z(r.headerContent, {
+    [r.sortable]: e.sortable,
+    [r.empty]: !e.text
+  });
+  return /* @__PURE__ */ t(
+    "th",
+    {
+      className: e.sortable ? r.pointer : void 0,
+      onClick: e.sortable ? s : void 0,
+      children: /* @__PURE__ */ j("div", { className: b, children: [
+        /* @__PURE__ */ t(v, { color: "secondary", weight: "bold", uppercase: !0, size: "xxsmall", children: e.text }),
+        !!e.sortable && /* @__PURE__ */ t(
+          B,
+          {
+            className: r.sortButton,
+            color: "secondary",
+            name: "Sort",
+            onClick: s
+          }
+        )
+      ] })
+    }
+  );
+}
+function q(h) {
+  const {
+    index: e,
+    includeRadio: o = !1,
+    selectedRow: s,
+    item: b,
+    dataContainer: m,
+    onSelectChange: a
+  } = h, f = l.useCallback((n) => {
+    a(
+      n ? e : null
+    );
+  }, [a, e]), _ = l.useCallback(() => {
+    a(e);
+  }, [a, e]), p = z({
+    [r.selectedRow]: s === e,
+    [r.pointer]: o
+  });
+  return /* @__PURE__ */ j(
+    "tr",
+    {
+      className: p,
+      onClick: o ? _ : void 0,
+      children: [
+        o && /* @__PURE__ */ t("td", { className: r.radio, children: /* @__PURE__ */ t(
+          N,
+          {
+            size: "small",
+            onCheckedChange: f,
+            "aria-label": `${e}`,
+            checked: s === e
+          }
+        ) }),
+        b.map((n, u) => {
+          let i;
+          return l.isValidElement(n) ? i = n : m ? i = l.createElement(m, { item: n }) : i = String(n), /* @__PURE__ */ t("td", { children: i }, `item-${u}`);
+        })
+      ]
+    },
+    `row-${e}`
+  );
+}
+function M({
+  headers: h = [],
+  data: e = [],
+  includeRadio: o = !1,
+  onSelectChange: s,
   dataContainer: b,
-  useSort: n = !1,
-  sortBy: k,
-  sortOrder: v = "asc",
-  onSortChange: d
+  selectedRow: m = null,
+  sortBy: a,
+  sortOrder: f = "asc",
+  onSortChange: _
 }) {
-  const [p, y] = m(null), [R, w] = m(k), [$, N] = m(v), _ = (e) => {
-    const t = R === e && $ === "asc" ? "desc" : "asc";
-    w(e), N(t), d == null || d(e, t);
-  }, h = f.useCallback(
-    (e, s) => {
-      if (typeof e == "boolean") {
-        const t = e ? s : null;
-        y(t), t !== null && (c == null || c(t));
-      }
+  const [p, n] = C(m), [u, i] = C(a), [k, w] = C(f), R = l.useCallback((c) => {
+    const x = u === c && k === "asc" ? "desc" : "asc";
+    i(c), w(x), _ == null || _(c, x);
+  }, [_, u, k]), y = l.useCallback(
+    (c) => {
+      const d = c === p ? null : c;
+      n(d), s == null || s(d);
     },
-    [c]
+    [s, p]
   );
-  return /* @__PURE__ */ o("div", { className: l.tableResponsive, children: /* @__PURE__ */ i("table", { children: [
-    /* @__PURE__ */ o("thead", { children: /* @__PURE__ */ i("tr", { children: [
-      r && /* @__PURE__ */ o("th", { "aria-label": "Select Row" }),
-      u.map((e, s) => /* @__PURE__ */ o(
-        "th",
+  return l.useEffect(() => {
+    n(m);
+  }, [m]), l.useEffect(() => {
+    i(a);
+  }, [a]), l.useEffect(() => {
+    w(f);
+  }, [f]), /* @__PURE__ */ t("div", { className: r.root, children: /* @__PURE__ */ j("table", { children: [
+    /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ j("tr", { children: [
+      o && /* @__PURE__ */ t("th", { "aria-label": "Select Row" }),
+      h.map((c, d) => /* @__PURE__ */ t(
+        V,
         {
-          className: n ? l.pointer : "",
-          onClick: () => n && _(e),
-          children: /* @__PURE__ */ i("div", { className: l.headerContent, children: [
-            e,
-            n && /* @__PURE__ */ o(
-              j,
-              {
-                className: l.sortButton,
-                color: "secondary",
-                name: "Sort",
-                onClick: n ? () => _(e) : void 0
-              }
-            )
-          ] })
+          item: c,
+          onSortClick: R
         },
-        `header-${s}`
+        `header-${d}`
       ))
     ] }) }),
-    /* @__PURE__ */ o("tbody", { children: B.map((e, s) => /* @__PURE__ */ i(
-      "tr",
+    /* @__PURE__ */ t("tbody", { children: e.map((c, d) => /* @__PURE__ */ t(
+      q,
       {
-        className: `${p === s ? l.selectedRow : ""} ${r ? l.pointer : ""}`,
-        onClick: r ? () => h(!0, s) : void 0,
-        children: [
-          r && /* @__PURE__ */ o("td", { children: /* @__PURE__ */ o(
-            O,
-            {
-              size: "small",
-              onCheckedChange: (t) => h(t, s),
-              "aria-label": `${s}`,
-              checked: p === s
-            }
-          ) }),
-          e.map((t, C) => {
-            let a;
-            return f.isValidElement(t) ? a = t : b ? a = f.createElement(b, { item: t }) : a = String(t), /* @__PURE__ */ o("td", { children: a }, `item-${C}`);
-          })
-        ]
+        index: d,
+        item: c,
+        includeRadio: o,
+        selectedRow: p,
+        onSelectChange: y,
+        dataContainer: b
       },
-      `row-${s}`
+      `row-${d}`
     )) })
   ] }) });
 }
 export {
-  F as Table
+  M as Table,
+  V as TableHeaderItem
 };

package/dist/components/Table/TableShowcase.js

@@ -27,7 +27,13 @@ const i = [
   ["Cell 7", "Cell 8", "Cell 9", new Date(2023, 2, 1).toLocaleDateString(), /* @__PURE__ */ e(l, { children: "Badge" }, "3")],
   ["Cell 4", "Cell 5", "Cell 6", new Date(2023, 1, 1).toLocaleDateString(), /* @__PURE__ */ e(l, { children: "Badge" }, "2")],
   ["Cell 7", "Cell 8", "Cell 9", new Date(2023, 2, 1).toLocaleDateString(), /* @__PURE__ */ e(l, { children: "Badge" }, "3")]
-], n = ["Header 1", "Header 2", "Header 3", "Date", "Item"];
+], n = [
+  { text: "Header 1" },
+  { text: "Header 2" },
+  { text: "Header 3" },
+  { text: "Date" },
+  { text: "Item" }
+];
 function C() {
   return /* @__PURE__ */ t(a, { gap: "large", vertical: !0, children: [
     /* @__PURE__ */ t(a, { gap: "normal", vertical: !0, children: [

package/dist/components/Table/index.d.ts

@@ -0,0 +1,2 @@
+export { Table } from './Table';
+export type { TableProps } from './Table';

package/dist/components/Table/index.js

@@ -0,0 +1,4 @@
+import { Table as r } from "./Table.js";
+export {
+  r as Table
+};

package/dist/components/ui.d.ts

@@ -1,15 +1,54 @@
 import { TextProps } from './Text/Text.types';
 
+export declare enum OffsetEnum {
+    none = "none",
+    hairthin = "hairthin",
+    thin = "thin",
+    xxsmall = "xxsmall",
+    xsmall = "xsmall",
+    small = "small",
+    normal = "normal",
+    medium = "medium",
+    large = "large",
+    xlarge = "xlarge",
+    safezone = "safezone"
+}
+export type OffesetType = keyof typeof OffsetEnum;
+export declare enum MediaQueryEnum {
+    initial = "initial",
+    xxsmall = "xxsmall",
+    xsmall = "xsmall",
+    small = "small",
+    medium = "medium",
+    large = "large",
+    xlarge = "xlarge"
+}
+export type MediaQueryType = keyof typeof MediaQueryEnum;
+export type ResponsiveOffsetType = OffesetType | number | {
+    [key in MediaQueryType]?: OffesetType | number;
+};
+export interface MPProps {
+    m?: ResponsiveOffsetType;
+    mt?: ResponsiveOffsetType;
+    mr?: ResponsiveOffsetType;
+    mb?: ResponsiveOffsetType;
+    ml?: ResponsiveOffsetType;
+    p?: ResponsiveOffsetType;
+    pt?: ResponsiveOffsetType;
+    pr?: ResponsiveOffsetType;
+    pb?: ResponsiveOffsetType;
+    pl?: ResponsiveOffsetType;
+}
 export declare namespace ui {
     /**
      * Returns CSS value of quant value with applied multiplier
      */
-    function q(multiplier?: number): string;
-    function offset(size?: 'none' | 'xsmall' | 'small' | 'normal' | 'large' | 'xlarge' | 'safezone'): string;
-    function fontSize(size?: TextProps['size']): string;
-    function borderRadius(size?: 'xsmall' | 'small' | 'normal'): string;
-    function color(name: string, variantRaw?: string | number, alpha?: number): string;
-    namespace cls {
+    export function q(multiplier?: number): string;
+    export function offset(size: OffesetType): string;
+    export function fontSize(size?: TextProps['size']): string;
+    export function borderRadius(size?: 'xsmall' | 'small' | 'normal'): string;
+    export function color(name: string, variantRaw?: string | number, alpha?: number): string;
+    export namespace cls {
         const fullWidth = "util-full-width";
         const fullHeight = "util-full-height";
         const flexGrow = "util-flex-grow";
@@ -17,12 +56,19 @@ export declare namespace ui {
         const userSelectableText = "util-text-selectable";
         const zIndex9000 = "util-z-index-9000";
     }
-    const pc: (x: number | string) => string;
-    const px: (x: number | string) => string;
-    const ch: (x: number | string) => string;
-    const em: (x: number | string) => string;
-    const rem: (x: number | string) => string;
-    const vh: (x: number | string) => string;
-    const vw: (x: number | string) => string;
-    const url: (u: unknown) => string;
+    export const pc: (x: number | string) => string;
+    export const px: (x: number | string) => string;
+    export const ch: (x: number | string) => string;
+    export const em: (x: number | string) => string;
+    export const rem: (x: number | string) => string;
+    export const vh: (x: number | string) => string;
+    export const vw: (x: number | string) => string;
+    export const url: (u: unknown) => string;
+    export const getOffsetAttrs: (name: string, value: ResponsiveOffsetType) => Record<string, string>;
+    export const getOffsetStyles: (name: string, value: ResponsiveOffsetType) => Record<string, string>;
+    type CallbackType<T> = (name: string, value: ResponsiveOffsetType) => T;
+    export function callAllMPProps<T>(props: Partial<MPProps>, callback: CallbackType<T>): {};
+    export const getAllMPStyles: (props: Partial<MPProps>) => React.CSSProperties;
+    export const getAllMPAttrs: (props: Partial<MPProps>) => Record<string, string>;
+    export {};
 }

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 = "normal") {
+  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/main.d.ts

@@ -84,4 +84,5 @@ export type { PopoverProps } from './components/Popover';
 export type { AvatarProps, AvatarSize } from './components/Avatar';
 export { OnScreenSensor } from './components/OnScreenSensor';
 export { ui } from './components/ui';
+export type { OffesetType, MediaQueryType } from './components/ui';
 export { Symbols } from './components/Symbols';

package/dist/styles-scss/_ui.scss

@@ -235,36 +235,25 @@ $cfxui-color-alpha: (
   background-attachment: $topLayerAttachement, scroll, fixed, fixed;
 }
 
+$offsets: (
+  'none': 0px,
+  'hairthin': 1px,
+  'thin': 2px,
+  'xxsmall': q(.25),
+  'xsmall': q(.5),
+  'small': q(1),
+  'normal': q(2),
+  'medium': q(2.5),
+  'large': q(4),
+  'xlarge': q(6),
+  'safezone': q(8),
+);
+
 @mixin offset-classes($prefix: 'offset', $property: 'gap') {
-  &.#{$prefix}-none {
-    #{$property}: offset('none');
-  }
-  &.#{$prefix}-hairthin {
-    #{$property}: offset('hairthin');
-  }
-  &.#{$prefix}-thin {
-    #{$property}: offset('thin');
-  }
-  &.#{$prefix}-xxsmall {
-    #{$property}: offset('xxsmall');
-  }
-  &.#{$prefix}-xsmall {
-    #{$property}: offset('xsmall');
-  }
-  &.#{$prefix}-small {
-    #{$property}: offset('small');
-  }
-  &.#{$prefix}-normal {
-    #{$property}: offset('normal');
-  }
-  &.#{$prefix}-large {
-    #{$property}: offset('large');
-  }
-  &.#{$prefix}-xlarge {
-    #{$property}: offset('xlarge');
-  }
-  &.#{$prefix}-safezone {
-    #{$property}: offset('safezone');
+  @each $name, $value in $offsets {
+    &.#{$prefix}-#{$name} {
+      #{$property}: offset('#{$name}');
+    }
   }
 }
 
@@ -321,6 +310,7 @@ $zindexMap: (
 }
 
 $mediaMap: (
+  'initial': 0px,
   'xxsmall': 360px,
   'xsmall': 640px,
   'small': 768px,
@@ -331,7 +321,11 @@ $mediaMap: (
 
 @mixin media-max($size: 'medium', $fix: 'empty') {
   @if $fix == 'empty' {
-    @media (min-width: calc(map.get($mediaMap, $size) - 1px)) { @content; }
+    @if $size == 'initial' {
+      @content;
+    } @else {
+      @media (min-width: calc(map.get($mediaMap, $size) - 1px)) { @content; }
+    }
   } @else {
     @media (min-width: $fix) { @content; }
   }
@@ -339,7 +333,11 @@ $mediaMap: (
 
 @mixin media-min($size: 'medium', $fix: 'empty') {
   @if $fix == 'empty' {
-    @media (min-width: map.get($mediaMap, $size)) { @content; }
+    @if $size == 'initial' {
+      @content;
+    } @else {
+      @media (min-width: map.get($mediaMap, $size)) { @content; }
+    }
   } @else {
     @media (min-width: $fix) { @content; }
   }

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

@@ -1,5 +1,31 @@
 @use "sass:map";
 @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);
@@ -48,20 +74,6 @@
   @include ui.define-color-token('text-a75', ui.color('primary', $alpha: .75));
 }
 
-$offsets: (
-  'none': 0px,
-  'hairthin': 1px,
-  'thin': 2px,
-  'xxsmall': ui.q(.25),
-  'xsmall': ui.q(.5),
-  'small': ui.q(1),
-  'normal': ui.q(2),
-  'medium': ui.q(2.5),
-  'large': ui.q(4),
-  'xlarge': ui.q(6),
-  'safezone': ui.q(8),
-);
-
 @mixin offset-tokens() {
   @each $name, $value in $offsets {
     @include ui.def('offset-#{$name}', $value);

package/package.json

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