cherry-styled-components 0.2.17 → 0.2.19

package/dist/icon-button.js

@@ -25,6 +25,10 @@ var iconButtonStyles = (theme, $size, $error, disabled, $active) => {
 		``,
 		`;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;width:`,
 		`px;height:`,
+		`px;min-width:`,
+		`px;max-width:`,
+		`px;min-height:`,
+		`px;max-height:`,
 		`px;border-radius:50%;background:`,
 		`;border:solid 2px `,
 		`;color:`,
@@ -35,7 +39,7 @@ var iconButtonStyles = (theme, $size, $error, disabled, $active) => {
 		` `,
 		` `,
 		``
-	], resetButton, box, box, theme.colors.light, theme.colors.grayLight, $error ? theme.colors.error : theme.colors.grayDark, $error ? tint(theme.colors.error, 10) : theme.colors.primaryLight, icon, icon, !disabled && ($error ? css([
+	], resetButton, box, box, box, box, box, box, theme.colors.light, theme.colors.grayLight, $error ? theme.colors.error : theme.colors.grayDark, $error ? tint(theme.colors.error, 10) : theme.colors.primaryLight, icon, icon, !disabled && ($error ? css([
 		`border-color:`,
 		`;&:hover{border-color:`,
 		`;color:`,
@@ -64,7 +68,7 @@ var iconButtonStyles = (theme, $size, $error, disabled, $active) => {
 };
 var StyledIconButton = styled.button.withConfig({
 	displayName: "icon-button__StyledIconButton",
-	componentId: "sc-3df98d32-0"
+	componentId: "sc-9fd4b85f-0"
 })([``, ``], ({ theme, $size, $error, disabled, $active }) => iconButtonStyles(theme, $size, $error, disabled, $active));
 function LocalIconButton({ ...props }, ref) {
 	return /*#__PURE__*/ jsx(StyledIconButton, {

package/dist/toggle.js

@@ -8,11 +8,11 @@ import styled from "styled-components";
 //#region src/lib/toggle.tsx
 var StyledToggleWrapper = styled.span.withConfig({
 	displayName: "toggle__StyledToggleWrapper",
-	componentId: "sc-279a0aa6-0"
+	componentId: "sc-aa895e38-0"
 })([`display:inline-block;margin:auto 0;position:relative;vertical-align:middle;`]);
 var StyledFakeToggle = styled.span.withConfig({
 	displayName: "toggle__StyledFakeToggle",
-	componentId: "sc-279a0aa6-1"
+	componentId: "sc-aa895e38-1"
 })([
 	`display:block;border:solid 2px `,
 	`;background:`,
@@ -32,7 +32,7 @@ var StyledFakeToggle = styled.span.withConfig({
 }, ({ theme }) => theme.spacing.radius.xl, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.primary, ({ $size }) => $size === "big" ? "32px" : $size === "small" ? "18px" : "22px", ({ $size }) => $size === "big" ? "32px" : $size === "small" ? "18px" : "22px");
 var StyledToggle = styled.input.withConfig({
 	displayName: "toggle__StyledToggle",
-	componentId: "sc-279a0aa6-2"
+	componentId: "sc-aa895e38-2"
 })([
 	``,
 	`;position:absolute;left:0;top:0;width:100%;height:100%;outline:none;z-index:10;&:checked ~ .fake-toggle{&::before{max-width:46px;background:`,
@@ -41,21 +41,11 @@ var StyledToggle = styled.input.withConfig({
 	`;}&:focus:not([disabled]) ~ .fake-toggle{outline:none;border-color:`,
 	`;box-shadow:0 0 0 4px `,
 	`;}&:active:not([disabled]) ~ .fake-toggle{box-shadow:0 0 0 2px `,
-	`;}`,
-	``
-], resetButton, ({ theme }) => theme.colors.primaryLight, ({ $size }) => $size === "big" ? "25px" : $size === "small" ? "20px" : "25px", ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primaryLight, ({ theme }) => theme.colors.primaryLight, ({ disabled, theme }) => disabled && `cursor: not-allowed;
-
-		& ~ .fake-toggle {
-			border-color: ${theme.colors.gray};
-
-			&::before {
-				background: ${theme.colors.grayLight};
-			}
-
-			&::after {
-				background: ${theme.colors.gray};
-			}
-		}`);
+	`;}&:disabled{cursor:not-allowed;}&:disabled ~ .fake-toggle,&:disabled:checked ~ .fake-toggle{border-color:`,
+	`;&::before{background:`,
+	`;}&::after{background:`,
+	`;}}`
+], resetButton, ({ theme }) => theme.colors.primaryLight, ({ $size }) => $size === "big" ? "25px" : $size === "small" ? "20px" : "25px", ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primaryLight, ({ theme }) => theme.colors.primaryLight, ({ theme }) => theme.colors.gray, ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.colors.gray);
 function LocalToggle({ type = "checkbox", ...props }, ref) {
 	return /*#__PURE__*/ jsxs(StyledInputWrapper, {
 		$fullWidth: props.$fullWidth,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cherry-styled-components",
-  "version": "0.2.17",
+  "version": "0.2.19",
   "description": "Cherry is a design system for the modern web. Designed in Figma, built in React using Typescript.",
   "private": false,
   "type": "module",
@@ -28,7 +28,7 @@
   "homepage": "https://cherry.al",
   "repository": "https://github.com/cherry-design-system/styled-components",
   "license": "MIT",
-  "packageManager": "pnpm@12.3.4",
+  "packageManager": "pnpm@12.4.1",
   "engines": {
     "node": ">=18.0.0"
   },
@@ -61,23 +61,23 @@
   "devDependencies": {
     "@swc/plugin-styled-components": "^14.0.0",
     "@types/node": "^26.4.1",
-    "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.7",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
     "@typescript/typescript6": "^6.0.2",
     "@vitejs/plugin-react-swc": "^4.3.3",
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.6",
-    "lucide-react": "^1.41.0",
+    "lucide-react": "^1.44.0",
     "next": "^16.3.4",
     "playwright-core": "^1.63.0",
     "prettier": "^3.9.6",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
     "rollup-plugin-preserve-directives": "^0.4.0",
     "sharp": "^0.35.4",
     "styled-components": "^6.5.3",
     "typescript": "^7.0.2",
-    "vite": "^8.2.2",
+    "vite": "^8.3.0",
     "vite-plugin-dts": "^5.1.0"
   }
 }