cherry-styled-components 0.1.2 → 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cherry-styled-components",
-  "version": "0.1.2",
+  "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",
@@ -29,21 +29,22 @@
     "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/lib/button.tsx

@@ -1,6 +1,8 @@
 "use client";
 import React, { forwardRef } from "react";
 import styled, { css } from "styled-components";
+import { lighten, darken } from "polished";
+
 import { Theme, formElementHeightStyles, resetButton } from "./utils";
 
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -11,6 +13,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
   $fullWidth?: boolean;
   $icon?: React.ReactNode;
   $iconPosition?: "left" | "right";
+  $isError?: boolean;
   theme?: Theme;
 }
 
@@ -20,6 +23,7 @@ export const buttonStyles = (
   $size?: "default" | "big",
   $outline?: boolean,
   $fullWidth?: boolean,
+  $isError?: boolean,
   disabled?: boolean,
 ) => css`
   ${resetButton};
@@ -118,6 +122,34 @@ export const buttonStyles = (
     }
   `}
 
+  ${!disabled &&
+  $isError &&
+  css`
+    color: ${$outline ? theme.colors.error : theme.colors.light};
+    background: ${$outline ? "transparent" : theme.colors.error};
+    border: solid 2px ${theme.colors.error};
+    box-shadow: 0 0 0 0px ${theme.colors.error};
+
+    @media (hover: hover) {
+      &:hover {
+        background: ${$outline
+          ? "transparent"
+          : darken(0.1, theme.colors.error)};
+        border-color: ${darken(0.1, theme.colors.error)};
+        ${$outline && `color: ${darken(0.1, theme.colors.error)}`};
+      }
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 4px ${lighten(0.1, theme.colors.error)};
+    }
+
+    &:active {
+      box-shadow: 0 0 0 2px ${lighten(0.1, theme.colors.error)};
+    }
+  `}
+
+
 	${formElementHeightStyles($size)}
 
 	${$size === "big"
@@ -140,8 +172,16 @@ export const buttonStyles = (
 `;
 
 const StyledButton = styled.button<ButtonProps>`
-  ${({ theme, $variant, $size, $outline, $fullWidth, disabled }) =>
-    buttonStyles(theme, $variant, $size, $outline, $fullWidth, disabled)}
+  ${({ theme, $variant, $isError, $size, $outline, $fullWidth, disabled }) =>
+    buttonStyles(
+      theme,
+      $variant,
+      $size,
+      $outline,
+      $fullWidth,
+      $isError,
+      disabled,
+    )}
 `;
 
 function LocalButton(
@@ -149,7 +189,12 @@ function LocalButton(
   ref: React.Ref<HTMLButtonElement>,
 ) {
   return (
-    <StyledButton $variant={$variant} {...props} ref={ref}>
+    <StyledButton
+      $variant={$variant}
+      $isError={props.$isError}
+      {...props}
+      ref={ref}
+    >
       {props.$iconPosition !== "right" && props.$icon && props.$icon}
       {props.children}
       {props.$iconPosition === "right" && props.$icon && props.$icon}

package/src/lib/icon.tsx

@@ -0,0 +1,18 @@
+import { icons } from "lucide-react";
+
+export type IconProps = keyof typeof icons;
+
+interface Props {
+  name: IconProps;
+  color?: string;
+  size?: number;
+  className?: string;
+}
+
+const Icon = ({ name, color, size, className }: Props) => {
+  const LucideIcon = icons[name];
+
+  return <LucideIcon color={color} size={size} className={className} />;
+};
+
+export { Icon };

package/src/lib/index.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";