@carbonid1/design-system 5.7.4 → 5.7.6

package/dist/Badge/Badge.js

@@ -3,10 +3,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from '../helpers/cn/cn';
 import { cva } from 'class-variance-authority';
 import { X } from 'lucide-react';
-const badgeVariants = cva('inline-flex max-w-full min-w-0 items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium whitespace-nowrap', {
+const badgeVariants = cva('inline-flex max-w-full min-w-0 items-center gap-1 rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap', {
     variants: {
         variant: {
-            default: 'bg-muted text-muted-foreground',
+            default: 'border-muted-foreground bg-muted text-foreground',
             primary: 'bg-primary-border/30 text-primary',
             success: 'bg-success/15 text-success-foreground',
             attention: 'bg-attention-muted text-attention-foreground',

package/dist/Button/Button.js

@@ -9,7 +9,7 @@ const buttonVariants = cva("group/button inline-flex shrink-0 items-center justi
         variant: {
             ghost: 'hover:bg-accent aria-expanded:bg-accent dark:hover:bg-accent/50',
             primary: 'bg-primary text-primary-foreground font-medium hover:bg-primary/90',
-            outline: 'border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',
+            outline: 'border-input-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:bg-input/30 dark:hover:bg-input/50',
             destructive: 'bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40',
             attention: 'text-attention-foreground hover:bg-attention-muted',
             subtle: 'text-muted-foreground hover:text-primary',

package/dist/Tooltip/Tooltip.d.ts

@@ -11,5 +11,6 @@ type TooltipProps = {
         'aria-label'?: string;
     }>;
 };
+export declare const VIEWPORT_MARGIN = 8;
 export declare const Tooltip: ({ label, shortcut, position, delay, maxWidth, disabled, className, children, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Tooltip/Tooltip.js

@@ -1,12 +1,22 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { computeTooltipPlacement, } from '../helpers/tooltipPlacement/tooltipPlacement';
 import { Kbd } from '../Kbd/Kbd';
-import { cloneElement, useCallback, useEffect, useRef, useState } from 'react';
+import { cloneElement, useCallback, useEffect, useLayoutEffect, useRef, useState, } from 'react';
 const DEFAULT_DELAY = 200;
+export const VIEWPORT_MARGIN = 8;
+// Must stay in sync with the mb-2 / mt-2 (0.5rem = 8px) classes below — the flip
+// math subtracts this gap, so a mismatch would mis-predict whether a side fits.
+const TRIGGER_GAP = 8;
+// Position before paint so an edge tooltip never flashes centered-then-shifted.
+// useLayoutEffect warns and no-ops during SSR, so fall back to useEffect there.
+const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
 export const Tooltip = ({ label, shortcut, position = 'top', delay = DEFAULT_DELAY, maxWidth, disabled, className, children, }) => {
     const [visible, setVisible] = useState(false);
+    const [placement, setPlacement] = useState({ side: position, offsetX: 0 });
     const timeoutRef = useRef(null);
     const wrapperRef = useRef(null);
+    const tooltipRef = useRef(null);
     const show = useCallback(() => {
         if (disabled)
             return;
@@ -52,8 +62,37 @@ export const Tooltip = ({ label, shortcut, position = 'top', delay = DEFAULT_DEL
         document.addEventListener('pointermove', handlePointerMove, { passive: true });
         return () => document.removeEventListener('pointermove', handlePointerMove);
     }, [visible, hide]);
-    const positionClasses = position === 'top' ? 'bottom-full mb-2' : 'top-full mt-2';
+    useIsomorphicLayoutEffect(() => {
+        if (!visible)
+            return;
+        const measure = () => {
+            const wrapper = wrapperRef.current;
+            const tooltip = tooltipRef.current;
+            if (!wrapper || !tooltip)
+                return;
+            const trigger = wrapper.getBoundingClientRect();
+            const box = tooltip.getBoundingClientRect();
+            const next = computeTooltipPlacement({
+                trigger,
+                tooltip: { width: box.width, height: box.height },
+                viewport: { width: window.innerWidth, height: window.innerHeight },
+                preferredSide: position,
+                margin: VIEWPORT_MARGIN,
+                gap: TRIGGER_GAP,
+            });
+            // Keep the same object when nothing moved so a show or a no-op resize
+            // doesn't trigger a redundant re-render (the common centered case is a no-op).
+            setPlacement(prev => (prev.side === next.side && prev.offsetX === next.offsetX ? prev : next));
+        };
+        measure();
+        window.addEventListener('resize', measure, { passive: true });
+        return () => window.removeEventListener('resize', measure);
+    }, [visible, position]);
+    const positionClasses = placement.side === 'top' ? 'bottom-full mb-2' : 'top-full mt-2';
     return (_jsxs("div", { ref: wrapperRef, className: `relative inline-flex${className ? ` ${className}` : ''}`, onMouseEnter: show, onMouseLeave: hide, onPointerDown: hide, onFocus: show, onBlur: hide, children: [cloneElement(children, {
                 'aria-label': children.props['aria-label'] ?? label,
-            }), visible && !disabled && (_jsxs("div", { role: "tooltip", style: maxWidth ? { maxWidth } : undefined, className: `absolute left-1/2 z-50 -translate-x-1/2 ${maxWidth ? 'w-max whitespace-normal' : 'whitespace-nowrap'} bg-foreground text-background pointer-events-none flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-xs shadow-lg ${positionClasses}`, children: [label, shortcut && (_jsx(Kbd, { keys: shortcut, size: "sm", className: "bg-background/15 border-transparent" }))] }))] }));
+            }), visible && !disabled && (_jsxs("div", { ref: tooltipRef, role: "tooltip", style: {
+                    transform: `translateX(calc(-50% + ${placement.offsetX}px))`,
+                    ...(maxWidth ? { maxWidth } : {}),
+                }, className: `absolute left-1/2 z-50 ${maxWidth ? 'w-max whitespace-normal' : 'whitespace-nowrap'} bg-foreground text-background pointer-events-none flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-xs shadow-lg ${positionClasses}`, children: [label, shortcut && (_jsx(Kbd, { keys: shortcut, size: "sm", className: "bg-background/15 border-transparent" }))] }))] }));
 };

package/dist/helpers/contrast/contrast.d.ts

@@ -0,0 +1,12 @@
+type Oklch = {
+    lightness: number;
+    chroma: number;
+    hue: number;
+};
+/**
+ * WCAG 2.x contrast ratio between two oklch colors, in the range [1, 21].
+ * Order-independent. Alpha is not modeled — pass an already-composited color if a
+ * token is translucent.
+ */
+export declare const contrastRatio: (foreground: Oklch, background: Oklch) => number;
+export type { Oklch };

package/dist/helpers/contrast/contrast.js

@@ -0,0 +1,37 @@
+const DEGREES_TO_RADIANS = Math.PI / 180;
+const clampUnit = (value) => Math.min(1, Math.max(0, value));
+/**
+ * Linear-sRGB channels for an oklch color, via Björn Ottosson's oklab→linear
+ * matrices. Channels are clamped into gamut so an out-of-sRGB color folds to its
+ * nearest representable luminance rather than producing a nonsense ratio.
+ */
+const toLinearSrgb = ({ lightness, chroma, hue }) => {
+    const hueRadians = hue * DEGREES_TO_RADIANS;
+    const a = chroma * Math.cos(hueRadians);
+    const b = chroma * Math.sin(hueRadians);
+    const longRoot = lightness + 0.3963377774 * a + 0.2158037573 * b;
+    const mediumRoot = lightness - 0.1055613458 * a - 0.0638541728 * b;
+    const shortRoot = lightness - 0.0894841775 * a - 1.291485548 * b;
+    const long = longRoot ** 3;
+    const medium = mediumRoot ** 3;
+    const short = shortRoot ** 3;
+    return [
+        clampUnit(4.0767416621 * long - 3.3077115913 * medium + 0.2309699292 * short),
+        clampUnit(-1.2684380046 * long + 2.6097574011 * medium - 0.3413193965 * short),
+        clampUnit(-0.0041960863 * long - 0.7034186147 * medium + 1.707614701 * short),
+    ];
+};
+const relativeLuminance = (color) => {
+    const [red, green, blue] = toLinearSrgb(color);
+    return 0.2126 * red + 0.7152 * green + 0.0722 * blue;
+};
+/**
+ * WCAG 2.x contrast ratio between two oklch colors, in the range [1, 21].
+ * Order-independent. Alpha is not modeled — pass an already-composited color if a
+ * token is translucent.
+ */
+export const contrastRatio = (foreground, background) => {
+    const lighter = Math.max(relativeLuminance(foreground), relativeLuminance(background));
+    const darker = Math.min(relativeLuminance(foreground), relativeLuminance(background));
+    return (lighter + 0.05) / (darker + 0.05);
+};

package/dist/helpers/tooltipPlacement/tooltipPlacement.d.ts

@@ -0,0 +1,38 @@
+type Side = 'top' | 'bottom';
+type Rect = {
+    left: number;
+    top: number;
+    bottom: number;
+    width: number;
+};
+type Size = {
+    width: number;
+    height: number;
+};
+type TooltipPlacementInput = {
+    /** Trigger (wrapper) rect, viewport-relative — the tooltip is centered on its horizontal midpoint. */
+    trigger: Rect;
+    /** Measured tooltip box, taken at its un-shifted centered position. */
+    tooltip: Size;
+    viewport: Size;
+    /** Side the caller asked for; kept unless that side lacks room. */
+    preferredSide: Side;
+    /** Minimum gap to keep between the tooltip and each viewport edge. */
+    margin: number;
+    /** Gap between the trigger and the tooltip on the chosen side. */
+    gap: number;
+};
+export type TooltipPlacement = {
+    side: Side;
+    /** Pixels to shift the centered tooltip horizontally; 0 leaves it centered. */
+    offsetX: number;
+};
+/**
+ * Decide where a centered tooltip should sit so it stays within the viewport:
+ * shift it horizontally when an edge would cross `margin`, and flip the vertical
+ * side when the preferred one lacks room. Pure — the component feeds it measured
+ * rects and applies the result. On a viewport too narrow to fit the box, the left
+ * edge wins (LTR readers lose the tail, not the start).
+ */
+export declare const computeTooltipPlacement: ({ trigger, tooltip, viewport, preferredSide, margin, gap, }: TooltipPlacementInput) => TooltipPlacement;
+export {};

package/dist/helpers/tooltipPlacement/tooltipPlacement.js

@@ -0,0 +1,26 @@
+/**
+ * Decide where a centered tooltip should sit so it stays within the viewport:
+ * shift it horizontally when an edge would cross `margin`, and flip the vertical
+ * side when the preferred one lacks room. Pure — the component feeds it measured
+ * rects and applies the result. On a viewport too narrow to fit the box, the left
+ * edge wins (LTR readers lose the tail, not the start).
+ */
+export const computeTooltipPlacement = ({ trigger, tooltip, viewport, preferredSide, margin, gap, }) => {
+    const triggerCenterX = trigger.left + trigger.width / 2;
+    const centeredLeft = triggerCenterX - tooltip.width / 2;
+    const centeredRight = centeredLeft + tooltip.width;
+    let offsetX = 0;
+    if (centeredRight > viewport.width - margin)
+        offsetX = viewport.width - margin - centeredRight;
+    if (centeredLeft + offsetX < margin)
+        offsetX = margin - centeredLeft;
+    const spaceAbove = trigger.top;
+    const spaceBelow = viewport.height - trigger.bottom;
+    const needed = tooltip.height + gap + margin;
+    let side = preferredSide;
+    if (preferredSide === 'top' && spaceAbove < needed && spaceBelow > spaceAbove)
+        side = 'bottom';
+    if (preferredSide === 'bottom' && spaceBelow < needed && spaceAbove > spaceBelow)
+        side = 'top';
+    return { side, offsetX };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbonid1/design-system",
-  "version": "5.7.4",
+  "version": "5.7.6",
   "description": "Shared React UI primitives + design tokens (themes, postcss config)",
   "repository": {
     "type": "git",

package/themes/dashboard.css

@@ -58,6 +58,7 @@
   --color-success-foreground: var(--success-foreground);
   --color-border: var(--border);
   --color-input: var(--input);
+  --color-input-border: var(--input-border);
   --color-ring: var(--ring);
   /* Font families. Override a role by setting its `--font-*-custom` variable;
    * each falls back to a system stack. */
@@ -122,7 +123,14 @@
   --destructive: oklch(0.58 0.22 27);
   --border: oklch(0.922 0 0);
   --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
+  /* Resting boundary for form controls (Button outline, inputs) — distinct from
+   * decorative --border and the --input fill. Dark enough to clear WCAG 1.4.11
+   * (3:1) against the surfaces controls sit on; the contrast test guards it. */
+  --input-border: oklch(0.62 0 0);
+  /* Neutral focus ring (border-ring + ring-ring/50 halo). Dark enough that the
+   * solid border clears WCAG 1.4.11 (3:1 non-text) against the lightest surface
+   * — the themes contrast test guards this floor. */
+  --ring: oklch(0.6 0 0);
   --highlight: oklch(0.901 0.082 85.84);
   --highlight-foreground: oklch(0.344 0.06 58.6);
   --highlight-muted: oklch(0.962 0.042 95.28);
@@ -159,6 +167,7 @@
   --destructive: oklch(0.704 0.191 22.216);
   --border: oklch(0.373 0.031 260 / 50%);
   --input: oklch(0.373 0.031 260 / 60%);
+  --input-border: oklch(0.58 0.025 262);
   --ring: oklch(0.551 0.023 264);
   --highlight: oklch(0.55 0.07 268);
   --highlight-foreground: oklch(0.95 0.02 265);

package/themes/reader.css

@@ -80,6 +80,7 @@
   --color-success-foreground: var(--success-foreground);
   --color-border: var(--border);
   --color-input: var(--input);
+  --color-input-border: var(--input-border);
   --color-ring: var(--ring);
   /* Font families. Override a role by setting its `--font-*-custom` variable;
    * each falls back to a system stack. */
@@ -147,7 +148,14 @@
   --destructive: oklch(0.58 0.22 27);
   --border: oklch(0.922 0 0);
   --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
+  /* Resting boundary for form controls (Button outline, inputs) — distinct from
+   * decorative --border and the --input fill. Dark enough to clear WCAG 1.4.11
+   * (3:1) against the surfaces controls sit on; the contrast test guards it. */
+  --input-border: oklch(0.62 0 0);
+  /* Neutral focus ring (border-ring + ring-ring/50 halo). Dark enough that the
+   * solid border clears WCAG 1.4.11 (3:1 non-text) against the lightest surface
+   * — the themes contrast test guards this floor. */
+  --ring: oklch(0.6 0 0);
   --highlight: oklch(0.901 0.082 85.84);
   --highlight-foreground: oklch(0.344 0.06 58.6);
   --highlight-muted: oklch(0.962 0.042 95.28);
@@ -189,6 +197,7 @@
   --destructive: oklch(0.704 0.191 22.216);
   --border: oklch(0.373 0.031 260 / 50%);
   --input: oklch(0.373 0.031 260 / 60%);
+  --input-border: oklch(0.58 0.025 262);
   --ring: oklch(0.551 0.023 264);
   --highlight: oklch(0.55 0.07 268);
   --highlight-foreground: oklch(0.95 0.02 265);