@nationaldesignstudio/react 0.5.4 → 0.5.6

package/dist/component-registry.md

@@ -1,7 +1,7 @@
 # Component Registry
 
 > Auto-generated component metadata for AI/agent consumption.
-> Generated: 2026-01-16T16:52:21.427Z
+> Generated: 2026-01-20T19:14:31.863Z
 
 ---
 
@@ -346,7 +346,7 @@ className="font-semibold"        // Font weight 600
             <Button size="md" variant="primary">
               Primary
             </Button>
-            <Button size="md" variant="primary-outline">
+            <Button size="md" variant="outline">
               Secondary
             </Button>
           </CardActions>
@@ -374,7 +374,7 @@ className="font-semibold"        // Font weight 600
             <Button size="md" variant="primary">
               Primary
             </Button>
-            <Button size="md" variant="primary-outline">
+            <Button size="md" variant="outline">
               Secondary
             </Button>
           </CardActions>
@@ -404,7 +404,7 @@ className="font-semibold"        // Font weight 600
             <Button size="sm" variant="primary">
               Primary
             </Button>
-            <Button size="sm" variant="primary-outline">
+            <Button size="sm" variant="outline">
               Secondary
             </Button>
           </CardActions>
@@ -538,7 +538,7 @@ className="font-semibold"        // Font weight 600
             <Button size="md" variant="primary">
               Primary
             </Button>
-            <Button size="md" variant="primary-outline">
+            <Button size="md" variant="outline">
               Secondary
             </Button>
           </CardActions>
@@ -1288,6 +1288,248 @@ className="font-semibold"        // Font weight 600
 ```
 
 
+### BlurredVideoBackdrop
+
+**Import:** `import { BlurredVideoBackdrop } from "@nationaldesignstudio/react";`
+
+**Category:** Other
+
+**Props:**
+
+- `videoRef`: React.RefObject<HTMLVideoElement | null> (required)
+  Ref to the primary video element to create backdrop from (required) */
+- `opacity`: number
+  Opacity of the backdrop (0-1, default: 0.6) */
+- `extension`: number
+  Extension amount in pixels to cover blur artifacts (default: 120) */
+- `targetFps`: number
+  Target FPS for canvas rendering (default: 30) */
+- `scale`: number
+  Canvas scale factor - lower = better performance (default: 0.5) */
+- `showMetrics`: boolean
+  Whether to show debug metrics */
+
+**Examples:**
+
+```tsx
+<div className="relative w-full h-[600px] bg-black overflow-hidden">
+        <BlurredVideoBackdrop {...args} videoRef={videoRef} />
+        <div className="relative z-10 flex items-center justify-center h-full p-48">
+          <div className="w-full max-w-[800px]">
+            <VideoPlayer
+              cloudflare={DGA_CLOUDFLARE}
+              videoRef={videoRef}
+              rounded="lg"
+            />
+          </div>
+        </div>
+      </div>
+```
+
+```tsx
+<div className="relative w-full h-[500px] bg-black overflow-hidden">
+        <BlurredVideoBackdrop videoRef={videoRef} blur="high" />
+        <div className="relative z-10 flex items-center justify-center h-full p-48">
+          <div className="w-full max-w-[640px]">
+            <VideoPlayer
+              cloudflare={DGA_CLOUDFLARE}
+              videoRef={videoRef}
+              rounded="md"
+            />
+          </div>
+        </div>
+      </div>
+```
+
+```tsx
+<div className="flex flex-col gap-24 p-24">
+        <h2 className="typography-h3-md text-white">Blur Intensity Levels</h2>
+        <div className="grid grid-cols-2 gap-24">
+          {configs.map(({ blur, ref }) => (
+            <div key={blur} className="flex flex-col gap-8">
+              <p className="text-white/80 text-14 capitalize">{blur}</p>
+              <div className="relative h-[200px] bg-black rounded-8 overflow-hidden">
+                <BlurredVideoBackdrop
+                  videoRef={ref}
+                  blur={blur}
+                  opacity={0.8}
+                  showMetrics
+                />
+                <div className="relative z-10 flex items-center justify-center h-full p-8">
+                  <div className="w-full max-w-[240px]">
+                    <VideoPlayer
+                      cloudflare={DGA_CLOUDFLARE}
+                      videoRef={ref}
+                      rounded="sm"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+```
+
+```tsx
+<div className="flex flex-col gap-24 p-24">
+        <h2 className="typography-h3-md text-white">Gradient Overlays</h2>
+        <div className="grid grid-cols-3 gap-24">
+          {configs.map(({ overlay, ref }) => (
+            <div key={overlay} className="flex flex-col gap-8">
+              <p className="text-white/80 text-14 capitalize">{overlay}</p>
+              <div className="relative h-[200px] bg-black rounded-8 overflow-hidden">
+                <BlurredVideoBackdrop
+                  videoRef={ref}
+                  blur="high"
+                  overlay={overlay}
+                  opacity={0.8}
+                />
+                <div className="relative z-10 flex items-center justify-center h-full p-8">
+                  <div className="w-full max-w-[200px]">
+                    <VideoPlayer
+                      cloudflare={DGA_CLOUDFLARE}
+                      videoRef={ref}
+                      rounded="sm"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+```
+
+```tsx
+<div className="flex flex-col gap-24 p-24">
+        <div>
+          <h2 className="typography-h3-md text-white mb-8">
+            Scale Factor Impact
+          </h2>
+          <p className="text-gray-400 text-14">
+            Lower scale factors render at reduced resolution for better
+            performance. The blur effect hides most quality loss.
+          </p>
+        </div>
+        <div className="grid grid-cols-2 gap-16">
+          {scales.map(({ scale, ref, label }) => (
+            <div key={scale} className="flex flex-col gap-8">
+              <p className="text-white/80 text-14">{label}</p>
+              <div className="relative h-[250px] bg-black rounded-8 overflow-hidden">
+                <BlurredVideoBackdrop
+                  videoRef={ref}
+                  blur="high"
+                  scale={scale}
+                  targetFps={30}
+                  showMetrics
+                  opacity={0.8}
+                />
+                <div className="relative z-10 flex items-center justify-center h-full p-16">
+                  <div className="w-full max-w-[300px]">
+                    <VideoPlayer
+                      cloudflare={DGA_CLOUDFLARE}
+                      videoRef={ref}
+                      rounded="sm"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+```
+
+```tsx
+<div className="flex flex-col gap-16 p-24">
+        <p className="text-14 text-gray-600 max-w-md">
+          Click the button to open a video dialog with blurred backdrop. The
+          backdrop renders from the same video element - no sync needed.
+        </p>
+        <Dialog
+          trigger={<Button>Watch Video with Blur Backdrop</Button>}
+          size="full"
+          variant="minimal"
+          showClose={true}
+          open={open}
+          onOpenChange={setOpen}
+        >
+          <div className="relative w-full h-full overflow-hidden">
+            <BlurredVideoBackdrop
+              videoRef={videoRef}
+              blur="high"
+              overlay="vignette"
+              opacity={0.6}
+            />
+            <div className="relative z-10 flex items-center justify-center h-full p-24">
+              <div className="w-full max-w-[960px]">
+                <VideoPlayer
+                  cloudflare={DGA_CLOUDFLARE}
+                  videoRef={videoRef}
+                  autoPlay={open}
+                  rounded="lg"
+                />
+              </div>
+            </div>
+          </div>
+        </Dialog>
+        <pre className="text-12 bg-gray-100 p-12 rounded-4 overflow-x-auto">
+          {`const videoRef = useRef<HTMLVideoElement>(null);
+<Dialog size="full" variant="minimal">
+  <div className="relative w-full h-full overflow-hidden">
+    <BlurredVideoBackdrop
+      videoRef={videoRef}
+      blur="high"
+      overlay="vignette"
+    />
+    <div className="relative z-10 flex items-center justify-center h-full">
+      <VideoPlayer
+        cloudflare={cloudflare}
+        videoRef={videoRef}
+        autoPlay
+      />
+    </div>
+  </div>
+</Dialog>`}
+        </pre>
+      </div>
+```
+
+```tsx
+<div className="relative w-full h-[600px] bg-black overflow-hidden">
+        <BlurredVideoBackdrop
+          videoRef={videoRef}
+          blur="extreme"
+          overlay="top-bottom"
+          opacity={0.5}
+        />
+        {/* Hidden video that drives the backdrop */}
+        <video
+          ref={videoRef}
+          className="hidden"
+          src={`https://customer-${DGA_CLOUDFLARE.customerCode}.cloudflarestream.com/${DGA_CLOUDFLARE.videoId}/manifest/video.m3u8`}
+          autoPlay
+          muted
+          loop
+          playsInline
+        />
+        <div className="relative z-10 flex flex-col items-center justify-center h-full text-center px-24">
+          <h1 className="typography-h1-lg text-white mb-16">
+            Welcome to the Future
+          </h1>
+          <p className="typography-body-lg-md text-white/80 max-w-xl mb-32">
+            Experience ambient video backgrounds with our BlurredVideoBackdrop
+            component. Perfect for hero sections and video modals.
+          </p>
+          <Button variant="primary" size="lg">
+            Get Started
+          </Button>
+        </div>
+      </div>
+```
+
+
 ### CardGrid
 
 **Import:** `import { CardGrid } from "@nationaldesignstudio/react";`
@@ -1501,6 +1743,360 @@ className="font-semibold"        // Font weight 600
 ```
 
 
+### Dialog
+
+**Import:** `import { Dialog } from "@nationaldesignstudio/react";`
+
+**Category:** Other
+
+**Props:**
+
+- `children`: React.ReactNode (required)
+  The content to show in the dialog */
+- `trigger`: React.ReactNode
+  The element that triggers the dialog (optional for controlled mode) */
+- `title`: React.ReactNode
+  Title for the dialog */
+- `description`: React.ReactNode
+  Description for the dialog */
+- `size`: "sm" | "md" | "lg" | "xl" | "full"
+  Size of the dialog */
+  Values: `sm`, `md`, `lg`, `xl`, `full`
+- `variant`: "default" | "minimal"
+  Visual variant: "default" for card style, "minimal" for borderless (video modals) */
+  Values: `default`, `minimal`
+- `showClose`: boolean
+  Whether to show a close button */
+- `open`: boolean
+  Controlled open state */
+- `defaultOpen`: boolean
+  Default open state */
+- `onOpenChange`: (open: boolean) => void
+  Callback when open state changes */
+- `className`: string
+  Additional className for the popup */
+
+**Examples:**
+
+```tsx
+<Dialog
+      {...args}
+      trigger={<Button>Open Dialog</Button>}
+      title="Dialog Title"
+      description="This is a description of the dialog content."
+    >
+      <p className="typography-body-md-md mt-16">
+        This is the dialog body content. You can put any content here including
+        text, forms, or other components.
+      </p>
+    </Dialog>
+```
+
+```tsx
+<Dialog
+      trigger={<Button>Open Dialog</Button>}
+      title="Welcome"
+      description="This is a simple dialog."
+    >
+      <p className="typography-body-md-md mt-16">
+        Dialog content goes here. The dialog automatically handles focus
+        trapping, scroll locking, and keyboard navigation.
+      </p>
+    </Dialog>
+```
+
+```tsx
+<Dialog
+      trigger={<Button variant="outline">Small Dialog</Button>}
+      title="Delete Item?"
+      description="This action cannot be undone."
+      size="sm"
+    >
+      <div className="mt-24 flex justify-end gap-12">
+        <Button variant="secondary" size="sm">
+          Cancel
+        </Button>
+        <Button variant="destructive" size="sm">
+          Delete
+        </Button>
+      </div>
+    </Dialog>
+```
+
+```tsx
+<Dialog
+      trigger={<Button variant="outline">Medium Dialog</Button>}
+      title="Edit Profile"
+      description="Make changes to your profile here."
+      size="md"
+    >
+      <div className="mt-24 flex flex-col gap-16">
+        <Input placeholder="Display name" />
+        <Input placeholder="Email address" type="email" />
+      </div>
+      <div className="mt-24 flex justify-end gap-12">
+        <Button variant="secondary">Cancel</Button>
+        <Button>Save Changes</Button>
+      </div>
+    </Dialog>
+```
+
+```tsx
+<Dialog
+      trigger={<Button variant="outline">Large Dialog</Button>}
+      title="Terms of Service"
+      size="lg"
+    >
+      <div className="mt-16 max-h-[400px] overflow-y-auto rounded-surface-ui-small border border-overlay-border bg-bg-section p-16">
+        <p className="typography-body-sm-md text-text-secondary">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat.
+        </p>
+        <p className="typography-body-sm-md mt-16 text-text-secondary">
+          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+          dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+          proident, sunt in culpa qui officia deserunt mollit anim id est
+          laborum.
+        </p>
+        <p className="typography-body-sm-md mt-16 text-text-secondary">
+          Sed ut perspiciatis unde omnis iste natus error sit voluptatem
+          accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
+          ab illo inventore veritatis et quasi architecto beatae vitae dicta
+          sunt explicabo.
+        </p>
+      </div>
+      <div className="mt-24 flex justify-end gap-12">
+        <Button variant="secondary">Decline</Button>
+        <Button>Accept</Button>
+      </div>
+    </Dialog>
+```
+
+```tsx
+<Dialog
+      trigger={<Button variant="outline">XL Dialog</Button>}
+      title="Dashboard Settings"
+      description="Configure your dashboard preferences."
+      size="xl"
+    >
+      <div className="mt-24 grid grid-cols-2 gap-24">
+        <div className="flex flex-col gap-16">
+          <h3 className="typography-body-md-md font-semibold">
+            Display Settings
+          </h3>
+          <Input placeholder="Dashboard name" />
+          <Input placeholder="Refresh interval (seconds)" type="number" />
+        </div>
+        <div className="flex flex-col gap-16">
+          <h3 className="typography-body-md-md font-semibold">Data Sources</h3>
+          <Input placeholder="API endpoint" />
+          <Input placeholder="API key" type="password" />
+        </div>
+      </div>
+      <div className="mt-24 flex justify-end gap-12">
+        <Button variant="secondary">Cancel</Button>
+        <Button>Save Settings</Button>
+      </div>
+    </Dialog>
+```
+
+```tsx
+<Dialog
+      trigger={<Button variant="outline">Full Dialog</Button>}
+      title="Image Gallery"
+      size="full"
+    >
+      <div className="mt-24 grid flex-1 grid-cols-3 gap-16 overflow-y-auto">
+        {Array.from({ length: 9 }).map((_, i) => (
+          <div
+            key={`image-${i + 1}`}
+            className="aspect-video rounded-surface-card bg-bg-section-secondary"
+          />
+        ))}
+      </div>
+    </Dialog>
+```
+
+```tsx
+<div className="flex flex-wrap items-center gap-12">
+      <Dialog
+        trigger={<Button variant="outline">Small</Button>}
+        title="Small Dialog"
+        size="sm"
+      >
+        <p className="typography-body-md-md mt-16">
+          This is a small dialog for simple confirmations.
+        </p>
+      </Dialog>
+      <Dialog
+        trigger={<Button variant="outline">Medium</Button>}
+        title="Medium Dialog"
+        size="md"
+      >
+        <p className="typography-body-md-md mt-16">
+          This is the default medium size dialog.
+        </p>
+      </Dialog>
+      <Dialog
+        trigger={<Button variant="outline">Large</Button>}
+        title="Large Dialog"
+        size="lg"
+      >
+        <p className="typography-body-md-md mt-16">
+          This is a large dialog for more content.
+        </p>
+      </Dialog>
+      <Dialog
+        trigger={<Button variant="outline">XL</Button>}
+        title="Extra Large Dialog"
+        size="xl"
+      >
+        <p className="typography-body-md-md mt-16">
+          This is an extra large dialog for complex layouts.
+        </p>
+      </Dialog>
+      <Dialog
+        trigger={<Button variant="outline">Full</Button>}
+        title="Full Dialog"
+        size="full"
+      >
+        <p className="typography-body-md-md mt-16">
+          This is a full-size dialog that takes up most of the viewport.
+        </p>
+      </Dialog>
+    </div>
+```
+
+```tsx
+<Dialog
+      trigger={<Button variant="destructive">Delete Account</Button>}
+      title="Are you absolutely sure?"
+      description="This action cannot be undone. This will permanently delete your account and remove your data from our servers."
+      size="sm"
+    >
+      <div className="mt-24 flex justify-end gap-12">
+        <Button variant="secondary">Cancel</Button>
+        <Button variant="destructive">Yes, delete my account</Button>
+      </div>
+    </Dialog>
+```
+
+```tsx
+<Dialog
+      trigger={<Button>Add New User</Button>}
+      title="Create User"
+      description="Add a new user to your organization."
+    >
+      <form className="mt-24 flex flex-col gap-16">
+        <Input placeholder="Full name" />
+        <Input placeholder="Email address" type="email" />
+        <Input placeholder="Role" />
+        <div className="mt-8 flex justify-end gap-12">
+          <Button variant="secondary" type="button">
+            Cancel
+          </Button>
+          <Button type="submit">Create User</Button>
+        </div>
+      </form>
+    </Dialog>
+```
+
+```tsx
+<div className="flex flex-col items-center gap-16">
+        <Dialog
+          trigger={<Button>Controlled Dialog</Button>}
+          title="Controlled"
+          description="This dialog's state is controlled externally."
+          open={open}
+          onOpenChange={setOpen}
+        >
+          <p className="typography-body-md-md mt-16">
+            The dialog is {open ? "open" : "closed"}.
+          </p>
+        </Dialog>
+        <div className="flex gap-12">
+          <Button variant="outline" onClick={() => setOpen(true)}>
+            Open from outside
+          </Button>
+          <Button variant="outline" onClick={() => setOpen(false)}>
+            Close from outside
+          </Button>
+        </div>
+      </div>
+```
+
+```tsx
+<DialogParts>
+      <DialogTrigger>
+        <Button variant="primary">Custom Dialog</Button>
+      </DialogTrigger>
+      <DialogPortal>
+        <DialogBackdrop />
+        <DialogPopup size="md">
+          <DialogClose>
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 16 16"
+              fill="none"
+              aria-hidden="true"
+            >
+              <path
+                d="M2 2L14 14M2 14L14 2"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+              />
+            </svg>
+            <span className="sr-only">Close</span>
+          </DialogClose>
+          <DialogTitle>Custom Dialog Title</DialogTitle>
+          <DialogDescription>
+            Built with compound components for maximum flexibility.
+          </DialogDescription>
+          <DialogBody>
+            <p className="typography-body-md-md mt-16">
+              This dialog is built using individual compound components, giving
+              you complete control over the structure and styling.
+            </p>
+          </DialogBody>
+          <DialogFooter>
+            <Button variant="secondary">Cancel</Button>
+            <Button>Confirm</Button>
+          </DialogFooter>
+        </DialogPopup>
+      </DialogPortal>
+    </DialogParts>
+```
+
+```tsx
+<Dialog
+      trigger={<Button>Open Parent Dialog</Button>}
+      title="Parent Dialog"
+      description="This dialog contains another dialog."
+      size="lg"
+    >
+      <div className="mt-24 flex flex-col gap-16">
+        <p className="typography-body-md-md">
+          Click the button below to open a nested dialog.
+        </p>
+        <Dialog
+          trigger={<Button variant="secondary">Open Nested Dialog</Button>}
+          title="Nested Dialog"
+          description="This is a nested dialog."
+          size="sm"
+        >
+          <p className="typography-body-md-md mt-16">
+            Nested dialog content. Focus is properly trapped here.
+          </p>
+        </Dialog>
+      </div>
+    </Dialog>
+```
+
+
 ### FaqSection
 
 **Import:** `import { FaqSection } from "@nationaldesignstudio/react";`
@@ -2852,7 +3448,7 @@ className="font-semibold"        // Font weight 600
 ```tsx
 <div className="flex flex-col gap-16 max-w-[320px]">
     <div>
-      <p className="mb-8 text-12 text-text-muted">Default</p>
+      <p className="mb-8 typography-body-sm-sm text-text-muted">Default</p>
       <Select>
         <SelectTrigger placeholder="Select option..." />
         <SelectPopup>
@@ -2863,7 +3459,7 @@ className="font-semibold"        // Font weight 600
       </Select>
     </div>
     <div>
-      <p className="mb-8 text-12 text-text-muted">With Value</p>
+      <p className="mb-8 typography-body-sm-sm text-text-muted">With Value</p>
       <Select defaultValue="option2">
         <SelectTrigger placeholder="Select option..." />
         <SelectPopup>
@@ -2874,7 +3470,7 @@ className="font-semibold"        // Font weight 600
       </Select>
     </div>
     <div>
-      <p className="mb-8 text-12 text-text-muted">Error</p>
+      <p className="mb-8 typography-body-sm-sm text-text-muted">Invalid</p>
       <Select>
         <SelectTrigger placeholder="Select option..." error />
         <SelectPopup>
@@ -2885,7 +3481,7 @@ className="font-semibold"        // Font weight 600
       </Select>
     </div>
     <div>
-      <p className="mb-8 text-12 text-text-muted">Disabled</p>
+      <p className="mb-8 typography-body-sm-sm text-text-muted">Disabled</p>
       <Select disabled>
         <SelectTrigger placeholder="Select option..." />
         <SelectPopup>
@@ -2940,7 +3536,7 @@ className="font-semibold"        // Font weight 600
 ```tsx
 <div className="flex flex-col gap-16 max-w-[320px]">
     <div>
-      <p className="mb-8 text-12 text-text-muted">Small (36px)</p>
+      <p className="mb-8 typography-body-sm-sm text-text-muted">Small (36px)</p>
       <Select>
         <SelectTrigger size="sm" placeholder="Select option..." />
         <SelectPopup>
@@ -2951,7 +3547,9 @@ className="font-semibold"        // Font weight 600
       </Select>
     </div>
     <div>
-      <p className="mb-8 text-12 text-text-muted">Default (48px)</p>
+      <p className="mb-8 typography-body-sm-sm text-text-muted">
+        Default (48px)
+      </p>
       <Select>
         <SelectTrigger size="default" placeholder="Select option..." />
         <SelectPopup>
@@ -2962,7 +3560,7 @@ className="font-semibold"        // Font weight 600
       </Select>
     </div>
     <div>
-      <p className="mb-8 text-12 text-text-muted">Large (56px)</p>
+      <p className="mb-8 typography-body-sm-sm text-text-muted">Large (56px)</p>
       <Select>
         <SelectTrigger size="lg" placeholder="Select option..." />
         <SelectPopup>
@@ -2975,11 +3573,89 @@ className="font-semibold"        // Font weight 600
   </div>
 ```
 
+```tsx
+<div className="flex flex-col gap-24 max-w-[320px]">
+    <div>
+      <p className="mb-8 typography-body-sm-sm text-text-muted">
+        alignItemWithTrigger=true (default)
+      </p>
+      <Select defaultValue="option2">
+        <SelectTrigger placeholder="Select option..." />
+        <SelectPopup alignItemWithTrigger={true}>
+          <SelectOption value="option1">Option 1</SelectOption>
+          <SelectOption value="option2">Option 2</SelectOption>
+          <SelectOption value="option3">Option 3</SelectOption>
+        </SelectPopup>
+      </Select>
+    </div>
+    <div>
+      <p className="mb-8 typography-body-sm-sm text-text-muted">
+        alignItemWithTrigger=false
+      </p>
+      <Select defaultValue="option2">
+        <SelectTrigger placeholder="Select option..." />
+        <SelectPopup alignItemWithTrigger={false}>
+          <SelectOption value="option1">Option 1</SelectOption>
+          <SelectOption value="option2">Option 2</SelectOption>
+          <SelectOption value="option3">Option 3</SelectOption>
+        </SelectPopup>
+      </Select>
+    </div>
+  </div>
+```
+
+```tsx
+<div className="w-[320px]">
+    <Select>
+      <SelectTrigger placeholder="Select a fruit..." />
+      <SelectPopup>
+        <SelectGroup>
+          <SelectGroupLabel>Fruits</SelectGroupLabel>
+          <SelectOption value="apple">Apple</SelectOption>
+          <SelectOption value="banana">Banana</SelectOption>
+          <SelectOption value="orange">Orange</SelectOption>
+        </SelectGroup>
+        <SelectSeparator />
+        <SelectGroup>
+          <SelectGroupLabel>Vegetables</SelectGroupLabel>
+          <SelectOption value="carrot">Carrot</SelectOption>
+          <SelectOption value="broccoli">Broccoli</SelectOption>
+          <SelectOption value="spinach">Spinach</SelectOption>
+        </SelectGroup>
+        <SelectSeparator />
+        <SelectGroup>
+          <SelectGroupLabel>Proteins</SelectGroupLabel>
+          <SelectOption value="chicken">Chicken</SelectOption>
+          <SelectOption value="beef">Beef</SelectOption>
+          <SelectOption value="tofu">Tofu</SelectOption>
+        </SelectGroup>
+      </SelectPopup>
+    </Select>
+  </div>
+```
+
+```tsx
+<div className="w-[320px]">
+    <Select>
+      <SelectTrigger placeholder="Select a state..." />
+      <SelectPopup className="max-h-[200px]">
+        <SelectScrollUpArrow />
+        {allStates.map((state) => (
+          <SelectOption key={state.value} value={state.value}>
+            {state.label}
+          </SelectOption>
+        ))}
+        <SelectScrollDownArrow />
+      </SelectPopup>
+    </Select>
+  </div>
+```
+
 ```tsx
 <div className="flex flex-col gap-8 max-w-[320px]">
     <label
       htmlFor="state-select"
-      className="text-14 font-medium text-text-primary"
+      className="typography-body-md-md font-medium text-text-primary"
     >
       State / Territory
     </label>
@@ -2997,10 +3673,10 @@ className="font-semibold"        // Font weight 600
 ```
 
 ```tsx
-<div className="flex flex-col gap-8 max-w-[320px]">
+<div className="flex flex-col gap-8 max-w-[320px]" data-invalid>
     <label
       htmlFor="state-error"
-      className="text-14 font-medium text-text-primary"
+      className="typography-body-md-md font-medium text-text-primary"
     >
       State / Territory
     </label>
@@ -3014,7 +3690,9 @@ className="font-semibold"        // Font weight 600
         ))}
       </SelectPopup>
     </Select>
-    <p className="text-12 text-ui-error-color">Please select a state</p>
+    <p className="typography-body-sm-sm text-ui-error-color">
+      Please select a state
+    </p>
   </div>
 ```
 
@@ -3022,7 +3700,7 @@ className="font-semibold"        // Font weight 600
 <div className="flex flex-col gap-8 max-w-[320px]">
     <label
       htmlFor="required-select"
-      className="text-14 font-medium text-text-primary"
+      className="typography-body-md-md font-medium text-text-primary"
     >
       State / Territory <span className="text-ui-error-color">*</span>
     </label>
@@ -3058,33 +3736,22 @@ className="font-semibold"        // Font weight 600
   </div>
 ```
 
-```tsx
-<div className="w-[320px]">
-    <Select>
-      <SelectTrigger placeholder="Select a state..." />
-      <SelectPopup>
-        {states.map((state) => (
-          <SelectOption key={state.value} value={state.value}>
-            {state.label}
-          </SelectOption>
-        ))}
-      </SelectPopup>
-    </Select>
-  </div>
-```
-
 ```tsx
 <div className="flex flex-col gap-16 max-w-[500px]">
-      <p className="text-14 text-text-muted">
+      <p className="typography-body-md-md text-text-muted">
         Select and Input share the same base styling for consistent forms
       </p>
       <div className="flex gap-12">
         <div className="flex-1">
-          <p className="block mb-8 text-12 text-text-muted">Input</p>
+          <p className="block mb-8 typography-body-sm-sm text-text-muted">
+            Input
+          </p>
           <Input placeholder="Enter text..." />
         </div>
         <div className="flex-1">
-          <p className="block mb-8 text-12 text-text-muted">Select</p>
+          <p className="block mb-8 typography-body-sm-sm text-text-muted">
+            Select
+          </p>
           <Select>
             <SelectTrigger placeholder="Select option..." />
             <SelectPopup>
@@ -3096,11 +3763,15 @@ className="font-semibold"        // Font weight 600
       </div>
       <div className="flex gap-12">
         <div className="flex-1">
-          <p className="block mb-8 text-12 text-text-muted">Input (Error)</p>
+          <p className="block mb-8 typography-body-sm-sm text-text-muted">
+            Input (Invalid)
+          </p>
           <Input error placeholder="Enter text..." />
         </div>
         <div className="flex-1">
-          <p className="block mb-8 text-12 text-text-muted">Select (Error)</p>
+          <p className="block mb-8 typography-body-sm-sm text-text-muted">
+            Select (Invalid)
+          </p>
           <Select>
             <SelectTrigger error placeholder="Select option..." />
             <SelectPopup>
@@ -3112,11 +3783,13 @@ className="font-semibold"        // Font weight 600
       </div>
       <div className="flex gap-12">
         <div className="flex-1">
-          <p className="block mb-8 text-12 text-text-muted">Input (Disabled)</p>
+          <p className="block mb-8 typography-body-sm-sm text-text-muted">
+            Input (Disabled)
+          </p>
           <Input disabled placeholder="Enter text..." />
         </div>
         <div className="flex-1">
-          <p className="block mb-8 text-12 text-text-muted">
+          <p className="block mb-8 typography-body-sm-sm text-text-muted">
             Select (Disabled)
           </p>
           <Select disabled>
@@ -3657,6 +4330,579 @@ className="font-semibold"        // Font weight 600
 ```
 
 
+### VideoDialog
+
+**Import:** `import { VideoDialog } from "@nationaldesignstudio/react";`
+
+**Category:** Other
+
+**Props:**
+
+- `trigger`: React.ReactNode (required)
+  Trigger element that opens the dialog */
+- `blur`: BlurredVideoBackdropProps["blur"]
+  Blur intensity for backdrop (default: high) */
+- `overlay`: BlurredVideoBackdropProps["overlay"]
+  Gradient overlay for backdrop (default: vignette) */
+- `backdropOpacity`: number
+  Backdrop opacity (default: 0.6) */
+- `showClose`: boolean
+  Whether to show close button (default: true) */
+- `closePosition`: "top-right" | "top-left"
+  Close button position (default: top-right) */
+  Values: `top-right`, `top-left`
+- `rounded`: VideoPlayerProps["rounded"]
+  Video player rounded corners (default: lg) */
+- `open`: boolean
+  Controlled open state */
+- `defaultOpen`: boolean
+  Default open state */
+- `onOpenChange`: (open: boolean) => void
+  Callback when open state changes */
+- `className`: string
+  Additional className for the dialog container */
+
+**Examples:**
+
+```tsx
+<VideoDialog {...args} trigger={<Button size="lg">Watch Video</Button>} />
+```
+
+```tsx
+<div className="flex flex-col gap-16 items-center">
+      <p className="text-14 text-gray-600 max-w-md text-center">
+        Click the button to open a fullscreen video modal with the blurred
+        backdrop effect. The blur video stays synchronized with the main video.
+      </p>
+      <VideoDialog
+        trigger={<Button size="lg">Watch Video</Button>}
+        cloudflare={DGA_CLOUDFLARE}
+        blur="high"
+        overlay="vignette"
+      />
+    </div>
+```
+
+```tsx
+<div className="flex flex-wrap gap-12 justify-center">
+      {(["low", "medium", "high", "extreme"] as const).map((blur) => (
+        <VideoDialog
+          key={blur}
+          trigger={
+            <Button variant="secondary" size="md">
+              blur=&quot;{blur}&quot;
+            </Button>
+          }
+          cloudflare={DGA_CLOUDFLARE}
+          blur={blur}
+          overlay="vignette"
+        />
+      ))}
+    </div>
+```
+
+```tsx
+<div className="flex flex-wrap gap-12 justify-center">
+      {(["none", "vignette", "top-bottom"] as const).map((overlay) => (
+        <VideoDialog
+          key={overlay}
+          trigger={
+            <Button variant="secondary" size="md">
+              overlay=&quot;{overlay}&quot;
+            </Button>
+          }
+          cloudflare={DGA_CLOUDFLARE}
+          blur="high"
+          overlay={overlay}
+        />
+      ))}
+    </div>
+```
+
+```tsx
+<div className="flex flex-col gap-16 items-center">
+        <p className="text-14 text-gray-600 max-w-md text-center">
+          Controlled state example. The dialog can be opened/closed
+          programmatically.
+        </p>
+        <div className="flex gap-12">
+          <Button onClick={() => setOpen(true)}>Open Dialog</Button>
+          <Button variant="secondary" onClick={() => setOpen(false)}>
+            Close Dialog (No-op when closed)
+          </Button>
+        </div>
+        <VideoDialog
+          trigger={<Button variant="secondary">Using Trigger</Button>}
+          cloudflare={DGA_CLOUDFLARE}
+          open={open}
+          onOpenChange={setOpen}
+        />
+      </div>
+```
+
+```tsx
+<div className="flex gap-12 justify-center">
+      <VideoDialog
+        trigger={
+          <Button variant="secondary" size="md">
+            Close Top-Right
+          </Button>
+        }
+        cloudflare={DGA_CLOUDFLARE}
+        closePosition="top-right"
+      />
+      <VideoDialog
+        trigger={
+          <Button variant="secondary" size="md">
+            Close Top-Left
+          </Button>
+        }
+        cloudflare={DGA_CLOUDFLARE}
+        closePosition="top-left"
+      />
+    </div>
+```
+
+```tsx
+<VideoDialog
+      trigger={<Button size="lg">Watch with Captions</Button>}
+      cloudflare={DGA_CLOUDFLARE}
+      captionsSrc="https://customer-29f0fiy60aiz1fqm.cloudflarestream.com/e978a151c0700e12277e66802746e204/captions/en"
+    />
+```
+
+```tsx
+<div className="flex flex-col gap-16 items-center">
+      <p className="text-14 text-gray-600 max-w-md text-center">
+        Extreme blur creates a very diffused, ambient background that&apos;s
+        less distracting while still maintaining visual connection to the video.
+      </p>
+      <VideoDialog
+        trigger={<Button size="lg">Extreme Blur</Button>}
+        cloudflare={DGA_CLOUDFLARE}
+        blur="extreme"
+        overlay="vignette"
+        backdropOpacity={0.5}
+      />
+    </div>
+```
+
+```tsx
+<div className="flex flex-col gap-16 items-center">
+      <p className="text-14 text-gray-600 max-w-md text-center">
+        No visible close button. Use Escape key or click outside to close.
+      </p>
+      <VideoDialog
+        trigger={<Button size="lg">Watch Video</Button>}
+        cloudflare={DGA_CLOUDFLARE}
+        showClose={false}
+      />
+    </div>
+```
+
+
+### VideoPlayer
+
+**Import:** `import { VideoPlayer } from "@nationaldesignstudio/react";`
+
+**Category:** Other
+
+**Props:**
+
+- `src`: string
+  Video source URL (HLS .m3u8 or regular video file) */
+- `cloudflare`: CloudflareConfig
+  Cloudflare Stream configuration (takes precedence over src) */
+- `poster`: string
+  Poster image URL */
+- `captionsSrc`: string
+  VTT captions URL */
+- `autoPlay`: boolean
+  Whether to autoplay (default: false) */
+- `loop`: boolean
+  Whether to loop the video (default: false) */
+- `muted`: boolean
+  Whether to mute initially (default: false) */
+- `controls`: boolean
+  Whether to show controls (default: true) */
+- `autoHideControls`: boolean
+  Whether to auto-hide controls when not interacting (default: true) */
+- `autoHideDelay`: number
+  Control auto-hide delay in ms (default: 3000) */
+- `captionsEnabled`: boolean
+  Whether captions are enabled by default (default: false) */
+- `onPlay`: () => void
+  Callback when video starts playing */
+- `onPause`: () => void
+  Callback when video pauses */
+- `onEnded`: () => void
+  Callback when video ends */
+- `onTimeUpdate`: (time: number) => void
+  Callback on time update */
+- `onError`: (error: Error) => void
+  Callback on error */
+- `videoRef`: React.RefObject<HTMLVideoElement | null>
+  Ref to the video element */
+
+**Examples:**
+
+```tsx
+<div className="w-640">
+      <VideoPlayer {...args} />
+    </div>
+```
+
+```tsx
+<div className="w-640">
+      <VideoPlayer cloudflare={DGA_CLOUDFLARE} />
+    </div>
+```
+
+```tsx
+<div className="flex flex-col gap-16">
+      <p className="text-14 text-gray-600 max-w-md">
+        VideoPlayer supports Cloudflare Stream out of the box. Provide your
+        video ID and customer code.
+      </p>
+      <div className="w-640">
+        <VideoPlayer cloudflare={DGA_CLOUDFLARE} rounded="md" />
+      </div>
+      <pre className="text-12 bg-gray-100 p-12 rounded-4 overflow-x-auto">
+        {`<VideoPlayer
+  cloudflare={{
+    videoId: "${DGA_CLOUDFLARE.videoId}",
+    customerCode: "${DGA_CLOUDFLARE.customerCode}"
+  }}
+  rounded="md"
+/>`}
+      </pre>
+    </div>
+```
+
+```tsx
+<div className="flex flex-col items-center gap-16">
+        <div className="w-640">
+          <VideoPlayer
+            cloudflare={DGA_CLOUDFLARE}
+            onPlay={() => addEvent("Video playing")}
+            onPause={() => addEvent("Video paused")}
+            onEnded={() => addEvent("Video ended")}
+          />
+        </div>
+        <div className="w-256 rounded-4 bg-gray-100 p-16">
+          <p className="mb-8 font-medium text-gray-900">Events:</p>
+          {events.length === 0 ? (
+            <p className="text-gray-500">No events yet</p>
+          ) : (
+            <ul className="space-y-4 text-14 text-gray-700">
+              {events.map((event) => (
+                <li key={event}>{event}</li>
+              ))}
+            </ul>
+          )}
+        </div>
+      </div>
+```
+
+```tsx
+<div className="flex flex-col gap-16">
+      <p className="text-14 text-gray-600 max-w-md">
+        Click the button below to open a video player in a dialog. The video
+        will autoplay when the dialog opens.
+      </p>
+      <Dialog
+        trigger={<Button>Watch Video</Button>}
+        size="full"
+        variant="minimal"
+        showClose={false}
+      >
+        <VideoPlayer cloudflare={DGA_CLOUDFLARE} autoPlay rounded="none" />
+      </Dialog>
+      <pre className="text-12 bg-gray-100 p-12 rounded-4 overflow-x-auto">
+        {`import { Dialog } from "@nds/react";
+import { VideoPlayer } from "@nds/react";
+<Dialog
+  trigger={<Button>Watch Video</Button>}
+  size="full"
+  variant="minimal"
+  showClose={false}
+>
+  <VideoPlayer
+    cloudflare={{ videoId: "...", customerCode: "..." }}
+    autoPlay
+    rounded="none"
+  />
+</Dialog>`}
+      </pre>
+    </div>
+```
+
+```tsx
+<div className="flex flex-col gap-16">
+      <p className="text-14 text-gray-600 max-w-md">
+        VideoPlayer supports VTT captions. Click the CC button in the control
+        bar to toggle captions. Captions are displayed as an overlay on the
+        video.
+      </p>
+      <div className="w-640">
+        <VideoPlayer
+          cloudflare={DGA_CLOUDFLARE}
+          captionsSrc={DGA_CAPTIONS_URL}
+          captionsEnabled={true}
+          rounded="md"
+        />
+      </div>
+      <pre className="text-12 bg-gray-100 p-12 rounded-4 overflow-x-auto">
+        {`<VideoPlayer
+  cloudflare={{
+    videoId: "${DGA_CLOUDFLARE.videoId}",
+    customerCode: "${DGA_CLOUDFLARE.customerCode}"
+  }}
+  captionsSrc="https://customer-{customerCode}.cloudflarestream.com/{videoId}/captions/en"
+  captionsEnabled={true}
+  rounded="md"
+/>`}
+      </pre>
+    </div>
+```
+
+```tsx
+<div className="flex flex-col gap-16">
+      <p className="text-14 text-gray-600 max-w-md">
+        Captions are available but disabled by default. Users can enable them by
+        clicking the CC button in the control bar.
+      </p>
+      <div className="w-640">
+        <VideoPlayer
+          cloudflare={DGA_CLOUDFLARE}
+          captionsSrc={DGA_CAPTIONS_URL}
+          captionsEnabled={false}
+          rounded="md"
+        />
+      </div>
+    </div>
+```
+
+```tsx
+<div className="flex flex-col gap-16">
+      <p className="text-14 text-gray-600 max-w-md">
+        VideoPlayer uses media-chrome for accessible, customizable controls. All
+        controls are keyboard accessible.
+      </p>
+      <div className="w-640">
+        <VideoPlayer cloudflare={DGA_CLOUDFLARE} autoHideControls={false} />
+      </div>
+      <div className="text-14 text-gray-600 max-w-md space-y-8">
+        <p>
+          <strong>Controls:</strong>
+        </p>
+        <ul className="list-disc pl-20 space-y-4">
+          <li>Play/Pause button</li>
+          <li>Time range scrubber with preview</li>
+          <li>Mute button</li>
+          <li>Volume slider</li>
+          <li>Current time / duration display</li>
+          <li>Captions toggle (when captionsSrc provided)</li>
+          <li>Fullscreen toggle</li>
+        </ul>
+      </div>
+    </div>
+```
+
+
+### VideoWithBackdrop
+
+**Import:** `import { VideoWithBackdrop } from "@nationaldesignstudio/react";`
+
+**Category:** Other
+
+**Props:**
+
+- `blur`: BlurredVideoBackdropProps["blur"]
+  Blur intensity (default: high) */
+- `overlay`: BlurredVideoBackdropProps["overlay"]
+  Gradient overlay (default: vignette) */
+- `backdropOpacity`: number
+  Backdrop opacity (default: 0.6) */
+- `maxWidth`: string
+  Max width of video player (default: 960px) */
+- `padding`: "none" | "sm" | "md" | "lg"
+  Content padding (default: md) */
+  Values: `none`, `sm`, `md`, `lg`
+- `rounded`: VideoPlayerProps["rounded"]
+  Video player rounded corners */
+- `className`: string
+  Additional className for root container */
+- `targetFps`: number
+  Target FPS for backdrop canvas (default: 30) */
+- `scale`: number
+  Canvas scale factor for backdrop (default: 0.5) */
+
+**Examples:**
+
+```tsx
+<div className="h-[600px]">
+      <VideoWithBackdrop {...args} />
+    </div>
+```
+
+```tsx
+<div className="h-[500px]">
+      <VideoWithBackdrop
+        cloudflare={DGA_CLOUDFLARE}
+        blur="high"
+        overlay="vignette"
+      />
+    </div>
+```
+
+```tsx
+<div className="flex flex-col gap-16 p-24">
+        <p className="text-14 text-gray-600 max-w-md">
+          For fullscreen video modals, use the dedicated VideoDialog component.
+          The blur video becomes the modal backdrop itself.
+        </p>
+        <VideoDialog
+          trigger={<Button size="lg">Watch Video</Button>}
+          cloudflare={DGA_CLOUDFLARE}
+          blur="high"
+          overlay="vignette"
+        />
+        <pre className="text-12 bg-gray-100 p-12 rounded-4 overflow-x-auto">
+          {`<VideoDialog
+  trigger={<Button>Watch Video</Button>}
+  cloudflare={{ videoId: "...", customerCode: "..." }}
+  blur="high"
+  overlay="vignette"
+/>`}
+        </pre>
+      </div>
+```
+
+```tsx
+<div className="h-[600px]">
+      <VideoWithBackdropParts.Root cloudflare={DGA_CLOUDFLARE} fullHeight>
+        <VideoWithBackdropParts.Backdrop
+          blur="extreme"
+          overlay="top-bottom"
+          opacity={0.5}
+        />
+        <VideoWithBackdropParts.Content fullHeight padding="lg">
+          <VideoWithBackdropParts.Video maxWidth="800px" rounded="md" />
+        </VideoWithBackdropParts.Content>
+      </VideoWithBackdropParts.Root>
+    </div>
+```
+
+```tsx
+<div className="h-[700px]">
+      <VideoWithBackdropParts.Root cloudflare={DGA_CLOUDFLARE} fullHeight>
+        <VideoWithBackdropParts.Backdrop blur="high" overlay="vignette" />
+        <VideoWithBackdropParts.Content fullHeight padding="lg">
+          <div className="flex flex-col items-center gap-24">
+            <div className="text-center">
+              <h2 className="typography-h2-lg text-white mb-8">
+                Featured Video
+              </h2>
+              <p className="typography-body-md-md text-white/70">
+                Watch our latest announcement
+              </p>
+            </div>
+            <VideoWithBackdropParts.Video maxWidth="960px" rounded="lg" />
+            <div className="flex gap-12">
+              <Button variant="secondary" size="sm">
+                Share
+              </Button>
+              <Button variant="secondary" size="sm">
+                Save for Later
+              </Button>
+            </div>
+          </div>
+        </VideoWithBackdropParts.Content>
+      </VideoWithBackdropParts.Root>
+    </div>
+```
+
+```tsx
+<div className="grid grid-cols-2 gap-4 h-screen">
+      {(["low", "medium", "high", "extreme"] as const).map((blur) => (
+        <div key={blur} className="relative">
+          <VideoWithBackdrop
+            cloudflare={DGA_CLOUDFLARE}
+            blur={blur}
+            overlay="none"
+            maxWidth="100%"
+            padding="sm"
+            rounded="md"
+          />
+          <div className="absolute top-16 left-16 z-20 bg-black/60 px-12 py-6 rounded-4">
+            <span className="text-white text-14">blur=&quot;{blur}&quot;</span>
+          </div>
+        </div>
+      ))}
+    </div>
+```
+
+```tsx
+<div className="grid grid-cols-3 gap-4 h-[400px]">
+      {(["none", "vignette", "top-bottom"] as const).map((overlay) => (
+        <div key={overlay} className="relative h-full">
+          <VideoWithBackdrop
+            cloudflare={DGA_CLOUDFLARE}
+            blur="high"
+            overlay={overlay}
+            maxWidth="100%"
+            padding="sm"
+            rounded="md"
+          />
+          <div className="absolute top-16 left-16 z-20 bg-black/60 px-12 py-6 rounded-4">
+            <span className="text-white text-14">
+              overlay=&quot;{overlay}&quot;
+            </span>
+          </div>
+        </div>
+      ))}
+    </div>
+```
+
+```tsx
+<div className="h-[700px]">
+      <VideoWithBackdropParts.Root cloudflare={DGA_CLOUDFLARE} fullHeight>
+        <VideoWithBackdropParts.Backdrop
+          blur="extreme"
+          overlay="top-bottom"
+          opacity={0.4}
+          syncEnabled={false}
+        />
+        <VideoWithBackdropParts.Content fullHeight padding="lg">
+          <div className="flex flex-col items-center justify-center text-center gap-32 max-w-4xl">
+            <div>
+              <h1 className="typography-h1-lg text-white mb-16">
+                Transform Your Digital Experience
+              </h1>
+              <p className="typography-body-lg-md text-white/80 mb-24">
+                Discover how our platform can help you build stunning,
+                accessible web applications with modern design patterns.
+              </p>
+              <div className="flex gap-16 justify-center">
+                <Button size="lg">Get Started</Button>
+                <Button variant="secondary" size="lg">
+                  Learn More
+                </Button>
+              </div>
+            </div>
+            <VideoWithBackdropParts.Video
+              maxWidth="800px"
+              rounded="lg"
+              controls
+            />
+          </div>
+        </VideoWithBackdropParts.Content>
+      </VideoWithBackdropParts.Root>
+    </div>
+```
+
+
 ## Typography
 
 ### Prose
@@ -3763,5 +5009,5 @@ className="font-semibold"        // Font weight 600
 - **Action:** Button
 - **Display:** Card, Hero, UsGovBanner
 - **Navigation:** Navbar
-- **Other:** Accordion, Background, Banner, CardGrid, DevToolbar, FaqSection, GridOverlay, Input, NdstudioFooter, PagerControl, Popover, QuoteBlock, River, Select, Tooltip, Tout, TwoColumnSection
+- **Other:** Accordion, Background, Banner, BlurredVideoBackdrop, CardGrid, DevToolbar, Dialog, FaqSection, GridOverlay, Input, NdstudioFooter, PagerControl, Popover, QuoteBlock, River, Select, Tooltip, Tout, TwoColumnSection, VideoDialog, VideoPlayer, VideoWithBackdrop
 - **Typography:** Prose