@apple-pie/slice 0.0.1 → 0.0.3

package/dist/cjs/chunks/UILabel-DkBE2AIt.js

@@ -0,0 +1,116 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-4H29ixHs.js');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var hooks_useTheme = require('../hooks/useTheme.js');
+require('../theme/colors.js');
+require('../hooks/useWindow.js');
+var styleInject_es = require('./style-inject.es-XZHJH68X.js');
+
+var css_248z = ".flexBox-module_row__PWxbe {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowBetween__27lKK {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowStart__nJZnW {\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowEnd__dHcOU {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_column__MP2Xd {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStart__Kg8cV {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: flex-start;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStartCenter__zcmtk {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnBetween__157yI {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnEnd__u2nwI {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.type-module_body-xs-regular__QWEzl {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-medium__FxEAv {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-bold__rf7AV {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.25px;\n}.type-module_body-s-regular__8-FO- {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-medium__qyYq- {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-bold__7GQ5Z {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-m-regular__Qtp5G {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-medium__Ieh9K {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-bold__0lZ3I {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-l-regular__Ar4d3 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-medium__6tV1n {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-bold__I8Q1v {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_heading-s-bold__QFgN8 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 650;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-s-medium__jGIb2 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 560;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-m-bold__tdBSi {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 650;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-m-medium__-7Uyu {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 560;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-l-medium__8hGYF {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 560;\n\tfont-size: 28px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-l-bold__Cryjg {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 650;\n\tfont-size: 28px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n.UILabel-module_label__uVU8K {\n\tline-height: 1em;\n\twhite-space: nowrap;\n\tpadding: var(--label-padding) !important;\n\twidth: min-content;\n\tborder-radius: var(--label-border-radius);\n\tborder: 1px solid var(--core-outline-primary);\n\tcursor: var(--label-cursor);\n}\n\n.UILabel-module_button__KDRZU {\n}\n\n.UILabel-module_regular__3eMc6 {\n}\n\n.UILabel-module_red__CsyBn {\n\tbackground: var(--label-background);\n\tcolor: var(--core-text-light);\n\tborder-color: var(--label-border-color-red);\n}\n\n.UILabel-module_green__rObJs {\n\tbackground: var(--label-background);\n\tcolor: var(--core-text-light);\n\tborder-color: var(--label-border-color-green);\n}\n\n.UILabel-module_yellow__QCAkj {\n\tbackground: var(--label-background);\n\tcolor: var(--core-text-primary);\n\tborder-color: var(--label-border-color-yellow);\n}\n\n.UILabel-module_grey__ve4Ya {\n\tbackground: var(--label-background);\n\tcolor: var(--core-text-secondary);\n\tborder-color: var(--label-border-color-grey);\n}\n\n.UILabel-module_lightgrey__0rizC {\n\tbackground: var(--label-background);\n\tcolor: var(--core-text-disabled);\n\tborder-color: var(--label-border-color-lightgrey);\n}\n\n.UILabel-module_white__cObtu {\n\tbackground: var(--label-background);\n\tcolor: var(--core-text-primary);\n\tborder-color: var(--label-border-color-white);\n}\n\n.UILabel-module_blue__ok1r5 {\n\tbackground: var(--label-background);\n\tcolor: var(--core-text-light);\n\tborder-color: var(--label-border-color-blue);\n}\n";
+var css = {"label":"UILabel-module_label__uVU8K flexBox-module_row__PWxbe","button":"UILabel-module_button__KDRZU type-module_body-m-regular__Qtp5G","regular":"UILabel-module_regular__3eMc6 type-module_body-s-regular__8-FO-","red":"UILabel-module_red__CsyBn","green":"UILabel-module_green__rObJs","yellow":"UILabel-module_yellow__QCAkj","grey":"UILabel-module_grey__ve4Ya","lightgrey":"UILabel-module_lightgrey__0rizC","white":"UILabel-module_white__cObtu","blue":"UILabel-module_blue__ok1r5"};
+styleInject_es.styleInject(css_248z);
+
+function UILabel(props) {
+    const theme = hooks_useTheme.useTheme();
+    const { label, state, noFill = false, button = false, round = false, onClick = () => null } = props, divAttributes = tslib_es6.__rest(props, ["label", "state", "noFill", "button", "round", "onClick"]);
+    const { id: divId, className, style } = divAttributes, rest = tslib_es6.__rest(divAttributes, ["id", "className", "style"]);
+    const divStyle = style !== null && style !== void 0 ? style : {};
+    const divClass = className ? ` ${className}` : '';
+    const handleClick = React.useCallback((e) => {
+        if (button)
+            onClick(e);
+    }, [button, onClick]);
+    // memo background color
+    const backgroundColor = React.useMemo(() => {
+        if (noFill)
+            return 'var(--core-surface-primary)';
+        switch (state) {
+            case 'red':
+                return theme.current.colors['feedback-warning'];
+            case 'green':
+                return theme.current.colors['feedback-warning'];
+            case 'yellow':
+                return theme.current.colors['array-yellow'];
+            case 'grey':
+                return theme.current.colors['core-surface-secondary'];
+            case 'lightgrey':
+                return theme.current.colors['core-button-disabled'];
+            case 'white':
+                return theme.current.colors['core-surface-secondary'];
+            case 'blue':
+                return theme.current.colors['core-button-primary'];
+            default:
+                return 'var(--core-surface-primary)';
+        }
+    }, [noFill, state, theme]);
+    // memo border colors
+    const borderColors = React.useMemo(() => {
+        const getBorderColor = (colorState) => {
+            switch (colorState) {
+                case 'red':
+                    return theme.current.colors['core-button-disabled'];
+                case 'green':
+                    return noFill
+                        ? theme.current.colors['feedback-positive']
+                        : theme.current.colors['core-button-disabled'];
+                case 'yellow':
+                    return theme.current.colors['array-yellow-label'];
+                case 'grey':
+                    return noFill
+                        ? theme.current.colors['core-text-secondary']
+                        : theme.current.colors['core-button-disabled'];
+                case 'lightgrey':
+                    return noFill
+                        ? theme.current.colors['core-outline-primary']
+                        : theme.current.colors['core-button-disabled'];
+                case 'white':
+                    return noFill
+                        ? theme.current.colors['core-text-secondary']
+                        : theme.current.colors['core-badge-secondary'];
+                case 'blue':
+                    return noFill
+                        ? theme.current.colors['core-text-secondary']
+                        : theme.current.colors['core-button-primary'];
+                default:
+                    return 'var(--core-outline-primary)';
+            }
+        };
+        return {
+            red: getBorderColor('red'),
+            green: getBorderColor('green'),
+            yellow: getBorderColor('yellow'),
+            grey: getBorderColor('grey'),
+            lightgrey: getBorderColor('lightgrey'),
+            white: getBorderColor('white'),
+            blue: getBorderColor('blue'),
+        };
+    }, [noFill, theme]);
+    // memo css vars
+    const cssVars = React.useMemo(() => {
+        return {
+            '--label-padding': button ? '6px 12px' : '4px 6px',
+            '--label-border-radius': round ? '100px' : '4px',
+            '--label-cursor': button ? 'pointer' : 'default',
+            '--label-background': backgroundColor,
+            '--label-border-color-red': borderColors.red,
+            '--label-border-color-green': borderColors.green,
+            '--label-border-color-yellow': borderColors.yellow,
+            '--label-border-color-grey': borderColors.grey,
+            '--label-border-color-lightgrey': borderColors.lightgrey,
+            '--label-border-color-white': borderColors.white,
+            '--label-border-color-blue': borderColors.blue,
+        };
+    }, [button, round, backgroundColor, borderColors]);
+    const classNames = [
+        css.label,
+        button ? css.button : css.regular,
+        state ? css[state] : '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (jsxRuntime.jsx("div", Object.assign({ id: divId, className: `${classNames}${divClass}`, onKeyDown: () => null, style: Object.assign(Object.assign({}, divStyle), cssVars), onClick: handleClick }, rest, { children: label })));
+}
+
+exports.UILabel = UILabel;