@glyphui/ui 0.3.0 → 0.5.0

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',
@@ -17,7 +17,7 @@ export const linkStyles = tv({
     tone: {
       default: { base: 'text-foreground' },
       muted: { base: 'text-muted-foreground hover:text-foreground' },
-      primary: { base: 'text-primary' },
+      primary: { base: 'text-primary-text' },
     },
     underline: {
       hover: {

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

@@ -2,12 +2,14 @@ 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: '',
     body: 'grid gap-4',
     footer: '',
+    /** Wraps body and footer when `onSubmit` is set; `contents` keeps the dialog layout. */
+    form: 'contents',
   },
 })
 

package/src/components/modal/modal.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react'
+import type { FormEvent, ReactNode } from 'react'
 import { useComponentConfig } from '../../hooks/use-component-config'
 import {
   Dialog,
@@ -14,7 +14,7 @@ import {
 } from '../dialog'
 import { modalStyles } from './modal.styles'
 
-export interface ModalProps extends Omit<DialogContentProps, 'title' | 'children'> {
+export interface ModalProps extends Omit<DialogContentProps, 'title' | 'children' | 'onSubmit'> {
   open?: boolean
   defaultOpen?: boolean
   onOpenChange?: (open: boolean) => void
@@ -27,6 +27,12 @@ export interface ModalProps extends Omit<DialogContentProps, 'title' | 'children
   footer?: ReactNode
   /** Close when the backdrop is clicked. Default true. */
   closeOnOverlayClick?: boolean
+  /**
+   * Turns the body and footer into one `<form>`, so a `type="submit"` button in the footer
+   * submits the fields in the body. The page does not reload. With `@glyphui/ui/form`, use
+   * `<Form>` in the body and `<FormSubmit form={form}>` in the footer instead.
+   */
+  onSubmit?: (event: FormEvent<HTMLFormElement>) => void
   children?: ReactNode
 }
 
@@ -45,12 +51,21 @@ export function Modal(inProps: ModalProps) {
     trigger,
     footer,
     closeOnOverlayClick = true,
+    onSubmit,
     onPointerDownOutside,
     className,
     children,
     ...rest
   } = props
   const s = modalStyles()
+  const content = (
+    <>
+      {children && <DialogBody className={s.body({ class: slots.body })}>{children}</DialogBody>}
+      {footer && (
+        <DialogFooter className={s.footer({ class: slots.footer })}>{footer}</DialogFooter>
+      )}
+    </>
+  )
 
   return (
     <Dialog
@@ -73,9 +88,19 @@ export function Modal(inProps: ModalProps) {
           <DialogTitle>{title}</DialogTitle>
           {description && <DialogDescription>{description}</DialogDescription>}
         </DialogHeader>
-        {children && <DialogBody className={s.body({ class: slots.body })}>{children}</DialogBody>}
-        {footer && (
-          <DialogFooter className={s.footer({ class: slots.footer })}>{footer}</DialogFooter>
+        {onSubmit ? (
+          <form
+            data-slot="modal-form"
+            className={s.form({ class: slots.form })}
+            onSubmit={(event) => {
+              event.preventDefault()
+              onSubmit(event)
+            }}
+          >
+            {content}
+          </form>
+        ) : (
+          content
         )}
       </DialogContent>
     </Dialog>

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/navigation-menu/navigation-menu.tsx

@@ -1,7 +1,7 @@
 import { NavigationMenu as NavPrimitive } from 'radix-ui'
 import type { ComponentProps, ReactNode } from 'react'
 import { useComponentConfig } from '../../hooks/use-component-config'
-import { useLinkComponent } from '../../provider/glyph-context'
+import { useIsActive, useLinkComponent } from '../../provider/glyph-context'
 import { navigationMenuStyles } from './navigation-menu.styles'
 
 const s = navigationMenuStyles()
@@ -132,25 +132,35 @@ export interface NavigationMenuLinkProps
   href?: string
 }
 
-/** A top-level link (no panel). Set `active` for the current page. */
+/**
+ * A top-level link (no panel). Marked active automatically from the provider's `router`;
+ * set `active` to override.
+ */
 export function NavigationMenuLink({
   href,
+  active: activeProp,
   className,
   children,
   ...props
 }: NavigationMenuLinkProps) {
   const slots = useSlots()
   const Link = useLinkComponent()
+  const active = useIsActive(href, { explicit: activeProp })
   const cls = s.link({ class: [slots.link, className] })
   if (href === undefined) {
     return (
-      <NavPrimitive.Link data-slot="navigation-menu-link" className={cls} {...props}>
+      <NavPrimitive.Link
+        data-slot="navigation-menu-link"
+        className={cls}
+        active={active}
+        {...props}
+      >
         {children}
       </NavPrimitive.Link>
     )
   }
   return (
-    <NavPrimitive.Link data-slot="navigation-menu-link" asChild {...props}>
+    <NavPrimitive.Link data-slot="navigation-menu-link" asChild active={active} {...props}>
       <Link href={href} className={cls}>
         {children}
       </Link>

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: [
@@ -16,9 +16,9 @@ export const passwordInputStyles = tv({
   },
   variants: {
     strength: {
-      weak: { label: 'text-danger' },
-      fair: { label: 'text-warning' },
-      strong: { label: 'text-success' },
+      weak: { label: 'text-danger-text' },
+      fair: { label: 'text-warning-text' },
+      strong: { label: 'text-success-text' },
     },
   },
 })

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',
@@ -20,7 +20,7 @@ export const proseStyles = tv({
       // Text
       '[&_p]:my-[1em] [&_p]:text-pretty',
       '[&_strong]:font-semibold [&_strong]:text-foreground',
-      '[&_a]:font-medium [&_a]:text-primary [&_a]:underline [&_a]:decoration-primary/40 [&_a]:underline-offset-4 [&_a:hover]:decoration-primary',
+      '[&_a]:font-medium [&_a]:text-primary-text [&_a]:underline [&_a]:decoration-primary/40 [&_a]:underline-offset-4 [&_a:hover]:decoration-primary',
       // Lists
       '[&_ul]:my-[1em] [&_ul]:list-disc [&_ul]:pl-[1.5em] [&_ol]:my-[1em] [&_ol]:list-decimal [&_ol]:pl-[1.5em]',
       '[&_li]:my-[0.35em] [&_li]:pl-[0.25em] [&_li::marker]:text-faint-foreground',

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

@@ -1,11 +1,11 @@
 import { ScrollArea as ScrollAreaPrimitive } from 'radix-ui'
-import type { ComponentProps } from 'react'
+import { type ComponentProps, useEffect, useRef, useState } from 'react'
 import { useComponentConfig } from '../../hooks/use-component-config'
 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],
@@ -31,6 +31,24 @@ export interface ScrollAreaProps extends ComponentProps<typeof ScrollAreaPrimiti
   viewportClassName?: string
 }
 
+/** True while the element's content overflows it, so keyboard users need to reach it. */
+function useOverflowing<E extends HTMLElement>() {
+  const ref = useRef<E>(null)
+  const [overflowing, setOverflowing] = useState(false)
+  useEffect(() => {
+    const el = ref.current
+    if (!el) return
+    const measure = () =>
+      setOverflowing(el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth)
+    measure()
+    const observer = new ResizeObserver(measure)
+    observer.observe(el)
+    if (el.firstElementChild) observer.observe(el.firstElementChild)
+    return () => observer.disconnect()
+  }, [])
+  return [ref, overflowing] as const
+}
+
 /**
  * A scrollable region with slim, theme-colored scrollbars. Give it a height (or width)
  * with `className`, e.g. `h-72`.
@@ -39,6 +57,7 @@ export function ScrollArea(inProps: ScrollAreaProps) {
   const [props, slots] = useComponentConfig('ScrollArea', inProps)
   const { orientation = 'vertical', viewportClassName, className, children, ...rest } = props
   const s = scrollAreaStyles()
+  const [viewportRef, overflowing] = useOverflowing<HTMLDivElement>()
   const bar = (o: 'vertical' | 'horizontal') => (
     <ScrollAreaPrimitive.Scrollbar
       data-slot="scroll-area-scrollbar"
@@ -55,7 +74,10 @@ export function ScrollArea(inProps: ScrollAreaProps) {
       {...rest}
     >
       <ScrollAreaPrimitive.Viewport
+        ref={viewportRef}
         data-slot="scroll-area-viewport"
+        // Scrollable regions must be reachable by keyboard to scroll with arrow keys.
+        tabIndex={overflowing ? 0 : undefined}
         className={s.viewport({ class: [slots.viewport, viewportClassName] })}
       >
         {children}

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

package/src/components/segmented-control/segmented-control.tsx

@@ -1,22 +1,29 @@
 import { ToggleGroup } from 'radix-ui'
-import type { ReactNode } from 'react'
+import { type ReactNode, useContext, useId } from 'react'
 import { useComponentConfig } from '../../hooks/use-component-config'
+import { useControllableState } from '../../hooks/use-controllable-state'
+import { warnOnce } from '../../internal/dev'
+import { ActiveIndicator } from '../../motion/active-indicator'
 import { focusRing, themedBorder, transition } from '../../utils/styles'
 import { tv, type VariantProps } from '../../utils/tv'
+import { FieldContext } from '../field/field-context'
 
-export const segmentedControlStyles = tv({
+export const segmentedControlStyles = /* @__PURE__ */ tv({
   slots: {
     root: [
-      'inline-flex items-center gap-0.5 rounded-md border-border bg-muted p-0.5',
+      'isolate inline-flex items-center gap-0.5 rounded-md border-border bg-muted p-0.5',
       themedBorder,
     ],
     item: [
-      'inline-flex h-full cursor-pointer select-none items-center justify-center gap-1.5 whitespace-nowrap rounded-[calc(var(--radius-md)-2px)] px-3 font-medium text-muted-foreground',
+      'relative inline-flex h-full cursor-pointer select-none items-center justify-center gap-1.5 whitespace-nowrap rounded-[calc(var(--radius-md)-2px)] px-3 font-medium text-muted-foreground',
       transition,
       focusRing,
-      'hover:text-foreground data-[state=on]:bg-raised data-[state=on]:text-foreground data-[state=on]:shadow-xs',
+      'hover:text-foreground data-[state=on]:text-foreground',
       'disabled:pointer-events-none disabled:opacity-50 [&>svg]:size-4',
     ],
+    /** The raised thumb that slides to the selected option. */
+    indicator:
+      'pointer-events-none absolute inset-0 -z-10 rounded-[calc(var(--radius-md)-2px)] bg-raised shadow-xs',
   },
   variants: {
     size: {
@@ -40,7 +47,9 @@ export interface SegmentedControlProps<T extends string>
   value?: T
   defaultValue?: T
   onValueChange?: (value: T) => void
-  'aria-label': string
+  /** Required unless the control sits in a `<Field label>`, which labels it. */
+  'aria-label'?: string
+  'aria-labelledby'?: string
   className?: string
   id?: string
 }
@@ -52,16 +61,32 @@ export interface SegmentedControlProps<T extends string>
 export function SegmentedControl<T extends string>(inProps: SegmentedControlProps<T>) {
   const [props, slots] = useComponentConfig('SegmentedControl', inProps)
   const { options, value, defaultValue, onValueChange, size, fullWidth, className, ...rest } = props
+  const field = useContext(FieldContext)
   const s = segmentedControlStyles({ size, fullWidth })
+  const [selected, setSelected] = useControllableState<T | undefined>({
+    value,
+    defaultValue,
+    onChange: (next) => next !== undefined && onValueChange?.(next),
+  })
+  const indicatorId = `${useId()}-segmented-indicator`
+  const labelledBy = rest['aria-labelledby'] ?? (rest['aria-label'] ? undefined : field?.labelId)
+  if (!rest['aria-label'] && !labelledBy) {
+    warnOnce(
+      'segmented-control-label',
+      'SegmentedControl needs a label: pass aria-label, or place it in a <Field label="…">.',
+    )
+  }
+  const describedBy = [field?.descriptionId, field?.errorId].filter(Boolean).join(' ')
   return (
     <ToggleGroup.Root
       type="single"
       data-slot="segmented-control"
-      {...(value !== undefined && { value })}
-      {...(defaultValue !== undefined && { defaultValue })}
+      value={selected ?? ''}
       // Radix emits '' when the active item is clicked again; a segmented control never deselects.
-      onValueChange={(next: string) => next && onValueChange?.(next as T)}
+      onValueChange={(next: string) => next && setSelected(next as T)}
       className={s.root({ class: [slots.root, className] })}
+      aria-labelledby={labelledBy}
+      aria-describedby={describedBy || undefined}
       {...rest}
     >
       {options.map((option) => (
@@ -72,6 +97,12 @@ export function SegmentedControl<T extends string>(inProps: SegmentedControlProp
           className={s.item({ class: slots.item })}
         >
           {option.label}
+          {option.value === selected && (
+            <ActiveIndicator
+              layoutId={indicatorId}
+              className={s.indicator({ class: slots.indicator })}
+            />
+          )}
         </ToggleGroup.Item>
       ))}
     </ToggleGroup.Root>

package/src/components/select/select.tsx

@@ -7,7 +7,7 @@ import { tv, type VariantProps } from '../../utils/tv'
 import { useFieldControl } from '../field/field-context'
 import { fieldControl } from '../input/input.styles'
 
-export const selectStyles = tv({
+export const selectStyles = /* @__PURE__ */ tv({
   slots: {
     trigger: [
       ...fieldControl,
@@ -19,7 +19,7 @@ export const selectStyles = tv({
     icon: 'size-4 shrink-0 text-faint-foreground',
     content: [
       popover,
-      'max-h-(--radix-select-content-available-height) min-w-(--radix-select-trigger-width)',
+      'origin-(--radix-select-content-transform-origin) max-h-(--radix-select-content-available-height) min-w-(--radix-select-trigger-width)',
     ],
     viewport: 'p-1',
     item: [

package/src/components/separator/separator.tsx

@@ -3,7 +3,7 @@ import type { ComponentProps } from 'react'
 import { useComponentConfig } from '../../hooks/use-component-config'
 import { tv } from '../../utils/tv'
 
-export const separatorStyles = tv({
+export const separatorStyles = /* @__PURE__ */ tv({
   slots: { base: 'shrink-0 bg-border' },
   variants: {
     orientation: {

package/src/components/sheet/sheet.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 sheetStyles = tv({
+export const sheetStyles = /* @__PURE__ */ tv({
   slots: {
     overlay:
       'fixed inset-0 z-50 bg-overlay data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out',

package/src/components/skeleton/skeleton.tsx

@@ -2,7 +2,7 @@ import type { ComponentProps } from 'react'
 import { useComponentConfig } from '../../hooks/use-component-config'
 import { tv } from '../../utils/tv'
 
-export const skeletonStyles = tv({
+export const skeletonStyles = /* @__PURE__ */ tv({
   slots: { base: 'animate-pulse rounded-sm bg-muted' },
 })
 

package/src/components/slider/slider.styles.ts

@@ -1,7 +1,7 @@
 import type { StylesEntry } from '../../utils/registry'
 import { tv, type VariantProps } from '../../utils/tv'
 
-export const sliderStyles = tv({
+export const sliderStyles = /* @__PURE__ */ tv({
   slots: {
     wrapper: 'grid w-full gap-1.5',
     root: 'relative flex h-5 w-full touch-none select-none items-center data-disabled:cursor-not-allowed data-disabled:opacity-50',