atlas-react-kit 0.10.0 → 0.11.1

package/dist/tooltip.d.ts

@@ -1,8 +1,9 @@
 import * as React from "react";
 import { Tooltip as TooltipPrimitive } from "radix-ui";
 /**
- * Shares open delay across tooltips. `Tooltip` adds one per instance, so a
- * provider at the app root is optional; add it to tune `delayDuration`.
+ * Shares open delay across tooltips. `Tooltip` adds one when none is above
+ * it, so a provider at the app root is optional; add it to tune
+ * `delayDuration`.
  */
 declare function TooltipProvider({ delayDuration, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>): React.JSX.Element;
 /**
@@ -11,5 +12,8 @@ declare function TooltipProvider({ delayDuration, ...props }: React.ComponentPro
  */
 declare function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>): React.JSX.Element;
 declare function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>): React.JSX.Element;
-declare function TooltipContent({ className, sideOffset, children, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content>): React.JSX.Element;
+declare function TooltipContent({ className, arrowClassName, sideOffset, children, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content> & {
+    /** Classes for the arrow, e.g. its fill when `className` recolors the tip. */
+    arrowClassName?: string;
+}): React.JSX.Element;
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/tooltip.js

@@ -2,25 +2,36 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Tooltip as TooltipPrimitive } from "radix-ui";
+import { overlaySideSlide } from "./internal/overlay-styles.js";
 import { cn } from "./utils.js";
+/** True inside a TooltipProvider, so `Tooltip` does not add its own. */
+const HasTooltipProvider = React.createContext(false);
 /**
- * Shares open delay across tooltips. `Tooltip` adds one per instance, so a
- * provider at the app root is optional; add it to tune `delayDuration`.
+ * Shares open delay across tooltips. `Tooltip` adds one when none is above
+ * it, so a provider at the app root is optional; add it to tune
+ * `delayDuration`.
  */
 function TooltipProvider({ delayDuration = 0, ...props }) {
-    return (_jsx(TooltipPrimitive.Provider, { "data-slot": "tooltip-provider", delayDuration: delayDuration, ...props }));
+    return (_jsx(HasTooltipProvider.Provider, { value: true, children: _jsx(TooltipPrimitive.Provider, { "data-slot": "tooltip-provider", delayDuration: delayDuration, ...props }) }));
 }
 /**
  * Short label for an icon button or truncated text. Opens on hover and
  * keyboard focus; put essential information in visible text instead.
  */
 function Tooltip({ ...props }) {
-    return (_jsx(TooltipProvider, { children: _jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) }));
+    const root = _jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props });
+    // A nested provider would override the app's delayDuration.
+    if (React.useContext(HasTooltipProvider))
+        return root;
+    return _jsx(TooltipProvider, { children: root });
 }
 function TooltipTrigger({ ...props }) {
     return _jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
 }
-function TooltipContent({ className, sideOffset = 4, children, ...props }) {
-    return (_jsx(TooltipPrimitive.Portal, { children: _jsxs(TooltipPrimitive.Content, { "data-slot": "tooltip-content", sideOffset: sideOffset, className: cn("z-50 w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) rounded-none bg-foreground px-3 py-1.5 text-xs text-balance text-background duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-[state=instant-open]:animate-in data-[state=instant-open]:fade-in-0", className), ...props, children: [children, _jsx(TooltipPrimitive.Arrow, { className: "fill-foreground" })] }) }));
+function TooltipContent({ className, arrowClassName, sideOffset = 4, children, ...props }) {
+    return (_jsx(TooltipPrimitive.Portal, { children: _jsxs(TooltipPrimitive.Content, { "data-slot": "tooltip-content", sideOffset: sideOffset, className: cn(overlaySideSlide, 
+            // Radix tooltips open as "delayed-open" or "instant-open", which
+            // the shared data-open fade does not match.
+            "z-50 w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) rounded-none bg-foreground px-3 py-1.5 text-xs text-balance text-background duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-[state=instant-open]:animate-in data-[state=instant-open]:fade-in-0", className), ...props, children: [children, _jsx(TooltipPrimitive.Arrow, { "data-slot": "tooltip-arrow", className: cn("fill-foreground", arrowClassName) })] }) }));
 }
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "atlas-react-kit",
-  "version": "0.10.0",
+  "version": "0.11.1",
   "description": "Shared React components and Tailwind theme for Atlas",
   "type": "module",
   "license": "MIT",

package/theme.css

@@ -166,11 +166,7 @@
   --border: oklch(1 0 0 / 10%);
   --input: oklch(0.52 0 0);
   --ring: oklch(0.75 0.14 293);
-  --chart-1: oklch(0.87 0 0);
-  --chart-2: oklch(0.556 0 0);
-  --chart-3: oklch(0.439 0 0);
-  --chart-4: oklch(0.371 0 0);
-  --chart-5: oklch(0.269 0 0);
+  /* --chart-1..5 are the same in both themes; :root sets them. */
   --sidebar: oklch(0.205 0 0);
   --sidebar-foreground: oklch(0.985 0 0);
   --sidebar-primary: oklch(0.606 0.25 292.717);
@@ -195,6 +191,22 @@
   html {
     @apply font-sans;
   }
+  /*
+   * Reduced motion: overlays, accordions, spinners and skeletons stop moving.
+   * Durations go near zero rather than none so animationend still fires and
+   * Radix can unmount closing overlays. `!important` in this early layer
+   * beats the utility classes that set the animations.
+   */
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    ::before,
+    ::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
 }
 
 /*
@@ -218,15 +230,19 @@
   }
 
   /*
-   * Horizontal scroll shadows: edge fades stay pinned (`scroll`) while
-   * matching covers ride with the content (`local`), so a clipped column
-   * like LICENSE is visible as overflow instead of looking truncated.
+   * Horizontal scroll shadows for tables and tab rows: edge fades stay
+   * pinned (`scroll`) while matching covers ride with the content (`local`),
+   * so a clipped column or label is visible as overflow instead of looking
+   * truncated. `--scroll-fade` is the cover color; `--scroll-fill` is the
+   * fifth layer, the fill behind the content (transparent for tables; the
+   * muted list for tabs, whose list stays transparent so the fades show).
    */
-  [data-slot="table-container"] {
-    --table-scroll-fade: var(--background);
+  [data-slot="table-container"],
+  [data-slot="tabs-scroller"] {
+    --scroll-fill: transparent;
     background:
-      linear-gradient(to right, var(--table-scroll-fade) 40%, transparent),
-      linear-gradient(to left, var(--table-scroll-fade) 40%, transparent),
+      linear-gradient(to right, var(--scroll-fade) 40%, transparent),
+      linear-gradient(to left, var(--scroll-fade) 40%, transparent),
       linear-gradient(
         to right,
         color-mix(in oklch, var(--foreground) 16%, transparent),
@@ -236,19 +252,27 @@
         to left,
         color-mix(in oklch, var(--foreground) 16%, transparent),
         transparent 80%
-      );
+      ),
+      var(--scroll-fill);
     background-repeat: no-repeat;
     background-size:
       1.5rem 100%,
       1.5rem 100%,
       0.75rem 100%,
-      0.75rem 100%;
+      0.75rem 100%,
+      100% 100%;
     background-position:
       left center,
       right center,
       left center,
-      right center;
-    background-attachment: local, local, scroll, scroll;
+      right center,
+      center;
+    background-attachment: local, local, scroll, scroll, scroll;
+  }
+
+  [data-slot="table-container"] {
+    --table-scroll-fade: var(--background);
+    --scroll-fade: var(--table-scroll-fade);
   }
 
   /* Covers match the card face so the fade does not flash the page background. */
@@ -256,45 +280,14 @@
     --table-scroll-fade: var(--card);
   }
 
-  /*
-   * Tab row overflow: same pinned-shadow / local-cover trick as tables.
-   * Covers match the muted list so a clipped label reads as overflow.
-   * The fifth layer is the list fill — the list itself stays transparent
-   * so the fades show through. Scrollbars stay hidden; the fade is the cue.
-   */
+  /* Tab rows hide their scrollbar; the fade is the cue. */
   [data-slot="tabs-scroller"] {
     --tabs-scroll-fade: var(--muted);
+    --scroll-fade: var(--tabs-scroll-fade);
+    --scroll-fill: var(--tabs-scroll-fade);
     scrollbar-width: none;
     -ms-overflow-style: none;
     scroll-padding-inline: 1rem;
-    background:
-      linear-gradient(to right, var(--tabs-scroll-fade) 40%, transparent),
-      linear-gradient(to left, var(--tabs-scroll-fade) 40%, transparent),
-      linear-gradient(
-        to right,
-        color-mix(in oklch, var(--foreground) 16%, transparent),
-        transparent 80%
-      ),
-      linear-gradient(
-        to left,
-        color-mix(in oklch, var(--foreground) 16%, transparent),
-        transparent 80%
-      ),
-      var(--tabs-scroll-fade);
-    background-repeat: no-repeat;
-    background-size:
-      1.5rem 100%,
-      1.5rem 100%,
-      0.75rem 100%,
-      0.75rem 100%,
-      100% 100%;
-    background-position:
-      left center,
-      right center,
-      left center,
-      right center,
-      center;
-    background-attachment: local, local, scroll, scroll, scroll;
   }
 
   [data-slot="tabs-scroller"]::-webkit-scrollbar {