@veracity/vui 0.0.15 → 0.1.0

package/switch/switch.js

@@ -76,8 +76,9 @@ var t_1 = require("../t");
 var utils_1 = require("../utils");
 exports.SwitchBase = styled_components_1.default.label.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\tline-height: normal;\n\twidth: fit-content;\n\n\t&[data-disabled='true'] {\n\t\tcursor: not-allowed;\n\n\t\t", " {\n\t\t\tcolor: var(--vui-colors-disabled-font);\n\t\t}\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\tline-height: normal;\n\twidth: fit-content;\n\n\t&[data-disabled='true'] {\n\t\tcursor: not-allowed;\n\n\t\t", " {\n\t\t\tcolor: var(--vui-colors-disabled-font);\n\t\t}\n\t}\n\n\t", "\n"])), t_1.TBase, system_1.system);
 exports.Switch = core_1.vui(function (props, ref) {
-    var checked = props.checked, children = props.children, className = props.className, colorScheme = props.colorScheme, defaultChecked = props.defaultChecked, disabled = props.disabled, innerLabelOff = props.innerLabelOff, innerLabelOn = props.innerLabelOn, inputProps = props.inputProps, inputRef = props.inputRef, labelLeft = props.labelLeft, labelRight = props.labelRight, name = props.name, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus, required = props.required, size = props.size, value = props.value, variant = props.variant, rest = __rest(props, ["checked", "children", "className", "colorScheme", "defaultChecked", "disabled", "innerLabelOff", "innerLabelOn", "inputProps", "inputRef", "labelLeft", "labelRight", "name", "onBlur", "onChange", "onFocus", "required", "size", "value", "variant"]);
-    var _a = __read(react_1.useState(defaultChecked), 2), isChecked = _a[0], setIsChecked = _a[1];
+    var _a;
+    var button = props.button, checked = props.checked, children = props.children, className = props.className, colorScheme = props.colorScheme, defaultChecked = props.defaultChecked, disabled = props.disabled, innerLabelOff = props.innerLabelOff, innerLabelOn = props.innerLabelOn, inputRef = props.inputRef, labelLeft = props.labelLeft, labelRight = props.labelRight, name = props.name, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus, required = props.required, size = props.size, value = props.value, variant = props.variant, rest = __rest(props, ["button", "checked", "children", "className", "colorScheme", "defaultChecked", "disabled", "innerLabelOff", "innerLabelOn", "inputRef", "labelLeft", "labelRight", "name", "onBlur", "onChange", "onFocus", "required", "size", "value", "variant"]);
+    var _b = __read(react_1.useState(defaultChecked), 2), isChecked = _b[0], setIsChecked = _b[1];
     var styles = core_1.useStyleConfig('Switch', props);
     react_1.useEffect(function () {
         checked !== undefined && setIsChecked(checked);
@@ -120,10 +121,9 @@ exports.Switch = core_1.vui(function (props, ref) {
         'data-disabled': disabled ? true : false
     });
     return (react_1.default.createElement(context_1.SwitchProvider, { value: context },
-        react_1.default.createElement(exports.SwitchBase, __assign({ className: utils_1.cs('vui-switch', className), ref: ref }, styles.container, aliasedProps, rest), children ? (children) : (react_1.default.createElement(react_1.default.Fragment, null,
-            labelLeft && react_1.default.createElement(switchLabel_1.SwitchLabel, { mr: 1 }, labelLeft),
-            react_1.default.createElement(switchButton_1.SwitchButton, __assign({}, { innerLabelOff: innerLabelOff, innerLabelOn: innerLabelOn, inputProps: inputProps, inputRef: inputRef })),
-            labelRight && react_1.default.createElement(switchLabel_1.SwitchLabel, { ml: 1 }, labelRight))))));
+        react_1.default.createElement(exports.SwitchBase, __assign({ className: utils_1.cs('vui-switch', className), ref: ref }, styles.container, aliasedProps, rest),
+            utils_1.isReactText(labelLeft) ? react_1.default.createElement(switchLabel_1.SwitchLabel, { mr: 1, text: labelLeft }) : labelLeft, (_a = children !== null && children !== void 0 ? children : button) !== null && _a !== void 0 ? _a : react_1.default.createElement(switchButton_1.SwitchButton, __assign({}, { innerLabelOff: innerLabelOff, innerLabelOn: innerLabelOn, inputRef: inputRef })),
+            utils_1.isReactText(labelRight) ? react_1.default.createElement(switchLabel_1.SwitchLabel, { ml: 1, text: labelRight }) : labelRight)));
 });
 exports.Switch.displayName = 'Switch';
 exports.Switch.Button = switchButton_1.SwitchButton;

package/switch/switch.types.d.ts

@@ -1,14 +1,29 @@
-import { HTMLAttributes, ReactNode } from 'react';
-import { ChangeEventHandler, FocusEventHandler } from '../core';
+import { ReactNode, ReactText } from 'react';
+import { ChangeEventHandler, FocusEventHandler, PropsOf } from '../core';
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
+export interface SwitchButtonProps extends SystemProps, ThemingProps<'Switch'> {
+    checked?: boolean;
+    colorScheme?: 'blue' | 'green' | 'prussian' | 'red';
+    disabled?: boolean;
+    innerLabelOff?: ReactNode;
+    innerLabelOn?: ReactNode;
+    inputProps?: PropsOf<'input', SystemProps>;
+    inputRef?: React.MutableRefObject<HTMLInputElement | null> | null;
+    name?: string;
+    onBlur?: FocusEventHandler;
+    onChange?: ChangeEventHandler;
+    onFocus?: FocusEventHandler;
+    required?: boolean;
+    value?: number | string;
+}
 export interface SwitchProps extends SystemProps, ThemingProps<'Switch'> {
+    button?: ReactNode;
     checked?: boolean;
     colorScheme?: 'blue' | 'green' | 'prussian' | 'red';
     disabled?: boolean;
     innerLabelOff?: ReactNode;
     innerLabelOn?: ReactNode;
-    inputProps?: HTMLAttributes<HTMLInputElement>;
     inputRef?: React.MutableRefObject<HTMLInputElement | null> | null;
     labelLeft?: ReactNode;
     labelRight?: ReactNode;
@@ -17,5 +32,5 @@ export interface SwitchProps extends SystemProps, ThemingProps<'Switch'> {
     onChange?: ChangeEventHandler;
     onFocus?: FocusEventHandler;
     required?: boolean;
-    value?: number | string;
+    value?: ReactText;
 }

package/switch/switchButton.d.ts

@@ -1,6 +1,6 @@
-import { SwitchButtonProps } from './switchButton.types';
+import { SwitchButtonProps } from './switch.types';
 import { SystemProps } from '../system';
-export declare const SwitchInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
+export declare const SwitchInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, SystemProps, never>;
 export declare const SwitchThumb: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, SystemProps, never>;
 export declare const SwitchTrack: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, SystemProps, never>;
 export declare const SwitchButtonBase: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, SystemProps, never>;

package/switch/switchButton.js

@@ -71,9 +71,9 @@ var context_1 = require("./context");
 var core_1 = require("../core");
 var system_1 = require("../system");
 var utils_1 = require("../utils");
-exports.SwitchInput = styled_components_1.default.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tcursor: inherit;\n\theight: calc(100% + 10px);\n\tleft: -5px;\n\tmargin: 0;\n\topacity: 0;\n\tpadding: 0;\n\tposition: absolute;\n\ttop: -5px;\n\twidth: calc(100% + 10px);\n\tz-index: 1;\n"], ["\n\tcursor: inherit;\n\theight: calc(100% + 10px);\n\tleft: -5px;\n\tmargin: 0;\n\topacity: 0;\n\tpadding: 0;\n\tposition: absolute;\n\ttop: -5px;\n\twidth: calc(100% + 10px);\n\tz-index: 1;\n"])));
+exports.SwitchInput = styled_components_1.default.input.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tcursor: inherit;\n\theight: calc(100% + 10px);\n\tleft: -5px;\n\tmargin: 0;\n\topacity: 0;\n\tpadding: 0;\n\tposition: absolute;\n\ttop: -5px;\n\twidth: calc(100% + 10px);\n\tz-index: 1;\n\n\t", "\n"], ["\n\tcursor: inherit;\n\theight: calc(100% + 10px);\n\tleft: -5px;\n\tmargin: 0;\n\topacity: 0;\n\tpadding: 0;\n\tposition: absolute;\n\ttop: -5px;\n\twidth: calc(100% + 10px);\n\tz-index: 1;\n\n\t", "\n"])), system_1.system);
 exports.SwitchThumb = styled_components_1.default.span.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: absolute;\n\n\t", "\n"], ["\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: absolute;\n\n\t", "\n"])), system_1.system);
-exports.SwitchTrack = styled_components_1.default.span.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tposition: relative;\n\n\t", "\n"], ["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tposition: relative;\n\n\t", "\n"])), system_1.system);
+exports.SwitchTrack = styled_components_1.default.span.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tflex: 1;\n\tposition: relative;\n\n\t", "\n"], ["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tflex: 1;\n\tposition: relative;\n\n\t", "\n"])), system_1.system);
 exports.SwitchButtonBase = styled_components_1.default.span.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\tcolor: white;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: relative;\n\n\t&[data-disabled='true'] {\n\t\tcursor: not-allowed;\n\n\t\t", " {\n\t\t\tborder-color: var(--vui-colors-disabled-border);\n\t\t\tbackground-color: var(--vui-colors-disabled-font);\n\t\t}\n\n\t\t", " {\n\t\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\t}\n\t}\n\n\t", "\n"], ["\n\tcolor: white;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: relative;\n\n\t&[data-disabled='true'] {\n\t\tcursor: not-allowed;\n\n\t\t", " {\n\t\t\tborder-color: var(--vui-colors-disabled-border);\n\t\t\tbackground-color: var(--vui-colors-disabled-font);\n\t\t}\n\n\t\t", " {\n\t\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\t}\n\t}\n\n\t", "\n"])), exports.SwitchThumb, exports.SwitchTrack, system_1.system);
 exports.SwitchButton = core_1.vui(function (props, ref) {
     var _a;
@@ -83,6 +83,7 @@ exports.SwitchButton = core_1.vui(function (props, ref) {
     var _d = __read(react_1.useState(defaultChecked), 2), isChecked = _d[0], setIsChecked = _d[1];
     var _e = __read(react_1.useState(false), 2), isFocused = _e[0], setIsFocused = _e[1];
     var styles = core_1.useStyleConfig('Switch', mergedProps);
+    var _f = styles.button, thumbStyles = _f.thumb, trackStyles = _f.track, buttonStyles = __rest(_f, ["thumb", "track"]);
     var isControlled = checked !== undefined || switchIsChecked !== undefined;
     react_1.useEffect(function () {
         if (isControlled) {
@@ -101,31 +102,29 @@ exports.SwitchButton = core_1.vui(function (props, ref) {
         setIsFocused(true);
         onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
     }
-    var hDiff = (styles.thumb.h - styles.track.h) / 2;
-    var thumbOffset = "calc(100% - " + Math.abs(hDiff - styles.thumb.h) + "px)";
-    var labelOffset = styles.thumb.h - hDiff + 4 + "px";
-    var buttonProps = utils_1.filterUndefined({
+    var hDiff = (thumbStyles.h - trackStyles.h) / 2;
+    var thumbOffset = "calc(100% - " + Math.abs(hDiff - thumbStyles.h) + "px)";
+    var labelOffset = thumbStyles.h - hDiff + 4 + "px";
+    var buttonAliasedProps = utils_1.filterUndefined({
         'data-checked': isChecked ? true : false,
         'data-disabled': disabled ? true : false,
         'data-focused': isFocused ? true : false
     });
-    var thumbProps = utils_1.filterUndefined({
+    var thumbAliasedProps = utils_1.filterUndefined({
         left: isChecked ? thumbOffset : -hDiff,
-        ring: isFocused ? styles.thumb.ring : 0
+        ring: isFocused ? thumbStyles.ring : 0
     });
-    var trackProps = utils_1.filterUndefined({
-        bg: isChecked ? styles.track.bg : 'grey.50',
+    var trackAliasedProps = utils_1.filterUndefined({
+        bg: isChecked ? trackStyles.bg : 'grey.50',
         pl: isChecked ? 1 : labelOffset,
         pr: isChecked ? labelOffset : 1,
-        ring: isFocused ? styles.track.ring : 0
+        ring: isFocused ? trackStyles.ring : 0
     });
-    return (react_1.default.createElement(exports.SwitchButtonBase, __assign({ className: utils_1.cs('vui-switchButton', className), 
-        // p={1}
-        ref: ref }, styles.button, buttonProps, rest),
+    return (react_1.default.createElement(exports.SwitchButtonBase, __assign({ className: utils_1.cs('vui-switchButton', className), ref: ref }, buttonStyles, buttonAliasedProps, rest),
         react_1.default.createElement(exports.SwitchInput, __assign({ className: "vui-switchInput", onBlur: handleOnBlur, onChange: handleOnChange, onFocus: handleOnFocus, ref: inputRef, type: "checkbox" }, { checked: checked, defaultChecked: defaultChecked, disabled: disabled, name: name, required: required, value: value }, inputProps)),
-        react_1.default.createElement(exports.SwitchTrack, __assign({ borderRadius: 100, className: "vui-switchTrack", transitionDuration: "fast" }, styles.track, trackProps),
+        react_1.default.createElement(exports.SwitchTrack, __assign({ borderRadius: "round", className: "vui-switchTrack", transitionDuration: "fast" }, trackStyles, trackAliasedProps),
             !isChecked && innerLabelOff,
-            react_1.default.createElement(exports.SwitchThumb, __assign({ borderRadius: "50%", className: "vui-switchThumb", transitionDuration: "fast" }, styles.thumb, thumbProps)),
+            react_1.default.createElement(exports.SwitchThumb, __assign({ borderRadius: "round", className: "vui-switchThumb", transitionDuration: "fast" }, thumbStyles, thumbAliasedProps)),
             isChecked && innerLabelOn)));
 });
 exports.SwitchButton.displayName = 'SwitchButton';

package/switch/theme.d.ts

@@ -1,71 +1,67 @@
 import { Dict } from '../utils';
-declare function sizeLg(props: Dict): {
+declare function sizeLg(): {
+    container: {};
     button: {
         fontSize: string;
+        minW: number;
+        thumb: {
+            h: number;
+            w: number;
+        };
+        track: {
+            h: number;
+        };
     };
     label: {
         size: string;
     };
-    thumb: {
-        h: number;
-        w: number;
-    };
-    track: {
-        h: number;
-        minW: number;
-    };
 };
-declare function sizeMd(props: Dict): {
+declare function sizeMd(): {
+    container: {};
     button: {
         fontSize: string;
+        minW: number;
+        thumb: {
+            h: number;
+            w: number;
+        };
+        track: {
+            h: number;
+        };
     };
     label: {
         size: string;
     };
-    thumb: {
-        h: number;
-        w: number;
-    };
-    track: {
-        h: number;
-        minW: number;
-    };
 };
-declare function sizeSm(props: Dict): {
+declare function sizeSm(): {
+    container: {};
     button: {
         fontSize: string;
+        minW: number;
+        thumb: {
+            h: number;
+            w: number;
+        };
+        track: {
+            h: number;
+        };
     };
     label: {
         size: string;
     };
-    thumb: {
-        h: number;
-        w: number;
-    };
-    track: {
-        h: number;
-        minW: number;
-    };
 };
 declare function variantContained(props: Dict): {
-    thumb: {
-        bg: string;
-    };
-    track: {
-        bg: string;
-        ring: number;
-    };
-};
-declare function variantThin(props: Dict): {
-    thumb: {
-        bg: string;
-        borderColor: string;
-        borderWidth: number;
-        ring: number;
-    };
-    track: {
-        bg: string;
-    };
+    container: {};
+    button: {
+        thumb: {
+            bg: string;
+        };
+        track: {
+            bg: string;
+            ring: number;
+        };
+    };
+    label: {};
 };
 declare const _default: {
     defaultProps: {
@@ -81,7 +77,6 @@ declare const _default: {
     };
     variants: {
         contained: typeof variantContained;
-        thin: typeof variantThin;
     };
 };
 export default _default;

package/switch/theme.js

@@ -1,109 +1,87 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-function sizeLg(props) {
-    var variant = props.variant;
+function sizeLg() {
+    var container = {};
     var button = {
-        fontSize: 'md'
+        fontSize: 'md',
+        minW: 50,
+        thumb: {
+            h: 24,
+            w: 24
+        },
+        track: {
+            h: 28
+        }
     };
     var label = {
         size: 'lg'
     };
-    var thumb = {
-        h: 24,
-        w: 24
-    };
-    var track = {
-        h: 28,
-        minW: 50
-    };
-    if (variant === 'thin') {
-        track.h = 18;
-        track.minW = 40;
-    }
-    return { button: button, label: label, thumb: thumb, track: track };
+    return { container: container, button: button, label: label };
 }
-function sizeMd(props) {
-    var variant = props.variant;
+function sizeMd() {
+    var container = {};
     var button = {
-        fontSize: 'sm'
+        fontSize: 'sm',
+        minW: 42,
+        thumb: {
+            h: 20,
+            w: 20
+        },
+        track: {
+            h: 24
+        }
     };
     var label = {
         size: 'md'
     };
-    var thumb = {
-        h: 20,
-        w: 20
-    };
-    var track = {
-        h: 24,
-        minW: 42
-    };
-    if (variant === 'thin') {
-        track.h = 14;
-        track.minW = 32;
-    }
-    return { button: button, label: label, thumb: thumb, track: track };
+    return { container: container, button: button, label: label };
 }
-function sizeSm(props) {
-    var variant = props.variant;
+function sizeSm() {
+    var container = {};
     var button = {
-        fontSize: 'xs'
+        fontSize: 'xs',
+        minW: 34,
+        thumb: {
+            h: 16,
+            w: 16
+        },
+        track: {
+            h: 20
+        }
     };
     var label = {
         size: 'sm'
     };
-    var thumb = {
-        h: 16,
-        w: 16
-    };
-    var track = {
-        h: 20,
-        minW: 34
-    };
-    if (variant === 'thin') {
-        track.h = 10;
-        track.minW = 24;
-    }
-    return { button: button, label: label, thumb: thumb, track: track };
+    return { container: container, button: button, label: label };
 }
 function variantContained(props) {
     var c = props.colorScheme;
-    var thumb = {
-        bg: 'white'
-    };
-    var track = {
-        bg: c + ".80",
-        ring: 3
-    };
-    return { thumb: thumb, track: track };
-}
-function variantThin(props) {
-    var c = props.colorScheme;
-    var thumb = {
-        bg: 'white',
-        borderColor: c + ".80",
-        borderWidth: 1,
-        ring: 3
-    };
-    var track = {
-        bg: c + ".80"
-    };
-    return { thumb: thumb, track: track };
+    var container = {};
+    var button = {
+        thumb: {
+            bg: 'white'
+        },
+        track: {
+            bg: c + ".80",
+            ring: 3
+        }
+    };
+    var label = {};
+    return { container: container, button: button, label: label };
 }
 var defaultProps = {
     colorScheme: 'blue',
     size: 'md',
     variant: 'contained'
 };
-var parts = ['container', 'button', 'label', 'track', 'thumb'];
+var parts = ['container', 'button', 'label'];
 var sizes = {
     sm: sizeSm,
     md: sizeMd,
     lg: sizeLg
 };
 var variants = {
-    contained: variantContained,
-    thin: variantThin
+    contained: variantContained
 };
 exports.default = {
     defaultProps: defaultProps,

package/system/borders.d.ts

@@ -77,7 +77,7 @@ export interface BorderStyleProps {
     borderStyle?: BorderStyleProp;
     hoverBorderStyle?: BorderStyleProp;
 }
-declare type BorderRadiusProp = SystemProp<RadiusGetter, VuiTheme>;
+export declare type BorderRadiusProp = SystemProp<RadiusGetter, VuiTheme>;
 export interface BorderRadiusProps {
     borderRadius?: BorderRadiusProp;
     hoverBorderRadius?: BorderRadiusProp;
@@ -129,6 +129,7 @@ export interface RingProps {
     focusRing?: RingProp;
     focusVisibleRing?: RingProp;
     focusWithinRing?: RingProp;
+    hoverRing?: RingProp;
 }
 declare type RingColorProp = SystemProp<ColorGetter, VuiTheme>;
 export interface RingColorProps {
@@ -136,6 +137,7 @@ export interface RingColorProps {
     focusRingColor?: RingColorProp;
     focusVisibleRingColor?: RingColorProp;
     focusWithinRingColor?: RingColorProp;
+    hoverRingColor?: RingColorProp;
 }
 export interface BordersProps extends BorderProps, BorderTopProps, BorderRightProps, BorderBottomProps, BorderLeftProps, BorderColorProps, BorderTopColorProps, BorderRightColorProps, BorderBottomColorProps, BorderLeftColorProps, BorderWidthProps, BorderTopWidthProps, BorderRightWidthProps, BorderBottomWidthProps, BorderLeftWidthProps, BorderStyleProps, BorderRadiusProps, OutlineProps, OutlineColorProps, OutlineWidthProps, OutlineStyleProps, DivideXProps, DivideYProps, DivideXReverseProps, DivideYReverseProps, DivideColorProps, DivideStyleProps, RingProps, RingColorProps {
 }

package/system/custom.d.ts

@@ -1,14 +1,31 @@
-/** Provides styling to truncate multi-line text. */
-export declare const maxLines: import("@xstyled/system").StyleGenerator;
-export interface MaxLinesProps {
-    maxLines?: number;
+import { BorderRadiusProp } from './borders';
+export interface BorderRadiusBottomProps {
+    borderRadiusBottom?: BorderRadiusProp;
 }
-/** Provides styling to truncate single-line text. */
-export declare const isTruncated: import("@xstyled/system").StyleGenerator;
-export declare const wordBreak: import("@xstyled/system").StyleGenerator;
+export declare const borderRadiusBottom: import("@xstyled/system").StyleGenerator;
+export interface BorderRadiusLeftProps {
+    borderRadiusLeft?: BorderRadiusProp;
+}
+export declare const borderRadiusLeft: import("@xstyled/system").StyleGenerator;
+export interface BorderRadiusRightProps {
+    borderRadiusRight?: BorderRadiusProp;
+}
+export declare const borderRadiusRight: import("@xstyled/system").StyleGenerator;
+export interface BorderRadiusTopProps {
+    borderRadiusTop?: BorderRadiusProp;
+}
+export declare const borderRadiusTop: import("@xstyled/system").StyleGenerator;
 export interface IsTruncatedProps {
     isTruncated?: boolean;
 }
+/** Provides styling to truncate single-line text. */
+export declare const isTruncated: import("@xstyled/system").StyleGenerator;
+export interface MaxLinesProps {
+    maxLines?: number;
+}
+/** Provides styling to truncate multi-line text. */
+export declare const maxLines: import("@xstyled/system").StyleGenerator;
 export declare type WordBreakProps = {
     wordBreak?: 'normal' | 'break-all' | 'keep-all' | 'break-word';
 };
+export declare const wordBreak: import("@xstyled/system").StyleGenerator;

package/system/custom.js

@@ -1,19 +1,26 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.wordBreak = exports.isTruncated = exports.maxLines = void 0;
+exports.wordBreak = exports.maxLines = exports.isTruncated = exports.borderRadiusTop = exports.borderRadiusRight = exports.borderRadiusLeft = exports.borderRadiusBottom = void 0;
 var system_1 = require("@xstyled/system");
-/** Provides styling to truncate multi-line text. */
-exports.maxLines = system_1.style({
-    prop: 'maxLines',
-    cssProperty: function (value) {
-        return {
-            display: '-webkit-box',
-            overflow: 'hidden',
-            '-webkit-line-clamp': "" + value,
-            '-webkit-box-orient': 'vertical'
-        };
-    },
-    states: {}
+exports.borderRadiusBottom = system_1.style({
+    prop: 'borderRadiusBottom',
+    themeGet: system_1.getRadius,
+    cssProperty: ['borderBottomLeftRadius', 'borderBottomRightRadius']
+});
+exports.borderRadiusLeft = system_1.style({
+    prop: 'borderRadiusLeft',
+    themeGet: system_1.getRadius,
+    cssProperty: ['borderBottomLeftRadius', 'borderTopLeftRadius']
+});
+exports.borderRadiusRight = system_1.style({
+    prop: 'borderRadiusRight',
+    themeGet: system_1.getRadius,
+    cssProperty: ['borderBottomRightRadius', 'borderTopRightRadius']
+});
+exports.borderRadiusTop = system_1.style({
+    prop: 'borderRadiusTop',
+    themeGet: system_1.getRadius,
+    cssProperty: ['borderTopLeftRadius', 'borderTopRightRadius']
 });
 /** Provides styling to truncate single-line text. */
 exports.isTruncated = system_1.style({
@@ -27,6 +34,19 @@ exports.isTruncated = system_1.style({
     },
     states: {}
 });
+/** Provides styling to truncate multi-line text. */
+exports.maxLines = system_1.style({
+    prop: 'maxLines',
+    cssProperty: function (value) {
+        return {
+            display: '-webkit-box',
+            overflow: 'hidden',
+            '-webkit-line-clamp': "" + value,
+            '-webkit-box-orient': 'vertical'
+        };
+    },
+    states: {}
+});
 exports.wordBreak = system_1.style({
     prop: 'wordBreak'
 });

package/system/system.d.ts

@@ -4,14 +4,14 @@ import { BordersProps } from './borders';
 import { EffectsProps } from './effects';
 import { FlexboxesProps } from './flexboxes';
 import { InteractivityProps } from './interactivity';
-import { IsTruncatedProps, MaxLinesProps, WordBreakProps } from './custom';
+import { BorderRadiusBottomProps, BorderRadiusLeftProps, BorderRadiusRightProps, BorderRadiusTopProps, IsTruncatedProps, MaxLinesProps, WordBreakProps } from './custom';
 import { LayoutProps } from './layout';
 import { SizingProps } from './sizing';
 import { SpaceProps } from './space';
 import { TransformsProps } from './transforms';
 import { TransitionsProps } from './transitions';
 import { TypographyProps } from './typography';
-export interface SystemProps extends AnimationsProps, BackgroundColorProps, BordersProps, EffectsProps, FlexboxesProps, InteractivityProps, IsTruncatedProps, LayoutProps, MaxLinesProps, SizingProps, SpaceProps, TransformsProps, TransitionsProps, TypographyProps, WordBreakProps {
+export interface SystemProps extends AnimationsProps, BackgroundColorProps, BordersProps, BorderRadiusBottomProps, BorderRadiusLeftProps, BorderRadiusRightProps, BorderRadiusTopProps, EffectsProps, FlexboxesProps, InteractivityProps, IsTruncatedProps, LayoutProps, MaxLinesProps, SizingProps, SpaceProps, TransformsProps, TransitionsProps, TypographyProps, WordBreakProps {
 }
 declare const _default: import("@xstyled/system").StyleGenerator;
 export default _default;

package/system/system.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var system_1 = require("@xstyled/system");
 var custom_1 = require("./custom");
-exports.default = system_1.compose(system_1.animation, system_1.backgroundColor, system_1.borders, system_1.color, system_1.effects, system_1.flexboxes, system_1.interactivity, custom_1.isTruncated, system_1.layout, custom_1.maxLines, system_1.sizing, system_1.space, system_1.transforms, system_1.transitions, system_1.typography, custom_1.wordBreak);
+exports.default = system_1.compose(system_1.animation, system_1.backgroundColor, system_1.borders, custom_1.borderRadiusBottom, custom_1.borderRadiusLeft, custom_1.borderRadiusRight, custom_1.borderRadiusTop, system_1.color, system_1.effects, system_1.flexboxes, system_1.interactivity, custom_1.isTruncated, system_1.layout, custom_1.maxLines, system_1.sizing, system_1.space, system_1.transforms, system_1.transitions, system_1.typography, custom_1.wordBreak);

package/t/t.types.d.ts

@@ -1,3 +1,4 @@
+import { ReactText } from 'react';
 import { SystemProps, TypographyProps } from '../system';
 import { ThemingProps } from '../theme';
 export interface TProps extends SystemProps, ThemingProps<'T'> {
@@ -5,6 +6,6 @@ export interface TProps extends SystemProps, ThemingProps<'T'> {
     casing?: TypographyProps['textTransform'];
     centerV?: boolean;
     decoration?: TypographyProps['textDecoration'];
-    text?: number | string;
+    text?: ReactText;
     weight?: TypographyProps['fontWeight'];
 }

package/tag/context.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { Dict } from '../utils';
+declare const TagProvider: import("react").Provider<Dict<any>>, useTag: () => Dict<any>;
+export { TagProvider, useTag };

package/tag/context.js

@@ -0,0 +1,23 @@
+"use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTag = exports.TagProvider = void 0;
+var core_1 = require("../core");
+var _a = __read(core_1.createContext({ isOptional: true }), 2), TagProvider = _a[0], useTag = _a[1];
+exports.TagProvider = TagProvider;
+exports.useTag = useTag;

package/tag/index.d.ts

@@ -0,0 +1,6 @@
+export * from './context';
+export * from './tag';
+export * from './tag.types';
+export * from './tagIcon';
+export * from './tagText';
+export { default } from './tag';