cherry-styled-components 0.1.0 → 0.1.2

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

@@ -1,43 +0,0 @@
-"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/cherry/range.tsx

@@ -1,223 +0,0 @@
-"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 };

package/src/app/components/cherry/select.tsx

@@ -1,122 +0,0 @@
-"use client";
-import React from "react";
-import styled from "styled-components";
-import {
-	Theme,
-	IconArrow,
-	formElementHeightStyles,
-	fullWidthStyles,
-	resetButton,
-	resetInput,
-	statusBorderStyles,
-} from "./utils";
-import { StyledInputWrapper, StyledLabel } from "./input";
-
-interface SelectProps extends React.InputHTMLAttributes<HTMLSelectElement> {
-	children?: React.ReactNode;
-	$label?: string;
-	$size?: "default" | "big";
-	$error?: boolean;
-	$success?: boolean;
-	$fullWidth?: boolean;
-	theme?: Theme;
-}
-
-const StyledSelect = styled.select<SelectProps>`
-	${resetButton};
-	${resetInput};
-	font-family: inherit;
-	display: inline-block;
-	padding: 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)}
-`;
-
-export const StyledIconWrapper = styled.span<SelectProps>`
-	position: relative;
-	${({ $fullWidth }) => fullWidthStyles($fullWidth ? true : false)}
-
-	& svg {
-		position: absolute;
-		top: 50%;
-		right: 15px;
-		transform: translateY(-50%) rotate(0);
-		transition: all 0.3s ease;
-		pointer-events: none;
-	}
-
-	& select:active:not([disabled]) ~ svg,
-	& select:focus:not([disabled]) ~ svg {
-		transform: translateY(-50%) rotate(180deg);
-	}
-`;
-
-function Select({ ...props }: SelectProps) {
-	return (
-		<StyledInputWrapper $fullWidth={props.$fullWidth}>
-			{props.$label && (
-				<StyledLabel htmlFor={props.id}>{props.$label}</StyledLabel>
-			)}
-			<StyledIconWrapper $fullWidth={props.$fullWidth}>
-				<StyledSelect {...props}>{props.children}</StyledSelect>
-				<IconArrow />
-			</StyledIconWrapper>
-		</StyledInputWrapper>
-	);
-}
-
-export { Select };

package/src/app/components/cherry/space.tsx

@@ -1,54 +0,0 @@
-"use client";
-import React from "react";
-import styled from "styled-components";
-import { Breakpoints, mq } from "./utils";
-
-interface SpaceProps {
-	$size?: number | "none";
-	$xs?: number | "none";
-	$sm?: number | "none";
-	$md?: number | "none";
-	$lg?: number | "none";
-	$xl?: number | "none";
-	$xxl?: number | "none";
-	$xxxl?: number | "none";
-	$horizontal?: boolean;
-}
-
-const styles = ($size: number | "none", $horizontal: boolean) =>
-	$horizontal
-		? `display: inline-block;
-			max-height: 0;
-			min-width: ${$size}px;
-			max-width: ${$size}px;`
-		: `display: block;
-			min-height: ${$size}px;
-			max-height: ${$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], props.$horizontal || false)} }`
-			);
-		})
-		.join("");
-}
-
-const StyledSpace = styled.span<SpaceProps>`
-	${({ $horizontal, $size }) => `
-		${$size && $size !== "none" && styles($size, $horizontal || false)};
-		${$size === "none" && `display: none;`};
-	`}
-	${(props) => responsiveStyles(props)}
-`;
-
-function Space({ ...props }: SpaceProps) {
-	return <StyledSpace {...props} />;
-}
-
-export { Space };

package/src/app/components/cherry/styled-components/registry.tsx

@@ -1,26 +0,0 @@
-"use client";
-import React, { useState } from "react";
-import { useServerInsertedHTML } from "next/navigation";
-import { ServerStyleSheet, StyleSheetManager } from "styled-components";
-
-function StyledComponentsRegistry({ children }: { children: React.ReactNode }) {
-	// Only create stylesheet once with lazy initial state
-	// x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
-	const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet());
-
-	useServerInsertedHTML(() => {
-		const styles = styledComponentsStyleSheet.getStyleElement();
-		styledComponentsStyleSheet.instance.clearTag();
-		return <>{styles}</>;
-	});
-
-	if (typeof window !== "undefined") return <>{children}</>;
-
-	return (
-		<StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
-			{children}
-		</StyleSheetManager>
-	);
-}
-
-export { StyledComponentsRegistry };

package/src/app/components/cherry/styled-components/theme-provider.tsx

@@ -1,21 +0,0 @@
-"use client";
-import React from "react";
-import { ThemeProvider as StyledThemeProvider } from "styled-components";
-import { theme as defaultTheme, GlobalStyles } from "../utils";
-
-function CherryThemeProvider({
-	children,
-	theme,
-}: {
-	children: React.ReactNode;
-	theme?: any;
-}) {
-	return (
-		<StyledThemeProvider theme={theme || defaultTheme}>
-			<GlobalStyles />
-			{children}
-		</StyledThemeProvider>
-	);
-}
-
-export { CherryThemeProvider };

package/src/app/components/cherry/textarea.tsx

@@ -1,98 +0,0 @@
-"use client";
-import React from "react";
-import styled from "styled-components";
-import {
-	Theme,
-	fullWidthStyles,
-	resetButton,
-	resetInput,
-	statusBorderStyles,
-} from "./utils";
-import { StyledInputWrapper, StyledLabel } from "./input";
-
-interface TextareaProps
-	extends Omit<React.InputHTMLAttributes<HTMLTextAreaElement>, "size"> {
-	children?: React.ReactNode;
-	$label?: string;
-	$size?: "default" | "big";
-	$error?: boolean;
-	$success?: boolean;
-	$fullWidth?: boolean;
-	theme?: Theme;
-}
-
-const StyledTextarea = styled.textarea<TextareaProps>`
-	${resetButton};
-	${resetInput};
-	font-family: inherit;
-	display: inline-block;
-	padding: 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;
-	min-height: 80px;
-
-	&::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, theme }) =>
-		$size === "big"
-			? `font-size: ${theme.fontSizes.inputBig.lg};
-			line-height: ${theme.lineHeights.text.lg};
-	`
-			: `font-size: ${theme.fontSizes.input.lg};
-			line-height: ${theme.lineHeights.text.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)}
-`;
-
-function Textarea({ ...props }: TextareaProps) {
-	return (
-		<StyledInputWrapper $fullWidth={props.$fullWidth}>
-			{props.$label && (
-				<StyledLabel htmlFor={props.id}>{props.$label}</StyledLabel>
-			)}
-			<StyledTextarea {...props}>{props.children}</StyledTextarea>
-		</StyledInputWrapper>
-	);
-}
-
-export { Textarea };