@olundot/ui

OLUN 토큰을 사용하는 React UI 컴포넌트 패키지입니다. 현재 버전은 0.15.0입니다.

설치

pnpm add @olundot/ui

React와 React DOM 18 이상이 peer dependency입니다. Tailwind CSS 4 이상은 optional peer dependency입니다.

Tailwind v4 설정

@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css" layer(utilities);

@source "../node_modules/@olundot/ui/dist";
@import "@olundot/ui/tokens.css";

@source 경로는 소비자 프로젝트의 CSS 파일과 node_modules 위치에 맞게 조정합니다. @olundot/ui/tokens.css는 core tokens, Tailwind v4 매핑과 UI keyframes를 불러옵니다.

import { Button, Card, Input } from "@olundot/ui";

export function Example() {
  return (
    <Card>
      <Input aria-label="Name" />
      <Button>Continue</Button>
    </Card>
  );
}

0.15.0 표면 계약

Dialog, Sheet, Popover, DropdownMenu, Select와 Toast의 비-error variant는 panel에 --bg-surface를 사용합니다. Toast error variant만 --error-bg를 사용하며, --bg-raised와 --bg-overlay는 overlay panel 용도로 사용하지 않습니다. Dialog와 Sheet backdrop은 --scrim을 사용하며, Dialog panel은 --shadow-8, Sheet panel은 --shadow-4를 사용합니다.

Checkbox/Radio의 card option row는 다음 상태를 사용합니다.

| 상태 | fill과 border | |---|---| | unchecked | 별도 상태 fill 없음; --bg-surface + --border-subtle | | hover | --action-hover; border는 그대로 유지 | | checked | --action-selected + --border-strong | | disabled | --action-disabled-bg + --border-subtle |

Breaking: EmptyState

EmptyState의 bordered 기본값은 false입니다. 기본 렌더에는 frame과 자체 surface가 없습니다.

// 0.14.x와 같은 framed surface가 필요한 경우
<EmptyState bordered title="결과가 없습니다" />

아이콘 well은 --bg-inset을 사용합니다.

FileUploadZone 상태

| 상태 | surface와 border | |---|---| | default | --bg-surface + dashed --border | | hover | --action-hover + --border-strong | | dragging | --action-active + --border-strong | | has-file | --bg-inset + solid --border-strong | | disabled | --action-disabled-bg + dashed --border-subtle |

Disabled는 has-file과 dragging 상태보다 우선합니다. Error가 함께 있으면 enabled 상태에서 --error border를 사용합니다.

Accent 계약

Primary/default button은 --primary와 --primary-fg를 사용합니다. Brand와 opt-in accent fill은 --accent-pop과 --accent-on-fill을 사용합니다. Deprecated alias인 --accent-solid, --accent-on-solid은 신규 컴포넌트 소스에서 사용하지 않습니다.

전체 변경은 CHANGELOG에 있습니다.

라이선스

MIT