@playbooks/ui/dist/switches.cjs

An interface library for Playbooks.

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const require$$0 = require("react/jsx-runtime");
const transforms = require("./transforms-Ca9m4pGF.cjs");
const html = require("./toast-context-kVz4KXNu.cjs");
const SwitchGroup = ({
  name = "SwitchGroup",
  tailwind,
  className,
  children,
  ...props
}) => {
  const { theme } = html.useInterface();
  const base = theme.switchGroup();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ require$$0.jsx(html.Div, { ...computed, children });
};
const Switch = ({
  name = "Switch",
  icon,
  checked,
  onClick,
  tailwind,
  className,
  ...props
}) => {
  const { theme } = html.useInterface();
  const base = theme.switchBase();
  const classes = transforms.computeTailwind({ ...base, ...props, ...tailwind, className });
  return /* @__PURE__ */ require$$0.jsxs(html.BtnWrapper, { name, alt: "switch", onClick: () => onClick(!checked), className: classes, children: [
    /* @__PURE__ */ require$$0.jsx(html.Span, { className: "sr-only", children: "Use setting" }),
    /* @__PURE__ */ require$$0.jsx(SwitchBackdrop, { checked }),
    /* @__PURE__ */ require$$0.jsx(SwitchInner, { checked }),
    /* @__PURE__ */ require$$0.jsx(SwitchToggle, { checked, icon })
  ] });
};
const SwitchBackdrop = ({
  name = "SwitchBackdrop",
  checked,
  tailwind,
  className,
  ...props
}) => {
  const { theme } = html.useInterface();
  const base = theme.switchBackdrop();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ require$$0.jsx(html.Span, { "aria-hidden": "true", ...computed });
};
const SwitchInner = ({
  name = "SwitchInner",
  checked,
  tailwind,
  className,
  ...props
}) => {
  const { theme } = html.useInterface();
  const base = theme.switchInner({ checked });
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ require$$0.jsx(html.Span, { "aria-hidden": "true", ...computed });
};
const SwitchToggle = ({
  name = "SwitchToggle",
  icon,
  checked,
  tailwind,
  className,
  ...props
}) => {
  const { theme } = html.useInterface();
  const base = theme.switchToggle({ checked });
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ require$$0.jsx(html.Span, { "aria-hidden": "true", ...computed, children: icon && /* @__PURE__ */ require$$0.jsx(html.Span, { className: "absolute w-full inset-0 flex-middle", children: /* @__PURE__ */ require$$0.jsx(html.FadIcon, { icon, className: "" }) }) });
};
const SwitchLabel = ({
  id,
  name = "SwitchLabel",
  htmlFor,
  tailwind,
  className,
  children,
  ...props
}) => {
  const { theme } = html.useInterface();
  const base = theme.switchLabel();
  const classes = transforms.computeTailwind({ ...base, ...props, ...tailwind, className });
  return /* @__PURE__ */ require$$0.jsx(transforms.Label, { id, htmlFor, className: classes, children });
};
exports.Switch = Switch;
exports.SwitchBackdrop = SwitchBackdrop;
exports.SwitchGroup = SwitchGroup;
exports.SwitchInner = SwitchInner;
exports.SwitchLabel = SwitchLabel;
exports.SwitchToggle = SwitchToggle;