@playbooks/ui/dist/tabs.es.js

An interface library for Playbooks.

import { jsx, jsxs } from "react/jsx-runtime";
import { Btn } from "./buttons.es.js";
import { useUI } from "./context.es.js";
import { FormSelect } from "./forms.es.js";
import { Div } from "./html.es.js";
const TabWrapper = ({ name = "TabWrapper", tailwind, className, children, ...props }) => {
  const context = useUI();
  const base = context?.theme?.tabWrapper();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Div, { ...computed, children });
};
const TabSelect = ({
  name = "TabSelect",
  activeTab,
  onSelect,
  tabs,
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.tabSelect();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(FormSelect, { value: activeTab, options: tabs, onChange: onSelect, ...computed });
};
const Tabs = ({
  name = "Tabs",
  activeTab,
  tabs,
  onSelect,
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.tabs();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsxs(TabWrapper, { children: [
    /* @__PURE__ */ jsx(TabSelect, { activeTab, tabs, onSelect: (e) => onSelect(e.target.value) }),
    /* @__PURE__ */ jsx(Div, { ...computed, children })
  ] });
};
const Tab = ({
  name = "Tab",
  alt = "select tab",
  variant = "accent",
  size = "p-4",
  active,
  value,
  onSelect,
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.tab({ active });
  const computed = { ...base, ...props, tailwind, alt, children, className, name };
  return /* @__PURE__ */ jsx(Btn, { variant, onClick: () => onSelect(value), ...computed });
};
const TabPanes = ({ name = "TabPanes", tailwind, className, children, ...props }) => {
  const context = useUI();
  const base = context?.theme?.tabPanes();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Div, { ...computed, children });
};
const TabPane = ({
  name = "TabPane",
  active,
  value,
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.tabPane({ active });
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Div, { ...computed, children });
};
export {
  Tab,
  TabPane,
  TabPanes,
  TabSelect,
  TabWrapper,
  Tabs
};