@adea-ai/ui 0.110.0 → 0.111.0

package/src/components/ui/tooltip/tooltip.tsx

@@ -1,16 +1,17 @@
 import { Tooltip as KobalteTooltip, useTooltipContext } from '@kobalte/core/tooltip'
-import type { ComponentProps } from 'solid-js'
+import type { ComponentProps, JSX } from 'solid-js'
 import {
   createContext,
   createEffect,
   createSignal,
   createUniqueId,
   onCleanup,
+  Show,
   splitProps,
   useContext,
 } from 'solid-js'
 import { isServer } from 'solid-js/web'
-import { tooltipTip } from '#lib/overlay'
+import { tooltipTip, topLayerProps } from '#lib/overlay'
 import { cn } from '#lib/utils'
 
 /**
@@ -349,13 +350,24 @@ export function TooltipTrigger(props: ComponentProps<typeof KobalteTooltip.Trigg
   )
 }
 
-export type TooltipContentProps = ComponentProps<typeof KobalteTooltip.Content>
+export type TooltipContentProps = ComponentProps<typeof KobalteTooltip.Content> & {
+  /**
+   * A leading icon, repeating the trigger's glyph inside the tip — the side
+   * rail's icon+label treatment, offered so a toolbar or rail tooltip does not
+   * have to hand-roll it. Decorative by contract: the tip is `aria-hidden`
+   * while closed and never the accessible name, so the icon must not be the
+   * only carrier of meaning. Size it by leaving the svg bare; the slot fixes
+   * it to the system's control size.
+   */
+  icon?: JSX.Element
+}
 
 export function TooltipContent(props: TooltipContentProps) {
   const interaction = useContext(TooltipInteractionContext)
   const [local, rest] = splitProps(props, [
     'class',
     'children',
+    'icon',
     'aria-hidden',
     'onEscapeKeyDown',
     'onPointerDownOutside',
@@ -380,6 +392,9 @@ export function TooltipContent(props: TooltipContentProps) {
           'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:zoom-in-95',
           'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
           'data-expanded:duration-150 data-closed:duration-100',
+          // An icon+label tip is one row that reads as a unit, so the label
+          // never wraps under the glyph.
+          { 'flex items-center gap-2 whitespace-nowrap': !!local.icon },
           local.class
         )}
         // A tooltip is never interactive: the content is plain text, and the
@@ -397,8 +412,24 @@ export function TooltipContent(props: TooltipContentProps) {
           invokeEventHandler(local.onPointerDownOutside, event)
           if (!event.defaultPrevented) interaction?.markCloseIntent()
         }}
+        // A tooltip opened from inside a modal dialog is part of that dialog's
+        // surface, so it carries the same top-layer exemption as a menu or a
+        // popover — without it the dialog's hide-outside observer aria-hides
+        // the tip while it is on screen.
+        {...topLayerProps}
         {...rest}
       >
+        <Show when={local.icon}>
+          {(icon) => (
+            <span
+              data-slot="tooltip-icon"
+              aria-hidden="true"
+              class="flex size-4 shrink-0 items-center justify-center [&_svg]:size-4"
+            >
+              {icon()}
+            </span>
+          )}
+        </Show>
         {local.children}
       </KobalteTooltip.Content>
     </KobalteTooltip.Portal>

package/src/lib/overlay.ts

@@ -10,10 +10,29 @@
  * "an overlay looks like this" a fact rather than a convention.
  */
 
-/** The panel itself: fill, hairline edge, radius, elevation. */
+import { cva, type VariantProps } from '#lib/variants'
+
+/** The panel itself: fill, hairline edge, radius, elevation. Menus, popovers
+ * and the command palette float on the elevated overlay rung (`--popover`). */
 export const overlaySurface =
   'bg-popover text-popover-foreground rounded-xl border border-border shadow-lg'
 
+/**
+ * The modal panel: the same hairline edge, radius and elevation, painted on the
+ * *neutral* theme surface instead of the elevated overlay rung.
+ *
+ * `--popover` is the catalogue's `surfaceElevated`, whose derivation amplifies
+ * the canvas hue's chroma on the elevated step. On the dark default's violet
+ * canvas that makes the dialog the most chromatic surface in the ladder —
+ * `oklch(0.2406 0.0088 300.91)`, red above green in sRGB — and on a full dialog
+ * panel that cast reads as a warm tint the canvas never has. shadcn's own
+ * convention already splits the two: a Dialog paints `bg-background`, menus and
+ * popovers paint `bg-popover`. The veil, the hairline and the elevation shadow
+ * carry the separation the lighter fill no longer provides.
+ */
+export const dialogSurface =
+  'bg-background text-foreground rounded-xl border border-border shadow-lg'
+
 /**
  * Overlay titles have one fixed typography role. Keep this small recipe shared
  * without loading the configurable Heading component into every dialog.
@@ -85,6 +104,31 @@ export const menuLabel =
 /** The rule between menu groups. */
 export const menuSeparator = 'bg-border -mx-1 my-1 h-px'
 
+/**
+ * A leading colour swatch on a menu or select row: the sanctioned way to carry
+ * a card-tone colour into a list of options. The tones are the system's accent
+ * and status roles — the vocabulary a Badge already speaks — so the colour an
+ * option shows in a menu is the colour its badge carries on a card, and a
+ * caller never passes a raw colour into a list. The dot is `aria-hidden`; the
+ * label carries the meaning, so a tone is never the only signal.
+ */
+export const menuSwatchTone = cva('size-2 shrink-0 rounded-full', {
+  variants: {
+    tone: {
+      neutral: 'bg-muted-foreground',
+      primary: 'bg-primary',
+      success: 'bg-success',
+      warning: 'bg-warning',
+      destructive: 'bg-destructive',
+      info: 'bg-info',
+    },
+  },
+  defaultVariants: { tone: 'neutral' },
+})
+
+/** The tones a menu row's swatch can take. */
+export type MenuSwatchTone = NonNullable<VariantProps<typeof menuSwatchTone>['tone']>
+
 /** Padding shared by every menu-list surface. */
 export const menuContentPadding = 'p-1'