@marigold/system 7.2.0 → 7.3.0

package/dist/index.d.mts

@@ -5,7 +5,7 @@ import { DateFormatterOptions } from '@react-aria/i18n';
 import { StringToBoolean, ClassProp } from 'class-variance-authority/dist/types';
 export { VariantProps } from 'class-variance-authority';
 
-interface SVGProps extends Omit<HtmlProps<'svg'>, 'fill'> {
+interface SVGProps extends Omit<HtmlProps<'svg'>, 'fill' | 'style'> {
     size?: number | string | number[] | string[];
     className?: string;
 }
@@ -49,6 +49,9 @@ declare const cn: (...inputs: ClassValue[]) => string;
 declare const createVar: (o: {
     [key: string]: string | number | undefined;
 }) => React.CSSProperties;
+declare const isObject: (val: any) => val is {
+    [key: string]: any;
+};
 /**
  * Safely get a dot-notated path within a nested object, with ability
  * to return a default if the full key path does not exist or
@@ -57,6 +60,15 @@ declare const createVar: (o: {
  * Based on: https://github.com/developit/dlv
  */
 declare const get: (obj: object, path: string, fallback?: any) => any;
+/**
+ * Safely get a color value from a Tailwind theme object. This also supports
+ * Tailwind's "DEFAULT" fallback.
+ *
+ * Note: Use the CSS "var name" (e.g. primary-500) not the dot notation.
+ */
+declare const getColor: (theme: {
+    colors?: object;
+}, path: string, fallback?: any) => any;
 
 interface NestedStringObject {
     [key: string]: NestedStringObject | string;
@@ -709,4 +721,4 @@ type WidthProp = {
     width?: keyof typeof width;
 };
 
-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, gridColsAlign, gridColumn, 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 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 };

package/dist/index.d.ts

@@ -5,7 +5,7 @@ import { DateFormatterOptions } from '@react-aria/i18n';
 import { StringToBoolean, ClassProp } from 'class-variance-authority/dist/types';
 export { VariantProps } from 'class-variance-authority';
 
-interface SVGProps extends Omit<HtmlProps<'svg'>, 'fill'> {
+interface SVGProps extends Omit<HtmlProps<'svg'>, 'fill' | 'style'> {
     size?: number | string | number[] | string[];
     className?: string;
 }
@@ -49,6 +49,9 @@ declare const cn: (...inputs: ClassValue[]) => string;
 declare const createVar: (o: {
     [key: string]: string | number | undefined;
 }) => React.CSSProperties;
+declare const isObject: (val: any) => val is {
+    [key: string]: any;
+};
 /**
  * Safely get a dot-notated path within a nested object, with ability
  * to return a default if the full key path does not exist or
@@ -57,6 +60,15 @@ declare const createVar: (o: {
  * Based on: https://github.com/developit/dlv
  */
 declare const get: (obj: object, path: string, fallback?: any) => any;
+/**
+ * Safely get a color value from a Tailwind theme object. This also supports
+ * Tailwind's "DEFAULT" fallback.
+ *
+ * Note: Use the CSS "var name" (e.g. primary-500) not the dot notation.
+ */
+declare const getColor: (theme: {
+    colors?: object;
+}, path: string, fallback?: any) => any;
 
 interface NestedStringObject {
     [key: string]: NestedStringObject | string;
@@ -709,4 +721,4 @@ type WidthProp = {
     width?: keyof typeof width;
 };
 
-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, gridColsAlign, gridColumn, 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 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 };

package/dist/index.js

@@ -44,8 +44,10 @@ __export(src_exports, {
   fontWeight: () => fontWeight,
   gapSpace: () => gapSpace,
   get: () => get,
+  getColor: () => getColor,
   gridColsAlign: () => gridColsAlign,
   gridColumn: () => gridColumn,
+  isObject: () => isObject,
   objectFit: () => objectFit,
   objectPosition: () => objectPosition,
   paddingBottom: () => paddingBottom,
@@ -69,7 +71,7 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/components/SVG/SVG.tsx
-var import_react = __toESM(require("react"));
+var import_react5 = __toESM(require("react"));
 
 // src/utils.ts
 var import_class_variance_authority = require("class-variance-authority");
@@ -86,6 +88,7 @@ var cn = (...inputs) => (0, import_tailwind_merge.twMerge)((0, import_class_vari
 var createVar = (o) => Object.fromEntries(
   Object.entries(o).map(([name, val]) => [`--${name}`, val])
 );
+var isObject = (val) => val && val.constructor === Object;
 var get = (obj, path, fallback) => {
   const key = path.split(".");
   let result = obj;
@@ -96,50 +99,13 @@ var get = (obj, path, fallback) => {
   }
   return result === void 0 ? fallback : result;
 };
-
-// src/components/SVG/SVG.tsx
-var SVG = (0, import_react.forwardRef)(
-  ({ size = 24, children, className, ...props }, ref) => /* @__PURE__ */ import_react.default.createElement(
-    "svg",
-    {
-      ...props,
-      ref,
-      width: `${props.width || size}px`,
-      height: `${props.height || size}px`,
-      className: cn("flex-none fill-current", className)
-    },
-    children
-  )
-);
-
-// src/components/Formatters/DateFormat.tsx
-var import_react2 = __toESM(require("react"));
-var import_i18n = require("@react-aria/i18n");
-var DateFormat = ({ value, tabular, ...props }) => {
-  const dateFormatter = (0, import_i18n.useDateFormatter)({
-    ...props
-  });
-  return /* @__PURE__ */ import_react2.default.createElement("span", { className: tabular ? "tabular-nums" : "" }, dateFormatter.format(value));
-};
-
-// src/components/Formatters/NumericFormat.tsx
-var import_react3 = __toESM(require("react"));
-var import_i18n2 = require("@react-aria/i18n");
-var NumericFormat = ({
-  value,
-  styleFormat,
-  tabular = true,
-  ...props
-}) => {
-  const numberFormatter = (0, import_i18n2.useNumberFormatter)({
-    style: styleFormat,
-    ...props
-  });
-  return /* @__PURE__ */ import_react3.default.createElement("span", { className: tabular ? "tabular-nums" : "" }, numberFormatter.format(value));
+var getColor = (theme, path, fallback) => {
+  const result = get(theme.colors || {}, path.replace("-", "."), fallback);
+  return isObject(result) ? result["DEFAULT"] : result;
 };
 
 // src/hooks/useTheme.tsx
-var import_react4 = __toESM(require("react"));
+var import_react = __toESM(require("react"));
 
 // src/defaultTheme.ts
 var defaultTheme = {
@@ -155,9 +121,9 @@ var defaultTheme = {
 };
 
 // src/hooks/useTheme.tsx
-var InternalContext = (0, import_react4.createContext)(defaultTheme);
+var InternalContext = (0, import_react.createContext)(defaultTheme);
 var useTheme = () => {
-  const theme = (0, import_react4.useContext)(InternalContext);
+  const theme = (0, import_react.useContext)(InternalContext);
   return theme;
 };
 function ThemeProvider({
@@ -167,7 +133,7 @@ function ThemeProvider({
 }) {
   var _a;
   const root = (_a = theme.root) == null ? void 0 : _a.call(theme);
-  return /* @__PURE__ */ import_react4.default.createElement(InternalContext.Provider, { value: theme }, /* @__PURE__ */ import_react4.default.createElement("div", { className: cn(root ? root : "", className) }, children));
+  return /* @__PURE__ */ import_react.default.createElement(InternalContext.Provider, { value: theme }, /* @__PURE__ */ import_react.default.createElement("div", { className: cn(root ? root : "", className) }, children));
 }
 
 // src/hooks/useClassNames.tsx
@@ -214,7 +180,7 @@ var useClassNames = ({
 };
 
 // src/hooks/useResponsiveValue.ts
-var import_react5 = require("react");
+var import_react2 = require("react");
 var useResponsiveValue = (values, defaultIndex = 0) => {
   const theme = useTheme();
   const screens = theme.screens || defaultTheme.screens;
@@ -223,8 +189,8 @@ var useResponsiveValue = (values, defaultIndex = 0) => {
       `Default breakpoint index is out of bounds. Theme has ${Object.keys(screens).length + 1} breakpoints, default is ${defaultIndex}.`
     );
   }
-  const [index, setIndex] = (0, import_react5.useState)(defaultIndex);
-  (0, import_react5.useEffect)(() => {
+  const [index, setIndex] = (0, import_react2.useState)(defaultIndex);
+  (0, import_react2.useEffect)(() => {
     if (typeof window == "undefined")
       return;
     const getIndex = () => Object.values(screens).filter(
@@ -244,12 +210,12 @@ var useResponsiveValue = (values, defaultIndex = 0) => {
 };
 
 // src/hooks/useStateProps.ts
-var import_react6 = require("react");
+var import_react3 = require("react");
 var import_react_fast_compare = __toESM(require("react-fast-compare"));
 var KEBAB_REGEX = /[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g;
 var toKebap = (val) => val.replace(KEBAB_REGEX, (match) => `-${match.toLocaleLowerCase()}`);
 var useStateProps = (states) => {
-  const statePropsRef = (0, import_react6.useRef)({});
+  const statePropsRef = (0, import_react3.useRef)({});
   let stateProps = {};
   for (let state in states) {
     if (states[state]) {
@@ -264,7 +230,7 @@ var useStateProps = (states) => {
 };
 
 // src/hooks/useSmallScreen.ts
-var import_react7 = require("react");
+var import_react4 = require("react");
 var useSmallScreen = () => {
   const getMatches = () => {
     if (typeof window == "undefined") {
@@ -272,11 +238,11 @@ var useSmallScreen = () => {
     }
     return window.matchMedia("(max-width: 600px)").matches;
   };
-  const [matches, setMatches] = (0, import_react7.useState)(getMatches());
-  const handleResize = (0, import_react7.useCallback)(() => {
+  const [matches, setMatches] = (0, import_react4.useState)(getMatches());
+  const handleResize = (0, import_react4.useCallback)(() => {
     setMatches(getMatches());
   }, []);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     handleResize();
     if (typeof window == "undefined")
       return;
@@ -286,6 +252,58 @@ var useSmallScreen = () => {
   return matches;
 };
 
+// src/components/SVG/SVG.tsx
+var SVG = (0, import_react5.forwardRef)(
+  ({ size = 24, children, className, color, ...props }, ref) => {
+    const theme = useTheme();
+    return /* @__PURE__ */ import_react5.default.createElement(
+      "svg",
+      {
+        ...props,
+        ref,
+        width: `${props.width || size}px`,
+        height: `${props.height || size}px`,
+        className: cn("flex-none fill-current text-[--color]", className),
+        style: createVar({
+          color: color && getColor(
+            theme,
+            color,
+            color
+            /* fallback */
+          )
+        })
+      },
+      children
+    );
+  }
+);
+
+// src/components/Formatters/DateFormat.tsx
+var import_react6 = __toESM(require("react"));
+var import_i18n = require("@react-aria/i18n");
+var DateFormat = ({ value, tabular, ...props }) => {
+  const dateFormatter = (0, import_i18n.useDateFormatter)({
+    ...props
+  });
+  return /* @__PURE__ */ import_react6.default.createElement("span", { className: tabular ? "tabular-nums" : "" }, dateFormatter.format(value));
+};
+
+// src/components/Formatters/NumericFormat.tsx
+var import_react7 = __toESM(require("react"));
+var import_i18n2 = require("@react-aria/i18n");
+var NumericFormat = ({
+  value,
+  styleFormat,
+  tabular = true,
+  ...props
+}) => {
+  const numberFormatter = (0, import_i18n2.useNumberFormatter)({
+    style: styleFormat,
+    ...props
+  });
+  return /* @__PURE__ */ import_react7.default.createElement("span", { className: tabular ? "tabular-nums" : "" }, numberFormatter.format(value));
+};
+
 // src/style-props.tsx
 var width = {
   full: "w-full",
@@ -759,8 +777,10 @@ var cursorStyle = {
   fontWeight,
   gapSpace,
   get,
+  getColor,
   gridColsAlign,
   gridColumn,
+  isObject,
   objectFit,
   objectPosition,
   paddingBottom,

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/components/SVG/SVG.tsx
-import React, { forwardRef } from "react";
+import React2, { forwardRef } from "react";
 
 // src/utils.ts
 import { cx } from "class-variance-authority";
@@ -16,6 +16,7 @@ var cn = (...inputs) => twMerge(cx(inputs));
 var createVar = (o) => Object.fromEntries(
   Object.entries(o).map(([name, val]) => [`--${name}`, val])
 );
+var isObject = (val) => val && val.constructor === Object;
 var get = (obj, path, fallback) => {
   const key = path.split(".");
   let result = obj;
@@ -26,50 +27,13 @@ var get = (obj, path, fallback) => {
   }
   return result === void 0 ? fallback : result;
 };
-
-// src/components/SVG/SVG.tsx
-var SVG = forwardRef(
-  ({ size = 24, children, className, ...props }, ref) => /* @__PURE__ */ React.createElement(
-    "svg",
-    {
-      ...props,
-      ref,
-      width: `${props.width || size}px`,
-      height: `${props.height || size}px`,
-      className: cn("flex-none fill-current", className)
-    },
-    children
-  )
-);
-
-// src/components/Formatters/DateFormat.tsx
-import React2 from "react";
-import { useDateFormatter } from "@react-aria/i18n";
-var DateFormat = ({ value, tabular, ...props }) => {
-  const dateFormatter = useDateFormatter({
-    ...props
-  });
-  return /* @__PURE__ */ React2.createElement("span", { className: tabular ? "tabular-nums" : "" }, dateFormatter.format(value));
-};
-
-// src/components/Formatters/NumericFormat.tsx
-import React3 from "react";
-import { useNumberFormatter } from "@react-aria/i18n";
-var NumericFormat = ({
-  value,
-  styleFormat,
-  tabular = true,
-  ...props
-}) => {
-  const numberFormatter = useNumberFormatter({
-    style: styleFormat,
-    ...props
-  });
-  return /* @__PURE__ */ React3.createElement("span", { className: tabular ? "tabular-nums" : "" }, numberFormatter.format(value));
+var getColor = (theme, path, fallback) => {
+  const result = get(theme.colors || {}, path.replace("-", "."), fallback);
+  return isObject(result) ? result["DEFAULT"] : result;
 };
 
 // src/hooks/useTheme.tsx
-import React4, { createContext, useContext } from "react";
+import React, { createContext, useContext } from "react";
 
 // src/defaultTheme.ts
 var defaultTheme = {
@@ -97,7 +61,7 @@ function ThemeProvider({
 }) {
   var _a;
   const root = (_a = theme.root) == null ? void 0 : _a.call(theme);
-  return /* @__PURE__ */ React4.createElement(InternalContext.Provider, { value: theme }, /* @__PURE__ */ React4.createElement("div", { className: cn(root ? root : "", className) }, children));
+  return /* @__PURE__ */ React.createElement(InternalContext.Provider, { value: theme }, /* @__PURE__ */ React.createElement("div", { className: cn(root ? root : "", className) }, children));
 }
 
 // src/hooks/useClassNames.tsx
@@ -216,6 +180,58 @@ var useSmallScreen = () => {
   return matches;
 };
 
+// src/components/SVG/SVG.tsx
+var SVG = forwardRef(
+  ({ size = 24, children, className, color, ...props }, ref) => {
+    const theme = useTheme();
+    return /* @__PURE__ */ React2.createElement(
+      "svg",
+      {
+        ...props,
+        ref,
+        width: `${props.width || size}px`,
+        height: `${props.height || size}px`,
+        className: cn("flex-none fill-current text-[--color]", className),
+        style: createVar({
+          color: color && getColor(
+            theme,
+            color,
+            color
+            /* fallback */
+          )
+        })
+      },
+      children
+    );
+  }
+);
+
+// src/components/Formatters/DateFormat.tsx
+import React3 from "react";
+import { useDateFormatter } from "@react-aria/i18n";
+var DateFormat = ({ value, tabular, ...props }) => {
+  const dateFormatter = useDateFormatter({
+    ...props
+  });
+  return /* @__PURE__ */ React3.createElement("span", { className: tabular ? "tabular-nums" : "" }, dateFormatter.format(value));
+};
+
+// src/components/Formatters/NumericFormat.tsx
+import React4 from "react";
+import { useNumberFormatter } from "@react-aria/i18n";
+var NumericFormat = ({
+  value,
+  styleFormat,
+  tabular = true,
+  ...props
+}) => {
+  const numberFormatter = useNumberFormatter({
+    style: styleFormat,
+    ...props
+  });
+  return /* @__PURE__ */ React4.createElement("span", { className: tabular ? "tabular-nums" : "" }, numberFormatter.format(value));
+};
+
 // src/style-props.tsx
 var width = {
   full: "w-full",
@@ -688,8 +704,10 @@ export {
   fontWeight,
   gapSpace,
   get,
+  getColor,
   gridColsAlign,
   gridColumn,
+  isObject,
   objectFit,
   objectPosition,
   paddingBottom,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/system",
-  "version": "7.2.0",
+  "version": "7.3.0",
   "description": "Marigold System Library",
   "license": "MIT",
   "keywords": [