@cfx-dev/ui-components 4.0.2 → 4.2.0

package/dist/index-rKs9bXHr.js

@@ -0,0 +1,6 @@
+function c(a, [t, n]) {
+  return Math.min(n, Math.max(t, a));
+}
+export {
+  c
+};

package/dist/main.d.ts

@@ -94,5 +94,5 @@ export type { PopoverProps } from './components/Popover';
 export type { AvatarProps, AvatarSize } from './components/Avatar';
 export { OnScreenSensor } from './components/OnScreenSensor';
 export { ui } from './components/ui';
-export type { OffesetType, MediaQueryType, MediaQueryEnum, OffsetEnum, } from './components/ui';
+export type { OffsetType, OffsetEnum, MediaQueryType, MediaQueryEnum, ResponsiveOffsetType, MPProps, } from './components/ui';
 export { Symbols } from './components/Symbols';

package/dist/main.js

@@ -60,7 +60,7 @@ import { Popover as zr } from "./components/Popover/Popover.js";
 import { PremiumBadge as Vr } from "./components/PremiumBadge/PremiumBadge.js";
 import { Prose as Yr } from "./components/Prose/Prose.js";
 import { Radio as Mr } from "./components/Radio/Radio.js";
-import { S as jr } from "./Select-Ds-fm4CN.js";
+import { Select as jr } from "./components/Select/Select.js";
 import { DropdownSelect as Jr } from "./components/DropdownSelect/DropdownSelect.js";
 import { Separator as Xr } from "./components/Separator/Separator.js";
 import { Shroud as $r } from "./components/Shroud/Shroud.js";
@@ -72,13 +72,13 @@ import { ToggleGroup as ne } from "./components/ToggleGroup/ToggleGroup.js";
 import { Tabular as se } from "./components/Tabular/Tabular.js";
 import { Table as ce, TableIconButton as de } from "./components/Table/Table.js";
 import { Text as Te, TextBlock as Le, getTextOpacity as ge } from "./components/Text/Text.js";
-import { Textarea as Se } from "./components/Textarea/Textarea.js";
-import { TITLE_OUTLET_ID as ke, Title as ye } from "./components/Title/Title.js";
-import { default as be } from "./components/InputDropzone/InputDropzone.js";
+import { ui as Se } from "./components/ui.js";
+import { Textarea as ke } from "./components/Textarea/Textarea.js";
+import { TITLE_OUTLET_ID as Re, Title as be } from "./components/Title/Title.js";
+import { default as Oe } from "./components/InputDropzone/InputDropzone.js";
 import "./components/InputDropzone/ItemPreview.js";
-import { default as Oe } from "./components/Skeleton/Skeleton.js";
-import { OnScreenSensor as De } from "./components/OnScreenSensor.js";
-import { ui as _e } from "./components/ui.js";
+import { default as De } from "./components/Skeleton/Skeleton.js";
+import { OnScreenSensor as _e } from "./components/OnScreenSensor.js";
 import { Symbols as ve } from "./components/Symbols.js";
 export {
   po as Accordion,
@@ -115,7 +115,7 @@ export {
   or as Indicator,
   er as InfoPanel,
   pr as Input,
-  be as InputDropzone,
+  Oe as InputDropzone,
   ar as Interactive,
   nr as Island,
   go as Link,
@@ -126,7 +126,7 @@ export {
   _r as Modal,
   vr as NavList,
   Ur as OVERLAY_OUTLET_ID,
-  De as OnScreenSensor,
+  _e as OnScreenSensor,
   Nr as Overlay,
   Br as Pad,
   Cr as Page,
@@ -140,20 +140,20 @@ export {
   jr as Select,
   Xr as Separator,
   $r as Shroud,
-  Oe as Skeleton,
+  De as Skeleton,
   re as Slider,
   te as Spacer,
   fe as Style,
   ae as Switch,
   ve as Symbols,
-  ke as TITLE_OUTLET_ID,
+  Re as TITLE_OUTLET_ID,
   ce as Table,
   de as TableIconButton,
   se as Tabular,
   Te as Text,
   Le as TextBlock,
-  Se as Textarea,
-  ye as Title,
+  ke as Textarea,
+  be as Title,
   ne as ToggleGroup,
   Or as VirtualScrollable,
   V as clamp,
@@ -183,7 +183,7 @@ export {
   D as returnTrue,
   q as splitByIndices,
   Z as throttle,
-  _e as ui,
+  Se as ui,
   J as unicodeCharAt,
   y as useClipboardComponent,
   me as useContextualStyle,

package/dist/{medium-JVtzoF2c.js → medium-BA3EQDZW.js}

@@ -112,7 +112,7 @@ function w(e) {
   return u.options = p({ async: !0, ssr: !1 }, e), u;
 }
 export {
-  w as a,
-  k as c,
+  k as a,
+  w as c,
   b as u
 };

package/dist/styles-scss/_ui.scss

@@ -371,7 +371,7 @@ $mpMap: (
   pl: padding-left,
 );
 
-$control-heights: (
+$controlHeights: (
   'xxsmall': q(1.5),
   'xsmall': q(3),
   'small': q(4),
@@ -379,3 +379,12 @@ $control-heights: (
   'large': q(7),
   'xlarge': q(10),
 );
+
+$borderRadius: (
+  'none': 0px,
+  'xxsmall': q(.25),
+  'xsmall': q(.5),
+  'small': q(.75),
+  'normal': q(1.5),
+  'pill': 9999px,
+)

package/dist/styles-scss/global.scss

@@ -1,34 +1,47 @@
-@import "typography";
-@import "tokens";
+@use "typography";
+@use "tokens";
 
 body {
   // initiat tokens
-  @include color-tokens;
-  @include offset-tokens;
-  @include control-height-tokens;
-  @include text-tokens;
-  @include border-radius-tokens;
-  @include switch-tokens;
-  @include input-dropzone-tokens;
-  @include checkbox-tokens;
-  @include input-tokens;
-  @include select-tokens;
-  @include icon-tokens;
-  @include info-panel-tokens;
-  @include tabular-tokens;
-  @include modal-tokens;
-  @include scrollable-tokens;
-  @include avatar-tokens;
-  @include title-tokens;
-  @include button-tokens;
-  @include badge-tokens;
-  @include accordion-tokens;
-  @include mp-tokens;
-  @include anchor-tokens;
-  @include zindex-tokens;
+  @include tokens.color-tokens;
+  @include tokens.offset-tokens;
+  @include tokens.control-height-tokens;
+  @include tokens.text-tokens;
+  @include tokens.border-radius-tokens;
+  @include tokens.switch-tokens;
+  @include tokens.input-dropzone-tokens;
+  @include tokens.checkbox-tokens;
+  @include tokens.input-tokens;
+  @include tokens.select-tokens;
+  @include tokens.icon-tokens;
+  @include tokens.info-panel-tokens;
+  @include tokens.tabular-tokens;
+  @include tokens.modal-tokens;
+  @include tokens.scrollable-tokens;
+  @include tokens.avatar-tokens;
+  @include tokens.title-tokens;
+  @include tokens.button-tokens;
+  @include tokens.badge-tokens;
+  @include tokens.accordion-tokens;
+  @include tokens.anchor-tokens;
+  @include tokens.separator-tokens;
+  @include tokens.zindex-tokens;
+
+  // responsive
+  @include tokens.mp-tokens;
+  @include tokens.responsive-tokens('width');
+  @include tokens.responsive-tokens('height');
+  @include tokens.responsive-tokens('gap');
+  @include tokens.responsive-tokens('flex-direction');
+  @include tokens.responsive-tokens('align-items');
+  @include tokens.responsive-tokens('justify-content');
+  @include tokens.responsive-tokens('flex-wrap');
+  @include tokens.responsive-tokens('flex');
+  @include tokens.responsive-tokens('font-size');
+  @include tokens.responsive-tokens('line-height');
 
   // initiat fonts
-  @include font-HelveticaNow;
+  @include typography.font-HelveticaNow;
 
   // Set default font styles
   @include ui.font-color('text');

package/dist/styles-scss/themes/theme_cfx.scss

@@ -1,3 +1,5 @@
+@use "ui";
+
 $fg: #fffff0;
 $bg: #161923;
 

package/dist/styles-scss/themes/theme_fivem.scss

@@ -1,3 +1,5 @@
+@use "ui";
+
 $fg: #fffff0;
 $bg: #161923;
 

package/dist/styles-scss/themes/theme_redm.scss

@@ -1,3 +1,5 @@
+@use "ui";
+
 $fg: #fffff0;
 $bg: #161923;
 

package/dist/styles-scss/themes/theme_wireframe.scss

@@ -1,3 +1,5 @@
+@use "ui";
+
 $fg: #fffff0;
 $bg: #161923;
 

package/dist/styles-scss/themes.scss

@@ -1,4 +1,4 @@
-@import "./themes/theme_cfx.scss";
-@import "./themes/theme_fivem.scss";
-@import "./themes/theme_redm.scss";
-@import "./themes/theme_wireframe.scss";
+@use "./themes/theme_cfx.scss";
+@use "./themes/theme_fivem.scss";
+@use "./themes/theme_redm.scss";
+@use "./themes/theme_wireframe.scss";

package/dist/styles-scss/tokens.scss

@@ -1,6 +1,5 @@
 @use "sass:map";
 @use "ui";
-@import "ui";
 
 @mixin zindex-tokens() {
   @each $name, $value in ui.$zindexMap {
@@ -10,9 +9,9 @@
 
 @mixin mp-tokens() {
   @each $name, $value in ui.$mediaMap {
-    @include media-min($name) {
+    @include ui.media-min($name) {
       @each $mpName, $mpProp in ui.$mpMap {
-        [data-#{$mpName}-#{$name}] {
+        .ui-#{$mpName}-#{$name} {
           #{$mpProp}: var(--#{$mpName}-#{$name});
         }
       }
@@ -20,6 +19,16 @@
   }
 }
 
+@mixin responsive-tokens($propName) {
+  @each $name, $value in ui.$mediaMap {
+    @include ui.media-min($name) {
+      .ui-#{$propName}-#{$name} {
+        #{$propName}: var(--#{$propName}-#{$name});
+      }
+    }
+  }
+}
+
 @mixin anchor-tokens() {
   @include ui.define-color-token('anchor-color', ui.color('tertiary'));
   @include ui.define-color-token('anchor-decoration-color-hover', ui.color('tertiary', $alpha: .5));
@@ -30,12 +39,9 @@
 }
 
 @mixin border-radius-tokens() {
-  @include ui.def('border-radius-none', 0);
-  @include ui.def('border-radius-xxsmall', ui.q(.25));
-  @include ui.def('border-radius-xsmall', ui.q(.5));
-  @include ui.def('border-radius-small', ui.q(.75));
-  @include ui.def('border-radius-normal', ui.q(1.5));
-  @include ui.def('border-radius-pill', 9999px);
+  @each $name, $value in ui.$borderRadius {
+    @include ui.def('border-radius-#{$name}', $value);
+  }
 }
 
 @mixin text-tokens() {
@@ -77,13 +83,13 @@
 }
 
 @mixin offset-tokens() {
-  @each $name, $value in $offsets {
+  @each $name, $value in ui.$offsets {
     @include ui.def('offset-#{$name}', $value);
   }
 }
 
 @mixin control-height-tokens() {
-  @each $name, $value in ui.$control-heights {
+  @each $name, $value in ui.$controlHeights {
     @include ui.def('control-height-#{$name}', $value);
   }
 }
@@ -171,8 +177,14 @@
 
   @include ui.def('tabular-notification-gap', ui.q(.75));
 
-  @include ui.def('tabular-item-height', ui.control-height('xlarge'));
-  @include ui.def('tabular-item-padding', ui.offset('medium'));
+  @include ui.def('tabular-small-item-height', ui.q(5));
+  @include ui.def('tabular-small-item-padding', ui.offset('medium'));
+
+  @include ui.def('tabular-medium-item-height', ui.q(7.5));
+  @include ui.def('tabular-medium-item-padding', ui.offset('medium'));
+
+  @include ui.def('tabular-large-item-height', ui.q(10));
+  @include ui.def('tabular-large-item-padding', ui.offset('medium'));
 
   @include ui.def('tabular-item-border-size', ui.q(.25));
 }
@@ -297,6 +309,11 @@
   @include ui.define-color-token('badge-error-background-hover', ui.color('red', $alpha: .4));
 }
 
+@mixin separator-tokens() {
+  @include ui.define-color-token('separator-text', ui.color('secondary', $alpha: .4));
+  @include ui.define-color-token('separator-background', ui.color('secondary', $alpha: .2));
+}
+
 /**
  * Look for usages by searching for `ui.color-token('name')`
  */
@@ -380,10 +397,6 @@
   @include ui.define-color-token('overlay-backdrop-background', ui.color('bg', $alpha: .65));
 
 
-  @include ui.define-color-token('separator-text', ui.color('main', 950, .25));
-  @include ui.define-color-token('separator-background', ui.color('main', 950, .1));
-
-
   @include ui.define-color-token('toggle-description-text', ui.color('main', 950, .5));
   @include ui.define-color-token('toggle-border', ui.color('main', 950, .25));
 

package/package.json

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