welcome-ui/dist/Toggle.mjs

Customizable design system with react • styled-components • styled-system and ariakit.

"use client";
import { j as s } from "./jsx-runtime-Bqq1Hxg9.mjs";
import { C as f, a as $ } from "./index-D10ydFFH.mjs";
import { shouldForwardProp as g, forwardRef as c } from "./System.mjs";
import r, { th as t, system as h, css as i } from "@xstyled/styled-components";
const u = r(f).withConfig({ shouldForwardProp: g })(
  ({ order: e = "-1", size: o }) => i`
    ${t("toggles.item.default")};
    ${t(`toggles.item.sizes.${o}`)};
    position: relative;
    display: block;
    appearance: none;
    outline: none !important; /* important for firefox */
    cursor: pointer;
    transition: medium;
    order: ${e};

    &::after {
      ${t("toggles.after.default")};
      ${t(`toggles.after.sizes.${o}`)};
      content: '';
      top: 0;
      bottom: 0;
      left: 2;
      position: absolute;
      margin: auto;
      transition: medium;
      z-index: 1;
    }

    &:disabled {
      ${t("toggles.item.disabled")};
      cursor: not-allowed;

      &::after {
        ${t("toggles.after.disabled")};
      }
    }

    &:checked {
      &::after {
        /* border + left padding + right padding */
        transform: translateX(calc(${t(`toggles.item.sizes.${o}.width`)} - 100% - 0.3rem));
      }

      &:not(:disabled) {
        ${t("toggles.item.checked")};

        &::after {
          ${t("toggles.after.checked")};
        }
      }
    }

    ${h};
  `
), x = r.divBox`
  position: relative;
  display: inline-block;
  cursor: pointer;
  flex-shrink: 0;
`, b = r.divBox.withConfig({ shouldForwardProp: g })(
  ({ checked: e, size: o }) => i`
    position: absolute;
    z-index: 1;
    display: flex;
    align-items: center;
    height: ${t(`toggles.item.sizes.${o}.height`)};
    bottom: 0;

    > svg,
    i {
      ${t(`toggles.icon.sizes.${o}`)}
    }

    ${e && i`
      left: ${t(`toggles.icon.position.${o}.left`)};
      color: neutral-90;
    `}

    ${!e && i`
      right: ${t(`toggles.icon.position.${o}.right`)};
    `}
  `
), w = c(
  ({ checked: e, checkedIcon: o, onClick: l, size: n = "xs", uncheckedIcon: a, ...d }, p) => {
    const m = o && a;
    return /* @__PURE__ */ s.jsxs(x, { onClick: l, children: [
      m ? /* @__PURE__ */ s.jsx(b, { checked: e, onClick: l, size: n, children: e ? o : a }) : null,
      /* @__PURE__ */ s.jsx($, { ...d, checked: e, Component: u, ref: p, size: n })
    ] });
  }
);
w.displayName = "Toggle";
export {
  w as Toggle
};