-

app/elements/alerts/page.tsx

@@ -5,11 +5,13 @@ import {
   faCircleCheck,
   faCircleExclamation,
   faCircleInfo,
+  faClose,
   faTriangleExclamation,
 } from "@fortawesome/pro-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { Metadata } from "next"
 import Link from "next/link"
+import { useCallback } from "react"
 import { Alert } from "../../../components/Alert"
 import { Card } from "../../../components/Card"
 import { Headline } from "../../../elements/Headline"
@@ -43,6 +45,8 @@ const Icons: Record<VARIANTS, IconProp> = {
 }
 
 export default function Page() {
+  const handleDismiss = useCallback((variant: string) => () => {}, [])
+
   return (
     <section className="flex w-full flex-col gap-6">
       <Headline title="Alerts">
@@ -78,16 +82,31 @@ export default function Page() {
         <Card header="Dismissing">
           <div className="flex flex-col gap-3">
             {Object.entries(VARIANTS).map(([key, value]) => (
-              <Alert className="text-left text-sm" key={key} variant={value}>
+              <Alert className="pr-10 text-left text-sm" key={key} variant={value}>
                 You should check in on some of those fields below.
+                <button className="absolute right-2 top-2 flex size-7 items-center justify-center rounded bg-transparent bg-opacity-10 text-inherit hover:bg-inherit">
+                  <FontAwesomeIcon icon={faClose} className="size-4" />
+                </button>
               </Alert>
             ))}
           </div>
         </Card>
       </div>
 
       <div className="flex gap-6">
-        <Card header="Acon Alerts">
+        <Card header="Content">
+          <div className="flex flex-col gap-3">
+            <Alert className="flex flex-col items-start gap-1.5 text-left text-sm" variant="success">
+              <div className="text-xl font-bold">Well done!</div>
+              Aww yeah, you successfully read this important alert message. This example text is going to run a bit
+              longer so that you can see how spacing within an alert works with this kind of content.
+              <hr className="my-1.5 w-full border-inherit" />
+              Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
+            </Alert>
+          </div>
+        </Card>
+
+        <Card header="Icons">
           <div className="flex flex-col gap-3">
             {Object.entries(VARIANTS).map(([key, value]) => (
               <Alert className="flex items-center gap-1.5 text-left text-sm" key={key} variant={value}>

components/Alert.tsx

@@ -9,7 +9,7 @@ const alert = tv({
     variant: {
       primary: "text-primary-800 bg-primary-500 border-primary-500",
       secondary: "text-secondary-800 dark:text-secondary-200 bg-secondary-500 border-secondary-500",
-      success: "text-success-800 bg-success-500 border-success-500",
+      success: "text-success-800 bg-success-500 border-success-500 bg-opacity-10 border-opacity-10",
       danger: "text-danger-800 bg-danger-500 border-danger-500",
       warning: "text-warning-800 bg-warning-500 border-warning-500",
       info: "text-info-800 bg-info-500 border-info-500",
@@ -21,7 +21,9 @@ const alert = tv({
   },
 })
 
-interface AlertVariants extends VariantProps<typeof alert> {
+export interface AlertVariants extends VariantProps<typeof alert> {}
+
+export interface AlertProps extends HTMLAttributes<HTMLButtonElement | HTMLAnchorElement>, AlertVariants {
   hover?: boolean
   href?: string
   target?: HTMLAttributeAnchorTarget
@@ -30,8 +32,6 @@ interface AlertVariants extends VariantProps<typeof alert> {
   type?: "submit" | "reset" | "button" | undefined
 }
 
-export interface AlertProps extends HTMLAttributes<HTMLButtonElement | HTMLAnchorElement>, AlertVariants {}
-
 export const Alert = forwardRef<HTMLAnchorElement | HTMLButtonElement, AlertProps>(function Alert(
   { hover, href, target, rounded, variant = "primary", className, children, disabled, type, ...rest }: AlertProps,
   ref

package.json

@@ -120,7 +120,7 @@
     "dayjs": "1.11.13",
     "dompurify": "3.1.6",
     "draft-js": "0.11.7",
-    "framer-motion": "11.5.6",
+    "framer-motion": "11.6.0",
     "html2canvas": "1.4.1",
     "lucide-react": "0.446.0",
     "md5": "2.3.0",

yarn.lock

@@ -9944,10 +9944,10 @@ fraction.js@^4.3.7:
   resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
   integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
 
-framer-motion@11.5.6:
-  version "11.5.6"
-  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-11.5.6.tgz#84b8519319f8f98efa62f4c592310f31e85b0459"
-  integrity sha512-JMwUpAxv/DWgul9vPgX0ElKn0G66sUc6O9tOXsYwn3zxwvhxFljSXC0XT2QCzuTYBshwC8nyDAa1SYcV0Ldbhw==
+framer-motion@11.6.0:
+  version "11.6.0"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-11.6.0.tgz#c79d19ed9e47f4204e8d7e53db21c897b4ebde7e"
+  integrity sha512-+NJ8MpS2A7apQf3WjSrMl6xlQeYVmPGp8OZ0grNKJEyEILl6EerQrvj2bc+MgrsUndbweZsYdog1/NsxRrkWdA==
   dependencies:
     tslib "^2.4.0"