@marigold/system 7.1.0 → 7.2.0

package/dist/index.d.mts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import React__default, { ReactNode } from 'react';
 import { HtmlProps, KebabCase } from '@marigold/types';
+import { DateFormatterOptions } from '@react-aria/i18n';
 import { StringToBoolean, ClassProp } from 'class-variance-authority/dist/types';
 export { VariantProps } from 'class-variance-authority';
 
@@ -10,6 +11,20 @@ interface SVGProps extends Omit<HtmlProps<'svg'>, 'fill'> {
 }
 declare const SVG: React__default.ForwardRefExoticComponent<SVGProps & React__default.RefAttributes<SVGSVGElement>>;
 
+interface DateFormatProps extends DateFormatterOptions {
+    value: Date;
+    tabular?: boolean;
+}
+declare const DateFormat: ({ value, tabular, ...props }: DateFormatProps) => React__default.JSX.Element;
+
+interface NumericFormatProps extends Omit<Intl.NumberFormatOptions, 'style'> {
+    value: number | bigint;
+    numberingSystem?: string;
+    tabular?: boolean;
+    styleFormat?: string;
+}
+declare const NumericFormat: ({ value, styleFormat, tabular, ...props }: NumericFormatProps) => React__default.JSX.Element;
+
 type ConfigSchema = Record<string, Record<string, ClassValue>>;
 type ConfigVariants<T extends ConfigSchema> = {
     [Variant in keyof T]?: StringToBoolean<keyof T[Variant]> | null | undefined;
@@ -147,8 +162,9 @@ declare const useTheme: () => Theme;
 interface ThemeProviderProps<T extends Theme> {
     theme: T;
     children: ReactNode;
+    className?: string;
 }
-declare function ThemeProvider<T extends Theme>({ theme, children, }: ThemeProviderProps<T>): React__default.JSX.Element;
+declare function ThemeProvider<T extends Theme>({ theme, children, className, }: ThemeProviderProps<T>): React__default.JSX.Element;
 
 declare const useSmallScreen: () => boolean;
 
@@ -693,4 +709,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, type FontSizeProp, type FontStyleProp, type FontWeightProp, type GapSpaceProp, type GridColsAlignProp, type GridColumn, type NestedStringObject, 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, gridColsAlign, gridColumn, objectFit, objectPosition, paddingBottom, paddingLeft, paddingRight, paddingSpace, paddingSpaceX, paddingSpaceY, paddingTop, placeItems, textAlign, textSize, textStyle, useClassNames, useResponsiveValue, useSmallScreen, useStateProps, useTheme, width };

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import React__default, { ReactNode } from 'react';
 import { HtmlProps, KebabCase } from '@marigold/types';
+import { DateFormatterOptions } from '@react-aria/i18n';
 import { StringToBoolean, ClassProp } from 'class-variance-authority/dist/types';
 export { VariantProps } from 'class-variance-authority';
 
@@ -10,6 +11,20 @@ interface SVGProps extends Omit<HtmlProps<'svg'>, 'fill'> {
 }
 declare const SVG: React__default.ForwardRefExoticComponent<SVGProps & React__default.RefAttributes<SVGSVGElement>>;
 
+interface DateFormatProps extends DateFormatterOptions {
+    value: Date;
+    tabular?: boolean;
+}
+declare const DateFormat: ({ value, tabular, ...props }: DateFormatProps) => React__default.JSX.Element;
+
+interface NumericFormatProps extends Omit<Intl.NumberFormatOptions, 'style'> {
+    value: number | bigint;
+    numberingSystem?: string;
+    tabular?: boolean;
+    styleFormat?: string;
+}
+declare const NumericFormat: ({ value, styleFormat, tabular, ...props }: NumericFormatProps) => React__default.JSX.Element;
+
 type ConfigSchema = Record<string, Record<string, ClassValue>>;
 type ConfigVariants<T extends ConfigSchema> = {
     [Variant in keyof T]?: StringToBoolean<keyof T[Variant]> | null | undefined;
@@ -147,8 +162,9 @@ declare const useTheme: () => Theme;
 interface ThemeProviderProps<T extends Theme> {
     theme: T;
     children: ReactNode;
+    className?: string;
 }
-declare function ThemeProvider<T extends Theme>({ theme, children, }: ThemeProviderProps<T>): React__default.JSX.Element;
+declare function ThemeProvider<T extends Theme>({ theme, children, className, }: ThemeProviderProps<T>): React__default.JSX.Element;
 
 declare const useSmallScreen: () => boolean;
 
@@ -693,4 +709,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, type FontSizeProp, type FontStyleProp, type FontWeightProp, type GapSpaceProp, type GridColsAlignProp, type GridColumn, type NestedStringObject, 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, gridColsAlign, gridColumn, objectFit, objectPosition, paddingBottom, paddingLeft, paddingRight, paddingSpace, paddingSpaceX, paddingSpaceY, paddingTop, placeItems, textAlign, textSize, textStyle, useClassNames, useResponsiveValue, useSmallScreen, useStateProps, useTheme, width };

package/dist/index.js

@@ -30,6 +30,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  DateFormat: () => DateFormat,
+  NumericFormat: () => NumericFormat,
   SVG: () => SVG,
   ThemeProvider: () => ThemeProvider,
   alignment: () => alignment,
@@ -110,8 +112,34 @@ var SVG = (0, import_react.forwardRef)(
   )
 );
 
-// src/hooks/useTheme.tsx
+// 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));
+};
+
+// src/hooks/useTheme.tsx
+var import_react4 = __toESM(require("react"));
 
 // src/defaultTheme.ts
 var defaultTheme = {
@@ -127,17 +155,19 @@ var defaultTheme = {
 };
 
 // src/hooks/useTheme.tsx
-var InternalContext = (0, import_react2.createContext)(defaultTheme);
+var InternalContext = (0, import_react4.createContext)(defaultTheme);
 var useTheme = () => {
-  const theme = (0, import_react2.useContext)(InternalContext);
+  const theme = (0, import_react4.useContext)(InternalContext);
   return theme;
 };
 function ThemeProvider({
   theme,
-  children
+  children,
+  className
 }) {
-  var _a, _b;
-  return /* @__PURE__ */ import_react2.default.createElement("div", { "data-theme": theme.name, className: (_b = (_a = theme.root) == null ? void 0 : _a.call(theme)) != null ? _b : "" }, /* @__PURE__ */ import_react2.default.createElement(InternalContext.Provider, { value: theme }, children));
+  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));
 }
 
 // src/hooks/useClassNames.tsx
@@ -184,7 +214,7 @@ var useClassNames = ({
 };
 
 // src/hooks/useResponsiveValue.ts
-var import_react3 = require("react");
+var import_react5 = require("react");
 var useResponsiveValue = (values, defaultIndex = 0) => {
   const theme = useTheme();
   const screens = theme.screens || defaultTheme.screens;
@@ -193,8 +223,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_react3.useState)(defaultIndex);
-  (0, import_react3.useEffect)(() => {
+  const [index, setIndex] = (0, import_react5.useState)(defaultIndex);
+  (0, import_react5.useEffect)(() => {
     if (typeof window == "undefined")
       return;
     const getIndex = () => Object.values(screens).filter(
@@ -214,12 +244,12 @@ var useResponsiveValue = (values, defaultIndex = 0) => {
 };
 
 // src/hooks/useStateProps.ts
-var import_react4 = require("react");
+var import_react6 = 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_react4.useRef)({});
+  const statePropsRef = (0, import_react6.useRef)({});
   let stateProps = {};
   for (let state in states) {
     if (states[state]) {
@@ -234,7 +264,7 @@ var useStateProps = (states) => {
 };
 
 // src/hooks/useSmallScreen.ts
-var import_react5 = require("react");
+var import_react7 = require("react");
 var useSmallScreen = () => {
   const getMatches = () => {
     if (typeof window == "undefined") {
@@ -242,11 +272,11 @@ var useSmallScreen = () => {
     }
     return window.matchMedia("(max-width: 600px)").matches;
   };
-  const [matches, setMatches] = (0, import_react5.useState)(getMatches());
-  const handleResize = (0, import_react5.useCallback)(() => {
+  const [matches, setMatches] = (0, import_react7.useState)(getMatches());
+  const handleResize = (0, import_react7.useCallback)(() => {
     setMatches(getMatches());
   }, []);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     handleResize();
     if (typeof window == "undefined")
       return;
@@ -715,6 +745,8 @@ var cursorStyle = {
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  DateFormat,
+  NumericFormat,
   SVG,
   ThemeProvider,
   alignment,

package/dist/index.mjs

@@ -42,8 +42,34 @@ var SVG = forwardRef(
   )
 );
 
+// 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));
+};
+
 // src/hooks/useTheme.tsx
-import React2, { createContext, useContext } from "react";
+import React4, { createContext, useContext } from "react";
 
 // src/defaultTheme.ts
 var defaultTheme = {
@@ -66,10 +92,12 @@ var useTheme = () => {
 };
 function ThemeProvider({
   theme,
-  children
+  children,
+  className
 }) {
-  var _a, _b;
-  return /* @__PURE__ */ React2.createElement("div", { "data-theme": theme.name, className: (_b = (_a = theme.root) == null ? void 0 : _a.call(theme)) != null ? _b : "" }, /* @__PURE__ */ React2.createElement(InternalContext.Provider, { value: theme }, children));
+  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));
 }
 
 // src/hooks/useClassNames.tsx
@@ -646,6 +674,8 @@ var cursorStyle = {
   zoomOut: "cursor-zoom-out"
 };
 export {
+  DateFormat,
+  NumericFormat,
   SVG,
   ThemeProvider,
   alignment,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/system",
-  "version": "7.1.0",
+  "version": "7.2.0",
   "description": "Marigold System Library",
   "license": "MIT",
   "keywords": [
@@ -24,10 +24,11 @@
     "directory": "packages/system"
   },
   "dependencies": {
+    "@react-aria/i18n": "3.10.0",
     "class-variance-authority": "0.7.0",
     "deepmerge": "^4.2.2",
     "react-fast-compare": "^3.2.0",
-    "tailwind-merge": "2.1.0",
+    "tailwind-merge": "2.2.0",
     "@marigold/types": "1.1.0"
   },
   "peerDependencies": {
@@ -35,10 +36,10 @@
     "react-dom": "16.x || 17.x || 18.x"
   },
   "devDependencies": {
-    "@babel/core": "7.23.3",
-    "postcss": "8.4.32",
+    "@babel/core": "7.23.7",
+    "postcss": "8.4.33",
     "react": "18.2.0",
-    "tailwindcss": "3.3.6",
+    "tailwindcss": "3.4.1",
     "tsup": "8.0.1",
     "@marigold/tsconfig": "0.4.0"
   },