fui-fancyui
Version:
FancyUI Libary
54 lines (52 loc) • 1.6 kB
JavaScript
import { styled as o, css as i } from "styled-components";
import { spacingPx as c } from "../../../design/theme/designSizes.js";
import { generateBlob as l } from "./utils/generateBlob.js";
import { generateRightLine as u, generateLeftLine as m, generateTopline as f, generateUnderline as p } from "./utils/generateLines.js";
const g = (t) => {
const { $itemNumber: e, $tabSpacing: n, $direction: s } = t, r = e * 100 + "%", a = n ? e * parseFloat(c[n]) : 0;
return e ? i`
${s === "vertical" ? i`
transform: translateY(calc(${r} + ${a + "px"}));
` : i`
transform: translateX(calc(${r} + ${a + "px"}));
`}
` : i`
transform: translateX(0);
`;
}, x = o.span`
position: absolute;
width: ${({ $indicatorWidth: t }) => t ?? "100%"}; /* Set the width of the active indicator */
/* Build a switch case */
${(t) => {
switch (t.$type) {
case "underline":
return p({ ...t });
case "topline":
return f({ ...t });
case "leftline":
return m({ ...t });
case "rightline":
return u({ ...t });
case "bolb":
default:
return l({ ...t });
}
}}
`, P = o.i`
top: 0;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
cursor: pointer;
transition: transform 0.2s ease;
${({ $itemNumber: t, $tabSpacing: e, $direction: n }) => g({ $itemNumber: t, $tabSpacing: e, $direction: n })}
${({ $externalStyle: t }) => t}
`;
export {
x as ActiveSwitchIndicator,
P as Wrapper
};