cherry-styled-components 0.1.0-1

package/src/app/components/flex.tsx

@@ -0,0 +1,90 @@
+"use client";
+import React from "react";
+import styled from "styled-components";
+import {
+	Theme,
+	mq,
+	generateGapStyles,
+	generateJustifyContentStyles,
+} from "./utils";
+
+type JustifyContentType =
+	| "center"
+	| "flex-start"
+	| "flex-end"
+	| "space-between"
+	| "space-around"
+	| "space-evenly";
+
+type GapType = number | "none";
+
+interface FlexProps extends React.AllHTMLAttributes<FlexProps> {
+	children?: React.ReactNode;
+	$justifyContent?: JustifyContentType;
+	$xsJustifyContent?: JustifyContentType;
+	$smJustifyContent?: JustifyContentType;
+	$mdJustifyContent?: JustifyContentType;
+	$lgJustifyContent?: JustifyContentType;
+	$xlJustifyContent?: JustifyContentType;
+	$xxlJustifyContent?: JustifyContentType;
+	$xxxlJustifyContent?: JustifyContentType;
+	$wrap?: "wrap" | "nowrap" | "wrap-reverse";
+	$gap?: GapType;
+	$xsGap?: GapType;
+	$smGap?: GapType;
+	$mdGap?: GapType;
+	$lgGap?: GapType;
+	$xlGap?: GapType;
+	$xxlGap?: GapType;
+	$xxxlGap?: GapType;
+	theme?: Theme;
+}
+
+const StyledFlex = styled.div<FlexProps>`
+	display: flex;
+	justify-content: ${({ $justifyContent }) =>
+		$justifyContent || "flex-start"};
+	flex-wrap: ${({ $wrap }) => $wrap || "wrap"};
+	gap: ${({ $gap, theme }) =>
+		($gap && `${$gap}px`) || theme.spacing.gridGap.xs};
+
+	${mq("lg")} {
+		gap: ${({ $gap, theme }) =>
+			($gap && `${$gap}px`) || theme.spacing.gridGap.lg};
+	}
+
+	${({ $xsGap }) => $xsGap && generateGapStyles("xs", $xsGap)}
+	${({ $xsJustifyContent }) =>
+		$xsJustifyContent &&
+		generateJustifyContentStyles("xs", $xsJustifyContent)}
+	${({ $smGap }) => $smGap && generateGapStyles("sm", $smGap)}
+	${({ $smJustifyContent }) =>
+		$smJustifyContent &&
+		generateJustifyContentStyles("sm", $smJustifyContent)}
+	${({ $mdGap }) => $mdGap && generateGapStyles("md", $mdGap)}
+	${({ $mdJustifyContent }) =>
+		$mdJustifyContent &&
+		generateJustifyContentStyles("md", $mdJustifyContent)}
+	${({ $lgGap }) => $lgGap && generateGapStyles("lg", $lgGap)}
+	${({ $lgJustifyContent }) =>
+		$lgJustifyContent &&
+		generateJustifyContentStyles("lg", $lgJustifyContent)}
+	${({ $xlGap }) => $xlGap && generateGapStyles("xl", $xlGap)}
+	${({ $xlJustifyContent }) =>
+		$xlJustifyContent &&
+		generateJustifyContentStyles("xl", $xlJustifyContent)}
+	${({ $xxlGap }) => $xxlGap && generateGapStyles("xxl", $xxlGap)}
+	${({ $xxlJustifyContent }) =>
+		$xxlJustifyContent &&
+		generateJustifyContentStyles("xxl", $xxlJustifyContent)}
+	${({ $xxxlGap }) => $xxxlGap && generateGapStyles("xxxl", $xxxlGap)}
+	${({ $xxxlJustifyContent }) =>
+		$xxxlJustifyContent &&
+		generateJustifyContentStyles("xxxl", $xxxlJustifyContent)}
+`;
+
+function Flex({ ...props }: FlexProps) {
+	return <StyledFlex {...props}>{props.children}</StyledFlex>;
+}
+
+export { Flex };

package/src/app/components/grid.tsx

@@ -0,0 +1,60 @@
+"use client";
+import React from "react";
+import styled from "styled-components";
+import { Theme, mq, generateColsStyles, generateGapStyles } from "./utils";
+
+interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
+	children?: React.ReactNode;
+	$gap?: number | "none";
+	$xsGap?: number | "none";
+	$smGap?: number | "none";
+	$mdGap?: number | "none";
+	$lgGap?: number | "none";
+	$xlGap?: number | "none";
+	$xxlGap?: number | "none";
+	$xxxlGap?: number | "none";
+	$cols?: number;
+	$xsCols?: number;
+	$smCols?: number;
+	$mdCols?: number;
+	$lgCols?: number;
+	$xlCols?: number;
+	$xxlCols?: number;
+	$xxxlCols?: number;
+	theme?: Theme;
+}
+
+const StyledGrid = styled.div<GridProps>`
+	display: grid;
+	grid-template-columns: ${({ $cols }) =>
+		`repeat(${$cols || 3}, minmax(0, 1fr))`};
+	gap: ${({ $gap, theme }) =>
+		($gap && `${$gap}px`) || theme.spacing.gridGap.xs};
+
+	${mq("lg")} {
+		gap: ${({ $gap, theme }) =>
+			($gap && `${$gap}px`) || theme.spacing.gridGap.lg};
+	}
+
+	${({ $xsGap }) => $xsGap && generateGapStyles("xs", $xsGap)}
+	${({ $smGap }) => $smGap && generateGapStyles("sm", $smGap)}
+	${({ $mdGap }) => $mdGap && generateGapStyles("md", $mdGap)}
+	${({ $lgGap }) => $lgGap && generateGapStyles("lg", $lgGap)}
+	${({ $xlGap }) => $xlGap && generateGapStyles("xl", $xlGap)}
+	${({ $xxlGap }) => $xxlGap && generateGapStyles("xxl", $xxlGap)}
+	${({ $xxxlGap }) => $xxxlGap && generateGapStyles("xxxl", $xxxlGap)}
+
+	${({ $xsCols }) => $xsCols && generateColsStyles("xs", $xsCols)}
+	${({ $smCols }) => $smCols && generateColsStyles("sm", $smCols)}
+	${({ $mdCols }) => $mdCols && generateColsStyles("md", $mdCols)}
+	${({ $lgCols }) => $lgCols && generateColsStyles("lg", $lgCols)}
+	${({ $xlCols }) => $xlCols && generateColsStyles("xl", $xlCols)}
+	${({ $xxlCols }) => $xxlCols && generateColsStyles("xxl", $xxlCols)}
+	${({ $xxxlCols }) => $xxxlCols && generateColsStyles("xxxl", $xxxlCols)}
+`;
+
+function Grid({ ...props }: GridProps) {
+	return <StyledGrid {...props}>{props.children}</StyledGrid>;
+}
+
+export { Grid };

package/src/app/components/index.ts

@@ -0,0 +1,15 @@
+export * from "./styled-components";
+export * from "./utils/";
+export * from "./box";
+export * from "./button";
+export * from "./col";
+export * from "./container";
+export * from "./flex";
+export * from "./grid";
+export * from "./input";
+export * from "./max-width";
+export * from "./range";
+export * from "./select";
+export * from "./space";
+export * from "./textarea";
+export * from "./toggle";

package/src/app/components/input.tsx

@@ -0,0 +1,254 @@
+"use client";
+import React from "react";
+import styled from "styled-components";
+import {
+	Theme,
+	IconCheck,
+	formElementHeightStyles,
+	fullWidthStyles,
+	resetButton,
+	resetInput,
+	statusBorderStyles,
+} from "./utils";
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+	children?: React.ReactNode;
+	$label?: string;
+	$size?: "default" | "big";
+	$error?: boolean;
+	$success?: boolean;
+	$fullWidth?: boolean;
+	theme?: Theme;
+}
+
+export const StyledInputWrapper = styled.span<InputProps>`
+	display: inline-flex;
+	flex-wrap: ${({ type }) =>
+		type === "checkbox" || type === "radio" ? "nowrap" : "wrap"};
+	gap: 10px;
+	align-items: center;
+
+	${({ $fullWidth }) => fullWidthStyles($fullWidth ? true : false)}
+`;
+
+export const StyledLabel = styled.label<InputProps>`
+	display: inline-block;
+	color: ${({ theme }) => theme.colors.grayDark};
+	font-size: ${({ theme }) => theme.fontSizes.text.lg};
+	line-height: ${({ theme }) => theme.lineHeights.text.lg};
+`;
+
+const StyledInput = styled.input<InputProps>`
+	${resetButton};
+	${resetInput};
+	font-family: inherit;
+	display: inline-block;
+	padding: 17px 15px;
+	border-radius: ${({ theme }) => theme.spacing.radius.xs};
+	font-weight: 400;
+	white-space: nowrap;
+	hyphens: auto;
+	color: ${({ theme }) => theme.colors.dark};
+	background: ${({ theme }) => theme.colors.light};
+	border: solid 2px ${({ theme }) => theme.colors.grayLight};
+	box-shadow: 0 0 0 0px ${({ theme }) => theme.colors.primaryLight};
+	transition: all 0.3s ease;
+
+	&::placeholder {
+		color: ${({ theme }) => theme.colors.gray};
+	}
+
+	@media (hover: hover) {
+		&:hover:not([disabled]) {
+			border-color: ${({ theme }) => theme.colors.primary};
+		}
+	}
+
+	&:focus:not([disabled]) {
+		box-shadow: 0 0 0 4px ${({ theme }) => theme.colors.primaryLight};
+		border-color: ${({ theme }) => theme.colors.primary};
+	}
+
+	&:active:not([disabled]) {
+		box-shadow: 0 0 0 2px ${({ theme }) => theme.colors.primaryLight};
+	}
+
+	${({ $size }) => formElementHeightStyles($size)}
+
+	${({ $size, theme }) =>
+		$size === "big"
+			? `font-size: ${theme.fontSizes.inputBig.lg};
+			line-height: ${theme.lineHeights.inputBig.lg};
+	`
+			: `font-size: ${theme.fontSizes.input.lg};
+			line-height: ${theme.lineHeights.input.lg};`}
+
+	${({ $error, $success, theme }) => {
+		return statusBorderStyles(
+			$error ? true : false,
+			$success ? true : false,
+			theme,
+		);
+	}}
+
+	${({ disabled, theme }) =>
+		disabled &&
+		`cursor: not-allowed;
+		background: ${theme.colors.grayLight};
+		border-color: ${theme.colors.gray};
+		color: ${theme.colors.gray};
+	`}
+
+	${({ $fullWidth }) => fullWidthStyles($fullWidth ? true : false)}
+`;
+
+const StyledIconWrapper = styled.span<InputProps>`
+	display: inline-flex;
+	position: relative;
+	line-height: 0;
+
+	& em {
+		display: block;
+		border-radius: 50%;
+		background: ${({ theme }) => theme.colors.primary};
+	}
+
+	& 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;
+	}
+`;
+
+const StyledRadioCheckboxInput = styled.input<InputProps>`
+	${resetButton};
+	display: inline-block;
+	border: solid 2px ${({ theme }) => theme.colors.grayLight};
+	box-shadow: 0 0 0 0px ${({ theme }) => theme.colors.primaryLight};
+	transition: all 0.3s ease;
+
+	@media (hover: hover) {
+		&:hover:not([disabled]) {
+			border-color: ${({ theme }) => theme.colors.primary};
+		}
+	}
+
+	&:focus:not([disabled]) {
+		box-shadow: 0 0 0 4px ${({ theme }) => theme.colors.primaryLight};
+		border-color: ${({ theme }) => theme.colors.primary};
+	}
+
+	&:active:not([disabled]) {
+		box-shadow: 0 0 0 2px ${({ 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-color: ${theme.colors.gray};
+		color: ${theme.colors.gray};
+	`}
+
+	${({ $error, $success, theme }) => {
+		return statusBorderStyles(
+			$error ? true : false,
+			$success ? true : false,
+			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 {
+			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;
+					}
+				`;
+		}
+	}}
+
+	&:checked ~ svg,
+	&:checked ~ em {
+		opacity: 1;
+		transform: translate(-50%, -50%) scale(1);
+	}
+`;
+
+function Input({ ...props }: InputProps) {
+	if (props.type === "checkbox" || props.type === "radio") {
+		return (
+			<StyledInputWrapper $fullWidth={props.$fullWidth} type={props.type}>
+				<StyledIconWrapper>
+					<StyledRadioCheckboxInput {...props} />
+					{!props.disabled && props.type === "checkbox" ? (
+						<IconCheck />
+					) : (
+						<em />
+					)}
+				</StyledIconWrapper>
+				{props.$label && (
+					<StyledLabel htmlFor={props.id}>{props.$label}</StyledLabel>
+				)}
+			</StyledInputWrapper>
+		);
+	}
+
+	return (
+		<StyledInputWrapper $fullWidth={props.$fullWidth} type={props.type}>
+			{props.$label && (
+				<StyledLabel htmlFor={props.id}>{props.$label}</StyledLabel>
+			)}
+			<StyledInput {...props} />
+		</StyledInputWrapper>
+	);
+}
+
+export { Input };

package/src/app/components/max-width.tsx

@@ -0,0 +1,43 @@
+"use client";
+import React from "react";
+import styled from "styled-components";
+import { Breakpoints, mq } from "./utils";
+
+interface MaxWidthProps extends React.HTMLAttributes<HTMLDivElement> {
+	$size?: number;
+	$xs?: number;
+	$sm?: number;
+	$md?: number;
+	$lg?: number;
+	$xl?: number;
+	$xxl?: number;
+	$xxxl?: number;
+}
+
+const styles = ($size: number | "none") => `max-width: ${$size}px;`;
+
+function responsiveStyles(props: any) {
+	return Object.keys(props)
+		.filter((key) => key.startsWith("$"))
+		.map((key) => {
+			const size = key.substring(1) as keyof Breakpoints<number>;
+			return props[key] && mq(size) + `{ ${styles(props[key])} }`;
+		})
+		.join("");
+}
+
+const StyledMaxWidth = styled.div<MaxWidthProps>`
+	display: block;
+	margin: auto;
+
+	${({ $size }) => `
+		${$size && styles($size)};
+	`}
+	${(props) => responsiveStyles(props)}
+`;
+
+function MaxWidth({ ...props }: MaxWidthProps) {
+	return <StyledMaxWidth {...props}>{props.children}</StyledMaxWidth>;
+}
+
+export { MaxWidth };

package/src/app/components/range.tsx

@@ -0,0 +1,223 @@
+"use client";
+import React from "react";
+import styled from "styled-components";
+import {
+	Theme,
+	fullWidthStyles,
+	resetButton,
+	statusBorderStyles,
+} from "./utils";
+import { StyledLabel } from "./input";
+
+interface InputProps
+	extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+	className?: string;
+	$label?: string;
+	$size?: "default" | "big";
+	$error?: boolean;
+	$success?: boolean;
+	$fullWidth?: boolean;
+	theme?: Theme;
+}
+
+const StyledInputWrapper = styled.span<InputProps>`
+	display: inline-flex;
+	flex-wrap: ${({ type }) =>
+		type === "checkbox" || type === "radio" ? "fprnowrap" : "wrap"};
+	gap: 10px;
+	align-items: center;
+
+	${({ $fullWidth }) => fullWidthStyles($fullWidth ? true : false)}
+`;
+
+const StyledInput = styled.input<InputProps>`
+	${resetButton};
+	padding: 0;
+	height: 10px;
+	font-size: 0;
+	background: transparent;
+	min-width: 100px;
+
+	&::-webkit-slider-runnable-track {
+		width: 100%;
+		cursor: pointer;
+		border-radius: ${({ theme }) => theme.spacing.radius.xl};
+		border: solid 2px ${({ theme }) => theme.colors.grayLight};
+		box-shadow: 0 0 0 0 ${({ theme }) => theme.colors.primaryLight};
+		transition: all 0.3s ease;
+		${({ $error, $success, theme }) => {
+			return statusBorderStyles(
+				$error ? true : false,
+				$success ? true : false,
+				theme,
+			);
+		}}
+	}
+
+	&::-moz-range-track {
+		width: 100%;
+		cursor: pointer;
+		border-radius: ${({ theme }) => theme.spacing.radius.xl};
+		border: solid 2px ${({ theme }) => theme.colors.grayLight};
+		box-shadow: 0 0 0 0 ${({ theme }) => theme.colors.primaryLight};
+		transition: all 0.3s ease;
+		${({ $error, $success, theme }) => {
+			return statusBorderStyles(
+				$error ? true : false,
+				$success ? true : false,
+				theme,
+			);
+		}}
+	}
+
+	&::-webkit-slider-thumb {
+		${resetButton};
+		background: ${({ theme }) => theme.colors.primary};
+		border: 0 solid transparent;
+		border-radius: 50%;
+		transition: all 0.3s ease;
+	}
+
+	&::-moz-range-thumb {
+		${resetButton};
+		background: ${({ theme }) => theme.colors.primary};
+		border: 0 solid transparent;
+		border-radius: 50%;
+		transition: all 0.3s ease;
+	}
+
+	@media (hover: hover) {
+		&:hover:not([disabled]) {
+			&::-webkit-slider-runnable-track {
+				border: solid 2px ${({ theme }) => theme.colors.primary};
+			}
+
+			&::-moz-range-track {
+				border: solid 2px ${({ theme }) => theme.colors.primary};
+			}
+		}
+	}
+
+	&:focus:not([disabled]) {
+		&::-webkit-slider-runnable-track {
+			border: solid 2px ${({ theme }) => theme.colors.primary};
+			box-shadow: 0 0 0 4px ${({ theme }) => theme.colors.primaryLight};
+		}
+		&::-webkit-slider-thumb {
+			box-shadow: 0 0 0 4px ${({ theme }) => theme.colors.primaryLight};
+		}
+		&::-moz-range-track {
+			border: solid 2px ${({ theme }) => theme.colors.primary};
+			box-shadow: 0 0 0 4px ${({ theme }) => theme.colors.primaryLight};
+		}
+		&::-moz-range-thumb {
+			box-shadow: 0 0 0 4px ${({ theme }) => theme.colors.primaryLight};
+		}
+	}
+
+	&:active:not([disabled]) {
+		&::-webkit-slider-runnable-track {
+			box-shadow: 0 0 0 2px ${({ theme }) => theme.colors.primaryLight};
+		}
+		&::-webkit-slider-thumb {
+			box-shadow: 0 0 0 2px ${({ theme }) => theme.colors.primaryLight};
+		}
+		&::-moz-range-track {
+			box-shadow: 0 0 0 2px ${({ theme }) => theme.colors.primaryLight};
+		}
+		&::-moz-range-thumb {
+			box-shadow: 0 0 0 2px ${({ 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 ? true : false)}
+
+	${({ $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 {
+			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 Range({ ...props }: InputProps) {
+	return (
+		<StyledInputWrapper $fullWidth={props.$fullWidth}>
+			{props.$label && (
+				<StyledLabel htmlFor={props.id}>{props.$label}</StyledLabel>
+			)}
+			<StyledInput {...props} type="range" />
+		</StyledInputWrapper>
+	);
+}
+
+export { Range };