@designbasekorea/ui-contracts 0.1.2

package/dist/components.js

@@ -0,0 +1,435 @@
+/**
+ * 컴포넌트별 API 계약.
+ *
+ * 웹(@designbasekorea/ui-wc)과 React Native(@designbasekorea/ui-native)가
+ * 공유하는 컴포넌트의 variant/size/type 값은 전부 여기서 나온다.
+ * 한쪽에만 있는 컴포넌트(db-code-block, db-animation-background 등)는
+ * 여기에 넣지 않는다 — 공유하지 않는 것을 계약에 넣으면 계약이 죽는다.
+ *
+ * 값을 바꾸면 양쪽 구현이 동시에 타입 에러를 낸다. 그게 이 파일의 목적이다.
+ */
+import { FEEDBACK_TONES, RADIUS_SCALE, SIZE_SML, SIZE_XS_2XL, SIZE_XS_XL, } from './primitives.js';
+// ─────────────────────────────────────────────────────────────
+// Button
+// ─────────────────────────────────────────────────────────────
+export const BUTTON_VARIANTS = [
+    'primary',
+    'secondary',
+    'tertiary',
+    'destructive',
+    'ghost',
+    'accent',
+];
+/**
+ * 구 이름 → 현 이름. 버튼은 *동작*을 나타내므로 `destructive` 가 맞고,
+ * badge/chip/tooltip 등 *상태* 축은 `danger` 를 그대로 쓴다.
+ *
+ * 이미 배포된 `variant="danger"` 를 깨지 않기 위해 별칭을 남긴다.
+ * `coerceWithAliases` 가 이 표를 거쳐 정본 값으로 접는다.
+ */
+export const BUTTON_VARIANT_ALIASES = {
+    danger: 'destructive',
+};
+export const BUTTON_SIZES = SIZE_SML;
+export const BUTTON_RADII = RADIUS_SCALE;
+/** accent variant 에서만 의미가 있다 */
+/**
+ * accent 버튼의 표현 방식.
+ *
+ * `primary` 가 먹색이 되면서 accent 가 브랜드 색을 쓰는 일상적인 버튼이 됐다.
+ * 그래서 기본은 `solid` 이고, 나머지는 의도적으로 고르는 장식이다.
+ * `prism` 은 테마의 프리즘 축(`--db-prism-*`)을 따르므로 프리셋을 바꾸면 함께 바뀐다.
+ */
+export const BUTTON_ACCENT_STYLES = ['solid', 'gradient', 'backlight', 'outline', 'prism'];
+// ─────────────────────────────────────────────────────────────
+// Input
+// ─────────────────────────────────────────────────────────────
+export const INPUT_SIZES = SIZE_SML;
+/**
+ * 웹의 <input type> 에 대응한다. RN 에는 type 개념이 없고 keyboardType /
+ * secureTextEntry / autoComplete 조합으로 매핑되므로, RN 구현체는 이 값을
+ * 받아 내부적으로 변환한다. 값 집합 자체는 공유해야 API 가 통일된다.
+ */
+export const INPUT_TYPES = [
+    'text',
+    'email',
+    'password',
+    'url',
+    'search',
+    'tel',
+    'number',
+];
+// ─────────────────────────────────────────────────────────────
+// Card
+// ─────────────────────────────────────────────────────────────
+/**
+ * 웹 기준으로 확정. RN 에 있던 elevated/outlined/filled 는 제거한다.
+ * (웹 db-card.scss 가 default/flat 만 구현하고 있고, 그림자·테두리 변형은
+ *  현재 hoverable/clickable 같은 별도 modifier 로 처리된다)
+ */
+export const CARD_VARIANTS = ['default', 'flat'];
+export const CARD_SIZES = SIZE_SML;
+// ─────────────────────────────────────────────────────────────
+// Badge
+// ─────────────────────────────────────────────────────────────
+export const BADGE_VARIANTS = [
+    'primary',
+    'secondary',
+    'info',
+    'success',
+    'warning',
+    'danger',
+];
+export const BADGE_SIZES = SIZE_SML;
+/**
+ * 표시 형태. 웹은 이 축을 `style` 이라고 불렀지만 `type` 으로 통일한다.
+ * (`style` 은 RN 에서 사실상 예약어이고, 나머지 컴포넌트도 `type` 을 쓴다)
+ */
+export const BADGE_TYPES = ['dot', 'number', 'text', 'outlined'];
+// ─────────────────────────────────────────────────────────────
+// Avatar
+// ─────────────────────────────────────────────────────────────
+export const AVATAR_SIZES = SIZE_XS_2XL;
+export const AVATAR_VARIANTS = [
+    'default',
+    'primary',
+    'success',
+    'warning',
+    'danger',
+    'info',
+];
+export const AVATAR_STATUSES = ['online', 'offline', 'away', 'busy'];
+// ─────────────────────────────────────────────────────────────
+// Chip
+// ─────────────────────────────────────────────────────────────
+/**
+ * `outlined` 는 여기 없다. 색상 축(variant)과 테두리 축(outlined)이 섞여 있던 것을
+ * 분리했다 — outlined 는 별도 boolean prop 이며, 모든 색상과 조합 가능하다.
+ */
+export const CHIP_VARIANTS = [
+    'default',
+    'primary',
+    'success',
+    'warning',
+    'danger',
+    'info',
+    'neutral',
+];
+export const CHIP_SIZES = SIZE_SML;
+// ─────────────────────────────────────────────────────────────
+// Divider
+// ─────────────────────────────────────────────────────────────
+export const DIVIDER_COLORS = [
+    'primary',
+    'secondary',
+    'success',
+    'warning',
+    'danger',
+    'muted',
+];
+export const DIVIDER_ORIENTATIONS = ['horizontal', 'vertical'];
+// ─────────────────────────────────────────────────────────────
+// Spinner
+// ─────────────────────────────────────────────────────────────
+export const SPINNER_SIZES = SIZE_XS_XL;
+/**
+ * RN 은 ActivityIndicator 가 circular 만 제공하므로 나머지는 직접 그려야 한다.
+ * 미구현 타입은 circular 로 폴백하되, 계약에서 빼지는 않는다.
+ */
+export const SPINNER_TYPES = ['circular', 'dots', 'bars', 'pulse', 'ripple'];
+// ─────────────────────────────────────────────────────────────
+// Toggle / Checkbox / Radio
+// ─────────────────────────────────────────────────────────────
+export const TOGGLE_SIZES = SIZE_SML;
+/** 선택 상태의 시각적 톤. neutral 은 브랜드 컬러 없이 배경 레이어로 선택을 표현한다. */
+export const TOGGLE_VARIANTS = ['default', 'neutral'];
+export const CHECKBOX_SIZES = SIZE_SML;
+export const RADIO_SIZES = SIZE_SML;
+// ─────────────────────────────────────────────────────────────
+// Alert / Toast
+// ─────────────────────────────────────────────────────────────
+/** `error` 아님 — danger 로 통일했다. FEEDBACK_TONES 참고. */
+export const ALERT_VARIANTS = ['default', ...FEEDBACK_TONES];
+export const ALERT_SIZES = SIZE_SML;
+/**
+ * 웹은 이 축을 `status` attribute 로 불렀지만 `variant` 로 통일한다.
+ * 나머지 컴포넌트가 전부 variant 를 쓰는데 Toast 만 달랐다.
+ */
+export const TOAST_VARIANTS = ['default', ...FEEDBACK_TONES];
+/**
+ * 웹 `toast()` 헬퍼가 이미 배포한 값 그대로다.
+ * RN 은 화면이 좁아 좌/중앙/우 차이가 작지만, 같은 이름을 받아야 코드가 옮겨진다.
+ */
+export const TOAST_POSITIONS = [
+    'top-left',
+    'top-center',
+    'top-right',
+    'bottom-left',
+    'bottom-center',
+    'bottom-right',
+];
+// ─────────────────────────────────────────────────────────────
+// Modal / BottomSheet
+// ─────────────────────────────────────────────────────────────
+export const MODAL_SIZES = ['s', 'm', 'l', 'xl', 'full'];
+export const BOTTOM_SHEET_VARIANTS = [
+    'default',
+    'persistent',
+    'temporary',
+    'fullscreen',
+];
+export const BOTTOM_SHEET_ANIMATIONS = ['slide', 'fade', 'scale', 'none'];
+// ─────────────────────────────────────────────────────────────
+// Tabs
+// ─────────────────────────────────────────────────────────────
+export const TABS_VARIANTS = ['default', 'pills'];
+export const TABS_SIZES = SIZE_SML;
+export const TABS_ORIENTATIONS = ['horizontal', 'vertical'];
+// ─────────────────────────────────────────────────────────────
+// Select
+// ─────────────────────────────────────────────────────────────
+export const SELECT_SIZES = SIZE_SML;
+/** 드롭다운이 트리거 위/아래 중 어디에 펼쳐지는지 */
+export const SELECT_POSITIONS = ['bottom', 'top'];
+// ─────────────────────────────────────────────────────────────
+// Navbar / BottomNavigation
+// ─────────────────────────────────────────────────────────────
+export const NAVBAR_VARIANTS = ['default', 'transparent'];
+export const NAVBAR_SIZES = SIZE_SML;
+/**
+ * RN 에는 CSS position 개념이 없다. sticky/fixed 는 네이티브에서 동일하게
+ * "스크롤과 무관하게 상단 고정" 으로 해석되고, static 만 스크롤을 따라간다.
+ */
+export const NAVBAR_POSITIONS = ['fixed', 'sticky', 'static'];
+export const NAVIGATION_RAIL_SIZES = SIZE_SML;
+export const NAVIGATION_RAIL_LABEL_DISPLAYS = ['tooltip', 'always'];
+export const BOTTOM_NAV_SIZES = SIZE_SML;
+export const BOTTOM_NAV_BACKGROUNDS = ['default', 'glass', 'transparent'];
+// ─────────────────────────────────────────────────────────────
+// SearchBar
+// ─────────────────────────────────────────────────────────────
+export const SEARCH_BAR_SIZES = SIZE_SML;
+export const SEARCH_BAR_RECENT_LAYOUTS = ['vertical', 'horizontal'];
+// ─────────────────────────────────────────────────────────────
+// Skeleton
+// ─────────────────────────────────────────────────────────────
+export const SKELETON_VARIANTS = [
+    'text',
+    'circular',
+    'rectangular',
+    'rounded',
+];
+export const SKELETON_SIZES = SIZE_XS_XL;
+// ─────────────────────────────────────────────────────────────
+// ProgressBar
+// ─────────────────────────────────────────────────────────────
+export const PROGRESS_BAR_VARIANTS = ['default', 'primary', ...FEEDBACK_TONES];
+export const PROGRESS_BAR_SIZES = SIZE_SML;
+export const PROGRESS_BAR_STYLES = ['solid', 'striped', 'animated'];
+// ─────────────────────────────────────────────────────────────
+// 컴포넌트 로컬 enum 이관분
+//
+// 아래 상수들은 원래 각 ui-wc 컴포넌트 파일이 직접 선언하던 것이다.
+// 같은 값을 두 곳에서 선언하면 한쪽에 값이 추가될 때 다른 쪽이 조용히 뒤처지므로
+// 정본을 여기로 옮겼다. ui-native 는 필요한 것부터 이 상수를 채택한다.
+// ─────────────────────────────────────────────────────────────
+// db-accordion
+export const ACCORDION_VARIANTS = ['default', 'bordered', 'separated', 'contained'];
+export const ACCORDION_SIZES = SIZE_SML;
+// db-banner
+export const BANNER_VARIANTS = ['primary', 'secondary', 'tertiary', 'outline', 'image'];
+export const BANNER_SIZES = SIZE_SML;
+// db-breadcrumbs
+export const BREADCRUMBS_VARIANTS = ['default', 'contained', 'underlined'];
+export const BREADCRUMBS_SIZES = SIZE_SML;
+// db-empty-state
+export const EMPTY_STATE_VARIANTS = ['no-data', 'no-results', 'no-access', 'error', 'onboarding'];
+export const EMPTY_STATE_SIZES = SIZE_SML;
+// db-logo
+export const LOGO_VARIANTS = ['default', 'original', 'primary', 'secondary', 'light', 'dark', 'white'];
+export const LOGO_SIZES = ['xs', 's', 'm', 'l', 'xl'];
+// db-menu-item
+export const MENU_ITEM_VARIANTS = ['default', 'primary', 'success', 'warning', 'danger', 'info'];
+export const MENU_ITEM_SIZES = SIZE_SML;
+// db-pagination
+export const PAGINATION_VARIANTS = ['default', 'outlined', 'minimal'];
+export const PAGINATION_SIZES = SIZE_SML;
+// db-kanban
+export const KANBAN_SIZES = SIZE_SML;
+// db-activity-heatmap
+export const ACTIVITY_HEATMAP_SIZES = SIZE_SML;
+export const ACTIVITY_HEATMAP_COLOR_SCHEMES = ['green', 'primary'];
+// db-chat-message
+export const CHAT_MESSAGE_ROLES = ['user', 'assistant', 'system'];
+// db-ai-glow
+export const AI_GLOW_VARIANTS = ['aurora', 'brand'];
+export const AI_GLOW_STATES = ['thinking', 'working', 'listening'];
+export const AI_GLOW_SIZES = SIZE_SML;
+// db-chat-orb
+export const CHAT_ORB_SIZES = SIZE_XS_XL;
+export const CHAT_ORB_VARIANTS = ['aurora', 'ocean', 'emerald', 'violet', 'mono'];
+export const CHAT_ORB_STATES = ['idle', 'thinking', 'listening'];
+export const CHAT_ORB_THEMES = ['auto', 'light', 'dark'];
+// db-chat-welcome
+export const CHAT_WELCOME_ALIGNS = ['center', 'left'];
+// db-chat-widget
+export const CHAT_WIDGET_VIEWS = ['home', 'messages', 'conversation', 'help', 'article'];
+export const CHAT_WIDGET_POSITIONS = ['bottom-right', 'bottom-left'];
+// db-container
+export const CONTAINER_SIZES = ['s', 'm', 'l', 'xl', 'full'];
+export const CONTAINER_PADDINGS = ['none', 's', 'm', 'l', 'xl'];
+// db-date-picker
+export const DATE_PICKER_SIZES = SIZE_SML;
+export const DATE_PICKER_VARIANTS = ['default', 'outlined', 'filled'];
+// db-download-progress
+export const DOWNLOAD_PROGRESS_STATUSES = ['downloading', 'paused', 'error', 'complete'];
+export const DOWNLOAD_PROGRESS_POSITIONS = ['bottom-right', 'bottom-left', 'bottom-center', 'top-right', 'top-left', 'top-center'];
+// db-drawer
+export const DRAWER_POSITIONS = ['left', 'right', 'top', 'bottom'];
+export const DRAWER_SIZES = ['s', 'm', 'l', 'xl', 'full'];
+// db-dropdown
+export const DROPDOWN_SIZES = SIZE_SML;
+export const DROPDOWN_PLACEMENTS = ['bottom-left', 'bottom-right', 'top-left', 'top-right'];
+export const DROPDOWN_TRIGGER_VARIANTS = ['primary', 'secondary', 'tertiary', 'danger', 'ghost'];
+// db-dropzone
+export const DROPZONE_SIZES = SIZE_SML;
+export const DROPZONE_VARIANTS = ['default', 'outlined', 'filled'];
+// db-email-verify
+export const EMAIL_VERIFY_SIZES = SIZE_SML;
+// db-file-uploader
+export const FILE_UPLOADER_SIZES = SIZE_SML;
+export const FILE_UPLOADER_VARIANTS = ['default', 'outlined', 'filled'];
+// db-floating-action-button
+export const FLOATING_ACTION_BUTTON_SIZES = SIZE_SML;
+export const FLOATING_ACTION_BUTTON_VARIANTS = ['primary', 'secondary', 'tertiary'];
+// db-footer
+export const FOOTER_VARIANTS = ['default', 'compact', 'minimal'];
+export const FOOTER_SIZES = SIZE_SML;
+// db-indicator
+export const INDICATOR_TYPES = ['dots', 'numbers', 'line', 'dot-line', 'slide', 'fill', 'combined'];
+export const INDICATOR_SIZES = SIZE_SML;
+export const INDICATOR_DIRECTIONS = ['horizontal', 'vertical'];
+// db-lightbox
+export const LIGHTBOX_SIZES = ['s', 'm', 'l', 'xl'];
+// db-otp-input
+export const OTP_INPUT_SIZES = SIZE_SML;
+// db-page-header
+export const PAGE_HEADER_VARIANTS = ['default', 'minimal'];
+export const PAGE_HEADER_ALIGNS = ['center', 'left'];
+// db-phone-verify
+export const PHONE_VERIFY_SIZES = SIZE_SML;
+// db-popover
+export const POPOVER_PLACEMENTS = ['top', 'bottom', 'left', 'right', 'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-start', 'left-end', 'right-start', 'right-end'];
+export const POPOVER_SIZES = SIZE_SML;
+export const POPOVER_VARIANTS = ['default', 'primary', 'success', 'warning', 'danger', 'info'];
+export const POPOVER_TRIGGERS = ['click', 'hover', 'focus', 'manual'];
+// db-progress
+export const PROGRESS_SIZES = SIZE_SML;
+export const PROGRESS_VARIANTS = ['default', 'success', 'warning', 'danger'];
+export const PROGRESS_CIRCULAR_STYLES = ['default', 'minimal'];
+// db-section
+export const SECTION_SIZES = SIZE_SML;
+// db-sidebar
+export const SIDEBAR_SIZES = SIZE_SML;
+export const SIDEBAR_THEMES = ['default', 'dark', 'light'];
+export const SIDEBAR_VARIANTS = ['default', 'wrapper'];
+export const SIDEBAR_POSITIONS = ['left', 'right'];
+export const SIDEBAR_PANEL_MODES = ['auto', 'adjacent', 'replace'];
+export const SIDEBAR_CUSTOM_NAV_SLOTS = ['nav-top', 'nav', 'nav-bottom'];
+// db-stat
+export const STAT_SIZES = SIZE_SML;
+export const STAT_VARIANTS = ['default', 'minimal', 'card', 'colored', 'iconBox'];
+export const STAT_LAYOUTS = ['horizontal', 'vertical', 'reverse'];
+export const STAT_COLORS = ['primary', 'secondary', 'success', 'warning', 'error', 'info', 'custom'];
+// db-table
+export const TABLE_SIZES = SIZE_SML;
+export const TABLE_VARIANTS = ['default', 'striped', 'hoverable'];
+// db-testimonial
+export const TESTIMONIAL_VARIANTS = ['list', 'card', 'logo', 'image', 'text'];
+// db-textarea
+export const TEXTAREA_SIZES = SIZE_SML;
+// db-time-picker
+export const TIME_PICKER_SIZES = SIZE_SML;
+export const TIME_PICKER_FORMATS = ['12h', '24h', '12h-with-seconds', '24h-with-seconds'];
+/** TimePicker 드롭다운의 기준점. auto는 뷰포트 공간에 맞춰 상·하/좌·우를 계산한다. */
+export const TIME_PICKER_DROPDOWN_POSITIONS = [
+    'auto',
+    'bottom-start',
+    'bottom-end',
+    'top-start',
+    'top-end',
+];
+// db-tooltip
+export const TOOLTIP_POSITIONS = ['top', 'bottom', 'left', 'right', 'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-start', 'left-end', 'right-start', 'right-end'];
+export const TOOLTIP_SIZES = SIZE_SML;
+export const TOOLTIP_VARIANTS = ['default', 'primary', 'success', 'warning', 'danger', 'info'];
+// db-top-banner
+export const TOP_BANNER_VARIANTS = ['primary', 'white', 'dark'];
+// db-two-factor
+export const TWO_FACTOR_SIZES = SIZE_SML;
+// ─────────────────────────────────────────────────────────────
+// ui-wc 전용 컴포넌트 enum
+//
+// 웹 커스텀 엘리먼트도 attribute 를 통해 임의의 문자열을 받기 때문에,
+// 공개 허용값과 런타임 fallback 을 같은 계약으로 유지한다.
+// ─────────────────────────────────────────────────────────────
+export const AD_BANNER_VARIANTS = ['primary', 'secondary', 'success', 'warning', 'error'];
+export const AD_BANNER_SIZES = SIZE_SML;
+export const ANIMATION_TEXT_SIZES = ['xs', 's', 'm', 'l', 'xl', '2xl', '3xl'];
+export const ANIMATION_TEXT_ALIGNS = ['left', 'center', 'right', 'justify'];
+export const APP_BADGE_SIZES = SIZE_SML;
+export const AUDIO_PLAYER_VARIANTS = ['default', 'minimal', 'compact', 'full'];
+export const AUDIO_PLAYER_SIZES = ['s', 'm', 'l', 'xl'];
+export const CAROUSEL_VARIANTS = ['default', 'cards', 'gallery', 'hero', 'testimonial'];
+export const CAROUSEL_SIZES = ['s', 'm', 'l', 'xl'];
+export const COLOR_PICKER_SIZES = SIZE_SML;
+export const COLOR_PICKER_POSITIONS = ['bottom-start', 'bottom-end', 'top-start', 'top-end'];
+export const COLOR_SWATCH_SIZES = SIZE_SML;
+export const CONFIRM_VARIANTS = ['default', 'info', 'success', 'warning', 'danger'];
+export const CONFIRM_SIZES = SIZE_SML;
+export const COUNTDOWN_VARIANTS = ['default', 'compact', 'minimal'];
+export const COUNTDOWN_SIZES = SIZE_SML;
+export const GRADIENT_VARIANTS = ['default', 'animated', 'mesh'];
+export const GRADIENT_SIZES = ['s', 'm', 'l', 'xl', 'full'];
+export const GRID_BACKGROUND_SIZES = SIZE_SML;
+export const LABEL_SIZES = SIZE_SML;
+export const LIST_VARIANTS = ['default', 'minimal', 'bordered', 'card', 'navigation'];
+export const LIST_SIZES = SIZE_SML;
+export const MARKDOWN_EDITOR_VARIANTS = ['default', 'filled', 'outlined'];
+export const MARKDOWN_EDITOR_SIZES = SIZE_SML;
+export const MARQUEE_VARIANTS = ['default', 'filled', 'outlined'];
+export const MARQUEE_SIZES = SIZE_SML;
+export const PROGRESS_STEP_SIZES = SIZE_SML;
+export const RANDOM_GRADIENT_TONES = ['light', 'vivid', 'dark'];
+export const RATING_VARIANTS = ['default', 'minimal', 'card', 'inline', 'large'];
+export const RATING_SIZES = SIZE_SML;
+export const REORDER_VARIANTS = ['default', 'bordered', 'filled', 'minimal'];
+export const REORDER_SIZES = SIZE_SML;
+export const SECTION_ALIGNS = ['left', 'center', 'right'];
+export const SECTION_APP_DOWNLOAD_SIZES = SIZE_SML;
+export const SECTION_CONTACT_SIZES = SIZE_SML;
+export const SECTION_CTA_VARIANTS = ['default', 'dark', 'light', 'gradient', 'tinted'];
+export const SECTION_CTA_SIZES = SIZE_SML;
+export const SECTION_FAQ_SIZES = SIZE_SML;
+export const SECTION_FEATURE_SIZES = SIZE_SML;
+export const SECTION_FEATURE_GRID_SIZES = SIZE_SML;
+export const SECTION_HERO_VARIANTS = ['default', 'showcase', 'split', 'overlay', 'centered'];
+export const SECTION_LOGO_CLOUD_VARIANTS = ['grid', 'inline', 'minimal', 'marquee'];
+export const SECTION_LOGO_CLOUD_SIZES = SIZE_SML;
+export const SECTION_PRICING_SIZES = SIZE_SML;
+export const SECTION_STATS_SIZES = SIZE_SML;
+export const SECTION_TESTIMONIALS_VARIANTS = ['grid', 'list', 'carousel', 'cards'];
+export const SECTION_TESTIMONIALS_SIZES = SIZE_SML;
+export const SHARE_VARIANTS = ['button', 'dropdown', 'modal', 'inline'];
+export const SHARE_SIZES = SIZE_SML;
+export const SHARE_POSITIONS = ['top', 'bottom', 'left', 'right'];
+export const SIGNATURE_VARIANTS = ['dashed', 'outlined'];
+export const TIMELINE_VARIANTS = ['default', 'alternate', 'left', 'right'];
+export const TIMELINE_SIZES = SIZE_SML;
+export const TOOLBAR_VARIANTS = ['default', 'filled', 'outlined', 'ghost'];
+export const TOOLBAR_SIZES = SIZE_SML;
+export const TOOLBAR_POSITIONS = ['top', 'bottom', 'left', 'right', 'floating'];
+export const VIDEO_PLAYER_VARIANTS = ['default', 'minimal', 'theater'];
+export const VIDEO_PLAYER_SIZES = ['s', 'm', 'l', 'xl'];
+export const YOUTUBE_PLAYER_VARIANTS = ['default', 'minimal', 'theater', 'full'];
+export const YOUTUBE_PLAYER_SIZES = ['s', 'm', 'l', 'xl'];

package/dist/index.cjs

@@ -0,0 +1,33 @@
+"use strict";
+/**
+ * @designbasekorea/ui-contracts
+ *
+ * 웹(ui-wc)과 React Native(ui-native)가 공유하는 컴포넌트 API 계약.
+ *
+ * 소스는 하나도 공유하지 않는다 — 웹은 커스텀 엘리먼트 + CSS, RN 은 View/StyleSheet 라
+ * 구현을 공유할 방법이 없다. 대신 "무엇을 받아들이는가"는 공유한다.
+ * 그래야 디자이너가 말하는 variant 이름이 양쪽에서 같은 것을 가리킨다.
+ *
+ * 사용법:
+ *   웹  — `import { BUTTON_VARIANTS } from '@designbasekorea/ui-contracts'`
+ *         attribute 문자열 검증에 배열을 그대로 쓴다.
+ *   RN  — `import type { ButtonVariant } from '@designbasekorea/ui-contracts'`
+ *         prop 타입으로 쓴다.
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./primitives.cjs"), exports);
+__exportStar(require("./components.cjs"), exports);

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @designbasekorea/ui-contracts
+ *
+ * 웹(ui-wc)과 React Native(ui-native)가 공유하는 컴포넌트 API 계약.
+ *
+ * 소스는 하나도 공유하지 않는다 — 웹은 커스텀 엘리먼트 + CSS, RN 은 View/StyleSheet 라
+ * 구현을 공유할 방법이 없다. 대신 "무엇을 받아들이는가"는 공유한다.
+ * 그래야 디자이너가 말하는 variant 이름이 양쪽에서 같은 것을 가리킨다.
+ *
+ * 사용법:
+ *   웹  — `import { BUTTON_VARIANTS } from '@designbasekorea/ui-contracts'`
+ *         attribute 문자열 검증에 배열을 그대로 쓴다.
+ *   RN  — `import type { ButtonVariant } from '@designbasekorea/ui-contracts'`
+ *         prop 타입으로 쓴다.
+ */
+export * from './primitives.js';
+export * from './components.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC"}

package/dist/index.js

@@ -0,0 +1,17 @@
+/**
+ * @designbasekorea/ui-contracts
+ *
+ * 웹(ui-wc)과 React Native(ui-native)가 공유하는 컴포넌트 API 계약.
+ *
+ * 소스는 하나도 공유하지 않는다 — 웹은 커스텀 엘리먼트 + CSS, RN 은 View/StyleSheet 라
+ * 구현을 공유할 방법이 없다. 대신 "무엇을 받아들이는가"는 공유한다.
+ * 그래야 디자이너가 말하는 variant 이름이 양쪽에서 같은 것을 가리킨다.
+ *
+ * 사용법:
+ *   웹  — `import { BUTTON_VARIANTS } from '@designbasekorea/ui-contracts'`
+ *         attribute 문자열 검증에 배열을 그대로 쓴다.
+ *   RN  — `import type { ButtonVariant } from '@designbasekorea/ui-contracts'`
+ *         prop 타입으로 쓴다.
+ */
+export * from './primitives.js';
+export * from './components.js';

package/dist/primitives.cjs

@@ -0,0 +1,48 @@
+"use strict";
+/**
+ * 여러 컴포넌트가 공유하는 기본 스케일.
+ *
+ * 개별 컴포넌트가 자기만의 s/m/l 을 따로 선언하면 한쪽에서 값이 추가될 때
+ * 다른 쪽이 조용히 뒤처진다. 스케일은 여기서만 정의한다.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RADIUS_SCALE = exports.FEEDBACK_TONES = exports.SIZE_XS_2XL = exports.SIZE_XS_XL = exports.SIZE_SML = void 0;
+exports.coerceToContract = coerceToContract;
+exports.coerceWithAliases = coerceWithAliases;
+/** 표준 3단계 스케일 — 대부분의 컨트롤(Button, Input, Checkbox 등)이 사용한다 */
+exports.SIZE_SML = ['s', 'm', 'l'];
+/** 확장 5단계 스케일 — Spinner, Skeleton 등 시각 요소가 사용한다 */
+exports.SIZE_XS_XL = ['xs', 's', 'm', 'l', 'xl'];
+/** Avatar 전용 6단계 스케일 */
+exports.SIZE_XS_2XL = ['xs', 's', 'm', 'l', 'xl', '2xl'];
+/**
+ * 피드백 톤.
+ *
+ * ⚠️ `error` 가 아니라 `danger` 다. 디자인 토큰은 내부적으로 `feedback.error` 라는
+ * 키를 쓰지만, 컴포넌트 공개 API 는 danger 로 통일한다. 토큰 키와 API 이름이
+ * 다른 것은 의도된 것이며, 매핑은 각 구현체가 담당한다.
+ */
+exports.FEEDBACK_TONES = ['info', 'success', 'warning', 'danger'];
+/** 둥글기 스케일 */
+exports.RADIUS_SCALE = ['none', 's', 'm', 'l', 'pill'];
+/**
+ * 계약 위반을 런타임에 잡기 위한 헬퍼.
+ *
+ * 웹 커스텀 엘리먼트는 attribute 로 임의의 문자열을 받으므로, 계약에 없는 값이
+ * 들어오면 기본값으로 되돌린다. RN 은 타입으로 막히니 이 헬퍼가 필요 없다.
+ */
+function coerceToContract(value, allowed, fallback) {
+    return value && allowed.includes(value)
+        ? value
+        : fallback;
+}
+/**
+ * `coerceToContract` 와 같지만, 계약에서 빠진 구 이름을 별칭표로 한 번 접는다.
+ * 이름을 바꾼 뒤에도 이미 배포된 마크업이 계속 동작하게 하는 용도다.
+ */
+function coerceWithAliases(value, allowed, aliases, fallback) {
+    if (value && !allowed.includes(value) && value in aliases) {
+        return aliases[value];
+    }
+    return coerceToContract(value, allowed, fallback);
+}

package/dist/primitives.d.ts

@@ -0,0 +1,40 @@
+/**
+ * 여러 컴포넌트가 공유하는 기본 스케일.
+ *
+ * 개별 컴포넌트가 자기만의 s/m/l 을 따로 선언하면 한쪽에서 값이 추가될 때
+ * 다른 쪽이 조용히 뒤처진다. 스케일은 여기서만 정의한다.
+ */
+/** 표준 3단계 스케일 — 대부분의 컨트롤(Button, Input, Checkbox 등)이 사용한다 */
+export declare const SIZE_SML: readonly ["s", "m", "l"];
+export type SizeSML = (typeof SIZE_SML)[number];
+/** 확장 5단계 스케일 — Spinner, Skeleton 등 시각 요소가 사용한다 */
+export declare const SIZE_XS_XL: readonly ["xs", "s", "m", "l", "xl"];
+export type SizeXsXl = (typeof SIZE_XS_XL)[number];
+/** Avatar 전용 6단계 스케일 */
+export declare const SIZE_XS_2XL: readonly ["xs", "s", "m", "l", "xl", "2xl"];
+export type SizeXs2Xl = (typeof SIZE_XS_2XL)[number];
+/**
+ * 피드백 톤.
+ *
+ * ⚠️ `error` 가 아니라 `danger` 다. 디자인 토큰은 내부적으로 `feedback.error` 라는
+ * 키를 쓰지만, 컴포넌트 공개 API 는 danger 로 통일한다. 토큰 키와 API 이름이
+ * 다른 것은 의도된 것이며, 매핑은 각 구현체가 담당한다.
+ */
+export declare const FEEDBACK_TONES: readonly ["info", "success", "warning", "danger"];
+export type FeedbackTone = (typeof FEEDBACK_TONES)[number];
+/** 둥글기 스케일 */
+export declare const RADIUS_SCALE: readonly ["none", "s", "m", "l", "pill"];
+export type RadiusScale = (typeof RADIUS_SCALE)[number];
+/**
+ * 계약 위반을 런타임에 잡기 위한 헬퍼.
+ *
+ * 웹 커스텀 엘리먼트는 attribute 로 임의의 문자열을 받으므로, 계약에 없는 값이
+ * 들어오면 기본값으로 되돌린다. RN 은 타입으로 막히니 이 헬퍼가 필요 없다.
+ */
+export declare function coerceToContract<T extends readonly string[]>(value: string | null | undefined, allowed: T, fallback: T[number]): T[number];
+/**
+ * `coerceToContract` 와 같지만, 계약에서 빠진 구 이름을 별칭표로 한 번 접는다.
+ * 이름을 바꾼 뒤에도 이미 배포된 마크업이 계속 동작하게 하는 용도다.
+ */
+export declare function coerceWithAliases<T extends readonly string[]>(value: string | null | undefined, allowed: T, aliases: Readonly<Record<string, T[number]>>, fallback: T[number]): T[number];
+//# sourceMappingURL=primitives.d.ts.map

package/dist/primitives.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"primitives.d.ts","sourceRoot":"","sources":["../src/primitives.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,6DAA6D;AAC7D,eAAO,MAAM,QAAQ,0BAA2B,CAAC;AACjD,MAAM,MAAM,OAAO,GAAG,CAAC,OAAO,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC;AAEhD,mDAAmD;AACnD,eAAO,MAAM,UAAU,sCAAuC,CAAC;AAC/D,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AAEnD,wBAAwB;AACxB,eAAO,MAAM,WAAW,6CAA8C,CAAC;AACvE,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AAErD;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,mDAAoD,CAAC;AAChF,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC;AAE3D,cAAc;AACd,eAAO,MAAM,YAAY,0CAA2C,CAAC;AACrE,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAExD;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,SAAS,MAAM,EAAE,EACxD,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAChC,OAAO,EAAE,CAAC,EACV,QAAQ,EAAE,CAAC,CAAC,MAAM,CAAC,GACpB,CAAC,CAAC,MAAM,CAAC,CAIX;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,SAAS,MAAM,EAAE,EACzD,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAChC,OAAO,EAAE,CAAC,EACV,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAC5C,QAAQ,EAAE,CAAC,CAAC,MAAM,CAAC,GACpB,CAAC,CAAC,MAAM,CAAC,CAKX"}

package/dist/primitives.js

@@ -0,0 +1,43 @@
+/**
+ * 여러 컴포넌트가 공유하는 기본 스케일.
+ *
+ * 개별 컴포넌트가 자기만의 s/m/l 을 따로 선언하면 한쪽에서 값이 추가될 때
+ * 다른 쪽이 조용히 뒤처진다. 스케일은 여기서만 정의한다.
+ */
+/** 표준 3단계 스케일 — 대부분의 컨트롤(Button, Input, Checkbox 등)이 사용한다 */
+export const SIZE_SML = ['s', 'm', 'l'];
+/** 확장 5단계 스케일 — Spinner, Skeleton 등 시각 요소가 사용한다 */
+export const SIZE_XS_XL = ['xs', 's', 'm', 'l', 'xl'];
+/** Avatar 전용 6단계 스케일 */
+export const SIZE_XS_2XL = ['xs', 's', 'm', 'l', 'xl', '2xl'];
+/**
+ * 피드백 톤.
+ *
+ * ⚠️ `error` 가 아니라 `danger` 다. 디자인 토큰은 내부적으로 `feedback.error` 라는
+ * 키를 쓰지만, 컴포넌트 공개 API 는 danger 로 통일한다. 토큰 키와 API 이름이
+ * 다른 것은 의도된 것이며, 매핑은 각 구현체가 담당한다.
+ */
+export const FEEDBACK_TONES = ['info', 'success', 'warning', 'danger'];
+/** 둥글기 스케일 */
+export const RADIUS_SCALE = ['none', 's', 'm', 'l', 'pill'];
+/**
+ * 계약 위반을 런타임에 잡기 위한 헬퍼.
+ *
+ * 웹 커스텀 엘리먼트는 attribute 로 임의의 문자열을 받으므로, 계약에 없는 값이
+ * 들어오면 기본값으로 되돌린다. RN 은 타입으로 막히니 이 헬퍼가 필요 없다.
+ */
+export function coerceToContract(value, allowed, fallback) {
+    return value && allowed.includes(value)
+        ? value
+        : fallback;
+}
+/**
+ * `coerceToContract` 와 같지만, 계약에서 빠진 구 이름을 별칭표로 한 번 접는다.
+ * 이름을 바꾼 뒤에도 이미 배포된 마크업이 계속 동작하게 하는 용도다.
+ */
+export function coerceWithAliases(value, allowed, aliases, fallback) {
+    if (value && !allowed.includes(value) && value in aliases) {
+        return aliases[value];
+    }
+    return coerceToContract(value, allowed, fallback);
+}