@marigold/components 0.5.0 → 0.7.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;
@@ -82,12 +61,13 @@ interface CardProps extends ComponentProps<'div'> {
 }
 declare const Card: React.FC<CardProps>;
 
-declare type CheckboxIconProps = {
+interface CheckboxIconProps {
     variant?: string;
     checked?: boolean;
     disabled?: boolean;
+    indeterminated?: boolean;
     error?: boolean;
-};
+}
 
 interface CheckboxThemeExtension<Value> {
     checkbox?: {
@@ -146,9 +126,9 @@ declare type LabelBaseProps = {
     color?: ResponsiveStyleValue<string>;
 } & ComponentProps<'label'>;
 declare const LabelBase: React.FC<LabelProps>;
-declare type LabelProps = {
+interface LabelProps extends LabelBaseProps {
     required?: boolean;
-} & LabelBaseProps;
+}
 declare const Label: React.FC<LabelProps>;
 
 interface TextThemeExtension<Value> {
@@ -212,12 +192,12 @@ interface MessageProps extends ComponentProps<'div'> {
 }
 declare const Message: React.FC<MessageProps>;
 
-declare type RadioIconProps = {
+interface RadioIconProps {
     variant?: string;
     checked?: boolean;
     disabled?: boolean;
     error?: boolean;
-};
+}
 
 interface RadioThemeExtension<Value> {
     radio?: {
@@ -267,6 +247,18 @@ 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 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,6 +306,26 @@ interface ActionGroupProps extends ComponentProps<'div'> {
 }
 declare const ActionGroup: React.FC<ActionGroupProps>;
 
+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>;
+
 declare type WidthValues = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 interface ColumnProps {
     className?: string;
@@ -314,10 +341,10 @@ interface ColumnsProps {
 }
 declare const Columns: React.FC<ColumnsProps>;
 
-declare type ModalDialogProps = {
+interface ModalDialogProps extends OverlayProps, AriaDialogProps {
     variant?: string;
     backdropVariant?: string;
-} & OverlayProps & AriaDialogProps;
+}
 
 interface DialogProps extends ModalDialogProps, ComponentProps<'div'> {
     backdropVariant?: string;
@@ -355,8 +382,17 @@ interface StackProps {
 }
 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';
 }
 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, 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, Switch, SwitchProps, SwitchThemeExtension, Text, TextOwnProps, TextProps, TextThemeExtension, Textarea, TextareaProps, TextareaThemeExtension, Theme, Tiles, TilesProps, Tooltip, TooltipContext, TooltipProps, TooltipThemeExtension, TooltipTrigger, ValidationMessage, ValidationMessageProps, ValidationMessageThemeExtension, useDialogButtonProps };