cherry-styled-components 0.1.7 → 0.1.8

package/dist/lib/button.d.ts

@@ -3,7 +3,7 @@ import { Theme } from './utils';
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     children?: React.ReactNode;
     $variant?: "primary" | "secondary" | "tertiary";
-    $size?: "default" | "big";
+    $size?: "default" | "big" | "small";
     $outline?: boolean;
     $fullWidth?: boolean;
     $icon?: React.ReactNode;
@@ -11,6 +11,6 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     $isError?: boolean;
     theme?: Theme;
 }
-export declare const buttonStyles: (theme: Theme, $variant?: "primary" | "secondary" | "tertiary", $size?: "default" | "big", $outline?: boolean, $fullWidth?: boolean, $isError?: boolean, disabled?: boolean) => import('styled-components').RuleSet<object>;
+export declare const buttonStyles: (theme: Theme, $variant?: "primary" | "secondary" | "tertiary", $size?: "default" | "big" | "small", $outline?: boolean, $fullWidth?: boolean, $isError?: boolean, disabled?: boolean) => import('styled-components').RuleSet<object>;
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export { Button };

package/dist/lib/icon.d.ts

@@ -6,5 +6,5 @@ interface Props {
     size?: number;
     className?: string;
 }
-declare const Icon: ({ name, color, size, className }: Props) => import("react").JSX.Element;
+declare const Icon: ({ name, color, size, className }: Props) => import("react").JSX.Element | null;
 export { Icon };

package/dist/lib/input.d.ts

@@ -5,7 +5,7 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     children?: React.ReactNode;
     $wrapperClassName?: string;
     $label?: string;
-    $size?: "default" | "big";
+    $size?: "default" | "big" | "small";
     $error?: boolean;
     $success?: boolean;
     $fullWidth?: boolean;
@@ -15,7 +15,7 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
 }
 interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
     $label?: string;
-    $size?: "default" | "big";
+    $size?: "default" | "big" | "small";
     $error?: boolean;
     $success?: boolean;
     $fullWidth?: boolean;

package/dist/lib/range.d.ts

@@ -4,7 +4,7 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "
     className?: string;
     $wrapperClassName?: string;
     $label?: string;
-    $size?: "default" | "big";
+    $size?: "default" | "big" | "small";
     $error?: boolean;
     $success?: boolean;
     $fullWidth?: boolean;

package/dist/lib/select.d.ts

@@ -5,7 +5,7 @@ interface SelectProps extends React.InputHTMLAttributes<HTMLSelectElement> {
     children?: React.ReactNode;
     $wrapperClassName?: string;
     $label?: string;
-    $size?: "default" | "big";
+    $size?: "default" | "big" | "small";
     $error?: boolean;
     $success?: boolean;
     $fullWidth?: boolean;

package/dist/lib/textarea.d.ts

@@ -4,7 +4,7 @@ interface TextareaProps extends Omit<React.InputHTMLAttributes<HTMLTextAreaEleme
     children?: React.ReactNode;
     $wrapperClassName?: string;
     $label?: string;
-    $size?: "default" | "big";
+    $size?: "default" | "big" | "small";
     $error?: boolean;
     $success?: boolean;
     $fullWidth?: boolean;

package/dist/lib/toggle.d.ts

@@ -5,7 +5,7 @@ interface ToggleProps extends React.InputHTMLAttributes<HTMLInputElement> {
     type?: "checkbox" | "radio";
     $wrapperClassName?: string;
     $label?: string;
-    $size?: "default" | "big";
+    $size?: "default" | "big" | "small";
     $error?: boolean;
     $success?: boolean;
     $fullWidth?: boolean;

package/dist/lib/utils/mixins.d.ts

@@ -3,7 +3,7 @@ export declare const resetButton: import('styled-components').RuleSet<object>;
 export declare const resetInput: import('styled-components').RuleSet<object>;
 export declare const fullWidthStyles: (fullWidth: boolean) => import('styled-components').RuleSet<object> | undefined;
 export declare const statusBorderStyles: ($error: boolean, $success: boolean, theme: Theme) => import('styled-components').RuleSet<object> | undefined;
-export declare const formElementHeightStyles: ($size?: "default" | "big") => import('styled-components').RuleSet<object>;
+export declare const formElementHeightStyles: ($size?: "default" | "big" | "small") => import('styled-components').RuleSet<object>;
 export declare const generateGapStyles: (size: keyof Breakpoints<number>, gap: number | "none") => import('styled-components').RuleSet<object>;
 export declare const generateColsStyles: (size: keyof Breakpoints<number>, cols: number) => import('styled-components').RuleSet<object>;
 export declare const generateColSpanStyles: (size: keyof Breakpoints<number>, span: number) => import('styled-components').RuleSet<object>;

package/dist/lib/utils/theme.d.ts

@@ -135,6 +135,10 @@ export interface FontSizes<TString = string> {
         xs: TString;
         lg: TString;
     };
+    buttonSmall: {
+        xs: TString;
+        lg: TString;
+    };
     input: {
         xs: TString;
         lg: TString;
@@ -143,6 +147,10 @@ export interface FontSizes<TString = string> {
         xs: TString;
         lg: TString;
     };
+    inputSmall: {
+        xs: TString;
+        lg: TString;
+    };
 }
 export interface LineHeights<TString = string> {
     hero1: {
@@ -209,6 +217,10 @@ export interface LineHeights<TString = string> {
         xs: TString;
         lg: TString;
     };
+    buttonSmall: {
+        xs: TString;
+        lg: TString;
+    };
     input: {
         xs: TString;
         lg: TString;
@@ -217,6 +229,10 @@ export interface LineHeights<TString = string> {
         xs: TString;
         lg: TString;
     };
+    inputSmall: {
+        xs: TString;
+        lg: TString;
+    };
 }
 export interface Theme {
     breakpoints: Breakpoints;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cherry-styled-components",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "Cherry is a design system for the modern web. Designed in Figma, built in React using Typescript.",
   "private": false,
   "type": "module",
@@ -35,7 +35,7 @@
     "polished": "^4.3.1"
   },
   "devDependencies": {
-    "@types/node": "^25.2.1",
+    "@types/node": "^25.2.2",
     "@types/react": "^19.2.13",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.3",
@@ -43,7 +43,7 @@
     "eslint-plugin-react-refresh": "^0.5.0",
     "next": "^16.1.6",
     "prettier": "^3.8.1",
-    "styled-components": "^6.3.8",
+    "styled-components": "^6.3.9",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4"

package/src/App.tsx

@@ -92,6 +92,211 @@ function App() {
             </Flex>
           </Col>
         </Grid>
+
+        <Space $size={40} />
+        <hr />
+        <Space $size={20} />
+
+        {/* Big Size */}
+        <h2>Big</h2>
+        <Space $size={10} />
+        <Input
+          $size="big"
+          $fullWidth
+          $label="Input Big"
+          id="date-big"
+          type="date"
+        />
+        <Space $size={20} />
+        <Grid $xsCols={1} $lgCols={3} $gap={20}>
+          <Col $xsSpan={1} $lgSpan={2}>
+            <Grid $xsCols={1} $lgCols={2} $gap={20}>
+              <Input
+                $size="big"
+                placeholder="Placeholder"
+                $fullWidth
+                $label="Input Big"
+                id="input-big"
+              />
+              <Select $size="big" $fullWidth $label="Select Big" id="select-big">
+                <option>Select</option>
+              </Select>
+              <Col $lgSpan={2}>
+                <Flex
+                  $xsGap={10}
+                  $lgGap={20}
+                  $wrap="nowrap"
+                  $justifyContent="space-between"
+                >
+                  <Input $size="big" type="checkbox" id="checkbox-big-1" />
+                  <Input
+                    $size="big"
+                    type="checkbox"
+                    id="checkbox-big-2"
+                    defaultChecked
+                  />
+                  <Input
+                    $size="big"
+                    type="radio"
+                    id="radio-big-1"
+                    name="demo-radio-big"
+                  />
+                  <Input
+                    $size="big"
+                    type="radio"
+                    id="radio-big-2"
+                    name="demo-radio-big"
+                    defaultChecked
+                  />
+                  <Range $size="big" />
+                  <Toggle $size="big" />
+                  <Toggle $size="big" defaultChecked />
+                </Flex>
+              </Col>
+            </Grid>
+          </Col>
+          <Textarea
+            $size="big"
+            $label="Textarea Big"
+            $fullWidth
+            defaultValue="Textarea"
+            id="textarea-big"
+          />
+        </Grid>
+        <Space $size={20} />
+        <Grid $xsCols={1} $lgCols={2} $gap={20}>
+          <Col>
+            <Flex $wrap="nowrap" $gap={20}>
+              <Button $size="big" $fullWidth>
+                Button
+              </Button>
+              <Button $size="big" $variant="secondary" $fullWidth>
+                Button
+              </Button>
+              <Button $size="big" $variant="tertiary" $fullWidth>
+                Button
+              </Button>
+            </Flex>
+          </Col>
+          <Col>
+            <Flex $wrap="nowrap" $gap={20}>
+              <Button $size="big" $outline $fullWidth>
+                Button
+              </Button>
+              <Button $size="big" $variant="secondary" $outline $fullWidth>
+                Button
+              </Button>
+              <Button $size="big" $variant="tertiary" $outline $fullWidth>
+                Button
+              </Button>
+            </Flex>
+          </Col>
+        </Grid>
+
+        <Space $size={40} />
+        <hr />
+        <Space $size={20} />
+
+        {/* Small Size */}
+        <h2>Small</h2>
+        <Space $size={10} />
+        <Input
+          $size="small"
+          $fullWidth
+          $label="Input Small"
+          id="date-small"
+          type="date"
+        />
+        <Space $size={20} />
+        <Grid $xsCols={1} $lgCols={3} $gap={20}>
+          <Col $xsSpan={1} $lgSpan={2}>
+            <Grid $xsCols={1} $lgCols={2} $gap={20}>
+              <Input
+                $size="small"
+                placeholder="Placeholder"
+                $fullWidth
+                $label="Input Small"
+                id="input-small"
+              />
+              <Select
+                $size="small"
+                $fullWidth
+                $label="Select Small"
+                id="select-small"
+              >
+                <option>Select</option>
+              </Select>
+              <Col $lgSpan={2}>
+                <Flex
+                  $xsGap={10}
+                  $lgGap={20}
+                  $wrap="nowrap"
+                  $justifyContent="space-between"
+                >
+                  <Input $size="small" type="checkbox" id="checkbox-small-1" />
+                  <Input
+                    $size="small"
+                    type="checkbox"
+                    id="checkbox-small-2"
+                    defaultChecked
+                  />
+                  <Input
+                    $size="small"
+                    type="radio"
+                    id="radio-small-1"
+                    name="demo-radio-small"
+                  />
+                  <Input
+                    $size="small"
+                    type="radio"
+                    id="radio-small-2"
+                    name="demo-radio-small"
+                    defaultChecked
+                  />
+                  <Range $size="small" />
+                  <Toggle $size="small" />
+                  <Toggle $size="small" defaultChecked />
+                </Flex>
+              </Col>
+            </Grid>
+          </Col>
+          <Textarea
+            $size="small"
+            $label="Textarea Small"
+            $fullWidth
+            defaultValue="Textarea"
+            id="textarea-small"
+          />
+        </Grid>
+        <Space $size={20} />
+        <Grid $xsCols={1} $lgCols={2} $gap={20}>
+          <Col>
+            <Flex $wrap="nowrap" $gap={20}>
+              <Button $size="small" $fullWidth>
+                Button
+              </Button>
+              <Button $size="small" $variant="secondary" $fullWidth>
+                Button
+              </Button>
+              <Button $size="small" $variant="tertiary" $fullWidth>
+                Button
+              </Button>
+            </Flex>
+          </Col>
+          <Col>
+            <Flex $wrap="nowrap" $gap={20}>
+              <Button $size="small" $outline $fullWidth>
+                Button
+              </Button>
+              <Button $size="small" $variant="secondary" $outline $fullWidth>
+                Button
+              </Button>
+              <Button $size="small" $variant="tertiary" $outline $fullWidth>
+                Button
+              </Button>
+            </Flex>
+          </Col>
+        </Grid>
       </MaxWidth>
       <Space $size={100} />
     </Container>

package/src/lib/button.tsx

@@ -8,7 +8,7 @@ import { Theme, formElementHeightStyles, resetButton } from "./utils";
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children?: React.ReactNode;
   $variant?: "primary" | "secondary" | "tertiary";
-  $size?: "default" | "big";
+  $size?: "default" | "big" | "small";
   $outline?: boolean;
   $fullWidth?: boolean;
   $icon?: React.ReactNode;
@@ -20,7 +20,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
 export const buttonStyles = (
   theme: Theme,
   $variant?: "primary" | "secondary" | "tertiary",
-  $size?: "default" | "big",
+  $size?: "default" | "big" | "small",
   $outline?: boolean,
   $fullWidth?: boolean,
   $isError?: boolean,
@@ -149,7 +149,12 @@ export const buttonStyles = (
 			line-height: ${theme.lineHeights.buttonBig.lg};
       padding: 18px 30px;
 	`
-    : `font-size: ${theme.fontSizes.button.lg};
+    : $size === "small"
+      ? `font-size: ${theme.fontSizes.buttonSmall.lg};
+			line-height: ${theme.lineHeights.buttonSmall.lg};
+      padding: 10px 20px;
+	`
+      : `font-size: ${theme.fontSizes.button.lg};
 			line-height: ${theme.lineHeights.button.lg};`}
 
 	${disabled &&

package/src/lib/icon.tsx

@@ -11,6 +11,7 @@ interface Props {
 
 const Icon = ({ name, color, size, className }: Props) => {
   const LucideIcon = icons[name];
+  if (!LucideIcon) return null;
 
   return <LucideIcon color={color} size={size} className={className} />;
 };

package/src/lib/input.tsx

@@ -17,7 +17,7 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   children?: React.ReactNode;
   $wrapperClassName?: string;
   $label?: string;
-  $size?: "default" | "big";
+  $size?: "default" | "big" | "small";
   $error?: boolean;
   $success?: boolean;
   $fullWidth?: boolean;
@@ -28,7 +28,7 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
 
 interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
   $label?: string;
-  $size?: "default" | "big";
+  $size?: "default" | "big" | "small";
   $error?: boolean;
   $success?: boolean;
   $fullWidth?: boolean;
@@ -180,7 +180,12 @@ const StyledInput = styled.input<InputProps>`
       ? `font-size: ${theme.fontSizes.inputBig.lg};
 			line-height: ${theme.lineHeights.inputBig.lg};
 	`
-      : `font-size: ${theme.fontSizes.input.lg};
+      : $size === "small"
+        ? `font-size: ${theme.fontSizes.inputSmall.lg};
+			line-height: ${theme.lineHeights.inputSmall.lg};
+      padding: 12px 12px;
+	`
+        : `font-size: ${theme.fontSizes.input.lg};
 			line-height: ${theme.lineHeights.input.lg};`}
 
 	${({ $error, $success, theme }) => {
@@ -291,6 +296,27 @@ const StyledRadioCheckboxInput = styled.input<InputProps>`
 						height: 14px;
 					}
 				`;
+    } else if ($size === "small") {
+      return `
+					min-width: 18px;
+					width: 18px;
+					min-height: 18px;
+					height: 18px;
+
+					& ~ svg {
+						min-width: 10px;
+						width: 10px;
+						min-height: 10px;
+						height: 10px;
+					}
+
+					& ~ em {
+						min-width: 6px;
+						width: 6px;
+						min-height: 6px;
+						height: 6px;
+					}
+				`;
     } else {
       return `
 					min-width: 22px;

package/src/lib/range.tsx

@@ -16,7 +16,7 @@ interface InputProps extends Omit<
   className?: string;
   $wrapperClassName?: string;
   $label?: string;
-  $size?: "default" | "big";
+  $size?: "default" | "big" | "small";
   $error?: boolean;
   $success?: boolean;
   $fullWidth?: boolean;
@@ -45,6 +45,7 @@ const StyledInput = styled.input<InputProps>`
     width: 100%;
     cursor: pointer;
     border-radius: ${({ theme }) => theme.spacing.radius.xl};
+    background: ${({ theme }) => theme.colors.light};
     border: solid 2px ${({ theme }) => theme.colors.grayLight};
     box-shadow: 0 0 0 0 ${({ theme }) => theme.colors.primaryLight};
     transition: all 0.3s ease;
@@ -61,6 +62,7 @@ const StyledInput = styled.input<InputProps>`
     width: 100%;
     cursor: pointer;
     border-radius: ${({ theme }) => theme.spacing.radius.xl};
+    background: ${({ theme }) => theme.colors.light};
     border: solid 2px ${({ theme }) => theme.colors.grayLight};
     box-shadow: 0 0 0 0 ${({ theme }) => theme.colors.primaryLight};
     transition: all 0.3s ease;
@@ -183,6 +185,29 @@ const StyledInput = styled.input<InputProps>`
 						height: 32px;
 					}
 				`;
+    } else if ($size === "small") {
+      return `
+					height: 18px;
+
+					&::-webkit-slider-runnable-track {
+						height: 8px;
+					}
+
+					&::-moz-range-track {
+						height: 4px;
+					}
+
+					&::-webkit-slider-thumb {
+						width: 18px;
+						height: 18px;
+						margin-top: -7px;
+					}
+
+					&::-moz-range-thumb {
+						width: 18px;
+						height: 18px;
+					}
+				`;
     } else {
       return `
 					height: 22px;

package/src/lib/select.tsx

@@ -16,7 +16,7 @@ interface SelectProps extends React.InputHTMLAttributes<HTMLSelectElement> {
   children?: React.ReactNode;
   $wrapperClassName?: string;
   $label?: string;
-  $size?: "default" | "big";
+  $size?: "default" | "big" | "small";
   $error?: boolean;
   $success?: boolean;
   $fullWidth?: boolean;
@@ -61,7 +61,9 @@ const StyledSelect = styled.select<SelectProps>`
   ${({ $size, theme }) =>
     $size === "big"
       ? `font-size: ${theme.fontSizes.inputBig.lg};`
-      : `font-size: ${theme.fontSizes.input.lg};`}
+      : $size === "small"
+        ? `font-size: ${theme.fontSizes.inputSmall.lg}; padding: 0 12px;`
+        : `font-size: ${theme.fontSizes.input.lg};`}
 
 	${({ $error, $success, theme }) => {
     return statusBorderStyles(

package/src/lib/textarea.tsx

@@ -17,7 +17,7 @@ interface TextareaProps extends Omit<
   children?: React.ReactNode;
   $wrapperClassName?: string;
   $label?: string;
-  $size?: "default" | "big";
+  $size?: "default" | "big" | "small";
   $error?: boolean;
   $success?: boolean;
   $fullWidth?: boolean;
@@ -64,7 +64,12 @@ const StyledTextarea = styled.textarea<TextareaProps>`
       ? `font-size: ${theme.fontSizes.inputBig.lg};
 			line-height: ${theme.lineHeights.text.lg};
 	`
-      : `font-size: ${theme.fontSizes.input.lg};
+      : $size === "small"
+        ? `font-size: ${theme.fontSizes.inputSmall.lg};
+			line-height: ${theme.lineHeights.text.lg};
+      padding: 10px 12px;
+	`
+        : `font-size: ${theme.fontSizes.input.lg};
 			line-height: ${theme.lineHeights.text.lg};`}
 
   ${({ $error, $success, theme }) => {

package/src/lib/toggle.tsx

@@ -9,7 +9,7 @@ interface ToggleProps extends React.InputHTMLAttributes<HTMLInputElement> {
   type?: "checkbox" | "radio";
   $wrapperClassName?: string;
   $label?: string;
-  $size?: "default" | "big";
+  $size?: "default" | "big" | "small";
   $error?: boolean;
   $success?: boolean;
   $fullWidth?: boolean;
@@ -32,8 +32,8 @@ 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" : "46px")};
-  height: ${({ $size }) => ($size === "big" ? "32px" : "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 +68,8 @@ const StyledFakeToggle = styled.span<ToggleProps>`
     transition: all 0.3s ease;
     transform: translateX(0);
     background: ${({ theme }) => theme.colors.primary};
-    width: ${({ $size }) => ($size === "big" ? "32px" : "22px")};
-    height: ${({ $size }) => ($size === "big" ? "32px" : "22px")};
+    width: ${({ $size }) => ($size === "big" ? "32px" : $size === "small" ? "18px" : "22px")};
+    height: ${({ $size }) => ($size === "big" ? "32px" : $size === "small" ? "18px" : "22px")};
   }
 `;
 
@@ -90,7 +90,9 @@ const StyledToggle = styled.input<ToggleProps>`
     }
 
     &::after {
-      transform: translateX(25px);
+      transform: translateX(
+        ${({ $size }) => ($size === "big" ? "25px" : $size === "small" ? "20px" : "25px")}
+      );
     }
   }
 

package/src/lib/utils/mixins.tsx

@@ -44,13 +44,21 @@ export const statusBorderStyles = (
   }
 };
 
-export const formElementHeightStyles = ($size?: "default" | "big") => {
+export const formElementHeightStyles = (
+  $size?: "default" | "big" | "small",
+) => {
   if ($size === "big") {
     return css`
       height: 60px;
     `;
   }
 
+  if ($size === "small") {
+    return css`
+      height: 40px;
+    `;
+  }
+
   return css`
     height: 50px;
   `;