@skalfa/skalfa-app 1.0.2 → 1.0.5

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

@@ -1,68 +0,0 @@
-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

@@ -1,102 +0,0 @@
-"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>
-    </>
-  );
-}