@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,
            padding: 0
          },
          media: { md: { padding: 0 }, xl: { padding: 0 } }
        })),
        style
      )
    }
  ) : null;
};
export {
  createPanel
};
//# sourceMappingURL=Panel.js.map