@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.19 kB
JavaScript
import n from"react";import{styled as e,css as r,applyStandardOverrideStyles as t}from"@tidy-ui/commons";var 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 l,d,s,p,c,f,m,u,h,y,g,x,v,b,w,O=function(n){return n?700:300},j=e.hr(f||(f=o(["\n ","\n ","\n"],["\n ","\n ","\n"])),function(n){var e=n.theme,t=e.palette,a=e.isDark,i=n.align,f=n.length,m=n.tone,u=n.shade,h=n.density,y=n.variant,g=n.margin,x=n.isVertical;return r(c||(c=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[m][null!=u?u:O(a)],y,i,x?r(d||(d=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 "])),g,h,f&&r(l||(l=o(["\n height: ",";\n "],["\n height: ",";\n "])),f)):r(p||(p=o(["\n margin: "," 0 !important;\n border-width: 0px 0px ",";\n ","\n "],["\n margin: "," 0 !important;\n border-width: 0px 0px ",";\n ","\n "])),g,h,f&&r(s||(s=o(["\n width: ",";\n "],["\n width: ",";\n "])),f)))},t),E=e.div(u||(u=o(["\n ","\n ","\n"],["\n ","\n ","\n"])),function(n){var e=n.margin;return r(m||(m=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 "])),e)},t),N=e.hr(y||(y=o(["\n ","\n"],["\n ","\n"])),function(n){var e=n.theme,t=e.palette,a=e.isDark,i=n.tone,l=n.shade,d=n.density,s=n.variant;return r(h||(h=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!=l?l:O(a)],d,s)}),P=e.div(w||(w=o(["\n ","\n"],["\n ","\n"])),function(n){var e=n.justify;return r(b||(b=o(["\n ","\n ","\n "],["\n ","\n ","\n "])),"center"===e&&r(g||(g=o(["\n padding: 0 8px;\n "],["\n padding: 0 8px;\n "]))),"center"!==e&&r("start"===e?x||(x=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=n.forwardRef(function(e,r){var t=e.className,o=i(e,["className"]);return n.createElement(j,a({ref:r,className:t,role:"separator"},o))});D.defaultProps={density:"thin",isVertical:!1,margin:"0.5rem",tone:"neutral",variant:"solid"},D.displayName="Divider";var k=n.forwardRef(function(e,r){var t=e.children,o=e.className,l=e.justify,d=i(e,["children","className","justify"]),s=d.tone,p=d.shade,c=d.density,f=d.variant;return n.createElement(E,a({ref:r,className:o,role:"separator"},d),["center","end"].includes(l)&&n.createElement(N,a({role:"separator"},{density:c,shade:p,tone:s,variant:f})),t&&n.createElement(P,{role:"separator",justify:l},t),["center","start"].includes(l)&&n.createElement(N,a({role:"separator"},{density:c,shade:p,tone:s,variant:f})))});k.defaultProps={density:"thin",justify:"center",margin:"0.5rem",tone:"neutral",variant:"solid"},k.displayName="EnhancedDivider";export{D as Divider,k as DividerEnhanced};