@codapet/design-system 0.6.9 → 0.7.0

package/dist/index.d.mts

@@ -463,8 +463,9 @@ declare function HoverCard({ ...props }: React$1.ComponentProps<typeof HoverCard
 declare function HoverCardTrigger({ ...props }: React$1.ComponentProps<typeof HoverCardPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
 declare function HoverCardContent({ className, align, sideOffset, ...props }: React$1.ComponentProps<typeof HoverCardPrimitive.Content>): react_jsx_runtime.JSX.Element;
 
-declare function InputOTP({ className, containerClassName, ...props }: React$1.ComponentProps<typeof OTPInput> & {
+declare function InputOTP({ className, containerClassName, error, ...props }: React$1.ComponentProps<typeof OTPInput> & {
     containerClassName?: string;
+    error?: boolean;
 }): react_jsx_runtime.JSX.Element;
 declare function InputOTPGroup({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function InputOTPSlot({ index, className, ...props }: React$1.ComponentProps<"div"> & {

package/dist/index.mjs

@@ -3712,23 +3712,25 @@ import * as React32 from "react";
 import { OTPInput, OTPInputContext } from "input-otp";
 import { MinusIcon } from "lucide-react";
 import { jsx as jsx34, jsxs as jsxs18 } from "react/jsx-runtime";
+var InputOTPErrorContext = React32.createContext(false);
 function InputOTP({
   className,
   containerClassName,
+  error,
   ...props
 }) {
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx34(InputOTPErrorContext.Provider, { value: error ?? false, children: /* @__PURE__ */ jsx34(
     OTPInput,
     {
       "data-slot": "input-otp",
       containerClassName: cn(
-        "flex items-center gap-2 has-disabled:opacity-50",
+        "flex items-center gap-2 has-disabled:opacity-40",
         containerClassName
       ),
       className: cn("disabled:cursor-not-allowed", className),
       ...props
     }
-  );
+  ) });
 }
 function InputOTPGroup({ className, ...props }) {
   return /* @__PURE__ */ jsx34(
@@ -3747,19 +3749,36 @@ function InputOTPSlot({
 }) {
   const inputOTPContext = React32.useContext(OTPInputContext);
   const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
+  const isHovering = inputOTPContext?.isHovering ?? false;
+  const error = React32.useContext(InputOTPErrorContext);
   return /* @__PURE__ */ jsxs18(
     "div",
     {
       "data-slot": "input-otp-slot",
       "data-active": isActive,
       className: cn(
-        "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",
+        // Base layout & typography
+        "relative flex size-10 items-center justify-center",
+        "border-y border-r first:border-l text-sm font-medium leading-5",
+        "transition-all outline-none",
+        "first:rounded-l-[4px] last:rounded-r-[4px]",
+        "text-foreground",
+        // Default state (no error)
+        !error && "border-gray-stroke-default bg-background",
+        // Hover: all slots turn blue (non-error, non-active)
+        !error && isHovering && !isActive && "border-focus-ring",
+        // Active slot (non-error): 2px blue border
+        !error && isActive && "z-10 border-2 border-focus-ring",
+        // Error (non-active)
+        error && !isActive && "border-error-stroke-default bg-error-surface-subtle",
+        // Error + active
+        error && isActive && "z-10 border-2 border-error-stroke-default bg-error-surface-subtle",
         className
       ),
       ...props,
       children: [
         char,
-        hasFakeCaret && /* @__PURE__ */ jsx34("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx34("div", { className: "animate-caret-blink bg-foreground h-4 w-px duration-1000" }) })
+        hasFakeCaret && /* @__PURE__ */ jsx34("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx34("div", { className: "animate-caret-blink bg-focus-ring h-4 w-px duration-1000" }) })
       ]
     }
   );