cherry-styled-components 0.1.0-9 → 0.1.1

package/src/lib/textarea.tsx

@@ -1,103 +1,94 @@
-"use client";
-import React from "react";
-import styled from "styled-components";
-import {
-	theme as defaultTheme,
-	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({ theme = defaultTheme, ...props }: TextareaProps) {
-	return (
-		<StyledInputWrapper $fullWidth={props.$fullWidth} theme={theme}>
-			{props.$label && (
-				<StyledLabel htmlFor={props.id} theme={theme}>
-					{props.$label}
-				</StyledLabel>
-			)}
-			<StyledTextarea {...props} theme={theme}>
-				{props.children}
-			</StyledTextarea>
-		</StyledInputWrapper>
-	);
-}
-
-export { Textarea };
+"use client";
+import React, { forwardRef } 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;
+  rows?: number;
+}
+
+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: break-spaces;
+  hyphens: none;
+  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 LocalTextarea({ ...props }: TextareaProps, ref: React.Ref<HTMLTextAreaElement>) {
+  return (
+    <StyledInputWrapper $fullWidth={props.$fullWidth} $label={props.$label}>
+      {props.$label && (
+        <StyledLabel htmlFor={props.id} $label={props.$label}>
+          {props.$label}
+        </StyledLabel>
+      )}
+      <StyledTextarea {...props} ref={ref}>
+        {props.children}
+      </StyledTextarea>
+    </StyledInputWrapper>
+  );
+}
+
+const Textarea = forwardRef(LocalTextarea);
+
+export { Textarea };

package/src/lib/toggle.tsx

@@ -1,160 +1,147 @@
-"use client";
-import React from "react";
-import styled from "styled-components";
-import {
-	theme as defaultTheme,
-	Theme,
-	resetButton,
-	statusBorderStyles,
-} from "./utils";
-import { StyledInputWrapper, StyledLabel } from "./input";
-
-interface ToggleProps extends React.InputHTMLAttributes<HTMLInputElement> {
-	children?: React.ReactNode;
-	type?: "checkbox" | "radio";
-	$label?: string;
-	$size?: "default" | "big";
-	$error?: boolean;
-	$success?: boolean;
-	$fullWidth?: boolean;
-	theme?: Theme;
-}
-
-const StyledToggleWrapper = styled.span<ToggleProps>`
-	display: inline-block;
-	margin: auto 0;
-	position: relative;
-	vertical-align: middle;
-`;
-
-const StyledFakeToggle = styled.span<ToggleProps>`
-	display: block;
-	border: solid 2px ${({ theme }) => theme.colors.grayLight};
-	background: ${({ theme }) => theme.colors.light};
-	border-radius: ${({ theme }) => theme.spacing.radius.xl};
-	pointer-events: none;
-	transition: all 0.3s ease;
-	box-shadow: 0 0 0 0 ${({ theme }) => theme.colors.primaryLight};
-	transform: none;
-	width: ${({ $size }) => ($size === "big" ? "56px" : "46px")};
-	height: ${({ $size }) => ($size === "big" ? "32px" : "22px")};
-
-	${({ $error, $success, theme }) => {
-		return statusBorderStyles(
-			$error ? true : false,
-			$success ? true : false,
-			theme,
-		);
-	}}
-
-	&::before,
-	&::after {
-		content: "";
-		display: block;
-		position: absolute;
-	}
-
-	&::before {
-		top: 5px;
-		left: 5px;
-		width: calc(100% - 10px);
-		height: calc(100% - 10px);
-		max-width: 0;
-		border-radius: ${({ theme }) => theme.spacing.radius.xl};
-		background: ${({ theme }) => theme.colors.light};
-		transition: all 0.3s ease;
-	}
-
-	&::after {
-		left: 0;
-		top: 0;
-		border-radius: 50%;
-		transition: all 0.3s ease;
-		transform: translateX(0);
-		background: ${({ theme }) => theme.colors.primary};
-		width: ${({ $size }) => ($size === "big" ? "32px" : "22px")};
-		height: ${({ $size }) => ($size === "big" ? "32px" : "22px")};
-	}
-`;
-
-const StyledToggle = styled.input<ToggleProps>`
-	${resetButton};
-	position: absolute;
-	left: 0;
-	top: 0;
-	width: 100%;
-	height: 100%;
-	outline: none;
-	z-index: 10;
-
-	&:checked ~ .fake-toggle {
-		&::before {
-			max-width: 46px;
-			background: ${({ theme }) => theme.colors.primaryLight};
-		}
-
-		&::after {
-			transform: translateX(25px);
-		}
-	}
-
-	@media (hover: hover) {
-		&:hover:not([disabled]) ~ .fake-toggle {
-			border-color: ${({ theme }) => theme.colors.primary};
-		}
-	}
-
-	&:focus:not([disabled]) ~ .fake-toggle {
-		outline: none;
-		border-color: ${({ theme }) => theme.colors.primary};
-		box-shadow: 0 0 0 4px ${({ theme }) => theme.colors.primaryLight};
-	}
-
-	&:active:not([disabled]) ~ .fake-toggle {
-		box-shadow: 0 0 0 2px ${({ theme }) => theme.colors.primaryLight};
-	}
-
-	${({ disabled, theme }) =>
-		disabled &&
-		`cursor: not-allowed;
-
-		& ~ .fake-toggle {
-			border-color: ${theme.colors.gray};
-
-			&::before {
-				background: ${theme.colors.grayLight};
-			}
-
-			&::after {
-				background: ${theme.colors.gray};
-			}
-		}`}
-`;
-
-function Toggle({
-	theme = defaultTheme,
-	type = "checkbox",
-	...props
-}: ToggleProps) {
-	return (
-		<StyledInputWrapper $fullWidth={props.$fullWidth} theme={theme}>
-			<StyledToggleWrapper theme={theme}>
-				<StyledToggle {...props} type={type} theme={theme} />
-				<StyledFakeToggle
-					$error={props.$error}
-					$success={props.$success}
-					className="fake-toggle"
-					$size={props.$size}
-					theme={theme}
-				/>
-			</StyledToggleWrapper>
-			{props.$label && (
-				<StyledLabel htmlFor={props.id} theme={theme}>
-					{props.$label}
-				</StyledLabel>
-			)}
-		</StyledInputWrapper>
-	);
-}
-
-export { Toggle };
+"use client";
+import React, { forwardRef } from "react";
+import styled from "styled-components";
+import { Theme, resetButton, statusBorderStyles } from "./utils";
+import { StyledInputWrapper, StyledLabel } from "./input";
+
+interface ToggleProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  children?: React.ReactNode;
+  type?: "checkbox" | "radio";
+  $label?: string;
+  $size?: "default" | "big";
+  $error?: boolean;
+  $success?: boolean;
+  $fullWidth?: boolean;
+  theme?: Theme;
+}
+
+const StyledToggleWrapper = styled.span<ToggleProps>`
+  display: inline-block;
+  margin: auto 0;
+  position: relative;
+  vertical-align: middle;
+`;
+
+const StyledFakeToggle = styled.span<ToggleProps>`
+  display: block;
+  border: solid 2px ${({ theme }) => theme.colors.grayLight};
+  background: ${({ theme }) => theme.colors.light};
+  border-radius: ${({ theme }) => theme.spacing.radius.xl};
+  pointer-events: none;
+  transition: all 0.3s ease;
+  box-shadow: 0 0 0 0 ${({ theme }) => theme.colors.primaryLight};
+  transform: none;
+  width: ${({ $size }) => ($size === "big" ? "56px" : "46px")};
+  height: ${({ $size }) => ($size === "big" ? "32px" : "22px")};
+
+  ${({ $error, $success, theme }) => {
+    return statusBorderStyles($error ? true : false, $success ? true : false, theme);
+  }}
+
+  &::before,
+	&::after {
+    content: "";
+    display: block;
+    position: absolute;
+  }
+
+  &::before {
+    top: 5px;
+    left: 5px;
+    width: calc(100% - 10px);
+    height: calc(100% - 10px);
+    max-width: 0;
+    border-radius: ${({ theme }) => theme.spacing.radius.xl};
+    background: ${({ theme }) => theme.colors.light};
+    transition: all 0.3s ease;
+  }
+
+  &::after {
+    left: 0;
+    top: 0;
+    border-radius: 50%;
+    transition: all 0.3s ease;
+    transform: translateX(0);
+    background: ${({ theme }) => theme.colors.primary};
+    width: ${({ $size }) => ($size === "big" ? "32px" : "22px")};
+    height: ${({ $size }) => ($size === "big" ? "32px" : "22px")};
+  }
+`;
+
+const StyledToggle = styled.input<ToggleProps>`
+  ${resetButton};
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  outline: none;
+  z-index: 10;
+
+  &:checked ~ .fake-toggle {
+    &::before {
+      max-width: 46px;
+      background: ${({ theme }) => theme.colors.primaryLight};
+    }
+
+    &::after {
+      transform: translateX(25px);
+    }
+  }
+
+  @media (hover: hover) {
+    &:hover:not([disabled]) ~ .fake-toggle {
+      border-color: ${({ theme }) => theme.colors.primary};
+    }
+  }
+
+  &:focus:not([disabled]) ~ .fake-toggle {
+    outline: none;
+    border-color: ${({ theme }) => theme.colors.primary};
+    box-shadow: 0 0 0 4px ${({ theme }) => theme.colors.primaryLight};
+  }
+
+  &:active:not([disabled]) ~ .fake-toggle {
+    box-shadow: 0 0 0 2px ${({ theme }) => theme.colors.primaryLight};
+  }
+
+  ${({ disabled, theme }) =>
+    disabled &&
+    `cursor: not-allowed;
+
+		& ~ .fake-toggle {
+			border-color: ${theme.colors.gray};
+
+			&::before {
+				background: ${theme.colors.grayLight};
+			}
+
+			&::after {
+				background: ${theme.colors.gray};
+			}
+		}`}
+`;
+
+function LocalToggle(
+  { type = "checkbox", ...props }: ToggleProps,
+  ref: React.Ref<HTMLInputElement>,
+) {
+  return (
+    <StyledInputWrapper $fullWidth={props.$fullWidth} $label={props.$label}>
+      <StyledToggleWrapper>
+        <StyledToggle {...props} type={type} ref={ref} />
+        <StyledFakeToggle
+          $error={props.$error}
+          $success={props.$success}
+          className="fake-toggle"
+          $size={props.$size}
+        />
+      </StyledToggleWrapper>
+      {props.$label && <StyledLabel htmlFor={props.id}>{props.$label}</StyledLabel>}
+    </StyledInputWrapper>
+  );
+}
+
+const Toggle = forwardRef(LocalToggle);
+
+export { Toggle };