@cfx-dev/ui-components 4.5.22 → 5.0.2

package/dist/main.js

@@ -6,45 +6,44 @@ import { useInstance as l } from "./utils/hooks/useInstance.js";
 import { useDynamicRef as s } from "./utils/hooks/useDynamicRef.js";
 import { useGlobalKeyboardEvent as d } from "./utils/hooks/useGlobalKeyboardEvent.js";
 import { useKeyboardClose as T } from "./utils/hooks/useKeyboardClose.js";
-import { useWindowResize as C } from "./utils/hooks/useWindowResize.js";
+import { useWindowResize as E } from "./utils/hooks/useWindowResize.js";
 import { useOutlet as R } from "./utils/hooks/useOutlet.js";
 import { CLIPBOARD_TITLE_APPEARANCE as L, useClipboardComponent as S } from "./utils/hooks/useClipboardComponent.js";
-import { formatDate as y, formatLocaleDate as D, formatShortDate as O } from "./utils/formatDate.js";
+import { formatDate as B, formatLocaleDate as D, formatShortDate as O } from "./utils/formatDate.js";
 import { CURRENCY_MAP as A, FREE_PRICE_TEXT as P, formatCurrency as b } from "./utils/formatCurrency.js";
 import { identity as k, invoke as h, noop as v, returnFalse as M, returnTrue as U } from "./utils/functional.js";
-import { Linkify as w, defaultLinkReplacer as z, defaultLinkReplacerx as V, isExternalUrl as Y, linkify as G, linkifyx as H, matchLinkNodes as K, matchLinks as W } from "./utils/links.js";
+import { Linkify as w, defaultLinkReplacer as z, defaultLinkReplacerx as V, isExternalUrl as Y, linkify as G, linkifyx as H, matchLinkNodes as K, matchLinks as X } from "./utils/links.js";
 import { clamp as Q, clamp01 as j, minmax as J } from "./utils/math.js";
 import { isFalseString as q, isTrueString as $, normalizeSlashes as oo, replaceRange as eo, splitByIndices as ro, unicodeCharAt as to } from "./utils/string.js";
 import { debounce as fo, throttle as mo } from "./utils/execution.js";
 import { getColor as xo } from "./utils/color.js";
 import { ui as lo } from "./utils/ui/ui.js";
-import { BorderRadiusEnum as so, ColorEnum as io, MediaQueryEnum as co, MediaQueryValuesMap as To, OffsetEnum as Io, TextSizeEnum as Co, ZIndexEnum as Eo } from "./utils/ui/ui.types.js";
-import { isInEnum as go } from "./utils/enum.js";
-import { joaat32 as So } from "./utils/joaat32.js";
-import { default as yo } from "./components/IconButton/IconButton.js";
-import { Accordion as Oo, AccordionContent as _o, AccordionHeader as Ao, AccordionItem as Po, AccordionTrigger as bo } from "./components/Accordion/Accordion.js";
-import { default as ko } from "./components/ClipboardButton/ClipboardButton.js";
-import { default as vo } from "./components/Checkbox/Checkbox.js";
-import { default as Uo, ButtonContent as No, getButtonClassName as wo } from "./components/Button/Button.js";
-import { ButtonBar as Vo } from "./components/Button/ButtonBar.js";
-import { LinkButton as Go } from "./components/Button/LinkButton.js";
-import { BurgerMenuButton as Ko } from "./components/BurgerMenu/BurgerMenuButton.js";
-import { BurgerMenu as Xo } from "./components/BurgerMenu/BurgerMenu.js";
-import { default as jo, getLinkClassName as Jo, getLinkStyles as Zo } from "./components/Link/Link.js";
-import { default as $o } from "./components/Link/ButtonLink.js";
-import { Avatar as ee } from "./components/Avatar/Avatar.js";
-import { BACKDROP_OUTLET_ID as te, default as ae } from "./components/BackdropPortal/BackdropPortal.js";
-import { Badge as me } from "./components/Badge/Badge.js";
-import { default as xe } from "./components/ControlBox/ControlBox.js";
-import { default as le } from "./components/CountryFlag/CountryFlag.js";
-import { default as se } from "./components/Decorate/Decorate.js";
-import { Dot as de } from "./components/Dot/Dot.js";
-import { FLYOUT_OUTLET_ID as Te, FLYOUT_ROOT_ID as Ie, FLYOUT_ROOT_SHRINK_CLASSNAME as Ce, Flyout as Ee } from "./components/Flyout/Flyout.js";
-import { Logos as ge } from "./components/Logos/index.js";
-import { I as Se } from "./cfxIcons-B4SQ4Ljd.js";
-import { I as ye } from "./cfxIconsBig-BLJjMT-Y.js";
-import { Icon as Oe } from "./components/Icon/Icon.js";
-import { IconBig as Ae } from "./components/IconBig/IconBig.js";
+import { BorderRadiusEnum as so, ColorEnum as io, MediaQueryEnum as co, MediaQueryValuesMap as To, OffsetEnum as Io, SpacerEnum as Eo, SpacingEnum as Co, TextSizeEnum as Ro, ZIndexEnum as go } from "./utils/ui/ui.types.js";
+import { isInEnum as So } from "./utils/enum.js";
+import { joaat32 as Bo } from "./utils/joaat32.js";
+import { default as Oo } from "./components/IconButton/IconButton.js";
+import { Accordion as Ao, AccordionContent as Po, AccordionHeader as bo, AccordionItem as Fo, AccordionTrigger as ko } from "./components/Accordion/Accordion.js";
+import { default as vo } from "./components/ClipboardButton/ClipboardButton.js";
+import { default as Uo } from "./components/Checkbox/Checkbox.js";
+import { default as wo, ButtonContent as zo, getButtonClassName as Vo } from "./components/Button/Button.js";
+import { ButtonBar as Go } from "./components/Button/ButtonBar.js";
+import { LinkButton as Ko } from "./components/Button/LinkButton.js";
+import { BurgerMenuButton as Wo } from "./components/BurgerMenu/BurgerMenuButton.js";
+import { BurgerMenu as jo } from "./components/BurgerMenu/BurgerMenu.js";
+import { default as Zo, getLinkClassName as qo, getLinkStyles as $o } from "./components/Link/Link.js";
+import { default as ee } from "./components/Link/ButtonLink.js";
+import { Avatar as te } from "./components/Avatar/Avatar.js";
+import { BACKDROP_OUTLET_ID as fe, default as me } from "./components/BackdropPortal/BackdropPortal.js";
+import { Badge as xe } from "./components/Badge/Badge.js";
+import { default as le } from "./components/ControlBox/ControlBox.js";
+import { default as se } from "./components/CountryFlag/CountryFlag.js";
+import { default as de } from "./components/Decorate/Decorate.js";
+import { Dot as Te } from "./components/Dot/Dot.js";
+import { FLYOUT_OUTLET_ID as Ee, FLYOUT_ROOT_ID as Ce, FLYOUT_ROOT_SHRINK_CLASSNAME as Re, Flyout as ge } from "./components/Flyout/Flyout.js";
+import { Logos as Se } from "./components/Logos/index.js";
+import { I as Be } from "./cfxIcons-0xD_EEXT.js";
+import { I as Oe } from "./cfxIconsXLarge-D0vz6Yd_.js";
+import { Icon as Ae } from "./components/Icon/Icon.js";
 import { Indicator as be } from "./components/Indicator/Indicator.js";
 import { default as ke } from "./components/InfoPanel/InfoPanel.js";
 import { default as ve } from "./components/Input/Input.js";
@@ -52,7 +51,7 @@ import { default as Ue } from "./components/Input/RichInput.js";
 import { default as we } from "./components/StyledInput/StyledInput.js";
 import { Interactive as Ve } from "./components/Interactive/Interactive.js";
 import { Island as Ge, IslandCorner as He } from "./components/Island/Island.js";
-import { default as We } from "./components/Box/Box.js";
+import { default as Xe } from "./components/Box/Box.js";
 import { stringPropFormater as Qe } from "./components/RSC/Box/Box.js";
 import { Center as Je } from "./components/Layout/Center/Center.js";
 import { default as qe } from "./components/Flex/Flex.js";
@@ -64,9 +63,9 @@ import { R as ur } from "./Rail-CHFAf3wJ.js";
 import { Scrollable as ir } from "./components/Scrollable/Scrollable.js";
 import { VirtualScrollable as cr } from "./components/Scrollable/VirtualScrollable.js";
 import { Loaf as Ir } from "./components/Loaf/Loaf.js";
-import { Modal as Er } from "./components/Modal/Modal.js";
+import { Modal as Cr } from "./components/Modal/Modal.js";
 import { NavList as gr } from "./components/NavList/NavList.js";
-import { OVERLAY_OUTLET_ID as Sr, Overlay as Br } from "./components/Overlay/Overlay.js";
+import { OVERLAY_OUTLET_ID as Sr, Overlay as yr } from "./components/Overlay/Overlay.js";
 import { default as Dr } from "./components/Pagination/Pagination.js";
 import { Popover as _r } from "./components/Popover/Popover.js";
 import { PremiumBadge as Pr } from "./components/PremiumBadge/PremiumBadge.js";
@@ -77,7 +76,7 @@ import { DropdownSelect as Nr } from "./components/DropdownSelect/DropdownSelect
 import { default as zr } from "./components/DropdownMenu/DropdownMenu.js";
 import { Separator as Yr } from "./components/Separator/Separator.js";
 import { Shroud as Hr } from "./components/Shroud/Shroud.js";
-import { Slider as Wr } from "./components/Slider/Slider.js";
+import { Slider as Xr } from "./components/Slider/Slider.js";
 import { default as Qr } from "./components/Range/Range.js";
 import { default as Jr } from "./components/Range/RangeInput.js";
 import { default as qr } from "./components/Range/RangeWithInputs.js";
@@ -89,7 +88,7 @@ import { Tabular as nt } from "./components/Tabular/Tabular.js";
 import { DataTable as ut, DataTableHeaderItem as st, DataTableRow as it } from "./components/DataTable/DataTable.js";
 import { Table as ct } from "./components/Table/index.js";
 import { default as It } from "./components/TableResponsiveText/TableResponsiveText.js";
-import { DEFAULT_TEXT_COLOR as Et, TEXT_OPACITY_MAP as Rt, Text as gt, TextBlock as Lt, getTextOpacity as St, lineHeightResponsiveValueFormatter as Bt, textSizeResponsiveValueFormatter as yt } from "./components/Text/Text.js";
+import { DEFAULT_TEXT_COLOR as Ct, TEXT_OPACITY_MAP as Rt, Text as gt, TextBlock as Lt, getTextOpacity as St, lineHeightResponsiveValueFormatter as yt, textSizeResponsiveValueFormatter as Bt } from "./components/Text/Text.js";
 import { default as Ot } from "./components/Label/Label.js";
 import { Textarea as At } from "./components/Textarea/Textarea.js";
 import { default as bt } from "./components/StyledTextarea/StyledTextarea.js";
@@ -98,46 +97,46 @@ import { default as Nt } from "./components/InputDropzone/InputDropzone.js";
 import { default as zt } from "./components/InputDropzone/ItemPreview.js";
 import { default as Yt } from "./components/Skeleton/Skeleton.js";
 import { OnScreenSensor as Ht } from "./components/OnScreenSensor.js";
-import { Symbols as Wt } from "./components/Symbols.js";
+import { Symbols as Xt } from "./components/Symbols.js";
 import { default as Qt } from "./components/Table/TableIconButton.js";
 export {
-  Oo as Accordion,
-  _o as AccordionContent,
-  Ao as AccordionHeader,
-  Po as AccordionItem,
-  bo as AccordionTrigger,
-  ee as Avatar,
-  te as BACKDROP_OUTLET_ID,
-  ae as BackdropPortal,
-  me as Badge,
+  Ao as Accordion,
+  Po as AccordionContent,
+  bo as AccordionHeader,
+  Fo as AccordionItem,
+  ko as AccordionTrigger,
+  te as Avatar,
+  fe as BACKDROP_OUTLET_ID,
+  me as BackdropPortal,
+  xe as Badge,
   so as BorderRadiusEnum,
-  We as Box,
-  Xo as BurgerMenu,
-  Ko as BurgerMenuButton,
-  Uo as Button,
-  Vo as ButtonBar,
-  No as ButtonContent,
-  $o as ButtonLink,
+  Xe as Box,
+  jo as BurgerMenu,
+  Wo as BurgerMenuButton,
+  wo as Button,
+  Go as ButtonBar,
+  zo as ButtonContent,
+  ee as ButtonLink,
   L as CLIPBOARD_TITLE_APPEARANCE,
   A as CURRENCY_MAP,
   Je as Center,
-  vo as Checkbox,
-  ko as ClipboardButton,
+  Uo as Checkbox,
+  vo as ClipboardButton,
   io as ColorEnum,
-  xe as ControlBox,
-  le as CountryFlag,
-  Et as DEFAULT_TEXT_COLOR,
+  le as ControlBox,
+  se as CountryFlag,
+  Ct as DEFAULT_TEXT_COLOR,
   ut as DataTable,
   st as DataTableHeaderItem,
   it as DataTableRow,
-  se as Decorate,
-  de as Dot,
+  de as Decorate,
+  Te as Dot,
   zr as DropdownMenu,
   Nr as DropdownSelect,
   zt as DropzoneItemPreview,
-  Te as FLYOUT_OUTLET_ID,
-  Ie as FLYOUT_ROOT_ID,
-  Ce as FLYOUT_ROOT_SHRINK_CLASSNAME,
+  Ee as FLYOUT_OUTLET_ID,
+  Ce as FLYOUT_ROOT_ID,
+  Re as FLYOUT_ROOT_SHRINK_CLASSNAME,
   P as FREE_PRICE_TEXT,
   qe as Flex,
   or as FlexAlignItemsEnum,
@@ -145,12 +144,11 @@ export {
   rr as FlexJustifyContentEnum,
   fr as FlexRestricter,
   tr as FlexWrapEnum,
-  Ee as Flyout,
-  Oe as Icon,
-  Ae as IconBig,
-  yo as IconButton,
-  Se as Icons,
-  ye as IconsBig,
+  ge as Flyout,
+  Ae as Icon,
+  Oo as IconButton,
+  Be as Icons,
+  Oe as IconsXLarge,
   be as Indicator,
   ke as InfoPanel,
   ve as Input,
@@ -159,19 +157,19 @@ export {
   Ge as Island,
   He as IslandCorner,
   Ot as Label,
-  jo as Link,
-  Go as LinkButton,
+  Zo as Link,
+  Ko as LinkButton,
   w as Linkify,
   Ir as Loaf,
-  ge as Logos,
+  Se as Logos,
   co as MediaQueryEnum,
   To as MediaQueryValuesMap,
-  Er as Modal,
+  Cr as Modal,
   gr as NavList,
   Sr as OVERLAY_OUTLET_ID,
   Io as OffsetEnum,
   Ht as OnScreenSensor,
-  Br as Overlay,
+  yr as Overlay,
   pr as Pad,
   nr as Page,
   Dr as Pagination,
@@ -189,13 +187,15 @@ export {
   Yr as Separator,
   Hr as Shroud,
   Yt as Skeleton,
-  Wr as Slider,
+  Xr as Slider,
   ot as Spacer,
+  Eo as SpacerEnum,
+  Co as SpacingEnum,
   rt as Style,
   we as StyledInput,
   bt as StyledTextarea,
   ft as Switch,
-  Wt as Symbols,
+  Xt as Symbols,
   Rt as TEXT_OPACITY_MAP,
   kt as TITLE_OUTLET_ID,
   ct as Table,
@@ -204,12 +204,12 @@ export {
   nt as Tabular,
   gt as Text,
   Lt as TextBlock,
-  Co as TextSizeEnum,
+  Ro as TextSizeEnum,
   At as Textarea,
   ht as Title,
   pt as ToggleGroup,
   cr as VirtualScrollable,
-  Eo as ZIndexEnum,
+  go as ZIndexEnum,
   Q as clamp,
   j as clamp01,
   a as clsx,
@@ -217,27 +217,27 @@ export {
   z as defaultLinkReplacer,
   V as defaultLinkReplacerx,
   b as formatCurrency,
-  y as formatDate,
+  B as formatDate,
   D as formatLocaleDate,
   O as formatShortDate,
-  wo as getButtonClassName,
+  Vo as getButtonClassName,
   xo as getColor,
-  Jo as getLinkClassName,
-  Zo as getLinkStyles,
+  qo as getLinkClassName,
+  $o as getLinkStyles,
   St as getTextOpacity,
   m as getValue,
   k as identity,
   h as invoke,
   Y as isExternalUrl,
   q as isFalseString,
-  go as isInEnum,
+  So as isInEnum,
   $ as isTrueString,
-  So as joaat32,
-  Bt as lineHeightResponsiveValueFormatter,
+  Bo as joaat32,
+  yt as lineHeightResponsiveValueFormatter,
   G as linkify,
   H as linkifyx,
   K as matchLinkNodes,
-  W as matchLinks,
+  X as matchLinks,
   r as mergeRefs,
   J as minmax,
   v as noop,
@@ -247,7 +247,7 @@ export {
   U as returnTrue,
   ro as splitByIndices,
   Qe as stringPropFormater,
-  yt as textSizeResponsiveValueFormatter,
+  Bt as textSizeResponsiveValueFormatter,
   mo as throttle,
   vt as titleGetCoords,
   Mt as titleGetCssStyle,
@@ -261,5 +261,5 @@ export {
   T as useKeyboardClose,
   R as useOutlet,
   x as usePopoverController,
-  C as useWindowResize
+  E as useWindowResize
 };

package/dist/styles-scss/_ui.scss

@@ -51,19 +51,19 @@ $controlHeightsMap: (
   @return var(--control-height-#{$size});
 }
 
-@function font-size($size: 'normal') {
+@function font-size($size: 'small') {
   @return var(--font-size-#{$size});
 }
 
-@mixin font-size($size: 'normal') {
+@mixin font-size($size: 'small') {
   font-size: var(--font-size-#{$size});
 }
 
-@function font-weight($weight: 'normal') {
+@function font-weight($weight: 'small') {
   @return var(--font-weight-#{$weight});
 }
 
-@mixin font-weight($weight: 'normal') {
+@mixin font-weight($weight: 'small') {
   font-weight: var(--font-weight-#{$weight});
 }
 
@@ -75,32 +75,33 @@ $controlHeightsMap: (
   color: color-token($colorToken);
 }
 
-@mixin letter-spacing($size: 'normal') {
+@mixin letter-spacing($size: 'small') {
   letter-spacing: var(--letter-spacing-#{$size});
 }
 
-@function letter-spacing($size: 'normal') {
+@function letter-spacing($size: 'small') {
   @return var(--letter-spacing-#{$size});
 }
 
-@mixin line-height($size: 'normal') {
+@mixin line-height($size: 'small') {
   line-height: var(--line-height-#{$size});
 }
 
 $borderRadiusMap: (
   'none': 0px,
-  'xxsmall': q(0.25),
-  'xsmall': q(0.5),
-  'small': q(0.75),
-  'normal': q(1.5),
+  'xsmall': q(0.25),
+  'small': q(0.5),
+  'medium': q(0.75),
+  'large': q(1),
+  'xlarge': q(1.25),
   'pill': 9999px,
 );
 
-@function border-radius($size: 'normal') {
+@function border-radius($size: 'small') {
   @return var(--border-radius-#{$size});
 }
 
-@mixin border-radius($size: 'normal') {
+@mixin border-radius($size: 'small') {
   border-radius: var(--border-radius-#{$size});
 }
 
@@ -126,9 +127,10 @@ $cfxuiColorAlpha: (
   '10': 0.1,
 );
 
-@mixin define-font-size($name, $size, $line-height: 1.3) {
+@mixin define-font-size($name, $size, $line-height: 1.3, $paragraph-spacing: 0) {
   @include def('font-size-#{$name}', $size);
   @include def('line-height-#{$name}', $line-height);
+  @include def('paragraph-spacing-#{$name}', $paragraph-spacing);
 }
 
 @mixin define-color($name, $color, $bg, $fg) {
@@ -295,6 +297,84 @@ $offsets: (
   }
 }
 
+$globalScaleMap: (
+  0: q(0),
+  10: q(0.125),
+  15: q(0.25),
+  33: q(0.375),
+  45: q(0.5),
+  50: q(0.625),
+  60: q(0.75),
+  100: q(1),
+  110: q(1.25),
+  120: q(1.5),
+  140: q(1.75),
+  150: q(1.875),
+  160: q(2),
+  180: q(2.25),
+  200: q(2.5),
+  240: q(3),
+  250: q(3.125),
+  300: q(3.75),
+  350: q(4),
+  400: q(5),
+  450: q(6),
+  500: q(6.25),
+  550: q(7),
+  600: q(7.5),
+  700: q(9),
+  800: q(10),
+  900: q(11.25),
+  1000: q(12.5),
+  1100: q(13.75),
+  1200: q(15),
+  1400: q(17.5),
+  1500: q(18.75),
+  1600: q(20),
+  1800: q(22.5),
+  2000: q(25),
+  2400: q(30),
+  3000: q(37.5),
+  3300: q(41.25),
+);
+
+@function gs($scale) {
+  @return map.get($globalScaleMap, $scale);
+}
+
+$spacingMap: (
+  25: gs(45),
+  100: gs(100),
+  110: gs(110),
+  150: gs(120),
+  175: gs(160),
+  200: gs(200),
+  250: gs(240),
+  300: gs(300),
+  400: gs(400),
+  450: gs(450),
+  600: gs(600),
+  700: gs(700),
+  800: gs(800),
+  900: gs(900),
+  1000: gs(1000),
+  1200: gs(1200),
+  1600: gs(1600),
+  2400: gs(2400),
+);
+
+@function spacing($num) {
+  @return map.get($spacingMap, $num);
+}
+
+@function spacer($name) {
+  @return var(--spacer-#{$name});
+}
+
+@function control-size($name) {
+  @return var(--control-size-#{$name});
+}
+
 @mixin webkit-scrollbar() {
   ::-webkit-scrollbar {
     width: use('scrollable-thumb-size');

package/dist/styles-scss/global.scss

@@ -5,16 +5,16 @@ body {
   // Set default font styles
   @include ui.font-color('text');
   @include ui.font-family('primary');
-  @include ui.font-weight('normal');
-  @include ui.line-height('normal');
-  @include ui.letter-spacing('normal');
+  @include ui.font-weight('regular');
+  @include ui.line-height('small');
+  @include ui.letter-spacing('small');
 
   // initiat tokens
+  @include tokens.text-tokens;
   @include tokens.shadow-tokens;
   @include tokens.flyout-tokens;
   @include tokens.color-tokens;
   @include tokens.offset-tokens;
-  @include tokens.control-tokens;
   @include tokens.border-radius-tokens;
   @include tokens.switch-tokens;
   @include tokens.input-dropzone-tokens;
@@ -34,13 +34,18 @@ body {
   @include tokens.anchor-tokens;
   @include tokens.separator-tokens;
   @include tokens.zindex-tokens;
-  @include tokens.text-tokens;
+
+  // !!!conflict
+  @include tokens.spacer-tokens;
+  @include tokens.text-responsive-tokens;
+  @include tokens.control-tokens;
 
   // initiat fonts
   @include typography.font-HelveticaNow;
 
   // responsive
   @include tokens.mp-tokens;
+  @include tokens.paragraph-spacing-tokens;
   @include tokens.responsive-tokens('display');
   @include tokens.responsive-tokens('width');
   @include tokens.responsive-tokens('height');
@@ -52,6 +57,7 @@ body {
   @include tokens.responsive-tokens('flex');
   @include tokens.responsive-tokens('font-size');
   @include tokens.responsive-tokens('line-height');
+  @include tokens.responsive-tokens('stroke-width');
 }
 
 a {
@@ -59,7 +65,7 @@ a {
   color: ui.color('tertiary');
   cursor: pointer;
   text-decoration: underline;
-  border-radius: ui.border-radius('xxsmall');
+  border-radius: ui.border-radius('xsmall');
 
   @include ui.animated;
 
@@ -121,15 +127,15 @@ h4 {
 }
 
 h5 {
-  @include ui.font-size('medium');
-  @include ui.line-height('medium');
+  @include ui.font-size('small');
+  @include ui.line-height('small');
   @include ui.font-weight('bold');
 }
 
 h6 {
-  @include ui.font-size('medium');
-  @include ui.line-height('medium');
-  @include ui.font-weight('normal');
+  @include ui.font-size('small');
+  @include ui.line-height('small');
+  @include ui.font-weight('regular');
 }
 
 kbd {
@@ -140,10 +146,6 @@ kbd {
   border: solid 1px ui.color-token('kbd-border');
 }
 
-p {
-  margin: ui.offset('small') 0;
-}
-
 li::marker {
   color: ui.color-token('li-marker');
 }