cherry-styled-components 0.1.0 → 0.1.2

package/dist/lib/box.d.ts

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,15 @@
+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 const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { Button };

package/dist/lib/col.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { Theme } from './utils';
+interface ColProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+    $span?: number;
+    $xsSpan?: number;
+    $smSpan?: number;
+    $mdSpan?: number;
+    $lgSpan?: number;
+    $xlSpan?: number;
+    $xxlSpan?: number;
+    $xxxlSpan?: number;
+    theme?: Theme;
+}
+declare const Col: React.ForwardRefExoticComponent<ColProps & React.RefAttributes<HTMLDivElement>>;
+export { Col };

package/dist/lib/container.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+import { Theme } from './utils';
+export interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    children?: React.ReactNode;
+    $fluid?: boolean;
+    $textAlign?: "right" | "left" | "center";
+    $padding?: number | "none";
+    $xsPadding?: number | "none";
+    $smPadding?: number | "none";
+    $mdPadding?: number | "none";
+    $lgPadding?: number | "none";
+    $xlPadding?: number | "none";
+    $xxlPadding?: number | "none";
+    $xxxlPadding?: number | "none";
+    theme?: Theme;
+}
+declare const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLDivElement>>;
+export { Container };

package/dist/lib/flex.d.ts

@@ -0,0 +1,29 @@
+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> {
+    children?: React.ReactNode;
+    $justifyContent?: JustifyContentType;
+    $xsJustifyContent?: JustifyContentType;
+    $smJustifyContent?: JustifyContentType;
+    $mdJustifyContent?: JustifyContentType;
+    $lgJustifyContent?: JustifyContentType;
+    $xlJustifyContent?: JustifyContentType;
+    $xxlJustifyContent?: JustifyContentType;
+    $xxxlJustifyContent?: JustifyContentType;
+    $wrap?: "wrap" | "nowrap" | "wrap-reverse";
+    $gap?: GapType;
+    $xsGap?: GapType;
+    $smGap?: GapType;
+    $mdGap?: GapType;
+    $lgGap?: GapType;
+    $xlGap?: GapType;
+    $xxlGap?: GapType;
+    $xxxlGap?: GapType;
+    $direction?: "row" | "column" | "row-reverse" | "column-reverse";
+    $fullWidth?: boolean;
+    theme?: Theme;
+}
+declare const Flex: React.ForwardRefExoticComponent<FlexProps & React.RefAttributes<HTMLDivElement>>;
+export { Flex };

package/dist/lib/grid.d.ts

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+import { Theme } from './utils';
+interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+    $gap?: number | "none";
+    $xsGap?: number | "none";
+    $smGap?: number | "none";
+    $mdGap?: number | "none";
+    $lgGap?: number | "none";
+    $xlGap?: number | "none";
+    $xxlGap?: number | "none";
+    $xxxlGap?: number | "none";
+    $cols?: number;
+    $xsCols?: number;
+    $smCols?: number;
+    $mdCols?: number;
+    $lgCols?: number;
+    $xlCols?: number;
+    $xxlCols?: number;
+    $xxxlCols?: number;
+    theme?: Theme;
+}
+declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>;
+export { Grid };

package/dist/lib/index.d.ts

@@ -0,0 +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';

package/dist/lib/input.d.ts

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+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;
+    $success?: boolean;
+    $fullWidth?: boolean;
+    $icon?: React.ReactNode;
+    $iconPosition?: "left" | "right";
+    theme?: Theme;
+}
+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

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+interface MaxWidthProps extends React.HTMLAttributes<HTMLDivElement> {
+    $size?: number;
+    $xs?: number;
+    $sm?: number;
+    $md?: number;
+    $lg?: number;
+    $xl?: number;
+    $xxl?: number;
+    $xxxl?: number;
+    $m0?: boolean;
+}
+declare const MaxWidth: React.ForwardRefExoticComponent<MaxWidthProps & React.RefAttributes<HTMLDivElement>>;
+export { MaxWidth };

package/dist/lib/range.d.ts

@@ -0,0 +1,14 @@
+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;
+    $success?: boolean;
+    $fullWidth?: boolean;
+    theme?: Theme;
+}
+declare const Range: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export { Range };

package/dist/lib/select.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+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;
+    $success?: boolean;
+    $fullWidth?: boolean;
+    theme?: Theme;
+}
+export declare const StyledIconWrapper: IStyledComponent<"web", SelectProps>;
+declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
+export { Select };

package/dist/lib/space.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+interface SpaceProps {
+    $size?: number | "none";
+    $xs?: number | "none";
+    $sm?: number | "none";
+    $md?: number | "none";
+    $lg?: number | "none";
+    $xl?: number | "none";
+    $xxl?: number | "none";
+    $xxxl?: number | "none";
+    $horizontal?: boolean;
+}
+declare const Space: React.ForwardRefExoticComponent<SpaceProps & React.RefAttributes<HTMLSpanElement>>;
+export { Space };

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

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

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

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

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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,15 @@
+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;
+    $success?: boolean;
+    $fullWidth?: boolean;
+    theme?: Theme;
+    rows?: number;
+}
+declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export { Textarea };

package/dist/lib/toggle.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+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;
+    $success?: boolean;
+    $fullWidth?: boolean;
+    theme?: Theme;
+}
+declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>;
+export { Toggle };

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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { Theme } from './theme';
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+    theme?: Theme;
+}
+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

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

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

@@ -0,0 +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>;

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

@@ -0,0 +1,231 @@
+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;
+    md: TNumber;
+    lg: TNumber;
+    xl: TNumber;
+    xxl: TNumber;
+    xxxl: TNumber;
+}
+export interface Spacing<TString = string> {
+    maxWidth: {
+        xs: TString;
+        xxxl: TString;
+    };
+    padding: {
+        xs: TString;
+        lg: TString;
+    };
+    radius: {
+        xs: TString;
+        lg: TString;
+        xl: TString;
+    };
+    gridGap: {
+        xs: TString;
+        lg: TString;
+    };
+}
+export interface Colors<TString = string> {
+    primaryLight: TString;
+    primary: TString;
+    primaryDark: TString;
+    secondaryLight: TString;
+    secondary: TString;
+    secondaryDark: TString;
+    tertiaryLight: TString;
+    tertiary: TString;
+    tertiaryDark: TString;
+    grayLight: TString;
+    gray: TString;
+    grayDark: TString;
+    success: TString;
+    error: TString;
+    warning: TString;
+    info: TString;
+    dark: TString;
+    light: TString;
+}
+interface Shadows<TString = string> {
+    xs: TString;
+    sm: TString;
+    md: TString;
+    lg: TString;
+    xl: TString;
+}
+export interface Fonts<TString = string> {
+    head: TString;
+    text: TString;
+    mono: TString;
+}
+export interface FontSizes<TString = string> {
+    hero1: {
+        xs: TString;
+        lg: TString;
+    };
+    hero2: {
+        xs: TString;
+        lg: TString;
+    };
+    hero3: {
+        xs: TString;
+        lg: TString;
+    };
+    h1: {
+        xs: TString;
+        lg: TString;
+    };
+    h2: {
+        xs: TString;
+        lg: TString;
+    };
+    h3: {
+        xs: TString;
+        lg: TString;
+    };
+    h4: {
+        xs: TString;
+        lg: TString;
+    };
+    h5: {
+        xs: TString;
+        lg: TString;
+    };
+    h6: {
+        xs: TString;
+        lg: TString;
+    };
+    text: {
+        xs: TString;
+        lg: TString;
+    };
+    strong: {
+        xs: TString;
+        lg: TString;
+    };
+    small: {
+        xs: TString;
+        lg: TString;
+    };
+    blockquote: {
+        xs: TString;
+        lg: TString;
+    };
+    code: {
+        xs: TString;
+        lg: TString;
+    };
+    button: {
+        xs: TString;
+        lg: TString;
+    };
+    buttonBig: {
+        xs: TString;
+        lg: TString;
+    };
+    input: {
+        xs: TString;
+        lg: TString;
+    };
+    inputBig: {
+        xs: TString;
+        lg: TString;
+    };
+}
+export interface LineHeights<TString = string> {
+    hero1: {
+        xs: TString;
+        lg: TString;
+    };
+    hero2: {
+        xs: TString;
+        lg: TString;
+    };
+    hero3: {
+        xs: TString;
+        lg: TString;
+    };
+    h1: {
+        xs: TString;
+        lg: TString;
+    };
+    h2: {
+        xs: TString;
+        lg: TString;
+    };
+    h3: {
+        xs: TString;
+        lg: TString;
+    };
+    h4: {
+        xs: TString;
+        lg: TString;
+    };
+    h5: {
+        xs: TString;
+        lg: TString;
+    };
+    h6: {
+        xs: TString;
+        lg: TString;
+    };
+    text: {
+        xs: TString;
+        lg: TString;
+    };
+    strong: {
+        xs: TString;
+        lg: TString;
+    };
+    small: {
+        xs: TString;
+        lg: TString;
+    };
+    blockquote: {
+        xs: TString;
+        lg: TString;
+    };
+    code: {
+        xs: TString;
+        lg: TString;
+    };
+    button: {
+        xs: TString;
+        lg: TString;
+    };
+    buttonBig: {
+        xs: TString;
+        lg: TString;
+    };
+    input: {
+        xs: TString;
+        lg: TString;
+    };
+    inputBig: {
+        xs: TString;
+        lg: TString;
+    };
+}
+export interface Theme {
+    breakpoints: Breakpoints;
+    spacing: Spacing;
+    colors: Colors;
+    shadows: Shadows;
+    fonts: Fonts;
+    fontSizes: FontSizes;
+    lineHeights: LineHeights;
+    isDark: boolean;
+}
+export {};

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

@@ -0,0 +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>;
+export { styledHero1, styledHero2, styledHero3, styledH1, styledH2, styledH3, styledH4, styledH5, styledH6, styledText, styledStrong, styledSmall, styledBlockquote, styledCode, styledButton, styledButtonBig, styledInput, styledInputBig, };

package/dist/main.d.ts

@@ -0,0 +1 @@
+export {};

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/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/package.json

@@ -1,37 +1,50 @@
 {
   "name": "cherry-styled-components",
-  "version": "0.1.0",
+  "version": "0.1.2",
+  "description": "Cherry is a design system for the modern web. Designed in Figma, built in React using Typescript.",
   "private": false,
-  "main": "/src/app/components/cherry/index.ts",
-  "files": [
-    "/src/app/components/cherry/**"
+  "type": "module",
+  "main": "./dist/cherry.umd.cjs",
+  "module": "./dist/cherry.js",
+  "types": "./dist/lib/index.d.ts",
+  "author": "Luan Gjokaj <luan@riangle.com>",
+  "homepage": "https://cherry.design",
+  "repository": "https://github.com/cherry-design-system/styled-components",
+  "license": "MIT",
+  "keywords": [
+    "cherry",
+    "react",
+    "figma",
+    "components",
+    "ui",
+    "css",
+    "framework",
+    "design",
+    "design system",
+    "styled-components"
   ],
   "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint",
-    "format": "prettier --write \"./src/**/*.{js,json,ts,tsx}\" \"!.node_modules/**\""
+    "dev": "vite dev",
+    "build": "vite build",
+    "format": "prettier --write \"./**/*.{js,json,ts,tsx}\""
   },
   "dependencies": {
-    "next": "14.1.3",
-    "react": "^18",
-    "react-dom": "^18"
+    "react": "^19",
+    "react-dom": "^19"
   },
   "devDependencies": {
-    "@mdx-js/loader": "^3.0.1",
-    "@next/mdx": "^14.1.3",
-    "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "algoliasearch": "^4.22.1",
-    "eslint": "^8",
-    "eslint-config-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",
-    "react-instantsearch": "^7.7.0",
-    "rehype-highlight": "^7.0.0",
-    "styled-components": "^6.1.8",
-    "typescript": "^5"
+    "prettier": "^3.8.1",
+    "styled-components": "^6.3.8",
+    "typescript": "^5",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4"
   }
 }