next-helios-fe 1.0.0

package/src/components/form/input/password.tsx

@@ -0,0 +1,57 @@
+"use client";
+import React, { useState } from "react";
+import { Icon } from "@iconify/react";
+
+export interface PasswordProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  options?: {
+    width?: "full" | "fit";
+    height?: "short" | "medium" | "high";
+  };
+  label?: string;
+}
+
+export const Password: React.FC<PasswordProps> = ({
+  options,
+  label,
+  ...rest
+}) => {
+  const [show, setShow] = useState(false);
+  const width = options?.width === "fit" ? "w-fit" : "w-full";
+  const height =
+    options?.height === "short"
+      ? "py-1"
+      : options?.height === "high"
+      ? "py-2"
+      : "py-1.5";
+
+  return (
+    <label className={`grid gap-2 ${width}`}>
+      {label && (
+        <span
+          className={`text-sm select-none ${
+            rest.required && "after:content-['*'] after:ml-1 after:text-danger"
+          }`}
+        >
+          {label}
+        </span>
+      )}
+      <div className="relative flex items-center">
+        <input
+          type={show ? "text" : "password"}
+          className={`w-full px-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 ${height}`}
+          {...rest}
+        />
+        <div
+          className="absolute right-4 p-1 rounded-full text-xl text-slate-400 cursor-pointer hover:bg-secondary-light"
+          onClick={(e) => {
+            e.preventDefault();
+            setShow(!show);
+          }}
+        >
+          <Icon icon={`flowbite:eye${show ? "" : "-slash"}-outline`} />
+        </div>
+      </div>
+    </label>
+  );
+};

package/src/components/form/input/radio.tsx

@@ -0,0 +1,49 @@
+"use client";
+import React from "react";
+
+export interface RadioProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  options?: {
+    disableHover?: boolean;
+  };
+  label?: string;
+  theme?: string;
+}
+
+export const Radio: React.FC<RadioProps> = ({
+  options,
+  label,
+  theme,
+  ...rest
+}) => {
+  return (
+    <label
+      className={`flex items-center w-fit ${
+        !rest.disabled && "cursor-pointer"
+      } ${!options?.disableHover ? "gap-2" : "gap-4"}`}
+    >
+      <div
+        className={`flex justify-center items-center ${
+          !options?.disableHover &&
+          "w-8 h-8 rounded-full hover:bg-secondary-light"
+        }`}
+      >
+        <input
+          type="radio"
+          className={`border-default border bg-secondary-bg cursor-pointer checked:bg-primary focus:outline-none focus:ring-0 focus:ring-offset-0 disabled:bg-secondary-light disabled:checked:bg-secondary-dark disabled:cursor-default ${
+            theme && "border-0"
+          }`}
+          style={{ backgroundColor: theme }}
+          {...rest}
+        />
+      </div>
+      {label && (
+        <span
+          className={`text-sm select-none ${rest.disabled && "text-slate-400"}`}
+        >
+          {label}
+        </span>
+      )}
+    </label>
+  );
+};

package/src/components/form/input/range.tsx

@@ -0,0 +1,67 @@
+"use client";
+import React, { useState, useEffect } from "react";
+
+export interface RangeProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  options?: {
+    width?: "full" | "fit";
+  };
+  label?: string;
+  theme?: string;
+}
+
+export const Range: React.FC<RangeProps> = ({
+  options,
+  label,
+  theme,
+  ...rest
+}) => {
+  const [tempValue, setTempValue] = useState("0");
+  const width = options?.width === "fit" ? "w-fit" : "w-full";
+
+  useEffect(() => {
+    if (rest.value) {
+      setTempValue(rest.value as string);
+      return;
+    } else if (rest.defaultValue) {
+      setTempValue(rest.defaultValue as string);
+      return;
+    }
+  }, [rest.value, rest.defaultValue]);
+
+  useEffect(() => {
+    rest.onChange &&
+      rest.onChange({
+        target: { value: tempValue } as HTMLInputElement,
+      } as React.ChangeEvent<HTMLInputElement>);
+  }, [tempValue]);
+
+  return (
+    <label className={`grid gap-2 ${width}`}>
+      {label && (
+        <span
+          className={`text-sm select-none ${
+            rest.required && "after:content-['*'] after:ml-1 after:text-danger"
+          }`}
+        >
+          {label}
+        </span>
+      )}
+      <div className="flex gap-2">
+        <input
+          type="range"
+          className={`flex-1 border-default border cursor-pointer accent-primary focus:outline-none focus:ring-0 focus:ring-offset-0 disabled:accent-secondary-dark disabled:cursor-default ${
+            theme && "border-0"
+          }`}
+          style={{ accentColor: theme }}
+          value={tempValue}
+          onChange={(e) => setTempValue(e.target.value.toString())}
+          {...rest}
+        />
+        <span className="w-7 text-right">
+          {rest.value || rest.defaultValue || tempValue}
+        </span>
+      </div>
+    </label>
+  );
+};

package/src/components/form/input/search.tsx

@@ -0,0 +1,50 @@
+"use client";
+import React from "react";
+import { Icon } from "@iconify/react";
+
+export interface SearchProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  options?: {
+    width?: "full" | "fit";
+    height?: "short" | "medium" | "high";
+  };
+}
+
+export const Search: React.FC<SearchProps> = ({ options, ...rest }) => {
+  const width = options?.width === "fit" ? "w-fit" : "w-full";
+  const height =
+    options?.height === "short"
+      ? "py-1"
+      : options?.height === "high"
+      ? "py-2"
+      : "py-1.5";
+
+  return (
+    <label className={`relative flex items-center ${width}`}>
+      <Icon
+        icon="ic:round-search"
+        className="absolute left-3 text-lg text-slate-400"
+      />
+      <input
+        type="search"
+        className={`w-full px-9 pe-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-search-cancel-button]:appearance-none focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 ${height}`}
+        {...rest}
+      />
+      {rest.value && (
+        <div
+          className={
+            "absolute right-4 p-1 rounded-full text-xl text-slate-400 cursor-pointer hover:bg-secondary-light"
+          }
+          onClick={() => {
+            rest.onChange &&
+              rest.onChange({
+                target: { value: "" } as HTMLInputElement,
+              } as React.ChangeEvent<HTMLInputElement>);
+          }}
+        >
+          <Icon icon="pajamas:close" />
+        </div>
+      )}
+    </label>
+  );
+};

package/src/components/form/input/text.tsx

@@ -0,0 +1,39 @@
+"use client";
+import React from "react";
+
+export interface TextProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  options?: {
+    width?: "full" | "fit";
+    height?: "short" | "medium" | "high";
+  };
+  label?: string;
+}
+
+export const Text: React.FC<TextProps> = ({ options, label, ...rest }) => {
+  const width = options?.width === "fit" ? "w-fit" : "w-full";
+  const height =
+    options?.height === "short"
+      ? "py-1"
+      : options?.height === "high"
+      ? "py-2"
+      : "py-1.5";
+
+  return (
+    <label className={`grid gap-2 ${width}`}>
+      {label && (
+        <span
+          className={`text-sm select-none ${
+            rest.required && "after:content-['*'] after:ml-1 after:text-danger"
+          }`}
+        >
+          {label}
+        </span>
+      )}
+      <input
+        type="text"
+        className={`w-full px-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 ${height}`}
+        {...rest}
+      />
+    </label>
+  );
+};

package/src/components/form/input/time.tsx

@@ -0,0 +1,315 @@
+"use client";
+import React, { useState, useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+import dayjs from "dayjs";
+
+export interface TimeProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  options?: {
+    width?: "full" | "fit";
+    height?: "short" | "medium" | "high";
+  };
+  label?: string;
+}
+
+export const Time: React.FC<TimeProps> = ({ options, label, ...rest }) => {
+  const [tempValue, setTempValue] = useState(dayjs().format("hh:mm a"));
+  const [isOpen, setIsOpen] = useState(false);
+  const [position, setPosition] = useState<{
+    top: number;
+    left: number;
+  } | null>(null);
+  const [dropdownWidth, setDropdownWidth] = useState<number>(0);
+  const triggerRef = useRef<HTMLDivElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const hoursRef = useRef<HTMLDivElement>(null);
+  const minutesRef = useRef<HTMLDivElement>(null);
+  const width = options?.width === "fit" ? "w-fit" : "w-full";
+  const height =
+    options?.height === "short"
+      ? "py-1"
+      : options?.height === "high"
+      ? "py-2"
+      : "py-1.5";
+  const hours = [
+    "12",
+    "01",
+    "02",
+    "03",
+    "04",
+    "05",
+    "06",
+    "07",
+    "08",
+    "09",
+    "10",
+    "11",
+  ];
+  const minutes = [
+    "00",
+    "01",
+    "02",
+    "03",
+    "04",
+    "05",
+    "06",
+    "07",
+    "08",
+    "09",
+    "10",
+    "11",
+    "12",
+    "13",
+    "14",
+    "15",
+    "16",
+    "17",
+    "18",
+    "19",
+    "20",
+    "21",
+    "22",
+    "23",
+    "24",
+    "25",
+    "26",
+    "27",
+    "28",
+    "29",
+    "30",
+    "31",
+    "32",
+    "33",
+    "34",
+    "35",
+    "36",
+    "37",
+    "38",
+    "39",
+    "40",
+    "41",
+    "42",
+    "43",
+    "44",
+    "45",
+    "46",
+    "47",
+    "48",
+    "49",
+    "50",
+    "51",
+    "52",
+    "53",
+    "54",
+    "55",
+    "56",
+    "57",
+    "58",
+    "59",
+  ];
+  const ampm = ["am", "pm"];
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(e.target as Node) &&
+        !triggerRef.current?.contains(e.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (triggerRef.current) {
+      const rect = triggerRef.current.getBoundingClientRect();
+      const dropdownHeight = dropdownRef.current?.offsetHeight || 0;
+      const windowHeight = window.innerHeight;
+
+      setPosition({
+        top: rect.bottom + window.scrollY + 10,
+        left: rect.left + window.scrollX,
+      });
+
+      setDropdownWidth(rect.width);
+
+      if (rect.bottom + dropdownHeight > windowHeight) {
+        setPosition((prev) =>
+          prev
+            ? { ...prev, top: rect.top + window.scrollY - dropdownHeight - 10 }
+            : null
+        );
+      }
+    }
+
+    if (isOpen) {
+      document.getElementById("body")!.style.overflow = "hidden";
+    } else {
+      document.getElementById("body")!.style.overflow = "auto";
+    }
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (isOpen) {
+      const scrollToSelected = (
+        ref: React.RefObject<HTMLDivElement>,
+        value: string,
+        delay: number
+      ) => {
+        const timeout = setTimeout(() => {
+          const selectedElement = ref.current?.querySelector(
+            `[data-value='${value}']`
+          );
+          selectedElement?.scrollIntoView({
+            block: "nearest",
+          });
+        }, delay);
+        return () => clearTimeout(timeout);
+      };
+
+      scrollToSelected(hoursRef, tempValue.split(":")[0], 0);
+      scrollToSelected(minutesRef, tempValue.split(":")[1].split(" ")[0], 0);
+    }
+  }, [isOpen, tempValue]);
+
+  useEffect(() => {
+    if (rest.value) {
+      setTempValue(rest.value as string);
+      return;
+    } else if (rest.defaultValue) {
+      setTempValue(rest.defaultValue as string);
+      return;
+    }
+  }, [rest.value, rest.defaultValue]);
+
+  useEffect(() => {
+    rest.onChange &&
+      rest.onChange({
+        target: {
+          value: tempValue,
+        } as HTMLInputElement,
+      } as React.ChangeEvent<HTMLInputElement>);
+  }, [tempValue]);
+
+  return (
+    <label className={`grid gap-2 ${width}`}>
+      {label && (
+        <span
+          className={`text-sm select-none ${
+            rest.required && "after:content-['*'] after:ml-1 after:text-danger"
+          }`}
+        >
+          {label}
+        </span>
+      )}
+      <div className="relative" ref={triggerRef}>
+        <div
+          className="relative flex items-center cursor-pointer"
+          onClick={() => setIsOpen(!isOpen)}
+        >
+          <input
+            type="text"
+            className={`accent-primary w-full px-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 ${height}`}
+            value={tempValue}
+            {...rest}
+          />
+        </div>
+        {isOpen &&
+          position &&
+          createPortal(
+            <div
+              ref={dropdownRef}
+              className={`absolute grid grid-cols-3 gap-2 min-w-40 h-40 p-1 z-50 pointer-events-auto bg-secondary-bg shadow border rounded-md overflow-hidden`}
+              style={{
+                top: position.top,
+                left: position.left,
+                width: dropdownWidth,
+              }}
+            >
+              <div
+                ref={hoursRef}
+                className="h-full overflow-auto [&::-webkit-scrollbar]:hidden"
+              >
+                {hours.map((item, index) => (
+                  <button
+                    key={index}
+                    type="button"
+                    className={`w-full my-0.5 px-4 py-2 rounded-md text-sm text-left text-default ${
+                      tempValue.split(":")[0] === item
+                        ? "bg-primary-transparent cursor-default"
+                        : "hover:bg-secondary-light"
+                    }`}
+                    data-value={item}
+                    onMouseDown={() => {
+                      setTempValue(
+                        `${item}:${tempValue.split(":")[1].split(" ")[0]} ${
+                          tempValue.split(" ")[1]
+                        }`
+                      );
+                    }}
+                  >
+                    {item}
+                  </button>
+                ))}
+              </div>
+              <div
+                ref={minutesRef}
+                className="h-full overflow-auto [&::-webkit-scrollbar]:hidden"
+              >
+                {minutes.map((item, index) => (
+                  <button
+                    key={index}
+                    type="button"
+                    className={`w-full my-0.5 px-4 py-2 rounded-md text-sm text-left text-default ${
+                      tempValue.split(":")[1].split(" ")[0] === item
+                        ? "bg-primary-transparent cursor-default"
+                        : "hover:bg-secondary-light "
+                    }`}
+                    data-value={item}
+                    onMouseDown={() => {
+                      setTempValue(
+                        `${tempValue.split(":")[0]}:${item} ${
+                          tempValue.split(" ")[1]
+                        }`
+                      );
+                    }}
+                  >
+                    {item}
+                  </button>
+                ))}
+              </div>
+              <div className="h-full overflow-auto [&::-webkit-scrollbar]:hidden">
+                {ampm.map((item, index) => (
+                  <button
+                    key={index}
+                    type="button"
+                    className={`w-full my-0.5 px-4 py-2 rounded-md text-sm text-left text-default ${
+                      tempValue.split(" ")[1] === item
+                        ? "bg-primary-transparent cursor-default"
+                        : "hover:bg-secondary-light "
+                    }`}
+                    data-value={item}
+                    onMouseDown={() => {
+                      setTempValue(
+                        `${tempValue.split(":")[0]}:${
+                          tempValue.split(":")[1].split(" ")[0]
+                        } ${item}`
+                      );
+                    }}
+                  >
+                    {item}
+                  </button>
+                ))}
+              </div>
+            </div>,
+            document.body
+          )}
+      </div>
+    </label>
+  );
+};