@cfx-dev/ui-components 1.0.0 → 2.0.1

package/dist/components/Tabular/Tabular.d.ts

@@ -1,30 +1,35 @@
 import { default as React } from 'react';
 
+export type TabularTheme = 'light' | 'dark';
+export type TabularRole = 'tablist' | 'navigation';
 export interface TabularItem {
     id: string;
-    label?: React.ReactNode;
-    icon?: React.ReactNode;
+    label: React.ReactNode;
     disabled?: boolean;
+    ariaLabel?: string;
+    ariaControls?: string;
+    hasNotification?: boolean;
 }
 export interface TabularProps {
     items: TabularItem[];
     activeItem: string;
-    onActivate(id: string): void;
+    onActivate?: (id: string) => void;
+    itemClassName?: string;
+    className?: string;
+    ariaLabel?: string;
+    tabIndex?: number;
+    theme?: TabularTheme;
+    role?: TabularRole;
 }
 export declare function Tabular(props: TabularProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Tabular {
     var Root: (props: TabularRootProps) => import("react/jsx-runtime").JSX.Element;
-    var Item: React.ForwardRefExoticComponent<Pick<TabularItem, "label" | "disabled" | "icon"> & {
-        active?: boolean;
-        onClick?(): void;
-    } & React.RefAttributes<HTMLDivElement>>;
+    var Item: (props: TabularItemProps) => import("react/jsx-runtime").JSX.Element;
+}
+export interface TabularRootProps extends React.PropsWithChildren, Pick<TabularProps, 'className' | 'ariaLabel' | 'tabIndex' | 'theme' | 'role'> {
 }
-export type TabularRootProps = {
-    size?: 'normal' | 'large';
-    children?: React.ReactNode;
+export interface TabularItemProps extends TabularItem {
+    active: boolean;
+    onClick: (id: string) => void;
     className?: string;
-};
-export type TabularItemProps = Pick<TabularItem, 'icon' | 'label' | 'disabled'> & {
-    active?: boolean;
-    onClick?(): void;
-};
+}

package/dist/components/Tabular/Tabular.js

@@ -1,64 +1,94 @@
-import { jsxs as _, jsx as c, Fragment as b } from "react/jsx-runtime";
-import f from "react";
-import { Interactive as u } from "../Interactive/Interactive.js";
-import { clsx as d } from "../../utils/clsx.js";
-import '../../assets/Tabular.css';const w = "_root_6vp2w_1", N = "_item_6vp2w_6", h = "_content_6vp2w_7", I = "_iconOnly_6vp2w_25", R = "_icon_6vp2w_25", x = "_label_6vp2w_41", y = "_decorator_6vp2w_47", z = "_active_6vp2w_63", o = {
-  root: w,
-  "size-large": "_size-large_6vp2w_6",
-  item: N,
-  content: h,
-  iconOnly: I,
-  icon: R,
-  label: x,
-  decorator: y,
-  active: z
+import { jsx as r, jsxs as N } from "react/jsx-runtime";
+import f, { createElement as u } from "react";
+import { Dot as j } from "../Dot/Dot.js";
+import { clsx as v } from "../../utils/clsx.js";
+import '../../assets/Tabular.css';const k = "_reset_hzvjz_1", C = "_root_hzvjz_5", p = "_item_hzvjz_16", x = "_active_hzvjz_37", I = "_hasNotification_hzvjz_64", R = "_content_hzvjz_67", a = {
+  reset: k,
+  root: C,
+  "theme-dark": "_theme-dark_hzvjz_10",
+  "theme-light": "_theme-light_hzvjz_13",
+  item: p,
+  active: x,
+  hasNotification: I,
+  content: R
 };
-function s(l) {
+function m(h) {
   const {
-    items: a,
-    activeItem: i,
-    onActivate: n
-  } = l, e = a.map((t) => /* @__PURE__ */ c(
-    s.Item,
+    items: s,
+    activeItem: o,
+    onActivate: e,
+    itemClassName: i,
+    ...c
+  } = h, n = f.useCallback((t) => {
+    e && e(t);
+  }, [e]);
+  return /* @__PURE__ */ r(m.Root, { ...c, children: s.map((t) => /* @__PURE__ */ u(
+    m.Item,
     {
-      icon: t.icon,
-      label: t.label,
-      active: t.id === i,
-      onClick: () => n(t.id)
-    },
-    t.id
-  ));
-  return /* @__PURE__ */ c(s.Root, { children: e });
+      ...t,
+      className: i,
+      key: t.id,
+      active: t.id === o,
+      onClick: n
+    }
+  )) });
 }
-s.Root = function(a) {
+m.Root = function(s) {
   const {
-    children: i,
-    size: n = "normal",
-    className: e
-  } = a, t = d(o.root, o[`size-${n}`], e);
-  return /* @__PURE__ */ c("div", { className: t, children: i });
+    children: o,
+    className: e,
+    ariaLabel: i,
+    tabIndex: c,
+    theme: n = "dark",
+    role: t = "tablist"
+  } = s, l = v(a.root, a[`theme-${n}`], e);
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      role: t,
+      "aria-label": i,
+      tabIndex: c,
+      className: l,
+      children: o
+    }
+  );
 };
-s.Item = f.forwardRef(function(a, i) {
+m.Item = function(s) {
   const {
-    icon: n,
+    id: o,
     label: e,
-    onClick: t,
-    active: m = !1,
-    disabled: v = !1
-  } = a, p = d(o.item, {
-    [o.active]: m,
-    [o.disabled]: v,
-    [o.iconOnly]: !e
-  }), r = /* @__PURE__ */ _(b, { children: [
-    !!n && /* @__PURE__ */ c("div", { className: o.icon, children: n }),
-    !!e && /* @__PURE__ */ c("div", { className: o.label, children: e })
-  ] });
-  return /* @__PURE__ */ _(u, { ref: i, onClick: t, className: p, children: [
-    r,
-    /* @__PURE__ */ c("div", { className: o.content, children: r }),
-    /* @__PURE__ */ c("div", { className: o.decorator })
-  ] });
-});
+    onClick: i,
+    ariaLabel: c,
+    ariaControls: n,
+    className: t,
+    active: l = !1,
+    disabled: _ = !1,
+    hasNotification: d = !1
+  } = s, b = f.useCallback(() => {
+    _ || i(o);
+  }, [_, i, o]), z = v(a.reset, a.item, t, {
+    [a.active]: l,
+    [a.hasNotification]: d
+  });
+  return /* @__PURE__ */ r(
+    "button",
+    {
+      disabled: _,
+      type: "button",
+      role: "tab",
+      className: z,
+      onClick: b,
+      "aria-label": c,
+      "aria-controls": n,
+      "data-text": e,
+      "aria-selected": l,
+      children: /* @__PURE__ */ N("span", { className: a.content, children: [
+        e,
+        d && /* @__PURE__ */ r(j, { color: "green", className: a.notification })
+      ] })
+    }
+  );
+};
 export {
-  s as Tabular
+  m as Tabular
 };

package/dist/components/Tabular/TabularShowcase.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+
+declare function TabularShowcase(): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof TabularShowcase>;
+export default _default;

package/dist/components/Tabular/TabularShowcase.js

@@ -0,0 +1,47 @@
+import { jsx as t } from "react/jsx-runtime";
+import e from "react";
+import { Tabular as m } from "./Tabular.js";
+const l = [
+  {
+    id: "item1",
+    label: "Item 1"
+  },
+  {
+    id: "item2",
+    label: "Item 2"
+  },
+  {
+    id: "item3",
+    label: "Item 3",
+    hasNotification: !0
+  },
+  {
+    id: "item4",
+    label: "Item 4",
+    hasNotification: !0
+  },
+  {
+    id: "item5",
+    label: "Item 5"
+  },
+  {
+    id: "item6",
+    label: "Item 6",
+    disabled: !0
+  }
+];
+function o() {
+  const [i, a] = e.useState("item1");
+  return /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(
+    m,
+    {
+      items: l,
+      activeItem: i,
+      onActivate: a
+    }
+  ) });
+}
+const d = e.memo(o);
+export {
+  d as default
+};

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

@@ -0,0 +1,2 @@
+export { Tabular } from './Tabular';
+export type { TabularProps, TabularItem, TabularRootProps, } from './Tabular';

package/dist/components/Tabular/index.js

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

package/dist/components/Text/BodyShowcase.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+
+declare function BodyShowcase(): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof BodyShowcase>;
+export default _default;

package/dist/components/Text/BodyShowcase.js

@@ -0,0 +1,133 @@
+import { jsx as e } from "react/jsx-runtime";
+import t from "react";
+import i from "./TextShowcase.js";
+const a = [
+  {
+    textProps: {
+      size: "normal",
+      as: "p"
+    },
+    title: "paragraph",
+    descriptions: [
+      "Helvetica Now Text Regular",
+      "20px",
+      "150% Line Height",
+      "-2.5% Letter Spacing"
+    ]
+  },
+  {
+    textProps: {
+      size: "normal",
+      weight: "bold",
+      as: "p"
+    },
+    title: "paragraph-bold",
+    descriptions: [
+      "Helvetica Now Text Bold",
+      "20px",
+      "150% Line Height",
+      "-2.5% Letter Spacing"
+    ]
+  },
+  {
+    textProps: {
+      size: "normal",
+      weight: "bold",
+      underlined: !0,
+      as: "p"
+    },
+    title: "paragraph-hyperlink",
+    descriptions: [
+      "Helvetica Now Text Bold",
+      "20px Underlined",
+      "150% Line Height",
+      "-2.5% Letter Spacing"
+    ]
+  },
+  {
+    textProps: {
+      size: "xsmall"
+    },
+    title: "caption",
+    descriptions: [
+      "Helvetica Now Text Regular",
+      "18px",
+      "150% Line Height",
+      "-2.5% Letter Spacing"
+    ]
+  },
+  {
+    textProps: {
+      size: "xsmall",
+      weight: "bold"
+    },
+    title: "caption-bold",
+    descriptions: [
+      "Helvetica Now Text Bold",
+      "18px",
+      "150% Line Height",
+      "-2.5% Letter Spacing"
+    ]
+  },
+  {
+    textProps: {
+      size: "xxsmall"
+    },
+    title: "metadata",
+    descriptions: [
+      "Helvetica Now Text Regular",
+      "15px",
+      "150% Line Height",
+      "-2.5% Letter Spacing"
+    ]
+  },
+  {
+    textProps: {
+      size: "xxsmall",
+      weight: "bold"
+    },
+    title: "metadata-bold",
+    descriptions: [
+      "Helvetica Now Text Bold",
+      "15px",
+      "150% Line Height",
+      "-2.5% Letter Spacing"
+    ]
+  },
+  {
+    textProps: {
+      size: "xxsmall",
+      uppercase: !0,
+      letterSpacing: "large"
+    },
+    title: "All Caps",
+    descriptions: [
+      "Helvetica Now Text Regular",
+      "15px",
+      "150% Line Height",
+      "-2.5% Letter Spacing"
+    ]
+  },
+  {
+    textProps: {
+      size: "xxsmall",
+      weight: "bold",
+      uppercase: !0,
+      letterSpacing: "large"
+    },
+    title: "All Caps-Bold",
+    descriptions: [
+      "Helvetica Now Text Bold",
+      "15px",
+      "150% Line Height",
+      "-2.5% Letter Spacing"
+    ]
+  }
+];
+function l() {
+  return /* @__PURE__ */ e(i, { items: a });
+}
+const s = t.memo(l);
+export {
+  s as default
+};

package/dist/components/Text/HeadingShowcase.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+
+declare function HeadingShowcase(): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof HeadingShowcase>;
+export default _default;

package/dist/components/Text/HeadingShowcase.js

@@ -0,0 +1,101 @@
+import { jsx as e } from "react/jsx-runtime";
+import i from "react";
+import t from "./TextShowcase.js";
+const a = [
+  {
+    textProps: {
+      size: "xxxlarge",
+      weight: "bold",
+      as: "h1",
+      family: "secondary"
+    },
+    title: "01",
+    descriptions: [
+      "Helvetica Now Display Bold",
+      "70px",
+      "115% Line Height",
+      "-2.5% Letter Spacing"
+    ]
+  },
+  {
+    textProps: {
+      size: "xxlarge",
+      weight: "bold",
+      as: "h2",
+      family: "secondary"
+    },
+    title: "02",
+    descriptions: [
+      "Helvetica Now Display Bold",
+      "50px",
+      "135% Line Height",
+      "-2.5% Letter Spacing"
+    ]
+  },
+  {
+    textProps: {
+      size: "xlarge",
+      weight: "bold",
+      as: "h3",
+      family: "secondary"
+    },
+    title: "03",
+    descriptions: [
+      "Helvetica Now Display Bold",
+      "40px",
+      "130% Line Height",
+      "-2.5% Letter Spacing"
+    ]
+  },
+  {
+    textProps: {
+      size: "large",
+      weight: "bold",
+      as: "h4",
+      family: "secondary"
+    },
+    title: "04",
+    descriptions: [
+      "Helvetica Now Display Bold",
+      "30px",
+      "130% Line Height",
+      "-2.5% Letter Spacing"
+    ]
+  },
+  {
+    textProps: {
+      size: "medium",
+      weight: "bold",
+      as: "h5",
+      family: "secondary"
+    },
+    title: "05",
+    descriptions: [
+      "Helvetica Now Display Bold",
+      "25px",
+      "130% Line Height",
+      "-2.5% Letter Spacing"
+    ]
+  },
+  {
+    textProps: {
+      size: "medium",
+      as: "h6",
+      family: "secondary"
+    },
+    title: "06",
+    descriptions: [
+      "Helvetica Now Display Regular",
+      "25px",
+      "130% Line Height",
+      "-2.5% Letter Spacing"
+    ]
+  }
+];
+function s() {
+  return /* @__PURE__ */ e(t, { items: a });
+}
+const p = i.memo(s);
+export {
+  p as default
+};

package/dist/components/Text/Text.d.ts

@@ -2,7 +2,9 @@ import { default as React } from 'react';
 import { TextOpacity, TextProps } from './Text.types';
 
 export declare const TEXT_OPACITY_MAP: Record<TextOpacity, number | string>;
-export declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLDivElement | HTMLSpanElement>>;
-export declare const TextBlock: React.ForwardRefExoticComponent<(TextProps & {
+export declare const getTextOpacity: (opacity?: TextOpacity, otherwise?: string | number) => string | number;
+export declare const DEFAULT_TEXT_COLOR = "primary";
+export declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLElement>>;
+export declare const TextBlock: React.ForwardRefExoticComponent<TextProps & {
     asDiv?: undefined;
-}) & React.RefAttributes<HTMLDivElement>>;
+} & React.RefAttributes<HTMLElement>>;

package/dist/components/Text/Text.js

@@ -1,61 +1,73 @@
-import { jsx as f } from "react/jsx-runtime";
-import p from "react";
-import { ui as g } from "../ui.js";
-import { clsx as h } from "../../utils/clsx.js";
-import '../../assets/Text.css';const $ = "_root_lfxjz_1", k = "_centered_lfxjz_1", z = "_truncated_lfxjz_4", b = "_typographic_lfxjz_12", j = "_block_lfxjz_23", r = {
-  root: $,
-  centered: k,
-  truncated: z,
-  typographic: b,
-  block: j
-}, i = {
+import { jsx as s } from "react/jsx-runtime";
+import l from "react";
+import { ui as C } from "../ui.js";
+import { clsx as w } from "../../utils/clsx.js";
+import { getColor as A } from "../../utils/color.js";
+import '../../assets/Text.css';const O = "_root_e9tvt_1", R = "_centered_e9tvt_1", S = "_underlined_e9tvt_4", $ = "_truncated_e9tvt_7", E = "_typographic_e9tvt_15", N = "_block_e9tvt_26", o = {
+  root: O,
+  centered: R,
+  underlined: S,
+  truncated: $,
+  typographic: E,
+  block: N
+}, z = {
   0: 0,
   25: "var(--text-opacity-25)",
   50: "var(--text-opacity-50)",
   75: "var(--text-opacity-75)",
   100: 1
-};
-function C(o) {
-  if ("colorToken" in o)
-    return `var(--color-${o.colorToken})`;
-  const {
-    color: t = "main",
-    opacity: e = 1
-  } = o, c = t === "main" ? "950" : "pure", a = c === "pure" ? `--color-${t}` : `--color-${t}-${c}`, n = i[e] || i[100];
-  return `rgba(var(${a}), ${n})`;
-}
-const w = p.forwardRef(function(t, e) {
+}, B = {
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  h5: "h5",
+  h6: "h6"
+}, P = (r, t = 1) => {
+  const e = typeof r == "string" && z[r];
+  return typeof e == "string" || typeof e == "number" ? e : t;
+}, D = "primary", F = l.forwardRef(function(t, e) {
   const {
-    family: c = "primary",
+    family: c,
     size: a = "normal",
-    weight: n = "normal",
-    asDiv: l = !1,
-    centered: m = !1,
-    truncated: u = !1,
+    weight: f = "normal",
+    letterSpacing: p = "normal",
+    as: n = "span",
+    centered: d = !1,
+    truncated: m = !1,
     typographic: _ = !1,
-    uppercase: x = !1,
-    userSelectable: d = !1,
-    children: y,
+    uppercase: h = !1,
+    userSelectable: u = !1,
+    underlined: y = !1,
+    children: g,
     className: v
-  } = t, T = h(r.root, v, {
-    [r.block]: l,
-    [r.centered]: m,
-    [r.truncated]: u,
-    [r.typographic]: _,
-    [g.cls.userSelectableText]: d
-  }), s = {
-    color: C(t),
-    fontFamily: `var(--font-family-${c})`,
+  } = t, x = n === "div", T = w(o.root, v, {
+    [o.block]: x,
+    [o.centered]: d,
+    [o.truncated]: m,
+    [o.underlined]: y,
+    [o.typographic]: _,
+    [C.cls.userSelectableText]: u
+  }), b = A({
+    ...t,
+    color: t.color || D,
+    opacity: P(t.opacity)
+  }), k = typeof c == "string" ? c : B[n] || "primary", i = {
+    color: b,
+    fontFamily: `var(--font-family-${k})`,
     fontSize: `var(--font-size-${a})`,
-    fontWeight: `var(--font-weight-${n})`
+    lineHeight: `var(--line-height-${a})`,
+    letterSpacing: `var(--letter-spacing-${p})`,
+    fontWeight: `var(--font-weight-${f})`
   };
-  return x && (s.textTransform = "uppercase"), // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  /* @__PURE__ */ f(l ? "div" : "span", { ref: e, dir: "auto", className: T, style: s, children: y });
-}), D = p.forwardRef(function(t, e) {
-  return /* @__PURE__ */ f(w, { ref: e, ...t, asDiv: !0 });
+  return h && (i.textTransform = "uppercase"), /* @__PURE__ */ s(n, { ref: e, dir: "auto", className: T, style: i, children: g });
+}), G = l.forwardRef(function(t, e) {
+  return /* @__PURE__ */ s(F, { ref: e, ...t, as: "div" });
 });
 export {
-  i as TEXT_OPACITY_MAP,
-  w as Text,
-  D as TextBlock
+  D as DEFAULT_TEXT_COLOR,
+  z as TEXT_OPACITY_MAP,
+  F as Text,
+  G as TextBlock,
+  P as getTextOpacity
 };