@marigold/system 7.4.0 → 7.5.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.d.mts +87 -1
  2. package/dist/index.d.ts +87 -1
  3. package/dist/index.js +79 -0
  4. package/dist/index.mjs +78 -0
  5. package/package.json +2 -2
package/dist/index.d.mts CHANGED
@@ -181,6 +181,60 @@ declare function ThemeProvider<T extends Theme>({ theme, children, className, }:
181
181
 
182
182
  declare const useSmallScreen: () => boolean;
183
183
 
184
+ type StylesProps = {
185
+ [K in keyof Theme['components']]: Partial<Theme['components'][K]>;
186
+ };
187
+ declare const extendTheme: (newStyles: StylesProps, theme: Theme) => {
188
+ components: {
189
+ Accordion?: Record<"button" | "item", ComponentStyleFunction<string, string, {}>> | undefined;
190
+ Badge?: ComponentStyleFunction<string, string, {}> | undefined;
191
+ Body?: ComponentStyleFunction<string, string, {}> | undefined;
192
+ Button?: ComponentStyleFunction<string, string, {}> | undefined;
193
+ Card?: ComponentStyleFunction<string, string, {}> | undefined;
194
+ DateField?: Record<"segment" | "field" | "action", ComponentStyleFunction<string, string, {}>> | undefined;
195
+ Dialog?: Record<"closeButton" | "container", ComponentStyleFunction<string, string, {}>> | undefined;
196
+ Divider?: ComponentStyleFunction<string, string, {}> | undefined;
197
+ Field?: ComponentStyleFunction<string, string, {}> | undefined;
198
+ Footer?: ComponentStyleFunction<string, string, {}> | undefined;
199
+ Header?: ComponentStyleFunction<string, string, {}> | undefined;
200
+ Headline?: ComponentStyleFunction<string, string, {}> | undefined;
201
+ Popover?: ComponentStyleFunction<string, string, {}> | undefined;
202
+ HelpText?: Record<"container" | "icon", ComponentStyleFunction<string, string, {}>> | undefined;
203
+ Image?: ComponentStyleFunction<string, string, {}> | undefined;
204
+ Checkbox?: Record<"label" | "container" | "checkbox" | "group", ComponentStyleFunction<string, string, {}>> | undefined;
205
+ Switch?: Record<"track" | "container" | "thumb", ComponentStyleFunction<string, string, {}>> | undefined;
206
+ Input?: Record<"input" | "action" | "icon", ComponentStyleFunction<string, string, {}>> | undefined;
207
+ Label?: Record<"container" | "indicator", ComponentStyleFunction<string, string, {}>> | undefined;
208
+ List?: Record<"ol" | "ul" | "item", ComponentStyleFunction<string, string, {}>> | undefined;
209
+ Link?: ComponentStyleFunction<string, string, {}> | undefined;
210
+ ListBox?: Record<"option" | "section" | "container" | "list" | "sectionTitle", ComponentStyleFunction<string, string, {}>> | undefined;
211
+ Menu?: Record<"section" | "item" | "container", ComponentStyleFunction<string, string, {}>> | undefined;
212
+ Radio?: Record<"label" | "container" | "group" | "radio", ComponentStyleFunction<string, string, {}>> | undefined;
213
+ Slider?: Record<"output" | "track" | "container" | "thumb", ComponentStyleFunction<string, string, {}>> | undefined;
214
+ Select?: Record<"select" | "icon", ComponentStyleFunction<string, string, {}>> | undefined;
215
+ NumberField?: Record<"input" | "group" | "stepper", ComponentStyleFunction<string, string, {}>> | undefined;
216
+ Message?: Record<"title" | "container" | "icon" | "content", ComponentStyleFunction<string, string, {}>> | undefined;
217
+ Table?: Record<"header" | "table" | "row" | "cell", ComponentStyleFunction<string, string, {}>> | undefined;
218
+ Tag?: Record<"closeButton" | "tag" | "listItems", ComponentStyleFunction<string, string, {}>> | undefined;
219
+ Text?: ComponentStyleFunction<string, string, {}> | undefined;
220
+ TextArea?: ComponentStyleFunction<string, string, {}> | undefined;
221
+ Tooltip?: Record<"container" | "arrow", ComponentStyleFunction<string, string, {}>> | undefined;
222
+ Tabs?: Record<"container" | "tabsList" | "tabpanel" | "tab", ComponentStyleFunction<string, string, {}>> | undefined;
223
+ Underlay?: ComponentStyleFunction<string, string, {}> | undefined;
224
+ Calendar?: Record<"calendar" | "calendarCell" | "calendarControllers" | "calendarHeader" | "calendarGrid", ComponentStyleFunction<string, string, {}>> | undefined;
225
+ DatePicker?: Record<"button" | "container", ComponentStyleFunction<string, string, {}>> | undefined;
226
+ ComboBox?: ComponentStyleFunction<string, string, {}> | undefined;
227
+ };
228
+ name: string;
229
+ screens?: {
230
+ [key: string]: string;
231
+ } | undefined;
232
+ colors?: NestedStringObject | undefined;
233
+ shadow?: NestedStringObject | undefined;
234
+ height?: NestedStringObject | undefined;
235
+ root?: ComponentStyleFunction<never, never, {}> | undefined;
236
+ };
237
+
184
238
  declare const defaultTheme: {
185
239
  name: string;
186
240
  screens: {
@@ -289,9 +343,13 @@ declare const textStyle: {
289
343
  };
290
344
  declare const gapSpace: {
291
345
  0: string;
346
+ '0.5': string;
292
347
  1: string;
348
+ '1.5': string;
293
349
  2: string;
350
+ '2.5': string;
294
351
  3: string;
352
+ '3.5': string;
295
353
  4: string;
296
354
  5: string;
297
355
  6: string;
@@ -321,9 +379,13 @@ declare const gapSpace: {
321
379
  };
322
380
  declare const paddingSpace: {
323
381
  0: string;
382
+ '0.5': string;
324
383
  1: string;
384
+ '1.5': string;
325
385
  2: string;
386
+ '2.5': string;
326
387
  3: string;
388
+ '3.5': string;
327
389
  4: string;
328
390
  5: string;
329
391
  6: string;
@@ -353,9 +415,13 @@ declare const paddingSpace: {
353
415
  };
354
416
  declare const paddingSpaceX: {
355
417
  0: string;
418
+ '0.5': string;
356
419
  1: string;
420
+ '1.5': string;
357
421
  2: string;
422
+ '2.5': string;
358
423
  3: string;
424
+ '3.5': string;
359
425
  4: string;
360
426
  5: string;
361
427
  6: string;
@@ -385,9 +451,13 @@ declare const paddingSpaceX: {
385
451
  };
386
452
  declare const paddingSpaceY: {
387
453
  0: string;
454
+ '0.5': string;
388
455
  1: string;
456
+ '1.5': string;
389
457
  2: string;
458
+ '2.5': string;
390
459
  3: string;
460
+ '3.5': string;
391
461
  4: string;
392
462
  5: string;
393
463
  6: string;
@@ -417,9 +487,13 @@ declare const paddingSpaceY: {
417
487
  };
418
488
  declare const paddingRight: {
419
489
  0: string;
490
+ '0.5': string;
420
491
  1: string;
492
+ '1.5': string;
421
493
  2: string;
494
+ '2.5': string;
422
495
  3: string;
496
+ '3.5': string;
423
497
  4: string;
424
498
  5: string;
425
499
  6: string;
@@ -449,9 +523,13 @@ declare const paddingRight: {
449
523
  };
450
524
  declare const paddingLeft: {
451
525
  0: string;
526
+ '0.5': string;
452
527
  1: string;
528
+ '1.5': string;
453
529
  2: string;
530
+ '2.5': string;
454
531
  3: string;
532
+ '3.5': string;
455
533
  4: string;
456
534
  5: string;
457
535
  6: string;
@@ -481,9 +559,13 @@ declare const paddingLeft: {
481
559
  };
482
560
  declare const paddingTop: {
483
561
  0: string;
562
+ '0.5': string;
484
563
  1: string;
564
+ '1.5': string;
485
565
  2: string;
566
+ '2.5': string;
486
567
  3: string;
568
+ '3.5': string;
487
569
  4: string;
488
570
  5: string;
489
571
  6: string;
@@ -513,9 +595,13 @@ declare const paddingTop: {
513
595
  };
514
596
  declare const paddingBottom: {
515
597
  0: string;
598
+ '0.5': string;
516
599
  1: string;
600
+ '1.5': string;
517
601
  2: string;
602
+ '2.5': string;
518
603
  3: string;
604
+ '3.5': string;
519
605
  4: string;
520
606
  5: string;
521
607
  6: string;
@@ -722,4 +808,4 @@ type WidthProp = {
722
808
  width?: keyof typeof width;
723
809
  };
724
810
 
725
- export { type AlignmentProp, type AspectProp, type ClassArray, type ClassDictionary, 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 GridColsAlignProp, type GridColumn, type NestedStringObject, NumericFormat, type ObjectFitProp, type ObjectPositionProp, type PaddingBottomProp, type PaddingLeftProp, type PaddingRightProp, type PaddingSpaceProp, type PaddingSpacePropX, type PaddingSpacePropY, type PaddingTopProp, type PlaceItemsProp, type Props, SVG, type SVGProps, type StateAttrKeyProps, type StateAttrProps, type TextAlignProp, type Theme, type ThemeComponent, ThemeProvider, type ThemeProviderProps, type UseClassNamesProps, type UseStateProps, type WidthProp, alignment, aspect, cn, createVar, cursorStyle, cva, defaultTheme, fontWeight, gapSpace, get, getColor, gridColsAlign, gridColumn, isObject, objectFit, objectPosition, paddingBottom, paddingLeft, paddingRight, paddingSpace, paddingSpaceX, paddingSpaceY, paddingTop, placeItems, textAlign, textSize, textStyle, useClassNames, useResponsiveValue, useSmallScreen, useStateProps, useTheme, width };
811
+ export { type AlignmentProp, type AspectProp, type ClassArray, type ClassDictionary, 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 GridColsAlignProp, type GridColumn, type NestedStringObject, NumericFormat, type ObjectFitProp, type ObjectPositionProp, type PaddingBottomProp, type PaddingLeftProp, type PaddingRightProp, type PaddingSpaceProp, type PaddingSpacePropX, type PaddingSpacePropY, type PaddingTopProp, type PlaceItemsProp, type Props, SVG, type SVGProps, type StateAttrKeyProps, type StateAttrProps, type StylesProps, type TextAlignProp, type Theme, type ThemeComponent, ThemeProvider, type ThemeProviderProps, type UseClassNamesProps, type UseStateProps, type WidthProp, alignment, aspect, cn, createVar, cursorStyle, cva, defaultTheme, extendTheme, fontWeight, gapSpace, get, getColor, gridColsAlign, gridColumn, isObject, objectFit, objectPosition, paddingBottom, paddingLeft, paddingRight, paddingSpace, paddingSpaceX, paddingSpaceY, paddingTop, placeItems, textAlign, textSize, textStyle, useClassNames, useResponsiveValue, useSmallScreen, useStateProps, useTheme, width };
package/dist/index.d.ts CHANGED
@@ -181,6 +181,60 @@ declare function ThemeProvider<T extends Theme>({ theme, children, className, }:
181
181
 
182
182
  declare const useSmallScreen: () => boolean;
183
183
 
184
+ type StylesProps = {
185
+ [K in keyof Theme['components']]: Partial<Theme['components'][K]>;
186
+ };
187
+ declare const extendTheme: (newStyles: StylesProps, theme: Theme) => {
188
+ components: {
189
+ Accordion?: Record<"button" | "item", ComponentStyleFunction<string, string, {}>> | undefined;
190
+ Badge?: ComponentStyleFunction<string, string, {}> | undefined;
191
+ Body?: ComponentStyleFunction<string, string, {}> | undefined;
192
+ Button?: ComponentStyleFunction<string, string, {}> | undefined;
193
+ Card?: ComponentStyleFunction<string, string, {}> | undefined;
194
+ DateField?: Record<"segment" | "field" | "action", ComponentStyleFunction<string, string, {}>> | undefined;
195
+ Dialog?: Record<"closeButton" | "container", ComponentStyleFunction<string, string, {}>> | undefined;
196
+ Divider?: ComponentStyleFunction<string, string, {}> | undefined;
197
+ Field?: ComponentStyleFunction<string, string, {}> | undefined;
198
+ Footer?: ComponentStyleFunction<string, string, {}> | undefined;
199
+ Header?: ComponentStyleFunction<string, string, {}> | undefined;
200
+ Headline?: ComponentStyleFunction<string, string, {}> | undefined;
201
+ Popover?: ComponentStyleFunction<string, string, {}> | undefined;
202
+ HelpText?: Record<"container" | "icon", ComponentStyleFunction<string, string, {}>> | undefined;
203
+ Image?: ComponentStyleFunction<string, string, {}> | undefined;
204
+ Checkbox?: Record<"label" | "container" | "checkbox" | "group", ComponentStyleFunction<string, string, {}>> | undefined;
205
+ Switch?: Record<"track" | "container" | "thumb", ComponentStyleFunction<string, string, {}>> | undefined;
206
+ Input?: Record<"input" | "action" | "icon", ComponentStyleFunction<string, string, {}>> | undefined;
207
+ Label?: Record<"container" | "indicator", ComponentStyleFunction<string, string, {}>> | undefined;
208
+ List?: Record<"ol" | "ul" | "item", ComponentStyleFunction<string, string, {}>> | undefined;
209
+ Link?: ComponentStyleFunction<string, string, {}> | undefined;
210
+ ListBox?: Record<"option" | "section" | "container" | "list" | "sectionTitle", ComponentStyleFunction<string, string, {}>> | undefined;
211
+ Menu?: Record<"section" | "item" | "container", ComponentStyleFunction<string, string, {}>> | undefined;
212
+ Radio?: Record<"label" | "container" | "group" | "radio", ComponentStyleFunction<string, string, {}>> | undefined;
213
+ Slider?: Record<"output" | "track" | "container" | "thumb", ComponentStyleFunction<string, string, {}>> | undefined;
214
+ Select?: Record<"select" | "icon", ComponentStyleFunction<string, string, {}>> | undefined;
215
+ NumberField?: Record<"input" | "group" | "stepper", ComponentStyleFunction<string, string, {}>> | undefined;
216
+ Message?: Record<"title" | "container" | "icon" | "content", ComponentStyleFunction<string, string, {}>> | undefined;
217
+ Table?: Record<"header" | "table" | "row" | "cell", ComponentStyleFunction<string, string, {}>> | undefined;
218
+ Tag?: Record<"closeButton" | "tag" | "listItems", ComponentStyleFunction<string, string, {}>> | undefined;
219
+ Text?: ComponentStyleFunction<string, string, {}> | undefined;
220
+ TextArea?: ComponentStyleFunction<string, string, {}> | undefined;
221
+ Tooltip?: Record<"container" | "arrow", ComponentStyleFunction<string, string, {}>> | undefined;
222
+ Tabs?: Record<"container" | "tabsList" | "tabpanel" | "tab", ComponentStyleFunction<string, string, {}>> | undefined;
223
+ Underlay?: ComponentStyleFunction<string, string, {}> | undefined;
224
+ Calendar?: Record<"calendar" | "calendarCell" | "calendarControllers" | "calendarHeader" | "calendarGrid", ComponentStyleFunction<string, string, {}>> | undefined;
225
+ DatePicker?: Record<"button" | "container", ComponentStyleFunction<string, string, {}>> | undefined;
226
+ ComboBox?: ComponentStyleFunction<string, string, {}> | undefined;
227
+ };
228
+ name: string;
229
+ screens?: {
230
+ [key: string]: string;
231
+ } | undefined;
232
+ colors?: NestedStringObject | undefined;
233
+ shadow?: NestedStringObject | undefined;
234
+ height?: NestedStringObject | undefined;
235
+ root?: ComponentStyleFunction<never, never, {}> | undefined;
236
+ };
237
+
184
238
  declare const defaultTheme: {
185
239
  name: string;
186
240
  screens: {
@@ -289,9 +343,13 @@ declare const textStyle: {
289
343
  };
290
344
  declare const gapSpace: {
291
345
  0: string;
346
+ '0.5': string;
292
347
  1: string;
348
+ '1.5': string;
293
349
  2: string;
350
+ '2.5': string;
294
351
  3: string;
352
+ '3.5': string;
295
353
  4: string;
296
354
  5: string;
297
355
  6: string;
@@ -321,9 +379,13 @@ declare const gapSpace: {
321
379
  };
322
380
  declare const paddingSpace: {
323
381
  0: string;
382
+ '0.5': string;
324
383
  1: string;
384
+ '1.5': string;
325
385
  2: string;
386
+ '2.5': string;
326
387
  3: string;
388
+ '3.5': string;
327
389
  4: string;
328
390
  5: string;
329
391
  6: string;
@@ -353,9 +415,13 @@ declare const paddingSpace: {
353
415
  };
354
416
  declare const paddingSpaceX: {
355
417
  0: string;
418
+ '0.5': string;
356
419
  1: string;
420
+ '1.5': string;
357
421
  2: string;
422
+ '2.5': string;
358
423
  3: string;
424
+ '3.5': string;
359
425
  4: string;
360
426
  5: string;
361
427
  6: string;
@@ -385,9 +451,13 @@ declare const paddingSpaceX: {
385
451
  };
386
452
  declare const paddingSpaceY: {
387
453
  0: string;
454
+ '0.5': string;
388
455
  1: string;
456
+ '1.5': string;
389
457
  2: string;
458
+ '2.5': string;
390
459
  3: string;
460
+ '3.5': string;
391
461
  4: string;
392
462
  5: string;
393
463
  6: string;
@@ -417,9 +487,13 @@ declare const paddingSpaceY: {
417
487
  };
418
488
  declare const paddingRight: {
419
489
  0: string;
490
+ '0.5': string;
420
491
  1: string;
492
+ '1.5': string;
421
493
  2: string;
494
+ '2.5': string;
422
495
  3: string;
496
+ '3.5': string;
423
497
  4: string;
424
498
  5: string;
425
499
  6: string;
@@ -449,9 +523,13 @@ declare const paddingRight: {
449
523
  };
450
524
  declare const paddingLeft: {
451
525
  0: string;
526
+ '0.5': string;
452
527
  1: string;
528
+ '1.5': string;
453
529
  2: string;
530
+ '2.5': string;
454
531
  3: string;
532
+ '3.5': string;
455
533
  4: string;
456
534
  5: string;
457
535
  6: string;
@@ -481,9 +559,13 @@ declare const paddingLeft: {
481
559
  };
482
560
  declare const paddingTop: {
483
561
  0: string;
562
+ '0.5': string;
484
563
  1: string;
564
+ '1.5': string;
485
565
  2: string;
566
+ '2.5': string;
486
567
  3: string;
568
+ '3.5': string;
487
569
  4: string;
488
570
  5: string;
489
571
  6: string;
@@ -513,9 +595,13 @@ declare const paddingTop: {
513
595
  };
514
596
  declare const paddingBottom: {
515
597
  0: string;
598
+ '0.5': string;
516
599
  1: string;
600
+ '1.5': string;
517
601
  2: string;
602
+ '2.5': string;
518
603
  3: string;
604
+ '3.5': string;
519
605
  4: string;
520
606
  5: string;
521
607
  6: string;
@@ -722,4 +808,4 @@ type WidthProp = {
722
808
  width?: keyof typeof width;
723
809
  };
724
810
 
725
- export { type AlignmentProp, type AspectProp, type ClassArray, type ClassDictionary, 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 GridColsAlignProp, type GridColumn, type NestedStringObject, NumericFormat, type ObjectFitProp, type ObjectPositionProp, type PaddingBottomProp, type PaddingLeftProp, type PaddingRightProp, type PaddingSpaceProp, type PaddingSpacePropX, type PaddingSpacePropY, type PaddingTopProp, type PlaceItemsProp, type Props, SVG, type SVGProps, type StateAttrKeyProps, type StateAttrProps, type TextAlignProp, type Theme, type ThemeComponent, ThemeProvider, type ThemeProviderProps, type UseClassNamesProps, type UseStateProps, type WidthProp, alignment, aspect, cn, createVar, cursorStyle, cva, defaultTheme, fontWeight, gapSpace, get, getColor, gridColsAlign, gridColumn, isObject, objectFit, objectPosition, paddingBottom, paddingLeft, paddingRight, paddingSpace, paddingSpaceX, paddingSpaceY, paddingTop, placeItems, textAlign, textSize, textStyle, useClassNames, useResponsiveValue, useSmallScreen, useStateProps, useTheme, width };
811
+ export { type AlignmentProp, type AspectProp, type ClassArray, type ClassDictionary, 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 GridColsAlignProp, type GridColumn, type NestedStringObject, NumericFormat, type ObjectFitProp, type ObjectPositionProp, type PaddingBottomProp, type PaddingLeftProp, type PaddingRightProp, type PaddingSpaceProp, type PaddingSpacePropX, type PaddingSpacePropY, type PaddingTopProp, type PlaceItemsProp, type Props, SVG, type SVGProps, type StateAttrKeyProps, type StateAttrProps, type StylesProps, type TextAlignProp, type Theme, type ThemeComponent, ThemeProvider, type ThemeProviderProps, type UseClassNamesProps, type UseStateProps, type WidthProp, alignment, aspect, cn, createVar, cursorStyle, cva, defaultTheme, extendTheme, fontWeight, gapSpace, get, getColor, gridColsAlign, gridColumn, isObject, objectFit, objectPosition, paddingBottom, paddingLeft, paddingRight, paddingSpace, paddingSpaceX, paddingSpaceY, paddingTop, placeItems, textAlign, textSize, textStyle, useClassNames, useResponsiveValue, useSmallScreen, useStateProps, useTheme, width };
package/dist/index.js CHANGED
@@ -41,6 +41,7 @@ __export(src_exports, {
41
41
  cursorStyle: () => cursorStyle,
42
42
  cva: () => cva,
43
43
  defaultTheme: () => defaultTheme,
44
+ extendTheme: () => extendTheme,
44
45
  fontWeight: () => fontWeight,
45
46
  gapSpace: () => gapSpace,
46
47
  get: () => get,
@@ -252,6 +253,51 @@ var useSmallScreen = () => {
252
253
  return matches;
253
254
  };
254
255
 
256
+ // src/hooks/extendTheme.tsx
257
+ var extendTheme = (newStyles, theme) => {
258
+ const mergedStyles = { ...theme.components };
259
+ Object.keys(newStyles).forEach((component) => {
260
+ const componentStyles = newStyles[component];
261
+ const mergedComponentStyles = mergedStyles[component];
262
+ if (!mergedComponentStyles)
263
+ return mergedStyles;
264
+ if (typeof newStyles[component] !== "function") {
265
+ const mergeSlotStyles = Object.keys(componentStyles).reduce(
266
+ (acc, slot) => {
267
+ const newSlot = componentStyles[slot];
268
+ const mergedSlot = mergedComponentStyles[slot];
269
+ const variants = ["size", "variant"].reduce((acc2, variantItem) => {
270
+ var _a, _b;
271
+ acc2[variantItem] = {
272
+ ...(_a = newSlot == null ? void 0 : newSlot.variants) == null ? void 0 : _a[variantItem],
273
+ ...(_b = mergedSlot == null ? void 0 : mergedSlot.variants) == null ? void 0 : _b.variantItem
274
+ };
275
+ return acc2;
276
+ }, {});
277
+ acc[slot] = cva([mergedSlot(), newSlot()], { variants });
278
+ return acc;
279
+ },
280
+ { ...mergedComponentStyles }
281
+ );
282
+ mergedStyles[component] = mergeSlotStyles;
283
+ } else {
284
+ const variants = ["size", "variant"].reduce((acc, variantItem) => {
285
+ var _a, _b;
286
+ acc[variantItem] = {
287
+ ...(_a = newStyles[component].variants) == null ? void 0 : _a[variantItem],
288
+ ...(_b = mergedStyles[component].variants) == null ? void 0 : _b[variantItem]
289
+ };
290
+ return acc;
291
+ }, {});
292
+ mergedStyles[component] = cva(
293
+ [mergedComponentStyles(), componentStyles()],
294
+ { variants }
295
+ );
296
+ }
297
+ });
298
+ return { ...theme, components: { ...mergedStyles } };
299
+ };
300
+
255
301
  // src/components/SVG/SVG.tsx
256
302
  var SVG = (0, import_react5.forwardRef)(
257
303
  ({ size = 24, children, className, color, ...props }, ref) => {
@@ -401,9 +447,13 @@ var textStyle = {
401
447
  };
402
448
  var gapSpace = {
403
449
  0: "gap-0",
450
+ "0.5": "gap-0.5",
404
451
  1: "gap-1",
452
+ "1.5": "gap-1.5",
405
453
  2: "gap-2",
454
+ "2.5": "gap-2.5",
406
455
  3: "gap-3",
456
+ "3.5": "gap-3.5",
407
457
  4: "gap-4",
408
458
  5: "gap-5",
409
459
  6: "gap-6",
@@ -433,9 +483,13 @@ var gapSpace = {
433
483
  };
434
484
  var paddingSpace = {
435
485
  0: "p-0",
486
+ "0.5": "p-0.5",
436
487
  1: "p-1",
488
+ "1.5": "p-1.5",
437
489
  2: "p-2",
490
+ "2.5": "p-2.5",
438
491
  3: "p-3",
492
+ "3.5": "p-3.5",
439
493
  4: "p-4",
440
494
  5: "p-5",
441
495
  6: "p-6",
@@ -465,9 +519,13 @@ var paddingSpace = {
465
519
  };
466
520
  var paddingSpaceX = {
467
521
  0: "px-0",
522
+ "0.5": "px-0.5",
468
523
  1: "px-1",
524
+ "1.5": "px-1.5",
469
525
  2: "px-2",
526
+ "2.5": "px-2.5",
470
527
  3: "px-3",
528
+ "3.5": "px-3.5",
471
529
  4: "px-4",
472
530
  5: "px-5",
473
531
  6: "px-6",
@@ -497,9 +555,13 @@ var paddingSpaceX = {
497
555
  };
498
556
  var paddingSpaceY = {
499
557
  0: "py-0",
558
+ "0.5": "py-0.5",
500
559
  1: "py-1",
560
+ "1.5": "py-1.5",
501
561
  2: "py-2",
562
+ "2.5": "py-2.5",
502
563
  3: "py-3",
564
+ "3.5": "py-3.5",
503
565
  4: "py-4",
504
566
  5: "py-5",
505
567
  6: "py-6",
@@ -529,9 +591,13 @@ var paddingSpaceY = {
529
591
  };
530
592
  var paddingRight = {
531
593
  0: "pr-0",
594
+ "0.5": "pr-0.5",
532
595
  1: "pr-1",
596
+ "1.5": "pr-1.5",
533
597
  2: "pr-2",
598
+ "2.5": "pr-2.5",
534
599
  3: "pr-3",
600
+ "3.5": "pr-3.5",
535
601
  4: "pr-4",
536
602
  5: "pr-5",
537
603
  6: "pr-6",
@@ -561,9 +627,13 @@ var paddingRight = {
561
627
  };
562
628
  var paddingLeft = {
563
629
  0: "pl-0",
630
+ "0.5": "pl-0.5",
564
631
  1: "pl-1",
632
+ "1.5": "pl-1.5",
565
633
  2: "pl-2",
634
+ "2.5": "pl-2.5",
566
635
  3: "pl-3",
636
+ "3.5": "pl-3.5",
567
637
  4: "pl-4",
568
638
  5: "pl-5",
569
639
  6: "pl-6",
@@ -593,9 +663,13 @@ var paddingLeft = {
593
663
  };
594
664
  var paddingTop = {
595
665
  0: "pt-0",
666
+ "0.5": "pt-0.5",
596
667
  1: "pt-1",
668
+ "1.5": "pt-1.5",
597
669
  2: "pt-2",
670
+ "2.5": "pt-2.5",
598
671
  3: "pt-3",
672
+ "3.5": "pt-3.5",
599
673
  4: "pt-4",
600
674
  5: "pt-5",
601
675
  6: "pt-6",
@@ -625,9 +699,13 @@ var paddingTop = {
625
699
  };
626
700
  var paddingBottom = {
627
701
  0: "pb-0",
702
+ "0.5": "pb-0.5",
628
703
  1: "pb-1",
704
+ "1.5": "pb-1.5",
629
705
  2: "pb-2",
706
+ "2.5": "pb-2.5",
630
707
  3: "pb-3",
708
+ "3.5": "pb-3.5",
631
709
  4: "pb-4",
632
710
  5: "pb-5",
633
711
  6: "pb-6",
@@ -774,6 +852,7 @@ var cursorStyle = {
774
852
  cursorStyle,
775
853
  cva,
776
854
  defaultTheme,
855
+ extendTheme,
777
856
  fontWeight,
778
857
  gapSpace,
779
858
  get,
package/dist/index.mjs CHANGED
@@ -180,6 +180,51 @@ var useSmallScreen = () => {
180
180
  return matches;
181
181
  };
182
182
 
183
+ // src/hooks/extendTheme.tsx
184
+ var extendTheme = (newStyles, theme) => {
185
+ const mergedStyles = { ...theme.components };
186
+ Object.keys(newStyles).forEach((component) => {
187
+ const componentStyles = newStyles[component];
188
+ const mergedComponentStyles = mergedStyles[component];
189
+ if (!mergedComponentStyles)
190
+ return mergedStyles;
191
+ if (typeof newStyles[component] !== "function") {
192
+ const mergeSlotStyles = Object.keys(componentStyles).reduce(
193
+ (acc, slot) => {
194
+ const newSlot = componentStyles[slot];
195
+ const mergedSlot = mergedComponentStyles[slot];
196
+ const variants = ["size", "variant"].reduce((acc2, variantItem) => {
197
+ var _a, _b;
198
+ acc2[variantItem] = {
199
+ ...(_a = newSlot == null ? void 0 : newSlot.variants) == null ? void 0 : _a[variantItem],
200
+ ...(_b = mergedSlot == null ? void 0 : mergedSlot.variants) == null ? void 0 : _b.variantItem
201
+ };
202
+ return acc2;
203
+ }, {});
204
+ acc[slot] = cva([mergedSlot(), newSlot()], { variants });
205
+ return acc;
206
+ },
207
+ { ...mergedComponentStyles }
208
+ );
209
+ mergedStyles[component] = mergeSlotStyles;
210
+ } else {
211
+ const variants = ["size", "variant"].reduce((acc, variantItem) => {
212
+ var _a, _b;
213
+ acc[variantItem] = {
214
+ ...(_a = newStyles[component].variants) == null ? void 0 : _a[variantItem],
215
+ ...(_b = mergedStyles[component].variants) == null ? void 0 : _b[variantItem]
216
+ };
217
+ return acc;
218
+ }, {});
219
+ mergedStyles[component] = cva(
220
+ [mergedComponentStyles(), componentStyles()],
221
+ { variants }
222
+ );
223
+ }
224
+ });
225
+ return { ...theme, components: { ...mergedStyles } };
226
+ };
227
+
183
228
  // src/components/SVG/SVG.tsx
184
229
  var SVG = forwardRef(
185
230
  ({ size = 24, children, className, color, ...props }, ref) => {
@@ -329,9 +374,13 @@ var textStyle = {
329
374
  };
330
375
  var gapSpace = {
331
376
  0: "gap-0",
377
+ "0.5": "gap-0.5",
332
378
  1: "gap-1",
379
+ "1.5": "gap-1.5",
333
380
  2: "gap-2",
381
+ "2.5": "gap-2.5",
334
382
  3: "gap-3",
383
+ "3.5": "gap-3.5",
335
384
  4: "gap-4",
336
385
  5: "gap-5",
337
386
  6: "gap-6",
@@ -361,9 +410,13 @@ var gapSpace = {
361
410
  };
362
411
  var paddingSpace = {
363
412
  0: "p-0",
413
+ "0.5": "p-0.5",
364
414
  1: "p-1",
415
+ "1.5": "p-1.5",
365
416
  2: "p-2",
417
+ "2.5": "p-2.5",
366
418
  3: "p-3",
419
+ "3.5": "p-3.5",
367
420
  4: "p-4",
368
421
  5: "p-5",
369
422
  6: "p-6",
@@ -393,9 +446,13 @@ var paddingSpace = {
393
446
  };
394
447
  var paddingSpaceX = {
395
448
  0: "px-0",
449
+ "0.5": "px-0.5",
396
450
  1: "px-1",
451
+ "1.5": "px-1.5",
397
452
  2: "px-2",
453
+ "2.5": "px-2.5",
398
454
  3: "px-3",
455
+ "3.5": "px-3.5",
399
456
  4: "px-4",
400
457
  5: "px-5",
401
458
  6: "px-6",
@@ -425,9 +482,13 @@ var paddingSpaceX = {
425
482
  };
426
483
  var paddingSpaceY = {
427
484
  0: "py-0",
485
+ "0.5": "py-0.5",
428
486
  1: "py-1",
487
+ "1.5": "py-1.5",
429
488
  2: "py-2",
489
+ "2.5": "py-2.5",
430
490
  3: "py-3",
491
+ "3.5": "py-3.5",
431
492
  4: "py-4",
432
493
  5: "py-5",
433
494
  6: "py-6",
@@ -457,9 +518,13 @@ var paddingSpaceY = {
457
518
  };
458
519
  var paddingRight = {
459
520
  0: "pr-0",
521
+ "0.5": "pr-0.5",
460
522
  1: "pr-1",
523
+ "1.5": "pr-1.5",
461
524
  2: "pr-2",
525
+ "2.5": "pr-2.5",
462
526
  3: "pr-3",
527
+ "3.5": "pr-3.5",
463
528
  4: "pr-4",
464
529
  5: "pr-5",
465
530
  6: "pr-6",
@@ -489,9 +554,13 @@ var paddingRight = {
489
554
  };
490
555
  var paddingLeft = {
491
556
  0: "pl-0",
557
+ "0.5": "pl-0.5",
492
558
  1: "pl-1",
559
+ "1.5": "pl-1.5",
493
560
  2: "pl-2",
561
+ "2.5": "pl-2.5",
494
562
  3: "pl-3",
563
+ "3.5": "pl-3.5",
495
564
  4: "pl-4",
496
565
  5: "pl-5",
497
566
  6: "pl-6",
@@ -521,9 +590,13 @@ var paddingLeft = {
521
590
  };
522
591
  var paddingTop = {
523
592
  0: "pt-0",
593
+ "0.5": "pt-0.5",
524
594
  1: "pt-1",
595
+ "1.5": "pt-1.5",
525
596
  2: "pt-2",
597
+ "2.5": "pt-2.5",
526
598
  3: "pt-3",
599
+ "3.5": "pt-3.5",
527
600
  4: "pt-4",
528
601
  5: "pt-5",
529
602
  6: "pt-6",
@@ -553,9 +626,13 @@ var paddingTop = {
553
626
  };
554
627
  var paddingBottom = {
555
628
  0: "pb-0",
629
+ "0.5": "pb-0.5",
556
630
  1: "pb-1",
631
+ "1.5": "pb-1.5",
557
632
  2: "pb-2",
633
+ "2.5": "pb-2.5",
558
634
  3: "pb-3",
635
+ "3.5": "pb-3.5",
559
636
  4: "pb-4",
560
637
  5: "pb-5",
561
638
  6: "pb-6",
@@ -701,6 +778,7 @@ export {
701
778
  cursorStyle,
702
779
  cva,
703
780
  defaultTheme,
781
+ extendTheme,
704
782
  fontWeight,
705
783
  gapSpace,
706
784
  get,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@marigold/system",
3
- "version": "7.4.0",
3
+ "version": "7.5.0",
4
4
  "description": "Marigold System Library",
5
5
  "license": "MIT",
6
6
  "keywords": [
@@ -24,7 +24,7 @@
24
24
  "directory": "packages/system"
25
25
  },
26
26
  "dependencies": {
27
- "@react-aria/i18n": "3.10.0",
27
+ "@react-aria/i18n": "3.10.2",
28
28
  "class-variance-authority": "0.7.0",
29
29
  "deepmerge": "^4.2.2",
30
30
  "react-fast-compare": "^3.2.0",