@rovula/ui 0.1.8 → 0.1.9

package/dist/cjs/types/components/Form/ValidationHintList.d.ts

@@ -6,12 +6,15 @@ export type ValidationHintRule<TValues> = {
     validate: (values: TValues) => boolean;
     when?: (values: TValues) => boolean;
 };
+export type ValidationHintStateClassMap = Partial<Record<ValidationHintState, string>>;
 export type ValidationHintListProps<TValues> = {
     values: TValues;
     rules: ValidationHintRule<TValues>[];
     mode?: ValidationHintMode;
     className?: string;
     itemClassName?: string;
+    labelStateClassName?: ValidationHintStateClassMap;
+    iconStateClassName?: ValidationHintStateClassMap;
 };
-export declare const ValidationHintList: <TValues>({ values, rules, mode, className, itemClassName, }: ValidationHintListProps<TValues>) => import("react/jsx-runtime").JSX.Element;
+export declare const ValidationHintList: <TValues>({ values, rules, mode, className, itemClassName, labelStateClassName, iconStateClassName, }: ValidationHintListProps<TValues>) => import("react/jsx-runtime").JSX.Element;
 export default ValidationHintList;

package/dist/components/Form/ValidationHintList.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CheckCircleIcon } from "@heroicons/react/24/outline";
+import { CircleCheck } from "lucide-react";
 import { cn } from "@/utils/cn";
 const resolveHintState = (values, rule) => {
     const shouldEvaluate = rule.when ? rule.when(values) : true;
@@ -7,24 +7,24 @@ const resolveHintState = (values, rule) => {
         return "pending";
     return rule.validate(values) ? "valid" : "invalid";
 };
-const hintTextStateClass = {
-    valid: "text-success",
+const hintLabelStateClass = {
+    valid: "text-text-g-contrast-high",
     invalid: "text-input-error",
-    pending: "text-text-g-contrast-medium",
+    pending: "text-text-g-contrast-high",
 };
 const hintIconStateClass = {
-    valid: "opacity-100",
-    invalid: "opacity-100",
-    pending: "opacity-40",
+    valid: "text-primary",
+    invalid: "text-input-error",
+    pending: "text-text-g-contrast-low",
 };
-export const ValidationHintList = ({ values, rules, mode = ["pending", "valid", "invalid"], className, itemClassName, }) => {
+export const ValidationHintList = ({ values, rules, mode = ["pending", "valid", "invalid"], className, itemClassName, labelStateClassName, iconStateClassName, }) => {
     const enabledStates = new Set(mode);
     return (_jsx("ul", { className: cn("mt-2 flex flex-col gap-3", className), children: rules.map((rule) => {
             const state = resolveHintState(values, rule);
             const normalizedState = enabledStates.has(state)
                 ? state
                 : "pending";
-            return (_jsxs("li", { className: cn("flex items-center gap-2 typography-small2", hintTextStateClass[normalizedState], itemClassName), children: [_jsx(CheckCircleIcon, { className: cn("size-4", hintIconStateClass[normalizedState]) }), _jsx("span", { children: rule.label })] }, rule.id));
+            return (_jsxs("li", { className: cn("flex items-center gap-2 typography-small2 ", hintLabelStateClass[normalizedState], labelStateClassName === null || labelStateClassName === void 0 ? void 0 : labelStateClassName[normalizedState], itemClassName), children: [_jsx(CircleCheck, { className: cn("size-4", hintIconStateClass[normalizedState], iconStateClassName === null || iconStateClassName === void 0 ? void 0 : iconStateClassName[normalizedState]) }), _jsx("span", { children: rule.label })] }, rule.id));
         }) }));
 };
 export default ValidationHintList;

package/dist/components/OtpInput/OtpInput.js

@@ -102,7 +102,7 @@ export const OtpInput = forwardRef(({ value, onChange, onBlur, onComplete, lengt
     };
     return (_jsx("div", { className: cn("flex items-center gap-3", className), ref: containerRef, children: slots.map((slot, index) => (_jsx("input", { ref: (element) => {
                 inputRefs.current[index] = element;
-            }, type: "text", inputMode: inputMode, autoComplete: index === 0 ? "one-time-code" : "off", value: slot, maxLength: 1, disabled: disabled, autoFocus: autoFocus && index === 0, "aria-invalid": invalid || undefined, className: cn("h-14 w-[46px] rounded-[8px] border bg-transparent text-center text-2xl font-semibold text-text-white outline-none transition-all duration-200", "border-input-default-stroke focus:border-input-active-stroke", "disabled:cursor-not-allowed disabled:opacity-50", invalid && "border-input-error focus:border-input-error", inputClassName), onFocus: (event) => {
+            }, type: "text", inputMode: inputMode, autoComplete: index === 0 ? "one-time-code" : "off", value: slot, maxLength: 1, disabled: disabled, autoFocus: autoFocus && index === 0, "aria-invalid": invalid || undefined, className: cn("h-14 w-[46px] rounded-[8px] text-input-filled-text border bg-transparent text-center text-2xl font-semibold outline-none transition-all duration-200", "border-input-default-stroke focus:border-input-active-stroke", "disabled:cursor-not-allowed disabled:opacity-50", invalid && "border-input-error focus:border-input-error", inputClassName), onFocus: (event) => {
                 event.target.select();
             }, onBlur: (event) => {
                 var _a;

package/dist/esm/bundle.css

@@ -3929,10 +3929,6 @@ input[type=number] {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--text-g-contrast-medium) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
-.text-text-white{
-  --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--text-white) calc(100% * var(--tw-text-opacity, 1)), transparent);
-}
 .text-warning{
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--state-warning-default) calc(100% * var(--tw-text-opacity, 1)), transparent);
@@ -3953,12 +3949,6 @@ input[type=number] {
 .opacity-0{
   opacity: 0;
 }
-.opacity-100{
-  opacity: 1;
-}
-.opacity-40{
-  opacity: 0.4;
-}
 .opacity-50{
   opacity: 0.5;
 }