Init

2025-10-22 20:51:12 +03:00
parent 0c6c1417c6
commit 4d0cafdce8
29 changed files with 5601 additions and 0 deletions
--- a/src/components/input/Input.tsx
+++ b/src/components/input/Input.tsx
@@ -0,0 +1,142 @@
+import React from "react";
+import { cn } from "../../lib/cn";
+
+/* Варианты для скользящего шарика */
+const inputVariants = {
+  size: {
+    sm: "h-[3rem] w-[27rem]",
+    md: "h-[3.5rem] w-[27rem]",
+    lg: "h-[4rem] w-[27rem]",
+  },
+  colors: {
+    default: "text-default-600 bg-default-200 placeholder-default-600",
+    primary: "text-liquid-brightmain bg-liquid-brightmain placeholder-liquid-brightmain",
+    secondary: "text-secondary bg-secondary-100 placeholder-secondary",
+    success: "text-success bg-success-100 placeholder-success",
+    warning: "text-warning bg-warning-100 placeholder-warning",
+    danger: "text-danger bg-danger-100 placeholder-danger",
+  },
+  radius: {
+    none: "rounded-none",
+    sm: "rounded-[8px]",
+    md: "rounded-[12px]",
+    lg: "rounded-[16px]",
+    full: "rounded-full",
+  },
+  colorsHovered: {
+    default: "focus:bg-default-200 hover:bg-default-300",
+    primary: "focus:bg-liquid-brightmain hover:bg-liquid-brightmain",
+    secondary: "focus:bg-secondary-100 hover:bg-secondary-200",
+    success: "focus:bg-success-100 hover:bg-success-200",
+    warning: "focus:bg-warning-100 hover:bg-warning-200",
+    danger: "focus:bg-danger-100 hover:bg-danger-200",
+  },
+  label: {
+    default: "text-default-600",
+    primary: "text-liquid-brightmain",
+    secondary: "text-secondary",
+    success: "text-success",
+    warning: "text-warning",
+    danger: "text-dange",
+  },
+};
+
+interface SwitchProps {
+  size?: "sm" | "md" | "lg";
+  radius?: "sm" | "md" | "lg" | "none" | "full";
+  disabled?: boolean;
+  placeholder?: string;
+  type?: "text" | "email" | "password" | "first_name";
+  color?:
+    | "default"
+    | "primary"
+    | "secondary"
+    | "success"
+    | "warning"
+    | "danger";
+  id?: string;
+  required?: boolean;
+  label?: string;
+  labelType?: "none" | "in" | "out" | "left" | "in-fixed" | "out-fixed";
+  variant?: "flat" | "faded" | "bordered" | "underlined";
+  className?: string;
+  defaultState?: string;
+  onChange: (state: string) => void;
+}
+
+export const Input: React.FC<SwitchProps> = ({
+  size = "sm",
+  // radius = "md",
+  type = "text",
+  id = "",
+  disabled = false,
+  required = false,
+  // color = "default",
+  label = "",
+  labelType = "in",
+  placeholder = "",
+  variant = "flat",
+  className,
+  onChange,
+  defaultState = "",
+}) => {
+  const [value, setValue] = React.useState<string>(defaultState);
+
+  React.useEffect(() => onChange(value), [value]);
+
+  if (labelType == "in" || labelType == "in-fixed")
+    return (
+      <label
+        className={cn(
+          "grid relative select-none group cursor-text overflow-hidden",
+          disabled && "pointer-events-none opacity-50",
+          className
+        )}
+      >
+        {/* Основной контейнер,  */}
+        <div
+          className={cn(
+            "box-border z-10 relative transition-all duration-300 h-fit flex items-center px-3 rounded-[12px] overflow-hidden  ",
+            inputVariants.size[size],
+            variant == "flat" &&
+              "group-hover:bg-default-300 group-focus-within:bg-default-300 bg-default-200",
+            variant == "faded" &&
+              "group-hover:bg-default-300 group-focus-within:bg-default-300 bg-default-200 border-[2px] border-default-300 group-focus-within:border-default group-hover:border-default",
+            variant == "bordered" &&
+              "border-[2px] border-default-300 group-focus-within:border-default group-hover:border-default"
+          )}
+        >
+          <input
+            id={type == "password" ? type : id}
+            type={type}
+            className={cn(
+              "outline outline-transparent transition-all duration-300 bg-transparent absolute left-0 bottom-0 placeholder-default-500 text-layout-foreground w-full px-3 pt-[10px] h-full",
+              placeholder == "" && value == ""
+                ? "opacity-0 focus:opacity-100"
+                : " [&:-webkit-autofill+*]:text-white"
+            )}
+            value={value}
+            placeholder={placeholder}
+            disabled={disabled}
+            onChange={(e) => {
+              setValue(e.target.value);
+            }}
+          />
+
+          <div
+            className={cn(
+              "absolute text-default-600 transition-all duration-300 my-[2px]",
+              placeholder == "" && value == "" && labelType != "in-fixed"
+                ? "top-[20%] text-[16px] group-focus-within:top-0 group-focus-within:text-[12px] group-focus-within:text-default-700"
+                : "top-0 text-[12px] text-default-700"
+            )}
+          >
+            {label}
+            {required && <span className="text-danger m-[2px]">*</span>}
+          </div>
+        </div>
+      </label>
+    );
+
+  return <></>;
+};