cherry-styled-components 0.1.11 → 0.1.13

package/src/lib/max-width.tsx

@@ -1,53 +0,0 @@
-"use client";
-import React, { forwardRef } from "react";
-import styled from "styled-components";
-import { Breakpoints, mq } from "./utils";
-
-interface MaxWidthProps extends React.HTMLAttributes<HTMLDivElement> {
-  $size?: number;
-  $xs?: number;
-  $sm?: number;
-  $md?: number;
-  $lg?: number;
-  $xl?: number;
-  $xxl?: number;
-  $xxxl?: number;
-  $m0?: boolean;
-}
-
-const styles = ($size: number | "none") => `max-width: ${$size}px;`;
-
-function responsiveStyles(props: any) {
-  return Object.keys(props)
-    .filter((key) => key.startsWith("$"))
-    .map((key) => {
-      const size = key.substring(1) as keyof Breakpoints<number>;
-      return props[key] && mq(size) + `{ ${styles(props[key])} }`;
-    })
-    .join("");
-}
-
-const StyledMaxWidth = styled.div<MaxWidthProps>`
-  display: block;
-  margin: ${({ $m0 }) => ($m0 ? "0" : "auto")};
-
-  ${({ $size }) => `
-		${$size && styles($size)};
-	`}
-  ${(props) => responsiveStyles(props)}
-`;
-
-function LocalMaxWidth(
-  { ...props }: MaxWidthProps,
-  ref: React.Ref<HTMLDivElement>,
-) {
-  return (
-    <StyledMaxWidth {...props} ref={ref}>
-      {props.children}
-    </StyledMaxWidth>
-  );
-}
-
-const MaxWidth = forwardRef(LocalMaxWidth);
-
-export { MaxWidth };

package/src/lib/select.tsx

@@ -1,136 +0,0 @@
-"use client";
-import React, { forwardRef } from "react";
-import styled, { IStyledComponent } from "styled-components";
-import {
-  Theme,
-  IconArrow,
-  formElementHeightStyles,
-  fullWidthStyles,
-  resetButton,
-  resetInput,
-  statusBorderStyles,
-} from "./utils";
-import { StyledInputWrapper, StyledLabel } from "./input";
-
-interface SelectProps extends React.InputHTMLAttributes<HTMLSelectElement> {
-  children?: React.ReactNode;
-  $wrapperClassName?: string;
-  $label?: string;
-  $size?: "default" | "big" | "small";
-  $error?: boolean;
-  $success?: boolean;
-  $fullWidth?: boolean;
-  theme?: Theme;
-}
-
-const StyledSelect = styled.select<SelectProps>`
-  ${resetButton};
-  ${resetInput};
-  font-family: inherit;
-  display: inline-block;
-  padding: 0 15px;
-  border-radius: ${({ theme }) => theme.spacing.radius.xs};
-  font-weight: 400;
-  white-space: nowrap;
-  hyphens: auto;
-  color: ${({ theme }) => theme.colors.dark};
-  background: ${({ theme }) => theme.colors.light};
-  border: solid 2px ${({ theme }) => theme.colors.grayLight};
-  box-shadow: 0 0 0 0px ${({ theme }) => theme.colors.primaryLight};
-  transition: all 0.3s ease;
-
-  &::placeholder {
-    color: ${({ theme }) => theme.colors.gray};
-  }
-
-  &:hover:not([disabled]) {
-    border-color: ${({ theme }) => theme.colors.primary};
-  }
-
-  &:focus:not([disabled]) {
-    box-shadow: 0 0 0 4px ${({ theme }) => theme.colors.primaryLight};
-    border-color: ${({ theme }) => theme.colors.primary};
-  }
-
-  &:active:not([disabled]) {
-    box-shadow: 0 0 0 2px ${({ theme }) => theme.colors.primaryLight};
-  }
-
-  ${({ $size }) => formElementHeightStyles($size)}
-
-  ${({ $size, theme }) =>
-    $size === "big"
-      ? `font-size: ${theme.fontSizes.inputBig.lg};`
-      : $size === "small"
-        ? `font-size: ${theme.fontSizes.inputSmall.lg}; padding: 0 12px;`
-        : `font-size: ${theme.fontSizes.input.lg};`}
-
-	${({ $error, $success, theme }) => {
-    return statusBorderStyles(
-      $error ? true : false,
-      $success ? true : false,
-      theme,
-    );
-  }}
-
-	${({ disabled, theme }) =>
-    disabled &&
-    `cursor: not-allowed;
-		background: ${theme.colors.grayLight};
-		border-color: ${theme.colors.gray};
-		color: ${theme.colors.gray};
-	`}
-
-	${({ $fullWidth }) => fullWidthStyles($fullWidth ? true : false)}
-`;
-
-export const StyledIconWrapper: IStyledComponent<"web", SelectProps> =
-  styled.span<SelectProps>`
-    position: relative;
-    ${({ $fullWidth }) => fullWidthStyles($fullWidth ? true : false)}
-
-    & svg {
-      position: absolute;
-      top: 50%;
-      right: 15px;
-      transform: translateY(-50%) rotate(0);
-      transition: all 0.3s ease;
-      pointer-events: none;
-    }
-
-    & select {
-      padding-right: 40px;
-    }
-
-    & select:active:not([disabled]) ~ svg,
-    & select:focus:not([disabled]) ~ svg {
-      transform: translateY(-50%) rotate(180deg);
-    }
-  `;
-
-function LocalSelect(
-  { ...props }: SelectProps,
-  ref: React.Ref<HTMLSelectElement>,
-) {
-  return (
-    <StyledInputWrapper
-      $fullWidth={props.$fullWidth}
-      $label={props.$label}
-      className={props.$wrapperClassName}
-    >
-      {props.$label && (
-        <StyledLabel htmlFor={props.id}>{props.$label}</StyledLabel>
-      )}
-      <StyledIconWrapper $fullWidth={props.$fullWidth}>
-        <StyledSelect {...props} ref={ref}>
-          {props.children}
-        </StyledSelect>
-        <IconArrow />
-      </StyledIconWrapper>
-    </StyledInputWrapper>
-  );
-}
-
-const Select = forwardRef(LocalSelect);
-
-export { Select };

package/src/lib/space.tsx

@@ -1,55 +0,0 @@
-"use client";
-import React, { forwardRef } from "react";
-import styled from "styled-components";
-import { Breakpoints, mq } from "./utils";
-
-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;
-}
-
-const styles = ($size: number | "none", $horizontal: boolean) =>
-  $size === "none"
-    ? `display: none;`
-    : $horizontal
-      ? `display: inline-block;
-			max-height: 0;
-			min-width: ${$size}px;
-			max-width: ${$size}px;`
-      : `display: block;
-			min-height: ${$size}px;
-			max-height: ${$size}px;`;
-
-function responsiveStyles(props: any) {
-  return Object.keys(props)
-    .filter((key) => key.startsWith("$"))
-    .map((key) => {
-      const size = key.substring(1) as keyof Breakpoints<number>;
-      return (
-        props[key] &&
-        mq(size) + `{ ${styles(props[key], props.$horizontal || false)} }`
-      );
-    })
-    .join("");
-}
-
-const StyledSpace = styled.span<SpaceProps>`
-  ${({ $horizontal, $size }) =>
-    $size ? styles($size, $horizontal || false) : ""}
-  ${(props) => responsiveStyles(props)}
-`;
-
-function LocalSpace({ ...props }: SpaceProps, ref: React.Ref<HTMLSpanElement>) {
-  return <StyledSpace {...props} ref={ref} />;
-}
-
-const Space = forwardRef(LocalSpace);
-
-export { Space };

package/src/lib/styled-components/index.ts

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

package/src/lib/styled-components/registry.tsx

@@ -1,29 +0,0 @@
-"use client";
-import React, { useState } from "react";
-import { useServerInsertedHTML } from "next/navigation";
-import { ServerStyleSheet, StyleSheetManager } from "styled-components";
-
-function StyledComponentsRegistry({ children }: { children: React.ReactNode }) {
-  // Only create stylesheet once with lazy initial state
-  // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
-  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet());
-
-  useServerInsertedHTML(() => {
-    const styles = styledComponentsStyleSheet.getStyleElement();
-    styledComponentsStyleSheet.instance.clearTag();
-    return <>{styles}</>;
-  });
-
-  if (typeof window !== "undefined") return <>{children}</>;
-
-  return (
-    <StyleSheetManager
-      sheet={styledComponentsStyleSheet.instance}
-      enableVendorPrefixes
-    >
-      {children}
-    </StyleSheetManager>
-  );
-}
-
-export { StyledComponentsRegistry };

package/src/lib/styled-components/theme-provider.tsx

@@ -1,50 +0,0 @@
-"use client";
-import React, { createContext, useEffect, useState } from "react";
-import { ThemeProvider as StyledThemeProvider } from "styled-components";
-import { GlobalStyles, Theme } from "../utils";
-
-interface ThemeContextProps {
-  setTheme: any;
-}
-
-export const ThemeContext = createContext<ThemeContextProps>({
-  setTheme: null,
-});
-
-function CherryThemeProvider({
-  children,
-  theme,
-  themeDark,
-}: {
-  children: React.ReactNode;
-  theme: Theme;
-  themeDark?: Theme;
-}) {
-  const [currentTheme, setTheme] = useState(theme);
-  useEffect(() => {
-    if (!themeDark) return setTheme(theme);
-    if (
-      localStorage.theme === "dark" ||
-      (!("theme" in localStorage) &&
-        window.matchMedia("(prefers-color-scheme: dark)").matches)
-    ) {
-      document.documentElement.classList.add("dark");
-      setTheme(themeDark);
-    } else {
-      document.documentElement.classList.remove("dark");
-      setTheme(theme);
-    }
-  }, []);
-  const GlobalStylesComponent = GlobalStyles(currentTheme);
-
-  return (
-    <StyledThemeProvider theme={currentTheme}>
-      <ThemeContext.Provider value={{ setTheme }}>
-        <GlobalStylesComponent />
-        {children}
-      </ThemeContext.Provider>
-    </StyledThemeProvider>
-  );
-}
-
-export { CherryThemeProvider };

package/src/lib/textarea.tsx

@@ -1,118 +0,0 @@
-"use client";
-import React, { forwardRef } from "react";
-import styled from "styled-components";
-import {
-  Theme,
-  fullWidthStyles,
-  resetButton,
-  resetInput,
-  statusBorderStyles,
-} from "./utils";
-import { StyledInputWrapper, StyledLabel } from "./input";
-
-interface TextareaProps extends Omit<
-  React.InputHTMLAttributes<HTMLTextAreaElement>,
-  "size"
-> {
-  children?: React.ReactNode;
-  $wrapperClassName?: string;
-  $label?: string;
-  $size?: "default" | "big" | "small";
-  $error?: boolean;
-  $success?: boolean;
-  $fullWidth?: boolean;
-  theme?: Theme;
-  rows?: number;
-}
-
-const StyledTextarea = styled.textarea<TextareaProps>`
-  ${resetButton};
-  ${resetInput};
-  font-family: inherit;
-  display: inline-block;
-  padding: 15px;
-  border-radius: ${({ theme }) => theme.spacing.radius.xs};
-  font-weight: 400;
-  white-space: break-spaces;
-  hyphens: none;
-  color: ${({ theme }) => theme.colors.dark};
-  background: ${({ theme }) => theme.colors.light};
-  border: solid 2px ${({ theme }) => theme.colors.grayLight};
-  box-shadow: 0 0 0 0px ${({ theme }) => theme.colors.primaryLight};
-  transition: all 0.3s ease;
-  min-height: 80px;
-
-  &::placeholder {
-    color: ${({ theme }) => theme.colors.gray};
-  }
-
-  &:hover:not([disabled]) {
-    border-color: ${({ theme }) => theme.colors.primary};
-  }
-
-  &:focus:not([disabled]) {
-    box-shadow: 0 0 0 4px ${({ theme }) => theme.colors.primaryLight};
-    border-color: ${({ theme }) => theme.colors.primary};
-  }
-
-  &:active:not([disabled]) {
-    box-shadow: 0 0 0 2px ${({ theme }) => theme.colors.primaryLight};
-  }
-
-  ${({ $size, theme }) =>
-    $size === "big"
-      ? `font-size: ${theme.fontSizes.inputBig.lg};
-			line-height: ${theme.lineHeights.text.lg};
-	`
-      : $size === "small"
-        ? `font-size: ${theme.fontSizes.inputSmall.lg};
-			line-height: ${theme.lineHeights.text.lg};
-      padding: 10px 12px;
-	`
-        : `font-size: ${theme.fontSizes.input.lg};
-			line-height: ${theme.lineHeights.text.lg};`}
-
-  ${({ $error, $success, theme }) => {
-    return statusBorderStyles(
-      $error ? true : false,
-      $success ? true : false,
-      theme,
-    );
-  }}
-
-	${({ disabled, theme }) =>
-    disabled &&
-    `cursor: not-allowed;
-		background: ${theme.colors.grayLight};
-		border-color: ${theme.colors.gray};
-		color: ${theme.colors.gray};
-	`}
-
-	${({ $fullWidth }) => fullWidthStyles($fullWidth ? true : false)}
-`;
-
-function LocalTextarea(
-  { ...props }: TextareaProps,
-  ref: React.Ref<HTMLTextAreaElement>,
-) {
-  return (
-    <StyledInputWrapper
-      $fullWidth={props.$fullWidth}
-      $label={props.$label}
-      className={props.$wrapperClassName}
-    >
-      {props.$label && (
-        <StyledLabel htmlFor={props.id} $label={props.$label}>
-          {props.$label}
-        </StyledLabel>
-      )}
-      <StyledTextarea {...props} ref={ref}>
-        {props.children}
-      </StyledTextarea>
-    </StyledInputWrapper>
-  );
-}
-
-const Textarea = forwardRef(LocalTextarea);
-
-export { Textarea };

package/src/lib/utils/icons.tsx

@@ -1,84 +0,0 @@
-"use client";
-import React from "react";
-import { useTheme } from "styled-components";
-import { Theme } from "./theme";
-
-interface IconProps extends React.SVGProps<SVGSVGElement> {
-  theme?: Theme;
-}
-
-function IconCheck({ ...props }: IconProps) {
-  const theme: Theme = useTheme() as Theme;
-  return (
-    <svg
-      width="12"
-      height="10"
-      viewBox="0 0 12 10"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        d="M10 2L4.4 8L2 5.75"
-        stroke={theme.colors.primary}
-        strokeWidth="3"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
-
-function IconArrow({ ...props }: IconProps) {
-  const theme: Theme = useTheme() as Theme;
-  return (
-    <svg
-      width="16"
-      height="10"
-      viewBox="0 0 16 10"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        d="M2 2L8 8L14 2"
-        stroke={theme.colors.primary}
-        strokeWidth="3"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
-
-function IconCalendar({ ...props }: IconProps) {
-  const theme: Theme = useTheme() as Theme;
-
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke={theme.colors.primary}
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
-      <path d="M8 2v4" />
-      <path d="M16 2v4" />
-      <rect width="18" height="18" x="3" y="4" rx="2" />
-      <path d="M3 10h18" />
-      <path d="M8 14h.01" />
-      <path d="M12 14h.01" />
-      <path d="M16 14h.01" />
-      <path d="M8 18h.01" />
-      <path d="M12 18h.01" />
-      <path d="M16 18h.01" />
-    </svg>
-  );
-}
-
-export { IconCheck, IconArrow, IconCalendar };

package/src/lib/utils/index.ts

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