@rovula/ui 0.1.8 → 0.1.9

package/dist/esm/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/index.d.ts

@@ -1230,14 +1230,17 @@ type ValidationHintRule<TValues> = {
     validate: (values: TValues) => boolean;
     when?: (values: TValues) => boolean;
 };
+type ValidationHintStateClassMap = Partial<Record<ValidationHintState, string>>;
 type ValidationHintListProps<TValues> = {
     values: TValues;
     rules: ValidationHintRule<TValues>[];
     mode?: ValidationHintMode;
     className?: string;
     itemClassName?: string;
+    labelStateClassName?: ValidationHintStateClassMap;
+    iconStateClassName?: ValidationHintStateClassMap;
 };
-declare const ValidationHintList: <TValues>({ values, rules, mode, className, itemClassName, }: ValidationHintListProps<TValues>) => react_jsx_runtime.JSX.Element;
+declare const ValidationHintList: <TValues>({ values, rules, mode, className, itemClassName, labelStateClassName, iconStateClassName, }: ValidationHintListProps<TValues>) => react_jsx_runtime.JSX.Element;
 
 type OptionValue = string | number;
 type OptionLike<TValue extends OptionValue = string> = {

package/dist/src/theme/global.css

@@ -7889,11 +7889,6 @@ input[type=number] {
   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);
@@ -7920,14 +7915,6 @@ input[type=number] {
   opacity: 0;
 }
 
-.opacity-100 {
-  opacity: 1;
-}
-
-.opacity-40 {
-  opacity: 0.4;
-}
-
 .opacity-50 {
   opacity: 0.5;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",

package/src/components/Form/ValidationHintList.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { CheckCircleIcon } from "@heroicons/react/24/outline";
+import { CircleCheck } from "lucide-react";
 import { cn } from "@/utils/cn";
 
 export type ValidationHintState = "pending" | "valid" | "invalid";
@@ -12,12 +12,18 @@ export type ValidationHintRule<TValues> = {
   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;
 };
 
 const resolveHintState = <TValues,>(
@@ -30,16 +36,16 @@ const resolveHintState = <TValues,>(
   return rule.validate(values) ? "valid" : "invalid";
 };
 
-const hintTextStateClass: Record<ValidationHintState, string> = {
-  valid: "text-success",
+const hintLabelStateClass: Record<ValidationHintState, string> = {
+  valid: "text-text-g-contrast-high",
   invalid: "text-input-error",
-  pending: "text-text-g-contrast-medium",
+  pending: "text-text-g-contrast-high",
 };
 
 const hintIconStateClass: Record<ValidationHintState, string> = {
-  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 = <TValues,>({
@@ -48,6 +54,8 @@ export const ValidationHintList = <TValues,>({
   mode = ["pending", "valid", "invalid"],
   className,
   itemClassName,
+  labelStateClassName,
+  iconStateClassName,
 }: ValidationHintListProps<TValues>) => {
   const enabledStates = new Set<ValidationHintState>(mode);
 
@@ -63,13 +71,18 @@ export const ValidationHintList = <TValues,>({
           <li
             key={rule.id}
             className={cn(
-              "flex items-center gap-2 typography-small2",
-              hintTextStateClass[normalizedState],
+              "flex items-center gap-2 typography-small2 ",
+              hintLabelStateClass[normalizedState],
+              labelStateClassName?.[normalizedState],
               itemClassName,
             )}
           >
-            <CheckCircleIcon
-              className={cn("size-4", hintIconStateClass[normalizedState])}
+            <CircleCheck
+              className={cn(
+                "size-4",
+                hintIconStateClass[normalizedState],
+                iconStateClassName?.[normalizedState],
+              )}
             />
             <span>{rule.label}</span>
           </li>

package/src/components/OtpInput/OtpInput.tsx

@@ -26,7 +26,7 @@ export type OtpInputProps = {
 const sanitizeChars = (
   raw: string,
   charPattern: RegExp,
-  maxLength: number
+  maxLength: number,
 ): string[] => {
   const chars = Array.from(raw).filter((char) => charPattern.test(char));
   return chars.slice(0, maxLength);
@@ -48,7 +48,7 @@ export const OtpInput = forwardRef<HTMLInputElement, OtpInputProps>(
       className,
       inputClassName,
     },
-    ref
+    ref,
   ) => {
     const inputRefs = useRef<Array<HTMLInputElement | null>>([]);
     const containerRef = useRef<HTMLDivElement | null>(null);
@@ -58,7 +58,11 @@ export const OtpInput = forwardRef<HTMLInputElement, OtpInputProps>(
       return Array.from({ length }, (_, index) => normalizedValue[index] || "");
     }, [length, value]);
 
-    useImperativeHandle(ref, () => inputRefs.current[0] as HTMLInputElement, []);
+    useImperativeHandle(
+      ref,
+      () => inputRefs.current[0] as HTMLInputElement,
+      [],
+    );
 
     const setCode = (nextSlots: string[]) => {
       const nextValue = nextSlots.join("");
@@ -107,7 +111,10 @@ export const OtpInput = forwardRef<HTMLInputElement, OtpInputProps>(
       }
     };
 
-    const handlePaste = (index: number, event: ClipboardEvent<HTMLInputElement>) => {
+    const handlePaste = (
+      index: number,
+      event: ClipboardEvent<HTMLInputElement>,
+    ) => {
       event.preventDefault();
       if (disabled) return;
 
@@ -125,7 +132,10 @@ export const OtpInput = forwardRef<HTMLInputElement, OtpInputProps>(
       focusInput(nextFocusIndex);
     };
 
-    const handleKeyDown = (index: number, event: KeyboardEvent<HTMLInputElement>) => {
+    const handleKeyDown = (
+      index: number,
+      event: KeyboardEvent<HTMLInputElement>,
+    ) => {
       if (disabled) return;
 
       if (event.key === "ArrowLeft") {
@@ -160,7 +170,10 @@ export const OtpInput = forwardRef<HTMLInputElement, OtpInputProps>(
     };
 
     return (
-      <div className={cn("flex items-center gap-3", className)} ref={containerRef}>
+      <div
+        className={cn("flex items-center gap-3", className)}
+        ref={containerRef}
+      >
         {slots.map((slot, index) => (
           <input
             key={index}
@@ -176,11 +189,11 @@ export const OtpInput = forwardRef<HTMLInputElement, OtpInputProps>(
             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",
+              "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
+              inputClassName,
             )}
             onFocus={(event) => {
               event.target.select();
@@ -202,7 +215,7 @@ export const OtpInput = forwardRef<HTMLInputElement, OtpInputProps>(
         ))}
       </div>
     );
-  }
+  },
 );
 
 OtpInput.displayName = "OtpInput";