@marigold/system 16.1.0 → 17.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.cjs +52 -1
  2. package/dist/index.d.cts +86 -14
  3. package/dist/index.d.mts +86 -14
  4. package/dist/index.mjs +49 -2
  5. package/package.json +6 -6
package/dist/index.cjs CHANGED
@@ -27,6 +27,13 @@ const cn = (...inputs) => (0, tailwind_merge.twMerge)((0, class_variance_authori
27
27
  */
28
28
  const isScale = (value) => /^[0-9]+(\.[0-9]+)?$/.test(value);
29
29
  /**
30
+ * Checks if a value represents a fraction (e.g., "1/2", "2/3").
31
+ *
32
+ * @param value - The string to test for fraction format.
33
+ * @returns `true` if the string is a valid fraction, otherwise `false`.
34
+ */
35
+ const isFraction = (value) => /^[0-9]+\/[0-9]+$/.test(value);
36
+ /**
30
37
  * Checks if a given string is a valid CSS custom property name (without the leading `--`).
31
38
  *
32
39
  * This simplified check ensures:
@@ -66,6 +73,33 @@ const createVar = (o) => Object.fromEntries(Object.entries(o).map(([name, val])
66
73
  const createSpacingVar = (name, value) => {
67
74
  return { [`--${name}`]: isScale(value) ? `calc(var(--spacing) * ${value})` : `var(--spacing-${value})` };
68
75
  };
76
+ /**
77
+ * Generates a CSS custom property for width that uses either a calc expression or a
78
+ * fraction percentage.
79
+ *
80
+ * Supports:
81
+ * - Numeric scale (e.g., "4", "2.5"): Uses `--spacing` scale with calc() → `w-4`, `w-2.5`
82
+ * - Fractions (e.g., "1/2", "2/3"): Converts to percentage → `w-1/2`, `w-2/3`
83
+ * - CSS keywords (e.g., "fit", "min", "max"): Uses corresponding CSS values → `w-fit`, `w-min`, `w-max`
84
+ *
85
+ * @param name - The custom property name for width.
86
+ * @param value - Width value as a string (number, fraction, or keyword).
87
+ * @returns Object with the CSS custom property for width.
88
+ *
89
+ */
90
+ const createWidthVar = (name, value) => {
91
+ const widthKeywords = {
92
+ fit: "fit-content",
93
+ min: "min-content",
94
+ max: "max-content",
95
+ full: "100%",
96
+ screen: "100vw",
97
+ auto: "auto"
98
+ };
99
+ const resolvedValue = widthKeywords[value] || isScale(value) && `calc(var(--spacing) * ${value})` || isFraction(value) && `calc((${value.split("/").join(" / ")}) * 100%)`;
100
+ if (!resolvedValue) throw new Error(`Unsupported width value: "${value}". Expected a keyword (${Object.keys(widthKeywords).join(", ")}), a scale number, or a fraction (e.g., "1/2").`);
101
+ return { [`--${name}`]: resolvedValue };
102
+ };
69
103
 
70
104
  //#endregion
71
105
  //#region src/components/SVG/SVG.tsx
@@ -539,6 +573,14 @@ const whiteSpace = {
539
573
  preWrap: "whitespace-pre-wrap",
540
574
  breakSpaces: "whitespace-break-spaces"
541
575
  };
576
+ const lineHeight = {
577
+ none: "leading-none",
578
+ tight: "leading-tight",
579
+ snug: "leading-snug",
580
+ normal: "leading-normal",
581
+ relaxed: "leading-relaxed",
582
+ loose: "leading-loose"
583
+ };
542
584
  const gapSpace = {
543
585
  0: "gap-0",
544
586
  "0.5": "gap-0.5",
@@ -877,11 +919,16 @@ const placeItems = {
877
919
  right: "place-items-end"
878
920
  };
879
921
  const textAlign = {
880
- none: void 0,
881
922
  left: "text-left",
882
923
  center: "text-center",
883
924
  right: "text-right"
884
925
  };
926
+ const verticalAlign = {
927
+ top: "align-top",
928
+ middle: "align-middle",
929
+ bottom: "align-bottom",
930
+ baseline: "align-baseline"
931
+ };
885
932
  const aspect = {
886
933
  square: "aspect-[1]",
887
934
  landscape: "aspect-4/3",
@@ -947,6 +994,7 @@ exports.aspect = aspect;
947
994
  exports.cn = cn;
948
995
  exports.createSpacingVar = createSpacingVar;
949
996
  exports.createVar = createVar;
997
+ exports.createWidthVar = createWidthVar;
950
998
  exports.cursorStyle = cursorStyle;
951
999
  exports.cva = cva;
952
1000
  exports.defaultTheme = defaultTheme;
@@ -956,8 +1004,10 @@ exports.fontWeight = fontWeight;
956
1004
  exports.gapSpace = gapSpace;
957
1005
  exports.get = get;
958
1006
  exports.height = height;
1007
+ exports.isFraction = isFraction;
959
1008
  exports.isScale = isScale;
960
1009
  exports.isValidCssCustomPropertyName = isValidCssCustomPropertyName;
1010
+ exports.lineHeight = lineHeight;
961
1011
  exports.maxWidth = maxWidth;
962
1012
  exports.paddingBottom = paddingBottom;
963
1013
  exports.paddingLeft = paddingLeft;
@@ -976,5 +1026,6 @@ exports.useResponsiveValue = useResponsiveValue;
976
1026
  exports.useSmallScreen = useSmallScreen;
977
1027
  exports.useStateProps = useStateProps;
978
1028
  exports.useTheme = useTheme;
1029
+ exports.verticalAlign = verticalAlign;
979
1030
  exports.whiteSpace = whiteSpace;
980
1031
  exports.width = width;
package/dist/index.d.cts CHANGED
@@ -102,17 +102,19 @@ type Theme = {
102
102
  root?: ComponentStyleFunction;
103
103
  components: {
104
104
  Accordion?: Record<'container' | 'item' | 'header' | 'panel' | 'content' | 'icon', ComponentStyleFunction<string, string>>;
105
+ ActionBar?: Record<'container' | 'count' | 'actions' | 'clearButton', ComponentStyleFunction<string, string>>;
105
106
  Badge?: ComponentStyleFunction<string, string>;
106
107
  Breadcrumbs?: Record<'container' | 'item' | 'link' | 'current', ComponentStyleFunction<string, string>>;
107
108
  Button?: ComponentStyleFunction<string, string>;
108
109
  Card?: ComponentStyleFunction<string, string>;
109
110
  CloseButton?: ComponentStyleFunction<string, string>;
110
111
  Collapsible?: Record<'container' | 'trigger' | 'content', ComponentStyleFunction<string, string>>;
111
- ContextualHelp?: Record<'trigger' | 'popover' | 'container' | 'title' | 'content', ComponentStyleFunction<string, string>>;
112
- DateField?: Record<'segment' | 'field' | 'action', ComponentStyleFunction<string, string>>;
112
+ ContextualHelp?: Record<'trigger' | 'container' | 'title' | 'content', ComponentStyleFunction<string, string>>;
113
+ DateField?: Record<'segment' | 'field' | 'input' | 'action', ComponentStyleFunction<string, string>>;
113
114
  Dialog?: Record<'closeButton' | 'container' | 'header' | 'content' | 'actions' | 'title', ComponentStyleFunction<string, string>>;
114
115
  Divider?: ComponentStyleFunction<string, string>;
115
116
  Drawer?: Record<'overlay' | 'closeButton' | 'container' | 'header' | 'title' | 'content' | 'actions', ComponentStyleFunction<string, string>>;
117
+ Tray?: Record<'overlay' | 'container' | 'dragHandle' | 'header' | 'title' | 'content' | 'actions', ComponentStyleFunction<string, string>>;
116
118
  Field?: ComponentStyleFunction<string, string>;
117
119
  Headline?: ComponentStyleFunction<string, string>;
118
120
  Popover?: ComponentStyleFunction<string, string>;
@@ -135,19 +137,24 @@ type Theme = {
135
137
  Select?: Record<'select' | 'icon', ComponentStyleFunction<string, string>>;
136
138
  NumberField?: Record<'group' | 'stepper' | 'input', ComponentStyleFunction<string, string>>;
137
139
  SectionMessage?: Record<'container' | 'icon' | 'title' | 'content' | 'close', ComponentStyleFunction<string, string>>;
138
- Table?: Record<'table' | 'headerRow' | 'header' | 'thead' | 'body' | 'row' | 'cell', ComponentStyleFunction<string, string>>;
140
+ Table?: Record<'table' | 'head' | 'column' | 'body' | 'row' | 'cell' | 'dragHandle' | 'dragPreview' | 'dragPreviewCounter' | 'dropIndicator' | 'editablePopover' | 'editTrigger' | 'editCancel' | 'editSave', ComponentStyleFunction<string, string>>;
141
+ LegacyTable?: Record<'table' | 'headerRow' | 'header' | 'thead' | 'body' | 'row' | 'cell', ComponentStyleFunction<string, string>>;
139
142
  Tag?: Record<'container' | 'tag' | 'listItems' | 'closeButton' | 'removeAll', ComponentStyleFunction<string, string>>;
143
+ TagField?: Record<'trigger' | 'tagGroup' | 'listItems' | 'button' | 'container', ComponentStyleFunction<string, string>>;
140
144
  Text?: ComponentStyleFunction<string, string>;
141
145
  TextArea?: ComponentStyleFunction<string, string>;
142
146
  Tooltip?: Record<'container' | 'arrow', ComponentStyleFunction<string, string>>;
143
147
  Toast?: Record<'toast' | 'title' | 'description' | 'closeButton' | 'icon' | 'content' | 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' | 'top' | 'bottom' | 'action', ComponentStyleFunction<string, string>>;
144
148
  Tabs?: Record<'container' | 'tabsList' | 'tabpanel' | 'tab', ComponentStyleFunction<string, string>>;
145
149
  Underlay?: ComponentStyleFunction<string, string>;
146
- Calendar?: Record<'calendar' | 'calendarListboxButton' | 'calendarCell' | 'calendarControllers' | 'calendarHeader' | 'calendarGrid' | 'select', ComponentStyleFunction<string, string>>;
150
+ Calendar?: Record<'calendar' | 'calendarContainer' | 'calendarMonth' | 'calendarListboxButton' | 'calendarCell' | 'calendarControllers' | 'calendarHeader' | 'calendarGrid' | 'select', ComponentStyleFunction<string, string>>;
147
151
  DatePicker?: ComponentStyleFunction<string, string>;
148
- ComboBox?: ComponentStyleFunction<string, string>;
152
+ ComboBox?: Record<'icon' | 'mobileTrigger', ComponentStyleFunction<string, string>>;
153
+ Autocomplete?: Record<'mobileTrigger', ComponentStyleFunction<string, string>>;
149
154
  Loader?: Record<'container' | 'loader' | 'label', ComponentStyleFunction<string, string>>;
150
- FileField?: Record<'container' | 'dropZone' | 'dropZoneContent' | 'dropZoneLabel' | 'item' | 'itemLabel' | 'itemDescription', ComponentStyleFunction<string, string>>;
155
+ FileField?: Record<'container' | 'dropZone' | 'dropZoneContent' | 'dropZoneLabel' | 'item' | 'itemLabel' | 'itemDescription' | 'itemRemove', ComponentStyleFunction<string, string>>;
156
+ EmptyState?: Record<'container' | 'title' | 'description' | 'action', ComponentStyleFunction<string, string>>;
157
+ ToggleButton?: Record<'group' | 'button', ComponentStyleFunction<string, string>>;
151
158
  };
152
159
  };
153
160
  type ComponentNames = keyof Theme['components'];
@@ -226,17 +233,19 @@ type StylesProps = { [K in keyof Theme['components']]: Partial<Theme['components
226
233
  declare const extendTheme: (newStyles: StylesProps, theme: Theme) => {
227
234
  components: {
228
235
  Accordion?: Record<"container" | "item" | "header" | "panel" | "content" | "icon", ComponentStyleFunction<string, string>>;
236
+ ActionBar?: Record<"container" | "count" | "actions" | "clearButton", ComponentStyleFunction<string, string>>;
229
237
  Badge?: ComponentStyleFunction<string, string>;
230
238
  Breadcrumbs?: Record<"container" | "item" | "link" | "current", ComponentStyleFunction<string, string>>;
231
239
  Button?: ComponentStyleFunction<string, string>;
232
240
  Card?: ComponentStyleFunction<string, string>;
233
241
  CloseButton?: ComponentStyleFunction<string, string>;
234
242
  Collapsible?: Record<"container" | "trigger" | "content", ComponentStyleFunction<string, string>>;
235
- ContextualHelp?: Record<"trigger" | "popover" | "container" | "title" | "content", ComponentStyleFunction<string, string>>;
236
- DateField?: Record<"segment" | "field" | "action", ComponentStyleFunction<string, string>>;
243
+ ContextualHelp?: Record<"trigger" | "container" | "title" | "content", ComponentStyleFunction<string, string>>;
244
+ DateField?: Record<"segment" | "field" | "input" | "action", ComponentStyleFunction<string, string>>;
237
245
  Dialog?: Record<"closeButton" | "container" | "header" | "content" | "actions" | "title", ComponentStyleFunction<string, string>>;
238
246
  Divider?: ComponentStyleFunction<string, string>;
239
247
  Drawer?: Record<"overlay" | "closeButton" | "container" | "header" | "title" | "content" | "actions", ComponentStyleFunction<string, string>>;
248
+ Tray?: Record<"overlay" | "container" | "dragHandle" | "header" | "title" | "content" | "actions", ComponentStyleFunction<string, string>>;
240
249
  Field?: ComponentStyleFunction<string, string>;
241
250
  Headline?: ComponentStyleFunction<string, string>;
242
251
  Popover?: ComponentStyleFunction<string, string>;
@@ -259,19 +268,24 @@ declare const extendTheme: (newStyles: StylesProps, theme: Theme) => {
259
268
  Select?: Record<"select" | "icon", ComponentStyleFunction<string, string>>;
260
269
  NumberField?: Record<"group" | "stepper" | "input", ComponentStyleFunction<string, string>>;
261
270
  SectionMessage?: Record<"container" | "icon" | "title" | "content" | "close", ComponentStyleFunction<string, string>>;
262
- Table?: Record<"table" | "headerRow" | "header" | "thead" | "body" | "row" | "cell", ComponentStyleFunction<string, string>>;
271
+ Table?: Record<"table" | "head" | "column" | "body" | "row" | "cell" | "dragHandle" | "dragPreview" | "dragPreviewCounter" | "dropIndicator" | "editablePopover" | "editTrigger" | "editCancel" | "editSave", ComponentStyleFunction<string, string>>;
272
+ LegacyTable?: Record<"table" | "headerRow" | "header" | "thead" | "body" | "row" | "cell", ComponentStyleFunction<string, string>>;
263
273
  Tag?: Record<"container" | "tag" | "listItems" | "closeButton" | "removeAll", ComponentStyleFunction<string, string>>;
274
+ TagField?: Record<"trigger" | "tagGroup" | "listItems" | "button" | "container", ComponentStyleFunction<string, string>>;
264
275
  Text?: ComponentStyleFunction<string, string>;
265
276
  TextArea?: ComponentStyleFunction<string, string>;
266
277
  Tooltip?: Record<"container" | "arrow", ComponentStyleFunction<string, string>>;
267
278
  Toast?: Record<"toast" | "title" | "description" | "closeButton" | "icon" | "content" | "bottom-left" | "bottom-right" | "top-left" | "top-right" | "top" | "bottom" | "action", ComponentStyleFunction<string, string>>;
268
279
  Tabs?: Record<"container" | "tabsList" | "tabpanel" | "tab", ComponentStyleFunction<string, string>>;
269
280
  Underlay?: ComponentStyleFunction<string, string>;
270
- Calendar?: Record<"calendar" | "calendarListboxButton" | "calendarCell" | "calendarControllers" | "calendarHeader" | "calendarGrid" | "select", ComponentStyleFunction<string, string>>;
281
+ Calendar?: Record<"calendar" | "calendarContainer" | "calendarMonth" | "calendarListboxButton" | "calendarCell" | "calendarControllers" | "calendarHeader" | "calendarGrid" | "select", ComponentStyleFunction<string, string>>;
271
282
  DatePicker?: ComponentStyleFunction<string, string>;
272
- ComboBox?: ComponentStyleFunction<string, string>;
283
+ ComboBox?: Record<"icon" | "mobileTrigger", ComponentStyleFunction<string, string>>;
284
+ Autocomplete?: Record<"mobileTrigger", ComponentStyleFunction<string, string>>;
273
285
  Loader?: Record<"container" | "loader" | "label", ComponentStyleFunction<string, string>>;
274
- FileField?: Record<"container" | "dropZone" | "dropZoneContent" | "dropZoneLabel" | "item" | "itemLabel" | "itemDescription", ComponentStyleFunction<string, string>>;
286
+ FileField?: Record<"container" | "dropZone" | "dropZoneContent" | "dropZoneLabel" | "item" | "itemLabel" | "itemDescription" | "itemRemove", ComponentStyleFunction<string, string>>;
287
+ EmptyState?: Record<"container" | "title" | "description" | "action", ComponentStyleFunction<string, string>>;
288
+ ToggleButton?: Record<"group" | "button", ComponentStyleFunction<string, string>>;
275
289
  };
276
290
  name: string;
277
291
  screens?: {
@@ -283,6 +297,17 @@ declare const extendTheme: (newStyles: StylesProps, theme: Theme) => {
283
297
  root?: ComponentStyleFunction;
284
298
  };
285
299
  //#endregion
300
+ //#region src/types/tokens.d.ts
301
+ /**
302
+ * Semantic spacing tokens that describe the strength of the relationship between elements.
303
+ *
304
+ * The tighter the space, the stronger the relationship. These tokens follow a relational
305
+ * scale where naming reflects the cognitive connection between objects rather than
306
+ * arbitrary pixel values, allowing interfaces to adapt gracefully across different
307
+ * contexts and density settings.
308
+ */
309
+ type SpacingTokens = 'joined' | 'tight' | 'related' | 'peer' | 'group' | 'section' | 'context';
310
+ //#endregion
286
311
  //#region src/defaultTheme.d.ts
287
312
  declare const defaultTheme: {
288
313
  name: string;
@@ -307,6 +332,13 @@ declare const defaultTheme: {
307
332
  * @returns `true` if the string is a valid scale value, otherwise `false`.
308
333
  */
309
334
  declare const isScale: (value: string) => boolean;
335
+ /**
336
+ * Checks if a value represents a fraction (e.g., "1/2", "2/3").
337
+ *
338
+ * @param value - The string to test for fraction format.
339
+ * @returns `true` if the string is a valid fraction, otherwise `false`.
340
+ */
341
+ declare const isFraction: (value: string) => boolean;
310
342
  /**
311
343
  * Represents the numeric values found in the default Tailwind CSS spacing scale.
312
344
  *
@@ -365,6 +397,21 @@ declare const createVar: (o: {
365
397
  * @returns Object with the CSS custom property for spacing.
366
398
  */
367
399
  declare const createSpacingVar: (name: string, value: string) => CSSProperties;
400
+ /**
401
+ * Generates a CSS custom property for width that uses either a calc expression or a
402
+ * fraction percentage.
403
+ *
404
+ * Supports:
405
+ * - Numeric scale (e.g., "4", "2.5"): Uses `--spacing` scale with calc() → `w-4`, `w-2.5`
406
+ * - Fractions (e.g., "1/2", "2/3"): Converts to percentage → `w-1/2`, `w-2/3`
407
+ * - CSS keywords (e.g., "fit", "min", "max"): Uses corresponding CSS values → `w-fit`, `w-min`, `w-max`
408
+ *
409
+ * @param name - The custom property name for width.
410
+ * @param value - Width value as a string (number, fraction, or keyword).
411
+ * @returns Object with the CSS custom property for width.
412
+ *
413
+ */
414
+ declare const createWidthVar: (name: string, value: string) => CSSProperties;
368
415
  //#endregion
369
416
  //#region src/style-props.d.ts
370
417
  declare const width: {
@@ -626,6 +673,14 @@ declare const whiteSpace: {
626
673
  preWrap: string;
627
674
  breakSpaces: string;
628
675
  };
676
+ declare const lineHeight: {
677
+ readonly none: "leading-none";
678
+ readonly tight: "leading-tight";
679
+ readonly snug: "leading-snug";
680
+ readonly normal: "leading-normal";
681
+ readonly relaxed: "leading-relaxed";
682
+ readonly loose: "leading-loose";
683
+ };
629
684
  declare const gapSpace: {
630
685
  readonly 0: "gap-0";
631
686
  readonly '0.5': "gap-0.5";
@@ -964,11 +1019,16 @@ declare const placeItems: {
964
1019
  readonly right: "place-items-end";
965
1020
  };
966
1021
  declare const textAlign: {
967
- readonly none: undefined;
968
1022
  readonly left: "text-left";
969
1023
  readonly center: "text-center";
970
1024
  readonly right: "text-right";
971
1025
  };
1026
+ declare const verticalAlign: {
1027
+ readonly top: "align-top";
1028
+ readonly middle: "align-middle";
1029
+ readonly bottom: "align-bottom";
1030
+ readonly baseline: "align-baseline";
1031
+ };
972
1032
  declare const aspect: {
973
1033
  readonly square: "aspect-[1]";
974
1034
  readonly landscape: "aspect-4/3";
@@ -1043,6 +1103,12 @@ type WhiteSpaceProps = {
1043
1103
  */
1044
1104
  whiteSpace?: keyof typeof whiteSpace;
1045
1105
  };
1106
+ type LineHeightProp = {
1107
+ /**
1108
+ * Set the line height for the text element.
1109
+ */
1110
+ lineHeight?: keyof typeof lineHeight;
1111
+ };
1046
1112
  type FontWeightProp = {
1047
1113
  /**
1048
1114
  * Set the font weight for the text element. You can see allowed tokens [here](../../foundations/design-tokens?theme=core#typography).
@@ -1115,6 +1181,12 @@ type TextAlignProp = {
1115
1181
  */
1116
1182
  align?: keyof typeof textAlign;
1117
1183
  };
1184
+ type VerticalAlignProp = {
1185
+ /**
1186
+ * Set the vertical alignment for the element.
1187
+ */
1188
+ verticalAlign?: keyof typeof verticalAlign;
1189
+ };
1118
1190
  type WidthProp = {
1119
1191
  /**
1120
1192
  * Sets the width of the element. You can see allowed tokens [here](https://tailwindcss.com/docs/width).
@@ -1155,4 +1227,4 @@ type SpaceProp<T extends string = ''> = {
1155
1227
  */
1156
1228
  declare const get: (obj: object, path: string, fallback?: any) => any;
1157
1229
  //#endregion
1158
- export { type AlignmentProp, type AspectProp, type ClassValue, type ComponentClassNames, type ComponentNames, type ComponentState, type ComponentStyleFunction, type Config, type ConfigSchema, type ConfigVariants, type ConfigVariantsMulti, type CursorProp, DateFormat, type FontSizeProp, type FontStyleProp, type FontWeightProp, type GapSpaceProp, type HeightProp, type MaxWidthProp, type NestedStringObject, type NumerFormatterOptions, NumericFormat, type PaddingBottomProp, type PaddingLeftProp, type PaddingRightProp, type PaddingSpaceProp, type PaddingSpacePropX, type PaddingSpacePropY, type PaddingTopProp, type PlaceItemsProp, type Props, SVG, type SVGProps, type Scale, type ScaleValue, type SpaceProp, type StateAttrKeyProps, type StateAttrProps, type StylesProps, type TextAlignProp, type TextWrapProp, type Theme, type ThemeComponent, type ThemeComponentParts, ThemeProvider, type ThemeProviderProps, type UseClassNamesProps, type UseStateProps, type VariantProps, type WhiteSpaceProps, type WidthProp, alignment, aspect, cn, createSpacingVar, createVar, cursorStyle, cva, defaultTheme, ensureCssVar, extendTheme, fontWeight, gapSpace, get, height, isScale, isValidCssCustomPropertyName, maxWidth, paddingBottom, paddingLeft, paddingRight, paddingSpace, paddingSpaceX, paddingSpaceY, paddingTop, placeItems, textAlign, textSize, textStyle, textWrap, useClassNames, useResponsiveValue, useSmallScreen, useStateProps, useTheme, whiteSpace, width };
1230
+ export { type AlignmentProp, type AspectProp, type ClassValue, type ComponentClassNames, type ComponentNames, type ComponentState, type ComponentStyleFunction, type Config, type ConfigSchema, type ConfigVariants, type ConfigVariantsMulti, type CursorProp, DateFormat, type DateFormatProps, type FontSizeProp, type FontStyleProp, type FontWeightProp, type GapSpaceProp, type HeightProp, type LineHeightProp, type MaxWidthProp, type NestedStringObject, type NumerFormatterOptions, NumericFormat, type NumericFormatProps, type PaddingBottomProp, type PaddingLeftProp, type PaddingRightProp, type PaddingSpaceProp, type PaddingSpacePropX, type PaddingSpacePropY, type PaddingTopProp, type PlaceItemsProp, type Props, SVG, type SVGProps, type Scale, type ScaleValue, type SpaceProp, type SpacingTokens, type StateAttrKeyProps, type StateAttrProps, type StylesProps, type TextAlignProp, type TextWrapProp, type Theme, type ThemeComponent, type ThemeComponentParts, ThemeProvider, type ThemeProviderProps, type UseClassNamesProps, type UseStateProps, type VariantProps, type VerticalAlignProp, type WhiteSpaceProps, type WidthProp, alignment, aspect, cn, createSpacingVar, createVar, createWidthVar, cursorStyle, cva, defaultTheme, ensureCssVar, extendTheme, fontWeight, gapSpace, get, height, isFraction, isScale, isValidCssCustomPropertyName, lineHeight, maxWidth, paddingBottom, paddingLeft, paddingRight, paddingSpace, paddingSpaceX, paddingSpaceY, paddingTop, placeItems, textAlign, textSize, textStyle, textWrap, useClassNames, useResponsiveValue, useSmallScreen, useStateProps, useTheme, verticalAlign, whiteSpace, width };
package/dist/index.d.mts CHANGED
@@ -102,17 +102,19 @@ type Theme = {
102
102
  root?: ComponentStyleFunction;
103
103
  components: {
104
104
  Accordion?: Record<'container' | 'item' | 'header' | 'panel' | 'content' | 'icon', ComponentStyleFunction<string, string>>;
105
+ ActionBar?: Record<'container' | 'count' | 'actions' | 'clearButton', ComponentStyleFunction<string, string>>;
105
106
  Badge?: ComponentStyleFunction<string, string>;
106
107
  Breadcrumbs?: Record<'container' | 'item' | 'link' | 'current', ComponentStyleFunction<string, string>>;
107
108
  Button?: ComponentStyleFunction<string, string>;
108
109
  Card?: ComponentStyleFunction<string, string>;
109
110
  CloseButton?: ComponentStyleFunction<string, string>;
110
111
  Collapsible?: Record<'container' | 'trigger' | 'content', ComponentStyleFunction<string, string>>;
111
- ContextualHelp?: Record<'trigger' | 'popover' | 'container' | 'title' | 'content', ComponentStyleFunction<string, string>>;
112
- DateField?: Record<'segment' | 'field' | 'action', ComponentStyleFunction<string, string>>;
112
+ ContextualHelp?: Record<'trigger' | 'container' | 'title' | 'content', ComponentStyleFunction<string, string>>;
113
+ DateField?: Record<'segment' | 'field' | 'input' | 'action', ComponentStyleFunction<string, string>>;
113
114
  Dialog?: Record<'closeButton' | 'container' | 'header' | 'content' | 'actions' | 'title', ComponentStyleFunction<string, string>>;
114
115
  Divider?: ComponentStyleFunction<string, string>;
115
116
  Drawer?: Record<'overlay' | 'closeButton' | 'container' | 'header' | 'title' | 'content' | 'actions', ComponentStyleFunction<string, string>>;
117
+ Tray?: Record<'overlay' | 'container' | 'dragHandle' | 'header' | 'title' | 'content' | 'actions', ComponentStyleFunction<string, string>>;
116
118
  Field?: ComponentStyleFunction<string, string>;
117
119
  Headline?: ComponentStyleFunction<string, string>;
118
120
  Popover?: ComponentStyleFunction<string, string>;
@@ -135,19 +137,24 @@ type Theme = {
135
137
  Select?: Record<'select' | 'icon', ComponentStyleFunction<string, string>>;
136
138
  NumberField?: Record<'group' | 'stepper' | 'input', ComponentStyleFunction<string, string>>;
137
139
  SectionMessage?: Record<'container' | 'icon' | 'title' | 'content' | 'close', ComponentStyleFunction<string, string>>;
138
- Table?: Record<'table' | 'headerRow' | 'header' | 'thead' | 'body' | 'row' | 'cell', ComponentStyleFunction<string, string>>;
140
+ Table?: Record<'table' | 'head' | 'column' | 'body' | 'row' | 'cell' | 'dragHandle' | 'dragPreview' | 'dragPreviewCounter' | 'dropIndicator' | 'editablePopover' | 'editTrigger' | 'editCancel' | 'editSave', ComponentStyleFunction<string, string>>;
141
+ LegacyTable?: Record<'table' | 'headerRow' | 'header' | 'thead' | 'body' | 'row' | 'cell', ComponentStyleFunction<string, string>>;
139
142
  Tag?: Record<'container' | 'tag' | 'listItems' | 'closeButton' | 'removeAll', ComponentStyleFunction<string, string>>;
143
+ TagField?: Record<'trigger' | 'tagGroup' | 'listItems' | 'button' | 'container', ComponentStyleFunction<string, string>>;
140
144
  Text?: ComponentStyleFunction<string, string>;
141
145
  TextArea?: ComponentStyleFunction<string, string>;
142
146
  Tooltip?: Record<'container' | 'arrow', ComponentStyleFunction<string, string>>;
143
147
  Toast?: Record<'toast' | 'title' | 'description' | 'closeButton' | 'icon' | 'content' | 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' | 'top' | 'bottom' | 'action', ComponentStyleFunction<string, string>>;
144
148
  Tabs?: Record<'container' | 'tabsList' | 'tabpanel' | 'tab', ComponentStyleFunction<string, string>>;
145
149
  Underlay?: ComponentStyleFunction<string, string>;
146
- Calendar?: Record<'calendar' | 'calendarListboxButton' | 'calendarCell' | 'calendarControllers' | 'calendarHeader' | 'calendarGrid' | 'select', ComponentStyleFunction<string, string>>;
150
+ Calendar?: Record<'calendar' | 'calendarContainer' | 'calendarMonth' | 'calendarListboxButton' | 'calendarCell' | 'calendarControllers' | 'calendarHeader' | 'calendarGrid' | 'select', ComponentStyleFunction<string, string>>;
147
151
  DatePicker?: ComponentStyleFunction<string, string>;
148
- ComboBox?: ComponentStyleFunction<string, string>;
152
+ ComboBox?: Record<'icon' | 'mobileTrigger', ComponentStyleFunction<string, string>>;
153
+ Autocomplete?: Record<'mobileTrigger', ComponentStyleFunction<string, string>>;
149
154
  Loader?: Record<'container' | 'loader' | 'label', ComponentStyleFunction<string, string>>;
150
- FileField?: Record<'container' | 'dropZone' | 'dropZoneContent' | 'dropZoneLabel' | 'item' | 'itemLabel' | 'itemDescription', ComponentStyleFunction<string, string>>;
155
+ FileField?: Record<'container' | 'dropZone' | 'dropZoneContent' | 'dropZoneLabel' | 'item' | 'itemLabel' | 'itemDescription' | 'itemRemove', ComponentStyleFunction<string, string>>;
156
+ EmptyState?: Record<'container' | 'title' | 'description' | 'action', ComponentStyleFunction<string, string>>;
157
+ ToggleButton?: Record<'group' | 'button', ComponentStyleFunction<string, string>>;
151
158
  };
152
159
  };
153
160
  type ComponentNames = keyof Theme['components'];
@@ -226,17 +233,19 @@ type StylesProps = { [K in keyof Theme['components']]: Partial<Theme['components
226
233
  declare const extendTheme: (newStyles: StylesProps, theme: Theme) => {
227
234
  components: {
228
235
  Accordion?: Record<"container" | "item" | "header" | "panel" | "content" | "icon", ComponentStyleFunction<string, string>>;
236
+ ActionBar?: Record<"container" | "count" | "actions" | "clearButton", ComponentStyleFunction<string, string>>;
229
237
  Badge?: ComponentStyleFunction<string, string>;
230
238
  Breadcrumbs?: Record<"container" | "item" | "link" | "current", ComponentStyleFunction<string, string>>;
231
239
  Button?: ComponentStyleFunction<string, string>;
232
240
  Card?: ComponentStyleFunction<string, string>;
233
241
  CloseButton?: ComponentStyleFunction<string, string>;
234
242
  Collapsible?: Record<"container" | "trigger" | "content", ComponentStyleFunction<string, string>>;
235
- ContextualHelp?: Record<"trigger" | "popover" | "container" | "title" | "content", ComponentStyleFunction<string, string>>;
236
- DateField?: Record<"segment" | "field" | "action", ComponentStyleFunction<string, string>>;
243
+ ContextualHelp?: Record<"trigger" | "container" | "title" | "content", ComponentStyleFunction<string, string>>;
244
+ DateField?: Record<"segment" | "field" | "input" | "action", ComponentStyleFunction<string, string>>;
237
245
  Dialog?: Record<"closeButton" | "container" | "header" | "content" | "actions" | "title", ComponentStyleFunction<string, string>>;
238
246
  Divider?: ComponentStyleFunction<string, string>;
239
247
  Drawer?: Record<"overlay" | "closeButton" | "container" | "header" | "title" | "content" | "actions", ComponentStyleFunction<string, string>>;
248
+ Tray?: Record<"overlay" | "container" | "dragHandle" | "header" | "title" | "content" | "actions", ComponentStyleFunction<string, string>>;
240
249
  Field?: ComponentStyleFunction<string, string>;
241
250
  Headline?: ComponentStyleFunction<string, string>;
242
251
  Popover?: ComponentStyleFunction<string, string>;
@@ -259,19 +268,24 @@ declare const extendTheme: (newStyles: StylesProps, theme: Theme) => {
259
268
  Select?: Record<"select" | "icon", ComponentStyleFunction<string, string>>;
260
269
  NumberField?: Record<"group" | "stepper" | "input", ComponentStyleFunction<string, string>>;
261
270
  SectionMessage?: Record<"container" | "icon" | "title" | "content" | "close", ComponentStyleFunction<string, string>>;
262
- Table?: Record<"table" | "headerRow" | "header" | "thead" | "body" | "row" | "cell", ComponentStyleFunction<string, string>>;
271
+ Table?: Record<"table" | "head" | "column" | "body" | "row" | "cell" | "dragHandle" | "dragPreview" | "dragPreviewCounter" | "dropIndicator" | "editablePopover" | "editTrigger" | "editCancel" | "editSave", ComponentStyleFunction<string, string>>;
272
+ LegacyTable?: Record<"table" | "headerRow" | "header" | "thead" | "body" | "row" | "cell", ComponentStyleFunction<string, string>>;
263
273
  Tag?: Record<"container" | "tag" | "listItems" | "closeButton" | "removeAll", ComponentStyleFunction<string, string>>;
274
+ TagField?: Record<"trigger" | "tagGroup" | "listItems" | "button" | "container", ComponentStyleFunction<string, string>>;
264
275
  Text?: ComponentStyleFunction<string, string>;
265
276
  TextArea?: ComponentStyleFunction<string, string>;
266
277
  Tooltip?: Record<"container" | "arrow", ComponentStyleFunction<string, string>>;
267
278
  Toast?: Record<"toast" | "title" | "description" | "closeButton" | "icon" | "content" | "bottom-left" | "bottom-right" | "top-left" | "top-right" | "top" | "bottom" | "action", ComponentStyleFunction<string, string>>;
268
279
  Tabs?: Record<"container" | "tabsList" | "tabpanel" | "tab", ComponentStyleFunction<string, string>>;
269
280
  Underlay?: ComponentStyleFunction<string, string>;
270
- Calendar?: Record<"calendar" | "calendarListboxButton" | "calendarCell" | "calendarControllers" | "calendarHeader" | "calendarGrid" | "select", ComponentStyleFunction<string, string>>;
281
+ Calendar?: Record<"calendar" | "calendarContainer" | "calendarMonth" | "calendarListboxButton" | "calendarCell" | "calendarControllers" | "calendarHeader" | "calendarGrid" | "select", ComponentStyleFunction<string, string>>;
271
282
  DatePicker?: ComponentStyleFunction<string, string>;
272
- ComboBox?: ComponentStyleFunction<string, string>;
283
+ ComboBox?: Record<"icon" | "mobileTrigger", ComponentStyleFunction<string, string>>;
284
+ Autocomplete?: Record<"mobileTrigger", ComponentStyleFunction<string, string>>;
273
285
  Loader?: Record<"container" | "loader" | "label", ComponentStyleFunction<string, string>>;
274
- FileField?: Record<"container" | "dropZone" | "dropZoneContent" | "dropZoneLabel" | "item" | "itemLabel" | "itemDescription", ComponentStyleFunction<string, string>>;
286
+ FileField?: Record<"container" | "dropZone" | "dropZoneContent" | "dropZoneLabel" | "item" | "itemLabel" | "itemDescription" | "itemRemove", ComponentStyleFunction<string, string>>;
287
+ EmptyState?: Record<"container" | "title" | "description" | "action", ComponentStyleFunction<string, string>>;
288
+ ToggleButton?: Record<"group" | "button", ComponentStyleFunction<string, string>>;
275
289
  };
276
290
  name: string;
277
291
  screens?: {
@@ -283,6 +297,17 @@ declare const extendTheme: (newStyles: StylesProps, theme: Theme) => {
283
297
  root?: ComponentStyleFunction;
284
298
  };
285
299
  //#endregion
300
+ //#region src/types/tokens.d.ts
301
+ /**
302
+ * Semantic spacing tokens that describe the strength of the relationship between elements.
303
+ *
304
+ * The tighter the space, the stronger the relationship. These tokens follow a relational
305
+ * scale where naming reflects the cognitive connection between objects rather than
306
+ * arbitrary pixel values, allowing interfaces to adapt gracefully across different
307
+ * contexts and density settings.
308
+ */
309
+ type SpacingTokens = 'joined' | 'tight' | 'related' | 'peer' | 'group' | 'section' | 'context';
310
+ //#endregion
286
311
  //#region src/defaultTheme.d.ts
287
312
  declare const defaultTheme: {
288
313
  name: string;
@@ -307,6 +332,13 @@ declare const defaultTheme: {
307
332
  * @returns `true` if the string is a valid scale value, otherwise `false`.
308
333
  */
309
334
  declare const isScale: (value: string) => boolean;
335
+ /**
336
+ * Checks if a value represents a fraction (e.g., "1/2", "2/3").
337
+ *
338
+ * @param value - The string to test for fraction format.
339
+ * @returns `true` if the string is a valid fraction, otherwise `false`.
340
+ */
341
+ declare const isFraction: (value: string) => boolean;
310
342
  /**
311
343
  * Represents the numeric values found in the default Tailwind CSS spacing scale.
312
344
  *
@@ -365,6 +397,21 @@ declare const createVar: (o: {
365
397
  * @returns Object with the CSS custom property for spacing.
366
398
  */
367
399
  declare const createSpacingVar: (name: string, value: string) => CSSProperties;
400
+ /**
401
+ * Generates a CSS custom property for width that uses either a calc expression or a
402
+ * fraction percentage.
403
+ *
404
+ * Supports:
405
+ * - Numeric scale (e.g., "4", "2.5"): Uses `--spacing` scale with calc() → `w-4`, `w-2.5`
406
+ * - Fractions (e.g., "1/2", "2/3"): Converts to percentage → `w-1/2`, `w-2/3`
407
+ * - CSS keywords (e.g., "fit", "min", "max"): Uses corresponding CSS values → `w-fit`, `w-min`, `w-max`
408
+ *
409
+ * @param name - The custom property name for width.
410
+ * @param value - Width value as a string (number, fraction, or keyword).
411
+ * @returns Object with the CSS custom property for width.
412
+ *
413
+ */
414
+ declare const createWidthVar: (name: string, value: string) => CSSProperties;
368
415
  //#endregion
369
416
  //#region src/style-props.d.ts
370
417
  declare const width: {
@@ -626,6 +673,14 @@ declare const whiteSpace: {
626
673
  preWrap: string;
627
674
  breakSpaces: string;
628
675
  };
676
+ declare const lineHeight: {
677
+ readonly none: "leading-none";
678
+ readonly tight: "leading-tight";
679
+ readonly snug: "leading-snug";
680
+ readonly normal: "leading-normal";
681
+ readonly relaxed: "leading-relaxed";
682
+ readonly loose: "leading-loose";
683
+ };
629
684
  declare const gapSpace: {
630
685
  readonly 0: "gap-0";
631
686
  readonly '0.5': "gap-0.5";
@@ -964,11 +1019,16 @@ declare const placeItems: {
964
1019
  readonly right: "place-items-end";
965
1020
  };
966
1021
  declare const textAlign: {
967
- readonly none: undefined;
968
1022
  readonly left: "text-left";
969
1023
  readonly center: "text-center";
970
1024
  readonly right: "text-right";
971
1025
  };
1026
+ declare const verticalAlign: {
1027
+ readonly top: "align-top";
1028
+ readonly middle: "align-middle";
1029
+ readonly bottom: "align-bottom";
1030
+ readonly baseline: "align-baseline";
1031
+ };
972
1032
  declare const aspect: {
973
1033
  readonly square: "aspect-[1]";
974
1034
  readonly landscape: "aspect-4/3";
@@ -1043,6 +1103,12 @@ type WhiteSpaceProps = {
1043
1103
  */
1044
1104
  whiteSpace?: keyof typeof whiteSpace;
1045
1105
  };
1106
+ type LineHeightProp = {
1107
+ /**
1108
+ * Set the line height for the text element.
1109
+ */
1110
+ lineHeight?: keyof typeof lineHeight;
1111
+ };
1046
1112
  type FontWeightProp = {
1047
1113
  /**
1048
1114
  * Set the font weight for the text element. You can see allowed tokens [here](../../foundations/design-tokens?theme=core#typography).
@@ -1115,6 +1181,12 @@ type TextAlignProp = {
1115
1181
  */
1116
1182
  align?: keyof typeof textAlign;
1117
1183
  };
1184
+ type VerticalAlignProp = {
1185
+ /**
1186
+ * Set the vertical alignment for the element.
1187
+ */
1188
+ verticalAlign?: keyof typeof verticalAlign;
1189
+ };
1118
1190
  type WidthProp = {
1119
1191
  /**
1120
1192
  * Sets the width of the element. You can see allowed tokens [here](https://tailwindcss.com/docs/width).
@@ -1155,4 +1227,4 @@ type SpaceProp<T extends string = ''> = {
1155
1227
  */
1156
1228
  declare const get: (obj: object, path: string, fallback?: any) => any;
1157
1229
  //#endregion
1158
- export { type AlignmentProp, type AspectProp, type ClassValue, type ComponentClassNames, type ComponentNames, type ComponentState, type ComponentStyleFunction, type Config, type ConfigSchema, type ConfigVariants, type ConfigVariantsMulti, type CursorProp, DateFormat, type FontSizeProp, type FontStyleProp, type FontWeightProp, type GapSpaceProp, type HeightProp, type MaxWidthProp, type NestedStringObject, type NumerFormatterOptions, NumericFormat, type PaddingBottomProp, type PaddingLeftProp, type PaddingRightProp, type PaddingSpaceProp, type PaddingSpacePropX, type PaddingSpacePropY, type PaddingTopProp, type PlaceItemsProp, type Props, SVG, type SVGProps, type Scale, type ScaleValue, type SpaceProp, type StateAttrKeyProps, type StateAttrProps, type StylesProps, type TextAlignProp, type TextWrapProp, type Theme, type ThemeComponent, type ThemeComponentParts, ThemeProvider, type ThemeProviderProps, type UseClassNamesProps, type UseStateProps, type VariantProps, type WhiteSpaceProps, type WidthProp, alignment, aspect, cn, createSpacingVar, createVar, cursorStyle, cva, defaultTheme, ensureCssVar, extendTheme, fontWeight, gapSpace, get, height, isScale, isValidCssCustomPropertyName, maxWidth, paddingBottom, paddingLeft, paddingRight, paddingSpace, paddingSpaceX, paddingSpaceY, paddingTop, placeItems, textAlign, textSize, textStyle, textWrap, useClassNames, useResponsiveValue, useSmallScreen, useStateProps, useTheme, whiteSpace, width };
1230
+ export { type AlignmentProp, type AspectProp, type ClassValue, type ComponentClassNames, type ComponentNames, type ComponentState, type ComponentStyleFunction, type Config, type ConfigSchema, type ConfigVariants, type ConfigVariantsMulti, type CursorProp, DateFormat, type DateFormatProps, type FontSizeProp, type FontStyleProp, type FontWeightProp, type GapSpaceProp, type HeightProp, type LineHeightProp, type MaxWidthProp, type NestedStringObject, type NumerFormatterOptions, NumericFormat, type NumericFormatProps, type PaddingBottomProp, type PaddingLeftProp, type PaddingRightProp, type PaddingSpaceProp, type PaddingSpacePropX, type PaddingSpacePropY, type PaddingTopProp, type PlaceItemsProp, type Props, SVG, type SVGProps, type Scale, type ScaleValue, type SpaceProp, type SpacingTokens, type StateAttrKeyProps, type StateAttrProps, type StylesProps, type TextAlignProp, type TextWrapProp, type Theme, type ThemeComponent, type ThemeComponentParts, ThemeProvider, type ThemeProviderProps, type UseClassNamesProps, type UseStateProps, type VariantProps, type VerticalAlignProp, type WhiteSpaceProps, type WidthProp, alignment, aspect, cn, createSpacingVar, createVar, createWidthVar, cursorStyle, cva, defaultTheme, ensureCssVar, extendTheme, fontWeight, gapSpace, get, height, isFraction, isScale, isValidCssCustomPropertyName, lineHeight, maxWidth, paddingBottom, paddingLeft, paddingRight, paddingSpace, paddingSpaceX, paddingSpaceY, paddingTop, placeItems, textAlign, textSize, textStyle, textWrap, useClassNames, useResponsiveValue, useSmallScreen, useStateProps, useTheme, verticalAlign, whiteSpace, width };
package/dist/index.mjs CHANGED
@@ -27,6 +27,13 @@ const cn = (...inputs) => twMerge(cx(inputs));
27
27
  */
28
28
  const isScale = (value) => /^[0-9]+(\.[0-9]+)?$/.test(value);
29
29
  /**
30
+ * Checks if a value represents a fraction (e.g., "1/2", "2/3").
31
+ *
32
+ * @param value - The string to test for fraction format.
33
+ * @returns `true` if the string is a valid fraction, otherwise `false`.
34
+ */
35
+ const isFraction = (value) => /^[0-9]+\/[0-9]+$/.test(value);
36
+ /**
30
37
  * Checks if a given string is a valid CSS custom property name (without the leading `--`).
31
38
  *
32
39
  * This simplified check ensures:
@@ -66,6 +73,33 @@ const createVar = (o) => Object.fromEntries(Object.entries(o).map(([name, val])
66
73
  const createSpacingVar = (name, value) => {
67
74
  return { [`--${name}`]: isScale(value) ? `calc(var(--spacing) * ${value})` : `var(--spacing-${value})` };
68
75
  };
76
+ /**
77
+ * Generates a CSS custom property for width that uses either a calc expression or a
78
+ * fraction percentage.
79
+ *
80
+ * Supports:
81
+ * - Numeric scale (e.g., "4", "2.5"): Uses `--spacing` scale with calc() → `w-4`, `w-2.5`
82
+ * - Fractions (e.g., "1/2", "2/3"): Converts to percentage → `w-1/2`, `w-2/3`
83
+ * - CSS keywords (e.g., "fit", "min", "max"): Uses corresponding CSS values → `w-fit`, `w-min`, `w-max`
84
+ *
85
+ * @param name - The custom property name for width.
86
+ * @param value - Width value as a string (number, fraction, or keyword).
87
+ * @returns Object with the CSS custom property for width.
88
+ *
89
+ */
90
+ const createWidthVar = (name, value) => {
91
+ const widthKeywords = {
92
+ fit: "fit-content",
93
+ min: "min-content",
94
+ max: "max-content",
95
+ full: "100%",
96
+ screen: "100vw",
97
+ auto: "auto"
98
+ };
99
+ const resolvedValue = widthKeywords[value] || isScale(value) && `calc(var(--spacing) * ${value})` || isFraction(value) && `calc((${value.split("/").join(" / ")}) * 100%)`;
100
+ if (!resolvedValue) throw new Error(`Unsupported width value: "${value}". Expected a keyword (${Object.keys(widthKeywords).join(", ")}), a scale number, or a fraction (e.g., "1/2").`);
101
+ return { [`--${name}`]: resolvedValue };
102
+ };
69
103
 
70
104
  //#endregion
71
105
  //#region src/components/SVG/SVG.tsx
@@ -539,6 +573,14 @@ const whiteSpace = {
539
573
  preWrap: "whitespace-pre-wrap",
540
574
  breakSpaces: "whitespace-break-spaces"
541
575
  };
576
+ const lineHeight = {
577
+ none: "leading-none",
578
+ tight: "leading-tight",
579
+ snug: "leading-snug",
580
+ normal: "leading-normal",
581
+ relaxed: "leading-relaxed",
582
+ loose: "leading-loose"
583
+ };
542
584
  const gapSpace = {
543
585
  0: "gap-0",
544
586
  "0.5": "gap-0.5",
@@ -877,11 +919,16 @@ const placeItems = {
877
919
  right: "place-items-end"
878
920
  };
879
921
  const textAlign = {
880
- none: void 0,
881
922
  left: "text-left",
882
923
  center: "text-center",
883
924
  right: "text-right"
884
925
  };
926
+ const verticalAlign = {
927
+ top: "align-top",
928
+ middle: "align-middle",
929
+ bottom: "align-bottom",
930
+ baseline: "align-baseline"
931
+ };
885
932
  const aspect = {
886
933
  square: "aspect-[1]",
887
934
  landscape: "aspect-4/3",
@@ -938,4 +985,4 @@ const get = (obj, path, fallback) => {
938
985
  };
939
986
 
940
987
  //#endregion
941
- export { DateFormat, NumericFormat, SVG, ThemeProvider, alignment, aspect, cn, createSpacingVar, createVar, cursorStyle, cva, defaultTheme, ensureCssVar, extendTheme, fontWeight, gapSpace, get, height, isScale, isValidCssCustomPropertyName, maxWidth, paddingBottom, paddingLeft, paddingRight, paddingSpace, paddingSpaceX, paddingSpaceY, paddingTop, placeItems, textAlign, textSize, textStyle, textWrap, useClassNames, useResponsiveValue, useSmallScreen, useStateProps, useTheme, whiteSpace, width };
988
+ export { DateFormat, NumericFormat, SVG, ThemeProvider, alignment, aspect, cn, createSpacingVar, createVar, createWidthVar, cursorStyle, cva, defaultTheme, ensureCssVar, extendTheme, fontWeight, gapSpace, get, height, isFraction, isScale, isValidCssCustomPropertyName, lineHeight, maxWidth, paddingBottom, paddingLeft, paddingRight, paddingSpace, paddingSpaceX, paddingSpaceY, paddingTop, placeItems, textAlign, textSize, textStyle, textWrap, useClassNames, useResponsiveValue, useSmallScreen, useStateProps, useTheme, verticalAlign, whiteSpace, width };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@marigold/system",
3
- "version": "16.1.0",
3
+ "version": "17.0.0",
4
4
  "description": "Marigold System Library",
5
5
  "license": "MIT",
6
6
  "keywords": [
@@ -34,7 +34,7 @@
34
34
  "directory": "packages/system"
35
35
  },
36
36
  "dependencies": {
37
- "@react-aria/i18n": "^3.12.13",
37
+ "@react-aria/i18n": "^3.12.15",
38
38
  "class-variance-authority": "0.7.1",
39
39
  "deepmerge": "4.3.1",
40
40
  "react-fast-compare": "3.2.2",
@@ -46,11 +46,11 @@
46
46
  "react-dom": ">=17.0.0"
47
47
  },
48
48
  "devDependencies": {
49
- "@babel/core": "7.28.5",
50
- "@types/react": "19.2.2",
49
+ "@babel/core": "7.28.6",
50
+ "@types/react": "19.2.7",
51
51
  "postcss": "8.5.6",
52
- "react": "19.2.0",
53
- "tailwindcss": "4.1.17",
52
+ "react": "19.2.3",
53
+ "tailwindcss": "4.1.18",
54
54
  "tsdown": "0.16.8",
55
55
  "@marigold/tsconfig": "0.4.2"
56
56
  },