@cfx-dev/ui-components 2.1.4 → 2.1.6

package/dist/components/Button/Button.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 import { IconName } from '../Icon';
 
-export type ButtonTheme = 'primary' | 'secondary' | 'on-light' | 'default' | 'quicklink';
+export type ButtonTheme = 'primary' | 'secondary' | 'on-light' | 'default' | 'linked' | 'quicklink';
 export interface ButtonProps<T = HTMLButtonElement> {
     text?: React.ReactNode;
     title?: string;

package/dist/components/Button/Button.js

@@ -1,107 +1,108 @@
 import { jsx as r, jsxs as W, Fragment as g } from "react/jsx-runtime";
 import m from "react";
 import { Icon as B } from "../Icon/Icon.js";
-import { clsx as I } from "../../utils/clsx.js";
-import { noop as q } from "../../utils/functional.js";
-import '../../assets/Button.css';const M = "_root_1qqs9_1", j = "_fullWidth_1qqs9_35", w = "_primary_1qqs9_55", F = "_secondary_1qqs9_76", R = "_quicklink_1qqs9_118", v = "_icon_1qqs9_125", D = "_icononly_1qqs9_150", L = "_decorator_1qqs9_155", o = {
-  root: M,
-  fullWidth: j,
-  primary: w,
+import { clsx as q } from "../../utils/clsx.js";
+import { noop as h } from "../../utils/functional.js";
+import '../../assets/Button.css';const I = "_root_1hwl6_1", M = "_fullWidth_1hwl6_35", j = "_primary_1hwl6_55", F = "_secondary_1hwl6_76", R = "_linked_1hwl6_118", v = "_quicklink_1hwl6_143", D = "_icon_1hwl6_150", L = "_icononly_1hwl6_175", U = "_decorator_1hwl6_180", o = {
+  root: I,
+  fullWidth: M,
+  primary: j,
   secondary: F,
-  "on-light": "_on-light_1qqs9_97",
-  quicklink: R,
-  icon: v,
-  icononly: D,
-  decorator: L
+  "on-light": "_on-light_1hwl6_97",
+  linked: R,
+  quicklink: v,
+  icon: D,
+  icononly: L,
+  decorator: U
 };
-function U(s) {
+function z(c) {
   const {
     text: t = null,
-    icon: e,
+    icon: l,
     decorator: n = null
-  } = s;
+  } = c;
   return /* @__PURE__ */ W(g, { children: [
     t,
-    !!e && /* @__PURE__ */ r(B, { name: e, className: o.icon }),
+    !!l && /* @__PURE__ */ r(B, { name: l, className: o.icon }),
     !!n && /* @__PURE__ */ r("div", { className: o.decorator, children: n })
   ] });
 }
-function z(s) {
+function A(c) {
   const {
     text: t = null,
-    icon: e,
+    icon: l,
     theme: n = "default",
-    disabled: c = !1,
+    disabled: a = !1,
     className: u = "",
     autofocus: d = !1,
-    fullWidth: a = !1,
-    tabIndex: i
-  } = s;
-  return I(o.root, o[n], u, {
-    [o.disabled]: c,
-    [o.icononly]: !!e && (t === null || typeof t > "u"),
+    fullWidth: i = !1,
+    tabIndex: s
+  } = c;
+  return q(o.root, o[n], u, {
+    [o.disabled]: a,
+    [o.icononly]: !!l && (t === null || typeof t > "u"),
     [o.text]: !!t,
-    [o.autofocus]: d || typeof i < "u",
-    [o.fullWidth]: a
+    [o.autofocus]: d || typeof s < "u",
+    [o.fullWidth]: i
   });
 }
-const K = m.forwardRef(function(t, e) {
+const O = m.forwardRef(function(t, l) {
   const {
     text: n = null,
-    icon: c,
+    icon: a,
     title: u = "",
     type: d = "button",
-    className: a = "",
-    theme: i = "default",
-    disabled: l = !1,
-    onClick: h = q,
-    onMouseDown: p = q,
-    onMouseUp: b = q,
+    className: i = "",
+    theme: s = "default",
+    disabled: e = !1,
+    onClick: k = h,
+    onMouseDown: p = h,
+    onMouseUp: w = h,
     autofocus: f = !1,
     tabIndex: _,
     fullWidth: y = !1,
-    ariaLabel: k = ""
-  } = t, x = m.useMemo(() => z({
+    ariaLabel: b = ""
+  } = t, x = m.useMemo(() => A({
     text: n,
-    icon: c,
-    theme: i,
-    disabled: l,
-    className: a,
+    icon: a,
+    theme: s,
+    disabled: e,
+    className: i,
     autofocus: f,
     fullWidth: y,
     tabIndex: _
   }), [
     f,
-    a,
+    i,
     y,
-    l,
-    c,
+    e,
+    a,
     _,
     n,
-    i
+    s
   ]), C = m.useCallback((N) => {
-    l || h(N);
-  }, [l, h]);
+    e || k(N);
+  }, [e, k]);
   return /* @__PURE__ */ r(
     "button",
     {
-      ref: e,
-      disabled: l,
+      ref: l,
+      disabled: e,
       className: x,
       onClick: C,
       onMouseDown: p,
-      onMouseUp: b,
+      onMouseUp: w,
       autoFocus: f,
       tabIndex: _,
       title: u,
       type: d,
-      "aria-label": k,
-      children: /* @__PURE__ */ r(U, { ...t })
+      "aria-label": b,
+      children: /* @__PURE__ */ r(z, { ...t })
     }
   );
 });
 export {
-  K as Button,
-  U as ButtonContent,
-  z as getButtonClassName
+  O as Button,
+  z as ButtonContent,
+  A as getButtonClassName
 };

package/dist/components/Button/ButtonShowcase.js

@@ -1,13 +1,13 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
 import l from "react";
-import { Flex as i } from "../Layout/Flex/Flex.js";
-import { Text as n } from "../Text/Text.js";
+import { Flex as n } from "../Layout/Flex/Flex.js";
+import { Text as i } from "../Text/Text.js";
 import { Button as t } from "./Button.js";
 import { ButtonBar as c } from "./ButtonBar.js";
 function o() {
-  return /* @__PURE__ */ r(i, { gap: "large", vertical: !0, children: [
-    /* @__PURE__ */ r(i, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(n, { children: "Default" }),
+  return /* @__PURE__ */ r(n, { gap: "large", vertical: !0, children: [
+    /* @__PURE__ */ r(n, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(i, { children: "Default" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
         t,
         {
@@ -17,8 +17,8 @@ function o() {
         }
       ) })
     ] }),
-    /* @__PURE__ */ r(i, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(n, { children: "Primary" }),
+    /* @__PURE__ */ r(n, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(i, { children: "Primary" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
         t,
         {
@@ -28,8 +28,8 @@ function o() {
         }
       ) })
     ] }),
-    /* @__PURE__ */ r(i, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(n, { children: "Secondary" }),
+    /* @__PURE__ */ r(n, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(i, { children: "Secondary" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
         t,
         {
@@ -39,8 +39,8 @@ function o() {
         }
       ) })
     ] }),
-    /* @__PURE__ */ r(i, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(n, { children: "On Light" }),
+    /* @__PURE__ */ r(n, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(i, { children: "On Light" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
         t,
         {
@@ -50,8 +50,8 @@ function o() {
         }
       ) })
     ] }),
-    /* @__PURE__ */ r(i, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(n, { children: "Quick Link" }),
+    /* @__PURE__ */ r(n, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(i, { children: "Quick Link" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
         t,
         {
@@ -61,8 +61,8 @@ function o() {
         }
       ) })
     ] }),
-    /* @__PURE__ */ r(i, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(n, { children: "No Icon" }),
+    /* @__PURE__ */ r(n, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(i, { children: "No Icon" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
         t,
         {
@@ -71,8 +71,8 @@ function o() {
         }
       ) })
     ] }),
-    /* @__PURE__ */ r(i, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(n, { children: "Full Width" }),
+    /* @__PURE__ */ r(n, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(i, { children: "Full Width" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
         t,
         {
@@ -83,8 +83,30 @@ function o() {
         }
       ) })
     ] }),
-    /* @__PURE__ */ r(i, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(n, { children: "Button Bar" }),
+    /* @__PURE__ */ r(n, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(i, { children: "Linked" }),
+      /* @__PURE__ */ r(n, { p: 4, style: { backgroundColor: "var(--color-modal-background)" }, children: [
+        /* @__PURE__ */ e(
+          t,
+          {
+            text: "Sign In",
+            theme: "linked",
+            icon: "ExternalLink"
+          }
+        ),
+        /* @__PURE__ */ e(
+          t,
+          {
+            disabled: !0,
+            text: "Copy",
+            theme: "linked",
+            icon: "Copy"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ r(n, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(i, { children: "Button Bar" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ r(c, { children: [
         /* @__PURE__ */ e(t, { text: "Sign In", theme: "primary", icon: "Users" }),
         /* @__PURE__ */ e(t, { text: "Register", theme: "secondary", icon: "Users" }),
@@ -92,8 +114,8 @@ function o() {
         /* @__PURE__ */ e(t, { text: "Create Account", theme: "default", icon: "Users" })
       ] }) })
     ] }),
-    /* @__PURE__ */ r(i, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(n, { children: "Long text" }),
+    /* @__PURE__ */ r(n, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(i, { children: "Long text" }),
       /* @__PURE__ */ e("div", { style: { maxWidth: "300px" }, children: /* @__PURE__ */ e(
         t,
         {

package/dist/components/Layout/Scrollable/Rail.js

@@ -3,7 +3,7 @@ import "react";
 import "../../Interactive/Interactive.js";
 import "../../../utils/clsx.js";
 import "../../../utils/math.js";
-import { R } from "../../../Rail-rtPENZs2.js";
+import { R } from "../../../Rail-nVRissv6.js";
 export {
   R as Rail
 };

package/dist/components/Layout/Scrollable/Scrollable.js

@@ -3,7 +3,7 @@ import r from "react";
 import { useContextualStyle as W } from "../../Style/Style.js";
 import { clsx as b } from "../../../utils/clsx.js";
 import { mergeRefs as k } from "../../../utils/mergeRefs.js";
-import { s as o, R as w } from "../../../Rail-rtPENZs2.js";
+import { s as o, R as w } from "../../../Rail-nVRissv6.js";
 const N = {
   size: 0,
   scrollPos: 0,

package/dist/components/Layout/Scrollable/VirtualScrollable.js

@@ -3,7 +3,7 @@ import N, { createElement as k, PureComponent as re } from "react";
 import { _ as ie, a as ne } from "../../../inheritsLoose-CyjgKRgL.js";
 import { clsx as oe } from "../../../utils/clsx.js";
 import { Scrollable as le } from "./Scrollable.js";
-import { s as se } from "../../../Rail-rtPENZs2.js";
+import { s as se } from "../../../Rail-nVRissv6.js";
 function $(r) {
   if (r === void 0) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
   return r;

package/dist/components/Layout/Scrollable/index.js

@@ -1,4 +1,4 @@
-import { R as o } from "../../../Rail-rtPENZs2.js";
+import { R as o } from "../../../Rail-nVRissv6.js";
 import { Scrollable as e } from "./Scrollable.js";
 import { VirtualScrollable as f } from "./VirtualScrollable.js";
 export {

package/dist/main.js

@@ -46,7 +46,7 @@ import { Flex as lr } from "./components/Layout/Flex/Flex.js";
 import { FlexRestricter as ir } from "./components/Layout/Flex/FlexRestricter.js";
 import { Pad as cr } from "./components/Layout/Pad/Pad.js";
 import { Page as dr } from "./components/Layout/Page/Page.js";
-import { R as Tr } from "./Rail-rtPENZs2.js";
+import { R as Tr } from "./Rail-nVRissv6.js";
 import { Scrollable as Lr } from "./components/Layout/Scrollable/Scrollable.js";
 import { VirtualScrollable as yr } from "./components/Layout/Scrollable/VirtualScrollable.js";
 import { Loaf as Sr } from "./components/Loaf/Loaf.js";

package/dist/styles-scss/_ui.scss

@@ -1,5 +1,6 @@
 @use "sass:math";
 @use "sass:map";
+@use "sass:meta";
 @use "colors";
 
 @mixin def($var, $value) {
@@ -197,10 +198,24 @@ $cfxui-color-alpha: (
 }
 
 @mixin animated($props: 'all', $subClass: '&') {
-  #{$subClass} {
-    transition: #{$props} .25s ease,
-      outline-offset 0s,
-      outline 0s;
+  @if type-of($props) == 'list' {
+    $transition: ();
+    @each $property in $props {
+      $transition: append(
+          $transition, ($property .25s ease), $separator: comma
+      );
+    }
+    #{$subClass} {
+      transition: $transition,
+        outline-offset 0s,
+        outline 0s;
+    }
+  } @else {
+    #{$subClass} {
+      transition: #{$props} .25s ease,
+        outline-offset 0s,
+        outline 0s;
+    }
   }
 }
 

package/dist/styles-scss/tokens.scss

@@ -254,6 +254,19 @@ $control-heights: (
   @include ui.define-color-token('button-onlight-disabled-border', ui.color('bg-dark', $alpha: .4));
   @include ui.define-color-token('button-onlight-disabled-background', transparent);
 
+  @include ui.define-color-token('button-linked-text', ui.color('tertiary'));
+  @include ui.define-color-token('button-linked-border', transparent);
+  @include ui.define-color-token('button-linked-background', transparent);
+  @include ui.define-color-token('button-linked-hover-text', ui.color('red'));
+  @include ui.define-color-token('button-linked-hover-border', transparent);
+  @include ui.define-color-token('button-linked-hover-background', #24293B);
+  @include ui.define-color-token('button-linked-active-text', ui.color('red'));
+  @include ui.define-color-token('button-linked-active-border', transparent);
+  @include ui.define-color-token('button-linked-active-background', #24293B);
+  @include ui.define-color-token('button-linked-disabled-text', ui.color('primary', $alpha: .4));
+  @include ui.define-color-token('button-linked-disabled-border', transparent);
+  @include ui.define-color-token('button-linked-disabled-background', transparent);
+
   @include ui.define-color-token('button-quicklink-text', ui.color('primary'));
   @include ui.define-color-token('button-quicklink-border', transparent);
   @include ui.define-color-token('button-quicklink-background', ui.color('bg-light'));

package/package.json

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

package/dist/Rail-rtPENZs2.js

@@ -1,81 +0,0 @@
-import { jsx as g } from "react/jsx-runtime";
-import r from "react";
-import { Interactive as C } from "./components/Interactive/Interactive.js";
-import { clsx as S } from "./utils/clsx.js";
-import { clamp01 as b } from "./utils/math.js";
-import './assets/Rail.css';const q = "_virtual_1ixqf_1", P = "_root_1ixqf_5", T = "_rail_1ixqf_12", R = "_active_1ixqf_12", M = "_scroller_1ixqf_15", y = "_content_1ixqf_25", z = "_thumb_1ixqf_39", a = {
-  virtual: q,
-  root: P,
-  rail: T,
-  active: R,
-  scroller: M,
-  "no-x-scroll": "_no-x-scroll_1ixqf_19",
-  "no-y-scroll": "_no-y-scroll_1ixqf_22",
-  content: y,
-  thumb: z,
-  "axis-x": "_axis-x_1ixqf_50",
-  "axis-y": "_axis-y_1ixqf_59"
-}, E = {
-  pos: 0,
-  ratio: 1,
-  height: 0,
-  offset: 0,
-  dragging: !1,
-  dragStartAtCursor: 0,
-  dragStartAtPos: 0,
-  movementMultiplier: 1
-};
-function X(v) {
-  const {
-    axis: c,
-    pos: s,
-    size: o,
-    scrollSize: m,
-    rootRef: _,
-    setRootActive: i,
-    minThumbSize: n
-  } = v, [h, x] = r.useState(!1), t = r.useRef({ ...E }), e = r.useMemo(() => c === "x" ? {
-    sizeCSS: "width",
-    offsetCSSTransform: "translateX",
-    scrollToSide: "left",
-    mousePosAxis: "clientX"
-  } : {
-    sizeCSS: "height",
-    offsetCSSTransform: "translateY",
-    scrollToSide: "top",
-    mousePosAxis: "clientY"
-  }, [c]), p = {
-    [e.sizeCSS]: `${t.current.height}px`,
-    transform: `${e.offsetCSSTransform}(${t.current.offset}px)`
-  }, A = r.useCallback((f) => {
-    t.current.dragging = !0, t.current.dragStartAtPos = t.current.pos, t.current.dragStartAtCursor = f[e.mousePosAxis], x(!0), i(!0);
-  }, [e.mousePosAxis, i]), u = r.useCallback((f) => {
-    var d;
-    if (!t.current.dragging)
-      return;
-    const w = f[e.mousePosAxis] - t.current.dragStartAtCursor;
-    (d = _.current) == null || d.scrollTo({
-      [e.scrollToSide]: t.current.dragStartAtPos + w * t.current.movementMultiplier,
-      behavior: "auto"
-    });
-  }, [e.mousePosAxis, e.scrollToSide, _]), l = r.useCallback(() => {
-    t.current.dragging && (t.current.dragging = !1, x(!1), i(!1));
-  }, [i]);
-  return r.useEffect(() => {
-    t.current.pos = s, t.current.ratio = b(o / m), t.current.height = o * t.current.ratio, t.current.offset = s * t.current.ratio, t.current.height < n && (t.current.height = n, t.current.offset = s * t.current.ratio * ((o - n) / o)), t.current.movementMultiplier = 1 / t.current.ratio;
-  }, [n, s, m, o]), r.useEffect(() => (window.addEventListener("mousemove", u), window.addEventListener("mouseup", l), () => {
-    window.removeEventListener("mousemove", u), window.removeEventListener("mouseup", l);
-  }), [u, l]), /* @__PURE__ */ g("div", { className: S(a.rail, a[`axis-${c}`]), children: /* @__PURE__ */ g(
-    C,
-    {
-      showPointer: !1,
-      style: p,
-      className: S(a.thumb, { [a.active]: h }),
-      onMouseDown: A
-    }
-  ) });
-}
-export {
-  X as R,
-  a as s
-};