@pantoia/ui 0.1.0

package/popover/AGENTS.md

@@ -0,0 +1,64 @@
+# Popover
+
+```
+받기   npx @pantoia/ui add popover
+층     ui
+파일   popover/index.tsx · popover/AGENTS.md
+```
+
+## 부위
+
+| 이름 | props |
+|---|---|
+| `Popover` | `PopoverProps` |
+| `PopoverTrigger` | — |
+| `PopoverAnchor` | — |
+| `PopoverClose` | — |
+| `PopoverContent` | `PopoverContentProps` |
+
+### `PopoverTrigger`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `children` | `ReactNode` | 예 |
+
+### `PopoverAnchor`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `children` | `ReactNode` | 예 |
+
+### `PopoverClose`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `children` | `ReactNode` | 예 |
+
+## props
+
+### `PopoverProps`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `open` | `boolean` |  |
+| `defaultOpen` | `boolean` |  |
+| `onOpenChange` | `(open: boolean) => void` |  |
+| `children` | `ReactNode` |  |
+
+### `PopoverContentProps`
+
+`Omit<ComponentProps<typeof PopoverPrimitive.Content>, 'side' | 'align'>` 를 확장한다.
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `side` | `'top' \| 'right' \| 'bottom' \| 'left'` |  |
+| `align` | `'start' \| 'center' \| 'end'` |  |
+| `arrow` | `boolean` |  |
+
+## 함께 받는 것
+
+`tv`
+
+## npm 의존
+
+`radix-ui`

package/popover/index.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import { Popover as PopoverPrimitive } from 'radix-ui'
+import type { ComponentProps, ReactNode } from 'react'
+
+import { tv } from '../tv'
+
+export interface PopoverProps {
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+  children?: ReactNode
+}
+
+export function Popover({ open, defaultOpen, onOpenChange, children }: PopoverProps) {
+  return (
+    <PopoverPrimitive.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
+      {children}
+    </PopoverPrimitive.Root>
+  )
+}
+
+export function PopoverTrigger({ children }: { children: ReactNode }) {
+  return <PopoverPrimitive.Trigger asChild>{children}</PopoverPrimitive.Trigger>
+}
+
+export function PopoverAnchor({ children }: { children: ReactNode }) {
+  return <PopoverPrimitive.Anchor asChild>{children}</PopoverPrimitive.Anchor>
+}
+
+export function PopoverClose({ children }: { children: ReactNode }) {
+  return <PopoverPrimitive.Close asChild>{children}</PopoverPrimitive.Close>
+}
+
+export interface PopoverContentProps extends Omit<ComponentProps<typeof PopoverPrimitive.Content>, 'side' | 'align'> {
+  side?: 'top' | 'right' | 'bottom' | 'left'
+  align?: 'start' | 'center' | 'end'
+  arrow?: boolean
+}
+
+export function PopoverContent({
+  side = 'bottom',
+  align = 'center',
+  arrow = true,
+  className,
+  children,
+  ...rest
+}: PopoverContentProps) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        {...rest}
+        side={side}
+        align={align}
+        sideOffset={8}
+        arrowPadding={16}
+        className={tv({ base: 'bg-float text-fg rounded-float shadow-s3 z-overlay p-4'
+          + ' open:animate-enter closed:animate-exit'
+          + ' focus-visible:outline-none' })({ className })}
+      >
+        {children}
+        {arrow && <PopoverPrimitive.Arrow className="fill-float" width={12} height={6} />}
+      </PopoverPrimitive.Content>
+    </PopoverPrimitive.Portal>
+  )
+}

package/press.css

@@ -0,0 +1,37 @@
+:root, .light { --pressed-dim: rgba(0,23,51,0.12); }
+.dark         { --pressed-dim: rgba(209,209,253,0.14); }
+
+:root { --scale-press: 0.97; }
+
+@media (prefers-reduced-motion: reduce) {
+  :root { --scale-press: 1; }
+}
+
+@utility press {
+  position: relative;
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: var(--pressed-dim);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--dur-state) var(--ease-state);
+  }
+
+  &:active:not(:disabled)::after,
+  &[data-pressed]:not(:disabled)::after {
+    opacity: 1;
+    transition-duration: 0s;
+  }
+}
+
+@utility press-shrink {
+  &:active:not(:disabled),
+  &[data-pressed]:not(:disabled) {
+    scale: var(--scale-press);
+    transition-duration: 0s;
+  }
+}

package/radio-group/AGENTS.md

@@ -0,0 +1,81 @@
+# RadioGroup
+
+```
+받기   npx @pantoia/ui add radio-group
+층     ui
+파일   radio-group/index.tsx · radio-group/AGENTS.md
+```
+
+## 부위
+
+| 이름 | props |
+|---|---|
+| `RadioGroup` | `RadioGroupProps` |
+| `RadioGroupItem` | `RadioGroupItemProps` |
+| `RadioGroupItemLabel` | — |
+| `RadioGroupItemDescription` | — |
+
+### `RadioGroupItemLabel`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `className` | `string` |  |
+| `children` | `ReactNode` |  |
+
+### `RadioGroupItemDescription`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `className` | `string` |  |
+| `children` | `ReactNode` |  |
+
+## props
+
+### `RadioColor`
+
+`'control' | 'info' | 'success' | 'warning' | 'danger'`
+
+### `RadioItemContext`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `id` | `string` | 예 |
+| `labelId` | `string` | 예 |
+| `descriptionId` | `string` | 예 |
+
+### `RadioGroupProps`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `value` | `string` |  |
+| `defaultValue` | `string` |  |
+| `onValueChange` | `(value: string) => void` |  |
+| `color` | `RadioColor` |  |
+| `disabled` | `boolean` |  |
+| `className` | `string` |  |
+| `children` | `ReactNode` |  |
+
+### `RadioGroupItemProps`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `value` | `string` | 예 |
+| `disabled` | `boolean` |  |
+| `className` | `string` |  |
+| `children` | `ReactNode` |  |
+
+## 변형 — `radioGroupItem`
+
+슬롯 `root` · `control`
+
+| 축 | 값 | 기본 |
+|---|---|---|
+| `color` | `control` · `info` · `success` · `warning` · `danger` | `control` |
+
+## 함께 받는 것
+
+`label` · `tv`
+
+## npm 의존
+
+`radix-ui`

package/radio-group/index.tsx

@@ -0,0 +1,139 @@
+'use client'
+
+import { RadioGroup as RadioGroupPrimitive } from 'radix-ui'
+import { createContext, use, useId, type ReactNode } from 'react'
+
+import { Label } from '../label'
+import { tv } from '../tv'
+
+export type RadioColor = 'control' | 'info' | 'success' | 'warning' | 'danger'
+
+const ColorContext = createContext<RadioColor>('control')
+
+export interface RadioItemContext {
+  id: string
+  labelId: string
+  descriptionId: string
+}
+
+const ItemContext = createContext<RadioItemContext | null>(null)
+
+export const radioGroupItem = tv({
+  slots: {
+    root: 'flex gap-2 items-center described:items-start described:[&_.radio-mark]:mt-0.5',
+    control: 'radio-mark size-5 shrink-0 rounded-full ring-1 ring-inset ring-line-strong'
+      + ' bg-transparent transition-state press press-shrink'
+      + ' inline-flex items-center justify-center'
+      + ' checked:ring-2'
+      + ' in-invalid:ring-2 in-invalid:ring-danger'
+      + ' focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+      + ' disabled:ring-line disabled:bg-disabled disabled:cursor-not-allowed'
+      + ' checked:disabled:bg-control-on-disabled checked:disabled:ring-control-on-disabled',
+  },
+
+  variants: {
+    color: {
+      control: { control: 'checked:bg-control-on checked:ring-control-on' },
+      info: { control: 'checked:bg-info checked:ring-info' },
+      success: { control: 'checked:bg-success checked:ring-success' },
+      warning: { control: 'checked:bg-warning checked:ring-warning' },
+      danger: { control: 'checked:bg-danger checked:ring-danger' },
+    },
+  },
+
+  defaultVariants: { color: 'control' },
+})
+
+export interface RadioGroupProps {
+  value?: string
+  defaultValue?: string
+  onValueChange?: (value: string) => void
+  color?: RadioColor
+  disabled?: boolean
+  className?: string
+  children?: ReactNode
+}
+
+export function RadioGroup({
+  value,
+  defaultValue,
+  onValueChange,
+  color = 'control',
+  disabled = false,
+  className,
+  children,
+  ...rest
+}: RadioGroupProps) {
+  return (
+    <ColorContext value={color}>
+      <RadioGroupPrimitive.Root
+        {...rest}
+        value={value}
+        defaultValue={defaultValue}
+        onValueChange={onValueChange}
+        disabled={disabled}
+        className={tv({ base: 'flex flex-col gap-3' })({ className })}
+      >
+        {children}
+      </RadioGroupPrimitive.Root>
+    </ColorContext>
+  )
+}
+
+export interface RadioGroupItemProps {
+  value: string
+  disabled?: boolean
+  className?: string
+  children?: ReactNode
+}
+
+export function RadioGroupItem({ value, disabled, className, children }: RadioGroupItemProps) {
+  const id = useId()
+  const color = use(ColorContext)
+  const ui = radioGroupItem({ color })
+
+  return (
+    <ItemContext value={{ id, labelId: `${id}-label`, descriptionId: `${id}-description` }}>
+      <div className={ui.root({ className })}>
+        <RadioGroupPrimitive.Item
+          id={id}
+          value={value}
+          disabled={disabled}
+          aria-labelledby={`${id}-label`}
+          aria-describedby={`${id}-description`}
+          className={ui.control()}
+        >
+          <RadioGroupPrimitive.Indicator className="text-fg-on-control size-2.5 rounded-full bg-current" />
+        </RadioGroupPrimitive.Item>
+
+        <div className="flex min-w-0 flex-col gap-0.5">
+          {children}
+        </div>
+      </div>
+    </ItemContext>
+  )
+}
+
+export function RadioGroupItemLabel({ className, children }: { className?: string, children?: ReactNode }) {
+  const ctx = use(ItemContext)
+
+  return (
+    <Label id={ctx?.labelId} htmlFor={ctx?.id} className={className}>
+      {children}
+    </Label>
+  )
+}
+
+export function RadioGroupItemDescription({ className, children }: { className?: string, children?: ReactNode }) {
+  const ctx = use(ItemContext)
+
+  return (
+    <p
+      id={ctx?.descriptionId}
+      data-description
+      className={tv({ base: 'text-caption text-fg-subtle' })({ className })}
+    >
+      {children}
+    </p>
+  )
+}