@veracity/vui 0.0.15 → 0.1.0

package/tag/index.js

@@ -0,0 +1,23 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+__exportStar(require("./context"), exports);
+__exportStar(require("./tag"), exports);
+__exportStar(require("./tag.types"), exports);
+__exportStar(require("./tagIcon"), exports);
+__exportStar(require("./tagText"), exports);
+var tag_1 = require("./tag");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(tag_1).default; } });

package/tag/tag.d.ts

@@ -0,0 +1,11 @@
+import { TagProps } from './tag.types';
+import TagIcon from './tagIcon';
+import TagText from './tagText';
+import { VuiComponent } from '../core';
+import { SystemProps } from '../system';
+export declare const TagBase: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, SystemProps, never>;
+export declare const Tag: VuiComponent<"span", TagProps> & {
+    Icon: typeof TagIcon;
+    Text: typeof TagText;
+};
+export default Tag;

package/tag/tag.js

@@ -0,0 +1,99 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tag = exports.TagBase = void 0;
+var react_1 = __importStar(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var context_1 = require("./context");
+var tagIcon_1 = __importDefault(require("./tagIcon"));
+var tagText_1 = __importDefault(require("./tagText"));
+var core_1 = require("../core");
+var system_1 = require("../system");
+var utils_1 = require("../utils");
+exports.TagBase = styled_components_1.default.span.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tjustify-content: center;\n\tline-height: normal;\n\tposition: relative;\n\twidth: fit-content;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t\toutline: none;\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tjustify-content: center;\n\tline-height: normal;\n\tposition: relative;\n\twidth: fit-content;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t\toutline: none;\n\t}\n\n\t", "\n"])), system_1.system);
+exports.Tag = core_1.vui(function (props, ref) {
+    var casing = props.casing, children = props.children, className = props.className, colorScheme = props.colorScheme, icon = props.icon, iconLeft = props.iconLeft, iconRight = props.iconRight, isFullWidth = props.isFullWidth, _a = props.isInteractive, isInteractive = _a === void 0 ? props.onClick !== undefined : _a, isRound = props.isRound, _b = props.isTruncated, isTruncated = _b === void 0 ? true : _b, itemLeft = props.itemLeft, itemRight = props.itemRight, size = props.size, text = props.text, variant = props.variant, weight = props.weight, rest = __rest(props, ["casing", "children", "className", "colorScheme", "icon", "iconLeft", "iconRight", "isFullWidth", "isInteractive", "isRound", "isTruncated", "itemLeft", "itemRight", "size", "text", "variant", "weight"]);
+    var styles = core_1.useStyleConfig('Tag', props);
+    var _c = styles.container, activeBg = _c.activeBg, h = _c.h, hoverBg = _c.hoverBg, _d = _c.spaceX, spaceXBase = _d === void 0 ? 0 : _d, tagStyles = __rest(_c, ["activeBg", "h", "hoverBg", "spaceX"]);
+    var context = react_1.useMemo(function () { return utils_1.filterUndefined({ colorScheme: colorScheme, size: size, variant: variant }); }, [colorScheme, size, variant]);
+    var spaceX = spaceXBase / 8;
+    var spaceXText = (spaceXBase + 4) / 8;
+    var pl = icon || itemLeft || iconLeft ? spaceX : spaceXText;
+    var pr = icon || itemRight || iconRight ? spaceX : spaceXText;
+    var interactiveProps = isInteractive
+        ? {
+            cursor: 'pointer',
+            hoverBg: hoverBg,
+            activeBg: activeBg,
+            focusRing: 3,
+            tabIndex: 0,
+            userSelect: 'none'
+        }
+        : {};
+    var aliasedProps = utils_1.filterUndefined({
+        borderRadius: isRound ? h / 2 : undefined,
+        fontWeight: weight,
+        textTransform: casing,
+        w: isFullWidth ? '100%' : undefined
+    });
+    return (react_1.default.createElement(context_1.TagProvider, { value: context },
+        react_1.default.createElement(exports.TagBase, __assign({ borderRadius: "md", className: utils_1.cs('vui-tag', className), fontWeight: "medium", h: h, pl: pl, pr: pr, ref: ref, transitionDuration: "fast" }, tagStyles, interactiveProps, aliasedProps, rest),
+            utils_1.isString(icon) ? react_1.default.createElement(tagIcon_1.default, { name: icon }) : icon,
+            !icon && (react_1.default.createElement(react_1.default.Fragment, null,
+                itemLeft,
+                utils_1.isString(iconLeft) ? react_1.default.createElement(tagIcon_1.default, { mr: spaceX, name: iconLeft }) : iconLeft, children !== null && children !== void 0 ? children : (utils_1.isReactText(text) ? react_1.default.createElement(tagText_1.default, __assign({}, { isTruncated: isTruncated, text: text })) : text),
+                utils_1.isString(iconRight) ? react_1.default.createElement(tagIcon_1.default, { ml: spaceX, name: iconRight }) : iconRight,
+                itemRight)))));
+});
+exports.Tag.displayName = 'Tag';
+exports.Tag.Icon = tagIcon_1.default;
+exports.Tag.Text = tagText_1.default;
+exports.default = exports.Tag;
+var templateObject_1;

package/{label/label.types.d.ts → tag/tag.types.d.ts}

@@ -2,19 +2,18 @@
 import { IconProp } from '../icon';
 import { SystemProps, TypographyProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface LabelProps extends SystemProps, ThemingProps<'Label'> {
+import { AnyElement } from '../utils';
+export interface TagProps extends SystemProps, ThemingProps<'Tag'> {
     casing?: TypographyProps['textTransform'];
     colorScheme?: 'blue' | 'green' | 'grey' | 'prussian' | 'red' | 'yellow';
-    icon?: IconProp;
-    iconLeft?: IconProp;
-    iconRight?: IconProp;
-    isElevated?: boolean;
+    icon?: IconProp | AnyElement;
+    iconLeft?: IconProp | AnyElement;
+    iconRight?: IconProp | AnyElement;
     isFullWidth?: boolean;
     isInteractive?: boolean;
     isRound?: boolean;
-    isSplit?: boolean;
     itemLeft?: React.ReactNode;
     itemRight?: React.ReactNode;
-    text?: number | string;
+    text?: React.ReactNode;
     weight?: TypographyProps['fontWeight'];
 }

package/tag/tag.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/tag/tagIcon.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from '../icon';
+export declare const TagIcon: import("../core").VuiComponent<"svg", IconProps>;
+export default TagIcon;

package/tag/tagIcon.js

@@ -0,0 +1,30 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TagIcon = void 0;
+var react_1 = __importDefault(require("react"));
+var context_1 = require("./context");
+var core_1 = require("../core");
+var icon_1 = __importDefault(require("../icon"));
+exports.TagIcon = core_1.vui(function (props, ref) {
+    var _a;
+    var tagProps = (_a = context_1.useTag()) !== null && _a !== void 0 ? _a : {};
+    var mergedProps = __assign(__assign({}, tagProps), props);
+    var styles = core_1.useStyleConfig('Tag', mergedProps);
+    return react_1.default.createElement(icon_1.default, __assign({ className: "vui-tagIcon", ref: ref }, styles.icon, props));
+});
+exports.TagIcon.displayName = 'TagIcon';
+exports.default = exports.TagIcon;

package/tag/tagText.d.ts

@@ -0,0 +1,3 @@
+import { TProps } from '../t';
+export declare const TagText: import("../core").VuiComponent<"span", TProps>;
+export default TagText;

package/tag/tagText.js

@@ -0,0 +1,30 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TagText = void 0;
+var react_1 = __importDefault(require("react"));
+var context_1 = require("./context");
+var core_1 = require("../core");
+var t_1 = __importDefault(require("../t"));
+exports.TagText = core_1.vui(function (props, ref) {
+    var _a;
+    var tagProps = (_a = context_1.useTag()) !== null && _a !== void 0 ? _a : {};
+    var mergedProps = __assign(__assign({}, tagProps), props);
+    var styles = core_1.useStyleConfig('Tag', mergedProps);
+    return react_1.default.createElement(t_1.default, __assign({ className: "vui-tagText", fontSize: "inherit", ref: ref }, styles.text, props));
+});
+exports.TagText.displayName = 'TagText';
+exports.default = exports.TagText;

package/tag/theme.d.ts

@@ -0,0 +1,65 @@
+import { Dict } from '../utils';
+declare function variantSolid(props: Dict): {
+    container: {
+        hoverBg: string;
+        activeBg: string;
+        bg: string;
+        color: string;
+    };
+};
+declare function variantSubtle(props: Dict): {
+    container: {
+        hoverBg: string;
+        activeBg: string;
+        bg: string;
+        color: string;
+    };
+};
+declare const _default: {
+    defaultProps: {
+        colorScheme: string;
+        size: string;
+        variant: string;
+    };
+    parts: string[];
+    sizes: {
+        sm: {
+            container: {
+                fontSize: string;
+                h: number;
+                spaceX: number;
+            };
+            icon: {
+                size: string;
+            };
+            text: {};
+        };
+        md: {
+            container: {
+                fontSize: string;
+                h: number;
+                spaceX: number;
+            };
+            icon: {
+                size: string;
+            };
+            text: {};
+        };
+        lg: {
+            container: {
+                fontSize: string;
+                h: number;
+                spaceX: number;
+            };
+            icon: {
+                size: string;
+            };
+            text: {};
+        };
+    };
+    variants: {
+        solid: typeof variantSolid;
+        subtle: typeof variantSubtle;
+    };
+};
+export default _default;

package/tag/theme.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function variantSolid(props) {
+    var c = props.colorScheme;
+    var container = {
+        hoverBg: c + ".90",
+        activeBg: c + ".100",
+        bg: c + ".80",
+        color: 'white'
+    };
+    if (c === 'yellow') {
+        container.hoverBg = c + ".80";
+        container.activeBg = c + ".90";
+        container.bg = c + ".70";
+    }
+    return { container: container };
+}
+function variantSubtle(props) {
+    var c = props.colorScheme;
+    var container = {
+        hoverBg: c + ".30",
+        activeBg: c + ".40",
+        bg: c + ".20",
+        color: 'prussian.80'
+    };
+    return { container: container };
+}
+var defaultProps = {
+    colorScheme: 'blue',
+    size: 'md',
+    variant: 'subtle'
+};
+var parts = ['container', 'icon', 'text'];
+var sizes = {
+    sm: {
+        container: {
+            fontSize: 'sm',
+            h: 24,
+            spaceX: 4
+        },
+        icon: {
+            size: 'xs'
+        },
+        text: {}
+    },
+    md: {
+        container: {
+            fontSize: 'sm',
+            h: 32,
+            spaceX: 6
+        },
+        icon: {
+            size: 'sm'
+        },
+        text: {}
+    },
+    lg: {
+        container: {
+            fontSize: 'md',
+            h: 40,
+            spaceX: 8
+        },
+        icon: {
+            size: 'md'
+        },
+        text: {}
+    }
+};
+var variants = {
+    solid: variantSolid,
+    subtle: variantSubtle
+};
+exports.default = {
+    defaultProps: defaultProps,
+    parts: parts,
+    sizes: sizes,
+    variants: variants
+};