cherry-styled-components/dist/range.js

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

"use client";
"use client";
import { fullWidthStyles, resetButton, statusBorderStyles } from "./utils/mixins.js";
import { StyledLabel } from "./input.js";
import { jsx, jsxs } from "react/jsx-runtime";
import { forwardRef } from "react";
import styled from "styled-components";
//#region src/lib/range.tsx
var StyledInputWrapper = styled.span.withConfig({
	displayName: "range__StyledInputWrapper",
	componentId: "sc-cb330c1b-0"
})([
	`display:inline-flex;flex-wrap:`,
	`;gap:10px;align-items:center;`,
	``
], ({ type }) => type === "checkbox" || type === "radio" ? "nowrap" : "wrap", ({ $fullWidth }) => fullWidthStyles($fullWidth));
var StyledInput = styled.input.withConfig({
	displayName: "range__StyledInput",
	componentId: "sc-cb330c1b-1"
})([
	``,
	`;padding:0;height:10px;font-size:0;background:transparent;min-width:100px;&::-webkit-slider-runnable-track{width:100%;cursor:pointer;border-radius:`,
	`;background:`,
	`;border:solid 2px `,
	`;box-shadow:0 0 0 0 `,
	`;transition:all 0.3s ease;`,
	`}&::-moz-range-track{width:100%;cursor:pointer;border-radius:`,
	`;background:`,
	`;border:solid 2px `,
	`;box-shadow:0 0 0 0 `,
	`;transition:all 0.3s ease;`,
	`}&::-webkit-slider-thumb{`,
	`;background:`,
	`;border:0 solid transparent;border-radius:50%;transition:all 0.3s ease;}&::-moz-range-thumb{`,
	`;background:`,
	`;border:0 solid transparent;border-radius:50%;transition:all 0.3s ease;}&:hover:not([disabled]){&::-webkit-slider-runnable-track{border:solid 2px `,
	`;}&::-moz-range-track{border:solid 2px `,
	`;}}&:focus:not([disabled]){&::-webkit-slider-runnable-track{border:solid 2px `,
	`;box-shadow:0 0 0 4px `,
	`;}&::-webkit-slider-thumb{box-shadow:0 0 0 4px `,
	`;}&::-moz-range-track{border:solid 2px `,
	`;box-shadow:0 0 0 4px `,
	`;}&::-moz-range-thumb{box-shadow:0 0 0 4px `,
	`;}}&:active:not([disabled]){&::-webkit-slider-runnable-track{box-shadow:0 0 0 2px `,
	`;}&::-webkit-slider-thumb{box-shadow:0 0 0 2px `,
	`;}&::-moz-range-track{box-shadow:0 0 0 2px `,
	`;}&::-moz-range-thumb{box-shadow:0 0 0 2px `,
	`;}}`,
	` `,
	` `,
	``
], resetButton, ({ theme }) => theme.spacing.radius.xl, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.colors.primaryLight, ({ $error, $success, theme }) => {
	return statusBorderStyles($error, $success, theme);
}, ({ theme }) => theme.spacing.radius.xl, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.colors.primaryLight, ({ $error, $success, theme }) => {
	return statusBorderStyles($error, $success, theme);
}, resetButton, ({ theme }) => theme.colors.primary, resetButton, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primaryLight, ({ theme }) => theme.colors.primaryLight, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primaryLight, ({ theme }) => theme.colors.primaryLight, ({ theme }) => theme.colors.primaryLight, ({ theme }) => theme.colors.primaryLight, ({ theme }) => theme.colors.primaryLight, ({ theme }) => theme.colors.primaryLight, ({ disabled, theme }) => disabled && `
		cursor: not-allowed;

		&::-webkit-slider-runnable-track {
			background: ${theme.colors.grayLight};
			cursor: not-allowed;
		}

		&::-moz-range-track {
			background: ${theme.colors.grayLight};
			cursor: not-allowed;
		}

		&::-webkit-slider-thumb {
			background: ${theme.colors.gray};
			cursor: not-allowed;
		}

		&::-moz-range-thumb {
			background: ${theme.colors.gray};
			cursor: not-allowed;
		}
	`, ({ $fullWidth }) => fullWidthStyles($fullWidth), ({ $size }) => {
	if ($size === "big") return `
					height: 32px;

					&::-webkit-slider-runnable-track {
						height: 14px;
					}

					&::-moz-range-track {
						height: 10px;
					}

					&::-webkit-slider-thumb {
						width: 32px;
						height: 32px;
						margin-top: -11px;
					}

					&::-moz-range-thumb {
						width: 32px;
						height: 32px;
					}
				`;
	else if ($size === "small") return `
					height: 18px;

					&::-webkit-slider-runnable-track {
						height: 8px;
					}

					&::-moz-range-track {
						height: 4px;
					}

					&::-webkit-slider-thumb {
						width: 18px;
						height: 18px;
						margin-top: -7px;
					}

					&::-moz-range-thumb {
						width: 18px;
						height: 18px;
					}
				`;
	else return `
					height: 22px;

					&::-webkit-slider-runnable-track {
						height: 10px;
					}

					&::-moz-range-track {
						height: 6px;
					}

					&::-webkit-slider-thumb {
						width: 22px;
						height: 22px;
						margin-top: -8px;
					}

					&::-moz-range-thumb {
						width: 22px;
						height: 22px;
					}
				`;
});
function LocalRange({ ...props }, ref) {
	return /* @__PURE__ */ jsxs(StyledInputWrapper, {
		$fullWidth: props.$fullWidth,
		className: props.$wrapperClassName,
		children: [props.$label && /* @__PURE__ */ jsx(StyledLabel, {
			htmlFor: props.id,
			children: props.$label
		}), /* @__PURE__ */ jsx(StyledInput, {
			...props,
			"aria-invalid": props.$error || void 0,
			type: "range",
			ref
		})]
	});
}
var Range = /* @__PURE__ */ forwardRef(LocalRange);
//#endregion
export { Range };