@magicbell/magicbell-react/dist/esm/components/Tabs/Tabs.js

React components for building a notification inbox for your app

import { jsx as _jsx } from "@emotion/react/jsx-runtime";
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import { Children } from 'react';
import { useTheme } from '../../context/MagicBellThemeContext.js';
import Text from '../Text/index.js';
function isTab(child) {
    return child != null && typeof child === 'object' && child['type'] === Tab;
}
function Tabs({ children, active, onChange, }) {
    const { tabs } = useTheme();
    const style = css `
    margin: ${tabs.margin} !important;

    & > * + * {
      margin-left: ${tabs.spacing} !important;
    }
  `;
    return (_jsx("div", { css: style, role: "tablist", children: Children.toArray(children)
            .filter(isTab)
            .map((child, idx) => ({
            ...child,
            props: {
                ...child.props,
                'data-selected': active ? child.props.value === active : idx === 0,
                onClick: () => onChange(child.props.value),
            },
        })) }));
}
function Tab({ children, value, ...props }) {
    const { tabs } = useTheme();
    // use [aria-selected] to increase specificity, we'll lose from header > button without it
    const style = css `
    &[aria-selected] {
      padding: 10px 8px 12px !important;
      font-weight: ${tabs.fontWeight} !important;
      line-height: 1.5 !important;
      font-size: ${tabs.fontSize} !important;
      color: ${tabs.color} !important;

      &[aria-selected='true'] {
        color: ${tabs.activeColor} !important;
        box-shadow: inset 0px -2px 0px ${tabs.activeColor};
      }
    }
  `;
    return (_jsx("button", { ...props, css: style, role: "tab", "aria-selected": Boolean(props['data-selected']), children: typeof children === 'string' ? _jsx(Text, { id: `tab.${value}`, defaultMessage: children }) : children }));
}
Tabs.Tab = Tab;
export default Tabs;
//# sourceMappingURL=Tabs.js.map