@tidy-ui/divider
Version:
The Divider component elegantly separates components with horizontal or vertical dividers. It offers diverse densities, shades, and tones to match your design, along with various variants like solid and dashed. Customize lengths and alignments, and explor
2 lines (1 loc) • 4.46 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),a=function(){return a=Object.assign||function(n){for(var e,r=1,t=arguments.length;r<t;r++)for(var a in e=arguments[r])Object.prototype.hasOwnProperty.call(e,a)&&(n[a]=e[a]);return n},a.apply(this,arguments)};function i(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 a=0;for(t=Object.getOwnPropertySymbols(n);a<t.length;a++)e.indexOf(t[a])<0&&Object.prototype.propertyIsEnumerable.call(n,t[a])&&(r[t[a]]=n[t[a]])}return r}function o(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n}var s,l,d,c,p,f,u,y,m,h,x,g,v,b,w,O=function(n){return n?700:300},j=e.styled.hr(f||(f=o(["\n ","\n ","\n"],["\n ","\n ","\n"])),function(n){var r=n.theme,t=r.palette,a=r.isDark,i=n.align,f=n.length,u=n.tone,y=n.shade,m=n.density,h=n.variant,x=n.margin,g=n.isVertical;return e.css(p||(p=o(["\n border-color: ",";\n flex-shrink: 0;\n border-style: ",";\n align-self: ",";\n ","\n "],["\n border-color: ",";\n flex-shrink: 0;\n border-style: ",";\n align-self: ",";\n ","\n "])),t[u][null!=y?y:O(a)],h,i,g?e.css(l||(l=o(["\n margin: 0 "," !important;\n border-width: 0px "," 0px 0px;\n ","\n "],["\n margin: 0 "," !important;\n border-width: 0px "," 0px 0px;\n ","\n "])),x,m,f&&e.css(s||(s=o(["\n height: ",";\n "],["\n height: ",";\n "])),f)):e.css(c||(c=o(["\n margin: "," 0 !important;\n border-width: 0px 0px ",";\n ","\n "],["\n margin: "," 0 !important;\n border-width: 0px 0px ",";\n ","\n "])),x,m,f&&e.css(d||(d=o(["\n width: ",";\n "],["\n width: ",";\n "])),f)))},e.applyStandardOverrideStyles),P=e.styled.div(y||(y=o(["\n ","\n ","\n"],["\n ","\n ","\n"])),function(n){var r=n.margin;return e.css(u||(u=o(["\n display: flex;\n flex-direction: row;\n align-items: center;\n align-content: center;\n flex-wrap: nowrap;\n margin: "," 0 !important;\n "],["\n display: flex;\n flex-direction: row;\n align-items: center;\n align-content: center;\n flex-wrap: nowrap;\n margin: "," 0 !important;\n "])),r)},e.applyStandardOverrideStyles),E=e.styled.hr(h||(h=o(["\n ","\n"],["\n ","\n"])),function(n){var r=n.theme,t=r.palette,a=r.isDark,i=n.tone,s=n.shade,l=n.density,d=n.variant;return e.css(m||(m=o(["\n border-color: ",";\n border-width: 0px 0px ",";\n border-style: ",";\n flex-grow: 1;\n "],["\n border-color: ",";\n border-width: 0px 0px ",";\n border-style: ",";\n flex-grow: 1;\n "])),t[i][null!=s?s:O(a)],l,d)}),N=e.styled.div(w||(w=o(["\n ","\n"],["\n ","\n"])),function(n){var r=n.justify;return e.css(b||(b=o(["\n ","\n ","\n "],["\n ","\n ","\n "])),"center"===r&&e.css(x||(x=o(["\n padding: 0 8px;\n "],["\n padding: 0 8px;\n "]))),"center"!==r&&e.css("start"===r?g||(g=o(["\n padding: 0 8px 0 0;\n "],["\n padding: 0 8px 0 0;\n "])):v||(v=o(["\n padding: 0 0 0 8px;\n "],["\n padding: 0 0 0 8px;\n "]))))}),D=t.default.forwardRef(function(n,e){var r=n.className,o=i(n,["className"]);return t.default.createElement(j,a({ref:e,className:r,role:"separator"},o))});D.defaultProps={density:"thin",isVertical:!1,margin:"0.5rem",tone:"neutral",variant:"solid"},D.displayName="Divider";var S=t.default.forwardRef(function(n,e){var r=n.children,o=n.className,s=n.justify,l=i(n,["children","className","justify"]),d=l.tone,c=l.shade,p=l.density,f=l.variant;return t.default.createElement(P,a({ref:e,className:o,role:"separator"},l),["center","end"].includes(s)&&t.default.createElement(E,a({role:"separator"},{density:p,shade:c,tone:d,variant:f})),r&&t.default.createElement(N,{role:"separator",justify:s},r),["center","start"].includes(s)&&t.default.createElement(E,a({role:"separator"},{density:p,shade:c,tone:d,variant:f})))});S.defaultProps={density:"thin",justify:"center",margin:"0.5rem",tone:"neutral",variant:"solid"},S.displayName="EnhancedDivider",exports.Divider=D,exports.DividerEnhanced=S;