@olundot/ui 0.18.0 → 0.19.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @olundot/ui
 
+## 0.19.0
+
+### Minor Changes
+
+- 42d2650: `Button`·`IconButton`에 새 축 `appearance`(`filled`·`outline`·`ghost`) × `tone`(`primary`·`neutral`·`danger`)을 추가했습니다. 옛 `variant`는 0.18과 똑같이 그려지고, 사용 중단 예정으로 표시됩니다. 0.20에서 삭제합니다.
+
+  - **쓸 수 있는 조합 다섯 개** — `filled` × `primary`·`neutral`·`danger`, `outline` × `neutral`, `ghost` × `neutral`. 나머지 네 조합은 타입 오류입니다. 새 축과 `variant`를 함께 줘도 타입 오류입니다.
+  - **두 컴포넌트가 같은 모양** — 같은 조합이면 `Button`과 `IconButton`의 색·테두리·hover가 같습니다. 크기는 아래 "크기 단계 하나"를 따릅니다.
+  - **기본값** — 아무것도 주지 않으면 지금과 같습니다(`Button` = `filled` + `primary`, `IconButton` = `ghost` + `neutral`). 한쪽만 주면 나머지를 채웁니다. `tone`이 없으면 `filled`는 `primary`, `outline`·`ghost`는 `neutral`입니다.
+  - **`IconButton` 글자** — `label="추가"` 또는 children으로 글자를 넣습니다. 둘을 함께 주면 타입 오류입니다. 글자가 있으면 `aria-label`은 필수가 아니고, 폭은 글자에 맞춥니다. 아이콘 위치는 `iconPosition="start" | "end"`(기본 `start`)입니다. 아이콘만일 때는 지금처럼 정사각형이고 누르는 영역은 44px입니다.
+  - **크기 단계 하나** — `appearance`나 `tone`을 준 `IconButton`은 `size`를 `Button`과 같은 5단계로 읽습니다: `xs` 28 · `sm` 30 · `md` 32 · `lg` 36 · `xl` 40(기본 `md`). 같은 `size`면 `Button`·글자 포함 `IconButton`·아이콘만 `IconButton`의 높이와 아이콘 크기·선 굵기가 같습니다(`xs` 14/1.75, `sm`·`md` 16/2, `lg`·`xl` 18/2). 아이콘만은 정사각형이고 누르는 영역은 사방 44px입니다.
+  - **옛 크기** — 축을 주지 않은 `IconButton`은 지금처럼 3단계 `sm` 28 · `md` 32 · `lg` 40으로 읽고 출력도 0.18과 같습니다. 새 축으로 옮길 때 `sm` → `xs`, `lg` → `xl`로 바꿉니다(`md`는 그대로). 축 없이 `xs`·`xl`을 주면 타입 오류입니다. 축 없이 글자를 넣으면 높이는 같은 높이의 `Button`(`xs`·`md`·`xl`)을 따릅니다.
+  - **옛 값 → 새 값**
+    - `Button` `variant`: `primary`·`default` → `filled` + `primary` / `secondary`·`outline`·`subtle` → `outline` + `neutral` / `ghost` → `ghost` + `neutral` / `danger`·`destructive`·`emergency` → `filled` + `danger` / `link` → 대체 없음(링크 컴포넌트 예정)
+    - `Button` `size="icon"`·`"icon-xs"` → 새 축 `IconButton` `lg`·`md`(36·32, 높이 그대로), `leadingIcon`·`trailingIcon` → 글자 포함 `IconButton`
+    - `IconButton` `variant`: `ghost` → `ghost` + `neutral` / `outline` → `outline` + `neutral` / `subtle` → `filled` + `neutral` / `danger` → `filled` + `danger`. `size`는 `sm` → `xs`, `lg` → `xl`
+  - **옮길 때 모양이 바뀌는 곳** — `IconButton` `variant="danger"`(연한 빨강)는 `filled` + `danger`(진한 빨강 채움)로 바뀝니다. `IconButton` `variant="outline"`은 `outline` + `neutral`로 옮기면 아이콘 색이 `text-secondary`에서 `foreground`로, hover 테두리가 `--border-strong`에서 `--border`로 바뀝니다(`Button` `secondary`와 같은 모양). 옛 값을 그대로 쓰는 동안에는 바뀌지 않습니다.
+  - `ButtonProps`는 interface에서 type(union)으로 바뀌었습니다. `interface X extends ButtonProps`로 확장하던 곳은 `type X = ButtonProps & { … }`로 바꿔야 합니다.
+
+### Patch Changes
+
+- 2e965c7: OlunSymbol now has two optical sizes. Above 32px it follows the brand concept sheet (thicker ring, smaller dot clearly apart from the ring); at 32px and below it keeps the current icon geometry.
+
+  OlunLogo drops the wordmark period when the symbol is shown, so the lime orbit dot is not repeated. The wordmark alone still reads `OLUN.`.
+
+- 11d8450: Tabs: 세로 탭 활성 표시가 구분선 위에 겹치도록 수정하고, `sm` 미만에서는 가로 탭 규칙으로 표시합니다. line 탭의 focus-visible ring이 목록 overflow에 잘리지 않도록 ring을 안쪽으로 그립니다.
+- Updated dependencies [89a385a]
+- Updated dependencies [2fa68e9]
+  - @olundot/tokens@0.17.0
+
 ## 0.18.0
 
 ### Minor Changes

package/dist/index.d.ts

@@ -31,26 +31,60 @@ declare function useOlunTheme(): UseOlunThemeValue;
 
 type SurfaceLevel = "surface" | "canvas" | "raised";
 
-declare const buttonVariants: (props?: ({
-    variant?: "default" | "primary" | "outline" | "ghost" | "danger" | "emergency" | "subtle" | "destructive" | "secondary" | "link" | null | undefined;
-    size?: "default" | "xs" | "sm" | "md" | "lg" | "xl" | "icon" | "icon-xs" | null | undefined;
+type ActionAppearance = 'filled' | 'outline' | 'ghost';
+type ActionTone = 'primary' | 'neutral' | 'danger';
+type FilledDefaultActionStyle = {
+    appearance?: 'filled';
+    tone?: ActionTone;
+} | {
+    appearance: 'outline' | 'ghost';
+    tone?: 'neutral';
+};
+type GhostDefaultActionStyle = {
+    appearance: 'filled';
+    tone?: ActionTone;
+} | {
+    appearance: 'outline' | 'ghost';
+    tone?: 'neutral';
+} | {
+    appearance?: never;
+    tone: 'neutral';
+};
+
+declare const buttonCva: (props?: ({
+    size?: "default" | "md" | "xs" | "sm" | "lg" | "xl" | "icon" | "icon-xs" | null | undefined;
+    appearance?: "filled" | "outline" | "ghost" | null | undefined;
+    tone?: "primary" | "neutral" | "danger" | null | undefined;
+    variant?: "default" | "outline" | "ghost" | "primary" | "danger" | "emergency" | "subtle" | "destructive" | "secondary" | "link" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
+type ButtonVariantsOptions = Parameters<typeof buttonCva>[0];
+declare function buttonVariants(options?: ButtonVariantsOptions): string;
 type ButtonVariant = NonNullable<VariantProps<typeof buttonVariants>['variant']>;
 type ButtonSize = NonNullable<VariantProps<typeof buttonVariants>['size']>;
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+type ButtonStyleProps = (FilledDefaultActionStyle & {
     /**
-     * Action hierarchy: `primary` (the one main decision) · `secondary` (every supporting
-     * action) · `ghost` (icon-only chrome — prefer IconButton) · `danger` (destructive).
-     *
-     * `outline` and `subtle` are deprecated — use `secondary`. They will be removed in the
-     * next breaking release.
+     * @deprecated Use `appearance` × `tone` instead. Removed in 0.20.
+     */
+    variant?: never;
+}) | {
+    /**
+     * @deprecated Use `appearance` × `tone`: `primary`/`default` → filled + primary ·
+     * `secondary`/`outline`/`subtle` → outline + neutral · `ghost` → ghost + neutral ·
+     * `danger`/`destructive`/`emergency` → filled + danger · `link` → no Button replacement
+     * (a link component is planned). Removed in 0.20.
      */
-    variant?: VariantProps<typeof buttonVariants>['variant'];
+    variant?: ButtonVariant | null;
+};
+type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & ButtonStyleProps & {
+    /** `icon`·`icon-xs` are deprecated — use IconButton (`lg`·`md`). */
+    size?: ButtonSize | null;
     asChild?: boolean;
+    /** @deprecated Use IconButton with `label` (or children). Removed in 0.20. */
     leadingIcon?: LucideIcon;
+    /** @deprecated Use IconButton with `label` and `iconPosition="end"`. Removed in 0.20. */
     trailingIcon?: LucideIcon;
     loading?: boolean;
-}
+};
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 
 type CopyButtonProps = Omit<ButtonProps, 'children' | 'leadingIcon' | 'loading' | 'size' | 'trailingIcon' | 'variant'> & {
@@ -62,7 +96,7 @@ type CopyButtonProps = Omit<ButtonProps, 'children' | 'leadingIcon' | 'loading'
     variant?: ButtonVariant;
     duration?: number;
 };
-declare const CopyButton: React.ForwardRefExoticComponent<Omit<ButtonProps, "size" | "variant" | "leadingIcon" | "trailingIcon" | "loading" | "children"> & {
+declare const CopyButton: React.ForwardRefExoticComponent<Omit<ButtonProps, "size" | "variant" | "children" | "leadingIcon" | "trailingIcon" | "loading"> & {
     value: string;
     label?: React.ReactNode;
     copiedLabel?: React.ReactNode;
@@ -73,13 +107,13 @@ declare const CopyButton: React.ForwardRefExoticComponent<Omit<ButtonProps, "siz
 } & React.RefAttributes<HTMLButtonElement>>;
 
 declare const inputVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
     fullWidth?: boolean | null | undefined;
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const inputMessageVariants: (props?: ({
     state?: "default" | "error" | "success" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type InputState = NonNullable<VariantProps<typeof inputMessageVariants>["state"]>;
 /** Canonical size type (0.2.0+). Use `size` prop with these values. */
@@ -169,7 +203,7 @@ interface InlineAlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'childre
 declare const InlineAlert: React.ForwardRefExoticComponent<InlineAlertProps & React.RefAttributes<HTMLDivElement>>;
 
 declare const textareaVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
     fullWidth?: boolean | null | undefined;
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -223,14 +257,14 @@ interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaEl
 declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
 
 declare const selectVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
     fullWidth?: boolean | null | undefined;
     appearance?: "inline" | "field" | null | undefined;
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const selectMessageVariants: (props?: ({
     state?: "default" | "error" | "success" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type SelectState = NonNullable<VariantProps<typeof selectMessageVariants>["state"]>;
 /** Canonical size type (0.2.0+). Use `size` prop with these values. */
@@ -1168,7 +1202,7 @@ interface StatusBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
 declare const StatusBadge: React.ForwardRefExoticComponent<StatusBadgeProps & React.RefAttributes<HTMLSpanElement>>;
 
 declare const notificationBadgeVariants: (props?: ({
-    size?: "sm" | "md" | null | undefined;
+    size?: "md" | "sm" | null | undefined;
     placement?: "none" | "inline" | "corner" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type NotificationBadgeSize = NonNullable<VariantProps<typeof notificationBadgeVariants>['size']>;
@@ -1181,13 +1215,13 @@ declare const NotificationBadge: React.ForwardRefExoticComponent<NotificationBad
 
 declare const chipVariants: (props?: ({
     variant?: "filter" | "choice" | "removable" | "status-filter" | null | undefined;
-    tone?: "accent" | "danger" | "success" | "warning" | "neutral" | "muted" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
+    tone?: "accent" | "neutral" | "danger" | "success" | "warning" | "muted" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
     pressed?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const chipCountVariants: (props?: ({
-    tone?: "accent" | "danger" | "success" | "warning" | "neutral" | "muted" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
+    tone?: "accent" | "neutral" | "danger" | "success" | "warning" | "muted" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ChipVariant = NonNullable<VariantProps<typeof chipVariants>["variant"]>;
 type ChipTone = NonNullable<VariantProps<typeof chipVariants>["tone"]>;
@@ -1201,7 +1235,7 @@ interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,
 declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLButtonElement>>;
 
 declare const emptyStateBaseVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
     bordered?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type EmptyStateTone = "neutral" | "muted" | "raised";
@@ -1212,7 +1246,7 @@ interface EmptyStateVariantOptions extends VariantProps<typeof emptyStateBaseVar
 }
 declare function emptyStateVariants({ size, tone, surface, bordered, className, }?: EmptyStateVariantOptions): string;
 declare const emptyStateIconVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type EmptyStateSize = NonNullable<VariantProps<typeof emptyStateBaseVariants>["size"]>;
 interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof emptyStateBaseVariants> {
@@ -1231,7 +1265,7 @@ interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "ti
 declare const EmptyState: React.ForwardRefExoticComponent<EmptyStateProps & React.RefAttributes<HTMLDivElement>>;
 
 declare const errorStateVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ErrorStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof errorStateVariants> {
@@ -1251,7 +1285,7 @@ declare const skeletonVariants: (props?: ({
     shape?: "text" | "block" | "circle" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const spinnerVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | 16 | 24 | 32 | null | undefined;
+    size?: "md" | "sm" | "lg" | 16 | 24 | 32 | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof skeletonVariants> {
 }
@@ -1283,16 +1317,29 @@ interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {
 }
 declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<HTMLSpanElement>>;
 
-declare const iconButtonVariants: (props?: ({
-    variant?: "outline" | "ghost" | "danger" | "subtle" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
+declare const iconButtonCva: (props?: ({
+    size?: "md" | "sm" | "lg" | null | undefined;
     pressed?: boolean | null | undefined;
+    appearance?: "filled" | "outline" | "ghost" | null | undefined;
+    tone?: "primary" | "neutral" | "danger" | null | undefined;
+    variant?: "outline" | "ghost" | "danger" | "subtle" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
+type IconButtonAxisSize = "xs" | "sm" | "md" | "lg" | "xl";
+type IconButtonCvaOptions = NonNullable<Parameters<typeof iconButtonCva>[0]>;
+type IconButtonVariantsOptions = (IconButtonCvaOptions & {
+    appearance?: null;
+    tone?: null;
+}) | (Omit<IconButtonCvaOptions, "size"> & {
+    appearance?: ActionAppearance | null;
+    tone?: ActionTone | null;
+    size?: IconButtonAxisSize | null;
+});
+declare function iconButtonVariants(options?: IconButtonVariantsOptions): string;
 declare const iconButtonBadgeVariants: (props?: ({
     tone?: "error" | "info" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-type IconButtonVariant = NonNullable<VariantProps<typeof iconButtonVariants>["variant"]>;
-type IconButtonSize = NonNullable<VariantProps<typeof iconButtonVariants>["size"]>;
+type IconButtonVariant = NonNullable<VariantProps<typeof iconButtonCva>["variant"]>;
+type IconButtonSize = NonNullable<VariantProps<typeof iconButtonCva>["size"]>;
 type IconButtonBadgeTone = NonNullable<VariantProps<typeof iconButtonBadgeVariants>["tone"]>;
 type IconButtonIcon = React.ComponentType<React.SVGProps<SVGSVGElement> & {
     size?: number | string;
@@ -1305,11 +1352,47 @@ type IconButtonAccessibleName = {
     "aria-label"?: string;
     "aria-labelledby": string;
 };
-type IconButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "aria-label" | "aria-labelledby" | "children" | "color"> & Omit<VariantProps<typeof iconButtonVariants>, "pressed"> & IconButtonAccessibleName & {
+type IconButtonOptionalName = {
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+};
+type IconButtonContent = (IconButtonAccessibleName & {
+    label?: never;
+    children?: never;
+}) | (IconButtonOptionalName & {
+    label: React.ReactNode;
+    children?: never;
+}) | (IconButtonOptionalName & {
+    children: React.ReactNode;
+    label?: never;
+});
+type IconButtonStyleProps = (GhostDefaultActionStyle & {
+    /**
+     * @deprecated Use `appearance` × `tone` instead. Removed in 0.20.
+     */
+    variant?: never;
+    /** Button's scale: `xs` 28 · `sm` 30 · `md` 32 · `lg` 36 · `xl` 40. */
+    size?: IconButtonAxisSize | null;
+}) | {
+    /**
+     * @deprecated Use `appearance` × `tone`: `ghost` → ghost + neutral · `outline` →
+     * outline + neutral · `subtle` → filled + neutral · `danger` → filled + danger
+     * (solid red; `danger` keeps its light red until removal). When moving to the new axes,
+     * `size` follows Button's scale: `sm` → `xs`, `lg` → `xl` (`md` stays). Removed in 0.20.
+     */
+    variant?: IconButtonVariant | null;
+    appearance?: never;
+    tone?: never;
+    /** Legacy scale without `appearance`/`tone`: `sm` 28 · `md` 32 · `lg` 40. */
+    size?: IconButtonSize | null;
+};
+type IconButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "aria-label" | "aria-labelledby" | "children" | "color"> & IconButtonStyleProps & IconButtonContent & {
     icon: IconButtonIcon;
     pressed?: boolean;
     badge?: React.ReactNode;
     badgeTone?: IconButtonBadgeTone;
+    /** Icon side when the button has text. */
+    iconPosition?: "start" | "end";
 };
 declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
 
@@ -1518,10 +1601,10 @@ interface OTPFieldProps extends Omit<React.FieldsetHTMLAttributes<HTMLFieldSetEl
 declare const OTPField: React.ForwardRefExoticComponent<OTPFieldProps & React.RefAttributes<HTMLFieldSetElement>>;
 
 declare const searchFieldVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const searchFieldInputVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
     hasClear?: boolean | null | undefined;
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -1545,7 +1628,7 @@ declare const checkboxVariants: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const checkboxRootVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
 declare const checkboxBoxVariants: (props?: ({
-    size?: "sm" | "md" | null | undefined;
+    size?: "md" | "sm" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const checkboxGroupItemVariants: (props?: ({
     appearance?: "plain" | "card" | null | undefined;
@@ -1699,8 +1782,9 @@ declare function TreeView<T extends TreeNode>({ nodes, selectedId, selectionAria
 /**
  * OLUN 브랜드 로고.
  *
- * - symbol: O 원형 테두리 + 우하단 accent-pop 작은 circle
+ * - symbol: O 원형 테두리 + 우하단 accent-pop 작은 circle (32px 초과/이하 두 비율)
  * - wordmark: "OLUN" + 마지막 "." 은 accent 색상
+ * - 조합: symbol과 함께 쓰면 wordmark의 "."를 뺀다. 궤도 점은 symbol이 맡는다(점 두 개 경쟁 방지).
  *
  * 레퍼런스: apps/web/docs/wireframes/ref/shell-wireframe.html Topbar 브랜드 영역.
  */

package/dist/index.js

@@ -186,8 +186,61 @@ import * as React from "react";
 import { cva } from "class-variance-authority";
 import { Loader2 } from "lucide-react";
 import { Slot } from "radix-ui";
+
+// src/components/ui/action-variants.ts
+var actionPaint = {
+  // = Button `primary`
+  filledPrimary: "border-[var(--primary)] bg-[var(--primary)] text-[var(--primary-fg)] hover:bg-[var(--primary-hover)] hover:border-[var(--primary-hover)]",
+  // = IconButton `subtle`; the transparent 1px border keeps Button's box model
+  filledNeutral: "border-transparent bg-[var(--bg-inset)] text-text-secondary hover:bg-[var(--action-hover)] hover:text-foreground",
+  // = Button `danger`
+  filledDanger: "border-[var(--error)] bg-[var(--error)] text-[var(--error-contrast)] hover:bg-[var(--error-hover)] hover:border-[var(--error-hover)]",
+  // = Button `secondary`
+  outlineNeutral: "border-[var(--border-subtle)] bg-[var(--bg-surface)] text-foreground hover:border-[var(--border)] hover:bg-[var(--action-hover)]",
+  // = Button and IconButton `ghost`
+  ghostNeutral: "border-transparent bg-transparent text-text-secondary hover:bg-[var(--action-hover)] hover:text-foreground"
+};
+var actionAxisVariants = {
+  appearance: { filled: "", outline: "", ghost: "" },
+  tone: { primary: "", neutral: "", danger: "" }
+};
+var actionCompoundVariants = [
+  { appearance: "filled", tone: "primary", className: actionPaint.filledPrimary },
+  { appearance: "filled", tone: "neutral", className: actionPaint.filledNeutral },
+  { appearance: "filled", tone: "danger", className: actionPaint.filledDanger },
+  { appearance: "outline", tone: "neutral", className: actionPaint.outlineNeutral },
+  { appearance: "ghost", tone: "neutral", className: actionPaint.ghostNeutral }
+];
+function resolveActionStyle(appearance, tone, fallback) {
+  const resolvedAppearance = appearance ?? fallback;
+  return {
+    appearance: resolvedAppearance,
+    tone: tone ?? (resolvedAppearance === "filled" ? "primary" : "neutral")
+  };
+}
+
+// src/components/ui/button.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
-var buttonVariants = cva(
+var buttonSizeMd = "h-[32px] gap-[6px] px-pad-default-x text-body-sm [&_svg]:size-[16px]";
+var buttonSizes = {
+  // Cross-control height map: Button sm/md/lg match field controls sm/md/lg (30/32/36px).
+  // Height comes from h-* alone — no vertical padding (py-12 inside h-32 left a 6px content box).
+  // xs/sm: invisible ::before stretches the hit area to 44px tall (#69), vertically only so
+  // side-by-side buttons never overlap. Its inset is measured from the padding box, inside
+  // the 1px border every variant carries: inset = (44 - (height - 2 × 1px)) / 2.
+  // IconButton with text reuses these through `buttonSizeClassName`.
+  xs: "relative h-[28px] gap-[6px] px-pad-compact-x text-[12px] before:absolute before:inset-x-0 before:-inset-y-[9px] before:content-[''] [&_svg]:size-[14px] [&_svg]:stroke-[1.75]",
+  sm: "relative h-[30px] gap-[6px] px-pad-compact-x text-body-sm before:absolute before:inset-x-0 before:-inset-y-[8px] before:content-[''] [&_svg]:size-[16px]",
+  md: buttonSizeMd,
+  lg: "h-[36px] gap-[var(--space-2)] px-pad-default-x text-[15px] [&_svg]:size-[18px]",
+  xl: "h-[40px] gap-[var(--space-2)] px-5 text-[15px] [&_svg]:size-[18px]",
+  default: buttonSizeMd,
+  /** @deprecated Use IconButton `size="lg"`. */
+  icon: "size-[36px] p-0 [&_svg]:size-[18px]",
+  /** @deprecated Use IconButton `size="md"`. */
+  "icon-xs": "size-[32px] p-0 [&_svg]:size-[14px] [&_svg]:stroke-[1.75]"
+};
+var buttonCva = cva(
   [
     "inline-flex cursor-pointer items-center justify-center whitespace-nowrap rounded-[var(--radius-md)] border font-medium",
     "transition-[background-color,border-color,color,box-shadow,transform] motion-reduce:transition-none",
@@ -199,42 +252,49 @@ var buttonVariants = cva(
   ].join(" "),
   {
     variants: {
+      // Legacy single axis, deprecated in 0.19 for `appearance` × `tone` and removed in 0.20.
+      // Frozen at 0.18; button-appearance.test.tsx keeps each value equal to its new pair.
       variant: {
+        /** @deprecated Use `appearance="filled" tone="primary"`. */
         primary: "border-[var(--primary)] bg-[var(--primary)] text-[var(--primary-fg)] hover:bg-[var(--primary-hover)] hover:border-[var(--primary-hover)]",
-        /** @deprecated Use `secondary` — the single supporting-action family (#58). Removed in the next breaking release. */
+        /** @deprecated Use `appearance="outline" tone="neutral"`. */
         outline: "border-[var(--border)] bg-transparent text-foreground hover:border-[var(--border-strong)] hover:bg-[var(--action-hover)]",
+        /** @deprecated Use `appearance="ghost" tone="neutral"`. */
         ghost: "border-transparent bg-transparent text-text-secondary hover:bg-[var(--action-hover)] hover:text-foreground",
+        /** @deprecated Use `appearance="filled" tone="danger"`. */
         danger: "border-[var(--error)] bg-[var(--error)] text-[var(--error-contrast)] hover:bg-[var(--error-hover)] hover:border-[var(--error-hover)]",
+        /** @deprecated Use `appearance="filled" tone="danger"`. */
         emergency: "border-[var(--error)] bg-[var(--error)] text-[var(--error-contrast)] hover:bg-[var(--error-hover)] hover:border-[var(--error-hover)]",
-        /** @deprecated Use `secondary` (identical styling, #58). Removed in the next breaking release. */
+        /** @deprecated Use `appearance="outline" tone="neutral"`. */
         subtle: "border-[var(--border-subtle)] bg-[var(--bg-surface)] text-foreground hover:border-[var(--border)] hover:bg-[var(--action-hover)]",
+        /** @deprecated Use `appearance="filled" tone="primary"`. */
         default: "border-[var(--primary)] bg-[var(--primary)] text-[var(--primary-fg)] hover:bg-[var(--primary-hover)] hover:border-[var(--primary-hover)]",
+        /** @deprecated Use `appearance="filled" tone="danger"`. */
         destructive: "border-[var(--error)] bg-[var(--error)] text-[var(--error-contrast)] hover:bg-[var(--error-hover)] hover:border-[var(--error-hover)]",
+        /** @deprecated Use `appearance="outline" tone="neutral"`. */
         secondary: "border-[var(--border-subtle)] bg-[var(--bg-surface)] text-foreground hover:border-[var(--border)] hover:bg-[var(--action-hover)]",
+        /** @deprecated No replacement on Button; a link component is planned. */
         link: "border-transparent bg-transparent px-0 text-[var(--accent)] underline-offset-4 hover:underline"
       },
-      size: {
-        // Cross-control height map: Button sm/md/lg match field controls sm/md/lg (30/32/36px).
-        // Height comes from h-* alone — no vertical padding (py-12 inside h-32 left a 6px content box).
-        // xs/sm: invisible ::before stretches the hit area to 44px tall (#69), vertically only so
-        // side-by-side buttons never overlap. Its inset is measured from the padding box, inside
-        // the 1px border every variant carries: inset = (44 - (height - 2 × 1px)) / 2.
-        xs: "relative h-[28px] gap-[6px] px-pad-compact-x text-[12px] before:absolute before:inset-x-0 before:-inset-y-[9px] before:content-[''] [&_svg]:size-[14px] [&_svg]:stroke-[1.75]",
-        sm: "relative h-[30px] gap-[6px] px-pad-compact-x text-body-sm before:absolute before:inset-x-0 before:-inset-y-[8px] before:content-[''] [&_svg]:size-[16px]",
-        md: "h-[32px] gap-[6px] px-pad-default-x text-body-sm [&_svg]:size-[16px]",
-        lg: "h-[36px] gap-[var(--space-2)] px-pad-default-x text-[15px] [&_svg]:size-[18px]",
-        xl: "h-[40px] gap-[var(--space-2)] px-5 text-[15px] [&_svg]:size-[18px]",
-        default: "h-[32px] gap-[6px] px-pad-default-x text-body-sm [&_svg]:size-[16px]",
-        icon: "size-[36px] p-0 [&_svg]:size-[18px]",
-        "icon-xs": "size-[32px] p-0 [&_svg]:size-[14px] [&_svg]:stroke-[1.75]"
-      }
+      ...actionAxisVariants,
+      size: buttonSizes
     },
+    compoundVariants: [...actionCompoundVariants],
     defaultVariants: {
       variant: "primary",
       size: "md"
     }
   }
 );
+function buttonVariants(options) {
+  if (options?.appearance == null && options?.tone == null) return buttonCva(options);
+  return buttonCva({
+    ...options,
+    ...resolveActionStyle(options.appearance, options.tone, "filled"),
+    variant: null
+  });
+}
+var buttonSizeClassName = (size) => buttonSizes[size];
 var footerButtonHitAreaClassName = "relative before:absolute before:inset-x-0 before:-inset-y-[5px] before:content-['']";
 var Button = React.forwardRef(
   ({
@@ -247,6 +307,8 @@ var Button = React.forwardRef(
     trailingIcon: TrailingIcon,
     type = "button",
     variant,
+    appearance,
+    tone,
     size,
     style,
     ...props
@@ -281,7 +343,7 @@ var Button = React.forwardRef(
         "aria-disabled": isDisabled ? true : void 0,
         disabled: !asChild ? isDisabled : void 0,
         type: !asChild ? type : void 0,
-        className: cn(buttonVariants({ variant, size, className })),
+        className: cn(buttonVariants({ variant, appearance, tone, size, className })),
         style: frozenStyle ? { ...frozenStyle, ...style } : style,
         ...props,
         children: [
@@ -2963,7 +3025,7 @@ var tabsListVariants = cva8(
       {
         variant: "line",
         orientation: "vertical",
-        className: "border-r border-[var(--border-subtle)] gap-[var(--space-2)] pr-[var(--space-4)]"
+        className: "border-r border-[var(--border-subtle)] gap-[var(--space-2)] pr-[var(--space-4)] max-sm:flex-row max-sm:gap-[var(--space-6)] max-sm:overflow-x-auto max-sm:overflow-y-hidden max-sm:border-r-0 max-sm:border-b max-sm:pr-0"
       },
       {
         variant: "contained",
@@ -3006,9 +3068,24 @@ var tabsTriggerVariants = cva8(
       },
       orientation: {
         horizontal: "",
-        vertical: "w-full justify-start data-[state=active]:after:bottom-0 data-[state=active]:after:left-auto data-[state=active]:after:right-[-1px] data-[state=active]:after:top-0 data-[state=active]:after:h-auto data-[state=active]:after:w-[2px]"
+        vertical: "sm:w-full sm:justify-start sm:data-[state=active]:after:bottom-0 sm:data-[state=active]:after:left-auto sm:data-[state=active]:after:right-[calc(-1*(var(--space-4)+1px))] sm:data-[state=active]:after:top-0 sm:data-[state=active]:after:h-auto sm:data-[state=active]:after:w-[2px]"
       }
     },
+    compoundVariants: [
+      // 가로 line 목록은 overflow-y-hidden이라 바깥 ring이 잘린다. 2px 안쪽 여백을 두고 inset-ring으로 안쪽에 그린다.
+      // ring-inset은 쓰지 않는다: 토큰 테마의 --color-inset(bg-inset) 때문에 ring 색이 배경색으로 덮인다.
+      // 트리거 사이는 -mx로 보정해 텍스트 간격은 그대로 두고, 양 끝 트리거는 안쪽 여백을 유지해 ring이 목록 안에 남는다.
+      {
+        variant: "line",
+        orientation: "horizontal",
+        className: "mx-[-2px] px-[2px] first:ml-0 last:mr-0 focus-visible:ring-0 focus-visible:inset-ring-2 focus-visible:inset-ring-[var(--focus-ring)]"
+      },
+      {
+        variant: "line",
+        orientation: "vertical",
+        className: "max-sm:mx-[-2px] max-sm:px-[2px] max-sm:first:ml-0 max-sm:last:mr-0 max-sm:focus-visible:ring-0 max-sm:focus-visible:inset-ring-2 max-sm:focus-visible:inset-ring-[var(--focus-ring)]"
+      }
+    ],
     defaultVariants: {
       variant: "line",
       orientation: "horizontal"
@@ -4254,7 +4331,7 @@ Chip.displayName = "Chip";
 import * as React24 from "react";
 import { cva as cva10 } from "class-variance-authority";
 import { jsx as jsx26, jsxs as jsxs25 } from "react/jsx-runtime";
-var iconButtonVariants = cva10(
+var iconButtonCva = cva10(
   [
     "olun-icon-button relative inline-flex cursor-pointer shrink-0 items-center justify-center before:absolute before:content-['']",
     "rounded-[var(--radius-md)] border font-medium",
@@ -4265,12 +4342,21 @@ var iconButtonVariants = cva10(
   ].join(" "),
   {
     variants: {
+      // Legacy single axis, deprecated in 0.19 for `appearance` × `tone` and removed in 0.20.
+      // Frozen at 0.18; button-appearance.test.tsx keeps ghost and subtle equal to their new
+      // pair. `outline` and `danger` differ from the pair they migrate to (outline + neutral =
+      // Button secondary, filled + danger = solid red).
       variant: {
+        /** @deprecated Use `appearance="ghost" tone="neutral"` (the default). */
         ghost: "border-transparent bg-transparent text-text-secondary hover:bg-[var(--action-hover)] hover:text-foreground",
+        /** @deprecated Use `appearance="outline" tone="neutral"`. */
         outline: "border-[var(--border-subtle)] bg-[var(--bg-surface)] text-text-secondary hover:border-[var(--border-strong)] hover:bg-[var(--action-hover)] hover:text-foreground",
+        /** @deprecated Use `appearance="filled" tone="neutral"`. */
         subtle: "border-transparent bg-[var(--bg-inset)] text-text-secondary hover:bg-[var(--action-hover)] hover:text-foreground",
+        /** @deprecated Use `appearance="filled" tone="danger"` (solid red, like Button). */
         danger: "border-transparent bg-[var(--error-bg)] text-[var(--error)] hover:bg-[var(--action-hover)]"
       },
+      ...actionAxisVariants,
       // Hit area = 44px on every size. The ::before is absolutely positioned, so its
       // inset is measured from the padding box — inside the 1px border every variant
       // carries (transparent or not). Inset = (44 - (size - 2 × 1px border)) / 2.
@@ -4285,6 +4371,7 @@ var iconButtonVariants = cva10(
       }
     },
     compoundVariants: [
+      ...actionCompoundVariants,
       {
         pressed: true,
         variant: ["ghost", "outline", "subtle"],
@@ -4294,6 +4381,11 @@ var iconButtonVariants = cva10(
         pressed: true,
         variant: "danger",
         className: "border-[var(--error)] bg-[var(--error-bg)] text-[var(--error)]"
+      },
+      {
+        pressed: true,
+        tone: "neutral",
+        className: "border-[var(--border-strong)] bg-[var(--action-selected)] text-foreground"
       }
     ],
     // ghost is the intended default, not a fallback: ghost is reserved for icon-only
@@ -4306,6 +4398,33 @@ var iconButtonVariants = cva10(
     }
   }
 );
+var axisSizeClassName = {
+  xs: "size-[28px] before:-inset-[9px]",
+  sm: "size-[30px] before:-inset-[8px]",
+  md: "size-[32px] before:-inset-[7px]",
+  lg: "size-[36px] before:-inset-[5px]",
+  xl: "size-[40px] before:-inset-[3px]"
+};
+var axisIcon = {
+  xs: { size: 14, strokeWidth: 1.75 },
+  sm: { size: 16, strokeWidth: 2 },
+  md: { size: 16, strokeWidth: 2 },
+  lg: { size: 18, strokeWidth: 2 },
+  xl: { size: 18, strokeWidth: 2 }
+};
+function iconButtonVariants(options) {
+  if (options?.appearance == null && options?.tone == null) {
+    return iconButtonCva(options);
+  }
+  const { size, ...rest } = options;
+  const paint = iconButtonCva({
+    ...rest,
+    ...resolveActionStyle(options.appearance, options.tone, "ghost"),
+    variant: null,
+    size: null
+  });
+  return size === null ? paint : `${paint} ${axisSizeClassName[size ?? "md"]}`;
+}
 var iconButtonBadgeVariants = cva10(
   [
     "pointer-events-none absolute right-0 top-0 inline-flex",
@@ -4332,6 +4451,11 @@ var iconSize2 = {
   md: 16,
   lg: 18
 };
+var textButtonSize = {
+  sm: "xs",
+  md: "md",
+  lg: "xl"
+};
 var iconStrokeWidth = {
   sm: 2.25,
   md: 2.25,
@@ -4341,6 +4465,8 @@ var IconButton = React24.forwardRef(
   ({
     className,
     variant = "ghost",
+    appearance,
+    tone,
     size = "md",
     pressed = void 0,
     icon: Icon,
@@ -4350,39 +4476,63 @@ var IconButton = React24.forwardRef(
     title,
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
+    iconPosition = "start",
+    label,
+    children,
     ...props
   }, ref) => {
     const resolvedSize = size ?? "md";
+    const usesAxes = appearance != null || tone != null;
     const isToggle = pressed !== void 0;
     const isPressed = pressed === true;
     const hoverTitle = title ?? (typeof ariaLabel === "string" ? ariaLabel : void 0);
+    const text = label ?? children;
+    const hasText = text !== void 0 && text !== null && text !== false;
+    const style = usesAxes ? resolveActionStyle(appearance, tone, "ghost") : void 0;
+    const axisSize = usesAxes ? resolvedSize : void 0;
+    const legacySize = resolvedSize;
+    const textBoxSize = axisSize ?? textButtonSize[legacySize];
+    const icon = /* @__PURE__ */ jsx26(
+      Icon,
+      {
+        "aria-hidden": "true",
+        "data-slot": "icon-button-icon",
+        size: axisSize ? axisIcon[axisSize].size : iconSize2[legacySize],
+        strokeWidth: axisSize ? axisIcon[axisSize].strokeWidth : hasText ? void 0 : iconStrokeWidth[legacySize]
+      }
+    );
     return /* @__PURE__ */ jsxs25(
       "button",
       {
         ref,
         ...props,
         "data-slot": "icon-button",
-        "data-variant": variant,
+        "data-variant": usesAxes ? void 0 : variant,
+        "data-appearance": style?.appearance,
+        "data-tone": style?.tone,
         "data-size": resolvedSize,
+        "data-icon-position": hasText ? iconPosition : void 0,
         "data-pressed": isToggle ? String(isPressed) : void 0,
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledBy,
         "aria-pressed": isToggle ? isPressed : void 0,
         title: hoverTitle,
         className: cn(
-          iconButtonVariants({ variant, size, pressed: isPressed, className })
+          iconButtonVariants({
+            variant,
+            appearance,
+            tone,
+            size: hasText ? null : size,
+            pressed: isPressed
+          }),
+          hasText && ["whitespace-nowrap", buttonSizeClassName(textBoxSize)],
+          className
         ),
         type: type ?? "button",
         children: [
-          /* @__PURE__ */ jsx26(
-            Icon,
-            {
-              "aria-hidden": "true",
-              "data-slot": "icon-button-icon",
-              size: iconSize2[resolvedSize],
-              strokeWidth: iconStrokeWidth[resolvedSize]
-            }
-          ),
+          hasText && iconPosition === "end" ? null : icon,
+          hasText ? text : null,
+          hasText && iconPosition === "end" ? icon : null,
           badge !== void 0 ? /* @__PURE__ */ jsx26(
             "span",
             {
@@ -9722,7 +9872,10 @@ function TreeView({
 
 // src/components/branding/olun-logo.tsx
 import { jsx as jsx58, jsxs as jsxs51 } from "react/jsx-runtime";
+var SYMBOL_LARGE = { stroke: 24, dotX: 184, dotY: 180, dotR: 13 };
+var SYMBOL_SMALL = { stroke: 18, dotX: 185, dotY: 175, dotR: 22 };
 function OlunSymbol({ size = 28, className }) {
+  const g = size > 32 ? SYMBOL_LARGE : SYMBOL_SMALL;
   return /* @__PURE__ */ jsxs51(
     "svg",
     {
@@ -9741,12 +9894,12 @@ function OlunSymbol({ size = 28, className }) {
             cy: "120",
             r: "60",
             stroke: "currentColor",
-            strokeWidth: "18",
+            strokeWidth: g.stroke,
             fill: "none",
             style: { color: "var(--text-primary)" }
           }
         ),
-        /* @__PURE__ */ jsx58("circle", { cx: "185", cy: "175", r: "22", fill: "var(--accent-pop)" })
+        /* @__PURE__ */ jsx58("circle", { cx: g.dotX, cy: g.dotY, r: g.dotR, fill: "var(--accent-pop)" })
       ]
     }
   );
@@ -9780,7 +9933,7 @@ function OlunLogo({
             },
             children: [
               "OLUN",
-              /* @__PURE__ */ jsx58("span", { style: { color: "var(--accent)" }, children: "." })
+              !showSymbol && /* @__PURE__ */ jsx58("span", { style: { color: "var(--accent)" }, children: "." })
             ]
           }
         )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olundot/ui",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description": "OLUN. shared React UI components built on OLUN design tokens",
   "license": "MIT",
   "keywords": [
@@ -44,7 +44,7 @@
     "lucide-react": "^1.8.0",
     "radix-ui": "^1.4.3",
     "tailwind-merge": "^3.5.0",
-    "@olundot/tokens": "^0.16.0"
+    "@olundot/tokens": "^0.17.0"
   },
   "peerDependencies": {
     "react": ">=18",