@mondrianai/runyourai-design-system 0.0.24 → 0.0.25

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as React$1 from 'react';
 import React__default, { ReactNode } from 'react';
-import { Accordion as Accordion$1, AlertDialog as AlertDialog$1, Checkbox as Checkbox$1, Collapsible as Collapsible$1, Menubar as Menubar$1, Slider as Slider$1, Switch as Switch$1, Tooltip as Tooltip$1, Popover as Popover$1 } from 'radix-ui';
+import { Accordion as Accordion$1, AlertDialog as AlertDialog$1, Checkbox as Checkbox$1, Collapsible as Collapsible$1, Menubar as Menubar$1, Slider as Slider$1, Toggle as Toggle$1, Switch as Switch$1, Tooltip as Tooltip$1, Popover as Popover$1 } from 'radix-ui';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
@@ -717,6 +717,10 @@ interface ProgressProps {
     tooltip?: string;
     className?: string;
 }
+/**
+ * 진행률 바 — Radix Progress 기반(role=progressbar, aria-valuenow/valuemin/valuemax).
+ * warning/danger 임계값 색상, tooltip 지원.
+ */
 declare function Progress({ value, warning, danger, tooltip, className, }: ProgressProps): react_jsx_runtime.JSX.Element;
 
 interface Item<T extends string> {
@@ -727,8 +731,18 @@ interface SegmentedControlProps<T extends string> {
     value: T;
     onChange: (value: T) => void;
     items: readonly Item<T>[];
+    /**
+     * true면 컨테이너를 w-full로 펼치고 각 세그먼트를 균등분할(flex-1)한다.
+     * 기본 false — 콘텐츠 폭(각 세그먼트가 라벨 길이에 맞춰짐).
+     */
+    block?: boolean;
+    className?: string;
 }
-declare function SegmentedControl<T extends string>({ value, onChange, items, }: SegmentedControlProps<T>): react_jsx_runtime.JSX.Element;
+/**
+ * 세그먼트 컨트롤(값/필터 선택) — Tabs `variant="pill"`과 동일 스타일.
+ * 균등분할이 필요하면 `block`. 라벨이 칸보다 길면 말줄임되고, 그 경우에만 hover 시 툴팁으로 전체 표시.
+ */
+declare function SegmentedControl<T extends string>({ value, onChange, items, block, className, }: SegmentedControlProps<T>): react_jsx_runtime.JSX.Element;
 
 interface SearchInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'type'> {
     value: string;
@@ -948,35 +962,37 @@ interface TabsProps<T extends string = string> {
     allTabs: TabItem<T>[];
     current: T;
     onTabChange: (value: T) => void;
-    /**
-     * "pill"      — 회색 배경 컨테이너 + 흰 배경 active (segment control 스타일)
-     * "underline" — 하단 밑줄 active (default)
-     */
-    variant?: 'pill' | 'underline';
     /** 컨테이너를 w-full로 펼치고 각 탭 버튼을 균등 분할(flex-1)합니다 */
     block?: boolean;
-    /** Tailwind height 클래스 (e.g. "h-[36px]"). 지정 시 내부 버튼 패딩도 자동 조정됩니다. */
-    height?: string;
     className?: string;
 }
 /**
- * 디자인 시스템에서는 동일 뷰의 데이터 전환을 위해 ToggleGroup 대신 Tabs를 사용합니다.
- * Tabs의 원래 목적으로도 사용하며, 한 화면에 두 가지의 의미로 Tabs를 사용하지 않습니다.
+ * 하단 밑줄(underline) 탭 — 서로 다른 콘텐츠 영역 전환(진짜 탭).
+ * Radix Tabs 기반: role=tablist/tab, roving tabindex, ←/→ 키보드,
+ * `activationMode="manual"`(화살표는 포커스만, 클릭/Enter/Space로 활성화).
+ *
+ * 세그먼트/값·필터 선택(구 `variant="pill"`)은 SegmentedControl을 사용한다.
+ *
+ * NOTE: 콘텐츠 패널은 사용처가 바깥에서 `current`로 렌더하므로 Tabs.Content(및 aria-controls↔
+ *   aria-labelledby 연결)가 없다. 키보드·역할 a11y는 확보했으나 탭↔패널 연결은 미완.
+ *   구 pill 사용처 이관 및 릴리스 체크리스트: docs/todo/tabs-segmented-control.md
  */
-declare function Tabs<T extends string = string>({ allTabs, current, onTabChange, variant, block, height, className, }: TabsProps<T>): react_jsx_runtime.JSX.Element;
+declare function Tabs<T extends string = string>({ allTabs, current, onTabChange, block, className, }: TabsProps<T>): react_jsx_runtime.JSX.Element;
 
-interface ToggleProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> {
-    pressed?: boolean;
-    onPressedChange?: (pressed: boolean) => void;
-    size?: 'sm' | 'md' | 'lg';
-}
 declare const toggleSizeClasses: {
     readonly sm: "h-7 min-w-7 px-1.5 text-sm";
     readonly md: "h-9 min-w-9 px-2 text-sm";
     readonly lg: "h-10 min-w-10 px-2.5 text-base";
 };
 declare const toggleBaseClasses = "inline-flex items-center justify-center gap-1.5 font-medium tracking-tight transition-colors select-none";
-declare function Toggle({ pressed, onPressedChange, size, disabled, className, children, ...props }: ToggleProps): react_jsx_runtime.JSX.Element;
+interface ToggleProps extends Omit<React$1.ComponentPropsWithoutRef<typeof Toggle$1.Root>, 'asChild'> {
+    size?: 'sm' | 'md' | 'lg';
+}
+/**
+ * 두 상태(on/off) 토글 버튼 — Radix Toggle 기반(aria-pressed, data-state=on/off, Space/Enter 키보드).
+ * `pressed`/`onPressedChange`로 제어한다.
+ */
+declare function Toggle({ size, className, ...props }: ToggleProps): react_jsx_runtime.JSX.Element;
 
 interface ToggleGroupItemData<T extends string = string> {
     value: T;

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as React$1 from 'react';
 import React__default, { ReactNode } from 'react';
-import { Accordion as Accordion$1, AlertDialog as AlertDialog$1, Checkbox as Checkbox$1, Collapsible as Collapsible$1, Menubar as Menubar$1, Slider as Slider$1, Switch as Switch$1, Tooltip as Tooltip$1, Popover as Popover$1 } from 'radix-ui';
+import { Accordion as Accordion$1, AlertDialog as AlertDialog$1, Checkbox as Checkbox$1, Collapsible as Collapsible$1, Menubar as Menubar$1, Slider as Slider$1, Toggle as Toggle$1, Switch as Switch$1, Tooltip as Tooltip$1, Popover as Popover$1 } from 'radix-ui';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
@@ -717,6 +717,10 @@ interface ProgressProps {
     tooltip?: string;
     className?: string;
 }
+/**
+ * 진행률 바 — Radix Progress 기반(role=progressbar, aria-valuenow/valuemin/valuemax).
+ * warning/danger 임계값 색상, tooltip 지원.
+ */
 declare function Progress({ value, warning, danger, tooltip, className, }: ProgressProps): react_jsx_runtime.JSX.Element;
 
 interface Item<T extends string> {
@@ -727,8 +731,18 @@ interface SegmentedControlProps<T extends string> {
     value: T;
     onChange: (value: T) => void;
     items: readonly Item<T>[];
+    /**
+     * true면 컨테이너를 w-full로 펼치고 각 세그먼트를 균등분할(flex-1)한다.
+     * 기본 false — 콘텐츠 폭(각 세그먼트가 라벨 길이에 맞춰짐).
+     */
+    block?: boolean;
+    className?: string;
 }
-declare function SegmentedControl<T extends string>({ value, onChange, items, }: SegmentedControlProps<T>): react_jsx_runtime.JSX.Element;
+/**
+ * 세그먼트 컨트롤(값/필터 선택) — Tabs `variant="pill"`과 동일 스타일.
+ * 균등분할이 필요하면 `block`. 라벨이 칸보다 길면 말줄임되고, 그 경우에만 hover 시 툴팁으로 전체 표시.
+ */
+declare function SegmentedControl<T extends string>({ value, onChange, items, block, className, }: SegmentedControlProps<T>): react_jsx_runtime.JSX.Element;
 
 interface SearchInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'type'> {
     value: string;
@@ -948,35 +962,37 @@ interface TabsProps<T extends string = string> {
     allTabs: TabItem<T>[];
     current: T;
     onTabChange: (value: T) => void;
-    /**
-     * "pill"      — 회색 배경 컨테이너 + 흰 배경 active (segment control 스타일)
-     * "underline" — 하단 밑줄 active (default)
-     */
-    variant?: 'pill' | 'underline';
     /** 컨테이너를 w-full로 펼치고 각 탭 버튼을 균등 분할(flex-1)합니다 */
     block?: boolean;
-    /** Tailwind height 클래스 (e.g. "h-[36px]"). 지정 시 내부 버튼 패딩도 자동 조정됩니다. */
-    height?: string;
     className?: string;
 }
 /**
- * 디자인 시스템에서는 동일 뷰의 데이터 전환을 위해 ToggleGroup 대신 Tabs를 사용합니다.
- * Tabs의 원래 목적으로도 사용하며, 한 화면에 두 가지의 의미로 Tabs를 사용하지 않습니다.
+ * 하단 밑줄(underline) 탭 — 서로 다른 콘텐츠 영역 전환(진짜 탭).
+ * Radix Tabs 기반: role=tablist/tab, roving tabindex, ←/→ 키보드,
+ * `activationMode="manual"`(화살표는 포커스만, 클릭/Enter/Space로 활성화).
+ *
+ * 세그먼트/값·필터 선택(구 `variant="pill"`)은 SegmentedControl을 사용한다.
+ *
+ * NOTE: 콘텐츠 패널은 사용처가 바깥에서 `current`로 렌더하므로 Tabs.Content(및 aria-controls↔
+ *   aria-labelledby 연결)가 없다. 키보드·역할 a11y는 확보했으나 탭↔패널 연결은 미완.
+ *   구 pill 사용처 이관 및 릴리스 체크리스트: docs/todo/tabs-segmented-control.md
  */
-declare function Tabs<T extends string = string>({ allTabs, current, onTabChange, variant, block, height, className, }: TabsProps<T>): react_jsx_runtime.JSX.Element;
+declare function Tabs<T extends string = string>({ allTabs, current, onTabChange, block, className, }: TabsProps<T>): react_jsx_runtime.JSX.Element;
 
-interface ToggleProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> {
-    pressed?: boolean;
-    onPressedChange?: (pressed: boolean) => void;
-    size?: 'sm' | 'md' | 'lg';
-}
 declare const toggleSizeClasses: {
     readonly sm: "h-7 min-w-7 px-1.5 text-sm";
     readonly md: "h-9 min-w-9 px-2 text-sm";
     readonly lg: "h-10 min-w-10 px-2.5 text-base";
 };
 declare const toggleBaseClasses = "inline-flex items-center justify-center gap-1.5 font-medium tracking-tight transition-colors select-none";
-declare function Toggle({ pressed, onPressedChange, size, disabled, className, children, ...props }: ToggleProps): react_jsx_runtime.JSX.Element;
+interface ToggleProps extends Omit<React$1.ComponentPropsWithoutRef<typeof Toggle$1.Root>, 'asChild'> {
+    size?: 'sm' | 'md' | 'lg';
+}
+/**
+ * 두 상태(on/off) 토글 버튼 — Radix Toggle 기반(aria-pressed, data-state=on/off, Space/Enter 키보드).
+ * `pressed`/`onPressedChange`로 제어한다.
+ */
+declare function Toggle({ size, className, ...props }: ToggleProps): react_jsx_runtime.JSX.Element;
 
 interface ToggleGroupItemData<T extends string = string> {
     value: T;