npm - @marigold/system - Versions diffs - 7.8.1 → 8.0.0 - Mend

@marigold/system 7.8.1 → 8.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/index.d.mts CHANGED Viewed

@@ -1,5 +1,4 @@
-import * as React from 'react';
-import React__default, { ReactNode } from 'react';
+import React$1, { ReactNode } from 'react';
 import { HtmlProps, KebabCase } from '@marigold/types';
 import { DateFormatterOptions } from '@react-aria/i18n';
 import { StringToBoolean, ClassProp } from 'class-variance-authority/dist/types';
@@ -9,21 +8,20 @@ interface SVGProps extends Omit<HtmlProps<'svg'>, 'fill' | 'style'> {
     size?: number | string | number[] | string[];
     className?: string;
 }
-declare const SVG: React__default.ForwardRefExoticComponent<SVGProps & React__default.RefAttributes<SVGSVGElement>>;
+declare const SVG: React$1.ForwardRefExoticComponent<SVGProps & React$1.RefAttributes<SVGSVGElement>>;
 interface DateFormatProps extends DateFormatterOptions {
     value: Date;
     tabular?: boolean;
 }
-declare const DateFormat: ({ value, tabular, ...props }: DateFormatProps) => React__default.JSX.Element;
+declare const DateFormat: ({ value, tabular, ...props }: DateFormatProps) => React$1.JSX.Element;
-interface NumericFormatProps extends Omit<Intl.NumberFormatOptions, 'style'> {
+interface NumericFormatProps extends Intl.NumberFormatOptions {
     value: number | bigint;
     numberingSystem?: string;
     tabular?: boolean;
-    styleFormat?: string;
 }
-declare const NumericFormat: ({ value, styleFormat, tabular, ...props }: NumericFormatProps) => React__default.JSX.Element;
+declare const NumericFormat: ({ value, tabular, ...props }: NumericFormatProps) => React$1.JSX.Element;
 type ConfigSchema = Record<string, Record<string, ClassValue>>;
 type ConfigVariants<T extends ConfigSchema> = {
@@ -120,7 +118,7 @@ type Theme = {
         Slider?: Record<'container' | 'track' | 'thumb' | 'output', ComponentStyleFunction<string, string>>;
         Select?: Record<'select' | 'icon', ComponentStyleFunction<string, string>>;
         NumberField?: Record<'group' | 'stepper' | 'input', ComponentStyleFunction<string, string>>;
-        Message?: Record<'container' | 'icon' | 'title' | 'content', ComponentStyleFunction<string, string>>;
+        SectionMessage?: Record<'container' | 'icon' | 'title' | 'content', ComponentStyleFunction<string, string>>;
         Table?: Record<'table' | 'header' | 'row' | 'cell', ComponentStyleFunction<string, string>>;
         Tag?: Record<'tag' | 'listItems' | 'closeButton', ComponentStyleFunction<string, string>>;
         Text?: ComponentStyleFunction<string, string>;
@@ -147,7 +145,7 @@ interface UseClassNamesProps<C extends ComponentNames> {
 type ComponentClassNames<C extends ComponentNames> = ThemeComponent<C> extends (...args: any) => any ? string : {
     [slot in keyof ThemeComponent<C>]: string;
 };
-declare const useClassNames: <C extends "Accordion" | "Badge" | "Body" | "Button" | "Card" | "DateField" | "Dialog" | "Divider" | "Field" | "Footer" | "Header" | "Headline" | "Popover" | "HelpText" | "Image" | "Checkbox" | "Switch" | "Input" | "Label" | "List" | "Link" | "ListBox" | "Menu" | "Radio" | "Slider" | "Select" | "NumberField" | "Message" | "Table" | "Tag" | "Text" | "TextArea" | "Tooltip" | "Tabs" | "Underlay" | "Calendar" | "DatePicker" | "ComboBox">({ component, className, variant, size, }: UseClassNamesProps<C>) => ComponentClassNames<C>;
+declare const useClassNames: <C extends ComponentNames>({ component, className, variant, size, }: UseClassNamesProps<C>) => ComponentClassNames<C>;
 /**
  * Hook that can be used to return values based on the current screen size,
@@ -173,11 +171,20 @@ declare const useStateProps: (states: UseStateProps) => StateAttrProps;
 declare const useTheme: () => Theme;
 interface ThemeProviderProps<T extends Theme> {
+    /**
+     * The theme that should be used within the provider context.
+     */
     theme: T;
+    /**
+     * The children of the component.
+     */
     children: ReactNode;
+    /**
+     * Additional class names to apply to the root element of the provider.
+     */
     className?: string;
 }
-declare function ThemeProvider<T extends Theme>({ theme, children, className, }: ThemeProviderProps<T>): React__default.JSX.Element;
+declare function ThemeProvider<T extends Theme>({ theme, children, className, }: ThemeProviderProps<T>): React$1.JSX.Element;
 declare const useSmallScreen: () => boolean;
@@ -186,53 +193,53 @@ type StylesProps = {
 };
 declare const extendTheme: (newStyles: StylesProps, theme: Theme) => {
     components: {
-        Accordion?: Record<"button" | "item", ComponentStyleFunction<string, string, {}>> | undefined;
-        Badge?: ComponentStyleFunction<string, string, {}> | undefined;
-        Body?: ComponentStyleFunction<string, string, {}> | undefined;
-        Button?: ComponentStyleFunction<string, string, {}> | undefined;
-        Card?: ComponentStyleFunction<string, string, {}> | undefined;
-        DateField?: Record<"segment" | "field" | "action", ComponentStyleFunction<string, string, {}>> | undefined;
-        Dialog?: Record<"closeButton" | "container", ComponentStyleFunction<string, string, {}>> | undefined;
-        Divider?: ComponentStyleFunction<string, string, {}> | undefined;
-        Field?: ComponentStyleFunction<string, string, {}> | undefined;
-        Footer?: ComponentStyleFunction<string, string, {}> | undefined;
-        Header?: ComponentStyleFunction<string, string, {}> | undefined;
-        Headline?: ComponentStyleFunction<string, string, {}> | undefined;
-        Popover?: ComponentStyleFunction<string, string, {}> | undefined;
-        HelpText?: Record<"container" | "icon", ComponentStyleFunction<string, string, {}>> | undefined;
-        Image?: ComponentStyleFunction<string, string, {}> | undefined;
-        Checkbox?: Record<"label" | "container" | "checkbox" | "group", ComponentStyleFunction<string, string, {}>> | undefined;
-        Switch?: Record<"track" | "container" | "thumb", ComponentStyleFunction<string, string, {}>> | undefined;
-        Input?: Record<"input" | "action" | "icon", ComponentStyleFunction<string, string, {}>> | undefined;
-        Label?: Record<"container" | "indicator", ComponentStyleFunction<string, string, {}>> | undefined;
-        List?: Record<"ol" | "ul" | "item", ComponentStyleFunction<string, string, {}>> | undefined;
-        Link?: ComponentStyleFunction<string, string, {}> | undefined;
-        ListBox?: Record<"option" | "section" | "container" | "list" | "sectionTitle", ComponentStyleFunction<string, string, {}>> | undefined;
-        Menu?: Record<"section" | "item" | "container", ComponentStyleFunction<string, string, {}>> | undefined;
-        Radio?: Record<"label" | "container" | "group" | "radio", ComponentStyleFunction<string, string, {}>> | undefined;
-        Slider?: Record<"output" | "track" | "container" | "thumb", ComponentStyleFunction<string, string, {}>> | undefined;
-        Select?: Record<"select" | "icon", ComponentStyleFunction<string, string, {}>> | undefined;
-        NumberField?: Record<"input" | "group" | "stepper", ComponentStyleFunction<string, string, {}>> | undefined;
-        Message?: Record<"title" | "container" | "icon" | "content", ComponentStyleFunction<string, string, {}>> | undefined;
-        Table?: Record<"header" | "table" | "row" | "cell", ComponentStyleFunction<string, string, {}>> | undefined;
-        Tag?: Record<"closeButton" | "tag" | "listItems", ComponentStyleFunction<string, string, {}>> | undefined;
-        Text?: ComponentStyleFunction<string, string, {}> | undefined;
-        TextArea?: ComponentStyleFunction<string, string, {}> | undefined;
-        Tooltip?: Record<"container" | "arrow", ComponentStyleFunction<string, string, {}>> | undefined;
-        Tabs?: Record<"container" | "tabsList" | "tabpanel" | "tab", ComponentStyleFunction<string, string, {}>> | undefined;
-        Underlay?: ComponentStyleFunction<string, string, {}> | undefined;
-        Calendar?: Record<"calendar" | "calendarCell" | "calendarControllers" | "calendarHeader" | "calendarGrid", ComponentStyleFunction<string, string, {}>> | undefined;
-        DatePicker?: Record<"button" | "container", ComponentStyleFunction<string, string, {}>> | undefined;
-        ComboBox?: ComponentStyleFunction<string, string, {}> | undefined;
+        Accordion?: Record<"button" | "item", ComponentStyleFunction<string, string>>;
+        Badge?: ComponentStyleFunction<string, string>;
+        Body?: ComponentStyleFunction<string, string>;
+        Button?: ComponentStyleFunction<string, string>;
+        Card?: ComponentStyleFunction<string, string>;
+        DateField?: Record<"segment" | "field" | "action", ComponentStyleFunction<string, string>>;
+        Dialog?: Record<"closeButton" | "container", ComponentStyleFunction<string, string>>;
+        Divider?: ComponentStyleFunction<string, string>;
+        Field?: ComponentStyleFunction<string, string>;
+        Footer?: ComponentStyleFunction<string, string>;
+        Header?: ComponentStyleFunction<string, string>;
+        Headline?: ComponentStyleFunction<string, string>;
+        Popover?: ComponentStyleFunction<string, string>;
+        HelpText?: Record<"container" | "icon", ComponentStyleFunction<string, string>>;
+        Image?: ComponentStyleFunction<string, string>;
+        Checkbox?: Record<"container" | "label" | "checkbox" | "group", ComponentStyleFunction<string, string>>;
+        Switch?: Record<"container" | "track" | "thumb", ComponentStyleFunction<string, string>>;
+        Input?: Record<"input" | "icon" | "action", ComponentStyleFunction<string, string>>;
+        Label?: Record<"container" | "indicator", ComponentStyleFunction<string, string>>;
+        List?: Record<"ol" | "ul" | "item", ComponentStyleFunction<string, string>>;
+        Link?: ComponentStyleFunction<string, string>;
+        ListBox?: Record<"container" | "list" | "option" | "section" | "sectionTitle", ComponentStyleFunction<string, string>>;
+        Menu?: Record<"container" | "section" | "item", ComponentStyleFunction<string, string>>;
+        Radio?: Record<"container" | "label" | "radio" | "group", ComponentStyleFunction<string, string>>;
+        Slider?: Record<"container" | "track" | "thumb" | "output", ComponentStyleFunction<string, string>>;
+        Select?: Record<"select" | "icon", ComponentStyleFunction<string, string>>;
+        NumberField?: Record<"group" | "stepper" | "input", ComponentStyleFunction<string, string>>;
+        SectionMessage?: Record<"container" | "icon" | "title" | "content", ComponentStyleFunction<string, string>>;
+        Table?: Record<"table" | "header" | "row" | "cell", ComponentStyleFunction<string, string>>;
+        Tag?: Record<"tag" | "listItems" | "closeButton", ComponentStyleFunction<string, string>>;
+        Text?: ComponentStyleFunction<string, string>;
+        TextArea?: ComponentStyleFunction<string, string>;
+        Tooltip?: Record<"container" | "arrow", ComponentStyleFunction<string, string>>;
+        Tabs?: Record<"container" | "tabsList" | "tabpanel" | "tab", ComponentStyleFunction<string, string>>;
+        Underlay?: ComponentStyleFunction<string, string>;
+        Calendar?: Record<"calendar" | "calendarCell" | "calendarControllers" | "calendarHeader" | "calendarGrid", ComponentStyleFunction<string, string>>;
+        DatePicker?: Record<"container" | "button", ComponentStyleFunction<string, string>>;
+        ComboBox?: ComponentStyleFunction<string, string>;
     };
     name: string;
     screens?: {
         [key: string]: string;
-    } | undefined;
-    colors?: NestedStringObject | undefined;
-    shadow?: NestedStringObject | undefined;
-    height?: NestedStringObject | undefined;
-    root?: ComponentStyleFunction<never, never, {}> | undefined;
+    };
+    colors?: NestedStringObject;
+    shadow?: NestedStringObject;
+    height?: NestedStringObject;
+    root?: ComponentStyleFunction;
 };
 declare const defaultTheme: {
@@ -829,63 +836,123 @@ type AlignmentProp = {
     };
 };
 type CursorProp = {
+    /**
+     * Set the cursor for the element.
+     */
     cursor?: keyof typeof cursorStyle;
 };
 type FontStyleProp = {
+    /**
+     * Set the font style for the text element.
+     */
     fontStyle?: keyof typeof textStyle;
 };
 type FontWeightProp = {
+    /**
+     * Set the font weight for the text element.
+     */
     weight?: keyof typeof fontWeight;
 };
 type FontSizeProp = {
+    /**
+     * Set the font size for the text element.
+     */
     fontSize?: keyof typeof textSize;
 };
 type GridColsAlignProp = {
+    /**
+     * Set the alignment of grid columns.
+     */
     align?: keyof typeof gridColsAlign;
 };
 type GridColumn = {
+    /**
+     * Set the alignment of a grid column.
+     */
     align?: keyof typeof gridColumn;
 };
 type GapSpaceProp = {
+    /**
+     * The space between the children.
+     */
     space?: keyof typeof gapSpace;
 };
 type ObjectFitProp = {
+    /**
+     * Set the object-fit property for the element.
+     */
     fit?: keyof typeof objectFit;
 };
 type ObjectPositionProp = {
+    /**
+     * Set the object-position property for the element.
+     */
     position?: keyof typeof objectPosition;
 };
 type PaddingSpaceProp = {
+    /**
+     * Set the padding space for the element.
+     */
     space?: keyof typeof paddingSpace;
 };
 type PaddingSpacePropX = {
+    /**
+     * Set the horizontal padding space for the element.
+     */
     spaceX?: keyof typeof paddingSpaceX;
 };
 type PaddingSpacePropY = {
+    /**
+     * Set the vertical padding space for the element.
+     */
     spaceY?: keyof typeof paddingSpaceY;
 };
 type PaddingRightProp = {
+    /**
+     * Set the right padding for the element.
+     */
     pr?: keyof typeof paddingRight;
 };
 type PaddingLeftProp = {
+    /**
+     * Set the left padding for the element.
+     */
     pl?: keyof typeof paddingLeft;
 };
 type PaddingTopProp = {
+    /**
+     * Set the top padding for the element.
+     */
     pt?: keyof typeof paddingTop;
 };
 type PaddingBottomProp = {
+    /**
+     * Set the bottom padding for the element.
+     */
     pb?: keyof typeof paddingBottom;
 };
 type PlaceItemsProp = {
+    /**
+     * Set the alignment of place-items property for the element.
+     */
     align?: keyof typeof placeItems;
 };
 type TextAlignProp = {
+    /**
+     * Set the text alignment for the element.
+     */
     align?: keyof typeof textAlign;
 };
 type WidthProp = {
+    /**
+     * Set the width of the element.
+     */
     width?: keyof typeof width;
 };
 type HeightProp = {
+    /**
+     * Set the height of the element.
+     */
     height?: keyof typeof height;
 };

package/dist/index.d.ts CHANGED Viewed

@@ -1,5 +1,4 @@
-import * as React from 'react';
-import React__default, { ReactNode } from 'react';
+import React$1, { ReactNode } from 'react';
 import { HtmlProps, KebabCase } from '@marigold/types';
 import { DateFormatterOptions } from '@react-aria/i18n';
 import { StringToBoolean, ClassProp } from 'class-variance-authority/dist/types';
@@ -9,21 +8,20 @@ interface SVGProps extends Omit<HtmlProps<'svg'>, 'fill' | 'style'> {
     size?: number | string | number[] | string[];
     className?: string;
 }
-declare const SVG: React__default.ForwardRefExoticComponent<SVGProps & React__default.RefAttributes<SVGSVGElement>>;
+declare const SVG: React$1.ForwardRefExoticComponent<SVGProps & React$1.RefAttributes<SVGSVGElement>>;
 interface DateFormatProps extends DateFormatterOptions {
     value: Date;
     tabular?: boolean;
 }
-declare const DateFormat: ({ value, tabular, ...props }: DateFormatProps) => React__default.JSX.Element;
+declare const DateFormat: ({ value, tabular, ...props }: DateFormatProps) => React$1.JSX.Element;
-interface NumericFormatProps extends Omit<Intl.NumberFormatOptions, 'style'> {
+interface NumericFormatProps extends Intl.NumberFormatOptions {
     value: number | bigint;
     numberingSystem?: string;
     tabular?: boolean;
-    styleFormat?: string;
 }
-declare const NumericFormat: ({ value, styleFormat, tabular, ...props }: NumericFormatProps) => React__default.JSX.Element;
+declare const NumericFormat: ({ value, tabular, ...props }: NumericFormatProps) => React$1.JSX.Element;
 type ConfigSchema = Record<string, Record<string, ClassValue>>;
 type ConfigVariants<T extends ConfigSchema> = {
@@ -120,7 +118,7 @@ type Theme = {
         Slider?: Record<'container' | 'track' | 'thumb' | 'output', ComponentStyleFunction<string, string>>;
         Select?: Record<'select' | 'icon', ComponentStyleFunction<string, string>>;
         NumberField?: Record<'group' | 'stepper' | 'input', ComponentStyleFunction<string, string>>;
-        Message?: Record<'container' | 'icon' | 'title' | 'content', ComponentStyleFunction<string, string>>;
+        SectionMessage?: Record<'container' | 'icon' | 'title' | 'content', ComponentStyleFunction<string, string>>;
         Table?: Record<'table' | 'header' | 'row' | 'cell', ComponentStyleFunction<string, string>>;
         Tag?: Record<'tag' | 'listItems' | 'closeButton', ComponentStyleFunction<string, string>>;
         Text?: ComponentStyleFunction<string, string>;
@@ -147,7 +145,7 @@ interface UseClassNamesProps<C extends ComponentNames> {
 type ComponentClassNames<C extends ComponentNames> = ThemeComponent<C> extends (...args: any) => any ? string : {
     [slot in keyof ThemeComponent<C>]: string;
 };
-declare const useClassNames: <C extends "Accordion" | "Badge" | "Body" | "Button" | "Card" | "DateField" | "Dialog" | "Divider" | "Field" | "Footer" | "Header" | "Headline" | "Popover" | "HelpText" | "Image" | "Checkbox" | "Switch" | "Input" | "Label" | "List" | "Link" | "ListBox" | "Menu" | "Radio" | "Slider" | "Select" | "NumberField" | "Message" | "Table" | "Tag" | "Text" | "TextArea" | "Tooltip" | "Tabs" | "Underlay" | "Calendar" | "DatePicker" | "ComboBox">({ component, className, variant, size, }: UseClassNamesProps<C>) => ComponentClassNames<C>;
+declare const useClassNames: <C extends ComponentNames>({ component, className, variant, size, }: UseClassNamesProps<C>) => ComponentClassNames<C>;
 /**
  * Hook that can be used to return values based on the current screen size,
@@ -173,11 +171,20 @@ declare const useStateProps: (states: UseStateProps) => StateAttrProps;
 declare const useTheme: () => Theme;
 interface ThemeProviderProps<T extends Theme> {
+    /**
+     * The theme that should be used within the provider context.
+     */
     theme: T;
+    /**
+     * The children of the component.
+     */
     children: ReactNode;
+    /**
+     * Additional class names to apply to the root element of the provider.
+     */
     className?: string;
 }
-declare function ThemeProvider<T extends Theme>({ theme, children, className, }: ThemeProviderProps<T>): React__default.JSX.Element;
+declare function ThemeProvider<T extends Theme>({ theme, children, className, }: ThemeProviderProps<T>): React$1.JSX.Element;
 declare const useSmallScreen: () => boolean;
@@ -186,53 +193,53 @@ type StylesProps = {
 };
 declare const extendTheme: (newStyles: StylesProps, theme: Theme) => {
     components: {
-        Accordion?: Record<"button" | "item", ComponentStyleFunction<string, string, {}>> | undefined;
-        Badge?: ComponentStyleFunction<string, string, {}> | undefined;
-        Body?: ComponentStyleFunction<string, string, {}> | undefined;
-        Button?: ComponentStyleFunction<string, string, {}> | undefined;
-        Card?: ComponentStyleFunction<string, string, {}> | undefined;
-        DateField?: Record<"segment" | "field" | "action", ComponentStyleFunction<string, string, {}>> | undefined;
-        Dialog?: Record<"closeButton" | "container", ComponentStyleFunction<string, string, {}>> | undefined;
-        Divider?: ComponentStyleFunction<string, string, {}> | undefined;
-        Field?: ComponentStyleFunction<string, string, {}> | undefined;
-        Footer?: ComponentStyleFunction<string, string, {}> | undefined;
-        Header?: ComponentStyleFunction<string, string, {}> | undefined;
-        Headline?: ComponentStyleFunction<string, string, {}> | undefined;
-        Popover?: ComponentStyleFunction<string, string, {}> | undefined;
-        HelpText?: Record<"container" | "icon", ComponentStyleFunction<string, string, {}>> | undefined;
-        Image?: ComponentStyleFunction<string, string, {}> | undefined;
-        Checkbox?: Record<"label" | "container" | "checkbox" | "group", ComponentStyleFunction<string, string, {}>> | undefined;
-        Switch?: Record<"track" | "container" | "thumb", ComponentStyleFunction<string, string, {}>> | undefined;
-        Input?: Record<"input" | "action" | "icon", ComponentStyleFunction<string, string, {}>> | undefined;
-        Label?: Record<"container" | "indicator", ComponentStyleFunction<string, string, {}>> | undefined;
-        List?: Record<"ol" | "ul" | "item", ComponentStyleFunction<string, string, {}>> | undefined;
-        Link?: ComponentStyleFunction<string, string, {}> | undefined;
-        ListBox?: Record<"option" | "section" | "container" | "list" | "sectionTitle", ComponentStyleFunction<string, string, {}>> | undefined;
-        Menu?: Record<"section" | "item" | "container", ComponentStyleFunction<string, string, {}>> | undefined;
-        Radio?: Record<"label" | "container" | "group" | "radio", ComponentStyleFunction<string, string, {}>> | undefined;
-        Slider?: Record<"output" | "track" | "container" | "thumb", ComponentStyleFunction<string, string, {}>> | undefined;
-        Select?: Record<"select" | "icon", ComponentStyleFunction<string, string, {}>> | undefined;
-        NumberField?: Record<"input" | "group" | "stepper", ComponentStyleFunction<string, string, {}>> | undefined;
-        Message?: Record<"title" | "container" | "icon" | "content", ComponentStyleFunction<string, string, {}>> | undefined;
-        Table?: Record<"header" | "table" | "row" | "cell", ComponentStyleFunction<string, string, {}>> | undefined;
-        Tag?: Record<"closeButton" | "tag" | "listItems", ComponentStyleFunction<string, string, {}>> | undefined;
-        Text?: ComponentStyleFunction<string, string, {}> | undefined;
-        TextArea?: ComponentStyleFunction<string, string, {}> | undefined;
-        Tooltip?: Record<"container" | "arrow", ComponentStyleFunction<string, string, {}>> | undefined;
-        Tabs?: Record<"container" | "tabsList" | "tabpanel" | "tab", ComponentStyleFunction<string, string, {}>> | undefined;
-        Underlay?: ComponentStyleFunction<string, string, {}> | undefined;
-        Calendar?: Record<"calendar" | "calendarCell" | "calendarControllers" | "calendarHeader" | "calendarGrid", ComponentStyleFunction<string, string, {}>> | undefined;
-        DatePicker?: Record<"button" | "container", ComponentStyleFunction<string, string, {}>> | undefined;
-        ComboBox?: ComponentStyleFunction<string, string, {}> | undefined;
+        Accordion?: Record<"button" | "item", ComponentStyleFunction<string, string>>;
+        Badge?: ComponentStyleFunction<string, string>;
+        Body?: ComponentStyleFunction<string, string>;
+        Button?: ComponentStyleFunction<string, string>;
+        Card?: ComponentStyleFunction<string, string>;
+        DateField?: Record<"segment" | "field" | "action", ComponentStyleFunction<string, string>>;
+        Dialog?: Record<"closeButton" | "container", ComponentStyleFunction<string, string>>;
+        Divider?: ComponentStyleFunction<string, string>;
+        Field?: ComponentStyleFunction<string, string>;
+        Footer?: ComponentStyleFunction<string, string>;
+        Header?: ComponentStyleFunction<string, string>;
+        Headline?: ComponentStyleFunction<string, string>;
+        Popover?: ComponentStyleFunction<string, string>;
+        HelpText?: Record<"container" | "icon", ComponentStyleFunction<string, string>>;
+        Image?: ComponentStyleFunction<string, string>;
+        Checkbox?: Record<"container" | "label" | "checkbox" | "group", ComponentStyleFunction<string, string>>;
+        Switch?: Record<"container" | "track" | "thumb", ComponentStyleFunction<string, string>>;
+        Input?: Record<"input" | "icon" | "action", ComponentStyleFunction<string, string>>;
+        Label?: Record<"container" | "indicator", ComponentStyleFunction<string, string>>;
+        List?: Record<"ol" | "ul" | "item", ComponentStyleFunction<string, string>>;
+        Link?: ComponentStyleFunction<string, string>;
+        ListBox?: Record<"container" | "list" | "option" | "section" | "sectionTitle", ComponentStyleFunction<string, string>>;
+        Menu?: Record<"container" | "section" | "item", ComponentStyleFunction<string, string>>;
+        Radio?: Record<"container" | "label" | "radio" | "group", ComponentStyleFunction<string, string>>;
+        Slider?: Record<"container" | "track" | "thumb" | "output", ComponentStyleFunction<string, string>>;
+        Select?: Record<"select" | "icon", ComponentStyleFunction<string, string>>;
+        NumberField?: Record<"group" | "stepper" | "input", ComponentStyleFunction<string, string>>;
+        SectionMessage?: Record<"container" | "icon" | "title" | "content", ComponentStyleFunction<string, string>>;
+        Table?: Record<"table" | "header" | "row" | "cell", ComponentStyleFunction<string, string>>;
+        Tag?: Record<"tag" | "listItems" | "closeButton", ComponentStyleFunction<string, string>>;
+        Text?: ComponentStyleFunction<string, string>;
+        TextArea?: ComponentStyleFunction<string, string>;
+        Tooltip?: Record<"container" | "arrow", ComponentStyleFunction<string, string>>;
+        Tabs?: Record<"container" | "tabsList" | "tabpanel" | "tab", ComponentStyleFunction<string, string>>;
+        Underlay?: ComponentStyleFunction<string, string>;
+        Calendar?: Record<"calendar" | "calendarCell" | "calendarControllers" | "calendarHeader" | "calendarGrid", ComponentStyleFunction<string, string>>;
+        DatePicker?: Record<"container" | "button", ComponentStyleFunction<string, string>>;
+        ComboBox?: ComponentStyleFunction<string, string>;
     };
     name: string;
     screens?: {
         [key: string]: string;
-    } | undefined;
-    colors?: NestedStringObject | undefined;
-    shadow?: NestedStringObject | undefined;
-    height?: NestedStringObject | undefined;
-    root?: ComponentStyleFunction<never, never, {}> | undefined;
+    };
+    colors?: NestedStringObject;
+    shadow?: NestedStringObject;
+    height?: NestedStringObject;
+    root?: ComponentStyleFunction;
 };
 declare const defaultTheme: {
@@ -829,63 +836,123 @@ type AlignmentProp = {
     };
 };
 type CursorProp = {
+    /**
+     * Set the cursor for the element.
+     */
     cursor?: keyof typeof cursorStyle;
 };
 type FontStyleProp = {
+    /**
+     * Set the font style for the text element.
+     */
     fontStyle?: keyof typeof textStyle;
 };
 type FontWeightProp = {
+    /**
+     * Set the font weight for the text element.
+     */
     weight?: keyof typeof fontWeight;
 };
 type FontSizeProp = {
+    /**
+     * Set the font size for the text element.
+     */
     fontSize?: keyof typeof textSize;
 };
 type GridColsAlignProp = {
+    /**
+     * Set the alignment of grid columns.
+     */
     align?: keyof typeof gridColsAlign;
 };
 type GridColumn = {
+    /**
+     * Set the alignment of a grid column.
+     */
     align?: keyof typeof gridColumn;
 };
 type GapSpaceProp = {
+    /**
+     * The space between the children.
+     */
     space?: keyof typeof gapSpace;
 };
 type ObjectFitProp = {
+    /**
+     * Set the object-fit property for the element.
+     */
     fit?: keyof typeof objectFit;
 };
 type ObjectPositionProp = {
+    /**
+     * Set the object-position property for the element.
+     */
     position?: keyof typeof objectPosition;
 };
 type PaddingSpaceProp = {
+    /**
+     * Set the padding space for the element.
+     */
     space?: keyof typeof paddingSpace;
 };
 type PaddingSpacePropX = {
+    /**
+     * Set the horizontal padding space for the element.
+     */
     spaceX?: keyof typeof paddingSpaceX;
 };
 type PaddingSpacePropY = {
+    /**
+     * Set the vertical padding space for the element.
+     */
     spaceY?: keyof typeof paddingSpaceY;
 };
 type PaddingRightProp = {
+    /**
+     * Set the right padding for the element.
+     */
     pr?: keyof typeof paddingRight;
 };
 type PaddingLeftProp = {
+    /**
+     * Set the left padding for the element.
+     */
     pl?: keyof typeof paddingLeft;
 };
 type PaddingTopProp = {
+    /**
+     * Set the top padding for the element.
+     */
     pt?: keyof typeof paddingTop;
 };
 type PaddingBottomProp = {
+    /**
+     * Set the bottom padding for the element.
+     */
     pb?: keyof typeof paddingBottom;
 };
 type PlaceItemsProp = {
+    /**
+     * Set the alignment of place-items property for the element.
+     */
     align?: keyof typeof placeItems;
 };
 type TextAlignProp = {
+    /**
+     * Set the text alignment for the element.
+     */
     align?: keyof typeof textAlign;
 };
 type WidthProp = {
+    /**
+     * Set the width of the element.
+     */
     width?: keyof typeof width;
 };
 type HeightProp = {
+    /**
+     * Set the height of the element.
+     */
     height?: keyof typeof height;
 };

package/dist/index.js CHANGED Viewed

@@ -95,8 +95,7 @@ var get = (obj, path, fallback) => {
   const key = path.split(".");
   let result = obj;
   for (let i = 0, length = key.length; i < length; i++) {
-    if (!result)
-      break;
+    if (!result) break;
     result = result[key[i]];
   }
   return result === void 0 ? fallback : result;
@@ -193,8 +192,7 @@ var useResponsiveValue = (values, defaultIndex = 0) => {
   }
   const [index, setIndex] = (0, import_react2.useState)(defaultIndex);
   (0, import_react2.useEffect)(() => {
-    if (typeof window == "undefined")
-      return;
+    if (typeof window == "undefined") return;
     const getIndex = () => Object.values(screens).filter(
       (breakpoint) => window.matchMedia(`screen and (min-width: ${breakpoint})`).matches
     ).length;
@@ -246,8 +244,7 @@ var useSmallScreen = () => {
   }, []);
   (0, import_react4.useEffect)(() => {
     handleResize();
-    if (typeof window == "undefined")
-      return;
+    if (typeof window == "undefined") return;
     window.addEventListener("resize", handleResize);
     return () => window.removeEventListener("resize", handleResize);
   }, [handleResize]);
@@ -260,8 +257,7 @@ var extendTheme = (newStyles, theme) => {
   Object.keys(newStyles).forEach((component) => {
     const componentStyles = newStyles[component];
     const mergedComponentStyles = mergedStyles[component];
-    if (!mergedComponentStyles)
-      return mergedStyles;
+    if (!mergedComponentStyles) return mergedStyles;
     if (typeof newStyles[component] !== "function") {
       const mergeSlotStyles = Object.keys(componentStyles).reduce(
         (acc, slot) => {
@@ -271,7 +267,7 @@ var extendTheme = (newStyles, theme) => {
             var _a, _b;
             acc2[variantItem] = {
               ...(_a = newSlot == null ? void 0 : newSlot.variants) == null ? void 0 : _a[variantItem],
-              ...(_b = mergedSlot == null ? void 0 : mergedSlot.variants) == null ? void 0 : _b.variantItem
+              ...(_b = mergedSlot == null ? void 0 : mergedSlot.variants) == null ? void 0 : _b[variantItem]
             };
             return acc2;
           }, {});
@@ -350,15 +346,13 @@ 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));
+  return /* @__PURE__ */ import_react7.default.createElement("span", { className: tabular ? "tabular-nums" : void 0 }, numberFormatter.format(value));
 };
 // src/style-props.tsx

package/dist/index.mjs CHANGED Viewed

@@ -21,8 +21,7 @@ var get = (obj, path, fallback) => {
   const key = path.split(".");
   let result = obj;
   for (let i = 0, length = key.length; i < length; i++) {
-    if (!result)
-      break;
+    if (!result) break;
     result = result[key[i]];
   }
   return result === void 0 ? fallback : result;
@@ -119,8 +118,7 @@ var useResponsiveValue = (values, defaultIndex = 0) => {
   }
   const [index, setIndex] = useState(defaultIndex);
   useEffect(() => {
-    if (typeof window == "undefined")
-      return;
+    if (typeof window == "undefined") return;
     const getIndex = () => Object.values(screens).filter(
       (breakpoint) => window.matchMedia(`screen and (min-width: ${breakpoint})`).matches
     ).length;
@@ -172,8 +170,7 @@ var useSmallScreen = () => {
   }, []);
   useEffect2(() => {
     handleResize();
-    if (typeof window == "undefined")
-      return;
+    if (typeof window == "undefined") return;
     window.addEventListener("resize", handleResize);
     return () => window.removeEventListener("resize", handleResize);
   }, [handleResize]);
@@ -186,8 +183,7 @@ var extendTheme = (newStyles, theme) => {
   Object.keys(newStyles).forEach((component) => {
     const componentStyles = newStyles[component];
     const mergedComponentStyles = mergedStyles[component];
-    if (!mergedComponentStyles)
-      return mergedStyles;
+    if (!mergedComponentStyles) return mergedStyles;
     if (typeof newStyles[component] !== "function") {
       const mergeSlotStyles = Object.keys(componentStyles).reduce(
         (acc, slot) => {
@@ -197,7 +193,7 @@ var extendTheme = (newStyles, theme) => {
             var _a, _b;
             acc2[variantItem] = {
               ...(_a = newSlot == null ? void 0 : newSlot.variants) == null ? void 0 : _a[variantItem],
-              ...(_b = mergedSlot == null ? void 0 : mergedSlot.variants) == null ? void 0 : _b.variantItem
+              ...(_b = mergedSlot == null ? void 0 : mergedSlot.variants) == null ? void 0 : _b[variantItem]
             };
             return acc2;
           }, {});
@@ -276,15 +272,13 @@ 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));
+  return /* @__PURE__ */ React4.createElement("span", { className: tabular ? "tabular-nums" : void 0 }, numberFormatter.format(value));
 };
 // src/style-props.tsx

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/system",
-  "version": "7.8.1",
+  "version": "8.0.0",
   "description": "Marigold System Library",
   "license": "MIT",
   "keywords": [
@@ -27,20 +27,20 @@
     "@react-aria/i18n": "3.11.1",
     "class-variance-authority": "0.7.0",
     "deepmerge": "4.2.2",
-    "react-fast-compare": "3.2.0",
-    "tailwind-merge": "2.2.1",
-    "@marigold/types": "1.1.0"
+    "react-fast-compare": "3.2.2",
+    "tailwind-merge": "2.3.0",
+    "@marigold/types": "1.1.1"
   },
   "peerDependencies": {
     "react": "18.x",
     "react-dom": "18.x"
   },
   "devDependencies": {
-    "@babel/core": "7.24.6",
-    "postcss": "8.4.35",
+    "@babel/core": "7.24.7",
+    "postcss": "8.4.38",
     "react": "18.3.1",
-    "tailwindcss": "3.4.1",
-    "tsup": "8.0.2",
+    "tailwindcss": "3.4.4",
+    "tsup": "8.1.0",
     "@marigold/tsconfig": "0.4.0"
   },
   "scripts": {