cherry-styled-components
Version:
Cherry is a design system for the modern web. Designed in Figma, built in React using Typescript.
218 lines (211 loc) • 9.71 kB
JavaScript
"use client";
"use client";
import { IconCalendar, IconCheck } from "./utils/icons.js";
import { formElementHeightStyles, fullWidthStyles, resetButton, resetInput, statusBorderStyles } from "./utils/mixins.js";
import { jsx, jsxs } from "react/jsx-runtime";
import { forwardRef } from "react";
import styled, { css } from "styled-components";
//#region src/lib/input.tsx
var StyledInputWrapper = styled.span.withConfig({
displayName: "input__StyledInputWrapper",
componentId: "sc-df1aa532-0"
})([
`display:inline-flex;flex-wrap:`,
`;align-items:center;`,
` & .icon-calendar{position:absolute;top:50%;right:17px;left:initial;transform:translateY(-50%);pointer-events:none;width:24px;height:24px;@supports (-moz-appearance:none){display:none;}}`,
``
], ({ type }) => type === "checkbox" || type === "radio" ? "nowrap" : "wrap", ({ $label }) => $label && css([`gap:5px;align-items:flex-start;align-content:flex-start;`]), ({ $fullWidth }) => fullWidthStyles($fullWidth));
var StyledLabel = styled.label.withConfig({
displayName: "input__StyledLabel",
componentId: "sc-df1aa532-1"
})([
`display:inline-block;color:`,
`;font-size:`,
`;line-height:`,
`;`
], ({ theme }) => theme.colors.grayDark, ({ theme }) => theme.fontSizes.small.lg, ({ theme }) => theme.lineHeights.small.lg);
var StyledInput = styled.input.withConfig({
displayName: "input__StyledInput",
componentId: "sc-df1aa532-2"
})([
``,
`;`,
`;font-family:inherit;display:inline-block;padding:17px 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;word-break:keep-all;white-space:nowrap;display:inline-flex;&::-webkit-datetime-edit{padding:0;margin:0;vertical-align:middle;}&::-webkit-datetime-edit-fields-wrapper{padding:4px 0;margin:0;vertical-align:middle;}&::-webkit-calendar-picker-indicator{background:transparent;cursor:pointer;position:absolute;right:15px;top:50%;transform:translateY(-50%);width:24px;height:24px;}&::-webkit-datetime-edit-text{color:`,
`;}&::-webkit-datetime-edit-month-field{&:focus{background:`,
`;color:`,
`;border-radius:4px;}}&::-webkit-datetime-edit-day-field{&:focus{background:`,
`;color:`,
`;border-radius:4px;}}&::-webkit-datetime-edit-year-field{&:focus{background:`,
`;color:`,
`;border-radius:4px;}}&::-webkit-datetime-edit-hour-field{&:focus{background:`,
`;color:`,
`;border-radius:4px;}}&::-webkit-datetime-edit-minute-field{&:focus{background:`,
`;color:`,
`;border-radius:4px;}}&::-webkit-datetime-edit-second-field{&:focus{background:`,
`;color:`,
`;border-radius:4px;}}&::-webkit-datetime-edit-ampm-field{&:focus{background:`,
`;color:`,
`;border-radius:4px;}}&::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.light, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.light, ({ 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};
line-height: ${theme.lineHeights.inputBig.lg};
` : $size === "small" ? `font-size: ${theme.fontSizes.inputSmall.lg};
line-height: ${theme.lineHeights.inputSmall.lg};
padding: 12px 12px;
` : `font-size: ${theme.fontSizes.input.lg};
line-height: ${theme.lineHeights.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: "input__StyledIconWrapper",
componentId: "sc-df1aa532-3"
})([`display:inline-flex;position:relative;line-height:0;min-width:fit-content;& em{display:block;border-radius:50%;background:`, `;}& svg,& em{object-fit:contain;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.7);opacity:0;pointer-events:none;transition:all 0.3s ease;}`], ({ theme }) => theme.colors.primary);
var StyledRadioCheckboxInput = styled.input.withConfig({
displayName: "input__StyledRadioCheckboxInput",
componentId: "sc-df1aa532-4"
})([
``,
`;display:inline-block;background:`,
`;border:solid 2px `,
`;box-shadow:0 0 0 0px `,
`;transition:all 0.3s ease;&: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 `,
`;}`,
` `,
` `,
` `,
` &:checked ~ svg,&:checked ~ em{opacity:1;transform:translate(-50%,-50%) scale(1);}`
], resetButton, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.colors.primaryLight, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primaryLight, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primaryLight, ({ type, theme }) => type === "checkbox" ? `border-radius: ${theme.spacing.radius.xs};` : `border-radius: 50%;`, ({ disabled, theme }) => disabled && `cursor: not-allowed;
background: ${theme.colors.grayLight};
border: solid 2px ${theme.colors.gray};
color: ${theme.colors.gray};
`, ({ $error, $success, theme }) => {
return statusBorderStyles($error, $success, theme);
}, ({ $size }) => {
if ($size === "big") return `
min-width: 32px;
width: 32px;
min-height: 32px;
height: 32px;
& ~ svg {
min-width: 18px;
width: 18px;
min-height: 18px;
height: 18px;
}
& ~ em {
min-width: 14px;
width: 14px;
min-height: 14px;
height: 14px;
}
`;
else if ($size === "small") return `
min-width: 18px;
width: 18px;
min-height: 18px;
height: 18px;
& ~ svg {
min-width: 10px;
width: 10px;
min-height: 10px;
height: 10px;
}
& ~ em {
min-width: 6px;
width: 6px;
min-height: 6px;
height: 6px;
}
`;
else return `
min-width: 22px;
width: 22px;
min-height: 22px;
height: 22px;
& ~ svg {
min-width: 12px;
width: 12px;
min-height: 12px;
height: 12px;
}
& ~ em {
min-width: 8px;
width: 8px;
min-height: 8px;
height: 8px;
}
`;
});
var StyledCustomIconWrapper = styled.span.withConfig({
displayName: "input__StyledCustomIconWrapper",
componentId: "sc-df1aa532-5"
})([
`position:relative;`,
`;& svg{position:absolute;top:50%;transform:translateY(-50%);pointer-events:none;width:24px;height:24px;object-fit:contain;color:`,
`;}`,
` &:has(.icon-calendar) > input{padding-right:45px;@supports (-moz-appearance:none){padding-right:15px;}}`
], ({ $fullWidth }) => fullWidthStyles($fullWidth), ({ theme }) => theme.colors.primary, ({ $icon, $iconPosition }) => $icon && $iconPosition === "right" ? css([`& svg{right:16px;}& input{padding-right:50px;}`]) : css([`& svg{left:16px;}& svg ~ input{padding-left:50px;}`]));
function LocalInput({ ...props }, ref) {
if (props.type === "checkbox" || props.type === "radio") return /* @__PURE__ */ jsxs(StyledInputWrapper, {
$fullWidth: props.$fullWidth,
type: props.type,
$label: props.$label,
className: props.$wrapperClassName,
children: [/* @__PURE__ */ jsxs(StyledIconWrapper, { children: [/* @__PURE__ */ jsx(StyledRadioCheckboxInput, {
...props,
"aria-invalid": props.$error || void 0,
ref
}), !props.disabled && props.type === "checkbox" ? /* @__PURE__ */ jsx(IconCheck, {}) : /* @__PURE__ */ jsx("em", {})] }), props.$label && /* @__PURE__ */ jsx(StyledLabel, {
htmlFor: props.id,
children: props.$label
})]
});
return /* @__PURE__ */ jsxs(StyledInputWrapper, {
$fullWidth: props.$fullWidth,
type: props.type,
$label: props.$label,
className: props.$wrapperClassName,
children: [props.$label && /* @__PURE__ */ jsx(StyledLabel, {
htmlFor: props.id,
children: props.$label
}), /* @__PURE__ */ jsxs(StyledCustomIconWrapper, {
$fullWidth: props.$fullWidth,
$iconPosition: props.$iconPosition,
$icon: props.$icon,
children: [
props.$iconPosition !== "right" && props.$icon && props.$icon,
/* @__PURE__ */ jsx(StyledInput, {
...props,
"aria-invalid": props.$error || void 0,
ref
}),
props.$iconPosition === "right" && props.$icon && props.$icon,
(props.type === "date" || props.type === "datetime-local" || props.type === "month" || props.type === "week" || props.type === "time") && /* @__PURE__ */ jsx(IconCalendar, { className: "icon-calendar" })
]
})]
});
}
var Input = /* @__PURE__ */ forwardRef(LocalInput);
//#endregion
export { Input, StyledInputWrapper, StyledLabel };