@crossed/ui/lib/module/disclosure/Tabs/Panel.js

A universal & performant styling library for React Native, Next.js & React

import { jsx } from "react/jsx-runtime";
import { composeStyles, inlineStyle } from "@crossed/styled";
import { Card } from "../../display/Card";
const createPanel = (useTabsContext) => ({
  value: valueProps,
  style,
  ...props
}) => {
  const { value, id, variant } = useTabsContext();
  return valueProps === value ? /* @__PURE__ */ jsx(
    Card,
    {
      id: `${id}-panel-${valueProps}`,
      role: "tabpanel",
      "aria-labelledby": `${id}-tab-${valueProps}`,
      ...props,
      style: composeStyles(
        variant === "underline" && inlineStyle(() => ({
          base: {
            backgroundColor: "transparent",
            borderWidth: 0,
            paddingLeft: 0,
            paddingRight: 0,
            paddingTop: 0,
            paddingBottom: 0
          },
          media: {
            md: {
              paddingLeft: 0,
              paddingRight: 0,
              paddingTop: 0,
              paddingBottom: 0
            },
            xl: {
              paddingLeft: 0,
              paddingRight: 0,
              paddingTop: 0,
              paddingBottom: 0
            }
          }
        })),
        style
      )
    }
  ) : null;
};
export {
  createPanel
};
//# sourceMappingURL=Panel.js.map