cherry-styled-components 0.1.0-9 → 0.1.1

package/src/lib/container.tsx

@@ -1,64 +1,59 @@
-"use client";
-import React from "react";
-import styled from "styled-components";
-import {
-	theme as defaultTheme,
-	Theme,
-	mq,
-	generatePaddingStyles,
-} from "./utils";
-
-export interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
-	className?: string;
-	children?: React.ReactNode;
-	$fluid?: boolean;
-	$textAlign?: "right" | "left" | "center";
-	$padding?: number | "none";
-	$xsPadding?: number | "none";
-	$smPadding?: number | "none";
-	$mdPadding?: number | "none";
-	$lgPadding?: number | "none";
-	$xlPadding?: number | "none";
-	$xxlPadding?: number | "none";
-	$xxxlPadding?: number | "none";
-	theme?: Theme;
-}
-
-const StyledContainer = styled.div<ContainerProps>`
-	margin: auto;
-	width: 100%;
-	max-width: ${({ theme, $fluid }) =>
-		$fluid ? `100%` : theme.spacing.maxWidth.xs};
-	${({ $textAlign }) => $textAlign && `text-align: ${$textAlign}`};
-	padding: ${({ $padding, theme }) =>
-		($padding && `${$padding}px`) || theme.spacing.padding.xs};
-
-	${mq("lg")} {
-		padding: ${({ $padding, theme }) =>
-			($padding && `${$padding}px`) || theme.spacing.padding.lg};
-	}
-
-	${mq("xxxl")} {
-		max-width: ${({ theme, $fluid }) =>
-			$fluid ? `100%` : theme.spacing.maxWidth.xxxl};
-	}
-
-	${({ $xsPadding }) => $xsPadding && generatePaddingStyles("xs", $xsPadding)}
-	${({ $smPadding }) => $smPadding && generatePaddingStyles("sm", $smPadding)}
-	${({ $mdPadding }) => $mdPadding && generatePaddingStyles("md", $mdPadding)}
-	${({ $lgPadding }) => $lgPadding && generatePaddingStyles("lg", $lgPadding)}
-	${({ $xlPadding }) => $xlPadding && generatePaddingStyles("xl", $xlPadding)}
-	${({ $xxlPadding }) => $xxlPadding && generatePaddingStyles("xxl", $xxlPadding)}
-	${({ $xxxlPadding }) =>
-		$xxxlPadding && generatePaddingStyles("xxxl", $xxxlPadding)}
-`;
-
-function Container({ theme = defaultTheme, ...props }: ContainerProps) {
-	return (
-		<StyledContainer {...props} theme={theme}>
-			{props.children}
-		</StyledContainer>
-	);
-}
-
-export { Container };
+"use client";
+import React, { forwardRef } from "react";
+import styled from "styled-components";
+import { theme as defaultTheme, Theme, mq, generatePaddingStyles } from "./utils";
+
+export interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+  children?: React.ReactNode;
+  $fluid?: boolean;
+  $textAlign?: "right" | "left" | "center";
+  $padding?: number | "none";
+  $xsPadding?: number | "none";
+  $smPadding?: number | "none";
+  $mdPadding?: number | "none";
+  $lgPadding?: number | "none";
+  $xlPadding?: number | "none";
+  $xxlPadding?: number | "none";
+  $xxxlPadding?: number | "none";
+  theme?: Theme;
+}
+
+const StyledContainer = styled.div<ContainerProps>`
+  margin: auto;
+  width: 100%;
+  max-width: ${({ theme, $fluid }) => ($fluid ? `100%` : theme.spacing.maxWidth.xs)};
+  ${({ $textAlign }) => $textAlign && `text-align: ${$textAlign}`};
+  padding: ${({ $padding, theme }) => ($padding && `${$padding}px`) || theme.spacing.padding.xs};
+
+  ${mq("lg")} {
+    padding: ${({ $padding, theme }) => ($padding && `${$padding}px`) || theme.spacing.padding.lg};
+  }
+
+  ${mq("xxxl")} {
+    max-width: ${({ theme, $fluid }) => ($fluid ? `100%` : theme.spacing.maxWidth.xxxl)};
+  }
+
+  ${({ $xsPadding }) => $xsPadding && generatePaddingStyles("xs", $xsPadding)}
+  ${({ $smPadding }) => $smPadding && generatePaddingStyles("sm", $smPadding)}
+	${({ $mdPadding }) => $mdPadding && generatePaddingStyles("md", $mdPadding)}
+	${({ $lgPadding }) => $lgPadding && generatePaddingStyles("lg", $lgPadding)}
+	${({ $xlPadding }) => $xlPadding && generatePaddingStyles("xl", $xlPadding)}
+	${({ $xxlPadding }) => $xxlPadding && generatePaddingStyles("xxl", $xxlPadding)}
+	${({ $xxxlPadding }) => $xxxlPadding && generatePaddingStyles("xxxl", $xxxlPadding)}
+`;
+
+function LocalContainer(
+  { theme = defaultTheme, ...props }: ContainerProps,
+  ref: React.Ref<HTMLDivElement>,
+) {
+  return (
+    <StyledContainer {...props} theme={theme} ref={ref}>
+      {props.children}
+    </StyledContainer>
+  );
+}
+
+const Container = forwardRef(LocalContainer);
+
+export { Container };

package/src/lib/flex.tsx

@@ -1,95 +1,92 @@
-"use client";
-import React from "react";
-import styled from "styled-components";
-import {
-	theme as defaultTheme,
-	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({ theme = defaultTheme, ...props }: FlexProps) {
-	return (
-		<StyledFlex {...props} theme={theme}>
-			{props.children}
-		</StyledFlex>
-	);
-}
-
-export { Flex };
+"use client";
+import React, { forwardRef } from "react";
+import styled from "styled-components";
+import {
+  theme as defaultTheme,
+  Theme,
+  mq,
+  generateGapStyles,
+  generateJustifyContentStyles,
+  fullWidthStyles,
+} 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;
+  $direction?: "row" | "column" | "row-reverse" | "column-reverse";
+  $fullWidth?: boolean;
+  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};
+  flex-direction: ${({ $direction }) => $direction || "row"};
+
+  ${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)}
+  ${({ $fullWidth }) => fullWidthStyles($fullWidth ? true : false)}
+`;
+
+function LocalFlex({ theme = defaultTheme, ...props }: FlexProps, ref: React.Ref<HTMLDivElement>) {
+  return (
+    <StyledFlex {...props} theme={theme} ref={ref}>
+      {props.children}
+    </StyledFlex>
+  );
+}
+
+const Flex = forwardRef(LocalFlex);
+
+export { Flex };

package/src/lib/grid.tsx

@@ -1,70 +1,64 @@
-"use client";
-import React from "react";
-import styled from "styled-components";
-import {
-	theme as defaultTheme,
-	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({ theme = defaultTheme, ...props }: GridProps) {
-	return (
-		<StyledGrid {...props} theme={theme}>
-			{props.children}
-		</StyledGrid>
-	);
-}
-
-export { Grid };
+"use client";
+import React, { forwardRef } from "react";
+import styled from "styled-components";
+import { theme as defaultTheme, 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>`
+  width: 100%;
+  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 LocalGrid({ theme = defaultTheme, ...props }: GridProps, ref: React.Ref<HTMLDivElement>) {
+  return (
+    <StyledGrid {...props} theme={theme} ref={ref}>
+      {props.children}
+    </StyledGrid>
+  );
+}
+
+const Grid = forwardRef(LocalGrid);
+
+export { Grid };

package/src/lib/index.ts

@@ -1,15 +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";
+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";