@tidy-ui/border
Version:
The Border component is a versatile tool to enclose components or groups. It supports content qualification like text or Chips and can be positioned in all directions. Create borders with customizable densities and sharp edges. Infuse borders with colors
2 lines (1 loc) • 6.42 kB
JavaScript
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var n=require("react"),t=require("@tidy-ui/commons");function r(n){return n&&n.__esModule?n:{default:n}}var e=/*#__PURE__*/r(n),a=function(){return a=Object.assign||function(n){for(var t,r=1,e=arguments.length;r<e;r++)for(var a in t=arguments[r])Object.prototype.hasOwnProperty.call(t,a)&&(n[a]=t[a]);return n},a.apply(this,arguments)};function o(n,t){return Object.defineProperty?Object.defineProperty(n,"raw",{value:t}):n.raw=t,n}var s,l,c,i,p,f,u,d,g,m,b,v,x,h,y,O,j,w,P,S,k,E,_,q,B,M,D,I,N,R,z,A=t.css(l||(l=o(["\n ","\n"],["\n ","\n"])),function(n){var r=n.align;return t.css(s||(s=o(["\n top: 0;\n left: 0;\n transform: translate(50%, calc(-","px));\n "],["\n top: 0;\n left: 0;\n transform: translate(50%, calc(-","px));\n "])),r)}),C=t.css(i||(i=o(["\n ","\n"],["\n ","\n"])),function(n){var r=n.align;return t.css(c||(c=o(["\n top: 0;\n left: 50%;\n transform: translate(-50%, calc(-","px));\n "],["\n top: 0;\n left: 50%;\n transform: translate(-50%, calc(-","px));\n "])),r)}),F=t.css(f||(f=o(["\n ","\n"],["\n ","\n"])),function(n){var r=n.align;return t.css(p||(p=o(["\n top: 0;\n right: 0;\n transform: translate(-50%, calc(-","px));\n "],["\n top: 0;\n right: 0;\n transform: translate(-50%, calc(-","px));\n "])),r)}),G=t.css(d||(d=o(["\n ","\n"],["\n ","\n"])),function(n){var r=n.align;return t.css(u||(u=o(["\n right: 0;\n top: 0;\n transform: rotate(90deg) translate(50%, calc(-50% - ","px));\n "],["\n right: 0;\n top: 0;\n transform: rotate(90deg) translate(50%, calc(-50% - ","px));\n "])),r)}),H=t.css(m||(m=o(["\n ","\n"],["\n ","\n"])),function(n){var r=n.align;return t.css(g||(g=o(["\n right: 0;\n top: 50%;\n transform: rotate(90deg) translate(-25%, calc(-50% - ","px));\n "],["\n right: 0;\n top: 50%;\n transform: rotate(90deg) translate(-25%, calc(-50% - ","px));\n "])),r)}),J=t.css(v||(v=o(["\n ","\n"],["\n ","\n"])),function(n){var r=n.align;return t.css(b||(b=o(["\n right: 0;\n bottom: 0;\n transform: rotate(90deg) translate(-50%, calc(-50% - ","px));\n "],["\n right: 0;\n bottom: 0;\n transform: rotate(90deg) translate(-50%, calc(-50% - ","px));\n "])),r)}),K=t.css(h||(h=o(["\n ","\n"],["\n ","\n"])),function(n){var r=n.align;return t.css(x||(x=o(["\n left: 0;\n bottom: 0;\n transform: translate(50%, calc(","px));\n "],["\n left: 0;\n bottom: 0;\n transform: translate(50%, calc(","px));\n "])),r)}),L=t.css(O||(O=o(["\n ","\n"],["\n ","\n"])),function(n){var r=n.align;return t.css(y||(y=o(["\n left: 50%;\n bottom: 0;\n transform: translate(-50%, calc(","px));\n "],["\n left: 50%;\n bottom: 0;\n transform: translate(-50%, calc(","px));\n "])),r)}),Q=t.css(w||(w=o(["\n ","\n"],["\n ","\n"])),function(n){var r=n.align;return t.css(j||(j=o(["\n right: 0;\n bottom: 0;\n transform: translate(-50%, calc(","px));\n "],["\n right: 0;\n bottom: 0;\n transform: translate(-50%, calc(","px));\n "])),r)}),T=t.css(S||(S=o(["\n ","\n"],["\n ","\n"])),function(n){var r=n.align;return t.css(P||(P=o(["\n left: 0;\n top: 0;\n transform: rotate(270deg) translate(-50%, calc(-50% - ","px));\n "],["\n left: 0;\n top: 0;\n transform: rotate(270deg) translate(-50%, calc(-50% - ","px));\n "])),r)}),U=t.css(E||(E=o(["\n ","\n"],["\n ","\n"])),function(n){var r=n.align;return t.css(k||(k=o(["\n left: 0;\n top: 50%;\n transform: rotate(270deg) translate(25%, calc(-50% - ","px));\n "],["\n left: 0;\n top: 50%;\n transform: rotate(270deg) translate(25%, calc(-50% - ","px));\n "])),r)}),V=t.css(q||(q=o(["\n ","\n"],["\n ","\n"])),function(n){var r=n.align;return t.css(_||(_=o(["\n left: 0;\n bottom: 0;\n transform: rotate(270deg) translate(50%, calc(-50% - ","px));\n "],["\n left: 0;\n bottom: 0;\n transform: rotate(270deg) translate(50%, calc(-50% - ","px));\n "])),r)}),W=t.css(M||(M=o(["\n ","\n"],["\n ","\n"])),function(n){var r=n.theme,e=r.isDark,a=r.palette,s=n.tone;return t.css(B||(B=o(["\n border-color: ",";\n "],["\n border-color: ",";\n "])),e?a[s][700]:a[s][400])}),X=t.styled.div(I||(I=o(["\n position: absolute;\n padding: 4px;\n ","\n"],["\n position: absolute;\n padding: 4px;\n ","\n"])),function(n){var r=n.theme.palette,e=n.positioning;return t.css(D||(D=o(["\n background-color: ",";\n ","\n ","\n ","\n\n ","\n ","\n ","\n\n ","\n ","\n ","\n\n ","\n ","\n ","\n "],["\n background-color: ",";\n ","\n ","\n ","\n\n ","\n ","\n ","\n\n ","\n ","\n ","\n\n ","\n ","\n ","\n "])),r.background.default,"top-left"===e&&A,"top-center"===e&&C,"top-right"===e&&F,"right-top"===e&&G,"right-center"===e&&H,"right-bottom"===e&&J,"bottom-left"===e&&K,"bottom-center"===e&&L,"bottom-right"===e&&Q,"left-top"===e&&T,"left-center"===e&&U,"left-bottom"===e&&V)}),Y=t.styled.div(z||(z=o(["\n position: relative;\n ","\n ","\n"],["\n position: relative;\n ","\n ","\n"])),function(n){var r=n.theme,e=r.palette,a=r.layout,s=n.variant,l=n.density,c=n.tone,i=n.shade,p=n.isSharp;return t.css(R||(R=o(["\n border-style: ",";\n border-width: ",";\n\n border-radius: ",";\n ","\n "],["\n border-style: ",";\n border-width: ",";\n\n border-radius: ",";\n ","\n "])),s,l,p?"0":a.radius,i?t.css(N||(N=o(["\n border-color: ",";\n "],["\n border-color: ",";\n "])),e[c][i]):W)},t.applyStandardOverrideStyles),Z=e.default.forwardRef(function(n,t){var r=n.children,o=n.ele,s=n.content,l=function(n,t){var r={};for(var e in n)Object.prototype.hasOwnProperty.call(n,e)&&t.indexOf(e)<0&&(r[e]=n[e]);if(null!=n&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(e=Object.getOwnPropertySymbols(n);a<e.length;a++)t.indexOf(e[a])<0&&Object.prototype.propertyIsEnumerable.call(n,e[a])&&(r[e[a]]=n[e[a]])}return r}(n,["children","ele","content"]),c=l.align,i=l.positioning;return e.default.createElement(Y,a({ref:t,role:"presentation"},l),s&&e.default.createElement(X,a({},{align:c,positioning:i}),s),o?e.default.cloneElement(o,{},r):r)});Z.defaultProps={density:"1px",isSharp:!1,padding:"1rem",positioning:"top-left",tone:"neutral",variant:"solid"},Z.displayName="Border",exports.Border=Z;