@glyphui/ui 0.3.0 → 0.5.0

package/src/components/banner/banner.styles.ts

@@ -1,7 +1,7 @@
 import type { StylesEntry } from '../../utils/registry'
 import { tv, type VariantProps } from '../../utils/tv'
 
-export const bannerStyles = tv({
+export const bannerStyles = /* @__PURE__ */ tv({
   slots: {
     root: ['w-full border-b-(length:--glyph-border-width) text-small'],
     inner: 'mx-auto flex w-full max-w-7xl items-center gap-3 px-4 py-2.5 sm:px-6',
@@ -15,16 +15,16 @@ export const bannerStyles = tv({
       neutral: { root: 'border-border bg-subtle text-foreground', icon: 'text-muted-foreground' },
       primary: { root: 'border-primary bg-primary text-primary-foreground' },
       info: {
-        root: 'border-info/25 bg-info/10 text-[color-mix(in_oklab,var(--color-info)_55%,var(--color-foreground))]',
+        root: 'border-info/25 bg-info/10 text-info-text',
       },
       success: {
-        root: 'border-success/25 bg-success/10 text-[color-mix(in_oklab,var(--color-success)_55%,var(--color-foreground))]',
+        root: 'border-success/25 bg-success/10 text-success-text',
       },
       warning: {
-        root: 'border-warning/30 bg-warning/14 text-[color-mix(in_oklab,var(--color-warning)_50%,var(--color-foreground))]',
+        root: 'border-warning/30 bg-warning/14 text-warning-text',
       },
       danger: {
-        root: 'border-danger/25 bg-danger/10 text-[color-mix(in_oklab,var(--color-danger)_55%,var(--color-foreground))]',
+        root: 'border-danger/25 bg-danger/10 text-danger-text',
       },
     },
   },

package/src/components/blockquote/blockquote.tsx

@@ -3,7 +3,7 @@ import { useComponentConfig } from '../../hooks/use-component-config'
 import type { StylesEntry } from '../../utils/registry'
 import { tv, type VariantProps } from '../../utils/tv'
 
-export const blockquoteStyles = tv({
+export const blockquoteStyles = /* @__PURE__ */ tv({
   slots: {
     root: 'grid gap-3 border-l-2 border-primary pl-5',
     quote: 'font-display text-pretty text-foreground',

package/src/components/breadcrumb/breadcrumb.styles.ts

@@ -2,7 +2,7 @@ import type { StylesEntry } from '../../utils/registry'
 import { focusRing, transition } from '../../utils/styles'
 import { tv } from '../../utils/tv'
 
-export const breadcrumbStyles = tv({
+export const breadcrumbStyles = /* @__PURE__ */ tv({
   slots: {
     root: 'min-w-0',
     list: 'flex flex-wrap items-center gap-1.5 text-small text-muted-foreground',

package/src/components/button/button.styles.ts

@@ -1,7 +1,7 @@
 import { focusRing, themedBorder, transition } from '../../utils/styles'
 import { tv, type VariantProps } from '../../utils/tv'
 
-export const buttonStyles = tv({
+export const buttonStyles = /* @__PURE__ */ tv({
   slots: {
     base: [
       'relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-2 whitespace-nowrap',
@@ -10,6 +10,8 @@ export const buttonStyles = tv({
       transition,
       focusRing,
       'disabled:pointer-events-none disabled:opacity-50 aria-busy:cursor-progress',
+      // Press feedback. CSS only, so Button stays free of animation libraries.
+      'active:scale-[0.98] motion-expressive:active:scale-[0.95]',
     ],
     icon: 'inline-flex size-4 shrink-0 items-center justify-center [&>svg]:size-full',
   },
@@ -22,7 +24,9 @@ export const buttonStyles = tv({
       },
       ghost: { base: 'text-muted-foreground hover:bg-muted hover:text-foreground' },
       danger: { base: 'bg-danger text-danger-foreground shadow-sm hover:bg-danger/88' },
-      link: { base: 'h-auto px-0 text-primary underline-offset-4 shadow-none hover:underline' },
+      link: {
+        base: 'h-auto px-0 text-primary-text underline-offset-4 shadow-none hover:underline active:scale-100 motion-expressive:active:scale-100',
+      },
     },
     size: {
       sm: { base: 'h-(--glyph-control-sm) px-3 text-small', icon: 'size-3.5' },

package/src/components/calendar/calendar.styles.ts

@@ -2,7 +2,7 @@ import type { StylesEntry } from '../../utils/registry'
 import { focusRing, transition } from '../../utils/styles'
 import { tv } from '../../utils/tv'
 
-export const calendarStyles = tv({
+export const calendarStyles = /* @__PURE__ */ tv({
   slots: {
     root: 'relative w-fit p-3 text-small text-foreground',
     months: 'relative flex flex-col gap-6 sm:flex-row',
@@ -29,10 +29,11 @@ export const calendarStyles = tv({
       transition,
       focusRing,
     ],
-    today: '[&>button]:font-semibold [&>button]:text-primary',
+    // Selected days keep primary-foreground on primary, whatever else applies to them.
+    today: '[&>button]:font-semibold [&:not([data-selected])>button]:text-primary-text',
     selected:
       '[&>button]:bg-primary [&>button]:text-primary-foreground [&>button]:hover:bg-primary/90',
-    outside: '[&>button]:text-faint-foreground [&>button]:opacity-60',
+    outside: '[&:not([data-selected])>button]:text-faint-foreground',
     disabled: '[&>button]:pointer-events-none [&>button]:opacity-35 [&>button]:line-through',
     rangeStart: 'rounded-l-md bg-primary/14',
     rangeMiddle:

package/src/components/card/card.styles.ts

@@ -1,7 +1,7 @@
 import { themedBorder, transition } from '../../utils/styles'
 import { tv, type VariantProps } from '../../utils/tv'
 
-export const cardStyles = tv({
+export const cardStyles = /* @__PURE__ */ tv({
   slots: {
     root: ['flex flex-col rounded-lg text-foreground', themedBorder, transition],
     header: 'flex flex-col gap-1',

package/src/components/carousel/carousel.styles.ts

@@ -2,7 +2,7 @@ import type { StylesEntry } from '../../utils/registry'
 import { focusRing, transition } from '../../utils/styles'
 import { tv, type VariantProps } from '../../utils/tv'
 
-export const carouselStyles = tv({
+export const carouselStyles = /* @__PURE__ */ tv({
   slots: {
     root: 'relative',
     viewport: 'overflow-hidden rounded-lg',

package/src/components/checkbox/checkbox.tsx

@@ -1,12 +1,12 @@
 import { Checkbox as CheckboxPrimitive } from 'radix-ui'
-import type { ComponentProps } from 'react'
+import { type ComponentProps, useState } from 'react'
 import { useComponentConfig } from '../../hooks/use-component-config'
 import { CheckIcon, MinusIcon } from '../../internal/icons'
 import { focusRing, themedBorder, transition } from '../../utils/styles'
 import { tv } from '../../utils/tv'
 import { useFieldControl } from '../field/field-context'
 
-export const checkboxStyles = tv({
+export const checkboxStyles = /* @__PURE__ */ tv({
   slots: {
     root: [
       'peer mt-0.5 inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-xs border-input bg-surface text-primary-foreground shadow-xs',
@@ -18,20 +18,35 @@ export const checkboxStyles = tv({
       'data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary',
       'disabled:cursor-not-allowed disabled:opacity-50',
     ],
-    indicator: 'flex items-center justify-center [&>svg]:size-3.5 [&>svg]:stroke-[3]',
+    indicator: [
+      'flex items-center justify-center [&>svg]:size-3.5 [&>svg]:stroke-[3]',
+      // Draws the tick when the user checks it (not for boxes already checked on load).
+      '[--glyph-draw-length:24] data-[animate]:[&_path]:animate-draw',
+    ],
   },
 })
 
 export function Checkbox(inProps: ComponentProps<typeof CheckboxPrimitive.Root>) {
-  const [{ className, ...rest }, slots] = useComponentConfig('Checkbox', useFieldControl(inProps))
+  const [{ className, onCheckedChange, ...rest }, slots] = useComponentConfig(
+    'Checkbox',
+    useFieldControl(inProps),
+  )
   const s = checkboxStyles()
+  const [changed, setChanged] = useState(false)
   return (
     <CheckboxPrimitive.Root
       data-slot="checkbox"
       className={s.root({ class: [slots.root, className] })}
+      onCheckedChange={(checked) => {
+        setChanged(true)
+        onCheckedChange?.(checked)
+      }}
       {...rest}
     >
-      <CheckboxPrimitive.Indicator className={s.indicator({ class: slots.indicator })}>
+      <CheckboxPrimitive.Indicator
+        data-animate={changed || undefined}
+        className={s.indicator({ class: slots.indicator })}
+      >
         {rest.checked === 'indeterminate' ? <MinusIcon /> : <CheckIcon />}
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>

package/src/components/code/code.styles.ts

@@ -2,13 +2,13 @@ import type { StylesEntry } from '../../utils/registry'
 import { themedBorder } from '../../utils/styles'
 import { tv, type VariantProps } from '../../utils/tv'
 
-export const codeStyles = tv({
+export const codeStyles = /* @__PURE__ */ tv({
   slots: {
     base: 'rounded-xs bg-muted px-[0.3em] py-[0.15em] font-mono text-[0.875em] text-foreground',
   },
 })
 
-export const codeBlockStyles = tv({
+export const codeBlockStyles = /* @__PURE__ */ tv({
   slots: {
     root: ['relative min-w-0 overflow-hidden rounded-lg border-border bg-subtle', themedBorder],
     header:

package/src/components/collapsible/collapsible.tsx

@@ -4,7 +4,7 @@ import { useComponentConfig } from '../../hooks/use-component-config'
 import type { StylesEntry } from '../../utils/registry'
 import { tv } from '../../utils/tv'
 
-export const collapsibleStyles = tv({
+export const collapsibleStyles = /* @__PURE__ */ tv({
   slots: {
     root: '',
     trigger: '',

package/src/components/combobox/combobox.styles.ts

@@ -3,7 +3,7 @@ import { popover } from '../../utils/styles'
 import { tv, type VariantProps } from '../../utils/tv'
 import { fieldControl } from '../input/input.styles'
 
-export const comboboxStyles = tv({
+export const comboboxStyles = /* @__PURE__ */ tv({
   slots: {
     trigger: [
       ...fieldControl,
@@ -15,7 +15,10 @@ export const comboboxStyles = tv({
     placeholder: 'truncate text-faint-foreground',
     chip: 'inline-flex h-5.5 max-w-40 shrink-0 items-center truncate rounded-pill bg-muted px-2 text-caption text-foreground',
     icon: 'size-4 shrink-0 text-faint-foreground',
-    content: [popover, 'w-(--radix-popover-trigger-width) min-w-56 p-0'],
+    content: [
+      popover,
+      'origin-(--radix-popover-content-transform-origin) w-(--radix-popover-trigger-width) min-w-56 p-0',
+    ],
     search:
       'flex items-center gap-2 border-b border-border px-3 text-faint-foreground [&>svg]:size-4 [&>svg]:shrink-0',
     input:

package/src/components/command-menu/command-menu.styles.ts

@@ -1,12 +1,14 @@
 import type { StylesEntry } from '../../utils/registry'
-import { themedBorder } from '../../utils/styles'
+import { overlayMotion, themedBorder } from '../../utils/styles'
 import { tv } from '../../utils/tv'
 
-export const commandMenuStyles = tv({
+export const commandMenuStyles = /* @__PURE__ */ tv({
   slots: {
-    overlay: 'fixed inset-0 z-50 animate-fade-in bg-overlay',
+    overlay: ['fixed inset-0 z-50 bg-overlay', overlayMotion],
     content: [
-      'fixed top-[12vh] left-1/2 z-50 w-[calc(100%-2rem)] max-w-xl -translate-x-1/2 overflow-hidden rounded-xl border-border bg-raised text-foreground shadow-lg outline-none animate-pop-in',
+      'fixed top-[12vh] left-1/2 z-50 w-[calc(100%-2rem)] max-w-xl -translate-x-1/2 overflow-hidden rounded-xl border-border bg-raised text-foreground shadow-lg outline-none',
+      // Anchored near the top, so it grows down from its top edge.
+      'origin-top animate-pop-in data-[state=closed]:animate-pop-out',
       themedBorder,
     ],
     root: 'flex w-full flex-col overflow-hidden bg-raised text-foreground',

package/src/components/container/container.tsx

@@ -2,7 +2,7 @@ import { Slot } from 'radix-ui'
 import type { ComponentProps } from 'react'
 import { tv, type VariantProps } from '../../utils/tv'
 
-export const containerStyles = tv({
+export const containerStyles = /* @__PURE__ */ tv({
   base: 'mx-auto w-full px-4 sm:px-6',
   variants: {
     size: {

package/src/components/context-menu/context-menu.styles.ts

@@ -3,10 +3,12 @@ import { tv, type VariantProps } from '../../utils/tv'
 import { dropdownMenuStyles } from '../dropdown-menu/dropdown-menu.styles'
 
 /** Same look as DropdownMenu; only the available-height variable differs. */
-export const contextMenuStyles = tv({
+export const contextMenuStyles = /* @__PURE__ */ tv({
   extend: dropdownMenuStyles,
   slots: {
-    content: 'max-h-(--radix-context-menu-content-available-height)',
+    content:
+      'origin-(--radix-context-menu-content-transform-origin) max-h-(--radix-context-menu-content-available-height)',
+    subContent: 'origin-(--radix-context-menu-content-transform-origin)',
   },
 })
 

package/src/components/copy-button/copy-button.tsx

@@ -4,7 +4,7 @@ import type { StylesEntry } from '../../utils/registry'
 import { tv } from '../../utils/tv'
 import { Button, type ButtonProps } from '../button'
 
-export const copyButtonStyles = tv({
+export const copyButtonStyles = /* @__PURE__ */ tv({
   slots: {
     base: '',
     icon: 'size-4',

package/src/components/date-picker/date-picker.styles.ts

@@ -3,7 +3,7 @@ import { popover } from '../../utils/styles'
 import { tv, type VariantProps } from '../../utils/tv'
 import { fieldControl } from '../input/input.styles'
 
-export const datePickerStyles = tv({
+export const datePickerStyles = /* @__PURE__ */ tv({
   slots: {
     trigger: [
       ...fieldControl,
@@ -16,7 +16,7 @@ export const datePickerStyles = tv({
     placeholder: 'min-w-0 flex-1 truncate text-faint-foreground',
     clear:
       'inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-xs text-faint-foreground hover:bg-muted hover:text-foreground [&>svg]:size-3.5',
-    content: [popover, 'w-auto p-0'],
+    content: [popover, 'origin-(--radix-popover-content-transform-origin) w-auto p-0'],
     layout: 'flex flex-col sm:flex-row',
     presets:
       'flex gap-1 overflow-x-auto border-b border-border p-2 sm:w-40 sm:flex-col sm:overflow-visible sm:border-r sm:border-b-0',

package/src/components/description-list/description-list.styles.ts

@@ -1,7 +1,7 @@
 import type { StylesEntry } from '../../utils/registry'
 import { tv, type VariantProps } from '../../utils/tv'
 
-export const descriptionListStyles = tv({
+export const descriptionListStyles = /* @__PURE__ */ tv({
   slots: {
     root: 'grid w-full',
     item: 'grid min-w-0 gap-1',

package/src/components/dialog/dialog.styles.ts

@@ -1,13 +1,20 @@
 import type { StylesEntry } from '../../utils/registry'
-import { focusRing, themedBorder, transition } from '../../utils/styles'
+import {
+  dialogMotion,
+  focusRing,
+  overlayMotion,
+  themedBorder,
+  transition,
+} from '../../utils/styles'
 import { tv, type VariantProps } from '../../utils/tv'
 
-export const dialogStyles = tv({
+export const dialogStyles = /* @__PURE__ */ tv({
   slots: {
-    overlay: 'fixed inset-0 z-50 animate-fade-in bg-overlay',
+    overlay: ['fixed inset-0 z-50 bg-overlay', overlayMotion],
     content: [
       'fixed top-1/2 left-1/2 z-50 grid max-h-[calc(100dvh-2rem)] w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 gap-5 overflow-y-auto',
-      'rounded-xl border-border bg-surface p-6 text-foreground shadow-lg outline-none animate-pop-in',
+      'rounded-xl border-border bg-surface p-6 text-foreground shadow-lg outline-none',
+      dialogMotion,
       themedBorder,
     ],
     close: [

package/src/components/dropdown-menu/dropdown-menu.styles.ts

@@ -8,11 +8,11 @@ const item = [
   '[&_svg]:size-4 [&_svg]:shrink-0',
 ]
 
-export const dropdownMenuStyles = tv({
+export const dropdownMenuStyles = /* @__PURE__ */ tv({
   slots: {
     content: [
       popover,
-      'min-w-48 max-h-(--radix-dropdown-menu-content-available-height) overflow-y-auto p-1',
+      'origin-(--radix-dropdown-menu-content-transform-origin) min-w-48 max-h-(--radix-dropdown-menu-content-available-height) overflow-y-auto p-1',
     ],
     item,
     icon: 'flex size-4 shrink-0 items-center justify-center text-muted-foreground',
@@ -21,14 +21,14 @@ export const dropdownMenuStyles = tv({
     separator: '-mx-1 my-1 h-px bg-border',
     shortcut: 'ml-auto pl-4 font-mono text-caption tracking-wider text-faint-foreground',
     subTrigger: [...item, 'data-[state=open]:bg-muted'],
-    subContent: [popover, 'min-w-40 p-1'],
+    subContent: [popover, 'origin-(--radix-dropdown-menu-content-transform-origin) min-w-40 p-1'],
   },
   variants: {
     tone: {
       default: {},
       danger: {
-        item: 'text-danger data-highlighted:bg-danger/10',
-        icon: 'text-danger',
+        item: 'text-danger-text data-highlighted:bg-danger/10',
+        icon: 'text-danger-text',
       },
     },
     inset: { true: { item: 'pl-8', label: 'pl-8' } },

package/src/components/eyebrow/eyebrow.styles.ts

@@ -1,11 +1,11 @@
 import { tv, type VariantProps } from '../../utils/tv'
 
-export const eyebrowStyles = tv({
+export const eyebrowStyles = /* @__PURE__ */ tv({
   slots: { base: 'font-mono text-caption uppercase tracking-[0.12em]' },
   variants: {
     tone: {
       muted: { base: 'text-muted-foreground' },
-      primary: { base: 'text-primary' },
+      primary: { base: 'text-primary-text' },
     },
   },
   defaultVariants: { tone: 'muted' },

package/src/components/field/field-context.ts

@@ -2,6 +2,8 @@ import { createContext, useContext } from 'react'
 
 export interface FieldContextValue {
   id: string
+  /** Id of the visible label, for controls labelled by reference (aria-labelledby). */
+  labelId: string | undefined
   descriptionId: string | undefined
   errorId: string | undefined
   invalid: boolean

package/src/components/field/field.styles.ts

@@ -1,13 +1,15 @@
 import { tv, type VariantProps } from '../../utils/tv'
 
-export const fieldStyles = tv({
+export const fieldStyles = /* @__PURE__ */ tv({
   slots: {
     root: 'grid gap-1.5',
     label: '',
-    required: 'text-danger',
+    labelRow: 'flex items-center justify-between gap-2',
+    labelAction: 'text-small',
+    required: 'text-danger-text',
     text: 'grid gap-0.5',
     description: 'text-small text-faint-foreground',
-    error: 'text-small font-medium text-danger',
+    error: 'text-small font-medium text-danger-text',
   },
   variants: {
     orientation: {

package/src/components/field/field.tsx

@@ -6,6 +6,11 @@ import { FieldContext } from './field-context'
 
 export interface FieldProps extends Omit<ComponentProps<'div'>, 'children'>, FieldVariants {
   label?: ReactNode
+  /**
+   * Shown at the end of the label row, outside the label, so it is not part of the
+   * control's accessible name. For example a "Forgot password?" link.
+   */
+  labelAction?: ReactNode
   description?: ReactNode
   /** Error message. Marks the control invalid and is announced to screen readers. */
   error?: ReactNode
@@ -27,6 +32,7 @@ export function Field(inProps: FieldProps) {
   const [props, slots] = useComponentConfig('Field', inProps)
   const {
     label,
+    labelAction,
     description,
     error,
     required = false,
@@ -40,17 +46,18 @@ export function Field(inProps: FieldProps) {
   const generated = useId()
   const id = controlId ?? generated
   const invalid = Boolean(error)
+  const labelId = label ? `${id}-label` : undefined
   const descriptionId = description ? `${id}-description` : undefined
   const errorId = invalid ? `${id}-error` : undefined
   const s = fieldStyles({ orientation })
 
   const context = useMemo(
-    () => ({ id, descriptionId, errorId, invalid, required, disabled }),
-    [id, descriptionId, errorId, invalid, required, disabled],
+    () => ({ id, labelId, descriptionId, errorId, invalid, required, disabled }),
+    [id, labelId, descriptionId, errorId, invalid, required, disabled],
   )
 
-  const labelNode = label ? (
-    <Label htmlFor={id} className={s.label({ class: slots.label })}>
+  const labelElement = label ? (
+    <Label id={labelId} htmlFor={id} className={s.label({ class: slots.label })}>
       {label}
       {required && (
         <span className={s.required({ class: slots.required })} aria-hidden="true">
@@ -59,6 +66,20 @@ export function Field(inProps: FieldProps) {
       )}
     </Label>
   ) : null
+  const labelNode =
+    labelElement && labelAction ? (
+      <div data-slot="field-label-row" className={s.labelRow({ class: slots.labelRow })}>
+        {labelElement}
+        <span
+          data-slot="field-label-action"
+          className={s.labelAction({ class: slots.labelAction })}
+        >
+          {labelAction}
+        </span>
+      </div>
+    ) : (
+      labelElement
+    )
 
   const messages = (
     <>

package/src/components/file-upload/file-upload.styles.ts

@@ -2,7 +2,7 @@ import type { StylesEntry } from '../../utils/registry'
 import { focusRing, themedBorder, transition } from '../../utils/styles'
 import { tv } from '../../utils/tv'
 
-export const fileUploadStyles = tv({
+export const fileUploadStyles = /* @__PURE__ */ tv({
   slots: {
     root: 'grid gap-3',
     dropzone: [
@@ -16,9 +16,9 @@ export const fileUploadStyles = tv({
     ],
     icon: 'flex size-10 items-center justify-center rounded-md border border-border bg-surface text-muted-foreground shadow-xs [&>svg]:size-5',
     title: 'text-small font-medium text-foreground',
-    highlight: 'text-primary',
+    highlight: 'text-primary-text',
     hint: 'text-caption text-faint-foreground',
-    rejections: 'grid gap-1 text-small font-medium text-danger',
+    rejections: 'grid gap-1 text-small font-medium text-danger-text',
     list: 'grid gap-2',
     item: [
       'grid grid-cols-[auto_1fr_auto] items-center gap-3 rounded-md border-border bg-surface px-3 py-2.5',
@@ -29,7 +29,7 @@ export const fileUploadStyles = tv({
     fileText: 'grid min-w-0 gap-1',
     fileName: 'truncate text-small font-medium text-foreground',
     fileMeta: 'text-caption tabular-nums text-faint-foreground',
-    fileError: 'text-caption font-medium text-danger',
+    fileError: 'text-caption font-medium text-danger-text',
     progress: 'h-1 overflow-hidden rounded-pill bg-muted',
     progressBar:
       'h-full rounded-pill bg-primary transition-[width] duration-(--glyph-duration-base)',

package/src/components/file-upload/file-upload.tsx

@@ -1,6 +1,7 @@
 import { type DragEvent, type ReactNode, useId, useRef, useState } from 'react'
 import { useComponentConfig } from '../../hooks/use-component-config'
 import { useControllableState } from '../../hooks/use-controllable-state'
+import { PresenceItem, PresenceList } from '../../motion/presence-list'
 import { IconButton } from '../button'
 import { useFieldControl } from '../field/field-context'
 import { fileUploadStyles } from './file-upload.styles'
@@ -287,55 +288,57 @@ export function FileUpload(inProps: FileUploadProps) {
 
       {files.length > 0 && (
         <ul className={s.list({ class: slots.list })} aria-label="Selected files">
-          {files.map((item) => (
-            <li
-              key={item.id}
-              data-slot="file-upload-item"
-              className={s.item({ class: slots.item })}
-            >
-              <span className={s.fileIcon({ class: slots.fileIcon })}>
-                <FileIcon />
-              </span>
-              <span className={s.fileText({ class: slots.fileText })}>
-                <span className={s.fileName({ class: slots.fileName })}>{item.file.name}</span>
-                {item.error ? (
-                  <span className={s.fileError({ class: slots.fileError })}>{item.error}</span>
-                ) : (
-                  <span className={s.fileMeta({ class: slots.fileMeta })}>
-                    {formatBytes(item.file.size)}
-                    {item.progress !== undefined &&
-                      item.progress < 100 &&
-                      ` · ${Math.round(item.progress)}%`}
-                  </span>
-                )}
-                {item.progress !== undefined && item.progress < 100 && !item.error && (
-                  <span
-                    role="progressbar"
-                    aria-label={`Uploading ${item.file.name}`}
-                    aria-valuemin={0}
-                    aria-valuemax={100}
-                    aria-valuenow={Math.round(item.progress)}
-                    className={s.progress({ class: slots.progress })}
-                  >
+          <PresenceList>
+            {files.map((item) => (
+              <PresenceItem
+                key={item.id}
+                data-slot="file-upload-item"
+                className={s.item({ class: slots.item })}
+              >
+                <span className={s.fileIcon({ class: slots.fileIcon })}>
+                  <FileIcon />
+                </span>
+                <span className={s.fileText({ class: slots.fileText })}>
+                  <span className={s.fileName({ class: slots.fileName })}>{item.file.name}</span>
+                  {item.error ? (
+                    <span className={s.fileError({ class: slots.fileError })}>{item.error}</span>
+                  ) : (
+                    <span className={s.fileMeta({ class: slots.fileMeta })}>
+                      {formatBytes(item.file.size)}
+                      {item.progress !== undefined &&
+                        item.progress < 100 &&
+                        ` · ${Math.round(item.progress)}%`}
+                    </span>
+                  )}
+                  {item.progress !== undefined && item.progress < 100 && !item.error && (
                     <span
-                      className={s.progressBar({ class: slots.progressBar })}
-                      style={{ width: `${Math.max(0, Math.min(100, item.progress))}%` }}
-                    />
-                  </span>
-                )}
-              </span>
-              <IconButton
-                size="sm"
-                icon={<XIcon />}
-                aria-label={`Remove ${item.file.name}`}
-                disabled={disabled}
-                onClick={() => {
-                  setFiles(files.filter((f) => f.id !== item.id))
-                  setRejections([])
-                }}
-              />
-            </li>
-          ))}
+                      role="progressbar"
+                      aria-label={`Uploading ${item.file.name}`}
+                      aria-valuemin={0}
+                      aria-valuemax={100}
+                      aria-valuenow={Math.round(item.progress)}
+                      className={s.progress({ class: slots.progress })}
+                    >
+                      <span
+                        className={s.progressBar({ class: slots.progressBar })}
+                        style={{ width: `${Math.max(0, Math.min(100, item.progress))}%` }}
+                      />
+                    </span>
+                  )}
+                </span>
+                <IconButton
+                  size="sm"
+                  icon={<XIcon />}
+                  aria-label={`Remove ${item.file.name}`}
+                  disabled={disabled}
+                  onClick={() => {
+                    setFiles(files.filter((f) => f.id !== item.id))
+                    setRejections([])
+                  }}
+                />
+              </PresenceItem>
+            ))}
+          </PresenceList>
         </ul>
       )}
     </div>

package/src/components/grid/grid.tsx

@@ -90,7 +90,7 @@ function colsToClasses(cols: GridCols): string {
     .join(' ')
 }
 
-export const gridStyles = tv({
+export const gridStyles = /* @__PURE__ */ tv({
   slots: { base: 'grid' },
   variants: {
     gap: {