From a9dba793ba4029f23d7af36fbb69815f12888398 Mon Sep 17 00:00:00 2001
From: Sapayth Hossain <sapayth@users.noreply.github.com>
Date: Mon, 9 Feb 2026 20:31:19 +0600
Subject: [PATCH 1/5] enhance: storybook modal

---
 src/components/ui/Modal.stories.tsx | 91 +++++++++++++++++++++++++++--
 src/components/ui/modal.tsx         |  6 +-
 src/styles.css                      | 16 +++++
 3 files changed, 107 insertions(+), 6 deletions(-)

diff --git a/src/components/ui/Modal.stories.tsx b/src/components/ui/Modal.stories.tsx
index a01a1a7..a907ae3 100644
--- a/src/components/ui/Modal.stories.tsx
+++ b/src/components/ui/Modal.stories.tsx
@@ -1,13 +1,34 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { useState } from "react";
+import React, { useState } from "react";
 import {
   Modal,
   ModalHeader,
   ModalTitle,
-  ModalDescription,
   ModalFooter,
   Button,
+  Input,
+  LabeledSwitch,
+  Field,
+  FieldLabel,
+  FieldDescription,
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
 } from "./index";
+import { ChevronDownIcon } from "lucide-react";
+
+const ZONE_NAME_HELPER = "Give a meaningful name for your reference";
+
+const COUNTRIES = [
+  "Bangladesh",
+  "United States",
+  "United Kingdom",
+  "Canada",
+  "Australia",
+  "Germany",
+  "France",
+] as const;
 
 function ModalDemo() {
   const [open, setOpen] = useState(false);
@@ -17,11 +38,12 @@ function ModalDemo() {
       <Modal open={open} onClose={() => setOpen(false)}>
         <ModalHeader>
           <ModalTitle>Modal Title</ModalTitle>
-          <ModalDescription>Description text here.</ModalDescription>
         </ModalHeader>
         <div className="p-6">Modal content.</div>
         <ModalFooter>
-          <Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
+          <Button variant="outline" onClick={() => setOpen(false)}>
+            Cancel
+          </Button>
           <Button onClick={() => setOpen(false)}>Save</Button>
         </ModalFooter>
       </Modal>
@@ -29,11 +51,68 @@ function ModalDemo() {
   );
 }
 
+function CreateShippingZoneDemo() {
+  const [open, setOpen] = useState(false);
+  const [restOfWorld, setRestOfWorld] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Create Shipping Zone</Button>
+      <Modal open={open} onClose={() => setOpen(false)} size="default">
+        <ModalHeader>
+          <ModalTitle>Create Shipping Zone</ModalTitle>
+        </ModalHeader>
+        <div className="flex flex-col gap-6 px-8 py-6">
+          <Field>
+            <FieldLabel>Zone Name</FieldLabel>
+            <Input placeholder="Type" />
+            <FieldDescription>{ZONE_NAME_HELPER}</FieldDescription>
+          </Field>
+
+          <LabeledSwitch
+            label="Rest of the world"
+            checked={restOfWorld}
+            onCheckedChange={(checked) => setRestOfWorld(checked)}
+          />
+
+          <Field>
+            <FieldLabel>Countries</FieldLabel>
+            <DropdownMenu>
+              <DropdownMenuTrigger>
+                <Button
+                  variant="outline"
+                  className="h-9 w-full justify-between font-normal"
+                >
+                  Bangladesh, United States
+                  <ChevronDownIcon className="size-4 opacity-50" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent className="w-[var(--anchor-width)]">
+                {COUNTRIES.map((country) => (
+                  <DropdownMenuItem key={country}>{country}</DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+            <FieldDescription>{ZONE_NAME_HELPER}</FieldDescription>
+          </Field>
+        </div>
+        <ModalFooter>
+          <Button variant="outline" onClick={() => setOpen(false)}>
+            Cancel
+          </Button>
+          <Button onClick={() => setOpen(false)}>Create</Button>
+        </ModalFooter>
+      </Modal>
+    </>
+  );
+}
+
 const meta = {
   title: "UI/Modal",
   component: Modal,
   parameters: { layout: "centered" },
   tags: ["autodocs"],
+  args: { open: false, onClose: () => {} },
 } satisfies Meta<typeof Modal>;
 
 export default meta;
@@ -41,3 +120,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = { render: () => <ModalDemo /> };
+
+export const CreateShippingZone: Story = {
+  render: () => <CreateShippingZoneDemo />,
+};
diff --git a/src/components/ui/modal.tsx b/src/components/ui/modal.tsx
index d55ddd9..be9c95e 100644
--- a/src/components/ui/modal.tsx
+++ b/src/components/ui/modal.tsx
@@ -80,8 +80,9 @@ const ModalHeader = forwardRef<HTMLDivElement, ModalHeaderProps>(
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
+      data-slot="modal-header"
       className={cn(
-        "flex flex-col space-y-1.5 text-center sm:text-left border-b border-border py-4 px-8",
+        "flex flex-col space-y-1.5 text-center sm:text-left border-b py-4 px-8",
         className,
       )}
       {...props}
@@ -147,8 +148,9 @@ const ModalFooter = forwardRef<HTMLDivElement, ModalFooterProps>(
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
+      data-slot="modal-footer"
       className={cn(
-        "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 border-t border-border py-5 px-8",
+        "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 border-t py-5 px-8",
         className,
       )}
       {...props}
diff --git a/src/styles.css b/src/styles.css
index 579f6d9..d3bbbd0 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -242,6 +242,22 @@
     -moz-osx-font-smoothing: grayscale;
 }
 
+/* ============================================
+   Modal Header (overrides reset border-color)
+   ============================================ */
+
+.pui-root [data-slot="modal-header"] {
+    border-bottom: 1px solid #E9E9E9;
+}
+
+/* ============================================
+   Modal Footer (overrides reset border-color)
+   ============================================ */
+
+.pui-root [data-slot="modal-footer"] {
+    border-top: 1px solid #E9E9E9;
+}
+
 /* ============================================
    Component Base Styles
    ============================================ */

From d3e034d608f6e1b0a8c0d7253f9888d34b01e65c Mon Sep 17 00:00:00 2001
From: Sapayth Hossain <sapayth@users.noreply.github.com>
Date: Mon, 9 Feb 2026 21:31:50 +0600
Subject: [PATCH 2/5] enhance: alert component for storybook

---
 src/components/ui/Alert.stories.tsx | 136 ++++++++++++++++++++++++----
 1 file changed, 120 insertions(+), 16 deletions(-)

diff --git a/src/components/ui/Alert.stories.tsx b/src/components/ui/Alert.stories.tsx
index c8df6b2..5574269 100644
--- a/src/components/ui/Alert.stories.tsx
+++ b/src/components/ui/Alert.stories.tsx
@@ -1,5 +1,29 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Alert, AlertTitle, AlertDescription } from "./alert";
+import React from "react";
+import {
+  AlertTriangle,
+  CheckCircle,
+  Info as InfoIcon,
+  X,
+  XCircle,
+} from "lucide-react";
+import { Alert, AlertAction, AlertDescription, AlertTitle } from "./alert";
+import { Button } from "./button";
+
+const VARIANT_ICONS = {
+  default: InfoIcon,
+  destructive: XCircle,
+  success: CheckCircle,
+  warning: AlertTriangle,
+  info: InfoIcon,
+} as const;
+
+type AlertVariant = keyof typeof VARIANT_ICONS;
+
+function AlertIcon({ variant }: { variant: AlertVariant }) {
+  const Icon = VARIANT_ICONS[variant] ?? InfoIcon;
+  return <Icon />;
+}
 
 const meta = {
   title: "UI/Alert",
@@ -19,8 +43,9 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-  render: () => (
-    <Alert variant="default">
+  args: { variant: "default" },
+  render: (args) => (
+    <Alert variant={args.variant}>
       <AlertTitle>Title</AlertTitle>
       <AlertDescription>Description text goes here.</AlertDescription>
     </Alert>
@@ -28,8 +53,9 @@ export const Default: Story = {
 };
 
 export const Destructive: Story = {
-  render: () => (
-    <Alert variant="destructive">
+  args: { variant: "destructive" },
+  render: (args) => (
+    <Alert variant={args.variant}>
       <AlertTitle>Error</AlertTitle>
       <AlertDescription>Something went wrong.</AlertDescription>
     </Alert>
@@ -37,21 +63,19 @@ export const Destructive: Story = {
 };
 
 export const Success: Story = {
-  args: {
-    variant: "default"
-  },
-
-  render: () => (
-    <Alert variant="success">
+  args: { variant: "success" },
+  render: (args) => (
+    <Alert variant={args.variant}>
       <AlertTitle>Success</AlertTitle>
       <AlertDescription>Your changes have been saved.</AlertDescription>
     </Alert>
-  )
+  ),
 };
 
 export const Warning: Story = {
-  render: () => (
-    <Alert variant="warning">
+  args: { variant: "warning" },
+  render: (args) => (
+    <Alert variant={args.variant}>
       <AlertTitle>Warning</AlertTitle>
       <AlertDescription>Please review before continuing.</AlertDescription>
     </Alert>
@@ -59,10 +83,90 @@ export const Warning: Story = {
 };
 
 export const Info: Story = {
-  render: () => (
-    <Alert variant="info">
+  args: { variant: "info" },
+  render: (args) => (
+    <Alert variant={args.variant}>
       <AlertTitle>Info</AlertTitle>
       <AlertDescription>New update available.</AlertDescription>
     </Alert>
   ),
 };
+
+const defaultVariant: AlertVariant = "default";
+
+export const WithDescription: Story = {
+  args: { variant: defaultVariant },
+  render: (args) => (
+    <Alert variant={args.variant}>
+      <AlertIcon variant={args.variant ?? defaultVariant} />
+      <AlertTitle>Hold on I need at least a few minutes!</AlertTitle>
+      <AlertDescription>
+        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+      </AlertDescription>
+      <AlertAction>
+        <Button variant="ghost" size="icon-sm" aria-label="Dismiss">
+          <X />
+        </Button>
+      </AlertAction>
+    </Alert>
+  ),
+};
+
+export const WithoutDescription: Story = {
+  args: { variant: defaultVariant },
+  render: (args) => (
+    <Alert variant={args.variant}>
+      <AlertIcon variant={args.variant ?? defaultVariant} />
+      <AlertTitle>Hold on I need at least a few minutes!</AlertTitle>
+      <AlertAction>
+        <Button variant="ghost" size="icon-sm" aria-label="Dismiss">
+          <X />
+        </Button>
+      </AlertAction>
+    </Alert>
+  ),
+};
+
+export const WithButtons: Story = {
+  args: { variant: defaultVariant },
+  render: (args) => (
+    <Alert variant={args.variant}>
+      <AlertIcon variant={args.variant ?? defaultVariant} />
+      <div className="flex items-center justify-between gap-4 col-start-2">
+        <AlertTitle>Hold on I need at least a few minutes!</AlertTitle>
+        <div className="flex gap-2">
+          <Button variant="default">Primary</Button>
+          <Button variant="outline">Button</Button>
+        </div>
+      </div>
+      <AlertAction>
+        <Button variant="ghost" size="icon-sm" aria-label="Dismiss">
+          <X />
+        </Button>
+      </AlertAction>
+    </Alert>
+  ),
+};
+
+export const WithDescriptionAndButtons: Story = {
+  args: { variant: defaultVariant },
+  render: (args) => (
+    <Alert variant={args.variant}>
+      <AlertIcon variant={args.variant ?? defaultVariant} />
+      <AlertTitle>Hold on I need at least a few minutes!</AlertTitle>
+      <AlertDescription>
+        This process may take a few minutes to complete. See the{" "}
+        <a href="#">documentation</a> for more details.
+      </AlertDescription>
+      <div className="flex gap-2 pt-1 col-start-2">
+        <Button variant="default">Primary</Button>
+        <Button variant="outline">Button</Button>
+      </div>
+      <AlertAction>
+        <Button variant="ghost" size="icon-sm" aria-label="Dismiss">
+          <X />
+        </Button>
+      </AlertAction>
+    </Alert>
+  ),
+};

From 8bc5777341d517292b9f369f93d19960b1104c8d Mon Sep 17 00:00:00 2001
From: Sapayth Hossain <sapayth@users.noreply.github.com>
Date: Mon, 9 Feb 2026 21:41:45 +0600
Subject: [PATCH 3/5] css fixes

---
 src/components/ui/Alert.stories.tsx | 2 +-
 src/components/ui/alert.tsx         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ui/Alert.stories.tsx b/src/components/ui/Alert.stories.tsx
index 5574269..438524e 100644
--- a/src/components/ui/Alert.stories.tsx
+++ b/src/components/ui/Alert.stories.tsx
@@ -131,8 +131,8 @@ export const WithButtons: Story = {
   args: { variant: defaultVariant },
   render: (args) => (
     <Alert variant={args.variant}>
-      <AlertIcon variant={args.variant ?? defaultVariant} />
       <div className="flex items-center justify-between gap-4 col-start-2">
+        <AlertIcon variant={args.variant ?? defaultVariant} />
         <AlertTitle>Hold on I need at least a few minutes!</AlertTitle>
         <div className="flex gap-2">
           <Button variant="default">Primary</Button>
diff --git a/src/components/ui/alert.tsx b/src/components/ui/alert.tsx
index 3d4a72a..2e17ca1 100644
--- a/src/components/ui/alert.tsx
+++ b/src/components/ui/alert.tsx
@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const alertVariants = cva(
-  "grid gap-2.5 rounded-lg border px-5 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert",
+  "grid gap-2.5 rounded-lg border p-5 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert",
   {
     variants: {
       variant: {

From 00f9a980bb919d24f8916cbb41cee2139d4fd6a7 Mon Sep 17 00:00:00 2001
From: Sapayth Hossain <sapayth@users.noreply.github.com>
Date: Mon, 9 Feb 2026 22:26:23 +0600
Subject: [PATCH 4/5] enhance: storybook confirmation

---
 src/components/ui/Confirmation.stories.tsx | 171 +++++++++++++++++++++
 src/components/ui/modal.tsx                |   2 +-
 src/components/ui/notice.tsx               |   2 +-
 3 files changed, 173 insertions(+), 2 deletions(-)
 create mode 100644 src/components/ui/Confirmation.stories.tsx

diff --git a/src/components/ui/Confirmation.stories.tsx b/src/components/ui/Confirmation.stories.tsx
new file mode 100644
index 0000000..63ee47e
--- /dev/null
+++ b/src/components/ui/Confirmation.stories.tsx
@@ -0,0 +1,171 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React, { useState } from "react";
+import { Modal, ModalTitle, Button, Notice } from "./index";
+import { Minus, Info } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+function LeaveWithUnsavedChangesDemo() {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Leave page</Button>
+      <Modal open={open} onClose={() => setOpen(false)} className="border-0">
+        <div className="flex flex-row items-center gap-3 px-8 pt-8 pb-4 text-left">
+          <div
+            className={cn(
+              "flex size-10 shrink-0 items-center justify-center rounded-full",
+              "bg-violet-50 text-violet-600",
+            )}
+            aria-hidden
+          >
+            <svg width="55" height="55" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <rect x="0.413333" y="0.413333" width="54.1733" height="54.1733" rx="27.0867" fill="#EFEAFF" stroke="#EFEAFF" stroke-width="0.826667"/>
+              <path d="M33.823 32.5947V22.4138C33.823 21.4667 32.9774 20.655 31.8951 20.655C31.6245 20.655 31.3877 20.6888 31.1848 20.7903V20.1476C31.1848 19.2005 30.3392 18.3888 29.2568 18.3888C28.8171 18.3888 28.445 18.5241 28.1406 18.727C27.8024 18.3211 27.2274 18.0505 26.6186 18.0505C25.7391 18.0505 25.0288 18.5917 24.7921 19.302C24.5553 19.2005 24.2847 19.1329 23.9803 19.1329C22.9318 19.1329 22.0524 19.9108 22.0524 20.8917V28.5359L21.3421 27.6565C20.6318 26.7094 19.2788 26.405 18.2641 26.9462C17.7567 27.2168 17.4185 27.6903 17.2832 28.2315C17.1479 28.8065 17.2832 29.3815 17.6553 29.855C18.2641 30.6668 18.9067 31.5124 19.5156 32.3241L20.6318 33.8124C20.8009 34.0153 20.9362 34.2521 21.1053 34.455C21.5788 35.1315 22.0862 35.808 22.7627 36.383C24.048 37.4654 25.8068 37.8712 27.4642 37.8712C28.2759 37.8712 29.0539 37.7698 29.7642 37.6345C33.823 36.7889 33.823 33.7447 33.823 32.5947ZM29.5274 36.5183C27.7686 36.8904 25.1303 36.8565 23.5406 35.5374C22.9994 35.0639 22.5597 34.455 22.0862 33.8124C21.9171 33.5756 21.7479 33.3389 21.5788 33.1359L20.4626 31.6477C19.8538 30.8359 19.2112 29.9903 18.6023 29.1785C18.4332 28.9756 18.3994 28.7388 18.4332 28.5021C18.467 28.2991 18.6023 28.13 18.8053 27.9947C19.3126 27.7241 20.0229 27.8932 20.3612 28.3668C20.3612 28.3668 20.3612 28.4006 20.395 28.4006L22.1877 30.5315C22.3568 30.7344 22.5935 30.8021 22.8303 30.7006C23.0671 30.5991 23.2362 30.3962 23.2362 30.1594V20.9256C23.2362 20.6211 23.5744 20.3506 23.9803 20.3506C24.3524 20.3506 24.6906 20.5873 24.6906 20.8917V21.027V21.0608V26.7771C24.6906 27.1153 24.9612 27.3859 25.2994 27.3859C25.6377 27.3859 25.9083 27.1153 25.9083 26.7771V20.9256C25.9083 20.8917 25.9083 20.8917 25.9083 20.8579V19.8432C25.9083 19.5388 26.2465 19.2682 26.6524 19.2682C27.0583 19.2682 27.3965 19.5388 27.3965 19.8432V20.1814V26.9124V27.0476C27.3965 27.3859 27.6671 27.6565 28.0053 27.6565C28.3436 27.6565 28.6142 27.3859 28.6142 27.0476V26.9124V20.1476C28.6142 19.8432 28.9524 19.5726 29.3583 19.5726C29.7642 19.5726 30.1024 19.8432 30.1024 20.1476V22.3123V22.38V23.2932V23.327V27.6565C30.1024 27.9947 30.373 28.2653 30.7112 28.2653C31.0495 28.2653 31.3201 27.9947 31.3201 27.6565V22.38C31.3539 22.0756 31.6583 21.8388 32.0304 21.8388C32.4362 21.8388 32.7745 22.1094 32.7745 22.4138V32.4933V32.6286C32.6392 33.7447 32.6392 35.8418 29.5274 36.5183Z" fill="#7047EB"/>
+            </svg>
+
+          </div>
+          <ModalTitle className="text-lg font-semibold leading-none tracking-tight text-foreground">
+            Are you sure you want to leave?
+          </ModalTitle>
+        </div>
+        <p className="px-8 py-4 text-muted-foreground">
+          You have unsaved changes.
+        </p>
+        <div className="flex flex-row justify-end gap-2 px-8 py-5">
+          <Button variant="outline" onClick={() => setOpen(false)}>
+            Stay in page
+          </Button>
+          <Button onClick={() => setOpen(false)}>Leave</Button>
+        </div>
+      </Modal>
+    </>
+  );
+}
+
+function CancelSubscriptionDemo() {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button variant="outline" onClick={() => setOpen(true)}>
+        Cancel subscription
+      </Button>
+      <Modal open={open} onClose={() => setOpen(false)} className="border-0">
+        <div className="flex flex-row items-start gap-3 px-8 pt-8 pb-4 text-left">
+          <div
+            className={cn(
+              "flex size-10 shrink-0 items-center justify-center rounded-full",
+              "bg-destructive text-destructive-foreground",
+            )}
+            aria-hidden
+          >
+            <svg width="55" height="55" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <rect x="0.413333" y="0.413333" width="54.1733" height="54.1733" rx="27.0867" fill="#FFF7F8" stroke="#F4E4E6" stroke-width="0.826667"/>
+              <g clip-path="url(#clip0_10924_10835)">
+              <path d="M23.0161 27.9214H31.1392" stroke="#E64B5F" stroke-width="1.488" stroke-linecap="round" stroke-linejoin="round"/>
+              <path d="M27.0777 38.075C32.6855 38.075 37.2315 33.529 37.2315 27.9212C37.2315 22.3134 32.6855 17.7673 27.0777 17.7673C21.4699 17.7673 16.9238 22.3134 16.9238 27.9212C16.9238 33.529 21.4699 38.075 27.0777 38.075Z" stroke="#E64B5F" stroke-width="1.488" stroke-linecap="round" stroke-linejoin="round"/>
+              </g>
+              <defs>
+              <clipPath id="clip0_10924_10835">
+              <rect width="27.0769" height="27.0769" fill="white" transform="translate(13.5391 14.3828)"/>
+              </clipPath>
+              </defs>
+            </svg>
+          </div>
+          <ModalTitle>
+            Are you sure you want to cancel the subscription plan?
+          </ModalTitle>
+        </div>
+        <Notice
+          variant="info"
+          className="m-6"
+          borderColor="#8b5cf6"
+          bgColor="#f5f3ff"
+        >
+          <Info className="size-4" aria-hidden />
+          <p className="text-sm text-foreground">
+            Next billing date is <strong>25th March 2024</strong> and reassign
+            is not possible for recurring subscription
+          </p>
+        </Notice>
+        <div className="flex flex-row justify-end gap-2 px-8 py-5">
+          <Button variant="outline" onClick={() => setOpen(false)}>
+            No
+          </Button>
+          <Button variant="destructive" onClick={() => setOpen(false)}>
+            Yes, Cancel
+          </Button>
+        </div>
+      </Modal>
+    </>
+  );
+}
+
+function DiscardDraftDemo() {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button variant="outline" onClick={() => setOpen(true)}>
+        Cancel subscription
+      </Button>
+      <Modal open={open} onClose={() => setOpen(false)} className="border-0">
+        <div className="flex flex-row items-start gap-3 px-8 pt-8 pb-4 text-left">
+          <div
+            className={cn(
+              "flex size-10 shrink-0 items-center justify-center rounded-full",
+              "bg-destructive text-destructive-foreground",
+            )}
+            aria-hidden
+          >
+            <svg width="55" height="55" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <rect x="0.413333" y="0.413333" width="54.1733" height="54.1733" rx="27.0867" fill="#FFF7F8" stroke="#F4E4E6" stroke-width="0.826667"/>
+              <g clip-path="url(#clip0_10924_10835)">
+              <path d="M23.0161 27.9214H31.1392" stroke="#E64B5F" stroke-width="1.488" stroke-linecap="round" stroke-linejoin="round"/>
+              <path d="M27.0777 38.075C32.6855 38.075 37.2315 33.529 37.2315 27.9212C37.2315 22.3134 32.6855 17.7673 27.0777 17.7673C21.4699 17.7673 16.9238 22.3134 16.9238 27.9212C16.9238 33.529 21.4699 38.075 27.0777 38.075Z" stroke="#E64B5F" stroke-width="1.488" stroke-linecap="round" stroke-linejoin="round"/>
+              </g>
+              <defs>
+              <clipPath id="clip0_10924_10835">
+              <rect width="27.0769" height="27.0769" fill="white" transform="translate(13.5391 14.3828)"/>
+              </clipPath>
+              </defs>
+            </svg>
+          </div>
+          <ModalTitle>
+            Are you sure you want to cancel the subscription plan?
+          </ModalTitle>
+        </div>
+        <div className="flex flex-row justify-end gap-2 px-8 py-5">
+          <Button variant="outline" onClick={() => setOpen(false)}>
+            No
+          </Button>
+          <Button variant="destructive" onClick={() => setOpen(false)}>
+            Yes, Cancel
+          </Button>
+        </div>
+      </Modal>
+    </>
+  );
+}
+
+const meta = {
+  title: "UI/Confirmation",
+  component: Modal,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+  args: { open: false, onClose: () => {} },
+} satisfies Meta<typeof Modal>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const LeaveWithUnsavedChanges: Story = {
+  render: () => <LeaveWithUnsavedChangesDemo />,
+};
+
+export const CancelSubscription: Story = {
+  render: () => <CancelSubscriptionDemo />,
+};
+
+export const DiscardDraft: Story = {
+  render: () => <DiscardDraftDemo />,
+};
diff --git a/src/components/ui/modal.tsx b/src/components/ui/modal.tsx
index be9c95e..cb25962 100644
--- a/src/components/ui/modal.tsx
+++ b/src/components/ui/modal.tsx
@@ -174,7 +174,7 @@ const ModalClose = forwardRef<HTMLButtonElement, ModalCloseProps>(
       ref={ref}
       type="button"
       className={cn(
-        "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity",
+        "absolute right-4 top-4 cursor-pointer rounded-sm opacity-70 ring-offset-background transition-opacity",
         "hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
         "disabled:pointer-events-none",
         className,
diff --git a/src/components/ui/notice.tsx b/src/components/ui/notice.tsx
index 5ae6d5c..ed2960b 100644
--- a/src/components/ui/notice.tsx
+++ b/src/components/ui/notice.tsx
@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const noticeVariants = cva(
-  "relative grid gap-2.5 rounded-[3px] border-l-[3px] border-y-0 border-r-0 px-4 py-3 text-left text-sm has-data-[slot=notice-action]:pr-10 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full group/notice",
+  "relative grid gap-2.5 rounded-[3px] border-l-[3px] border-y-0 border-r-0 px-4 py-3 text-left text-sm has-data-[slot=notice-action]:pr-10 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 group/notice",
   {
     variants: {
       variant: {

From c785cbd93aaf2165fdb578e295322c4ba0dfb063 Mon Sep 17 00:00:00 2001
From: Sapayth Hossain <sapayth@users.noreply.github.com>
Date: Tue, 10 Feb 2026 12:45:58 +0600
Subject: [PATCH 5/5] enhance component for storybook

---
 src/components/ui/Confirmation.stories.tsx | 193 ++++++++-------------
 src/components/ui/Modal.stories.tsx        |   3 +-
 src/components/ui/confirmation.tsx         | 103 +++++++++++
 src/components/ui/index.ts                 |   5 +
 src/components/ui/modal.tsx                | 171 ++++++++++++++----
 src/providers/index.ts                     |   1 +
 src/providers/theme-provider.tsx           |   8 +
 7 files changed, 334 insertions(+), 150 deletions(-)
 create mode 100644 src/components/ui/confirmation.tsx

diff --git a/src/components/ui/Confirmation.stories.tsx b/src/components/ui/Confirmation.stories.tsx
index 63ee47e..169356a 100644
--- a/src/components/ui/Confirmation.stories.tsx
+++ b/src/components/ui/Confirmation.stories.tsx
@@ -1,43 +1,22 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import React, { useState } from "react";
-import { Modal, ModalTitle, Button, Notice } from "./index";
-import { Minus, Info } from "lucide-react";
-import { cn } from "@/lib/utils";
+import { Confirmation, Button, Notice } from "./index";
+import { CircleMinus } from "lucide-react";
 
 function LeaveWithUnsavedChangesDemo() {
   const [open, setOpen] = useState(false);
   return (
     <>
       <Button onClick={() => setOpen(true)}>Leave page</Button>
-      <Modal open={open} onClose={() => setOpen(false)} className="border-0">
-        <div className="flex flex-row items-center gap-3 px-8 pt-8 pb-4 text-left">
-          <div
-            className={cn(
-              "flex size-10 shrink-0 items-center justify-center rounded-full",
-              "bg-violet-50 text-violet-600",
-            )}
-            aria-hidden
-          >
-            <svg width="55" height="55" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <rect x="0.413333" y="0.413333" width="54.1733" height="54.1733" rx="27.0867" fill="#EFEAFF" stroke="#EFEAFF" stroke-width="0.826667"/>
-              <path d="M33.823 32.5947V22.4138C33.823 21.4667 32.9774 20.655 31.8951 20.655C31.6245 20.655 31.3877 20.6888 31.1848 20.7903V20.1476C31.1848 19.2005 30.3392 18.3888 29.2568 18.3888C28.8171 18.3888 28.445 18.5241 28.1406 18.727C27.8024 18.3211 27.2274 18.0505 26.6186 18.0505C25.7391 18.0505 25.0288 18.5917 24.7921 19.302C24.5553 19.2005 24.2847 19.1329 23.9803 19.1329C22.9318 19.1329 22.0524 19.9108 22.0524 20.8917V28.5359L21.3421 27.6565C20.6318 26.7094 19.2788 26.405 18.2641 26.9462C17.7567 27.2168 17.4185 27.6903 17.2832 28.2315C17.1479 28.8065 17.2832 29.3815 17.6553 29.855C18.2641 30.6668 18.9067 31.5124 19.5156 32.3241L20.6318 33.8124C20.8009 34.0153 20.9362 34.2521 21.1053 34.455C21.5788 35.1315 22.0862 35.808 22.7627 36.383C24.048 37.4654 25.8068 37.8712 27.4642 37.8712C28.2759 37.8712 29.0539 37.7698 29.7642 37.6345C33.823 36.7889 33.823 33.7447 33.823 32.5947ZM29.5274 36.5183C27.7686 36.8904 25.1303 36.8565 23.5406 35.5374C22.9994 35.0639 22.5597 34.455 22.0862 33.8124C21.9171 33.5756 21.7479 33.3389 21.5788 33.1359L20.4626 31.6477C19.8538 30.8359 19.2112 29.9903 18.6023 29.1785C18.4332 28.9756 18.3994 28.7388 18.4332 28.5021C18.467 28.2991 18.6023 28.13 18.8053 27.9947C19.3126 27.7241 20.0229 27.8932 20.3612 28.3668C20.3612 28.3668 20.3612 28.4006 20.395 28.4006L22.1877 30.5315C22.3568 30.7344 22.5935 30.8021 22.8303 30.7006C23.0671 30.5991 23.2362 30.3962 23.2362 30.1594V20.9256C23.2362 20.6211 23.5744 20.3506 23.9803 20.3506C24.3524 20.3506 24.6906 20.5873 24.6906 20.8917V21.027V21.0608V26.7771C24.6906 27.1153 24.9612 27.3859 25.2994 27.3859C25.6377 27.3859 25.9083 27.1153 25.9083 26.7771V20.9256C25.9083 20.8917 25.9083 20.8917 25.9083 20.8579V19.8432C25.9083 19.5388 26.2465 19.2682 26.6524 19.2682C27.0583 19.2682 27.3965 19.5388 27.3965 19.8432V20.1814V26.9124V27.0476C27.3965 27.3859 27.6671 27.6565 28.0053 27.6565C28.3436 27.6565 28.6142 27.3859 28.6142 27.0476V26.9124V20.1476C28.6142 19.8432 28.9524 19.5726 29.3583 19.5726C29.7642 19.5726 30.1024 19.8432 30.1024 20.1476V22.3123V22.38V23.2932V23.327V27.6565C30.1024 27.9947 30.373 28.2653 30.7112 28.2653C31.0495 28.2653 31.3201 27.9947 31.3201 27.6565V22.38C31.3539 22.0756 31.6583 21.8388 32.0304 21.8388C32.4362 21.8388 32.7745 22.1094 32.7745 22.4138V32.4933V32.6286C32.6392 33.7447 32.6392 35.8418 29.5274 36.5183Z" fill="#7047EB"/>
-            </svg>
-
-          </div>
-          <ModalTitle className="text-lg font-semibold leading-none tracking-tight text-foreground">
-            Are you sure you want to leave?
-          </ModalTitle>
-        </div>
-        <p className="px-8 py-4 text-muted-foreground">
-          You have unsaved changes.
-        </p>
-        <div className="flex flex-row justify-end gap-2 px-8 py-5">
-          <Button variant="outline" onClick={() => setOpen(false)}>
-            Stay in page
-          </Button>
-          <Button onClick={() => setOpen(false)}>Leave</Button>
-        </div>
-      </Modal>
+      <Confirmation
+        open={open}
+        onClose={() => setOpen(false)}
+        title="Are you sure you want to leave?"
+        body="You have unsaved changes."
+        confirmLabel="Leave"
+        cancelLabel="Stay in page"
+        onConfirm={() => setOpen(false)}
+      />
     </>
   );
 }
@@ -49,53 +28,23 @@ function CancelSubscriptionDemo() {
       <Button variant="outline" onClick={() => setOpen(true)}>
         Cancel subscription
       </Button>
-      <Modal open={open} onClose={() => setOpen(false)} className="border-0">
-        <div className="flex flex-row items-start gap-3 px-8 pt-8 pb-4 text-left">
-          <div
-            className={cn(
-              "flex size-10 shrink-0 items-center justify-center rounded-full",
-              "bg-destructive text-destructive-foreground",
-            )}
-            aria-hidden
-          >
-            <svg width="55" height="55" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <rect x="0.413333" y="0.413333" width="54.1733" height="54.1733" rx="27.0867" fill="#FFF7F8" stroke="#F4E4E6" stroke-width="0.826667"/>
-              <g clip-path="url(#clip0_10924_10835)">
-              <path d="M23.0161 27.9214H31.1392" stroke="#E64B5F" stroke-width="1.488" stroke-linecap="round" stroke-linejoin="round"/>
-              <path d="M27.0777 38.075C32.6855 38.075 37.2315 33.529 37.2315 27.9212C37.2315 22.3134 32.6855 17.7673 27.0777 17.7673C21.4699 17.7673 16.9238 22.3134 16.9238 27.9212C16.9238 33.529 21.4699 38.075 27.0777 38.075Z" stroke="#E64B5F" stroke-width="1.488" stroke-linecap="round" stroke-linejoin="round"/>
-              </g>
-              <defs>
-              <clipPath id="clip0_10924_10835">
-              <rect width="27.0769" height="27.0769" fill="white" transform="translate(13.5391 14.3828)"/>
-              </clipPath>
-              </defs>
-            </svg>
-          </div>
-          <ModalTitle>
-            Are you sure you want to cancel the subscription plan?
-          </ModalTitle>
-        </div>
-        <Notice
-          variant="info"
-          className="m-6"
-          borderColor="#8b5cf6"
-          bgColor="#f5f3ff"
-        >
-          <Info className="size-4" aria-hidden />
-          <p className="text-sm text-foreground">
-            Next billing date is <strong>25th March 2024</strong> and reassign
-            is not possible for recurring subscription
-          </p>
-        </Notice>
-        <div className="flex flex-row justify-end gap-2 px-8 py-5">
-          <Button variant="outline" onClick={() => setOpen(false)}>
-            No
-          </Button>
-          <Button variant="destructive" onClick={() => setOpen(false)}>
-            Yes, Cancel
-          </Button>
-        </div>
-      </Modal>
+      <Confirmation
+        open={open}
+        onClose={() => setOpen(false)}
+        title="Are you sure you want to cancel the subscription plan?"
+        body={
+          <Notice variant="info" className="text-sm">
+            <p className="text-foreground">
+              Next billing date is <strong>25th March 2024</strong> and reassign
+              is not possible for recurring subscription
+            </p>
+          </Notice>
+        }
+        icon={<CircleMinus className="size-5" />}
+        confirmLabel="Yes, Cancel"
+        cancelLabel="No"
+        onConfirm={() => setOpen(false)}
+      />
     </>
   );
 }
@@ -105,54 +54,54 @@ function DiscardDraftDemo() {
   return (
     <>
       <Button variant="outline" onClick={() => setOpen(true)}>
-        Cancel subscription
+        Discard draft
+      </Button>
+      <Confirmation
+        open={open}
+        onClose={() => setOpen(false)}
+        title="Are you sure you want to discard this draft?"
+        confirmLabel="Yes, Cancel"
+        cancelLabel="No"
+        onConfirm={() => setOpen(false)}
+      />
+    </>
+  );
+}
+
+function DestructiveDemo() {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button variant="destructive" onClick={() => setOpen(true)}>
+        Delete item
       </Button>
-      <Modal open={open} onClose={() => setOpen(false)} className="border-0">
-        <div className="flex flex-row items-start gap-3 px-8 pt-8 pb-4 text-left">
-          <div
-            className={cn(
-              "flex size-10 shrink-0 items-center justify-center rounded-full",
-              "bg-destructive text-destructive-foreground",
-            )}
-            aria-hidden
-          >
-            <svg width="55" height="55" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <rect x="0.413333" y="0.413333" width="54.1733" height="54.1733" rx="27.0867" fill="#FFF7F8" stroke="#F4E4E6" stroke-width="0.826667"/>
-              <g clip-path="url(#clip0_10924_10835)">
-              <path d="M23.0161 27.9214H31.1392" stroke="#E64B5F" stroke-width="1.488" stroke-linecap="round" stroke-linejoin="round"/>
-              <path d="M27.0777 38.075C32.6855 38.075 37.2315 33.529 37.2315 27.9212C37.2315 22.3134 32.6855 17.7673 27.0777 17.7673C21.4699 17.7673 16.9238 22.3134 16.9238 27.9212C16.9238 33.529 21.4699 38.075 27.0777 38.075Z" stroke="#E64B5F" stroke-width="1.488" stroke-linecap="round" stroke-linejoin="round"/>
-              </g>
-              <defs>
-              <clipPath id="clip0_10924_10835">
-              <rect width="27.0769" height="27.0769" fill="white" transform="translate(13.5391 14.3828)"/>
-              </clipPath>
-              </defs>
-            </svg>
-          </div>
-          <ModalTitle>
-            Are you sure you want to cancel the subscription plan?
-          </ModalTitle>
-        </div>
-        <div className="flex flex-row justify-end gap-2 px-8 py-5">
-          <Button variant="outline" onClick={() => setOpen(false)}>
-            No
-          </Button>
-          <Button variant="destructive" onClick={() => setOpen(false)}>
-            Yes, Cancel
-          </Button>
-        </div>
-      </Modal>
+      <Confirmation
+        open={open}
+        onClose={() => setOpen(false)}
+        title="Delete this item?"
+        body="This action cannot be undone."
+        variant="destructive"
+        confirmLabel="Delete"
+        cancelLabel="Cancel"
+        onConfirm={() => setOpen(false)}
+      />
     </>
   );
 }
 
 const meta = {
   title: "UI/Confirmation",
-  component: Modal,
+  component: Confirmation,
   parameters: { layout: "centered" },
   tags: ["autodocs"],
-  args: { open: false, onClose: () => {} },
-} satisfies Meta<typeof Modal>;
+  args: {
+    open: false,
+    onClose: () => {},
+    title: "Confirm action",
+    confirmLabel: "Confirm",
+    cancelLabel: "Cancel",
+  },
+} satisfies Meta<typeof Confirmation>;
 
 export default meta;
 
@@ -160,12 +109,20 @@ type Story = StoryObj<typeof meta>;
 
 export const LeaveWithUnsavedChanges: Story = {
   render: () => <LeaveWithUnsavedChangesDemo />,
+  args: { title: "Are you sure you want to leave?", body: "You have unsaved changes." },
 };
 
 export const CancelSubscription: Story = {
   render: () => <CancelSubscriptionDemo />,
+  args: { title: "Cancel subscription?" },
 };
 
 export const DiscardDraft: Story = {
   render: () => <DiscardDraftDemo />,
+  args: { title: "Discard this draft?" },
+};
+
+export const Destructive: Story = {
+  render: () => <DestructiveDemo />,
+  args: { title: "Delete this item?", variant: "destructive" },
 };
diff --git a/src/components/ui/Modal.stories.tsx b/src/components/ui/Modal.stories.tsx
index a907ae3..3d0ef94 100644
--- a/src/components/ui/Modal.stories.tsx
+++ b/src/components/ui/Modal.stories.tsx
@@ -15,6 +15,7 @@ import {
   DropdownMenuTrigger,
   DropdownMenuContent,
   DropdownMenuItem,
+  ModalDescription,
 } from "./index";
 import { ChevronDownIcon } from "lucide-react";
 
@@ -39,7 +40,7 @@ function ModalDemo() {
         <ModalHeader>
           <ModalTitle>Modal Title</ModalTitle>
         </ModalHeader>
-        <div className="p-6">Modal content.</div>
+        <ModalDescription>Modal content.</ModalDescription>
         <ModalFooter>
           <Button variant="outline" onClick={() => setOpen(false)}>
             Cancel
diff --git a/src/components/ui/confirmation.tsx b/src/components/ui/confirmation.tsx
new file mode 100644
index 0000000..481c415
--- /dev/null
+++ b/src/components/ui/confirmation.tsx
@@ -0,0 +1,103 @@
+import type { ReactNode } from "react";
+import { TriangleAlert } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "./button";
+import {
+  Modal,
+  ModalDescription,
+  ModalFooter,
+  ModalTitle,
+} from "./modal";
+
+const DEFAULT_CONFIRM_LABEL = "Confirm";
+const DEFAULT_CANCEL_LABEL = "Cancel";
+
+export type ConfirmationVariant = "default" | "destructive";
+
+const iconContainerVariants: Record<ConfirmationVariant, string> = {
+  default: "bg-primary/10 text-primary",
+  destructive: "bg-destructive/10 text-destructive",
+};
+
+export interface ConfirmationProps {
+  open: boolean;
+  onClose: () => void;
+  title: ReactNode;
+  body?: ReactNode;
+  icon?: ReactNode;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  onConfirm?: () => void;
+  onCancel?: () => void;
+  variant?: ConfirmationVariant;
+  showCloseButton?: boolean;
+  closeOnOverlayClick?: boolean;
+}
+
+export function Confirmation({
+  open,
+  onClose,
+  title,
+  body,
+  icon,
+  confirmLabel = DEFAULT_CONFIRM_LABEL,
+  cancelLabel = DEFAULT_CANCEL_LABEL,
+  onConfirm,
+  onCancel,
+  variant = "default",
+  showCloseButton = true,
+  closeOnOverlayClick = true,
+}: ConfirmationProps) {
+  const handleConfirm = () => {
+    onClose();
+    onConfirm?.();
+  };
+
+  const handleCancel = () => {
+    onClose();
+    onCancel?.();
+  };
+
+  const iconContent = icon ?? <TriangleAlert className="size-5" />;
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      role="alertdialog"
+      showCloseButton={showCloseButton}
+      closeOnOverlayClick={closeOnOverlayClick}
+      className="border-0"
+    >
+      <div className="flex flex-row items-center gap-3 p-5 pt-7 text-left">
+        <div
+          className={cn(
+            "flex size-10 shrink-0 items-center justify-center rounded-full",
+            iconContainerVariants[variant],
+          )}
+          aria-hidden
+        >
+          {iconContent}
+        </div>
+        <ModalTitle className="text-lg font-medium text-foreground">
+          {title}
+        </ModalTitle>
+      </div>
+      {body != null ? (
+        <ModalDescription className="p-5 pt-0 text-muted-foreground">
+          {body}
+        </ModalDescription>
+      ) : (
+        <ModalDescription className="sr-only"> </ModalDescription>
+      )}
+      <ModalFooter className="flex flex-row justify-end gap-2">
+        <Button variant="outline" onClick={handleCancel}>
+          {cancelLabel}
+        </Button>
+        <Button variant={variant} onClick={handleConfirm}>
+          {confirmLabel}
+        </Button>
+      </ModalFooter>
+    </Modal>
+  );
+}
diff --git a/src/components/ui/index.ts b/src/components/ui/index.ts
index 68be726..ad84888 100644
--- a/src/components/ui/index.ts
+++ b/src/components/ui/index.ts
@@ -51,6 +51,11 @@ export {
     Modal, ModalClose, ModalContent, ModalDescription,
     ModalFooter, ModalHeader, ModalOverlay, ModalTitle, type ModalProps
 } from "./modal";
+export {
+  Confirmation,
+  type ConfirmationProps,
+  type ConfirmationVariant,
+} from "./confirmation";
 export {
   ComponentPreview,
   DesignSystemSection,
diff --git a/src/components/ui/modal.tsx b/src/components/ui/modal.tsx
index cb25962..5a22d0b 100644
--- a/src/components/ui/modal.tsx
+++ b/src/components/ui/modal.tsx
@@ -1,6 +1,10 @@
 import {
+  createContext,
   forwardRef,
+  useContext,
   useEffect,
+  useId,
+  useLayoutEffect,
   useRef,
   useState,
   type HTMLAttributes,
@@ -8,6 +12,7 @@ import {
 } from "react";
 import { createPortal } from "react-dom";
 import { cn } from "@/lib/utils";
+import { getThemeStyles, useThemeOptional } from "@/providers";
 
 /* ============================================
    Modal Overlay
@@ -15,12 +20,15 @@ import { cn } from "@/lib/utils";
 
 interface ModalOverlayProps extends HTMLAttributes<HTMLDivElement> {
   onClose?: () => void;
+  "data-state"?: "open" | "closed";
 }
 
 const ModalOverlay = forwardRef<HTMLDivElement, ModalOverlayProps>(
-  ({ className, onClose, ...props }, ref) => (
+  ({ className, onClose, "data-state": dataState, ...props }, ref) => (
     <div
       ref={ref}
+      data-state={dataState}
+      aria-hidden="true"
       className={cn(
         "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm",
         "data-[state=open]:animate-in data-[state=closed]:animate-out",
@@ -41,12 +49,14 @@ ModalOverlay.displayName = "ModalOverlay";
 
 interface ModalContentProps extends HTMLAttributes<HTMLDivElement> {
   children?: ReactNode;
+  "data-state"?: "open" | "closed";
 }
 
 const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
-  ({ className, children, ...props }, ref) => (
+  ({ className, children, "data-state": dataState, ...props }, ref) => (
     <div
       ref={ref}
+      data-state={dataState}
       className={cn(
         "fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2",
         "w-full max-w-lg max-h-[85vh] overflow-auto",
@@ -82,7 +92,7 @@ const ModalHeader = forwardRef<HTMLDivElement, ModalHeaderProps>(
       ref={ref}
       data-slot="modal-header"
       className={cn(
-        "flex flex-col space-y-1.5 text-center sm:text-left border-b py-4 px-8",
+        "flex flex-col space-y-1.5 text-center sm:text-left border-b p-5",
         className,
       )}
       {...props}
@@ -100,17 +110,27 @@ interface ModalTitleProps extends HTMLAttributes<HTMLHeadingElement> {
   children?: ReactNode;
 }
 
+const ModalContext = createContext<{
+  labelId: string | undefined;
+  descriptionId: string | undefined;
+} | null>(null);
+
 const ModalTitle = forwardRef<HTMLHeadingElement, ModalTitleProps>(
-  ({ className, ...props }, ref) => (
-    <h2
-      ref={ref}
-      className={cn(
-        "text-lg font-semibold leading-none tracking-tight text-foreground",
-        className,
-      )}
-      {...props}
-    />
-  ),
+  ({ className, id: idProp, ...props }, ref) => {
+    const context = useContext(ModalContext);
+    const id = idProp ?? context?.labelId;
+    return (
+      <h2
+        ref={ref}
+        id={id}
+        className={cn(
+          "text-lg font-bold text-foreground",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
 );
 
 ModalTitle.displayName = "ModalTitle";
@@ -126,13 +146,18 @@ interface ModalDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {
 const ModalDescription = forwardRef<
   HTMLParagraphElement,
   ModalDescriptionProps
->(({ className, ...props }, ref) => (
-  <p
-    ref={ref}
-    className={cn("p-8", className)}
-    {...props}
-  />
-));
+>(({ className, id: idProp, ...props }, ref) => {
+  const context = useContext(ModalContext);
+  const id = idProp ?? context?.descriptionId;
+  return (
+    <p
+      ref={ref}
+      id={id}
+      className={cn("px-5 py-8", className)}
+      {...props}
+    />
+  );
+});
 
 ModalDescription.displayName = "ModalDescription";
 
@@ -150,7 +175,7 @@ const ModalFooter = forwardRef<HTMLDivElement, ModalFooterProps>(
       ref={ref}
       data-slot="modal-footer"
       className={cn(
-        "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 border-t py-5 px-8",
+        "flex sm:flex-row sm:justify-end sm:space-x-2 border-t p-5",
         className,
       )}
       {...props}
@@ -169,10 +194,11 @@ interface ModalCloseProps extends HTMLAttributes<HTMLButtonElement> {
 }
 
 const ModalClose = forwardRef<HTMLButtonElement, ModalCloseProps>(
-  ({ className, onClose, ...props }, ref) => (
+  ({ className, onClose, "aria-label": ariaLabel, ...props }, ref) => (
     <button
       ref={ref}
       type="button"
+      aria-label={ariaLabel ?? "Close"}
       className={cn(
         "absolute right-4 top-4 cursor-pointer rounded-sm opacity-70 ring-offset-background transition-opacity",
         "hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
@@ -252,6 +278,12 @@ export interface ModalProps {
    * @default 'default'
    */
   size?: "sm" | "default" | "lg" | "xl" | "full";
+
+  /**
+   * ARIA role for the modal content
+   * @default 'dialog'
+   */
+  role?: "dialog" | "alertdialog";
 }
 
 const sizeClasses = {
@@ -262,6 +294,11 @@ const sizeClasses = {
   full: "max-w-[calc(100vw-2rem)] max-h-[calc(100vh-2rem)]",
 };
 
+let bodyScrollLockCount = 0;
+
+const FOCUSABLE_SELECTOR =
+  'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
 /**
  * Modal component that portals content to document.body.
  *
@@ -296,13 +333,18 @@ export function Modal({
   closeOnEscape = true,
   className,
   size = "default",
+  role = "dialog",
 }: ModalProps) {
+  const theme = useThemeOptional();
+  const labelId = useId();
+  const descriptionId = useId();
   const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(
     null,
   );
   const previousActiveElement = useRef<Element | null>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!open) {
       setPortalContainer(null);
       return;
@@ -317,11 +359,16 @@ export function Modal({
     document.body.appendChild(container);
     setPortalContainer(container);
 
-    const originalOverflow = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
+    bodyScrollLockCount += 1;
+    if (bodyScrollLockCount === 1) {
+      document.body.style.overflow = "hidden";
+    }
 
     return () => {
-      document.body.style.overflow = originalOverflow;
+      bodyScrollLockCount -= 1;
+      if (bodyScrollLockCount === 0) {
+        document.body.style.overflow = "";
+      }
       document.body.removeChild(container);
 
       if (previousActiveElement.current instanceof HTMLElement) {
@@ -330,7 +377,21 @@ export function Modal({
     };
   }, [open]);
 
-  // Handle escape key
+  useEffect(() => {
+    if (!portalContainer || !theme) return;
+
+    const styles = getThemeStyles(theme.tokens);
+    Object.entries(styles).forEach(([key, value]) => {
+      portalContainer.style.setProperty(key, value);
+    });
+    portalContainer.setAttribute("data-pui-mode", theme.resolvedMode);
+    if (theme.resolvedMode === "dark") {
+      portalContainer.classList.add("dark");
+    } else {
+      portalContainer.classList.remove("dark");
+    }
+  }, [portalContainer, theme]);
+
   useEffect(() => {
     if (!open || !closeOnEscape) return;
 
@@ -344,18 +405,66 @@ export function Modal({
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [open, closeOnEscape, onClose]);
 
+  useLayoutEffect(() => {
+    if (!portalContainer || !open) return;
+
+    const container = contentRef.current;
+    if (!container) return;
+
+    const focusables = container.querySelectorAll<HTMLElement>(
+      FOCUSABLE_SELECTOR,
+    );
+    const first = focusables[0];
+    const last = focusables[focusables.length - 1];
+
+    (first ?? container).focus();
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key !== "Tab") return;
+
+      if (e.shiftKey) {
+        if (document.activeElement === first) {
+          e.preventDefault();
+          last?.focus();
+        }
+      } else {
+        if (document.activeElement === last) {
+          e.preventDefault();
+          first?.focus();
+        }
+      }
+    };
+
+    container.addEventListener("keydown", handleKeyDown);
+    return () => container.removeEventListener("keydown", handleKeyDown);
+  }, [portalContainer, open]);
+
   if (!open || !portalContainer) {
     return null;
   }
 
+  const contextValue = { labelId, descriptionId };
+
   return createPortal(
-    <>
-      <ModalOverlay onClose={closeOnOverlayClick ? onClose : undefined} />
-      <ModalContent className={cn(sizeClasses[size], className)}>
+    <ModalContext.Provider value={contextValue}>
+      <ModalOverlay
+        data-state="open"
+        onClose={closeOnOverlayClick ? onClose : undefined}
+      />
+      <ModalContent
+        ref={contentRef}
+        role={role}
+        aria-modal="true"
+        aria-labelledby={labelId}
+        aria-describedby={descriptionId}
+        tabIndex={-1}
+        data-state="open"
+        className={cn(sizeClasses[size], className)}
+      >
         {showCloseButton && <ModalClose onClose={onClose} />}
         {children}
       </ModalContent>
-    </>,
+    </ModalContext.Provider>,
     portalContainer,
   );
 }
diff --git a/src/providers/index.ts b/src/providers/index.ts
index f413162..f603627 100644
--- a/src/providers/index.ts
+++ b/src/providers/index.ts
@@ -1,4 +1,5 @@
 export {
+    getThemeStyles,
     ThemeProvider,
     useTheme,
     useThemeOptional, type ThemeMode, type ThemeProviderProps,
diff --git a/src/providers/theme-provider.tsx b/src/providers/theme-provider.tsx
index 7876893..919ac29 100644
--- a/src/providers/theme-provider.tsx
+++ b/src/providers/theme-provider.tsx
@@ -222,6 +222,14 @@ function tokensToCssVariables(tokens: ThemeTokens): Record<string, string> {
   return variables;
 }
 
+/**
+ * Returns theme tokens as inline CSS custom properties for use on a DOM element
+ * (e.g. modal portal root) so portaled content inherits the same theme.
+ */
+export function getThemeStyles(tokens: ThemeTokens): Record<string, string> {
+  return tokensToCssVariables(tokens);
+}
+
 export interface ThemeProviderProps {
   /**
    * Unique plugin identifier (e.g., "dokan", "wemail", "appsero")