@marigold/system 7.3.3 → 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 (6) hide show
  1. package/LICENSE +1 -1
  2. package/dist/index.d.mts +89 -2
  3. package/dist/index.d.ts +89 -2
  4. package/dist/index.js +79 -0
  5. package/dist/index.mjs +78 -0
  6. package/package.json +5 -5
package/LICENSE CHANGED
@@ -1,6 +1,6 @@
1
1
  MIT License
2
2
 
3
- Copyright (c) 2023 Marigold UI
3
+ Copyright (c) 2024 Marigold UI
4
4
 
5
5
  Permission is hereby granted, free of charge, to any person obtaining a copy
6
6
  of this software and associated documentation files (the "Software"), to deal
package/dist/index.d.mts CHANGED
@@ -130,6 +130,7 @@ type Theme = {
130
130
  Underlay?: ComponentStyleFunction<string, string>;
131
131
  Calendar?: Record<'calendar' | 'calendarCell' | 'calendarControllers' | 'calendarHeader' | 'calendarGrid', ComponentStyleFunction<string, string>>;
132
132
  DatePicker?: Record<'container' | 'button', ComponentStyleFunction<string, string>>;
133
+ ComboBox?: ComponentStyleFunction<string, string>;
133
134
  };
134
135
  };
135
136
  type ComponentNames = keyof Theme['components'];
@@ -146,7 +147,7 @@ interface UseClassNamesProps<C extends ComponentNames> {
146
147
  type ComponentClassNames<C extends ComponentNames> = ThemeComponent<C> extends (...args: any) => any ? string : {
147
148
  [slot in keyof ThemeComponent<C>]: string;
148
149
  };
149
- declare const useClassNames: <C extends "Accordion" | "Badge" | "Body" | "Button" | "Card" | "DateField" | "Dialog" | "Divider" | "Field" | "Footer" | "Header" | "Headline" | "Popover" | "HelpText" | "Image" | "Checkbox" | "Switch" | "Input" | "Label" | "List" | "Link" | "ListBox" | "Menu" | "Radio" | "Slider" | "Select" | "NumberField" | "Message" | "Table" | "Tag" | "Text" | "TextArea" | "Tooltip" | "Tabs" | "Underlay" | "Calendar" | "DatePicker">({ component, className, variant, size, }: UseClassNamesProps<C>) => ComponentClassNames<C>;
150
+ declare const useClassNames: <C extends "Accordion" | "Badge" | "Body" | "Button" | "Card" | "DateField" | "Dialog" | "Divider" | "Field" | "Footer" | "Header" | "Headline" | "Popover" | "HelpText" | "Image" | "Checkbox" | "Switch" | "Input" | "Label" | "List" | "Link" | "ListBox" | "Menu" | "Radio" | "Slider" | "Select" | "NumberField" | "Message" | "Table" | "Tag" | "Text" | "TextArea" | "Tooltip" | "Tabs" | "Underlay" | "Calendar" | "DatePicker" | "ComboBox">({ component, className, variant, size, }: UseClassNamesProps<C>) => ComponentClassNames<C>;
150
151
 
151
152
  /**
152
153
  * Hook that can be used to return values based on the current screen size,
@@ -180,6 +181,60 @@ declare function ThemeProvider<T extends Theme>({ theme, children, className, }:
180
181
 
181
182
  declare const useSmallScreen: () => boolean;
182
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
+
183
238
  declare const defaultTheme: {
184
239
  name: string;
185
240
  screens: {
@@ -288,9 +343,13 @@ declare const textStyle: {
288
343
  };
289
344
  declare const gapSpace: {
290
345
  0: string;
346
+ '0.5': string;
291
347
  1: string;
348
+ '1.5': string;
292
349
  2: string;
350
+ '2.5': string;
293
351
  3: string;
352
+ '3.5': string;
294
353
  4: string;
295
354
  5: string;
296
355
  6: string;
@@ -320,9 +379,13 @@ declare const gapSpace: {
320
379
  };
321
380
  declare const paddingSpace: {
322
381
  0: string;
382
+ '0.5': string;
323
383
  1: string;
384
+ '1.5': string;
324
385
  2: string;
386
+ '2.5': string;
325
387
  3: string;
388
+ '3.5': string;
326
389
  4: string;
327
390
  5: string;
328
391
  6: string;
@@ -352,9 +415,13 @@ declare const paddingSpace: {
352
415
  };
353
416
  declare const paddingSpaceX: {
354
417
  0: string;
418
+ '0.5': string;
355
419
  1: string;
420
+ '1.5': string;
356
421
  2: string;
422
+ '2.5': string;
357
423
  3: string;
424
+ '3.5': string;
358
425
  4: string;
359
426
  5: string;
360
427
  6: string;
@@ -384,9 +451,13 @@ declare const paddingSpaceX: {
384
451
  };
385
452
  declare const paddingSpaceY: {
386
453
  0: string;
454
+ '0.5': string;
387
455
  1: string;
456
+ '1.5': string;
388
457
  2: string;
458
+ '2.5': string;
389
459
  3: string;
460
+ '3.5': string;
390
461
  4: string;
391
462
  5: string;
392
463
  6: string;
@@ -416,9 +487,13 @@ declare const paddingSpaceY: {
416
487
  };
417
488
  declare const paddingRight: {
418
489
  0: string;
490
+ '0.5': string;
419
491
  1: string;
492
+ '1.5': string;
420
493
  2: string;
494
+ '2.5': string;
421
495
  3: string;
496
+ '3.5': string;
422
497
  4: string;
423
498
  5: string;
424
499
  6: string;
@@ -448,9 +523,13 @@ declare const paddingRight: {
448
523
  };
449
524
  declare const paddingLeft: {
450
525
  0: string;
526
+ '0.5': string;
451
527
  1: string;
528
+ '1.5': string;
452
529
  2: string;
530
+ '2.5': string;
453
531
  3: string;
532
+ '3.5': string;
454
533
  4: string;
455
534
  5: string;
456
535
  6: string;
@@ -480,9 +559,13 @@ declare const paddingLeft: {
480
559
  };
481
560
  declare const paddingTop: {
482
561
  0: string;
562
+ '0.5': string;
483
563
  1: string;
564
+ '1.5': string;
484
565
  2: string;
566
+ '2.5': string;
485
567
  3: string;
568
+ '3.5': string;
486
569
  4: string;
487
570
  5: string;
488
571
  6: string;
@@ -512,9 +595,13 @@ declare const paddingTop: {
512
595
  };
513
596
  declare const paddingBottom: {
514
597
  0: string;
598
+ '0.5': string;
515
599
  1: string;
600
+ '1.5': string;
516
601
  2: string;
602
+ '2.5': string;
517
603
  3: string;
604
+ '3.5': string;
518
605
  4: string;
519
606
  5: string;
520
607
  6: string;
@@ -721,4 +808,4 @@ type WidthProp = {
721
808
  width?: keyof typeof width;
722
809
  };
723
810
 
724
- 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
@@ -130,6 +130,7 @@ type Theme = {
130
130
  Underlay?: ComponentStyleFunction<string, string>;
131
131
  Calendar?: Record<'calendar' | 'calendarCell' | 'calendarControllers' | 'calendarHeader' | 'calendarGrid', ComponentStyleFunction<string, string>>;
132
132
  DatePicker?: Record<'container' | 'button', ComponentStyleFunction<string, string>>;
133
+ ComboBox?: ComponentStyleFunction<string, string>;
133
134
  };
134
135
  };
135
136
  type ComponentNames = keyof Theme['components'];
@@ -146,7 +147,7 @@ interface UseClassNamesProps<C extends ComponentNames> {
146
147
  type ComponentClassNames<C extends ComponentNames> = ThemeComponent<C> extends (...args: any) => any ? string : {
147
148
  [slot in keyof ThemeComponent<C>]: string;
148
149
  };
149
- declare const useClassNames: <C extends "Accordion" | "Badge" | "Body" | "Button" | "Card" | "DateField" | "Dialog" | "Divider" | "Field" | "Footer" | "Header" | "Headline" | "Popover" | "HelpText" | "Image" | "Checkbox" | "Switch" | "Input" | "Label" | "List" | "Link" | "ListBox" | "Menu" | "Radio" | "Slider" | "Select" | "NumberField" | "Message" | "Table" | "Tag" | "Text" | "TextArea" | "Tooltip" | "Tabs" | "Underlay" | "Calendar" | "DatePicker">({ component, className, variant, size, }: UseClassNamesProps<C>) => ComponentClassNames<C>;
150
+ declare const useClassNames: <C extends "Accordion" | "Badge" | "Body" | "Button" | "Card" | "DateField" | "Dialog" | "Divider" | "Field" | "Footer" | "Header" | "Headline" | "Popover" | "HelpText" | "Image" | "Checkbox" | "Switch" | "Input" | "Label" | "List" | "Link" | "ListBox" | "Menu" | "Radio" | "Slider" | "Select" | "NumberField" | "Message" | "Table" | "Tag" | "Text" | "TextArea" | "Tooltip" | "Tabs" | "Underlay" | "Calendar" | "DatePicker" | "ComboBox">({ component, className, variant, size, }: UseClassNamesProps<C>) => ComponentClassNames<C>;
150
151
 
151
152
  /**
152
153
  * Hook that can be used to return values based on the current screen size,
@@ -180,6 +181,60 @@ declare function ThemeProvider<T extends Theme>({ theme, children, className, }:
180
181
 
181
182
  declare const useSmallScreen: () => boolean;
182
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
+
183
238
  declare const defaultTheme: {
184
239
  name: string;
185
240
  screens: {
@@ -288,9 +343,13 @@ declare const textStyle: {
288
343
  };
289
344
  declare const gapSpace: {
290
345
  0: string;
346
+ '0.5': string;
291
347
  1: string;
348
+ '1.5': string;
292
349
  2: string;
350
+ '2.5': string;
293
351
  3: string;
352
+ '3.5': string;
294
353
  4: string;
295
354
  5: string;
296
355
  6: string;
@@ -320,9 +379,13 @@ declare const gapSpace: {
320
379
  };
321
380
  declare const paddingSpace: {
322
381
  0: string;
382
+ '0.5': string;
323
383
  1: string;
384
+ '1.5': string;
324
385
  2: string;
386
+ '2.5': string;
325
387
  3: string;
388
+ '3.5': string;
326
389
  4: string;
327
390
  5: string;
328
391
  6: string;
@@ -352,9 +415,13 @@ declare const paddingSpace: {
352
415
  };
353
416
  declare const paddingSpaceX: {
354
417
  0: string;
418
+ '0.5': string;
355
419
  1: string;
420
+ '1.5': string;
356
421
  2: string;
422
+ '2.5': string;
357
423
  3: string;
424
+ '3.5': string;
358
425
  4: string;
359
426
  5: string;
360
427
  6: string;
@@ -384,9 +451,13 @@ declare const paddingSpaceX: {
384
451
  };
385
452
  declare const paddingSpaceY: {
386
453
  0: string;
454
+ '0.5': string;
387
455
  1: string;
456
+ '1.5': string;
388
457
  2: string;
458
+ '2.5': string;
389
459
  3: string;
460
+ '3.5': string;
390
461
  4: string;
391
462
  5: string;
392
463
  6: string;
@@ -416,9 +487,13 @@ declare const paddingSpaceY: {
416
487
  };
417
488
  declare const paddingRight: {
418
489
  0: string;
490
+ '0.5': string;
419
491
  1: string;
492
+ '1.5': string;
420
493
  2: string;
494
+ '2.5': string;
421
495
  3: string;
496
+ '3.5': string;
422
497
  4: string;
423
498
  5: string;
424
499
  6: string;
@@ -448,9 +523,13 @@ declare const paddingRight: {
448
523
  };
449
524
  declare const paddingLeft: {
450
525
  0: string;
526
+ '0.5': string;
451
527
  1: string;
528
+ '1.5': string;
452
529
  2: string;
530
+ '2.5': string;
453
531
  3: string;
532
+ '3.5': string;
454
533
  4: string;
455
534
  5: string;
456
535
  6: string;
@@ -480,9 +559,13 @@ declare const paddingLeft: {
480
559
  };
481
560
  declare const paddingTop: {
482
561
  0: string;
562
+ '0.5': string;
483
563
  1: string;
564
+ '1.5': string;
484
565
  2: string;
566
+ '2.5': string;
485
567
  3: string;
568
+ '3.5': string;
486
569
  4: string;
487
570
  5: string;
488
571
  6: string;
@@ -512,9 +595,13 @@ declare const paddingTop: {
512
595
  };
513
596
  declare const paddingBottom: {
514
597
  0: string;
598
+ '0.5': string;
515
599
  1: string;
600
+ '1.5': string;
516
601
  2: string;
602
+ '2.5': string;
517
603
  3: string;
604
+ '3.5': string;
518
605
  4: string;
519
606
  5: string;
520
607
  6: string;
@@ -721,4 +808,4 @@ type WidthProp = {
721
808
  width?: keyof typeof width;
722
809
  };
723
810
 
724
- 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.3.3",
3
+ "version": "7.5.0",
4
4
  "description": "Marigold System Library",
5
5
  "license": "MIT",
6
6
  "keywords": [
@@ -24,11 +24,11 @@
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",
31
- "tailwind-merge": "2.2.0",
31
+ "tailwind-merge": "2.2.1",
32
32
  "@marigold/types": "1.1.0"
33
33
  },
34
34
  "peerDependencies": {
@@ -37,10 +37,10 @@
37
37
  },
38
38
  "devDependencies": {
39
39
  "@babel/core": "7.23.9",
40
- "postcss": "8.4.33",
40
+ "postcss": "8.4.35",
41
41
  "react": "18.2.0",
42
42
  "tailwindcss": "3.4.1",
43
- "tsup": "8.0.1",
43
+ "tsup": "8.0.2",
44
44
  "@marigold/tsconfig": "0.4.0"
45
45
  },
46
46
  "scripts": {