@dxos/react-ui 0.8.4-main.3eb6e50203 → 0.8.4-main.3fbcb4aa9b

package/src/components/Image/Image.tsx

@@ -0,0 +1,246 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { type SyntheticEvent, useCallback, useRef, useState } from 'react';
+
+import { type ThemedClassName } from '@dxos/react-ui';
+import { mx } from '@dxos/ui-theme';
+
+const cache = new Map<string, string>();
+
+export type ImageProps = ThemedClassName<
+  {
+    src: string;
+    alt?: string;
+    fit?: 'contain' | 'cover';
+    crossOrigin?: 'anonymous' | 'use-credentials' | '';
+  } & ColorOptions
+>;
+
+export const Image = ({
+  classNames,
+  src,
+  alt = '',
+  fit = 'contain',
+  crossOrigin = 'anonymous',
+  sampleSize = 64,
+  contrast = 0.9,
+}: ImageProps) => {
+  const [crossOriginState, setCrossOriginState] = useState<ImageProps['crossOrigin']>(crossOrigin);
+  const [dominantColor, setDominantColor] = useState<string | undefined>(undefined);
+  const [imageLoaded, setImageLoaded] = useState<boolean>(false);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  // CORS not supported by server.
+  const handleImageError = (): void => {
+    setCrossOriginState(undefined);
+  };
+
+  const handleImageLoad = useCallback(
+    ({ target }: SyntheticEvent<HTMLImageElement>): void => {
+      const rgb = cache.get(src);
+      if (rgb) {
+        setDominantColor(rgb);
+        setImageLoaded(true);
+        return;
+      }
+
+      const img = target as HTMLImageElement;
+      if (!canvasRef.current) {
+        return;
+      }
+
+      try {
+        const color = extractDominantColor(canvasRef.current, img, { sampleSize, contrast });
+        if (color) {
+          const rgb = `rgb(${color[0]}, ${color[1]}, ${color[2]})`;
+          cache.set(src, rgb);
+          setDominantColor(rgb);
+        }
+      } catch {
+        setCrossOriginState(undefined);
+      }
+
+      setImageLoaded(true);
+    },
+    [sampleSize, contrast, src],
+  );
+
+  return (
+    <div
+      // `isolate` (`isolation: isolate`) creates a new stacking context so
+      // the inner <img>'s `z-10` stays scoped to this wrapper. Without it
+      // the z-10 leaks into the parent's stacking context and elevates the
+      // image above any pseudo-element rings (e.g. Focus.Item's
+      // `dx-ring-pseudo` `::after`) painted on ancestors — most visibly,
+      // the focus ring on a Card containing a Card.Poster.
+      className={mx(
+        `relative flex w-full justify-center overflow-hidden transition-all duration-700 isolate`,
+        classNames,
+      )}
+      style={{
+        backgroundColor: dominantColor,
+      }}
+    >
+      {/* Hidden canvas for color extraction. */}
+      <canvas ref={canvasRef} style={{ display: 'none' }} aria-hidden='true' />
+
+      {/* Background gradient overlay for smooth transition. */}
+      <div
+        className='absolute inset-0 pointer-events-none'
+        style={{
+          background: dominantColor
+            ? `radial-gradient(circle at center, transparent 30%, ${dominantColor} 100%)`
+            : undefined,
+          transition: 'opacity 0.7s ease-in-out',
+          opacity: 0.5,
+        }}
+      />
+
+      <img
+        src={src}
+        alt={alt}
+        crossOrigin={crossOriginState}
+        onError={handleImageError}
+        onLoad={handleImageLoad}
+        className={mx(
+          'z-10 transition-opacity duration-500',
+          fit === 'cover' ? 'w-full h-full object-cover' : 'object-contain',
+        )}
+        style={{
+          opacity: imageLoaded ? 1 : 0,
+        }}
+      />
+    </div>
+  );
+};
+
+type ColorOptions = {
+  sampleSize?: number;
+  contrast?: number;
+};
+
+/**
+ * Get dominant color from image (esp. from corners).
+ */
+const extractDominantColor = (
+  canvas: HTMLCanvasElement,
+  img: HTMLImageElement,
+  { sampleSize = 64, contrast = 0.95 }: ColorOptions,
+): [number, number, number] | null => {
+  const ctx = canvas.getContext('2d');
+  if (!ctx) {
+    return null;
+  }
+
+  // Draw the image scaled down.
+  canvas.width = sampleSize;
+  canvas.height = sampleSize;
+  ctx.drawImage(img, 0, 0, sampleSize, sampleSize);
+
+  // Get image data.
+  const imageData = ctx.getImageData(0, 0, sampleSize, sampleSize);
+  const pixels = imageData.data;
+
+  // Check for transparent background.
+  if (isTransparent(pixels, sampleSize)) {
+    return null;
+  }
+
+  let r = 0;
+  let g = 0;
+  let b = 0;
+  let totalWeight = 0;
+
+  // Define corner sampling areas (e.g., 25% of each dimension from each corner).
+  const cornerSize = Math.floor(sampleSize * 0.125);
+
+  // Sample only pixels in corner areas.
+  for (let y = 0; y < sampleSize; y++) {
+    for (let x = 0; x < sampleSize; x++) {
+      // Check if pixel is in any corner area.
+      const isInTopLeft = x < cornerSize && y < cornerSize;
+      const isInTopRight = x >= sampleSize - cornerSize && y < cornerSize;
+      const isInBottomLeft = x < cornerSize && y >= sampleSize - cornerSize;
+      const isInBottomRight = x >= sampleSize - cornerSize && y >= sampleSize - cornerSize;
+      if (!isInTopLeft && !isInTopRight && !isInBottomLeft && !isInBottomRight) {
+        continue; // Skip pixels not in corner areas.
+      }
+
+      const i = (y * sampleSize + x) * 4;
+      const red = pixels[i];
+      const green = pixels[i + 1];
+      const blue = pixels[i + 2];
+      const alpha = pixels[i + 3];
+
+      // Skip transparent pixels.
+      if (alpha === 0) {
+        continue;
+      }
+
+      // Calculate saturation to weight vibrant colors more.
+      const max = Math.max(red, green, blue);
+      const min = Math.min(red, green, blue);
+      const saturation = max === 0 ? 0 : (max - min) / max;
+      const weight = 1 + saturation * 2;
+
+      r += red * weight;
+      g += green * weight;
+      b += blue * weight;
+      totalWeight += weight;
+    }
+  }
+
+  if (totalWeight > 0) {
+    // Slightly darken the color for better contrast.
+    r = Math.round(Math.round(r / totalWeight) * contrast);
+    g = Math.round(Math.round(g / totalWeight) * contrast);
+    b = Math.round(Math.round(b / totalWeight) * contrast);
+    return [r, g, b];
+  }
+
+  return null;
+};
+
+/**
+ * Detects if an image has a transparent background by examining edge pixels.
+ * @param pixels - Image pixel data from canvas
+ * @param sampleSize - Size of the sampled image
+ * @param threshold - Percentage threshold for considering background transparent (default: 0.5)
+ * @returns True if the image has a transparent background
+ */
+const isTransparent = (pixels: Uint8ClampedArray, sampleSize: number, threshold: number = 0.5): boolean => {
+  let edgeTransparentPixels = 0;
+  const edgePixels = sampleSize * 4 - 4; // Perimeter minus corners counted twice.
+
+  for (let x = 0; x < sampleSize; x++) {
+    // Top edge.
+    const topIndex = x * 4;
+    if (pixels[topIndex + 3] === 0) {
+      edgeTransparentPixels++;
+    }
+
+    // Bottom edge.
+    const bottomIndex = ((sampleSize - 1) * sampleSize + x) * 4;
+    if (pixels[bottomIndex + 3] === 0) {
+      edgeTransparentPixels++;
+    }
+  }
+
+  for (let y = 1; y < sampleSize - 1; y++) {
+    // Left edge.
+    const leftIndex = y * sampleSize * 4;
+    if (pixels[leftIndex + 3] === 0) {
+      edgeTransparentPixels++;
+    }
+
+    // Right edge.
+    const rightIndex = (y * sampleSize + sampleSize - 1) * 4;
+    if (pixels[rightIndex + 3] === 0) {
+      edgeTransparentPixels++;
+    }
+  }
+
+  return edgeTransparentPixels / edgePixels > threshold;
+};

package/src/components/Image/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './Image';

package/src/components/Input/Input.stories.tsx

@@ -5,11 +5,9 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { mx, surfaceShadow } from '@dxos/ui-theme';
 import { type MessageValence } from '@dxos/ui-types';
 
-import { withTheme } from '../../testing';
-
+import { withLayoutVariants, withTheme } from '../../testing';
 import {
   type CheckboxProps,
   Input,
@@ -29,7 +27,7 @@ type VariantMap = {
 
 type Variant = { [K in keyof VariantMap]: { type: K } & VariantMap[K] }[keyof VariantMap];
 
-type BaseProps = Partial<{
+type DefaultStoryProps = Partial<{
   kind: keyof VariantMap;
   label: string;
   labelVisuallyHidden: boolean;
@@ -39,7 +37,7 @@ type BaseProps = Partial<{
   validationMessage: string;
 }>;
 
-const InputWrapper = ({
+const DefaultStory = ({
   kind,
   label,
   description,
@@ -48,7 +46,7 @@ const InputWrapper = ({
   validationValence,
   validationMessage,
   ...props
-}: BaseProps) => {
+}: DefaultStoryProps) => {
   return (
     <Input.Root {...{ validationValence }}>
       <Input.Label srOnly={labelVisuallyHidden}>{label}</Input.Label>
@@ -60,48 +58,28 @@ const InputWrapper = ({
       {kind === 'switch' && <Input.Switch {...props} />}
 
       <Input.DescriptionAndValidation srOnly={descriptionVisuallyHidden}>
-        {validationMessage && (
-          <>
-            <Input.Validation>{validationMessage}</Input.Validation>{' '}
-          </>
-        )}
+        {validationMessage && <Input.Validation classNames='block'>{validationMessage}</Input.Validation>}
         <Input.Description>{description}</Input.Description>
       </Input.DescriptionAndValidation>
     </Input.Root>
   );
 };
 
-const DefaultStory = (props: BaseProps) => {
-  return (
-    <div className='space-b-4'>
-      <div className={mx('bg-baseSurface', 'p-4 rounded-md')}>
-        <InputWrapper {...props} />
-      </div>
-      <div className={mx('bg-cardSurface', 'p-4 rounded-md', surfaceShadow({ elevation: 'positioned' }))}>
-        <InputWrapper {...props} />
-      </div>
-      <div className={mx('bg-modalSurface', 'p-4 rounded-md', surfaceShadow({ elevation: 'dialog' }))}>
-        <InputWrapper {...props} />
-      </div>
-    </div>
-  );
-};
-
 const meta = {
   title: 'ui/react-ui-core/components/Input',
   component: Input.Root as any,
   render: DefaultStory,
-  decorators: [withTheme()],
+  decorators: [withTheme(), withLayoutVariants()],
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
-type Story = StoryObj<BaseProps & Variant>;
+type Story = StoryObj<DefaultStoryProps & Variant>;
 
 export const DensityCoarse: Story = {
   args: {
     kind: 'text',
-    label: 'Hello',
+    label: 'Input value',
     placeholder: 'This is an input',
     disabled: false,
     description: undefined,
@@ -116,7 +94,7 @@ export const DensityCoarse: Story = {
 export const DensityFine: Story = {
   args: {
     kind: 'text',
-    label: 'This is an Input with a density value of ‘fine’',
+    label: 'Input value',
     placeholder: 'This is a density:fine input',
     disabled: false,
     description: undefined,
@@ -131,7 +109,7 @@ export const DensityFine: Story = {
 export const Subdued: Story = {
   args: {
     kind: 'text',
-    label: 'Hello',
+    label: 'Input value',
     placeholder: 'This is a subdued input',
     disabled: false,
     description: undefined,
@@ -161,7 +139,7 @@ export const LabelVisuallyHidden: Story = {
   },
 };
 
-export const InputWithDescription: Story = {
+export const WithDescription: Story = {
   args: {
     kind: 'text',
     label: 'Described input',
@@ -170,7 +148,7 @@ export const InputWithDescription: Story = {
   },
 };
 
-export const InputWithErrorAndDescription: Story = {
+export const WithErrorAndDescription: Story = {
   args: {
     kind: 'text',
     label: 'Described invalid input',
@@ -181,7 +159,7 @@ export const InputWithErrorAndDescription: Story = {
   },
 };
 
-export const InputWithValidationAndDescription: Story = {
+export const WithValidationAndDescription: Story = {
   args: {
     kind: 'text',
     label: 'Described input with validation message',
@@ -207,7 +185,8 @@ export const PinInput: Story = {
     label: 'This input is a PIN-style input',
     length: 6,
     description: 'Type in secret you received',
-    placeholder: '••••••',
+    pattern: '\\d*',
+    density: 'coarse',
   },
 };
 
@@ -215,7 +194,7 @@ export const Checkbox: Story = {
   args: {
     kind: 'checkbox',
     label: 'This is a checkbox',
-    description: 'It’s checked, indeterminate, or unchecked',
+    description: 'Checked, indeterminate, or unchecked',
     size: 5,
   },
 };
@@ -224,6 +203,6 @@ export const Switch: Story = {
   args: {
     kind: 'switch',
     label: 'This is a switch',
-    description: "It's either off... or on.",
+    description: 'On or off',
   },
 };

package/src/components/Input/Input.tsx

@@ -2,9 +2,9 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Root as CheckboxPrimitive, type CheckboxProps as CheckboxPrimitiveProps } from '@radix-ui/react-checkbox';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import React, { type ComponentPropsWithRef, type ForwardRefExoticComponent, forwardRef, useCallback } from 'react';
+import React, { type ComponentPropsWithRef, type ForwardRefExoticComponent, forwardRef } from 'react';
 
 import {
   DescriptionAndValidation as DescriptionAndValidationPrimitive,
@@ -28,7 +28,7 @@ import {
   useInputContext,
 } from '@dxos/react-input';
 import { mx } from '@dxos/ui-theme';
-import { type ClassNameValue, type Density, type Elevation, type Size } from '@dxos/ui-types';
+import { type Density, type Elevation, type Size } from '@dxos/ui-types';
 
 import { useDensityContext, useElevationContext, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
@@ -40,7 +40,7 @@ type InputSharedProps = Partial<{ density: Density; elevation: Elevation; varian
 
 type LabelProps = ThemedClassName<LabelPrimitiveProps> & { srOnly?: boolean };
 
-const Label = forwardRef<HTMLLabelElement, LabelProps>(({ srOnly, classNames, children, ...props }, forwardedRef) => {
+const Label = forwardRef<HTMLLabelElement, LabelProps>(({ classNames, children, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return (
     <LabelPrimitive {...props} className={tx('input.label', { srOnly }, classNames)} ref={forwardedRef}>
@@ -52,7 +52,7 @@ const Label = forwardRef<HTMLLabelElement, LabelProps>(({ srOnly, classNames, ch
 type DescriptionProps = ThemedClassName<DescriptionPrimitiveProps> & { srOnly?: boolean };
 
 const Description = forwardRef<HTMLSpanElement, DescriptionProps>(
-  ({ srOnly, classNames, children, ...props }, forwardedRef) => {
+  ({ classNames, children, srOnly, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     return (
       <DescriptionPrimitive {...props} className={tx('input.description', { srOnly }, classNames)} ref={forwardedRef}>
@@ -65,7 +65,7 @@ const Description = forwardRef<HTMLSpanElement, DescriptionProps>(
 type ValidationProps = ThemedClassName<ValidationPrimitiveProps> & { srOnly?: boolean };
 
 const Validation = forwardRef<HTMLSpanElement, InputScopedProps<ValidationProps>>(
-  ({ __inputScope, srOnly, classNames, children, ...props }, forwardedRef) => {
+  ({ __inputScope, classNames, children, srOnly, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
     return (
@@ -83,7 +83,7 @@ const Validation = forwardRef<HTMLSpanElement, InputScopedProps<ValidationProps>
 type DescriptionAndValidationProps = ThemedClassName<DescriptionAndValidationPrimitiveProps> & { srOnly?: boolean };
 
 const DescriptionAndValidation = forwardRef<HTMLParagraphElement, DescriptionAndValidationProps>(
-  ({ srOnly, classNames, children, ...props }, forwardedRef) => {
+  ({ classNames, children, srOnly, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     return (
       <DescriptionAndValidationPrimitive
@@ -97,52 +97,23 @@ const DescriptionAndValidation = forwardRef<HTMLParagraphElement, DescriptionAnd
   },
 );
 
-type PinInputProps = InputSharedProps &
-  Omit<PinInputPrimitiveProps, 'segmentClassName' | 'inputClassName'> & {
-    segmentClassName?: ClassNameValue;
-    inputClassName?: ClassNameValue;
-  };
+type PinInputProps = ThemedClassName<InputSharedProps & Omit<PinInputPrimitiveProps, 'className' | 'segmentClassName'>>;
 
 const PinInput = forwardRef<HTMLInputElement, PinInputProps>(
-  (
-    {
-      density: propsDensity,
-      elevation: propsElevation,
-      segmentClassName: propsSegmentClassName,
-      inputClassName,
-      ...props
-    },
-    forwardedRef,
-  ) => {
+  ({ classNames, density: propsDensity, elevation: propsElevation, ...props }, forwardedRef) => {
     const { hasIosKeyboard } = useThemeContext();
     const { tx } = useThemeContext();
     const density = useDensityContext(propsDensity);
     const elevation = useElevationContext(propsElevation);
-    const segmentClassName = useCallback(
-      ({ focused, validationValence }: Parameters<Exclude<PinInputPrimitiveProps['segmentClassName'], undefined>>[0]) =>
-        tx(
-          'input.input',
-          {
-            variant: 'static',
-            focused,
-            disabled: props.disabled,
-            density,
-            elevation,
-            validationValence,
-          },
-          propsSegmentClassName,
-        ) || '',
-      [tx, props.disabled, elevation, propsElevation, density],
-    );
 
     return (
       <PinInputPrimitive
         {...{
           ...props,
-          segmentClassName,
           ...(props.autoFocus && !hasIosKeyboard && { autoFocus: true }),
         }}
-        inputClassName={tx('input.inputWithSegments', { disabled: props.disabled }, inputClassName) || ''}
+        className={tx('input.inputWithSegments', { disabled: props.disabled }, classNames) || ''}
+        segmentClassName={tx('input.segment', { disabled: props.disabled, density, elevation }) || ''}
         ref={forwardedRef}
       />
     );
@@ -159,13 +130,13 @@ type TextInputProps = InputSharedProps & ThemedClassName<TextInputPrimitiveProps
 
 const TextInput = forwardRef<HTMLInputElement, InputScopedProps<TextInputProps>>(
   (
-    { __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, noAutoFill, ...props },
+    { __inputScope, classNames, density: densityProp, elevation: elevationProp, variant, noAutoFill, ...props },
     forwardedRef,
   ) => {
     const { hasIosKeyboard } = useThemeContext();
     const { tx } = useThemeContext();
-    const density = useDensityContext(propsDensity);
-    const elevation = useElevationContext(propsElevation);
+    const density = useDensityContext(densityProp);
+    const elevation = useElevationContext(elevationProp);
     const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
 
     return (
@@ -205,7 +176,7 @@ const TextArea = forwardRef<HTMLTextAreaElement, InputScopedProps<TextAreaProps>
       <TextAreaPrimitive
         {...props}
         className={tx(
-          'input.input',
+          'input.textArea',
           {
             variant,
             disabled: props.disabled,
@@ -213,7 +184,6 @@ const TextArea = forwardRef<HTMLTextAreaElement, InputScopedProps<TextAreaProps>
             elevation,
             validationValence,
           },
-          '-mbe-labelSpacingBlock',
           classNames,
         )}
         {...(props.autoFocus && !hasIosKeyboard && { autoFocus: true })}
@@ -223,7 +193,7 @@ const TextArea = forwardRef<HTMLTextAreaElement, InputScopedProps<TextAreaProps>
   },
 );
 
-type CheckboxProps = ThemedClassName<Omit<CheckboxPrimitiveProps, 'children'>> & {
+type CheckboxProps = ThemedClassName<Omit<CheckboxPrimitive.CheckboxProps, 'children'>> & {
   size?: Size;
 };
 
@@ -234,11 +204,11 @@ const Checkbox: ForwardRefExoticComponent<CheckboxProps> = forwardRef<
   (
     {
       __inputScope,
+      classNames,
       checked: propsChecked,
       defaultChecked: propsDefaultChecked,
       onCheckedChange: propsOnCheckedChange,
       size,
-      classNames,
       ...props
     },
     forwardedRef,
@@ -252,7 +222,7 @@ const Checkbox: ForwardRefExoticComponent<CheckboxProps> = forwardRef<
     const { tx } = useThemeContext();
 
     return (
-      <CheckboxPrimitive
+      <CheckboxPrimitive.Root
         {...{
           ...props,
           checked,
@@ -271,7 +241,7 @@ const Checkbox: ForwardRefExoticComponent<CheckboxProps> = forwardRef<
           icon={checked === 'indeterminate' ? 'ph--minus--regular' : 'ph--check--regular'}
           classNames={tx('input.checkboxIndicator', { size, checked })}
         />
-      </CheckboxPrimitive>
+      </CheckboxPrimitive.Root>
     );
   },
 );
@@ -284,10 +254,10 @@ const Switch = forwardRef<HTMLInputElement, InputScopedProps<SwitchProps>>(
   (
     {
       __inputScope,
+      classNames,
       checked: propsChecked,
       defaultChecked: propsDefaultChecked,
       onCheckedChange: propsOnCheckedChange,
-      classNames,
       ...props
     },
     forwardedRef,

package/src/components/Link/Link.stories.tsx

@@ -5,7 +5,6 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 
 import { withTheme } from '../../testing';
-
 import { Link } from './Link';
 
 const meta = {

package/src/components/Link/Link.tsx

@@ -18,7 +18,7 @@ export type LinkProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.a
 export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
   ({ asChild, variant, classNames, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
-    const Root = asChild ? Slot : Primitive.a;
-    return <Root {...props} className={tx('link.root', { variant }, classNames)} ref={forwardedRef} />;
+    const Comp = asChild ? Slot : Primitive.a;
+    return <Comp {...props} className={tx('link.root', { variant }, classNames)} ref={forwardedRef} />;
   },
 );