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

An interface library for Playbooks.

import { jsx, jsxs } from "react/jsx-runtime";
import { c as computeTailwind, L as Label } from "./index.es-7ZX4yv7W.js";
import { BtnWrapper } from "./buttons.es.js";
import { useUI } from "./context.es.js";
import { Div, Span } from "./html.es.js";
import { FadIcon } from "./icons.es.js";
const SwitchGroup = ({
  name = "SwitchGroup",
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.switchGroup();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Div, { ...computed, children });
};
const Switch = ({
  name = "Switch",
  icon,
  checked,
  onClick,
  tailwind,
  className,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.switchBase();
  const classes = computeTailwind({ ...base, ...props, ...tailwind, className });
  return /* @__PURE__ */ jsxs(BtnWrapper, { name, alt: "switch", onClick: () => onClick(!checked), className: classes, children: [
    /* @__PURE__ */ jsx(Span, { className: "sr-only", children: "Use setting" }),
    /* @__PURE__ */ jsx(SwitchBackdrop, { checked }),
    /* @__PURE__ */ jsx(SwitchInner, { checked }),
    /* @__PURE__ */ jsx(SwitchToggle, { checked, icon })
  ] });
};
const SwitchBackdrop = ({
  name = "SwitchBackdrop",
  checked,
  tailwind,
  className,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.switchBackdrop();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Span, { "aria-hidden": "true", ...computed });
};
const SwitchInner = ({
  name = "SwitchInner",
  checked,
  tailwind,
  className,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.switchInner({ checked });
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Span, { "aria-hidden": "true", ...computed });
};
const SwitchToggle = ({
  name = "SwitchToggle",
  icon,
  checked,
  tailwind,
  className,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.switchToggle({ checked });
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Span, { "aria-hidden": "true", ...computed, children: icon && /* @__PURE__ */ jsx(Span, { className: "absolute w-full inset-0 flex-middle", children: /* @__PURE__ */ jsx(FadIcon, { icon, className: "" }) }) });
};
const SwitchLabel = ({
  id,
  name = "SwitchLabel",
  htmlFor,
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.switchLabel();
  const classes = computeTailwind({ ...base, ...props, ...tailwind, className });
  return /* @__PURE__ */ jsx(Label, { id, htmlFor, className: classes, children });
};
export {
  Switch,
  SwitchBackdrop,
  SwitchGroup,
  SwitchInner,
  SwitchLabel,
  SwitchToggle
};