@marigold/components 0.3.3 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @marigold/components
 
+## 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
+
+- [`f9526234`](https://github.com/marigold-ui/marigold/commit/f9526234257a149b12c14191a524691470da3942) Thanks [@sebald](https://github.com/sebald)! - feat(comp): Rewrite Textarea with react-aria
+
+* [`f9526234`](https://github.com/marigold-ui/marigold/commit/f9526234257a149b12c14191a524691470da3942) Thanks [@sebald](https://github.com/sebald)! - feat(comp): rewrite Field component with react-aria
+
+* Updated dependencies [[`f9526234`](https://github.com/marigold-ui/marigold/commit/f9526234257a149b12c14191a524691470da3942), [`f9526234`](https://github.com/marigold-ui/marigold/commit/f9526234257a149b12c14191a524691470da3942)]:
+  - @marigold/icons@0.4.0
+  - @marigold/system@0.4.0
+  - @marigold/types@0.4.0
+
 ## 0.3.2
 
 ### Patch Changes

package/dist/index.d.ts

@@ -1,32 +1,364 @@
-export * from './theme';
-export * from './ActionGroup';
-export * from './Alert';
-export * from './Badge';
-export * from './Box';
-export * from './Button';
-export * from './Card';
-export * from './Checkbox';
-export * from './Column';
-export * from './Columns';
-export * from './Dialog';
-export * from './Divider';
-export * from './Field';
-export * from './VisuallyHidden';
-export * from './Image';
-export * from './Inline';
-export * from './Label';
-export * from './Link';
-export * from './Menu';
-export * from './MenuItem';
-export * from './Message';
-export * from './Provider';
-export * from './Radio';
-export * from './Slider';
-export * from './Select';
-export * from './Stack';
-export * from './Text';
-export * from './Textarea';
-export * from './Input';
-export * from './Container';
-export * from './ValidationMessage';
-export { Item, Section } from '@react-stately/collections';
+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 { ToggleProps } from '@react-types/checkbox';
+import { SeparatorProps } from '@react-aria/separator';
+import { AriaSelectProps } from '@react-types/select';
+import { SingleSelection } from '@react-types/shared';
+import { AriaTextFieldProps } from '@react-types/textfield';
+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';
+export { Item, Section } from '@react-stately/collections';
+
+interface RootThemeExtension<Value> {
+    root?: {
+        body?: Value;
+        html?: Value;
+    };
+}
+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;
+    };
+}
+declare type AlertProps = {
+    variant?: AlertVariants;
+} & ComponentProps<'div'>;
+declare const Alert: React.FC<AlertProps>;
+
+interface BadgeThemeExtension<Value> {
+    badge?: {
+        [key: string]: Value;
+    };
+}
+declare type BadgeProps = {
+    variant?: string;
+    bgColor?: string;
+    borderColor?: string;
+} & ComponentProps<'div'>;
+declare const Badge: React.FC<BadgeProps>;
+
+interface ButtonThemeExtension<Value> {
+    button?: {
+        [key: string]: Value;
+    };
+}
+declare type ButtonProps = PolymorphicPropsWithRef<BoxOwnProps, 'button'>;
+declare const Button: PolymorphicComponentWithRef<BoxOwnProps, 'button'>;
+
+interface CardThemeExtension<Value> {
+    card?: {
+        [key: string]: Value;
+    };
+}
+declare type CardProps = {
+    title?: string;
+    width?: ResponsiveStyleValue<string>;
+    variant?: string;
+} & ComponentProps<'div'>;
+declare const Card: React.FC<CardProps>;
+
+declare type CheckboxIconProps = {
+    variant?: string;
+    checked?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+    children?: never;
+};
+
+interface CheckboxThemeExtension<Value> {
+    checkbox?: {
+        [key: string]: Value;
+    };
+}
+declare type CheckboxInputProps = CheckboxIconProps & ToggleProps & ComponentProps<'input'>;
+declare type CheckboxProps = {
+    id: string;
+    label: string;
+    required?: boolean;
+    labelVariant?: string;
+    error?: boolean;
+    errorMessage?: string;
+} & CheckboxInputProps;
+declare const Checkbox: React.FC<CheckboxProps>;
+
+interface DividerThemeExtension<Value> {
+    divider?: {
+        [key: string]: Value;
+    };
+}
+declare type DividerProps = {
+    variant?: string;
+} & SeparatorProps;
+declare const Divider: React.FC<DividerProps>;
+
+interface ImageThemeExtension<Value> {
+    image?: {
+        [key: string]: Value;
+    };
+}
+declare type ImageProps = {
+    variant?: string;
+    children?: never;
+} & ComponentProps<'img'>;
+declare const Image: React.FC<ImageProps>;
+
+interface InputThemeExtension<Value> {
+    input?: {
+        [key: string]: Value;
+    };
+}
+declare type InputProps = {
+    variant?: string;
+} & ComponentProps<'input'>;
+declare const Input: React.FC<InputProps>;
+
+interface LabelThemeExtension<Value> {
+    label?: {
+        [key: string]: Value;
+    };
+}
+declare type LabelBaseProps = {
+    htmlFor?: string;
+    variant?: string;
+    required?: boolean;
+    color?: ResponsiveStyleValue<string>;
+} & ComponentProps<'label'>;
+declare const LabelBase: React.FC<LabelProps>;
+declare type LabelProps = {
+    required?: boolean;
+} & LabelBaseProps;
+declare const Label: React.FC<LabelProps>;
+
+interface TextThemeExtension<Value> {
+    text?: {
+        [key: string]: Value;
+    };
+}
+declare type TextOwnProps = {
+    align?: ResponsiveStyleValue<string>;
+    color?: ResponsiveStyleValue<string>;
+    cursor?: ResponsiveStyleValue<string>;
+    outline?: ResponsiveStyleValue<string>;
+    userSelect?: ResponsiveStyleValue<string>;
+} & BoxOwnProps;
+declare type TextProps = PolymorphicPropsWithRef<TextOwnProps, 'span'>;
+declare const Text: PolymorphicComponentWithRef<TextOwnProps, 'span'>;
+
+interface LinkThemeExtension<Value> {
+    link?: Value;
+}
+declare type LinkOwnProps = {
+    disabled?: boolean;
+} & TextOwnProps;
+declare type LinkProps = PolymorphicProps<LinkOwnProps, 'a'>;
+declare const Link: PolymorphicComponent<LinkOwnProps, "a">;
+
+interface MenuThemeExtension<Value> {
+    menu?: Value;
+}
+declare type MenuProps = {
+    variant?: string;
+    label?: string;
+    onClick: ComponentProps<typeof Button>['onClick'];
+    show?: boolean;
+    className?: string;
+    title?: string;
+};
+declare const Menu: React.FC<MenuProps>;
+
+interface MenuItemThemeExtension<Value> {
+    menuItem?: {
+        [key: string]: Value;
+    };
+}
+declare type MenuItemProps = {
+    variant?: string;
+} & ComponentProps<typeof Link>;
+declare const MenuItem: React.FC<MenuItemProps>;
+
+interface MessageThemeExtension<Value> {
+    message?: {
+        [key: string]: Value;
+    };
+}
+declare type MessageProps = {
+    messageTitle: string;
+    variant?: string;
+} & ComponentProps<'div'>;
+declare const Message: React.FC<MessageProps>;
+
+declare type RadioIconProps = {
+    variant?: string;
+    checked?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+    children?: never;
+};
+
+interface RadioThemeExtension<Value> {
+    radio?: {
+        [key: string]: Value;
+    };
+}
+declare type RadioInputProps = RadioIconProps & ComponentProps<'input'>;
+declare type RadioProps = {
+    id: string;
+    label: string;
+    required?: boolean;
+    labelVariant?: string;
+    error?: boolean;
+    errorMessage?: string;
+} & RadioInputProps;
+declare const Radio: React.FC<RadioProps>;
+
+interface SelectThemeExtension<Value> {
+    select?: {
+        __default: Value;
+        disabled?: Value;
+        listbox?: {
+            __default: Value;
+            error?: Value;
+        };
+        section?: Value;
+        option?: Value;
+    };
+}
+declare type SelectProps = {
+    labelVariant?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    required?: boolean;
+    width?: ResponsiveStyleValue<number | string>;
+    error?: boolean;
+    errorMessage?: string;
+} & ComponentProps<'select'> & AriaSelectProps<object> & SingleSelection;
+declare const Select: ({ labelVariant, placeholder, disabled, required, error, errorMessage, width, className, ...props }: SelectProps) => JSX.Element;
+
+interface SliderThemeExtension<Value> {
+    slider?: {
+        [key: string]: Value;
+    };
+}
+declare type SliderProps = {
+    variant?: string;
+} & ComponentProps<'input'>;
+declare const Slider: React.FC<SliderProps>;
+
+interface TextareaThemeExtension<Value> {
+    textarea?: {
+        [key: string]: Value;
+    };
+}
+declare type TextareaProps = {
+    variant?: string;
+    htmlFor: string;
+    required?: boolean;
+    error?: boolean;
+} & AriaTextFieldProps & ComponentProps<'textarea'>;
+declare const Textarea: React.FC<TextareaProps>;
+
+interface ValidationMessageThemeExtension<Value> {
+    validation?: {
+        [key: string]: Value;
+    };
+}
+declare type ValidationMessageProps = {
+    variant?: string;
+} & 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> {
+}
+
+declare type ActionGroupProps = {
+    space?: ResponsiveStyleValue<string>;
+    verticalAlignment?: boolean;
+} & ComponentProps<'div'>;
+declare const ActionGroup: React.FC<ActionGroupProps>;
+
+declare type WidthValues = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+declare type ColumnProps = {
+    className?: string;
+    width?: WidthValues | WidthValues[];
+};
+declare const Column: React.FC<ColumnProps>;
+
+declare type ColumnsProps = {
+    className?: string;
+    space?: ResponsiveStyleValue<string>;
+    horizontalAlign?: 'left' | 'right' | 'center';
+    verticalAlign?: 'top' | 'bottom' | 'center';
+};
+declare const Columns: React.FC<ColumnsProps>;
+
+declare type ModalDialogProps = {
+    variant?: string;
+    backdropVariant?: string;
+} & OverlayProps & AriaDialogProps;
+
+declare type DialogProps = {
+    backdropVariant?: string;
+    close: ComponentProps<typeof Button>['onClick'];
+    isOpen: boolean;
+    title?: string;
+    variant?: string;
+} & ModalDialogProps & ComponentProps<'div'>;
+declare const Dialog: React.FC<DialogProps>;
+declare const useDialogButtonProps: () => {
+    state: _react_stately_overlays.OverlayTriggerState;
+    openButtonProps: React.HTMLAttributes<HTMLSpanElement>;
+    openButtonRef: React.RefObject<HTMLElement>;
+};
+
+declare type FieldProps = {
+    variant?: string;
+    labelVariant?: string;
+    htmlFor: string;
+    required?: boolean;
+    error?: boolean;
+} & AriaTextFieldProps & ComponentProps<'input'>;
+declare const Field: React.FC<FieldProps>;
+
+declare type InlineProps = {
+    space?: ResponsiveStyleValue<string>;
+    align?: 'top' | 'center' | 'bottom';
+};
+declare const Inline: React.FC<InlineProps>;
+
+declare type StackProps = {
+    space?: ResponsiveStyleValue<string>;
+    align?: 'left' | 'right' | 'center';
+};
+declare const Stack: React.FC<StackProps>;
+
+declare type ContainerProps = {
+    className?: string;
+    title?: string;
+};
+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, 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 };