c8d0dfe230
Some checks failed
Pull Request Checks / Code Quality & Security (push) Has been cancelled
Security Audit / Security Vulnerability Audit (push) Has been cancelled
Security Audit / Dependency Review (push) Has been cancelled
Security Audit / CodeQL Security Analysis (push) Has been cancelled
Security Audit / Check Outdated Dependencies (push) Has been cancelled
Introduce a dual-layer component architecture: - `components/ui/` contains raw shadcn/ui primitives (button, badge, input, checkbox, label, skeleton, alert, toggle, toggle-group, input-otp) - `components/atoms/` wraps these primitives with enhanced APIs (loading states, semantic variants, polymorphic props) for backward compatibility Migrated atoms: badge, button, checkbox, input, label, skeleton, view-toggle, error-message, inline-toast, error-state. Legacy backups preserved as .legacy.tsx files for reference. Added barrel export for ui/ and updated components/index.ts. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
/**
|
|
* ErrorMessage — now powered by shadcn/ui Alert base styles
|
|
*
|
|
* Keeps the same props interface (variant, showIcon, children) for backward
|
|
* compatibility. Uses Alert-inspired styling with destructive color tokens.
|
|
*/
|
|
|
|
import { forwardRef } from "react";
|
|
import { cva, type VariantProps } from "class-variance-authority";
|
|
import { cn } from "@/shared/utils";
|
|
import { ExclamationCircleIcon } from "@heroicons/react/24/outline";
|
|
|
|
const errorMessageVariants = cva("flex items-center gap-1 text-sm", {
|
|
variants: {
|
|
variant: {
|
|
default: "text-destructive",
|
|
inline: "text-destructive",
|
|
subtle: "text-destructive/80",
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: "default",
|
|
},
|
|
});
|
|
|
|
interface ErrorMessageProps
|
|
extends React.HTMLAttributes<HTMLParagraphElement>, VariantProps<typeof errorMessageVariants> {
|
|
showIcon?: boolean;
|
|
}
|
|
|
|
const ErrorMessage = forwardRef<HTMLParagraphElement, ErrorMessageProps>(
|
|
({ className, variant, showIcon = true, children, ...props }, ref) => {
|
|
if (!children) return null;
|
|
|
|
return (
|
|
<p
|
|
ref={ref}
|
|
data-slot="error-message"
|
|
className={cn(errorMessageVariants({ variant, className }))}
|
|
role="alert"
|
|
{...props}
|
|
>
|
|
{showIcon && <ExclamationCircleIcon className="h-4 w-4 flex-shrink-0" />}
|
|
{children}
|
|
</p>
|
|
);
|
|
}
|
|
);
|
|
ErrorMessage.displayName = "ErrorMessage";
|
|
|
|
export { ErrorMessage, errorMessageVariants };
|
|
export type { ErrorMessageProps };
|