feat(design-system): expand the foundational UI component library

design-system/apps/design-lab/src/i18n/componentMetadata.ts

@@ -8,10 +8,18 @@ const categoryKeys: Readonly<Record<string, MessageKey>> = {
   feedback: "meta.category.feedback",
   form: "meta.category.form",
   navigation: "meta.category.navigation",
+  primitive: "meta.category.primitive",
 };
 
 const descriptionKeys: Readonly<Record<string, MessageKey>> = {
+  ActionItem: "component.ActionItem.description",
   Button: "component.Button.description",
+  Field: "component.Field.description",
+  IconButton: "component.IconButton.description",
+  Input: "component.Input.description",
+  KeyHint: "component.KeyHint.description",
+  PageHeader: "component.PageHeader.description",
+  SearchField: "component.SearchField.description",
   Switch: "component.Switch.description",
   TabGroup: "component.TabGroup.description",
 };

design-system/apps/design-lab/src/i18n/messages.ts

@@ -47,8 +47,16 @@ export const enUSMessages = {
   "meta.category.form": "Form",
   "meta.category.feedback": "Feedback",
   "meta.category.navigation": "Navigation",
+  "meta.category.primitive": "Primitive",
   "meta.category.other": "Component",
-  "component.Button.description": "A compact neutral action with outline and filled presentation variants.",
+  "component.ActionItem.description": "A native button row with independent leading, shortcut, and sibling action areas.",
+  "component.Button.description": "A compact action with outline, filled, primary, and text presentation variants.",
+  "component.Field.description": "Associates a label, optional description, and required state with one form control.",
+  "component.IconButton.description": "A labeled icon-only action with quiet, filled, and primary presentation variants.",
+  "component.Input.description": "A native text field with independent leading and trailing content slots.",
+  "component.KeyHint.description": "A semantic keyboard hint with optional decorative icon content.",
+  "component.PageHeader.description": "A title composition with independent semantic level, visual size, description, action, and alignment.",
+  "component.SearchField.description": "A search input with optional leading icon, shortcut hint, and Enter submission.",
   "component.Switch.description": "Toggles a single setting between on and off with native checkbox semantics.",
   "component.TabGroup.description": "A compact single-selection tab list with optional leading icons, end actions, and automatic keyboard activation.",
   "overview.intro": "A modern design system for building consistent, accessible, and delightful BitFun products.",
@@ -67,7 +75,7 @@ export const enUSMessages = {
   "gettingStarted.stepThemeTitle": "Establish the theme boundary",
   "gettingStarted.stepThemeDescription": "Use ThemeRoot to select scheme, contrast, density, and narrow token overrides for a specimen or surface.",
   "gettingStarted.stepComponentTitle": "Choose a registered component",
-  "gettingStarted.stepComponentDescription": "Start with Button, Switch, or TabGroup—the components currently exported and documented by @bitfun/ui.",
+  "gettingStarted.stepComponentDescription": "Start with the registered action, form, and navigation components currently exported and documented by @bitfun/ui.",
   "gettingStarted.workspaceKicker": "Workspace setup",
   "gettingStarted.workspaceTitle": "One import path, explicit ownership.",
   "gettingStarted.workspaceDescription": "The component package owns behavior and accessibility. Tokens own stable names. The BitFun theme supplies replaceable values.",
@@ -102,9 +110,21 @@ export const enUSMessages = {
   "resources.boundaryTitle": "Tokens → theme → components → Design Lab",
   "resources.boundaryDescription": "Design Lab is an authoring and inspection surface. Public packages remain independent from its routes, state, and locale catalog.",
   "components.preview.primary": "Primary",
+  "components.preview.assistant": "AI Assistant",
+  "components.preview.add": "Add",
+  "components.preview.more": "More actions",
+  "components.preview.appearance": "Appearance",
+  "components.preview.appearanceDescription": "Interface language and visual appearance",
+  "components.preview.close": "Close",
   "components.preview.button": "Button",
+  "components.preview.listView": "Show list view",
+  "components.preview.inputLabel": "Project name",
+  "components.preview.inputPlaceholder": "Enter project name",
+  "components.preview.searchLabel": "Search",
+  "components.preview.searchPlaceholder": "Search",
   "components.preview.session": "Session",
   "components.preview.notifications": "Notifications",
+  "components.preview.fieldDescription": "Choose whether notifications are enabled.",
   "components.preview.welcome": "Welcome",
   "components.preview.settings": "Settings",
   "components.preview.tabGroupLabel": "Workspace views",
@@ -142,29 +162,40 @@ export const enUSMessages = {
   "detail.variant": "Variant",
   "detail.size": "Size",
   "detail.state": "State",
+  "detail.orientation": "Orientation",
+  "detail.alignment": "Alignment",
   "detail.disabled": "Disabled",
   "detail.loading": "Loading",
   "detail.icon": "Icon",
   "detail.iconPosition": "Icon position",
   "detail.option.outline": "Outline",
   "detail.option.fill": "Filled",
+  "detail.option.primary": "Primary",
+  "detail.option.quiet": "Quiet",
+  "detail.option.text": "Text",
   "detail.option.sm": "Small",
+  "detail.option.start": "Start",
   "detail.option.md": "Medium",
   "detail.option.lg": "Large",
   "detail.option.default": "Default",
   "detail.option.hover": "Hover",
+  "detail.option.horizontal": "Horizontal",
+  "detail.option.invalid": "Invalid",
   "detail.option.active": "Active",
   "detail.option.focus-visible": "Focus visible",
   "detail.option.disabled": "Disabled",
+  "detail.option.display": "Display",
   "detail.option.loading": "Loading",
   "detail.option.none": "None",
   "detail.option.chevron": "Chevron",
+  "detail.option.center": "Center",
   "detail.option.left": "Left",
   "detail.option.right": "Right",
   "detail.option.off": "Off",
   "detail.option.on": "On",
   "detail.option.selected": "Selected",
   "detail.option.unselected": "Unselected",
+  "detail.option.vertical": "Vertical",
   "detail.copy": "Copy",
   "detail.copied": "Copied",
   "detail.copyUnavailable": "Unavailable",
@@ -400,8 +431,16 @@ export const zhCNMessages = {
   "meta.category.form": "表单",
   "meta.category.feedback": "反馈",
   "meta.category.navigation": "导航",
+  "meta.category.primitive": "基础组件",
   "meta.category.other": "组件",
-  "component.Button.description": "紧凑的中性操作组件，支持描边和填充两种呈现方式。",
+  "component.ActionItem.description": "使用原生按钮语义，并拆分前置、快捷键与同级尾部操作区域的行项目。",
+  "component.Button.description": "紧凑的操作组件，支持描边、填充、主要和文字呈现方式。",
+  "component.Field.description": "将标签、可选说明和必填状态与单个表单控件关联。",
+  "component.IconButton.description": "带无障碍标签的纯图标操作组件，支持安静、填充和主要呈现方式。",
+  "component.Input.description": "使用原生输入语义，并提供独立前置与后置内容槽的文本字段。",
+  "component.KeyHint.description": "使用键盘提示语义，并支持可选装饰图标的基础组件。",
+  "component.PageHeader.description": "标题语义层级、视觉大小、说明、操作区与对齐方式彼此独立的标题组合。",
+  "component.SearchField.description": "支持可选前置图标、快捷键提示和回车提交的搜索输入。",
   "component.Switch.description": "通过原生复选框语义在开启与关闭之间切换单项设置。",
   "component.TabGroup.description": "紧凑的单选标签组，支持前置图标、尾部操作与方向键自动切换。",
   "overview.intro": "用于构建一致、易用且令人愉悦的 BitFun 产品的现代设计系统。",
@@ -420,7 +459,7 @@ export const zhCNMessages = {
   "gettingStarted.stepThemeTitle": "建立主题边界",
   "gettingStarted.stepThemeDescription": "使用 ThemeRoot 为样例或产品表面选择模式、对比度、密度与小范围 Token 覆盖。",
   "gettingStarted.stepComponentTitle": "选择已注册组件",
-  "gettingStarted.stepComponentDescription": "从 Button、Switch 或 TabGroup 开始——它们是 @bitfun/ui 当前真正导出并记录的组件。",
+  "gettingStarted.stepComponentDescription": "从 @bitfun/ui 当前已注册并记录的操作、表单和导航组件开始。",
   "gettingStarted.workspaceKicker": "工作区配置",
   "gettingStarted.workspaceTitle": "一个导入入口，清晰的所有权。",
   "gettingStarted.workspaceDescription": "组件包负责行为与无障碍，Token 负责稳定命名，BitFun 主题提供可替换的具体值。",
@@ -455,9 +494,21 @@ export const zhCNMessages = {
   "resources.boundaryTitle": "Token → 主题 → 组件 → Design Lab",
   "resources.boundaryDescription": "Design Lab 是创作与检查界面，公共包继续与它的路由、状态和语言目录保持独立。",
   "components.preview.primary": "主要操作",
+  "components.preview.assistant": "AI 助手",
+  "components.preview.add": "添加",
+  "components.preview.more": "更多操作",
+  "components.preview.appearance": "外观",
+  "components.preview.appearanceDescription": "界面语言和视觉外观",
+  "components.preview.close": "关闭",
   "components.preview.button": "Button",
+  "components.preview.listView": "显示列表视图",
+  "components.preview.inputLabel": "项目名称",
+  "components.preview.inputPlaceholder": "输入项目名称",
+  "components.preview.searchLabel": "搜索",
+  "components.preview.searchPlaceholder": "搜索",
   "components.preview.session": "会话",
   "components.preview.notifications": "通知",
+  "components.preview.fieldDescription": "选择是否启用通知。",
   "components.preview.welcome": "欢迎",
   "components.preview.settings": "设置",
   "components.preview.tabGroupLabel": "工作区视图",
@@ -495,29 +546,40 @@ export const zhCNMessages = {
   "detail.variant": "变体",
   "detail.size": "尺寸",
   "detail.state": "状态",
+  "detail.orientation": "排列方向",
+  "detail.alignment": "对齐方式",
   "detail.disabled": "禁用",
   "detail.loading": "加载中",
   "detail.icon": "图标",
   "detail.iconPosition": "图标位置",
   "detail.option.outline": "描边",
   "detail.option.fill": "填充",
+  "detail.option.primary": "主要",
+  "detail.option.quiet": "安静",
+  "detail.option.text": "文字",
   "detail.option.sm": "小",
+  "detail.option.start": "起始",
   "detail.option.md": "中",
   "detail.option.lg": "大",
   "detail.option.default": "默认",
   "detail.option.hover": "悬停",
+  "detail.option.horizontal": "横向",
+  "detail.option.invalid": "无效",
   "detail.option.active": "活跃",
   "detail.option.focus-visible": "焦点可见",
   "detail.option.disabled": "禁用",
+  "detail.option.display": "展示",
   "detail.option.loading": "加载中",
   "detail.option.none": "无",
   "detail.option.chevron": "箭头",
+  "detail.option.center": "居中",
   "detail.option.left": "左侧",
   "detail.option.right": "右侧",
   "detail.option.off": "关闭",
   "detail.option.on": "开启",
   "detail.option.selected": "选中",
   "detail.option.unselected": "未选中",
+  "detail.option.vertical": "纵向",
   "detail.copy": "复制",
   "detail.copied": "已复制",
   "detail.copyUnavailable": "无法复制",
@@ -750,8 +812,13 @@ export const zhTWMessages = {
   "meta.category.form": "表單",
   "meta.category.feedback": "回饋",
   "meta.category.navigation": "導覽",
+  "meta.category.primitive": "基礎元件",
   "meta.category.other": "元件",
+  "component.ActionItem.description": "使用原生按鈕語意，並拆分前置、快捷鍵與同級尾端操作區域的列項目。",
   "component.Button.description": "緊湊的中性操作元件，支援描邊和填滿兩種呈現方式。",
+  "component.Field.description": "將標籤、可選說明和必填狀態與單一表單控制項關聯。",
+  "component.KeyHint.description": "使用鍵盤提示語意，並支援可選裝飾圖示的基礎元件。",
+  "component.PageHeader.description": "標題語意層級、視覺大小、說明、操作區與對齊方式彼此獨立的標題組合。",
   "component.Switch.description": "以原生核取方塊語意在開啟與關閉之間切換單一設定。",
   "component.TabGroup.description": "緊湊的單選標籤群組，支援前置圖示、尾端操作與方向鍵自動切換。",
   "overview.intro": "用於建構一致、易用且令人愉悅的 BitFun 產品的現代設計系統。",
@@ -770,7 +837,7 @@ export const zhTWMessages = {
   "gettingStarted.stepThemeTitle": "建立主題邊界",
   "gettingStarted.stepThemeDescription": "使用 ThemeRoot 為範例或產品表面選擇模式、對比度、密度與小範圍 Token 覆寫。",
   "gettingStarted.stepComponentTitle": "選擇已註冊元件",
-  "gettingStarted.stepComponentDescription": "從 Button、Switch 或 TabGroup 開始——它們是 @bitfun/ui 目前真正匯出並記錄的元件。",
+  "gettingStarted.stepComponentDescription": "從 @bitfun/ui 目前已註冊並記錄的操作、表單與導覽元件開始。",
   "gettingStarted.workspaceKicker": "工作區設定",
   "gettingStarted.workspaceTitle": "一個匯入入口，清楚的所有權。",
   "gettingStarted.workspaceDescription": "元件套件負責行為與無障礙，Token 負責穩定命名，BitFun 主題提供可替換的具體值。",
@@ -805,9 +872,16 @@ export const zhTWMessages = {
   "resources.boundaryTitle": "Token → 主題 → 元件 → Design Lab",
   "resources.boundaryDescription": "Design Lab 是創作與檢查介面，公共套件繼續與它的路由、狀態和語言目錄保持獨立。",
   "components.preview.primary": "主要操作",
+  "components.preview.assistant": "AI 助手",
+  "components.preview.add": "新增",
+  "components.preview.more": "更多操作",
+  "components.preview.appearance": "外觀",
+  "components.preview.appearanceDescription": "介面語言和視覺外觀",
+  "components.preview.close": "關閉",
   "components.preview.button": "Button",
   "components.preview.session": "工作階段",
   "components.preview.notifications": "通知",
+  "components.preview.fieldDescription": "選擇是否啟用通知。",
   "components.preview.welcome": "歡迎",
   "components.preview.settings": "設定",
   "components.preview.tabGroupLabel": "工作區檢視",
@@ -843,29 +917,36 @@ export const zhTWMessages = {
   "detail.variant": "變體",
   "detail.size": "尺寸",
   "detail.state": "狀態",
+  "detail.orientation": "排列方向",
+  "detail.alignment": "對齊方式",
   "detail.disabled": "停用",
   "detail.loading": "載入中",
   "detail.icon": "圖示",
   "detail.iconPosition": "圖示位置",
   "detail.option.outline": "描邊",
   "detail.option.fill": "填滿",
   "detail.option.sm": "小",
+  "detail.option.start": "起始",
   "detail.option.md": "中",
   "detail.option.lg": "大",
   "detail.option.default": "預設",
   "detail.option.hover": "懸停",
+  "detail.option.horizontal": "橫向",
   "detail.option.active": "活躍",
   "detail.option.focus-visible": "焦點可見",
   "detail.option.disabled": "停用",
+  "detail.option.display": "展示",
   "detail.option.loading": "載入中",
   "detail.option.none": "無",
   "detail.option.chevron": "箭頭",
+  "detail.option.center": "置中",
   "detail.option.left": "左側",
   "detail.option.right": "右側",
   "detail.option.off": "關閉",
   "detail.option.on": "開啟",
   "detail.option.selected": "已選取",
   "detail.option.unselected": "未選取",
+  "detail.option.vertical": "縱向",
   "detail.copy": "複製",
   "detail.copied": "已複製",
   "detail.copyUnavailable": "無法複製",