@tidy-ui/chip
Version:
Introducing the versatile Chip, your info companion! It's like a badge, displaying extra details. Choose sizes, tones, filled or outlined styles, and icon placement. Make it clickable for user actions. Chip is enhanced by theming and styling, ready to ele
2 lines (1 loc) • 4.9 kB
JavaScript
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var n=require("react"),e=require("@tidy-ui/commons");function r(n){return n&&n.__esModule?n:{default:n}}var t=/*#__PURE__*/r(n),o=function(){return o=Object.assign||function(n){for(var e,r=1,t=arguments.length;r<t;r++)for(var o in e=arguments[r])Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o]);return n},o.apply(this,arguments)};function i(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n}var l,a,c,d,s,p,u,m,f,g,h,b,y,v,x,O,w,k,S={lg:{fontSize:"1.125rem"},md:{fontSize:"0.875rem"},sm:{fontSize:"0.75rem"},xl:{fontSize:"1.5rem"},xs:{fontSize:"0.625rem"},xxl:{fontSize:"2rem"},xxs:{fontSize:"0.5rem"}},z=e.css(c||(c=i(["\n ","\n"],["\n ","\n"])),function(n){var r=n.theme,t=r.palette,o=r.isDark,c=n.isClickable,d=n.tone;return e.css(a||(a=i(["\n color: ",";\n background-color: ",";\n border: 1px solid ",";\n ","\n "],["\n color: ",";\n background-color: ",";\n border: 1px solid ",";\n ","\n "])),o?t[d][300]:t[d][800],o?e.hsla(t[d].shades[900],.3):e.hsla(t[d].shades[300],.2),o?t[d][600]:t[d][300],c&&e.css(l||(l=i(["\n &:hover {\n background-color: ",";\n }\n "],["\n &:hover {\n background-color: ",";\n }\n "])),o?e.hsla(t[d].shades[900],.6):t[d][200]))}),j=e.css(p||(p=i(["\n ","\n"],["\n ","\n"])),function(n){var r=n.theme.palette,t=n.isClickable,o=n.tone;return e.css(s||(s=i(["\n color: ",";\n background-color: ",";\n ","\n "],["\n color: ",";\n background-color: ",";\n ","\n "])),r[o][50],r[o][700],t&&e.css(d||(d=i(["\n &:hover {\n background-color: ",";\n }\n "],["\n &:hover {\n background-color: ",";\n }\n "])),r[o][800]))}),P=e.styled.span(g||(g=i(["\n height: 1.5em;\n width: 1.5em;\n opacity: 0.8;\n ","\n"],["\n height: 1.5em;\n width: 1.5em;\n opacity: 0.8;\n ","\n"])),function(n){var r=n.theme,t=r.isDark,o=r.palette,l=n.tone,a=n.isFilled;return e.css(f||(f=i(["\n ","\n "],["\n ","\n "])),a?e.css(u||(u=i(["\n color: ",";\n "],["\n color: ",";\n "])),o[l][400]):e.css(m||(m=i(["\n color: ",";\n "],["\n color: ",";\n "])),function(n,e,r){return n?e[r][700]:e[r][400]}(t,o,l)))}),C=e.styled.div(k||(k=i(["\n display: flex;\n align-items: center;\n gap: 0.2em;\n line-height: 1em;\n user-select: none;\n vertical-align: middle;\n width: fit-content;\n ","\n &:hover "," {\n opacity: 1;\n }\n ","\n"],["\n display: flex;\n align-items: center;\n gap: 0.2em;\n line-height: 1em;\n user-select: none;\n vertical-align: middle;\n width: fit-content;\n ","\n &:hover "," {\n opacity: 1;\n }\n ","\n"])),function(n){var r=n.icon,t=n.girth,o=n.isFilled,l=n.disabled,a=n.isClickable,c=n.placement;return e.css(w||(w=i(["\n font-size: ",";\n flex-direction: ",";\n ","\n ","\n ","\n ","\n ","\n ","\n "],["\n font-size: ",";\n flex-direction: ",";\n ","\n ","\n ","\n ","\n ","\n ","\n "])),S[t].fontSize,"right"===c?"row-reverse":"row","right"===c&&e.css(h||(h=i(["\n padding-right: 0.3em;\n padding-left: 0.5em;\n "],["\n padding-right: 0.3em;\n padding-left: 0.5em;\n "]))),"left"===c&&e.css(b||(b=i(["\n padding-right: 0.5em;\n padding-left: 0.3em;\n "],["\n padding-right: 0.5em;\n padding-left: 0.3em;\n "]))),e.css(r?y||(y=i(["\n padding-top: 0.3em;\n padding-bottom: 0.3em;\n border-radius: 1.5em;\n "],["\n padding-top: 0.3em;\n padding-bottom: 0.3em;\n border-radius: 1.5em;\n "])):v||(v=i(["\n padding: 0.5em 0.8em;\n border-radius: 1.5em;\n "],["\n padding: 0.5em 0.8em;\n border-radius: 1.5em;\n "]))),l&&e.css(x||(x=i(["\n cursor: not-allowed;\n opacity: 0.5;\n "],["\n cursor: not-allowed;\n opacity: 0.5;\n "]))),!l&&a&&e.css(O||(O=i(["\n cursor: pointer;\n "],["\n cursor: pointer;\n "]))),o?j:z)},P,e.applyStandardOverrideStyles),F=t.default.forwardRef(function(n,e){var r=n.children,i=n.ele,l=n.icon,a=function(n,e){var r={};for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&e.indexOf(t)<0&&(r[t]=n[t]);if(null!=n&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(t=Object.getOwnPropertySymbols(n);o<t.length;o++)e.indexOf(t[o])<0&&Object.prototype.propertyIsEnumerable.call(n,t[o])&&(r[t[o]]=n[t[o]])}return r}(n,["children","ele","icon"]),c=a.isFilled,d=a.tone;return t.default.createElement(C,o({ref:e,role:"status"},a,{icon:l}),l&&t.default.createElement(P,o({},{isFilled:c,tone:d}),l),i?t.default.cloneElement(i,{},r):r)});F.defaultProps={girth:"md",isClickable:!1,isFilled:!1,tone:"neutral"},F.displayName="Chip",exports.Chip=F;