welcome-ui/dist/RadioTab.mjs

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

"use client";
import { j as d } from "./jsx-runtime-Bqq1Hxg9.mjs";
import { Button as f } from "./Button.mjs";
import { shouldForwardProp as u, forwardRef as b } from "./System.mjs";
import s, { th as i, css as e } from "@xstyled/styled-components";
import { d as h } from "./field-styles-CfVLcVQp.mjs";
import { o as g } from "./overflow-ellipsis-DGV5Kgt-.mjs";
import { R as c } from "./NLEBE274-CnAMhwcR.mjs";
const y = s(c).withConfig({ shouldForwardProp: u })`
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
`, $ = e`
  margin-top: -${i.borderWidth("sm")};

  &:first-of-type {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }

  &:last-of-type {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
  }
`, x = e`
  margin-left: -${i.borderWidth("sm")};

  &:first-of-type {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  &:last-of-type {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
`;
s.labelBox(
  ({ checked: o, flexDirection: t, size: r, variant: a }) => e`
    ${i("radioTabs.default")};
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: ${i(`defaultFields.sizes.${r}.height`)};
    max-width: 100%;
    margin: 0;
    text-align: center;
    position: relative;
    cursor: pointer;
    transition: medium;

    ${h({ size: r, variant: a })};
    ${o && e`
      ${i("radioTabs.checked")};
      z-index: 2;
    `};
    ${t === "column" && $};
    ${t === "row" && x};
    padding-top: 0;
    padding-bottom: 0;
  `
);
s.div`
  flex-shrink: 0;
  position: relative;
`;
s.div`
  ${g};
  max-width: 100%;
`;
const w = b(
  ({ checked: o, dataTestId: t, disabled: r, id: a, label: l, onChange: m, value: n }, p) => /* @__PURE__ */ d.jsxs(
    f,
    {
      as: "label",
      borderColor: !o && "neutral-30",
      className: "label",
      dataTestId: t,
      disabled: r,
      ref: p,
      variant: o ? "primary" : "ghost",
      children: [
        /* @__PURE__ */ d.jsx(
          y,
          {
            checked: o,
            "data-testid": t ? `${t}-input` : void 0,
            disabled: r,
            id: a,
            onChange: m,
            value: n
          }
        ),
        l
      ]
    }
  )
);
w.displayName = "RadioTab";
export {
  w as RadioTab
};