@marigold/system 11.1.0 → 11.1.1

package/dist/index.d.mts

@@ -76,6 +76,27 @@ 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;
+/**
+ * Returns a CSS variable reference string based on the input value.
+ *
+ * If the provided value is a valid CSS custom property name (without the leading `--`),
+ * the function returns a string in the format `var(--<val>, <val>)`, which uses the value
+ * both as the custom property name (with a `--` prefix) and as the fallback value.
+ *
+ * If the value is not a valid custom property name, the function simply returns the value.
+ *
+ * If no input is given, the function returns `undefined`.
+ */
+declare const ensureCssVar: (val?: string) => string | undefined;
 
 interface NestedStringObject {
     [key: string]: NestedStringObject | string;
@@ -943,4 +964,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,27 @@ 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;
+/**
+ * Returns a CSS variable reference string based on the input value.
+ *
+ * If the provided value is a valid CSS custom property name (without the leading `--`),
+ * the function returns a string in the format `var(--<val>, <val>)`, which uses the value
+ * both as the custom property name (with a `--` prefix) and as the fallback value.
+ *
+ * If the value is not a valid custom property name, the function simply returns the value.
+ *
+ * If no input is given, the function returns `undefined`.
+ */
+declare const ensureCssVar: (val?: string) => string | undefined;
 
 interface NestedStringObject {
     [key: string]: NestedStringObject | string;
@@ -943,4 +964,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) => val ? isValidCssCustomPropertyName(val) ? `var(--${val}, ${val})` : val : void 0;
 
 // 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: ensureCssVar(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) => val ? isValidCssCustomPropertyName(val) ? `var(--${val}, ${val})` : val : void 0;
 
 // 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: ensureCssVar(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.1.1",
   "description": "Marigold System Library",
   "license": "MIT",
   "keywords": [