cherry-styled-components 0.1.1 → 0.1.3

package/dist/lib/button.d.ts

@@ -8,8 +8,9 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     $fullWidth?: boolean;
     $icon?: React.ReactNode;
     $iconPosition?: "left" | "right";
+    $isError?: boolean;
     theme?: Theme;
 }
-export declare const buttonStyles: (theme: Theme, $variant?: "primary" | "secondary" | "tertiary", $size?: "default" | "big", $outline?: boolean, $fullWidth?: boolean, disabled?: boolean) => import('styled-components').RuleSet<object>;
+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>;
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export { Button };

package/dist/lib/icon.d.ts

@@ -0,0 +1,10 @@
+import { icons } from 'lucide-react';
+export type IconProps = keyof typeof icons;
+interface Props {
+    name: IconProps;
+    color?: string;
+    size?: number;
+    className?: string;
+}
+declare const Icon: ({ name, color, size, className }: Props) => import("react").JSX.Element;
+export { Icon };

package/dist/lib/index.d.ts

@@ -6,6 +6,7 @@ export * from './col';
 export * from './container';
 export * from './flex';
 export * from './grid';
+export * from './icon';
 export * from './input';
 export * from './max-width';
 export * from './range';

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.3",
   "description": "Cherry is a design system for the modern web. Designed in Figma, built in React using Typescript.",
   "private": false,
   "type": "module",
@@ -26,24 +26,25 @@
   "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",
-    "react-dom": "^19"
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
   },
   "devDependencies": {
-    "@types/node": "^25",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
+    "@types/node": "^25.2.1",
+    "@types/react": "^19.2.13",
+    "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.3",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.5.0",
+    "lucide-react": "^0.563.0",
     "next": "^16.1.6",
     "polished": "^4.3.1",
     "prettier": "^3.8.1",
     "styled-components": "^6.3.8",
-    "typescript": "^5",
+    "typescript": "^5.9.3",
     "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4"
   }

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 };