cherry-styled-components 0.1.0-9 → 0.1.1

package/src/App.tsx

@@ -1,93 +1,80 @@
-import {
-	Button,
-	Col,
-	Flex,
-	Grid,
-	Input,
-	MaxWidth,
-	Range,
-	Select,
-	Space,
-	Textarea,
-	Toggle,
-} from "./lib";
-
-function App() {
-	return (
-		<>
-			<Space $size={100} />
-			<MaxWidth $xs={845}>
-				<Grid $xsCols={1} $lgCols={3} $gap={20}>
-					<Col $xsSpan={1} $lgSpan={2}>
-						<Grid $xsCols={1} $lgCols={2} $gap={20}>
-							<Input placeholder="Placeholder" $fullWidth />
-							<Select $fullWidth>
-								<option>Select</option>
-							</Select>
-							<Col $lgSpan={2}>
-								<Flex
-									$xsGap={10}
-									$lgGap={20}
-									$wrap="nowrap"
-									$justifyContent="space-between"
-								>
-									<Input type="checkbox" id="checkbox-1" />
-									<Input
-										type="checkbox"
-										id="checkbox-2"
-										defaultChecked
-									/>
-									<Input
-										type="radio"
-										id="radio-2"
-										name="demo-radio"
-									/>
-									<Input
-										type="radio"
-										id="radio-3"
-										name="demo-radio"
-										defaultChecked
-									/>
-									<Range />
-									<Toggle />
-									<Toggle defaultChecked />
-								</Flex>
-							</Col>
-						</Grid>
-					</Col>
-					<Textarea $fullWidth defaultValue="Textarea" />
-				</Grid>
-				<Space $size={20} />
-				<Grid $xsCols={1} $lgCols={2} $gap={20}>
-					<Col>
-						<Flex $wrap="nowrap" $gap={20}>
-							<Button $fullWidth>Button</Button>
-							<Button $variant="secondary" $fullWidth>
-								Button
-							</Button>
-							<Button $variant="tertiary" $fullWidth>
-								Button
-							</Button>
-						</Flex>
-					</Col>
-					<Col>
-						<Flex $wrap="nowrap" $gap={20}>
-							<Button $outline $fullWidth>
-								Button
-							</Button>
-							<Button $variant="secondary" $outline $fullWidth>
-								Button
-							</Button>
-							<Button $variant="tertiary" $outline $fullWidth>
-								Button
-							</Button>
-						</Flex>
-					</Col>
-				</Grid>
-			</MaxWidth>
-			<Space $size={100} />
-		</>
-	);
-}
-
-export default App;
+import {
+  Container,
+  Button,
+  Col,
+  Flex,
+  Grid,
+  Input,
+  MaxWidth,
+  Range,
+  Select,
+  Space,
+  Textarea,
+  Toggle,
+} from "./lib";
+import { ToggleTheme } from "./toggle-theme";
+
+function App() {
+  return (
+    <Container>
+      <Space $size={100} />
+      <MaxWidth $xs={845}>
+        <ToggleTheme />
+        <hr />
+        <Input $fullWidth $label="Input" id="data-1" type="date" />
+        <Grid $xsCols={1} $lgCols={3} $gap={20}>
+          <Col $xsSpan={1} $lgSpan={2}>
+            <Grid $xsCols={1} $lgCols={2} $gap={20}>
+              <Input placeholder="Placeholder" $fullWidth $label="Input" id="input-1" />
+              <Select $fullWidth $label="Select" id="select-1">
+                <option>Select</option>
+              </Select>
+              <Col $lgSpan={2}>
+                <Flex $xsGap={10} $lgGap={20} $wrap="nowrap" $justifyContent="space-between">
+                  <Input type="checkbox" id="checkbox-1" />
+                  <Input type="checkbox" id="checkbox-2" defaultChecked />
+                  <Input type="radio" id="radio-2" name="demo-radio" />
+                  <Input type="radio" id="radio-3" name="demo-radio" defaultChecked />
+                  <Range />
+                  <Toggle />
+                  <Toggle defaultChecked />
+                </Flex>
+              </Col>
+            </Grid>
+          </Col>
+          <Textarea $label="Textarea" $fullWidth defaultValue="Textarea" id="textarea-1" />
+        </Grid>
+        <Space $size={20} />
+        <Grid $xsCols={1} $lgCols={2} $gap={20}>
+          <Col>
+            <Flex $wrap="nowrap" $gap={20}>
+              <Button $fullWidth>Button</Button>
+              <Button $variant="secondary" $fullWidth>
+                Button
+              </Button>
+              <Button $variant="tertiary" $fullWidth>
+                Button
+              </Button>
+            </Flex>
+          </Col>
+          <Col>
+            <Flex $wrap="nowrap" $gap={20}>
+              <Button $outline $fullWidth>
+                Button
+              </Button>
+              <Button $variant="secondary" $outline $fullWidth>
+                Button
+              </Button>
+              <Button $variant="tertiary" $outline $fullWidth>
+                Button
+              </Button>
+            </Flex>
+          </Col>
+        </Grid>
+      </MaxWidth>
+      <Space $size={100} />
+    </Container>
+  );
+}
+
+export default App;

package/src/lib/box.tsx

@@ -1,21 +1,26 @@
-"use client";
-import React from "react";
-import styled from "styled-components";
-import { Container, ContainerProps } from "./container";
-import { theme as defaultTheme } from "./utils";
-
-const StylesBox = styled(Container)<ContainerProps>`
-	background: ${({ theme }) => theme.colors.light};
-	border-radius: ${({ theme }) => theme.spacing.radius.lg};
-	border: solid 1px ${({ theme }) => theme.colors.grayLight};
-`;
-
-function Box({ theme = defaultTheme, ...props }: ContainerProps) {
-	return (
-		<StylesBox {...props} theme={theme}>
-			{props.children}
-		</StylesBox>
-	);
-}
-
-export { Box };
+"use client";
+import React, { forwardRef } from "react";
+import styled from "styled-components";
+import { Container, ContainerProps } from "./container";
+import { theme as defaultTheme } from "./utils";
+
+const StyledBox = styled(Container)<ContainerProps>`
+  background: ${({ theme }) => theme.colors.light};
+  border-radius: ${({ theme }) => theme.spacing.radius.lg};
+  border: solid 1px ${({ theme }) => theme.colors.grayLight};
+`;
+
+function LocalBox(
+  { theme = defaultTheme, ...props }: ContainerProps,
+  ref: React.Ref<HTMLDivElement>,
+) {
+  return (
+    <StyledBox {...props} theme={theme} ref={ref}>
+      {props.children}
+    </StyledBox>
+  );
+}
+
+const Box = forwardRef(LocalBox);
+
+export { Box };

package/src/lib/button.tsx

@@ -1,159 +1,162 @@
-"use client";
-import React from "react";
-import styled, { css } from "styled-components";
-import {
-	theme as defaultTheme,
-	Theme,
-	formElementHeightStyles,
-	resetButton,
-} from "./utils";
-
-export interface ButtonProps
-	extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-	children?: React.ReactNode;
-	$variant?: "primary" | "secondary" | "tertiary";
-	$size?: "default" | "big";
-	$outline?: boolean;
-	$fullWidth?: boolean;
-	theme?: Theme;
-}
-
-export const buttonStyles = (
-	theme: Theme,
-	$variant?: "primary" | "secondary" | "tertiary",
-	$size?: "default" | "big",
-	$outline?: boolean,
-	$fullWidth?: boolean,
-	disabled?: boolean,
-) => css`
-	${resetButton};
-	font-family: inherit;
-	display: inline-block;
-	padding: 15px 30px;
-	border-radius: 100px;
-	font-weight: 600;
-	white-space: nowrap;
-	hyphens: auto;
-	color: ${theme.colors.light};
-	text-decoration: none;
-	transition: all 0.3s ease;
-
-	${!disabled &&
-	$variant === "primary" &&
-	css`
-		color: ${$outline ? theme.colors.primary : theme.colors.light};
-		background: ${$outline ? "transparent" : theme.colors.primary};
-		border: solid 2px ${theme.colors.primary};
-		box-shadow: 0 0 0 0px ${theme.colors.primary};
-
-		@media (hover: hover) {
-			&:hover {
-				background: ${$outline
-					? "transparent"
-					: theme.colors.primaryDark};
-				border-color: ${theme.colors.primaryDark};
-				${$outline && `color: ${theme.colors.primaryDark}`};
-			}
-		}
-
-		&:focus {
-			box-shadow: 0 0 0 4px ${theme.colors.primaryLight};
-		}
-
-		&:active {
-			box-shadow: 0 0 0 2px ${theme.colors.primaryLight};
-		}
-	`}
-
-	${!disabled &&
-	$variant === "secondary" &&
-	css`
-		color: ${$outline ? theme.colors.secondary : theme.colors.light};
-		background: ${$outline ? "transparent" : theme.colors.secondary};
-		border: solid 2px ${theme.colors.secondary};
-		box-shadow: 0 0 0 0px ${theme.colors.secondary};
-
-		@media (hover: hover) {
-			&:hover {
-				background: ${$outline
-					? "transparent"
-					: theme.colors.secondaryDark};
-				border-color: ${theme.colors.secondaryDark};
-				${$outline && `color: ${theme.colors.secondaryDark}`};
-			}
-		}
-
-		&:focus {
-			box-shadow: 0 0 0 4px ${theme.colors.secondaryLight};
-		}
-
-		&:active {
-			box-shadow: 0 0 0 2px ${theme.colors.secondaryLight};
-		}
-	`}
-
-	${!disabled &&
-	$variant === "tertiary" &&
-	css`
-		color: ${$outline ? theme.colors.tertiary : theme.colors.light};
-		background: ${$outline ? "transparent" : theme.colors.tertiary};
-		border: solid 2px ${theme.colors.tertiary};
-		box-shadow: 0 0 0 0px ${theme.colors.tertiary};
-
-		@media (hover: hover) {
-			&:hover {
-				background: ${$outline
-					? "transparent"
-					: theme.colors.tertiaryDark};
-				border-color: ${theme.colors.tertiaryDark};
-				${$outline && `color: ${theme.colors.tertiaryDark}`};
-			}
-		}
-
-		&:focus {
-			box-shadow: 0 0 0 4px ${theme.colors.tertiaryLight};
-		}
-
-		&:active {
-			box-shadow: 0 0 0 2px ${theme.colors.tertiaryLight};
-		}
-	`}
-
-	${formElementHeightStyles($size)}
-
-	${$size === "big"
-		? `font-size: ${theme.fontSizes.buttonBig.lg};
-			line-height: ${theme.lineHeights.buttonBig.lg};
-	`
-		: `font-size: ${theme.fontSizes.button.lg};
-			line-height: ${theme.lineHeights.button.lg};`}
-
-	${disabled &&
-	`
-		cursor: not-allowed;
-		background: ${theme.colors.grayLight};
-		border-color: ${theme.colors.grayLight};
-		color: ${theme.colors.gray};
-	`}
-
-	${$fullWidth && `width: 100%;`}
-`;
-
-const StyledButton = styled.button<ButtonProps>`
-	${({ theme, $variant, $size, $outline, $fullWidth, disabled }) =>
-		buttonStyles(theme, $variant, $size, $outline, $fullWidth, disabled)}
-`;
-
-function Button({
-	theme = defaultTheme,
-	$variant = "primary",
-	...props
-}: ButtonProps) {
-	return (
-		<StyledButton $variant={$variant} {...props} theme={theme}>
-			{props.children}
-		</StyledButton>
-	);
-}
-
-export { Button };
+"use client";
+import React, { forwardRef } from "react";
+import styled, { css } from "styled-components";
+import { Theme, formElementHeightStyles, resetButton } 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 const buttonStyles = (
+  theme: Theme,
+  $variant?: "primary" | "secondary" | "tertiary",
+  $size?: "default" | "big",
+  $outline?: boolean,
+  $fullWidth?: boolean,
+  disabled?: boolean,
+) => css`
+  ${resetButton};
+  font-family: inherit;
+  display: inline-flex;
+  padding: 15px 30px;
+  border-radius: 100px;
+  font-weight: 600;
+  white-space: nowrap;
+  hyphens: auto;
+  color: ${theme.isDark ? theme.colors.dark : theme.colors.light};
+  text-decoration: none;
+  transition: all 0.3s ease;
+  text-align: center;
+  gap: 10px;
+  text-overflow: ellipsis;
+  justify-content: center;
+
+  & .icon,
+  & .lucide {
+    margin: auto 0;
+  }
+
+  ${!disabled &&
+  $variant === "primary" &&
+  css`
+    color: ${$outline ? theme.colors.primary : theme.colors.light};
+    background: ${$outline ? "transparent" : theme.colors.primary};
+    border: solid 2px ${theme.colors.primary};
+    box-shadow: 0 0 0 0px ${theme.colors.primary};
+
+    @media (hover: hover) {
+      &:hover {
+        background: ${$outline ? "transparent" : theme.colors.primaryDark};
+        border-color: ${theme.colors.primaryDark};
+        ${$outline && `color: ${theme.colors.primaryDark}`};
+      }
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 4px ${theme.colors.primaryLight};
+    }
+
+    &:active {
+      box-shadow: 0 0 0 2px ${theme.colors.primaryLight};
+    }
+  `}
+
+  ${!disabled &&
+  $variant === "secondary" &&
+  css`
+    color: ${$outline ? theme.colors.secondary : theme.colors.light};
+    background: ${$outline ? "transparent" : theme.colors.secondary};
+    border: solid 2px ${theme.colors.secondary};
+    box-shadow: 0 0 0 0px ${theme.colors.secondary};
+
+    @media (hover: hover) {
+      &:hover {
+        background: ${$outline ? "transparent" : theme.colors.secondaryDark};
+        border-color: ${theme.colors.secondaryDark};
+        ${$outline && `color: ${theme.colors.secondaryDark}`};
+      }
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 4px ${theme.colors.secondaryLight};
+    }
+
+    &:active {
+      box-shadow: 0 0 0 2px ${theme.colors.secondaryLight};
+    }
+  `}
+
+	${!disabled &&
+  $variant === "tertiary" &&
+  css`
+    color: ${$outline ? theme.colors.tertiary : theme.colors.light};
+    background: ${$outline ? "transparent" : theme.colors.tertiary};
+    border: solid 2px ${theme.colors.tertiary};
+    box-shadow: 0 0 0 0px ${theme.colors.tertiary};
+
+    @media (hover: hover) {
+      &:hover {
+        background: ${$outline ? "transparent" : theme.colors.tertiaryDark};
+        border-color: ${theme.colors.tertiaryDark};
+        ${$outline && `color: ${theme.colors.tertiaryDark}`};
+      }
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 4px ${theme.colors.tertiaryLight};
+    }
+
+    &:active {
+      box-shadow: 0 0 0 2px ${theme.colors.tertiaryLight};
+    }
+  `}
+
+	${formElementHeightStyles($size)}
+
+	${$size === "big"
+    ? `font-size: ${theme.fontSizes.buttonBig.lg};
+			line-height: ${theme.lineHeights.buttonBig.lg};
+      padding: 18px 30px;
+	`
+    : `font-size: ${theme.fontSizes.button.lg};
+			line-height: ${theme.lineHeights.button.lg};`}
+
+	${disabled &&
+  `
+		cursor: not-allowed;
+		background: ${theme.colors.grayLight};
+    border: solid 2px ${theme.colors.grayLight};
+		color: ${theme.colors.gray};
+	`}
+
+	${$fullWidth && `width: 100%;`}
+`;
+
+const StyledButton = styled.button<ButtonProps>`
+  ${({ theme, $variant, $size, $outline, $fullWidth, disabled }) =>
+    buttonStyles(theme, $variant, $size, $outline, $fullWidth, disabled)}
+`;
+
+function LocalButton(
+  { $variant = "primary", ...props }: ButtonProps,
+  ref: React.Ref<HTMLButtonElement>,
+) {
+  return (
+    <StyledButton $variant={$variant} {...props} ref={ref}>
+      {props.$iconPosition !== "right" && props.$icon && props.$icon}
+      {props.children}
+      {props.$iconPosition === "right" && props.$icon && props.$icon}
+    </StyledButton>
+  );
+}
+
+const Button = forwardRef(LocalButton);
+
+export { Button };

package/src/lib/col.tsx

@@ -1,43 +1,45 @@
-"use client";
-import React from "react";
-import styled from "styled-components";
-import { theme as defaultTheme, Theme, generateColSpanStyles } 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;
-}
-
-const StyledCol = styled.div<ColProps>`
-	${({ $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 Col({ theme = defaultTheme, ...props }: ColProps) {
-	return (
-		<StyledCol {...props} theme={theme}>
-			{props.children}
-		</StyledCol>
-	);
-}
-
-export { Col };
+"use client";
+import React, { forwardRef } from "react";
+import styled from "styled-components";
+import { theme as defaultTheme, Theme, generateColSpanStyles } 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;
+}
+
+const StyledCol = styled.div<ColProps>`
+  ${({ $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({ theme = defaultTheme, ...props }: ColProps, ref: React.Ref<HTMLDivElement>) {
+  return (
+    <StyledCol {...props} theme={theme} ref={ref}>
+      {props.children}
+    </StyledCol>
+  );
+}
+
+const Col = forwardRef(LocalCol);
+
+export { Col };