@olundot/ui 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,107 @@
 # @olundot/ui
 
+## 0.2.0
+
+### Minor Changes
+
+- 8e1b7bf: Form API 통합 (0.2.0) — Phase B 11 tasks.
+
+  **신규 컴포넌트 (additive):**
+
+  - `<Label>` primitive (Radix `react-label` 기반, `required` prop으로 `*` marker 자동, `formFieldLabelClassName` deprecated alias 1 cycle)
+  - `<Switch>` primitive (Radix `react-switch` 기반, `loading` state 포함 — spinner + aria-busy + 클릭 차단)
+  - `<RadioGroup>` 단순형 (Radix `react-radio-group` 기반, `RadioCardGroup` 카드형은 별도 유지)
+
+  **3 컴포넌트 API 확장 (additive — Input/Textarea/Select):**
+
+  - `size: "sm" | "md" | "lg"` 통일 prop (기존 `inputSize`/`textareaSize`/`selectSize`는 1 cycle deprecated alias)
+  - `fullWidth: boolean` (default `true` = 현행 동작 유지)
+  - `description?: ReactNode` 신규 슬롯 — 입력 전 hint (default state 시 노출, error/success 시 `message`로 swap)
+  - Select `appearance: "field" | "inline"` 별도 축 (selectVariant alias 1 cycle 유지 — `selectVariant="inline"` = `fullWidth={false} + appearance="inline"`)
+  - Select `clearable: boolean` + `clearLabel?: ReactNode` (내부 sentinel 처리, 사용처는 `value=""` 표준)
+
+  **Checkbox 확장 (additive):**
+
+  - `required: boolean` → label `*` marker 자동
+  - `error?: ReactNode` → description 자동 hide + role=alert + aria-invalid + aria-describedby
+
+  **FormField 책임 재정의 (visual change, API additive):**
+
+  - Function children (delegated mode): `controlProps`에 `description` + `message` + `state` forward. Input/Select/Textarea가 자체 slot 책임. FormField 자체 description/error 슬롯 미렌더.
+  - ReactNode children (raw legacy mode): FormField가 description/error 직접 렌더 (단순 native input fallback).
+
+  **Input/Textarea/Select 추가 fix (B1-B2 부수):**
+
+  - Input `disabled + state` 시각 우선순위 가드 추가 (textarea 정합)
+  - Input `readOnly + focus` ring 가드 추가 (textarea 정합)
+
+  **Migration:** `docs/migration/0.2.0-form-api.md` (deprecation timeline, grep checklist, visual regression checklist, before/after 코드 예제 포함).
+
+  **Caveat:**
+
+  - Input legacy `inputSize="sm"` (34px) → 신규 `size="md"` (38px, 보수 매핑 — 시각 회귀 방지)
+  - `selectVariant="inline"`은 `fullWidth={false}` 단독으로 완전 대체 불가 — `appearance="inline"` 별도 축 도입 (font-medium + min-w-[112px] + max-w-full 보존)
+  - FormField description 위치는 OLUN 단일 stack 패턴 (control 아래) — Input message slot과 일관 (GOV.UK 패턴 검토 후 거부)
+
+  **Visual/Layout changes (consumer 영향):**
+
+  - Checkbox 구조 재편 (option B): Root=box만, label 외부 sibling htmlFor (touch hit area 확장)
+  - Switch sizing arbitrary px (`h-[24px] w-[44px]`) — OLUN `--space-5/6` (40/48px) footgun 회피
+  - FormField label-group wrapper 추가 후 단일 stack 패턴으로 복귀 (description = control 아래, error 시 description 자동 hide)
+
+- be77d2e: Popover primitive 신설 + Dialog/Tabs/Tooltip 시각 보정 (0.3.0)
+
+  **신규 컴포넌트:**
+
+  - `<Popover>` primitive — Radix Popover wrap. 6 export (Root/Trigger/Anchor/Content/Arrow/Close). Modal=false 기본, Tooltip과 달리 interactive content 허용.
+
+  **Chip cursor affordance fix (R13-1):**
+
+  - `variant=filter|choice|removable` → `cursor-pointer` (interactive 3종 명시)
+  - `variant=status-filter` → `cursor-default` (정적 표시 chip — 클릭 affordance 없음)
+  - 배경: Tailwind v4 preflight + site reset이 `<button>` cursor를 보장하지 않아 사용자 라이브 검증에서 filter toolbar cursor 누락 발견. variant level에서 강제.
+
+  **Visual fix:**
+
+  - Dialog: DialogHeader `space-y-1.5 → space-y-[var(--space-1)]` (6→8px), DialogTitle `leading-none → leading-[1.35]` (font-base 정합)
+  - **DialogContent default padding 48 → 32px** (`p-6` → `p-[var(--space-4)]`) — PR3 Round 5. cbt-lms FormModal/InfoModal/InviteResultDialog 모두 자체 `className` override 사용으로 영향 0.
+  - Tabs: tabsTriggerVariants active `font-semibold → font-bold` (위계 강화), TabsContent에 `flex flex-col items-stretch justify-start gap-4 min-h-8` 기본 (16px gap + 32px min-h, 부모 가운데 정렬 차단). site fixture에서 보정하던 className이 package default로 흡수됨.
+  - **Tabs Badge active wash 제거 (R14 active-state doctrine)** — 활성 marker는 trigger의 underline + bold + `text-accent-fg`로 단일화. Badge는 metadata 역할로 환원 (`text-inherit`만 유지해 활성 시 부모 text-accent-fg 자동 적용). 이유: 동일 selected state에 underline + wash 둘 다 적용하면 (1) 시각 noise 증가 (2) light에서 wash hue family가 opaque accent와 갈라져 부조화 (R14 회귀, snapshot 검증). doctrine = 컴포넌트당 selected marker 하나 + 모드별 단일 hue family. `docs/components/Authoring-Guide.md#active-state-시각-언어-single-marker-single-hue-family` 참조.
+
+  **Card (R14):**
+
+  - **`CardProse` composition helper 신설** — `CardContent` 안에 다중 `<p>`/`<ul>`/`<ol>`을 둘 때 sibling 간 spacing(`var(--space-2)`)과 body typography(`text-sm leading-relaxed text-foreground`)를 자동 적용. import 추가 (`@olundot/ui`에서 `CardProse` 새 export).
+  - **`CardDescription` semantic 명시화** — JSDoc으로 "single semantic paragraph 한정" 명시. multi-paragraph/list body는 `CardContent > CardProse`가 정본. 이유: `<p>` 안에 nested `<p>`/`<ul>`은 HTML invalid이며, fixture에서 multi-line copy가 description에 박혀 spread되던 ambiguity 차단.
+  - **Tooltip default mobile click 지원 (uncontrolled 한정)** — `enableTouch` prop (default `true`). 내부 uncontrolled state + `TooltipTrigger`의 `onClick` 가로채 toggle하는 방식으로 Radix native touch gap 보완. **`open` prop 전달(controlled) 시 click toggle은 자동 비활성화** — 외부 `onOpenChange`와의 이중 toggle 방지가 의도된 계약. controlled에서 mobile click이 필요하면 consumer가 trigger의 `onClick`에서 `onOpenChange(!open)` 직접 호출. `enableTouch={false}` opt-out으로 uncontrolled에서도 desktop hover-only 강제 가능.
+
+  **Consumer impact:**
+
+  > **Context**: cbt-lms 모노레포는 olun-app으로 재구성 예정이므로 본 PR의 visible change는 사용처 측 직접 마이그레이션 부담 없음. 이하 영향은 향후 외부 consumer(또는 새 olun-app)가 본 0.3.0을 채택할 때 알아야 할 사항.
+
+  - **Dialog Title** 시각 위계 회복 (의도하지 않은 줄간격 축소가 본 버전부터 정상화)
+  - **DialogContent padding 32px로 축소** — `<DialogContent>` 사용처에서 자체 `className`/`p-*` override 중이면 영향 없음. 순수 `<DialogContent>` 직접 사용처만 padding이 32px로 변경됨. (cbt-lms는 FormModal/InfoModal/InviteResultDialog 모두 override 확인됨)
+  - **Tabs label** active `font-bold` 위계 강화 — `font-semibold` 기대하던 사용처는 시각 미세 변화 발생
+  - **TabsContent default class 추가** — `flex flex-col items-stretch justify-start gap-4 min-h-8` 자동 적용. cbt-lms `InvitePageTabs` 등 className 없이 쓰던 사용처도 동일 기본 적용 (의도된 visual consistency). 짧은 content 부모 가운데 정렬 차단. 자체 override가 필요하면 className으로 후속 merge 가능.
+  - **Tabs Badge active wash 제거** — 기존 active wash(bg/border/text)에 의존한 사용처는 시각 변화 발생 (badge는 항상 neutral pill, 활성 시 text-accent-fg만 inherit). filled badge 강조가 필요했다면 별도 컴포넌트로 분리 권장.
+  - **Badge brand variant** — `--accent-bg-strong`이 R14에서 olive alpha 14%로 muted됨. light에서 vivid olive 대신 **subtle olive wash**로 보임 (cbt-lms `OrgBrandingPanel`/`HeroSection` 등 사용처에서 visible change — 강조도 ↓).
+  - **Card `CardProse` 신규 export + `CardDescription` semantic 명시** — multi-paragraph body 표현이 `CardContent > CardProse`로 일원화. 기존에 multi-line/multi-paragraph copy를 `CardDescription`에 박았던 사용처는 마이그레이션 필요 (예: cbt-lms는 차후 olun-app 재구성 시 일괄).
+  - **Tooltip**: 기존 hover/focus 동작 보존. uncontrolled + `enableTouch=true`(default)에서 click 이벤트가 추가로 toggle. controlled로 쓰던 기존 consumer는 영향 없음 (click 동작 자체가 추가되지 않음 — `onOpenChange`만 그대로 호출). controlled+mobile click 조합이 필요했다면 consumer trigger에 `onClick={() => onOpenChange(!open)}` 추가 필요.
+
+  > 새 olun-app 도입 시점에서 위 항목을 visual smoke check 대상으로 사용.
+
+### Patch Changes
+
+- 8e1b7bf: Input: textarea와 정합되도록 두 가드 추가.
+
+  - **readOnly + focus 가드**: `read-only:focus:border-[var(--border-subtle)] read-only:focus:shadow-none` — readOnly Input이 focus될 때 olive ring이 들어와 편집 가능으로 오해되는 시각 회귀 차단. textarea.tsx:18에는 이미 적용된 가드.
+  - **disabled + state 시각 우선순위**: `disabled:data-[state=error/success]:border-subtle disabled:bg-disabled` 두 줄 — disabled가 error/success border/bg를 시각적으로 이김 (Authoring Guide의 상태 우선순위 정합). textarea.tsx:22-23, select.tsx:26-27에 이미 적용된 가드.
+
+  SSR markup 기반 회귀 테스트 7건 동반 추가 (input.test.tsx). API 변경 없음.
+
+- Updated dependencies [d5116ea]
+- Updated dependencies [be77d2e]
+  - @olundot/tokens@0.7.0
+
 ## 0.1.0
 
 ### Minor Changes

package/dist/index.d.ts

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { SVGProps } from 'react';
 import { VariantProps } from 'class-variance-authority';
 import { LucideIcon } from 'lucide-react';
-import { Select as Select$1, Tabs as Tabs$1, Dialog as Dialog$1, Separator as Separator$1, Avatar as Avatar$1, DropdownMenu as DropdownMenu$1, Tooltip as Tooltip$1, Checkbox as Checkbox$1, RadioGroup, ScrollArea as ScrollArea$1 } from 'radix-ui';
+import { Select as Select$1, Label as Label$1, Switch as Switch$1, Tabs as Tabs$1, Dialog as Dialog$1, Separator as Separator$1, Avatar as Avatar$1, DropdownMenu as DropdownMenu$1, Tooltip as Tooltip$1, Popover as Popover$1, Checkbox as Checkbox$1, RadioGroup as RadioGroup$1, ScrollArea as ScrollArea$1 } from 'radix-ui';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 declare function cn(...inputs: ClassValue[]): string;
@@ -43,16 +43,48 @@ declare const CopyButton: React.ForwardRefExoticComponent<Omit<ButtonProps, "var
 } & React.RefAttributes<HTMLButtonElement>>;
 
 declare const inputVariants: (props?: ({
-    inputSize?: "xs" | "sm" | "md" | "lg" | "default" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    fullWidth?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const inputMessageVariants: (props?: ({
     state?: "error" | "success" | "default" | null | undefined;
-    inputSize?: "xs" | "sm" | "md" | "lg" | "default" | null | undefined;
+    size?: "sm" | "md" | "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. */
+type InputSize = "sm" | "md" | "lg";
+/**
+ * @deprecated Use `InputSize` instead.
+ * Legacy values: xs→sm, default→md, sm (was 34px — now maps to md for safety), md→md, lg→lg.
+ */
+type InputSizeLegacy = "xs" | "sm" | "md" | "lg" | "default";
 interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">, VariantProps<typeof inputVariants> {
+    /**
+     * Field height preset. Replaces `inputSize` (deprecated).
+     * - sm: 32px  (compact toolbar/search)
+     * - md: 38px  (default form field)
+     * - lg: 44px  (prominent / WCAG 2.5.5 touch target)
+     */
+    size?: InputSize;
+    /**
+     * @deprecated Use `size` instead.
+     * xs → sm, default → md, sm → md, md → md, lg → lg.
+     * Will be removed in the next major version.
+     */
+    inputSize?: InputSizeLegacy;
+    /**
+     * Whether the field stretches to fill its container.
+     * - `true` (default): `w-full` — fills the container width (existing behavior).
+     * - `false`: `w-fit` — shrinks to the intrinsic content width.
+     */
+    fullWidth?: boolean;
     invalid?: boolean;
     label?: React.ReactNode;
+    /**
+     * Pre-input hint text (always visible in default state). Hidden when
+     * `state` is "error" or "success" — `message` takes over.
+     */
+    description?: React.ReactNode;
     message?: React.ReactNode;
     state?: InputState;
 }
@@ -104,16 +136,47 @@ declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttri
 declare const InlineAlert: React.ForwardRefExoticComponent<InlineAlertProps & React.RefAttributes<HTMLDivElement>>;
 
 declare const textareaVariants: (props?: ({
-    textareaSize?: "default" | "compact" | "large" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    fullWidth?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const textareaMessageVariants: (props?: ({
     state?: "error" | "success" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type TextareaState = NonNullable<VariantProps<typeof textareaMessageVariants>["state"]>;
-type TextareaSize = NonNullable<VariantProps<typeof textareaVariants>["textareaSize"]>;
+/** Canonical size type (0.2.0+). Use `size` prop with these values. */
+type TextareaSize = "sm" | "md" | "lg";
+/**
+ * @deprecated Use `TextareaSize` instead.
+ * Legacy values: compact→sm, default→md, large→lg.
+ */
+type TextareaSizeLegacy = "compact" | "default" | "large";
 interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "children">, VariantProps<typeof textareaVariants> {
+    /**
+     * Min-height preset. Replaces `textareaSize` (deprecated). Font size is unchanged across all sizes.
+     * - sm: 72px   (compact admin reason field)
+     * - md: 88px   (default note / explanation field)
+     * - lg: 120px  (long response, audit comment)
+     */
+    size?: TextareaSize;
+    /**
+     * @deprecated Use `size` instead.
+     * compact → sm, default → md, large → lg (height only, font unchanged).
+     * Will be removed in the next major version.
+     */
+    textareaSize?: TextareaSizeLegacy;
+    /**
+     * Whether the field stretches to fill its container.
+     * - `true` (default): `w-full` — fills the container width (existing behavior).
+     * - `false`: `w-fit` — shrinks to the intrinsic content width.
+     */
+    fullWidth?: boolean;
     invalid?: boolean;
     label?: React.ReactNode;
+    /**
+     * Pre-input hint text (always visible in default state). Hidden when
+     * `state` is "error" or "success" — `message` takes over.
+     */
+    description?: React.ReactNode;
     message?: React.ReactNode;
     state?: TextareaState;
     valueLength?: number;
@@ -121,24 +184,38 @@ interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaEl
 declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
 
 declare const selectVariants: (props?: ({
-    selectVariant?: "inline" | "field" | null | undefined;
-    selectSize?: "sm" | "md" | "lg" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    fullWidth?: boolean | null | undefined;
+    appearance?: "inline" | "field" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const selectMessageVariants: (props?: ({
     state?: "error" | "success" | "default" | null | undefined;
-    selectSize?: "sm" | "md" | "lg" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type SelectState = NonNullable<VariantProps<typeof selectMessageVariants>["state"]>;
-type SelectSize = NonNullable<VariantProps<typeof selectVariants>["selectSize"]>;
+/** Canonical size type (0.2.0+). Use `size` prop with these values. */
+type SelectSize = "sm" | "md" | "lg";
+/** Appearance axis for Select trigger (0.2.0+). */
+type SelectAppearance = "field" | "inline";
+/**
+ * @deprecated Use `fullWidth` + `appearance` props instead.
+ * Legacy variant alias: "field" = `fullWidth=true, appearance="field"`, "inline" = `fullWidth=false, appearance="inline"`.
+ */
+type SelectVariant = "field" | "inline";
 interface SelectOption {
     value: string;
     label: React.ReactNode;
     disabled?: boolean;
 }
-interface SelectProps extends Omit<React.ComponentPropsWithoutRef<typeof Select$1.Root>, "children" | "dir">, VariantProps<typeof selectVariants> {
+interface SelectProps extends Omit<React.ComponentPropsWithoutRef<typeof Select$1.Root>, "children" | "dir"> {
     className?: string;
     id?: string;
     label?: React.ReactNode;
+    /**
+     * Pre-input hint text (always visible in default state). Hidden when
+     * `state` is "error" or "success" — `message` takes over.
+     */
+    description?: React.ReactNode;
     message?: React.ReactNode;
     invalid?: boolean;
     state?: SelectState;
@@ -147,16 +224,65 @@ interface SelectProps extends Omit<React.ComponentPropsWithoutRef<typeof Select$
     "aria-label"?: React.AriaAttributes["aria-label"];
     "aria-describedby"?: string;
     "aria-invalid"?: React.AriaAttributes["aria-invalid"];
+    /**
+     * Field height preset.
+     * - sm: 32px  (compact toolbar/filter)
+     * - md: 34px  (default, matches Input density)
+     * - lg: 38px  (prominent)
+     */
+    size?: SelectSize;
+    /**
+     * @deprecated Use `size` instead. Values are identical: sm→sm, md→md, lg→lg.
+     * Will be removed in the next major version.
+     */
+    selectSize?: SelectSize;
+    /**
+     * Whether the trigger stretches to fill its container.
+     * - `true` (default): `w-full` — fills the container width (existing behavior).
+     * - `false`: `w-fit` — shrinks to intrinsic content width.
+     */
+    fullWidth?: boolean;
+    /**
+     * Visual style axis for the select trigger.
+     * - `"field"` (default): standard form field look with no extra styles.
+     * - `"inline"`: compact contextual look — `min-w-[112px] max-w-full font-medium`.
+     *   Combine with `fullWidth={false}` to replicate the legacy `selectVariant="inline"` behavior.
+     */
+    appearance?: SelectAppearance;
+    /**
+     * @deprecated Use `fullWidth={false} + appearance="inline"` instead.
+     * - `"inline"` → resolves to `fullWidth=false, appearance="inline"`.
+     * - `"field"` → resolves to `fullWidth=true, appearance="field"`.
+     * Will be removed in the next major version.
+     */
+    selectVariant?: SelectVariant;
+    /**
+     * When `true`, prepends a reset option to the dropdown. Selecting it fires
+     * `onValueChange("")` and restores the trigger placeholder. Default `false`.
+     *
+     * Eliminates the need for callers to manage a sentinel value themselves —
+     * use `value=""` + `onValueChange` with `clearable` for the standard pattern.
+     */
+    clearable?: boolean;
+    /**
+     * Custom label for the clear/reset option.
+     * Defaults to `placeholder` (so reset option text matches trigger placeholder — visual unity).
+     */
+    clearLabel?: React.ReactNode;
 }
 declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLButtonElement>>;
 
 declare const formFieldVariants: (props?: ({
     layout?: "horizontal" | "vertical" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
+/**
+ * @deprecated Use `<Label>` primitive instead. This className alias is kept for
+ * 1 cycle (0.2.0 → 0.3.0 removal) for raw label patterns.
+ */
 declare const formFieldLabelClassName = "text-[13px] font-medium leading-[1.35] text-[var(--text-secondary)]";
 declare const formFieldRequiredClassName = "ml-[2px] text-[var(--semantic-error,var(--error))]";
-declare const formFieldDescriptionClassName = "ml-[var(--space-1-5)] text-[12px] leading-[1.4] text-[var(--text-tertiary)]";
-declare const formFieldErrorClassName = "ml-[var(--space-1-5)] text-[12px] leading-[1.4] text-[var(--semantic-error,var(--error))]";
+declare const formFieldDescriptionClassName = "text-[12px] leading-[1.4] text-[var(--text-tertiary)]";
+declare const formFieldErrorClassName = "text-[12px] leading-[1.4] text-[var(--semantic-error,var(--error))]";
 declare const formFieldControlStackClassName = "flex min-w-0 flex-col gap-[var(--space-0-5)]";
 interface FormFieldProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
     label: React.ReactNode;
@@ -172,6 +298,14 @@ interface FormFieldRenderProps {
         id?: string;
         "aria-describedby"?: string;
         "aria-invalid"?: true;
+        /** Forwarded in delegated mode: required semantic (control's required attribute + aria-required). */
+        required?: boolean;
+        /** Forwarded in delegated mode: pre-input hint (visible when no error). */
+        description?: React.ReactNode;
+        /** Forwarded in delegated mode: error message (error takes priority over description). */
+        message?: React.ReactNode;
+        /** Forwarded in delegated mode: "error" when error is set, "default" otherwise. */
+        state?: "default" | "success" | "error";
     };
     descriptionId?: string;
     errorId?: string;
@@ -179,6 +313,38 @@ interface FormFieldRenderProps {
 }
 declare function FormField({ label, required, description, error, children, layout, id, className, ...props }: FormFieldProps): react_jsx_runtime.JSX.Element;
 
+interface LabelProps extends React.ComponentPropsWithoutRef<typeof Label$1.Root> {
+    htmlFor?: string;
+    required?: boolean;
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * Label primitive — wraps Radix UI Label for consistent typography and
+ * required-marker behaviour across form fields.
+ *
+ * Matches the visual spec of `formFieldLabelClassName` in form-field.tsx:
+ * 13 px / medium / 1.35 leading / --text-secondary.
+ *
+ * @example
+ * <Label htmlFor="email">이메일</Label>
+ * <Label htmlFor="sn" required>학번</Label>
+ */
+declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLLabelElement>>;
+
+interface SwitchProps extends Omit<React.ComponentPropsWithoutRef<typeof Switch$1.Root>, "children"> {
+    label: React.ReactNode;
+    description?: React.ReactNode;
+    /** Marks the switch as required (passes aria-required). */
+    required?: boolean;
+    /**
+     * Loading state — shows spinner, disables interaction, sets aria-busy.
+     * Use for pending async preference changes (e.g., saving remote setting).
+     */
+    loading?: boolean;
+}
+declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
+
 type PermissionFallback = "hide" | "disabled" | React.ReactNode;
 interface PermissionScope {
     resourceId?: string;
@@ -270,8 +436,47 @@ interface CardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<t
 declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
 declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+/**
+ * Card 제목 아래 한 줄 helper text (subtitle).
+ *
+ * Semantic: **single semantic paragraph만 허용**. 시각적으로 2-3줄 wrap은 OK이지만,
+ * 여러 단락/리스트/구조화 body는 `CardContent` + `CardProse`로 분리한다.
+ * 중첩 paragraph/list를 박으면 `<p>` 안에 `<p>`가 nest되어 HTML invalid.
+ *
+ * @example
+ * ```tsx
+ * <CardHeader>
+ *   <CardTitle>강의 1주차</CardTitle>
+ *   <CardDescription>32문항 · 45분</CardDescription>
+ * </CardHeader>
+ * ```
+ *
+ * @see CardProse — multi-paragraph body 전용 composition helper
+ */
 declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
 declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Card body multi-paragraph 전용 composition helper.
+ *
+ * `CardContent` 안에 다중 `<p>` / `<ul>` / `<ol>`을 넣을 때 sibling 간 spacing과
+ * body typography를 자동 적용. `CardDescription`은 single semantic paragraph 한정,
+ * 그 외 body 구조는 `CardContent > CardProse` 패턴이 정본.
+ *
+ * @example
+ * ```tsx
+ * <CardContent>
+ *   <CardProse>
+ *     <p>첫 단락. 시험 응시 안내.</p>
+ *     <p>둘째 단락. 점수 산정 기준.</p>
+ *     <ul>
+ *       <li>총 32문항</li>
+ *       <li>제한 시간 45분</li>
+ *     </ul>
+ *   </CardProse>
+ * </CardContent>
+ * ```
+ */
+declare const CardProse: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 
 interface PageHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
@@ -553,12 +758,51 @@ interface SheetDrawerProps {
 declare function SheetDrawer({ open, onOpenChange, title, description, children, expandHref, onExpand, expandLabel, footer, width, closeLabel, }: SheetDrawerProps): react_jsx_runtime.JSX.Element;
 
 declare function TooltipProvider({ delayDuration, ...props }: React.ComponentProps<typeof Tooltip$1.Provider>): react_jsx_runtime.JSX.Element;
-declare function Tooltip({ ...props }: React.ComponentProps<typeof Tooltip$1.Root>): react_jsx_runtime.JSX.Element;
-declare function TooltipTrigger({ ...props }: React.ComponentProps<typeof Tooltip$1.Trigger>): react_jsx_runtime.JSX.Element;
+interface TooltipProps extends React.ComponentProps<typeof Tooltip$1.Root> {
+    /**
+     * Enable mobile click/touch trigger via internal state + onClick toggle on TooltipTrigger.
+     * Default `true` — hover/focus + click 모두 동작 (**uncontrolled에서만**).
+     *
+     * **Controlled (`open` prop 전달) 시 이 prop은 무시되어 click toggle이 비활성화된다.**
+     * 외부 state와의 이중 toggle/conflict 방지가 목적이다. controlled mobile click은
+     * consumer가 trigger의 `onClick`에서 `onOpenChange(!open)`을 직접 호출해야 한다.
+     *
+     * `false` — uncontrolled에서도 click toggle 끄고 desktop hover-only 강제.
+     */
+    enableTouch?: boolean;
+}
+declare function Tooltip({ open: controlledOpen, defaultOpen, onOpenChange: userOnOpenChange, enableTouch, children, ...props }: TooltipProps): react_jsx_runtime.JSX.Element;
+declare function TooltipTrigger({ onClick: userOnClick, ...props }: React.ComponentProps<typeof Tooltip$1.Trigger>): react_jsx_runtime.JSX.Element;
 declare function TooltipContent({ className, sideOffset, children, ...props }: React.ComponentProps<typeof Tooltip$1.Content>): react_jsx_runtime.JSX.Element;
 
+interface PopoverProps extends React.ComponentPropsWithoutRef<typeof Popover$1.Root> {
+    /**
+     * Whether the popover blocks background interaction.
+     * Default `false` — interactive content with non-blocking dismiss.
+     * Set `true` only for full focus trap (consider `<Dialog>` instead).
+     */
+    modal?: boolean;
+}
+declare function Popover({ modal, ...props }: PopoverProps): react_jsx_runtime.JSX.Element;
+declare const PopoverTrigger: React.ForwardRefExoticComponent<Popover$1.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const PopoverAnchor: React.ForwardRefExoticComponent<Popover$1.PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
+declare const PopoverClose: React.ForwardRefExoticComponent<Popover$1.PopoverCloseProps & React.RefAttributes<HTMLButtonElement>>;
+interface PopoverContentProps extends React.ComponentPropsWithoutRef<typeof Popover$1.Content> {
+    /**
+     * Whether to render the arrow pointing to the trigger.
+     * Default `false` — set to `true` for visual anchor cue.
+     */
+    showArrow?: boolean;
+}
+declare const PopoverContent: React.ForwardRefExoticComponent<PopoverContentProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Standalone Arrow export — for advanced anchor patterns that need
+ * arrow positioning outside of Content (rare). Prefer `<PopoverContent showArrow>`.
+ */
+declare const PopoverArrow: React.ForwardRefExoticComponent<Omit<Popover$1.PopoverArrowProps & React.RefAttributes<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+
 declare const badgeVariants: (props?: ({
-    variant?: "brand" | "neutral" | "status" | "semantic" | "pill" | null | undefined;
+    variant?: "brand" | "neutral" | "status" | "semantic" | "pill" | "vibrant" | null | undefined;
     tone?: "accent" | "warning" | "info" | "success" | "neutral" | "danger" | null | undefined;
     size?: "xs" | "sm" | "md" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -598,6 +842,12 @@ declare const statusBadgeDotVariants: (props?: class_variance_authority_types.Cl
 type StatusBadgeStatus = NonNullable<VariantProps<typeof statusBadgeVariants>["status"]>;
 interface StatusBadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof statusBadgeVariants> {
     showDot?: boolean;
+    /**
+     * Dot pulse animation — default `true` (status indicator는 "살아있음" 시각 cue 필수,
+     * 플랫 dot는 AI slop 느낌). `motion-reduce` 환경에서는 자동 비활성.
+     * Opt-out 시 `pulse={false}`.
+     */
+    pulse?: boolean;
 }
 declare const StatusBadge: React.ForwardRefExoticComponent<StatusBadgeProps & React.RefAttributes<HTMLSpanElement>>;
 
@@ -614,7 +864,7 @@ interface NotificationBadgeProps extends Omit<React.HTMLAttributes<HTMLSpanEleme
 declare const NotificationBadge: React.ForwardRefExoticComponent<NotificationBadgeProps & React.RefAttributes<HTMLSpanElement>>;
 
 declare const chipVariants: (props?: ({
-    variant?: "filter" | "choice" | "status-filter" | "removable" | null | undefined;
+    variant?: "filter" | "choice" | "removable" | "status-filter" | null | undefined;
     tone?: "muted" | "accent" | "warning" | "success" | "neutral" | "danger" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
     pressed?: boolean | null | undefined;
@@ -668,7 +918,7 @@ declare const skeletonVariants: (props?: ({
     shape?: "text" | "block" | "circle" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const spinnerVariants: (props?: ({
-    size?: 16 | 24 | 32 | null | undefined;
+    size?: "sm" | "md" | "lg" | 16 | 24 | 32 | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof skeletonVariants> {
 }
@@ -687,8 +937,12 @@ interface SkeletonRowProps extends React.HTMLAttributes<HTMLDivElement> {
     count?: number;
 }
 declare const SkeletonRow: React.ForwardRefExoticComponent<SkeletonRowProps & React.RefAttributes<HTMLDivElement>>;
-interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof spinnerVariants> {
+interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Semantic sizes: sm (16px) · md (24px, default) · lg (32px).
+     * @deprecated number values 16/24/32 — use "sm"/"md"/"lg" instead (remove after 1 release cycle). */
+    size?: 'sm' | 'md' | 'lg' | 16 | 24 | 32;
     label?: string;
+    className?: string;
 }
 declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<HTMLSpanElement>>;
 
@@ -882,6 +1136,10 @@ type CheckboxCheckedState = React.ComponentProps<typeof Checkbox$1.Root>["checke
 interface CheckboxProps extends Omit<React.ComponentPropsWithoutRef<typeof Checkbox$1.Root>, "children" | "color">, VariantProps<typeof checkboxVariants> {
     label: React.ReactNode;
     description?: React.ReactNode;
+    /** Marks the field as required and appends `*` to label. */
+    required?: boolean;
+    /** Validation error message. Replaces description when present. */
+    error?: React.ReactNode;
 }
 declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;
 
@@ -907,13 +1165,28 @@ type AccessibleGroupName = {
     "aria-label"?: never;
     "aria-labelledby": string;
 };
-type RadioCardGroupRootProps = Omit<React.ComponentPropsWithoutRef<typeof RadioGroup.Root>, "children" | "orientation" | "aria-label" | "aria-labelledby">;
+type RadioCardGroupRootProps = Omit<React.ComponentPropsWithoutRef<typeof RadioGroup$1.Root>, "children" | "orientation" | "aria-label" | "aria-labelledby">;
 type RadioCardGroupProps = RadioCardGroupRootProps & AccessibleGroupName & VariantProps<typeof radioCardGroupVariants> & {
     options: readonly RadioCardOption[];
     density?: RadioCardDensity;
 };
 declare const RadioCardGroup: React.ForwardRefExoticComponent<RadioCardGroupProps & React.RefAttributes<HTMLDivElement>>;
 
+interface RadioOption {
+    value: string;
+    label: React.ReactNode;
+    description?: React.ReactNode;
+    disabled?: boolean;
+}
+interface RadioGroupProps extends Omit<React.ComponentPropsWithoutRef<typeof RadioGroup$1.Root>, "children"> {
+    options: readonly RadioOption[];
+    orientation?: "vertical" | "horizontal";
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    required?: boolean;
+}
+declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+
 declare function ScrollArea({ className, children, ...props }: React.ComponentProps<typeof ScrollArea$1.Root>): react_jsx_runtime.JSX.Element;
 declare function ScrollBar({ className, orientation, ...props }: React.ComponentProps<typeof ScrollArea$1.ScrollAreaScrollbar>): react_jsx_runtime.JSX.Element;
 
@@ -973,4 +1246,4 @@ interface JbnuEmblemProps extends SVGProps<SVGSVGElement> {
 }
 declare function JbnuEmblem({ size, className, style, ...props }: JbnuEmblemProps): react_jsx_runtime.JSX.Element;
 
-export { ActionFooter, type ActionFooterAction, type ActionFooterProps, type ActionFooterStatus, Alert, type AlertProps, type AlertVariant, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, type BadgeSize, type BadgeTone, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, type CardVariant, Checkbox, type CheckboxCheckedState, type CheckboxProps, type CheckboxSize, Chip, type ChipProps, type ChipSize, type ChipTone, type ChipVariant, ChoiceGroup, type ChoiceGroupOption, type ChoiceGroupProps, type ChoiceGroupType, type ChoiceGroupVariant, ConfirmDialog, type ConfirmDialogProps, CopyButton, type CopyButtonProps, DataTable, type DataTableBulkAction, type DataTableColumn, type DataTableProps, type DataTableSort, DetailLayout, type DetailLayoutProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogRawContent, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, type EmptyStateSize, type EmptyStateTone, ErrorState, type ErrorStateProps, FileUploadZone, type FileUploadZoneProps, FilterToolbar, type FilterToolbarProps, FormField, type FormFieldProps, type FormFieldRenderProps, FormLayout, type FormLayoutProps, type FormLayoutSection, FormModal, type FormModalProps, IconButton, type IconButtonBadgeTone, type IconButtonProps, type IconButtonSize, type IconButtonVariant, InfoModal, type InfoModalProps, InlineAlert, type InlineAlertProps, Input, type InputProps, type InputState, JbnuEmblem, type JbnuEmblemProps, ModeToggle, type ModeToggleOption, type ModeToggleProps, NotificationBadge, type NotificationBadgePlacement, type NotificationBadgeProps, type NotificationBadgeSize, OTPField, type OTPFieldProps, type OTPFieldSize, OlunLogo, OlunSymbol, PageHeader, type PageHeaderProps, Pagination, type PaginationProps, type PaginationSize, PermissionContext, type PermissionEvaluator, type PermissionFallback, PermissionGuard, type PermissionGuardProps, PermissionProvider, type PermissionProviderProps, type PermissionScope, type PermissionState, Progress, type RadioCardColumns, type RadioCardDensity, RadioCardGroup, type RadioCardGroupProps, type RadioCardOption, ScrollArea, ScrollBar, SearchField, type SearchFieldProps, type SearchFieldSize, Select, type SelectOption, type SelectProps, type SelectSize, type SelectState, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetDrawer, type SheetDrawerProps, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Skeleton, type SkeletonProps, SkeletonRow, type SkeletonRowColumn, type SkeletonRowProps, SkeletonText, type SkeletonTextProps, Spinner, type SpinnerProps, StatusBadge, type StatusBadgeProps, type StatusBadgeStatus, type TabItem, Tabs, TabsContent, type TabsProps, Textarea, type TextareaProps, type TextareaSize, type TextareaState, ThemeFab, type ThemeFabProps, ThemeToggle, type ToastAction, type ToastItem, type ToastOptions, ToastProvider, ToastRoot, type ToastVariant, ToastViewport, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TwoTierBadge, type TwoTierBadgeIntent, type TwoTierBadgeProps, WizardLayout, type WizardLayoutProps, type WizardStep, type WizardStepState, actionFooterStatusVariants, actionFooterVariants, alertVariants, badgeDotVariants, badgeVariants, buttonVariants, cardVariants, checkboxBoxVariants, checkboxVariants, chipCountVariants, chipVariants, choiceBodyVariants, choiceGroupVariants, choiceMarkerVariants, choiceRowVariants, cn, dataTableRowVariants, dataTableVariants, emptyStateIconVariants, emptyStateVariants, errorStateVariants, evaluatePermission, fileUploadIconVariants, fileUploadZoneVariants, formFieldControlStackClassName, formFieldDescriptionClassName, formFieldErrorClassName, formFieldLabelClassName, formFieldRequiredClassName, formFieldVariants, getToastDuration, iconButtonBadgeVariants, iconButtonVariants, inlineAlertVariants, inputMessageVariants, inputVariants, limitToasts, modeToggleItemVariants, modeToggleVariants, notificationBadgeVariants, otpCellVariants, otpFieldGroupVariants, otpFieldMessageVariants, otpFieldVariants, paginationControlVariants, paginationVariants, radioCardControlVariants, radioCardGroupVariants, radioCardItemVariants, searchFieldInputVariants, searchFieldVariants, selectMessageVariants, selectVariants, skeletonVariants, spinnerVariants, statusBadgeDotVariants, statusBadgeVariants, tabsBadgeVariants, tabsListVariants, tabsTriggerVariants, textareaMessageVariants, textareaVariants, toast, toastVariants, toastViewportVariants, twoTierBadgeLineVariants, twoTierBadgeVariants, usePermission };
+export { ActionFooter, type ActionFooterAction, type ActionFooterProps, type ActionFooterStatus, Alert, type AlertProps, type AlertVariant, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, type BadgeSize, type BadgeTone, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardProse, CardTitle, type CardVariant, Checkbox, type CheckboxCheckedState, type CheckboxProps, type CheckboxSize, Chip, type ChipProps, type ChipSize, type ChipTone, type ChipVariant, ChoiceGroup, type ChoiceGroupOption, type ChoiceGroupProps, type ChoiceGroupType, type ChoiceGroupVariant, ConfirmDialog, type ConfirmDialogProps, CopyButton, type CopyButtonProps, DataTable, type DataTableBulkAction, type DataTableColumn, type DataTableProps, type DataTableSort, DetailLayout, type DetailLayoutProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogRawContent, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, type EmptyStateSize, type EmptyStateTone, ErrorState, type ErrorStateProps, FileUploadZone, type FileUploadZoneProps, FilterToolbar, type FilterToolbarProps, FormField, type FormFieldProps, type FormFieldRenderProps, FormLayout, type FormLayoutProps, type FormLayoutSection, FormModal, type FormModalProps, IconButton, type IconButtonBadgeTone, type IconButtonProps, type IconButtonSize, type IconButtonVariant, InfoModal, type InfoModalProps, InlineAlert, type InlineAlertProps, Input, type InputProps, type InputSize, type InputSizeLegacy, type InputState, JbnuEmblem, type JbnuEmblemProps, Label, type LabelProps, ModeToggle, type ModeToggleOption, type ModeToggleProps, NotificationBadge, type NotificationBadgePlacement, type NotificationBadgeProps, type NotificationBadgeSize, OTPField, type OTPFieldProps, type OTPFieldSize, OlunLogo, OlunSymbol, PageHeader, type PageHeaderProps, Pagination, type PaginationProps, type PaginationSize, PermissionContext, type PermissionEvaluator, type PermissionFallback, PermissionGuard, type PermissionGuardProps, PermissionProvider, type PermissionProviderProps, type PermissionScope, type PermissionState, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, Progress, type RadioCardColumns, type RadioCardDensity, RadioCardGroup, type RadioCardGroupProps, type RadioCardOption, RadioGroup, type RadioGroupProps, type RadioOption, ScrollArea, ScrollBar, SearchField, type SearchFieldProps, type SearchFieldSize, Select, type SelectAppearance, type SelectOption, type SelectProps, type SelectSize, type SelectState, type SelectVariant, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetDrawer, type SheetDrawerProps, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Skeleton, type SkeletonProps, SkeletonRow, type SkeletonRowColumn, type SkeletonRowProps, SkeletonText, type SkeletonTextProps, Spinner, type SpinnerProps, StatusBadge, type StatusBadgeProps, type StatusBadgeStatus, Switch, type SwitchProps, type TabItem, Tabs, TabsContent, type TabsProps, Textarea, type TextareaProps, type TextareaSize, type TextareaSizeLegacy, type TextareaState, ThemeFab, type ThemeFabProps, ThemeToggle, type ToastAction, type ToastItem, type ToastOptions, ToastProvider, ToastRoot, type ToastVariant, ToastViewport, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TwoTierBadge, type TwoTierBadgeIntent, type TwoTierBadgeProps, WizardLayout, type WizardLayoutProps, type WizardStep, type WizardStepState, actionFooterStatusVariants, actionFooterVariants, alertVariants, badgeDotVariants, badgeVariants, buttonVariants, cardVariants, checkboxBoxVariants, checkboxVariants, chipCountVariants, chipVariants, choiceBodyVariants, choiceGroupVariants, choiceMarkerVariants, choiceRowVariants, cn, dataTableRowVariants, dataTableVariants, emptyStateIconVariants, emptyStateVariants, errorStateVariants, evaluatePermission, fileUploadIconVariants, fileUploadZoneVariants, formFieldControlStackClassName, formFieldDescriptionClassName, formFieldErrorClassName, formFieldLabelClassName, formFieldRequiredClassName, formFieldVariants, getToastDuration, iconButtonBadgeVariants, iconButtonVariants, inlineAlertVariants, inputMessageVariants, inputVariants, limitToasts, modeToggleItemVariants, modeToggleVariants, notificationBadgeVariants, otpCellVariants, otpFieldGroupVariants, otpFieldMessageVariants, otpFieldVariants, paginationControlVariants, paginationVariants, radioCardControlVariants, radioCardGroupVariants, radioCardItemVariants, searchFieldInputVariants, searchFieldVariants, selectMessageVariants, selectVariants, skeletonVariants, spinnerVariants, statusBadgeDotVariants, statusBadgeVariants, tabsBadgeVariants, tabsListVariants, tabsTriggerVariants, textareaMessageVariants, textareaVariants, toast, toastVariants, toastViewportVariants, twoTierBadgeLineVariants, twoTierBadgeVariants, usePermission };