@codapet/design-system 0.6.8 → 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

@@ -404,25 +404,24 @@ import { jsx as jsx7 } from "react/jsx-runtime";
 var textareaBaseStyles = [
   // Base styles aligned with Input
   "placeholder:text-gray-subtle selection:bg-primary selection:text-primary-foreground",
-  "flex w-full min-w-0 rounded-md border bg-transparent text-base shadow-xs transition-all duration-400",
+  "flex w-full min-w-0 rounded-lg border bg-transparent text-base font-medium transition-all duration-400",
   "outline-none font-sans",
   // Disabled
-  "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
-  // Responsive text size
-  "md:text-sm",
+  "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-40",
   // Default state
-  "border-border-default bg-background",
+  "border-gray-stroke-default bg-background",
   // Hover/Focus/Active states
-  "hover:border-brand-normal",
-  "focus:border-focus-ring",
-  "active:border-brand-normal",
+  "hover:border-focus-ring",
+  "focus:border-2 focus:border-focus-ring",
+  "active:border-focus-ring",
   // Textarea specific
   "field-sizing-content min-h-16 resize-y px-3 py-2"
 ].join(" ");
 var errorStyles = [
-  "border-destructive bg-red-subtle",
-  "focus:border-destructive focus:ring-destructive/20",
-  "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
+  "border-error-stroke-default bg-white",
+  "hover:border-error-stroke-default",
+  "focus:border-2 focus:border-error-stroke-default",
+  "active:border-error-stroke-default"
 ].join(" ");
 var Textarea = React6.forwardRef(
   ({ className, error, ...props }, ref) => {
@@ -3713,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(
@@ -3748,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" }) })
       ]
     }
   );