@glyphui/ui 0.4.0 → 0.5.0

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,7 +21,7 @@ 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: {

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

@@ -1,6 +1,6 @@
 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: {

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

@@ -1,6 +1,6 @@
 import { tv, type VariantProps } from '../../utils/tv'
 
-export const fieldStyles = tv({
+export const fieldStyles = /* @__PURE__ */ tv({
   slots: {
     root: 'grid gap-1.5',
     label: '',

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: [

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: {

package/src/components/heading/heading.styles.ts

@@ -1,6 +1,6 @@
 import { tv, type VariantProps } from '../../utils/tv'
 
-export const headingStyles = tv({
+export const headingStyles = /* @__PURE__ */ tv({
   slots: { base: 'font-display text-balance text-foreground' },
   variants: {
     size: {

package/src/components/hover-card/hover-card.tsx

@@ -5,9 +5,12 @@ import type { StylesEntry } from '../../utils/registry'
 import { popover } from '../../utils/styles'
 import { tv } from '../../utils/tv'
 
-export const hoverCardStyles = tv({
+export const hoverCardStyles = /* @__PURE__ */ tv({
   slots: {
-    content: [popover, 'w-72 max-w-[calc(100vw-2rem)] p-4 text-small outline-none'],
+    content: [
+      popover,
+      'origin-(--radix-hover-card-content-transform-origin) w-72 max-w-[calc(100vw-2rem)] p-4 text-small outline-none',
+    ],
   },
 })
 

package/src/components/input/input.styles.ts

@@ -10,7 +10,7 @@ export const fieldControl = [
   'data-invalid:border-danger aria-invalid:border-danger',
 ]
 
-export const inputStyles = tv({
+export const inputStyles = /* @__PURE__ */ tv({
   slots: {
     root: [
       ...fieldControl,

package/src/components/input-otp/input-otp.styles.ts

@@ -2,7 +2,7 @@ import type { StylesEntry } from '../../utils/registry'
 import { transition } from '../../utils/styles'
 import { tv, type VariantProps } from '../../utils/tv'
 
-export const inputOtpStyles = tv({
+export const inputOtpStyles = /* @__PURE__ */ tv({
   slots: {
     root: 'flex items-center gap-2 has-disabled:opacity-50',
     input: 'disabled:cursor-not-allowed',

package/src/components/kbd/kbd.tsx

@@ -2,7 +2,7 @@ import type { ComponentProps } from 'react'
 import { useComponentConfig } from '../../hooks/use-component-config'
 import { tv } from '../../utils/tv'
 
-export const kbdStyles = tv({
+export const kbdStyles = /* @__PURE__ */ tv({
   slots: {
     base: 'inline-flex h-5 min-w-5 items-center justify-center rounded-xs border border-border bg-muted px-1 font-mono text-[0.6875rem] font-medium text-muted-foreground shadow-xs',
   },

package/src/components/label/label.tsx

@@ -3,7 +3,7 @@ import type { ComponentProps } from 'react'
 import { useComponentConfig } from '../../hooks/use-component-config'
 import { tv } from '../../utils/tv'
 
-export const labelStyles = tv({
+export const labelStyles = /* @__PURE__ */ tv({
   slots: {
     base: 'inline-flex select-none items-center gap-1 text-small font-medium text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-60',
   },

package/src/components/link/link.styles.ts

@@ -2,7 +2,7 @@ import type { StylesEntry } from '../../utils/registry'
 import { focusRing } from '../../utils/styles'
 import { tv, type VariantProps } from '../../utils/tv'
 
-export const linkStyles = tv({
+export const linkStyles = /* @__PURE__ */ tv({
   slots: {
     base: [
       'inline-flex items-baseline gap-1 rounded-xs font-medium',

package/src/components/modal/modal.styles.ts

@@ -2,7 +2,7 @@ import type { StylesEntry } from '../../utils/registry'
 import { tv } from '../../utils/tv'
 
 /** Modal is built from Dialog parts; these slots add Modal-specific classes on top. */
-export const modalStyles = tv({
+export const modalStyles = /* @__PURE__ */ tv({
   slots: {
     content: '',
     header: '',

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

@@ -10,7 +10,7 @@ const topLevel = [
   'data-active:text-foreground',
 ]
 
-export const navigationMenuStyles = tv({
+export const navigationMenuStyles = /* @__PURE__ */ tv({
   slots: {
     root: 'relative z-10 flex max-w-max flex-1 items-center justify-center',
     list: 'group flex flex-1 list-none items-center justify-center gap-1',
@@ -21,7 +21,7 @@ export const navigationMenuStyles = tv({
     content: 'top-0 left-0 w-full p-2 animate-fade-in md:absolute md:w-auto',
     viewportWrapper: 'absolute top-full left-0 flex justify-center',
     viewport: [
-      'relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-[calc(100vw-2rem)] origin-top overflow-hidden rounded-lg border-border bg-raised text-foreground shadow-lg animate-pop-in',
+      'relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-[calc(100vw-2rem)] origin-top overflow-hidden rounded-lg border-border bg-raised text-foreground shadow-lg animate-pop-in data-[state=closed]:animate-pop-out',
       'md:w-(--radix-navigation-menu-viewport-width)',
       'transition-[width,height] duration-(--glyph-duration-base) ease-standard',
       themedBorder,

package/src/components/number-input/number-input.styles.ts

@@ -3,7 +3,7 @@ import { focusRing } from '../../utils/styles'
 import { tv, type VariantProps } from '../../utils/tv'
 import { fieldControl } from '../input/input.styles'
 
-export const numberInputStyles = tv({
+export const numberInputStyles = /* @__PURE__ */ tv({
   slots: {
     root: [
       ...fieldControl,

package/src/components/pagination/pagination.styles.ts

@@ -2,20 +2,22 @@ import type { StylesEntry } from '../../utils/registry'
 import { focusRing, transition } from '../../utils/styles'
 import { tv, type VariantProps } from '../../utils/tv'
 
-export const paginationStyles = tv({
+export const paginationStyles = /* @__PURE__ */ tv({
   slots: {
     root: 'flex',
-    list: 'flex flex-wrap items-center gap-1',
+    list: 'isolate flex flex-wrap items-center gap-1',
     item: [
-      'inline-flex shrink-0 cursor-pointer select-none items-center justify-center rounded-md font-medium tabular-nums text-muted-foreground',
+      'relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center rounded-md font-medium tabular-nums text-muted-foreground',
       transition,
       focusRing,
       'hover:bg-muted hover:text-foreground',
-      'aria-[current=page]:bg-primary aria-[current=page]:text-primary-foreground aria-[current=page]:shadow-xs',
+      'aria-[current=page]:text-primary-foreground aria-[current=page]:hover:bg-transparent',
       'disabled:pointer-events-none disabled:opacity-40 aria-disabled:pointer-events-none aria-disabled:opacity-40',
       '[&>svg]:size-4',
     ],
     ellipsis: 'inline-flex items-center justify-center text-faint-foreground',
+    /** The current page's highlight. Slides to the new page when it changes. */
+    indicator: 'pointer-events-none absolute inset-0 -z-10 rounded-[inherit] bg-primary shadow-xs',
   },
   variants: {
     size: {

package/src/components/pagination/pagination.tsx

@@ -1,6 +1,7 @@
-import type { ComponentProps, ReactNode } from 'react'
+import { type ComponentProps, type ReactNode, useId } from 'react'
 import { useComponentConfig } from '../../hooks/use-component-config'
 import { ChevronLeftIcon, ChevronRightIcon } from '../../internal/icons'
+import { ActiveIndicator } from '../../motion/active-indicator'
 import { useLinkComponent } from '../../provider/glyph-context'
 import { type PaginationVariants, paginationStyles } from './pagination.styles'
 import { paginationRange } from './pagination-range'
@@ -65,6 +66,7 @@ export function Pagination(inProps: PaginationProps) {
   const s = paginationStyles({ size })
   const itemClass = s.item({ class: slots.item })
   const current = Math.min(Math.max(1, page), Math.max(1, pageCount))
+  const indicatorId = `${useId()}-pagination-indicator`
 
   const control = (
     target: number,
@@ -73,6 +75,17 @@ export function Pagination(inProps: PaginationProps) {
     options: { current?: boolean } = {},
   ) => {
     const disabled = target < 1 || target > pageCount || (target === current && !options.current)
+    if (options.current) {
+      content = (
+        <>
+          <ActiveIndicator
+            layoutId={indicatorId}
+            className={s.indicator({ class: slots.indicator })}
+          />
+          {content}
+        </>
+      )
+    }
     const shared = {
       'aria-label': label,
       'aria-current': options.current ? ('page' as const) : undefined,

package/src/components/password-input/password-input.styles.ts

@@ -2,7 +2,7 @@ import type { StylesEntry } from '../../utils/registry'
 import { focusRing } from '../../utils/styles'
 import { tv } from '../../utils/tv'
 
-export const passwordInputStyles = tv({
+export const passwordInputStyles = /* @__PURE__ */ tv({
   slots: {
     root: 'grid gap-1.5',
     toggle: [

package/src/components/popover/popover.tsx

@@ -5,7 +5,7 @@ import type { StylesEntry } from '../../utils/registry'
 import { popover } from '../../utils/styles'
 import { tv } from '../../utils/tv'
 
-export const popoverStyles = tv({
+export const popoverStyles = /* @__PURE__ */ tv({
   slots: {
     content: [
       popover,

package/src/components/progress/progress.styles.ts

@@ -1,7 +1,7 @@
 import type { StylesEntry } from '../../utils/registry'
 import { tv, type VariantProps } from '../../utils/tv'
 
-export const progressStyles = tv({
+export const progressStyles = /* @__PURE__ */ tv({
   slots: {
     root: 'grid w-full gap-1.5',
     header: 'flex items-baseline justify-between gap-3 text-small',
@@ -32,7 +32,7 @@ export const progressStyles = tv({
 
 export type ProgressVariants = VariantProps<typeof progressStyles>
 
-export const progressCircleStyles = tv({
+export const progressCircleStyles = /* @__PURE__ */ tv({
   slots: {
     root: 'relative inline-flex shrink-0 items-center justify-center',
     svg: 'size-full -rotate-90',

package/src/components/prose/prose.tsx

@@ -8,7 +8,7 @@ import { tv, type VariantProps } from '../../utils/tv'
  * Element styles for long-form content. Every value comes from theme tokens, so articles
  * pick up the theme's display font, type scale, colors and radius.
  */
-export const proseStyles = tv({
+export const proseStyles = /* @__PURE__ */ tv({
   slots: {
     base: [
       'text-foreground [&>:first-child]:mt-0 [&>:last-child]:mb-0',

package/src/components/radio-group/radio-group.styles.ts

@@ -8,7 +8,7 @@ const control = [
   transition,
 ]
 
-export const radioGroupStyles = tv({
+export const radioGroupStyles = /* @__PURE__ */ tv({
   slots: {
     root: '',
     option: 'flex items-start gap-2.5',

package/src/components/resizable/resizable.styles.ts

@@ -1,7 +1,7 @@
 import type { StylesEntry } from '../../utils/registry'
 import { tv, type VariantProps } from '../../utils/tv'
 
-export const resizableStyles = tv({
+export const resizableStyles = /* @__PURE__ */ tv({
   slots: {
     group: 'flex h-full w-full data-[panel-group-direction=vertical]:flex-col',
     panel: 'min-w-0',

package/src/components/scroll-area/scroll-area.tsx

@@ -5,7 +5,7 @@ import type { StylesEntry } from '../../utils/registry'
 import { focusRing } from '../../utils/styles'
 import { tv } from '../../utils/tv'
 
-export const scrollAreaStyles = tv({
+export const scrollAreaStyles = /* @__PURE__ */ tv({
   slots: {
     root: 'relative overflow-hidden',
     viewport: ['size-full rounded-[inherit]', focusRing],

package/src/components/section/section.tsx

@@ -2,7 +2,7 @@ import { Slot } from 'radix-ui'
 import type { ComponentProps } from 'react'
 import { tv, type VariantProps } from '../../utils/tv'
 
-export const sectionStyles = tv({
+export const sectionStyles = /* @__PURE__ */ tv({
   base: 'w-full',
   variants: {
     spacing: {