@cfx-dev/ui-components 4.2.20 → 4.2.22

package/dist/main.js

@@ -1,201 +1,227 @@
-import { mergeRefs as t } from "./utils/mergeRefs.js";
-import { clsx as f } from "./utils/clsx.js";
-import { getValue as x } from "./utils/getValue.js";
-import { usePopoverController as n } from "./utils/hooks/usePopoverController.js";
-import { useInstance as i } from "./utils/hooks/useInstance.js";
+import { mergeRefs as e } from "./utils/mergeRefs.js";
+import { clsx as m } from "./utils/clsx.js";
+import { getValue as p } from "./utils/getValue.js";
+import { usePopoverController as x } from "./utils/hooks/usePopoverController.js";
+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 g } from "./utils/hooks/useWindowResize.js";
-import { useOutlet as S } from "./utils/hooks/useOutlet.js";
-import { CLIPBOARD_TITLE_APPEARANCE as k, useClipboardComponent as y } from "./utils/hooks/useClipboardComponent.js";
-import { identity as b, invoke as A, noop as O, returnFalse as P, returnTrue as D } from "./utils/functional.js";
-import { Linkify as _, defaultLinkReplacer as h, defaultLinkReplacerx as v, isExternalUrl as F, linkify as U, linkifyx as N, matchLinkNodes as w, matchLinks as z } from "./utils/links.js";
-import { clamp as M, clamp01 as V } from "./utils/math.js";
-import { isFalseString as Y, isTrueString as H, normalizeSlashes as W, replaceRange as j, splitByIndices as q, unicodeCharAt as J } from "./utils/string.js";
-import { debounce as X, throttle as Z } from "./utils/execution.js";
-import { getColor as oo } from "./utils/color.js";
-import { default as eo } from "./components/IconButton/IconButton.js";
-import { Accordion as po, AccordionContent as fo, AccordionHeader as mo, AccordionItem as xo, AccordionTrigger as ao } from "./components/Accordion/Accordion.js";
-import { default as lo } from "./components/ClipboardButton/ClipboardButton.js";
-import { default as uo } from "./components/Checkbox/Checkbox.js";
-import { Button as co } from "./components/Button/Button.js";
-import { BurgerMenuButton as To } from "./components/BurgerMenu/BurgerMenuButton.js";
-import { BurgerMenu as go } from "./components/BurgerMenu/BurgerMenu.js";
-import { LinkButton as So } from "./components/Button/LinkButton.js";
-import { default as ko, getLinkClassName as yo } from "./components/Link/Link.js";
-import { default as bo } from "./components/Link/ButtonLink.js";
-import { ButtonBar as Oo } from "./components/Button/ButtonBar.js";
-import { Avatar as Do } from "./components/Avatar/Avatar.js";
-import { BACKDROP_OUTLET_ID as _o, BackdropPortal as ho } from "./components/BackdropPortal/BackdropPortal.js";
-import { Badge as Fo } from "./components/Badge/Badge.js";
-import { ControlBox as No } from "./components/ControlBox/ControlBox.js";
-import { CountryFlag as zo } from "./components/CountryFlag/CountryFlag.js";
-import { Decorate as Mo } from "./components/Decorate/Decorate.js";
-import { Dot as Go } from "./components/Dot/Dot.js";
-import { FLYOUT_OUTLET_ID as Ho, Flyout as Wo } from "./components/Flyout/Flyout.js";
-import { Logos as qo } from "./components/Logos/index.js";
-import { I as Qo } from "./cfxIcons-BNd1WgpX.js";
-import { I as Zo } from "./cfxIconsBig-BLJjMT-Y.js";
-import { Icon as or } from "./components/Icon/Icon.js";
-import { IconBig as er } from "./components/IconBig/IconBig.js";
-import { Indicator as pr } from "./components/Indicator/Indicator.js";
-import { default as mr } from "./components/InfoPanel/InfoPanel.js";
-import { default as ar } from "./components/Input/Input.js";
-import { default as lr } from "./components/Input/RichInput.js";
-import { Interactive as ur } from "./components/Interactive/Interactive.js";
-import { Island as cr } from "./components/Island/Island.js";
-import { Box as Ir } from "./components/Layout/Box/Box.js";
-import { Center as Br } from "./components/Layout/Center/Center.js";
-import { Flex as Lr } from "./components/Layout/Flex/Flex.js";
-import { FlexRestricter as Cr } from "./components/Layout/Flex/FlexRestricter.js";
-import { Pad as yr } from "./components/Layout/Pad/Pad.js";
-import { Page as br } from "./components/Layout/Page/Page.js";
-import { R as Or } from "./Rail-DcVowhML.js";
-import { Scrollable as Dr } from "./components/Layout/Scrollable/Scrollable.js";
-import { VirtualScrollable as _r } from "./components/Layout/Scrollable/VirtualScrollable.js";
-import { Loaf as vr } from "./components/Loaf/Loaf.js";
-import { Modal as Ur } from "./components/Modal/Modal.js";
-import { NavList as wr } from "./components/NavList/NavList.js";
-import { OVERLAY_OUTLET_ID as Kr, Overlay as Mr } from "./components/Overlay/Overlay.js";
-import { Popover as Gr } from "./components/Popover/Popover.js";
-import { PremiumBadge as Hr } from "./components/PremiumBadge/PremiumBadge.js";
-import { Prose as jr } from "./components/Prose/Prose.js";
-import { Radio as Jr } from "./components/Radio/Radio.js";
-import { Select as Xr } from "./components/Select/Select.js";
-import { DropdownSelect as $r } from "./components/DropdownSelect/DropdownSelect.js";
-import { Separator as re } from "./components/Separator/Separator.js";
-import { Shroud as te } from "./components/Shroud/Shroud.js";
-import { Slider as fe } from "./components/Slider/Slider.js";
-import { Spacer as xe } from "./components/Spacer/Spacer.js";
-import { Style as ne, useContextualStyle as le } from "./components/Style/Style.js";
-import { default as ue } from "./components/Switch/Switch.js";
-import { ToggleGroup as ce } from "./components/ToggleGroup/ToggleGroup.js";
-import { Tabular as Ie } from "./components/Tabular/Tabular.js";
-import { Table as Be, TableIconButton as ge } from "./components/Table/Table.js";
-import { Text as Se, TextBlock as Ce, getTextOpacity as ke } from "./components/Text/Text.js";
-import { ui as Re } from "./components/ui.js";
-import { Textarea as Ae } from "./components/Textarea/Textarea.js";
-import { TITLE_OUTLET_ID as Pe, Title as De } from "./components/Title/Title.js";
-import { default as _e } from "./components/InputDropzone/InputDropzone.js";
-import "./components/InputDropzone/ItemPreview.js";
-import { default as ve } from "./components/Skeleton/Skeleton.js";
-import { OnScreenSensor as Ue } from "./components/OnScreenSensor.js";
-import { Symbols as we } from "./components/Symbols.js";
+import { useWindowResize as C } from "./utils/hooks/useWindowResize.js";
+import { useOutlet as E } from "./utils/hooks/useOutlet.js";
+import { CLIPBOARD_TITLE_APPEARANCE as L, useClipboardComponent as S } from "./utils/hooks/useClipboardComponent.js";
+import { identity as y, invoke as A, noop as k, returnFalse as O, returnTrue as P } from "./utils/functional.js";
+import { Linkify as D, defaultLinkReplacer as F, defaultLinkReplacerx as _, isExternalUrl as v, linkify as h, linkifyx as U, matchLinkNodes as z, matchLinks as w } from "./utils/links.js";
+import { clamp as N, clamp01 as G } from "./utils/math.js";
+import { isFalseString as K, isTrueString as Y, normalizeSlashes as H, replaceRange as W, splitByIndices as X, unicodeCharAt as J } from "./utils/string.js";
+import { debounce as Z, throttle as j } from "./utils/execution.js";
+import { getColor as $ } from "./utils/color.js";
+import { ui as ro } from "./utils/ui/ui.js";
+import { BorderRadiusEnum as to, ColorEnum as mo, MediaQueryEnum as fo, OffsetEnum as po, TextSizeEnum as ao, ZIndexEnum as xo } from "./utils/ui/ui.types.js";
+import { isInEnum as lo } from "./utils/enum.js";
+import { default as so } from "./components/IconButton/IconButton.js";
+import { Accordion as co, AccordionContent as To, AccordionHeader as Io, AccordionItem as Co, AccordionTrigger as Bo } from "./components/Accordion/Accordion.js";
+import { default as go } from "./components/ClipboardButton/ClipboardButton.js";
+import { default as So } from "./components/Checkbox/Checkbox.js";
+import { Button as yo, ButtonContent as Ao, getButtonClassName as ko } from "./components/Button/Button.js";
+import { ButtonBar as Po } from "./components/Button/ButtonBar.js";
+import { LinkButton as Do } from "./components/Button/LinkButton.js";
+import { BurgerMenuButton as _o } from "./components/BurgerMenu/BurgerMenuButton.js";
+import { BurgerMenu as ho } from "./components/BurgerMenu/BurgerMenu.js";
+import { default as zo, getLinkClassName as wo } from "./components/Link/Link.js";
+import { default as No } from "./components/Link/ButtonLink.js";
+import { Avatar as Vo } from "./components/Avatar/Avatar.js";
+import { BACKDROP_OUTLET_ID as Yo, default as Ho } from "./components/BackdropPortal/BackdropPortal.js";
+import { Badge as Xo } from "./components/Badge/Badge.js";
+import { default as Qo } from "./components/ControlBox/ControlBox.js";
+import { default as jo } from "./components/CountryFlag/CountryFlag.js";
+import { default as $o } from "./components/Decorate/Decorate.js";
+import { Dot as rr } from "./components/Dot/Dot.js";
+import { FLYOUT_OUTLET_ID as tr, Flyout as mr } from "./components/Flyout/Flyout.js";
+import { Logos as pr } from "./components/Logos/index.js";
+import { I as xr } from "./cfxIcons-BNd1WgpX.js";
+import { I as lr } from "./cfxIconsBig-BLJjMT-Y.js";
+import { Icon as sr } from "./components/Icon/Icon.js";
+import { IconBig as dr } from "./components/IconBig/IconBig.js";
+import { Indicator as Tr } from "./components/Indicator/Indicator.js";
+import { default as Cr } from "./components/InfoPanel/InfoPanel.js";
+import { default as Er } from "./components/Input/Input.js";
+import { default as Lr } from "./components/Input/RichInput.js";
+import { Interactive as Rr } from "./components/Interactive/Interactive.js";
+import { Island as Ar, IslandCorner as kr } from "./components/Island/Island.js";
+import { Box as Pr, flexPropFormater as br } from "./components/Layout/Box/Box.js";
+import { Center as Fr } from "./components/Layout/Center/Center.js";
+import { Flex as vr } from "./components/Layout/Flex/Flex.js";
+import { FlexAlignItemsEnum as Ur, FlexDirectionEnum as zr, FlexJustifyContentEnum as wr, FlexWrapEnum as Mr } from "./components/Layout/Flex/Flex.types.js";
+import { FlexRestricter as Gr } from "./components/Layout/Flex/FlexRestricter.js";
+import { Pad as Kr } from "./components/Layout/Pad/Pad.js";
+import { Page as Hr } from "./components/Layout/Page/Page.js";
+import { R as Xr } from "./Rail-DcVowhML.js";
+import { Scrollable as Qr } from "./components/Layout/Scrollable/Scrollable.js";
+import { VirtualScrollable as jr } from "./components/Layout/Scrollable/VirtualScrollable.js";
+import { Loaf as $r } from "./components/Loaf/Loaf.js";
+import { Modal as re } from "./components/Modal/Modal.js";
+import { NavList as te } from "./components/NavList/NavList.js";
+import { OVERLAY_OUTLET_ID as fe, Overlay as pe } from "./components/Overlay/Overlay.js";
+import { Popover as xe } from "./components/Popover/Popover.js";
+import { PremiumBadge as le } from "./components/PremiumBadge/PremiumBadge.js";
+import { Prose as se } from "./components/Prose/Prose.js";
+import { Radio as de } from "./components/Radio/Radio.js";
+import { Select as Te } from "./components/Select/Select.js";
+import { DropdownSelect as Ce } from "./components/DropdownSelect/DropdownSelect.js";
+import { Separator as Ee } from "./components/Separator/Separator.js";
+import { Shroud as Le } from "./components/Shroud/Shroud.js";
+import { Slider as Re } from "./components/Slider/Slider.js";
+import { Spacer as Ae } from "./components/Spacer/Spacer.js";
+import { Style as Oe, useContextualStyle as Pe } from "./components/Style/Style.js";
+import { default as De } from "./components/Switch/Switch.js";
+import { ToggleGroup as _e } from "./components/ToggleGroup/ToggleGroup.js";
+import { Tabular as he } from "./components/Tabular/Tabular.js";
+import { Table as ze, TableHeaderItem as we, TableIconButton as Me, TableRow as Ne } from "./components/Table/Table.js";
+import { DEFAULT_TEXT_COLOR as Ve, TEXT_OPACITY_MAP as Ke, Text as Ye, TextBlock as He, getTextOpacity as We, textSizeResponsiveValueFormatter as Xe } from "./components/Text/Text.js";
+import { Textarea as Qe } from "./components/Textarea/Textarea.js";
+import { TITLE_OUTLET_ID as je, Title as qe, titleGetCoords as $e, titleGetCssStyle as ot } from "./components/Title/Title.js";
+import { default as et } from "./components/InputDropzone/InputDropzone.js";
+import { default as mt } from "./components/InputDropzone/ItemPreview.js";
+import { default as pt } from "./components/Skeleton/Skeleton.js";
+import { OnScreenSensor as xt } from "./components/OnScreenSensor.js";
+import { Symbols as lt } from "./components/Symbols.js";
 export {
-  po as Accordion,
-  fo as AccordionContent,
-  mo as AccordionHeader,
-  xo as AccordionItem,
-  ao as AccordionTrigger,
-  Do as Avatar,
-  _o as BACKDROP_OUTLET_ID,
-  ho as BackdropPortal,
-  Fo as Badge,
-  Ir as Box,
-  go as BurgerMenu,
-  To as BurgerMenuButton,
-  co as Button,
-  Oo as ButtonBar,
-  bo as ButtonLink,
-  k as CLIPBOARD_TITLE_APPEARANCE,
-  Br as Center,
-  uo as Checkbox,
-  lo as ClipboardButton,
-  No as ControlBox,
-  zo as CountryFlag,
-  Mo as Decorate,
-  Go as Dot,
-  $r as DropdownSelect,
-  Ho as FLYOUT_OUTLET_ID,
-  Lr as Flex,
-  Cr as FlexRestricter,
-  Wo as Flyout,
-  or as Icon,
-  er as IconBig,
-  eo as IconButton,
-  Qo as Icons,
-  Zo as IconsBig,
-  pr as Indicator,
-  mr as InfoPanel,
-  ar as Input,
-  _e as InputDropzone,
-  ur as Interactive,
-  cr as Island,
-  ko as Link,
-  So as LinkButton,
-  _ as Linkify,
-  vr as Loaf,
-  qo as Logos,
-  Ur as Modal,
-  wr as NavList,
-  Kr as OVERLAY_OUTLET_ID,
-  Ue as OnScreenSensor,
-  Mr as Overlay,
-  yr as Pad,
-  br as Page,
-  Gr as Popover,
-  Hr as PremiumBadge,
-  jr as Prose,
-  Jr as Radio,
-  Or as Rail,
-  lr as RichInput,
-  Dr as Scrollable,
-  Xr as Select,
-  re as Separator,
-  te as Shroud,
-  ve as Skeleton,
-  fe as Slider,
-  xe as Spacer,
-  ne as Style,
-  ue as Switch,
-  we as Symbols,
-  Pe as TITLE_OUTLET_ID,
-  Be as Table,
-  ge as TableIconButton,
-  Ie as Tabular,
-  Se as Text,
-  Ce as TextBlock,
-  Ae as Textarea,
-  De as Title,
-  ce as ToggleGroup,
-  _r as VirtualScrollable,
-  M as clamp,
-  V as clamp01,
-  f as clsx,
-  X as debounce,
-  h as defaultLinkReplacer,
-  v as defaultLinkReplacerx,
-  oo as getColor,
-  yo as getLinkClassName,
-  ke as getTextOpacity,
-  x as getValue,
-  b as identity,
+  co as Accordion,
+  To as AccordionContent,
+  Io as AccordionHeader,
+  Co as AccordionItem,
+  Bo as AccordionTrigger,
+  Vo as Avatar,
+  Yo as BACKDROP_OUTLET_ID,
+  Ho as BackdropPortal,
+  Xo as Badge,
+  to as BorderRadiusEnum,
+  Pr as Box,
+  ho as BurgerMenu,
+  _o as BurgerMenuButton,
+  yo as Button,
+  Po as ButtonBar,
+  Ao as ButtonContent,
+  No as ButtonLink,
+  L as CLIPBOARD_TITLE_APPEARANCE,
+  Fr as Center,
+  So as Checkbox,
+  go as ClipboardButton,
+  mo as ColorEnum,
+  Qo as ControlBox,
+  jo as CountryFlag,
+  Ve as DEFAULT_TEXT_COLOR,
+  $o as Decorate,
+  rr as Dot,
+  Ce as DropdownSelect,
+  mt as DropzoneItemPreview,
+  tr as FLYOUT_OUTLET_ID,
+  vr as Flex,
+  Ur as FlexAlignItemsEnum,
+  zr as FlexDirectionEnum,
+  wr as FlexJustifyContentEnum,
+  Gr as FlexRestricter,
+  Mr as FlexWrapEnum,
+  mr as Flyout,
+  sr as Icon,
+  dr as IconBig,
+  so as IconButton,
+  xr as Icons,
+  lr as IconsBig,
+  Tr as Indicator,
+  Cr as InfoPanel,
+  Er as Input,
+  et as InputDropzone,
+  Rr as Interactive,
+  Ar as Island,
+  kr as IslandCorner,
+  zo as Link,
+  Do as LinkButton,
+  D as Linkify,
+  $r as Loaf,
+  pr as Logos,
+  fo as MediaQueryEnum,
+  re as Modal,
+  te as NavList,
+  fe as OVERLAY_OUTLET_ID,
+  po as OffsetEnum,
+  xt as OnScreenSensor,
+  pe as Overlay,
+  Kr as Pad,
+  Hr as Page,
+  xe as Popover,
+  le as PremiumBadge,
+  se as Prose,
+  de as Radio,
+  Xr as Rail,
+  Lr as RichInput,
+  Qr as Scrollable,
+  Te as Select,
+  Ee as Separator,
+  Le as Shroud,
+  pt as Skeleton,
+  Re as Slider,
+  Ae as Spacer,
+  Oe as Style,
+  De as Switch,
+  lt as Symbols,
+  Ke as TEXT_OPACITY_MAP,
+  je as TITLE_OUTLET_ID,
+  ze as Table,
+  we as TableHeaderItem,
+  Me as TableIconButton,
+  Ne as TableRow,
+  he as Tabular,
+  Ye as Text,
+  He as TextBlock,
+  ao as TextSizeEnum,
+  Qe as Textarea,
+  qe as Title,
+  _e as ToggleGroup,
+  jr as VirtualScrollable,
+  xo as ZIndexEnum,
+  N as clamp,
+  G as clamp01,
+  m as clsx,
+  Z as debounce,
+  F as defaultLinkReplacer,
+  _ as defaultLinkReplacerx,
+  br as flexPropFormater,
+  ko as getButtonClassName,
+  $ as getColor,
+  wo as getLinkClassName,
+  We as getTextOpacity,
+  p as getValue,
+  y as identity,
   A as invoke,
-  F as isExternalUrl,
-  Y as isFalseString,
-  H as isTrueString,
-  U as linkify,
-  N as linkifyx,
-  w as matchLinkNodes,
-  z as matchLinks,
-  t as mergeRefs,
-  O as noop,
-  W as normalizeSlashes,
-  j as replaceRange,
-  P as returnFalse,
-  D as returnTrue,
-  q as splitByIndices,
-  Z as throttle,
-  Re as ui,
+  v as isExternalUrl,
+  K as isFalseString,
+  lo as isInEnum,
+  Y as isTrueString,
+  h as linkify,
+  U as linkifyx,
+  z as matchLinkNodes,
+  w as matchLinks,
+  e as mergeRefs,
+  k as noop,
+  H as normalizeSlashes,
+  W as replaceRange,
+  O as returnFalse,
+  P as returnTrue,
+  X as splitByIndices,
+  Xe as textSizeResponsiveValueFormatter,
+  j as throttle,
+  $e as titleGetCoords,
+  ot as titleGetCssStyle,
+  ro as ui,
   J as unicodeCharAt,
-  y as useClipboardComponent,
-  le as useContextualStyle,
+  S as useClipboardComponent,
+  Pe as useContextualStyle,
   s as useDynamicRef,
   d as useGlobalKeyboardEvent,
-  i as useInstance,
+  l as useInstance,
   T as useKeyboardClose,
-  S as useOutlet,
-  n as usePopoverController,
-  g as useWindowResize
+  E as useOutlet,
+  x as usePopoverController,
+  C as useWindowResize
 };

package/dist/styles-scss/global.scss

@@ -53,7 +53,7 @@ body {
 
 a {
   display: inline-flex;
-  color: ui.color-token('anchor-color');
+  color: ui.color('tertiary');
   cursor: pointer;
   text-decoration: underline;
   border-radius: ui.border-radius('xxsmall');
@@ -64,7 +64,7 @@ a {
     text-decoration-color: currentColor;
 
     &:hover {
-      text-decoration-color: ui.color-token('anchor-decoration-color-hover');
+      text-decoration-color: ui.color('tertiary', $alpha: 0.5);
     }
 
     &:focus-visible:not(:active):not(:hover) {

package/dist/styles-scss/tokens.scss

@@ -30,10 +30,6 @@
 }
 
 @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));
-  @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));
 }

package/dist/utils/color.d.ts

@@ -1,6 +1,8 @@
+import { ColorType } from './ui';
+
 export interface GetColorProps {
     colorToken?: string;
-    color?: string;
+    color?: ColorType | 'inherit';
     opacity?: number | string;
     luminance?: number;
 }

package/dist/utils/enum.d.ts

@@ -0,0 +1 @@
+export declare function isInEnum<T extends string>(value: string, keys: Record<T, T>): value is T;

package/dist/utils/enum.js

@@ -0,0 +1,6 @@
+function r(n, i) {
+  return n in i;
+}
+export {
+  r as isInEnum
+};

package/dist/utils/ui/index.d.ts

@@ -0,0 +1,3 @@
+export { ui } from './ui';
+export { OffsetEnum, MediaQueryEnum, BorderRadiusEnum, ZIndexEnum, ColorEnum, TextSizeEnum, } from './ui.types';
+export type { OffsetType, MediaQueryType, ResponsiveOffsetType, ResponsiveValueType, MPProps, BorderRadiusType, ZIndexType, ColorType, TextSize, } from './ui.types';

package/dist/utils/ui/index.js

@@ -0,0 +1,11 @@
+import { ui as m } from "./ui.js";
+import { BorderRadiusEnum as n, ColorEnum as o, MediaQueryEnum as E, OffsetEnum as d, TextSizeEnum as f, ZIndexEnum as i } from "./ui.types.js";
+export {
+  n as BorderRadiusEnum,
+  o as ColorEnum,
+  E as MediaQueryEnum,
+  d as OffsetEnum,
+  f as TextSizeEnum,
+  i as ZIndexEnum,
+  m as ui
+};

package/dist/{components → utils/ui}/ui.d.ts

@@ -1,71 +1,5 @@
-export declare enum TextSizeEnum {
-    xxsmall = "xxsmall",
-    xsmall = "xsmall",
-    small = "small",
-    normal = "normal",
-    medium = "medium",
-    large = "large",
-    xlarge = "xlarge",
-    xxlarge = "xxlarge",
-    xxxlarge = "xxxlarge"
-}
-export type TextSize = keyof typeof TextSizeEnum;
-export declare enum BorderRadiusEnum {
-    none = "none",
-    xxsmall = "xxsmall",
-    xsmall = "xsmall",
-    small = "small",
-    normal = "normal",
-    pill = "pill"
-}
-export type BorderRadiusType = keyof typeof BorderRadiusEnum;
-export declare enum ZIndexEnum {
-    zero = "zero",
-    first = "first",
-    second = "second",
-    max = "max"
-}
-export type ZIndexType = keyof typeof ZIndexEnum;
-export declare enum OffsetEnum {
-    none = "none",
-    hairthin = "hairthin",
-    thin = "thin",
-    xxsmall = "xxsmall",
-    xsmall = "xsmall",
-    small = "small",
-    normal = "normal",
-    medium = "medium",
-    large = "large",
-    xlarge = "xlarge",
-    safezone = "safezone"
-}
-export type OffsetType = keyof typeof OffsetEnum;
-export declare enum MediaQueryEnum {
-    initial = "initial",
-    small = "small",
-    'small-medium' = "small-medium",
-    medium = "medium",
-    'medium-large' = "medium-large",
-    large = "large",
-    xlarge = "xlarge"
-}
-export type MediaQueryType = keyof typeof MediaQueryEnum;
-export type ResponsiveValueType<T = string | number> = T | {
-    [key in MediaQueryType]?: T;
-};
-export type ResponsiveOffsetType = ResponsiveValueType<OffsetType | number>;
-export interface MPProps {
-    m?: ResponsiveOffsetType;
-    mt?: ResponsiveOffsetType;
-    mr?: ResponsiveOffsetType;
-    mb?: ResponsiveOffsetType;
-    ml?: ResponsiveOffsetType;
-    p?: ResponsiveOffsetType;
-    pt?: ResponsiveOffsetType;
-    pr?: ResponsiveOffsetType;
-    pb?: ResponsiveOffsetType;
-    pl?: ResponsiveOffsetType;
-}
+import { BorderRadiusType, MPProps, OffsetType, ResponsiveOffsetType, ResponsiveValueType, TextSize, ZIndexType } from './ui.types';
+
 export declare namespace ui {
     /**
      * Returns CSS value of quant value with applied multiplier

package/dist/utils/ui/ui.js

@@ -0,0 +1,68 @@
+import { clsx as d } from "../clsx.js";
+var g;
+((t) => {
+  function i(e = 1) {
+    return `calc(var(--quant) * ${e})`;
+  }
+  t.q = i;
+  function u(e) {
+    return `var(--offset-${e})`;
+  }
+  t.offset = u;
+  function b(e = "normal") {
+    return `var(--font-size-${e})`;
+  }
+  t.fontSize = b;
+  function m(e = "first") {
+    return `var(--zindex-${e})`;
+  }
+  t.zindex = m;
+  function y(e = "normal") {
+    return `var(--line-height-${e})`;
+  }
+  t.lineHeight = y;
+  function h(e = "normal") {
+    return `var(--border-radius-${e})`;
+  }
+  t.borderRadius = h;
+  function x(e, r, o = 1) {
+    let n = r;
+    return n === "pure" && (n = ""), typeof n == "number" && (n = `${n}`), `rgba(var(--color-${e}${n ? `-${n}` : ""}), ${o})`;
+  }
+  t.color = x, ((e) => {
+    e.fullWidth = "util-full-width", e.fullHeight = "util-full-height", e.flexGrow = "util-flex-grow", e.flexNoShrink = "util-flex-no-shrink", e.userSelectableText = "util-text-selectable", e.zIndex9000 = "util-z-index-9000";
+  })(t.cls || (t.cls = {})), t.pc = (e) => `${e}%`, t.px = (e) => `${e}px`, t.ch = (e) => `${e}ch`, t.em = (e) => `${e}em`, t.rem = (e) => `${e}rem`, t.vh = (e) => `${e}vh`, t.vw = (e) => `${e}vw`, t.url = (e) => `url(${e})`;
+  function f(e) {
+    return e == null ? "" : typeof e == "number" ? i(e) : e.toString();
+  }
+  t.defaultResponsiveValueFormatter = f;
+  function $(e, r, o = f) {
+    return r == null ? {} : typeof r == "object" && !Array.isArray(r) ? Object.entries(r).reduce((n, [s, l]) => (n[`--${e}-${s}`] = o(l), n), {}) : {
+      [`--${e}-initial`]: o(r)
+    };
+  }
+  t.getResponsiveStyles = $;
+  function a(e, r) {
+    return r == null ? "" : typeof r == "object" && !Array.isArray(r) ? d(Object.keys(r).map((o) => `ui-${e}-${o}`)) : `ui-${e}-initial`;
+  }
+  t.getResponsiveClassnames = a;
+  function R(e, r, o = f) {
+    return r == null ? [] : typeof r == "object" && !Array.isArray(r) ? Object.entries(r).reduce((n, [s, l]) => (n.push(`${e}-${s}-${o(l)}`), n), []) : [`${e}-initial-${o(r)}`];
+  }
+  t.getResponsiveFlatClassnames = R;
+  function c(e) {
+    return typeof e == "number" ? i(e) : u(e);
+  }
+  t.offsetResponsiveValueFormatter = c, t.getOffsetStyles = (e, r) => $(e, r, c);
+  function p(e, r) {
+    return Object.entries(e).reduce((o, [n, s]) => (Object.assign(o, r(n, s)), o), {});
+  }
+  t.callAllMPProps = p, t.getAllMPStyles = (e) => p(e, t.getOffsetStyles), t.getAllMPClassnames = (e) => d(
+    Object.entries(e).map(
+      ([r, o]) => a(r, o)
+    )
+  );
+})(g || (g = {}));
+export {
+  g as ui
+};