@marigold/system 7.4.0 → 7.5.1

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 +89 -0
  4. package/dist/index.mjs +88 -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,61 @@ 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, _c, _d;
286
+ const newStylesVariants = (_a = newStyles[component].variants) == null ? void 0 : _a[variantItem];
287
+ const mergedStylesVariants = (_b = mergedStyles[component].variants) == null ? void 0 : _b[variantItem];
288
+ if (newStylesVariants && mergedStylesVariants) {
289
+ const dupVariants = Object.keys(newStylesVariants).filter(
290
+ (variant) => Object.keys(mergedStylesVariants).includes(variant)
291
+ );
292
+ if (dupVariants.length) {
293
+ throw new Error(dupVariants.join() + " already exists!");
294
+ }
295
+ }
296
+ acc[variantItem] = {
297
+ ...(_c = newStyles[component].variants) == null ? void 0 : _c[variantItem],
298
+ ...(_d = mergedStyles[component].variants) == null ? void 0 : _d[variantItem]
299
+ };
300
+ return acc;
301
+ }, {});
302
+ mergedStyles[component] = cva(
303
+ [mergedComponentStyles(), componentStyles()],
304
+ { variants }
305
+ );
306
+ }
307
+ });
308
+ return { ...theme, components: { ...mergedStyles } };
309
+ };
310
+
255
311
  // src/components/SVG/SVG.tsx
256
312
  var SVG = (0, import_react5.forwardRef)(
257
313
  ({ size = 24, children, className, color, ...props }, ref) => {
@@ -401,9 +457,13 @@ var textStyle = {
401
457
  };
402
458
  var gapSpace = {
403
459
  0: "gap-0",
460
+ "0.5": "gap-0.5",
404
461
  1: "gap-1",
462
+ "1.5": "gap-1.5",
405
463
  2: "gap-2",
464
+ "2.5": "gap-2.5",
406
465
  3: "gap-3",
466
+ "3.5": "gap-3.5",
407
467
  4: "gap-4",
408
468
  5: "gap-5",
409
469
  6: "gap-6",
@@ -433,9 +493,13 @@ var gapSpace = {
433
493
  };
434
494
  var paddingSpace = {
435
495
  0: "p-0",
496
+ "0.5": "p-0.5",
436
497
  1: "p-1",
498
+ "1.5": "p-1.5",
437
499
  2: "p-2",
500
+ "2.5": "p-2.5",
438
501
  3: "p-3",
502
+ "3.5": "p-3.5",
439
503
  4: "p-4",
440
504
  5: "p-5",
441
505
  6: "p-6",
@@ -465,9 +529,13 @@ var paddingSpace = {
465
529
  };
466
530
  var paddingSpaceX = {
467
531
  0: "px-0",
532
+ "0.5": "px-0.5",
468
533
  1: "px-1",
534
+ "1.5": "px-1.5",
469
535
  2: "px-2",
536
+ "2.5": "px-2.5",
470
537
  3: "px-3",
538
+ "3.5": "px-3.5",
471
539
  4: "px-4",
472
540
  5: "px-5",
473
541
  6: "px-6",
@@ -497,9 +565,13 @@ var paddingSpaceX = {
497
565
  };
498
566
  var paddingSpaceY = {
499
567
  0: "py-0",
568
+ "0.5": "py-0.5",
500
569
  1: "py-1",
570
+ "1.5": "py-1.5",
501
571
  2: "py-2",
572
+ "2.5": "py-2.5",
502
573
  3: "py-3",
574
+ "3.5": "py-3.5",
503
575
  4: "py-4",
504
576
  5: "py-5",
505
577
  6: "py-6",
@@ -529,9 +601,13 @@ var paddingSpaceY = {
529
601
  };
530
602
  var paddingRight = {
531
603
  0: "pr-0",
604
+ "0.5": "pr-0.5",
532
605
  1: "pr-1",
606
+ "1.5": "pr-1.5",
533
607
  2: "pr-2",
608
+ "2.5": "pr-2.5",
534
609
  3: "pr-3",
610
+ "3.5": "pr-3.5",
535
611
  4: "pr-4",
536
612
  5: "pr-5",
537
613
  6: "pr-6",
@@ -561,9 +637,13 @@ var paddingRight = {
561
637
  };
562
638
  var paddingLeft = {
563
639
  0: "pl-0",
640
+ "0.5": "pl-0.5",
564
641
  1: "pl-1",
642
+ "1.5": "pl-1.5",
565
643
  2: "pl-2",
644
+ "2.5": "pl-2.5",
566
645
  3: "pl-3",
646
+ "3.5": "pl-3.5",
567
647
  4: "pl-4",
568
648
  5: "pl-5",
569
649
  6: "pl-6",
@@ -593,9 +673,13 @@ var paddingLeft = {
593
673
  };
594
674
  var paddingTop = {
595
675
  0: "pt-0",
676
+ "0.5": "pt-0.5",
596
677
  1: "pt-1",
678
+ "1.5": "pt-1.5",
597
679
  2: "pt-2",
680
+ "2.5": "pt-2.5",
598
681
  3: "pt-3",
682
+ "3.5": "pt-3.5",
599
683
  4: "pt-4",
600
684
  5: "pt-5",
601
685
  6: "pt-6",
@@ -625,9 +709,13 @@ var paddingTop = {
625
709
  };
626
710
  var paddingBottom = {
627
711
  0: "pb-0",
712
+ "0.5": "pb-0.5",
628
713
  1: "pb-1",
714
+ "1.5": "pb-1.5",
629
715
  2: "pb-2",
716
+ "2.5": "pb-2.5",
630
717
  3: "pb-3",
718
+ "3.5": "pb-3.5",
631
719
  4: "pb-4",
632
720
  5: "pb-5",
633
721
  6: "pb-6",
@@ -774,6 +862,7 @@ var cursorStyle = {
774
862
  cursorStyle,
775
863
  cva,
776
864
  defaultTheme,
865
+ extendTheme,
777
866
  fontWeight,
778
867
  gapSpace,
779
868
  get,
package/dist/index.mjs CHANGED
@@ -180,6 +180,61 @@ 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, _c, _d;
213
+ const newStylesVariants = (_a = newStyles[component].variants) == null ? void 0 : _a[variantItem];
214
+ const mergedStylesVariants = (_b = mergedStyles[component].variants) == null ? void 0 : _b[variantItem];
215
+ if (newStylesVariants && mergedStylesVariants) {
216
+ const dupVariants = Object.keys(newStylesVariants).filter(
217
+ (variant) => Object.keys(mergedStylesVariants).includes(variant)
218
+ );
219
+ if (dupVariants.length) {
220
+ throw new Error(dupVariants.join() + " already exists!");
221
+ }
222
+ }
223
+ acc[variantItem] = {
224
+ ...(_c = newStyles[component].variants) == null ? void 0 : _c[variantItem],
225
+ ...(_d = mergedStyles[component].variants) == null ? void 0 : _d[variantItem]
226
+ };
227
+ return acc;
228
+ }, {});
229
+ mergedStyles[component] = cva(
230
+ [mergedComponentStyles(), componentStyles()],
231
+ { variants }
232
+ );
233
+ }
234
+ });
235
+ return { ...theme, components: { ...mergedStyles } };
236
+ };
237
+
183
238
  // src/components/SVG/SVG.tsx
184
239
  var SVG = forwardRef(
185
240
  ({ size = 24, children, className, color, ...props }, ref) => {
@@ -329,9 +384,13 @@ var textStyle = {
329
384
  };
330
385
  var gapSpace = {
331
386
  0: "gap-0",
387
+ "0.5": "gap-0.5",
332
388
  1: "gap-1",
389
+ "1.5": "gap-1.5",
333
390
  2: "gap-2",
391
+ "2.5": "gap-2.5",
334
392
  3: "gap-3",
393
+ "3.5": "gap-3.5",
335
394
  4: "gap-4",
336
395
  5: "gap-5",
337
396
  6: "gap-6",
@@ -361,9 +420,13 @@ var gapSpace = {
361
420
  };
362
421
  var paddingSpace = {
363
422
  0: "p-0",
423
+ "0.5": "p-0.5",
364
424
  1: "p-1",
425
+ "1.5": "p-1.5",
365
426
  2: "p-2",
427
+ "2.5": "p-2.5",
366
428
  3: "p-3",
429
+ "3.5": "p-3.5",
367
430
  4: "p-4",
368
431
  5: "p-5",
369
432
  6: "p-6",
@@ -393,9 +456,13 @@ var paddingSpace = {
393
456
  };
394
457
  var paddingSpaceX = {
395
458
  0: "px-0",
459
+ "0.5": "px-0.5",
396
460
  1: "px-1",
461
+ "1.5": "px-1.5",
397
462
  2: "px-2",
463
+ "2.5": "px-2.5",
398
464
  3: "px-3",
465
+ "3.5": "px-3.5",
399
466
  4: "px-4",
400
467
  5: "px-5",
401
468
  6: "px-6",
@@ -425,9 +492,13 @@ var paddingSpaceX = {
425
492
  };
426
493
  var paddingSpaceY = {
427
494
  0: "py-0",
495
+ "0.5": "py-0.5",
428
496
  1: "py-1",
497
+ "1.5": "py-1.5",
429
498
  2: "py-2",
499
+ "2.5": "py-2.5",
430
500
  3: "py-3",
501
+ "3.5": "py-3.5",
431
502
  4: "py-4",
432
503
  5: "py-5",
433
504
  6: "py-6",
@@ -457,9 +528,13 @@ var paddingSpaceY = {
457
528
  };
458
529
  var paddingRight = {
459
530
  0: "pr-0",
531
+ "0.5": "pr-0.5",
460
532
  1: "pr-1",
533
+ "1.5": "pr-1.5",
461
534
  2: "pr-2",
535
+ "2.5": "pr-2.5",
462
536
  3: "pr-3",
537
+ "3.5": "pr-3.5",
463
538
  4: "pr-4",
464
539
  5: "pr-5",
465
540
  6: "pr-6",
@@ -489,9 +564,13 @@ var paddingRight = {
489
564
  };
490
565
  var paddingLeft = {
491
566
  0: "pl-0",
567
+ "0.5": "pl-0.5",
492
568
  1: "pl-1",
569
+ "1.5": "pl-1.5",
493
570
  2: "pl-2",
571
+ "2.5": "pl-2.5",
494
572
  3: "pl-3",
573
+ "3.5": "pl-3.5",
495
574
  4: "pl-4",
496
575
  5: "pl-5",
497
576
  6: "pl-6",
@@ -521,9 +600,13 @@ var paddingLeft = {
521
600
  };
522
601
  var paddingTop = {
523
602
  0: "pt-0",
603
+ "0.5": "pt-0.5",
524
604
  1: "pt-1",
605
+ "1.5": "pt-1.5",
525
606
  2: "pt-2",
607
+ "2.5": "pt-2.5",
526
608
  3: "pt-3",
609
+ "3.5": "pt-3.5",
527
610
  4: "pt-4",
528
611
  5: "pt-5",
529
612
  6: "pt-6",
@@ -553,9 +636,13 @@ var paddingTop = {
553
636
  };
554
637
  var paddingBottom = {
555
638
  0: "pb-0",
639
+ "0.5": "pb-0.5",
556
640
  1: "pb-1",
641
+ "1.5": "pb-1.5",
557
642
  2: "pb-2",
643
+ "2.5": "pb-2.5",
558
644
  3: "pb-3",
645
+ "3.5": "pb-3.5",
559
646
  4: "pb-4",
560
647
  5: "pb-5",
561
648
  6: "pb-6",
@@ -701,6 +788,7 @@ export {
701
788
  cursorStyle,
702
789
  cva,
703
790
  defaultTheme,
791
+ extendTheme,
704
792
  fontWeight,
705
793
  gapSpace,
706
794
  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.1",
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",