cherry-styled-components 0.1.8 → 0.1.9

package/.claude/settings.local.json

@@ -5,7 +5,16 @@
       "Bash(pnpm run build:*)",
       "Bash(git add:*)",
       "Bash(git commit:*)",
-      "Bash(git push:*)"
+      "Bash(git push:*)",
+      "Bash(git -C /Users/luan/Developer/cherry-styled-components status)",
+      "Bash(git -C /Users/luan/Developer/cherry-styled-components diff)",
+      "Bash(git -C /Users/luan/Developer/cherry-styled-components diff --staged)",
+      "Bash(pnpm run format:*)",
+      "Bash(git -C /Users/luan/Developer/cherry-styled-components diff src/App.tsx src/lib/toggle.tsx)",
+      "Bash(git -C /Users/luan/Developer/cherry-styled-components add:*)",
+      "Bash(\" directly instead of interpolating \"none\" into pixel\nvalues \\(e.g. \"nonepx)",
+      "Bash(\"\\). This also fixes responsiveStyles\\(\\), which\npreviously had no \"none\" guard at all.\nEOF\n\\)\")",
+      "Bash(git -C /Users/luan/Developer/cherry-styled-components push)"
     ]
   }
 }

package/dist/cherry.js

@@ -22489,7 +22489,7 @@ function yo1({ ...t }, a) {
     }
   );
 }
-const Qo1 = e1(yo1), aa = (t, a) => a ? `display: inline-block;
+const Qo1 = e1(yo1), aa = (t, a) => t === "none" ? "display: none;" : a ? `display: inline-block;
 			max-height: 0;
 			min-width: ${t}px;
 			max-width: ${t}px;` : `display: block;
@@ -22502,10 +22502,7 @@ function po1(t) {
   }).join("");
 }
 const ko1 = W.span`
-  ${({ $horizontal: t, $size: a }) => `
-		${a && a !== "none" && aa(a, t || !1)};
-		${a === "none" && "display: none;"};
-	`}
+  ${({ $horizontal: t, $size: a }) => a ? aa(a, t || !1) : ""}
   ${(t) => po1(t)}
 `;
 function lo1({ ...t }, a) {

package/dist/cherry.umd.cjs

@@ -1265,16 +1265,13 @@ To pass a single animation please supply them in simple values, e.g. animation('
     & select:focus:not([disabled]) ~ svg {
       transform: translateY(-50%) rotate(180deg);
     }
-  `;function Oq({...t},o){return b.jsxs(ae,{$fullWidth:t.$fullWidth,$label:t.$label,className:t.$wrapperClassName,children:[t.$label&&b.jsx(U1,{htmlFor:t.id,children:t.$label}),b.jsxs(po,{$fullWidth:t.$fullWidth,children:[b.jsx(Tq,{...t,ref:o,children:t.children}),b.jsx(W0,{})]})]})}const Dq=$.forwardRef(Oq),ko=(t,o)=>o?`display: inline-block;
+  `;function Oq({...t},o){return b.jsxs(ae,{$fullWidth:t.$fullWidth,$label:t.$label,className:t.$wrapperClassName,children:[t.$label&&b.jsx(U1,{htmlFor:t.id,children:t.$label}),b.jsxs(po,{$fullWidth:t.$fullWidth,children:[b.jsx(Tq,{...t,ref:o,children:t.children}),b.jsx(W0,{})]})]})}const Dq=$.forwardRef(Oq),ko=(t,o)=>t==="none"?"display: none;":o?`display: inline-block;
 			max-height: 0;
 			min-width: ${t}px;
 			max-width: ${t}px;`:`display: block;
 			min-height: ${t}px;
 			max-height: ${t}px;`;function Iq(t){return Object.keys(t).filter(o=>o.startsWith("$")).map(o=>{const a=o.substring(1);return t[o]&&T(a)+`{ ${ko(t[o],t.$horizontal||!1)} }`}).join("")}const Fq=Z.span`
-  ${({$horizontal:t,$size:o})=>`
-		${o&&o!=="none"&&ko(o,t||!1)};
-		${o==="none"&&"display: none;"};
-	`}
+  ${({$horizontal:t,$size:o})=>o?ko(o,t||!1):""}
   ${t=>Iq(t)}
 `;function Bq({...t},o){return b.jsx(Fq,{...t,ref:o})}const Uq=$.forwardRef(Bq),Wq=Z.textarea`
   ${l1};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cherry-styled-components",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "Cherry is a design system for the modern web. Designed in Figma, built in React using Typescript.",
   "private": false,
   "type": "module",
@@ -35,10 +35,10 @@
     "polished": "^4.3.1"
   },
   "devDependencies": {
-    "@types/node": "^25.2.2",
-    "@types/react": "^19.2.13",
+    "@types/node": "^25.2.3",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.3",
+    "@vitejs/plugin-react": "^5.1.4",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.5.0",
     "next": "^16.1.6",

package/src/App.tsx

@@ -118,7 +118,12 @@ function App() {
                 $label="Input Big"
                 id="input-big"
               />
-              <Select $size="big" $fullWidth $label="Select Big" id="select-big">
+              <Select
+                $size="big"
+                $fullWidth
+                $label="Select Big"
+                id="select-big"
+              >
                 <option>Select</option>
               </Select>
               <Col $lgSpan={2}>

package/src/lib/space.tsx

@@ -16,12 +16,14 @@ interface SpaceProps {
 }
 
 const styles = ($size: number | "none", $horizontal: boolean) =>
-  $horizontal
-    ? `display: inline-block;
+  $size === "none"
+    ? `display: none;`
+    : $horizontal
+      ? `display: inline-block;
 			max-height: 0;
 			min-width: ${$size}px;
 			max-width: ${$size}px;`
-    : `display: block;
+      : `display: block;
 			min-height: ${$size}px;
 			max-height: ${$size}px;`;
 
@@ -39,10 +41,8 @@ function responsiveStyles(props: any) {
 }
 
 const StyledSpace = styled.span<SpaceProps>`
-  ${({ $horizontal, $size }) => `
-		${$size && $size !== "none" && styles($size, $horizontal || false)};
-		${$size === "none" && `display: none;`};
-	`}
+  ${({ $horizontal, $size }) =>
+    $size ? styles($size, $horizontal || false) : ""}
   ${(props) => responsiveStyles(props)}
 `;
 

package/src/lib/toggle.tsx

@@ -32,8 +32,10 @@ const StyledFakeToggle = styled.span<ToggleProps>`
   transition: all 0.3s ease;
   box-shadow: 0 0 0 0 ${({ theme }) => theme.colors.primaryLight};
   transform: none;
-  width: ${({ $size }) => ($size === "big" ? "56px" : $size === "small" ? "38px" : "46px")};
-  height: ${({ $size }) => ($size === "big" ? "32px" : $size === "small" ? "18px" : "22px")};
+  width: ${({ $size }) =>
+    $size === "big" ? "56px" : $size === "small" ? "38px" : "46px"};
+  height: ${({ $size }) =>
+    $size === "big" ? "32px" : $size === "small" ? "18px" : "22px"};
 
   ${({ $error, $success, theme }) => {
     return statusBorderStyles(
@@ -68,8 +70,10 @@ const StyledFakeToggle = styled.span<ToggleProps>`
     transition: all 0.3s ease;
     transform: translateX(0);
     background: ${({ theme }) => theme.colors.primary};
-    width: ${({ $size }) => ($size === "big" ? "32px" : $size === "small" ? "18px" : "22px")};
-    height: ${({ $size }) => ($size === "big" ? "32px" : $size === "small" ? "18px" : "22px")};
+    width: ${({ $size }) =>
+      $size === "big" ? "32px" : $size === "small" ? "18px" : "22px"};
+    height: ${({ $size }) =>
+      $size === "big" ? "32px" : $size === "small" ? "18px" : "22px"};
   }
 `;
 
@@ -91,7 +95,8 @@ const StyledToggle = styled.input<ToggleProps>`
 
     &::after {
       transform: translateX(
-        ${({ $size }) => ($size === "big" ? "25px" : $size === "small" ? "20px" : "25px")}
+        ${({ $size }) =>
+          $size === "big" ? "25px" : $size === "small" ? "20px" : "25px"}
       );
     }
   }