@webjsdev/ui 0.3.17 → 0.5.0

package/packages/registry/components/popover.ts

@@ -18,10 +18,10 @@
  *   PopoverTitle          → popoverTitleClass()
  *   PopoverDescription    → popoverDescriptionClass()
  *
- * The `positionFloating` helper is also exported (used by the Tier-2
- * tooltip / hover-card / dropdown-menu components for imperative
- * positioning where CSS Anchor Positioning isn't enough). Migrated from
- * the prior <ui-popover> custom element set.
+ * Measured placement, where CSS Anchor Positioning isn't enough, is
+ * `positionFloating` in `floating.ts` (the Tier-2 tooltip / hover-card /
+ * dropdown-menu components use it). It lives apart so these class helpers stay
+ * free of browser code. Migrated from the prior <ui-popover> custom element set.
  *
  * Design tokens used: --popover, --popover-foreground, --border.
  *
@@ -101,7 +101,9 @@
  * override the margin via inline style on the popover element.
  */
 export type PopoverSideOffset = 0 | 2 | 4 | 6 | 8 | 12 | 16 | 20 | 24;
-export type PopoverAlignOffset = 0 | 2 | 4 | 6 | 8 | 12 | 16 | 20 | 24;
+type PopoverAlignStep = 0 | 2 | 4 | 6 | 8 | 12 | 16 | 20 | 24;
+/** An align offset in pixels, either way: a negative one pulls back past the aligned edge. */
+export type PopoverAlignOffset = PopoverAlignStep | -2 | -4 | -6 | -8 | -12 | -16 | -20 | -24;
 
 export interface PopoverContentOptions {
   /** Which side of the trigger the popover appears on. Default 'bottom'. */
@@ -112,8 +114,9 @@ export interface PopoverContentOptions {
   sideOffset?: PopoverSideOffset;
   /**
    * Pixels offset along the align axis. Positive values push away from
-   * the aligned edge toward the opposite edge. No-op for align='center'.
-   * Default 0 (matches shadcn).
+   * the aligned edge toward the opposite edge, negative ones the other way
+   * (shadcn's `alignOffset={-4}`). No-op for align='center'. Default 0
+   * (matches shadcn).
    */
   alignOffset?: PopoverAlignOffset;
 }
@@ -142,7 +145,7 @@ const POSITION_AREA_CLASS: Record<string, string> = {
 // side: top/bottom sides translate X; left/right sides translate Y.
 // All 36 (4 axis-direction combos × 9 offset values) appear literally so
 // Tailwind 4 generates each class.
-const ALIGN_OFFSET_CLASS: Record<string, Record<PopoverAlignOffset, string>> = {
+const ALIGN_OFFSET_CLASS: Record<string, Record<PopoverAlignStep, string>> = {
   'horizontal-start': {
     0: 'translate-x-[0px]',  2: 'translate-x-[2px]',  4: 'translate-x-[4px]',
     6: 'translate-x-[6px]',  8: 'translate-x-[8px]',  12: 'translate-x-[12px]',
@@ -200,6 +203,13 @@ const MARGIN_OFFSET_CLASS: Record<PopoverSide, Record<PopoverSideOffset, string>
  * `m-0` clears the UA `margin: auto` so anchor positioning isn't
  * fighting auto-centering, then a single directional margin sets the
  * sideOffset gap.
+ *
+ * `not-open:hidden` keeps a CLOSED panel hidden. The browser hides one
+ * through its own `[popover]:not(:popover-open) { display: none }`, but
+ * that is a user-agent rule, which any author `display` beats, and most
+ * styles give the panel `flex` (shadcn's Radix content is never in the
+ * document while closed, so its styles never had to care). Every
+ * `popover` panel in the kit carries the same guard.
  */
 export function popoverContentClass(opts: PopoverContentOptions = {}): string {
   const side = opts.side ?? 'bottom';
@@ -210,95 +220,31 @@ export function popoverContentClass(opts: PopoverContentOptions = {}): string {
   let alignClass = '';
   if (align !== 'center' && alignOffset !== 0) {
     const axis = side === 'top' || side === 'bottom' ? 'horizontal' : 'vertical';
-    alignClass = ALIGN_OFFSET_CLASS[`${axis}-${align}`][alignOffset];
+    // A negative offset from one edge is the same shift as a positive one
+    // from the other, so it reads the other edge's table.
+    const edge = alignOffset < 0 ? (align === 'start' ? 'end' : 'start') : align;
+    alignClass = ALIGN_OFFSET_CLASS[`${axis}-${edge}`][Math.abs(alignOffset) as PopoverAlignStep] ?? '';
   }
   return [
-    'w-72 m-0 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden',
+    'cn-popover-content z-50 w-72 origin-(--radix-popover-content-transform-origin) outline-hidden not-open:hidden',
     POSITION_AREA_CLASS[`${side}-${align}`],
     MARGIN_OFFSET_CLASS[side][sideOffset],
     alignClass,
   ].filter(Boolean).join(' ');
 }
 
-export const popoverHeaderClass = (): string => 'flex flex-col gap-1 text-sm';
+export const popoverHeaderClass = (): string => 'cn-popover-header';
 export const popoverTitleClass = (): string => 'font-medium';
 export const popoverDescriptionClass = (): string => 'text-muted-foreground';
 
 // --------------------------------------------------------------------------
-// Imperative positioning helper. Still exported for the tier-2 tooltip /
-// hover-card / dropdown-menu components, which need exact placement before
-// CSS anchor positioning is universally available.
+// Placement. positionFloating lives in floating.ts (import it from there),
+// since it reads the window and the elements' boxes. This module is the class
+// helpers alone, so a page importing them reaches no browser code and the
+// framework can drop it from the browser. It does not re-export
+// positionFloating either: a re-export is an import, and the page would reach
+// that code through it all the same.
 // --------------------------------------------------------------------------
 
 export type PopoverSide = 'top' | 'bottom' | 'left' | 'right';
 export type PopoverAlign = 'start' | 'center' | 'end';
-
-export function positionFloating(
-  trigger: HTMLElement,
-  content: HTMLElement,
-  opts: {
-    side?: PopoverSide;
-    align?: PopoverAlign;
-    sideOffset?: number;
-    alignOffset?: number;
-  } = {},
-): void {
-  const side = opts.side ?? 'bottom';
-  const align = opts.align ?? 'center';
-  const sideOffset = opts.sideOffset ?? 4;
-  const alignOffset = opts.alignOffset ?? 0;
-  const tr = trigger.getBoundingClientRect();
-  const cr = content.getBoundingClientRect();
-  const vw = window.innerWidth;
-  const vh = window.innerHeight;
-
-  let top = 0;
-  let left = 0;
-  let actualSide = side;
-
-  const fitsBottom = tr.bottom + sideOffset + cr.height <= vh;
-  const fitsTop = tr.top - sideOffset - cr.height >= 0;
-  const fitsRight = tr.right + sideOffset + cr.width <= vw;
-  const fitsLeft = tr.left - sideOffset - cr.width >= 0;
-
-  if (side === 'bottom' && !fitsBottom && fitsTop) actualSide = 'top';
-  else if (side === 'top' && !fitsTop && fitsBottom) actualSide = 'bottom';
-  else if (side === 'right' && !fitsRight && fitsLeft) actualSide = 'left';
-  else if (side === 'left' && !fitsLeft && fitsRight) actualSide = 'right';
-
-  if (actualSide === 'bottom') top = tr.bottom + sideOffset;
-  else if (actualSide === 'top') top = tr.top - sideOffset - cr.height;
-  else if (actualSide === 'right' || actualSide === 'left') {
-    if (align === 'start') top = tr.top;
-    else if (align === 'end') top = tr.bottom - cr.height;
-    else top = tr.top + (tr.height - cr.height) / 2;
-  }
-
-  if (actualSide === 'right') left = tr.right + sideOffset;
-  else if (actualSide === 'left') left = tr.left - sideOffset - cr.width;
-  else {
-    if (align === 'start') left = tr.left;
-    else if (align === 'end') left = tr.right - cr.width;
-    else left = tr.left + (tr.width - cr.width) / 2;
-  }
-
-  // alignOffset shifts the popover along the align axis. For align='start',
-  // positive shifts AWAY from the start edge; align='end' reverses; center
-  // is a no-op. Axis is perpendicular to the chosen side.
-  if (align !== 'center' && alignOffset !== 0) {
-    const dir = align === 'start' ? 1 : -1;
-    if (actualSide === 'top' || actualSide === 'bottom') {
-      left += dir * alignOffset;
-    } else {
-      top += dir * alignOffset;
-    }
-  }
-
-  left = Math.max(8, Math.min(left, vw - cr.width - 8));
-  top = Math.max(8, Math.min(top, vh - cr.height - 8));
-
-  content.style.top = `${top}px`;
-  content.style.left = `${left}px`;
-  content.setAttribute('data-side', actualSide);
-  content.setAttribute('data-align', align);
-}

package/packages/registry/components/progress.ts

@@ -40,9 +40,13 @@
 export const progressClass = (): string =>
   [
     // Reset native styling. WebKit / Blink draw a default 3D bar that we
-    // strip via appearance-none + classic clear of border/bg.
-    'block h-2 w-full overflow-hidden rounded-full',
-    'appearance-none border-0 bg-primary/20 [&::-webkit-progress-bar]:bg-primary/20',
+    // strip via appearance-none + classic clear of the border. The TRACK
+    // colour is the style's (`.cn-progress` sets the element's background),
+    // so the native track pseudo-element is transparent and shows it, and
+    // overflow-hidden clips the fill to the style's corners. A colour here
+    // would sit in the utilities layer and beat every style.
+    'cn-progress w-full',
+    'appearance-none overflow-hidden border-0 [&::-webkit-progress-bar]:bg-transparent',
     // Bar fill: blink/webkit + firefox both via Tailwind 4's arbitrary-
     // pseudo variant. Smooth animation on width change matches shadcn.
     "[&::-webkit-progress-value]:bg-primary [&::-webkit-progress-value]:transition-all",