+
+
-所有组件都支持 `className` 与 `style` 覆盖，并提供类型定义与受控交互。组件体系已逐步对齐 AntD / ElementUI 的中后台常用能力。
+## 全量组件清单
+
+### 布局 Layout
+
+Container、Row、Col、Grid、Flex、Space、Divider、SplitPane
+
+### 基础 Basic
+
+Button、Icon、Typography（Title / Text / Paragraph）
+
+### 表单 Form
+
+Input、InputNumber、AutoComplete、Select、Checkbox、Radio、Switch、DatePicker、TimePicker、Slider、Rate、Upload、Form / FormItem、Calendar、Transfer、Cascader、TreeSelect、ColorPicker、Segmented、Mentions
+
+### 反馈 Feedback
+
+Alert、Modal、Drawer、Toast / Message、Tooltip、Popover、Popconfirm、Loading、Spin、Skeleton、Notification、Tour、Watermark
+
+### 数据展示 Data Display
+
+Table、List、Card、Carousel、Tag、Badge、Avatar、Image、Pagination、Progress、Statistic、Descriptions、Empty、Result、Timeline、QRCode、ImagePreview、VirtualList
+
+### 导航 Navigation
+
+Tabs、Menu、Breadcrumb、Dropdown、Steps、Collapse、Tree、Anchor、Affix、BackTop、FloatButton
+
+---
+
+所有组件都支持 `className` 与 `style` 覆盖，并提供完整 TypeScript 类型与受控交互能力。
diff --git a/docs/components/pagination.md b/docs/components/pagination.md
new file mode 100644
index 0000000..cdc8db4
--- /dev/null
+++ b/docs/components/pagination.md
@@ -0,0 +1,23 @@
+# Pagination 分页
+
+分页组件。
+
+## 示例
+
+布局 Layout
+8 个组件
+Container / Row / Col / Grid / Flex / Space / Divider / SplitPane
+
+
+ 基础 Basic
+3 个组件
+Button / Icon / Typography
+
+
+ 表单 Form
+20 个组件
+Input / Select / Form / Upload / DatePicker / ...
+
+
+ 反馈 Feedback
+13 个组件
+Alert / Modal / Drawer / Tooltip / Notification / ...
+
+
+ 数据展示 Data Display
+18 个组件
+Table / Card / List / Timeline / QRCode / ...
+
+
+ 导航 Navigation
+11 个组件
+Tabs / Menu / Steps / Tree / Anchor / ...
+
+
+
+ )
+})
diff --git a/packages/ui/src/components/data/Image.tsx b/packages/ui/src/components/data/Image.tsx
new file mode 100644
index 0000000..affb5b5
--- /dev/null
+++ b/packages/ui/src/components/data/Image.tsx
@@ -0,0 +1,57 @@
+import { forwardRef, useState, type ImgHTMLAttributes, type ReactNode } from 'react'
+import { cn } from '../../utils/cn'
+
+export interface ImageProps extends ImgHTMLAttributes
+ {items.map((item, i) => (
+
+ {arrows && count > 1 ? (
+ <>
+
+
+
+ ) : null}
+ {dots && count > 1 ? (
+
+ {item}
+
+ ))}
+
+ {items.map((_, i) => (
+
+ ) : null}
+ setPreviewOpen(false)}
+ >
+ 
+
+ ) : null}
+
+ )
+})
diff --git a/packages/ui/src/components/data/List.tsx b/packages/ui/src/components/data/List.tsx
new file mode 100644
index 0000000..1c1245c
--- /dev/null
+++ b/packages/ui/src/components/data/List.tsx
@@ -0,0 +1,80 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'
+import { cn } from '../../utils/cn'
+
+export interface ListItem {
+ key: string | number
+ content: ReactNode
+ avatar?: ReactNode
+ title?: ReactNode
+ description?: ReactNode
+ extra?: ReactNode
+}
+
+export interface ListProps extends HTMLAttributes
+ {item.avatar ?
+ )
+
+ return (
+ {item.avatar}
: null}
+
+ {item.title ?
+ {item.extra ? {item.title}
: null}
+ {item.description ? {item.description}
: null}
+ {item.content}
+ {item.extra}
: null}
+
+ {header ?
+ )
+})
diff --git a/packages/ui/src/components/data/Table.tsx b/packages/ui/src/components/data/Table.tsx
index 0deebb0..7c7da09 100644
--- a/packages/ui/src/components/data/Table.tsx
+++ b/packages/ui/src/components/data/Table.tsx
@@ -19,6 +19,12 @@ export interface TableProps{header}
: null}
+ {loading ? (
+ Loading...
+ ) : grid ? (
+
+ {dataSource.map((item, i) => (
+
+ ) : (
+ {renderItem ? renderItem(item, i) : defaultRender(item)}
+ ))}
+ -
+ {dataSource.map((item, i) => (
+
- + {renderItem ? renderItem(item, i) : defaultRender(item)} + + ))} +
{footer}
: null}
+
{(title || searchable || columnConfigurable) && (
@@ -172,20 +192,21 @@ export const Table = forwardRef
- {processedRows.length === 0 ? (
+ {paginatedRows.length === 0 ? (
{emptyText}
) : (
- processedRows.map((record, index) => {
+ paginatedRows.map((record, index) => {
+ const rowIndex = pagination ? (pagination.current - 1) * pagination.pageSize + index : index
const key =
typeof rowKey === 'function'
- ? rowKey(record, index)
+ ? rowKey(record, rowIndex)
: rowKey
? String(record[rowKey])
- : String(index)
+ : String(rowIndex)
return (
@@ -193,7 +214,7 @@ export const Table = forwardRef
- {column.render ? column.render(value, record, index) : (value as ReactNode)}
+ {column.render ? column.render(value, record, rowIndex) : (value as ReactNode)}
)
})}
@@ -204,6 +225,29 @@ export const Table = forwardRef
+ {pagination ? (
+ {
+ type?: 'info' | 'success' | 'warning' | 'error'
+ message: ReactNode
+ description?: ReactNode
+ closable?: boolean
+ showIcon?: boolean
+ icon?: ReactNode
+ onClose?: () => void
+ banner?: boolean
+ action?: ReactNode
+}
+
+const typeIconMap: Record = {
+ info: 'ℹ️',
+ success: '✅',
+ warning: '⚠️',
+ error: '❌',
+}
+
+export const Alert = forwardRef(function Alert(
+ {
+ className,
+ type = 'info',
+ message,
+ description,
+ closable = false,
+ showIcon = true,
+ icon,
+ onClose,
+ banner = false,
+ action,
+ ...props
+ },
+ ref,
+) {
+ const [visible, setVisible] = useState(true)
+
+ if (!visible) return null
+
+ return (
+ (function Modal(
_ref,
) {
const panelRef = useRef(null)
+ const closeButtonRef = useRef(null)
+ const titleId = useId()
+ const lastActiveElementRef = useRef(null)
useEscapeKey(() => onClose?.(), open)
useClickOutside(panelRef, () => onClose?.(), open)
+ useEffect(() => {
+ if (!open) return
+
+ lastActiveElementRef.current = document.activeElement as HTMLElement | null
+ closeButtonRef.current?.focus()
+
+ return () => {
+ lastActiveElementRef.current?.focus()
+ }
+ }, [open])
+
if (!open) {
return null
}
@@ -29,13 +43,13 @@ export const Modal = forwardRef(function Modal(
ref={panelRef}
role="dialog"
aria-modal="true"
- aria-label={title}
+ aria-labelledby={title ? titleId : undefined}
className={cn('w-full max-w-lg rounded-xl bg-white p-6 shadow-2xl dark:bg-slate-900', className)}
{...props}
>
, 'title'> {
+ title: ReactNode
+ description?: ReactNode
+ open?: boolean
+ defaultOpen?: boolean
+ onConfirm?: () => void
+ onCancel?: () => void
+ onOpenChange?: (open: boolean) => void
+ okText?: string
+ cancelText?: string
+ children: ReactElement
+}
+
+export const Popconfirm = forwardRef(function Popconfirm(
+ {
+ className,
+ title,
+ description,
+ open: controlledOpen,
+ defaultOpen = false,
+ onConfirm,
+ onCancel,
+ onOpenChange,
+ okText = '确定',
+ cancelText = '取消',
+ children,
+ ...props
+ },
+ ref,
+) {
+ const [internalOpen, setInternalOpen] = useState(defaultOpen)
+ const isOpen = controlledOpen ?? internalOpen
+ const wrapperRef = useRef(null)
+
+ const setOpen = (val: boolean) => {
+ setInternalOpen(val)
+ onOpenChange?.(val)
+ }
+
+ useEffect(() => {
+ if (!isOpen) return
+ const handler = (e: MouseEvent) => {
+ if (wrapperRef.current && !wrapperRef.current.contains(e.target as Node)) {
+ setOpen(false)
+ }
+ }
+ document.addEventListener('mousedown', handler)
+ return () => document.removeEventListener('mousedown', handler)
+ })
+
+ return (
+ , 'title'> {
+ active?: boolean
+ avatar?: boolean
+ title?: boolean
+ paragraph?: boolean | { rows?: number }
+ loading?: boolean
+}
+
+export const Skeleton = forwardRef(function Skeleton(
+ {
+ className,
+ active = true,
+ avatar = false,
+ title = true,
+ paragraph = true,
+ loading = true,
+ children,
+ ...props
+ },
+ ref,
+) {
+ if (!loading) return <>{children}
+
+ const rows = typeof paragraph === 'object' ? (paragraph.rows ?? 3) : paragraph ? 3 : 0
+ const animCls = active ? 'animate-pulse' : ''
+
+ return (
+ {
+ spinning?: boolean
+ size?: 'sm' | 'md' | 'lg'
+ tip?: ReactNode
+}
+
+export const Spin = forwardRef(function Spin(
+ { className, spinning = true, size = 'md', tip, children, ...props },
+ ref,
+) {
+ const spinner = (
+ , 'onChange' | 'onSelect'> {
+ options?: AutoCompleteOption[]
+ value?: string
+ defaultValue?: string
+ onChange?: (value: string) => void
+ onSelect?: (value: string) => void
+ filterOption?: boolean | ((input: string, option: AutoCompleteOption) => boolean)
+ allowClear?: boolean
+}
+
+export const AutoComplete = forwardRef(function AutoComplete(
+ {
+ className,
+ options = [],
+ value: controlledValue,
+ defaultValue = '',
+ onChange,
+ onSelect,
+ filterOption = true,
+ allowClear = false,
+ placeholder,
+ ...props
+ },
+ ref,
+) {
+ const [internal, setInternal] = useState(defaultValue)
+ const [open, setOpen] = useState(false)
+ const wrapperRef = useRef(null)
+ const val = controlledValue ?? internal
+
+ const filtered = options.filter((opt) => {
+ if (!filterOption) return true
+ if (typeof filterOption === 'function') return filterOption(val, opt)
+ return (opt.label ?? opt.value).toLowerCase().includes(val.toLowerCase())
+ })
+
+ const update = (v: string) => {
+ setInternal(v)
+ onChange?.(v)
+ }
+
+ useEffect(() => {
+ if (!open) return
+ const handler = (e: MouseEvent) => {
+ if (wrapperRef.current && !wrapperRef.current.contains(e.target as Node)) setOpen(false)
+ }
+ document.addEventListener('mousedown', handler)
+ return () => document.removeEventListener('mousedown', handler)
+ })
+
+ return (
+ (null)
+type MaybeNativeChangeEvent =
+ | ChangeEvent
+ | { target?: { value?: unknown; checked?: unknown; type?: string } }
+
+export function extractFieldValue(input: unknown) {
+ if (typeof input === 'object' && input !== null && 'target' in input) {
+ const event = input as MaybeNativeChangeEvent
+ if (event.target?.type === 'checkbox') {
+ return Boolean(event.target.checked)
+ }
+ if (event.target && 'value' in event.target) {
+ return event.target.value
+ }
+ }
+
+ return input
+}
+
export interface FormProps extends Omit, 'onSubmit'> {
initialValues?: FormValues
onSubmit?: (values: FormValues) => void
@@ -162,40 +180,43 @@ export function FormItem({
const value = ctx.values[name]
const error = ctx.errors[name]
const required = rules.some((rule) => rule.required)
+ const fieldId = `field-${name}`
+ const errorId = `${fieldId}-error`
const childNode = isValidElement(children)
? (children as ReactElement<{
+ id?: string
value?: unknown
- onChange?: (event: ChangeEvent) => void
+ 'aria-invalid'?: boolean
+ 'aria-describedby'?: string
+ onChange?: (eventOrValue: unknown) => void
}>)
: null
return (
, 'onChange'> {
+ value?: number
+ defaultValue?: number
+ min?: number
+ max?: number
+ step?: number
+ disabled?: boolean
+ size?: 'sm' | 'md' | 'lg'
+ controls?: boolean
+ precision?: number
+ placeholder?: string
+ onChange?: (value: number | null) => void
+}
+
+export const InputNumber = forwardRef(function InputNumber(
+ {
+ className,
+ value: controlledValue,
+ defaultValue,
+ min = -Infinity,
+ max = Infinity,
+ step = 1,
+ disabled = false,
+ size = 'md',
+ controls = true,
+ precision,
+ placeholder,
+ onChange,
+ ...props
+ },
+ ref,
+) {
+ const [internal, setInternal] = useState(defaultValue ?? null)
+ const val = controlledValue ?? internal
+
+ const clamp = (n: number) => {
+ let v = Math.max(min, Math.min(max, n))
+ if (precision !== undefined) v = Number(v.toFixed(precision))
+ return v
+ }
+
+ const update = (n: number | null) => {
+ const clamped = n !== null ? clamp(n) : null
+ setInternal(clamped)
+ onChange?.(clamped)
+ }
+
+ const heightCls = { 'h-8': size === 'sm', 'h-10': size === 'md', 'h-11': size === 'lg' }
+
+ return (
+ , 'onChange'> {
+ value?: string
+ defaultValue?: string
+ format?: '12' | '24'
+ disabled?: boolean
+ placeholder?: string
+ onChange?: (value: string) => void
+ size?: 'sm' | 'md' | 'lg'
+}
+
+export const TimePicker = forwardRef(function TimePicker(
+ {
+ className,
+ value: controlledValue,
+ defaultValue = '',
+ format = '24',
+ disabled = false,
+ placeholder = '选择时间',
+ onChange,
+ size = 'md',
+ ...props
+ },
+ ref,
+) {
+ const [internal, setInternal] = useState(defaultValue)
+ const [open, setOpen] = useState(false)
+ const wrapperRef = useRef(null)
+ const val = controlledValue ?? internal
+
+ const update = (v: string) => {
+ setInternal(v)
+ onChange?.(v)
+ }
+
+ useEffect(() => {
+ if (!open) return
+ const handler = (e: MouseEvent) => {
+ if (wrapperRef.current && !wrapperRef.current.contains(e.target as Node)) setOpen(false)
+ }
+ document.addEventListener('mousedown', handler)
+ return () => document.removeEventListener('mousedown', handler)
+ })
+
+ const hours = Array.from({ length: format === '24' ? 24 : 12 }, (_, i) => format === '24' ? i : i + 1)
+ const minutes = Array.from({ length: 60 }, (_, i) => i)
+
+ const [selH, selM] = val ? val.split(':').map(Number) : [null, null]
+
+ const heightCls = { 'h-8': size === 'sm', 'h-10': size === 'md', 'h-11': size === 'lg' }
+
+ return (
+ {
+ direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse'
+ align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline'
+ justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'
+ wrap?: boolean
+ gap?: number | string
+ vertical?: boolean
+}
+
+const alignMap: Record = {
+ start: 'items-start',
+ center: 'items-center',
+ end: 'items-end',
+ stretch: 'items-stretch',
+ baseline: 'items-baseline',
+}
+
+const justifyMap: Record = {
+ start: 'justify-start',
+ center: 'justify-center',
+ end: 'justify-end',
+ between: 'justify-between',
+ around: 'justify-around',
+ evenly: 'justify-evenly',
+}
+
+export const Flex = forwardRef(function Flex(
+ {
+ className,
+ direction,
+ align,
+ justify,
+ wrap = false,
+ gap,
+ vertical = false,
+ style,
+ ...props
+ },
+ ref,
+) {
+ const dir = direction ?? (vertical ? 'column' : 'row')
+ const dirCls: Record = {
+ row: 'flex-row',
+ column: 'flex-col',
+ 'row-reverse': 'flex-row-reverse',
+ 'column-reverse': 'flex-col-reverse',
+ }
+
+ return (
+
+ )
+})
diff --git a/packages/ui/src/components/layout/index.ts b/packages/ui/src/components/layout/index.ts
index 0f9fa0b..0e566a2 100644
--- a/packages/ui/src/components/layout/index.ts
+++ b/packages/ui/src/components/layout/index.ts
@@ -18,3 +18,6 @@ export type { DividerProps } from './Divider'
export { SplitPane } from './SplitPane'
export type { SplitPaneProps } from './SplitPane'
+
+export { Flex } from './Flex'
+export type { FlexProps } from './Flex'
diff --git a/packages/ui/src/components/navigation/Dropdown.tsx b/packages/ui/src/components/navigation/Dropdown.tsx
index 4bd1e6a..ac27d7e 100644
--- a/packages/ui/src/components/navigation/Dropdown.tsx
+++ b/packages/ui/src/components/navigation/Dropdown.tsx
@@ -1,5 +1,6 @@
-import { forwardRef, type HTMLAttributes, type ReactNode, useState } from 'react'
+import { forwardRef, type HTMLAttributes, type KeyboardEvent, type ReactNode, useEffect, useId, useRef, useState } from 'react'
import { cn } from '../../utils/cn'
+import { useClickOutside } from '../../hooks/useClickOutside'
export interface DropdownOption {
key: string
@@ -32,7 +33,14 @@ export const Dropdown = forwardRef(function Dropd
ref,
) {
const [innerOpen, setInnerOpen] = useState(defaultOpen)
+ const [activeIndex, setActiveIndex] = useState(-1)
+ const rootRef = useRef(null)
+ const triggerRef = useRef(null)
+ const menuId = useId()
const open = controlledOpen ?? innerOpen
+ const enabledOptions = options.filter((item) => !item.disabled)
+
+ useClickOutside(rootRef, () => setOpen(false), open)
const setOpen = (next: boolean) => {
if (controlledOpen === undefined) {
@@ -45,18 +53,61 @@ export const Dropdown = forwardRef(function Dropd
}
}
+ const setCombinedRef = (node: HTMLDivElement | null) => {
+ rootRef.current = node
+ if (typeof ref === 'function') {
+ ref(node)
+ return
+ }
+ if (ref) {
+ ;(ref as { current: HTMLDivElement | null }).current = node
+ }
+ }
+
+ useEffect(() => {
+ if (!open) {
+ setActiveIndex(-1)
+ return
+ }
+ setActiveIndex(0)
+ }, [open])
+
+ const handleTriggerKeyDown = (event: KeyboardEvent) => {
+ if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {
+ event.preventDefault()
+ setOpen(true)
+ }
+ }
+
+ const handleMenuKeyDown = (event: KeyboardEvent) => {
+ if (event.key === 'Escape') {
+ setOpen(false)
+ triggerRef.current?.focus()
+ return
+ }
+ if (event.key === 'ArrowDown') {
+ event.preventDefault()
+ setActiveIndex((prev) => (prev + 1) % enabledOptions.length)
+ }
+ if (event.key === 'ArrowUp') {
+ event.preventDefault()
+ setActiveIndex((prev) => (prev - 1 + enabledOptions.length) % enabledOptions.length)
+ }
+ }
+
return (
-
+
+ Page {pagination.current} / {totalPages}
+
+
+
+
+ ) : null}
)
},
diff --git a/packages/ui/src/components/data/index.ts b/packages/ui/src/components/data/index.ts
index 8d7253b..ae15f9d 100644
--- a/packages/ui/src/components/data/index.ts
+++ b/packages/ui/src/components/data/index.ts
@@ -42,3 +42,12 @@ export type { ImagePreviewProps } from './ImagePreview'
export { VirtualList } from './VirtualList'
export type { VirtualListProps } from './VirtualList'
+
+export { List } from './List'
+export type { ListProps, ListItem } from './List'
+
+export { Carousel } from './Carousel'
+export type { CarouselProps } from './Carousel'
+
+export { Image } from './Image'
+export type { ImageProps } from './Image'
diff --git a/packages/ui/src/components/feedback/Alert.tsx b/packages/ui/src/components/feedback/Alert.tsx
new file mode 100644
index 0000000..a1e5c3d
--- /dev/null
+++ b/packages/ui/src/components/feedback/Alert.tsx
@@ -0,0 +1,81 @@
+import { forwardRef, useState, type HTMLAttributes, type ReactNode } from 'react'
+import { cn } from '../../utils/cn'
+
+export interface AlertProps extends HTMLAttributes
+ {showIcon ? {icon ?? typeIconMap[type]} : null}
+
+ )
+})
diff --git a/packages/ui/src/components/feedback/Modal.tsx b/packages/ui/src/components/feedback/Modal.tsx
index 64b8796..20f69b2 100644
--- a/packages/ui/src/components/feedback/Modal.tsx
+++ b/packages/ui/src/components/feedback/Modal.tsx
@@ -1,4 +1,4 @@
-import { forwardRef, type HTMLAttributes, useRef } from 'react'
+import { forwardRef, type HTMLAttributes, useEffect, useId, useRef } from 'react'
import { Portal } from '../../utils/portal'
import { cn } from '../../utils/cn'
import { useEscapeKey } from '../../hooks/useEscapeKey'
@@ -15,9 +15,23 @@ export const Modal = forwardRef
+
+ {action ? {message}
+ {description ? {description}
: null}
+ {action}
: null}
+ {closable ? (
+
+ ) : null}
+
-
diff --git a/packages/ui/src/components/feedback/Popconfirm.tsx b/packages/ui/src/components/feedback/Popconfirm.tsx
new file mode 100644
index 0000000..92e7cf5
--- /dev/null
+++ b/packages/ui/src/components/feedback/Popconfirm.tsx
@@ -0,0 +1,89 @@
+import { forwardRef, useState, useRef, useEffect, type HTMLAttributes, type ReactNode, type ReactElement } from 'react'
+import { cn } from '../../utils/cn'
+
+export interface PopconfirmProps extends Omit{title}
-
+
+ )
+})
diff --git a/packages/ui/src/components/feedback/Skeleton.tsx b/packages/ui/src/components/feedback/Skeleton.tsx
new file mode 100644
index 0000000..13a9a88
--- /dev/null
+++ b/packages/ui/src/components/feedback/Skeleton.tsx
@@ -0,0 +1,49 @@
+import { forwardRef, type HTMLAttributes } from 'react'
+import { cn } from '../../utils/cn'
+
+export interface SkeletonProps extends Omit setOpen(!isOpen)}>{children}
+ {isOpen ? (
+
+
+ ) : null}
+
+ ⚠️
+
+
+
+ {title}
+ {description ? {description}
: null}
+
+
+
+
+
+ {avatar ? : null}
+
+ )
+})
diff --git a/packages/ui/src/components/feedback/Spin.tsx b/packages/ui/src/components/feedback/Spin.tsx
new file mode 100644
index 0000000..5666377
--- /dev/null
+++ b/packages/ui/src/components/feedback/Spin.tsx
@@ -0,0 +1,45 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'
+import { cn } from '../../utils/cn'
+
+export interface SpinProps extends HTMLAttributes
+ {title ? : null}
+ {rows > 0 ? (
+
+
+ {Array.from({ length: rows }).map((_, i) => (
+
+ ))}
+
+ ) : null}
+
+
+ {tip ? {tip} : null}
+
+ )
+
+ if (!children) {
+ return spinning ? (
+
+ {spinner}
+
+ ) : null
+ }
+
+ return (
+
+ {children}
+ {spinning ? (
+
+ )
+})
diff --git a/packages/ui/src/components/feedback/index.ts b/packages/ui/src/components/feedback/index.ts
index 5ac0f1c..9fe4e8b 100644
--- a/packages/ui/src/components/feedback/index.ts
+++ b/packages/ui/src/components/feedback/index.ts
@@ -24,3 +24,15 @@ export type { TourProps, TourStep } from './Tour'
export { Watermark } from './Watermark'
export type { WatermarkProps } from './Watermark'
+
+export { Alert } from './Alert'
+export type { AlertProps } from './Alert'
+
+export { Skeleton } from './Skeleton'
+export type { SkeletonProps } from './Skeleton'
+
+export { Popconfirm } from './Popconfirm'
+export type { PopconfirmProps } from './Popconfirm'
+
+export { Spin } from './Spin'
+export type { SpinProps } from './Spin'
diff --git a/packages/ui/src/components/form/AutoComplete.tsx b/packages/ui/src/components/form/AutoComplete.tsx
new file mode 100644
index 0000000..0b92ac1
--- /dev/null
+++ b/packages/ui/src/components/form/AutoComplete.tsx
@@ -0,0 +1,103 @@
+import { forwardRef, useState, useRef, useEffect, type InputHTMLAttributes } from 'react'
+import { cn } from '../../utils/cn'
+
+export interface AutoCompleteOption {
+ value: string
+ label?: string
+}
+
+export interface AutoCompleteProps extends Omit
+ {spinner}
+
+ ) : null}
+
+
+ )
+})
diff --git a/packages/ui/src/components/form/Form.tsx b/packages/ui/src/components/form/Form.tsx
index 4f9e5b3..6d7076e 100644
--- a/packages/ui/src/components/form/Form.tsx
+++ b/packages/ui/src/components/form/Form.tsx
@@ -36,6 +36,24 @@ interface FormContextValue {
const FormContext = createContext
+ {
+ update(e.target.value)
+ setOpen(true)
+ }}
+ onFocus={() => setOpen(true)}
+ className="h-10 w-full rounded-md border border-slate-300 bg-white px-3 text-sm outline-none transition focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100"
+ {...props}
+ />
+ {allowClear && val ? (
+
+ ) : null}
+
+ {open && filtered.length > 0 ? (
+ -
+ {filtered.map((opt) => (
+
- { + update(opt.value) + onSelect?.(opt.value) + setOpen(false) + }} + > + {opt.label ?? opt.value} + + ))} +
{label ? (
-
)
}
diff --git a/packages/ui/src/components/form/InputNumber.tsx b/packages/ui/src/components/form/InputNumber.tsx
new file mode 100644
index 0000000..91efe1e
--- /dev/null
+++ b/packages/ui/src/components/form/InputNumber.tsx
@@ -0,0 +1,101 @@
+import { forwardRef, useState, type HTMLAttributes } from 'react'
+import { cn } from '../../utils/cn'
+
+export interface InputNumberProps extends Omit
+ {controls ? (
+
+ ) : null}
+ {
+ const raw = e.target.value
+ if (raw === '' || raw === '-') { update(null); return }
+ const n = Number(raw)
+ if (!isNaN(n)) update(n)
+ }}
+ onBlur={() => { if (val !== null) update(clamp(val)) }}
+ className="w-16 min-w-0 flex-1 bg-transparent px-2 text-center text-sm outline-none dark:text-slate-100"
+ />
+ {controls ? (
+
+ ) : null}
+
+ )
+})
diff --git a/packages/ui/src/components/form/TimePicker.tsx b/packages/ui/src/components/form/TimePicker.tsx
new file mode 100644
index 0000000..25b7002
--- /dev/null
+++ b/packages/ui/src/components/form/TimePicker.tsx
@@ -0,0 +1,109 @@
+import { forwardRef, useState, useRef, useEffect, type HTMLAttributes } from 'react'
+import { cn } from '../../utils/cn'
+
+export interface TimePickerProps extends Omit
+
+ )
+})
diff --git a/packages/ui/src/components/form/index.ts b/packages/ui/src/components/form/index.ts
index 7d683c8..e964eae 100644
--- a/packages/ui/src/components/form/index.ts
+++ b/packages/ui/src/components/form/index.ts
@@ -48,3 +48,12 @@ export type { SegmentedProps, SegmentedOption } from './Segmented'
export { Mentions } from './Mentions'
export type { MentionsProps, MentionsOption } from './Mentions'
+
+export { AutoComplete } from './AutoComplete'
+export type { AutoCompleteProps, AutoCompleteOption } from './AutoComplete'
+
+export { InputNumber } from './InputNumber'
+export type { InputNumberProps } from './InputNumber'
+
+export { TimePicker } from './TimePicker'
+export type { TimePickerProps } from './TimePicker'
diff --git a/packages/ui/src/components/layout/Flex.tsx b/packages/ui/src/components/layout/Flex.tsx
new file mode 100644
index 0000000..d8be23c
--- /dev/null
+++ b/packages/ui/src/components/layout/Flex.tsx
@@ -0,0 +1,67 @@
+import { forwardRef, type HTMLAttributes } from 'react'
+import { cn } from '../../utils/cn'
+
+export interface FlexProps extends HTMLAttributes !disabled && setOpen(!open)}
+ >
+ {val || placeholder}
+ 🕐
+
+ {open ? (
+
+
+ ) : null}
+
+ {hours.map((h) => (
+
+ {
+ const m = selM ?? 0
+ update(`${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`)
+ }}
+ >
+ {String(h).padStart(2, '0')}
+
+ ))}
+
+ {minutes.map((m) => (
+
+ {
+ const h = selH ?? 0
+ update(`${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`)
+ setOpen(false)
+ }}
+ >
+ {String(m).padStart(2, '0')}
+
+ ))}
+
-