cherry-styled-components 0.1.0-9 → 0.1.1

package/src/lib/max-width.tsx

@@ -1,43 +1,50 @@
-"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 };
+"use client";
+import React, { forwardRef } 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;
+  $m0?: boolean;
+}
+
+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: ${({ $m0 }) => ($m0 ? "0" : "auto")};
+
+  ${({ $size }) => `
+		${$size && styles($size)};
+	`}
+  ${(props) => responsiveStyles(props)}
+`;
+
+function LocalMaxWidth({ ...props }: MaxWidthProps, ref: React.Ref<HTMLDivElement>) {
+  return (
+    <StyledMaxWidth {...props} ref={ref}>
+      {props.children}
+    </StyledMaxWidth>
+  );
+}
+
+const MaxWidth = forwardRef(LocalMaxWidth);
+
+export { MaxWidth };

package/src/lib/range.tsx

@@ -1,226 +1,208 @@
-"use client";
-import React from "react";
-import styled from "styled-components";
-import {
-	theme as defaultTheme,
-	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({ theme = defaultTheme, ...props }: InputProps) {
-	return (
-		<StyledInputWrapper $fullWidth={props.$fullWidth} theme={theme}>
-			{props.$label && (
-				<StyledLabel htmlFor={props.id} theme={theme}>
-					{props.$label}
-				</StyledLabel>
-			)}
-			<StyledInput {...props} type="range" theme={theme} />
-		</StyledInputWrapper>
-	);
-}
-
-export { Range };
+"use client";
+import React, { forwardRef } 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 LocalRange({ ...props }: InputProps, ref: React.Ref<HTMLInputElement>) {
+  return (
+    <StyledInputWrapper $fullWidth={props.$fullWidth}>
+      {props.$label && <StyledLabel htmlFor={props.id}>{props.$label}</StyledLabel>}
+      <StyledInput {...props} type="range" ref={ref} />
+    </StyledInputWrapper>
+  );
+}
+
+const Range = forwardRef(LocalRange);
+
+export { Range };