@cripty2001/utils 0.0.108 → 0.0.110

package/dist/react-ui/form.d.ts

@@ -1,21 +1,23 @@
+import { TypeofRecord } from "..";
 import { InputComponentPropsVariants } from "./input";
-export type FormComponentPropsInput<V extends InputComponentPropsVariants> = {
+export type FormComponentPropsInput = {
     label: string;
     required: boolean;
     key: string;
-    variant: keyof V;
 } & ({
     type: "text" | "email" | "password" | "tel";
 } | {
     type: "select";
     options: string[];
 });
-export type FormComponentProps<T extends Record<string, string>, V extends InputComponentPropsVariants> = {
-    inputs: FormComponentPropsInput<V>[];
+export type FormComponentProps<T extends Record<string, string>> = {
+    inputs: FormComponentPropsInput[];
     onSubmit: (values: T) => void;
     submitLabel: string;
     value: T;
     setValue: React.Dispatch<React.SetStateAction<T>>;
-    variants: V;
+    variant: TypeofRecord<InputComponentPropsVariants> & {
+        button: string;
+    };
 };
-export default function FormComponent<T extends Record<string, string>, V extends InputComponentPropsVariants>(props: FormComponentProps<T, V>): import("react/jsx-runtime").JSX.Element;
+export default function FormComponent<T extends Record<string, string>>(props: FormComponentProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/react-ui/form.js

@@ -5,9 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = FormComponent;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const button_1 = __importDefault(require("./button"));
 const input_1 = __importDefault(require("./input"));
 function FormComponent(props) {
+    const variants = (0, react_1.useMemo)(() => ({
+        default: props.variant
+    }), [props.variant]);
     return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: '1rem' }, children: [props.inputs.map(input => (() => {
                 const value = props.value[input.key];
                 const setValue = (v) => props.setValue(prev => ({
@@ -19,14 +23,14 @@ function FormComponent(props) {
                     case "email":
                     case "password":
                     case "tel":
-                        return (0, jsx_runtime_1.jsx)(input_1.default, { label: input.label, value: value, setValue: setValue, variant: input.variant, variants: props.variants, children: ({ value, setValue, className }) => ((0, jsx_runtime_1.jsx)("input", { type: input.type, value: value, onChange: (e) => setValue(e.target.value), required: input.required, className: className, placeholder: input.label })) });
+                        return (0, jsx_runtime_1.jsx)(input_1.default, { label: input.label, value: value, setValue: setValue, variant: "default", variants: variants, children: ({ value, setValue, className }) => ((0, jsx_runtime_1.jsx)("input", { type: input.type, value: value, onChange: (e) => setValue(e.target.value), required: input.required, className: className, placeholder: input.label })) });
                     case "select":
-                        return (0, jsx_runtime_1.jsx)(input_1.default, { label: input.label, value: value, setValue: setValue, variant: input.variant, variants: props.variants, required: input.required, validate: (v) => {
+                        return (0, jsx_runtime_1.jsx)(input_1.default, { label: input.label, value: value, setValue: setValue, variant: "default", variants: variants, required: input.required, validate: (v) => {
                                 if (!input.options.includes(v))
                                     throw new Error("Invalid option");
                             }, children: ({ value, setValue, className }) => ((0, jsx_runtime_1.jsx)("select", { value: value, onChange: (e) => setValue(e.target.value), required: input.required, className: className, children: input.options.map(option => ((0, jsx_runtime_1.jsx)("option", { value: option, children: option }, option))) })) });
                     default:
                         return (0, jsx_runtime_1.jsx)("div", { style: { color: '#ef4444', backgroundColor: 'white' }, children: "Unknown input type" });
                 }
-            })()), (0, jsx_runtime_1.jsx)(button_1.default, { title: props.submitLabel, onClick: () => props.onSubmit(props.value) })] }));
+            })()), (0, jsx_runtime_1.jsx)(button_1.default, { className: variants.default.button, title: props.submitLabel, onClick: () => props.onSubmit(props.value) })] }));
 }

package/dist/react-ui/input.d.ts

@@ -1,5 +1,9 @@
-export type InputComponentPropsVariants = Record<string, string> & {
-    default: string;
+export type InputComponentPropsVariantsItem = {
+    input: string;
+    label: string;
+};
+export type InputComponentPropsVariants = Record<string, InputComponentPropsVariantsItem> & {
+    default: InputComponentPropsVariantsItem;
 };
 export type InputComponentProps<V extends InputComponentPropsVariants> = {
     label?: string;

package/dist/react-ui/input.js

@@ -10,7 +10,7 @@ function InputComponent(props) {
     const baseClassName = props.variants[variant ?? "default"];
     const [error, setError] = (0, react_1.useState)(null);
     return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: '0.5rem' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', gap: '0.5rem' }, children: [props.label &&
-                        (0, jsx_runtime_1.jsx)("label", { style: { display: 'block', marginBottom: '0.25rem', fontSize: '0.875rem', fontWeight: 500, color: '#374151' }, children: props.label }), props.copy &&
+                        (0, jsx_runtime_1.jsx)("label", { className: baseClassName.label, children: props.label }), props.copy &&
                         (0, jsx_runtime_1.jsx)(lucide_react_1.CopyIcon, { style: { width: '1rem', height: '1rem', cursor: 'pointer' }, onClick: () => (0, index_1.copyToClipboard)(props.value) })] }), (0, jsx_runtime_1.jsx)("div", { style: { position: 'relative' }, children: props.children({
                     value: props.value,
                     setValue: (v) => {
@@ -25,7 +25,7 @@ function InputComponent(props) {
                             setError(e.message);
                         }
                     },
-                    className: baseClassName
+                    className: baseClassName.input
                 }) }), error &&
                 (0, jsx_runtime_1.jsx)("div", { style: { color: '#ef4444', fontSize: '0.75rem' }, children: error })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cripty2001/utils",
-  "version": "0.0.108",
+  "version": "0.0.110",
   "description": "Internal Set of utils. If you need them use them, otherwise go to the next package ;)",
   "homepage": "https://github.com/cripty2001/utils#readme",
   "bugs": {