cherry-styled-components 0.1.0 → 0.1.1

package/src/lib/input.tsx

@@ -0,0 +1,384 @@
+"use client";
+import React, { forwardRef } from "react";
+import styled, { css } from "styled-components";
+import type { IStyledComponent } from "styled-components";
+import {
+  Theme,
+  IconCheck,
+  formElementHeightStyles,
+  fullWidthStyles,
+  resetButton,
+  resetInput,
+  statusBorderStyles,
+  IconCalendar,
+} from "./utils";
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  children?: React.ReactNode;
+  $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 const StyledInputWrapper: IStyledComponent<"web", React.HTMLAttributes<HTMLSpanElement> & Pick<InputProps, "$label" | "$fullWidth" | "type">> = styled.span<Pick<InputProps, "$label" | "$fullWidth" | "type">>`
+  display: inline-flex;
+  flex-wrap: ${({ type }) => (type === "checkbox" || type === "radio" ? "nowrap" : "wrap")};
+  align-items: center;
+
+  ${({ $label }) =>
+    $label &&
+    css`
+      gap: 10px;
+      align-items: flex-start;
+    `}
+
+  & .icon-calendar {
+    position: absolute;
+    top: 50%;
+    right: 17px;
+    left: initial;
+    transform: translateY(-50%);
+    pointer-events: none;
+    width: 24px;
+    height: 24px;
+
+    @supports (-moz-appearance: none) {
+      display: none;
+    }
+  }
+
+  ${({ $fullWidth }) => fullWidthStyles($fullWidth ? true : false)}
+`;
+
+export const StyledLabel: IStyledComponent<"web", LabelProps> = styled.label<LabelProps>`
+  display: inline-block;
+  color: ${({ theme }) => theme.colors.grayDark};
+  font-size: ${({ theme }) => theme.fontSizes.text.lg};
+  line-height: ${({ theme }) => theme.lineHeights.text.lg};
+`;
+
+const StyledInput = styled.input<InputProps>`
+  ${resetButton};
+  ${resetInput};
+  font-family: inherit;
+  display: inline-block;
+  padding: 17px 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;
+  word-break: keep-all;
+  white-space: nowrap;
+  display: inline-flex;
+
+  &[type="date"] {
+    padding: 17px 45px 17px 15px;
+
+    @supports (-moz-appearance: none) {
+      padding: 13px 15px;
+    }
+  }
+
+  &::-webkit-datetime-edit {
+    padding: 0;
+    margin: 0;
+    vertical-align: middle;
+  }
+
+  &::-webkit-datetime-edit-fields-wrapper {
+    padding: 4px 0;
+    margin: 0;
+    vertical-align: middle;
+  }
+
+  &::-webkit-calendar-picker-indicator {
+    background: transparent;
+    cursor: pointer;
+    position: absolute;
+    right: 15px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 24px;
+    height: 24px;
+  }
+
+  &::-webkit-datetime-edit-text {
+    color: ${({ theme }) => theme.colors.gray};
+  }
+
+  &::-webkit-datetime-edit-month-field {
+    &:focus {
+      background: ${({ theme }) => theme.colors.primary};
+      color: ${({ theme }) => theme.colors.light};
+      border-radius: 4px;
+    }
+  }
+
+  &::-webkit-datetime-edit-day-field {
+    &:focus {
+      background: ${({ theme }) => theme.colors.primary};
+      color: ${({ theme }) => theme.colors.light};
+      border-radius: 4px;
+    }
+  }
+
+  &::-webkit-datetime-edit-year-field {
+    &:focus {
+      background: ${({ theme }) => theme.colors.primary};
+      color: ${({ theme }) => theme.colors.light};
+      border-radius: 4px;
+    }
+  }
+
+  &::placeholder {
+    color: ${({ theme }) => theme.colors.gray};
+  }
+
+  @media (hover: hover) {
+    &: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};
+			line-height: ${theme.lineHeights.inputBig.lg};
+	`
+      : `font-size: ${theme.fontSizes.input.lg};
+			line-height: ${theme.lineHeights.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)}
+`;
+
+const StyledIconWrapper = styled.span<InputProps>`
+  display: inline-flex;
+  position: relative;
+  line-height: 0;
+  min-width: fit-content;
+
+  & em {
+    display: block;
+    border-radius: 50%;
+    background: ${({ theme }) => theme.colors.primary};
+  }
+
+  & svg,
+  & em {
+    object-fit: contain;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0.7);
+    opacity: 0;
+    pointer-events: none;
+    transition: all 0.3s ease;
+  }
+`;
+
+const StyledRadioCheckboxInput = styled.input<InputProps>`
+  ${resetButton};
+  display: inline-block;
+  border: solid 2px ${({ theme }) => theme.colors.grayLight};
+  box-shadow: 0 0 0 0px ${({ theme }) => theme.colors.primaryLight};
+  transition: all 0.3s ease;
+
+  @media (hover: hover) {
+    &: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};
+  }
+
+  ${({ type, theme }) =>
+    type === "checkbox" ? `border-radius: ${theme.spacing.radius.xs};` : `border-radius: 50%;`}
+
+  ${({ disabled, theme }) =>
+    disabled &&
+    `cursor: not-allowed;
+		background: ${theme.colors.grayLight};
+    border: solid 2px ${theme.colors.gray};
+		color: ${theme.colors.gray};
+	`}
+
+	${({ $error, $success, theme }) => {
+    return statusBorderStyles($error ? true : false, $success ? true : false, theme);
+  }}
+
+	${({ $size }) => {
+    if ($size === "big") {
+      return `
+					min-width: 32px;
+					width: 32px;
+					min-height: 32px;
+					height: 32px;
+
+					& ~ svg {
+						min-width: 18px;
+						width: 18px;
+						min-height: 18px;
+						height: 18px;
+					}
+
+					& ~ em {
+						min-width: 14px;
+						width: 14px;
+						min-height: 14px;
+						height: 14px;
+					}
+				`;
+    } else {
+      return `
+					min-width: 22px;
+					width: 22px;
+					min-height: 22px;
+					height: 22px;
+
+					& ~ svg {
+						min-width: 12px;
+						width: 12px;
+						min-height: 12px;
+						height: 12px;
+					}
+
+					& ~ em {
+						min-width: 8px;
+						width: 8px;
+						min-height: 8px;
+						height: 8px;
+					}
+				`;
+    }
+  }}
+
+	&:checked ~ svg,
+	&:checked ~ em {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+`;
+
+const StyledCustomIconWrapper = styled.span<InputProps>`
+  position: relative;
+  ${({ $fullWidth }) => fullWidthStyles($fullWidth ? true : false)};
+
+  & svg {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+    width: 24px;
+    height: 24px;
+    object-fit: contain;
+    color: ${({ theme }) => theme.colors.primary};
+  }
+
+  ${({ $icon, $iconPosition }) =>
+    $icon && $iconPosition === "right"
+      ? css`
+          & svg {
+            right: 16px;
+          }
+
+          & input {
+            padding-right: 50px;
+          }
+        `
+      : css`
+          & svg {
+            left: 16px;
+          }
+
+          & svg ~ input {
+            padding-left: 50px;
+          }
+        `}
+`;
+
+function LocalInput({ ...props }: InputProps, ref: React.Ref<HTMLInputElement>) {
+  if (props.type === "checkbox" || props.type === "radio") {
+    return (
+      <StyledInputWrapper $fullWidth={props.$fullWidth} type={props.type} $label={props.$label}>
+        <StyledIconWrapper>
+          <StyledRadioCheckboxInput {...props} ref={ref} />
+          {!props.disabled && props.type === "checkbox" ? <IconCheck /> : <em />}
+        </StyledIconWrapper>
+        {props.$label && (
+          <StyledLabel htmlFor={props.id}>
+            {props.$label}
+          </StyledLabel>
+        )}
+      </StyledInputWrapper>
+    );
+  }
+
+  return (
+    <StyledInputWrapper $fullWidth={props.$fullWidth} type={props.type} $label={props.$label}>
+      {props.$label && <StyledLabel htmlFor={props.id}>{props.$label}</StyledLabel>}
+      <StyledCustomIconWrapper
+        $fullWidth={props.$fullWidth}
+        $iconPosition={props.$iconPosition}
+        $icon={props.$icon}
+      >
+        {props.$iconPosition !== "right" && props.$icon && props.$icon}
+        <StyledInput {...props} ref={ref} />
+        {props.$iconPosition === "right" && props.$icon && props.$icon}
+        {props.type === "date" && <IconCalendar className="icon-calendar" />}
+      </StyledCustomIconWrapper>
+    </StyledInputWrapper>
+  );
+}
+
+const Input = forwardRef(LocalInput);
+
+export { Input };

package/src/lib/max-width.tsx

@@ -0,0 +1,50 @@
+"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/range.tsx

@@ -0,0 +1,208 @@
+"use client";
+import React, { forwardRef } from "react";
+import styled from "styled-components";
+import { Theme, fullWidthStyles, resetButton, statusBorderStyles } from "./utils";
+import { StyledLabel } from "./input";
+
+interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+  className?: string;
+  $label?: string;
+  $size?: "default" | "big";
+  $error?: boolean;
+  $success?: boolean;
+  $fullWidth?: boolean;
+  theme?: Theme;
+}
+
+const StyledInputWrapper = styled.span<InputProps>`
+  display: inline-flex;
+  flex-wrap: ${({ type }) => (type === "checkbox" || type === "radio" ? "fprnowrap" : "wrap")};
+  gap: 10px;
+  align-items: center;
+
+  ${({ $fullWidth }) => fullWidthStyles($fullWidth ? true : false)}
+`;
+
+const StyledInput = styled.input<InputProps>`
+  ${resetButton};
+  padding: 0;
+  height: 10px;
+  font-size: 0;
+  background: transparent;
+  min-width: 100px;
+
+  &::-webkit-slider-runnable-track {
+    width: 100%;
+    cursor: pointer;
+    border-radius: ${({ theme }) => theme.spacing.radius.xl};
+    border: solid 2px ${({ theme }) => theme.colors.grayLight};
+    box-shadow: 0 0 0 0 ${({ theme }) => theme.colors.primaryLight};
+    transition: all 0.3s ease;
+    ${({ $error, $success, theme }) => {
+      return statusBorderStyles($error ? true : false, $success ? true : false, theme);
+    }}
+  }
+
+  &::-moz-range-track {
+    width: 100%;
+    cursor: pointer;
+    border-radius: ${({ theme }) => theme.spacing.radius.xl};
+    border: solid 2px ${({ theme }) => theme.colors.grayLight};
+    box-shadow: 0 0 0 0 ${({ theme }) => theme.colors.primaryLight};
+    transition: all 0.3s ease;
+    ${({ $error, $success, theme }) => {
+      return statusBorderStyles($error ? true : false, $success ? true : false, theme);
+    }}
+  }
+
+  &::-webkit-slider-thumb {
+    ${resetButton};
+    background: ${({ theme }) => theme.colors.primary};
+    border: 0 solid transparent;
+    border-radius: 50%;
+    transition: all 0.3s ease;
+  }
+
+  &::-moz-range-thumb {
+    ${resetButton};
+    background: ${({ theme }) => theme.colors.primary};
+    border: 0 solid transparent;
+    border-radius: 50%;
+    transition: all 0.3s ease;
+  }
+
+  @media (hover: hover) {
+    &:hover:not([disabled]) {
+      &::-webkit-slider-runnable-track {
+        border: solid 2px ${({ theme }) => theme.colors.primary};
+      }
+
+      &::-moz-range-track {
+        border: solid 2px ${({ theme }) => theme.colors.primary};
+      }
+    }
+  }
+
+  &:focus:not([disabled]) {
+    &::-webkit-slider-runnable-track {
+      border: solid 2px ${({ theme }) => theme.colors.primary};
+      box-shadow: 0 0 0 4px ${({ theme }) => theme.colors.primaryLight};
+    }
+    &::-webkit-slider-thumb {
+      box-shadow: 0 0 0 4px ${({ theme }) => theme.colors.primaryLight};
+    }
+    &::-moz-range-track {
+      border: solid 2px ${({ theme }) => theme.colors.primary};
+      box-shadow: 0 0 0 4px ${({ theme }) => theme.colors.primaryLight};
+    }
+    &::-moz-range-thumb {
+      box-shadow: 0 0 0 4px ${({ theme }) => theme.colors.primaryLight};
+    }
+  }
+
+  &:active:not([disabled]) {
+    &::-webkit-slider-runnable-track {
+      box-shadow: 0 0 0 2px ${({ theme }) => theme.colors.primaryLight};
+    }
+    &::-webkit-slider-thumb {
+      box-shadow: 0 0 0 2px ${({ theme }) => theme.colors.primaryLight};
+    }
+    &::-moz-range-track {
+      box-shadow: 0 0 0 2px ${({ theme }) => theme.colors.primaryLight};
+    }
+    &::-moz-range-thumb {
+      box-shadow: 0 0 0 2px ${({ theme }) => theme.colors.primaryLight};
+    }
+  }
+
+  ${({ disabled, theme }) =>
+    disabled &&
+    `
+		cursor: not-allowed;
+
+		&::-webkit-slider-runnable-track {
+			background: ${theme.colors.grayLight};
+			cursor: not-allowed;
+		}
+
+		&::-moz-range-track {
+			background: ${theme.colors.grayLight};
+			cursor: not-allowed;
+		}
+
+		&::-webkit-slider-thumb {
+			background: ${theme.colors.gray};
+			cursor: not-allowed;
+		}
+
+		&::-moz-range-thumb {
+			background: ${theme.colors.gray};
+			cursor: not-allowed;
+		}
+	`}
+
+  ${({ $fullWidth }) => fullWidthStyles($fullWidth ? true : false)}
+
+	${({ $size }) => {
+    if ($size === "big") {
+      return `
+					height: 32px;
+
+					&::-webkit-slider-runnable-track {
+						height: 14px;
+					}
+
+					&::-moz-range-track {
+						height: 10px;
+					}
+
+					&::-webkit-slider-thumb {
+						width: 32px;
+						height: 32px;
+						margin-top: -11px;
+					}
+
+					&::-moz-range-thumb {
+						width: 32px;
+						height: 32px;
+					}
+				`;
+    } else {
+      return `
+					height: 22px;
+
+					&::-webkit-slider-runnable-track {
+						height: 10px;
+					}
+
+					&::-moz-range-track {
+						height: 6px;
+					}
+
+					&::-webkit-slider-thumb {
+						width: 22px;
+						height: 22px;
+						margin-top: -8px;
+					}
+
+					&::-moz-range-thumb {
+						width: 22px;
+						height: 22px;
+					}
+				`;
+    }
+  }}
+`;
+
+function LocalRange({ ...props }: InputProps, ref: React.Ref<HTMLInputElement>) {
+  return (
+    <StyledInputWrapper $fullWidth={props.$fullWidth}>
+      {props.$label && <StyledLabel htmlFor={props.id}>{props.$label}</StyledLabel>}
+      <StyledInput {...props} type="range" ref={ref} />
+    </StyledInputWrapper>
+  );
+}
+
+const Range = forwardRef(LocalRange);
+
+export { Range };