@marigold/components 0.5.1 → 0.8.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Marigold UI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -1,17 +1,21 @@
 import { Theme as Theme$1, ThemeProviderProps, BoxOwnProps, ResponsiveStyleValue, CSSObject } from '@marigold/system';
 export { Box, BoxOwnProps, BoxProps, StyleProps, ThemeProvider, useTheme } from '@marigold/system';
-import React from 'react';
-import { ComponentProps, PolymorphicPropsWithRef, PolymorphicComponentWithRef, PolymorphicProps, PolymorphicComponent } from '@marigold/types';
+import React, { ReactChild } from 'react';
+import { ComponentProps, PolymorphicPropsWithRef, PolymorphicComponentWithRef, PolymorphicProps, PolymorphicComponent, NonZeroPercentage } from '@marigold/types';
 import { ToggleProps } from '@react-types/checkbox';
 import { SeparatorProps } from '@react-aria/separator';
 import { AriaSelectProps } from '@react-types/select';
 import { SingleSelection } from '@react-types/shared';
+import { AriaSwitchProps } from '@react-types/switch';
 import { AriaTextFieldProps } from '@react-types/textfield';
+import { TooltipTriggerProps } from '@react-types/tooltip';
+import { aspect, size } from '@marigold/tokens';
 import * as _react_stately_overlays from '@react-stately/overlays';
 import { OverlayProps } from '@react-aria/overlays';
 import { AriaDialogProps } from '@react-types/dialog';
 export { VisuallyHidden } from '@react-aria/visually-hidden';
 export { SSRProvider } from '@react-aria/ssr';
+import { TooltipTriggerState } from '@react-stately/tooltip';
 export { Item, Section } from '@react-stately/collections';
 
 interface RootThemeExtension<Value> {
@@ -24,31 +28,6 @@ interface MarigoldProviderProps<T extends Theme$1> extends ThemeProviderProps<T>
 }
 declare function MarigoldProvider<T extends Theme$1>({ theme, children, }: MarigoldProviderProps<T>): JSX.Element;
 
-declare const ICON_MAP: {
-    readonly success: ({ className, ...props }: {
-        [x: string]: any;
-        className?: string | undefined;
-    }) => JSX.Element;
-    readonly warning: ({ className, ...props }: {
-        [x: string]: any;
-        className?: string | undefined;
-    }) => JSX.Element;
-    readonly error: ({ className, ...props }: {
-        [x: string]: any;
-        className?: string | undefined;
-    }) => JSX.Element;
-};
-declare type AlertVariants = keyof typeof ICON_MAP;
-interface AlertThemeExtension<Value> {
-    alert?: {
-        [key in AlertVariants]?: Value;
-    };
-}
-interface AlertProps extends ComponentProps<'div'> {
-    variant?: AlertVariants;
-}
-declare const Alert: React.FC<AlertProps>;
-
 interface BadgeThemeExtension<Value> {
     badge?: {
         [key: string]: Value;
@@ -86,6 +65,7 @@ interface CheckboxIconProps {
     variant?: string;
     checked?: boolean;
     disabled?: boolean;
+    indeterminated?: boolean;
     error?: boolean;
 }
 
@@ -151,27 +131,10 @@ interface LabelProps extends LabelBaseProps {
 }
 declare const Label: React.FC<LabelProps>;
 
-interface TextThemeExtension<Value> {
-    text?: {
-        [key: string]: Value;
-    };
-}
-interface TextOwnProps extends BoxOwnProps {
-    align?: ResponsiveStyleValue<string>;
-    color?: ResponsiveStyleValue<string>;
-    cursor?: ResponsiveStyleValue<string>;
-    size?: ResponsiveStyleValue<keyof Theme$1['fontSizes'] | string>;
-    outline?: ResponsiveStyleValue<string>;
-    userSelect?: ResponsiveStyleValue<string>;
-}
-interface TextProps extends PolymorphicPropsWithRef<TextOwnProps, 'span'> {
-}
-declare const Text: PolymorphicComponentWithRef<TextOwnProps, 'span'>;
-
 interface LinkThemeExtension<Value> {
     link?: Value;
 }
-interface LinkOwnProps extends TextOwnProps {
+interface LinkOwnProps extends BoxOwnProps {
     disabled?: boolean;
 }
 interface LinkProps extends PolymorphicProps<LinkOwnProps, 'a'> {
@@ -267,6 +230,35 @@ interface SliderProps extends ComponentProps<'input'> {
 }
 declare const Slider: React.FC<SliderProps>;
 
+interface SwitchThemeExtension<Value> {
+    switch?: {
+        [key: string]: Value;
+    };
+}
+declare type SwitchProps = {
+    variant?: string;
+    labelVariant?: string;
+    disabled?: boolean;
+} & AriaSwitchProps & ToggleProps & ComponentProps<'input'>;
+declare const Switch: React.FC<SwitchProps>;
+
+interface TextThemeExtension<Value> {
+    text?: {
+        [key: string]: Value;
+    };
+}
+interface TextOwnProps extends BoxOwnProps {
+    align?: ResponsiveStyleValue<string>;
+    color?: ResponsiveStyleValue<string>;
+    cursor?: ResponsiveStyleValue<string>;
+    size?: ResponsiveStyleValue<keyof Theme$1['fontSizes'] | string>;
+    outline?: ResponsiveStyleValue<string>;
+    userSelect?: ResponsiveStyleValue<string>;
+}
+interface TextProps extends PolymorphicPropsWithRef<TextOwnProps, 'span'> {
+}
+declare const Text: PolymorphicComponentWithRef<TextOwnProps, 'span'>;
+
 interface TextareaThemeExtension<Value> {
     textarea?: {
         [key: string]: Value;
@@ -280,6 +272,21 @@ declare type TextareaProps = {
 } & AriaTextFieldProps & ComponentProps<'textarea'>;
 declare const Textarea: React.FC<TextareaProps>;
 
+interface TooltipThemeExtension<Value> {
+    tooltip?: {
+        [key: string]: Value;
+    };
+}
+interface TooltipProps extends TooltipTriggerProps {
+    variant?: string;
+}
+declare const Tooltip: React.FC<TooltipProps>;
+
+declare const TooltipContext: React.Context<{
+    state?: TooltipTriggerState | undefined;
+}>;
+declare const TooltipTrigger: React.FC;
+
 interface ValidationMessageThemeExtension<Value> {
     validation?: {
         [key: string]: Value;
@@ -290,7 +297,7 @@ interface ValidationMessageProps extends ComponentProps<'span'> {
 }
 declare const ValidationMessage: React.FC<ValidationMessageProps>;
 
-interface Theme extends Theme$1, RootThemeExtension<CSSObject>, AlertThemeExtension<CSSObject>, BadgeThemeExtension<CSSObject>, ButtonThemeExtension<CSSObject>, CardThemeExtension<CSSObject>, CheckboxThemeExtension<CSSObject>, DividerThemeExtension<CSSObject>, ImageThemeExtension<CSSObject>, InputThemeExtension<CSSObject>, LabelThemeExtension<CSSObject>, LinkThemeExtension<CSSObject>, MenuThemeExtension<CSSObject>, MenuItemThemeExtension<CSSObject>, MessageThemeExtension<CSSObject>, RadioThemeExtension<CSSObject>, SelectThemeExtension<CSSObject>, SliderThemeExtension<CSSObject>, TextThemeExtension<CSSObject>, TextareaThemeExtension<CSSObject>, ValidationMessageThemeExtension<CSSObject> {
+interface Theme extends Theme$1, RootThemeExtension<CSSObject>, BadgeThemeExtension<CSSObject>, ButtonThemeExtension<CSSObject>, CardThemeExtension<CSSObject>, CheckboxThemeExtension<CSSObject>, DividerThemeExtension<CSSObject>, ImageThemeExtension<CSSObject>, InputThemeExtension<CSSObject>, LabelThemeExtension<CSSObject>, LinkThemeExtension<CSSObject>, MenuThemeExtension<CSSObject>, MenuItemThemeExtension<CSSObject>, MessageThemeExtension<CSSObject>, RadioThemeExtension<CSSObject>, SelectThemeExtension<CSSObject>, SliderThemeExtension<CSSObject>, SwitchThemeExtension<CSSObject>, TextThemeExtension<CSSObject>, TextareaThemeExtension<CSSObject>, TooltipThemeExtension<CSSObject>, ValidationMessageThemeExtension<CSSObject> {
 }
 
 interface ActionGroupProps extends ComponentProps<'div'> {
@@ -299,18 +306,43 @@ interface ActionGroupProps extends ComponentProps<'div'> {
 }
 declare const ActionGroup: React.FC<ActionGroupProps>;
 
-declare type WidthValues = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-interface ColumnProps {
-    className?: string;
-    width?: WidthValues | WidthValues[];
+interface AsideProps {
+    children: [ReactChild, ReactChild];
+    side?: 'left' | 'right';
+    sideWidth?: ResponsiveStyleValue<string>;
+    space?: ResponsiveStyleValue<string>;
+    stretch?: boolean;
+    wrap?: NonZeroPercentage;
+}
+declare const Aside: ({ children, sideWidth, space, side, stretch, wrap, }: AsideProps) => JSX.Element;
+
+/**
+ * Based on https://theme-ui.com/components/aspect-ratio
+ */
+
+interface AspectProps extends ComponentProps<'div'> {
+    ratio?: keyof typeof aspect;
+    maxWidth?: string;
+}
+declare const Aspect: React.FC<AspectProps>;
+
+interface BreakoutProps extends ComponentProps<'div'> {
+    horizontalAlign?: 'top' | 'bottom' | 'center';
+    verticalAlign?: 'left' | 'right' | 'center';
 }
-declare const Column: React.FC<ColumnProps>;
+declare const Breakout: React.FC<BreakoutProps>;
+
+interface CenterProps extends ComponentProps<'div'> {
+    maxWidth?: string;
+    space?: ResponsiveStyleValue<string>;
+}
+declare const Center: React.FC<CenterProps>;
 
 interface ColumnsProps {
-    className?: string;
+    columns: Array<number>;
     space?: ResponsiveStyleValue<string>;
-    horizontalAlign?: 'left' | 'right' | 'center';
-    verticalAlign?: 'top' | 'bottom' | 'center';
+    columnLimit?: number;
+    collapseAt?: string;
 }
 declare const Columns: React.FC<ColumnsProps>;
 
@@ -350,13 +382,24 @@ interface InlineProps {
 declare const Inline: React.FC<InlineProps>;
 
 interface StackProps {
+    as?: 'div' | 'ul' | 'ol';
     space?: ResponsiveStyleValue<string>;
     align?: 'left' | 'right' | 'center';
 }
 declare const Stack: React.FC<StackProps>;
 
+interface TilesProps {
+    space?: ResponsiveStyleValue<string>;
+    itemMinWidth?: ResponsiveStyleValue<string>;
+}
+declare const Tiles: React.FC<TilesProps>;
+
 interface ContainerProps extends ComponentProps<'div'> {
+    contentType?: 'content' | 'header';
+    size?: keyof typeof size.content | keyof typeof size.header;
+    align?: 'left' | 'right' | 'center';
+    alignContainer?: 'left' | 'right' | 'center';
 }
 declare const Container: React.FC<ContainerProps>;
 
-export { ActionGroup, ActionGroupProps, Alert, AlertProps, AlertThemeExtension, AlertVariants, Badge, BadgeProps, BadgeThemeExtension, Button, ButtonProps, ButtonThemeExtension, Card, CardProps, CardThemeExtension, Checkbox, CheckboxProps, CheckboxThemeExtension, Column, ColumnProps, Columns, ColumnsProps, Container, ContainerProps, Dialog, DialogProps, Divider, DividerProps, DividerThemeExtension, Field, FieldProps, Image, ImageProps, ImageThemeExtension, Inline, InlineProps, Input, InputProps, InputThemeExtension, Label, LabelBase, LabelBaseProps, LabelProps, LabelThemeExtension, Link, LinkOwnProps, LinkProps, LinkThemeExtension, MarigoldProvider, MarigoldProviderProps, Menu, MenuItem, MenuItemProps, MenuItemThemeExtension, MenuProps, MenuThemeExtension, Message, MessageProps, MessageThemeExtension, Radio, RadioProps, RadioThemeExtension, RootThemeExtension, Select, SelectProps, SelectThemeExtension, Slider, SliderProps, SliderThemeExtension, Stack, StackProps, Text, TextOwnProps, TextProps, TextThemeExtension, Textarea, TextareaProps, TextareaThemeExtension, Theme, ValidationMessage, ValidationMessageProps, ValidationMessageThemeExtension, useDialogButtonProps };
+export { ActionGroup, ActionGroupProps, Aside, AsideProps, Aspect, AspectProps, Badge, BadgeProps, BadgeThemeExtension, Breakout, BreakoutProps, Button, ButtonProps, ButtonThemeExtension, Card, CardProps, CardThemeExtension, Center, CenterProps, Checkbox, CheckboxProps, CheckboxThemeExtension, Columns, ColumnsProps, Container, ContainerProps, Dialog, DialogProps, Divider, DividerProps, DividerThemeExtension, Field, FieldProps, Image, ImageProps, ImageThemeExtension, Inline, InlineProps, Input, InputProps, InputThemeExtension, Label, LabelBase, LabelBaseProps, LabelProps, LabelThemeExtension, Link, LinkOwnProps, LinkProps, LinkThemeExtension, MarigoldProvider, MarigoldProviderProps, Menu, MenuItem, MenuItemProps, MenuItemThemeExtension, MenuProps, MenuThemeExtension, Message, MessageProps, MessageThemeExtension, Radio, RadioProps, RadioThemeExtension, RootThemeExtension, Select, SelectProps, SelectThemeExtension, Slider, SliderProps, SliderThemeExtension, Stack, StackProps, Switch, SwitchProps, SwitchThemeExtension, Text, TextOwnProps, TextProps, TextThemeExtension, Textarea, TextareaProps, TextareaThemeExtension, Theme, Tiles, TilesProps, Tooltip, TooltipContext, TooltipProps, TooltipThemeExtension, TooltipTrigger, ValidationMessage, ValidationMessageProps, ValidationMessageThemeExtension, useDialogButtonProps };