cherry-styled-components 0.1.13 → 0.1.14

package/dist/utils/mixins.js

@@ -1,88 +1,46 @@
 "use client";
-import { css } from "styled-components";
+"use client";
 import { mq } from "./theme.js";
-const resetButton = css`
-  box-sizing: border-box;
-  appearance: none;
-  border: none;
-  background: none;
-  padding: 0;
-  margin: 0;
-  cursor: pointer;
-  outline: none;
-`;
-const resetInput = css`
-  cursor: text;
-  min-width: 100px;
-`;
-const fullWidthStyles = (fullWidth) => {
-  if (fullWidth) {
-    return css`
-      width: 100%;
-    `;
-  }
-};
-const statusBorderStyles = ($error, $success, theme) => {
-  if ($error) {
-    return css`
-      border-color: ${theme?.colors.error};
-    `;
-  }
-  if ($success) {
-    return css`
-      border-color: ${theme?.colors.success};
-    `;
-  }
+import { css } from "styled-components";
+//#region src/lib/utils/mixins.tsx
+var resetButton = css([`box-sizing:border-box;appearance:none;border:none;background:none;padding:0;margin:0;cursor:pointer;outline:none;`]);
+var resetInput = css([`cursor:text;min-width:100px;`]);
+var fullWidthStyles = (fullWidth) => {
+	if (fullWidth) return css([`width:100%;`]);
 };
-const formElementHeightStyles = ($size) => {
-  if ($size === "big") {
-    return css`
-      height: 60px;
-    `;
-  }
-  if ($size === "small") {
-    return css`
-      height: 40px;
-    `;
-  }
-  return css`
-    height: 50px;
-  `;
+var statusBorderStyles = ($error, $success, theme) => {
+	if ($error) return css([`border-color:`, `;`], theme?.colors.error);
+	if ($success) return css([`border-color:`, `;`], theme?.colors.success);
 };
-const generateGapStyles = (size, gap) => css`
-  ${mq(size)} {
-    gap: ${gap === "none" ? "0" : `${gap}px`};
-  }
-`;
-const generateColsStyles = (size, cols) => css`
-  ${mq(size)} {
-    grid-template-columns: repeat(${cols || 3}, minmax(0, 1fr));
-  }
-`;
-const generateColSpanStyles = (size, span) => css`
-  ${mq(size)} {
-    grid-column: span ${span};
-  }
-`;
-const generatePaddingStyles = (size, padding) => css`
-  ${mq(size)} {
-    padding: ${padding === "none" ? "0" : `${padding}px`};
-  }
-`;
-const generateJustifyContentStyles = (size, justifyContent) => css`
-  ${mq(size)} {
-    justify-content: ${justifyContent && `${justifyContent}`};
-  }
-`;
-export {
-  formElementHeightStyles,
-  fullWidthStyles,
-  generateColSpanStyles,
-  generateColsStyles,
-  generateGapStyles,
-  generateJustifyContentStyles,
-  generatePaddingStyles,
-  resetButton,
-  resetInput,
-  statusBorderStyles
+var formElementHeightStyles = ($size) => {
+	if ($size === "big") return css([`height:60px;`]);
+	if ($size === "small") return css([`height:40px;`]);
+	return css([`height:50px;`]);
 };
+var generateGapStyles = (size, gap) => css([
+	``,
+	`{gap:`,
+	`;}`
+], mq(size), gap === "none" ? "0" : `${gap}px`);
+var generateColsStyles = (size, cols) => css([
+	``,
+	`{grid-template-columns:repeat(`,
+	`,minmax(0,1fr));}`
+], mq(size), cols || 3);
+var generateColSpanStyles = (size, span) => css([
+	``,
+	`{grid-column:span `,
+	`;}`
+], mq(size), span);
+var generatePaddingStyles = (size, padding) => css([
+	``,
+	`{padding:`,
+	`;}`
+], mq(size), padding === "none" ? "0" : `${padding}px`);
+var generateJustifyContentStyles = (size, justifyContent) => css([
+	``,
+	`{justify-content:`,
+	`;}`
+], mq(size), justifyContent && `${justifyContent}`);
+//#endregion
+export { formElementHeightStyles, fullWidthStyles, generateColSpanStyles, generateColsStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, resetButton, resetInput, statusBorderStyles };

package/dist/utils/theme.js

@@ -1,156 +1,279 @@
 "use client";
-const breakpoints = {
-  xs: 0,
-  sm: 576,
-  md: 768,
-  lg: 992,
-  xl: 1200,
-  xxl: 1440,
-  xxxl: 1920
+"use client";
+//#region src/lib/utils/theme.ts
+var breakpoints = {
+	xs: 0,
+	sm: 576,
+	md: 768,
+	lg: 992,
+	xl: 1200,
+	xxl: 1440,
+	xxxl: 1920
 };
 function mq(minWidth) {
-  return `@media screen and (min-width: ${breakpoints[minWidth]}px)`;
+	return `@media screen and (min-width: ${breakpoints[minWidth]}px)`;
 }
-const spacing = {
-  maxWidth: { xs: "1280px", xxxl: "1440px" },
-  padding: { xs: "20px", lg: "40px" },
-  radius: { xs: "6px", lg: "12px", xl: "30px" },
-  gridGap: { xs: "20px", lg: "40px" }
-};
-const colors = {
-  primaryLight: "#91aec4",
-  primary: "#4d6f8b",
-  primaryDark: "#194569",
-  secondaryLight: "#a4b17b",
-  secondary: "#5c6e46",
-  secondaryDark: "#354c2b",
-  tertiaryLight: "#ebccb9",
-  tertiary: "#816b5a",
-  tertiaryDark: "#675445",
-  grayLight: "#e5e7eb",
-  gray: "#9ca3af",
-  grayDark: "#4b5563",
-  success: "#84cc16",
-  error: "#ef4444",
-  warning: "#eab308",
-  info: "#06b6d4",
-  dark: "#000000",
-  light: "#ffffff"
+var spacing = {
+	maxWidth: {
+		xs: "1280px",
+		xxxl: "1440px"
+	},
+	padding: {
+		xs: "20px",
+		lg: "40px"
+	},
+	radius: {
+		xs: "6px",
+		lg: "12px",
+		xl: "30px"
+	},
+	gridGap: {
+		xs: "20px",
+		lg: "40px"
+	}
 };
-const colorsDark = {
-  primaryLight: "#79C5FF",
-  primary: "#6198C6",
-  primaryDark: "#339DF4",
-  secondaryLight: "#a4b17b",
-  secondary: "#5c6e46",
-  secondaryDark: "#354c2b",
-  tertiaryLight: "#ebccb9",
-  tertiary: "#816b5a",
-  tertiaryDark: "#675445",
-  grayLight: "#1a1a1a",
-  gray: "#454444",
-  grayDark: "#808080",
-  success: "#84cc16",
-  error: "#ef4444",
-  warning: "#eab308",
-  info: "#06b6d4",
-  dark: "#ffffff",
-  light: "#000000"
+var colors = {
+	primaryLight: "#91aec4",
+	primary: "#4d6f8b",
+	primaryDark: "#194569",
+	secondaryLight: "#a4b17b",
+	secondary: "#5c6e46",
+	secondaryDark: "#354c2b",
+	tertiaryLight: "#ebccb9",
+	tertiary: "#816b5a",
+	tertiaryDark: "#675445",
+	grayLight: "#e5e7eb",
+	gray: "#9ca3af",
+	grayDark: "#4b5563",
+	success: "#84cc16",
+	error: "#ef4444",
+	warning: "#eab308",
+	info: "#06b6d4",
+	dark: "#000000",
+	light: "#ffffff"
 };
-const shadows = {
-  xs: "0px 4px 4px 0px rgba(18, 18, 18, 0.04), 0px 1px 3px 0px rgba(39, 41, 45, 0.02)",
-  sm: "0px 4px 4px 0px rgba(18, 18, 18, 0.08), 0px 1px 3px 0px rgba(39, 41, 45, 0.04)",
-  md: "0px 8px 8px 0px rgba(18, 18, 18, 0.16), 0px 2px 3px 0px rgba(39, 41, 45, 0.06)",
-  lg: "0px 16px 24px 0px rgba(18, 18, 18, 0.20), 0px 2px 3px 0px rgba(39, 41, 45, 0.08)",
-  xl: "0px 24px 32px 0px rgba(18, 18, 18, 0.24), 0px 2px 3px 0px rgba(39, 41, 45, 0.12)"
+var colorsDark = {
+	primaryLight: "#79C5FF",
+	primary: "#6198C6",
+	primaryDark: "#339DF4",
+	secondaryLight: "#a4b17b",
+	secondary: "#5c6e46",
+	secondaryDark: "#354c2b",
+	tertiaryLight: "#ebccb9",
+	tertiary: "#816b5a",
+	tertiaryDark: "#675445",
+	grayLight: "#1a1a1a",
+	gray: "#454444",
+	grayDark: "#808080",
+	success: "#84cc16",
+	error: "#ef4444",
+	warning: "#eab308",
+	info: "#06b6d4",
+	dark: "#ffffff",
+	light: "#000000"
 };
-const shadowsDark = {
-  xs: "0px 4px 4px 0px rgba(255, 255, 255, 0.04), 0px 1px 3px 0px rgba(255, 255, 255, 0.02)",
-  sm: "0px 4px 4px 0px rgba(255, 255, 255, 0.08), 0px 1px 3px 0px rgba(255, 255, 255, 0.04)",
-  md: "0px 8px 8px 0px rgba(255, 255, 255, 0.16), 0px 2px 3px 0px rgba(255, 255, 255, 0.06)",
-  lg: "0px 16px 24px 0px rgba(255, 255, 255, 0.20), 0px 2px 3px 0px rgba(255, 255, 255, 0.08)",
-  xl: "0px 24px 32px 0px rgba(255, 255, 255, 0.24), 0px 2px 3px 0px rgba(255, 255, 255, 0.12)"
+var shadows = {
+	xs: "0px 4px 4px 0px rgba(18, 18, 18, 0.04), 0px 1px 3px 0px rgba(39, 41, 45, 0.02)",
+	sm: "0px 4px 4px 0px rgba(18, 18, 18, 0.08), 0px 1px 3px 0px rgba(39, 41, 45, 0.04)",
+	md: "0px 8px 8px 0px rgba(18, 18, 18, 0.16), 0px 2px 3px 0px rgba(39, 41, 45, 0.06)",
+	lg: "0px 16px 24px 0px rgba(18, 18, 18, 0.20), 0px 2px 3px 0px rgba(39, 41, 45, 0.08)",
+	xl: "0px 24px 32px 0px rgba(18, 18, 18, 0.24), 0px 2px 3px 0px rgba(39, 41, 45, 0.12)"
 };
-const fonts = {
-  text: "Inter",
-  head: "Inter",
-  mono: "monospace"
+var shadowsDark = {
+	xs: "0px 4px 4px 0px rgba(255, 255, 255, 0.04), 0px 1px 3px 0px rgba(255, 255, 255, 0.02)",
+	sm: "0px 4px 4px 0px rgba(255, 255, 255, 0.08), 0px 1px 3px 0px rgba(255, 255, 255, 0.04)",
+	md: "0px 8px 8px 0px rgba(255, 255, 255, 0.16), 0px 2px 3px 0px rgba(255, 255, 255, 0.06)",
+	lg: "0px 16px 24px 0px rgba(255, 255, 255, 0.20), 0px 2px 3px 0px rgba(255, 255, 255, 0.08)",
+	xl: "0px 24px 32px 0px rgba(255, 255, 255, 0.24), 0px 2px 3px 0px rgba(255, 255, 255, 0.12)"
 };
-const fontSizes = {
-  hero1: { xs: "72px", lg: "128px" },
-  hero2: { xs: "60px", lg: "96px" },
-  hero3: { xs: "36px", lg: "72px" },
-  h1: { xs: "40px", lg: "60px" },
-  h2: { xs: "30px", lg: "36px" },
-  h3: { xs: "28px", lg: "30px" },
-  h4: { xs: "26px", lg: "24px" },
-  h5: { xs: "18px", lg: "20px" },
-  h6: { xs: "16px", lg: "18px" },
-  text: { xs: "14px", lg: "16px" },
-  strong: { xs: "14px", lg: "16px" },
-  small: { xs: "12px", lg: "14px" },
-  blockquote: { xs: "16px", lg: "18px" },
-  code: { xs: "14px", lg: "16px" },
-  button: { xs: "16px", lg: "16px" },
-  buttonBig: { xs: "18px", lg: "18px" },
-  buttonSmall: { xs: "14px", lg: "14px" },
-  input: { xs: "16px", lg: "16px" },
-  inputBig: { xs: "18px", lg: "18px" },
-  inputSmall: { xs: "14px", lg: "14px" }
+var fonts = {
+	text: "Inter",
+	head: "Inter",
+	mono: "monospace"
 };
-const lineHeights = {
-  hero1: { xs: "1.10", lg: "1.10" },
-  hero2: { xs: "1.10", lg: "1.10" },
-  hero3: { xs: "1.20", lg: "1.10" },
-  h1: { xs: "1.50", lg: "1.40" },
-  h2: { xs: "1.50", lg: "1.50" },
-  h3: { xs: "1.30", lg: "1.50" },
-  h4: { xs: "1.30", lg: "1.50" },
-  h5: { xs: "1.60", lg: "1.50" },
-  h6: { xs: "1.60", lg: "1.60" },
-  text: { xs: "1.70", lg: "1.70" },
-  strong: { xs: "1.70", lg: "1.70" },
-  small: { xs: "1.70", lg: "1.70" },
-  blockquote: { xs: "1.70", lg: "1.70" },
-  code: { xs: "1.70", lg: "1.70" },
-  button: { xs: "1.00", lg: "1.00" },
-  buttonBig: { xs: "1.00", lg: "1.00" },
-  buttonSmall: { xs: "1.00", lg: "1.00" },
-  input: { xs: "1.00", lg: "1.00" },
-  inputBig: { xs: "1.00", lg: "1.00" },
-  inputSmall: { xs: "1.00", lg: "1.00" }
+var fontSizes = {
+	hero1: {
+		xs: "72px",
+		lg: "128px"
+	},
+	hero2: {
+		xs: "60px",
+		lg: "96px"
+	},
+	hero3: {
+		xs: "36px",
+		lg: "72px"
+	},
+	h1: {
+		xs: "40px",
+		lg: "60px"
+	},
+	h2: {
+		xs: "30px",
+		lg: "36px"
+	},
+	h3: {
+		xs: "28px",
+		lg: "30px"
+	},
+	h4: {
+		xs: "26px",
+		lg: "24px"
+	},
+	h5: {
+		xs: "18px",
+		lg: "20px"
+	},
+	h6: {
+		xs: "16px",
+		lg: "18px"
+	},
+	text: {
+		xs: "14px",
+		lg: "16px"
+	},
+	strong: {
+		xs: "14px",
+		lg: "16px"
+	},
+	small: {
+		xs: "12px",
+		lg: "14px"
+	},
+	blockquote: {
+		xs: "16px",
+		lg: "18px"
+	},
+	code: {
+		xs: "14px",
+		lg: "16px"
+	},
+	button: {
+		xs: "16px",
+		lg: "16px"
+	},
+	buttonBig: {
+		xs: "18px",
+		lg: "18px"
+	},
+	buttonSmall: {
+		xs: "14px",
+		lg: "14px"
+	},
+	input: {
+		xs: "16px",
+		lg: "16px"
+	},
+	inputBig: {
+		xs: "18px",
+		lg: "18px"
+	},
+	inputSmall: {
+		xs: "14px",
+		lg: "14px"
+	}
 };
-const theme = {
-  breakpoints,
-  spacing,
-  colors,
-  shadows,
-  fonts,
-  fontSizes,
-  lineHeights,
-  isDark: false
+var lineHeights = {
+	hero1: {
+		xs: "1.10",
+		lg: "1.10"
+	},
+	hero2: {
+		xs: "1.10",
+		lg: "1.10"
+	},
+	hero3: {
+		xs: "1.20",
+		lg: "1.10"
+	},
+	h1: {
+		xs: "1.50",
+		lg: "1.40"
+	},
+	h2: {
+		xs: "1.50",
+		lg: "1.50"
+	},
+	h3: {
+		xs: "1.30",
+		lg: "1.50"
+	},
+	h4: {
+		xs: "1.30",
+		lg: "1.50"
+	},
+	h5: {
+		xs: "1.60",
+		lg: "1.50"
+	},
+	h6: {
+		xs: "1.60",
+		lg: "1.60"
+	},
+	text: {
+		xs: "1.70",
+		lg: "1.70"
+	},
+	strong: {
+		xs: "1.70",
+		lg: "1.70"
+	},
+	small: {
+		xs: "1.70",
+		lg: "1.70"
+	},
+	blockquote: {
+		xs: "1.70",
+		lg: "1.70"
+	},
+	code: {
+		xs: "1.70",
+		lg: "1.70"
+	},
+	button: {
+		xs: "1.00",
+		lg: "1.00"
+	},
+	buttonBig: {
+		xs: "1.00",
+		lg: "1.00"
+	},
+	buttonSmall: {
+		xs: "1.00",
+		lg: "1.00"
+	},
+	input: {
+		xs: "1.00",
+		lg: "1.00"
+	},
+	inputBig: {
+		xs: "1.00",
+		lg: "1.00"
+	},
+	inputSmall: {
+		xs: "1.00",
+		lg: "1.00"
+	}
 };
-const themeDark = {
-  breakpoints,
-  spacing,
-  colors: colorsDark,
-  shadows: shadowsDark,
-  fonts,
-  fontSizes,
-  lineHeights,
-  isDark: true
+var theme = {
+	breakpoints,
+	spacing,
+	colors,
+	shadows,
+	fonts,
+	fontSizes,
+	lineHeights,
+	isDark: false
 };
-export {
-  breakpoints,
-  colors,
-  colorsDark,
-  fontSizes,
-  fonts,
-  lineHeights,
-  mq,
-  shadows,
-  shadowsDark,
-  spacing,
-  theme,
-  themeDark
+var themeDark = {
+	breakpoints,
+	spacing,
+	colors: colorsDark,
+	shadows: shadowsDark,
+	fonts,
+	fontSizes,
+	lineHeights,
+	isDark: true
 };
+//#endregion
+export { breakpoints, colors, colorsDark, fontSizes, fonts, lineHeights, mq, shadows, shadowsDark, spacing, theme, themeDark };

package/dist/utils/typography.js

@@ -1,51 +1,33 @@
 "use client";
-import { css } from "styled-components";
+"use client";
 import { mq } from "./theme.js";
-const createTypographyStyle = (key) => (theme) => css`
-  font-size: ${theme.fontSizes[key].xs};
-  line-height: ${theme.lineHeights[key].xs};
-
-  ${mq("lg")} {
-    font-size: ${theme.fontSizes[key].lg};
-    line-height: ${theme.lineHeights[key].lg};
-  }
-`;
-const styledHero1 = createTypographyStyle("hero1");
-const styledHero2 = createTypographyStyle("hero2");
-const styledHero3 = createTypographyStyle("hero3");
-const styledH1 = createTypographyStyle("h1");
-const styledH2 = createTypographyStyle("h2");
-const styledH3 = createTypographyStyle("h3");
-const styledH4 = createTypographyStyle("h4");
-const styledH5 = createTypographyStyle("h5");
-const styledH6 = createTypographyStyle("h6");
-const styledText = createTypographyStyle("text");
-const styledStrong = createTypographyStyle("strong");
-const styledSmall = createTypographyStyle("small");
-const styledBlockquote = createTypographyStyle("blockquote");
-const styledCode = createTypographyStyle("code");
-const styledButton = createTypographyStyle("button");
-const styledButtonBig = createTypographyStyle("buttonBig");
-const styledInput = createTypographyStyle("input");
-const styledInputBig = createTypographyStyle("inputBig");
-export {
-  createTypographyStyle,
-  styledBlockquote,
-  styledButton,
-  styledButtonBig,
-  styledCode,
-  styledH1,
-  styledH2,
-  styledH3,
-  styledH4,
-  styledH5,
-  styledH6,
-  styledHero1,
-  styledHero2,
-  styledHero3,
-  styledInput,
-  styledInputBig,
-  styledSmall,
-  styledStrong,
-  styledText
-};
+import { css } from "styled-components";
+//#region src/lib/utils/typography.tsx
+var createTypographyStyle = (key) => (theme) => css([
+	`font-size:`,
+	`;line-height:`,
+	`;`,
+	`{font-size:`,
+	`;line-height:`,
+	`;}`
+], theme.fontSizes[key].xs, theme.lineHeights[key].xs, mq("lg"), theme.fontSizes[key].lg, theme.lineHeights[key].lg);
+var styledHero1 = createTypographyStyle("hero1");
+var styledHero2 = createTypographyStyle("hero2");
+var styledHero3 = createTypographyStyle("hero3");
+var styledH1 = createTypographyStyle("h1");
+var styledH2 = createTypographyStyle("h2");
+var styledH3 = createTypographyStyle("h3");
+var styledH4 = createTypographyStyle("h4");
+var styledH5 = createTypographyStyle("h5");
+var styledH6 = createTypographyStyle("h6");
+var styledText = createTypographyStyle("text");
+var styledStrong = createTypographyStyle("strong");
+var styledSmall = createTypographyStyle("small");
+var styledBlockquote = createTypographyStyle("blockquote");
+var styledCode = createTypographyStyle("code");
+var styledButton = createTypographyStyle("button");
+var styledButtonBig = createTypographyStyle("buttonBig");
+var styledInput = createTypographyStyle("input");
+var styledInputBig = createTypographyStyle("inputBig");
+//#endregion
+export { createTypographyStyle, styledBlockquote, styledButton, styledButtonBig, styledCode, styledH1, styledH2, styledH3, styledH4, styledH5, styledH6, styledHero1, styledHero2, styledHero3, styledInput, styledInputBig, styledSmall, styledStrong, styledText };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cherry-styled-components",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "description": "Cherry is a design system for the modern web. Designed in Figma, built in React using Typescript.",
   "private": false,
   "type": "module",
@@ -41,7 +41,7 @@
     "format": "prettier --write ."
   },
   "dependencies": {
-    "lucide-react": "^0.575.0",
+    "lucide-react": "^1.7.0",
     "polished": "^4.3.1"
   },
   "peerDependencies": {
@@ -50,20 +50,21 @@
     "styled-components": "^6.0.0"
   },
   "devDependencies": {
-    "@types/node": "^25.3.0",
+    "@swc/plugin-styled-components": "^12.7.0",
+    "@types/node": "^25.5.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.4",
+    "@vitejs/plugin-react-swc": "^4.3.0",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.5.0",
-    "next": "^16.1.6",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "next": "^16.2.1",
     "prettier": "^3.8.1",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "rollup-plugin-preserve-directives": "^0.4.0",
-    "styled-components": "^6.3.11",
-    "typescript": "^5.9.3",
-    "vite": "^7.3.1",
+    "styled-components": "^6.3.12",
+    "typescript": "^6.0.2",
+    "vite": "^8.0.3",
     "vite-plugin-dts": "^4.5.4"
   }
 }