cx-chat 0.0.1

package/src/components/cx-ui/date-picker/index.tsx

@@ -0,0 +1,193 @@
+import type { GetProps } from 'antd'
+import { ConfigProvider, DatePicker } from 'antd'
+import zhCN from 'antd/locale/zh_CN'
+import enUS from 'antd/locale/en_US'
+import clsx from 'clsx'
+import dayjs from 'dayjs'
+import 'dayjs/locale/zh-cn'
+import 'dayjs/locale/en'
+import React, { useEffect, useMemo, useState } from 'react'
+
+import { CxFloatingShell } from '../floating-shell/CxFloatingShell'
+import { hasCxFloatingValue } from '../floating-shell/has-floating-value'
+import './index.less'
+
+const LOCALE_ENUM: Record<
+  string,
+  { antd: typeof zhCN; dayjs: string }
+> = {
+  'zh-CN': { antd: zhCN, dayjs: 'zh-cn' },
+  'en-US': { antd: enUS, dayjs: 'en' },
+  zh: { antd: zhCN, dayjs: 'zh-cn' },
+  en: { antd: enUS, dayjs: 'en' },
+}
+
+type AntDatePickerProps = GetProps<typeof DatePicker>
+
+type CxDatePickerOwn = {
+  cxFloatingLabel?: React.ReactNode
+  cxFocusPlaceholder?: string
+}
+
+export type CxDatePickerProps = Omit<AntDatePickerProps, 'variant'> & CxDatePickerOwn
+
+type CxDatePickerBaseProps = Omit<AntDatePickerProps, 'variant'> & CxDatePickerOwn
+
+/** 判断浮动标签是否有效（避免 String() / Number() 这类强转）。 */
+const hasNonEmptyFloatingLabel = (label: React.ReactNode): boolean => {
+  if (label == null || label === false) return false
+  if (typeof label === 'string') return label.trim().length > 0
+  return true
+}
+
+/** 获取浮动壳聚焦占位：优先 cxFocusPlaceholder，其次仅接受 string placeholder。 */
+const resolveFocusPlaceholder = (
+  cxFocusPlaceholder: string | undefined,
+  placeholder: AntDatePickerProps['placeholder'] | undefined,
+): string | undefined => {
+  if (cxFocusPlaceholder) return cxFocusPlaceholder
+  if (typeof placeholder === 'string') return placeholder
+  return undefined
+}
+
+/** 解析页面语言：优先 html lang，其次回退 zh-CN。 */
+const resolveDocumentLang = (): string => {
+  if (typeof document === 'undefined') return 'zh-CN'
+  const lang = document.documentElement.lang
+  return lang ? lang : 'zh-CN'
+}
+
+/** CxDatePicker 基础组件：统一 DatePicker 与浮动标签能力。 */
+const CxDatePickerPrimitive: React.FC<CxDatePickerProps> = (props) => {
+  const {
+    className,
+    style = undefined,
+    cxFloatingLabel,
+    cxFocusPlaceholder,
+    placeholder,
+    value,
+    onOpenChange,
+    disabled,
+    ...rest
+  } = props
+
+  /** 解析高度：默认 42，可通过 style.height 覆盖（数值）。 */
+  const resolveHeight = () => {
+    const h = style && typeof style === 'object' ? (style as { height?: unknown }).height : undefined
+    return typeof h === 'number' ? h : 42
+  }
+
+  /** 根据高度推导浮动壳的布局类型：40 及以下按搜索区，其他按表单区。 */
+  const shellVariant: 'cxForm' | 'cxSearch' = resolveHeight() <= 40 ? 'cxSearch' : 'cxForm'
+
+  const localeLang = resolveDocumentLang()
+  const localeConfig = LOCALE_ENUM[localeLang] || LOCALE_ENUM['zh-CN']
+
+  useEffect(() => {
+    dayjs.locale(localeConfig.dayjs)
+  }, [localeConfig.dayjs])
+
+  const useFloat = hasNonEmptyFloatingLabel(cxFloatingLabel)
+  const [panelOpen, setPanelOpen] = useState(false)
+
+  const hasValue = useMemo(() => hasCxFloatingValue(value, 'date'), [value])
+
+  const pickerClass = clsx(
+    'cx-datepicker',
+    'cx-date-picker',
+    shellVariant === 'cxSearch' ? 'cx-date-picker--cxSearch' : 'cx-date-picker--cxForm',
+    className,
+  )
+
+  const pickerStyle: React.CSSProperties = {
+    boxSizing: 'border-box',
+    ...(style && typeof style === 'object' ? style : {}),
+    width: '100%',
+  }
+
+  const pickerEl = (
+    <DatePicker
+      {...(rest as AntDatePickerProps)}
+      disabled={disabled}
+      value={value}
+      className={pickerClass}
+      style={pickerStyle}
+      placeholder={useFloat ? '' : placeholder}
+      onOpenChange={(open) => {
+        setPanelOpen(open)
+        onOpenChange?.(open)
+      }}
+    />
+  )
+
+  const inner = useFloat ? (
+    <CxFloatingShell
+      disabled={disabled}
+      focusPlaceholder={resolveFocusPlaceholder(cxFocusPlaceholder, placeholder)}
+      hasValue={hasValue}
+      label={cxFloatingLabel}
+      overlayOpen={panelOpen}
+      variant={shellVariant}
+    >
+      {pickerEl}
+    </CxFloatingShell>
+  ) : (
+    pickerEl
+  )
+
+  return <ConfigProvider locale={localeConfig.antd}>{inner}</ConfigProvider>
+}
+
+/** Large：42px，高度偏表单主输入。 */
+export function CxDatePickerLarge(props: CxDatePickerBaseProps): React.ReactElement
+export function CxDatePickerLarge(props: CxDatePickerProps) {
+  return (
+    <CxDatePickerPrimitive
+      {...(props as any)}
+      style={{ ...(props as any)?.style, height: 42, minHeight: 42 }}
+    />
+  )
+}
+
+/** Medium：40px，高度偏搜索区输入。 */
+export function CxDatePickerMedium(props: CxDatePickerBaseProps): React.ReactElement
+export function CxDatePickerMedium(props: CxDatePickerProps) {
+  return (
+    <CxDatePickerPrimitive
+      {...(props as any)}
+      style={{ ...(props as any)?.style, height: 40, minHeight: 40 }}
+    />
+  )
+}
+
+/** Small：32px，更紧凑。 */
+export function CxDatePickerSmall(props: CxDatePickerBaseProps): React.ReactElement
+export function CxDatePickerSmall(props: CxDatePickerProps) {
+  return (
+    <CxDatePickerPrimitive
+      {...(props as any)}
+      style={{ ...(props as any)?.style, height: 32, minHeight: 32 }}
+    />
+  )
+}
+
+/** Float：第 4 种类型，浮动标签日期选择（使用 CxFloatingShell）。 */
+export function CxDatePickerFloat(props: CxDatePickerBaseProps): React.ReactElement
+export function CxDatePickerFloat(props: CxDatePickerBaseProps) {
+  const hasLabel = hasNonEmptyFloatingLabel((props as any)?.cxFloatingLabel)
+  return (
+    <CxDatePickerPrimitive
+      {...(props as any)}
+      cxFloatingLabel={hasLabel ? (props as any)?.cxFloatingLabel : (props as any)?.placeholder}
+    />
+  )
+}
+
+const ExportedCxDatePicker = Object.assign(CxDatePickerPrimitive, {
+  Large: CxDatePickerLarge,
+  Medium: CxDatePickerMedium,
+  Small: CxDatePickerSmall,
+  Float: CxDatePickerFloat,
+})
+
+export default ExportedCxDatePicker

package/src/components/cx-ui/drawer/index.tsx

@@ -0,0 +1,47 @@
+import React, { useMemo } from 'react'
+import type { DrawerProps } from 'antd'
+import { Drawer } from 'antd'
+
+export type CxDrawerProps = {
+  isOpen: boolean
+  title?: React.ReactNode
+  onClose: () => void
+  children: React.ReactNode
+  drawerConfig?: DrawerProps
+}
+
+/**
+ * 右侧抽屉封装：与 `CxModal` 一样统一入口与默认样式，
+ * 并可配合 `useCxModal` 复用 open/close 状态控制逻辑。
+ */
+export default function CxDrawer({
+  isOpen,
+  title,
+  onClose,
+  children,
+  drawerConfig = {},
+}: CxDrawerProps) {
+  const mergedConfig = useMemo<DrawerProps>(
+    () => ({
+      placement: drawerConfig.placement ?? 'right',
+      width: drawerConfig.width ?? 520,
+      maskClosable: drawerConfig.maskClosable ?? true,
+      destroyOnClose: drawerConfig.destroyOnClose ?? false,
+      // antd Drawer 的 `styles` 在不同版本类型差异较大，这里不做细粒度 merge，直接透传由调用方控制。
+      ...drawerConfig,
+    }),
+    [drawerConfig],
+  )
+
+  return (
+    <Drawer
+      open={isOpen}
+      title={title}
+      onClose={onClose}
+      {...mergedConfig}
+    >
+      {children}
+    </Drawer>
+  )
+}
+

package/src/components/cx-ui/empty-state/index.tsx

@@ -0,0 +1,20 @@
+import { FolderOpen } from 'lucide-react'
+import { memo } from 'react'
+
+interface CxEmptyStateProps {
+  message: string
+}
+
+function CxEmptyStateInner({ message }: CxEmptyStateProps) {
+  return (
+    <div className="h-full flex flex-col items-center justify-center py-8 text-gray-400 dark:text-gray-500">
+      <div className="w-16 h-16 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center mb-4">
+        <FolderOpen size={32} className="text-gray-300 dark:text-gray-600" />
+      </div>
+      <p>{message}</p>
+    </div>
+  )
+}
+
+export type { CxEmptyStateProps }
+export const CxEmptyState = memo(CxEmptyStateInner)

package/src/components/cx-ui/floating-shell/CxFloatingShell.tsx

@@ -0,0 +1,89 @@
+import clsx from 'clsx'
+import React, { useMemo, useState } from 'react'
+
+export type CxFloatingShellProps = {
+  children: React.ReactElement
+  /** 有焦点或下拉/面板展开时，传给子控件的 placeholder */
+  focusPlaceholder?: React.ReactNode | string[]
+  hasValue: boolean
+  label: React.ReactNode
+  /** 下拉、日期面板展开时视为「类聚焦」，保持 label 上浮与占位显示 */
+  overlayOpen?: boolean
+  variant?: 'cxForm' | 'cxSearch'
+  className?: string
+  disabled?: boolean | [boolean, boolean]
+  style?: React.CSSProperties
+}
+
+function mergePlaceholder(
+  focused: boolean,
+  overlayOpen: boolean,
+  focusPlaceholder: React.ReactNode | string[] | undefined,
+  prevPlaceholder: React.ReactNode | string[] | undefined,
+): React.ReactNode | string[] | undefined {
+  if (focused || overlayOpen) {
+    if (focusPlaceholder !== undefined) return focusPlaceholder
+    return prevPlaceholder
+  }
+  // 保留子组件初始 placeholder（如 RangePicker 用 ['',''] 避免 antd 回退到 locale 与 label 重叠）
+  return prevPlaceholder
+}
+
+export function CxFloatingShell({
+  children,
+  className,
+  disabled,
+  focusPlaceholder,
+  hasValue,
+  label,
+  overlayOpen = false,
+  style,
+  variant = 'cxForm',
+}: CxFloatingShellProps) {
+  const [focused, setFocused] = useState(false)
+  const floated = focused || hasValue || overlayOpen
+
+  const mergedChild = useMemo(() => {
+    const p = children.props as {
+      onBlur?: (ev: React.FocusEvent) => void
+      onFocus?: (ev: React.FocusEvent) => void
+      placeholder?: React.ReactNode | string[]
+    }
+    const nextPlaceholder = mergePlaceholder(
+      focused,
+      overlayOpen,
+      focusPlaceholder,
+      p.placeholder,
+    )
+    return React.cloneElement(children, {
+      onBlur: (e: React.FocusEvent) => {
+        setFocused(false)
+        p.onBlur?.(e)
+      },
+      onFocus: (e: React.FocusEvent) => {
+        setFocused(true)
+        p.onFocus?.(e)
+      },
+      placeholder: nextPlaceholder,
+    } as Record<string, unknown>)
+  }, [children, focusPlaceholder, focused, overlayOpen])
+
+  const disabledShell = Array.isArray(disabled)
+    ? disabled.some(Boolean)
+    : Boolean(disabled)
+
+  return (
+    <div
+      className={clsx(
+        'cx-floating-shell',
+        `cx-floating-shell--${variant}`,
+        floated && 'cx-floating-shell--floated',
+        disabledShell && 'cx-floating-shell--disabled',
+        className,
+      )}
+      style={style}>
+      <div className="cx-floating-shell__control">{mergedChild}</div>
+      <span className="cx-floating-shell__label">{label}</span>
+    </div>
+  )
+}

package/src/components/cx-ui/floating-shell/cx-floating-shell.less

@@ -0,0 +1,283 @@
+/* Vuetify / Material 风格：空且失焦时 label 在输入区中部；有值或聚焦/展开时缩小至左上角 */
+
+.cx-floating-shell {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  vertical-align: top;
+}
+
+.cx-floating-shell__label {
+  position: absolute;
+  left: 11px;
+  right: 22px;
+  top: 50%;
+  transform: translateY(-50%);
+  transform-origin: left center;
+  pointer-events: none;
+  z-index: 2;
+  font-size: var(--cx-floating-label-font-size);
+  line-height: 1.25;
+  color: #6b7280;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition:
+    transform 0.2s ease,
+    top 0.2s ease,
+    font-size 0.2s ease,
+    color 0.2s ease;
+}
+
+.dark .cx-floating-shell__label,
+html.dark .cx-floating-shell__label {
+  color: #9ca3af;
+}
+
+.cx-floating-shell--floated .cx-floating-shell__label {
+  top: 5px;
+  transform: translateY(0) scale(0.78);
+  font-size: var(--cx-floating-label-font-size);
+  line-height: 1.25;
+  color: #4b5563;
+}
+
+.dark .cx-floating-shell--floated .cx-floating-shell__label,
+html.dark .cx-floating-shell--floated .cx-floating-shell__label {
+  color: #d1d5db;
+}
+
+.cx-floating-shell__control {
+  position: relative;
+  z-index: 1;
+}
+
+/* 浮动区内：输入/选中文字比 label 更小（label 仍为 14px） */
+.cx-floating-shell__control .cx-input.ant-input,
+.cx-floating-shell__control .ant-select .ant-select-selector,
+.cx-floating-shell__control .ant-select .ant-select-selection-item,
+.cx-floating-shell__control .ant-select .ant-select-selection-placeholder,
+.cx-floating-shell__control .ant-select .ant-select-selection-search-input,
+.cx-floating-shell__control .ant-select .ant-select-selection-wrap,
+.cx-floating-shell__control .cx-datepicker.ant-picker .ant-picker-input > input,
+.cx-floating-shell__control .cx-date-picker.ant-picker .ant-picker-input > input,
+.cx-floating-shell__control .cx-range-picker .ant-picker-input > input {
+  font-size: var(--cx-floating-control-font-size);
+  line-height: 1.5;
+  font-weight: 400;
+}
+
+/* 非浮动用 large 时 antd 会放大字号，压回与浮动区一致 */
+.cx-floating-shell__control .ant-select.ant-select-lg .ant-select-selector {
+  font-size: var(--cx-floating-control-font-size);
+}
+
+/*
+ * 浮动壳内控件尺寸（不挂在 --floated 上）：空且失焦时也与聚焦/有值时同一套高度与 padding，
+ * 避免点击瞬间切换两套样式造成「先跳高再回落」。仅 label 位置仍由 --floated 控制。
+ *
+ * - antd 6 Select：垂直 padding 在 .ant-select-content，根 .ant-select 去掉 padding-block。
+ * - 若仍存在内层 .ant-select-selector（旧结构），同套数值写在对应条目中。
+ */
+.cx-floating-shell.cx-floating-shell--cxSearch
+  .cx-floating-shell__control
+  .ant-select.cx-select {
+  display: inline-flex !important;
+  align-items: center !important;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  min-height: 49px !important;
+  height: 49px !important;
+  box-sizing: border-box !important;
+}
+
+.cx-floating-shell.cx-floating-shell--cxSearch
+  .cx-floating-shell__control
+  .ant-select.cx-select
+  .ant-select-content {
+  padding-top: 19px !important;
+  padding-bottom: 4px !important;
+  display: flex !important;
+  align-items: center !important;
+  box-sizing: border-box !important;
+}
+
+.cx-floating-shell.cx-floating-shell--cxSearch
+  .cx-floating-shell__control
+  .ant-select
+  .ant-select-selector {
+  display: flex !important;
+  align-items: center !important;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  min-height: 49px !important;
+  height: 49px !important;
+  box-sizing: border-box !important;
+}
+
+.cx-floating-shell.cx-floating-shell--cxSearch
+  .cx-floating-shell__control
+  .ant-select
+  .ant-select-selector
+  .ant-select-content {
+  padding-top: 19px !important;
+  padding-bottom: 4px !important;
+  display: flex !important;
+  align-items: center !important;
+  box-sizing: border-box !important;
+}
+
+.cx-floating-shell.cx-floating-shell--cxSearch span.cx-input.ant-input-affix-wrapper {
+  display: inline-flex !important;
+  align-items: center !important;
+  padding-top: 20px !important;
+  padding-bottom: 5px !important;
+  min-height: 49px !important;
+  height: 49px !important;
+  box-sizing: border-box !important;
+}
+
+.cx-floating-shell.cx-floating-shell--cxSearch
+  span.cx-input.ant-input-affix-wrapper
+  > input.ant-input {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+}
+
+.cx-floating-shell.cx-floating-shell--cxSearch input.cx-input.ant-input {
+  padding-top: 20px !important;
+  padding-bottom: 5px !important;
+  min-height: 49px !important;
+  height: 49px !important;
+  box-sizing: border-box !important;
+}
+
+.cx-floating-shell.cx-floating-shell--cxSearch .ant-select .ant-select-selection-wrap {
+  align-self: center;
+  width: 100%;
+}
+
+.cx-floating-shell.cx-floating-shell--cxSearch .ant-select .ant-select-selection-item,
+.cx-floating-shell.cx-floating-shell--cxSearch .ant-select .ant-select-selection-placeholder {
+  line-height: 1.35 !important;
+}
+
+.cx-floating-shell.cx-floating-shell--cxSearch .cx-datepicker.ant-picker,
+.cx-floating-shell.cx-floating-shell--cxSearch .cx-date-picker.ant-picker,
+.cx-floating-shell.cx-floating-shell--cxSearch .cx-range-picker.ant-picker {
+  padding-top: 19px !important;
+  padding-bottom: 4px !important;
+  min-height: 49px !important;
+  height: 49px !important;
+  box-sizing: border-box !important;
+}
+
+.cx-floating-shell.cx-floating-shell--cxSearch .cx-datepicker.ant-picker .ant-picker-input > input,
+.cx-floating-shell.cx-floating-shell--cxSearch .cx-date-picker.ant-picker .ant-picker-input > input,
+.cx-floating-shell.cx-floating-shell--cxSearch .cx-range-picker.ant-picker .ant-picker-input > input {
+  transform: none;
+}
+
+/* cxForm：比 Search 略高一点 */
+.cx-floating-shell.cx-floating-shell--cxForm
+  .cx-floating-shell__control
+  .ant-select.cx-select {
+  display: inline-flex !important;
+  align-items: center !important;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  min-height: 49px !important;
+  height: 49px !important;
+  box-sizing: border-box !important;
+}
+
+.cx-floating-shell.cx-floating-shell--cxForm
+  .cx-floating-shell__control
+  .ant-select.cx-select
+  .ant-select-content {
+  padding-top: 20px !important;
+  padding-bottom: 5px !important;
+  display: flex !important;
+  align-items: center !important;
+  box-sizing: border-box !important;
+}
+
+.cx-floating-shell.cx-floating-shell--cxForm
+  .cx-floating-shell__control
+  .ant-select
+  .ant-select-selector {
+  display: flex !important;
+  align-items: center !important;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  min-height: 49px !important;
+  height: 49px !important;
+  box-sizing: border-box !important;
+}
+
+.cx-floating-shell.cx-floating-shell--cxForm
+  .cx-floating-shell__control
+  .ant-select
+  .ant-select-selector
+  .ant-select-content {
+  padding-top: 20px !important;
+  padding-bottom: 5px !important;
+  display: flex !important;
+  align-items: center !important;
+  box-sizing: border-box !important;
+}
+
+.cx-floating-shell.cx-floating-shell--cxForm span.cx-input.ant-input-affix-wrapper {
+  display: inline-flex !important;
+  align-items: center !important;
+  padding-top: 21px !important;
+  padding-bottom: 6px !important;
+  min-height: 49px !important;
+  height: 49px !important;
+  box-sizing: border-box !important;
+}
+
+.cx-floating-shell.cx-floating-shell--cxForm
+  span.cx-input.ant-input-affix-wrapper
+  > input.ant-input {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+}
+
+.cx-floating-shell.cx-floating-shell--cxForm input.cx-input.ant-input {
+  padding-top: 21px !important;
+  padding-bottom: 6px !important;
+  min-height: 49px !important;
+  height: 49px !important;
+  box-sizing: border-box !important;
+}
+
+.cx-floating-shell.cx-floating-shell--cxForm .ant-select .ant-select-selection-wrap {
+  align-self: center;
+  width: 100%;
+}
+
+.cx-floating-shell.cx-floating-shell--cxForm .ant-select .ant-select-selection-item,
+.cx-floating-shell.cx-floating-shell--cxForm .ant-select .ant-select-selection-placeholder {
+  line-height: 1.35 !important;
+}
+
+.cx-floating-shell.cx-floating-shell--cxForm .cx-datepicker.ant-picker,
+.cx-floating-shell.cx-floating-shell--cxForm .cx-date-picker.ant-picker,
+.cx-floating-shell.cx-floating-shell--cxForm .cx-range-picker.ant-picker {
+  padding-top: 20px !important;
+  padding-bottom: 5px !important;
+  min-height: 49px !important;
+  height: 49px !important;
+  box-sizing: border-box !important;
+}
+
+.cx-floating-shell.cx-floating-shell--cxForm .cx-datepicker.ant-picker .ant-picker-input > input,
+.cx-floating-shell.cx-floating-shell--cxForm .cx-date-picker.ant-picker .ant-picker-input > input,
+.cx-floating-shell.cx-floating-shell--cxForm .cx-range-picker.ant-picker .ant-picker-input > input {
+  transform: none;
+}
+
+.cx-floating-shell--disabled .cx-floating-shell__label {
+  opacity: 0.55;
+}

package/src/components/cx-ui/floating-shell/has-floating-value.ts

@@ -0,0 +1,41 @@
+/** 判断 Cx 浮动标签模式下是否视为「有值」（用于抬高 label） */
+export function hasCxFloatingValue(
+  value: unknown,
+  kind: 'default' | 'date' | 'range' | 'select',
+): boolean {
+  if (value === undefined || value === null) return false
+
+  if (kind === 'range') {
+    if (!Array.isArray(value)) return false
+    const [a, b] = value
+    return !!(a || b)
+  }
+
+  if (kind === 'date') {
+    if (typeof value === 'object' && value !== null) {
+      const d = value as { isValid?: () => boolean; format?: unknown }
+      if (typeof d.isValid === 'function') return d.isValid()
+      if (typeof d.format === 'function') return true
+    }
+    return false
+  }
+
+  if (kind === 'select') {
+    if (Array.isArray(value)) return value.length > 0
+    if (typeof value === 'object' && value !== null) {
+      const o = value as { value?: unknown; key?: unknown }
+      const v = o.value ?? o.key
+      if (v === undefined || v === null || v === '') return false
+      if (Array.isArray(v)) return v.length > 0
+      return true
+    }
+    if (typeof value === 'string') return value.trim().length > 0
+    if (typeof value === 'number') return !Number.isNaN(value)
+    return true
+  }
+
+  if (Array.isArray(value)) return value.length > 0
+  if (typeof value === 'string') return value.trim().length > 0
+  if (typeof value === 'number') return !Number.isNaN(value)
+  return true
+}

package/src/components/cx-ui/form/CxForm.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import type { Rule } from 'antd/es/form'
+
+export type CxFormRulesMap = Record<string, Rule[]>
+
+type CxFormContextValue = {
+  rules?: CxFormRulesMap
+}
+
+export const CxFormContext = React.createContext<CxFormContextValue>({})
+
+export function useCxFormRules() {
+  return React.useContext(CxFormContext).rules
+}
+