cherry-styled-components 0.1.0-9 → 0.1.1

package/src/lib/select.tsx

@@ -1,131 +1,121 @@
-"use client";
-import React from "react";
-import styled from "styled-components";
-import {
-	theme as defaultTheme,
-	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 {
-		padding-right: 40px;
-	}
-
-	& select:active:not([disabled]) ~ svg,
-	& select:focus:not([disabled]) ~ svg {
-		transform: translateY(-50%) rotate(180deg);
-	}
-`;
-
-function Select({ theme = defaultTheme, ...props }: SelectProps) {
-	return (
-		<StyledInputWrapper $fullWidth={props.$fullWidth} theme={theme}>
-			{props.$label && (
-				<StyledLabel htmlFor={props.id} theme={theme}>
-					{props.$label}
-				</StyledLabel>
-			)}
-			<StyledIconWrapper $fullWidth={props.$fullWidth} theme={theme}>
-				<StyledSelect {...props} theme={theme}>
-					{props.children}
-				</StyledSelect>
-				<IconArrow theme={theme} />
-			</StyledIconWrapper>
-		</StyledInputWrapper>
-	);
-}
-
-export { Select };
+"use client";
+import React, { forwardRef } from "react";
+import styled, { IStyledComponent } 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: 0 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};`
+      : `font-size: ${theme.fontSizes.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: IStyledComponent<"web", SelectProps> = 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 {
+    padding-right: 40px;
+  }
+
+  & select:active:not([disabled]) ~ svg,
+  & select:focus:not([disabled]) ~ svg {
+    transform: translateY(-50%) rotate(180deg);
+  }
+`;
+
+function LocalSelect({ ...props }: SelectProps, ref: React.Ref<HTMLSelectElement>) {
+  return (
+    <StyledInputWrapper $fullWidth={props.$fullWidth} $label={props.$label}>
+      {props.$label && <StyledLabel htmlFor={props.id}>{props.$label}</StyledLabel>}
+      <StyledIconWrapper $fullWidth={props.$fullWidth}>
+        <StyledSelect {...props} ref={ref}>
+          {props.children}
+        </StyledSelect>
+        <IconArrow />
+      </StyledIconWrapper>
+    </StyledInputWrapper>
+  );
+}
+
+const Select = forwardRef(LocalSelect);
+
+export { Select };

package/src/lib/space.tsx

@@ -1,54 +1,52 @@
-"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 };
+"use client";
+import React, { forwardRef } 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 LocalSpace({ ...props }: SpaceProps, ref: React.Ref<HTMLSpanElement>) {
+  return <StyledSpace {...props} ref={ref} />;
+}
+
+const Space = forwardRef(LocalSpace);
+
+export { Space };

package/src/lib/styled-components/index.ts

@@ -1,2 +1,2 @@
-export * from "./registry";
-export * from "./theme-provider";
+export * from "./registry";
+export * from "./theme-provider";

package/src/lib/styled-components/registry.tsx

@@ -1,26 +1,26 @@
-"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 };
+"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} enableVendorPrefixes>
+      {children}
+    </StyleSheetManager>
+  );
+}
+
+export { StyledComponentsRegistry };

package/src/lib/styled-components/theme-provider.tsx

@@ -1,21 +1,49 @@
-"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: any;
-	theme?: any;
-}) {
-	return (
-		<StyledThemeProvider theme={theme || defaultTheme}>
-			<GlobalStyles />
-			{children}
-		</StyledThemeProvider>
-	);
-}
-
-export { CherryThemeProvider };
+"use client";
+import React, { createContext, useEffect, useState } from "react";
+import { ThemeProvider as StyledThemeProvider } from "styled-components";
+import { GlobalStyles, Theme } from "../utils";
+
+interface ThemeContextProps {
+  setTheme: any;
+}
+
+export const ThemeContext = createContext<ThemeContextProps>({
+  setTheme: null,
+});
+
+function CherryThemeProvider({
+  children,
+  theme,
+  themeDark,
+}: {
+  children: React.ReactNode;
+  theme: Theme;
+  themeDark?: Theme;
+}) {
+  const [currentTheme, setTheme] = useState(theme);
+  useEffect(() => {
+    if (!themeDark) return setTheme(theme);
+    if (
+      localStorage.theme === "dark" ||
+      (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)
+    ) {
+      document.documentElement.classList.add("dark");
+      setTheme(themeDark);
+    } else {
+      document.documentElement.classList.remove("dark");
+      setTheme(theme);
+    }
+  }, []);
+  const GlobalStylesComponent = GlobalStyles(currentTheme);
+
+  return (
+    <StyledThemeProvider theme={currentTheme}>
+      <ThemeContext.Provider value={{ setTheme }}>
+        <GlobalStylesComponent />
+        {children}
+      </ThemeContext.Provider>
+    </StyledThemeProvider>
+  );
+}
+
+export { CherryThemeProvider };