@marigold/system 11.4.1 → 12.0.0

package/dist/index.d.mts

@@ -1,6 +1,6 @@
-import React$1, { ReactNode } from 'react';
+import React$1, { Context, ReactNode } from 'react';
 import { HtmlProps, KebabCase } from '@marigold/types';
-import { DateFormatterOptions } from '@react-aria/i18n';
+import { DateFormatterOptions, useNumberFormatter } from '@react-aria/i18n';
 import { ClassValue, StringToBoolean, ClassProp } from 'class-variance-authority/dist/types';
 export { ClassValue } from 'class-variance-authority/dist/types';
 export { VariantProps } from 'class-variance-authority';
@@ -30,11 +30,13 @@ interface DateFormatProps extends DateFormatterOptions {
 }
 declare const DateFormat: ({ value, tabular, ...props }: DateFormatProps) => React$1.JSX.Element;
 
-interface NumericFormatProps extends Intl.NumberFormatOptions {
+type NumerFormatterOptions = NonNullable<Parameters<typeof useNumberFormatter>[0]>;
+type StringNumericLiteral = `${number}` | 'Infinity' | '-Infinity' | '+Infinity';
+interface NumericFormatProps extends NumerFormatterOptions {
     /**
      * Value to be formatted.
      */
-    value: number | bigint;
+    value: number | bigint | StringNumericLiteral | [number, number] | [bigint, bigint] | [StringNumericLiteral, StringNumericLiteral];
     /**
      * The numberingSystem accessor property of Intl.Locale instances returns the numeral system for this locale.
      */
@@ -124,6 +126,7 @@ type Theme = {
         Body?: ComponentStyleFunction<string, string>;
         Button?: ComponentStyleFunction<string, string>;
         Card?: ComponentStyleFunction<string, string>;
+        CloseButton?: ComponentStyleFunction<string, string>;
         DateField?: Record<'segment' | 'field' | 'action', ComponentStyleFunction<string, string>>;
         Dialog?: Record<'closeButton' | 'container' | 'header' | 'content' | 'actions' | 'title', ComponentStyleFunction<string, string>>;
         Divider?: ComponentStyleFunction<string, string>;
@@ -144,6 +147,7 @@ type Theme = {
         Link?: ComponentStyleFunction<string, string>;
         ListBox?: Record<'container' | 'list' | 'item' | 'section' | 'header', ComponentStyleFunction<string, string>>;
         Menu?: Record<'container' | 'section' | 'item', ComponentStyleFunction<string, string>>;
+        Modal?: ComponentStyleFunction<string, string>;
         MultiSelect?: Record<'container' | 'closeButton' | 'field' | 'input' | 'icon' | 'listContainer' | 'list' | 'option' | 'tag' | 'valueContainer', ComponentStyleFunction<string, string>>;
         Pagination?: Record<'navigationButton' | 'pageButton' | 'icon', ComponentStyleFunction<string, string>>;
         ProgressCycle?: ComponentStyleFunction<string, string>;
@@ -169,6 +173,11 @@ type ComponentNames = keyof Theme['components'];
 type ThemeComponent<C extends ComponentNames> = NonNullable<Theme['components'][C]>;
 type ThemeComponentParts<C extends ComponentNames> = keyof ThemeComponent<C>;
 
+interface ComponentContextProps {
+    size?: string;
+    variant?: string;
+    [key: string]: any;
+}
 interface UseClassNamesProps<C extends ComponentNames> {
     component: C;
     variant?: string;
@@ -176,11 +185,12 @@ interface UseClassNamesProps<C extends ComponentNames> {
     className?: ThemeComponent<C> extends (...args: any) => any ? string : {
         [slot in keyof ThemeComponent<C>]?: string;
     };
+    context?: Context<ComponentContextProps>;
 }
 type ComponentClassNames<C extends ComponentNames> = ThemeComponent<C> extends (...args: any) => any ? string : {
     [slot in keyof ThemeComponent<C>]: string;
 };
-declare const useClassNames: <C extends ComponentNames>({ component, className, variant, size, }: UseClassNamesProps<C>) => ComponentClassNames<C>;
+declare const useClassNames: <C extends ComponentNames>({ component, className, variant, size, context: ComponentContext, }: UseClassNamesProps<C>) => ComponentClassNames<C>;
 
 /**
  * Hook that can be used to return values based on the current screen size,
@@ -233,6 +243,7 @@ declare const extendTheme: (newStyles: StylesProps, theme: Theme) => {
         Body?: ComponentStyleFunction<string, string>;
         Button?: ComponentStyleFunction<string, string>;
         Card?: ComponentStyleFunction<string, string>;
+        CloseButton?: ComponentStyleFunction<string, string>;
         DateField?: Record<"segment" | "field" | "action", ComponentStyleFunction<string, string>>;
         Dialog?: Record<"closeButton" | "container" | "header" | "content" | "actions" | "title", ComponentStyleFunction<string, string>>;
         Divider?: ComponentStyleFunction<string, string>;
@@ -253,6 +264,7 @@ declare const extendTheme: (newStyles: StylesProps, theme: Theme) => {
         Link?: ComponentStyleFunction<string, string>;
         ListBox?: Record<"container" | "list" | "item" | "section" | "header", ComponentStyleFunction<string, string>>;
         Menu?: Record<"container" | "section" | "item", ComponentStyleFunction<string, string>>;
+        Modal?: ComponentStyleFunction<string, string>;
         MultiSelect?: Record<"container" | "closeButton" | "field" | "input" | "icon" | "listContainer" | "list" | "option" | "tag" | "valueContainer", ComponentStyleFunction<string, string>>;
         Pagination?: Record<"navigationButton" | "pageButton" | "icon", ComponentStyleFunction<string, string>>;
         ProgressCycle?: ComponentStyleFunction<string, string>;
@@ -366,6 +378,77 @@ declare const width: {
     '10/12': string;
     '11/12': string;
 };
+declare const maxWidth: {
+    auto: string;
+    full: string;
+    fit: string;
+    min: string;
+    max: string;
+    screen: string;
+    svh: string;
+    lvh: string;
+    dvh: string;
+    px: string;
+    0: string;
+    '0.5': string;
+    1: string;
+    '1.5': string;
+    2: string;
+    '2.5': string;
+    3: string;
+    '3.5': string;
+    4: string;
+    5: string;
+    6: string;
+    7: string;
+    8: string;
+    9: string;
+    10: string;
+    11: string;
+    12: string;
+    14: string;
+    16: string;
+    20: string;
+    24: string;
+    28: string;
+    32: string;
+    36: string;
+    40: string;
+    44: string;
+    48: string;
+    52: string;
+    56: string;
+    60: string;
+    64: string;
+    72: string;
+    80: string;
+    96: string;
+    '1/2': string;
+    '1/3': string;
+    '2/3': string;
+    '1/4': string;
+    '2/4': string;
+    '3/4': string;
+    '1/5': string;
+    '2/5': string;
+    '3/5': string;
+    '1/6': string;
+    '2/6': string;
+    '3/6': string;
+    '4/6': string;
+    '5/6': string;
+    '1/12': string;
+    '2/12': string;
+    '3/12': string;
+    '4/12': string;
+    '5/12': string;
+    '6/12': string;
+    '7/12': string;
+    '8/12': string;
+    '9/12': string;
+    '10/12': string;
+    '11/12': string;
+};
 declare const height: {
     auto: string;
     full: string;
@@ -960,10 +1043,16 @@ type TextAlignProp = {
 };
 type WidthProp = {
     /**
-     * Sets the width of the field. You can see allowed tokens [here](https://tailwindcss.com/docs/width).
+     * Sets the width of the element. You can see allowed tokens [here](https://tailwindcss.com/docs/width).
      */
     width?: keyof typeof width;
 };
+type MaxWidthProp = {
+    /**
+     * Sets the max-width of the element. You can see allowed tokens [here](https://tailwindcss.com/docs/max-width).
+     */
+    maxWidth?: keyof typeof maxWidth;
+};
 type HeightProp = {
     /**
      * Set the height of the element. You can see allowed tokens [here](https://tailwindcss.com/docs/height).
@@ -971,4 +1060,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, type ThemeComponentParts, 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 };
+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 MaxWidthProp, type NestedStringObject, type NumerFormatterOptions, 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, type ThemeComponentParts, ThemeProvider, type ThemeProviderProps, type UseClassNamesProps, type UseStateProps, type WidthProp, alignment, aspect, cn, createVar, cursorStyle, cva, defaultTheme, ensureCssVar, extendTheme, fontWeight, gapSpace, get, height, isValidCssCustomPropertyName, maxWidth, 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,6 @@
-import React$1, { ReactNode } from 'react';
+import React$1, { Context, ReactNode } from 'react';
 import { HtmlProps, KebabCase } from '@marigold/types';
-import { DateFormatterOptions } from '@react-aria/i18n';
+import { DateFormatterOptions, useNumberFormatter } from '@react-aria/i18n';
 import { ClassValue, StringToBoolean, ClassProp } from 'class-variance-authority/dist/types';
 export { ClassValue } from 'class-variance-authority/dist/types';
 export { VariantProps } from 'class-variance-authority';
@@ -30,11 +30,13 @@ interface DateFormatProps extends DateFormatterOptions {
 }
 declare const DateFormat: ({ value, tabular, ...props }: DateFormatProps) => React$1.JSX.Element;
 
-interface NumericFormatProps extends Intl.NumberFormatOptions {
+type NumerFormatterOptions = NonNullable<Parameters<typeof useNumberFormatter>[0]>;
+type StringNumericLiteral = `${number}` | 'Infinity' | '-Infinity' | '+Infinity';
+interface NumericFormatProps extends NumerFormatterOptions {
     /**
      * Value to be formatted.
      */
-    value: number | bigint;
+    value: number | bigint | StringNumericLiteral | [number, number] | [bigint, bigint] | [StringNumericLiteral, StringNumericLiteral];
     /**
      * The numberingSystem accessor property of Intl.Locale instances returns the numeral system for this locale.
      */
@@ -124,6 +126,7 @@ type Theme = {
         Body?: ComponentStyleFunction<string, string>;
         Button?: ComponentStyleFunction<string, string>;
         Card?: ComponentStyleFunction<string, string>;
+        CloseButton?: ComponentStyleFunction<string, string>;
         DateField?: Record<'segment' | 'field' | 'action', ComponentStyleFunction<string, string>>;
         Dialog?: Record<'closeButton' | 'container' | 'header' | 'content' | 'actions' | 'title', ComponentStyleFunction<string, string>>;
         Divider?: ComponentStyleFunction<string, string>;
@@ -144,6 +147,7 @@ type Theme = {
         Link?: ComponentStyleFunction<string, string>;
         ListBox?: Record<'container' | 'list' | 'item' | 'section' | 'header', ComponentStyleFunction<string, string>>;
         Menu?: Record<'container' | 'section' | 'item', ComponentStyleFunction<string, string>>;
+        Modal?: ComponentStyleFunction<string, string>;
         MultiSelect?: Record<'container' | 'closeButton' | 'field' | 'input' | 'icon' | 'listContainer' | 'list' | 'option' | 'tag' | 'valueContainer', ComponentStyleFunction<string, string>>;
         Pagination?: Record<'navigationButton' | 'pageButton' | 'icon', ComponentStyleFunction<string, string>>;
         ProgressCycle?: ComponentStyleFunction<string, string>;
@@ -169,6 +173,11 @@ type ComponentNames = keyof Theme['components'];
 type ThemeComponent<C extends ComponentNames> = NonNullable<Theme['components'][C]>;
 type ThemeComponentParts<C extends ComponentNames> = keyof ThemeComponent<C>;
 
+interface ComponentContextProps {
+    size?: string;
+    variant?: string;
+    [key: string]: any;
+}
 interface UseClassNamesProps<C extends ComponentNames> {
     component: C;
     variant?: string;
@@ -176,11 +185,12 @@ interface UseClassNamesProps<C extends ComponentNames> {
     className?: ThemeComponent<C> extends (...args: any) => any ? string : {
         [slot in keyof ThemeComponent<C>]?: string;
     };
+    context?: Context<ComponentContextProps>;
 }
 type ComponentClassNames<C extends ComponentNames> = ThemeComponent<C> extends (...args: any) => any ? string : {
     [slot in keyof ThemeComponent<C>]: string;
 };
-declare const useClassNames: <C extends ComponentNames>({ component, className, variant, size, }: UseClassNamesProps<C>) => ComponentClassNames<C>;
+declare const useClassNames: <C extends ComponentNames>({ component, className, variant, size, context: ComponentContext, }: UseClassNamesProps<C>) => ComponentClassNames<C>;
 
 /**
  * Hook that can be used to return values based on the current screen size,
@@ -233,6 +243,7 @@ declare const extendTheme: (newStyles: StylesProps, theme: Theme) => {
         Body?: ComponentStyleFunction<string, string>;
         Button?: ComponentStyleFunction<string, string>;
         Card?: ComponentStyleFunction<string, string>;
+        CloseButton?: ComponentStyleFunction<string, string>;
         DateField?: Record<"segment" | "field" | "action", ComponentStyleFunction<string, string>>;
         Dialog?: Record<"closeButton" | "container" | "header" | "content" | "actions" | "title", ComponentStyleFunction<string, string>>;
         Divider?: ComponentStyleFunction<string, string>;
@@ -253,6 +264,7 @@ declare const extendTheme: (newStyles: StylesProps, theme: Theme) => {
         Link?: ComponentStyleFunction<string, string>;
         ListBox?: Record<"container" | "list" | "item" | "section" | "header", ComponentStyleFunction<string, string>>;
         Menu?: Record<"container" | "section" | "item", ComponentStyleFunction<string, string>>;
+        Modal?: ComponentStyleFunction<string, string>;
         MultiSelect?: Record<"container" | "closeButton" | "field" | "input" | "icon" | "listContainer" | "list" | "option" | "tag" | "valueContainer", ComponentStyleFunction<string, string>>;
         Pagination?: Record<"navigationButton" | "pageButton" | "icon", ComponentStyleFunction<string, string>>;
         ProgressCycle?: ComponentStyleFunction<string, string>;
@@ -366,6 +378,77 @@ declare const width: {
     '10/12': string;
     '11/12': string;
 };
+declare const maxWidth: {
+    auto: string;
+    full: string;
+    fit: string;
+    min: string;
+    max: string;
+    screen: string;
+    svh: string;
+    lvh: string;
+    dvh: string;
+    px: string;
+    0: string;
+    '0.5': string;
+    1: string;
+    '1.5': string;
+    2: string;
+    '2.5': string;
+    3: string;
+    '3.5': string;
+    4: string;
+    5: string;
+    6: string;
+    7: string;
+    8: string;
+    9: string;
+    10: string;
+    11: string;
+    12: string;
+    14: string;
+    16: string;
+    20: string;
+    24: string;
+    28: string;
+    32: string;
+    36: string;
+    40: string;
+    44: string;
+    48: string;
+    52: string;
+    56: string;
+    60: string;
+    64: string;
+    72: string;
+    80: string;
+    96: string;
+    '1/2': string;
+    '1/3': string;
+    '2/3': string;
+    '1/4': string;
+    '2/4': string;
+    '3/4': string;
+    '1/5': string;
+    '2/5': string;
+    '3/5': string;
+    '1/6': string;
+    '2/6': string;
+    '3/6': string;
+    '4/6': string;
+    '5/6': string;
+    '1/12': string;
+    '2/12': string;
+    '3/12': string;
+    '4/12': string;
+    '5/12': string;
+    '6/12': string;
+    '7/12': string;
+    '8/12': string;
+    '9/12': string;
+    '10/12': string;
+    '11/12': string;
+};
 declare const height: {
     auto: string;
     full: string;
@@ -960,10 +1043,16 @@ type TextAlignProp = {
 };
 type WidthProp = {
     /**
-     * Sets the width of the field. You can see allowed tokens [here](https://tailwindcss.com/docs/width).
+     * Sets the width of the element. You can see allowed tokens [here](https://tailwindcss.com/docs/width).
      */
     width?: keyof typeof width;
 };
+type MaxWidthProp = {
+    /**
+     * Sets the max-width of the element. You can see allowed tokens [here](https://tailwindcss.com/docs/max-width).
+     */
+    maxWidth?: keyof typeof maxWidth;
+};
 type HeightProp = {
     /**
      * Set the height of the element. You can see allowed tokens [here](https://tailwindcss.com/docs/height).
@@ -971,4 +1060,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, type ThemeComponentParts, 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 };
+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 MaxWidthProp, type NestedStringObject, type NumerFormatterOptions, 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, type ThemeComponentParts, ThemeProvider, type ThemeProviderProps, type UseClassNamesProps, type UseStateProps, type WidthProp, alignment, aspect, cn, createVar, cursorStyle, cva, defaultTheme, ensureCssVar, extendTheme, fontWeight, gapSpace, get, height, isValidCssCustomPropertyName, maxWidth, objectFit, objectPosition, paddingBottom, paddingLeft, paddingRight, paddingSpace, paddingSpaceX, paddingSpaceY, paddingTop, placeItems, textAlign, textSize, textStyle, useClassNames, useResponsiveValue, useSmallScreen, useStateProps, useTheme, width };

package/dist/index.js

@@ -48,6 +48,7 @@ __export(index_exports, {
   get: () => get,
   height: () => height,
   isValidCssCustomPropertyName: () => isValidCssCustomPropertyName,
+  maxWidth: () => maxWidth,
   objectFit: () => objectFit,
   objectPosition: () => objectPosition,
   paddingBottom: () => paddingBottom,
@@ -135,12 +136,15 @@ var NumericFormat = ({
   tabular = true,
   ...props
 }) => {
-  const numberFormatter = (0, import_i18n2.useNumberFormatter)({
+  const formatter = (0, import_i18n2.useNumberFormatter)({
     ...props
   });
-  return /* @__PURE__ */ import_react3.default.createElement("span", { className: tabular ? "tabular-nums" : void 0 }, numberFormatter.format(value));
+  return /* @__PURE__ */ import_react3.default.createElement("span", { className: tabular ? "tabular-nums" : void 0 }, Array.isArray(value) ? formatter.formatRange(value[0], value[1]) : formatter.format(value));
 };
 
+// src/hooks/useClassNames.tsx
+var import_react5 = require("react");
+
 // src/hooks/useTheme.tsx
 var import_react4 = __toESM(require("react"));
 
@@ -174,13 +178,20 @@ function ThemeProvider({
 }
 
 // src/hooks/useClassNames.tsx
+var FallbackContext = (0, import_react5.createContext)(
+  null
+);
 var useClassNames = ({
   component,
   className,
   variant,
-  size
+  size,
+  context: ComponentContext
 }) => {
   const theme = useTheme();
+  const ctx = (0, import_react5.useContext)(ComponentContext != null ? ComponentContext : FallbackContext);
+  const currentSize = size != null ? size : ctx == null ? void 0 : ctx.size;
+  const currentVariant = variant != null ? variant : ctx == null ? void 0 : ctx.variant;
   const styles = theme.components[component];
   if (!styles) {
     throw new Error(
@@ -193,7 +204,13 @@ var useClassNames = ({
         '"className" must be a string, when using a component without slots'
       );
     }
-    return cn(styles({ variant, size, className }));
+    return cn(
+      styles({
+        variant: currentVariant,
+        size: currentSize,
+        className
+      })
+    );
   }
   if (className !== void 0 && typeof className !== "object") {
     throw new Error(
@@ -206,8 +223,8 @@ var useClassNames = ({
         slot,
         cn(
           style({
-            variant,
-            size,
+            variant: currentVariant,
+            size: currentSize,
             className: className && className[slot]
           })
         )
@@ -217,7 +234,7 @@ var useClassNames = ({
 };
 
 // src/hooks/useResponsiveValue.ts
-var import_react5 = require("react");
+var import_react6 = require("react");
 var useResponsiveValue = (values, defaultIndex = 0) => {
   const theme = useTheme();
   const screens = theme.screens || defaultTheme.screens;
@@ -226,8 +243,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_react6.useState)(defaultIndex);
+  (0, import_react6.useEffect)(() => {
     if (typeof window == "undefined") return;
     const getIndex = () => Object.values(screens).filter(
       (breakpoint) => window.matchMedia(`screen and (min-width: ${breakpoint})`).matches
@@ -246,12 +263,12 @@ var useResponsiveValue = (values, defaultIndex = 0) => {
 };
 
 // src/hooks/useStateProps.ts
-var import_react6 = require("react");
+var import_react7 = 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_react7.useRef)({});
   let stateProps = {};
   for (let state in states) {
     if (states[state]) {
@@ -266,7 +283,7 @@ var useStateProps = (states) => {
 };
 
 // src/hooks/useSmallScreen.ts
-var import_react7 = require("react");
+var import_react8 = require("react");
 var useSmallScreen = () => {
   const getMatches = () => {
     if (typeof window == "undefined") {
@@ -274,11 +291,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_react8.useState)(getMatches());
+  const handleResize = (0, import_react8.useCallback)(() => {
     setMatches(getMatches());
   }, []);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     handleResize();
     if (typeof window == "undefined") return;
     window.addEventListener("resize", handleResize);
@@ -317,7 +334,10 @@ var extendTheme = (newStyles, theme) => {
       const variants = ["size", "variant"].reduce((acc, variantItem) => {
         var _a, _b, _c, _d;
         const newStylesVariants = (_a = newStyles[component].variants) == null ? void 0 : _a[variantItem];
-        const mergedStylesVariants = (_b = mergedStyles[component].variants) == null ? void 0 : _b[variantItem];
+        const mergedStylesVariants = (
+          // @ts-expect-error any
+          (_b = mergedStyles[component].variants) == null ? void 0 : _b[variantItem]
+        );
         if (newStylesVariants && mergedStylesVariants) {
           const dupVariants = Object.keys(newStylesVariants).filter(
             (variant) => Object.keys(mergedStylesVariants).includes(variant)
@@ -327,7 +347,9 @@ var extendTheme = (newStyles, theme) => {
           }
         }
         acc[variantItem] = {
+          // @ts-expect-error any
           ...(_c = newStyles[component].variants) == null ? void 0 : _c[variantItem],
+          // @ts-expect-error any
           ...(_d = mergedStyles[component].variants) == null ? void 0 : _d[variantItem]
         };
         return acc;
@@ -413,6 +435,77 @@ var width = {
   "10/12": "w-10/12",
   "11/12": "w-11/12"
 };
+var maxWidth = {
+  auto: "max-w-auto",
+  full: "max-w-full",
+  fit: "max-w-fit",
+  min: "max-w-min",
+  max: "max-w-max",
+  screen: "max-w-screen",
+  svh: "max-w-svh",
+  lvh: "max-w-lvh",
+  dvh: "max-w-dvh",
+  px: "max-w-px",
+  0: "max-w-0",
+  "0.5": "max-w-0.5",
+  1: "max-w-1",
+  "1.5": "max-w-1.5",
+  2: "max-w-2",
+  "2.5": "max-w-2.5",
+  3: "max-w-3",
+  "3.5": "max-w-3.5",
+  4: "max-w-4",
+  5: "max-w-5",
+  6: "max-w-6",
+  7: "max-w-7",
+  8: "max-w-8",
+  9: "max-w-9",
+  10: "max-w-10",
+  11: "max-w-11",
+  12: "max-w-12",
+  14: "max-w-14",
+  16: "max-w-16",
+  20: "max-w-20",
+  24: "max-w-24",
+  28: "max-w-28",
+  32: "max-w-32",
+  36: "max-w-36",
+  40: "max-w-40",
+  44: "max-w-44",
+  48: "max-w-48",
+  52: "max-w-52",
+  56: "max-w-56",
+  60: "max-w-60",
+  64: "max-w-64",
+  72: "max-w-72",
+  80: "max-w-80",
+  96: "max-w-96",
+  "1/2": "max-w-1/2",
+  "1/3": "max-w-1/3",
+  "2/3": "max-w-2/3",
+  "1/4": "max-w-1/4",
+  "2/4": "max-w-2/4",
+  "3/4": "max-w-3/4",
+  "1/5": "max-w-1/5",
+  "2/5": "max-w-2/5",
+  "3/5": "max-w-3/5",
+  "1/6": "max-w-1/6",
+  "2/6": "max-w-2/6",
+  "3/6": "max-w-3/6",
+  "4/6": "max-w-4/6",
+  "5/6": "max-w-5/6",
+  "1/12": "max-w-1/12",
+  "2/12": "max-w-2/12",
+  "3/12": "max-w-3/12",
+  "4/12": "max-w-4/12",
+  "5/12": "max-w-5/12",
+  "6/12": "max-w-6/12",
+  "7/12": "max-w-7/12",
+  "8/12": "max-w-8/12",
+  "9/12": "max-w-9/12",
+  "10/12": "max-w-10/12",
+  "11/12": "max-w-11/12"
+};
 var height = {
   auto: "h-auto",
   full: "h-full",
@@ -914,6 +1007,7 @@ var cursorStyle = {
   get,
   height,
   isValidCssCustomPropertyName,
+  maxWidth,
   objectFit,
   objectPosition,
   paddingBottom,

package/dist/index.mjs

@@ -63,12 +63,15 @@ var NumericFormat = ({
   tabular = true,
   ...props
 }) => {
-  const numberFormatter = useNumberFormatter({
+  const formatter = useNumberFormatter({
     ...props
   });
-  return /* @__PURE__ */ React3.createElement("span", { className: tabular ? "tabular-nums" : void 0 }, numberFormatter.format(value));
+  return /* @__PURE__ */ React3.createElement("span", { className: tabular ? "tabular-nums" : void 0 }, Array.isArray(value) ? formatter.formatRange(value[0], value[1]) : formatter.format(value));
 };
 
+// src/hooks/useClassNames.tsx
+import { createContext as createContext2, useContext as useContext2 } from "react";
+
 // src/hooks/useTheme.tsx
 import React4, { createContext, useContext } from "react";
 
@@ -102,13 +105,20 @@ function ThemeProvider({
 }
 
 // src/hooks/useClassNames.tsx
+var FallbackContext = createContext2(
+  null
+);
 var useClassNames = ({
   component,
   className,
   variant,
-  size
+  size,
+  context: ComponentContext
 }) => {
   const theme = useTheme();
+  const ctx = useContext2(ComponentContext != null ? ComponentContext : FallbackContext);
+  const currentSize = size != null ? size : ctx == null ? void 0 : ctx.size;
+  const currentVariant = variant != null ? variant : ctx == null ? void 0 : ctx.variant;
   const styles = theme.components[component];
   if (!styles) {
     throw new Error(
@@ -121,7 +131,13 @@ var useClassNames = ({
         '"className" must be a string, when using a component without slots'
       );
     }
-    return cn(styles({ variant, size, className }));
+    return cn(
+      styles({
+        variant: currentVariant,
+        size: currentSize,
+        className
+      })
+    );
   }
   if (className !== void 0 && typeof className !== "object") {
     throw new Error(
@@ -134,8 +150,8 @@ var useClassNames = ({
         slot,
         cn(
           style({
-            variant,
-            size,
+            variant: currentVariant,
+            size: currentSize,
             className: className && className[slot]
           })
         )
@@ -245,7 +261,10 @@ var extendTheme = (newStyles, theme) => {
       const variants = ["size", "variant"].reduce((acc, variantItem) => {
         var _a, _b, _c, _d;
         const newStylesVariants = (_a = newStyles[component].variants) == null ? void 0 : _a[variantItem];
-        const mergedStylesVariants = (_b = mergedStyles[component].variants) == null ? void 0 : _b[variantItem];
+        const mergedStylesVariants = (
+          // @ts-expect-error any
+          (_b = mergedStyles[component].variants) == null ? void 0 : _b[variantItem]
+        );
         if (newStylesVariants && mergedStylesVariants) {
           const dupVariants = Object.keys(newStylesVariants).filter(
             (variant) => Object.keys(mergedStylesVariants).includes(variant)
@@ -255,7 +274,9 @@ var extendTheme = (newStyles, theme) => {
           }
         }
         acc[variantItem] = {
+          // @ts-expect-error any
           ...(_c = newStyles[component].variants) == null ? void 0 : _c[variantItem],
+          // @ts-expect-error any
           ...(_d = mergedStyles[component].variants) == null ? void 0 : _d[variantItem]
         };
         return acc;
@@ -341,6 +362,77 @@ var width = {
   "10/12": "w-10/12",
   "11/12": "w-11/12"
 };
+var maxWidth = {
+  auto: "max-w-auto",
+  full: "max-w-full",
+  fit: "max-w-fit",
+  min: "max-w-min",
+  max: "max-w-max",
+  screen: "max-w-screen",
+  svh: "max-w-svh",
+  lvh: "max-w-lvh",
+  dvh: "max-w-dvh",
+  px: "max-w-px",
+  0: "max-w-0",
+  "0.5": "max-w-0.5",
+  1: "max-w-1",
+  "1.5": "max-w-1.5",
+  2: "max-w-2",
+  "2.5": "max-w-2.5",
+  3: "max-w-3",
+  "3.5": "max-w-3.5",
+  4: "max-w-4",
+  5: "max-w-5",
+  6: "max-w-6",
+  7: "max-w-7",
+  8: "max-w-8",
+  9: "max-w-9",
+  10: "max-w-10",
+  11: "max-w-11",
+  12: "max-w-12",
+  14: "max-w-14",
+  16: "max-w-16",
+  20: "max-w-20",
+  24: "max-w-24",
+  28: "max-w-28",
+  32: "max-w-32",
+  36: "max-w-36",
+  40: "max-w-40",
+  44: "max-w-44",
+  48: "max-w-48",
+  52: "max-w-52",
+  56: "max-w-56",
+  60: "max-w-60",
+  64: "max-w-64",
+  72: "max-w-72",
+  80: "max-w-80",
+  96: "max-w-96",
+  "1/2": "max-w-1/2",
+  "1/3": "max-w-1/3",
+  "2/3": "max-w-2/3",
+  "1/4": "max-w-1/4",
+  "2/4": "max-w-2/4",
+  "3/4": "max-w-3/4",
+  "1/5": "max-w-1/5",
+  "2/5": "max-w-2/5",
+  "3/5": "max-w-3/5",
+  "1/6": "max-w-1/6",
+  "2/6": "max-w-2/6",
+  "3/6": "max-w-3/6",
+  "4/6": "max-w-4/6",
+  "5/6": "max-w-5/6",
+  "1/12": "max-w-1/12",
+  "2/12": "max-w-2/12",
+  "3/12": "max-w-3/12",
+  "4/12": "max-w-4/12",
+  "5/12": "max-w-5/12",
+  "6/12": "max-w-6/12",
+  "7/12": "max-w-7/12",
+  "8/12": "max-w-8/12",
+  "9/12": "max-w-9/12",
+  "10/12": "max-w-10/12",
+  "11/12": "max-w-11/12"
+};
 var height = {
   auto: "h-auto",
   full: "h-full",
@@ -841,6 +933,7 @@ export {
   get,
   height,
   isValidCssCustomPropertyName,
+  maxWidth,
   objectFit,
   objectPosition,
   paddingBottom,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/system",
-  "version": "11.4.1",
+  "version": "12.0.0",
   "description": "Marigold System Library",
   "license": "MIT",
   "keywords": [
@@ -34,7 +34,7 @@
     "directory": "packages/system"
   },
   "dependencies": {
-    "@react-aria/i18n": "3.12.7",
+    "@react-aria/i18n": "3.12.8",
     "class-variance-authority": "0.7.1",
     "deepmerge": "4.3.1",
     "react-fast-compare": "3.2.2",