@blateral/b.kit 2.3.0-beta.1.2 → 2.3.0-beta.1.4

package/esm/Tag-72424779.js

@@ -0,0 +1,67 @@
+import { a as __makeTemplateObject, _ as __assign } from './ClockFilled-6bae80dc.js';
+import React__default from 'react';
+import styled, { css } from 'styled-components';
+import { c as copyStyle } from './Copy-fb124972.js';
+import { L as Link } from './Link-0a1e35d6.js';
+import { s as spacings, g as getColors } from './styles-f6c54818.js';
+
+var View = styled(Link).withConfig({
+  displayName: "Tag__View",
+  componentId: "sc-1mw8uhi-0"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: inline-block;\n    border: 1px solid\n        ", ";\n    border-radius: 8px;\n\n    padding: 1px ", "px;\n    max-height: 28px;\n    min-width: 60px;\n    user-select: none;\n\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    text-align: center;\n\n    text-decoration: none;\n\n    ", "\n\n    background: none;\n\n    && {\n        background-color: ", ";\n        color: ", ";\n\n        transition: background-color 0.2s ease-in-out, color 0.1s ease-in-out;\n    }\n\n    cursor: ", ";\n\n    ", "\n\n    &:focus {\n        /* background-color: ", ";\n        color: ", "; */\n        outline: 2px solid\n            ", ";\n        outline-offset: -1px;\n        text-decoration: underline;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n        text-decoration: none;\n    }\n"], ["\n    display: inline-block;\n    border: 1px solid\n        ", ";\n    border-radius: 8px;\n\n    padding: 1px ", "px;\n    max-height: 28px;\n    min-width: 60px;\n    user-select: none;\n\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    text-align: center;\n\n    text-decoration: none;\n\n    ", "\n\n    background: none;\n\n    && {\n        background-color: ", ";\n        color: ", ";\n\n        transition: background-color 0.2s ease-in-out, color 0.1s ease-in-out;\n    }\n\n    cursor: ", ";\n\n    ", "\n\n    &:focus {\n        /* background-color: ", ";\n        color: ", "; */\n        outline: 2px solid\n            ", ";\n        outline-offset: -1px;\n        text-decoration: underline;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n        text-decoration: none;\n    }\n"])), function (_a) {
+  var isInverted = _a.isInverted;
+  return isInverted ? '#dddddd' : '#444444';
+}, spacings.nudge, copyStyle('copy', 'small'), function (_a) {
+  var isActive = _a.isActive,
+      isInverted = _a.isInverted;
+  return isActive && (isInverted ? '#dddddd' : '#444444');
+}, function (_a) {
+  var isActive = _a.isActive,
+      isInverted = _a.isInverted;
+
+  if (isActive) {
+    return isInverted ? '#444444' : '#ffff';
+  } else {
+    return isInverted ? '#dddddd' : '#444444';
+  }
+}, function (_a) {
+  var isClickable = _a.isClickable;
+  return isClickable ? 'pointer' : 'default';
+}, function (_a) {
+  var isClickable = _a.isClickable,
+      isInverted = _a.isInverted;
+  return isClickable && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            @media (hover: hover) and (pointer: fine) {\n                &&:hover {\n                    background-color: ", ";\n                    color: ", ";\n                }\n            }\n        "], ["\n            @media (hover: hover) and (pointer: fine) {\n                &&:hover {\n                    background-color: ", ";\n                    color: ", ";\n                }\n            }\n        "])), isInverted ? '#dddddd' : '#444444', isInverted ? '#444444' : '#ffff');
+}, function (_a) {
+  var isInverted = _a.isInverted;
+  return isInverted ? '#dddddd' : '#444444';
+}, function (_a) {
+  var isInverted = _a.isInverted;
+  return isInverted ? '#444444' : '#ffff';
+}, function (_a) {
+  var isInverted = _a.isInverted,
+      theme = _a.theme;
+  return isInverted ? getColors(theme).primary.inverted : getColors(theme).primary.default;
+});
+
+var Tag = function (_a) {
+  var name = _a.name,
+      link = _a.link,
+      isInverted = _a.isInverted,
+      isActive = _a.isActive,
+      onClick = _a.onClick,
+      className = _a.className,
+      children = _a.children;
+  var tag = (link === null || link === void 0 ? void 0 : link.href) ? 'a' : onClick ? 'button' : 'span';
+  return React__default.createElement(View, __assign({
+    as: tag,
+    isInverted: isInverted,
+    isActive: isActive,
+    onClick: onClick,
+    isClickable: !!onClick || !!(link && link.href),
+    className: className
+  }, link), name || children);
+};
+var templateObject_1, templateObject_2;
+
+export { Tag as T };
+//# sourceMappingURL=Tag-72424779.js.map

package/esm/Tag-72424779.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag-72424779.js","sources":["../src/components/blocks/Tag.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { copyStyle } from 'components/typography/Copy';\nimport Link, { LinkProps } from 'components/typography/Link';\nimport { getColors, spacings } from 'utils/styles';\n\nconst View = styled(Link)<{\n    isInverted?: boolean;\n    isActive?: boolean;\n    isClickable?: boolean;\n}>`\n    display: inline-block;\n    border: 1px solid\n        ${({ isInverted }) => (isInverted ? '#dddddd' : '#444444')};\n    border-radius: 8px;\n\n    padding: 1px ${spacings.nudge}px;\n    max-height: 28px;\n    min-width: 60px;\n    user-select: none;\n\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    text-align: center;\n\n    text-decoration: none;\n\n    ${copyStyle('copy', 'small')}\n\n    background: none;\n\n    && {\n        background-color: ${({ isActive, isInverted }) =>\n            isActive && (isInverted ? '#dddddd' : '#444444')};\n        color: ${({ isActive, isInverted }) => {\n            if (isActive) {\n                return isInverted ? '#444444' : '#ffff';\n            } else {\n                return isInverted ? '#dddddd' : '#444444';\n            }\n        }};\n\n        transition: background-color 0.2s ease-in-out, color 0.1s ease-in-out;\n    }\n\n    cursor: ${({ isClickable }) => (isClickable ? 'pointer' : 'default')};\n\n    ${({ isClickable, isInverted }) =>\n        isClickable &&\n        css`\n            @media (hover: hover) and (pointer: fine) {\n                &&:hover {\n                    background-color: ${isInverted ? '#dddddd' : '#444444'};\n                    color: ${isInverted ? '#444444' : '#ffff'};\n                }\n            }\n        `}\n\n    &:focus {\n        /* background-color: ${({ isInverted }) =>\n            isInverted ? '#dddddd' : '#444444'};\n        color: ${({ isInverted }) => (isInverted ? '#444444' : '#ffff')}; */\n        outline: 2px solid\n            ${({ isInverted, theme }) =>\n                isInverted\n                    ? getColors(theme).primary.inverted\n                    : getColors(theme).primary.default};\n        outline-offset: -1px;\n        text-decoration: underline;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n        text-decoration: none;\n    }\n`;\n\nexport interface TagProps {\n    name?: string;\n    link?: LinkProps;\n}\n\nconst Tag: FC<\n    TagProps & {\n        /** Invert colors to use on dark background */\n        isInverted?: boolean;\n\n        /** Highlight tag if active */\n        isActive?: boolean;\n\n        /** Click callback */\n        onClick?: (ev?: React.SyntheticEvent<HTMLElement>) => void;\n        className?: string;\n        children?: React.ReactNode;\n    }\n> = ({ name, link, isInverted, isActive, onClick, className, children }) => {\n    const tag = link?.href ? 'a' : onClick ? 'button' : 'span';\n\n    return (\n        <View\n            as={tag}\n            isInverted={isInverted}\n            isActive={isActive}\n            onClick={onClick}\n            isClickable={!!onClick || !!(link && link.href)}\n            className={className}\n            {...link}\n        >\n            {name || children}\n        </View>\n    );\n};\n\nexport default Tag;\n"],"names":["View","styled","Link","templateObject_2","__makeTemplateObject","_a","isInverted","spacings","nudge","copyStyle","isActive","isClickable","css","templateObject_1","theme","getColors","primary","inverted","default","Tag","name","link","onClick","className","children","tag","href","React","__assign","as"],"mappings":"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"}