@pantoia/ui 0.1.0

package/tooltip/AGENTS.md

@@ -0,0 +1,50 @@
+# Tooltip
+
+```
+받기   npx @pantoia/ui add tooltip
+층     ui
+파일   tooltip/index.tsx · tooltip/AGENTS.md
+```
+
+## 부위
+
+| 이름 | props |
+|---|---|
+| `Tooltip` | `TooltipProps` |
+| `TooltipTrigger` | — |
+| `TooltipContent` | `TooltipContentProps` |
+
+### `TooltipTrigger`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `children` | `ReactNode` | 예 |
+
+## props
+
+### `TooltipProps`
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `open` | `boolean` |  |
+| `defaultOpen` | `boolean` |  |
+| `onOpenChange` | `(open: boolean) => void` |  |
+| `delay` | `number` |  |
+| `children` | `ReactNode` |  |
+
+### `TooltipContentProps`
+
+`Omit<ComponentProps<typeof TooltipPrimitive.Content>, 'side'>` 를 확장한다.
+
+| 이름 | 타입 | 필수 |
+|---|---|---|
+| `side` | `'top' \| 'right' \| 'bottom' \| 'left'` |  |
+| `arrow` | `boolean` |  |
+
+## 함께 받는 것
+
+`tv`
+
+## npm 의존
+
+`radix-ui`

package/tooltip/index.tsx

@@ -0,0 +1,57 @@
+'use client'
+
+import { Tooltip as TooltipPrimitive } from 'radix-ui'
+import type { ComponentProps, ReactNode } from 'react'
+
+import { tv } from '../tv'
+
+export interface TooltipProps {
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+  delay?: number
+  children?: ReactNode
+}
+
+export function Tooltip({ open, defaultOpen = false, onOpenChange, delay = 100, children }: TooltipProps) {
+  return (
+    <TooltipPrimitive.Provider delayDuration={delay}>
+      <TooltipPrimitive.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
+        {children}
+      </TooltipPrimitive.Root>
+    </TooltipPrimitive.Provider>
+  )
+}
+
+export function TooltipTrigger({ children }: { children: ReactNode }) {
+  return <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
+}
+
+export interface TooltipContentProps extends Omit<ComponentProps<typeof TooltipPrimitive.Content>, 'side'> {
+  side?: 'top' | 'right' | 'bottom' | 'left'
+  arrow?: boolean
+}
+
+export function TooltipContent({
+  side = 'top',
+  arrow = true,
+  className,
+  children,
+  ...rest
+}: TooltipContentProps) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        {...rest}
+        side={side}
+        sideOffset={6}
+        className={tv({ base: 'bg-float text-fg rounded-r12 shadow-s3 z-overlay'
+          + ' text-caption max-w-64 px-3 py-1'
+          + ' open:animate-enter closed:animate-exit' })({ className })}
+      >
+        {children}
+        {arrow && <TooltipPrimitive.Arrow className="fill-float" width={10} height={5} />}
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}

package/tv.ts

@@ -0,0 +1,23 @@
+import { createTV } from 'tailwind-variants'
+
+export type { VariantProps } from 'tailwind-variants'
+
+export const tv = createTV({
+  twMergeConfig: {
+    theme: {
+      spacing: ['tight', 'stack', 'block', 'section', 'gutter'],
+      radius: [
+        'mark', 'well', 'panel', 'float',
+        'r2', 'r4', 'r6', 'r8', 'r10', 'r12', 'r14', 'r16', 'r20', 'r24',
+      ],
+      text: [
+        'display', 'title', 'section', 'subsection', 'prose', 'value',
+        'label', 'caption', 'micro',
+        't10', 't11', 't12', 't13', 't14', 't16', 't18', 't20',
+        't24', 't28', 't32', 't40', 't48', 't56', 't64',
+      ],
+      shadow: ['s1', 's2', 's3'],
+      ease: ['state', 'enter', 'exit'],
+    },
+  },
+})