@marigold/system 11.1.1 → 11.2.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 +16 -14
  2. package/dist/index.d.ts +16 -14
  3. package/dist/index.js +2 -2
  4. package/dist/index.mjs +2 -2
  5. package/package.json +9 -8
package/dist/index.d.mts CHANGED
@@ -86,17 +86,15 @@ declare const get: (obj: object, path: string, fallback?: any) => any;
86
86
  */
87
87
  declare const isValidCssCustomPropertyName: (val: string) => boolean;
88
88
  /**
89
- * Returns a CSS variable reference string based on the input value.
89
+ * Ensures that the given value is formatted as a CSS variable reference.
90
90
  *
91
- * If the provided value is a valid CSS custom property name (without the leading `--`),
92
- * the function returns a string in the format `var(--<val>, <val>)`, which uses the value
93
- * both as the custom property name (with a `--` prefix) and as the fallback value.
91
+ * If the provided value (`val`) is a valid CSS custom property name (without the leading `--`),
92
+ * the function returns a string in the form of `var(--<prefix-if-provided><val>, <val>)`. When a
93
+ * `prefix` is provided, it is prepended to the custom property name with a hyphen.
94
94
  *
95
- * If the value is not a valid custom property name, the function simply returns the value.
96
- *
97
- * If no input is given, the function returns `undefined`.
95
+ * If the value is not a valid custom property name, the function returns the original value.
98
96
  */
99
- declare const ensureCssVar: (val?: string) => string | undefined;
97
+ declare const ensureCssVar: (val: string, prefix?: string) => string;
100
98
 
101
99
  interface NestedStringObject {
102
100
  [key: string]: NestedStringObject | string;
@@ -135,6 +133,7 @@ type Theme = {
135
133
  Headline?: ComponentStyleFunction<string, string>;
136
134
  Popover?: ComponentStyleFunction<string, string>;
137
135
  HelpText?: Record<'container' | 'icon', ComponentStyleFunction<string, string>>;
136
+ IconButton?: ComponentStyleFunction<string, string>;
138
137
  Image?: ComponentStyleFunction<string, string>;
139
138
  Checkbox?: Record<'container' | 'label' | 'checkbox' | 'group', ComponentStyleFunction<string, string>>;
140
139
  Switch?: Record<'container' | 'track' | 'thumb', ComponentStyleFunction<string, string>>;
@@ -144,12 +143,13 @@ type Theme = {
144
143
  Link?: ComponentStyleFunction<string, string>;
145
144
  ListBox?: Record<'container' | 'list' | 'option' | 'section' | 'header', ComponentStyleFunction<string, string>>;
146
145
  Menu?: Record<'container' | 'section' | 'item', ComponentStyleFunction<string, string>>;
147
- Pagination?: ComponentStyleFunction<string, string>;
146
+ Pagination?: Record<'navigationButton' | 'pageButton' | 'icon', ComponentStyleFunction<string, string>>;
147
+ ProgressCycle?: ComponentStyleFunction<string, string>;
148
148
  Radio?: Record<'container' | 'label' | 'radio' | 'group', ComponentStyleFunction<string, string>>;
149
149
  Slider?: Record<'container' | 'track' | 'thumb' | 'output' | 'selectedTrack', ComponentStyleFunction<string, string>>;
150
150
  Select?: Record<'select' | 'icon', ComponentStyleFunction<string, string>>;
151
151
  NumberField?: Record<'group' | 'stepper' | 'input', ComponentStyleFunction<string, string>>;
152
- SectionMessage?: Record<'container' | 'icon' | 'title' | 'content', ComponentStyleFunction<string, string>>;
152
+ SectionMessage?: Record<'container' | 'icon' | 'title' | 'content' | 'close', ComponentStyleFunction<string, string>>;
153
153
  Table?: Record<'table' | 'headerRow' | 'header' | 'body' | 'row' | 'cell', ComponentStyleFunction<string, string>>;
154
154
  Tag?: Record<'tag' | 'listItems' | 'closeButton', ComponentStyleFunction<string, string>>;
155
155
  Text?: ComponentStyleFunction<string, string>;
@@ -158,7 +158,7 @@ type Theme = {
158
158
  Tabs?: Record<'container' | 'tabsList' | 'tabpanel' | 'tab', ComponentStyleFunction<string, string>>;
159
159
  Underlay?: ComponentStyleFunction<string, string>;
160
160
  Calendar?: Record<'calendar' | 'calendarCell' | 'calendarControllers' | 'calendarHeader' | 'calendarGrid', ComponentStyleFunction<string, string>>;
161
- DatePicker?: Record<'container' | 'button', ComponentStyleFunction<string, string>>;
161
+ DatePicker?: ComponentStyleFunction<string, string>;
162
162
  ComboBox?: ComponentStyleFunction<string, string>;
163
163
  XLoader?: Record<'container' | 'loader' | 'label', ComponentStyleFunction<string, string>>;
164
164
  };
@@ -239,6 +239,7 @@ declare const extendTheme: (newStyles: StylesProps, theme: Theme) => {
239
239
  Headline?: ComponentStyleFunction<string, string>;
240
240
  Popover?: ComponentStyleFunction<string, string>;
241
241
  HelpText?: Record<"container" | "icon", ComponentStyleFunction<string, string>>;
242
+ IconButton?: ComponentStyleFunction<string, string>;
242
243
  Image?: ComponentStyleFunction<string, string>;
243
244
  Checkbox?: Record<"container" | "label" | "checkbox" | "group", ComponentStyleFunction<string, string>>;
244
245
  Switch?: Record<"container" | "track" | "thumb", ComponentStyleFunction<string, string>>;
@@ -248,12 +249,13 @@ declare const extendTheme: (newStyles: StylesProps, theme: Theme) => {
248
249
  Link?: ComponentStyleFunction<string, string>;
249
250
  ListBox?: Record<"container" | "list" | "option" | "section" | "header", ComponentStyleFunction<string, string>>;
250
251
  Menu?: Record<"container" | "section" | "item", ComponentStyleFunction<string, string>>;
251
- Pagination?: ComponentStyleFunction<string, string>;
252
+ Pagination?: Record<"navigationButton" | "pageButton" | "icon", ComponentStyleFunction<string, string>>;
253
+ ProgressCycle?: ComponentStyleFunction<string, string>;
252
254
  Radio?: Record<"container" | "label" | "radio" | "group", ComponentStyleFunction<string, string>>;
253
255
  Slider?: Record<"container" | "track" | "thumb" | "output" | "selectedTrack", ComponentStyleFunction<string, string>>;
254
256
  Select?: Record<"select" | "icon", ComponentStyleFunction<string, string>>;
255
257
  NumberField?: Record<"group" | "stepper" | "input", ComponentStyleFunction<string, string>>;
256
- SectionMessage?: Record<"container" | "icon" | "title" | "content", ComponentStyleFunction<string, string>>;
258
+ SectionMessage?: Record<"container" | "icon" | "title" | "content" | "close", ComponentStyleFunction<string, string>>;
257
259
  Table?: Record<"table" | "headerRow" | "header" | "body" | "row" | "cell", ComponentStyleFunction<string, string>>;
258
260
  Tag?: Record<"tag" | "listItems" | "closeButton", ComponentStyleFunction<string, string>>;
259
261
  Text?: ComponentStyleFunction<string, string>;
@@ -262,7 +264,7 @@ declare const extendTheme: (newStyles: StylesProps, theme: Theme) => {
262
264
  Tabs?: Record<"container" | "tabsList" | "tabpanel" | "tab", ComponentStyleFunction<string, string>>;
263
265
  Underlay?: ComponentStyleFunction<string, string>;
264
266
  Calendar?: Record<"calendar" | "calendarCell" | "calendarControllers" | "calendarHeader" | "calendarGrid", ComponentStyleFunction<string, string>>;
265
- DatePicker?: Record<"container" | "button", ComponentStyleFunction<string, string>>;
267
+ DatePicker?: ComponentStyleFunction<string, string>;
266
268
  ComboBox?: ComponentStyleFunction<string, string>;
267
269
  XLoader?: Record<"container" | "loader" | "label", ComponentStyleFunction<string, string>>;
268
270
  };
package/dist/index.d.ts CHANGED
@@ -86,17 +86,15 @@ declare const get: (obj: object, path: string, fallback?: any) => any;
86
86
  */
87
87
  declare const isValidCssCustomPropertyName: (val: string) => boolean;
88
88
  /**
89
- * Returns a CSS variable reference string based on the input value.
89
+ * Ensures that the given value is formatted as a CSS variable reference.
90
90
  *
91
- * If the provided value is a valid CSS custom property name (without the leading `--`),
92
- * the function returns a string in the format `var(--<val>, <val>)`, which uses the value
93
- * both as the custom property name (with a `--` prefix) and as the fallback value.
91
+ * If the provided value (`val`) is a valid CSS custom property name (without the leading `--`),
92
+ * the function returns a string in the form of `var(--<prefix-if-provided><val>, <val>)`. When a
93
+ * `prefix` is provided, it is prepended to the custom property name with a hyphen.
94
94
  *
95
- * If the value is not a valid custom property name, the function simply returns the value.
96
- *
97
- * If no input is given, the function returns `undefined`.
95
+ * If the value is not a valid custom property name, the function returns the original value.
98
96
  */
99
- declare const ensureCssVar: (val?: string) => string | undefined;
97
+ declare const ensureCssVar: (val: string, prefix?: string) => string;
100
98
 
101
99
  interface NestedStringObject {
102
100
  [key: string]: NestedStringObject | string;
@@ -135,6 +133,7 @@ type Theme = {
135
133
  Headline?: ComponentStyleFunction<string, string>;
136
134
  Popover?: ComponentStyleFunction<string, string>;
137
135
  HelpText?: Record<'container' | 'icon', ComponentStyleFunction<string, string>>;
136
+ IconButton?: ComponentStyleFunction<string, string>;
138
137
  Image?: ComponentStyleFunction<string, string>;
139
138
  Checkbox?: Record<'container' | 'label' | 'checkbox' | 'group', ComponentStyleFunction<string, string>>;
140
139
  Switch?: Record<'container' | 'track' | 'thumb', ComponentStyleFunction<string, string>>;
@@ -144,12 +143,13 @@ type Theme = {
144
143
  Link?: ComponentStyleFunction<string, string>;
145
144
  ListBox?: Record<'container' | 'list' | 'option' | 'section' | 'header', ComponentStyleFunction<string, string>>;
146
145
  Menu?: Record<'container' | 'section' | 'item', ComponentStyleFunction<string, string>>;
147
- Pagination?: ComponentStyleFunction<string, string>;
146
+ Pagination?: Record<'navigationButton' | 'pageButton' | 'icon', ComponentStyleFunction<string, string>>;
147
+ ProgressCycle?: ComponentStyleFunction<string, string>;
148
148
  Radio?: Record<'container' | 'label' | 'radio' | 'group', ComponentStyleFunction<string, string>>;
149
149
  Slider?: Record<'container' | 'track' | 'thumb' | 'output' | 'selectedTrack', ComponentStyleFunction<string, string>>;
150
150
  Select?: Record<'select' | 'icon', ComponentStyleFunction<string, string>>;
151
151
  NumberField?: Record<'group' | 'stepper' | 'input', ComponentStyleFunction<string, string>>;
152
- SectionMessage?: Record<'container' | 'icon' | 'title' | 'content', ComponentStyleFunction<string, string>>;
152
+ SectionMessage?: Record<'container' | 'icon' | 'title' | 'content' | 'close', ComponentStyleFunction<string, string>>;
153
153
  Table?: Record<'table' | 'headerRow' | 'header' | 'body' | 'row' | 'cell', ComponentStyleFunction<string, string>>;
154
154
  Tag?: Record<'tag' | 'listItems' | 'closeButton', ComponentStyleFunction<string, string>>;
155
155
  Text?: ComponentStyleFunction<string, string>;
@@ -158,7 +158,7 @@ type Theme = {
158
158
  Tabs?: Record<'container' | 'tabsList' | 'tabpanel' | 'tab', ComponentStyleFunction<string, string>>;
159
159
  Underlay?: ComponentStyleFunction<string, string>;
160
160
  Calendar?: Record<'calendar' | 'calendarCell' | 'calendarControllers' | 'calendarHeader' | 'calendarGrid', ComponentStyleFunction<string, string>>;
161
- DatePicker?: Record<'container' | 'button', ComponentStyleFunction<string, string>>;
161
+ DatePicker?: ComponentStyleFunction<string, string>;
162
162
  ComboBox?: ComponentStyleFunction<string, string>;
163
163
  XLoader?: Record<'container' | 'loader' | 'label', ComponentStyleFunction<string, string>>;
164
164
  };
@@ -239,6 +239,7 @@ declare const extendTheme: (newStyles: StylesProps, theme: Theme) => {
239
239
  Headline?: ComponentStyleFunction<string, string>;
240
240
  Popover?: ComponentStyleFunction<string, string>;
241
241
  HelpText?: Record<"container" | "icon", ComponentStyleFunction<string, string>>;
242
+ IconButton?: ComponentStyleFunction<string, string>;
242
243
  Image?: ComponentStyleFunction<string, string>;
243
244
  Checkbox?: Record<"container" | "label" | "checkbox" | "group", ComponentStyleFunction<string, string>>;
244
245
  Switch?: Record<"container" | "track" | "thumb", ComponentStyleFunction<string, string>>;
@@ -248,12 +249,13 @@ declare const extendTheme: (newStyles: StylesProps, theme: Theme) => {
248
249
  Link?: ComponentStyleFunction<string, string>;
249
250
  ListBox?: Record<"container" | "list" | "option" | "section" | "header", ComponentStyleFunction<string, string>>;
250
251
  Menu?: Record<"container" | "section" | "item", ComponentStyleFunction<string, string>>;
251
- Pagination?: ComponentStyleFunction<string, string>;
252
+ Pagination?: Record<"navigationButton" | "pageButton" | "icon", ComponentStyleFunction<string, string>>;
253
+ ProgressCycle?: ComponentStyleFunction<string, string>;
252
254
  Radio?: Record<"container" | "label" | "radio" | "group", ComponentStyleFunction<string, string>>;
253
255
  Slider?: Record<"container" | "track" | "thumb" | "output" | "selectedTrack", ComponentStyleFunction<string, string>>;
254
256
  Select?: Record<"select" | "icon", ComponentStyleFunction<string, string>>;
255
257
  NumberField?: Record<"group" | "stepper" | "input", ComponentStyleFunction<string, string>>;
256
- SectionMessage?: Record<"container" | "icon" | "title" | "content", ComponentStyleFunction<string, string>>;
258
+ SectionMessage?: Record<"container" | "icon" | "title" | "content" | "close", ComponentStyleFunction<string, string>>;
257
259
  Table?: Record<"table" | "headerRow" | "header" | "body" | "row" | "cell", ComponentStyleFunction<string, string>>;
258
260
  Tag?: Record<"tag" | "listItems" | "closeButton", ComponentStyleFunction<string, string>>;
259
261
  Text?: ComponentStyleFunction<string, string>;
@@ -262,7 +264,7 @@ declare const extendTheme: (newStyles: StylesProps, theme: Theme) => {
262
264
  Tabs?: Record<"container" | "tabsList" | "tabpanel" | "tab", ComponentStyleFunction<string, string>>;
263
265
  Underlay?: ComponentStyleFunction<string, string>;
264
266
  Calendar?: Record<"calendar" | "calendarCell" | "calendarControllers" | "calendarHeader" | "calendarGrid", ComponentStyleFunction<string, string>>;
265
- DatePicker?: Record<"container" | "button", ComponentStyleFunction<string, string>>;
267
+ DatePicker?: ComponentStyleFunction<string, string>;
266
268
  ComboBox?: ComponentStyleFunction<string, string>;
267
269
  XLoader?: Record<"container" | "loader" | "label", ComponentStyleFunction<string, string>>;
268
270
  };
package/dist/index.js CHANGED
@@ -97,7 +97,7 @@ var get = (obj, path, fallback) => {
97
97
  return result === void 0 ? fallback : result;
98
98
  };
99
99
  var isValidCssCustomPropertyName = (val) => /^[A-Za-z0-9_-]+$/.test(val);
100
- var ensureCssVar = (val) => val ? isValidCssCustomPropertyName(val) ? `var(--${val}, ${val})` : val : void 0;
100
+ var ensureCssVar = (val, prefix) => isValidCssCustomPropertyName(val) ? `var(--${prefix ? `${prefix}-` : ""}${val}, ${val})` : val;
101
101
 
102
102
  // src/components/SVG/SVG.tsx
103
103
  var SVG = (0, import_react.forwardRef)(
@@ -110,7 +110,7 @@ var SVG = (0, import_react.forwardRef)(
110
110
  width: `${props.width || size}px`,
111
111
  height: `${props.height || size}px`,
112
112
  className: cn("flex-none fill-current", className),
113
- style: { color: ensureCssVar(color) }
113
+ style: { color: color && ensureCssVar(color, "color") }
114
114
  },
115
115
  children
116
116
  );
package/dist/index.mjs CHANGED
@@ -25,7 +25,7 @@ var get = (obj, path, fallback) => {
25
25
  return result === void 0 ? fallback : result;
26
26
  };
27
27
  var isValidCssCustomPropertyName = (val) => /^[A-Za-z0-9_-]+$/.test(val);
28
- var ensureCssVar = (val) => val ? isValidCssCustomPropertyName(val) ? `var(--${val}, ${val})` : val : void 0;
28
+ var ensureCssVar = (val, prefix) => isValidCssCustomPropertyName(val) ? `var(--${prefix ? `${prefix}-` : ""}${val}, ${val})` : val;
29
29
 
30
30
  // src/components/SVG/SVG.tsx
31
31
  var SVG = forwardRef(
@@ -38,7 +38,7 @@ var SVG = forwardRef(
38
38
  width: `${props.width || size}px`,
39
39
  height: `${props.height || size}px`,
40
40
  className: cn("flex-none fill-current", className),
41
- style: { color: ensureCssVar(color) }
41
+ style: { color: color && ensureCssVar(color, "color") }
42
42
  },
43
43
  children
44
44
  );
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@marigold/system",
3
- "version": "11.1.1",
3
+ "version": "11.2.1",
4
4
  "description": "Marigold System Library",
5
5
  "license": "MIT",
6
6
  "keywords": [
@@ -29,18 +29,19 @@
29
29
  "deepmerge": "4.3.1",
30
30
  "react-fast-compare": "3.2.2",
31
31
  "tailwind-merge": "2.6.0",
32
- "@marigold/types": "1.2.1"
32
+ "@marigold/types": "1.3.0"
33
33
  },
34
34
  "peerDependencies": {
35
- "react": "19.x",
36
- "react-dom": "19.x"
35
+ "react": ">=17.0.0",
36
+ "react-dom": ">=17.0.0"
37
37
  },
38
38
  "devDependencies": {
39
- "@babel/core": "7.26.8",
40
- "postcss": "8.5.2",
39
+ "@babel/core": "7.26.9",
40
+ "postcss": "8.5.3",
41
41
  "react": "19.0.0",
42
- "tailwindcss": "4.0.6",
43
- "tsup": "8.3.5",
42
+ "@types/react": "19.0.10",
43
+ "tailwindcss": "4.0.9",
44
+ "tsup": "8.3.6",
44
45
  "@marigold/tsconfig": "0.4.0"
45
46
  },
46
47
  "scripts": {