@pantoia/ui 0.3.0 → 0.4.0

package/toast/index.module.css

@@ -0,0 +1,187 @@
+@keyframes swipe-out-left {
+  from { transform: var(--toast-y) translateX(var(--toast-swipe-movement-x)); opacity: 1; }
+  to   { transform: var(--toast-y) translateX(calc(var(--toast-swipe-movement-x) - 100%)); opacity: 0; }
+}
+
+@keyframes swipe-out-right {
+  from { transform: var(--toast-y) translateX(var(--toast-swipe-movement-x)); opacity: 1; }
+  to   { transform: var(--toast-y) translateX(calc(var(--toast-swipe-movement-x) + 100%)); opacity: 0; }
+}
+
+@keyframes swipe-out-up {
+  from { transform: var(--toast-y) translateY(var(--toast-swipe-movement-y)); opacity: 1; }
+  to   { transform: var(--toast-y) translateY(calc(var(--toast-swipe-movement-y) - 100%)); opacity: 0; }
+}
+
+@keyframes swipe-out-down {
+  from { transform: var(--toast-y) translateY(var(--toast-swipe-movement-y)); opacity: 1; }
+  to   { transform: var(--toast-y) translateY(calc(var(--toast-swipe-movement-y) + 100%)); opacity: 0; }
+}
+
+.viewport {
+  --toast-gap: 8px;
+  --toast-inset: 16px;
+  position: fixed;
+  box-sizing: border-box;
+  width: 356px;
+  margin: 0;
+  padding: 0;
+  outline: none;
+  transition: transform 400ms ease;
+}
+
+.viewport[data-position$='right']  { right: var(--toast-inset); }
+.viewport[data-position$='left']   { left: var(--toast-inset); }
+.viewport[data-position$='center'] { left: 50%; transform: translateX(-50%); }
+.viewport[data-position^='top']    { top: var(--toast-inset); }
+.viewport[data-position^='bottom'] { bottom: var(--toast-inset); }
+
+.toast {
+  --toast-lift: -1;
+  --toast-y: translateY(0);
+  position: absolute;
+  bottom: 0;
+  z-index: calc(1000 - var(--toast-index));
+  box-sizing: border-box;
+  outline: none;
+  overflow-wrap: anywhere;
+  touch-action: none;
+  opacity: 1;
+  transform: var(--toast-y);
+  transition: transform 400ms, opacity 400ms, height 400ms, box-shadow 200ms;
+}
+
+.toast:focus-visible {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(0, 0, 0, 0.2);
+}
+
+.toast > * {
+  transition: opacity 400ms;
+}
+
+.viewport[data-position^='top'] .toast   { --toast-lift: 1; top: 0; bottom: auto; }
+.viewport[data-position$='right'] .toast { right: 0; }
+.viewport[data-position$='left'] .toast  { left: 0; }
+
+.toast:not([data-expanded]) {
+  --toast-y: translateY(calc(var(--toast-lift) * var(--toast-gap) * var(--toast-index))) scale(calc(1 - var(--toast-index) * 0.05));
+}
+
+.toast:not([data-expanded]):not([data-front]) {
+  height: var(--toast-frontmost-height);
+}
+
+.toast[data-expanded],
+.viewport[data-expand] .toast {
+  --toast-y: translateY(calc(var(--toast-lift) * (var(--toast-offset-y) + var(--toast-index) * var(--toast-gap))));
+  height: var(--toast-height);
+}
+
+.viewport[data-expand] .toast {
+  height: auto;
+}
+
+.toast[data-expanded]::after,
+.viewport[data-expand] .toast::after {
+  content: '';
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  width: 100%;
+  height: calc(var(--toast-gap) + 1px);
+}
+
+.viewport .toast[data-starting-style] {
+  --toast-y: translateY(calc(var(--toast-lift) * -100%));
+  opacity: 0;
+}
+
+.toast[data-limited] {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.viewport .toast[data-ending-style]:not([data-swipe-direction]) {
+  opacity: 0;
+}
+
+.viewport .toast[data-ending-style][data-front]:not([data-swipe-direction]) {
+  --toast-y: translateY(calc(var(--toast-lift) * -100%));
+}
+
+.viewport .toast[data-ending-style][data-expanded]:not([data-front]):not([data-swipe-direction]),
+.viewport[data-expand] .toast[data-ending-style]:not([data-front]):not([data-swipe-direction]) {
+  --toast-y: translateY(calc(var(--toast-lift) * (var(--toast-offset-y) + var(--toast-index) * var(--toast-gap)) + var(--toast-lift) * -100%));
+}
+
+.viewport:not([data-expand]) .toast[data-ending-style]:not([data-expanded]):not([data-front]):not([data-swipe-direction]) {
+  --toast-y: translateY(40%);
+  transition: transform 500ms, opacity 200ms;
+}
+
+.toast[data-swiping] {
+  transition: none;
+}
+
+.toast[data-swiping]::before {
+  content: '';
+  position: absolute;
+  left: -100%;
+  right: -100%;
+  z-index: -1;
+  height: 100%;
+  top: 50%;
+  transform: scaleY(3) translateY(-50%);
+}
+
+.viewport[data-position^='top'] .toast[data-swiping]::before {
+  top: auto;
+  bottom: 50%;
+  transform: scaleY(3) translateY(50%);
+}
+
+.toast[data-ending-style]:not([data-swiping])::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  transform: scaleY(2);
+}
+
+.toast[data-ending-style][data-swipe-direction] {
+  animation-duration: 200ms;
+  animation-timing-function: ease-out;
+  animation-fill-mode: forwards;
+}
+
+.toast[data-ending-style][data-swipe-direction='left']  { animation-name: swipe-out-left; }
+.toast[data-ending-style][data-swipe-direction='right'] { animation-name: swipe-out-right; }
+.toast[data-ending-style][data-swipe-direction='up']    { animation-name: swipe-out-up; }
+.toast[data-ending-style][data-swipe-direction='down']  { animation-name: swipe-out-down; }
+
+@media (max-width: 600px) {
+  .viewport {
+    right: var(--toast-inset);
+    left: var(--toast-inset);
+    width: 100%;
+  }
+
+  .viewport .toast {
+    right: 0;
+    left: 0;
+    width: calc(100% - var(--toast-inset) * 2);
+  }
+
+  .viewport[data-position$='center'] {
+    left: var(--toast-inset);
+    right: var(--toast-inset);
+    transform: none;
+  }
+}
+
+@media (prefers-reduced-motion) {
+  .toast,
+  .toast > * {
+    transition: none !important;
+    animation: none !important;
+  }
+}

package/toast/index.tsx

@@ -1,65 +1,160 @@
 'use client'
 
-import type { ComponentProps } from 'react'
-import { Toaster as SonnerToaster } from 'sonner'
+import { Toast as ToastPrimitive, type ToastManager, type ToastManagerAddOptions } from '@base-ui/react/toast'
+import type { MouseEvent, ReactNode } from 'react'
 
+import { button } from '../button'
 import { tv } from '../tv'
 
-const toaster = tv({ base: 'z-toast' })
+import s from './index.module.css'
 
-export { toast } from 'sonner'
+export type ToastPosition = 'top-left' | 'top-center' | 'top-right'
+  | 'bottom-left' | 'bottom-center' | 'bottom-right'
 
-export interface ToastProps
-  extends Omit<ComponentProps<typeof SonnerToaster>, 'id' | 'position' | 'duration' | 'expand'> {
-  toasterId?: string
-  position?: 'top-left' | 'top-center' | 'top-right'
-    | 'bottom-left' | 'bottom-center' | 'bottom-right'
-  duration?: number
+export type ToastOptions = Omit<ToastManagerAddOptions<object>, 'title' | 'type' | 'actionProps' | 'transitionStatus'> & {
+  action?: {
+    label: ReactNode
+    onClick: (event: MouseEvent<HTMLButtonElement>) => void
+  }
+}
+
+type Kind = 'success' | 'error' | 'warning' | 'info'
+
+export function createToast(manager: ToastManager = ToastPrimitive.createToastManager()) {
+  const show = (type?: Kind) => (message: ReactNode, { action, ...options }: ToastOptions = {}) => {
+    const id: string = manager.add({
+      ...options,
+      type,
+      title: message,
+      actionProps: action && {
+        children: action.label,
+        onClick: event => {
+          action.onClick(event)
+          if (!event.defaultPrevented) manager.close(id)
+        },
+      },
+    })
+    return id
+  }
+
+  return Object.assign(show(), {
+    success: show('success'),
+    error: show('error'),
+    warning: show('warning'),
+    info: show('info'),
+    dismiss: (id?: string) => manager.close(id),
+    manager,
+  })
+}
+
+export const toast = createToast()
+
+const toastViewport = tv({ base: 'z-toast' })
+
+const toastRoot = tv({
+  base: 'float rounded-r8 flex w-full items-center gap-stack p-4',
+  variants: {
+    type: {
+      success: 'text-fg-success',
+      error: 'text-fg-danger',
+      warning: 'text-fg-warning',
+      info: 'text-fg-info',
+    },
+  },
+})
+
+const toastContent = tv({ base: 'min-w-0 flex-1' })
+
+const toastTitle = tv({ base: 'text-label text-fg' })
+
+const toastDescription = tv({ base: 'text-caption text-fg-muted' })
+
+const icons: Record<Kind, ReactNode> = {
+  success: (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" height="20" width="20" aria-hidden="true" className="size-5">
+      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clipRule="evenodd" />
+    </svg>
+  ),
+  warning: (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" height="20" width="20" aria-hidden="true" className="size-5">
+      <path fillRule="evenodd" d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z" clipRule="evenodd" />
+    </svg>
+  ),
+  info: (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" height="20" width="20" aria-hidden="true" className="size-5">
+      <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clipRule="evenodd" />
+    </svg>
+  ),
+  error: (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" height="20" width="20" aria-hidden="true" className="size-5">
+      <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z" clipRule="evenodd" />
+    </svg>
+  ),
+}
+
+type Swipe = 'up' | 'down' | 'left' | 'right'
+
+function swipeOf(position: ToastPosition): Swipe[] {
+  const [y, x] = position.split('-')
+  const out: Swipe[] = [y === 'top' ? 'up' : 'down']
+  if (x === 'left' || x === 'right') out.push(x)
+  return out
+}
+
+function ToastList({ position }: { position: ToastPosition }) {
+  const { toasts } = ToastPrimitive.useToastManager()
+  const swipe = swipeOf(position)
+
+  return toasts.map((item, index) => {
+    const icon = item.type ? icons[item.type as Kind] : undefined
+
+    return (
+      <ToastPrimitive.Root
+        key={item.id}
+        toast={item}
+        swipeDirection={swipe}
+        data-front={index === 0 ? '' : undefined}
+        className={toastRoot({ type: item.type as Kind | undefined, className: s.toast })}
+      >
+        {icon && <div className="shrink-0">{icon}</div>}
+        <ToastPrimitive.Content className={toastContent()}>
+          <ToastPrimitive.Title className={toastTitle()} />
+          <ToastPrimitive.Description className={toastDescription()} />
+        </ToastPrimitive.Content>
+        <ToastPrimitive.Action className={button({ color: 'neutral', emphasis: 'weak', size: 'sm' })} />
+      </ToastPrimitive.Root>
+    )
+  })
+}
+
+export type ToastProps = Omit<ToastPrimitive.Provider.Props, 'children'> & {
+  position?: ToastPosition
   expand?: boolean
+  className?: string
+  'aria-label'?: string
 }
 
 export function Toast({
-  toasterId,
+  toastManager = toast.manager,
+  timeout = 4000,
   position = 'bottom-center',
-  duration = 4000,
   expand = false,
-  offset = 16,
-  gap = 8,
   className,
-  toastOptions,
+  'aria-label': label,
   ...rest
 }: ToastProps) {
   return (
-    <SonnerToaster
-      {...rest}
-      id={toasterId}
-      position={position}
-      duration={duration}
-      expand={expand}
-      offset={offset}
-      gap={gap}
-      className={toaster({ className })}
-      toastOptions={{
-        unstyled: true,
-        ...toastOptions,
-        classNames: {
-          toast: 'float rounded-r8'
-            + ' flex w-full items-center gap-stack p-4',
-          content: 'min-w-0 flex-1',
-          title: 'text-label text-fg',
-          description: 'text-caption text-fg-muted',
-          icon: 'shrink-0',
-          actionButton: 'text-label text-fg shrink-0 rounded-r8 px-3 h-8'
-            + ' bg-bg-well transition-state press press-shrink enabled:hover:bg-bg-neutral-solid/10'
-            + ' focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-line-focus-ring'
-            + ' disabled:text-fg-disabled disabled:cursor-not-allowed',
-          success: 'text-fg-success',
-          error: 'text-fg-danger',
-          warning: 'text-fg-warning',
-          info: 'text-fg-info',
-          ...toastOptions?.classNames,
-        },
-      }}
-    />
+    <ToastPrimitive.Provider {...rest} toastManager={toastManager} timeout={timeout}>
+      <ToastPrimitive.Portal>
+        <ToastPrimitive.Viewport
+          {...(label && { 'aria-label': label })}
+          data-position={position}
+          data-expand={expand ? '' : undefined}
+          className={toastViewport({ className: [s.viewport, className] })}
+        >
+          <ToastList position={position} />
+        </ToastPrimitive.Viewport>
+      </ToastPrimitive.Portal>
+    </ToastPrimitive.Provider>
   )
 }

package/toggle/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { Toggle as TogglePrimitive } from 'radix-ui'
+import { Toggle as TogglePrimitive } from '@base-ui/react/toggle'
 import type { ComponentProps } from 'react'
 
 import { tv } from '../tv'
@@ -28,10 +28,11 @@ export const toggle = tv({
   defaultVariants: { surface: 'bare' },
 })
 
-export interface ToggleProps extends ComponentProps<typeof TogglePrimitive.Root> {
+export type ToggleProps = Omit<ComponentProps<typeof TogglePrimitive>, 'className'> & {
   surface?: 'bare' | 'well' | 'panel'
+  className?: string
 }
 
 export function Toggle({ surface, className, ...rest }: ToggleProps) {
-  return <TogglePrimitive.Root {...rest} className={toggle({ surface, className })} />
+  return <TogglePrimitive {...rest} className={toggle({ surface, className })} />
 }

package/tokens.css

@@ -15,6 +15,8 @@
   --pds-bg-neutral-disabled:                  var(--pds-gray-200);
   --pds-bg-neutral-hover:                     rgba(0,23,51,0.02);
   --pds-bg-neutral-knob:                      #ffffff;
+  --pds-bg-neutral-knob-off:                  #ffffff;
+  --pds-bg-neutral-track:                     var(--pds-gray-300);
   --pds-bg-neutral-selected:                  rgba(2,32,71,0.05);
   --pds-bg-neutral-selected-hover:            rgba(0,27,55,0.1);
   --pds-bg-neutral-solid:                     var(--pds-gray-900);
@@ -64,7 +66,7 @@
   --pds-bg:                           #17171c;
   --pds-bg-overlay:                   rgba(0,0,0,0.56);
   --pds-bg-panel:                     #202027;
-  --pds-bg-well:                      #101013;
+  --pds-bg-well:                      #2c2c35;
 
   --pds-bg-brand-solid:                       var(--pds-brand-500);
   --pds-bg-brand-solid-hover:                 var(--pds-brand-600);
@@ -77,6 +79,8 @@
   --pds-bg-neutral-disabled:                  var(--pds-gray-200);
   --pds-bg-neutral-hover:                     rgba(209,209,253,0.05);
   --pds-bg-neutral-knob:                      #2c2c35;
+  --pds-bg-neutral-knob-off:                  var(--pds-gray-800);
+  --pds-bg-neutral-track:                     var(--pds-gray-300);
   --pds-bg-neutral-selected:                  rgba(217,217,255,0.11);
   --pds-bg-neutral-selected-hover:            rgba(222,222,255,0.19);
   --pds-bg-neutral-solid:                     var(--pds-gray-900);
@@ -138,6 +142,8 @@
   --color-bg-neutral-disabled:                var(--pds-bg-neutral-disabled);
   --color-bg-neutral-hover:                   var(--pds-bg-neutral-hover);
   --color-bg-neutral-knob:                    var(--pds-bg-neutral-knob);
+  --color-bg-neutral-knob-off:                var(--pds-bg-neutral-knob-off);
+  --color-bg-neutral-track:                   var(--pds-bg-neutral-track);
   --color-bg-neutral-selected:                var(--pds-bg-neutral-selected);
   --color-bg-neutral-selected-hover:          var(--pds-bg-neutral-selected-hover);
   --color-bg-neutral-solid:                   var(--pds-bg-neutral-solid);

package/tooltip/index.tsx

@@ -1,35 +1,55 @@
 'use client'
 
-import { Tooltip as TooltipPrimitive } from 'radix-ui'
-import type { ComponentProps, ReactNode } from 'react'
+import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip'
+import { createContext, useContext, useId, useState } from 'react'
+import type { ComponentProps } from 'react'
 
 import { tv } from '../tv'
 
-export interface TooltipProps {
-  open?: boolean
-  defaultOpen?: boolean
-  onOpenChange?: (open: boolean) => void
-  delay?: number
-  children?: ReactNode
+const TooltipContext = createContext<{ id?: string, open: boolean }>({ open: false })
+const ProviderContext = createContext(false)
+
+export type TooltipProviderProps = ComponentProps<typeof TooltipPrimitive.Provider>
+
+export function TooltipProvider({ delay = 100, ...rest }: TooltipProviderProps) {
+  return (
+    <ProviderContext.Provider value>
+      <TooltipPrimitive.Provider {...rest} delay={delay} />
+    </ProviderContext.Provider>
+  )
 }
 
-export function Tooltip({ open, defaultOpen = false, onOpenChange, delay = 100, children }: TooltipProps) {
+export type TooltipProps = ComponentProps<typeof TooltipPrimitive.Root>
+
+export function Tooltip({ open, defaultOpen = false, onOpenChange, ...rest }: TooltipProps) {
+  const id = useId()
+  const [seen, setSeen] = useState(defaultOpen)
+  const isOpen = open ?? seen
+
+  const change: TooltipProps['onOpenChange'] = (next, eventDetails) => {
+    setSeen(next)
+    onOpenChange?.(next, eventDetails)
+  }
+
   return (
-    <TooltipPrimitive.Provider delayDuration={delay}>
-      <TooltipPrimitive.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
-        {children}
-      </TooltipPrimitive.Root>
-    </TooltipPrimitive.Provider>
+    <TooltipContext.Provider value={{ id, open: isOpen }}>
+      <TooltipPrimitive.Root {...rest} open={isOpen} onOpenChange={change} />
+    </TooltipContext.Provider>
   )
 }
 
-export function TooltipTrigger({ children }: { children: ReactNode }) {
-  return <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
+export type TooltipTriggerProps = ComponentProps<typeof TooltipPrimitive.Trigger>
+
+export function TooltipTrigger(props: TooltipTriggerProps) {
+  const { id, open } = useContext(TooltipContext)
+  const inProvider = useContext(ProviderContext)
+  return <TooltipPrimitive.Trigger delay={inProvider ? undefined : 100} {...props} aria-describedby={open ? id : undefined} />
 }
 
-export interface TooltipContentProps extends Omit<ComponentProps<typeof TooltipPrimitive.Content>, 'side'> {
+export type TooltipContentProps = Omit<ComponentProps<typeof TooltipPrimitive.Popup>, 'className'> & {
   side?: 'top' | 'right' | 'bottom' | 'left'
   arrow?: boolean
+  className?: string
 }
 
 const tooltipContent = tv({
@@ -38,6 +58,14 @@ const tooltipContent = tv({
     + ' open:animate-enter closed:animate-exit',
 })
 
+const tooltipArrow = tv({
+  base: 'data-uncentered:invisible'
+    + ' side-top:top-full'
+    + ' side-bottom:bottom-full side-bottom:rotate-180'
+    + ' side-right:left-0 side-right:origin-top-left side-right:rotate-90 side-right:-translate-y-1/2'
+    + ' side-left:right-0 side-left:origin-top-right side-left:-rotate-90 side-left:-translate-y-1/2',
+})
+
 export function TooltipContent({
   side = 'top',
   arrow = true,
@@ -45,23 +73,26 @@ export function TooltipContent({
   children,
   ...rest
 }: TooltipContentProps) {
+  const { id } = useContext(TooltipContext)
+
   return (
     <TooltipPrimitive.Portal>
-      <TooltipPrimitive.Content
-        {...rest}
+      <TooltipPrimitive.Positioner
         side={side}
-        sideOffset={6}
-        className={tooltipContent({ className })}
+        sideOffset={arrow ? 11 : 6}
+        className="z-overlay min-w-max will-change-transform"
       >
-        {children}
-        {arrow && (
-          <TooltipPrimitive.Arrow asChild width={10} height={5}>
-            <svg viewBox="0 0 12 6" preserveAspectRatio="none" className="fill-bg-panel -translate-y-px">
-              <path d="M0 0L4.58579 4.58579C5.36683 5.36683 6.63316 5.36684 7.41421 4.58579L12 0" className="stroke-line stroke-1" />
-            </svg>
-          </TooltipPrimitive.Arrow>
-        )}
-      </TooltipPrimitive.Content>
+        <TooltipPrimitive.Popup {...rest} id={id} role="tooltip" className={tooltipContent({ className })}>
+          {children}
+          {arrow && (
+            <TooltipPrimitive.Arrow className={tooltipArrow()}>
+              <svg width={10} height={5} viewBox="0 0 12 6" preserveAspectRatio="none" className="block fill-bg-panel -translate-y-px">
+                <path d="M0 0L4.58579 4.58579C5.36683 5.36683 6.63316 5.36684 7.41421 4.58579L12 0" className="stroke-line stroke-1" />
+              </svg>
+            </TooltipPrimitive.Arrow>
+          )}
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
     </TooltipPrimitive.Portal>
   )
 }

package/utilities.css

@@ -10,10 +10,14 @@
 
 @custom-variant described (&:has([data-description]));
 
-@custom-variant checked (&:where([data-state="checked"], [data-state="indeterminate"]));
-@custom-variant open    (&[data-state="open"]);
-@custom-variant closed  (&[data-state="closed"]);
-@custom-variant on      (&[data-state="on"]);
+@custom-variant checked (&:where([data-checked], [data-indeterminate]));
+@custom-variant open    (&[data-open]);
+@custom-variant closed  (&[data-closed]);
+@custom-variant on      (&[aria-pressed="true"]);
+@custom-variant side-top    (&[data-side="top"]);
+@custom-variant side-right  (&[data-side="right"]);
+@custom-variant side-bottom (&[data-side="bottom"]);
+@custom-variant side-left   (&[data-side="left"]);
 @custom-variant selected (&[data-selected]:not([data-selected="false"]));
 @custom-variant unset    (&[data-placeholder]);
 
@@ -24,6 +28,7 @@
   .dark { color-scheme: dark; }
 
   body {
+    position: relative;
     background-color: var(--color-bg);
     color: var(--color-fg);
     font-family: var(--font-sans);
@@ -104,7 +109,7 @@
   }
 
   &:active:not(:disabled):not([aria-disabled="true"])::after,
-  &[data-pressed]:not(:disabled):not([aria-disabled="true"])::after {
+  &[data-pressed]:not([data-popup-open]):not([aria-pressed]):not(:disabled):not([aria-disabled="true"])::after {
     opacity: 1;
     transition-duration: 0s;
   }
@@ -112,7 +117,7 @@
 
 @utility press-shrink {
   &:active:not(:disabled):not([aria-disabled="true"]),
-  &[data-pressed]:not(:disabled):not([aria-disabled="true"]) {
+  &[data-pressed]:not([data-popup-open]):not([aria-pressed]):not(:disabled):not([aria-disabled="true"]) {
     scale: var(--scale-press);
     transition-duration: 0s;
   }

package/accordion/AGENTS.md

@@ -1,60 +0,0 @@
-# Accordion
-
-```
-받기   npx @pantoia/ui add accordion
-층     ui
-파일   accordion/index.tsx, accordion/index.module.css, accordion/AGENTS.md
-```
-
-## 부위
-
-| 이름 | props |
-|---|---|
-| `Accordion` | `AccordionProps` |
-| `AccordionItem` | - |
-| `AccordionTrigger` | - |
-| `AccordionContent` | - |
-
-### `AccordionItem`
-
-| 이름 | 타입 | 필수 |
-|---|---|---|
-| `value` | `string` | 예 |
-| `disabled` | `boolean` |  |
-| `className` | `string` |  |
-| `children` | `ReactNode` |  |
-
-### `AccordionTrigger`
-
-| 이름 | 타입 | 필수 |
-|---|---|---|
-| `className` | `string` |  |
-| `children` | `ReactNode` |  |
-
-### `AccordionContent`
-
-| 이름 | 타입 | 필수 |
-|---|---|---|
-| `className` | `string` |  |
-| `children` | `ReactNode` |  |
-
-## props
-
-### `AccordionProps`
-
-| 이름 | 타입 | 필수 |
-|---|---|---|
-| `value` | `string \| string[]` |  |
-| `defaultValue` | `string \| string[]` |  |
-| `onValueChange` | `(value: string & string[]) => void` |  |
-| `multiple` | `boolean` |  |
-| `className` | `string` |  |
-| `children` | `ReactNode` |  |
-
-## 함께 받는 것
-
-`tv`
-
-## npm 의존
-
-`radix-ui`