@skalfa/skalfa-app 1.0.0

package/components/base.components/input/InputValues.component.tsx

@@ -0,0 +1,68 @@
+import { CSSProperties } from 'react';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { cn } from '@utils';
+
+export function InputValues({
+  value,
+  className,
+  onDelete,
+  isFocus,
+  onFocus,
+  style,
+} : {
+  value?: string[] | number[];
+  className?: string;
+  onDelete?: (val: string | number, index: string | number) => void;
+  isFocus?: boolean,
+  onFocus?: () => void;
+  style?: CSSProperties
+}) {
+  if(isFocus) {
+    return (
+      <>
+        {!!value?.length && (
+          <div className={cn(`p-2 rounded-sm absolute left-0 w-full bg-background border-b border-x z-30 overflow-hidden ease-in-out max-h-[200px] overflow-y-auto flex gap-2 flex-wrap`, className)} onClick={() => onFocus?.()}>
+            {value?.map((item, key) => {
+              return (
+                <div key={key} className={`input-values-item`}>
+                  <span className="">{item}</span>
+                  <FontAwesomeIcon
+                    icon={faTimes}
+                    className={`input-values-delete`}
+                    onClick={() =>  onDelete?.(item, key)}
+                  />
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </>
+    )
+  } else {
+    return (
+      <>
+        <div 
+          className={cn(`absolute top-1/2 -translate-y-1/2 overflow-x-hidden py-1.5 input-scroll w-max`, className)}
+          style={style}
+          onClick={() => onFocus?.()}
+        >
+          <div className={`input-values-container`}>
+            {value?.map((item, key) => {
+              return (
+                <div key={key} className={`input-values-item`}>
+                  <span>{item}</span>
+                  <FontAwesomeIcon
+                    icon={faTimes}
+                    className={`input-values-delete`}
+                    onClick={() =>  onDelete?.(item, key)}
+                  />
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </>
+    )
+  }
+}

package/components/base.components/input/Radio.component.tsx

@@ -0,0 +1,102 @@
+"use client"
+
+import { useEffect, useState } from "react";
+import { cn, pcn, useInputRandomId } from "@utils";
+
+
+
+type CT = "label" | "checked" | "error" | "input";
+
+export interface RadioProps {
+  name    :  string;
+  label  ?:  string;
+
+  value     ?:  string;
+  disabled  ?:  boolean;
+  checked   ?:  boolean;
+  invalid   ?:  string;
+
+  onChange  ?:  () => void;
+
+  /** Use custom class with: "label::", "checked::", "error::". */
+  className  ?:  string;
+};
+
+
+
+
+export function RadioComponent({
+  name,
+  label,
+
+  value,
+  disabled,
+  checked,
+  invalid,
+
+  onChange,
+
+  className = "",
+}: RadioProps) {
+
+  // =========================>
+  // ## initial
+  // =========================>
+  const randomId                             =  useInputRandomId()
+  const [invalidMessage, setInvalidMessage]  =  useState("");
+
+
+  // =========================>
+  // ## invalid handler
+  // =========================>
+  useEffect(() => {
+    setInvalidMessage(invalid || "");
+  }, [invalid]);
+
+
+  return (
+    <>
+      <div className={`flex flex-col gap-1 `}>
+        <input
+          type="checkbox"
+          className="hidden"
+          id={randomId}
+          name={name}
+          onChange={onChange}
+          defaultChecked={checked}
+          value={value}
+          disabled={disabled}
+        />
+
+        <label
+          htmlFor={randomId}
+          className={`flex gap-2 items-center cursor-pointer ${
+            disabled ? "pointer-events-none opacity-60" : ""
+          }`}
+        >
+          <div
+            className={cn(
+              `flex justify-center items-center rounded-full w-5 h-5 active:outline border border-light-foreground`,
+              checked && "border-[5px] outline-light-primary !border-primary",
+              checked && pcn<CT>(className, "checked"),
+              pcn<CT>(className, "input"),
+            )}
+          ></div>
+          <div
+            className={cn(
+              "whitespace-nowrap",
+              pcn<CT>(className, "label"),
+              checked && "font-semibold",
+              checked && pcn<CT>(className, "label", "checked"),
+              disabled && pcn<CT>(className, "label", "disabled"),
+            )}
+          >{label}</div>
+        </label>
+
+        {invalidMessage && (
+          <small className={cn("input-error-message", pcn<CT>(className, "error"))}>{invalidMessage}</small>
+        )}
+      </div>
+    </>
+  );
+}