@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.14 kB
JavaScript
import n from"react";import{css as t,styled as r,applyStandardOverrideStyles as e}from"@tidy-ui/commons";var 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 l,i,c,p,f,s,u,g,m,d,b,h,v,x,y,O,w,j,P,k,E,S,B,D,I,N,R,q,z,A,C,F=t(i||(i=o(["\n ","\n"],["\n ","\n"])),function(n){var r=n.align;return t(l||(l=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)}),G=t(p||(p=o(["\n ","\n"],["\n ","\n"])),function(n){var r=n.align;return t(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)}),H=t(s||(s=o(["\n ","\n"],["\n ","\n"])),function(n){var r=n.align;return t(f||(f=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)}),J=t(g||(g=o(["\n ","\n"],["\n ","\n"])),function(n){var r=n.align;return t(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)}),K=t(d||(d=o(["\n ","\n"],["\n ","\n"])),function(n){var r=n.align;return t(m||(m=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)}),L=t(h||(h=o(["\n ","\n"],["\n ","\n"])),function(n){var r=n.align;return t(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)}),M=t(x||(x=o(["\n ","\n"],["\n ","\n"])),function(n){var r=n.align;return t(v||(v=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)}),Q=t(O||(O=o(["\n ","\n"],["\n ","\n"])),function(n){var r=n.align;return t(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)}),T=t(j||(j=o(["\n ","\n"],["\n ","\n"])),function(n){var r=n.align;return t(w||(w=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)}),U=t(k||(k=o(["\n ","\n"],["\n ","\n"])),function(n){var r=n.align;return t(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)}),V=t(S||(S=o(["\n ","\n"],["\n ","\n"])),function(n){var r=n.align;return t(E||(E=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)}),W=t(D||(D=o(["\n ","\n"],["\n ","\n"])),function(n){var r=n.align;return t(B||(B=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)}),X=t(N||(N=o(["\n ","\n"],["\n ","\n"])),function(n){var r=n.theme,e=r.isDark,a=r.palette,l=n.tone;return t(I||(I=o(["\n border-color: ",";\n "],["\n border-color: ",";\n "])),e?a[l][700]:a[l][400])}),Y=r.div(q||(q=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(R||(R=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&&F,"top-center"===e&&G,"top-right"===e&&H,"right-top"===e&&J,"right-center"===e&&K,"right-bottom"===e&&L,"bottom-left"===e&&M,"bottom-center"===e&&Q,"bottom-right"===e&&T,"left-top"===e&&U,"left-center"===e&&V,"left-bottom"===e&&W)}),Z=r.div(C||(C=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,l=n.variant,i=n.density,c=n.tone,p=n.shade,f=n.isSharp;return t(A||(A=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 "])),l,i,f?"0":a.radius,p?t(z||(z=o(["\n border-color: ",";\n "],["\n border-color: ",";\n "])),e[c][p]):X)},e),$=n.forwardRef(function(t,r){var e=t.children,o=t.ele,l=t.content,i=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}(t,["children","ele","content"]),c=i.align,p=i.positioning;return n.createElement(Z,a({ref:r,role:"presentation"},i),l&&n.createElement(Y,a({},{align:c,positioning:p}),l),o?n.cloneElement(o,{},e):e)});$.defaultProps={density:"1px",isSharp:!1,padding:"1rem",positioning:"top-left",tone:"neutral",variant:"solid"},$.displayName="Border";export{$ as Border};