cherry-styled-components 0.1.10 → 0.1.12

package/README.md

@@ -1,5 +1,7 @@
 # Cherry React Library
 
+[![npm version](https://img.shields.io/npm/v/cherry-styled-components.svg?style=flat)](https://www.npmjs.com/package/cherry-styled-components)
+
 ## Introduction
 
 Cherry Design System is a versatile foundation for projects. It offers a white label base, ready-to-use Figma designs, open-source React components, built-in support for theming and dark mode. Explore the [docs](https://cherry.al/) to create delightful user interfaces.

package/dist/box.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import styled from "styled-components";
+import { Container } from "./container.js";
+const StyledBox = styled(Container)`
+  background: ${({ theme }) => theme.colors.light};
+  border-radius: ${({ theme }) => theme.spacing.radius.lg};
+  border: solid 1px ${({ theme }) => theme.colors.grayLight};
+`;
+function LocalBox({ ...props }, ref) {
+  return /* @__PURE__ */ jsx(StyledBox, { ...props, ref, children: props.children });
+}
+const Box = forwardRef(LocalBox);
+export {
+  Box
+};

package/{src/lib/button.tsx → dist/button.js}

@@ -1,31 +1,10 @@
 "use client";
-import React, { forwardRef } from "react";
+import { jsxs } from "react/jsx-runtime";
+import { 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> {
-  children?: React.ReactNode;
-  $variant?: "primary" | "secondary" | "tertiary";
-  $size?: "default" | "big" | "small";
-  $outline?: boolean;
-  $fullWidth?: boolean;
-  $icon?: React.ReactNode;
-  $iconPosition?: "left" | "right";
-  $isError?: boolean;
-  theme?: Theme;
-}
-
-export const buttonStyles = (
-  theme: Theme,
-  $variant?: "primary" | "secondary" | "tertiary",
-  $size?: "default" | "big" | "small",
-  $outline?: boolean,
-  $fullWidth?: boolean,
-  $isError?: boolean,
-  disabled?: boolean,
-) => css`
+import { darken, lighten } from "polished";
+import { resetButton, formElementHeightStyles } from "./utils/mixins.js";
+const buttonStyles = (theme, $variant, $size, $outline, $fullWidth, $error, disabled) => css`
   ${resetButton};
   font-family: inherit;
   display: inline-flex;
@@ -49,14 +28,8 @@ export const buttonStyles = (
     margin: auto 0;
   }
 
-  ${!disabled &&
-  $variant === "primary" &&
-  css`
-    color: ${$outline
-      ? theme.colors.primary
-      : theme.isDark
-        ? theme.colors.dark
-        : theme.colors.light};
+  ${!disabled && $variant === "primary" && css`
+    color: ${$outline ? theme.colors.primary : theme.isDark ? theme.colors.dark : theme.colors.light};
     background: ${$outline ? "transparent" : theme.colors.primary};
     border: solid 2px ${theme.colors.primary};
     box-shadow: 0 0 0 0px ${theme.colors.primary};
@@ -76,14 +49,8 @@ export const buttonStyles = (
     }
   `}
 
-  ${!disabled &&
-  $variant === "secondary" &&
-  css`
-    color: ${$outline
-      ? theme.colors.secondary
-      : theme.isDark
-        ? theme.colors.dark
-        : theme.colors.light};
+  ${!disabled && $variant === "secondary" && css`
+    color: ${$outline ? theme.colors.secondary : theme.isDark ? theme.colors.dark : theme.colors.light};
     background: ${$outline ? "transparent" : theme.colors.secondary};
     border: solid 2px ${theme.colors.secondary};
     box-shadow: 0 0 0 0px ${theme.colors.secondary};
@@ -103,14 +70,8 @@ export const buttonStyles = (
     }
   `}
 
-	${!disabled &&
-  $variant === "tertiary" &&
-  css`
-    color: ${$outline
-      ? theme.colors.tertiary
-      : theme.isDark
-        ? theme.colors.dark
-        : theme.colors.light};
+	${!disabled && $variant === "tertiary" && css`
+    color: ${$outline ? theme.colors.tertiary : theme.isDark ? theme.colors.dark : theme.colors.light};
     background: ${$outline ? "transparent" : theme.colors.tertiary};
     border: solid 2px ${theme.colors.tertiary};
     box-shadow: 0 0 0 0px ${theme.colors.tertiary};
@@ -130,10 +91,8 @@ export const buttonStyles = (
     }
   `}
 
-  ${!disabled &&
-  $isError &&
-  css`
-    color: ${$outline ? theme.colors.error : theme.colors.light};
+  ${!disabled && $error && css`
+    color: ${$outline ? theme.colors.error : theme.isDark ? theme.colors.dark : theme.colors.light};
     background: ${$outline ? "transparent" : theme.colors.error};
     border: solid 2px ${theme.colors.error};
     box-shadow: 0 0 0 0px ${theme.colors.error};
@@ -156,21 +115,16 @@ export const buttonStyles = (
 
 	${formElementHeightStyles($size)}
 
-	${$size === "big"
-    ? `font-size: ${theme.fontSizes.buttonBig.lg};
+	${$size === "big" ? `font-size: ${theme.fontSizes.buttonBig.lg};
 			line-height: ${theme.lineHeights.buttonBig.lg};
       padding: 18px 30px;
-	`
-    : $size === "small"
-      ? `font-size: ${theme.fontSizes.buttonSmall.lg};
+	` : $size === "small" ? `font-size: ${theme.fontSizes.buttonSmall.lg};
 			line-height: ${theme.lineHeights.buttonSmall.lg};
       padding: 10px 20px;
-	`
-      : `font-size: ${theme.fontSizes.button.lg};
+	` : `font-size: ${theme.fontSizes.button.lg};
 			line-height: ${theme.lineHeights.button.lg};`}
 
-	${disabled &&
-  `
+	${disabled && `
 		cursor: not-allowed;
 		background: ${theme.colors.grayLight};
     border: solid 2px ${theme.colors.grayLight};
@@ -179,38 +133,35 @@ export const buttonStyles = (
 
 	${$fullWidth && `width: 100%;`}
 `;
-
-const StyledButton = styled.button<ButtonProps>`
-  ${({ theme, $variant, $isError, $size, $outline, $fullWidth, disabled }) =>
-    buttonStyles(
-      theme,
-      $variant,
-      $size,
-      $outline,
-      $fullWidth,
-      $isError,
-      disabled,
-    )}
+const StyledButton = styled.button`
+  ${({ theme, $variant, $error, $size, $outline, $fullWidth, disabled }) => buttonStyles(
+  theme,
+  $variant,
+  $size,
+  $outline,
+  $fullWidth,
+  $error,
+  disabled
+)}
 `;
-
-function LocalButton(
-  { $variant = "primary", ...props }: ButtonProps,
-  ref: React.Ref<HTMLButtonElement>,
-) {
-  return (
-    <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}
-    </StyledButton>
+function LocalButton({ $variant = "primary", ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    StyledButton,
+    {
+      $variant,
+      $error: props.$error,
+      ...props,
+      ref,
+      children: [
+        props.$iconPosition !== "right" && props.$icon && props.$icon,
+        props.children,
+        props.$iconPosition === "right" && props.$icon && props.$icon
+      ]
+    }
   );
 }
-
 const Button = forwardRef(LocalButton);
-
-export { Button };
+export {
+  Button,
+  buttonStyles
+};

package/dist/col.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import styled from "styled-components";
+import { generateColSpanStyles } from "./utils/mixins.js";
+const StyledCol = styled.div`
+  ${({ $span }) => $span && `
+		grid-column: span ${$span};
+	`}
+
+  ${({ $xsSpan }) => $xsSpan && generateColSpanStyles("xs", $xsSpan)}
+	${({ $smSpan }) => $smSpan && generateColSpanStyles("sm", $smSpan)}
+	${({ $mdSpan }) => $mdSpan && generateColSpanStyles("md", $mdSpan)}
+	${({ $lgSpan }) => $lgSpan && generateColSpanStyles("lg", $lgSpan)}
+	${({ $xlSpan }) => $xlSpan && generateColSpanStyles("xl", $xlSpan)}
+	${({ $xxlSpan }) => $xxlSpan && generateColSpanStyles("xxl", $xxlSpan)}
+	${({ $xxxlSpan }) => $xxxlSpan && generateColSpanStyles("xxxl", $xxxlSpan)}
+`;
+function LocalCol({ ...props }, ref) {
+  return /* @__PURE__ */ jsx(StyledCol, { ...props, ref, children: props.children });
+}
+const Col = forwardRef(LocalCol);
+export {
+  Col
+};

package/dist/container.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import styled from "styled-components";
+import { mq } from "./utils/theme.js";
+import { generatePaddingStyles } from "./utils/mixins.js";
+const StyledContainer = styled.div`
+  margin: auto;
+  width: 100%;
+  max-width: ${({ theme, $fluid }) => $fluid ? `100%` : theme.spacing.maxWidth.xs};
+  ${({ $textAlign }) => $textAlign && `text-align: ${$textAlign}`};
+  padding: ${({ $padding, theme }) => $padding && `${$padding}px` || theme.spacing.padding.xs};
+
+  ${mq("lg")} {
+    padding: ${({ $padding, theme }) => $padding && `${$padding}px` || theme.spacing.padding.lg};
+  }
+
+  ${mq("xxxl")} {
+    max-width: ${({ theme, $fluid }) => $fluid ? `100%` : theme.spacing.maxWidth.xxxl};
+  }
+
+  ${({ $xsPadding }) => $xsPadding && generatePaddingStyles("xs", $xsPadding)}
+  ${({ $smPadding }) => $smPadding && generatePaddingStyles("sm", $smPadding)}
+	${({ $mdPadding }) => $mdPadding && generatePaddingStyles("md", $mdPadding)}
+	${({ $lgPadding }) => $lgPadding && generatePaddingStyles("lg", $lgPadding)}
+	${({ $xlPadding }) => $xlPadding && generatePaddingStyles("xl", $xlPadding)}
+	${({ $xxlPadding }) => $xxlPadding && generatePaddingStyles("xxl", $xxlPadding)}
+	${({ $xxxlPadding }) => $xxxlPadding && generatePaddingStyles("xxxl", $xxxlPadding)}
+`;
+function LocalContainer({ ...props }, ref) {
+  return /* @__PURE__ */ jsx(StyledContainer, { ...props, ref, children: props.children });
+}
+const Container = forwardRef(LocalContainer);
+export {
+  Container
+};

package/dist/flex.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import styled from "styled-components";
+import { generateGapStyles, generateJustifyContentStyles, fullWidthStyles } from "./utils/mixins.js";
+import { mq } from "./utils/theme.js";
+const StyledFlex = styled.div`
+  display: flex;
+  justify-content: ${({ $justifyContent }) => $justifyContent || "flex-start"};
+  flex-wrap: ${({ $wrap }) => $wrap || "wrap"};
+  gap: ${({ $gap, theme }) => $gap !== void 0 && $gap !== "none" ? `${$gap}px` : theme.spacing.gridGap.xs};
+  flex-direction: ${({ $direction }) => $direction || "row"};
+
+  ${mq("lg")} {
+    gap: ${({ $gap, theme }) => $gap !== void 0 && $gap !== "none" ? `${$gap}px` : theme.spacing.gridGap.lg};
+  }
+
+  ${({ $xsGap }) => $xsGap !== void 0 && generateGapStyles("xs", $xsGap)}
+  ${({ $xsJustifyContent }) => $xsJustifyContent && generateJustifyContentStyles("xs", $xsJustifyContent)}
+	${({ $smGap }) => $smGap !== void 0 && generateGapStyles("sm", $smGap)}
+	${({ $smJustifyContent }) => $smJustifyContent && generateJustifyContentStyles("sm", $smJustifyContent)}
+	${({ $mdGap }) => $mdGap !== void 0 && generateGapStyles("md", $mdGap)}
+	${({ $mdJustifyContent }) => $mdJustifyContent && generateJustifyContentStyles("md", $mdJustifyContent)}
+	${({ $lgGap }) => $lgGap !== void 0 && generateGapStyles("lg", $lgGap)}
+	${({ $lgJustifyContent }) => $lgJustifyContent && generateJustifyContentStyles("lg", $lgJustifyContent)}
+	${({ $xlGap }) => $xlGap !== void 0 && generateGapStyles("xl", $xlGap)}
+	${({ $xlJustifyContent }) => $xlJustifyContent && generateJustifyContentStyles("xl", $xlJustifyContent)}
+	${({ $xxlGap }) => $xxlGap !== void 0 && generateGapStyles("xxl", $xxlGap)}
+	${({ $xxlJustifyContent }) => $xxlJustifyContent && generateJustifyContentStyles("xxl", $xxlJustifyContent)}
+	${({ $xxxlGap }) => $xxxlGap !== void 0 && generateGapStyles("xxxl", $xxxlGap)}
+	${({ $xxxlJustifyContent }) => $xxxlJustifyContent && generateJustifyContentStyles("xxxl", $xxxlJustifyContent)}
+  ${({ $fullWidth }) => fullWidthStyles($fullWidth)}
+`;
+function LocalFlex({ ...props }, ref) {
+  return /* @__PURE__ */ jsx(StyledFlex, { ...props, ref, children: props.children });
+}
+const Flex = forwardRef(LocalFlex);
+export {
+  Flex
+};

package/dist/grid.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import styled from "styled-components";
+import { generateGapStyles, generateColsStyles } from "./utils/mixins.js";
+import { mq } from "./utils/theme.js";
+const StyledGrid = styled.div`
+  width: 100%;
+  display: grid;
+  grid-template-columns: ${({ $cols }) => `repeat(${$cols || 3}, minmax(0, 1fr))`};
+  gap: ${({ $gap, theme }) => $gap !== void 0 && $gap !== "none" ? `${$gap}px` : theme.spacing.gridGap.xs};
+
+  ${mq("lg")} {
+    gap: ${({ $gap, theme }) => $gap !== void 0 && $gap !== "none" ? `${$gap}px` : theme.spacing.gridGap.lg};
+  }
+
+  ${({ $xsGap }) => $xsGap !== void 0 && generateGapStyles("xs", $xsGap)}
+  ${({ $smGap }) => $smGap !== void 0 && generateGapStyles("sm", $smGap)}
+	${({ $mdGap }) => $mdGap !== void 0 && generateGapStyles("md", $mdGap)}
+	${({ $lgGap }) => $lgGap !== void 0 && generateGapStyles("lg", $lgGap)}
+	${({ $xlGap }) => $xlGap !== void 0 && generateGapStyles("xl", $xlGap)}
+	${({ $xxlGap }) => $xxlGap !== void 0 && generateGapStyles("xxl", $xxlGap)}
+	${({ $xxxlGap }) => $xxxlGap !== void 0 && generateGapStyles("xxxl", $xxxlGap)}
+
+	${({ $xsCols }) => $xsCols && generateColsStyles("xs", $xsCols)}
+	${({ $smCols }) => $smCols && generateColsStyles("sm", $smCols)}
+	${({ $mdCols }) => $mdCols && generateColsStyles("md", $mdCols)}
+	${({ $lgCols }) => $lgCols && generateColsStyles("lg", $lgCols)}
+	${({ $xlCols }) => $xlCols && generateColsStyles("xl", $xlCols)}
+	${({ $xxlCols }) => $xxlCols && generateColsStyles("xxl", $xxlCols)}
+	${({ $xxxlCols }) => $xxxlCols && generateColsStyles("xxxl", $xxxlCols)}
+`;
+function LocalGrid({ ...props }, ref) {
+  return /* @__PURE__ */ jsx(StyledGrid, { ...props, ref, children: props.children });
+}
+const Grid = forwardRef(LocalGrid);
+export {
+  Grid
+};

package/dist/icon.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import { icons } from "lucide-react";
+const Icon = ({
+  name,
+  color,
+  size,
+  className,
+  "aria-label": ariaLabel
+}) => {
+  const LucideIcon = icons[name];
+  if (!LucideIcon) return null;
+  return /* @__PURE__ */ jsx(
+    LucideIcon,
+    {
+      color,
+      size,
+      className,
+      "aria-label": ariaLabel,
+      "aria-hidden": !ariaLabel,
+      role: ariaLabel ? "img" : void 0
+    }
+  );
+};
+export {
+  Icon
+};

package/dist/index.js

@@ -0,0 +1,89 @@
+import { Box } from "./box.js";
+import { Button, buttonStyles } from "./button.js";
+import { Col } from "./col.js";
+import { Container } from "./container.js";
+import { Flex } from "./flex.js";
+import { Grid } from "./grid.js";
+import { Icon } from "./icon.js";
+import { Input, StyledInputWrapper, StyledLabel } from "./input.js";
+import { MaxWidth } from "./max-width.js";
+import { Range } from "./range.js";
+import { Select, StyledIconWrapper } from "./select.js";
+import { Space } from "./space.js";
+import { Textarea } from "./textarea.js";
+import { Toggle } from "./toggle.js";
+import { CherryThemeProvider, ThemeContext } from "./styled-components/theme-provider.js";
+import { GlobalStyles } from "./utils/global.js";
+import { IconArrow, IconCalendar, IconCheck } from "./utils/icons.js";
+import { StyledComponentsRegistry } from "./styled-components/registry.js";
+import { breakpoints, colors, colorsDark, fontSizes, fonts, lineHeights, mq, shadows, shadowsDark, spacing, theme, themeDark } from "./utils/theme.js";
+import { createTypographyStyle, styledBlockquote, styledButton, styledButtonBig, styledCode, styledH1, styledH2, styledH3, styledH4, styledH5, styledH6, styledHero1, styledHero2, styledHero3, styledInput, styledInputBig, styledSmall, styledStrong, styledText } from "./utils/typography.js";
+import { formElementHeightStyles, fullWidthStyles, generateColSpanStyles, generateColsStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, resetButton, resetInput, statusBorderStyles } from "./utils/mixins.js";
+export {
+  Box,
+  Button,
+  CherryThemeProvider,
+  Col,
+  Container,
+  Flex,
+  GlobalStyles,
+  Grid,
+  Icon,
+  IconArrow,
+  IconCalendar,
+  IconCheck,
+  Input,
+  MaxWidth,
+  Range,
+  Select,
+  Space,
+  StyledComponentsRegistry,
+  StyledIconWrapper,
+  StyledInputWrapper,
+  StyledLabel,
+  Textarea,
+  ThemeContext,
+  Toggle,
+  breakpoints,
+  buttonStyles,
+  colors,
+  colorsDark,
+  createTypographyStyle,
+  fontSizes,
+  fonts,
+  formElementHeightStyles,
+  fullWidthStyles,
+  generateColSpanStyles,
+  generateColsStyles,
+  generateGapStyles,
+  generateJustifyContentStyles,
+  generatePaddingStyles,
+  lineHeights,
+  mq,
+  resetButton,
+  resetInput,
+  shadows,
+  shadowsDark,
+  spacing,
+  statusBorderStyles,
+  styledBlockquote,
+  styledButton,
+  styledButtonBig,
+  styledCode,
+  styledH1,
+  styledH2,
+  styledH3,
+  styledH4,
+  styledH5,
+  styledH6,
+  styledHero1,
+  styledHero2,
+  styledHero3,
+  styledInput,
+  styledInputBig,
+  styledSmall,
+  styledStrong,
+  styledText,
+  theme,
+  themeDark
+};