@cfx-dev/ui-components 2.1.3 → 2.1.5

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', ui.color('bg-dark'));
+  @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', ui.color('bg-dark'));
+  @include ui.define-color-token('button-linked-disabled-text', ui.color('tertiary', $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.3",
+  "version": "2.1.5",
   "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
-};