cherry-styled-components/dist/toggle.js

Cherry is a design system for the modern web. Designed in Figma, built in React using Typescript.

"use client";
"use client";
import { resetButton, statusBorderStyles } from "./utils/mixins.js";
import { StyledInputWrapper, StyledLabel } from "./input.js";
import { jsx, jsxs } from "react/jsx-runtime";
import { forwardRef } from "react";
import styled from "styled-components";
//#region src/lib/toggle.tsx
var StyledToggleWrapper = styled.span.withConfig({
	displayName: "toggle__StyledToggleWrapper",
	componentId: "sc-279a0aa6-0"
})([`display:inline-block;margin:auto 0;position:relative;vertical-align:middle;`]);
var StyledFakeToggle = styled.span.withConfig({
	displayName: "toggle__StyledFakeToggle",
	componentId: "sc-279a0aa6-1"
})([
	`display:block;border:solid 2px `,
	`;background:`,
	`;border-radius:`,
	`;pointer-events:none;transition:all 0.3s ease;box-shadow:0 0 0 0 `,
	`;transform:none;width:`,
	`;height:`,
	`;`,
	` &::before,&::after{content:"";display:block;position:absolute;}&::before{top:5px;left:5px;width:calc(100% - 10px);height:calc(100% - 10px);max-width:0;border-radius:`,
	`;background:`,
	`;transition:all 0.3s ease;}&::after{left:0;top:0;border-radius:50%;transition:all 0.3s ease;transform:translateX(0);background:`,
	`;width:`,
	`;height:`,
	`;}`
], ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.colors.light, ({ theme }) => theme.spacing.radius.xl, ({ theme }) => theme.colors.primaryLight, ({ $size }) => $size === "big" ? "56px" : $size === "small" ? "38px" : "46px", ({ $size }) => $size === "big" ? "32px" : $size === "small" ? "18px" : "22px", ({ $error, $success, theme }) => {
	return statusBorderStyles($error, $success, theme);
}, ({ theme }) => theme.spacing.radius.xl, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.primary, ({ $size }) => $size === "big" ? "32px" : $size === "small" ? "18px" : "22px", ({ $size }) => $size === "big" ? "32px" : $size === "small" ? "18px" : "22px");
var StyledToggle = styled.input.withConfig({
	displayName: "toggle__StyledToggle",
	componentId: "sc-279a0aa6-2"
})([
	``,
	`;position:absolute;left:0;top:0;width:100%;height:100%;outline:none;z-index:10;&:checked ~ .fake-toggle{&::before{max-width:46px;background:`,
	`;}&::after{transform:translateX( `,
	` );}}&:hover:not([disabled]) ~ .fake-toggle{border-color:`,
	`;}&:focus:not([disabled]) ~ .fake-toggle{outline:none;border-color:`,
	`;box-shadow:0 0 0 4px `,
	`;}&:active:not([disabled]) ~ .fake-toggle{box-shadow:0 0 0 2px `,
	`;}`,
	``
], resetButton, ({ theme }) => theme.colors.primaryLight, ({ $size }) => $size === "big" ? "25px" : $size === "small" ? "20px" : "25px", ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primaryLight, ({ theme }) => theme.colors.primaryLight, ({ disabled, theme }) => disabled && `cursor: not-allowed;

		& ~ .fake-toggle {
			border-color: ${theme.colors.gray};

			&::before {
				background: ${theme.colors.grayLight};
			}

			&::after {
				background: ${theme.colors.gray};
			}
		}`);
function LocalToggle({ type = "checkbox", ...props }, ref) {
	return /* @__PURE__ */ jsxs(StyledInputWrapper, {
		$fullWidth: props.$fullWidth,
		$label: props.$label,
		className: props.$wrapperClassName,
		children: [/* @__PURE__ */ jsxs(StyledToggleWrapper, { children: [/* @__PURE__ */ jsx(StyledToggle, {
			...props,
			type,
			role: "switch",
			ref
		}), /* @__PURE__ */ jsx(StyledFakeToggle, {
			$error: props.$error,
			$success: props.$success,
			className: "fake-toggle",
			$size: props.$size
		})] }), props.$label && /* @__PURE__ */ jsx(StyledLabel, {
			htmlFor: props.id,
			children: props.$label
		})]
	});
}
var Toggle = /* @__PURE__ */ forwardRef(LocalToggle);
//#endregion
export { Toggle };