@geneui/components 3.0.0-next-06dadf3-29102024 → 3.0.0-next-48d0ef7-31102024

package/Pill/index.js

@@ -1,67 +0,0 @@
-import React__default, { useState, useRef, useEffect, cloneElement } from 'react';
-import { _ as _objectWithoutProperties, a as _extends } from '../ArrowLeft-b88e2ba8.js';
-import { c as classnames } from '../index-031ff73c.js';
-import { T as Tooltip } from '../index-c7646e48.js';
-import 'prop-types';
-import '../dateValidation-67caec66.js';
-import 'react-dom';
-import '../configs-00612ce0.js';
-import { u as useEllipsisDetection } from '../useEllipsisDetection-c1c9ad94.js';
-import { s as styleInject } from '../style-inject.es-746bb8ed.js';
-import '../tslib.es6-f211516f.js';
-import '../GeneUIProvider/index.js';
-import '../_commonjsHelpers-24198af3.js';
-import '../hooks/useDebounce.js';
-
-var _excluded = ["size", "color"];
-var SvgDot = function SvgDot(_ref) {
-  var _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 24 : _ref$size,
-    _ref$color = _ref.color,
-    color = _ref$color === void 0 ? "currentColor" : _ref$color,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React__default.createElement("svg", _extends({
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: color,
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), /*#__PURE__*/React__default.createElement("path", {
-    d: "M12 17a5 5 0 1 0 0-10 5 5 0 0 0 0 10Z",
-    fill: color
-  }));
-};
-
-var css_248z = "[data-gene-ui-version=\"2.16.4\"] .pill{align-items:center;display:inline-flex;max-width:100%;vertical-align:top}[data-gene-ui-version=\"2.16.4\"] .pill_icon_after{flex-direction:row-reverse}[data-gene-ui-version=\"2.16.4\"] .pill_size_medium:not(.pill_icon_only){gap:var(--guit-ref-spacing-xsmall);padding-bottom:var(--guit-ref-spacing-2xsmall);padding-top:var(--guit-ref-spacing-2xsmall)}[data-gene-ui-version=\"2.16.4\"] .pill_size_medium:not(.pill_icon_before,.pill_size_medium.pill_icon_after,.pill_size_medium.pill_icon_only){padding-inline-end:var(--guit-ref-spacing-medium);padding-inline-start:var(--guit-ref-spacing-medium)}[data-gene-ui-version=\"2.16.4\"] .pill_size_medium.pill_icon_before{padding-inline-end:var(--guit-ref-spacing-medium);padding-inline-start:var(--guit-ref-spacing-xsmall)}[data-gene-ui-version=\"2.16.4\"] .pill_size_medium.pill_icon_after{padding-inline-end:var(--guit-ref-spacing-xsmall);padding-inline-start:var(--guit-ref-spacing-medium)}[data-gene-ui-version=\"2.16.4\"] .pill_size_medium.pill_icon_only{padding:var(--guit-ref-spacing-2xsmall)}[data-gene-ui-version=\"2.16.4\"] .pill_size_small:not(.pill_icon_only){gap:var(--guit-ref-spacing-2xsmall);padding-bottom:var(--guit-ref-spacing-4xsmall);padding-top:var(--guit-ref-spacing-4xsmall)}[data-gene-ui-version=\"2.16.4\"] .pill_size_small:not(.pill_icon_before,.pill_size_small.pill_icon_after,.pill_size_small.pill_icon_only){padding-inline-end:var(--guit-ref-spacing-medium);padding-inline-start:var(--guit-ref-spacing-medium)}[data-gene-ui-version=\"2.16.4\"] .pill_size_small.pill_icon_before{padding-inline-end:var(--guit-ref-spacing-medium);padding-inline-start:var(--guit-ref-spacing-xsmall)}[data-gene-ui-version=\"2.16.4\"] .pill_size_small.pill_icon_after{padding-inline-end:var(--guit-ref-spacing-xsmall);padding-inline-start:var(--guit-ref-spacing-medium)}[data-gene-ui-version=\"2.16.4\"] .pill_size_small.pill_icon_only{padding:var(--guit-ref-spacing-4xsmall)}[data-gene-ui-version=\"2.16.4\"] .pill_size_medium:not(.pill_icon_only),[data-gene-ui-version=\"2.16.4\"] .pill_size_small:not(.pill_icon_only){font-family:var(--guit-sem-font-label-medium-default-semibold-font-family);font-size:var(--guit-sem-font-label-medium-default-semibold-font-size);font-weight:var(--guit-sem-font-label-medium-default-medium-font-weight);line-height:var(--guit-sem-font-label-medium-default-semibold-line-height)}[data-gene-ui-version=\"2.16.4\"] .pill_size_small_nudge{gap:var(--guit-ref-spacing-3xsmall);padding-bottom:var(--guit-ref-spacing-4xsmall);padding-top:var(--guit-ref-spacing-4xsmall)}[data-gene-ui-version=\"2.16.4\"] .pill_size_small_nudge:not(.pill_icon_only){font-family:var(--guit-sem-font-label-small-default-medium-font-family);font-size:var(--guit-sem-font-label-small-default-medium-font-size);font-weight:var(--guit-sem-font-label-small-default-medium-font-weight);line-height:var(--guit-sem-font-label-small-default-medium-line-height)}[data-gene-ui-version=\"2.16.4\"] .pill_size_small_nudge:not(.pill_icon_before,.pill_size_small_nudge.pill_icon_after,.pill_size_small_nudge.pill_icon_only){padding-inline-end:var(--guit-ref-spacing-xsmall);padding-inline-start:var(--guit-ref-spacing-xsmall)}[data-gene-ui-version=\"2.16.4\"] .pill_size_small_nudge.pill_icon_before{padding-inline-end:var(--guit-ref-spacing-xsmall);padding-inline-start:var(--guit-ref-spacing-3xsmall)}[data-gene-ui-version=\"2.16.4\"] .pill_size_small_nudge.pill_icon_after{padding-inline-end:var(--guit-ref-spacing-3xsmall);padding-inline-start:var(--guit-ref-spacing-xsmall)}[data-gene-ui-version=\"2.16.4\"] .pill_size_small_nudge.pill_icon_only{padding:var(--guit-ref-spacing-4xsmall)}[data-gene-ui-version=\"2.16.4\"] .pill_fill.pill_size_medium,[data-gene-ui-version=\"2.16.4\"] .pill_fill.pill_size_small{border-radius:var(--guit-ref-radius-3xsmall)}[data-gene-ui-version=\"2.16.4\"] .pill_fill.pill_size_small_nudge{border-radius:var(--guit-ref-radius-4xsmall)}[data-gene-ui-version=\"2.16.4\"] .pill_fill.pill_color_informative{background-color:var(--guit-sem-color-background-informative)}[data-gene-ui-version=\"2.16.4\"] .pill_fill.pill_color_neutral{background-color:var(--guit-sem-color-background-neutral-3)}[data-gene-ui-version=\"2.16.4\"] .pill_fill.pill_color_error{background-color:var(--guit-sem-color-background-error-1)}[data-gene-ui-version=\"2.16.4\"] .pill_fill.pill_color_success{background-color:var(--guit-sem-color-background-success-1)}[data-gene-ui-version=\"2.16.4\"] .pill_fill.pill_color_warning{background-color:var(--guit-sem-color-background-warning-1)}[data-gene-ui-version=\"2.16.4\"] .pill_fill.pill_color_purple{background-color:var(--guit-sem-color-background-accent-purple-1)}[data-gene-ui-version=\"2.16.4\"] .pill_fill.pill_color_lagoon{background-color:var(--guit-sem-color-background-accent-lagoon-1)}[data-gene-ui-version=\"2.16.4\"] .pill_fill.pill_color_magenta{background-color:var(--guit-sem-color-background-accent-magenta-1)}[data-gene-ui-version=\"2.16.4\"] .pill_fill.pill_color_slate{background-color:var(--guit-sem-color-background-accent-slate-1)}[data-gene-ui-version=\"2.16.4\"] .pill_fill.pill_color_inverse{background-color:var(--guit-sem-color-background-inverse);color:var(--guit-sem-color-foreground-neutral-2)}[data-gene-ui-version=\"2.16.4\"] .pill_color_informative{color:var(--guit-sem-color-foreground-informative)}[data-gene-ui-version=\"2.16.4\"] .pill_color_neutral{color:var(--guit-sem-color-foreground-neutral-2)}[data-gene-ui-version=\"2.16.4\"] .pill_color_error{color:var(--guit-sem-color-foreground-error)}[data-gene-ui-version=\"2.16.4\"] .pill_color_success{color:var(--guit-sem-color-foreground-success)}[data-gene-ui-version=\"2.16.4\"] .pill_color_warning{color:var(--guit-sem-color-foreground-warning)}[data-gene-ui-version=\"2.16.4\"] .pill_color_purple{color:var(--guit-sem-color-foreground-accent-purple)}[data-gene-ui-version=\"2.16.4\"] .pill_color_lagoon{color:var(--guit-sem-color-foreground-accent-lagoon)}[data-gene-ui-version=\"2.16.4\"] .pill_color_magenta{color:var(--guit-sem-color-foreground-accent-magenta)}[data-gene-ui-version=\"2.16.4\"] .pill_color_slate{color:var(--guit-sem-color-foreground-accent-slate)}[data-gene-ui-version=\"2.16.4\"] .pill:not(.pill_fill).pill_color_inverse{color:var(--guit-sem-color-foreground-inverse)}[data-gene-ui-version=\"2.16.4\"] .pill__text{color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit}[data-gene-ui-version=\"2.16.4\"] .pill__icon{flex:0 0 auto}";
-styleInject(css_248z);
-
-const iconSizes = {
-    smallNudge: 16,
-    small: 20,
-    medium: 20
-};
-/**
- * A Pill component used to display concise information or categorize content. Often used for labels or status indicators, Pill components are visually distinct and can convey different meanings through text and color coding.
- */
-const Pill = ({ color = 'informative', size = 'medium', text, iconAlignment = 'before', isFill, withDot = true, Icon, className }) => {
-    const [isWithDot, setIsWithDot] = useState(withDot);
-    const textRef = useRef(null);
-    const isTruncated = useEllipsisDetection(textRef, [text]);
-    useEffect(() => {
-        setIsWithDot(!Icon && withDot);
-    }, [Icon, withDot]);
-    const iconMock = Icon ? (cloneElement(Icon, {
-        size: iconSizes[size],
-        className: 'pill__icon'
-    })) : isWithDot ? (React__default.createElement(SvgDot, { size: iconSizes[size], className: "pill__icon" })) : ('');
-    return (React__default.createElement("div", { className: classnames(`pill pill_size_${size} pill_color_${color}`, className, {
-            [`pill_icon_${isWithDot ? 'before' : iconAlignment}`]: text && iconMock,
-            pill_icon_only: !text,
-            pill_fill: isFill
-        }) },
-        iconMock,
-        text && (React__default.createElement(Tooltip, { text: text, isVisible: isTruncated },
-            React__default.createElement("span", { ref: textRef, className: "pill__text" }, text)))));
-};
-
-export { Pill as default };