@swiftcrab/crab 0.0.2

package/es/divider/style/index.d.ts

@@ -0,0 +1,23 @@
+import type { CSSProperties } from 'react';
+import type { GetDefaultToken } from '../../theme/internal';
+/** Component only token. Which will handle additional calculation of alias token */
+export interface ComponentToken {
+    /**
+     * @desc 文本横向内间距
+     * @descEN Horizontal padding of text
+     */
+    textPaddingInline: CSSProperties['paddingInline'];
+    /**
+     * @desc 文本与边缘距离，取值 0 ～ 1
+     * @descEN Distance between text and edge, which should be a number between 0 and 1.
+     */
+    orientationMargin: number;
+    /**
+     * @desc 纵向分割线的横向外间距
+     * @descEN Horizontal margin of vertical Divider
+     */
+    verticalMarginInline: CSSProperties['marginInline'];
+}
+export declare const prepareComponentToken: GetDefaultToken<'Divider'>;
+declare const _default: (prefixCls: string, rootCls?: string) => readonly [(node: React.ReactElement) => React.ReactElement, string, string];
+export default _default;

package/es/divider/style/index.js

@@ -0,0 +1,35 @@
+import {createTheme,useCacheToken,unit}from'@ant-design/cssinjs';import {genStyleUtils,mergeToken}from'@ant-design/cssinjs-utils';import*as ye from'react';import ye__default,{useContext}from'react';import {presetPrimaryColors,presetPalettes,generate}from'@ant-design/colors';import {TinyColor}from'@ctrl/tinycolor';var E=(e,t=false)=>({boxSizing:"border-box",margin:0,padding:0,color:e.colorText,fontSize:e.fontSize,lineHeight:e.lineHeight,listStyle:"none",fontFamily:t?"inherit":e.fontFamily}),pe=()=>({display:"inline-flex",alignItems:"center",color:"inherit",fontStyle:"normal",lineHeight:0,textAlign:"center",textTransform:"none",verticalAlign:"-0.125em",textRendering:"optimizeLegibility","-webkit-font-smoothing":"antialiased","-moz-osx-font-smoothing":"grayscale","> *":{lineHeight:1},svg:{display:"inline-block"}});var j=e=>({a:{color:e.colorLink,textDecoration:e.linkDecoration,backgroundColor:"transparent",outline:"none",cursor:"pointer",transition:`color ${e.motionDurationSlow}`,"-webkit-text-decoration-skip":"objects","&:hover":{color:e.colorLinkHover},"&:active":{color:e.colorLinkActive},"&:active, &:hover":{textDecoration:e.linkHoverDecoration,outline:0},"&:focus":{textDecoration:e.linkFocusDecoration,outline:0},"&[disabled]":{color:e.colorTextDisabled,cursor:"not-allowed"}}}),W=(e,t,r,n)=>{let o=`[class^="${t}"], [class*=" ${t}"]`,s=r?`.${r}`:o,i={boxSizing:"border-box","&::before, &::after":{boxSizing:"border-box"}},c={};return n!==false&&(c={fontFamily:e.fontFamily,fontSize:e.fontSize}),{[s]:{...c,...i,[o]:i}}};var v=e=>({[`.${e}`]:{...pe(),[`.${e} .${e}-icon`]:{display:"block"}}});function U(e){return (e+8)/e}function M(e){let t=new Array(10).fill(null).map((r,n)=>{let o=n-1,s=e*Math.E**(o/5),i=n>1?Math.floor(s):Math.ceil(s);return Math.floor(i/2)*2});return t[1]=e,t.map(r=>({size:r,lineHeight:U(r)}))}var V={version:"0.0.2"};var Q=V.version;var z={blue:"#1677FF",purple:"#722ED1",cyan:"#13C2C2",green:"#52C41A",magenta:"#EB2F96",pink:"#EB2F96",red:"#F5222D",orange:"#FA8C16",yellow:"#FADB14",volcano:"#FA541C",geekblue:"#2F54EB",gold:"#FAAD14",lime:"#A0D911"},me={...z,colorPrimary:"#1677ff",colorSuccess:"#52c41a",colorWarning:"#faad14",colorError:"#ff4d4f",colorInfo:"#1677ff",colorLink:"",colorTextBase:"",colorBgBase:"",fontFamily:`-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+'Noto Color Emoji'`,fontFamilyCode:"'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace",fontSize:14,lineWidth:1,lineType:"solid",motionUnit:.1,motionBase:0,motionEaseOutCirc:"cubic-bezier(0.08, 0.82, 0.17, 1)",motionEaseInOutCirc:"cubic-bezier(0.78, 0.14, 0.15, 0.86)",motionEaseOut:"cubic-bezier(0.215, 0.61, 0.355, 1)",motionEaseInOut:"cubic-bezier(0.645, 0.045, 0.355, 1)",motionEaseOutBack:"cubic-bezier(0.12, 0.4, 0.29, 1.46)",motionEaseInBack:"cubic-bezier(0.71, -0.46, 0.88, 0.6)",motionEaseInQuint:"cubic-bezier(0.755, 0.05, 0.855, 0.06)",motionEaseOutQuint:"cubic-bezier(0.23, 1, 0.32, 1)",borderRadius:6,sizeUnit:4,sizeStep:4,sizePopupArrow:16,controlHeight:32,zIndexBase:0,zIndexPopupBase:1e3,opacityImage:1,wireframe:false,motion:true},u=me;function w(e,{generateColorPalettes:t,generateNeutralColorPalettes:r}){let{colorSuccess:n,colorWarning:o,colorError:s,colorInfo:i,colorPrimary:c,colorBgBase:m,colorTextBase:l}=e,a=t(c),p=t(n),g=t(o),d=t(s),C=t(i),le=r(m,l),se=e.colorLink||e.colorInfo,P=t(se),ce=new TinyColor(d[1]).mix(new TinyColor(d[3]),50).toHexString();return {...le,colorPrimaryBg:a[1],colorPrimaryBgHover:a[2],colorPrimaryBorder:a[3],colorPrimaryBorderHover:a[4],colorPrimaryHover:a[5],colorPrimary:a[6],colorPrimaryActive:a[7],colorPrimaryTextHover:a[8],colorPrimaryText:a[9],colorPrimaryTextActive:a[10],colorSuccessBg:p[1],colorSuccessBgHover:p[2],colorSuccessBorder:p[3],colorSuccessBorderHover:p[4],colorSuccessHover:p[4],colorSuccess:p[6],colorSuccessActive:p[7],colorSuccessTextHover:p[8],colorSuccessText:p[9],colorSuccessTextActive:p[10],colorErrorBg:d[1],colorErrorBgHover:d[2],colorErrorBgFilledHover:ce,colorErrorBgActive:d[3],colorErrorBorder:d[3],colorErrorBorderHover:d[4],colorErrorHover:d[5],colorError:d[6],colorErrorActive:d[7],colorErrorTextHover:d[8],colorErrorText:d[9],colorErrorTextActive:d[10],colorWarningBg:g[1],colorWarningBgHover:g[2],colorWarningBorder:g[3],colorWarningBorderHover:g[4],colorWarningHover:g[4],colorWarning:g[6],colorWarningActive:g[7],colorWarningTextHover:g[8],colorWarningText:g[9],colorWarningTextActive:g[10],colorInfoBg:C[1],colorInfoBgHover:C[2],colorInfoBorder:C[3],colorInfoBorderHover:C[4],colorInfoHover:C[4],colorInfo:C[6],colorInfoActive:C[7],colorInfoTextHover:C[8],colorInfoText:C[9],colorInfoTextActive:C[10],colorLinkHover:P[4],colorLink:P[6],colorLinkActive:P[7],colorBgMask:new TinyColor("#000").setAlpha(.45).toRgbString(),colorWhite:"#fff"}}var de=e=>{let t=e,r=e,n=e,o=e;return e<6&&e>=5?t=e+1:e<16&&e>=6?t=e+2:e>=16&&(t=16),e<7&&e>=5?r=4:e<8&&e>=7?r=5:e<14&&e>=8?r=6:e<16&&e>=14?r=7:e>=16&&(r=8),e<6&&e>=2?n=1:e>=6&&(n=2),e>4&&e<8?o=4:e>=8&&(o=6),{borderRadius:e,borderRadiusXS:n,borderRadiusSM:r,borderRadiusLG:t,borderRadiusOuter:o}},_=de;function I(e){let{motionUnit:t,motionBase:r,borderRadius:n,lineWidth:o}=e;return {motionDurationFast:`${(r+t).toFixed(1)}s`,motionDurationMid:`${(r+t*2).toFixed(1)}s`,motionDurationSlow:`${(r+t*3).toFixed(1)}s`,lineWidthBold:o+1,..._(n)}}var fe=e=>{let{controlHeight:t}=e;return {controlHeightSM:t*.75,controlHeightXS:t*.5,controlHeightLG:t*1.25}},q=fe;var Ce=e=>{let t=M(e),r=t.map(a=>a.size),n=t.map(a=>a.lineHeight),o=r[1],s=r[0],i=r[2],c=n[1],m=n[0],l=n[2];return {fontSizeSM:s,fontSize:o,fontSizeLG:i,fontSizeXL:r[3],fontSizeHeading1:r[6],fontSizeHeading2:r[5],fontSizeHeading3:r[4],fontSizeHeading4:r[3],fontSizeHeading5:r[2],lineHeight:c,lineHeightLG:l,lineHeightSM:m,fontHeight:Math.round(c*o),fontHeightLG:Math.round(l*i),fontHeightSM:Math.round(m*s),lineHeightHeading1:n[6],lineHeightHeading2:n[5],lineHeightHeading3:n[4],lineHeightHeading4:n[3],lineHeightHeading5:n[2]}},K=Ce;function A(e){let{sizeUnit:t,sizeStep:r}=e;return {sizeXXL:t*(r+8),sizeXL:t*(r+4),sizeLG:t*(r+2),sizeMD:t*(r+1),sizeMS:t*r,size:t*r,sizeSM:t*(r-1),sizeXS:t*(r-2),sizeXXS:t*(r-3)}}var f=(e,t)=>new TinyColor(e).setAlpha(t).toRgbString(),y=(e,t)=>new TinyColor(e).darken(t).toHexString();var J=e=>{let t=generate(e);return {1:t[0],2:t[1],3:t[2],4:t[3],5:t[4],6:t[5],7:t[6],8:t[4],9:t[5],10:t[6]}},Z=(e,t)=>{let r=e||"#fff",n=t||"#000";return {colorBgBase:r,colorTextBase:n,colorText:f(n,.88),colorTextSecondary:f(n,.65),colorTextTertiary:f(n,.45),colorTextQuaternary:f(n,.25),colorFill:f(n,.15),colorFillSecondary:f(n,.06),colorFillTertiary:f(n,.04),colorFillQuaternary:f(n,.02),colorBgSolid:f(n,1),colorBgSolidHover:f(n,.75),colorBgSolidActive:f(n,.95),colorBgLayout:y(r,4),colorBgContainer:y(r,0),colorBgElevated:y(r,0),colorBgSpotlight:f(n,.85),colorBgBlur:"transparent",colorBorder:y(r,15),colorBorderSecondary:y(r,6)}};function B(e){presetPrimaryColors.pink=presetPrimaryColors.magenta,presetPalettes.pink=presetPalettes.magenta;let t=Object.keys(z).map(r=>{let n=e[r]===presetPrimaryColors[r]?presetPalettes[r]:generate(e[r]);return new Array(10).fill(1).reduce((o,s,i)=>(o[`${r}-${i+1}`]=n[i],o[`${r}${i+1}`]=n[i],o),{})}).reduce((r,n)=>(r={...r,...n},r),{});return {...e,...t,...w(e,{generateColorPalettes:J,generateNeutralColorPalettes:Z}),...K(e.fontSize),...A(e),...q(e),...I(e)}}var ee=createTheme(B),oe={token:u,override:{override:u},hashed:true},F=ye__default.createContext(oe);function G(e){return e>=0&&e<=255}function Te(e,t){let{r,g:n,b:o,a:s}=new TinyColor(e).toRgb();if(s<1)return e;let{r:i,g:c,b:m}=new TinyColor(t).toRgb();for(let l=.01;l<=1;l+=.01){let a=Math.round((r-i*(1-l))/l),p=Math.round((n-c*(1-l))/l),g=Math.round((o-m*(1-l))/l);if(G(a)&&G(p)&&G(g))return new TinyColor({r:a,g:p,b:g,a:Math.round(l*100)/100}).toRgbString()}return new TinyColor({r,g:n,b:o,a:1}).toRgbString()}var x=Te;function b(e){let{override:t,...r}=e,n={...t};Object.keys(u).forEach(g=>{delete n[g];});let o={...r,...n},s=480,i=576,c=768,m=992,l=1200,a=1600;return o.motion===false&&(o.motionDurationFast="0s",o.motionDurationMid="0s",o.motionDurationSlow="0s"),{...o,colorFillContent:o.colorFillSecondary,colorFillContentHover:o.colorFill,colorFillAlter:o.colorFillQuaternary,colorBgContainerDisabled:o.colorFillTertiary,colorBorderBg:o.colorBgContainer,colorSplit:x(o.colorBorderSecondary,o.colorBgContainer),colorTextPlaceholder:o.colorTextQuaternary,colorTextDisabled:o.colorTextQuaternary,colorTextHeading:o.colorText,colorTextLabel:o.colorTextSecondary,colorTextDescription:o.colorTextTertiary,colorTextLightSolid:o.colorWhite,colorHighlight:o.colorError,colorBgTextHover:o.colorFillSecondary,colorBgTextActive:o.colorFill,colorIcon:o.colorTextTertiary,colorIconHover:o.colorText,colorErrorOutline:x(o.colorErrorBg,o.colorBgContainer),colorWarningOutline:x(o.colorWarningBg,o.colorBgContainer),fontSizeIcon:o.fontSizeSM,lineWidthFocus:o.lineWidth*3,lineWidth:o.lineWidth,controlOutlineWidth:o.lineWidth*2,controlInteractiveSize:o.controlHeight/2,controlItemBgHover:o.colorFillTertiary,controlItemBgActive:o.colorPrimaryBg,controlItemBgActiveHover:o.colorPrimaryBgHover,controlItemBgActiveDisabled:o.colorFill,controlTmpOutline:o.colorFillQuaternary,controlOutline:x(o.colorPrimaryBg,o.colorBgContainer),lineType:o.lineType,borderRadius:o.borderRadius,borderRadiusXS:o.borderRadiusXS,borderRadiusSM:o.borderRadiusSM,borderRadiusLG:o.borderRadiusLG,fontWeightStrong:600,opacityLoading:.65,linkDecoration:"none",linkHoverDecoration:"none",linkFocusDecoration:"none",controlPaddingHorizontal:12,controlPaddingHorizontalSM:8,paddingXXS:o.sizeXXS,paddingXS:o.sizeXS,paddingSM:o.sizeSM,padding:o.size,paddingMD:o.sizeMD,paddingLG:o.sizeLG,paddingXL:o.sizeXL,paddingContentHorizontalLG:o.sizeLG,paddingContentVerticalLG:o.sizeMS,paddingContentHorizontal:o.sizeMS,paddingContentVertical:o.sizeSM,paddingContentHorizontalSM:o.size,paddingContentVerticalSM:o.sizeXS,marginXXS:o.sizeXXS,marginXS:o.sizeXS,marginSM:o.sizeSM,margin:o.size,marginMD:o.sizeMD,marginLG:o.sizeLG,marginXL:o.sizeXL,marginXXL:o.sizeXXL,boxShadow:`
+      0 6px 16px 0 rgba(0, 0, 0, 0.08),
+      0 3px 6px -4px rgba(0, 0, 0, 0.12),
+      0 9px 28px 8px rgba(0, 0, 0, 0.05)
+    `,boxShadowSecondary:`
+      0 6px 16px 0 rgba(0, 0, 0, 0.08),
+      0 3px 6px -4px rgba(0, 0, 0, 0.12),
+      0 9px 28px 8px rgba(0, 0, 0, 0.05)
+    `,boxShadowTertiary:`
+      0 1px 2px 0 rgba(0, 0, 0, 0.03),
+      0 1px 6px -1px rgba(0, 0, 0, 0.02),
+      0 2px 4px 0 rgba(0, 0, 0, 0.02)
+    `,screenXS:s,screenXSMin:s,screenXSMax:i-1,screenSM:i,screenSMMin:i,screenSMMax:c-1,screenMD:c,screenMDMin:c,screenMDMax:m-1,screenLG:m,screenLGMin:m,screenLGMax:l-1,screenXL:l,screenXLMin:l,screenXLMax:a-1,screenXXL:a,screenXXLMin:a,boxShadowPopoverArrow:"2px 2px 5px rgba(0, 0, 0, 0.05)",boxShadowCard:`
+      0 1px 2px -2px ${new TinyColor("rgba(0, 0, 0, 0.16)").toRgbString()},
+      0 3px 6px 0 ${new TinyColor("rgba(0, 0, 0, 0.12)").toRgbString()},
+      0 5px 12px 4px ${new TinyColor("rgba(0, 0, 0, 0.09)").toRgbString()}
+    `,boxShadowDrawerRight:`
+      -6px 0 16px 0 rgba(0, 0, 0, 0.08),
+      -3px 0 6px -4px rgba(0, 0, 0, 0.12),
+      -9px 0 28px 8px rgba(0, 0, 0, 0.05)
+    `,boxShadowDrawerLeft:`
+      6px 0 16px 0 rgba(0, 0, 0, 0.08),
+      3px 0 6px -4px rgba(0, 0, 0, 0.12),
+      9px 0 28px 8px rgba(0, 0, 0, 0.05)
+    `,boxShadowDrawerUp:`
+      0 6px 16px 0 rgba(0, 0, 0, 0.08),
+      0 3px 6px -4px rgba(0, 0, 0, 0.12),
+      0 9px 28px 8px rgba(0, 0, 0, 0.05)
+    `,boxShadowDrawerDown:`
+      0 -6px 16px 0 rgba(0, 0, 0, 0.08),
+      0 -3px 6px -4px rgba(0, 0, 0, 0.12),
+      0 -9px 28px 8px rgba(0, 0, 0, 0.05)
+    `,boxShadowTabsOverflowLeft:"inset 10px 0 8px -8px rgba(0, 0, 0, 0.08)",boxShadowTabsOverflowRight:"inset -10px 0 8px -8px rgba(0, 0, 0, 0.08)",boxShadowTabsOverflowTop:"inset 0 10px 8px -8px rgba(0, 0, 0, 0.08)",boxShadowTabsOverflowBottom:"inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08)",...n}}var $={lineHeight:true,lineHeightSM:true,lineHeightLG:true,lineHeightHeading1:true,lineHeightHeading2:true,lineHeightHeading3:true,lineHeightHeading4:true,lineHeightHeading5:true,opacityLoading:true,fontWeightStrong:true,zIndexPopupBase:true,zIndexBase:true,opacityImage:true},he={size:true,sizeSM:true,sizeLG:true,sizeMD:true,sizeXS:true,sizeXXS:true,sizeMS:true,sizeXL:true,sizeXXL:true,sizeUnit:true,sizeStep:true,motionBase:true,motionUnit:true},Pe={screenXS:true,screenXSMin:true,screenXSMax:true,screenSM:true,screenSMMin:true,screenSMMax:true,screenMD:true,screenMDMin:true,screenMDMax:true,screenLG:true,screenLGMin:true,screenLGMax:true,screenXL:true,screenXLMin:true,screenXLMax:true,screenXXL:true,screenXXLMin:true},te=(e,t,r)=>{let n=r.getDerivativeToken(e),{override:o,...s}=t,i={...n,override:o};return i=b(i),s&&Object.entries(s).forEach(([c,m])=>{let{theme:l,...a}=m,p=a;l&&(p=te({...i,...a},{override:a},l)),i[c]=p;}),i};function T(){let{token:e,hashed:t,theme:r,override:n,cssVar:o}=ye__default.useContext(F),s=`${Q}-${t||""}`,i=r||ee,[c,m,l]=useCacheToken(i,[u,e],{salt:s,override:n,getComputedToken:te,formatToken:b,cssVar:o&&{prefix:o.prefix,key:o.key,unitless:$,ignore:he,preserve:Pe}});return [i,l,t?m:"",c,o]}var re="ant",O="anticon";var ve=(e,t)=>t||(e?`${re}-${e}`:re),h=ye.createContext({getPrefixCls:ve,iconPrefixCls:O}),{Consumer:Io}=h;var{genStyleHooks:X,genComponentStyleHook:ze,genSubStyleComponent:He}=genStyleUtils({usePrefix:()=>{let{getPrefixCls:e,iconPrefixCls:t}=useContext(h);return {rootPrefixCls:e(),iconPrefixCls:t}},useToken:()=>{let[e,t,r,n,o]=T();return {theme:e,realToken:t,hashId:r,token:n,cssVar:o}},useCSP:()=>{let{csp:e}=useContext(h);return e??{}},getResetStyles:(e,t)=>[{"&":j(e)},v(t?.prefix.iconPrefixCls??O)],getCommonStyle:W,getCompUnitless:(()=>$)});var we=e=>{let{componentCls:t,sizePaddingEdgeHorizontal:r,colorSplit:n,lineWidth:o,textPaddingInline:s,orientationMargin:i,verticalMarginInline:c}=e;return {[t]:{...E(e),borderBlockStart:`${unit(o)} solid ${n}`,"&-vertical":{position:"relative",top:"-0.06em",display:"inline-block",height:"0.9em",marginInline:c,marginBlock:0,verticalAlign:"middle",borderTop:0,borderInlineStart:`${unit(o)} solid ${n}`},"&-horizontal":{display:"flex",clear:"both",width:"100%",minWidth:"100%",margin:`${unit(e.dividerHorizontalGutterMargin)} 0`},[`&-horizontal${t}-with-text`]:{display:"flex",alignItems:"center",margin:`${unit(e.dividerHorizontalWithTextGutterMargin)} 0`,color:e.colorTextHeading,fontWeight:500,fontSize:e.fontSizeLG,whiteSpace:"nowrap",textAlign:"center",borderBlockStart:`0 ${n}`,"&::before, &::after":{position:"relative",width:"50%",borderBlockStart:`${unit(o)} solid transparent`,borderBlockStartColor:"inherit",borderBlockEnd:0,transform:"translateY(50%)",content:"''"}},[`&-horizontal${t}-with-text-left`]:{"&::before":{width:`calc(${i} * 100%)`},"&::after":{width:`calc(100% - ${i} * 100%)`}},[`&-horizontal${t}-with-text-right`]:{"&::before":{width:`calc(100% - ${i} * 100%)`},"&::after":{width:`calc(${i} * 100%)`}},[`${t}-inner-text`]:{display:"inline-block",paddingBlock:0,paddingInline:s},"&-dashed":{background:"none",borderColor:n,borderStyle:"dashed",borderWidth:`${unit(o)} 0 0`},[`&-horizontal${t}-with-text${t}-dashed`]:{"&::before, &::after":{borderStyle:"dashed none none"}},[`&-vertical${t}-dashed`]:{borderInlineStartWidth:o,borderInlineEnd:0,borderBlockStart:0,borderBlockEnd:0},"&-dotted":{background:"none",borderColor:n,borderStyle:"dotted",borderWidth:`${unit(o)} 0 0`},[`&-horizontal${t}-with-text${t}-dotted`]:{"&::before, &::after":{borderStyle:"dotted none none"}},[`&-vertical${t}-dotted`]:{borderInlineStartWidth:o,borderInlineEnd:0,borderBlockStart:0,borderBlockEnd:0},[`&-plain${t}-with-text`]:{color:e.colorText,fontWeight:"normal",fontSize:e.fontSize},[`&-horizontal${t}-with-text-left${t}-no-default-orientation-margin-left`]:{"&::before":{width:0},"&::after":{width:"100%"},[`${t}-inner-text`]:{paddingInlineStart:r}},[`&-horizontal${t}-with-text-right${t}-no-default-orientation-margin-right`]:{"&::before":{width:"100%"},"&::after":{width:0},[`${t}-inner-text`]:{paddingInlineEnd:r}}}}},Ie=e=>({textPaddingInline:"1em",orientationMargin:.05,verticalMarginInline:e.marginXS}),pt=X("Divider",e=>{let t=mergeToken(e,{dividerHorizontalWithTextGutterMargin:e.margin,dividerHorizontalGutterMargin:e.marginLG,sizePaddingEdgeHorizontal:0});return [we(t)]},Ie,{unitless:{orientationMargin:true}});export{pt as default,Ie as prepareComponentToken};

package/es/drag/SortableBoard.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { SortableBoardProps } from './type';
+export declare function SortableBoard<T extends Record<string, any>>({ boardScopeId, boards, itemKey, onDragFinish, className, style, boardClassName, boardStyle, zoneWrapClassName, zoneWrapStyle, itemClassName, itemStyle, renderBoardHeader, renderZoneHeader, renderItem, renderDragHandle, }: SortableBoardProps<T>): React.JSX.Element;
+export default SortableBoard;

package/es/drag/SortableBoard.js

@@ -0,0 +1 @@
+import f,{createContext,useEffect,useMemo,useContext}from'react';import {useDroppable}from'@dnd-kit/core';import {SortableContext,verticalListSortingStrategy,useSortable}from'@dnd-kit/sortable';import {CSS}from'@dnd-kit/utilities';var N=createContext(null);function Z(){let e=useContext(N);if(!e)throw new Error("SortableBoard must be used within SortableBoardProvider");return e}function D(e,n){return e[n]}function k({item:e,itemIndex:n,zone:t,zoneIndex:r,itemKey:p,itemClassName:s,itemStyle:m,renderItem:I,renderDragHandle:d}){let a=D(e,p),{attributes:o,listeners:c,setNodeRef:S,transform:v,transition:u,isDragging:g}=useSortable({id:a,data:{type:"item",zoneId:t.id,itemId:a}}),l=typeof d=="function",b={...m,transform:CSS.Transform.toString(v),transition:u||"transform 180ms ease",willChange:"transform",touchAction:"none",position:"relative",zIndex:g?10:void 0,cursor:l?void 0:"move",opacity:g?.35:1},x=l?d(e,n,t,r,{attributes:o,listeners:c,isDragging:g}):void 0;return f.createElement("div",{ref:S,className:s,style:b,...l?{}:o,...l?{}:c},I(e,n,t,r,x))}function R({zone:e,zoneIndex:n,itemKey:t,itemClassName:r,itemStyle:p,renderZoneHeader:s,renderItem:m,renderDragHandle:I}){let{setNodeRef:d,isOver:a}=useDroppable({id:e.id,data:{type:"zone",zoneId:e.id}});return f.createElement("div",{className:e.className,style:{...e.style}},s?s(e,n):e.title?f.createElement("div",null,e.title):null,f.createElement("div",{ref:d,className:e.bodyClassName,style:{display:"flex",flexDirection:"column",gap:8,minHeight:40,transition:"background-color 160ms ease, border-color 160ms ease",...e.bodyStyle,backgroundColor:a?"#f5f9ff":e.bodyStyle?.backgroundColor}},f.createElement(SortableContext,{items:e.items.map(o=>D(o,t)),strategy:verticalListSortingStrategy},e.items.map((o,c)=>f.createElement(k,{key:String(D(o,t)),item:o,itemIndex:c,zone:e,zoneIndex:n,itemKey:t,itemClassName:r,itemStyle:p,renderItem:m,renderDragHandle:I})))))}function L({boardScopeId:e,boards:n,itemKey:t="id",onDragFinish:r,className:p,style:s,boardClassName:m,boardStyle:I,zoneWrapClassName:d,zoneWrapStyle:a,itemClassName:o,itemStyle:c,renderBoardHeader:S,renderZoneHeader:v,renderItem:u,renderDragHandle:g}){let{registerScope:l,unregisterScope:b,updateScope:x,getPreviewScopeBoards:T}=Z();useEffect(()=>(l(e,{scopeId:e,boards:n,itemKey:t,renderItem:u,onDragFinish:r}),()=>{b(e);}),[]),useEffect(()=>{x(e,{scopeId:e,boards:n,itemKey:t,renderItem:u,onDragFinish:r});},[e,n,t,u,r,x]);let U=useMemo(()=>T(e)??n,[e,n,T]);return f.createElement("div",{className:p,style:s},U.map((i,C)=>f.createElement("div",{key:String(i.id),className:i.className??m,style:{...I,...i.style}},S?S(i,C):i.title?f.createElement("div",null,i.title):null,f.createElement("div",{className:d,style:a},f.createElement(R,{zone:i,zoneIndex:C,itemKey:t,itemClassName:o,itemStyle:c,renderZoneHeader:v,renderItem:u,renderDragHandle:g})))))}var fe=L;export{L as SortableBoard,fe as default};

package/es/drag/SortableBoardProvider.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { UniqueIdentifier } from '@dnd-kit/core';
+import type { SortableBoardProviderProps } from './type';
+interface ProviderContextValue {
+    registerScope: (scopeId: UniqueIdentifier, config: any) => void;
+    unregisterScope: (scopeId: UniqueIdentifier) => void;
+    updateScope: (scopeId: UniqueIdentifier, config: any) => void;
+    getScopeBoards: (scopeId: UniqueIdentifier) => any[];
+    getPreviewScopeBoards: (scopeId: UniqueIdentifier) => any[] | null;
+    activeId: UniqueIdentifier | null;
+}
+export declare function SortableBoardProvider({ children, activationDistance, }: SortableBoardProviderProps): React.JSX.Element;
+export declare function useSortableBoardContext(): ProviderContextValue;
+export {};

package/es/drag/SortableBoardProvider.js

@@ -0,0 +1 @@
+import R,{createContext,useRef,useState,useCallback,useMemo,useContext}from'react';import {useSensors,useSensor,PointerSensor,pointerWithin,rectIntersection,getFirstCollision,DndContext,DragOverlay}from'@dnd-kit/core';import {arrayMove}from'@dnd-kit/sortable';var H=createContext(null);function x(n,f){return n[f]}function Ie(n="both"){return n==="both"||n==="in-only"}function ge(n="both"){return n==="both"||n==="out-only"}function T(n){return n.map(f=>({...f,items:[...f.items]}))}function U(n,f){for(let[s,c]of n)for(let i=0;i<c.boards.length;i++){let r=c.boards[i],l=r.items.findIndex(C=>x(C,c.itemKey)===f);if(l!==-1)return {scopeId:s,zone:r,zoneIndex:i,itemIndex:l,item:r.items[l]}}return null}function A(n,f){for(let[s,c]of n)for(let i=0;i<c.boards.length;i++){let r=c.boards[i];if(r.id===f)return {scopeId:s,zone:r,zoneIndex:i,scope:c}}return null}function me(n,f){if(!n)return null;let s=n.data.current;if(s?.zoneId!=null)return s.zoneId;for(let[,c]of f)for(let i of c.boards)if(i.id===n.id||i.items.some(r=>x(r,c.itemKey)===n.id))return i.id;return null}function xe({children:n,activationDistance:f=8}){let s=useRef(new Map),[c,i]=useState(null),[r,l]=useState(null),C=useSensors(useSensor(PointerSensor,{activationConstraint:{distance:f}})),P=useCallback((e,o)=>{s.current.set(e,o);},[]),E=useCallback(e=>{s.current.delete(e);},[]),w=useCallback((e,o)=>{s.current.set(e,o);},[]),B=useCallback(e=>s.current.get(e)?.boards??[],[]),L=useCallback(e=>r?r.get(e)??null:null,[r]),W=useCallback(e=>{let o=pointerWithin(e);if(o.length>0)return o;let d=rectIntersection(e);return getFirstCollision(d,"id")?d:[]},[]),j=({active:e})=>{i(e.id);let o=new Map;for(let[d,t]of s.current)o.set(d,T(t.boards));l(o);},J=({active:e,over:o})=>{if(!o||!r)return;let d=new Map;for(let[u,q]of s.current)d.set(u,{...q,boards:r.get(u)??q.boards});let t=U(d,e.id);if(!t)return;let a=me(o,d);if(a==null)return;let g=A(d,t.zone.id),p=A(d,a);if(!g||!p)return;let m=g.zone,S=p.zone,O=m.id!==S.id,$=m.transferMode??"both",ee=S.transferMode??"both";if(O&&(!ge($)||!Ie(ee)))return;let I=new Map(r),b=T(I.get(t.scopeId)??[]),h=t.scopeId===p.scopeId?b:T(I.get(p.scopeId)??[]),M=b.findIndex(u=>u.id===m.id),K=h.findIndex(u=>u.id===S.id);if(M===-1||K===-1)return;let Z=b[M].items,y=h[K].items,z=d.get(t.scopeId);if(!z)return;let D=Z.findIndex(u=>x(u,z.itemKey)===e.id);if(D===-1)return;if(!O&&t.scopeId===p.scopeId){let u=y.findIndex(q=>x(q,z.itemKey)===o.id);if(u===-1||u===D)return;b[M].items=arrayMove(Z,D,u),I.set(t.scopeId,b),l(I);return}let[k]=Z.splice(D,1);if(!k)return;let F=d.get(p.scopeId);if(!F)return;let V=y.length,N=y.findIndex(u=>x(u,F.itemKey)===o.id);N!==-1&&(V=N),y.splice(V,0,k),I.set(t.scopeId,b),I.set(p.scopeId,h),l(I);},Q=({active:e,over:o})=>{if(!r){i(null);return}let d=new Map;for(let[m,S]of s.current)d.set(m,{...S,boards:r.get(m)??S.boards});let t=U(s.current,e.id),a=U(d,e.id);if(i(null),!o||!t||!a){l(null);return}let g=s.current.get(t.scopeId),p=s.current.get(a.scopeId);if(!g||!p){l(null);return}if(t.scopeId===a.scopeId&&t.zone.id===a.zone.id&&t.itemIndex===a.itemIndex){l(null);return}g.onDragFinish?.({scopeId:t.scopeId,boards:r.get(t.scopeId)??g.boards}),t.scopeId!==a.scopeId&&p.onDragFinish?.({scopeId:a.scopeId,boards:r.get(a.scopeId)??p.boards}),l(null);},X=()=>{i(null),l(null);},Y=(()=>{if(c==null)return null;let e=new Map;for(let[t,a]of s.current)e.set(t,{...a,boards:r?.get(t)??a.boards});let o=U(e,c);if(!o)return null;let d=e.get(o.scopeId);return d?d.renderItem(o.item,o.itemIndex,o.zone,o.zoneIndex):null})(),_=useMemo(()=>({registerScope:P,unregisterScope:E,updateScope:w,getScopeBoards:B,getPreviewScopeBoards:L,activeId:c}),[P,E,w,B,L,c]);return R.createElement(H.Provider,{value:_},R.createElement(DndContext,{collisionDetection:W,sensors:C,onDragStart:j,onDragOver:J,onDragEnd:Q,onDragCancel:X},n,R.createElement(DragOverlay,null,Y)))}function ye(){let n=useContext(H);if(!n)throw new Error("SortableBoard must be used within SortableBoardProvider");return n}export{xe as SortableBoardProvider,ye as useSortableBoardContext};

package/es/drag/SortableList.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { DragHandleProps, DragFinishParams, SortableListProps } from './type';
+export type { DragHandleProps, DragFinishParams, SortableListProps };
+/**
+ * 通用拖拽排序列表组件
+ */
+export declare function SortableList<T extends Record<string, any>>({ items, onDragFinish, renderItem, renderDragHandle, itemKey, direction, className, style, itemClassName, itemStyle, activationDistance, }: SortableListProps<T>): React.JSX.Element;
+export default SortableList;

package/es/drag/SortableList.js

@@ -0,0 +1 @@
+import t,{useState,useMemo}from'react';import {useSensors,useSensor,PointerSensor,DndContext,closestCenter,DragOverlay}from'@dnd-kit/core';import {restrictToHorizontalAxis,restrictToVerticalAxis}from'@dnd-kit/modifiers';import {arrayMove,SortableContext,horizontalListSortingStrategy,verticalListSortingStrategy,useSortable}from'@dnd-kit/sortable';import {CSS}from'@dnd-kit/utilities';function o(e,a){return e[a]}function B({item:e,index:a,itemKey:u,renderItem:x,renderDragHandle:r,className:S,style:I}){let y=o(e,u),{attributes:d,listeners:l,setNodeRef:v,transform:s,transition:c,isDragging:g}=useSortable({id:y}),i=typeof r=="function",h={...I,transform:CSS.Transform.toString(s),transition:c||"transform 200ms ease",willChange:"transform",touchAction:"none",position:"relative",zIndex:g?10:void 0,cursor:i?void 0:"move",flexShrink:0,opacity:g?.3:1},m=i?r(e,a,{attributes:d,listeners:l,isDragging:g}):void 0;return t.createElement("div",{ref:v,style:h,className:S,...i?{}:d,...i?{}:l},x(e,a,m))}function G({items:e,onDragFinish:a,renderItem:u,renderDragHandle:x,itemKey:r="id",direction:S="horizontal",className:I,style:y,itemClassName:d,itemStyle:l,activationDistance:v=8}){let[s,c]=useState(null),g=useSensors(useSensor(PointerSensor,{activationConstraint:{distance:v}})),i=S==="horizontal"?[restrictToHorizontalAxis]:[restrictToVerticalAxis],h=S==="horizontal"?horizontalListSortingStrategy:verticalListSortingStrategy,m=useMemo(()=>s==null?null:e.find(n=>o(n,r)===s)??null,[s,e,r]);return t.createElement(DndContext,{collisionDetection:closestCenter,sensors:g,modifiers:i,onDragStart:({active:n})=>{c(n.id);},onDragEnd:({active:n,over:f})=>{if(c(null),!f||n.id===f.id)return;let p=e.findIndex(b=>o(b,r)===n.id),D=e.findIndex(b=>o(b,r)===f.id);if(p===-1||D===-1)return;let T=e[p],P=e[D];if(!T||!P)return;let C=arrayMove(e,p,D);a?.({activeItem:T,overItem:P,oldIndex:p,newIndex:D,newItems:C});},onDragCancel:()=>{c(null);}},t.createElement(SortableContext,{items:e.map(n=>o(n,r)),strategy:h},t.createElement("div",{className:I,style:y},e.map((n,f)=>t.createElement(B,{key:String(o(n,r)),item:n,index:f,itemKey:r,renderItem:u,renderDragHandle:x,className:d,style:l})))),t.createElement(DragOverlay,null,m?t.createElement("div",{className:d,style:{...l,flexShrink:0,cursor:"grabbing"}},u(m,e.findIndex(n=>o(n,r)===s))):null))}var K=G;export{G as SortableList,K as default};

package/es/drag/SortableZone.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { SortableZonesProps } from './type';
+/**
+ * 多区域受控拖拽组件
+ */
+export declare function SortableZones<T extends Record<string, any>>({ zones, itemKey, onDragFinish, activationDistance, className, style, itemClassName, itemStyle, renderZoneHeader, renderItem, renderDragHandle, }: SortableZonesProps<T>): React.JSX.Element;
+export default SortableZones;

package/es/drag/SortableZone.js

@@ -0,0 +1 @@
+import h,{useState,useMemo,useCallback}from'react';import {useSensors,useSensor,PointerSensor,pointerWithin,rectIntersection,getFirstCollision,DndContext,DragOverlay,useDroppable}from'@dnd-kit/core';import {arrayMove,SortableContext,verticalListSortingStrategy,useSortable}from'@dnd-kit/sortable';import {CSS}from'@dnd-kit/utilities';function f(e,n){return e[n]}function re({item:e,itemIndex:n,zone:o,zoneIndex:t,itemKey:r,itemClassName:a,itemStyle:I,renderItem:v,renderDragHandle:b}){let Z=f(e,r),{attributes:m,listeners:p,setNodeRef:R,transform:N,transition:T,isDragging:P}=useSortable({id:Z,data:{type:"item",zoneId:o.id,itemId:Z}}),S=typeof b=="function",C={...I,transform:CSS.Transform.toString(N),transition:T||"transform 180ms ease",willChange:"transform",touchAction:"none",position:"relative",zIndex:P?10:void 0,cursor:S?void 0:"move",opacity:P?.35:1},E=S?b(e,n,o,t,{attributes:m,listeners:p,isDragging:P}):void 0;return h.createElement("div",{ref:R,className:a,style:C,...S?{}:m,...S?{}:p},v(e,n,o,t,E))}function W({zone:e,zoneIndex:n,itemKey:o,itemClassName:t,itemStyle:r,renderZoneHeader:a,renderItem:I,renderDragHandle:v}){let{setNodeRef:b,isOver:Z}=useDroppable({id:e.id,data:{type:"zone",zoneId:e.id}});return h.createElement("div",{className:e.className,style:{...e.style}},a?a(e,n):e.title?h.createElement("div",null,e.title):null,h.createElement("div",{ref:b,className:e.bodyClassName,style:{display:"flex",flexDirection:"column",gap:8,minHeight:40,transition:"background-color 160ms ease, border-color 160ms ease",...e.bodyStyle,backgroundColor:Z?"#f5f9ff":e.bodyStyle?.backgroundColor}},h.createElement(SortableContext,{items:e.items.map(m=>f(m,o)),strategy:verticalListSortingStrategy},e.items.map((m,p)=>h.createElement(re,{key:String(f(m,o)),item:m,itemIndex:p,zone:e,zoneIndex:n,itemKey:o,itemClassName:t,itemStyle:r,renderItem:I,renderDragHandle:v})))))}function O(e,n,o){for(let t=0;t<e.length;t++){let r=e[t],a=r.items.findIndex(I=>f(I,o)===n);if(a!==-1)return {zone:r,zoneIndex:t,itemIndex:a,item:r.items[a]}}return null}function G(e="both"){return e==="both"||e==="in-only"}function J(e="both"){return e==="both"||e==="out-only"}function Q(e){return e.map(n=>({...n,items:[...n.items]}))}function V(e,n,o){if(e.length!==n.length)return  false;for(let t=0;t<e.length;t++){if(e[t].id!==n[t].id||e[t].items.length!==n[t].items.length)return  false;for(let r=0;r<e[t].items.length;r++)if(f(e[t].items[r],o)!==f(n[t].items[r],o))return  false}return  true}function Ie(e,n,o){if(!e)return null;let t=e.data.current;if(t?.zoneId!=null)return t.zoneId;for(let r of n)if(r.id===e.id||r.items.some(a=>f(a,o)===e.id))return r.id;return null}function pe({zones:e,itemKey:n="id",onDragFinish:o,activationDistance:t=8,className:r,style:a,itemClassName:I,itemStyle:v,renderZoneHeader:b,renderItem:Z,renderDragHandle:m}){let[p,R]=useState(null),[N,T]=useState(null),P=useSensors(useSensor(PointerSensor,{activationConstraint:{distance:t}})),S=N??e,C=useMemo(()=>p==null?null:O(e,p,n),[p,e,n]),E=C?.item??null,X=useCallback(d=>{let l=pointerWithin(d);if(l.length>0)return l;let s=rectIntersection(d);return getFirstCollision(s,"id")?s:[]},[]);return h.createElement(DndContext,{collisionDetection:X,sensors:P,onDragStart:({active:d})=>{R(d.id),T(Q(e));},onDragOver:({active:d,over:l})=>{if(!l)return;let s=N??e,c=O(s,d.id,n);if(!c)return;let u=Ie(l,s,n);if(u==null)return;let x=s.find(i=>i.id===c.zone.id),D=s.find(i=>i.id===u);if(!x||!D)return;let L=x.transferMode??"both",y=D.transferMode??"both",H=x.id!==D.id;if(H&&(!J(L)||!G(y)))return;let g=Q(s),q=g.findIndex(i=>i.id===x.id),w=g.findIndex(i=>i.id===D.id);if(q===-1||w===-1)return;let U=g[q].items,M=g[w].items,z=U.findIndex(i=>f(i,n)===d.id);if(z===-1)return;if(!H){let i=M.findIndex(_=>f(_,n)===l.id);if(i===-1||i===z)return;let Y=arrayMove(U,z,i);g[q].items=Y,V(s,g,n)||T(g);return}let[F]=U.splice(z,1);if(!F)return;let A=M.length,j=M.findIndex(i=>f(i,n)===l.id);j!==-1&&(A=j),M.splice(A,0,F),V(s,g,n)||T(g);},onDragEnd:({active:d,over:l})=>{let s=N??e;if(R(null),T(null),!l)return;let c=O(e,d.id,n),u=O(s,d.id,n);if(!c||!u)return;let x=e.find(y=>y.id===c.zone.id),D=s.find(y=>y.id===u.zone.id);if(!x||!D)return;if(x.id!==D.id){let y=x.transferMode??"both",H=D.transferMode??"both";if(!J(y)||!G(H))return}c.zone.id===u.zone.id&&c.itemIndex===u.itemIndex||o?.({activeItem:c.item,fromZoneId:c.zone.id,toZoneId:u.zone.id,oldIndex:c.itemIndex,newIndex:u.itemIndex,newZones:s});},onDragCancel:()=>{R(null),T(null);}},h.createElement("div",{className:r,style:a},S.map((d,l)=>h.createElement(W,{key:String(d.id),zone:d,zoneIndex:l,itemKey:n,itemClassName:I,itemStyle:v,renderZoneHeader:b,renderItem:Z,renderDragHandle:m}))),h.createElement(DragOverlay,null,E?h.createElement("div",{className:I,style:{...v,cursor:"grabbing"}},Z(E,C?.itemIndex??-1,C?.zone,C?.zoneIndex??-1)):null))}var ke=pe;export{pe as SortableZones,ke as default};

package/es/drag/SortableZoneShared.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import type { UniqueIdentifier } from '@dnd-kit/core';
+import type { DragHandleProps, DragZone } from './type';
+export interface SortableZoneItemProps<T extends Record<string, any>> {
+    item: T;
+    itemIndex: number;
+    zone: DragZone<T>;
+    zoneIndex: number;
+    itemKey: keyof T;
+    itemClassName?: string;
+    itemStyle?: React.CSSProperties;
+    renderItem: (item: T, itemIndex: number, zone: DragZone<T>, zoneIndex: number, dragHandle?: React.ReactNode) => React.ReactNode;
+    renderDragHandle?: (item: T, itemIndex: number, zone: DragZone<T>, zoneIndex: number, dragHandleProps: DragHandleProps) => React.ReactNode;
+}
+export interface ZoneContainerProps<T extends Record<string, any>> {
+    zone: DragZone<T>;
+    zoneIndex: number;
+    itemKey: keyof T;
+    itemClassName?: string;
+    itemStyle?: React.CSSProperties;
+    renderZoneHeader?: (zone: DragZone<T>, zoneIndex: number) => React.ReactNode;
+    renderItem: (item: T, itemIndex: number, zone: DragZone<T>, zoneIndex: number, dragHandle?: React.ReactNode) => React.ReactNode;
+    renderDragHandle?: (item: T, itemIndex: number, zone: DragZone<T>, zoneIndex: number, dragHandleProps: DragHandleProps) => React.ReactNode;
+}
+/**
+ * 获取元素 id
+ */
+export declare function getItemId<T extends Record<string, any>>(item: T, itemKey: keyof T): UniqueIdentifier;
+/**
+ * 单个排序项
+ */
+export declare function SortableZoneItem<T extends Record<string, any>>({ item, itemIndex, zone, zoneIndex, itemKey, itemClassName, itemStyle, renderItem, renderDragHandle, }: SortableZoneItemProps<T>): React.JSX.Element;
+/**
+ * 单个区域容器
+ */
+export declare function ZoneContainer<T extends Record<string, any>>({ zone, zoneIndex, itemKey, itemClassName, itemStyle, renderZoneHeader, renderItem, renderDragHandle, }: ZoneContainerProps<T>): React.JSX.Element;

package/es/drag/SortableZoneShared.js

@@ -0,0 +1 @@
+import o from'react';import {useSortable,SortableContext,verticalListSortingStrategy}from'@dnd-kit/sortable';import {useDroppable}from'@dnd-kit/core';import {CSS}from'@dnd-kit/utilities';function u(e,t){return e[t]}function Z({item:e,itemIndex:t,zone:r,zoneIndex:a,itemKey:c,itemClassName:i,itemStyle:g,renderItem:f,renderDragHandle:d}){let s=u(e,c),{attributes:n,listeners:m,setNodeRef:y,transform:b,transition:x,isDragging:p}=useSortable({id:s,data:{type:"item",zoneId:r.id,itemId:s}}),l=typeof d=="function",I={...g,transform:CSS.Transform.toString(b),transition:x||"transform 180ms ease",willChange:"transform",touchAction:"none",position:"relative",zIndex:p?10:void 0,cursor:l?void 0:"move",opacity:p?.35:1},S=l?d(e,t,r,a,{attributes:n,listeners:m,isDragging:p}):void 0;return o.createElement("div",{ref:y,className:i,style:I,...l?{}:n,...l?{}:m},f(e,t,r,a,S))}function h({zone:e,zoneIndex:t,itemKey:r,itemClassName:a,itemStyle:c,renderZoneHeader:i,renderItem:g,renderDragHandle:f}){let{setNodeRef:d,isOver:s}=useDroppable({id:e.id,data:{type:"zone",zoneId:e.id}});return o.createElement("div",{className:e.className,style:{...e.style}},i?i(e,t):e.title?o.createElement("div",null,e.title):null,o.createElement("div",{ref:d,className:e.bodyClassName,style:{display:"flex",flexDirection:"column",gap:8,minHeight:40,transition:"background-color 160ms ease, border-color 160ms ease",...e.bodyStyle,backgroundColor:s?"#f5f9ff":e.bodyStyle?.backgroundColor}},o.createElement(SortableContext,{items:e.items.map(n=>u(n,r)),strategy:verticalListSortingStrategy},e.items.map((n,m)=>o.createElement(Z,{key:String(u(n,r)),item:n,itemIndex:m,zone:e,zoneIndex:t,itemKey:r,itemClassName:a,itemStyle:c,renderItem:g,renderDragHandle:f})))))}export{Z as SortableZoneItem,h as ZoneContainer,u as getItemId};

package/es/drag/index.d.ts

@@ -0,0 +1,12 @@
+import { SortableList } from './SortableList';
+import { SortableZones } from './SortableZone';
+import { SortableBoard } from './SortableBoard';
+import { SortableBoardProvider } from './SortableBoardProvider';
+export type { Direction, TransferMode, DragHandleProps, DragFinishParams, SortableListProps, DragZone, ZoneDragFinishParams, SortableZonesProps, MultiZoneDragFinishParams, MultiSortableZonesProps, DragBoard, DragBoardFinishParams, SortableBoardProps, SortableBoardProviderProps, } from './type';
+declare const Drag: {
+    SortableList: typeof SortableList;
+    SortableZones: typeof SortableZones;
+    SortableBoard: typeof SortableBoard;
+    SortableBoardProvider: typeof SortableBoardProvider;
+};
+export default Drag;

package/es/drag/index.js

@@ -0,0 +1 @@
+import A,{createContext,useState,useMemo,useCallback,useRef,useEffect,useContext}from'react';import {useSensors,useSensor,PointerSensor,DndContext,closestCenter,DragOverlay,pointerWithin,rectIntersection,getFirstCollision,useDroppable}from'@dnd-kit/core';import {restrictToHorizontalAxis,restrictToVerticalAxis}from'@dnd-kit/modifiers';import {arrayMove,SortableContext,horizontalListSortingStrategy,verticalListSortingStrategy,useSortable}from'@dnd-kit/sortable';import {CSS}from'@dnd-kit/utilities';function V(e,n){return e[n]}function Le({item:e,index:n,itemKey:o,renderItem:r,renderDragHandle:t,className:s,style:u}){let b=V(e,o),{attributes:v,listeners:x,setNodeRef:S,transform:I,transition:y,isDragging:h}=useSortable({id:b}),m=typeof t=="function",q={...u,transform:CSS.Transform.toString(I),transition:y||"transform 200ms ease",willChange:"transform",touchAction:"none",position:"relative",zIndex:h?10:void 0,cursor:m?void 0:"move",flexShrink:0,opacity:h?.3:1},C=m?t(e,n,{attributes:v,listeners:x,isDragging:h}):void 0;return A.createElement("div",{ref:S,style:q,className:s,...m?{}:v,...m?{}:x},r(e,n,C))}function se({items:e,onDragFinish:n,renderItem:o,renderDragHandle:r,itemKey:t="id",direction:s="horizontal",className:u,style:b,itemClassName:v,itemStyle:x,activationDistance:S=8}){let[I,y]=useState(null),h=useSensors(useSensor(PointerSensor,{activationConstraint:{distance:S}})),m=s==="horizontal"?[restrictToHorizontalAxis]:[restrictToVerticalAxis],q=s==="horizontal"?horizontalListSortingStrategy:verticalListSortingStrategy,C=useMemo(()=>I==null?null:e.find(i=>V(i,t)===I)??null,[I,e,t]);return A.createElement(DndContext,{collisionDetection:closestCenter,sensors:h,modifiers:m,onDragStart:({active:i})=>{y(i.id);},onDragEnd:({active:i,over:a})=>{if(y(null),!a||i.id===a.id)return;let f=e.findIndex(g=>V(g,t)===i.id),c=e.findIndex(g=>V(g,t)===a.id);if(f===-1||c===-1)return;let d=e[f],p=e[c];if(!d||!p)return;let l=arrayMove(e,f,c);n?.({activeItem:d,overItem:p,oldIndex:f,newIndex:c,newItems:l});},onDragCancel:()=>{y(null);}},A.createElement(SortableContext,{items:e.map(i=>V(i,t)),strategy:q},A.createElement("div",{className:u,style:b},e.map((i,a)=>A.createElement(Le,{key:String(V(i,t)),item:i,index:a,itemKey:t,renderItem:o,renderDragHandle:r,className:v,style:x})))),A.createElement(DragOverlay,null,C?A.createElement("div",{className:v,style:{...x,flexShrink:0,cursor:"grabbing"}},o(C,e.findIndex(i=>V(i,t)===I))):null))}function M(e,n){return e[n]}function Ae({item:e,itemIndex:n,zone:o,zoneIndex:r,itemKey:t,itemClassName:s,itemStyle:u,renderItem:b,renderDragHandle:v}){let x=M(e,t),{attributes:S,listeners:I,setNodeRef:y,transform:h,transition:m,isDragging:q}=useSortable({id:x,data:{type:"item",zoneId:o.id,itemId:x}}),C=typeof v=="function",U={...u,transform:CSS.Transform.toString(h),transition:m||"transform 180ms ease",willChange:"transform",touchAction:"none",position:"relative",zIndex:q?10:void 0,cursor:C?void 0:"move",opacity:q?.35:1},N=C?v(e,n,o,r,{attributes:S,listeners:I,isDragging:q}):void 0;return A.createElement("div",{ref:y,className:s,style:U,...C?{}:S,...C?{}:I},b(e,n,o,r,N))}function ne({zone:e,zoneIndex:n,itemKey:o,itemClassName:r,itemStyle:t,renderZoneHeader:s,renderItem:u,renderDragHandle:b}){let{setNodeRef:v,isOver:x}=useDroppable({id:e.id,data:{type:"zone",zoneId:e.id}});return A.createElement("div",{className:e.className,style:{...e.style}},s?s(e,n):e.title?A.createElement("div",null,e.title):null,A.createElement("div",{ref:v,className:e.bodyClassName,style:{display:"flex",flexDirection:"column",gap:8,minHeight:40,transition:"background-color 160ms ease, border-color 160ms ease",...e.bodyStyle,backgroundColor:x?"#f5f9ff":e.bodyStyle?.backgroundColor}},A.createElement(SortableContext,{items:e.items.map(S=>M(S,o)),strategy:verticalListSortingStrategy},e.items.map((S,I)=>A.createElement(Ae,{key:String(M(S,o)),item:S,itemIndex:I,zone:e,zoneIndex:n,itemKey:o,itemClassName:r,itemStyle:t,renderItem:u,renderDragHandle:b})))))}function te(e,n,o){for(let r=0;r<e.length;r++){let t=e[r],s=t.items.findIndex(u=>M(u,o)===n);if(s!==-1)return {zone:t,zoneIndex:r,itemIndex:s,item:t.items[s]}}return null}function de(e="both"){return e==="both"||e==="in-only"}function ce(e="both"){return e==="both"||e==="out-only"}function le(e){return e.map(n=>({...n,items:[...n.items]}))}function ue(e,n,o){if(e.length!==n.length)return  false;for(let r=0;r<e.length;r++){if(e[r].id!==n[r].id||e[r].items.length!==n[r].items.length)return  false;for(let t=0;t<e[r].items.length;t++)if(M(e[r].items[t],o)!==M(n[r].items[t],o))return  false}return  true}function en(e,n,o){if(!e)return null;let r=e.data.current;if(r?.zoneId!=null)return r.zoneId;for(let t of n)if(t.id===e.id||t.items.some(s=>M(s,o)===e.id))return t.id;return null}function fe({zones:e,itemKey:n="id",onDragFinish:o,activationDistance:r=8,className:t,style:s,itemClassName:u,itemStyle:b,renderZoneHeader:v,renderItem:x,renderDragHandle:S}){let[I,y]=useState(null),[h,m]=useState(null),q=useSensors(useSensor(PointerSensor,{activationConstraint:{distance:r}})),C=h??e,U=useMemo(()=>I==null?null:te(e,I,n),[I,e,n]),N=U?.item??null,B=useCallback(d=>{let p=pointerWithin(d);if(p.length>0)return p;let l=rectIntersection(d);return getFirstCollision(l,"id")?l:[]},[]);return A.createElement(DndContext,{collisionDetection:B,sensors:q,onDragStart:({active:d})=>{y(d.id),m(le(e));},onDragOver:({active:d,over:p})=>{if(!p)return;let l=h??e,g=te(l,d.id,n);if(!g)return;let T=en(p,l,n);if(T==null)return;let E=l.find(D=>D.id===g.zone.id),k=l.find(D=>D.id===T);if(!E||!k)return;let $=E.transferMode??"both",P=k.transferMode??"both",z=E.id!==k.id;if(z&&(!ce($)||!de(P)))return;let R=le(l),w=R.findIndex(D=>D.id===E.id),j=R.findIndex(D=>D.id===k.id);if(w===-1||j===-1)return;let O=R[w].items,L=R[j].items,H=O.findIndex(D=>M(D,n)===d.id);if(H===-1)return;if(!z){let D=L.findIndex(Z=>M(Z,n)===p.id);if(D===-1||D===H)return;let K=arrayMove(O,H,D);R[w].items=K,ue(l,R,n)||m(R);return}let[F]=O.splice(H,1);if(!F)return;let J=L.length,Q=L.findIndex(D=>M(D,n)===p.id);Q!==-1&&(J=Q),L.splice(J,0,F),ue(l,R,n)||m(R);},onDragEnd:({active:d,over:p})=>{let l=h??e;if(y(null),m(null),!p)return;let g=te(e,d.id,n),T=te(l,d.id,n);if(!g||!T)return;let E=e.find(P=>P.id===g.zone.id),k=l.find(P=>P.id===T.zone.id);if(!E||!k)return;if(E.id!==k.id){let P=E.transferMode??"both",z=k.transferMode??"both";if(!ce(P)||!de(z))return}g.zone.id===T.zone.id&&g.itemIndex===T.itemIndex||o?.({activeItem:g.item,fromZoneId:g.zone.id,toZoneId:T.zone.id,oldIndex:g.itemIndex,newIndex:T.itemIndex,newZones:l});},onDragCancel:()=>{y(null),m(null);}},A.createElement("div",{className:t,style:s},C.map((d,p)=>A.createElement(ne,{key:String(d.id),zone:d,zoneIndex:p,itemKey:n,itemClassName:u,itemStyle:b,renderZoneHeader:v,renderItem:x,renderDragHandle:S}))),A.createElement(DragOverlay,null,N?A.createElement("div",{className:u,style:{...b,cursor:"grabbing"}},x(N,U?.itemIndex??-1,U?.zone,U?.zoneIndex??-1)):null))}var pe=createContext(null);function Y(e,n){return e[n]}function pn(e="both"){return e==="both"||e==="in-only"}function In(e="both"){return e==="both"||e==="out-only"}function ie(e){return e.map(n=>({...n,items:[...n.items]}))}function re(e,n){for(let[o,r]of e)for(let t=0;t<r.boards.length;t++){let s=r.boards[t],u=s.items.findIndex(b=>Y(b,r.itemKey)===n);if(u!==-1)return {scopeId:o,zone:s,zoneIndex:t,itemIndex:u,item:s.items[u]}}return null}function me(e,n){for(let[o,r]of e)for(let t=0;t<r.boards.length;t++){let s=r.boards[t];if(s.id===n)return {scopeId:o,zone:s,zoneIndex:t,scope:r}}return null}function xn(e,n){if(!e)return null;let o=e.data.current;if(o?.zoneId!=null)return o.zoneId;for(let[,r]of n)for(let t of r.boards)if(t.id===e.id||t.items.some(s=>Y(s,r.itemKey)===e.id))return t.id;return null}function Ie({children:e,activationDistance:n=8}){let o=useRef(new Map),[r,t]=useState(null),[s,u]=useState(null),b=useSensors(useSensor(PointerSensor,{activationConstraint:{distance:n}})),v=useCallback((i,a)=>{o.current.set(i,a);},[]),x=useCallback(i=>{o.current.delete(i);},[]),S=useCallback((i,a)=>{o.current.set(i,a);},[]),I=useCallback(i=>o.current.get(i)?.boards??[],[]),y=useCallback(i=>s?s.get(i)??null:null,[s]),h=useCallback(i=>{let a=pointerWithin(i);if(a.length>0)return a;let f=rectIntersection(i);return getFirstCollision(f,"id")?f:[]},[]),m=({active:i})=>{t(i.id);let a=new Map;for(let[f,c]of o.current)a.set(f,ie(c.boards));u(a);},q=({active:i,over:a})=>{if(!a||!s)return;let f=new Map;for(let[Z,ee]of o.current)f.set(Z,{...ee,boards:s.get(Z)??ee.boards});let c=re(f,i.id);if(!c)return;let d=xn(a,f);if(d==null)return;let p=me(f,c.zone.id),l=me(f,d);if(!p||!l)return;let g=p.zone,T=l.zone,E=g.id!==T.id,k=g.transferMode??"both",$=T.transferMode??"both";if(E&&(!In(k)||!pn($)))return;let P=new Map(s),z=ie(P.get(c.scopeId)??[]),R=c.scopeId===l.scopeId?z:ie(P.get(l.scopeId)??[]),w=z.findIndex(Z=>Z.id===g.id),j=R.findIndex(Z=>Z.id===T.id);if(w===-1||j===-1)return;let O=z[w].items,L=R[j].items,H=f.get(c.scopeId);if(!H)return;let F=O.findIndex(Z=>Y(Z,H.itemKey)===i.id);if(F===-1)return;if(!E&&c.scopeId===l.scopeId){let Z=L.findIndex(ee=>Y(ee,H.itemKey)===a.id);if(Z===-1||Z===F)return;z[w].items=arrayMove(O,F,Z),P.set(c.scopeId,z),u(P);return}let[J]=O.splice(F,1);if(!J)return;let Q=f.get(l.scopeId);if(!Q)return;let D=L.length,K=L.findIndex(Z=>Y(Z,Q.itemKey)===a.id);K!==-1&&(D=K),L.splice(D,0,J),P.set(c.scopeId,z),P.set(l.scopeId,R),u(P);},C=({active:i,over:a})=>{if(!s){t(null);return}let f=new Map;for(let[g,T]of o.current)f.set(g,{...T,boards:s.get(g)??T.boards});let c=re(o.current,i.id),d=re(f,i.id);if(t(null),!a||!c||!d){u(null);return}let p=o.current.get(c.scopeId),l=o.current.get(d.scopeId);if(!p||!l){u(null);return}if(c.scopeId===d.scopeId&&c.zone.id===d.zone.id&&c.itemIndex===d.itemIndex){u(null);return}p.onDragFinish?.({scopeId:c.scopeId,boards:s.get(c.scopeId)??p.boards}),c.scopeId!==d.scopeId&&l.onDragFinish?.({scopeId:d.scopeId,boards:s.get(d.scopeId)??l.boards}),u(null);},U=()=>{t(null),u(null);},N=(()=>{if(r==null)return null;let i=new Map;for(let[c,d]of o.current)i.set(c,{...d,boards:s?.get(c)??d.boards});let a=re(i,r);if(!a)return null;let f=i.get(a.scopeId);return f?f.renderItem(a.item,a.itemIndex,a.zone,a.zoneIndex):null})(),B=useMemo(()=>({registerScope:v,unregisterScope:x,updateScope:S,getScopeBoards:I,getPreviewScopeBoards:y,activeId:r}),[v,x,S,I,y,r]);return A.createElement(pe.Provider,{value:B},A.createElement(DndContext,{collisionDetection:h,sensors:b,onDragStart:m,onDragOver:q,onDragEnd:C,onDragCancel:U},e,A.createElement(DragOverlay,null,N)))}function xe(){let e=useContext(pe);if(!e)throw new Error("SortableBoard must be used within SortableBoardProvider");return e}function De({boardScopeId:e,boards:n,itemKey:o="id",onDragFinish:r,className:t,style:s,boardClassName:u,boardStyle:b,zoneWrapClassName:v,zoneWrapStyle:x,itemClassName:S,itemStyle:I,renderBoardHeader:y,renderZoneHeader:h,renderItem:m,renderDragHandle:q}){let{registerScope:C,unregisterScope:U,updateScope:N,getPreviewScopeBoards:B}=xe();useEffect(()=>(C(e,{scopeId:e,boards:n,itemKey:o,renderItem:m,onDragFinish:r}),()=>{U(e);}),[]),useEffect(()=>{N(e,{scopeId:e,boards:n,itemKey:o,renderItem:m,onDragFinish:r});},[e,n,o,m,r,N]);let i=useMemo(()=>B(e)??n,[e,n,B]);return A.createElement("div",{className:t,style:s},i.map((a,f)=>A.createElement("div",{key:String(a.id),className:a.className??u,style:{...b,...a.style}},y?y(a,f):a.title?A.createElement("div",null,a.title):null,A.createElement("div",{className:v,style:x},A.createElement(ne,{zone:a,zoneIndex:f,itemKey:o,itemClassName:S,itemStyle:I,renderZoneHeader:h,renderItem:m,renderDragHandle:q})))))}var Dn={SortableList:se,SortableZones:fe,SortableBoard:De,SortableBoardProvider:Ie},Qn=Dn;export{Qn as default};

package/es/drag/type.d.ts

@@ -0,0 +1,362 @@
+import type React from 'react';
+import type { DraggableAttributes } from '@dnd-kit/core';
+import type { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities';
+import type { UniqueIdentifier } from '@dnd-kit/core';
+/**
+ * 拖拽方向
+ *
+ * - `horizontal`：水平排列
+ * - `vertical`：垂直排列
+ */
+export type Direction = 'horizontal' | 'vertical';
+/**
+ * 区域转移模式
+ *
+ * - `both`：允许拖入和拖出
+ * - `in-only`：只允许拖入，不允许拖出
+ * - `out-only`：只允许拖出，不允许拖入
+ */
+export type TransferMode = 'both' | 'in-only' | 'out-only';
+/**
+ * 自定义拖拽手柄 Props
+ *
+ * 通过 `renderDragHandle` 渲染自定义手柄时，由组件注入给渲染函数
+ */
+export interface DragHandleProps {
+    /**
+     * dnd-kit 可访问性属性，需绑定到手柄元素
+     */
+    attributes: DraggableAttributes;
+    /**
+     * dnd-kit 事件监听器，需绑定到手柄元素
+     */
+    listeners: SyntheticListenerMap | undefined;
+    /**
+     * 当前项是否正在被拖拽
+     */
+    isDragging: boolean;
+}
+/**
+ * `onDragFinish` 回调参数（SortableList）
+ */
+export interface DragFinishParams<T> {
+    /**
+     * 被拖拽的数据项
+     */
+    activeItem: T;
+    /**
+     * 目标位置的数据项
+     */
+    overItem: T;
+    /**
+     * 拖拽前的下标
+     */
+    oldIndex: number;
+    /**
+     * 拖拽后的下标
+     */
+    newIndex: number;
+    /**
+     * 排序完成后的新数组
+     */
+    newItems: T[];
+}
+/**
+ * SortableList 组件 Props
+ */
+export interface SortableListProps<T extends Record<string, any>> {
+    /**
+     * 数据列表
+     */
+    items: T[];
+    /**
+     * 唯一标识字段名，默认 `'id'`
+     */
+    itemKey?: keyof T;
+    /**
+     * 排列方向，默认 `'horizontal'`
+     */
+    direction?: Direction;
+    /**
+     * 拖拽触发最小距离（px），默认 `8`
+     */
+    activationDistance?: number;
+    /**
+     * 拖拽排序完成后的回调
+     */
+    onDragFinish?: (params: DragFinishParams<T>) => void;
+    /**
+     * 列表项渲染函数
+     *
+     * @param item 当前数据项
+     * @param index 当前下标
+     * @param dragHandle 拖拽手柄节点（仅配置 `renderDragHandle` 时有值）
+     */
+    renderItem: (item: T, index: number, dragHandle?: React.ReactNode) => React.ReactNode;
+    /**
+     * 自定义拖拽手柄渲染函数
+     *
+     * 配置后，整项不再可拖拽，仅手柄可触发拖拽
+     */
+    renderDragHandle?: (item: T, index: number, dragHandleProps: DragHandleProps) => React.ReactNode;
+    /**
+     * 列表容器 className
+     */
+    className?: string;
+    /**
+     * 列表容器 style
+     */
+    style?: React.CSSProperties;
+    /**
+     * 列表项外层 className
+     */
+    itemClassName?: string;
+    /**
+     * 列表项外层 style
+     */
+    itemStyle?: React.CSSProperties;
+}
+/**
+ * 可拖拽区域数据结构
+ *
+ * 用于 `SortableZones` 和 `SortableBoard` 的区域配置
+ */
+export interface DragZone<T extends Record<string, any>> {
+    /**
+     * 区域唯一标识
+     */
+    id: UniqueIdentifier;
+    /**
+     * 区域标题（不配置 `renderZoneHeader` 时默认渲染）
+     */
+    title?: string;
+    /**
+     * 区域内的数据项列表
+     */
+    items: T[];
+    /**
+     * 区域的转移模式，默认 `'both'`
+     */
+    transferMode?: TransferMode;
+    /**
+     * 区域外层容器 className
+     */
+    className?: string;
+    /**
+     * 区域外层容器 style
+     */
+    style?: React.CSSProperties;
+    /**
+     * 区域内容区 className（包裹所有 item 的容器）
+     */
+    bodyClassName?: string;
+    /**
+     * 区域内容区 style
+     */
+    bodyStyle?: React.CSSProperties;
+}
+/**
+ * `onDragFinish` 回调参数（SortableZones）
+ */
+export interface ZoneDragFinishParams<T extends Record<string, any>> {
+    /**
+     * 被拖拽的数据项
+     */
+    activeItem: T;
+    /**
+     * 来源区域 id
+     */
+    fromZoneId: UniqueIdentifier;
+    /**
+     * 目标区域 id
+     */
+    toZoneId: UniqueIdentifier;
+    /**
+     * 拖拽前的区域内下标
+     */
+    oldIndex: number;
+    /**
+     * 拖拽后的区域内下标
+     */
+    newIndex: number;
+    /**
+     * 拖拽完成后所有区域的新数据（含 items 顺序变更）
+     */
+    newZones: DragZone<T>[];
+}
+/**
+ * 兼容别名：`MultiZoneDragFinishParams` = `ZoneDragFinishParams`
+ *
+ * @deprecated 请使用 `ZoneDragFinishParams`
+ */
+export type MultiZoneDragFinishParams<T extends Record<string, any>> = ZoneDragFinishParams<T>;
+/**
+ * SortableZones 组件 Props
+ */
+export interface SortableZonesProps<T extends Record<string, any>> {
+    /**
+     * 区域列表
+     */
+    zones: DragZone<T>[];
+    /**
+     * 唯一标识字段名，默认 `'id'`
+     */
+    itemKey?: keyof T;
+    /**
+     * 拖拽触发最小距离（px），默认 `8`
+     */
+    activationDistance?: number;
+    /**
+     * 拖拽完成后的回调
+     */
+    onDragFinish?: (params: ZoneDragFinishParams<T>) => void;
+    /**
+     * 列表项渲染函数
+     *
+     * @param item 当前数据项
+     * @param itemIndex 当前项在区域内的下标
+     * @param zone 所属区域
+     * @param zoneIndex 区域下标
+     * @param dragHandle 拖拽手柄节点（仅配置 `renderDragHandle` 时有值）
+     */
+    renderItem: (item: T, itemIndex: number, zone: DragZone<T>, zoneIndex: number, dragHandle?: React.ReactNode) => React.ReactNode;
+    /**
+     * 区域头部渲染函数（不传则渲染 `zone.title`）
+     */
+    renderZoneHeader?: (zone: DragZone<T>, zoneIndex: number) => React.ReactNode;
+    /**
+     * 自定义拖拽手柄渲染函数
+     */
+    renderDragHandle?: (item: T, itemIndex: number, zone: DragZone<T>, zoneIndex: number, dragHandleProps: DragHandleProps) => React.ReactNode;
+    /**
+     * 外层容器 className
+     */
+    className?: string;
+    /**
+     * 外层容器 style
+     */
+    style?: React.CSSProperties;
+    /**
+     * 列表项外层 className
+     */
+    itemClassName?: string;
+    /**
+     * 列表项外层 style
+     */
+    itemStyle?: React.CSSProperties;
+}
+/**
+ * 兼容别名：`MultiSortableZonesProps` = `SortableZonesProps`
+ *
+ * @deprecated 请使用 `SortableZonesProps`
+ */
+export type MultiSortableZonesProps<T extends Record<string, any>> = SortableZonesProps<T>;
+/**
+ * 看板数据结构（SortableBoard 的列/看板单元）
+ *
+ * 继承自 `DragZone`，额外支持 `zones` 字段用于描述该 board 内的多个区域
+ */
+export interface DragBoard<T extends Record<string, any>> extends Omit<DragZone<T>, 'items'> {
+    /**
+     * 该 board 下的区域列表（每个区域有独立的 items）
+     */
+    zones: DragZone<T>[];
+}
+/**
+ * `onDragFinish` 回调参数（SortableBoard）
+ */
+export interface DragBoardFinishParams<T extends Record<string, any>> {
+    /**
+     * 拖拽完成后所有 board 的新数据
+     */
+    newBoards: DragBoard<T>[];
+}
+/**
+ * SortableBoard 组件 Props
+ */
+export interface SortableBoardProps<T extends Record<string, any>> {
+    /**
+     * 看板作用域 id，同一 `SortableBoardProvider` 下多个 `SortableBoard` 需保证唯一
+     */
+    boardScopeId: UniqueIdentifier;
+    /**
+     * 看板列表
+     */
+    boards: DragZone<T>[];
+    /**
+     * 唯一标识字段名，默认 `'id'`
+     */
+    itemKey?: keyof T;
+    /**
+     * 拖拽完成后的回调
+     *
+     * 参数包含 `scopeId` 和该作用域下最新的 `boards` 数据
+     */
+    onDragFinish?: (params: {
+        scopeId: UniqueIdentifier;
+        boards: DragZone<T>[];
+    }) => void;
+    /**
+     * 列表项渲染函数
+     */
+    renderItem: (item: T, itemIndex: number, zone: DragZone<T>, zoneIndex: number, dragHandle?: React.ReactNode) => React.ReactNode;
+    /**
+     * 看板头部渲染函数（不传则渲染 `board.title`）
+     */
+    renderBoardHeader?: (board: DragZone<T>, boardIndex: number) => React.ReactNode;
+    /**
+     * 区域头部渲染函数（不传则渲染 `zone.title`）
+     */
+    renderZoneHeader?: (zone: DragZone<T>, zoneIndex: number) => React.ReactNode;
+    /**
+     * 自定义拖拽手柄渲染函数
+     */
+    renderDragHandle?: (item: T, itemIndex: number, zone: DragZone<T>, zoneIndex: number, dragHandleProps: DragHandleProps) => React.ReactNode;
+    /**
+     * 外层容器 className
+     */
+    className?: string;
+    /**
+     * 外层容器 style
+     */
+    style?: React.CSSProperties;
+    /**
+     * 每个 board 的 className
+     */
+    boardClassName?: string;
+    /**
+     * 每个 board 的 style
+     */
+    boardStyle?: React.CSSProperties;
+    /**
+     * zone 包裹层 className（包裹 ZoneContainer 的外层 div）
+     */
+    zoneWrapClassName?: string;
+    /**
+     * zone 包裹层 style
+     */
+    zoneWrapStyle?: React.CSSProperties;
+    /**
+     * 列表项外层 className
+     */
+    itemClassName?: string;
+    /**
+     * 列表项外层 style
+     */
+    itemStyle?: React.CSSProperties;
+}
+/**
+ * SortableBoardProvider 组件 Props
+ *
+ * 为多个 `SortableBoard` 提供共享的 DnD 上下文，支持跨 board 拖拽
+ */
+export interface SortableBoardProviderProps {
+    /**
+     * 子节点，应包含一个或多个 `SortableBoard`
+     */
+    children: React.ReactNode;
+    /**
+     * 拖拽触发最小距离（px），默认 `8`
+     */
+    activationDistance?: number;
+}