cherry-styled-components 0.1.1 → 0.1.2

package/dist/lib/input.d.ts

@@ -3,6 +3,7 @@ import { IStyledComponent } from 'styled-components';
 import { Theme } from './utils';
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     children?: React.ReactNode;
+    $wrapperClassName?: string;
     $label?: string;
     $size?: "default" | "big";
     $error?: boolean;

package/dist/lib/range.d.ts

@@ -2,6 +2,7 @@ import { default as React } from 'react';
 import { Theme } from './utils';
 interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
     className?: string;
+    $wrapperClassName?: string;
     $label?: string;
     $size?: "default" | "big";
     $error?: boolean;

package/dist/lib/select.d.ts

@@ -3,6 +3,7 @@ import { IStyledComponent } from 'styled-components';
 import { Theme } from './utils';
 interface SelectProps extends React.InputHTMLAttributes<HTMLSelectElement> {
     children?: React.ReactNode;
+    $wrapperClassName?: string;
     $label?: string;
     $size?: "default" | "big";
     $error?: boolean;

package/dist/lib/textarea.d.ts

@@ -2,6 +2,7 @@ import { default as React } from 'react';
 import { Theme } from './utils';
 interface TextareaProps extends Omit<React.InputHTMLAttributes<HTMLTextAreaElement>, "size"> {
     children?: React.ReactNode;
+    $wrapperClassName?: string;
     $label?: string;
     $size?: "default" | "big";
     $error?: boolean;

package/dist/lib/toggle.d.ts

@@ -3,6 +3,7 @@ import { Theme } from './utils';
 interface ToggleProps extends React.InputHTMLAttributes<HTMLInputElement> {
     children?: React.ReactNode;
     type?: "checkbox" | "radio";
+    $wrapperClassName?: string;
     $label?: string;
     $size?: "default" | "big";
     $error?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cherry-styled-components",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Cherry is a design system for the modern web. Designed in Figma, built in React using Typescript.",
   "private": false,
   "type": "module",
@@ -26,7 +26,7 @@
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
-    "format": "prettier --write \"./src/**/*.{js,json,ts,tsx}\" \"!.node_modules/**\""
+    "format": "prettier --write \"./**/*.{js,json,ts,tsx}\""
   },
   "dependencies": {
     "react": "^19",

package/src/App.tsx

@@ -1,80 +1,101 @@
-import {
-  Container,
-  Button,
-  Col,
-  Flex,
-  Grid,
-  Input,
-  MaxWidth,
-  Range,
-  Select,
-  Space,
-  Textarea,
-  Toggle,
-} from "./lib";
-import { ToggleTheme } from "./toggle-theme";
-
-function App() {
-  return (
-    <Container>
-      <Space $size={100} />
-      <MaxWidth $xs={845}>
-        <ToggleTheme />
-        <hr />
-        <Input $fullWidth $label="Input" id="data-1" type="date" />
-        <Grid $xsCols={1} $lgCols={3} $gap={20}>
-          <Col $xsSpan={1} $lgSpan={2}>
-            <Grid $xsCols={1} $lgCols={2} $gap={20}>
-              <Input placeholder="Placeholder" $fullWidth $label="Input" id="input-1" />
-              <Select $fullWidth $label="Select" id="select-1">
-                <option>Select</option>
-              </Select>
-              <Col $lgSpan={2}>
-                <Flex $xsGap={10} $lgGap={20} $wrap="nowrap" $justifyContent="space-between">
-                  <Input type="checkbox" id="checkbox-1" />
-                  <Input type="checkbox" id="checkbox-2" defaultChecked />
-                  <Input type="radio" id="radio-2" name="demo-radio" />
-                  <Input type="radio" id="radio-3" name="demo-radio" defaultChecked />
-                  <Range />
-                  <Toggle />
-                  <Toggle defaultChecked />
-                </Flex>
-              </Col>
-            </Grid>
-          </Col>
-          <Textarea $label="Textarea" $fullWidth defaultValue="Textarea" id="textarea-1" />
-        </Grid>
-        <Space $size={20} />
-        <Grid $xsCols={1} $lgCols={2} $gap={20}>
-          <Col>
-            <Flex $wrap="nowrap" $gap={20}>
-              <Button $fullWidth>Button</Button>
-              <Button $variant="secondary" $fullWidth>
-                Button
-              </Button>
-              <Button $variant="tertiary" $fullWidth>
-                Button
-              </Button>
-            </Flex>
-          </Col>
-          <Col>
-            <Flex $wrap="nowrap" $gap={20}>
-              <Button $outline $fullWidth>
-                Button
-              </Button>
-              <Button $variant="secondary" $outline $fullWidth>
-                Button
-              </Button>
-              <Button $variant="tertiary" $outline $fullWidth>
-                Button
-              </Button>
-            </Flex>
-          </Col>
-        </Grid>
-      </MaxWidth>
-      <Space $size={100} />
-    </Container>
-  );
-}
-
-export default App;
+import {
+  Container,
+  Button,
+  Col,
+  Flex,
+  Grid,
+  Input,
+  MaxWidth,
+  Range,
+  Select,
+  Space,
+  Textarea,
+  Toggle,
+} from "./lib";
+import { ToggleTheme } from "./toggle-theme";
+
+function App() {
+  return (
+    <Container>
+      <Space $size={100} />
+      <MaxWidth $xs={845}>
+        <ToggleTheme />
+        <hr />
+        <Input $fullWidth $label="Input" id="data-1" 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
+                placeholder="Placeholder"
+                $fullWidth
+                $label="Input"
+                id="input-1"
+              />
+              <Select $fullWidth $label="Select" id="select-1">
+                <option>Select</option>
+              </Select>
+              <Col $lgSpan={2}>
+                <Flex
+                  $xsGap={10}
+                  $lgGap={20}
+                  $wrap="nowrap"
+                  $justifyContent="space-between"
+                >
+                  <Input type="checkbox" id="checkbox-1" />
+                  <Input type="checkbox" id="checkbox-2" defaultChecked />
+                  <Input type="radio" id="radio-2" name="demo-radio" />
+                  <Input
+                    type="radio"
+                    id="radio-3"
+                    name="demo-radio"
+                    defaultChecked
+                  />
+                  <Range />
+                  <Toggle />
+                  <Toggle defaultChecked />
+                </Flex>
+              </Col>
+            </Grid>
+          </Col>
+          <Textarea
+            $label="Textarea"
+            $fullWidth
+            defaultValue="Textarea"
+            id="textarea-1"
+          />
+        </Grid>
+        <Space $size={20} />
+        <Grid $xsCols={1} $lgCols={2} $gap={20}>
+          <Col>
+            <Flex $wrap="nowrap" $gap={20}>
+              <Button $fullWidth>Button</Button>
+              <Button $variant="secondary" $fullWidth>
+                Button
+              </Button>
+              <Button $variant="tertiary" $fullWidth>
+                Button
+              </Button>
+            </Flex>
+          </Col>
+          <Col>
+            <Flex $wrap="nowrap" $gap={20}>
+              <Button $outline $fullWidth>
+                Button
+              </Button>
+              <Button $variant="secondary" $outline $fullWidth>
+                Button
+              </Button>
+              <Button $variant="tertiary" $outline $fullWidth>
+                Button
+              </Button>
+            </Flex>
+          </Col>
+        </Grid>
+      </MaxWidth>
+      <Space $size={100} />
+    </Container>
+  );
+}
+
+export default App;

package/src/lib/box.tsx

@@ -1,26 +1,26 @@
-"use client";
-import React, { forwardRef } from "react";
-import styled from "styled-components";
-import { Container, ContainerProps } from "./container";
-import { theme as defaultTheme } from "./utils";
-
-const StyledBox = styled(Container)<ContainerProps>`
-  background: ${({ theme }) => theme.colors.light};
-  border-radius: ${({ theme }) => theme.spacing.radius.lg};
-  border: solid 1px ${({ theme }) => theme.colors.grayLight};
-`;
-
-function LocalBox(
-  { theme = defaultTheme, ...props }: ContainerProps,
-  ref: React.Ref<HTMLDivElement>,
-) {
-  return (
-    <StyledBox {...props} theme={theme} ref={ref}>
-      {props.children}
-    </StyledBox>
-  );
-}
-
-const Box = forwardRef(LocalBox);
-
-export { Box };
+"use client";
+import React, { forwardRef } from "react";
+import styled from "styled-components";
+import { Container, ContainerProps } from "./container";
+import { theme as defaultTheme } from "./utils";
+
+const StyledBox = styled(Container)<ContainerProps>`
+  background: ${({ theme }) => theme.colors.light};
+  border-radius: ${({ theme }) => theme.spacing.radius.lg};
+  border: solid 1px ${({ theme }) => theme.colors.grayLight};
+`;
+
+function LocalBox(
+  { theme = defaultTheme, ...props }: ContainerProps,
+  ref: React.Ref<HTMLDivElement>,
+) {
+  return (
+    <StyledBox {...props} theme={theme} ref={ref}>
+      {props.children}
+    </StyledBox>
+  );
+}
+
+const Box = forwardRef(LocalBox);
+
+export { Box };

package/src/lib/button.tsx

@@ -1,162 +1,162 @@
-"use client";
-import React, { forwardRef } from "react";
-import styled, { css } from "styled-components";
-import { Theme, formElementHeightStyles, resetButton } from "./utils";
-
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  children?: React.ReactNode;
-  $variant?: "primary" | "secondary" | "tertiary";
-  $size?: "default" | "big";
-  $outline?: boolean;
-  $fullWidth?: boolean;
-  $icon?: React.ReactNode;
-  $iconPosition?: "left" | "right";
-  theme?: Theme;
-}
-
-export const buttonStyles = (
-  theme: Theme,
-  $variant?: "primary" | "secondary" | "tertiary",
-  $size?: "default" | "big",
-  $outline?: boolean,
-  $fullWidth?: boolean,
-  disabled?: boolean,
-) => css`
-  ${resetButton};
-  font-family: inherit;
-  display: inline-flex;
-  padding: 15px 30px;
-  border-radius: 100px;
-  font-weight: 600;
-  white-space: nowrap;
-  hyphens: auto;
-  color: ${theme.isDark ? theme.colors.dark : theme.colors.light};
-  text-decoration: none;
-  transition: all 0.3s ease;
-  text-align: center;
-  gap: 10px;
-  text-overflow: ellipsis;
-  justify-content: center;
-
-  & .icon,
-  & .lucide {
-    margin: auto 0;
-  }
-
-  ${!disabled &&
-  $variant === "primary" &&
-  css`
-    color: ${$outline ? theme.colors.primary : theme.colors.light};
-    background: ${$outline ? "transparent" : theme.colors.primary};
-    border: solid 2px ${theme.colors.primary};
-    box-shadow: 0 0 0 0px ${theme.colors.primary};
-
-    @media (hover: hover) {
-      &:hover {
-        background: ${$outline ? "transparent" : theme.colors.primaryDark};
-        border-color: ${theme.colors.primaryDark};
-        ${$outline && `color: ${theme.colors.primaryDark}`};
-      }
-    }
-
-    &:focus {
-      box-shadow: 0 0 0 4px ${theme.colors.primaryLight};
-    }
-
-    &:active {
-      box-shadow: 0 0 0 2px ${theme.colors.primaryLight};
-    }
-  `}
-
-  ${!disabled &&
-  $variant === "secondary" &&
-  css`
-    color: ${$outline ? theme.colors.secondary : theme.colors.light};
-    background: ${$outline ? "transparent" : theme.colors.secondary};
-    border: solid 2px ${theme.colors.secondary};
-    box-shadow: 0 0 0 0px ${theme.colors.secondary};
-
-    @media (hover: hover) {
-      &:hover {
-        background: ${$outline ? "transparent" : theme.colors.secondaryDark};
-        border-color: ${theme.colors.secondaryDark};
-        ${$outline && `color: ${theme.colors.secondaryDark}`};
-      }
-    }
-
-    &:focus {
-      box-shadow: 0 0 0 4px ${theme.colors.secondaryLight};
-    }
-
-    &:active {
-      box-shadow: 0 0 0 2px ${theme.colors.secondaryLight};
-    }
-  `}
-
-	${!disabled &&
-  $variant === "tertiary" &&
-  css`
-    color: ${$outline ? theme.colors.tertiary : theme.colors.light};
-    background: ${$outline ? "transparent" : theme.colors.tertiary};
-    border: solid 2px ${theme.colors.tertiary};
-    box-shadow: 0 0 0 0px ${theme.colors.tertiary};
-
-    @media (hover: hover) {
-      &:hover {
-        background: ${$outline ? "transparent" : theme.colors.tertiaryDark};
-        border-color: ${theme.colors.tertiaryDark};
-        ${$outline && `color: ${theme.colors.tertiaryDark}`};
-      }
-    }
-
-    &:focus {
-      box-shadow: 0 0 0 4px ${theme.colors.tertiaryLight};
-    }
-
-    &:active {
-      box-shadow: 0 0 0 2px ${theme.colors.tertiaryLight};
-    }
-  `}
-
-	${formElementHeightStyles($size)}
-
-	${$size === "big"
-    ? `font-size: ${theme.fontSizes.buttonBig.lg};
-			line-height: ${theme.lineHeights.buttonBig.lg};
-      padding: 18px 30px;
-	`
-    : `font-size: ${theme.fontSizes.button.lg};
-			line-height: ${theme.lineHeights.button.lg};`}
-
-	${disabled &&
-  `
-		cursor: not-allowed;
-		background: ${theme.colors.grayLight};
-    border: solid 2px ${theme.colors.grayLight};
-		color: ${theme.colors.gray};
-	`}
-
-	${$fullWidth && `width: 100%;`}
-`;
-
-const StyledButton = styled.button<ButtonProps>`
-  ${({ theme, $variant, $size, $outline, $fullWidth, disabled }) =>
-    buttonStyles(theme, $variant, $size, $outline, $fullWidth, disabled)}
-`;
-
-function LocalButton(
-  { $variant = "primary", ...props }: ButtonProps,
-  ref: React.Ref<HTMLButtonElement>,
-) {
-  return (
-    <StyledButton $variant={$variant} {...props} ref={ref}>
-      {props.$iconPosition !== "right" && props.$icon && props.$icon}
-      {props.children}
-      {props.$iconPosition === "right" && props.$icon && props.$icon}
-    </StyledButton>
-  );
-}
-
-const Button = forwardRef(LocalButton);
-
-export { Button };
+"use client";
+import React, { forwardRef } from "react";
+import styled, { css } from "styled-components";
+import { Theme, formElementHeightStyles, resetButton } from "./utils";
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children?: React.ReactNode;
+  $variant?: "primary" | "secondary" | "tertiary";
+  $size?: "default" | "big";
+  $outline?: boolean;
+  $fullWidth?: boolean;
+  $icon?: React.ReactNode;
+  $iconPosition?: "left" | "right";
+  theme?: Theme;
+}
+
+export const buttonStyles = (
+  theme: Theme,
+  $variant?: "primary" | "secondary" | "tertiary",
+  $size?: "default" | "big",
+  $outline?: boolean,
+  $fullWidth?: boolean,
+  disabled?: boolean,
+) => css`
+  ${resetButton};
+  font-family: inherit;
+  display: inline-flex;
+  padding: 15px 30px;
+  border-radius: 100px;
+  font-weight: 600;
+  white-space: nowrap;
+  hyphens: auto;
+  color: ${theme.isDark ? theme.colors.dark : theme.colors.light};
+  text-decoration: none;
+  transition: all 0.3s ease;
+  text-align: center;
+  gap: 10px;
+  text-overflow: ellipsis;
+  justify-content: center;
+
+  & .icon,
+  & .lucide {
+    margin: auto 0;
+  }
+
+  ${!disabled &&
+  $variant === "primary" &&
+  css`
+    color: ${$outline ? theme.colors.primary : theme.colors.light};
+    background: ${$outline ? "transparent" : theme.colors.primary};
+    border: solid 2px ${theme.colors.primary};
+    box-shadow: 0 0 0 0px ${theme.colors.primary};
+
+    @media (hover: hover) {
+      &:hover {
+        background: ${$outline ? "transparent" : theme.colors.primaryDark};
+        border-color: ${theme.colors.primaryDark};
+        ${$outline && `color: ${theme.colors.primaryDark}`};
+      }
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 4px ${theme.colors.primaryLight};
+    }
+
+    &:active {
+      box-shadow: 0 0 0 2px ${theme.colors.primaryLight};
+    }
+  `}
+
+  ${!disabled &&
+  $variant === "secondary" &&
+  css`
+    color: ${$outline ? theme.colors.secondary : theme.colors.light};
+    background: ${$outline ? "transparent" : theme.colors.secondary};
+    border: solid 2px ${theme.colors.secondary};
+    box-shadow: 0 0 0 0px ${theme.colors.secondary};
+
+    @media (hover: hover) {
+      &:hover {
+        background: ${$outline ? "transparent" : theme.colors.secondaryDark};
+        border-color: ${theme.colors.secondaryDark};
+        ${$outline && `color: ${theme.colors.secondaryDark}`};
+      }
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 4px ${theme.colors.secondaryLight};
+    }
+
+    &:active {
+      box-shadow: 0 0 0 2px ${theme.colors.secondaryLight};
+    }
+  `}
+
+	${!disabled &&
+  $variant === "tertiary" &&
+  css`
+    color: ${$outline ? theme.colors.tertiary : theme.colors.light};
+    background: ${$outline ? "transparent" : theme.colors.tertiary};
+    border: solid 2px ${theme.colors.tertiary};
+    box-shadow: 0 0 0 0px ${theme.colors.tertiary};
+
+    @media (hover: hover) {
+      &:hover {
+        background: ${$outline ? "transparent" : theme.colors.tertiaryDark};
+        border-color: ${theme.colors.tertiaryDark};
+        ${$outline && `color: ${theme.colors.tertiaryDark}`};
+      }
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 4px ${theme.colors.tertiaryLight};
+    }
+
+    &:active {
+      box-shadow: 0 0 0 2px ${theme.colors.tertiaryLight};
+    }
+  `}
+
+	${formElementHeightStyles($size)}
+
+	${$size === "big"
+    ? `font-size: ${theme.fontSizes.buttonBig.lg};
+			line-height: ${theme.lineHeights.buttonBig.lg};
+      padding: 18px 30px;
+	`
+    : `font-size: ${theme.fontSizes.button.lg};
+			line-height: ${theme.lineHeights.button.lg};`}
+
+	${disabled &&
+  `
+		cursor: not-allowed;
+		background: ${theme.colors.grayLight};
+    border: solid 2px ${theme.colors.grayLight};
+		color: ${theme.colors.gray};
+	`}
+
+	${$fullWidth && `width: 100%;`}
+`;
+
+const StyledButton = styled.button<ButtonProps>`
+  ${({ theme, $variant, $size, $outline, $fullWidth, disabled }) =>
+    buttonStyles(theme, $variant, $size, $outline, $fullWidth, disabled)}
+`;
+
+function LocalButton(
+  { $variant = "primary", ...props }: ButtonProps,
+  ref: React.Ref<HTMLButtonElement>,
+) {
+  return (
+    <StyledButton $variant={$variant} {...props} ref={ref}>
+      {props.$iconPosition !== "right" && props.$icon && props.$icon}
+      {props.children}
+      {props.$iconPosition === "right" && props.$icon && props.$icon}
+    </StyledButton>
+  );
+}
+
+const Button = forwardRef(LocalButton);
+
+export { Button };