@skalfa/skalfa-app 1.0.0 → 1.0.1

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

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