cherry-styled-components 0.1.0-9 → 0.1.1

package/dist/lib/box.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
-import { ContainerProps } from "./container";
-declare function Box({ theme, ...props }: ContainerProps): React.JSX.Element;
+import { default as React } from 'react';
+import { ContainerProps } from './container';
+declare const Box: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLDivElement>>;
 export { Box };

package/dist/lib/button.d.ts

@@ -1,13 +1,15 @@
-import React from "react";
-import { Theme } from "./utils";
+import { default as React } from 'react';
+import { Theme } 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 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({ theme, $variant, ...props }: ButtonProps): React.JSX.Element;
+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 const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export { Button };

package/dist/lib/col.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-import { Theme } from "./utils";
+import { default as React } from 'react';
+import { Theme } from './utils';
 interface ColProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
     $span?: number;
@@ -12,5 +12,5 @@ interface ColProps extends React.HTMLAttributes<HTMLDivElement> {
     $xxxlSpan?: number;
     theme?: Theme;
 }
-declare function Col({ theme, ...props }: ColProps): React.JSX.Element;
+declare const Col: React.ForwardRefExoticComponent<ColProps & React.RefAttributes<HTMLDivElement>>;
 export { Col };

package/dist/lib/container.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-import { Theme } from "./utils";
+import { default as React } from 'react';
+import { Theme } from './utils';
 export interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
     className?: string;
     children?: React.ReactNode;
@@ -15,5 +15,5 @@ export interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
     $xxxlPadding?: number | "none";
     theme?: Theme;
 }
-declare function Container({ theme, ...props }: ContainerProps): React.JSX.Element;
+declare const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLDivElement>>;
 export { Container };

package/dist/lib/flex.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-import { Theme } from "./utils";
+import { default as React } from 'react';
+import { Theme } from './utils';
 type JustifyContentType = "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly";
 type GapType = number | "none";
 interface FlexProps extends React.AllHTMLAttributes<FlexProps> {
@@ -21,7 +21,9 @@ interface FlexProps extends React.AllHTMLAttributes<FlexProps> {
     $xlGap?: GapType;
     $xxlGap?: GapType;
     $xxxlGap?: GapType;
+    $direction?: "row" | "column" | "row-reverse" | "column-reverse";
+    $fullWidth?: boolean;
     theme?: Theme;
 }
-declare function Flex({ theme, ...props }: FlexProps): React.JSX.Element;
+declare const Flex: React.ForwardRefExoticComponent<FlexProps & React.RefAttributes<HTMLDivElement>>;
 export { Flex };

package/dist/lib/grid.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-import { Theme } from "./utils";
+import { default as React } from 'react';
+import { Theme } from './utils';
 interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
     $gap?: number | "none";
@@ -20,5 +20,5 @@ interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
     $xxxlCols?: number;
     theme?: Theme;
 }
-declare function Grid({ theme, ...props }: GridProps): React.JSX.Element;
+declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>;
 export { Grid };

package/dist/lib/index.d.ts

@@ -1,15 +1,15 @@
-export * from "./styled-components";
-export * from "./utils";
-export * from "./box";
-export * from "./button";
-export * from "./col";
-export * from "./container";
-export * from "./flex";
-export * from "./grid";
-export * from "./input";
-export * from "./max-width";
-export * from "./range";
-export * from "./select";
-export * from "./space";
-export * from "./textarea";
-export * from "./toggle";
+export * from './styled-components';
+export * from './utils';
+export * from './box';
+export * from './button';
+export * from './col';
+export * from './container';
+export * from './flex';
+export * from './grid';
+export * from './input';
+export * from './max-width';
+export * from './range';
+export * from './select';
+export * from './space';
+export * from './textarea';
+export * from './toggle';

package/dist/lib/input.d.ts

@@ -1,5 +1,6 @@
-import React from "react";
-import { Theme } from "./utils";
+import { default as React } from 'react';
+import { IStyledComponent } from 'styled-components';
+import { Theme } from './utils';
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     children?: React.ReactNode;
     $label?: string;
@@ -7,9 +8,19 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     $error?: boolean;
     $success?: boolean;
     $fullWidth?: boolean;
+    $icon?: React.ReactNode;
+    $iconPosition?: "left" | "right";
     theme?: Theme;
 }
-export declare const StyledInputWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, InputProps>>;
-export declare const StyledLabel: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, InputProps>>;
-declare function Input({ theme, ...props }: InputProps): React.JSX.Element;
+interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+    $label?: string;
+    $size?: "default" | "big";
+    $error?: boolean;
+    $success?: boolean;
+    $fullWidth?: boolean;
+    theme?: Theme;
+}
+export declare const StyledInputWrapper: IStyledComponent<"web", React.HTMLAttributes<HTMLSpanElement> & Pick<InputProps, "$label" | "$fullWidth" | "type">>;
+export declare const StyledLabel: IStyledComponent<"web", LabelProps>;
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 export { Input };

package/dist/lib/max-width.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import { default as React } from 'react';
 interface MaxWidthProps extends React.HTMLAttributes<HTMLDivElement> {
     $size?: number;
     $xs?: number;
@@ -8,6 +8,7 @@ interface MaxWidthProps extends React.HTMLAttributes<HTMLDivElement> {
     $xl?: number;
     $xxl?: number;
     $xxxl?: number;
+    $m0?: boolean;
 }
-declare function MaxWidth({ ...props }: MaxWidthProps): React.JSX.Element;
+declare const MaxWidth: React.ForwardRefExoticComponent<MaxWidthProps & React.RefAttributes<HTMLDivElement>>;
 export { MaxWidth };

package/dist/lib/range.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-import { Theme } from "./utils";
+import { default as React } from 'react';
+import { Theme } from './utils';
 interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
     className?: string;
     $label?: string;
@@ -9,5 +9,5 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "
     $fullWidth?: boolean;
     theme?: Theme;
 }
-declare function Range({ theme, ...props }: InputProps): React.JSX.Element;
+declare const Range: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 export { Range };

package/dist/lib/select.d.ts

@@ -1,5 +1,6 @@
-import React from "react";
-import { Theme } from "./utils";
+import { default as React } from 'react';
+import { IStyledComponent } from 'styled-components';
+import { Theme } from './utils';
 interface SelectProps extends React.InputHTMLAttributes<HTMLSelectElement> {
     children?: React.ReactNode;
     $label?: string;
@@ -9,6 +10,6 @@ interface SelectProps extends React.InputHTMLAttributes<HTMLSelectElement> {
     $fullWidth?: boolean;
     theme?: Theme;
 }
-export declare const StyledIconWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, SelectProps>>;
-declare function Select({ theme, ...props }: SelectProps): React.JSX.Element;
+export declare const StyledIconWrapper: IStyledComponent<"web", SelectProps>;
+declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
 export { Select };

package/dist/lib/space.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import { default as React } from 'react';
 interface SpaceProps {
     $size?: number | "none";
     $xs?: number | "none";
@@ -10,5 +10,5 @@ interface SpaceProps {
     $xxxl?: number | "none";
     $horizontal?: boolean;
 }
-declare function Space({ ...props }: SpaceProps): React.JSX.Element;
+declare const Space: React.ForwardRefExoticComponent<SpaceProps & React.RefAttributes<HTMLSpanElement>>;
 export { Space };

package/dist/lib/styled-components/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./registry";
-export * from "./theme-provider";
+export * from './registry';
+export * from './theme-provider';

package/dist/lib/styled-components/registry.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import { default as React } from 'react';
 declare function StyledComponentsRegistry({ children }: {
     children: React.ReactNode;
 }): React.JSX.Element;

package/dist/lib/styled-components/theme-provider.d.ts

@@ -1,6 +1,12 @@
-import React from "react";
-declare function CherryThemeProvider({ children, theme, }: {
-    children: any;
-    theme?: any;
+import { default as React } from 'react';
+import { Theme } from '../utils';
+interface ThemeContextProps {
+    setTheme: any;
+}
+export declare const ThemeContext: React.Context<ThemeContextProps>;
+declare function CherryThemeProvider({ children, theme, themeDark, }: {
+    children: React.ReactNode;
+    theme: Theme;
+    themeDark?: Theme;
 }): React.JSX.Element;
 export { CherryThemeProvider };

package/dist/lib/textarea.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-import { Theme } from "./utils";
+import { default as React } from 'react';
+import { Theme } from './utils';
 interface TextareaProps extends Omit<React.InputHTMLAttributes<HTMLTextAreaElement>, "size"> {
     children?: React.ReactNode;
     $label?: string;
@@ -8,6 +8,7 @@ interface TextareaProps extends Omit<React.InputHTMLAttributes<HTMLTextAreaEleme
     $success?: boolean;
     $fullWidth?: boolean;
     theme?: Theme;
+    rows?: number;
 }
-declare function Textarea({ theme, ...props }: TextareaProps): React.JSX.Element;
+declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
 export { Textarea };

package/dist/lib/toggle.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-import { Theme } from "./utils";
+import { default as React } from 'react';
+import { Theme } from './utils';
 interface ToggleProps extends React.InputHTMLAttributes<HTMLInputElement> {
     children?: React.ReactNode;
     type?: "checkbox" | "radio";
@@ -10,5 +10,5 @@ interface ToggleProps extends React.InputHTMLAttributes<HTMLInputElement> {
     $fullWidth?: boolean;
     theme?: Theme;
 }
-declare function Toggle({ theme, type, ...props }: ToggleProps): React.JSX.Element;
+declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>;
 export { Toggle };

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

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare const GlobalStyles: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & object>;
+import { Theme } from './theme';
+declare const GlobalStyles: (theme: Theme) => import('react').NamedExoticComponent<import('styled-components').ExecutionProps & object>;
 export { GlobalStyles };

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

@@ -1,13 +1,9 @@
-import React from "react";
-import { Theme } from "./theme";
+import { default as React } from 'react';
+import { Theme } from './theme';
 interface IconProps extends React.SVGProps<SVGSVGElement> {
     theme?: Theme;
 }
-declare function IconCheck({ theme, ...props }: IconProps): React.JSX.Element;
-declare function IconArrow({ theme, ...props }: IconProps): React.JSX.Element;
-declare function IconGitHub({ theme, ...props }: IconProps): React.JSX.Element;
-declare function IconDiscord({ theme, ...props }: IconProps): React.JSX.Element;
-declare function IconDribbble({ theme, ...props }: IconProps): React.JSX.Element;
-declare function IconThreads({ theme, ...props }: IconProps): React.JSX.Element;
-declare function IconFigma({ theme, className, ...props }: IconProps): React.JSX.Element;
-export { IconCheck, IconArrow, IconGitHub, IconDiscord, IconDribbble, IconThreads, IconFigma, };
+declare function IconCheck({ ...props }: IconProps): React.JSX.Element;
+declare function IconArrow({ ...props }: IconProps): React.JSX.Element;
+declare function IconCalendar({ ...props }: IconProps): React.JSX.Element;
+export { IconCheck, IconArrow, IconCalendar };

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

@@ -1,5 +1,5 @@
-export * from "./global";
-export * from "./icons";
-export * from "./mixins";
-export * from "./theme";
-export * from "./typography";
+export * from './global';
+export * from './icons';
+export * from './mixins';
+export * from './theme';
+export * from './typography';

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

@@ -1,11 +1,11 @@
-import { Breakpoints, Theme } from "./theme";
-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 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>;
-export declare const generatePaddingStyles: (size: keyof Breakpoints<number>, padding: number | "none") => import("styled-components").RuleSet<object>;
-export declare const generateJustifyContentStyles: (size: keyof Breakpoints<number>, justifyContent?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly") => import("styled-components").RuleSet<object>;
+import { Breakpoints, Theme } from './theme';
+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 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>;
+export declare const generatePaddingStyles: (size: keyof Breakpoints<number>, padding: number | "none") => import('styled-components').RuleSet<object>;
+export declare const generateJustifyContentStyles: (size: keyof Breakpoints<number>, justifyContent?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly") => import('styled-components').RuleSet<object>;

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

@@ -2,11 +2,14 @@ export declare const breakpoints: Breakpoints;
 export declare function mq(minWidth: keyof Breakpoints): string;
 export declare const spacing: Spacing;
 export declare const colors: Colors;
+export declare const colorsDark: Colors;
 export declare const shadows: Shadows;
+export declare const shadowsDark: Shadows;
 export declare const fonts: Fonts;
 export declare const fontSizes: FontSizes;
 export declare const lineHeights: LineHeights;
 export declare const theme: Theme;
+export declare const themeDark: Theme;
 export interface Breakpoints<TNumber = number> {
     xs: TNumber;
     sm: TNumber;
@@ -223,5 +226,6 @@ export interface Theme {
     fonts: Fonts;
     fontSizes: FontSizes;
     lineHeights: LineHeights;
+    isDark: boolean;
 }
 export {};

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

@@ -1,20 +1,20 @@
-import { Theme } from "./theme";
-declare const styledHero1: (theme: Theme) => import("styled-components").RuleSet<object>;
-declare const styledHero2: (theme: Theme) => import("styled-components").RuleSet<object>;
-declare const styledHero3: (theme: Theme) => import("styled-components").RuleSet<object>;
-declare const styledH1: (theme: Theme) => import("styled-components").RuleSet<object>;
-declare const styledH2: (theme: Theme) => import("styled-components").RuleSet<object>;
-declare const styledH3: (theme: Theme) => import("styled-components").RuleSet<object>;
-declare const styledH4: (theme: Theme) => import("styled-components").RuleSet<object>;
-declare const styledH5: (theme: Theme) => import("styled-components").RuleSet<object>;
-declare const styledH6: (theme: Theme) => import("styled-components").RuleSet<object>;
-declare const styledText: (theme: Theme) => import("styled-components").RuleSet<object>;
-declare const styledStrong: (theme: Theme) => import("styled-components").RuleSet<object>;
-declare const styledSmall: (theme: Theme) => import("styled-components").RuleSet<object>;
-declare const styledBlockquote: (theme: Theme) => import("styled-components").RuleSet<object>;
-declare const styledCode: (theme: Theme) => import("styled-components").RuleSet<object>;
-declare const styledButton: (theme: Theme) => import("styled-components").RuleSet<object>;
-declare const styledButtonBig: (theme: Theme) => import("styled-components").RuleSet<object>;
-declare const styledInput: (theme: Theme) => import("styled-components").RuleSet<object>;
-declare const styledInputBig: (theme: Theme) => import("styled-components").RuleSet<object>;
+import { Theme } from './theme';
+declare const styledHero1: (theme: Theme) => import('styled-components').RuleSet<object>;
+declare const styledHero2: (theme: Theme) => import('styled-components').RuleSet<object>;
+declare const styledHero3: (theme: Theme) => import('styled-components').RuleSet<object>;
+declare const styledH1: (theme: Theme) => import('styled-components').RuleSet<object>;
+declare const styledH2: (theme: Theme) => import('styled-components').RuleSet<object>;
+declare const styledH3: (theme: Theme) => import('styled-components').RuleSet<object>;
+declare const styledH4: (theme: Theme) => import('styled-components').RuleSet<object>;
+declare const styledH5: (theme: Theme) => import('styled-components').RuleSet<object>;
+declare const styledH6: (theme: Theme) => import('styled-components').RuleSet<object>;
+declare const styledText: (theme: Theme) => import('styled-components').RuleSet<object>;
+declare const styledStrong: (theme: Theme) => import('styled-components').RuleSet<object>;
+declare const styledSmall: (theme: Theme) => import('styled-components').RuleSet<object>;
+declare const styledBlockquote: (theme: Theme) => import('styled-components').RuleSet<object>;
+declare const styledCode: (theme: Theme) => import('styled-components').RuleSet<object>;
+declare const styledButton: (theme: Theme) => import('styled-components').RuleSet<object>;
+declare const styledButtonBig: (theme: Theme) => import('styled-components').RuleSet<object>;
+declare const styledInput: (theme: Theme) => import('styled-components').RuleSet<object>;
+declare const styledInputBig: (theme: Theme) => import('styled-components').RuleSet<object>;
 export { styledHero1, styledHero2, styledHero3, styledH1, styledH2, styledH3, styledH4, styledH5, styledH6, styledText, styledStrong, styledSmall, styledBlockquote, styledCode, styledButton, styledButtonBig, styledInput, styledInputBig, };

package/dist/toggle-theme.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+declare function ToggleTheme(): React.JSX.Element;
+export { ToggleTheme };

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "cherry-styled-components",
-  "version": "0.1.0-9",
+  "version": "0.1.1",
+  "description": "Cherry is a design system for the modern web. Designed in Figma, built in React using Typescript.",
   "private": false,
   "type": "module",
   "main": "./dist/cherry.umd.cjs",
@@ -13,7 +14,9 @@
   "keywords": [
     "cherry",
     "react",
+    "figma",
     "components",
+    "ui",
     "css",
     "framework",
     "design",
@@ -26,23 +29,22 @@
     "format": "prettier --write \"./src/**/*.{js,json,ts,tsx}\" \"!.node_modules/**\""
   },
   "dependencies": {
-    "react": "^18",
-    "react-dom": "^18"
+    "react": "^19",
+    "react-dom": "^19"
   },
   "devDependencies": {
-    "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "@vitejs/plugin-react": "^4.2.1",
-    "eslint": "^8.57.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.6",
-    "next": "^14.1.3",
+    "@types/node": "^25",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@vitejs/plugin-react": "^5.1.3",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.0",
+    "next": "^16.1.6",
     "polished": "^4.3.1",
-    "prettier": "^3.2.5",
-    "styled-components": "^6.1.8",
+    "prettier": "^3.8.1",
+    "styled-components": "^6.3.8",
     "typescript": "^5",
-    "vite": "^5.1.6",
-    "vite-plugin-dts": "^3.7.3"
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4"
   }
 }

package/pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+ignoredBuiltDependencies:
+  - esbuild
+  - sharp