cherry-styled-components 0.1.0-27 → 0.1.0-29

package/.supermaven/config.json

@@ -0,0 +1 @@
+{"api_key":"4e94fd92d9d3e56803d0d5340beb64a8","api_key_obtained_at":"2024-07-19T22:18:47+02:00","link_id":"bw4cwq4Og3aqUNwrefbPo9D016ptryeK","machine_id":"EgXOpDipQw6LbkqDKtbnec2TTIVC7Vg3"}

package/dist/cherry.js

@@ -2956,7 +2956,7 @@ const Qi = D(Ji)`
 function Ba({ theme: e = et, ...t }) {
   return /* @__PURE__ */ x.jsx(Qi, { ...t, theme: e, children: t.children });
 }
-const ea = (e, t, r, n, i, a, s, l) => k`
+const ea = (e, t, r, n, i, a) => k`
   ${ue};
   font-family: inherit;
   display: inline-flex;
@@ -2979,7 +2979,7 @@ const ea = (e, t, r, n, i, a, s, l) => k`
     min-width: 24px;
   }
 
-  ${!l && t === "primary" && k`
+  ${!a && t === "primary" && k`
     color: ${n ? e.colors.primary : e.isDark ? e.colors.dark : e.colors.light};
     background: ${n ? "transparent" : e.colors.primary};
     border: solid 2px ${e.colors.primary};
@@ -3002,7 +3002,7 @@ const ea = (e, t, r, n, i, a, s, l) => k`
     }
   `}
 
-  ${!l && t === "secondary" && k`
+  ${!a && t === "secondary" && k`
     color: ${n ? e.colors.secondary : e.isDark ? e.colors.dark : e.colors.light};
     background: ${n ? "transparent" : e.colors.secondary};
     border: solid 2px ${e.colors.secondary};
@@ -3025,7 +3025,7 @@ const ea = (e, t, r, n, i, a, s, l) => k`
     }
   `}
 
-	${!l && t === "tertiary" && k`
+	${!a && t === "tertiary" && k`
     color: ${n ? e.colors.tertiary : e.isDark ? e.colors.dark : e.colors.light};
     background: ${n ? "transparent" : e.colors.tertiary};
     border: solid 2px ${e.colors.tertiary};
@@ -3055,7 +3055,7 @@ const ea = (e, t, r, n, i, a, s, l) => k`
 	` : `font-size: ${e.fontSizes.button.lg};
 			line-height: ${e.lineHeights.button.lg};`}
 
-	${l && `
+	${a && `
 		cursor: not-allowed;
 		background: ${e.colors.grayLight};
 		border-color: ${e.colors.grayLight};
@@ -3064,7 +3064,7 @@ const ea = (e, t, r, n, i, a, s, l) => k`
 
 	${i && "width: 100%;"}
 `, ta = D.button`
-  ${({ theme: e, $variant: t, $size: r, $outline: n, $fullWidth: i, disabled: a }) => ea(e, t, r, n, i)}
+  ${({ theme: e, $variant: t, $size: r, $outline: n, $fullWidth: i, disabled: a }) => ea(e, t, r, n, i, a)}
 `;
 function qa({ $variant: e = "primary", ...t }) {
   return /* @__PURE__ */ x.jsxs(ta, { $variant: e, ...t, children: [
@@ -3822,7 +3822,7 @@ const ba = D.span`
 		}`}
 `;
 function es({ type: e = "checkbox", ...t }) {
-  return /* @__PURE__ */ x.jsxs(Qe, { $fullWidth: t.$fullWidth, children: [
+  return /* @__PURE__ */ x.jsxs(Qe, { $fullWidth: t.$fullWidth, $label: t.$label, children: [
     /* @__PURE__ */ x.jsxs(ba, { children: [
       /* @__PURE__ */ x.jsx(xa, { ...t, type: e }),
       /* @__PURE__ */ x.jsx(

package/dist/cherry.umd.cjs

@@ -374,7 +374,7 @@ b {
   background: ${({theme:e})=>e.colors.light};
   border-radius: ${({theme:e})=>e.spacing.radius.lg};
   border: solid 1px ${({theme:e})=>e.colors.grayLight};
-`;function Yi({theme:e=Fe,...t}){return x.jsx(Ui,{...t,theme:e,children:t.children})}const An=(e,t,r,n,i,a,s,l)=>R`
+`;function Yi({theme:e=Fe,...t}){return x.jsx(Ui,{...t,theme:e,children:t.children})}const An=(e,t,r,n,i,a)=>R`
   ${se};
   font-family: inherit;
   display: inline-flex;
@@ -397,7 +397,7 @@ b {
     min-width: 24px;
   }
 
-  ${!l&&t==="primary"&&R`
+  ${!a&&t==="primary"&&R`
     color: ${n?e.colors.primary:e.isDark?e.colors.dark:e.colors.light};
     background: ${n?"transparent":e.colors.primary};
     border: solid 2px ${e.colors.primary};
@@ -420,7 +420,7 @@ b {
     }
   `}
 
-  ${!l&&t==="secondary"&&R`
+  ${!a&&t==="secondary"&&R`
     color: ${n?e.colors.secondary:e.isDark?e.colors.dark:e.colors.light};
     background: ${n?"transparent":e.colors.secondary};
     border: solid 2px ${e.colors.secondary};
@@ -443,7 +443,7 @@ b {
     }
   `}
 
-	${!l&&t==="tertiary"&&R`
+	${!a&&t==="tertiary"&&R`
     color: ${n?e.colors.tertiary:e.isDark?e.colors.dark:e.colors.light};
     background: ${n?"transparent":e.colors.tertiary};
     border: solid 2px ${e.colors.tertiary};
@@ -473,7 +473,7 @@ b {
 	`:`font-size: ${e.fontSizes.button.lg};
 			line-height: ${e.lineHeights.button.lg};`}
 
-	${l&&`
+	${a&&`
 		cursor: not-allowed;
 		background: ${e.colors.grayLight};
 		border-color: ${e.colors.grayLight};
@@ -482,7 +482,7 @@ b {
 
 	${i&&"width: 100%;"}
 `,Xi=F.button`
-  ${({theme:e,$variant:t,$size:r,$outline:n,$fullWidth:i,disabled:a})=>An(e,t,r,n,i)}
+  ${({theme:e,$variant:t,$size:r,$outline:n,$fullWidth:i,disabled:a})=>An(e,t,r,n,i,a)}
 `;function Ki({$variant:e="primary",...t}){return x.jsxs(Xi,{$variant:e,...t,children:[t.$iconPosition!=="right"&&t.$icon&&t.$icon,t.children,t.$iconPosition==="right"&&t.$icon&&t.$icon]})}const Ji=F.div`
   ${({$span:e})=>e&&`
 		grid-column: span ${e};
@@ -1147,4 +1147,4 @@ b {
 				background: ${t.colors.gray};
 			}
 		}`}
-`;function _a({type:e="checkbox",...t}){return x.jsxs(He,{$fullWidth:t.$fullWidth,children:[x.jsxs(Sa,{children:[x.jsx(wa,{...t,type:e}),x.jsx($a,{$error:t.$error,$success:t.$success,className:"fake-toggle",$size:t.$size})]}),t.$label&&x.jsx(Oe,{htmlFor:t.id,children:t.$label})]})}p.Box=Yi,p.Button=Ki,p.CherryThemeProvider=Gi,p.Col=Zi,p.Container=jn,p.Flex=ea,p.GlobalStyles=En,p.Grid=ra,p.IconArrow=Pn,p.IconCheck=Rn,p.Input=sa,p.MaxWidth=ua,p.Range=pa,p.Select=ha,p.Space=ba,p.StyledComponentsRegistry=ki,p.StyledIconWrapper=In,p.StyledInputWrapper=He,p.StyledLabel=Oe,p.Textarea=xa,p.ThemeContext=Tn,p.Toggle=_a,p.breakpoints=_t,p.buttonStyles=An,p.colors=Cn,p.colorsDark=On,p.fontSizes=mr,p.fonts=yr,p.formElementHeightStyles=Et,p.fullWidthStyles=ce,p.generateColSpanStyles=be,p.generateColsStyles=me,p.generateGapStyles=V,p.generateJustifyContentStyles=xe,p.generatePaddingStyles=ve,p.lineHeights=br,p.mq=N,p.resetButton=se,p.resetInput=kt,p.shadows=hr,p.spacing=gr,p.statusBorderStyles=ye,p.styledBlockquote=Mi,p.styledButton=Hi,p.styledButtonBig=Wi,p.styledCode=Fi,p.styledH1=Oi,p.styledH2=Ti,p.styledH3=ji,p.styledH4=Ai,p.styledH5=Li,p.styledH6=Ii,p.styledHero1=Ri,p.styledHero2=Pi,p.styledHero3=Ci,p.styledInput=Bi,p.styledInputBig=qi,p.styledSmall=zi,p.styledStrong=Di,p.styledText=Ni,p.theme=Fe,p.themeDark=Ei,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})});
+`;function _a({type:e="checkbox",...t}){return x.jsxs(He,{$fullWidth:t.$fullWidth,$label:t.$label,children:[x.jsxs(Sa,{children:[x.jsx(wa,{...t,type:e}),x.jsx($a,{$error:t.$error,$success:t.$success,className:"fake-toggle",$size:t.$size})]}),t.$label&&x.jsx(Oe,{htmlFor:t.id,children:t.$label})]})}p.Box=Yi,p.Button=Ki,p.CherryThemeProvider=Gi,p.Col=Zi,p.Container=jn,p.Flex=ea,p.GlobalStyles=En,p.Grid=ra,p.IconArrow=Pn,p.IconCheck=Rn,p.Input=sa,p.MaxWidth=ua,p.Range=pa,p.Select=ha,p.Space=ba,p.StyledComponentsRegistry=ki,p.StyledIconWrapper=In,p.StyledInputWrapper=He,p.StyledLabel=Oe,p.Textarea=xa,p.ThemeContext=Tn,p.Toggle=_a,p.breakpoints=_t,p.buttonStyles=An,p.colors=Cn,p.colorsDark=On,p.fontSizes=mr,p.fonts=yr,p.formElementHeightStyles=Et,p.fullWidthStyles=ce,p.generateColSpanStyles=be,p.generateColsStyles=me,p.generateGapStyles=V,p.generateJustifyContentStyles=xe,p.generatePaddingStyles=ve,p.lineHeights=br,p.mq=N,p.resetButton=se,p.resetInput=kt,p.shadows=hr,p.spacing=gr,p.statusBorderStyles=ye,p.styledBlockquote=Mi,p.styledButton=Hi,p.styledButtonBig=Wi,p.styledCode=Fi,p.styledH1=Oi,p.styledH2=Ti,p.styledH3=ji,p.styledH4=Ai,p.styledH5=Li,p.styledH6=Ii,p.styledHero1=Ri,p.styledHero2=Pi,p.styledHero3=Ci,p.styledInput=Bi,p.styledInputBig=qi,p.styledSmall=zi,p.styledStrong=Di,p.styledText=Ni,p.theme=Fe,p.themeDark=Ei,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})});

package/dist/lib/button.d.ts

@@ -11,6 +11,6 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     $iconPosition?: "left" | "right";
     theme?: Theme;
 }
-export declare const buttonStyles: (theme: Theme, $variant?: "primary" | "secondary" | "tertiary", $size?: "default" | "big", $outline?: boolean, $fullWidth?: boolean, $icon?: React.ReactNode, $iconPosition?: "left" | "right", disabled?: boolean) => import('styled-components').RuleSet<object>;
+export declare const buttonStyles: (theme: Theme, $variant?: "primary" | "secondary" | "tertiary", $size?: "default" | "big", $outline?: boolean, $fullWidth?: boolean, disabled?: boolean) => import('styled-components').RuleSet<object>;
 declare function Button({ $variant, ...props }: ButtonProps): React.JSX.Element;
 export { Button };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cherry-styled-components",
-  "version": "0.1.0-27",
+  "version": "0.1.0-29",
   "description": "Cherry is a design system for the modern web. Designed in Figma, built in React using Typescript.",
   "private": false,
   "type": "module",
@@ -38,8 +38,8 @@
     "@types/react-dom": "^18",
     "@vitejs/plugin-react": "^4.3.1",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.7",
-    "next": "^14.2.4",
+    "eslint-plugin-react-refresh": "^0.4.8",
+    "next": "^14.2.5",
     "polished": "^4.3.1",
     "prettier": "^3.3.2",
     "styled-components": "^6.1.11",

package/src/lib/button.tsx

@@ -20,8 +20,6 @@ export const buttonStyles = (
   $size?: "default" | "big",
   $outline?: boolean,
   $fullWidth?: boolean,
-  $icon?: React.ReactNode,
-  $iconPosition?: "left" | "right",
   disabled?: boolean,
 ) => css`
   ${resetButton};

package/src/lib/toggle.tsx

@@ -124,7 +124,7 @@ const StyledToggle = styled.input<ToggleProps>`
 
 function Toggle({ type = "checkbox", ...props }: ToggleProps) {
   return (
-    <StyledInputWrapper $fullWidth={props.$fullWidth}>
+    <StyledInputWrapper $fullWidth={props.$fullWidth} $label={props.$label}>
       <StyledToggleWrapper>
         <StyledToggle {...props} type={type} />
         <StyledFakeToggle