cherry-styled-components 0.1.1 → 0.1.3

package/src/lib/utils/global.tsx

@@ -1,95 +1,95 @@
-"use client";
-import { createGlobalStyle } from "styled-components";
-import { Theme } from "./theme";
-
-const GlobalStyles = (theme: Theme) => createGlobalStyle`
-html,
-body {
-	margin: 0;
-	padding: 0;
-	min-height: 100%;
-	scroll-behavior: smooth;
-	background-color: ${theme.colors.light};
-}
-
-body {
-	font-family: "Inter", sans-serif;
-	-moz-osx-font-smoothing: grayscale;
-	-webkit-text-size-adjust: 100%;
-	-webkit-font-smoothing: antialiased;
-}
-
-* {
-	box-sizing: border-box;
-	min-width: 0;
-}
-
-pre,
-code,
-kbd,
-samp {
-	font-family: monospace, monospace;
-}
-
-pre,
-code,
-kbd,
-samp,
-blockquote,
-p,
-a,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-ul li,
-ol li {
-	margin: 0;
-	padding: 0;
-	color: ${theme.colors.dark};
-}
-
-a {
-	color: ${theme.isDark ? theme.colors.dark : theme.colors.primary};
-}
-
-ol,
-ul {
-	list-style: none;
-	margin: 0;
-	padding: 0;
-}
-
-figure {
-	margin: 0;
-}
-
-fieldset {
-	appearance: none;
-	border: none;
-}
-
-button,
-input,
-a,
-img,
-svg,
-svg * {
-	transition: all 0.3s ease;
-}
-
-strong,
-b {
-	font-weight: 700;
-}
-
-hr {
-  margin: 20px 0;
-  border: none;
-  border-bottom: 1px solid ${theme.colors.grayLight};
-}
-`;
-
-export { GlobalStyles };
+"use client";
+import { createGlobalStyle } from "styled-components";
+import { Theme } from "./theme";
+
+const GlobalStyles = (theme: Theme) => createGlobalStyle`
+html,
+body {
+	margin: 0;
+	padding: 0;
+	min-height: 100%;
+	scroll-behavior: smooth;
+	background-color: ${theme.colors.light};
+}
+
+body {
+	font-family: "Inter", sans-serif;
+	-moz-osx-font-smoothing: grayscale;
+	-webkit-text-size-adjust: 100%;
+	-webkit-font-smoothing: antialiased;
+}
+
+* {
+	box-sizing: border-box;
+	min-width: 0;
+}
+
+pre,
+code,
+kbd,
+samp {
+	font-family: monospace, monospace;
+}
+
+pre,
+code,
+kbd,
+samp,
+blockquote,
+p,
+a,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+ul li,
+ol li {
+	margin: 0;
+	padding: 0;
+	color: ${theme.colors.dark};
+}
+
+a {
+	color: ${theme.isDark ? theme.colors.dark : theme.colors.primary};
+}
+
+ol,
+ul {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+figure {
+	margin: 0;
+}
+
+fieldset {
+	appearance: none;
+	border: none;
+}
+
+button,
+input,
+a,
+img,
+svg,
+svg * {
+	transition: all 0.3s ease;
+}
+
+strong,
+b {
+	font-weight: 700;
+}
+
+hr {
+  margin: 20px 0;
+  border: none;
+  border-bottom: 1px solid ${theme.colors.grayLight};
+}
+`;
+
+export { GlobalStyles };

package/src/lib/utils/icons.tsx

@@ -1,84 +1,84 @@
-"use client";
-import React from "react";
-import { useTheme } from "styled-components";
-import { Theme } from "./theme";
-
-interface IconProps extends React.SVGProps<SVGSVGElement> {
-  theme?: Theme;
-}
-
-function IconCheck({ ...props }: IconProps) {
-  const theme: Theme = useTheme() as Theme;
-  return (
-    <svg
-      width="12"
-      height="10"
-      viewBox="0 0 12 10"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        d="M10 2L4.4 8L2 5.75"
-        stroke={theme.colors.primary}
-        strokeWidth="3"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
-
-function IconArrow({ ...props }: IconProps) {
-  const theme: Theme = useTheme() as Theme;
-  return (
-    <svg
-      width="16"
-      height="10"
-      viewBox="0 0 16 10"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        d="M2 2L8 8L14 2"
-        stroke={theme.colors.primary}
-        strokeWidth="3"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
-
-function IconCalendar({ ...props }: IconProps) {
-  const theme: Theme = useTheme() as Theme;
-
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke={theme.colors.primary}
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
-      <path d="M8 2v4" />
-      <path d="M16 2v4" />
-      <rect width="18" height="18" x="3" y="4" rx="2" />
-      <path d="M3 10h18" />
-      <path d="M8 14h.01" />
-      <path d="M12 14h.01" />
-      <path d="M16 14h.01" />
-      <path d="M8 18h.01" />
-      <path d="M12 18h.01" />
-      <path d="M16 18h.01" />
-    </svg>
-  );
-}
-
-export { IconCheck, IconArrow, IconCalendar };
+"use client";
+import React from "react";
+import { useTheme } from "styled-components";
+import { Theme } from "./theme";
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+  theme?: Theme;
+}
+
+function IconCheck({ ...props }: IconProps) {
+  const theme: Theme = useTheme() as Theme;
+  return (
+    <svg
+      width="12"
+      height="10"
+      viewBox="0 0 12 10"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M10 2L4.4 8L2 5.75"
+        stroke={theme.colors.primary}
+        strokeWidth="3"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function IconArrow({ ...props }: IconProps) {
+  const theme: Theme = useTheme() as Theme;
+  return (
+    <svg
+      width="16"
+      height="10"
+      viewBox="0 0 16 10"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M2 2L8 8L14 2"
+        stroke={theme.colors.primary}
+        strokeWidth="3"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function IconCalendar({ ...props }: IconProps) {
+  const theme: Theme = useTheme() as Theme;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke={theme.colors.primary}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M8 2v4" />
+      <path d="M16 2v4" />
+      <rect width="18" height="18" x="3" y="4" rx="2" />
+      <path d="M3 10h18" />
+      <path d="M8 14h.01" />
+      <path d="M12 14h.01" />
+      <path d="M16 14h.01" />
+      <path d="M8 18h.01" />
+      <path d="M12 18h.01" />
+      <path d="M16 18h.01" />
+    </svg>
+  );
+}
+
+export { IconCheck, IconArrow, IconCalendar };

package/src/lib/utils/index.ts

@@ -1,5 +1,5 @@
-export * from "./global";
-export * from "./icons";
-export * from "./mixins";
-export * from "./theme";
-export * from "./typography";
+export * from "./global";
+export * from "./icons";
+export * from "./mixins";
+export * from "./theme";
+export * from "./typography";

package/src/lib/utils/mixins.tsx

@@ -1,95 +1,108 @@
-"use client";
-import { css } from "styled-components";
-import { Breakpoints, Theme, mq } from "./theme";
-
-export const resetButton = css`
-  box-sizing: border-box;
-  appearance: none;
-  border: none;
-  background: none;
-  padding: 0;
-  margin: 0;
-  cursor: pointer;
-  outline: none;
-`;
-
-export const resetInput = css`
-  cursor: text;
-  min-width: 100px;
-`;
-
-export const fullWidthStyles = (fullWidth: boolean) => {
-  if (fullWidth) {
-    return css`
-      width: 100%;
-    `;
-  }
-};
-
-export const statusBorderStyles = ($error: boolean, $success: boolean, theme: Theme) => {
-  if ($error) {
-    return css`
-      border-color: ${theme?.colors.error};
-    `;
-  }
-
-  if ($success) {
-    return css`
-      border-color: ${theme?.colors.success};
-    `;
-  }
-};
-
-export const formElementHeightStyles = ($size?: "default" | "big") => {
-  if ($size === "big") {
-    return css`
-      height: 60px;
-    `;
-  }
-
-  return css`
-    height: 50px;
-  `;
-};
-
-export const generateGapStyles = (size: keyof Breakpoints<number>, gap: number | "none") => css`
-  ${mq(size)} {
-    gap: ${gap === "none" ? "0" : `${gap}px`};
-  }
-`;
-
-export const generateColsStyles = (size: keyof Breakpoints<number>, cols: number) => css`
-  ${mq(size)} {
-    grid-template-columns: repeat(${cols || 3}, minmax(0, 1fr));
-  }
-`;
-
-export const generateColSpanStyles = (size: keyof Breakpoints<number>, span: number) => css`
-  ${mq(size)} {
-    grid-column: span ${span};
-  }
-`;
-
-export const generatePaddingStyles = (
-  size: keyof Breakpoints<number>,
-  padding: number | "none",
-) => css`
-  ${mq(size)} {
-    padding: ${padding === "none" ? "0" : `${padding}px`};
-  }
-`;
-
-export const generateJustifyContentStyles = (
-  size: keyof Breakpoints<number>,
-  justifyContent?:
-    | "center"
-    | "flex-start"
-    | "flex-end"
-    | "space-between"
-    | "space-around"
-    | "space-evenly",
-) => css`
-  ${mq(size)} {
-    justify-content: ${justifyContent && `${justifyContent}`};
-  }
-`;
+"use client";
+import { css } from "styled-components";
+import { Breakpoints, Theme, mq } from "./theme";
+
+export const resetButton = css`
+  box-sizing: border-box;
+  appearance: none;
+  border: none;
+  background: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  outline: none;
+`;
+
+export const resetInput = css`
+  cursor: text;
+  min-width: 100px;
+`;
+
+export const fullWidthStyles = (fullWidth: boolean) => {
+  if (fullWidth) {
+    return css`
+      width: 100%;
+    `;
+  }
+};
+
+export const statusBorderStyles = (
+  $error: boolean,
+  $success: boolean,
+  theme: Theme,
+) => {
+  if ($error) {
+    return css`
+      border-color: ${theme?.colors.error};
+    `;
+  }
+
+  if ($success) {
+    return css`
+      border-color: ${theme?.colors.success};
+    `;
+  }
+};
+
+export const formElementHeightStyles = ($size?: "default" | "big") => {
+  if ($size === "big") {
+    return css`
+      height: 60px;
+    `;
+  }
+
+  return css`
+    height: 50px;
+  `;
+};
+
+export const generateGapStyles = (
+  size: keyof Breakpoints<number>,
+  gap: number | "none",
+) => css`
+  ${mq(size)} {
+    gap: ${gap === "none" ? "0" : `${gap}px`};
+  }
+`;
+
+export const generateColsStyles = (
+  size: keyof Breakpoints<number>,
+  cols: number,
+) => css`
+  ${mq(size)} {
+    grid-template-columns: repeat(${cols || 3}, minmax(0, 1fr));
+  }
+`;
+
+export const generateColSpanStyles = (
+  size: keyof Breakpoints<number>,
+  span: number,
+) => css`
+  ${mq(size)} {
+    grid-column: span ${span};
+  }
+`;
+
+export const generatePaddingStyles = (
+  size: keyof Breakpoints<number>,
+  padding: number | "none",
+) => css`
+  ${mq(size)} {
+    padding: ${padding === "none" ? "0" : `${padding}px`};
+  }
+`;
+
+export const generateJustifyContentStyles = (
+  size: keyof Breakpoints<number>,
+  justifyContent?:
+    | "center"
+    | "flex-start"
+    | "flex-end"
+    | "space-between"
+    | "space-around"
+    | "space-evenly",
+) => css`
+  ${mq(size)} {
+    justify-content: ${justifyContent && `${justifyContent}`};
+  }
+`;