@plexui/vue 0.0.0-stage → 0.1.1

package/dist/es/components/Dialog/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../../src/components/Dialog/Dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,QAAQ,EACR,kBAAkB,EAClB,eAAe,EACf,CAAC,EACD,MAAM,EACN,eAAe,EACf,SAAS,EACT,OAAO,EACP,GAAG,EACH,KAAK,GAON,MAAM,KAAK,CAAA;AACZ,OAAO,EACL,aAAa,IAAI,iBAAiB,EAClC,iBAAiB,IAAI,qBAAqB,EAC1C,aAAa,IAAI,iBAAiB,EAClC,YAAY,IAAI,gBAAgB,EAChC,UAAU,IAAI,cAAc,EAC5B,WAAW,IAAI,eAAe,EAC9B,uBAAuB,EACvB,gBAAgB,EAChB,KAAK,GACN,MAAM,SAAS,CAAA;AAChB,OAAO,EAAE,gBAAgB,EAAE,MAAM,uCAAuC,CAAA;AACxE,OAAO,EAAE,qBAAqB,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAC5E,OAAO,EAAE,mBAAmB,EAAE,6BAA6B,EAAE,MAAM,0CAA0C,CAAA;AAC7G,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AACxD,OAAO,CAAC,MAAM,oDAAoD,CAAA;AAwBlE,MAAM,gBAAgB,GAAqC,MAAM,CAAC,cAAc,CAAC,CAAA;AAEjF,MAAM,gBAAgB,GAAG,GAAG,EAAE;IAC5B,MAAM,OAAO,GAAG,MAAM,CAAC,gBAAgB,EAAE,IAAI,CAAC,CAAA;IAE9C,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,yDAAyD,CAAC,CAAA;IAC5E,CAAC;IAED,OAAO,OAAO,CAAA;AAChB,CAAC,CAAA;AAED,qFAAqF;AACrF,MAAM,CAAC,MAAM,MAAM,GAAG,eAAe,CAAC;IACpC,IAAI,EAAE,QAAQ;IACd,KAAK,EAAE;QACL,IAAI,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE;KAC5C;IACD,KAAK,EAAE;QACL,aAAa,EAAE,CAAC,KAAc,EAAE,EAAE,CAAC,IAAI;KACxC;IACD,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE;QAC1B,MAAM,YAAY,GAAG,GAAG,CAAC,KAAK,CAAC,CAAA;QAC/B,MAAM,MAAM,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,IAAI,IAAI,YAAY,CAAC,KAAK,CAAC,CAAA;QAE/D,MAAM,OAAO,GAAG,CAAC,SAAkB,EAAE,EAAE;YACrC,IAAI,CAAC,aAAa,EAAE,SAAS,CAAC,CAAA;YAC9B,YAAY,CAAC,KAAK,GAAG,SAAS,CAAA;QAChC,CAAC,CAAA;QAED,OAAO,CAAC,gBAAgB,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,gBAAgB,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA;QAElG,OAAO,GAAG,EAAE,CACV,CAAC,CAAC,cAAc,EAAE,EAAE,MAAM,EAAE,MAAM,CAAC,KAAK,EAAE,eAAe,EAAE,OAAO,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,EAAE,EAAE,CAAC,CAAA;IAC/G,CAAC;CACF,CAAC,CAAA;AAEF,yEAAyE;AACzE,2EAA2E;AAC3E,2EAA2E;AAC3E,yEAAyE;AACzE,0EAA0E;AAC1E,mEAAmE;AACnE,MAAM,eAAe,GAAG,CACtB,KAAwB,EACxB,KAA8B,EAC9B,OAA+B,EAC/B,GAA2B,EAC3B,EAAE;IACF,IAAI,CAAC,KAAK;QAAE,OAAO,IAAI,CAAA;IACvB,MAAM,GAAG,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAA;IAC7B,MAAM,KAAK,GAAG,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC,CAAA;IACxF,OAAO,UAAU,CAAC,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,OAAO,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,IAAI,CAAC,CAAA;AAChF,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,eAAe,CAAC;IAC3C,IAAI,EAAE,eAAe;IACrB,KAAK,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE;QACrB,MAAM,WAAW,GAAG,uBAAuB,EAAE,CAAA;QAC7C,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,GAAG,gBAAgB,EAAE,CAAA;QACzD,WAAW,CAAC,SAAS,KAAK,KAAK,CAAC,SAAS,EAAE,qBAAqB,CAAC,CAAA;QACjE,4CAA4C;QAC5C,SAAS,CAAC,GAAG,EAAE;YACb,WAAW,CAAC,cAAc,CAAC,KAAK,GAAG,cAAc,CAAC,KAAK,CAAA;QACzD,CAAC,CAAC,CAAA;QAEF,MAAM,OAAO,GAAG,CAAC,KAAY,EAAE,EAAE;YAC/B,IAAI,CAAC,KAAK,CAAC,gBAAgB;gBAAE,WAAW,CAAC,YAAY,EAAE,CAAA;QACzD,CAAC,CAAA;QAED,OAAO,GAAG,EAAE;YACV,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,KAAK,CAAA;YACnC,OAAO,eAAe,CACpB,iBAAiB,CAAC,KAAK,CAAC,OAAO,EAAE,EAAE,CAAC,EACpC;gBACE,MAAM,EAAE,QAAQ;gBAChB,eAAe,EAAE,QAAQ;gBACzB,eAAe,EAAE,IAAI,IAAI,KAAK;gBAC9B,eAAe,EAAE,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;gBACzD,YAAY,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;aACvC,EACD,OAAO,EACP,UAAmC,CACpC,CAAA;QACH,CAAC,CAAA;IACH,CAAC;CACF,CAAC,CAAA;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE,CACrB,CAAC,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,EAAE,EAAE;IAC/G,CAAC,CAAC,MAAM,EAAE;QACR,IAAI,EAAE,cAAc;QACpB,CAAC,EAAE,oMAAoM;KACxM,CAAC;CACH,CAAC,CAAA;AAEJ,gFAAgF;AAChF,MAAM,CAAC,MAAM,aAAa,GAAG,eAAe,CAAC;IAC3C,IAAI,EAAE,eAAe;IACrB,YAAY,EAAE,KAAK;IACnB,KAAK,EAAE;QACL,oDAAoD;QACpD,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAA8B,EAAE,OAAO,EAAE,GAAG,EAAE;QAC5E,gEAAgE;QAChE,SAAS,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;QAC3C;;;;WAIG;QACH,SAAS,EAAE,EAAE,IAAI,EAAE,MAAmC,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC3E,yFAAyF;QACzF,eAAe,EAAE,MAAgF;QACjG,2GAA2G;QAC3G,eAAe,EAAE,QAA4C;QAC7D,uFAAuF;QACvF,gBAAgB,EAAE,QAA4C;KAC/D;IACD,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE;QAC3B,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,GAAG,gBAAgB,EAAE,CAAA;QAC1E,sEAAsE;QACtE,mCAAmC;QACnC,uBAAuB,EAAE,CAAC,SAAS,KAAK,KAAK,CAAC,SAAS,EAAE,qBAAqB,CAAC,CAAA;QAE/E,mEAAmE;QACnE,gEAAgE;QAChE,gBAAgB,CAAC,IAAI,EAAE,GAAG,EAAE;YAC1B,OAAO,CAAC,KAAK,CAAC,CAAA;QAChB,CAAC,CAAC,CAAA;QAEF,2EAA2E;QAC3E,MAAM,YAAY,GAAG,6BAA6B,CAAC,CAAC,aAAa,EAAE,EAAE;YACnE,IAAI,CAAC,aAAa,CAAC,OAAO;gBAAE,OAAO,CAAC,KAAK,CAAC,CAAA;QAC5C,CAAC,CAAC,CAAA;QACF,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,EAAE,EAAE;YACrB,IAAI,CAAC,MAAM;gBAAE,YAAY,CAAC,KAAK,EAAE,CAAA;QACnC,CAAC,CAAC,CAAA;QAEF,IAAI,cAAmC,CAAA;QACvC,MAAM,aAAa,GAAG,CAAC,QAAiB,EAAE,EAAE;YAC1C,MAAM,EAAE,GAAI,QAAqC,EAAE,GAAG,CAAA;YACtD,MAAM,OAAO,GAAG,EAAE,YAAY,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAA;YACtD,IAAI,OAAO,KAAK,cAAc;gBAAE,OAAM;YACtC,IAAI,cAAc;gBAAE,mBAAmB,CAAC,MAAM,CAAC,cAAc,CAAC,CAAA;YAC9D,cAAc,GAAG,OAAO,CAAA;YACxB,IAAI,OAAO;gBAAE,mBAAmB,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;QAC/C,CAAC,CAAA;QAED,MAAM,YAAY,GAAG,GAAG,EAAE,CACxB,CAAC,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE;YAC1B,CAAC,CAAC,iBAAiB,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,OAAO,EAAE,GAAG,EAAE,aAAa,EAAE,CAAC;YAC9D,CAAC,CACC,iBAAiB,EACjB;gBACE,YAAY,EAAE,IAAI;gBAClB,OAAO,EAAE,CAAC,CAAC,OAAO;gBAClB,OAAO,EAAE,cAAc,CAAC,EAAE,cAAc,EAAE,KAAK,CAAC,KAAK,EAAE,CAAC;gBACxD,gBAAgB,EAAE,KAAK,CAAC,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS;gBAC5E,uBAAuB,EAAE,KAAK,CAAC,eAAe;gBAC9C,iBAAiB,EAAE,KAAK,CAAC,eAAe;gBACxC,kBAAkB,EAAE,KAAK,CAAC,gBAAgB;gBAC1C,+DAA+D;gBAC/D,GAAG,CAAC,UAAU,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,iBAAiB,EAAE,SAAS,EAAE,CAAC;gBACjE,GAAG,CAAC,gBAAgB,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,kBAAkB,EAAE,SAAS,EAAE,CAAC;gBACxE,iBAAiB,EAAE,qBAAqB;gBACxC,sBAAsB,EAAE,YAAY,CAAC,oBAAoB;gBACzD,gBAAgB,EAAE,YAAY,CAAC,cAAc;aAC9C,EACD;gBACE,OAAO,EAAE,GAAG,EAAE,CAAC;oBACb,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE,EAAE;wBAC1C,KAAK,CAAC,SAAS;4BACb,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,IAAI,EAAE;gCACnB,OAAO,EAAE,GAAG,EAAE,CAAC;oCACb,CAAC,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,CAAC,WAAW,EAAE,YAAY,EAAE,cAAc,EAAE,EAAE;wCACtF,CAAC,CAAC,SAAS,CAAC;qCACb,CAAC;iCACH;6BACF,CAAC;4BACJ,CAAC,CAAC,IAAI;wBACR,KAAK,CAAC,OAAO,EAAE,EAAE;qBAClB,CAAC;iBACH;aACF,CACF;SACF,CAAC,CAAA;QAEJ,OAAO,GAAG,EAAE,CACV,CAAC,CAAC,gBAAgB,EAAE,IAAI,EAAE;YACxB,OAAO,EAAE,GAAG,EAAE,CAAC;gBACb,CAAC,CACC,eAAe,EACf,EAAE,KAAK,EAAE,CAAC,CAAC,UAAU,EAAE,aAAa,EAAE,GAAG,EAAE,YAAY,EAAE,GAAG,EAAE,iBAAiB,EAAE,IAAI,EAAE;gBACvF,mEAAmE;gBACnE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC,EAAE,CACxE;aACF;SACF,CAAC,CAAA;IACN,CAAC;CACF,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,eAAe,CAAC;IAC1C,IAAI,EAAE,cAAc;IACpB,KAAK,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE;QACrB,OAAO,GAAG,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,CAAC,OAAO,EAAE,EAAE,CAAC,CAAA;IAC/D,CAAC;CACF,CAAC,CAAA;AAEF,gGAAgG;AAChG,MAAM,CAAC,MAAM,UAAU,GAAG,eAAe,CAAC;IACxC,IAAI,EAAE,YAAY;IAClB,YAAY,EAAE,KAAK;IACnB,KAAK,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE;QAC5B,OAAO,GAAG,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE,EAAE,KAAK,CAAC,OAAO,EAAE,EAAE,CAAC,CAAA;IAC5E,CAAC;CACF,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,eAAe,CAAC;IAC1C,IAAI,EAAE,cAAc;IACpB,KAAK,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE;QACrB,OAAO,GAAG,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,CAAC,OAAO,EAAE,EAAE,CAAC,CAAA;IAC/D,CAAC;CACF,CAAC,CAAA;AAEF,yEAAyE;AACzE,MAAM,eAAe,GAAG,CAAC,KAAkB,EAAE,EAAE;IAC7C,SAAS,CAAC,GAAG,EAAE;QACb,KAAK,CAAC,KAAK,EAAE,CAAA;IACf,CAAC,CAAC,CAAA;IACF,eAAe,CAAC,GAAG,EAAE;QACnB,KAAK,CAAC,KAAK,EAAE,CAAA;IACf,CAAC,CAAC,CAAA;AACJ,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,eAAe,CAAC;IACzC,IAAI,EAAE,aAAa;IACnB,KAAK,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE;QACrB,eAAe,CAAC,gBAAgB,EAAE,CAAC,UAAU,CAAC,CAAA;QAC9C,OAAO,GAAG,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,EAAE,EAAE,CAAC,CAAA;IAC3F,CAAC;CACF,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,eAAe,CAAC;IAC/C,IAAI,EAAE,mBAAmB;IACzB,KAAK,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE;QACrB,eAAe,CAAC,gBAAgB,EAAE,CAAC,gBAAgB,CAAC,CAAA;QACpD,OAAO,GAAG,EAAE,CAAC,CAAC,CAAC,qBAAqB,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,WAAW,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,EAAE,EAAE,CAAC,CAAA;IACvG,CAAC;CACF,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,eAAe,CAAC;IACzC,IAAI,EAAE,aAAa;IACnB,KAAK,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE;QACrB,MAAM,WAAW,GAAG,uBAAuB,EAAE,CAAA;QAC7C,MAAM,OAAO,GAAG,CAAC,KAAY,EAAE,EAAE;YAC/B,IAAI,CAAC,KAAK,CAAC,gBAAgB;gBAAE,WAAW,CAAC,YAAY,CAAC,KAAK,CAAC,CAAA;QAC9D,CAAC,CAAA;QACD,OAAO,GAAG,EAAE,CAAC,eAAe,CAAC,iBAAiB,CAAC,KAAK,CAAC,OAAO,EAAE,EAAE,CAAC,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,OAAO,CAAC,CAAA;IACjG,CAAC;CACF,CAAC,CAAA","sourcesContent":["import {\n  cloneVNode,\n  computed,\n  createCommentVNode,\n  defineComponent,\n  h,\n  inject,\n  onBeforeUnmount,\n  onMounted,\n  provide,\n  ref,\n  watch,\n  type ComputedRef,\n  type HTMLAttributes,\n  type InjectionKey,\n  type PropType,\n  type Ref,\n  type VNode,\n} from \"vue\"\nimport {\n  DialogContent as RekaDialogContent,\n  DialogDescription as RekaDialogDescription,\n  DialogOverlay as RekaDialogOverlay,\n  DialogPortal as RekaDialogPortal,\n  DialogRoot as RekaDialogRoot,\n  DialogTitle as RekaDialogTitle,\n  injectDialogRootContext,\n  useForwardExpose,\n  useId,\n} from \"reka-ui\"\nimport { useEscCloseStack } from \"../../composables/useEscCloseStack.js\"\nimport { preventDefaultHandler, toCssVariables } from \"../../lib/helpers.js\"\nimport { dismissableSurfaces, useDeferredPointerDownOutside } from \"../Popover/deferredPointerDownOutside.js\"\nimport { firstElementChild } from \"../Tooltip/slot.js\"\nimport { TransitionGroup } from \"../Transition/index.js\"\nimport s from \"@plexui/styles/components/Dialog/Dialog.module.css\"\n\n// Vue port of packages/ui/src/components/Dialog/Dialog.tsx on Reka UI\n// (the Vue lineage of Radix, same anatomy). Exports are flat (`Dialog`,\n// `DialogTrigger`, ...) because runtime-compiled templates cannot resolve\n// `Dialog.Trigger` from the `components` option.\n//\n// Where Reka differs from Radix (radix-ui 1.8), the port follows Radix:\n// - The content is labelled and described only while a DialogTitle /\n//   DialogDescription is mounted.\n// - A press outside (the overlay) closes it on the click that follows\n//   (../Popover/deferredPointerDownOutside.ts); the overlay is a dismiss\n//   surface.\n// - The portal renders once mounted, so a closed dialog server-renders\n//   nothing.\n\ntype DialogContextValue = {\n  open: ComputedRef<boolean>\n  setOpen: (nextState: boolean) => void\n  /** Mounted DialogTitle / DialogDescription parts (Radix's title and description counts) */\n  titleCount: Ref<number>\n  descriptionCount: Ref<number>\n}\n\nconst DialogContextKey: InjectionKey<DialogContextValue> = Symbol(\"PlexUIDialog\")\n\nconst useDialogContext = () => {\n  const context = inject(DialogContextKey, null)\n\n  if (!context) {\n    throw new Error(\"Dialog compound components must be used inside <Dialog>\")\n  }\n\n  return context\n}\n\n/** Modal dialog root. Uncontrolled by default; bind `v-model:open` to control it. */\nexport const Dialog = defineComponent({\n  name: \"Dialog\",\n  props: {\n    open: { type: Boolean, default: undefined },\n  },\n  emits: {\n    \"update:open\": (_open: boolean) => true,\n  },\n  setup(props, { slots, emit }) {\n    const internalOpen = ref(false)\n    const isOpen = computed(() => props.open ?? internalOpen.value)\n\n    const setOpen = (nextState: boolean) => {\n      emit(\"update:open\", nextState)\n      internalOpen.value = nextState\n    }\n\n    provide(DialogContextKey, { open: isOpen, setOpen, titleCount: ref(0), descriptionCount: ref(0) })\n\n    return () =>\n      h(RekaDialogRoot, { \"open\": isOpen.value, \"onUpdate:open\": setOpen }, { default: () => slots.default?.() })\n  },\n})\n\n// Trigger and Close render their child with the dialog wiring merged in,\n// like Reka's `asChild` parts, but run the dialog action after the child's\n// own click handlers and skip it when one called preventDefault() (Radix's\n// composeEventHandlers). Reka's parts run first and cannot be cancelled.\n// Attributes the child sets itself win, as with Radix and Reka slots. The\n// child is the first element, also through a forwarded `<slot />`.\nconst withDialogProps = (\n  child: VNode | undefined,\n  props: Record<string, unknown>,\n  onClick: (event: Event) => void,\n  ref?: (el: unknown) => void,\n) => {\n  if (!child) return null\n  const own = child.props ?? {}\n  const extra = Object.fromEntries(Object.entries(props).filter(([key]) => !(key in own)))\n  return cloneVNode(child, { ...extra, onClick, ...(ref ? { ref } : {}) }, true)\n}\n\nexport const DialogTrigger = defineComponent({\n  name: \"DialogTrigger\",\n  setup(_props, { slots }) {\n    const rootContext = injectDialogRootContext()\n    const { forwardRef, currentElement } = useForwardExpose()\n    rootContext.contentId ||= useId(undefined, \"reka-dialog-content\")\n    // Focus returns here when the dialog closes\n    onMounted(() => {\n      rootContext.triggerElement.value = currentElement.value\n    })\n\n    const onClick = (event: Event) => {\n      if (!event.defaultPrevented) rootContext.onOpenToggle()\n    }\n\n    return () => {\n      const open = rootContext.open.value\n      return withDialogProps(\n        firstElementChild(slots.default?.()),\n        {\n          \"type\": \"button\",\n          \"aria-haspopup\": \"dialog\",\n          \"aria-expanded\": open || false,\n          \"aria-controls\": open ? rootContext.contentId : undefined,\n          \"data-state\": open ? \"open\" : \"closed\",\n        },\n        onClick,\n        forwardRef as (el: unknown) => void,\n      )\n    }\n  },\n})\n\nconst CloseIcon = () =>\n  h(\"svg\", { \"class\": s.CloseIcon, \"viewBox\": \"0 0 20 20\", \"width\": \"20\", \"height\": \"20\", \"aria-hidden\": \"true\" }, [\n    h(\"path\", {\n      fill: \"currentColor\",\n      d: \"M5.22 5.22a.75.75 0 0 1 1.06 0L10 8.94l3.72-3.72a.75.75 0 1 1 1.06 1.06L11.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06L10 11.06l-3.72 3.72a.75.75 0 1 1-1.06-1.06L8.94 10 5.22 6.28a.75.75 0 0 1 0-1.06\",\n    }),\n  ])\n\n/** Overlay and panel. `class` lands on the panel, like `className` in React. */\nexport const DialogContent = defineComponent({\n  name: \"DialogContent\",\n  inheritAttrs: false,\n  props: {\n    /** Panel width; numbers are pixels. @default 480 */\n    width: { type: [Number, String] as PropType<number | string>, default: 480 },\n    /** Renders the close button in the top corner. @default true */\n    showClose: { type: Boolean, default: true },\n    /**\n     * Where the panel sits: centered, near the top, a sheet along the bottom,\n     * a full-height panel on the start or end side, or the whole screen.\n     * @default \"center\"\n     */\n    placement: { type: String as PropType<DialogPlacement>, default: \"center\" },\n    /** Placement at 640px and below, such as a bottom sheet on phones. @default placement */\n    mobilePlacement: String as PropType<Extract<DialogPlacement, \"center\" | \"bottom\" | \"fullscreen\">>,\n    /** Called when focus moves into the dialog on open; `event.preventDefault()` keeps it for you to place. */\n    onOpenAutoFocus: Function as PropType<(event: Event) => void>,\n    /** Called when focus returns on close; `event.preventDefault()` keeps it elsewhere. */\n    onCloseAutoFocus: Function as PropType<(event: Event) => void>,\n  },\n  setup(props, { slots, attrs }) {\n    const { open, setOpen, titleCount, descriptionCount } = useDialogContext()\n    // Radix's root makes the content id; Reka's trigger does, so a dialog\n    // without one would render `id=\"\"`\n    injectDialogRootContext().contentId ||= useId(undefined, \"reka-dialog-content\")\n\n    // Escape goes through the shared stack, as in React, so the dialog\n    // closes before overlays opened earlier (a forced-open Tooltip)\n    useEscCloseStack(open, () => {\n      setOpen(false)\n    })\n\n    // Radix's modal content: a Ctrl+click (macOS right click) does not dismiss\n    const outsidePress = useDeferredPointerDownOutside((originalEvent) => {\n      if (!originalEvent.ctrlKey) setOpen(false)\n    })\n    watch(open, (isOpen) => {\n      if (!isOpen) outsidePress.reset()\n    })\n\n    let overlayElement: Element | undefined\n    const setOverlayRef = (instance: unknown) => {\n      const el = (instance as { $el?: unknown } | null)?.$el\n      const element = el instanceof Element ? el : undefined\n      if (element === overlayElement) return\n      if (overlayElement) dismissableSurfaces.delete(overlayElement)\n      overlayElement = element\n      if (element) dismissableSurfaces.add(element)\n    }\n\n    const renderDialog = () =>\n      h(\"div\", { key: \"dialog\" }, [\n        h(RekaDialogOverlay, { class: s.Overlay, ref: setOverlayRef }),\n        h(\n          RekaDialogContent,\n          {\n            \"forceMount\": true,\n            \"class\": s.Content,\n            \"style\": toCssVariables({ \"dialog-width\": props.width }),\n            \"data-placement\": props.placement === \"center\" ? undefined : props.placement,\n            \"data-mobile-placement\": props.mobilePlacement,\n            \"onOpenAutoFocus\": props.onOpenAutoFocus,\n            \"onCloseAutoFocus\": props.onCloseAutoFocus,\n            // Radix labels and describes the content only by mounted parts\n            ...(titleCount.value > 0 ? {} : { \"aria-labelledby\": undefined }),\n            ...(descriptionCount.value > 0 ? {} : { \"aria-describedby\": undefined }),\n            \"onEscapeKeyDown\": preventDefaultHandler,\n            \"onPointerDownOutside\": outsidePress.onPointerDownOutside,\n            \"onFocusOutside\": outsidePress.onFocusOutside,\n          },\n          {\n            default: () => [\n              h(\"div\", { class: [s.Panel, attrs.class] }, [\n                props.showClose\n                  ? h(DialogClose, null, {\n                      default: () => [\n                        h(\"button\", { \"type\": \"button\", \"class\": s.CloseButton, \"aria-label\": \"Close dialog\" }, [\n                          h(CloseIcon),\n                        ]),\n                      ],\n                    })\n                  : null,\n                slots.default?.(),\n              ]),\n            ],\n          },\n        ),\n      ])\n\n    return () =>\n      h(RekaDialogPortal, null, {\n        default: () => [\n          h(\n            TransitionGroup,\n            { class: s.Transition, enterDuration: 250, exitDuration: 150, disableAnimations: true },\n            // `open && <div>` in React: closed still renders the empty wrapper\n            { default: () => [open.value ? renderDialog() : createCommentVNode()] },\n          ),\n        ],\n      })\n  },\n})\n\nexport const DialogHeader = defineComponent({\n  name: \"DialogHeader\",\n  setup(_props, { slots }) {\n    return () => h(\"div\", { class: s.Header }, slots.default?.())\n  },\n})\n\n/** The scrolling part between DialogHeader and DialogFooter: with it, only the body scrolls. */\nexport const DialogBody = defineComponent({\n  name: \"DialogBody\",\n  inheritAttrs: false,\n  setup(_props, { slots, attrs }) {\n    return () => h(\"div\", { class: [s.Body, attrs.class] }, slots.default?.())\n  },\n})\n\nexport const DialogFooter = defineComponent({\n  name: \"DialogFooter\",\n  setup(_props, { slots }) {\n    return () => h(\"div\", { class: s.Footer }, slots.default?.())\n  },\n})\n\n/** Counts a mounted part, as Radix's title and description counts do. */\nconst useMountedCount = (count: Ref<number>) => {\n  onMounted(() => {\n    count.value++\n  })\n  onBeforeUnmount(() => {\n    count.value--\n  })\n}\n\nexport const DialogTitle = defineComponent({\n  name: \"DialogTitle\",\n  setup(_props, { slots }) {\n    useMountedCount(useDialogContext().titleCount)\n    return () => h(RekaDialogTitle, { class: s.Title }, { default: () => slots.default?.() })\n  },\n})\n\nexport const DialogDescription = defineComponent({\n  name: \"DialogDescription\",\n  setup(_props, { slots }) {\n    useMountedCount(useDialogContext().descriptionCount)\n    return () => h(RekaDialogDescription, { class: s.Description }, { default: () => slots.default?.() })\n  },\n})\n\nexport const DialogClose = defineComponent({\n  name: \"DialogClose\",\n  setup(_props, { slots }) {\n    const rootContext = injectDialogRootContext()\n    const onClick = (event: Event) => {\n      if (!event.defaultPrevented) rootContext.onOpenChange(false)\n    }\n    return () => withDialogProps(firstElementChild(slots.default?.()), { type: \"button\" }, onClick)\n  },\n})\n\nexport type DialogProps = InstanceType<typeof Dialog>[\"$props\"]\n\nexport type DialogPlacement = \"center\" | \"top\" | \"bottom\" | \"start\" | \"end\" | \"fullscreen\"\n\n/** DialogContent props; `class` lands on the panel, like `className` in React. */\nexport type DialogContentProps = InstanceType<typeof DialogContent>[\"$props\"] & { class?: HTMLAttributes[\"class\"] }\n"]}

package/dist/es/components/Dialog/index.js

@@ -0,0 +1,2 @@
+export { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "./Dialog.js";
+//# sourceMappingURL=index.js.map

package/dist/es/components/Dialog/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,UAAU,EACV,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,aAAa,GAId,MAAM,aAAa,CAAA","sourcesContent":["export {\n  Dialog,\n  DialogBody,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n  type DialogContentProps,\n  type DialogPlacement,\n  type DialogProps,\n} from \"./Dialog.js\"\n"]}

package/dist/es/components/EmptyMessage/EmptyMessage.js

@@ -0,0 +1,73 @@
+import clsx, {} from "clsx";
+import { defineComponent, h } from "vue";
+import s from "@plexui/styles/components/EmptyMessage/EmptyMessage.module.css";
+// Vue port of packages/ui/src/components/EmptyMessage/EmptyMessage.tsx.
+// React's parts take only `children`, `className` and their own props and
+// spread nothing else, so other attributes are dropped here too
+// (`inheritAttrs: false`, only `class` is applied). Exports are flat
+// (`EmptyMessageIcon` for `EmptyMessage.Icon`, ...).
+const classOf = (attrs) => attrs.class;
+/** Centered message for empty, error and onboarding states. */
+export const EmptyMessage = defineComponent({
+    name: "EmptyMessage",
+    inheritAttrs: false,
+    props: {
+        /** Determines how the container fills available space. @default "static" */
+        fill: { type: String, default: "static" },
+        /** `sm` is the compact message for a panel, a card section or an empty list. @default "md" */
+        size: { type: String, default: "md" },
+        /** `start` left-aligns the message, for an empty state under a section heading. @default "center" */
+        align: { type: String, default: "center" },
+    },
+    setup(props, { attrs, slots }) {
+        return () => h("div", {
+            "class": clsx(s.EmptyMessage, classOf(attrs)),
+            "data-fill": props.fill,
+            "data-size": props.size === "sm" ? props.size : undefined,
+            "data-align": props.align === "start" ? props.align : undefined,
+        }, slots.default?.());
+    },
+});
+/** Icon badge of an EmptyMessage (React `EmptyMessage.Icon`). */
+export const EmptyMessageIcon = defineComponent({
+    name: "EmptyMessageIcon",
+    inheritAttrs: false,
+    props: {
+        /** @default "md" */
+        size: { type: String, default: "md" },
+        /** @default "secondary" */
+        color: { type: String, default: "secondary" },
+    },
+    setup(props, { attrs, slots }) {
+        return () => h("div", { "class": clsx(s.IconBadge, classOf(attrs)), "data-size": props.size, "data-color": props.color }, slots.default?.());
+    },
+});
+/** Title of an EmptyMessage (React `EmptyMessage.Title`). */
+export const EmptyMessageTitle = defineComponent({
+    name: "EmptyMessageTitle",
+    inheritAttrs: false,
+    props: {
+        /** @default "secondary" */
+        color: { type: String, default: "secondary" },
+    },
+    setup(props, { attrs, slots }) {
+        return () => h("div", { "class": clsx(s.Title, classOf(attrs)), "data-color": props.color }, slots.default?.());
+    },
+});
+/** Description text of an EmptyMessage (React `EmptyMessage.Description`). */
+export const EmptyMessageDescription = defineComponent({
+    name: "EmptyMessageDescription",
+    inheritAttrs: false,
+    setup(_props, { attrs, slots }) {
+        return () => h("div", { class: clsx(s.Description, classOf(attrs)) }, slots.default?.());
+    },
+});
+/** Row of actions below an EmptyMessage (React `EmptyMessage.ActionRow`). */
+export const EmptyMessageActionRow = defineComponent({
+    name: "EmptyMessageActionRow",
+    inheritAttrs: false,
+    setup(_props, { attrs, slots }) {
+        return () => h("div", { class: clsx(s.ActionRow, classOf(attrs)) }, slots.default?.());
+    },
+});
+//# sourceMappingURL=EmptyMessage.js.map

package/dist/es/components/EmptyMessage/EmptyMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyMessage.js","sourceRoot":"","sources":["../../../../src/components/EmptyMessage/EmptyMessage.ts"],"names":[],"mappings":"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","sourcesContent":["import clsx, { type ClassValue } from \"clsx\"\nimport { defineComponent, h, type PropType } from \"vue\"\nimport type { SemanticColors, Sizes } from \"@plexui/styles/types\"\nimport s from \"@plexui/styles/components/EmptyMessage/EmptyMessage.module.css\"\n\n// Vue port of packages/ui/src/components/EmptyMessage/EmptyMessage.tsx.\n// React's parts take only `children`, `className` and their own props and\n// spread nothing else, so other attributes are dropped here too\n// (`inheritAttrs: false`, only `class` is applied). Exports are flat\n// (`EmptyMessageIcon` for `EmptyMessage.Icon`, ...).\n\nconst classOf = (attrs: Record<string, unknown>) => attrs.class as ClassValue\n\n/** Centered message for empty, error and onboarding states. */\nexport const EmptyMessage = defineComponent({\n  name: \"EmptyMessage\",\n  inheritAttrs: false,\n  props: {\n    /** Determines how the container fills available space. @default \"static\" */\n    fill: { type: String as PropType<\"static\" | \"absolute\" | \"none\">, default: \"static\" },\n    /** `sm` is the compact message for a panel, a card section or an empty list. @default \"md\" */\n    size: { type: String as PropType<Sizes<\"sm\" | \"md\">>, default: \"md\" },\n    /** `start` left-aligns the message, for an empty state under a section heading. @default \"center\" */\n    align: { type: String as PropType<\"center\" | \"start\">, default: \"center\" },\n  },\n  setup(props, { attrs, slots }) {\n    return () =>\n      h(\n        \"div\",\n        {\n          \"class\": clsx(s.EmptyMessage, classOf(attrs)),\n          \"data-fill\": props.fill,\n          \"data-size\": props.size === \"sm\" ? props.size : undefined,\n          \"data-align\": props.align === \"start\" ? props.align : undefined,\n        },\n        slots.default?.(),\n      )\n  },\n})\n\n/** Icon badge of an EmptyMessage (React `EmptyMessage.Icon`). */\nexport const EmptyMessageIcon = defineComponent({\n  name: \"EmptyMessageIcon\",\n  inheritAttrs: false,\n  props: {\n    /** @default \"md\" */\n    size: { type: String as PropType<Sizes<\"sm\" | \"md\">>, default: \"md\" },\n    /** @default \"secondary\" */\n    color: { type: String as PropType<SemanticColors<\"secondary\" | \"danger\" | \"warning\">>, default: \"secondary\" },\n  },\n  setup(props, { attrs, slots }) {\n    return () =>\n      h(\n        \"div\",\n        { \"class\": clsx(s.IconBadge, classOf(attrs)), \"data-size\": props.size, \"data-color\": props.color },\n        slots.default?.(),\n      )\n  },\n})\n\n/** Title of an EmptyMessage (React `EmptyMessage.Title`). */\nexport const EmptyMessageTitle = defineComponent({\n  name: \"EmptyMessageTitle\",\n  inheritAttrs: false,\n  props: {\n    /** @default \"secondary\" */\n    color: { type: String as PropType<SemanticColors<\"secondary\" | \"danger\" | \"warning\">>, default: \"secondary\" },\n  },\n  setup(props, { attrs, slots }) {\n    return () => h(\"div\", { \"class\": clsx(s.Title, classOf(attrs)), \"data-color\": props.color }, slots.default?.())\n  },\n})\n\n/** Description text of an EmptyMessage (React `EmptyMessage.Description`). */\nexport const EmptyMessageDescription = defineComponent({\n  name: \"EmptyMessageDescription\",\n  inheritAttrs: false,\n  setup(_props, { attrs, slots }) {\n    return () => h(\"div\", { class: clsx(s.Description, classOf(attrs)) }, slots.default?.())\n  },\n})\n\n/** Row of actions below an EmptyMessage (React `EmptyMessage.ActionRow`). */\nexport const EmptyMessageActionRow = defineComponent({\n  name: \"EmptyMessageActionRow\",\n  inheritAttrs: false,\n  setup(_props, { attrs, slots }) {\n    return () => h(\"div\", { class: clsx(s.ActionRow, classOf(attrs)) }, slots.default?.())\n  },\n})\n\nexport type EmptyMessageProps = InstanceType<typeof EmptyMessage>[\"$props\"] & { class?: string }\nexport type EmptyMessageIconProps = InstanceType<typeof EmptyMessageIcon>[\"$props\"] & { class?: string }\nexport type EmptyMessageTitleProps = InstanceType<typeof EmptyMessageTitle>[\"$props\"] & { class?: string }\n"]}

package/dist/es/components/EmptyMessage/index.js

@@ -0,0 +1,2 @@
+export { EmptyMessage, EmptyMessageActionRow, EmptyMessageDescription, EmptyMessageIcon, EmptyMessageTitle, } from "./EmptyMessage.js";
+//# sourceMappingURL=index.js.map

package/dist/es/components/EmptyMessage/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/EmptyMessage/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,qBAAqB,EACrB,uBAAuB,EACvB,gBAAgB,EAChB,iBAAiB,GAIlB,MAAM,mBAAmB,CAAA","sourcesContent":["export {\n  EmptyMessage,\n  EmptyMessageActionRow,\n  EmptyMessageDescription,\n  EmptyMessageIcon,\n  EmptyMessageTitle,\n  type EmptyMessageIconProps,\n  type EmptyMessageProps,\n  type EmptyMessageTitleProps,\n} from \"./EmptyMessage.js\"\n"]}

package/dist/es/components/Field/Field.js

@@ -0,0 +1,184 @@
+import clsx, {} from "clsx";
+import { Comment, Fragment, Static, Text, camelize, cloneVNode, defineComponent, h, isVNode, useId, } from "vue";
+import { FieldError } from "../FieldError/index.js";
+import { hasContent } from "../../lib/slotContent.js";
+import s from "@plexui/styles/components/Field/Field.module.css";
+const CONTROL_SIZES = new Set(["3xs", "2xs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"]);
+/** The slot props, recording whether the slot read them (the render-prop form). */
+const trackUse = (target) => {
+    const state = { used: false };
+    const proxy = new Proxy(target, {
+        get(object, key, receiver) {
+            state.used = true;
+            return Reflect.get(object, key, receiver);
+        },
+        has(object, key) {
+            state.used = true;
+            return Reflect.has(object, key);
+        },
+        ownKeys(object) {
+            state.used = true;
+            return Reflect.ownKeys(object);
+        },
+        getOwnPropertyDescriptor(object, key) {
+            state.used = true;
+            return Reflect.getOwnPropertyDescriptor(object, key);
+        },
+    });
+    return { proxy, state };
+};
+/** Like React's `isValidElement` for a slot root: an element or a component. */
+const isElementVNode = (node) => {
+    const { type } = node;
+    if (type === Fragment || type === Text || type === Comment || type === Static)
+        return false;
+    if (typeof type === "object" && type !== null && ("__isTeleport" in type || "__isSuspense" in type))
+        return false;
+    return true;
+};
+/**
+ * Template comments (`<!-- note -->`) are no children, like JSX comments.
+ * The empty placeholder of a `v-if` that renders nothing (or of a `false`
+ * child) still counts, like `{false}` in a React children array.
+ */
+const isTemplateComment = (node) => isVNode(node) && node.type === Comment && !!node.children && node.children !== "v-if";
+/**
+ * Unwraps content forwarded through a wrapper's `<slot />`: the fragment
+ * `renderSlot` creates, keyed `_<slot name>`.
+ */
+const unwrapForwardedSlots = (nodes) => nodes.flatMap((node) => isVNode(node) &&
+    node.type === Fragment &&
+    typeof node.key === "string" &&
+    node.key.startsWith("_") &&
+    Array.isArray(node.children)
+    ? unwrapForwardedSlots(node.children)
+    : [node]);
+/** The one element a non-render-prop slot holds, if it holds exactly one. */
+const singleElement = (nodes) => {
+    const roots = unwrapForwardedSlots(nodes).filter((node) => !isTemplateComment(node));
+    if (roots.length !== 1)
+        return undefined;
+    const [root] = roots;
+    return isVNode(root) && isElementVNode(root) ? root : undefined;
+};
+/** A child prop under its attribute name or its camelCase prop name. */
+const childProp = (props, name) => props[name] ?? props[camelize(name)];
+/**
+ * `cloneElement(child, fieldProps)` with React Field's merging rules. A child
+ * without its own name (`aria-label`, `aria-labelledby`, `label`, a `#label`
+ * slot) is also labelled by the field's label, which names triggers `for`
+ * cannot reach.
+ */
+const cloneWithFieldProps = (child, fieldChildProps, labelId) => {
+    const own = { ...(child.props ?? {}) };
+    const childDescribedBy = childProp(own, "aria-describedby");
+    const childInvalid = childProp(own, "aria-invalid");
+    const childSlots = child.children;
+    const childNamed = childProp(own, "aria-label") != null ||
+        childProp(own, "aria-labelledby") != null ||
+        own.label != null ||
+        (childSlots != null && typeof childSlots === "object" && !Array.isArray(childSlots) && "label" in childSlots);
+    const overrides = {
+        ...fieldChildProps,
+        // Merge with the child's own associations instead of overwriting them
+        "aria-describedby": [childDescribedBy, fieldChildProps["aria-describedby"]].filter(Boolean).join(" ") || undefined,
+        "aria-invalid": childInvalid ?? fieldChildProps["aria-invalid"],
+        ...(!childNamed && { "aria-labelledby": labelId }),
+    };
+    // One spelling per prop, so the field's value is the one that applies
+    for (const key of Object.keys(overrides)) {
+        for (const spelling of [key, camelize(key), key.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`)]) {
+            delete own[spelling];
+        }
+    }
+    return cloneVNode({ ...child, props: own }, overrides);
+};
+const FieldComponent = defineComponent({
+    name: "Field",
+    inheritAttrs: false,
+    props: {
+        /** Label text for the field (or the `label` slot) */
+        label: String,
+        /** Helper text below the label, linked via `aria-describedby` (or the `description` slot) */
+        description: String,
+        /**
+         * Error message below the control (or the `errorMessage` slot). When set,
+         * the control gets `aria-invalid="true"`. Rendered with FieldError.
+         */
+        errorMessage: String,
+        /** Content at the end of the label row, such as a link that acts on the field (or the `labelAction` slot) */
+        labelAction: String,
+        /** Font size of the label, to match the control's size. @default the child control's `size`, else "md" */
+        size: String,
+        /** Shows a required asterisk after the label. Visual only: no `required` attribute. @default false */
+        required: { type: Boolean, default: false },
+        /** Layout direction of label and control. @default "vertical" */
+        orientation: { type: String, default: "vertical" },
+        /** Overrides the generated id set on the control and the label's `for`. */
+        id: String,
+        /** Optically aligns the control's text with surrounding content; passed to the control. */
+        opticallyAlign: String,
+    },
+    slots: Object,
+    setup(props, { attrs, slots }) {
+        const generatedId = useId();
+        return () => {
+            const { required, orientation, opticallyAlign } = props;
+            const fieldId = props.id || `field-${generatedId}`;
+            const labelId = `${fieldId}-label`;
+            const description = slots.description ? slots.description() : props.description;
+            const hasDescription = slots.description ? hasContent(description) : !!description;
+            const errorMessage = slots.errorMessage ? slots.errorMessage() : props.errorMessage;
+            const hasError = slots.errorMessage ? hasContent(errorMessage) : !!errorMessage;
+            const descriptionId = hasDescription ? `${fieldId}-description` : undefined;
+            const errorId = hasError ? `${fieldId}-error` : undefined;
+            // Build aria-describedby from description + error IDs
+            const ariaDescribedBy = [descriptionId, errorId].filter(Boolean).join(" ") || undefined;
+            const invalid = hasError;
+            // Props to inject into the child control
+            const fieldChildProps = {
+                "id": fieldId,
+                "aria-describedby": ariaDescribedBy,
+                "aria-invalid": invalid || undefined,
+                ...(opticallyAlign && { opticallyAlign }),
+            };
+            // Resolve the children
+            let resolvedChildren;
+            let childSize;
+            if (slots.default) {
+                const { proxy, state } = trackUse({ ...fieldChildProps, "aria-labelledby": labelId });
+                const nodes = slots.default(proxy);
+                const child = state.used ? undefined : singleElement(nodes);
+                childSize = child?.props?.size;
+                resolvedChildren = child ? [cloneWithFieldProps(child, fieldChildProps, labelId)] : nodes;
+            }
+            const size = props.size ?? (CONTROL_SIZES.has(childSize) ? childSize : "md");
+            const labelAction = slots.labelAction ? slots.labelAction() : props.labelAction;
+            const hasLabelAction = slots.labelAction ? hasContent(labelAction) : !!labelAction;
+            const labelElement = h("label", { class: s.Label, id: labelId, for: fieldId }, [
+                slots.label ? slots.label() : props.label,
+                required ? h("span", { "class": s.RequiredIndicator, "aria-hidden": "true" }, "*") : null,
+            ]);
+            return h("div", {
+                "class": clsx(s.Field, attrs.class),
+                "data-size": size,
+                "data-orientation": orientation,
+                "data-optically-align": opticallyAlign,
+            }, [
+                h("div", { class: s.LabelGroup }, [
+                    hasLabelAction
+                        ? h("div", { class: s.LabelRow }, [labelElement, h("div", { class: s.LabelAction }, [labelAction])])
+                        : labelElement,
+                    hasDescription ? h("div", { class: s.Description, id: descriptionId }, [description]) : null,
+                ]),
+                h("div", { class: s.Content }, [
+                    h("div", { class: s.Control }, resolvedChildren),
+                    hasError ? h(FieldError, { id: errorId }, () => [errorMessage]) : null,
+                ]),
+            ]);
+        };
+    },
+});
+/** Form field wrapper with label, description, error and accessibility linking. */
+export const Field = FieldComponent;
+//# sourceMappingURL=Field.js.map

package/dist/es/components/Field/Field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../../../src/components/Field/Field.ts"],"names":[],"mappings":"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","sourcesContent":["import clsx, { type ClassValue } from \"clsx\"\nimport {\n  Comment,\n  Fragment,\n  Static,\n  Text,\n  camelize,\n  cloneVNode,\n  defineComponent,\n  h,\n  isVNode,\n  useId,\n  type PropType,\n  type SlotsType,\n  type VNode,\n  type VNodeArrayChildren,\n  type VNodeChild,\n} from \"vue\"\nimport type { ControlSize } from \"@plexui/styles/types\"\nimport { FieldError } from \"../FieldError/index.js\"\nimport { hasContent } from \"../../lib/slotContent.js\"\nimport s from \"@plexui/styles/components/Field/Field.module.css\"\n\n// Vue port of packages/ui/src/components/Field/Field.tsx.\n//\n// - `label`, `description` and `errorMessage` take a string prop or a slot of\n//   the same name (the slot wins), like React's ReactNode props.\n// - Children: React accepts an element, which Field clones with the field\n//   props, or a render prop `(fieldProps) => ReactNode`, which it leaves alone.\n//   Both are the default slot here, which receives the field props:\n//   - a slot that reads them (`v-slot=\"fieldProps\"` + `v-bind=\"fieldProps\"`,\n//     `v-slot=\"{ id }\"`, `(fieldProps) => h(...)`) is the render prop: its\n//     content renders as it is.\n//   - a slot that does not read them and holds exactly one element or\n//     component gets it cloned like React's `cloneElement`: `id` and\n//     `opticallyAlign` replace the child's own, `aria-describedby` is joined\n//     after the child's own ids, and an explicit `aria-invalid` on the child\n//     wins. Template comments do not count as children (JSX comments); the\n//     placeholder of a `v-if` that renders nothing does, like `{false}` in a\n//     React children array, so `<A v-if=\"x\" /><Input />` is not cloned.\n//   - anything else (text, several roots, a `v-for` list) renders as it is,\n//     like a React child that is not a single element.\n//   - content a wrapper forwards with `<slot />` counts as its own roots, as\n//     React's `children` passed on to Field are the elements themselves.\n// - As in React only `class` reaches the root element; other attributes are\n//   dropped.\n\nexport type FieldChildProps = {\n  id: string\n  /** The label's id. Bind it to a control that the label's `for` cannot name, such as a Select trigger. */\n  \"aria-labelledby\"?: string\n  \"aria-describedby\"?: string\n  \"aria-invalid\"?: boolean\n  opticallyAlign?: \"start\" | \"end\"\n}\n\ntype Props = Record<string, unknown>\n\nconst CONTROL_SIZES: ReadonlySet<unknown> = new Set([\"3xs\", \"2xs\", \"xs\", \"sm\", \"md\", \"lg\", \"xl\", \"2xl\", \"3xl\"])\n\n/** The slot props, recording whether the slot read them (the render-prop form). */\nconst trackUse = (target: FieldChildProps) => {\n  const state = { used: false }\n  const proxy = new Proxy(target, {\n    get(object, key, receiver) {\n      state.used = true\n      return Reflect.get(object, key, receiver)\n    },\n    has(object, key) {\n      state.used = true\n      return Reflect.has(object, key)\n    },\n    ownKeys(object) {\n      state.used = true\n      return Reflect.ownKeys(object)\n    },\n    getOwnPropertyDescriptor(object, key) {\n      state.used = true\n      return Reflect.getOwnPropertyDescriptor(object, key)\n    },\n  })\n  return { proxy, state }\n}\n\n/** Like React's `isValidElement` for a slot root: an element or a component. */\nconst isElementVNode = (node: VNode) => {\n  const { type } = node\n  if (type === Fragment || type === Text || type === Comment || type === Static) return false\n  if (typeof type === \"object\" && type !== null && (\"__isTeleport\" in type || \"__isSuspense\" in type)) return false\n  return true\n}\n\n/**\n * Template comments (`<!-- note -->`) are no children, like JSX comments.\n * The empty placeholder of a `v-if` that renders nothing (or of a `false`\n * child) still counts, like `{false}` in a React children array.\n */\nconst isTemplateComment = (node: VNodeArrayChildren[number]) =>\n  isVNode(node) && node.type === Comment && !!node.children && node.children !== \"v-if\"\n\n/**\n * Unwraps content forwarded through a wrapper's `<slot />`: the fragment\n * `renderSlot` creates, keyed `_<slot name>`.\n */\nconst unwrapForwardedSlots = (nodes: VNodeArrayChildren): VNodeArrayChildren =>\n  nodes.flatMap((node) =>\n    isVNode(node) &&\n    node.type === Fragment &&\n    typeof node.key === \"string\" &&\n    node.key.startsWith(\"_\") &&\n    Array.isArray(node.children)\n      ? unwrapForwardedSlots(node.children)\n      : [node],\n  )\n\n/** The one element a non-render-prop slot holds, if it holds exactly one. */\nconst singleElement = (nodes: VNodeArrayChildren): VNode | undefined => {\n  const roots = unwrapForwardedSlots(nodes).filter((node) => !isTemplateComment(node))\n  if (roots.length !== 1) return undefined\n  const [root] = roots\n  return isVNode(root) && isElementVNode(root) ? root : undefined\n}\n\n/** A child prop under its attribute name or its camelCase prop name. */\nconst childProp = (props: Props, name: string) => props[name] ?? props[camelize(name)]\n\n/**\n * `cloneElement(child, fieldProps)` with React Field's merging rules. A child\n * without its own name (`aria-label`, `aria-labelledby`, `label`, a `#label`\n * slot) is also labelled by the field's label, which names triggers `for`\n * cannot reach.\n */\nconst cloneWithFieldProps = (child: VNode, fieldChildProps: FieldChildProps, labelId: string): VNode => {\n  const own: Props = { ...(child.props ?? {}) }\n  const childDescribedBy = childProp(own, \"aria-describedby\") as string | undefined\n  const childInvalid = childProp(own, \"aria-invalid\")\n  const childSlots = child.children\n  const childNamed =\n    childProp(own, \"aria-label\") != null ||\n    childProp(own, \"aria-labelledby\") != null ||\n    own.label != null ||\n    (childSlots != null && typeof childSlots === \"object\" && !Array.isArray(childSlots) && \"label\" in childSlots)\n\n  const overrides: Props = {\n    ...fieldChildProps,\n    // Merge with the child's own associations instead of overwriting them\n    \"aria-describedby\": [childDescribedBy, fieldChildProps[\"aria-describedby\"]].filter(Boolean).join(\" \") || undefined,\n    \"aria-invalid\": childInvalid ?? fieldChildProps[\"aria-invalid\"],\n    ...(!childNamed && { \"aria-labelledby\": labelId }),\n  }\n\n  // One spelling per prop, so the field's value is the one that applies\n  for (const key of Object.keys(overrides)) {\n    for (const spelling of [key, camelize(key), key.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`)]) {\n      delete own[spelling]\n    }\n  }\n\n  return cloneVNode({ ...child, props: own } as VNode, overrides)\n}\n\nconst FieldComponent = defineComponent({\n  name: \"Field\",\n  inheritAttrs: false,\n  props: {\n    /** Label text for the field (or the `label` slot) */\n    label: String,\n    /** Helper text below the label, linked via `aria-describedby` (or the `description` slot) */\n    description: String,\n    /**\n     * Error message below the control (or the `errorMessage` slot). When set,\n     * the control gets `aria-invalid=\"true\"`. Rendered with FieldError.\n     */\n    errorMessage: String,\n    /** Content at the end of the label row, such as a link that acts on the field (or the `labelAction` slot) */\n    labelAction: String,\n    /** Font size of the label, to match the control's size. @default the child control's `size`, else \"md\" */\n    size: String as PropType<ControlSize>,\n    /** Shows a required asterisk after the label. Visual only: no `required` attribute. @default false */\n    required: { type: Boolean, default: false },\n    /** Layout direction of label and control. @default \"vertical\" */\n    orientation: { type: String as PropType<\"vertical\" | \"horizontal\">, default: \"vertical\" },\n    /** Overrides the generated id set on the control and the label's `for`. */\n    id: String,\n    /** Optically aligns the control's text with surrounding content; passed to the control. */\n    opticallyAlign: String as PropType<\"start\" | \"end\">,\n  },\n  slots: Object as SlotsType<{\n    /** The control. Read the props to render them yourself (React's render prop). */\n    default?: (fieldProps: FieldChildProps) => VNodeChild\n    label?: () => VNodeChild\n    labelAction?: () => VNodeChild\n    description?: () => VNodeChild\n    errorMessage?: () => VNodeChild\n  }>,\n  setup(props, { attrs, slots }) {\n    const generatedId = useId()\n\n    return () => {\n      const { required, orientation, opticallyAlign } = props\n      const fieldId = props.id || `field-${generatedId}`\n      const labelId = `${fieldId}-label`\n\n      const description = slots.description ? slots.description() : props.description\n      const hasDescription = slots.description ? hasContent(description as VNodeArrayChildren) : !!description\n      const errorMessage = slots.errorMessage ? slots.errorMessage() : props.errorMessage\n      const hasError = slots.errorMessage ? hasContent(errorMessage as VNodeArrayChildren) : !!errorMessage\n\n      const descriptionId = hasDescription ? `${fieldId}-description` : undefined\n      const errorId = hasError ? `${fieldId}-error` : undefined\n\n      // Build aria-describedby from description + error IDs\n      const ariaDescribedBy = [descriptionId, errorId].filter(Boolean).join(\" \") || undefined\n      const invalid = hasError\n\n      // Props to inject into the child control\n      const fieldChildProps: FieldChildProps = {\n        \"id\": fieldId,\n        \"aria-describedby\": ariaDescribedBy,\n        \"aria-invalid\": invalid || undefined,\n        ...(opticallyAlign && { opticallyAlign }),\n      }\n\n      // Resolve the children\n      let resolvedChildren: VNodeArrayChildren | undefined\n      let childSize: unknown\n      if (slots.default) {\n        const { proxy, state } = trackUse({ ...fieldChildProps, \"aria-labelledby\": labelId })\n        const nodes = slots.default(proxy) as VNodeArrayChildren\n        const child = state.used ? undefined : singleElement(nodes)\n        childSize = child?.props?.size\n        resolvedChildren = child ? [cloneWithFieldProps(child, fieldChildProps, labelId)] : nodes\n      }\n      const size = props.size ?? (CONTROL_SIZES.has(childSize) ? (childSize as ControlSize) : \"md\")\n\n      const labelAction = slots.labelAction ? slots.labelAction() : props.labelAction\n      const hasLabelAction = slots.labelAction ? hasContent(labelAction as VNodeArrayChildren) : !!labelAction\n      const labelElement = h(\"label\", { class: s.Label, id: labelId, for: fieldId }, [\n        slots.label ? slots.label() : props.label,\n        required ? h(\"span\", { \"class\": s.RequiredIndicator, \"aria-hidden\": \"true\" }, \"*\") : null,\n      ])\n\n      return h(\n        \"div\",\n        {\n          \"class\": clsx(s.Field, attrs.class as ClassValue),\n          \"data-size\": size,\n          \"data-orientation\": orientation,\n          \"data-optically-align\": opticallyAlign,\n        },\n        [\n          h(\"div\", { class: s.LabelGroup }, [\n            hasLabelAction\n              ? h(\"div\", { class: s.LabelRow }, [labelElement, h(\"div\", { class: s.LabelAction }, [labelAction as VNodeChild])])\n              : labelElement,\n            hasDescription ? h(\"div\", { class: s.Description, id: descriptionId }, [description as VNodeChild]) : null,\n          ]),\n          h(\"div\", { class: s.Content }, [\n            h(\"div\", { class: s.Control }, resolvedChildren),\n            hasError ? h(FieldError, { id: errorId }, () => [errorMessage as VNodeChild]) : null,\n          ]),\n        ],\n      )\n    }\n  },\n})\n\ntype FieldOwnProps = InstanceType<typeof FieldComponent>[\"$props\"]\n\n/** Field props; `class` reaches the root element. */\nexport type FieldProps = FieldOwnProps & { class?: ClassValue }\n\n/** Form field wrapper with label, description, error and accessibility linking. */\nexport const Field = FieldComponent as typeof FieldComponent & { new (): { $props: FieldProps } }\n"]}

package/dist/es/components/Field/index.js

@@ -0,0 +1,2 @@
+export { Field } from "./Field.js";
+//# sourceMappingURL=index.js.map

package/dist/es/components/Field/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Field/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAyC,MAAM,YAAY,CAAA","sourcesContent":["export { Field, type FieldProps, type FieldChildProps } from \"./Field.js\"\n"]}

package/dist/es/components/FieldError/FieldError.js

@@ -0,0 +1,23 @@
+import { defineComponent, h } from "vue";
+import { ExclamationMarkCircle } from "../Icon/index.js";
+import s from "@plexui/styles/components/FieldError/FieldError.module.css";
+/**
+ * Port of packages/ui/src/components/FieldError/FieldError.tsx. Like React,
+ * only `class` and `id` reach the DOM; other attributes are dropped.
+ */
+export const FieldError = defineComponent({
+    name: "FieldError",
+    inheritAttrs: false,
+    props: {
+        id: String,
+        /** Shows the error icon before the message. @default true */
+        icon: { type: Boolean, default: true },
+    },
+    setup(props, { slots, attrs }) {
+        return () => h("div", { class: [s.FieldError, attrs.class], id: props.id, role: "alert" }, [
+            props.icon ? h(ExclamationMarkCircle, { class: s.Icon }) : null,
+            h("span", null, slots.default?.()),
+        ]);
+    },
+});
+//# sourceMappingURL=FieldError.js.map

package/dist/es/components/FieldError/FieldError.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldError.js","sourceRoot":"","sources":["../../../../src/components/FieldError/FieldError.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,CAAC,EAAE,MAAM,KAAK,CAAA;AACxC,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAA;AACxD,OAAO,CAAC,MAAM,4DAA4D,CAAA;AAE1E;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,eAAe,CAAC;IACxC,IAAI,EAAE,YAAY;IAClB,YAAY,EAAE,KAAK;IACnB,KAAK,EAAE;QACL,EAAE,EAAE,MAAM;QACV,6DAA6D;QAC7D,IAAI,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;KACvC;IACD,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE;QAC3B,OAAO,GAAG,EAAE,CACV,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE,EAAE,EAAE,KAAK,CAAC,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;YAC5E,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,qBAAqB,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI;YAC/D,CAAC,CAAC,MAAM,EAAE,IAAI,EAAE,KAAK,CAAC,OAAO,EAAE,EAAE,CAAC;SACnC,CAAC,CAAA;IACN,CAAC;CACF,CAAC,CAAA","sourcesContent":["import { defineComponent, h } from \"vue\"\nimport { ExclamationMarkCircle } from \"../Icon/index.js\"\nimport s from \"@plexui/styles/components/FieldError/FieldError.module.css\"\n\n/**\n * Port of packages/ui/src/components/FieldError/FieldError.tsx. Like React,\n * only `class` and `id` reach the DOM; other attributes are dropped.\n */\nexport const FieldError = defineComponent({\n  name: \"FieldError\",\n  inheritAttrs: false,\n  props: {\n    id: String,\n    /** Shows the error icon before the message. @default true */\n    icon: { type: Boolean, default: true },\n  },\n  setup(props, { slots, attrs }) {\n    return () =>\n      h(\"div\", { class: [s.FieldError, attrs.class], id: props.id, role: \"alert\" }, [\n        props.icon ? h(ExclamationMarkCircle, { class: s.Icon }) : null,\n        h(\"span\", null, slots.default?.()),\n      ])\n  },\n})\n\nexport type FieldErrorProps = InstanceType<typeof FieldError>[\"$props\"]\n"]}

package/dist/es/components/FieldError/index.js

@@ -0,0 +1,2 @@
+export { FieldError } from "./FieldError.js";
+//# sourceMappingURL=index.js.map

package/dist/es/components/FieldError/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/FieldError/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAwB,MAAM,iBAAiB,CAAA","sourcesContent":["export { FieldError, type FieldErrorProps } from \"./FieldError.js\"\n"]}