@byline/ui 2.6.0 → 2.7.0

package/dist/components/shimmer/shimmer.d.ts

@@ -2,11 +2,23 @@ import type React from 'react';
 interface ShimmerProps {
     className?: string;
     width?: string | number;
+    /**
+     * Height of the bar. For the single-bar variants (`rectangular`,
+     * `circular`, and single-line `text`) this sizes the bar itself. For the
+     * multi-line text variant (`variant="text"` with `lines > 1`) it sizes the
+     * container that holds the lines — use `lineHeight` to size each line.
+     */
     height?: string | number;
+    /**
+     * Height of each line in the multi-line text variant (`variant="text"`
+     * with `lines > 1`). Falls back to the `.text` class height (1rem) when
+     * omitted. Ignored by the single-bar variants — use `height` there.
+     */
+    lineHeight?: string | number;
     borderRadius?: string;
     variant?: 'text' | 'rectangular' | 'circular';
     lines?: number;
     children?: React.ReactNode;
 }
-export declare function Shimmer({ className, width, height, borderRadius, variant, lines, children, ...other }: ShimmerProps): React.JSX.Element;
+export declare function Shimmer({ className, width, height, lineHeight, borderRadius, variant, lines, children, ...other }: ShimmerProps): React.JSX.Element;
 export {};

package/dist/components/shimmer/shimmer.js

@@ -1,12 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import classnames from "classnames";
 import shimmer_module from "./shimmer.module.js";
-function Shimmer({ className, width = '100%', height = '1rem', borderRadius, variant = 'rectangular', lines = 1, children, ...other }) {
-    const shimmerStyle = {
-        width: 'number' == typeof width ? `${width}px` : width,
-        height: 'number' == typeof height ? `${height}px` : height,
-        borderRadius: borderRadius
-    };
+const toCssSize = (value)=>'number' == typeof value ? `${value}px` : value;
+function Shimmer({ className, width = '100%', height, lineHeight, borderRadius, variant = 'rectangular', lines = 1, children, ...other }) {
     const getVariantClass = ()=>{
         switch(variant){
             case 'text':
@@ -17,20 +13,33 @@ function Shimmer({ className, width = '100%', height = '1rem', borderRadius, var
                 return shimmer_module.rectangular;
         }
     };
-    if ('text' === variant && lines > 1) return /*#__PURE__*/ jsx("div", {
-        className: classnames(shimmer_module.shimmerContainer, className),
-        ...other,
-        children: Array.from({
-            length: lines
-        }, (_, index)=>/*#__PURE__*/ jsx("div", {
-                className: classnames(shimmer_module.shimmer, shimmer_module.text),
-                style: {
-                    ...shimmerStyle,
-                    width: index === lines - 1 ? '75%' : '100%',
-                    marginBottom: index === lines - 1 ? 0 : '0.5rem'
-                }
-            }, `shimmer-line-${index}`))
-    });
+    if ('text' === variant && lines > 1) {
+        const resolvedLineHeight = toCssSize(lineHeight);
+        return /*#__PURE__*/ jsx("div", {
+            className: classnames(shimmer_module.shimmerContainer, className),
+            style: {
+                width: toCssSize(width),
+                height: toCssSize(height)
+            },
+            ...other,
+            children: Array.from({
+                length: lines
+            }, (_, index)=>/*#__PURE__*/ jsx("div", {
+                    className: classnames(shimmer_module.shimmer, shimmer_module.text),
+                    style: {
+                        width: index === lines - 1 ? '75%' : '100%',
+                        height: resolvedLineHeight,
+                        borderRadius,
+                        marginBottom: index === lines - 1 ? 0 : '0.5rem'
+                    }
+                }, `shimmer-line-${index}`))
+        });
+    }
+    const shimmerStyle = {
+        width: toCssSize(width),
+        height: toCssSize(height) ?? '1rem',
+        borderRadius
+    };
     return /*#__PURE__*/ jsx("div", {
         className: classnames(shimmer_module.shimmer, getVariantClass(), className),
         style: shimmerStyle,

package/dist/components/shimmer/shimmer_module.css

@@ -2,8 +2,8 @@
 
 @layer byline-components {
   :is(.shimmer-hQj5gn, .byline-shimmer) {
-    background-color: #f0f0f0;
-    background-image: linear-gradient(90deg, #0000, #fff9, #0000);
+    background-color: var(--surface-shimmer);
+    background-image: linear-gradient(90deg, #0000, #ffffffb3, #0000);
     background-size: 200% 100%;
     animation: 1.5s infinite shimmer-hQj5gn;
     position: relative;
@@ -11,13 +11,13 @@
   }
 
   :is(:is(.dark, [data-theme="dark"]) .shimmer-hQj5gn, :is(.dark, [data-theme="dark"]) .byline-shimmer) {
-    background-color: #141414;
-    background-image: linear-gradient(90deg, #0000, #ffffff03, #0000);
+    background-image: linear-gradient(90deg, #0000, #ffffff0a, #0000);
   }
 
   :is(.shimmerContainer-YqBAXa, .byline-shimmer-container) {
     flex-direction: column;
     display: flex;
+    overflow: hidden;
   }
 
   :is(.rectangular-qx6oTl, .byline-shimmer-rectangular) {

package/dist/styles/styles.css

@@ -1314,6 +1314,7 @@
     --surface-subtle: var(--canvas-50);
     --surface-subtle-hover: var(--canvas-100);
     --surface-subtle-active: var(--canvas-200);
+    --surface-shimmer: var(--canvas-100);
     --surface-panel-scrollbar: var(--gray-50);
     --surface-panel-scrollbar-thumb: var(--primary-100);
   }
@@ -1336,6 +1337,7 @@
     --surface-subtle: var(--canvas-800);
     --surface-subtle-hover: var(--canvas-700);
     --surface-subtle-active: var(--canvas-600);
+    --surface-shimmer: oklch(from var(--canvas-base) calc(l * .45) c h);
     --surface-panel-scrollbar: var(--canvas-700);
     --surface-panel-scrollbar-thumb: var(--primary-400);
   }
@@ -1358,6 +1360,7 @@
     --surface-subtle: var(--canvas-50);
     --surface-subtle-hover: var(--canvas-100);
     --surface-subtle-active: var(--canvas-200);
+    --surface-shimmer: var(--canvas-100);
     --surface-panel-scrollbar: var(--gray-50);
     --surface-panel-scrollbar-thumb: var(--primary-100);
   }

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "type": "module",
   "license": "MPL-2.0",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "engines": {
     "node": ">=20.9.0"
   },
@@ -62,7 +62,7 @@
     "npm-run-all": "^4.1.5",
     "react-day-picker": "^10.0.1",
     "zod": "^4.4.3",
-    "@byline/core": "2.6.0"
+    "@byline/core": "2.7.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/components/shimmer/shimmer.module.css

@@ -15,8 +15,8 @@
   :global(.byline-shimmer) {
     position: relative;
     overflow: hidden;
-    background-color: #f0f0f0;
-    background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
+    background-color: var(--surface-shimmer);
+    background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
     background-size: 200% 100%;
     animation: shimmer 1.5s infinite;
   }
@@ -25,8 +25,9 @@
   :global([data-theme="dark"]) {
     .shimmer,
     :global(.byline-shimmer) {
-      background-color: #141414;
-      background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.01), transparent);
+      /* base colour comes from --surface-shimmer; only the white sheen is
+         toned down here so it doesn't glare against the dark bar */
+      background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
     }
   }
 
@@ -34,6 +35,9 @@
   :global(.byline-shimmer-container) {
     display: flex;
     flex-direction: column;
+    /* When a container `height` is set, crop overflowing lines cleanly
+       rather than letting them spill past the skeleton's bounds. */
+    overflow: hidden;
   }
 
   .rectangular,

package/src/components/shimmer/shimmer.tsx

@@ -7,29 +7,39 @@ import styles from './shimmer.module.css'
 interface ShimmerProps {
   className?: string
   width?: string | number
+  /**
+   * Height of the bar. For the single-bar variants (`rectangular`,
+   * `circular`, and single-line `text`) this sizes the bar itself. For the
+   * multi-line text variant (`variant="text"` with `lines > 1`) it sizes the
+   * container that holds the lines — use `lineHeight` to size each line.
+   */
   height?: string | number
+  /**
+   * Height of each line in the multi-line text variant (`variant="text"`
+   * with `lines > 1`). Falls back to the `.text` class height (1rem) when
+   * omitted. Ignored by the single-bar variants — use `height` there.
+   */
+  lineHeight?: string | number
   borderRadius?: string
   variant?: 'text' | 'rectangular' | 'circular'
   lines?: number
   children?: React.ReactNode
 }
 
+const toCssSize = (value: string | number | undefined): string | undefined =>
+  typeof value === 'number' ? `${value}px` : value
+
 export function Shimmer({
   className,
   width = '100%',
-  height = '1rem',
+  height,
+  lineHeight,
   borderRadius,
   variant = 'rectangular',
   lines = 1,
   children,
   ...other
 }: ShimmerProps): React.JSX.Element {
-  const shimmerStyle = {
-    width: typeof width === 'number' ? `${width}px` : width,
-    height: typeof height === 'number' ? `${height}px` : height,
-    borderRadius: borderRadius,
-  }
-
   const getVariantClass = () => {
     switch (variant) {
       case 'text':
@@ -42,15 +52,24 @@ export function Shimmer({
   }
 
   if (variant === 'text' && lines > 1) {
+    // `height` sizes the container; each line is sized by `lineHeight`
+    // (undefined falls through to the `.text` class height). `height` is
+    // deliberately not spread onto the lines so it can't distort them.
+    const resolvedLineHeight = toCssSize(lineHeight)
     return (
-      <div className={cx(styles.shimmerContainer, className)} {...other}>
+      <div
+        className={cx(styles.shimmerContainer, className)}
+        style={{ width: toCssSize(width), height: toCssSize(height) }}
+        {...other}
+      >
         {Array.from({ length: lines }, (_, index) => (
           <div
             key={`shimmer-line-${index}`}
             className={cx(styles.shimmer, styles.text)}
             style={{
-              ...shimmerStyle,
               width: index === lines - 1 ? '75%' : '100%',
+              height: resolvedLineHeight,
+              borderRadius,
               marginBottom: index === lines - 1 ? 0 : '0.5rem',
             }}
           />
@@ -59,6 +78,12 @@ export function Shimmer({
     )
   }
 
+  const shimmerStyle = {
+    width: toCssSize(width),
+    height: toCssSize(height) ?? '1rem',
+    borderRadius,
+  }
+
   return (
     <div
       className={cx(styles.shimmer, getVariantClass(), className)}

package/src/styles/functional/surfaces.css

@@ -39,12 +39,16 @@
     --surface-subtle-hover: var(--canvas-100);
     --surface-subtle-active: var(--canvas-200);
 
+    /* Shimmer / skeleton placeholder bar — sits a step darker than the
+       panel so loading lines read clearly on a light surface. */
+    --surface-shimmer: var(--canvas-100);
+
     /* Panel scrollers */
     --surface-panel-scrollbar: var(--gray-50);
     --surface-panel-scrollbar-thumb: var(--primary-100);
   }
 
-  /* 🌙 Dark via `.dark` class or [data-theme="dark"] attribute. 
+  /* 🌙 Dark via `.dark` class or [data-theme="dark"] attribute.
    * We rely on the consuming application to detect a user's 
    * preferred color scheme - either by header or cookie, and to set 
    * a root html class accordingly (for now), which unfortunately means
@@ -83,6 +87,11 @@
     --surface-subtle-hover: var(--canvas-700);
     --surface-subtle-active: var(--canvas-600);
 
+    /* Shimmer / skeleton placeholder bar — lifted just above the panel so
+       loading lines are visible without glaring on a dark surface. Sits
+       between canvas-800 (panel) and canvas-700 (hover). */
+    --surface-shimmer: oklch(from var(--canvas-base) calc(l * 0.45) c h);
+
     /* Panel scrollers */
     --surface-panel-scrollbar: var(--canvas-700);
     --surface-panel-scrollbar-thumb: var(--primary-400);
@@ -125,6 +134,9 @@
     --surface-subtle-hover: var(--canvas-100);
     --surface-subtle-active: var(--canvas-200);
 
+    /* Shimmer / skeleton placeholder bar */
+    --surface-shimmer: var(--canvas-100);
+
     /* Panel scrollers */
     --surface-panel-scrollbar: var(--gray-50);
     --surface-panel-scrollbar-thumb: var(--primary-100);