cherry-styled-components 0.1.1 → 0.1.2

package/src/lib/col.tsx

@@ -1,45 +1,48 @@
-"use client";
-import React, { forwardRef } from "react";
-import styled from "styled-components";
-import { theme as defaultTheme, Theme, generateColSpanStyles } from "./utils";
-
-interface ColProps extends React.HTMLAttributes<HTMLDivElement> {
-  children?: React.ReactNode;
-  $span?: number;
-  $xsSpan?: number;
-  $smSpan?: number;
-  $mdSpan?: number;
-  $lgSpan?: number;
-  $xlSpan?: number;
-  $xxlSpan?: number;
-  $xxxlSpan?: number;
-  theme?: Theme;
-}
-
-const StyledCol = styled.div<ColProps>`
-  ${({ $span }) =>
-    $span &&
-    `
-		grid-column: span ${$span};
-	`}
-
-  ${({ $xsSpan }) => $xsSpan && generateColSpanStyles("xs", $xsSpan)}
-	${({ $smSpan }) => $smSpan && generateColSpanStyles("sm", $smSpan)}
-	${({ $mdSpan }) => $mdSpan && generateColSpanStyles("md", $mdSpan)}
-	${({ $lgSpan }) => $lgSpan && generateColSpanStyles("lg", $lgSpan)}
-	${({ $xlSpan }) => $xlSpan && generateColSpanStyles("xl", $xlSpan)}
-	${({ $xxlSpan }) => $xxlSpan && generateColSpanStyles("xxl", $xxlSpan)}
-	${({ $xxxlSpan }) => $xxxlSpan && generateColSpanStyles("xxxl", $xxxlSpan)}
-`;
-
-function LocalCol({ theme = defaultTheme, ...props }: ColProps, ref: React.Ref<HTMLDivElement>) {
-  return (
-    <StyledCol {...props} theme={theme} ref={ref}>
-      {props.children}
-    </StyledCol>
-  );
-}
-
-const Col = forwardRef(LocalCol);
-
-export { Col };
+"use client";
+import React, { forwardRef } from "react";
+import styled from "styled-components";
+import { theme as defaultTheme, Theme, generateColSpanStyles } from "./utils";
+
+interface ColProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+  $span?: number;
+  $xsSpan?: number;
+  $smSpan?: number;
+  $mdSpan?: number;
+  $lgSpan?: number;
+  $xlSpan?: number;
+  $xxlSpan?: number;
+  $xxxlSpan?: number;
+  theme?: Theme;
+}
+
+const StyledCol = styled.div<ColProps>`
+  ${({ $span }) =>
+    $span &&
+    `
+		grid-column: span ${$span};
+	`}
+
+  ${({ $xsSpan }) => $xsSpan && generateColSpanStyles("xs", $xsSpan)}
+	${({ $smSpan }) => $smSpan && generateColSpanStyles("sm", $smSpan)}
+	${({ $mdSpan }) => $mdSpan && generateColSpanStyles("md", $mdSpan)}
+	${({ $lgSpan }) => $lgSpan && generateColSpanStyles("lg", $lgSpan)}
+	${({ $xlSpan }) => $xlSpan && generateColSpanStyles("xl", $xlSpan)}
+	${({ $xxlSpan }) => $xxlSpan && generateColSpanStyles("xxl", $xxlSpan)}
+	${({ $xxxlSpan }) => $xxxlSpan && generateColSpanStyles("xxxl", $xxxlSpan)}
+`;
+
+function LocalCol(
+  { theme = defaultTheme, ...props }: ColProps,
+  ref: React.Ref<HTMLDivElement>,
+) {
+  return (
+    <StyledCol {...props} theme={theme} ref={ref}>
+      {props.children}
+    </StyledCol>
+  );
+}
+
+const Col = forwardRef(LocalCol);
+
+export { Col };

package/src/lib/container.tsx

@@ -1,59 +1,69 @@
-"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 };
+"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,92 +1,99 @@
-"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 };
+"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,64 +1,76 @@
-"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 };
+"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";