@marigold/system 0.3.3 → 0.5.1

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @marigold/system
 
+## 0.5.1
+
+### Patch Changes
+
+- [#1795](https://github.com/marigold-ui/marigold/pull/1795) [`a178eafe`](https://github.com/marigold-ui/marigold/commit/a178eafe8c8380ee23b4587d953ee52b231414ff) Thanks [@ti10le](https://github.com/ti10le)! - refa: use interface instead of type
+
+## 0.5.0
+
+### Minor Changes
+
+- [#1723](https://github.com/marigold-ui/marigold/pull/1723) [`5936de75`](https://github.com/marigold-ui/marigold/commit/5936de75e5a0134584438117c53c5edfe15c6c5d) Thanks [@sebald](https://github.com/sebald)! - feat(system): add hook that allows to use values based on screen size
+
+## 0.4.0
+
+### Minor Changes
+
+- [`f9526234`](https://github.com/marigold-ui/marigold/commit/f9526234257a149b12c14191a524691470da3942) Thanks [@sebald](https://github.com/sebald)! - chore: Use `tsup` to build packages
+
+* [`f9526234`](https://github.com/marigold-ui/marigold/commit/f9526234257a149b12c14191a524691470da3942) Thanks [@sebald](https://github.com/sebald)! - Improved size in node_modules
+
+### Patch Changes
+
+- Updated dependencies [[`f9526234`](https://github.com/marigold-ui/marigold/commit/f9526234257a149b12c14191a524691470da3942)]:
+  - @marigold/types@0.4.0
+
 ## 0.3.1
 
 ### Patch Changes

package/dist/index.d.ts

@@ -1,8 +1,373 @@
-export * from './Box';
-export * from './Global';
-export * from './normalize';
-export * from './SVG';
-export * from './theme';
-export * from './types';
-export * from './useTheme';
-export * from './variant';
+import { PolymorphicPropsWithRef, PolymorphicComponentWithRef, ComponentProps } 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 React, { ElementType, ReactNode } from 'react';
+import * as CSS from 'csstype';
+
+/**
+ * Create type aliases for `theme-ui` so that it doesn't leak too much into our code.
+ */
+
+declare type ResponsiveStyleValue<T> = ResponsiveStyleValue$1<T>;
+declare type StyleObject = ThemeUIStyleObject;
+declare type CSSObject = ThemeUICSSObject;
+declare type CSSProperties = ThemeUICSSProperties;
+
+interface StyleProps extends Pick<CSSObject, 'display' | 'height' | 'width' | 'minWidth' | 'maxWidth' | 'position' | 'top' | 'bottom' | 'right' | 'left' | 'zIndex' | 'p' | 'px' | 'py' | 'pt' | 'pb' | 'pl' | 'pr' | 'm' | 'mx' | 'my' | 'mt' | 'mb' | 'ml' | 'mr' | 'flexDirection' | 'flexWrap' | 'flexShrink' | 'flexGrow' | 'alignItems' | 'justifyContent' | 'bg' | 'border' | 'borderRadius' | 'boxShadow' | 'opacity' | 'overflow' | 'transition'> {
+}
+interface BoxOwnProps extends StyleProps {
+    css?: CSSObject;
+    variant?: string | string[];
+    /**
+     * Use to set base styles for the component
+     * @internal Used to set default styles for Marigold components
+     */
+    __baseCSS?: CSSObject;
+}
+interface BoxProps extends PolymorphicPropsWithRef<BoxOwnProps, 'div'> {
+}
+declare const Box: PolymorphicComponentWithRef<BoxOwnProps, 'div'>;
+
+declare const Global: () => JSX.Element;
+
+/**
+ * Normalize styling of certain elements between browsers.
+ * Based on https://www.joshwcomeau.com/css/custom-css-reset/
+ */
+
+declare const normalize: {
+    readonly base: {
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
+    };
+    readonly a: {
+        readonly textDecoration: "none";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
+    };
+    readonly p: {
+        readonly overflowWrap: "break-word";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
+    };
+    readonly h1: {
+        readonly overflowWrap: "break-word";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
+    };
+    readonly h2: {
+        readonly overflowWrap: "break-word";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
+    };
+    readonly h3: {
+        readonly overflowWrap: "break-word";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
+    };
+    readonly h4: {
+        readonly overflowWrap: "break-word";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
+    };
+    readonly h5: {
+        readonly overflowWrap: "break-word";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
+    };
+    readonly h6: {
+        readonly overflowWrap: "break-word";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
+    };
+    readonly img: {
+        readonly display: "block";
+        readonly maxWidth: "100%";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
+    };
+    readonly picture: {
+        readonly display: "block";
+        readonly maxWidth: "100%";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
+    };
+    readonly video: {
+        readonly display: "block";
+        readonly maxWidth: "100%";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
+    };
+    readonly canvas: {
+        readonly display: "block";
+        readonly maxWidth: "100%";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
+    };
+    readonly svg: {
+        readonly display: "block";
+        readonly maxWidth: "100%";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
+    };
+    readonly select: {
+        readonly display: "block";
+        readonly appearance: "none";
+        readonly font: "inherit";
+        readonly '&::-ms-expand': {
+            readonly display: "none";
+        };
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
+    };
+    readonly button: {
+        readonly display: "block";
+        readonly appearance: "none";
+        readonly font: "inherit";
+        readonly background: "transparent";
+        readonly textAlign: "center";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
+    };
+    readonly textarea: {
+        readonly display: "block";
+        readonly appearance: "none";
+        readonly font: "inherit";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
+    };
+    readonly input: {
+        readonly display: "block";
+        readonly appearance: "none";
+        readonly font: "inherit";
+        readonly '&::-ms-clear': {
+            readonly display: "none";
+        };
+        readonly '&::-webkit-search-cancel-button': {
+            readonly WebkitAppearance: "none";
+        };
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
+    };
+};
+declare type NormalizedElement = keyof typeof normalize;
+/**
+ * Type-safe helper to get normalization. If no normalization is found,
+ * returns the *base* normalization.
+ */
+declare const getNormalizedStyles: (val?: ElementType<any> | undefined) => {
+    readonly boxSizing: "border-box";
+    readonly margin: 0;
+    readonly minWidth: 0;
+};
+
+interface SVGProps extends ComponentProps<'svg'> {
+    size?: number;
+}
+declare const SVG: React.FC<SVGProps>;
+
+/**
+ * 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`.
+ */
+declare 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.
+ *
+ * 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.
+ */
+declare type Scale<T> = {
+    [key: string]: ScaleValue<T>;
+};
+/**
+ * Predefined {@link Scale} scale which uses size values.
+ */
+declare type SizeScale<T> = {
+    xxsmall?: ScaleValue<T>;
+    xsmall?: ScaleValue<T>;
+    small?: ScaleValue<T>;
+    medium?: ScaleValue<T>;
+    large?: ScaleValue<T>;
+    xlarge?: ScaleValue<T>;
+    xxlarge?: ScaleValue<T>;
+};
+/**
+ * A {@link SizeScale} that also includes a required `none` value, which is
+ * usually used to define the blank value (e.g `0`).
+ */
+declare type ZeroScale<T> = {
+    none: ScaleValue<T>;
+} & Scale<T>;
+/**
+ * Base theme with typings for available scales properties.
+ */
+interface Theme {
+    /**
+     * 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', '@media (min-width: 56em) and (orientation: landscape)', '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?: ZeroScale<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?: ZeroScale<CSS.Property.LetterSpacing<string | 0 | number>>;
+    /**
+     * Used to define a scale for size values,
+     * like `height`, `width`, `flexBasis`, etc.
+     */
+    sizes?: ZeroScale<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?: ZeroScale<CSS.Property.Transition>;
+}
+
+/**
+ * Hook that can be used to return values based on the current screen size,
+ * using breakpoints from the theme (`theme.breakpoints`). Note that this
+ * hook is client.side only.
+ */
+declare const useResponsiveValue: <T>(values: T[], defaultIndex?: number) => T;
+
+/**
+ * @internal
+ */
+declare const __defaultTheme: Theme;
+declare const useTheme: () => {
+    theme: Theme;
+    css: (style: StyleObject) => _theme_ui_css.CSSObject;
+};
+interface ThemeProviderProps<T extends Theme> {
+    theme: T;
+    children: ReactNode;
+}
+declare function ThemeProvider<T extends Theme>({ theme, children, }: ThemeProviderProps<T>): JSX.Element;
+
+/**
+ * Ensures that the `val` is an array. Will return an empty array if `val` is falsy.
+ */
+declare const ensureArray: <T>(val?: T | T[] | undefined) => T[];
+/**
+ * Removes trailing dot from variant, if necessary. This is necessary to support
+ * `__default` styles. See https://github.com/system-ui/theme-ui/pull/951
+ */
+declare const ensureVariantDefault: (val: string) => string;
+/**
+ * Ensures that the `variant` is an array and supports the `__default` key.
+ */
+declare const ensureArrayVariant: <T extends string>(variant?: T | T[] | undefined) => string[];
+interface State {
+    checked?: boolean;
+    focus?: boolean;
+    hover?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+}
+/**
+ * Appends given `state` to a `variant`.
+ */
+declare const appendVariantState: (variant: string, state: keyof State) => string;
+/**
+ * Create a variant array from a `variant` and `state` containing
+ * passed states, if they are truthy.
+ */
+declare const conditional: (variant: string, { disabled, ...states }: State) => string[];
+
+export { Box, BoxOwnProps, BoxProps, CSSObject, CSSProperties, Global, NormalizedElement, ResponsiveStyleValue, SVG, SVGProps, Scale, ScaleValue, SizeScale, State, StyleObject, StyleProps, Theme, ThemeProvider, ThemeProviderProps, ZeroScale, __defaultTheme, appendVariantState, conditional, ensureArray, ensureArrayVariant, ensureVariantDefault, getNormalizedStyles, normalize, useResponsiveValue, useTheme };