@cfx-dev/ui-components 3.0.2 → 3.0.3

package/dist/components/ToggleGroup/ToggleGroup.js

@@ -1,46 +1,46 @@
-import { jsxs as d, jsx as p } from "react/jsx-runtime";
+import { jsxs as a, jsx as u } from "react/jsx-runtime";
 import l from "react";
-import { Interactive as D } from "../Interactive/Interactive.js";
-import { clsx as _ } from "../../utils/clsx.js";
-const j = "_root_1500i_1", k = "_disabled_1500i_6", E = "_descripted_1500i_10", L = "_multiline_1500i_13", O = "_options_1500i_17", S = "_option_1500i_17", w = "_description_1500i_24", G = "_active_1500i_69", e = {
-  root: j,
-  disabled: k,
-  descripted: E,
-  multiline: L,
-  options: O,
-  option: S,
-  description: w,
-  active: G
-}, m = (a, s) => {
-  var o;
-  return ((o = s.find((i) => i.value === a)) == null ? void 0 : o.description) || "";
+import { Interactive as C } from "../Interactive/Interactive.js";
+import { clsx as d } from "../../utils/clsx.js";
+const M = "cfxui__ToggleGroup__root__fb460", D = "cfxui__ToggleGroup__disabled__75462", j = "cfxui__ToggleGroup__descripted__8e168", k = "cfxui__ToggleGroup__multiline__6b784", E = "cfxui__ToggleGroup__options__7bc0c", L = "cfxui__ToggleGroup__option__8436c", O = "cfxui__ToggleGroup__description__9429c", S = "cfxui__ToggleGroup__active__84da0", o = {
+  root: M,
+  disabled: D,
+  descripted: j,
+  multiline: k,
+  options: E,
+  option: L,
+  description: O,
+  active: S
+}, p = (_, s) => {
+  var e;
+  return ((e = s.find((i) => i.value === _)) == null ? void 0 : e.description) || "";
 }, y = l.memo(function(s) {
   const {
-    value: o,
+    value: e,
     options: i,
     onChange: r,
-    className: u = "",
-    disabled: v = !1,
+    className: m = "",
+    disabled: g = !1,
     multiline: f = !1
-  } = s, [n, c] = l.useState(m(o, i)), h = l.useMemo(
+  } = s, [c, n] = l.useState(p(e, i)), v = l.useMemo(
     () => i.map((t, b) => {
-      const C = () => {
+      const h = () => {
         r(t.value);
-      }, M = () => {
-        c(t.description || "");
-      }, g = () => {
-        c(m(o, i));
-      }, x = _(e.option, {
-        [e.active]: t.value === o
+      }, G = () => {
+        n(t.description || "");
+      }, T = () => {
+        n(p(e, i));
+      }, N = d(o.option, {
+        [o.active]: t.value === e
       });
-      return /* @__PURE__ */ d(
-        D,
+      return /* @__PURE__ */ a(
+        C,
         {
-          className: x,
+          className: N,
           tabIndex: b,
-          onClick: C,
-          onMouseEnter: M,
-          onMouseLeave: g,
+          onClick: h,
+          onMouseEnter: G,
+          onMouseLeave: T,
           children: [
             t.icon || null,
             t.label
@@ -49,15 +49,15 @@ const j = "_root_1500i_1", k = "_disabled_1500i_6", E = "_descripted_1500i_10",
         t.value
       );
     }),
-    [o, i, r, c]
-  ), N = _(e.root, u, {
-    [e.disabled]: v,
-    [e.descripted]: n,
-    [e.multiline]: f
+    [e, i, r, n]
+  ), x = d(o.root, m, {
+    [o.disabled]: g,
+    [o.descripted]: c,
+    [o.multiline]: f
   });
-  return /* @__PURE__ */ d("div", { className: N, children: [
-    /* @__PURE__ */ p("div", { className: e.options, children: h }),
-    n && /* @__PURE__ */ p("div", { className: e.description, children: n })
+  return /* @__PURE__ */ a("div", { className: x, children: [
+    /* @__PURE__ */ u("div", { className: o.options, children: v }),
+    c && /* @__PURE__ */ u("div", { className: o.description, children: c })
   ] });
 });
 export {

package/dist/main.js

@@ -33,7 +33,7 @@ import { Decorate as No } from "./components/Decorate/Decorate.js";
 import { Dot as Ko } from "./components/Dot/Dot.js";
 import { FLYOUT_OUTLET_ID as wo, Flyout as Go } from "./components/Flyout/Flyout.js";
 import { Logos as Ho } from "./components/Logos/index.js";
-import { I as Wo } from "./cfxIcons-BlbKR-zU.js";
+import { I as Wo } from "./cfxIcons-BNd1WgpX.js";
 import { I as qo } from "./cfxIconsBig-BLJjMT-Y.js";
 import { Icon as Qo } from "./components/Icon/Icon.js";
 import { IconBig as Zo } from "./components/IconBig/IconBig.js";
@@ -49,7 +49,7 @@ import { Flex as Ir } from "./components/Layout/Flex/Flex.js";
 import { FlexRestricter as Lr } from "./components/Layout/Flex/FlexRestricter.js";
 import { Pad as Br } from "./components/Layout/Pad/Pad.js";
 import { Page as kr } from "./components/Layout/Page/Page.js";
-import { R as yr } from "./Rail-XT5PwAlx.js";
+import { R as yr } from "./Rail-DcVowhML.js";
 import { Scrollable as br } from "./components/Layout/Scrollable/Scrollable.js";
 import { VirtualScrollable as Or } from "./components/Layout/Scrollable/VirtualScrollable.js";
 import { Loaf as Er } from "./components/Loaf/Loaf.js";

package/dist/styles-scss/_ui.scss

@@ -357,3 +357,25 @@ $mediaMap: (
     @media (min-width: $fix) { @content; }
   }
 }
+
+$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,
+);
+
+$control-heights: (
+  'xxsmall': q(1.5),
+  'xsmall': q(3),
+  'small': q(4),
+  'normal': q(6),
+  'large': q(7),
+  'xlarge': q(10),
+);

package/dist/styles-scss/global.scss

@@ -42,6 +42,7 @@ a {
   color: ui.color-token('anchor-color');
   cursor: pointer;
   text-decoration: underline;
+  border-radius: ui.border-radius('xxsmall');
 
   @include ui.animated();
 
@@ -51,6 +52,10 @@ a {
     &:hover {
       text-decoration-color: ui.color-token('anchor-decoration-color-hover');
     }
+
+    &:focus-visible:not(:active):not(:hover) {
+      box-shadow: 0 0 0 ui.use('anchor-outline-size') ui.color-token('anchor-focus-outline');
+    }
   }
 
   &[aria-disabled="true"] {

package/dist/styles-scss/tokens.scss

@@ -2,23 +2,10 @@
 @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 {
+  @each $name, $value in ui.$mediaMap {
     @include media-min($name) {
-      @each $mpName, $mpProp in $mpMap {
+      @each $mpName, $mpProp in ui.$mpMap {
         [data-#{$mpName}-#{$name}] {
           #{$mpProp}: var(--#{$mpName}-#{$name});
         }
@@ -32,6 +19,8 @@ $mpMap: (
   @include ui.define-color-token('anchor-decoration-color-hover', ui.color('tertiary', $alpha: .5));
   @include ui.define-color-token('anchor-secondary-color', ui.color('secondary'));
   @include ui.define-color-token('anchor-secondary-decoration-color-hover', ui.color('secondary', $alpha: .5));
+  @include ui.define-color-token('anchor-focus-outline', ui.color('primary', $alpha: .5));
+  @include ui.def('anchor-outline-size', ui.q(.25));
 }
 
 @mixin border-radius-tokens() {
@@ -87,17 +76,8 @@ $mpMap: (
   }
 }
 
-$control-heights: (
-  'xxsmall': ui.q(1.5),
-  'xsmall': ui.q(3),
-  'small': ui.q(4),
-  'normal': ui.q(6),
-  'large': ui.q(7),
-  'xlarge': ui.q(10),
-);
-
 @mixin control-height-tokens() {
-  @each $name, $value in $control-heights {
+  @each $name, $value in ui.$control-heights {
     @include ui.def('control-height-#{$name}', $value);
   }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cfx-dev/ui-components",
   "private": false,
-  "version": "3.0.2",
+  "version": "3.0.3",
   "type": "module",
   "license": "MIT",
   "main": "dist/main.js",
@@ -27,7 +27,6 @@
     "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-switch": "^1.1.0",
-    "@storybook/addons": "^7.6.17",
     "autolinker": "^3.14.3",
     "flag-icons": "^6.1.1",
     "react": "^18.2.0",
@@ -44,6 +43,7 @@
     "@storybook/addon-interactions": "^8.1.5",
     "@storybook/addon-links": "^8.1.5",
     "@storybook/addon-onboarding": "^8.1.5",
+    "@storybook/addons": "^7.6.17",
     "@storybook/blocks": "^8.1.5",
     "@storybook/react": "^8.1.5",
     "@storybook/react-vite": "^8.1.5",

package/dist/Rail-XT5PwAlx.js

@@ -1,81 +0,0 @@
-import { jsx as S } from "react/jsx-runtime";
-import r from "react";
-import { Interactive as C } from "./components/Interactive/Interactive.js";
-import { clsx as v } from "./utils/clsx.js";
-import { clamp01 as b } from "./utils/math.js";
-const P = "_virtual_tl3f9_1", T = "_root_tl3f9_5", R = "_rail_tl3f9_12", M = "_active_tl3f9_12", y = "_scroller_tl3f9_15", z = "_content_tl3f9_26", E = "_thumb_tl3f9_40", a = {
-  virtual: P,
-  root: T,
-  rail: R,
-  active: M,
-  scroller: y,
-  "no-x-scroll": "_no-x-scroll_tl3f9_20",
-  "no-y-scroll": "_no-y-scroll_tl3f9_23",
-  content: z,
-  thumb: E,
-  "axis-x": "_axis-x_tl3f9_51",
-  "axis-y": "_axis-y_tl3f9_60"
-}, L = {
-  pos: 0,
-  ratio: 1,
-  height: 0,
-  offset: 0,
-  dragging: !1,
-  dragStartAtCursor: 0,
-  dragStartAtPos: 0,
-  movementMultiplier: 1
-};
-function Y(h) {
-  const {
-    axis: l,
-    pos: s,
-    size: o,
-    scrollSize: m,
-    rootRef: _,
-    setRootActive: n,
-    minThumbSize: i
-  } = h, [x, d] = r.useState(!1), t = r.useRef({ ...L }), e = r.useMemo(() => l === "x" ? {
-    sizeCSS: "width",
-    offsetCSSTransform: "translateX",
-    scrollToSide: "left",
-    mousePosAxis: "clientX"
-  } : {
-    sizeCSS: "height",
-    offsetCSSTransform: "translateY",
-    scrollToSide: "top",
-    mousePosAxis: "clientY"
-  }, [l]), 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], d(!0), n(!0);
-  }, [e.mousePosAxis, n]), c = r.useCallback((f) => {
-    var g;
-    if (!t.current.dragging)
-      return;
-    const w = f[e.mousePosAxis] - t.current.dragStartAtCursor;
-    (g = _.current) == null || g.scrollTo({
-      [e.scrollToSide]: t.current.dragStartAtPos + w * t.current.movementMultiplier,
-      behavior: "auto"
-    });
-  }, [e.mousePosAxis, e.scrollToSide, _]), u = r.useCallback(() => {
-    t.current.dragging && (t.current.dragging = !1, d(!1), n(!1));
-  }, [n]);
-  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 < i && (t.current.height = i, t.current.offset = s * t.current.ratio * ((o - i) / o)), t.current.movementMultiplier = 1 / t.current.ratio;
-  }, [i, s, m, o]), r.useEffect(() => (window.addEventListener("mousemove", c), window.addEventListener("mouseup", u), () => {
-    window.removeEventListener("mousemove", c), window.removeEventListener("mouseup", u);
-  }), [c, u]), /* @__PURE__ */ S("div", { className: v(a.rail, a[`axis-${l}`]), children: /* @__PURE__ */ S(
-    C,
-    {
-      showPointer: !1,
-      style: p,
-      className: v(a.thumb, { [a.active]: x }),
-      onMouseDown: A
-    }
-  ) });
-}
-export {
-  Y as R,
-  a as s
-};

package/dist/cfxIcons-BlbKR-zU.js

@@ -1,86 +0,0 @@
-import r from "./components/Icons/cfx-icons/Close.js";
-import o from "./components/Icons/cfx-icons/Controller.js";
-import m from "./components/Icons/cfx-icons/Copy.js";
-import t from "./components/Icons/cfx-icons/DownArrow.js";
-import i from "./components/Icons/cfx-icons/DownChevron.js";
-import p from "./components/Icons/cfx-icons/Download.js";
-import f from "./components/Icons/cfx-icons/Expand.js";
-import e from "./components/Icons/cfx-icons/ExternalLink.js";
-import n from "./components/Icons/cfx-icons/Heart.js";
-import l from "./components/Icons/cfx-icons/HeartFilled.js";
-import a from "./components/Icons/cfx-icons/Help.js";
-import s from "./components/Icons/cfx-icons/LeftArrow.js";
-import h from "./components/Icons/cfx-icons/LeftChevron.js";
-import c from "./components/Icons/cfx-icons/Map.js";
-import u from "./components/Icons/cfx-icons/Menu.js";
-import C from "./components/Icons/cfx-icons/Minus.js";
-import d from "./components/Icons/cfx-icons/More.js";
-import w from "./components/Icons/cfx-icons/MoreInfo.js";
-import S from "./components/Icons/cfx-icons/Pencil.js";
-import y from "./components/Icons/cfx-icons/Play.js";
-import M from "./components/Icons/cfx-icons/Plus.js";
-import b from "./components/Icons/cfx-icons/Refresh.js";
-import g from "./components/Icons/cfx-icons/RightArrow.js";
-import v from "./components/Icons/cfx-icons/RightChevron.js";
-import U from "./components/Icons/cfx-icons/Search.js";
-import A from "./components/Icons/cfx-icons/Sort.js";
-import P from "./components/Icons/cfx-icons/Square.js";
-import T from "./components/Icons/cfx-icons/SquareCheck.js";
-import _ from "./components/Icons/cfx-icons/Stop.js";
-import k from "./components/Icons/cfx-icons/Tick.js";
-import x from "./components/Icons/cfx-icons/Transfer.js";
-import D from "./components/Icons/cfx-icons/Trash.js";
-import H from "./components/Icons/cfx-icons/Undo.js";
-import I from "./components/Icons/cfx-icons/UpArrow.js";
-import L from "./components/Icons/cfx-icons/UpChevron.js";
-import O from "./components/Icons/cfx-icons/Upload.js";
-import R from "./components/Icons/cfx-icons/Users.js";
-import j from "./components/Icons/cfx-icons/Visibility.js";
-import q from "./components/Icons/cfx-icons/VisibilityOff.js";
-import E from "./components/Icons/cfx-icons/Warning.js";
-const Pr = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  Close: r,
-  Controller: o,
-  Copy: m,
-  DownArrow: t,
-  DownChevron: i,
-  Download: p,
-  Expand: f,
-  ExternalLink: e,
-  Heart: n,
-  HeartFilled: l,
-  Help: a,
-  LeftArrow: s,
-  LeftChevron: h,
-  Map: c,
-  Menu: u,
-  Minus: C,
-  More: d,
-  MoreInfo: w,
-  Pencil: S,
-  Play: y,
-  Plus: M,
-  Refresh: b,
-  RightArrow: g,
-  RightChevron: v,
-  Search: U,
-  Sort: A,
-  Square: P,
-  SquareCheck: T,
-  Stop: _,
-  Tick: k,
-  Transfer: x,
-  Trash: D,
-  Undo: H,
-  UpArrow: I,
-  UpChevron: L,
-  Upload: O,
-  Users: R,
-  Visibility: j,
-  VisibilityOff: q,
-  Warning: E
-}, Symbol.toStringTag, { value: "Module" }));
-export {
-  Pr as I
-};