cherry-styled-components/dist/select.js

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

"use client";
"use client";
import { IconArrow } from "./utils/icons.js";
import { formElementHeightStyles, fullWidthStyles, resetButton, resetInput, 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/select.tsx
var StyledSelect = styled.select.withConfig({
	displayName: "select__StyledSelect",
	componentId: "sc-b63bf03d-0"
})([
	``,
	`;`,
	`;font-family:inherit;display:inline-block;padding:0 15px;border-radius:`,
	`;font-weight:400;white-space:nowrap;hyphens:auto;color:`,
	`;background:`,
	`;border:solid 2px `,
	`;box-shadow:0 0 0 0px `,
	`;transition:all 0.3s ease;&::placeholder{color:`,
	`;}&:hover:not([disabled]){border-color:`,
	`;}&:focus:not([disabled]){box-shadow:0 0 0 4px `,
	`;border-color:`,
	`;}&:active:not([disabled]){box-shadow:0 0 0 2px `,
	`;}`,
	` `,
	` `,
	` `,
	` `,
	``
], resetButton, resetInput, ({ theme }) => theme.spacing.radius.xs, ({ theme }) => theme.colors.dark, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.colors.primaryLight, ({ theme }) => theme.colors.gray, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primaryLight, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primaryLight, ({ $size }) => formElementHeightStyles($size), ({ $size, theme }) => $size === "big" ? `font-size: ${theme.fontSizes.inputBig.lg};` : $size === "small" ? `font-size: ${theme.fontSizes.inputSmall.lg}; padding: 0 12px;` : `font-size: ${theme.fontSizes.input.lg};`, ({ $error, $success, theme }) => {
	return statusBorderStyles($error, $success, theme);
}, ({ disabled, theme }) => disabled && `cursor: not-allowed;
		background: ${theme.colors.grayLight};
		border-color: ${theme.colors.gray};
		color: ${theme.colors.gray};
	`, ({ $fullWidth }) => fullWidthStyles($fullWidth));
var StyledIconWrapper = styled.span.withConfig({
	displayName: "select__StyledIconWrapper",
	componentId: "sc-b63bf03d-1"
})([`position:relative;`, ` & svg{position:absolute;top:50%;right:15px;transform:translateY(-50%) rotate(0);transition:all 0.3s ease;pointer-events:none;}& select{padding-right:40px;}& select:active:not([disabled]) ~ svg,& select:focus:not([disabled]) ~ svg{transform:translateY(-50%) rotate(180deg);}`], ({ $fullWidth }) => fullWidthStyles($fullWidth));
function LocalSelect({ ...props }, ref) {
	return /* @__PURE__ */ jsxs(StyledInputWrapper, {
		$fullWidth: props.$fullWidth,
		$label: props.$label,
		className: props.$wrapperClassName,
		children: [props.$label && /* @__PURE__ */ jsx(StyledLabel, {
			htmlFor: props.id,
			children: props.$label
		}), /* @__PURE__ */ jsxs(StyledIconWrapper, {
			$fullWidth: props.$fullWidth,
			children: [/* @__PURE__ */ jsx(StyledSelect, {
				...props,
				"aria-invalid": props.$error || void 0,
				ref,
				children: props.children
			}), /* @__PURE__ */ jsx(IconArrow, { "aria-hidden": "true" })]
		})]
	});
}
var Select = /* @__PURE__ */ forwardRef(LocalSelect);
//#endregion
export { Select, StyledIconWrapper };