@marigold/system 11.1.0 → 11.2.0

package/dist/index.d.mts

@@ -76,6 +76,25 @@ declare const createVar: (o: {
  * Based on: https://github.com/developit/dlv
  */
 declare const get: (obj: object, path: string, fallback?: any) => any;
+/**
+ * Checks if a given string is a valid CSS custom property name (without the leading `--`).
+ *
+ * This simplified check ensures:
+ * - The name does not start with a digit.
+ * - It contains only word characters (letters, digits, underscore) or hyphens.
+ * - It must include at least one hyphen to be considered a custom property name.
+ */
+declare const isValidCssCustomPropertyName: (val: string) => boolean;
+/**
+ * Ensures that the given value is formatted as a CSS variable reference.
+ *
+ * If the provided value (`val`) is a valid CSS custom property name (without the leading `--`),
+ * the function returns a string in the form of `var(--<prefix-if-provided><val>, <val>)`. When a
+ * `prefix` is provided, it is prepended to the custom property name with a hyphen.
+ *
+ * If the value is not a valid custom property name, the function returns the original value.
+ */
+declare const ensureCssVar: (val: string, prefix?: string) => string;
 
 interface NestedStringObject {
     [key: string]: NestedStringObject | string;
@@ -943,4 +962,4 @@ type HeightProp = {
     height?: keyof typeof height;
 };
 
-export { type AlignmentProp, type AspectProp, type ComponentClassNames, type ComponentNames, type ComponentState, type ComponentStyleFunction, type Config, type ConfigSchema, type ConfigVariants, type ConfigVariantsMulti, type CursorProp, DateFormat, type FontSizeProp, type FontStyleProp, type FontWeightProp, type GapSpaceProp, type HeightProp, type 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, height, objectFit, objectPosition, paddingBottom, paddingLeft, paddingRight, paddingSpace, paddingSpaceX, paddingSpaceY, paddingTop, placeItems, textAlign, textSize, textStyle, useClassNames, useResponsiveValue, useSmallScreen, useStateProps, useTheme, width };
+export { type AlignmentProp, type AspectProp, type ComponentClassNames, type ComponentNames, type ComponentState, type ComponentStyleFunction, type Config, type ConfigSchema, type ConfigVariants, type ConfigVariantsMulti, type CursorProp, DateFormat, type FontSizeProp, type FontStyleProp, type FontWeightProp, type GapSpaceProp, type HeightProp, type 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, ensureCssVar, extendTheme, fontWeight, gapSpace, get, height, isValidCssCustomPropertyName, objectFit, objectPosition, paddingBottom, paddingLeft, paddingRight, paddingSpace, paddingSpaceX, paddingSpaceY, paddingTop, placeItems, textAlign, textSize, textStyle, useClassNames, useResponsiveValue, useSmallScreen, useStateProps, useTheme, width };

package/dist/index.d.ts

@@ -76,6 +76,25 @@ declare const createVar: (o: {
  * Based on: https://github.com/developit/dlv
  */
 declare const get: (obj: object, path: string, fallback?: any) => any;
+/**
+ * Checks if a given string is a valid CSS custom property name (without the leading `--`).
+ *
+ * This simplified check ensures:
+ * - The name does not start with a digit.
+ * - It contains only word characters (letters, digits, underscore) or hyphens.
+ * - It must include at least one hyphen to be considered a custom property name.
+ */
+declare const isValidCssCustomPropertyName: (val: string) => boolean;
+/**
+ * Ensures that the given value is formatted as a CSS variable reference.
+ *
+ * If the provided value (`val`) is a valid CSS custom property name (without the leading `--`),
+ * the function returns a string in the form of `var(--<prefix-if-provided><val>, <val>)`. When a
+ * `prefix` is provided, it is prepended to the custom property name with a hyphen.
+ *
+ * If the value is not a valid custom property name, the function returns the original value.
+ */
+declare const ensureCssVar: (val: string, prefix?: string) => string;
 
 interface NestedStringObject {
     [key: string]: NestedStringObject | string;
@@ -943,4 +962,4 @@ type HeightProp = {
     height?: keyof typeof height;
 };
 
-export { type AlignmentProp, type AspectProp, type ComponentClassNames, type ComponentNames, type ComponentState, type ComponentStyleFunction, type Config, type ConfigSchema, type ConfigVariants, type ConfigVariantsMulti, type CursorProp, DateFormat, type FontSizeProp, type FontStyleProp, type FontWeightProp, type GapSpaceProp, type HeightProp, type 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, height, objectFit, objectPosition, paddingBottom, paddingLeft, paddingRight, paddingSpace, paddingSpaceX, paddingSpaceY, paddingTop, placeItems, textAlign, textSize, textStyle, useClassNames, useResponsiveValue, useSmallScreen, useStateProps, useTheme, width };
+export { type AlignmentProp, type AspectProp, type ComponentClassNames, type ComponentNames, type ComponentState, type ComponentStyleFunction, type Config, type ConfigSchema, type ConfigVariants, type ConfigVariantsMulti, type CursorProp, DateFormat, type FontSizeProp, type FontStyleProp, type FontWeightProp, type GapSpaceProp, type HeightProp, type 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, ensureCssVar, extendTheme, fontWeight, gapSpace, get, height, isValidCssCustomPropertyName, objectFit, objectPosition, paddingBottom, paddingLeft, paddingRight, paddingSpace, paddingSpaceX, paddingSpaceY, paddingTop, placeItems, textAlign, textSize, textStyle, useClassNames, useResponsiveValue, useSmallScreen, useStateProps, useTheme, width };

package/dist/index.js

@@ -41,11 +41,13 @@ __export(index_exports, {
   cursorStyle: () => cursorStyle,
   cva: () => cva,
   defaultTheme: () => defaultTheme,
+  ensureCssVar: () => ensureCssVar,
   extendTheme: () => extendTheme,
   fontWeight: () => fontWeight,
   gapSpace: () => gapSpace,
   get: () => get,
   height: () => height,
+  isValidCssCustomPropertyName: () => isValidCssCustomPropertyName,
   objectFit: () => objectFit,
   objectPosition: () => objectPosition,
   paddingBottom: () => paddingBottom,
@@ -94,6 +96,8 @@ var get = (obj, path, fallback) => {
   }
   return result === void 0 ? fallback : result;
 };
+var isValidCssCustomPropertyName = (val) => /^[A-Za-z0-9_-]+$/.test(val);
+var ensureCssVar = (val, prefix) => isValidCssCustomPropertyName(val) ? `var(--${prefix ? `${prefix}-` : ""}${val}, ${val})` : val;
 
 // src/components/SVG/SVG.tsx
 var SVG = (0, import_react.forwardRef)(
@@ -106,7 +110,7 @@ var SVG = (0, import_react.forwardRef)(
         width: `${props.width || size}px`,
         height: `${props.height || size}px`,
         className: cn("flex-none fill-current", className),
-        style: { color: color && `var(--color-${color})` }
+        style: { color: color && ensureCssVar(color, "color") }
       },
       children
     );
@@ -903,11 +907,13 @@ var cursorStyle = {
   cursorStyle,
   cva,
   defaultTheme,
+  ensureCssVar,
   extendTheme,
   fontWeight,
   gapSpace,
   get,
   height,
+  isValidCssCustomPropertyName,
   objectFit,
   objectPosition,
   paddingBottom,

package/dist/index.mjs

@@ -24,6 +24,8 @@ var get = (obj, path, fallback) => {
   }
   return result === void 0 ? fallback : result;
 };
+var isValidCssCustomPropertyName = (val) => /^[A-Za-z0-9_-]+$/.test(val);
+var ensureCssVar = (val, prefix) => isValidCssCustomPropertyName(val) ? `var(--${prefix ? `${prefix}-` : ""}${val}, ${val})` : val;
 
 // src/components/SVG/SVG.tsx
 var SVG = forwardRef(
@@ -36,7 +38,7 @@ var SVG = forwardRef(
         width: `${props.width || size}px`,
         height: `${props.height || size}px`,
         className: cn("flex-none fill-current", className),
-        style: { color: color && `var(--color-${color})` }
+        style: { color: color && ensureCssVar(color, "color") }
       },
       children
     );
@@ -832,11 +834,13 @@ export {
   cursorStyle,
   cva,
   defaultTheme,
+  ensureCssVar,
   extendTheme,
   fontWeight,
   gapSpace,
   get,
   height,
+  isValidCssCustomPropertyName,
   objectFit,
   objectPosition,
   paddingBottom,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/system",
-  "version": "11.1.0",
+  "version": "11.2.0",
   "description": "Marigold System Library",
   "license": "MIT",
   "keywords": [
@@ -29,18 +29,19 @@
     "deepmerge": "4.3.1",
     "react-fast-compare": "3.2.2",
     "tailwind-merge": "2.6.0",
-    "@marigold/types": "1.2.1"
+    "@marigold/types": "1.3.0"
   },
   "peerDependencies": {
-    "react": "19.x",
-    "react-dom": "19.x"
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
   },
   "devDependencies": {
-    "@babel/core": "7.26.8",
+    "@babel/core": "7.26.9",
     "postcss": "8.5.2",
     "react": "19.0.0",
+    "@types/react": "19.0.8",
     "tailwindcss": "4.0.6",
-    "tsup": "8.3.5",
+    "tsup": "8.3.6",
     "@marigold/tsconfig": "0.4.0"
   },
   "scripts": {