@pantoia/ui 0.2.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pantoia/ui",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Pantoia Design System",
   "homepage": "https://design.pantoia.com",
   "repository": {
@@ -16,20 +16,21 @@
   "files": [
     "*/index.tsx",
     "*/index.module.css",
-    "*/AGENTS.md",
     "dist",
     "tv.ts",
-    "test-utils.ts",
-    "styles.css",
-    "press.css",
+    "tailwind.css",
+    "palette.css",
+    "tokens.css",
+    "utilities.css",
     "registry.json"
   ],
   "exports": {
     "./tv": "./tv.ts",
-    "./styles.css": "./styles.css",
-    "./press.css": "./press.css",
+    "./tailwind.css": "./tailwind.css",
+    "./palette.css": "./palette.css",
+    "./tokens.css": "./tokens.css",
+    "./utilities.css": "./utilities.css",
     "./registry.json": "./registry.json",
-    "./test-utils": "./test-utils.ts",
     "./*": "./*/index.tsx"
   },
   "sideEffects": [
@@ -39,24 +40,20 @@
     "access": "public"
   },
   "engines": {
-    "node": ">=24"
+    "node": ">=20.11"
   },
   "scripts": {
     "prepack": "tsc cli/index.ts --ignoreConfig --outDir dist --target es2022 --module esnext --moduleResolution bundler --skipLibCheck --types node",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@fontsource/jetbrains-mono": "5.3.0",
-    "lucide-react": "^1.39.0",
-    "pretendard": "1.3.9",
-    "radix-ui": "^1.6.7",
-    "sonner": "^2.0.8",
+    "@base-ui/react": "^1.8.0",
     "tailwind-variants": "^3.3.1"
   },
   "peerDependencies": {
     "react": "^19",
     "react-dom": "^19",
-    "tailwindcss": "^4.3.3"
+    "tailwindcss": "^4.0.0"
   },
   "devDependencies": {
     "@pantoia/typescript-config": "*",

package/palette.css

@@ -0,0 +1,114 @@
+:root, .light {
+  --pds-gray-50:#f9fafb;   --pds-gray-100:#f2f4f6; --pds-gray-200:#e5e8eb; --pds-gray-300:#d1d6db;
+  --pds-gray-400:#b0b8c1;  --pds-gray-500:#8b95a1; --pds-gray-600:#6b7684; --pds-gray-700:#4e5968;
+  --pds-gray-800:#333d4b;  --pds-gray-900:#191f28;
+
+  --pds-brand-50:#f5f1fd;  --pds-brand-100:#e4d6ff; --pds-brand-200:#ceb0ff; --pds-brand-300:#bb8ffa;
+  --pds-brand-400:#aa74f2; --pds-brand-500:#9c63e4; --pds-brand-600:#8750c9; --pds-brand-700:#7543b0;
+  --pds-brand-800:#633997; --pds-brand-900:#54317f;
+
+  --pds-blue-50:#e8f3ff;  --pds-blue-100:#c9e2ff; --pds-blue-200:#90c2ff; --pds-blue-300:#64a8ff;
+  --pds-blue-400:#4593fc; --pds-blue-500:#3182f6; --pds-blue-600:#2272eb; --pds-blue-700:#1b64da;
+  --pds-blue-800:#1957c2; --pds-blue-900:#194aa6;
+
+  --pds-green-50:#f0faf6;  --pds-green-100:#aeefd5; --pds-green-200:#76e4b8; --pds-green-300:#3fd599;
+  --pds-green-400:#15c47e; --pds-green-500:#03b26c; --pds-green-600:#02a262; --pds-green-700:#029359;
+  --pds-green-800:#028450; --pds-green-900:#027648;
+
+  --pds-orange-50:#fff3e0;  --pds-orange-100:#ffe0b0; --pds-orange-200:#ffcd80; --pds-orange-300:#ffbd51;
+  --pds-orange-400:#ffa927; --pds-orange-500:#fe9800; --pds-orange-600:#fb8800; --pds-orange-700:#f57800;
+  --pds-orange-800:#ed6700; --pds-orange-900:#e45600;
+
+  --pds-red-50:#ffeeee;  --pds-red-100:#ffd4d6; --pds-red-200:#feafb4; --pds-red-300:#fb8890;
+  --pds-red-400:#f66570; --pds-red-500:#f04452; --pds-red-600:#e42939; --pds-red-700:#d22030;
+  --pds-red-800:#bc1b2a; --pds-red-900:#a51926;
+}
+
+.dark {
+  --pds-gray-50:#202027;   --pds-gray-100:#2c2c35; --pds-gray-200:#3c3c47; --pds-gray-300:#4d4d59;
+  --pds-gray-400:#62626d;  --pds-gray-500:#7e7e87; --pds-gray-600:#9e9ea4; --pds-gray-700:#c3c3c6;
+  --pds-gray-800:#e4e4e5;  --pds-gray-900:#ffffff;
+
+  --pds-brand-50:#362949;  --pds-brand-100:#462e66; --pds-brand-200:#583682; --pds-brand-300:#6b3fa0;
+  --pds-brand-400:#8451c4; --pds-brand-500:#9c63e4; --pds-brand-600:#ad75f7; --pds-brand-700:#c094ff;
+  --pds-brand-800:#d6baff; --pds-brand-900:#eadeff;
+
+  --pds-blue-50:#202c4d;  --pds-blue-100:#23386a; --pds-blue-200:#25478c; --pds-blue-300:#265ab3;
+  --pds-blue-400:#2970d9; --pds-blue-500:#3485fa; --pds-blue-600:#449bff; --pds-blue-700:#61b0ff;
+  --pds-blue-800:#8fcdff; --pds-blue-900:#c8e7ff;
+
+  --pds-green-50:#153729;  --pds-green-100:#135338; --pds-green-200:#136d47; --pds-green-300:#138a59;
+  --pds-green-400:#13a065; --pds-green-500:#16bb76; --pds-green-600:#26cf88; --pds-green-700:#4ee4a6;
+  --pds-green-800:#82f6c5; --pds-green-900:#ccffea;
+
+  --pds-orange-50:#3d2500;  --pds-orange-100:#563200; --pds-orange-200:#804600; --pds-orange-300:#a85f00;
+  --pds-orange-400:#cf7200; --pds-orange-500:#f18600; --pds-orange-600:#fd9528; --pds-orange-700:#ffa861;
+  --pds-orange-800:#ffc39e; --pds-orange-900:#ffe4d6;
+
+  --pds-red-50:#3c2020;  --pds-red-100:#562025; --pds-red-200:#7a242d; --pds-red-300:#9e2733;
+  --pds-red-400:#ca2f3d; --pds-red-500:#f04251; --pds-red-600:#fa616d; --pds-red-700:#fe818b;
+  --pds-red-800:#ffa8ad; --pds-red-900:#ffd1d3;
+}
+
+@theme inline {
+  --color-pds-gray-50:                          var(--pds-gray-50);
+  --color-pds-gray-100:                         var(--pds-gray-100);
+  --color-pds-gray-200:                         var(--pds-gray-200);
+  --color-pds-gray-300:                         var(--pds-gray-300);
+  --color-pds-gray-400:                         var(--pds-gray-400);
+  --color-pds-gray-500:                         var(--pds-gray-500);
+  --color-pds-gray-600:                         var(--pds-gray-600);
+  --color-pds-gray-700:                         var(--pds-gray-700);
+  --color-pds-gray-800:                         var(--pds-gray-800);
+  --color-pds-gray-900:                         var(--pds-gray-900);
+  --color-pds-brand-50:                         var(--pds-brand-50);
+  --color-pds-brand-100:                        var(--pds-brand-100);
+  --color-pds-brand-200:                        var(--pds-brand-200);
+  --color-pds-brand-300:                        var(--pds-brand-300);
+  --color-pds-brand-400:                        var(--pds-brand-400);
+  --color-pds-brand-500:                        var(--pds-brand-500);
+  --color-pds-brand-600:                        var(--pds-brand-600);
+  --color-pds-brand-700:                        var(--pds-brand-700);
+  --color-pds-brand-800:                        var(--pds-brand-800);
+  --color-pds-brand-900:                        var(--pds-brand-900);
+  --color-pds-blue-50:                          var(--pds-blue-50);
+  --color-pds-blue-100:                         var(--pds-blue-100);
+  --color-pds-blue-200:                         var(--pds-blue-200);
+  --color-pds-blue-300:                         var(--pds-blue-300);
+  --color-pds-blue-400:                         var(--pds-blue-400);
+  --color-pds-blue-500:                         var(--pds-blue-500);
+  --color-pds-blue-600:                         var(--pds-blue-600);
+  --color-pds-blue-700:                         var(--pds-blue-700);
+  --color-pds-blue-800:                         var(--pds-blue-800);
+  --color-pds-blue-900:                         var(--pds-blue-900);
+  --color-pds-green-50:                         var(--pds-green-50);
+  --color-pds-green-100:                        var(--pds-green-100);
+  --color-pds-green-200:                        var(--pds-green-200);
+  --color-pds-green-300:                        var(--pds-green-300);
+  --color-pds-green-400:                        var(--pds-green-400);
+  --color-pds-green-500:                        var(--pds-green-500);
+  --color-pds-green-600:                        var(--pds-green-600);
+  --color-pds-green-700:                        var(--pds-green-700);
+  --color-pds-green-800:                        var(--pds-green-800);
+  --color-pds-green-900:                        var(--pds-green-900);
+  --color-pds-orange-50:                        var(--pds-orange-50);
+  --color-pds-orange-100:                       var(--pds-orange-100);
+  --color-pds-orange-200:                       var(--pds-orange-200);
+  --color-pds-orange-300:                       var(--pds-orange-300);
+  --color-pds-orange-400:                       var(--pds-orange-400);
+  --color-pds-orange-500:                       var(--pds-orange-500);
+  --color-pds-orange-600:                       var(--pds-orange-600);
+  --color-pds-orange-700:                       var(--pds-orange-700);
+  --color-pds-orange-800:                       var(--pds-orange-800);
+  --color-pds-orange-900:                       var(--pds-orange-900);
+  --color-pds-red-50:                           var(--pds-red-50);
+  --color-pds-red-100:                          var(--pds-red-100);
+  --color-pds-red-200:                          var(--pds-red-200);
+  --color-pds-red-300:                          var(--pds-red-300);
+  --color-pds-red-400:                          var(--pds-red-400);
+  --color-pds-red-500:                          var(--pds-red-500);
+  --color-pds-red-600:                          var(--pds-red-600);
+  --color-pds-red-700:                          var(--pds-red-700);
+  --color-pds-red-800:                          var(--pds-red-800);
+  --color-pds-red-900:                          var(--pds-red-900);
+}

package/popover/index.tsx

@@ -1,49 +1,74 @@
 'use client'
 
-import { Popover as PopoverPrimitive } from 'radix-ui'
-import type { ComponentProps, ReactNode } from 'react'
+import { Popover as PopoverPrimitive } from '@base-ui/react/popover'
+import { useRender } from '@base-ui/react/use-render'
+import { createContext, useContext, useState } from 'react'
+import type { ComponentProps, Dispatch, SetStateAction } from 'react'
 
 import { tv } from '../tv'
 
-export interface PopoverProps {
-  open?: boolean
-  defaultOpen?: boolean
-  onOpenChange?: (open: boolean) => void
-  children?: ReactNode
-}
+type AnchorState = [Element | null, Dispatch<SetStateAction<Element | null>>]
+
+const AnchorContext = createContext<AnchorState>([null, () => {}])
+
+export type PopoverProps = ComponentProps<typeof PopoverPrimitive.Root>
+
+export function Popover(props: PopoverProps) {
+  const anchor = useState<Element | null>(null)
 
-export function Popover({ open, defaultOpen, onOpenChange, children }: PopoverProps) {
   return (
-    <PopoverPrimitive.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
-      {children}
-    </PopoverPrimitive.Root>
+    <AnchorContext.Provider value={anchor}>
+      <PopoverPrimitive.Root {...props} />
+    </AnchorContext.Provider>
   )
 }
 
-export function PopoverTrigger({ children }: { children: ReactNode }) {
-  return <PopoverPrimitive.Trigger asChild>{children}</PopoverPrimitive.Trigger>
+export type PopoverTriggerProps = ComponentProps<typeof PopoverPrimitive.Trigger>
+
+export function PopoverTrigger(props: PopoverTriggerProps) {
+  return <PopoverPrimitive.Trigger {...props} />
 }
 
-export function PopoverAnchor({ children }: { children: ReactNode }) {
-  return <PopoverPrimitive.Anchor asChild>{children}</PopoverPrimitive.Anchor>
+export type PopoverAnchorProps = useRender.ComponentProps<'div'>
+
+export function PopoverAnchor({ render, ref, ...rest }: PopoverAnchorProps) {
+  const [, setAnchor] = useContext(AnchorContext)
+
+  return useRender({
+    defaultTagName: 'div',
+    render,
+    ref: ref ? [setAnchor, ref] : setAnchor,
+    props: rest,
+  })
 }
 
-export function PopoverClose({ children }: { children: ReactNode }) {
-  return <PopoverPrimitive.Close asChild>{children}</PopoverPrimitive.Close>
+export type PopoverCloseProps = ComponentProps<typeof PopoverPrimitive.Close>
+
+export function PopoverClose(props: PopoverCloseProps) {
+  return <PopoverPrimitive.Close {...props} />
 }
 
-export interface PopoverContentProps extends Omit<ComponentProps<typeof PopoverPrimitive.Content>, 'side' | 'align'> {
+export type PopoverContentProps = Omit<ComponentProps<typeof PopoverPrimitive.Popup>, 'className'> & {
   side?: 'top' | 'right' | 'bottom' | 'left'
   align?: 'start' | 'center' | 'end'
   arrow?: boolean
+  className?: string
 }
 
 const popoverContent = tv({
-  base: 'float text-foreground rounded-float z-overlay p-4'
+  base: 'float text-fg rounded-r16 z-overlay p-4'
     + ' open:animate-enter closed:animate-exit'
     + ' focus-visible:outline-none',
 })
 
+const popoverArrow = 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 PopoverContent({
   side = 'bottom',
   align = 'center',
@@ -52,25 +77,29 @@ export function PopoverContent({
   children,
   ...rest
 }: PopoverContentProps) {
+  const [anchor] = useContext(AnchorContext)
+
   return (
     <PopoverPrimitive.Portal>
-      <PopoverPrimitive.Content
-        {...rest}
+      <PopoverPrimitive.Positioner
+        anchor={anchor ?? undefined}
         side={side}
         align={align}
-        sideOffset={8}
+        sideOffset={arrow ? 14 : 8}
         arrowPadding={16}
-        className={popoverContent({ className })}
+        className="z-overlay min-w-max will-change-transform"
       >
-        {children}
-        {arrow && (
-          <PopoverPrimitive.Arrow asChild width={12} height={6}>
-            <svg viewBox="0 0 12 6" preserveAspectRatio="none" className="fill-background-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>
-          </PopoverPrimitive.Arrow>
-        )}
-      </PopoverPrimitive.Content>
+        <PopoverPrimitive.Popup {...rest} className={popoverContent({ className })}>
+          {children}
+          {arrow && (
+            <PopoverPrimitive.Arrow className={popoverArrow()}>
+              <svg width={12} height={6} 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>
+            </PopoverPrimitive.Arrow>
+          )}
+        </PopoverPrimitive.Popup>
+      </PopoverPrimitive.Positioner>
     </PopoverPrimitive.Portal>
   )
 }

package/radio-group/index.tsx

@@ -1,7 +1,8 @@
 'use client'
 
-import { RadioGroup as RadioGroupPrimitive } from 'radix-ui'
-import { createContext, use, useId, type ReactNode } from 'react'
+import { Radio } from '@base-ui/react/radio'
+import { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group'
+import { cloneElement, createContext, use, useEffect, useId, useState, type ComponentProps, type ReactElement, type ReactNode } from 'react'
 
 import { Label } from '../label'
 import { tv } from '../tv'
@@ -14,6 +15,7 @@ export interface RadioItemContext {
   id: string
   labelId: string
   descriptionId: string
+  setDescribed: (described: boolean) => void
 }
 
 const ItemContext = createContext<RadioItemContext | null>(null)
@@ -44,69 +46,57 @@ export const radioGroupItem = tv({
   defaultVariants: { color: 'neutral' },
 })
 
-export interface RadioGroupProps {
-  value?: string
-  defaultValue?: string
-  onValueChange?: (value: string) => void
+export type RadioGroupProps = Omit<RadioGroupPrimitive.Props<string>, 'className'> & {
   color?: RadioColor
-  disabled?: boolean
   className?: string
-  children?: ReactNode
 }
 
 const radioGroup = tv({ base: 'flex flex-col gap-3' })
 
-export function RadioGroup({
-  value,
-  defaultValue,
-  onValueChange,
-  color = 'neutral',
-  disabled = false,
-  className,
-  children,
-  ...rest
-}: RadioGroupProps) {
+export function RadioGroup({ color = 'neutral', className, ...rest }: RadioGroupProps) {
   return (
     <ColorContext value={color}>
-      <RadioGroupPrimitive.Root
-        {...rest}
-        value={value}
-        defaultValue={defaultValue}
-        onValueChange={onValueChange}
-        disabled={disabled}
-        className={radioGroup({ className })}
-      >
-        {children}
-      </RadioGroupPrimitive.Root>
+      <RadioGroupPrimitive<string> {...rest} className={radioGroup({ className })} />
     </ColorContext>
   )
 }
 
-export interface RadioGroupItemProps {
+export type RadioGroupItemProps = Omit<ComponentProps<typeof Radio.Root>, 'className' | 'value'> & {
   value: string
-  disabled?: boolean
   className?: string
-  children?: ReactNode
 }
 
-export function RadioGroupItem({ value, disabled, className, children }: RadioGroupItemProps) {
+export function RadioGroupItem({
+  value,
+  className,
+  children,
+  nativeButton = true,
+  render = <button type="button" />,
+  ...rest
+}: RadioGroupItemProps) {
   const id = useId()
+  const [described, setDescribed] = useState(false)
   const color = use(ColorContext)
   const ui = radioGroupItem({ color })
+  const renderWithId: RadioGroupItemProps['render'] = typeof render === 'function'
+    ? (props, state) => render({ ...props, id }, state)
+    : cloneElement(render as ReactElement<{ id?: string }>, { id })
 
   return (
-    <ItemContext value={{ id, labelId: `${id}-label`, descriptionId: `${id}-description` }}>
+    <ItemContext value={{ id, labelId: `${id}-label`, descriptionId: `${id}-description`, setDescribed }}>
       <div className={ui.root({ className })}>
-        <RadioGroupPrimitive.Item
+        <Radio.Root<string>
+          {...rest}
+          nativeButton={nativeButton}
+          render={renderWithId}
           id={id}
           value={value}
-          disabled={disabled}
           aria-labelledby={`${id}-label`}
-          aria-describedby={`${id}-description`}
+          aria-describedby={described ? `${id}-description` : undefined}
           className={ui.control()}
         >
-          <RadioGroupPrimitive.Indicator className="text-fg-neutral-solid-contrast size-2.5 rounded-full bg-current" />
-        </RadioGroupPrimitive.Item>
+          <Radio.Indicator className="text-fg-neutral-solid-contrast size-2.5 rounded-full bg-current" />
+        </Radio.Root>
 
         <div className="flex min-w-0 flex-col gap-0.5">
           {children}
@@ -126,10 +116,17 @@ export function RadioGroupItemLabel({ className, children }: { className?: strin
   )
 }
 
-const radioGroupItemDescription = tv({ base: 'text-caption text-foreground-subtle' })
+const radioGroupItemDescription = tv({ base: 'text-caption text-fg-subtle' })
 
 export function RadioGroupItemDescription({ className, children }: { className?: string, children?: ReactNode }) {
   const ctx = use(ItemContext)
+  const setDescribed = ctx?.setDescribed
+
+  useEffect(() => {
+    if (!setDescribed) return
+    setDescribed(true)
+    return () => setDescribed(false)
+  }, [setDescribed])
 
   return (
     <p