cherry-styled-components 0.1.0-1

package/types/src/app/components/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/types/src/app/components/input.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { Theme } from "./utils";
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    children?: React.ReactNode;
+    $label?: string;
+    $size?: "default" | "big";
+    $error?: boolean;
+    $success?: boolean;
+    $fullWidth?: boolean;
+    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({ ...props }: InputProps): React.JSX.Element;
+export { Input };

package/types/src/app/components/max-width.d.ts

@@ -0,0 +1,13 @@
+import 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;
+}
+declare function MaxWidth({ ...props }: MaxWidthProps): React.JSX.Element;
+export { MaxWidth };

package/types/src/app/components/range.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { Theme } from "./utils";
+interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+    className?: string;
+    $label?: string;
+    $size?: "default" | "big";
+    $error?: boolean;
+    $success?: boolean;
+    $fullWidth?: boolean;
+    theme?: Theme;
+}
+declare function Range({ ...props }: InputProps): React.JSX.Element;
+export { Range };

package/types/src/app/components/select.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { Theme } from "./utils";
+interface SelectProps extends React.InputHTMLAttributes<HTMLSelectElement> {
+    children?: React.ReactNode;
+    $label?: string;
+    $size?: "default" | "big";
+    $error?: boolean;
+    $success?: boolean;
+    $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({ ...props }: SelectProps): React.JSX.Element;
+export { Select };

package/types/src/app/components/space.d.ts

@@ -0,0 +1,14 @@
+import 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 function Space({ ...props }: SpaceProps): React.JSX.Element;
+export { Space };

package/types/src/app/components/styled-components/index.d.ts

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

package/types/src/app/components/styled-components/registry.d.ts

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

package/types/src/app/components/styled-components/theme-provider.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+declare function CherryThemeProvider({ children, theme, }: {
+    children: any;
+    theme?: any;
+}): React.JSX.Element;
+export { CherryThemeProvider };

package/types/src/app/components/textarea.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { Theme } from "./utils";
+interface TextareaProps extends Omit<React.InputHTMLAttributes<HTMLTextAreaElement>, "size"> {
+    children?: React.ReactNode;
+    $label?: string;
+    $size?: "default" | "big";
+    $error?: boolean;
+    $success?: boolean;
+    $fullWidth?: boolean;
+    theme?: Theme;
+}
+declare function Textarea({ ...props }: TextareaProps): React.JSX.Element;
+export { Textarea };

package/types/src/app/components/toggle.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { Theme } from "./utils";
+interface ToggleProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    children?: React.ReactNode;
+    type?: "checkbox" | "radio";
+    $label?: string;
+    $size?: "default" | "big";
+    $error?: boolean;
+    $success?: boolean;
+    $fullWidth?: boolean;
+    theme?: Theme;
+}
+declare function Toggle({ type, ...props }: ToggleProps): React.JSX.Element;
+export { Toggle };

package/types/src/app/components/utils/global.d.ts

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

package/types/src/app/components/utils/icons.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+declare function IconCheck(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
+declare function IconArrow(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
+declare function IconGitHub(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
+declare function IconDiscord(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
+declare function IconDribbble(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
+declare function IconThreads(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
+declare function IconFigma(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
+export { IconCheck, IconArrow, IconGitHub, IconDiscord, IconDribbble, IconThreads, IconFigma, };

package/types/src/app/components/utils/index.d.ts

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

package/types/src/app/components/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/types/src/app/components/utils/theme.d.ts

@@ -0,0 +1,227 @@
+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 shadows: Shadows;
+export declare const fonts: Fonts;
+export declare const fontSizes: FontSizes;
+export declare const lineHeights: LineHeights;
+export declare const theme: 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;
+}
+export {};

package/types/src/app/components/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/types/src/app/layout.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function RootLayout({ children }: any): import("react").JSX.Element;

package/types/src/app/page.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { Metadata } from "next";
+export declare const metadata: Metadata;
+export default function Home(): React.JSX.Element;