@veracity/vui 0.7.1 → 1.1.0

package/dist/esm/avatar/helpers.js

@@ -0,0 +1,5 @@
+/** Gets initials from the name for the Avatar. */
+export function defaultGetInitials(name = '') {
+    const [first = '', last = ''] = name.split(' ');
+    return `${first.charAt(0)}${last.charAt(0)}`.toUpperCase();
+}

package/dist/esm/avatar/index.d.ts

@@ -0,0 +1,4 @@
+export * from './avatar';
+export { default } from './avatar';
+export * from './avatar.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/avatar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/avatar/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAClC,cAAc,gBAAgB,CAAA"}

package/dist/esm/avatar/theme.d.ts

@@ -0,0 +1,54 @@
+import { Dict } from '../utils';
+declare function variantSolid(props: Dict): {
+    hoverBg: string;
+    activeBg: string;
+    bg: string;
+    color: string;
+};
+declare function variantSubtle(props: Dict): {
+    hoverBg: string;
+    activeBg: string;
+    bg: string;
+    color: string;
+};
+declare const _default: {
+    baseStyle: {};
+    defaultProps: {
+        colorScheme: string;
+        size: string;
+        variant: string;
+    };
+    sizes: {
+        xs: {
+            fontSize: string;
+            h: number;
+            iconSize: string;
+        };
+        sm: {
+            fontSize: string;
+            h: number;
+            iconSize: string;
+        };
+        md: {
+            fontSize: string;
+            h: number;
+            iconSize: string;
+        };
+        lg: {
+            fontSize: string;
+            h: number;
+            iconSize: string;
+        };
+        xl: {
+            fontSize: string;
+            h: number;
+            iconSize: string;
+        };
+    };
+    variants: {
+        solid: typeof variantSolid;
+        subtle: typeof variantSubtle;
+    };
+};
+export default _default;
+//# sourceMappingURL=theme.d.ts.map

package/dist/esm/avatar/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/avatar/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAE/B,iBAAS,YAAY,CAAC,KAAK,EAAE,IAAI;;;;;EAuBhC;AAED,iBAAS,aAAa,CAAC,KAAK,EAAE,IAAI;;;;;EA4BjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CD,wBAKC"}

package/dist/esm/avatar/theme.js

@@ -0,0 +1,86 @@
+function variantSolid(props) {
+    const { colorScheme: c } = props;
+    const styles = {
+        hoverBg: `${c}.90`,
+        activeBg: `${c}.100`,
+        bg: `${c}.80`,
+        color: 'white'
+    };
+    // Special cases
+    if (c === 'prussian') {
+        styles.activeBg = 'prussian.50';
+        styles.hoverBg = 'prussian.60';
+    }
+    if (c === 'yellow') {
+        styles.hoverBg = `${c}.80`;
+        styles.activeBg = `${c}.90`;
+        styles.bg = `${c}.70`;
+    }
+    return styles;
+}
+function variantSubtle(props) {
+    const { colorScheme: c } = props;
+    const colors = {
+        hoverBg: `${c}.30`,
+        activeBg: `${c}.40`,
+        bg: `${c}.20`,
+        color: `${c}.80`
+    };
+    // Special cases
+    if (c === 'green') {
+        colors.color = `${c}.90`;
+    }
+    if (c === 'grey') {
+        colors.color = `prussian.80`;
+    }
+    if (c === 'red') {
+        colors.color = `${c}.90`;
+    }
+    if (c === 'yellow') {
+        colors.color = `${c}.100`;
+    }
+    return colors;
+}
+const baseStyle = {};
+const defaultProps = {
+    colorScheme: 'blue',
+    size: 'md',
+    variant: 'subtle'
+};
+const sizes = {
+    xs: {
+        fontSize: 'xs',
+        h: 24,
+        iconSize: 'xs'
+    },
+    sm: {
+        fontSize: 'sm',
+        h: 32,
+        iconSize: 'sm'
+    },
+    md: {
+        fontSize: 'md',
+        h: 40,
+        iconSize: 'md'
+    },
+    lg: {
+        fontSize: 'lg',
+        h: 48,
+        iconSize: 'lg'
+    },
+    xl: {
+        fontSize: 'lg',
+        h: 64,
+        iconSize: 'lg'
+    }
+};
+const variants = {
+    solid: variantSolid,
+    subtle: variantSubtle
+};
+export default {
+    baseStyle,
+    defaultProps,
+    sizes,
+    variants
+};

package/dist/esm/box/box.d.ts

@@ -0,0 +1,6 @@
+import { BoxProps } from './box.types';
+export declare const BoxBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
+/** Organizes content layout into columns or rows with easy centering. */
+export declare const Box: import("../core").VuiComponent<"div", BoxProps>;
+export default Box;
+//# sourceMappingURL=box.d.ts.map

package/dist/esm/box/box.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"box.d.ts","sourceRoot":"","sources":["../../../src/box/box.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAEtC,eAAO,MAAM,OAAO,+HAInB,CAAA;AAED,yEAAyE;AACzE,eAAO,MAAM,GAAG,iDAiCd,CAAA;AAEF,eAAe,GAAG,CAAA"}

package/dist/esm/box/box.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { omitThemingProps, styled, useStyleConfig, vui } from '../core';
+import { cs, filterUndefined } from '../utils';
+export const BoxBase = styled.divBox `
+  display: flex;
+  min-width: 0;
+  transition-duration: normal;
+`;
+/** Organizes content layout into columns or rows with easy centering. */
+export const Box = vui((props, ref) => {
+    const { align, center, centerH, centerV, className, column, direction, hoverShadow, justify, radius, shadow, wrap, ...rest } = omitThemingProps(props);
+    const styles = useStyleConfig('Box', props);
+    const alignItems = center || (column ? centerH : centerV) ? 'center' : undefined;
+    const flexDirection = column ? 'column' : undefined;
+    const justifyContent = center || (column ? centerV : centerH) ? 'center' : undefined;
+    const aliasedProps = filterUndefined({
+        alignItems: align ?? alignItems,
+        borderRadius: radius,
+        boxShadow: shadow,
+        flexDirection: direction ?? flexDirection,
+        flexWrap: wrap ? 'wrap' : undefined,
+        hoverBoxShadow: hoverShadow,
+        justifyContent: justify ?? justifyContent
+    });
+    return React.createElement(BoxBase, { className: cs('vui-box', className), ref: ref, ...styles, ...aliasedProps, ...rest });
+});
+export default Box;

package/dist/esm/box/box.types.d.ts

@@ -0,0 +1,27 @@
+import { BordersProps, EffectsProps, FlexboxesProps, SystemProps } from '../system';
+import { ThemingProps } from '../theme';
+export declare type BoxProps = SystemProps & ThemingProps<'Box'> & {
+    /** Alias for alignItems prop. @deprecated */
+    align?: FlexboxesProps['alignItems'];
+    /** Centers the content vertically and horizontally. */
+    center?: boolean;
+    /** Centers the content horizontally. */
+    centerH?: boolean;
+    /** Centers the content vertically. */
+    centerV?: boolean;
+    /** Displays content in a column. */
+    column?: boolean;
+    /** Alias for flexDirection prop. @deprecated */
+    direction?: FlexboxesProps['flexDirection'];
+    /** Alias for hoverBoxShadow prop. @deprecated */
+    hoverShadow?: EffectsProps['hoverBoxShadow'];
+    /** Alias for justifyContent prop. @deprecated */
+    justify?: FlexboxesProps['justifyContent'];
+    /** Alias for borderRadius prop. @deprecated */
+    radius?: BordersProps['borderRadius'];
+    /** Alias for boxShadow prop. @deprecated */
+    shadow?: EffectsProps['boxShadow'];
+    /** Applies flex-wrap property. */
+    wrap?: boolean;
+};
+//# sourceMappingURL=box.types.d.ts.map

package/dist/esm/box/box.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"box.types.d.ts","sourceRoot":"","sources":["../../../src/box/box.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACnF,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,QAAQ,GAAG,WAAW,GAChC,YAAY,CAAC,KAAK,CAAC,GAAG;IACpB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,CAAA;IACpC,uDAAuD;IACvD,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,wCAAwC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sCAAsC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,oCAAoC;IACpC,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,gDAAgD;IAChD,SAAS,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAA;IAC3C,iDAAiD;IACjD,WAAW,CAAC,EAAE,YAAY,CAAC,gBAAgB,CAAC,CAAA;IAC5C,iDAAiD;IACjD,OAAO,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAA;IAC1C,+CAA+C;IAC/C,MAAM,CAAC,EAAE,YAAY,CAAC,cAAc,CAAC,CAAA;IACrC,4CAA4C;IAC5C,MAAM,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAA;IAClC,kCAAkC;IAClC,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,CAAA"}

package/dist/esm/box/box.types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/box/index.d.ts

@@ -0,0 +1,4 @@
+export * from './box';
+export { default } from './box';
+export * from './box.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/box/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/box/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAA;AACrB,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAC/B,cAAc,aAAa,CAAA"}

package/dist/esm/box/theme.d.ts

@@ -0,0 +1,8 @@
+declare const _default: {
+    baseStyle: {};
+    defaultProps: {};
+    sizes: {};
+    variants: {};
+};
+export default _default;
+//# sourceMappingURL=theme.d.ts.map

package/dist/esm/box/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/box/theme.ts"],"names":[],"mappings":";;;;;;AAQA,wBAKC"}

package/dist/esm/box/theme.js

@@ -0,0 +1,10 @@
+const baseStyle = {};
+const defaultProps = {};
+const sizes = {};
+const variants = {};
+export default {
+    baseStyle,
+    defaultProps,
+    sizes,
+    variants
+};

package/dist/esm/button/button.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { VuiComponent } from '../core';
+import { ButtonProps } from './button.types';
+import ButtonIcon from './buttonIcon';
+import ButtonText from './buttonText';
+export declare const ButtonBase: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, import("..").AnimationProps & import("..").BackgroundColorProps & import("..").BorderProps & import("..").BorderTopProps & import("..").BorderRightProps & import("..").BorderBottomProps & import("..").BorderLeftProps & import("..").BorderColorProps & import("..").BorderTopColorProps & import("..").BorderRightColorProps & import("..").BorderBottomColorProps & import("..").BorderLeftColorProps & import("..").BorderWidthProps & import("..").BorderTopWidthProps & import("..").BorderRightWidthProps & import("..").BorderBottomWidthProps & import("..").BorderLeftWidthProps & import("..").BorderStyleProps & import("..").BorderRadiusProps & import("..").OutlineProps & import("..").OutlineColorProps & import("..").OutlineWidthProps & import("..").OutlineStyleProps & import("..").DivideXProps & import("..").DivideYProps & import("..").DivideXReverseProps & import("..").DivideYReverseProps & import("..").DivideColorProps & import("..").DivideStyleProps & import("..").RingProps & import("..").RingColorProps & import("..").OpacityProps & import("..").BoxShadowProps & import("..").TextShadowProps & import("..").DisplayProps & import("..").AlignItemsProps & import("..").AlignContentProps & import("..").JustifyContentProps & import("..").JustifyItemsProps & import("..").FlexWrapProps & import("..").FlexGrowProps & import("..").FlexShrinkProps & import("..").FlexBasisProps & import("..").FlexDirectionProps & import("..").FlexProps & import("..").JustifySelfProps & import("..").AlignSelfProps & import("..").OrderProps & import("../system/flexboxGrids").RowProps & import("../system/flexboxGrids").ColProps & import("../system/grids").GapProps & import("../system/grids").ColumnGapProps & import("../system/grids").RowGapProps & import("../system/grids").GridColumnProps & import("../system/grids").GridRowProps & import("../system/grids").GridAutoFlowProps & import("../system/grids").GridAutoColumnsProps & import("../system/grids").GridAutoRowsProps & import("../system/grids").GridTemplateColumnsProps & import("../system/grids").GridTemplateRowsProps & import("../system/grids").GridTemplateAreasProps & import("../system/grids").GridAreaProps & import("..").AppearanceProps & import("..").CursorProps & import("..").PointerEventsProps & import("..").ResizeProps & import("..").UserSelectProps & import("..").IsTruncatedProps & import("..").FloatProps & import("..").BoxSizingProps & import("..").OverflowProps & import("..").OverflowXProps & import("..").OverflowYProps & import("..").PositionProps & import("..").ZIndexProps & import("..").TopProps & import("..").RightProps & import("..").BottomProps & import("..").LeftProps & import("..").VisibilityProps & import("..").OverscrollBehaviorProps & import("..").ObjectFitProps & import("..").MaxLinesProps & import("..").WidthProps & import("..").HeightProps & import("..").MaxWidthProps & import("..").MaxHeightProps & import("..").MinWidthProps & import("..").MinHeightProps & import("..").MarginProps & import("..").MarginTopProps & import("..").MarginRightProps & import("..").MarginBottomProps & import("..").MarginLeftProps & import("..").MarginXProps & import("..").MarginYProps & import("..").PaddingProps & import("..").PaddingTopProps & import("..").PaddingRightProps & import("..").PaddingBottomProps & import("..").PaddingLeftProps & import("..").PaddingXProps & import("..").PaddingYProps & import("..").SpaceXProps & import("..").SpaceYProps & import("..").SpaceXReverseProps & import("..").SpaceYReverseProps & import("../system/tables").BorderCollapseProps & import("../system/tables").TableLayoutProps & import("..").TransformProps & import("..").TransformOriginProps & import("..").TranslateXProps & import("..").TranslateYProps & import("..").RotateProps & import("..").SkewXProps & import("..").SkewYProps & import("..").ScaleProps & import("..").ScaleXProps & import("..").ScaleYProps & import("..").TransitionProps & import("..").TransitionPropertyProps & import("..").TransitionDurationProps & import("..").TransitionTimingFunctionProps & import("..").TransitionDelayProps & import("..").FontFamilyProps & import("..").FontSizeProps & import("..").FontStyleProps & import("..").FontWeightProps & import("..").LineHeightProps & import("..").ColorProps & import("..").TextTransformProps & import("..").TextDecorationProps & import("..").TextAlignProps & import("..").VerticalAlignProps & import("..").LetterSpacingProps & import("..").WhiteSpaceProps & import("..").TextOverflowProps & import("..").ListStyleTypeProps & import("..").ListStylePositionProps & import("..").WordBreakProps & import("..").ThemingProps<"Button"> & {
+    colorScheme?: "prussian" | "green" | "red" | "blue" | "pink" | undefined;
+    icon?: JSX.Element | import("..").IconProp | undefined;
+    iconLeft?: JSX.Element | import("..").IconProp | undefined;
+    iconRight?: JSX.Element | import("..").IconProp | undefined;
+    isElevated?: boolean | undefined;
+    isFullWidth?: boolean | undefined;
+    isLoading?: boolean | undefined;
+    isRound?: boolean | undefined;
+    isSplit?: boolean | undefined;
+    state?: import("./button.types").ButtonState | undefined;
+    stateMapping?: import("./button.types").ButtonStateMapping | undefined;
+    text?: React.ReactNode;
+}, never>;
+/**
+ * Triggers given actions on click. Supports multiple states, sizes and variants.
+ *
+ * Comes with additional props for extra behavior, like loading, disabled or elevated.
+ *
+ * Exposes some props to the children via context.
+ */
+export declare const Button: VuiComponent<"button", ButtonProps> & {
+    Icon: typeof ButtonIcon;
+    Text: typeof ButtonText;
+};
+export default Button;
+//# sourceMappingURL=button.d.ts.map

package/dist/esm/button/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAGtC,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAEnE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,UAAU,MAAM,cAAc,CAAA;AAiBrC,eAAO,MAAM,UAAU;;;;;;;;;;;;;SAoBtB,CAAA;AACD;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;UAmHX,iBAAiB;UACjB,iBAAiB;CACxB,CAAA;AAKD,eAAe,MAAM,CAAA"}

package/dist/esm/button/button.js

@@ -0,0 +1,104 @@
+import React, { useMemo } from 'react';
+import { useButtonGroupContext } from '../buttonGroup/context';
+import { styled, useStyleConfig, vui } from '../core';
+import { cs, filterUndefined, isReactText, isString } from '../utils';
+import ButtonIcon from './buttonIcon';
+import ButtonText from './buttonText';
+import { buttonStateMapping } from './consts';
+import { ButtonProvider } from './context';
+const ContentWrapper = styled.span `
+  visibility: hidden;
+`;
+const StateWrapper = styled.span `
+  bottom: 0;
+  display: flex;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+`;
+export const ButtonBase = styled.buttonBox `
+  align-items: center;
+  border-radius: md;
+  display: inline-flex;
+  flex-shrink: 0;
+  font-weight: medium;
+  justify-content: center;
+  line-height: normal;
+  overflow: hidden;
+  position: relative;
+  transition-duration: fast;
+  user-select: none;
+  width: fit-content;
+
+  &:focus,
+  &:focus:hover {
+    border-color: transparent;
+    outline: none;
+    z-index: 1;
+  }
+`;
+/**
+ * Triggers given actions on click. Supports multiple states, sizes and variants.
+ *
+ * Comes with additional props for extra behavior, like loading, disabled or elevated.
+ *
+ * Exposes some props to the children via context.
+ */
+export const Button = vui((props, ref) => {
+    const buttonGroupProps = useButtonGroupContext();
+    const mergedProps = { ...buttonGroupProps, ...props };
+    const { borderWidth: borderWidthProp, children, className, colorScheme: colorSchemeProp, disabled, icon, iconLeft, iconRight, isElevated, isFullWidth, isLoading, // eslint-disable-line
+    isRound, isSplit, isTruncated, size, state = props.isLoading ? 'loading' : '', stateMapping, text, variant, ...rest } = mergedProps;
+    const hasState = Boolean(state) && state !== 'idle';
+    const states = { ...buttonStateMapping, ...stateMapping };
+    const { iconProps: stateIconProps, ...stateProps } = states[state] ?? {};
+    const colorScheme = filterUndefined({
+        colorScheme: states[state]?.colorScheme ?? colorSchemeProp
+    });
+    const styles = useStyleConfig('Button', { ...mergedProps, ...colorScheme });
+    const { borderWidth, h, spaceX = 0, ...buttonStyles } = styles.container;
+    const context = useMemo(() => filterUndefined({ colorScheme, disabled, size, variant }), [colorScheme, disabled, size, variant]);
+    const Content = hasState ? ContentWrapper : React.Fragment;
+    // Apply more space for text and less space for icons
+    const border = borderWidthProp ?? borderWidth ?? 0;
+    const spaceXItem = spaceX - border;
+    const spaceXText = spaceX * 2 - border;
+    const iconLeftMr = spaceXItem + 1 + 'px';
+    const iconRightMl = isSplit ? 'auto' : spaceXItem + 1 + 'px';
+    const pl = (icon || iconLeft ? spaceXItem : spaceXText) + 'px';
+    const pr = (icon || iconRight ? spaceXItem : spaceXText) + 'px';
+    const disabledBorderColor = variant === 'outlined' ? 'disabled.border' : 'disabled.bg';
+    const disabledProps = disabled
+        ? {
+            'aria-disabled': disabled,
+            activeBg: 'disabled.bg',
+            bg: 'disabled.bg',
+            borderColor: disabledBorderColor,
+            hoverBorderColor: disabledBorderColor,
+            color: 'disabled.color',
+            cursor: 'not-allowed',
+            hoverBg: 'disabled.bg'
+        }
+        : {};
+    const aliasedProps = filterUndefined({
+        borderRadius: isRound ? h / 2 : undefined,
+        boxShadow: isElevated ? '2' : undefined,
+        minW: icon ? 0 : undefined,
+        pointerEvents: hasState ? 'none' : undefined,
+        w: isFullWidth ? '100%' : undefined
+    });
+    return (React.createElement(ButtonProvider, { value: context },
+        React.createElement(ButtonBase, { borderWidth: border, className: cs('vui-button', className), disabled: disabled, focusRing: 3, h: h, pl: pl, pr: pr, ref: ref, type: "button", variant: variant, ...buttonStyles, ...disabledProps, ...aliasedProps, ...rest },
+            hasState && (React.createElement(StateWrapper, { onClick: e => e.stopPropagation(), ...stateProps },
+                React.createElement(ButtonIcon, { m: "auto", ...stateIconProps }))),
+            React.createElement(Content, null,
+                isString(icon) ? React.createElement(ButtonIcon, { name: icon }) : icon,
+                !icon && (React.createElement(React.Fragment, null,
+                    isString(iconLeft) ? React.createElement(ButtonIcon, { mr: iconLeftMr, name: iconLeft }) : iconLeft,
+                    children ?? (isReactText(text) ? React.createElement(ButtonText, { ...{ isTruncated, text } }) : text),
+                    isString(iconRight) ? React.createElement(ButtonIcon, { ml: iconRightMl, name: iconRight }) : iconRight))))));
+});
+Button.Icon = ButtonIcon;
+Button.Text = ButtonText;
+export default Button;

package/dist/esm/button/button.types.d.ts

@@ -0,0 +1,39 @@
+/// <reference types="react" />
+import { IconProp, IconProps } from '../icon';
+import { SystemProps } from '../system';
+import { ThemingProps } from '../theme';
+import { AnyString } from '../utils';
+export declare type ButtonProps = SystemProps & ThemingProps<'Button'> & {
+    /** Available theme colors for this component. @default prussian */
+    colorScheme?: 'blue' | 'green' | 'pink' | 'prussian' | 'red';
+    /** Icon that replaces any other content. */
+    icon?: IconProp | JSX.Element;
+    /** Socket displaying icon on the left side. */
+    iconLeft?: IconProp | JSX.Element;
+    /** Socket displaying icon on the right side. */
+    iconRight?: IconProp | JSX.Element;
+    /** Adds box shadow style. @default false */
+    isElevated?: boolean;
+    /** Makes the button take full width of the container. @deprecated */
+    isFullWidth?: boolean;
+    /** Replaces content with a loading spinner. @default false */
+    isLoading?: boolean;
+    /** Rounds the borders. @default false */
+    isRound?: boolean;
+    /** Separates right icon from the content. @deprecated */
+    isSplit?: boolean;
+    /** Modifies Button style and content based on the given state. */
+    state?: ButtonState;
+    /** Object definition of styles and content for each state. */
+    stateMapping?: ButtonStateMapping;
+    /** Socket placing text as alternative to children. */
+    text?: React.ReactNode;
+};
+export declare type ButtonState = 'error' | 'idle' | 'loading' | 'success' | AnyString;
+export declare type ButtonStateMapping = Record<string, SystemProps & {
+    colorScheme: ButtonProps['colorScheme'];
+    iconProps: IconProps;
+}>;
+/** Narrower prop definition for IconButton component */
+export declare type IconButtonProps = Omit<ButtonProps, 'iconLeft' | 'iconRight' | 'text'>;
+//# sourceMappingURL=button.types.d.ts.map

package/dist/esm/button/button.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.types.d.ts","sourceRoot":"","sources":["../../../src/button/button.types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAEpC,oBAAY,WAAW,GAAG,WAAW,GACnC,YAAY,CAAC,QAAQ,CAAC,GAAG;IACvB,mEAAmE;IACnE,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,KAAK,CAAA;IAC5D,4CAA4C;IAC5C,IAAI,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA;IAC7B,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA;IACjC,gDAAgD;IAChD,SAAS,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA;IAClC,4CAA4C;IAC5C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,qEAAqE;IACrE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,yCAAyC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,kEAAkE;IAClE,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,kBAAkB,CAAA;IACjC,sDAAsD;IACtD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB,CAAA;AACH,oBAAY,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAA;AAE9E,oBAAY,kBAAkB,GAAG,MAAM,CACrC,MAAM,EACN,WAAW,GAAG;IAAE,WAAW,EAAE,WAAW,CAAC,aAAa,CAAC,CAAC;IAAC,SAAS,EAAE,SAAS,CAAA;CAAE,CAChF,CAAA;AAED,wDAAwD;AACxD,oBAAY,eAAe,GAAG,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,WAAW,GAAG,MAAM,CAAC,CAAA"}

package/dist/esm/button/button.types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/button/buttonIcon.d.ts

@@ -0,0 +1,5 @@
+import { IconProps } from '../icon';
+/** Displays an icon within the Button. */
+export declare const ButtonIcon: import("../core").VuiComponent<"svg", IconProps>;
+export default ButtonIcon;
+//# sourceMappingURL=buttonIcon.d.ts.map

package/dist/esm/button/buttonIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buttonIcon.d.ts","sourceRoot":"","sources":["../../../src/button/buttonIcon.tsx"],"names":[],"mappings":"AAGA,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAIzC,0CAA0C;AAC1C,eAAO,MAAM,UAAU,kDAKrB,CAAA;AAEF,eAAe,UAAU,CAAA"}

package/dist/esm/button/buttonIcon.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { useStyleConfig, vui } from '../core';
+import Icon from '../icon';
+import { cs } from '../utils';
+import { useButtonContext } from './context';
+/** Displays an icon within the Button. */
+export const ButtonIcon = vui((props, ref) => {
+    const { className, ...rest } = props;
+    const styles = useStyleConfig('Button', useButtonContext());
+    return React.createElement(Icon, { className: cs('vui-buttonIcon', className), ref: ref, ...styles.icon, ...rest });
+});
+export default ButtonIcon;

package/dist/esm/button/buttonText.d.ts

@@ -0,0 +1,5 @@
+import { TProps } from '../t';
+/** Displays the text label of the button. */
+export declare const ButtonText: import("../core").VuiComponent<"span", TProps>;
+export default ButtonText;
+//# sourceMappingURL=buttonText.d.ts.map

package/dist/esm/button/buttonText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buttonText.d.ts","sourceRoot":"","sources":["../../../src/button/buttonText.tsx"],"names":[],"mappings":"AAGA,OAAU,EAAE,MAAM,EAAE,MAAM,MAAM,CAAA;AAIhC,6CAA6C;AAC7C,eAAO,MAAM,UAAU,gDAKrB,CAAA;AAEF,eAAe,UAAU,CAAA"}

package/dist/esm/button/buttonText.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { useStyleConfig, vui } from '../core';
+import T from '../t';
+import { cs } from '../utils';
+import { useButtonContext } from './context';
+/** Displays the text label of the button. */
+export const ButtonText = vui((props, ref) => {
+    const { className, ...rest } = props;
+    const styles = useStyleConfig('Button', useButtonContext());
+    return React.createElement(T, { className: cs('vui-buttonText', className), fontSize: "inherit", ref: ref, ...styles.text, ...rest });
+});
+export default ButtonText;

package/dist/esm/button/buttons.d.ts

@@ -0,0 +1,10 @@
+import { ButtonProps, IconButtonProps } from './button.types';
+export declare const AppButton: import("../core").VuiComponent<"button", ButtonProps>;
+export declare const BackButton: import("../core").VuiComponent<"button", IconButtonProps>;
+export declare const CloseButton: import("../core").VuiComponent<"button", IconButtonProps>;
+export declare const CTAButton: import("../core").VuiComponent<"button", ButtonProps>;
+export declare const DangerButton: import("../core").VuiComponent<"button", ButtonProps>;
+export declare const IconButton: import("../core").VuiComponent<"button", IconButtonProps>;
+export declare const LineButton: import("../core").VuiComponent<"button", ButtonProps>;
+export declare const TextButton: import("../core").VuiComponent<"button", ButtonProps>;
+//# sourceMappingURL=buttons.d.ts.map

package/dist/esm/button/buttons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buttons.d.ts","sourceRoot":"","sources":["../../../src/button/buttons.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAE7D,eAAO,MAAM,SAAS,uDAEpB,CAAA;AAEF,eAAO,MAAM,UAAU,2DAErB,CAAA;AAEF,eAAO,MAAM,WAAW,2DAEtB,CAAA;AAEF,eAAO,MAAM,SAAS,uDAEpB,CAAA;AAEF,eAAO,MAAM,YAAY,uDAEvB,CAAA;AAEF,eAAO,MAAM,UAAU,2DAErB,CAAA;AAEF,eAAO,MAAM,UAAU,uDAErB,CAAA;AAEF,eAAO,MAAM,UAAU,uDAErB,CAAA"}

package/dist/esm/button/buttons.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { vui } from '../core';
+import Button from './button';
+export const AppButton = vui((props, ref) => (React.createElement(Button, { colorScheme: "blue", ref: ref, variant: "solid", ...props })));
+export const BackButton = vui((props, ref) => (React.createElement(IconButton, { colorScheme: "blue", icon: "falArrowLeft", ref: ref, variant: "text", ...props })));
+export const CloseButton = vui((props, ref) => (React.createElement(IconButton, { colorScheme: "blue", icon: "falTimes", ref: ref, variant: "text", ...props })));
+export const CTAButton = vui((props, ref) => (React.createElement(Button, { colorScheme: "green", ref: ref, variant: "solid", ...props })));
+export const DangerButton = vui((props, ref) => (React.createElement(Button, { colorScheme: "red", ref: ref, variant: "solid", ...props })));
+export const IconButton = vui((props, ref) => (React.createElement(Button, { colorScheme: "blue", ref: ref, variant: "text", ...props })));
+export const LineButton = vui((props, ref) => (React.createElement(Button, { colorScheme: "blue", ref: ref, variant: "outlined", ...props })));
+export const TextButton = vui((props, ref) => (React.createElement(Button, { colorScheme: "blue", ref: ref, variant: "text", ...props })));

package/dist/esm/button/consts.d.ts

@@ -0,0 +1,3 @@
+import { ButtonStateMapping } from './button.types';
+export declare const buttonStateMapping: ButtonStateMapping;
+//# sourceMappingURL=consts.d.ts.map

package/dist/esm/button/consts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"consts.d.ts","sourceRoot":"","sources":["../../../src/button/consts.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAA;AAEnD,eAAO,MAAM,kBAAkB,EAAE,kBAuBhC,CAAA"}

package/dist/esm/button/consts.js

@@ -0,0 +1,24 @@
+export const buttonStateMapping = {
+    error: {
+        colorScheme: 'red',
+        iconProps: {
+            animation: 'fadeDown',
+            icon: 'falTimesCircle'
+        }
+    },
+    loading: {
+        colorScheme: 'blue',
+        iconProps: {
+            animation: 'vui-spin 0.6s linear infinite',
+            name: 'fadSpinnerThird',
+            pathFill: ['', 'transparent']
+        }
+    },
+    success: {
+        colorScheme: 'green',
+        iconProps: {
+            animation: 'fadeDown',
+            icon: 'falCheckCircle'
+        }
+    }
+};

package/dist/esm/button/context.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { Dict } from '../utils';
+declare const ButtonProvider: import("react").Provider<Dict<any>>, useButtonContext: () => Dict<any>;
+export { ButtonProvider, useButtonContext };
+//# sourceMappingURL=context.d.ts.map

package/dist/esm/button/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/button/context.ts"],"names":[],"mappings":";AAAA,OAAO,EAAiB,IAAI,EAAE,MAAM,UAAU,CAAA;AAE9C,QAAA,MAAO,cAAc,uCAAE,gBAAgB,iBAA6C,CAAA;AAEpF,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/esm/button/context.js

@@ -0,0 +1,3 @@
+import { createContext } from '../utils';
+const [ButtonProvider, useButtonContext] = createContext({ isOptional: true });
+export { ButtonProvider, useButtonContext };

package/dist/esm/button/index.d.ts

@@ -0,0 +1,8 @@
+export * from './button';
+export { default } from './button';
+export * from './button.types';
+export * from './buttonIcon';
+export * from './buttons';
+export * from './buttonText';
+export * from './context';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/button/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAClC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA"}