@pantoia/ui 0.11.2 → 0.12.0

package/accordion/index.module.css

@@ -6,5 +6,6 @@
 .panel[data-closed] { animation: acc-close var(--dur-exit)  var(--ease-exit) forwards; }
 
 @media (prefers-reduced-motion: reduce) {
-  .panel { animation: none; }
+  .panel[data-open],
+  .panel[data-closed] { animation: none; }
 }

package/alert-dialog/index.tsx

@@ -19,25 +19,36 @@ export function AlertDialogTrigger(props: AlertDialogTriggerProps) {
 }
 
 const alertDialogContent = tv({
-  base: 'sheet text-fg z-overlay fixed left-1/2 top-1/2'
-    + ' w-full max-w-112 -translate-x-1/2 -translate-y-1/2'
+  base: 'float text-fg z-overlay fixed inset-x-4 top-1/2 mx-auto max-h-11/12 -translate-y-1/2'
     + ' rounded-r20 p-6 flex flex-col gap-stack overflow-y-auto'
     + ' open:animate-fade-in closed:animate-fade-out'
+    + ' transition-state data-nested-dialog-open:scale-95 motion-reduce:data-nested-dialog-open:scale-100'
     + ' focus-visible:outline-none',
+
+  variants: {
+    size: {
+      sm: 'max-w-112',
+      md: 'max-w-120',
+      lg: 'max-w-160',
+    },
+  },
+
+  defaultVariants: { size: 'sm' },
 })
 
 export type AlertDialogContentProps = Omit<ComponentProps<typeof AlertDialogPrimitive.Popup>, 'className'> & {
+  size?: 'sm' | 'md' | 'lg'
   className?: string
 }
 
-export function AlertDialogContent({ className, children, ...rest }: AlertDialogContentProps) {
+export function AlertDialogContent({ size, className, children, ...rest }: AlertDialogContentProps) {
   return (
     <AlertDialogPrimitive.Portal>
-      <AlertDialogPrimitive.Backdrop className="bg-bg-overlay z-overlay fixed inset-0 open:animate-fade-in closed:animate-fade-out" />
+      <AlertDialogPrimitive.Backdrop forceRender className="bg-bg-overlay z-overlay fixed inset-0 open:animate-fade-in closed:animate-fade-out" />
 
       <AlertDialogPrimitive.Popup
         {...rest}
-        className={alertDialogContent({ className })}
+        className={alertDialogContent({ size, className })}
       >
         {children}
       </AlertDialogPrimitive.Popup>
@@ -98,11 +109,47 @@ export function AlertDialogHeader({ lead, trail, className, children }: AlertDia
   )
 }
 
-const alertDialogFooter = tv({ base: 'mt-auto flex justify-end gap-2' })
+const alertDialogBody = tv({ base: '-m-1 min-h-0 overflow-y-auto p-1' })
+
+export function AlertDialogBody({ className, children }: { className?: string, children?: ReactNode }) {
+  return (
+    <div className={alertDialogBody({ className })}>
+      {children}
+    </div>
+  )
+}
+
+type FooterLayout = 'end' | 'between' | 'fill' | 'grow-last'
+
+const alertDialogFooter = tv({
+  base: 'mt-auto flex justify-end gap-2',
+  variants: {
+    narrow: {
+      'end': '',
+      'between': 'max-sm:*:first:mr-auto',
+      'fill': 'max-sm:*:flex-1',
+      'grow-last': 'max-sm:*:last:grow',
+    },
+    wide: {
+      'end': '',
+      'between': 'sm:*:first:mr-auto',
+      'fill': 'sm:*:flex-1',
+      'grow-last': 'sm:*:last:grow',
+    },
+  },
+})
+
+export interface AlertDialogFooterProps {
+  layout?: FooterLayout | { narrow: FooterLayout, wide: FooterLayout }
+  className?: string
+  children?: ReactNode
+}
+
+export function AlertDialogFooter({ layout = 'end', className, children }: AlertDialogFooterProps) {
+  const { narrow, wide } = typeof layout === 'string' ? { narrow: layout, wide: layout } : layout
 
-export function AlertDialogFooter({ className, children }: { className?: string, children?: ReactNode }) {
   return (
-    <div className={alertDialogFooter({ className })}>
+    <div className={alertDialogFooter({ narrow, wide, className })}>
       {children}
     </div>
   )

package/bottom-sheet/index.module.css

@@ -4,13 +4,16 @@
 .panel {
   --bottom-sheet-slide: 100%;
   transform: translateY(var(--drawer-swipe-movement-y, 0px));
-  transition: transform var(--dur-enter) var(--ease-enter);
+  transform-origin: center bottom;
+  transition: transform var(--dur-enter) var(--ease-enter), scale var(--dur-enter) var(--ease-enter);
 }
 
 .panel[data-open]   { animation: slide-in  var(--dur-enter) var(--ease-enter); }
 .panel[data-closed] { animation: slide-out var(--dur-exit)  var(--ease-exit) forwards; }
 .panel[data-swiping] { transition-duration: 0ms; }
+.panel[data-nested-drawer-open] { scale: 0.95; }
 
 @media (prefers-reduced-motion: reduce) {
   .panel { --bottom-sheet-slide: 0%; }
+  .panel[data-nested-drawer-open] { scale: 1; }
 }

package/bottom-sheet/index.tsx

@@ -26,7 +26,7 @@ export function BottomSheetClose(props: BottomSheetCloseProps) {
 }
 
 export const bottomSheetContent = tv({
-  base: 'sheet text-fg z-overlay fixed inset-x-0 bottom-0 mx-auto rounded-t-r20'
+  base: 'float text-fg z-overlay fixed inset-x-0 bottom-0 mx-auto rounded-t-r20'
     + ' flex max-h-11/12 w-full flex-col gap-stack overflow-y-auto px-4 pb-4 sm:max-w-120'
     + ' focus-visible:outline-none',
 })
@@ -38,7 +38,7 @@ export type BottomSheetContentProps = Omit<ComponentProps<typeof DrawerPrimitive
 export function BottomSheetContent({ className, children, ...rest }: BottomSheetContentProps) {
   return (
     <DrawerPrimitive.Portal>
-      <DrawerPrimitive.Backdrop className="bg-bg-overlay z-overlay fixed inset-0 open:animate-fade-in closed:animate-fade-out" />
+      <DrawerPrimitive.Backdrop forceRender className="bg-bg-overlay z-overlay fixed inset-0 open:animate-fade-in closed:animate-fade-out" />
 
       <DrawerPrimitive.Viewport>
         <DrawerPrimitive.Popup {...rest} className={`${s.panel} ${bottomSheetContent({ className })}`}>
@@ -99,3 +99,49 @@ export function BottomSheetDescription({ className, ...rest }: BottomSheetDescri
     <DrawerPrimitive.Description {...rest} className={bottomSheetDescription({ className })} />
   )
 }
+
+const bottomSheetBody = tv({ base: '-m-1 min-h-0 overflow-y-auto p-1' })
+
+export function BottomSheetBody({ className, children }: { className?: string, children?: ReactNode }) {
+  return (
+    <div className={bottomSheetBody({ className })}>
+      {children}
+    </div>
+  )
+}
+
+type FooterLayout = 'end' | 'between' | 'fill' | 'grow-last'
+
+const bottomSheetFooter = tv({
+  base: 'mt-auto flex justify-end gap-2',
+  variants: {
+    narrow: {
+      'end': '',
+      'between': 'max-sm:*:first:mr-auto',
+      'fill': 'max-sm:*:flex-1',
+      'grow-last': 'max-sm:*:last:grow',
+    },
+    wide: {
+      'end': '',
+      'between': 'sm:*:first:mr-auto',
+      'fill': 'sm:*:flex-1',
+      'grow-last': 'sm:*:last:grow',
+    },
+  },
+})
+
+export interface BottomSheetFooterProps {
+  layout?: FooterLayout | { narrow: FooterLayout, wide: FooterLayout }
+  className?: string
+  children?: ReactNode
+}
+
+export function BottomSheetFooter({ layout = 'end', className, children }: BottomSheetFooterProps) {
+  const { narrow, wide } = typeof layout === 'string' ? { narrow: layout, wide: layout } : layout
+
+  return (
+    <div className={bottomSheetFooter({ narrow, wide, className })}>
+      {children}
+    </div>
+  )
+}

package/collapsible/index.module.css

@@ -0,0 +1,11 @@
+@keyframes col-open  { from { height: 0; } to { height: var(--collapsible-panel-height); } }
+@keyframes col-close { from { height: var(--collapsible-panel-height); } to { height: 0; } }
+
+.panel { overflow: hidden; }
+.panel[data-open]   { animation: col-open  var(--dur-enter) var(--ease-enter); }
+.panel[data-closed] { animation: col-close var(--dur-exit)  var(--ease-exit) forwards; }
+
+@media (prefers-reduced-motion: reduce) {
+  .panel[data-open],
+  .panel[data-closed] { animation: none; }
+}

package/collapsible/index.tsx

@@ -0,0 +1,30 @@
+'use client'
+
+import { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible'
+import type { ComponentProps } from 'react'
+
+import s from './index.module.css'
+
+export type CollapsibleProps = ComponentProps<typeof CollapsiblePrimitive.Root>
+
+export function Collapsible(props: CollapsibleProps) {
+  return <CollapsiblePrimitive.Root {...props} />
+}
+
+export type CollapsibleTriggerProps = ComponentProps<typeof CollapsiblePrimitive.Trigger>
+
+export function CollapsibleTrigger(props: CollapsibleTriggerProps) {
+  return <CollapsiblePrimitive.Trigger {...props} />
+}
+
+export type CollapsibleContentProps = Omit<ComponentProps<typeof CollapsiblePrimitive.Panel>, 'className'> & {
+  className?: string
+}
+
+export function CollapsibleContent({ className, children, ...rest }: CollapsibleContentProps) {
+  return (
+    <CollapsiblePrimitive.Panel {...rest} className={s.panel}>
+      <div className={className}>{children}</div>
+    </CollapsiblePrimitive.Panel>
+  )
+}

package/combobox/index.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { Combobox as ComboboxPrimitive, type ComboboxFilter, type ComboboxFilterOptions } from '@base-ui/react/combobox'
-import { isValidElement, type ComponentProps, type ReactNode } from 'react'
+import { createContext, isValidElement, use, type ComponentProps, type ReactNode } from 'react'
 
 import { tv } from '../tv'
 
@@ -23,7 +23,7 @@ export function Combobox<Value = string, Item = Value>({
 }
 
 export const comboboxAnchor = tv({
-  base: 'flex items-center gap-tight rounded-r8 px-3'
+  base: 'group/combobox flex items-center gap-tight rounded-r8 px-3'
     + ' transition-state'
     + ' invalid-within:ring-2 invalid-within:ring-line-danger'
     + ' has-disabled:bg-bg-neutral-disabled has-disabled:cursor-not-allowed'
@@ -34,6 +34,8 @@ export const comboboxAnchor = tv({
     surface: {
       bare: 'ring-1 ring-inset ring-line-strong',
       well: 'bg-bg-well',
+      ghost: 'bg-transparent not-has-disabled:not-data-disabled:not-data-readonly:not-focus-within:hover:bg-bg-neutral-hover'
+        + ' focus-within:bg-bg-neutral-selected data-readonly:focus-within:bg-transparent has-disabled:bg-transparent',
     },
     size: { sm: 'h-8', md: 'h-9', lg: 'h-10 [&_input]:text-t16' },
   },
@@ -42,15 +44,34 @@ export const comboboxAnchor = tv({
 })
 
 export type ComboboxAnchorProps = Omit<ComponentProps<typeof ComboboxPrimitive.InputGroup>, 'className'> & {
-  surface?: 'bare' | 'well'
+  surface?: 'bare' | 'well' | 'ghost'
   size?: 'sm' | 'md' | 'lg'
   className?: string
 }
 
-export function ComboboxAnchor({ surface, size, className, ...rest }: ComboboxAnchorProps) {
-  return <ComboboxPrimitive.InputGroup {...rest} className={comboboxAnchor({ surface, size, className })} />
+const AnchorSurface = createContext<'bare' | 'well' | 'ghost'>('bare')
+
+export function ComboboxAnchor({ surface = 'bare', size, className, ...rest }: ComboboxAnchorProps) {
+  return (
+    <AnchorSurface value={surface}>
+      <ComboboxPrimitive.InputGroup {...rest} className={comboboxAnchor({ surface, size, className })} />
+    </AnchorSurface>
+  )
 }
 
+const anchorTool = tv({
+  base: '',
+  variants: {
+    surface: {
+      bare: '',
+      well: '',
+      ghost: 'opacity-40 group-data-popup-open/combobox:opacity-100'
+        + ' group-not-has-disabled/combobox:group-not-data-readonly/combobox:group-hover/combobox:opacity-100'
+        + ' group-not-has-disabled/combobox:group-not-data-readonly/combobox:group-focus-within/combobox:opacity-100',
+    },
+  },
+})
+
 export type ComboboxInputProps = Omit<ComponentProps<typeof ComboboxPrimitive.Input>, 'className'> & {
   className?: string
 }
@@ -79,7 +100,7 @@ export type ComboboxTriggerProps = Omit<ComponentProps<typeof ComboboxPrimitive.
 
 export function ComboboxTrigger({ label = '목록 열기', className, children, ...rest }: ComboboxTriggerProps) {
   return (
-    <ComboboxPrimitive.Trigger aria-label={label} {...rest} className={comboboxTrigger({ className })}>
+    <ComboboxPrimitive.Trigger aria-label={label} {...rest} className={comboboxTrigger({ className: [anchorTool({ surface: use(AnchorSurface) }), className] })}>
       {children ?? (
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="size-4 transition-transform in-data-popup-open:rotate-180 motion-reduce:transition-none">
           <path d="m6 9 6 6 6-6" />
@@ -103,7 +124,7 @@ export type ComboboxCancelProps = Omit<ComponentProps<typeof ComboboxPrimitive.C
 
 export function ComboboxCancel({ label = '지우기', keepMounted = true, className, children, ...rest }: ComboboxCancelProps) {
   return (
-    <ComboboxPrimitive.Clear aria-label={label} keepMounted={keepMounted} {...rest} className={comboboxCancel({ className })}>
+    <ComboboxPrimitive.Clear aria-label={label} keepMounted={keepMounted} {...rest} className={comboboxCancel({ className: [anchorTool({ surface: use(AnchorSurface) }), className] })}>
       {children ?? (
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="size-4">
           <path d="M18 6 6 18" />

package/dialog/index.tsx

@@ -6,16 +6,17 @@ import type { ComponentProps, ReactNode } from 'react'
 import { tv } from '../tv'
 
 export const dialog = tv({
-  base: 'sheet text-fg z-overlay fixed flex flex-col gap-stack overflow-y-auto'
-    + ' open:animate-fade-in closed:animate-fade-out focus-visible:outline-none',
+  base: 'float text-fg z-overlay fixed flex flex-col gap-stack overflow-y-auto'
+    + ' open:animate-fade-in closed:animate-fade-out focus-visible:outline-none'
+    + ' transition-state data-nested-dialog-open:scale-95 motion-reduce:data-nested-dialog-open:scale-100',
 
   variants: {
     size: {
-      md: 'left-1/2 top-1/2 w-full max-w-120 -translate-x-1/2 -translate-y-1/2'
-        + ' rounded-r20 p-6',
+      sm: 'inset-x-4 top-1/2 mx-auto max-h-11/12 max-w-112 -translate-y-1/2 rounded-r20 p-6',
+      md: 'inset-x-4 top-1/2 mx-auto max-h-11/12 max-w-120 -translate-y-1/2 rounded-r20 p-6',
+      lg: 'inset-x-4 top-1/2 mx-auto max-h-11/12 max-w-160 -translate-y-1/2 rounded-r20 p-6',
       full: 'inset-0 p-6',
-      top: 'left-1/2 top-24 w-full max-w-144 -translate-x-1/2'
-        + ' rounded-r20 gap-0 overflow-hidden',
+      top: 'inset-x-4 top-24 mx-auto max-w-144 rounded-r20 gap-0 overflow-hidden',
     },
   },
 
@@ -41,14 +42,14 @@ export function DialogClose(props: DialogCloseProps) {
 }
 
 export type DialogContentProps = Omit<ComponentProps<typeof DialogPrimitive.Popup>, 'className'> & {
-  size?: 'md' | 'full' | 'top'
+  size?: 'sm' | 'md' | 'lg' | 'full' | 'top'
   className?: string
 }
 
 export function DialogContent({ size, className, children, ...rest }: DialogContentProps) {
   return (
     <DialogPrimitive.Portal>
-      <DialogPrimitive.Backdrop className="bg-bg-overlay z-overlay fixed inset-0 open:animate-fade-in closed:animate-fade-out" />
+      <DialogPrimitive.Backdrop forceRender className="bg-bg-overlay z-overlay fixed inset-0 open:animate-fade-in closed:animate-fade-out" />
 
       <DialogPrimitive.Popup {...rest} className={dialog({ size, className })}>
         {children}
@@ -107,11 +108,47 @@ export function DialogHeader({ lead, trail, className, children }: DialogHeaderP
   )
 }
 
-const dialogFooter = tv({ base: 'mt-auto flex justify-end gap-2' })
+const dialogBody = tv({ base: '-m-1 min-h-0 overflow-y-auto p-1' })
 
-export function DialogFooter({ className, children }: { className?: string, children?: ReactNode }) {
+export function DialogBody({ className, children }: { className?: string, children?: ReactNode }) {
   return (
-    <div className={dialogFooter({ className })}>
+    <div className={dialogBody({ className })}>
+      {children}
+    </div>
+  )
+}
+
+type FooterLayout = 'end' | 'between' | 'fill' | 'grow-last'
+
+const dialogFooter = tv({
+  base: 'mt-auto flex justify-end gap-2',
+  variants: {
+    narrow: {
+      'end': '',
+      'between': 'max-sm:*:first:mr-auto',
+      'fill': 'max-sm:*:flex-1',
+      'grow-last': 'max-sm:*:last:grow',
+    },
+    wide: {
+      'end': '',
+      'between': 'sm:*:first:mr-auto',
+      'fill': 'sm:*:flex-1',
+      'grow-last': 'sm:*:last:grow',
+    },
+  },
+})
+
+export interface DialogFooterProps {
+  layout?: FooterLayout | { narrow: FooterLayout, wide: FooterLayout }
+  className?: string
+  children?: ReactNode
+}
+
+export function DialogFooter({ layout = 'end', className, children }: DialogFooterProps) {
+  const { narrow, wide } = typeof layout === 'string' ? { narrow: layout, wide: layout } : layout
+
+  return (
+    <div className={dialogFooter({ narrow, wide, className })}>
       {children}
     </div>
   )

package/drawer/index.module.css

@@ -4,14 +4,17 @@
 .panel {
   --drawer-slide: -100%;
   transform: translateX(var(--drawer-swipe-movement-x, 0px));
-  transition: transform var(--dur-enter) var(--ease-enter);
+  transform-origin: left center;
+  transition: transform var(--dur-enter) var(--ease-enter), scale var(--dur-enter) var(--ease-enter);
 }
 
 .panel[data-open]   { animation: slide-in  var(--dur-enter) var(--ease-enter); }
 .panel[data-closed] { animation: slide-out var(--dur-exit)  var(--ease-exit) forwards; }
 .panel[data-swiping] { transition-duration: 0ms; }
-.panel-right { --drawer-slide: 100%; }
+.panel[data-nested-drawer-open] { scale: 0.95; }
+.panel-right { --drawer-slide: 100%; transform-origin: right center; }
 
 @media (prefers-reduced-motion: reduce) {
   .panel { --drawer-slide: 0%; }
+  .panel[data-nested-drawer-open] { scale: 1; }
 }

package/drawer/index.tsx

@@ -36,7 +36,7 @@ export function DrawerClose(props: DrawerCloseProps) {
 }
 
 export const drawerContent = tv({
-  base: 'sheet text-fg z-overlay fixed inset-y-0'
+  base: 'float text-fg z-overlay fixed inset-y-0'
     + ' flex w-full flex-col gap-stack overflow-y-auto p-4 sm:w-120'
     + ' focus-visible:outline-none',
   variants: {
@@ -53,7 +53,7 @@ export function DrawerContent({ className, style, ...rest }: DrawerContentProps)
 
   return (
     <DrawerPrimitive.Portal>
-      <DrawerPrimitive.Backdrop className="bg-bg-overlay z-overlay fixed inset-0 open:animate-fade-in closed:animate-fade-out" />
+      <DrawerPrimitive.Backdrop forceRender className="bg-bg-overlay z-overlay fixed inset-0 open:animate-fade-in closed:animate-fade-out" />
 
       <DrawerPrimitive.Viewport>
         <DrawerPrimitive.Popup
@@ -122,3 +122,49 @@ export function DrawerDescription({ className, ...rest }: DrawerDescriptionProps
     <DrawerPrimitive.Description {...rest} className={drawerDescription({ className })} />
   )
 }
+
+const drawerBody = tv({ base: '-m-1 min-h-0 overflow-y-auto p-1' })
+
+export function DrawerBody({ className, children }: { className?: string, children?: ReactNode }) {
+  return (
+    <div className={drawerBody({ className })}>
+      {children}
+    </div>
+  )
+}
+
+type FooterLayout = 'end' | 'between' | 'fill' | 'grow-last'
+
+const drawerFooter = tv({
+  base: 'mt-auto flex justify-end gap-2',
+  variants: {
+    narrow: {
+      'end': '',
+      'between': 'max-sm:*:first:mr-auto',
+      'fill': 'max-sm:*:flex-1',
+      'grow-last': 'max-sm:*:last:grow',
+    },
+    wide: {
+      'end': '',
+      'between': 'sm:*:first:mr-auto',
+      'fill': 'sm:*:flex-1',
+      'grow-last': 'sm:*:last:grow',
+    },
+  },
+})
+
+export interface DrawerFooterProps {
+  layout?: FooterLayout | { narrow: FooterLayout, wide: FooterLayout }
+  className?: string
+  children?: ReactNode
+}
+
+export function DrawerFooter({ layout = 'end', className, children }: DrawerFooterProps) {
+  const { narrow, wide } = typeof layout === 'string' ? { narrow: layout, wide: layout } : layout
+
+  return (
+    <div className={drawerFooter({ narrow, wide, className })}>
+      {children}
+    </div>
+  )
+}

package/fieldset/index.tsx

@@ -0,0 +1,24 @@
+import { Fieldset as FieldsetPrimitive } from '@base-ui/react/fieldset'
+import type { ComponentProps } from 'react'
+
+import { tv } from '../tv'
+
+const fieldset = tv({ base: 'flex min-w-0 flex-col gap-stack' })
+
+export type FieldsetProps = Omit<ComponentProps<typeof FieldsetPrimitive.Root>, 'className'> & {
+  className?: string
+}
+
+export function Fieldset({ className, ...rest }: FieldsetProps) {
+  return <FieldsetPrimitive.Root {...rest} className={fieldset({ className })} />
+}
+
+const fieldsetLegend = tv({ base: 'text-label data-disabled:text-fg-disabled' })
+
+export type FieldsetLegendProps = Omit<ComponentProps<typeof FieldsetPrimitive.Legend>, 'className'> & {
+  className?: string
+}
+
+export function FieldsetLegend({ className, ...rest }: FieldsetLegendProps) {
+  return <FieldsetPrimitive.Legend {...rest} className={fieldsetLegend({ className })} />
+}

package/input/index.tsx

@@ -18,6 +18,8 @@ export const input = tv({
     surface: {
       bare: 'bg-transparent ring-1 ring-inset ring-line-strong read-only:bg-bg-well',
       well: 'bg-bg-well',
+      ghost: 'bg-transparent enabled:not-read-only:not-focus:hover:bg-bg-neutral-hover'
+        + ' focus:bg-bg-neutral-selected read-only:focus:bg-transparent disabled:bg-transparent',
     },
     size: {
       sm: 'h-8 px-3',
@@ -30,7 +32,7 @@ export const input = tv({
 })
 
 export type InputProps = Omit<ComponentProps<typeof InputPrimitive>, 'className' | 'size'> & {
-  surface?: 'bare' | 'well'
+  surface?: 'bare' | 'well' | 'ghost'
   size?: 'sm' | 'md' | 'lg'
   className?: string
 }

package/modal/index.tsx

@@ -0,0 +1,141 @@
+'use client'
+
+import type { Dialog as DialogPrimitive } from '@base-ui/react/dialog'
+import type { Drawer as DrawerPrimitive } from '@base-ui/react/drawer'
+import { createContext, use, useCallback, useState, useSyncExternalStore, type ReactElement, type ReactNode } from 'react'
+
+import {
+  BottomSheet,
+  BottomSheetClose,
+  BottomSheetContent,
+  BottomSheetDescription,
+  BottomSheetTitle,
+  BottomSheetTrigger,
+} from '../bottom-sheet'
+import {
+  Dialog,
+  DialogBody,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  type DialogContentProps,
+  type DialogFooterProps,
+  type DialogHeaderProps,
+  type DialogTriggerProps,
+} from '../dialog'
+
+type Shape = 'dialog' | 'sheet'
+
+export type ModalBreakpoint = 'xs' | 'sm' | 'md'
+
+export const modalQuery: Record<ModalBreakpoint, string> = {
+  xs: '(min-width: 30rem)',
+  sm: '(min-width: 40rem)',
+  md: '(min-width: 48rem)',
+}
+
+const ModalShape = createContext<Shape>('sheet')
+
+const media = (query: string) => (typeof window.matchMedia === 'function' ? window.matchMedia(query) : null)
+
+function useWide(query: string) {
+  const subscribe = useCallback((notify: () => void) => {
+    const list = media(query)
+    list?.addEventListener('change', notify)
+    return () => list?.removeEventListener('change', notify)
+  }, [query])
+
+  return useSyncExternalStore(subscribe, () => media(query)?.matches ?? false, () => false)
+}
+
+export interface ModalProps {
+  breakpoint?: ModalBreakpoint
+  as?: 'auto' | Shape
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean, eventDetails: DialogPrimitive.Root.ChangeEventDetails | DrawerPrimitive.Root.ChangeEventDetails) => void
+  children?: ReactNode
+}
+
+export function Modal({ breakpoint = 'xs', as = 'auto', open, defaultOpen = false, onOpenChange, children }: ModalProps) {
+  const wide = useWide(modalQuery[breakpoint])
+  const [inner, setInner] = useState(defaultOpen)
+  const shape: Shape = as === 'auto' ? (wide ? 'dialog' : 'sheet') : as
+  const current = open ?? inner
+
+  const change = (next: boolean, eventDetails: DialogPrimitive.Root.ChangeEventDetails | DrawerPrimitive.Root.ChangeEventDetails) => {
+    onOpenChange?.(next, eventDetails)
+    if (open === undefined && !eventDetails.isCanceled) setInner(next)
+  }
+
+  return (
+    <ModalShape value={shape}>
+      {shape === 'dialog'
+        ? <Dialog open={current} onOpenChange={change}>{children}</Dialog>
+        : <BottomSheet open={current} onOpenChange={change}>{children}</BottomSheet>}
+    </ModalShape>
+  )
+}
+
+export type ModalTriggerProps = Omit<DialogTriggerProps, 'className' | 'render' | 'style' | 'handle' | 'payload'> & {
+  render?: ReactElement
+  className?: string
+}
+
+export function ModalTrigger(props: ModalTriggerProps) {
+  return use(ModalShape) === 'dialog' ? <DialogTrigger {...props} /> : <BottomSheetTrigger {...props} />
+}
+
+export type ModalCloseProps = ModalTriggerProps
+
+export function ModalClose(props: ModalCloseProps) {
+  return use(ModalShape) === 'dialog' ? <DialogClose {...props} /> : <BottomSheetClose {...props} />
+}
+
+export type ModalContentProps = Pick<DialogContentProps, 'initialFocus' | 'finalFocus'> & {
+  size?: 'sm' | 'md' | 'lg'
+  className?: string
+  children?: ReactNode
+}
+
+export function ModalContent({ size, ...rest }: ModalContentProps) {
+  return use(ModalShape) === 'dialog' ? <DialogContent {...rest} size={size} /> : <BottomSheetContent {...rest} />
+}
+
+export type ModalHeaderProps = DialogHeaderProps
+
+export function ModalHeader(props: ModalHeaderProps) {
+  return <DialogHeader {...props} />
+}
+
+export interface ModalTitleProps {
+  className?: string
+  children?: ReactNode
+}
+
+export function ModalTitle(props: ModalTitleProps) {
+  return use(ModalShape) === 'dialog' ? <DialogTitle {...props} /> : <BottomSheetTitle {...props} />
+}
+
+export type ModalDescriptionProps = ModalTitleProps
+
+export function ModalDescription(props: ModalDescriptionProps) {
+  return use(ModalShape) === 'dialog' ? <DialogDescription {...props} /> : <BottomSheetDescription {...props} />
+}
+
+export function ModalBody(props: { className?: string, children?: ReactNode }) {
+  return <DialogBody {...props} />
+}
+
+export type ModalFooterProps = DialogFooterProps
+
+export function ModalFooter({ layout, ...rest }: ModalFooterProps) {
+  const shape = use(ModalShape)
+  const resolved = typeof layout === 'object' ? layout[shape === 'dialog' ? 'wide' : 'narrow'] : layout
+
+  return <DialogFooter {...rest} layout={resolved ?? (shape === 'dialog' ? 'end' : 'fill')} />
+}

package/number-field/index.tsx

@@ -7,7 +7,7 @@ import { tv } from '../tv'
 
 export const numberField = tv({
   slots: {
-    root: 'flex items-center rounded-r8'
+    root: 'group/number flex items-center rounded-r8'
       + ' transition-state'
       + ' invalid-within:ring-2 invalid-within:ring-line-danger'
       + ' has-disabled:bg-bg-neutral-disabled has-disabled:cursor-not-allowed'
@@ -25,6 +25,11 @@ export const numberField = tv({
     surface: {
       bare: { root: 'bg-transparent ring-1 ring-inset ring-line-strong' },
       well: { root: 'bg-bg-well' },
+      ghost: {
+        root: 'bg-transparent focus-within:bg-bg-neutral-selected has-disabled:bg-transparent',
+        step: 'opacity-40 group-not-has-disabled/number:group-hover/number:opacity-100'
+          + ' group-not-has-disabled/number:group-focus-within/number:opacity-100',
+      },
     },
     size: {
       sm: { root: 'h-8', step: 'size-8' },
@@ -32,10 +37,16 @@ export const numberField = tv({
       lg: { root: 'h-10', step: 'size-10', input: 'text-t16' },
     },
     readonly: {
-      true: { root: 'bg-bg-well', input: 'text-fg-muted' },
+      true: { root: 'bg-bg-well has-disabled:bg-bg-well has-disabled:cursor-default', step: 'disabled:cursor-default', input: 'text-fg-muted' },
+      false: {},
     },
   },
 
+  compoundVariants: [
+    { surface: 'ghost', readonly: false, class: { root: 'not-has-disabled:not-focus-within:hover:bg-bg-neutral-hover' } },
+    { surface: 'ghost', readonly: true, class: { root: 'bg-transparent has-disabled:bg-transparent focus-within:bg-transparent' } },
+  ],
+
   defaultVariants: { surface: 'bare', size: 'md' },
 })
 
@@ -68,7 +79,7 @@ export type NumberFieldProps = Omit<NumberFieldPrimitive.Root.Props, 'className'
   & {
     decrementLabel: string
     incrementLabel: string
-    surface?: 'bare' | 'well'
+    surface?: 'bare' | 'well' | 'ghost'
     size?: 'sm' | 'md' | 'lg'
     className?: string
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pantoia/ui",
-  "version": "0.11.2",
+  "version": "0.12.0",
   "description": "Pantoia Design System",
   "homepage": "https://design.pantoia.com",
   "repository": {

package/progress/index.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import { Progress as ProgressPrimitive } from '@base-ui/react/progress'
+import type { ComponentProps } from 'react'
+
+import { tv } from '../tv'
+
+export const progress = tv({
+  slots: {
+    root: 'flex flex-wrap items-center justify-between gap-x-2 gap-y-tight',
+    track: 'bg-bg-neutral-selected h-1.5 w-full overflow-hidden rounded-full',
+    indicator: 'h-full rounded-full transition-all motion-reduce:transition-none',
+  },
+
+  variants: {
+    color: {
+      neutral: { indicator: 'bg-bg-neutral-solid' },
+      brand: { indicator: 'bg-bg-brand-solid' },
+      info: { indicator: 'bg-bg-info-solid' },
+      success: { indicator: 'bg-bg-success-solid' },
+      warning: { indicator: 'bg-bg-warning-solid' },
+      danger: { indicator: 'bg-bg-danger-solid' },
+    },
+  },
+
+  defaultVariants: { color: 'brand' },
+})
+
+export type ProgressProps = Omit<ComponentProps<typeof ProgressPrimitive.Root>, 'className' | 'value'> & {
+  value: number
+  color?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'danger'
+  className?: string
+}
+
+export function Progress({ color, className, children, ...rest }: ProgressProps) {
+  const ui = progress({ color })
+
+  return (
+    <ProgressPrimitive.Root {...rest} className={ui.root({ className })}>
+      {children}
+      <ProgressPrimitive.Track className={ui.track()}>
+        <ProgressPrimitive.Indicator className={ui.indicator()} />
+      </ProgressPrimitive.Track>
+    </ProgressPrimitive.Root>
+  )
+}
+
+const progressLabel = tv({ base: 'text-label' })
+
+export type ProgressLabelProps = Omit<ComponentProps<typeof ProgressPrimitive.Label>, 'className'> & {
+  className?: string
+}
+
+export function ProgressLabel({ className, ...rest }: ProgressLabelProps) {
+  return <ProgressPrimitive.Label {...rest} className={progressLabel({ className })} />
+}
+
+const progressValue = tv({ base: 'text-caption text-fg-muted tabular-nums' })
+
+export type ProgressValueProps = Omit<ComponentProps<typeof ProgressPrimitive.Value>, 'className'> & {
+  className?: string
+}
+
+export function ProgressValue({ className, ...rest }: ProgressValueProps) {
+  return <ProgressPrimitive.Value {...rest} className={progressValue({ className })} />
+}

package/registry.json

@@ -194,6 +194,27 @@
         "layer": "ui"
       }
     },
+    {
+      "name": "collapsible",
+      "type": "registry:ui",
+      "title": "Collapsible",
+      "files": [
+        {
+          "path": "collapsible/index.tsx",
+          "type": "registry:ui"
+        },
+        {
+          "path": "collapsible/index.module.css",
+          "type": "registry:ui"
+        }
+      ],
+      "dependencies": [
+        "@base-ui/react"
+      ],
+      "meta": {
+        "layer": "ui"
+      }
+    },
     {
       "name": "combobox",
       "type": "registry:ui",
@@ -353,6 +374,26 @@
         "layer": "ui"
       }
     },
+    {
+      "name": "fieldset",
+      "type": "registry:ui",
+      "title": "Fieldset",
+      "files": [
+        {
+          "path": "fieldset/index.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "dependencies": [
+        "@base-ui/react"
+      ],
+      "registryDependencies": [
+        "tv"
+      ],
+      "meta": {
+        "layer": "ui"
+      }
+    },
     {
       "name": "input",
       "type": "registry:ui",
@@ -407,6 +448,27 @@
         "layer": "ui"
       }
     },
+    {
+      "name": "modal",
+      "type": "registry:ui",
+      "title": "Modal",
+      "files": [
+        {
+          "path": "modal/index.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "dependencies": [
+        "@base-ui/react"
+      ],
+      "registryDependencies": [
+        "dialog",
+        "bottom-sheet"
+      ],
+      "meta": {
+        "layer": "derived"
+      }
+    },
     {
       "name": "number-field",
       "type": "registry:ui",
@@ -448,6 +510,26 @@
         "radius": "rounded-r16"
       }
     },
+    {
+      "name": "progress",
+      "type": "registry:ui",
+      "title": "Progress",
+      "files": [
+        {
+          "path": "progress/index.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "dependencies": [
+        "@base-ui/react"
+      ],
+      "registryDependencies": [
+        "tv"
+      ],
+      "meta": {
+        "layer": "ui"
+      }
+    },
     {
       "name": "radio-group",
       "type": "registry:ui",
@@ -469,6 +551,29 @@
         "layer": "ui"
       }
     },
+    {
+      "name": "segmented-control",
+      "type": "registry:ui",
+      "title": "SegmentedControl",
+      "files": [
+        {
+          "path": "segmented-control/index.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "dependencies": [
+        "@base-ui/react"
+      ],
+      "registryDependencies": [
+        "tv"
+      ],
+      "meta": {
+        "layer": "ui",
+        "sizes": [
+          "SegmentedControlItem"
+        ]
+      }
+    },
     {
       "name": "select",
       "type": "registry:ui",
@@ -490,6 +595,26 @@
         "radius": "rounded-r12"
       }
     },
+    {
+      "name": "separator",
+      "type": "registry:ui",
+      "title": "Separator",
+      "files": [
+        {
+          "path": "separator/index.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "dependencies": [
+        "@base-ui/react"
+      ],
+      "registryDependencies": [
+        "tv"
+      ],
+      "meta": {
+        "layer": "ui"
+      }
+    },
     {
       "name": "switch",
       "type": "registry:ui",

package/segmented-control/index.tsx

@@ -0,0 +1,63 @@
+'use client'
+
+import { Radio } from '@base-ui/react/radio'
+import { RadioGroup } from '@base-ui/react/radio-group'
+import { createContext, use, type ComponentProps } from 'react'
+
+import { tv } from '../tv'
+
+type Size = 'sm' | 'md' | 'lg'
+
+const Context = createContext<{ size: Size, fill: boolean }>({ size: 'md', fill: false })
+
+export const segmentedControl = tv({
+  slots: {
+    root: 'bg-bg-neutral-selected rounded-r10 inline-flex shrink-0 gap-0.5 p-1',
+    item: 'text-label text-fg-muted rounded-r6 inline-flex h-full items-center justify-center gap-tight whitespace-nowrap'
+      + ' transition-state press-shrink cursor-pointer'
+      + ' not-data-disabled:hover:text-fg'
+      + ' checked:bg-bg-neutral-thumb checked:text-fg checked:shadow-s1'
+      + ' focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-line-focus-ring'
+      + ' data-disabled:text-fg-disabled data-disabled:cursor-not-allowed',
+  },
+
+  variants: {
+    size: {
+      sm: { root: 'h-8', item: 'text-t13 font-medium px-2.5 [&_svg]:size-4' },
+      md: { root: 'h-9', item: 'px-2.5 [&_svg]:size-4' },
+      lg: { root: 'h-10', item: 'text-t16 font-medium px-3 [&_svg]:size-5' },
+    },
+    fill: {
+      true: { root: 'flex w-full', item: 'flex-1' },
+      false: '',
+    },
+  },
+
+  defaultVariants: { size: 'md', fill: false },
+})
+
+export type SegmentedControlProps<Value> = Omit<ComponentProps<typeof RadioGroup<Value>>, 'className'> & {
+  size?: Size
+  fill?: boolean
+  className?: string
+}
+
+export function SegmentedControl<Value>({ size = 'md', fill = false, className, ...rest }: SegmentedControlProps<Value>) {
+  const ui = segmentedControl({ size, fill })
+
+  return (
+    <Context value={{ size, fill }}>
+      <RadioGroup {...rest} className={ui.root({ className })} />
+    </Context>
+  )
+}
+
+export type SegmentedControlItemProps<Value> = Omit<Radio.Root.Props<Value>, 'className'> & {
+  className?: string
+}
+
+export function SegmentedControlItem<Value>({ className, ...rest }: SegmentedControlItemProps<Value>) {
+  const { size, fill } = use(Context)
+
+  return <Radio.Root {...rest} className={segmentedControl({ size, fill }).item({ className })} />
+}

package/select/index.tsx

@@ -6,8 +6,21 @@ import type { ComponentProps, ReactNode } from 'react'
 
 import { tv } from '../tv'
 
+const selectIcon = tv({
+  base: 'text-fg-subtle transition-state',
+  variants: {
+    surface: {
+      bare: '',
+      well: '',
+      ghost: 'opacity-40 group-data-popup-open/select:opacity-100'
+        + ' group-enabled/select:group-not-data-readonly/select:group-hover/select:opacity-100'
+        + ' group-enabled/select:group-not-data-readonly/select:group-focus-visible/select:opacity-100',
+    },
+  },
+})
+
 export const selectTrigger = tv({
-  base: 'flex w-full items-center justify-between gap-tight rounded-r8'
+  base: 'group/select flex w-full items-center justify-between gap-tight rounded-r8'
     + ' text-value text-fg'
     + ' transition-state'
     + ' invalid:ring-2 invalid:ring-line-danger'
@@ -19,6 +32,8 @@ export const selectTrigger = tv({
     surface: {
       bare: 'bg-transparent ring-1 ring-inset ring-line-strong',
       well: 'bg-bg-well',
+      ghost: 'bg-transparent enabled:not-data-readonly:not-data-popup-open:hover:bg-bg-neutral-hover'
+        + ' data-popup-open:bg-bg-neutral-selected disabled:bg-transparent',
     },
     size: {
       sm: 'h-8 px-3',
@@ -75,7 +90,7 @@ export type SelectProps = Omit<ComponentProps<typeof SelectPrimitive.Trigger>, '
     defaultValue?: string | null
     onValueChange?: (value: string | null, eventDetails: SelectPrimitive.Root.ChangeEventDetails) => void
     placeholder?: string
-    surface?: 'bare' | 'well'
+    surface?: 'bare' | 'well' | 'ghost'
     size?: 'sm' | 'md' | 'lg'
     arrow?: boolean
     className?: string
@@ -140,7 +155,7 @@ export function Select({
         <span className="min-w-0 truncate">
           <SelectPrimitive.Value placeholder={placeholder} />
         </span>
-        <SelectPrimitive.Icon className="text-fg-subtle">
+        <SelectPrimitive.Icon className={selectIcon({ surface })}>
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="size-4 transition-transform in-data-popup-open:rotate-180 motion-reduce:transition-none">
             <path d="m6 9 6 6 6-6" />
           </svg>

package/separator/index.tsx

@@ -0,0 +1,25 @@
+import { Separator as SeparatorPrimitive } from '@base-ui/react/separator'
+import type { ComponentProps } from 'react'
+
+import { tv } from '../tv'
+
+export const separator = tv({
+  base: 'bg-line shrink-0',
+
+  variants: {
+    orientation: {
+      horizontal: 'h-px w-full',
+      vertical: 'w-px self-stretch',
+    },
+  },
+
+  defaultVariants: { orientation: 'horizontal' },
+})
+
+export type SeparatorProps = Omit<ComponentProps<typeof SeparatorPrimitive>, 'className'> & {
+  className?: string
+}
+
+export function Separator({ orientation = 'horizontal', className, ...rest }: SeparatorProps) {
+  return <SeparatorPrimitive {...rest} orientation={orientation} className={separator({ orientation, className })} />
+}

package/skills/pantoia-design/SKILL.md

@@ -78,8 +78,7 @@ Select와 RadioGroup의 state는 `useState<string | null>`로 둔다.
 ```
 frame   배경과 선. 페이지 안의 영역
 card    배경과 그림자. 목록의 항목
-float   배경과 선과 그림자. 페이지 위에 뜨는 것
-sheet   배경만. 화면을 덮는 것
+float   배경과 선과 그림자. 페이지나 overlay 위에 뜨는 것
 well    bg-bg-well. 파인 면
 ```
 
@@ -147,27 +146,33 @@ className     그 한 곳만 바뀐다
 | 컴포넌트 | add | 하위 컴포넌트 | variant |
 |---|---|---|---|
 | Accordion | accordion | Accordion, AccordionItem, AccordionTrigger, AccordionContent | - |
-| AlertDialog | alert-dialog | AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogTitle, AlertDialogDescription, AlertDialogHeader, AlertDialogFooter, AlertDialogAction, AlertDialogCancel | - |
+| AlertDialog | alert-dialog | AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogTitle, AlertDialogDescription, AlertDialogHeader, AlertDialogBody, AlertDialogFooter, AlertDialogAction, AlertDialogCancel | size |
 | Avatar | avatar | Avatar | color, size |
 | Badge | badge | Badge | color, emphasis, shape |
-| BottomSheet | bottom-sheet | BottomSheet, BottomSheetTrigger, BottomSheetClose, BottomSheetContent, BottomSheetHeader, BottomSheetTitle, BottomSheetDescription | - |
+| BottomSheet | bottom-sheet | BottomSheet, BottomSheetTrigger, BottomSheetClose, BottomSheetContent, BottomSheetHeader, BottomSheetTitle, BottomSheetDescription, BottomSheetBody, BottomSheetFooter | - |
 | Button | button | Button | color, emphasis, size, shape |
 | Callout | callout | Callout | color |
 | Checkbox | checkbox | CheckboxGroup, Checkbox | color |
+| Collapsible | collapsible | Collapsible, CollapsibleTrigger, CollapsibleContent | - |
 | Combobox | combobox | Combobox, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxCancel, ComboboxContent, ComboboxViewport, ComboboxCollection, ComboboxItem, ComboboxItemText, ComboboxItemDescription, ComboboxGroup, ComboboxEmpty, ComboboxSeparator | surface, size |
 | CommandPalette | command-palette | CommandPalette | - |
 | ContextMenu | context-menu | ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuSub, ContextMenuSubTrigger, ContextMenuSubContent | color |
-| Dialog | dialog | Dialog, DialogTrigger, DialogClose, DialogContent, DialogTitle, DialogDescription, DialogHeader, DialogFooter | size |
-| Drawer | drawer | Drawer, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription | side |
+| Dialog | dialog | Dialog, DialogTrigger, DialogClose, DialogContent, DialogTitle, DialogDescription, DialogHeader, DialogBody, DialogFooter | size |
+| Drawer | drawer | Drawer, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerBody, DrawerFooter | side |
 | DropdownMenu | dropdown-menu | DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent | color |
 | Field | field | Field, FieldLabel, FieldHelp, FieldError, FieldPending, FieldSuccess | layout |
+| Fieldset | fieldset | Fieldset, FieldsetLegend | - |
 | Input | input | Input | surface, size |
 | Kbd | kbd | Kbd | - |
 | Label | label | Label | - |
+| Modal | modal | Modal, ModalTrigger, ModalClose, ModalContent, ModalHeader, ModalTitle, ModalDescription, ModalBody, ModalFooter | - |
 | NumberField | number-field | NumberField | surface, size, readonly |
 | Popover | popover | Popover, PopoverTrigger, PopoverAnchor, PopoverClose, PopoverContent | - |
+| Progress | progress | Progress, ProgressLabel, ProgressValue | color |
 | RadioGroup | radio-group | RadioGroup, RadioGroupItem, RadioGroupItemLabel, RadioGroupItemDescription | color |
+| SegmentedControl | segmented-control | SegmentedControl, SegmentedControlItem | size, fill |
 | Select | select | Select, SelectGroup, SelectItem, SelectItemText, SelectItemDescription, SelectSeparator | surface, size |
+| Separator | separator | Separator | orientation |
 | Switch | switch | Switch | color |
 | Table | table | Table, TableHeader, TableHeadCell, TableBody, TableRow, TableCell | fixed, mono |
 | Tabs | tabs | Tabs, TabsList, TabsTrigger, TabsContent | - |
@@ -181,6 +186,7 @@ className     그 한 곳만 바뀐다
 ```
 Dialog와 AlertDialog         내용을 보여 주면 Dialog, 되돌릴 수 없는 일을 한 번 더 물으면 AlertDialog
 Dialog와 Drawer              화면 가운데면 Dialog, 가장자리에서 열리면 Drawer
+Modal과 Dialog               화면 폭에 따라 BottomSheet로 바뀌어야 하면 Modal, 늘 가운데면 Dialog
 Drawer와 BottomSheet         왼쪽이나 오른쪽에서 열리면 Drawer, 아래에서 올라오면 BottomSheet
 DropdownMenu와 ContextMenu   트리거를 누르면 DropdownMenu, 영역을 오른쪽 클릭하거나 길게 누르면 ContextMenu
 Select와 Combobox            목록에서 고르면 Select, 입력해서 찾으면 Combobox
@@ -188,11 +194,24 @@ Checkbox와 Switch            여러 개를 고르면 Checkbox, 설정을 바로
 Toggle과 Switch              도구 모음에서 상태를 누르면 Toggle, 설정이면 Switch
 Badge와 Button               누를 수 없으면 Badge, 누르면 Button
 Tabs와 Accordion             한 번에 하나만 보이면 Tabs, 여러 개를 펴 두면 Accordion
+SegmentedControl과 Tabs      같은 내용의 보기 방식을 바꾸면 SegmentedControl, 다른 내용으로 바꾸면 Tabs
+SegmentedControl과 Toggle    여럿 중 하나를 고르면 SegmentedControl, 하나를 켜고 끄면 Toggle
+Collapsible과 Accordion      한 영역을 접으면 Collapsible, 여러 영역을 함께 다루면 Accordion
 Tooltip과 Popover            짧은 설명이면 Tooltip, 안에서 조작하면 Popover
 ```
 
 Avatar의 배경색은 color나 seed 중 하나로 정한다. seed에는 사용자 id처럼 바뀌지 않는 값을 넘기고, 같은 seed는 어느 앱에서나 같은 색이다.
 
+Dialog, AlertDialog, Drawer, BottomSheet의 Footer는 layout으로 버튼을 배치한다. end, between, fill, grow-last 중에 고르고, 화면 폭마다 다르면 { narrow, wide }를 넘긴다. 기준은 sm이고, ModalFooter는 Dialog 모양이면 wide, BottomSheet 모양이면 narrow를 쓴다.
+
+오버레이 안에서 다른 오버레이를 열 때는 Root를 부모 Content 안에 둔다. 뒤의 창은 어두워진다. Dialog는 안에서 무엇을 열어도 조금 작아지고, Drawer와 BottomSheet는 Drawer나 BottomSheet를 열 때만 작아진다.
+
+Modal은 기준 폭(기본 xs, 480px)보다 넓으면 Dialog, 좁으면 BottomSheet로 연다.
+
+Input, Textarea, NumberField, Select, ComboboxAnchor의 surface는 폼에서는 bare나 well을 쓰고, 표 셀, 헤더, 문장 안에서 값을 바로 고칠 때는 ghost를 쓴다.
+
+Fieldset 안의 컨트롤은 Field로 감싼다. Fieldset의 disabled는 Field를 거쳐 컨트롤에 전달된다.
+
 Field는 라벨, 도움말, 오류 메시지를 입력 컨트롤에 묶는다. Input, Textarea, NumberField, Select, Combobox와 함께 쓴다.
 
 Select는 고른 항목의 `SelectItemText`나 글자를 트리거에 보인다. `SelectItem`을 다른 컴포넌트로 감싸면 `items`로 라벨을 넘긴다.

package/textarea/index.tsx

@@ -19,6 +19,9 @@ export const textarea = tv({
     surface: {
       bare: 'bg-transparent ring-1 ring-inset ring-line-strong read-only:bg-bg-well',
       well: 'bg-bg-well',
+      ghost: 'bg-transparent enabled:not-read-only:not-focus:hover:bg-bg-neutral-hover'
+        + ' focus:bg-bg-neutral-selected read-only:focus:bg-transparent disabled:bg-transparent'
+        + ' resize-none enabled:not-read-only:hover:resize-y enabled:not-read-only:focus:resize-y',
     },
     size: {
       sm: 'p-2',
@@ -33,7 +36,7 @@ export const textarea = tv({
 export type TextareaProps = Omit<ComponentProps<'textarea'>, 'className' | 'value' | 'defaultValue'>
   & Pick<FieldPrimitive.Control.Props, 'value' | 'defaultValue' | 'onValueChange'>
   & {
-    surface?: 'bare' | 'well'
+    surface?: 'bare' | 'well' | 'ghost'
     size?: 'sm' | 'md' | 'lg'
     className?: string
   }

package/tokens.css

@@ -16,6 +16,7 @@
   --pds-bg-neutral-hover:                     rgba(0,23,51,0.02);
   --pds-bg-neutral-knob:                      #ffffff;
   --pds-bg-neutral-knob-off:                  #ffffff;
+  --pds-bg-neutral-thumb:                     #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);
@@ -81,6 +82,7 @@
   --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-thumb:                     #3c3c47;
   --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);
@@ -145,6 +147,7 @@
   --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-thumb:                   var(--pds-bg-neutral-thumb);
   --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);

package/utilities.css

@@ -90,10 +90,6 @@
   @apply bg-bg-panel border border-line shadow-s3;
 }
 
-@utility sheet {
-  @apply bg-bg-panel;
-}
-
 @utility press {
   position: relative;