@rtzll/reflow 0.5.0 → 0.7.0

package/dist/avatar.css

@@ -0,0 +1,119 @@
+/* Avatar: initials on a soft tint of their colour, covered by an image
+   once it loads. Sizes follow --rf-avatar-size; the initials scale with it.
+   A ring in the surface colour separates overlapping avatars in a group. */
+.rf-avatar {
+  --rf-avatar-size: 32px;
+  --rf-avatar-ring: var(--rf-bg);
+  position: relative;
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+  box-sizing: border-box;
+  inline-size: var(--rf-avatar-size);
+  block-size: var(--rf-avatar-size);
+  border-radius: 9999px;
+  background: color-mix(in oklab, var(--rf-avatar-color, var(--rf-fg)) 20%, var(--rf-bg));
+  color: color-mix(in oklab, var(--rf-avatar-color, var(--rf-fg)) 60%, var(--rf-fg));
+  font: 550 calc(var(--rf-avatar-size) * 0.4) / 1 var(--rf-font);
+  letter-spacing: 0.01em;
+  user-select: none;
+  vertical-align: middle;
+}
+.rf-avatar[data-shape='square'] {
+  border-radius: max(4px, calc(var(--rf-avatar-size) * 0.25));
+}
+[data-shape='sharp'] .rf-avatar[data-shape='square'] {
+  border-radius: var(--rf-radius);
+}
+.rf-avatar > * {
+  grid-area: 1 / 1;
+}
+.rf-avatar-image {
+  inline-size: 100%;
+  block-size: 100%;
+  border-radius: inherit;
+  object-fit: cover;
+}
+.rf-avatar[data-image='error'] .rf-avatar-image {
+  display: none;
+}
+
+/* The status dot sits on the corner, ringed in the surface colour. */
+.rf-avatar-status {
+  place-self: end;
+  inline-size: max(6px, calc(var(--rf-avatar-size) * 0.28));
+  block-size: max(6px, calc(var(--rf-avatar-size) * 0.28));
+  margin: -1px;
+  border-radius: 9999px;
+  box-shadow: 0 0 0 2px var(--rf-avatar-ring);
+  background: var(--rf-muted);
+}
+.rf-avatar-status[data-status='online'] {
+  background: light-dark(#22c55e, var(--rf-success));
+}
+.rf-avatar-status[data-status='away'] {
+  background: light-dark(#f59e0b, var(--rf-warning));
+}
+.rf-avatar-status[data-status='busy'] {
+  background: light-dark(#ef4444, var(--rf-danger));
+}
+
+/* AvatarGroup: avatars overlap by a quarter of their size and spread apart
+   on the moderate spring while pointed at. */
+.rf-avatar-group {
+  --rf-avatar-overlap: calc(var(--rf-avatar-size) * -0.25);
+  display: flex;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.rf-avatar-group > li {
+  position: relative;
+  display: flex;
+  transition: margin-inline-start var(--rf-spring-moderate);
+}
+.rf-avatar-group > li + li {
+  margin-inline-start: var(--rf-avatar-overlap);
+}
+@media (hover: hover) {
+  .rf-avatar-group:hover > li + li {
+    margin-inline-start: 2px;
+  }
+}
+.rf-avatar-slot {
+  display: inline-flex;
+  border-radius: 9999px;
+}
+.rf-avatar-group .rf-avatar {
+  box-shadow: 0 0 0 2px var(--rf-avatar-ring);
+}
+.rf-avatar-more {
+  --rf-avatar-color: var(--rf-muted);
+  background: var(--rf-neutral-fill);
+  color: var(--rf-fg);
+  font-size: calc(var(--rf-avatar-size) * 0.34);
+  font-variant-numeric: tabular-nums;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .rf-avatar-group > li {
+    transition: none;
+  }
+}
+@media (forced-colors: active) {
+  .rf-avatar {
+    border: 1px solid CanvasText;
+  }
+}
+
+/* The ring takes the colour of the surface the avatars sit on. */
+.rf-popover-surface .rf-avatar {
+  --rf-avatar-ring: var(--rf-surface-3, white);
+}
+.rf-dialog .rf-avatar {
+  --rf-avatar-ring: var(--rf-surface-5);
+}
+.rf-drawer .rf-avatar {
+  --rf-avatar-ring: var(--rf-drawer-bg);
+}

package/dist/avatar.d.ts

@@ -0,0 +1,42 @@
+import { type Handle } from 'remix/component';
+import type { BadgeColor } from './basic.tsx';
+export type AvatarStatus = 'online' | 'away' | 'busy' | 'offline';
+export interface AvatarProps {
+    /** Who or what it shows: the accessible name, and the source of the initials. */
+    name: string;
+    /** An image. Until it loads, or if it fails, the initials show. */
+    src?: string;
+    /** Width and height in pixels. Default 32. */
+    size?: number;
+    shape?: 'circle' | 'square';
+    /** The initials' colour. Defaults to one picked from the name, the same every time. */
+    color?: BadgeColor;
+    /** A dot in the corner, named with the avatar. */
+    status?: AvatarStatus;
+    /** Hides the avatar from assistive technology, for when the name is shown beside it. */
+    decorative?: boolean;
+    class?: string;
+}
+/**
+ * A picture or the initials of a person, team or agent. The initials sit
+ * on a colour picked from the name, so the same name always looks the same;
+ * an image covers them once it loads, and they show again if it fails. A
+ * status dot is named with the avatar. Mark it decorative when the name is
+ * already written beside it.
+ */
+export declare function Avatar(handle: Handle<AvatarProps>): () => import("remix/component").RemixElement;
+export interface AvatarGroupProps {
+    avatars: readonly Omit<AvatarProps, 'size' | 'shape' | 'decorative' | 'class'>[];
+    /** How many avatars show, the count of the rest included. Default 4. */
+    max?: number;
+    size?: number;
+    shape?: 'circle' | 'square';
+    /** Names the group. Defaults to the number of people. */
+    label?: string;
+}
+/**
+ * A row of overlapping avatars, such as the people on a document. Each
+ * names itself in a tooltip; past `max`, a count stands in for the rest and
+ * names them. Pointing at the row spreads it apart.
+ */
+export declare function AvatarGroup(handle: Handle<AvatarGroupProps>): () => import("remix/component").RemixElement;

package/dist/avatar.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "remix/component/jsx-runtime";
+import { ref } from 'remix/component';
+import { badgeColors } from './colors.js';
+import { Tooltip } from './overlays.js';
+// Hues far enough apart to tell neighbours in a group apart, legible on
+// both themes.
+const autoColors = [
+    'red',
+    'orange',
+    'amber',
+    'green',
+    'teal',
+    'blue',
+    'violet',
+    'pink',
+];
+// FNV-1a, which spreads similar names evenly.
+function pickColor(name) {
+    let hash = 0x811c9dc5;
+    for (const char of name.trim().toLowerCase()) {
+        hash ^= char.codePointAt(0);
+        hash = Math.imul(hash, 0x01000193) >>> 0;
+    }
+    return autoColors[hash % autoColors.length];
+}
+function initials(name) {
+    const words = name.trim().split(/\s+/);
+    const first = (word) => Array.from(word ?? '').find((char) => /[\p{L}\p{N}]/u.test(char)) ?? '';
+    const letters = first(words[0]) + (words.length > 1 ? first(words[words.length - 1]) : '');
+    return letters.toLocaleUpperCase();
+}
+/**
+ * A picture or the initials of a person, team or agent. The initials sit
+ * on a colour picked from the name, so the same name always looks the same;
+ * an image covers them once it loads, and they show again if it fails. A
+ * status dot is named with the avatar. Mark it decorative when the name is
+ * already written beside it.
+ */
+export function Avatar(handle) {
+    // A failed image hands back to the initials, even if it failed before hydration.
+    const image = ref((node, signal) => {
+        if (!(node instanceof HTMLImageElement))
+            return;
+        const root = node.closest('.rf-avatar');
+        const fail = () => root?.setAttribute('data-image', 'error');
+        node.addEventListener('error', fail, { signal });
+        node.addEventListener('load', () => root?.removeAttribute('data-image'), { signal });
+        if (node.complete && node.naturalWidth === 0 && node.getAttribute('src'))
+            fail();
+    });
+    return () => {
+        const { name, src, size = 32, shape = 'circle', status, decorative } = handle.props;
+        const color = handle.props.color ?? pickColor(name);
+        const label = status ? `${name} (${status})` : name;
+        return (_jsxs("span", { class: handle.props.class ? `rf-avatar ${handle.props.class}` : 'rf-avatar', role: decorative ? undefined : 'img', "aria-label": decorative ? undefined : label, "aria-hidden": decorative || undefined, "data-shape": shape, "data-color": color, style: { '--rf-avatar-size': `${size}px`, '--rf-avatar-color': badgeColors[color] }, children: [_jsx("span", { class: "rf-avatar-initials", "aria-hidden": "true", children: initials(name) }), src && _jsx("img", { class: "rf-avatar-image", src: src, alt: "", mix: image }), status && _jsx("span", { class: "rf-avatar-status", "data-status": status, "aria-hidden": "true" })] }));
+    };
+}
+/**
+ * A row of overlapping avatars, such as the people on a document. Each
+ * names itself in a tooltip; past `max`, a count stands in for the rest and
+ * names them. Pointing at the row spreads it apart.
+ */
+export function AvatarGroup(handle) {
+    return () => {
+        const { avatars, size = 32, shape } = handle.props;
+        const max = Math.max(1, handle.props.max ?? 4);
+        const overflow = avatars.length > max;
+        const shown = overflow ? avatars.slice(0, max - 1) : avatars;
+        const rest = overflow ? avatars.slice(max - 1) : [];
+        const label = handle.props.label ?? `${avatars.length} ${avatars.length === 1 ? 'person' : 'people'}`;
+        const names = rest.map((avatar) => avatar.name).join(', ');
+        return (_jsxs("ul", { class: "rf-avatar-group", "aria-label": label, style: { '--rf-avatar-size': `${size}px` }, children: [shown.map((avatar, index) => (_jsx("li", { style: { zIndex: shown.length - index + 1 }, children: _jsx(Tooltip, { content: avatar.name, renderTrigger: (trigger) => (_jsx("span", { class: "rf-avatar-slot", ...trigger, children: _jsx(Avatar, { ...avatar, size: size, shape: shape }) })) }) }, `${avatar.name}-${index}`))), overflow && (_jsx("li", { children: _jsx(Tooltip, { content: names, renderTrigger: (trigger) => (_jsx("span", { class: "rf-avatar-slot", ...trigger, children: _jsxs("span", { class: "rf-avatar rf-avatar-more", role: "img", "aria-label": `${rest.length} more: ${names}`, "data-shape": shape ?? 'circle', style: { '--rf-avatar-size': `${size}px` }, children: ["+", rest.length] }) })) }) }))] }));
+    };
+}

package/dist/basic.d.ts

@@ -1,5 +1,6 @@
 import { type IconName } from './icon.tsx';
 import type { Handle, Props, RemixNode } from 'remix/component';
+import { badgeColors } from './colors.ts';
 export type ControlSize = 'default' | 'compact';
 export type ButtonSize = ControlSize | 'icon' | 'icon-compact';
 export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'destructive';
@@ -24,26 +25,6 @@ type StyledProps<Tag extends keyof JSX.IntrinsicElements> = Omit<Props<Tag>, 'cl
     class?: string;
     className?: string;
 };
-declare const badgeColors: {
-    readonly accent: 'var(--rf-accent)';
-    readonly gray: '#a3a3a3';
-    readonly red: '#ef4444';
-    readonly orange: '#f97316';
-    readonly amber: '#f59e0b';
-    readonly yellow: '#eab308';
-    readonly lime: '#84cc16';
-    readonly green: '#22c55e';
-    readonly emerald: '#10b981';
-    readonly teal: '#14b8a6';
-    readonly cyan: '#06b6d4';
-    readonly blue: '#3b82f6';
-    readonly indigo: '#6366f1';
-    readonly violet: '#8b5cf6';
-    readonly purple: '#a855f7';
-    readonly fuchsia: '#d946ef';
-    readonly pink: '#ec4899';
-    readonly rose: '#f43f5e';
-};
 export type BadgeColor = keyof typeof badgeColors;
 export type BadgeProps = Omit<StyledProps<'span'>, 'color' | 'style'> & {
     color?: BadgeColor;

package/dist/basic.js

@@ -5,6 +5,7 @@ import { jsx } from 'remix/component/jsx-runtime';
 import { fluidHover } from './interactive.js';
 import { Tooltip } from './overlays.js';
 import { statusIcon } from './status-icon.js';
+import { badgeColors } from './colors.js';
 export function Button(handle) {
     return () => {
         const props = handle.props;
@@ -36,26 +37,6 @@ export function Button(handle) {
 function classList(...classes) {
     return classes.filter(Boolean).join(' ');
 }
-const badgeColors = {
-    accent: 'var(--rf-accent)',
-    gray: '#a3a3a3',
-    red: '#ef4444',
-    orange: '#f97316',
-    amber: '#f59e0b',
-    yellow: '#eab308',
-    lime: '#84cc16',
-    green: '#22c55e',
-    emerald: '#10b981',
-    teal: '#14b8a6',
-    cyan: '#06b6d4',
-    blue: '#3b82f6',
-    indigo: '#6366f1',
-    violet: '#8b5cf6',
-    purple: '#a855f7',
-    fuchsia: '#d946ef',
-    pink: '#ec4899',
-    rose: '#f43f5e',
-};
 export function Badge(handle) {
     return () => {
         const { class: classProp, className, color = 'gray', size, variant = 'solid', style, children, ...props } = handle.props;

package/dist/carousel.css

@@ -0,0 +1,67 @@
+/* Carousel: slides in a row on a native scroll container that snaps each
+   one into place. Set --rf-carousel-slide for the slides' width (100% shows
+   one at a time) and --rf-carousel-gap for the space between them. While a
+   mouse drags it, snapping waits until the slide it lands on is chosen. */
+.rf-carousel {
+  --rf-carousel-slide: 100%;
+  --rf-carousel-gap: 12px;
+  display: grid;
+  gap: 12px;
+  min-inline-size: 0;
+}
+.rf-carousel-viewport {
+  position: relative;
+  display: grid;
+  grid-auto-columns: var(--rf-carousel-slide);
+  grid-auto-flow: column;
+  gap: var(--rf-carousel-gap);
+  overflow-x: auto;
+  overflow-y: hidden;
+  overscroll-behavior-x: contain;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+  border-radius: var(--rf-panel-radius);
+  outline: none;
+}
+.rf-carousel-viewport::-webkit-scrollbar {
+  display: none;
+}
+.rf-carousel-viewport:focus-visible {
+  outline: 2px solid var(--rf-accent);
+  outline-offset: 2px;
+}
+@media (hover: hover) and (pointer: fine) {
+  .rf-carousel-viewport {
+    cursor: grab;
+  }
+}
+.rf-carousel-viewport[data-dragging] {
+  cursor: grabbing;
+  scroll-snap-type: none;
+  user-select: none;
+}
+.rf-carousel-slide {
+  min-inline-size: 0;
+  scroll-snap-align: start;
+  scroll-snap-stop: normal;
+}
+.rf-carousel[data-align='center'] .rf-carousel-slide {
+  scroll-snap-align: center;
+}
+/* Dragging moves the slides, not their images. */
+.rf-carousel-slide img {
+  -webkit-user-drag: none;
+}
+
+.rf-carousel-controls {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+}
+.rf-carousel-controls .rf-carousel-dots {
+  margin-inline: 4px;
+}
+.rf-carousel-play {
+  margin-inline-start: 4px;
+}

package/dist/carousel.d.ts

@@ -0,0 +1,36 @@
+import { type Handle, type RemixNode } from 'remix/component';
+export interface CarouselProps {
+    /** Names the carousel, such as "Featured projects". */
+    label: string;
+    /** The slides, one per child. */
+    children?: RemixNode;
+    /** Names each slide, for its announcement and its dot. */
+    slideLabels?: readonly string[];
+    /** The current slide, when controlled by the parent. */
+    index?: number;
+    defaultIndex?: number;
+    /** Called when a button, a dot, a drag, a scroll or autoplay changes the slide. */
+    onIndexChange?: (index: number) => void;
+    /** Shows CarouselDots under the slides. Default true. */
+    dots?: boolean;
+    /** Shows previous and next buttons. Default true. */
+    controls?: boolean;
+    /** Moves on after this many milliseconds, timed and shown by the dots, with a button to pause. */
+    autoplay?: {
+        duration: number;
+    };
+    /** Where a slide comes to rest. Default start. */
+    align?: 'start' | 'center';
+    size?: 'default' | 'compact';
+    class?: string;
+}
+/**
+ * Slides in a row on a real scroll container: touch, trackpads, the
+ * keyboard and screen readers scroll it natively, and CSS scroll snap
+ * brings each slide to rest. Mice can drag it, with momentum. Previous and
+ * next buttons and CarouselDots follow the slide in view and move it;
+ * autoplay runs through the dots and pauses while the carousel is pointed
+ * at or focused, or with its pause button. It is a labelled carousel whose
+ * slides read as "3 of 7", and it touches nothing outside its own element.
+ */
+export declare function Carousel(handle: Handle<CarouselProps>): () => import("remix/component").RemixElement;