From 329d5b623723d2a8c406ca705ae116099e5c66bb Mon Sep 17 00:00:00 2001
From: Dan Rukas <dan.rukas@gmail.com>
Date: Tue, 22 Apr 2025 09:15:40 -0400
Subject: [PATCH] docs(components): Adds new components to ui-next
 documentation (#4974)

---
 .../src/DicomTagBrowser/DicomTagBrowser.tsx   |  10 +-
 platform/docs/src/pages/colors-and-type.tsx   |  26 +++-
 platform/docs/src/pages/components-list.tsx   |  85 ++++++++++-
 .../pages/components/AllinOneMenuShowcase.tsx | 142 ++++++++++++++++++
 .../pages/components/CinePlayerShowcase.tsx   |  37 +++++
 .../src/pages/components/ComboboxShowcase.tsx | 105 +++++++++++++
 .../src/pages/components/DialogShowcase.tsx   |  82 ++++++++++
 .../pages/components/HoverCardShowcase.tsx    |  39 +++++
 .../src/pages/components/LabelShowcase.tsx    |  27 ++++
 .../pages/components/NumericMetaShowcase.tsx  |  10 +-
 .../pages/components/PanelSectionShowcase.tsx |  52 +++++++
 .../src/pages/components/PopoverShowcase.tsx  |  43 ++++++
 .../src/pages/components/TabsShowcase.tsx     |   5 +-
 .../src/pages/components/TooltipShowcase.tsx  |  35 +++++
 platform/docs/src/pages/patterns.tsx          |   7 +-
 .../components/AllInOneMenu/DividerItem.tsx   |   2 +-
 .../src/components/Icons/Sources/Clear.tsx    |   2 +-
 17 files changed, 681 insertions(+), 28 deletions(-)
 create mode 100644 platform/docs/src/pages/components/AllinOneMenuShowcase.tsx
 create mode 100644 platform/docs/src/pages/components/CinePlayerShowcase.tsx
 create mode 100644 platform/docs/src/pages/components/ComboboxShowcase.tsx
 create mode 100644 platform/docs/src/pages/components/DialogShowcase.tsx
 create mode 100644 platform/docs/src/pages/components/HoverCardShowcase.tsx
 create mode 100644 platform/docs/src/pages/components/LabelShowcase.tsx
 create mode 100644 platform/docs/src/pages/components/PanelSectionShowcase.tsx
 create mode 100644 platform/docs/src/pages/components/PopoverShowcase.tsx
 create mode 100644 platform/docs/src/pages/components/TooltipShowcase.tsx

diff --git a/extensions/default/src/DicomTagBrowser/DicomTagBrowser.tsx b/extensions/default/src/DicomTagBrowser/DicomTagBrowser.tsx
index d69fc3a1c..f1ee6a889 100644
--- a/extensions/default/src/DicomTagBrowser/DicomTagBrowser.tsx
+++ b/extensions/default/src/DicomTagBrowser/DicomTagBrowser.tsx
@@ -128,7 +128,9 @@ const DicomTagBrowser = ({
       <div className="mb-6 flex flex-row items-start pl-1">
         <div className="flex w-full flex-row items-start gap-4">
           <div className="flex w-1/3 flex-col">
-            <span className="text-muted-foreground flex h-6 items-center text-xs">Series</span>
+            <span className="text-muted-foreground flex h-6 items-center pb-2 text-base">
+              Series
+            </span>
             <Select
               value={selectedDisplaySetInstanceUID}
               onValueChange={value => onSelectChange({ value })}
@@ -154,7 +156,7 @@ const DicomTagBrowser = ({
           </div>
           {shouldShowInstanceList && (
             <div className="mx-auto mt-0.5 flex w-1/4 flex-col">
-              <span className="text-muted-foreground flex h-6 items-center text-xs">
+              <span className="text-muted-foreground flex h-6 items-center pb-2 text-base">
                 Instance Number ({instanceNumber} of {activeDisplaySet?.images?.length})
               </span>
               <Slider
@@ -170,7 +172,7 @@ const DicomTagBrowser = ({
             </div>
           )}
           <div className="ml-auto mr-1 flex w-1/3 flex-col">
-            <span className="text-muted-foreground flex h-6 items-center text-xs">
+            <span className="text-muted-foreground flex h-6 items-center pb-2 text-base">
               Search metadata
             </span>
             <InputFilter
@@ -182,7 +184,7 @@ const DicomTagBrowser = ({
                 placeholder="Search metadata"
                 className="pl-9 pr-9"
               />
-              <InputFilter.ClearButton />
+              <InputFilter.ClearButton className="text-primary mr-0.5 p-0.5" />
             </InputFilter>
           </div>
         </div>
diff --git a/platform/docs/src/pages/colors-and-type.tsx b/platform/docs/src/pages/colors-and-type.tsx
index 8aad79e03..089d30f57 100644
--- a/platform/docs/src/pages/colors-and-type.tsx
+++ b/platform/docs/src/pages/colors-and-type.tsx
@@ -132,8 +132,9 @@ export default function ComponentShowcase() {
       description="Colors and Typography"
     >
       <div className="text-foreground min-h-screen bg-black">
-        <div className="mx-auto my-4 max-w-5xl pt-6 pb-3">
-          <div className="grid grid-cols-1 gap-5 md:grid-cols-3">
+        <div className="mx-auto my-4 max-w-5xl pt-4 pb-6">
+          {/* Navigation cards */}
+          <div className="mb-8 grid grid-cols-1 gap-5 md:grid-cols-3">
             <a
               href="/colors-and-type"
               className="focus:ring-primary block rounded-lg text-inherit no-underline hover:no-underline focus:outline-none focus:ring-2"
@@ -183,9 +184,7 @@ export default function ComponentShowcase() {
               </Card>
             </a>
           </div>
-        </div>
 
-        <div className="mx-auto my-4 max-w-5xl pt-4 pb-6">
           <h1 className="text-foreground ml-6 mb-6 text-5xl">Colors & Typography</h1>
 
           <ShowcaseRow
@@ -249,7 +248,7 @@ export default function ComponentShowcase() {
                   <span className="text-foreground text-lg">foreground</span>
                 </div>
                 <div className="flex items-center space-x-3">
-                  <div className="bg-muted-foreground border-input h-[30px] w-[30px] rounded border"></div>
+                  <div className="bg-muted-foreground h-[30px] w-[30px] rounded"></div>
                   <span className="text-foreground text-lg">muted-foreground</span>
                 </div>
               </div>
@@ -258,6 +257,23 @@ export default function ComponentShowcase() {
                 use 'muted-foreground' to create separation and readability.
               </div>
             </div>
+
+            <div className="mb-8 grid grid-cols-[28%,1fr] items-start gap-x-8">
+              <div className="space-y-2.5">
+                <div className="flex items-center space-x-3">
+                  <div className="bg-input h-[30px] w-[30px] rounded"></div>
+                  <span className="text-foreground text-lg">input</span>
+                </div>
+                <div className="flex items-center space-x-3">
+                  <div className="bg-neutral h-[30px] w-[30px] rounded"></div>
+                  <span className="text-foreground text-lg">neutral</span>
+                </div>
+              </div>
+              <div className="text-secondary-foreground flex items-center pt-1.5 text-lg">
+                Used for borders and UI elements. 'neutral' is typically used at 50% opacity for
+                elements such as scrollbars and will work over light and dark backgrounds
+              </div>
+            </div>
           </ShowcaseRow>
 
           <ShowcaseRow
diff --git a/platform/docs/src/pages/components-list.tsx b/platform/docs/src/pages/components-list.tsx
index 48ca2a0b4..efaae8a44 100644
--- a/platform/docs/src/pages/components-list.tsx
+++ b/platform/docs/src/pages/components-list.tsx
@@ -3,12 +3,25 @@ import '../css/custom.css';
 import Layout from '@theme/Layout';
 import { TooltipProvider } from '../../../ui-next/src/components/Tooltip';
 
-// Import all showcase components
+// Navigation card components
+import { Card, CardHeader, CardTitle, CardDescription } from '../../../ui-next/src/components/Card';
+import { Icons } from '../../../ui-next/src/components/Icons';
+
+/* Showcase components (alphabetical) */
+import AllinOneMenuShowcase from './components/AllinOneMenuShowcase';
 import ButtonShowcase from './components/ButtonShowcase';
 import CheckboxShowcase from './components/CheckboxShowcase';
+import CinePlayerShowcase from './components/CinePlayerShowcase';
+import ComboboxShowcase from './components/ComboboxShowcase';
 import DataRowShowcase from './components/DataRowShowcase';
+import DialogShowcase from './components/DialogShowcase';
 import DropdownMenuShowcase from './components/DropdownMenuShowcase';
+import HoverCardShowcase from './components/HoverCardShowcase';
 import InputShowcase from './components/InputShowcase';
+import LabelShowcase from './components/LabelShowcase';
+import NumericMetaShowcase from './components/NumericMetaShowcase';
+import PanelSectionShowcase from './components/PanelSectionShowcase';
+import PopoverShowcase from './components/PopoverShowcase';
 import ScrollAreaShowcase from './components/ScrollAreaShowcase';
 import SelectShowcase from './components/SelectShowcase';
 import SliderShowcase from './components/SliderShowcase';
@@ -17,7 +30,8 @@ import TabsShowcase from './components/TabsShowcase';
 import ToastShowcase from './components/ToastShowcase';
 import ToolButtonShowcase from './components/ToolButtonShowcase';
 import ToolButtonListShowcase from './components/ToolButtonListShowcase';
-import NumericMetaShowcase from './components/NumericMetaShowcase';
+import TooltipShowcase from './components/TooltipShowcase';
+
 /**
  * Components List page that displays all available UI components
  */
@@ -30,15 +44,74 @@ export default function ComponentsList() {
       <TooltipProvider>
         <div className="text-foreground min-h-screen bg-black">
           <div className="mx-auto my-4 max-w-5xl pt-4 pb-6">
-            <div className="ml-6 mb-6 text-base">
-              <h1 className="text-foreground mb-3 text-5xl">Components</h1>
+            {/* Navigation cards */}
+            <div className="mb-8 grid grid-cols-1 gap-5 md:grid-cols-3">
+              <a
+                href="/colors-and-type"
+                className="focus:ring-primary block rounded-lg text-inherit no-underline hover:no-underline focus:outline-none focus:ring-2"
+              >
+                <Card className="hover:bg-primary/30 w-full transition-colors">
+                  <CardHeader>
+                    <CardTitle className="text-foreground text-xl">
+                      <Icons.ColorChange className="h-12 w-12" />
+                      Colors & Typography
+                    </CardTitle>
+                    <CardDescription className="text-lg">
+                      Color Palette and Typography Guidelines
+                    </CardDescription>
+                  </CardHeader>
+                </Card>
+              </a>
+              <a
+                href="/components-list"
+                className="focus:ring-primary block rounded-lg text-inherit no-underline hover:no-underline focus:outline-none focus:ring-2"
+              >
+                <Card className="hover:bg-primary/30 w-full transition-colors">
+                  <CardHeader>
+                    <CardTitle className="text-foreground text-xl">
+                      <Icons.ColorChange className="h-12 w-12" />
+                      Components
+                    </CardTitle>
+                    <CardDescription className="text-lg">
+                      Essential UI Components with Variants
+                    </CardDescription>
+                  </CardHeader>
+                </Card>
+              </a>
+              <a
+                href="/patterns"
+                className="focus:ring-primary block rounded-lg text-inherit no-underline hover:no-underline focus:outline-none focus:ring-2"
+              >
+                <Card className="hover:bg-primary/30 w-full transition-colors">
+                  <CardHeader>
+                    <CardTitle className="text-foreground text-xl">
+                      <Icons.ColorChange className="h-12 w-12" />
+                      Patterns
+                    </CardTitle>
+                    <CardDescription className="text-lg">
+                      Component-Based Layout Examples
+                    </CardDescription>
+                  </CardHeader>
+                </Card>
+              </a>
             </div>
-            <TabsShowcase />
+
+            <h1 className="text-foreground ml-6 mb-6 text-5xl">Components</h1>
+
+            <AllinOneMenuShowcase />
             <ButtonShowcase />
             <CheckboxShowcase />
+            <CinePlayerShowcase />
+            <ComboboxShowcase />
             <DataRowShowcase />
+            <DialogShowcase />
             <DropdownMenuShowcase />
+            <HoverCardShowcase />
             <InputShowcase />
+            <LabelShowcase />
+            <NumericMetaShowcase />
+            <PanelSectionShowcase />
+            <PopoverShowcase />
             <ScrollAreaShowcase />
             <SelectShowcase />
             <SliderShowcase />
@@ -47,7 +120,7 @@ export default function ComponentsList() {
             <ToastShowcase />
             <ToolButtonShowcase />
             <ToolButtonListShowcase />
-            <NumericMetaShowcase />
+            <TooltipShowcase />
           </div>
         </div>
       </TooltipProvider>
diff --git a/platform/docs/src/pages/components/AllinOneMenuShowcase.tsx b/platform/docs/src/pages/components/AllinOneMenuShowcase.tsx
new file mode 100644
index 000000000..f479b5d9d
--- /dev/null
+++ b/platform/docs/src/pages/components/AllinOneMenuShowcase.tsx
@@ -0,0 +1,142 @@
+import React from 'react';
+import AllInOneMenu, {
+  IconMenu,
+  SubMenu,
+  ItemPanel,
+  Item,
+  DividerItem,
+  HorizontalDirection,
+  VerticalDirection,
+} from '../../../../ui-next/src/components/AllInOneMenu';
+import { Switch } from '../../../../ui-next/src/components/Switch';
+import ShowcaseRow from './ShowcaseRow';
+
+/**
+ * Pure‑UI mock of the in‑app Window/Level menu.
+ * Clickable, but all actions are inert.
+ */
+export default function AllinOneMenuShowcase() {
+  /* Helpers to build common static items so the JSX stays concise */
+  const renderColorLUTItems = () =>
+    [
+      'Grayscale',
+      'X Ray',
+      'HSV',
+      'Hot Iron',
+      'Red Hot',
+      'S PET',
+      'Perfusion',
+      'Rainbow',
+      'SUV',
+      'GE 256',
+      'GE',
+      'Siemens',
+    ].map(name => <Item key={name} label={name} />);
+
+  const renderWindowPresetItems = () =>
+    [
+      { desc: 'Soft tissue', wl: '400 / 40' },
+      { desc: 'Lung', wl: '1500 / -600' },
+      { desc: 'Liver', wl: '150 / 90' },
+      { desc: 'Bone', wl: '2500 / 480' },
+      { desc: 'Brain', wl: '80 / 40' },
+    ].map(p => (
+      <Item
+        key={p.desc}
+        label={p.desc}
+        secondaryLabel={p.wl}
+      />
+    ));
+
+  return (
+    <ShowcaseRow
+      title="All In One Menu"
+      description="A structured, consolidated menu designed to reduce visual clutter, helping users keep their focus on the image. It supports various UI components—including Switches, Numeric Inputs, Tabs, and Sliders—for detailed settings, as well as text-based lists for actionable items."
+      code={`<IconMenu icon="viewport-window-level" menuStyle={{ width: 212, maxHeight: 500 }}>
+  <ItemPanel label="Display">
+    <Item label="Display Color bar" rightIcon={<Switch disabled />} />
+    <DividerItem />
+    <SubMenu itemLabel="Color LUT" itemIcon="icon-color-lut">
+      <ItemPanel label="Color LUTs">
+        <Item label="Preview in viewport" rightIcon={<Switch disabled />} />
+        <DividerItem />
+        <Item label="Grayscale" />
+        <Item label="X Ray" />
+        <Item label="HSV" />
+        <Item label="Hot Iron" />
+        <Item label="Red Hot" />
+        <Item label="S PET" />
+        <Item label="Perfusion" />
+        <Item label="Rainbow" />
+        <Item label="SUV" />
+        <Item label="GE 256" />
+        <Item label="GE" />
+        <Item label="Siemens" />
+      </ItemPanel>
+    </SubMenu>
+    <SubMenu itemLabel="Window Presets" itemIcon="viewport-window-level">
+      <ItemPanel label="CT Presets">
+        <Item label="Soft tissue" secondaryLabel="400 / 40" />
+        <Item label="Lung" secondaryLabel="1500 / ‑600" />
+        <Item label="Liver" secondaryLabel="150 / 90" />
+        <Item label="Bone" secondaryLabel="2500 / 480" />
+        <Item label="Brain" secondaryLabel="80 / 40" />
+      </ItemPanel>
+    </SubMenu>
+  </ItemPanel>
+</IconMenu>`}
+    >
+      <div className="border-input/70 relative flex h-12 items-center rounded border bg-black px-4">
+        <IconMenu
+          icon="viewport-window-level"
+          iconClassName="text-xl text-highlight hover:bg-primary/30 cursor-pointer rounded"
+          horizontalDirection={HorizontalDirection.LeftToRight}
+          verticalDirection={VerticalDirection.TopToBottom}
+          menuStyle={{ width: 212, maxHeight: 500 }}
+        >
+          <ItemPanel label="Display">
+            <Item
+              label="Display Color bar"
+              rightIcon={
+                <Switch
+                  checked={false}
+                  disabled
+                  className="pointer-events-none"
+                />
+              }
+              useIconSpace={false}
+            />
+            <DividerItem />
+            <SubMenu itemLabel="Color LUT" itemIcon="icon-color-lut">
+              <ItemPanel
+                label="Color LUTs"
+                maxHeight="calc(100vh - 250px)"
+                className="flex flex-col"
+              >
+                <Item
+                  label="Preview in viewport"
+                  rightIcon={
+                    <Switch
+                      checked={false}
+                      disabled
+                      className="pointer-events-none"
+                    />
+                  }
+                />
+                <DividerItem />
+                {renderColorLUTItems()}
+              </ItemPanel>
+            </SubMenu>
+            <SubMenu itemLabel="Window Presets" itemIcon="viewport-window-level">
+              <ItemPanel label="CT Presets">{renderWindowPresetItems()}</ItemPanel>
+            </SubMenu>
+          </ItemPanel>
+        </IconMenu>
+
+        <span className="text-muted-foreground ml-3 text-sm">
+          Click the icon to explore an example
+        </span>
+      </div>
+    </ShowcaseRow>
+  );
+}
\ No newline at end of file
diff --git a/platform/docs/src/pages/components/CinePlayerShowcase.tsx b/platform/docs/src/pages/components/CinePlayerShowcase.tsx
new file mode 100644
index 000000000..dc07be265
--- /dev/null
+++ b/platform/docs/src/pages/components/CinePlayerShowcase.tsx
@@ -0,0 +1,37 @@
+import React, { useState } from 'react';
+import CinePlayer from '../../../../ui-next/src/components/CinePlayer/CinePlayer';
+import ShowcaseRow from './ShowcaseRow';
+
+/**
+ * CinePlayerShowcase displays a playable/pausable cine player with FPS control.
+ */
+export default function CinePlayerShowcase() {
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [fps, setFps] = useState(24);
+
+  return (
+    <ShowcaseRow
+      title="Cine Player"
+      description="Play, pause, scrub through dynamic image series and adjust FPS."
+      code={`
+<CinePlayer
+  className="w-[300px]"
+  isPlaying={isPlaying}
+  frameRate={fps}
+  onPlayPauseChange={setIsPlaying}
+  onFrameRateChange={setFps}
+  onClose={() => console.log('close clicked')}
+/>
+      `}
+    >
+      <CinePlayer
+        className="w-[300px]"
+        isPlaying={isPlaying}
+        frameRate={fps}
+        onPlayPauseChange={setIsPlaying}
+        onFrameRateChange={setFps}
+        onClose={() => console.log('close clicked')}
+      />
+    </ShowcaseRow>
+  );
+}
diff --git a/platform/docs/src/pages/components/ComboboxShowcase.tsx b/platform/docs/src/pages/components/ComboboxShowcase.tsx
new file mode 100644
index 000000000..812d9131c
--- /dev/null
+++ b/platform/docs/src/pages/components/ComboboxShowcase.tsx
@@ -0,0 +1,105 @@
+import React from 'react';
+import { Combobox } from '../../../../ui-next/src/components/Combobox/Combobox';
+import ShowcaseRow from './ShowcaseRow';
+
+/**
+ * ComboboxShowcase demonstrates the searchable Combobox component with a
+ * comprehensive “Modality” list.
+ */
+export default function ComboboxShowcase() {
+  const modalities = [
+    'AR',
+    'ASMT',
+    'AU',
+    'BDUS',
+    'BI',
+    'BMD',
+    'CR',
+    'CT',
+    'CTPROTOCOL',
+    'DG',
+    'DOC',
+    'DX',
+    'ECG',
+    'EPS',
+    'ES',
+    'FID',
+    'GM',
+    'HC',
+    'HD',
+    'IO',
+    'IOL',
+    'IVOCT',
+    'IVUS',
+    'KER',
+    'KO',
+    'LEN',
+    'LS',
+    'MG',
+    'MR',
+    'M3D',
+    'NM',
+    'OAM',
+    'OCT',
+    'OP',
+    'OPM',
+    'OPT',
+    'OPTBSV',
+    'OPTENF',
+    'OPV',
+    'OSS',
+    'OT',
+    'PLAN',
+    'PR',
+    'PT',
+    'PX',
+    'REG',
+    'RESP',
+    'RF',
+    'RG',
+    'RTDOSE',
+    'RTIMAGE',
+    'RTINTENT',
+    'RTPLAN',
+    'RTRAD',
+    'RTRECORD',
+    'RTSEGANN',
+    'RTSTRUCT',
+    'RWV',
+    'SEG',
+    'SM',
+    'SMR',
+    'SR',
+    'SRF',
+    'STAIN',
+    'TEXTUREMAP',
+    'TG',
+    'US',
+    'VA',
+    'XA',
+    'XC',
+  ].map(m => ({ value: m, label: m }));
+
+  return (
+    <ShowcaseRow
+      title="Combobox"
+      description="Searchable dropdown built with Command + Popover primitives."
+      code={`
+const modalities = [
+  'AR','ASMT','AU','BDUS','BI','BMD','CR','CT','CTPROTOCOL','DG','DOC','DX','ECG','EPS','ES','FID',
+  'GM','HC','HD','IO','IOL','IVOCT','IVUS','KER','KO','LEN','LS','MG','MR','M3D','NM','OAM','OCT',
+  'OP','OPM','OPT','OPTBSV','OPTENF','OPV','OSS','OT','PLAN','PR','PT','PX','REG','RESP','RF','RG',
+  'RTDOSE','RTIMAGE','RTINTENT','RTPLAN','RTRAD','RTRECORD','RTSEGANN','RTSTRUCT','RWV','SEG','SM',
+  'SMR','SR','SRF','STAIN','TEXTUREMAP','TG','US','VA','XA','XC',
+].map(m => ({ value: m, label: m }));
+
+<Combobox data={modalities} placeholder="Modality" />
+      `}
+    >
+      <Combobox
+        data={modalities}
+        placeholder="Modality"
+      />
+    </ShowcaseRow>
+  );
+}
diff --git a/platform/docs/src/pages/components/DialogShowcase.tsx b/platform/docs/src/pages/components/DialogShowcase.tsx
new file mode 100644
index 000000000..cb5d29b95
--- /dev/null
+++ b/platform/docs/src/pages/components/DialogShowcase.tsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+  DialogClose,
+} from '../../../../ui-next/src/components/Dialog/Dialog';
+import { Button } from '../../../../ui-next/src/components/Button';
+import ShowcaseRow from './ShowcaseRow';
+
+/**
+ * DialogShowcase demonstrates a simple Radix‑based dialog.
+ */
+export default function DialogShowcase() {
+  return (
+    <ShowcaseRow
+      title="Dialog"
+      description="Modal dialog with header, content, and footer actions."
+      code={`
+<Dialog>
+  <DialogTrigger asChild>
+    <Button variant="default">Open Dialog</Button>
+  </DialogTrigger>
+  <DialogContent>
+    <DialogHeader>
+      <DialogTitle>Example Dialog</DialogTitle>
+    </DialogHeader>
+    <DialogDescription>
+      This is a short message inside the dialog.
+    </DialogDescription>
+    <DialogFooter>
+      <DialogClose asChild>
+        <Button variant="secondary" className="min-w-[60px]">Cancel</Button>
+      </DialogClose>
+      <DialogClose asChild>
+        <Button variant="default" className="min-w-[60px]">OK</Button>
+      </DialogClose>
+    </DialogFooter>
+  </DialogContent>
+</Dialog>
+      `}
+    >
+      <Dialog>
+        <DialogTrigger asChild>
+          <Button variant="default">Open Dialog</Button>
+        </DialogTrigger>
+
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Example Dialog</DialogTitle>
+          </DialogHeader>
+
+          <DialogDescription>This is a short message inside the dialog.</DialogDescription>
+
+          <DialogFooter>
+            <DialogClose asChild>
+              <Button
+                variant="secondary"
+                className="min-w-[60px]"
+              >
+                Cancel
+              </Button>
+            </DialogClose>
+
+            <DialogClose asChild>
+              <Button
+                variant="default"
+                className="min-w-[60px]"
+              >
+                OK
+              </Button>
+            </DialogClose>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </ShowcaseRow>
+  );
+}
diff --git a/platform/docs/src/pages/components/HoverCardShowcase.tsx b/platform/docs/src/pages/components/HoverCardShowcase.tsx
new file mode 100644
index 000000000..8dbf713f2
--- /dev/null
+++ b/platform/docs/src/pages/components/HoverCardShowcase.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import {
+  HoverCard,
+  HoverCardTrigger,
+  HoverCardContent,
+} from '../../../../ui-next/src/components/HoverCard/HoverCard';
+import { Button } from '../../../../ui-next/src/components/Button';
+import ShowcaseRow from './ShowcaseRow';
+
+/**
+ * HoverCardShowcase demonstrates a Hover Card that appears on pointer hover.
+ */
+export default function HoverCardShowcase() {
+  return (
+    <ShowcaseRow
+      title="Hover Card"
+      description="Lightweight, non‑modal surface that appears on hover or focus."
+      code={`
+<HoverCard>
+  <HoverCardTrigger asChild>
+    <Button variant="link">Hover me</Button>
+  </HoverCardTrigger>
+  <HoverCardContent>
+    <p className="text-sm">Hello there! I'm a hover card.</p>
+  </HoverCardContent>
+</HoverCard>
+      `}
+    >
+      <HoverCard>
+        <HoverCardTrigger asChild>
+          <Button variant="link">Hover me</Button>
+        </HoverCardTrigger>
+        <HoverCardContent>
+          <p className="text-sm">Hello there! I'm a hover card.</p>
+        </HoverCardContent>
+      </HoverCard>
+    </ShowcaseRow>
+  );
+}
\ No newline at end of file
diff --git a/platform/docs/src/pages/components/LabelShowcase.tsx b/platform/docs/src/pages/components/LabelShowcase.tsx
new file mode 100644
index 000000000..7b764b943
--- /dev/null
+++ b/platform/docs/src/pages/components/LabelShowcase.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { Label } from '../../../../ui-next/src/components/Label/Label';
+import { Switch } from '../../../../ui-next/src/components/Switch';
+import ShowcaseRow from './ShowcaseRow';
+
+/**
+ * LabelShowcase pairs a Label with a Switch inline.
+ */
+export default function LabelShowcase() {
+  return (
+    <ShowcaseRow
+      title="Label"
+      description="Labels clarify the purpose of controls and improve accessibility."
+      code={`
+<Switch defaultChecked id="preview-switch" />
+<Label htmlFor="preview-switch" className="ml-2">
+  Preview edits before creating
+</Label>
+      `}
+    >
+      <div className="flex items-center gap-2">
+        <Switch defaultChecked id="preview-switch" />
+        <Label htmlFor="preview-switch">Preview edits before creating</Label>
+      </div>
+    </ShowcaseRow>
+  );
+}
\ No newline at end of file
diff --git a/platform/docs/src/pages/components/NumericMetaShowcase.tsx b/platform/docs/src/pages/components/NumericMetaShowcase.tsx
index 3ee19cf42..ba2bf180c 100644
--- a/platform/docs/src/pages/components/NumericMetaShowcase.tsx
+++ b/platform/docs/src/pages/components/NumericMetaShowcase.tsx
@@ -45,7 +45,7 @@ export default function NumericShowcase() {
   <Numeric.NumberInput className="w-32 text-center" />
 </Numeric.Container>`}
       >
-        <div className="bg-popover flex w-[300px] flex-col space-y-4 rounded p-4">
+        <div className="bg-muted flex w-[300px] flex-col space-y-4 rounded p-4">
           <Numeric.Container
             mode="number"
             min={0}
@@ -136,7 +136,7 @@ const [dimensionGroupNumber, setDimensionGroupNumber] = useState(1);
   </div>
 </Numeric.Container>`}
       >
-        <div className="bg-popover flex w-[300px] flex-col space-y-4 rounded p-4">
+        <div className="bg-muted flex w-[300px] flex-col space-y-4 rounded p-4">
           <Numeric.Container
             mode="stepper"
             value={dimensionGroupNumber}
@@ -229,7 +229,7 @@ const [controlledValue, setControlledValue] = useState(0);
   <Numeric.SingleRange showNumberInput />
 </Numeric.Container>`}
       >
-        <div className="bg-popover flex w-[300px] flex-col space-y-4 rounded p-4">
+        <div className="bg-muted flex w-[300px] flex-col space-y-4 rounded p-4">
           <Numeric.Container
             mode="singleRange"
             min={0}
@@ -314,7 +314,7 @@ const [controlledValues, setControlledValues] = useState<[number, number]>([0, 1
   <Numeric.DoubleRange />
 </Numeric.Container>`}
       >
-        <div className="bg-popover flex w-[300px] flex-col space-y-4 rounded p-4">
+        <div className="bg-muted flex w-[300px] flex-col space-y-4 rounded p-4">
           <Numeric.Container
             mode="doubleRange"
             min={0}
@@ -407,7 +407,7 @@ const [controlledValues, setControlledValues] = useState<[number, number]>([0, 1
   <Numeric.DoubleRange showNumberInputs />
 </Numeric.Container>`}
       >
-        <div className="bg-popover flex w-[300px] flex-col space-y-4 rounded p-4">
+        <div className="bg-muted flex w-[300px] flex-col space-y-4 rounded p-4">
           <Numeric.Container
             mode="number"
             min={0}
diff --git a/platform/docs/src/pages/components/PanelSectionShowcase.tsx b/platform/docs/src/pages/components/PanelSectionShowcase.tsx
new file mode 100644
index 000000000..97ec0bae7
--- /dev/null
+++ b/platform/docs/src/pages/components/PanelSectionShowcase.tsx
@@ -0,0 +1,52 @@
+// docs/src/pages/components/PanelSectionShowcase.tsx
+import React from 'react';
+import { PanelSection } from '../../../../ui-next/src/components/PanelSection/PanelSection';
+import { Button } from '../../../../ui-next/src/components/Button';
+import ShowcaseRow from './ShowcaseRow';
+
+/**
+ * PanelSectionShowcase displays an expandable/collapsible panel section.
+ */
+export default function PanelSectionShowcase() {
+  return (
+    <ShowcaseRow
+      title="Panel Section"
+      description="Collapsible panels for grouping controls or metadata inside side‑panels."
+      code={`
+<PanelSection defaultOpen>
+  <PanelSection.Header>Series Information</PanelSection.Header>
+  <PanelSection.Content>
+    <div className="p-2 space-y-1 text-sm text-muted-foreground">
+      <div>Images: 120</div>
+      <div>Modality: MR</div>
+      <div>Body Part: Brain</div>
+      <Button variant="link" size="xs">Load another series</Button>
+    </div>
+  </PanelSection.Content>
+</PanelSection>
+      `}
+    >
+      <PanelSection
+        defaultOpen
+        className="bg-muted w-[280px]"
+      >
+        <PanelSection.Header className="bg-popover">Series Information</PanelSection.Header>
+        <PanelSection.Content>
+          <div className="text-muted-foreground space-y-1 p-2 text-sm">
+            <div className="pl-2">
+              <div>Images: 120</div>
+              <div>Modality: MR</div>
+              <div>Body Part: Brain</div>
+            </div>
+            <Button
+              variant="ghost"
+              size="sm"
+            >
+              Load more information
+            </Button>
+          </div>
+        </PanelSection.Content>
+      </PanelSection>
+    </ShowcaseRow>
+  );
+}
diff --git a/platform/docs/src/pages/components/PopoverShowcase.tsx b/platform/docs/src/pages/components/PopoverShowcase.tsx
new file mode 100644
index 000000000..eb86c0901
--- /dev/null
+++ b/platform/docs/src/pages/components/PopoverShowcase.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+} from '../../../../ui-next/src/components/Popover/Popover';
+import { Button } from '../../../../ui-next/src/components/Button';
+import ShowcaseRow from './ShowcaseRow';
+
+/**
+ * PopoverShowcase presents a simple Popover that appears after clicking a button.
+ */
+export default function PopoverShowcase() {
+  return (
+    <ShowcaseRow
+      title="Popover"
+      description="Transient panel that appears over content—great for small forms, extra details, or actions."
+      code={`
+<Popover>
+  <PopoverTrigger asChild>
+    <Button variant="default">Open Popover</Button>
+  </PopoverTrigger>
+  <PopoverContent className="w-60">
+    <p className="text-sm">
+      Hello! I’m a Popover. Click outside or press Esc to close me.
+    </p>
+  </PopoverContent>
+</Popover>
+      `}
+    >
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button variant="default">Open Popover</Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-60">
+          <p className="text-sm">
+            Hello! I’m a Popover. Click outside or press&nbsp;Esc to close me.
+          </p>
+        </PopoverContent>
+      </Popover>
+    </ShowcaseRow>
+  );
+}
\ No newline at end of file
diff --git a/platform/docs/src/pages/components/TabsShowcase.tsx b/platform/docs/src/pages/components/TabsShowcase.tsx
index e88750339..82b775c3e 100644
--- a/platform/docs/src/pages/components/TabsShowcase.tsx
+++ b/platform/docs/src/pages/components/TabsShowcase.tsx
@@ -12,7 +12,7 @@ export default function TabsShowcase() {
       title="Tabs"
       description="Tabs (or segmented controls) can be used to provide navigation options or allow users to switch between multiple options (e.g., tool settings) "
       code={`
-<Tabs className="w-[400px]" onValueChange={newValue => console.log(newValue)}>
+<Tabs defaultValue="circle" className="w-[400px]" onValueChange={newValue => console.log(newValue)}>
   <TabsList>
     <TabsTrigger value="circle">Circle</TabsTrigger>
     <Separator orientation="vertical" />
@@ -24,6 +24,7 @@ export default function TabsShowcase() {
       `}
     >
       <Tabs
+        defaultValue="circle"
         className="w-[400px]"
         onValueChange={newValue => console.log(newValue)}
       >
@@ -37,4 +38,4 @@ export default function TabsShowcase() {
       </Tabs>
     </ShowcaseRow>
   );
-}
+}
\ No newline at end of file
diff --git a/platform/docs/src/pages/components/TooltipShowcase.tsx b/platform/docs/src/pages/components/TooltipShowcase.tsx
new file mode 100644
index 000000000..c9ad13651
--- /dev/null
+++ b/platform/docs/src/pages/components/TooltipShowcase.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { Tooltip, TooltipTrigger, TooltipContent } from '../../../../ui-next/src/components/Tooltip';
+import { Button } from '../../../../ui-next/src/components/Button';
+import ShowcaseRow from './ShowcaseRow';
+
+/**
+ * TooltipShowcase component displays Tooltip variants and examples
+ */
+export default function TooltipShowcase() {
+  return (
+    <ShowcaseRow
+      title="Tooltip"
+      description="Tooltips reveal helper text when users hover, focus, or tap an element."
+      code={`
+<Tooltip>
+  <TooltipTrigger asChild>
+    <Button variant="ghost" size="icon">?</Button>
+  </TooltipTrigger>
+  <TooltipContent>
+    Tooltip content
+  </TooltipContent>
+</Tooltip>
+      `}
+    >
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="ghost" size="icon">?</Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          Tooltip content
+        </TooltipContent>
+      </Tooltip>
+    </ShowcaseRow>
+  );
+}
\ No newline at end of file
diff --git a/platform/docs/src/pages/patterns.tsx b/platform/docs/src/pages/patterns.tsx
index 309995764..12d5f2836 100644
--- a/platform/docs/src/pages/patterns.tsx
+++ b/platform/docs/src/pages/patterns.tsx
@@ -27,8 +27,9 @@ export default function ComponentShowcase() {
       description="Patterns and example layouts"
     >
       <div className="text-foreground min-h-screen bg-black">
-        <div className="mx-auto my-4 max-w-5xl pt-6 pb-3">
-          <div className="grid grid-cols-1 gap-5 md:grid-cols-3">
+        <div className="mx-auto my-4 max-w-5xl pt-4 pb-6">
+          {/* Navigation cards */}
+          <div className="mb-8 grid grid-cols-1 gap-5 md:grid-cols-3">
             <a
               href="/colors-and-type"
               className="focus:ring-primary block rounded-lg text-inherit no-underline hover:no-underline focus:outline-none focus:ring-2"
@@ -78,9 +79,7 @@ export default function ComponentShowcase() {
               </Card>
             </a>
           </div>
-        </div>
 
-        <div className="mx-auto my-4 max-w-5xl pt-4 pb-6">
           <h1 className="text-foreground ml-6 mb-6 text-5xl">Patterns</h1>
 
           <ShowcaseRow
diff --git a/platform/ui-next/src/components/AllInOneMenu/DividerItem.tsx b/platform/ui-next/src/components/AllInOneMenu/DividerItem.tsx
index 056d68e9c..375510217 100644
--- a/platform/ui-next/src/components/AllInOneMenu/DividerItem.tsx
+++ b/platform/ui-next/src/components/AllInOneMenu/DividerItem.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 const DividerItem = () => {
   return (
     <div className="flex h-3.5 shrink-0 items-center px-2">
-      <div className="bg-primary-dark h-[2px] w-full"></div>
+      <div className="bg-background h-[2px] w-full"></div>
     </div>
   );
 };
diff --git a/platform/ui-next/src/components/Icons/Sources/Clear.tsx b/platform/ui-next/src/components/Icons/Sources/Clear.tsx
index bceffb901..fea7ec869 100644
--- a/platform/ui-next/src/components/Icons/Sources/Clear.tsx
+++ b/platform/ui-next/src/components/Icons/Sources/Clear.tsx
@@ -14,7 +14,7 @@ export const Clear = (props: IconProps) => (
       fillRule="evenodd"
     >
       <circle
-        fill="#0944B3"
+        fill="currentColor"
         cx="9.5"
         cy="9.5"
         r="9.5"