@playbooks/ui/dist/tabs.cjs

An interface library for Playbooks.

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const require$$0 = require("react/jsx-runtime");
const html = require("./toast-context-kVz4KXNu.cjs");
const forms = require("./forms.cjs");
const TabWrapper = ({ name = "TabWrapper", tailwind, className, children, ...props }) => {
  const { theme } = html.useInterface();
  const base = theme.tabWrapper();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ require$$0.jsx(html.Div, { ...computed, children });
};
const TabSelect = ({
  name = "TabSelect",
  activeTab,
  onSelect,
  tabs,
  tailwind,
  className,
  children,
  ...props
}) => {
  const { theme } = html.useInterface();
  const base = theme.tabSelect();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ require$$0.jsx(forms.FormSelect, { value: activeTab, options: tabs, onChange: onSelect, ...computed });
};
const Tabs = ({
  name = "Tabs",
  activeTab,
  tabs,
  onSelect,
  tailwind,
  className,
  children,
  ...props
}) => {
  const { theme } = html.useInterface();
  const base = theme.tabs();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ require$$0.jsxs(TabWrapper, { children: [
    /* @__PURE__ */ require$$0.jsx(TabSelect, { activeTab, tabs, onSelect: (e) => onSelect(e.target.value) }),
    /* @__PURE__ */ require$$0.jsx(html.Div, { ...computed, children })
  ] });
};
const Tab = ({
  name = "Tab",
  alt = "select tab",
  variant = "accent",
  size = "p-4",
  active,
  value,
  onSelect,
  tailwind,
  className,
  children,
  ...props
}) => {
  const { theme } = html.useInterface();
  const base = theme.tab({ active });
  const computed = { ...base, ...props, tailwind, alt, children, className, name };
  return /* @__PURE__ */ require$$0.jsx(html.Btn, { variant, onClick: () => onSelect(value), ...computed });
};
const TabPanes = ({ name = "TabPanes", tailwind, className, children, ...props }) => {
  const { theme } = html.useInterface();
  const base = theme.tabPanes();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ require$$0.jsx(html.Div, { ...computed, children });
};
const TabPane = ({
  name = "TabPane",
  active,
  value,
  tailwind,
  className,
  children,
  ...props
}) => {
  const { theme } = html.useInterface();
  const base = theme.tabPane({ active });
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ require$$0.jsx(html.Div, { ...computed, children });
};
exports.Tab = Tab;
exports.TabPane = TabPane;
exports.TabPanes = TabPanes;
exports.TabSelect = TabSelect;
exports.TabWrapper = TabWrapper;
exports.Tabs = Tabs;