@furystack/shades-common-components
Version:
Common UI components for FuryStack Shades
114 lines • 4.96 kB
JavaScript
import { Shade, createComponent } from '@furystack/shades';
import { cssVariableTheme } from '../services/css-variable-theme.js';
export const Divider = Shade({
customElementName: 'shade-divider',
css: {
display: 'flex',
fontFamily: cssVariableTheme.typography.fontFamily,
alignItems: 'center',
margin: '0',
border: 'none',
flexShrink: '0',
// ==========================================
// HORIZONTAL (default)
// ==========================================
'&:not([data-orientation="vertical"])': {
width: '100%',
flexDirection: 'row',
},
// Horizontal line (no children)
'&:not([data-orientation="vertical"]):not([data-has-children])': {
borderTop: `1px solid ${cssVariableTheme.divider}`,
margin: `${cssVariableTheme.spacing.md} 0`,
},
// Horizontal with children: lines on both sides
'&:not([data-orientation="vertical"])[data-has-children]': {
margin: `${cssVariableTheme.spacing.md} 0`,
gap: cssVariableTheme.spacing.md,
},
'&:not([data-orientation="vertical"])[data-has-children]::before, &:not([data-orientation="vertical"])[data-has-children]::after': {
content: '""',
flex: '1',
borderTop: `1px solid ${cssVariableTheme.divider}`,
},
// Text align left: shrink left line
'&[data-text-align="left"]::before': {
flex: '0 0 10%',
},
// Text align right: shrink right line
'&[data-text-align="right"]::after': {
flex: '0 0 10%',
},
// Divider text styling
'& .divider-text': {
fontFamily: cssVariableTheme.typography.fontFamily,
fontSize: cssVariableTheme.typography.fontSize.sm,
color: cssVariableTheme.text.secondary,
whiteSpace: 'nowrap',
lineHeight: '1',
},
// ==========================================
// VERTICAL
// ==========================================
'&[data-orientation="vertical"]': {
flexDirection: 'column',
alignSelf: 'stretch',
height: 'auto',
width: 'auto',
},
// Vertical line (no children)
'&[data-orientation="vertical"]:not([data-has-children])': {
borderLeft: `1px solid ${cssVariableTheme.divider}`,
margin: `0 ${cssVariableTheme.spacing.md}`,
},
// Vertical with children
'&[data-orientation="vertical"][data-has-children]': {
margin: `0 ${cssVariableTheme.spacing.md}`,
gap: cssVariableTheme.spacing.sm,
},
'&[data-orientation="vertical"][data-has-children]::before, &[data-orientation="vertical"][data-has-children]::after': {
content: '""',
flex: '1',
borderLeft: `1px solid ${cssVariableTheme.divider}`,
},
// ==========================================
// VARIANT: INSET (indented on the start side)
// ==========================================
'&:not([data-orientation="vertical"])[data-variant="inset"]': {
marginLeft: cssVariableTheme.spacing.xl,
},
'&[data-orientation="vertical"][data-variant="inset"]': {
marginTop: cssVariableTheme.spacing.xl,
},
// ==========================================
// VARIANT: MIDDLE (indented on both sides)
// ==========================================
'&:not([data-orientation="vertical"])[data-variant="middle"]': {
marginLeft: cssVariableTheme.spacing.lg,
marginRight: cssVariableTheme.spacing.lg,
},
'&[data-orientation="vertical"][data-variant="middle"]': {
marginTop: cssVariableTheme.spacing.lg,
marginBottom: cssVariableTheme.spacing.lg,
},
},
render: ({ props, children, useHostProps }) => {
const { orientation, variant, textAlign, style } = props;
const isVertical = orientation === 'vertical';
const hasChildren = children && (Array.isArray(children) ? children.length > 0 : true);
useHostProps({
role: 'separator',
'data-orientation': isVertical ? 'vertical' : undefined,
'aria-orientation': isVertical ? 'vertical' : undefined,
'data-variant': variant && variant !== 'full' ? variant : undefined,
'data-has-children': hasChildren ? '' : undefined,
'data-text-align': textAlign && textAlign !== 'center' ? textAlign : undefined,
...(style ? { style: style } : {}),
});
if (hasChildren) {
return createComponent("span", { className: "divider-text" }, children);
}
return createComponent(createComponent, null);
},
});
//# sourceMappingURL=divider.js.map