@marigold/system 5.6.0 → 6.0.1

package/dist/index.d.ts

@@ -1,256 +1,123 @@
-import { Simplify, PropsOf, PolymorphicComponent, HtmlProps, KebabCase } from '@marigold/types';
-import * as _theme_ui_css from '@theme-ui/css';
-import { ResponsiveStyleValue as ResponsiveStyleValue$1, ThemeUIStyleObject, ThemeUICSSObject, ThemeUICSSProperties, NestedScaleDict } from '@theme-ui/css';
-import * as react from 'react';
-import { ReactNode } from 'react';
-import * as CSS from 'csstype';
-export { keyframes } from '@emotion/react';
+import * as React from 'react';
+import React__default, { ReactNode } from 'react';
+import { HtmlProps, KebabCase } from '@marigold/types';
+import { StringToBoolean, ClassProp } from 'class-variance-authority/dist/types';
+export { VariantProps } from 'class-variance-authority';
 
-type ResponsiveStyleValue<T> = ResponsiveStyleValue$1<T>;
-type StyleObject = ThemeUIStyleObject;
-type CSSObject = Simplify<ThemeUICSSObject>;
-type CSSProperties = Simplify<ThemeUICSSProperties>;
+interface SVGProps extends Omit<HtmlProps<'svg'>, 'fill'> {
+    size?: number | string | number[] | string[];
+    className?: string;
+}
+declare const SVG: React__default.ForwardRefExoticComponent<SVGProps & React__default.RefAttributes<SVGSVGElement>>;
 
-/**
- * Props that every component should accepts to change the styling
- */
-type ThemeComponentProps = {
-    variant?: string;
-    size?: string;
+type ConfigSchema = Record<string, Record<string, ClassValue>>;
+type ConfigVariants<T extends ConfigSchema> = {
+    [Variant in keyof T]?: StringToBoolean<keyof T[Variant]> | null | undefined;
 };
-/**
- * Structure for component styles in a theme.
- */
-type ThemeExtension<ComponentName extends string> = {
-    [P in ComponentName]?: {
-        base?: CSSObject;
-        variant?: {
-            [key: string]: CSSObject;
-        };
-        size?: {
-            [key: string]: CSSObject;
-        };
-    };
+type ConfigVariantsMulti<T extends ConfigSchema> = {
+    [Variant in keyof T]?: StringToBoolean<keyof T[Variant]> | StringToBoolean<keyof T[Variant]>[] | undefined;
 };
-/**
- * Structure for component styles in a theme that consists of multiple parts.
- */
-type ThemeExtensionsWithParts<ComponentName extends string, Parts extends string[]> = {
-    [P in ComponentName]?: {
-        base?: {
-            [Part in Parts[number]]?: CSSObject;
-        };
-        variant?: {
-            [key: string]: {
-                [Part in Parts[number]]?: CSSObject;
-            };
-        };
-        size?: {
-            [key: string]: {
-                [Part in Parts[number]]?: CSSObject;
-            };
-        };
-    };
+type Config<T> = T extends ConfigSchema ? {
+    variants?: T;
+    defaultVariants?: ConfigVariants<T>;
+    compoundVariants?: (T extends ConfigSchema ? (ConfigVariants<T> | ConfigVariantsMulti<T>) & ClassProp : ClassProp)[];
+} : never;
+type Props<T> = T extends ConfigSchema ? ConfigVariants<T> & ClassProp : ClassProp;
+declare const cva: <T>(base?: ClassValue, config?: Config<T> | undefined) => {
+    (props?: Props<T> | undefined): string;
+    variants: T | undefined;
 };
+type ClassDictionary = Record<string, any>;
+type ClassArray = ClassValue[];
+type ClassValue = ClassArray | ClassDictionary | string | number | null | boolean | undefined;
+declare const cn: (...inputs: ClassValue[]) => string;
+declare const createVar: (o: {
+    [key: string]: string | number | undefined;
+}) => React.CSSProperties;
 /**
- * Value used to define a scale.
- *
- * Can be nested to support a default value.
- *
- * @example
- * Given a theme
- * ```
- * {
- *   colors: {
- *     primary: { __default: '#00f', light: '#33f' }
- *   }
- * }
- * ```
- * `css{{ color: 'primary' }}` resolves to `color: #00f`.
- */
-type ScaleValue<T> = T | T[] | NestedScaleDict<T> | undefined;
-/**
- * Scales are a set of named, pre-defined CSS values which are used
- * to create consitency in sizing across visual elements. They give
- * plain values semantics meaning.
+ * 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
+ * the value is undefined
  *
- * Marigold uses a plain object to define scales, where the key should be a
- * descriptive name for the scale (e.g. `small`/`medium`/.. or `body`/`heading`/...),
- * and the value is the CSS value.
- */
-interface Scale<T> {
-    [key: string]: ScaleValue<T>;
-}
-/**
- * A {@link Scale} that also includes a required `none` value, which is
- * usually used to define the blank value (e.g `0`).
- */
-interface ZeroScale<T> extends Scale<T> {
-    none: ScaleValue<T>;
-}
-/**
- * Predefined {@link Scale} scale which uses size values.
+ * Based on: https://github.com/developit/dlv
  */
-interface SizeScale<T> {
-    regular?: ScaleValue<T>;
-    xxsmall?: ScaleValue<T>;
-    xsmall?: ScaleValue<T>;
-    small?: ScaleValue<T>;
-    medium?: ScaleValue<T>;
-    large?: ScaleValue<T>;
-    xlarge?: ScaleValue<T>;
-    xxlarge?: ScaleValue<T>;
-    xxxlarge?: ScaleValue<T>;
-    huge?: ScaleValue<T>;
-    epic?: ScaleValue<T>;
-}
-/**
- * A {@link SizeScale} that also includes a required `none` value, which is
- * usually used to define the blank value (e.g `0`).
- */
-interface ZeroSizeScale<T> extends SizeScale<T> {
-    none: ScaleValue<T>;
-}
-/**
- * Base theme with typings for available scales properties.
- */
-interface Theme {
-    /**
-     * Styles that applied to the root of the app, where the root can be either the document
-     * for full page apps or an element if you're only using Marigold on a portion of the page.
-     * This is useful for additional normalizationor and to style non-Marigold elements.
-     */
-    root?: {
-        [key: string]: CSSObject;
-    };
-    /**
-     * To configure the default breakpoints used in responsive array values,
-     * add a breakpoints array to your theme.
-     *
-     * Each breakpoint should be a string  with a CSS length unit included or a
-     * string including a CSS media query. String values with a CSS length unit
-     * will be used to generate a mobile-first (i.e. min-width) media query.
-     *
-     * @example
-     * ```ts
-     * {
-     *   breakpoints: [
-     *     '40em', '50em', '64em',
-     *   ],
-     * }
-     * ```
-     */
-    breakpoints?: Array<string>;
-    colors?: Scale<CSS.Property.Color | NestedScaleDict<CSS.Property.Color>>;
-    /**
-     * Used to define a scale for whitspace values,
-     * like `padding`, `margin`, `gap`, etc.
-     */
-    space?: ZeroSizeScale<CSS.Property.Margin<number | string>>;
-    /**
-     * Used to define a `font-size` scale.
-     */
-    fontSizes?: Scale<CSS.Property.FontSize<number>>;
-    /**
-     * Used to define a `font-family` scale.
-     */
-    fonts?: Scale<CSS.Property.FontFamily>;
-    /**
-     * Used to define a `font-weight` scale.
-     */
-    fontWeights?: Scale<CSS.Property.FontWeight>;
-    /**
-     * Used to define a `line-height` scale.
-     */
-    lineHeights?: Scale<CSS.Property.LineHeight<string | 0 | number>>;
-    /**
-     * Used to define a `letter-spacing` scale.
-     */
-    letterSpacings?: Scale<CSS.Property.LetterSpacing<string | 0 | number>>;
-    /**
-     * Used to define a scale for size values,
-     * like `height`, `width`, `flexBasis`, etc.
-     */
-    sizes?: ZeroSizeScale<CSS.Property.Height<{}> | CSS.Property.Width<{}>>;
-    /**
-     * Used to define different `border` styles.
-     */
-    borders?: ZeroScale<CSS.Property.Border<{}>>;
-    /**
-     * Used to define `border-style` styles.
-     */
-    borderStyles?: Scale<CSS.Property.Border<{}>>;
-    /**
-     * Used to define `border-width` styles.
-     */
-    borderWidths?: ZeroScale<CSS.Property.BorderWidth<string | 0 | number>>;
-    /**
-     * Used to define `border-radius` styles.
-     */
-    radii?: ZeroScale<CSS.Property.BorderRadius<string | 0 | number>>;
-    /**
-     * Used to define `Shadow` styles.
-     */
-    shadows?: ZeroScale<CSS.Property.BoxShadow>;
-    /**
-     * Used to define a `z-index` scake.
-     */
-    zIndices?: Scale<CSS.Property.ZIndex>;
-    /**
-     * Used to define a `opacity` scale.
-     */
-    opacities?: Scale<CSS.Property.Opacity>;
-    /**
-     * Used to define a `transition` styles.
-     */
-    transitions?: Scale<CSS.Property.Transition>;
-}
+declare const get: (obj: object, path: string, fallback?: any) => any;
 
-interface BoxOwnProps {
-    css?: CSSObject | CSSObject[];
-    /**
-     * Use to set base styles for the component
-     * @internal
-     */
-    __baseCSS?: CSSObject;
+interface NestedStringObject {
+    [key: string]: NestedStringObject | string;
 }
-interface BoxProps extends PropsOf<typeof Box> {
+interface ComponentStyleFunction<Variants extends string = never, Sizes extends string = never, Additional extends {
+    [name: string]: any;
+} = {}> {
+    (props?: {
+        variant?: Variants | null;
+        size?: Sizes | null;
+        className?: ClassValue;
+    } & Partial<Additional>): string;
+    variants: ConfigSchema | undefined;
 }
-declare const Box: PolymorphicComponent<"div", BoxOwnProps>;
-
-type GlobalProps = {
-    /**
-     * CSS Selector to change the element that the styles will be applied to.
-     */
-    selector?: string;
-    /**
-     * Normalize `html` and `body`? Defaults to `true`.
-     */
-    normalizeDocument?: boolean;
-};
-declare const Global: ({ normalizeDocument, selector }: GlobalProps) => JSX.Element;
-
-interface SVGProps extends HtmlProps<'svg'> {
-    size?: number | string | number[] | string[];
-    css?: CSSObject;
-}
-declare const SVG: react.ForwardRefExoticComponent<SVGProps & react.RefAttributes<SVGElement>>;
+type Theme = {
+    name: string;
+    screens?: {
+        [key: string]: string;
+    };
+    colors?: NestedStringObject;
+    root?: ComponentStyleFunction;
+    components: {
+        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', 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', ComponentStyleFunction<string, string>>;
+        Slider?: Record<'track' | 'thumb' | 'label' | 'output', ComponentStyleFunction<string, string>>;
+        Select?: Record<'select' | 'icon', ComponentStyleFunction<string, string>>;
+        NumberField?: Record<'group' | 'stepper', ComponentStyleFunction<string, string>>;
+        Message?: Record<'container' | 'icon' | 'title' | 'content', ComponentStyleFunction<string, string>>;
+        Table?: Record<'table' | 'header' | 'row' | 'cell', ComponentStyleFunction<string, string>>;
+        Tag?: Record<'tag' | 'gridCell' | 'closeButton', ComponentStyleFunction<string, string>>;
+        Text?: ComponentStyleFunction<string, string>;
+        TextArea?: ComponentStyleFunction<string, string>;
+        Tooltip?: Record<'container' | 'arrow', ComponentStyleFunction<string, string>>;
+        Tabs?: Record<'tabs' | 'tab', ComponentStyleFunction<string, string>>;
+        Underlay?: ComponentStyleFunction<string, string>;
+        Calendar?: Record<'calendar' | 'calendarCell' | 'calendarControllers', ComponentStyleFunction<string, string>>;
+        DatePicker?: Record<'container' | 'button', ComponentStyleFunction<string, string>>;
+    };
+};
+type ComponentNames = keyof Theme['components'];
+type ThemeComponent<C extends ComponentNames> = NonNullable<Theme['components'][C]>;
 
-interface ComponentStylesProps {
+interface UseClassNamesProps<C extends ComponentNames> {
+    component: C;
     variant?: string;
     size?: string;
+    className?: ThemeComponent<C> extends (...args: any) => any ? string : {
+        [slot in keyof ThemeComponent<C>]?: string;
+    };
 }
-type ComponentStyleParts<Parts extends string[]> = {
-    [P in Parts[number]]: CSSObject;
-};
-declare function useComponentStyles(componentName: string, props?: ComponentStylesProps, options?: {
-    parts: never;
-}): CSSObject;
-declare function useComponentStyles<Part extends string, Parts extends ReadonlyArray<Part>>(componentName: string, props?: ComponentStylesProps, options?: {
-    parts: Parts;
-}): {
-    [P in Parts[number]]: CSSObject;
+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">({ component, className, variant, size, }: UseClassNamesProps<C>) => ComponentClassNames<C>;
 
 /**
  * Hook that can be used to return values based on the current screen size,
@@ -259,7 +126,7 @@ declare function useComponentStyles<Part extends string, Parts extends ReadonlyA
  */
 declare const useResponsiveValue: <T>(values: T[], defaultIndex?: number) => T;
 
-type ComponentState = 'hover' | 'focus' | 'focusVisible' | 'active' | 'visited' | 'disabled' | 'readOnly' | 'checked' | 'selected' | 'indeterminate' | 'expanded' | 'error' | 'hasIcon';
+type ComponentState = 'active' | 'checked' | 'disabled' | 'error' | 'expanded' | 'focus' | 'focusVisible' | 'hasIcon' | 'hover' | 'indeterminate' | 'readOnly' | 'required' | 'selected' | 'visited';
 type StateAttrKeyProps = `data-${KebabCase<ComponentState>}`;
 type StateAttrProps = {
     [key in StateAttrKeyProps]?: '';
@@ -274,22 +141,17 @@ type UseStateProps = {
  */
 declare const useStateProps: (states: UseStateProps) => StateAttrProps;
 
-/**
- * @internal
- */
-declare const __defaultTheme: Theme;
-declare const useTheme: () => {
-    theme: Theme;
-    css: (style: StyleObject) => _theme_ui_css.CSSObject;
-    get: (path: string) => any;
-};
+declare const useTheme: () => Theme;
 interface ThemeProviderProps<T extends Theme> {
     theme: T;
     children: ReactNode;
 }
-declare function ThemeProvider<T extends Theme>({ theme, children, }: ThemeProviderProps<T>): JSX.Element;
+declare function ThemeProvider<T extends Theme>({ theme, children, }: ThemeProviderProps<T>): React__default.JSX.Element;
+
+declare const useSmallScreen: () => boolean;
 
 declare const defaultTheme: {
+    name: string;
     screens: {
         sm: string;
         md: string;
@@ -297,6 +159,532 @@ declare const defaultTheme: {
         xl: string;
         '2xl': string;
     };
+    components: {};
+};
+
+declare const width: {
+    full: string;
+    auto: 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 fontWeight: {
+    thin: string;
+    extralight: string;
+    light: string;
+    normal: string;
+    medium: string;
+    semibold: string;
+    bold: string;
+    extrabold: string;
+    black: string;
+};
+declare const textSize: {
+    xs: string;
+    sm: string;
+    base: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    '3xl': string;
+    '4xl': string;
+    '5xl': string;
+};
+declare const textStyle: {
+    italic: string;
+    normal: string;
+};
+declare const gapSpace: {
+    0: string;
+    1: string;
+    2: string;
+    3: 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;
+};
+declare const paddingSpace: {
+    0: string;
+    1: string;
+    2: string;
+    3: 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;
+};
+declare const paddingSpaceX: {
+    0: string;
+    1: string;
+    2: string;
+    3: 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;
+};
+declare const paddingSpaceY: {
+    0: string;
+    1: string;
+    2: string;
+    3: 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;
+};
+declare const paddingRight: {
+    0: string;
+    1: string;
+    2: string;
+    3: 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;
+};
+declare const paddingLeft: {
+    0: string;
+    1: string;
+    2: string;
+    3: 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;
+};
+declare const paddingTop: {
+    0: string;
+    1: string;
+    2: string;
+    3: 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;
+};
+declare const paddingBottom: {
+    0: string;
+    1: string;
+    2: string;
+    3: 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;
+};
+declare const alignment: {
+    vertical: {
+        alignmentX: {
+            none: undefined;
+            left: string;
+            center: string;
+            right: string;
+        };
+        alignmentY: {
+            none: undefined;
+            top: string;
+            center: string;
+            bottom: string;
+        };
+    };
+    horizontal: {
+        alignmentY: {
+            none: undefined;
+            top: string;
+            center: string;
+            bottom: string;
+        };
+        alignmentX: {
+            none: undefined;
+            left: string;
+            center: string;
+            right: string;
+        };
+    };
+};
+declare const placeItems: {
+    none: undefined;
+    left: string;
+    center: string;
+    right: string;
+};
+declare const textAlign: {
+    none: undefined;
+    left: string;
+    center: string;
+    right: string;
+};
+declare const gridColsAlign: {
+    left: string;
+    center: string;
+    right: string;
+};
+declare const gridColumn: {
+    left: string;
+    center: string;
+    right: string;
+};
+declare const aspect: {
+    square: string;
+    landscape: string;
+    portrait: string;
+    widescreen: string;
+    ultrawide: string;
+    golden: string;
+};
+declare const objectFit: {
+    contain: string;
+    cover: string;
+    fill: string;
+    none: string;
+    scaleDown: string;
+};
+declare const objectPosition: {
+    none: undefined;
+    bottom: string;
+    center: string;
+    left: string;
+    leftBottom: string;
+    leftTop: string;
+    right: string;
+    rightBottom: string;
+    rightTop: string;
+    top: string;
+};
+declare const cursorStyle: {
+    auto: string;
+    default: string;
+    pointer: string;
+    wait: string;
+    text: string;
+    move: string;
+    help: string;
+    notAllowed: string;
+    none: string;
+    progress: string;
+    cell: string;
+    crosshair: string;
+    vertical: string;
+    alias: string;
+    copy: string;
+    noDrop: string;
+    grap: string;
+    grapping: string;
+    scroll: string;
+    colResize: string;
+    rowResize: string;
+    ewResize: string;
+    nsResize: string;
+    zoomIn: string;
+    zoomOut: string;
+};
+type AspectProp = {
+    ratio?: keyof typeof aspect;
+};
+type AlignmentProp = {
+    orientation?: {
+        vertical?: {
+            alignY?: keyof typeof alignment.vertical.alignmentY;
+            alignX?: keyof typeof alignment.vertical.alignmentX;
+        };
+        horizontal?: {
+            alignX?: keyof typeof alignment.horizontal.alignmentX;
+            alignY?: keyof typeof alignment.horizontal.alignmentY;
+        };
+    };
+};
+type CursorProp = {
+    cursor?: keyof typeof cursorStyle;
+};
+type FontStyleProp = {
+    fontStyle?: keyof typeof textStyle;
+};
+type FontWeightProp = {
+    weight?: keyof typeof fontWeight;
+};
+type FontSizeProp = {
+    fontSize?: keyof typeof textSize;
+};
+type GridColsAlignProp = {
+    align?: keyof typeof gridColsAlign;
+};
+type GridColumn = {
+    align?: keyof typeof gridColumn;
+};
+type GapSpaceProp = {
+    space?: keyof typeof gapSpace;
+};
+type ObjectFitProp = {
+    fit?: keyof typeof objectFit;
+};
+type ObjectPositionProp = {
+    position?: keyof typeof objectPosition;
+};
+type PaddingSpaceProp = {
+    space?: keyof typeof paddingSpace;
+};
+type PaddingSpacePropX = {
+    spaceX?: keyof typeof paddingSpaceX;
+};
+type PaddingSpacePropY = {
+    spaceY?: keyof typeof paddingSpaceY;
+};
+type PaddingRightProp = {
+    pr?: keyof typeof paddingRight;
+};
+type PaddingLeftProp = {
+    pl?: keyof typeof paddingLeft;
+};
+type PaddingTopProp = {
+    pt?: keyof typeof paddingTop;
+};
+type PaddingBottomProp = {
+    pb?: keyof typeof paddingBottom;
+};
+type PlaceItemsProp = {
+    align?: keyof typeof placeItems;
+};
+type TextAlignProp = {
+    align?: keyof typeof textAlign;
+};
+type WidthProp = {
+    width?: keyof typeof width;
 };
 
-export { Box, BoxOwnProps, BoxProps, CSSObject, CSSProperties, ComponentState, ComponentStyleParts, ComponentStylesProps, Global, GlobalProps, ResponsiveStyleValue, SVG, SVGProps, Scale, ScaleValue, SizeScale, StateAttrKeyProps, StateAttrProps, StyleObject, Theme, ThemeComponentProps, ThemeExtension, ThemeExtensionsWithParts, ThemeProvider, ThemeProviderProps, UseStateProps, ZeroScale, ZeroSizeScale, __defaultTheme, defaultTheme, useComponentStyles, useResponsiveValue, useStateProps, useTheme };
+export { AlignmentProp, AspectProp, ClassArray, ClassDictionary, ClassValue, ComponentClassNames, ComponentNames, ComponentState, ComponentStyleFunction, Config, ConfigSchema, ConfigVariants, ConfigVariantsMulti, CursorProp, FontSizeProp, FontStyleProp, FontWeightProp, GapSpaceProp, GridColsAlignProp, GridColumn, NestedStringObject, ObjectFitProp, ObjectPositionProp, PaddingBottomProp, PaddingLeftProp, PaddingRightProp, PaddingSpaceProp, PaddingSpacePropX, PaddingSpacePropY, PaddingTopProp, PlaceItemsProp, Props, SVG, SVGProps, StateAttrKeyProps, StateAttrProps, TextAlignProp, Theme, ThemeComponent, ThemeProvider, ThemeProviderProps, UseClassNamesProps, UseStateProps, 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 };