@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.68 kB
JavaScript
import n from"react";import{css as e,hsla as r,styled as o,applyStandardOverrideStyles as t}from"@tidy-ui/commons";var i=function(){return i=Object.assign||function(n){for(var e,r=1,o=arguments.length;r<o;r++)for(var t in e=arguments[r])Object.prototype.hasOwnProperty.call(e,t)&&(n[t]=e[t]);return n},i.apply(this,arguments)};function l(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n}var a,d,c,m,p,s,f,g,u,h,b,y,v,w,x,k,O,z,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"}},j=e(c||(c=l(["\n ","\n"],["\n ","\n"])),function(n){var o=n.theme,t=o.palette,i=o.isDark,c=n.isClickable,m=n.tone;return e(d||(d=l(["\n color: ",";\n background-color: ",";\n border: 1px solid ",";\n ","\n "],["\n color: ",";\n background-color: ",";\n border: 1px solid ",";\n ","\n "])),i?t[m][300]:t[m][800],i?r(t[m].shades[900],.3):r(t[m].shades[300],.2),i?t[m][600]:t[m][300],c&&e(a||(a=l(["\n &:hover {\n background-color: ",";\n }\n "],["\n &:hover {\n background-color: ",";\n }\n "])),i?r(t[m].shades[900],.6):t[m][200]))}),P=e(s||(s=l(["\n ","\n"],["\n ","\n"])),function(n){var r=n.theme.palette,o=n.isClickable,t=n.tone;return e(p||(p=l(["\n color: ",";\n background-color: ",";\n ","\n "],["\n color: ",";\n background-color: ",";\n ","\n "])),r[t][50],r[t][700],o&&e(m||(m=l(["\n &:hover {\n background-color: ",";\n }\n "],["\n &:hover {\n background-color: ",";\n }\n "])),r[t][800]))}),C=o.span(h||(h=l(["\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,o=r.isDark,t=r.palette,i=n.tone,a=n.isFilled;return e(u||(u=l(["\n ","\n "],["\n ","\n "])),a?e(f||(f=l(["\n color: ",";\n "],["\n color: ",";\n "])),t[i][400]):e(g||(g=l(["\n color: ",";\n "],["\n color: ",";\n "])),function(n,e,r){return n?e[r][700]:e[r][400]}(o,t,i)))}),F=o.div(z||(z=l(["\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,o=n.girth,t=n.isFilled,i=n.disabled,a=n.isClickable,d=n.placement;return e(O||(O=l(["\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[o].fontSize,"right"===d?"row-reverse":"row","right"===d&&e(b||(b=l(["\n padding-right: 0.3em;\n padding-left: 0.5em;\n "],["\n padding-right: 0.3em;\n padding-left: 0.5em;\n "]))),"left"===d&&e(y||(y=l(["\n padding-right: 0.5em;\n padding-left: 0.3em;\n "],["\n padding-right: 0.5em;\n padding-left: 0.3em;\n "]))),e(r?v||(v=l(["\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 "])):w||(w=l(["\n padding: 0.5em 0.8em;\n border-radius: 1.5em;\n "],["\n padding: 0.5em 0.8em;\n border-radius: 1.5em;\n "]))),i&&e(x||(x=l(["\n cursor: not-allowed;\n opacity: 0.5;\n "],["\n cursor: not-allowed;\n opacity: 0.5;\n "]))),!i&&a&&e(k||(k=l(["\n cursor: pointer;\n "],["\n cursor: pointer;\n "]))),t?P:j)},C,t),E=n.forwardRef(function(e,r){var o=e.children,t=e.ele,l=e.icon,a=function(n,e){var r={};for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&e.indexOf(o)<0&&(r[o]=n[o]);if(null!=n&&"function"==typeof Object.getOwnPropertySymbols){var t=0;for(o=Object.getOwnPropertySymbols(n);t<o.length;t++)e.indexOf(o[t])<0&&Object.prototype.propertyIsEnumerable.call(n,o[t])&&(r[o[t]]=n[o[t]])}return r}(e,["children","ele","icon"]),d=a.isFilled,c=a.tone;return n.createElement(F,i({ref:r,role:"status"},a,{icon:l}),l&&n.createElement(C,i({},{isFilled:d,tone:c}),l),t?n.cloneElement(t,{},o):o)});E.defaultProps={girth:"md",isClickable:!1,isFilled:!1,tone:"neutral"},E.displayName="Chip";export{E as Chip};